@rio-cloud/rio-uikit 0.16.4-beta.13 → 0.16.4-beta.15

package/lib/es/components/saveableInput/SaveableInput.d.ts

@@ -1,4 +1,4 @@
-import { type Attributes } from 'react';
+import React, { type Attributes } from 'react';
 export type SaveableInputProps = {
     /**
      * The input placeholder.
@@ -25,6 +25,26 @@ export type SaveableInputProps = {
      * @returns
      */
     onValueChanged?: (value: string, previousValue: string) => void;
+    /**
+     * Callback function that gets triggered on every input change. Use this to control the component
+     * or when implementing key validation.
+     * @param keyValue the key value that has been entered
+     * @param inputValue the current complete value of the input
+     * @returns
+     */
+    onInputChange?: (keyValue: string, inputValue: string) => void;
+    /**
+     * Callback function that gets triggered when the user aborts the edit mode. Use this
+     * to control the component and handle the resetting of previous value on the outside.
+     * @returns
+     */
+    onEsc?: () => void;
+    /**
+     * Callback function that gets triggered when the input is in edit mode. Use this
+     * to control the component dna to handle the previous value on the outside.
+     * @returns
+     */
+    onEnterEdit?: () => void;
     /**
      * Defines the button style: `default` or `primary`.
      */
@@ -33,6 +53,19 @@ export type SaveableInputProps = {
      * Additional HTML attributes to be set on the input element.
      */
     inputProps?: Attributes;
+    /**
+     * Adds a given unit to the input.
+     */
+    unit?: string | React.ReactNode;
+    /**
+     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group
+     * and the icon will be set in an input-addon. Example: `rioglyph-search`.
+     */
+    icon?: string;
+    /**
+     * Disables the component so the user cannot enter the edit mode.
+     */
+    disabled?: boolean;
     /**
      * Additional classes to be set on the input itself.
      */

package/lib/es/components/saveableInput/SaveableInput.js

@@ -11,15 +11,19 @@ const Button_1 = tslib_1.__importDefault(require("../../Button"));
 const useKey_1 = tslib_1.__importDefault(require("../../hooks/useKey"));
 const useEsc_1 = tslib_1.__importDefault(require("../../hooks/useEsc"));
 const DEFAULT_BUTTON_STYLE = 'primary';
-// TODO:
+// Features:
 // [ ] what shall happen when user leaves component while in edit mode (click outside or tab) - close on blur?
 // [x] avoid save without change
 // [x] use fixed previous value
 // [x] enter = save
 // [x] esc key to abort and leave edit mode
 // [x] tab focus + enter = go into edit mode
+// [x] validate after each key, i.e for number inputs - use onInputChange callback
+// [x] support form feedback error - wrap it with form-group and feedback classes
+// [x] allow for unit and icon
+// [x] disabled input
 const SaveableInput = (props) => {
-    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', onValueChanged = noop_1.default, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, className, inputProps } = props, remainingProps = tslib_1.__rest(props, ["placeholder", "fixedPreviousValue", "previousValue", "value", "onValueChanged", "buttonStyle", "inputClassName", "className", "inputProps"]);
+    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', onValueChanged = noop_1.default, onInputChange, onEsc = noop_1.default, onEnterEdit = noop_1.default, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, icon, unit, disabled = false, className } = props, remainingProps = tslib_1.__rest(props, ["placeholder", "fixedPreviousValue", "previousValue", "value", "onValueChanged", "onInputChange", "onEsc", "onEnterEdit", "buttonStyle", "inputClassName", "inputProps", "icon", "unit", "disabled", "className"]);
     const externalOldValue = previousValue || fixedPreviousValue;
     const [inputValue, setInputValue] = (0, react_1.useState)(externalValue);
     const [oldInputValue, setOldInputValue] = (0, react_1.useState)(externalOldValue);
@@ -59,6 +63,7 @@ const SaveableInput = (props) => {
             setInputValue(initialInputValueRef.current);
             setOldInputValue(initialOldInputValueRef.current);
             setEditInput(false);
+            onEsc();
         }
     });
     const handleToggleInput = () => {
@@ -70,23 +75,40 @@ const SaveableInput = (props) => {
                 initialInputValueRef.current = inputValue;
                 initialOldInputValueRef.current = oldInputValue;
             }
+            onEnterEdit();
         }
         else {
             setEditInput(false);
+            // In case the new input value has not changed to the initial value
+            // reset the internal old value to the initial
             if (initialInputValueRef.current !== inputValue) {
                 setOldInputValue(initialInputValueRef.current);
                 onValueChanged(inputValue, oldInputValue);
             }
         }
     };
