@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/lib/es/components/autosuggest/AutoSuggest.js

@@ -30,7 +30,7 @@ const AutoSuggest = (props) => {
         tabIndex: 0,
         value: undefined,
         icon: undefined,
-    }, leadingInputAddons, trailingInputAddons, noItemMessage, dropdownClassName = '', className = '' } = props, remainingProps = tslib_1.__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] = (0, react_1.useState)(false);
     const [value, setValue] = (0, react_1.useState)(inputProps.value || '');
     const [highlightedItemIndex, setHighlightedItemIndex] = (0, react_1.useState)(-1);
@@ -43,7 +43,7 @@ const AutoSuggest = (props) => {
     // This is important for when this component is used as a controlled component
     const externalValue = inputProps.value;
     if (!(0, isNil_1.default)(externalValue) && value !== externalValue) {
-        setValue(externalValue !== null && externalValue !== void 0 ? externalValue : '');
+        setValue(externalValue ?? '');
     }
     // Fetch suggestions on mounting the component by using the external
     // fetch callback
@@ -58,8 +58,7 @@ 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.
     (0, react_1.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
@@ -163,8 +162,7 @@ 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;
@@ -177,11 +175,11 @@ const AutoSuggest = (props) => {
         });
     };
     const renderInput = () => {
-        const { id: inputPropId, icon, value: ignoredExternalValue } = inputProps, remainingInputProps = tslib_1.__rest(inputProps, ["id", "icon", "value"]);
-        const clearableProps = Object.assign({ id: id !== null && id !== void 0 ? id : inputPropId }, remainingInputProps);
-        const input = ((0, jsx_runtime_1.jsx)(ClearableInput_1.default, 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 = ((0, jsx_runtime_1.jsx)(ClearableInput_1.default, { ...clearableProps, ref: inputRef, autoComplete: autoComplete, onChange: handleInputChange, onClear: clearInputValue, onFocus: handleFocus, onClick: openMenu, value: showSelectedItemsInInput ? value : '' }));
         if (icon || leadingInputAddons || trailingInputAddons) {
-            return ((0, jsx_runtime_1.jsx)(AutoSuggestAddons_1.default, Object.assign({ icon: icon, leadingInputAddons: leadingInputAddons, trailingInputAddons: trailingInputAddons }, { children: input })));
+            return ((0, jsx_runtime_1.jsx)(AutoSuggestAddons_1.default, { icon: icon, leadingInputAddons: leadingInputAddons, trailingInputAddons: trailingInputAddons, children: input }));
         }
         return input;
     };
@@ -195,23 +193,22 @@ const AutoSuggest = (props) => {
         if (hasNoSuggestions && !noItemMessage) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ role: 'menu', className: dropdownMenuClasses, ref: dropdownMenuRef }, { children: [hasNoSuggestions && noItemMessage && (0, jsx_runtime_1.jsx)(NoItemMessage_1.default, { message: noItemMessage }, 'NoItemMessage'), suggestions.map((suggestion, index) => {
-                    var _a;
+        return ((0, jsx_runtime_1.jsxs)("ul", { role: 'menu', className: dropdownMenuClasses, ref: dropdownMenuRef, children: [hasNoSuggestions && noItemMessage && (0, jsx_runtime_1.jsx)(NoItemMessage_1.default, { 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 (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { label: suggestion.label }, key);
                     }
                     const renderFunction = renderSuggestion ? renderSuggestion : renderDefaultSuggestion;
                     return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { active: index === highlightedItemIndex, disabled: suggestion.disabled, value: suggestion.customSuggestion ? suggestion.customSuggestion : renderFunction(suggestion), onSelect: (_, event) => onSuggestionClicked(event, suggestion), index: index }, key));
-                })] })));
+                })] }));
     };
     const classes = (0, classnames_1.default)('AutoSuggest', 'dropdown', isOpen && 'open', dropDirection.dropup && 'dropup', className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, onKeyDown: handleKeyDown, ref: componentRef }, { children: [renderInput(), renderDropdownMenu()] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: classes, onKeyDown: handleKeyDown, ref: componentRef, children: [renderInput(), renderDropdownMenu()] }));
 };
 exports.AutoSuggest = AutoSuggest;
 exports.default = exports.AutoSuggest;

package/lib/es/components/autosuggest/AutoSuggestAddons.js

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const AutoSuggestAddons = ({ icon, leadingInputAddons, trailingInputAddons, children, }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'input-group width-100pct' }, { children: [leadingInputAddons && leadingInputAddons, icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true' }) }))), children, trailingInputAddons && trailingInputAddons] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'input-group width-100pct', children: [leadingInputAddons && leadingInputAddons, icon && ((0, jsx_runtime_1.jsx)("span", { className: 'input-group-addon', children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true' }) })), children, trailingInputAddons && trailingInputAddons] }));
 };
 exports.default = AutoSuggestAddons;

