refactor: move divider to design system

remove not used variants and duplicate colors

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/index.tsx

@@ -1,9 +1,9 @@
 import { Fragment } from "react"
 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 { formatPrice } from "@/utils/numberFormatting"
 
 import PriceRow from "./PriceRow"
@@ -42,7 +42,7 @@ export default function PriceSummary({
           })}
         </h2>
       </Typography>
-      <Divider color="subtle" />
+      <Divider />
 
       {items.map((item) => (
         <Fragment key={item.title}>
@@ -68,7 +68,7 @@ export default function PriceSummary({
               })}`}
             />
           )}
-          <Divider color="subtle" />
+          <Divider />
         </Fragment>
       ))}
 

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/index.tsx

@@ -1,6 +1,7 @@
 import { useWatch } 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 {
@@ -9,7 +10,6 @@ import {
   useAddAncillaryStore,
 } from "@/stores/my-stay/add-ancillary-flow"
 
-import Divider from "@/components/TempDesignSystem/Divider"
 import { formatPrice } from "@/utils/numberFormatting"
 
 import PriceSummary from "./PriceSummary"
@@ -210,7 +210,7 @@ export default function PriceDetails({
                     )}
                 </p>
               </Typography>
-              <Divider variant="vertical" color="subtle" />
+              <Divider variant="vertical" />
             </>
           ) : null}
           {hasTotalPrice && (
@@ -224,13 +224,11 @@ export default function PriceDetails({
               </p>
             </Typography>
           )}
-          {hasTotalPoints && hasTotalPrice && (
-            <Divider variant="vertical" color="subtle" />
-          )}
+          {hasTotalPoints && hasTotalPrice && <Divider variant="vertical" />}
           {hasTotalPoints && (
             <div>
               <div>
-                <Divider variant="vertical" color="subtle" />
+                <Divider variant="vertical" />
               </div>
               <Typography variant="Body/Paragraph/mdBold">
                 <p>
@@ -248,7 +246,7 @@ export default function PriceDetails({
           )}
         </div>
       </div>
-      <Divider color="subtle" />
+      <Divider />
       {isPriceDetailsOpen && currentStep === AncillaryStepEnum.confirmation && (
         <PriceSummary
           totalPrice={totalPrice}

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

@@ -6,6 +6,7 @@ import { useEffect, useState } from "react"
 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"
@@ -28,7 +29,6 @@ import {
 } from "@/components/HotelReservation/MyStay/utils/ancillaries"
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Modal from "@/components/Modal"
-import Divider from "@/components/TempDesignSystem/Divider"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking"
 import useLang from "@/hooks/useLang"
@@ -385,7 +385,7 @@ export default function AddAncillaryFlowModal({
                         </Typography>
                         {selectedAncillary.points && (
                           <div className={styles.pointsDivider}>
-                            <Divider variant="vertical" color="subtle" />
+                            <Divider variant="vertical" />
                             <Typography variant="Body/Paragraph/mdBold">
                               <p>
                                 {intl.formatMessage(
@@ -471,7 +471,7 @@ function BreakfastPriceList() {
         {breakfastData.nrOfPayingChildren > 0 && (
           <>
             <div className={styles.divider}>
-              <Divider variant="vertical" color="baseSurfaceSubtleNormal" />
+              <Divider variant="vertical" color="Border/Divider/Subtle" />
             </div>
 
             <Typography variant="Body/Paragraph/mdBold">
@@ -492,7 +492,7 @@ function BreakfastPriceList() {
         {breakfastData.nrOfFreeChildren > 0 && (
           <>
             <div className={styles.divider}>
-              <Divider variant="vertical" color="baseSurfaceSubtleNormal" />
+              <Divider variant="vertical" color="Border/Divider/Subtle" />
             </div>
 
             <Typography variant="Body/Paragraph/mdBold">