@festo-ui/react 9.0.0-dev.725 → 9.0.0-dev.727

package/dist/components/modals/image-gallery/ImageGallery.d.ts

@@ -0,0 +1,21 @@
+import './ImageGallery.scss';
+import { type ComponentPropsWithoutRef } from 'react';
+import { type ModalBaseProps } from '../ModalBase';
+import { type ImageDescriptiveContent } from './ImageGalleryContent';
+export type ImageGalleryItemData = {
+    imageContent?: ImageDescriptiveContent;
+    containMode?: boolean;
+} & ComponentPropsWithoutRef<'img'> & Record<string, unknown>;
+export interface ImageGalleryProps extends ComponentPropsWithoutRef<'div'>, ModalBaseProps {
+    /** Index number of initial slide. */
+    startIndex: number;
+    images?: ImageGalleryItemData[];
+    thumbnailImages?: ImageGalleryItemData[];
+    /** Whether to show pagination controls. Can also accept a number in case images are passed as children */
+    pagination?: boolean | number;
+    showScaleButton?: boolean;
+    /** Whether to show descriptive content). Can also be used as a render prop called with the index of the current image */
+    descriptiveContent?: boolean | ((index: number) => React.ReactNode);
+    onSlideChanged?: (index: number) => void;
+}
+export declare const ImageGallery: (props: ImageGalleryProps & import("react").RefAttributes<HTMLImageElement>) => React.ReactElement | null;

package/dist/components/modals/image-gallery/ImageGallery.helper.d.ts

@@ -0,0 +1,2 @@
+import { type Argument } from 'classnames';
+export declare const getClasses: (thumbnailImages: Argument, descriptiveContent: Argument, className: Argument) => string;

package/dist/components/modals/image-gallery/ImageGallery.helper.js

@@ -0,0 +1,13 @@
+import classnames from "classnames";
+const getClasses = (thumbnailImages, descriptiveContent, className)=>{
+    const base = 'fwe-modal-image-gallery';
+    const thumbnail = `${base}--with-thumbnails`;
+    const container = `${base}--with-container`;
+    return classnames(base, {
+        [thumbnail]: [
+            thumbnailImages
+        ],
+        [container]: descriptiveContent
+    }, className);
+};
+export { getClasses };

package/dist/components/modals/image-gallery/ImageGallery.js

