mautourco-components 0.2.17 → 0.2.19

package/dist/components/organisms/TabServiceDetails/TabServiceDetailsLayout/TabServiceDetailsLayout.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { IconName } from '../../../atoms/Icon/Icon';
+import './TabServiceDetailsLayout.css';
+export interface TabServiceDetailsLayoutProps {
+    /** Title of the service */
+    title: string;
+    /** Icon of the service */
+    icon: IconName;
+    /** Children of the service */
+    children: React.ReactNode;
+    /** Images of the service */
+    images: string[];
+    /** Mobile content of the service */
+    mobileContent?: React.ReactNode;
+    /** Whether the service is on request */
+    isOnRequest?: boolean;
+}
+/**
+ * Layout for the TabServiceDetails component.
+ *
+ * @example
+ * <TabServiceDetails.Layout
+ *   title="Accommodation"
+ *   icon="accom"
+ *   images={['image1.jpg', 'image2.jpg', 'image3.jpg']}
+ *   mobileContent={<div>Mobile content</div>}
+ *   isOnRequest={true}
+ * >
+ *   <div>Content</div>
+ * </TabServiceDetails.Layout>
+ *
+ * @param props - Props of the TabServiceDetailsLayout
+ * @returns The TabServiceDetailsLayout component
+ */
+export default function TabServiceDetailsLayout(props: TabServiceDetailsLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/TabServiceDetails/TabServiceDetailsLayout/TabServiceDetailsLayout.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMobile } from '@/src/hooks/useMobile';
+import { cn } from '@/src/lib/utils';
+import Chip from '../../../atoms/Chip/Chip';
+import TextWithIcon from '../../../molecules/TextWithIcon/TextWithIcon';
+import './TabServiceDetailsLayout.css';
+/**
+ * Layout for the TabServiceDetails component.
+ *
+ * @example
+ * <TabServiceDetails.Layout
+ *   title="Accommodation"
+ *   icon="accom"
+ *   images={['image1.jpg', 'image2.jpg', 'image3.jpg']}
+ *   mobileContent={<div>Mobile content</div>}
+ *   isOnRequest={true}
+ * >
+ *   <div>Content</div>
+ * </TabServiceDetails.Layout>
+ *
+ * @param props - Props of the TabServiceDetailsLayout
+ * @returns The TabServiceDetailsLayout component
+ */
+export default function TabServiceDetailsLayout(props) {
+    var title = props.title, icon = props.icon, isOnRequest = props.isOnRequest, children = props.children, images = props.images, mobileContent = props.mobileContent;
+    var isMobile = useMobile(1280).isMobile;
+    return (_jsxs("div", { children: [_jsxs("div", __assign({ className: "details-service__layout" }, { children: [_jsxs(TextWithIcon, __assign({ icon: icon, color: isOnRequest ? 'yellow' : 'accent', textVariant: "bold" }, { children: [title, isOnRequest && _jsx(Chip, __assign({ color: "yellow" }, { children: "On request" }))] })), _jsxs("div", __assign({ className: "details-service__layout-flex" }, { children: [_jsxs("div", __assign({ className: "details-service__layout-flex-images" }, { children: [images[0] && (_jsx("figure", __assign({ className: cn(images.length === 1 && 'single-image') }, { children: _jsx("img", { src: images[0], alt: title, width: 400, height: 400 }) }), images[0])), images.length > 1 && (_jsx("div", __assign({ className: "details-service__layout-flex-images-grid" }, { children: images.slice(1, 3).map(function (image) { return (_jsx("figure", { children: _jsx("img", { src: image, alt: title, width: 400, height: 400 }) }, image)); }) })))] })), _jsx("div", __assign({ className: "details-service__layout-content" }, { children: _jsx("div", __assign({ className: "details-service__layout-content-body" }, { children: children })) }))] }))] })), isMobile && mobileContent] }));
+}

package/dist/components/organisms/TabServiceDetails/Transfer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TransferData } from '../TabCancellationPolicy/HeaderExcursion/HeaderTransfer';
+import { DetailContentTransferProps } from './DetailContentTransfer';
+export interface TransferProps {
+    /** Image of the transfer */
+    image: string;
+    /** Transfer data */
+    transferData: TransferData[];
+    /** Details of the transfer */
+    transferDetails: DetailContentTransferProps;
+}
+export declare const Transfer: React.FC<TransferProps>;

package/dist/components/organisms/TabServiceDetails/Transfer.js

