@rio-cloud/rio-uikit 1.12.0 → 1.13.1

package/lib/es/src/components/fade/FadeExpander.d.ts

@@ -1,27 +0,0 @@
-import { type PropsWithChildren } from 'react';
-type FadeExpanderProps = {
-    /**
-     * Defines if the content is shown or not.
-     *
-     * @default false
-     */
-    show: boolean;
-    /**
-     * Allows customization of animation duration.
-     *
-     * @default 0.2
-     */
-    duration?: number;
-    /**
-     * Delay in seconds before starting the animation.
-     *
-     * @default 0
-     */
-    delay?: number;
-    /**
-     * Additional classes set to the wrapper element.
-     */
-    className?: string;
-};
-declare const FadeExpander: (props: PropsWithChildren<FadeExpanderProps>) => import("react/jsx-runtime").JSX.Element;
-export default FadeExpander;

package/lib/es/src/components/fade/FadeExpander.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const framer_motion_1 = require("framer-motion");
-const THRESHOLD_TIMEOUT_MS = 200;
-const FadeExpander = (props) => {
-    const { children, show = false, duration = 0.2, delay = 0, className = '' } = props;
-    const [isVisible, setIsVisible] = (0, react_1.useState)(show);
-    const [overflow, setOverflow] = (0, react_1.useState)('hidden'); // Start with hidden overflow
-    const durationRef = (0, react_1.useRef)(duration);
-    // Effect to manage visibility based on show prop
-    (0, react_1.useEffect)(() => {
-        if (show) {
-            // Set to visible when show is true
-            setIsVisible(true);
-        }
-        else {
-            // Set overflow to hidden immediately when show is false
-            setOverflow('hidden');
-            // Delay setting isVisible to false so the overflow can change before
-            setTimeout(() => {
-                setIsVisible(false);
-            }, 0);
-        }
-    }, [show]);
-    const handleAnimationComplete = () => {
-        if (show) {
-            // Set overflow to visible after animation is done
-            setTimeout(() => setOverflow('visible'), durationRef.current * 1000 + THRESHOLD_TIMEOUT_MS);
-        }
-    };
-    return (
-    // @ts-ignore
-    (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { onExitComplete: () => setOverflow('hidden'), children: isVisible && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
-                height: { duration, delay },
-                opacity: { duration, delay },
-                ease: 'easeIn',
-            }, 
-            // To ensures smooth height transition, the overflow should be "hidden" during the animation
-            style: { overflow }, onAnimationComplete: handleAnimationComplete, className: className, children: children })) }));
-};
-exports.default = FadeExpander;

package/lib/es/src/components/fade/FadeUp.d.ts

@@ -1,27 +0,0 @@
-import { type ComponentProps, type PropsWithChildren } from 'react';
-type FadeUpProps = Omit<ComponentProps<'div'>, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> & {
-    /**
-     * Defines the time the animation should wait until it starts.
-     *
-     * @default 0
-     */
-    delay?: number;
-    /**
-     * Defines the duration in seconds of the fade up animation.
-     *
-     * @default 0.4
-     */
-    duration?: number;
-    /**
-     * Defines the y offset from the bottom where the element starts to fade in.
-     *
-     * @default 15
-     */
-    offset?: number;
-    /**
-     * Additional classes names added to the motion div wrapper.
-     */
-    className?: string;
-};
-declare const FadeUp: (props: PropsWithChildren<FadeUpProps>) => import("react/jsx-runtime").JSX.Element;
-export default FadeUp;

package/lib/es/src/components/fade/FadeUp.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const framer_motion_1 = require("framer-motion");
-const useOnScreen_1 = tslib_1.__importDefault(require("../../hooks/useOnScreen"));
-const FadeUp = (props) => {
-    const { delay = 0, duration = 0.4, className = '', offset = 15, children, ...remainingProps } = props;
-    const ref = (0, react_1.useRef)(null);
-    const isInView = (0, useOnScreen_1.default)(ref);
-    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
-    const variants = {
-        hidden: {
-            opacity: 0,
-            y: offset,
-        },
-        visible: {
-            opacity: 1,
-            y: 0,
-        },
-    };
-    (0, react_1.useEffect)(() => {
-        if (isInView && !isVisible) {
-            setIsVisible(true);
-        }
-    }, [isInView, isVisible]);
-    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: ref, variants: variants, initial: 'hidden', animate: isVisible ? 'visible' : 'hidden', transition: { delay, type: 'spring', duration }, ...remainingProps, className: className, children: children }));
-};
-exports.default = FadeUp;

