@ballistix.digital/react-components 0.4.69 → 0.4.71

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { ArrowPathIcon, ExclamationCircleIcon, CheckIcon, ChevronDownIcon, EllipsisVerticalIcon, ChevronLeftIcon, ChevronRightIcon, HomeIcon, ArrowLongLeftIcon, ArrowLongRightIcon } from '@heroicons/react/20/solid';
 import { set, get } from 'lodash';
 import get$1 from 'lodash/get';
-import n, { Children, Fragment, useRef, useCallback, useEffect, forwardRef, useState, useMemo } from 'react';
+import React, { Children, Fragment, useRef, useCallback, useEffect, forwardRef, useState, useMemo, createContext, useContext } from 'react';
 import { Menu, Transition, Dialog } from '@headlessui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { unstable_batchedUpdates } from 'react-dom';
@@ -76,10 +76,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$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), size && get(styles$l[size], key), figure && get(styles$l[figure], key), status && get(styles$l[status], key), isDisabled && get(styles$l.disabled, key), isLoading && get(styles$l.loading, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$m.base, key), size && get(styles$m[size], key), figure && get(styles$m[figure], key), status && get(styles$m[status], key), isDisabled && get(styles$m.disabled, key), isLoading && get(styles$m.loading, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -97,7 +97,7 @@ var AvatarElement = function (props) {
     return (jsx("a", __assign({ href: url }, { children: jsxs("div", __assign({ className: "flex items-center" }, { children: [jsxs("span", __assign({ 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", __assign({ className: "ml-3" }, { children: children }))] })) })));
 };
 
-var base$i = {
+var base$j = {
     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',
@@ -160,7 +160,7 @@ var rounded$2 = {
     placeholder: 'rounded-full',
     container: 'rounded-full',
 };
-var disabled$3 = {
+var disabled$4 = {
     container: 'opacity-20 cursor-not-allowed',
 };
 var loading$2 = {
@@ -175,8 +175,8 @@ var online = {
 var blocked = {
     indicator: 'bg-red-400',
 };
-var styles$l = {
-    base: base$i,
+var styles$m = {
+    base: base$j,
     xs: xs$4,
     sm: sm$5,
     md: md$4,
@@ -187,17 +187,17 @@ var styles$l = {
     offline: offline,
     online: online,
     blocked: blocked,
-    disabled: disabled$3,
+    disabled: disabled$4,
     loading: loading$2,
 };
 
 var BadgeElement = function (props) {
     var children = props.children, _a = props.color, color = _a === void 0 ? 'gray' : _a, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.size, size = _c === void 0 ? 'sm' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, isDisabled = props.isDisabled, isLoading = props.isLoading, onClose = props.onClose, stylesOverrides = props.styles;
     var 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), color && get(styles$k[color], key), size && get(styles$k[size], key), figure && get(styles$k[figure], key), isDisabled && get(styles$k.disabled, key), isLoading && get(styles$k.loading, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$l.base, key), type && get(styles$l[type], key), color && get(styles$l[color], key), size && get(styles$l[size], key), figure && get(styles$l[figure], key), isDisabled && get(styles$l.disabled, key), isLoading && get(styles$l.loading, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -209,12 +209,12 @@ var BadgeElement = function (props) {
     return (jsxs("span", __assign({ className: styles.container }, { children: [type === 'indicator' && (jsx("svg", __assign({ className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8" }, { children: jsx("circle", { cx: 4, cy: 4, r: 3 }) }))), children, type === 'close' && (jsxs("button", __assign({ type: "button", className: styles.button, onClick: onClose }, { children: [jsx("span", __assign({ className: "sr-only" }, { children: "Remove large option" })), xIcon] })))] })));
 };
 
-var base$h = {
+var base$i = {
     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',
 };
-var normal$3 = {
+var normal$4 = {
     container: 'px-2.5',
 };
 var indicator = {
@@ -286,15 +286,15 @@ var pink = {
     indicator: 'text-pink-400',
     button: 'text-pink-400 hover:bg-pink-200 hover:text-pink-500 focus:bg-purple-500',
 };
-var disabled$2 = {
+var disabled$3 = {
     container: 'opacity-20 cursor-not-allowed',
 };
 var loading$1 = {
     container: 'cursor-progress',
 };
-var styles$k = {
-    base: base$h,
-    normal: normal$3,
+var styles$l = {
+    base: base$i,
+    normal: normal$4,
     indicator: indicator,
     close: close,
     primary: primary$1,
@@ -312,17 +312,17 @@ var styles$k = {
     indigo: indigo,
     purple: purple,
     pink: pink,
-    disabled: disabled$2,
+    disabled: disabled$3,
     loading: loading$1,
 };
 
 var ButtonElement = function (props) {
     var children = props.children, innerRef = props.innerRef, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, _b = props.type, type = _b === void 0 ? 'primary' : _b, _c = props.size, size = _c === void 0 ? 'md' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, _e = props.status, status = _e === void 0 ? 'idle' : _e, isDisabled = props.isDisabled, stylesOverrides = props.styles, onClick = props.onClick;
     var 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), size && get(styles$j[size], key), figure && get(styles$j[figure], key), status && get(styles$j[status], key), isDisabled && get(styles$j.disabled, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$k.base, key), type && get(styles$k[type], key), size && get(styles$k[size], key), figure && get(styles$k[figure], key), status && get(styles$k[status], key), isDisabled && get(styles$k.disabled, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -330,7 +330,7 @@ var ButtonElement = function (props) {
     return (jsxs("button", __assign({ type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: innerRef }, { children: [status === 'idle' && children, status === 'loading' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(ArrowPathIcon, { className: styles.spinner }), jsx("div", { children: children })] }))), status === 'error' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(ExclamationCircleIcon, { className: styles.icon }), jsx("div", { children: children })] }))), status === 'success' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(CheckIcon, { className: styles.icon }), jsx("div", { children: children })] })))] })));
 };
 
-var base$g = {
+var base$h = {
     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: 'w-5',
@@ -379,11 +379,11 @@ var error = {
     container: 'bg-rose-400 hover:bg-rose-500 !text-white duration-300',
     content: 'flex items-center',
 };
-var disabled$1 = {
+var disabled$2 = {
     container: '!opacity-20 !cursor-not-allowed',
 };
-var styles$j = {
-    base: base$g,
+var styles$k = {
+    base: base$h,
     primary: primary,
     secondary: secondary,
     outline: outline,
@@ -398,16 +398,16 @@ var styles$j = {
     loading: loading,
     success: success,
     error: error,
-    disabled: disabled$1,
+    disabled: disabled$2,
 };
 
 var ButtonGroupElement = 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;
     };
@@ -425,23 +425,23 @@ var ButtonGroupElement = function (props) {
         }) })));
 };
 
-var base$f = {
+var base$g = {
     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$i = {
-    base: base$f,
+var styles$j = {
+    base: base$g,
 };
 
 var Container$3 = function (props) {
     var children = props.children, label = props.label, trigger = props.trigger, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, stylesOverrides = props.styles;
     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), type && get(styles$h[type], key), direction && get(styles$h[direction], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$i.base, key), type && get(styles$i[type], key), direction && get(styles$i[direction], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -454,7 +454,7 @@ var DropdownElement = {
     Item: Menu.Item,
 };
 
-var base$e = {
+var base$f = {
     container: 'relative 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',
@@ -475,8 +475,8 @@ var topLeft = {
 var topRight = {
     items: 'origin-bottom-left left-0 bottom-0',
 };
-var styles$h = {
-    base: base$e,
+var styles$i = {
+    base: base$f,
     button: button,
     compact: compact,
     'bottom-left': bottomLeft,
@@ -514,7 +514,7 @@ var IconElement = function (props) {
 var a=function(e,t){return a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t;}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);},a(e,t)};var l$1=function(){return l$1=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},l$1.apply(this,arguments)};function o(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]]);}return r}var i$1=function(e){function t(t,r){var n=e.call(this,t)||this;return n.name="SyntheticChangeError",n.cause=r,n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e;}a(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r);}(t,e),t}(Error);function u$1(e,t){var r=t.value,n=t.selectionStart,a=t.selectionEnd;void 0!==r&&(e.value=r),void 0!==n&&void 0!==a&&e.setSelectionRange(n,a);}var c$1=function(e){return null!==e&&"text"===e.type};function s$1(a){var l=a.init,o=a.tracking,s=a.customInputEventType,p=a.customInputEventHandler,v=useRef(null),d=useRef({requestID:-1,fallbackRequestID:-1,cachedRequestID:-1,start:0,end:0}),f=function(r,a,l){var o=useRef(!0),i=useCallback((function(e){if(null!==r.current&&a&&l){var t=r.current,i=t.value,c=t.selectionStart,s=t.selectionEnd;o.current=!1,setTimeout((function(){if(null!==r.current){u$1(r.current,{value:i,selectionStart:null!=c?c:i.length,selectionEnd:null!=s?s:i.length});var t=new CustomEvent(a,{bubbles:!0,cancelable:!1,composed:!0,detail:e});r.current.dispatchEvent(t),unstable_batchedUpdates?unstable_batchedUpdates(l,t):l(t),o.current=!0;}}));}}),[r,a,l]);return [o,i]}(v,s,p),h=f[0],m=f[1];return useEffect((function(){"production"!==process.env.NODE_ENV&&(null===v.current&&console.error(new Error("Input element does not exist.")),null!==v.current&&"text"!==v.current.type&&console.error(new Error('The type of the input element does not match the type "text".')));}),[]),useEffect((function(){var e;if(null!==v.current&&c$1(v.current)){var t=null!==(e=v.current._wrapperState)&&void 0!==e?e:{},r=t.controlled,n=void 0!==r&&r,a=t.initialValue,o=l({controlled:n,initialValue:void 0===a?"":a});u$1(v.current,{value:o.value});}}),[]),useEffect((function(){var e=function(e){var t,r,n,a,l,s,p,f,h,y,g,k,b,w,E,O;if(c$1(v.current))try{if(null===v.current)throw new i$1("Reference to input element is not initialized.");if(d.current.cachedRequestID===d.current.requestID)throw new i$1("The input selection has not been updated.");d.current.cachedRequestID=d.current.requestID;var _=v.current,I=_.value,S=_.selectionStart,R=_.selectionEnd;if(null===S||null===R)throw new i$1("The selection attributes have not been initialized.");var j=null!==(n=null===(r=null===(t=v.current._valueTracker)||void 0===t?void 0:t.getValue)||void 0===r?void 0:r.call(t))&&void 0!==n?n:"",x="initial";if(S>d.current.start?x="insert":S<=d.current.start&&S<d.current.end?x="deleteBackward":S===d.current.end&&I.length<j.length&&(x="deleteForward"),("deleteBackward"===x||"deleteForward"===x)&&I.length>j.length)throw new i$1("Input type detection error.");var q="",D="",T=d.current.start,P=d.current.end;switch(x){case"insert":q=I.slice(d.current.start,S);break;case"deleteBackward":case"deleteForward":var V=j.length-I.length;T=S,P=S+V,D=j.slice(T,P);break;default:throw new i$1("The input type is undefined.")}var C=o({inputType:x,added:q,deleted:D,previousValue:j,selectionStartRange:T,selectionEndRange:P,value:I,selectionStart:S,selectionEnd:R});u$1(v.current,{value:C.value,selectionStart:C.selectionStart,selectionEnd:C.selectionEnd}),m(C.__detail),null===(l=null===(a=v.current._valueTracker)||void 0===a?void 0:a.setValue)||void 0===l||l.call(a,j),d.current.start=C.selectionStart,d.current.end=C.selectionEnd;}catch(t){var F=t,z=F.name,A=F.cause;if(null!==v.current&&u$1(v.current,{value:null!==(y=null!==(p=null===(s=null==A?void 0:A.__attributes)||void 0===s?void 0:s.value)&&void 0!==p?p:null===(h=null===(f=v.current._valueTracker)||void 0===f?void 0:f.getValue)||void 0===h?void 0:h.call(f))&&void 0!==y?y:"",selectionStart:null!==(k=null===(g=null==A?void 0:A.__attributes)||void 0===g?void 0:g.selectionStart)&&void 0!==k?k:d.current.start,selectionEnd:null!==(w=null===(b=null==A?void 0:A.__attributes)||void 0===b?void 0:b.selectionEnd)&&void 0!==w?w:d.current.end}),void 0!==(null===(E=null==A?void 0:A.__attributes)||void 0===E?void 0:E.selectionStart)&&(d.current.start=A.__attributes.selectionStart),void 0!==(null===(O=null==A?void 0:A.__attributes)||void 0===O?void 0:O.selectionEnd)&&(d.current.end=A.__attributes.selectionEnd),e.preventDefault(),e.stopPropagation(),"SyntheticChangeError"!==z)throw t}},t=v.current;return null==t||t.addEventListener("input",e),function(){null==t||t.removeEventListener("input",e);}}),[o,m]),useEffect((function(){var e=function(){if(c$1(v.current)){var e=function(){var t,r,n,a;h.current?(d.current.start=null!==(r=null===(t=v.current)||void 0===t?void 0:t.selectionStart)&&void 0!==r?r:0,d.current.end=null!==(a=null===(n=v.current)||void 0===n?void 0:n.selectionEnd)&&void 0!==a?a:0,d.current.requestID=requestAnimationFrame(e)):d.current.fallbackRequestID=requestAnimationFrame(e);};d.current.requestID=requestAnimationFrame(e);}};null!==v.current&&document.activeElement===v.current&&e();var t=v.current;return null==t||t.addEventListener("focus",e),function(){null==t||t.removeEventListener("focus",e);}}),[]),useEffect((function(){var e=function(){c$1(v.current)&&(cancelAnimationFrame(d.current.requestID),cancelAnimationFrame(d.current.fallbackRequestID),d.current.requestID=-1,d.current.fallbackRequestID=-1,d.current.cachedRequestID=-1);},t=v.current;return null==t||t.addEventListener("blur",e),function(){null==t||t.removeEventListener("blur",e);}}),[]),v}function p$1(e){var t=e.value,r=e.replacementChars,n=e.replacement,a=e.separate,l=r;return t.split("").reduce((function(e,t){var r,o=!Object.prototype.hasOwnProperty.call(n,t)&&(null===(r=n[l[0]])||void 0===r?void 0:r.test(t));return a&&t===l[0]||o?(l=l.slice(1),e+t):e}),"")}function v(e,t,r){var n=["[","]","\\","/","^","$",".","|","?","*","+","(",")","{","}"];return e.split("").reduce((function(e,a,l,o){var i=Object.prototype.hasOwnProperty.call(t,a),u=r?"(?!".concat(a,")"):"",c=e+(i?u+t[a].toString().slice(1,-1):n.includes(a)?"\\".concat(a):a);return l+1===o.length?"".concat(c,"$"):c}),"^")}function d(e,t){var r=t.mask,n=t.replacement,a=t.showMask,l=function(e,t){var r=t.mask,n=t.replacement,a=0;return r.split("").reduce((function(t,r){return Object.prototype.hasOwnProperty.call(n,r)&&void 0!==e[a]?t+e[a++]:t+r}),"")}(e,{mask:r,replacement:n}),o=function(e,t){var r=t.mask,n=t.replacement;return e.split("").map((function(e,t){return {type:Object.prototype.hasOwnProperty.call(n,e)?"replacement":e===r[t]?"mask":"input",value:e,index:t}}))}(l,{mask:r,replacement:n});if(!a){for(var i=-1,u=o.length-1;u>=0;u--)if("input"===o[u].type){i=o[u].index;break}l=l.slice(0,i+1);}var c=v(r,n,!1),s=v(r,n,!0);return {value:l,input:e,parts:o,pattern:c,isValid:RegExp(s).test(l)}}function f$1(e){var t=e.value,r=e.start,n=void 0===r?0:r,a=e.end,l=e.mask,o=e.replacement,i=e.separate,u=l.slice(n,a),c=t.slice(n,a);return u.split("").reduce((function(e,t,r){var n=Object.prototype.hasOwnProperty.call(o,t);return n&&void 0!==c[r]&&c[r]!==t?e+c[r]:n&&i?e+t:e}),"")}var h=function(e,t){var r="".concat(e,"\n\n").concat(t,"\n");return new Error(r)};var m=function(e){var t;return e.length>0?((t={})[e]=/./,t):{}};function y(n){var a=null!=n?n:{},l=a.mask,o=void 0===l?"":l,u=a.replacement,c=void 0===u?{}:u,v=a.showMask,y=void 0!==v&&v,g=a.separate,k=void 0!==g&&g,b=a.modify,w=a.onMask,E="string"==typeof c?m(c):c,O=useRef(null),_=JSON.stringify(E,(function(e,t){return t instanceof RegExp?t.toString():t})),I=useCallback((function(e){var t=e.controlled,r=e.initialValue;r=t||r?r:y?o:"";var n={mask:o,replacement:E,showMask:y,separate:k};return O.current={value:r,props:n,fallbackProps:n},{value:r}}),[]),S=useCallback((function(e){var t,r=e.inputType,n=e.added,a=e.previousValue,l=e.selectionStartRange,u=e.selectionEndRange;if(null===O.current)throw new i$1("The state has not been initialized.");O.current.value!==a?O.current.props=O.current.fallbackProps:O.current.fallbackProps=O.current.props;var c=f$1({value:a,end:l,mask:O.current.props.mask,replacement:O.current.props.replacement,separate:O.current.props.separate}),s=RegExp("[^".concat(Object.keys(O.current.props.replacement),"]"),"g"),v=O.current.props.mask.replace(s,"");if(c&&(c=p$1({value:c,replacementChars:v,replacement:O.current.props.replacement,separate:O.current.props.separate})),n&&(n=p$1({value:n,replacementChars:v.slice(c.length),replacement:O.current.props.replacement,separate:!1})),"insert"===r&&""===n)throw new i$1("The character does not match the key value of the `replacement` object.");var h=f$1({value:a,start:u,mask:O.current.props.mask,replacement:O.current.props.replacement,separate:O.current.props.separate});if(O.current.props.separate){var g=O.current.props.mask.slice(l,u).replace(s,""),w=g.length-n.length;w<0?h=h.slice(-w):w>0&&(h=g.slice(-w)+h);}h&&(h=p$1({value:h,replacementChars:v.slice(c.length+n.length),replacement:O.current.props.replacement,separate:O.current.props.separate}));var _=c+n+h,I=null!==(t=null==b?void 0:b(_))&&void 0!==t?t:{},S=I.mask,R=void 0===S?o:S,j=I.replacement,x=void 0===j?E:j,q=I.showMask,D=void 0===q?y:q,T=I.separate,P=void 0===T?k:T;"string"==typeof x&&(x=m(x));var V=d(_,{mask:R,replacement:x,showMask:D}),C=function(e){var t,r,n,a=e.inputType,l=e.added,o=e.beforeRange;e.afterRange;var i=e.value,u=e.parts,c=e.replacement,s=e.separate,p=u.filter((function(e){var t=e.type;return "input"===t||s&&"replacement"===t})),v=null===(t=p[o.length+l.length-1])||void 0===t?void 0:t.index,d=null===(r=p[o.length-1])||void 0===r?void 0:r.index,f=null===(n=p[o.length+l.length])||void 0===n?void 0:n.index;if("insert"===a){if(void 0!==v)return v+1;if(void 0!==f)return f;if(void 0!==d)return d+1}if("deleteForward"===a){if(void 0!==f)return f;if(void 0!==d)return d+1}if("deleteBackward"===a){if(void 0!==d)return d+1;if(void 0!==f)return f}var h=i.split("").findIndex((function(e){return Object.prototype.hasOwnProperty.call(c,e)}));return -1!==h?h:i.length}({inputType:r,added:n,beforeRange:c,afterRange:h,value:V.value,parts:V.parts,replacement:x,separate:P});return O.current.value=V.value,O.current.props={mask:R,replacement:x,showMask:D,separate:P},{value:V.value,selectionStart:C,selectionEnd:C,__detail:V}}),[o,_,y,k,b]),R=s$1({init:I,tracking:S,customInputEventType:"input-mask",customInputEventHandler:w});return function(e){var t=e.inputRef,n=e.mask,a=e.replacement;useEffect((function(){var e,r,l;if("production"!==process.env.NODE_ENV){var o=null!==(l=null===(r=null===(e=t.current)||void 0===e?void 0:e._wrapperState)||void 0===r?void 0:r.initialValue)&&void 0!==l?l:"";o.length>n.length&&console.error(h("The initialized value of the `value` or `defaultValue` property is longer than the value specified in the `mask` property. Check the correctness of the initialized value in the specified property.",'Invalid value: "'.concat(o,'".')));var i=Object.keys(a).filter((function(e){return e.length>1}));i.length>0&&console.error(h("Object keys in the `replacement` property are longer than one character. Replacement keys must be one character long. Check the correctness of the value in the specified property.","Invalid keys: ".concat(i.join(", "),".")));var u=n.slice(0,o.length).split("").findIndex((function(e,t){var r=Object.prototype.hasOwnProperty.call(a,e),n=e!==o[t];return r?!!n&&!a[e].test(o[t]):n}));-1!==u&&console.error(h("An invalid character was found in the initialized property value `value` or `defaultValue` (index: ".concat(u,"). Check the correctness of the initialized value in the specified property."),'Invalid value: "'.concat(o,'".')));}}),[]);}({inputRef:R,mask:o,replacement:E}),R}
 
 var i,s={},c={};var u,f,l={};
-function p(){return u||(u=1,"production"!==process.env.NODE_ENV&&function(){var e=n,r=Symbol.for("react.element"),t=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),s=Symbol.for("react.provider"),c=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),p=Symbol.for("react.suspense_list"),y=Symbol.for("react.memo"),d=Symbol.for("react.lazy"),m=Symbol.for("react.offscreen"),v=Symbol.iterator,g="@@iterator";var b=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function h(e){for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];!function(e,r,t){var n=b.ReactDebugCurrentFrame,o=n.getStackAddendum();""!==o&&(r+="%s",t=t.concat([o]));var a=t.map((function(e){return String(e)}));a.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,a);}("error",e,t);}var _,k=!1,w=!1,S=!1,j=!1,O=!1;function R(e){return e.displayName||"Context"}function E(e){if(null==e)return null;if("number"==typeof e.tag&&h("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case o:return "Fragment";case t:return "Portal";case i:return "Profiler";case a:return "StrictMode";case f:return "Suspense";case p:return "SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case c:return R(e)+".Consumer";case s:return R(e._context)+".Provider";case u:return function(e,r,t){var n=e.displayName;if(n)return n;var o=r.displayName||r.name||"";return ""!==o?t+"("+o+")":t}(e,e.render,"ForwardRef");case y:var r=e.displayName||null;return null!==r?r:E(e.type)||"Memo";case d:var n=e,l=n._payload,m=n._init;try{return E(m(l))}catch(e){return null}}return null}_=Symbol.for("react.module.reference");var P,T,x,$,N,C,D,F=Object.assign,I=0;function M(){}M.__reactDisabledLog=!0;var L,W=b.ReactCurrentDispatcher;function U(e,r,t){if(void 0===L)try{throw Error()}catch(e){var n=e.stack.trim().match(/\n( *(at )?)/);L=n&&n[1]||"";}return "\n"+L+e}var A,z=!1,Y="function"==typeof WeakMap?WeakMap:Map;function B(e,r){if(!e||z)return "";var t,n=A.get(e);if(void 0!==n)return n;z=!0;var o,a=Error.prepareStackTrace;Error.prepareStackTrace=void 0,o=W.current,W.current=null,function(){if(0===I){P=console.log,T=console.info,x=console.warn,$=console.error,N=console.group,C=console.groupCollapsed,D=console.groupEnd;var e={configurable:!0,enumerable:!0,value:M,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e});}I++;}();try{if(r){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(i,[]);}catch(e){t=e;}Reflect.construct(e,[],i);}else {try{i.call();}catch(e){t=e;}e.call(i.prototype);}}else {try{throw Error()}catch(e){t=e;}e();}}catch(r){if(r&&t&&"string"==typeof r.stack){for(var s=r.stack.split("\n"),c=t.stack.split("\n"),u=s.length-1,f=c.length-1;u>=1&&f>=0&&s[u]!==c[f];)f--;for(;u>=1&&f>=0;u--,f--)if(s[u]!==c[f]){if(1!==u||1!==f)do{if(u--,--f<0||s[u]!==c[f]){var l="\n"+s[u].replace(" at new "," at ");return e.displayName&&l.includes("<anonymous>")&&(l=l.replace("<anonymous>",e.displayName)),"function"==typeof e&&A.set(e,l),l}}while(u>=1&&f>=0);break}}}finally{z=!1,W.current=o,function(){if(0==--I){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:F({},e,{value:P}),info:F({},e,{value:T}),warn:F({},e,{value:x}),error:F({},e,{value:$}),group:F({},e,{value:N}),groupCollapsed:F({},e,{value:C}),groupEnd:F({},e,{value:D})});}I<0&&h("disabledDepth fell below zero. This is a bug in React. Please file an issue.");}(),Error.prepareStackTrace=a;}var p=e?e.displayName||e.name:"",y=p?U(p):"";return "function"==typeof e&&A.set(e,y),y}function V(e,r,t){if(null==e)return "";if("function"==typeof e)return B(e,!(!(n=e.prototype)||!n.isReactComponent));var n;if("string"==typeof e)return U(e);switch(e){case f:return U("Suspense");case p:return U("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case u:return B(e.render,!1);case y:return V(e.type,r,t);case d:var o=e,a=o._payload,i=o._init;try{return V(i(a),r,t)}catch(e){}}return ""}A=new Y;var q=Object.prototype.hasOwnProperty,H={},J=b.ReactDebugCurrentFrame;function X(e){if(e){var r=e._owner,t=V(e.type,e._source,r?r.type:null);J.setExtraStackFrame(t);}else J.setExtraStackFrame(null);}var G=Array.isArray;function K(e){return G(e)}function Q(e){return ""+e}function Z(e){if(function(e){try{return Q(e),!1}catch(e){return !0}}(e))return h("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",function(e){return "function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object"}(e)),Q(e)}var ee,re,te,ne=b.ReactCurrentOwner,oe={key:!0,ref:!0,__self:!0,__source:!0};te={};var ae=function(e,t,n,o,a,i,s){var c={$$typeof:r,type:e,key:t,ref:n,props:s,_owner:i,_store:{}};return Object.defineProperty(c._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(c,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(c,"_source",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.freeze&&(Object.freeze(c.props),Object.freeze(c)),c};function ie(e,r,t,n,o){var a,i={},s=null,c=null;for(a in void 0!==t&&(Z(t),s=""+t),function(e){if(q.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return !1}return void 0!==e.key}(r)&&(Z(r.key),s=""+r.key),function(e){if(q.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return !1}return void 0!==e.ref}(r)&&(c=r.ref,function(e,r){if("string"==typeof e.ref&&ne.current&&r&&ne.current.stateNode!==r){var t=E(ne.current.type);te[t]||(h('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',E(ne.current.type),e.ref),te[t]=!0);}}(r,o)),r)q.call(r,a)&&!oe.hasOwnProperty(a)&&(i[a]=r[a]);if(e&&e.defaultProps){var u=e.defaultProps;for(a in u)void 0===i[a]&&(i[a]=u[a]);}if(s||c){var f="function"==typeof e?e.displayName||e.name||"Unknown":e;s&&function(e,r){var t=function(){ee||(ee=!0,h("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r));};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0});}(i,f),c&&function(e,r){var t=function(){re||(re=!0,h("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r));};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0});}(i,f);}return ae(e,s,c,o,n,ne.current,i)}var se,ce=b.ReactCurrentOwner,ue=b.ReactDebugCurrentFrame;function fe(e){if(e){var r=e._owner,t=V(e.type,e._source,r?r.type:null);ue.setExtraStackFrame(t);}else ue.setExtraStackFrame(null);}function le(e){return "object"==typeof e&&null!==e&&e.$$typeof===r}function pe(){if(ce.current){var e=E(ce.current.type);if(e)return "\n\nCheck the render method of `"+e+"`."}return ""}se=!1;var ye={};function de(e,r){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var t=function(e){var r=pe();if(!r){var t="string"==typeof e?e:e.displayName||e.name;t&&(r="\n\nCheck the top-level render call using <"+t+">.");}return r}(r);if(!ye[t]){ye[t]=!0;var n="";e&&e._owner&&e._owner!==ce.current&&(n=" It was passed a child from "+E(e._owner.type)+"."),fe(e),h('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),fe(null);}}}function me(e,r){if("object"==typeof e)if(K(e))for(var t=0;t<e.length;t++){var n=e[t];le(n)&&de(n,r);}else if(le(e))e._store&&(e._store.validated=!0);else if(e){var o=function(e){if(null===e||"object"!=typeof e)return null;var r=v&&e[v]||e[g];return "function"==typeof r?r:null}(e);if("function"==typeof o&&o!==e.entries)for(var a,i=o.call(e);!(a=i.next()).done;)le(a.value)&&de(a.value,r);}}function ve(e){var r,t=e.type;if(null!=t&&"string"!=typeof t){if("function"==typeof t)r=t.propTypes;else {if("object"!=typeof t||t.$$typeof!==u&&t.$$typeof!==y)return;r=t.propTypes;}if(r){var n=E(t);!function(e,r,t,n,o){var a=Function.call.bind(q);for(var i in e)if(a(e,i)){var s=void 0;try{if("function"!=typeof e[i]){var c=Error((n||"React class")+": "+t+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw c.name="Invariant Violation",c}s=e[i](r,i,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");}catch(e){s=e;}!s||s instanceof Error||(X(o),h("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,i,typeof s),X(null)),s instanceof Error&&!(s.message in H)&&(H[s.message]=!0,X(o),h("Failed %s type: %s",t,s.message),X(null));}}(r,e.props,"prop",n,e);}else if(void 0!==t.PropTypes&&!se){se=!0,h("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",E(t)||"Unknown");}"function"!=typeof t.getDefaultProps||t.getDefaultProps.isReactClassApproved||h("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");}}function ge(e,t,n,l,v,g){var b=function(e){return "string"==typeof e||"function"==typeof e||!!(e===o||e===i||O||e===a||e===f||e===p||j||e===m||k||w||S)||"object"==typeof e&&null!==e&&(e.$$typeof===d||e.$$typeof===y||e.$$typeof===s||e.$$typeof===c||e.$$typeof===u||e.$$typeof===_||void 0!==e.getModuleId)}(e);if(!b){var R="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(R+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var P,T=function(e){return void 0!==e?"\n\nCheck your code at "+e.fileName.replace(/^.*[\\\/]/,"")+":"+e.lineNumber+".":""}(v);R+=T||pe(),null===e?P="null":K(e)?P="array":void 0!==e&&e.$$typeof===r?(P="<"+(E(e.type)||"Unknown")+" />",R=" Did you accidentally export a JSX literal instead of a component?"):P=typeof e,h("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",P,R);}var x=ie(e,t,n,v,g);if(null==x)return x;if(b){var $=t.children;if(void 0!==$)if(l)if(K($)){for(var N=0;N<$.length;N++)me($[N],e);Object.freeze&&Object.freeze($);}else h("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else me($,e);}return e===o?function(e){for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if("children"!==n&&"key"!==n){fe(e),h("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),fe(null);break}}null!==e.ref&&(fe(e),h("Invalid attribute `ref` supplied to `React.Fragment`."),fe(null));}(x):ve(x),x}var be=function(e,r,t){return ge(e,r,t,!1)},he=function(e,r,t){return ge(e,r,t,!0)};l.Fragment=o,l.jsx=be,l.jsxs=he;}()),l}f={get exports(){return s},set exports(e){s=e;}},"production"===process.env.NODE_ENV?f.exports=function(){if(i)return c;i=1;var e=n,r=Symbol.for("react.element"),t=Symbol.for("react.fragment"),o=Object.prototype.hasOwnProperty,a=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function u(e,t,n){var i,c={},u=null,f=null;for(i in void 0!==n&&(u=""+n),void 0!==t.key&&(u=""+t.key),void 0!==t.ref&&(f=t.ref),t)o.call(t,i)&&!s.hasOwnProperty(i)&&(c[i]=t[i]);if(e&&e.defaultProps)for(i in t=e.defaultProps)void 0===c[i]&&(c[i]=t[i]);return {$$typeof:r,type:e,key:u,ref:f,props:c,_owner:a.current}}return c.Fragment=t,c.jsx=u,c.jsxs=u,c}():f.exports=p();forwardRef((function(n,a){var i,c,u=n.component,f=n.mask,l=n.replacement,p=n.showMask,y$1=n.separate,d=n.modify,m=n.onMask,v=o(n,["component","mask","replacement","showMask","separate","modify","onMask"]),g=y({mask:f,replacement:l,showMask:p,separate:y$1,modify:d,onMask:m}),b=useCallback((function(e){i.current=e,"function"==typeof c?c(e):"object"==typeof c&&null!==c&&(c.current=e);}),[i=g,c=a]);return u?s.jsx(u,l$1({ref:b},v)):s.jsx("input",l$1({ref:b},v))}));
+function p(){return u||(u=1,"production"!==process.env.NODE_ENV&&function(){var e=React,r=Symbol.for("react.element"),t=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),s=Symbol.for("react.provider"),c=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),p=Symbol.for("react.suspense_list"),y=Symbol.for("react.memo"),d=Symbol.for("react.lazy"),m=Symbol.for("react.offscreen"),v=Symbol.iterator,g="@@iterator";var b=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function h(e){for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];!function(e,r,t){var n=b.ReactDebugCurrentFrame,o=n.getStackAddendum();""!==o&&(r+="%s",t=t.concat([o]));var a=t.map((function(e){return String(e)}));a.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,a);}("error",e,t);}var _,k=!1,w=!1,S=!1,j=!1,O=!1;function R(e){return e.displayName||"Context"}function E(e){if(null==e)return null;if("number"==typeof e.tag&&h("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case o:return "Fragment";case t:return "Portal";case i:return "Profiler";case a:return "StrictMode";case f:return "Suspense";case p:return "SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case c:return R(e)+".Consumer";case s:return R(e._context)+".Provider";case u:return function(e,r,t){var n=e.displayName;if(n)return n;var o=r.displayName||r.name||"";return ""!==o?t+"("+o+")":t}(e,e.render,"ForwardRef");case y:var r=e.displayName||null;return null!==r?r:E(e.type)||"Memo";case d:var n=e,l=n._payload,m=n._init;try{return E(m(l))}catch(e){return null}}return null}_=Symbol.for("react.module.reference");var P,T,x,$,N,C,D,F=Object.assign,I=0;function M(){}M.__reactDisabledLog=!0;var L,W=b.ReactCurrentDispatcher;function U(e,r,t){if(void 0===L)try{throw Error()}catch(e){var n=e.stack.trim().match(/\n( *(at )?)/);L=n&&n[1]||"";}return "\n"+L+e}var A,z=!1,Y="function"==typeof WeakMap?WeakMap:Map;function B(e,r){if(!e||z)return "";var t,n=A.get(e);if(void 0!==n)return n;z=!0;var o,a=Error.prepareStackTrace;Error.prepareStackTrace=void 0,o=W.current,W.current=null,function(){if(0===I){P=console.log,T=console.info,x=console.warn,$=console.error,N=console.group,C=console.groupCollapsed,D=console.groupEnd;var e={configurable:!0,enumerable:!0,value:M,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e});}I++;}();try{if(r){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(i,[]);}catch(e){t=e;}Reflect.construct(e,[],i);}else {try{i.call();}catch(e){t=e;}e.call(i.prototype);}}else {try{throw Error()}catch(e){t=e;}e();}}catch(r){if(r&&t&&"string"==typeof r.stack){for(var s=r.stack.split("\n"),c=t.stack.split("\n"),u=s.length-1,f=c.length-1;u>=1&&f>=0&&s[u]!==c[f];)f--;for(;u>=1&&f>=0;u--,f--)if(s[u]!==c[f]){if(1!==u||1!==f)do{if(u--,--f<0||s[u]!==c[f]){var l="\n"+s[u].replace(" at new "," at ");return e.displayName&&l.includes("<anonymous>")&&(l=l.replace("<anonymous>",e.displayName)),"function"==typeof e&&A.set(e,l),l}}while(u>=1&&f>=0);break}}}finally{z=!1,W.current=o,function(){if(0==--I){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:F({},e,{value:P}),info:F({},e,{value:T}),warn:F({},e,{value:x}),error:F({},e,{value:$}),group:F({},e,{value:N}),groupCollapsed:F({},e,{value:C}),groupEnd:F({},e,{value:D})});}I<0&&h("disabledDepth fell below zero. This is a bug in React. Please file an issue.");}(),Error.prepareStackTrace=a;}var p=e?e.displayName||e.name:"",y=p?U(p):"";return "function"==typeof e&&A.set(e,y),y}function V(e,r,t){if(null==e)return "";if("function"==typeof e)return B(e,!(!(n=e.prototype)||!n.isReactComponent));var n;if("string"==typeof e)return U(e);switch(e){case f:return U("Suspense");case p:return U("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case u:return B(e.render,!1);case y:return V(e.type,r,t);case d:var o=e,a=o._payload,i=o._init;try{return V(i(a),r,t)}catch(e){}}return ""}A=new Y;var q=Object.prototype.hasOwnProperty,H={},J=b.ReactDebugCurrentFrame;function X(e){if(e){var r=e._owner,t=V(e.type,e._source,r?r.type:null);J.setExtraStackFrame(t);}else J.setExtraStackFrame(null);}var G=Array.isArray;function K(e){return G(e)}function Q(e){return ""+e}function Z(e){if(function(e){try{return Q(e),!1}catch(e){return !0}}(e))return h("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",function(e){return "function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object"}(e)),Q(e)}var ee,re,te,ne=b.ReactCurrentOwner,oe={key:!0,ref:!0,__self:!0,__source:!0};te={};var ae=function(e,t,n,o,a,i,s){var c={$$typeof:r,type:e,key:t,ref:n,props:s,_owner:i,_store:{}};return Object.defineProperty(c._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(c,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(c,"_source",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.freeze&&(Object.freeze(c.props),Object.freeze(c)),c};function ie(e,r,t,n,o){var a,i={},s=null,c=null;for(a in void 0!==t&&(Z(t),s=""+t),function(e){if(q.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return !1}return void 0!==e.key}(r)&&(Z(r.key),s=""+r.key),function(e){if(q.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return !1}return void 0!==e.ref}(r)&&(c=r.ref,function(e,r){if("string"==typeof e.ref&&ne.current&&r&&ne.current.stateNode!==r){var t=E(ne.current.type);te[t]||(h('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',E(ne.current.type),e.ref),te[t]=!0);}}(r,o)),r)q.call(r,a)&&!oe.hasOwnProperty(a)&&(i[a]=r[a]);if(e&&e.defaultProps){var u=e.defaultProps;for(a in u)void 0===i[a]&&(i[a]=u[a]);}if(s||c){var f="function"==typeof e?e.displayName||e.name||"Unknown":e;s&&function(e,r){var t=function(){ee||(ee=!0,h("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r));};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0});}(i,f),c&&function(e,r){var t=function(){re||(re=!0,h("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r));};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0});}(i,f);}return ae(e,s,c,o,n,ne.current,i)}var se,ce=b.ReactCurrentOwner,ue=b.ReactDebugCurrentFrame;function fe(e){if(e){var r=e._owner,t=V(e.type,e._source,r?r.type:null);ue.setExtraStackFrame(t);}else ue.setExtraStackFrame(null);}function le(e){return "object"==typeof e&&null!==e&&e.$$typeof===r}function pe(){if(ce.current){var e=E(ce.current.type);if(e)return "\n\nCheck the render method of `"+e+"`."}return ""}se=!1;var ye={};function de(e,r){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var t=function(e){var r=pe();if(!r){var t="string"==typeof e?e:e.displayName||e.name;t&&(r="\n\nCheck the top-level render call using <"+t+">.");}return r}(r);if(!ye[t]){ye[t]=!0;var n="";e&&e._owner&&e._owner!==ce.current&&(n=" It was passed a child from "+E(e._owner.type)+"."),fe(e),h('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),fe(null);}}}function me(e,r){if("object"==typeof e)if(K(e))for(var t=0;t<e.length;t++){var n=e[t];le(n)&&de(n,r);}else if(le(e))e._store&&(e._store.validated=!0);else if(e){var o=function(e){if(null===e||"object"!=typeof e)return null;var r=v&&e[v]||e[g];return "function"==typeof r?r:null}(e);if("function"==typeof o&&o!==e.entries)for(var a,i=o.call(e);!(a=i.next()).done;)le(a.value)&&de(a.value,r);}}function ve(e){var r,t=e.type;if(null!=t&&"string"!=typeof t){if("function"==typeof t)r=t.propTypes;else {if("object"!=typeof t||t.$$typeof!==u&&t.$$typeof!==y)return;r=t.propTypes;}if(r){var n=E(t);!function(e,r,t,n,o){var a=Function.call.bind(q);for(var i in e)if(a(e,i)){var s=void 0;try{if("function"!=typeof e[i]){var c=Error((n||"React class")+": "+t+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw c.name="Invariant Violation",c}s=e[i](r,i,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");}catch(e){s=e;}!s||s instanceof Error||(X(o),h("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,i,typeof s),X(null)),s instanceof Error&&!(s.message in H)&&(H[s.message]=!0,X(o),h("Failed %s type: %s",t,s.message),X(null));}}(r,e.props,"prop",n,e);}else if(void 0!==t.PropTypes&&!se){se=!0,h("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",E(t)||"Unknown");}"function"!=typeof t.getDefaultProps||t.getDefaultProps.isReactClassApproved||h("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");}}function ge(e,t,n,l,v,g){var b=function(e){return "string"==typeof e||"function"==typeof e||!!(e===o||e===i||O||e===a||e===f||e===p||j||e===m||k||w||S)||"object"==typeof e&&null!==e&&(e.$$typeof===d||e.$$typeof===y||e.$$typeof===s||e.$$typeof===c||e.$$typeof===u||e.$$typeof===_||void 0!==e.getModuleId)}(e);if(!b){var R="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(R+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var P,T=function(e){return void 0!==e?"\n\nCheck your code at "+e.fileName.replace(/^.*[\\\/]/,"")+":"+e.lineNumber+".":""}(v);R+=T||pe(),null===e?P="null":K(e)?P="array":void 0!==e&&e.$$typeof===r?(P="<"+(E(e.type)||"Unknown")+" />",R=" Did you accidentally export a JSX literal instead of a component?"):P=typeof e,h("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",P,R);}var x=ie(e,t,n,v,g);if(null==x)return x;if(b){var $=t.children;if(void 0!==$)if(l)if(K($)){for(var N=0;N<$.length;N++)me($[N],e);Object.freeze&&Object.freeze($);}else h("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else me($,e);}return e===o?function(e){for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if("children"!==n&&"key"!==n){fe(e),h("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),fe(null);break}}null!==e.ref&&(fe(e),h("Invalid attribute `ref` supplied to `React.Fragment`."),fe(null));}(x):ve(x),x}var be=function(e,r,t){return ge(e,r,t,!1)},he=function(e,r,t){return ge(e,r,t,!0)};l.Fragment=o,l.jsx=be,l.jsxs=he;}()),l}f={get exports(){return s},set exports(e){s=e;}},"production"===process.env.NODE_ENV?f.exports=function(){if(i)return c;i=1;var e=React,r=Symbol.for("react.element"),t=Symbol.for("react.fragment"),o=Object.prototype.hasOwnProperty,a=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function u(e,t,n){var i,c={},u=null,f=null;for(i in void 0!==n&&(u=""+n),void 0!==t.key&&(u=""+t.key),void 0!==t.ref&&(f=t.ref),t)o.call(t,i)&&!s.hasOwnProperty(i)&&(c[i]=t[i]);if(e&&e.defaultProps)for(i in t=e.defaultProps)void 0===c[i]&&(c[i]=t[i]);return {$$typeof:r,type:e,key:u,ref:f,props:c,_owner:a.current}}return c.Fragment=t,c.jsx=u,c.jsxs=u,c}():f.exports=p();forwardRef((function(n,a){var i,c,u=n.component,f=n.mask,l=n.replacement,p=n.showMask,y$1=n.separate,d=n.modify,m=n.onMask,v=o(n,["component","mask","replacement","showMask","separate","modify","onMask"]),g=y({mask:f,replacement:l,showMask:p,separate:y$1,modify:d,onMask:m}),b=useCallback((function(e){i.current=e,"function"==typeof c?c(e):"object"==typeof c&&null!==c&&(c.current=e);}),[i=g,c=a]);return u?s.jsx(u,l$1({ref:b},v)):s.jsx("input",l$1({ref:b},v))}));
 
 var InputGroupForm = function (props) {
     var _a;
@@ -526,10 +526,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$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), leading !== undefined && get(styles$g.leading, key), trailing !== undefined && get(styles$g.trailing, key), type && get(styles$g[type], key), isTouched === true && !isValid && get(styles$g.invalid, key), isDisabled && get(styles$g.disabled, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$h.base, key), leading !== undefined && get(styles$h.leading, key), trailing !== undefined && get(styles$h.trailing, key), type && get(styles$h[type], key), isTouched === true && !isValid && get(styles$h.invalid, key), isDisabled && get(styles$h.disabled, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -538,7 +538,7 @@ var InputGroupForm = function (props) {
     return (jsxs("div", __assign({ className: styles.container }, { children: [jsxs("div", __assign({ className: styles.head }, { children: [label && (jsx("label", __assign({ htmlFor: name, className: styles.label }, { children: label }))), !required && !isRequired && typeof label === 'string' && (jsx("span", __assign({ className: styles.hint }, { children: "Optional" }))), required && required({ isRequired: isRequired })] })), jsxs("div", __assign({ className: styles.body }, { children: [leading && jsx("div", __assign({ className: styles.leading }, { children: leading })), jsx("input", { type: mask !== undefined ? 'text' : htmlType, ref: mask && ref, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, 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", __assign({ className: styles.trailing }, { children: trailing }))), isTouched && !isValid && (jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon })))] })), jsxs("div", __assign({ className: styles.foot }, { children: [description && !(error && isTouched) && (jsx("p", __assign({ className: styles.description }, { children: description }))), error && isTouched && jsx("p", __assign({ className: styles.error }, { children: error }))] }))] })));
 };
 
-var base$d = {
+var base$e = {
     container: '',
     head: 'flex justify-between',
     body: 'relative rounded-md',
@@ -551,11 +551,11 @@ var base$d = {
     description: 'text-gray-400 text-xs mt-1',
     error: 'text-red-500 text-xs ml-5 mt-1',
 };
-var leading = {
+var leading$1 = {
     input: 'pl-10',
 };
-var trailing = {};
-var normal$2 = {
+var trailing$1 = {};
+var normal$3 = {
     label: 'leading-6 text-sm mb-2',
     hint: 'leading-6',
     leading: 'pl-3',
@@ -563,14 +563,14 @@ var normal$2 = {
     trailing: 'pr-3',
     description: 'mt-2 text-sm',
 };
-var inset = {
+var inset$1 = {
     container: 'rounded-md px-3 pt-2.5 pb-1.5 shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary-600',
     label: 'text-xs',
     hint: 'text-xs',
     input: 'border-0 !ring-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0',
     description: 'hidden',
 };
-var overlapping = {
+var overlapping$1 = {
     container: 'relative',
     head: ' absolute flex justify-between items-center left-0 -top-2 right-0 mx-2 z-10 w-full',
     label: 'inline-block bg-white px-1 text-xs font-medium text-gray-900 ',
@@ -578,49 +578,49 @@ var overlapping = {
     input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
     description: 'hidden',
 };
-var pill = {
+var pill$1 = {
     head: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6',
     foot: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mt-1 pr-6',
     input: 'block w-full rounded-full border-0 px-4 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
     trailing: 'pr-2',
     description: 'text-xs',
 };
-var floored = {
+var floored$1 = {
     body: 'relative mt-2',
     label: 'block text-sm font-medium leading-6 text-gray-900',
     input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0',
     description: 'text-xs mt-2',
 };
-var invalid = {
+var invalid$1 = {
     container: 'ring-red-500',
     input: 
     // 'block w-full border border-transparent text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:leading-6 pr-10',
     'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 pr-10',
     description: 'text-sm text-red-600',
 };
-var disabled = {
+var disabled$1 = {
     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 sm:text-sm sm:leading-6',
 };
-var styles$g = {
-    base: base$d,
-    leading: leading,
-    trailing: trailing,
-    normal: normal$2,
-    inset: inset,
-    overlapping: overlapping,
-    pill: pill,
-    floored: floored,
-    invalid: invalid,
-    disabled: disabled,
+var styles$h = {
+    base: base$e,
+    leading: leading$1,
+    trailing: trailing$1,
+    normal: normal$3,
+    inset: inset$1,
+    overlapping: overlapping$1,
+    pill: pill$1,
+    floored: floored$1,
+    invalid: invalid$1,
+    disabled: disabled$1,
 };
 
 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$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), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$g.base, key), type && get(styles$g[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -643,7 +643,7 @@ var ContainerLayout = function (props) {
     return handleGenerateComponent();
 };
 
-var base$c = {
+var base$d = {
     container: '',
     content: '',
 };
@@ -657,8 +657,8 @@ var center$3 = {
 var fill$1 = {
     container: 'max-w-7xl mx-auto sm:px-6 lg:px-8',
 };
-var styles$f = {
-    base: base$c,
+var styles$g = {
+    base: base$d,
     break: breakStyles,
     center: center$3,
     fill: fill$1,
@@ -667,10 +667,10 @@ var styles$f = {
 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$e.base);
-        var keys = calculateNestedKeys(styles$e.base);
+        var result = deepCopyObject(styles$f.base);
+        var keys = calculateNestedKeys(styles$f.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$e.base, key), type && get(styles$e[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$f.base, key), type && get(styles$f[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -678,7 +678,7 @@ var DividerLayout = function (props) {
     return (jsxs("div", __assign({ className: styles.container }, { children: [jsx("div", __assign({ className: styles.head, "aria-hidden": "true" }, { children: jsx("div", { className: styles.line }) })), jsx("div", __assign({ className: styles.body }, { children: jsx("div", __assign({ className: styles.content }, { children: children })) }))] })));
 };
 
-var base$b = {
+var base$c = {
     container: 'relative',
     head: 'absolute inset-0 flex items-center',
     line: 'w-full border-t border-gray-300',
@@ -694,8 +694,8 @@ var center$2 = {
 var right = {
     body: 'justify-end',
 };
-var styles$e = {
-    base: base$b,
+var styles$f = {
+    base: base$c,
     left: left,
     center: center$2,
     right: right,
@@ -704,10 +704,10 @@ var styles$e = {
 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$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;
     };
@@ -718,7 +718,7 @@ var ListContainerLayout = function (props) {
             }) })) })));
 };
 
-var base$a = {
+var base$b = {
     container: '',
     list: '',
     item: '',
@@ -749,8 +749,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$d = {
-    base: base$a,
+var styles$e = {
+    base: base$b,
     fill: fill,
     'fill-sticky': fillSticky,
     center: center$1,
@@ -762,10 +762,10 @@ var styles$d = {
 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$c.base);
-        var keys = calculateNestedKeys(styles$c.base);
+        var result = deepCopyObject(styles$d.base);
+        var keys = calculateNestedKeys(styles$d.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$c.base, key), type && get(styles$c[type], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$d.base, key), type && get(styles$d[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -773,7 +773,7 @@ var MediaObjectLayout = function (props) {
     var handleGenerateComponent = function () {
         var result = (jsx("svg", __assign({ className: styles.svg, preserveAspectRatio: "none", stroke: "currentColor", fill: "none", viewBox: "0 0 200 200", "aria-hidden": "true" }, { children: jsx("path", { vectorEffect: "non-scaling-stroke", strokeWidth: 1, d: "M0 0l200 200M0 200L200 0" }) })));
         if (customFigure) {
-            result = n.cloneElement(customFigure, {
+            result = React.cloneElement(customFigure, {
                 className: styles.svg,
             });
         }
@@ -783,7 +783,7 @@ var MediaObjectLayout = function (props) {
     return (jsxs("div", __assign({ className: styles.container }, { children: [jsx("div", __assign({ className: styles.figure }, { children: $svg })), jsxs("div", { children: [jsx("h4", __assign({ className: styles.title }, { children: title })), jsx("p", __assign({ className: styles.paragraph }, { children: paragraph }))] })] })));
 };
 
-var base$9 = {
+var base$a = {
     container: '',
     figure: 'mr-4 flex-shrink-0',
     svg: 'h-16 w-16 border border-gray-300 bg-white text-gray-300',
@@ -838,8 +838,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$c = {
-    base: base$9,
+var styles$d = {
+    base: base$a,
     top: top,
     'top-reversed': topReversed,
     center: center,
@@ -857,10 +857,10 @@ var styles$c = {
 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$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;
     };
@@ -870,10 +870,10 @@ var Container$2 = function (props) {
 var Section = function (props) {
     var children = props.children, 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;
     };
@@ -885,19 +885,19 @@ var LayoutPanel = {
     Section: Section,
 };
 
-var base$8 = {
+var base$9 = {
     container: 'bg-white overflow-hidden shadow',
     section: 'px-4 py-5 sm:px-6',
 };
-var normal$1 = {
+var normal$2 = {
     container: 'rounded-lg',
 };
 var sticky$1 = {
     container: 'sm:rounded-lg',
 };
-var styles$b = {
-    base: base$8,
-    normal: normal$1,
+var styles$c = {
+    base: base$9,
+    normal: normal$2,
     sticky: sticky$1,
 };
 
@@ -1001,10 +1001,10 @@ var PanelPaginationNavigation = function (props) {
         }
     }, [defaultValue]);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$a.base);
-        var keys = calculateNestedKeys(styles$a.base);
+        var result = deepCopyObject(styles$b.base);
+        var keys = calculateNestedKeys(styles$b.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$a.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$b.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1044,7 +1044,7 @@ var PanelPaginationNavigation = function (props) {
     return (jsxs("div", __assign({ className: styles.container }, { children: [jsxs("div", __assign({ className: "flex flex-1 justify-between sm:hidden" }, { children: [jsx("button", __assign({ className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); } }, { children: "Previous" })), jsx("button", __assign({ className: toClassName(styles.mobile.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); } }, { children: "Next" }))] })), jsxs("div", __assign({ className: styles.desktop.container }, { children: [jsx("div", { children: jsx("div", __assign({ className: "text-sm text-gray-700" }, { children: children({ min: min, max: max, current: current }) })) }), jsx("div", { children: jsxs("nav", __assign({ className: styles.desktop.navigation, "aria-label": "Pagination" }, { children: [jsxs("button", __assign({ className: toClassName(styles.desktop.leftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); } }, { children: [jsx("span", __assign({ className: styles.label }, { children: "Previous" })), jsx(ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] })), component, jsxs("button", __assign({ className: toClassName(styles.desktop.rightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); } }, { children: [jsx("span", __assign({ className: styles.label }, { children: "Next" })), jsx(ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] }))] })) })] }))] })));
 };
 
-var base$7 = {
+var base$8 = {
     container: 'flex items-center justify-between border-t border-gray-200 bg-white py-3',
     mobile: {
         container: '',
@@ -1065,8 +1065,8 @@ var base$7 = {
     label: 'sr-only',
     icon: 'w-5 h-5',
 };
-var styles$a = {
-    base: base$7,
+var styles$b = {
+    base: base$8,
 };
 
 var TableList = function (props) {
@@ -1074,10 +1074,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$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), type && get(styles$9[type], key), hasStickyHeader && get(styles$9.sticky, key), hasVerticalSeparators && get(styles$9.separated, key), areControlsVisible && get(styles$9.controlled, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$a.base, key), type && get(styles$a[type], key), hasStickyHeader && get(styles$a.sticky, key), hasVerticalSeparators && get(styles$a.separated, key), areControlsVisible && get(styles$a.controlled, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1202,7 +1202,7 @@ var TableList = function (props) {
                         : { container: 'mt-4' }, onChange: onPaginate }, { children: children }))] })) }));
 };
 
-var base$6 = {
+var base$7 = {
     container: 'px-4 sm:px-6 lg:px-8',
     head: {
         container: 'sm:flex sm:items-center',
@@ -1256,7 +1256,7 @@ var base$6 = {
         },
     },
 };
-var normal = {
+var normal$1 = {
     body: {
         content: 'inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8',
         styleWrapper: 'relative',
@@ -1314,9 +1314,9 @@ var controlled = {
         container: '!flex',
     },
 };
-var styles$9 = {
-    base: base$6,
-    normal: normal,
+var styles$a = {
+    base: base$7,
+    normal: normal$1,
     panel: panel$1,
     full: full,
     sticky: sticky,
@@ -1361,30 +1361,30 @@ var TableList2 = function (props) {
             onChange && onChange(state);
         }
     }, [onChange, state]);
-    return (jsxs("div", __assign({ className: styles$8.container }, { children: [jsx("div", __assign({ className: styles$8.head }, { children: head && head(state) })), jsx("div", __assign({ className: "" }, { children: jsx("div", __assign({ className: "flow-root" }, { children: jsx("div", __assign({ className: "overflow-scroll" }, { children: jsxs("div", __assign({ className: "inline-block min-w-full align-middle" }, { children: [jsxs("table", __assign({ className: "min-w-full border-separate border-spacing-0 " }, { children: [jsx("thead", __assign({ className: "" }, { children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsx("tr", { children: headerGroup.headers.map(function (header) { return (jsxs("th", __assign({ colSpan: header.colSpan, className: toClassName(styles$8.body.table.head.cell, 'border-b', header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler(), style: {
+    return (jsxs("div", __assign({ className: styles$9.container }, { children: [jsx("div", __assign({ className: styles$9.head }, { children: head && head(state) })), jsx("div", __assign({ className: "" }, { children: jsx("div", __assign({ className: "flow-root" }, { children: jsx("div", __assign({ className: "overflow-scroll" }, { children: jsxs("div", __assign({ className: "inline-block min-w-full align-middle" }, { children: [jsxs("table", __assign({ className: "min-w-full border-separate border-spacing-0 " }, { children: [jsx("thead", __assign({ className: "" }, { children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsx("tr", { children: headerGroup.headers.map(function (header) { return (jsxs("th", __assign({ colSpan: header.colSpan, className: toClassName(styles$9.body.table.head.cell, 'border-b', header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler(), style: {
                                                         minWidth: header.column.columnDef.size
                                                             ? "".concat(header.column.columnDef.size, "px")
                                                             : 'auto',
                                                     } }, { children: [header.isPlaceholder
                                                             ? null
-                                                            : flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsx("span", __assign({ className: toClassName(styles$8.sortIndicator.container, header.column.getIsSorted()
-                                                                ? styles$8.sortIndicator.isSorted
-                                                                : styles$8.sortIndicator.isNotSorted) }, { children: jsx(ChevronDownIcon, { className: toClassName(styles$8.sortIndicator.icon.container, header.column.getIsSorted() === 'asc' &&
+                                                            : flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsx("span", __assign({ className: toClassName(styles$9.sortIndicator.container, header.column.getIsSorted()
+                                                                ? styles$9.sortIndicator.isSorted
+                                                                : styles$9.sortIndicator.isNotSorted) }, { children: jsx(ChevronDownIcon, { className: toClassName(styles$9.sortIndicator.icon.container, header.column.getIsSorted() === 'asc' &&
                                                                     '-scale-100'), "aria-hidden": "true" }) })))] }), header.id)); }) }, headerGroup.id)); }) })), !isLoading && (jsx("tbody", __assign({ className: "border" }, { children: table === null || table === void 0 ? void 0 : table.getRowModel().rows.map(function (row, index) {
                                                 var _a;
-                                                return (jsx("tr", __assign({ className: toClassName(styles$8.body.table.body.row, ((_a = config.options) === null || _a === void 0 ? void 0 : _a.isStriped) &&
+                                                return (jsx("tr", __assign({ className: toClassName(styles$9.body.table.body.row, ((_a = config.options) === null || _a === void 0 ? void 0 : _a.isStriped) &&
                                                         index % 2 === 0 &&
                                                         'bg-gray-50') }, { children: row.getVisibleCells().map(function (cell) {
                                                         var _a, _b, _c;
-                                                        return (jsx("td", __assign({ className: toClassName(styles$8.body.table.body.cell, ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.hasStickyHeader) &&
+                                                        return (jsx("td", __assign({ className: toClassName(styles$9.body.table.body.cell, ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.hasStickyHeader) &&
                                                                 index !==
                                                                     ((_c = (_b = table === null || table === void 0 ? void 0 : table.getState()) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.pageSize) - 1 &&
                                                                 'border-b border-gray-200') }, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }), cell.id));
                                                     }) }), row.id));
-                                            }) })))] })), isLoading && (jsx("div", __assign({ className: "flex flex-col gap-y-2 w-full pt-5" }, { children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsx("div", { className: "w-20 h-14 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-14 rounded-md bg-gray-100 animate-pulse" })] }), index)); }) })))] })) })) })) })), jsx("div", __assign({ className: styles$8.foot }, { children: foot && foot(state) }))] })));
+                                            }) })))] })), isLoading && (jsx("div", __assign({ className: "flex flex-col gap-y-2 w-full pt-5" }, { children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsx("div", { className: "w-20 h-14 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-14 rounded-md bg-gray-100 animate-pulse" })] }), index)); }) })))] })) })) })) })), jsx("div", __assign({ className: styles$9.foot }, { children: foot && foot(state) }))] })));
 };
 
-var styles$8 = {
+var styles$9 = {
     container: '',
     head: '',
     body: {
@@ -1427,10 +1427,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$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$1(result, key, toClassName(get$1(styles$7.base, key), type && get$1(styles$7[type], key), get$1(stylesOverrides, key)));
+            set$1(result, key, toClassName(get$1(styles$8.base, key), type && get$1(styles$8[type], key), get$1(stylesOverrides, key)));
         });
         return result;
     };
@@ -1466,7 +1466,7 @@ var BreadcrumbsNavigation = function (props) {
     return (jsx("nav", __assign({ className: styles.container, "aria-label": "Breadcrumb" }, { children: jsxs("ol", __assign({ className: styles.list }, { children: [jsx(HomeLink, {}), pages.map(function (page) { return (jsx(PageLink, { page: page }, page.name)); })] })) })));
 };
 
-var base$5 = {
+var base$6 = {
     container: 'flex',
     list: 'flex',
     separator: '',
@@ -1551,8 +1551,8 @@ var bar = {
         link: '',
     },
 };
-var styles$7 = {
-    base: base$5,
+var styles$8 = {
+    base: base$6,
     slashes: slashes,
     chevrons: chevrons,
     panel: panel,
@@ -1563,10 +1563,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$6.base);
-        var keys = calculateNestedKeys(styles$6.base);
+        var result = deepCopyObject(styles$7.base);
+        var keys = calculateNestedKeys(styles$7.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$6.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$7.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1601,7 +1601,7 @@ var PagePaginationNavigation = function (props) {
     return (jsxs("nav", __assign({ className: styles.container }, { children: [jsx("div", __assign({ className: styles.left.container }, { children: jsxs("button", __assign({ 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", __assign({ className: styles.center.container }, { children: component })), jsx("div", __assign({ className: styles.right.container }, { children: jsxs("button", __assign({ 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$4 = {
+var base$5 = {
     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',
@@ -1623,18 +1623,18 @@ var base$4 = {
     },
     divider: 'inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500',
 };
-var styles$6 = {
-    base: base$4,
+var styles$7 = {
+    base: base$5,
 };
 
 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$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), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$6.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1644,10 +1644,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$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), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$6.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1690,13 +1690,13 @@ var List$1 = function (props) {
                             return (jsx("option", __assign({ value: child.props.accessor }, { children: child.props.children }), (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.accessor));
                         }) }))] })), jsx("div", __assign({ className: styles.list.body }, { children: jsx("nav", __assign({ className: styles.list.navigation }, { children: children })) }))] })));
 };
-var Item$1 = function (props) {
+var Item$2 = 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;
     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), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$6.base, key), type && get(styles$6[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1713,11 +1713,11 @@ var View$1 = function (props) {
 var TabNavigation = {
     Container: Container$1,
     List: List$1,
-    Item: Item$1,
+    Item: Item$2,
     View: View$1,
 };
 
-var base$3 = {
+var base$4 = {
     container: '',
     list: {
         container: '',
@@ -1754,8 +1754,8 @@ var buttons = {
         inactive: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
     },
 };
-var styles$5 = {
-    base: base$3,
+var styles$6 = {
+    base: base$4,
     underline: underline,
     pills: pills,
     buttons: buttons,
@@ -1782,11 +1782,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", __assign({ className: toClassName(styles$4.list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list) }, { children: children })));
+    return (jsx("nav", __assign({ className: toClassName(styles$5.list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list) }, { children: children })));
 };
-var Item = function (props) {
+var Item$1 = 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, __assign({ href: href, className: toClassName(styles$4.item[isCurrent ? 'active' : 'notActive'], styles$4.item.base), onClick: onClick }, { children: children })));
+    return (jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$5.item[isCurrent ? 'active' : 'notActive'], styles$5.item.base), onClick: onClick }, { children: children })));
 };
 var View = function (props) {
     var children = props.children;
@@ -1795,11 +1795,11 @@ var View = function (props) {
 var VerticalNavigation = {
     Container: Container,
     List: List,
-    Item: Item,
+    Item: Item$1,
     View: View,
 };
 
-var styles$4 = {
+var styles$5 = {
     container: '',
     list: 'space-y-1',
     item: {
@@ -1817,10 +1817,10 @@ var ModalOverlay = function (props) {
         handleClose: function () { return setIsOpen(false); },
     }); }, []);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$3.base);
-        var keys = calculateNestedKeys(styles$3.base);
+        var result = deepCopyObject(styles$4.base);
+        var keys = calculateNestedKeys(styles$4.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$3.base, key), size && get(styles$3[size], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$4.base, key), size && get(styles$4[size], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1838,7 +1838,7 @@ var ModalOverlay = function (props) {
     return (jsxs(Fragment$1, { children: [jsx(Transition.Root, __assign({ show: isOpen, as: Fragment }, { children: jsxs(Dialog, __assign({ as: "div", className: styles.container, onClose: setIsOpen }, { children: [jsx(Transition.Child, __assign({ 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", __assign({ className: styles.layout.container }, { children: jsx("div", __assign({ className: styles.layout.content }, { children: jsx(Transition.Child, __assign({ 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, __assign({ className: styles.panel.container }, { children: children(options) })) })) })) }))] })) })), trigger && trigger(options)] }));
 };
 
-var base$2 = {
+var base$3 = {
     container: 'relative z-10',
     background: {
         container: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
@@ -1892,8 +1892,8 @@ var xl$2 = {
         container: 'sm:max-w-4xl',
     },
 };
-var styles$3 = {
-    base: base$2,
+var styles$4 = {
+    base: base$3,
     xs: xs$2,
     sm: sm$2,
     md: md$2,
@@ -1904,10 +1904,10 @@ var styles$3 = {
 var NotificationOverlayContainer = function (_a) {
     var children = _a.children, stylesOverrides = _a.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$2.base);
-        var keys = calculateNestedKeys(styles$2.base);
+        var result = deepCopyObject(styles$3.base);
+        var keys = calculateNestedKeys(styles$3.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$2.base, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$3.base, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1922,10 +1922,10 @@ var NotificationOverlayItem = function (props) {
         onClose: function () { return setIsOpen(false); },
     }); }, []);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$2.base);
-        var keys = calculateNestedKeys(styles$2.base);
+        var result = deepCopyObject(styles$3.base);
+        var keys = calculateNestedKeys(styles$3.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$2.base, key), size && get(styles$2[size], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$3.base, key), size && get(styles$3[size], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1937,7 +1937,7 @@ var NotificationOverlay = {
     Item: NotificationOverlayItem,
 };
 
-var base$1 = {
+var base$2 = {
     container: {
         outer: 'pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-20',
         inner: 'flex w-full flex-col items-center space-y-4 sm:items-end',
@@ -1997,8 +1997,8 @@ var xl$1 = {
         },
     },
 };
-var styles$2 = {
-    base: base$1,
+var styles$3 = {
+    base: base$2,
     xs: xs$1,
     sm: sm$1,
     md: md$1,
@@ -2014,10 +2014,10 @@ var SlideOverOverlay = function (props) {
         onClose: function () { return setIsOpen(false); },
     }); }, []);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$1.base);
-        var keys = calculateNestedKeys(styles$1.base);
+        var result = deepCopyObject(styles$2.base);
+        var keys = calculateNestedKeys(styles$2.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$1.base, key), size && get(styles$1[size], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$2.base, key), size && get(styles$2[size], key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2025,7 +2025,7 @@ var SlideOverOverlay = function (props) {
     return (jsxs(Fragment$1, { children: [jsx(Transition.Root, __assign({ show: isOpen, as: Fragment }, { children: jsxs(Dialog, __assign({ as: "div", className: styles.container, onClose: setIsOpen }, { children: [jsx(Transition.Child, __assign({ 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", __assign({ className: styles.layout.container }, { children: jsx("div", __assign({ className: styles.layout.content }, { children: jsx("div", __assign({ className: styles.layout.inner }, { children: jsx(Transition.Child, __assign({ 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, __assign({ className: styles.panel.container }, { children: children(options) })) })) })) })) }))] })) })), trigger && trigger(options)] }));
 };
 
-var base = {
+var base$1 = {
     container: 'relative z-20',
     background: {
         container: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
@@ -2080,8 +2080,8 @@ var xl = {
         container: 'sm:max-w-4xl',
     },
 };
-var styles$1 = {
-    base: base,
+var styles$2 = {
+    base: base$1,
     xs: xs,
     sm: sm,
     md: md,
@@ -2102,17 +2102,17 @@ var TableColumnOptionsCustom = function (props) {
         ids.splice(location, 0, column.id);
         setColumnOrder(ids);
     }, []);
-    return (jsx(DropdownElement.Container, __assign({ trigger: trigger }, { children: jsx("div", __assign({ className: styles.controls.content }, { children: table.getAllLeafColumns().map(function (column, index) {
+    return (jsx(DropdownElement.Container, __assign({ trigger: trigger }, { children: jsx("div", __assign({ className: styles$1.controls.content }, { children: table.getAllLeafColumns().map(function (column, index) {
                 var canSort = column === null || column === void 0 ? void 0 : column.getCanSort();
-                return (jsx(DropdownElement.Item, { children: function () { return (jsxs("div", __assign({ className: toClassName(styles.controls.dropdown.container, !canSort && 'hidden') }, { children: [jsx("input", { className: styles.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsx("label", __assign({ className: styles.controls.dropdown.label }, { children: column.columnDef.header })), jsxs("div", __assign({ className: styles.controls.dropdown.actions }, { children: [jsx(ChevronDownIcon$1, { className: styles.controls.dropdown.upIcon, onClick: function () {
+                return (jsx(DropdownElement.Item, { children: function () { return (jsxs("div", __assign({ className: toClassName(styles$1.controls.dropdown.container, !canSort && 'hidden') }, { children: [jsx("input", { className: styles$1.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsx("label", __assign({ className: styles$1.controls.dropdown.label }, { children: column.columnDef.header })), jsxs("div", __assign({ className: styles$1.controls.dropdown.actions }, { children: [jsx(ChevronDownIcon$1, { className: styles$1.controls.dropdown.upIcon, onClick: function () {
                                             return handleUpdateColumnOrder(table, column, index - 1, setColumnOrder);
-                                        } }), jsx(ChevronDownIcon$1, { className: styles.controls.dropdown.downIcon, onClick: function () {
+                                        } }), jsx(ChevronDownIcon$1, { className: styles$1.controls.dropdown.downIcon, onClick: function () {
                                             return handleUpdateColumnOrder(table, column, index + 1, setColumnOrder);
                                         } })] }))] }))); } }, column.id));
             }) })) })));
 };
 
-var styles = {
+var styles$1 = {
     container: '',
     controls: {
         container: 'flex-row justify-between z-10 relative mb-4 gap-2 hidden',
@@ -2142,5 +2142,607 @@ var TableExcelExportCustom = function (props) {
     return jsx("div", { children: children({ handleExport: handleExport }) });
 };
 
-export { AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, ContainerLayout, DividerLayout, DropdownElement, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SlideOverOverlay, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, VerticalNavigation, createColumnHelper };
+const COLORS = [
+    "blue",
+    "orange",
+    "yellow",
+    "red",
+    "purple",
+    "amber",
+    "lime",
+    "green",
+    "emerald",
+    "teal",
+    "cyan",
+    "sky",
+    "violet",
+    "indigo",
+    "purple",
+    "fuchsia",
+    "pink",
+    "rose"
+];
+const DEFAULT_THEME = "blue";
+const THEME_DATA = {
+    bg: {
+        blue: "bg-blue-500",
+        orange: "bg-orange-500",
+        yellow: "bg-yellow-500",
+        red: "bg-red-500",
+        purple: "bg-purple-500",
+        amber: "bg-amber-500",
+        lime: "bg-lime-500",
+        green: "bg-green-500",
+        emerald: "bg-emerald-500",
+        teal: "bg-teal-500",
+        cyan: "bg-cyan-500",
+        sky: "bg-sky-500",
+        indigo: "bg-indigo-500",
+        violet: "bg-violet-500",
+        fuchsia: "bg-fuchsia-500",
+        pink: "bg-pink-500",
+        rose: "bg-rose-500"
+    },
+    bgHover: {
+        blue: "hover:bg-blue-100",
+        orange: "hover:bg-orange-100",
+        yellow: "hover:bg-yellow-100",
+        red: "hover:bg-red-100",
+        purple: "hover:bg-purple-100",
+        amber: "hover:bg-amber-100",
+        lime: "hover:bg-lime-100",
+        green: "hover:bg-green-100",
+        emerald: "hover:bg-emerald-100",
+        teal: "hover:bg-teal-100",
+        cyan: "hover:bg-cyan-100",
+        sky: "hover:bg-sky-100",
+        indigo: "hover:bg-indigo-100",
+        violet: "hover:bg-violet-100",
+        fuchsia: "hover:bg-fuchsia-100",
+        pink: "hover:bg-pink-100",
+        rose: "hover:bg-rose-100"
+    },
+    ring: {
+        blue: "focus:ring-blue-500/20",
+        orange: "focus:ring-orange-500/20",
+        yellow: "focus:ring-yellow-500/20",
+        red: "focus:ring-red-500/20",
+        purple: "focus:ring-purple-500/20",
+        amber: "focus:ring-amber-500/20",
+        lime: "focus:ring-lime-500/20",
+        green: "focus:ring-green-500/20",
+        emerald: "focus:ring-emerald-500/20",
+        teal: "focus:ring-teal-500/20",
+        cyan: "focus:ring-cyan-500/20",
+        sky: "focus:ring-sky-500/20",
+        indigo: "focus:ring-indigo-500/20",
+        violet: "focus:ring-violet-500/20",
+        fuchsia: "focus:ring-fuchsia-500/20",
+        pink: "focus:ring-pink-500/20",
+        rose: "focus:ring-rose-500/20"
+    },
+    borderFocus: {
+        blue: "focus:border-blue-500",
+        orange: "focus:border-orange-500",
+        yellow: "focus:border-yellow-500",
+        red: "focus:border-red-500",
+        purple: "focus:border-purple-500",
+        amber: "focus:border-amber-500",
+        lime: "focus:border-lime-500",
+        green: "focus:border-green-500",
+        emerald: "focus:border-emerald-500",
+        teal: "focus:border-teal-500",
+        cyan: "focus:border-cyan-500",
+        sky: "focus:border-sky-500",
+        indigo: "focus:border-indigo-500",
+        violet: "focus:border-violet-500",
+        fuchsia: "focus:border-fuchsia-500",
+        pink: "focus:border-pink-500",
+        rose: "focus:border-rose-500"
+    },
+    text: {
+        blue: "text-blue-500",
+        orange: "text-orange-500",
+        yellow: "text-yellow-500",
+        red: "text-red-500",
+        purple: "text-purple-500",
+        amber: "text-amber-500",
+        lime: "text-lime-500",
+        green: "text-green-500",
+        emerald: "text-emerald-500",
+        teal: "text-teal-500",
+        cyan: "text-cyan-500",
+        sky: "text-sky-500",
+        indigo: "text-indigo-500",
+        violet: "text-violet-500",
+        fuchsia: "text-fuchsia-500",
+        pink: "text-pink-500",
+        rose: "text-rose-500"
+    },
+    textHover: {
+        blue: "hover:text-blue-500",
+        orange: "hover:text-orange-500",
+        yellow: "hover:text-yellow-500",
+        red: "hover:text-red-500",
+        purple: "hover:text-purple-500",
+        amber: "hover:text-amber-500",
+        lime: "hover:text-lime-500",
+        green: "hover:text-green-500",
+        emerald: "hover:text-emerald-500",
+        teal: "hover:text-teal-500",
+        cyan: "hover:text-cyan-500",
+        sky: "hover:text-sky-500",
+        indigo: "hover:text-indigo-500",
+        violet: "hover:text-violet-500",
+        fuchsia: "hover:text-fuchsia-500",
+        pink: "hover:text-pink-500",
+        rose: "hover:text-rose-500"
+    }
+};
+function useOnClickOutside(ref, handler) {
+    useEffect(() => {
+        const listener = (event) => {
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            handler(event);
+        };
+        document.addEventListener("mousedown", listener);
+        document.addEventListener("touchstart", listener);
+        return () => {
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
+        };
+    }, [ref, handler]);
+}
+const CloseIcon = ({ className = "" }) => {
+    return (React.createElement("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" })));
+};
+const ChevronIcon = ({ className = "" }) => {
+    return (React.createElement("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" })));
+};
+const SearchIcon = ({ className = "" }) => {
+    return (React.createElement("svg", { className: className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" })));
+};
+const SelectContext = createContext({
+    value: null,
+    handleValueChange: selected => {
+        console.log("selected:", selected);
+    },
+    formatGroupLabel: null,
+    formatOptionLabel: null,
+    classNames: undefined
+});
+const useSelectContext = () => {
+    return useContext(SelectContext);
+};
+const SelectProvider = ({ value, handleValueChange, otherData, children }) => {
+    const store = useMemo(() => {
+        return {
+            value,
+            handleValueChange,
+            formatGroupLabel: otherData && typeof otherData.formatGroupLabel === "function"
+                ? otherData.formatGroupLabel
+                : null,
+            formatOptionLabel: otherData && typeof otherData.formatOptionLabel === "function"
+                ? otherData.formatOptionLabel
+                : null,
+            classNames: otherData?.classNames || undefined
+        };
+    }, [handleValueChange, otherData, value]);
+    return React.createElement(SelectContext.Provider, { value: store }, children);
+};
+const DisabledItem = ({ children }) => {
+    const { classNames } = useContext(SelectContext);
+    return (React.createElement("div", { className: classNames && classNames.listDisabledItem
+            ? classNames.listDisabledItem
+            : "px-2 py-2 cursor-not-allowed truncate text-gray-400 select-none" }, children));
+};
+const Item = ({ item, primaryColor }) => {
+    const { classNames, value, handleValueChange, formatOptionLabel } = useSelectContext();
+    const isSelected = useMemo(() => {
+        return value !== null && !Array.isArray(value) && value.value === item.value;
+    }, [item.value, value]);
+    const textHoverColor = useMemo(() => {
+        if (COLORS.includes(primaryColor)) {
+            return THEME_DATA.textHover[primaryColor];
+        }
+        return THEME_DATA.textHover[DEFAULT_THEME];
+    }, [primaryColor]);
+    const bgColor = useMemo(() => {
+        if (COLORS.includes(primaryColor)) {
+            return THEME_DATA.bg[primaryColor];
+        }
+        return THEME_DATA.bg[DEFAULT_THEME];
+    }, [primaryColor]);
+    const bgHoverColor = useMemo(() => {
+        if (COLORS.includes(primaryColor)) {
+            return THEME_DATA.bgHover[primaryColor];
+        }
+        return THEME_DATA.bgHover[DEFAULT_THEME];
+    }, [primaryColor]);
+    const getItemClass = useCallback(() => {
+        const baseClass = "block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded";
+        const selectedClass = isSelected
+            ? `text-white ${bgColor}`
+            : `text-gray-500 ${bgHoverColor} ${textHoverColor}`;
+        return classNames && classNames.listItem
+            ? classNames.listItem({ isSelected })
+            : `${baseClass} ${selectedClass}`;
+    }, [bgColor, bgHoverColor, classNames, isSelected, textHoverColor]);
+    return (React.createElement(React.Fragment, null, formatOptionLabel ? (React.createElement("div", { onClick: () => handleValueChange(item) }, formatOptionLabel({ ...item, isSelected }))) : (React.createElement(React.Fragment, null, item.disabled ? (React.createElement(DisabledItem, null, item.label)) : (React.createElement("li", { "aria-selected": isSelected, role: "option", onClick: () => handleValueChange(item), className: getItemClass() }, item.label))))));
+};
+const GroupItem = ({ item, primaryColor }) => {
+    const { classNames, formatGroupLabel } = useSelectContext();
+    return (React.createElement(React.Fragment, null, item.options.length > 0 && (React.createElement(React.Fragment, null,
+        formatGroupLabel ? (React.createElement(React.Fragment, null, formatGroupLabel(item))) : (React.createElement("div", { className: classNames?.listGroupLabel
+                ? classNames.listGroupLabel
+                : "pr-2 py-2 cursor-default select-none truncate font-bold text-gray-700" }, item.label)),
+        item.options.map((item, index) => (React.createElement(Item, { primaryColor: primaryColor, key: index, item: item })))))));
+};
+const Options = ({ list, noOptionsMessage, text, isMultiple, value, primaryColor = DEFAULT_THEME }) => {
+    const { classNames } = useContext(SelectContext);
+    const filterByText = useCallback(() => {
+        const filterItem = (item) => {
+            return item.label.toLowerCase().indexOf(text.toLowerCase()) > -1;
+        };
+        let result = list.map(item => {
+            if ("options" in item) {
+                return {
+                    label: item.label,
+                    options: item.options.filter(filterItem)
+                };
+            }
+            return item;
+        });
+        result = result.filter(item => {
+            if ("options" in item) {
+                return item.options.length > 0;
+            }
+            return filterItem(item);
+        });
+        return result;
+    }, [text, list]);
+    const removeValues = useCallback((array) => {
+        if (!isMultiple) {
+            return array;
+        }
+        if (Array.isArray(value)) {
+            const valueId = value.map(item => item.value);
+            const filterItem = (item) => !valueId.includes(item.value);
+            let newArray = array.map(item => {
+                if ("options" in item) {
+                    return {
+                        label: item.label,
+                        options: item.options.filter(filterItem)
+                    };
+                }
+                return item;
+            });
+            newArray = newArray.filter(item => {
+                if ("options" in item) {
+                    return item.options.length > 0;
+                }
+                else {
+                    return filterItem(item);
+                }
+            });
+            return newArray;
+        }
+        return array;
+    }, [isMultiple, value]);
+    const filterResult = useMemo(() => {
+        return removeValues(filterByText());
+    }, [filterByText, removeValues]);
+    return (React.createElement("div", { role: "options", className: classNames && classNames.list ? classNames.list : "max-h-72 overflow-y-auto" },
+        filterResult.map((item, index) => (React.createElement(React.Fragment, { key: index }, "options" in item ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "px-2.5" },
+                React.createElement(GroupItem, { primaryColor: primaryColor || DEFAULT_THEME, item: item })),
+            index + 1 < filterResult.length && React.createElement("hr", { className: "my-1" }))) : (React.createElement("div", { className: "px-2.5" },
+            React.createElement(Item, { primaryColor: primaryColor || DEFAULT_THEME, item: item })))))),
+        filterResult.length === 0 && React.createElement(DisabledItem, null, noOptionsMessage)));
+};
+const SearchInput = forwardRef(function SearchInput({ placeholder = "", value = "", onChange, name = "" }, ref) {
+    const { classNames } = useContext(SelectContext);
+    return (React.createElement("div", { className: classNames && classNames.searchContainer
+            ? classNames.searchContainer
+            : "relative py-1 px-2.5" },
+        React.createElement(SearchIcon, { className: classNames && classNames.searchIcon
+                ? classNames.searchIcon
+                : "absolute w-5 h-5 mt-2.5 pb-0.5 ml-2 text-gray-500" }),
+        React.createElement("input", { ref: ref, className: classNames && classNames.searchBox
+                ? classNames.searchBox
+                : "w-full py-2 pl-8 text-sm text-gray-500 bg-gray-100 border border-gray-200 rounded focus:border-gray-200 focus:ring-0 focus:outline-none", type: "text", placeholder: placeholder, value: value, onChange: onChange, name: name })));
+});
+const Spinner = ({ primaryColor = DEFAULT_THEME }) => {
+    const spinnerColor = useMemo(() => {
+        if (COLORS.includes(primaryColor)) {
+            return THEME_DATA.text[primaryColor];
+        }
+        return THEME_DATA.text[DEFAULT_THEME];
+    }, [primaryColor]);
+    return (React.createElement("svg", { className: `animate-spin mr-0.5 h-5 w-5 ${spinnerColor}`, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" },
+        React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })));
+};
+const Select = ({ options = [], value = null, onChange, onSearchInputChange, placeholder = "Select...", searchInputPlaceholder = "Search...", isMultiple = false, isClearable = false, isSearchable = false, isDisabled = false, loading = false, menuIsOpen = false, noOptionsMessage = "No options found", primaryColor = DEFAULT_THEME, formatGroupLabel = null, formatOptionLabel = null, classNames }) => {
+    const [open, setOpen] = useState(menuIsOpen);
+    const [list, setList] = useState(options);
+    const [inputValue, setInputValue] = useState("");
+    const ref = useRef(null);
+    const searchBoxRef = useRef(null);
+    useEffect(() => {
+        const formatItem = (item) => {
+            if ("disabled" in item)
+                return item;
+            return {
+                ...item,
+                disabled: false
+            };
+        };
+        setList(options.map(item => {
+            if ("options" in item) {
+                return {
+                    label: item.label,
+                    options: item.options.map(formatItem)
+                };
+            }
+            else {
+                return formatItem(item);
+            }
+        }));
+    }, [options]);
+    useEffect(() => {
+        if (isSearchable) {
+            if (open) {
+                searchBoxRef.current?.select();
+            }
+            else {
+                setInputValue("");
+            }
+        }
+    }, [open, isSearchable]);
+    const toggle = useCallback(() => {
+        if (!isDisabled) {
+            setOpen(!open);
+        }
+    }, [isDisabled, open]);
+    const closeDropDown = useCallback(() => {
+        if (open)
+            setOpen(false);
+    }, [open]);
+    useOnClickOutside(ref, () => {
+        closeDropDown();
+    });
+    const onPressEnterOrSpace = useCallback((e) => {
+        e.preventDefault();
+        if ((e.code === "Enter" || e.code === "Space") && !isDisabled) {
+            toggle();
+        }
+    }, [isDisabled, toggle]);
+    const handleValueChange = useCallback((selected) => {
+        function update() {
+            if (!isMultiple && !Array.isArray(value)) {
+                closeDropDown();
+                onChange(selected);
+            }
+            if (isMultiple && (Array.isArray(value) || value === null)) {
+                onChange(value === null ? [selected] : [...value, selected]);
+            }
+        }
+        if (selected !== value) {
+            update();
+        }
+    }, [closeDropDown, isMultiple, onChange, value]);
+    const clearValue = useCallback((e) => {
+        e.stopPropagation();
+        onChange(null);
+    }, [onChange]);
+    const removeItem = useCallback((e, item) => {
+        if (isMultiple && Array.isArray(value) && value.length) {
+            e.stopPropagation();
+            const result = value.filter(current => item.value !== current.value);
+            onChange(result.length ? result : null);
+        }
+    }, [isMultiple, onChange, value]);
+    const getSelectClass = useCallback(() => {
+        let ringColor = THEME_DATA.ring[DEFAULT_THEME];
+        if (COLORS.includes(primaryColor)) {
+            ringColor = THEME_DATA.ring[primaryColor];
+        }
+        let borderFocus = THEME_DATA.borderFocus[DEFAULT_THEME];
+        if (COLORS.includes(primaryColor)) {
+            borderFocus =
+                THEME_DATA.borderFocus[primaryColor];
+        }
+        const baseClass = "flex text-sm text-gray-500 border border-gray-300 rounded shadow-sm transition-all duration-300 focus:outline-none";
+        const defaultClass = `${baseClass} ${isDisabled
+            ? "bg-gray-200"
+            : `bg-white hover:border-gray-400 ${borderFocus} focus:ring ${ringColor}`}`;
+        return classNames && classNames.menuButton
+            ? classNames.menuButton({ isDisabled })
+            : defaultClass;
+    }, [classNames, isDisabled, primaryColor]);
+    const getTagItemClass = useCallback((item) => {
+        const baseClasse = "bg-gray-200 border rounded-sm flex space-x-1";
+        const disabledClass = isDisabled ? "border-gray-500 px-1" : "pl-1";
+        return classNames?.tagItem
+            ? classNames.tagItem({ item, isDisabled })
+            : `${baseClasse} ${disabledClass}`;
+    }, [classNames, isDisabled]);
+    return (React.createElement(SelectProvider, { otherData: {
+            formatGroupLabel,
+            formatOptionLabel,
+            classNames
+        }, value: value, handleValueChange: handleValueChange },
+        React.createElement("div", { className: "relative w-full", ref: ref },
+            React.createElement("div", { tabIndex: 0, "aria-expanded": open, onKeyDown: onPressEnterOrSpace, onClick: toggle, className: getSelectClass() },
+                React.createElement("div", { className: "grow pl-2.5 py-2 pr-2 flex flex-wrap gap-1" }, !isMultiple ? (React.createElement("p", { className: "truncate cursor-default select-none" }, value && !Array.isArray(value) ? value.label : placeholder)) : (React.createElement(React.Fragment, null,
+                    value === null && placeholder,
+                    Array.isArray(value) &&
+                        value.map((item, index) => (React.createElement("div", { className: getTagItemClass(item), key: index },
+                            React.createElement("p", { className: classNames?.tagItemText
+                                    ? classNames.tagItemText
+                                    : "text-gray-600 truncate cursor-default select-none" }, item.label),
+                            !isDisabled && (React.createElement("div", { onClick: e => removeItem(e, item), className: classNames?.tagItemIconContainer
+                                    ? classNames.tagItemIconContainer
+                                    : "flex items-center px-1 cursor-pointer rounded-r-sm hover:bg-red-200 hover:text-red-600" },
+                                React.createElement(CloseIcon, { className: classNames?.tagItemIcon
+                                        ? classNames.tagItemIcon
+                                        : "w-3 h-3 mt-0.5" }))))))))),
+                React.createElement("div", { className: "flex flex-none items-center py-1.5" },
+                    loading && (React.createElement("div", { className: "px-1.5" },
+                        React.createElement(Spinner, { primaryColor: primaryColor }))),
+                    isClearable && !isDisabled && value !== null && (React.createElement("div", { className: "px-1.5 cursor-pointer", onClick: clearValue },
+                        React.createElement(CloseIcon, { className: classNames?.closeIcon
+                                ? classNames.closeIcon
+                                : "w-5 h-5 p-0.5" }))),
+                    React.createElement("div", { className: "h-full" },
+                        React.createElement("span", { className: "w-px h-full inline-block text-white bg-gray-300 text-opacity-0" })),
+                    React.createElement("div", { className: "px-1.5" },
+                        React.createElement(ChevronIcon, { className: `transition duration-300 w-6 h-6 p-0.5${open ? " transform rotate-90 text-gray-500" : " text-gray-300"}` })))),
+            open && !isDisabled && (React.createElement("div", { tabIndex: -1, className: classNames?.menu
+                    ? classNames.menu
+                    : "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700" },
+                isSearchable && (React.createElement(SearchInput, { ref: searchBoxRef, value: inputValue, placeholder: searchInputPlaceholder, onChange: e => {
+                        if (onSearchInputChange &&
+                            typeof onSearchInputChange === "function")
+                            onSearchInputChange(e);
+                        setInputValue(e.target.value);
+                    } })),
+                React.createElement(Options, { list: list, noOptionsMessage: noOptionsMessage, text: inputValue, isMultiple: isMultiple, value: value, primaryColor: primaryColor || DEFAULT_THEME }))))));
+};
+
+var SelectMenuForm = function (props) {
+    var _a;
+    var _b = props.name, name = _b === void 0 ? 'select-menu-form' : _b, label = props.label, description = props.description, placeholder = props.placeholder, options = props.options, required = props.required, value = props.value, error = props.error, _c = props.type, type = _c === void 0 ? 'normal' : _c, _d = props.isRequired, isRequired = _d === void 0 ? false : _d, isLoading = props.isLoading, _e = props.isTouched, isTouched = _e === void 0 ? false : _e, isDisabled = props.isDisabled, _f = props.isClearable, isClearable = _f === void 0 ? true : _f, _g = props.isMulti, isMulti = _g === void 0 ? false : _g, _h = props.isSearchable, isSearchable = _h === void 0 ? true : _h, _j = props.isSolo, isSolo = _j === void 0 ? false : _j, onChange = props.onChange, onSearchInputChange = props.onSearchInputChange, onBlur = props.onBlur, onClear = props.onClear, stylesOverrides = props.styles;
+    var _k = useState(value !== null && value !== void 0 ? value : null), state = _k[0], setState = _k[1];
+    var isValid = error === undefined;
+    var handleGenerateStyle = function () {
+        var result = deepCopyObject(styles.base);
+        var keys = calculateNestedKeys(styles.base);
+        keys.forEach(function (key) {
+            set(result, key, toClassName(get(styles.base, key), type && get(styles[type], key), isTouched === true && !isValid && get(styles.invalid, key), isDisabled && get(styles.disabled, key), get(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var handleChange = function (value) {
+        setState(value);
+        onChange && onChange(value === null || value === void 0 ? void 0 : value.value);
+        onBlur && onBlur(value === null || value === void 0 ? void 0 : value.value);
+    };
+    var styles$1 = handleGenerateStyle();
+    // Simulate onClear event.
+    useEffect(function () {
+        if (state === null) {
+            onClear && onClear(name);
+        }
+    }, [isTouched, name, onClear, state]);
+    return (jsxs("div", __assign({ className: styles$1.container }, { children: [jsxs("div", __assign({ className: styles$1.head }, { children: [label && (jsx("label", __assign({ htmlFor: name, className: styles$1.label }, { children: label }))), !required && !isRequired && typeof label === 'string' && (jsx("span", __assign({ className: styles$1.hint }, { children: "Optional" }))), required && required({ isRequired: isRequired })] })), jsxs("div", __assign({ className: styles$1.container }, { children: [jsx(Select, { primaryColor: "primary", 
+                        //
+                        placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.select, noOptionsMessage: (jsx("p", __assign({ className: styles$1.emptyState }, { children: (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder.emptyState) !== null && _a !== void 0 ? _a : 'No results found' }))), searchInputPlaceholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.searchInput, 
+                        //
+                        loading: isLoading, isDisabled: isDisabled, isClearable: isClearable, isMultiple: isMulti, isSearchable: isSearchable, 
+                        //
+                        options: options, 
+                        //
+                        value: state, onChange: handleChange, onSearchInputChange: onSearchInputChange, 
+                        //
+                        classNames: {
+                            menuButton: function () {
+                                return toClassName(styles$1.input, state === null && '[&>*]:!text-gray-300 ');
+                            },
+                            menu: styles$1.menu,
+                            list: styles$1.list,
+                            listItem: function () { return styles$1.listItem; },
+                            searchContainer: styles$1.searchContainer,
+                        } }), !isSolo && (jsxs("div", __assign({ className: styles$1.foot }, { children: [description && !(error && isTouched) && (jsx("p", __assign({ className: styles$1.description }, { children: description }))), error && isTouched && jsx("p", __assign({ className: styles$1.error }, { children: error }))] })))] }))] })));
+};
+
+var base = {
+    container: '',
+    head: 'flex justify-between',
+    body: 'relative rounded-md',
+    foot: '',
+    label: 'block font-medium text-gray-900',
+    hint: 'text-xs text-gray-500',
+    leading: 'pointer-events-none absolute inset-y-0 left-0 flex items-center',
+    input: 'block w-full flex border',
+    menuButton: '',
+    menu: '!px-0 !py-0 !w-full rounded-md overflow-hidden border !mt-1 absolute bg-white',
+    list: '!px-0 !py-0 !w-full [&>*]:px-0 max-h-56 overflow-scroll !py-1',
+    listItem: '!px-0 !py-0 !w-full !list-none hover:bg-primary-500 hover:text-white !py-2 !px-2',
+    searchContainer: '!px-0 !py-0 !w-full !px-2 !py-2 border-b',
+    emptyState: 'w-full inline-flex items-start justify-start px-4',
+    trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
+    description: 'text-gray-400 text-xs mt-1',
+    error: 'text-red-500 text-xs ml-5 mt-1',
+};
+var leading = {
+    input: 'pl-10',
+};
+var trailing = {};
+var normal = {
+    label: 'leading-6 text-sm mb-2',
+    hint: 'leading-6',
+    leading: 'pl-3',
+    input: 'rounded-md border-gray-200 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm placeholder-gray-300',
+    trailing: '',
+    description: 'mt-2 text-sm',
+};
+var inset = {
+    container: 'rounded-md px-3 pt-2.5 pb-1.5 shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary-600',
+    label: 'text-xs',
+    hint: 'text-xs',
+    input: 'border-0 !ring-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0',
+    description: 'hidden',
+};
+var overlapping = {
+    container: 'relative',
+    head: ' absolute flex justify-between items-center left-0 -top-2 right-0 mx-2 z-10 w-full',
+    label: 'inline-block bg-white px-1 text-xs font-medium text-gray-900 ',
+    hint: 'text-xs mr-4 bg-white px-1',
+    input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
+    description: 'hidden',
+};
+var pill = {
+    head: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6',
+    foot: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mt-1 pr-6',
+    input: 'block w-full rounded-full border-0 px-4 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
+    trailing: 'pr-2',
+    description: 'text-xs',
+};
+var floored = {
+    body: 'relative mt-2',
+    label: 'block text-sm font-medium leading-6 text-gray-900',
+    input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0',
+    description: 'text-xs mt-2',
+};
+var invalid = {
+    container: 'ring-red-500',
+    input: 
+    // 'block w-full border border-transparent text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:leading-6 pr-10',
+    'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500',
+    description: 'text-sm text-red-600',
+};
+var disabled = {
+    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 sm:text-sm sm:leading-6',
+};
+var styles = {
+    base: base,
+    leading: leading,
+    trailing: trailing,
+    normal: normal,
+    inset: inset,
+    overlapping: overlapping,
+    pill: pill,
+    floored: floored,
+    invalid: invalid,
+    disabled: disabled,
+};
+
+export { AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, ContainerLayout, DividerLayout, DropdownElement, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SelectMenuForm, SlideOverOverlay, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, VerticalNavigation, createColumnHelper };
 //# sourceMappingURL=index.esm.js.map