@@ -0,0 +1,19 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import CancellationHeader from '../TabCancellationPolicy/CancellationHeader';
+import TabCancellationPolicy from '../TabCancellationPolicy/TabCancellationPolicy';
+import { DetailContentTransfer, } from './DetailContentTransfer';
+export var Transfer = function (props) {
+    var image = props.image, transferData = props.transferData, transferDetails = props.transferDetails;
+    return (_jsx(TabCancellationPolicy.Layout, __assign({ title: "Transfer", icon: "car", image: image, header: _jsx(CancellationHeader, { children: _jsx(CancellationHeader.Transfer, { data: transferData }) }) }, { children: _jsx(DetailContentTransfer, __assign({}, transferDetails)) })));
+};

package/dist/components/organisms/TabServiceDetails/index.d.ts

@@ -0,0 +1,4 @@
+export * from './TabServiceDetails';
+export type { AccommodationProps } from './Accommodation';
+export type { DetailsContentExcursionProps } from './DetailsContentExcursion';
+export type { TabServiceDetailsLayoutProps } from './TabServiceDetailsLayout/TabServiceDetailsLayout';

package/dist/components/organisms/TabServiceDetails/index.js

@@ -0,0 +1 @@
+export * from './TabServiceDetails';

package/dist/components/organisms/Table/Table.css

@@ -2193,6 +2193,56 @@
         border-bottom: none;
       }
     }
+    &.table__children--visible {
+      position: relative;
+    }
+    &.table__children--visible {
+      border: 1px solid transparent;
+      border-left: none;
+      &::after {
+        content: '';
+        position: absolute;
+        inset: -1px;
+        pointer-events: none;
+        max-width: 100%;
+        background-image:
+          repeating-linear-gradient(
+            to right,
+            var(--color-border-medium) 0,
+            var(--color-border-medium) 16px,
+            transparent 16px,
+            transparent 32px
+          ),
+          repeating-linear-gradient(
+            to right,
+            var(--color-border-medium) 0,
+            var(--color-border-medium) 16px,
+            transparent 16px,
+            transparent 32px
+          ),
+          repeating-linear-gradient(
+            to bottom,
+            var(--color-border-medium) 0,
+            var(--color-border-medium) 16px,
+            transparent 16px,
+            transparent 32px
+          ),
+          repeating-linear-gradient(
+            to bottom,
+            var(--color-border-medium) 0,
+            var(--color-border-medium) 16px,
+            transparent 16px,
+            transparent 32px
+          );
+        background-size:
+          100% 1px,
+          100% 1px,
+          1px 100%,
+          1px 100%;
+        background-position: top, bottom, left, right;
+        background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+      }
+    }
   }
   .table__nested-wrapper {
     overflow: hidden;
@@ -2278,3 +2328,9 @@
     }
   }
 }
+
+.table__row-with-children {
+  > td {
+    padding: 0;
+  }
+}

package/dist/components/organisms/Table/Table.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '@/src/lib/utils';
 import { AnimatePresence, domAnimation, LazyMotion } from 'motion/react';
 import * as motion from 'motion/react-m';
@@ -83,9 +83,11 @@ export var Table = function (props) {
                                             'table__row-nested': (_b = row.children) === null || _b === void 0 ? void 0 : _b.length,
                                             'table__row-clickable': onClickRow,
                                         }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row); } }, { children: _jsx(TableCell, { columns: columns, row: row, rowIndex: rowIndex }) })));
