allaw-ui 3.4.3 → 3.4.5

package/dist/components/atoms/selects/Select.js

@@ -0,0 +1,240 @@
+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 React, { useState, useEffect, useRef, useImperativeHandle, forwardRef, } from "react";
+import ReactDOM from "react-dom";
+import styles from "./Select.module.css";
+import "../../../styles/global.css";
+import TinyInfo from "../typography/TinyInfo";
+function Select(_a, ref) {
+    var _b;
+    var items = _a.items, selectedItem = _a.selectedItem, _c = _a.placeholder, placeholder = _c === void 0 ? "Choisir..." : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.showError, showError = _f === void 0 ? false : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, maxItems = _a.maxItems, onChange = _a.onChange, onError = _a.onError;
+    var _h = useState(false), isOpen = _h[0], setIsOpen = _h[1];
+    var _j = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _j[0], setSelected = _j[1];
+    var _k = useState(""), error = _k[0], setError = _k[1];
+    var selectRef = useRef(null);
+    var listRef = useRef(null);
+    var tagContainerRef = useRef(null);
+    var _l = useState([]), visibleTags = _l[0], setVisibleTags = _l[1];
+    var _m = useState(0), hiddenCount = _m[0], setHiddenCount = _m[1];
+    var _o = useState({
+        top: 0,
+        left: 0,
+        width: 0,
+    }), listPosition = _o[0], setListPosition = _o[1];
+    var _p = useState("bottom"), placement = _p[0], setPlacement = _p[1];
+    useEffect(function () {
+        setSelected((multiple ? selectedItem || [] : selectedItem || ""));
+    }, [selectedItem, multiple]);
+    useEffect(function () {
+        if (!multiple && selectedItem && isOpen && listRef.current) {
+            var selectedItemElement = listRef.current.querySelector(".".concat(styles.selectItem, "[data-value=\"").concat(selectedItem, "\"]"));
+            if (selectedItemElement instanceof HTMLElement) {
+                var listHeight = listRef.current.offsetHeight;
+                var itemHeight = selectedItemElement.offsetHeight;
+                var scrollTop = selectedItemElement.offsetTop - listHeight / 2 + itemHeight / 2;
+                listRef.current.scrollTop = scrollTop;
+            }
+        }
+    }, [isOpen, multiple, selectedItem]);
+    useEffect(function () {
+        if (tagContainerRef.current &&
+            Array.isArray(selected) &&
+            selected.length > 0) {
+            // Initialiser avec tous les tags visibles
+            setVisibleTags(selected);
+            setHiddenCount(0);
+            requestAnimationFrame(function () {
+                var container = tagContainerRef.current;
+                if (!container)
+                    return;
+                var containerWidth = container.offsetWidth - 40; // Espace pour l'icône et les marges
+                // Fonction pour calculer la largeur totale des tags
+                var calculateTagsWidth = function (tags) {
+                    return tags.reduce(function (total, tag) { return total + tag.offsetWidth + 6; }, 0); // 6px pour le gap
+                };
+                // Fonction pour créer et mesurer le compteur
+                var measureCounter = function (count) {
+                    var counter = document.createElement("span");
+                    counter.className = styles.hiddenTagCount;
+                    counter.textContent = "+ ".concat(count, " autre").concat(count > 1 ? "s" : "");
+                    container.appendChild(counter);
+                    var width = counter.offsetWidth;
+                    container.removeChild(counter);
+                    return width;
+                };
+                // Obtenir tous les tags (sans le compteur)
+                var allTags = Array.from(container.children).filter(function (child) { return !child.classList.contains("hiddenTagCount"); });
+                // Si tous les tags tiennent, on les affiche tous
+                var totalWidth = calculateTagsWidth(allTags);
+                if (totalWidth <= containerWidth) {
+                    setVisibleTags(selected);
+                    setHiddenCount(0);
+                    return;
+                }
+                // Sinon, on cherche le nombre optimal de tags à afficher
+                var bestVisibleCount = 0;
+                // On teste chaque combinaison possible
+                for (var i = 1; i <= allTags.length; i++) {
+                    var visibleTags_1 = allTags.slice(0, i);
+                    var hiddenCount_1 = selected.length - i;
+                    var counterWidth = hiddenCount_1 > 0 ? measureCounter(hiddenCount_1) + 6 : 0;
+                    var totalWidth_1 = calculateTagsWidth(visibleTags_1) + counterWidth;
+                    if (totalWidth_1 <= containerWidth) {
+                        bestVisibleCount = i;
+                    }
+                    else {
+                        break; // On sort dès qu'on dépasse la largeur disponible
+                    }
+                }
+                // Mettre à jour avec la meilleure combinaison trouvée
+                if (bestVisibleCount > 0) {
+                    setVisibleTags(selected.slice(0, bestVisibleCount));
+                    setHiddenCount(selected.length - bestVisibleCount);
+                }
+                else {
+                    // Fallback : afficher au moins un tag
+                    setVisibleTags(selected.slice(0, 1));
+                    setHiddenCount(selected.length - 1);
+                }
+            });
+        }
+        else {
+            setVisibleTags([]);
+            setHiddenCount(0);
+        }
+    }, [selected]);
+    var handleSelect = function (item) {
+        var newSelected;
+        if (multiple) {
+            var currentSelected = selected;
+            if (currentSelected.includes(item.value)) {
+                newSelected = currentSelected.filter(function (i) { return i !== item.value; });
+            }
+            else {
+                if (maxItems && currentSelected.length >= maxItems) {
+                    return;
+                }
+                newSelected = __spreadArray(__spreadArray([], currentSelected, true), [item.value], false);
+                if (maxItems && currentSelected.length + 1 >= maxItems) {
+                    setIsOpen(false);
+                }
+            }
+        }
+        else {
+            newSelected = item.value;
+            setIsOpen(false);
+        }
+        setSelected(newSelected);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newSelected);
+        validateSelect(newSelected);
+    };
+    var validateSelect = function (value) {
+        var isEmpty = value === "" || (Array.isArray(value) && value.length === 0);
+        var errorMessage = isRequired && isEmpty ? "Ce champ est requis" : "";
+        setError(errorMessage);
+        onError === null || onError === void 0 ? void 0 : onError(errorMessage);
+        return !errorMessage;
+    };
+    var updateListPosition = function () {
+        if (selectRef.current && listRef.current) {
+            var selectRect = selectRef.current.getBoundingClientRect();
+            var listHeight = listRef.current.getBoundingClientRect().height;
+            var windowHeight = window.innerHeight;
+            var spaceBelow = windowHeight - selectRect.bottom;
+            var shouldShowBelow = spaceBelow >= listHeight;
+            setPlacement(shouldShowBelow ? "bottom" : "top");
+            setListPosition({
+                top: shouldShowBelow
+                    ? selectRect.bottom
+                    : selectRect.top - listHeight - 5,
+                left: selectRect.left,
+                width: selectRect.width,
+            });
+        }
+    };
+    var toggleOpen = function () {
+        if (!isOpen) {
+            setIsOpen(true);
+            requestAnimationFrame(function () {
+                updateListPosition();
+            });
+        }
+        else {
+            setIsOpen(false);
+        }
+    };
+    var handleClickOutside = function (event) {
+        if (selectRef.current &&
+            !selectRef.current.contains(event.target) &&
+            listRef.current &&
+            !listRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+    useEffect(function () {
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        else {
+            document.removeEventListener("mousedown", handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    useEffect(function () {
+        if (isOpen) {
+            var handleScroll_1 = function () {
+                updateListPosition();
+            };
+            window.addEventListener("scroll", handleScroll_1, true);
+            return function () {
+                window.removeEventListener("scroll", handleScroll_1, true);
+            };
+        }
+        return function () { };
+    }, [isOpen]);
+    var renderList = function () { return (React.createElement("div", { ref: listRef, className: "".concat(styles.selectList, " ").concat(isOpen ? styles.visible : "", " ").concat(placement), style: {
+            position: "fixed",
+            top: "".concat(listPosition.top, "px"),
+            left: "".concat(listPosition.left, "px"),
+            width: "".concat(listPosition.width, "px"),
+            margin: placement === "bottom" ? "4px 0 0 0" : "0 0 4px 0",
+        } }, items.map(function (item) { return (React.createElement("div", { key: item.value, "data-value": item.value, className: "".concat(styles.selectItem, " ").concat(Array.isArray(selected) && selected.includes(item.value)
+            ? styles.selected
+            : "", " ").concat(!multiple && item.value === selectedItem ? styles.highlighted : "", " ").concat(!multiple ? styles.singleSelect : ""), onClick: function () { return handleSelect(item); } },
+        multiple && React.createElement("span", { className: styles.selectItemIcon }),
+        React.createElement("span", { className: styles.selectItemText }, item.label))); }))); };
+    var renderTags = function (selectedValues) {
+        if (!selectedValues.length)
+            return null;
+        return (React.createElement("div", { ref: tagContainerRef, className: styles.tagContainer },
+            visibleTags.map(function (val) {
+                var _a;
+                return (React.createElement("span", { key: val, className: styles.tag }, (_a = items.find(function (item) { return item.value === val; })) === null || _a === void 0 ? void 0 : _a.label));
+            }),
+            hiddenCount > 0 && (React.createElement("span", { className: "".concat(styles.hiddenTagCount, " hiddenTagCount") }, "+ ".concat(hiddenCount, " autre").concat(hiddenCount > 1 ? "s" : "")))));
+    };
+    useImperativeHandle(ref, function () { return ({
+        validate: function () { return validateSelect(selected); },
+    }); });
+    return (React.createElement("div", { ref: selectRef, className: "".concat(styles.selectContainer, " ").concat(isOpen ? styles.selectPressed : ""), style: { width: "".concat(width, "%") } },
+        React.createElement("button", { type: "button", className: "".concat(styles.select, " ").concat(isOpen ? styles.selectPressed : styles.selectDefault, " ").concat(multiple ? styles.selectMultiple : styles.selectSingle), onClick: toggleOpen, style: { width: "100%" } },
+            React.createElement("span", { className: styles.selectText }, Array.isArray(selected) && selected.length > 0
+                ? renderTags(selected)
+                : !Array.isArray(selected) && selected
+                    ? (_b = items.find(function (item) { return item.value === selected; })) === null || _b === void 0 ? void 0 : _b.label
+                    : placeholder),
+            React.createElement("span", { className: "".concat(styles.selectIcon, " ").concat(isOpen ? styles.allawIconChevronUp : styles.allawIconChevronDown) })),
+        isOpen && ReactDOM.createPortal(renderList(), document.body),
+        isRequired && showError && error && (React.createElement("div", { className: styles.errorMessage },
+            React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error })))));
+}
+export default forwardRef(Select);

package/dist/components/atoms/selects/Select.stories.d.ts

@@ -0,0 +1,95 @@
+export const ActionsData: {};
+declare namespace _default {
+    export let title: string;
+    export { Select as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export let args: {};
+    export namespace argTypes {
+        namespace items {
+            namespace control {
+                let type: string;
+            }
+        }
+        namespace placeholder {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        namespace multiple {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        namespace isRequired {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+        namespace selectedItem {
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+        }
+        namespace maxItems {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+                export let min: number;
+            }
+            export { control_5 as control };
+        }
+        namespace onChange {
+            namespace table {
+                let disable: boolean;
+            }
+        }
+        namespace width {
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+                let min_1: number;
+                export { min_1 as min };
+                export let max: number;
+            }
+            export { control_6 as control };
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+        let layout: string;
+        namespace viewport {
+            namespace viewports {
+                namespace responsive {
+                    let name: string;
+                    namespace styles {
+                        let height: string;
+                    }
+                }
+            }
+            let defaultViewport: string;
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const Pressed: any;
+export const Multiple: any;
+export const Required: any;
+export const CustomWidth: any;
+import Select from "./Select";

package/dist/components/atoms/selects/Select.stories.js

@@ -0,0 +1,161 @@
+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 Select from "./Select";
+import "../../../styles/global.css";
+export var ActionsData = {};
+export default {
+    title: "Components/Atoms/Selects/Select",
+    component: Select,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign({}, ActionsData),
+    argTypes: {
+        items: {
+            control: {
+                type: "array",
+            },
+        },
+        placeholder: {
+            control: {
+                type: "text",
+            },
+        },
+        multiple: {
+            control: {
+                type: "boolean",
+            },
+        },
+        isRequired: {
+            control: {
+                type: "boolean",
+            },
+        },
+        selectedItem: {
+            control: {
+                type: "text",
+            },
+        },
+        maxItems: {
+            control: {
+                type: "number",
+                min: 1,
+            },
+        },
+        onChange: {
+            table: {
+                disable: true,
+            },
+        },
+        width: {
+            control: {
+                type: "number",
+                min: 1,
+                max: 100,
+            },
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+        layout: "padded",
+        viewport: {
+            viewports: {
+                responsive: {
+                    name: "Responsive",
+                    styles: {
+                        height: "360px", // Définition de la hauteur du viewport
+                    },
+                },
+            },
+            defaultViewport: "responsive", // Définition du viewport par défaut
+        },
+    },
+};
+var Template = function (args) {
+    var _a = useState(args.selectedItem), selected = _a[0], setSelected = _a[1];
+    var handleChange = function (newSelected) {
+        setSelected(newSelected);
+    };
+    return React.createElement(Select, __assign({}, args, { selectedItem: selected, onChange: handleChange }));
+};
+export var Default = Template.bind({});
+Default.args = {
+    items: [
+        { label: "Lundi 12 août", value: "lundi-12-aout" },
+        { label: "Mardi 13 août", value: "mardi-13-aout" },
+        { label: "Mercredi 14 août", value: "mercredi-14-aout" },
+        { label: "Jeudi 15 août", value: "jeudi-15-aout" },
+        { label: "Vendredi 16 août", value: "vendredi-16-aout" },
+        { label: "Samedi 17 août", value: "samedi-17-aout" },
+    ],
+    selectedItem: "",
+    placeholder: "Select...",
+    multiple: false,
+    isRequired: false,
+    width: 100,
+};
+export var Pressed = Template.bind({});
+Pressed.args = {
+    items: [
+        { label: "Lundi 12 août", value: "lundi-12-aout" },
+        { label: "Mardi 13 août", value: "mardi-13-aout" },
+        { label: "Mercredi 14 août", value: "mercredi-14-aout" },
+        { label: "Jeudi 15 août", value: "jeudi-15-aout" },
+        { label: "Vendredi 16 août", value: "vendredi-16-aout" },
+        { label: "Samedi 17 août", value: "samedi-17-aout" },
+    ],
+    selectedItem: "lundi-12-aout",
+    placeholder: "Select...",
+    multiple: false,
+    isRequired: false,
+};
+export var Multiple = Template.bind({});
+Multiple.args = {
+    items: [
+        { label: "Lundi 12 août", value: "lundi-12-aout" },
+        { label: "Mardi 13 août", value: "mardi-13-aout" },
+        { label: "Mercredi 14 août", value: "mercredi-14-aout" },
+        { label: "Jeudi 15 août", value: "jeudi-15-aout" },
+        { label: "Vendredi 16 août", value: "vendredi-16-aout" },
+        { label: "Samedi 17 août", value: "samedi-17-aout" },
+    ],
+    selectedItem: [],
+    placeholder: "Select...",
+    multiple: true,
+    isRequired: false,
+    maxItems: 3,
+};
+export var Required = Template.bind({});
+Required.args = {
+    items: [
+        { label: "Lundi 12 août", value: "lundi-12-aout" },
+        { label: "Mardi 13 août", value: "mardi-13-aout" },
+        { label: "Mercredi 14 août", value: "mercredi-14-aout" },
+        { label: "Jeudi 15 août", value: "jeudi-15-aout" },
+        { label: "Vendredi 16 août", value: "vendredi-16-aout" },
+        { label: "Samedi 17 août", value: "samedi-17-aout" },
+    ],
+    selectedItem: "",
+    placeholder: "Select...",
+    multiple: false,
+    isRequired: true,
+};
+export var CustomWidth = Template.bind({});
+CustomWidth.args = __assign(__assign({}, Default.args), { width: 50 });

package/dist/components/atoms/selects/SelectableListItem.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+export interface SelectableListItemProps {
+    label: string;
+    duration?: string;
+    price?: string;
+    isActive: boolean;
+    onClick: () => void;
+    icon?: string;
+    testIdKey?: string | number;
+}
+declare const SelectableListItem: React.FC<SelectableListItemProps>;
+export default SelectableListItem;

package/dist/components/atoms/selects/SelectableListItem.js

@@ -0,0 +1,19 @@
+import React from "react";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+import { slugify } from "../../../utils/utils";
+import styles from "./SelectableListItem.module.css";
+var SelectableListItem = function (_a) {
+    var label = _a.label, duration = _a.duration, price = _a.price, isActive = _a.isActive, onClick = _a.onClick, icon = _a.icon, testIdKey = _a.testIdKey;
+    var hasIcon = icon && icon.length > 0;
+    return (React.createElement("button", { className: "".concat(styles.container, " ").concat(isActive ? styles.active : "", " ").concat(hasIcon ? styles.withIcon : ""), onClick: onClick, "data-testid": "item-".concat(testIdKey !== undefined ? testIdKey : slugify(label)) },
+        React.createElement("div", { className: styles.iconContainer }, isActive && React.createElement("span", { className: styles.activeIcon })),
+        hasIcon && (React.createElement("div", { className: styles.iconWrapper },
+            React.createElement("i", { className: "".concat(icon, " ").concat(styles.icon) }))),
+        React.createElement("div", { className: styles.content },
+            React.createElement("span", { className: styles.label }, label)),
+        React.createElement("div", { className: styles.columnsWrapper },
+            duration && React.createElement("span", { className: styles.duration }, duration),
+            price && React.createElement("span", { className: styles.price }, price))));
+};
+export default SelectableListItem;

package/dist/components/atoms/selects/SelectableListItem.stories.d.ts

@@ -0,0 +1,33 @@
+export namespace ActionsData {
+    namespace onClick {
+        let action: string;
+    }
+}
+declare namespace _default {
+    export let title: string;
+    export { SelectableListItem as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export namespace args {
+        let label: string;
+        let duration: string;
+        let price: string;
+        let isActive: boolean;
+        let icon: string;
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+        let layout: string;
+    }
+}
+export default _default;
+export const Default: any;
+export const Active: any;
+import SelectableListItem from "./SelectableListItem";

package/dist/components/atoms/selects/SelectableListItem.stories.js

@@ -0,0 +1,53 @@
+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 SelectableListItem from "./SelectableListItem";
+import "../../../styles/global.css";
+export var ActionsData = {
+    onClick: { action: "clicked" },
+};
+export default {
+    title: "Components/Atoms/selects/SelectableListItem",
+    component: SelectableListItem,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign(__assign({}, ActionsData), { label: "Consultation juridique personnalisée visant à analyser votre situation et à vous fournir des conseils adaptés à vos besoins. Cette prestation inclut l'étude des documents pertinents, une évaluation des solutions juridiques envisageables, et des recommandations pour défendre efficacement vos intérêts.", duration: "(35 min)", price: "100 €", isActive: false, icon: "allaw-icon-visio" }),
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+        layout: "padded",
+    },
+};
+var Template = function (args) {
+    var _a = useState(false), isActive = _a[0], setIsActive = _a[1];
+    var handleClick = function () {
+        setIsActive(!isActive);
+        args.onClick();
+    };
+    return (React.createElement(SelectableListItem, __assign({}, args, { isActive: isActive, onClick: handleClick })));
+};
+export var Default = Template.bind({});
+export var Active = Template.bind({});
+Active.args = {
+    label: "Adoption",
+    duration: "(35 min)",
+    price: "100 €",
+    isActive: true,
+    icon: "allaw-icon-visio",
+};

package/dist/components/atoms/selects/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Select } from "./Select";
+export type { SelectItem, SelectProps, SelectRef } from "./Select";
+export { default as ComboBox } from "./ComboBox";
+export type { ComboBoxProps, ComboBoxRef } from "./ComboBox";
+export { default as SelectableListItem } from "./SelectableListItem";
+export type { SelectableListItemProps } from "./SelectableListItem";

package/dist/components/atoms/selects/index.js

@@ -0,0 +1,3 @@
+export { default as Select } from "./Select";
+export { default as ComboBox } from "./ComboBox";
+export { default as SelectableListItem } from "./SelectableListItem";

package/dist/components/atoms/tags/AppointementStatusTag.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "./AppointementStatusTag.css";
+export interface AppointementStatusTagProps {
+    status: "confirmed" | "pending" | "available" | "unavailable" | "cancelled" | "passed" | "refused";
+    variant?: "default" | "big" | "small";
+}
+declare const AppointementStatusTag: ({ status, variant, }: AppointementStatusTagProps) => React.JSX.Element;
+export default AppointementStatusTag;