package/lib/es/src/components/feedback/FeedbackInlineButtons.d.ts

@@ -1,13 +0,0 @@
-import React, { type ComponentProps } from 'react';
-type FeedbackInlineButtonsProps = ComponentProps<'div'> & {
-    /**
-     * Optional headline inlined with the buttons.
-     */
-    headline?: React.ReactNode;
-    /**
-     * List of buttons to be shown.
-     */
-    buttons?: React.ReactNode[];
-};
-declare const FeedbackInlineButtons: (props: FeedbackInlineButtonsProps) => import("react/jsx-runtime").JSX.Element;
-export default FeedbackInlineButtons;

package/lib/es/src/components/feedback/FeedbackInlineButtons.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const FeedbackInlineButtons = (props) => {
-    const { buttons = [], headline, ...remainingProps } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: 'display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none', children: [headline && (0, jsx_runtime_1.jsx)("div", { className: 'text-color-dark', children: headline }), (0, jsx_runtime_1.jsx)("div", { className: 'btn-toolbar gap-5', children: buttons.map(button => button) })] }));
-};
-exports.default = FeedbackInlineButtons;

package/lib/es/src/components/feedback/FeedbackRating.d.ts

@@ -1,65 +0,0 @@
-import React, { type ComponentProps } from 'react';
-import type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';
-type FeedbackRatingProps = ComponentProps<'div'> & {
-    /**
-     * Optional headline
-     */
-    headline?: React.ReactNode;
-    /**
-     * The amount of toggle buttons used to rate.
-     *
-     * @default 1
-     */
-    count: number;
-    /**
-     * Defines whether the buttons are round.
-     *
-     * @default false
-     */
-    circleButtons?: boolean;
-    /**
-     * Optional class names applied to all the buttons.
-     * If you need more control on styling individual buttons, see `buttonStyles`.
-     */
-    buttonClassName?: string;
-    /**
-     * Array of button labels that will be used instead of the index.
-     * There needs to be a label for each button defined.
-     */
-    buttonLabels?: React.ReactNode[];
-    /**
-     * Array of button styles to individually define the button size, style and variant.
-     * There needs to be a item for each button defined.
-     */
-    buttonStyles?: {
-        bsSize?: BUTTON_SIZE;
-        bsStyle?: BUTTON_STYLE;
-        variant?: BUTTON_VARIANT;
-        className?: string;
-    }[];
-    /**
-     * Left aligned label to name the lowest rating option.
-     */
-    leftLabel?: React.ReactNode;
-    /**
-     * Right aligned label to name the highest rating option.
-     */
-    rightLabel?: React.ReactNode;
-    /**
-     * Additional icon placed in front of the rating buttons.
-     */
-    leadingIcon?: React.ReactNode;
-    /**
-     * Additional icon placed after the rating buttons.
-     */
-    trailingIcon?: React.ReactNode;
-    /**
-     * Callback triggered when the rating changes.
-     *
-     * @param rating The rating value. Undefined, when a toggle is unchecked.
-     * @returns
-     */
-    onRatingChanged?: (rating: number | undefined) => void;
-};
-declare const FeedbackRating: (props: FeedbackRatingProps) => import("react/jsx-runtime").JSX.Element;
-export default FeedbackRating;

