allaw-ui 5.4.1 → 5.4.3

package/dist/components/molecules/loadingBox/LoadingBox.stories.js

@@ -1,128 +0,0 @@
-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 React from "react";
-import LoadingBox from "./LoadingBox";
-import "../../../styles/global.css";
-export default {
-    title: "Components/Molecules/LoadingBox",
-    component: LoadingBox,
-    tags: ["autodocs"],
-    argTypes: {
-        boxHeight: {
-            control: {
-                type: "text",
-            },
-            description: "Hauteur de la boîte de chargement",
-        },
-        boxWidth: {
-            control: {
-                type: "text",
-            },
-            description: "Largeur de la boîte de chargement",
-        },
-        boxRadius: {
-            control: {
-                type: "text",
-            },
-            description: "Rayon de bordure de la boîte de chargement",
-        },
-    },
-    parameters: {
-        backgrounds: {
-            default: "light",
-            values: [
-                { name: "light", value: "#ffffff" },
-                { name: "grey", value: "#728ea7" },
-                { name: "figma", value: "#404040" },
-                { name: "dark", value: "#171e25" },
-            ],
-        },
-        docs: {
-            description: {
-                component: "Composant d'animation de chargement sous forme de boîte avec un effet de pulsation.",
-            },
-        },
-    },
-};
-var Template = function (args) { return (React.createElement("div", { style: { padding: "20px", display: "flex", gap: "20px", flexWrap: "wrap" } },
-    React.createElement(LoadingBox, __assign({}, args)))); };
-export var Default = Template.bind({});
-Default.args = {
-    boxHeight: "100px",
-    boxWidth: "100px",
-    boxRadius: "8px",
-};
-Default.parameters = {
-    docs: {
-        description: {
-            story: "Version par défaut de la boîte de chargement avec des dimensions moyennes.",
-        },
-    },
-};
-export var Large = Template.bind({});
-Large.args = {
-    boxHeight: "200px",
-    boxWidth: "200px",
-    boxRadius: "8px",
-};
-Large.parameters = {
-    docs: {
-        description: {
-            story: "Version large de la boîte de chargement, utile pour les conteneurs plus importants.",
-        },
-    },
-};
-export var Small = Template.bind({});
-Small.args = {
-    boxHeight: "50px",
-    boxWidth: "50px",
-    boxRadius: "8px",
-};
-Small.parameters = {
-    docs: {
-        description: {
-            story: "Version compacte de la boîte de chargement, idéale pour les petits espaces.",
-        },
-    },
-};
-export var MultipleBoxes = Template.bind({});
-MultipleBoxes.args = {
-    boxHeight: "100px",
-    boxWidth: "100px",
-    boxRadius: "8px",
-};
-MultipleBoxes.decorators = [
-    function (Story) { return (React.createElement("div", { style: { display: "flex", gap: "20px" } },
-        React.createElement(Story, null),
-        React.createElement(Story, null),
-        React.createElement(Story, null))); },
-];
-MultipleBoxes.parameters = {
-    docs: {
-        description: {
-            story: "Exemple d'utilisation de plusieurs boîtes de chargement côte à côte.",
-        },
-    },
-};
-export var CardSkeleton = Template.bind({});
-CardSkeleton.args = {
-    boxHeight: "150px",
-    boxWidth: "450px",
-    boxRadius: "8px",
-};
-CardSkeleton.parameters = {
-    docs: {
-        description: {
-            story: "Exemple d'utilisation comme squelette de carte.",
-        },
-    },
-};

package/dist/components/molecules/modal/Modal.stories.d.ts

