@rio-cloud/rio-uikit 1.6.1 → 1.7.1

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,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/lib/es/components/banner/Banner.js

@@ -0,0 +1,77 @@
+"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 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, initialAnimation = 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);
+    const shouldReduceMotion = (0, framer_motion_1.useReducedMotion)();
+    const hasAnimation = !shouldReduceMotion && initialAnimation;
+    const contentRef = (0, react_1.useRef)(null);
+    const [contentHeight, setContentHeight] = (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]);
+    // Update height measurement after layout is complete
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    (0, react_1.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 = (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)(framer_motion_1.AnimatePresence, { children: show && ((0, jsx_runtime_1.jsx)(framer_motion_1.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: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, style: { position: 'relative' }, 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: 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 && ((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';

package/lib/es/components/button/Button.js

@@ -17,6 +17,7 @@ exports.STYLES_MAP = {
     DANGER: 'danger',
     SUCCESS: 'success',
     MUTED: 'muted',
+    MUTED_FILLED: 'muted-filled',
 };
 exports.VARIANTS_MAP = {
     VARIANT_LINK: 'link',
@@ -31,7 +32,7 @@ exports.SIZES_MAP = {
     LG: 'lg',
 };
 const Button = (0, react_1.forwardRef)((props, ref) => {
-    const { active = false, disabled = false, asToggle = false, onClick = noop_1.default, bsStyle = 'default', bsSize, variant, iconOnly = false, iconName, iconRight = false, multiline = false, block = false, className = '', noRippleEffect = false, type = 'button', tabIndex = 0, children } = props, remainingProps = tslib_1.__rest(props, ["active", "disabled", "asToggle", "onClick", "bsStyle", "bsSize", "variant", "iconOnly", "iconName", "iconRight", "multiline", "block", "className", "noRippleEffect", "type", "tabIndex", "children"]);
+    const { active = false, disabled = false, asToggle = false, onClick = noop_1.default, bsStyle = 'default', bsSize, variant, iconOnly = false, iconName, iconRight = false, multiline = false, block = false, className = '', noRippleEffect = false, type = 'button', tabIndex = 0, children, ...remainingProps } = props;
     const [isToggled, setIsToggled] = (0, react_1.useState)(active);
     const btnRef = (0, react_1.useRef)(null);
     const buttonRef = (0, useMergeRefs_1.default)(btnRef, ref);
@@ -43,7 +44,6 @@ const Button = (0, react_1.forwardRef)((props, ref) => {
         setPreviousActive(active);
     }
     const handleClick = (event) => {
-        var _a;
         if (!noRippleEffect) {
             (0, buttonEffect_1.createButtonRipple)(event.nativeEvent, event.currentTarget);
         }
@@ -52,7 +52,7 @@ const Button = (0, react_1.forwardRef)((props, ref) => {
             const newIsToggled = !isToggled;
             setIsToggled(newIsToggled);
             if (newIsToggled) {
-                (_a = btnRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+                btnRef.current?.blur();
             }
             onClick(newIsToggled);
         }
@@ -61,7 +61,7 @@ const Button = (0, react_1.forwardRef)((props, ref) => {
         }
     };
     const buttonClassNames = (0, classnames_1.default)('btn', `btn-${bsStyle}`, variant === exports.VARIANTS_MAP.VARIANT_LINK && 'btn-link', variant === exports.VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline', variant === exports.VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline', variant === exports.VARIANTS_MAP.VARIANT_ACTION && 'btn-action', bsSize && `btn-${bsSize}`, asToggle && 'btn-toggle', isToggled && 'active', iconOnly && 'btn-icon-only', iconRight && 'btn-icon-right', multiline && 'btn-multiline', block && 'btn-block', 'btn-component', className);
-    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: buttonRef, type: type }, remainingProps, { className: buttonClassNames, onClick: handleClick, disabled: disabled, tabIndex: tabIndex }, { children: [iconName && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${iconName}` }), children] })));
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, type: type, ...remainingProps, className: buttonClassNames, onClick: handleClick, disabled: disabled, tabIndex: tabIndex, children: [iconName && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${iconName}` }), children] }));
 });
 Object.assign(Button, exports.STYLES_MAP);
 Object.assign(Button, exports.VARIANTS_MAP);

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

@@ -0,0 +1,13 @@
+import { type ComponentProps, type PropsWithChildren } from 'react';
+export type ButtonToolbarProps = ComponentProps<'div'> & {
+    /**
+     * Align buttons to a defined side or set them apart.
+     */
+    alignment?: 'left' | 'right' | 'space-between';
+    /**
+     * Additional classes set to the outer element.
+     */
+    className?: string;
+};
+declare const ButtonToolbar: (props: PropsWithChildren<ButtonToolbarProps>) => import("react/jsx-runtime").JSX.Element;
+export default ButtonToolbar;

package/lib/es/components/button/ButtonToolbar.js

@@ -0,0 +1,11 @@
+"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 ButtonToolbar = (props) => {
+    const { className = '', alignment, children, ...remainingProps } = props;
+    const classes = (0, classnames_1.default)(className, 'btn-toolbar', alignment === 'left' && 'justify-content-start', alignment === 'right' && 'justify-content-end', alignment === 'space-between' && 'justify-content-between');
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: classes, children: children }));
+};
+exports.default = ButtonToolbar;

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

@@ -0,0 +1,12 @@
+import { type PropsWithChildren } from 'react';
+import { type ButtonProps } from './Button';
+export type StepButtonProps = ButtonProps & {
+    /**
+     * Defines the chevron icon for the respective direction.
+     *
+     * @default 'next'
+     */
+    direction?: 'next' | 'previous';
+};
+declare const StepButton: (props: PropsWithChildren<StepButtonProps>) => import("react/jsx-runtime").JSX.Element;
+export default StepButton;

package/lib/es/components/button/StepButton.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = tslib_1.__importDefault(require("./Button"));
+const StepButton = (props) => {
+    const { direction = 'next', ...remainingProps } = props;
+    const iconName = direction === 'next' ? 'rioglyph-chevron-right' : 'rioglyph-chevron-left';
+    return (0, jsx_runtime_1.jsx)(Button_1.default, { ...remainingProps, iconName: iconName, iconRight: direction === 'next' });
+};
+exports.default = StepButton;

package/lib/es/components/button/ToggleButton.js

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const Button_1 = tslib_1.__importDefault(require("./Button"));
 // @ts-ignore - the Button throws TS error due to refs that may be checked at a later point in time
-const ToggleButton = (props) => (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({}, props, { asToggle: true }));
+const ToggleButton = (props) => (0, jsx_runtime_1.jsx)(Button_1.default, { ...props, asToggle: true });
 exports.default = ToggleButton;