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

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,34 @@
+import React from 'react';
+import type { BUTTON_STYLE } from '../../Button';
+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;
+    /**
+     * The style of the button.
+     *
+     * @default 'primary'
+     */
+    bsStyle?: BUTTON_STYLE;
+    /**
+     * Additional classes assigned to the button.
+     */
+    className?: string;
+};
+declare const StateButton: (props: StateButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default StateButton;

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

@@ -0,0 +1,17 @@
+"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 = (props) => {
+    const { text, bsStyle = 'primary', className, onClick = () => { }, href } = props;
+    // In case a href is given, render a link instead
+    if (href) {
+        return ((0, jsx_runtime_1.jsx)("a", Object.assign({ className: (0, classnames_1.default)('margin-top-15', className), href: href, onClick: onClick }, { children: text })));
+    }
+    const buttonClassNames = (0, classnames_1.default)('btn', 'margin-top-10', `btn-${bsStyle}`, className);
+    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;

package/lib/es/components/statsWidget/StatsWidgetNumber.js

@@ -8,6 +8,6 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const StatsWidgetNumber = (props) => {
     const { value = 0, total, label, className, clickable = false, onClick = () => { } } = props, remainingProps = tslib_1.__rest(props, ["value", "total", "label", "className", "clickable", "onClick"]);
     const wrapperClasses = (0, classnames_1.default)('StatsWidgetNumber', { 'cursor-pointer': clickable }, className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { onClick: onClick, className: wrapperClasses }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'StatsWidgetNumber-counter' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'StatsWidgetNumber-value' }, { children: value })), total && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'StatsWidgetNumber-total' }, { children: total }))] })), label && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'StatsWidgetNumber-label' }, { children: label }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { onClick: onClick, className: wrapperClasses }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'StatsWidgetNumber-counter' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'StatsWidgetNumber-value' }, { children: value })), (total || total === 0) && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'StatsWidgetNumber-total' }, { children: total }))] })), label && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'StatsWidgetNumber-label' }, { children: label }))] })));
 };
 exports.default = StatsWidgetNumber;

package/lib/es/components/steppedProgressBar/SteppedProgressBar.d.ts