-    const handleInputChange = (event) => setInputValue(event.target.value);
+    const handleInputChange = (event) => {
+        var _a;
+        // Only update internal value if the external "InputChange" callback function is not defined
+        // as it will be used in a controlled way
+        if (onInputChange) {
+            // Use type assertion to access nativeEvent.data
+            const nativeEventData = (_a = event.nativeEvent) === null || _a === void 0 ? void 0 : _a.data;
+            if (nativeEventData) {
+                onInputChange(nativeEventData, event.currentTarget.value);
+            }
+            return;
+        }
+        setInputValue(event.target.value);
+    };
     const handleFocus = () => setIsFocused(true);
     const handleBlur = () => setIsFocused(false);
     const showOldValue = !(0, isEmpty_1.default)(oldInputValue) && oldInputValue !== inputValue && !editInput;
     const wrapperClasses = (0, classnames_1.default)('form-group', className);
-    const inputClasses = (0, classnames_1.default)('form-control', showOldValue && 'padding-bottom-0 padding-top-10 text-size-12', inputClassName);
+    const inputClasses = (0, classnames_1.default)('form-control', showOldValue && 'padding-bottom-0 padding-top-10 text-size-12', unit && 'padding-right-50', // This value is not perfect as with longer units it might conflict with the value
+    inputClassName);
+    const oldValueClasses = (0, classnames_1.default)('position-absolute', 'top-2', 'left-10', 'margin-left-3', 'text-size-10', 'text-decoration-line-through', icon && 'padding-left-20');
     const buttonIconClasses = (0, classnames_1.default)('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: wrapperClasses }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'input-group' }, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput }, inputProps)), showOldValue && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'position-absolute top-2 left-10 ' +
-                        'margin-left-3 text-size-10 text-decoration-line-through' }, { children: oldInputValue }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'input-group-btn' }, { children: (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput }, { children: (0, jsx_runtime_1.jsx)("span", { className: buttonIconClasses }) })) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: wrapperClasses }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'input-group' }, { children: [icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true' }) }))), (0, jsx_runtime_1.jsx)("input", Object.assign({ type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput }, inputProps)), unit && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'position-absolute right-0 margin-right-50' }, { children: unit })), showOldValue && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: oldValueClasses }, { children: oldInputValue })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'input-group-btn' }, { children: (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disabled }, { children: (0, jsx_runtime_1.jsx)("span", { className: buttonIconClasses }) })) }))] })) })));
 };
 exports.default = SaveableInput;

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");

package/lib/es/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/lib/es/components/states/CustomState.js

@@ -2,59 +2,32 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable complexity */
-const react_1 = tslib_1.__importDefault(require("react"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
-const baseStatePropTypes_1 = require("./baseStatePropTypes");
-const StateButton = ({ text, className, onClick = () => { }, href }) => {
-    const buttonClassNames = (0, classnames_1.default)('btn btn-primary', 'margin-top-10', className && className);
-    // In case a href is given, render a link button instead
-    if (href) {
-        return ((0, jsx_runtime_1.jsx)("a", Object.assign({ className: buttonClassNames, href: href, onClick: onClick }, { children: text })));
-    }
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: buttonClassNames, type: 'button', onClick: onClick }, { children: text })));
+const StateButton_1 = tslib_1.__importDefault(require("./StateButton"));
+const StateIcon_1 = tslib_1.__importDefault(require("./StateIcon"));
+const justify = {
+    left: 'justify-content-start',
+    center: 'justify-content-center',
+    right: 'justify-content-end',
 };
