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

package/CustomState.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/CustomState' {
-    import React from 'react';
-    import { CustomStateProps } from './types';
-    export default class CustomState extends React.Component<CustomStateProps> {}
-}
+export { default } from './components/states/CustomState';
+export * from './components/states/CustomState';

package/CustomState.js

@@ -1,2 +1,2 @@
-import { default as _CustomState } from './components/states/CustomState';
-export { _CustomState as default };
+export { default } from './components/states/CustomState';
+export * from './components/states/CustomState';

package/EmptyState.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/EmptyState' {
-    import React from 'react';
-    import { EmptyStateProps } from './types';
-    export default class EmptyState extends React.Component<EmptyStateProps> {}
-}
+export { default } from './components/states/EmptyState';
+export * from './components/states/EmptyState';

package/EmptyState.js

@@ -1,2 +1,2 @@
-import { default as _EmptyState } from './components/states/EmptyState';
-export { _EmptyState as default };
+export { default } from './components/states/EmptyState';
+export * from './components/states/EmptyState';

package/ErrorState.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/ErrorState' {
-    import React from 'react';
-    import { ErrorStateProps } from './types';
-    export default class ErrorState extends React.Component<ErrorStateProps> {}
-}
+export { default } from './components/states/ErrorState';
+export * from './components/states/ErrorState';

package/ErrorState.js

@@ -1,2 +1,2 @@
-import { default as _ErrorState } from './components/states/ErrorState';
-export { _ErrorState as default };
+export { default } from './components/states/ErrorState';
+export * from './components/states/ErrorState';

package/ForbiddenState.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/ForbiddenState' {
-    import React from 'react';
-    import { ForbiddenStateProps } from './types';
-    export default class ForbiddenState extends React.Component<ForbiddenStateProps> {}
-}
+export { default } from './components/states/ForbiddenState';
+export * from './components/states/ForbiddenState';

package/ForbiddenState.js

@@ -1,2 +1,2 @@
-import { default as _ForbiddenState } from './components/states/ForbiddenState';
-export { _ForbiddenState as default };
+export { default } from './components/states/ForbiddenState';
+export * from './components/states/ForbiddenState';

package/MaintenanceState.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/MaintenanceState' {
-    import React from 'react';
-    import { MaintenanceStateProps } from './types';
-    export default class MaintenanceState extends React.Component<MaintenanceStateProps> {}
-}
+export { default } from './components/states/MaintenanceState';
+export * from './components/states/MaintenanceState';

package/MaintenanceState.js

@@ -1,2 +1,2 @@
-import { default as _MaintenanceState } from './components/states/MaintenanceState';
-export { _MaintenanceState as default };
+export { default } from './components/states/MaintenanceState';
+export * from './components/states/MaintenanceState';

package/NotBookedState.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/NotBookedState' {
-    import React from 'react';
-    import { NotBookedStateProps } from './types';
-    export default class NotBookedState extends React.Component<NotBookedStateProps> {}
-}
+import { default as _NotBookedState } from './components/states/NotBookedState';
+export { _NotBookedState as default };

package/NotFoundState.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/NotFoundState' {
-    import React from 'react';
-    import { NotFoundStateProps } from './types';
-    export default class NotFoundState extends React.Component<NotFoundStateProps> {}
-}
+export { default } from './components/states/NotFoundState';
+export * from './components/states/NotFoundState';

package/NotFoundState.js

@@ -1,2 +1,2 @@
-import { default as _NotFoundState } from './components/states/NotFoundState';
-export { _NotFoundState as default };
+export { default } from './components/states/NotFoundState';
+export * from './components/states/NotFoundState';

package/Notification.d.ts

@@ -1,9 +1,2 @@
-declare module '@rio-cloud/rio-uikit/Notification' {
-    import { notificationTriggerFunction } from './types';
-    export default class Notification {
-        static success: notificationTriggerFunction;
-        static info: notificationTriggerFunction;
-        static warning: notificationTriggerFunction;
-        static error: notificationTriggerFunction;
-    }
-}
+export { default } from './components/notification/Notification';
+export * from './components/notification/Notification';

package/Notification.js

@@ -1,2 +1,2 @@
-import { default as _Notification } from './components/notification/Notification';
-export { _Notification as default };
+export { default } from './components/notification/Notification';
+export * from './components/notification/Notification';

