mautourco-components 0.2.27 → 0.2.29

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

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

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

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+var BadgeAlertIcon = 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", __assign({ className: classes, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M20.9951 11.9999C20.9951 11.4964 20.8687 11.0011 20.627 10.5594C20.3851 10.1177 20.0356 9.74382 19.6113 9.47253C19.2569 9.24585 19.0826 8.82151 19.1748 8.41101C19.2858 7.91752 19.2696 7.40367 19.1289 6.91785C18.9881 6.43206 18.7267 5.98941 18.3691 5.63171C18.0114 5.27399 17.5689 5.01184 17.083 4.87097C16.5971 4.73014 16.0834 4.71511 15.5898 4.82605C15.1792 4.91837 14.7541 4.74315 14.5273 4.38855C14.2561 3.96443 13.883 3.61473 13.4414 3.37292C12.9997 3.13107 12.5036 3.00476 12 3.00476C11.4966 3.00479 11.0011 3.13121 10.5596 3.37292C10.1179 3.61477 9.74393 3.96431 9.47266 4.38855C9.24605 4.74296 8.82161 4.91808 8.41113 4.82605C7.91838 4.71561 7.40595 4.7315 6.9209 4.87195C6.43573 5.01246 5.99328 5.27297 5.63574 5.62976C5.27833 5.98651 5.01649 6.4282 4.875 6.91296C4.73362 7.39766 4.71677 7.9103 4.82617 8.4032C4.91754 8.81478 4.74102 9.23926 4.38477 9.46472C3.95737 9.73521 3.60534 10.1096 3.36133 10.5526C3.11732 10.9958 2.98927 11.494 2.98926 11.9999C2.98926 12.5058 3.1173 13.0039 3.36133 13.4471C3.60533 13.8902 3.95736 14.2645 4.38477 14.535C4.741 14.7605 4.9175 15.185 4.82617 15.5966C4.7167 16.0897 4.73347 16.6029 4.875 17.0878C5.0165 17.5724 5.27844 18.0133 5.63574 18.37C5.99328 18.7268 6.43573 18.9883 6.9209 19.1288C7.40583 19.2692 7.9185 19.2851 8.41113 19.1747L8.56543 19.1522C8.9255 19.1287 9.27556 19.3019 9.47363 19.6132C9.74456 20.0391 10.1191 20.3898 10.5615 20.6327C11.0039 20.8755 11.5003 21.0028 12.0049 21.0028C12.5097 21.0028 13.0068 20.8756 13.4492 20.6327C13.8916 20.3898 14.2652 20.039 14.5361 19.6132C14.7619 19.2582 15.186 19.0826 15.5967 19.1737C16.0898 19.2832 16.603 19.2664 17.0879 19.1249C17.5727 18.9833 18.0144 18.7216 18.3711 18.3641C18.7277 18.0067 18.9884 17.5649 19.1289 17.08C19.2694 16.5948 19.2853 16.0816 19.1748 15.5887C19.0828 15.1783 19.2569 14.7538 19.6113 14.5272C20.0356 14.2559 20.3851 13.882 20.627 13.4403C20.8687 12.9987 20.9951 12.5033 20.9951 11.9999ZM12.0098 14.9999C12.562 14.9999 13.0097 15.4476 13.0098 15.9999C13.0098 16.5522 12.5621 16.9999 12.0098 16.9999H12C11.4478 16.9998 11 16.5521 11 15.9999C11.0001 15.4477 11.4478 15 12 14.9999H12.0098ZM11 11.9999V7.99988C11.0001 7.4477 11.4478 6.99998 12 6.99988C12.5523 6.99988 12.9999 7.44764 13 7.99988V11.9999C13 12.5522 12.5523 12.9999 12 12.9999C11.4478 12.9998 11 12.5521 11 11.9999ZM22.9951 11.9999C22.9951 12.8392 22.784 13.6651 22.3809 14.4012C22.0854 14.9408 21.693 15.4182 21.2266 15.8134C21.2796 16.4247 21.2215 17.0425 21.0498 17.6356C20.8156 18.4442 20.3808 19.1813 19.7861 19.7772C19.1916 20.3729 18.4563 20.8089 17.6484 21.0448C17.0557 21.2178 16.4377 21.2771 15.8262 21.2255C15.4308 21.6943 14.952 22.0886 14.4111 22.3856C13.6738 22.7904 12.8461 23.0028 12.0049 23.0028C11.1637 23.0028 10.336 22.7905 9.59863 22.3856C9.0581 22.0888 8.57976 21.6949 8.18457 21.2264C7.57382 21.2791 6.95675 21.2213 6.36426 21.0497C5.55569 20.8155 4.81951 20.3806 4.22363 19.786C3.62782 19.1914 3.19098 18.4563 2.95508 17.6483C2.78217 17.0559 2.72194 16.4381 2.77344 15.827C2.30313 15.4318 1.90751 14.9525 1.60938 14.411C1.20278 13.6724 0.989258 12.843 0.989258 11.9999C0.989274 11.1567 1.20274 10.3274 1.60938 9.58875C1.90763 9.04703 2.30287 8.56704 2.77344 8.17175C2.72212 7.56114 2.78236 6.94431 2.95508 6.35242C3.19096 5.54429 3.62773 4.8084 4.22363 4.21375C4.81949 3.6192 5.55574 3.18423 6.36426 2.95007C6.95732 2.77833 7.57519 2.71939 8.18652 2.77234C8.5816 2.30622 9.05938 1.9143 9.59863 1.61902C10.3348 1.21596 11.1608 1.00479 12 1.00476C12.8393 1.00476 13.6652 1.21598 14.4014 1.61902C14.9406 1.91427 15.4184 2.30626 15.8135 2.77234C16.4261 2.71894 17.0453 2.7778 17.6396 2.95007C18.4495 3.18481 19.187 3.62049 19.7832 4.21667C20.3794 4.81285 20.815 5.55046 21.0498 6.36023C21.2221 6.9545 21.2799 7.57382 21.2266 8.1864C21.693 8.58158 22.0854 9.05901 22.3809 9.59851C22.7839 10.3347 22.9951 11.1606 22.9951 11.9999Z", fill: "currentColor" }) })));
+};
+export default BadgeAlertIcon;

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

