mautourco-components 0.2.55 → 0.2.56

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

@@ -20,6 +20,6 @@ var MapIcon = function (_a) {
     var sizeClasses = getSizeClasses();
     var colorClass = color ? "text-".concat(color) : 'text-current';
     var classes = "".concat(sizeClasses, " ").concat(colorClass, " ").concat(className);
-    return (_jsxs("svg", { className: classes, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { clipPath: "url(#clip0_7033_40039)", children: _jsx("path", { d: "M11.2483 5.33398C11.2483 4.47217 10.9064 3.6456 10.2971 3.03613C9.6876 2.42664 8.86022 2.08398 7.99827 2.08398C7.13645 2.08408 6.30982 2.42673 5.70042 3.03613C5.09104 3.64561 4.74827 4.47212 4.74827 5.33398C4.74827 6.29385 5.27536 7.37034 6.01975 8.38379C6.70202 9.31263 7.49819 10.0927 7.99827 10.5488C8.49845 10.0929 9.29531 9.31298 9.97776 8.38379C10.722 7.37039 11.2483 6.2939 11.2483 5.33398ZM2.11545 13.917H13.8821L12.6047 10.084H10.5403C9.9137 10.8175 9.29437 11.4056 8.90354 11.7559C8.88906 11.7688 8.87406 11.7812 8.85862 11.793C8.61164 11.9816 8.30904 12.084 7.99827 12.084C7.68762 12.0839 7.38578 11.9815 7.13889 11.793C7.12325 11.781 7.10764 11.769 7.09299 11.7559C6.70253 11.4056 6.08382 10.8175 5.45725 10.084H3.39573L2.11545 13.917ZM8.58225 5.33398C8.58225 5.01182 8.32043 4.75098 7.99827 4.75098C7.67627 4.75117 7.41526 5.01194 7.41526 5.33398C7.41526 5.65603 7.67627 5.91679 7.99827 5.91699C8.32043 5.91699 8.58225 5.65615 8.58225 5.33398ZM10.0823 5.33398C10.0823 6.48458 9.14886 7.41699 7.99827 7.41699C6.84784 7.41679 5.91526 6.48446 5.91526 5.33398C5.91526 4.18351 6.84784 3.25117 7.99827 3.25098C9.14886 3.25098 10.0823 4.18339 10.0823 5.33398ZM12.7395 5.60547C12.6711 6.66975 12.2087 7.6965 11.6506 8.58398H12.6643C12.9246 8.58392 13.1794 8.65556 13.4006 8.79004L13.4934 8.85156L13.5803 8.91992C13.7498 9.06348 13.8835 9.24462 13.9699 9.44922L14.009 9.55273L15.342 13.5527C15.4129 13.7655 15.4324 13.9922 15.3987 14.2139C15.3648 14.4357 15.2788 14.6471 15.1477 14.8291C15.0166 15.011 14.8442 15.1594 14.6448 15.2617C14.4451 15.364 14.2236 15.4168 13.9992 15.417H1.99827C1.77384 15.4169 1.5525 15.3641 1.35276 15.2617C1.15295 15.1593 0.980017 15.0103 0.848853 14.8281C0.717783 14.646 0.631562 14.4348 0.597876 14.2129C0.564278 13.9911 0.584401 13.7645 0.655493 13.5518L1.99143 9.55176L2.03049 9.44727C2.1314 9.20941 2.29628 9.00342 2.50706 8.85156L2.59983 8.79004C2.82065 8.65595 3.07444 8.58412 3.3342 8.58398H4.34592C3.78785 7.6966 3.32547 6.66961 3.25706 5.60547L3.24827 5.33398C3.24827 4.07429 3.74919 2.86637 4.63987 1.97559C5.53058 1.08487 6.73862 0.584082 7.99827 0.583984C9.25805 0.583984 10.4668 1.08479 11.3576 1.97559C12.2483 2.86635 12.7483 4.07435 12.7483 5.33398L12.7395 5.60547Z", fill: "#0F7173" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_7033_40039", children: _jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }));
+    return (_jsxs("svg", { className: classes, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { clipPath: "url(#clip0_7033_40039)", children: _jsx("path", { d: "M11.2483 5.33398C11.2483 4.47217 10.9064 3.6456 10.2971 3.03613C9.6876 2.42664 8.86022 2.08398 7.99827 2.08398C7.13645 2.08408 6.30982 2.42673 5.70042 3.03613C5.09104 3.64561 4.74827 4.47212 4.74827 5.33398C4.74827 6.29385 5.27536 7.37034 6.01975 8.38379C6.70202 9.31263 7.49819 10.0927 7.99827 10.5488C8.49845 10.0929 9.29531 9.31298 9.97776 8.38379C10.722 7.37039 11.2483 6.2939 11.2483 5.33398ZM2.11545 13.917H13.8821L12.6047 10.084H10.5403C9.9137 10.8175 9.29437 11.4056 8.90354 11.7559C8.88906 11.7688 8.87406 11.7812 8.85862 11.793C8.61164 11.9816 8.30904 12.084 7.99827 12.084C7.68762 12.0839 7.38578 11.9815 7.13889 11.793C7.12325 11.781 7.10764 11.769 7.09299 11.7559C6.70253 11.4056 6.08382 10.8175 5.45725 10.084H3.39573L2.11545 13.917ZM8.58225 5.33398C8.58225 5.01182 8.32043 4.75098 7.99827 4.75098C7.67627 4.75117 7.41526 5.01194 7.41526 5.33398C7.41526 5.65603 7.67627 5.91679 7.99827 5.91699C8.32043 5.91699 8.58225 5.65615 8.58225 5.33398ZM10.0823 5.33398C10.0823 6.48458 9.14886 7.41699 7.99827 7.41699C6.84784 7.41679 5.91526 6.48446 5.91526 5.33398C5.91526 4.18351 6.84784 3.25117 7.99827 3.25098C9.14886 3.25098 10.0823 4.18339 10.0823 5.33398ZM12.7395 5.60547C12.6711 6.66975 12.2087 7.6965 11.6506 8.58398H12.6643C12.9246 8.58392 13.1794 8.65556 13.4006 8.79004L13.4934 8.85156L13.5803 8.91992C13.7498 9.06348 13.8835 9.24462 13.9699 9.44922L14.009 9.55273L15.342 13.5527C15.4129 13.7655 15.4324 13.9922 15.3987 14.2139C15.3648 14.4357 15.2788 14.6471 15.1477 14.8291C15.0166 15.011 14.8442 15.1594 14.6448 15.2617C14.4451 15.364 14.2236 15.4168 13.9992 15.417H1.99827C1.77384 15.4169 1.5525 15.3641 1.35276 15.2617C1.15295 15.1593 0.980017 15.0103 0.848853 14.8281C0.717783 14.646 0.631562 14.4348 0.597876 14.2129C0.564278 13.9911 0.584401 13.7645 0.655493 13.5518L1.99143 9.55176L2.03049 9.44727C2.1314 9.20941 2.29628 9.00342 2.50706 8.85156L2.59983 8.79004C2.82065 8.65595 3.07444 8.58412 3.3342 8.58398H4.34592C3.78785 7.6966 3.32547 6.66961 3.25706 5.60547L3.24827 5.33398C3.24827 4.07429 3.74919 2.86637 4.63987 1.97559C5.53058 1.08487 6.73862 0.584082 7.99827 0.583984C9.25805 0.583984 10.4668 1.08479 11.3576 1.97559C12.2483 2.86635 12.7483 4.07435 12.7483 5.33398L12.7395 5.60547Z", fill: "currentColor" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_7033_40039", children: _jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }));
 };
 export default MapIcon;

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

@@ -1,3 +1,14 @@
+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);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -9,15 +20,17 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
+import { scrollIntoViewOnOpen } from '../../../lib/utils';
 import '../../../styles/components/molecule/location-dropdown.css';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
-import { scrollIntoViewOnOpen } from '../../../lib/utils';
 var LocationDropdown = function (_a) {
     var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.groups, groups = _c === void 0 ? [] : _c, _d = _a.selectedValue, selectedValue = _d === void 0 ? null : _d, _e = _a.placeholder, placeholder = _e === void 0 ? 'Select a location' : _e, label = _a.label, onSelectionChange = _a.onSelectionChange, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.type, type = _k === void 0 ? 'airport-port' : _k, _l = _a.maxHeight, maxHeight = _l === void 0 ? 240 : _l, _m = _a.direction, direction = _m === void 0 ? undefined : _m, _o = _a.showGroupTitles, showGroupTitles = _o === void 0 ? true : _o, _p = _a.scrollOnOpen, scrollOnOpen = _p === void 0 ? false : _p;
     var _q = useState(false), isOpen = _q[0], setIsOpen = _q[1];
+    var _r = useState(''), searchQuery = _r[0], setSearchQuery = _r[1];
     var dropdownRef = useRef(null);
     var inputRef = useRef(null);
+    var searchInputRef = useRef(null);
     // Close dropdown when clicking outside
     useEffect(function () {
         var handleClickOutside = function (event) {
@@ -34,6 +47,12 @@ var LocationDropdown = function (_a) {
     useEffect(function () {
         scrollIntoViewOnOpen(inputRef, isOpen, scrollOnOpen);
     }, [isOpen, scrollOnOpen]);
+    // Reset search when dropdown closes
+    useEffect(function () {
+        if (!isOpen) {
+            setSearchQuery('');
+        }
+    }, [isOpen]);
     var handleToggleDropdown = function () {
         if (!disabled) {
             setIsOpen(!isOpen);
@@ -48,6 +67,19 @@ var LocationDropdown = function (_a) {
         };
         onSelectionChange(locationData);
         setIsOpen(false);
+        setSearchQuery('');
+    };
+    var handleSearchChange = function (e) {
+        setSearchQuery(e.target.value);
+    };
+    // Filter locations based on search query
+    var filterOptions = function (opts) {
+        if (!searchQuery.trim())
+            return opts;
+        var query = searchQuery.toLowerCase();
+        return opts.filter(function (option) {
+            return option.label.toLowerCase().includes(query);
+        });
     };
     var getSelectedOption = function () {
         if (!selectedValue)
@@ -109,17 +141,18 @@ var LocationDropdown = function (_a) {
     };
     var selectedOption = getSelectedOption();
     var displayText = selectedOption ? selectedOption.label : placeholder;
-    // Prepare all options (flat or grouped)
-    var allOptions = groups.length > 0 ? groups : [{ id: 'default', label: '', options: options }];
+    // Prepare all options (flat or grouped) and filter them
+    var allOptionsRaw = groups.length > 0 ? groups : [{ id: 'default', label: '', options: options }];
+    var allOptions = allOptionsRaw.map(function (group) { return (__assign(__assign({}, group), { options: filterOptions(group.options) })); }).filter(function (group) { return group.options.length > 0; });
     // Skeleton loader component
     var SkeletonOption = function () { return (_jsxs("div", { className: "location-dropdown__option location-dropdown__option--skeleton", children: [_jsx("div", { className: "location-dropdown__skeleton-icon" }), _jsx("div", { className: "location-dropdown__skeleton-text" })] })); };
     // Render skeleton loading state
     var renderSkeletonLoading = function () { return (_jsx("div", { className: "location-dropdown__panel", children: _jsx("div", { className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") }, children: _jsx("div", { className: "location-dropdown__options-wrapper", children: _jsx("div", { className: "location-dropdown__group", children: _jsx("div", { className: "location-dropdown__group-options", children: __spreadArray([], Array(5), true).map(function (_, index) { return (_jsx(SkeletonOption, {}, "skeleton-".concat(index))); }) }) }) }) }) })); };
-    return (_jsxs("div", { ref: dropdownRef, className: "location-dropdown location-dropdown--".concat(type, " ").concat(disabled ? 'location-dropdown--disabled' : '', " ").concat(className), children: [label && (_jsx("div", { className: "location-dropdown__label", children: _jsx(Text, { size: "sm", variant: "medium", children: label }) })), _jsxs("div", { ref: inputRef, className: "location-dropdown__input location-dropdown__input--".concat(getDropdownState()), onClick: handleToggleDropdown, children: [_jsxs("div", { className: "location-dropdown__input-content", children: [_jsx(Icon, { name: getInputIcon(), size: "sm", className: "location-dropdown__input-icon ".concat(!selectedOption ? 'location-dropdown__input-icon--placeholder' : '') }), _jsx("span", { className: "location-dropdown__input-text ".concat(!selectedOption ? 'location-dropdown__input-text--placeholder' : ''), children: displayText })] }), _jsx(Icon, { name: "chevron-down", size: "sm", className: "location-dropdown__input-chevron" })] }), isOpen &&
-                (loading ? (renderSkeletonLoading()) : (_jsx("div", { className: "location-dropdown__panel", children: _jsx("div", { className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") }, children: _jsx("div", { className: "location-dropdown__options-wrapper", children: allOptions.map(function (group, groupIndex) { return (_jsxs("div", { className: "location-dropdown__group", children: [showGroupTitles && group.label && groups.length > 0 && (_jsxs(_Fragment, { children: [groupIndex > 0 && _jsx("div", { className: "location-dropdown__divider" }), _jsx("div", { className: "location-dropdown__group-header", children: _jsx(Text, { size: "xs", variant: "bold", children: group.label }) })] })), _jsx("div", { className: "location-dropdown__group-options", children: group.options.map(function (option) {
+    return (_jsxs("div", { ref: dropdownRef, className: "location-dropdown location-dropdown--".concat(type, " ").concat(disabled ? 'location-dropdown--disabled' : '', " ").concat(className), children: [label && (_jsx("div", { className: "location-dropdown__label", children: _jsx(Text, { size: "sm", variant: "medium", children: label }) })), _jsxs("div", { ref: inputRef, className: "location-dropdown__input location-dropdown__input--".concat(getDropdownState()), onClick: handleToggleDropdown, children: [_jsxs("div", { className: "location-dropdown__input-content", children: [_jsx(Icon, { name: getInputIcon(), size: "sm", className: "location-dropdown__input-icon ".concat(!selectedOption ? 'location-dropdown__input-icon--placeholder' : '') }), isOpen ? (_jsx("input", { ref: searchInputRef, type: "text", className: "location-dropdown__input-text ".concat(!selectedOption && !searchQuery ? 'location-dropdown__input-text--placeholder' : ''), placeholder: displayText, value: searchQuery, onChange: handleSearchChange, onClick: function (e) { return e.stopPropagation(); }, disabled: disabled, autoFocus: true })) : (_jsx("span", { className: "location-dropdown__input-text ".concat(!selectedOption ? 'location-dropdown__input-text--placeholder' : ''), children: displayText }))] }), _jsx(Icon, { name: "chevron-down", size: "sm", className: "location-dropdown__input-chevron" })] }), isOpen &&
+                (loading ? (renderSkeletonLoading()) : (_jsx("div", { className: "location-dropdown__panel", children: _jsx("div", { className: "location-dropdown__content", style: { maxHeight: "".concat(maxHeight, "px") }, children: _jsx("div", { className: "location-dropdown__options-wrapper", children: allOptions.length === 0 ? (_jsx("div", { className: "location-dropdown__no-results", children: _jsx(Text, { size: "sm", variant: "medium", children: "No locations found" }) })) : (allOptions.map(function (group, groupIndex) { return (_jsxs("div", { className: "location-dropdown__group", children: [showGroupTitles && group.label && groups.length > 0 && (_jsxs(_Fragment, { children: [groupIndex > 0 && _jsx("div", { className: "location-dropdown__divider" }), _jsx("div", { className: "location-dropdown__group-header", children: _jsx(Text, { size: "xs", variant: "bold", children: group.label }) })] })), _jsx("div", { className: "location-dropdown__group-options", children: group.options.map(function (option) {
                                             var isSelected = selectedValue === option.id;
                                             var isDisabled = option.disabled || disabled;
                                             return (_jsxs("div", { className: "location-dropdown__option ".concat(isSelected ? 'location-dropdown__option--selected' : '', " ").concat(isDisabled ? 'location-dropdown__option--disabled' : ''), onClick: function () { return !isDisabled && handleOptionSelect(option); }, children: [_jsx(Icon, { name: getOptionIcon(option, isSelected), size: "sm", className: "location-dropdown__option-icon" }), _jsx("span", { className: "location-dropdown__option-text", children: option.label })] }, option.id));
-                                        }) })] }, group.id)); }) }) }) })))] }));
+                                        }) })] }, group.id)); })) }) }) })))] }));
 };
 export default LocationDropdown;

package/dist/components/molecules/ServiceSelector/ServiceSelector.js

@@ -9,17 +9,17 @@ var DEFAULT_OPTIONS = [
     {
         value: 'accommodation',
         label: 'Accommodation',
-        icon: 'building',
+        icon: 'accom',
     },
     {
         value: 'transfer',
         label: 'Transfer',
-        icon: 'car',
+        icon: 'bus',
     },
     {
         value: 'excursion',
         label: 'Excursion',
-        icon: 'map-pin',
+        icon: 'map',
         disabled: true,
         badge: 'Coming soon',
     },

package/dist/styles/components/molecule/location-dropdown.css

@@ -70,6 +70,8 @@
 }
 
 .location-dropdown__input-text {
+  min-width: 0px;
+  flex: 1 1 0%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -79,11 +81,32 @@
   color: var(--color-neutral-800);
 }
 
+.location-dropdown__input-text:is(input) {
+  border-width: 0px;
+  background-color: #ffffff00;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.location-dropdown__input-text:is(input)::placeholder {
+  font-weight: 400;
+  color: var(--color-neutral-400);
+}
+
+.location-dropdown__input-text:is(input):disabled {
+  cursor: not-allowed;
+}
+
 .location-dropdown__input-text--placeholder {
   font-weight: 400;
   color: var(--color-neutral-400);
 }
 
+.location-dropdown__input-text:is(input).location-dropdown__input-text--placeholder::placeholder {
+  font-weight: 400;
+  color: var(--color-neutral-400);
+}
+
 .location-dropdown__input-chevron {
   flex-shrink: 0;
   color: var(--color-neutral-800);
@@ -173,6 +196,83 @@
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
+/* Search Input */
+
+.location-dropdown__search-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 0.5rem;
+}
+
+.location-dropdown__search-icon {
+  pointer-events: none;
+  position: absolute;
+  left: 1.5rem;
+  color: var(--color-neutral-400);
+}
+
+.location-dropdown__search-input {
+  width: 100%;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-color: var(--color-neutral-300);
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1.75rem;
+  padding-right: 2rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+.location-dropdown__search-input:focus {
+  border-color: var(--color-atoll-green-600);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-color: var(--color-atoll-green-600);
+}
+
+.location-dropdown__search-input::placeholder {
+  color: var(--color-neutral-400);
+}
+
+.location-dropdown__search-clear {
+  position: absolute;
+  right: 1.5rem;
+  cursor: pointer;
+  border-width: 0px;
+  background-color: #ffffff00;
+  padding: 0.125rem;
+  color: var(--color-neutral-400);
+  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.location-dropdown__search-clear:hover {
+  color: var(--color-neutral-600);
+}
+
+.location-dropdown__no-results {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  text-align: center;
+  color: var(--color-neutral-500);
+}
+
 .location-dropdown__content {
   overflow-y: auto;
   overflow-x: hidden;

package/dist/styles/components/molecule/service-selector.css

@@ -60,12 +60,12 @@
 
 .service-selector__trigger-icon {
   flex-shrink: 0;
-  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+  color: var(--service-selector-color-service-selector-foreground-default, #737373);
 }
 
 .service-selector__trigger-text {
   flex-shrink: 0;
-  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+  color: var(--service-selector-color-service-selector-foreground-default, #737373);
 }
 
 .service-selector__trigger-chevron {
@@ -73,7 +73,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+  color: var(--service-selector-color-service-selector-foreground-default, #737373);
 }
 
 .service-selector__trigger-chevron svg {
@@ -94,21 +94,32 @@
 .service-selector__trigger--default .service-selector__trigger-icon,
 .service-selector__trigger--default .service-selector__trigger-text,
 .service-selector__trigger--default .service-selector__trigger-chevron {
-  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+  color: var(--service-selector-color-service-selector-foreground-default, #737373);
 }
 
 .service-selector__trigger--open {
   border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
+  background-color: var(
+    --service-selector-color-service-selector-background-hover,
+    #ccfbf6
+  );
+}
+
+.service-selector__trigger--open .service-selector__trigger-icon,
+.service-selector__trigger--open .service-selector__trigger-text,
+.service-selector__trigger--open .service-selector__trigger-chevron {
+  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
 }
 
-/* Selected state - same style as default */
+/* Selected state - distinct visual style */
 
 .service-selector__trigger.service-selector__trigger--selected {
   background-color: var(
-    --service-selector-color-service-selector-background-default,
-    #ffffff
+    --service-selector-color-service-selector-background-hover,
+    #ccfbf6
   );
-  border-color: var(--service-selector-color-service-selector-border-default, #a3a3a3);
+  border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
+  border-width: 2px;
 }
 
 .service-selector__trigger.service-selector__trigger--selected
@@ -117,10 +128,10 @@
   .service-selector__trigger-text,
 .service-selector__trigger.service-selector__trigger--selected
   .service-selector__trigger-chevron {
-  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+  color: var(--service-selector-color-service-selector-foreground-hover, #0f7173);
 }
 
-/* When dropdown is open AND a service is selected, keep default style */
+/* When dropdown is open AND a service is selected, keep selected style with hover */
 
 .service-selector__trigger.service-selector__trigger--selected:hover {
   background-color: var(
@@ -128,14 +139,18 @@
     #ccfbf6
   );
   border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
+  border-width: 2px;
 }
 
 .service-selector__trigger--disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: not-allowed;
+  background-color: var(--color-neutral-100, #f5f5f5);
+  border-color: var(--color-neutral-300, #d4d4d4);
 }
 
 .service-selector__trigger--disabled .service-selector__trigger-icon,
+.service-selector__trigger--disabled .service-selector__trigger-text,
 .service-selector__trigger--disabled .service-selector__trigger-chevron {
   color: var(--color-neutral-400, #a3a3a3);
 }
@@ -238,14 +253,20 @@
 }
 
 .service-selector__option--disabled {
-  opacity: 0.6;
+  opacity: 0.4;
   cursor: not-allowed;
+  position: relative;
 }
 
 .service-selector__option--disabled:hover {
   background-color: transparent;
 }
 
+.service-selector__option--disabled .service-selector__option-icon,
+.service-selector__option--disabled .service-selector__option-text {
+  color: var(--service-selector-color-dropdown-item-foreground-default, #a3a3a3);
+}
+
 .service-selector__option-icon {
   flex-shrink: 0;
   color: var(--service-selector-color-dropdown-item-foreground-default, #737373);

package/package.json

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

package/src/components/atoms/Icon/icons/MapIcon.tsx

@@ -37,7 +37,7 @@ const MapIcon: React.FC<MapIconProps> = ({ size = 'md', className = '', color })
       <g clipPath="url(#clip0_7033_40039)">
         <path
           d="M11.2483 5.33398C11.2483 4.47217 10.9064 3.6456 10.2971 3.03613C9.6876 2.42664 8.86022 2.08398 7.99827 2.08398C7.13645 2.08408 6.30982 2.42673 5.70042 3.03613C5.09104 3.64561 4.74827 4.47212 4.74827 5.33398C4.74827 6.29385 5.27536 7.37034 6.01975 8.38379C6.70202 9.31263 7.49819 10.0927 7.99827 10.5488C8.49845 10.0929 9.29531 9.31298 9.97776 8.38379C10.722 7.37039 11.2483 6.2939 11.2483 5.33398ZM2.11545 13.917H13.8821L12.6047 10.084H10.5403C9.9137 10.8175 9.29437 11.4056 8.90354 11.7559C8.88906 11.7688 8.87406 11.7812 8.85862 11.793C8.61164 11.9816 8.30904 12.084 7.99827 12.084C7.68762 12.0839 7.38578 11.9815 7.13889 11.793C7.12325 11.781 7.10764 11.769 7.09299 11.7559C6.70253 11.4056 6.08382 10.8175 5.45725 10.084H3.39573L2.11545 13.917ZM8.58225 5.33398C8.58225 5.01182 8.32043 4.75098 7.99827 4.75098C7.67627 4.75117 7.41526 5.01194 7.41526 5.33398C7.41526 5.65603 7.67627 5.91679 7.99827 5.91699C8.32043 5.91699 8.58225 5.65615 8.58225 5.33398ZM10.0823 5.33398C10.0823 6.48458 9.14886 7.41699 7.99827 7.41699C6.84784 7.41679 5.91526 6.48446 5.91526 5.33398C5.91526 4.18351 6.84784 3.25117 7.99827 3.25098C9.14886 3.25098 10.0823 4.18339 10.0823 5.33398ZM12.7395 5.60547C12.6711 6.66975 12.2087 7.6965 11.6506 8.58398H12.6643C12.9246 8.58392 13.1794 8.65556 13.4006 8.79004L13.4934 8.85156L13.5803 8.91992C13.7498 9.06348 13.8835 9.24462 13.9699 9.44922L14.009 9.55273L15.342 13.5527C15.4129 13.7655 15.4324 13.9922 15.3987 14.2139C15.3648 14.4357 15.2788 14.6471 15.1477 14.8291C15.0166 15.011 14.8442 15.1594 14.6448 15.2617C14.4451 15.364 14.2236 15.4168 13.9992 15.417H1.99827C1.77384 15.4169 1.5525 15.3641 1.35276 15.2617C1.15295 15.1593 0.980017 15.0103 0.848853 14.8281C0.717783 14.646 0.631562 14.4348 0.597876 14.2129C0.564278 13.9911 0.584401 13.7645 0.655493 13.5518L1.99143 9.55176L2.03049 9.44727C2.1314 9.20941 2.29628 9.00342 2.50706 8.85156L2.59983 8.79004C2.82065 8.65595 3.07444 8.58412 3.3342 8.58398H4.34592C3.78785 7.6966 3.32547 6.66961 3.25706 5.60547L3.24827 5.33398C3.24827 4.07429 3.74919 2.86637 4.63987 1.97559C5.53058 1.08487 6.73862 0.584082 7.99827 0.583984C9.25805 0.583984 10.4668 1.08479 11.3576 1.97559C12.2483 2.86635 12.7483 4.07435 12.7483 5.33398L12.7395 5.60547Z"
-          fill="#0F7173"
+          fill="currentColor"
         />
       </g>
       <defs>

package/src/components/molecules/LocationDropdown/LocationDropdown.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { scrollIntoViewOnOpen } from '../../../lib/utils';
 import '../../../styles/components/molecule/location-dropdown.css';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
-import { scrollIntoViewOnOpen } from '../../../lib/utils';
 
 export interface LocationOption {
   id: string | number;
@@ -59,8 +59,10 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   scrollOnOpen = false,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
   const dropdownRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   // Close dropdown when clicking outside
   useEffect(() => {
@@ -81,6 +83,13 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
     scrollIntoViewOnOpen(inputRef, isOpen, scrollOnOpen);
   }, [isOpen, scrollOnOpen]);
 
+  // Reset search when dropdown closes
+  useEffect(() => {
+    if (!isOpen) {
+      setSearchQuery('');
+    }
+  }, [isOpen]);
+
   const handleToggleDropdown = () => {
     if (!disabled) {
       setIsOpen(!isOpen);
@@ -95,6 +104,21 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
     };
     onSelectionChange(locationData);
     setIsOpen(false);
+    setSearchQuery('');
+  };
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+  };
+
+  // Filter locations based on search query
+  const filterOptions = (opts: LocationOption[]): LocationOption[] => {
+    if (!searchQuery.trim()) return opts;
+    
+    const query = searchQuery.toLowerCase();
+    return opts.filter((option) =>
+      option.label.toLowerCase().includes(query)
+    );
   };
 
   const getSelectedOption = (): LocationOption | null => {
@@ -158,8 +182,12 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   const selectedOption = getSelectedOption();
   const displayText = selectedOption ? selectedOption.label : placeholder;
 
-  // Prepare all options (flat or grouped)
-  const allOptions = groups.length > 0 ? groups : [{ id: 'default', label: '', options }];
+  // Prepare all options (flat or grouped) and filter them
+  const allOptionsRaw = groups.length > 0 ? groups : [{ id: 'default', label: '', options }];
+  const allOptions = allOptionsRaw.map((group) => ({
+    ...group,
+    options: filterOptions(group.options),
+  })).filter((group) => group.options.length > 0);
 
   // Skeleton loader component
   const SkeletonOption = () => (
@@ -208,10 +236,24 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
             size="sm"
             className={`location-dropdown__input-icon ${!selectedOption ? 'location-dropdown__input-icon--placeholder' : ''}`}
           />
-          <span
-            className={`location-dropdown__input-text ${!selectedOption ? 'location-dropdown__input-text--placeholder' : ''}`}>
-            {displayText}
-          </span>
+          {isOpen ? (
+            <input
+              ref={searchInputRef}
+              type="text"
+              className={`location-dropdown__input-text ${!selectedOption && !searchQuery ? 'location-dropdown__input-text--placeholder' : ''}`}
+              placeholder={displayText}
+              value={searchQuery}
+              onChange={handleSearchChange}
+              onClick={(e) => e.stopPropagation()}
+              disabled={disabled}
+              autoFocus
+            />
+          ) : (
+            <span
+              className={`location-dropdown__input-text ${!selectedOption ? 'location-dropdown__input-text--placeholder' : ''}`}>
+              {displayText}
+            </span>
+          )}
         </div>
         <Icon
           name="chevron-down"
@@ -229,7 +271,14 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
               className="location-dropdown__content"
               style={{ maxHeight: `${maxHeight}px` }}>
               <div className="location-dropdown__options-wrapper">
-                {allOptions.map((group, groupIndex) => (
+                {allOptions.length === 0 ? (
+                  <div className="location-dropdown__no-results">
+                    <Text size="sm" variant="medium">
+                      No locations found
+                    </Text>
+                  </div>
+                ) : (
+                  allOptions.map((group, groupIndex) => (
                   <div key={group.id} className="location-dropdown__group">
                     {showGroupTitles && group.label && groups.length > 0 && (
                       <>
@@ -265,7 +314,8 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
                       })}
                     </div>
                   </div>
-                ))}
+                  ))
+                )}
               </div>
             </div>
           </div>

package/src/components/molecules/ServiceSelector/ServiceSelector.tsx

@@ -32,17 +32,17 @@ const DEFAULT_OPTIONS: ServiceOption[] = [
   {
     value: 'accommodation',
     label: 'Accommodation',
-    icon: 'building',
+    icon: 'accom',
   },
   {
     value: 'transfer',
     label: 'Transfer',
-    icon: 'car',
+    icon: 'bus',
   },
   {
     value: 'excursion',
     label: 'Excursion',
-    icon: 'map-pin',
+    icon: 'map',
     disabled: true,
     badge: 'Coming soon',
   },

package/src/styles/components/molecule/location-dropdown.css

@@ -35,13 +35,26 @@
 }
 
 .location-dropdown__input-text {
-  @apply text-sm leading-5 text-[var(--color-neutral-800)] font-medium truncate;
+  @apply text-sm leading-5 text-[var(--color-neutral-800)] font-medium truncate flex-1 min-w-0;
+}
+
+.location-dropdown__input-text:is(input) {
+  @apply bg-transparent border-0 outline-none;
+  @apply placeholder:text-[var(--color-neutral-400)] placeholder:font-normal;
+}
+
+.location-dropdown__input-text:is(input):disabled {
+  @apply cursor-not-allowed;
 }
 
 .location-dropdown__input-text--placeholder {
   @apply text-[var(--color-neutral-400)] font-normal;
 }
 
+.location-dropdown__input-text:is(input).location-dropdown__input-text--placeholder {
+  @apply placeholder:text-[var(--color-neutral-400)] placeholder:font-normal;
+}
+
 .location-dropdown__input-chevron {
   @apply text-[var(--color-neutral-800)] flex-shrink-0 transition-transform duration-200;
 }
@@ -100,6 +113,29 @@
   @apply absolute top-full left-0 right-0 mt-2 bg-white rounded-xl overflow-hidden z-50 w-[17.5rem] border border-[var(--color-neutral-200)];
 }
 
+/* Search Input */
+.location-dropdown__search-wrapper {
+  @apply relative flex items-center px-4 pt-4 pb-2;
+}
+
+.location-dropdown__search-icon {
+  @apply absolute left-6 text-[var(--color-neutral-400)] pointer-events-none;
+}
+
+.location-dropdown__search-input {
+  @apply w-full pl-7 pr-8 py-2 text-sm border border-[var(--color-neutral-300)] rounded-lg transition-all duration-200;
+  @apply focus:outline-none focus:border-[var(--color-atoll-green-600)] focus:ring-1 focus:ring-[var(--color-atoll-green-600)];
+  @apply placeholder:text-[var(--color-neutral-400)];
+}
+
+.location-dropdown__search-clear {
+  @apply absolute right-6 text-[var(--color-neutral-400)] hover:text-[var(--color-neutral-600)] transition-colors cursor-pointer bg-transparent border-0 p-0.5;
+}
+
+.location-dropdown__no-results {
+  @apply px-4 py-6 text-center text-[var(--color-neutral-500)];
+}
+
 .location-dropdown__content {
   @apply overflow-y-auto overflow-x-hidden;
   scrollbar-width: thin;

package/src/styles/components/molecule/service-selector.css

@@ -55,12 +55,12 @@
 
 .service-selector__trigger-icon {
   flex-shrink: 0;
-  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+  color: var(--service-selector-color-service-selector-foreground-default, #737373);
 }
 
 .service-selector__trigger-text {
   flex-shrink: 0;
-  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+  color: var(--service-selector-color-service-selector-foreground-default, #737373);
 }
 
 .service-selector__trigger-chevron {
@@ -68,7 +68,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+  color: var(--service-selector-color-service-selector-foreground-default, #737373);
 }
 
 .service-selector__trigger-chevron svg {
@@ -88,20 +88,31 @@
 .service-selector__trigger--default .service-selector__trigger-icon,
 .service-selector__trigger--default .service-selector__trigger-text,
 .service-selector__trigger--default .service-selector__trigger-chevron {
-  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+  color: var(--service-selector-color-service-selector-foreground-default, #737373);
 }
 
 .service-selector__trigger--open {
   border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
+  background-color: var(
+    --service-selector-color-service-selector-background-hover,
+    #ccfbf6
+  );
+}
+
+.service-selector__trigger--open .service-selector__trigger-icon,
+.service-selector__trigger--open .service-selector__trigger-text,
+.service-selector__trigger--open .service-selector__trigger-chevron {
+  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
 }
 
-/* Selected state - same style as default */
+/* Selected state - distinct visual style */
 .service-selector__trigger.service-selector__trigger--selected {
   background-color: var(
-    --service-selector-color-service-selector-background-default,
-    #ffffff
+    --service-selector-color-service-selector-background-hover,
+    #ccfbf6
   );
-  border-color: var(--service-selector-color-service-selector-border-default, #a3a3a3);
+  border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
+  border-width: 2px;
 }
 
 .service-selector__trigger.service-selector__trigger--selected
@@ -110,24 +121,28 @@
   .service-selector__trigger-text,
 .service-selector__trigger.service-selector__trigger--selected
   .service-selector__trigger-chevron {
-  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+  color: var(--service-selector-color-service-selector-foreground-hover, #0f7173);
 }
 
-/* When dropdown is open AND a service is selected, keep default style */
+/* When dropdown is open AND a service is selected, keep selected style with hover */
 .service-selector__trigger.service-selector__trigger--selected:hover {
   background-color: var(
     --service-selector-color-service-selector-background-hover,
     #ccfbf6
   );
   border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
+  border-width: 2px;
 }
 
 .service-selector__trigger--disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: not-allowed;
+  background-color: var(--color-neutral-100, #f5f5f5);
+  border-color: var(--color-neutral-300, #d4d4d4);
 }
 
 .service-selector__trigger--disabled .service-selector__trigger-icon,
+.service-selector__trigger--disabled .service-selector__trigger-text,
 .service-selector__trigger--disabled .service-selector__trigger-chevron {
   color: var(--color-neutral-400, #a3a3a3);
 }
@@ -228,14 +243,20 @@
 }
 
 .service-selector__option--disabled {
-  opacity: 0.6;
+  opacity: 0.4;
   cursor: not-allowed;
+  position: relative;
 }
 
 .service-selector__option--disabled:hover {
   background-color: transparent;
 }
 
+.service-selector__option--disabled .service-selector__option-icon,
+.service-selector__option--disabled .service-selector__option-text {
+  color: var(--service-selector-color-dropdown-item-foreground-default, #a3a3a3);
+}
+
 .service-selector__option-icon {
   flex-shrink: 0;
   color: var(--service-selector-color-dropdown-item-foreground-default, #737373);