package/lib/es/components/autosuggest/DropdownSpinner.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-require("react");
 const Spinner_1 = tslib_1.__importDefault(require("../spinner/Spinner"));
-const DropdownSpinner = ({ className }) => ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: className }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'display-flex justify-content-center padding-10' }, { children: (0, jsx_runtime_1.jsx)(Spinner_1.default, {}) })) })));
+const DropdownSpinner = ({ className }) => ((0, jsx_runtime_1.jsx)("ul", { className: className, children: (0, jsx_runtime_1.jsx)("div", { className: 'display-flex justify-content-center padding-10', children: (0, jsx_runtime_1.jsx)(Spinner_1.default, {}) }) }));
 exports.default = DropdownSpinner;

package/lib/es/components/autosuggest/NoItemMessage.js

@@ -1,7 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
-const NoItemMessage = ({ message }) => ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: 'no-item-message disabled pointer-events-none' }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ role: 'button', href: 'any' }, { children: (0, jsx_runtime_1.jsx)("i", { children: message }) })) })));
+const NoItemMessage = ({ message }) => ((0, jsx_runtime_1.jsx)("li", { className: 'no-item-message disabled pointer-events-none', children: (0, jsx_runtime_1.jsx)("a", { role: 'button', href: 'any', children: (0, jsx_runtime_1.jsx)("i", { children: message }) }) }));
 exports.default = NoItemMessage;

