Merged in chore/sw-3145-move-caption (pull request #2503)

chore(SW-3145): Move Caption to design-system

* Move Caption to design-system

* Mark Caption as deprecated


Approved-by: Linus Flood
Approved-by: Joakim Jäderberg

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"
 

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"
 

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"

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() {

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"
 

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"
 

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"
 

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"
 

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"
 

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"

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"

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"
 

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"

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"

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"

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"

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"
 

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() {

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"

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"
 

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"
 

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"

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"
 

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"

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"

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"
 

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"
 

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 {

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"

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"
 

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"

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"

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"

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"

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"

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"

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"
 

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"

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"

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"

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"
 

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"

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"

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"

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() {

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"
 

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"

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"
 

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"

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"
 

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"
 

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"

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"

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) {

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"

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"
 

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"

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"

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"
 

apps/scandic-web/components/TempDesignSystem/Text/Caption/caption.ts

@@ -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
-}

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"
 

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,

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",
+    color: 'black',
-    type: "regular",
+    type: 'regular',
   },
 } as const
 
@@ -70,7 +70,7 @@ const fontOnlyConfig = {
     },
   },
   defaultVariants: {
-    type: "regular",
+    type: 'regular',
   },
 } as const
 

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"

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