refactor: move divider to design system

remove not used variants and duplicate colors

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/Confirmation/index.tsx

@@ -1,13 +1,14 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
+
 import { dt } from "@/lib/dt"
 import { trpc } from "@/lib/trpc/client"
 import { useMyStayStore } from "@/stores/my-stay"
 
 import Modal from "@/components/HotelReservation/MyStay/Modal"
 import PriceContainer from "@/components/HotelReservation/MyStay/ReferenceCard/PriceContainer"
-import Divider from "@/components/TempDesignSystem/Divider"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 
@@ -148,7 +149,7 @@ export default function Confirmation({
               striked
             />
 
-            <Divider color="primaryLightSubtle" />
+            <Divider color="Border/Divider/Subtle" />
 
             <PriceAndDate
               checkInDate={newCheckIn}

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx

@@ -3,6 +3,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { PaymentMethodEnum } from "@/constants/booking"
@@ -16,7 +17,6 @@ import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Paym
 import MySavedCards from "@/components/HotelReservation/MySavedCards"
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
 import LoadingSpinner from "@/components/LoadingSpinner"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Link from "@/components/TempDesignSystem/Link"
 import { toast } from "@/components/TempDesignSystem/Toasts"
@@ -182,7 +182,7 @@ export default function Form() {
               </span>
             </Typography>
           </div>
-          <Divider variant="vertical" color="subtle" />
+          <Divider variant="vertical" />
           <Typography variant="Title/Subtitle/md">
             <span className={styles.baseTextHighContrast}>
               {formatPrice(intl, 0, currencyCode)}

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

@@ -1,12 +1,11 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
-import Divider from "@/components/TempDesignSystem/Divider"
-
 import styles from "./reference.module.css"
 
 export default function Reference() {
@@ -43,7 +42,7 @@ export default function Reference() {
           </p>
         </Typography>
       </div>
-      <Divider color="subtle" />
+      <Divider />
     </>
   )
 }

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

@@ -1,9 +1,9 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Divider from "@/components/TempDesignSystem/Divider"
 import { useGuaranteePaymentFailedToast } from "@/hooks/booking/useGuaranteePaymentFailedToast"
 
 import TotalPrice from "../Rooms/TotalPrice"
@@ -29,7 +29,7 @@ export function ReferenceCard() {
       <Room />
       <Cancellations />
       <GuaranteeInfo />
-      <Divider color="subtle" />
+      <Divider />
 
       <div className={styles.row}>
         <Typography variant="Body/Lead text">