-                                    return (_jsx(Fragment, { children: isGrouped ? (row.children && row.children.length > 0 ? (_jsx("tr", __assign({ className: "table__row-grouped" }, { children: _jsx("td", __assign({ colSpan: columns.length }, { children: _jsx(NestedContent, { isGrouped: isGrouped, rowIndex: rowIndex, columns: columns, children: row.children || [], onClickRow: onClickRow }) })) }))) : (defaultTable)) : (_jsxs(_Fragment, { children: [defaultTable, _jsx(AnimatePresence, __assign({ initial: false }, { children: hasVisibleChildren && (_jsx("tr", __assign({ className: cn('table__no-hover', {
-                                                            'table__row-nested': row.children && row.children.length > 0,
-                                                        }) }, { children: _jsx("td", __assign({ colSpan: columns.length, className: "table__cell-nested" }, { children: _jsx(NestedContent, { rowIndex: rowIndex, columns: columns, children: row.children || [], onClickRow: onClickRow }) })) }), "nested-".concat(rowIndex))) }))] })) }, "rw-".concat(rowIndex)));
+                                    return (_jsx(Fragment, { children: isGrouped ? (row.children && row.children.length > 0 ? (_jsx("tr", __assign({ className: "table__row-grouped" }, { children: _jsx("td", __assign({ colSpan: columns.length }, { children: _jsx(NestedContent, { isGrouped: isGrouped, rowIndex: rowIndex, columns: columns, children: row.children || [], onClickRow: onClickRow }) })) }))) : (defaultTable)) : !row.children ? (defaultTable) : (_jsx("tr", __assign({ className: "table__row-with-children", onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, row); } }, { children: _jsx("td", __assign({ colSpan: columns.length, className: cn({
+                                                    'table__children--visible': hasVisibleChildren,
+                                                }) }, { children: _jsx("table", __assign({ className: "table" }, { children: _jsxs("tbody", { children: [defaultTable, _jsx(AnimatePresence, __assign({ initial: false }, { children: hasVisibleChildren && (_jsx("tr", __assign({ className: cn('table__no-hover', {
+                                                                        'table__row-nested': row.children && row.children.length > 0,
+                                                                    }) }, { children: _jsx("td", __assign({ colSpan: columns.length, className: "table__cell-nested" }, { children: _jsx(NestedContent, { rowIndex: rowIndex, columns: columns, children: row.children || [] }) })) }), "nested-".concat(rowIndex))) }))] }) })) })) }))) }, "rw-".concat(rowIndex)));
                                 }) }))] })) })), hasTotal && (_jsx("div", __assign({ className: "table__total-container" }, { children: _jsx("table", __assign({ className: "table" }, { children: _jsx("tbody", __assign({ className: "table__total" }, { children: _jsxs("tr", { children: [_jsx("td", { colSpan: columns.length - 1 }), _jsx("td", __assign({ style: {
                                             '--last-column-width': normalizeLastColumnWidth(),
                                         } }, { children: _jsxs("div", __assign({ className: "relative" }, { children: [_jsxs(Text, __assign({ size: "md", variant: "bold", className: "absolute top-0 -left-3 -translate-x-full" }, { children: ["Total :", ' '] })), _jsx("div", { children: Object.entries(totalRows).map(function (_a) {

package/dist/components/organisms/Timeline/Timeline.js

@@ -16,5 +16,5 @@ import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
 import TimelineItem from '../../molecules/TimelineItem/TimelineItem';
 export var Timeline = function (props) {
     var arrival = props.arrival, departure = props.departure, services = props.services, className = props.className;
-    return (_jsxs("div", __assign({ className: cn('space-y-10', className) }, { children: [_jsxs(TextWithIcon, __assign({ icon: "arrival", color: "accent", iconSize: "lg" }, { children: ["Arrival :", ' ', _jsx(Text, __assign({ variant: "regular", size: "lg", leading: "5", color: "default", as: "span" }, { children: arrival }))] })), _jsx("div", __assign({ className: "overflow-x-auto" }, { children: _jsx("div", __assign({ className: "flex gap-x-3 pb-8 2xl:pb-0" }, { children: services.map(function (service, index) { return (_jsxs(TimelineItem, { children: [service.type === 'transfer' && (_jsx(TimelineItem.Transfer, __assign({}, service.data))), service.type === 'accommodation' && (_jsx(TimelineItem.Accommodation, __assign({}, service.data))), service.type === 'excursion' && (_jsx(TimelineItem.Excursion, __assign({}, service.data)))] }, "tm-".concat(index))); }) })) })), _jsxs(TextWithIcon, __assign({ icon: "departure", color: "accent", iconSize: "lg" }, { children: ["Departure :", ' ', _jsx(Text, __assign({ variant: "regular", size: "lg", leading: "5", color: "default", as: "span" }, { children: departure }))] }))] })));
+    return (_jsxs("div", __assign({ className: cn('space-y-10', className) }, { children: [_jsxs(TextWithIcon, __assign({ icon: "arrival", color: "accent", iconSize: "lg", textSize: "lg" }, { children: ["Arrival :", ' ', _jsx(Text, __assign({ variant: "regular", size: "lg", leading: "5", color: "default", as: "span" }, { children: arrival }))] })), _jsx("div", __assign({ className: "overflow-x-auto" }, { children: _jsx("div", __assign({ className: "flex gap-x-3 pb-8 2xl:pb-0" }, { children: services.map(function (service, index) { return (_jsxs(TimelineItem, { children: [service.type === 'transfer' && (_jsx(TimelineItem.Transfer, __assign({}, service.data))), service.type === 'accommodation' && (_jsx(TimelineItem.Accommodation, __assign({}, service.data))), service.type === 'excursion' && (_jsx(TimelineItem.Excursion, __assign({}, service.data)))] }, "tm-".concat(index))); }) })) })), _jsxs(TextWithIcon, __assign({ icon: "departure", color: "accent", iconSize: "lg", textSize: "lg" }, { children: ["Departure :", ' ', _jsx(Text, __assign({ variant: "regular", size: "lg", leading: "5", color: "default", as: "span" }, { children: departure }))] }))] })));
 };

package/dist/hooks/useStays.d.ts

@@ -0,0 +1 @@
+export default function useStays(dates: string[]): number;

package/dist/hooks/useStays.js

@@ -0,0 +1,11 @@
+import { differenceInDays } from 'date-fns';
+import { useMemo } from 'react';
+export default function useStays(dates) {
+    var stay = useMemo(function () {
+        if (dates.length) {
+            return differenceInDays(dates[1], dates[0]);
+        }
+        return 0;
+    }, [dates]);
+    return stay;
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Button } from './components/atoms/Button/Button';
+export { default as CardServiceAccom } from './components/atoms/CardServiceAccom/CardServiceAccom';
 export { default as Checkbox } from './components/atoms/Checkbox/Checkbox';
 export { default as Chip } from './components/atoms/Chip/Chip';
 export { default as Divider } from './components/atoms/Divider/Divider';
@@ -12,8 +13,9 @@ export { default as SelectedValue } from './components/atoms/SelectedValue/Selec
 export { default as Slider } from './components/atoms/Slider/Slider';
 export { default as Spinner } from './components/atoms/Spinner/Spinner';
 export { Heading, Text } from './components/atoms/Typography/Typography';
-export { ActionDropdown, type ActionDropdownItem, } from './components/molecules/ActionDropdown/ActionDropdown';
 export { DateDisplay } from './components/molecules/DateDisplay/DateDisplay';
+export { ActionDropdown, type ActionDropdownItem, } from './components/molecules/ActionDropdown/ActionDropdown';
+export * from './components/molecules/BookingResume';
 export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
 export { default as TimePicker } from './components/molecules/Calendar/TimePicker';
@@ -25,12 +27,16 @@ export { default as MultiSelectDropdown } from './components/molecules/MultiSele
 export { default as Pagination } from './components/molecules/Pagination/Pagination';
 export { default as RatingTab } from './components/molecules/RatingTab/RatingTab';
 export { default as SectionTitle } from './components/molecules/SectionTitle/SectionTitle';
+export { ServiceInfo } from './components/molecules/ServiceInfo/ServiceInfo';
+export { ServiceLanguages } from './components/molecules/ServiceLanguages/ServiceLanguages';
 export { default as ServiceSelector } from './components/molecules/ServiceSelector/ServiceSelector';
 export { default as Stepper } from './components/molecules/Stepper/Stepper';
 export { default as TextWithIcon } from './components/molecules/TextWithIcon/TextWithIcon';
 export { default as TimelineItem } from './components/molecules/TimelineItem/TimelineItem';
 export { Illustration } from './components/atoms/Illustration/Illustration';
+export { DetailsClientInfo } from './components/molecules/DetailsInfo/DetailsClient/DetailsClient';
 export { default as TableServiceItem } from './components/molecules/TableServiceItem';
+export * from './components/organisms/Booking';
 export { default as CarBookingCard } from './components/organisms/CarBookingCard/CarBookingCard';
 export { CardContainer } from './components/organisms/CardContainer/CardContainer';
 export { default as DateTimePicker } from './components/organisms/DateTimePicker/DateTimePicker';
@@ -43,6 +49,7 @@ export { default as RoundTrip } from './components/organisms/RoundTrip/RoundTrip
 export { default as SearchBarTransfer } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
 export * from './components/organisms/TabCancellationPolicy';
 export * from './components/organisms/Table';
+export * from './components/organisms/TabServiceDetails';
 export { Timeline } from './components/organisms/Timeline/Timeline';
 export { TopNavigation } from './components/organisms/TopNavigation/TopNavigation';
 export { default as TransferLine } from './components/organisms/TransferLine/TransferLine';

package/dist/index.js

@@ -1,5 +1,6 @@
 // Atoms - Base components
 export { default as Button } from './components/atoms/Button/Button';
+export { default as CardServiceAccom } from './components/atoms/CardServiceAccom/CardServiceAccom';
 export { default as Checkbox } from './components/atoms/Checkbox/Checkbox';
 export { default as Chip } from './components/atoms/Chip/Chip';
 export { default as Divider } from './components/atoms/Divider/Divider';
@@ -13,9 +14,10 @@ export { default as SelectedValue } from './components/atoms/SelectedValue/Selec
 export { default as Slider } from './components/atoms/Slider/Slider';
 export { default as Spinner } from './components/atoms/Spinner/Spinner';
 export { Heading, Text } from './components/atoms/Typography/Typography';
-export { ActionDropdown, } from './components/molecules/ActionDropdown/ActionDropdown';
 export { DateDisplay } from './components/molecules/DateDisplay/DateDisplay';
 // Molecules - Composed components
+export { ActionDropdown, } from './components/molecules/ActionDropdown/ActionDropdown';
+export * from './components/molecules/BookingResume';
 export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
 export { default as TimePicker } from './components/molecules/Calendar/TimePicker';
@@ -27,13 +29,17 @@ export { default as MultiSelectDropdown } from './components/molecules/MultiSele
 export { default as Pagination } from './components/molecules/Pagination/Pagination';
 export { default as RatingTab } from './components/molecules/RatingTab/RatingTab';
 export { default as SectionTitle } from './components/molecules/SectionTitle/SectionTitle';
+export { ServiceInfo } from './components/molecules/ServiceInfo/ServiceInfo';
+export { ServiceLanguages } from './components/molecules/ServiceLanguages/ServiceLanguages';
 export { default as ServiceSelector } from './components/molecules/ServiceSelector/ServiceSelector';
 export { default as Stepper } from './components/molecules/Stepper/Stepper';
 export { default as TextWithIcon } from './components/molecules/TextWithIcon/TextWithIcon';
 export { default as TimelineItem } from './components/molecules/TimelineItem/TimelineItem';
 // Organisms - Complex components
 export { Illustration } from './components/atoms/Illustration/Illustration';
+export { DetailsClientInfo } from './components/molecules/DetailsInfo/DetailsClient/DetailsClient';
 export { default as TableServiceItem } from './components/molecules/TableServiceItem';
+export * from './components/organisms/Booking';
 export { default as CarBookingCard } from './components/organisms/CarBookingCard/CarBookingCard';
 export { CardContainer } from './components/organisms/CardContainer/CardContainer';
 export { default as DateTimePicker } from './components/organisms/DateTimePicker/DateTimePicker';
@@ -46,6 +52,7 @@ export { default as RoundTrip } from './components/organisms/RoundTrip/RoundTrip
 export { default as SearchBarTransfer } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
 export * from './components/organisms/TabCancellationPolicy';
 export * from './components/organisms/Table';
+export * from './components/organisms/TabServiceDetails';
 export { Timeline } from './components/organisms/Timeline/Timeline';
 export { TopNavigation } from './components/organisms/TopNavigation/TopNavigation';
 export { default as TransferLine } from './components/organisms/TransferLine/TransferLine';

package/dist/types/table/booking.types.d.ts

@@ -14,3 +14,15 @@ export interface BookingListItem extends TableRowData<BookingListItem> {
         infant: number;
     };
 }
+export interface BookingPaxAge {
+    age: string | number;
+}
+export interface BookingPax {
+    adult: BookingPaxAge[];
+    teen: BookingPaxAge[];
+    child: BookingPaxAge[];
+    infant: BookingPaxAge[];
+}
+export interface BookingPaxDetail {
+    pax: BookingPax[];
+}

package/dist/types/table/detail-resume.types.d.ts

@@ -22,7 +22,7 @@ export interface Offer {
     OfferType: string;
     OfferDescription: string;
 }
-export interface Room extends TableRowData<DetailResumeItem> {
+export interface RoomItem {
     RoomDetailId: number;
     Offers: Offer[];
     Mandatory: any[];
@@ -46,6 +46,8 @@ export interface Room extends TableRowData<DetailResumeItem> {
     InfantAge?: number[];
     Dates: string[];
 }
+export interface Room extends TableRowData<DetailResumeItem>, RoomItem {
+}
 export interface DetailResumeAccommodation extends TableRowData<DetailResumeItem>, Partial<Room> {
     Type: ServiceType;
     HotelId: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "private": false,
   "description": "Bibliothèque de composants Motorco pour le redesign",
   "main": "dist/index.js",
@@ -39,6 +39,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "flag-icons": "^7.5.0",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.554.0",
     "motion": "^12.23.26",
     "react": "^19.1.1",
@@ -86,6 +88,7 @@
     "@storybook/addon-onboarding": "^9.1.5",
     "@storybook/react-vite": "^9.1.5",
     "@tokens-studio/sd-transforms": "^2.0.1",
+    "@types/lodash": "^4.17.21",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^5.1.1",

package/src/components/atoms/CardServiceAccom/CardServiceAccom.css

@@ -0,0 +1,22 @@
+.card-service-accom {
+  @apply py-4 px-6;
+  border: solid 1px var(--card-color-border-default);
+  border-radius: var(--card-border-radius-default);
+  background-color: var(--card-color-background-default);
+  overflow: hidden;
+  min-height: 267px;
+  &.card-service-accom--border-left {
+    @apply relative;
+    border-top-left-radius: var(--border-radius-rounded-xl);
+    border-bottom-left-radius: var(--border-radius-rounded-xl);
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 9px;
+      height: 100%;
+      background-color: var(--color-elevation-brand-default);
+    }
+  }
+}

package/src/components/atoms/CardServiceAccom/CardServiceAccom.tsx

@@ -0,0 +1,22 @@
+import { cn } from '@/src/lib/utils';
+import React from 'react';
+import './CardServiceAccom.css';
+
+export interface CardServiceAccomProps extends React.PropsWithChildren {
+  className?: string;
+  withBorderLeft?: boolean;
+}
+
+export default function CardServiceAccom(props: CardServiceAccomProps) {
+  const { className, withBorderLeft, ...rest } = props;
+  return (
+    <div
+      className={cn(
+        'card-service-accom',
+        withBorderLeft && 'card-service-accom--border-left',
+        className
+      )}
+      {...rest}
+    />
+  );
+}

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

@@ -4,7 +4,9 @@
   justify-content: center;
   gap: var(--chip-spacing-sm-gap, 4px);
   border-radius: var(--chip-border-radius-pill, 9999px);
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-weight: var(--font-weight-font-medium, 500);
   line-height: calc(var(--font-leading-leading-base, 16) * 1px);
   white-space: nowrap;
@@ -137,7 +139,7 @@
 
 /* Label */
 .chip__label {
-  display: inline-block;
+  @apply inline-flex items-center gap-x-1;
 }
 
 /* Clickable state */
@@ -159,3 +161,6 @@
   outline-offset: 2px;
 }
 
+.chip--outline.chip--black-text {
+  color: var(--chip-color-neutral-outline-text, #262626);
+}

package/src/components/atoms/Chip/Chip.tsx

@@ -23,6 +23,10 @@ export interface ChipProps {
   className?: string;
   /** Handler de clic (optionnel, rend le chip cliquable) */
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  /** Si le texte doit être noir */
+  isBlackText?: boolean;
+  /** Icon externe */
+  externalIcon?: string;
 }
 
 const Chip: React.FC<ChipProps> = ({
@@ -35,6 +39,8 @@ const Chip: React.FC<ChipProps> = ({
   trailingIcon,
   iconSize = 'sm',
   className = '',
+  isBlackText = false,
+  externalIcon,
   onClick,
 }) => {
   const baseClasses = 'chip';
@@ -42,6 +48,7 @@ const Chip: React.FC<ChipProps> = ({
   const typeClass = `chip--${type}`;
   const colorClass = `chip--${color}`;
   const clickableClass = onClick ? 'chip--clickable' : '';
+  const blackTextClass = isBlackText ? 'chip--black-text' : '';
 
   const chipClasses = [
     baseClasses,
@@ -49,6 +56,7 @@ const Chip: React.FC<ChipProps> = ({
     typeClass,
     colorClass,
     clickableClass,
+    blackTextClass,
     className,
   ]
     .filter(Boolean)
@@ -59,12 +67,19 @@ const Chip: React.FC<ChipProps> = ({
   const content = label || children;
 
   return (
-    <div className={chipClasses} onClick={onClick} role={onClick ? 'button' : undefined} tabIndex={onClick ? 0 : undefined}>
+    <div
+      className={chipClasses}
+      onClick={onClick}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}>
       {hasLeadingIcon && (
         <span className="chip__icon chip__icon--leading">
           <Icon name={leadingIcon!} size={iconSize} />
         </span>
       )}
+      {externalIcon && (
+        <img src={externalIcon} alt="" className="w-4 h-4 object-contain" />
+      )}
       <span className="chip__label">{content}</span>
       {hasTrailingIcon && (
         <span className="chip__icon chip__icon--trailing">
@@ -76,4 +91,3 @@ const Chip: React.FC<ChipProps> = ({
 };
 
 export default Chip;
-

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { IconBaseProps } from './registry';
+
+const AirIcon: React.FC<IconBaseProps> = ({ size = 'md', className = '', color }) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs':
+        return 'w-3 h-3';
+      case 'sm':
+        return 'w-4 h-4';
+      case 'md':
+        return 'w-5 h-5';
+      case 'lg':
+        return 'w-6 h-6';
+      case 'xl':
+        return 'w-8 h-8';
+      default:
+        return 'w-5 h-5';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.6611 1.66512C10.8463 1.29477 11.2966 1.14424 11.667 1.32918C12.0373 1.51436 12.1879 1.96463 12.0029 2.33504L11.5068 3.32625L11.8643 3.2618C12.2718 3.1877 12.6622 3.45876 12.7363 3.86629C12.8102 4.27371 12.5402 4.66429 12.1328 4.73836L10.668 5.00399L10.1699 6.00008L10.7959 7.25008H11.957L12.7324 6.21688C12.981 5.8856 13.4509 5.81799 13.7822 6.06649C14.1136 6.31499 14.1801 6.78493 13.9316 7.11629L13.8311 7.25008H14.665C15.0793 7.25008 15.415 7.58587 15.415 8.00008C15.415 8.4143 15.0793 8.75008 14.665 8.75008H13.8311L13.9316 8.88387C14.1801 9.21524 14.1136 9.68517 13.7822 9.93368C13.4509 10.1822 12.981 10.1146 12.7324 9.78329L11.957 8.75008H10.7959L10.1699 10.0001L10.668 10.9952L12.1328 11.2618C12.5402 11.3359 12.8102 11.7265 12.7363 12.1339C12.6668 12.516 12.3195 12.7781 11.9404 12.7481L11.8643 12.7384L11.5068 12.6729L12.0029 13.6651L12.0332 13.7354C12.1678 14.0908 12.0142 14.4974 11.667 14.671C11.2966 14.8559 10.8463 14.7054 10.6611 14.335L10.165 13.3429L10.0029 13.669L9.33203 13.3331L8.66113 12.9981L9.32617 11.6661L8.86816 10.7501H7.12891L6.66992 11.6661L7.33594 12.9981C7.52114 13.3685 7.37127 13.8187 7.00098 14.004C6.63049 14.1892 6.17938 14.0395 5.99414 13.669L5.83105 13.3429L5.33594 14.335C5.15072 14.7055 4.70054 14.8561 4.33008 14.671C3.95977 14.4858 3.8093 14.0355 3.99414 13.6651L4.48926 12.6729L4.13281 12.7384L3.99902 12.0001L3.86426 11.2618L5.32812 10.9952L5.82617 10.0001L5.20117 8.75008H4.04102L3.26562 9.78329C3.0172 10.1145 2.54717 10.1818 2.21582 9.93368C1.88454 9.68521 1.81713 9.21523 2.06543 8.88387L2.16602 8.75008H1.33203C0.917818 8.75008 0.582031 8.4143 0.582031 8.00008C0.582031 7.58587 0.917818 7.25008 1.33203 7.25008H2.16602L2.06543 7.11629C1.81713 6.78494 1.88454 6.31495 2.21582 6.06649C2.54717 5.81833 3.0172 5.88565 3.26562 6.21688L4.04102 7.25008H5.20117L5.82617 6.00008L5.32812 5.00399L3.86426 4.73836C3.45696 4.6642 3.18689 4.27362 3.26074 3.86629C3.33483 3.4588 3.72532 3.18778 4.13281 3.2618L4.48926 3.32625L3.99414 2.33504C3.8093 1.96466 3.95977 1.51434 4.33008 1.32918C4.70054 1.14404 5.15072 1.29468 5.33594 1.66512L5.83105 2.65633L5.99414 2.33114C6.17938 1.96065 6.63049 1.81093 7.00098 1.99618C7.37127 2.1815 7.52114 2.63164 7.33594 3.00204L6.66992 4.33309L7.12891 5.25008H8.86816L9.32617 4.33309L8.66113 3.00204L9.33203 2.66708L10.0029 2.33114L10.165 2.65633L10.6611 1.66512ZM10.0029 13.669C9.81769 14.0393 9.36746 14.189 8.99707 14.004C8.62663 13.8188 8.47599 13.3686 8.66113 12.9981L10.0029 13.669ZM4.13281 12.7384C3.72532 12.8124 3.33483 12.5414 3.26074 12.1339C3.18689 11.7265 3.45696 11.336 3.86426 11.2618L4.13281 12.7384ZM6.50293 8.00008L7.12891 9.25008H8.86816L9.49316 8.00008L8.86816 6.75008H7.12891L6.50293 8.00008ZM8.99707 1.99618C9.36746 1.81116 9.81769 1.96084 10.0029 2.33114L8.66113 3.00204C8.47599 2.63158 8.62663 2.1814 8.99707 1.99618Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default AirIcon;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { IconBaseProps } from './registry';
+
+const BikeIcon: React.FC<IconBaseProps> = ({ size = 'md', className = '', color }) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs':
+        return 'w-3 h-3';
+      case 'sm':
+        return 'w-4 h-4';
+      case 'md':
+        return 'w-5 h-5';
+      case 'lg':
+        return 'w-6 h-6';
+      case 'xl':
+        return 'w-8 h-8';
+      default:
+        return 'w-5 h-5';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.24902 11.666C5.24902 10.7916 4.53949 10.083 3.66504 10.083C2.79074 10.0832 2.08203 10.7917 2.08203 11.666C2.08203 12.5404 2.79074 13.2488 3.66504 13.249C4.53949 13.249 5.24902 12.5405 5.24902 11.666ZM13.915 11.666C13.915 10.7916 13.2065 10.083 12.332 10.083C11.4576 10.083 10.749 10.7916 10.749 11.666C10.749 12.5405 11.4576 13.249 12.332 13.249C13.2065 13.249 13.915 12.5405 13.915 11.666ZM7.24902 11.666V9.64355L5.46875 7.86328C5.31501 7.70954 5.23556 7.49617 5.25098 7.2793C5.26645 7.06252 5.37496 6.86282 5.54883 6.73242L8.21582 4.73242L8.2793 4.68945C8.43242 4.59754 8.61431 4.56331 8.79199 4.59375C8.99515 4.62856 9.17473 4.74549 9.28906 4.91699L10.4004 6.58301H11.332L11.4092 6.58691C11.7871 6.62555 12.082 6.94485 12.082 7.33301C12.0819 7.72104 11.7871 8.04051 11.4092 8.0791L11.332 8.08301H9.99902C9.74841 8.08301 9.51413 7.95745 9.375 7.74902L8.48047 6.4082L7.13965 7.41309L8.5293 8.80273C8.66975 8.94336 8.74902 9.13425 8.74902 9.33301V11.666C8.74902 12.0801 8.41309 12.4158 7.99902 12.416C7.58481 12.416 7.24902 12.0802 7.24902 11.666ZM9.99902 3.24902C9.953 3.24902 9.91504 3.28698 9.91504 3.33301L9.92188 3.36523C9.93455 3.3951 9.96454 3.41602 9.99902 3.41602C10.0333 3.41588 10.0625 3.39494 10.0752 3.36523L10.082 3.33301L10.0752 3.2998C10.0667 3.28012 10.051 3.26424 10.0312 3.25586L9.99902 3.24902ZM6.74902 11.666C6.74902 13.3689 5.36792 14.749 3.66504 14.749C1.96231 14.7488 0.582031 13.3688 0.582031 11.666C0.582031 9.96325 1.96231 8.58318 3.66504 8.58301C5.36792 8.58301 6.74902 9.96314 6.74902 11.666ZM15.415 11.666C15.415 13.3689 14.0349 14.749 12.332 14.749C10.6292 14.749 9.24902 13.3689 9.24902 11.666C9.24902 9.96314 10.6292 8.58301 12.332 8.58301C14.0349 8.58301 15.415 9.96314 15.415 11.666ZM11.415 3.33301C11.4149 4.11515 10.7812 4.74885 9.99902 4.74902C9.26551 4.74902 8.6614 4.19192 8.58887 3.47754L8.58203 3.33301L8.58887 3.1875C8.66155 2.47327 9.26562 1.91602 9.99902 1.91602L10.1436 1.92285C10.8579 1.99538 11.415 2.59949 11.415 3.33301Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default BikeIcon;