mautourco-components 0.2.77 → 0.2.79

package/dist/components/atoms/Chip/Chip.css

@@ -162,11 +162,42 @@
   opacity: 0.6;
 }
 
-.chip--clickable:focus {
+/* Focus styles - specific to each color */
+.chip--clickable.chip--brand:focus {
   outline: 2px solid var(--chip-color-brand-outline-foreground, #ed4c09);
   outline-offset: 2px;
 }
 
+.chip--clickable.chip--accent:focus {
+  outline: 2px solid var(--chip-color-accent-outline-foreground, #0f7173);
+  outline-offset: 2px;
+}
+
+.chip--clickable.chip--blue:focus {
+  outline: 2px solid var(--chip-color-blue-outline-foreground, #2e4780);
+  outline-offset: 2px;
+}
+
+.chip--clickable.chip--green:focus {
+  outline: 2px solid var(--chip-color-green-outline-foreground, #4a6045);
+  outline-offset: 2px;
+}
+
+.chip--clickable.chip--yellow:focus {
+  outline: 2px solid var(--chip-color-yellow-outline-foreground, #eab308);
+  outline-offset: 2px;
+}
+
+.chip--clickable.chip--red:focus {
+  outline: 2px solid var(--chip-color-red-outline-foreground, #991b1b);
+  outline-offset: 2px;
+}
+
+.chip--clickable.chip--neutral:focus {
+  outline: 2px solid var(--chip-color-neutral-outline-foreground, #9ca3af);
+  outline-offset: 2px;
+}
+
 .chip--outline.chip--black-text {
   color: var(--chip-color-neutral-outline-text, #262626);
 }

package/dist/components/molecules/VehicleSupplement/VehicleSupplement.css

@@ -0,0 +1,85 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.vehicle-supplement {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-6, 24px);
+  padding: var(--spacing-padding-px-0, 0px);
+}
+
+.vehicle-supplement__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-4, 16px);
+}
+
+.vehicle-supplement__transfer-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-4, 16px);
+}
+
+.vehicle-supplement__transfer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  padding: var(--spacing-gap-gap-0, 0px);
+}
+
+.vehicle-supplement__transfer-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2, 8px);
+}
+
+.vehicle-supplement__transfer-label {
+  font-family: var(--font-font-family-body, "Satoshi"), "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-weight: var(--font-weight-font-bold, 700);
+  font-size: var(--font-size-text-base, 16px);
+  line-height: calc(var(--font-leading-leading-md, 24) * 1px);
+  color: var(--checkbox-color-label-default, #303642);
+}
+
+.vehicle-supplement__supplements-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-3, 12px);
+}
+
+.vehicle-supplement__supplement-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+  padding: var(--spacing-padding-px-0, 0px);
+}
+
+.vehicle-supplement__supplement-name {
+  font-family: var(--font-font-family-body, "Satoshi"), "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-weight: var(--font-weight-font-medium, 500);
+  font-size: var(--font-size-text-base, 16px);
+  line-height: calc(var(--font-leading-leading-md, 24) * 1px);
+  color: var(--checkbox-color-label-default, #303642);
+}
+
+.vehicle-supplement__divider {
+  width: 100%;
+  height: 0;
+  border-top: 1px solid var(--color-border-default, #d9d9d9);
+}
+
+.vehicle-supplement__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-gap-gap-4, 16px);
+  height: 36px;
+}
+
+.vehicle-supplement__cancel-button,
+.vehicle-supplement__done-button {
+  min-width: 114px;
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { TransferDocket } from '../../../types/docket/services.types';
+import './VehicleSupplement.css';
+export interface Supplement {
+    supplement_name: string;
+    max?: number;
+    min?: number;
+}
+export interface SupplementValue {
+    transferId: number;
+    supplementName: string;
+    value: number;
+}
+export interface VehicleSupplementProps {
+    /** Array of available supplements */
+    supplements: Supplement[];
+    /** Array of transfers (Arrival, Inter-Hotel, Departure) */
+    transfer: TransferDocket[];
+    /** Handler called when supplement values change */
+    onChange: (values: SupplementValue[]) => void;
+    /** Handler called when Done button is clicked */
+    onDone: (values: SupplementValue[]) => void;
+    /** Handler called when Clear/Cancel button is clicked */
+    onClear: () => void;
+    /** Initial values for the supplements (optional) */
+    initialValues?: SupplementValue[];
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const VehicleSupplement: React.FC<VehicleSupplementProps>;
+export default VehicleSupplement;

package/dist/components/molecules/VehicleSupplement/VehicleSupplement.js

@@ -0,0 +1,101 @@
+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 { useState } from 'react';
+import Button from '../../atoms/Button/Button';
+import Chip from '../../atoms/Chip/Chip';
+import Icon from '../../atoms/Icon/Icon';
+import Stepper from '../Stepper/Stepper';
+import './VehicleSupplement.css';
+var VehicleSupplement = function (_a) {
+    var supplements = _a.supplements, transfer = _a.transfer, onChange = _a.onChange, onDone = _a.onDone, onClear = _a.onClear, _b = _a.initialValues, initialValues = _b === void 0 ? [] : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
+    // Initialize state for all supplements across all transfers
+    var _d = useState(function () {
+        // If initial values are provided, use them
+        if (initialValues.length > 0) {
+            return initialValues;
+        }
+        // Otherwise, create default values with 0
+        var defaultValues = [];
+        transfer.forEach(function (t) {
+            supplements.forEach(function (s) {
+                defaultValues.push({
+                    transferId: t.IdTransfer,
+                    supplementName: s.supplement_name,
+                    value: 0,
+                });
+            });
+        });
+        return defaultValues;
+    }), supplementValues = _d[0], setSupplementValues = _d[1];
+    var getValue = function (transferId, supplementName) {
+        var item = supplementValues.find(function (v) { return v.transferId === transferId && v.supplementName === supplementName; });
+        return (item === null || item === void 0 ? void 0 : item.value) || 0;
+    };
+    var handleSupplementChange = function (transferId, supplementName, newValue) {
+        var updatedValues = supplementValues.map(function (v) {
+            return v.transferId === transferId && v.supplementName === supplementName
+                ? __assign(__assign({}, v), { value: newValue }) : v;
+        });
+        setSupplementValues(updatedValues);
+        onChange(updatedValues);
+    };
+    var getTransferTypeIcon = function (transferType) {
+        var type = transferType.toLowerCase();
+        if (type.includes('arrival') || type.includes('airport') || type.includes('inbound')) {
+            return 'plane-landing-outline';
+        }
+        if (type.includes('departure') || type.includes('outbound')) {
+            return 'plane-takeoff-outline';
+        }
+        return 'building-2-outline';
+    };
+    var getTransferTypeLabel = function (transferType) {
+        var type = transferType.toLowerCase();
+        if (type.includes('arrival') || type.includes('airport') || type.includes('inbound')) {
+            return 'Arrival';
+        }
+        if (type.includes('departure') || type.includes('outbound')) {
+            return 'Departure';
+        }
+        return 'Inter-Hotel';
+    };
+    var formatDate = function (dateStr) {
+        try {
+            var date = new Date(dateStr);
+            var day = String(date.getDate()).padStart(2, '0');
+            var month = String(date.getMonth() + 1).padStart(2, '0');
+            var year = date.getFullYear();
+            return "".concat(day, "/").concat(month, "/").concat(year);
+        }
+        catch (_a) {
+            return dateStr;
+        }
+    };
+    var handleDone = function () {
+        onDone(supplementValues);
+    };
+    var baseClass = 'vehicle-supplement';
+    var classes = [baseClass, className].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: classes, children: [_jsx("div", { className: "".concat(baseClass, "__content"), children: transfer.map(function (t, index) {
+                    var isLast = index === transfer.length - 1;
+                    var typeLabel = getTransferTypeLabel(t.TransferType);
+                    var iconName = getTransferTypeIcon(t.TransferType);
+                    return (_jsxs("div", { className: "".concat(baseClass, "__transfer-section"), children: [_jsxs("div", { className: "".concat(baseClass, "__transfer-header"), children: [_jsxs("div", { className: "".concat(baseClass, "__transfer-title"), children: [_jsx(Icon, { name: iconName, size: "sm" }), _jsx("span", { className: "".concat(baseClass, "__transfer-label"), children: typeLabel })] }), _jsx(Chip, { leadingIcon: "calendar", label: formatDate(t.TransferDate), size: "sm", color: "neutral", isBlackText: true })] }), _jsx("div", { className: "".concat(baseClass, "__supplements-list"), children: supplements.map(function (supplement) {
+                                    var currentValue = getValue(t.IdTransfer, supplement.supplement_name);
+                                    return (_jsxs("div", { className: "".concat(baseClass, "__supplement-row"), children: [_jsx("span", { className: "".concat(baseClass, "__supplement-name"), children: supplement.supplement_name }), _jsx(Stepper, { value: currentValue, min: supplement.min || 0, max: supplement.max || 99, onChange: function (value) {
+                                                    return handleSupplementChange(t.IdTransfer, supplement.supplement_name, value);
+                                                } })] }, supplement.supplement_name));
+                                }) }), !isLast && _jsx("div", { className: "".concat(baseClass, "__divider") })] }, t.IdTransfer));
+                }) }), _jsxs("div", { className: "".concat(baseClass, "__footer"), children: [_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: onClear, className: "".concat(baseClass, "__cancel-button"), children: "Cancel" }), _jsx(Button, { variant: "secondary", size: "sm", onClick: handleDone, className: "".concat(baseClass, "__done-button"), children: "Done" })] })] }));
+};
+export default VehicleSupplement;

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

