@ballistix.digital/react-components 1.1.0 → 2.1.0

package/dist/index.js

@@ -157,10 +157,10 @@ var deepCopyObject = function (object) {
 var AvatarElement = function (props) {
     var src = props.src, placeholder = props.placeholder, children = props.children, url = props.url, _a = props.size, size = _a === void 0 ? 'md' : _a, _b = props.figure, figure = _b === void 0 ? 'block' : _b, status = props.status, isDisabled = props.isDisabled, isLoading = props.isLoading, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$u.base);
-        var keys = calculateNestedKeys(styles$u.base);
+        var result = deepCopyObject(styles$v.base);
+        var keys = calculateNestedKeys(styles$v.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$u.base, key), size && lodash.get(styles$u[size], key), figure && lodash.get(styles$u[figure], key), status && lodash.get(styles$u[status], key), isDisabled && lodash.get(styles$u.disabled, key), isLoading && lodash.get(styles$u.loading, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$v.base, key), size && lodash.get(styles$v[size], key), figure && lodash.get(styles$v[figure], key), status && lodash.get(styles$v[status], key), isDisabled && lodash.get(styles$v.disabled, key), isLoading && lodash.get(styles$v.loading, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -256,7 +256,7 @@ var online = {
 var blocked = {
     indicator: 'bg-red-400',
 };
-var styles$u = {
+var styles$v = {
     base: base$r,
     xs: xs$4,
     sm: sm$5,
@@ -314,10 +314,10 @@ var BadgeElement$1 = function (props) {
     var title = props.title, message = props.message, _a = props.type, type = _a === void 0 ? 'generic' : _a, _b = props.onClose, onClose = _b === void 0 ? lodash.noop : _b, _c = props.onCollapse, onCollapse = _c === void 0 ? lodash.noop : _c, _d = props.isCollapsible, isCollapsible = _d === void 0 ? false : _d, stylesOverrides = props.styles, iconAccessorOverride = props.iconAccessor;
     var _e = React.useState(false), isCollapsed = _e[0], setIsCollapsed = _e[1];
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$t.base);
-        var keys = calculateNestedKeys(styles$t.base);
+        var result = deepCopyObject(styles$u.base);
+        var keys = calculateNestedKeys(styles$u.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$t.base, key), type && lodash.get(styles$t[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$u.base, key), type && lodash.get(styles$u[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -402,7 +402,7 @@ var info = {
         title: 'text-blue-500',
     },
 };
-var styles$t = {
+var styles$u = {
     base: base$q,
     generic: generic,
     error: error$1,
@@ -414,10 +414,10 @@ var styles$t = {
 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, dataCy = props.dataCy;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$s.base);
-        var keys = calculateNestedKeys(styles$s.base);
+        var result = deepCopyObject(styles$t.base);
+        var keys = calculateNestedKeys(styles$t.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$s.base, key), type && lodash.get(styles$s[type], key), color && lodash.get(styles$s[color], key), size && lodash.get(styles$s[size], key), figure && lodash.get(styles$s[figure], key), isDisabled && lodash.get(styles$s.disabled, key), isLoading && lodash.get(styles$s.loading, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$t.base, key), type && lodash.get(styles$t[type], key), color && lodash.get(styles$t[color], key), size && lodash.get(styles$t[size], key), figure && lodash.get(styles$t[figure], key), isDisabled && lodash.get(styles$t.disabled, key), isLoading && lodash.get(styles$t.loading, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -512,7 +512,7 @@ var disabled$9 = {
 var loading$1 = {
     container: 'cursor-progress',
 };
-var styles$s = {
+var styles$t = {
     base: base$p,
     normal: normal$8,
     indicator: indicator,
@@ -539,10 +539,10 @@ var styles$s = {
 var ButtonElement = function (props) {
     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$r.base);
-        var keys = calculateNestedKeys(styles$r.base);
+        var result = deepCopyObject(styles$s.base);
+        var keys = calculateNestedKeys(styles$s.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$r.base, key), type && lodash.get(styles$r[type], key), size && lodash.get(styles$r[size], key), figure && lodash.get(styles$r[figure], key), status && lodash.get(styles$r[status], key), isDisabled && lodash.get(styles$r.disabled, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$s.base, key), type && lodash.get(styles$s[type], key), size && lodash.get(styles$s[size], key), figure && lodash.get(styles$s[figure], key), status && lodash.get(styles$s[status], key), isDisabled && lodash.get(styles$s.disabled, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -604,7 +604,7 @@ var error = {
 var disabled$8 = {
     container: '!opacity-20 !cursor-not-allowed',
 };
-var styles$r = {
+var styles$s = {
     base: base$o,
     primary: primary,
     secondary: secondary,
@@ -626,10 +626,10 @@ var styles$r = {
 var ButtonGroupElement = function (props) {
     var children = props.children, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$q.base);
-        var keys = calculateNestedKeys(styles$q.base);
+        var result = deepCopyObject(styles$r.base);
+        var keys = calculateNestedKeys(styles$r.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$q.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$r.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -653,17 +653,17 @@ var base$n = {
     button: '-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500',
     lastButton: '-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500',
 };
-var styles$q = {
+var styles$r = {
     base: base$n,
 };
 
 var Container$3 = function (props) {
     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$p.base);
-        var keys = calculateNestedKeys(styles$p.base);
+        var result = deepCopyObject(styles$q.base);
+        var keys = calculateNestedKeys(styles$q.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$p.base, key), type && lodash.get(styles$p[type], key), direction && lodash.get(styles$p[direction], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$q.base, key), type && lodash.get(styles$q[type], key), direction && lodash.get(styles$q[direction], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -697,7 +697,7 @@ var topLeft = {
 var topRight = {
     items: 'origin-bottom-left left-0 bottom-0',
 };
-var styles$p = {
+var styles$q = {
     base: base$m,
     button: button,
     compact: compact,
@@ -717,10 +717,10 @@ var InputGroupForm = function (props) {
         replacement: (_a = {}, _a[(_b = mask$1 === null || mask$1 === void 0 ? void 0 : mask$1.replacementCharacter) !== null && _b !== void 0 ? _b : 'X'] = /\d|\D/, _a),
     });
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$o.base);
-        var keys = calculateNestedKeys(styles$o.base);
+        var result = deepCopyObject(styles$p.base);
+        var keys = calculateNestedKeys(styles$p.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$o.base, key), leading !== undefined && lodash.get(styles$o.leading, key), trailing !== undefined && lodash.get(styles$o.trailing, key), type && lodash.get(styles$o[type], key), isTouched === true && !isValid && lodash.get(styles$o.invalid, key), isDisabled && lodash.get(styles$o.disabled, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$p.base, key), leading !== undefined && lodash.get(styles$p.leading, key), trailing !== undefined && lodash.get(styles$p.trailing, key), type && lodash.get(styles$p[type], key), isTouched === true && !isValid && lodash.get(styles$p.invalid, key), isDisabled && lodash.get(styles$p.disabled, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -796,7 +796,7 @@ var invalid$5 = {
 var disabled$7 = {
     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 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200',
 };
-var styles$o = {
+var styles$p = {
     base: base$l,
     leading: leading$5,
     trailing: trailing$5,
@@ -812,10 +812,10 @@ var styles$o = {
 var ContainerLayout = function (props) {
     var children = props.children, _a = props.type, type = _a === void 0 ? 'break' : _a, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$n.base);
-        var keys = calculateNestedKeys(styles$n.base);
+        var result = deepCopyObject(styles$o.base);
+        var keys = calculateNestedKeys(styles$o.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$n.base, key), type && lodash.get(styles$n[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$o.base, key), type && lodash.get(styles$o[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -852,7 +852,7 @@ var center$3 = {
 var fill$1 = {
     container: 'max-w-7xl mx-auto sm:px-6 lg:px-8',
 };
-var styles$n = {
+var styles$o = {
     base: base$k,
     break: breakStyles,
     center: center$3,
@@ -862,10 +862,10 @@ var styles$n = {
 var DividerLayout = function (props) {
     var children = props.children, _a = props.type, type = _a === void 0 ? 'left' : _a, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$m.base);
-        var keys = calculateNestedKeys(styles$m.base);
+        var result = deepCopyObject(styles$n.base);
+        var keys = calculateNestedKeys(styles$n.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$m.base, key), type && lodash.get(styles$m[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$n.base, key), type && lodash.get(styles$n[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -889,7 +889,7 @@ var center$2 = {
 var right = {
     body: 'justify-end',
 };
-var styles$m = {
+var styles$n = {
     base: base$j,
     left: left,
     center: center$2,
@@ -899,10 +899,10 @@ var styles$m = {
 var ListContainerLayout = function (props) {
     var children = props.children, _a = props.type, type = _a === void 0 ? 'fill' : _a, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$l.base);
-        var keys = calculateNestedKeys(styles$l.base);
+        var result = deepCopyObject(styles$m.base);
+        var keys = calculateNestedKeys(styles$m.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$l.base, key), type && lodash.get(styles$l[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$m.base, key), type && lodash.get(styles$m[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -944,7 +944,7 @@ var cardSticky = {
     list: 'space-y-3',
     item: 'bg-white shadow overflow-hidden px-4 py-4 sm:px-6 sm:rounded-md',
 };
-var styles$l = {
+var styles$m = {
     base: base$i,
     fill: fill,
     'fill-sticky': fillSticky,
@@ -957,10 +957,10 @@ var styles$l = {
 var MediaObjectLayout = function (props) {
     var title = props.title, paragraph = props.paragraph, customFigure = props.figure, _a = props.type, type = _a === void 0 ? 'top' : _a, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$k.base);
-        var keys = calculateNestedKeys(styles$k.base);
+        var result = deepCopyObject(styles$l.base);
+        var keys = calculateNestedKeys(styles$l.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$k.base, key), type && lodash.get(styles$k[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$l.base, key), type && lodash.get(styles$l[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1033,7 +1033,7 @@ var wideReversed = {
     figure: 'mb-4 md:mb-0 sm:mr-4 sm:mb-4',
     svg: 'h-32 w-full sm:w-32',
 };
-var styles$k = {
+var styles$l = {
     base: base$h,
     top: top,
     'top-reversed': topReversed,
@@ -1052,10 +1052,10 @@ var styles$k = {
 var Container$2 = function (props) {
     var children = props.children, _a = props.type, type = _a === void 0 ? 'normal' : _a, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$j.base);
-        var keys = calculateNestedKeys(styles$j.base);
+        var result = deepCopyObject(styles$k.base);
+        var keys = calculateNestedKeys(styles$k.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$j.base, key), type && lodash.get(styles$j[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$k.base, key), type && lodash.get(styles$k[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1065,10 +1065,10 @@ var Container$2 = function (props) {
 var Section = function (props) {
     var children = props.children, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$j.base);
-        var keys = calculateNestedKeys(styles$j.base);
+        var result = deepCopyObject(styles$k.base);
+        var keys = calculateNestedKeys(styles$k.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$j.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$k.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1090,7 +1090,7 @@ var normal$6 = {
 var sticky$1 = {
     container: 'sm:rounded-lg',
 };
-var styles$j = {
+var styles$k = {
     base: base$g,
     normal: normal$6,
     sticky: sticky$1,
@@ -1196,6 +1196,79 @@ var useExcel = function () {
     };
 };
 
+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$j.base);
+        var keys = calculateNestedKeys(styles$j.base);
+        keys.forEach(function (key) {
+            lodash.set(result, key, toClassName(lodash.get(styles$j.base, key), lodash.get(styles$j['normal'], key), isTouched === true && !isValid && lodash.get(styles$j.invalid, key), isDisabled && lodash.get(styles$j.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 base$f = {
     container: '',
     head: 'flex justify-between',
@@ -1274,7 +1347,7 @@ var invalid$4 = {
 var disabled$6 = {
     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$i = {
+var styles$j = {
     base: base$f,
     leading: leading$4,
     trailing: trailing$4,
@@ -1287,79 +1360,6 @@ var styles$i = {
     disabled: disabled$6,
 };
 
-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$i.base);
-        var keys = calculateNestedKeys(styles$i.base);
-        keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$i.base, key), lodash.get(styles$i['normal'], key), isTouched === true && !isValid && lodash.get(styles$i.invalid, key), isDisabled && lodash.get(styles$i.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, 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];
@@ -1382,10 +1382,10 @@ var PanelPaginationNavigation = function (props) {
         return options;
     }, [pageSize, pageSizeOptions]);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$h.base);
-        var keys = calculateNestedKeys(styles$h.base);
+        var result = deepCopyObject(styles$i.base);
+        var keys = calculateNestedKeys(styles$i.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$i.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1456,7 +1456,7 @@ var base$e = {
     icon: 'w-5 h-5',
     pageSizeList: '!overflow-hidden',
 };
-var styles$h = {
+var styles$i = {
     base: base$e,
 };
 
@@ -1465,10 +1465,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$h.base);
+        var keys = calculateNestedKeys(styles$h.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$h.base, key), type && lodash.get(styles$h[type], key), hasStickyHeader && lodash.get(styles$h.sticky, key), hasVerticalSeparators && lodash.get(styles$h.separated, key), areControlsVisible && lodash.get(styles$h.controlled, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1705,7 +1705,7 @@ var controlled = {
         container: '!flex',
     },
 };
-var styles$g = {
+var styles$h = {
     base: base$d,
     normal: normal$4,
     panel: panel$1,
@@ -1762,10 +1762,10 @@ var TableList2 = function (props) {
     var _k = React.useState({}), columnVisibility = _k[0], setColumnVisibility = _k[1];
     var _l = React.useState([]), columnOrder = _l[0], setColumnOrder = _l[1];
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$f.base);
-        var keys = calculateNestedKeys(styles$f.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$f.base, key), 
+            lodash.set(result, key, toClassName(lodash.get(styles$g.base, key), 
             // type && get(defaultStyles[type], key),
             // hasStickyHeader && get(defaultStyles.sticky, key),
             // hasVerticalSeparators && get(defaultStyles.separated, key),
@@ -1958,7 +1958,7 @@ var base$c = {
     },
     foot: '',
 };
-var styles$f = {
+var styles$g = {
     base: base$c,
 };
 
@@ -1969,10 +1969,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$f.base);
+        var keys = calculateNestedKeys(styles$f.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$f.base, key), type && get(styles$f[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2093,7 +2093,7 @@ var bar = {
         link: '',
     },
 };
-var styles$e = {
+var styles$f = {
     base: base$b,
     slashes: slashes,
     chevrons: chevrons,
@@ -2105,10 +2105,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$e.base);
+        var keys = calculateNestedKeys(styles$e.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$e.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2171,7 +2171,7 @@ 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 = {
+var styles$e = {
     base: base$a,
 };
 
@@ -2179,10 +2179,10 @@ 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$d.base);
+        var keys = calculateNestedKeys(styles$d.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$d.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2192,10 +2192,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$d.base);
+        var keys = calculateNestedKeys(styles$d.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$d.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2241,10 +2241,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$d.base);
+        var keys = calculateNestedKeys(styles$d.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$d.base, key), type && lodash.get(styles$d[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2302,7 +2302,7 @@ var buttons = {
         inactive: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
     },
 };
-var styles$c = {
+var styles$d = {
     base: base$9,
     underline: underline,
     pills: pills,
@@ -2330,11 +2330,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$c.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$c.item[isCurrent ? 'active' : 'notActive'], styles$c.item.base), onClick: onClick, children: children }));
 };
 var View = function (props) {
     var children = props.children;
@@ -2347,7 +2347,7 @@ var VerticalNavigation = {
     View: View,
 };
 
-var styles$b = {
+var styles$c = {
     container: '',
     list: 'space-y-1',
     item: {
@@ -2365,10 +2365,10 @@ var ModalOverlay = function (props) {
         handleClose: function () { return setIsOpen(false); },
     }); }, []);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$a.base);
-        var keys = calculateNestedKeys(styles$a.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$a.base, key), size && lodash.get(styles$a[size], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$b.base, key), size && lodash.get(styles$b[size], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2440,7 +2440,7 @@ var xl$2 = {
         container: 'sm:max-w-4xl',
     },
 };
-var styles$a = {
+var styles$b = {
     base: base$8,
     xs: xs$2,
     sm: sm$2,
@@ -2452,10 +2452,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$a.base);
+        var keys = calculateNestedKeys(styles$a.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$a.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2470,10 +2470,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$a.base);
+        var keys = calculateNestedKeys(styles$a.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$a.base, key), size && lodash.get(styles$a[size], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2545,7 +2545,7 @@ var xl$1 = {
         },
     },
 };
-var styles$9 = {
+var styles$a = {
     base: base$7,
     xs: xs$1,
     sm: sm$1,
@@ -2562,10 +2562,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$9.base);
+        var keys = calculateNestedKeys(styles$9.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$9.base, key), size && lodash.get(styles$9[size], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2628,7 +2628,7 @@ var xl = {
         container: 'sm:max-w-4xl',
     },
 };
-var styles$8 = {
+var styles$9 = {
     base: base$6,
     xs: xs,
     sm: sm,
@@ -2652,10 +2652,10 @@ var TableColumnOptionsCustom = function (props) {
         setColumnOrder(ids);
     }, []);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$7);
-        var keys = calculateNestedKeys(styles$7);
+        var result = deepCopyObject(styles$8);
+        var keys = calculateNestedKeys(styles$8);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$7, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$8, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2677,7 +2677,7 @@ var TableColumnOptionsCustom = function (props) {
                     })] })] }));
 };
 
-var styles$7 = {
+var styles$8 = {
     controls: {
         container: 'flex-row justify-between z-10 relative mb-4 gap-2 hidden',
         content: 'absolute rounded-md z-20 bg-white w-fit -translate-x-1/2 my-2 flex flex-col border-[1px]',
@@ -2726,10 +2726,10 @@ var DateMenuForm = function (props) {
         }, 50);
     }, [onBlur, onChange]);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$6.base);
-        var keys = calculateNestedKeys(styles$6.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$6.base, key), type && lodash.get(styles$6[type], key), isTouched === true && !isValid && lodash.get(styles$6.invalid, key), isDisabled && lodash.get(styles$6.disabled, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$7.base, key), type && lodash.get(styles$7[type], key), isTouched === true && !isValid && lodash.get(styles$7.invalid, key), isDisabled && lodash.get(styles$7.disabled, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2854,7 +2854,7 @@ var invalid$3 = {
 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 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200',
 };
-var styles$6 = {
+var styles$7 = {
     base: base$5,
     leading: leading$3,
     trailing: trailing$3,
@@ -2870,12 +2870,12 @@ var styles$6 = {
 var CheckboxInputGroupForm = function (props) {
     var name = props.name, form = props.form, options = props.options, values = props.values, isDisabled = props.isDisabled, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$5.base);
-        var keys = calculateNestedKeys(styles$5.base);
+        var result = deepCopyObject(styles$6.base);
+        var keys = calculateNestedKeys(styles$6.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$5.base, key), 
+            lodash.set(result, key, toClassName(lodash.get(styles$6.base, key), 
             // isTouched === true && !isValid && get(defaultStyles.invalid, key),
-            isDisabled && lodash.get(styles$5.disabled, key), lodash.get(stylesOverrides, key)));
+            isDisabled && lodash.get(styles$6.disabled, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2912,7 +2912,7 @@ var disabled$4 = {
         input: 'block 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 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200',
     },
 };
-var styles$5 = {
+var styles$6 = {
     base: base$4,
     disabled: disabled$4,
 };
@@ -2920,12 +2920,10 @@ var styles$5 = {
 var CheckboxInputForm = function (props) {
     var name = props.name, value = props.value, title = props.title, description = props.description, isIndeterminable = props.isIndeterminable, isDisabled = props.isDisabled, onChange = props.onChange, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$4.base);
-        var keys = calculateNestedKeys(styles$4.base);
+        var result = deepCopyObject(styles$5.base);
+        var keys = calculateNestedKeys(styles$5.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$4.base, key), 
-            // isTouched === true && !isValid && get(defaultStyles.invalid, key),
-            isDisabled && lodash.get(styles$4.disabled, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$5.base, key), isDisabled && lodash.get(styles$5.disabled, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2954,7 +2952,7 @@ var CheckboxInputForm = function (props) {
             inputRef.current.indeterminate = value === null;
         }
     }, [isIndeterminable, value]);
-    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx("div", { className: styles.head, children: jsxRuntime.jsx("input", { ref: inputRef, name: name, "data-cy": "form-".concat(name, "-checkbox"), "aria-describedby": "".concat(name, "-description"), type: "checkbox", checked: !!value, className: styles.input, disabled: isDisabled, onChange: handleToggle }) }), jsxRuntime.jsxs("div", { className: styles.body, children: [jsxRuntime.jsx("label", { htmlFor: "comments", className: styles.label, children: title }), description && (jsxRuntime.jsx("p", { id: "comments-description", className: styles.description, children: description }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx("div", { className: styles.head, children: jsxRuntime.jsx("input", { ref: inputRef, name: name, "data-cy": "form-".concat(name, "-checkbox"), "aria-describedby": "".concat(name, "-description"), type: "checkbox", checked: !!value, className: styles.input, disabled: isDisabled, onChange: handleToggle }) }), jsxRuntime.jsxs("div", { className: styles.body, children: [jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: title }), description && (jsxRuntime.jsx("p", { id: "".concat(name, "-description"), className: styles.description, children: description }))] })] }));
 };
 
 var base$3 = {
@@ -2968,11 +2966,55 @@ var base$3 = {
 var disabled$3 = {
     input: 'block 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 disabled:cursor-not-allowed disabled:bg-gray-500 disabled:text-gray-500 disabled:ring-gray-200',
 };
-var styles$4 = {
+var styles$5 = {
     base: base$3,
     disabled: disabled$3,
 };
 
+var Switch = function (props) {
+    var name = props.name, label = props.label, description = props.description, isDisabled = props.isDisabled, _a = props.isRequired, isRequired = _a === void 0 ? false : _a, required = props.required, _b = props.isTouched, isTouched = _b === void 0 ? false : _b, error = props.error, value = props.value, stylesOverrides = props.styles, onChange = props.onChange, iconAccessorChecked = props.iconAccessorChecked, iconAccessorUnchecked = props.iconAccessorUnchecked;
+    var inputDataCy = "form-input-".concat(name);
+    var errorDataCy = "form-input-error-".concat(name);
+    var handleGenerateStyle = function () {
+        var result = deepCopyObject(styles$4);
+        var keys = calculateNestedKeys(styles$4);
+        lodash.forEach(keys, function (key) {
+            lodash.set(result, key, toClassName(lodash.get(styles$4, key), lodash.get(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var styles = handleGenerateStyle();
+    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.jsx("div", { className: styles.container, children: jsxRuntime.jsx("div", { "data-cy": inputDataCy, children: jsxRuntime.jsxs(react.Switch, { checked: value, disabled: isDisabled, onChange: function (value) { return lodash.delay(function () { return onChange(value); }, 200); }, className: toClassName(styles.switch.base, value ? styles.switch.checked : styles.switch.unchecked, isDisabled && styles.switch.disabled), children: [jsxRuntime.jsxs("span", { className: styles.switch.screenreader, children: ["Switch setting for ", name] }), jsxRuntime.jsx("span", { className: toClassName(styles.toggle.base, value ? styles.toggle.checked : styles.toggle.unchecked), children: iconAccessorChecked && iconAccessorUnchecked && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: toClassName(value ? styles.icon.hidden : styles.icon.shown, styles.icon.base), "aria-hidden": "true", children: jsxRuntime.jsx(IconElement, { accessor: iconAccessorUnchecked, className: styles.icon.icon }) }), jsxRuntime.jsx("span", { className: toClassName(value ? styles.icon.shown : styles.icon.hidden, styles.icon.base), "aria-hidden": "true", children: jsxRuntime.jsx(IconElement, { accessor: iconAccessorChecked, className: styles.icon.icon }) })] })) })] }) }) }), 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 styles$4 = {
+    label: 'block font-medium text-gray-900 leading-6 text-sm mb-2 mr-1',
+    container: '',
+    head: 'flex justify-between',
+    hint: 'text-xs text-gray-500',
+    foot: '',
+    description: 'text-gray-400 text-xs mt-1',
+    switch: {
+        base: 'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out',
+        screenreader: 'sr-only',
+        checked: 'bg-primary-600 focus:outline-none focus:ring-0 focus:ring-primary-600 focus:ring-offset-2',
+        unchecked: 'bg-gray-200 focus:outline-none focus:ring-0 focus:ring-primary-600 focus:ring-offset-2',
+        disabled: 'opacity-50 !cursor-not-allowed',
+    },
+    toggle: {
+        base: 'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+        checked: 'translate-x-5',
+        unchecked: 'translate-x-0',
+    },
+    icon: {
+        base: 'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
+        hidden: 'opacity-0 ease-out duration-100',
+        shown: 'opacity-100 ease-in duration-200',
+        icon: 'h-3 w-3',
+    },
+    error: 'text-red-500 text-xs ml-0 mt-2',
+};
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -10989,6 +11031,7 @@ exports.PanelLayout = LayoutPanel;
 exports.PanelPaginationNavigation = PanelPaginationNavigation;
 exports.SelectMenuForm = SelectMenuForm;
 exports.SlideOverOverlay = SlideOverOverlay;
+exports.SwitchForm = Switch;
 exports.TabNavigation = TabNavigation;
 exports.TableColumnOptionsCustom = TableColumnOptionsCustom;
 exports.TableExportCustom = TableExcelExportCustom;