@ballistix.digital/react-components 0.10.0 → 1.0.1

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$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), size && lodash.get(styles$t[size], key), figure && lodash.get(styles$t[figure], key), status && lodash.get(styles$t[status], key), isDisabled && lodash.get(styles$t.disabled, key), isLoading && lodash.get(styles$t.loading, key), lodash.get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -178,7 +178,7 @@ var AvatarElement = function (props) {
     return (jsxRuntime.jsx("a", { href: url, children: jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsxs("span", { className: "flex items-center justify-center", children: [jsxRuntime.jsx("div", { className: styles.container, style: { backgroundImage: "url(".concat(src, ")") } }), status && jsxRuntime.jsx("span", { className: styles.indicator })] }), children && jsxRuntime.jsx("div", { className: "ml-3", children: children })] }) }));
 };
 
-var base$q = {
+var base$r = {
     loading: 'inline-block relative overflow-hidden bg-gray-50 flex items-center justify-center',
     spinner: 'w-5 h-5 animate-spin text-gray-400',
     empty: 'inline-block relative overflow-hidden bg-gray-50 text-red-400',
@@ -241,7 +241,7 @@ var rounded$2 = {
     placeholder: 'rounded-full',
     container: 'rounded-full',
 };
-var disabled$9 = {
+var disabled$a = {
     container: 'opacity-20 cursor-not-allowed',
 };
 var loading$2 = {
@@ -256,8 +256,8 @@ var online = {
 var blocked = {
     indicator: 'bg-red-400',
 };
-var styles$t = {
-    base: base$q,
+var styles$u = {
+    base: base$r,
     xs: xs$4,
     sm: sm$5,
     md: md$4,
@@ -268,7 +268,7 @@ var styles$t = {
     offline: offline,
     online: online,
     blocked: blocked,
-    disabled: disabled$9,
+    disabled: disabled$a,
     loading: loading$2,
 };
 
@@ -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$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), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$t.base, key), type && lodash.get(styles$t[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -345,7 +345,7 @@ var BadgeElement$1 = function (props) {
                                     }, children: jsxRuntime.jsx(IconElement, { className: toClassName(styles.content.action, isCollapsed && styles.content.inverted), accessor: "chevron-up" }) })), jsxRuntime.jsx("div", { onClick: onClose, children: jsxRuntime.jsx(IconElement, { className: styles.content.action, accessor: "times" }) })] })] })] }) }));
 };
 