package/NotificationsContainer.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/NotificationsContainer' {
-    import React from 'react';
-    import { NotificationsContainerProps } from './types';
-    export default class NotificationsContainer extends React.Component<NotificationsContainerProps> {}
-}
+export { default } from './components/notification/NotificationsContainer';
+export * from './components/notification/NotificationsContainer';

package/NotificationsContainer.js

@@ -1,2 +1,2 @@
-import { default as _NotificationsContainer } from './components/notification/NotificationsContainer';
-export { _NotificationsContainer as default };
+export { default } from './components/notification/NotificationsContainer';
+export * from './components/notification/NotificationsContainer';

package/Tag.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/Tag' {
-    import React from 'react';
-    import { TagProps } from './types';
-    export default class Tag extends React.Component<TagProps> {}
-}
+export { default } from './components/tag/Tag';
+export * from './components/tag/Tag';

package/Tag.js

@@ -1,2 +1,2 @@
-import { default as _Tag } from './components/tag/Tag';
-export { _Tag as default };
+export { default } from './components/tag/Tag';
+export * from './components/tag/Tag';

package/TagList.d.ts

@@ -1,5 +1 @@
-declare module '@rio-cloud/rio-uikit/TagList' {
-    import React from 'react';
-    import { TagListProps } from './types';
-    export default class TagList extends React.Component<TagListProps> {}
-}
+export { default } from './components/tag/TagList';

package/TagList.js

@@ -1,2 +1 @@
-import { default as _TagList } from './components/tag/TagList';
-export { _TagList as default };
+export { default } from './components/tag/TagList';

package/TagManager.d.ts

@@ -1,5 +1,2 @@
-import React from 'react';
-import { TagManagerProps } from './types';
-
-export { TagManagerTag } from './types';
-export default class TagManager extends React.Component<TagManagerProps> {}
+export { default } from './components/tagManager/TagManager';
+export * from './components/tagManager/TagManager';

package/TagManager.js

@@ -1,2 +1,2 @@
-import { default as _TagManager } from './components/tagManager/TagManager';
-export { _TagManager as default };
+export { default } from './components/tagManager/TagManager';
+export * from './components/tagManager/TagManager';

package/Teaser.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/Teaser' {
-    import React from 'react';
-    import { TeaserProps } from './types';
-    export default class Teaser extends React.Component<TeaserProps> {}
-}
+export { default } from './components/teaser/Teaser';
+export * from './components/teaser/Teaser';

package/Teaser.js

@@ -1,2 +1,2 @@
-import { default as _Teaser } from './components/teaser/Teaser';
-export { _Teaser as default };
+export { default } from './components/teaser/Teaser';
+export * from './components/teaser/Teaser';

package/TeaserContainer.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/TeaserContainer' {
-    import React from 'react';
-    import { TeaserContainerProps } from './types';
-    export default class TeaserContainer extends React.Component<TeaserContainerProps> {}
-}
+export { default } from './components/teaser/TeaserContainer';
+export * from './components/teaser/TeaserContainer';

package/TeaserContainer.js

@@ -1,2 +1,2 @@
-import { default as _TeaserContainer } from './components/teaser/TeaserContainer';
-export { _TeaserContainer as default };
+export { default } from './components/teaser/TeaserContainer';
+export * from './components/teaser/TeaserContainer';

package/TimePicker.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/TimePicker' {
-    import React from 'react';
-    import { TimePickerProps } from './types';
-    export default class TimePicker extends React.Component<TimePickerProps> {}
-}
+export { default } from './components/timepicker/TimePicker';
+export * from './components/timepicker/TimePicker';

package/TimePicker.js

@@ -1,2 +1,2 @@
-import { default as _TimePicker } from './components/timepicker/TimePicker';
-export { _TimePicker as default };
+export { default } from './components/timepicker/TimePicker';
+export * from './components/timepicker/TimePicker';

package/components/expander/ExpanderPanel.d.ts

