fix: add forms in accordions

components/HotelReservation/HotelSelectionHeader/index.tsx

@@ -1,8 +1,10 @@
+"use client"
+import { useIntl } from "react-intl"
+
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
 
 import HotelDetailSidePeek from "./HotelDetailSidePeek"
 
@@ -10,10 +12,10 @@ import styles from "./hotelSelectionHeader.module.css"
 
 import { HotelSelectionHeaderProps } from "@/types/components/hotelReservation/selectRate/hotelSelectionHeader"
 
-export default async function HotelSelectionHeader({
+export default function HotelSelectionHeader({
   hotel,
 }: HotelSelectionHeaderProps) {
-  const intl = await getIntl()
+  const intl = useIntl()
 
   return (
     <header className={styles.hotelSelectionHeader}>

components/HotelReservation/SelectRate/SectionAccordion/index.tsx

@@ -57,7 +57,7 @@ export default function SectionAccordion({
           ) : null}
         </div>
       </div>
-      <main className={styles.main}>
+      <div className={styles.main}>
         <header className={styles.headerContainer}>
           <div>
             <Footnote
@@ -70,7 +70,7 @@ export default function SectionAccordion({
             <Subtitle
               type="two"
               className={styles.selection}
-              color="highContrast"
+              color="uiTextHighContrast"
             >
               {label}
             </Subtitle>
@@ -85,7 +85,7 @@ export default function SectionAccordion({
         <div className={styles.content} ref={contentRef}>
           {children}
         </div>
-      </main>
+      </div>
     </section>
   )
 }

components/TempDesignSystem/Text/Subtitle/subtitle.module.css

@@ -59,6 +59,6 @@
   color: var(--Scandic-Brand-Pale-Peach);
 }
 
-.highContrast {
+.uiTextHighContrast {
   color: var(--UI-Text-High-contrast);
 }

components/TempDesignSystem/Text/Subtitle/variants.ts

@@ -8,7 +8,7 @@ const config = {
       black: styles.black,
       burgundy: styles.burgundy,
       pale: styles.pale,
-      highContrast: styles.highContrast,
+      uiTextHighContrast: styles.uiTextHighContrast,
     },
     textAlign: {
       center: styles.center,