package/lib/es/src/components/feedback/FeedbackRating.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = require("react");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_2 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const ToggleButton_1 = tslib_1.__importDefault(require("../button/ToggleButton"));
-const FeedbackRating = (props) => {
-    const { headline, count = 1, circleButtons = false, buttonLabels, buttonStyles, buttonClassName = '', leftLabel, rightLabel, leadingIcon, trailingIcon, onRatingChanged = () => { }, ...remainingProps } = props;
-    const [rating, setRating] = (0, react_2.useState)();
-    const handleRating = (value) => {
-        setRating(value);
-        onRatingChanged(value);
-    };
-    const hasSubLabels = !!leftLabel || !!rightLabel;
-    const buttonWrapperClasses = (0, classnames_1.default)('display-flex gap-10', hasSubLabels ? 'align-items-start' : 'align-items-center', 'text-size-14', 'margin-bottom-25');
-    const leadingTrailingIconClasses = (0, classnames_1.default)('display-flex align-items-center', 'text-size-200pct', hasSubLabels && 'padding-top-3');
-    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: 'FeedbackRating', children: [headline && (0, jsx_runtime_1.jsx)("div", { className: 'text-medium text-size-16 margin-bottom-10', children: headline }), (0, jsx_runtime_1.jsxs)("div", { className: buttonWrapperClasses, children: [leadingIcon && (0, jsx_runtime_1.jsx)("div", { className: leadingTrailingIconClasses, children: leadingIcon }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'display-flex flex-wrap gap-10', children: Array.from({ length: count }, (_, index) => {
-                                    const indexNumber = index + 1;
-                                    return ((0, react_1.createElement)(ToggleButton_1.default, { ...buttonStyles?.[index], key: indexNumber, active: rating === indexNumber, onClick: (toggled) => handleRating(toggled ? indexNumber : undefined), className: `${circleButtons ? 'rounded-circle aspect-ratio-1' : ''} ${buttonClassName} ${buttonStyles?.[index].className ?? ''}` }, buttonLabels?.[index] ?? indexNumber));
-                                }) }), hasSubLabels && ((0, jsx_runtime_1.jsxs)("div", { className: 'display-flex justify-content-between margin-top-5 gap-25', children: [leftLabel ? (0, jsx_runtime_1.jsx)("label", { className: 'word-wrap text-color-dark', children: leftLabel }) : (0, jsx_runtime_1.jsx)("div", {}), rightLabel ? (0, jsx_runtime_1.jsx)("label", { className: 'word-wrap text-color-dark', children: rightLabel }) : (0, jsx_runtime_1.jsx)("div", {})] }))] }), trailingIcon && (0, jsx_runtime_1.jsx)("div", { className: leadingTrailingIconClasses, children: trailingIcon })] })] }));
-};
-exports.default = FeedbackRating;

package/lib/es/src/components/feedback/FeedbackReactions.d.ts

@@ -1,71 +0,0 @@
-import React, { type ComponentProps } from 'react';
-type FeedbackReactionsProps = ComponentProps<'div'> & {
-    /**
-     * Optional headline inlined with the buttons.
-     */
-    headline?: React.ReactNode;
-    /**
-     * Size of the reaction buttons.
-     *
-     * @default 'md'
-     */
-    size?: 'sm' | 'md';
-    /**
-     * Position of the reaction button labels.
-     *
-     * @default 'bottom'
-     */
-    labelPosition?: 'right' | 'bottom';
-    /**
-     * Label for the up button.
-     */
-    labelUp?: React.ReactNode;
-    /**
-     * Label for the down button.
-     */
-    labelDown?: React.ReactNode;
-    /**
-     * Custom fill color for the up button.
-     *
-     * @default 'bg-lightest'
-     */
-    colorFillUp?: string;
-    /**
-     * Custom fill color for the down button.
-     *
-     * @default 'bg-lightest'
-     */
-    colorFillDown?: string;
-    /**
-     * Custom hover color for the up button.
-     *
-     * @default 'primary'
-     */
-    colorHoverUp?: string;
-    /**
-     * Custom hover color for the down button.
-     *
-     * @default 'primary'
-     */
-    colorHoverDown?: string;
-    /**
-     * Callback function triggered on up vote.
-     */
-    onVoteUp?: VoidFunction;
-    /**
-     * Callback function triggered on down vote.
-     */
-    onVoteDown?: VoidFunction;
-    /**
-     * Additional classes applied to the individual reaction item (button and label).
-     */
-    itemClassName?: string;
-    /**
-     * Defines whether the reaction icon is animated.
-     *
-     * @default false
-     */
-    animated?: boolean;
-};
-declare const FeedbackReactions: (props: FeedbackReactionsProps) => import("react/jsx-runtime").JSX.Element;
-export default FeedbackReactions;

