mautourco-components 0.2.117 → 0.2.119

package/dist/components/molecules/AgeSelector/AgeSelector.d.ts

@@ -6,7 +6,7 @@ export interface AgeSelectorProps {
     /** Current selected age value */
     value: number | undefined;
     /** Callback when age changes */
-    onChange: (age: number) => void;
+    onChange: (age: number | undefined) => void;
     /** Available age range */
     ageRange: number[];
     /** Whether the field is required */

package/dist/components/molecules/AgeSelector/AgeSelector.js

@@ -35,7 +35,7 @@ var AgeSelector = function (_a) {
             var numValue = parseInt(newValue, 10);
             if (newValue === '') {
                 // Allow empty input - don't update onChange
-                return;
+                return onChange(undefined);
             }
             else if (!isNaN(numValue) && ageRange.includes(numValue)) {
                 onChange(numValue);

package/dist/components/organisms/PaxSelector/ClientTypeSelector.d.ts

@@ -0,0 +1,7 @@
+export type ClientType = 'Standard client' | 'VIP' | 'VVIP' | 'Honeymooners';
+interface ClientTypeSelectorProps {
+    value: ClientType;
+    onChange: (value: ClientType) => void;
+}
+declare const ClientTypeSelector: React.FC<ClientTypeSelectorProps>;
+export default ClientTypeSelector;

package/dist/components/organisms/PaxSelector/ClientTypeSelector.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+var CLIENT_TYPES = ['Standard client', 'VIP', 'VVIP', 'Honeymooners'];
+var ClientTypeSelector = function (_a) {
+    var value = _a.value, onChange = _a.onChange;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var containerRef = useRef(null);
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    var handleSelect = function (type) {
+        onChange(type);
+        setIsOpen(false);
+    };
+    return (_jsxs("div", { className: "pax-selector__client-type", children: [_jsx(Text, { size: "sm", variant: "regular", className: "pax-selector__client-type-label", children: "Client type" }), _jsxs("div", { className: "pax-selector__client-type-select", ref: containerRef, children: [_jsxs("button", { type: "button", className: "pax-selector__client-type-trigger", onClick: function () { return setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "listbox", children: [_jsxs("div", { className: "pax-selector__client-type-content", children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__client-type-icon" }), _jsx("span", { className: "pax-selector__client-type-text", children: value })] }), _jsx(Icon, { name: "chevron-down", size: "sm", className: "pax-selector__client-type-chevron ".concat(isOpen ? 'pax-selector__client-type-chevron--open' : '') })] }), isOpen && (_jsx("div", { className: "pax-selector__client-type-dropdown", role: "listbox", children: CLIENT_TYPES.map(function (type) { return (_jsxs("button", { type: "button", className: "pax-selector__client-type-option ".concat(value === type ? 'pax-selector__client-type-option--selected' : ''), onClick: function () { return handleSelect(type); }, role: "option", "aria-selected": value === type, children: [_jsx(Icon, { name: "user-icon", size: "sm" }), type] }, type)); }) }))] })] }));
+};
+export default ClientTypeSelector;

package/dist/components/organisms/PaxSelector/PaxSelector.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export type ClientType = 'Standard client' | 'VIP' | 'VVIP' | 'Honeymooners';
+import { ClientType } from './ClientTypeSelector';
 /**
  * Individual passenger/pax data for a single room
  */
@@ -66,7 +66,10 @@ export interface PaxSelectorProps {
     ageRange?: number[];
     /** Whether to check if age inputs are empty and show error state */
     checkEmpty?: boolean;
+    /** Callback when pax selector opens */
     onPaxOpenChange?: () => void;
+    /** Callback when pax validation is checked */
+    onPaxInvalid?: (isValid: boolean) => void;
 }
 export declare const DEFAULT_PAX_DATA_WITH_ADULTS: PaxData;
 export declare const CHILD_CATEGORY_AGES: number[];

package/dist/components/organisms/PaxSelector/PaxSelector.js

@@ -24,6 +24,9 @@ import { scrollIntoViewOnOpen } from '../../../lib/utils';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
 import AgeSelector from '../../molecules/AgeSelector/AgeSelector';
+import ClientTypeSelector from './ClientTypeSelector';
+import RoomEditor from './RoomEditor';
+import StepperRow from './StepperRow';
 var DEFAULT_PAX_DATA = {
     adults: 0,
     teens: 0,
@@ -44,149 +47,14 @@ export var DEFAULT_PAX_DATA_WITH_ADULTS = {
     infantAges: [],
     clientType: 'Standard client',
 };
-var CLIENT_TYPES = ['Standard client', 'VIP', 'VVIP', 'Honeymooners'];
 // Age range for all child categories (teens, children, infants)
 export var CHILD_CATEGORY_AGES = Array.from({ length: 18 }, function (_, i) { return i + 1; }); // 1-18 years
-var StepperRow = function (_a) {
-    var label = _a.label, value = _a.value, _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 99 : _c, onChange = _a.onChange;
-    var handleDecrement = function () {
-        if (value > min) {
-            onChange(value - 1);
-        }
-    };
-    var handleIncrement = function () {
-        if (value < max) {
-            onChange(value + 1);
-        }
-    };
-    return (_jsxs("div", { className: "pax-selector__stepper", children: [_jsx(Text, { size: "base", variant: "bold", color: "default", className: "pax-selector__stepper-label", children: label }), _jsxs("div", { className: "pax-selector__stepper-controls", children: [_jsx("button", { type: "button", className: "pax-selector__stepper-btn", onClick: handleDecrement, disabled: value <= min, "aria-label": "Decrease ".concat(label), children: _jsx(Icon, { name: "minus", size: "sm" }) }), _jsx("span", { className: "pax-selector__stepper-count", children: value }), _jsx("button", { type: "button", className: "pax-selector__stepper-btn", onClick: handleIncrement, disabled: value >= max, "aria-label": "Increase ".concat(label), children: _jsx(Icon, { name: "plus", size: "sm" }) })] })] }));
-};
-var ClientTypeSelector = function (_a) {
-    var value = _a.value, onChange = _a.onChange;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var containerRef = useRef(null);
-    useEffect(function () {
-        var handleClickOutside = function (event) {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isOpen]);
-    var handleSelect = function (type) {
-        onChange(type);
-        setIsOpen(false);
-    };
-    return (_jsxs("div", { className: "pax-selector__client-type", children: [_jsx(Text, { size: "sm", variant: "regular", className: "pax-selector__client-type-label", children: "Client type" }), _jsxs("div", { className: "pax-selector__client-type-select", ref: containerRef, children: [_jsxs("button", { type: "button", className: "pax-selector__client-type-trigger", onClick: function () { return setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "listbox", children: [_jsxs("div", { className: "pax-selector__client-type-content", children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__client-type-icon" }), _jsx("span", { className: "pax-selector__client-type-text", children: value })] }), _jsx(Icon, { name: "chevron-down", size: "sm", className: "pax-selector__client-type-chevron ".concat(isOpen ? 'pax-selector__client-type-chevron--open' : '') })] }), isOpen && (_jsx("div", { className: "pax-selector__client-type-dropdown", role: "listbox", children: CLIENT_TYPES.map(function (type) { return (_jsxs("button", { type: "button", className: "pax-selector__client-type-option ".concat(value === type ? 'pax-selector__client-type-option--selected' : ''), onClick: function () { return handleSelect(type); }, role: "option", "aria-selected": value === type, children: [_jsx(Icon, { name: "user-icon", size: "sm" }), type] }, type)); }) }))] })] }));
-};
-var RoomEditor = function (_a) {
-    var room = _a.room, roomNumber = _a.roomNumber, showRemove = _a.showRemove, maxAdults = _a.maxAdults, maxTeens = _a.maxTeens, maxChildren = _a.maxChildren, maxInfants = _a.maxInfants, onChange = _a.onChange, onRemove = _a.onRemove, scrollToRef = _a.scrollToRef, ageRange = _a.ageRange, _b = _a.checkEmpty, checkEmpty = _b === void 0 ? false : _b;
-    var roomAgesSectionRef = useRef(null);
-    var previousRoomCounts = useRef({ teens: 0, children: 0, infants: 0 });
-    var handleFieldChange = function (field, value) {
-        var _a;
-        onChange(__assign(__assign({}, room), (_a = {}, _a[field] = value, _a)));
-    };
-    var handleAgeChange = function (category, index, age) {
-        var ages = __spreadArray([], (room[category] || []), true);
-        ages[index] = age;
-        handleFieldChange(category, ages);
-    };
-    // Scroll to age section when new age inputs are added in this room
-    useEffect(function () {
-        var prev = previousRoomCounts.current;
-        var curr = {
-            teens: room.teens,
-            children: room.children,
-            infants: room.infants,
-        };
-        // Check if any count increased
-        var hasIncrease = curr.teens > prev.teens ||
-            curr.children > prev.children ||
-            curr.infants > prev.infants;
-        if (hasIncrease && roomAgesSectionRef.current) {
-            // Scroll to the age section after a short delay to ensure DOM is updated
-            setTimeout(function () {
-                if (roomAgesSectionRef.current) {
-                    roomAgesSectionRef.current.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'nearest',
-                        inline: 'nearest',
-                    });
-                }
-            }, 100);
-        }
-        // Update previous counts
-        previousRoomCounts.current = curr;
-    }, [room.teens, room.children, room.infants]);
-    // Generate age arrays based on counts
-    useEffect(function () {
-        var teenAges = room.teenAges || [];
-        var childAges = room.childAges || [];
-        var infantAges = room.infantAges || [];
-        // Adjust teen ages array
-        if (teenAges.length < room.teens) {
-            handleFieldChange('teenAges', __spreadArray(__spreadArray([], teenAges, true), Array(room.teens - teenAges.length).fill(undefined), true));
-        }
-        else if (teenAges.length > room.teens) {
-            handleFieldChange('teenAges', teenAges.slice(0, room.teens));
-        }
-        // Adjust child ages array
-        if (childAges.length < room.children) {
-            handleFieldChange('childAges', __spreadArray(__spreadArray([], childAges, true), Array(room.children - childAges.length).fill(undefined), true));
-        }
-        else if (childAges.length > room.children) {
-            handleFieldChange('childAges', childAges.slice(0, room.children));
-        }
-        // Adjust infant ages array
-        if (infantAges.length < room.infants) {
-            handleFieldChange('infantAges', __spreadArray(__spreadArray([], infantAges, true), Array(room.infants - infantAges.length).fill(undefined), true));
-        }
-        else if (infantAges.length > room.infants) {
-            handleFieldChange('infantAges', infantAges.slice(0, room.infants));
-        }
-    }, [room.teens, room.children, room.infants]);
-    // Chunk ages into groups of 2 for layout
-    var chunkAges = function (ages, category) {
-        var chunks = [];
-        for (var i = 0; i < ages.length; i += 2) {
-            chunks.push(ages.slice(i, i + 2));
-        }
-        return chunks;
-    };
-    var teenAgeChunks = chunkAges(room.teenAges || [], 'Teen');
-    var childAgeChunks = chunkAges(room.childAges || [], 'Child');
-    var infantAgeChunks = chunkAges(room.infantAges || [], 'Infant');
-    return (_jsxs("div", { className: "pax-selector__room-container", ref: scrollToRef, children: [_jsxs("div", { className: "pax-selector__room-header", children: [_jsxs("div", { className: "pax-selector__room-title", children: [_jsxs(Text, { size: "lg", variant: "bold", color: "accent", className: "pax-selector__room-name", children: ["Room ", roomNumber] }), _jsx(Icon, { name: "home", size: "md", className: "pax-selector__room-icon" })] }), showRemove && (_jsxs("button", { type: "button", className: "pax-selector__room-remove", onClick: onRemove, "aria-label": "Remove room ".concat(roomNumber), children: [_jsx(Icon, { name: "close", size: "sm", className: "pax-selector__room-remove-icon" }), _jsx("span", { className: "pax-selector__room-remove-text", children: "Remove" })] }))] }), _jsxs("div", { className: "pax-selector__room-content", children: [_jsxs("div", { className: "pax-selector__steppers", children: [_jsx(StepperRow, { label: "Adult", value: room.adults, max: maxAdults, onChange: function (val) { return handleFieldChange('adults', val); } }), _jsx(StepperRow, { label: "Teen", value: room.teens, max: maxTeens, onChange: function (val) { return handleFieldChange('teens', val); } }), _jsx(StepperRow, { label: "Child", value: room.children, max: maxChildren, onChange: function (val) { return handleFieldChange('children', val); } }), _jsx(StepperRow, { label: "Infant", value: room.infants, max: maxInfants, onChange: function (val) { return handleFieldChange('infants', val); } })] }), (room.teens > 0 || room.children > 0 || room.infants > 0) && (_jsxs("div", { className: "pax-selector__age-section", ref: roomAgesSectionRef, children: [_jsx(Text, { size: "base", variant: "bold", color: "default", className: "pax-selector__age-section-title", children: "Please specify the age :" }), _jsxs("div", { className: "pax-selector__age-groups", children: [room.teens > 0 &&
-                                        teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
-                                                var actualIndex = chunkIndex * 2 + ageIndex;
-                                                return (_jsx(AgeSelector, { label: "Teen", value: age, onChange: function (selectedAge) {
-                                                        return handleAgeChange('teenAges', actualIndex, selectedAge);
-                                                    }, ageRange: ageRange, required: true, error: checkEmpty }, "teen-".concat(actualIndex)));
-                                            }) }, "teen-chunk-".concat(chunkIndex))); }), room.children > 0 &&
-                                        childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
-                                                var actualIndex = chunkIndex * 2 + ageIndex;
-                                                return (_jsx(AgeSelector, { label: "Child", value: age, onChange: function (selectedAge) {
-                                                        return handleAgeChange('childAges', actualIndex, selectedAge);
-                                                    }, ageRange: ageRange, required: true, error: checkEmpty }, "child-".concat(actualIndex)));
-                                            }) }, "child-chunk-".concat(chunkIndex))); }), room.infants > 0 &&
-                                        infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
-                                                var actualIndex = chunkIndex * 2 + ageIndex;
-                                                return (_jsx(AgeSelector, { label: "Infant", value: age, onChange: function (selectedAge) {
-                                                        return handleAgeChange('infantAges', actualIndex, selectedAge);
-                                                    }, ageRange: ageRange, required: true, error: checkEmpty }, "infant-".concat(actualIndex)));
-                                            }) }, "infant-chunk-".concat(chunkIndex))); })] })] })), _jsx(ClientTypeSelector, { value: room.clientType, onChange: function (val) { return handleFieldChange('clientType', val); } })] })] }));
-};
 var PaxSelector = function (_a) {
-    var _b = _a.label, label = _b === void 0 ? 'Number of pax' : _b, value = _a.value, onChange = _a.onChange, onAddRoom = _a.onAddRoom, onDone = _a.onDone, _c = _a.placeholder, placeholder = _c === void 0 ? 'Select pax' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.maxAdults, maxAdults = _e === void 0 ? 10 : _e, _f = _a.maxTeens, maxTeens = _f === void 0 ? 10 : _f, _g = _a.maxChildren, maxChildren = _g === void 0 ? 10 : _g, _h = _a.maxInfants, maxInfants = _h === void 0 ? 10 : _h, _j = _a.showAddRoom, showAddRoom = _j === void 0 ? true : _j, _k = _a.multipleRooms, multipleRooms = _k === void 0 ? false : _k, defaultRooms = _a.defaultRooms, onRoomsChange = _a.onRoomsChange, onRemoveRoom = _a.onRemoveRoom, _l = _a.defaultPaxData, defaultPaxData = _l === void 0 ? DEFAULT_PAX_DATA_WITH_ADULTS : _l, _m = _a.ageRange, ageRange = _m === void 0 ? CHILD_CATEGORY_AGES : _m, _o = _a.scrollOnOpen, scrollOnOpen = _o === void 0 ? false : _o, _p = _a.disabled, disabled = _p === void 0 ? false : _p, _q = _a.checkEmpty, checkEmpty = _q === void 0 ? false : _q, onPaxOpenChange = _a.onPaxOpenChange;
+    var _b = _a.label, label = _b === void 0 ? 'Number of pax' : _b, value = _a.value, onChange = _a.onChange, onAddRoom = _a.onAddRoom, onDone = _a.onDone, _c = _a.placeholder, placeholder = _c === void 0 ? 'Select pax' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.maxAdults, maxAdults = _e === void 0 ? 10 : _e, _f = _a.maxTeens, maxTeens = _f === void 0 ? 10 : _f, _g = _a.maxChildren, maxChildren = _g === void 0 ? 10 : _g, _h = _a.maxInfants, maxInfants = _h === void 0 ? 10 : _h, _j = _a.showAddRoom, showAddRoom = _j === void 0 ? true : _j, _k = _a.multipleRooms, multipleRooms = _k === void 0 ? false : _k, defaultRooms = _a.defaultRooms, onRoomsChange = _a.onRoomsChange, onRemoveRoom = _a.onRemoveRoom, _l = _a.defaultPaxData, defaultPaxData = _l === void 0 ? DEFAULT_PAX_DATA_WITH_ADULTS : _l, _m = _a.ageRange, ageRange = _m === void 0 ? CHILD_CATEGORY_AGES : _m, _o = _a.scrollOnOpen, scrollOnOpen = _o === void 0 ? false : _o, _p = _a.disabled, disabled = _p === void 0 ? false : _p, _q = _a.checkEmpty, checkEmpty = _q === void 0 ? false : _q, onPaxOpenChange = _a.onPaxOpenChange, onPaxInvalid = _a.onPaxInvalid;
     var _r = useState(false), isOpen = _r[0], setIsOpen = _r[1];
-    var _s = useState(value || defaultPaxData || DEFAULT_PAX_DATA), internalData = _s[0], setInternalData = _s[1];
-    var _t = useState(defaultRooms || [__assign(__assign({}, DEFAULT_PAX_DATA), { roomId: '1' })]), rooms = _t[0], setRooms = _t[1];
+    var _s = useState(false), isDone = _s[0], setIsDone = _s[1];
+    var _t = useState(value || defaultPaxData || DEFAULT_PAX_DATA), internalData = _t[0], setInternalData = _t[1];
+    var _u = useState(defaultRooms || [__assign(__assign({}, DEFAULT_PAX_DATA), { roomId: '1' })]), rooms = _u[0], setRooms = _u[1];
     var containerRef = useRef(null);
     var triggerRef = useRef(null);
     var paxSelectorRef = useRef(null);
@@ -321,8 +189,13 @@ var PaxSelector = function (_a) {
             if (containerRef.current && !containerRef.current.contains(event.target)) {
                 // Only close if all ages are filled (when there are minors)
                 if (!hasMinorsWithoutAges() || areAllAgesFilled()) {
+                    onPaxInvalid === null || onPaxInvalid === void 0 ? void 0 : onPaxInvalid(false);
                     setIsOpen(false);
+                    return;
                 }
+                var isInvalid = hasMinorsWithoutAges() && !areAllAgesFilled();
+                onPaxInvalid === null || onPaxInvalid === void 0 ? void 0 : onPaxInvalid(isInvalid);
+                setIsDone(true);
             }
         };
         if (isOpen) {
@@ -331,7 +204,7 @@ var PaxSelector = function (_a) {
         return function () {
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [isOpen, internalData, rooms, multipleRooms]);
+    }, [isOpen, internalData, rooms, multipleRooms, checkEmpty]);
     // Scroll to input when dropdown opens (if scrollOnOpen is true)
     useEffect(function () {
         setTimeout(function () {
@@ -393,6 +266,7 @@ var PaxSelector = function (_a) {
         }
     };
     var handleDone = function () {
+        setIsDone(true);
         // Only close if all ages are filled (when there are minors)
         if (!hasMinorsWithoutAges() || areAllAgesFilled()) {
             setIsOpen(false);
@@ -460,8 +334,12 @@ var PaxSelector = function (_a) {
                                             var childAgeChunks = chunkAges(internalData.childAges || [], 'Child');
                                             var infantAgeChunks = chunkAges(internalData.infantAges || [], 'Infant');
                                             var handleAgeChange = function (category, index, age) {
-                                                var ages = __spreadArray([], (internalData[category] || []), true);
-                                                ages[index] = age;
+                                                var ages = __spreadArray([], (internalData[category] || []), true).map(function (a, aIndex) {
+                                                    if (aIndex === index) {
+                                                        return age;
+                                                    }
+                                                    return a;
+                                                });
                                                 handleDataChange(category, ages);
                                             };
                                             return (_jsxs(_Fragment, { children: [internalData.teens > 0 &&
@@ -469,19 +347,19 @@ var PaxSelector = function (_a) {
                                                                 var actualIndex = chunkIndex * 2 + ageIndex;
                                                                 return (_jsx(AgeSelector, { label: "Teen", value: age, onChange: function (selectedAge) {
                                                                         return handleAgeChange('teenAges', actualIndex, selectedAge);
-                                                                    }, ageRange: ageRange, required: true, error: checkEmpty }, "teen-".concat(actualIndex)));
+                                                                    }, ageRange: ageRange, required: true, error: checkEmpty || (isDone && !age) }, "teen-".concat(actualIndex)));
                                                             }) }, "teen-chunk-".concat(chunkIndex))); }), internalData.children > 0 &&
                                                         childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
                                                                 var actualIndex = chunkIndex * 2 + ageIndex;
                                                                 return (_jsx(AgeSelector, { label: "Child", value: age, onChange: function (selectedAge) {
                                                                         return handleAgeChange('childAges', actualIndex, selectedAge);
-                                                                    }, ageRange: ageRange, required: true, error: checkEmpty }, "child-".concat(actualIndex)));
+                                                                    }, ageRange: ageRange, required: true, error: checkEmpty || (isDone && !age) }, "child-".concat(actualIndex)));
                                                             }) }, "child-chunk-".concat(chunkIndex))); }), internalData.infants > 0 &&
                                                         infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
                                                                 var actualIndex = chunkIndex * 2 + ageIndex;
                                                                 return (_jsx(AgeSelector, { label: "Infant", value: age, onChange: function (selectedAge) {
                                                                         return handleAgeChange('infantAges', actualIndex, selectedAge);
-                                                                    }, ageRange: ageRange, required: true, error: checkEmpty }, "infant-".concat(actualIndex)));
+                                                                    }, ageRange: ageRange, required: true, error: checkEmpty || (isDone && !age) }, "infant-".concat(actualIndex)));
                                                             }) }, "infant-chunk-".concat(chunkIndex))); })] }));
                                         })() })] })), _jsx(ClientTypeSelector, { value: internalData.clientType, onChange: function (val) { return handleDataChange('clientType', val); } })] })), _jsxs("div", { className: "pax-selector__actions", children: [_jsx("button", { type: "button", className: "pax-selector__clear-btn", onClick: handleClear, children: "Clear Pax" }), _jsx("button", { type: "button", className: "pax-selector__done-btn", onClick: handleDone, children: "Done" })] })] }))] }));
 };

