@rio-cloud/rio-uikit 1.12.0 → 1.13.1

package/src/components/resizer/Resizer.js

@@ -1,130 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-const HORIZONTAL = 'x';
-const VERTICAL = 'y';
-const LEFT = 'left';
-const RIGHT = 'right';
-const TOP = 'top';
-const BOTTOM = 'bottom';
-const createListeners = (targetNode, onEnd, onMove) => {
-    if (!targetNode) {
-        return;
-    }
-    // The read-only ownerDocument property of the Node interface returns
-    // the top-level document object of the node.
-    const ownerDocument = targetNode.ownerDocument;
-    ownerDocument.addEventListener('mouseup', onEnd);
-    ownerDocument.addEventListener('mousemove', onMove);
-    ownerDocument.addEventListener('touchend', onEnd);
-    ownerDocument.addEventListener('touchmove', onMove);
-    return {
-        remove: () => {
-            ownerDocument.removeEventListener('mouseup', onEnd);
-            ownerDocument.removeEventListener('mousemove', onMove);
-            ownerDocument.removeEventListener('touchend', onEnd);
-            ownerDocument.removeEventListener('touchmove', onMove);
-        },
-    };
-};
-const Resizer = (props) => {
-    const { className = '', direction = HORIZONTAL, position = RIGHT, onResizeStart = noop, onResize = noop, onResizeEnd = noop, children, ...remainingProps } = props;
-    const eventsRef = useRef(null);
-    // Use refs here instead of local state as the move event listener fired before the state is set
-    // and then it would work with outdated state at that time.
-    const elementRef = useRef(null);
-    const isDragRef = useRef(false);
-    const startPositionRef = useRef({ x: 0, y: 0 });
-    useEffect(() => {
-        return () => {
-            removeListeners();
-        };
-    }, []);
-    const getClientX = (event) => {
-        // Note: some browsers don't provide the global "TouchEvent" constructor!
-        if (!!window.TouchEvent && event instanceof window.TouchEvent) {
-            return event.touches[0].clientX;
-        }
-        if (event instanceof MouseEvent) {
-            return event.clientX;
-        }
-        throw new Error('Unsupported event type');
-    };
-    const getClientY = (event) => {
-        // Note: some browsers don't provide the global "TouchEvent" constructor!
-        if (!!window.TouchEvent && event instanceof window.TouchEvent) {
-            return event.touches[0].clientY;
-        }
-        if (event instanceof MouseEvent) {
-            return event.clientY;
-        }
-        throw new Error('Unsupported event type');
-    };
-    const handleMouseStart = (event) => {
-        isDragRef.current = true;
-        // Use the native event to check for the event type. Otherwise the type check
-        // fails and the start position would be { x: 0, y: 0 }.
-        const mouseEvent = event.nativeEvent;
-        const { clientX, clientY } = mouseEvent;
-        startPositionRef.current = {
-            x: clientX,
-            y: clientY,
-        };
-        onResizeStart(event);
-        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);
-    };
-    const handleTouchStart = (event) => {
-        isDragRef.current = true;
-        // Use the native event to check for the event type. Otherwise the type check
-        // fails and the start position would be { x: 0, y: 0 }.
-        const touchEvent = event.nativeEvent;
-        const firstTouch = touchEvent.touches[0];
-        startPositionRef.current = {
-            x: firstTouch.clientX,
-            y: firstTouch.clientY,
-        };
-        onResizeStart(event);
-        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);
-    };
-    const handleMove = (event) => {
-        if (!isDragRef.current) {
-            return;
-        }
-        if (direction === Resizer.HORIZONTAL) {
-            const diff = startPositionRef.current.x - getClientX(event);
-            if (diff !== 0) {
-                onResize(diff);
-            }
-        }
-        if (direction === Resizer.VERTICAL) {
-            const diff = startPositionRef.current.y - getClientY(event);
-            if (diff !== 0) {
-                onResize(diff);
-            }
-        }
-        startPositionRef.current = {
-            x: getClientX(event),
-            y: getClientY(event),
-        };
-    };
-    const handleEnd = (event) => {
-        isDragRef.current = false;
-        onResizeEnd(event);
-        removeListeners();
-    };
-    const removeListeners = () => {
-        if (eventsRef.current) {
-            eventsRef.current.remove();
-        }
-    };
-    const wrapperClasses = classNames('Resizer', direction === 'x' && 'resize-horizontal', direction === 'y' && 'resize-vertical', position === 'left' && 'resize-left', position === 'right' && 'resize-right', position === 'top' && 'resize-top', position === 'bottom' && 'resize-bottom', className && className);
-    return (_jsx("div", { ref: elementRef, className: wrapperClasses, onMouseDown: handleMouseStart, onTouchStart: handleTouchStart, ...remainingProps, children: children }));
-};
-Resizer.HORIZONTAL = HORIZONTAL;
-Resizer.VERTICAL = VERTICAL;
-Resizer.LEFT = LEFT;
-Resizer.RIGHT = RIGHT;
-Resizer.TOP = TOP;
-Resizer.BOTTOM = BOTTOM;
-export default Resizer;