package/lib/es/src/components/feedback/FeedbackReactions.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const framer_motion_1 = require("framer-motion");
-const useHover_1 = tslib_1.__importDefault(require("../../hooks/useHover"));
-const FeedbackReactions = (props) => {
-    const { headline, animated, labelUp, labelDown, labelPosition = 'bottom', size = 'md', colorFillUp = '', colorFillDown = '', colorHoverUp = 'primary', colorHoverDown = 'primary', onVoteUp = () => { }, onVoteDown = () => { }, itemClassName, ...remainingProps } = props;
-    const hasLabels = !!labelUp || !!labelDown;
-    const wrapperClassName = (0, classnames_1.default)(hasLabels ? 'display-grid grid-cols-2' : 'display-flex', 'gap-15', 'padding-top-5', 'user-select-none');
-    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClassName, children: [(0, jsx_runtime_1.jsx)(FeedbackItem, { size: size, fillColor: colorFillDown, hoverColor: colorHoverDown, animated: animated, iconName: 'thumbs-down', text: labelDown, labelPosition: labelPosition, onClick: onVoteDown, className: itemClassName }), (0, jsx_runtime_1.jsx)(FeedbackItem, { size: size, fillColor: colorFillUp, hoverColor: colorHoverUp, animated: animated, iconName: 'thumbs-up', text: labelUp, labelPosition: labelPosition, onClick: onVoteUp, className: itemClassName })] }));
-};
-const FeedbackItem = (props) => {
-    const { size, text, iconName, onClick, fillColor, hoverColor, animated = false, labelPosition = 'bottom', className, } = props;
-    const ref = (0, react_1.useRef)(null);
-    const isHover = (0, useHover_1.default)(ref);
-    const iconClasses = (0, classnames_1.default)(size === 'sm' ? 'width-40' : 'width-50', 'aspect-ratio-1', 'border rounded-circle', fillColor ? `bg-${fillColor} text-color-white` : 'bg-lightest', isHover ? `border-color-${hoverColor} text-color-${hoverColor}` : 'border-color-lightest', 'display-grid place-items-center', 'text-size-14');
-    const wrapperClassName = (0, classnames_1.default)('display-flex', 'gap-10', labelPosition === 'bottom' ? 'flex-column' : '', 'align-items-center', 'text-center', 'cursor-pointer', className);
-    const isUp = iconName.includes('up');
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: wrapperClassName, onClick: onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: iconClasses, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.span, { initial: { y: 0, rotate: 0 }, animate: animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }, transition: {
-                        duration: 0.6,
-                        repeat: isHover ? Number.POSITIVE_INFINITY : 0,
-                        repeatType: 'loop',
-                    }, className: `rioglyph rioglyph-${iconName} text-size-200pct` }) }), (0, jsx_runtime_1.jsx)("div", { className: `text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}`, children: text })] }));
-};
-exports.default = FeedbackReactions;

package/lib/es/src/components/filepicker/FilePicker.d.ts

@@ -1,58 +0,0 @@
-import { type ReactNode } from 'react';
-type FilePickerRenderProps = {
-    isDragActive: boolean;
-};
-export type FilePickerProps = {
-    /**
-     * Defines the file picker display mode.
-     *
-     * Possible values are `'button'` for a single button, `'dropzone'` for a custom dropzone passed as child function,
-     * or `'full'` for showing both.
-     *
-     * @default 'button'
-     */
-    displayMode?: 'button' | 'dropzone' | 'full';
-    /**
-     * Indicating if multiple files may be selected.
-     *
-     * @default true
-     */
-    multiple?: boolean;
-    /**
-     * Text to display on Button if displayMode is set to "button".
-     *
-     * @default 'Select files'
-     */
-    label?: string | ReactNode;
-    /**
-     * Maximum file size in byte. 5 MB = 5,242,880 byte
-     */
-    maxSize?: number;
-    /**
-     * Function called after one or multiple files have been picked.
-     */
-    onPick?: (files: FileList | null) => void;
-    /**
-     * Additional classes for the select button.
-     *
-     * @default ''
-     */
-    className?: string;
-    /**
-     * Object list of accepted Mime Types as keys and file extensions array as value.
-     */
-    accept?: {
-        [mimeType: string]: string[];
-    };
-    /**
-     * Pass a custom dropzone element as function receiving some render props.
-     */
-    children?: ({ isDragActive }: FilePickerRenderProps) => any;
-};
-declare const FilePicker: {
-    (props: FilePickerProps): import("react/jsx-runtime").JSX.Element;
-    DISPLAY_MODE_BUTTON: "button";
-    DISPLAY_MODE_DROPZONE: "dropzone";
-    DISPLAY_MODE_FULL: "full";
-};
-export default FilePicker;

