mautourco-components 0.2.46 → 0.2.48

package/dist/index.d.ts

@@ -17,8 +17,9 @@ export { DateDisplay } from './components/molecules/DateDisplay/DateDisplay';
 export { DocketPrices } from './components/molecules/DocketPrices/DocketPrices';
 export { PriceDisplay } from './components/molecules/PriceDisplay/PriceDisplay';
 export { TransferDocket } from './components/molecules/TransferDocket/TransferDocket';
-export { ActionDropdown, type ActionDropdownItem, } from './components/molecules/ActionDropdown/ActionDropdown';
+export { ActionDropdown, type ActionDropdownItem } from './components/molecules/ActionDropdown/ActionDropdown';
 export { AddItemButton } from './components/molecules/AddItemButton/AddItemButton';
+export { default as AgeSelector } from './components/molecules/AgeSelector/AgeSelector';
 export * from './components/molecules/BookingResume';
 export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
@@ -85,41 +86,43 @@ export { default as UserIcon } from './components/atoms/Icon/icons/User';
 export { priceFormatter } from './lib/price-formatter';
 export type { DividerProps } from './components/atoms/Divider/Divider';
 export type { FeatureRowProps } from './components/molecules/FeatureRow/FeatureRow';
-export type { LocationData, LocationDropdownProps, LocationGroup, LocationOption, } from './components/molecules/LocationDropdown/LocationDropdown';
-export type { ServiceOption, ServiceSelectorProps, ServiceType, } from './components/molecules/ServiceSelector/ServiceSelector';
+export type { LocationData, LocationDropdownProps, LocationGroup, LocationOption } from './components/molecules/LocationDropdown/LocationDropdown';
+export type { ServiceOption, ServiceSelectorProps, ServiceType } from './components/molecules/ServiceSelector/ServiceSelector';
 export type { StepperProps } from './components/molecules/Stepper/Stepper';
-export type { CarBookingCardPriceRow, CarBookingCardProps, CarBookingCardSize, CarBookingCardState, CarBookingCardType, } from './components/organisms/CarBookingCard/CarBookingCard';
-export type { CardContainerProps, CardContainerSpacing, } from './components/organisms/CardContainer/CardContainer';
+export type { CarBookingCardPriceRow, CarBookingCardProps, CarBookingCardSize, CarBookingCardState, CarBookingCardType } from './components/organisms/CarBookingCard/CarBookingCard';
+export type { CardContainerProps, CardContainerSpacing } from './components/organisms/CardContainer/CardContainer';
 export type { DateTimePickerProps } from './components/organisms/DateTimePicker/DateTimePicker';
 export type { DialogProps, DialogSize } from './components/organisms/Dialog/Dialog';
 export type { FooterProps } from './components/organisms/Footer/Footer';
-export type { DocketDetailsData, DocketServiceType, MultipleQuotationDocketProps, } from './components/organisms/MultipleQuotationDocket';
-export type { ClientType, PaxData, PaxSelectorProps, } from './components/organisms/PaxSelector/PaxSelector';
-export type { RoundTripData, RoundTripProps, RoundTripTransfer, } from './components/organisms/RoundTrip/RoundTrip';
-export type { SearchBarTransferData, SearchBarTransferProps, TransferMode, } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
+export type { DocketDetailsData, DocketServiceType, MultipleQuotationDocketProps } from './components/organisms/MultipleQuotationDocket';
+export { CHILD_CATEGORY_AGES } from './components/organisms/PaxSelector/PaxSelector';
+export type { ClientType, PaxData, PaxSelectorProps } from './components/organisms/PaxSelector/PaxSelector';
+export type { RoundTripData, RoundTripProps, RoundTripTransfer } from './components/organisms/RoundTrip/RoundTrip';
+export type { SearchBarTransferData, SearchBarTransferProps, TransferMode } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
 export type { TopNavigationProps } from './components/organisms/TopNavigation/TopNavigation';
-export type { TransferLineData, TransferLineProps, TransferType, } from './components/organisms/TransferLine/TransferLine';
+export type { TransferLineData, TransferLineProps, TransferType } from './components/organisms/TransferLine/TransferLine';
 export type { CheckboxProps } from './components/atoms/Checkbox/Checkbox';
 export type { InputProps } from './components/atoms/Inputs/Input/Input';
 export type { AddItemButtonProps } from './components/molecules/AddItemButton/AddItemButton';