package/src/components/responsiveColumnStripe/ResponsiveColumnStripe.d.ts

@@ -1,81 +0,0 @@
-import React, { type ReactHTML } from 'react';
-export type ResponsiveColumnStripeProps = {
-    /**
-     * The minimum width in pixel of a single column.
-     *
-     * This value determines how many columns are shown per page depending on the parent width.
-     *
-     * @default 300
-     */
-    minColumnWith?: number;
-    /**
-     * The minimum amount of columns that should be shown per page.
-     *
-     * @default 1
-     */
-    minColumns?: number;
-    /**
-     * The maximum amount of columns that should be shown per page.
-     *
-     * @default 5
-     */
-    maxColumns?: number;
-    /**
-     * Defines whether the items on the last page are stretched out to fill the space.
-     *
-     * @default false
-     */
-    stretchLastItems?: boolean;
-    /**
-     * The page that shall be shown.
-     *
-     * This can be used to control the pages from outside.
-     *
-     * @default 0
-     */
-    activePage?: number;
-    /**
-     * The DOM element type of the wrapping column element.
-     *
-     * If you need a list, this might be set to "ul".
-     *
-     * @default 'div'
-     */
-    asType?: keyof ReactHTML;
-    /**
-     * Set to true to skip animating pages.
-     *
-     * @default false
-     */
-    disableAnimation?: boolean;
-    /**
-     * Callback function for when the previous page is clicked.
-     *
-     * @param pageNumber
-     * @param columnsPerPage
-     */
-    onPreviousClick?: (pageNumber: number, columnsPerPage: number) => void;
-    /**
-     * Callback function for when the next page is clicked.
-     *
-     * @param pageNumber
-     * @param columnsPerPage
-     */
-    onNextClick?: (pageNumber: number, columnsPerPage: number) => void;
-    /**
-     * Additional classes set to the navigation buttons.
-     */
-    buttonClassName?: string;
-    /**
-     * Additional classes set to the component wrapper element.
-     */
-    columnsWrapperClassName?: string;
-    /**
-     * Additional classes set to the column wrapper element.
-     */
-    className?: string;
-};
-declare const ResponsiveColumnStripe: React.ForwardRefExoticComponent<ResponsiveColumnStripeProps & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export default ResponsiveColumnStripe;

