@ballistix.digital/react-components 1.1.0 → 2.1.0

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { ArrowPathIcon, ChevronDownIcon, EllipsisVerticalIcon, ExclamationCircleIcon, ChevronDoubleLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDoubleRightIcon, ChevronUpIcon, ChevronUpDownIcon, HomeIcon, ArrowLongLeftIcon, ArrowLongRightIcon } from '@heroicons/react/20/solid';
-import { isArray, map, set, get, noop as noop$1, indexOf, toSafeInteger, pick, isEmpty, some, compact as compact$1, forEach, assign, includes, intersection, trim, lastIndexOf } from 'lodash';
+import { isArray, map, set, get, noop as noop$1, indexOf, toSafeInteger, pick, isEmpty, some, compact as compact$1, forEach, assign, includes, intersection, delay, trim, lastIndexOf } from 'lodash';
 import get$1 from 'lodash/get';
 import React, { useState, useMemo, Children, Fragment, useEffect, useCallback, useRef, forwardRef, useImperativeHandle, useReducer, createElement, PureComponent, Component } from 'react';
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -10,7 +10,7 @@ import { far } from '@fortawesome/pro-regular-svg-icons';
 import { fas } from '@fortawesome/pro-solid-svg-icons';
 import { fat } from '@fortawesome/pro-thin-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Menu, Transition, Dialog, Popover, Switch } from '@headlessui/react';