-var base$p = {
+var base$q = {
     container: 'rounded-sm p-4 border-l-4',
     icon: 'h-5 w-5',
     content: {
@@ -402,8 +402,8 @@ var info = {
         title: 'text-blue-500',
     },
 };
-var styles$s = {
-    base: base$p,
+var styles$t = {
+    base: base$q,
     generic: generic,
     error: error$1,
     warn: warn,
@@ -414,10 +414,10 @@ var styles$s = {
 var BadgeElement = function (props) {
     var children = props.children, _a = props.color, color = _a === void 0 ? 'gray' : _a, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.size, size = _c === void 0 ? 'sm' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, isDisabled = props.isDisabled, isLoading = props.isLoading, onClose = props.onClose, stylesOverrides = props.styles, dataCy = props.dataCy;
     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), color && lodash.get(styles$r[color], key), size && lodash.get(styles$r[size], key), figure && lodash.get(styles$r[figure], key), isDisabled && lodash.get(styles$r.disabled, key), isLoading && lodash.get(styles$r.loading, key), lodash.get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -429,7 +429,7 @@ var BadgeElement = function (props) {
     return (jsxRuntime.jsxs("span", { className: styles.container, "data-cy": dataCy, children: [type === 'indicator' && (jsxRuntime.jsx("svg", { className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8", children: jsxRuntime.jsx("circle", { cx: 4, cy: 4, r: 3 }) })), children, type === 'close' && (jsxRuntime.jsxs("button", { type: "button", className: styles.button, onClick: onClose, children: [jsxRuntime.jsx("span", { className: "sr-only", children: "Remove large option" }), xIcon] }))] }));
 };
 
-var base$o = {
+var base$p = {
     container: 'inline-flex items-center font-medium py-0.5',
     indicator: '',
     button: 'flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:text-white focus:outline-none',
@@ -506,14 +506,14 @@ var pink = {
     indicator: 'text-pink-400',
     button: 'text-pink-400 hover:bg-pink-200 hover:text-pink-500 focus:bg-purple-500',
 };
-var disabled$8 = {
+var disabled$9 = {
     container: 'opacity-20 cursor-not-allowed',
 };
 var loading$1 = {
     container: 'cursor-progress',
 };
-var styles$r = {
-    base: base$o,
+var styles$s = {
+    base: base$p,
     normal: normal$8,
     indicator: indicator,
     close: close,
@@ -532,17 +532,17 @@ var styles$r = {
     indigo: indigo,
     purple: purple,
     pink: pink,
-    disabled: disabled$8,
+    disabled: disabled$9,
     loading: loading$1,
 };
 
 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$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), type && lodash.get(styles$q[type], key), size && lodash.get(styles$q[size], key), figure && lodash.get(styles$q[figure], key), status && lodash.get(styles$q[status], key), isDisabled && lodash.get(styles$q.disabled, key), lodash.get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -552,7 +552,7 @@ var ButtonElement = function (props) {
         }, ref: innerRef, "data-cy": dataCy, children: [status === 'idle' && children, status === 'loading' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "spinner", className: styles.spinner }), jsxRuntime.jsx("div", { children: children })] })), status === 'error' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-exclamation", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] })), status === 'success' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-check", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] }))] }));
 };
 
-var base$n = {
+var base$o = {
     container: 'inline-flex items-center border border-transparent font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 duration-300',
     content: 'flex gap-2',
     icon: '',
@@ -601,11 +601,11 @@ var error = {
     container: 'bg-rose-400 hover:bg-rose-500 !text-white duration-300',
     content: 'flex items-center',
 };
-var disabled$7 = {
+var disabled$8 = {
     container: '!opacity-20 !cursor-not-allowed',
 };
-var styles$q = {
-    base: base$n,
+var styles$r = {
+    base: base$o,
     primary: primary,
     secondary: secondary,
     outline: outline,
@@ -620,16 +620,16 @@ var styles$q = {
     loading: loading,
     success: success,
     error: error,
-    disabled: disabled$7,
+    disabled: disabled$8,
 };
 
 var ButtonGroupElement = function (props) {
     var children = props.children, 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), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$q.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -647,23 +647,23 @@ var ButtonGroupElement = function (props) {
         }) }));
 };
 
-var base$m = {
+var base$n = {
     container: 'relative z-0 inline-flex shadow-sm rounded-md',
     firstButton: 'relative inline-flex items-center px-4 py-2 rounded-l-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',
     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$p = {
-    base: base$m,
+var styles$q = {
+    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$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), type && lodash.get(styles$o[type], key), direction && lodash.get(styles$o[direction], key), lodash.get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -676,7 +676,7 @@ var DropdownElement = {
     Item: react.Menu.Item,
 };
 
-var base$l = {
+var base$m = {
     container: 'inline-block text-left',
     button: 'inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
     compact: 'bg-gray-100 rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
@@ -697,8 +697,8 @@ var topLeft = {
 var topRight = {
     items: 'origin-bottom-left left-0 bottom-0',
 };
-var styles$o = {
-    base: base$l,
+var styles$p = {
+    base: base$m,
     button: button,
     compact: compact,
     'bottom-left': bottomLeft,
@@ -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$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), leading !== undefined && lodash.get(styles$n.leading, key), trailing !== undefined && lodash.get(styles$n.trailing, key), type && lodash.get(styles$n[type], key), isTouched === true && !isValid && lodash.get(styles$n.invalid, key), isDisabled && lodash.get(styles$n.disabled, key), lodash.get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -733,7 +733,7 @@ var InputGroupForm = function (props) {
                         (htmlType !== 'area' && (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx("input", { type: mask$1 !== undefined ? 'text' : htmlType, ref: mask$1 && ref, name: name, id: name, "data-cy": inputDataCy, className: toClassName(styles.input, htmlType === 'color' && '!h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), htmlType === 'text' && isClearable && (jsxRuntime.jsx("div", { className: "right-5 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) })), htmlType === 'date' && isClearable && (jsxRuntime.jsx("div", { className: "right-10 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsxRuntime.jsx(IconElement, { accessor: "times", className: "text-gray-500" }) }))] }))), htmlType === 'area' && (jsxRuntime.jsx("textarea", { rows: rows, name: name, id: name, "data-cy": inputDataCy, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur })), type === 'floored' && (jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
 };
 
-var base$k = {
+var base$l = {
     container: '',
     head: 'flex justify-between',
     body: 'relative rounded-md',
@@ -793,11 +793,11 @@ var invalid$5 = {
     'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 pr-10',
     description: 'text-sm text-red-600',
 };
-var disabled$6 = {
+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$n = {
-    base: base$k,
+var styles$o = {
+    base: base$l,
     leading: leading$5,
     trailing: trailing$5,
     normal: normal$7,
@@ -806,16 +806,16 @@ var styles$n = {
     pill: pill$5,
     floored: floored$5,
     invalid: invalid$5,
-    disabled: disabled$6,
+    disabled: disabled$7,
 };
 
 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$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;
     };
@@ -838,7 +838,7 @@ var ContainerLayout = function (props) {
     return handleGenerateComponent();
 };
 
-var base$j = {
+var base$k = {
     container: '',
     content: '',
 };
@@ -852,8 +852,8 @@ var center$3 = {
 var fill$1 = {
     container: 'max-w-7xl mx-auto sm:px-6 lg:px-8',
 };
-var styles$m = {
-    base: base$j,
+var styles$n = {
+    base: base$k,
     break: breakStyles,
     center: center$3,
     fill: fill$1,
@@ -862,10 +862,10 @@ var styles$m = {
 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$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;
     };
@@ -873,7 +873,7 @@ var DividerLayout = function (props) {
     return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx("div", { className: styles.head, "aria-hidden": "true", children: jsxRuntime.jsx("div", { className: styles.line }) }), jsxRuntime.jsx("div", { className: styles.body, children: jsxRuntime.jsx("div", { className: styles.content, children: children }) })] }));
 };
 
-var base$i = {
+var base$j = {
     container: 'relative',
     head: 'absolute inset-0 flex items-center',
     line: 'w-full border-t border-gray-300',
@@ -889,8 +889,8 @@ var center$2 = {
 var right = {
     body: 'justify-end',
 };
-var styles$l = {
-    base: base$i,
+var styles$m = {
+    base: base$j,
     left: left,
     center: center$2,
     right: right,
@@ -899,10 +899,10 @@ var styles$l = {
 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$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;
     };
@@ -913,7 +913,7 @@ var ListContainerLayout = function (props) {
             }) }) }));
 };
 
-var base$h = {
+var base$i = {
     container: '',
     list: '',
     item: '',
@@ -944,8 +944,8 @@ var cardSticky = {
     list: 'space-y-3',
     item: 'bg-white shadow overflow-hidden px-4 py-4 sm:px-6 sm:rounded-md',
 };
-var styles$k = {
-    base: base$h,
+var styles$l = {
+    base: base$i,
     fill: fill,
     'fill-sticky': fillSticky,
     center: center$1,
@@ -957,10 +957,10 @@ var styles$k = {
 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$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;
     };
@@ -978,7 +978,7 @@ var MediaObjectLayout = function (props) {
     return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx("div", { className: styles.figure, children: $svg }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h4", { className: styles.title, children: title }), jsxRuntime.jsx("p", { className: styles.paragraph, children: paragraph })] })] }));
 };
 
-var base$g = {
+var base$h = {
     container: '',
     figure: 'mr-4 flex-shrink-0',
     svg: 'h-16 w-16 border border-gray-300 bg-white text-gray-300',
@@ -1033,8 +1033,8 @@ var wideReversed = {
     figure: 'mb-4 md:mb-0 sm:mr-4 sm:mb-4',
     svg: 'h-32 w-full sm:w-32',
 };
-var styles$j = {
-    base: base$g,
+var styles$k = {
+    base: base$h,
     top: top,
     'top-reversed': topReversed,
     center: center,
@@ -1052,10 +1052,10 @@ var styles$j = {
 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$i.base);
-        var keys = calculateNestedKeys(styles$i.base);
+        var result = deepCopyObject(styles$j.base);
+        var keys = calculateNestedKeys(styles$j.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$i.base, key), type && lodash.get(styles$i[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$j.base, key), type && lodash.get(styles$j[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$i.base);
-        var keys = calculateNestedKeys(styles$i.base);
+        var result = deepCopyObject(styles$j.base);
+        var keys = calculateNestedKeys(styles$j.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$i.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$j.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1080,7 +1080,7 @@ var LayoutPanel = {
     Section: Section,
 };
 
-var base$f = {
+var base$g = {
     container: 'bg-white overflow-hidden shadow',
     section: 'px-4 py-5 sm:px-6',
 };
@@ -1090,8 +1090,8 @@ var normal$6 = {
 var sticky$1 = {
     container: 'sm:rounded-lg',
 };
-var styles$i = {
-    base: base$f,
+var styles$j = {
+    base: base$g,
     normal: normal$6,
     sticky: sticky$1,
 };
@@ -1196,7 +1196,7 @@ var useExcel = function () {
     };
 };
 
-var base$e = {
+var base$f = {
     container: '',
     head: 'flex justify-between',
     body: 'relative rounded-md',
@@ -1271,11 +1271,11 @@ var invalid$4 = {
     'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500',
     description: 'text-sm text-red-600',
 };
-var disabled$5 = {
+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$h = {
-    base: base$e,
+var styles$i = {
+    base: base$f,
     leading: leading$4,
     trailing: trailing$4,
     normal: normal$5,
@@ -1284,7 +1284,7 @@ var styles$h = {
     pill: pill$4,
     floored: floored$4,
     invalid: invalid$4,
-    disabled: disabled$5,
+    disabled: disabled$6,
 };
 
 var SelectMenuForm = function (props) {
@@ -1296,10 +1296,10 @@ var SelectMenuForm = function (props) {
     var selectDataCy = "form-select-".concat(name);
     var errorDataCy = "form-select-error-".concat(name);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$h.base);
-        var keys = calculateNestedKeys(styles$h.base);
+        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(styles$h['normal'], key), isTouched === true && !isValid && lodash.get(styles$h.invalid, key), isDisabled && lodash.get(styles$h.disabled, key), lodash.get(stylesOverrides, 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;
     };
@@ -1382,10 +1382,10 @@ var PanelPaginationNavigation = function (props) {
         return options;
     }, [pageSize, pageSizeOptions]);
     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), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$h.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1433,7 +1433,7 @@ var PanelPaginationNavigation = function (props) {
                         } })), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("nav", { className: styles.desktop.navigation, "aria-label": "Pagination", children: [jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.outerLeftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(1); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "First" }), jsxRuntime.jsx(solid.ChevronDoubleLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.innerButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "Previous" }), jsxRuntime.jsx(solid.ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), component, jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.innerButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "Next" }), jsxRuntime.jsx(solid.ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] }), jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.outerRightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(max); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "Last" }), jsxRuntime.jsx(solid.ChevronDoubleRightIcon, { className: styles.icon, "aria-hidden": "true" })] })] }) })] })] }));
 };
 
-var base$d = {
+var base$e = {
     container: 'flex items-center justify-between border-t border-gray-200 bg-white py-3',
     mobile: {
         container: '',
@@ -1456,8 +1456,8 @@ var base$d = {
     icon: 'w-5 h-5',
     pageSizeList: '!overflow-hidden',
 };
-var styles$g = {
-    base: base$d,
+var styles$h = {
+    base: base$e,
 };
 
 var TableList = function (props) {
@@ -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$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), type && lodash.get(styles$f[type], key), hasStickyHeader && lodash.get(styles$f.sticky, key), hasVerticalSeparators && lodash.get(styles$f.separated, key), areControlsVisible && lodash.get(styles$f.controlled, key), lodash.get(stylesOverrides, key)));
+            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)));
         });
         return result;
     };
@@ -1593,7 +1593,7 @@ var TableList = function (props) {
                         : { container: 'mt-4' }, onChange: onPaginate, children: children })] }) }));
 };
 
