@festo-ui/react 9.0.1 → 10.0.0-dev.826

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,13 +1,13 @@
-import React from 'react';
-import type { ClassNamePropsWithChildren } from '../../utils/types';
-export interface BreadcrumbProps extends ClassNamePropsWithChildren {
-    readonly locations?: {
-        label: string;
-        url: string;
-    }[];
-    readonly onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+import { type ComponentPropsWithoutRef, type MouseEvent, type PropsWithChildren } from 'react';
+export interface BreadcrumbLocation {
+    label: string;
+    url: string;
+}
+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,32 +1,92 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
-import react from "react";
-function Breadcrumb({ locations, onClick, children, className }) {
-    const childrenList = [];
-    react.Children.forEach(children, (element)=>{
-        if (/*#__PURE__*/ react.isValidElement(element)) childrenList.push({
-            ...element,
-            props: {
-                ...element.props,
-                className: 'fr-breadcrumb-location'
-            }
-        });
+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);
+    }
+    const childrenList = Children.toArray(children).filter(isValidHtmlChildElement);
+    const listItems = locations ? locations.map((location, index)=>{
+        const isCurrent = index === locations.length - 1;
+        return /*#__PURE__*/ jsx("li", {
+            children: /*#__PURE__*/ jsx("a", {
+                href: location.url,
+                onClick: (e)=>onClick ? onClick(e) : void 0,
+                "aria-current": isCurrent ? 'page' : void 0,
+                children: location.label
+            })
+        }, location.url);
+    }) : childrenList.map((child, index)=>{
+        const isCurrent = index === childrenList.length - 1;
+        const content = isCurrent ? /*#__PURE__*/ cloneElement(child, {
+            'aria-current': child.props['aria-current'] ?? 'page'
+        }) : child;
+        return /*#__PURE__*/ jsx("li", {
+            children: content
+        }, child.key ?? index);
     });
-    return /*#__PURE__*/ jsx("div", {
-        className: classnames('fwe-breadcrumb', className),
-        children: locations ? locations.map((location)=>/*#__PURE__*/ jsx(react.Fragment, {
-                children: /*#__PURE__*/ jsx("a", {
-                    className: "fr-breadcrumb-location",
-                    href: location.url,
-                    onClick: (e)=>onClick ? onClick(e) : void 0,
-                    children: location.label
+    const measure = useCallback(()=>{
+        const container = containerRef.current;
+        const measureElement = measureRef.current;
+        if (!container || !measureElement) return;
+        const availableWidth = container.clientWidth;
+        const contentWidth = measureElement.scrollWidth;
+        const nextIsMobile = contentWidth > availableWidth;
+        setIsMobile((previous)=>previous === nextIsMobile ? previous : nextIsMobile);
+    }, []);
+    useEffect(()=>{
+        measure();
+    });
+    useEffect(()=>{
+        const container = containerRef.current;
+        const measureElement = measureRef.current;
+        if (!container || !measureElement) return;
+        if ('undefined' == typeof ResizeObserver) {
+            window.addEventListener('resize', measure);
+            return ()=>window.removeEventListener('resize', measure);
+        }
+        const observer = new ResizeObserver(()=>measure());
+        observer.observe(container);
+        observer.observe(measureElement);
+        return ()=>observer.disconnect();
+    }, [
+        measure
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: className,
+        children: [
+            /*#__PURE__*/ jsx("nav", {
+                className: classnames('fwe-breadcrumb'),
+                ref: measureRef,
+                style: {
+                    position: 'absolute',
+                    visibility: 'hidden',
+                    pointerEvents: 'none',
+                    whiteSpace: 'nowrap',
+                    height: 0,
+                    overflow: 'hidden'
+                },
+                "aria-hidden": "true",
+                children: /*#__PURE__*/ jsx("ol", {
+                    children: listItems
+                })
+            }),
+            /*#__PURE__*/ jsx("nav", {
+                ...props,
+                className: classnames('fwe-breadcrumb', isMobile && 'fwe-breadcrumb--mobile'),
+                ref: combinedRef,
+                "aria-label": "Breadcrumb",
+                children: /*#__PURE__*/ jsx("ol", {
+                    children: listItems
                 })
-            }, location.url)) : childrenList.map((child)=>/*#__PURE__*/ jsxs(react.Fragment, {
-                children: [
-                    child,
-                    " "
-                ]
-            }, child.props.children))
+            })
+        ]
     });
-}
+});
+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,4 +1,3 @@
-import type { ClassNamePropsWithChildren } from '../../utils/types';
-export interface CardProps extends ClassNamePropsWithChildren {
-}
-export declare function Card({ children, className }: CardProps): JSX.Element;
+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/icon-wrapper/IconWrapper.d.ts

@@ -1,6 +1,7 @@
+import type { ReactNode } from 'react';
 /**
  * Internal wrapper for icons.
  */
 export declare function IconWrapper({ icon }: {
-    readonly icon: React.ReactNode;
+    readonly icon: ReactNode;
 }): import("react/jsx-runtime").JSX.Element | null;

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;