@rio-cloud/rio-uikit 1.11.0 → 1.12.0

package/src/components/sidebars/SidebarFooter.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const SidebarFooter = ({ footer, className = '' }) => {
+    if (!footer) {
+        return null;
+    }
+    const footerClassNames = classNames('SidebarFooter', className);
+    return _jsx("div", { className: footerClassNames, children: footer });
+};
+export default SidebarFooter;

package/src/components/sidebars/SidebarFullscreenToggle.d.ts

@@ -0,0 +1,7 @@
+export type SidebarFullscreenToggleProps = {
+    isFullscreen?: boolean;
+    tooltip?: string;
+    onClick?: VoidFunction;
+};
+declare const SidebarFullscreenToggle: ({ isFullscreen, tooltip, onClick }: SidebarFullscreenToggleProps) => import("react/jsx-runtime").JSX.Element;
+export default SidebarFullscreenToggle;

package/src/components/sidebars/SidebarFullscreenToggle.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
+import Button from '../button/Button';
+import SimpleTooltip from '../tooltip/SimpleTooltip';
+const SidebarFullscreenToggle = ({ isFullscreen, tooltip, onClick = noop }) => {
+    const fullscreenIconClasses = classNames('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
+    const button = (_jsx(Button, { bsStyle: Button.MUTED, iconOnly: true, onClick: onClick, "data-testid": 'sidebarFullscreenToggle', children: _jsx("span", { className: fullscreenIconClasses }) }));
+    if (tooltip) {
+        return (_jsx(SimpleTooltip, { content: tooltip, placement: 'bottom', children: button }));
+    }
+    return button;
+};
+export default SidebarFullscreenToggle;

package/src/components/slider/RangeSlider.d.ts

@@ -0,0 +1,60 @@
+import React, { type HTMLAttributes } from 'react';
+import { type CurrentColor } from '../../utils/currentColors';
+export type RangeSliderProps = {
+    /**
+     * The current left value of the selected range.
+     */
+    leftValue?: number;
+    /**
+     * The current right value of the selected range.
+     */
+    rightValue?: number;
+    /**
+     * The lower limit.
+     *
+     * @default 0
+     */
+    minValue: number;
+    /**
+     * The upper limit.
+     *
+     * @default Number.MAX_VALUE
+     */
+    maxValue: number;
+    /**
+     * Whether to show the value labels.
+     *
+     * @default false
+     */
+    valueLabels?: boolean;
+    /**
+     * Additional unit used for the slider value labels.
+     */
+    valueLabelUnit?: string | React.ReactNode;
+    /**
+     * Selector step value.
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Defines the color of the slider.
+     *
+     * @default 'primary'
+     */
+    color?: CurrentColor;
+    /**
+     * Disables all pointer events.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    onChange?: (newLeftValue: number, newRightValue: number) => void;
+    onDragEnd?: (newLeftValue: number, newRightValue: number) => void;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;
+declare const RangeSlider: (props: RangeSliderProps) => import("react/jsx-runtime").JSX.Element;
+export default RangeSlider;

package/src/components/slider/RangeSlider.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/noop';
+import { getCurrentBackgroundColor } from '../../utils/currentColors';
+const getRangeValues = (valueLeft, valueRight) => {
+    const finalLeftValue = valueRight <= valueLeft ? valueRight : valueLeft;
+    const finalRightValue = valueLeft >= valueRight ? valueLeft : valueRight;
+    return [finalLeftValue, finalRightValue];
+};
+const RangeSlider = (props) => {
+    const { minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, step = 1, color = 'primary', leftValue, rightValue, className, disabled = false, onChange = noop, onDragEnd = noop, ...remainingProps } = props;
+    const [activeLeft, setActiveLeft] = useState(false);
+    const [activeRight, setActiveRight] = useState(false);
+    const [valueLeft, setValueLeft] = useState(leftValue ? leftValue : minValue);
+    const [valueRight, setValueRight] = useState(rightValue ? rightValue : maxValue);
+    const [isChangingLeft, setIsChangingLeft] = useState(false);
+    const [isChangingRight, setIsChangingRight] = useState(false);
+    useEffect(() => {
+        if (valueLeft >= minValue && valueLeft <= maxValue && valueRight >= minValue && valueRight <= maxValue) {
+            setValueLeft(valueLeft);
+            setValueRight(valueRight);
+        }
+    }, [valueLeft, valueRight, minValue, maxValue]);
+    const changeValues = (newValues) => {
+        const newValueLeft = newValues.valueLeft ? newValues.valueLeft : valueLeft;
+        const newValueRight = newValues.valueRight ? newValues.valueRight : valueRight;
+        setValueLeft(newValueLeft);
+        setValueRight(newValueRight);
+        setIsChangingLeft(!!newValues.valueLeft);
+        setIsChangingRight(!!newValues.valueRight);
+        const [newLeftValue, newRightValue] = getRangeValues(newValueLeft, newValueRight);
+        onChange(newLeftValue, newRightValue);
+    };
+    const handleChangeValueLeft = (event) => {
+        changeValues({ valueLeft: Number.parseInt(event.target.value, 10) });
+    };
+    const handleChangeValueRight = (event) => {
+        changeValues({ valueRight: Number.parseInt(event.target.value, 10) });
+    };
+    const onMouseDownLeft = () => {
+        setIsChangingLeft(true);
+        setIsChangingRight(false);
+    };
+    const onMouseDownRight = () => {
+        setIsChangingLeft(false);
+        setIsChangingRight(true);
+    };
+    const getTrackMiddlePosition = (targetWidth) => {
+        const trackValueLeftRelative = (valueLeft - minValue) / (maxValue - minValue);
+        const trackValueRightRelative = (valueRight - minValue) / (maxValue - minValue);
+        const trackMiddleRelative = (trackValueLeftRelative + trackValueRightRelative) / 2;
+        return trackMiddleRelative * targetWidth;
+    };
+    const onMouseMoveLeft = (event) => {
+        const target = event.target;
+        if (!isChangingLeft) {
+            const clientRect = target.getBoundingClientRect();
+            const mouseHover = event.clientX - clientRect.left;
+            const targetWidth = target.offsetWidth;
+            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);
+            if (valueRight > valueLeft && mouseHover > trackMiddlePosition) {
+                setActiveLeft(false);
+                setActiveRight(true);
+            }
+            if (valueRight < valueLeft && mouseHover < trackMiddlePosition) {
+                setActiveLeft(false);
+                setActiveRight(true);
+            }
+        }
+    };
+    const onMouseMoveRight = (event) => {
+        const target = event.target;
+        if (!isChangingRight) {
+            const clientRect = target.getBoundingClientRect();
+            const mouseHover = event.clientX - clientRect.left;
+            const targetWidth = target.offsetWidth;
+            const trackMiddlePosition = getTrackMiddlePosition(targetWidth);
+            if (valueRight > valueLeft && mouseHover < trackMiddlePosition) {
+                setActiveLeft(true);
+                setActiveRight(false);
+            }
+            if (valueRight < valueLeft && mouseHover > trackMiddlePosition) {
+                setActiveLeft(true);
+                setActiveRight(false);
+            }
+        }
+    };
+    const onMouseUpLeft = () => {
+        setIsChangingLeft(false);
+        setIsChangingRight(false);
+        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);
+        onDragEnd(newLeftValue, newRightValue);
+    };
+    const onMouseUpRight = () => {
+        setIsChangingLeft(false);
+        setIsChangingRight(false);
+        const [newLeftValue, newRightValue] = getRangeValues(valueLeft, valueRight);
+        onDragEnd(newLeftValue, newRightValue);
+    };
+    const [finalLeftValue, finalRightValue] = getRangeValues(valueLeft, valueRight);
+    const trackWidth = (100 * (finalRightValue - finalLeftValue)) / (maxValue - minValue);
+    const trackLeft = (100 * (finalLeftValue - minValue)) / (maxValue - minValue);
+    const wrapperClassNames = classNames('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', className && className);
+    const sliderBackgroundColor = getCurrentBackgroundColor(color);
+    return (_jsxs("div", { ...remainingProps, className: wrapperClassNames, style: { color: sliderBackgroundColor }, children: [_jsx("div", { className: 'range-whole-track' }), _jsx("div", { className: 'range-track', style: { width: `${trackWidth}%`, left: `${trackLeft}%` }, children: valueLabels && (_jsxs("div", { className: 'user-select-none', children: [_jsx("div", { className: 'range-value', children: _jsx("span", { children: valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue }) }), _jsx("div", { className: 'range-value', children: _jsx("span", { children: valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue }) })] })) }), _jsx("input", { className: `${isChangingLeft ? 'changing' : ''}`, style: { zIndex: activeLeft ? '6' : '5' }, value: valueLeft, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueLeft, onMouseDown: onMouseDownLeft, onMouseMove: onMouseMoveLeft, onMouseUp: onMouseUpLeft }), _jsx("input", { className: `${isChangingRight ? 'changing' : ''}`, style: { zIndex: activeRight ? '6' : '5' }, value: valueRight, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueRight, onMouseDown: onMouseDownRight, onMouseMove: onMouseMoveRight, onMouseUp: onMouseUpRight })] }));
+};
+export default RangeSlider;

package/src/components/slider/Slider.d.ts

@@ -0,0 +1,76 @@
+import React, { type HTMLAttributes } from 'react';
+import { type CurrentColor } from '../../utils/currentColors';
+export type SliderProps = {
+    /**
+     * The current value.
+     *
+     * @default 0
+     */
+    value?: number;
+    /**
+     * The lower limit.
+     *
+     * @default 0
+     */
+    minValue?: number;
+    /**
+     * The upper limit.
+     *
+     * @default Number.MAX_VALUE
+     */
+    maxValue?: number;
+    /**
+     * Whether to show the value labels.
+     *
+     * @default false
+     */
+    valueLabels?: boolean;
+    /**
+     * Additional unit used for the slider value label.
+     */
+    valueLabelUnit?: string | React.ReactNode;
+    /**
+     * Whether to hide the dark-colored value bar.
+     *
+     * @default false
+     */
+    hideValueBar?: boolean;
+    /**
+     * Whether to show larger value labels instead of the normal ones.
+     *
+     * @default false
+     */
+    largeValueLabels?: boolean;
+    /**
+     * Selector step value.
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Defines the color of the slider.
+     *
+     * @default 'primary'
+     */
+    color?: CurrentColor;
+    /**
+     * Disables all pointer events.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback to get the new value every time it changes.
+     */
+    onChange?: (newValue: number) => void;
+    /**
+     * Callback to get the value after the slider ended dragging.
+     */
+    onDragEnd?: (newValue: number) => void;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'disabled' | 'onChange' | 'onDragEnd' | 'className'>;
+declare const Slider: (props: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export default Slider;

package/src/components/slider/Slider.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/noop';
+import { getCurrentBackgroundColor } from '../../utils/currentColors';
+const Slider = (props) => {
+    const { value = 0, minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, largeValueLabels = false, hideValueBar = false, color = 'primary', step = 1, onChange = noop, onDragEnd = noop, className, disabled = false, ...remainingProps } = props;
+    const [currentValue, setCurrentValue] = useState(value ? value : minValue);
+    const [isChanging, setIsChanging] = useState(false);
+    useEffect(() => {
+        if (value >= minValue && value <= maxValue) {
+            setCurrentValue(value);
+        }
+    }, [value, minValue, maxValue]);
+    const handleChange = (event) => {
+        const newValue = Number.parseInt(event.target.value, 10);
+        setCurrentValue(newValue);
+        setIsChanging(true);
+        onChange(newValue);
+    };
+    const onMouseUp = () => {
+        setIsChanging(false);
+        onDragEnd(currentValue);
+    };
+    const onMouseDown = () => {
+        setIsChanging(true);
+    };
+    const wrapperClassNames = classNames('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', hideValueBar && 'hide-value-bar', largeValueLabels && 'large-value-labels', className && className);
+    const trackWidth = (100 * (currentValue - minValue)) / (maxValue - minValue);
+    const sliderBackgroundColor = getCurrentBackgroundColor(color);
+    return (_jsxs("div", { ...remainingProps, className: wrapperClassNames, style: { color: sliderBackgroundColor }, children: [_jsx("div", { className: 'range-whole-track' }), _jsx("div", { className: 'range-track', style: { width: `${trackWidth}%` }, children: valueLabels && (_jsx("div", { className: 'range-value', children: _jsx("span", { children: valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue }) })) }), _jsx("input", { className: `${isChanging ? 'changing' : ''}`, value: currentValue, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChange, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] }));
+};
+export default Slider;

package/src/components/smoothScrollbars/SmoothScrollbars.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export type SmoothScrollbarsProps = {
+    slideIn?: boolean;
+    largeTrack?: boolean;
+    trackOffset?: boolean;
+    className?: string;
+    tagName?: string;
+    autoHeight?: boolean;
+    autoHeightMin?: number;
+    autoHeightMax?: number;
+    onScroll?: (event: React.UIEvent<any> | undefined) => void;
+    style?: React.CSSProperties;
+};
+declare const SmoothScrollbars: React.ForwardRefExoticComponent<SmoothScrollbarsProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<any>>;
+export default SmoothScrollbars;

package/src/components/smoothScrollbars/SmoothScrollbars.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+import { forwardRef, useEffect, useImperativeHandle, useRef, } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
+import debounce from 'lodash/fp/debounce';
+const RESIZE_THROTTLING = 100;
+const SmoothScrollbars = forwardRef((componentProps, ref) => {
+    const { slideIn = false, largeTrack = false, trackOffset = false, className = '', onScroll = noop, tagName = 'div', autoHeight = false, autoHeightMin = 0, autoHeightMax = 200, children, style, ...remainingProps } = componentProps;
+    const scrollbarsRef = useRef(null);
+    const contentRef = useRef(null);
+    useImperativeHandle(ref, () => scrollbarsRef.current);
+    useEffect(() => {
+        if (!contentRef.current || !scrollbarsRef.current) {
+            return;
+        }
+        const updateScrollbars = debounce(RESIZE_THROTTLING)(() => {
+            if (scrollbarsRef.current) {
+                // Trigger a update for the scrollbars.
+                // This is needed since the lib does not automatically update on content height changes
+                // See: https://github.com/RobPethick/react-custom-scrollbars-2/issues/12
+                // Use type assertion to tell TypeScript that 'update' exists
+                scrollbarsRef.current.update();
+            }
+        });
+        const resizeObserver = new ResizeObserver(updateScrollbars);
+        resizeObserver.observe(contentRef.current);
+        return () => {
+            resizeObserver.disconnect();
+            updateScrollbars.cancel();
+        };
+    }, []);
+    const wrapperClassNames = classNames(className, slideIn && 'scrollbar-fly-in', 'smooth-scrollbar-wrapper');
+    const renderTrackVerticalNames = classNames('scrollbar-track-vertical', largeTrack && 'scrollbar-track-size-large', trackOffset && 'scrollbar-track-offset');
+    const renderThumbVerticalNames = classNames('scrollbar-thumb-vertical', largeTrack && 'scrollbar-thumb-size-large');
+    const renderTrackHorizontalNames = classNames('scrollbar-track-horizontal', largeTrack && 'scrollbar-track-size-large', trackOffset && 'scrollbar-track-offset');
+    const renderThumbHorizontalNames = classNames('scrollbar-thumb-horizontal', largeTrack && 'scrollbar-thumb-size-large');
+    return (_jsx(Scrollbars, { ...remainingProps, ref: scrollbarsRef, tagName: tagName, onScroll: onScroll, className: wrapperClassNames, hideTracksWhenNotNeeded: true, autoHeight: autoHeight, autoHeightMin: autoHeightMin, autoHeightMax: autoHeightMax, renderView: props => {
+            return _jsx("div", { ...props, className: 'scrollbar-view' });
+        }, renderTrackVertical: props => {
+            return _jsx("div", { ...props, className: renderTrackVerticalNames });
+        }, renderThumbVertical: props => {
+            return _jsx("div", { ...props, className: renderThumbVerticalNames });
+        }, renderTrackHorizontal: props => {
+            return _jsx("div", { ...props, className: renderTrackHorizontalNames });
+        }, renderThumbHorizontal: props => {
+            return _jsx("div", { ...props, className: renderThumbHorizontalNames });
+        }, children: _jsx("div", { className: 'scrollbar-content-wrapper', ref: contentRef, children: children }) }));
+});
+export default SmoothScrollbars;

package/src/components/spinner/Spinner.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+export interface SpinnerProps {
+    /**
+     * Defines whether the spinner is shown on bright or dark background.
+     *
+     * @default false
+     */
+    isInverse?: boolean;
+    /**
+     * If set to "true" the spinner will be rendered twice as big.
+     *
+     * @default false
+     */
+    isDoubleSized?: boolean;
+    /**
+     * Renders the spinner as overlay in full-size mode.
+     *
+     * This will be relative to the parent container. Set the parent element to "position-relative" in this case.
+     *
+     * @default false
+     */
+    isFullSized?: boolean;
+    /**
+     * Renders the spinner in fullscreen mode, relative to the body.
+     *
+     * @default false
+     */
+    isFullScreen?: boolean;
+    /**
+     * Renders the spinner without centered wrapper.
+     *
+     * @default false
+     */
+    isInline?: boolean;
+    /**
+     * Flag to control the visibility of the spinner.
+     *
+     * Only relevant in combination with {@link isFullSized} or {@link isFullScreen}.
+     *
+     * @default false
+     */
+    show?: boolean;
+    /**
+     * The text shown next to the spinner icon.
+     */
+    text?: string | React.ReactNode;
+}
+declare const Spinner: (props: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export default Spinner;

package/src/components/spinner/Spinner.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import Fade from '../fade/Fade';
+const BaseSpinner = (props) => {
+    const { isInverse, isDoubleSized, ...remainingProps } = props;
+    const className = classNames('spinner', { inverse: isInverse, double: isDoubleSized });
+    return (_jsxs("div", { ...remainingProps, className: className, children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] }));
+};
+const Spinner = (props) => {
+    const { isInverse = false, isFullSized = false, isFullScreen = false, isDoubleSized = false, isInline = false, show = false, text, ...remainingProps } = props;
+    const baseSpinner = _jsx(BaseSpinner, { isDoubleSized: isDoubleSized, isInverse: isInverse, ...remainingProps });
+    if (isInline) {
+        return baseSpinner;
+    }
+    const classes = classNames(['spinnerInfoBox', 'display-flex', 'justify-content-center', 'align-items-center', 'height-100pct'], { fullsized: isFullSized, fullscreen: isFullScreen });
+    const wrappedSpinner = (_jsxs("div", { className: classes, children: [baseSpinner, text && _jsx("div", { className: 'spinnerText', children: text })] }));
+    if (isFullScreen || isFullSized) {
+        return (_jsx(Fade, { show: show, duration: 0.1, children: wrappedSpinner }));
+    }
+    return wrappedSpinner;
+};
+export default Spinner;

package/src/components/states/BaseStateProps.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import type { TextAlignment } from '../../values/TextAlignment';
+import type { StateButtonProps } from './StateButton';
+import type { StateIconProps } from './StateIcon';
+export type BaseStateProps = {
+    /**
+     * The icon to be shown.
+     *
+     * Default icons are defined for all states.
+     */
+    icon?: string;
+    /**
+     * List of icons to show instead a single icon.
+     *
+     * @default []
+     */
+    icons?: StateIconProps[];
+    /**
+     * Custom Image if needed.
+     */
+    image?: React.ReactNode;
+    /**
+     * The headline to be shown.
+     */
+    headline?: string | React.ReactNode;
+    /**
+     * The text to display.
+     */
+    message?: string | React.ReactNode;
+    /**
+     * Definitions for the buttons to show.
+     *
+     * @default []
+     */
+    buttons?: StateButtonProps[];
+    /**
+     * Defines whether to use 100% width or default width.
+     *
+     * Note: Only to be used for special cases on the CustomState component.
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Smaller icon and headline size.
+     *
+     * @default false
+     */
+    condensed?: boolean;
+    /**
+     * Defines where the panel is aligned.
+     *
+     * Possible values are: 'left', 'center' and 'right'.
+     *
+     * @default 'center'
+     */
+    alignment?: TextAlignment;
+    /**
+     * Optional class names for the wrapper.
+     */
+    outerClassName?: string;
+    /**
+     * Optional class names for the content.
+     */
+    innerClassName?: string;
+};

package/src/components/states/BaseStateProps.js

@@ -0,0 +1 @@
+export {};

package/src/components/states/CustomState.d.ts

@@ -0,0 +1,5 @@
+import { type PropsWithChildren } from 'react';
+import type { BaseStateProps } from './BaseStateProps';
+export type CustomStateProps = BaseStateProps;
+declare const CustomState: (props: PropsWithChildren<CustomStateProps>) => import("react/jsx-runtime").JSX.Element;
+export default CustomState;

package/src/components/states/CustomState.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from 'classnames';
+import isEmpty from 'lodash/fp/isEmpty';
+import StateButton from './StateButton';
+import StateIcon from './StateIcon';
+import { hasPaddingClass } from '../../utils/hasUtilityClass';
+const justify = {
+    left: 'justify-content-start',
+    center: 'justify-content-center',
+    right: 'justify-content-end',
+};
+const renderButtons = (buttons) => {
+    if (isEmpty(buttons)) {
+        return;
+    }
+    if (buttons.length === 1) {
+        return (_jsx("div", { className: 'btn-toolbar margin-top-20', children: _jsx(StateButton, { ...buttons[0] }) }));
+    }
+    if (buttons.length === 2) {
+        return (_jsx("div", { className: 'btn-toolbar margin-top-20 justify-content-center-xs', children: buttons.map((buttonProps, index) => (_jsx(StateButton, { ...buttonProps }, index))) }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'btn-toolbar margin-top-20 justify-content-center-xs', children: [_jsx(StateButton, { ...buttons[0] }, '1'), _jsx(StateButton, { ...buttons[1] }, '2')] }), _jsx("div", { className: 'btn-toolbar', children: buttons.map((buttonProps, index) => {
+                    return index > 1 && _jsx(StateButton, { ...buttonProps }, index);
+                }) })] }));
+};
+const CustomState = (props) => {
+    const { icon, icons = [], image, headline, message, buttons = [], alignment = 'center', fullWidth = false, condensed = false, outerClassName = '', innerClassName = '', children, ...remainingProps } = props;
+    const wrapperClasses = classNames('margin-0', 'width-100pct', !fullWidth && 'max-width-600', 'panel-default', 'panel', !hasPaddingClass(outerClassName) ? (condensed ? 'padding-10' : 'padding-15') : '', outerClassName);
+    const innerClassNames = classNames('display-flex', 'flex-column', 'align-items-center', 'text-center', !hasPaddingClass(innerClassName) ? (condensed ? 'padding-15' : 'padding-25') : '', innerClassName);
+    const iconClasses = classNames(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20');
+    const iconsClasses = classNames(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20', 'display-flex', 'align-items-center', 'max-width-100pct');
+    const headlineClassNames = classNames(condensed ? 'text-size-h4' : 'text-size-h3 text-size-h2-xl', 'line-height-125rel', 'text-color-dark', 'text-medium', 'width-500', 'max-width-100pct', 'text-wrap-balance');
+    const renderIcon = (_jsx(_Fragment, { children: icon && (_jsx("div", { className: iconClasses, children: _jsx(StateIcon, { name: icon }) })) }));
+    const renderIcons = (_jsx("div", { className: iconsClasses, children: icons.map((iconProps, index) => (_jsx(StateIcon, { ...iconProps }, index))) }));
+    const renderChildren = _jsx("div", { className: 'width-500 max-width-100pct margin-top-25', children: children });
+    const renderHeadline = _jsx("div", { className: headlineClassNames, children: headline });
+    const renderMessage = (_jsx("div", { className: 'text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance', children: message }));
+    const singleOrMultiIcon = isEmpty(icons) ? renderIcon : renderIcons;
+    const imageOrIcon = image ? image : singleOrMultiIcon;
+    return (_jsx("div", { className: `display-flex ${justify[alignment]} max-width-100pct`, ...remainingProps, children: _jsx("div", { className: wrapperClasses, children: _jsxs("div", { className: innerClassNames, children: [imageOrIcon, headline && renderHeadline, message && renderMessage, renderButtons(buttons), children && renderChildren] }) }) }));
+};
+export default CustomState;

package/src/components/states/EmptyState.d.ts

@@ -0,0 +1,5 @@
+import { type PropsWithChildren } from 'react';
+import type { BaseStateProps } from './BaseStateProps';
+export type EmptyStateProps = BaseStateProps;
+declare const EmptyState: (props: PropsWithChildren<EmptyStateProps>) => import("react/jsx-runtime").JSX.Element;
+export default EmptyState;

package/src/components/states/EmptyState.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CustomState from './CustomState';
+const EmptyState = (props) => {
+    const { icon = 'rioglyph-empty', ...remainingProps } = props;
+    return _jsx(CustomState, { icon: icon, ...remainingProps });
+};
+export default EmptyState;

package/src/components/states/ErrorState.d.ts

@@ -0,0 +1,5 @@
+import { type PropsWithChildren } from 'react';
+import type { BaseStateProps } from './BaseStateProps';
+export type ErrorStateProps = BaseStateProps;
+declare const ErrorState: (props: PropsWithChildren<ErrorStateProps>) => import("react/jsx-runtime").JSX.Element;
+export default ErrorState;

package/src/components/states/ErrorState.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CustomState from './CustomState';
+const ErrorState = (props) => {
+    const { icon = 'rioglyph-truck-breakdown', ...remainingProps } = props;
+    return _jsx(CustomState, { icon: icon, ...remainingProps });
+};
+export default ErrorState;

package/src/components/states/ForbiddenState.d.ts

@@ -0,0 +1,5 @@
+import { type PropsWithChildren } from 'react';
+import type { BaseStateProps } from './BaseStateProps';
+export type ForbiddenStateProps = BaseStateProps;
+declare const ForbiddenState: (props: PropsWithChildren<ForbiddenStateProps>) => import("react/jsx-runtime").JSX.Element;
+export default ForbiddenState;

package/src/components/states/ForbiddenState.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CustomState from './CustomState';
+const ForbiddenState = (props) => {
+    const { icon = 'rioglyph-ban-circle', ...remainingProps } = props;
+    return _jsx(CustomState, { icon: icon, ...remainingProps });
+};
+export default ForbiddenState;

package/src/components/states/MaintenanceState.d.ts

@@ -0,0 +1,5 @@
+import { type PropsWithChildren } from 'react';
+import type { BaseStateProps } from './BaseStateProps';
+export type MaintenanceStateProps = BaseStateProps;
+declare const MaintenanceState: (props: PropsWithChildren<MaintenanceStateProps>) => import("react/jsx-runtime").JSX.Element;
+export default MaintenanceState;

package/src/components/states/MaintenanceState.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CustomState from './CustomState';
+const MaintenanceState = (props) => {
+    const { icon = 'rioglyph-wrench', ...remainingProps } = props;
+    return _jsx(CustomState, { icon: icon, ...remainingProps });
+};
+export default MaintenanceState;

package/src/components/states/NotBookedState.d.ts

@@ -0,0 +1,10 @@
+import React, { type PropsWithChildren } from 'react';
+import type { BaseStateProps } from './BaseStateProps';
+export type NotBookedStateProps = BaseStateProps & {
+    /**
+     * List of features.
+     */
+    features?: string | React.ReactNode[];
+};
+declare const NotBookedState: (props: PropsWithChildren<NotBookedStateProps>) => import("react/jsx-runtime").JSX.Element;
+export default NotBookedState;