@qite/tide-booking-component 1.4.39 → 1.4.40

package/src/search-results/components/icon.tsx

@@ -9,14 +9,19 @@ interface IconProps {
   title?: string;
   width?: number;
   height?: number;
+  fill?: string;
 }
 
-const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) => {
+const Icon: React.FC<IconProps> = ({ name, className, title, width, height, fill }) => {
   const { icons } = { icons: '' }; // useContext(SettingsContext);
 
   if (icons) {
     return (
-      <svg className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')} width={width} height={height}>
+      <svg
+        className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
+        width={width}
+        height={height}
+        fill={fill ?? 'currentColor'}>
         {title && <title>{title}</title>}
         <use href={`${icons}#${name}`}></use>
       </svg>
@@ -30,7 +35,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 384 512">
+          viewBox="0 0 384 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -46,7 +52,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 448 512">
+          viewBox="0 0 448 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z" />
@@ -59,7 +66,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 448 512">
+          viewBox="0 0 448 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z" />
@@ -72,7 +80,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 320 512">
+          viewBox="0 0 320 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
@@ -85,7 +94,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 512 512">
+          viewBox="0 0 512 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -101,7 +111,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 448 512">
+          viewBox="0 0 448 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -117,7 +128,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 640 512">
+          viewBox="0 0 640 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -133,7 +145,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 416 512">
+          viewBox="0 0 416 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free v5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path d="M207.9 15.2c.8 4.7 16.1 94.5 16.1 128.8 0 52.3-27.8 89.6-68.9 104.6L168 486.7c.7 13.7-10.2 25.3-24 25.3H80c-13.7 0-24.7-11.5-24-25.3l12.9-238.1C27.7 233.6 0 196.2 0 144 0 109.6 15.3 19.9 16.1 15.2 19.3-5.1 61.4-5.4 64 16.3v141.2c1.3 3.4 15.1 3.2 16 0 1.4-25.3 7.9-139.2 8-141.8 3.3-20.8 44.7-20.8 47.9 0 .2 2.7 6.6 116.5 8 141.8.9 3.2 14.8 3.4 16 0V16.3c2.6-21.6 44.8-21.4 48-1.1zm119.2 285.7l-15 185.1c-1.2 14 9.9 26 23.9 26h56c13.3 0 24-10.7 24-24V24c0-13.2-10.7-24-24-24-82.5 0-221.4 178.5-64.9 300.9z" />
@@ -146,13 +159,11 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 576 512">
+          viewBox="0 0 576 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
-          <path
-            d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z"
-            fill="currentColor"
-          />
+          <path d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z" />
         </svg>
       );
 
@@ -162,7 +173,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 512 512">
+          viewBox="0 0 512 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -178,7 +190,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 576 512">
+          viewBox="0 0 576 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
@@ -191,7 +204,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 576 512">
+          viewBox="0 0 576 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path d="M288 0c-12.2 .1-23.3 7-28.6 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3L288 439.8 288 0zM429.9 512c1.1 .1 2.1 .1 3.2 0l-3.2 0z" />
@@ -204,7 +218,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 448 512">
+          viewBox="0 0 448 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z" />
@@ -217,7 +232,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 512 512">
+          viewBox="0 0 512 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z" />
@@ -230,7 +246,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 448 512">
+          viewBox="0 0 448 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
@@ -243,7 +260,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 640 640">
+          viewBox="0 0 640 640"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -259,7 +277,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 384 512">
+          viewBox="0 0 384 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -275,7 +294,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 512 512">
+          viewBox="0 0 512 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -291,7 +311,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 576 512">
+          viewBox="0 0 576 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -307,7 +328,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 512 512">
+          viewBox="0 0 512 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -323,7 +345,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 512 512">
+          viewBox="0 0 512 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -339,7 +362,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 640 512">
+          viewBox="0 0 640 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -355,7 +379,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 448 512">
+          viewBox="0 0 448 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -371,7 +396,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 576 512">
+          viewBox="0 0 576 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -387,7 +413,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 10.701 9.698">
+          viewBox="0 0 10.701 9.698"
+          fill={fill ?? 'currentColor'}>
           {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
           {title && <title>{title}</title>}
           <g id="filter-solid" transform="translate(-2.667 -5.333)">
@@ -413,7 +440,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 576 512">
+          viewBox="0 0 576 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -429,7 +457,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 640 512">
+          viewBox="0 0 640 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path d="M381 114.9L186.1 41.8c-16.7-6.2-35.2-5.3-51.1 2.7L89.1 67.4C78 73 77.2 88.5 87.6 95.2l146.9 94.5L136 240 77.8 214.1c-8.7-3.9-18.8-3.7-27.3 .6L18.3 230.8c-9.3 4.7-11.8 16.8-5 24.7l73.1 85.3c6.1 7.1 15 11.2 24.3 11.2l137.7 0c5 0 9.9-1.2 14.3-3.4L535.6 212.2c46.5-23.3 82.5-63.3 100.8-112C645.9 75 627.2 48 600.2 48l-57.4 0c-20.2 0-40.2 4.8-58.2 14L381 114.9zM0 480c0 17.7 14.3 32 32 32l576 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 448c-17.7 0-32 14.3-32 32z" />
@@ -442,7 +471,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 640 512">
+          viewBox="0 0 640 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path d="M.3 166.9L0 68C0 57.7 9.5 50.1 19.5 52.3l35.6 7.9c10.6 2.3 19.2 9.9 23 20L96 128l127.3 37.6L181.8 20.4C178.9 10.2 186.6 0 197.2 0l40.1 0c11.6 0 22.2 6.2 27.9 16.3l109 193.8 107.2 31.7c15.9 4.7 30.8 12.5 43.7 22.8l34.4 27.6c24 19.2 18.1 57.3-10.7 68.2c-41.2 15.6-86.2 18.1-128.8 7L121.7 289.8c-11.1-2.9-21.2-8.7-29.3-16.9L9.5 189.4c-5.9-6-9.3-14.1-9.3-22.5zM32 448l576 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32zm96-80a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm128-16a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
@@ -455,7 +485,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 19 19">
+          viewBox="0 0 19 19"
+          fill={fill ?? 'currentColor'}>
           {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
           {title && <title>{title}</title>}
           <g id="Group_56" data-name="Group 56" transform="translate(-390 -665)">
@@ -479,7 +510,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 448 512">
+          viewBox="0 0 448 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -495,7 +527,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 512 512">
+          viewBox="0 0 512 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -511,7 +544,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 448 512">
+          viewBox="0 0 448 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -527,7 +561,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 448 512">
+          viewBox="0 0 448 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -543,7 +578,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 512 512">
+          viewBox="0 0 512 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -559,7 +595,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 512 512">
+          viewBox="0 0 512 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -575,7 +612,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 512 512">
+          viewBox="0 0 512 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path d="M448 256c0-106-86-192-192-192l0 384c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0 256 256 0 1 1 -512 0z" fill="currentColor" />
@@ -588,7 +626,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 512 512">
+          viewBox="0 0 512 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path
@@ -604,7 +643,8 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height }) =>
           className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
           width={width}
           height={height}
-          viewBox="0 0 384 512">
+          viewBox="0 0 384 512"
+          fill={fill ?? 'currentColor'}>
           <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
           {title && <title>{title}</title>}
           <path

package/src/search-results/components/item-picker/index.tsx

@@ -1,25 +1,27 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { TravelClass, TravelType } from '../../types';
+import { SortByType, TravelClass, TravelType } from '../../types';
 
 interface ItemPickerProps {
-  items: TravelType[] | TravelClass[];
+  items: TravelType[] | TravelClass[] | SortByType[];
   selection: string | undefined;
+  selectedSortByType?: SortByType;
   label: string;
   placeholder: string;
   classModifier: string;
-  onPick: (picked: string) => void;
+  valueFormatter?: (value: string, direction?: string) => string;
+  onPick: (picked: string, direction?: string) => void;
 }
 
-const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeholder, classModifier, onPick }) => {
+const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, selectedSortByType, label, placeholder, classModifier, onPick, valueFormatter }) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [openDirection, setOpenDirection] = useState<'down' | 'up'>('down');
   const dropdownRef = useRef<HTMLDivElement | null>(null);
   const dropdownMenuRef = useRef<HTMLUListElement | null>(null);
   const toggleButtonRef = useRef<HTMLButtonElement | null>(null);
 