@@ -29,6 +29,7 @@ export declare const ICONS: {
     readonly 'plane-takeoff-outline': IconComponent;
     readonly 'plane-landing-outline': IconComponent;
     readonly 'building-2-outline': IconComponent;
+    readonly 'badge-alert': IconComponent;
     readonly arrival: IconComponent;
     readonly departure: IconComponent;
     readonly 'map-pin': IconComponent;

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

@@ -15,6 +15,7 @@ import AirIcon from './AirIcon';
 import ArrivalIcon from './ArrivalIcon';
 import ArrowDownOutlineIcon from './ArrowDownOutlineIcon';
 import ArrowRightOutlineIcon from './ArrowRightOutlineIcon';
+import BadgeAlertIcon from './BadgeAlertIcon';
 import BikeIcon from './BikeIcon';
 import BookingIcon from './BookingIcon';
 import Building2OutlineIcon from './Building2OutlineIcon';
@@ -98,6 +99,7 @@ export var ICONS = {
     'plane-takeoff-outline': PlaneTakeoffOutlineIcon,
     'plane-landing-outline': PlaneLandingOutlineIcon,
     'building-2-outline': Building2OutlineIcon,
+    'badge-alert': BadgeAlertIcon,
     arrival: ArrivalIcon,
     departure: DepartureIcon,
     'map-pin': MapPinIcon,

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

@@ -1,7 +1,11 @@
 import React from 'react';
-import { AccomodationDocket as AccomodationDocketType } from '../../../types/docket/services.types';
 import '../../../styles/components/molecule/accomodation-docket.css';
+import { AccomodationDocket as AccomodationDocketType } from '../../../types/docket/services.types';
 export interface AccomodationDocketProps {
     data: AccomodationDocketType;
+    /** Remove mode - replaces price chip with remove button */
+    removeMode?: boolean;
+    /** Handler for remove button click */
+    onRemove?: () => void;
 }
 export declare const AccomodationDocket: React.FC<AccomodationDocketProps>;

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

@@ -12,12 +12,13 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { differenceInDays } from 'date-fns';
 import React from 'react';
+import '../../../styles/components/molecule/accomodation-docket.css';
+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 { DateDisplay } from '../DateDisplay/DateDisplay';
 import TextWithIcon from '../TextWithIcon/TextWithIcon';
-import '../../../styles/components/molecule/accomodation-docket.css';
 var clientTypeMap = {
     standard: 'Standard',
     honeymooners: 'Honeymooners',
@@ -25,7 +26,7 @@ var clientTypeMap = {
     vvip: 'VVIP',
 };
 export var AccomodationDocket = function (_a) {
-    var data = _a.data;
+    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) {
@@ -65,5 +66,5 @@ export var AccomodationDocket = function (_a) {
         var isRoomEmpty = room.isEmpty || !room.Dates || room.Dates.length === 0;
         return (_jsxs("div", __assign({ className: "accomodation-docket__room" }, { children: [_jsx("div", __assign({ className: "accomodation-docket__room-header" }, { children: _jsxs(TextWithIcon, __assign({ icon: "accom", textVariant: "bold", textSize: "sm", color: "subtle" }, { children: ["Room ", index + 1] })) })), isRoomEmpty ? (_jsx("div", __assign({ className: "accomodation-docket__room-empty" }, { children: _jsx(Text, __assign({ variant: "bold", size: "sm", color: "state-error" }, { children: "Please select your second room" })) }))) : (_jsxs("div", __assign({ className: "accomodation-docket__room-details" }, { children: [_jsxs("div", __assign({ 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, __assign({ icon: "night", textSize: "sm", color: "subtle" }, { children: [calculateNights(room.Dates), " nights"] })))] })), _jsxs("div", __assign({ className: "accomodation-docket__client-info" }, { children: [room.ClientType && (_jsxs("div", __assign({ className: "accomodation-docket__client-type" }, { children: [_jsxs(Text, __assign({ variant: "bold", size: "sm", color: "subtle" }, { children: ["Client type:", ' '] })), _jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle" }, { children: clientTypeMap[room.ClientType.toLowerCase()] || room.ClientType }))] }))), _jsxs("div", __assign({ className: "accomodation-docket__guests" }, { children: [room.AdultCount && room.AdultCount > 0 && (_jsxs(TextWithIcon, __assign({ icon: "user", textSize: "sm", color: "subtle" }, { children: [room.AdultCount, " Adult", room.AdultCount > 1 ? 's' : ''] }))), room.ChildCount && room.ChildCount > 0 ? (_jsxs("div", __assign({ className: "accomodation-docket__children-wrapper" }, { children: [_jsx(Icon, { name: "user", size: "sm", color: "var(--color-text-subtle, #303642)" }), formatChildrenInfo(room)] }))) : null] }))] })), _jsxs("div", __assign({ className: "accomodation-docket__room-info" }, { children: [room.RoomName && (_jsx(TextWithIcon, __assign({ icon: "accom", textSize: "sm", color: "subtle", textLeading: "none" }, { children: room.RoomName }))), room.MealPlan && (_jsxs("div", __assign({ className: "accomodation-docket__meal-plan" }, { children: [_jsxs("div", __assign({ className: "accomodation-docket__meal-plan-label" }, { children: [_jsx(TextWithIcon, __assign({ icon: "utensils", textSize: "sm", color: "subtle", textLeading: "none" }, { children: "Meal-Plan" })), _jsx("div", { className: "accomodation-docket__divider-vertical" })] })), _jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle", leading: "none" }, { children: room.MealPlan }))] })))] }))] })))] }), "room-".concat(index)));
     };
-    return (_jsxs("div", __assign({ className: "accomodation-docket" }, { children: [_jsxs("div", __assign({ className: "accomodation-docket__header" }, { children: [_jsxs("div", __assign({ className: "accomodation-docket__title-section" }, { children: [_jsx("div", { className: "accomodation-docket__title-bar" }), _jsx(Icon, { name: "accom", size: "sm" }), _jsx(Text, __assign({ variant: "bold", size: "sm", color: "accent" }, { children: "Accommodation" }))] })), Total && Currency && (_jsxs(Chip, __assign({ type: "filled", color: "accent", size: "sm" }, { children: [Currency, " ", Total] })))] })), TitleDescription && (_jsx("div", __assign({ className: "accomodation-docket__hotel-name" }, { children: _jsx(Text, __assign({ 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", __assign({ className: "accomodation-docket__rooms" }, { children: Rooms.map(function (room, index) { return renderRoomDetails(room, index); }) }))] })));
+    return (_jsxs("div", __assign({ className: "accomodation-docket" }, { children: [_jsxs("div", __assign({ className: "accomodation-docket__header" }, { children: [_jsxs("div", __assign({ className: "accomodation-docket__title-section" }, { children: [_jsx("div", { className: "accomodation-docket__title-bar" }), _jsx(Icon, { name: "accom", size: "sm" }), _jsx(Text, __assign({ variant: "bold", size: "sm", color: "accent" }, { children: "Accommodation" }))] })), removeMode ? (_jsx(Button, __assign({ variant: "destructive", size: "sm", leadingIcon: "close", onClick: onRemove, className: "accomodation-docket__remove-button" }, { children: "Remove" }))) : (Total && Currency && (_jsxs(Chip, __assign({ type: "filled", color: "accent", size: "sm" }, { children: [Currency, " ", Total] }))))] })), TitleDescription && (_jsx("div", __assign({ className: "accomodation-docket__hotel-name" }, { children: _jsx(Text, __assign({ 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", __assign({ className: "accomodation-docket__rooms" }, { children: Rooms.map(function (room, index) { return renderRoomDetails(room, index); }) }))] })));
 };

package/dist/components/molecules/Calendar/CalendarInput.js

@@ -44,6 +44,7 @@ var CalendarInput = function (_a) {
         setLocalValue(value);
     }, [value]);
     var iconButton = (_jsx("button", __assign({ type: "button", className: "calendar-input__icon-button ".concat(iconBGFull ? ' calendar-input__icon-button--full-bg' : '', " calendar-input__icon-button--").concat(iconPosition), onClick: handleCalendarClick, disabled: disabled, "aria-label": "Open calendar picker", title: "Select date" }, { children: _jsx(Icon, { name: icon, size: "sm", className: "calendar-input__icon" }) })));
-    return (_jsxs("div", __assign({ className: "calendar-input calendar-input--".concat(displayState, " calendar-input--icon-").concat(iconPosition, " ").concat(className).trim(), "data-node-id": "3425:11289", onClick: onClick }, { children: [iconPosition === 'left' && iconButton, _jsxs("div", __assign({ className: "calendar-input__input-wrapper" }, { children: [_jsx("input", { type: "text", className: "calendar-input__field", placeholder: placeholder, value: localValue || placeholder, disabled: disabled, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, readOnly: true, "aria-label": 'Select date' }), iconPosition === 'left' && showChevron && (_jsx("div", __assign({ className: "calendar-input__chevron ".concat(isOpen ? 'calendar-input__chevron--open' : '') }, { children: _jsx(Icon, { name: 'chevron-down', size: "sm" }) })))] })), iconPosition === 'right' && iconButton] })));
+    var isEmpty = !localValue;
+    return (_jsxs("div", __assign({ className: "calendar-input calendar-input--".concat(displayState, " calendar-input--icon-").concat(iconPosition, " ").concat(isEmpty ? 'calendar-input--empty' : '', " ").concat(className).trim(), "data-node-id": "3425:11289", onClick: onClick }, { children: [iconPosition === 'left' && iconButton, _jsxs("div", __assign({ className: "calendar-input__input-wrapper" }, { children: [_jsx("input", { type: "text", className: "calendar-input__field", placeholder: placeholder, value: localValue, disabled: disabled, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, readOnly: true, "aria-label": 'Select date', "data-empty": !localValue }), iconPosition === 'left' && showChevron && (_jsx("div", __assign({ className: "calendar-input__chevron ".concat(isOpen ? 'calendar-input__chevron--open' : '') }, { children: _jsx(Icon, { name: 'chevron-down', size: "sm" }) })))] })), iconPosition === 'right' && iconButton] })));
 };
 export default CalendarInput;

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

@@ -3,6 +3,10 @@ import '../../../styles/components/molecule/excursion-docket.css';
 import { ExcursionDocket as ExcursionDocketType } from '../../../types/docket/services.types';
 export interface ExcursionDocketProps {
     data: ExcursionDocketType;
+    /** Remove mode - replaces price chip with remove button */
+    removeMode?: boolean;
+    /** Handler for remove button click */
+    onRemove?: () => void;
 }
 export declare const ExcursionDocket: React.FC<ExcursionDocketProps>;
 export default ExcursionDocket;

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

@@ -11,13 +11,14 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '../../../styles/components/molecule/excursion-docket.css';
+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 { DateDisplay } from '../DateDisplay/DateDisplay';
 import TextWithIcon from '../TextWithIcon/TextWithIcon';
 export var ExcursionDocket = function (_a) {
-    var data = _a.data;
+    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 formatPrice = function () {
         if (!TotalPrice)
@@ -25,6 +26,6 @@ export var ExcursionDocket = function (_a) {
         var price = typeof TotalPrice === 'string' ? TotalPrice : TotalPrice.toString();
         return "".concat(Currency, " ").concat(price);
     };
-    return (_jsxs("div", __assign({ className: "excursion-docket" }, { children: [_jsxs("div", __assign({ className: "excursion-docket__header" }, { children: [_jsxs("div", __assign({ className: "excursion-docket__title-section" }, { children: [_jsx("div", { className: "excursion-docket__title-bar" }), _jsx(Icon, { name: "map-pin", size: "sm" }), _jsx(Text, __assign({ variant: "bold", size: "sm", color: "accent" }, { children: "Excursion" }))] })), TotalPrice && Currency && (_jsx(Chip, __assign({ type: "filled", color: "accent", size: "sm" }, { children: formatPrice() })))] })), ExcursionName && (_jsx("div", __assign({ className: "excursion-docket__excursion-name" }, { children: _jsx(Text, __assign({ variant: "bold", size: "base", color: "default" }, { children: ExcursionName })) }))), _jsxs("div", __assign({ className: "excursion-docket__details" }, { children: [ServiceDate && (_jsx(DateDisplay, { date: ServiceDate, calendarSize: "sm", textSize: "sm", colorMode: "green" })), SelectedHotel && (_jsxs("div", __assign({ className: "excursion-docket__pickup" }, { children: [_jsxs(Text, __assign({ variant: "bold", size: "sm", color: "subtle" }, { children: ["Pickup:", ' '] })), _jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle" }, { children: SelectedHotel }))] }))), AdultCount !== undefined && AdultCount > 0 && (_jsxs(TextWithIcon, __assign({ icon: "user", textSize: "sm", color: "subtle" }, { children: [AdultCount, " Adult", AdultCount > 1 ? 's' : ''] }))), _jsxs("div", __assign({ className: "excursion-docket__details-list" }, { children: [Duration && (_jsxs("div", __assign({ className: "excursion-docket__detail-item" }, { children: [_jsx("div", __assign({ className: "excursion-docket__detail-label" }, { children: _jsx(TextWithIcon, __assign({ icon: "clock", textSize: "sm", color: "subtle", textLeading: "none" }, { children: "Duration" })) })), _jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle", leading: "none" }, { children: "|" })), _jsx(Text, __assign({ variant: "regular", size: "sm", color: "subtle", leading: "none" }, { children: Duration }))] }))), (MealIncluded !== undefined || Meal) && (_jsxs("div", __assign({ className: "excursion-docket__detail-item" }, { children: [_jsx("div", __assign({ className: "excursion-docket__detail-label" }, { children: _jsx(TextWithIcon, __assign({ icon: "utensils", textSize: "sm", color: "subtle", textLeading: "none" }, { children: "Meal" })) })), _jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle", leading: "none" }, { children: "|" })), _jsx(Text, __assign({ variant: "regular", size: "sm", color: "subtle", leading: "none" }, { children: Meal || (MealIncluded ? 'Included' : 'Not included') }))] }))), Accessibility && (_jsxs("div", __assign({ className: "excursion-docket__detail-item" }, { children: [_jsx("div", __assign({ className: "excursion-docket__detail-label" }, { children: _jsx(TextWithIcon, __assign({ icon: "stroller", textSize: "sm", color: "subtle", textLeading: "none" }, { children: "Accessibility" })) })), _jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle", leading: "none" }, { children: "|" })), _jsx(Text, __assign({ variant: "regular", size: "sm", color: "subtle", leading: "none" }, { children: Accessibility }))] }))), (VehicleType || VehicleTypeName) && (_jsxs("div", __assign({ className: "excursion-docket__detail-item" }, { children: [_jsx("div", __assign({ className: "excursion-docket__detail-label" }, { children: _jsx(TextWithIcon, __assign({ icon: "car", textSize: "sm", color: "subtle", textLeading: "none" }, { children: "Vehicle" })) })), _jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle", leading: "none" }, { children: "|" })), _jsx(Text, __assign({ variant: "regular", size: "sm", color: "subtle", leading: "none" }, { children: VehicleTypeName || VehicleType }))] })))] }))] }))] })));
+    return (_jsxs("div", __assign({ className: "excursion-docket" }, { children: [_jsxs("div", __assign({ className: "excursion-docket__header" }, { children: [_jsxs("div", __assign({ className: "excursion-docket__title-section" }, { children: [_jsx("div", { className: "excursion-docket__title-bar" }), _jsx(Icon, { name: "map-pin", size: "sm" }), _jsx(Text, __assign({ variant: "bold", size: "sm", color: "accent" }, { children: "Excursion" }))] })), removeMode ? (_jsx(Button, __assign({ variant: "destructive", size: "sm", leadingIcon: "close", onClick: onRemove, className: "excursion-docket__remove-button" }, { children: "Remove" }))) : (TotalPrice && Currency && (_jsx(Chip, __assign({ type: "filled", color: "accent", size: "sm" }, { children: formatPrice() }))))] })), ExcursionName && (_jsx("div", __assign({ className: "excursion-docket__excursion-name" }, { children: _jsx(Text, __assign({ variant: "bold", size: "base", color: "default" }, { children: ExcursionName })) }))), _jsxs("div", __assign({ className: "excursion-docket__details" }, { children: [ServiceDate && (_jsx(DateDisplay, { date: ServiceDate, calendarSize: "sm", textSize: "sm", colorMode: "green" })), SelectedHotel && (_jsxs("div", __assign({ className: "excursion-docket__pickup" }, { children: [_jsxs(Text, __assign({ variant: "bold", size: "sm", color: "subtle" }, { children: ["Pickup:", ' '] })), _jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle" }, { children: SelectedHotel }))] }))), AdultCount !== undefined && AdultCount > 0 && (_jsxs(TextWithIcon, __assign({ icon: "user", textSize: "sm", color: "subtle" }, { children: [AdultCount, " Adult", AdultCount > 1 ? 's' : ''] }))), _jsxs("div", __assign({ className: "excursion-docket__details-list" }, { children: [Duration && (_jsxs("div", __assign({ className: "excursion-docket__detail-item" }, { children: [_jsx("div", __assign({ className: "excursion-docket__detail-label" }, { children: _jsx(TextWithIcon, __assign({ icon: "clock", textSize: "sm", color: "subtle", textLeading: "none" }, { children: "Duration" })) })), _jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle", leading: "none" }, { children: "|" })), _jsx(Text, __assign({ variant: "regular", size: "sm", color: "subtle", leading: "none" }, { children: Duration }))] }))), (MealIncluded !== undefined || Meal) && (_jsxs("div", __assign({ className: "excursion-docket__detail-item" }, { children: [_jsx("div", __assign({ className: "excursion-docket__detail-label" }, { children: _jsx(TextWithIcon, __assign({ icon: "utensils", textSize: "sm", color: "subtle", textLeading: "none" }, { children: "Meal" })) })), _jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle", leading: "none" }, { children: "|" })), _jsx(Text, __assign({ variant: "regular", size: "sm", color: "subtle", leading: "none" }, { children: Meal || (MealIncluded ? 'Included' : 'Not included') }))] }))), Accessibility && (_jsxs("div", __assign({ className: "excursion-docket__detail-item" }, { children: [_jsx("div", __assign({ className: "excursion-docket__detail-label" }, { children: _jsx(TextWithIcon, __assign({ icon: "stroller", textSize: "sm", color: "subtle", textLeading: "none" }, { children: "Accessibility" })) })), _jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle", leading: "none" }, { children: "|" })), _jsx(Text, __assign({ variant: "regular", size: "sm", color: "subtle", leading: "none" }, { children: Accessibility }))] }))), (VehicleType || VehicleTypeName) && (_jsxs("div", __assign({ className: "excursion-docket__detail-item" }, { children: [_jsx("div", __assign({ className: "excursion-docket__detail-label" }, { children: _jsx(TextWithIcon, __assign({ icon: "car", textSize: "sm", color: "subtle", textLeading: "none" }, { children: "Vehicle" })) })), _jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle", leading: "none" }, { children: "|" })), _jsx(Text, __assign({ variant: "regular", size: "sm", color: "subtle", leading: "none" }, { children: VehicleTypeName || VehicleType }))] })))] }))] }))] })));
 };
 export default ExcursionDocket;

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

@@ -30,6 +30,8 @@ export interface LocationDropdownProps {
     maxHeight?: number;
     direction?: 'pickup' | 'dropoff';
     showGroupTitles?: boolean;
+    /** Whether to scroll to the input when the dropdown opens */
+    scrollOnOpen?: boolean;
 }
 declare const LocationDropdown: React.FC<LocationDropdownProps>;
 export default LocationDropdown;

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

@@ -23,10 +23,12 @@ import { useEffect, useRef, useState } from 'react';
 import '../../../styles/components/molecule/location-dropdown.css';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
+import { scrollIntoViewOnOpen } from '../../../lib/utils';
 var LocationDropdown = function (_a) {
-    var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.groups, groups = _c === void 0 ? [] : _c, _d = _a.selectedValue, selectedValue = _d === void 0 ? null : _d, _e = _a.placeholder, placeholder = _e === void 0 ? 'Select a location' : _e, label = _a.label, onSelectionChange = _a.onSelectionChange, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.type, type = _k === void 0 ? 'airport-port' : _k, _l = _a.maxHeight, maxHeight = _l === void 0 ? 240 : _l, _m = _a.direction, direction = _m === void 0 ? undefined : _m, _o = _a.showGroupTitles, showGroupTitles = _o === void 0 ? true : _o;
-    var _p = useState(false), isOpen = _p[0], setIsOpen = _p[1];
+    var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.groups, groups = _c === void 0 ? [] : _c, _d = _a.selectedValue, selectedValue = _d === void 0 ? null : _d, _e = _a.placeholder, placeholder = _e === void 0 ? 'Select a location' : _e, label = _a.label, onSelectionChange = _a.onSelectionChange, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.type, type = _k === void 0 ? 'airport-port' : _k, _l = _a.maxHeight, maxHeight = _l === void 0 ? 240 : _l, _m = _a.direction, direction = _m === void 0 ? undefined : _m, _o = _a.showGroupTitles, showGroupTitles = _o === void 0 ? true : _o, _p = _a.scrollOnOpen, scrollOnOpen = _p === void 0 ? false : _p;
+    var _q = useState(false), isOpen = _q[0], setIsOpen = _q[1];
     var dropdownRef = useRef(null);
+    var inputRef = useRef(null);
     // Close dropdown when clicking outside
     useEffect(function () {
         var handleClickOutside = function (event) {
@@ -39,6 +41,10 @@ var LocationDropdown = function (_a) {
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, []);
+    // Scroll to input when dropdown opens (if scrollOnOpen is true)
+    useEffect(function () {
+        scrollIntoViewOnOpen(inputRef, isOpen, scrollOnOpen);
+    }, [isOpen, scrollOnOpen]);
     var handleToggleDropdown = function () {
         if (!disabled) {
             setIsOpen(!isOpen);
@@ -120,7 +126,7 @@ var LocationDropdown = function (_a) {
     var SkeletonOption = function () { return (_jsxs("div", __assign({ 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", __assign({ className: "location-dropdown__panel" }, { children: _jsx("div", __assign({ className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") } }, { children: _jsx("div", __assign({ className: "location-dropdown__options-wrapper" }, { children: _jsx("div", __assign({ className: "location-dropdown__group" }, { children: _jsx("div", __assign({ className: "location-dropdown__group-options" }, { children: __spreadArray([], Array(5), true).map(function (_, index) { return (_jsx(SkeletonOption, {}, "skeleton-".concat(index))); }) })) })) })) })) }))); };
-    return (_jsxs("div", __assign({ ref: dropdownRef, className: "location-dropdown location-dropdown--".concat(type, " ").concat(className) }, { children: [label && (_jsx("div", __assign({ className: "location-dropdown__label" }, { children: _jsx(Text, __assign({ size: "sm", variant: "medium" }, { children: label })) }))), _jsxs("div", __assign({ className: "location-dropdown__input location-dropdown__input--".concat(getDropdownState()), onClick: handleToggleDropdown }, { children: [_jsxs("div", __assign({ className: "location-dropdown__input-content" }, { children: [_jsx(Icon, { name: getInputIcon(), size: "sm", className: "location-dropdown__input-icon ".concat(!selectedOption ? 'location-dropdown__input-icon--placeholder' : '') }), _jsx("span", __assign({ 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 &&
+    return (_jsxs("div", __assign({ ref: dropdownRef, className: "location-dropdown location-dropdown--".concat(type, " ").concat(className) }, { children: [label && (_jsx("div", __assign({ className: "location-dropdown__label" }, { children: _jsx(Text, __assign({ size: "sm", variant: "medium" }, { children: label })) }))), _jsxs("div", __assign({ ref: inputRef, className: "location-dropdown__input location-dropdown__input--".concat(getDropdownState()), onClick: handleToggleDropdown }, { children: [_jsxs("div", __assign({ className: "location-dropdown__input-content" }, { children: [_jsx(Icon, { name: getInputIcon(), size: "sm", className: "location-dropdown__input-icon ".concat(!selectedOption ? 'location-dropdown__input-icon--placeholder' : '') }), _jsx("span", __assign({ 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", __assign({ className: "location-dropdown__panel" }, { children: _jsx("div", __assign({ className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") } }, { children: _jsx("div", __assign({ className: "location-dropdown__options-wrapper" }, { children: allOptions.map(function (group, groupIndex) { return (_jsxs("div", __assign({ className: "location-dropdown__group" }, { children: [showGroupTitles && group.label && groups.length > 0 && (_jsxs(_Fragment, { children: [groupIndex > 0 && _jsx("div", { className: "location-dropdown__divider" }), _jsx("div", __assign({ className: "location-dropdown__group-header" }, { children: _jsx(Text, __assign({ size: "xs", variant: "bold" }, { children: group.label })) }))] })), _jsx("div", __assign({ className: "location-dropdown__group-options" }, { children: group.options.map(function (option) {
                                             var isSelected = selectedValue === option.id;
                                             var isDisabled = option.disabled || disabled;

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

@@ -3,6 +3,10 @@ import '../../../styles/components/molecule/other-service-docket.css';
 import { OtherServiceDocket as OtherServiceDocketType } from '../../../types/docket/services.types';
 export interface OtherServiceDocketProps {
     data: OtherServiceDocketType;
+    /** Remove mode - replaces price chip with remove button */
+    removeMode?: boolean;
+    /** Handler for remove button click */
+    onRemove?: () => void;
 }
 export declare const OtherServiceDocket: React.FC<OtherServiceDocketProps>;
 export default OtherServiceDocket;

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

@@ -11,12 +11,13 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '../../../styles/components/molecule/other-service-docket.css';
+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 TextWithIcon from '../TextWithIcon/TextWithIcon';
 export var OtherServiceDocket = function (_a) {
-    var data = _a.data;
+    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 formatPrice = function () {
         if (!TotalPrice)
@@ -24,6 +25,6 @@ export var OtherServiceDocket = function (_a) {
         var price = typeof TotalPrice === 'string' ? TotalPrice : TotalPrice.toString();
         return "".concat(Currency, " ").concat(price);
     };
-    return (_jsxs("div", __assign({ className: "other-service-docket" }, { children: [_jsxs("div", __assign({ className: "other-service-docket__header" }, { children: [_jsxs("div", __assign({ className: "other-service-docket__title-section" }, { children: [_jsx("div", { className: "other-service-docket__title-bar" }), _jsx(Icon, { name: "more", size: "sm" }), _jsx(Text, __assign({ variant: "bold", size: "sm", color: "accent" }, { children: "Other services" }))] })), TotalPrice && Currency && (_jsx(Chip, __assign({ type: "filled", color: "accent", size: "sm" }, { children: formatPrice() })))] })), _jsxs("div", __assign({ className: "other-service-docket__details" }, { children: [_jsx("div", __assign({ className: "other-service-docket__service-info" }, { children: service_for && (_jsx(TextWithIcon, __assign({ icon: "wallet", textSize: "sm", color: "subtle" }, { children: service_for }))) })), AdultCount !== undefined && AdultCount > 0 && (_jsxs(TextWithIcon, __assign({ icon: "user", textSize: "sm", color: "subtle" }, { children: [AdultCount, " Adult", AdultCount > 1 ? 's' : ''] })))] }))] })));
+    return (_jsxs("div", __assign({ className: "other-service-docket" }, { children: [_jsxs("div", __assign({ className: "other-service-docket__header" }, { children: [_jsxs("div", __assign({ className: "other-service-docket__title-section" }, { children: [_jsx("div", { className: "other-service-docket__title-bar" }), _jsx(Icon, { name: "more", size: "sm" }), _jsx(Text, __assign({ variant: "bold", size: "sm", color: "accent" }, { children: "Other services" }))] })), removeMode ? (_jsx(Button, __assign({ variant: "destructive", size: "sm", leadingIcon: "close", onClick: onRemove, className: "other-service-docket__remove-button" }, { children: "Remove" }))) : (TotalPrice && Currency && (_jsx(Chip, __assign({ type: "filled", color: "accent", size: "sm" }, { children: formatPrice() }))))] })), _jsxs("div", __assign({ className: "other-service-docket__details" }, { children: [_jsx("div", __assign({ className: "other-service-docket__service-info" }, { children: service_for && (_jsx(TextWithIcon, __assign({ icon: "wallet", textSize: "sm", color: "subtle" }, { children: service_for }))) })), AdultCount !== undefined && AdultCount > 0 && (_jsxs(TextWithIcon, __assign({ icon: "user", textSize: "sm", color: "subtle" }, { children: [AdultCount, " Adult", AdultCount > 1 ? 's' : ''] })))] }))] })));
 };
 export default OtherServiceDocket;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import '../../../styles/components/molecule/toast.css';
+import { ICONS } from '../../atoms/Icon/icons/registry';
+export type ToastType = 'informational' | 'success' | 'warning' | 'danger';
+export interface ToastProps {
+    /** Toast message text */
+    text: string;
+    /** Type of toast: informational, success, warning, or danger */
+    type?: ToastType;
+    /** Additional CSS classes */
+    className?: string;
+    /** Icon name */
+    iconName?: keyof typeof ICONS;
+}
+/**
+ * Toast component - A brief, auto-dismissing message that appears to notify the user.
+ *
+ * @example
+ * <Toast text="Please save your quotation" type="warning" />
+ *
+ * @param ToastProps
+ * @returns
+ */
+declare const Toast: React.FC<ToastProps>;
+export default Toast;

package/dist/components/molecules/Toast/Toast.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '../../../styles/components/molecule/toast.css';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+/**
+ * Toast component - A brief, auto-dismissing message that appears to notify the user.
+ *
+ * @example
+ * <Toast text="Please save your quotation" type="warning" />
+ *
+ * @param ToastProps
+ * @returns
+ */
+var Toast = function (_a) {
+    var text = _a.text, _b = _a.type, type = _b === void 0 ? 'informational' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.iconName, iconName = _d === void 0 ? 'badge-alert' : _d;
+    return (_jsx("div", __assign({ className: "toast toast--".concat(type, " ").concat(className).trim() }, { children: _jsxs("div", __assign({ className: "toast__container" }, { children: [_jsx("div", __assign({ className: "toast__icon-wrapper" }, { children: _jsx(Icon, { name: iconName, size: "md", className: "toast__icon" }) })), _jsx(Text, __assign({ size: "sm", variant: "bold", leading: "5", className: "toast__text" }, { children: text }))] })) })));
+};
+export default Toast;

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

@@ -0,0 +1,2 @@
+export { default } from './Toast';
+export type { ToastProps, ToastType } from './Toast';

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

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

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

@@ -3,6 +3,10 @@ import { TransferDocket as TransferDocketType } from '../../../types/docket/serv
 import '../../../styles/components/molecule/transfer-docket.css';
 export interface TransferDocketProps {
     data: TransferDocketType;
+    /** Remove mode - replaces price display with remove button */
+    removeMode?: boolean;
+    /** Handler for remove button click */
+    onRemove?: () => void;
 }
 export declare const TransferDocket: React.FC<TransferDocketProps>;
 export default TransferDocket;

package/dist/components/molecules/TransferDocket/TransferDocket.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import Button from '../../atoms/Button/Button';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
 import { DateDisplay } from '../DateDisplay/DateDisplay';
@@ -18,7 +19,7 @@ import { PriceDisplay } from '../PriceDisplay/PriceDisplay';
 import TextWithIcon from '../TextWithIcon/TextWithIcon';
 import '../../../styles/components/molecule/transfer-docket.css';
 export var TransferDocket = function (_a) {
-    var data = _a.data;
+    var data = _a.data, _b = _a.removeMode, removeMode = _b === void 0 ? false : _b, onRemove = _a.onRemove;
     var TransferDate = data.TransferDate, Currency = data.Currency, TotalPrice = data.TotalPrice, LocationFromName = data.LocationFromName, LocationToName = data.LocationToName, AdultCount = data.AdultCount, ChildCount = data.ChildCount, TeenCount = data.TeenCount, InfantCount = data.InfantCount, VehicleTypeName = data.VehicleTypeName, paxAge = data.paxAge;
     var formatChildrenInfo = function () {
         var totalChildren = (ChildCount || 0) + (TeenCount || 0);
@@ -54,6 +55,6 @@ export var TransferDocket = function (_a) {
         }
         return (_jsx("div", __assign({ className: "transfer-docket__children" }, { children: childGroups.map(function (group, index) { return (_jsxs(React.Fragment, { children: [index > 0 && _jsx("div", { className: "transfer-docket__divider-vertical" }), _jsxs("span", __assign({ className: "transfer-docket__child-info" }, { children: [_jsxs(Text, __assign({ size: "sm", variant: "medium", color: "default" }, { children: [group.count, " Child", group.count > 1 ? 'ren' : ''] })), group.age > 0 ? (_jsxs(Text, __assign({ size: "sm", variant: "medium", className: "transfer-docket__child-age" }, { children: [' ', "(", group.age, " y.o)"] }))) : null] }))] }, "child-".concat(index))); }) })));
     };
-    return (_jsxs("div", __assign({ className: "transfer-docket" }, { children: [_jsxs("div", __assign({ className: "transfer-docket__header" }, { children: [_jsxs("div", __assign({ className: "transfer-docket__title-section" }, { children: [_jsx("div", { className: "transfer-docket__title-bar" }), _jsx(Icon, { name: "bus", size: "sm" }), _jsx(Text, __assign({ variant: "bold", size: "sm", color: "accent" }, { children: "Transfer" }))] })), TotalPrice && Currency && (_jsx(PriceDisplay, { currency: Currency, price: TotalPrice }))] })), _jsxs("div", __assign({ className: "transfer-docket__details" }, { children: [TransferDate && (_jsx(DateDisplay, { date: TransferDate, calendarSize: "sm", textSize: "sm", colorMode: "green" })), (LocationFromName || LocationToName) && (_jsxs("div", __assign({ className: "transfer-docket__transfer-point" }, { children: [_jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle", leading: "none" }, { children: LocationFromName || 'From' })), _jsx(Icon, { name: "arrow-down-outline", size: "sm" }), _jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle", leading: "none" }, { children: LocationToName || 'To' }))] }))), _jsxs("div", __assign({ className: "transfer-docket__guests" }, { children: [AdultCount !== undefined && AdultCount > 0 && (_jsxs(TextWithIcon, __assign({ icon: "user", textSize: "sm", color: "subtle" }, { children: [AdultCount, " Adult", AdultCount > 1 ? 's' : ''] }))), ((ChildCount && ChildCount > 0) || (TeenCount && TeenCount > 0)) ? (_jsxs("div", __assign({ className: "transfer-docket__children-wrapper" }, { children: [_jsx(Icon, { name: "user", size: "sm", color: "var(--color-text-subtle, #303642)" }), formatChildrenInfo()] }))) : null] })), VehicleTypeName && (_jsx(TextWithIcon, __assign({ icon: "car", textSize: "sm", color: "subtle", textLeading: "none" }, { children: VehicleTypeName })))] }))] })));
+    return (_jsxs("div", __assign({ className: "transfer-docket" }, { children: [_jsxs("div", __assign({ className: "transfer-docket__header" }, { children: [_jsxs("div", __assign({ className: "transfer-docket__title-section" }, { children: [_jsx("div", { className: "transfer-docket__title-bar" }), _jsx(Icon, { name: "bus", size: "sm" }), _jsx(Text, __assign({ variant: "bold", size: "sm", color: "accent" }, { children: "Transfer" }))] })), removeMode ? (_jsx(Button, __assign({ variant: "destructive", size: "sm", leadingIcon: "close", onClick: onRemove, className: "transfer-docket__remove-button" }, { children: "Remove" }))) : (TotalPrice && Currency && _jsx(PriceDisplay, { currency: Currency, price: TotalPrice }))] })), _jsxs("div", __assign({ className: "transfer-docket__details" }, { children: [TransferDate && (_jsx(DateDisplay, { date: TransferDate, calendarSize: "sm", textSize: "sm", colorMode: "green" })), (LocationFromName || LocationToName) && (_jsxs("div", __assign({ className: "transfer-docket__transfer-point" }, { children: [_jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle", leading: "none" }, { children: LocationFromName || 'From' })), _jsx(Icon, { name: "arrow-down-outline", size: "sm" }), _jsx(Text, __assign({ variant: "medium", size: "sm", color: "subtle", leading: "none" }, { children: LocationToName || 'To' }))] }))), _jsxs("div", __assign({ className: "transfer-docket__guests" }, { children: [AdultCount !== undefined && AdultCount > 0 && (_jsxs(TextWithIcon, __assign({ icon: "user", textSize: "sm", color: "subtle" }, { children: [AdultCount, " Adult", AdultCount > 1 ? 's' : ''] }))), ((ChildCount && ChildCount > 0) || (TeenCount && TeenCount > 0)) ? (_jsxs("div", __assign({ className: "transfer-docket__children-wrapper" }, { children: [_jsx(Icon, { name: "user", size: "sm", color: "var(--color-text-subtle, #303642)" }), formatChildrenInfo()] }))) : null] })), VehicleTypeName && (_jsx(TextWithIcon, __assign({ icon: "car", textSize: "sm", color: "subtle", textLeading: "none" }, { children: VehicleTypeName })))] }))] })));
 };
 export default TransferDocket;

package/dist/components/organisms/CarBookingCard/CarBookingCard.css

@@ -2094,7 +2094,7 @@
 }
 
 .car-booking-card--hover,
-.car-booking-card:hover {
+.car-booking-card:hover:not(.car-booking-card--readonly) {
   /* Will be fine-tuned when we inspect Figma Hover variant */
   box-shadow:
     var(--spacing-base-0, 0px) var(--spacing-base-1, 4px)
@@ -2105,6 +2105,18 @@
       rgba(48, 54, 66, 0.18);
 }
 
+/* Readonly mode styles */
+.car-booking-card--readonly .car-booking-card__supplement-value {
+  margin: 0;
+  padding: var(--spacing-padding-py-3, 12px) var(--spacing-padding-px-4, 16px);
+  border-radius: var(--border-radius-rounded-xl, 12px);
+  background: var(--color-elevation-level-1, #ffffff);
+  border: var(--input-border-width-default, 1px) solid var(--color-border-subtle, #e5e5e5);
+  min-height: 44px; /* Match input field height */
+  display: flex;
+  align-items: center;
+}
+
 /* NOTE: Figma Selected keeps the same white surface; selection is expressed via CTA + active divider */
 
 .car-booking-card__image-wrap {

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

@@ -45,6 +45,8 @@ export interface CarBookingCardProps {
     ctaLabel: string;
     ctaButtonProps?: Omit<ButtonProps, 'children'>;
     onCtaClick?: ButtonProps['onClick'];
+    /** Readonly mode - disables interactions and shows values as text */
+    readonly?: boolean;
     className?: string;
 }
 declare const CarBookingCard: React.FC<CarBookingCardProps>;

package/dist/components/organisms/CarBookingCard/CarBookingCard.js

@@ -18,7 +18,7 @@ import FeatureRow from '../../molecules/FeatureRow/FeatureRow';
 import './CarBookingCard.css';
 var CarBookingCard = function (_a) {
     var _b;
-    var imageSrc = _a.imageSrc, title = _a.title, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.state, state = _d === void 0 ? 'default' : _d, _e = _a.type, type = _e === void 0 ? 'default' : _e, features = _a.features, infoText = _a.infoText, _f = _a.priceTitle, priceTitle = _f === void 0 ? 'Price breakdown' : _f, _g = _a.priceRows, priceRows = _g === void 0 ? [] : _g, showSupplement = _a.showSupplement, supplementMessage = _a.supplementMessage, _h = _a.supplementLabel, supplementLabel = _h === void 0 ? 'Supplement' : _h, _j = _a.supplementPlaceholder, supplementPlaceholder = _j === void 0 ? 'Select a supplement' : _j, supplementValue = _a.supplementValue, _k = _a.supplementState, supplementState = _k === void 0 ? 'default' : _k, _l = _a.supplementOptions, supplementOptions = _l === void 0 ? [] : _l, onSupplementSelect = _a.onSupplementSelect, totalPrice = _a.totalPrice, _m = _a.totalPriceLabel, totalPriceLabel = _m === void 0 ? 'Total price' : _m, ctaLabel = _a.ctaLabel, ctaButtonProps = _a.ctaButtonProps, onCtaClick = _a.onCtaClick, _o = _a.className, className = _o === void 0 ? '' : _o;
+    var imageSrc = _a.imageSrc, title = _a.title, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.state, state = _d === void 0 ? 'default' : _d, _e = _a.type, type = _e === void 0 ? 'default' : _e, features = _a.features, infoText = _a.infoText, _f = _a.priceTitle, priceTitle = _f === void 0 ? 'Price breakdown' : _f, _g = _a.priceRows, priceRows = _g === void 0 ? [] : _g, showSupplement = _a.showSupplement, supplementMessage = _a.supplementMessage, _h = _a.supplementLabel, supplementLabel = _h === void 0 ? 'Supplement' : _h, _j = _a.supplementPlaceholder, supplementPlaceholder = _j === void 0 ? 'Select a supplement' : _j, supplementValue = _a.supplementValue, _k = _a.supplementState, supplementState = _k === void 0 ? 'default' : _k, _l = _a.supplementOptions, supplementOptions = _l === void 0 ? [] : _l, onSupplementSelect = _a.onSupplementSelect, totalPrice = _a.totalPrice, _m = _a.totalPriceLabel, totalPriceLabel = _m === void 0 ? 'Total price' : _m, ctaLabel = _a.ctaLabel, ctaButtonProps = _a.ctaButtonProps, onCtaClick = _a.onCtaClick, _o = _a.readonly, readonly = _o === void 0 ? false : _o, _p = _a.className, className = _p === void 0 ? '' : _p;
     var resolvedShowSupplement = showSupplement !== null && showSupplement !== void 0 ? showSupplement : Boolean(supplementLabel || supplementPlaceholder || supplementOptions.length > 0);
     var resolvedSupplementState = supplementMessage ? 'disabled' : supplementState;
     var baseClass = 'car-booking-card';
@@ -27,13 +27,14 @@ var CarBookingCard = function (_a) {
         "".concat(baseClass, "--").concat(size),
         "".concat(baseClass, "--").concat(state),
         "".concat(baseClass, "--").concat(type),
+        readonly ? "".concat(baseClass, "--readonly") : '',
         className,
     ]
         .filter(Boolean)
         .join(' ');
-    return (_jsxs("article", __assign({ className: classes }, { children: [_jsx("div", __assign({ className: "car-booking-card__image-wrap" }, { children: _jsx("img", { className: "car-booking-card__image", src: imageSrc, alt: "" }) })), _jsx("div", { className: "car-booking-card__active-divider" }), _jsxs("div", __assign({ className: "car-booking-card__body" }, { children: [priceRows.length > 0 && (_jsxs("section", __assign({ className: "car-booking-card__section car-booking-card__section--price" }, { children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", __assign({ className: "car-booking-card__price-content" }, { children: [_jsx(Text, __assign({ as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title" }, { children: priceTitle })), _jsx("div", __assign({ className: "car-booking-card__price-rows" }, { children: priceRows.map(function (row, idx) { return (_jsxs("div", __assign({ className: "car-booking-card__price-row" }, { children: [_jsx(Text, __assign({ size: "sm", leading: "5", variant: "regular", color: "subtle", className: "car-booking-card__price-label" }, { children: row.label })), _jsx(Text, __assign({ size: "sm", leading: "5", variant: "bold", color: "subtle", className: "car-booking-card__price-value" }, { children: row.value }))] }), "".concat(row.label, "-").concat(idx))); }) }))] })), _jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" })] }))), _jsxs("section", __assign({ className: "car-booking-card__section car-booking-card__section--content" }, { children: [_jsxs("div", __assign({ className: "car-booking-card__title" }, { children: [_jsx("span", { className: "car-booking-card__title-marker", "aria-hidden": "true" }), _jsx(Heading, __assign({ level: 4, variant: "bold", color: "accent", className: "car-booking-card__title-text" }, { children: title }))] })), _jsx("div", __assign({ className: "car-booking-card__features" }, { children: features.map(function (feature, idx) {
+    return (_jsxs("article", __assign({ className: classes }, { children: [_jsx("div", __assign({ className: "car-booking-card__image-wrap" }, { children: _jsx("img", { className: "car-booking-card__image", src: imageSrc, alt: "" }) })), _jsx("div", { className: "car-booking-card__active-divider" }), _jsxs("div", __assign({ className: "car-booking-card__body" }, { children: [priceRows.length > 0 && !readonly && (_jsxs("section", __assign({ className: "car-booking-card__section car-booking-card__section--price" }, { children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", __assign({ className: "car-booking-card__price-content" }, { children: [_jsx(Text, __assign({ as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title" }, { children: priceTitle })), _jsx("div", __assign({ className: "car-booking-card__price-rows" }, { children: priceRows.map(function (row, idx) { return (_jsxs("div", __assign({ className: "car-booking-card__price-row" }, { children: [_jsx(Text, __assign({ size: "sm", leading: "5", variant: "regular", color: "subtle", className: "car-booking-card__price-label" }, { children: row.label })), _jsx(Text, __assign({ size: "sm", leading: "5", variant: "bold", color: "subtle", className: "car-booking-card__price-value" }, { children: row.value }))] }), "".concat(row.label, "-").concat(idx))); }) }))] })), _jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" })] }))), _jsxs("section", __assign({ className: "car-booking-card__section car-booking-card__section--content" }, { children: [_jsxs("div", __assign({ className: "car-booking-card__title" }, { children: [_jsx("span", { className: "car-booking-card__title-marker", "aria-hidden": "true" }), _jsx(Heading, __assign({ level: 4, variant: "bold", color: "accent", className: "car-booking-card__title-text" }, { children: title }))] })), _jsx("div", __assign({ className: "car-booking-card__features" }, { children: features.map(function (feature, idx) {
                                     var _a;
                                     return (_jsx(FeatureRow, __assign({}, feature, { className: "car-booking-card__feature-row ".concat((_a = feature.className) !== null && _a !== void 0 ? _a : '').trim() }), "".concat(feature.label, "-").concat(idx)));
-                                }) })), infoText && (_jsxs("div", __assign({ className: "car-booking-card__info" }, { children: [_jsx("span", __assign({ className: "car-booking-card__info-icon", "aria-hidden": "true" }, { children: "i" })), _jsx(Text, __assign({ size: "sm", leading: "5", variant: "regular", color: "default", className: "car-booking-card__info-text" }, { children: infoText }))] })))] })), resolvedShowSupplement && (_jsxs("section", __assign({ className: "car-booking-card__section car-booking-card__section--supplement" }, { children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", __assign({ className: "car-booking-card__supplement-header" }, { children: [_jsx(Text, __assign({ as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title" }, { children: supplementLabel })), supplementMessage && (_jsx(Text, __assign({ as: "p", size: "sm", leading: "5", variant: "regular", className: "car-booking-card__supplement-message" }, { children: supplementMessage })))] })), _jsx(DropdownInput, { placeholder: supplementPlaceholder, value: supplementValue, state: resolvedSupplementState, options: supplementOptions, onSelect: onSupplementSelect })] }))), _jsxs("footer", __assign({ className: "car-booking-card__footer" }, { children: [_jsxs("div", __assign({ className: "car-booking-card__total" }, { children: [_jsx(Text, __assign({ size: "sm", variant: "bold", color: "accent", className: "car-booking-card__total-price" }, { children: totalPrice })), _jsx(Text, __assign({ size: "sm", variant: "regular", color: "subtle", className: "car-booking-card__total-label" }, { children: totalPriceLabel }))] })), _jsx(Button, __assign({ variant: "primary", size: "sm" }, ctaButtonProps, { onClick: onCtaClick, className: "car-booking-card__cta ".concat((_b = ctaButtonProps === null || ctaButtonProps === void 0 ? void 0 : ctaButtonProps.className) !== null && _b !== void 0 ? _b : '').trim() }, { children: ctaLabel }))] }))] }))] })));
+                                }) })), infoText && !readonly && (_jsxs("div", __assign({ className: "car-booking-card__info" }, { children: [_jsx("span", __assign({ className: "car-booking-card__info-icon", "aria-hidden": "true" }, { children: "i" })), _jsx(Text, __assign({ size: "sm", leading: "5", variant: "regular", color: "default", className: "car-booking-card__info-text" }, { children: infoText }))] })))] })), resolvedShowSupplement && !readonly && (_jsxs("section", __assign({ className: "car-booking-card__section car-booking-card__section--supplement" }, { children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", __assign({ className: "car-booking-card__supplement-header" }, { children: [_jsx(Text, __assign({ as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title" }, { children: supplementLabel })), supplementMessage && (_jsx(Text, __assign({ as: "p", size: "sm", leading: "5", variant: "regular", className: "car-booking-card__supplement-message" }, { children: supplementMessage })))] })), readonly ? (_jsx(Text, __assign({ size: "sm", leading: "5", variant: "regular", color: supplementValue ? "default" : "subtle", className: "car-booking-card__supplement-value" }, { children: supplementValue || supplementPlaceholder }))) : (_jsx(DropdownInput, { placeholder: supplementPlaceholder, value: supplementValue, state: resolvedSupplementState, options: supplementOptions, onSelect: onSupplementSelect }))] }))), !readonly && _jsxs("footer", __assign({ className: "car-booking-card__footer" }, { children: [_jsxs("div", __assign({ className: "car-booking-card__total" }, { children: [_jsx(Text, __assign({ size: "sm", variant: "bold", color: "accent", className: "car-booking-card__total-price" }, { children: totalPrice })), _jsx(Text, __assign({ size: "sm", variant: "regular", color: "subtle", className: "car-booking-card__total-label" }, { children: totalPriceLabel }))] })), !readonly && (_jsx(Button, __assign({ variant: "primary", size: "sm" }, ctaButtonProps, { onClick: onCtaClick, className: "car-booking-card__cta ".concat((_b = ctaButtonProps === null || ctaButtonProps === void 0 ? void 0 : ctaButtonProps.className) !== null && _b !== void 0 ? _b : '').trim() }, { children: ctaLabel })))] }))] }))] })));
 };
 export default CarBookingCard;