@@ -1,128 +0,0 @@
-declare namespace _default {
-    export let title: string;
-    export { Modal as component };
-    export let tags: string[];
-    export namespace argTypes {
-        export namespace children {
-            let control: boolean;
-            let description: string;
-        }
-        export namespace customContent {
-            export namespace control_1 {
-                let type: string;
-            }
-            export { control_1 as control };
-            let description_1: string;
-            export { description_1 as description };
-        }
-        export namespace renderContent {
-            let control_2: boolean;
-            export { control_2 as control };
-            let description_2: string;
-            export { description_2 as description };
-        }
-        export namespace maxWidthConfig {
-            export namespace control_3 {
-                let type_1: string;
-                export { type_1 as type };
-            }
-            export { control_3 as control };
-            let description_3: string;
-            export { description_3 as description };
-        }
-        export namespace verticalOffset {
-            export namespace control_4 {
-                let type_2: string;
-                export { type_2 as type };
-            }
-            export { control_4 as control };
-            let description_4: string;
-            export { description_4 as description };
-        }
-        export namespace horizontalOffset {
-            export namespace control_5 {
-                let type_3: string;
-                export { type_3 as type };
-            }
-            export { control_5 as control };
-            let description_5: string;
-            export { description_5 as description };
-        }
-        export namespace show {
-            let control_6: string;
-            export { control_6 as control };
-            let description_6: string;
-            export { description_6 as description };
-        }
-        export namespace title_1 {
-            let control_7: string;
-            export { control_7 as control };
-            let description_7: string;
-            export { description_7 as description };
-        }
-        export { title_1 as title };
-        export namespace description_8 {
-            let control_8: string;
-            export { control_8 as control };
-            let description_9: string;
-            export { description_9 as description };
-        }
-        export { description_8 as description };
-        export namespace confirmLabel {
-            let control_9: string;
-            export { control_9 as control };
-            let description_10: string;
-            export { description_10 as description };
-        }
-        export namespace cancelLabel {
-            let control_10: string;
-            export { control_10 as control };
-            let description_11: string;
-            export { description_11 as description };
-        }
-        export namespace imageConfig {
-            export namespace control_11 {
-                let type_4: string;
-                export { type_4 as type };
-            }
-            export { control_11 as control };
-            let description_12: string;
-            export { description_12 as description };
-        }
-        export namespace isDanger {
-            let control_12: string;
-            export { control_12 as control };
-            let description_13: string;
-            export { description_13 as description };
-        }
-    }
-    export namespace parameters {
-        namespace backgrounds {
-            let _default: string;
-            export { _default as default };
-            export let values: {
-                name: string;
-                value: string;
-            }[];
-        }
-    }
-}
-export default _default;
-export const Default: any;
-export const WithChildren: any;
-export const WithCustomContent: any;
-export const WithRenderContent: any;
-export const DangerModal: any;
-export const WithLargeOffset: any;
-export const WithImageConfig: any;
-export const WithoutCancel: any;
-export const OffsetBothWays: any;
-export const WithCustomMaxWidth: any;
-export const WithResponsiveMaxWidth: any;
-export const WithLargeContentAndMaxWidth: any;
-export const WithCustomBreakpoints: any;
-export const WithManyBreakpoints: any;
-export const WithMixedUnitsBreakpoints: any;
-export const WithScrollableContent: any;
-export const WithScrollableContentMobile: any;
-import Modal from "./Modal";

package/dist/components/molecules/modal/Modal.stories.js

