refactor: move divider to design system

remove not used variants and duplicate colors

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

@@ -1,5 +1,6 @@
 import { cx } from "class-variance-authority"
 
+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"
 
@@ -8,7 +9,6 @@ import Link from "@/components/TempDesignSystem/Link"
 import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
 
 import ImageContainer from "../ImageContainer"
-import Divider from "../TempDesignSystem/Divider"
 import Table from "../TempDesignSystem/Table"
 import {
   hasAvailableParagraphFormat,
@@ -87,7 +87,7 @@ export const renderOptions: RenderOptions = {
       return (
         <Link
           key={node.uid}
-          className={cx(styles.link, className)}
+          className={className}
           {...props}
           href={node.attrs.url}
           target={node.attrs.target ?? "_blank"}
@@ -244,7 +244,7 @@ export const renderOptions: RenderOptions = {
   },
 
   [RTETypeEnum.hr]: () => {
-    return <Divider className={styles.divider} />
+    return <Divider className={styles.divider} color="burgundy" />
   },
 
   [RTETypeEnum.li]: (
@@ -348,7 +348,7 @@ export const renderOptions: RenderOptions = {
     }
 
     return (
-      <span className={cx(styles.span, propsClassName)} {...props}>
+      <span className={propsClassName} {...props}>
         {next(node.children, embeds, fullRenderOptions)}
       </span>
     )
@@ -416,7 +416,7 @@ export const renderOptions: RenderOptions = {
           return (
             <Link
               key={node.uid}
-              className={cx(styles.link, className)}
+              className={className}
               href={node.attrs.href}
               textDecoration="underline"
               target="_blank"
@@ -466,7 +466,7 @@ export const renderOptions: RenderOptions = {
           return (
             <Link
               key={node.uid}
-              className={cx(styles.link, className)}
+              className={className}
               {...props}
               href={entry.node.url}
               textDecoration="underline"
@@ -818,7 +818,7 @@ export const renderOptions: RenderOptions = {
     }
     return (
       <Typography key={id} variant="Body/Paragraph/mdRegular">
-        <span className={cx(styles.span, propsClassName)} {...props}>
+        <span className={propsClassName} {...props}>
           {children}
         </span>
       </Typography>