mautourco-components 0.2.161 → 0.2.163

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

@@ -3,7 +3,10 @@ interface SelectedValueProps {
     value: string;
     className?: string;
     iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Chip size - controls padding and gap (Figma: chip/spacing/lg = 16px, 4px, 4px) */
     size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Text size - defaults to same as size. Use 'md' for Figma body-md (16px, leading-24) */
+    textSize?: 'xs' | 'sm' | 'md' | 'lg';
     variant?: 'filled' | 'text';
     color?: 'accent' | 'neutral';
     onRemove?: () => void;

package/dist/components/atoms/SelectedValue/SelectedValue.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from '../Icon/Icon';
 import { Text } from '../Typography/Typography';
 var SelectedValue = function (_a) {
-    var value = _a.value, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.iconSize, iconSize = _c === void 0 ? 'xs' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.variant, variant = _e === void 0 ? 'filled' : _e, _f = _a.color, color = _f === void 0 ? 'accent' : _f, onRemove = _a.onRemove, onSelect = _a.onSelect;
+    var value = _a.value, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.iconSize, iconSize = _c === void 0 ? 'xs' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, textSize = _a.textSize, _e = _a.variant, variant = _e === void 0 ? 'filled' : _e, _f = _a.color, color = _f === void 0 ? 'accent' : _f, onRemove = _a.onRemove, onSelect = _a.onSelect;
     var handleRemove = function (event) {
         event.stopPropagation();
         if (onRemove) {
@@ -10,9 +10,7 @@ var SelectedValue = function (_a) {
         }
     };
     var classes = "selected-value selected-value--".concat(size, " selected-value--").concat(color, " selected-value--").concat(variant, " ").concat(className, " ").concat(onSelect ? 'cursor-pointer' : '').trim();
-    var getTextSize = function () {
-        return size; // Utilise directement la taille passée en prop
-    };
-    return (_jsxs("div", { className: classes, onClick: onSelect, children: [_jsx(Text, { size: getTextSize(), variant: "medium", leading: "4", className: "selected-value__text", children: value }), variant !== 'text' && onRemove && (_jsx("button", { type: "button", className: "selected-value__remove", onClick: handleRemove, "aria-label": "Remove ".concat(value), children: _jsx(Icon, { name: "close", size: iconSize, className: "selected-value__remove-icon" }) }))] }));
+    var effectiveTextSize = textSize !== null && textSize !== void 0 ? textSize : size;
+    return (_jsxs("div", { className: classes, onClick: onSelect, children: [_jsx(Text, { size: effectiveTextSize, variant: "medium", leading: "6", className: "selected-value__text", children: value }), variant !== 'text' && onRemove && (_jsx("button", { type: "button", className: "selected-value__remove", onClick: handleRemove, "aria-label": "Remove ".concat(value), children: _jsx(Icon, { name: "close", size: iconSize, className: "selected-value__remove-icon" }) }))] }));
 };
 export default SelectedValue;

package/dist/components/molecules/DocketPrices/DocketPrices.js

@@ -15,7 +15,6 @@ export var DocketPrices = function (_a) {
     if (!prices || prices.length === 0) {
         return null;
     }
-    console.log('prices', prices);
     return (_jsxs("div", { className: "docket-prices ".concat(className), children: [_jsx(Text, { variant: "bold", size: "sm", color: "default", className: "docket-prices__label", children: label }), _jsx("div", { className: "docket-prices__price-list", children: prices.map(function (price, index) { return (_jsxs(Text, { variant: "bold", size: "sm", color: "default", children: [price.Currency, " ", formatAmount(price.Amount)] }, index)); }) })] }));
 };
 export default DocketPrices;

package/dist/components/organisms/DialogSaveQuotation/DialogSaveQuotation.css

@@ -0,0 +1,185 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* ===== DialogSaveQuotation - Tokens from Figma ===== */
+/* Uses CSS variables from tokens.css */
+
+.dialog-save-quotation {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-6, 24px);
+}
+
+/* Animated view wrapper (form vs success) */
+.dialog-save-quotation__view {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-6, 24px);
+  width: 100%;
+}
+
+/* Selected quotes section - tags + select all */
+.dialog-save-quotation__quotes-section {
+  display: flex;
+  padding: var(--spacing-gap-gap-4, 16px) 0 var(--spacing-gap-gap-2, 8px) 0;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-gap-gap-4, 16px);
+  flex-wrap: wrap;
+}
+
+.dialog-save-quotation__quotes-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-gap-gap-2, 8px);
+  flex: 1;
+  min-width: 0;
+}
+
+.dialog-save-quotation__select-all {
+  flex-shrink: 0;
+}
+
+/* All quotations section header */
+.dialog-save-quotation__section-title {
+  font-family:
+    var(--font-font-family-body), 'Satoshi', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-size: var(--font-size-text-base, 16px);
+  font-weight: var(--font-weight-font-bold, 700);
+  line-height: var(--font-leading-leading-md, 24px);
+  color: var(--color-text-default);
+  margin: 0;
+}
+
+/* Form fields grid */
+.dialog-save-quotation__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-6, 24px);
+}
+
+.dialog-save-quotation__form-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-gap-gap-4, 16px);
+}
+
+.dialog-save-quotation__form-row--single {
+  grid-template-columns: 1fr;
+}
+
+@media (max-width: 768px) {
+  .dialog-save-quotation__form-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Form field */
+.dialog-save-quotation__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-2, 8px);
+}
+
+.dialog-save-quotation__label {
+  font-family:
+    var(--font-font-family-body), 'Satoshi', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-size: var(--font-size-text-sm, 14px);
+  font-weight: var(--font-weight-font-medium, 500);
+  line-height: var(--font-leading-leading-sm, 20px);
+  color: var(--color-text-default);
+}
+
+.dialog-save-quotation__label--required::after {
+  content: ' *';
+  color: var(--color-text-state-error);
+}
+
+/* Disabled label – matches Figma / input design token */
+.dialog-save-quotation__label--disabled {
+  color: var(--input-color-label-disabled, var(--color-text-state-disabled));
+  cursor: not-allowed;
+}
+
+.dialog-save-quotation__label--disabled.dialog-save-quotation__label--required::after {
+  color: var(--input-color-label-disabled, var(--color-text-state-disabled));
+}
+
+/* Form error message – displayed below the form when validation fails */
+.dialog-save-quotation__error {
+  font-family:
+    var(--font-font-family-body), 'Satoshi', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-size: var(--font-size-text-sm, 14px);
+  font-weight: var(--font-weight-font-regular, 400);
+  line-height: var(--font-leading-leading-sm, 20px);
+  color: var(--color-text-state-error, #dc2626);
+  margin: 0;
+  padding: var(--spacing-gap-gap-2, 8px) 0;
+}
+
+/* Footer - buttons full width, side by side */
+.dialog-save-quotation__footer {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: var(--spacing-gap-gap-4, 16px);
+  padding: var(--spacing-gap-gap-2, 8px) 0 var(--spacing-gap-gap-4, 16px) 0;
+  width: 100%;
+}
+
+.dialog-save-quotation__footer > * {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ===== Success state content (Figma 4700-366717 – Shared-flows) ===== */
+.dialog-save-quotation__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-gap-gap-4, 16px);
+  text-align: center;
+  padding: var(--spacing-gap-gap-2, 8px) 0 0;
+}
+
+.dialog-save-quotation__content-image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dialog-save-quotation__content-image {
+  width: 150px;
+  height: 150px;
+  object-fit: contain;
+}
+
+.dialog-save-quotation__content-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-2, 8px);
+}
+
+.dialog-save-quotation__content-title {
+  color: var(--color-text-default, #262626);
+  text-align: center;
+
+  /* heading-sm/medium */
+  font-family: var(--font-font-family-heading, Satoshi);
+  font-size: var(--font-size-text-2xl, 24px);
+  font-style: normal;
+  font-weight: var(--font-weight-font-medium, 500);
+  line-height: var(--font-leading-leading-xl, 32px); /* 133.333% */
+  letter-spacing: var(--font-tracking-tracking-normal, 0);
+}
+
+.dialog-save-quotation__content-message {
+  font-family:
+    var(--font-font-family-body), 'Satoshi', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-size: var(--font-size-text-sm, 14px);
+  font-weight: var(--font-weight-font-regular, 400);
+  line-height: var(--font-leading-leading-md, 24px);
+  color: var(--color-text-default, #262626);
+  margin: 0;
+}

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

@@ -0,0 +1,52 @@
+import './DialogSaveQuotation.css';
+import { SaveQuotationSchema } from './save-quotation-schema';
+export interface SaveQuotationQuote {
+    id: string;
+    name: string;
+}
+export interface DialogSaveQuotationProps {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Callback to control dialog open state */
+    setOpen: (open: boolean) => void;
+    /** List of quotations to save (displayed as removable chips) */
+    quotations: SaveQuotationQuote[];
+    /** Callback when form is submitted */
+    onSubmit: (data: {
+        selectedQuotationIds: string[];
+        formData: SaveQuotationSchema;
+    }) => void;
+    /** Callback when the book now button is clicked */
+    onHandleBookNow?: () => void;
+    /** Callback when the view on quotation grid button is clicked */
+    onHandleViewOnQuotationGrid?: () => void;
+    /** Optional default values for the form */
+    defaultValues?: Partial<SaveQuotationSchema>;
+    /** Which form inputs to disable. Omit or set to false to keep an input enabled. */
+    disabledInputs?: Partial<Record<keyof SaveQuotationSchema, boolean>>;
+    /** Whether the form is loading */
+    loading?: boolean;
+    /** Whether the form is successful */
+    successful?: boolean;
+    /** The error message to display */
+    errorMessage?: string;
+    /** The image to display when the form is successful */
+    imgSuccess?: string;
+    /** The image to display */
+    imgSuccessAlt?: string;
+}
+/**
+ * DialogSaveQuotation - Modal to save quotations with agent and quotation details.
+ * Based on Figma "Save quotation" design with tokens.
+ *
+ * @example
+ * ```tsx
+ * <DialogSaveQuotation
+ *   open={open}
+ *   setOpen={setOpen}
+ *   quotations={[{ id: '1', name: 'Quote 1' }]}
+ *   onSubmit={(data) => console.log(data)}
+ * />
+ * ```
+ */
+export declare function DialogSaveQuotation(props: DialogSaveQuotationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/DialogSaveQuotation/DialogSaveQuotation.js

@@ -0,0 +1,164 @@
+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)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence } from 'motion/react';
+import * as motion from 'motion/react-m';
+import { useEffect, useMemo, useState } from 'react';
+import Button from '../../atoms/Button/Button';
+import Checkbox from '../../atoms/Checkbox/Checkbox';
+import Input from '../../atoms/Inputs/Input/Input';
+import SelectedValue from '../../atoms/SelectedValue/SelectedValue';
+import { Text } from '../../atoms/Typography/Typography';
+import { DialogBookingConfirm } from '../DialogBookingConfirm';
+import './DialogSaveQuotation.css';
+import { saveQuotationSchema } from './save-quotation-schema';
+/**
+ * DialogSaveQuotation - Modal to save quotations with agent and quotation details.
+ * Based on Figma "Save quotation" design with tokens.
+ *
+ * @example
+ * ```tsx
+ * <DialogSaveQuotation
+ *   open={open}
+ *   setOpen={setOpen}
+ *   quotations={[{ id: '1', name: 'Quote 1' }]}
+ *   onSubmit={(data) => console.log(data)}
+ * />
+ * ```
+ */
+export function DialogSaveQuotation(props) {
+    var _a, _b, _c, _d;
+    var open = props.open, setOpen = props.setOpen, quotations = props.quotations, onSubmit = props.onSubmit, defaultValues = props.defaultValues, disabledInputs = props.disabledInputs, errorMessage = props.errorMessage, successful = props.successful, loading = props.loading, imgSuccess = props.imgSuccess, imgSuccessAlt = props.imgSuccessAlt, onHandleBookNow = props.onHandleBookNow, onHandleViewOnQuotationGrid = props.onHandleViewOnQuotationGrid;
+    var _e = useState(quotations), remainingQuotations = _e[0], setRemainingQuotations = _e[1];
+    var _f = useState([]), selectedQuotationIds = _f[0], setSelectedQuotationIds = _f[1];
+    var _g = useState(false), isSelectAll = _g[0], setIsSelectAll = _g[1];
+    var _h = useState((_a = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.agentForename) !== null && _a !== void 0 ? _a : ''), agentForename = _h[0], setAgentForename = _h[1];
+    var _j = useState((_b = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.agentLastname) !== null && _b !== void 0 ? _b : ''), agentLastname = _j[0], setAgentLastname = _j[1];
+    var _k = useState((_c = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.agency) !== null && _c !== void 0 ? _c : ''), agency = _k[0], setAgency = _k[1];
+    var _l = useState((_d = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.quotationName) !== null && _d !== void 0 ? _d : ''), quotationName = _l[0], setQuotationName = _l[1];
+    var _m = useState({}), fieldErrors = _m[0], setFieldErrors = _m[1];
+    var _o = useState(null), formErrorMessage = _o[0], setFormErrorMessage = _o[1];
+    var remainingQuotationsFiltered = useMemo(function () { return remainingQuotations.filter(function (q) { return selectedQuotationIds.includes(q.id); }); }, [remainingQuotations, selectedQuotationIds]);
+    useEffect(function () {
+        setRemainingQuotations(quotations);
+        setSelectedQuotationIds(quotations.map(function (q) { return q.id; }));
+    }, [quotations]);
+    useEffect(function () {
+        setIsSelectAll(remainingQuotations.length > 0 &&
+            selectedQuotationIds.length === remainingQuotations.length);
+    }, [selectedQuotationIds, remainingQuotations]);
+    var handleRemoveQuotation = function (id) {
+        if (remainingQuotations.length > 1) {
+            setRemainingQuotations(function (prev) { return prev.filter(function (q) { return q.id !== id; }); });
+            setSelectedQuotationIds(function (prev) { return prev.filter(function (quoteId) { return quoteId !== id; }); });
+        }
+    };
+    var handleSelectQuotation = function (id) {
+        if (remainingQuotations.length > 1) {
+            setSelectedQuotationIds(function (prev) {
+                if (prev.includes(id)) {
+                    return prev.length > 1 ? prev.filter(function (q) { return q !== id; }) : prev;
+                }
+                return __spreadArray(__spreadArray([], prev, true), [id], false);
+            });
+        }
+    };
+    var clearFieldError = function (field) {
+        setFieldErrors(function (prev) {
+            var next = __assign({}, prev);
+            delete next[field];
+            return next;
+        });
+        setFormErrorMessage(null);
+    };
+    var handleSelectAll = function () {
+        if (isSelectAll) {
+            setSelectedQuotationIds(remainingQuotations.length > 1 ? [remainingQuotations[0].id] : []);
+        }
+        else {
+            setSelectedQuotationIds(remainingQuotations.map(function (q) { return q.id; }));
+        }
+        setIsSelectAll(!isSelectAll);
+    };
+    var handleSubmit = function () {
+        var _a;
+        setFieldErrors({});
+        setFormErrorMessage(null);
+        var formData = {
+            agentForename: agentForename,
+            agentLastname: agentLastname,
+            agency: agency,
+            quotationName: quotationName,
+        };
+        var result = saveQuotationSchema.safeParse(formData);
+        if (!result.success) {
+            var errors_1 = {};
+            var messages_1 = [];
+            result.error.issues.forEach(function (issue) {
+                var path = issue.path[0];
+                if (path &&
+                    (path === 'agentForename' ||
+                        path === 'agentLastname' ||
+                        path === 'agency' ||
+                        path === 'quotationName')) {
+                    errors_1[path] = issue.message;
+                    messages_1.push(issue.message);
+                }
+            });
+            setFieldErrors(errors_1);
+            setFormErrorMessage((_a = messages_1[0]) !== null && _a !== void 0 ? _a : 'Please correct the errors below.');
+            return;
+        }
+        onSubmit({
+            selectedQuotationIds: remainingQuotationsFiltered.map(function (q) { return q.id; }),
+            formData: result.data,
+        });
+    };
+    return (_jsx(DialogBookingConfirm, { open: open, setOpen: setOpen, title: !successful ? 'Save quotation' : undefined, className: "!max-w-[800px]", closeOnOverlayClick: true, children: _jsx(motion.div, { className: "dialog-save-quotation", children: _jsx(AnimatePresence, { mode: "wait", initial: false, children: !successful ? (_jsxs(motion.div, { className: "dialog-save-quotation__view", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2, ease: 'easeInOut' }, children: [_jsxs("div", { className: "dialog-save-quotation__quotes-section", children: [_jsx("div", { className: "dialog-save-quotation__quotes-list", children: remainingQuotations.map(function (quote) { return (_jsx(SelectedValue, { value: quote.name, color: selectedQuotationIds.includes(quote.id) ? 'accent' : 'neutral', onSelect: function () { return handleSelectQuotation(quote.id); }, onRemove: function () { return handleRemoveQuotation(quote.id); }, size: "lg", textSize: "md" }, quote.id)); }) }), _jsx("div", { className: "dialog-save-quotation__select-all", children: _jsx(Checkbox, { label: "Select all quotations", checked: isSelectAll || remainingQuotations.length === 1, disabled: remainingQuotations.length === 1, onChange: handleSelectAll, labelPosition: "leading" }) })] }), _jsx("h3", { className: "dialog-save-quotation__section-title", children: "All quotations" }), _jsxs("div", { className: "dialog-save-quotation__form", children: [_jsxs("div", { className: "dialog-save-quotation__form-row", children: [_jsxs("div", { className: "dialog-save-quotation__field", children: [_jsx("label", { htmlFor: "agent-forename", className: "dialog-save-quotation__label dialog-save-quotation__label--required".concat((disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.agentForename) ? ' dialog-save-quotation__label--disabled' : ''), children: "Agent Forename" }), _jsx(Input, { id: "agent-forename", value: agentForename, onChange: function (e) {
+                                                        setAgentForename(e.target.value);
+                                                        clearFieldError('agentForename');
+                                                    }, placeholder: "Mautourco", variant: (disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.agentForename)
+                                                        ? 'disabled'
+                                                        : fieldErrors.agentForename || errorMessage
+                                                            ? 'error'
+                                                            : 'default' })] }), _jsxs("div", { className: "dialog-save-quotation__field", children: [_jsx("label", { htmlFor: "agent-lastname", className: "dialog-save-quotation__label dialog-save-quotation__label--required".concat((disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.agentLastname) ? ' dialog-save-quotation__label--disabled' : ''), children: "Agent Lastname" }), _jsx(Input, { id: "agent-lastname", value: agentLastname, onChange: function (e) {
+                                                        setAgentLastname(e.target.value);
+                                                        clearFieldError('agentLastname');
+                                                    }, placeholder: "B2B", variant: (disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.agentLastname)
+                                                        ? 'disabled'
+                                                        : fieldErrors.agentLastname || errorMessage
+                                                            ? 'error'
+                                                            : 'default' })] }), _jsxs("div", { className: "dialog-save-quotation__field", children: [_jsx("label", { htmlFor: "agency", className: "dialog-save-quotation__label".concat((disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.agency) ? ' dialog-save-quotation__label--disabled' : ''), children: "Agency" }), _jsx(Input, { id: "agency", value: agency, onChange: function (e) {
+                                                        setAgency(e.target.value);
+                                                        clearFieldError('agency');
+                                                    }, placeholder: "Mautourco Ltd", variant: (disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.agency)
+                                                        ? 'disabled'
+                                                        : fieldErrors.agency || errorMessage
+                                                            ? 'error'
+                                                            : 'default' })] })] }), _jsx("div", { className: "dialog-save-quotation__form-row dialog-save-quotation__form-row--single", children: _jsxs("div", { className: "dialog-save-quotation__field", children: [_jsx("label", { htmlFor: "quotation-name", className: "dialog-save-quotation__label dialog-save-quotation__label--required".concat((disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.quotationName) ? ' dialog-save-quotation__label--disabled' : ''), children: "Quotation name" }), _jsx(Input, { id: "quotation-name", value: quotationName, onChange: function (e) {
+                                                    setQuotationName(e.target.value);
+                                                    clearFieldError('quotationName');
+                                                }, placeholder: "Insert client's name", variant: (disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.quotationName)
+                                                    ? 'disabled'
+                                                    : fieldErrors.quotationName || errorMessage
+                                                        ? 'error'
+                                                        : 'default' })] }) })] }), (formErrorMessage || errorMessage) && (_jsx("p", { className: "dialog-save-quotation__error", role: "alert", children: formErrorMessage !== null && formErrorMessage !== void 0 ? formErrorMessage : errorMessage })), _jsxs("div", { className: "dialog-save-quotation__footer", children: [_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: function () { return setOpen(false); }, disabled: loading, children: "Cancel" }), _jsx(Button, { variant: "secondary", size: "sm", onClick: handleSubmit, disabled: loading, children: loading ? 'Saving…' : 'Save quotation' })] })] }, "form")) : (_jsxs(motion.div, { className: "dialog-save-quotation__view", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2, ease: 'easeInOut' }, children: [_jsxs("div", { className: "dialog-save-quotation__content", children: [_jsx("div", { className: "dialog-save-quotation__content-image-container", "aria-hidden": true, children: _jsx("img", { src: imgSuccess, alt: imgSuccessAlt, className: "dialog-save-quotation__content-image" }) }), _jsxs("div", { className: "dialog-save-quotation__content-text", children: [_jsx(Text, { variant: "bold", size: "xl", as: "h2", className: "dialog-save-quotation__content-title ", children: "Quotation saved" }), _jsxs(Text, { size: "lg", children: [_jsxs(Text, { size: "lg", variant: "bold", as: "span", children: ["\"", quotationName, "\""] }), ' ', "quotation"] })] })] }), _jsxs("div", { className: "dialog-save-quotation__footer", children: [_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: onHandleViewOnQuotationGrid, children: "View on quotation grid" }), _jsx(Button, { variant: "secondary", size: "sm", onClick: onHandleBookNow, children: "Book now" })] })] }, "success")) }) }) }));
+}

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