-  const handlePick = (picked: string) => {
+  const handlePick = (picked: string, direction?: string) => {
     setIsDropdownOpen(false);
-    onPick(picked);
+    onPick(picked, direction);
   };
 
   useEffect(() => {
@@ -54,15 +56,18 @@ const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeh
           className={`dropdown-toggle ${isDropdownOpen ? 'dropdown-toggle--open' : ''}`}
           onClick={() => setIsDropdownOpen((prev) => !prev)}
           ref={toggleButtonRef}>
-          <span>{selection || placeholder}</span>
+          <span>{selectedSortByType ? valueFormatter?.(selectedSortByType.label, selectedSortByType?.direction) : selection || placeholder}</span>
           <span className="arrow">&#9662;</span>
         </button>
         {isDropdownOpen && (
           <ul className={`dropdown-menu dropdown-menu--${openDirection}`} ref={dropdownMenuRef}>
-            {items.map(({ label, icon }) => (
-              <li key={label} onClick={() => handlePick(label)} className={`dropdown-menu__item${selection === label ? ' dropdown-menu__item--selected' : ''}`}>
-                {icon && <span className="travel-class-icon">{icon}</span>}
-                {label}
+            {items.map((item, index) => (
+              <li
+                key={`${item.label}-${index}`}
+                onClick={() => handlePick(item.label, 'direction' in item ? item.direction : undefined)}
+                className={`dropdown-menu__item${selection === item.label ? ' dropdown-menu__item--selected' : ''}`}>
+                {item.icon && <span className="travel-class-icon">{item.icon}</span>}
+                {valueFormatter ? valueFormatter(item.label, 'direction' in item ? item.direction : undefined) : item.label}
               </li>
             ))}
           </ul>

package/src/search-results/components/search-results-container/flight-search-results.tsx

@@ -0,0 +1,120 @@
+import React, { useContext, useEffect, useState } from 'react';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+
+import ItemPicker from '../item-picker';
+
+import Icon from '../icon';
+import { getTranslations } from '../../../shared/utils/localization-util';
+import FlightAccommodationResults from '../flight/flight-accommodation-results';
+import { useFlightSearch } from '../flight/flight-search-context';
+import FlightFilters from '../filters/flight-filters';
+import { ExtendedFlightSearchResponseItem } from '../../types';
+import { getSortingName } from '../../utils/flight-utils';
+
+interface FlightResultsContainerProps {
+  isMobile: boolean;
+}
+
+const FlightResultsContainer: React.FC<FlightResultsContainerProps> = ({ isMobile }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  const translations = getTranslations(context?.languageCode ?? 'en-GB');
+
+  const {
+    flightsLoading,
+    onFlightSearch,
+    flightSearchResults,
+    filteredResults,
+    isHubReady,
+    sortByTypes,
+    selectedSortByType,
+    setSelectedSortByType,
+    currentRequestId
+  } = useFlightSearch();
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [results, setResults] = React.useState<ExtendedFlightSearchResponseItem[]>([]);
+
+  const findSortByType = (sortKey: string, direction: string) => {
+    return sortByTypes.find((s) => s.label === sortKey && s.direction === direction) || sortByTypes[0];
+  };
+
+  const handleSortChange = (sortKey: string, direction?: string) => {
+    setSelectedSortByType(findSortByType(sortKey, direction ?? 'asc'));
+  };
+
+  useEffect(() => {
+    if (!context?.showMockup) {
+      if (context?.type === 'flight' && isHubReady) {
+        onFlightSearch();
+      }
+    }
+  }, [location.search, isHubReady]);
+
+  useEffect(() => {
+    setResults(filteredResults.filter((item) => item.requestId === currentRequestId));
+  }, [filteredResults, currentRequestId]);
+
+  return (
+    <>
+      {context?.showFilters && <FlightFilters isOpen={filtersOpen} handleSetIsOpen={() => setFiltersOpen(!filtersOpen)} isLoading={flightsLoading} />}
+      {/* ---------------- Results ---------------- */}
+      <div className="search__results">
+        {isMobile && (
+          <div className="search__result-row">
+            <div className="search__results__actions">
+              {context?.showFilters && (
+                <div className="cta cta--filter" onClick={() => setFiltersOpen(true)}>
+                  <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
+                  {translations.SRP.FILTERS}
+                </div>
+              )}
+            </div>
+            {sortByTypes && sortByTypes.length > 0 && (
+              <ItemPicker
+                items={sortByTypes}
+                selection={selectedSortByType?.label || undefined}
+                selectedSortByType={selectedSortByType || undefined}
+                label={translations.SRP.SORTBY}
+                placeholder={translations.SRP.SORTBY}
+                classModifier="travel-class-picker__items"
+                valueFormatter={(value, direction) => getSortingName(translations, findSortByType(value, direction ?? 'asc'))}
+                onPick={handleSortChange}
+              />
+            )}
+          </div>
+        )}
+
+        <div className="search__result-row">
+          <span className="search__result-row-text">
+            {!flightsLoading && (
+              <>
+                {results?.length && results.length} {translations.SRP.TOTAL_RESULTS_LABEL}
+              </>
+            )}
+          </span>
+          {!isMobile && sortByTypes && sortByTypes.length > 0 && (
+            <div className="search__result-row-filter">
+              <ItemPicker
+                items={sortByTypes}
+                selection={selectedSortByType?.label || undefined}
+                selectedSortByType={selectedSortByType || undefined}
+                label={translations.SRP.SORTBY}
+                placeholder={translations.SRP.SORTBY}
+                classModifier="travel-class-picker__items"
+                valueFormatter={(value, direction) => getSortingName(translations, findSortByType(value, direction ?? 'asc'))}
+                onPick={handleSortChange}
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="search__results__wrapper">
+          {context?.type == 'flight' && context?.showFlightAccommodationResults && results && results.length > 0 && (
+            <FlightAccommodationResults searchResults={results} />
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default FlightResultsContainer;