package/dist/components/organisms/PaxSelector/RoomEditor.d.ts

@@ -0,0 +1,17 @@
+import { RoomData } from './PaxSelector';
+interface RoomEditorProps {
+    room: RoomData;
+    roomNumber: number;
+    showRemove: boolean;
+    maxAdults: number;
+    maxTeens: number;
+    maxChildren: number;
+    maxInfants: number;
+    onChange: (room: RoomData) => void;
+    onRemove: () => void;
+    scrollToRef?: React.RefObject<HTMLDivElement | null>;
+    ageRange: number[];
+    checkEmpty?: boolean;
+}
+declare const RoomEditor: React.FC<RoomEditorProps>;
+export default RoomEditor;

package/dist/components/organisms/PaxSelector/RoomEditor.js

@@ -0,0 +1,130 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, useEffect, useRef } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import AgeSelector from '../../molecules/AgeSelector/AgeSelector';
+import ClientTypeSelector from './ClientTypeSelector';
+import StepperRow from './StepperRow';
+var RoomEditor = function (_a) {
+    var room = _a.room, roomNumber = _a.roomNumber, showRemove = _a.showRemove, maxAdults = _a.maxAdults, maxTeens = _a.maxTeens, maxChildren = _a.maxChildren, maxInfants = _a.maxInfants, onChange = _a.onChange, onRemove = _a.onRemove, scrollToRef = _a.scrollToRef, ageRange = _a.ageRange, _b = _a.checkEmpty, checkEmpty = _b === void 0 ? false : _b;
+    var roomAgesSectionRef = useRef(null);
+    var previousRoomCounts = useRef({ teens: 0, children: 0, infants: 0 });
+    var handleFieldChange = function (field, value) {
+        var _a;
+        onChange(__assign(__assign({}, room), (_a = {}, _a[field] = value, _a)));
+    };
+    var handleAgeChange = function (category, index, age) {
+        var ages = __spreadArray([], (room[category] || []), true).map(function (a, aIndex) {
+            if (aIndex === index) {
+                return age;
+            }
+            return a;
+        });
+        handleFieldChange(category, ages);
+    };
+    // Scroll to age section when new age inputs are added in this room
+    useEffect(function () {
+        var prev = previousRoomCounts.current;
+        var curr = {
+            teens: room.teens,
+            children: room.children,
+            infants: room.infants,
+        };
+        // Check if any count increased
+        var hasIncrease = curr.teens > prev.teens ||
+            curr.children > prev.children ||
+            curr.infants > prev.infants;
+        if (hasIncrease && roomAgesSectionRef.current) {
+            // Scroll to the age section after a short delay to ensure DOM is updated
+            setTimeout(function () {
+                if (roomAgesSectionRef.current) {
+                    roomAgesSectionRef.current.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                        inline: 'nearest',
+                    });
+                }
+            }, 100);
+        }
+        // Update previous counts
+        previousRoomCounts.current = curr;
+    }, [room.teens, room.children, room.infants]);
+    // Generate age arrays based on counts
+    useEffect(function () {
+        var teenAges = room.teenAges || [];
+        var childAges = room.childAges || [];
+        var infantAges = room.infantAges || [];
+        // Adjust teen ages array
+        if (teenAges.length < room.teens) {
+            handleFieldChange('teenAges', __spreadArray(__spreadArray([], teenAges, true), Array(room.teens - teenAges.length).fill(undefined), true));
+        }
+        else if (teenAges.length > room.teens) {
+            handleFieldChange('teenAges', teenAges.slice(0, room.teens));
+        }
+        // Adjust child ages array
+        if (childAges.length < room.children) {
+            handleFieldChange('childAges', __spreadArray(__spreadArray([], childAges, true), Array(room.children - childAges.length).fill(undefined), true));
+        }
+        else if (childAges.length > room.children) {
+            handleFieldChange('childAges', childAges.slice(0, room.children));
+        }
+        // Adjust infant ages array
+        if (infantAges.length < room.infants) {
+            handleFieldChange('infantAges', __spreadArray(__spreadArray([], infantAges, true), Array(room.infants - infantAges.length).fill(undefined), true));
+        }
+        else if (infantAges.length > room.infants) {
+            handleFieldChange('infantAges', infantAges.slice(0, room.infants));
+        }
+    }, [room.teens, room.children, room.infants]);
+    // Chunk ages into groups of 2 for layout
+    var chunkAges = function (ages, category) {
+        var chunks = [];
+        for (var i = 0; i < ages.length; i += 2) {
+            chunks.push(ages.slice(i, i + 2));
+        }
+        return chunks;
+    };
+    var teenAgeChunks = chunkAges(room.teenAges || [], 'Teen');
+    var childAgeChunks = chunkAges(room.childAges || [], 'Child');
+    var infantAgeChunks = chunkAges(room.infantAges || [], 'Infant');
+    return (_jsxs("div", { className: "pax-selector__room-container", ref: scrollToRef, children: [_jsxs("div", { className: "pax-selector__room-header", children: [_jsxs("div", { className: "pax-selector__room-title", children: [_jsxs(Text, { size: "lg", variant: "bold", color: "accent", className: "pax-selector__room-name", children: ["Room ", roomNumber] }), _jsx(Icon, { name: "home", size: "md", className: "pax-selector__room-icon" })] }), showRemove && (_jsxs("button", { type: "button", className: "pax-selector__room-remove", onClick: onRemove, "aria-label": "Remove room ".concat(roomNumber), children: [_jsx(Icon, { name: "close", size: "sm", className: "pax-selector__room-remove-icon" }), _jsx("span", { className: "pax-selector__room-remove-text", children: "Remove" })] }))] }), _jsxs("div", { className: "pax-selector__room-content", children: [_jsxs("div", { className: "pax-selector__steppers", children: [_jsx(StepperRow, { label: "Adult", value: room.adults, max: maxAdults, onChange: function (val) { return handleFieldChange('adults', val); } }), _jsx(StepperRow, { label: "Teen", value: room.teens, max: maxTeens, onChange: function (val) { return handleFieldChange('teens', val); } }), _jsx(StepperRow, { label: "Child", value: room.children, max: maxChildren, onChange: function (val) { return handleFieldChange('children', val); } }), _jsx(StepperRow, { label: "Infant", value: room.infants, max: maxInfants, onChange: function (val) { return handleFieldChange('infants', val); } })] }), (room.teens > 0 || room.children > 0 || room.infants > 0) && (_jsxs("div", { className: "pax-selector__age-section", ref: roomAgesSectionRef, children: [_jsx(Text, { size: "base", variant: "bold", color: "default", className: "pax-selector__age-section-title", children: "Please specify the age :" }), _jsxs("div", { className: "pax-selector__age-groups", children: [room.teens > 0 &&
+                                        teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
+                                                var actualIndex = chunkIndex * 2 + ageIndex;
+                                                return (_jsx(AgeSelector, { label: "Teen", value: age, onChange: function (selectedAge) {
+                                                        return handleAgeChange('teenAges', actualIndex, selectedAge);
+                                                    }, ageRange: ageRange, required: true, error: checkEmpty }, "teen-".concat(actualIndex)));
+                                            }) }, "teen-chunk-".concat(chunkIndex))); }), room.children > 0 &&
+                                        childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
+                                                var actualIndex = chunkIndex * 2 + ageIndex;
+                                                return (_jsx(AgeSelector, { label: "Child", value: age, onChange: function (selectedAge) {
+                                                        return handleAgeChange('childAges', actualIndex, selectedAge);
+                                                    }, ageRange: ageRange, required: true, error: checkEmpty }, "child-".concat(actualIndex)));
+                                            }) }, "child-chunk-".concat(chunkIndex))); }), room.infants > 0 &&
+                                        infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx(Fragment, { children: chunk.map(function (age, ageIndex) {
+                                                var actualIndex = chunkIndex * 2 + ageIndex;
+                                                return (_jsx(AgeSelector, { label: "Infant", value: age, onChange: function (selectedAge) {
+                                                        return handleAgeChange('infantAges', actualIndex, selectedAge);
+                                                    }, ageRange: ageRange, required: true, error: checkEmpty }, "infant-".concat(actualIndex)));
+                                            }) }, "infant-chunk-".concat(chunkIndex))); })] })] })), _jsx(ClientTypeSelector, { value: room.clientType, onChange: function (val) { return handleFieldChange('clientType', val); } })] })] }));
+};
+export default RoomEditor;