package/lib/es/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/lib/es/components/avatar/Avatar.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const SimpleTooltip_1 = tslib_1.__importDefault(require("../tooltip/SimpleTooltip"));
+const AvatarContent_1 = tslib_1.__importDefault(require("./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 = (0, classnames_1.default)('Avatar', backgroundColor, className);
+    const tooltipContent = tooltip || name;
+    const wrapWithTooltip = (content) => tooltipContent ? ((0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, { 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((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: classes, style: { height: `${size}px` }, children: (0, jsx_runtime_1.jsx)(AvatarContent_1.default, { name: name, abbr: abbr, image: image, alt: alt, iconName: iconName, iconClassName: iconClassName }) }));
+};
+exports.default = Avatar;

package/lib/es/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/lib/es/components/avatar/AvatarContent.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const getInitials = (name = '') => name
+    .split(' ')
+    .map(word => word[0])
+    .join('');
+const AvatarContent = ({ image, name, abbr, alt, iconName = '', iconClassName = '' }) => {
+    if (image) {
+        return (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("span", { className: 'Avatar-initials', style: style, children: initials }));
+    }
+    if (iconName) {
+        return (0, jsx_runtime_1.jsx)("span", { className: `Avatar-icon rioglyph rioglyph-${iconName} ${iconClassName}` });
+    }
+    return null;
+};
+exports.default = AvatarContent;

package/lib/es/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/lib/es/components/avatar/AvatarGroup.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Avatar_1 = tslib_1.__importDefault(require("./Avatar"));
+const AvatarGroup = (props) => {
+    const { maxItemsVisible = 99, className = '', children, ...remainingProps } = props;
+    const avatars = react_1.default.Children.toArray(children);
+    if (avatars.length <= maxItemsVisible) {
+        return (0, jsx_runtime_1.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_1.default.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 ((0, jsx_runtime_1.jsxs)("div", { className: 'AvatarGroup', ...remainingProps, children: [visibleAvatars, (0, jsx_runtime_1.jsx)(Avatar_1.default, { abbr: `+${remainingCount}`, tooltip: (0, jsx_runtime_1.jsx)("div", { children: hiddenNames.map(hiddenName => ((0, jsx_runtime_1.jsx)("div", { children: hiddenName }, hiddenName))) }) })] }));
+};
+exports.default = AvatarGroup;

package/lib/es/components/banner/Banner.d.ts

@@ -0,0 +1,66 @@
+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;
+    /**
+     * 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/lib/es/components/banner/Banner.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const framer_motion_1 = require("framer-motion");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Card_1 = tslib_1.__importDefault(require("../card/Card"));
+const Button_1 = tslib_1.__importDefault(require("../button/Button"));
+const FadeExpander_1 = tslib_1.__importDefault(require("../fade/FadeExpander"));
+const BannerActions_1 = tslib_1.__importDefault(require("./BannerActions"));
+const BannerContent_1 = tslib_1.__importDefault(require("./BannerContent"));
+const BannerIcon_1 = tslib_1.__importDefault(require("./BannerIcon"));
+const BannerPage_1 = tslib_1.__importDefault(require("./BannerPage"));
+const BannerContext = (0, react_1.createContext)(undefined);
+const Banner = (props) => {
+    const { show = true, dismissible = true, onClose = () => { }, pageTimeout = 20_000, showPageNavigation = true, border = true, className = '', children, ...remainingProps } = props;
+    const pages = Array.isArray(children) ? children : [children];
+    const pageAmount = pages.length;
+    const hasMultiplePages = pageAmount > 1;
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: "currentPage" resets interval on manual page change
+    (0, react_1.useEffect)(() => {
+        if (!show || pageAmount === 1) {
+            return;
+        }
+        const interval = setInterval(() => {
+            nextPage();
+        }, pageTimeout);
+        return () => clearInterval(interval);
+    }, [pageAmount, pageTimeout, show, currentPage]);
+    const nextPage = () => {
+        if (hasMultiplePages) {
+            setCurrentPage(prev => (prev + 1) % pageAmount);
+        }
+    };
+    const prevPage = () => {
+        if (hasMultiplePages) {
+            setCurrentPage(prev => (prev - 1 + pageAmount) % pageAmount);
+        }
+    };
+    const cardClasses = (0, classnames_1.default)('Banner display-flex text-color-darker overflow-hidden', 'position-relative', !border && 'border-color-white', className);
+    return ((0, jsx_runtime_1.jsx)(BannerContext.Provider, { value: { nextPage, prevPage }, children: (0, jsx_runtime_1.jsx)(FadeExpander_1.default, { show: show, children: (0, jsx_runtime_1.jsxs)(Card_1.default, { className: cardClasses, padding: 20, ...remainingProps, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex-1-1 overflow-hidden', children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { exitBeforeEnter: true, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, x: 100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -100 }, layout: true, transition: {
+                                        duration: 1.5,
+                                        ease: [0.25, 1, 0.5, 1], // Custom cubic bezier: fast start, slow end
+                                    }, children: pages[currentPage] }, currentPage) }), hasMultiplePages && showPageNavigation && ((0, jsx_runtime_1.jsx)("div", { className: 'margin-5', children: (0, jsx_runtime_1.jsx)("div", { className: 'position-absolute bottom-5', style: { right: '45px' }, children: (0, jsx_runtime_1.jsxs)("div", { className: 'display-flex', children: [(0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'muted', bsSize: 'xs', onClick: prevPage, iconName: 'rioglyph-arrow-left', iconOnly: true }), (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'muted', bsSize: 'xs', onClick: nextPage, iconName: 'rioglyph-arrow-right', iconOnly: true })] }) }) }))] }), dismissible && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'muted', bsSize: 'sm', onClick: onClose, iconName: 'rioglyph-remove', iconOnly: true }) }))] }) }) }));
+};
+Banner.Page = BannerPage_1.default;
+Banner.Icon = BannerIcon_1.default;
+Banner.Content = BannerContent_1.default;
+Banner.Actions = BannerActions_1.default;
+exports.default = Banner;

package/lib/es/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/lib/es/components/banner/BannerActions.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BannerActions = ({ className = '', children, ...remainingProps }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: `BannerActions flex-0 btn-toolbar ${className}`, ...remainingProps, children: children }));
+};
+exports.default = BannerActions;

package/lib/es/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/lib/es/components/banner/BannerContent.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const useResizeObserver_1 = tslib_1.__importDefault(require("../../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 }] = (0, useResizeObserver_1.default)();
+    const containerWidth = inlineSize ?? 0;
+    const contentWithActionClass = (0, classnames_1.default)('flex-1-1', 'BannerContent', 'display-flex gap-15', containerWidth < minWidthBreakpoint ? 'flex-column' : 'flex-row align-items-center', className);
+    if (actions) {
+        return ((0, jsx_runtime_1.jsxs)("div", { ref: contentRef, className: contentWithActionClass, ...remainingProps, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex-1-1 min-width-100', children: [title && (0, jsx_runtime_1.jsx)("div", { className: 'text-size-16 text-medium', children: title }), children] }), actions] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex-1-1', children: [title && (0, jsx_runtime_1.jsx)("div", { className: 'text-size-16 text-medium', children: title }), children] }));
+};
+exports.default = BannerContent;

package/lib/es/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/lib/es/components/banner/BannerIcon.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BannerIcon = ({ className = '', children, ...remainingProps }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: `BannerIcon flex-0 margin-x-5 min-width-25 ${className}`, ...remainingProps, children: children }));
+};
+exports.default = BannerIcon;

package/lib/es/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/lib/es/components/banner/BannerPage.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BannerPage = ({ className = '', children, ...remainingProps }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: `display-flex align-items-start align-items-center-ls width-100pct gap-15 ${className}`, ...remainingProps, children: children }));
+};
+exports.default = BannerPage;

package/lib/es/components/bottomSheet/BottomSheet.d.ts

@@ -1,4 +1,4 @@
-import React, { type MutableRefObject, type PropsWithChildren, type ReactNode } from 'react';
+import { type MutableRefObject, type PropsWithChildren, type ReactElement, type ReactNode } from 'react';
 export type BottomSheetProps = {
     /**
      * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.
@@ -64,5 +64,5 @@ export type BottomSheetProps = {
     /** Additional classes to be set on the wrapping element. */
     className?: string;
 };
-declare const BottomSheet: (props: BottomSheetProps & PropsWithChildren) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const BottomSheet: (props: BottomSheetProps & PropsWithChildren) => ReactElement;
 export default BottomSheet;

package/lib/es/components/bottomSheet/BottomSheet.js

@@ -11,7 +11,7 @@ const portalRoot_1 = require("../../utils/portalRoot");
 const OFFSET_POSITION = -1000;
 const DEFAULT_OFFSET_PX = 15;
 const BottomSheet = (props) => {
-    const { show = false, onClose, width, height, title, detach = false, detachOffset = DEFAULT_OFFSET_PX, hasBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { } } = props, remainingProps = tslib_1.__rest(props, ["show", "onClose", "width", "height", "title", "detach", "detachOffset", "hasBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children", "onBackdropClick"]);
+    const { show = false, onClose, width, height, title, detach = false, detachOffset = DEFAULT_OFFSET_PX, hasBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { }, ...remainingProps } = props;
     const [isShown, setIsShown] = (0, react_1.useState)(show);
     const [isMaxHeight, setIsMaxHeight] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => setIsShown(show), [show]);
@@ -41,7 +41,7 @@ const BottomSheet = (props) => {
     // Unmounting it will lead to losing the reference and breaking the functionality that is implemented on that ref.
     // That is the reason why there is no "AnimatePresence" with an "exit" animation here.
     // Instead, we change the "animate" values.
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, Object.assign({}, remainingProps, { className: sheetClasses, style: {
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { ...remainingProps, className: sheetClasses, style: {
                     width,
                     maxWidth: detach ? `calc(100% - ${DEFAULT_OFFSET_PX * 2}px)` : '100%',
                     margin: detach ? `${DEFAULT_OFFSET_PX}px` : 0,
@@ -50,8 +50,8 @@ const BottomSheet = (props) => {
                     y: 0,
                     bottom: isShown ? 0 : OFFSET_POSITION,
                     height: isShown ? sheetHeight : 0,
-                } }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'bottom-sheet-header' }, { children: [title && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'bottom-sheet-title display-flex justify-content-between padding-15 ' +
-                                    'border border-top-none border-left-none border-right-none border-color-lighter' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-size-18' }, { children: title })) }))), showCloseButton && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'bottom-sheet-close position-absolute top-10 right-10' }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button', className: 'btn btn-muted btn-sm btn-icon-only', onClick: handleToggle }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) })) }))), showMaximizeButton && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'bottom-sheet-maximize height-30 ' +
-                                    'position-absolute top-5 left-50pct translate-x-50 cursor-pointer', onClick: handleMaximize }, { children: (0, jsx_runtime_1.jsx)("div", { className: 'height-5 width-40 rounded bg-lighter' }) })))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: sheetBodyClasses, ref: bodyRef }, { children: isShown && children }))] })), hasBackdrop && isShown && (0, jsx_runtime_1.jsx)("div", { className: 'bottom-sheet-backdrop', onClick: handleBackdropClick })] }), modalRoot);
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'bottom-sheet-header', children: [title && ((0, jsx_runtime_1.jsx)("div", { className: 'bottom-sheet-title display-flex justify-content-between padding-15 ' +
+                                    'border border-top-none border-left-none border-right-none border-color-lighter', children: (0, jsx_runtime_1.jsx)("div", { className: 'text-size-18', children: title }) })), showCloseButton && ((0, jsx_runtime_1.jsx)("div", { className: 'bottom-sheet-close position-absolute top-10 right-10', children: (0, jsx_runtime_1.jsx)("button", { type: 'button', className: 'btn btn-muted btn-sm btn-icon-only', onClick: handleToggle, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) }) })), showMaximizeButton && ((0, jsx_runtime_1.jsx)("div", { className: 'bottom-sheet-maximize height-30 ' +
+                                    'position-absolute top-5 left-50pct translate-x-50 cursor-pointer', onClick: handleMaximize, children: (0, jsx_runtime_1.jsx)("div", { className: 'height-5 width-40 rounded bg-lighter' }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: sheetBodyClasses, ref: bodyRef, children: isShown && children })] }), hasBackdrop && isShown && (0, jsx_runtime_1.jsx)("div", { className: 'bottom-sheet-backdrop', onClick: handleBackdropClick })] }), modalRoot);
 };
 exports.default = BottomSheet;

