@festo-ui/react 9.0.1-dev.815 → 9.0.1-dev.818

package/dist/components/accordion/Accordion.d.ts

@@ -1,10 +1,10 @@
 import './Accordion.scss';
-import { type ComponentPropsWithoutRef } from 'react';
-export interface AccordionProps extends ComponentPropsWithoutRef<'div'> {
+import type React from 'react';
+export interface AccordionProps extends React.ComponentPropsWithoutRef<'div'> {
     showMore?: string;
     showLess?: string;
     keepItemsOpen?: boolean;
     transparent?: boolean;
     highlighted?: boolean;
 }
-export declare const Accordion: (props: AccordionProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const Accordion: (props: AccordionProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/accordion/Accordion.js

@@ -30,12 +30,13 @@ const Accordion = /*#__PURE__*/ forwardRef(({ children, showMore = 'Show more',
         value: contextValue,
         children: /*#__PURE__*/ jsx("div", {
             ref: ref,
+            ...props,
             className: classnames('fr-accordion', {
                 'fwe-bg-white': !transparent
             }, className),
-            ...props,
             children: children
         })
     });
 });
+Accordion.displayName = 'Accordion';
 export { Accordion };

package/dist/components/accordion/accordion-header/AccordionHeader.js

@@ -8,4 +8,5 @@ const AccordionHeader = /*#__PURE__*/ forwardRef(({ children, className, ...prop
         ...props,
         children: children
     }));
+AccordionHeader.displayName = 'AccordionHeader';
 export { AccordionHeader };

package/dist/components/accordion/accordion-item/AccordionItem.d.ts

@@ -3,6 +3,6 @@ import { type ComponentPropsWithoutRef } from 'react';
 export interface AccordionItemProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
     expanded?: boolean;
     defaultExpanded?: boolean;
-    onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
+    onChange?: (expanded: boolean, event: React.SyntheticEvent) => void;
 }
 export declare const AccordionItem: (props: AccordionItemProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/accordion/accordion-item/AccordionItem.js

@@ -17,7 +17,7 @@ const AccordionItem = /*#__PURE__*/ forwardRef(({ expanded: expandedProp, defaul
     });
     const linkText = expanded ? showLess : showMore;
     const handleChange = useCallback((event)=>{
-        if (onChange) onChange(event, !expanded);
+        if (onChange) onChange(!expanded, event);
         if (!keepItemsOpen) accordionToggle?.(id, !expanded);
         setExpanded(!expanded);
     }, [
@@ -57,4 +57,5 @@ const AccordionItem = /*#__PURE__*/ forwardRef(({ expanded: expandedProp, defaul
         })
     });
 });
+AccordionItem.displayName = 'AccordionItem';
 export { AccordionItem };

package/dist/components/accordion/accordion-item/accordion-item-body/AccordionItemBody.js

@@ -58,4 +58,5 @@ const AccordionItemBody = /*#__PURE__*/ forwardRef(({ children, className, ...pr
         })
     });
 });
+AccordionItemBody.displayName = 'AccordionItemBody';
 export { AccordionItemBody };

package/dist/components/accordion/accordion-item/accordion-item-header/AccordionItemHeader.js

@@ -17,4 +17,5 @@ const AccordionItemHeader = /*#__PURE__*/ forwardRef(({ children, className, ...
         children: children
     });
 });
+AccordionItemHeader.displayName = 'AccordionItemHeader';
 export { AccordionItemHeader };

package/dist/components/bottom-sheet/BottomSheet.d.ts

@@ -1,6 +1,5 @@
 import './BottomSheet.scss';
