mautourco-components 0.2.7 → 0.2.8

package/dist/components/atoms/Typography/Typography.d.ts

@@ -4,9 +4,11 @@ type BodySizeInput = BodyTokenSize | 'base' | 'xl';
 type Variant = 'light' | 'regular' | 'medium' | 'bold' | 'black';
 type Leading = 'none' | '4' | '5' | '6' | '7';
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type TextColor = 'default' | 'accent' | 'subtle' | 'light' | 'brand' | 'inverted' | 'state-default' | 'state-hover' | 'state-filled' | 'state-disabled' | 'state-error' | 'state-success';
 interface BaseProps {
     variant?: Variant;
     leading?: Leading;
+    color?: TextColor;
     className?: string;
     children: React.ReactNode;
     onClick?: React.MouseEventHandler<Element>;

package/dist/components/atoms/Typography/Typography.js

@@ -66,9 +66,16 @@ var buildVariantClass = function (base, variant) {
         return undefined;
     return "".concat(base, "--").concat(variant);
 };
+var getColorStyle = function (color) {
+    if (!color)
+        return {};
+    return {
+        color: "var(--color-text-".concat(color, ", inherit)"),
+    };
+};
 export var Heading = function (_a) {
     var _b;
-    var _c = _a.level, level = _c === void 0 ? 2 : _c, _d = _a.variant, variant = _d === void 0 ? 'bold' : _d, leading = _a.leading, as = _a.as, _e = _a.className, className = _e === void 0 ? '' : _e, children = _a.children, onClick = _a.onClick;
+    var _c = _a.level, level = _c === void 0 ? 2 : _c, _d = _a.variant, variant = _d === void 0 ? 'bold' : _d, leading = _a.leading, color = _a.color, as = _a.as, _e = _a.className, className = _e === void 0 ? '' : _e, children = _a.children, onClick = _a.onClick;
     var Tag = as || "h".concat(level);
     var baseClass = (_b = headingTokenClass[level]) !== null && _b !== void 0 ? _b : headingTokenClass[2];
     var variantClass = buildVariantClass(baseClass, variant);
@@ -80,10 +87,11 @@ export var Heading = function (_a) {
     ]
         .filter(Boolean)
         .join(' ');
-    return (_jsx(Tag, __assign({ className: classes, onClick: onClick }, { children: children })));
+    var colorStyle = getColorStyle(color);
+    return (_jsx(Tag, __assign({ className: classes, style: colorStyle, onClick: onClick }, { children: children })));
 };
 export var Text = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.variant, variant = _c === void 0 ? 'regular' : _c, leading = _a.leading, as = _a.as, _d = _a.className, className = _d === void 0 ? '' : _d, children = _a.children, onClick = _a.onClick;
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.variant, variant = _c === void 0 ? 'regular' : _c, leading = _a.leading, color = _a.color, as = _a.as, _d = _a.className, className = _d === void 0 ? '' : _d, children = _a.children, onClick = _a.onClick;
     var Tag = as || 'p';
     var normalizedSize = bodySizeAlias[size];
     var _e = getBodyClass(normalizedSize, leading), baseClass = _e.className, lineHeightHandled = _e.lineHeightHandled;
@@ -96,5 +104,6 @@ export var Text = function (_a) {
     ]
         .filter(Boolean)
         .join(' ');
-    return (_jsx(Tag, __assign({ className: classes, onClick: onClick }, { children: children })));
+    var colorStyle = getColorStyle(color);
+    return (_jsx(Tag, __assign({ className: classes, style: colorStyle, onClick: onClick }, { children: children })));
 };

package/dist/components/molecules/RatingTab/RatingTab.js

@@ -36,6 +36,6 @@ var RatingTab = function (_a) {
     };
     var stateClass = disabled ? 'rating-tab--disabled' : checked ? 'rating-tab--active' : 'rating-tab--default';
     var containerClasses = ['rating-tab', stateClass, className].filter(Boolean).join(' ');
