Merged in fix/book-149-incorrect-onfocus-behaviour-booking-widget (pull request #3320)

Fix/book 149 incorrect onfocus behaviour booking widget

* fix(BOOK-149): fixed labels shifting

* fix(BOOK-149): reintroduced sticky position

* fix(BOOK-149): added missing border to "where" text field

* added overflow to datepicker

* comment fixes

* removed separate typography declaration

* changed to onPress

* fix(BOOK-149): moved components to separate files

* fix(BOOK-149): removed desktop & mobile specific css classes

* fix(BOOK-149): new implementation of date and room modals

* dependencies update

* fix(BOOK-149): fixed child age dropdown issue, related error message, and Rooms & Guests container height

* updated info button to new variant

* fix(BOOK-149): prevent scrolling of background when modals are open in Tablet mode

* fixed overlay issue and added focus indicator on mobile

* fixed missing space in css

* rebase and fixed icon buttons after update

* simplified to use explicit boolean

* PR comments fixes

* more PR comment fixes

* PR comment fixes

* fixed setIsOpen((prev) => !prev)

* fixed issues with room error not showing properly on mobile

* fixing pr comments

* fixed flickering on GuestRoomModal


Approved-by: Erik Tiekstra

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/index.tsx

@@ -0,0 +1,33 @@
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./validationError.module.css"
+
+export default function ValidationError() {
+  const intl = useIntl()
+
+  const errorMessage = intl.formatMessage({
+    id: "bookingWidget.child.ageRequiredError",
+    defaultMessage: "Child age is required",
+  })
+
+  return (
+    <div className={styles.container}>
+      <Typography
+        className={styles.title}
+        variant="Body/Supporting text (caption)/smBold"
+      >
+        <span>
+          <MaterialIcon
+            icon="error_circle_rounded"
+            color="Icon/Feedback/Error"
+            size={20}
+          />
+          {errorMessage}
+        </span>
+      </Typography>
+    </div>
+  )
+}