@@ -0,0 +1,2 @@
+export { default } from './VehicleSupplement';
+export type { VehicleSupplementProps, Supplement, SupplementValue } from './VehicleSupplement';

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

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

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

@@ -250,4 +250,122 @@
 
 .car-booking-card__cta {
   white-space: nowrap;
+}
+
+/* Supplement dropdown styles */
+.car-booking-card__supplement-dropdown {
+  position: relative;
+  width: 100%;
+}
+
+.car-booking-card__supplement-trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-gap-gap-2, 8px);
+  padding: var(--spacing-padding-py-3, 12px) var(--spacing-padding-px-4, 16px);
+  background: var(--color-elevation-level-1, #ffffff);
+  border: var(--input-border-width-default, 1px) solid var(--color-border-default, #d4d4d4);
+  border-radius: var(--border-radius-rounded-xl, 12px);
+  font-family: var(--font-font-family-body, "Satoshi"), "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: var(--font-size-text-base, 16px);
+  line-height: calc(var(--font-leading-leading-md, 24) * 1px);
+  color: var(--color-text-default, #262626);
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  min-height: 48px;
+}
+
+.car-booking-card__supplement-trigger:hover:not(:disabled) {
+  border-color: var(--color-border-active-default, #0f7173);
+}
+
+.car-booking-card__supplement-trigger:focus {
+  outline: var(--border-width-focus, 2px) solid var(--color-border-active-default, #0f7173);
+  outline-offset: var(--spacing-base-0-5, 2px);
+}
+
+.car-booking-card__supplement-trigger--disabled {
+  background: var(--color-elevation-level-2, #f5f5f5);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.car-booking-card__supplement-placeholder {
+  color: var(--color-text-subtle, #737373);
+  font-weight: var(--font-weight-font-regular, 400);
+}
+
+.car-booking-card__supplement-trigger--has-value .car-booking-card__supplement-placeholder {
+  color: var(--color-text-default, #262626);
+}
+
+.car-booking-card__supplement-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-gap-gap-2, 8px);
+  flex: 1;
+  align-items: center;
+}
+
+/* Ensure chips are properly interactive within the button */
+.car-booking-card__supplement-chips .chip {
+  cursor: pointer;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  -webkit-user-select: none;
+          user-select: none;
+}
+
+/* Hover state for chips - subtle scale and opacity change */
+.car-booking-card__supplement-chips .chip:hover {
+  opacity: 0.85;
+  transform: translateY(-1px);
+}
+
+/* Active/pressed state for chips */
+.car-booking-card__supplement-chips .chip:active {
+  opacity: 0.7;
+  transform: translateY(0);
+}
+
+/* Make close icon more prominent on chip hover */
+.car-booking-card__supplement-chips .chip:hover .chip__icon--trailing {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+/* Transition for chip icons */
+.car-booking-card__supplement-chips .chip .chip__icon--trailing {
+  transition: transform 0.15s ease, opacity 0.15s ease;
+  opacity: 0.8;
+}
+
+.car-booking-card__supplement-icon {
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.car-booking-card__supplement-icon--open {
+  transform: rotate(180deg);
+}
+
+.car-booking-card__supplement-panel {
+  position: absolute;
+  top: calc(100% + var(--spacing-gap-gap-2, 8px));
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background: var(--color-elevation-level-1, #ffffff);
+  border-radius: var(--border-radius-rounded-xl, 12px);
+  box-shadow:
+    var(--spacing-base-0, 0px) var(--spacing-base-1, 4px)
+      var(--backdrop-blur-backdrop-blur, 8px) var(--spacing-base-0, 0px)
+      rgba(48, 54, 66, 0.1),
+    var(--spacing-base-0, 0px) var(--spacing-base-px, 1px)
+      var(--backdrop-blur-backdrop-blur, 8px) var(--spacing-base-0, 0px)
+      rgba(48, 54, 66, 0.11);
+  padding: var(--spacing-padding-py-6, 24px);
+  max-height: 600px;
+  overflow-y: auto;
 }

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

@@ -1,6 +1,8 @@
 import React from 'react';
+import { TransferDocket } from '../../../types/docket/services.types';
 import { ButtonProps } from '../../atoms/Button/Button';
 import { FeatureRowProps } from '../../molecules/FeatureRow/FeatureRow';
+import { Supplement, SupplementValue } from '../../molecules/VehicleSupplement/VehicleSupplement';
 import './CarBookingCard.css';
 export type CarBookingCardSize = 'small' | 'large';
 export type CarBookingCardState = 'default' | 'selected' | 'hover';
@@ -36,17 +38,19 @@ export interface CarBookingCardProps {
     supplementMessageState?: 'default' | 'error';
     supplementLabel?: string;
     supplementPlaceholder?: string;
-    supplementValue?: string;
-    supplementState?: 'default' | 'loading' | 'selected' | 'error' | 'disabled';
-    supplementOptions?: string[];
-    onSupplementSelect?: (option: string) => void;
+    /** Array of available supplements */
+    supplements?: Supplement[];
+    /** Array of transfers for supplement selection */
+    transfers?: TransferDocket[];
+    /** Handler when supplements are selected */
+    onSupplementChange?: (values: SupplementValue[]) => void;
     /** Footer price */
     totalPrice: string;
     totalPriceLabel?: string;
     /** Footer CTA */
     ctaLabel: string;
     ctaButtonProps?: Omit<ButtonProps, 'children'>;
-    onCtaClick?: ButtonProps['onClick'];
+    onCtaClick?: (event: React.MouseEvent<HTMLButtonElement>, supplements?: SupplementValue[]) => void;
     /** Readonly mode - disables interactions and shows values as text */
     readonly?: boolean;
     className?: string;

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

@@ -10,24 +10,99 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Button from '../../atoms/Button/Button';
+import Chip from '../../atoms/Chip/Chip';
 import Divider from '../../atoms/Divider/Divider';
-import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
+import Icon from '../../atoms/Icon/Icon';
 import { Heading, Text } from '../../atoms/Typography/Typography';
 import FeatureRow from '../../molecules/FeatureRow/FeatureRow';
+import VehicleSupplement from '../../molecules/VehicleSupplement/VehicleSupplement';
 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.supplementMessageState, supplementMessageState = _h === void 0 ? 'error' : _h, _j = _a.supplementLabel, supplementLabel = _j === void 0 ? 'Supplement' : _j, _k = _a.supplementPlaceholder, supplementPlaceholder = _k === void 0 ? 'Select a supplement' : _k, supplementValue = _a.supplementValue, _l = _a.supplementState, supplementState = _l === void 0 ? 'default' : _l, _m = _a.supplementOptions, supplementOptions = _m === void 0 ? [] : _m, onSupplementSelect = _a.onSupplementSelect, totalPrice = _a.totalPrice, _o = _a.totalPriceLabel, totalPriceLabel = _o === void 0 ? 'Total price' : _o, ctaLabel = _a.ctaLabel, ctaButtonProps = _a.ctaButtonProps, onCtaClick = _a.onCtaClick, _p = _a.readonly, readonly = _p === void 0 ? false : _p, _q = _a.className, className = _q === void 0 ? '' : _q;
+    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.supplementMessageState, supplementMessageState = _h === void 0 ? 'error' : _h, _j = _a.supplementLabel, supplementLabel = _j === void 0 ? 'Supplement' : _j, _k = _a.supplementPlaceholder, supplementPlaceholder = _k === void 0 ? 'Select a supplement' : _k, _l = _a.supplements, supplements = _l === void 0 ? [] : _l, _m = _a.transfers, transfers = _m === void 0 ? [] : _m, onSupplementChange = _a.onSupplementChange, totalPrice = _a.totalPrice, _o = _a.totalPriceLabel, totalPriceLabel = _o === void 0 ? 'Total price' : _o, ctaLabel = _a.ctaLabel, ctaButtonProps = _a.ctaButtonProps, onCtaClick = _a.onCtaClick, _p = _a.readonly, readonly = _p === void 0 ? false : _p, _q = _a.className, className = _q === void 0 ? '' : _q;
     var _r = useState(state === 'selected'), isSelected = _r[0], setIsSelected = _r[1];
     var _s = useState(false), isHovered = _s[0], setIsHovered = _s[1];
-    var resolvedShowSupplement = showSupplement !== null && showSupplement !== void 0 ? showSupplement : Boolean(supplementLabel || supplementPlaceholder || supplementOptions.length > 0);
-    var resolvedSupplementState = supplementMessage ? 'disabled' : supplementState;
-    // Handle CTA click: toggle between "Add to quote" and "Selected"
+    var _t = useState(false), isSupplementOpen = _t[0], setIsSupplementOpen = _t[1];
+    var _u = useState([]), selectedSupplements = _u[0], setSelectedSupplements = _u[1];
+    var dropdownRef = useRef(null);
+    var panelRef = useRef(null);
+    // Synchronize internal isSelected state with the state prop when it changes from parent
+    useEffect(function () {
+        setIsSelected(state === 'selected');
+    }, [state]);
+    var resolvedShowSupplement = showSupplement !== null && showSupplement !== void 0 ? showSupplement : Boolean(supplements.length > 0 && transfers.length > 0);
+    var hasSupplementsSelected = selectedSupplements.some(function (s) { return s.value > 0; });
+    // Close dropdown when clicking outside
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsSupplementOpen(false);
+            }
+        };
+        if (isSupplementOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isSupplementOpen]);
+    // Auto-scroll to panel when opened
+    useEffect(function () {
+        if (isSupplementOpen && panelRef.current) {
+            // Small delay to ensure the panel is rendered
+            setTimeout(function () {
+                var _a;
+                (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                });
+            }, 100);
+        }
+    }, [isSupplementOpen]);
+    var getSupplementSummary = function () {
+        var summary = [];
+        var grouped = selectedSupplements.reduce(function (acc, item) {
+            if (item.value > 0) {
+                if (!acc[item.supplementName]) {
+                    acc[item.supplementName] = 0;
+                }
+                acc[item.supplementName] += item.value;
+            }
+            return acc;
+        }, {});
+        Object.entries(grouped).forEach(function (_a) {
+            var name = _a[0], count = _a[1];
+            summary.push("".concat(name, " x").concat(count));
+        });
+        return summary;
+    };
+    var handleSupplementDone = function (values) {
+        setSelectedSupplements(values);
+        setIsSupplementOpen(false);
+        onSupplementChange === null || onSupplementChange === void 0 ? void 0 : onSupplementChange(values);
+    };
+    var handleSupplementClear = function () {
+        setIsSupplementOpen(false);
+    };
+    var handleSupplementToggle = function () {
+        if (!supplementMessage) {
+            setIsSupplementOpen(!isSupplementOpen);
+        }
+    };
+    var handleRemoveSupplement = function (supplementName) {
+        var updatedValues = selectedSupplements.map(function (s) {
+            return s.supplementName === supplementName ? __assign(__assign({}, s), { value: 0 }) : s;
+        });
+        setSelectedSupplements(updatedValues);
+        onSupplementChange === null || onSupplementChange === void 0 ? void 0 : onSupplementChange(updatedValues);
+    };
+    // Handle CTA click: toggle between "Add to quote" and "Selected" and pass supplement data
     var handleCtaClick = function (e) {
         setIsSelected(!isSelected);
-        onCtaClick === null || onCtaClick === void 0 ? void 0 : onCtaClick(e);
+        // Pass the selected supplements to the parent component
+        onCtaClick === null || onCtaClick === void 0 ? void 0 : onCtaClick(e, selectedSupplements.length > 0 ? selectedSupplements : undefined);
     };
     // Determine button state based on selection and hover
     var shouldShowRemove = isSelected && isHovered;
@@ -71,6 +146,12 @@ var CarBookingCard = function (_a) {
     return (_jsxs("article", { className: classes, children: [_jsx("div", { 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", { className: "car-booking-card__body", children: [_jsxs("section", { className: "car-booking-card__section car-booking-card__section--content", children: [_jsxs("div", { className: "car-booking-card__title", children: [_jsx("span", { className: "car-booking-card__title-marker", "aria-hidden": "true" }), _jsx(Heading, { level: 4, variant: "bold", color: "accent", className: "car-booking-card__title-text", children: title })] }), _jsx("div", { 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 && !readonly && (_jsxs("div", { className: "car-booking-card__info", children: [_jsx("span", { className: "car-booking-card__info-icon", "aria-hidden": "true", children: "i" }), _jsx(Text, { size: "sm", leading: "5", variant: "regular", color: "default", className: "car-booking-card__info-text", children: infoText })] }))] }), resolvedShowSupplement && !readonly && (_jsxs("section", { className: "car-booking-card__section car-booking-card__section--supplement", children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", { className: "car-booking-card__supplement-header", children: [_jsx(Text, { as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title", children: supplementLabel }), supplementMessage && (_jsx(Text, { as: "p", size: "sm", leading: "5", variant: "regular", className: "car-booking-card__supplement-message ".concat(supplementMessageState === 'error' ? 'car-booking-card__supplement-message--error' : '').trim(), children: supplementMessage }))] }), readonly ? (_jsx(Text, { 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 }))] })), priceRows.length > 0 && !readonly && (_jsxs("section", { className: "car-booking-card__section car-booking-card__section--price", children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", { className: "car-booking-card__price-content", children: [_jsx(Text, { as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title", children: priceTitle }), _jsx("div", { className: "car-booking-card__price-rows", children: priceRows.map(function (row, idx) { return (_jsxs("div", { className: "car-booking-card__price-row", children: [_jsx(Text, { size: "sm", leading: "5", variant: "regular", color: "subtle", className: "car-booking-card__price-label", children: row.label }), _jsx(Text, { 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" })] })), !readonly && _jsxs("footer", { className: "car-booking-card__footer", children: [_jsxs("div", { className: "car-booking-card__total", children: [_jsx(Text, { size: "base", variant: "bold", color: "accent", className: "car-booking-card__total-price", children: totalPrice }), _jsx(Text, { size: "sm", variant: "regular", color: "subtle", className: "car-booking-card__total-label", children: totalPriceLabel })] }), !readonly && (_jsx("div", { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, className: "car-booking-card__cta-wrapper", children: _jsx(Button, __assign({}, resolvedCtaButtonProps, { onClick: handleCtaClick, className: "car-booking-card__cta ".concat((_b = resolvedCtaButtonProps === null || resolvedCtaButtonProps === void 0 ? void 0 : resolvedCtaButtonProps.className) !== null && _b !== void 0 ? _b : '').trim(), children: resolvedCtaLabel })) }))] })] })] }));
+                                }) }), infoText && !readonly && (_jsxs("div", { className: "car-booking-card__info", children: [_jsx("span", { className: "car-booking-card__info-icon", "aria-hidden": "true", children: "i" }), _jsx(Text, { size: "sm", leading: "5", variant: "regular", color: "default", className: "car-booking-card__info-text", children: infoText })] }))] }), resolvedShowSupplement && !readonly && (_jsxs("section", { className: "car-booking-card__section car-booking-card__section--supplement", children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", { className: "car-booking-card__supplement-header", children: [_jsx(Text, { as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title", children: supplementLabel }), supplementMessage && (_jsx(Text, { as: "p", size: "sm", leading: "5", variant: "regular", className: "car-booking-card__supplement-message ".concat(supplementMessageState === 'error' ? 'car-booking-card__supplement-message--error' : '').trim(), children: supplementMessage }))] }), _jsxs("div", { className: "car-booking-card__supplement-dropdown", ref: dropdownRef, children: [_jsxs("button", { type: "button", className: "car-booking-card__supplement-trigger ".concat(hasSupplementsSelected ? 'car-booking-card__supplement-trigger--has-value' : '', " ").concat(supplementMessage ? 'car-booking-card__supplement-trigger--disabled' : ''), onClick: handleSupplementToggle, disabled: Boolean(supplementMessage), children: [hasSupplementsSelected ? (_jsx("div", { className: "car-booking-card__supplement-chips", children: getSupplementSummary().map(function (summary, idx) {
+                                                    var name = summary.split(' x')[0];
+                                                    return (_jsx(Chip, { label: summary, size: "sm", color: "accent", trailingIcon: "close", onClick: function (e) {
+                                                            e.stopPropagation();
+                                                            handleRemoveSupplement(name);
+                                                        } }, idx));
+                                                }) })) : (_jsx("span", { className: "car-booking-card__supplement-placeholder", children: supplementPlaceholder })), _jsx(Icon, { name: "chevron-down", size: "sm", className: "car-booking-card__supplement-icon ".concat(isSupplementOpen ? 'car-booking-card__supplement-icon--open' : '') })] }), isSupplementOpen && (_jsx("div", { className: "car-booking-card__supplement-panel", ref: panelRef, children: _jsx(VehicleSupplement, { supplements: supplements, transfer: transfers, initialValues: selectedSupplements, onChange: function () { }, onDone: handleSupplementDone, onClear: handleSupplementClear }) }))] })] })), priceRows.length > 0 && !readonly && (_jsxs("section", { className: "car-booking-card__section car-booking-card__section--price", children: [_jsx(Divider, { variant: "dashed", className: "car-booking-card__dashed-divider" }), _jsxs("div", { className: "car-booking-card__price-content", children: [_jsx(Text, { as: "h3", size: "md", variant: "bold", leading: "none", color: "default", className: "car-booking-card__section-title", children: priceTitle }), _jsx("div", { className: "car-booking-card__price-rows", children: priceRows.map(function (row, idx) { return (_jsxs("div", { className: "car-booking-card__price-row", children: [_jsx(Text, { size: "sm", leading: "5", variant: "regular", color: "subtle", className: "car-booking-card__price-label", children: row.label }), _jsx(Text, { 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" })] })), !readonly && _jsxs("footer", { className: "car-booking-card__footer", children: [_jsxs("div", { className: "car-booking-card__total", children: [_jsx(Text, { size: "base", variant: "bold", color: "accent", className: "car-booking-card__total-price", children: totalPrice }), _jsx(Text, { size: "sm", variant: "regular", color: "subtle", className: "car-booking-card__total-label", children: totalPriceLabel })] }), !readonly && (_jsx("div", { onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, className: "car-booking-card__cta-wrapper", children: _jsx(Button, __assign({}, resolvedCtaButtonProps, { onClick: handleCtaClick, className: "car-booking-card__cta ".concat((_b = resolvedCtaButtonProps === null || resolvedCtaButtonProps === void 0 ? void 0 : resolvedCtaButtonProps.className) !== null && _b !== void 0 ? _b : '').trim(), children: resolvedCtaLabel })) }))] })] })] }));
 };
 export default CarBookingCard;

package/dist/index.d.ts

@@ -39,6 +39,8 @@ export { ServiceLanguages } from './components/molecules/ServiceLanguages/Servic
 export { default as ServiceSelector } from './components/molecules/ServiceSelector/ServiceSelector';
 export { default as Stepper } from './components/molecules/Stepper/Stepper';
 export { default as TextWithIcon } from './components/molecules/TextWithIcon/TextWithIcon';
+export { default as VehicleSupplement } from './components/molecules/VehicleSupplement/VehicleSupplement';
+export type { VehicleSupplementProps, Supplement, SupplementValue } from './components/molecules/VehicleSupplement';
 export { default as TimelineItem } from './components/molecules/TimelineItem/TimelineItem';
 export { default as Toast } from './components/molecules/Toast/Toast';
 export * from './components/molecules/TooltipDisplay/TooltipDisplay';

package/dist/index.js

@@ -41,6 +41,7 @@ export { ServiceLanguages } from './components/molecules/ServiceLanguages/Servic
 export { default as ServiceSelector } from './components/molecules/ServiceSelector/ServiceSelector';
 export { default as Stepper } from './components/molecules/Stepper/Stepper';
 export { default as TextWithIcon } from './components/molecules/TextWithIcon/TextWithIcon';
+export { default as VehicleSupplement } from './components/molecules/VehicleSupplement/VehicleSupplement';
 export { default as TimelineItem } from './components/molecules/TimelineItem/TimelineItem';
 export { default as Toast } from './components/molecules/Toast/Toast';
 export * from './components/molecules/TooltipDisplay/TooltipDisplay';

package/package.json

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

package/src/components/atoms/Chip/Chip.css

@@ -156,11 +156,42 @@
   opacity: 0.6;
 }
 
-.chip--clickable:focus {
+/* Focus styles - specific to each color */
+.chip--clickable.chip--brand:focus {
   outline: 2px solid var(--chip-color-brand-outline-foreground, #ed4c09);
   outline-offset: 2px;
 }
 
+.chip--clickable.chip--accent:focus {
+  outline: 2px solid var(--chip-color-accent-outline-foreground, #0f7173);
+  outline-offset: 2px;
+}
+
+.chip--clickable.chip--blue:focus {
+  outline: 2px solid var(--chip-color-blue-outline-foreground, #2e4780);
+  outline-offset: 2px;
+}
+
+.chip--clickable.chip--green:focus {
+  outline: 2px solid var(--chip-color-green-outline-foreground, #4a6045);
+  outline-offset: 2px;
+}
+
+.chip--clickable.chip--yellow:focus {
+  outline: 2px solid var(--chip-color-yellow-outline-foreground, #eab308);
+  outline-offset: 2px;
+}
+
+.chip--clickable.chip--red:focus {
+  outline: 2px solid var(--chip-color-red-outline-foreground, #991b1b);
+  outline-offset: 2px;
+}
+
+.chip--clickable.chip--neutral:focus {
+  outline: 2px solid var(--chip-color-neutral-outline-foreground, #9ca3af);
+  outline-offset: 2px;
+}
+
 .chip--outline.chip--black-text {
   color: var(--chip-color-neutral-outline-text, #262626);
 }

package/src/components/molecules/VehicleSupplement/VehicleSupplement.css

@@ -0,0 +1,81 @@
+.vehicle-supplement {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-6, 24px);
+  padding: var(--spacing-padding-px-0, 0px);
+}
+
+.vehicle-supplement__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-4, 16px);
+}
+
+.vehicle-supplement__transfer-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-4, 16px);
+}
+
+.vehicle-supplement__transfer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  padding: var(--spacing-gap-gap-0, 0px);
+}
+
+.vehicle-supplement__transfer-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2, 8px);
+}
+
+.vehicle-supplement__transfer-label {
+  font-family: var(--font-font-family-body, "Satoshi"), "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-weight: var(--font-weight-font-bold, 700);
+  font-size: var(--font-size-text-base, 16px);
+  line-height: calc(var(--font-leading-leading-md, 24) * 1px);
+  color: var(--checkbox-color-label-default, #303642);
+}
+
+.vehicle-supplement__supplements-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-3, 12px);
+}
+
+.vehicle-supplement__supplement-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+  padding: var(--spacing-padding-px-0, 0px);
+}
+
+.vehicle-supplement__supplement-name {
+  font-family: var(--font-font-family-body, "Satoshi"), "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-weight: var(--font-weight-font-medium, 500);
+  font-size: var(--font-size-text-base, 16px);
+  line-height: calc(var(--font-leading-leading-md, 24) * 1px);
+  color: var(--checkbox-color-label-default, #303642);
+}
+
+.vehicle-supplement__divider {
+  width: 100%;
+  height: 0;
+  border-top: 1px solid var(--color-border-default, #d9d9d9);
+}
+
+.vehicle-supplement__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-gap-gap-4, 16px);
+  height: 36px;
+}
+
+.vehicle-supplement__cancel-button,
+.vehicle-supplement__done-button {
+  min-width: 114px;
+}

package/src/components/molecules/VehicleSupplement/VehicleSupplement.tsx

@@ -0,0 +1,206 @@
+import React, { useState } from 'react';
+import { TransferDocket } from '../../../types/docket/services.types';
+import Button from '../../atoms/Button/Button';
+import Chip from '../../atoms/Chip/Chip';
+import Icon from '../../atoms/Icon/Icon';
+import Stepper from '../Stepper/Stepper';
+import './VehicleSupplement.css';
+
+export interface Supplement {
+  supplement_name: string;
+  max?: number;
+  min?: number;
+}
+
+export interface SupplementValue {
+  transferId: number;
+  supplementName: string;
+  value: number;
+}
+
+export interface VehicleSupplementProps {
+  /** Array of available supplements */
+  supplements: Supplement[];
+  /** Array of transfers (Arrival, Inter-Hotel, Departure) */
+  transfer: TransferDocket[];
+  /** Handler called when supplement values change */
+  onChange: (values: SupplementValue[]) => void;
+  /** Handler called when Done button is clicked */
+  onDone: (values: SupplementValue[]) => void;
+  /** Handler called when Clear/Cancel button is clicked */
+  onClear: () => void;
+  /** Initial values for the supplements (optional) */
+  initialValues?: SupplementValue[];
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const VehicleSupplement: React.FC<VehicleSupplementProps> = ({
+  supplements,
+  transfer,
+  onChange,
+  onDone,
+  onClear,
+  initialValues = [],
+  className = '',
+}) => {
+  // Initialize state for all supplements across all transfers
+  const [supplementValues, setSupplementValues] = useState<SupplementValue[]>(() => {
+    // If initial values are provided, use them
+    if (initialValues.length > 0) {
+      return initialValues;
+    }
+    
+    // Otherwise, create default values with 0
+    const defaultValues: SupplementValue[] = [];
+    transfer.forEach((t) => {
+      supplements.forEach((s) => {
+        defaultValues.push({
+          transferId: t.IdTransfer,
+          supplementName: s.supplement_name,
+          value: 0,
+        });
+      });
+    });
+    return defaultValues;
+  });
+
+  const getValue = (transferId: number, supplementName: string): number => {
+    const item = supplementValues.find(
+      (v) => v.transferId === transferId && v.supplementName === supplementName
+    );
+    return item?.value || 0;
+  };
+
+  const handleSupplementChange = (
+    transferId: number,
+    supplementName: string,
+    newValue: number
+  ) => {
+    const updatedValues = supplementValues.map((v) =>
+      v.transferId === transferId && v.supplementName === supplementName
+        ? { ...v, value: newValue }
+        : v
+    );
+    setSupplementValues(updatedValues);
+    onChange(updatedValues);
+  };
+
+  const getTransferTypeIcon = (transferType: string) => {
+    const type = transferType.toLowerCase();
+    if (type.includes('arrival') || type.includes('airport') || type.includes('inbound')) {
+      return 'plane-landing-outline';
+    }
+    if (type.includes('departure') || type.includes('outbound')) {
+      return 'plane-takeoff-outline';
+    }
+    return 'building-2-outline';
+  };
+
+  const getTransferTypeLabel = (transferType: string): string => {
+    const type = transferType.toLowerCase();
+    if (type.includes('arrival') || type.includes('airport') || type.includes('inbound')) {
+      return 'Arrival';
+    }
+    if (type.includes('departure') || type.includes('outbound')) {
+      return 'Departure';
+    }
+    return 'Inter-Hotel';
+  };
+
+  const formatDate = (dateStr: string): string => {
+    try {
+      const date = new Date(dateStr);
+      const day = String(date.getDate()).padStart(2, '0');
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const year = date.getFullYear();
+      return `${day}/${month}/${year}`;
+    } catch {
+      return dateStr;
+    }
+  };
+
+  const handleDone = () => {
+    onDone(supplementValues);
+  };
+
+  const baseClass = 'vehicle-supplement';
+  const classes = [baseClass, className].filter(Boolean).join(' ');
+
+  return (
+    <div className={classes}>
+      <div className={`${baseClass}__content`}>
+        {transfer.map((t, index) => {
+          const isLast = index === transfer.length - 1;
+          const typeLabel = getTransferTypeLabel(t.TransferType);
+          const iconName = getTransferTypeIcon(t.TransferType);
+
+          return (
+            <div key={t.IdTransfer} className={`${baseClass}__transfer-section`}>
+              <div className={`${baseClass}__transfer-header`}>
+                <div className={`${baseClass}__transfer-title`}>
+                  <Icon name={iconName as any} size="sm" />
+                  <span className={`${baseClass}__transfer-label`}>{typeLabel}</span>
+                </div>
+                <Chip
+                  leadingIcon="calendar"
+                  label={formatDate(t.TransferDate)}
+                  size="sm"
+                  color="neutral"
+                  isBlackText
+                />
+              </div>
+
+              <div className={`${baseClass}__supplements-list`}>
+                {supplements.map((supplement) => {
+                  const currentValue = getValue(t.IdTransfer, supplement.supplement_name);
+                  return (
+                    <div
+                      key={supplement.supplement_name}
+                      className={`${baseClass}__supplement-row`}
+                    >
+                      <span className={`${baseClass}__supplement-name`}>
+                        {supplement.supplement_name}
+                      </span>
+                      <Stepper
+                        value={currentValue}
+                        min={supplement.min || 0}
+                        max={supplement.max || 99}
+                        onChange={(value) =>
+                          handleSupplementChange(t.IdTransfer, supplement.supplement_name, value)
+                        }
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+
+              {!isLast && <div className={`${baseClass}__divider`} />}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className={`${baseClass}__footer`}>
+        <Button
+          variant="outline-secondary"
+          size="sm"
+          onClick={onClear}
+          className={`${baseClass}__cancel-button`}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={handleDone}
+          className={`${baseClass}__done-button`}
+        >
+          Done
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default VehicleSupplement;

package/src/components/molecules/VehicleSupplement/index.ts

@@ -0,0 +1,2 @@
+export { default } from './VehicleSupplement';
+export type { VehicleSupplementProps, Supplement, SupplementValue } from './VehicleSupplement';

package/src/components/organisms/CarBookingCard/CarBookingCard.css

@@ -248,4 +248,121 @@
   white-space: nowrap;
 }
 
+/* Supplement dropdown styles */
+.car-booking-card__supplement-dropdown {
+  position: relative;
+  width: 100%;
+}
+
+.car-booking-card__supplement-trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-gap-gap-2, 8px);
+  padding: var(--spacing-padding-py-3, 12px) var(--spacing-padding-px-4, 16px);
+  background: var(--color-elevation-level-1, #ffffff);
+  border: var(--input-border-width-default, 1px) solid var(--color-border-default, #d4d4d4);
+  border-radius: var(--border-radius-rounded-xl, 12px);
+  font-family: var(--font-font-family-body, "Satoshi"), "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: var(--font-size-text-base, 16px);
+  line-height: calc(var(--font-leading-leading-md, 24) * 1px);
+  color: var(--color-text-default, #262626);
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  min-height: 48px;
+}
+
+.car-booking-card__supplement-trigger:hover:not(:disabled) {
+  border-color: var(--color-border-active-default, #0f7173);
+}
+
+.car-booking-card__supplement-trigger:focus {
+  outline: var(--border-width-focus, 2px) solid var(--color-border-active-default, #0f7173);
+  outline-offset: var(--spacing-base-0-5, 2px);
+}
+
+.car-booking-card__supplement-trigger--disabled {
+  background: var(--color-elevation-level-2, #f5f5f5);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.car-booking-card__supplement-placeholder {
+  color: var(--color-text-subtle, #737373);
+  font-weight: var(--font-weight-font-regular, 400);
+}
+
+.car-booking-card__supplement-trigger--has-value .car-booking-card__supplement-placeholder {
+  color: var(--color-text-default, #262626);
+}
+
+.car-booking-card__supplement-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-gap-gap-2, 8px);
+  flex: 1;
+  align-items: center;
+}
+
+/* Ensure chips are properly interactive within the button */
+.car-booking-card__supplement-chips .chip {
+  cursor: pointer;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  user-select: none;
+}
+
+/* Hover state for chips - subtle scale and opacity change */
+.car-booking-card__supplement-chips .chip:hover {
+  opacity: 0.85;
+  transform: translateY(-1px);
+}
+
+/* Active/pressed state for chips */
+.car-booking-card__supplement-chips .chip:active {
+  opacity: 0.7;
+  transform: translateY(0);
+}
+
+/* Make close icon more prominent on chip hover */
+.car-booking-card__supplement-chips .chip:hover .chip__icon--trailing {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+/* Transition for chip icons */
+.car-booking-card__supplement-chips .chip .chip__icon--trailing {
+  transition: transform 0.15s ease, opacity 0.15s ease;
+  opacity: 0.8;
+}
+
+.car-booking-card__supplement-icon {
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.car-booking-card__supplement-icon--open {
+  transform: rotate(180deg);
+}
+
+.car-booking-card__supplement-panel {
+  position: absolute;
+  top: calc(100% + var(--spacing-gap-gap-2, 8px));
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background: var(--color-elevation-level-1, #ffffff);
+  border-radius: var(--border-radius-rounded-xl, 12px);
+  box-shadow:
+    var(--spacing-base-0, 0px) var(--spacing-base-1, 4px)
+      var(--backdrop-blur-backdrop-blur, 8px) var(--spacing-base-0, 0px)
+      rgba(48, 54, 66, 0.1),
+    var(--spacing-base-0, 0px) var(--spacing-base-px, 1px)
+      var(--backdrop-blur-backdrop-blur, 8px) var(--spacing-base-0, 0px)
+      rgba(48, 54, 66, 0.11);
+  padding: var(--spacing-padding-py-6, 24px);
+  max-height: 600px;
+  overflow-y: auto;
+}
+
 

package/src/components/organisms/CarBookingCard/CarBookingCard.tsx

@@ -1,9 +1,12 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { TransferDocket } from '../../../types/docket/services.types';
 import Button, { ButtonProps } from '../../atoms/Button/Button';
+import Chip from '../../atoms/Chip/Chip';
 import Divider from '../../atoms/Divider/Divider';
-import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
+import Icon from '../../atoms/Icon/Icon';
 import { Heading, Text } from '../../atoms/Typography/Typography';
 import FeatureRow, { FeatureRowProps } from '../../molecules/FeatureRow/FeatureRow';
+import VehicleSupplement, { Supplement, SupplementValue } from '../../molecules/VehicleSupplement/VehicleSupplement';
 import './CarBookingCard.css';
 
 export type CarBookingCardSize = 'small' | 'large';
@@ -46,10 +49,12 @@ export interface CarBookingCardProps {
   supplementMessageState?: 'default' | 'error';
   supplementLabel?: string;
   supplementPlaceholder?: string;
-  supplementValue?: string;
-  supplementState?: 'default' | 'loading' | 'selected' | 'error' | 'disabled';
-  supplementOptions?: string[];
-  onSupplementSelect?: (option: string) => void;
+  /** Array of available supplements */
+  supplements?: Supplement[];
+  /** Array of transfers for supplement selection */
+  transfers?: TransferDocket[];
+  /** Handler when supplements are selected */
+  onSupplementChange?: (values: SupplementValue[]) => void;
 
   /** Footer price */
   totalPrice: string;
@@ -58,7 +63,7 @@ export interface CarBookingCardProps {
   /** Footer CTA */
   ctaLabel: string;
   ctaButtonProps?: Omit<ButtonProps, 'children'>;
-  onCtaClick?: ButtonProps['onClick'];
+  onCtaClick?: (event: React.MouseEvent<HTMLButtonElement>, supplements?: SupplementValue[]) => void;
 
   /** Readonly mode - disables interactions and shows values as text */
   readonly?: boolean;
@@ -81,10 +86,9 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
   supplementMessageState = 'error',
   supplementLabel = 'Supplement',
   supplementPlaceholder = 'Select a supplement',
-  supplementValue,
-  supplementState = 'default',
-  supplementOptions = [],
-  onSupplementSelect,
+  supplements = [],
+  transfers = [],
+  onSupplementChange,
   totalPrice,
   totalPriceLabel = 'Total price',
   ctaLabel,
@@ -95,16 +99,99 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
 }) => {
   const [isSelected, setIsSelected] = useState(state === 'selected');
   const [isHovered, setIsHovered] = useState(false);
+  const [isSupplementOpen, setIsSupplementOpen] = useState(false);
+  const [selectedSupplements, setSelectedSupplements] = useState<SupplementValue[]>([]);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  
+  // Synchronize internal isSelected state with the state prop when it changes from parent
+  useEffect(() => {
+    setIsSelected(state === 'selected');
+  }, [state]);
   
   const resolvedShowSupplement =
-    showSupplement ?? Boolean(supplementLabel || supplementPlaceholder || supplementOptions.length > 0);
-  const resolvedSupplementState =
-    supplementMessage ? 'disabled' : supplementState;
+    showSupplement ?? Boolean(supplements.length > 0 && transfers.length > 0);
+  
+  const hasSupplementsSelected = selectedSupplements.some((s) => s.value > 0);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsSupplementOpen(false);
+      }
+    };
+
+    if (isSupplementOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isSupplementOpen]);
+
+  // Auto-scroll to panel when opened
+  useEffect(() => {
+    if (isSupplementOpen && panelRef.current) {
+      // Small delay to ensure the panel is rendered
+      setTimeout(() => {
+        panelRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+        });
+      }, 100);
+    }
+  }, [isSupplementOpen]);
+
+  const getSupplementSummary = (): string[] => {
+    const summary: string[] = [];
+    const grouped = selectedSupplements.reduce((acc, item) => {
+      if (item.value > 0) {
+        if (!acc[item.supplementName]) {
+          acc[item.supplementName] = 0;
+        }
+        acc[item.supplementName] += item.value;
+      }
+      return acc;
+    }, {} as Record<string, number>);
+
+    Object.entries(grouped).forEach(([name, count]) => {
+      summary.push(`${name} x${count}`);
+    });
+
+    return summary;
+  };
+
+  const handleSupplementDone = (values: SupplementValue[]) => {
+    setSelectedSupplements(values);
+    setIsSupplementOpen(false);
+    onSupplementChange?.(values);
+  };
 
-  // Handle CTA click: toggle between "Add to quote" and "Selected"
+  const handleSupplementClear = () => {
+    setIsSupplementOpen(false);
+  };
+
+  const handleSupplementToggle = () => {
+    if (!supplementMessage) {
+      setIsSupplementOpen(!isSupplementOpen);
+    }
+  };
+
+  const handleRemoveSupplement = (supplementName: string) => {
+    const updatedValues = selectedSupplements.map((s) =>
+      s.supplementName === supplementName ? { ...s, value: 0 } : s
+    );
+    setSelectedSupplements(updatedValues);
+    onSupplementChange?.(updatedValues);
+  };
+
+  // Handle CTA click: toggle between "Add to quote" and "Selected" and pass supplement data
   const handleCtaClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     setIsSelected(!isSelected);
-    onCtaClick?.(e);
+    // Pass the selected supplements to the parent component
+    onCtaClick?.(e, selectedSupplements.length > 0 ? selectedSupplements : undefined);
   };
 
   // Determine button state based on selection and hover
@@ -215,25 +302,58 @@ const CarBookingCard: React.FC<CarBookingCardProps> = ({
                 </Text>
               )}
             </div>
-            {readonly ? (
-              <Text
-                size="sm"
-                leading="5"
-                variant="regular"
-                color={supplementValue ? "default" : "subtle"}
-                className="car-booking-card__supplement-value"
+            
+            <div className="car-booking-card__supplement-dropdown" ref={dropdownRef}>
+              <button
+                type="button"
+                className={`car-booking-card__supplement-trigger ${hasSupplementsSelected ? 'car-booking-card__supplement-trigger--has-value' : ''} ${supplementMessage ? 'car-booking-card__supplement-trigger--disabled' : ''}`}
+                onClick={handleSupplementToggle}
+                disabled={Boolean(supplementMessage)}
               >
-                {supplementValue || supplementPlaceholder}
-              </Text>
-            ) : (
-              <DropdownInput
-                placeholder={supplementPlaceholder}
-                value={supplementValue}
-                state={resolvedSupplementState}
-                options={supplementOptions}
-                onSelect={onSupplementSelect}
-              />
-            )}
+                {hasSupplementsSelected ? (
+                  <div className="car-booking-card__supplement-chips">
+                    {getSupplementSummary().map((summary, idx) => {
+                      const [name] = summary.split(' x');
+                      return (
+                        <Chip
+                          key={idx}
+                          label={summary}
+                          size="sm"
+                          color="accent"
+                          trailingIcon="close"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleRemoveSupplement(name);
+                          }}
+                        />
+                      );
+                    })}
+                  </div>
+                ) : (
+                  <span className="car-booking-card__supplement-placeholder">
+                    {supplementPlaceholder}
+                  </span>
+                )}
+                <Icon
+                  name="chevron-down"
+                  size="sm"
+                  className={`car-booking-card__supplement-icon ${isSupplementOpen ? 'car-booking-card__supplement-icon--open' : ''}`}
+                />
+              </button>
+
+              {isSupplementOpen && (
+                <div className="car-booking-card__supplement-panel" ref={panelRef}>
+                  <VehicleSupplement
+                    supplements={supplements}
+                    transfer={transfers}
+                    initialValues={selectedSupplements}
+                    onChange={() => {}}
+                    onDone={handleSupplementDone}
+                    onClear={handleSupplementClear}
+                  />
+                </div>
+              )}
+            </div>
           </section>
         )}