@@ -0,0 +1,103 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./ImageGallery.css";
+import { forwardRef, useState } from "react";
+import { ModalBase } from "../ModalBase.js";
+import { getClasses } from "./ImageGallery.helper.js";
+import { ImageGalleryContent } from "./ImageGalleryContent.js";
+import { ImageGalleryScale } from "./ImageGalleryScale.js";
+import { ImageGallerySwiper } from "./ImageGallerySwiper.js";
+import { ImageGalleryThumbsSwiper } from "./ImageGalleryThumbsSwiper.js";
+import { CloseButton } from "./internal/CloseButton.js";
+import { ImageGalleryContainer } from "./internal/ImageGalleryContainer.js";
+import { ImageGalleryPagination } from "./internal/ImageGalleryPagination.js";
+function getLength(pagination, images) {
+    let length = 0;
+    if ('number' == typeof pagination) length = pagination;
+    else if (true === pagination && images?.length) length = images.length;
+    return length;
+}
+const ImageGallery = /*#__PURE__*/ forwardRef(({ isOpen, startIndex, images, thumbnailImages, descriptiveContent, children, className, pagination, showScaleButton, onClose, onSlideChanged, ...props }, ref)=>{
+    const [currentIndex, setCurrentIndex] = useState(startIndex + 1);
+    const [thumbsSwiper, setThumbsSwiper] = useState(null);
+    const [scaleMode, setScaleMode] = useState(false);
+    function handleChange(index) {
+        setCurrentIndex(index + 1);
+        onSlideChanged?.(index);
+    }
+    function handleClose() {
+        if (scaleMode) return void setScaleMode(false);
+        setCurrentIndex(startIndex + 1);
+        setThumbsSwiper(null);
+        onClose?.();
+    }
+    function handleScale() {
+        setScaleMode(!scaleMode);
+    }
+    const hasDescriptiveContent = Boolean(descriptiveContent);
+    const classes = getClasses(thumbnailImages, hasDescriptiveContent, className);
+    const length = getLength(pagination, images);
+    return /*#__PURE__*/ jsxs(ModalBase, {
+        onClose: handleClose,
+        className: classes,
+        ...props,
+        isOpen: isOpen,
+        ref: ref,
+        children: [
+            isOpen && scaleMode && images && /*#__PURE__*/ jsx(ImageGalleryScale, {
+                images: images,
+                currentIndex: currentIndex,
+                onClose: handleScale
+            }),
+            isOpen && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "fwe-image-gallery-header",
+                        children: [
+                            /*#__PURE__*/ jsx(ImageGalleryPagination, {
+                                currentIndex: currentIndex,
+                                length: length
+                            }),
+                            showScaleButton ? /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                "aria-label": "scale up",
+                                className: "fwe-image-gallery-scale-btn fwe-ml-auto",
+                                onClick: handleScale
+                            }) : null,
+                            /*#__PURE__*/ jsx(CloseButton, {
+                                showScaleButton: showScaleButton,
+                                onClose: handleClose
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(ImageGalleryContainer, {
+                        descriptiveContent: hasDescriptiveContent,
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: "fwe-image-gallery-wrapper",
+                                children: children || /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(ImageGallerySwiper, {
+                                            images: images,
+                                            onSlideChanged: handleChange,
+                                            thumbsSwiper: thumbsSwiper,
+                                            startIndex: startIndex
+                                        }),
+                                        thumbnailImages && /*#__PURE__*/ jsx(ImageGalleryThumbsSwiper, {
+                                            images: thumbnailImages,
+                                            setThumbsSwiper: setThumbsSwiper
+                                        })
+                                    ]
+                                })
+                            }),
+                            images && hasDescriptiveContent && /*#__PURE__*/ jsx(ImageGalleryContent, {
+                                imageContent: images?.[currentIndex - 1]?.imageContent
+                            }),
+                            'function' == typeof descriptiveContent ? descriptiveContent?.(currentIndex - 1) : null
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+});
+export { ImageGallery };

package/dist/components/modals/image-gallery/ImageGallery.stories.helper.js

@@ -0,0 +1,112 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import gallery_01 from "../../../../../web-essentials/stories/assets/gallery-01.webp";
+import gallery_02 from "../../../../../web-essentials/stories/assets/gallery-02.webp";
+import gallery_03 from "../../../../../web-essentials/stories/assets/gallery-03.webp";
+import gallery_04 from "../../../../../web-essentials/stories/assets/gallery-04.webp";
+import gallery_05 from "../../../../../web-essentials/stories/assets/gallery-05.webp";
+import gallery_06 from "../../../../../web-essentials/stories/assets/gallery-06.webp";
+import gallery_07 from "../../../../../web-essentials/stories/assets/gallery-07.webp";
+import gallery_08 from "../../../../../web-essentials/stories/assets/gallery-08.webp";
+import gallery_09 from "../../../../../web-essentials/stories/assets/gallery-09.webp";
+import gallery_10 from "../../../../../web-essentials/stories/assets/gallery-10.webp";
+const ImageGallery_stories_helper_images = [
+    {
+        src: gallery_01,
+        alt: 'Asset1',
+        imageContent: {
+            title: 'Asset 1',
+            body: "Asset 1 description"
+        }
+    },
+    {
+        src: gallery_02,
+        alt: 'Asset2',
+        containMode: true,
+        imageContent: {
+            title: 'Asset 2',
+            body: /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("p", {
+                        children: "Asset 2 description with some html inside."
+                    }),
+                    /*#__PURE__*/ jsxs("ul", {
+                        children: [
+                            /*#__PURE__*/ jsx("li", {
+                                children: "bullet point 1"
+                            }),
+                            /*#__PURE__*/ jsx("li", {
+                                children: "bullet point 2"
+                            })
+                        ]
+                    })
+                ]
+            })
+        }
+    },
+    {
+        src: gallery_03,
+        alt: 'Asset3',
+        containMode: true,
+        imageContent: {
+            title: 'Asset 3',
+            body: "Asset 3 description"
+        }
+    },
+    {
+        src: gallery_04,
+        alt: 'Asset4',
+        imageContent: {
+            title: 'Asset 4',
+            body: "Asset 4 description"
+        }
+    },
+    {
+        src: gallery_05,
+        alt: 'Asset5',
+        imageContent: {
+            title: 'Asset 5',
+            body: "Asset 5 description"
+        }
+    },
+    {
+        src: gallery_06,
+        alt: 'Asset6',
+        imageContent: {
+            title: 'Asset 6',
+            body: "Asset 6 description"
+        }
+    },
+    {
+        src: gallery_07,
+        alt: 'Asset7',
+        imageContent: {
+            title: 'Asset 7',
+            body: "Asset 7 description"
+        }
+    },
+    {
+        src: gallery_08,
+        alt: 'Asset8',
+        imageContent: {
+            title: 'Asset 8',
+            body: "Asset 8 description"
+        }
+    },
+    {
+        src: gallery_09,
+        alt: 'Asset9',
+        imageContent: {
+            title: 'Asset 9',
+            body: "Asset 9 description"
+        }
+    },
+    {
+        src: gallery_10,
+        alt: 'Asset10',
+        imageContent: {
+            title: 'Asset 10',
+            body: "Asset 10 description"
+        }
+    }
+];
+export { ImageGallery_stories_helper_images as images };