@@ -19,6 +19,7 @@ declare namespace ExpanderPanel {
         export const className: PropTypes.Requireable<string>;
         export const headerClassName: PropTypes.Requireable<string>;
         export const titleClassName: PropTypes.Requireable<string>;
+        export const iconClassName: PropTypes.Requireable<string>;
         export const bodyClassName: PropTypes.Requireable<string>;
         export const title: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
         const bsStyle_1: PropTypes.Requireable<string>;

package/components/expander/ExpanderPanel.js

@@ -2,10 +2,10 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import Collapse from '../collapse/Collapse';
 import classNames from 'classnames';
+import Collapse from '../collapse/Collapse';
 const ExpanderPanel = props => {
-    const { bsStyle, className, iconLeft, title, headerClassName, titleClassName, bodyClassName, mountOnEnter, unmountOnExit, onEnter, onEntering, onEntered, onExit, onExiting, onExited, children, onToggle, open } = props, remainingProps = __rest(props, ["bsStyle", "className", "iconLeft", "title", "headerClassName", "titleClassName", "bodyClassName", "mountOnEnter", "unmountOnExit", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "children", "onToggle", "open"]);
+    const { bsStyle, className, iconLeft, title, headerClassName, titleClassName, bodyClassName, iconClassName, mountOnEnter, unmountOnExit, onEnter, onEntering, onEntered, onExit, onExiting, onExited, children, onToggle, open } = props, remainingProps = __rest(props, ["bsStyle", "className", "iconLeft", "title", "headerClassName", "titleClassName", "bodyClassName", "iconClassName", "mountOnEnter", "unmountOnExit", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "children", "onToggle", "open"]);
     const [isOpen, setIsOpen] = useState(open);
     // Update internal state from external prop change
     useEffect(() => {
@@ -17,7 +17,7 @@ const ExpanderPanel = props => {
         onToggle(newState);
     };
     const wrapperClassNames = classNames('expander-panel panel', `panel-${bsStyle}`, className);
-    const iconClassNames = classNames('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
+    const iconClassNames = classNames('expander-icon', iconClassName, 'rioglyph', 'rioglyph-chevron-down');
     const headerClassNames = classNames('panel-heading', isOpen && 'open', iconLeft && 'icon-left', headerClassName && headerClassName);
     const titleClassNames = classNames('title', titleClassName && titleClassName);
     const bodyClassNames = classNames('panel-body', bodyClassName && bodyClassName);
@@ -42,6 +42,7 @@ ExpanderPanel.propTypes = {
     className: PropTypes.string,
     headerClassName: PropTypes.string,
     titleClassName: PropTypes.string,
+    iconClassName: PropTypes.string,
     bodyClassName: PropTypes.string,
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
     bsStyle: PropTypes.oneOf([

package/components/notification/Notification.d.ts

@@ -1 +1,32 @@
-export default Notification;
+import React from 'react';
+type TriggerFunction = (
+/**
+ * The message to be shown.
+ */
+message: string | React.ReactNode, 
+/**
+ * The title to be shown.
+ */
+title?: string | React.ReactNode, 
+/**
+ * The popup timeout in milliseconds.
+ *
+ * If you do not want it to automatically disappear you can define a very high timeOut.
+ */
+timeOut?: number, 
+/**
+ * A function that gets invoked when the notification is clicked.
+ */
+callback?: VoidFunction, 
+/**
+ * If true, the message gets inserted at the top of the notification stack.
+ */
+priority?: boolean) => void;
+type NotificationTypeStub = {
+    success: TriggerFunction;
+    info: TriggerFunction;
+    warning: TriggerFunction;
+    error: TriggerFunction;
+};
+declare const _default: NotificationTypeStub;
+export default _default;

package/components/notification/Notification.js

@@ -1,4 +1,5 @@
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+// @ts-ignore-next-line 7016
 import { NotificationManager as Notification } from 'react-notifications';
-// TODO: implement: if callback + missing time => sticky
-//const STICKY_TIME = 10000;
 export default Notification;

package/components/notification/NotificationsContainer.d.ts

@@ -1,14 +1,8 @@
+export type NotificationsContainerProps = {
+    /**
+     * Defines whether the notification are stacked.
+     */
+    stacked?: boolean;
+};
+declare const NotificationsContainer: ({ stacked }: NotificationsContainerProps) => import("react/jsx-runtime").JSX.Element;
 export default NotificationsContainer;
-declare function NotificationsContainer({ stacked }: {
-    stacked: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace NotificationsContainer {
-    namespace defaultProps {
-        const stacked: boolean;
-    }
-    namespace propTypes {
-        const stacked_1: PropTypes.Requireable<boolean>;
-        export { stacked_1 as stacked };
-    }
-}
-import PropTypes from "prop-types";

package/components/notification/NotificationsContainer.js

@@ -1,16 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+import 'react';
 import classNames from 'classnames';
+// @ts-ignore-next-line 7016
 import { NotificationContainer } from 'react-notifications';
 const NotificationsContainer = ({ stacked }) => {
     const wrapperClasses = classNames('notification-container-wrapper', stacked && 'stacked');
     return (_jsx("div", Object.assign({ className: wrapperClasses }, { children: _jsx(NotificationContainer, {}) })));
 };
-NotificationsContainer.defaultProps = {
-    stacked: false,
-};
-NotificationsContainer.propTypes = {
-    stacked: PropTypes.bool,
-};
 export default NotificationsContainer;

package/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/components/saveableInput/SaveableInput.js

@@ -9,15 +9,19 @@ import Button from '../../Button';
 import useKey from '../../hooks/useKey';
 import useEsc from '../../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, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, className, inputProps } = props, remainingProps = __rest(props, ["placeholder", "fixedPreviousValue", "previousValue", "value", "onValueChanged", "buttonStyle", "inputClassName", "className", "inputProps"]);
+    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', onValueChanged = noop, onInputChange, onEsc = noop, onEnterEdit = noop, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, icon, unit, disabled = false, className } = props, remainingProps = __rest(props, ["placeholder", "fixedPreviousValue", "previousValue", "value", "onValueChanged", "onInputChange", "onEsc", "onEnterEdit", "buttonStyle", "inputClassName", "inputProps", "icon", "unit", "disabled", "className"]);
     const externalOldValue = previousValue || fixedPreviousValue;
     const [inputValue, setInputValue] = useState(externalValue);
     const [oldInputValue, setOldInputValue] = useState(externalOldValue);
@@ -57,6 +61,7 @@ const SaveableInput = (props) => {
             setInputValue(initialInputValueRef.current);
             setOldInputValue(initialOldInputValueRef.current);
             setEditInput(false);
+            onEsc();
         }
     });
     const handleToggleInput = () => {
@@ -68,23 +73,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 = !isEmpty(oldInputValue) && oldInputValue !== inputValue && !editInput;
     const wrapperClasses = classNames('form-group', className);
-    const inputClasses = classNames('form-control', showOldValue && 'padding-bottom-0 padding-top-10 text-size-12', inputClassName);
+    const inputClasses = classNames('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 = classNames('position-absolute', 'top-2', 'left-10', 'margin-left-3', 'text-size-10', 'text-decoration-line-through', icon && 'padding-left-20');
     const buttonIconClasses = classNames('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
-    return (_jsx("div", Object.assign({}, remainingProps, { className: wrapperClasses }, { children: _jsxs("div", Object.assign({ className: 'input-group' }, { children: [_jsx("input", Object.assign({ type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput }, inputProps)), showOldValue && (_jsx("div", Object.assign({ className: 'position-absolute top-2 left-10 ' +
-                        'margin-left-3 text-size-10 text-decoration-line-through' }, { children: oldInputValue }))), _jsx("div", Object.assign({ className: 'input-group-btn' }, { children: _jsx(Button, Object.assign({ bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput }, { children: _jsx("span", { className: buttonIconClasses }) })) }))] })) })));
+    return (_jsx("div", Object.assign({}, remainingProps, { className: wrapperClasses }, { children: _jsxs("div", Object.assign({ className: 'input-group' }, { children: [icon && (_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true' }) }))), _jsx("input", Object.assign({ type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput }, inputProps)), unit && _jsx("div", Object.assign({ className: 'position-absolute right-0 margin-right-50' }, { children: unit })), showOldValue && _jsx("div", Object.assign({ className: oldValueClasses }, { children: oldInputValue })), _jsx("div", Object.assign({ className: 'input-group-btn' }, { children: _jsx(Button, Object.assign({ bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disabled }, { children: _jsx("span", { className: buttonIconClasses }) })) }))] })) })));
 };
 export default SaveableInput;

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";