Merged in chore/SW-3145-move-button (pull request #2527)

chore: SW-3145 Moved tempdesign button to design-system

* chore: SW-3145 Moved tempdesign button to design-system


Approved-by: Anton Gunnarsson

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/AlreadyLinkedError.tsx

@@ -4,9 +4,9 @@ import { useIntl } from "react-intl"
 
 import { partnerSas } from "@scandic-hotels/common/constants/routes/myPages"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 
 import { SASModal, SASModalContactBlock, SASModalDivider } from "./SASModal"

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/DateOfBirthError.tsx

@@ -4,9 +4,9 @@ import { useIntl } from "react-intl"
 
 import { profile } from "@scandic-hotels/common/constants/routes/myPages"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 
 import { SASModal, SASModalContactBlock, SASModalDivider } from "./SASModal"

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyCodesError.tsx

@@ -2,10 +2,9 @@
 
 import { useIntl } from "react-intl"
 
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Button from "@/components/TempDesignSystem/Button"
-
 import { GenericError } from "./GenericError"
 
 export function TooManyCodesError() {

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/TooManyFailedAttemptsError.tsx

@@ -2,10 +2,9 @@
 
 import { useIntl } from "react-intl"
 
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Button from "@/components/TempDesignSystem/Button"
-
 import { GenericError } from "./GenericError"
 
 export function TooManyFailedAttemptsError() {

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx

@@ -8,12 +8,12 @@ import { useIntl } from "react-intl"
 import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { sasPartnershipTermsAndConditions } from "@/constants/webHrefs"
 
 import Image from "@/components/Image"
-import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./link-sas.module.css"

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/page.tsx

@@ -3,6 +3,7 @@ import React, { Suspense } from "react"
 
 import { partnerSas } from "@scandic-hotels/common/constants/routes/myPages"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -10,7 +11,6 @@ import { hotelreservation } from "@/constants/routes/hotelReservation"
 import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 
 import Image from "@/components/Image"
-import Button from "@/components/TempDesignSystem/Button"
 import { getIntl } from "@/i18n"
 
 import { SASModal } from "../../components/SASModal"

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

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

apps/scandic-web/components/Blocks/DynamicContent/Overview/Buttons/CopyButton.tsx

@@ -3,8 +3,8 @@
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
-import Button from "@/components/TempDesignSystem/Button"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 
 import styles from "./copybutton.module.css"

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

@@ -1,10 +1,9 @@
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Title from "@scandic-hotels/design-system/Title"
 
-import Button from "@/components/TempDesignSystem/Button"
-
 import useRedeemFlow from "./useRedeemFlow"
 
 import styles from "./redeem.module.css"

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

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

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

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

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

@@ -12,9 +12,9 @@ import { useIntl } from "react-intl"
 
 import { logger } from "@scandic-hotels/common/logger"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
 

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/UnlinkSAS.tsx

@@ -4,9 +4,9 @@ import { useParams } from "next/navigation"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
 import Dialog from "@/components/Dialog"
-import Button from "@/components/TempDesignSystem/Button"
 
 import type { LangParams } from "@/types/params"
 

apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx

@@ -17,12 +17,12 @@ import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Input } from "@scandic-hotels/design-system/Input"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SAS_TRANSFER_POINT_KEY } from "@scandic-hotels/trpc/constants/partnerSAS"
 
 import Image from "@/components/Image"
 import Modal from "@/components/Modal"
-import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./transferPoints.module.css"
 

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

@@ -3,8 +3,7 @@
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./button.module.css"
 

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

@@ -1,8 +1,8 @@
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Preamble from "@scandic-hotels/design-system/Preamble"
 import Title from "@scandic-hotels/design-system/Title"
 
 import Image from "@/components/Image"
-import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 

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

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

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

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

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx

@@ -6,6 +6,7 @@ import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"
 
@@ -14,7 +15,6 @@ import { useDestinationDataStore } from "@/stores/destination-data"
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
 import Alert from "@/components/TempDesignSystem/Alert"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
-import Button from "@/components/TempDesignSystem/Button"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 
 import HotelListingItem from "./HotelListingItem"

apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx

@@ -8,12 +8,12 @@ import { type PropsWithChildren, useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
 import { MAP_RESTRICTIONS } from "@/constants/map"
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
 import ErrorBoundary from "@/components/ErrorBoundary/ErrorBoundary"
-import Button from "@/components/TempDesignSystem/Button"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 
 import { usePageType } from "../PageTypeProvider"

apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx

@@ -12,13 +12,13 @@ import {
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
-import Button from "@/components/TempDesignSystem/Button"
 import { useScrollToTop } from "@/hooks/useScrollToTop"
 import { debounce } from "@/utils/debounce"
 

apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/index.tsx

@@ -4,9 +4,9 @@ import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
 import JsonToHtml from "@/components/JsonToHtml"
-import Button from "@/components/TempDesignSystem/Button"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { trackOpenSidePeekOnDestinationPagesEvent } from "@/utils/tracking/destinationPage"
 

apps/scandic-web/components/ContentType/DestinationPage/StaticMap/MapButton/index.tsx

@@ -6,8 +6,7 @@ import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Button from "@/components/TempDesignSystem/Button"
 
 interface MapButtonProps {
   className?: string

apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx

@@ -3,9 +3,10 @@
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+
 import Image from "@/components/Image"
 import Lightbox from "@/components/Lightbox"
-import Button from "@/components/TempDesignSystem/Button"
 import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
 
 import styles from "./topImages.module.css"

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

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

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

@@ -1,6 +1,6 @@
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Preamble from "@scandic-hotels/design-system/Preamble"
 
-import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"

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

@@ -1,12 +1,12 @@
 import Link from "next/link"
 
 import { dt } from "@scandic-hotels/common/dt"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { selectRateWithParams } from "@/constants/routes/hotelReservation"
 
 import ImageGallery from "@/components/ImageGallery"
-import Button from "@/components/TempDesignSystem/Button"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"

apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx

@@ -1,9 +1,9 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import LocalCallCharges from "@/components/LocalCallCharges"
 import OpeningHours from "@/components/OpeningHours"
-import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 

apps/scandic-web/components/Current/Aside/Puff/index.tsx

@@ -1,10 +1,11 @@
 "use client"
 import { useRouter } from "next/navigation"
 
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+
 import { renderOptions as currentRenderOptions } from "@/components/Current/currentRenderOptions"
 import DeprecatedJsonToHtml from "@/components/DeprecatedJsonToHtml"
 import Image from "@/components/Image"
-import Button from "@/components/TempDesignSystem/Button"
 
 import { renderOptions } from "./renderOptions"
 

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

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

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

@@ -7,9 +7,9 @@ import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
 import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 
 import { locales } from "../locales"

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

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

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

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

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

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

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

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

apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx

@@ -8,12 +8,12 @@ import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Switch from "@scandic-hotels/design-system/Switch"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 
 import Modal from "@/components/Modal"
-import Button from "@/components/TempDesignSystem/Button"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors"
 

apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx

@@ -8,11 +8,11 @@ import { useMediaQuery } from "usehooks-ts"
 import Caption from "@scandic-hotels/design-system/Caption"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 
 import Modal from "@/components/Modal"
-import Button from "@/components/TempDesignSystem/Button"
 import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors"
 
 import { RemoveExtraRooms } from "../BookingCode"

apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx

@@ -6,6 +6,7 @@ import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
@@ -14,7 +15,6 @@ import { hotelreservation } from "@/constants/routes/hotelReservation"
 
 import DatePicker from "@/components/DatePicker"
 import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker"
-import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 
 import { RemoveExtraRooms } from "./BookingCode"

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

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

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

@@ -2,8 +2,7 @@
 
 import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./counter.module.css"
 

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

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

apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx

@@ -2,8 +2,7 @@
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Button from "@/components/TempDesignSystem/Button"
 
 export default function AddToCalendarButton({
   onPress,

apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/DownloadInvoice.tsx

@@ -3,8 +3,7 @@ import { useIntl } from "react-intl"
 import { useReactToPrint } from "react-to-print"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Button from "@/components/TempDesignSystem/Button"
 
 import type { DownloadInvoiceProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/downloadInvoice"
 

apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx

@@ -5,8 +5,8 @@ import { useIntl } from "react-intl"
 
 import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
-import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 

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

@@ -1,7 +1,7 @@
 import Body from "@scandic-hotels/design-system/Body"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Title from "@scandic-hotels/design-system/Title"
 
-import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./promo.module.css"

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/Retry.tsx

@@ -3,8 +3,7 @@
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
-
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./retry.module.css"
 

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

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

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

@@ -4,12 +4,12 @@ import { useIntl } from "react-intl"
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { membershipTermsAndConditions } from "@/constants/webHrefs"
 
 import LoginButton from "@/components/LoginButton"
-import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"

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

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

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

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

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

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

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

@@ -9,12 +9,12 @@ import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
 import { logger } from "@scandic-hotels/common/logger"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Title from "@scandic-hotels/design-system/Title"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import { customerService } from "@/constants/webHrefs"
 
-import Button from "@/components/TempDesignSystem/Button"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Link from "@/components/TempDesignSystem/Link"
 import { toast } from "@/components/TempDesignSystem/Toasts"

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

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

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

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

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

@@ -2,10 +2,10 @@ import { useRouter } from "next/navigation"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import Dialog from "@/components/Dialog"
-import Button from "@/components/TempDesignSystem/Button"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 import { trackRemoveAncillary } from "@/utils/tracking/myStay"

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

@@ -1,11 +1,10 @@
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
 import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
 
-import Button from "@/components/TempDesignSystem/Button"
-
 export default function ViewAllAncillaries() {
   const intl = useIntl()
   const openModal = useAddAncillaryStore((state) => state.openModal)

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

@@ -8,6 +8,7 @@ import { useIntl } from "react-intl"
 
 import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
@@ -16,7 +17,6 @@ import { isWebview } from "@/constants/routes/webviews"
 import MembershipLevelIcon from "@/components/Levels/Icon"
 import Modal from "@/components/Modal"
 import { ModalContentWithActions } from "@/components/Modal/ModalContentWithActions"
-import Button from "@/components/TempDesignSystem/Button"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 

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

@@ -1,4 +1,4 @@
-import Button from "@/components/TempDesignSystem/Button"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
 import styles from "./footer.module.css"
 

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

@@ -1,7 +1,7 @@
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Image from "@/components/Image"
-import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./promo.module.css"

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Cancelled/CustomerSupport.tsx

@@ -2,8 +2,9 @@
 import { DialogTrigger } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+
 import CustomerSupportModal from "@/components/HotelReservation/MyStay/ReferenceCard/Actions/CustomerSupportModal"
-import Button from "@/components/TempDesignSystem/Button"
 
 export default function CustomerSupport() {
   const intl = useIntl()

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx

@@ -4,11 +4,11 @@ import { DialogTrigger } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
 import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek"
-import Button from "@/components/TempDesignSystem/Button"
 
 import type { SafeUser } from "@/types/user"
 

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

@@ -17,11 +17,11 @@ import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 
-import Button from "@/components/TempDesignSystem/Button"
 import useInitializeFiltersFromUrl from "@/hooks/useInitializeFiltersFromUrl"
 
 import { DEFAULT_SORT } from "../../HotelSorter"

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

@@ -3,13 +3,13 @@
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
 import {
   alternativeHotelsMap,
   selectHotelMap,
 } from "@/constants/routes/hotelReservation"
 
-import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 

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

@@ -5,6 +5,7 @@ import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
 import {
   alternativeHotels,
@@ -17,7 +18,6 @@ import { useHotelsMapStore } from "@/stores/hotels-map"
 import { RoomCardSkeleton } from "@/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton"
 import InteractiveMap from "@/components/Maps/InteractiveMap"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
-import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 import { useScrollToTop } from "@/hooks/useScrollToTop"

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

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

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

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

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

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

apps/scandic-web/components/Maps/InteractiveMap/index.tsx

@@ -5,11 +5,10 @@ import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
 import { MAP_RESTRICTIONS } from "@/constants/map"
 
-import Button from "@/components/TempDesignSystem/Button"
-
 import HotelListingMapContent from "./HotelListingMapContent"
 import PoiMapMarkers from "./PoiMapMarkers"
 

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

@@ -1,8 +1,7 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
-import Button from "@/components/TempDesignSystem/Button"
-
 import styles from "./modalContent.module.css"
 
 import type { ReactNode } from "react"

apps/scandic-web/components/Profile/AddCreditCardButton/index.tsx

@@ -5,9 +5,9 @@ import { useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import Button from "@/components/TempDesignSystem/Button"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 

apps/scandic-web/components/Profile/DeleteCreditCardConfirmation.tsx

@@ -2,10 +2,10 @@
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import Dialog from "@/components/Dialog"
-import Button from "@/components/TempDesignSystem/Button"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 
 import type { DeleteCreditCardConfirmationProps } from "@/types/components/myPages/myProfile/creditCards"

apps/scandic-web/components/Profile/ManagePreferencesButton/index.tsx

@@ -3,9 +3,9 @@
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import Button from "@/components/TempDesignSystem/Button"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 
 import styles from "./managePreferencesButton.module.css"

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

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

apps/scandic-web/components/TempDesignSystem/Alert/Sidepeek/index.tsx

@@ -3,9 +3,9 @@
 import { useState } from "react"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
 import JsonToHtml from "@/components/JsonToHtml"
-import Button from "@/components/TempDesignSystem/Button"
 
 import SidePeek from "../../SidePeek"
 

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

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

apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx

@@ -9,8 +9,7 @@ import { passwordValidators } from "@scandic-hotels/common/utils/zod/passwordVal
 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 { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Button from "@/components/TempDesignSystem/Button"
 
 import { getErrorMessage } from "../Input/errors"
 

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

@@ -3,8 +3,7 @@
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Button from "@/components/TempDesignSystem/Button"
 
 import { showMoreButtonVariants } from "./variants"
 

packages/design-system/lib/components/OldDSButton/button.module.css

@@ -0,0 +1,843 @@
+.btn {
+  background: none;
+  border-radius: var(--Corner-radius-rounded);
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  transition:
+    background-color 300ms ease,
+    color 300ms ease;
+
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: 500;
+  line-height: var(--typography-Body-Bold-lineHeight);
+  letter-spacing: 0.084px;
+  text-decoration: none;
+}
+
+.wrapping {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+/* INTENT */
+.primary,
+a.primary {
+  border: none;
+}
+
+.secondary,
+a.secondary {
+  background: none;
+  border-style: solid;
+  border-width: 2px;
+}
+
+.tertiary,
+a.tertiary {
+  border: none;
+}
+
+.inverted,
+a.inverted {
+  border: none;
+}
+
+.text,
+a.text {
+  background: none;
+  border: none;
+  outline: none;
+}
+
+/* TODO: The variants for combinations of size/text/wrapping should be looked at and iterated on */
+.text:not(.wrapping) {
+  padding: 0 !important;
+}
+
+/* VARIANTS */
+.default,
+a.default {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x1);
+  justify-content: center;
+}
+
+.btn.icon:is(.small, .medium, .large) {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x1);
+  justify-content: center;
+}
+
+/* SIZES */
+.btn.small {
+  font-size: var(--typography-Caption-Bold-fontSize);
+  line-height: var(--typography-Caption-Bold-lineHeight);
+  gap: var(--Spacing-x-quarter);
+  padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2);
+  /* Special case padding to adjust the missing border */
+}
+
+.btn.small.secondary {
+  padding: var(--Spacing-x1) var(--Spacing-x2);
+}
+
+.btn.medium {
+  gap: var(--Spacing-x-half);
+  padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2);
+  /* Special case padding to adjust the missing border */
+}
+
+.medium.secondary {
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+}
+
+.btn.large {
+  gap: var(--Spacing-x-half);
+  padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3);
+  /* Special case padding to adjust the missing border */
+}
+
+.large.secondary {
+  gap: var(--Spacing-x-half);
+  padding: var(--Spacing-x2) var(--Spacing-x3);
+}
+
+/* DISABLED */
+.btn:disabled {
+  background-color: var(--disabled-background-color);
+  color: var(--disabled-color);
+  cursor: not-allowed;
+}
+
+/* THEMES */
+.basePrimary {
+  background-color: var(--Base-Button-Primary-Fill-Normal);
+  color: var(--Base-Button-Primary-On-Fill-Normal);
+}
+
+.basePrimary:active,
+.basePrimary:focus,
+.basePrimary:hover {
+  background-color: var(--Base-Button-Primary-Fill-Hover);
+  color: var(--Base-Button-Primary-On-Fill-Hover);
+}
+
+.basePrimary:disabled {
+  background-color: var(--Base-Button-Primary-Fill-Disabled);
+  color: var(--Base-Button-Primary-On-Fill-Disabled);
+}
+
+.icon.basePrimary svg,
+.icon.basePrimary svg * {
+  fill: var(--Base-Button-Primary-On-Fill-Normal);
+}
+
+.icon.basePrimary:active svg,
+.icon.basePrimary:focus svg,
+.icon.basePrimary:hover svg,
+.icon.basePrimary:active svg *,
+.icon.basePrimary:focus svg *,
+.icon.basePrimary:hover svg * {
+  fill: var(--Base-Button-Primary-On-Fill-Hover);
+}
+
+.icon.basePrimary:disabled *,
+.icon.basePrimary:disabled svg * {
+  fill: var(--Base-Button-Primary-On-Fill-Disabled);
+}
+
+.baseSecondary {
+  background-color: var(--Base-Button-Secondary-Fill-Normal);
+  border-color: var(--Base-Button-Secondary-Border-Normal);
+  color: var(--Base-Button-Secondary-On-Fill-Normal);
+}
+
+.baseSecondary:active,
+.baseSecondary:focus,
+.baseSecondary:hover {
+  background-color: var(--Base-Button-Secondary-Fill-Hover);
+  border-color: var(--Base-Button-Secondary-Border-Hover);
+  color: var(--Base-Button-Secondary-On-Fill-Hover);
+}
+
+.baseSecondary:disabled {
+  background-color: var(--Base-Button-Secondary-Fill-Disabled);
+  border-color: var(--Base-Button-Secondary-Border-Disabled);
+  color: var(--Base-Button-Secondary-On-Fill-Disabled);
+}
+
+.icon.baseSecondary svg,
+.icon.baseSecondary svg * {
+  fill: var(--Base-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.baseSecondary:active svg,
+.icon.baseSecondary:focus svg,
+.icon.baseSecondary:hover svg,
+.icon.baseSecondary:active svg *,
+.icon.baseSecondary:focus svg *,
+.icon.baseSecondary:hover svg * {
+  fill: var(--Base-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.baseSecondary:disabled svg,
+.icon.baseSecondary:disabled svg * {
+  fill: var(--Base-Button-Secondary-On-Fill-Disabled);
+}
+
+.btn.baseTertiary {
+  background-color: var(--Base-Button-Tertiary-Fill-Normal);
+  color: var(--Base-Button-Tertiary-On-Fill-Normal);
+}
+
+.btn.baseTertiary:active,
+.btn.baseTertiary:focus,
+.btn.baseTertiary:hover {
+  background-color: var(--Base-Button-Tertiary-Fill-Hover);
+  color: var(--Base-Button-Tertiary-On-Fill-Hover);
+}
+
+.btn.baseTertiary:disabled {
+  background-color: var(--Base-Button-Tertiary-Fill-Disabled);
+  color: var(--Base-Button-Tertiary-On-Fill-Disabled);
+}
+
+.icon.baseTertiary svg,
+.icon.baseTertiary svg * {
+  fill: var(--Base-Button-Tertiary-On-Fill-Normal);
+}
+
+.icon.baseTertiary:active svg,
+.icon.baseTertiary:focus svg,
+.icon.baseTertiary:hover svg,
+.icon.baseTertiary:active svg *,
+.icon.baseTertiary:focus svg *,
+.icon.baseTertiary:hover svg * {
+  fill: var(--Base-Button-Tertiary-On-Fill-Hover);
+}
+
+.icon.baseTertiary:disabled svg,
+.icon.baseTertiary:disabled svg * {
+  fill: var(--Base-Button-Tertiary-On-Fill-Disabled);
+}
+
+.baseInverted {
+  background-color: var(--Base-Button-Inverted-Fill-Normal);
+  color: var(--Base-Button-Inverted-On-Fill-Normal);
+}
+
+.baseInverted:active,
+.baseInverted:focus,
+.baseInverted:hover {
+  background-color: var(--Base-Button-Inverted-Fill-Hover);
+  color: var(--Base-Button-Inverted-On-Fill-Hover);
+}
+
+.baseInverted:disabled {
+  background-color: var(--Base-Button-Inverted-Fill-Disabled);
+  color: var(--Base-Button-Inverted-On-Fill-Disabled);
+}
+
+.icon.baseInverted svg,
+.icon.baseInverted svg * {
+  fill: var(--Base-Button-Inverted-On-Fill-Normal);
+}
+
+.icon.baseInverted:active svg,
+.icon.baseInverted:focus svg,
+.icon.baseInverted:hover svg,
+.icon.baseInverted:active svg *,
+.icon.baseInverted:focus svg *,
+.icon.baseInverted:hover svg * {
+  fill: var(--Base-Button-Inverted-On-Fill-Hover);
+}
+
+.icon.baseInverted:disabled svg,
+.icon.baseInverted:disabled svg * {
+  fill: var(--Base-Button-Inverted-On-Fill-Disabled);
+}
+
+.baseText {
+  color: var(--Base-Button-Text-On-Fill-Normal);
+}
+
+.baseTextInverted {
+  color: var(--Base-Button-Primary-On-Fill-Normal);
+}
+
+.baseText:active,
+.baseText:focus,
+.baseText:hover {
+  color: var(--Base-Button-Text-On-Fill-Hover);
+  text-decoration: underline;
+}
+
+.baseText:disabled {
+  color: var(--Base-Button-Text-On-Fill-Disabled);
+}
+
+.icon.baseText svg,
+.icon.baseText svg * {
+  fill: var(--Base-Button-Text-On-Fill-Normal);
+}
+
+.icon.baseText:active svg,
+.icon.baseText:focus svg,
+.icon.baseText:hover svg,
+.icon.baseText:active svg *,
+.icon.baseText:focus svg *,
+.icon.baseText:hover svg * {
+  fill: var(--Base-Button-Text-On-Fill-Hover);
+  text-decoration: underline;
+}
+
+.icon.baseText:disabled svg,
+.icon.baseText:disabled svg * {
+  fill: var(--Base-Button-Text-On-Fill-Disabled);
+}
+
+.primaryStrongPrimary {
+  background-color: var(--Primary-Strong-Button-Primary-Fill-Normal);
+  color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
+}
+
+.primaryStrongPrimary:active,
+.primaryStrongPrimary:focus,
+.primaryStrongPrimary:hover {
+  background-color: var(--Primary-Strong-Button-Primary-Fill-Hover);
+  color: var(--Primary-Strong-Button-Primary-On-Fill-Hover);
+}
+
+.primaryStrongPrimary:disabled {
+  background-color: var(--Primary-Strong-Button-Primary-Fill-Disabled);
+  color: var(--Primary-Strong-Button-Primary-On-Fill-Disabled);
+}
+
+.icon.primaryStrongPrimary svg,
+.icon.primaryStrongPrimary svg * {
+  fill: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
+}
+
+.icon.primaryStrongPrimary:active svg,
+.icon.primaryStrongPrimary:focus svg,
+.icon.primaryStrongPrimary:hover svg,
+.icon.primaryStrongPrimary:active svg *,
+.icon.primaryStrongPrimary:focus svg *,
+.icon.primaryStrongPrimary:hover svg * {
+  fill: var(--Primary-Strong-Button-Primary-On-Fill-Hover);
+}
+
+.icon.primaryStrongPrimary:disabled svg,
+.icon.primaryStrongPrimary:disabled svg * {
+  fill: var(--Primary-Strong-Button-Primary-On-Fill-Disabled);
+}
+
+.primaryStrongSecondary {
+  background-color: var(--Primary-Strong-Button-Secondary-Fill-Normal);
+  border-color: var(--Primary-Strong-Button-Secondary-Border-Normal);
+  color: var(--Primary-Strong-Button-Secondary-On-Fill-Normal);
+}
+
+.primaryStrongSecondary:active,
+.primaryStrongSecondary:focus,
+.primaryStrongSecondary:hover {
+  background-color: var(--Primary-Strong-Button-Secondary-Fill-Hover);
+  border-color: var(--Primary-Strong-Button-Secondary-Border-Hover);
+  color: var(--Primary-Strong-Button-Secondary-On-Fill-Hover);
+}
+
+.primaryStrongSecondary:disabled {
+  background-color: var(--Primary-Strong-Button-Secondary-Fill-Disabled);
+  border-color: var(--Primary-Strong-Button-Secondary-Border-Disabled);
+  color: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled);
+}
+
+.icon.primaryStrongSecondary svg,
+.icon.primaryStrongSecondary svg * {
+  fill: var(--Primary-Strong-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.primaryStrongSecondary:active svg,
+.icon.primaryStrongSecondary:focus svg,
+.icon.primaryStrongSecondary:hover svg,
+.icon.primaryStrongSecondary:active svg *,
+.icon.primaryStrongSecondary:focus svg *,
+.icon.primaryStrongSecondary:hover svg * {
+  fill: var(--Primary-Strong-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.primaryStrongSecondary:disabled svg,
+.icon.primaryStrongSecondary:disabled svg * {
+  fill: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled);
+}
+
+.primaryDarkPrimary {
+  background-color: var(--Primary-Dark-Button-Primary-Fill-Normal);
+  color: var(--Primary-Dark-Button-Primary-On-Fill-Normal);
+}
+
+.primaryDarkPrimary:active,
+.primaryDarkPrimary:focus,
+.primaryDarkPrimary:hover {
+  background-color: var(--Primary-Dark-Button-Primary-Fill-Hover);
+  color: var(--Primary-Dark-Button-Primary-On-Fill-Hover);
+}
+
+.primaryDarkPrimary:disabled {
+  background-color: var(--Primary-Dark-Button-Primary-Fill-Disabled);
+  color: var(--Primary-Dark-Button-Primary-On-Fill-Disabled);
+}
+
+.icon.primaryDarkPrimary svg,
+.icon.primaryDarkPrimary svg * {
+  fill: var(--Primary-Dark-Button-Primary-On-Fill-Normal);
+}
+
+.icon.primaryDarkPrimary:active svg,
+.icon.primaryDarkPrimary:focus svg,
+.icon.primaryDarkPrimary:hover svg,
+.icon.primaryDarkPrimary:active svg *,
+.icon.primaryDarkPrimary:focus svg *,
+.icon.primaryDarkPrimary:hover svg * {
+  fill: var(--Primary-Dark-Button-Primary-On-Fill-Hover);
+}
+
+.icon.primaryDarkPrimary:disabled svg,
+.icon.primaryDarkPrimary:disabled svg * {
+  fill: var(--Primary-Dark-Button-Primary-On-Fill-Disabled);
+}
+
+.primaryDarkSecondary {
+  background-color: var(--Primary-Dark-Button-Secondary-Fill-Normal);
+  border-color: var(--Primary-Dark-Button-Secondary-Border-Normal);
+  color: var(--Primary-Dark-Button-Secondary-On-Fill-Normal);
+}
+
+.primaryDarkSecondary:active,
+.primaryDarkSecondary:focus,
+.primaryDarkSecondary:hover {
+  background-color: var(--Primary-Dark-Button-Secondary-Fill-Hover);
+  border-color: var(--Primary-Dark-Button-Secondary-Border-Hover);
+  color: var(--Primary-Dark-Button-Secondary-On-Fill-Hover);
+}
+
+.primaryDarkSecondary:disabled {
+  background-color: var(--Primary-Dark-Button-Secondary-Fill-Disabled);
+  border-color: var(--Primary-Dark-Button-Secondary-Border-Disabled);
+  color: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled);
+}
+
+.icon.primaryDarkSecondary svg,
+.icon.primaryDarkSecondary svg * {
+  fill: var(--Primary-Dark-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.primaryDarkSecondary:active svg,
+.icon.primaryDarkSecondary:focus svg,
+.icon.primaryDarkSecondary:hover svg,
+.icon.primaryDarkSecondary:active svg *,
+.icon.primaryDarkSecondary:focus svg *,
+.icon.primaryDarkSecondary:hover svg * {
+  fill: var(--Primary-Dark-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.primaryDarkSecondary:disabled svg,
+.icon.primaryDarkSecondary:disabled svg * {
+  fill: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled);
+}
+
+.primaryLightPrimary {
+  background-color: var(--Primary-Light-Button-Primary-Fill-Normal);
+  color: var(--Primary-Light-Button-Primary-On-Fill-Normal);
+}
+
+.primaryLightPrimary:active,
+.primaryLightPrimary:focus,
+.primaryLightPrimary:hover {
+  background-color: var(--Primary-Light-Button-Primary-Fill-Hover);
+  color: var(--Primary-Light-Button-Primary-On-Fill-Hover);
+}
+
+.primaryLightPrimary:disabled {
+  background-color: var(--Primary-Light-Button-Primary-Fill-Disabled);
+  color: var(--Primary-Light-Button-Primary-On-Fill-Disabled);
+}
+
+.icon.primaryLightPrimary svg,
+.icon.primaryLightPrimary svg * {
+  fill: var(--Primary-Light-Button-Primary-On-Fill-Normal);
+}
+
+.icon.primaryLightPrimary:active svg,
+.icon.primaryLightPrimary:focus svg,
+.icon.primaryLightPrimary:hover svg,
+.icon.primaryLightPrimary:active svg *,
+.icon.primaryLightPrimary:focus svg *,
+.icon.primaryLightPrimary:hover svg * {
+  fill: var(--Primary-Light-Button-Primary-On-Fill-Hover);
+}
+
+.icon.primaryLightPrimary:disabled svg,
+.icon.primaryLightPrimary:disabled svg * {
+  fill: var(--Primary-Light-Button-Primary-On-Fill-Disabled);
+}
+
+.primaryLightSecondary {
+  background-color: var(--Primary-Light-Button-Secondary-Fill-Normal);
+  border-color: var(--Primary-Light-Button-Secondary-Border-Normal);
+  color: var(--Primary-Light-Button-Secondary-On-Fill-Normal);
+}
+
+.primaryLightSecondary:active,
+.primaryLightSecondary:focus,
+.primaryLightSecondary:hover {
+  background-color: var(--Primary-Light-Button-Secondary-Fill-Hover);
+  border-color: var(--Primary-Light-Button-Secondary-Border-Hover);
+  color: var(--Primary-Light-Button-Secondary-On-Fill-Hover);
+}
+
+.primaryLightSecondary:disabled {
+  background-color: var(--Primary-Light-Button-Secondary-Fill-Disabled);
+  border-color: var(--Primary-Light-Button-Secondary-Border-Disabled);
+  color: var(--Primary-Light-Button-Secondary-On-Fill-Disabled);
+}
+
+.icon.primaryLightSecondary svg,
+.icon.primaryLightSecondary svg * {
+  fill: var(--Primary-Light-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.primaryLightSecondary:active svg,
+.icon.primaryLightSecondary:focus svg,
+.icon.primaryLightSecondary:hover svg,
+.icon.primaryLightSecondary:active svg *,
+.icon.primaryLightSecondary:focus svg *,
+.icon.primaryLightSecondary:hover svg * {
+  fill: var(--Primary-Light-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.primaryLightSecondary:disabled svg,
+.icon.primaryLightSecondary:disabled svg * {
+  fill: var(--Primary-Light-Button-Secondary-On-Fill-Disabled);
+}
+
+.secondaryDarkPrimary {
+  background-color: var(--Secondary-Dark-Button-Primary-Fill-Normal);
+  color: var(--Secondary-Dark-Button-Primary-On-Fill-Normal);
+}
+
+.secondaryDarkPrimary:active,
+.secondaryDarkPrimary:focus,
+.secondaryDarkPrimary:hover {
+  background-color: var(--Secondary-Dark-Button-Primary-Fill-Hover);
+  color: var(--Secondary-Dark-Button-Primary-On-Fill-Hover);
+}
+
+.secondaryDarkPrimary:disabled {
+  background-color: var(--Secondary-Dark-Button-Primary-Fill-Disabled);
+  color: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled);
+}
+
+.icon.secondaryDarkPrimary svg,
+.icon.secondaryDarkPrimary svg * {
+  fill: var(--Secondary-Dark-Button-Primary-On-Fill-Normal);
+}
+
+.icon.secondaryDarkPrimary:active svg,
+.icon.secondaryDarkPrimary:focus svg,
+.icon.secondaryDarkPrimary:hover svg,
+.icon.secondaryDarkPrimary:active svg *,
+.icon.secondaryDarkPrimary:focus svg *,
+.icon.secondaryDarkPrimary:hover svg * {
+  fill: var(--Secondary-Dark-Button-Primary-On-Fill-Hover);
+}
+
+.icon.secondaryDarkPrimary:disabled svg,
+.icon.secondaryDarkPrimary:disabled svg * {
+  fill: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled);
+}
+
+.secondaryDarkSecondary {
+  background-color: var(--Secondary-Dark-Button-Secondary-Fill-Normal);
+  border-color: var(--Secondary-Dark-Button-Secondary-Border-Normal);
+  color: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal);
+}
+
+.secondaryDarkSecondary:active,
+.secondaryDarkSecondary:focus,
+.secondaryDarkSecondary:hover {
+  background-color: var(--Secondary-Dark-Button-Secondary-Fill-Hover);
+  border-color: var(--Secondary-Dark-Button-Secondary-Border-Hover);
+  color: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover);
+}
+
+.secondaryDarkSecondary:disabled {
+  background-color: var(--Secondary-Dark-Button-Secondary-Fill-Disabled);
+  border-color: var(--Secondary-Dark-Button-Secondary-Border-Disabled);
+  color: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled);
+}
+
+.icon.secondaryDarkSecondary svg,
+.icon.secondaryDarkSecondary svg * {
+  fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.secondaryDarkSecondary:active svg,
+.icon.secondaryDarkSecondary:focus svg,
+.icon.secondaryDarkSecondary:hover svg,
+.icon.secondaryDarkSecondary:active svg *,
+.icon.secondaryDarkSecondary:focus svg *,
+.icon.secondaryDarkSecondary:hover svg * {
+  fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.secondaryDarkSecondary:disabled svg,
+.icon.secondaryDarkSecondary:disabled svg * {
+  fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled);
+}
+
+.secondaryLightPrimary {
+  background-color: var(--Secondary-Light-Button-Primary-Fill-Normal);
+  color: var(--Secondary-Light-Button-Primary-On-Fill-Normal);
+}
+
+.secondaryLightPrimary:active,
+.secondaryLightPrimary:focus,
+.secondaryLightPrimary:hover {
+  background-color: var(--Secondary-Light-Button-Primary-Fill-Hover);
+  color: var(--Secondary-Light-Button-Primary-On-Fill-Hover);
+}
+
+.secondaryLightPrimary:disabled {
+  background-color: var(--Secondary-Light-Button-Primary-Fill-Disabled);
+  color: var(--Secondary-Light-Button-Primary-On-Fill-Disabled);
+}
+
+.icon.secondaryLightPrimary svg,
+.icon.secondaryLightPrimary svg * {
+  fill: var(--Secondary-Light-Button-Primary-On-Fill-Normal);
+}
+
+.icon.secondaryLightPrimary:active svg,
+.icon.secondaryLightPrimary:focus svg,
+.icon.secondaryLightPrimary:hover svg,
+.icon.secondaryLightPrimary:active svg *,
+.icon.secondaryLightPrimary:focus svg *,
+.icon.secondaryLightPrimary:hover svg * {
+  fill: var(--Secondary-Light-Button-Primary-On-Fill-Hover);
+}
+
+.icon.secondaryLightPrimary:disabled svg,
+.icon.secondaryLightPrimary:disabled svg * {
+  fill: var(--Secondary-Light-Button-Primary-On-Fill-Disabled);
+}
+
+.secondaryLightSecondary {
+  background-color: var(--Secondary-Light-Button-Secondary-Fill-Normal);
+  border-color: var(--Secondary-Light-Button-Secondary-Border-Normal);
+  color: var(--Secondary-Light-Button-Secondary-On-Fill-Normal);
+}
+
+.secondaryLightSecondary:active,
+.secondaryLightSecondary:focus,
+.secondaryLightSecondary:hover {
+  background-color: var(--Secondary-Light-Button-Secondary-Fill-Hover);
+  border-color: var(--Secondary-Light-Button-Secondary-Border-Hover);
+  color: var(--Secondary-Light-Button-Secondary-On-Fill-Hover);
+}
+
+.secondaryLightSecondary:disabled {
+  background-color: var(--Secondary-Light-Button-Secondary-Fill-Disabled);
+  border-color: var(--Secondary-Light-Button-Secondary-Border-Disabled);
+  color: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled);
+}
+
+.icon.secondaryLightSecondary svg,
+.icon.secondaryLightSecondary svg * {
+  fill: var(--Secondary-Light-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.secondaryLightSecondary:active svg,
+.icon.secondaryLightSecondary:focus svg,
+.icon.secondaryLightSecondary:hover svg,
+.icon.secondaryLightSecondary:active svg *,
+.icon.secondaryLightSecondary:focus svg *,
+.icon.secondaryLightSecondary:hover svg * {
+  fill: var(--Secondary-Light-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.secondaryLightSecondary:disabled svg,
+.icon.secondaryLightSecondary:disabled svg * {
+  fill: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled);
+}
+
+.tertiaryDarkPrimary {
+  background-color: var(--Tertiary-Dark-Button-Primary-Fill-Normal);
+  color: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal);
+}
+
+.tertiaryDarkPrimary:active,
+.tertiaryDarkPrimary:focus,
+.tertiaryDarkPrimary:hover {
+  background-color: var(--Tertiary-Dark-Button-Primary-Fill-Hover);
+  color: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover);
+}
+
+.tertiaryDarkPrimary:disabled {
+  background-color: var(--Tertiary-Dark-Button-Primary-Fill-Disabled);
+  color: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled);
+}
+
+.icon.tertiaryDarkPrimary svg,
+.icon.tertiaryDarkPrimary svg * {
+  fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal);
+}
+
+.icon.tertiaryDarkPrimary:active svg,
+.icon.tertiaryDarkPrimary:focus svg,
+.icon.tertiaryDarkPrimary:hover svg,
+.icon.tertiaryDarkPrimary:active svg *,
+.icon.tertiaryDarkPrimary:focus svg *,
+.icon.tertiaryDarkPrimary:hover svg * {
+  fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover);
+}
+
+.icon.tertiaryDarkPrimary:disabled svg,
+.icon.tertiaryDarkPrimary:disabled svg * {
+  fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled);
+}
+
+.tertiaryDarkSecondary {
+  background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Normal);
+  border-color: var(--Tertiary-Dark-Button-Secondary-Border-Normal);
+  color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal);
+}
+
+.tertiaryDarkSecondary:active,
+.tertiaryDarkSecondary:focus,
+.tertiaryDarkSecondary:hover {
+  background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Hover);
+  border-color: var(--Tertiary-Dark-Button-Secondary-Border-Hover);
+  color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover);
+}
+
+.tertiaryDarkSecondary:disabled {
+  background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Disabled);
+  border-color: var(--Tertiary-Dark-Button-Secondary-Border-Disabled);
+  color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled);
+}
+
+.icon.tertiaryDarkSecondary svg,
+.icon.tertiaryDarkSecondary svg * {
+  fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.tertiaryDarkSecondary:active svg,
+.icon.tertiaryDarkSecondary:focus svg,
+.icon.tertiaryDarkSecondary:hover svg,
+.icon.tertiaryDarkSecondary:active svg *,
+.icon.tertiaryDarkSecondary:focus svg *,
+.icon.tertiaryDarkSecondary:hover svg * {
+  fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.tertiaryDarkSecondary:disabled svg,
+.icon.tertiaryDarkSecondary:disabled svg * {
+  fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled);
+}
+
+.tertiaryLightPrimary {
+  background-color: var(--Tertiary-Light-Button-Primary-Fill-Normal);
+  color: var(--Tertiary-Light-Button-Primary-On-Fill-Normal);
+}
+
+.tertiaryLightPrimary:active,
+.tertiaryLightPrimary:focus,
+.tertiaryLightPrimary:hover {
+  background-color: var(--Tertiary-Light-Button-Primary-Fill-Hover);
+  color: var(--Tertiary-Light-Button-Primary-On-Fill-Hover);
+}
+
+.tertiaryLightPrimary:disabled {
+  background-color: var(--Tertiary-Light-Button-Primary-Fill-Disabled);
+  color: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled);
+}
+
+.icon.tertiaryLightPrimary svg,
+.icon.tertiaryLightPrimary svg * {
+  fill: var(--Tertiary-Light-Button-Primary-On-Fill-Normal);
+}
+
+.icon.tertiaryLightPrimary:active svg,
+.icon.tertiaryLightPrimary:focus svg,
+.icon.tertiaryLightPrimary:hover svg,
+.icon.tertiaryLightPrimary:active svg *,
+.icon.tertiaryLightPrimary:focus svg *,
+.icon.tertiaryLightPrimary:hover svg * {
+  fill: var(--Tertiary-Light-Button-Primary-On-Fill-Hover);
+}
+
+.icon.tertiaryLightPrimary:disabled svg,
+.icon.tertiaryLightPrimary:disabled svg * {
+  fill: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled);
+}
+
+.tertiaryLightSecondary {
+  background-color: var(--Tertiary-Light-Button-Secondary-Fill-Normal);
+  border-color: var(--Tertiary-Light-Button-Secondary-Border-Normal);
+  color: var(--Tertiary-Light-Button-Secondary-On-Fill-Normal);
+}
+
+.tertiaryLightSecondary:active,
+.tertiaryLightSecondary:focus,
+.tertiaryLightSecondary:hover {
+  background-color: var(--Tertiary-Light-Button-Secondary-Fill-Hover);
+  border-color: var(--Tertiary-Light-Button-Secondary-Border-Hover);
+  color: var(--Tertiary-Light-Button-Secondary-On-Fill-Hover);
+}
+
+.tertiaryLightSecondary:disabled {
+  background-color: var(--Tertiary-Light-Button-Secondary-Fill-Disabled);
+  border-color: var(--Tertiary-Light-Button-Secondary-Border-Disabled);
+  color: var(--Tertiary-Light-Button-Secondary-On-Fill-Disabled);
+}
+
+.icon.tertiaryLightSecondary svg,
+.icon.tertiaryLightSecondary svg * {
+  fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Normal);
+}
+
+.icon.tertiaryLightSecondary:active svg,
+.icon.tertiaryLightSecondary:focus svg,
+.icon.tertiaryLightSecondary:hover svg,
+.icon.tertiaryLightSecondary:active svg *,
+.icon.tertiaryLightSecondary:focus svg *,
+.icon.tertiaryLightSecondary:hover svg * {
+  fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Hover);
+}
+
+.icon.tertiaryLightSecondary:disabled svg,
+.icon.tertiaryLightSecondary:disabled svg * {
+  fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Disabled);
+}
+
+button.btn.clean {
+  background: none;
+  background-color: unset;
+  border: none;
+  border-color: unset;
+  border-radius: unset;
+  color: unset;
+  gap: unset;
+  margin: 0;
+  padding: 0;
+}

packages/design-system/lib/components/OldDSButton/button.ts

@@ -0,0 +1,20 @@
+import type { VariantProps } from 'class-variance-authority'
+import type { ButtonProps as ReactAriaButtonProps } from 'react-aria-components'
+
+import type { buttonVariants } from './variants'
+
+export interface ButtonPropsRAC
+  extends Omit<ReactAriaButtonProps, 'isDisabled' | 'onClick'>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: false | undefined | never
+  disabled?: ReactAriaButtonProps['isDisabled']
+  onClick?: ReactAriaButtonProps['onPress']
+}
+
+export interface ButtonPropsSlot
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild: true
+}
+
+export type ButtonProps = ButtonPropsSlot | ButtonPropsRAC

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