package/src/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -1,136 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, forwardRef, useEffect, useRef, useState, } from 'react';
-import classNames from 'classnames';
-import findIndex from 'lodash/fp/findIndex';
-import chunk from 'lodash/fp/chunk';
-import { AnimatePresence, motion } from 'framer-motion';
-import noop from 'lodash/noop';
-import useAfterMount from '../../hooks/useAfterMount';
-import useElementSize from '../../hooks/useElementSize';
-import usePrevious from '../../hooks/usePrevious';
-const MIN_WITH_THRESHOLD = 10;
-const DEFAULT_TRANSITION = { duration: 0.2 };
-const ANIMATION_NEXT = 'page';
-const ANIMATION_BACK = 'pageBack';
-const COLUMN_ITEM_CLASSNAME = 'ColumnItem';
-const variants = {
-    pageEnter: pageDirection => ({
-        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
-        opacity: 0,
-    }),
-    pageCenter: () => ({ x: 0, opacity: 1 }),
-};
-const getFirstColumnItem = (node) => {
-    if ([...node.classList].includes(COLUMN_ITEM_CLASSNAME)) {
-        return node;
-    }
-    return getFirstColumnItem(node.children[0]);
-};
-const ResponsiveColumnStripe = forwardRef((props, ref) => {
-    const { minColumnWith = 300, minColumns = 1, maxColumns = 5, stretchLastItems = true, activePage = 0, asType: ComponentType = 'div', onPreviousClick = noop, onNextClick = noop, buttonClassName = '', columnsWrapperClassName = '', className = '', disableAnimation = false, children, ...remainingProps } = props;
-    const [currentPage, setCurrentPage] = useState(activePage);
-    const [columnsPerPage, setColumnsPerPage] = useState(maxColumns);
-    const [enableInitialAnimation, setEnableInitialAnimation] = useState(false);
-    const [isResizePage, setIsResizePage] = useState(false);
-    // The base for reacting on changing width of the wrapping element.
-    // It uses a ResizeObserver under the hood.
-    const columnWrapperRef = useRef(null);
-    const [columnWrapperWidth] = useElementSize(columnWrapperRef);
-    const previousPage = usePrevious(currentPage);
-    const animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;
-    useAfterMount(() => {
-        setEnableInitialAnimation(true);
-    });
-    // Update active page from outside to be used as controlled component
-    const [previousActivePage, setPreviousActivePage] = useState(activePage);
-    if (Number.isFinite(activePage) && activePage !== previousActivePage) {
-        setCurrentPage(activePage);
-        setPreviousActivePage(activePage);
-    }
-    const updatePageOnColumnsSizeChange = (firstItem, perPage) => {
-        // Split children in page chunks
-        const pages = chunk(perPage)(children);
-        // find the currently rendered first item inside the chunks.
-        // The found chunk index is the new page to render.
-        // example of chunks => [['a', 'b', 'c'], ['d']]
-        const targetPage = findIndex((page) => page.some(pageItem => pageItem.key === firstItem.dataset['key']))(pages);
-        if (targetPage !== currentPage) {
-            setCurrentPage(targetPage);
-        }
-    };
-    // When the container size changes, adapt the amount of columns to be rendered according
-    // to the given min width of a single item. The new amount of columns also has to respect
-    // the lower and upper limit. When updating the amount, the current page hse to be updated as well.
-    useEffect(() => {
-        if (!columnWrapperRef.current) {
-            return;
-        }
-        const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);
-        if (!firstItem) {
-            return;
-        }
-        // Get the width of the first column to calculate how many columns fit in one page
-        // according to the given minWidth per column
-        const columnWidth = firstItem.getBoundingClientRect().width;
-        // Limit columns per page for given min and max values
-        const allowForLessColumns = columnsPerPage - 1 >= minColumns;
-        const allowForMoreColumns = columnsPerPage + 1 <= maxColumns;
-        // The threshold is required to avoid jumping between bigger and smaller after the columns per page
-        // has changed, and it continues to resize
-        const goSmaller = allowForLessColumns && columnWidth + MIN_WITH_THRESHOLD <= minColumnWith;
-        const goBigger = allowForMoreColumns && (columnsPerPage + 1) * minColumnWith <= columnWrapperWidth;
-        // During resizing, we don't want any animation
-        setIsResizePage(true);
-        if (goBigger) {
-            const newValue = columnsPerPage + 1;
-            setColumnsPerPage(newValue);
-            updatePageOnColumnsSizeChange(firstItem, newValue);
-            return;
-        }
-        if (goSmaller) {
-            const newValue = columnsPerPage - 1;
-            setColumnsPerPage(newValue);
-            updatePageOnColumnsSizeChange(firstItem, newValue);
-            return;
-        }
-    }, [columnWrapperWidth, columnWrapperRef.current, children, columnsPerPage]);
-    const handlePrevClick = () => {
-        setIsResizePage(false);
-        const pageNumber = currentPage - 1;
-        setCurrentPage(pageNumber);
-        onPreviousClick(pageNumber, columnsPerPage);
-    };
-    const handleNextClick = () => {
-        setIsResizePage(false);
-        const pageNumber = currentPage + 1;
-        setCurrentPage(pageNumber);
-        onNextClick(pageNumber, columnsPerPage);
-    };
-    if (!children) {
-        return null;
-    }
-    // Split the children/columns in chunks according to the current columns per page size
-    // and get the current page chunk for rendering
-    const columnsToDisplay = chunk(columnsPerPage)(children)[currentPage];
-    const showPageButtons = minColumns < children.length;
-    const disablePreviousPage = currentPage === 0;
-    const disableNextPage = currentPage === Math.ceil(children.length / columnsPerPage) - 1;
-    const wrapperClassName = classNames('ResponsiveColumnStripe', 'display-flex align-items-center', 'overflow-hidden', className);
-    const baseButtonClassName = classNames('align-items-center', 'align-self-stretch', 'display-flex', 'hover-scale-105', 'hover-text-color-darkest', 'padding-10', 'cursor-pointer', 'text-color-darker', 'text-size-12');
-    const disabledButtonClassName = 'pointer-events-none opacity-30';
-    const previousButtonClassName = classNames('PreviousButton', baseButtonClassName, disablePreviousPage && disabledButtonClassName);
-    const nextButtonClassName = classNames('NextButton', baseButtonClassName, disableNextPage && disabledButtonClassName);
-    const mergedColumnsWrapperClassName = classNames('ColumnWrapper', 'flex-1-1', 'display-flex', columnsWrapperClassName);
-    const columnClassName = disableNextPage && !stretchLastItems ? 'flex-0-1' : 'flex-1-1';
-    // Use the given custom component type "div" or any other. Clone the children to inject certain
-    // properties that are required to stretch the items and deal with their size.
-    const columns = (_jsx(ComponentType, { className: mergedColumnsWrapperClassName, children: Children.map(columnsToDisplay, column => cloneElement(column, {
-            className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${column.props?.className || ''}`,
-            // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
-            'data-key': column.key,
-        })) }));
-    return (_jsxs("div", { ...remainingProps, ref: ref, className: wrapperClassName, children: [showPageButtons && (_jsx("div", { className: previousButtonClassName, onClick: handlePrevClick, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) })), _jsxs("div", { className: 'ColumnsArea flex-1-1 overflow-hidden', ref: columnWrapperRef, children: [disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && (
-                    // @ts-ignore-next-line
-                    _jsx(AnimatePresence, { exitBeforeEnter: true, custom: animationDirection, children: _jsx(motion.div, { variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: DEFAULT_TRANSITION, children: columns }, currentPage) }))] }), showPageButtons && (_jsx("div", { className: nextButtonClassName, onClick: handleNextClick, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] }));
-});
-export default ResponsiveColumnStripe;

package/src/components/rioglyph/Rioglyph.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-const Rioglyph = (props) => {
-    const { icon, iconClassName = '', pairIcon, pairIconClassName = '', size, spinning = false, pulsing = false, } = props;
-    const spinningClass = spinning ? 'spinning' : '';
-    const pulsingClass = pulsing ? 'pulsing' : '';
-    if (pairIcon) {
-        const wrapperClasses = classNames('rioglyph-icon-pair', size && `text-size-${size}`);
-        const iconClasses = classNames('rioglyph', icon, iconClassName);
-        const pairIconClasses = classNames('rioglyph', pairIcon, pairIconClassName, spinningClass, pulsingClass);
-        return (_jsxs("span", { className: wrapperClasses, children: [_jsx("span", { className: iconClasses }), _jsx("span", { className: pairIconClasses })] }));
-    }
-    const iconClasses = classNames('rioglyph', icon, size && `text-size-${size}`, iconClassName, spinningClass, pulsingClass);
-    return _jsx("span", { className: iconClasses });
-};
-export default Rioglyph;

package/src/components/rioglyph/getFuelIcon.d.ts

@@ -1,38 +0,0 @@
-import type { IconType } from './types';
-declare const fuelMap: {
-    unknown: string;
-    diesel: string;
-    hydrogen: string;
-    gas: string;
-    electric: string;
-    cng: string;
-    meth: string;
-    eth: string;
-    dsl: string;
-    lpg: string;
-    prop: string;
-    elec: string;
-    bi_gas: string;
-    bi_meth: string;
-    bi_eth: string;
-    bi_lpg: string;
-    bi_cng: string;
-    bi_prop: string;
-    bi_elec: string;
-    bi_mix: string;
-    hyb_gas: string;
-    hyb_eth: string;
-    hyb_dsl: string;
-    hyb_elec: string;
-    hyb_mix: string;
-    hyb_reg: string;
-    ng: string;
-    bi_ng: string;
-    bi_dsl: string;
-    ng2: string;
-    df_dsl_cng: string;
-    df_dsl_lng: string;
-};
-export type FuelType = keyof typeof fuelMap;
-export declare const getFuelIcon: (fuelType?: FuelType) => IconType;
-export {};

package/src/components/rioglyph/getFuelIcon.js

@@ -1,40 +0,0 @@
-const fuelMap = {
-    unknown: 'rioglyph-question',
-    // RIO custom defined values
-    diesel: 'rioglyph-fuel-liquid', // (liquid)
-    hydrogen: 'rioglyph-fuel-hydrogen', // (hydrogen)
-    // Official values
-    gas: 'rioglyph-fuel-liquid', // Gasoline/petrol (liquid)
-    electric: 'rioglyph-fuel-electric', // (electric)
-    cng: 'rioglyph-fuel-gas', // Compressed Natural Gas (CNG) (gaseous)
-    meth: 'rioglyph-fuel-liquid', // Methanol (liquid)
-    eth: 'rioglyph-fuel-liquid', // Ethanol (liquid)
-    dsl: 'rioglyph-fuel-liquid', // Diesel (liquid)
-    lpg: 'rioglyph-fuel-gas', // Liquefied Petroleum Gas (LPG) (gaseous)
-    prop: 'rioglyph-fuel-gas', // Propane (gaseous)
-    elec: 'rioglyph-fuel-electric', // Battery/electric (electric)
-    bi_gas: 'rioglyph-fuel-liquid', // Bi-fuel vehicle using gasoline (liquid)
-    bi_meth: 'rioglyph-fuel-liquid', // Bi-fuel vehicle using methanol (liquid)
-    bi_eth: 'rioglyph-fuel-liquid', // Bi-fuel vehicle using ethanol (liquid)
-    bi_lpg: 'rioglyph-fuel-gas', // Bi-fuel vehicle using LPG (gaseous)
-    bi_cng: 'rioglyph-fuel-gas', // Bi-fuel vehicle using CNG (gaseous)
-    bi_prop: 'rioglyph-fuel-gas', // Bi-fuel vehicle using propane (gaseous)
-    bi_elec: 'rioglyph-fuel-electric', // Bi-fuel vehicle using battery (electric)
-    bi_mix: 'rioglyph-plus', // Bi-fuel vehicle using battery and combustion engine (electric + liquid/gaseous)
-    hyb_gas: 'rioglyph-fuel-liquid', // Hybrid vehicle using gasoline engine (liquid)
-    hyb_eth: 'rioglyph-fuel-liquid', // Hybrid vehicle using gasoline engine on ethanol (liquid)
-    hyb_dsl: 'rioglyph-fuel-liquid', // Hybrid vehicle using diesel engine (liquid)
-    hyb_elec: 'rioglyph-fuel-electric', // Hybrid vehicle using battery (electric)
-    hyb_mix: 'rioglyph-plus', // Hybrid vehicle using battery and combustion engine (electric + liquid/gaseous)
-    hyb_reg: 'rioglyph-plus', // Hybrid vehicle in regeneration mode (other)
-    ng: 'rioglyph-fuel-gas', // Natural Gas (NG) (gaseous)
-    bi_ng: 'rioglyph-fuel-gas', // Bi-fuel vehicle using NG (gaseous)
-    bi_dsl: 'rioglyph-fuel-liquid', // Bi-fuel using diesel (liquid)
-    ng2: 'rioglyph-fuel-gas', // Natural Gas (Compressed or Liquefied Natural Gas) (gaseous)
-    df_dsl_cng: 'rioglyph-plus', // Dual Fuel – Diesel and CNG (liquid + gaseous)
-    df_dsl_lng: 'rioglyph-plus', // Dual Fuel – Diesel and LNG (liquid + gaseous)
-};
-export const getFuelIcon = (fuelType = 'unknown') => {
-    const icon = fuelMap[fuelType] ?? fuelMap.unknown;
-    return icon;
-};

package/src/components/rioglyph/types.d.ts

@@ -1,2 +0,0 @@
-import type rioglyphMetaData from '../../../rioglyph/rioglyphMetaData.json';
-export type IconType = keyof typeof rioglyphMetaData;

package/src/components/rioglyph/types.js

@@ -1 +0,0 @@
-export {};

package/src/components/rules/RuleConnector.d.ts

@@ -1,62 +0,0 @@
-import { type HTMLAttributes, type PropsWithChildren } from 'react';
-export type RuleConnectorProps = {
-    /**
-     * The placement for the connector.
-     *
-     * Possible values are `start`, `center` and `end`.
-     *
-     * @default 'center'
-     */
-    placement?: 'start' | 'center' | 'end';
-    /**
-     * The rioglyph icon name.
-     *
-     * @default 'rioglyph-plus'
-     */
-    icon?: string;
-    /**
-     * Defines whether the connector is shown.
-     *
-     * @default false
-     */
-    hidden?: boolean;
-    /**
-     * Background color of the connector itself.
-     *
-     * @default 'bg-lightest'
-     */
-    background?: string;
-    /**
-     * Background color of the surrounding area where the rule containers are placed.
-     *
-     * @default 'bg-white'
-     */
-    pageBackground?: string;
-    /**
-     * Classes to be set on the connector content.
-     *
-     * @default 'text-color-light'
-     */
-    contentClassName?: string;
-    /**
-     * Defines whether the connector has a border.
-     *
-     * @default false
-     */
-    hasBorder?: boolean;
-    /**
-     * The border color class name.
-     */
-    borderColor?: string;
-    /**
-     * Additional classes for the wrapper element.
-     */
-    className?: string;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
-declare const RuleConnector: {
-    (props: PropsWithChildren<RuleConnectorProps>): import("react/jsx-runtime").JSX.Element;
-    START: string;
-    CENTER: string;
-    END: string;
-};
-export default RuleConnector;

package/src/components/rules/RuleConnector.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-const getBorderColorFromBg = (bg) => bg.replace('bg', 'border-color');
-const commonRoundedClasses = classNames('width-20', 'height-20', 'rounded-circle', 'position-relative', 'z-index-2', 'box-sizing-content-box');
-const commonRoundedBorderClippingClasses = classNames('position-relative', 'width-20', 'height-20');
-const RuleConnector = (props) => {
-    const { placement = 'center', icon = 'rioglyph-plus', hidden = false, background = 'bg-lightest', pageBackground = 'bg-white', contentClassName = 'text-color-light', hasBorder = false, borderColor = '', className = '', children, ...remainingProps } = props;
-    const wrapperClassNames = classNames('RuleConnector', 'height-20', 'display-flex', `justify-content-${placement}`, 'align-items-center', 'position-relative', hidden && 'opacity-0', className);
-    const leftRoundedBox = classNames('margin-right--10', commonRoundedClasses, pageBackground, hasBorder && `border ${borderColor}`);
-    const leftRoundedBoxBorderClipping = classNames('right-50pct', commonRoundedBorderClippingClasses, pageBackground);
-    const contentWrapperClassNames = classNames('padding-left-20 padding-right-20', 'z-index-1', background, hasBorder && `border ${getBorderColorFromBg(background)}`);
-    const rightRoundedBox = classNames('margin-left--10', commonRoundedClasses, pageBackground, hasBorder && `border ${borderColor}`);
-    const rightRoundedBoxBorderClipping = classNames('left-50pct', commonRoundedBorderClippingClasses, pageBackground);
-    return (_jsxs("div", { "data-testid": 'ruleConnector', ...remainingProps, className: wrapperClassNames, children: [_jsx("div", { className: leftRoundedBox, children: _jsx("div", { className: leftRoundedBoxBorderClipping }) }), _jsx("span", { className: contentWrapperClassNames, children: _jsx("span", { className: contentClassName, children: children ? children : _jsx("span", { className: `rioglyph ${icon}`, "data-testid": 'ruleConnectorIcon' }) }) }), _jsx("div", { className: rightRoundedBox, children: _jsx("div", { className: rightRoundedBoxBorderClipping }) })] }));
-};
-RuleConnector.START = 'start';
-RuleConnector.CENTER = 'center';
-RuleConnector.END = 'end';
-export default RuleConnector;

package/src/components/rules/RuleContainer.d.ts

@@ -1,43 +0,0 @@
-import { type HTMLAttributes, type JSX, type PropsWithChildren } from 'react';
-export type RuleContainerProps = {
-    /**
-     * Defines whether the container is shown.
-     *
-     * @default true
-     */
-    show?: boolean;
-    /**
-     * Determines the container style for when no rule option is selected.
-     *
-     * It also hides the connector in this case.
-     *
-     * @default false
-     */
-    unchecked?: boolean;
-    /**
-     * The box background class name.
-     *
-     * @default 'bg-lightest'
-     */
-    background?: string;
-    /**
-     * The border color class name.
-     */
-    borderColor?: string;
-    /**
-     * Defines whether the connector is shown.
-     *
-     * @default false
-     */
-    hideConnector?: boolean;
-    /**
-     * Overwrites the default connector.
-     */
-    customConnector?: string | JSX.Element;
-    /**
-     * Additional classes for the wrapper element.
-     */
-    className?: string;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
-declare const RuleContainer: (props: PropsWithChildren<RuleContainerProps>) => import("react/jsx-runtime").JSX.Element | null;
-export default RuleContainer;

package/src/components/rules/RuleContainer.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children } from 'react';
-import classNames from 'classnames';
-import { AnimatePresence, motion } from 'framer-motion';
-import RuleConnector from './RuleConnector';
-const RuleContainer = (props) => {
-    const { show = true, unchecked = false, background = 'bg-lightest', borderColor = '', hideConnector = false, customConnector, className = '', children, ...remainingProps } = props;
-    if (!show) {
-        return null;
-    }
-    const boxClassNames = classNames('RuleContainerBox', 'position-relative', 'rounded padding-20', background, unchecked && `border border-width border-style-dashed ${borderColor}`, className);
-    return (_jsxs("div", { className: 'RuleContainer', ...remainingProps, children: [_jsx("div", { className: boxClassNames, "data-testid": 'ruleContainerBox', children: _jsx(AnimatePresence, { exitBeforeEnter: true, children: Children.map(children, child => {
-                        if (!child) {
-                            return null;
-                        }
-                        // just bending the type system a bit so that it matches the existing implementation :)
-                        const childAsElement = child;
-                        // In case there are multiple children of RuleContainer, use the
-                        // type name or the type itself as a key to animate between the two children
-                        return (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: child }, childAsElement.type?.name || childAsElement.type));
-                    }) }) }), customConnector ? customConnector : _jsx(RuleConnector, { hidden: unchecked || hideConnector })] }));
-};
-export default RuleContainer;

package/src/components/rules/RulesWrapper.d.ts

@@ -1,4 +0,0 @@
-import { type HTMLAttributes, type PropsWithChildren } from 'react';
-type RulesWrapperProps = HTMLAttributes<HTMLDivElement>;
-declare const RulesWrapper: ({ children, ...remainingProps }: PropsWithChildren<RulesWrapperProps>) => import("react/jsx-runtime").JSX.Element;
-export default RulesWrapper;

package/src/components/rules/RulesWrapper.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { AnimatePresence, motion } from 'framer-motion';
-const RulesWrapper = ({ children, ...remainingProps }) => (
-// @ts-ignore-next-line
-_jsx(motion.div, { initial: false, layout: true, ...remainingProps, children: _jsx(AnimatePresence, { children: _jsx(motion.div, { layout: 'position', children: children }) }) }));
-export default RulesWrapper;