@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.1.0

package/components/slider/RangeSlider.js

@@ -1,15 +1,15 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
 import classNames from 'classnames';
+import noop from 'lodash/noop';
 const getRangeValues = (valueLeft, valueRight) => {
     const finalLeftValue = valueRight <= valueLeft ? valueRight : valueLeft;
     const finalRightValue = valueLeft >= valueRight ? valueLeft : valueRight;
     return [finalLeftValue, finalRightValue];
 };
-const RangeSlider = props => {
-    const { minValue, maxValue, valueLabels, step, leftValue, rightValue, className, disabled, onChange, onDragEnd } = props, remainingProps = __rest(props, ["minValue", "maxValue", "valueLabels", "step", "leftValue", "rightValue", "className", "disabled", "onChange", "onDragEnd"]);
+const RangeSlider = (props) => {
+    const { minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, step = 1, leftValue, rightValue, className, disabled = false, onChange = noop, onDragEnd = noop } = props, remainingProps = __rest(props, ["minValue", "maxValue", "valueLabels", "valueLabelUnit", "step", "leftValue", "rightValue", "className", "disabled", "onChange", "onDragEnd"]);
     const [activeLeft, setActiveLeft] = useState(false);
     const [activeRight, setActiveRight] = useState(false);
     const [valueLeft, setValueLeft] = useState(leftValue ? leftValue : minValue);
@@ -22,7 +22,7 @@ const RangeSlider = props => {
             setValueRight(valueRight);
         }
     }, [valueLeft, valueRight, minValue, maxValue]);