@@ -0,0 +1,2 @@
+export { DialogSaveQuotation, type DialogSaveQuotationProps, type SaveQuotationQuote, } from './DialogSaveQuotation';
+export type { SaveQuotationSchema } from './save-quotation-schema';

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

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

package/dist/components/organisms/DialogSaveQuotation/save-quotation-schema.d.ts

@@ -0,0 +1,8 @@
+import z from 'zod';
+export declare const saveQuotationSchema: z.ZodObject<{
+    agentForename: z.ZodString;
+    agentLastname: z.ZodString;
+    agency: z.ZodOptional<z.ZodString>;
+    quotationName: z.ZodString;
+}, z.core.$strip>;
+export type SaveQuotationSchema = z.infer<typeof saveQuotationSchema>;

package/dist/components/organisms/DialogSaveQuotation/save-quotation-schema.js

@@ -0,0 +1,7 @@
+import z from 'zod';
+export var saveQuotationSchema = z.object({
+    agentForename: z.string().min(1, 'Agent forename is required'),
+    agentLastname: z.string().min(1, 'Agent lastname is required'),
+    agency: z.string().optional(),
+    quotationName: z.string().min(1, 'Quotation name is required'),
+});

package/dist/index.d.ts

@@ -64,6 +64,7 @@ export { DialogComparison } from './components/organisms/DialogComparison/Dialog
 export * from './components/organisms/DialogDeleteConfirm';
 export { DialogDeleteConfirm } from './components/organisms/DialogDeleteConfirm/DialogDeleteConfirm';
 export { DialogQuoteRename } from './components/organisms/DialogQuoteRename/DialogQuoteRename';
