@ballistix.digital/react-components 0.10.0 → 1.0.1

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 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, forEach, assign } from 'lodash';
+import { isArray, map, set, get, noop as noop$1, indexOf, toSafeInteger, pick, isEmpty, some, forEach, assign, intersection } from 'lodash';
 import get$1 from 'lodash/get';
-import React, { useState, useMemo, Children, Fragment, useEffect, useCallback, forwardRef, useImperativeHandle, useRef, useReducer, createElement, PureComponent, Component } from 'react';
+import React, { useState, useMemo, Children, Fragment, useEffect, useCallback, useRef, forwardRef, useImperativeHandle, useReducer, createElement, PureComponent, Component } from 'react';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 import { fal } from '@fortawesome/pro-light-svg-icons';
@@ -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$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), size && get(styles$t[size], key), figure && get(styles$t[figure], key), status && get(styles$t[status], key), isDisabled && get(styles$t.disabled, key), isLoading && get(styles$t.loading, key), get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -176,7 +176,7 @@ var AvatarElement = function (props) {
     return (jsx("a", { href: url, children: jsxs("div", { className: "flex items-center", children: [jsxs("span", { className: "flex items-center justify-center", children: [jsx("div", { className: styles.container, style: { backgroundImage: "url(".concat(src, ")") } }), status && jsx("span", { className: styles.indicator })] }), children && 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',
@@ -239,7 +239,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 = {
@@ -254,8 +254,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,
@@ -266,7 +266,7 @@ var styles$t = {
     offline: offline,
     online: online,
     blocked: blocked,
-    disabled: disabled$9,
+    disabled: disabled$a,
     loading: loading$2,
 };
 
@@ -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$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), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$t.base, key), type && get(styles$t[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -343,7 +343,7 @@ var BadgeElement$1 = function (props) {
                                     }, children: jsx(IconElement, { className: toClassName(styles.content.action, isCollapsed && styles.content.inverted), accessor: "chevron-up" }) })), jsx("div", { onClick: onClose, children: 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: {
@@ -400,8 +400,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,
@@ -412,10 +412,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) {
-            set(result, key, toClassName(get(styles$r.base, key), type && get(styles$r[type], key), color && get(styles$r[color], key), size && get(styles$r[size], key), figure && get(styles$r[figure], key), isDisabled && get(styles$r.disabled, key), isLoading && get(styles$r.loading, key), get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -427,7 +427,7 @@ var BadgeElement = function (props) {
     return (jsxs("span", { className: styles.container, "data-cy": dataCy, children: [type === 'indicator' && (jsx("svg", { className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8", children: jsx("circle", { cx: 4, cy: 4, r: 3 }) })), children, type === 'close' && (jsxs("button", { type: "button", className: styles.button, onClick: onClose, children: [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',
@@ -504,14 +504,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,
@@ -530,17 +530,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) {
-            set(result, key, toClassName(get(styles$q.base, key), type && get(styles$q[type], key), size && get(styles$q[size], key), figure && get(styles$q[figure], key), status && get(styles$q[status], key), isDisabled && get(styles$q.disabled, key), get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -550,7 +550,7 @@ var ButtonElement = function (props) {
         }, ref: innerRef, "data-cy": dataCy, children: [status === 'idle' && children, status === 'loading' && (jsxs("div", { className: styles.content, children: [jsx(IconElement, { type: "regular", accessor: "spinner", className: styles.spinner }), jsx("div", { children: children })] })), status === 'error' && (jsxs("div", { className: styles.content, children: [jsx(IconElement, { type: "regular", accessor: "circle-exclamation", className: styles.icon }), jsx("div", { children: children })] })), status === 'success' && (jsxs("div", { className: styles.content, children: [jsx(IconElement, { type: "regular", accessor: "circle-check", className: styles.icon }), 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: '',
@@ -599,11 +599,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,
@@ -618,16 +618,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) {
-            set(result, key, toClassName(get(styles$p.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$q.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -645,23 +645,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) {
-            set(result, key, toClassName(get(styles$o.base, key), type && get(styles$o[type], key), direction && get(styles$o[direction], key), get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -674,7 +674,7 @@ var DropdownElement = {
     Item: 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',
@@ -695,8 +695,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,
@@ -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$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), leading !== undefined && get(styles$n.leading, key), trailing !== undefined && get(styles$n.trailing, key), type && get(styles$n[type], key), isTouched === true && !isValid && get(styles$n.invalid, key), isDisabled && get(styles$n.disabled, key), get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -731,7 +731,7 @@ var InputGroupForm = function (props) {
                         (htmlType !== 'area' && (jsxs("div", { className: "flex items-center", children: [jsx("input", { type: mask !== undefined ? 'text' : htmlType, ref: mask && 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 && (jsx("div", { className: "right-5 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsx(IconElement, { accessor: "times", className: "text-gray-500" }) })), htmlType === 'date' && isClearable && (jsx("div", { className: "right-10 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsx(IconElement, { accessor: "times", className: "text-gray-500" }) }))] }))), htmlType === 'area' && (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' && (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 && (jsx("div", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsx("div", { className: styles.trailing, children: invalidIcon }))] }), 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 base$k = {
+var base$l = {
     container: '',
     head: 'flex justify-between',
     body: 'relative rounded-md',
@@ -791,11 +791,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,
@@ -804,16 +804,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) {
-            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;
     };
@@ -836,7 +836,7 @@ var ContainerLayout = function (props) {
     return handleGenerateComponent();
 };
 
-var base$j = {
+var base$k = {
     container: '',
     content: '',
 };
@@ -850,8 +850,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,
@@ -860,10 +860,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) {
-            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;
     };
@@ -871,7 +871,7 @@ var DividerLayout = function (props) {
     return (jsxs("div", { className: styles.container, children: [jsx("div", { className: styles.head, "aria-hidden": "true", children: jsx("div", { className: styles.line }) }), jsx("div", { className: styles.body, children: 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',
@@ -887,8 +887,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,
@@ -897,10 +897,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) {
-            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;
     };
@@ -911,7 +911,7 @@ var ListContainerLayout = function (props) {
             }) }) }));
 };
 
-var base$h = {
+var base$i = {
     container: '',
     list: '',
     item: '',
@@ -942,8 +942,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,
@@ -955,10 +955,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) {
-            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;
     };
@@ -976,7 +976,7 @@ var MediaObjectLayout = function (props) {
     return (jsxs("div", { className: styles.container, children: [jsx("div", { className: styles.figure, children: $svg }), jsxs("div", { children: [jsx("h4", { className: styles.title, children: title }), 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',
@@ -1031,8 +1031,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,
@@ -1050,10 +1050,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) {
-            set(result, key, toClassName(get(styles$i.base, key), type && get(styles$i[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$j.base, key), type && get(styles$j[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$i.base);
-        var keys = calculateNestedKeys(styles$i.base);
+        var result = deepCopyObject(styles$j.base);
+        var keys = calculateNestedKeys(styles$j.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$i.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$j.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1078,7 +1078,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',
 };
@@ -1088,8 +1088,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,
 };
@@ -1194,7 +1194,7 @@ var useExcel = function () {
     };
 };
 
-var base$e = {
+var base$f = {
     container: '',
     head: 'flex justify-between',
     body: 'relative rounded-md',
@@ -1269,11 +1269,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,
@@ -1282,7 +1282,7 @@ var styles$h = {
     pill: pill$4,
     floored: floored$4,
     invalid: invalid$4,
-    disabled: disabled$5,
+    disabled: disabled$6,
 };
 
 var SelectMenuForm = function (props) {
@@ -1294,10 +1294,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) {
-            set(result, key, toClassName(get(styles$h.base, key), get(styles$h['normal'], key), isTouched === true && !isValid && get(styles$h.invalid, key), isDisabled && get(styles$h.disabled, key), get(stylesOverrides, 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;
     };
@@ -1380,10 +1380,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) {
-            set(result, key, toClassName(get(styles$g.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$h.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1431,7 +1431,7 @@ var PanelPaginationNavigation = function (props) {
                         } })), jsx("div", { children: jsxs("nav", { className: styles.desktop.navigation, "aria-label": "Pagination", children: [jsxs("button", { className: toClassName(styles.desktop.outerLeftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(1); }, children: [jsx("span", { className: styles.label, children: "First" }), jsx(ChevronDoubleLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), jsxs("button", { className: toClassName(styles.desktop.innerButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: [jsx("span", { className: styles.label, children: "Previous" }), jsx(ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), component, jsxs("button", { className: toClassName(styles.desktop.innerButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: [jsx("span", { className: styles.label, children: "Next" }), jsx(ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] }), jsxs("button", { className: toClassName(styles.desktop.outerRightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(max); }, children: [jsx("span", { className: styles.label, children: "Last" }), jsx(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: '',
@@ -1454,8 +1454,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) {
@@ -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$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), type && get(styles$f[type], key), hasStickyHeader && get(styles$f.sticky, key), hasVerticalSeparators && get(styles$f.separated, key), areControlsVisible && get(styles$f.controlled, key), get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -1591,7 +1591,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',
@@ -1703,8 +1703,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,
@@ -1760,10 +1760,10 @@ var TableList2 = function (props) {
     var _h = useState({}), columnVisibility = _h[0], setColumnVisibility = _h[1];
     var _j = 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) {
-            set(result, key, toClassName(get(styles$e.base, key), 
+            set(result, key, toClassName(get(styles$f.base, key), 
             // type && get(defaultStyles[type], key),
             // hasStickyHeader && get(defaultStyles.sticky, key),
             // hasVerticalSeparators && get(defaultStyles.separated, key),
@@ -1887,7 +1887,7 @@ var TableList2 = function (props) {
                                             }) }))] }), isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsx(Fragment$1, { 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) : (jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", { className: "flex gap-2", children: [jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsx("div", { className: styles.foot, children: foot && foot(state) })] }));
 };
 
-var base$b = {
+var base$c = {
     container: '',
     head: '',
     body: {
@@ -1926,8 +1926,8 @@ var base$b = {
     },
     foot: '',
 };
-var styles$e = {
-    base: base$b,
+var styles$f = {
+    base: base$c,
 };
 
 var createColumnHelper = function () {
@@ -1937,10 +1937,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$1(result, key, toClassName(get$1(styles$d.base, key), type && get$1(styles$d[type], key), get$1(stylesOverrides, key)));
+            set$1(result, key, toClassName(get$1(styles$e.base, key), type && get$1(styles$e[type], key), get$1(stylesOverrides, key)));
         });
         return result;
     };
@@ -1976,7 +1976,7 @@ var BreadcrumbsNavigation = function (props) {
     return (jsx("nav", { className: styles.container, "aria-label": "Breadcrumb", children: jsxs("ol", { className: styles.list, children: [jsx(HomeLink, {}), pages === null || pages === void 0 ? void 0 : pages.map(function (page) { return jsx(PageLink, { page: page }, page.name); })] }) }));
 };
 
-var base$a = {
+var base$b = {
     container: 'flex',
     list: 'flex',
     separator: '',
@@ -2061,8 +2061,8 @@ var bar = {
         link: '',
     },
 };
-var styles$d = {
-    base: base$a,
+var styles$e = {
+    base: base$b,
     slashes: slashes,
     chevrons: chevrons,
     panel: panel,
@@ -2073,10 +2073,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$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;
     };
@@ -2117,7 +2117,7 @@ var PagePaginationNavigation = function (props) {
     return (jsxs("nav", { className: styles.container, children: [jsx("div", { className: styles.left.container, children: jsxs("button", { className: toClassName(styles.left.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return setCurrent(current - 1); }, children: [jsx(ArrowLongLeftIcon, { className: styles.left.icon }), "Previous"] }) }), jsx("div", { className: styles.center.container, children: component }), jsx("div", { className: styles.right.container, children: jsxs("button", { className: toClassName(styles.right.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return setCurrent(current + 1); }, children: ["Next", jsx(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',
@@ -2139,18 +2139,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 = 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) {
-            set(result, key, toClassName(get(styles$b.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$c.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2160,10 +2160,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) {
-            set(result, key, toClassName(get(styles$b.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$c.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2209,10 +2209,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) {
-            set(result, key, toClassName(get(styles$b.base, key), type && get(styles$b[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$c.base, key), type && get(styles$c[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2233,7 +2233,7 @@ var TabNavigation = {
     View: View$1,
 };
 
-var base$8 = {
+var base$9 = {
     container: '',
     list: {
         container: '',
@@ -2270,8 +2270,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,
@@ -2298,11 +2298,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$a.list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list), children: children }));
+    return (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 (jsx(LinkComponent, { href: href, className: toClassName(styles$a.item[isCurrent ? 'active' : 'notActive'], styles$a.item.base), onClick: onClick, children: children }));
+    return (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;
@@ -2315,7 +2315,7 @@ var VerticalNavigation = {
     View: View,
 };
 
-var styles$a = {
+var styles$b = {
     container: '',
     list: 'space-y-1',
     item: {
@@ -2333,10 +2333,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) {
-            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;
     };
@@ -2354,7 +2354,7 @@ var ModalOverlay = function (props) {
     return (jsxs(Fragment$1, { children: [jsx(Transition.Root, { show: isOpen, as: Fragment, children: jsxs(Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsx(Transition.Child, { as: 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: jsx("div", { className: styles.background.container }) }), jsx("div", { className: styles.layout.container, children: jsx("div", { className: styles.layout.content, "data-cy": dataCy, children: jsx(Transition.Child, { as: 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: jsx(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',
@@ -2408,8 +2408,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,
@@ -2420,10 +2420,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) {
-            set(result, key, toClassName(get(styles$8.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$9.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2438,10 +2438,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) {
-            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;
     };
@@ -2453,7 +2453,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',
@@ -2513,8 +2513,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,
@@ -2530,10 +2530,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) {
-            set(result, key, toClassName(get(styles$7.base, key), size && get(styles$7[size], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$8.base, key), size && get(styles$8[size], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2541,7 +2541,7 @@ var SlideOverOverlay = function (props) {
     return (jsxs(Fragment$1, { children: [jsx(Transition.Root, { show: isOpen, as: Fragment, children: jsxs(Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsx(Transition.Child, { as: 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: jsx("div", { className: styles.background.container }) }), jsx("div", { className: styles.layout.container, children: jsx("div", { className: styles.layout.content, children: jsx("div", { className: styles.layout.inner, children: jsx(Transition.Child, { as: 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: jsx(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',
@@ -2596,8 +2596,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,
@@ -2619,7 +2619,7 @@ var TableColumnOptionsCustom = function (props) {
         ids.splice(location, 0, column.id);
         setColumnOrder(ids);
     }, []);
-    return (jsxs(Popover, { children: [jsx(Popover.Button, { children: trigger }), jsxs(Popover.Panel, { className: styles$6.controls.content, children: [resetConfig && (jsxs("div", { className: styles$6.controls.dropdown.reset, onClick: function () {
+    return (jsxs(Popover, { children: [jsx(Popover.Button, { children: trigger }), jsxs(Popover.Panel, { className: styles$7.controls.content, children: [resetConfig && (jsxs("div", { className: styles$7.controls.dropdown.reset, onClick: function () {
                             removeTableState(resetConfig.tableId);
                             table.resetColumnVisibility(true);
                             table.resetColumnOrder();
@@ -2628,15 +2628,15 @@ var TableColumnOptionsCustom = function (props) {
                         .getAllLeafColumns()
                         .map(function (column, index) {
                         var isAccessorColumn = !!(column === null || column === void 0 ? void 0 : column.accessorFn);
-                        return (jsxs("div", { className: toClassName(styles$6.controls.dropdown.container, !isAccessorColumn && 'hidden'), children: [jsx("input", { className: styles$6.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsx("label", { className: styles$6.controls.dropdown.label, children: column.columnDef.header }), jsxs("div", { className: styles$6.controls.dropdown.actions, children: [jsx(ChevronDownIcon$1, { className: styles$6.controls.dropdown.upIcon, onClick: function () {
+                        return (jsxs("div", { className: toClassName(styles$7.controls.dropdown.container, !isAccessorColumn && 'hidden'), children: [jsx("input", { className: styles$7.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsx("label", { className: styles$7.controls.dropdown.label, children: column.columnDef.header }), jsxs("div", { className: styles$7.controls.dropdown.actions, children: [jsx(ChevronDownIcon$1, { className: styles$7.controls.dropdown.upIcon, onClick: function () {
                                                 return handleUpdateColumnOrder(table, column, index - 1, setColumnOrder);
-                                            } }), jsx(ChevronDownIcon$1, { className: styles$6.controls.dropdown.downIcon, onClick: function () {
+                                            } }), jsx(ChevronDownIcon$1, { 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]',
@@ -2676,18 +2676,19 @@ var DateMenuForm = function (props) {
         startDate: null,
         endDate: null,
     }), state = _p[0], setState = _p[1];
-    var handleValueChange = function (newValue) {
+    var $datepickerInputRef = useRef(null);
+    var handleValueChange = 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) {
-            set(result, key, toClassName(get(styles$5.base, key), type && get(styles$5[type], key), isTouched === true && !isValid && get(styles$5.invalid, key), isDisabled && get(styles$5.disabled, key), get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -2705,7 +2706,40 @@ var DateMenuForm = function (props) {
     useEffect(function () {
         setState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : { startDate: null, endDate: null });
     }, [defaultValue]);
-    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, "data-cy": inputDataCy, children: [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, 
+    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 ||
+                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 (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, "data-cy": inputDataCy, ref: $datepickerInputRef, children: [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, 
                         //
@@ -2716,7 +2750,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',
@@ -2776,11 +2810,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,
@@ -2789,18 +2823,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) {
-            set(result, key, toClassName(get(styles$4.base, key), 
+            set(result, key, toClassName(get(styles$5.base, key), 
             // isTouched === true && !isValid && get(defaultStyles.invalid, key),
-            isDisabled && get(styles$4.disabled, key), get(stylesOverrides, key)));
+            isDisabled && get(styles$5.disabled, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2819,7 +2853,7 @@ var CheckboxInputGroupForm = function (props) {
                         } }) })] }) }));
 };
 
-var base$3 = {
+var base$4 = {
     container: '',
     sr: 'sr-only',
     list: 'space-y-5',
@@ -2832,11 +2866,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) {
+            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)));
+        });
+        return result;
+    };
+    var styles = handleGenerateStyle();
+    var inputRef = useRef(null);
+    var handleToggle = 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]);
+    useEffect(function () {
+        if (isIndeterminable) {
+            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 }))] })] }));
+};
+
+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,
@@ -10813,5 +10903,5 @@ var styles = {
     disabled: disabled,
 };
 
-export { AddressInputGroupForm, BadgeElement$1 as AlertElement, AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, CheckboxInputGroupForm, 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, 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, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, VerticalNavigation, CheckboxInputGroupForm as __DEPRECATED__CheckboxInputGroupForm, createColumnHelper, fromSelectMenuOptionToStringValue, useExcel };
 //# sourceMappingURL=index.esm.js.map