@ballistix.digital/react-components 0.5.10 → 0.7.0

package/dist/index.js

@@ -15,8 +15,8 @@ var react = require('@headlessui/react');
 var mask = require('@react-input/mask');
 var outline$2 = require('@heroicons/react/24/outline');
 var reactTable = require('@tanstack/react-table');
-var set = require('lodash/set');
 var Select = require('react-tailwindcss-select');
+var set = require('lodash/set');
 var Datepicker = require('react-tailwindcss-datepicker');
 var formik = require('formik');
 
@@ -405,7 +405,7 @@ var styles$s = {
 };
 
 var BadgeElement = function (props) {
-    var children = props.children, _a = props.color, color = _a === void 0 ? 'gray' : _a, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.size, size = _c === void 0 ? 'sm' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, isDisabled = props.isDisabled, isLoading = props.isLoading, onClose = props.onClose, stylesOverrides = props.styles;
+    var children = props.children, _a = props.color, color = _a === void 0 ? 'gray' : _a, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.size, size = _c === void 0 ? 'sm' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, isDisabled = props.isDisabled, isLoading = props.isLoading, onClose = props.onClose, stylesOverrides = props.styles, dataCy = props.dataCy;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$r.base);
         var keys = calculateNestedKeys(styles$r.base);
@@ -419,7 +419,7 @@ var BadgeElement = function (props) {
     if (isLoading) {
         return (jsxRuntime.jsx("span", { className: toClassName(styles.container, 'h-4 w-12 animate-pulse'), children: type === 'indicator' && (jsxRuntime.jsx("svg", { className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8", children: jsxRuntime.jsx("circle", { cx: 4, cy: 4, r: 3 }) })) }));
     }
-    return (jsxRuntime.jsxs("span", { className: styles.container, children: [type === 'indicator' && (jsxRuntime.jsx("svg", { className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8", children: jsxRuntime.jsx("circle", { cx: 4, cy: 4, r: 3 }) })), children, type === 'close' && (jsxRuntime.jsxs("button", { type: "button", className: styles.button, onClick: onClose, children: [jsxRuntime.jsx("span", { className: "sr-only", children: "Remove large option" }), xIcon] }))] }));
+    return (jsxRuntime.jsxs("span", { className: styles.container, "data-cy": dataCy, children: [type === 'indicator' && (jsxRuntime.jsx("svg", { className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8", children: jsxRuntime.jsx("circle", { cx: 4, cy: 4, r: 3 }) })), children, type === 'close' && (jsxRuntime.jsxs("button", { type: "button", className: styles.button, onClick: onClose, children: [jsxRuntime.jsx("span", { className: "sr-only", children: "Remove large option" }), xIcon] }))] }));
 };
 
 var base$o = {
@@ -530,7 +530,7 @@ var styles$r = {
 };
 
 var ButtonElement = function (props) {
-    var children = props.children, innerRef = props.innerRef, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, _b = props.type, type = _b === void 0 ? 'primary' : _b, _c = props.size, size = _c === void 0 ? 'md' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, _e = props.status, status = _e === void 0 ? 'idle' : _e, isDisabled = props.isDisabled, stylesOverrides = props.styles, onClick = props.onClick;
+    var children = props.children, innerRef = props.innerRef, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, dataCy = props.dataCy, _b = props.type, type = _b === void 0 ? 'primary' : _b, _c = props.size, size = _c === void 0 ? 'md' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, _e = props.status, status = _e === void 0 ? 'idle' : _e, isDisabled = props.isDisabled, stylesOverrides = props.styles, onClick = props.onClick;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$q.base);
         var keys = calculateNestedKeys(styles$q.base);
@@ -542,7 +542,7 @@ var ButtonElement = function (props) {
     var styles = handleGenerateStyle();
     return (jsxRuntime.jsxs("button", { type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: function (e) {
             onClick && onClick(e);
-        }, ref: innerRef, children: [status === 'idle' && children, status === 'loading' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "spinner", className: styles.spinner }), jsxRuntime.jsx("div", { children: children })] })), status === 'error' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-exclamation", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] })), status === 'success' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-check", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] }))] }));
+        }, ref: innerRef, "data-cy": dataCy, children: [status === 'idle' && children, status === 'loading' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "spinner", className: styles.spinner }), jsxRuntime.jsx("div", { children: children })] })), status === 'error' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-exclamation", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] })), status === 'success' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-check", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] }))] }));
 };
 
 var base$n = {
@@ -651,7 +651,7 @@ var styles$p = {
 };
 
 var Container$3 = function (props) {
-    var children = props.children, label = props.label, trigger = props.trigger, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, _c = props.isEscapingOverflow, isEscapingOverflow = _c === void 0 ? false : _c, stylesOverrides = props.styles;
+    var children = props.children, label = props.label, trigger = props.trigger, dataCy = props.dataCy, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, _c = props.isEscapingOverflow, isEscapingOverflow = _c === void 0 ? false : _c, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$o.base);
         var keys = calculateNestedKeys(styles$o.base);
@@ -662,7 +662,7 @@ var Container$3 = function (props) {
     };
     var styles = handleGenerateStyle();
     return (jsxRuntime.jsxs(react.Menu, { as: "div", className: toClassName(styles.container, !isEscapingOverflow && 'relative'), children: [jsxRuntime.jsxs("div", { children: [type === 'button' &&
-                        (!trigger ? (jsxRuntime.jsxs(react.Menu.Button, { className: styles.button, children: [label, jsxRuntime.jsx(solid.ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] })) : (jsxRuntime.jsx(react.Menu.Button, { children: trigger }))), type === 'compact' && (jsxRuntime.jsxs(react.Menu.Button, { className: styles.compact, children: [jsxRuntime.jsx("span", { className: "sr-only", children: label }), jsxRuntime.jsx(solid.EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] }))] }), jsxRuntime.jsx(react.Transition, { as: React.Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95", children: jsxRuntime.jsx(react.Menu.Items, { className: styles.items, children: children }) })] }));
+                        (!trigger ? (jsxRuntime.jsxs(react.Menu.Button, { className: styles.button, "data-cy": dataCy, children: [label, jsxRuntime.jsx(solid.ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] })) : (jsxRuntime.jsx(react.Menu.Button, { "data-cy": dataCy, children: trigger }))), type === 'compact' && (jsxRuntime.jsxs(react.Menu.Button, { className: styles.compact, "data-cy": dataCy, children: [jsxRuntime.jsx("span", { className: "sr-only", children: label }), jsxRuntime.jsx(solid.EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] }))] }), jsxRuntime.jsx(react.Transition, { as: React.Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95", children: jsxRuntime.jsx(react.Menu.Items, { className: styles.items, children: children }) })] }));
 };
 var DropdownElement = {
     Container: Container$3,
@@ -720,8 +720,10 @@ var InputGroupForm = function (props) {
     var styles = handleGenerateStyle();
     var invalidIcon = (jsxRuntime.jsx(solid.ExclamationCircleIcon, { className: "h-5 w-5 text-red-500", "aria-hidden": "true" }));
     var isClearable = !trailing && isValid && onClear && value !== '' && value;
+    var inputDataCy = "form-input-".concat(name);
+    var errorDataCy = "form-input-error-".concat(name);
     return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.body, children: [leading && jsxRuntime.jsx("div", { className: styles.leading, children: leading }), !htmlType ||
-                        (htmlType !== 'area' && (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx("input", { type: mask$1 !== undefined ? 'text' : htmlType, ref: mask$1 && ref, name: name, id: name, className: toClassName(styles.input, htmlType === 'color' && '!h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), htmlType === 'text' && isClearable && (jsxRuntime.jsx("div", { className: "right-5 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) })), htmlType === 'date' && isClearable && (jsxRuntime.jsx("div", { className: "right-10 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) }))] }))), htmlType === 'area' && (jsxRuntime.jsx("textarea", { rows: rows, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur })), type === 'floored' && (jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && jsxRuntime.jsx("p", { className: styles.error, children: error })] })] }));
+                        (htmlType !== 'area' && (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx("input", { type: mask$1 !== undefined ? 'text' : htmlType, ref: mask$1 && ref, name: name, id: name, "data-cy": inputDataCy, className: toClassName(styles.input, htmlType === 'color' && '!h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), htmlType === 'text' && isClearable && (jsxRuntime.jsx("div", { className: "right-5 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) })), htmlType === 'date' && isClearable && (jsxRuntime.jsx("div", { className: "right-10 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) }))] }))), htmlType === 'area' && (jsxRuntime.jsx("textarea", { rows: rows, name: name, id: name, "data-cy": inputDataCy, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur })), type === 'floored' && (jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
 };
 
 var base$k = {
@@ -1187,19 +1189,196 @@ var useExcel = function () {
     };
 };
 
+var base$e = {
+    container: '',
+    head: 'flex justify-between',
+    body: 'relative rounded-md',
+    foot: '',
+    label: 'block font-medium text-gray-900',
+    hint: 'text-xs text-gray-500',
+    leading: 'pointer-events-none absolute inset-y-0 left-0 flex items-center',
+    input: 'block w-full flex border',
+    menuButton: '',
+    menu: 'z-10 !px-0 !py-0 !w-full rounded-md overflow-hidden border !mt-1 absolute bg-white',
+    tagItem: 'bg-gray-200 px-2 py-1 flex flex-row gap-x-1 items-center justify-between rounded-sm',
+    tagItemText: 'text-xs',
+    tagItemIconContainer: '!p-0 rounded-full hover:bg-gray-400 text-sm hover:text-white aspect-square w-4 flex items-center justify-center cursor-pointer',
+    tagItemIcon: '',
+    list: '!px-0 !w-full [&>*]:px-0 max-h-56 overflow-scroll !py-1',
+    listGroupLabel: '',
+    listItem: '!w-full !list-none hover:bg-primary-500 hover:text-white !py-2 !px-2',
+    listDisabledItem: '',
+    searchContainer: '!w-full !px-2 !py-2 border-b',
+    searchBox: '',
+    searchIcon: '',
+    closeIcon: '',
+    emptyState: 'w-full inline-flex items-start justify-start px-4',
+    trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
+    description: 'text-gray-400 text-xs mt-1',
+    error: 'text-red-500 text-xs ml-5 mt-1',
+};
+var leading$4 = {
+    input: 'pl-10',
+};
+var trailing$4 = {};
+var normal$5 = {
+    label: 'leading-6 text-sm mb-2',
+    hint: 'leading-6',
+    leading: 'pl-3',
+    input: 'rounded-md border-gray-200 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm placeholder-gray-300',
+    trailing: '',
+    description: 'mt-2 text-sm',
+};
+var inset$4 = {
+    container: 'rounded-md px-3 pt-2.5 pb-1.5 shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary-600',
+    label: 'text-xs',
+    hint: 'text-xs',
+    input: 'border-0 !ring-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0',
+    description: 'hidden',
+};
+var overlapping$4 = {
+    container: 'relative',
+    head: ' absolute flex justify-between items-center left-0 -top-2 right-0 mx-2 z-10 w-full',
+    label: 'inline-block bg-white px-1 text-xs font-medium text-gray-900 ',
+    hint: 'text-xs mr-4 bg-white px-1',
+    input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
+    description: 'hidden',
+};
+var pill$4 = {
+    head: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6',
+    foot: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mt-1 pr-6',
+    input: 'block w-full rounded-full border-0 px-4 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
+    trailing: 'pr-2',
+    description: 'text-xs',
+};
+var floored$4 = {
+    body: 'relative mt-2',
+    label: 'block text-sm font-medium leading-6 text-gray-900',
+    input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0',
+    description: 'text-xs mt-2',
+};
+var invalid$4 = {
+    container: 'ring-red-500',
+    input: 
+    // 'block w-full border border-transparent text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:leading-6 pr-10',
+    'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500',
+    description: 'text-sm text-red-600',
+};
+var disabled$5 = {
+    input: 'block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 cursor-not-allowed bg-gray-50 text-gray-500 ring-gray-200',
+};
+var styles$h = {
+    base: base$e,
+    leading: leading$4,
+    trailing: trailing$4,
+    normal: normal$5,
+    inset: inset$4,
+    overlapping: overlapping$4,
+    pill: pill$4,
+    floored: floored$4,
+    invalid: invalid$4,
+    disabled: disabled$5,
+};
+
+var SelectMenuForm = function (props) {
+    var _a;
+    var _b = props.name, name = _b === void 0 ? 'select-menu-form' : _b, label = props.label, description = props.description, placeholder = props.placeholder, options = props.options, required = props.required, value = props.value, error = props.error, _c = props.isRequired, isRequired = _c === void 0 ? false : _c, isLoading = props.isLoading, _d = props.isTouched, isTouched = _d === void 0 ? false : _d, isDisabled = props.isDisabled, _e = props.isClearable, isClearable = _e === void 0 ? true : _e, _f = props.isMultiple, isMultiple = _f === void 0 ? false : _f, _g = props.isSearchable, isSearchable = _g === void 0 ? true : _g, _h = props.isSolo, isSolo = _h === void 0 ? false : _h, onChange = props.onChange, onSearchInputChange = props.onSearchInputChange, onClear = props.onClear, onBlur = props.onBlur, stylesOverrides = props.styles;
+    var _j = React.useState(true), isFocus = _j[0], setIsFocus = _j[1];
+    var _k = React.useState(value !== null && value !== void 0 ? value : null), state = _k[0], setState = _k[1];
+    var isValid = error === undefined;
+    var selectDataCy = "form-select-".concat(name);
+    var errorDataCy = "form-select-error-".concat(name);
+    var handleGenerateStyle = function () {
+        var result = deepCopyObject(styles$h.base);
+        var keys = calculateNestedKeys(styles$h.base);
+        keys.forEach(function (key) {
+            lodash.set(result, key, toClassName(lodash.get(styles$h.base, key), lodash.get(styles$h['normal'], key), isTouched === true && !isValid && lodash.get(styles$h.invalid, key), isDisabled && lodash.get(styles$h.disabled, key), lodash.get(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var handleChange = function (selectValue) {
+        setState(selectValue);
+        onChange && onChange(selectValue);
+        setIsFocus(false);
+    };
+    var styles = handleGenerateStyle();
+    // Simulate onClear event.
+    React.useEffect(function () {
+        if (state === null && !isFocus) {
+            onClear && onClear(name);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state]);
+    // Simulate onBlur event.
+    React.useEffect(function () {
+        if (!isFocus) {
+            onBlur && onBlur();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFocus]);
+    // listen to value changes.
+    React.useEffect(function () {
+        setState(value);
+    }, [value]);
+    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx("div", { "data-cy": selectDataCy, children: jsxRuntime.jsx(Select, { primaryColor: "primary", 
+                            //
+                            placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.select, noOptionsMessage: (jsxRuntime.jsx("p", { className: styles.emptyState, children: (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder.emptyState) !== null && _a !== void 0 ? _a : 'No results found' })), searchInputPlaceholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.searchInput, 
+                            //
+                            loading: isLoading, isDisabled: isDisabled, isClearable: isClearable, isMultiple: isMultiple, isSearchable: isSearchable, 
+                            //
+                            options: options, 
+                            //
+                            value: state, onChange: handleChange, onSearchInputChange: onSearchInputChange, 
+                            //
+                            classNames: {
+                                menuButton: function () {
+                                    return toClassName(styles.input, state === null && '[&>*]:!text-gray-300 ', state === null &&
+                                        !isValid &&
+                                        isTouched &&
+                                        '[&>*]:!text-red-300');
+                                },
+                                menu: styles.menu,
+                                tagItem: function () { return styles.tagItem; },
+                                tagItemText: styles.tagItemText,
+                                tagItemIconContainer: styles.tagItemIconContainer,
+                                tagItemIcon: styles.tagItemIcon,
+                                list: styles.list,
+                                listItem: function () { return styles.listItem; },
+                                listDisabledItem: styles.listDisabledItem,
+                                listGroupLabel: styles.listGroupLabel,
+                                searchContainer: styles.searchContainer,
+                                searchBox: styles.searchBox,
+                                searchIcon: styles.searchIcon,
+                                closeIcon: styles.closeIcon,
+                            } }) }), !isSolo && (jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, "data-cy": errorDataCy, children: JSON.stringify(error).replaceAll('"', '') }))] }))] })] }));
+};
+
 var PanelPaginationNavigation = function (props) {
-    var defaultValue = props.current, _a = props.min, min = _a === void 0 ? 1 : _a, _b = props.max, max = _b === void 0 ? 20 : _b, stylesOverrides = props.styles, children = props.children, onChange = props.onChange;
-    var _c = React.useState(1), current = _c[0], setCurrent = _c[1];
+    var defaultValue = props.current, _a = props.min, min = _a === void 0 ? 1 : _a, _b = props.max, max = _b === void 0 ? 20 : _b, stylesOverrides = props.styles, pageSizeOptions = props.pageSizeOptions, defaultPageSize = props.defaultPageSize, _c = props.onChangePageSize, onChangePageSize = _c === void 0 ? lodash.noop : _c, children = props.children, onChange = props.onChange;
+    var _d = React.useState(1), current = _d[0], setCurrent = _d[1];
+    var _e = React.useState({
+        value: "".concat(defaultPageSize),
+        label: "".concat(defaultPageSize),
+    }), pageSize = _e[0], setPageSize = _e[1];
     React.useEffect(function () {
         if (defaultValue) {
             setCurrent(defaultValue);
         }
     }, [defaultValue]);
+    var hasCustomizablePageSize = React.useMemo(function () { return !!pageSizeOptions; }, [pageSizeOptions]);
+    var pageSizeMenuOptions = React.useMemo(function () {
+        var options = lodash.map(pageSizeOptions, function (option) { return ({
+            value: "".concat(option),
+            label: "".concat(option),
+        }); });
+        !pageSize && setPageSize(options[0]);
+        return options;
+    }, [pageSize, pageSizeOptions]);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$h.base);
-        var keys = calculateNestedKeys(styles$h.base);
+        var result = deepCopyObject(styles$g.base);
+        var keys = calculateNestedKeys(styles$g.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$h.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$g.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1236,10 +1415,18 @@ var PanelPaginationNavigation = function (props) {
             component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return handleChangeCurrent(min); }, children: min }), max >= min + 1 && (jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 1); }, children: min + 1 })), max >= min + 2 && (jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 2); }, children: min + 2 })), max >= min + 3 && (jsxRuntime.jsx("button", { className: toClassName(styles.button.default, current === min + 3 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 3); }, children: min + 3 }))] }));
             break;
     }
-    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [jsxRuntime.jsx("button", { className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: "Previous" }), jsxRuntime.jsx("button", { className: toClassName(styles.mobile.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: "Next" })] }), jsxRuntime.jsxs("div", { className: styles.desktop.container, children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { className: "text-sm text-gray-700", children: children && children({ min: min, max: max, current: current }) }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("nav", { className: styles.desktop.navigation, "aria-label": "Pagination", children: [jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.outerLeftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(1); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "First" }), jsxRuntime.jsx(solid.ChevronDoubleLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.innerButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "Previous" }), jsxRuntime.jsx(solid.ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), component, jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.innerButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "Next" }), jsxRuntime.jsx(solid.ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] }), jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.outerRightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(max); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "Last" }), jsxRuntime.jsx(solid.ChevronDoubleRightIcon, { className: styles.icon, "aria-hidden": "true" })] })] }) })] })] }));
+    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [jsxRuntime.jsx("button", { className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: "Previous" }), hasCustomizablePageSize && (jsxRuntime.jsx(SelectMenuForm, { name: "pageSize", isClearable: false, isSearchable: false, isMultiple: false, isSolo: true, options: pageSizeMenuOptions, value: pageSize, styles: { list: styles.pageSizeList }, onClear: lodash.noop, onChange: function (value) {
+                            if (onChangePageSize) {
+                                onChangePageSize(lodash.toSafeInteger(value === null || value === void 0 ? void 0 : value.value));
+                            }
+                        } })), jsxRuntime.jsx("button", { className: toClassName(styles.mobile.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: "Next" })] }), jsxRuntime.jsxs("div", { className: styles.desktop.container, children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { className: "text-sm text-gray-700", children: children && children({ min: min, max: max, current: current }) }) }), hasCustomizablePageSize && (jsxRuntime.jsx(SelectMenuForm, { name: "pageSize", isClearable: false, isSearchable: false, isMultiple: false, isSolo: true, options: pageSizeMenuOptions, value: pageSize, styles: { list: styles.pageSizeList }, onClear: lodash.noop, onChange: function (value) {
+                            if (onChangePageSize) {
+                                onChangePageSize(lodash.toSafeInteger(value === null || value === void 0 ? void 0 : value.value));
+                            }
+                        } })), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("nav", { className: styles.desktop.navigation, "aria-label": "Pagination", children: [jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.outerLeftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(1); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "First" }), jsxRuntime.jsx(solid.ChevronDoubleLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.innerButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "Previous" }), jsxRuntime.jsx(solid.ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), component, jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.innerButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "Next" }), jsxRuntime.jsx(solid.ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] }), jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.outerRightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(max); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "Last" }), jsxRuntime.jsx(solid.ChevronDoubleRightIcon, { className: styles.icon, "aria-hidden": "true" })] })] }) })] })] }));
 };
 
