@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/components/autosuggest/AutoSuggest.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: <explanation>
+import { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash/fp/isEmpty';
+import isNil from 'lodash/fp/isNil';
+import noop from 'lodash/fp/noop';
+import ClearableInput from '../clearableInput/ClearableInput';
+import { scrollItemIntoView, UP, DOWN } from '../../utils/scrollItemIntoView';
+import { useDropDirection } from '../../utils/useDropDirection';
+import DropdownHeader from '../selects/DropdownHeader';
+import MenuItem from '../menuItems/MenuItem';
+import useClickOutside from '../../hooks/useClickOutside';
+import AutoSuggestAddons from './AutoSuggestAddons';
+import DropdownSpinner from './DropdownSpinner';
+import NoItemMessage from './NoItemMessage';
+export const AutoSuggest = (props) => {
+    const { id, onSuggestionSelected = noop, onSuggestionsFetchRequested = noop, onSuggestionHighlighted = noop, renderSuggestion, customSuggestionKey, getSuggestionValue, suggestions = [], autoDropDirection = true, pullRight = false, dropup = false, isLoading = false, openOnFocus = false, closeOnSelect = true, showSelectedItemsInInput = true, autoComplete = 'off', inputProps = {
+        id,
+        disabled: false,
+        onChange: noop,
+        onClear: noop,
+        onBlur: noop,
+        onFocus: noop,
+        placeholder: 'Start typing',
+        hasError: false,
+        tabIndex: 0,
+        value: undefined,
+        icon: undefined,
+    }, leadingInputAddons, trailingInputAddons, noItemMessage, dropdownClassName = '', className = '', ...remainingProps } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(inputProps.value || '');
+    const [highlightedItemIndex, setHighlightedItemIndex] = useState(-1);
+    const [direction, setDirection] = useState(DOWN);
+    const componentRef = useClickOutside(() => closeMenu());
+    const dropdownMenuRef = useRef(null);
+    const inputRef = useRef(null);
+    const optionNodesRef = useRef([]);
+    // Update internal value state from outside when external input value is given.
+    // This is important for when this component is used as a controlled component
+    const externalValue = inputProps.value;
+    if (!isNil(externalValue) && value !== externalValue) {
+        setValue(externalValue ?? '');
+    }
+    // Fetch suggestions on mounting the component by using the external
+    // fetch callback
+    useEffect(() => onSuggestionsFetchRequested({ value }), []);
+    // When a new suggestion is highlighted it may be not in view as the dropdown menu
+    // has an overflow and can scroll. In this case, we need to scroll to the highlighted suggestion
+    // so the user can see it
+    useEffect(() => {
+        const focusedItem = getFocusedOptionNode();
+        scrollItemIntoView(direction, dropdownMenuRef.current, focusedItem);
+    }, [highlightedItemIndex, direction]);
+    // Used to store the list item reference to allow highlighting a single node.
+    // Update that list of nodes again when the suggestions change from the outside.
+    useEffect(() => {
+        const optionNodes = Array.from(dropdownMenuRef.current?.getElementsByTagName('li') || []);
+        optionNodesRef.current = optionNodes;
+    }, [suggestions]);
+    // Overwrite position of dropdown menu in case auto drop is enabled
+    const dropDirection = useDropDirection({ pullRight, dropup, autoDropDirection, dropdownMenuRef }, [suggestions]);
+    const openMenu = () => {
+        if (isOpen) {
+            return;
+        }
+        setIsOpen(true);
+    };
+    const closeMenu = () => {
+        setIsOpen(false);
+    };
+    const handleFocus = (event) => {
+        if (openOnFocus) {
+            openMenu();
+        }
+        if (inputProps.onFocus) {
+            inputProps.onFocus(event);
+        }
+    };
+    const handleKeyDown = (event) => {
+        switch (event.key) {
+            case 'ArrowDown': {
+                // select below on arrow down key
+                const newHighlightedIndex = highlightedItemIndex + 1;
+                if (isOpen && suggestions.length > newHighlightedIndex) {
+                    setHighlightedItemIndex(newHighlightedIndex);
+                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));
+                    setDirection(DOWN);
+                }
+                return;
+            }
+            case 'ArrowUp':
+                // select above on arrow up key
+                if (isOpen && highlightedItemIndex > 0) {
+                    const newHighlightedIndex = highlightedItemIndex - 1;
+                    setHighlightedItemIndex(newHighlightedIndex);
+                    handleHighlightedSuggestionChanged(Number(newHighlightedIndex));
+                    setDirection(UP);
+                }
+                return;
+            case 'Enter':
+                // select on enter
+                if (isOpen && suggestions[highlightedItemIndex]) {
+                    onSuggestionClicked(event, suggestions[highlightedItemIndex]);
+                }
+                else {
+                    openMenu();
+                }
+                break;
+            case 'Escape':
+            case 'Tab':
+                // close on esc key or on tab
+                closeMenu();
+                break;
+            default:
+                break;
+        }
+    };
+    const getFocusedOptionNode = () => {
+        return [...optionNodesRef.current].find((item) => item.className.includes('active'));
+    };
+    const handleInputChange = (newValue, event) => {
+        if (value !== newValue) {
+            updateInputValue(newValue, event);
+        }
+    };
+    const updateInputValue = (newValue, event, shouldCloseMenu = false) => {
+        const closeMenuEventually = shouldCloseMenu ? false : isOpen;
+        setIsOpen(!isOpen ? true : closeMenuEventually);
+        setValue(newValue);
+        setHighlightedItemIndex(-1);
+        // Fire callback so the parent component can filter the suggestions accordingly
+        onSuggestionsFetchRequested({ value: newValue });
+        handleHighlightedSuggestionChanged(-1);
+        // Trigger onChange callback to notify usage component only when value has actually changed
+        const { value: newExternalValue, onChange = () => { } } = inputProps;
+        if (newValue !== newExternalValue) {
+            onChange(event, { newValue });
+        }
+    };
+    const handleHighlightedSuggestionChanged = (currentHighlightedItemIndex) => {
+        const currentHighlightedSuggestion = currentHighlightedItemIndex === -1 ? null : suggestions[currentHighlightedItemIndex];
+        onSuggestionHighlighted(currentHighlightedSuggestion);
+    };
+    const clearInputValue = (event) => {
+        setValue('');
+        setHighlightedItemIndex(-1);
+        // Focus the input field after clearing it's value in order to allow
+        // entering new values right away
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+        // Reset filter value so all suggestions are shown again
+        onSuggestionsFetchRequested({ value: '' });
+        handleHighlightedSuggestionChanged(-1);
+        // Additionally, fire the onClear callback as the service may react on it
+        if (inputProps.onClear) {
+            inputProps.onClear(event);
+        }
+    };
+    const getDefaultSuggestionValue = (suggestion) => {
+        return suggestion.label ?? suggestion[customSuggestionKey ?? ''] ?? '';
+    };
+    const onSuggestionClicked = (event, suggestion) => {
+        const getSuggestionValueFunction = getSuggestionValue ? getSuggestionValue : getDefaultSuggestionValue;
+        const suggestionValue = getSuggestionValueFunction(suggestion);
+        updateInputValue(suggestionValue, event, closeOnSelect);
+        // fire callback with the selected item
+        onSuggestionSelected(event, {
+            suggestion,
+            suggestionValue,
+        });
+    };
+    const renderInput = () => {
+        const { id: inputPropId, icon, value: ignoredExternalValue, ...remainingInputProps } = inputProps;
+        const clearableProps = { id: id ?? inputPropId, ...remainingInputProps };
+        const input = (_jsx(ClearableInput, { ...clearableProps, ref: inputRef, autoComplete: autoComplete, onChange: handleInputChange, onClear: clearInputValue, onFocus: handleFocus, onClick: openMenu, value: showSelectedItemsInInput ? value : '' }));
+        if (icon || leadingInputAddons || trailingInputAddons) {
+            return (_jsx(AutoSuggestAddons, { icon: icon, leadingInputAddons: leadingInputAddons, trailingInputAddons: trailingInputAddons, children: input }));
+        }
+        return input;
+    };
+    const renderDefaultSuggestion = (suggestion) => suggestion.label;
+    const renderDropdownMenu = () => {
+        const dropdownMenuClasses = classNames('dropdown-menu', dropDirection.pullRight && 'pull-right', dropdownClassName);
+        if (isLoading) {
+            return _jsx(DropdownSpinner, { className: dropdownMenuClasses });
+        }
+        const hasNoSuggestions = isEmpty(suggestions);
+        if (hasNoSuggestions && !noItemMessage) {
+            return null;
+        }
+        return (_jsxs("ul", { role: 'menu', className: dropdownMenuClasses, ref: dropdownMenuRef, children: [hasNoSuggestions && noItemMessage && _jsx(NoItemMessage, { message: noItemMessage }, 'NoItemMessage'), suggestions.map((suggestion, index) => {
+                    // In case a custom renderer is used but the customSuggestionKey is not set, throw an error
+                    if (renderSuggestion && !suggestion.label && !customSuggestionKey) {
+                        throw new Error('The "customSuggestionKey" need to be set when using a custom renderer ' +
+                            'and not using the "label" prop for suggestions');
+                    }
+                    const key = `index-${suggestion.label ?? suggestion[customSuggestionKey ?? '']}`;
+                    if (suggestion.header && suggestion.label) {
+                        return _jsx(DropdownHeader, { label: suggestion.label }, key);
+                    }
+                    const renderFunction = renderSuggestion ? renderSuggestion : renderDefaultSuggestion;
+                    return (_jsx(MenuItem, { active: index === highlightedItemIndex, disabled: suggestion.disabled, value: suggestion.customSuggestion ? suggestion.customSuggestion : renderFunction(suggestion), onSelect: (_, event) => onSuggestionClicked(event, suggestion), index: index }, key));
+                })] }));
+    };
+    const classes = classNames('AutoSuggest', 'dropdown', isOpen && 'open', dropDirection.dropup && 'dropup', className);
+    return (_jsxs("div", { ...remainingProps, className: classes, onKeyDown: handleKeyDown, ref: componentRef, children: [renderInput(), renderDropdownMenu()] }));
+};
+export default AutoSuggest;