+import { Menu, Transition, Dialog, Popover, Switch as Switch$1 } from '@headlessui/react';
 import { useMask } from '@react-input/mask';
 import { ViewColumnsIcon, ChevronDownIcon as ChevronDownIcon$1, TableCellsIcon, XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { useReactTable, getCoreRowModel, flexRender, createColumnHelper as createColumnHelper$1 } from '@tanstack/react-table';
@@ -155,10 +155,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) {
-            set(result, key, toClassName(get(styles$u.base, key), size && get(styles$u[size], key), figure && get(styles$u[figure], key), status && get(styles$u[status], key), isDisabled && get(styles$u.disabled, key), isLoading && get(styles$u.loading, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$v.base, key), size && get(styles$v[size], key), figure && get(styles$v[figure], key), status && get(styles$v[status], key), isDisabled && get(styles$v.disabled, key), isLoading && get(styles$v.loading, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -254,7 +254,7 @@ var online = {
 var blocked = {
     indicator: 'bg-red-400',
 };
-var styles$u = {
+var styles$v = {
     base: base$r,
     xs: xs$4,
     sm: sm$5,
@@ -312,10 +312,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 ? noop$1 : _b, _c = props.onCollapse, onCollapse = _c === void 0 ? noop$1 : _c, _d = props.isCollapsible, isCollapsible = _d === void 0 ? false : _d, stylesOverrides = props.styles, iconAccessorOverride = props.iconAccessor;
     var _e = 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) {
-            set(result, key, toClassName(get(styles$t.base, key), type && get(styles$t[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$u.base, key), type && get(styles$u[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -400,7 +400,7 @@ var info = {
         title: 'text-blue-500',
     },
 };
-var styles$t = {
+var styles$u = {
     base: base$q,
     generic: generic,
     error: error$1,
@@ -412,10 +412,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) {
-            set(result, key, toClassName(get(styles$s.base, key), type && get(styles$s[type], key), color && get(styles$s[color], key), size && get(styles$s[size], key), figure && get(styles$s[figure], key), isDisabled && get(styles$s.disabled, key), isLoading && get(styles$s.loading, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$t.base, key), type && get(styles$t[type], key), color && get(styles$t[color], key), size && get(styles$t[size], key), figure && get(styles$t[figure], key), isDisabled && get(styles$t.disabled, key), isLoading && get(styles$t.loading, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -510,7 +510,7 @@ var disabled$9 = {
 var loading$1 = {
     container: 'cursor-progress',
 };
-var styles$s = {
+var styles$t = {
     base: base$p,
     normal: normal$8,
     indicator: indicator,
@@ -537,10 +537,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) {
-            set(result, key, toClassName(get(styles$r.base, key), type && get(styles$r[type], key), size && get(styles$r[size], key), figure && get(styles$r[figure], key), status && get(styles$r[status], key), isDisabled && get(styles$r.disabled, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$s.base, key), type && get(styles$s[type], key), size && get(styles$s[size], key), figure && get(styles$s[figure], key), status && get(styles$s[status], key), isDisabled && get(styles$s.disabled, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -602,7 +602,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,
@@ -624,10 +624,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) {
-            set(result, key, toClassName(get(styles$q.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$r.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -651,17 +651,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) {
-            set(result, key, toClassName(get(styles$p.base, key), type && get(styles$p[type], key), direction && get(styles$p[direction], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$q.base, key), type && get(styles$q[type], key), direction && get(styles$q[direction], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -695,7 +695,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,
@@ -715,10 +715,10 @@ var InputGroupForm = function (props) {
         replacement: (_a = {}, _a[(_b = mask === null || mask === void 0 ? void 0 : mask.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) {
-            set(result, key, toClassName(get(styles$o.base, key), leading !== undefined && get(styles$o.leading, key), trailing !== undefined && get(styles$o.trailing, key), type && get(styles$o[type], key), isTouched === true && !isValid && get(styles$o.invalid, key), isDisabled && get(styles$o.disabled, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$p.base, key), leading !== undefined && get(styles$p.leading, key), trailing !== undefined && get(styles$p.trailing, key), type && get(styles$p[type], key), isTouched === true && !isValid && get(styles$p.invalid, key), isDisabled && get(styles$p.disabled, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -794,7 +794,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,
@@ -810,10 +810,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) {
-            set(result, key, toClassName(get(styles$n.base, key), type && get(styles$n[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$o.base, key), type && get(styles$o[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -850,7 +850,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,
@@ -860,10 +860,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) {
-            set(result, key, toClassName(get(styles$m.base, key), type && get(styles$m[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$n.base, key), type && get(styles$n[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -887,7 +887,7 @@ var center$2 = {
 var right = {
     body: 'justify-end',
 };
-var styles$m = {
+var styles$n = {
     base: base$j,
     left: left,
     center: center$2,
@@ -897,10 +897,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) {
-            set(result, key, toClassName(get(styles$l.base, key), type && get(styles$l[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$m.base, key), type && get(styles$m[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -942,7 +942,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,
@@ -955,10 +955,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) {
-            set(result, key, toClassName(get(styles$k.base, key), type && get(styles$k[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$l.base, key), type && get(styles$l[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1031,7 +1031,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,
@@ -1050,10 +1050,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) {
-            set(result, key, toClassName(get(styles$j.base, key), type && get(styles$j[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$k.base, key), type && get(styles$k[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1063,10 +1063,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) {
-            set(result, key, toClassName(get(styles$j.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$k.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1088,7 +1088,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,
@@ -1194,6 +1194,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 = useState(true), isFocus = _j[0], setIsFocus = _j[1];
+    var _k = 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) {
+            set(result, key, toClassName(get(styles$j.base, key), get(styles$j['normal'], key), isTouched === true && !isValid && get(styles$j.invalid, key), isDisabled && get(styles$j.disabled, key), get(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var handleChange = function (selectValue) {
+        setState(selectValue);
+        onChange && onChange(selectValue);
+        setIsFocus(false);
+    };
+    var styles = handleGenerateStyle();
+    // Simulate onClear event.
+    useEffect(function () {
+        if (state === null && !isFocus) {
+            onClear && onClear(name);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state]);
+    // Simulate onBlur event.
+    useEffect(function () {
+        if (!isFocus) {
+            onBlur && onBlur();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFocus]);
+    // listen to value changes.
+    useEffect(function () {
+        setState(value);
+    }, [value]);
+    return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxs("div", { className: styles.container, children: [jsx("div", { "data-cy": selectDataCy, children: jsx(Select, { primaryColor: "primary", 
+                            //
+                            placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.select, noOptionsMessage: (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 && (jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (jsx("p", { className: styles.error, "data-cy": errorDataCy, children: JSON.stringify(error).replaceAll('"', '') }))] }))] })] }));
+};
+
 var base$f = {
     container: '',
     head: 'flex justify-between',
@@ -1272,7 +1345,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,
@@ -1285,79 +1358,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 = useState(true), isFocus = _j[0], setIsFocus = _j[1];
-    var _k = 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) {
-            set(result, key, toClassName(get(styles$i.base, key), get(styles$i['normal'], key), isTouched === true && !isValid && get(styles$i.invalid, key), isDisabled && get(styles$i.disabled, key), get(stylesOverrides, key)));
-        });
-        return result;
-    };
-    var handleChange = function (selectValue) {
-        setState(selectValue);
-        onChange && onChange(selectValue);
-        setIsFocus(false);
-    };
-    var styles = handleGenerateStyle();
-    // Simulate onClear event.
-    useEffect(function () {
-        if (state === null && !isFocus) {
-            onClear && onClear(name);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state]);
-    // Simulate onBlur event.
-    useEffect(function () {
-        if (!isFocus) {
-            onBlur && onBlur();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isFocus]);
-    // listen to value changes.
-    useEffect(function () {
-        setState(value);
-    }, [value]);
-    return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxs("div", { className: styles.container, children: [jsx("div", { "data-cy": selectDataCy, children: jsx(Select, { primaryColor: "primary", 
-                            //
-                            placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.select, noOptionsMessage: (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 && (jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (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 ? noop$1 : _c, children = props.children, onChange = props.onChange;
     var _d = useState(1), current = _d[0], setCurrent = _d[1];
@@ -1380,10 +1380,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) {
-            set(result, key, toClassName(get(styles$h.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$i.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1454,7 +1454,7 @@ var base$e = {
     icon: 'w-5 h-5',
     pageSizeList: '!overflow-hidden',
 };
-var styles$h = {
+var styles$i = {
     base: base$e,
 };
 
@@ -1463,10 +1463,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) {
-            set(result, key, toClassName(get(styles$g.base, key), type && get(styles$g[type], key), hasStickyHeader && get(styles$g.sticky, key), hasVerticalSeparators && get(styles$g.separated, key), areControlsVisible && get(styles$g.controlled, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$h.base, key), type && get(styles$h[type], key), hasStickyHeader && get(styles$h.sticky, key), hasVerticalSeparators && get(styles$h.separated, key), areControlsVisible && get(styles$h.controlled, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1703,7 +1703,7 @@ var controlled = {
         container: '!flex',
     },
 };
-var styles$g = {
+var styles$h = {
     base: base$d,
     normal: normal$4,
     panel: panel$1,
@@ -1760,10 +1760,10 @@ var TableList2 = function (props) {
     var _k = useState({}), columnVisibility = _k[0], setColumnVisibility = _k[1];
     var _l = 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) {
-            set(result, key, toClassName(get(styles$f.base, key), 
+            set(result, key, toClassName(get(styles$g.base, key), 
             // type && get(defaultStyles[type], key),
             // hasStickyHeader && get(defaultStyles.sticky, key),
             // hasVerticalSeparators && get(defaultStyles.separated, key),
@@ -1956,7 +1956,7 @@ var base$c = {
     },
     foot: '',
 };
-var styles$f = {
+var styles$g = {
     base: base$c,
 };
 
@@ -1967,10 +1967,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$1(result, key, toClassName(get$1(styles$e.base, key), type && get$1(styles$e[type], key), get$1(stylesOverrides, key)));
+            set$1(result, key, toClassName(get$1(styles$f.base, key), type && get$1(styles$f[type], key), get$1(stylesOverrides, key)));
         });
         return result;
     };
@@ -2091,7 +2091,7 @@ var bar = {
         link: '',
     },
 };
-var styles$e = {
+var styles$f = {
     base: base$b,
     slashes: slashes,
     chevrons: chevrons,
@@ -2103,10 +2103,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 = 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) {
-            set(result, key, toClassName(get(styles$d.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$e.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2169,7 +2169,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,
 };
 
@@ -2177,10 +2177,10 @@ var Container$1 = function (props) {
     var children = props.children, stylesOverrides = props.styles;
     var _a = 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) {
-            set(result, key, toClassName(get(styles$c.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$d.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2190,10 +2190,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) {
-            set(result, key, toClassName(get(styles$c.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$d.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2239,10 +2239,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) {
-            set(result, key, toClassName(get(styles$c.base, key), type && get(styles$c[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;
     };
@@ -2300,7 +2300,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,
@@ -2328,11 +2328,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 (jsx("nav", { className: toClassName(styles$b.list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list), children: children }));
+    return (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 (jsx(LinkComponent, { href: href, className: toClassName(styles$b.item[isCurrent ? 'active' : 'notActive'], styles$b.item.base), onClick: onClick, children: children }));
+    return (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;
@@ -2345,7 +2345,7 @@ var VerticalNavigation = {
     View: View,
 };
 
-var styles$b = {
+var styles$c = {
     container: '',
     list: 'space-y-1',
     item: {
@@ -2363,10 +2363,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) {
-            set(result, key, toClassName(get(styles$a.base, key), size && get(styles$a[size], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$b.base, key), size && get(styles$b[size], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2438,7 +2438,7 @@ var xl$2 = {
         container: 'sm:max-w-4xl',
     },
 };
-var styles$a = {
+var styles$b = {
     base: base$8,
     xs: xs$2,
     sm: sm$2,
@@ -2450,10 +2450,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) {
-            set(result, key, toClassName(get(styles$9.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$a.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2468,10 +2468,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) {
-            set(result, key, toClassName(get(styles$9.base, key), size && get(styles$9[size], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$a.base, key), size && get(styles$a[size], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2543,7 +2543,7 @@ var xl$1 = {
         },
     },
 };
-var styles$9 = {
+var styles$a = {
     base: base$7,
     xs: xs$1,
     sm: sm$1,
@@ -2560,10 +2560,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) {
-            set(result, key, toClassName(get(styles$8.base, key), size && get(styles$8[size], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$9.base, key), size && get(styles$9[size], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2626,7 +2626,7 @@ var xl = {
         container: 'sm:max-w-4xl',
     },
 };
-var styles$8 = {
+var styles$9 = {
     base: base$6,
     xs: xs,
     sm: sm,
@@ -2650,10 +2650,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) {
-            set(result, key, toClassName(get(styles$7, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$8, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2675,7 +2675,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]',
@@ -2724,10 +2724,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) {
-            set(result, key, toClassName(get(styles$6.base, key), type && get(styles$6[type], key), isTouched === true && !isValid && get(styles$6.invalid, key), isDisabled && get(styles$6.disabled, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$7.base, key), type && get(styles$7[type], key), isTouched === true && !isValid && get(styles$7.invalid, key), isDisabled && get(styles$7.disabled, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2852,7 +2852,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,
@@ -2868,12 +2868,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) {
-            set(result, key, toClassName(get(styles$5.base, key), 
+            set(result, key, toClassName(get(styles$6.base, key), 
             // isTouched === true && !isValid && get(defaultStyles.invalid, key),
-            isDisabled && get(styles$5.disabled, key), get(stylesOverrides, key)));
+            isDisabled && get(styles$6.disabled, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2910,7 +2910,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,
 };
@@ -2918,12 +2918,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) {
-            set(result, key, toClassName(get(styles$4.base, key), 
-            // isTouched === true && !isValid && get(defaultStyles.invalid, key),
-            isDisabled && get(styles$4.disabled, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$5.base, key), isDisabled && get(styles$5.disabled, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2952,7 +2950,7 @@ var CheckboxInputForm = function (props) {
             inputRef.current.indeterminate = value === null;
         }
     }, [isIndeterminable, value]);
-    return (jsxs("div", { className: styles.container, children: [jsx("div", { className: styles.head, children: 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 }) }), jsxs("div", { className: styles.body, children: [jsx("label", { htmlFor: "comments", className: styles.label, children: title }), description && (jsx("p", { id: "comments-description", className: styles.description, children: description }))] })] }));
+    return (jsxs("div", { className: styles.container, children: [jsx("div", { className: styles.head, children: 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 }) }), jsxs("div", { className: styles.body, children: [jsx("label", { htmlFor: name, className: styles.label, children: title }), description && (jsx("p", { id: "".concat(name, "-description"), className: styles.description, children: description }))] })] }));
 };
 
 var base$3 = {
@@ -2966,11 +2964,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);
+        forEach(keys, function (key) {
+            set(result, key, toClassName(get(styles$4, key), get(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var styles = handleGenerateStyle();
+    return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsx("div", { className: styles.container, children: jsx("div", { "data-cy": inputDataCy, children: jsxs(Switch$1, { checked: value, disabled: isDisabled, onChange: function (value) { return delay(function () { return onChange(value); }, 200); }, className: toClassName(styles.switch.base, value ? styles.switch.checked : styles.switch.unchecked, isDisabled && styles.switch.disabled), children: [jsxs("span", { className: styles.switch.screenreader, children: ["Switch setting for ", name] }), jsx("span", { className: toClassName(styles.toggle.base, value ? styles.toggle.checked : styles.toggle.unchecked), children: iconAccessorChecked && iconAccessorUnchecked && (jsxs(Fragment$1, { children: [jsx("span", { className: toClassName(value ? styles.icon.hidden : styles.icon.shown, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorUnchecked, className: styles.icon.icon }) }), jsx("span", { className: toClassName(value ? styles.icon.shown : styles.icon.hidden, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorChecked, className: styles.icon.icon }) })] })) })] }) }) }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (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) {
@@ -9738,7 +9780,7 @@ var OpeningHourItem = function (props) {
                         };
                         onUpdate && onUpdate(params);
                     }
-                } }), jsxs("div", { className: "flex flex-col", children: [jsx("p", { className: "text-xs font-medium pb-1 mt-4", children: "Closed" }), jsxs(Switch, { checked: form.values.closed, onChange: function () {
+                } }), jsxs("div", { className: "flex flex-col", children: [jsx("p", { className: "text-xs font-medium pb-1 mt-4", children: "Closed" }), jsxs(Switch$1, { checked: form.values.closed, onChange: function () {
                             var _a, _b, _c, _d;
                             form.setFieldValue('closed', !form.values.closed);
                             if (!isCreating) {
@@ -10962,5 +11004,5 @@ var styles = {
     disabled: disabled,
 };
 
-export { AddressInputGroupForm, BadgeElement$1 as AlertElement, AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, CheckboxInputForm as CheckboxInput, ContainerLayout, DateMenuForm, DividerLayout, DropdownElement, FileInputGroupForm, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, OpeningsHourInputGroupForm, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SelectMenuForm, SlideOverOverlay, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, VerticalNavigation, CheckboxInputGroupForm as __DEPRECATED__CheckboxInputGroupForm, createColumnHelper, fromSelectMenuOptionToStringValue, useExcel };
+export { AddressInputGroupForm, BadgeElement$1 as AlertElement, AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, CheckboxInputForm as CheckboxInput, ContainerLayout, DateMenuForm, DividerLayout, DropdownElement, FileInputGroupForm, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, OpeningsHourInputGroupForm, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SelectMenuForm, SlideOverOverlay, Switch as SwitchForm, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, VerticalNavigation, CheckboxInputGroupForm as __DEPRECATED__CheckboxInputGroupForm, createColumnHelper, fromSelectMenuOptionToStringValue, useExcel };
 //# sourceMappingURL=index.esm.js.map