-var base$e = {
+var base$d = {
     container: 'flex items-center justify-between border-t border-gray-200 bg-white py-3',
     mobile: {
         container: '',
@@ -1260,9 +1447,10 @@ var base$e = {
     divider: 'relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500',
     label: 'sr-only',
     icon: 'w-5 h-5',
+    pageSizeList: '!overflow-hidden',
 };
-var styles$h = {
-    base: base$e,
+var styles$g = {
+    base: base$d,
 };
 
 var TableList = function (props) {
@@ -1270,10 +1458,10 @@ var TableList = function (props) {
     var id = props.id, columns = props.columns, data = props.data, page = props.page, children = props.children, defaultOrder = props.defaultOrder, defaultVisibility = props.defaultVisibility, _f = props.type, type = _f === void 0 ? 'normal' : _f, isLoading = props.isLoading, _g = props.isStriped, isStriped = _g === void 0 ? false : _g, _h = props.hasStickyHeader, hasStickyHeader = _h === void 0 ? false : _h, _j = props.hasVerticalSeparators, hasVerticalSeparators = _j === void 0 ? false : _j, _k = props.areControlsVisible, areControlsVisible = _k === void 0 ? true : _k, customControls = props.customControls, _l = props.exportFileName, exportFileName = _l === void 0 ? 'table-export' : _l, stylesOverrides = props.styles, onChange = props.onChange, onPaginate = props.onPaginate;
     var _m = useExcel(), generate = _m.generate, write = _m.write;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$g.base);
-        var keys = calculateNestedKeys(styles$g.base);
+        var result = deepCopyObject(styles$f.base);
+        var keys = calculateNestedKeys(styles$f.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$g.base, key), type && lodash.get(styles$g[type], key), hasStickyHeader && lodash.get(styles$g.sticky, key), hasVerticalSeparators && lodash.get(styles$g.separated, key), areControlsVisible && lodash.get(styles$g.controlled, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$f.base, key), type && lodash.get(styles$f[type], key), hasStickyHeader && lodash.get(styles$f.sticky, key), hasVerticalSeparators && lodash.get(styles$f.separated, key), areControlsVisible && lodash.get(styles$f.controlled, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1398,7 +1586,7 @@ var TableList = function (props) {
                         : { container: 'mt-4' }, onChange: onPaginate, children: children })] }) }));
 };
 
