Merged in refactor/design-system-divider (pull request #2354)

refactor: move divider to design system

Approved-by: Arvid Norlin

apps/scandic-web/components/Blocks/DynamicContent/Overview/Stats/index.tsx

@@ -1,4 +1,4 @@
-import Divider from "@/components/TempDesignSystem/Divider"
+import { Divider } from "@scandic-hotels/design-system/Divider"
 
 import ExpiringPoints from "./ExpiringPoints"
 import Points from "./Points"

apps/scandic-web/components/Blocks/DynamicContent/Overview/index.tsx

@@ -1,3 +1,5 @@
+import { Divider } from "@scandic-hotels/design-system/Divider"
+
 import { env } from "@/env/server"
 import { getProfile } from "@/lib/trpc/memoizedRequests"
 
@@ -6,7 +8,6 @@ import DigitalTeamMemberCardAlert from "@/components/MyPages/DigitalTeamMemberCa
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
-import Divider from "@/components/TempDesignSystem/Divider"
 
 import Hero from "./Friend/Hero"
 import MembershipNumber from "./Friend/MembershipNumber"

apps/scandic-web/components/Blocks/DynamicContent/Points/Overview/index.tsx

@@ -1,9 +1,10 @@
+import { Divider } from "@scandic-hotels/design-system/Divider"
+
 import { getProfile } from "@/lib/trpc/memoizedRequests"
 
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
-import Divider from "@/components/TempDesignSystem/Divider"
 
 import Friend from "../../Overview/Friend"
 import Hero from "../../Overview/Friend/Hero"

apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx

@@ -1,9 +1,9 @@
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import ButtonLink from "@/components/ButtonLink"
 import Image from "@/components/Image"
-import Divider from "@/components/TempDesignSystem/Divider"
 import { getIntl } from "@/i18n"
 import { getSingleDecimal } from "@/utils/numberFormatting"
 
@@ -47,7 +47,7 @@ export default async function HotelListingItem({
           <Typography variant="Body/Supporting text (caption)/smRegular">
             <div className={styles.captions}>
               <span>{hotel.address.streetAddress}</span>
-              <Divider variant="vertical" color="Border/Divider/Default" />
+              <Divider variant="vertical" />
               <span>
                 {intl.formatMessage(
                   {
@@ -71,8 +71,7 @@ export default async function HotelListingItem({
           <>
             <Divider
               className={styles.ctaDivider}
-              variant="horizontal"
+              color="Border/Divider/Subtle"
-              color="borderDividerSubtle"
             />
             <ButtonLink
               variant="Primary"

apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx

@@ -4,13 +4,13 @@ import { Button } from "react-aria-components"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+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"
 
 import { dt } from "@/lib/dt"
 
 import SkeletonShimmer from "@/components/SkeletonShimmer"
-import Divider from "@/components/TempDesignSystem/Divider"
 import useLang from "@/hooks/useLang"
 
 import styles from "./button.module.css"
@@ -112,8 +112,8 @@ export default function MobileToggleButton({
               </span>
             </Typography>
           </span>
-          {/* Divider can't be a div  */}
+          {/* Button can't contain HR elements */}
-          <Divider color="baseSurfaceSubtleNormal" variant="vertical" />
+          <Divider color="Border/Divider/Subtle" variant="vertical" />
           <span className={styles.block}>
             <Typography variant={"Body/Supporting text (caption)/smBold"}>
               <span className={styles.blockLabel}>{totalNightsMsg}</span>
@@ -185,7 +185,7 @@ export function MobileToggleButtonSkeleton() {
         </Typography>
         <SkeletonShimmer display={"block"} height="20px" width="11ch" />
       </span>
-      <Divider color="baseSurfaceSubtleNormal" variant="vertical" />
+      <Divider color="Border/Divider/Subtle" variant="vertical" />
       <span className={styles.block}>
         <Typography variant="Body/Supporting text (caption)/smBold">
           <span className={styles.blockLabel}>

apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingItem/CityListingItemSkeleton.tsx

@@ -1,7 +1,8 @@
 "use client"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
+
 import SkeletonShimmer from "@/components/SkeletonShimmer"
-import Divider from "@/components/TempDesignSystem/Divider"
 
 import ExperienceListSkeleton from "../../ExperienceList/ExperienceListSkeleton"
 
@@ -23,7 +24,7 @@ export default function CityListingItemSkeleton() {
           <SkeletonShimmer height="20px" width="40%" />
         </div>
 
-        <Divider variant="horizontal" color="primaryLightSubtle" />
+        <Divider color="Border/Divider/Subtle" />
 
         <div className={styles.ctaWrapper}>
           <SkeletonShimmer height="45px" width="100px" />

apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingItem/index.tsx

@@ -3,9 +3,10 @@
 import Link from "next/link"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
+
 import ImageGallery from "@/components/ImageGallery"
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
@@ -47,7 +48,7 @@ export default function CityListingItem({ city }: CityListingItemProps) {
         ) : null}
         <Body>{city.preamble}</Body>
 
-        <Divider variant="horizontal" color="primaryLightSubtle" />
+        <Divider color="Border/Divider/Subtle" />
 
         <div className={styles.ctaWrapper}>
           <Button

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef } from "react"
 import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
 import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -13,7 +14,6 @@ import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hote
 import ButtonLink from "@/components/ButtonLink"
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
-import Divider from "@/components/TempDesignSystem/Divider"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 import { getSingleDecimal } from "@/utils/numberFormatting"
 
@@ -102,11 +102,7 @@ export default function HotelListItem(data: DestinationPagesHotelData) {
                 </ButtonRAC>
               </Typography>
               <span>
-                <Divider
+                <Divider variant="vertical" />
-                  className={styles.divider}
-                  variant="vertical"
-                  color="Border/Divider/Default"
-                />
               </span>
               <span>
                 {intl.formatMessage(

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/index.tsx

@@ -1,5 +1,6 @@
+import { Divider } from "@scandic-hotels/design-system/Divider"
+
 import Accordion from "@/components/TempDesignSystem/Accordion"
-import Divider from "@/components/TempDesignSystem/Divider"
 
 import Destination from "./Destination"
 
@@ -27,7 +28,7 @@ export function DestinationsList({ destinations }: DestinationsListProps) {
           ) : null
         )}
       </Accordion>
-      <Divider color="subtle" className={styles.divider} />
+      <Divider className={styles.divider} />
       <Accordion className={styles.accordion}>
         {accordionRight.map((data) =>
           data.numberOfHotels > 0 ? (

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/HotelListingItemSkeleton.tsx

@@ -1,7 +1,8 @@
 "use client"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
+
 import SkeletonShimmer from "@/components/SkeletonShimmer"
-import Divider from "@/components/TempDesignSystem/Divider"
 
 import styles from "./hotelListingItem.module.css"
 
@@ -31,7 +32,7 @@ export default function HotelListingItemSkeleton() {
           ))}
         </ul>
         <SkeletonShimmer height="40px" width="100px" />
-        <Divider variant="horizontal" color="primaryLightSubtle" />
+        <Divider color="Border/Divider/Subtle" />
         <div className={styles.ctaWrapper}>
           <SkeletonShimmer height="45px" width="150px" />
         </div>

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx

@@ -5,6 +5,7 @@ import { useParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
@@ -15,7 +16,6 @@ import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hote
 import ButtonLink from "@/components/ButtonLink"
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
-import Divider from "@/components/TempDesignSystem/Divider"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 import { getSingleDecimal } from "@/utils/numberFormatting"
 
@@ -85,7 +85,7 @@ export default function HotelListingItem(data: DestinationPagesHotelData) {
                       {address}
                     </NextLink>
                   </Typography>
-                  <Divider variant="vertical" color="beige" />
+                  <Divider variant="vertical" />
                 </>
               ) : null}
               <p>
@@ -143,7 +143,7 @@ export default function HotelListingItem(data: DestinationPagesHotelData) {
         )}
         {url && (
           <>
-            <Divider variant="horizontal" color="primaryLightSubtle" />
+            <Divider color="Border/Divider/Subtle" />
 
             <div className={styles.ctaWrapper}>
               <ButtonLink

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/index.tsx

@@ -1,6 +1,6 @@
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Divider from "@/components/TempDesignSystem/Divider"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
 
@@ -36,7 +36,7 @@ export default async function AboutTheHotelSidePeek({
           socials={socials}
           ecoLabels={ecoLabels}
         />
-        <Divider color="baseSurfaceSubtleHover" />
+        <Divider />
 
         {descriptions.descriptions ? (
           <Typography variant="Body/Lead text">

apps/scandic-web/components/ContentType/HotelSubpage/AccessibilitySubpage/index.tsx

@@ -1,6 +1,6 @@
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Divider from "@/components/TempDesignSystem/Divider"
 import { getIntl } from "@/i18n"
 
 import HeroHeader from "../HeroHeader"
@@ -48,7 +48,7 @@ export default async function AccessibilitySubpage({
             </h1>
           </Typography>
 
-          <Divider color="baseSurfaceSubtleHover" className={styles.divider} />
+          <Divider className={styles.divider} />
 
           <main className={styles.mainContent}>
             {elevatorPitch ? (

apps/scandic-web/components/ContentType/HotelSubpage/MeetingsSubpage/index.tsx

@@ -1,11 +1,11 @@
 import { safeTry } from "@scandic-hotels/common/utils/safeTry"
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getMeetingRooms } from "@/lib/trpc/memoizedRequests"
 
 import { meetingPackageDestinationByHotelId } from "@/components/MeetingPackageWidget/utils"
 import StickyMeetingPackageWidget from "@/components/StickyMeetingPackageWidget"
-import Divider from "@/components/TempDesignSystem/Divider"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
@@ -62,7 +62,7 @@ export default async function MeetingsSubpage({
               />
             ) : null}
           </aside>
-          <Divider color="baseSurfaceSubtleHover" className={styles.divider} />
+          <Divider className={styles.divider} />
           <main className={styles.mainContent}>
             {elevatorPitch ? (
               <div className={styles.intro}>

apps/scandic-web/components/ContentType/HotelSubpage/ParkingSubpage/index.tsx

@@ -1,7 +1,7 @@
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import ParkingInformation from "@/components/ParkingInformation"
-import Divider from "@/components/TempDesignSystem/Divider"
 import { getIntl } from "@/i18n"
 
 import HeroHeader from "../HeroHeader"
@@ -44,7 +44,7 @@ export default async function ParkingSubpage({
               contactInformation={hotel.contactInformation}
             />
           </aside>
-          <Divider color="baseSurfaceSubtleHover" className={styles.divider} />
+          <Divider className={styles.divider} />
           <main className={styles.mainContent}>
             {elevatorPitch ? (
               <div className={styles.intro}>

apps/scandic-web/components/ContentType/HotelSubpage/RestaurantSubpage/index.tsx

@@ -1,7 +1,7 @@
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import ButtonLink from "@/components/ButtonLink"
-import Divider from "@/components/TempDesignSystem/Divider"
 import { getIntl } from "@/i18n"
 
 import HeroHeader from "../HeroHeader"
@@ -41,7 +41,7 @@ export default async function RestaurantSubpage({
               hotelAddress={hotelAddress}
             />
           </aside>
-          <Divider color="baseSurfaceSubtleHover" className={styles.divider} />
+          <Divider className={styles.divider} />
           <main className={styles.mainContent}>
             {elevatorPitch ? (
               <div className={styles.intro}>

apps/scandic-web/components/ContentType/HotelSubpage/WellnessSubpage/index.tsx

@@ -1,6 +1,6 @@
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Divider from "@/components/TempDesignSystem/Divider"
 import { getIntl } from "@/i18n"
 
 import HeroHeader from "../HeroHeader"
@@ -46,7 +46,7 @@ export default async function WellnessSubpage({
               healthFacilities={hotel.healthFacilities}
             />
           </aside>
-          <Divider color="baseSurfaceSubtleHover" className={styles.divider} />
+          <Divider className={styles.divider} />
           <main className={styles.mainContent}>
             {elevatorPitch ? (
               <div className={styles.intro}>

apps/scandic-web/components/Current/Header/MyPagesMobileDropdown/index.tsx

@@ -2,12 +2,13 @@
 
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
+
 import { logout } from "@/constants/routes/handleAuth"
 import { trpc } from "@/lib/trpc/client"
 import useDropdownStore from "@/stores/main-menu"
 
 import SkeletonShimmer from "@/components/SkeletonShimmer"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import useLang from "@/hooks/useLang"
@@ -50,7 +51,7 @@ function List({ children }: { children: ReactNode }) {
   return (
     <>
       <div className={styles.dividerWrapper}>
-        <Divider color="subtle" />
+        <Divider />
       </div>
       <ul className={styles.dropdownWrapper}>
         <ul className={styles.dropdownLinks}>{children}</ul>

apps/scandic-web/components/DatePicker/Range/Desktop.tsx

@@ -4,6 +4,7 @@ import { useState } from "react"
 import { DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 
+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"
 
@@ -11,7 +12,6 @@ import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"
 
@@ -100,7 +100,10 @@ export default function DatePickerRangeDesktop({
         Footer(props) {
           return (
             <>
-              <Divider className={styles.divider} color="primaryLightSubtle" />
+              <Divider
+                className={styles.divider}
+                color="Border/Divider/Subtle"
+              />
               <footer className={props.className}>
                 <Button
                   intent="tertiary"

apps/scandic-web/components/DatePicker/Single/Desktop.tsx

@@ -4,13 +4,13 @@ import { useState } from "react"
 import { DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
@@ -101,7 +101,10 @@ export default function DatePickerSingleDesktop({
         Footer(props) {
           return (
             <>
-              <Divider className={styles.divider} color="primaryLightSubtle" />
+              <Divider
+                className={styles.divider}
+                color="Border/Divider/Subtle"
+              />
               <footer className={props.className}>
                 <Button
                   intent="tertiary"

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

@@ -1,10 +1,11 @@
+import { Divider } from "@scandic-hotels/design-system/Divider"
+
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
 import { removeMultipleSlashes } from "@/utils/url"
 
 import ImageContainer from "../ImageContainer"
-import Divider from "../TempDesignSystem/Divider"
 import Table from "../TempDesignSystem/Table"
 import BiroScript from "../TempDesignSystem/Text/BiroScript"
 import Body from "../TempDesignSystem/Text/Body"
@@ -204,7 +205,7 @@ export const renderOptions: RenderOptions = {
   },
 
   [RTETypeEnum.hr]: () => {
-    return <Divider />
+    return <Divider color="burgundy" />
   },
 
   [RTETypeEnum.li]: (

apps/scandic-web/components/DestinationFilterAndSort/index.tsx

@@ -10,12 +10,12 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
@@ -165,7 +165,7 @@ export default function DestinationFilterAndSort({
                   </header>
                   <div className={styles.content}>
                     <Sort sortItems={sortItems} />
-                    <Divider color="subtle" className={styles.divider} />
+                    <Divider className={styles.divider} />
                     <Filter filters={filters} />
                   </div>
                   {pendingCount === 0 && (

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx

@@ -4,11 +4,11 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useDebounceValue } from "usehooks-ts"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { trpc } from "@/lib/trpc/client"
 
-import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -166,7 +166,7 @@ export default function SearchList({
         </Body>
         {typeFilteredSearchHistory && typeFilteredSearchHistory.length > 0 && (
           <>
-            <Divider className={styles.noResultsDivider} color="beige" />
+            <Divider className={styles.noResultsDivider} />
             <Footnote
               className={styles.text}
               color="uiTextPlaceholder"
@@ -182,7 +182,7 @@ export default function SearchList({
               locations={typeFilteredSearchHistory}
             />
 
-            <Divider className={styles.divider} color="beige" />
+            <Divider className={styles.divider} />
             <ClearSearchButton
               getItemProps={getItemProps}
               handleClearSearchHistory={handleClearSearchHistory}
@@ -210,7 +210,7 @@ export default function SearchList({
           highlightedIndex={highlightedIndex}
           locations={typeFilteredSearchHistory}
         />
-        <Divider className={styles.divider} color="beige" />
+        <Divider className={styles.divider} />
         <ClearSearchButton
           getItemProps={getItemProps}
           handleClearSearchHistory={handleClearSearchHistory}

apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx

@@ -2,12 +2,12 @@
 
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Select } from "@scandic-hotels/design-system/Select"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getLocalizedLanguageOptions } from "@/constants/languages"
 
-import Divider from "@/components/TempDesignSystem/Divider"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
@@ -91,7 +91,7 @@ export default function FormContent() {
           name="language"
         />
       </section>
-      <Divider className={styles.divider} color="subtle" />
+      <Divider className={styles.divider} />
       <section className={styles.password}>
         <header>
           <Typography variant="Body/Paragraph/mdBold">

apps/scandic-web/components/GuestsRoomsPicker/GuestsRoom/index.tsx

@@ -1,9 +1,9 @@
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import AdultSelector from "../AdultSelector"
@@ -72,7 +72,7 @@ export function GuestsRoom({
           </Button>
         )}
       </section>
-      <Divider color="primaryLightSubtle" />
+      <Divider color="Border/Divider/Subtle" />
     </div>
   )
 }

apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -3,12 +3,12 @@
 import FocusLock from "react-focus-lock"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { logout } from "@/constants/routes/handleAuth"
 import { trpc } from "@/lib/trpc/client"
 
-import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -71,11 +71,11 @@ export default function MyPagesMenuContent({
 
         <ul className={styles.groups}>
           <li>
-            <Divider color="subtle" className={styles.divider} />
+            <Divider className={styles.divider} />
 
             <PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />
 
-            <Divider color="subtle" className={styles.divider} />
+            <Divider className={styles.divider} />
             <SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
           </li>
         </ul>

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx

@@ -2,13 +2,13 @@
 
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
 
 import BookingCodeChip from "@/components/BookingCodeChip"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
-import Divider from "@/components/TempDesignSystem/Divider"
 
 import PriceDetails from "../../PriceDetails"
 
@@ -28,7 +28,7 @@ export default function TotalPrice() {
 
   return (
     <>
-      <Divider color="primaryLightSubtle" />
+      <Divider color="Border/Divider/Subtle" />
       <div className={styles.price}>
         <div className={styles.entry}>
           <Typography variant="Body/Paragraph/mdBold">

apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx

@@ -1,5 +1,7 @@
 import { notFound } from "next/navigation"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
+
 import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
 
 import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
@@ -9,7 +11,6 @@ import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
 import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
 import SidePanel from "@/components/HotelReservation/SidePanel"
 import Alert from "@/components/TempDesignSystem/Alert"
-import Divider from "@/components/TempDesignSystem/Divider"
 import { getIntl } from "@/i18n"
 import BookingConfirmationProvider from "@/providers/BookingConfirmationProvider"
 
@@ -74,7 +75,7 @@ export default async function BookingConfirmation({
             mainRoom={room}
           />
           <PaymentDetails />
-          <Divider color="primaryLightSubtle" />
+          <Divider color="Border/Divider/Subtle" />
           <HotelDetails hotel={hotel} />
           {hotel.specialAlerts.map((alert) => (
             <div key={alert.id}>

apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx

@@ -5,6 +5,7 @@ import { useFormContext } 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 { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -13,7 +14,6 @@ import { PaymentMethodEnum } from "@/constants/booking"
 import MySavedCards from "@/components/HotelReservation/MySavedCards"
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
 import Modal from "@/components/Modal"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 
 import PaymentOptionsGroup from "../Payment/PaymentOptionsGroup"
@@ -102,7 +102,7 @@ export default function ConfirmBooking({
             </div>
           </Modal>
         </div>
-        <Divider color="subtle" />
+        <Divider />
         <Typography variant="Body/Supporting text (caption)/smRegular">
           <p>
             {intl.formatMessage({

apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx

@@ -9,10 +9,10 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import Button from "@/components/TempDesignSystem/Button"
-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"
@@ -168,7 +168,7 @@ export default function PriceChangeSummary({
                               </div>
                             ))}
                           </div>
-                          <Divider color="primaryLightSubtle" />
+                          <Divider color="Border/Divider/Subtle" />
                         </Fragment>
                       )
                     })}

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -5,6 +5,7 @@ import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
 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"
@@ -13,7 +14,6 @@ import BookingCodeChip from "@/components/BookingCodeChip"
 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"
@@ -126,7 +126,7 @@ export default function SummaryUI({
           color="CurrentColor"
         />
       </header>
-      <Divider color="primaryLightSubtle" />
+      <Divider color="Border/Divider/Subtle" />
       {rooms.map(({ room }, idx) => {
         const roomNumber = idx + 1
         const adults = room.adults
@@ -353,7 +353,7 @@ export default function SummaryUI({
                 nights={nights}
               />
             </div>
-            <Divider color="primaryLightSubtle" />
+            <Divider color="Border/Divider/Subtle" />
           </Fragment>
         )
       })}
@@ -422,7 +422,10 @@ export default function SummaryUI({
           isBreakfastIncluded={isAllBreakfastIncluded}
           alignCenter
         />
-        <Divider className={styles.bottomDivider} color="primaryLightSubtle" />
+        <Divider
+          className={styles.bottomDivider}
+          color="Border/Divider/Subtle"
+        />
       </div>
       {showSignupPromo && roomOneMemberPrice && !isMember ? (
         <SignupPromoDesktop

apps/scandic-web/components/HotelReservation/HotelCard/HotelPriceCard/index.tsx

@@ -1,7 +1,8 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
-import Divider from "@/components/TempDesignSystem/Divider"
+import { Divider } from "@scandic-hotels/design-system/Divider"
+
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -103,7 +104,7 @@ export default function HotelPriceCard({
         // Handle undefined scenarios
         productTypePrices.localPrice.pricePerNight && (
           <>
-            <Divider color="subtle" className={styles.divider} />
+            <Divider className={styles.divider} />
             <div className={styles.priceRow}>
               <dt>
                 <Caption color="uiTextMediumContrast">

apps/scandic-web/components/HotelReservation/HotelCard/index.tsx

@@ -10,6 +10,7 @@ import {
 import { memo } from "react"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -19,7 +20,6 @@ import { useHotelsMapStore } from "@/stores/hotels-map"
 import BookingCodeChip from "@/components/BookingCodeChip"
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
@@ -137,7 +137,7 @@ function HotelCard({
               </address>
 
               <div>
-                <Divider variant="vertical" color="subtle" />
+                <Divider variant="vertical" />
               </div>
               <Typography variant="Body/Supporting text (caption)/smRegular">
                 <span>

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 && (
+          {hasTotalPoints && hasTotalPrice && <Divider variant="vertical" />}
-            <Divider variant="vertical" color="subtle" />
-          )}
           {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">

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

@@ -1,11 +1,11 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import Accordion from "@/components/TempDesignSystem/Accordion"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { formatPrice } from "@/utils/numberFormatting"
@@ -174,7 +174,7 @@ export function AddedAncillaries({
                 </div>
               </div>
 
-              <Divider color="baseSurfaceSubtleHover" />
+              <Divider />
 
               <div className={styles.footer}>
                 <div className={styles.comment}>

apps/scandic-web/components/HotelReservation/MyStay/Receipt/Specification/index.tsx

@@ -1,6 +1,6 @@
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Divider from "@/components/TempDesignSystem/Divider"
 import { getIntl } from "@/i18n"
 
 import styles from "./specification.module.css"
@@ -146,7 +146,7 @@ export default async function Specification({
       {/****** Ancillaries ********/}
       {booking.ancillaries.map((ancillary) => (
         <>
-          <Divider color="subtle" />
+          <Divider />
           <div>
             <div className={styles.quantifyingHeader}>
               <Typography variant="Body/Supporting text (caption)/smBold">
@@ -197,7 +197,7 @@ export default async function Specification({
       {/****** Breakfast ********/}
       {displayBreakfastPrice && (
         <>
-          <Divider color="subtle" />
+          <Divider />
           <div>
             <div className={styles.quantifyingHeader}>
               <Typography variant="Body/Supporting text (caption)/smBold">

apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/index.tsx

@@ -1,6 +1,6 @@
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Divider from "@/components/TempDesignSystem/Divider"
 import { getIntl } from "@/i18n"
 
 import styles from "./total.module.css"
@@ -48,7 +48,7 @@ export default async function Total({ booking, currency }: TotalProps) {
           </div>
         </Typography>
 
-        <Divider color="subtle" />
+        <Divider />
         <dl className={styles.dl}>
           <Typography>
             <dt>

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">

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx

@@ -1,6 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -11,7 +12,6 @@ import { dt } from "@/lib/dt"
 import { IconForFeatureCode } from "@/components/HotelReservation/utils"
 import Image from "@/components/Image"
 import Modal from "@/components/Modal"
-import Divider from "@/components/TempDesignSystem/Divider"
 import IconChip from "@/components/TempDesignSystem/IconChip"
 import useRateTitles from "@/hooks/booking/useRateTitles"
 import useLang from "@/hooks/useLang"
@@ -315,7 +315,7 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
               </Typography>
             </div>
           )}
-          <Divider color="subtle" />
+          <Divider />
           <div className={styles.row}>
             <Typography variant="Body/Lead text">
               <p>

apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx

@@ -13,12 +13,12 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Select from "@/components/TempDesignSystem/Select"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -181,7 +181,7 @@ export default function FilterAndSortModal({
                     />
                   </div>
                   <div className={styles.divider}>
-                    <Divider color="subtle" />
+                    <Divider />
                   </div>
                   <div className={styles.filters}>
                     <FilterContent

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" />

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>

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}>

apps/scandic-web/components/OpeningHours/AlternateOpeningHours/index.tsx

@@ -2,10 +2,9 @@
 
 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 { getGroupedOpeningHours } from "../utils"
 
 import styles from "../openingHours.module.css"
@@ -35,7 +34,7 @@ export default function AlternateOpeningHours({
 
   return (
     <>
-      <Divider color="Border/Divider/Default" />
+      <Divider />
       <Typography variant="Body/Paragraph/mdBold">
         <h5 className={styles.heading}>
           {intl.formatMessage(

apps/scandic-web/components/OpeningHours/index.tsx

@@ -2,9 +2,9 @@
 
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Divider from "../TempDesignSystem/Divider"
 import AlternateOpeningHours from "./AlternateOpeningHours"
 import { getGroupedOpeningHours } from "./utils"
 
@@ -31,7 +31,7 @@ export default function OpeningHours({
       <Typography variant="Title/Overline/sm">
         <h5 className={styles.heading}>{heading ?? openingHours.name}</h5>
       </Typography>
-      <Divider color="Border/Divider/Default" />
+      <Divider />
 
       <Typography variant="Body/Paragraph/mdRegular">
         <div className={styles.text}>

apps/scandic-web/components/ParkingInformation/index.tsx

@@ -2,11 +2,11 @@
 
 import { useIntl } from "react-intl"
 
+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"
 
 import ButtonLink from "@/components/ButtonLink"
-import Divider from "@/components/TempDesignSystem/Divider"
 
 import ParkingList from "./ParkingList"
 import ParkingPrices from "./ParkingPrices"
@@ -53,7 +53,7 @@ export default function ParkingInformation({
               {intl.formatMessage({ defaultMessage: "Weekday prices" })}
             </h6>
           </Typography>
-          <Divider color="baseSurfaceSubtleHover" />
+          <Divider />
           {parking.pricing.localCurrency ? (
             <ParkingPrices
               currency={parking.pricing.localCurrency.currency}
@@ -68,7 +68,7 @@ export default function ParkingInformation({
               {intl.formatMessage({ defaultMessage: "Weekend prices" })}
             </h6>
           </Typography>
-          <Divider color="baseSurfaceSubtleHover" />
+          <Divider />
           {parking.pricing.localCurrency ? (
             <ParkingPrices
               currency={parking.pricing.localCurrency.currency}

apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut.tsx

@@ -2,11 +2,11 @@
 
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { IconName } from "@/components/Icons/iconName"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
-import Divider from "@/components/TempDesignSystem/Divider"
 
 import styles from "./sidePeekAccordion.module.css"
 
@@ -33,7 +33,7 @@ export default function CheckInCheckOutAccordionItem({
             {intl.formatMessage({ defaultMessage: "Hours" })}
           </h4>
         </Typography>
-        <Divider color="Border/Divider/Default" />
+        <Divider />
         <Typography variant="Body/Paragraph/mdRegular">
           <div>
             <p>

apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx

@@ -1,7 +1,8 @@
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
+
 import Image from "@/components/Image"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { formatPrice } from "@/utils/numberFormatting"
@@ -46,7 +47,7 @@ export function AncillaryCard({ ancillary }: AncillaryCardProps) {
             {ancillary.points && (
               <>
                 <div>
-                  <Divider variant="vertical" color="subtle" />
+                  <Divider variant="vertical" />
                 </div>
                 <Body textAlign="right" color="uiTextHighContrast">
                   {intl.formatMessage(

apps/scandic-web/components/TempDesignSystem/Divider/divider.ts

@@ -1,7 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-
-import type { dividerVariants } from "./variants"
-
-export interface DividerProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
-    VariantProps<typeof dividerVariants> {}

apps/scandic-web/components/TempDesignSystem/Divider/index.tsx

@@ -1,13 +0,0 @@
-import { dividerVariants } from "./variants"
-
-import type { DividerProps } from "./divider"
-
-export default function Divider({
-  className,
-  color,
-  opacity,
-  variant,
-}: DividerProps) {
-  const classNames = dividerVariants({ className, color, opacity, variant })
-  return <hr className={classNames} />
-}

apps/scandic-web/components/TempDesignSystem/Divider/variants.ts

@@ -1,34 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./divider.module.css"
-
-export const dividerVariants = cva(styles.divider, {
-  variants: {
-    color: {
-      baseSurfaceSubtleNormal: styles.baseSurfaceSubtleNormal,
-      beige: styles.beige,
-      burgundy: styles.burgundy,
-      pale: styles.pale,
-      peach: styles.peach,
-      primaryLightSubtle: styles.primaryLightSubtle,
-      subtle: styles.subtle,
-      white: styles.white,
-      baseSurfaceSubtleHover: styles.baseSurfaceSubtleHover,
-      "Border/Divider/Default": styles["Border-Divider-Default"],
-      borderDividerSubtle: styles.borderDividerSubtle,
-    },
-    opacity: {
-      100: styles.opacity100,
-      8: styles.opacity8,
-    },
-    variant: {
-      horizontal: styles.horizontal,
-      vertical: styles.vertical,
-    },
-  },
-  defaultVariants: {
-    color: "burgundy",
-    opacity: 100,
-    variant: "horizontal",
-  },
-})

apps/scandic-web/components/TempDesignSystem/Form/RadioCard/index.tsx

@@ -3,11 +3,10 @@
 import { cx } from "class-variance-authority"
 import { useFormContext } from "react-hook-form"
 
+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"
 
-import Divider from "@/components/TempDesignSystem/Divider"
-
 import styles from "./radioCard.module.css"
 
 import type { RadioCardProps } from "./types"
@@ -76,11 +75,7 @@ export default function RadioCard({
       </Typography>
 
       {description || descriptionSecondary ? (
-        <Divider
+        <Divider className={styles.divider} />
-          className={styles.divider}
-          variant="horizontal"
-          color="subtle"
-        />
       ) : null}
 
       {description ? (

apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx

@@ -2,11 +2,11 @@
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import Image from "@/components/Image"
 
-import Divider from "../Divider"
 import ShowMoreButton from "../ShowMoreButton"
 import Body from "../Text/Body"
 import Caption from "../Text/Caption"
@@ -102,7 +102,7 @@ export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
                 </div>
               ))}
             </div>
-            <Divider color="baseSurfaceSubtleNormal" />
+            <Divider color="Border/Divider/Subtle" />
             <div className={styles.rowItem}>
               <div className={styles.capacity}>
                 <Caption color="uiTextMediumContrast">

packages/design-system/lib/components/Divider/Divider.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Divider } from './Divider'
+
+const meta: Meta<typeof Divider> = {
+  title: 'Components/Divider',
+  component: Divider,
+  argTypes: {},
+}
+
+export default meta
+
+type Story = StoryObj<typeof Divider>
+
+export const Default: Story = {
+  args: {},
+}

packages/design-system/lib/components/Divider/Divider.tsx

@@ -0,0 +1,8 @@
+import { dividerVariants } from './variants'
+
+import type { DividerProps } from './types'
+
+export function Divider({ className, color, variant }: DividerProps) {
+  const classNames = dividerVariants({ className, color, variant })
+  return <hr className={classNames} />
+}

packages/design-system/lib/components/Divider/divider.module.css

@@ -25,42 +25,14 @@
   background-color: var(--Primary-Light-On-Surface-Divider);
 }
 
-.beige {
-  background-color: var(--Scandic-Beige-20);
-}
-
 .white {
   background-color: var(--UI-Opacity-White-100);
 }
 
-.subtle {
+.Border-Divider-Subtle {
-  background-color: var(--Base-Border-Subtle);
-}
-
-.primaryLightSubtle {
-  background-color: var(--Primary-Light-On-Surface-Divider-subtle);
-}
-
-.baseSurfaceSubtleNormal {
-  background-color: var(--Base-Surface-Subtle-Normal);
-}
-
-.borderDividerSubtle {
   background-color: var(--Border-Divider-Subtle);
 }
 
-.opacity100 {
-  opacity: 1;
-}
-
-.opacity8 {
-  opacity: 0.08;
-}
-
-.baseSurfaceSubtleHover {
-  background-color: var(--Base-Surface-Subtle-Hover);
-}
-
 .Border-Divider-Default {
   background-color: var(--Border-Divider-Default);
 }

packages/design-system/lib/components/Divider/index.ts

@@ -0,0 +1 @@
+export { Divider } from './Divider'

packages/design-system/lib/components/Divider/types.ts

@@ -0,0 +1,7 @@
+import type { VariantProps } from 'class-variance-authority'
+
+import type { dividerVariants } from './variants'
+
+export interface DividerProps
+  extends Omit<React.HTMLAttributes<HTMLHRElement>, 'color'>,
+    VariantProps<typeof dividerVariants> {}

packages/design-system/lib/components/Divider/variants.ts

@@ -0,0 +1,24 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './divider.module.css'
+
+export const dividerVariants = cva(styles.divider, {
+  variants: {
+    color: {
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+      peach: styles.peach,
+      white: styles.white,
+      'Border/Divider/Default': styles['Border-Divider-Default'],
+      'Border/Divider/Subtle': styles['Border-Divider-Subtle'],
+    },
+    variant: {
+      horizontal: styles.horizontal,
+      vertical: styles.vertical,
+    },
+  },
+  defaultVariants: {
+    color: 'Border/Divider/Default',
+    variant: 'horizontal',
+  },
+})

packages/design-system/package.json

@@ -9,6 +9,7 @@
     "./ChipButton": "./dist/components/ChipButton/index.js",
     "./ChipLink": "./dist/components/ChipLink/index.js",
     "./Chips": "./dist/components/Chips/index.js",
+    "./Divider": "./dist/components/Divider/index.js",
     "./Select": "./dist/components/Select/index.js",
     "./Typography": "./dist/components/Typography/index.js",
     "./RegularRateCard": "./dist/components/RateCard/Regular/index.js",