-export type { BreadcrumbsItem, BreadcrumbsProps, } from './components/molecules/Breadcrumbs/Breadcrumbs';
+export type { AgeSelectorProps } from './components/molecules/AgeSelector/AgeSelector';
+export type { BreadcrumbsItem, BreadcrumbsProps } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export type { DocketPricesProps } from './components/molecules/DocketPrices/DocketPrices';
 export type { FromToProps } from './components/molecules/FromTo/FromTo';
 export type { PaxChipsProps, PaxCount } from './components/molecules/PaxChips/PaxChips';
 export type { PriceDisplayProps } from './components/molecules/PriceDisplay/PriceDisplay';
 export type { SectionTitleProps } from './components/molecules/SectionTitle/SectionTitle';
-export type { DetailsColProps, ItemColProps, RowAccommodationProps, RowExcursionProps, RowTransferProps, } from './components/molecules/TableServiceItem';
+export type { DetailsColProps, ItemColProps, RowAccommodationProps, RowExcursionProps, RowTransferProps } from './components/molecules/TableServiceItem';
 export type { ServiceAccommodationProps } from './components/molecules/TimelineItem/ServiceAccommodation';
 export type { ServiceExcursionProps } from './components/molecules/TimelineItem/ServiceExcursion';
 export type { ServiceTransferProps } from './components/molecules/TimelineItem/ServiceTransfer';
 export type { TimelineHeaderProps } from './components/molecules/TimelineItem/TimelineHeader';
 export type { ToastProps } from './components/molecules/Toast/Toast';
 export type { TransferDocketProps } from './components/molecules/TransferDocket/TransferDocket';
-export type { ComparisonData, DialogComparisonProps, MultiComparisonData, } from './components/organisms/DialogComparison/DialogComparison';
+export type { ComparisonData, DialogComparisonProps, MultiComparisonData } from './components/organisms/DialogComparison/DialogComparison';
 export type { DialogDeleteConfirmProps } from './components/organisms/DialogDeleteConfirm/DialogDeleteConfirm';
 export type { DialogQuoteRenameProps } from './components/organisms/DialogQuoteRename/DialogQuoteRename';
 export type { SelectedQuote } from './components/organisms/DialogSendingMail/DialogSendingMailMultiple/DialogSendingMailMultiple';
-export type { FilterType, QuoteHeaderProps, } from './components/organisms/QuoteHeader/QuoteHeader';
-export type { TimelineProps, TimelineServices, } from './components/organisms/Timeline/Timeline';
-export type { AccomodationDocket as AccomodationDocketType, ExcursionDocket as ExcursionDocketType, OtherServiceDocket as OtherServiceDocketType, ServiceDocket as ServiceDocketType, TransferDocket as TransferDocketType, } from './types/docket/services.types';
+export type { FilterType, QuoteHeaderProps } from './components/organisms/QuoteHeader/QuoteHeader';
+export type { TimelineProps, TimelineServices } from './components/organisms/Timeline/Timeline';
+export type { AccomodationDocket as AccomodationDocketType, ExcursionDocket as ExcursionDocketType, OtherServiceDocket as OtherServiceDocketType, ServiceDocket as ServiceDocketType, TransferDocket as TransferDocketType } from './types/docket/services.types';
 export * from './types/table';

package/dist/index.js

@@ -19,8 +19,9 @@ export { DocketPrices } from './components/molecules/DocketPrices/DocketPrices';
 export { PriceDisplay } from './components/molecules/PriceDisplay/PriceDisplay';
 export { TransferDocket } from './components/molecules/TransferDocket/TransferDocket';
 // Molecules - Composed components
-export { ActionDropdown, } from './components/molecules/ActionDropdown/ActionDropdown';
+export { ActionDropdown } from './components/molecules/ActionDropdown/ActionDropdown';
 export { AddItemButton } from './components/molecules/AddItemButton/AddItemButton';
+export { default as AgeSelector } from './components/molecules/AgeSelector/AgeSelector';
 export * from './components/molecules/BookingResume';
 export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
@@ -89,4 +90,5 @@ export { default as SettingsIcon } from './components/atoms/Icon/icons/Settings'
 export { default as UserIcon } from './components/atoms/Icon/icons/User';
 // Utils
 export { priceFormatter } from './lib/price-formatter';