-    const changeValues = newValues => {
+    const changeValues = (newValues) => {
         const newValueLeft = newValues.valueLeft ? newValues.valueLeft : valueLeft;
         const newValueRight = newValues.valueRight ? newValues.valueRight : valueRight;
         setValueLeft(newValueLeft);
@@ -32,8 +32,8 @@ const RangeSlider = props => {
         const [newLeftValue, newRightValue] = getRangeValues(newValueLeft, newValueRight);
         onChange(newLeftValue, newRightValue);
     };
-    const handleChangeValueLeft = event => changeValues({ valueLeft: parseInt(event.target.value, 10) });
-    const handleChangeValueRight = event => changeValues({ valueRight: parseInt(event.target.value, 10) });
+    const handleChangeValueLeft = (event) => changeValues({ valueLeft: parseInt(event.target.value, 10) });
+    const handleChangeValueRight = (event) => changeValues({ valueRight: parseInt(event.target.value, 10) });
     const onMouseDownLeft = () => {
         setIsChangingLeft(true);
         setIsChangingRight(false);
@@ -42,17 +42,18 @@ const RangeSlider = props => {
         setIsChangingLeft(false);
         setIsChangingRight(true);
     };
-    const getTrackMiddlePosition = targetWidth => {
+    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 onMouseMoveLeft = (event) => {
+        const target = event.target;
         if (!isChangingLeft) {
-            const target = event.target.getBoundingClientRect();
-            const mouseHover = event.clientX - target.left;
-            const targetWidth = event.target.offsetWidth;
+            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);
@@ -64,11 +65,12 @@ const RangeSlider = props => {
             }
         }
     };
-    const onMouseMoveRight = event => {
+    const onMouseMoveRight = (event) => {
+        const target = event.target;
         if (!isChangingRight) {
-            const target = event.target.getBoundingClientRect();
-            const mouseHover = event.clientX - target.left;
-            const targetWidth = event.target.offsetWidth;
+            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);
@@ -96,27 +98,6 @@ const RangeSlider = props => {
     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);
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [_jsx("div", { className: 'range-whole-track' }), _jsx("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%`, left: `${trackLeft}%` } }, { children: valueLabels && (_jsxs("div", { children: [_jsx("div", Object.assign({ className: 'range-value' }, { children: finalLeftValue })), _jsx("div", Object.assign({ className: 'range-value' }, { children: 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 })] })));
-};
-RangeSlider.defaultProps = {
-    step: 1,
-    minValue: 0,
-    maxValue: Number.MAX_VALUE,
-    valueLabels: false,
-    disabled: false,
-    onChange: () => { },
-    onDragEnd: () => { },
-};
-RangeSlider.propTypes = {
-    leftValue: PropTypes.number,
-    rightValue: PropTypes.number,
-    minValue: PropTypes.number.isRequired,
-    maxValue: PropTypes.number.isRequired,
-    valueLabels: PropTypes.bool,
-    step: PropTypes.number,
-    onChange: PropTypes.func,
-    onDragEnd: PropTypes.func,
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [_jsx("div", { className: 'range-whole-track' }), _jsx("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%`, left: `${trackLeft}%` } }, { children: valueLabels && (_jsxs("div", Object.assign({ className: 'user-select-none' }, { children: [_jsx("div", Object.assign({ className: 'range-value' }, { children: valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue })), _jsx("div", Object.assign({ className: 'range-value' }, { 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/components/slider/Slider.d.ts

@@ -1,38 +1,69 @@
+import React, { type HTMLAttributes } from 'react';
+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;
+    /**
+     * 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;
-declare function Slider(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace Slider {
-    namespace defaultProps {
-        const step: number;
-        const value: number;
-        const minValue: number;
-        const maxValue: number;
-        const valueLabels: boolean;
-        const hideValueBar: boolean;
-        const disabled: boolean;
-        function onChange(): void;
-        function onDragEnd(): void;
-    }
-    namespace propTypes {
-        const value_1: PropTypes.Requireable<number>;
-        export { value_1 as value };
-        const minValue_1: PropTypes.Validator<number>;
-        export { minValue_1 as minValue };
-        const maxValue_1: PropTypes.Validator<number>;
-        export { maxValue_1 as maxValue };
-        const valueLabels_1: PropTypes.Requireable<boolean>;
-        export { valueLabels_1 as valueLabels };
-        export const largeValueLabels: PropTypes.Requireable<boolean>;
-        const hideValueBar_1: PropTypes.Requireable<boolean>;
-        export { hideValueBar_1 as hideValueBar };
-        const step_1: PropTypes.Requireable<number>;
-        export { step_1 as step };
-        const onChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onChange_1 as onChange };
-        const onDragEnd_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onDragEnd_1 as onDragEnd };
-        export const className: PropTypes.Requireable<string>;
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-    }
-}
-import PropTypes from "prop-types";

package/components/slider/Slider.js

@@ -1,10 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
 import classNames from 'classnames';
-const Slider = props => {
-    const { value, minValue, maxValue, valueLabels, largeValueLabels, hideValueBar, step, onChange, onDragEnd, className, disabled } = props, remainingProps = __rest(props, ["value", "minValue", "maxValue", "valueLabels", "largeValueLabels", "hideValueBar", "step", "onChange", "onDragEnd", "className", "disabled"]);
+import noop from 'lodash/noop';
+const Slider = (props) => {
+    const { value = 0, minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, largeValueLabels = false, hideValueBar = false, step = 1, onChange = noop, onDragEnd = noop, className, disabled = false } = props, remainingProps = __rest(props, ["value", "minValue", "maxValue", "valueLabels", "valueLabelUnit", "largeValueLabels", "hideValueBar", "step", "onChange", "onDragEnd", "className", "disabled"]);
     const [currentValue, setCurrentValue] = useState(value ? value : minValue);
     const [isChanging, setIsChanging] = useState(false);
     useEffect(() => {
@@ -12,7 +12,7 @@ const Slider = props => {
             setCurrentValue(value);
         }
     }, [value, minValue, maxValue]);
-    const handleChange = event => {
+    const handleChange = (event) => {
         const newValue = parseInt(event.target.value, 10);
         setCurrentValue(newValue);
         setIsChanging(true);
@@ -27,30 +27,6 @@ const Slider = props => {
     };
     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);
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [_jsx("div", { className: 'range-whole-track' }), _jsx("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%` } }, { children: valueLabels && _jsx("div", Object.assign({ className: 'range-value' }, { children: currentValue })) })), _jsx("input", { className: `${isChanging ? 'changing' : ''}`, value: currentValue, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChange, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] })));
-};
-Slider.defaultProps = {
-    step: 1,
-    value: 0,
-    minValue: 0,
-    maxValue: Number.MAX_VALUE,
-    valueLabels: false,
-    hideValueBar: false,
-    disabled: false,
-    onChange: () => { },
-    onDragEnd: () => { },
-};
-Slider.propTypes = {
-    value: PropTypes.number,
-    minValue: PropTypes.number.isRequired,
-    maxValue: PropTypes.number.isRequired,
-    valueLabels: PropTypes.bool,
-    largeValueLabels: PropTypes.bool,
-    hideValueBar: PropTypes.bool,
-    step: PropTypes.number,
-    onChange: PropTypes.func,
-    onDragEnd: PropTypes.func,
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [_jsx("div", { className: 'range-whole-track' }), _jsx("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%` } }, { children: valueLabels && (_jsx("div", Object.assign({ className: 'range-value' }, { children: _jsx("div", { 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/components/smoothScrollbars/SmoothScrollbars.d.ts

@@ -0,0 +1,16 @@
+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;
+};
+declare const SmoothScrollbars: React.ForwardRefExoticComponent<SmoothScrollbarsProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<any>>;
+export default SmoothScrollbars;

package/components/smoothScrollbars/SmoothScrollbars.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import { forwardRef } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
+const SmoothScrollbars = forwardRef((componentProps, ref) => {
+    const { slideIn = false, largeTrack = false, trackOffset = false, className = '', onScroll = noop, tagName = 'div', autoHeight = false, autoHeightMin = 0, autoHeightMax = 200, children, } = componentProps;
+    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, Object.assign({ ref: ref, tagName: tagName, onScroll: onScroll, className: wrapperClassNames, hideTracksWhenNotNeeded: true, autoHeight: autoHeight, autoHeightMin: autoHeightMin, autoHeightMax: autoHeightMax, renderView: props => {
+            return _jsx("div", Object.assign({}, props, { className: 'scrollbar-view' }));
+        }, renderTrackVertical: props => {
+            return _jsx("div", Object.assign({}, props, { className: renderTrackVerticalNames }));
+        }, renderThumbVertical: props => {
+            return _jsx("div", Object.assign({}, props, { className: renderThumbVerticalNames }));
+        }, renderTrackHorizontal: props => {
+            return _jsx("div", Object.assign({}, props, { className: renderTrackHorizontalNames }));
+        }, renderThumbHorizontal: props => {
+            return _jsx("div", Object.assign({}, props, { className: renderThumbHorizontalNames }));
+        } }, { children: children })));
+});
+export default SmoothScrollbars;

package/components/spinner/Spinner.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface SpinnerProps {
     /**
      * Defines whether the spinner is shown on bright or dark background.
@@ -42,7 +43,7 @@ export interface SpinnerProps {
     /**
      * The text shown next to the spinner icon.
      */
-    text?: string;
+    text?: string | React.ReactNode;
 }
 declare const Spinner: (props: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export default Spinner;

package/components/spinner/Spinner.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
 import classNames from 'classnames';
 import Fade from '../fade/Fade';

package/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/components/states/BaseStateProps.js

@@ -0,0 +1,2 @@
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';

package/components/states/CustomState.d.ts

@@ -1,15 +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;
-declare function CustomState(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace CustomState {
-    export namespace defaultProps {
-        export const icon: string;
-        export const icons: never[];
-        export const buttons: never[];
-        export { ALIGN_CENTER as alignment };
-        export const fullWidth: boolean;
-        export const condensed: boolean;
-    }
-    export { baseStatePropTypes as propTypes };
-}
-import { ALIGN_CENTER } from "./baseStatePropTypes";
-import { baseStatePropTypes } from "./baseStatePropTypes";

package/components/states/CustomState.js

@@ -1,58 +1,46 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable complexity */
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/fp/isEmpty';
-import { baseStatePropTypes, ALIGN_LEFT, ALIGN_CENTER, ALIGN_RIGHT } from './baseStatePropTypes';
-const StateButton = ({ text, className, onClick = () => { }, href }) => {
-    const buttonClassNames = classNames('btn btn-primary', 'margin-top-10', className && className);
-    // In case a href is given, render a link button instead
-    if (href) {
-        return (_jsx("a", Object.assign({ className: buttonClassNames, href: href, onClick: onClick }, { children: text })));
-    }
-    return (_jsx("button", Object.assign({ className: buttonClassNames, type: 'button', onClick: onClick }, { children: text })));
-};
-const Icon = ({ name, color, className }) => {
-    const iconClassNames = classNames('rioglyph', color || 'text-color-light', name && name, !className && 'text-size-300pct', className && className);
-    return _jsx("span", { className: iconClassNames });
+import StateButton from './StateButton';
+import StateIcon from './StateIcon';
+const justify = {
+    left: 'justify-content-start',
+    center: 'justify-content-center',
+    right: 'justify-content-end',
 };
-const getAlignmentClassName = alignment => {
-    switch (alignment) {
-        case ALIGN_LEFT:
-            return 'justify-content-start';
-        case ALIGN_CENTER:
-            return 'justify-content-center';
-        case ALIGN_RIGHT:
-            return 'justify-content-end';
-        default:
-            return 'justify-content-center';
+const renderButtons = (buttons) => {
+    if (isEmpty(buttons)) {
+        return;
+    }
+    if (buttons.length === 1) {
+        return (_jsx("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: _jsx(StateButton, Object.assign({}, buttons[0])) })));
     }
+    if (buttons.length === 2) {
+        return (_jsx("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: buttons.map((buttonProps, index) => (_jsx(StateButton, Object.assign({}, buttonProps), index))) })));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: [_jsx(StateButton, Object.assign({}, buttons[0]), '1'), _jsx(StateButton, Object.assign({}, buttons[1]), '2')] })), _jsx("div", Object.assign({ className: 'btn-toolbar' }, { children: buttons.map((buttonProps, index) => {
+                    return index > 1 && _jsx(StateButton, Object.assign({}, buttonProps), index);
+                }) }))] }));
 };
-const CustomState = props => {
-    const { icon, icons, image, headline, message, buttons, alignment, fullWidth, condensed, outerClassName, innerClassName, children } = props, remainingProps = __rest(props, ["icon", "icons", "image", "headline", "message", "buttons", "alignment", "fullWidth", "condensed", "outerClassName", "innerClassName", "children"]);
-    const wrapperClasses = classNames('margin-0', 'width-100pct', !fullWidth && 'max-width-600', 'panel-default', 'panel', condensed ? 'padding-10' : 'padding-15', outerClassName && outerClassName);
-    const innerClassNames = classNames('display-flex', 'flex-column', 'align-items-center', 'text-center', condensed ? 'padding-15' : 'padding-25', innerClassName && innerClassName);
+const CustomState = (props) => {
+    const { icon, icons = [], image, headline, message, buttons = [], alignment = 'center', fullWidth = false, condensed = false, outerClassName, innerClassName, children } = props, remainingProps = __rest(props, ["icon", "icons", "image", "headline", "message", "buttons", "alignment", "fullWidth", "condensed", "outerClassName", "innerClassName", "children"]);
+    const hasCustomInnerPadding = innerClassName === null || innerClassName === void 0 ? void 0 : innerClassName.includes('padding');
+    const hasCustomOuterPadding = outerClassName === null || outerClassName === void 0 ? void 0 : outerClassName.includes('padding');
+    const wrapperClasses = classNames('margin-0', 'width-100pct', !fullWidth && 'max-width-600', 'panel-default', 'panel', !hasCustomOuterPadding && condensed ? 'padding-10' : 'padding-15', outerClassName && outerClassName);
+    const innerClassNames = classNames('display-flex', 'flex-column', 'align-items-center', 'text-center', !hasCustomInnerPadding && condensed ? 'padding-15' : 'padding-25', innerClassName && 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-sm', 'line-height-125rel', 'text-color-dark', 'text-medium', 'width-500', 'max-width-100pct');
-    const renderButtons = (_jsx("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: buttons.map((buttonProps, index) => (_jsx(StateButton, Object.assign({}, buttonProps), index))) })));
-    const renderIcon = (_jsx("div", Object.assign({ className: iconClasses }, { children: _jsx(Icon, { name: icon }) })));
-    const renderIcons = (_jsx("div", Object.assign({ className: iconsClasses }, { children: icons.map((iconProps, index) => (_jsx(Icon, Object.assign({}, iconProps), index))) })));
+    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("div", Object.assign({ className: iconClasses }, { children: _jsx(StateIcon, { name: icon }) })));
+    const renderIcons = (_jsx("div", Object.assign({ className: iconsClasses }, { children: icons.map((iconProps, index) => (_jsx(StateIcon, Object.assign({}, iconProps), index))) })));
     const renderChildren = _jsx("div", Object.assign({ className: 'width-500 max-width-100pct margin-top-25' }, { children: children }));
     const renderHeadline = _jsx("div", Object.assign({ className: headlineClassNames }, { children: headline }));
-    const renderMessage = _jsx("div", Object.assign({ className: 'text-color-dark margin-top-15 width-500 max-width-100pct' }, { children: message }));
+    const renderMessage = (_jsx("div", Object.assign({ 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", Object.assign({ className: `display-flex ${getAlignmentClassName(alignment)} max-width-100pct` }, remainingProps, { children: _jsx("div", Object.assign({ className: wrapperClasses }, { children: _jsxs("div", Object.assign({ className: innerClassNames }, { children: [imageOrIcon, headline && renderHeadline, message && renderMessage, !isEmpty(buttons) && renderButtons, children && renderChildren] })) })) })));
-};
-CustomState.defaultProps = {
-    icon: 'rioglyph-rio',
-    icons: [],
-    buttons: [],
-    alignment: ALIGN_CENTER,
-    fullWidth: false,
-    condensed: false,
+    return (_jsx("div", Object.assign({ className: `display-flex ${justify[alignment]} max-width-100pct` }, remainingProps, { children: _jsx("div", Object.assign({ className: wrapperClasses }, { children: _jsxs("div", Object.assign({ className: innerClassNames }, { children: [imageOrIcon, headline && renderHeadline, message && renderMessage, renderButtons(buttons), children && renderChildren] })) })) })));
 };
-CustomState.propTypes = baseStatePropTypes;
 export default CustomState;

package/components/states/EmptyState.d.ts

@@ -1,9 +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;
-declare function EmptyState(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace EmptyState {
-    export namespace defaultProps {
-        const icon: string;
-    }
-    export { baseStatePropTypes as propTypes };
-}
-import { baseStatePropTypes } from "./baseStatePropTypes";

package/components/states/EmptyState.js

@@ -1,10 +1,10 @@
+import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import CustomState from './CustomState';
-import { baseStatePropTypes } from './baseStatePropTypes';
-const EmptyState = props => _jsx(CustomState, Object.assign({}, props));
-EmptyState.defaultProps = {
-    icon: 'rioglyph-empty',
+const EmptyState = (props) => {
+    const { icon = 'rioglyph-empty' } = props, remainingProps = __rest(props, ["icon"]);
+    return _jsx(CustomState, Object.assign({ icon: icon }, remainingProps));
 };
-EmptyState.propTypes = baseStatePropTypes;
 export default EmptyState;

package/components/states/ErrorState.d.ts

@@ -1,9 +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;
-declare function ErrorState(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace ErrorState {
-    export namespace defaultProps {
-        const icon: string;
-    }
-    export { baseStatePropTypes as propTypes };
-}
-import { baseStatePropTypes } from "./baseStatePropTypes";

package/components/states/ErrorState.js

@@ -1,10 +1,10 @@
+import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import CustomState from './CustomState';
-import { baseStatePropTypes } from './baseStatePropTypes';
-const ErrorState = props => _jsx(CustomState, Object.assign({}, props));
-ErrorState.defaultProps = {
-    icon: 'rioglyph-truck-breakdown',
+const ErrorState = (props) => {
+    const { icon = 'rioglyph-truck-breakdown' } = props, remainingProps = __rest(props, ["icon"]);
+    return _jsx(CustomState, Object.assign({ icon: icon }, remainingProps));
 };
-ErrorState.propTypes = baseStatePropTypes;
 export default ErrorState;

package/components/states/ForbiddenState.d.ts

@@ -1,9 +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;
-declare function ForbiddenState(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace ForbiddenState {
-    export namespace defaultProps {
-        const icon: string;
-    }
-    export { baseStatePropTypes as propTypes };
-}
-import { baseStatePropTypes } from "./baseStatePropTypes";

package/components/states/ForbiddenState.js

@@ -1,10 +1,10 @@
+import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import CustomState from './CustomState';
-import { baseStatePropTypes } from './baseStatePropTypes';
-const ForbiddenState = props => _jsx(CustomState, Object.assign({}, props));
-ForbiddenState.defaultProps = {
-    icon: 'rioglyph-ban-circle',
+const ForbiddenState = (props) => {
+    const { icon = 'rioglyph-ban-circle' } = props, remainingProps = __rest(props, ["icon"]);
+    return _jsx(CustomState, Object.assign({ icon: icon }, remainingProps));
 };
-ForbiddenState.propTypes = baseStatePropTypes;
 export default ForbiddenState;