fix: only phrasing content is allowed inside label element

components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -128,10 +128,12 @@ export default function Search({ locations }: SearchProps) {
       }) => (
         <div className={styles.container}>
           <label {...getLabelProps({ htmlFor: name })} className={styles.label}>
-            <Caption color={isOpen ? "uiTextActive" : "red"}>
-              {state.searchData?.type === "hotels"
-                ? state.searchData?.relationships?.city?.name
-                : intl.formatMessage({ id: "Where to" })}
+            <Caption color={isOpen ? "uiTextActive" : "red"} asChild>
+              <span>
+                {state.searchData?.type === "hotels"
+                  ? state.searchData?.relationships?.city?.name
+                  : intl.formatMessage({ id: "Where to" })}
+              </span>
             </Caption>
           </label>
           <div {...getRootProps({}, { suppressRefError: true })}>

components/Forms/BookingWidget/FormContent/Voucher/index.tsx

@@ -34,8 +34,8 @@ export default function Voucher() {
       >
         <div className={styles.vouchers}>
           <label>
-            <Caption color="disabled" type="bold">
-              {vouchers}
+            <Caption color="disabled" type="bold" asChild>
+              <span>{vouchers}</span>
             </Caption>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
           </label>
@@ -49,21 +49,30 @@ export default function Voucher() {
         arrow="left"
       >
         <div className={styles.options}>
-          <label className={`${styles.option} ${styles.checkboxVoucher}`}>
-            <Checkbox name="useVouchers" registerOptions={{ disabled: true }} />
-            <Caption color="disabled">{useVouchers}</Caption>
+          <div className={`${styles.option} ${styles.checkboxVoucher}`}>
+            <Checkbox name="useVouchers" registerOptions={{ disabled: true }}>
+              <Caption color="disabled" asChild>
+                <span>{useVouchers}</span>
+              </Caption>
+            </Checkbox>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
-          </label>
-          <label className={styles.option}>
-            <Checkbox name="useBonus" registerOptions={{ disabled: true }} />
-            <Caption color="disabled">{bonus}</Caption>
+          </div>
+          <div className={styles.option}>
+            <Checkbox name="useBonus" registerOptions={{ disabled: true }}>
+              <Caption color="disabled" asChild>
+                <span>{bonus}</span>
+              </Caption>
+            </Checkbox>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
-          </label>
-          <label className={styles.option}>
-            <Checkbox name="useReward" registerOptions={{ disabled: true }} />
-            <Caption color="disabled">{reward}</Caption>
+          </div>
+          <div className={styles.option}>
+            <Checkbox name="useReward" registerOptions={{ disabled: true }}>
+              <Caption color="disabled" asChild>
+                <span>{reward}</span>
+              </Caption>
+            </Checkbox>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
-          </label>
+          </div>
         </div>
       </Tooltip>
     </div>

components/Forms/BookingWidget/FormContent/index.tsx

@@ -50,8 +50,8 @@ export default function FormContent({
           </div>
           <div className={styles.rooms}>
             <label>
-              <Caption color="red" type="bold">
-                {rooms}
+              <Caption color="red" type="bold" asChild>
+                <span>{rooms}</span>
               </Caption>
             </label>
             <GuestsRoomsProvider selectedGuests={selectedGuests}>

components/TempDesignSystem/Form/Checkbox/index.tsx

@@ -33,12 +33,12 @@ export default function Checkbox({
     >
       {({ isSelected }) => (
         <>
-          <div className={styles.checkboxContainer}>
-            <div className={styles.checkbox}>
+          <span className={styles.checkboxContainer}>
+            <span className={styles.checkbox}>
               {isSelected && <CheckIcon color="white" />}
-            </div>
+            </span>
             {children}
-          </div>
+          </span>
           {fieldState.error ? (
             <Caption className={styles.error} fontOnly>
               <InfoCircleIcon color="red" />