package/src/components/autosuggest/AutoSuggestAddons.d.ts

@@ -0,0 +1,8 @@
+import React, { type PropsWithChildren } from 'react';
+export type AutoSuggestAddonsProps = {
+    icon?: string;
+    leadingInputAddons?: React.ReactNode[];
+    trailingInputAddons?: React.ReactNode[];
+};
+declare const AutoSuggestAddons: ({ icon, leadingInputAddons, trailingInputAddons, children, }: PropsWithChildren<AutoSuggestAddonsProps>) => import("react/jsx-runtime").JSX.Element;
+export default AutoSuggestAddons;

package/src/components/autosuggest/AutoSuggestAddons.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AutoSuggestAddons = ({ icon, leadingInputAddons, trailingInputAddons, children, }) => {
+    return (_jsxs("div", { className: 'input-group width-100pct', children: [leadingInputAddons && leadingInputAddons, icon && (_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true' }) })), children, trailingInputAddons && trailingInputAddons] }));
+};
+export default AutoSuggestAddons;

package/src/components/autosuggest/DropdownSpinner.d.ts

@@ -0,0 +1,4 @@
+declare const DropdownSpinner: ({ className }: {
+    className: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DropdownSpinner;

package/src/components/autosuggest/DropdownSpinner.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Spinner from '../spinner/Spinner';
+const DropdownSpinner = ({ className }) => (_jsx("ul", { className: className, children: _jsx("div", { className: 'display-flex justify-content-center padding-10', children: _jsx(Spinner, {}) }) }));
+export default DropdownSpinner;

package/src/components/autosuggest/NoItemMessage.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const NoItemMessage: ({ message }: {
+    message: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default NoItemMessage;

package/src/components/autosuggest/NoItemMessage.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const NoItemMessage = ({ message }) => (_jsx("li", { className: 'no-item-message disabled pointer-events-none', children: _jsx("a", { role: 'button', href: 'any', children: _jsx("i", { children: message }) }) }));
+export default NoItemMessage;

package/src/components/avatar/Avatar.d.ts

@@ -0,0 +1,54 @@
+import { type ComponentProps } from 'react';
+export type AvatarProps = ComponentProps<'div'> & {
+    /**
+     * When a name is provided, the Avatar automatically generates and displays the initials of that name.
+     * The name also appears in a tooltip when hovered over.
+     */
+    name?: string;
+    /**
+     * The abbreviation can also be defined manually. It is recommended to limit abbreviations
+     * to a maximum of 2 to 3 characters.
+     */
+    abbr?: string;
+    /**
+     * The image to be shown. When an image is displayed, the abbreviation is not shown.
+     */
+    image?: string;
+    /**
+     * The image alt text. If not given, the name will be used.
+     */
+    alt?: string;
+    /**
+     * The name of an icon that should be shown instead of initials. If nothing is provided,
+     * a default icon will be shown.
+     *
+     * @default 'user'
+     */
+    iconName?: string;
+    /**
+     * The height and width of the component.
+     *
+     * @default 40
+     */
+    size?: number;
+    /**
+     * The background color for the component. By default, the text and icon color is derived from the background color.
+     *
+     * @default 'bg-lighter'
+     */
+    backgroundColor?: string;
+    /**
+     * The content of the Avatars tooltip. if nothing is provided, the name is used.
+     */
+    tooltip?: string | JSX.Element;
+    /**
+     * Additional classes set to the icon element.
+     */
+    iconClassName?: string;
+    /**
+     * Additional classes set to the wrapper element.
+     */
+    className?: string;
+};
+declare const Avatar: (props: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default Avatar;

package/src/components/avatar/Avatar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import SimpleTooltip from '../tooltip/SimpleTooltip';
+import AvatarContent from './AvatarContent';
+const TOOLTIP_SHOW_TIMEOUT_IN_MS = 100;
+const TOOLTIP_HIDE_TIMEOUT_IN_MS = 0;
+const Avatar = (props) => {
+    const { name, abbr, image, alt, iconName = 'user', size = 40, backgroundColor = 'bg-lighter', tooltip, iconClassName, className = '', ...remainingProps } = props;
+    const classes = classNames('Avatar', backgroundColor, className);
+    const tooltipContent = tooltip || name;
+    const wrapWithTooltip = (content) => tooltipContent ? (_jsx(SimpleTooltip, { content: tooltipContent, placement: 'bottom', delay: { show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }, popperConfig: {
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, 5],
+                    },
+                },
+                {
+                    name: 'arrow',
+                    options: {},
+                },
+            ],
+        }, children: content })) : (content);
+    return wrapWithTooltip(_jsx("div", { ...remainingProps, className: classes, style: { height: `${size}px` }, children: _jsx(AvatarContent, { name: name, abbr: abbr, image: image, alt: alt, iconName: iconName, iconClassName: iconClassName }) }));
+};
+export default Avatar;

package/src/components/avatar/AvatarContent.d.ts

@@ -0,0 +1,10 @@
+type AvatarContentProps = {
+    image?: string;
+    name?: string;
+    abbr?: string;
+    alt?: string;
+    iconName?: string;
+    iconClassName?: string;
+};
+declare const AvatarContent: ({ image, name, abbr, alt, iconName, iconClassName }: AvatarContentProps) => import("react/jsx-runtime").JSX.Element | null;
+export default AvatarContent;

package/src/components/avatar/AvatarContent.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const getInitials = (name = '') => name
+    .split(' ')
+    .map(word => word[0])
+    .join('');
+const AvatarContent = ({ image, name, abbr, alt, iconName = '', iconClassName = '' }) => {
+    if (image) {
+        return _jsx("img", { src: image, alt: alt || name || 'avatar', className: 'Avatar-image', draggable: false });
+    }
+    if (abbr || name) {
+        const initials = abbr || getInitials(name);
+        const style = initials.length > 2 ? { letterSpacing: '-0.2px' } : {};
+        return (_jsx("span", { className: 'Avatar-initials', style: style, children: initials }));
+    }
+    if (iconName) {
+        return _jsx("span", { className: `Avatar-icon rioglyph rioglyph-${iconName} ${iconClassName}` });
+    }
+    return null;
+};
+export default AvatarContent;

package/src/components/avatar/AvatarGroup.d.ts

@@ -0,0 +1,15 @@
+import { type PropsWithChildren } from 'react';
+export type AvatarGroupProps = {
+    /**
+     * Maximum number of items to be shown. Items that overflow are grouped into a single
+     * Avatar that displays the overflow count. Collapsed names are shown inside a tooltip.
+     * By default all items are shown.
+     */
+    maxItemsVisible?: number;
+    /**
+     * Additional classes set to the outer element.
+     */
+    className?: string;
+};
+declare const AvatarGroup: (props: PropsWithChildren<AvatarGroupProps>) => import("react/jsx-runtime").JSX.Element;
+export default AvatarGroup;

package/src/components/avatar/AvatarGroup.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Avatar from './Avatar';
+const AvatarGroup = (props) => {
+    const { maxItemsVisible = 99, className = '', children, ...remainingProps } = props;
+    const avatars = React.Children.toArray(children);
+    if (avatars.length <= maxItemsVisible) {
+        return _jsx("div", { className: 'AvatarGroup', children: avatars });
+    }
+    const visibleAvatars = avatars.slice(0, maxItemsVisible - 1);
+    const hiddenAvatars = avatars.slice(maxItemsVisible - 1);
+    const remainingCount = avatars.length - maxItemsVisible + 1;
+    const hiddenNames = hiddenAvatars
+        .map(avatar => {
+        if (React.isValidElement(avatar) && 'props' in avatar && 'name' in avatar.props) {
+            return avatar.props.name;
+        }
+        return ''; // Handle cases where the avatar doesn't have a name
+    })
+        .filter(Boolean); // Remove empty strings
+    return (_jsxs("div", { className: 'AvatarGroup', ...remainingProps, children: [visibleAvatars, _jsx(Avatar, { abbr: `+${remainingCount}`, tooltip: _jsx("div", { children: hiddenNames.map(hiddenName => (_jsx("div", { children: hiddenName }, hiddenName))) }) })] }));
+};
+export default AvatarGroup;

package/src/components/banner/Banner.d.ts

@@ -0,0 +1,72 @@
+import { type ReactNode, type PropsWithChildren } from 'react';
+type BannerProps = {
+    /**
+     * Defines if the content is shown or not.
+     *
+     * @default true
+     */
+    show: boolean;
+    /**
+     * Defines if a close button is shown or not. You can still add a custom
+     * CTA button to the content that handles visibility.
+     *
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Callback when the close button is clicked.
+     *
+     * @returns
+     */
+    onClose?: () => void;
+    /**
+     * Defines the time when the next page is shown in milliseconds.
+     *
+     * @default 20_000
+     */
+    pageTimeout?: number;
+    /**
+     * Defines if the page navigation buttons shall be shown or not.
+     *
+     * @default true
+     */
+    showPageNavigation?: boolean;
+    /**
+     * Defines if a border is shown or not. When placed on a white background, please disable the border
+     * so it looks better.
+     *
+     * @default true
+     */
+    border?: boolean;
+    /**
+     * Enables or disables initial animation.
+     *
+     * @default true
+     */
+    initialAnimation?: boolean;
+    /**
+     * Additional classname added to the wrapper element.
+     */
+    className?: string;
+    /**
+     * The actual banner content. Wrap your content in a <Banner.Page> component.
+     *
+     * When having multiple pages, usa an array of <Banner.Page> components.
+     */
+    children: ReactNode | ReactNode[];
+};
+declare const Banner: {
+    (props: BannerProps): import("react/jsx-runtime").JSX.Element;
+    Page: ({ className, children, ...remainingProps }: PropsWithChildren<{
+        className?: string;
+    }>) => import("react/jsx-runtime").JSX.Element;
+    Icon: ({ className, children, ...remainingProps }: PropsWithChildren<import("./BannerIcon").BannerIconProps>) => import("react/jsx-runtime").JSX.Element;
+    Content: (props: PropsWithChildren<Partial<Pick<HTMLDivElement, "id">> & {
+        title?: string | React.ReactElement;
+        actions?: React.ReactElement;
+        minWidthBreakpoint?: number;
+        className?: string;
+    }>) => import("react/jsx-runtime").JSX.Element;
+    Actions: ({ className, children, ...remainingProps }: PropsWithChildren<import("./BannerActions").BannerActionsProps>) => import("react/jsx-runtime").JSX.Element;
+};
+export default Banner;

package/src/components/banner/Banner.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, createContext, useRef } from 'react';
+import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
+import classNames from 'classnames';
+import Card from '../card/Card';
+import Button from '../button/Button';
+import BannerPageActions from './BannerActions';
+import BannerPageContent from './BannerContent';
+import BannerPageIcon from './BannerIcon';
+import BannerPage from './BannerPage';
+const BannerContext = createContext(undefined);
+const Banner = (props) => {
+    const { show = true, dismissible = true, onClose = () => { }, pageTimeout = 20_000, showPageNavigation = true, border = true, initialAnimation = true, className = '', children, ...remainingProps } = props;
+    const pages = Array.isArray(children) ? children : [children];
+    const pageAmount = pages.length;
+    const hasMultiplePages = pageAmount > 1;
+    const [currentPage, setCurrentPage] = useState(0);
+    const shouldReduceMotion = useReducedMotion();
+    const hasAnimation = !shouldReduceMotion && initialAnimation;
+    const contentRef = useRef(null);
+    const [contentHeight, setContentHeight] = useState(0);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: "currentPage" resets interval on manual page change
+    useEffect(() => {
+        if (!show || pageAmount === 1) {
+            return;
+        }
+        const interval = setInterval(() => {
+            nextPage();
+        }, pageTimeout);
+        return () => clearInterval(interval);
+    }, [pageAmount, pageTimeout, show, currentPage]);
+    // Update height measurement after layout is complete
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => {
+        if (!contentRef.current) {
+            return;
+        }
+        // Use ResizeObserver to get accurate measurements after layout
+        const resizeObserver = new ResizeObserver(entries => {
+            const entry = entries[0];
+            if (entry) {
+                // Use getBoundingClientRect for most accurate height
+                const height = entry.target.getBoundingClientRect().height;
+                setContentHeight(height);
+            }
+        });
+        resizeObserver.observe(contentRef.current);
+        return () => resizeObserver.disconnect();
+    }, [show, currentPage]);
+    const nextPage = () => {
+        if (hasMultiplePages) {
+            setCurrentPage(prev => (prev + 1) % pageAmount);
+        }
+    };
+    const prevPage = () => {
+        if (hasMultiplePages) {
+            setCurrentPage(prev => (prev - 1 + pageAmount) % pageAmount);
+        }
+    };
+    const cardClasses = classNames('Banner display-flex text-color-darker overflow-hidden', 'position-relative', !border && 'border-color-white', className);
+    return (_jsx(BannerContext.Provider, { value: { nextPage, prevPage }, children: _jsx(AnimatePresence, { children: show && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: contentHeight, opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
+                    height: { duration: 0.2 },
+                    opacity: { duration: 0.2 },
+                    ease: 'easeInOut',
+                }, children: _jsx("div", { ref: contentRef, style: { position: 'relative' }, children: _jsxs(Card, { className: cardClasses, padding: 20, ...remainingProps, children: [_jsxs("div", { className: 'flex-1-1 overflow-hidden', children: [_jsx(AnimatePresence, { exitBeforeEnter: true, children: _jsx(motion.div, { initial: hasAnimation ? { opacity: 0, x: 100 } : false, animate: { opacity: 1, x: 0 }, exit: hasAnimation ? { opacity: 0, x: -100 } : undefined, transition: {
+                                                duration: 1.5,
+                                                ease: [0.25, 1, 0.5, 1],
+                                            }, children: pages[currentPage] }, currentPage) }), hasMultiplePages && showPageNavigation && (_jsx("div", { className: 'margin-5', children: _jsx("div", { className: 'position-absolute bottom-5', style: { right: '45px' }, children: _jsxs("div", { className: 'display-flex', children: [_jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: prevPage, iconName: 'rioglyph-arrow-left', iconOnly: true }), _jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: nextPage, iconName: 'rioglyph-arrow-right', iconOnly: true })] }) }) }))] }), dismissible && (_jsx("div", { className: 'flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls', children: _jsx(Button, { bsStyle: 'muted', bsSize: 'sm', onClick: onClose, iconName: 'rioglyph-remove', iconOnly: true }) }))] }) }) })) }) }));
+};
+Banner.Page = BannerPage;
+Banner.Icon = BannerPageIcon;
+Banner.Content = BannerPageContent;
+Banner.Actions = BannerPageActions;
+export default Banner;