package/dist/components/modals/image-gallery/ImageGalleryContent.d.ts

@@ -0,0 +1,9 @@
+export interface ImageDescriptiveContent {
+    title: string;
+    body: React.ReactNode;
+}
+interface ImageGalleryContentProps {
+    imageContent?: ImageDescriptiveContent;
+}
+export declare function ImageGalleryContent({ imageContent, }: ImageGalleryContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modals/image-gallery/ImageGalleryContent.js

@@ -0,0 +1,15 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ImageGalleryContent({ imageContent }) {
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: imageContent && /*#__PURE__*/ jsxs("div", {
+            className: "fwe-image-gallery-content",
+            children: [
+                /*#__PURE__*/ jsx("h3", {
+                    children: imageContent.title
+                }),
+                imageContent.body
+            ]
+        })
+    });
+}
+export { ImageGalleryContent };

package/dist/components/modals/image-gallery/ImageGalleryScale.d.ts

@@ -0,0 +1,6 @@
+import type { ImageGalleryItemData } from './ImageGallery';
+export declare function ImageGalleryScale({ images, currentIndex, onClose, }: {
+    readonly images?: ImageGalleryItemData[];
+    readonly currentIndex: number;
+    readonly onClose?: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/modals/image-gallery/ImageGalleryScale.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+function ImageGalleryScale({ images, currentIndex, onClose }) {
+    if (!images || 0 === images.length) return null;
+    return /*#__PURE__*/ jsx("button", {
+        className: "fr-image-gallery-scale-container",
+        type: "button",
+        "aria-label": "close",
+        onClick: onClose,
+        children: /*#__PURE__*/ jsx("img", {
+            ...images[currentIndex - 1],
+            alt: images[currentIndex - 1].alt
+        })
+    });
+}
+export { ImageGalleryScale };

package/dist/components/modals/image-gallery/ImageGallerySwiper.d.ts

@@ -0,0 +1,13 @@
+import { type SwiperClass } from 'swiper/react';
+import type { ImageGalleryItemData } from './ImageGallery';
+interface ImageGallerySwiperProps {
+    readonly images?: ImageGalleryItemData[];
+    onSlideChanged?: (value: number) => void;
+    thumbsSwiper: SwiperClass | null;
+    startIndex?: number;
+}
+export declare function ImageGallerySwiper({ images, onSlideChanged, thumbsSwiper, startIndex, }: ImageGallerySwiperProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ImageGallerySwiper {
+    var displayName: string;
+}
+export {};

package/dist/components/modals/image-gallery/ImageGallerySwiper.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { Navigation, Thumbs, Zoom } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+function ImageGallerySwiper({ images, onSlideChanged, thumbsSwiper, startIndex }) {
+    return /*#__PURE__*/ jsx(Swiper, {
+        initialSlide: startIndex,
+        thumbs: {
+            swiper: thumbsSwiper
+        },
+        modules: [
+            Zoom,
+            Thumbs,
+            Navigation
+        ],
+        navigation: {
+            nextEl: '.fwe-navigate-btn-up',
+            prevEl: '.fwe-navigate-btn-down'
+        },
+        zoom: true,
+        className: "gallery-swiper fwe-image-gallery",
+        spaceBetween: 0,
+        onSlideChange: (slider)=>onSlideChanged?.(slider.activeIndex),
+        children: images?.map(({ containMode, alt, imageContent, ...image })=>/*#__PURE__*/ jsx(SwiperSlide, {
+                zoom: containMode,
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "swiper-zoom-container",
+                    children: /*#__PURE__*/ jsx("img", {
+                        ...image,
+                        className: classnames(image.className, {
+                            'fr-image-gallery-item-contain': containMode
+                        }),
+                        alt: alt
+                    })
+                })
+            }, image.src))
+    });
+}
+ImageGallerySwiper.displayName = 'Swiper';
+export { ImageGallerySwiper };

package/dist/components/modals/image-gallery/ImageGalleryThumbsSwiper.d.ts

@@ -0,0 +1,8 @@
+import { type SwiperClass } from 'swiper/react';
+import type { ImageGalleryItemData } from './ImageGallery';
+interface ImageGalleryThumbsSwiperProps {
+    readonly images?: ImageGalleryItemData[];
+    readonly setThumbsSwiper: React.Dispatch<React.SetStateAction<SwiperClass | null>>;
+}
+export declare function ImageGalleryThumbsSwiper({ images, setThumbsSwiper, }: ImageGalleryThumbsSwiperProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modals/image-gallery/ImageGalleryThumbsSwiper.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { Thumbs } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+function ImageGalleryThumbsSwiper({ images, setThumbsSwiper }) {
+    return /*#__PURE__*/ jsx(Swiper, {
+        freeMode: true,
+        slidesPerView: "auto",
+        className: "thumbs-swiper fwe-image-gallery-thumbs",
+        modules: [
+            Thumbs
+        ],
+        watchSlidesProgress: true,
+        onSwiper: setThumbsSwiper,
+        children: images?.map(({ containMode, alt, imageContent, ...image })=>/*#__PURE__*/ jsx(SwiperSlide, {
+                zoom: containMode,
+                children: /*#__PURE__*/ jsx("img", {
+                    ...image,
+                    className: classnames(image.className, {
+                        'fr-image-gallery-item-thumb-contain': containMode
+                    }),
+                    alt: alt
+                })
+            }, image.src))
+    });
+}
+export { ImageGalleryThumbsSwiper };

package/dist/components/modals/image-gallery/internal/CloseButton.d.ts

@@ -0,0 +1,6 @@
+interface CloseButtonProps {
+    onClose?: () => void;
+    showScaleButton?: boolean;
+}
+export declare function CloseButton({ onClose, showScaleButton }: CloseButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modals/image-gallery/internal/CloseButton.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+function CloseButton({ onClose, showScaleButton }) {
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        "aria-label": "close",
+        className: classnames('fwe-image-gallery-close-btn', {
+            'fwe-ml-auto': !showScaleButton,
+            'fwe-ml-3': showScaleButton
+        }),
+        onClick: onClose
+    });
+}
+export { CloseButton };

package/dist/components/modals/image-gallery/internal/ImageGalleryContainer.d.ts

@@ -0,0 +1,5 @@
+export interface ImageGalleryContainerProps {
+    children: React.ReactNode;
+    descriptiveContent?: boolean;
+}
+export declare function ImageGalleryContainer({ children, descriptiveContent, }: ImageGalleryContainerProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/components/modals/image-gallery/internal/ImageGalleryContainer.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+function ImageGalleryContainer({ children, descriptiveContent }) {
+    return descriptiveContent ? /*#__PURE__*/ jsx("div", {
+        className: "fwe-image-gallery-container",
+        children: children
+    }) : children;
+}
+export { ImageGalleryContainer };

package/dist/components/modals/image-gallery/internal/ImageGalleryPagination.d.ts

@@ -0,0 +1,5 @@
+export interface ImageGalleryPaginationProps {
+    currentIndex: number;
+    length?: number;
+}
+export declare function ImageGalleryPagination({ currentIndex, length, }: ImageGalleryPaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modals/image-gallery/internal/ImageGalleryPagination.js

@@ -0,0 +1,29 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ImageGalleryPagination({ currentIndex, length }) {
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: length && /*#__PURE__*/ jsxs("div", {
+            className: "fwe-pagination fwe-pagination--on-dark-bg",
+            children: [
+                /*#__PURE__*/ jsx("button", {
+                    "aria-label": "previous",
+                    type: "button",
+                    className: "fwe-navigate-btn-down"
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: "fwe-page-current",
+                    children: currentIndex
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: "fwe-page-max",
+                    children: length
+                }),
+                /*#__PURE__*/ jsx("button", {
+                    "aria-label": "next",
+                    type: "button",
+                    className: "fwe-navigate-btn-up"
+                })
+            ]
+        })
+    });
+}
+export { ImageGalleryPagination };

package/dist/components/pagination/Pagination.css

@@ -0,0 +1,10 @@
+.fwe-page-dot {
+  border: none;
+  padding: 0;
+}
+
+.fwe-page-dot:focus {
+  background: var(--fwe-control-border-hover);
+  outline: 0;
+}
+

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,15 @@
+import './Pagination.scss';
+import type { ClassNameProps } from '../../utils/types';
+export declare enum PaginationType {
+    Simple = "SIMPLE",
+    Numeric = "NUMERIC",
+    Dots = "DOTS"
+}
+export interface PaginationProps extends ClassNameProps {
+    readonly type?: PaginationType;
+    readonly onChange?: (page: number) => void;
+    readonly pageCurrent?: number;
+    readonly defaultPageCurrent?: number;
+    readonly pageMax: number;
+}
+export declare function Pagination(props: PaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,100 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./Pagination.css";
+import classnames from "classnames";
+import { useEffect, useState } from "react";
+var Pagination_PaginationType = /*#__PURE__*/ function(PaginationType) {
+    PaginationType["Simple"] = "SIMPLE";
+    PaginationType["Numeric"] = "NUMERIC";
+    PaginationType["Dots"] = "DOTS";
+    return PaginationType;
+}({});
+function Pagination(props) {
+    const { pageMax, onChange, pageCurrent, defaultPageCurrent = 1, type = "NUMERIC", className } = props;
+    const controlled = void 0 !== pageCurrent;
+    const dotArray = Array.from(new Array(pageMax).keys());
+    const [innerPageCurrent, setInnerPageCurrent] = useState(controlled ? pageCurrent : defaultPageCurrent);
+    useEffect(()=>{
+        if (controlled) setInnerPageCurrent(pageCurrent);
+    }, [
+        pageCurrent,
+        controlled
+    ]);
+    function handleChange(newPage) {
+        if (!controlled) setInnerPageCurrent(newPage);
+        if (onChange) onChange(newPage);
+    }
+    function onBtnDown() {
+        if (innerPageCurrent > 1) {
+            const newPageCurrent = innerPageCurrent - 1;
+            handleChange(newPageCurrent);
+        }
+    }
+    function onBtnUp() {
+        if (innerPageCurrent < pageMax) {
+            const newPageCurrent = innerPageCurrent + 1;
+            handleChange(newPageCurrent);
+        }
+    }
+    function onDotClick(index) {
+        const newPageCurrent = index + 1;
+        handleChange(newPageCurrent);
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            "DOTS" !== type && /*#__PURE__*/ jsxs("div", {
+                className: classnames('fwe-pagination fwe-p-m', {
+                    'fwe-d-none': pageMax < 2
+                }, className),
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        className: classnames('fwe-navigate-btn-down', {
+                            'fwe-disabled': innerPageCurrent <= 1
+                        }),
+                        onClick: onBtnDown,
+                        type: "button",
+                        "aria-label": "navigate-btn-down"
+                    }),
+                    "NUMERIC" === type && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "fwe-page-current",
+                                children: innerPageCurrent
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "fwe-page-max",
+                                children: pageMax
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        className: classnames('fwe-navigate-btn-up', {
+                            'fwe-disabled': innerPageCurrent >= pageMax,
+                            'fwe-ml-4': "SIMPLE" === type
+                        }),
+                        onClick: onBtnUp,
+                        type: "button",
+                        "aria-label": "navigate-btn-up"
+                    })
+                ]
+            }),
+            "DOTS" === type && /*#__PURE__*/ jsx("div", {
+                className: classnames('fwe-p-m', {
+                    'fwe-d-none': pageMax < 2
+                }, className),
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "fwe-pagination",
+                    children: dotArray.map((index)=>/*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            className: classnames('fwe-page-dot', {
+                                'fwe-selected': index + 1 === innerPageCurrent
+                            }),
+                            onClick: ()=>onDotClick(index),
+                            "aria-label": `Go to page ${index + 1}`,
+                            "aria-current": index + 1 === innerPageCurrent ? 'page' : void 0
+                        }, index))
+                })
+            })
+        ]
+    });
+}
+export { Pagination, Pagination_PaginationType as PaginationType };

package/dist/components/popovers/legend/Legend.css

@@ -0,0 +1,21 @@
+.fr-legend {
+  margin: 16px;
+  line-height: 24px;
+  display: table;
+}
+
+.fr-legend .fr-legend-content {
+  display: table-row;
+}
+
+.fr-legend .fr-legend-content dt {
+  margin: 0;
+  padding-right: 8px;
+  display: table-cell;
+}
+
+.fr-legend .fr-legend-content dd {
+  margin: 0;
+  display: table-cell;
+}
+

package/dist/components/popovers/legend/Legend.d.ts

@@ -0,0 +1,11 @@
+import { type PopoverProps } from '../popover/Popover';
+import './Legend.scss';
+interface PopoverLegendItem {
+    name: string;
+    text: string;
+}
+export interface LegendProps extends Omit<PopoverProps, 'popoverContent'> {
+    items: PopoverLegendItem[];
+}
+export declare function Legend({ items, ...props }: Readonly<LegendProps>): import("react/jsx-runtime").JSX.Element;
+export {};