-    return (_jsxs("div", __assign({ className: containerClasses, role: "checkbox", "aria-checked": checked, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: handleToggle, onKeyDown: handleKeyDown }, { children: [_jsxs("div", __assign({ className: "rating-tab__left" }, { children: [_jsx("div", __assign({ className: "rating-tab__checkbox" }, { children: checked && _jsx(Check, { size: "sm", className: "rating-tab__checkbox-icon" }) })), _jsx(Text, __assign({ size: "sm", className: "rating-tab__label" }, { children: label }))] })), _jsx(RatingStar, { value: ratingValue, max: maxStars })] })));
+    return (_jsxs("div", __assign({ className: containerClasses, role: "checkbox", "aria-checked": checked, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: handleToggle, onKeyDown: handleKeyDown }, { children: [_jsxs("div", __assign({ className: "rating-tab__left" }, { children: [_jsx("div", __assign({ className: "rating-tab__checkbox" }, { children: checked && _jsx(Check, { size: "sm", className: "rating-tab__checkbox-icon" }) })), _jsx(Text, __assign({ size: "sm", color: "default", className: "rating-tab__label" }, { children: label }))] })), _jsx(RatingStar, { value: ratingValue, max: maxStars })] })));
 };
 export default RatingTab;

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

@@ -149,7 +149,7 @@ var StepperRow = function (_a) {
             onChange(value + 1);
         }
     };