@@ -1,373 +0,0 @@
-// src/components/molecules/modal/Modal.stories.jsx
-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 React, { useState } from "react";
-import { action } from "@storybook/addon-actions";
-import Modal from "./Modal";
-import "../../../styles/global.css";
-// Composant d'exemple pour démontrer les nouvelles fonctionnalités
-var CustomFormComponent = function (_a) {
-    var title = _a.title, onSubmit = _a.onSubmit, _b = _a.initialValue, initialValue = _b === void 0 ? "" : _b;
-    var _c = useState(initialValue), value = _c[0], setValue = _c[1];
-    return (React.createElement("div", { style: { textAlign: "center" } },
-        React.createElement("h3", { style: { marginBottom: "1rem", color: "#1f2937" } }, title),
-        React.createElement("div", { style: { marginBottom: "1rem" } },
-            React.createElement("input", { type: "text", value: value, onChange: function (e) { return setValue(e.target.value); }, placeholder: "Saisissez votre texte...", style: {
-                    width: "100%",
-                    padding: "0.75rem",
-                    border: "1px solid #d1d5db",
-                    borderRadius: "0.375rem",
-                    fontSize: "1rem",
-                } })),
-        React.createElement("button", { onClick: function () { return onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(value); }, disabled: !value.trim(), style: {
-                padding: "0.5rem 1rem",
-                backgroundColor: value.trim() ? "#3b82f6" : "#9ca3af",
-                color: "white",
-                border: "none",
-                borderRadius: "0.375rem",
-                cursor: value.trim() ? "pointer" : "not-allowed",
-            } }, "Valider la saisie")));
-};
-export default {
-    title: "Components/Molecules/Modal",
-    component: Modal,
-    tags: ["autodocs"],
-    argTypes: {
-        children: {
-            control: false,
-            description: "Contenu React à afficher dans la modal (ReactNode)",
-        },
-        customContent: {
-            control: { type: "object" },
-            description: "Composant personnalisé avec ses props { component, props }",
-        },
-        renderContent: {
-            control: false,
-            description: "Fonction de rendu (modalProps) => ReactNode",
-        },
-        maxWidthConfig: {
-            control: { type: "object" },
-            description: "Configuration responsive pour la largeur maximale. Deux approches disponibles :\n\n**Approche classique (breakpoints pr\u00E9d\u00E9finis) :**\n{ default: 800, mobile: 350, tablet: 600, desktop: 900 }\n- mobile: \u2264 767px\n- tablet: 768px - 1023px  \n- desktop: \u2265 1024px\n\n**Approche personnalis\u00E9e (breakpoints custom) :**\n{ breakpoints: [{ breakpoint: 480, maxWidth: 320 }, { breakpoint: 1200, maxWidth: 900 }] }\n- D\u00E9finissez vos propres seuils de largeur d'\u00E9cran\n- Supporte les unit\u00E9s mixtes (px, vw, rem, etc.)",
-        },
-        verticalOffset: {
-            control: { type: "object" },
-            description: "Décalage vertical du modal (en px) pour éviter les barres de navigation",
-        },
-        horizontalOffset: {
-            control: { type: "object" },
-            description: "Décalage horizontal du modal (en px) pour éviter les éléments latéraux",
-        },
-        show: {
-            control: "boolean",
-            description: "Affiche ou masque la modal",
-        },
-        title: {
-            control: "text",
-            description: "Titre de la modal",
-        },
-        description: {
-            control: "text",
-            description: "Description de la modal",
-        },
-        confirmLabel: {
-            control: "text",
-            description: "Texte du bouton principal",
-        },
-        cancelLabel: {
-            control: "text",
-            description: "Texte du bouton secondaire (optionnel)",
-        },
-        imageConfig: {
-            control: { type: "object" },
-            description: "Configuration de l'image à afficher (url, alt, dimensions, styles, padding, className)",
-        },
-        isDanger: {
-            control: "boolean",
-            description: "Applique le style d'alerte au bouton principal",
-        },
-    },
-    parameters: {
-        backgrounds: {
-            default: "light",
-            values: [
-                { name: "light", value: "#ffffff" },
-                { name: "grey", value: "#728ea7" },
-                { name: "figma", value: "#404040" },
-                { name: "dark", value: "#171e25" },
-            ],
-        },
-    },
-};
-var Template = function (args) {
-    var _a = useState(args.show), isVisible = _a[0], setIsVisible = _a[1];
-    return (React.createElement("div", null,
-        React.createElement("button", { onClick: function () { return setIsVisible(true); } }, "Ouvrir la modal"),
-        React.createElement(Modal, __assign({}, args, { show: isVisible, onConfirm: function () {
-                action("Confirm clicked")();
-                setIsVisible(false);
-            }, onCancel: function () {
-                action("Cancel clicked")();
-                setIsVisible(false);
-            } }))));
-};
-export var Default = Template.bind({});
-Default.args = {
-    show: false,
-    title: "Confirmation",
-    description: "Êtes-vous sûr de vouloir effectuer cette action ?",
-    confirmLabel: "Confirmer",
-    cancelLabel: "Annuler",
-    isDanger: false,
-    verticalOffset: { top: 64, bottom: 0 },
-    horizontalOffset: { left: 0, right: 0 },
-    imageConfig: {
-        url: "https://cdn.iconscout.com/icon/free/png-512/free-checkmark-icon-download-in-svg-png-gif-file-formats--done-approved-check-tick-user-interface-pack-icons-1502470.png?f=webp&w=512",
-        alt: "Checkmark",
-        width: 64,
-        height: 64,
-        padding: "0px, 0px, 250px, 300px",
-        className: "",
-        style: {
-            backgroundColor: "#ffffff",
-        },
-    },
-};
-// Nouvelle story : Modal avec children
-export var WithChildren = Template.bind({});
-WithChildren.args = {
-    show: false,
-    confirmLabel: "Valider",
-    cancelLabel: "Annuler",
-    children: (React.createElement("div", { style: { textAlign: "center", padding: "2rem" } },
-        React.createElement("h2", { style: { color: "#1f2937", marginBottom: "1rem" } }, "Contenu personnalis\u00E9"),
-        React.createElement("p", { style: { color: "#6b7280", marginBottom: "1.5rem" } },
-            "Ce contenu est pass\u00E9 via la prop ",
-            React.createElement("code", null, "children")),
-        React.createElement("div", { style: {
-                padding: "1rem",
-                backgroundColor: "#f3f4f6",
-                borderRadius: "0.5rem",
-                border: "2px dashed #9ca3af",
-            } },
-            React.createElement("span", { style: { fontSize: "2rem" } }, "\uD83C\uDF89"),
-            React.createElement("p", { style: { margin: "0.5rem 0 0 0", fontWeight: "bold" } }, "Succ\u00E8s !")))),
-};
-// Nouvelle story : Modal avec customContent
-export var WithCustomContent = Template.bind({});
-WithCustomContent.args = {
-    show: false,
-    confirmLabel: "Valider",
-    cancelLabel: "Annuler",
-    customContent: {
-        component: CustomFormComponent,
-        props: {
-            title: "Formulaire personnalisé",
-            initialValue: "Valeur initiale",
-            onSubmit: function (value) { return action("Form submitted")(value); },
-        },
-    },
-};
-// Nouvelle story : Modal avec renderContent
-export var WithRenderContent = Template.bind({});
-WithRenderContent.args = {
-    show: false,
-    confirmLabel: "Fermer",
-    cancelLabel: undefined,
-    renderContent: function (_a) {
-        var isOpen = _a.isOpen, onClose = _a.onClose;
-        return (React.createElement("div", { style: { textAlign: "center" } },
-            React.createElement("h2", { style: { color: "#dc2626", marginBottom: "1rem" } }, "\u26A0\uFE0F Attention"),
-            React.createElement("p", { style: { marginBottom: "1rem" } },
-                "Modal \u00E9tat : ",
-                isOpen ? "Ouverte" : "Fermée"),
-            React.createElement("div", { style: {
-                    padding: "1rem",
-                    backgroundColor: "#fef2f2",
-                    border: "1px solid #fecaca",
-                    borderRadius: "0.5rem",
-                    marginBottom: "1rem",
-                } },
-                React.createElement("p", { style: { margin: 0, fontSize: "0.875rem", color: "#991b1b" } }, "Cette action est irr\u00E9versible et supprimera d\u00E9finitivement vos donn\u00E9es.")),
-            React.createElement("button", { onClick: function () {
-                    action("Internal action")();
-                    onClose();
-                }, style: {
-                    padding: "0.5rem 1rem",
-                    backgroundColor: "#dc2626",
-                    color: "white",
-                    border: "none",
-                    borderRadius: "0.375rem",
-                    cursor: "pointer",
-                } }, "Action dangereuse")));
-    },
-};
-export var DangerModal = Template.bind({});
-DangerModal.args = __assign(__assign({}, Default.args), { title: "Attention", description: "Cette action est irréversible. Voulez-vous continuer ?", confirmLabel: "Supprimer", isDanger: true });
-export var WithLargeOffset = Template.bind({});
-WithLargeOffset.args = __assign(__assign({}, Default.args), { verticalOffset: { top: 120, bottom: 80 } });
-export var WithImageConfig = Template.bind({});
-WithImageConfig.args = __assign(__assign({}, Default.args), { title: "Image personnalisée", description: "Cette modal affiche une image avec dimensions et styles personnalisés.", imageConfig: {
-        url: Default.args.imageConfig.url,
-        alt: "Custom checkmark",
-        width: 200,
-        height: 200,
-        padding: "24px",
-        className: "border-circle",
-        style: {
-            border: "4px dashed #007bff",
-            borderRadius: "50%",
-            backgroundColor: "#e9f5ff",
-        },
-    }, confirmLabel: "Valider", cancelLabel: "Annuler" });
-export var WithoutCancel = Template.bind({});
-WithoutCancel.args = __assign(__assign({}, Default.args), { title: "Information", description: "Cette action a été effectuée avec succès.", confirmLabel: "OK", cancelLabel: undefined });
-export var OffsetBothWays = Template.bind({});
-OffsetBothWays.args = __assign(__assign({}, Default.args), { title: "Modal avec décalages", description: "Décalages verticaux et horizontaux appliqués.", verticalOffset: { top: 100, bottom: 50 }, horizontalOffset: { left: 80, right: 80 } });
-// Nouvelles stories pour maxWidthConfig
-export var WithCustomMaxWidth = Template.bind({});
-WithCustomMaxWidth.args = __assign(__assign({}, Default.args), { title: "Modal avec largeur personnalisée", description: "Cette modal a une largeur maximale de 800px sur tous les écrans.", maxWidthConfig: {
-        default: 800,
-    } });
-export var WithResponsiveMaxWidth = Template.bind({});
-WithResponsiveMaxWidth.args = __assign(__assign({}, Default.args), { title: "Modal responsive", description: "Cette modal adapte sa largeur selon la taille d&apos;écran : 350px sur mobile, 600px sur tablette, 900px sur desktop.", maxWidthConfig: {
-        mobile: 350,
-        tablet: 600,
-        desktop: 900,
-    } });
-export var WithLargeContentAndMaxWidth = Template.bind({});
-WithLargeContentAndMaxWidth.args = {
-    show: false,
-    title: "Modal large avec contenu personnalisé",
-    description: "Cette modal utilise une largeur plus grande pour accommoder plus de contenu.",
-    confirmLabel: "Valider",
-    cancelLabel: "Annuler",
-    maxWidthConfig: {
-        default: 700,
-        mobile: 350,
-        tablet: 650,
-        desktop: 800,
-    },
-    children: (React.createElement("div", { style: { textAlign: "center", padding: "2rem" } },
-        React.createElement("h2", { style: { color: "#1f2937", marginBottom: "1rem" } }, "Contenu \u00E9tendu n\u00E9cessitant plus d'espace"),
-        React.createElement("div", { style: {
-                display: "grid",
-                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
-                gap: "1rem",
-                marginBottom: "1.5rem",
-            } },
-            React.createElement("div", { style: {
-                    padding: "1rem",
-                    backgroundColor: "#f3f4f6",
-                    borderRadius: "0.5rem",
-                } },
-                React.createElement("h4", null, "Section 1"),
-                React.createElement("p", null, "Contenu de la premi\u00E8re section avec plus de texte pour tester l'espace disponible.")),
-            React.createElement("div", { style: {
-                    padding: "1rem",
-                    backgroundColor: "#f3f4f6",
-                    borderRadius: "0.5rem",
-                } },
-                React.createElement("h4", null, "Section 2"),
-                React.createElement("p", null, "Contenu de la deuxi\u00E8me section avec \u00E9galement plus de texte."))),
-        React.createElement("p", { style: { color: "#6b7280" } }, "Cette modal d\u00E9montre l'utilisation de largeurs personnalis\u00E9es pour accommoder du contenu plus large."))),
-};
-// Nouvelles stories pour breakpoints personnalisés
-export var WithCustomBreakpoints = Template.bind({});
-WithCustomBreakpoints.args = __assign(__assign({}, Default.args), { title: "Modal avec breakpoints personnalisés", description: "Cette modal utilise des breakpoints sur mesure : 480px, 900px, et 1400px.", maxWidthConfig: {
-        breakpoints: [
-            { breakpoint: 480, maxWidth: 320 },
-            { breakpoint: 900, maxWidth: 700 },
-            { breakpoint: 1400, maxWidth: 1000 },
-        ],
-    } });
-export var WithManyBreakpoints = Template.bind({});
-WithManyBreakpoints.args = __assign(__assign({}, Default.args), { title: "Modal avec multiples breakpoints", description: "Exemple avec 5 breakpoints personnalisés pour un contrôle précis.", maxWidthConfig: {
-        breakpoints: [
-            { breakpoint: 360, maxWidth: 300 },
-            { breakpoint: 640, maxWidth: 500 },
-            { breakpoint: 768, maxWidth: 600 },
-            { breakpoint: 1024, maxWidth: 800 },
-            { breakpoint: 1440, maxWidth: 1200 },
-        ],
-    } });
-export var WithMixedUnitsBreakpoints = Template.bind({});
-WithMixedUnitsBreakpoints.args = __assign(__assign({}, Default.args), { title: "Modal avec unités mixtes", description: "Démonstration avec différentes unités : px, vw, rem.", maxWidthConfig: {
-        breakpoints: [
-            { breakpoint: 480, maxWidth: "90vw" },
-            { breakpoint: 768, maxWidth: "40rem" },
-            { breakpoint: 1200, maxWidth: 900 },
-        ],
-    } });
-// Nouvelle story pour tester le scroll avec header/footer fixes
-export var WithScrollableContent = Template.bind({});
-WithScrollableContent.args = {
-    show: false,
-    title: "Modal avec contenu scrollable",
-    description: "Cette modal contient beaucoup de contenu pour tester le comportement de scroll. Le header (titre + bouton fermer) et le footer (boutons) doivent rester fixes pendant que seul le corps de la modal défile.",
-    confirmLabel: "Valider",
-    cancelLabel: "Annuler",
-    children: (React.createElement("div", { style: { textAlign: "left" } },
-        React.createElement("h3", { style: { marginBottom: "1rem", color: "#1f2937" } }, "Contenu tr\u00E8s long pour tester le scroll"),
-        Array.from({ length: 20 }, function (_, i) { return (React.createElement("div", { key: i, style: {
-                marginBottom: "1.5rem",
-                padding: "1rem",
-                backgroundColor: i % 2 === 0 ? "#f9fafb" : "#f3f4f6",
-                borderRadius: "0.5rem",
-                border: "1px solid #e5e7eb",
-            } },
-            React.createElement("h4", { style: { margin: "0 0 0.5rem 0", color: "#374151" } },
-                "Section ",
-                i + 1),
-            React.createElement("p", { style: { margin: 0, color: "#6b7280", lineHeight: "1.6" } }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."),
-            i === 5 && (React.createElement("div", { style: {
-                    marginTop: "1rem",
-                    padding: "1rem",
-                    backgroundColor: "#dbeafe",
-                    borderRadius: "0.375rem",
-                    border: "1px solid #93c5fd",
-                } },
-                React.createElement("p", { style: { margin: 0, fontSize: "0.875rem", color: "#1e40af" } },
-                    "\uD83D\uDCA1 ",
-                    React.createElement("strong", null, "Note importante :"),
-                    " Pendant que vous scrollez ce contenu, v\u00E9rifiez que le titre en haut et les boutons en bas restent toujours visibles et fixes."))),
-            i === 10 && (React.createElement("div", { style: {
-                    marginTop: "1rem",
-                    padding: "1rem",
-                    backgroundColor: "#ecfdf5",
-                    borderRadius: "0.375rem",
-                    border: "1px solid #86efac",
-                } },
-                React.createElement("p", { style: { margin: 0, fontSize: "0.875rem", color: "#047857" } },
-                    "\u2705 ",
-                    React.createElement("strong", null, "Test r\u00E9ussi :"),
-                    " Si vous voyez ce message au milieu du scroll, l'architecture header/body/footer fonctionne correctement !"))))); }),
-        React.createElement("div", { style: {
-                padding: "1.5rem",
-                backgroundColor: "#fef2f2",
-                borderRadius: "0.5rem",
-                border: "2px solid #fecaca",
-                textAlign: "center",
-            } },
-            React.createElement("h4", { style: { margin: "0 0 1rem 0", color: "#dc2626" } }, "\uD83C\uDFAF Fin du contenu scrollable"),
-            React.createElement("p", { style: { margin: 0, color: "#991b1b", fontSize: "0.875rem" } }, "Vous avez atteint la fin du contenu. Les boutons Annuler/Valider doivent toujours \u00EAtre visibles en bas de la modal.")))),
-};
-// Story pour tester sur viewport mobile restreint
-export var WithScrollableContentMobile = Template.bind({});
-WithScrollableContentMobile.args = __assign(__assign({}, WithScrollableContent.args), { title: "Test mobile - Scroll fixe", description: "Version optimisée pour tester le comportement sur écrans mobiles avec hauteur réduite." });
-WithScrollableContentMobile.parameters = {
-    viewport: {
-        defaultViewport: "mobile1",
-    },
-    backgrounds: {
-        default: "light",
-    },
-};