mautourco-components 0.2.129 → 0.2.130

package/dist/components/atoms/Icon/icons/AccessibilityIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconBaseProps } from './registry';
+declare const AccessibilityIcon: React.FC<IconBaseProps>;
+export default AccessibilityIcon;

package/dist/components/atoms/Icon/icons/AccessibilityIcon.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var AccessibilityIcon = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, color = _a.color;
+    var getSizeClasses = function () {
+        switch (size) {
+            case 'xs':
+                return 'w-3 h-3';
+            case 'sm':
+                return 'w-4 h-4';
+            case 'md':
+                return 'w-5 h-5';
+            case 'lg':
+                return 'w-6 h-6';
+            case 'xl':
+                return 'w-8 h-8';
+            default:
+                return 'w-5 h-5';
+        }
+    };
+    var sizeClasses = getSizeClasses();
+    var colorClass = color ? "text-".concat(color) : 'text-current';
+    var classes = "".concat(sizeClasses, " ").concat(colorClass, " ").concat(className);
+    return (_jsx("svg", { className: classes, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3.31832 14.1113C3.51472 13.6441 4.03706 13.3926 4.53219 13.5439C5.06019 13.7054 5.35747 14.264 5.19625 14.792L5.12203 15.0713C4.97231 15.727 4.99 16.4118 5.17574 17.0615C5.38804 17.8038 5.81067 18.4691 6.39254 18.9766C6.97441 19.4839 7.69081 19.8116 8.45504 19.9209C9.21938 20.0302 9.99932 19.9168 10.7002 19.5928C11.2014 19.361 11.7954 19.579 12.0273 20.0801C12.259 20.5812 12.0409 21.1753 11.54 21.4072C10.4887 21.8933 9.31844 22.0653 8.17184 21.9014C7.02531 21.7374 5.95098 21.2446 5.07809 20.4834C4.20525 19.7222 3.57133 18.7248 3.25289 17.6113C2.93453 16.4978 2.94469 15.3156 3.28317 14.208L3.31832 14.1113ZM7.41793 4.18652C7.72573 3.96616 8.13783 3.93636 8.47848 4.12207L13.9785 7.12207C14.2255 7.25681 14.4049 7.48935 14.4716 7.7627C14.5383 8.03607 14.4863 8.32524 14.3291 8.55859L12.54 11.2109C12.6709 11.3075 12.7986 11.4091 12.9218 11.5166C13.0711 11.6468 13.2127 11.7844 13.3476 11.9277L18.8359 11.0137C19.1503 10.9614 19.4712 11.0624 19.6992 11.2852C19.9269 11.508 20.0353 11.8262 19.9902 12.1416L18.9902 19.1416C18.912 19.6883 18.4051 20.0683 17.8584 19.9902C17.3116 19.9121 16.9316 19.4051 17.0097 18.8584L17.8164 13.21L14.5273 13.7588C14.6116 13.964 14.6856 14.174 14.747 14.3887C15.0654 15.5023 15.0543 16.6844 14.7158 17.792C14.5543 18.3201 13.9959 18.6174 13.4677 18.4561C12.9397 18.2946 12.6424 17.7361 12.8037 17.208C13.0294 16.4696 13.0364 15.6809 12.8242 14.9385C12.6119 14.1962 12.1893 13.5309 11.6074 13.0234C11.0255 12.5161 10.3091 12.1885 9.54488 12.0791C8.78061 11.9698 8.00056 12.0833 7.29977 12.4072C6.7986 12.639 6.20452 12.421 5.97262 11.9199C5.74089 11.4188 5.9589 10.8247 6.45992 10.5928C7.51125 10.1067 8.68148 9.93466 9.82809 10.0986C10.1383 10.143 10.4431 10.2124 10.7402 10.3037L12.0566 8.35156L8.1777 6.23535L5.70699 8.70703C5.31649 9.09754 4.68346 9.0975 4.29293 8.70703C3.90241 8.31651 3.90241 7.68349 4.29293 7.29297L7.29293 4.29297L7.41793 4.18652ZM14 4C14 2.89543 14.8954 2 16 2C17.1045 2.00006 18 2.89547 18 4C18 5.10453 17.1045 5.99994 16 6C14.8954 6 14 5.10457 14 4Z", fill: "currenColor" }) }));
+};
+export default AccessibilityIcon;

package/dist/components/atoms/Icon/icons/ClockIcon.js

@@ -20,6 +20,6 @@ var ClockIcon = function (_a) {
     var sizeClasses = getSizeClasses();
     var colorClass = color ? "text-".concat(color) : 'text-current';
     var classes = "".concat(sizeClasses, " ").concat(colorClass, " ").concat(className);
-    return (_jsxs("svg", { className: classes, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M7.63187 4.00006C7.98111 4.00006 8.26373 4.2723 8.26373 4.60873V8.51808L10.6838 9.86382C10.9861 10.032 11.0898 10.4041 10.9152 10.6954C10.7405 10.9867 10.3543 11.0865 10.0519 10.9183L7.31593 9.39661C7.12032 9.28783 7 9.08691 7 8.86937V4.60867C7 4.27224 7.28262 4.00006 7.63187 4.00006Z", fill: "white" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 2C11.3136 2 14 4.6864 14 8C14 11.3136 11.3136 14 8 14C4.6864 14 2 11.3136 2 8C2 4.6864 4.6864 2 8 2ZM8 3.06667C5.27547 3.06667 3.06667 5.27547 3.06667 8C3.06667 10.7245 5.27547 12.9333 8 12.9333C10.7245 12.9333 12.9333 10.7245 12.9333 8C12.9333 5.27547 10.7245 3.06667 8 3.06667Z", fill: "white" })] }));
+    return (_jsxs("svg", { className: classes, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M7.63187 4.00006C7.98111 4.00006 8.26373 4.2723 8.26373 4.60873V8.51808L10.6838 9.86382C10.9861 10.032 11.0898 10.4041 10.9152 10.6954C10.7405 10.9867 10.3543 11.0865 10.0519 10.9183L7.31593 9.39661C7.12032 9.28783 7 9.08691 7 8.86937V4.60867C7 4.27224 7.28262 4.00006 7.63187 4.00006Z", fill: "currentColor" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 2C11.3136 2 14 4.6864 14 8C14 11.3136 11.3136 14 8 14C4.6864 14 2 11.3136 2 8C2 4.6864 4.6864 2 8 2ZM8 3.06667C5.27547 3.06667 3.06667 5.27547 3.06667 8C3.06667 10.7245 5.27547 12.9333 8 12.9333C10.7245 12.9333 12.9333 10.7245 12.9333 8C12.9333 5.27547 10.7245 3.06667 8 3.06667Z", fill: "currentColor" })] }));
 };
 export default ClockIcon;

