@rio-cloud/rio-uikit 1.12.0 → 1.13.0

package/components/charts/YAxis.js

@@ -1,2 +0,0 @@
-const YAxis = props => null;
-export default YAxis;

package/components/charts/chartHelper.d.ts

@@ -1,10 +0,0 @@
-export type DataType = Record<string, unknown> & {
-    color?: string;
-};
-export declare const CURSOR_BACKGROUND_COLOR = "#a7afbb24";
-export declare const defaultChartColors: string[];
-export declare const getFromDefaultColors: (index: number) => string;
-export declare const getColor: (colorKey?: string) => string | undefined;
-export declare const mapGridOptions: <T extends {
-    stroke?: string;
-}>(gridOptions?: T) => T | undefined;

package/components/charts/chartHelper.js

@@ -1,19 +0,0 @@
-import colorsJson from '../../styles/variables/colors/colors.json';
-const colors = colorsJson;
-export const CURSOR_BACKGROUND_COLOR = '#a7afbb24';
-const brightColors = ['color-warmup-corn', 'color-coldplay-khaki'];
-export const defaultChartColors = Object.keys(colors)
-    .reverse()
-    .filter(key => !brightColors.includes(key))
-    .map(key => colors[key]);
-export const getFromDefaultColors = (index) => defaultChartColors[index];
-export const getColor = (colorKey) => (colorKey ? colors[colorKey] : undefined);
-export const mapGridOptions = (gridOptions) => {
-    if (!gridOptions) {
-        return;
-    }
-    const mappedGridOptions = { ...gridOptions };
-    const { stroke } = mappedGridOptions;
-    mappedGridOptions.stroke = stroke && !stroke.startsWith('#') ? getColor(stroke) : stroke;
-    return mappedGridOptions;
-};

package/components/checkbox/Checkbox.d.ts

@@ -1,136 +0,0 @@
-import React, { type ReactNode, type PropsWithChildren } from 'react';
-declare const ICON_LABEL_VERTICAL = "vertical";
-declare const ICON_LABEL_HORIZONTAL = "horizontal";
-export type CheckboxProps = {
-    /**
-     * Passed through as HTML attribute to the underlying input.
-     * Set an `id` or a `name` otherwise.
-     */
-    id?: string;
-    /**
-     * Passed through as HTML attribute to the underlying input
-     */
-    name?: string;
-    /**
-     * Define some text or component as a label.
-     */
-    label?: string | ReactNode;
-    /**
-     * Define a custom icon for the checkbox by naming a rioglyph icon like `rioglyph-truck`.
-     */
-    icon?: string;
-    /**
-     * The icon size in pixel.
-     */
-    iconSize?: number;
-    /**
-     * The label position for a custom icon checkbox. Using this on a regular checkbox has no effect.
-     *
-     * Possible values are: `horizontal` or `vertical`.
-     */
-    iconLabelPosition?: typeof ICON_LABEL_VERTICAL | typeof ICON_LABEL_HORIZONTAL;
-    /**
-     * Callback function that is invoked when the checkbox is checked or unchecked.
-     * @param event
-     * @returns
-     */
-    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
-    /**
-     * Callback function that is invoked when the checkbox value changes.
-     * This will also be invoked by a keyboard event.
-     * @param event
-     * @returns
-     */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Defines whether the checkbox is checked or not (state cannot be changed).
-     */
-    checked?: boolean;
-    /**
-     * Defines whether the checkbox is initially checked or not (state can be changed on click).
-     */
-    defaultChecked?: boolean;
-    /**
-     * Defines whether the checkbox is disabled or not.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Allows for rendering a completely different layout with or without a checkbox tick.
-     * Note, when using the `custom` option, make sure to wrap the children with the class name
-     * `checkbox-text-wrapper`. For using the checkbox tick, use an element with class name
-     * `checkbox-text`.
-     *
-     * @example
-     *
-     * ```tsx
-     * <div className='checkbox-text-wrapper display-flex justify-content-between'>
-     *     <div className='margin-right-15'>
-     *         <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
-     *         <div className='text-color-dark'>This option is a first option</div>
-     *     </div>
-     *     <div className='checkbox-text' />
-     * </div>
-     * ```
-     */
-    custom?: boolean;
-    /**
-     * Defines whether the checkbox is required or not.
-     *
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Defines if the checkbox is in an indeterminate state in regard to other checkboxes that may be in different
-     * selection state.
-     *
-     * @default false
-     */
-    indeterminate?: boolean;
-    /**
-     * Defines whether the checkbox is applying an inline style. Use this in combination
-     * with other checkboxes.
-     *
-     * @default false
-     */
-    inline?: boolean;
-    /**
-     * Defines whether the checkbox is on the right side.
-     *
-     * @default false
-     */
-    right?: boolean;
-    /**
-     * Use "error" to change color of the checkbox.
-     *
-     * @default false
-     */
-    error?: boolean;
-    /**
-     * Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size.
-     *
-     * Possible values are:
-     * `large`
-     */
-    size?: 'large';
-    /**
-     * A React ref assigned to the input itself.
-     */
-    inputRef?: React.RefObject<HTMLInputElement>;
-    /**
-     * Number of the index used for keyboard support.
-     *
-     * @default 0
-     */
-    tabIndex?: number;
-    /**
-     * Additional classes to be set on the input field.
-     */
-    className?: string;
-};
-declare const Checkbox: {
-    (props: PropsWithChildren<CheckboxProps>): import("react/jsx-runtime").JSX.Element;
-    ICON_LABEL_VERTICAL: "vertical";
-    ICON_LABEL_HORIZONTAL: "horizontal";
-};
-export default Checkbox;