-import { type PropsWithChildren } from 'react';
-export interface BottomSheetProps extends PropsWithChildren {
+export interface BottomSheetProps extends React.ComponentPropsWithoutRef<'div'> {
     readonly defaultExpanded?: boolean;
     readonly open?: boolean;
     readonly expandFrom?: 'center' | 'bottom';
@@ -8,4 +7,4 @@ export interface BottomSheetProps extends PropsWithChildren {
     readonly hideCloseIcon?: boolean;
     readonly onOpenChange?: (value: boolean) => void;
 }
-export declare function BottomSheet({ children, open, defaultExpanded, expandFrom, hasBackdrop, hideCloseIcon, onOpenChange, }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;
+export declare const BottomSheet: (props: BottomSheetProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/bottom-sheet/BottomSheet.js

@@ -1,8 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "./BottomSheet.css";
 import classnames from "classnames";
-import { useState } from "react";
-function BottomSheet({ children, open, defaultExpanded, expandFrom = 'center', hasBackdrop = true, hideCloseIcon, onOpenChange }) {
+import { forwardRef, useState } from "react";
+const BottomSheet = /*#__PURE__*/ forwardRef(({ children, open, defaultExpanded, expandFrom = 'center', hasBackdrop = true, hideCloseIcon, onOpenChange, className, ...props }, ref)=>{
     const [expanded, setExpanded] = useState(defaultExpanded);
     const [isClosing, setIsClosing] = useState(false);
     const [startY, setStartY] = useState(0);
@@ -55,13 +55,15 @@ function BottomSheet({ children, open, defaultExpanded, expandFrom = 'center', h
                 }
             }),
             /*#__PURE__*/ jsxs("div", {
+                ref: ref,
+                ...props,
                 className: classnames('fwe-bottom-sheet-container', {
                     'fwe-bottom-sheet-container--open': open,
                     'fwe-bottom-sheet-container--expanded': expanded,
                     'fwe-bottom-sheet-container--expand-from-center': 'center' === expandFrom,
                     'fwe-bottom-sheet-container--with-backdrop': hasBackdrop,
                     'fwe-bottom-sheet-container--closing': isClosing
-                }),
+                }, className),
                 onTouchStart: handleTouchStart,
                 onTouchMove: handleTouchMove,
                 children: [
@@ -97,5 +99,6 @@ function BottomSheet({ children, open, defaultExpanded, expandFrom = 'center', h
             })
         ]
     });
-}
+});
+BottomSheet.displayName = 'BottomSheet';
 export { BottomSheet };

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -1,14 +1,13 @@
-import { type MouseEvent } from 'react';
-import type { ClassNamePropsWithChildren } from '../../utils/types';
+import { type ComponentPropsWithoutRef, type MouseEvent, type PropsWithChildren } from 'react';
 export interface BreadcrumbLocation {
     label: string;
     url: string;
 }
-export interface BreadcrumbProps extends ClassNamePropsWithChildren {
+export interface BreadcrumbProps extends PropsWithChildren, ComponentPropsWithoutRef<'nav'> {
     readonly locations?: BreadcrumbLocation[];
     readonly onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
 }
 /**
  * Breadcrumb navigation can be used on pages with multiple navigation levels.
  */
-export declare function Breadcrumb({ locations, onClick, children, className, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export declare const Breadcrumb: (props: BreadcrumbProps & import("react").RefAttributes<HTMLElement>) => React.ReactElement | null;

package/dist/components/breadcrumb/Breadcrumb.js

@@ -1,9 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
-import { Children, cloneElement, isValidElement, useCallback, useEffect, useRef, useState } from "react";
-function Breadcrumb({ locations, onClick, children, className }) {
+import { Children, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useRef, useState } from "react";
+import { useForkRef } from "../../utils/useForkRef.js";
+const Breadcrumb = /*#__PURE__*/ forwardRef(({ locations, onClick, children, className, ...props }, ref)=>{
     const containerRef = useRef(null);
     const measureRef = useRef(null);
+    const combinedRef = useForkRef(ref, containerRef);
     const [isMobile, setIsMobile] = useState(false);
     function isValidHtmlChildElement(child) {
         return /*#__PURE__*/ isValidElement(child);
@@ -56,6 +58,7 @@ function Breadcrumb({ locations, onClick, children, className }) {
         measure
     ]);
     return /*#__PURE__*/ jsxs("div", {
+        className: className,
         children: [
             /*#__PURE__*/ jsx("nav", {
                 className: classnames('fwe-breadcrumb'),
@@ -74,8 +77,9 @@ function Breadcrumb({ locations, onClick, children, className }) {
                 })
             }),
             /*#__PURE__*/ jsx("nav", {
-                className: classnames('fwe-breadcrumb', isMobile && 'fwe-breadcrumb--mobile', className),
-                ref: containerRef,
+                ...props,
+                className: classnames('fwe-breadcrumb', isMobile && 'fwe-breadcrumb--mobile'),
+                ref: combinedRef,
                 "aria-label": "Breadcrumb",
                 children: /*#__PURE__*/ jsx("ol", {
                     children: listItems
@@ -83,5 +87,6 @@ function Breadcrumb({ locations, onClick, children, className }) {
             })
         ]
     });
-}
+});
+Breadcrumb.displayName = 'Breadcrumb';
 export { Breadcrumb };

package/dist/components/button/Button.js

@@ -33,4 +33,5 @@ const Button = /*#__PURE__*/ forwardRef(({ icon, type = 'button', disabled = fal
         ]
     });
 });
+Button.displayName = 'Button';
 export { Button };

package/dist/components/card/Card.d.ts

@@ -1,5 +1,3 @@
-import type { ReactElement } from 'react';
-import type { ClassNamePropsWithChildren } from '../../utils/types';
-export interface CardProps extends ClassNamePropsWithChildren {
-}
-export declare function Card({ children, className }: CardProps): ReactElement;
+import type React from 'react';
+export type CardProps = React.ComponentPropsWithoutRef<'div'>;
+export declare const Card: (props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/card/Card.js

@@ -1,9 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
-function Card({ children, className }) {
-    return /*#__PURE__*/ jsx("div", {
+import { forwardRef } from "react";
+const Card = /*#__PURE__*/ forwardRef(({ children, className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
         className: classnames('fwe-card', className),
+        ref: ref,
+        ...props,
         children: children
-    });
-}
+    }));
+Card.displayName = 'Card';
 export { Card };

package/dist/components/card/CardBody.d.ts

@@ -1,5 +1,5 @@
-import type { ClassNamePropsWithChildren } from '../../utils/types';
-export interface CardBodyProps extends ClassNamePropsWithChildren {
+import type React from 'react';
+export interface CardBodyProps extends React.ComponentPropsWithoutRef<'div'> {
     text: string;
 }
-export declare function CardBody({ children, text, className }: CardBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare const CardBody: (props: CardBodyProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/card/CardBody.js

@@ -1,8 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
-function CardBody({ children, text, className }) {
-    return /*#__PURE__*/ jsxs("div", {
+import { forwardRef } from "react";
+const CardBody = /*#__PURE__*/ forwardRef(({ children, text, className, ...props }, ref)=>/*#__PURE__*/ jsxs("div", {
         className: classnames('fwe-card-body', className),
+        ref: ref,
+        ...props,
         children: [
             /*#__PURE__*/ jsx("div", {
                 className: "fwe-card-text",
@@ -10,6 +12,6 @@ function CardBody({ children, text, className }) {
             }),
             children
         ]
-    });
-}
+    }));
+CardBody.displayName = 'CardBody';
 export { CardBody };

package/dist/components/card/CardHeader.d.ts

@@ -1,8 +1,8 @@
-import type { ClassNameProps, Image } from '../../utils/types';
-export interface CardHeaderProps extends ClassNameProps {
+import type { Image } from '../../utils/types';
+export interface CardHeaderProps extends React.ComponentPropsWithoutRef<'div'> {
     title: string;
     subtitle?: string;
     action?: React.ReactNode;
     image?: Image;
 }
-export declare function CardHeader({ title, subtitle, action, image, className, }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare const CardHeader: (props: CardHeaderProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/card/CardHeader.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
-function CardHeader({ title, subtitle, action, image, className }) {
-    return /*#__PURE__*/ jsxs(Fragment, {
+import { forwardRef } from "react";
+const CardHeader = /*#__PURE__*/ forwardRef(({ title, subtitle, action, image, className, ...props }, ref)=>/*#__PURE__*/ jsxs(Fragment, {
         children: [
             image ? /*#__PURE__*/ jsx("img", {
                 alt: image.alt,
@@ -10,6 +10,8 @@ function CardHeader({ title, subtitle, action, image, className }) {
             }) : null,
             /*#__PURE__*/ jsxs("div", {
                 className: classnames('fwe-card-header', className),
+                ref: ref,
+                ...props,
                 children: [
                     /*#__PURE__*/ jsxs("div", {
                         className: "fwe-card-title",
@@ -26,6 +28,6 @@ function CardHeader({ title, subtitle, action, image, className }) {
                 ]
             })
         ]
-    });
-}
+    }));
+CardHeader.displayName = 'CardHeader';
 export { CardHeader };

package/dist/components/card/CardNotification.d.ts

@@ -1,6 +1,5 @@
-import type { ClassNameProps } from '../../utils/types';
-export interface CardNotificationProps extends ClassNameProps {
+export interface CardNotificationProps extends React.ComponentPropsWithoutRef<'div'> {
     title: string;
     message?: string;
 }
-export declare function CardNotification({ className, title, message, }: CardNotificationProps): import("react/jsx-runtime").JSX.Element;
+export declare const CardNotification: (props: CardNotificationProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/card/CardNotification.js

@@ -1,10 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { IconWarning } from "@festo-ui/react-icons";
 import classnames from "classnames";
-function CardNotification({ className, title, message }) {
+import { forwardRef } from "react";
+const CardNotification = /*#__PURE__*/ forwardRef(({ className, title, message, ...props }, ref)=>{
     const classes = classnames('fwe-card-notification', className);
     return /*#__PURE__*/ jsxs("div", {
         className: classes,
+        ref: ref,
+        ...props,
         children: [
             /*#__PURE__*/ jsx(IconWarning, {
                 size: 24
@@ -22,5 +25,6 @@ function CardNotification({ className, title, message }) {
             })
         ]
     });
-}
+});
+CardNotification.displayName = 'CardNotification';
 export { CardNotification };

package/dist/components/chips/chip/Chip.d.ts

@@ -1,17 +1,16 @@
 import type React from 'react';
-import type { ClassNamePropsWithChildren } from '../../../utils/types';
 export declare enum ChipType {
     Choice = 0,
     Category = 1,
     Filter = 2,
-    Readonly = 3
+    Action = 3,
+    Readonly = 4
 }
-export interface ChipProps extends ClassNamePropsWithChildren {
+export interface ChipProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'type'> {
     readonly type?: ChipType;
     readonly icon?: React.ReactNode;
     readonly selected?: boolean;
     readonly disabled?: boolean;
     readonly large?: boolean;
-    readonly onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
-export declare function Chip({ type, selected, disabled, large, icon, children, onClick, className, }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export declare const Chip: (props: ChipProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/dist/components/chips/chip/Chip.js

@@ -1,14 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
+import { forwardRef } from "react";
 import { IconWrapper } from "../../icon-wrapper/IconWrapper.js";
 var Chip_ChipType = /*#__PURE__*/ function(ChipType) {
     ChipType[ChipType["Choice"] = 0] = "Choice";
     ChipType[ChipType["Category"] = 1] = "Category";
     ChipType[ChipType["Filter"] = 2] = "Filter";
-    ChipType[ChipType["Readonly"] = 3] = "Readonly";
+    ChipType[ChipType["Action"] = 3] = "Action";
+    ChipType[ChipType["Readonly"] = 4] = "Readonly";
     return ChipType;
 }({});
-function Chip({ type = 0, selected = false, disabled = false, large = false, icon, children, onClick, className }) {
+const Chip = /*#__PURE__*/ forwardRef(({ type = 0, selected = false, disabled = false, large = false, icon, children, onClick, className, ...props }, ref)=>{
     const classes = classnames('fr-chip', 'fwe-chip', {
         'fwe-selected': selected
     }, {
@@ -20,13 +22,17 @@ function Chip({ type = 0, selected = false, disabled = false, large = false, ico
     }, {
         'fwe-filter': 2 === type
     }, {
-        'fwe-readonly': 3 === type
+        'fwe-action': 3 === type
+    }, {
+        'fwe-readonly': 4 === type
     }, className);
     return /*#__PURE__*/ jsxs("button", {
         type: "button",
         className: classes,
         onClick: onClick,
         disabled: disabled,
+        ref: ref,
+        ...props,
         children: [
             /*#__PURE__*/ jsx(IconWrapper, {
                 icon: icon
@@ -34,5 +40,6 @@ function Chip({ type = 0, selected = false, disabled = false, large = false, ico
             children
         ]
     });
-}
+});
+Chip.displayName = 'Chip';
 export { Chip, Chip_ChipType as ChipType };

package/dist/components/chips/chip-container/ChipContainer.d.ts

@@ -1,5 +1,5 @@
-import type { ClassNamePropsWithChildren } from '../../../utils/types';
-export interface ChipContainerProps extends ClassNamePropsWithChildren {
+import type React from 'react';
+export interface ChipContainerProps extends React.ComponentPropsWithoutRef<'div'> {
     readonly large?: boolean;
 }
-export declare function ChipContainer({ large, children, className, }: ChipContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare const ChipContainer: (props: ChipContainerProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/chips/chip-container/ChipContainer.js

@@ -1,12 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
-function ChipContainer({ large = false, children, className }) {
+import { forwardRef } from "react";
+const ChipContainer = /*#__PURE__*/ forwardRef(({ large = false, children, className, ...props }, ref)=>{
     const classes = classnames('fwe-chip-container', {
         'fwe-chip-container-lg': large
     }, className);
     return /*#__PURE__*/ jsx("div", {
         className: classes,
+        ref: ref,
+        ...props,
         children: children
     });
-}
+});
+ChipContainer.displayName = 'ChipContainer';
 export { ChipContainer };

package/dist/components/loading-indicator/LoadingIndicator.d.ts

@@ -1,5 +1,5 @@
-import { type ComponentPropsWithRef } from 'react';
-export interface LoadingIndicatorProps extends ComponentPropsWithRef<'div'> {
+import { type ComponentPropsWithoutRef } from 'react';
+export interface LoadingIndicatorProps extends ComponentPropsWithoutRef<'div'> {
     readonly size: 'large' | 'medium' | 'small';
 }
 export declare const LoadingIndicator: (props: LoadingIndicatorProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/loading-indicator/LoadingIndicator.js

@@ -38,4 +38,5 @@ const LoadingIndicator = /*#__PURE__*/ forwardRef(({ size = 'large', children, c
         ]
     });
 });
+LoadingIndicator.displayName = 'LoadingIndicator';
 export { LoadingIndicator };

package/dist/components/mobile-flyout/MobileFlyout.js

@@ -85,4 +85,5 @@ const MobileFlyout = /*#__PURE__*/ forwardRef(({ className, children, open, onOp
         ]
     });
 });
+MobileFlyout.displayName = 'MobileFlyout';
 export { MobileFlyout };

package/dist/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.d.ts

@@ -6,6 +6,7 @@ export interface MobileFlyoutItemBaseProps {
     icon?: React.ReactNode;
     pageLink?: string;
     active?: boolean;
+    className?: string;
 }
 export type MobileFlyoutItemProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, MobileFlyoutItemBaseProps>;
 export declare const MobileFlyoutItem: <C extends React.ElementType = "a">(props: MobileFlyoutItemBaseProps & {

package/dist/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.js

@@ -4,7 +4,7 @@ import classnames from "classnames";
 import { forwardRef, useContext } from "react";
 import { IconWrapper } from "../../icon-wrapper/IconWrapper.js";
 import { MobileFlyoutContext } from "../MobileFlyoutContext.js";
-const MobileFlyoutItem = /*#__PURE__*/ forwardRef(({ component, children, pageLink, icon, onClick, active, ...props }, ref)=>{
+const MobileFlyoutItem = /*#__PURE__*/ forwardRef(({ component, children, pageLink, icon, onClick, active, className, ...props }, ref)=>{
     const Component = component || 'a';
     const { setVisible, setOpen } = useContext(MobileFlyoutContext);
     function handleClick(e) {
@@ -13,7 +13,7 @@ const MobileFlyoutItem = /*#__PURE__*/ forwardRef(({ component, children, pageLi
         onClick?.(e);
     }
     return /*#__PURE__*/ jsxs(Component, {
-        className: "fwe-mobile-flyout-item fwe-bb",
+        className: classnames('fwe-mobile-flyout-item fwe-bb', className),
         ...props,
         ref: ref,
         onClick: handleClick,
@@ -33,4 +33,5 @@ const MobileFlyoutItem = /*#__PURE__*/ forwardRef(({ component, children, pageLi
         ]
     });
 });
+MobileFlyoutItem.displayName = 'MobileFlyoutItem';
 export { MobileFlyoutItem };

package/dist/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.js

@@ -3,7 +3,7 @@ import "./MobileFlyoutPage.css";
 import classnames from "classnames";
 import { forwardRef, useContext } from "react";
 import { MobileFlyoutContext } from "../MobileFlyoutContext.js";
-const MobileFlyoutPage = /*#__PURE__*/ forwardRef(({ back, children, name, root, ...props }, ref)=>{
+const MobileFlyoutPage = /*#__PURE__*/ forwardRef(({ back, children, name, root, className, ...props }, ref)=>{
     const { visible, setVisible, back: backContext } = useContext(MobileFlyoutContext);
     const innerVisible = root || name && visible.includes(name);
     const innerBack = back ?? backContext ?? 'Back';
@@ -11,11 +11,11 @@ const MobileFlyoutPage = /*#__PURE__*/ forwardRef(({ back, children, name, root,
         if (name) setVisible(name);
     }
     return /*#__PURE__*/ jsxs("div", {
+        ...props,
         className: classnames('fwe-mobile-flyout-page', {
             'fwe-opened': innerVisible
-        }),
+        }, className),
         ref: ref,
-        ...props,
         children: [
             !root && /*#__PURE__*/ jsx("button", {
                 type: "button",
@@ -32,4 +32,5 @@ const MobileFlyoutPage = /*#__PURE__*/ forwardRef(({ back, children, name, root,
         ]
     });
 });
+MobileFlyoutPage.displayName = 'MobileFlyoutPage';
 export { MobileFlyoutPage };

package/dist/components/modals/AlertModal.d.ts

@@ -9,4 +9,4 @@ export interface AlertModalProps extends Omit<ModalProps, 'head' | 'children'> {
     readonly onCancel?: () => void;
     readonly onOk?: () => void;
 }
-export declare function AlertModal({ title, subtitle, alertType, strong, cancel, ok, onCancel, onOk, className, body, ...props }: AlertModalProps): import("react/jsx-runtime").JSX.Element;
+export declare const AlertModal: (props: AlertModalProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/modals/AlertModal.js

@@ -1,9 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
+import { forwardRef } from "react";
 import { Modal } from "./Modal.js";
 import { ModalFooter } from "./ModalFooter.js";
-function AlertModal({ title, subtitle, alertType, strong, cancel, ok, onCancel, onOk, className, body, ...props }) {
-    return /*#__PURE__*/ jsx(Modal, {
+const AlertModal = /*#__PURE__*/ forwardRef(({ title, subtitle, alertType, strong, cancel, ok, onCancel, onOk, className, body, ...props }, ref)=>/*#__PURE__*/ jsx(Modal, {
         className: classnames({
             'fwe-modal--with-indicator-bar': strong,
             'fwe-modal--warning': 'warning' === alertType,
@@ -25,6 +25,7 @@ function AlertModal({ title, subtitle, alertType, strong, cancel, ok, onCancel,
         body: 'string' == typeof body ? /*#__PURE__*/ jsx("p", {
             children: body
         }) : body,
+        ref: ref,
         ...props,
         children: (cancel || ok) && /*#__PURE__*/ jsxs(ModalFooter, {
             children: [
@@ -48,6 +49,6 @@ function AlertModal({ title, subtitle, alertType, strong, cancel, ok, onCancel,
                 })
             ]
         })
-    });
-}
+    }));
+AlertModal.displayName = 'AlertModal';
 export { AlertModal };

package/dist/components/modals/ConfirmModal.d.ts

@@ -8,4 +8,4 @@ export interface ConfirmModalProps extends Omit<ModalProps, 'head' | 'children'>
     readonly onOk?: () => void;
     readonly large?: boolean;
 }
-export declare function ConfirmModal({ title, subtitle, cancel, ok, onCancel, onOk, large, body, className, ...props }: ConfirmModalProps): import("react/jsx-runtime").JSX.Element;
+export declare const ConfirmModal: (props: ConfirmModalProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/modals/ConfirmModal.js

@@ -1,9 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
+import { forwardRef } from "react";
 import { Modal } from "./Modal.js";
 import { ModalFooter } from "./ModalFooter.js";
-function ConfirmModal({ title, subtitle, cancel, ok, onCancel, onOk, large, body, className, ...props }) {
-    return /*#__PURE__*/ jsx(Modal, {
+const ConfirmModal = /*#__PURE__*/ forwardRef(({ title, subtitle, cancel, ok, onCancel, onOk, large, body, className, ...props }, ref)=>/*#__PURE__*/ jsx(Modal, {
         className: classnames({
             'fwe-modal--large': large
         }, className),
@@ -22,6 +22,7 @@ function ConfirmModal({ title, subtitle, cancel, ok, onCancel, onOk, large, body
         body: 'string' == typeof body ? /*#__PURE__*/ jsx("p", {
             children: body
         }) : body,
+        ref: ref,
         ...props,
         children: (cancel || ok) && /*#__PURE__*/ jsxs(ModalFooter, {
             children: [
@@ -41,6 +42,6 @@ function ConfirmModal({ title, subtitle, cancel, ok, onCancel, onOk, large, body
                 })
             ]
         })
-    });
-}
+    }));
+ConfirmModal.displayName = 'ConfirmModal';
 export { ConfirmModal };

package/dist/components/modals/CustomModal.js

@@ -35,4 +35,5 @@ const CustomModal = /*#__PURE__*/ forwardRef(({ large, title, subtitle, classNam
             children
         ]
     }));
+CustomModal.displayName = 'CustomModal';
 export { CustomModal };

package/dist/components/modals/Modal.js

@@ -28,4 +28,5 @@ const Modal = /*#__PURE__*/ forwardRef(({ head, body, className, children, ...pr
             children
         ]
     }));
+Modal.displayName = 'Modal';
 export { Modal };

package/dist/components/modals/ModalBase.js

@@ -121,4 +121,5 @@ const ModalBase = /*#__PURE__*/ forwardRef(({ isOpen, isLoading, onClose, onClos
         }), container.body)
     });
 });
+ModalBase.displayName = 'ModalBase';
 export { ModalBase };

package/dist/components/modals/ModalFooter.d.ts

@@ -1,2 +1,2 @@
-import type { ClassNamePropsWithChildren } from '../../utils/types';
-export declare const ModalFooter: (props: ClassNamePropsWithChildren & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+import type React from 'react';
+export declare const ModalFooter: (props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;