package/dist/components/organisms/PaxSelector/StepperRow.d.ts

@@ -0,0 +1,9 @@
+interface StepperRowProps {
+    label: string;
+    value: number;
+    min?: number;
+    max?: number;
+    onChange: (value: number) => void;
+}
+declare const StepperRow: React.FC<StepperRowProps>;
+export default StepperRow;

package/dist/components/organisms/PaxSelector/StepperRow.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+var StepperRow = function (_a) {
+    var label = _a.label, value = _a.value, _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 99 : _c, onChange = _a.onChange;
+    var handleDecrement = function () {
+        if (value > min) {
+            onChange(value - 1);
+        }
+    };
+    var handleIncrement = function () {
+        if (value < max) {
+            onChange(value + 1);
+        }
+    };
+    return (_jsxs("div", { className: "pax-selector__stepper", children: [_jsx(Text, { size: "base", variant: "bold", color: "default", className: "pax-selector__stepper-label", children: label }), _jsxs("div", { className: "pax-selector__stepper-controls", children: [_jsx("button", { type: "button", className: "pax-selector__stepper-btn", onClick: handleDecrement, disabled: value <= min, "aria-label": "Decrease ".concat(label), children: _jsx(Icon, { name: "minus", size: "sm" }) }), _jsx("span", { className: "pax-selector__stepper-count", children: value }), _jsx("button", { type: "button", className: "pax-selector__stepper-btn", onClick: handleIncrement, disabled: value >= max, "aria-label": "Increase ".concat(label), children: _jsx(Icon, { name: "plus", size: "sm" }) })] })] }));
+};
+export default StepperRow;