package/components/checkbox/Checkbox.js

@@ -1,55 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useEffect } from 'react';
-import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import { CheckboxIcon } from './CheckboxIcon';
-const DEFAULT_ICON_SIZE = 16;
-const ICON_LABEL_VERTICAL = 'vertical';
-const ICON_LABEL_HORIZONTAL = 'horizontal';
-const Checkbox = (props) => {
-    const { checked, children, className, custom = false, defaultChecked, disabled = false, error = false, icon = '', iconLabelPosition = ICON_LABEL_VERTICAL, iconSize = DEFAULT_ICON_SIZE, id = props.name, indeterminate = false, inline = false, inputRef, label, name, onChange = noop, onClick = noop, required = false, right, size, tabIndex = 0, ...remainingProps } = props;
-    const labelRef = useRef(null);
-    useEffect(() => {
-        const input = labelRef.current?.firstChild;
-        if (input) {
-            input.indeterminate = indeterminate;
-        }
-    }, [indeterminate, labelRef.current]);
-    const handleToggleKeyDown = (event) => {
-        switch (event.key) {
-            case ' ':
-                // toggle on space
-                toggle(event);
-                break;
-            case 'Enter':
-                // open on enter
-                toggle(event);
-                break;
-            default:
-                break;
-        }
-    };
-    const toggle = (event) => {
-        event.preventDefault();
-        if (disabled) {
-            return;
-        }
-        const input = labelRef.current?.firstChild;
-        if (input.indeterminate) {
-            input.indeterminate = false;
-        }
-        input.checked = !input.checked;
-        onClick(event);
-        onChange(event);
-    };
-    const text = label || children;
-    const labelClassnames = classNames('checkbox', inline && 'checkbox-inline', size === 'large' && 'checkbox-large', right && 'checkbox-right', className);
-    const inputClassnames = classNames(error && 'error', size === 'large' && 'large', indeterminate && 'indeterminate', className);
-    const renderCustomIcon = !!icon;
-    const renderCustomContent = custom && children;
-    const renderDefault = !icon && !custom;
-    return (_jsxs("label", { ...remainingProps, className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef, children: [_jsx("input", { id: id, name: name, type: 'checkbox', checked: checked, required: required, defaultChecked: defaultChecked, disabled: disabled, className: inputClassnames, onClick: onClick, onChange: onChange, ref: inputRef }), renderCustomIcon && (_jsx(CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && _jsx("span", { className: 'checkbox-text', children: text && _jsx("span", { children: text }) }), renderCustomContent && children] }));
-};
-Checkbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL;
-Checkbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL;
-export default Checkbox;

package/components/checkbox/CheckboxIcon.d.ts

@@ -1,9 +0,0 @@
-import type { ReactNode } from 'react';
-type CheckboxIconProps = {
-    icon: string;
-    iconSize: number;
-    iconLabelPosition: 'vertical' | 'horizontal';
-    text?: string | ReactNode;
-};
-export declare const CheckboxIcon: (props: CheckboxIconProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/components/checkbox/CheckboxIcon.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CheckboxIcon = (props) => {
-    const { icon, iconSize, iconLabelPosition, text } = props;
-    const iconStyles = {
-        width: `${iconSize}px`,
-        height: `${iconSize}px`,
-        fontSize: `${iconSize}px`,
-        lineHeight: `${iconSize}px`,
-    };
-    return (_jsxs("span", { className: `checkbox-icon label-${iconLabelPosition}`, children: [_jsx("span", { className: `rioglyph ${icon}`, style: iconStyles }), _jsx("span", { className: 'checkbox-label', children: text })] }));
-};

package/components/clearableInput/ClearableInput.d.ts

@@ -1,169 +0,0 @@
-import React from 'react';
-export declare const DEFAULT_TYPE = "text";
-export declare const SUPPORTED_TYPES: string[];
-export type MaskVisibility = 'always' | 'onFocus' | 'never';
-export type ClearableInputProps = {
-    /**
-     * Gives the input element the id.
-     */
-    id?: string;
-    /**
-     * Gives the input element a name.
-     */
-    name?: string;
-    /**
-     * The translated text that shall be shown when the input is empty.
-     */
-    placeholder?: string | React.ReactNode;
-    /**
-     * Defines the type of the input itself.
-     *
-     * There are three types supported:
-     * `text`, `email`, `password`.
-     */
-    type?: 'text' | 'password' | 'email';
-    /**
-     * Initial value of the ClearableInput. Pass this prop if you want to use this
-     * component as an uncontrolled component.
-     */
-    defaultValue?: string;
-    /**
-     * Value of the ClearableInput. Pass this prop if you want to use this
-     * component as a controlled component.
-     */
-    value?: string;
-    /**
-     * Defines the maximum amount of characters that can be entered.
-     */
-    maxLength?: number;
-    /**
-     * Defines the tab index to be added to the input element.
-     */
-    tabIndex?: number;
-    /**
-     * Defined whether or not the input has the error styling.
-     */
-    hasError?: boolean;
-    /**
-     * The callback ref for the underlying input. Alternatively, use can use a forward ref.
-     */
-    inputRef?: React.RefObject<HTMLInputElement>;
-    /**
-     * Sets autocomplete value for autosuggest forms.
-     */
-    autoComplete?: string;
-    /**
-     * Callback function for when the value changes. Receives new value as an argument.
-     * @param newValue
-     * @param event
-     * @returns
-     */
-    onChange?: (newValue: string, event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>) => void;
-    /**
-     * Callback function which gets triggered when the input looses the focus.
-     * @param event
-     * @returns
-     */
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    /**
-     * Callback function which gets triggered when the input gains the focus.
-     * @param event
-     * @returns
-     */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    /**
-     * Callback function for when the value is cleared via the clear button.
-     * @param event
-     * @returns
-     */
-    onClear?: (event: React.MouseEvent<HTMLSpanElement>) => void;
-    /**
-     * Callback function for every key pressed including `Enter` key.
-     * @param event
-     * @returns
-     */
-    onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    /**
-     * Callback triggered when clicked into the input to react on it like when using an auto suggest dropdown
-     * @param event
-     * @returns
-     */
-    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
-    /**
-     * The mask prop will allow to use the component with an input mask.
-     * It defines the pattern that should be followed.
-     *
-     * For more details on masking, checkout the third party documentation for the
-     * input mask here: {@link https://imask.js.org/guide.html}
-     *
-     * Simple masks can be defined as strings.
-     *
-     * The following characters will define mask format:
-     *
-     * Character: "0" = allowed input: "0-9" (digit)
-     *
-     * Character: "a" = allowed input: "a-z, A-Z" (letter)
-     *
-     * Character: "*" = allowed input: any character
-     *
-     * Character: "#" = allowed input: "0-9, a-z, A-Z" (digit or letter)
-     *
-     * Any other character in the mask is considered a fixed value.
-     *
-     * @example
-     * '-- ### ### ###' or '+49 00 000 00'
-     *
-     * @example
-     * ['0', '0', /[0-9]/, ' ', /[a-zA-Z]/]
-     *
-     */
-    mask?: string | (string | RegExp)[];
-    /**
-     * Placeholder to cover unfilled parts of the mask.
-     *
-     * @default '_'
-     */
-    maskPlaceholder?: string | null;
-    /**
-     * Disabled the input component.
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Controls when the mask pattern is visible.
-     * - 'always': Mask is always visible
-     * - 'onFocus': Mask is hidden but shown when input is focused (default)
-     * - 'never': Mask is never shown
-     *
-     * @default 'always'
-     */
-    maskVisibility?: MaskVisibility;
-    /**
-     * Whether mask prefix and placeholder should be displayed when input is empty and
-     * has no focus.
-     *
-     * @default false
-     * @deprecated please use maskVisibility='always' instead
-     */
-    alwaysShowMask?: boolean;
-    /**
-     * Additional classes to be set on the input element.
-     */
-    inputClassName?: string;
-    /**
-     * Additional classes to be set on the wrapper element.
-     */
-    className?: string;
-};
-type ChildrenProp = {
-    /**
-     * Providing a function enables the render props approach. The function gets the input props
-     * passed and is responsible for rendering the custom `input` component.
-     * @param props
-     * @returns
-     */
-    children?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;
-};
-declare const ClearableInput: React.ForwardRefExoticComponent<ClearableInputProps & ChildrenProp & React.RefAttributes<HTMLInputElement>>;
-export default ClearableInput;

package/components/clearableInput/ClearableInput.js

@@ -1,142 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// biome-ignore lint/style/useImportType: <explanation>
-import { useState, forwardRef, useRef } from 'react';
-import omit from 'lodash/fp/omit';
-import isNil from 'lodash/fp/isNil';
-import isEmpty from 'lodash/fp/isEmpty';
-import classNames from 'classnames';
-import isFunction from 'lodash/fp/isFunction';
-import noop from 'lodash/fp/noop';
-import { IMaskInput } from 'react-imask';
-import usePrevious from '../../hooks/usePrevious';
-import useMergeRefs from '../../hooks/useMergeRefs';
-export const DEFAULT_TYPE = 'text';
-export const SUPPORTED_TYPES = ['text', 'password', 'email'];
-const hasValue = (value) => !isEmpty(`${value}`);
-const ClearableInput = forwardRef((props, ref) => {
-    const { type = DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop, onBlur = noop, onFocus = noop, onClear = noop, onKeyPress = noop, onClick = noop, mask, maskPlaceholder = '_', maskVisibility = 'always', alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children, ...remainingProps } = props;
-    const initialValue = value || defaultValue || '';
-    const [inputValue, setInputValue] = useState(initialValue);
-    const [showClear, setShowClear] = useState(hasValue(initialValue));
-    const [isFocused, setIsFocused] = useState(false);
-    const isControlled = !isNil(value);
-    const internalMaskRef = useRef(null);
-    const mergedInternalMaskRef = useMergeRefs(internalMaskRef, inputRef, ref);
-    const hasMask = !!mask;
-    // Calculate if mask should be visible (lazy=false means visible, lazy=true means hidden)
-    const shouldShowMask = () => {
-        // For backward compatibility
-        if (alwaysShowMask) {
-            return true;
-        }
-        switch (maskVisibility) {
-            case 'always':
-                return true;
-            case 'onFocus':
-                return isFocused;
-            case 'never':
-                return false;
-            default:
-                return isFocused;
-        }
-    };
-    // Handles new input value and saves it in the local state.
-    // The value stored in the state is used for rendering.
-    const changeInternalValue = (newValue = '') => {
-        // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time
-        if (inputValue === newValue) {
-            return;
-        }
-        setInputValue(newValue);
-        setShowClear(hasValue(newValue));
-    };
-    // important for when used as a controlled component and value changes from the outside.
-    const previousValue = usePrevious(value);
-    if (previousValue !== value) {
-        changeInternalValue(value);
-    }
-    // only gets triggered on user interaction.
-    const handleChange = (event) => {
-        const newValue = event.target.value;
-        if (isControlled) {
-            onChange(newValue, event);
-        }
-        else {
-            changeInternalValue(newValue);
-            onChange(newValue, event);
-        }
-    };
-    const handleAccept = (newValue, maskRef, event) => {
-        if (!internalMaskRef.current) {
-            return;
-        }
-        // Simulate a ChangeEvent for backwards compatibility since react-imask does not return a change event itself
-        const syntheticEvent = {
-            target: internalMaskRef.current,
-            currentTarget: internalMaskRef.current,
-            // Standard synthetic event props
-            bubbles: true,
-            cancelable: true,
-            defaultPrevented: false,
-            isTrusted: true,
-            preventDefault: () => { },
-            stopPropagation: () => { },
-            persist: () => { },
-            nativeEvent: {},
-            type: 'change',
-            timeStamp: Date.now(),
-        };
-        // Set unmasked value manually if needed
-        // (you can use data-attributes or attach it directly)
-        syntheticEvent.target.unmaskedValue = maskRef.unmaskedValue;
-        if (isControlled) {
-            onChange(newValue, syntheticEvent);
-        }
-        else {
-            changeInternalValue(newValue);
-            onChange(newValue, syntheticEvent);
-        }
-    };
-    const handleInputFocus = (event) => {
-        setIsFocused(true);
-        onFocus(event);
-    };
-    const handleInputBlur = (event) => {
-        setIsFocused(false);
-        onBlur(event);
-    };
-    // Will be triggered on every key press but also when pressing 'Enter' for example
-    const handleKeyPress = (event) => {
-        onKeyPress(event);
-    };
-    const clearInputValue = (event) => {
-        changeInternalValue('');
-        onChange('', event);
-        if (onClear) {
-            onClear(event);
-        }
-    };
-    const classes = classNames('ClearableInput', 'input-group', hasError && 'has-error', disabled && 'pointer-events-none', className && className);
-    const inputClassNames = classNames('form-control', inputClassName, showClear && 'withClearButton', hasMask && 'withInputMask', disabled && 'disabled');
-    const clearButtonClassNames = classNames('clearButton', !showClear && 'hide');
-    const convertedType = type?.toLowerCase();
-    const inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;
-    const inputProps = {
-        ...omit(['value', 'defaultValue', 'onClear'])(remainingProps),
-        className: inputClassNames,
-        autoComplete,
-        type: inputType,
-        value: inputValue,
-        onKeyPress: handleKeyPress,
-        onBlur: handleInputBlur,
-        onFocus: handleInputFocus,
-        onChange: hasMask ? undefined : handleChange, // In case of masked input, the onAccept callback is used
-        onClick,
-        disabled,
-        maxLength: hasMask ? undefined : maxLength,
-        tabIndex,
-    };
-    const input = hasMask ? (_jsx(IMaskInput, { ...inputProps, inputRef: mergedInternalMaskRef, mask: mask, placeholderChar: maskPlaceholder, onAccept: handleAccept, lazy: !shouldShowMask(), overwrite: true })) : (_jsx("input", { ...inputProps, ref: inputRef || ref }));
-    return (_jsxs("div", { className: classes, children: [children && isFunction(children) ? children(inputProps) : input, _jsx("span", { className: clearButtonClassNames, onClick: clearInputValue, children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })] }));
-});
-export default ClearableInput;

package/components/collapse/Collapse.d.ts

@@ -1,40 +0,0 @@
-import { type PropsWithChildren } from 'react';
-type CollapseProps = {
-    /**
-     * Show the component and triggers the expand or collapse animation.
-     * @default false
-     */
-    open: boolean | undefined;
-    /** Deprecated, please use `open` instead. @deprecated */
-    in?: boolean;
-    /**
-     * Unmount the component (remove it from the DOM) when it is collapsed.
-     */
-    unmountOnExit?: boolean;
-    /**
-     * Run the expand animation when the component mounts, if it is initially shown.
-     * @default false
-     */
-    appear?: boolean;
-    /**
-     * Duration of the collapse animation in milliseconds.
-     * @default 270
-     */
-    timeout?: number;
-    /**
-     * Callback fired after the component has expanded.
-     * @returns
-     */
-    onEntered?: () => void;
-    /**
-     * Callback fired after the component has collapsed.
-     * @returns
-     */
-    onExited?: () => void;
-    /**
-     * Callback fired when the animation starts for either expand or collapse.
-     */
-    onAnimationStart?: () => void;
-};
-declare const Collapse: (props: PropsWithChildren<CollapseProps>) => import("react/jsx-runtime").JSX.Element;
-export default Collapse;

package/components/collapse/Collapse.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { motion, AnimatePresence } from 'framer-motion';
-import noop from 'lodash/fp/noop';
-const DEFAULT_ANIMATION_TIME_IN_MS = 200;
-const Collapse = (props) => {
-    const { open = false, unmountOnExit = false, appear = false, timeout = DEFAULT_ANIMATION_TIME_IN_MS, onEntered = noop, onExited = noop, onAnimationStart = noop, children, } = props;
-    const shouldKeepContentInDom = !unmountOnExit;
-    const handleAnimationStart = () => onAnimationStart();
-    const handleAnimationComplete = (definition) => {
-        if (definition === 'open') {
-            onEntered();
-        }
-        if (definition === 'collapsed') {
-            onExited();
-        }
-    };
-    const variants = {
-        open: { opacity: 1, height: 'auto' },
-        collapsed: { opacity: 0, height: 0 },
-    };
-    return (_jsx(_Fragment, { children: _jsx(AnimatePresence, { initial: appear, exitBeforeEnter: true, children: (open || shouldKeepContentInDom) && (_jsx(motion.div, { initial: 'collapsed', animate: open ? 'open' : 'collapsed', exit: 'collapsed', className: 'collapse display-block width-100pct', variants: variants, transition: { duration: timeout / 1000, ease: 'easeIn' }, onAnimationComplete: handleAnimationComplete, onAnimationStart: handleAnimationStart, children: children }, 'content')) }) }));
-};
-//
-export default Collapse;

package/components/contentLoader/ContentLoader.d.ts

@@ -1,55 +0,0 @@
-import { type PropsWithChildren } from 'react';
-declare const RECT = "rect";
-declare const CIRCLE = "circle";
-export type ContentLoaderProps = {
-    /**
-     * Sets the animation speed.
-     * @default 2
-     */
-    speed?: number;
-    /**
-     * Sets the height of the svg element.
-     * @default 14
-     */
-    height?: string | number;
-    /**
-     * Sets the width of the svg element.
-     * @default 100%
-     */
-    width?: string | number;
-    /**
-     * Sets the radius of the svg element. Only relevant for circle elements.
-     * @default 16
-     */
-    radius?: number;
-    /**
-     * Renders either a rectangle or circle.
-     *
-     * Possible values are:
-     * `ContentLoader.RECT`, `ContentLoader.CIRCLE` or `rect`, `circle`
-     */
-    type?: typeof RECT | typeof CIRCLE;
-    /**
-     * Additional class names to ab added to the wrapping svg element.
-     */
-    className?: string;
-    /** Rect object prop. Used internally. */
-    rx?: number;
-    /** Rect object prop. Used internally. */
-    ry?: number;
-};
-type ContentLoaderPropsWithChildren = PropsWithChildren<ContentLoaderProps>;
-/**
- * This UIKIT component is simple wrapper to make it easier to use with a predefined look and feel. It still
- * allows for more complex configurations as all additional props are passed down to the third-party
- * ContentLoader component. For individual customization, it allows passing svg components as rect or circle
- * directly as children.
- * @param props
- * @returns
- */
-declare const ContentLoader: {
-    (props: ContentLoaderPropsWithChildren): import("react/jsx-runtime").JSX.Element;
-    RECT: "rect";
-    CIRCLE: "circle";
-};
-export default ContentLoader;