+export { CHILD_CATEGORY_AGES } from './components/organisms/PaxSelector/PaxSelector';
 export * from './types/table';

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

@@ -0,0 +1,216 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* AgeSelector Component Styles */
+
+.age-selector {
+  position: relative;
+  display: flex;
+  width: 5rem;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Label */
+
+.age-selector__label {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  color: var(--dropdown-color-label-default,#262626);
+}
+
+.age-selector__required {
+  color: var(--chip-color-red-outline-foreground,#991b1b);
+}
+
+/* Container */
+
+.age-selector__container {
+  position: relative;
+  width: 100%;
+}
+
+/* Input wrapper - matching Figma design */
+
+.age-selector__input {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-radius: 0.75rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(38 38 38 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  cursor: default;
+}
+
+.age-selector__input:hover {
+  border-color: var(--dropdown-color-border-hover,#0f7173);
+}
+
+.age-selector__input--open {
+  border-color: var(--dropdown-color-border-hover,#0f7173);
+}
+
+.age-selector__input--default .age-selector__input-field::placeholder {
+  color: var(--dropdown-selector-color-filled-foreground-default,#737373);
+}
+
+/* Input field */
+
+.age-selector__input-field {
+  flex: 1 1 0%;
+  border-style: none;
+  background-color: #ffffff00;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: var(--dropdown-color-foreground-value,#262626);
+  cursor: text;
+  min-width: 0;
+}
+
+.age-selector__input-field::placeholder {
+  color: var(--dropdown-selector-color-filled-foreground-default,#737373);
+}
+
+/* Dropdown button */
+
+.age-selector__dropdown-btn {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-style: none;
+  background-color: #ffffff00;
+  margin: 0px;
+  padding: 0px;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+.age-selector__dropdown-btn:hover {
+  opacity: 0.8;
+}
+
+/* Icon */
+
+.age-selector__icon {
+  color: var(--color-text-default,#262626);
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+.age-selector__icon--open {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+/* Dropdown menu */
+
+.age-selector__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0px;
+  right: 0px;
+  margin-top: 0.25rem;
+  border-radius: 0.75rem;
+  border-width: 1px;
+  border-color: var(--color-border-subtle,#e5e5e5);
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  max-height: 12rem;
+  overflow-y: auto;
+  z-index: 50;
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  animation: age-selector-dropdown-enter 0.15s ease-out;
+}
+
+@keyframes age-selector-dropdown-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Dropdown option */
+
+.age-selector__option {
+  width: 100%;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: var(--color-text-default,#262626);
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.age-selector__option:hover {
+  background-color: var(--dropdown-selector-color-select-item-background-hover,#115b5e);
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.age-selector__option--selected {
+  background-color: var(--dropdown-selector-color-select-item-background-selected,#0f7173);
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.age-selector__option--selected:hover {
+  background-color: var(--dropdown-selector-color-select-item-background-selected,#0f7173);
+}
+
+/* Scrollbar styling */
+
+.age-selector__dropdown::-webkit-scrollbar {
+  width: 0.375rem;
+}
+
+.age-selector__dropdown::-webkit-scrollbar-track {
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
+.age-selector__dropdown::-webkit-scrollbar-thumb {
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+}
+
+.age-selector__dropdown::-webkit-scrollbar-thumb:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
+}

package/dist/styles/components/molecule/calendarInput.css

@@ -234,23 +234,42 @@
 /* Disabled state */
 
 .calendar-input--disabled {
-  border-color: var(--color-neutral-400);
-  background-color: var(--color-surface-50);
+  cursor: not-allowed;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 251 251 / var(--tw-bg-opacity, 1));
 }
 
 .calendar-input--disabled .calendar-input__field {
   cursor: not-allowed;
-  color: var(--color-tuna-400);
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
+}
+
+.calendar-input--disabled .calendar-input__field::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
 }
 
 .calendar-input--disabled .calendar-input__icon-button {
+  cursor: not-allowed;
   background-image: none !important;
-  color: var(--color-tuna-400) !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1)) !important;
 }
 
 .calendar-input--disabled .calendar-input__icon-button--full-bg {
-  background-color: var(--color-gray-200) !important;
-  color: var(--color-tuna-400) !important;
+  cursor: not-allowed;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)) !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1)) !important;
+}
+
+.calendar-input--disabled .calendar-input__chevron {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
 }
 
 /* Responsive design */

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

@@ -132,15 +132,27 @@
 
 .location-dropdown__input--disabled {
   cursor: not-allowed;
-  border-color: var(--color-neutral-400);
-  background-color: var(--color-surface-50);
-  opacity: 0.6;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 251 251 / var(--tw-bg-opacity, 1));
 }
 
 .location-dropdown__input--disabled .location-dropdown__input-text,
 .location-dropdown__input--disabled .location-dropdown__input-icon,
 .location-dropdown__input--disabled .location-dropdown__input-chevron {
-  color: var(--color-neutral-400);
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
+}
+
+/* Disabled label - override all text elements */
+
+.location-dropdown--disabled .location-dropdown__label,
+.location-dropdown--disabled .location-dropdown__label p,
+.location-dropdown--disabled .location-dropdown__label * {
+  font-weight: 400 !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1)) !important;
 }
 
 /* Dropdown Panel */

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

@@ -102,6 +102,31 @@
   transform: rotate(180deg)!important;
 }
 
+/* Disabled state */
+
+.pax-selector--disabled .pax-selector__label {
+  color: #a3a3a3;
+  font-weight: 400;
+}
+
+.pax-selector--disabled .pax-selector__input {
+  background: #fbfbfb;
+  border-color: #d1d5db;
+  cursor: not-allowed;
+}
+
+.pax-selector--disabled .pax-selector__input-icon,
+.pax-selector--disabled .pax-selector__input-text,
+.pax-selector--disabled .pax-selector__chevron {
+  color: #a3a3a3;
+}
+
+.pax-selector__input--disabled {
+  background: #fbfbfb;
+  border-color: #d1d5db;
+  cursor: not-allowed;
+}
+
 /* Dropdown Panel */
 
 .pax-selector__dropdown {
@@ -413,187 +438,6 @@
   z-index: 50;
 }
 
-/* Age Selector Styles */
-
-.pax-selector__age-selector {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 80px;
-  position: relative;
-}
-
-.pax-selector__age-label {
-  font-family: var(--typography-body-family, 'Satoshi', sans-serif);
-  font-weight: var(--font-weight-font-normal, 400);
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--dropdown-color-label-default, #262626);
-}
-
-.pax-selector__age-required {
-  color: var(--chip-color-red-outline-foreground, #991b1b);
-}
-
-/* Age Selector using DropdownInput structure */
-
-.pax-selector__age-dropdown-container {
-  width: 100%;
-}
-
-.pax-selector__age-dropdown-input {
-  min-height: auto;
-  padding: 12px 8px 12px 16px;
-  border: 1px solid var(--dropdown-color-border-value, #262626);
-  border-radius: 12px;
-  cursor: default;
-}
-
-.pax-selector__age-dropdown-input:hover {
-  border-color: var(--dropdown-color-border-hover, #0f7173);
-}
-
-.pax-selector__age-dropdown-input:focus-within {
-  border-color: var(--dropdown-color-border-hover, #0f7173);
-}
-
-.pax-selector__age-input-text {
-  padding: 0;
-  background: transparent;
-  border: none;
-  outline: none;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: var(--font-weight-font-medium, 500);
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--dropdown-color-foreground-value, #262626);
-  white-space: nowrap;
-  overflow: visible;
-  text-overflow: clip;
-  cursor: text;
-  width: 100%;
-}
-
-.pax-selector__age-input-text::placeholder {
-  color: var(--dropdown-selector-color-filled-foreground-default, #737373);
-}
-
-.pax-selector__age-dropdown-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  margin-left: 8px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-}
-
-.pax-selector__age-dropdown-btn:hover {
-  opacity: 0.8;
-}
-
-.pax-selector__age-dropdown-btn .dropdown-input__icon--chevron {
-  transition: transform 0.2s ease;
-}
-
-.pax-selector__age-dropdown-input--open .pax-selector__age-dropdown-btn .dropdown-input__icon--chevron {
-  transform: rotate(180deg);
-}
-
-.pax-selector__age-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-  padding: 12px 16px;
-  background: var(--dropdown-color-background-value, #ffffff);
-  border: 1px solid var(--dropdown-color-border-value, #262626);
-  border-radius: 12px;
-  cursor: pointer;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: var(--font-weight-font-medium, 500);
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--dropdown-color-foreground-value, #262626);
-  transition: all 0.2s ease;
-}
-
-.pax-selector__age-trigger:hover {
-  border-color: var(--dropdown-color-border-hover, #0f7173);
-}
-
-.pax-selector__age-value {
-  flex: 1;
-  text-align: left;
-}
-
-.pax-selector__age-chevron {
-  color: var(--color-text-default, #262626);
-  transition: transform 0.2s ease;
-  flex-shrink: 0;
-}
-
-.pax-selector__age-chevron--open {
-  transform: rotate(180deg);
-}
-
-/* Use dropdown-menu from dropdown.css, but add custom styles for age selector */
-
-.pax-selector__age-dropdown-container .dropdown-menu {
-  max-height: 200px;
-  z-index: 110;
-}
-
-.pax-selector__age-dropdown-container .dropdown-option--selected {
-  background-color: var(--dropdown-selector-color-select-item-background-selected, #0f7173);
-  color: #ffffff;
-}
-
-.pax-selector__age-dropdown-container .dropdown-option--selected:hover {
-  background-color: var(--dropdown-selector-color-select-item-background-selected, #0f7173);
-  color: #ffffff;
-}
-
-@keyframes pax-selector-age-dropdown-enter {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.pax-selector__age-option {
-  width: 100%;
-  padding: 8px 12px;
-  background: var(--dropdown-selector-color-select-item-background-default, #ffffff);
-  border: none;
-  cursor: pointer;
-  text-align: left;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--color-text-default, #262626);
-  transition: all 0.2s ease;
-}
-
-.pax-selector__age-option:hover {
-  background: var(--dropdown-selector-color-select-item-background-hover, #115b5e);
-  color: #ffffff;
-}
-
-.pax-selector__age-option--selected {
-  background: var(--dropdown-selector-color-select-item-background-selected, #0f7173);
-  color: #ffffff;
-}
-
 /* Age Section */
 
 .pax-selector__age-section {
@@ -610,14 +454,8 @@
 
 .pax-selector__age-groups {
   display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.pax-selector__age-row {
-  display: flex;
-  gap: 16px;
-  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 1rem;
 }
 
 /* Multiple Rooms Styles */

package/dist/styles/components/organism/transfer-line.css

@@ -137,4 +137,44 @@
 
 .transfer-line__date-picker {
   height: 2.75rem;
+}
+
+/* Disabled state */
+
+.transfer-line--disabled {
+  pointer-events: none;
+}
+
+.transfer-line--disabled .transfer-line__field-label {
+  font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
+}
+
+/* Match Figma design colors for disabled inputs */
+
+.transfer-line--disabled .location-dropdown__input,
+.transfer-line--disabled .calendar-input,
+.transfer-line--disabled .pax-selector__input {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 251 251 / var(--tw-bg-opacity, 1));
+}
+
+.transfer-line--disabled .location-dropdown__label,
+.transfer-line--disabled .location-dropdown__label p,
+.transfer-line--disabled .location-dropdown__input-text,
+.transfer-line--disabled .location-dropdown__input-icon,
+.transfer-line--disabled .location-dropdown__input-chevron,
+.transfer-line--disabled .calendar-input__field,
+.transfer-line--disabled .calendar-input__icon-button,
+.transfer-line--disabled .calendar-input__chevron,
+.transfer-line--disabled .pax-selector__input-icon,
+.transfer-line--disabled .pax-selector__input-text,
+.transfer-line--disabled .pax-selector__chevron,
+.transfer-line--disabled .pax-selector__label {
+  font-weight: 400 !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(163 163 163 / var(--tw-text-opacity, 1)) !important;
 }

package/dist/styles/mautourco.css

@@ -10,6 +10,7 @@
 @import "./components/forms.css";
 @import "./components/illustration.css";
 @import "./components/molecule/accomodation-docket.css";
+@import "./components/molecule/age-selector.css";
 @import "./components/molecule/calendarInput.css";
 @import "./components/molecule/dateTime.css";
 @import "./components/molecule/docket-prices.css";

package/package.json

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