-const Icon = ({ name, color, className }) => {
-    const iconClassNames = (0, classnames_1.default)('rioglyph', color || 'text-color-light', name && name, !className && 'text-size-300pct', className && className);
-    return (0, jsx_runtime_1.jsx)("span", { className: iconClassNames });
-};
-const getAlignmentClassName = alignment => {
-    switch (alignment) {
-        case baseStatePropTypes_1.ALIGN_LEFT:
-            return 'justify-content-start';
-        case baseStatePropTypes_1.ALIGN_CENTER:
-            return 'justify-content-center';
-        case baseStatePropTypes_1.ALIGN_RIGHT:
-            return 'justify-content-end';
-        default:
-            return 'justify-content-center';
-    }
-};
-const CustomState = props => {
-    const { icon, icons, image, headline, message, buttons, alignment, fullWidth, condensed, outerClassName, innerClassName, children } = props, remainingProps = tslib_1.__rest(props, ["icon", "icons", "image", "headline", "message", "buttons", "alignment", "fullWidth", "condensed", "outerClassName", "innerClassName", "children"]);
+const CustomState = (props) => {
+    const { icon = 'rioglyph-rio', icons = [], image, headline, message, buttons = [], alignment = 'center', fullWidth = false, condensed = false, outerClassName, innerClassName, children } = props, remainingProps = tslib_1.__rest(props, ["icon", "icons", "image", "headline", "message", "buttons", "alignment", "fullWidth", "condensed", "outerClassName", "innerClassName", "children"]);
     const wrapperClasses = (0, classnames_1.default)('margin-0', 'width-100pct', !fullWidth && 'max-width-600', 'panel-default', 'panel', condensed ? 'padding-10' : 'padding-15', outerClassName && outerClassName);
     const innerClassNames = (0, classnames_1.default)('display-flex', 'flex-column', 'align-items-center', 'text-center', condensed ? 'padding-15' : 'padding-25', innerClassName && innerClassName);
     const iconClasses = (0, classnames_1.default)(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20');
     const iconsClasses = (0, classnames_1.default)(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20', 'display-flex', 'align-items-center', 'max-width-100pct');
     const headlineClassNames = (0, classnames_1.default)(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 = ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: buttons.map((buttonProps, index) => ((0, jsx_runtime_1.jsx)(StateButton, Object.assign({}, buttonProps), index))) })));
-    const renderIcon = ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: iconClasses }, { children: (0, jsx_runtime_1.jsx)(Icon, { name: icon }) })));
-    const renderIcons = ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: iconsClasses }, { children: icons.map((iconProps, index) => ((0, jsx_runtime_1.jsx)(Icon, Object.assign({}, iconProps), index))) })));
+    const renderButtons = ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: buttons.map((buttonProps, index) => ((0, jsx_runtime_1.jsx)(StateButton_1.default, Object.assign({}, buttonProps), index))) })));
+    const renderIcon = ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: iconClasses }, { children: (0, jsx_runtime_1.jsx)(StateIcon_1.default, { name: icon }) })));
+    const renderIcons = ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: iconsClasses }, { children: icons.map((iconProps, index) => ((0, jsx_runtime_1.jsx)(StateIcon_1.default, Object.assign({}, iconProps), index))) })));
     const renderChildren = (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'width-500 max-width-100pct margin-top-25' }, { children: children }));
     const renderHeadline = (0, jsx_runtime_1.jsx)("div", Object.assign({ className: headlineClassNames }, { children: headline }));
     const renderMessage = (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-color-dark margin-top-15 width-500 max-width-100pct' }, { children: message }));
     const singleOrMultiIcon = (0, isEmpty_1.default)(icons) ? renderIcon : renderIcons;
     const imageOrIcon = image ? image : singleOrMultiIcon;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `display-flex ${getAlignmentClassName(alignment)} max-width-100pct` }, remainingProps, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: wrapperClasses }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: innerClassNames }, { children: [imageOrIcon, headline && renderHeadline, message && renderMessage, !(0, isEmpty_1.default)(buttons) && renderButtons, children && renderChildren] })) })) })));
-};
-CustomState.defaultProps = {
-    icon: 'rioglyph-rio',
-    icons: [],
-    buttons: [],
-    alignment: baseStatePropTypes_1.ALIGN_CENTER,
-    fullWidth: false,
-    condensed: false,
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `display-flex ${justify[alignment]} max-width-100pct` }, remainingProps, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: wrapperClasses }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: innerClassNames }, { children: [imageOrIcon, headline && renderHeadline, message && renderMessage, !(0, isEmpty_1.default)(buttons) && renderButtons, children && renderChildren] })) })) })));
 };
-CustomState.propTypes = baseStatePropTypes_1.baseStatePropTypes;
 exports.default = CustomState;

package/lib/es/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/lib/es/components/states/EmptyState.js

@@ -2,12 +2,11 @@
 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"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const CustomState_1 = tslib_1.__importDefault(require("./CustomState"));
