mautourco-components 0.2.161 → 0.2.162

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/organisms/DialogSaveQuotation/DialogSaveQuotation.css

@@ -0,0 +1,104 @@
+/**
+ * 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);
+}
+
+/* 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);
+}
+
+/* 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;
+}

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

@@ -0,0 +1,36 @@
+import { SaveQuotationSchema } from './save-quotation-schema';
+import './DialogSaveQuotation.css';
+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;
+    /** Optional default values for the form */
+    defaultValues?: Partial<SaveQuotationSchema>;
+}
+/**
+ * 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,97 @@
+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 { 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 { DialogBookingConfirm } from '../DialogBookingConfirm';
+import { saveQuotationSchema, } from './save-quotation-schema';
+import './DialogSaveQuotation.css';
+/**
+ * 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;
+    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 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 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 formData = {
+            agentForename: agentForename,
+            agentLastname: agentLastname,
+            agency: agency,
+            quotationName: quotationName,
+        };
+        var result = saveQuotationSchema.safeParse(formData);
+        if (!result.success) {
+            return;
+        }
+        onSubmit({
+            selectedQuotationIds: remainingQuotationsFiltered.map(function (q) { return q.id; }),
+            formData: result.data,
+        });
+        setOpen(false);
+    };
+    return (_jsx(DialogBookingConfirm, { open: open, setOpen: setOpen, title: "Save quotation", className: "!max-w-[800px]", closeOnOverlayClick: true, children: _jsxs("div", { className: "dialog-save-quotation", 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", children: "Agent Forename" }), _jsx(Input, { id: "agent-forename", value: agentForename, onChange: function (e) { return setAgentForename(e.target.value); }, placeholder: "Mautourco" })] }), _jsxs("div", { className: "dialog-save-quotation__field", children: [_jsx("label", { htmlFor: "agent-lastname", className: "dialog-save-quotation__label dialog-save-quotation__label--required", children: "Agent Lastname" }), _jsx(Input, { id: "agent-lastname", value: agentLastname, onChange: function (e) { return setAgentLastname(e.target.value); }, placeholder: "B2B" })] }), _jsxs("div", { className: "dialog-save-quotation__field", children: [_jsx("label", { htmlFor: "agency", className: "dialog-save-quotation__label", children: "Agency" }), _jsx(Input, { id: "agency", value: agency, onChange: function (e) { return setAgency(e.target.value); }, placeholder: "Mautourco Ltd" })] })] }), _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", children: "Quotation name" }), _jsx(Input, { id: "quotation-name", value: quotationName, onChange: function (e) { return setQuotationName(e.target.value); }, placeholder: "Insert client's name" })] }) })] }), _jsxs("div", { className: "dialog-save-quotation__footer", children: [_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: function () { return setOpen(false); }, children: "Cancel" }), _jsx(Button, { variant: "secondary", size: "sm", onClick: handleSubmit, children: "Save quotation" })] })] }) }));
+}

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

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

package/dist/index.js

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

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.162",
   "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>

package/src/components/organisms/DialogSaveQuotation/DialogSaveQuotation.css

@@ -0,0 +1,100 @@
+/* ===== 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);
+}
+
+/* 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);
+}
+
+/* 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;
+}

package/src/components/organisms/DialogSaveQuotation/DialogSaveQuotation.tsx

@@ -0,0 +1,249 @@
+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 { DialogBookingConfirm } from '../DialogBookingConfirm';
+import {
+  saveQuotationSchema,
+  SaveQuotationSchema,
+} from './save-quotation-schema';
+import './DialogSaveQuotation.css';
+
+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;
+  /** Optional default values for the form */
+  defaultValues?: Partial<SaveQuotationSchema>;
+}
+
+/**
+ * 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: DialogSaveQuotationProps) {
+  const {
+    open,
+    setOpen,
+    quotations,
+    onSubmit,
+    defaultValues,
+  } = props;
+
+  const [remainingQuotations, setRemainingQuotations] =
+    useState<SaveQuotationQuote[]>(quotations);
+  const [selectedQuotationIds, setSelectedQuotationIds] = useState<string[]>([]);
+  const [isSelectAll, setIsSelectAll] = useState(false);
+
+  const [agentForename, setAgentForename] = useState(
+    defaultValues?.agentForename ?? ''
+  );
+  const [agentLastname, setAgentLastname] = useState(
+    defaultValues?.agentLastname ?? ''
+  );
+  const [agency, setAgency] = useState(defaultValues?.agency ?? '');
+  const [quotationName, setQuotationName] = useState(
+    defaultValues?.quotationName ?? ''
+  );
+
+  const remainingQuotationsFiltered = useMemo(
+    () =>
+      remainingQuotations.filter((q) => selectedQuotationIds.includes(q.id)),
+    [remainingQuotations, selectedQuotationIds]
+  );
+
+  useEffect(() => {
+    setRemainingQuotations(quotations);
+    setSelectedQuotationIds(quotations.map((q) => q.id));
+  }, [quotations]);
+
+  useEffect(() => {
+    setIsSelectAll(
+      remainingQuotations.length > 0 &&
+        selectedQuotationIds.length === remainingQuotations.length
+    );
+  }, [selectedQuotationIds, remainingQuotations]);
+
+  const handleRemoveQuotation = (id: string) => {
+    if (remainingQuotations.length > 1) {
+      setRemainingQuotations((prev) => prev.filter((q) => q.id !== id));
+      setSelectedQuotationIds((prev) => prev.filter((quoteId) => quoteId !== id));
+    }
+  };
+
+  const handleSelectQuotation = (id: string) => {
+    if (remainingQuotations.length > 1) {
+      setSelectedQuotationIds((prev) => {
+        if (prev.includes(id)) {
+          return prev.length > 1 ? prev.filter((q) => q !== id) : prev;
+        }
+        return [...prev, id];
+      });
+    }
+  };
+
+  const handleSelectAll = () => {
+    if (isSelectAll) {
+      setSelectedQuotationIds(remainingQuotations.length > 1 ? [remainingQuotations[0].id] : []);
+    } else {
+      setSelectedQuotationIds(remainingQuotations.map((q) => q.id));
+    }
+    setIsSelectAll(!isSelectAll);
+  };
+
+  const handleSubmit = () => {
+    const formData: SaveQuotationSchema = {
+      agentForename,
+      agentLastname,
+      agency,
+      quotationName,
+    };
+
+    const result = saveQuotationSchema.safeParse(formData);
+    if (!result.success) {
+      return;
+    }
+
+    onSubmit({
+      selectedQuotationIds: remainingQuotationsFiltered.map((q) => q.id),
+      formData: result.data,
+    });
+    setOpen(false);
+  };
+
+  return (
+    <DialogBookingConfirm
+      open={open}
+      setOpen={setOpen}
+      title="Save quotation"
+      className="!max-w-[800px]"
+      closeOnOverlayClick>
+      <div className="dialog-save-quotation">
+        {/* Quotes section: chips + select all */}
+        <div className="dialog-save-quotation__quotes-section">
+          <div className="dialog-save-quotation__quotes-list">
+            {remainingQuotations.map((quote) => (
+              <SelectedValue
+                key={quote.id}
+                value={quote.name}
+                color={selectedQuotationIds.includes(quote.id) ? 'accent' : 'neutral'}
+                onSelect={() => handleSelectQuotation(quote.id)}
+                onRemove={() => handleRemoveQuotation(quote.id)}
+                size="lg"
+                textSize="md"
+              />
+            ))}
+          </div>
+          <div className="dialog-save-quotation__select-all">
+            <Checkbox
+              label="Select all quotations"
+              checked={isSelectAll || remainingQuotations.length === 1}
+              disabled={remainingQuotations.length === 1}
+              onChange={handleSelectAll}
+              labelPosition="leading"
+            />
+          </div>
+        </div>
+
+        {/* All quotations form */}
+        <h3 className="dialog-save-quotation__section-title">All quotations</h3>
+
+        <div className="dialog-save-quotation__form">
+          <div className="dialog-save-quotation__form-row">
+            <div className="dialog-save-quotation__field">
+              <label
+                htmlFor="agent-forename"
+                className="dialog-save-quotation__label dialog-save-quotation__label--required">
+                Agent Forename
+              </label>
+              <Input
+                id="agent-forename"
+                value={agentForename}
+                onChange={(e) => setAgentForename(e.target.value)}
+                placeholder="Mautourco"
+              />
+            </div>
+            <div className="dialog-save-quotation__field">
+              <label
+                htmlFor="agent-lastname"
+                className="dialog-save-quotation__label dialog-save-quotation__label--required">
+                Agent Lastname
+              </label>
+              <Input
+                id="agent-lastname"
+                value={agentLastname}
+                onChange={(e) => setAgentLastname(e.target.value)}
+                placeholder="B2B"
+              />
+            </div>
+            <div className="dialog-save-quotation__field">
+              <label
+                htmlFor="agency"
+                className="dialog-save-quotation__label">
+                Agency
+              </label>
+              <Input
+                id="agency"
+                value={agency}
+                onChange={(e) => setAgency(e.target.value)}
+                placeholder="Mautourco Ltd"
+              />
+            </div>
+          </div>
+
+          <div className="dialog-save-quotation__form-row dialog-save-quotation__form-row--single">
+            <div className="dialog-save-quotation__field">
+              <label
+                htmlFor="quotation-name"
+                className="dialog-save-quotation__label dialog-save-quotation__label--required">
+                Quotation name
+              </label>
+              <Input
+                id="quotation-name"
+                value={quotationName}
+                onChange={(e) => setQuotationName(e.target.value)}
+                placeholder="Insert client's name"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="dialog-save-quotation__footer">
+          <Button
+            variant="outline-secondary"
+            size="sm"
+            onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button variant="secondary" size="sm" onClick={handleSubmit}>
+            Save quotation
+          </Button>
+        </div>
+      </div>
+    </DialogBookingConfirm>
+  );
+}

package/src/components/organisms/DialogSaveQuotation/index.ts

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

package/src/components/organisms/DialogSaveQuotation/save-quotation-schema.ts

@@ -0,0 +1,10 @@
+import z from 'zod';
+
+export const 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'),
+});
+
+export type SaveQuotationSchema = z.infer<typeof saveQuotationSchema>;

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

@@ -1,16 +1,17 @@
 /* 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;
   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;
@@ -56,32 +57,34 @@
 
 /* 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 {