@@ -1,35 +1,66 @@
+import { type ReactNode } from 'react';
+export type SteppedProgressBarLabel = {
+    /**
+     * The element shown in the step element.
+     *
+     * This can be a single step number or an icon element.
+     */
+    icon?: string | ReactNode;
+    /**
+     * The label shown below the step element.
+     */
+    label?: string | ReactNode;
+    /**
+     * Additional classes to be set on the label element.
+     */
+    labelClassName?: string;
+    /**
+     * Additional classes to be set on the label wrapping element.
+     */
+    labelWrapperClassName?: string;
+};
+export type SteppedProgressBarProps = {
+    /**
+     * Objects to defining the icon and the label of the navigation items.
+     *
+     * The icon can be a string or an icon.
+     */
+    labels: SteppedProgressBarLabel[];
+    /**
+     * Index of the selected navigation item.
+     */
+    selectedStepNumber: number;
+    /**
+     * Called with the new selected index after the user clicked a nav item.
+     */
+    onSelectedChanged: (selectedKey: number) => void;
+    /**
+     * The SteppedProgressBar Variant.
+     *
+     * One of "circle", "rectangle" or "roadsign".
+     *
+     * @default 'circle'
+     */
+    variant?: 'circle' | 'rectangle' | 'roadsign';
+    /**
+     * All navigation items with a higher index than this will be disabled.
+     */
+    disableFollowingPages?: number;
+    /**
+     * Deactivating the wrapping of bubbles on mobile.
+     *
+     * @default true
+     */
+    mobileBreakpoint?: boolean;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const SteppedProgressBar: {
+    (props: SteppedProgressBarProps): import("react/jsx-runtime").JSX.Element;
+    VARIANT_CIRCLE: "circle";
+    VARIANT_RECTANGLE: "rectangle";
+    VARIANT_ROADSIGN: "roadsign";
+};
 export default SteppedProgressBar;
-declare function SteppedProgressBar(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace SteppedProgressBar {
-    const VARIANT_CIRCLE: string;
-    const VARIANT_RECTANGLE: string;
-    const VARIANT_ROADSIGN: string;
-    namespace defaultProps {
-        const selectedStepNumber: number;
-        const labels: never[];
-        function onSelectedChanged(): void;
-        const variant: string;
-        const mobileBreakpoint: boolean;
-    }
-    namespace propTypes {
-        export const disableFollowingPages: PropTypes.Requireable<number>;
-        const onSelectedChanged_1: PropTypes.Validator<(...args: any[]) => any>;
-        export { onSelectedChanged_1 as onSelectedChanged };
-        const labels_1: PropTypes.Validator<(PropTypes.InferProps<{
-            icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-            label: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-            labelClassName: PropTypes.Requireable<string>;
-            labelWrapperClassName: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        export { labels_1 as labels };
-        export const itemClassName: PropTypes.Requireable<string>;
-        const selectedStepNumber_1: PropTypes.Validator<number>;
-        export { selectedStepNumber_1 as selectedStepNumber };
-        export const className: PropTypes.Requireable<string>;
-        const mobileBreakpoint_1: PropTypes.Requireable<boolean>;
-        export { mobileBreakpoint_1 as mobileBreakpoint };
-        const variant_1: PropTypes.Requireable<string>;
-        export { variant_1 as variant };
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/steppedProgressBar/SteppedProgressBar.js

@@ -2,21 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_1 = require("react");
 const react_bootstrap_1 = require("react-bootstrap");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const logPropError_1 = tslib_1.__importDefault(require("../../utils/logPropError"));
-const errorProps = [
-    {
-        prop: 'labelsClassName',
-        replacement: 'labels.labelClassName',
-    },
-];
-const SteppedProgressBar = props => {
-    const { className, variant, labels, mobileBreakpoint, selectedStepNumber, disableFollowingPages: disableFollowingPageIndex, onSelectedChanged, } = props;
+const SteppedProgressBar = (props) => {
+    const { labels, selectedStepNumber, onSelectedChanged, variant = 'circle', disableFollowingPages: disableFollowingPageIndex, mobileBreakpoint = true, className = '', } = props;
     const [disableFollowingPages, setDisableFollowingPages] = (0, react_1.useState)(disableFollowingPageIndex ? disableFollowingPageIndex : selectedStepNumber);
-    (0, logPropError_1.default)(errorProps, props, 'SteppedProgressBar');
     (0, react_1.useEffect)(() => {
         if (disableFollowingPageIndex !== undefined) {
             if (disableFollowingPageIndex < selectedStepNumber) {
@@ -30,39 +21,11 @@ const SteppedProgressBar = props => {
             setDisableFollowingPages(selectedStepNumber);
         }
     }, [disableFollowingPageIndex, selectedStepNumber]);
-    const handleSelect = selectedKey => onSelectedChanged(Number(selectedKey));
     const wrapperClasses = (0, classnames_1.default)('stepped-progress-bar', variant && `variant-${variant}`, mobileBreakpoint && 'mobile-breakpoint', className && className);
-    return ((0, jsx_runtime_1.jsx)(react_bootstrap_1.Nav, Object.assign({ className: wrapperClasses, activeKey: selectedStepNumber, onSelect: handleSelect }, { children: labels.map((labelObject, index) => {
-            return ((0, jsx_runtime_1.jsx)(react_bootstrap_1.Nav.Link, Object.assign({ eventKey: index, disabled: index > disableFollowingPages, as: 'a', className: (0, classnames_1.default)('step-tab', labelObject.labelWrapperClassName) }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'step-tab-content' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'item-icon' }, { children: labelObject.icon })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)('item-label', labelObject.labelClassName) }, { children: labelObject.label }))] })) }), index));
-        }) })));
+    const handleSelect = (selectedKey) => onSelectedChanged(Number(selectedKey));
+    return ((0, jsx_runtime_1.jsx)(react_bootstrap_1.Nav, Object.assign({ className: wrapperClasses, activeKey: selectedStepNumber, onSelect: handleSelect }, { children: labels.map((labelObject, index) => ((0, jsx_runtime_1.jsx)(react_bootstrap_1.Nav.Link, Object.assign({ eventKey: index, disabled: index > disableFollowingPages, as: 'a', className: (0, classnames_1.default)('step-tab', labelObject.labelWrapperClassName) }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'step-tab-content' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'item-icon' }, { children: labelObject.icon })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)('item-label', labelObject.labelClassName) }, { children: labelObject.label }))] })) }), index))) })));
 };
 SteppedProgressBar.VARIANT_CIRCLE = 'circle';
 SteppedProgressBar.VARIANT_RECTANGLE = 'rectangle';
 SteppedProgressBar.VARIANT_ROADSIGN = 'roadsign';
-SteppedProgressBar.defaultProps = {
-    selectedStepNumber: 1,
-    labels: [],
-    onSelectedChanged: () => { },
-    variant: 'circle',
-    mobileBreakpoint: true,
-};
-SteppedProgressBar.propTypes = {
-    disableFollowingPages: prop_types_1.default.number,
-    onSelectedChanged: prop_types_1.default.func.isRequired,
-    labels: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        icon: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-        label: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-        labelClassName: prop_types_1.default.string,
-        labelWrapperClassName: prop_types_1.default.string,
-    })).isRequired,
-    itemClassName: prop_types_1.default.string,
-    selectedStepNumber: prop_types_1.default.number.isRequired,
-    className: prop_types_1.default.string,
-    mobileBreakpoint: prop_types_1.default.bool,
-    variant: prop_types_1.default.oneOf([
-        SteppedProgressBar.VARIANT_CIRCLE,
-        SteppedProgressBar.VARIANT_RECTANGLE,
-        SteppedProgressBar.VARIANT_ROADSIGN,
-    ]),
-};
 exports.default = SteppedProgressBar;

