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/DatePicker/Range/Mobile.tsx

@@ -5,8 +5,8 @@ import { useIntl } from "react-intl"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "../../../../hooks/useLang"
@@ -131,19 +131,15 @@ export default function DatePickerRangeMobile({
       <footer className={styles.footer}>
         <Button
           className={styles.button}
-          intent="tertiary"
+          variant="Primary"
+          color="Primary"
+          size="md"
           onPress={close}
-          size="large"
-          theme="base"
         >
-          <Typography variant="Body/Paragraph/mdBold">
-            <span>
-              {intl.formatMessage({
-                id: "datePicker.selectDates",
-                defaultMessage: "Select dates",
-              })}
-            </span>
-          </Typography>
+          {intl.formatMessage({
+            id: "datePicker.selectDates",
+            defaultMessage: "Select dates",
+          })}
         </Button>
       </footer>
     </div>