refactor: move divider to design system

remove not used variants and duplicate colors

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

@@ -1,3 +1,4 @@
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -10,7 +11,6 @@ import ButtonLink from "@/components/ButtonLink"
 import CommunicationSlot from "@/components/MyPages/Profile/Communication"
 import CreditCardSlot from "@/components/MyPages/Profile/CreditCards"
 import Header from "@/components/Profile/Header"
-import Divider from "@/components/TempDesignSystem/Divider"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 import { isValidCountry } from "@/utils/countries"
@@ -178,7 +178,7 @@ export default async function Profile() {
 
       <ChangeNameDisclaimer />
 
-      <Divider color="burgundy" opacity={8} />
+      <Divider />
       <CreditCardSlot />
       {/* <MembershipCardSlot /> */}
       <CommunicationSlot />

apps/scandic-web/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx

@@ -1,9 +1,9 @@
 import { Fragment } from "react"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import SkeletonShimmer from "@/components/SkeletonShimmer"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 
 import styles from "./sidebar.module.css"
@@ -16,11 +16,11 @@ export default function SidebarNavigationSkeleton() {
         <Typography variant="Title/Subtitle/md">
           <SkeletonShimmer width="10ch" />
         </Typography>
-        <Divider color="beige" />
+        <Divider />
         <ul className={styles.list}>
           {skeletonWidths.map((width, index) => (
             <Fragment key={index}>
-              {index === 4 && <Divider color="beige" />}
+              {index === 4 && <Divider />}
               <li>
                 <Link href="" size="regular" variant="sidebar">
                   <SkeletonShimmer width={width} />

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

@@ -1,3 +1,4 @@
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { logout } from "@/constants/routes/handleAuth"
@@ -5,7 +6,6 @@ import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import { SASLevelUpgradeCheck } from "@/components/MyPages/SASLevelUpgradeCheck"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
@@ -45,7 +45,7 @@ async function PrimaryLinks() {
 
   return (
     <>
-      <Divider color="beige" />
+      <Divider />
       <ul className={styles.list}>
         {nav?.primaryLinks.map((link) => (
           <li key={link.href}>
@@ -74,7 +74,7 @@ async function SecondaryLinks() {
 
   return (
     <>
-      <Divider color="beige" />
+      <Divider />
       <ul className={styles.list}>
         {nav?.secondaryLinks.map((link) => (
           <li key={link.href}>