package/dist/components/atoms/Icon/icons/DocumentIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface DocumentIconProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    color?: string;
+}
+declare const DocumentIcon: React.FC<DocumentIconProps>;
+export default DocumentIcon;

package/dist/components/atoms/Icon/icons/DocumentIcon.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var DocumentIcon = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, color = _a.color;
+    var getSizeClasses = function () {
+        switch (size) {
+            case 'xs':
+                return 'w-3 h-3';
+            case 'sm':
+                return 'w-4 h-4';
+            case 'md':
+                return 'w-5 h-5';
+            case 'lg':
+                return 'w-6 h-6';
+            case 'xl':
+                return 'w-8 h-8';
+            default:
+                return 'w-5 h-5';
+        }
+    };
+    var sizeClasses = getSizeClasses();
+    var colorClass = color ? "text-".concat(color) : 'text-current';
+    var classes = "".concat(sizeClasses, " ").concat(colorClass, " ").concat(className);
+    return (_jsx("svg", { className: classes, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2 13.3333V2.66663C2 2.13619 2.21086 1.62764 2.58594 1.25256C2.96101 0.877491 3.46957 0.666626 4 0.666626H10L10.0658 0.669881C10.2184 0.685008 10.3619 0.75251 10.4714 0.861938L13.8047 4.19527C13.9297 4.3203 14 4.48981 14 4.66663V13.3333C14 13.8637 13.7891 14.3723 13.4141 14.7474C13.039 15.1224 12.5304 15.3333 12 15.3333H4C3.46957 15.3333 2.96101 15.1224 2.58594 14.7474C2.21086 14.3723 2 13.8637 2 13.3333ZM10.6667 10.6666C11.0349 10.6666 11.3333 10.9651 11.3333 11.3333C11.3333 11.7015 11.0349 12 10.6667 12H5.33333C4.96514 12 4.66667 11.7015 4.66667 11.3333C4.66667 10.9651 4.96514 10.6666 5.33333 10.6666H10.6667ZM10.6667 7.99996C11.0349 7.99996 11.3333 8.29844 11.3333 8.66663C11.3333 9.03482 11.0349 9.33329 10.6667 9.33329H5.33333C4.96514 9.33329 4.66667 9.03482 4.66667 8.66663C4.66667 8.29844 4.96514 7.99996 5.33333 7.99996H10.6667ZM6.66667 5.33329C7.03486 5.33329 7.33333 5.63177 7.33333 5.99996C7.33333 6.36815 7.03486 6.66663 6.66667 6.66663H5.33333C4.96514 6.66663 4.66667 6.36815 4.66667 5.99996C4.66667 5.63177 4.96514 5.33329 5.33333 5.33329H6.66667ZM10 3.99996C10 4.17677 10.0703 4.34629 10.1953 4.47131C10.3203 4.59634 10.4899 4.66663 10.6667 4.66663H12.3906L10 2.276V3.99996ZM3.33333 13.3333C3.33333 13.5101 3.40362 13.6796 3.52865 13.8046C3.65367 13.9297 3.82319 14 4 14H12C12.1768 14 12.3463 13.9297 12.4714 13.8046C12.5964 13.6796 12.6667 13.5101 12.6667 13.3333V5.99996H10.6667C10.1362 5.99996 9.62768 5.78909 9.2526 5.41402C8.87753 5.03895 8.66667 4.53039 8.66667 3.99996V1.99996H4C3.82319 1.99996 3.65367 2.07025 3.52865 2.19527C3.40362 2.3203 3.33333 2.48981 3.33333 2.66663V13.3333Z", fill: "currentColor" }) }));
+};
+export default DocumentIcon;

package/dist/components/atoms/Icon/icons/registry.d.ts

@@ -34,6 +34,7 @@ export declare const ICONS: {
     readonly departure: IconComponent;
     readonly 'map-pin': IconComponent;
     readonly delete: IconComponent;
+    readonly document: IconComponent;
     readonly eye: IconComponent;
     readonly info: IconComponent;
     readonly 'check-circle': IconComponent;
@@ -57,6 +58,7 @@ export declare const ICONS: {
     readonly calendar2: IconComponent;
     readonly 'more-vertical': IconComponent;
     readonly accom: IconComponent;
+    readonly accessibility: IconComponent;
     readonly night: IconComponent;
     readonly utensils: IconComponent;
     readonly micro: IconComponent;

package/dist/components/atoms/Icon/icons/registry.js

@@ -10,6 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import AccessibilityIcon from './AccessibilityIcon';
 import AccomIcon from './AccomIcon';
 import AirIcon from './AirIcon';
 import ArrivalIcon from './ArrivalIcon';
@@ -36,6 +37,7 @@ import Close from './Close';
 import CloseCircleIcon from './CloseCircleIcon';
 import DeleteIcon from './DeleteIcon';
 import DepartureIcon from './DepartureIcon';
+import DocumentIcon from './DocumentIcon';
 import EyeIcon from './EyeIcon';
 import FacebookIcon from './FacebookIcon';
 import HomeIcon from './HomeIcon';
@@ -106,6 +108,7 @@ export var ICONS = {
     departure: DepartureIcon,
     'map-pin': MapPinIcon,
     delete: DeleteIcon,
+    document: DocumentIcon,
     eye: EyeIcon,
     info: InfoIcon,
     'check-circle': CheckCircleIcon,
@@ -129,6 +132,7 @@ export var ICONS = {
     calendar2: Calendar2Icon,
     'more-vertical': MoreVerticalIcon,
     accom: AccomIcon,
+    accessibility: AccessibilityIcon,
     night: NightIcon,
     utensils: UtensilsIcon,
     micro: MicroIcon,

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import '../../../styles/components/molecule/accomodation-docket.css';
-import { AccomodationDocket as AccomodationDocketType } from '../../../types/docket/services.types';
+import { AccommodationService } from '../../../types/docket/services.types';
 export interface AccomodationDocketProps {
-    data: AccomodationDocketType;
+    data: AccommodationService;
     /** Remove mode - replaces price chip with remove button */
     removeMode?: boolean;
     /** Handler for remove button click */

package/dist/components/molecules/AccomodationDocket/AccomodationDocket.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { differenceInDays } from 'date-fns';
 import React from 'react';
 import '../../../styles/components/molecule/accomodation-docket.css';
@@ -7,6 +7,7 @@ import Chip from '../../atoms/Chip/Chip';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
 import { DateDisplay } from '../DateDisplay/DateDisplay';
+import { PaxDisplayDocket } from '../PaxDisplayDocket/PaxDisplayDocket';
 import TextWithIcon from '../TextWithIcon/TextWithIcon';
 var clientTypeMap = {
     standard: 'Standard',
@@ -16,44 +17,18 @@ var clientTypeMap = {
 };
 export var AccomodationDocket = function (_a) {
     var data = _a.data, _b = _a.removeMode, removeMode = _b === void 0 ? false : _b, onRemove = _a.onRemove;
-    var HotelName = data.HotelName, TitleDescription = data.TitleDescription, Total = data.Total, Currency = data.Currency, Dates = data.Dates, Rooms = data.Rooms;
-    var calculateNights = function (dates) {
-        if (dates && dates.length >= 2) {
-            return differenceInDays(new Date(dates[1]), new Date(dates[0]));
+    var HotelName = data.HotelName, Total = data.Total, Currency = data.Currency, Rooms = data.Rooms;
+    var calculateNights = function (checkIn, checkOut) {
+        if (checkIn && checkOut) {
+            return differenceInDays(new Date(checkOut), new Date(checkIn));
         }
         return 0;
     };
-    var formatChildrenInfo = function (room) {
-        if (!room.ChildCount || room.ChildCount === 0) {
-            return null;
-        }
-        var childrenInfo = [];
-        var paxAges = room.paxAge || [];
-        // Group children by age
-        var childGroups = [];
-        if (paxAges.length > 0) {
-            // Count children by age
-            var ageCounts_1 = {};
-            paxAges.forEach(function (age) {
-                var ageNum = typeof age === 'number' ? age : parseInt(age, 10);
-                if (!isNaN(ageNum)) {
-                    ageCounts_1[ageNum] = (ageCounts_1[ageNum] || 0) + 1;
-                }
-            });
-            Object.entries(ageCounts_1).forEach(function (_a) {
-                var age = _a[0], count = _a[1];
-                childGroups.push({ count: count, age: parseInt(age, 10) });
-            });
-        }
-        else {
-            // If no age info, just show total count
-            childGroups.push({ count: room.ChildCount, age: 0 });
-        }
-        return (_jsx("div", { className: "accomodation-docket__children", children: childGroups.map(function (group, index) { return (_jsxs(React.Fragment, { children: [index > 0 && _jsx("div", { className: "accomodation-docket__divider-vertical" }), _jsxs("span", { className: "accomodation-docket__child-info", children: [_jsxs(Text, { size: "sm", variant: "medium", color: "default", children: [group.count, " Child", group.count > 1 ? 'ren' : ''] }), group.age > 0 ? (_jsxs(Text, { size: "sm", variant: "medium", className: "accomodation-docket__child-age", children: [' ', "(", group.age, " y.o)"] })) : null] })] }, "child-".concat(index))); }) }));
-    };
     var renderRoomDetails = function (room, index) {
-        var isRoomEmpty = room.isEmpty || !room.Dates || room.Dates.length === 0;
-        return (_jsxs("div", { className: "accomodation-docket__room", children: [_jsx("div", { className: "accomodation-docket__room-header", children: _jsxs(TextWithIcon, { icon: "accom", textVariant: "bold", textSize: "sm", color: "subtle", children: ["Room ", index + 1] }) }), isRoomEmpty ? (_jsx("div", { className: "accomodation-docket__room-empty", children: _jsx(Text, { variant: "bold", size: "sm", color: "state-error", children: "Please select your second room" }) })) : (_jsxs("div", { className: "accomodation-docket__room-details", children: [_jsxs("div", { className: "accomodation-docket__date-section", children: [room.Dates && room.Dates.length >= 2 && (_jsx(DateDisplay, { dates: room.Dates, calendarSize: "sm", arrowSize: "sm", textSize: "sm", colorMode: "green" })), room.Dates && room.Dates.length >= 2 && (_jsxs(TextWithIcon, { icon: "night", textSize: "sm", color: "subtle", children: [calculateNights(room.Dates), " nights"] }))] }), _jsxs("div", { className: "accomodation-docket__client-info", children: [room.ClientType && (_jsxs("div", { className: "accomodation-docket__client-type", children: [_jsxs(Text, { variant: "bold", size: "sm", color: "subtle", children: ["Client type:", ' '] }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", children: clientTypeMap[room.ClientType.toLowerCase()] || room.ClientType })] })), _jsxs("div", { className: "accomodation-docket__guests", children: [room.AdultCount && room.AdultCount > 0 && (_jsxs(TextWithIcon, { icon: "user", textSize: "sm", color: "subtle", children: [room.AdultCount, " Adult", room.AdultCount > 1 ? 's' : ''] })), room.ChildCount && room.ChildCount > 0 ? (_jsxs("div", { className: "accomodation-docket__children-wrapper", children: [_jsx(Icon, { name: "user", size: "sm", color: "var(--color-text-subtle, #303642)" }), formatChildrenInfo(room)] })) : null] })] }), _jsxs("div", { className: "accomodation-docket__room-info", children: [room.RoomName && (_jsx(TextWithIcon, { icon: "accom", textSize: "sm", color: "subtle", textLeading: "none", children: room.RoomName })), room.MealPlan && (_jsxs("div", { className: "accomodation-docket__meal-plan", children: [_jsxs("div", { className: "accomodation-docket__meal-plan-label", children: [_jsx(TextWithIcon, { icon: "utensils", textSize: "sm", color: "subtle", textLeading: "none", children: "Meal-Plan" }), _jsx("div", { className: "accomodation-docket__divider-vertical" })] }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: room.MealPlan })] }))] })] }))] }, "room-".concat(index)));
+        var isRoomEmpty = room.IsEmpty || !room.CheckInDate || !room.CheckOutDate;
+        return (_jsxs("div", { className: "accomodation-docket__room", children: [Rooms.length > 1 && (_jsx("div", { className: "accomodation-docket__room-header", children: _jsxs(TextWithIcon, { icon: "accom", textVariant: "bold", textSize: "sm", color: "subtle", children: ["Room ", index + 1] }) })), isRoomEmpty ? (_jsx("div", { className: "accomodation-docket__room-empty", children: _jsx(Text, { variant: "bold", size: "sm", color: "state-error", children: "Please select your second room" }) })) : (_jsxs("div", { className: "accomodation-docket__room-details", children: [_jsxs("div", { className: "accomodation-docket__date-section", children: [room.CheckInDate && room.CheckOutDate && (_jsx(DateDisplay, { dates: [room.CheckInDate, room.CheckOutDate], calendarSize: "sm", arrowSize: "sm", textSize: "sm", colorMode: "green" })), room.CheckInDate && room.CheckOutDate && (_jsxs(TextWithIcon, { icon: "night", textSize: "sm", color: "subtle", children: [calculateNights(room.CheckInDate, room.CheckOutDate), " nights"] }))] }), _jsxs("div", { className: "accomodation-docket__client-info", children: [room.ClientCategory && (_jsxs("div", { className: "accomodation-docket__client-type", children: [_jsxs(Text, { variant: "bold", size: "sm", color: "subtle", children: ["Client type:", ' '] }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", children: clientTypeMap[room.ClientCategory.toLowerCase()] ||
+                                                room.ClientCategory })] })), _jsx("div", { className: "accomodation-docket__guests", children: _jsx(PaxDisplayDocket, { AdultPax: room.AdultPax, TeenPax: room.TeenPax, ChildPax: room.ChildPax, InfantPax: room.InfantPax, ChildAge: room.ChildAge, TeenAge: room.TeenAge, InfantAge: room.InfantAge, showAll: true, textSize: "sm", color: "subtle" }) })] }), _jsxs("div", { className: "accomodation-docket__room-info", children: [room.RoomName && (_jsx(TextWithIcon, { icon: "accom", textSize: "sm", color: "subtle", textLeading: "none", children: room.RoomName })), room.MealPlan && (_jsxs("div", { className: "accomodation-docket__meal-plan", children: [_jsxs("div", { className: "accomodation-docket__meal-plan-label", children: [_jsx(TextWithIcon, { icon: "utensils", textSize: "sm", color: "subtle", textLeading: "none", children: "Meal-Plan" }), _jsx("div", { className: "accomodation-docket__divider-vertical" })] }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: room.MealPlan })] }))] })] }))] }, "room-".concat(index)));
     };
-    return (_jsxs("div", { className: "accomodation-docket", children: [_jsxs("div", { className: "accomodation-docket__header", children: [_jsxs("div", { className: "accomodation-docket__title-section", children: [_jsx("div", { className: "accomodation-docket__title-bar" }), _jsx(Icon, { name: "accom", size: "sm" }), _jsx(Text, { variant: "bold", size: "sm", color: "accent", children: "Accommodation" })] }), removeMode ? (_jsx(Button, { variant: "destructive", size: "sm", leadingIcon: "close", onClick: onRemove, className: "accomodation-docket__remove-button", children: "Remove" })) : (Total && Currency && (_jsxs(Chip, { type: "filled", color: "accent", size: "sm", children: [Currency, " ", Total] })))] }), TitleDescription && (_jsx("div", { className: "accomodation-docket__hotel-name", children: _jsx(Text, { variant: "bold", size: "base", color: "default", children: TitleDescription.split('\n').map(function (line, index) { return (_jsxs(React.Fragment, { children: [line, index < TitleDescription.split('\n').length - 1 && _jsx("br", {})] }, "line-".concat(index))); }) }) })), _jsx("div", { className: "accomodation-docket__rooms", children: Rooms.map(function (room, index) { return renderRoomDetails(room, index); }) })] }));
+    return (_jsxs("div", { className: "accomodation-docket", children: [_jsxs("div", { className: "accomodation-docket__header", children: [_jsxs("div", { className: "accomodation-docket__title-section", children: [_jsx("div", { className: "accomodation-docket__title-bar" }), _jsx(Icon, { name: "accom", size: "sm" }), _jsx(Text, { variant: "bold", size: "sm", color: "accent", children: "Accommodation" })] }), removeMode ? (_jsx(Button, { variant: "destructive", size: "sm", onClick: onRemove, className: "docket__remove-button", children: "Remove" })) : (Total &&
+                        Currency && (_jsxs(Chip, { type: "filled", color: "accent", size: "sm", children: [Currency, " ", Total] })))] }), HotelName && (_jsx("div", { className: "accomodation-docket__hotel-name", children: _jsx(Text, { variant: "bold", size: "base", color: "default", children: HotelName.split('\n').map(function (line, index) { return (_jsxs(React.Fragment, { children: [line, index < HotelName.split('\n').length - 1 && _jsx("br", {})] }, "line-".concat(index))); }) }) })), _jsx("div", { className: "accomodation-docket__rooms", children: Rooms.map(function (room, index) { return renderRoomDetails(room, index); }) })] }));
 };

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

@@ -2,10 +2,14 @@ import { ReactNode } from 'react';
 import { IconName } from '../../atoms/Icon/icons/registry';
 export type AccordionVariant = 'normal' | 'brand';
 export interface AccordionProps {
-    /** Title text displayed in the accordion header */
-    title: string;
+    /** Title text or custom content displayed in the accordion header */
+    title: string | ReactNode;
+    /** Function that renders custom title content with expanded state */
+    renderTitle?: (isExpanded: boolean) => ReactNode;
     /** Content to be displayed when accordion is expanded */
     children: ReactNode;
+    /** Footer text or custom content displayed at the bottom of the accordion body */
+    footer?: string | ReactNode;
     /** Whether the accordion is expanded by default */
     defaultExpanded?: boolean;
     /** Controlled expanded state */
@@ -20,6 +24,8 @@ export interface AccordionProps {
     variant?: AccordionVariant;
     /** Additional CSS classes */
     className?: string;
+    /** Additional CSS classes applied only when expanded */
+    classNameExpanded?: string;
     /** ID for accessibility */
     id?: string;
 }
@@ -36,6 +42,13 @@ export interface AccordionProps {
  * <Accordion title="With leading icon" leadingIcon="info">
  *   Content with a leading icon
  * </Accordion>
+ *
+ * @example
+ * <Accordion renderTitle={(isExpanded) => (
+ *   <div>{isExpanded ? 'Expanded' : 'Collapsed'}</div>
+ * )}>
+ *   Content with dynamic title based on state
+ * </Accordion>
  */
 declare function Accordion(props: AccordionProps): import("react/jsx-runtime").JSX.Element;
 export default Accordion;

package/dist/components/molecules/Accordion/Accordion.js

@@ -14,15 +14,22 @@ import Icon from '../../atoms/Icon/Icon';
  * <Accordion title="With leading icon" leadingIcon="info">
  *   Content with a leading icon
  * </Accordion>
+ *
+ * @example
+ * <Accordion renderTitle={(isExpanded) => (
+ *   <div>{isExpanded ? 'Expanded' : 'Collapsed'}</div>
+ * )}>
+ *   Content with dynamic title based on state
+ * </Accordion>
  */
 function Accordion(props) {
-    var title = props.title, children = props.children, _a = props.defaultExpanded, defaultExpanded = _a === void 0 ? false : _a, controlledExpanded = props.expanded, onExpandedChange = props.onExpandedChange, leadingIcon = props.leadingIcon, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.variant, variant = _c === void 0 ? 'normal' : _c, _d = props.className, className = _d === void 0 ? '' : _d, providedId = props.id;
+    var title = props.title, renderTitle = props.renderTitle, children = props.children, footer = props.footer, _a = props.defaultExpanded, defaultExpanded = _a === void 0 ? false : _a, controlledExpanded = props.expanded, onExpandedChange = props.onExpandedChange, leadingIcon = props.leadingIcon, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.variant, variant = _c === void 0 ? 'normal' : _c, _d = props.className, className = _d === void 0 ? '' : _d, _e = props.classNameExpanded, classNameExpanded = _e === void 0 ? '' : _e, providedId = props.id;
     var generatedId = useId();
     var id = providedId || generatedId;
     var headerId = "".concat(id, "-header");
     var contentId = "".concat(id, "-content");
     // Handle controlled vs uncontrolled state
-    var _e = useState(defaultExpanded), internalExpanded = _e[0], setInternalExpanded = _e[1];
+    var _f = useState(defaultExpanded), internalExpanded = _f[0], setInternalExpanded = _f[1];
     var isControlled = controlledExpanded !== undefined;
     var isExpanded = isControlled ? controlledExpanded : internalExpanded;
     var handleToggle = useCallback(function () {
@@ -48,9 +55,10 @@ function Accordion(props) {
         disabled && 'accordion--disabled',
         variant === 'brand' && 'accordion--brand',
         className,
+        isExpanded && classNameExpanded,
     ]
         .filter(Boolean)
         .join(' ');
-    return (_jsxs("div", { className: classNames, id: id, children: [_jsxs("div", { className: "accordion__header", id: headerId, role: "button", tabIndex: disabled ? -1 : 0, "aria-expanded": isExpanded, "aria-controls": contentId, "aria-disabled": disabled, onClick: handleToggle, onKeyDown: handleKeyDown, children: [_jsxs("div", { className: "accordion__title", children: [leadingIcon && (_jsx("div", { className: "accordion__leading-icon", children: _jsx(Icon, { name: leadingIcon, size: "lg" }) })), _jsx("span", { className: "accordion__title-text", children: title })] }), _jsx("div", { className: "accordion__chevron", children: _jsx(Icon, { name: 'chevron-up', size: "lg" }) })] }), isExpanded && (_jsx("div", { className: "accordion__body", id: contentId, role: "region", "aria-labelledby": headerId, children: _jsx("div", { className: "accordion__content", children: children }) }))] }));
+    return (_jsxs("div", { className: classNames, id: id, children: [_jsxs("div", { className: "accordion__header", id: headerId, role: "button", tabIndex: disabled ? -1 : 0, "aria-expanded": isExpanded, "aria-controls": contentId, "aria-disabled": disabled, onClick: handleToggle, onKeyDown: handleKeyDown, children: [_jsxs("div", { className: "accordion__title", children: [leadingIcon && (_jsx("div", { className: "accordion__leading-icon", children: _jsx(Icon, { name: leadingIcon, size: "lg" }) })), renderTitle ? (_jsx("div", { className: "accordion__title-content", children: renderTitle(isExpanded) })) : typeof title === 'string' ? (_jsx("span", { className: "accordion__title-text", children: title })) : (_jsx("div", { className: "accordion__title-content", children: title }))] }), _jsx("div", { className: "accordion__chevron", children: _jsx(Icon, { name: 'chevron-down', size: "lg" }) })] }), isExpanded && (_jsxs("div", { className: "accordion__body", id: contentId, role: "region", "aria-labelledby": headerId, children: [_jsx("div", { className: "accordion__content", children: children }), footer && (_jsx("div", { className: "accordion__footer", children: typeof footer === 'string' ? _jsx("p", { children: footer }) : footer }))] }))] }));
 }
 export default Accordion;

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

@@ -13,9 +13,13 @@ export interface ActionDropdownProps {
     /** Data for the action dropdown */
     data: ActionDropdownItem[];
     /** Trigger element */
-    children?: React.ReactNode;
+    children?: React.ReactNode | ((open: boolean) => React.ReactNode);
     /** Maximum width for the action dropdown */
     maxWidth?: string;
+    /** Trigger class name */
+    triggerClassName?: string;
+    /** Popover content class name */
+    popoverContentClassName?: string;
 }
 /**
  * A dropdown component that displays a list of actions triggered by a more icon button. Uses a Popover for the dropdown menu.

package/dist/components/molecules/ActionDropdown/ActionDropdown.js

@@ -15,9 +15,11 @@ import './ActionDropdown.css';
  * @returns
  */
 export function ActionDropdown(props) {
-    var data = props.data, children = props.children, _a = props.maxWidth, maxWidth = _a === void 0 ? '153px' : _a;
-    var _b = useState(false), open = _b[0], setOpen = _b[1];
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { children: children !== null && children !== void 0 ? children : (_jsx("span", { className: "action-dropdown-trigger", children: _jsx(Icon, { name: "more-vertical" }) })) }), _jsx(PopoverContent, { className: "action-dropdown", style: { '--max-width': maxWidth }, align: "end", side: "bottom", avoidCollisions: false, children: data.map(function (item, index) {
+    var data = props.data, children = props.children, _a = props.maxWidth, maxWidth = _a === void 0 ? '153px' : _a, _b = props.triggerClassName, triggerClassName = _b === void 0 ? '' : _b, _c = props.popoverContentClassName, popoverContentClassName = _c === void 0 ? '' : _c;
+    var _d = useState(false), open = _d[0], setOpen = _d[1];
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { className: triggerClassName, children: typeof children === 'function'
+                    ? children(open)
+                    : children !== null && children !== void 0 ? children : (_jsx("span", { className: "action-dropdown-trigger", children: _jsx(Icon, { name: "more-vertical" }) })) }), _jsx(PopoverContent, { className: cn('action-dropdown', popoverContentClassName), style: { '--max-width': maxWidth }, align: "end", side: "bottom", avoidCollisions: false, children: data.map(function (item, index) {
                     var defaultButton = (_jsx("button", { onClick: function () {
                             var _a;
                             if (item.disabled) {

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import '../../../styles/components/molecule/docket-prices.css';
-import { DocketPrice } from '../../../types/docket/docket.types';
+import { Price } from '../../../types/docket/docket.types';
 export interface DocketPricesProps {
     /**
      * Array of price objects to display
      */
-    prices: DocketPrice[];
+    prices: Price[];
     /**
      * Optional label text (defaults to "Total :")
      */

package/dist/components/molecules/DocketPrices/DocketPrices.js

@@ -5,7 +5,7 @@ import { Text } from '../../atoms/Typography/Typography';
  * Formats a number with thousand separators and 2 decimal places
  */
 var formatAmount = function (amount) {
-    return amount.toLocaleString('en-US', {
+    return amount === null || amount === void 0 ? void 0 : amount.toLocaleString('en-US', {
         minimumFractionDigits: 2,
         maximumFractionDigits: 2,
     });
@@ -15,6 +15,7 @@ export var DocketPrices = function (_a) {
     if (!prices || prices.length === 0) {
         return null;
     }
-    return (_jsxs("div", { className: "docket-prices ".concat(className), children: [_jsx(Text, { variant: "bold", size: "sm", color: "default", className: "docket-prices__label", children: label }), _jsx("div", { className: "docket-prices__price-list", children: prices.map(function (price, index) { return (_jsxs(Text, { variant: "bold", size: "sm", color: "default", children: [price.currency, " ", formatAmount(price.amount)] }, index)); }) })] }));
+    console.log('prices', prices);
+    return (_jsxs("div", { className: "docket-prices ".concat(className), children: [_jsx(Text, { variant: "bold", size: "sm", color: "default", className: "docket-prices__label", children: label }), _jsx("div", { className: "docket-prices__price-list", children: prices.map(function (price, index) { return (_jsxs(Text, { variant: "bold", size: "sm", color: "default", children: [price.Currency, " ", formatAmount(price.Amount)] }, index)); }) })] }));
 };
 export default DocketPrices;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import '../../../styles/components/molecule/excursion-docket.css';
-import { ExcursionDocket as ExcursionDocketType } from '../../../types/docket/services.types';
+import { ExcursionService } from '../../../types/docket/services.types';
 export interface ExcursionDocketProps {
-    data: ExcursionDocketType;
+    data: ExcursionService;
     /** Remove mode - replaces price chip with remove button */
     removeMode?: boolean;
     /** Handler for remove button click */

package/dist/components/molecules/ExcursionDocket/ExcursionDocket.js

@@ -5,16 +5,18 @@ import Chip from '../../atoms/Chip/Chip';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
 import { DateDisplay } from '../DateDisplay/DateDisplay';
+import { PaxDisplayDocket } from '../PaxDisplayDocket/PaxDisplayDocket';
 import TextWithIcon from '../TextWithIcon/TextWithIcon';
 export var ExcursionDocket = function (_a) {
     var data = _a.data, _b = _a.removeMode, removeMode = _b === void 0 ? false : _b, onRemove = _a.onRemove;
-    var ExcursionName = data.ExcursionName, ServiceDate = data.ServiceDate, SelectedHotel = data.SelectedHotel, SelectedHotelDetails = data.SelectedHotelDetails, Currency = data.Currency, TotalPrice = data.TotalPrice, AdultCount = data.AdultCount, Duration = data.Duration, MealIncluded = data.MealIncluded, Meal = data.Meal, Accessibility = data.Accessibility, VehicleType = data.VehicleType, VehicleTypeName = data.VehicleTypeName;
+    var ExcursionName = data.ExcursionName, ServiceDate = data.ServiceDate, LocationFrom = data.LocationFrom, Currency = data.Currency, Total = data.Total, Duration = data.Duration, MealIncluded = data.MealIncluded, Accessibility = data.Accessibility, TransferType = data.TransferType;
     var formatPrice = function () {
-        if (!TotalPrice)
+        if (!Total)
             return null;
-        var price = typeof TotalPrice === 'string' ? TotalPrice : TotalPrice.toString();
+        var price = typeof Total === 'string' ? Total : Total.toString();
         return "".concat(Currency, " ").concat(price);
     };
-    return (_jsxs("div", { className: "excursion-docket", children: [_jsxs("div", { className: "excursion-docket__header", children: [_jsxs("div", { className: "excursion-docket__title-section", children: [_jsx("div", { className: "excursion-docket__title-bar" }), _jsx(Icon, { name: "map-pin", size: "sm" }), _jsx(Text, { variant: "bold", size: "sm", color: "accent", children: "Excursion" })] }), removeMode ? (_jsx(Button, { variant: "destructive", size: "sm", leadingIcon: "close", onClick: onRemove, className: "excursion-docket__remove-button", children: "Remove" })) : (TotalPrice && Currency && (_jsx(Chip, { type: "filled", color: "accent", size: "sm", children: formatPrice() })))] }), ExcursionName && (_jsx("div", { className: "excursion-docket__excursion-name", children: _jsx(Text, { variant: "bold", size: "base", color: "default", children: ExcursionName }) })), _jsxs("div", { className: "excursion-docket__details", children: [ServiceDate && (_jsx(DateDisplay, { date: ServiceDate, calendarSize: "sm", textSize: "sm", colorMode: "green" })), SelectedHotel && (_jsxs("div", { className: "excursion-docket__pickup", children: [_jsxs(Text, { variant: "bold", size: "sm", color: "subtle", children: ["Pickup:", ' '] }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", children: SelectedHotel })] })), AdultCount !== undefined && AdultCount > 0 && (_jsxs(TextWithIcon, { icon: "user", textSize: "sm", color: "subtle", children: [AdultCount, " Adult", AdultCount > 1 ? 's' : ''] })), _jsxs("div", { className: "excursion-docket__details-list", children: [Duration && (_jsxs("div", { className: "excursion-docket__detail-item", children: [_jsx("div", { className: "excursion-docket__detail-label", children: _jsx(TextWithIcon, { icon: "clock", textSize: "sm", color: "subtle", textLeading: "none", children: "Duration" }) }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: "|" }), _jsx(Text, { variant: "regular", size: "sm", color: "subtle", leading: "none", children: Duration })] })), (MealIncluded !== undefined || Meal) && (_jsxs("div", { className: "excursion-docket__detail-item", children: [_jsx("div", { className: "excursion-docket__detail-label", children: _jsx(TextWithIcon, { icon: "utensils", textSize: "sm", color: "subtle", textLeading: "none", children: "Meal" }) }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: "|" }), _jsx(Text, { variant: "regular", size: "sm", color: "subtle", leading: "none", children: Meal || (MealIncluded ? 'Included' : 'Not included') })] })), Accessibility && (_jsxs("div", { className: "excursion-docket__detail-item", children: [_jsx("div", { className: "excursion-docket__detail-label", children: _jsx(TextWithIcon, { icon: "stroller", textSize: "sm", color: "subtle", textLeading: "none", children: "Accessibility" }) }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: "|" }), _jsx(Text, { variant: "regular", size: "sm", color: "subtle", leading: "none", children: Accessibility })] })), (VehicleType || VehicleTypeName) && (_jsxs("div", { className: "excursion-docket__detail-item", children: [_jsx("div", { className: "excursion-docket__detail-label", children: _jsx(TextWithIcon, { icon: "car", textSize: "sm", color: "subtle", textLeading: "none", children: "Vehicle" }) }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: "|" }), _jsx(Text, { variant: "regular", size: "sm", color: "subtle", leading: "none", children: VehicleTypeName || VehicleType })] }))] })] })] }));
+    return (_jsxs("div", { className: "excursion-docket", children: [_jsxs("div", { className: "excursion-docket__header", children: [_jsxs("div", { className: "excursion-docket__title-section", children: [_jsx("div", { className: "excursion-docket__title-bar" }), _jsx(Icon, { name: "map-pin", size: "sm" }), _jsx(Text, { variant: "bold", size: "sm", color: "accent", children: "Excursion" })] }), removeMode ? (_jsx(Button, { variant: "destructive", size: "sm", onClick: onRemove, className: "docket__remove-button", children: "Remove" })) : (Total &&
+                        Currency && (_jsx(Chip, { type: "filled", color: "accent", size: "sm", children: formatPrice() })))] }), ExcursionName && (_jsx("div", { className: "excursion-docket__excursion-name", children: _jsx(Text, { variant: "bold", size: "base", color: "default", children: ExcursionName }) })), _jsxs("div", { className: "excursion-docket__details", children: [ServiceDate && (_jsx(DateDisplay, { date: ServiceDate, calendarSize: "sm", textSize: "sm", colorMode: "green" })), LocationFrom && (_jsxs("div", { className: "excursion-docket__pickup", children: [_jsxs(Text, { variant: "bold", size: "sm", color: "subtle", children: ["Pickup:", ' '] }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", children: LocationFrom })] })), _jsx(PaxDisplayDocket, { AdultPax: data.AdultPax, TeenPax: data.TeenPax, ChildPax: data.ChildPax, InfantPax: data.InfantPax, ChildAge: data.ChildAge, TeenAge: data.TeenAge, InfantAge: data.InfantAge, showAll: true, textSize: "sm", color: "subtle" }), _jsxs("div", { className: "excursion-docket__details-list", children: [Duration && (_jsxs("div", { className: "excursion-docket__detail-item", children: [_jsx("div", { className: "excursion-docket__detail-label", children: _jsx(TextWithIcon, { icon: "stopwatch", textSize: "sm", color: "subtle", textLeading: "none", children: "Duration" }) }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: "|" }), _jsx(Text, { variant: "regular", size: "sm", color: "subtle", leading: "none", children: Duration })] })), MealIncluded !== undefined && (_jsxs("div", { className: "excursion-docket__detail-item", children: [_jsx("div", { className: "excursion-docket__detail-label", children: _jsx(TextWithIcon, { icon: "utensils", textSize: "sm", color: "subtle", textLeading: "none", children: "Meal" }) }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: "|" }), _jsx(Text, { variant: "regular", size: "sm", color: "subtle", leading: "none", children: MealIncluded ? 'Included' : 'Not included' })] })), Accessibility && (_jsxs("div", { className: "excursion-docket__detail-item", children: [_jsx("div", { className: "excursion-docket__detail-label", children: _jsx(TextWithIcon, { icon: "accessibility", textSize: "sm", color: "subtle", textLeading: "none", children: "Accessibility" }) }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: "|" }), _jsx(Text, { variant: "regular", size: "sm", color: "subtle", leading: "none", children: Accessibility })] })), TransferType && (_jsxs("div", { className: "excursion-docket__detail-item", children: [_jsx("div", { className: "excursion-docket__detail-label", children: _jsx(TextWithIcon, { icon: "car", textSize: "sm", color: "subtle", textLeading: "none", children: "Vehicle" }) }), _jsx(Text, { variant: "medium", size: "sm", color: "subtle", leading: "none", children: "|" }), _jsx(Text, { variant: "regular", size: "sm", color: "subtle", leading: "none", children: TransferType })] }))] })] })] }));
 };
 export default ExcursionDocket;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import '../../../styles/components/molecule/other-service-docket.css';
-import { OtherServiceDocket as OtherServiceDocketType } from '../../../types/docket/services.types';
+import { OtherService } from '../../../types/docket/services.types';
 export interface OtherServiceDocketProps {
-    data: OtherServiceDocketType;
+    data: OtherService;
     /** Remove mode - replaces price chip with remove button */
     removeMode?: boolean;
     /** Handler for remove button click */

package/dist/components/molecules/OtherServiceDocket/OtherServiceDocket.js

@@ -4,16 +4,18 @@ import Button from '../../atoms/Button/Button';
 import Chip from '../../atoms/Chip/Chip';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
+import { PaxDisplayDocket } from '../PaxDisplayDocket/PaxDisplayDocket';
 import TextWithIcon from '../TextWithIcon/TextWithIcon';
 export var OtherServiceDocket = function (_a) {
     var data = _a.data, _b = _a.removeMode, removeMode = _b === void 0 ? false : _b, onRemove = _a.onRemove;
-    var service_for = data.service_for, Currency = data.Currency, TotalPrice = data.TotalPrice, AdultCount = data.AdultCount;
+    var ServiceFor = data.ServiceFor, Currency = data.Currency, Total = data.Total;
     var formatPrice = function () {
-        if (!TotalPrice)
+        if (!Total)
             return null;
-        var price = typeof TotalPrice === 'string' ? TotalPrice : TotalPrice.toString();
+        var price = typeof Total === 'string' ? Total : Total.toString();
         return "".concat(Currency, " ").concat(price);
     };
-    return (_jsxs("div", { className: "other-service-docket", children: [_jsxs("div", { className: "other-service-docket__header", children: [_jsxs("div", { className: "other-service-docket__title-section", children: [_jsx("div", { className: "other-service-docket__title-bar" }), _jsx(Icon, { name: "more", size: "sm" }), _jsx(Text, { variant: "bold", size: "sm", color: "accent", children: "Other services" })] }), removeMode ? (_jsx(Button, { variant: "destructive", size: "sm", leadingIcon: "close", onClick: onRemove, className: "other-service-docket__remove-button", children: "Remove" })) : (TotalPrice && Currency && (_jsx(Chip, { type: "filled", color: "accent", size: "sm", children: formatPrice() })))] }), _jsxs("div", { className: "other-service-docket__details", children: [_jsx("div", { className: "other-service-docket__service-info", children: service_for && (_jsx(TextWithIcon, { icon: "wallet", textSize: "sm", color: "subtle", children: service_for })) }), AdultCount !== undefined && AdultCount > 0 && (_jsxs(TextWithIcon, { icon: "user", textSize: "sm", color: "subtle", children: [AdultCount, " Adult", AdultCount > 1 ? 's' : ''] }))] })] }));
+    return (_jsxs("div", { className: "other-service-docket", children: [_jsxs("div", { className: "other-service-docket__header", children: [_jsxs("div", { className: "other-service-docket__title-section", children: [_jsx("div", { className: "other-service-docket__title-bar" }), _jsx(Icon, { name: "more", size: "sm" }), _jsx(Text, { variant: "bold", size: "sm", color: "accent", children: "Other services" })] }), removeMode ? (_jsx(Button, { variant: "destructive", size: "sm", leadingIcon: "close", onClick: onRemove, className: "other-service-docket__remove-button", children: "Remove" })) : (Total &&
+                        Currency && (_jsx(Chip, { type: "filled", color: "accent", size: "sm", children: formatPrice() })))] }), _jsxs("div", { className: "other-service-docket__details", children: [_jsx("div", { className: "other-service-docket__service-info", children: ServiceFor && (_jsx(TextWithIcon, { icon: "wallet", textSize: "sm", color: "subtle", children: ServiceFor })) }), _jsx(PaxDisplayDocket, { AdultPax: data.AdultPax, TeenPax: data.TeenPax, ChildPax: data.ChildPax, InfantPax: data.InfantPax, ChildAge: data.ChildAge, TeenAge: data.TeenAge, InfantAge: data.InfantAge, showAll: true, textSize: "sm", color: "subtle" })] })] }));
 };
 export default OtherServiceDocket;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import '../../../styles/components/molecule/pax-display-docket.css';
+import { TextColor } from '../../atoms/Typography/Typography';
+export interface PaxDisplayDocketProps {
+    /** Number of adults */
+    AdultPax?: number;
+    /** Number of teens */
+    TeenPax?: number;
+    /** Number of children */
+    ChildPax?: number;
+    /** Number of infants */
+    InfantPax?: number;
+    /** Ages of children */
+    ChildAge?: number[];
+    /** Ages of teens */
+    TeenAge?: number[];
+    /** Ages of infants */
+    InfantAge?: number[];
+    /** Show all passenger types or only adults */
+    showAll?: boolean;
+    /** Text size */
+    textSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Text color */
+    color?: TextColor;
+}
+export declare const PaxDisplayDocket: React.FC<PaxDisplayDocketProps>;
+export default PaxDisplayDocket;

package/dist/components/molecules/PaxDisplayDocket/PaxDisplayDocket.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import '../../../styles/components/molecule/pax-display-docket.css';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+/**
+ * Generic function to format passenger information with age groups
+ * @param count - Total number of passengers
+ * @param ages - Array of ages
+ * @param label - Singular label (e.g., 'Child', 'Teen', 'Infant')
+ * @param pluralLabel - Plural label (e.g., 'Children', 'Teens', 'Infants')
+ */
+var formatPassengerInfo = function (count, ages, label, pluralLabel) {
+    if (!count || count === 0) {
+        return null;
+    }
+    // Group passengers by age
+    var passengerGroups = [];
+    if (ages.length > 0) {
+        // Count passengers by age
+        var ageCounts_1 = {};
+        ages.forEach(function (age) {
+            var ageNum = typeof age === 'number' ? age : parseInt(age, 10);
+            if (!isNaN(ageNum)) {
+                ageCounts_1[ageNum] = (ageCounts_1[ageNum] || 0) + 1;
+            }
+        });
+        Object.entries(ageCounts_1).forEach(function (_a) {
+            var age = _a[0], count = _a[1];
+            passengerGroups.push({ count: count, age: parseInt(age, 10) });
+        });
+    }
+    else {
+        // If no age info, just show total count
+        passengerGroups.push({ count: count, age: 0 });
+    }
+    return (_jsx("div", { className: "pax-display-docket__group", children: passengerGroups.map(function (group, index) { return (_jsxs(React.Fragment, { children: [index > 0 && _jsx("div", { className: "pax-display-docket__divider" }), _jsxs("span", { className: "pax-display-docket__info", children: [_jsxs(Text, { size: "sm", variant: "medium", color: "default", children: [group.count, " ", group.count > 1 ? pluralLabel : label] }), group.age > 0 ? (_jsxs(Text, { size: "sm", variant: "medium", className: "pax-display-docket__age", children: [' ', "(", group.age, " y.o)"] })) : null] })] }, "passenger-".concat(index))); }) }));
+};
+export var PaxDisplayDocket = function (_a) {
+    var _b = _a.AdultPax, AdultPax = _b === void 0 ? 0 : _b, _c = _a.TeenPax, TeenPax = _c === void 0 ? 0 : _c, _d = _a.ChildPax, ChildPax = _d === void 0 ? 0 : _d, _e = _a.InfantPax, InfantPax = _e === void 0 ? 0 : _e, _f = _a.ChildAge, ChildAge = _f === void 0 ? [] : _f, _g = _a.TeenAge, TeenAge = _g === void 0 ? [] : _g, _h = _a.InfantAge, InfantAge = _h === void 0 ? [] : _h, _j = _a.showAll, showAll = _j === void 0 ? true : _j, _k = _a.textSize, textSize = _k === void 0 ? 'sm' : _k, _l = _a.color, color = _l === void 0 ? 'subtle' : _l;
+    var hasAdults = AdultPax > 0;
+    var hasTeens = TeenPax > 0;
+    var hasChildren = ChildPax > 0;
+    var hasInfants = InfantPax > 0;
+    // If no passengers at all, return null
+    if (!hasAdults && !hasTeens && !hasChildren && !hasInfants) {
+        return null;
+    }
+    return (_jsxs("div", { className: "pax-display-docket", children: [hasAdults && (_jsxs(TextWithIcon, { icon: "user", textSize: textSize, color: color, children: [AdultPax, " Adult", AdultPax > 1 ? 's' : ''] })), showAll && (_jsxs(_Fragment, { children: [hasTeens && (_jsxs("div", { className: "pax-display-docket__wrapper", children: [_jsx(Icon, { name: "user", size: textSize, color: "var(--color-text-subtle, #303642)" }), formatPassengerInfo(TeenPax, TeenAge, 'Teen', 'Teens')] })), hasChildren && (_jsxs("div", { className: "pax-display-docket__wrapper", children: [_jsx(Icon, { name: "user", size: textSize, color: "var(--color-text-subtle, #303642)" }), formatPassengerInfo(ChildPax, ChildAge, 'Child', 'Children')] })), hasInfants && (_jsxs("div", { className: "pax-display-docket__wrapper", children: [_jsx(Icon, { name: "user", size: textSize, color: "var(--color-text-subtle, #303642)" }), formatPassengerInfo(InfantPax, InfantAge, 'Infant', 'Infants')] }))] }))] }));
+};
+export default PaxDisplayDocket;

package/dist/components/molecules/PaxDisplayDocket/index.d.ts

@@ -0,0 +1,2 @@
+export { PaxDisplayDocket } from './PaxDisplayDocket';
+export type { PaxDisplayDocketProps } from './PaxDisplayDocket';

package/dist/components/molecules/PaxDisplayDocket/index.js

@@ -0,0 +1 @@
+export { PaxDisplayDocket } from './PaxDisplayDocket';

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import '../../../styles/components/molecule/transfer-docket.css';
-import { TransferDocket as TransferDocketType } from '../../../types/docket/services.types';
+import { TransferService } from '../../../types/docket/services.types';
 export interface TransferDocketProps {
-    data: TransferDocketType;
+    data: TransferService;
     /** Remove mode - replaces price display with remove button */
     removeMode?: boolean;
     /** Handler for remove button click */