refactor: move divider to design system

remove not used variants and duplicate colors

apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -1,10 +1,10 @@
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Alert from "@/components/TempDesignSystem/Alert"
-import Divider from "@/components/TempDesignSystem/Divider"
 import { getIntl } from "@/i18n"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 import { getSingleDecimal } from "@/utils/numberFormatting"
@@ -71,7 +71,7 @@ export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) {
               />
             </div>
           </div>
-          <Divider color="subtle" variant="vertical" />
+          <Divider variant="vertical" />
           <div className={styles.facilities}>
             <div className={styles.facilityList}>
               {sortedFacilities?.map((facility) => (
@@ -131,7 +131,7 @@ export function HotelInfoCardSkeleton() {
               </Typography>
             </div>
           </div>
-          <Divider color="subtle" variant="vertical" />
+          <Divider variant="vertical" />
           <div className={styles.facilities}>
             <div className={styles.facilityList}>
               <Typography

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

@@ -4,6 +4,7 @@ import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { dt } from "@/lib/dt"
@@ -12,7 +13,6 @@ import { useRatesStore } from "@/stores/select-rate"
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import Modal from "@/components/Modal"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -101,7 +101,7 @@ export default function Summary({
           />
         </ButtonRAC>
       </header>
-      <Divider color="primaryLightSubtle" />
+      <Divider color="Border/Divider/Subtle" />
       {rooms.map((room, idx) => {
         if (!room) {
           return null
@@ -287,7 +287,7 @@ export default function Summary({
                 </div>
               ))}
             </div>
-            <Divider color="primaryLightSubtle" />
+            <Divider color="Border/Divider/Subtle" />
           </Fragment>
         )
       })}
@@ -355,7 +355,10 @@ export default function Summary({
             )}
           </div>
         </div>
-        <Divider className={styles.bottomDivider} color="primaryLightSubtle" />
+        <Divider
+          className={styles.bottomDivider}
+          color="Border/Divider/Subtle"
+        />
       </div>
       {!isMember && memberPrice ? (
         <SignupPromoDesktop memberPrice={memberPrice} badgeContent={"✌️"} />

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx

@@ -3,12 +3,12 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { trpc } from "@/lib/trpc/client"
 import { useRatesStore } from "@/stores/select-rate"
 
-import Divider from "@/components/TempDesignSystem/Divider"
 import { useRoomContext } from "@/contexts/SelectRate/Room"
 import useLang from "@/hooks/useLang"
 
@@ -75,7 +75,7 @@ export default function Form({ close }: { close: () => void }) {
       <form onSubmit={methods.handleSubmit(onSubmit)}>
         <Checkboxes />
         <div className={styles.footer}>
-          <Divider color="borderDividerSubtle" className={styles.divider} />
+          <Divider color="Border/Divider/Subtle" className={styles.divider} />
           <div className={styles.buttonContainer}>
             <Typography variant="Body/Supporting text (caption)/smBold">
               <Button variant="Tertiary" size="Small" type="submit">

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/BreakfastMessage/index.tsx

@@ -2,11 +2,11 @@
 import { useSession } from "next-auth/react"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useRatesStore } from "@/stores/select-rate"
 
-import Divider from "@/components/TempDesignSystem/Divider"
 import { useRoomContext } from "@/contexts/SelectRate/Room"
 import { isValidClientSession } from "@/utils/clientSession"
 
@@ -66,14 +66,14 @@ export default function BreakfastMessage({
 
   return (
     <div className={styles.message}>
-      <Divider className={styles.divider} color="borderDividerSubtle" />
+      <Divider className={styles.divider} color="Border/Divider/Subtle" />
       <Typography
         variant={"Body/Supporting text (caption)/smRegular"}
         className={styles.breakfastMessage}
       >
         <p>{breakfastMessage}</p>
       </Typography>
-      <Divider className={styles.divider} color="borderDividerSubtle" />
+      <Divider className={styles.divider} color="Border/Divider/Subtle" />
     </div>
   )
 }

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/index.tsx

@@ -2,11 +2,12 @@
 
 import { useSession } from "next-auth/react"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
+
 import { dt } from "@/lib/dt"
 import { useRatesStore } from "@/stores/select-rate"
 
 import SkeletonShimmer from "@/components/SkeletonShimmer"
-import Divider from "@/components/TempDesignSystem/Divider"
 import { useRoomContext } from "@/contexts/SelectRate/Room"
 import { isValidClientSession } from "@/utils/clientSession"
 
@@ -62,7 +63,7 @@ export default function Rates({
       <Code {...sharedProps} code={code} />
       <Campaign {...sharedProps} campaign={campaign} />
       <Redemptions {...sharedProps} redemptions={redemptions} />
-      {showDivider ? <Divider color="borderDividerSubtle" /> : null}
+      {showDivider ? <Divider color="Border/Divider/Subtle" /> : null}
       {isFetchingAdditionalRate ? (
         <>
           <SkeletonShimmer height="100px" />