Merged in feat/BOOK-691-children-label (pull request #3380)

feat/BOOK-691-update-children-label

* feat/BOOK-691-update-children-label


Approved-by: Matilda Haneling

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

@@ -3,8 +3,8 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import Stepper from "@scandic-hotels/design-system/Stepper"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import ChildInfoSelector from "./ChildInfoSelector"
 
@@ -26,8 +26,8 @@ export default function ChildSelector({
 }: ChildSelectorProps) {
   const intl = useIntl()
   const childrenLabel = intl.formatMessage({
-    id: "common.children",
-    defaultMessage: "Children",
+    id: "bookingwidget.dropdown.children",
+    defaultMessage: "Children (0–12 years)",
   })
   const { setValue } = useFormContext()
 
@@ -55,9 +55,9 @@ export default function ChildSelector({
   return (
     <>
       <section className={styles.container}>
-        <Caption color="uiTextHighContrast" type="bold">
-          {childrenLabel}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <p>{childrenLabel}</p>
+        </Typography>
         <Stepper
           count={currentChildren.length}
           handleOnDecrease={() => {