package/src/components/banner/BannerActions.d.ts

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+export type BannerActionsProps = {
+    /**
+     * Additional classname added to the wrapper element.
+     */
+    className?: string;
+};
+declare const BannerActions: ({ className, children, ...remainingProps }: PropsWithChildren<BannerActionsProps>) => import("react/jsx-runtime").JSX.Element;
+export default BannerActions;

package/src/components/banner/BannerActions.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const BannerActions = ({ className = '', children, ...remainingProps }) => {
+    return (_jsx("div", { className: `BannerActions flex-0 btn-toolbar ${className}`, ...remainingProps, children: children }));
+};
+export default BannerActions;

package/src/components/banner/BannerContent.d.ts

@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react';
+type BannerContentProps = Partial<Pick<HTMLDivElement, 'id'>> & {
+    /**
+     * The title for the banner.
+     */
+    title?: string | React.ReactElement;
+    /**
+     * Use this to add the banner call-to-action buttons. Wrap them in a <Banner.Actions> component.
+     */
+    actions?: React.ReactElement;
+    /**
+     * Breakpoint in pixels where the action buttons are placed under the banner text.
+     *
+     * On larger screens, the buttons are next to the text.
+     *
+     * @default 400
+     */
+    minWidthBreakpoint?: number;
+    /**
+     * Additional classname added to the wrapper element.
+     */
+    className?: string;
+};
+declare const BannerContent: (props: PropsWithChildren<BannerContentProps>) => import("react/jsx-runtime").JSX.Element;
+export default BannerContent;

