Merged in fix(BOOK-659)-multiroom-name-check (pull request #3384)

fix(BOOK-659): trim names for multiroom booking

* fix(BOOK-659): trim names for multiroom booking


Approved-by: Matilda Haneling

packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/index.tsx

@@ -7,9 +7,9 @@ import { useIntl } from "react-intl"
 
 import { usePhoneNumberParsing } from "@scandic-hotels/common/hooks/usePhoneNumberParsing"
 import { getDefaultCountryFromLang } from "@scandic-hotels/common/utils/phone"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
 import Phone from "@scandic-hotels/design-system/Form/Phone"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { useFormTracking } from "@scandic-hotels/tracking/useFormTracking"
 
 import { useBookingFlowConfig } from "../../../../bookingFlowConfig/bookingFlowConfigContext"
@@ -198,17 +198,14 @@ export default function Details() {
           <JoinScandicCard updateDetailsStore={updateDetailsStore} />
         )}
         <div className={styles.container}>
-          <Footnote
-            color="uiTextHighContrast"
-            textTransform="uppercase"
-            type="label"
-            className={styles.fullWidth}
-          >
-            {intl.formatMessage({
-              id: "enterDetails.roomInfo.title",
-              defaultMessage: "Guest information",
-            })}
-          </Footnote>
+          <Typography variant="Title/Overline/sm" className={styles.fullWidth}>
+            <p>
+              {intl.formatMessage({
+                id: "enterDetails.roomInfo.title",
+                defaultMessage: "Guest information",
+              })}
+            </p>
+          </Typography>
           <div
             ref={(el) => {
               refs.current.firstName = el