-    return (_jsxs("div", __assign({ className: "pax-selector__stepper" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", className: "pax-selector__stepper-label" }, { children: label })), _jsxs("div", __assign({ className: "pax-selector__stepper-controls" }, { children: [_jsx("button", __assign({ type: "button", className: "pax-selector__stepper-btn", onClick: handleDecrement, disabled: value <= min, "aria-label": "Decrease ".concat(label) }, { children: _jsx(Icon, { name: "minus", size: "sm" }) })), _jsx("span", __assign({ className: "pax-selector__stepper-count" }, { children: value })), _jsx("button", __assign({ type: "button", className: "pax-selector__stepper-btn", onClick: handleIncrement, disabled: value >= max, "aria-label": "Increase ".concat(label) }, { children: _jsx(Icon, { name: "plus", size: "sm" }) }))] }))] })));
+    return (_jsxs("div", __assign({ className: "pax-selector__stepper" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", color: "default", className: "pax-selector__stepper-label" }, { children: label })), _jsxs("div", __assign({ className: "pax-selector__stepper-controls" }, { children: [_jsx("button", __assign({ type: "button", className: "pax-selector__stepper-btn", onClick: handleDecrement, disabled: value <= min, "aria-label": "Decrease ".concat(label) }, { children: _jsx(Icon, { name: "minus", size: "sm" }) })), _jsx("span", __assign({ className: "pax-selector__stepper-count" }, { children: value })), _jsx("button", __assign({ type: "button", className: "pax-selector__stepper-btn", onClick: handleIncrement, disabled: value >= max, "aria-label": "Increase ".concat(label) }, { children: _jsx(Icon, { name: "plus", size: "sm" }) }))] }))] })));
 };
 var ClientTypeSelector = function (_a) {
     var value = _a.value, onChange = _a.onChange;
@@ -223,7 +223,7 @@ var RoomEditor = function (_a) {
     var teenAgeChunks = chunkAges(room.teenAges || [], 'Teen');
     var childAgeChunks = chunkAges(room.childAges || [], 'Child');
     var infantAgeChunks = chunkAges(room.infantAges || [], 'Infant');
-    return (_jsxs("div", __assign({ className: "pax-selector__room-container" }, { children: [_jsxs("div", __assign({ className: "pax-selector__room-header" }, { children: [_jsxs("div", __assign({ className: "pax-selector__room-title" }, { children: [_jsxs(Text, __assign({ size: "lg", variant: "bold", className: "pax-selector__room-name" }, { children: ["Room ", roomNumber] })), _jsx(Icon, { name: "home", size: "md", className: "pax-selector__room-icon" })] })), showRemove && (_jsxs("button", __assign({ type: "button", className: "pax-selector__room-remove", onClick: onRemove, "aria-label": "Remove room ".concat(roomNumber) }, { children: [_jsx(Icon, { name: "close", size: "sm", className: "pax-selector__room-remove-icon" }), _jsx("span", __assign({ className: "pax-selector__room-remove-text" }, { children: "Remove" }))] })))] })), _jsxs("div", __assign({ className: "pax-selector__room-content" }, { children: [_jsxs("div", __assign({ className: "pax-selector__steppers" }, { children: [_jsx(StepperRow, { label: "Adult", value: room.adults, max: maxAdults, onChange: function (val) { return handleFieldChange('adults', val); } }), _jsx(StepperRow, { label: "Teen", value: room.teens, max: maxTeens, onChange: function (val) { return handleFieldChange('teens', val); } }), _jsx(StepperRow, { label: "Child", value: room.children, max: maxChildren, onChange: function (val) { return handleFieldChange('children', val); } }), _jsx(StepperRow, { label: "Infant", value: room.infants, max: maxInfants, onChange: function (val) { return handleFieldChange('infants', val); } })] })), ((room.teens > 0) || (room.children > 0) || (room.infants > 0)) && (_jsxs("div", __assign({ className: "pax-selector__age-section" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", className: "pax-selector__age-section-title" }, { children: "Please specify the age :" })), _jsxs("div", __assign({ className: "pax-selector__age-groups" }, { children: [room.teens > 0 && teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
+    return (_jsxs("div", __assign({ className: "pax-selector__room-container" }, { children: [_jsxs("div", __assign({ className: "pax-selector__room-header" }, { children: [_jsxs("div", __assign({ className: "pax-selector__room-title" }, { children: [_jsxs(Text, __assign({ size: "lg", variant: "bold", color: "accent", className: "pax-selector__room-name" }, { children: ["Room ", roomNumber] })), _jsx(Icon, { name: "home", size: "md", className: "pax-selector__room-icon" })] })), showRemove && (_jsxs("button", __assign({ type: "button", className: "pax-selector__room-remove", onClick: onRemove, "aria-label": "Remove room ".concat(roomNumber) }, { children: [_jsx(Icon, { name: "close", size: "sm", className: "pax-selector__room-remove-icon" }), _jsx("span", __assign({ className: "pax-selector__room-remove-text" }, { children: "Remove" }))] })))] })), _jsxs("div", __assign({ className: "pax-selector__room-content" }, { children: [_jsxs("div", __assign({ className: "pax-selector__steppers" }, { children: [_jsx(StepperRow, { label: "Adult", value: room.adults, max: maxAdults, onChange: function (val) { return handleFieldChange('adults', val); } }), _jsx(StepperRow, { label: "Teen", value: room.teens, max: maxTeens, onChange: function (val) { return handleFieldChange('teens', val); } }), _jsx(StepperRow, { label: "Child", value: room.children, max: maxChildren, onChange: function (val) { return handleFieldChange('children', val); } }), _jsx(StepperRow, { label: "Infant", value: room.infants, max: maxInfants, onChange: function (val) { return handleFieldChange('infants', val); } })] })), ((room.teens > 0) || (room.children > 0) || (room.infants > 0)) && (_jsxs("div", __assign({ className: "pax-selector__age-section" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", color: "default", className: "pax-selector__age-section-title" }, { children: "Please specify the age :" })), _jsxs("div", __assign({ className: "pax-selector__age-groups" }, { children: [room.teens > 0 && teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
                                             var actualIndex = chunkIndex * 2 + ageIndex;
                                             return (_jsx(AgeSelector, { label: "Teen", value: age, onChange: function (selectedAge) { return handleAgeChange('teenAges', actualIndex, selectedAge); }, ageRange: CHILD_CATEGORY_AGES, required: true }, "teen-".concat(actualIndex)));
                                         }) }), "teen-chunk-".concat(chunkIndex))); }), room.children > 0 && childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
@@ -371,7 +371,7 @@ var PaxSelector = function (_a) {
     var hasPax = getTotalPax() > 0;
     return (_jsxs("div", __assign({ className: "pax-selector ".concat(className), ref: containerRef }, { children: [_jsxs("button", __assign({ type: "button", className: "pax-selector__trigger", onClick: function () { return setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "true" }, { children: [_jsx(Text, __assign({ size: "sm", variant: "regular", className: "pax-selector__label" }, { children: label })), _jsxs("div", __assign({ className: "pax-selector__input ".concat(isOpen ? 'pax-selector__input--active' : '') }, { children: [_jsxs("div", __assign({ className: "pax-selector__input-content" }, { children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__input-icon" }), _jsx("span", __assign({ className: "pax-selector__input-text ".concat(!hasPax ? 'pax-selector__input-placeholder' : '') }, { children: getDisplayText() }))] })), _jsx(Icon, { name: "chevron-down", size: "sm", className: "pax-selector__chevron ".concat(isOpen ? 'pax-selector__chevron--open' : '') })] }))] })), isOpen && (_jsxs("div", __assign({ className: "pax-selector__dropdown" }, { children: [multipleRooms ? (_jsxs(_Fragment, { children: [showAddRoom && (_jsxs("button", __assign({ type: "button", className: "pax-selector__add-room", onClick: handleAddRoom }, { children: [_jsx(Icon, { name: "home", size: "sm", className: "pax-selector__add-room-icon" }), "Add a room", _jsx(Icon, { name: "plus", size: "sm", className: "pax-selector__add-room-icon" })] }))), _jsx("div", __assign({ className: "pax-selector__rooms" }, { children: rooms.map(function (room, index) { return (_jsx(RoomEditor, { room: room, roomNumber: index + 1, showRemove: rooms.length > 1, maxAdults: maxAdults, maxTeens: maxTeens, maxChildren: maxChildren, maxInfants: maxInfants, onChange: function (updatedRoom) { return handleRoomChange(room.roomId, updatedRoom); }, onRemove: function () { return handleRemoveRoom(room.roomId); } }, room.roomId)); }) }))] })) : (
                     /* Single Room Mode */
-                    _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "pax-selector__steppers" }, { children: [_jsx(StepperRow, { label: "Adult", value: internalData.adults, max: maxAdults, onChange: function (val) { return handleDataChange('adults', val); } }), _jsx(StepperRow, { label: "Teen", value: internalData.teens, max: maxTeens, onChange: function (val) { return handleDataChange('teens', val); } }), _jsx(StepperRow, { label: "Child", value: internalData.children, max: maxChildren, onChange: function (val) { return handleDataChange('children', val); } }), _jsx(StepperRow, { label: "Infant", value: internalData.infants, max: maxInfants, onChange: function (val) { return handleDataChange('infants', val); } })] })), ((internalData.teens > 0) || (internalData.children > 0) || (internalData.infants > 0)) && (_jsxs("div", __assign({ className: "pax-selector__age-section" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", className: "pax-selector__age-section-title" }, { children: "Please specify the age :" })), _jsx("div", __assign({ className: "pax-selector__age-groups" }, { children: (function () {
+                    _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "pax-selector__steppers" }, { children: [_jsx(StepperRow, { label: "Adult", value: internalData.adults, max: maxAdults, onChange: function (val) { return handleDataChange('adults', val); } }), _jsx(StepperRow, { label: "Teen", value: internalData.teens, max: maxTeens, onChange: function (val) { return handleDataChange('teens', val); } }), _jsx(StepperRow, { label: "Child", value: internalData.children, max: maxChildren, onChange: function (val) { return handleDataChange('children', val); } }), _jsx(StepperRow, { label: "Infant", value: internalData.infants, max: maxInfants, onChange: function (val) { return handleDataChange('infants', val); } })] })), ((internalData.teens > 0) || (internalData.children > 0) || (internalData.infants > 0)) && (_jsxs("div", __assign({ className: "pax-selector__age-section" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", color: "default", className: "pax-selector__age-section-title" }, { children: "Please specify the age :" })), _jsx("div", __assign({ className: "pax-selector__age-groups" }, { children: (function () {
                                             var chunkAges = function (ages, category) {
                                                 var chunks = [];
                                                 for (var i = 0; i < ages.length; i += 2) {

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

@@ -164,7 +164,7 @@ var SearchBarTransfer = function (_a) {
             onSearch === null || onSearch === void 0 ? void 0 : onSearch(data);
         }
     };
-    return (_jsxs("div", __assign({ className: "search-bar-transfer ".concat(className) }, { children: [_jsxs("div", __assign({ className: "search-bar-transfer__header" }, { children: [_jsx(Heading, __assign({ level: 5, variant: "bold", className: "search-bar-transfer__title" }, { children: "Select your transfer details" })), _jsx("div", __assign({ className: "search-bar-transfer__mode-selector" }, { children: _jsx(SegmentedButton, { options: modeOptions, value: mode, onChange: handleModeChange, name: "transfer-mode" }) }))] })), mode === "roundtrip" ? (_jsx(RoundTrip, { id: "roundtrip-main", locations: locations, paxData: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.paxData, arrivalDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.arrivalDate, departureDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.departureDate, pickupDropoffPoint: (_b = roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.pickupDropoffPoint) === null || _b === void 0 ? void 0 : _b.id, accommodation: (_c = roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.accommodation) === null || _c === void 0 ? void 0 : _c.id, onChange: setRoundTripData })) : (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "search-bar-transfer__transfer-type" }, { children: [_jsx(Text, __assign({ size: "lg", variant: "bold", as: "div", className: "search-bar-transfer__transfer-type-label" }, { children: "Select a transfer type you want to add" })), _jsxs("div", __assign({ className: "search-bar-transfer__add-buttons" }, { children: [_jsx(Button, __assign({ variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: function () { return handleAddTransfer("arrival"); } }, { children: "Add Arrival" })), _jsx(Button, __assign({ variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: function () { return handleAddTransfer("departure"); } }, { children: "Add Departure" })), _jsx(Button, __assign({ variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: function () { return handleAddTransfer("inter-hotel"); } }, { children: "Add Inter-Hotel" }))] }))] })), transferLines.length > 0 && (_jsx("div", __assign({ className: "search-bar-transfer__transfer-lines" }, { children: (function () {
+    return (_jsxs("div", __assign({ className: "search-bar-transfer ".concat(className) }, { children: [_jsxs("div", __assign({ className: "search-bar-transfer__header" }, { children: [_jsx(Heading, __assign({ level: 5, variant: "bold", color: "accent" }, { children: "Select your transfer details" })), _jsx("div", __assign({ className: "search-bar-transfer__mode-selector" }, { children: _jsx(SegmentedButton, { options: modeOptions, value: mode, onChange: handleModeChange, name: "transfer-mode" }) }))] })), mode === "roundtrip" ? (_jsx(RoundTrip, { id: "roundtrip-main", locations: locations, paxData: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.paxData, arrivalDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.arrivalDate, departureDate: roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.departureDate, pickupDropoffPoint: (_b = roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.pickupDropoffPoint) === null || _b === void 0 ? void 0 : _b.id, accommodation: (_c = roundTripData === null || roundTripData === void 0 ? void 0 : roundTripData.accommodation) === null || _c === void 0 ? void 0 : _c.id, onChange: setRoundTripData })) : (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "search-bar-transfer__transfer-type" }, { children: [_jsx(Text, __assign({ size: "lg", variant: "bold", color: "subtle", as: "div", className: "search-bar-transfer__transfer-type-label" }, { children: "Select a transfer type you want to add" })), _jsxs("div", __assign({ className: "search-bar-transfer__add-buttons" }, { children: [_jsx(Button, __assign({ variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: function () { return handleAddTransfer("arrival"); } }, { children: "Add Arrival" })), _jsx(Button, __assign({ variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: function () { return handleAddTransfer("departure"); } }, { children: "Add Departure" })), _jsx(Button, __assign({ variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: function () { return handleAddTransfer("inter-hotel"); } }, { children: "Add Inter-Hotel" }))] }))] })), transferLines.length > 0 && (_jsx("div", __assign({ className: "search-bar-transfer__transfer-lines" }, { children: (function () {
                             // Group transfers by type
                             var groupedTransfers = {
                                 arrival: [],
@@ -183,7 +183,7 @@ var SearchBarTransfer = function (_a) {
                                 departure: { label: "Departure", icon: "departure" },
                                 "inter-hotel": { label: "Inter-Hotel", icon: "building" },
                             };
-                            return nonEmptyGroups.map(function (type, groupIndex) { return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: "search-bar-transfer__category-header" }, { children: [_jsx(Icon, { name: categoryInfo[type].icon, size: "md" }), _jsx(Text, __assign({ size: "md", variant: "bold", as: "span" }, { children: categoryInfo[type].label }))] })), groupedTransfers[type].map(function (line) {
+                            return nonEmptyGroups.map(function (type, groupIndex) { return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: "search-bar-transfer__category-header" }, { children: [_jsx(Icon, { name: categoryInfo[type].icon, size: "md" }), _jsx(Text, __assign({ size: "md", variant: "bold", color: "default", as: "span" }, { children: categoryInfo[type].label }))] })), groupedTransfers[type].map(function (line) {
                                         var _a, _b;
                                         return (_jsx(TransferLine, { id: line.id, type: line.type, paxData: line.paxData, transferDate: line.transferDate, pickupPoint: (_a = line.pickupPoint) === null || _a === void 0 ? void 0 : _a.id, dropoffPoint: (_b = line.dropoffPoint) === null || _b === void 0 ? void 0 : _b.id, locations: locations, onDataChange: function (data) { return handleTransferLineChange(line.id, data); }, onDelete: function () { return handleDeleteTransferLine(line.id); }, showDelete: transferLines.length > 1 }, line.id));
                                     }), groupIndex < nonEmptyGroups.length - 1 && (_jsx("svg", __assign({ className: "search-bar-transfer__divider", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "1", viewBox: "0 0 1076 1", fill: "none", preserveAspectRatio: "none" }, { children: _jsx("path", { d: "M0 0.5L1076 0.499906", stroke: "var(--color-border-medium, #A3A3A3)", strokeWidth: "1", strokeDasharray: "10 10" }) })))] }, type)); });

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

@@ -2236,11 +2236,7 @@
 }
 
 .pax-selector__stepper-label {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--color-text-default, #262626);
+  /* La couleur est maintenant gérée par la prop color="default" du composant Text */
 }
 
 .pax-selector__stepper-controls {
@@ -2669,11 +2665,7 @@
 }
 
 .pax-selector__age-section-title {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: var(--font-weight-font-bold, 700);
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--color-text-default, #262626);
+  /* La couleur est maintenant gérée par la prop color="default" du composant Text */
   margin: 0;
 }
 
@@ -2722,11 +2714,7 @@
 }
 
 .pax-selector__room-name {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: var(--font-weight-font-bold, 700);
-  font-size: 18px;
-  line-height: 24px;
-  color: var(--color-text-accent, #0f7173);
+  /* La couleur est maintenant gérée par la prop color="accent" du composant Text */
   margin: 0;
 }
 

package/dist/styles/components/organism/search-bar-transfer.css

@@ -2099,10 +2099,6 @@
   justify-content: space-between;
 }
 
-.search-bar-transfer__title {
-  color: var(--color-text-accent, #0f7173);
-}
-
 /* Mode Selector (Segmented Button) */
 
 .search-bar-transfer__mode-selector {
@@ -2119,9 +2115,7 @@
   justify-content: space-between;
 }
 
-.search-bar-transfer__transfer-type-label {
-  color: var(--color-text-subtle);
-}
+/* La couleur est maintenant gérée par la prop color="subtle" du composant Text */
 
 .search-bar-transfer__add-buttons {
   display: flex;
@@ -2143,7 +2137,7 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  color: var(--color-text-default);
+  /* La couleur du texte est maintenant gérée par la prop color="default" du composant Text */
 }
 
 /* Divider between categories */
@@ -2215,8 +2209,8 @@
     gap: 1rem;
   }
 
-  .search-bar-transfer__title {
-    /* Responsive: Utiliser les tokens heading-sm (24px) sur mobile */
+  /* Responsive: Réduire la taille du titre sur mobile */
+  .search-bar-transfer__header .heading-md {
     font-size: var(--font-size-text-2xl, 24px);
     line-height: var(--font-leading-leading-2xl, 36px);
   }

package/dist/styles/components/rating-tab.css

@@ -2114,9 +2114,7 @@
   color: var(--checkbox-color-checkbox-checked-default, #0f7173);
 }
 
-.rating-tab__label {
-  color: var(--color-text-default, #262626);
-}
+/* La couleur est maintenant gérée par la prop color="default" du composant Text */
 
 /* States */
 

package/package.json

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

package/src/components/atoms/Typography/Typography.tsx

@@ -5,10 +5,24 @@ type BodySizeInput = BodyTokenSize | 'base' | 'xl';
 type Variant = 'light' | 'regular' | 'medium' | 'bold' | 'black';
 type Leading = 'none' | '4' | '5' | '6' | '7';
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type TextColor = 
+  | 'default' 
+  | 'accent' 
+  | 'subtle' 
+  | 'light' 
+  | 'brand' 
+  | 'inverted'
+  | 'state-default'
+  | 'state-hover'
+  | 'state-filled'
+  | 'state-disabled'
+  | 'state-error'
+  | 'state-success';
 
 interface BaseProps {
   variant?: Variant;
   leading?: Leading;
+  color?: TextColor;
   className?: string;
   children: React.ReactNode;
   onClick?: React.MouseEventHandler<Element>;
@@ -91,11 +105,19 @@ const buildVariantClass = (base: string, variant: Variant): string | undefined =
   return `${base}--${variant}`;
 };
 
+const getColorStyle = (color?: TextColor): React.CSSProperties => {
+  if (!color) return {};
+  return {
+    color: `var(--color-text-${color}, inherit)`,
+  };
+};
+
 
 export const Heading: React.FC<HeadingProps> = ({
   level = 2,
   variant = 'bold',
   leading,
+  color,
   as,
   className = '',
   children,
@@ -114,8 +136,10 @@ export const Heading: React.FC<HeadingProps> = ({
     .filter(Boolean)
     .join(' ');
 
+  const colorStyle = getColorStyle(color);
+
   return (
-    <Tag className={classes} onClick={onClick}>
+    <Tag className={classes} style={colorStyle} onClick={onClick}>
       {children}
     </Tag>
   );
@@ -126,6 +150,7 @@ export const Text: React.FC<TextProps> = ({
   size = 'md',
   variant = 'regular',
   leading,
+  color,
   as,
   className = '',
   children,
@@ -145,8 +170,10 @@ export const Text: React.FC<TextProps> = ({
     .filter(Boolean)
     .join(' ');
 
+  const colorStyle = getColorStyle(color);
+
   return (
-    <Tag className={classes} onClick={onClick}>
+    <Tag className={classes} style={colorStyle} onClick={onClick}>
       {children}
     </Tag>
   );

package/src/components/molecules/RatingTab/RatingTab.tsx

@@ -81,7 +81,7 @@ const RatingTab: React.FC<RatingTabProps> = ({
         <div className="rating-tab__checkbox">
           {checked && <Check size="sm" className="rating-tab__checkbox-icon" />}
         </div>
-        <Text size="sm" className="rating-tab__label">
+        <Text size="sm" color="default" className="rating-tab__label">
           {label}
         </Text>
       </div>

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

@@ -285,7 +285,7 @@ const StepperRow: React.FC<StepperRowProps> = ({
 
   return (
     <div className="pax-selector__stepper">
-      <Text size="base" variant="bold" className="pax-selector__stepper-label">
+      <Text size="base" variant="bold" color="default" className="pax-selector__stepper-label">
         {label}
       </Text>
       <div className="pax-selector__stepper-controls">
@@ -467,7 +467,7 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
     <div className="pax-selector__room-container">
       <div className="pax-selector__room-header">
         <div className="pax-selector__room-title">
-          <Text size="lg" variant="bold" className="pax-selector__room-name">
+          <Text size="lg" variant="bold" color="accent" className="pax-selector__room-name">
             Room {roomNumber}
           </Text>
           <Icon name="home" size="md" className="pax-selector__room-icon" />
@@ -516,7 +516,7 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
         {/* Age specification section */}
         {((room.teens > 0) || (room.children > 0) || (room.infants > 0)) && (
           <div className="pax-selector__age-section">
-            <Text size="base" variant="bold" className="pax-selector__age-section-title">
+            <Text size="base" variant="bold" color="default" className="pax-selector__age-section-title">
               Please specify the age :
             </Text>
             
@@ -857,7 +857,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
               {/* Age specification for single room */}
               {((internalData.teens > 0) || (internalData.children > 0) || (internalData.infants > 0)) && (
                 <div className="pax-selector__age-section">
-                  <Text size="base" variant="bold" className="pax-selector__age-section-title">
+                  <Text size="base" variant="bold" color="default" className="pax-selector__age-section-title">
                     Please specify the age :
                   </Text>
                   

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

@@ -210,7 +210,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     <div className={`search-bar-transfer ${className}`}>
       {/* Header with title and mode selector */}
       <div className="search-bar-transfer__header">
-        <Heading level={5} variant="bold" className="search-bar-transfer__title">
+        <Heading level={5} variant="bold" color="accent">
           Select your transfer details
         </Heading>
 
@@ -241,7 +241,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
         <>
           {/* Transfer type selector */}
           <div className="search-bar-transfer__transfer-type">
-            <Text size="lg" variant="bold" as="div" className="search-bar-transfer__transfer-type-label">
+            <Text size="lg" variant="bold" color="subtle" as="div" className="search-bar-transfer__transfer-type-label">
               Select a transfer type you want to add
             </Text>
             <div className="search-bar-transfer__add-buttons">
@@ -303,7 +303,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
                     {/* Category header */}
                     <div className="search-bar-transfer__category-header">
                       <Icon name={categoryInfo[type].icon} size="md" />
-                      <Text size="md" variant="bold" as="span">
+                      <Text size="md" variant="bold" color="default" as="span">
                         {categoryInfo[type].label}
                       </Text>
                     </div>

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

@@ -147,11 +147,7 @@
 }
 
 .pax-selector__stepper-label {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--color-text-default, #262626);
+  /* La couleur est maintenant gérée par la prop color="default" du composant Text */
 }
 
 .pax-selector__stepper-controls {
@@ -573,11 +569,7 @@
 }
 
 .pax-selector__age-section-title {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: var(--font-weight-font-bold, 700);
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--color-text-default, #262626);
+  /* La couleur est maintenant gérée par la prop color="default" du composant Text */
   margin: 0;
 }
 
@@ -625,11 +617,7 @@
 }
 
 .pax-selector__room-name {
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: var(--font-weight-font-bold, 700);
-  font-size: 18px;
-  line-height: 24px;
-  color: var(--color-text-accent, #0f7173);
+  /* La couleur est maintenant gérée par la prop color="accent" du composant Text */
   margin: 0;
 }
 

package/src/styles/components/organism/search-bar-transfer.css

@@ -10,10 +10,6 @@
   @apply flex items-center justify-between w-full;
 }
 
-.search-bar-transfer__title {
-  color: var(--color-text-accent, #0f7173);
-}
-
 /* Mode Selector (Segmented Button) */
 .search-bar-transfer__mode-selector {
   @apply flex items-center;
@@ -24,9 +20,7 @@
   @apply flex items-center justify-between w-full;
 }
 
-.search-bar-transfer__transfer-type-label {
-  color: var(--color-text-subtle);
-}
+/* La couleur est maintenant gérée par la prop color="subtle" du composant Text */
 
 .search-bar-transfer__add-buttons {
   @apply flex gap-2;
@@ -40,7 +34,7 @@
 /* Category Header */
 .search-bar-transfer__category-header {
   @apply flex items-center gap-2;
-  color: var(--color-text-default);
+  /* La couleur du texte est maintenant gérée par la prop color="default" du composant Text */
 }
 
 /* Divider between categories */
@@ -95,8 +89,8 @@
     @apply flex-col items-start gap-4;
   }
 
-  .search-bar-transfer__title {
-    /* Responsive: Utiliser les tokens heading-sm (24px) sur mobile */
+  /* Responsive: Réduire la taille du titre sur mobile */
+  .search-bar-transfer__header .heading-md {
     font-size: var(--font-size-text-2xl, 24px);
     line-height: var(--font-leading-leading-2xl, 36px);
   }

package/src/styles/components/rating-tab.css

@@ -38,9 +38,7 @@
   color: var(--checkbox-color-checkbox-checked-default, #0f7173);
 }
 
-.rating-tab__label {
-  color: var(--color-text-default, #262626);
-}
+/* La couleur est maintenant gérée par la prop color="default" du composant Text */
 
 /* States */