-var base$c = {
+var base$d = {
     container: 'px-4 sm:px-6 lg:px-8',
     head: {
         container: 'sm:flex sm:items-center',
@@ -1705,8 +1705,8 @@ var controlled = {
         container: '!flex',
     },
 };
-var styles$f = {
-    base: base$c,
+var styles$g = {
+    base: base$d,
     normal: normal$4,
     panel: panel$1,
     full: full,
@@ -1762,10 +1762,10 @@ var TableList2 = function (props) {
     var _h = React.useState({}), columnVisibility = _h[0], setColumnVisibility = _h[1];
     var _j = React.useState([]), columnOrder = _j[0], setColumnOrder = _j[1];
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$e.base);
-        var keys = calculateNestedKeys(styles$e.base);
+        var result = deepCopyObject(styles$f.base);
+        var keys = calculateNestedKeys(styles$f.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$e.base, key), 
+            lodash.set(result, key, toClassName(lodash.get(styles$f.base, key), 
             // type && get(defaultStyles[type], key),
             // hasStickyHeader && get(defaultStyles.sticky, key),
             // hasVerticalSeparators && get(defaultStyles.separated, key),
@@ -1889,7 +1889,7 @@ var TableList2 = function (props) {
                                             }) }))] }), lodash.isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: ((_e = config === null || config === void 0 ? void 0 : config.options) === null || _e === void 0 ? void 0 : _e.emptyComponent) ? ((_f = config === null || config === void 0 ? void 0 : config.options) === null || _f === void 0 ? void 0 : _f.emptyComponent) : (jsxRuntime.jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsxRuntime.jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsxRuntime.jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsxRuntime.jsx("div", { className: styles.foot, children: foot && foot(state) })] }));
 };
 