+export * from './components/organisms/DialogSaveQuotation';
 export * from './components/organisms/DialogSendingMail';
 export { default as Docket } from './components/organisms/Docket/Docket';
 export { DocketAccordion, type DocketAccordionProps, } from './components/organisms/DocketAccordion';

package/dist/index.js

@@ -66,6 +66,7 @@ export { DialogComparison } from './components/organisms/DialogComparison/Dialog
 export * from './components/organisms/DialogDeleteConfirm';
 export { DialogDeleteConfirm } from './components/organisms/DialogDeleteConfirm/DialogDeleteConfirm';
 export { DialogQuoteRename } from './components/organisms/DialogQuoteRename/DialogQuoteRename';
+export * from './components/organisms/DialogSaveQuotation';
 export * from './components/organisms/DialogSendingMail';
 export { default as Docket } from './components/organisms/Docket/Docket';
 export { DocketAccordion, } from './components/organisms/DocketAccordion';

package/dist/styles/components/forms.css

@@ -107,17 +107,17 @@
   color: var(--color-red-400);
 }
 
-/* État disabled */
+/* État disabled – Mautourco Foundations tokens */
 
 .input-field--disabled {
-  background-color: var(--color-slate-100);
-  border-color: var(--color-slate-200);
-  color: var(--color-slate-400);
+  background-color: var(--color-elevation-state-disabled, #fbfbfb);
+  border-color: var(--color-border-input-disabled, #d1d5db);
+  color: var(--color-text-state-disabled, #a3a3a3);
   cursor: not-allowed;
 }
 
 .input-field--disabled::placeholder {
-  color: var(--color-slate-300);
+  color: var(--color-text-state-disabled, #a3a3a3);
 }
 
 /* Styles pour le showcase */

package/dist/styles/components/organism/docket.css

@@ -235,6 +235,7 @@
 
 .docket__footer-button {
   flex: 1;
+  white-space: nowrap;
 }
 
 .docket__footer-button--full {

package/dist/styles/components/selected-value.css

@@ -4,19 +4,21 @@
 
 /* SelectedValue Component Styles */
 
+/* Base uses sm as default; tokens: chip-spacing-*-* from Figma */
+
 .selected-value {
   display: inline-flex;
   align-items: center;
-  gap: var(--chip-spacing-gap, 0.5rem);
-  padding: var(--chip-spacing-sm-padding-y, 0.375rem) var(--chip-spacing-sm-padding-x);
-  border-radius: var(--chip-border-radius-pill, 1.375rem);
+  gap: var(--chip-spacing-sm-gap, 4px);
+  padding: var(--chip-spacing-sm-padding-y, 4px) var(--chip-spacing-sm-padding-x, 8px);
+  border-radius: var(--chip-border-radius-pill, 9999px);
   /* Typography is now handled by the Text component */
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   max-width: 200px;
   width: auto;
-  opacity: var(--opacity-opacity-100);
+  opacity: var(--opacity-opacity-100, 1);
   /* Variant: text-only (no background, no padding) */
   .selected-value--text {
     background: transparent;
@@ -63,32 +65,36 @@
 /* Size variants */
 
 .selected-value--xs {
-  padding: var(--chip-spacing-xs-padding-y, 0.25rem)
-    var(--chip-spacing-xs-padding-x, 0.5rem);
-  gap: var(--chip-spacing-xs-gap, 0.25rem);
+  padding: var(--chip-spacing-xs-padding-y, 2px)
+    var(--chip-spacing-xs-padding-x, 6px);
+  gap: var(--chip-spacing-xs-gap, 2px);
 }
 
 .selected-value--sm {
-  padding: var(--chip-spacing-sm-padding-y, 0.375rem)
-    var(--chip-spacing-sm-padding-x, 0.75rem);
-  gap: var(--chip-spacing-sm-gap, 0.375rem);
+  padding: var(--chip-spacing-sm-padding-y, 4px)
+    var(--chip-spacing-sm-padding-x, 8px);
+  gap: var(--chip-spacing-sm-gap, 4px);
 }
 
 .selected-value--md {
-  padding: var(--chip-spacing-md-padding-y, 0.5rem)
-    var(--chip-spacing-md-padding-x, 0.875rem);
-  gap: var(--chip-spacing-md-gap, 0.5rem);
+  padding: var(--chip-spacing-md-padding-y, 4px)
+    var(--chip-spacing-md-padding-x, 12px);
+  gap: var(--chip-spacing-md-gap, 4px);
 }
 
+/* Figma chip/lg: padding-x 16px, padding-y 4px, gap 4px */
+
 .selected-value--lg {
-  padding: var(--chip-spacing-lg-padding-y, 0.625rem)
-    var(--chip-spacing-lg-padding-x, 1rem);
-  gap: var(--chip-spacing-lg-gap, 0.625rem);
+  padding: var(--chip-spacing-lg-padding-y, 4px)
+    var(--chip-spacing-lg-padding-x, 16px);
+  gap: var(--chip-spacing-lg-gap, 4px);
 }
 
+/* Figma chip/color/accent/filled: bg #0f7173, fg #ffffff */
+
 .selected-value--accent {
-  background: var(--color-atoll-green-800);
-  color: var(--color-white);
+  background: var(--chip-color-accent-filled-background, var(--color-atoll-green-800));
+  color: var(--chip-color-accent-filled-foreground, var(--color-white));
 }
 
 .selected-value--neutral {

package/package.json

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

package/src/components/atoms/SelectedValue/SelectedValue.tsx

@@ -6,7 +6,10 @@ interface SelectedValueProps {
   value: string;
   className?: string;
   iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Chip size - controls padding and gap (Figma: chip/spacing/lg = 16px, 4px, 4px) */
   size?: 'xs' | 'sm' | 'md' | 'lg';
+  /** Text size - defaults to same as size. Use 'md' for Figma body-md (16px, leading-24) */
+  textSize?: 'xs' | 'sm' | 'md' | 'lg';
   variant?: 'filled' | 'text';
   color?: 'accent' | 'neutral';
   onRemove?: () => void;
@@ -18,6 +21,7 @@ const SelectedValue: React.FC<SelectedValueProps> = ({
   className = '',
   iconSize = 'xs',
   size = 'md',
+  textSize,
   variant = 'filled',
   color = 'accent',
   onRemove,
@@ -33,16 +37,14 @@ const SelectedValue: React.FC<SelectedValueProps> = ({
   const classes =
     `selected-value selected-value--${size} selected-value--${color} selected-value--${variant} ${className} ${onSelect ? 'cursor-pointer' : ''}`.trim();
 
-  const getTextSize = () => {
-    return size; // Utilise directement la taille passée en prop
-  };
+  const effectiveTextSize = textSize ?? size;
 
   return (
     <div className={classes} onClick={onSelect}>
       <Text
-        size={getTextSize() as any}
+        size={effectiveTextSize}
         variant="medium"
-        leading="4"
+        leading="6"
         className="selected-value__text">
         {value}
       </Text>