-const baseStatePropTypes_1 = require("./baseStatePropTypes");
-const EmptyState = props => (0, jsx_runtime_1.jsx)(CustomState_1.default, Object.assign({}, props));
-EmptyState.defaultProps = {
-    icon: 'rioglyph-empty',
+const EmptyState = (props) => {
+    const { icon = 'rioglyph-empty' } = props, remainingProps = tslib_1.__rest(props, ["icon"]);
+    return (0, jsx_runtime_1.jsx)(CustomState_1.default, Object.assign({ icon: icon }, remainingProps));
 };
-EmptyState.propTypes = baseStatePropTypes_1.baseStatePropTypes;
 exports.default = EmptyState;

package/lib/es/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/lib/es/components/states/ErrorState.js

@@ -2,12 +2,11 @@
 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"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const CustomState_1 = tslib_1.__importDefault(require("./CustomState"));
-const baseStatePropTypes_1 = require("./baseStatePropTypes");
-const ErrorState = props => (0, jsx_runtime_1.jsx)(CustomState_1.default, Object.assign({}, props));
-ErrorState.defaultProps = {
-    icon: 'rioglyph-truck-breakdown',
+const ErrorState = (props) => {
+    const { icon = 'rioglyph-truck-breakdown' } = props, remainingProps = tslib_1.__rest(props, ["icon"]);
+    return (0, jsx_runtime_1.jsx)(CustomState_1.default, Object.assign({ icon: icon }, remainingProps));
 };
-ErrorState.propTypes = baseStatePropTypes_1.baseStatePropTypes;
 exports.default = ErrorState;

package/lib/es/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/lib/es/components/states/ForbiddenState.js

@@ -2,12 +2,11 @@
 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"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const CustomState_1 = tslib_1.__importDefault(require("./CustomState"));
-const baseStatePropTypes_1 = require("./baseStatePropTypes");
-const ForbiddenState = props => (0, jsx_runtime_1.jsx)(CustomState_1.default, Object.assign({}, props));
-ForbiddenState.defaultProps = {
-    icon: 'rioglyph-ban-circle',
+const ForbiddenState = (props) => {
+    const { icon = 'rioglyph-ban-circle' } = props, remainingProps = tslib_1.__rest(props, ["icon"]);
+    return (0, jsx_runtime_1.jsx)(CustomState_1.default, Object.assign({ icon: icon }, remainingProps));
 };
-ForbiddenState.propTypes = baseStatePropTypes_1.baseStatePropTypes;
 exports.default = ForbiddenState;

package/lib/es/components/states/MaintenanceState.d.ts

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

package/lib/es/components/states/MaintenanceState.js

@@ -2,12 +2,11 @@
 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"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const CustomState_1 = tslib_1.__importDefault(require("./CustomState"));
-const baseStatePropTypes_1 = require("./baseStatePropTypes");
-const MaintenanceState = props => (0, jsx_runtime_1.jsx)(CustomState_1.default, Object.assign({}, props));
-MaintenanceState.defaultProps = {
-    icon: 'rioglyph-wrench',
+const MaintenanceState = (props) => {
+    const { icon = 'rioglyph-wrench' } = props, remainingProps = tslib_1.__rest(props, ["icon"]);
+    return (0, jsx_runtime_1.jsx)(CustomState_1.default, Object.assign({ icon: icon }, remainingProps));
 };
-MaintenanceState.propTypes = baseStatePropTypes_1.baseStatePropTypes;
 exports.default = MaintenanceState;

package/lib/es/components/states/NotBookedState.d.ts

@@ -1,20 +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;
-declare function NotBookedState(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace NotBookedState {
-    namespace defaultProps {
-        const icon: string;
-    }
-    namespace propTypes {
-        const headline: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const message: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const features: PropTypes.Requireable<(NonNullable<PropTypes.ReactNodeLike> | null | undefined)[]>;
-        const buttons: PropTypes.Requireable<(PropTypes.InferProps<{
-            text: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-            className: PropTypes.Requireable<string>;
-            onClick: PropTypes.Requireable<(...args: any[]) => any>;
-            href: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        const condensed: PropTypes.Requireable<boolean>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/states/NotBookedState.js

@@ -2,29 +2,14 @@
 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 CustomState_1 = tslib_1.__importDefault(require("./CustomState"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const isArray_1 = tslib_1.__importDefault(require("lodash/fp/isArray"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
-const NotBookedState = props => {
-    const { message, features } = props, remainingProps = tslib_1.__rest(props, ["message", "features"]);
-    const combinedMessages = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [message && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-medium margin-bottom-20' }, { children: message })), features && (0, isArray_1.default)(features) && !(0, isEmpty_1.default)(features) && ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'feature-list' }, { children: features.map((feature, index) => ((0, jsx_runtime_1.jsx)("li", { children: feature }, index))) })))] }));
-    return (0, jsx_runtime_1.jsx)(CustomState_1.default, Object.assign({ message: combinedMessages }, remainingProps));
-};
-NotBookedState.defaultProps = {
-    icon: 'rioglyph-stars',
-};
-NotBookedState.propTypes = {
-    headline: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    message: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    features: prop_types_1.default.arrayOf(prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node])),
-    buttons: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        text: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]).isRequired,
-        className: prop_types_1.default.string,
-        onClick: prop_types_1.default.func,
-        href: prop_types_1.default.string,
-    })),
-    condensed: prop_types_1.default.bool,
+const CustomState_1 = tslib_1.__importDefault(require("./CustomState"));
+const NotBookedState = (props) => {
+    const { message, features, icon = 'rioglyph-stars' } = props, remainingProps = tslib_1.__rest(props, ["message", "features", "icon"]);
+    const combinedMessages = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [message && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-medium margin-bottom-20' }, { children: message })), features && (0, isArray_1.default)(features) && !(0, isEmpty_1.default)(features) && ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'feature-list' }, { children: features.map((feature, index) => ((0, jsx_runtime_1.jsx)("li", { children: feature }, index))) })))] }));
+    return (0, jsx_runtime_1.jsx)(CustomState_1.default, Object.assign({ message: combinedMessages, icon: icon }, remainingProps));
 };
 exports.default = NotBookedState;

package/lib/es/components/states/NotFoundState.d.ts

@@ -1,9 +1,5 @@
+import { type PropsWithChildren } from 'react';
+import type { BaseStateProps } from './BaseStateProps';
+export type NotFoundStateProps = BaseStateProps;
+declare const NotFoundState: (props: PropsWithChildren<NotFoundStateProps>) => import("react/jsx-runtime").JSX.Element;
 export default NotFoundState;
-declare function NotFoundState(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace NotFoundState {
-    export namespace defaultProps {
-        const icon: string;
-    }
-    export { baseStatePropTypes as propTypes };
-}
-import { baseStatePropTypes } from "./baseStatePropTypes";

package/lib/es/components/states/NotFoundState.js

@@ -2,12 +2,11 @@
 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"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const CustomState_1 = tslib_1.__importDefault(require("./CustomState"));
-const baseStatePropTypes_1 = require("./baseStatePropTypes");
-const NotFoundState = props => (0, jsx_runtime_1.jsx)(CustomState_1.default, Object.assign({}, props));
-NotFoundState.defaultProps = {
-    icon: 'rioglyph-looking-glass-man',
+const NotFoundState = (props) => {
+    const { icon = 'rioglyph-looking-glass-man' } = props, remainingProps = tslib_1.__rest(props, ["icon"]);
+    return (0, jsx_runtime_1.jsx)(CustomState_1.default, Object.assign({ icon: icon }, remainingProps));
 };
-NotFoundState.propTypes = baseStatePropTypes_1.baseStatePropTypes;
 exports.default = NotFoundState;

package/lib/es/components/states/StateButton.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export type StateButtonProps = {
+    /**
+     * The button text.
+     *
+     * This can also be a node with an icon to be shown on the button.
+     */
+    text: string | React.ReactNode;
+    /**
+     * Callback fired after the component starts to collapse.
+     *
+     * @default () => {}
+     */
+    onClick?: VoidFunction;
+    /**
+     * Instead of a callback for the button you can specify a "href".
+     *
+     * This way it will render a link button instead.
+     */
+    href?: string;
+    /**
+     * Additional classes assigned to the button.
+     */
+    className?: string;
+};
+declare const StateButton: ({ text, className, onClick, href }: StateButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default StateButton;

package/lib/es/components/states/StateButton.js

@@ -0,0 +1,16 @@
+"use strict";
+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 classnames_1 = tslib_1.__importDefault(require("classnames"));
+const StateButton = ({ text, className, onClick = () => { }, href }) => {
+    const buttonClassNames = (0, classnames_1.default)('btn btn-primary', 'margin-top-10', className && className);
+    // In case a href is given, render a link button instead
+    if (href) {
+        return ((0, jsx_runtime_1.jsx)("a", Object.assign({ className: buttonClassNames, href: href, onClick: onClick }, { children: text })));
+    }
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: buttonClassNames, type: 'button', onClick: onClick }, { children: text })));
+};
+exports.default = StateButton;

package/lib/es/components/states/StateIcon.d.ts

@@ -0,0 +1,7 @@
+export type StateIconProps = {
+    name?: string;
+    className?: string;
+    color?: string;
+};
+declare const StateIcon: ({ name, color, className }: StateIconProps) => import("react/jsx-runtime").JSX.Element;
+export default StateIcon;

package/lib/es/components/states/StateIcon.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+const StateIcon = ({ name, color = 'text-color-light', className = 'text-size-300pct' }) => ((0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${name} ${color} ${className}` }));
+exports.default = StateIcon;