package/lib/es/src/components/filepicker/FilePicker.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_dropzone_1 = tslib_1.__importDefault(require("react-dropzone"));
-const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
-const Button_1 = tslib_1.__importDefault(require("../button/Button"));
-const FilePicker = (props) => {
-    const { displayMode = 'button', multiple = true, label = 'Select files', maxSize, onPick = noop_1.default, className = '', accept, children, ...remainingProps } = props;
-    const dropzoneRef = (0, react_1.useRef)(null);
-    const isFull = displayMode === 'full';
-    const showButton = isFull || displayMode === 'button';
-    const showDropzone = isFull || displayMode === 'dropzone';
-    const handleDrop = (0, react_1.useCallback)((acceptedFiles, rejectedFiles) => {
-        const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));
-        const files = hasImagesType
-            ? acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))
-            : acceptedFiles;
-        onPick(files, rejectedFiles);
-    }, [onPick, accept]);
-    const handleClick = () => dropzoneRef.current?.open();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'FilePicker', children: [showButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: handleClick, className: className, children: label })), (0, jsx_runtime_1.jsx)(react_dropzone_1.default, { ...remainingProps, onDrop: handleDrop, accept: accept, multiple: multiple, maxSize: maxSize, ref: dropzoneRef, children: ({ getRootProps, getInputProps, isDragActive }) => {
-                    return ((0, jsx_runtime_1.jsxs)("div", { ...getRootProps(), children: [(0, jsx_runtime_1.jsx)("input", { ...getInputProps() }), showDropzone && children && children({ isDragActive })] }));
-                } })] }));
-};
-FilePicker.DISPLAY_MODE_BUTTON = 'button';
-FilePicker.DISPLAY_MODE_DROPZONE = 'dropzone';
-FilePicker.DISPLAY_MODE_FULL = 'full';
-exports.default = FilePicker;

package/lib/es/src/components/formLabel/FormLabel.d.ts

@@ -1,13 +0,0 @@
-import React, { type PropsWithChildren, type ComponentProps } from 'react';
-export type FormLabelProps = ComponentProps<'label'> & {
-    /**
-     * Additional supporting text displayed next to the label.
-     */
-    supportingText?: string | React.ReactElement;
-    /**
-     * Additional classes set to the outer element.
-     */
-    className?: string;
-};
-declare const FormLabel: (props: PropsWithChildren<FormLabelProps>) => import("react/jsx-runtime").JSX.Element;
-export default FormLabel;

package/lib/es/src/components/formLabel/FormLabel.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
-const react_1 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const FormLabel = (props) => {
-    const { className = '', children, supportingText, ...remainingProps } = props;
-    const elementRef = (0, react_1.useRef)(null);
-    const [parentSize, setParentSize] = (0, react_1.useState)(null);
-    const isLabel = 'htmlFor' in remainingProps;
-    (0, react_1.useEffect)(() => {
-        if (!elementRef.current) {
-            return;
-        }
-        const parent = elementRef.current.parentElement;
-        if (!parent) {
-            return;
-        }
-        if (parent.classList.contains('form-group-lg')) {
-            setParentSize('lg');
-        }
-        else if (parent.classList.contains('form-group-sm')) {
-            setParentSize('sm');
-        }
-    }, []);
-    const supportingTextClasses = (0, classnames_1.default)('text-color-gray', typeof supportingText === 'string' && 'text-italic', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12');
-    if (isLabel && remainingProps.htmlFor) {
-        const labelClasses = (0, classnames_1.default)(!supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', className);
-        return (
-        // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
-        (0, jsx_runtime_1.jsxs)("label", { ref: elementRef, ...remainingProps, className: labelClasses, children: [(0, jsx_runtime_1.jsx)("span", { children: children }), supportingText && (0, jsx_runtime_1.jsx)("span", { className: supportingTextClasses, children: supportingText })] }));
-    }
-    const classes = (0, classnames_1.default)('text-color-dark', 'max-width-100pct', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12', !supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', !className.includes('margin-bottom') && 'margin-bottom-5', className);
-    return (
-    // @ts-ignore
-    (0, jsx_runtime_1.jsxs)("div", { ref: elementRef, ...remainingProps, className: classes, children: [children, supportingText && (0, jsx_runtime_1.jsx)("span", { className: supportingTextClasses, children: supportingText })] }));
-};
-exports.default = FormLabel;

package/lib/es/src/components/formLabel/LabeledElement.d.ts

@@ -1,28 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { type FormLabelProps } from './FormLabel';
-export type LabeledElementProps = {
-    /**
-     * The text to display for the label.
-     */
-    label: string | React.ReactElement;
-    /**
-     * Optional ID of the element associated with the label.
-     */
-    htmlFor?: string;
-    /**
-     * Additional props for the FormLabel, excluding children and htmlFor.
-     */
-    labelProps?: Omit<FormLabelProps, 'children'>;
-    /**
-     * If true, removes the bottom margin from the label.
-     *
-     * @default false
-     */
-    noGap?: boolean;
-    /**
-     * Additional classes for styling the wrapper.
-     */
-    className?: string;
-};
-declare const LabeledElement: (props: PropsWithChildren<LabeledElementProps>) => import("react/jsx-runtime").JSX.Element;
-export default LabeledElement;

package/lib/es/src/components/formLabel/LabeledElement.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const FormLabel_1 = tslib_1.__importDefault(require("./FormLabel"));
-const LabeledElement = (props) => {
-    const { label, htmlFor, labelProps = {}, noGap = false, className = '', children, ...remainingProps } = props;
-    // Extract and handle the `className` prop separately for the label
-    const { className: labelClassName, ...otherLabelProps } = labelProps;
-    const combinedLabelClassName = (0, classnames_1.default)(labelClassName, noGap && 'margin-bottom-0');
-    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: (0, classnames_1.default)('LabeledElement display-flex flex-column', className), children: [(0, jsx_runtime_1.jsx)(FormLabel_1.default, { htmlFor: htmlFor, ...otherLabelProps, className: combinedLabelClassName, children: label }), children] }));
-};
-exports.default = LabeledElement;