@@ -0,0 +1,53 @@
+'use client'
+
+import { Slot } from '@radix-ui/react-slot'
+import { Button as ButtonRAC } from 'react-aria-components'
+
+import { buttonVariants } from './variants'
+
+import type { ButtonProps } from './button'
+
+/**
+ * @deprecated Use `@scandic-hotels/design-system/Button` instead.
+ */
+export function OldDSButton(props: ButtonProps) {
+  const {
+    className,
+    clean,
+    intent,
+    size,
+    theme,
+    fullWidth,
+    wrapping,
+    variant,
+    ...restProps
+  } = props
+
+  const classNames = buttonVariants({
+    className,
+    clean,
+    intent,
+    size,
+    theme,
+    fullWidth,
+    wrapping,
+    variant,
+  })
+
+  if (restProps.asChild) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { asChild, ...slotProps } = restProps
+    return <Slot className={classNames} {...slotProps} />
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { asChild, onClick, disabled, ...racProps } = restProps
+  return (
+    <ButtonRAC
+      className={classNames}
+      isDisabled={disabled}
+      onPress={onClick}
+      {...racProps}
+    />
+  )
+}

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

@@ -0,0 +1,154 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './button.module.css'
+
+export const buttonVariants = cva(styles.btn, {
+  variants: {
+    intent: {
+      inverted: styles.inverted,
+      primary: styles.primary,
+      secondary: styles.secondary,
+      tertiary: styles.tertiary,
+      text: styles.text,
+      textInverted: styles.text,
+    },
+    size: {
+      small: styles.small,
+      medium: styles.medium,
+      large: styles.large,
+    },
+    theme: {
+      base: '',
+      primaryDark: '',
+      primaryStrong: '',
+      primaryLight: '',
+      secondaryLight: '',
+      secondaryDark: '',
+      tertiaryLight: '',
+      tertiaryDark: '',
+    },
+    variant: {
+      clean: styles.clean,
+      default: styles.default,
+      icon: styles.icon,
+    },
+    wrapping: {
+      true: styles.wrapping,
+    },
+    clean: {
+      true: styles.clean,
+    },
+    fullWidth: {
+      true: styles.fullWidth,
+    },
+  },
+  defaultVariants: {
+    intent: 'primary',
+    size: 'medium',
+    theme: 'primaryLight',
+    variant: 'default',
+  },
+
+  compoundVariants: [
+    {
+      className: styles.basePrimary,
+      intent: 'primary',
+      theme: 'base',
+    },
+    {
+      className: styles.baseSecondary,
+      intent: 'secondary',
+      theme: 'base',
+    },
+    {
+      className: styles.baseTertiary,
+      intent: 'tertiary',
+      theme: 'base',
+    },
+    {
+      className: styles.baseInverted,
+      intent: 'inverted',
+      theme: 'base',
+    },
+    {
+      className: styles.primaryDarkPrimary,
+      intent: 'primary',
+      theme: 'primaryDark',
+    },
+    {
+      className: styles.primaryDarkSecondary,
+      intent: 'secondary',
+      theme: 'primaryDark',
+    },
+    {
+      className: styles.primaryLightPrimary,
+      intent: 'primary',
+      theme: 'primaryLight',
+    },
+    {
+      className: styles.primaryLightSecondary,
+      intent: 'secondary',
+      theme: 'primaryLight',
+    },
+    {
+      className: styles.primaryStrongPrimary,
+      intent: 'primary',
+      theme: 'primaryStrong',
+    },
+    {
+      className: styles.primaryStrongSecondary,
+      intent: 'secondary',
+      theme: 'primaryStrong',
+    },
+    {
+      className: styles.secondaryDarkPrimary,
+      intent: 'primary',
+      theme: 'secondaryDark',
+    },
+    {
+      className: styles.secondaryDarkSecondary,
+      intent: 'secondary',
+      theme: 'secondaryDark',
+    },
+    {
+      className: styles.secondaryLightPrimary,
+      intent: 'primary',
+      theme: 'secondaryLight',
+    },
+    {
+      className: styles.secondaryLightSecondary,
+      intent: 'secondary',
+      theme: 'secondaryLight',
+    },
+    {
+      className: styles.tertiaryDarkPrimary,
+      intent: 'primary',
+      theme: 'tertiaryDark',
+    },
+    {
+      className: styles.tertiaryDarkSecondary,
+      intent: 'secondary',
+      theme: 'tertiaryDark',
+    },
+    {
+      className: styles.tertiaryLightPrimary,
+      intent: 'primary',
+      theme: 'tertiaryLight',
+    },
+    {
+      className: styles.tertiaryLightSecondary,
+      intent: 'secondary',
+      theme: 'tertiaryLight',
+    },
+    {
+      className: styles.baseText,
+      intent: 'text',
+      theme: 'base',
+    },
+    {
+      className: styles.baseTextInverted,
+      intent: 'textInverted',
+      theme: 'base',
+    },
+  ],
+})

packages/design-system/package.json

@@ -17,6 +17,7 @@
     "./Form/Checkbox": "./dist/components/Form/Checkbox/index.js",
     "./Input": "./dist/components/Input/index.js",
     "./Label": "./dist/components/Label/index.js",
+    "./OldDSButton": "./dist/components/OldDSButton/index.js",
     "./Select": "./dist/components/Select/index.js",
     "./SkeletonShimmer": "./dist/components/SkeletonShimmer/index.js",
     "./Subtitle": "./dist/components/Subtitle/index.js",