mautourco-components 0.2.103 → 0.2.105

package/dist/components/molecules/LocationDropdown/LocationDropdown.js

@@ -29,6 +29,7 @@ var LocationDropdown = function (_a) {
     var _q = useState(false), isOpen = _q[0], setIsOpen = _q[1];
     var _r = useState(''), searchQuery = _r[0], setSearchQuery = _r[1];
     var dropdownRef = useRef(null);
+    var dropdownPanelRef = useRef(null);
     var inputRef = useRef(null);
     var searchInputRef = useRef(null);
     // Close dropdown when clicking outside
@@ -45,7 +46,11 @@ var LocationDropdown = function (_a) {
     }, []);
     // Scroll to input when dropdown opens (if scrollOnOpen is true)
     useEffect(function () {
-        scrollIntoViewOnOpen(inputRef, isOpen, scrollOnOpen);
+        setTimeout(function () {
+            if (dropdownPanelRef.current) {
+                scrollIntoViewOnOpen(dropdownPanelRef, isOpen, scrollOnOpen);
+            }
+        }, 10);
     }, [isOpen, scrollOnOpen]);
     // Reset search when dropdown closes
     useEffect(function () {
@@ -88,9 +93,7 @@ var LocationDropdown = function (_a) {
         if (!searchQuery.trim())
             return opts;
         var query = searchQuery.toLowerCase();
-        return opts.filter(function (option) {
-            return option.label.toLowerCase().includes(query);
-        });
+        return opts.filter(function (option) { return option.label.toLowerCase().includes(query); });
     };
     var getSelectedOption = function () {
         if (selectedValue) {
@@ -156,13 +159,15 @@ var LocationDropdown = function (_a) {
     var displayText = selectedOption ? selectedOption.label : placeholder;
     // Prepare all options (flat or grouped) and filter them
     var allOptionsRaw = groups.length > 0 ? groups : [{ id: 'default', label: '', options: options }];
-    var allOptions = allOptionsRaw.map(function (group) { return (__assign(__assign({}, group), { options: filterOptions(group.options) })); }).filter(function (group) { return group.options.length > 0; });
+    var allOptions = allOptionsRaw
+        .map(function (group) { return (__assign(__assign({}, group), { options: filterOptions(group.options) })); })
+        .filter(function (group) { return group.options.length > 0; });
     // Skeleton loader component
     var SkeletonOption = function () { return (_jsxs("div", { className: "location-dropdown__option location-dropdown__option--skeleton", children: [_jsx("div", { className: "location-dropdown__skeleton-icon" }), _jsx("div", { className: "location-dropdown__skeleton-text" })] })); };
     // Render skeleton loading state
     var renderSkeletonLoading = function () { return (_jsx("div", { className: "location-dropdown__panel", children: _jsx("div", { className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") }, children: _jsx("div", { className: "location-dropdown__options-wrapper", children: _jsx("div", { className: "location-dropdown__group", children: _jsx("div", { className: "location-dropdown__group-options", children: __spreadArray([], Array(5), true).map(function (_, index) { return (_jsx(SkeletonOption, {}, "skeleton-".concat(index))); }) }) }) }) }) })); };
     return (_jsxs("div", { ref: dropdownRef, className: "location-dropdown location-dropdown--".concat(type, " ").concat(disabled ? 'location-dropdown--disabled' : '', " ").concat(className), children: [label && (_jsx("div", { className: "location-dropdown__label", children: _jsx(Text, { size: "sm", variant: "medium", children: label }) })), _jsxs("div", { ref: inputRef, className: "location-dropdown__input location-dropdown__input--".concat(getDropdownState()), onClick: handleToggleDropdown, children: [_jsxs("div", { className: "location-dropdown__input-content", children: [_jsx(Icon, { name: getInputIcon(), size: "sm", className: "location-dropdown__input-icon ".concat(!selectedOption ? 'location-dropdown__input-icon--placeholder' : '') }), isOpen ? (_jsx("input", { ref: searchInputRef, type: "text", className: "location-dropdown__input-text ".concat(!selectedOption && !searchQuery ? 'location-dropdown__input-text--placeholder' : ''), placeholder: displayText, value: searchQuery, onChange: handleSearchChange, onClick: function (e) { return e.stopPropagation(); }, disabled: disabled, autoFocus: true })) : (_jsx("span", { className: "location-dropdown__input-text ".concat(!selectedOption ? 'location-dropdown__input-text--placeholder' : ''), children: displayText }))] }), _jsx(Icon, { name: "chevron-down", size: "sm", className: "location-dropdown__input-chevron" })] }), isOpen &&
-                (loading ? (renderSkeletonLoading()) : (_jsx("div", { className: "location-dropdown__panel", children: _jsx("div", { className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") }, children: _jsx("div", { className: "location-dropdown__options-wrapper", children: allOptions.length === 0 ? (_jsx("div", { className: "location-dropdown__no-results", children: _jsx(Text, { size: "sm", variant: "medium", children: "No locations found" }) })) : (allOptions.map(function (group, groupIndex) { return (_jsxs("div", { className: "location-dropdown__group", children: [showGroupTitles && group.label && groups.length > 0 && (_jsxs(_Fragment, { children: [groupIndex > 0 && _jsx("div", { className: "location-dropdown__divider" }), _jsx("div", { className: "location-dropdown__group-header", children: _jsx(Text, { size: "xs", variant: "bold", children: group.label }) })] })), _jsx("div", { className: "location-dropdown__group-options", children: group.options.map(function (option) {
+                (loading ? (renderSkeletonLoading()) : (_jsx("div", { className: "location-dropdown__panel", ref: dropdownPanelRef, children: _jsx("div", { className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") }, children: _jsx("div", { className: "location-dropdown__options-wrapper", children: allOptions.length === 0 ? (_jsx("div", { className: "location-dropdown__no-results", children: _jsx(Text, { size: "sm", variant: "medium", children: "No locations found" }) })) : (allOptions.map(function (group, groupIndex) { return (_jsxs("div", { className: "location-dropdown__group", children: [showGroupTitles && group.label && groups.length > 0 && (_jsxs(_Fragment, { children: [groupIndex > 0 && (_jsx("div", { className: "location-dropdown__divider" })), _jsx("div", { className: "location-dropdown__group-header", children: _jsx(Text, { size: "xs", variant: "bold", children: group.label }) })] })), _jsx("div", { className: "location-dropdown__group-options", children: group.options.map(function (option) {
                                             var isSelected = effectiveSelectedValue === option.id;
                                             var isDisabled = option.disabled || disabled;
                                             return (_jsxs("div", { className: "location-dropdown__option ".concat(isSelected ? 'location-dropdown__option--selected' : '', " ").concat(isDisabled ? 'location-dropdown__option--disabled' : ''), onClick: function () { return !isDisabled && handleOptionSelect(option); }, children: [_jsx(Icon, { name: getOptionIcon(option, isSelected), size: "sm", className: "location-dropdown__option-icon" }), _jsx("span", { className: "location-dropdown__option-text", children: option.label })] }, option.id));

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

@@ -66,6 +66,7 @@ export interface PaxSelectorProps {
     ageRange?: number[];
     /** Whether to check if age inputs are empty and show error state */
     checkEmpty?: boolean;
+    onPaxOpenChange?: () => void;
 }
 export declare const DEFAULT_PAX_DATA_WITH_ADULTS: PaxData;
 export declare const CHILD_CATEGORY_AGES: number[];

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

@@ -183,7 +183,7 @@ var RoomEditor = function (_a) {
                                             }) }, "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;
+    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 _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];
@@ -312,7 +312,7 @@ var PaxSelector = function (_a) {
         if (multipleRooms) {
             return rooms.some(function (room) { return room.teens > 0 || room.children > 0 || room.infants > 0; });
         }
-        return internalData.teens > 0 || internalData.children > 0 || internalData.infants > 0;
+        return (internalData.teens > 0 || internalData.children > 0 || internalData.infants > 0);
     };
     // Handle clicks outside the dropdown
     useEffect(function () {
@@ -327,6 +327,7 @@ var PaxSelector = function (_a) {
         if (isOpen) {
             document.addEventListener('mousedown', handleClickOutside);
         }
+        onPaxOpenChange === null || onPaxOpenChange === void 0 ? void 0 : onPaxOpenChange();
         return function () {
             document.removeEventListener('mousedown', handleClickOutside);
         };

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

@@ -33,6 +33,8 @@ export interface SearchBarTransferProps {
     className?: string;
     /** Whether to scroll to the input when the calendar opens */
     scrollOnOpen?: boolean;
+    /** Callback when pax selector opens */
+    onPaxOpenChange?: () => void;
 }
-declare function SearchBarTransfer({ mode: initialMode, locations, defaultRoundTripData, defaultTransferLines, defaultSameVehicle, onSearch, onChange, onRemove, className, scrollOnOpen, }: SearchBarTransferProps): import("react/jsx-runtime").JSX.Element;
+declare function SearchBarTransfer({ mode: initialMode, locations, defaultRoundTripData, defaultTransferLines, defaultSameVehicle, onSearch, onChange, onRemove, className, scrollOnOpen, onPaxOpenChange, }: SearchBarTransferProps): import("react/jsx-runtime").JSX.Element;
 export default SearchBarTransfer;

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

@@ -32,7 +32,7 @@ import RoundTrip from '../RoundTrip/RoundTrip';
 import TransferLine from '../TransferLine/TransferLine';
 var transferIdCounter = 0;
 function SearchBarTransfer(_a) {
-    var _b = _a.mode, initialMode = _b === void 0 ? 'roundtrip' : _b, _c = _a.locations, locations = _c === void 0 ? { options: [], groups: [] } : _c, defaultRoundTripData = _a.defaultRoundTripData, defaultTransferLines = _a.defaultTransferLines, _d = _a.defaultSameVehicle, defaultSameVehicle = _d === void 0 ? false : _d, onSearch = _a.onSearch, onChange = _a.onChange, onRemove = _a.onRemove, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.scrollOnOpen, scrollOnOpen = _f === void 0 ? false : _f;
+    var _b = _a.mode, initialMode = _b === void 0 ? 'roundtrip' : _b, _c = _a.locations, locations = _c === void 0 ? { options: [], groups: [] } : _c, defaultRoundTripData = _a.defaultRoundTripData, defaultTransferLines = _a.defaultTransferLines, _d = _a.defaultSameVehicle, defaultSameVehicle = _d === void 0 ? false : _d, onSearch = _a.onSearch, onChange = _a.onChange, onRemove = _a.onRemove, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.scrollOnOpen, scrollOnOpen = _f === void 0 ? false : _f, onPaxOpenChange = _a.onPaxOpenChange;
     // Generate unique ID for transfer lines
     var generateTransferId = function () {
         transferIdCounter += 1;
@@ -377,7 +377,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 })), 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-".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: function () { } })), transferLines.length > 0 && (_jsx("div", { className: "search-bar-transfer__transfer-lines", children: (function () {
                             // Group transfers by type
                             var groupedTransfers = {
                                 arrival: [],

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

@@ -54,6 +54,8 @@ export interface TransferLineProps {
     disabled?: boolean;
     /** Whether to scroll to the input when the calendar opens */
     scrollOnOpen?: boolean;
+    /** Callback when pax selector opens */
+    onPaxOpenChange?: () => void;
 }
 declare const TransferLine: React.FC<TransferLineProps>;
 export default TransferLine;

package/dist/components/organisms/TransferLine/TransferLine.js

@@ -27,7 +27,7 @@ import LocationDropdown from '../../molecules/LocationDropdown/LocationDropdown'
 import DateTimePicker from '../DateTimePicker/DateTimePicker';
 import PaxSelector from '../PaxSelector/PaxSelector';
 var TransferLine = function (_a) {
-    var id = _a.id, type = _a.type, paxData = _a.paxData, transferDate = _a.transferDate, pickupPoint = _a.pickupPoint, dropoffPoint = _a.dropoffPoint, _b = _a.locations, locations = _b === void 0 ? { options: [], groups: [] } : _b, onPaxChange = _a.onPaxChange, onDateChange = _a.onDateChange, onPickupChange = _a.onPickupChange, onDropoffChange = _a.onDropoffChange, onDataChange = _a.onDataChange, onDelete = _a.onDelete, _c = _a.showDelete, showDelete = _c === void 0 ? true : _c, _d = _a.showTitle, showTitle = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.checkEmpty, checkEmpty = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.scrollOnOpen, scrollOnOpen = _h === void 0 ? false : _h;
+    var id = _a.id, type = _a.type, paxData = _a.paxData, transferDate = _a.transferDate, pickupPoint = _a.pickupPoint, dropoffPoint = _a.dropoffPoint, _b = _a.locations, locations = _b === void 0 ? { options: [], groups: [] } : _b, onPaxChange = _a.onPaxChange, onDateChange = _a.onDateChange, onPickupChange = _a.onPickupChange, onDropoffChange = _a.onDropoffChange, onDataChange = _a.onDataChange, onDelete = _a.onDelete, _c = _a.showDelete, showDelete = _c === void 0 ? true : _c, _d = _a.showTitle, showTitle = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.checkEmpty, checkEmpty = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.scrollOnOpen, scrollOnOpen = _h === void 0 ? false : _h, onPaxOpenChange = _a.onPaxOpenChange;
     var _j = useState(paxData), internalPaxData = _j[0], setInternalPaxData = _j[1];
     var _k = useState(transferDate), internalTransferDate = _k[0], setInternalTransferDate = _k[1];
     var _l = useState(null), internalPickupPoint = _l[0], setInternalPickupPoint = _l[1];
@@ -70,7 +70,11 @@ var TransferLine = function (_a) {
     };
     // Helper to check if value is LocationOption
     var isLocationOption = function (value) {
-        return typeof value === 'object' && value !== null && 'id' in value && 'label' in value && 'type' in value;
+        return (typeof value === 'object' &&
+            value !== null &&
+            'id' in value &&
+            'label' in value &&
+            'type' in value);
     };
     // Initialize location data from IDs, LocationOption objects, or set defaults
     React.useEffect(function () {
@@ -194,7 +198,10 @@ var TransferLine = function (_a) {
         var name = locationData.locationName.toLowerCase();
         var id = String(locationData.id).toLowerCase();
         var locType = 'accommodation';
-        if (name.includes('harbour') || name.includes('port') || id.includes('harbour') || id.includes('port')) {
+        if (name.includes('harbour') ||
+            name.includes('port') ||
+            id.includes('harbour') ||
+            id.includes('port')) {
             locType = 'port';
         }
         else if (name.includes('airport') || id.includes('airport')) {
@@ -241,7 +248,7 @@ var TransferLine = function (_a) {
     };
     var defaultPickupOption = findLocationOption(pickupPoint, 'pickup');
     var defaultDropoffOption = findLocationOption(dropoffPoint, 'dropoff');
-    return (_jsxs("div", { className: "transfer-line transfer-line--".concat(type, " ").concat(disabled ? 'transfer-line--disabled' : '', " ").concat(className), "data-transfer-id": id, children: [showTitle && (_jsxs("div", { className: "transfer-line__header", children: [_jsx(Icon, { name: getTypeIcon(), size: "sm", className: "transfer-line__header-icon" }), _jsx(Text, { size: "sm", variant: "medium", className: "transfer-line__header-label", children: getTypeLabel() })] })), _jsxs("div", { className: "transfer-line__content-container", children: [_jsxs("div", { className: "transfer-line__content", children: [_jsx("div", { className: "transfer-line__field transfer-line__field--pax ".concat(isPaxEmpty ? 'transfer-line__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', disabled: disabled, scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty }) }), _jsxs("div", { className: "transfer-line__field transfer-line__field--date", children: [_jsx(Text, { size: "sm", variant: "regular", className: "transfer-line__field-label", children: "Transfer date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 1, iconBGFull: false, showChevron: true, onValueChange: handleDateChange, selectionMode: "single", defaultValue: internalTransferDate, inputClassName: "transfer-line__date-picker", state: isDateEmpty ? 'error' : undefined, disabled: disabled, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "transfer-line__field transfer-line__field--pickup", children: _jsx(LocationDropdown, { label: "Pick-up point", options: filterLocations('pickup').options, groups: filterLocations('pickup').groups, selectedValue: (internalPickupPoint === null || internalPickupPoint === void 0 ? void 0 : internalPickupPoint.id) || null, onSelectionChange: handlePickupChange, placeholder: "Select a pick-up point", direction: "pickup", type: type === 'inter-hotel'
+    return (_jsxs("div", { className: "transfer-line transfer-line--".concat(type, " ").concat(disabled ? 'transfer-line--disabled' : '', " ").concat(className), "data-transfer-id": id, children: [showTitle && (_jsxs("div", { className: "transfer-line__header", children: [_jsx(Icon, { name: getTypeIcon(), size: "sm", className: "transfer-line__header-icon" }), _jsx(Text, { size: "sm", variant: "medium", className: "transfer-line__header-label", children: getTypeLabel() })] })), _jsxs("div", { className: "transfer-line__content-container", children: [_jsxs("div", { className: "transfer-line__content", children: [_jsx("div", { className: "transfer-line__field transfer-line__field--pax ".concat(isPaxEmpty ? 'transfer-line__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', disabled: disabled, scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty, onPaxOpenChange: onPaxOpenChange }) }), _jsxs("div", { className: "transfer-line__field transfer-line__field--date", children: [_jsx(Text, { size: "sm", variant: "regular", className: "transfer-line__field-label", children: "Transfer date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 1, iconBGFull: false, showChevron: true, onValueChange: handleDateChange, selectionMode: "single", defaultValue: internalTransferDate, inputClassName: "transfer-line__date-picker", state: isDateEmpty ? 'error' : undefined, disabled: disabled, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "transfer-line__field transfer-line__field--pickup", children: _jsx(LocationDropdown, { label: "Pick-up point", options: filterLocations('pickup').options, groups: filterLocations('pickup').groups, selectedValue: (internalPickupPoint === null || internalPickupPoint === void 0 ? void 0 : internalPickupPoint.id) || null, onSelectionChange: handlePickupChange, placeholder: "Select a pick-up point", direction: "pickup", type: type === 'inter-hotel'
                                         ? 'accommodation'
                                         : type === 'arrival'
                                             ? 'airport-port'

package/dist/lib/utils.js

@@ -21,17 +21,22 @@ export function cn() {
 export function scrollIntoViewOnOpen(elementRef, isOpen, scrollOnOpen, offset) {
     if (offset === void 0) { offset = 20; }
     if (isOpen && scrollOnOpen && elementRef.current) {
+        var bodyBottom_1 = document.body.clientHeight;
         // Use setTimeout to ensure the dropdown is rendered before scrolling
         setTimeout(function () {
             if (elementRef.current) {
                 var elementTop = elementRef.current.getBoundingClientRect().top + window.pageYOffset;
+                var elementBottom = elementRef.current.getBoundingClientRect().bottom;
+                var realBottom = elementBottom + window.scrollY;
                 // Scroll to show the element with some padding from the top
-                window.scrollTo({
-                    top: elementTop - offset,
-                    behavior: 'smooth',
-                });
+                if (realBottom > bodyBottom_1) {
+                    window.scrollTo({
+                        top: elementTop - offset,
+                        behavior: 'smooth',
+                    });
+                }
             }
-        }, 0);
+        }, 350);
     }
 }
 /**

package/dist/styles/components/organism/pax-selector.css

@@ -33,7 +33,9 @@
 }
 
 .pax-selector__label {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-size: 14px;
   line-height: 1.5;
   color: var(--input-color-label-default, #262626);
@@ -82,7 +84,9 @@
 }
 
 .pax-selector__input-text {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
@@ -99,7 +103,7 @@
 }
 
 .pax-selector__chevron--open {
-  transform: rotate(180deg)!important;
+  transform: rotate(180deg) !important;
 }
 
 /* Disabled state */
@@ -139,7 +143,9 @@
   border: 1px solid var(--color-border-subtle, #e5e5e5);
   border-radius: 12px;
   padding: 16px;
-  box-shadow: 0px 4px 8px rgba(48, 54, 66, 0.1), 0px 1px 8px rgba(48, 54, 66, 0.11);
+  box-shadow:
+    0px 4px 8px rgba(48, 54, 66, 0.1),
+    0px 1px 8px rgba(48, 54, 66, 0.11);
   z-index: 100;
   animation: pax-selector-dropdown-enter 0.2s ease-out;
 }
@@ -168,7 +174,9 @@
   background: none;
   border: none;
   cursor: pointer;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
@@ -222,7 +230,9 @@
   background: var(--stepper-color-cta-background-default, #ffffff);
   color: var(--stepper-color-cta-foreground-default, #000000);
   cursor: pointer;
-  box-shadow: 0px 1px 8px rgba(48, 54, 66, 0.11), 0px 4px 8px rgba(48, 54, 66, 0.1);
+  box-shadow:
+    0px 1px 8px rgba(48, 54, 66, 0.11),
+    0px 4px 8px rgba(48, 54, 66, 0.1);
   transition: all 0.2s ease;
 }
 
@@ -247,11 +257,16 @@
   align-items: center;
   justify-content: center;
   min-width: 48px;
+  flex: 0 0 48px;
   padding: 4px 24px;
   background: var(--stepper-color-counter, #ffffff);
   border-radius: 8px;
-  box-shadow: 0px 0px 4px rgba(48, 54, 66, 0.11), 0px 2px 2px rgba(48, 54, 66, 0.1);
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  box-shadow:
+    0px 0px 4px rgba(48, 54, 66, 0.11),
+    0px 2px 2px rgba(48, 54, 66, 0.1);
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: 700;
   font-size: 18px;
   line-height: 24px;
@@ -266,7 +281,9 @@
 }
 
 .pax-selector__client-type-label {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-size: 14px;
   line-height: 20px;
   color: var(--input-color-label-default, #262626);
@@ -307,7 +324,9 @@
 }
 
 .pax-selector__client-type-text {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
@@ -358,7 +377,9 @@
   border: none;
   cursor: pointer;
   text-align: left;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
@@ -390,7 +411,9 @@
   background: none;
   border: none;
   cursor: pointer;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: 700;
   font-size: 14px;
   line-height: 20px;
@@ -412,7 +435,9 @@
   border: none;
   border-radius: 9999px;
   cursor: pointer;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: 700;
   font-size: 14px;
   line-height: 20px;
@@ -509,7 +534,9 @@
   border: 1px solid var(--chip-color-red-outline-foreground, #991b1b);
   border-radius: 9999px;
   cursor: pointer;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: var(--font-weight-font-medium, 500);
   font-size: 12px;
   line-height: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.103",
+  "version": "0.2.105",
   "private": false,
   "description": "Bibliothèque de composants Mautourco pour le redesign",
   "main": "dist/index.js",

package/src/components/molecules/LocationDropdown/LocationDropdown.tsx

@@ -64,6 +64,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownPanelRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
@@ -83,7 +84,11 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
 
   // Scroll to input when dropdown opens (if scrollOnOpen is true)
   useEffect(() => {
-    scrollIntoViewOnOpen(inputRef, isOpen, scrollOnOpen);
+    setTimeout(() => {
+      if (dropdownPanelRef.current) {
+        scrollIntoViewOnOpen(dropdownPanelRef, isOpen, scrollOnOpen);
+      }
+    }, 10);
   }, [isOpen, scrollOnOpen]);
 
   // Reset search when dropdown closes
@@ -129,11 +134,9 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   // Filter locations based on search query
   const filterOptions = (opts: LocationOption[]): LocationOption[] => {
     if (!searchQuery.trim()) return opts;
-    
+
     const query = searchQuery.toLowerCase();
-    return opts.filter((option) =>
-      option.label.toLowerCase().includes(query)
-    );
+    return opts.filter((option) => option.label.toLowerCase().includes(query));
   };
 
   const getSelectedOption = (): LocationOption | null => {
@@ -201,11 +204,14 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   const displayText = selectedOption ? selectedOption.label : placeholder;
 
   // Prepare all options (flat or grouped) and filter them
-  const allOptionsRaw = groups.length > 0 ? groups : [{ id: 'default', label: '', options }];
-  const allOptions = allOptionsRaw.map((group) => ({
-    ...group,
-    options: filterOptions(group.options),
-  })).filter((group) => group.options.length > 0);
+  const allOptionsRaw =
+    groups.length > 0 ? groups : [{ id: 'default', label: '', options }];
+  const allOptions = allOptionsRaw
+    .map((group) => ({
+      ...group,
+      options: filterOptions(group.options),
+    }))
+    .filter((group) => group.options.length > 0);
 
   // Skeleton loader component
   const SkeletonOption = () => (
@@ -284,7 +290,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
         (loading ? (
           renderSkeletonLoading()
         ) : (
-          <div className="location-dropdown__panel">
+          <div className="location-dropdown__panel" ref={dropdownPanelRef}>
             <div
               className="location-dropdown__content"
               style={{ maxHeight: `${maxHeight}px` }}>
@@ -297,41 +303,43 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
                   </div>
                 ) : (
                   allOptions.map((group, groupIndex) => (
-                  <div key={group.id} className="location-dropdown__group">
-                    {showGroupTitles && group.label && groups.length > 0 && (
-                      <>
-                        {groupIndex > 0 && <div className="location-dropdown__divider" />}
-                        <div className="location-dropdown__group-header">
-                          <Text size="xs" variant="bold">
-                            {group.label}
-                          </Text>
-                        </div>
-                      </>
-                    )}
-
-                    <div className="location-dropdown__group-options">
-                      {group.options.map((option) => {
-                        const isSelected = effectiveSelectedValue === option.id;
-                        const isDisabled = option.disabled || disabled;
-
-                        return (
-                          <div
-                            key={option.id}
-                            className={`location-dropdown__option ${isSelected ? 'location-dropdown__option--selected' : ''} ${isDisabled ? 'location-dropdown__option--disabled' : ''}`}
-                            onClick={() => !isDisabled && handleOptionSelect(option)}>
-                            <Icon
-                              name={getOptionIcon(option, isSelected)}
-                              size="sm"
-                              className="location-dropdown__option-icon"
-                            />
-                            <span className="location-dropdown__option-text">
-                              {option.label}
-                            </span>
+                    <div key={group.id} className="location-dropdown__group">
+                      {showGroupTitles && group.label && groups.length > 0 && (
+                        <>
+                          {groupIndex > 0 && (
+                            <div className="location-dropdown__divider" />
+                          )}
+                          <div className="location-dropdown__group-header">
+                            <Text size="xs" variant="bold">
+                              {group.label}
+                            </Text>
                           </div>
-                        );
-                      })}
+                        </>
+                      )}
+
+                      <div className="location-dropdown__group-options">
+                        {group.options.map((option) => {
+                          const isSelected = effectiveSelectedValue === option.id;
+                          const isDisabled = option.disabled || disabled;
+
+                          return (
+                            <div
+                              key={option.id}
+                              className={`location-dropdown__option ${isSelected ? 'location-dropdown__option--selected' : ''} ${isDisabled ? 'location-dropdown__option--disabled' : ''}`}
+                              onClick={() => !isDisabled && handleOptionSelect(option)}>
+                              <Icon
+                                name={getOptionIcon(option, isSelected)}
+                                size="sm"
+                                className="location-dropdown__option-icon"
+                              />
+                              <span className="location-dropdown__option-text">
+                                {option.label}
+                              </span>
+                            </div>
+                          );
+                        })}
+                      </div>
                     </div>
-                  </div>
                   ))
                 )}
               </div>

package/src/components/organisms/PaxSelector/PaxSelector.tsx

@@ -74,6 +74,7 @@ export interface PaxSelectorProps {
   ageRange?: number[];
   /** Whether to check if age inputs are empty and show error state */
   checkEmpty?: boolean;
+  onPaxOpenChange?: () => void;
 }
 
 const DEFAULT_PAX_DATA: PaxData = {
@@ -535,6 +536,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
   scrollOnOpen = false,
   disabled = false,
   checkEmpty = false,
+  onPaxOpenChange,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [internalData, setInternalData] = useState<PaxData>(
@@ -676,9 +678,13 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
   // Check if there are any minors that need age specification
   const hasMinorsWithoutAges = (): boolean => {
     if (multipleRooms) {
-      return rooms.some(room => room.teens > 0 || room.children > 0 || room.infants > 0);
+      return rooms.some(
+        (room) => room.teens > 0 || room.children > 0 || room.infants > 0
+      );
     }
-    return internalData.teens > 0 || internalData.children > 0 || internalData.infants > 0;
+    return (
+      internalData.teens > 0 || internalData.children > 0 || internalData.infants > 0
+    );
   };
 
   // Handle clicks outside the dropdown
@@ -696,6 +702,8 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
       document.addEventListener('mousedown', handleClickOutside);
     }
 
+    onPaxOpenChange?.();
+
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };

package/src/components/organisms/SearchBarTransfer/SearchBarTransfer.tsx

@@ -52,6 +52,8 @@ export interface SearchBarTransferProps {
   className?: string;
   /** Whether to scroll to the input when the calendar opens */
   scrollOnOpen?: boolean;
+  /** Callback when pax selector opens */
+  onPaxOpenChange?: () => void;
 }
 
 let transferIdCounter = 0;
@@ -67,6 +69,7 @@ function SearchBarTransfer({
   onRemove,
   className = '',
   scrollOnOpen = false,
+  onPaxOpenChange,
 }: SearchBarTransferProps) {
   // Generate unique ID for transfer lines
   const generateTransferId = () => {
@@ -557,6 +560,7 @@ function SearchBarTransfer({
               showDelete={false}
               disabled={true}
               scrollOnOpen={scrollOnOpen}
+              onPaxOpenChange={() => {}}
             />
           )}
 

package/src/components/organisms/TransferLine/TransferLine.tsx

@@ -3,9 +3,9 @@ import '../../../styles/components/organism/transfer-line.css';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
 import LocationDropdown, {
-    LocationData,
-    LocationGroup,
-    LocationOption,
+  LocationData,
+  LocationGroup,
+  LocationOption,
 } from '../../molecules/LocationDropdown/LocationDropdown';
 import DateTimePicker from '../DateTimePicker/DateTimePicker';
 import PaxSelector, { PaxData } from '../PaxSelector/PaxSelector';
@@ -66,6 +66,8 @@ export interface TransferLineProps {
   disabled?: boolean;
   /** Whether to scroll to the input when the calendar opens */
   scrollOnOpen?: boolean;
+  /** Callback when pax selector opens */
+  onPaxOpenChange?: () => void;
 }
 
 const TransferLine: React.FC<TransferLineProps> = ({
@@ -88,6 +90,7 @@ const TransferLine: React.FC<TransferLineProps> = ({
   checkEmpty = false,
   disabled = false,
   scrollOnOpen = false,
+  onPaxOpenChange,
 }) => {
   const [internalPaxData, setInternalPaxData] = useState<PaxData | undefined>(paxData);
   const [internalTransferDate, setInternalTransferDate] = useState<string | undefined>(
@@ -154,8 +157,16 @@ const TransferLine: React.FC<TransferLineProps> = ({
   };
 
   // Helper to check if value is LocationOption
-  const isLocationOption = (value: string | number | LocationOption | undefined): value is LocationOption => {
-    return typeof value === 'object' && value !== null && 'id' in value && 'label' in value && 'type' in value;
+  const isLocationOption = (
+    value: string | number | LocationOption | undefined
+  ): value is LocationOption => {
+    return (
+      typeof value === 'object' &&
+      value !== null &&
+      'id' in value &&
+      'label' in value &&
+      'type' in value
+    );
   };
 
   // Initialize location data from IDs, LocationOption objects, or set defaults
@@ -276,25 +287,33 @@ const TransferLine: React.FC<TransferLineProps> = ({
   };
 
   // Helper to convert LocationData to LocationOption
-  const toLocationOption = (locationData: LocationData | null, position: 'pickup' | 'dropoff'): LocationOption | null => {
+  const toLocationOption = (
+    locationData: LocationData | null,
+    position: 'pickup' | 'dropoff'
+  ): LocationOption | null => {
     if (!locationData) return null;
-    
+
     // Try to find in the options to get the type
     const { options, groups } = filterLocations(position);
     const allLocations = getAllLocations(options, groups);
     const found = allLocations.find((loc) => loc.id === locationData.id);
     if (found) return found;
-    
+
     // If not found, infer the type
     const name = locationData.locationName.toLowerCase();
     const id = String(locationData.id).toLowerCase();
     let locType: 'airport' | 'port' | 'accommodation' = 'accommodation';
-    if (name.includes('harbour') || name.includes('port') || id.includes('harbour') || id.includes('port')) {
+    if (
+      name.includes('harbour') ||
+      name.includes('port') ||
+      id.includes('harbour') ||
+      id.includes('port')
+    ) {
       locType = 'port';
     } else if (name.includes('airport') || id.includes('airport')) {
       locType = 'airport';
     }
-    
+
     return {
       id: locationData.id,
       label: locationData.locationName,
@@ -331,14 +350,17 @@ const TransferLine: React.FC<TransferLineProps> = ({
   const isDropoffEmpty = checkEmpty && !internalDropoffPoint;
 
   // Helper function to find LocationOption from ID or LocationOption for defaultValue
-  const findLocationOption = (value: string | number | LocationOption | undefined, position: 'pickup' | 'dropoff'): LocationOption | undefined => {
+  const findLocationOption = (
+    value: string | number | LocationOption | undefined,
+    position: 'pickup' | 'dropoff'
+  ): LocationOption | undefined => {
     if (!value) return undefined;
-    
+
     // If value is already a LocationOption object, use it directly
     if (isLocationOption(value)) {
       return value;
     }
-    
+
     // Otherwise, look up by ID in the locations
     const { options, groups } = filterLocations(position);
     const allLocations = getAllLocations(options, groups);
@@ -377,6 +399,7 @@ const TransferLine: React.FC<TransferLineProps> = ({
               disabled={disabled}
               scrollOnOpen={scrollOnOpen}
               checkEmpty={checkEmpty}
+              onPaxOpenChange={onPaxOpenChange}
             />
           </div>
 

package/src/styles/components/organism/pax-selector.css

@@ -19,7 +19,9 @@
 }
 
 .pax-selector__label {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-size: 14px;
   line-height: 1.5;
   color: var(--input-color-label-default, #262626);
@@ -68,7 +70,9 @@
 }
 
 .pax-selector__input-text {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
@@ -85,7 +89,7 @@
 }
 
 .pax-selector__chevron--open {
-  transform: rotate(180deg)!important;
+  transform: rotate(180deg) !important;
 }
 
 /* Disabled state */
@@ -123,7 +127,9 @@
   border: 1px solid var(--color-border-subtle, #e5e5e5);
   border-radius: 12px;
   padding: 16px;
-  box-shadow: 0px 4px 8px rgba(48, 54, 66, 0.1), 0px 1px 8px rgba(48, 54, 66, 0.11);
+  box-shadow:
+    0px 4px 8px rgba(48, 54, 66, 0.1),
+    0px 1px 8px rgba(48, 54, 66, 0.11);
   z-index: 100;
   animation: pax-selector-dropdown-enter 0.2s ease-out;
 }
@@ -151,7 +157,9 @@
   background: none;
   border: none;
   cursor: pointer;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
@@ -204,7 +212,9 @@
   background: var(--stepper-color-cta-background-default, #ffffff);
   color: var(--stepper-color-cta-foreground-default, #000000);
   cursor: pointer;
-  box-shadow: 0px 1px 8px rgba(48, 54, 66, 0.11), 0px 4px 8px rgba(48, 54, 66, 0.1);
+  box-shadow:
+    0px 1px 8px rgba(48, 54, 66, 0.11),
+    0px 4px 8px rgba(48, 54, 66, 0.1);
   transition: all 0.2s ease;
 }
 
@@ -229,11 +239,16 @@
   align-items: center;
   justify-content: center;
   min-width: 48px;
+  flex: 0 0 48px;
   padding: 4px 24px;
   background: var(--stepper-color-counter, #ffffff);
   border-radius: 8px;
-  box-shadow: 0px 0px 4px rgba(48, 54, 66, 0.11), 0px 2px 2px rgba(48, 54, 66, 0.1);
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  box-shadow:
+    0px 0px 4px rgba(48, 54, 66, 0.11),
+    0px 2px 2px rgba(48, 54, 66, 0.1);
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: 700;
   font-size: 18px;
   line-height: 24px;
@@ -247,7 +262,9 @@
 }
 
 .pax-selector__client-type-label {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-size: 14px;
   line-height: 20px;
   color: var(--input-color-label-default, #262626);
@@ -288,7 +305,9 @@
 }
 
 .pax-selector__client-type-text {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
@@ -339,7 +358,9 @@
   border: none;
   cursor: pointer;
   text-align: left;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
@@ -370,7 +391,9 @@
   background: none;
   border: none;
   cursor: pointer;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: 700;
   font-size: 14px;
   line-height: 20px;
@@ -392,7 +415,9 @@
   border: none;
   border-radius: 9999px;
   cursor: pointer;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: 700;
   font-size: 14px;
   line-height: 20px;
@@ -432,10 +457,9 @@
 }
 
 .pax-selector__age-groups {
-    @apply flex flex-wrap gap-4;
+  @apply flex flex-wrap gap-4;
 }
 
-
 /* Multiple Rooms Styles */
 .pax-selector__rooms {
   display: flex;
@@ -485,7 +509,9 @@
   border: 1px solid var(--chip-color-red-outline-foreground, #991b1b);
   border-radius: 9999px;
   cursor: pointer;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: var(--font-weight-font-medium, 500);
   font-size: 12px;
   line-height: 16px;
@@ -538,4 +564,3 @@
 .pax-selector__dropdown::-webkit-scrollbar-thumb:hover {
   background: var(--color-button-brand-background-secondary-hover, #115b5e);
 }
-