package/src/components/banner/BannerContent.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import useResizeObserver from '../../useResizeObserver';
+const DEFAULT_MIN_WIDTH_BREAKPOINT = 400;
+const BannerContent = (props) => {
+    const { title, actions, children, minWidthBreakpoint = DEFAULT_MIN_WIDTH_BREAKPOINT, className = '', ...remainingProps } = props;
+    // Check size of the container for responsive breakpoints
+    const [contentRef, _, { inlineSize }] = useResizeObserver();
+    const containerWidth = inlineSize ?? 0;
+    const contentWithActionClass = classNames('flex-1-1', 'BannerContent', 'display-flex gap-15', containerWidth < minWidthBreakpoint ? 'flex-column' : 'flex-row align-items-center', className);
+    if (actions) {
+        return (_jsxs("div", { ref: contentRef, className: contentWithActionClass, ...remainingProps, children: [_jsxs("div", { className: 'flex-1-1 min-width-100', children: [title && _jsx("div", { className: 'text-size-16 text-medium', children: title }), children] }), actions] }));
+    }
+    return (_jsxs("div", { className: 'flex-1-1', children: [title && _jsx("div", { className: 'text-size-16 text-medium', children: title }), children] }));
+};
+export default BannerContent;

package/src/components/banner/BannerIcon.d.ts

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+export type BannerIconProps = {
+    /**
+     * Additional classname added to the wrapper element.
+     */
+    className?: string;
+};
+declare const BannerIcon: ({ className, children, ...remainingProps }: PropsWithChildren<BannerIconProps>) => import("react/jsx-runtime").JSX.Element;
+export default BannerIcon;

package/src/components/banner/BannerIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const BannerIcon = ({ className = '', children, ...remainingProps }) => {
+    return (_jsx("div", { className: `BannerIcon flex-0 margin-x-5 min-width-25 ${className}`, ...remainingProps, children: children }));
+};
+export default BannerIcon;

package/src/components/banner/BannerPage.d.ts

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+type BannerPageProps = {
+    /**
+     * Additional classname added to the wrapper element.
+     */
+    className?: string;
+};
+declare const BannerPage: ({ className, children, ...remainingProps }: PropsWithChildren<BannerPageProps>) => import("react/jsx-runtime").JSX.Element;
+export default BannerPage;

package/src/components/banner/BannerPage.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const BannerPage = ({ className = '', children, ...remainingProps }) => {
+    return (_jsx("div", { className: `display-flex align-items-start align-items-center-ls width-100pct gap-15 ${className}`, ...remainingProps, children: children }));
+};
+export default BannerPage;