Merged in feat/sw-3228-move-image-to-design-system (pull request #2616)

feat(SW-3228): Move Image to design-system

* Move Image to design-system

* Merge branch 'master' into feat/sw-3228-move-image-to-design-system


Approved-by: Linus Flood

apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx

@@ -1,9 +1,9 @@
+import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { serverClient } from "@/lib/trpc/server"
 
 import Blocks from "@/components/Blocks"
-import Image from "@/components/Image"
 import SectionHeader from "@/components/Section/Header"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"

apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx

@@ -6,13 +6,13 @@ import { type IntlShape, useIntl } from "react-intl"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"
+import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { supportEmail, supportPhone } from "@/constants/contactSupport"
 import { employeeBenefits } from "@/constants/routes/dtmc"
 
-import Image from "@/components/Image"
 import useLang from "@/hooks/useLang"
 import background from "@/public/_static/img/Scandic_Computer_Coffee.png"
 

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

@@ -1,9 +1,9 @@
 import { ArrowLeft } from "react-feather"
 
 import { overview as profileOverview } from "@scandic-hotels/common/constants/routes/myPages"
+import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 
-import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 import background from "@/public/_static/img/partner/sas/sas_x_scandic_airplane_window_background.jpg"
 

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

@@ -8,14 +8,13 @@ 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 Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 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 styles from "./link-sas.module.css"
 
 import type { LangParams } from "@/types/params"

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

@@ -3,12 +3,12 @@ import React from "react"
 import { z } from "zod"
 
 import Footnote from "@scandic-hotels/design-system/Footnote"
+import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { env } from "@/env/server"
 
-import Image from "@/components/Image"
 import { Redirect } from "@/components/Redirect"
 import { getIntl } from "@/i18n"
 

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

@@ -4,13 +4,13 @@ import React, { Suspense } from "react"
 import { hotelreservation } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { partnerSas } from "@scandic-hotels/common/constants/routes/myPages"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Image from "@scandic-hotels/design-system/Image"
 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 { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 
-import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 
 import { SASModal } from "../../components/SASModal"

apps/scandic-web/app/global-error.tsx

@@ -4,8 +4,7 @@ import * as Sentry from "@sentry/nextjs"
 import { useEffect } from "react"
 
 import { logger } from "@scandic-hotels/common/logger"
-
-import Image from "@/components/Image"
+import Image from "@scandic-hotels/design-system/Image"
 
 /* eslint-disable formatjs/no-literal-string-in-jsx */
 export default function GlobalError({

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkAccountBanner/index.tsx

@@ -1,10 +1,10 @@
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { getEurobonusMembership } from "@scandic-hotels/trpc/routers/user/helpers"
 
 import { getProfileWithExtendedPartnerData } from "@/lib/trpc/memoizedRequests"
 
-import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 import desktopBackground from "@/public/_static/img/sas/sas-scandic-link-account-banner-desktop.png"
 import mobileBackground from "@/public/_static/img/sas/sas-scandic-link-account-banner-mobile.png"

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

@@ -1,11 +1,11 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Image from "@scandic-hotels/design-system/Image"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { getEurobonusMembership } from "@scandic-hotels/trpc/routers/user/helpers"
 
 import { getProfileWithExtendedPartnerData } from "@/lib/trpc/memoizedRequests"
 
-import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 
 import { TransferPointsFormClient } from "./TransferPointsFormClient"

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

@@ -16,12 +16,12 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Image from "@scandic-hotels/design-system/Image"
 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 styles from "./transferPoints.module.css"

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

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

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

@@ -1,9 +1,9 @@
+import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 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 BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 
 import styles from "./fullWidthCampaign.module.css"

apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx

@@ -2,9 +2,9 @@ import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
+import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 
 import styles from "./hotelListingItem.module.css"

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

@@ -1,8 +1,8 @@
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import SurpriseIcon from "@scandic-hotels/design-system/Icons/SurpriseIcon"
+import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Image from "@/components/Image"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"
 
 import styles from "./joinScandicFriends.module.css"

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

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

apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx

@@ -2,10 +2,9 @@
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Image from "@/components/Image"
-
 import { variants } from "./variants"
 
 import styles from "./hero.module.css"

apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx

@@ -1,7 +1,7 @@
 import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
+import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Image from "@/components/Image"
 import Chip from "@/components/TempDesignSystem/Chip"
 
 import styles from "./dialogImage.module.css"

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

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

apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/CardImage/index.tsx

@@ -1,4 +1,5 @@
-import Image from "@/components/Image"
+import Image from "@scandic-hotels/design-system/Image"
+
 import Card from "@/components/TempDesignSystem/Card"
 
 import styles from "./cardImage.module.css"

apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx

@@ -1,4 +1,5 @@
-import Image from "@/components/Image"
+import Image from "@scandic-hotels/design-system/Image"
+
 import Card from "@/components/TempDesignSystem/Card"
 import {
   filterFacilityCards,

apps/scandic-web/components/ContentType/HotelPage/PreviewImages/index.tsx

@@ -5,8 +5,8 @@ import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import Image from "@scandic-hotels/design-system/Image"
 
-import Image from "@/components/Image"
 import Lightbox from "@/components/Lightbox/"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 

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

@@ -1,9 +1,9 @@
 import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon"
 import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon"
+import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Image from "@/components/Image"
 import LocalCallCharges from "@/components/LocalCallCharges"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"

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

@@ -1,4 +1,4 @@
-import Image from "@/components/Image"
+import Image from "@scandic-hotels/design-system/Image"
 
 import styles from "./images.module.css"
 

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

@@ -1,6 +1,6 @@
+import Image from "@scandic-hotels/design-system/Image"
 import SidePeek from "@scandic-hotels/design-system/SidePeek"
 
-import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 

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

@@ -1,4 +1,5 @@
-import Image from "@/components/Image"
+import Image from "@scandic-hotels/design-system/Image"
+
 import Card from "@/components/TempDesignSystem/Card"
 
 import styles from "./infoCard.module.css"

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

@@ -1,4 +1,5 @@
 import { FloatingBookingWidget } from "@scandic-hotels/booking-flow/BookingWidget/FloatingBookingWidget"
+import Image from "@scandic-hotels/design-system/Image"
 import Title from "@scandic-hotels/design-system/Title"
 import { BlocksEnums } from "@scandic-hotels/trpc/types/blocksEnum"
 
@@ -6,7 +7,6 @@ import { getStartPage } from "@/lib/trpc/memoizedRequests"
 
 import Blocks from "@/components/Blocks"
 import FullWidthCampaign from "@/components/Blocks/FullWidthCampaign"
-import Image from "@/components/Image"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getLang } from "@/i18n/serverContext"
 

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

@@ -1,11 +1,11 @@
 "use client"
 import { useRouter } from "next/navigation"
 
+import Image from "@scandic-hotels/design-system/Image"
 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 { renderOptions } from "./renderOptions"
 

apps/scandic-web/components/Current/Footer/index.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable formatjs/no-literal-string-in-jsx */
 
+import Image from "@scandic-hotels/design-system/Image"
+
 import { getCurrentFooter } from "@/lib/trpc/memoizedRequests"
 
-import Image from "@/components/Image"
 import { getLang } from "@/i18n/serverContext"
 
 import Navigation from "./Navigation"

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

@@ -7,6 +7,7 @@ import { useIntl } from "react-intl"
 import { findMyBookingCurrentWebPath } from "@scandic-hotels/common/constants/routes/findMyBooking"
 import { myPages } from "@scandic-hotels/common/constants/routes/myPages"
 import { getCurrentWebUrl } from "@scandic-hotels/common/utils/url"
+import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
@@ -14,7 +15,6 @@ import { logout } from "@/constants/routes/handleAuth"
 import { env } from "@/env/client"
 import useDropdownStore from "@/stores/main-menu"
 
-import Image from "@/components/Image"
 import LoginButton from "@/components/LoginButton"
 import Avatar from "@/components/MyPages/Avatar"
 import useLang from "@/hooks/useLang"

apps/scandic-web/components/Current/Hero/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable formatjs/no-literal-string-in-jsx */
 
-import Image from "@/components/Image"
+import Image from "@scandic-hotels/design-system/Image"
 
 import styles from "./hero.module.css"
 

apps/scandic-web/components/Current/currentRenderOptions.tsx

@@ -1,11 +1,10 @@
+import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 import {
   RTEItemTypeEnum,
   RTETypeEnum,
 } from "@scandic-hotels/trpc/types/RTEenums"
 
-import Image from "@/components/Image"
-
 import styles from "./currentRenderOptions.module.css"
 
 import type { EmbedByUid } from "@/types/components/deprecatedjsontohtml"

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

@@ -3,6 +3,7 @@ import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Footnote from "@scandic-hotels/design-system/Footnote"
+import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import Title from "@scandic-hotels/design-system/Title"
@@ -13,8 +14,6 @@ import {
 } from "@scandic-hotels/trpc/types/RTEenums"
 import { insertResponseToImageVaultAsset } from "@scandic-hotels/trpc/utils/imageVault"
 
-import Image from "@/components/Image"
-
 import ImageContainer from "../ImageContainer"
 import Table from "../TempDesignSystem/Table"
 import BiroScript from "../TempDesignSystem/Text/BiroScript"

apps/scandic-web/components/Footer/Details/index.tsx

@@ -1,10 +1,10 @@
+import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getFooter } from "@/lib/trpc/memoizedRequests"
 
-import Image from "@/components/Image"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"

apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx

@@ -1,10 +1,10 @@
 "use client"
 
+import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Image from "@/components/Image"
 import useLang from "@/hooks/useLang"
 import { trackFooterClick, trackSocialMediaClick } from "@/utils/tracking"
 

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

@@ -1,7 +1,6 @@
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
-import Image from "@/components/Image"
+import Image from "@scandic-hotels/design-system/Image"
 
 import styles from "./avatar.module.css"
 

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

@@ -1,4 +1,4 @@
-import Image from "@/components/Image"
+import Image from "@scandic-hotels/design-system/Image"
 
 import styles from "./hero.module.css"
 

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx

@@ -9,11 +9,11 @@ import {
 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 "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { CancellationRuleEnum } from "@/constants/booking"
 
-import Image from "@/components/Image"
 import useLang from "@/hooks/useLang"
 
 import RoomDetailsSidePeek from "./RoomDetailsSidePeek"

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

@@ -5,9 +5,9 @@ import { useIntl } from "react-intl"
 import Body from "@scandic-hotels/design-system/Body"
 import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon"
 import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon"
+import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 
-import Image from "@/components/Image"
 import useLang from "@/hooks/useLang"
 
 import styles from "./contact.module.css"

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

@@ -1,8 +1,7 @@
+import Image from "@scandic-hotels/design-system/Image"
 import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Image from "@/components/Image"
-
 import ToggleSidePeek from "./ToggleSidePeek"
 
 import styles from "./header.module.css"

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

@@ -1,6 +1,6 @@
 import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
+import Image from "@scandic-hotels/design-system/Image"
 
-import Image from "@/components/Image"
 import Chip from "@/components/TempDesignSystem/Chip"
 
 import { hotelCardDialogImageVariants } from "./variants"

apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx

@@ -1,8 +1,7 @@
+import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Image from "@/components/Image"
-
 import styles from "./summaryCard.module.css"
 
 interface SummaryCardProps {

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

@@ -1,9 +1,8 @@
+import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Image from "@/components/Image"
-
 import styles from "./promo.module.css"
 
 import type { PromoProps } from "@/types/components/hotelReservation/bookingConfirmation/promo"

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx

@@ -8,6 +8,7 @@ import { Divider } from "@scandic-hotels/design-system/Divider"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import IconChip from "@scandic-hotels/design-system/IconChip"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
 import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
@@ -15,7 +16,6 @@ import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
 import { CancellationRuleEnum } from "@/constants/booking"
 
 import { IconForFeatureCode } from "@/components/HotelReservation/utils"
-import Image from "@/components/Image"
 import Modal from "@/components/Modal"
 import useRateTitles from "@/hooks/booking/useRateTitles"
 import useLang from "@/hooks/useLang"

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

@@ -1,7 +1,7 @@
 "use client"
-import { useMyStayStore } from "@/stores/my-stay"
+import Image from "@scandic-hotels/design-system/Image"
 
-import Image from "@/components/Image"
+import { useMyStayStore } from "@/stores/my-stay"
 
 import styles from "./img.module.css"
 

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

@@ -4,6 +4,7 @@ import { notFound } from "next/navigation"
 import { dt } from "@scandic-hotels/common/dt"
 import { logger } from "@scandic-hotels/common/logger"
 import * as maskValue from "@scandic-hotels/common/utils/maskValue"
+import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
 import { parseRefId } from "@scandic-hotels/trpc/utils/refId"
@@ -35,7 +36,6 @@ import { ReferenceCard } from "@/components/HotelReservation/MyStay/ReferenceCar
 import MultiRoom from "@/components/HotelReservation/MyStay/Rooms/MultiRoom"
 import SingleRoom from "@/components/HotelReservation/MyStay/Rooms/SingleRoom"
 import SidePeek from "@/components/HotelReservation/SidePeek"
-import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 import MyStayProvider from "@/providers/MyStay"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"

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 Image from "@scandic-hotels/design-system/Image"
 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 Chip from "@/components/TempDesignSystem/Chip"
 import { useRoomContext } from "@/contexts/SelectRate/Room"
 import { isValidClientSession } from "@/utils/clientSession"

apps/scandic-web/components/Image.tsx

@@ -1,37 +0,0 @@
-"use client"
-
-import NextImage, { type ImageLoaderProps } from "next/image"
-
-import ImageFallback from "./ImageFallback"
-
-import type { CSSProperties } from "react"
-
-import type { ImageProps } from "@/types/components/image"
-
-function imageLoader({ quality, src, width }: ImageLoaderProps) {
-  const isAbsoluteUrl = src.startsWith("https://") || src.startsWith("http://")
-  const hasQS = src.indexOf("?") !== -1
-
-  if (isAbsoluteUrl) {
-    return `https://img.scandichotels.com/.netlify/images?url=${src}&w=${width}${quality ? "&q=" + quality : ""}`
-  }
-
-  return `${src}${hasQS ? "&" : "?"}w=${width}${quality ? "&q=" + quality : ""}`
-}
-
-// Next/Image adds & instead of ? before the params
-export default function Image({ focalPoint, style, ...props }: ImageProps) {
-  const styles: CSSProperties = focalPoint
-    ? {
-        objectFit: "cover",
-        objectPosition: `${focalPoint.x}% ${focalPoint.y}%`,
-        ...style,
-      }
-    : { ...style }
-
-  if (!props.src) {
-    return <ImageFallback />
-  }
-
-  return <NextImage {...props} style={styles} loader={imageLoader} />
-}

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

@@ -1,6 +1,5 @@
 import Caption from "@scandic-hotels/design-system/Caption"
-
-import Image from "../Image"
+import Image from "@scandic-hotels/design-system/Image"
 
 import styles from "./imageContainer.module.css"
 

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

@@ -5,13 +5,12 @@ import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Image from "@scandic-hotels/design-system/Image"
+import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Image from "@/components/Image"
 import Lightbox from "@/components/Lightbox"
 
-import ImageFallback from "../ImageFallback"
-
 import styles from "./imageGallery.module.css"
 
 import type { ImageGalleryProps } from "@/types/components/imageGallery"

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

@@ -2,13 +2,12 @@ import { cx } from "class-variance-authority"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { ContentEnum } from "@scandic-hotels/trpc/types/content"
 import { insertResponseToImageVaultAsset } from "@scandic-hotels/trpc/utils/imageVault"
 
-import Image from "@/components/Image"
-
 import ImageContainer from "../ImageContainer"
 import Table from "../TempDesignSystem/Table"
 import {

apps/scandic-web/components/Lightbox/FullView/index.tsx

@@ -6,10 +6,9 @@ import { useIntl } from "react-intl"
 
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Image from "@/components/Image"
-
 import styles from "./fullView.module.css"
 
 import type { FullViewProps } from "@/types/components/lightbox/lightbox"

apps/scandic-web/components/Lightbox/Gallery/index.tsx

@@ -6,10 +6,9 @@ import { useIntl } from "react-intl"
 
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Image from "@/components/Image"
-
 import styles from "./gallery.module.css"
 
 import type { GalleryProps } from "@/types/components/lightbox/lightbox"

apps/scandic-web/components/MyPages/Surprises/Card.tsx

@@ -1,9 +1,8 @@
 import { useIntl } from "react-intl"
 
+import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Image from "@/components/Image"
-
 import styles from "./surprises.module.css"
 
 import type { CardProps } from "@/types/components/blocks/surprises"

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

@@ -4,8 +4,7 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 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 Image from "@/components/Image"
+import Image from "@scandic-hotels/design-system/Image"
 
 import styles from "./ancillaryCard.module.css"
 

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 Image from "@scandic-hotels/design-system/Image"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Title from "@scandic-hotels/design-system/Title"
 
-import Image from "@/components/Image"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 
 import {

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

@@ -1,10 +1,9 @@
 import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 import Title from "@scandic-hotels/design-system/Title"
 
-import Image from "@/components/Image"
-
 import { loyaltyCardVariants } from "./variants"
 
 import styles from "./loyaltyCard.module.css"

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

@@ -4,11 +4,10 @@ import { useIntl } from "react-intl"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Image from "@scandic-hotels/design-system/Image"
+import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Image from "@/components/Image"
-import ImageFallback from "@/components/ImageFallback"
-
 import ShowMoreButton from "../ShowMoreButton"
 import { translateRoomLighting, translateSeatingType } from "./utils"
 

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

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

apps/scandic-web/providers/BookingConfirmationProvider.tsx

@@ -4,11 +4,11 @@ import { useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 
 import { createBookingConfirmationStore } from "@/stores/booking-confirmation"
 
 import { BookingConfirmationContext } from "@/contexts/BookingConfirmation"
-import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 
 import type { BookingConfirmationStore } from "@/types/contexts/booking-confirmation"
 import type { BookingConfirmationProviderProps } from "@/types/providers/booking-confirmation"

apps/scandic-web/stores/my-stay/helpers.ts

@@ -1,5 +1,4 @@
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
-
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 
 import type { IntlShape } from "react-intl"

apps/scandic-web/types/components/image.ts

@@ -1,5 +1,4 @@
 import type { FocalPoint } from "@scandic-hotels/trpc/types/image"
-import type { ImageProps as NextImageProps } from "next/image"
 
 interface Dimensions {
   width: number
@@ -20,7 +19,3 @@ export interface ApiImage {
   dimensions?: Dimensions
   focalPoint?: FocalPoint
 }
-
-export interface ImageProps extends NextImageProps {
-  focalPoint?: FocalPoint
-}

packages/design-system/lib/components/Image.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import NextImage, {
+  type ImageLoaderProps,
+  ImageProps as NextImageProps,
+} from 'next/image'
+
+import ImageFallback from './ImageFallback'
+
+import type { CSSProperties } from 'react'
+
+type FocalPoint = {
+  x: number
+  y: number
+}
+
+export interface ImageProps extends NextImageProps {
+  focalPoint?: FocalPoint
+}
+
+function imageLoader({ quality, src, width }: ImageLoaderProps) {
+  const isAbsoluteUrl = src.startsWith('https://') || src.startsWith('http://')
+  const hasQS = src.indexOf('?') !== -1
+
+  if (isAbsoluteUrl) {
+    return `https://img.scandichotels.com/.netlify/images?url=${src}&w=${width}${quality ? '&q=' + quality : ''}`
+  }
+
+  return `${src}${hasQS ? '&' : '?'}w=${width}${quality ? '&q=' + quality : ''}`
+}
+
+// Next/Image adds & instead of ? before the params
+export default function Image({ focalPoint, style, ...props }: ImageProps) {
+  const styles: CSSProperties = focalPoint
+    ? {
+        objectFit: 'cover',
+        objectPosition: `${focalPoint.x}% ${focalPoint.y}%`,
+        ...style,
+      }
+    : { ...style }
+
+  if (!props.src) {
+    return <ImageFallback />
+  }
+
+  return <NextImage {...props} style={styles} loader={imageLoader} />
+}

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

@@ -1,6 +1,6 @@
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { MaterialIcon } from '../Icons/MaterialIcon'
 
-import styles from "./imageFallback.module.css"
+import styles from './imageFallback.module.css'
 
 interface ImageFallbackProps {
   width?: string
@@ -8,8 +8,8 @@ interface ImageFallbackProps {
 }
 
 export default function ImageFallback({
-  width = "100%",
-  height = "100%",
+  width = '100%',
+  height = '100%',
 }: ImageFallbackProps) {
   return (
     <div className={styles.imageFallback} style={{ width, height }}>

packages/design-system/package.json

@@ -25,6 +25,8 @@
     "./Form/Phone": "./lib/components/Form/Phone/index.tsx",
     "./Form/RadioCard": "./lib/components/Form/RadioCard/index.tsx",
     "./IconChip": "./lib/components/IconChip/index.tsx",
+    "./Image": "./lib/components/Image.tsx",
+    "./ImageFallback": "./lib/components/ImageFallback/index.tsx",
     "./Input": "./lib/components/Input/index.tsx",
     "./Label": "./lib/components/Label/index.tsx",
     "./Link": "./lib/components/Link/index.tsx",