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