mautourco-components 0.2.104 → 0.2.105

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/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.104",
+  "version": "0.2.105",
   "private": false,
   "description": "Bibliothèque de composants Mautourco pour le redesign",
   "main": "dist/index.js",

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);
 }
-