package/lib/es/components/supportMarker/toggleSupportMarker.d.ts

@@ -1,3 +1,3 @@
-export const SUPPORT_MARKER_CLASS: "show-support-marker";
-export function toggleSupportMarker(): void;
-export function enableSupportMarker(enabled: any): void;
+export declare const SUPPORT_MARKER_CLASS = "show-support-marker";
+export declare const toggleSupportMarker: () => void;
+export declare const enableSupportMarker: (enabled: boolean) => void;

package/lib/es/components/supportMarker/toggleSupportMarker.js

@@ -15,7 +15,7 @@ const toggleSupportMarker = () => {
     }
 };
 exports.toggleSupportMarker = toggleSupportMarker;
-const enableSupportMarker = enabled => {
+const enableSupportMarker = (enabled) => {
     if (!document || !document.documentElement) {
         return;
     }

package/lib/es/components/switch/Switch.d.ts

@@ -1,6 +1,4 @@
 import { type PropsWithChildren } from 'react';
-declare const LABEL_POSITION_LEFT = "left";
-declare const LABEL_POSITION_RIGHT = "right";
 export type SwitchProps = {
     /**
      * Optional key that is used as key and as the id on the internal input.
@@ -8,12 +6,11 @@ export type SwitchProps = {
     keyName?: string;
     /**
      * Callback function triggered when clicking the button.
-     * @param toggleState
-     * @returns
      */
     onChange?: (toggleState: boolean) => void;
     /**
      * Set active / inactive state.
+     *
      * @default false
      */
     checked?: boolean;
@@ -23,6 +20,7 @@ export type SwitchProps = {
     minWidth?: number;
     /**
      * Disables the component.
+     *
      * @default false
      */
     disabled?: boolean;
@@ -37,15 +35,13 @@ export type SwitchProps = {
     /**
      * Defines the position of the switch label.
      *
-     * Possible values are:
-     * `Switch.LABEL_POSITION_LEFT`, `Switch.LABEL_POSITION_RIGHT` or
-     * `left`, `right`
+     * Possible values are `left` and `right`.
      */
-    labelPosition?: typeof LABEL_POSITION_LEFT | typeof LABEL_POSITION_RIGHT;
+    labelPosition?: 'left' | 'right';
 };
 declare const Switch: {
     (props: PropsWithChildren<SwitchProps>): import("react/jsx-runtime").JSX.Element;
-    LABEL_POSITION_LEFT: "right";
+    LABEL_POSITION_LEFT: "left";
     LABEL_POSITION_RIGHT: "right";
 };
 export default Switch;

package/lib/es/components/switch/Switch.js

@@ -6,10 +6,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const LABEL_POSITION_LEFT = 'left';
-const LABEL_POSITION_RIGHT = 'right';
 const Switch = (props) => {
-    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, disabledText, labelPosition, children, onChange = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "disabledText", "labelPosition", "children", "onChange"]);
+    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, disabledText, children, labelPosition = !!children ? 'right' : undefined, onChange = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "disabledText", "children", "labelPosition", "onChange"]);
     const handleChange = (event) => {
         onChange(event.target.checked);
     };
@@ -22,6 +20,6 @@ const Switch = (props) => {
     const switchContentStyles = { minWidth };
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: 'uikit-switch' }, { children: (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: switchLabelClasses }, { children: [(0, jsx_runtime_1.jsx)("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: switchContentClasses, style: switchContentStyles }, { children: [hasMultipleText ? ((0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && (0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), (0, jsx_runtime_1.jsx)("div", { className: 'switch-handle' })] })), children && children] })) })));
 };
-Switch.LABEL_POSITION_LEFT = LABEL_POSITION_LEFT;
-Switch.LABEL_POSITION_RIGHT = LABEL_POSITION_LEFT;
+Switch.LABEL_POSITION_LEFT = 'left';
+Switch.LABEL_POSITION_RIGHT = 'right';
 exports.default = Switch;

package/lib/es/components/table/SortArrowDown.d.ts

@@ -0,0 +1,3 @@
+export type SortArrowDownProps = {};
+declare const SortArrowDown: () => import("react/jsx-runtime").JSX.Element;
+export default SortArrowDown;

package/lib/es/components/table/SortArrowDown.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+const SortArrowDown = () => (0, jsx_runtime_1.jsx)("span", { className: 'sort-icon sort-desc' });
+exports.default = SortArrowDown;

package/lib/es/components/table/SortArrowUp.d.ts

@@ -0,0 +1,3 @@
+export type SortArrowUpProps = {};
+declare const SortArrowUp: () => import("react/jsx-runtime").JSX.Element;
+export default SortArrowUp;

package/lib/es/components/table/SortArrowUp.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+const SortArrowUp = () => (0, jsx_runtime_1.jsx)("span", { className: 'sort-icon sort-asc' });
+exports.default = SortArrowUp;

package/lib/es/components/table/SortArrows.d.ts

@@ -1,5 +1,5 @@
-export function SortArrowUp(): import("react/jsx-runtime").JSX.Element;
-export function SortArrowDown(): import("react/jsx-runtime").JSX.Element;
-export function SortArrows({ direction }: {
-    direction: any;
-}): import("react/jsx-runtime").JSX.Element;
+export type SortArrowsProps = {
+    direction?: string;
+};
+declare const SortArrows: ({ direction }: SortArrowsProps) => import("react/jsx-runtime").JSX.Element;
+export default SortArrows;

package/lib/es/components/table/SortArrows.js

@@ -1,13 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SortArrows = exports.SortArrowDown = exports.SortArrowUp = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
+require("react");
 const toLower_1 = tslib_1.__importDefault(require("lodash/fp/toLower"));
-const SortArrowUp = () => (0, jsx_runtime_1.jsx)("span", { className: 'sort-icon sort-asc' });
-exports.SortArrowUp = SortArrowUp;
-const SortArrowDown = () => (0, jsx_runtime_1.jsx)("span", { className: 'sort-icon sort-desc' });
-exports.SortArrowDown = SortArrowDown;
-const SortArrows = ({ direction }) => (0, jsx_runtime_1.jsx)("span", { className: `sort-arrows sort-${(0, toLower_1.default)(direction)}` });
-exports.SortArrows = SortArrows;
+const SortArrows = ({ direction }) => ((0, jsx_runtime_1.jsx)("span", { className: `sort-arrows ${direction ? `sort-${(0, toLower_1.default)(direction)}` : ''}` }));
+exports.default = SortArrows;

package/lib/es/components/table/TableCardsSorting.d.ts

@@ -1,37 +1,49 @@
+import React from 'react';
+type TableCardsSortingOption = {
+    /**
+     * ID to use for the select option.
+     */
+    id: string;
+    /**
+     * Translated column label to be shown in the select.
+     */
+    label: string | React.ReactNode;
+    /**
+     * Defines the column which is currently sorted by.
+     */
+    selected?: boolean;
+    /**
+     * Defines if the column can be sorted.
+     *
+     * Hence, it will be disabled in the select.
+     */
+    disabled?: boolean;
+};
+export type TableCardsSortingProps = {
+    /**
+     * "Name", "Key", or "Id" of the current sorted column.
+     */
+    sortName: string;
+    /**
+     * Defines the sort direction.
+     *
+     * @default 'asc'
+     */
+    sortOrder: 'asc' | 'desc';
+    /**
+     * List of objects for the column name select component.
+     */
+    selectOptions: TableCardsSortingOption[];
+    /**
+     * Function that is called when the sort key or direction changes.
+     *
+     * @default noop
+     */
+    onSortChange?: (name: string, order: 'asc' | 'desc') => void;
+    /**
+     * Optional class names for the wrapper element.
+     */
+    className?: string;
+};
+declare const TableCardsSorting: (props: TableCardsSortingProps) => import("react/jsx-runtime").JSX.Element;
 export default TableCardsSorting;
-declare class TableCardsSorting extends React.Component<any, any, any> {
-    constructor(props: any);
-    state: {
-        sortName: any;
-        sortOrder: any;
-    };
-    setSortName(item: any): void;
-    setSortDirectionAsc(): void;
-    setSortDirectionDesc(): void;
-    setSortDirection(direction: any): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-declare namespace TableCardsSorting {
-    namespace defaultProps {
-        function onSortChange(): void;
-        const sortOrder: string;
-        const selectOptions: never[];
-    }
-    namespace propTypes {
-        export const sortName: PropTypes.Validator<string>;
-        const sortOrder_1: PropTypes.Validator<string>;
-        export { sortOrder_1 as sortOrder };
-        const onSortChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onSortChange_1 as onSortChange };
-        const selectOptions_1: PropTypes.Validator<(PropTypes.InferProps<{
-            id: PropTypes.Validator<string>;
-            label: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-            selected: PropTypes.Requireable<boolean>;
-            disabled: PropTypes.Requireable<boolean>;
-        }> | null | undefined)[]>;
-        export { selectOptions_1 as selectOptions };
-        export const className: PropTypes.Requireable<string>;
-    }
-}
-import React from "react";
-import PropTypes from "prop-types";