package/lib/es/components/bottomSheet/TimedBottomSheet.js

@@ -9,7 +9,7 @@ const BottomSheet_1 = tslib_1.__importDefault(require("./BottomSheet"));
 const useTimeout_1 = tslib_1.__importDefault(require("../../hooks/useTimeout"));
 const useLocalStorage_1 = tslib_1.__importDefault(require("../../useLocalStorage"));
 const DEFAULT_SHOW_AFTER = 0; // immediately after mount
-const DEFAULT_HIDE_AFTER = 3600000; // after 1 hour
+const DEFAULT_HIDE_AFTER = 3_600_000; // after 1 hour
 const sanitizeFeatureName = (value) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`.replaceAll(' ', '');
 /**
  * A wrapper component for the BottomSheet that allows to control it's visibility via timers and to use
@@ -43,7 +43,7 @@ const sanitizeFeatureName = (value) => `${value.charAt(0).toUpperCase()}${value.
     );
  */
 const TimedBottomSheet = (props) => {
-    const { dismissed = false, featureName, showAfter = DEFAULT_SHOW_AFTER, hideAfter = DEFAULT_HIDE_AFTER, alwaysOn = false, showCloseButton = true, width, cleanupLocalStorage = false, onClose = noop_1.default, bodyClassName = 'padding-25 margin-right-25', localStoragePrefix = '', className, children } = props, remainingProps = tslib_1.__rest(props, ["dismissed", "featureName", "showAfter", "hideAfter", "alwaysOn", "showCloseButton", "width", "cleanupLocalStorage", "onClose", "bodyClassName", "localStoragePrefix", "className", "children"]);
+    const { dismissed = false, featureName, showAfter = DEFAULT_SHOW_AFTER, hideAfter = DEFAULT_HIDE_AFTER, alwaysOn = false, showCloseButton = true, width, cleanupLocalStorage = false, onClose = noop_1.default, bodyClassName = 'padding-25 margin-right-25', localStoragePrefix = '', className, children, ...remainingProps } = props;
     const [showBottomSheet, setShowBottomSheet] = (0, react_1.useState)(false);
     const [isHiddenByUser, setIsHiddenByUser, removeIsHiddenFlag] = (0, useLocalStorage_1.default)(`${localStoragePrefix}hide${sanitizeFeatureName(featureName)}`, false);
     // In case the visibility is controlled by the outside, means the user clicked on the
@@ -75,7 +75,7 @@ const TimedBottomSheet = (props) => {
         setIsHiddenByUser(true);
         onClose();
     };
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { children: (0, jsx_runtime_1.jsx)(BottomSheet_1.default, Object.assign({ show: showBottomSheet, width: width, detach: true, showCloseButton: showCloseButton, onClose: handleCloseBottomSheet, className: className, bodyClassName: bodyClassName }, { children: children })) })));
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, children: (0, jsx_runtime_1.jsx)(BottomSheet_1.default, { show: showBottomSheet, width: width, detach: true, showCloseButton: showCloseButton, onClose: handleCloseBottomSheet, className: className, bodyClassName: bodyClassName, children: children }) }));
 };
 exports.TimedBottomSheet = TimedBottomSheet;
 exports.default = exports.TimedBottomSheet;

package/lib/es/components/button/Button.d.ts

@@ -9,6 +9,7 @@ export declare const STYLES_MAP: {
     readonly DANGER: "danger";
     readonly SUCCESS: "success";
     readonly MUTED: "muted";
+    readonly MUTED_FILLED: "muted-filled";
 };
 export type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;
 export declare const VARIANTS_MAP: {
@@ -131,6 +132,7 @@ type ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElem
     DANGER: 'danger';
     SUCCESS: 'success';
     MUTED: 'muted';
+    MUTED_FILLED: 'muted-filled';
     VARIANT_LINK: 'link';
     VARIANT_LINK_INLINE: 'link-inline';
     VARIANT_OUTLINE: 'outline';