@rio-cloud/rio-uikit 1.6.1 → 1.7.1

package/components/assetTree/TreeSummary.js

@@ -11,6 +11,6 @@ const DefaultAssetCounts = ({ assetCounts }) => {
 const TreeSummary = React.memo((props) => {
     const { className = '', assetCounts = {}, gridCols, children } = props;
     const classes = classNames('TreeSummary', 'display-flex flex-wrap', 'align-items-center', 'gap-10', 'padding-left-3', className);
-    return (_jsx("div", Object.assign({ className: classes }, { children: children || (_jsx(TreeSummaryRow, Object.assign({ gridCols: gridCols }, { children: _jsx(DefaultAssetCounts, { assetCounts: assetCounts }) }))) })));
+    return (_jsx("div", { className: classes, children: children || (_jsx(TreeSummaryRow, { gridCols: gridCols, children: _jsx(DefaultAssetCounts, { assetCounts: assetCounts }) })) }));
 });
 export default TreeSummary;

package/components/assetTree/TreeSummaryRow.js

@@ -1,5 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
-export const TreeSummaryRow = ({ gridCols = 4, children }) => (_jsx("div", Object.assign({ className: `TreeSummaryRow display-grid grid-cols-${gridCols} gap-10` }, { children: children })));
+export const TreeSummaryRow = ({ gridCols = 4, children }) => (_jsx("div", { className: `TreeSummaryRow display-grid grid-cols-${gridCols} gap-10`, children: children }));
 export default TreeSummaryRow;

package/components/assetTree/TypeCounter.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import { forwardRef, useRef } from 'react';
@@ -7,7 +6,7 @@ import noop from 'lodash/fp/noop';
 import useHover from '../../hooks/useHover';
 import mergeRefs from '../../utils/mergeRefs';
 const TypeCounter = forwardRef((props, ref) => {
-    const { icon, value, isActive, hasFilter = false, enableActivity = false, onClick = noop, type, hideOnZero = false } = props, remainingProps = __rest(props, ["icon", "value", "isActive", "hasFilter", "enableActivity", "onClick", "type", "hideOnZero"]);
+    const { icon, value, isActive, hasFilter = false, enableActivity = false, onClick = noop, type, hideOnZero = false, ...remainingProps } = props;
     const internalRef = useRef(null);
     const mergedRef = mergeRefs([ref, internalRef]);
     const isHover = useHover(internalRef);
@@ -17,6 +16,6 @@ const TypeCounter = forwardRef((props, ref) => {
     if (hideOnZero && !value) {
         return null;
     }
-    return (_jsxs("div", Object.assign({ ref: mergedRef }, remainingProps, { className: wrapperClassName, onClick: handleClick }, { children: [_jsx("span", { className: `rioglyph rioglyph-${icon} text-size-16 margin-right-2` }), _jsx("span", Object.assign({ className: counterClassNames }, { children: value || 0 }))] })));
+    return (_jsxs("div", { ref: mergedRef, ...remainingProps, className: wrapperClassName, onClick: handleClick, children: [_jsx("span", { className: `rioglyph rioglyph-${icon} text-size-16 margin-right-2` }), _jsx("span", { className: counterClassNames, children: value || 0 })] }));
 });
 export default TypeCounter;

package/components/assetTree/treeReducer.js

@@ -13,21 +13,21 @@ export const emptyGroupsChanged = (payload) => ({ type: 'emptyGroupsChanged', pa
 export const treeReducer = (state, action) => {
     switch (action.type) {
         case 'assetCounted':
-            return Object.assign(Object.assign({}, state), { assetCounts: action.payload });
+            return { ...state, assetCounts: action.payload };
         case 'allCheckedChanged':
-            return Object.assign(Object.assign({}, state), { allChecked: action.payload });
+            return { ...state, allChecked: action.payload };
         case 'searchValueChanged':
-            return Object.assign(Object.assign({}, state), { searchValue: action.payload, allChecked: false });
+            return { ...state, searchValue: action.payload, allChecked: false };
         case 'flatItemsChanged':
-            return Object.assign(Object.assign({}, state), { flatItems: action.payload });
+            return { ...state, flatItems: action.payload };
         case 'groupedItemsChanged':
-            return Object.assign(Object.assign({}, state), { groupedItems: action.payload });
+            return { ...state, groupedItems: action.payload };
         case 'typeFilterChanged':
-            return Object.assign(Object.assign({}, state), { typeFilter: action.payload });
+            return { ...state, typeFilter: action.payload };
         case 'visibleTypeCountersChanged':
-            return Object.assign(Object.assign({}, state), { visibleTypeCounters: action.payload });
+            return { ...state, visibleTypeCounters: action.payload };
         case 'emptyGroupsChanged':
-            return Object.assign(Object.assign({}, state), { emptyGroups: action.payload });
+            return { ...state, emptyGroups: action.payload };
         default:
             invariant(false, 'Unknown action type in tree reducer');
     }

package/components/assetTree/treeUtils.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="lodash" />
-/// <reference types="lodash" />
 import type { TreeItem, TreeGroup, GroupedItems } from './Tree';
 export declare const notEqual: (value: any, other: any) => boolean;
 export declare const notEmpty: (value?: any) => boolean;

package/components/assetTree/treeUtils.js

@@ -23,12 +23,9 @@ const isNameObject = (item) => isObject(item.name);
 export const getFullName = (item) => `${item.name.firstName} ${item.name.lastName}`;
 const getName = (item) => (isNameObject(item) ? getFullName(item) : item.name);
 const orderByName = orderBy([
-    (item) => {
-        var _a;
-        return isNameObject(item)
-            ? item.name.lastName.toLowerCase()
-            : ((_a = item.name.toLowerCase()) !== null && _a !== void 0 ? _a : '');
-    },
+    (item) => isNameObject(item)
+        ? item.name.lastName.toLowerCase()
+        : (item.name.toLowerCase() ?? ''),
 ], ['asc']);
 // TODO: extend to use provided external search function instead?
 const filterByName = (searchValue) => (item) => {
@@ -46,23 +43,29 @@ export const sortGroupsByName = (groups) => {
     const sortableGroups = {};
     mapValues((group) => {
         if (group.position === 'last') {
-            fixedGroups[group.id] = Object.assign({}, group);
+            fixedGroups[group.id] = { ...group };
         }
         else {
-            sortableGroups[group.id] = Object.assign({}, group);
+            sortableGroups[group.id] = { ...group };
         }
     })(groups);
     const sortedGroups = orderByName(sortableGroups);
-    return isEmpty(fixedGroups) ? sortedGroups : Object.assign(Object.assign({}, sortedGroups), fixedGroups);
+    return isEmpty(fixedGroups) ? sortedGroups : { ...sortedGroups, ...fixedGroups };
 };
 export const sortGroupItemsByName = (groups) => {
-    return mapValues((group) => (Object.assign(Object.assign({}, group), { items: orderByName(group.items) })))(groups);
+    return mapValues((group) => ({
+        ...group,
+        items: orderByName(group.items),
+    }))(groups);
 };
 export const getMappedItemsToGroups = (groups, items) => {
     const mappedGroups = {};
     // build an object for listing the groups by id
     groups.forEach(group => {
-        mappedGroups[group.id] = Object.assign(Object.assign({}, group), { items: [] });
+        mappedGroups[group.id] = {
+            ...group,
+            items: [],
+        };
     });
     items.forEach(item => {
         // add items to the respective group

package/components/autosuggest/AutoSuggest.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
@@ -27,7 +26,7 @@ export const AutoSuggest = (props) => {
         tabIndex: 0,
         value: undefined,
         icon: undefined,
-    }, leadingInputAddons, trailingInputAddons, noItemMessage, dropdownClassName = '', className = '' } = props, remainingProps = __rest(props, ["id", "onSuggestionSelected", "onSuggestionsFetchRequested", "onSuggestionHighlighted", "renderSuggestion", "customSuggestionKey", "getSuggestionValue", "suggestions", "autoDropDirection", "pullRight", "dropup", "isLoading", "openOnFocus", "closeOnSelect", "showSelectedItemsInInput", "autoComplete", "inputProps", "leadingInputAddons", "trailingInputAddons", "noItemMessage", "dropdownClassName", "className"]);
+    }, leadingInputAddons, trailingInputAddons, noItemMessage, dropdownClassName = '', className = '', ...remainingProps } = props;
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState(inputProps.value || '');
     const [highlightedItemIndex, setHighlightedItemIndex] = useState(-1);
@@ -40,7 +39,7 @@ export const AutoSuggest = (props) => {
     // This is important for when this component is used as a controlled component
     const externalValue = inputProps.value;
     if (!isNil(externalValue) && value !== externalValue) {
-        setValue(externalValue !== null && externalValue !== void 0 ? externalValue : '');
+        setValue(externalValue ?? '');
     }
     // Fetch suggestions on mounting the component by using the external
     // fetch callback
@@ -55,8 +54,7 @@ export const AutoSuggest = (props) => {
     // 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(() => {
-        var _a;
-        const optionNodes = Array.from(((_a = dropdownMenuRef.current) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('li')) || []);
+        const optionNodes = Array.from(dropdownMenuRef.current?.getElementsByTagName('li') || []);
         optionNodesRef.current = optionNodes;
     }, [suggestions]);
     // Overwrite position of dropdown menu in case auto drop is enabled
@@ -160,8 +158,7 @@ export const AutoSuggest = (props) => {
         }
     };
     const getDefaultSuggestionValue = (suggestion) => {
-        var _a, _b;
-        return (_b = (_a = suggestion.label) !== null && _a !== void 0 ? _a : suggestion[customSuggestionKey !== null && customSuggestionKey !== void 0 ? customSuggestionKey : '']) !== null && _b !== void 0 ? _b : '';
+        return suggestion.label ?? suggestion[customSuggestionKey ?? ''] ?? '';
     };
     const onSuggestionClicked = (event, suggestion) => {
         const getSuggestionValueFunction = getSuggestionValue ? getSuggestionValue : getDefaultSuggestionValue;
@@ -174,11 +171,11 @@ export const AutoSuggest = (props) => {
         });
     };
     const renderInput = () => {
-        const { id: inputPropId, icon, value: ignoredExternalValue } = inputProps, remainingInputProps = __rest(inputProps, ["id", "icon", "value"]);
-        const clearableProps = Object.assign({ id: id !== null && id !== void 0 ? id : inputPropId }, remainingInputProps);
-        const input = (_jsx(ClearableInput, Object.assign({}, clearableProps, { ref: inputRef, autoComplete: autoComplete, onChange: handleInputChange, onClear: clearInputValue, onFocus: handleFocus, onClick: openMenu, value: showSelectedItemsInInput ? value : '' })));
+        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, Object.assign({ icon: icon, leadingInputAddons: leadingInputAddons, trailingInputAddons: trailingInputAddons }, { children: input })));
+            return (_jsx(AutoSuggestAddons, { icon: icon, leadingInputAddons: leadingInputAddons, trailingInputAddons: trailingInputAddons, children: input }));
         }
         return input;
     };
@@ -192,22 +189,21 @@ export const AutoSuggest = (props) => {
         if (hasNoSuggestions && !noItemMessage) {
             return null;
         }
-        return (_jsxs("ul", Object.assign({ role: 'menu', className: dropdownMenuClasses, ref: dropdownMenuRef }, { children: [hasNoSuggestions && noItemMessage && _jsx(NoItemMessage, { message: noItemMessage }, 'NoItemMessage'), suggestions.map((suggestion, index) => {
-                    var _a;
+        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-${(_a = suggestion.label) !== null && _a !== void 0 ? _a : suggestion[customSuggestionKey !== null && customSuggestionKey !== void 0 ? customSuggestionKey : '']}`;
+                    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", Object.assign({}, remainingProps, { className: classes, onKeyDown: handleKeyDown, ref: componentRef }, { children: [renderInput(), renderDropdownMenu()] })));
+    return (_jsxs("div", { ...remainingProps, className: classes, onKeyDown: handleKeyDown, ref: componentRef, children: [renderInput(), renderDropdownMenu()] }));
 };
 export default AutoSuggest;

package/components/autosuggest/AutoSuggestAddons.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 const AutoSuggestAddons = ({ icon, leadingInputAddons, trailingInputAddons, children, }) => {
-    return (_jsxs("div", Object.assign({ className: 'input-group width-100pct' }, { children: [leadingInputAddons && leadingInputAddons, icon && (_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true' }) }))), children, trailingInputAddons && trailingInputAddons] })));
+    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/components/autosuggest/DropdownSpinner.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import 'react';
 import Spinner from '../spinner/Spinner';
-const DropdownSpinner = ({ className }) => (_jsx("ul", Object.assign({ className: className }, { children: _jsx("div", Object.assign({ className: 'display-flex justify-content-center padding-10' }, { children: _jsx(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/components/autosuggest/NoItemMessage.js

@@ -1,5 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
-const NoItemMessage = ({ message }) => (_jsx("li", Object.assign({ className: 'no-item-message disabled pointer-events-none' }, { children: _jsx("a", Object.assign({ role: 'button', href: 'any' }, { children: _jsx("i", { children: message }) })) })));
+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/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/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/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/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/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/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/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/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/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/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/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/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/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/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;