diff --git a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx
index 78f4f54fd..dc5c85fe7 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx
@@ -3,10 +3,10 @@
 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 Button from "@/components/TempDesignSystem/Button"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx
index 77b4b5e77..bd5bb0415 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx
@@ -1,10 +1,10 @@
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { serverClient } from "@/lib/trpc/server"
 
 import MembershipLevelIcon from "@/components/Levels/Icon"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Overview/Friend/MembershipNumber/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Overview/Friend/MembershipNumber/index.tsx
index ea332839d..cf4d9cb1b 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Overview/Friend/MembershipNumber/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Overview/Friend/MembershipNumber/index.tsx
@@ -1,4 +1,5 @@
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Caption from "@scandic-hotels/design-system/Caption"
+
 import { getIntl } from "@/i18n"
 
 import CopyButton from "../../Buttons/CopyButton"
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ActiveRedeemedBadge.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ActiveRedeemedBadge.tsx
index 555e05b22..66927c18d 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ActiveRedeemedBadge.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ActiveRedeemedBadge.tsx
@@ -3,10 +3,9 @@
 import { motion } from "motion/react"
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-
 import styles from "./redeem.module.css"
 
 export default function ActiveRedeemedBadge() {
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx
index c5115a787..7b488302e 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx
@@ -2,11 +2,11 @@
 
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/MembershipNumberBadge.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/MembershipNumberBadge.tsx
index 5abff1df4..516cfcf24 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/MembershipNumberBadge.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/MembershipNumberBadge.tsx
@@ -1,6 +1,6 @@
 import { useIntl } from "react-intl"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Caption from "@scandic-hotels/design-system/Caption"
 
 import styles from "./redeem.module.css"
 
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/TimedRedeemedBadge.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/TimedRedeemedBadge.tsx
index bb69619d3..476e70f02 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/TimedRedeemedBadge.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/TimedRedeemedBadge.tsx
@@ -3,10 +3,10 @@
 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 Countdown from "@/components/Countdown"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import useRedeemFlow from "./useRedeemFlow"
 
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
index 2dca6e7ff..91d544f1c 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
@@ -1,11 +1,11 @@
 "use client"
 
 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 Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import useLang from "@/hooks/useLang"
 
diff --git a/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx
index 7daf5390d..93cecf71e 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx
@@ -5,10 +5,11 @@ import { useParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
+
 import PoiMarker from "@/components/Maps/Markers/Poi"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { trackHotelMapClick } from "@/utils/tracking"
 
diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx
index 623b0617d..55547c375 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx
@@ -1,3 +1,4 @@
+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 { Country } from "@scandic-hotels/trpc/types/country"
@@ -5,7 +6,6 @@ import { Country } from "@scandic-hotels/trpc/types/country"
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
diff --git a/apps/scandic-web/components/DatePicker/Range/Desktop.tsx b/apps/scandic-web/components/DatePicker/Range/Desktop.tsx
index 2c6a73ca2..0ccf12aa7 100644
--- a/apps/scandic-web/components/DatePicker/Range/Desktop.tsx
+++ b/apps/scandic-web/components/DatePicker/Range/Desktop.tsx
@@ -6,12 +6,12 @@ import { useIntl } from "react-intl"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
 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 { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"
 
 import { locales } from "../locales"
diff --git a/apps/scandic-web/components/DatePicker/Single/Desktop.tsx b/apps/scandic-web/components/DatePicker/Single/Desktop.tsx
index b8e6afcaf..ea8cb107e 100644
--- a/apps/scandic-web/components/DatePicker/Single/Desktop.tsx
+++ b/apps/scandic-web/components/DatePicker/Single/Desktop.tsx
@@ -6,11 +6,11 @@ import { useIntl } from "react-intl"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
 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 Button from "@/components/TempDesignSystem/Button"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
diff --git a/apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx b/apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx
index e34465e36..ebeb5ef90 100644
--- a/apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx
+++ b/apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx
@@ -1,4 +1,5 @@
 import { removeMultipleSlashes } from "@scandic-hotels/common/utils/url"
+import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import {
   AvailableParagraphFormatEnum,
@@ -14,7 +15,6 @@ import ImageContainer from "../ImageContainer"
 import Table from "../TempDesignSystem/Table"
 import BiroScript from "../TempDesignSystem/Text/BiroScript"
 import Body from "../TempDesignSystem/Text/Body"
-import Caption from "../TempDesignSystem/Text/Caption"
 import Footnote from "../TempDesignSystem/Text/Footnote"
 import Subtitle from "../TempDesignSystem/Text/Subtitle"
 import Title from "../TempDesignSystem/Text/Title"
diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
index ff4dc3156..698f6bdf6 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
@@ -4,6 +4,7 @@ import { type FieldError, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
@@ -15,7 +16,6 @@ import Input from "@/components/TempDesignSystem/Form/Input"
 import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors"
 import Switch from "@/components/TempDesignSystem/Form/Switch"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import { Input as BookingWidgetInput } from "../Input"
 import { isMultiRoomError } from "../utils"
diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx
index 03e2884d5..605bc0783 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx
@@ -5,6 +5,7 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
@@ -13,7 +14,6 @@ import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import { RemoveExtraRooms } from "../BookingCode"
 import { isMultiRoomError } from "../utils"
diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx
index 65d2d0fef..b4c2e5fca 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/ClearSearchButton/index.tsx
@@ -1,10 +1,9 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-
 import { buttonVariants } from "./variants"
 
 import type { ClearSearchButtonProps } from "@/types/components/search"
diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx
index a60bef325..cca0250a3 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx
@@ -4,12 +4,12 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useDebounceValue } from "usehooks-ts"
 
+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 { trpc } from "@scandic-hotels/trpc/client"
 
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import useLang from "@/hooks/useLang"
 
diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/ValidationError/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/ValidationError/index.tsx
index 586b38059..192b6bd0a 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/ValidationError/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/ValidationError/index.tsx
@@ -1,9 +1,8 @@
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-
 import styles from "./validationError.module.css"
 
 export default function ValidationError() {
diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Voucher/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
index eab899870..f16fba60e 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
@@ -2,8 +2,9 @@
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
+
 import SkeletonShimmer from "@/components/SkeletonShimmer"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import BookingCode from "../BookingCode"
 import RewardNight from "../RewardNight"
diff --git a/apps/scandic-web/components/GuestsRoomsPicker/AdultSelector/index.tsx b/apps/scandic-web/components/GuestsRoomsPicker/AdultSelector/index.tsx
index f0adad32e..022570905 100644
--- a/apps/scandic-web/components/GuestsRoomsPicker/AdultSelector/index.tsx
+++ b/apps/scandic-web/components/GuestsRoomsPicker/AdultSelector/index.tsx
@@ -3,7 +3,7 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Caption from "@scandic-hotels/design-system/Caption"
 
 import Counter from "../Counter"
 
diff --git a/apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx b/apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
index fc4f357f9..084820992 100644
--- a/apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
+++ b/apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
@@ -3,11 +3,11 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 
 import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./child-selector.module.css"
 
diff --git a/apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/index.tsx b/apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/index.tsx
index 026428787..897ca4624 100644
--- a/apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/index.tsx
+++ b/apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/index.tsx
@@ -3,7 +3,7 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Caption from "@scandic-hotels/design-system/Caption"
 
 import Counter from "../Counter"
 import ChildInfoSelector from "./ChildInfoSelector"
diff --git a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx
index 8d9f3b13f..9f50845b0 100644
--- a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx
@@ -3,6 +3,7 @@
 import FocusLock from "react-focus-lock"
 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 { trpc } from "@scandic-hotels/trpc/client"
@@ -10,7 +11,6 @@ import { trpc } from "@scandic-hotels/trpc/client"
 import { logout } from "@/constants/routes/handleAuth"
 
 import Link from "@/components/TempDesignSystem/Link"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
diff --git a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
index d9cc5cd08..170347720 100644
--- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
@@ -2,13 +2,13 @@
 
 import FocusLock from "react-focus-lock"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import useDropdownStore from "@/stores/main-menu"
 
 import Card from "@/components/TempDesignSystem/Card"
 import Link from "@/components/TempDesignSystem/Link"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./megaMenu.module.css"
diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
index b388e3dc6..9aa2f00b9 100644
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
@@ -3,6 +3,7 @@
 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 { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -13,7 +14,6 @@ import {
 } from "@/constants/dateFormats"
 
 import Image from "@/components/Image"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"
 
 import RoomDetailsSidePeek from "./RoomDetailsSidePeek"
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/Signup/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/Signup/index.tsx
index 8b28f35c8..6329e9768 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/Signup/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/Signup/index.tsx
@@ -4,9 +4,10 @@ import { useEffect, useState } from "react"
 import { type RegisterOptions, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
+
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./signup.module.css"
 
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/index.tsx
index 9370285f8..b574dac07 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/index.tsx
@@ -1,9 +1,9 @@
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./guaranteeDetails.module.css"
 
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx
index 21ffb6ca3..a4ac4b4ff 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx
@@ -1,8 +1,9 @@
 import React from "react"
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
+
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { formatPrice } from "@/utils/numberFormatting"
 
 import {
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/TermsAndConditions/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/TermsAndConditions/index.tsx
index 8e890eac7..2303a48f9 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/TermsAndConditions/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/TermsAndConditions/index.tsx
@@ -1,12 +1,12 @@
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { bookingTermsAndConditions, privacyPolicy } from "@/constants/webHrefs"
 
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Link from "@/components/TempDesignSystem/Link"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"
 
 import styles from "../payment.module.css"
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
index cd6eb97ed..e9c467367 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
@@ -9,12 +9,12 @@ import {
 } from "react-aria-components"
 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 Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { formatPrice } from "@/utils/numberFormatting"
 
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx
index 6a1db959f..fb976771f 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx
@@ -1,13 +1,13 @@
 import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { formatPrice } from "@/utils/numberFormatting"
diff --git a/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx b/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx
index b3cde6712..3992a4aa5 100644
--- a/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx
@@ -6,6 +6,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
+import Caption from "@scandic-hotels/design-system/Caption"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import { customerService } from "@/constants/webHrefs"
@@ -14,7 +15,6 @@ import Button from "@/components/TempDesignSystem/Button"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
diff --git a/apps/scandic-web/components/HotelReservation/HotelCard/HotelChequeCard/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCard/HotelChequeCard/index.tsx
index e41d689fa..373df3901 100644
--- a/apps/scandic-web/components/HotelReservation/HotelCard/HotelChequeCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/HotelCard/HotelChequeCard/index.tsx
@@ -1,8 +1,8 @@
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import Caption from "@scandic-hotels/design-system/Caption"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./hotelChequeCard.module.css"
diff --git a/apps/scandic-web/components/HotelReservation/HotelCard/HotelPointsRow/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCard/HotelPointsRow/index.tsx
index 45b01bdfb..da2487fed 100644
--- a/apps/scandic-web/components/HotelReservation/HotelCard/HotelPointsRow/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/HotelCard/HotelPointsRow/index.tsx
@@ -1,6 +1,7 @@
 import { useIntl } from "react-intl"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Caption from "@scandic-hotels/design-system/Caption"
+
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./hotelPointsRow.module.css"
diff --git a/apps/scandic-web/components/HotelReservation/HotelCard/HotelPriceCard/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCard/HotelPriceCard/index.tsx
index 2932fd157..49cf7a9ef 100644
--- a/apps/scandic-web/components/HotelReservation/HotelCard/HotelPriceCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/HotelCard/HotelPriceCard/index.tsx
@@ -1,11 +1,11 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { RateTypeEnum } from "@scandic-hotels/trpc/enums/rateType"
 
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./hotelPriceCard.module.css"
diff --git a/apps/scandic-web/components/HotelReservation/HotelCard/HotelVoucherCard/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCard/HotelVoucherCard/index.tsx
index 44bfcdf24..0011a023f 100644
--- a/apps/scandic-web/components/HotelReservation/HotelCard/HotelVoucherCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/HotelCard/HotelVoucherCard/index.tsx
@@ -1,8 +1,8 @@
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import Caption from "@scandic-hotels/design-system/Caption"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./hotelVoucherCard.module.css"
diff --git a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
index a25b9042a..7085c0222 100644
--- a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
@@ -11,6 +11,7 @@ import { memo } from "react"
 import { useIntl } from "react-intl"
 
 import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
+import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -25,7 +26,6 @@ import BookingCodeChip from "@/components/BookingCodeChip"
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
 import Link from "@/components/TempDesignSystem/Link"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 import { getSingleDecimal } from "@/utils/numberFormatting"
 
diff --git a/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx
index ef1496cc0..dd9e44cbf 100644
--- a/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx
@@ -4,6 +4,7 @@ import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
+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 { Typography } from "@scandic-hotels/design-system/Typography"
@@ -11,7 +12,6 @@ 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 Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { isValidClientSession } from "@/utils/clientSession"
diff --git a/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx
index 96aa74555..ae37b3399 100644
--- a/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx
@@ -4,6 +4,7 @@ import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
+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 { Typography } from "@scandic-hotels/design-system/Typography"
@@ -12,7 +13,6 @@ import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx
index 60623c97e..0f71f9e33 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx
@@ -1,4 +1,5 @@
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Caption from "@scandic-hotels/design-system/Caption"
+
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./priceContainer.module.css"
diff --git a/apps/scandic-web/components/HotelReservation/PaymentOption/index.tsx b/apps/scandic-web/components/HotelReservation/PaymentOption/index.tsx
index b9b8c58f9..0aba9e4ef 100644
--- a/apps/scandic-web/components/HotelReservation/PaymentOption/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/PaymentOption/index.tsx
@@ -2,10 +2,11 @@ import { cx } from "class-variance-authority"
 import Image from "next/image"
 import { Radio } from "react-aria-components"
 
+import Caption from "@scandic-hotels/design-system/Caption"
+
 import { PAYMENT_METHOD_ICONS } from "@/constants/booking"
 
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./paymentOption.module.css"
 
diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
index e40c47fdc..f315bf4ce 100644
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
@@ -5,6 +5,7 @@ import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
 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 { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
@@ -16,7 +17,6 @@ import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import Modal from "@/components/Modal"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"
diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
index a468e1fc6..aa50ef414 100644
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
@@ -5,6 +5,7 @@ import { useState, useTransition } from "react"
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
+import Caption from "@scandic-hotels/design-system/Caption"
 import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
 import { RateTypeEnum } from "@scandic-hotels/trpc/enums/rateType"
 
@@ -13,7 +14,6 @@ import { useRatesStore } from "@/stores/select-rate"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { isValidClientSession } from "@/utils/clientSession"
diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
index a284ddbab..7e0b35c93 100644
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 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 { RateEnum } from "@scandic-hotels/trpc/enums/rate"
 
@@ -13,7 +14,6 @@ import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useRoomContext } from "@/contexts/SelectRate/Room"
 import { isValidClientSession } from "@/utils/clientSession"
diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx
index 6877ed8e2..f5e70ea62 100644
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx
@@ -1,10 +1,9 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-
 import styles from "./notAvailable.module.css"
 
 export default function RoomNotAvailable() {
diff --git a/apps/scandic-web/components/HotelReservation/SignupPromo/Desktop.tsx b/apps/scandic-web/components/HotelReservation/SignupPromo/Desktop.tsx
index 27301e86d..f73342bea 100644
--- a/apps/scandic-web/components/HotelReservation/SignupPromo/Desktop.tsx
+++ b/apps/scandic-web/components/HotelReservation/SignupPromo/Desktop.tsx
@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Caption from "@scandic-hotels/design-system/Caption"
+
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { formatPrice } from "@/utils/numberFormatting"
 
diff --git a/apps/scandic-web/components/HotelReservation/TripAdvisorChip/index.tsx b/apps/scandic-web/components/HotelReservation/TripAdvisorChip/index.tsx
index fc5db8603..e79c80ca4 100644
--- a/apps/scandic-web/components/HotelReservation/TripAdvisorChip/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/TripAdvisorChip/index.tsx
@@ -1,7 +1,6 @@
+import Caption from "@scandic-hotels/design-system/Caption"
 import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-
 import styles from "./tripAdvisorChip.module.css"
 
 import type { TripAdvisorProps } from "@/types/components/hotelReservation/tripAdvisorProps"
diff --git a/apps/scandic-web/components/ImageContainer/index.tsx b/apps/scandic-web/components/ImageContainer/index.tsx
index 390aaa81b..897699def 100644
--- a/apps/scandic-web/components/ImageContainer/index.tsx
+++ b/apps/scandic-web/components/ImageContainer/index.tsx
@@ -1,5 +1,6 @@
+import Caption from "@scandic-hotels/design-system/Caption"
+
 import Image from "../Image"
-import Caption from "../TempDesignSystem/Text/Caption"
 
 import styles from "./imageContainer.module.css"
 
diff --git a/apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/index.tsx b/apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/index.tsx
index f771c051a..0fbdb84fb 100644
--- a/apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/index.tsx
+++ b/apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/index.tsx
@@ -4,8 +4,9 @@ import {
 } from "@vis.gl/react-google-maps"
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
+
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import HotelMarkerByType from "../../Markers"
 import PoiMarker from "../../Markers/Poi"
diff --git a/apps/scandic-web/components/Profile/CreditCardRow/index.tsx b/apps/scandic-web/components/Profile/CreditCardRow/index.tsx
index 558956059..f196bd50d 100644
--- a/apps/scandic-web/components/Profile/CreditCardRow/index.tsx
+++ b/apps/scandic-web/components/Profile/CreditCardRow/index.tsx
@@ -1,7 +1,7 @@
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import DeleteCreditCardConfirmation from "../DeleteCreditCardConfirmation"
 
diff --git a/apps/scandic-web/components/SasTierComparison/index.tsx b/apps/scandic-web/components/SasTierComparison/index.tsx
index 2d8117653..a0ac2f78c 100644
--- a/apps/scandic-web/components/SasTierComparison/index.tsx
+++ b/apps/scandic-web/components/SasTierComparison/index.tsx
@@ -1,6 +1,7 @@
 "use client"
 import Image from "next/image"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import JsonToHtml from "@/components/JsonToHtml"
@@ -9,7 +10,6 @@ import Link from "@/components/TempDesignSystem/Link"
 import SectionContainer from "../Section/Container"
 import Button from "../TempDesignSystem/Button"
 import Body from "../TempDesignSystem/Text/Body"
-import Caption from "../TempDesignSystem/Text/Caption"
 import Subtitle from "../TempDesignSystem/Text/Subtitle"
 import Title from "../TempDesignSystem/Text/Title"
 
diff --git a/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx b/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx
index 6645741a1..aa372e83c 100644
--- a/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx
@@ -1,10 +1,10 @@
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 
 import Image from "@/components/Image"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { formatPrice } from "@/utils/numberFormatting"
 
 import styles from "./ancillaryCard.module.css"
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/index.tsx
index e9eef1df6..9d742f2c6 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Checkbox/index.tsx
@@ -5,10 +5,9 @@ import { Checkbox as AriaCheckbox } from "react-aria-components"
 import { useController, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-
 import { getErrorMessage } from "./errors"
 
 import styles from "./checkbox.module.css"
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/ErrorMessage/Error.tsx b/apps/scandic-web/components/TempDesignSystem/Form/ErrorMessage/Error.tsx
index 0a55ab94f..bb5837823 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/ErrorMessage/Error.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/ErrorMessage/Error.tsx
@@ -1,7 +1,6 @@
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-
 import styles from "./error.module.css"
 
 export default function Error({ children }: React.PropsWithChildren) {
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
index 0427f5623..8662776e6 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
@@ -5,11 +5,10 @@ import { Text, TextField } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Input as InputWithLabel } from "@scandic-hotels/design-system/Input"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-
 import { getErrorMessage } from "./errors"
 
 import styles from "./input.module.css"
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx
index 62edf64ea..c08f8e04e 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx
@@ -6,11 +6,11 @@ import { Controller, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { passwordValidators } from "@scandic-hotels/common/utils/zod/passwordValidator"
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Input } from "@scandic-hotels/design-system/Input"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import { getErrorMessage } from "../Input/errors"
 
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Switch/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Switch/index.tsx
index 41f13c376..795b4ddfd 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/Switch/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Switch/index.tsx
@@ -3,10 +3,9 @@
 import { Switch as AriaSwitch } from "react-aria-components"
 import { useController, useFormContext } from "react-hook-form"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-
 import styles from "./switch.module.css"
 
 import type { SwitchProps } from "@/types/components/switch"
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/TextArea/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/TextArea/index.tsx
index d25728c7c..67f9de3ac 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/TextArea/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/TextArea/index.tsx
@@ -8,11 +8,10 @@ import {
 } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"
 
+import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Label } from "@scandic-hotels/design-system/Label"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-
 import Body from "../../Text/Body"
 
 import styles from "./textarea.module.css"
diff --git a/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx b/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx
index 71196a1e2..8a9a29844 100644
--- a/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx
@@ -2,6 +2,7 @@
 import { useState } from "react"
 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"
 
@@ -9,7 +10,6 @@ import Image from "@/components/Image"
 
 import ShowMoreButton from "../ShowMoreButton"
 import Body from "../Text/Body"
-import Caption from "../Text/Caption"
 import Subtitle from "../Text/Subtitle"
 import { translateRoomLighting, translateSeatingType } from "./utils"
 
diff --git a/apps/scandic-web/components/TempDesignSystem/Text/Caption/caption.ts b/apps/scandic-web/components/TempDesignSystem/Text/Caption/caption.ts
deleted file mode 100644
index 1a7272417..000000000
--- a/apps/scandic-web/components/TempDesignSystem/Text/Caption/caption.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-
-import type { captionVariants } from "./variants"
-
-export interface CaptionProps
-  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof captionVariants> {
-  asChild?: boolean
-  fontOnly?: boolean
-}
diff --git a/apps/scandic-web/components/TempDesignSystem/Tooltip/index.tsx b/apps/scandic-web/components/TempDesignSystem/Tooltip/index.tsx
index a2b4ad5d7..7e79f5a58 100644
--- a/apps/scandic-web/components/TempDesignSystem/Tooltip/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Tooltip/index.tsx
@@ -1,6 +1,6 @@
 import { type PropsWithChildren, useState } from "react"
 
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Caption from "@scandic-hotels/design-system/Caption"
 
 import { tooltipVariants } from "./variants"
 
diff --git a/apps/scandic-web/components/TempDesignSystem/Text/Caption/caption.module.css b/packages/design-system/lib/components/Caption/caption.module.css
similarity index 100%
rename from apps/scandic-web/components/TempDesignSystem/Text/Caption/caption.module.css
rename to packages/design-system/lib/components/Caption/caption.module.css
diff --git a/apps/scandic-web/components/TempDesignSystem/Text/Caption/index.tsx b/packages/design-system/lib/components/Caption/index.tsx
similarity index 53%
rename from apps/scandic-web/components/TempDesignSystem/Text/Caption/index.tsx
rename to packages/design-system/lib/components/Caption/index.tsx
index bff7b9915..b459463c3 100644
--- a/apps/scandic-web/components/TempDesignSystem/Text/Caption/index.tsx
+++ b/packages/design-system/lib/components/Caption/index.tsx
@@ -1,12 +1,21 @@
-import { Slot } from "@radix-ui/react-slot"
+import { Slot } from '@radix-ui/react-slot'
 
-import { captionVariants, fontOnlycaptionVariants } from "./variants"
+import { captionVariants, fontOnlycaptionVariants } from './variants'
+import { VariantProps } from 'class-variance-authority'
 
-import type { CaptionProps } from "./caption"
+interface CaptionProps
+  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,
+    VariantProps<typeof captionVariants> {
+  asChild?: boolean
+  fontOnly?: boolean
+}
 
+/**
+ * @deprecated Use `@scandic-hotels/design-system/Typography` instead.
+ */
 export default function Caption({
   asChild = false,
-  className = "",
+  className = '',
   color,
   fontOnly = false,
   textAlign,
@@ -16,7 +25,7 @@ export default function Caption({
   type,
   ...props
 }: CaptionProps) {
-  const Comp = asChild ? Slot : "p"
+  const Comp = asChild ? Slot : 'p'
   const classNames = fontOnly
     ? fontOnlycaptionVariants({
         className,
diff --git a/apps/scandic-web/components/TempDesignSystem/Text/Caption/variants.ts b/packages/design-system/lib/components/Caption/variants.ts
similarity index 91%
rename from apps/scandic-web/components/TempDesignSystem/Text/Caption/variants.ts
rename to packages/design-system/lib/components/Caption/variants.ts
index 2fb5caaae..c8b570b8e 100644
--- a/apps/scandic-web/components/TempDesignSystem/Text/Caption/variants.ts
+++ b/packages/design-system/lib/components/Caption/variants.ts
@@ -1,6 +1,6 @@
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority'
 
-import styles from "./caption.module.css"
+import styles from './caption.module.css'
 
 const config = {
   variants: {
@@ -44,8 +44,8 @@ const config = {
     },
   },
   defaultVariants: {
-    color: "black",
-    type: "regular",
+    color: 'black',
+    type: 'regular',
   },
 } as const
 
@@ -70,7 +70,7 @@ const fontOnlyConfig = {
     },
   },
   defaultVariants: {
-    type: "regular",
+    type: 'regular',
   },
 } as const
 
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index eeaa4f286..685eb99f4 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "exports": {
     "./Button": "./dist/components/Button/index.js",
+    "./Caption": "./dist/components/Caption/index.js",
     "./Card": "./dist/components/Card/index.js",
     "./ChipButton": "./dist/components/ChipButton/index.js",
     "./ChipLink": "./dist/components/ChipLink/index.js",
@@ -133,6 +134,7 @@
     "check-types": "tsc --noEmit"
   },
   "peerDependencies": {
+    "@radix-ui/react-slot": "^1.2.2",
     "react": "^19.1.0",
     "react-aria-components": "^1.8.0",
     "react-dom": "^19.1.0"
diff --git a/yarn.lock b/yarn.lock
index 7f65f1c80..8568885b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6880,6 +6880,7 @@ __metadata:
     vite-plugin-lib-inject-css: "npm:^2.2.2"
     vitest: "npm:^3.2.4"
   peerDependencies:
+    "@radix-ui/react-slot": ^1.2.2
     react: ^19.1.0
     react-aria-components: ^1.8.0
     react-dom: ^19.1.0