-var base$d = {
+var base$c = {
     container: 'px-4 sm:px-6 lg:px-8',
     head: {
         container: 'sm:flex sm:items-center',
@@ -1452,7 +1640,7 @@ var base$d = {
         },
     },
 };
-var normal$5 = {
+var normal$4 = {
     body: {
         content: 'inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8',
         styleWrapper: 'relative',
@@ -1510,9 +1698,9 @@ var controlled = {
         container: '!flex',
     },
 };
-var styles$g = {
-    base: base$d,
-    normal: normal$5,
+var styles$f = {
+    base: base$c,
+    normal: normal$4,
     panel: panel$1,
     full: full,
     sticky: sticky,
@@ -1564,10 +1752,10 @@ var TableList2 = function (props) {
     var _h = React.useState({}), columnVisibility = _h[0], setColumnVisibility = _h[1];
     var _j = React.useState([]), columnOrder = _j[0], setColumnOrder = _j[1];
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$f.base);
-        var keys = calculateNestedKeys(styles$f.base);
+        var result = deepCopyObject(styles$e.base);
+        var keys = calculateNestedKeys(styles$e.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$f.base, key), 
+            lodash.set(result, key, toClassName(lodash.get(styles$e.base, key), 
             // type && get(defaultStyles[type], key),
             // hasStickyHeader && get(defaultStyles.sticky, key),
             // hasVerticalSeparators && get(defaultStyles.separated, key),
@@ -1654,7 +1842,7 @@ var TableList2 = function (props) {
             setTableState(id, state);
         }
     }, [id, state]);
-    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx("div", { className: styles.head, children: head && head(state) }), jsxRuntime.jsx("div", { className: styles.body.content, children: jsxRuntime.jsx("div", { className: styles.body.wrapper, children: jsxRuntime.jsx("div", { className: styles.body.styleWrapper, children: jsxRuntime.jsxs("div", { className: styles.body.tableWrapper, children: [jsxRuntime.jsxs("table", { className: styles.body.table.container, children: [jsxRuntime.jsx("thead", { className: styles.body.table.head.container, children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsxRuntime.jsx("tr", { children: headerGroup.headers.map(function (header) {
+    return (jsxRuntime.jsxs("div", { className: styles.container, "data-cy": "table-list-".concat(id), children: [jsxRuntime.jsx("div", { className: styles.head, children: head && head(state) }), jsxRuntime.jsx("div", { className: styles.body.content, children: jsxRuntime.jsx("div", { className: styles.body.wrapper, children: jsxRuntime.jsx("div", { className: styles.body.styleWrapper, children: jsxRuntime.jsxs("div", { className: styles.body.tableWrapper, children: [jsxRuntime.jsxs("table", { className: styles.body.table.container, children: [jsxRuntime.jsx("thead", { className: styles.body.table.head.container, children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsxRuntime.jsx("tr", { children: headerGroup.headers.map(function (header) {
                                                     // Default sort icon to show a user that the column is sortable
                                                     var SortIconElement = solid.ChevronUpDownIcon;
                                                     if (header.column.getIsSorted()) {
@@ -1691,7 +1879,7 @@ var TableList2 = function (props) {
                                             }) }))] }), lodash.isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: ((_e = config === null || config === void 0 ? void 0 : config.options) === null || _e === void 0 ? void 0 : _e.emptyComponent) ? ((_f = config === null || config === void 0 ? void 0 : config.options) === null || _f === void 0 ? void 0 : _f.emptyComponent) : (jsxRuntime.jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsxRuntime.jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsxRuntime.jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsxRuntime.jsx("div", { className: styles.foot, children: foot && foot(state) })] }));
 };
 
-var base$c = {
+var base$b = {
     container: '',
     head: '',
     body: {
@@ -1730,8 +1918,8 @@ var base$c = {
     },
     foot: '',
 };
-var styles$f = {
-    base: base$c,
+var styles$e = {
+    base: base$b,
 };
 
 var createColumnHelper = function () {
@@ -1741,10 +1929,10 @@ var createColumnHelper = function () {
 var BreadcrumbsNavigation = function (props) {
     var _a = props.href, href = _a === void 0 ? '/' : _a, pages = props.pages, _b = props.type, type = _b === void 0 ? 'slashes' : _b, customSeparator = props.separator, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$e.base);
-        var keys = calculateNestedKeys(styles$e.base);
+        var result = deepCopyObject(styles$d.base);
+        var keys = calculateNestedKeys(styles$d.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$e.base, key), type && get(styles$e[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$d.base, key), type && get(styles$d[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1780,7 +1968,7 @@ var BreadcrumbsNavigation = function (props) {
     return (jsxRuntime.jsx("nav", { className: styles.container, "aria-label": "Breadcrumb", children: jsxRuntime.jsxs("ol", { className: styles.list, children: [jsxRuntime.jsx(HomeLink, {}), pages === null || pages === void 0 ? void 0 : pages.map(function (page) { return jsxRuntime.jsx(PageLink, { page: page }, page.name); })] }) }));
 };
 
-var base$b = {
+var base$a = {
     container: 'flex',
     list: 'flex',
     separator: '',
@@ -1865,8 +2053,8 @@ var bar = {
         link: '',
     },
 };
-var styles$e = {
-    base: base$b,
+var styles$d = {
+    base: base$a,
     slashes: slashes,
     chevrons: chevrons,
     panel: panel,
@@ -1877,10 +2065,10 @@ var PagePaginationNavigation = function (props) {
     var _a = props.min, min = _a === void 0 ? 1 : _a, _b = props.max, max = _b === void 0 ? 20 : _b, stylesOverrides = props.styles, onChange = props.onChange;
     var _c = React.useState(2), current = _c[0], setCurrent = _c[1];
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$d.base);
-        var keys = calculateNestedKeys(styles$d.base);
+        var result = deepCopyObject(styles$c.base);
+        var keys = calculateNestedKeys(styles$c.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$d.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$c.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1921,7 +2109,7 @@ var PagePaginationNavigation = function (props) {
     return (jsxRuntime.jsxs("nav", { className: styles.container, children: [jsxRuntime.jsx("div", { className: styles.left.container, children: jsxRuntime.jsxs("button", { className: toClassName(styles.left.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return setCurrent(current - 1); }, children: [jsxRuntime.jsx(solid.ArrowLongLeftIcon, { className: styles.left.icon }), "Previous"] }) }), jsxRuntime.jsx("div", { className: styles.center.container, children: component }), jsxRuntime.jsx("div", { className: styles.right.container, children: jsxRuntime.jsxs("button", { className: toClassName(styles.right.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return setCurrent(current + 1); }, children: ["Next", jsxRuntime.jsx(solid.ArrowLongRightIcon, { className: styles.right.icon })] }) })] }));
 };
 
-var base$a = {
+var base$9 = {
     container: 'flex items-center justify-between border-t border-gray-200 px-4 sm:px-0',
     left: {
         container: '-mt-px flex w-0 flex-1',
@@ -1943,18 +2131,18 @@ var base$a = {
     },
     divider: 'inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500',
 };
-var styles$d = {
-    base: base$a,
+var styles$c = {
+    base: base$9,
 };
 
 var Container$1 = function (props) {
     var children = props.children, stylesOverrides = props.styles;
     var _a = React.useState(''), active = _a[0], setActive = _a[1];
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$c.base);
-        var keys = calculateNestedKeys(styles$c.base);
+        var result = deepCopyObject(styles$b.base);
+        var keys = calculateNestedKeys(styles$b.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$c.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$b.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1964,10 +2152,10 @@ var Container$1 = function (props) {
 var List$1 = function (props) {
     var name = props.name, children = props.children, active = props.active, setActive = props.setActive, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$c.base);
-        var keys = calculateNestedKeys(styles$c.base);
+        var result = deepCopyObject(styles$b.base);
+        var keys = calculateNestedKeys(styles$b.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$c.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$b.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2013,10 +2201,10 @@ var List$1 = function (props) {
 var Item$1 = function (props) {
     var children = props.children, _a = props.as, LinkComponent = _a === void 0 ? 'a' : _a, _b = props.type, type = _b === void 0 ? 'underline' : _b, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick, stylesOverrides = props.styles, isLoading = props.isLoading;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$c.base);
-        var keys = calculateNestedKeys(styles$c.base);
+        var result = deepCopyObject(styles$b.base);
+        var keys = calculateNestedKeys(styles$b.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$c.base, key), type && lodash.get(styles$c[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$b.base, key), type && lodash.get(styles$b[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2037,7 +2225,7 @@ var TabNavigation = {
     View: View$1,
 };
 
-var base$9 = {
+var base$8 = {
     container: '',
     list: {
         container: '',
@@ -2074,8 +2262,8 @@ var buttons = {
         inactive: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
     },
 };
-var styles$c = {
-    base: base$9,
+var styles$b = {
+    base: base$8,
     underline: underline,
     pills: pills,
     buttons: buttons,
@@ -2102,11 +2290,11 @@ var List = function (props) {
         setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (jsxRuntime.jsx("nav", { className: toClassName(styles$b.list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list), children: children }));
+    return (jsxRuntime.jsx("nav", { className: toClassName(styles$a.list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list), children: children }));
 };
 var Item = function (props) {
     var children = props.children, href = props.href, isCurrent = props.isCurrent, _a = props.linkComponent, LinkComponent = _a === void 0 ? 'a' : _a, onClick = props.onClick;
-    return (jsxRuntime.jsx(LinkComponent, { href: href, className: toClassName(styles$b.item[isCurrent ? 'active' : 'notActive'], styles$b.item.base), onClick: onClick, children: children }));
+    return (jsxRuntime.jsx(LinkComponent, { href: href, className: toClassName(styles$a.item[isCurrent ? 'active' : 'notActive'], styles$a.item.base), onClick: onClick, children: children }));
 };
 var View = function (props) {
     var children = props.children;
@@ -2119,7 +2307,7 @@ var VerticalNavigation = {
     View: View,
 };
 
-var styles$b = {
+var styles$a = {
     container: '',
     list: 'space-y-1',
     item: {
@@ -2130,17 +2318,17 @@ var styles$b = {
 };
 
 var ModalOverlay = function (props) {
-    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = props.styles, onOpen = props.onOpen, onClose = props.onClose;
+    var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = props.styles, dataCy = props.dataCy, onOpen = props.onOpen, onClose = props.onClose;
     var _b = React.useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
     var options = React.useMemo(function () { return ({
         handleOpen: function () { return setIsOpen(true); },
         handleClose: function () { return setIsOpen(false); },
     }); }, []);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$a.base);
-        var keys = calculateNestedKeys(styles$a.base);
+        var result = deepCopyObject(styles$9.base);
+        var keys = calculateNestedKeys(styles$9.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$a.base, key), size && lodash.get(styles$a[size], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$9.base, key), size && lodash.get(styles$9[size], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2155,10 +2343,10 @@ var ModalOverlay = function (props) {
             onClose && onClose();
         }
     }, [isOpen, onClose]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, { show: isOpen, as: React.Fragment, children: jsxRuntime.jsxs(react.Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsxRuntime.jsx("div", { className: styles.background.container }) }), jsxRuntime.jsx("div", { className: styles.layout.container, children: jsxRuntime.jsx("div", { className: styles.layout.content, children: jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsxRuntime.jsx(react.Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, { show: isOpen, as: React.Fragment, children: jsxRuntime.jsxs(react.Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsxRuntime.jsx("div", { className: styles.background.container }) }), jsxRuntime.jsx("div", { className: styles.layout.container, "data-cy": dataCy, children: jsxRuntime.jsx("div", { className: styles.layout.content, children: jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsxRuntime.jsx(react.Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
 };
 
-var base$8 = {
+var base$7 = {
     container: 'relative z-20',
     background: {
         container: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
@@ -2212,8 +2400,8 @@ var xl$2 = {
         container: 'sm:max-w-4xl',
     },
 };
-var styles$a = {
-    base: base$8,
+var styles$9 = {
+    base: base$7,
     xs: xs$2,
     sm: sm$2,
     md: md$2,
@@ -2224,10 +2412,10 @@ var styles$a = {
 var NotificationOverlayContainer = function (_a) {
     var children = _a.children, stylesOverrides = _a.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$9.base);
-        var keys = calculateNestedKeys(styles$9.base);
+        var result = deepCopyObject(styles$8.base);
+        var keys = calculateNestedKeys(styles$8.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$9.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$8.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2242,10 +2430,10 @@ var NotificationOverlayItem = function (props) {
         onClose: function () { return setIsOpen(false); },
     }); }, []);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$9.base);
-        var keys = calculateNestedKeys(styles$9.base);
+        var result = deepCopyObject(styles$8.base);
+        var keys = calculateNestedKeys(styles$8.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$9.base, key), size && lodash.get(styles$9[size], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$8.base, key), size && lodash.get(styles$8[size], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2257,7 +2445,7 @@ var NotificationOverlay = {
     Item: NotificationOverlayItem,
 };
 
-var base$7 = {
+var base$6 = {
     container: {
         outer: 'pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-30',
         inner: 'flex w-full flex-col items-center space-y-4 sm:items-end',
@@ -2317,8 +2505,8 @@ var xl$1 = {
         },
     },
 };
-var styles$9 = {
-    base: base$7,
+var styles$8 = {
+    base: base$6,
     xs: xs$1,
     sm: sm$1,
     md: md$1,
@@ -2334,10 +2522,10 @@ var SlideOverOverlay = function (props) {
         handleClose: function () { return setIsOpen(false); },
     }); }, []);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$8.base);
-        var keys = calculateNestedKeys(styles$8.base);
+        var result = deepCopyObject(styles$7.base);
+        var keys = calculateNestedKeys(styles$7.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$8.base, key), size && lodash.get(styles$8[size], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$7.base, key), size && lodash.get(styles$7[size], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2345,7 +2533,7 @@ var SlideOverOverlay = function (props) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, { show: isOpen, as: React.Fragment, children: jsxRuntime.jsxs(react.Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsxRuntime.jsx("div", { className: styles.background.container }) }), jsxRuntime.jsx("div", { className: styles.layout.container, children: jsxRuntime.jsx("div", { className: styles.layout.content, children: jsxRuntime.jsx("div", { className: styles.layout.inner, children: jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsxRuntime.jsx(react.Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) }) })] }) }), trigger && trigger(options)] }));
 };
 
-var base$6 = {
+var base$5 = {
     container: 'relative z-20',
     background: {
         container: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
@@ -2400,8 +2588,8 @@ var xl = {
         container: 'sm:max-w-4xl',
     },
 };
-var styles$8 = {
-    base: base$6,
+var styles$7 = {
+    base: base$5,
     xs: xs,
     sm: sm,
     md: md,
@@ -2422,19 +2610,19 @@ var TableColumnOptionsCustom = function (props) {
         ids.splice(location, 0, column.id);
         setColumnOrder(ids);
     }, []);
-    return (jsxRuntime.jsxs(react.Popover, { children: [jsxRuntime.jsx(react.Popover.Button, { children: trigger }), jsxRuntime.jsx(react.Popover.Panel, { className: styles$7.controls.content, children: table
+    return (jsxRuntime.jsxs(react.Popover, { children: [jsxRuntime.jsx(react.Popover.Button, { children: trigger }), jsxRuntime.jsx(react.Popover.Panel, { className: styles$6.controls.content, children: table
                     .getAllLeafColumns()
                     .map(function (column, index) {
                     var isAccessorColumn = !!(column === null || column === void 0 ? void 0 : column.accessorFn);
-                    return (jsxRuntime.jsxs("div", { className: toClassName(styles$7.controls.dropdown.container, !isAccessorColumn && 'hidden'), children: [jsxRuntime.jsx("input", { className: styles$7.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsxRuntime.jsx("label", { className: styles$7.controls.dropdown.label, children: column.columnDef.header }), jsxRuntime.jsxs("div", { className: styles$7.controls.dropdown.actions, children: [jsxRuntime.jsx(outline$2.ChevronDownIcon, { className: styles$7.controls.dropdown.upIcon, onClick: function () {
+                    return (jsxRuntime.jsxs("div", { className: toClassName(styles$6.controls.dropdown.container, !isAccessorColumn && 'hidden'), children: [jsxRuntime.jsx("input", { className: styles$6.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsxRuntime.jsx("label", { className: styles$6.controls.dropdown.label, children: column.columnDef.header }), jsxRuntime.jsxs("div", { className: styles$6.controls.dropdown.actions, children: [jsxRuntime.jsx(outline$2.ChevronDownIcon, { className: styles$6.controls.dropdown.upIcon, onClick: function () {
                                             return handleUpdateColumnOrder(table, column, index - 1, setColumnOrder);
-                                        } }), jsxRuntime.jsx(outline$2.ChevronDownIcon, { className: styles$7.controls.dropdown.downIcon, onClick: function () {
+                                        } }), jsxRuntime.jsx(outline$2.ChevronDownIcon, { className: styles$6.controls.dropdown.downIcon, onClick: function () {
                                             return handleUpdateColumnOrder(table, column, index + 1, setColumnOrder);
                                         } })] })] }, column.id));
                 }) })] }));
 };
 
-var styles$7 = {
+var styles$6 = {
     container: '',
     controls: {
         container: 'flex-row justify-between z-10 relative mb-4 gap-2 hidden',
@@ -2464,168 +2652,6 @@ var TableExcelExportCustom = function (props) {
     return jsxRuntime.jsx("div", { children: children({ handleExport: handleExport }) });
 };
 
-var SelectMenuForm = function (props) {
-    var _a;
-    var _b = props.name, name = _b === void 0 ? 'select-menu-form' : _b, label = props.label, description = props.description, placeholder = props.placeholder, options = props.options, required = props.required, value = props.value, error = props.error, _c = props.isRequired, isRequired = _c === void 0 ? false : _c, isLoading = props.isLoading, _d = props.isTouched, isTouched = _d === void 0 ? false : _d, isDisabled = props.isDisabled, _e = props.isClearable, isClearable = _e === void 0 ? true : _e, _f = props.isMultiple, isMultiple = _f === void 0 ? false : _f, _g = props.isSearchable, isSearchable = _g === void 0 ? true : _g, _h = props.isSolo, isSolo = _h === void 0 ? false : _h, onChange = props.onChange, onSearchInputChange = props.onSearchInputChange, onClear = props.onClear, onBlur = props.onBlur, stylesOverrides = props.styles;
-    var _j = React.useState(true), isFocus = _j[0], setIsFocus = _j[1];
-    var _k = React.useState(value !== null && value !== void 0 ? value : null), state = _k[0], setState = _k[1];
-    var isValid = error === undefined;
-    var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$6.base);
-        var keys = calculateNestedKeys(styles$6.base);
-        keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$6.base, key), lodash.get(styles$6['normal'], key), isTouched === true && !isValid && lodash.get(styles$6.invalid, key), isDisabled && lodash.get(styles$6.disabled, key), lodash.get(stylesOverrides, key)));
-        });
-        return result;
-    };
-    var handleChange = function (selectValue) {
-        setState(selectValue);
-        onChange && onChange(selectValue);
-        setIsFocus(false);
-    };
-    var styles = handleGenerateStyle();
-    // Simulate onClear event.
-    React.useEffect(function () {
-        if (state === null && !isFocus) {
-            onClear && onClear(name);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state]);
-    // Simulate onBlur event.
-    React.useEffect(function () {
-        if (!isFocus) {
-            onBlur && onBlur();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isFocus]);
-    // listen to value changes.
-    React.useEffect(function () {
-        setState(value);
-    }, [value]);
-    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx(Select, { primaryColor: "primary", 
-                        //
-                        placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.select, noOptionsMessage: (jsxRuntime.jsx("p", { className: styles.emptyState, children: (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder.emptyState) !== null && _a !== void 0 ? _a : 'No results found' })), searchInputPlaceholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.searchInput, 
-                        //
-                        loading: isLoading, isDisabled: isDisabled, isClearable: isClearable, isMultiple: isMultiple, isSearchable: isSearchable, 
-                        //
-                        options: options, 
-                        //
-                        value: state, onChange: handleChange, onSearchInputChange: onSearchInputChange, 
-                        //
-                        classNames: {
-                            menuButton: function () {
-                                return toClassName(styles.input, state === null && '[&>*]:!text-gray-300 ', state === null &&
-                                    !isValid &&
-                                    isTouched &&
-                                    '[&>*]:!text-red-300');
-                            },
-                            menu: styles.menu,
-                            tagItem: function () { return styles.tagItem; },
-                            tagItemText: styles.tagItemText,
-                            tagItemIconContainer: styles.tagItemIconContainer,
-                            tagItemIcon: styles.tagItemIcon,
-                            list: styles.list,
-                            listItem: function () { return styles.listItem; },
-                            listDisabledItem: styles.listDisabledItem,
-                            listGroupLabel: styles.listGroupLabel,
-                            searchContainer: styles.searchContainer,
-                            searchBox: styles.searchBox,
-                            searchIcon: styles.searchIcon,
-                            closeIcon: styles.closeIcon,
-                        } }), !isSolo && (jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, children: JSON.stringify(error).replaceAll('"', '') }))] }))] })] }));
-};
-
-var base$5 = {
-    container: '',
-    head: 'flex justify-between',
-    body: 'relative rounded-md',
-    foot: '',
-    label: 'block font-medium text-gray-900',
-    hint: 'text-xs text-gray-500',
-    leading: 'pointer-events-none absolute inset-y-0 left-0 flex items-center',
-    input: 'block w-full flex border',
-    menuButton: '',
-    menu: 'z-10 !px-0 !py-0 !w-full rounded-md overflow-hidden border !mt-1 absolute bg-white',
-    tagItem: 'bg-gray-200 px-2 py-1 flex flex-row gap-x-1 items-center justify-between rounded-sm',
-    tagItemText: 'text-xs',
-    tagItemIconContainer: '!p-0 rounded-full hover:bg-gray-400 text-sm hover:text-white aspect-square w-4 flex items-center justify-center cursor-pointer',
-    tagItemIcon: '',
-    list: '!px-0 !w-full [&>*]:px-0 max-h-56 overflow-scroll !py-1',
-    listGroupLabel: '',
-    listItem: '!w-full !list-none hover:bg-primary-500 hover:text-white !py-2 !px-2',
-    listDisabledItem: '',
-    searchContainer: '!w-full !px-2 !py-2 border-b',
-    searchBox: '',
-    searchIcon: '',
-    closeIcon: '',
-    emptyState: 'w-full inline-flex items-start justify-start px-4',
-    trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
-    description: 'text-gray-400 text-xs mt-1',
-    error: 'text-red-500 text-xs ml-5 mt-1',
-};
-var leading$4 = {
-    input: 'pl-10',
-};
-var trailing$4 = {};
-var normal$4 = {
-    label: 'leading-6 text-sm mb-2',
-    hint: 'leading-6',
-    leading: 'pl-3',
-    input: 'rounded-md border-gray-200 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm placeholder-gray-300',
-    trailing: '',
-    description: 'mt-2 text-sm',
-};
-var inset$4 = {
-    container: 'rounded-md px-3 pt-2.5 pb-1.5 shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary-600',
-    label: 'text-xs',
-    hint: 'text-xs',
-    input: 'border-0 !ring-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0',
-    description: 'hidden',
-};
-var overlapping$4 = {
-    container: 'relative',
-    head: ' absolute flex justify-between items-center left-0 -top-2 right-0 mx-2 z-10 w-full',
-    label: 'inline-block bg-white px-1 text-xs font-medium text-gray-900 ',
-    hint: 'text-xs mr-4 bg-white px-1',
-    input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-    description: 'hidden',
-};
-var pill$4 = {
-    head: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6',
-    foot: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mt-1 pr-6',
-    input: 'block w-full rounded-full border-0 px-4 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-    trailing: 'pr-2',
-    description: 'text-xs',
-};
-var floored$4 = {
-    body: 'relative mt-2',
-    label: 'block text-sm font-medium leading-6 text-gray-900',
-    input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0',
-    description: 'text-xs mt-2',
-};
-var invalid$4 = {
-    container: 'ring-red-500',
-    input: 
-    // 'block w-full border border-transparent text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:leading-6 pr-10',
-    'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500',
-    description: 'text-sm text-red-600',
-};
-var disabled$5 = {
-    input: 'block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 cursor-not-allowed bg-gray-50 text-gray-500 ring-gray-200',
-};
-var styles$6 = {
-    base: base$5,
-    leading: leading$4,
-    trailing: trailing$4,
-    normal: normal$4,
-    inset: inset$4,
-    overlapping: overlapping$4,
-    pill: pill$4,
-    floored: floored$4,
-    invalid: invalid$4,
-    disabled: disabled$5,
-};
-
 var DateMenuForm = function (props) {
     var _a;
     var _b = props.name, name = _b === void 0 ? 'date-menu-form' : _b, _c = props.size, size = _c === void 0 ? 'compact' : _c, label = props.label, _d = props.i18n, i18n = _d === void 0 ? 'en' : _d, description = props.description, placeholder = props.placeholder, separator = props.separator, startFrom = props.startFrom, _e = props.displayFormat, displayFormat = _e === void 0 ? 'DD.MM.YYYY' : _e, _f = props.direction, direction = _f === void 0 ? 'down' : _f, minDate = props.minDate, maxDate = props.maxDate, _g = props.startWeekOn, startWeekOn = _g === void 0 ? 'mon' : _g, _h = props.icon, icon = _h === void 0 ? function (isEmpty) {
@@ -2652,6 +2678,8 @@ var DateMenuForm = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
+    var inputDataCy = "form-input-date-".concat(name);
+    var errorDataCy = "form-input-date-error-".concat(name);
     // Simulate onClear event.
     React.useEffect(function () {
         if (state.startDate === null && state.endDate === null) {
@@ -2659,13 +2687,13 @@ var DateMenuForm = function (props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [state]);
-    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx(Datepicker, { inputName: name, inputId: name, i18n: i18n, useRange: size === 'expanded', placeholder: placeholder, asSingle: !isRanged, separator: separator, startFrom: startFrom, displayFormat: displayFormat, disabled: isDisabled, popoverDirection: direction, minDate: minDate, maxDate: maxDate, toggleIcon: icon, 
+    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, "data-cy": inputDataCy, children: [jsxRuntime.jsx(Datepicker, { inputName: name, inputId: name, i18n: i18n, useRange: size === 'expanded', placeholder: placeholder, asSingle: !isRanged, separator: separator, startFrom: startFrom, displayFormat: displayFormat, disabled: isDisabled, popoverDirection: direction, minDate: minDate, maxDate: maxDate, toggleIcon: icon, 
                         //
                         value: state, 
                         //
                         onChange: handleValueChange, 
                         //
-                        inputClassName: styles.input, startWeekOn: startWeekOn }), !isSolo && (jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, children: typeof error === 'string'
+                        inputClassName: styles.input, startWeekOn: startWeekOn }), !isSolo && (jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, "data-cy": errorDataCy, children: typeof error === 'string'
                                     ? error
                                     : (_a = error === null || error === void 0 ? void 0 : error.startDate) !== null && _a !== void 0 ? _a : error === null || error === void 0 ? void 0 : error.endDate }))] }))] })] }));
 };
@@ -2761,7 +2789,7 @@ var CheckboxInputGroupForm = function (props) {
     var styles = handleGenerateStyle();
     return (jsxRuntime.jsx(formik.FormikProvider, { value: form, children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("legend", { className: styles.sr, children: name }), jsxRuntime.jsx("div", { className: styles.list, children: jsxRuntime.jsx(formik.FieldArray, { name: name, render: function (_a) {
                             var remove = _a.remove, push = _a.push;
-                            return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsxRuntime.jsxs("div", { className: styles.item.container, children: [jsxRuntime.jsx("div", { className: styles.item.head, children: jsxRuntime.jsx("input", { id: option.value, name: option.value, "aria-describedby": "".concat(option.value, "-description"), type: "checkbox", checked: values === null || values === void 0 ? void 0 : values.includes(option.value), className: styles.item.input, disabled: isDisabled, onChange: function (value) {
+                            return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsxRuntime.jsxs("div", { className: styles.item.container, children: [jsxRuntime.jsx("div", { className: styles.item.head, children: jsxRuntime.jsx("input", { id: option.value, name: option.value, "data-cy": "form-".concat(name, "-checkbox-").concat(option.value), "aria-describedby": "".concat(option.value, "-description"), type: "checkbox", checked: values === null || values === void 0 ? void 0 : values.includes(option.value), className: styles.item.input, disabled: isDisabled, onChange: function (value) {
                                                     var isChecked = value.currentTarget.checked;
                                                     if (isChecked) {
                                                         push(option.value);