@festo-ui/react 10.1.0-dev.864 → 10.1.0-dev.866

package/dist/components/popovers/popover/Popover.d.ts

@@ -0,0 +1,19 @@
+import './Popover.scss';
+import { type Placement } from '@floating-ui/react';
+import { type MouseEvent, type ReactNode } from 'react';
+export interface PopoverProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content' | 'onChange'> {
+    readonly 'data-testid'?: string;
+    readonly containerClassName?: string;
+    readonly content: ReactNode;
+    readonly position?: Placement;
+    readonly fallbackPositions?: Placement[];
+    readonly isOpen?: boolean;
+    readonly openOnHover?: boolean;
+    readonly openByDefault?: boolean;
+    readonly onChange?: (isOpen: boolean) => void;
+    readonly flip?: boolean;
+    readonly showArrow?: boolean;
+    readonly onTriggerClick?: (event: MouseEvent) => void;
+    readonly stopPropagation?: boolean;
+}
+export declare const Popover: (props: PopoverProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/popovers/popover/Popover.js

@@ -0,0 +1,99 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./Popover.css";
+import { FloatingArrow, FloatingPortal, arrow, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useHover, useInteractions } from "@floating-ui/react";
+import classnames from "classnames";
+import { forwardRef, useRef } from "react";
+import { useControlled } from "../../../utils/useControlled.js";
+import { useForkRef } from "../../../utils/useForkRef.js";
+const Popover = /*#__PURE__*/ forwardRef(({ children, className, style, containerClassName, content, position, fallbackPositions, isOpen, openOnHover = false, openByDefault = false, onChange, flip: enableFlip = true, showArrow = true, onTriggerClick, stopPropagation = false, ...props }, ref)=>{
+    const [showPopover, setShowPopover] = useControlled({
+        controlled: isOpen,
+        default: openByDefault
+    });
+    const arrowRef = useRef(null);
+    const triggerRef = useRef(null);
+    const handleRef = useForkRef(ref, triggerRef);
+    const { refs, floatingStyles, context } = useFloating({
+        placement: position,
+        open: showPopover,
+        onOpenChange: (isOpen)=>{
+            setShowPopover(isOpen);
+            onChange?.(isOpen);
+        },
+        middleware: [
+            offset(12),
+            enableFlip && flip({
+                fallbackPlacements: fallbackPositions || void 0,
+                fallbackAxisSideDirection: 'end'
+            }),
+            shift({
+                padding: 8
+            }),
+            showArrow && arrow({
+                element: arrowRef,
+                padding: 8
+            })
+        ].filter(Boolean),
+        whileElementsMounted: autoUpdate
+    });
+    const dismiss = useDismiss(context);
+    const click = useClick(context, {
+        enabled: !openOnHover,
+        event: 'click',
+        stickIfOpen: true
+    });
+    const hover = useHover(context, {
+        enabled: openOnHover
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        dismiss,
+        click,
+        hover
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: className,
+                style: style,
+                ref: (node)=>{
+                    refs.setReference(node);
+                    if ('function' == typeof handleRef) handleRef(node);
+                },
+                ...getReferenceProps({
+                    ...props,
+                    onClick: (e)=>{
+                        if (stopPropagation) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }
+                        onTriggerClick?.(e);
+                    }
+                }),
+                children: children
+            }),
+            showPopover && /*#__PURE__*/ jsx(FloatingPortal, {
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: "fwe-popover-container",
+                    ref: refs.setFloating,
+                    style: floatingStyles,
+                    ...getFloatingProps(),
+                    children: [
+                        showArrow && /*#__PURE__*/ jsx(FloatingArrow, {
+                            ref: arrowRef,
+                            context: context,
+                            fill: "white",
+                            width: 16,
+                            height: 8
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: classnames('fwe-popover', containerClassName),
+                            children: content
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+});
+Popover.displayName = 'Popover';
+export { Popover };

package/dist/components/popovers/popover-menu/PopoverMenu.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import { type PopoverProps } from '../popover/Popover';
+import { type PopoverMenuItemProps } from './popover-menu-item/PopoverMenuItem';
+export interface PopoverMenuProps extends Omit<PopoverProps, 'content' | 'isOpen' | 'onStateChange'> {
+    readonly items: PopoverMenuItemProps[] | ReactNode;
+}
+export declare const PopoverMenu: (props: PopoverMenuProps & {
+    children?: ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/popovers/popover-menu/PopoverMenu.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, useMemo, useState } from "react";
+import { Popover } from "../popover/Popover.js";
+import { PopoverMenuContext } from "./PopoverMenuContext.js";
+import { PopoverMenuItem } from "./popover-menu-item/PopoverMenuItem.js";
+const PopoverMenu = /*#__PURE__*/ forwardRef(({ items, className, containerClassName, children, ...props }, ref)=>{
+    const [showPopoverMenu, setShowPopoverMenu] = useState(false);
+    const isPopoverMenuItemPropsArray = (items)=>Array.isArray(items) && items.length > 0 && 'text' in items[0];
+    let content = null;
+    content = isPopoverMenuItemPropsArray(items) ? items.map((item)=>/*#__PURE__*/ jsx(PopoverMenuItem, {
+            ...item
+        }, item.text)) : items;
+    const popoverMenuContextValue = useMemo(()=>({
+            setShowPopoverMenu: setShowPopoverMenu
+        }), []);
+    return /*#__PURE__*/ jsx(PopoverMenuContext.Provider, {
+        value: popoverMenuContextValue,
+        children: /*#__PURE__*/ jsx(Popover, {
+            className: classnames('fwe-popover-menu-trigger', className),
+            containerClassName: classnames('fwe-popover--menu', containerClassName),
+            content: content,
+            position: "right",
+            isOpen: showPopoverMenu,
+            onChange: setShowPopoverMenu,
+            ref: ref,
+            ...props,
+            children: children
+        })
+    });
+});
+PopoverMenu.displayName = 'PopoverMenu';
+export { PopoverMenu };

package/dist/components/popovers/popover-menu/PopoverMenuContext.d.ts

@@ -0,0 +1,4 @@
+import { type Dispatch, type SetStateAction } from 'react';
+export declare const PopoverMenuContext: import("react").Context<{
+    setShowPopoverMenu: Dispatch<SetStateAction<boolean>>;
+}>;

package/dist/components/popovers/popover-menu/PopoverMenuContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const PopoverMenuContext = createContext({
+    setShowPopoverMenu: ()=>{}
+});
+export { PopoverMenuContext };

package/dist/components/popovers/popover-menu/popover-menu-item/PopoverMenuItem.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export interface PopoverMenuItemProps extends Omit<ComponentPropsWithoutRef<'button'>, 'onClick'> {
+    readonly 'data-testid'?: string;
+    readonly text: string;
+    readonly icon: React.ReactNode;
+    readonly onClick?: (data: unknown) => void;
+    readonly data?: unknown;
+}
+export declare const PopoverMenuItem: (props: PopoverMenuItemProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/dist/components/popovers/popover-menu/popover-menu-item/PopoverMenuItem.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext } from "react";
+import { IconWrapper } from "../../../icon-wrapper/IconWrapper.js";
+import { PopoverMenuContext } from "../PopoverMenuContext.js";
+const PopoverMenuItem = /*#__PURE__*/ forwardRef(({ text, icon, onClick, data, className, ...props }, ref)=>{
+    const { setShowPopoverMenu } = useContext(PopoverMenuContext);
+    function handleClick(e) {
+        e?.preventDefault();
+        e?.stopPropagation();
+        if (setShowPopoverMenu) setShowPopoverMenu(false);
+        if (onClick) onClick(data);
+    }
+    return /*#__PURE__*/ jsxs("button", {
+        type: "button",
+        className: className,
+        onClick: handleClick,
+        ref: ref,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(IconWrapper, {
+                icon: icon
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "fwe-mr-xxs",
+                children: text
+            })
+        ]
+    });
+});
+PopoverMenuItem.displayName = 'PopoverMenuItem';
+export { PopoverMenuItem };

package/dist/components/popovers/tooltip/Tooltip.d.ts

@@ -0,0 +1,6 @@
+import type { PopoverProps } from '../popover/Popover';
+export interface TooltipProps extends Omit<PopoverProps, 'openOnHover'> {
+}
+export declare const Tooltip: (props: TooltipProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/popovers/tooltip/Tooltip.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Popover } from "../popover/Popover.js";
+const Tooltip = /*#__PURE__*/ forwardRef(({ content, children, ...props }, ref)=>/*#__PURE__*/ jsx(Popover, {
+        position: "bottom",
+        openOnHover: true,
+        content: content,
+        ref: ref,
+        ...props,
+        children: children
+    }));
+Tooltip.displayName = 'Tooltip';
+export { Tooltip };

package/dist/components/progress/Progress.d.ts

@@ -0,0 +1,6 @@
+export interface ProgressProps extends React.ComponentPropsWithoutRef<'div'> {
+    readonly progress: number;
+    readonly background?: 'white' | 'black' | 'background';
+    readonly error?: boolean;
+}
+export declare const Progress: (props: ProgressProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/progress/Progress.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+const Progress = /*#__PURE__*/ forwardRef(({ background = 'white', error = false, progress, className, ...props }, ref)=>{
+    const classes = classnames('fwe-progress-bar', {
+        'fwe-bg-red': error
+    }, {
+        'fwe-progress-bar-black': 'black' === background
+    }, {
+        'fwe-progress-bar-background': 'background' === background
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: classnames('fwe-progress', className),
+        ref: ref,
+        ...props,
+        children: /*#__PURE__*/ jsx("div", {
+            className: classes,
+            role: "progressbar",
+            style: {
+                width: `${progress}%`
+            },
+            "aria-valuenow": progress,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-label": "progressbar"
+        })
+    });
+});
+Progress.displayName = 'Progress';
+export { Progress };

package/dist/components/search-input/SearchInput.css

@@ -0,0 +1,25 @@
+.fwe-search-suggestion {
+  height: 40px;
+}
+
+.fwe-search-suggestions {
+  top: unset;
+  left: unset;
+  right: unset;
+  position: static;
+}
+
+.fr-search-input-clear-button {
+  background: none;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: flex;
+}
+
+.fr-search-result-highlight {
+  font-weight: unset;
+  color: var(--fwe-hero, #0091dc);
+}
+

package/dist/components/search-input/SearchInput.d.ts

@@ -0,0 +1,25 @@
+import './SearchInput.scss';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export interface SearchInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'onChange' | 'value' | 'defaultValue' | 'children'> {
+    /** Placeholder text shown in the input. */
+    readonly label?: string;
+    /** Controlled value. */
+    readonly value?: string;
+    /** Initial value for uncontrolled usage. */
+    readonly defaultValue?: string;
+    /** Debounce time in milliseconds before `onChange` fires. Default: 300. */
+    readonly debounceTime?: number;
+    /**
+     * Called after the debounce interval when the user types.
+     * Use this to trigger a search and update the children (suggestions).
+     */
+    readonly onChange?: (value: string) => void;
+    /** Called when the user presses Enter or selects a suggestion. */
+    readonly onSearch?: (value: string) => void;
+    /**
+     * Render search suggestions as children.
+     * Use `<SearchInputOption>` for each item.
+     */
+    readonly children?: ReactNode;
+}
+export declare const SearchInput: (props: SearchInputProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/search-input/SearchInput.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./SearchInput.css";
+import { Combobox, ComboboxButton, ComboboxInput, ComboboxOptions } from "@headlessui/react";
+import classnames from "classnames";
+import { Children, forwardRef, useCallback, useRef } from "react";
+import { useControlled } from "../../utils/useControlled.js";
+const SearchInput = /*#__PURE__*/ forwardRef(({ defaultValue, disabled, label, value: controlledValue, debounceTime = 300, onChange, onSearch, children, className, ...props }, ref)=>{
+    const [innerValue, setInnerValue] = useControlled({
+        controlled: controlledValue,
+        default: defaultValue ?? ''
+    });
+    const debounceRef = useRef(null);
+    const debouncedOnChange = useCallback((val)=>{
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(()=>{
+            onChange?.(val);
+        }, debounceTime);
+    }, [
+        onChange,
+        debounceTime
+    ]);
+    function handleInputChange(event) {
+        const val = event.target.value;
+        setInnerValue(val);
+        debouncedOnChange(val);
+    }
+    function handleSelect(val) {
+        if (null == val) return;
+        setInnerValue(val);
+        onSearch?.(val);
+    }
+    function handleClear() {
+        setInnerValue('');
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        onChange?.('');
+        onSearch?.('');
+    }
+    function handleKeyDown(event) {
+        if ('Enter' === event.key && innerValue) onSearch?.(innerValue);
+        if ('Escape' === event.key) handleClear();
+    }
+    const hasChildren = Children.count(children) > 0;
+    return /*#__PURE__*/ jsx(Combobox, {
+        value: innerValue,
+        onChange: handleSelect,
+        disabled: disabled,
+        immediate: true,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: classnames('fwe-search-input', className),
+            ref: ref,
+            children: [
+                /*#__PURE__*/ jsx(ComboboxInput, {
+                    disabled: disabled,
+                    placeholder: label,
+                    type: "search",
+                    "aria-label": label ?? 'Search',
+                    value: innerValue,
+                    onChange: handleInputChange,
+                    onKeyDown: handleKeyDown,
+                    autoComplete: "off",
+                    ...props
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "fwe-search-icon"
+                }),
+                /*#__PURE__*/ jsx(ComboboxButton, {
+                    className: "fwe-clear-icon fr-search-input-clear-button",
+                    "aria-label": "Clear",
+                    onClick: handleClear
+                }),
+                hasChildren && /*#__PURE__*/ jsx(ComboboxOptions, {
+                    className: "fwe-search-suggestions",
+                    as: "div",
+                    portal: false,
+                    anchor: {
+                        to: 'bottom start',
+                        gap: 4
+                    },
+                    style: {
+                        minWidth: 'var(--input-width)'
+                    },
+                    children: children
+                })
+            ]
+        })
+    });
+});
+SearchInput.displayName = 'SearchInput';
+export { SearchInput };

package/dist/components/search-input/SearchInputOption.d.ts

@@ -0,0 +1,5 @@
+import { type ComboboxOptionProps } from '@headlessui/react';
+export interface SearchInputOptionProps extends Omit<ComboboxOptionProps, 'as'> {
+    readonly value: string;
+}
+export declare const SearchInputOption: (props: SearchInputOptionProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/search-input/SearchInputOption.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { ComboboxOption } from "@headlessui/react";
+import classnames from "classnames";
+import { forwardRef } from "react";
+function SearchInputOptionComponent({ children, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ComboboxOption, {
+        ref: ref,
+        as: "div",
+        className: ({ focus, selected })=>classnames('fwe-search-suggestion', className, {
+                'fwe-selected': focus || selected
+            }),
+        ...props,
+        children: children
+    });
+}
+const SearchInputOption = /*#__PURE__*/ forwardRef(SearchInputOptionComponent);
+SearchInputOption.displayName = 'SearchInputOption';
+export { SearchInputOption };

package/dist/components/search-input/SearchResult.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export interface SearchResultProps extends ComponentPropsWithoutRef<'span'> {
+    /** The full label text to display. */
+    readonly label: string;
+    /** The current search query — matching parts will be highlighted. */
+    readonly query?: string;
+}
+export declare const SearchResult: (props: SearchResultProps & import("react").RefAttributes<HTMLSpanElement>) => React.ReactElement | null;

package/dist/components/search-input/SearchResult.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+function getHighlightedParts(label, query) {
+    if (!query) return [
+        {
+            text: label,
+            highlighted: false
+        }
+    ];
+    const parts = [];
+    const lowerLabel = label.toLowerCase();
+    const lowerQuery = query.toLowerCase();
+    let currentIndex = 0;
+    while(currentIndex < label.length){
+        const matchIndex = lowerLabel.indexOf(lowerQuery, currentIndex);
+        if (-1 === matchIndex) {
+            parts.push({
+                text: label.slice(currentIndex),
+                highlighted: false
+            });
+            break;
+        }
+        if (matchIndex > currentIndex) parts.push({
+            text: label.slice(currentIndex, matchIndex),
+            highlighted: false
+        });
+        parts.push({
+            text: label.slice(matchIndex, matchIndex + query.length),
+            highlighted: true
+        });
+        currentIndex = matchIndex + query.length;
+    }
+    return parts;
+}
+const SearchResult = /*#__PURE__*/ forwardRef(({ label, query = '', className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
+        ref: ref,
+        className: classnames('fr-search-result', className),
+        ...props,
+        children: getHighlightedParts(label, query).map((part, index)=>/*#__PURE__*/ jsx("span", {
+                className: classnames({
+                    'fr-search-result-highlight': part.highlighted
+                }),
+                children: part.text
+            }, `${part.text}-${index}`))
+    }));
+SearchResult.displayName = 'SearchResult';
+export { SearchResult };

package/dist/components/snackbar/Snackbar.css

@@ -0,0 +1,55 @@
+.fr-snackbar-wrapper {
+  opacity: 0;
+  opacity: 1;
+  margin-bottom: 24px;
+}
+
+.fr-snackbar-wrapper-enter-done {
+  opacity: 1;
+  transition: opacity .6s ease-out;
+}
+
+.fr-snackbar-wrapper-exit {
+  opacity: 1;
+  height: 48px;
+}
+
+.fr-snackbar-wrapper-exit-active {
+  opacity: 0;
+  height: 0;
+  margin-bottom: 0;
+  transition: height .3s ease-out .3s, opacity .3s ease-out, margin-bottom .3s ease-out .3s;
+}
+
+.fr-snackbar-wrapper--first {
+  opacity: 1;
+  margin-bottom: 24px;
+  transform: translateY(100px);
+}
+
+.fr-snackbar-wrapper--first-enter-done {
+  opacity: 1;
+  transition: opacity .6s ease-out;
+}
+
+.fr-snackbar-wrapper--first-exit {
+  opacity: 1;
+  height: 48px;
+}
+
+.fr-snackbar-wrapper--first-exit-active {
+  opacity: 0;
+  height: 0;
+  margin-bottom: 0;
+  transition: height .3s ease-out .3s, opacity .3s ease-out, margin-bottom .3s ease-out .3s;
+}
+
+.fr-snackbar-wrapper--first-enter-done {
+  transition: transform .6s ease-out;
+  transform: translateY(0);
+}
+
+.fr-snackbar-wrapper--first-exit-active {
+  transform: translateY(0);
+}
+

package/dist/components/snackbar/Snackbar.d.ts

@@ -0,0 +1,21 @@
+import './Snackbar.scss';
+export interface SnackbarConfig {
+    type?: 'info' | 'warning' | 'error';
+    variant?: 'a' | 'b' | 'c';
+    darkBackground?: boolean;
+    showClose?: boolean;
+    action?: string;
+    disappearAfter?: number | null;
+    key?: string | number;
+    'data-testid'?: string;
+}
+export interface SnackbarData extends SnackbarConfig {
+    text: string;
+}
+export interface SnackbarProps extends React.ComponentPropsWithoutRef<'div'> {
+    readonly data?: SnackbarData;
+    readonly onAction?: () => void;
+    readonly onClose?: () => void;
+    readonly first?: boolean;
+}
+export declare const Snackbar: (props: SnackbarProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/snackbar/Snackbar.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Snackbar.css";
+import classnames from "classnames";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { CSSTransition } from "react-transition-group";
+import { useForkRef } from "../../utils/useForkRef.js";
+const Snackbar = /*#__PURE__*/ forwardRef(({ data, onAction, onClose, first = false, className, ...props }, ref)=>{
+    const [show, setShow] = useState(true);
+    const nodeRef = useRef(null);
+    const handleRef = useForkRef(ref, nodeRef);
+    useEffect(()=>{
+        let disappearAfter = 5000;
+        if (data?.disappearAfter !== null) {
+            if (data?.disappearAfter && data?.disappearAfter > 0) disappearAfter = data?.disappearAfter;
+            const timer = setTimeout(()=>setShow(false), disappearAfter);
+            return ()=>{
+                clearTimeout(timer);
+            };
+        }
+    }, [
+        data
+    ]);
+    function handleClose() {
+        setShow(false);
+    }
+    const classes = first ? 'fr-snackbar-wrapper--first' : 'fr-snackbar-wrapper';
+    return /*#__PURE__*/ jsx(CSSTransition, {
+        nodeRef: nodeRef,
+        onExited: ()=>onClose ? onClose() : void 0,
+        unmountOnExit: true,
+        timeout: {
+            exit: 600
+        },
+        in: show,
+        classNames: classes,
+        appear: true,
+        children: /*#__PURE__*/ jsx("div", {
+            ref: handleRef,
+            className: classnames(classes, className),
+            ...props,
+            children: /*#__PURE__*/ jsxs("div", {
+                className: classnames({
+                    'fwe-snackbar': true,
+                    'fwe-snackbar-b': data?.variant === 'b',
+                    'fwe-snackbar-c': data?.variant === 'c',
+                    'fwe-snackbar-info': data?.type === 'info',
+                    'fwe-snackbar-warning': data?.type === 'warning',
+                    'fwe-snackbar-error': data?.type === 'error',
+                    'fwe-snackbar-shadow': data?.darkBackground
+                }),
+                "data-testid": data?.['data-testid'],
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        children: data?.text
+                    }),
+                    data?.action && /*#__PURE__*/ jsx("button", {
+                        "aria-label": "UserAction",
+                        type: "button",
+                        className: "fwe-snackbar-link-btn",
+                        onClick: ()=>onAction ? onAction() : void 0,
+                        children: data?.action
+                    }),
+                    data?.action && data?.showClose && /*#__PURE__*/ jsx("div", {
+                        className: "fwe-snackbar-separator"
+                    }),
+                    data?.showClose && /*#__PURE__*/ jsx("button", {
+                        "aria-label": "Close",
+                        type: "button",
+                        className: "fwe-snackbar-close-btn",
+                        onClick: handleClose,
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: "fwe-sr-only",
+                            children: "Close"
+                        })
+                    })
+                ]
+            })
+        })
+    });
+});
+Snackbar.displayName = 'Snackbar';
+export { Snackbar };