package/lib/es/src/components/groupedItemList/GroupedItemList.d.ts

@@ -1,79 +0,0 @@
-import React from 'react';
-import { SortDirectionType } from '../../SortUtils';
-export type Group = {
-    groupKey: string;
-    items: any[];
-};
-export type GroupedItemListProps<T> = {
-    /**
-     * The list of items to be grouped and rendered.
-     *
-     * By default, the component assumes an item object containing an 'id' and 'name' property
-     * plus some other attributes.
-     */
-    items: T[];
-    /**
-     * The property of the items to group by as a string, or a custom group function.
-     * Defaults to 'name' if not provided.
-     *
-     * @default 'name'
-     */
-    groupBy?: keyof T | ((item: T) => string);
-    /**
-     * The order in which to sort the groups. Accepts 'asc' for ascending or 'desc' for descending.
-     * @default 'asc'.
-     */
-    groupSortOrder?: SortDirectionType;
-    /**
-     * The order in which to sort the items inside a group. Accepts 'asc' for ascending or 'desc' for descending.
-     * @default 'asc'.
-     */
-    itemSortOrder?: SortDirectionType;
-    /**
-     * Sorting function for the groups.
-     */
-    groupSortFunction?: (groups: Group[]) => Group[];
-    /**
-     * Sorting function for the items within each group.
-     */
-    itemSortFunction?: (items: T[]) => T[];
-    /**
-     * A custom render function for the group divider.
-     * Receives the group key (e.g., letter or date) as a parameter.
-     */
-    renderDivider?: (groupKey: string) => React.ReactNode;
-    /**
-     * A custom render function for individual list items.
-     * Receives an item as a parameter.
-     */
-    renderItem?: (item: T) => React.ReactNode;
-    /**
-     * Specifies the HTML element to use for the list inside each group.
-     * Default is 'div'. Use 'ul' for rendering the list items as `<li>` elements.
-     */
-    listElement?: 'div' | 'ul';
-    /**
-     * Optional class name for the list element inside each group.
-     * Applied to the `div` or `ul` wrapping the items.
-     */
-    listElementClassName?: string;
-    /**
-     * Optional class name for the divider element in each group.
-     * Applied to the `div` wrapping each group divider.
-     */
-    dividerElementClassName?: string;
-    /**
-     * Optional class name for the outer wrapper element.
-     * Applied to the outer `div` wrapping the entire component.
-     */
-    className?: string;
-};
-/**
- * A React component that groups and renders a list of items based on a specified property.
- * The component can be customized to render dividers and list items in different styles.
- *
- * @param {GroupedItemListProps} props - The props for the component.
- * @returns {JSX.Element} The grouped and rendered list component.
- */
-declare const GroupedItemList: <T>(props: GroupedItemListProps<T>) => import("react/jsx-runtime").JSX.Element;
-export default GroupedItemList;