-var base$b = {
+var base$c = {
     container: '',
     head: '',
     body: {
@@ -1928,8 +1928,8 @@ var base$b = {
     },
     foot: '',
 };
-var styles$e = {
-    base: base$b,
+var styles$f = {
+    base: base$c,
 };
 
 var createColumnHelper = function () {
@@ -1939,10 +1939,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$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), type && get(styles$d[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$e.base, key), type && get(styles$e[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1978,7 +1978,7 @@ var BreadcrumbsNavigation = function (props) {
     return (jsxRuntime.jsx("nav", { className: styles.container, "aria-label": "Breadcrumb", children: jsxRuntime.jsxs("ol", { className: styles.list, children: [jsxRuntime.jsx(HomeLink, {}), pages === null || pages === void 0 ? void 0 : pages.map(function (page) { return jsxRuntime.jsx(PageLink, { page: page }, page.name); })] }) }));
 };
 
-var base$a = {
+var base$b = {
     container: 'flex',
     list: 'flex',
     separator: '',
@@ -2063,8 +2063,8 @@ var bar = {
         link: '',
     },
 };
-var styles$d = {
-    base: base$a,
+var styles$e = {
+    base: base$b,
     slashes: slashes,
     chevrons: chevrons,
     panel: panel,
@@ -2075,10 +2075,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$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;
     };
@@ -2119,7 +2119,7 @@ var PagePaginationNavigation = function (props) {
     return (jsxRuntime.jsxs("nav", { className: styles.container, children: [jsxRuntime.jsx("div", { className: styles.left.container, children: jsxRuntime.jsxs("button", { className: toClassName(styles.left.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return setCurrent(current - 1); }, children: [jsxRuntime.jsx(solid.ArrowLongLeftIcon, { className: styles.left.icon }), "Previous"] }) }), jsxRuntime.jsx("div", { className: styles.center.container, children: component }), jsxRuntime.jsx("div", { className: styles.right.container, children: jsxRuntime.jsxs("button", { className: toClassName(styles.right.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return setCurrent(current + 1); }, children: ["Next", jsxRuntime.jsx(solid.ArrowLongRightIcon, { className: styles.right.icon })] }) })] }));
 };
 
-var base$9 = {
+var base$a = {
     container: 'flex items-center justify-between border-t border-gray-200 px-4 sm:px-0',
     left: {
         container: '-mt-px flex w-0 flex-1',
@@ -2141,18 +2141,18 @@ var base$9 = {
     },
     divider: 'inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500',
 };
-var styles$c = {
-    base: base$9,
+var styles$d = {
+    base: base$a,
 };
 
 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$b.base);
-        var keys = calculateNestedKeys(styles$b.base);
+        var result = deepCopyObject(styles$c.base);
+        var keys = calculateNestedKeys(styles$c.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$b.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$c.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2162,10 +2162,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$b.base);
-        var keys = calculateNestedKeys(styles$b.base);
+        var result = deepCopyObject(styles$c.base);
+        var keys = calculateNestedKeys(styles$c.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$b.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$c.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2211,10 +2211,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$b.base);
-        var keys = calculateNestedKeys(styles$b.base);
+        var result = deepCopyObject(styles$c.base);
+        var keys = calculateNestedKeys(styles$c.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$b.base, key), type && lodash.get(styles$b[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$c.base, key), type && lodash.get(styles$c[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2235,7 +2235,7 @@ var TabNavigation = {
     View: View$1,
 };
 
-var base$8 = {
+var base$9 = {
     container: '',
     list: {
         container: '',
@@ -2272,8 +2272,8 @@ var buttons = {
         inactive: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
     },
 };
-var styles$b = {
-    base: base$8,
+var styles$c = {
+    base: base$9,
     underline: underline,
     pills: pills,
     buttons: buttons,
@@ -2300,11 +2300,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$a.list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list), children: children }));
+    return (jsxRuntime.jsx("nav", { className: toClassName(styles$b.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$a.item[isCurrent ? 'active' : 'notActive'], styles$a.item.base), onClick: onClick, children: children }));
+    return (jsxRuntime.jsx(LinkComponent, { href: href, className: toClassName(styles$b.item[isCurrent ? 'active' : 'notActive'], styles$b.item.base), onClick: onClick, children: children }));
 };
 var View = function (props) {
     var children = props.children;
@@ -2317,7 +2317,7 @@ var VerticalNavigation = {
     View: View,
 };
 
-var styles$a = {
+var styles$b = {
     container: '',
     list: 'space-y-1',
     item: {
@@ -2335,10 +2335,10 @@ var ModalOverlay = function (props) {
         handleClose: 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;
     };
@@ -2356,7 +2356,7 @@ var ModalOverlay = function (props) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, { show: isOpen, as: React.Fragment, children: jsxRuntime.jsxs(react.Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsxRuntime.jsx("div", { className: styles.background.container }) }), jsxRuntime.jsx("div", { className: styles.layout.container, children: jsxRuntime.jsx("div", { className: styles.layout.content, "data-cy": dataCy, children: jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsxRuntime.jsx(react.Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
 };
 
-var base$7 = {
+var base$8 = {
     container: 'relative z-20',
     background: {
         container: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
@@ -2410,8 +2410,8 @@ var xl$2 = {
         container: 'sm:max-w-4xl',
     },
 };
-var styles$9 = {
-    base: base$7,
+var styles$a = {
+    base: base$8,
     xs: xs$2,
     sm: sm$2,
     md: md$2,
@@ -2422,10 +2422,10 @@ var styles$9 = {
 var NotificationOverlayContainer = function (_a) {
     var children = _a.children, stylesOverrides = _a.styles;
     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), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$9.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2440,10 +2440,10 @@ var NotificationOverlayItem = function (props) {
         onClose: 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;
     };
@@ -2455,7 +2455,7 @@ var NotificationOverlay = {
     Item: NotificationOverlayItem,
 };
 
-var base$6 = {
+var base$7 = {
     container: {
         outer: 'pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-30',
         inner: 'flex w-full flex-col items-center space-y-4 sm:items-end',
@@ -2515,8 +2515,8 @@ var xl$1 = {
         },
     },
 };
-var styles$8 = {
-    base: base$6,
+var styles$9 = {
+    base: base$7,
     xs: xs$1,
     sm: sm$1,
     md: md$1,
@@ -2532,10 +2532,10 @@ var SlideOverOverlay = function (props) {
         handleClose: function () { return setIsOpen(false); },
     }); }, []);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$7.base);
-        var keys = calculateNestedKeys(styles$7.base);
+        var result = deepCopyObject(styles$8.base);
+        var keys = calculateNestedKeys(styles$8.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$7.base, key), size && lodash.get(styles$7[size], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$8.base, key), size && lodash.get(styles$8[size], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2543,7 +2543,7 @@ var SlideOverOverlay = function (props) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, { show: isOpen, as: React.Fragment, children: jsxRuntime.jsxs(react.Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsxRuntime.jsx("div", { className: styles.background.container }) }), jsxRuntime.jsx("div", { className: styles.layout.container, children: jsxRuntime.jsx("div", { className: styles.layout.content, children: jsxRuntime.jsx("div", { className: styles.layout.inner, children: jsxRuntime.jsx(react.Transition.Child, { as: React.Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsxRuntime.jsx(react.Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) }) })] }) }), trigger && trigger(options)] }));
 };
 
-var base$5 = {
+var base$6 = {
     container: 'relative z-20',
     background: {
         container: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
@@ -2598,8 +2598,8 @@ var xl = {
         container: 'sm:max-w-4xl',
     },
 };
-var styles$7 = {
-    base: base$5,
+var styles$8 = {
+    base: base$6,
     xs: xs,
     sm: sm,
     md: md,
@@ -2621,7 +2621,7 @@ var TableColumnOptionsCustom = function (props) {
         ids.splice(location, 0, column.id);
         setColumnOrder(ids);
     }, []);
-    return (jsxRuntime.jsxs(react.Popover, { children: [jsxRuntime.jsx(react.Popover.Button, { children: trigger }), jsxRuntime.jsxs(react.Popover.Panel, { className: styles$6.controls.content, children: [resetConfig && (jsxRuntime.jsxs("div", { className: styles$6.controls.dropdown.reset, onClick: function () {
+    return (jsxRuntime.jsxs(react.Popover, { children: [jsxRuntime.jsx(react.Popover.Button, { children: trigger }), jsxRuntime.jsxs(react.Popover.Panel, { className: styles$7.controls.content, children: [resetConfig && (jsxRuntime.jsxs("div", { className: styles$7.controls.dropdown.reset, onClick: function () {
                             removeTableState(resetConfig.tableId);
                             table.resetColumnVisibility(true);
                             table.resetColumnOrder();
@@ -2630,15 +2630,15 @@ var TableColumnOptionsCustom = function (props) {
                         .getAllLeafColumns()
                         .map(function (column, index) {
                         var isAccessorColumn = !!(column === null || column === void 0 ? void 0 : column.accessorFn);
-                        return (jsxRuntime.jsxs("div", { className: toClassName(styles$6.controls.dropdown.container, !isAccessorColumn && 'hidden'), children: [jsxRuntime.jsx("input", { className: styles$6.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsxRuntime.jsx("label", { className: styles$6.controls.dropdown.label, children: column.columnDef.header }), jsxRuntime.jsxs("div", { className: styles$6.controls.dropdown.actions, children: [jsxRuntime.jsx(outline$2.ChevronDownIcon, { className: styles$6.controls.dropdown.upIcon, onClick: function () {
+                        return (jsxRuntime.jsxs("div", { className: toClassName(styles$7.controls.dropdown.container, !isAccessorColumn && 'hidden'), children: [jsxRuntime.jsx("input", { className: styles$7.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsxRuntime.jsx("label", { className: styles$7.controls.dropdown.label, children: column.columnDef.header }), jsxRuntime.jsxs("div", { className: styles$7.controls.dropdown.actions, children: [jsxRuntime.jsx(outline$2.ChevronDownIcon, { className: styles$7.controls.dropdown.upIcon, onClick: function () {
                                                 return handleUpdateColumnOrder(table, column, index - 1, setColumnOrder);
-                                            } }), jsxRuntime.jsx(outline$2.ChevronDownIcon, { className: styles$6.controls.dropdown.downIcon, onClick: function () {
+                                            } }), jsxRuntime.jsx(outline$2.ChevronDownIcon, { className: styles$7.controls.dropdown.downIcon, onClick: function () {
                                                 return handleUpdateColumnOrder(table, column, index + 1, setColumnOrder);
                                             } })] })] }, column.id));
                     })] })] }));
 };
 
-var styles$6 = {
+var styles$7 = {
     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]',
@@ -2678,18 +2678,19 @@ var DateMenuForm = function (props) {
         startDate: null,
         endDate: null,
     }), state = _p[0], setState = _p[1];
-    var handleValueChange = function (newValue) {
+    var $datepickerInputRef = React.useRef(null);
+    var handleValueChange = React.useCallback(function (newValue) {
         setState(newValue);
         onChange && onChange(newValue);
         setTimeout(function () {
             onBlur && onBlur();
         }, 50);
-    };
+    }, [onBlur, onChange]);
     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), type && lodash.get(styles$5[type], key), isTouched === true && !isValid && lodash.get(styles$5.invalid, key), isDisabled && lodash.get(styles$5.disabled, key), lodash.get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -2707,7 +2708,40 @@ var DateMenuForm = function (props) {
     React.useEffect(function () {
         setState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : { startDate: null, endDate: null });
     }, [defaultValue]);
-    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, "data-cy": inputDataCy, children: [jsxRuntime.jsx(Datepicker, { inputName: name, inputId: name, i18n: i18n, useRange: size === 'expanded', placeholder: placeholder, asSingle: !isRanged, separator: separator, startFrom: startFrom, displayFormat: displayFormat, disabled: isDisabled, popoverDirection: direction, minDate: minDate, maxDate: maxDate, toggleIcon: icon, 
+    React.useEffect(function () {
+        var _a;
+        var input = (_a = $datepickerInputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+        var allowedCharacters = '0123456789';
+        var separators = "./-".concat(separator);
+        var callback = function (event) {
+            if ((input === null || input === void 0 ? void 0 : input.value) === null ||
+                (input === null || input === void 0 ? void 0 : input.value) === undefined ||
+                lodash.intersection(input.value.split(''), separators.split('')).length > 0 ||
+                isRanged) {
+                return;
+            }
+            if (allowedCharacters.includes(event.key) && (input === null || input === void 0 ? void 0 : input.value.length) >= 7) {
+                var newValue = input.value + event.key;
+                var day = newValue.substring(0, 2);
+                var month = newValue.substring(2, 4);
+                var year = newValue.substring(4, 8);
+                var newDate = new Date("".concat(year, "-").concat(month, "-").concat(day));
+                if (isNaN(newDate.getTime()))
+                    return;
+                input.blur();
+                handleValueChange({
+                    startDate: "".concat(year, "-").concat(month, "-").concat(day),
+                    endDate: "".concat(year, "-").concat(month, "-").concat(day),
+                });
+                setTimeout(function () { return input.focus(); }, 100);
+            }
+        };
+        if (input) {
+            input.addEventListener('keydown', callback);
+        }
+        return function () { return removeEventListener('keydown', callback); };
+    }, [handleValueChange, isRanged, separator]);
+    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, "data-cy": inputDataCy, ref: $datepickerInputRef, children: [jsxRuntime.jsx(Datepicker, { inputName: name, inputId: name, i18n: i18n, useRange: size === 'expanded', placeholder: placeholder, asSingle: !isRanged, separator: separator, startFrom: startFrom, displayFormat: displayFormat, disabled: isDisabled, popoverDirection: direction, minDate: minDate, maxDate: maxDate, toggleIcon: icon, 
                         //
                         value: state, 
                         //
@@ -2718,7 +2752,7 @@ var DateMenuForm = function (props) {
                                     : (_a = error === null || error === void 0 ? void 0 : error.startDate) !== null && _a !== void 0 ? _a : error === null || error === void 0 ? void 0 : error.endDate }))] }))] })] }));
 };
 
-var base$4 = {
+var base$5 = {
     container: '',
     head: 'flex justify-between',
     body: 'relative rounded-md',
@@ -2778,11 +2812,11 @@ var invalid$3 = {
     'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 pr-10',
     description: 'text-sm text-red-600',
 };
-var disabled$4 = {
+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$5 = {
-    base: base$4,
+var styles$6 = {
+    base: base$5,
     leading: leading$3,
     trailing: trailing$3,
     normal: normal$3,
@@ -2791,18 +2825,18 @@ var styles$5 = {
     pill: pill$3,
     floored: floored$3,
     invalid: invalid$3,
-    disabled: disabled$4,
+    disabled: disabled$5,
 };
 
 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$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), 
+            lodash.set(result, key, toClassName(lodash.get(styles$5.base, key), 
             // isTouched === true && !isValid && get(defaultStyles.invalid, key),
-            isDisabled && lodash.get(styles$4.disabled, key), lodash.get(stylesOverrides, key)));
+            isDisabled && lodash.get(styles$5.disabled, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2821,7 +2855,7 @@ var CheckboxInputGroupForm = function (props) {
                         } }) })] }) }));
 };
 
-var base$3 = {
+var base$4 = {
     container: '',
     sr: 'sr-only',
     list: 'space-y-5',
@@ -2834,11 +2868,67 @@ var base$3 = {
         description: 'text-gray-500',
     },
 };
-var disabled$3 = {
+var disabled$4 = {
     item: {
         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 = {
+    base: base$4,
+    disabled: disabled$4,
+};
+
+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);
+        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)));
+        });
+        return result;
+    };
+    var styles = handleGenerateStyle();
+    var inputRef = React.useRef(null);
+    var handleToggle = React.useCallback(function () {
+        if (!isIndeterminable) {
+            onChange(!value);
+        }
+        else {
+            switch (value) {
+                case false:
+                    onChange(null);
+                    break;
+                case true:
+                    onChange(false);
+                    break;
+                case null:
+                    onChange(true);
+                    break;
+            }
+        }
+    }, [isIndeterminable, value, onChange]);
+    React.useEffect(function () {
+        if (isIndeterminable) {
+            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 }))] })] }));
+};
+
+var base$3 = {
+    container: 'relative flex items-start',
+    head: 'flex h-6 items-center',
+    body: 'ml-3 text-sm leading-6',
+    input: 'h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600',
+    label: 'font-medium text-gray-900',
+    description: 'text-gray-500',
+};
+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 = {
     base: base$3,
     disabled: disabled$3,
@@ -10822,7 +10912,7 @@ exports.BadgeElement = BadgeElement;
 exports.BreadcrumbsNavigation = BreadcrumbsNavigation;
 exports.ButtonElement = ButtonElement;
 exports.ButtonGroupElement = ButtonGroupElement;
-exports.CheckboxInputGroupForm = CheckboxInputGroupForm;
+exports.CheckboxInput = CheckboxInputForm;
 exports.ContainerLayout = ContainerLayout;
 exports.DateMenuForm = DateMenuForm;
 exports.DividerLayout = DividerLayout;
@@ -10846,6 +10936,7 @@ exports.TableExportCustom = TableExcelExportCustom;
 exports.TableList = TableList;
 exports.TableList2 = TableList2;
 exports.VerticalNavigation = VerticalNavigation;
+exports.__DEPRECATED__CheckboxInputGroupForm = CheckboxInputGroupForm;
 exports.createColumnHelper = createColumnHelper;
 exports.fromSelectMenuOptionToStringValue = fromSelectMenuOptionToStringValue;
 exports.useExcel = useExcel;