package/dist/components/organisms/RoundTrip/RoundTrip.js

@@ -19,7 +19,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import useTransferAge from '../../../hooks/useTransferAge';
+import { useEffect, useMemo, useState } from 'react';
 import '../../../styles/components/organism/round-trip.css';
 import { Text } from '../../atoms/Typography/Typography';
 import LocationDropdown from '../../molecules/LocationDropdown/LocationDropdown';
@@ -32,6 +33,7 @@ var RoundTrip = function (_a) {
     var _h = useState(departureDate), internalDepartureDate = _h[0], setInternalDepartureDate = _h[1];
     var _j = useState(null), internalPickupDropoffPoint = _j[0], setInternalPickupDropoffPoint = _j[1];
     var _k = useState(null), internalAccommodation = _k[0], setInternalAccommodation = _k[1];
+    var _l = useTransferAge(internalPaxData), setIsInvalidPax = _l.setIsInvalidPax, areAllAgesValid = _l.areAllAgesValid;
     // Helper function to get all locations (from options and groups)
     var getAllLocations = function (options, groups) {
         var groupOptions = groups.flatMap(function (group) { return group.options; });
@@ -222,12 +224,15 @@ var RoundTrip = function (_a) {
         onAccommodationChange === null || onAccommodationChange === void 0 ? void 0 : onAccommodationChange(locationOption);
     };
     // Check if inputs are empty (when checkEmpty is true)
-    var isPaxEmpty = checkEmpty &&
-        (!internalPaxData ||
-            (internalPaxData.adults === 0 &&
-                internalPaxData.teens === 0 &&
-                internalPaxData.children === 0 &&
-                (internalPaxData.infants === undefined || internalPaxData.infants === 0)));
+    var isPaxEmpty = useMemo(function () {
+        return (checkEmpty &&
+            (!internalPaxData ||
+                areAllAgesValid ||
+                (internalPaxData.adults === 0 &&
+                    internalPaxData.teens === 0 &&
+                    internalPaxData.children === 0 &&
+                    (internalPaxData.infants === undefined || internalPaxData.infants === 0))));
+    }, [internalPaxData, checkEmpty, areAllAgesValid]);
     // Show error if checkEmpty is true and either date is missing
     var isDateEmpty = checkEmpty &&
         (!internalArrivalDate ||
@@ -266,7 +271,7 @@ var RoundTrip = function (_a) {
     };
     var defaultPickupDropoffOption = findLocationOption(pickupDropoffPoint, 'pickup-dropoff');
     var defaultAccommodationOption = findLocationOption(accommodation, 'accommodation');
-    return (_jsx("div", { className: "round-trip ".concat(className), "data-round-trip-id": id, children: _jsxs("div", { className: "round-trip__content", children: [_jsx("div", { className: "round-trip__field round-trip__field--pax ".concat(isPaxEmpty ? 'round-trip__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty }) }), _jsxs("div", { className: "round-trip__field round-trip__field--dates", children: [_jsx(Text, { size: "sm", variant: "regular", className: "round-trip__field-label", children: "Arrival date - Departure date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY - DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 2, iconBGFull: false, showChevron: true, onValueChange: handleDateRangeChange, selectionMode: "range", defaultValue: internalArrivalDate && internalDepartureDate
+    return (_jsx("div", { className: "round-trip ".concat(className), "data-round-trip-id": id, children: _jsxs("div", { className: "round-trip__content", children: [_jsx("div", { className: "round-trip__field round-trip__field--pax ".concat(isPaxEmpty ? 'round-trip__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty, onPaxInvalid: function (isInvalid) { return setIsInvalidPax(isInvalid); } }) }), _jsxs("div", { className: "round-trip__field round-trip__field--dates", children: [_jsx(Text, { size: "sm", variant: "regular", className: "round-trip__field-label", children: "Arrival date - Departure date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY - DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 2, iconBGFull: false, showChevron: true, onValueChange: handleDateRangeChange, selectionMode: "range", defaultValue: internalArrivalDate && internalDepartureDate
                                 ? [internalArrivalDate, internalDepartureDate]
                                 : undefined, inputClassName: "round-trip__date-picker--input", state: isDateError() ? 'error' : undefined, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "round-trip__field round-trip__field--pickup-dropoff", children: _jsx(LocationDropdown, { label: "Pick up / Drop-off point", options: pickupDropoffOptions.options, groups: pickupDropoffOptions.groups, selectedValue: (internalPickupDropoffPoint === null || internalPickupDropoffPoint === void 0 ? void 0 : internalPickupDropoffPoint.id) || null, onSelectionChange: handlePickupDropoffChange, placeholder: "Select pick-up / drop-off point", direction: undefined, type: "airport-port", showGroupTitles: true, error: isPickupDropoffEmpty, scrollOnOpen: scrollOnOpen, defaultValue: defaultPickupDropoffOption }) }), _jsx("div", { className: "round-trip__field round-trip__field--accommodation", children: _jsx(LocationDropdown, { label: "Accommodation", options: accommodationOptions.options, groups: accommodationOptions.groups, selectedValue: (internalAccommodation === null || internalAccommodation === void 0 ? void 0 : internalAccommodation.id) || null, onSelectionChange: handleAccommodationChange, placeholder: "Select accommodation", direction: "dropoff", type: "accommodation", showGroupTitles: false, error: isAccommodationEmpty, scrollOnOpen: scrollOnOpen, defaultValue: defaultAccommodationOption }) })] }) }));
 };

package/dist/components/organisms/SearchBarTransfer/SearchBarTransfer.js

@@ -49,7 +49,6 @@ function SearchBarTransfer(_a) {
     var _j = useState(defaultRoundTripData), roundTripData = _j[0], setRoundTripData = _j[1];
     var _k = useState(initializeTransferLines(defaultTransferLines)), transferLines = _k[0], setTransferLines = _k[1];
     var _l = useState(null), error = _l[0], setError = _l[1];
-    var _m = useState(0), validationTrigger = _m[0], setValidationTrigger = _m[1];
     // Notify parent of changes
     useEffect(function () {
         var data = {
@@ -372,7 +371,6 @@ function SearchBarTransfer(_a) {
     };
     // Handle search
     var handleSearch = function () {
-        setValidationTrigger(function (prev) { return prev + 1; });
         if (validateData()) {
             var data = {
                 mode: mode,
@@ -383,7 +381,7 @@ function SearchBarTransfer(_a) {
             onSearch === null || onSearch === void 0 ? void 0 : onSearch(data);
         }
     };
-    return (_jsxs("div", { className: "search-bar-transfer ".concat(className), children: [_jsxs("div", { className: "search-bar-transfer__header", children: [_jsx(Heading, { level: 5, variant: "bold", color: "accent", children: "Select your transfer details" }), _jsx("div", { className: "search-bar-transfer__mode-selector", children: _jsx(SegmentedButton, { options: modeOptions, value: mode, onChange: handleModeChange, name: "transfer-mode" }) })] }), mode === 'roundtrip' ? (_jsxs(_Fragment, { children: [_jsx(RoundTrip, { id: "roundtrip-main", locations: locations, paxData: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.paxData, arrivalDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.arrivalDate, departureDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.departureDate, pickupDropoffPoint: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.pickupDropoffPoint, accommodation: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.accommodation, onChange: setRoundTripData, checkEmpty: error !== null, scrollOnOpen: scrollOnOpen }, "roundtrip-".concat(validationTrigger)), _jsx("div", { className: "search-bar-transfer__transfer-type", children: renderTransferTypeButtons(handleAddTransferFromRoundTrip) })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "search-bar-transfer__transfer-type", children: [_jsx(Text, { size: "lg", variant: "bold", color: "subtle", as: "div", className: "search-bar-transfer__transfer-type-label", children: "Select a transfer type you want to add" }), renderTransferTypeButtons(handleAddTransfer)] }), transferLines.length === 0 && (_jsx(TransferLine, { id: "placeholder-transfer", type: "inter-hotel", locations: locations, onDataChange: function () { }, showDelete: false, disabled: true, scrollOnOpen: scrollOnOpen, onPaxOpenChange: onPaxOpenChange })), transferLines.length > 0 && (_jsx("div", { className: "search-bar-transfer__transfer-lines", children: (function () {
+    return (_jsxs("div", { className: "search-bar-transfer ".concat(className), children: [_jsxs("div", { className: "search-bar-transfer__header", children: [_jsx(Heading, { level: 5, variant: "bold", color: "accent", children: "Select your transfer details" }), _jsx("div", { className: "search-bar-transfer__mode-selector", children: _jsx(SegmentedButton, { options: modeOptions, value: mode, onChange: handleModeChange, name: "transfer-mode" }) })] }), mode === 'roundtrip' ? (_jsxs(_Fragment, { children: [_jsx(RoundTrip, { id: "roundtrip-main", locations: locations, paxData: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.paxData, arrivalDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.arrivalDate, departureDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.departureDate, pickupDropoffPoint: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.pickupDropoffPoint, accommodation: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.accommodation, onChange: setRoundTripData, checkEmpty: error !== null, scrollOnOpen: scrollOnOpen }, "roundtrip"), _jsx("div", { className: "search-bar-transfer__transfer-type", children: renderTransferTypeButtons(handleAddTransferFromRoundTrip) })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "search-bar-transfer__transfer-type", children: [_jsx(Text, { size: "lg", variant: "bold", color: "subtle", as: "div", className: "search-bar-transfer__transfer-type-label", children: "Select a transfer type you want to add" }), renderTransferTypeButtons(handleAddTransfer)] }), transferLines.length === 0 && (_jsx(TransferLine, { id: "placeholder-transfer", type: "inter-hotel", locations: locations, onDataChange: function () { }, showDelete: false, disabled: true, scrollOnOpen: scrollOnOpen, onPaxOpenChange: onPaxOpenChange })), transferLines.length > 0 && (_jsx("div", { className: "search-bar-transfer__transfer-lines", children: (function () {
                             // Group transfers by type
                             var groupedTransfers = {
                                 arrival: [],
@@ -402,7 +400,7 @@ function SearchBarTransfer(_a) {
                                 departure: { label: 'Departure', icon: 'departure' },
                                 'inter-hotel': { label: 'Inter-Hotel', icon: 'building' },
                             };
-                            return nonEmptyGroups.map(function (type, groupIndex) { return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "search-bar-transfer__category-header", children: [_jsx(Icon, { name: categoryInfo[type].icon, size: "md" }), _jsx(Text, { size: "md", variant: "bold", color: "default", as: "span", children: categoryInfo[type].label })] }), groupedTransfers[type].map(function (line) { return (_jsx(TransferLine, { id: line.id, type: line.type, paxData: line.paxData, transferDate: line.transferDate, pickupPoint: line.pickupPoint, dropoffPoint: line.dropoffPoint, locations: locations, onDataChange: function (data) { return handleTransferLineChange(line.id, data); }, onDelete: function () { return handleDeleteTransferLine(line.id); }, showDelete: transferLines.length > 1, checkEmpty: error !== null, scrollOnOpen: scrollOnOpen, onPaxOpenChange: onPaxOpenChange }, "".concat(line.id, "-").concat(validationTrigger))); }), groupIndex < nonEmptyGroups.length - 1 && (_jsx("svg", { className: "search-bar-transfer__divider", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "1", viewBox: "0 0 1076 1", fill: "none", preserveAspectRatio: "none", children: _jsx("path", { d: "M0 0.5L1076 0.499906", stroke: "var(--color-border-medium, #A3A3A3)", strokeWidth: "1", strokeDasharray: "10 10" }) }))] }, type)); });
-                        })() }))] })), _jsxs("div", { className: "search-bar-transfer__actions", children: [_jsx(Checkbox, { checked: sameVehicle, onChange: setSameVehicle, label: "Use the same vehicle for all your transfers" }), _jsxs("div", { className: "search-bar-transfer__cta", children: [error && _jsx(Toast, { text: error, type: "danger" }), _jsxs(Button, { variant: "primary", size: "lg", onClick: handleSearch, children: [isUpdateLabel && 'Update', " Search"] })] })] })] }));
+                            return nonEmptyGroups.map(function (type, groupIndex) { return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "search-bar-transfer__category-header", children: [_jsx(Icon, { name: categoryInfo[type].icon, size: "md" }), _jsx(Text, { size: "md", variant: "bold", color: "default", as: "span", children: categoryInfo[type].label })] }), groupedTransfers[type].map(function (line, index) { return (_jsx(TransferLine, { id: line.id, type: line.type, paxData: line.paxData, transferDate: line.transferDate, pickupPoint: line.pickupPoint, dropoffPoint: line.dropoffPoint, locations: locations, onDataChange: function (data) { return handleTransferLineChange(line.id, data); }, onDelete: function () { return handleDeleteTransferLine(line.id); }, showDelete: transferLines.length > 1, checkEmpty: error !== null, scrollOnOpen: scrollOnOpen, onPaxOpenChange: onPaxOpenChange }, "".concat(line.id, "-").concat(index))); }), groupIndex < nonEmptyGroups.length - 1 && (_jsx("svg", { className: "search-bar-transfer__divider", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "1", viewBox: "0 0 1076 1", fill: "none", preserveAspectRatio: "none", children: _jsx("path", { d: "M0 0.5L1076 0.499906", stroke: "var(--color-border-medium, #A3A3A3)", strokeWidth: "1", strokeDasharray: "10 10" }) }))] }, type)); });
+                        })() }))] })), _jsxs("div", { className: "search-bar-transfer__actions", children: [_jsx(Checkbox, { checked: sameVehicle, onChange: setSameVehicle, label: "Use the same vehicle for all your transfers" }), _jsxs("div", { className: "search-bar-transfer__cta", children: [error && _jsx(Toast, { text: error, type: "danger" }), _jsxs(Button, { type: "button", variant: "primary", size: "lg", onClick: handleSearch, children: [isUpdateLabel && 'Update', " Search"] })] })] })] }));
 }
 export default SearchBarTransfer;

package/dist/components/organisms/TopNavigation/DesktopNav.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 type Link = {
     label: string;
     route: string;