@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.2

package/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -1,8 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-var _excluded = ["minColumnWith", "minColumns", "maxColumns", "className", "buttonClassName", "columnsWrapperClassName", "onNextClick", "onPreviousClick", "stretchLastItems", "asType", "activePage", "disableAnimation", "children"];
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -12,244 +9,157 @@ import { AnimatePresence, motion } from 'framer-motion';
 import useAfterMount from '../../hooks/useAfterMount';
 import useElementSize from '../../hooks/useElementSize';
 import usePrevious from '../../hooks/usePrevious';
-var DEFAULT_MIN_COLUMN_WITH = 300;
-var DEFAULT_MIN_COLUMNS = 1;
-var DEFAULT_MAX_COLUMNS = 5;
-var DEFAULT_COLUMN_WRAPPER_TYPE = 'div';
-var DEFAULT_ACTIVE_PAGE = 0;
-var MIN_WITH_THRESHOLD = 10;
-var ANIMATION_DURATION = 0.2;
-var ANIMATION_NEXT = 'page';
-var ANIMATION_BACK = 'pageBack';
-var COLUMN_ITEM_CLASSNAME = 'ColumnItem';
-var variants = {
-  pageEnter: function pageEnter(pageDirection) {
-    return {
-      x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
-      opacity: 0
-    };
-  },
-  pageCenter: function pageCenter() {
-    return {
-      x: 0,
-      opacity: 1
-    };
-  }
+const DEFAULT_MIN_COLUMN_WITH = 300;
+const DEFAULT_MIN_COLUMNS = 1;
+const DEFAULT_MAX_COLUMNS = 5;
+const DEFAULT_COLUMN_WRAPPER_TYPE = 'div';
+const DEFAULT_ACTIVE_PAGE = 0;
+const MIN_WITH_THRESHOLD = 10;
+const ANIMATION_DURATION = 0.2;
+const ANIMATION_NEXT = 'page';
+const ANIMATION_BACK = 'pageBack';
+const COLUMN_ITEM_CLASSNAME = 'ColumnItem';
+const variants = {
+    pageEnter: pageDirection => {
+        return {
+            x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
+            opacity: 0,
+        };
+    },
+    pageCenter: () => {
+        return {
+            x: 0,
+            opacity: 1,
+        };
+    },
 };
-var getFirstColumnItem = function getFirstColumnItem(node) {
-  if (_toConsumableArray(node.classList).includes(COLUMN_ITEM_CLASSNAME)) {
-    return node;
-  }
-  return getFirstColumnItem(node.children[0]);
-};
-var ResponsiveColumnStripe = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _props$minColumnWith = props.minColumnWith,
-    minColumnWith = _props$minColumnWith === void 0 ? DEFAULT_MIN_COLUMN_WITH : _props$minColumnWith,
-    _props$minColumns = props.minColumns,
-    minColumns = _props$minColumns === void 0 ? DEFAULT_MIN_COLUMNS : _props$minColumns,
-    _props$maxColumns = props.maxColumns,
-    maxColumns = _props$maxColumns === void 0 ? DEFAULT_MAX_COLUMNS : _props$maxColumns,
-    _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    _props$buttonClassNam = props.buttonClassName,
-    buttonClassName = _props$buttonClassNam === void 0 ? '' : _props$buttonClassNam,
-    _props$columnsWrapper = props.columnsWrapperClassName,
-    columnsWrapperClassName = _props$columnsWrapper === void 0 ? '' : _props$columnsWrapper,
-    _props$onNextClick = props.onNextClick,
-    onNextClick = _props$onNextClick === void 0 ? function () {} : _props$onNextClick,
-    _props$onPreviousClic = props.onPreviousClick,
-    onPreviousClick = _props$onPreviousClic === void 0 ? function () {} : _props$onPreviousClic,
-    _props$stretchLastIte = props.stretchLastItems,
-    stretchLastItems = _props$stretchLastIte === void 0 ? true : _props$stretchLastIte,
-    _props$asType = props.asType,
-    asType = _props$asType === void 0 ? DEFAULT_COLUMN_WRAPPER_TYPE : _props$asType,
-    _props$activePage = props.activePage,
-    activePage = _props$activePage === void 0 ? DEFAULT_ACTIVE_PAGE : _props$activePage,
-    _props$disableAnimati = props.disableAnimation,
-    disableAnimation = _props$disableAnimati === void 0 ? false : _props$disableAnimati,
-    children = props.children,
-    remainingProps = _objectWithoutProperties(props, _excluded);
-  var ComponentType = asType;
-  var _useState = useState(activePage),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentPage = _useState2[0],
-    setCurrentPage = _useState2[1];
-  var _useState3 = useState(maxColumns),
-    _useState4 = _slicedToArray(_useState3, 2),
-    columnsPerPage = _useState4[0],
-    setColumnsPerPage = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    enableInitialAnimation = _useState6[0],
-    setEnableInitialAnimation = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isResizePage = _useState8[0],
-    setIsResizePage = _useState8[1];
-
-  // The base for reacting on changing width of the wrapping element.
-  // It uses a ResizeObserver under the hood.
-  var columnWrapperRef = useRef();
-  var _useElementSize = useElementSize(columnWrapperRef),
-    _useElementSize2 = _slicedToArray(_useElementSize, 1),
-    columnWrapperWidth = _useElementSize2[0];
-  var previousPage = usePrevious(currentPage);
-  var animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;
-  useAfterMount(function () {
-    setEnableInitialAnimation(true);
-  });
-
-  // Update active page from outside to be used as controlled component
-  var _useState9 = useState(activePage),
-    _useState10 = _slicedToArray(_useState9, 2),
-    previousActivePage = _useState10[0],
-    setPreviousActivePage = _useState10[1];
-  if (Number.isFinite(activePage) && activePage !== previousActivePage) {
-    setCurrentPage(activePage);
-    setPreviousActivePage(activePage);
-  }
-  var updatePageOnColumnsSizeChange = function updatePageOnColumnsSizeChange(firstItem, columnsPerPage, children) {
-    // Split children in page chunks
-    var itemChunks = chunk(columnsPerPage)(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']]
-    var targetPage = findIndex(function (chunk) {
-      return chunk.some(function (chunkItem) {
-        var _firstItem$attributes;
-        return chunkItem.key === ((_firstItem$attributes = firstItem.attributes['data-key']) === null || _firstItem$attributes === void 0 ? void 0 : _firstItem$attributes.value);
-      });
-    })(itemChunks);
-    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(function () {
-    if (!columnWrapperRef.current) {
-      return;
-    }
-    var 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
-    var columnWidth = firstItem.getBoundingClientRect().width;
-
-    // Limit columns per page for given min and max values
-    var allowForLessColumns = columnsPerPage - 1 >= minColumns;
-    var 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
-    var goSmaller = allowForLessColumns && columnWidth + MIN_WITH_THRESHOLD <= minColumnWith;
-    var goBigger = allowForMoreColumns && (columnsPerPage + 1) * minColumnWith <= columnWrapperWidth;
-
-    // During resizing, we don't want any animation
-    setIsResizePage(true);
-    if (goBigger) {
-      var newValue = columnsPerPage + 1;
-      setColumnsPerPage(newValue);
-      updatePageOnColumnsSizeChange(firstItem, newValue, children);
-      return;
-    }
-    if (goSmaller) {
-      var _newValue = columnsPerPage - 1;
-      setColumnsPerPage(_newValue);
-      updatePageOnColumnsSizeChange(firstItem, _newValue, children);
-      return;
+const getFirstColumnItem = node => {
+    if ([...node.classList].includes(COLUMN_ITEM_CLASSNAME)) {
+        return node;
     }
-  }, [columnWrapperWidth, columnWrapperRef.current, children, columnsPerPage]);
-  var handlePrevClick = function handlePrevClick() {
-    setIsResizePage(false);
-    var pageNumber = currentPage - 1;
-    setCurrentPage(pageNumber);
-    onPreviousClick(pageNumber, columnsPerPage);
-  };
-  var handleNextClick = function handleNextClick() {
-    setIsResizePage(false);
-    var 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
-  var columnsToDisplay = chunk(columnsPerPage)(children)[currentPage];
-  var showPageButtons = minColumns < children.length;
-  var disablePreviousPage = currentPage === 0;
-  var disableNextPage = currentPage === Math.ceil(children.length / columnsPerPage) - 1;
-  var wrapperClassName = classNames('ResponsiveColumnStripe', 'display-flex align-items-center', 'overflow-hidden', className);
-  var 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');
-  var disabledButtonClassName = 'pointer-events-none opacity-30';
-  var previousButtonClassName = classNames('PreviousButton', baseButtonClassName, disablePreviousPage && disabledButtonClassName);
-  var nextButtonClassName = classNames('NextButton', baseButtonClassName, disableNextPage && disabledButtonClassName);
-  var mergedColumnsWrapperClassName = classNames('ColumnWrapper', 'flex-1-1', 'display-flex', columnsWrapperClassName);
-  var 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.
-  var columns = /*#__PURE__*/React.createElement(ComponentType, {
-    className: mergedColumnsWrapperClassName
-  }, React.Children.map(columnsToDisplay, function (column) {
-    var _column$props;
-    return /*#__PURE__*/React.cloneElement(column, {
-      className: "".concat(COLUMN_ITEM_CLASSNAME, " ").concat(columnClassName, " ").concat(((_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.className) || ''),
-      // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
-      'data-key': column.key
+    return getFirstColumnItem(node.children[0]);
+};
+const ResponsiveColumnStripe = forwardRef((props, ref) => {
+    const { minColumnWith = DEFAULT_MIN_COLUMN_WITH, minColumns = DEFAULT_MIN_COLUMNS, maxColumns = DEFAULT_MAX_COLUMNS, className = '', buttonClassName = '', columnsWrapperClassName = '', onNextClick = () => { }, onPreviousClick = () => { }, stretchLastItems = true, asType = DEFAULT_COLUMN_WRAPPER_TYPE, activePage = DEFAULT_ACTIVE_PAGE, disableAnimation = false, children } = props, remainingProps = __rest(props, ["minColumnWith", "minColumns", "maxColumns", "className", "buttonClassName", "columnsWrapperClassName", "onNextClick", "onPreviousClick", "stretchLastItems", "asType", "activePage", "disableAnimation", "children"]);
+    const ComponentType = asType;
+    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();
+    const [columnWrapperWidth] = useElementSize(columnWrapperRef);
+    const previousPage = usePrevious(currentPage);
+    const animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;
+    useAfterMount(() => {
+        setEnableInitialAnimation(true);
     });
-  }));
-  return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
-    ref: ref,
-    className: wrapperClassName
-  }), showPageButtons && /*#__PURE__*/React.createElement("div", {
-    className: previousButtonClassName,
-    onClick: handlePrevClick
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "rioglyph rioglyph-chevron-left"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "ColumnsArea flex-1-1 overflow-hidden",
-    ref: columnWrapperRef
-  }, disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && /*#__PURE__*/React.createElement(AnimatePresence, {
-    exitBeforeEnter: true,
-    custom: animationDirection
-  }, /*#__PURE__*/React.createElement(motion.div, {
-    key: currentPage,
-    variants: variants,
-    initial: enableInitialAnimation ? 'pageEnter' : false,
-    animate: "pageCenter",
-    custom: animationDirection,
-    transition: {
-      duration: ANIMATION_DURATION
+    // 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, columnsPerPage, children) => {
+        // Split children in page chunks
+        const itemChunks = chunk(columnsPerPage)(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(chunk => chunk.some(chunkItem => { var _a; return chunkItem.key === ((_a = firstItem.attributes['data-key']) === null || _a === void 0 ? void 0 : _a.value); }))(itemChunks);
+        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, children);
+            return;
+        }
+        if (goSmaller) {
+            const newValue = columnsPerPage - 1;
+            setColumnsPerPage(newValue);
+            updatePageOnColumnsSizeChange(firstItem, newValue, children);
+            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;
     }
-  }, columns))), showPageButtons && /*#__PURE__*/React.createElement("div", {
-    className: nextButtonClassName,
-    onClick: handleNextClick
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "rioglyph rioglyph-chevron-right"
-  })));
+    // 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, Object.assign({ className: mergedColumnsWrapperClassName }, { children: React.Children.map(columnsToDisplay, column => {
+            var _a;
+            return React.cloneElement(column, {
+                className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${((_a = column.props) === null || _a === void 0 ? void 0 : _a.className) || ''}`,
+                // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
+                'data-key': column.key,
+            });
+        }) })));
+    return (_jsxs("div", Object.assign({}, remainingProps, { ref: ref, className: wrapperClassName }, { children: [showPageButtons && (_jsx("div", Object.assign({ className: previousButtonClassName, onClick: handlePrevClick }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) }))), _jsxs("div", Object.assign({ className: 'ColumnsArea flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: [disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && (_jsx(AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: _jsx(motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION } }, { children: columns }), currentPage) })))] })), showPageButtons && (_jsx("div", Object.assign({ className: nextButtonClassName, onClick: handleNextClick }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) })))] })));
 });
 export default ResponsiveColumnStripe;
 ResponsiveColumnStripe.propTypes = {
-  minColumnWith: PropTypes.number,
-  minColumns: PropTypes.number,
-  maxColumns: PropTypes.number,
-  className: PropTypes.string,
-  buttonClassName: PropTypes.string,
-  columnsWrapperClassName: PropTypes.string,
-  onNextClick: PropTypes.func,
-  onPreviousClick: PropTypes.func,
-  stretchLastItems: PropTypes.bool,
-  asType: PropTypes.string,
-  activePage: PropTypes.number,
-  disableAnimation: PropTypes.bool
-};
+    minColumnWith: PropTypes.number,
+    minColumns: PropTypes.number,
+    maxColumns: PropTypes.number,
+    className: PropTypes.string,
+    buttonClassName: PropTypes.string,
+    columnsWrapperClassName: PropTypes.string,
+    onNextClick: PropTypes.func,
+    onPreviousClick: PropTypes.func,
+    stretchLastItems: PropTypes.bool,
+    asType: PropTypes.string,
+    activePage: PropTypes.number,
+    disableAnimation: PropTypes.bool,
+};

package/components/rules/RuleConnector.d.ts

@@ -0,0 +1,39 @@
+export default RuleConnector;
+declare function RuleConnector(props: any): JSX.Element;
+declare namespace RuleConnector {
+    const START: string;
+    const CENTER: string;
+    const END: string;
+    namespace defaultProps {
+        const placement: string;
+        const icon: string;
+        const hidden: boolean;
+        const background: string;
+        const pageBackground: string;
+        const contentClassName: string;
+        const hasBorder: boolean;
+        const borderColor: string;
+        const className: string;
+    }
+    namespace propTypes {
+        const placement_1: PropTypes.Requireable<string>;
+        export { placement_1 as placement };
+        const icon_1: PropTypes.Requireable<string>;
+        export { icon_1 as icon };
+        const hidden_1: PropTypes.Requireable<boolean>;
+        export { hidden_1 as hidden };
+        const background_1: PropTypes.Requireable<string>;
+        export { background_1 as background };
+        const pageBackground_1: PropTypes.Requireable<string>;
+        export { pageBackground_1 as pageBackground };
+        const contentClassName_1: PropTypes.Requireable<string>;
+        export { contentClassName_1 as contentClassName };
+        const hasBorder_1: PropTypes.Requireable<boolean>;
+        export { hasBorder_1 as hasBorder };
+        const borderColor_1: PropTypes.Requireable<string>;
+        export { borderColor_1 as borderColor };
+        const className_1: PropTypes.Requireable<string>;
+        export { className_1 as className };
+    }
+}
+import PropTypes from "prop-types";

package/components/rules/RuleConnector.js

@@ -1,76 +1,44 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["placement", "icon", "hidden", "background", "pageBackground", "contentClassName", "hasBorder", "borderColor", "className", "children"];
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-var getBorderColorFromBg = function getBorderColorFromBg(bg) {
-  return bg.replace('bg', 'border-color');
-};
-var RuleConnector = function RuleConnector(props) {
-  var placement = props.placement,
-    icon = props.icon,
-    hidden = props.hidden,
-    background = props.background,
-    pageBackground = props.pageBackground,
-    contentClassName = props.contentClassName,
-    hasBorder = props.hasBorder,
-    borderColor = props.borderColor,
-    className = props.className,
-    children = props.children,
-    remainingProps = _objectWithoutProperties(props, _excluded);
-  var wrapperClassNames = classNames('RuleConnector', 'height-20', 'display-flex', "justify-content-".concat(placement), 'align-items-center', 'position-relative', hidden && 'opacity-0', className);
-  var commonRoundedClasses = classNames('width-20', 'height-20', 'rounded-circle', 'position-relative', 'z-index-2', 'box-sizing-content-box');
-  var commonRoundedBorderClippingClasses = classNames('position-relative', 'width-20', 'height-20');
-  var leftRoundedBox = classNames('margin-right--10', commonRoundedClasses, pageBackground, hasBorder && "border ".concat(borderColor));
-  var leftRoundedBoxBorderClipping = classNames('right-50pct', commonRoundedBorderClippingClasses, pageBackground);
-  var contentWrapperClassNames = classNames('padding-left-20 padding-right-20', 'z-index-1', background, hasBorder && "border ".concat(getBorderColorFromBg(background)));
-  var rightRoundedBox = classNames('margin-left--10', commonRoundedClasses, pageBackground, hasBorder && "border ".concat(borderColor));
-  var rightRoundedBoxBorderClipping = classNames('left-50pct', commonRoundedBorderClippingClasses, pageBackground);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    "data-testid": "ruleConnector"
-  }, remainingProps, {
-    className: wrapperClassNames
-  }), /*#__PURE__*/React.createElement("div", {
-    className: leftRoundedBox
-  }, /*#__PURE__*/React.createElement("div", {
-    className: leftRoundedBoxBorderClipping
-  })), /*#__PURE__*/React.createElement("span", {
-    className: contentWrapperClassNames
-  }, /*#__PURE__*/React.createElement("span", {
-    className: contentClassName
-  }, children ? children : /*#__PURE__*/React.createElement("span", {
-    className: "rioglyph ".concat(icon),
-    "data-testid": "ruleConnectorIcon"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: rightRoundedBox
-  }, /*#__PURE__*/React.createElement("div", {
-    className: rightRoundedBoxBorderClipping
-  })));
+const getBorderColorFromBg = bg => bg.replace('bg', 'border-color');
+const RuleConnector = props => {
+    const { placement, icon, hidden, background, pageBackground, contentClassName, hasBorder, borderColor, className, children } = props, remainingProps = __rest(props, ["placement", "icon", "hidden", "background", "pageBackground", "contentClassName", "hasBorder", "borderColor", "className", "children"]);
+    const wrapperClassNames = classNames('RuleConnector', 'height-20', 'display-flex', `justify-content-${placement}`, 'align-items-center', 'position-relative', hidden && 'opacity-0', className);
+    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 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", Object.assign({ "data-testid": 'ruleConnector' }, remainingProps, { className: wrapperClassNames }, { children: [_jsx("div", Object.assign({ className: leftRoundedBox }, { children: _jsx("div", { className: leftRoundedBoxBorderClipping }) })), _jsx("span", Object.assign({ className: contentWrapperClassNames }, { children: _jsx("span", Object.assign({ className: contentClassName }, { children: children ? children : _jsx("span", { className: `rioglyph ${icon}`, "data-testid": 'ruleConnectorIcon' }) })) })), _jsx("div", Object.assign({ className: rightRoundedBox }, { children: _jsx("div", { className: rightRoundedBoxBorderClipping }) }))] })));
 };
 RuleConnector.START = 'start';
 RuleConnector.CENTER = 'center';
 RuleConnector.END = 'end';
 RuleConnector.defaultProps = {
-  placement: 'center',
-  icon: 'rioglyph-plus',
-  hidden: false,
-  background: 'bg-lightest',
-  pageBackground: 'bg-white',
-  contentClassName: 'text-color-light',
-  hasBorder: false,
-  borderColor: '',
-  className: ''
+    placement: 'center',
+    icon: 'rioglyph-plus',
+    hidden: false,
+    background: 'bg-lightest',
+    pageBackground: 'bg-white',
+    contentClassName: 'text-color-light',
+    hasBorder: false,
+    borderColor: '',
+    className: '',
 };
 RuleConnector.propTypes = {
-  placement: PropTypes.oneOf([RuleConnector.START, RuleConnector.CENTER, RuleConnector.END]),
-  icon: PropTypes.string,
-  hidden: PropTypes.bool,
-  background: PropTypes.string,
-  pageBackground: PropTypes.string,
-  contentClassName: PropTypes.string,
-  hasBorder: PropTypes.bool,
-  borderColor: PropTypes.string,
-  className: PropTypes.string
+    placement: PropTypes.oneOf([RuleConnector.START, RuleConnector.CENTER, RuleConnector.END]),
+    icon: PropTypes.string,
+    hidden: PropTypes.bool,
+    background: PropTypes.string,
+    pageBackground: PropTypes.string,
+    contentClassName: PropTypes.string,
+    hasBorder: PropTypes.bool,
+    borderColor: PropTypes.string,
+    className: PropTypes.string,
 };
-export default RuleConnector;
+export default RuleConnector;

package/components/rules/RuleContainer.d.ts

@@ -0,0 +1,28 @@
+export default RuleContainer;
+declare function RuleContainer(props: any): JSX.Element | null;
+declare namespace RuleContainer {
+    namespace defaultProps {
+        const show: boolean;
+        const unchecked: boolean;
+        const background: string;
+        const borderColor: string;
+        const hideConnector: boolean;
+        const className: string;
+    }
+    namespace propTypes {
+        const show_1: PropTypes.Requireable<boolean>;
+        export { show_1 as show };
+        const unchecked_1: PropTypes.Requireable<boolean>;
+        export { unchecked_1 as unchecked };
+        const background_1: PropTypes.Requireable<string>;
+        export { background_1 as background };
+        const borderColor_1: PropTypes.Requireable<string>;
+        export { borderColor_1 as borderColor };
+        const hideConnector_1: PropTypes.Requireable<boolean>;
+        export { hideConnector_1 as hideConnector };
+        export const customConnector: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        const className_1: PropTypes.Requireable<string>;
+        export { className_1 as className };
+    }
+}
+import PropTypes from "prop-types";