@ballistix.digital/react-components 0.4.65 → 0.4.67

package/dist/index.js

@@ -86,10 +86,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$k.base);
-        var keys = calculateNestedKeys(styles$k.base);
+        var result = deepCopyObject(styles$l.base);
+        var keys = calculateNestedKeys(styles$l.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$k.base, key), size && lodash.get(styles$k[size], key), figure && lodash.get(styles$k[figure], key), status && lodash.get(styles$k[status], key), isDisabled && lodash.get(styles$k.disabled, key), isLoading && lodash.get(styles$k.loading, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$l.base, key), size && lodash.get(styles$l[size], key), figure && lodash.get(styles$l[figure], key), status && lodash.get(styles$l[status], key), isDisabled && lodash.get(styles$l.disabled, key), isLoading && lodash.get(styles$l.loading, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -185,7 +185,7 @@ var online = {
 var blocked = {
     indicator: 'bg-red-400',
 };
-var styles$k = {
+var styles$l = {
     base: base$i,
     xs: xs$4,
     sm: sm$5,
@@ -204,10 +204,10 @@ var styles$k = {
 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$j.base);
-        var keys = calculateNestedKeys(styles$j.base);
+        var result = deepCopyObject(styles$k.base);
+        var keys = calculateNestedKeys(styles$k.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$j.base, key), type && lodash.get(styles$j[type], key), color && lodash.get(styles$j[color], key), size && lodash.get(styles$j[size], key), figure && lodash.get(styles$j[figure], key), isDisabled && lodash.get(styles$j.disabled, key), isLoading && lodash.get(styles$j.loading, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$k.base, key), type && lodash.get(styles$k[type], key), color && lodash.get(styles$k[color], key), size && lodash.get(styles$k[size], key), figure && lodash.get(styles$k[figure], key), isDisabled && lodash.get(styles$k.disabled, key), isLoading && lodash.get(styles$k.loading, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -302,7 +302,7 @@ var disabled$2 = {
 var loading$1 = {
     container: 'cursor-progress',
 };
-var styles$j = {
+var styles$k = {
     base: base$h,
     normal: normal$3,
     indicator: indicator,
@@ -329,10 +329,10 @@ var styles$j = {
 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$i.base);
-        var keys = calculateNestedKeys(styles$i.base);
+        var result = deepCopyObject(styles$j.base);
+        var keys = calculateNestedKeys(styles$j.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$i.base, key), type && lodash.get(styles$i[type], key), size && lodash.get(styles$i[size], key), figure && lodash.get(styles$i[figure], key), status && lodash.get(styles$i[status], key), isDisabled && lodash.get(styles$i.disabled, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$j.base, key), type && lodash.get(styles$j[type], key), size && lodash.get(styles$j[size], key), figure && lodash.get(styles$j[figure], key), status && lodash.get(styles$j[status], key), isDisabled && lodash.get(styles$j.disabled, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -392,7 +392,7 @@ var error = {
 var disabled$1 = {
     container: '!opacity-20 !cursor-not-allowed',
 };
-var styles$i = {
+var styles$j = {
     base: base$g,
     primary: primary,
     secondary: secondary,
@@ -414,10 +414,10 @@ var styles$i = {
 var ButtonGroupElement = function (props) {
     var children = props.children, 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) {
-            lodash.set(result, key, toClassName(lodash.get(styles$h.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$i.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -441,22 +441,23 @@ var base$f = {
     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$h = {
+var styles$i = {
     base: base$f,
 };
 
 var Container$3 = function (props) {
-    var children = props.children, label = props.label, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, stylesOverrides = props.styles;
+    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$g.base);
-        var keys = calculateNestedKeys(styles$g.base);
+        var result = deepCopyObject(styles$h.base);
+        var keys = calculateNestedKeys(styles$h.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$g.base, key), type && lodash.get(styles$g[type], key), direction && lodash.get(styles$g[direction], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$h.base, key), type && lodash.get(styles$h[type], key), direction && lodash.get(styles$h[direction], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
     var styles = handleGenerateStyle();
-    return (jsxRuntime.jsxs(react.Menu, __assign({ as: "div", className: styles.container }, { children: [jsxRuntime.jsxs("div", { children: [type === 'button' && (jsxRuntime.jsxs(react.Menu.Button, __assign({ className: styles.button }, { children: [label, jsxRuntime.jsx(solid.ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] }))), type === 'compact' && (jsxRuntime.jsxs(react.Menu.Button, __assign({ className: styles.compact }, { children: [jsxRuntime.jsx("span", __assign({ className: "sr-only" }, { children: label })), jsxRuntime.jsx(solid.EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] })))] }), jsxRuntime.jsx(react.Transition, __assign({ as: n.Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95" }, { children: jsxRuntime.jsx(react.Menu.Items, __assign({ className: styles.items }, { children: children })) }))] })));
+    return (jsxRuntime.jsxs(react.Menu, __assign({ as: "div", className: styles.container }, { children: [jsxRuntime.jsxs("div", { children: [type === 'button' &&
+                        (!trigger ? (jsxRuntime.jsxs(react.Menu.Button, __assign({ className: styles.button }, { children: [label, jsxRuntime.jsx(solid.ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] }))) : (jsxRuntime.jsx(react.Menu.Button, { children: trigger }))), type === 'compact' && (jsxRuntime.jsxs(react.Menu.Button, __assign({ className: styles.compact }, { children: [jsxRuntime.jsx("span", __assign({ className: "sr-only" }, { children: label })), jsxRuntime.jsx(solid.EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] })))] }), jsxRuntime.jsx(react.Transition, __assign({ as: n.Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95" }, { children: jsxRuntime.jsx(react.Menu.Items, __assign({ className: styles.items }, { children: children })) }))] })));
 };
 var DropdownElement = {
     Container: Container$3,
@@ -484,7 +485,7 @@ var topLeft = {
 var topRight = {
     items: 'origin-bottom-left left-0 bottom-0',
 };
-var styles$g = {
+var styles$h = {
     base: base$e,
     button: button,
     compact: compact,
@@ -535,10 +536,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$f.base);
-        var keys = calculateNestedKeys(styles$f.base);
+        var result = deepCopyObject(styles$g.base);
+        var keys = calculateNestedKeys(styles$g.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$f.base, key), leading !== undefined && lodash.get(styles$f.leading, key), trailing !== undefined && lodash.get(styles$f.trailing, key), type && lodash.get(styles$f[type], key), isTouched === true && !isValid && lodash.get(styles$f.invalid, key), isDisabled && lodash.get(styles$f.disabled, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$g.base, key), leading !== undefined && lodash.get(styles$g.leading, key), trailing !== undefined && lodash.get(styles$g.trailing, key), type && lodash.get(styles$g[type], key), isTouched === true && !isValid && lodash.get(styles$g.invalid, key), isDisabled && lodash.get(styles$g.disabled, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -608,7 +609,7 @@ var invalid = {
 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$f = {
+var styles$g = {
     base: base$d,
     leading: leading,
     trailing: trailing,
@@ -624,10 +625,10 @@ var styles$f = {
 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$e.base);
-        var keys = calculateNestedKeys(styles$e.base);
+        var result = deepCopyObject(styles$f.base);
+        var keys = calculateNestedKeys(styles$f.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$e.base, key), type && lodash.get(styles$e[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$f.base, key), type && lodash.get(styles$f[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -664,7 +665,7 @@ var center$3 = {
 var fill$1 = {
     container: 'max-w-7xl mx-auto sm:px-6 lg:px-8',
 };
-var styles$e = {
+var styles$f = {
     base: base$c,
     break: breakStyles,
     center: center$3,
@@ -674,10 +675,10 @@ var styles$e = {
 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$d.base);
-        var keys = calculateNestedKeys(styles$d.base);
+        var result = deepCopyObject(styles$e.base);
+        var keys = calculateNestedKeys(styles$e.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$d.base, key), type && lodash.get(styles$d[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$e.base, key), type && lodash.get(styles$e[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -701,7 +702,7 @@ var center$2 = {
 var right = {
     body: 'justify-end',
 };
-var styles$d = {
+var styles$e = {
     base: base$b,
     left: left,
     center: center$2,
@@ -711,10 +712,10 @@ var styles$d = {
 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$c.base);
-        var keys = calculateNestedKeys(styles$c.base);
+        var result = deepCopyObject(styles$d.base);
+        var keys = calculateNestedKeys(styles$d.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$c.base, key), type && lodash.get(styles$c[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$d.base, key), type && lodash.get(styles$d[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -756,7 +757,7 @@ var cardSticky = {
     list: 'space-y-3',
     item: 'bg-white shadow overflow-hidden px-4 py-4 sm:px-6 sm:rounded-md',
 };
-var styles$c = {
+var styles$d = {
     base: base$a,
     fill: fill,
     'fill-sticky': fillSticky,
@@ -769,10 +770,10 @@ var styles$c = {
 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$b.base);
-        var keys = calculateNestedKeys(styles$b.base);
+        var result = deepCopyObject(styles$c.base);
+        var keys = calculateNestedKeys(styles$c.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$b.base, key), type && lodash.get(styles$b[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$c.base, key), type && lodash.get(styles$c[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -845,7 +846,7 @@ var wideReversed = {
     figure: 'mb-4 md:mb-0 sm:mr-4 sm:mb-4',
     svg: 'h-32 w-full sm:w-32',
 };
-var styles$b = {
+var styles$c = {
     base: base$9,
     top: top,
     'top-reversed': topReversed,
@@ -864,10 +865,10 @@ var styles$b = {
 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$a.base);
-        var keys = calculateNestedKeys(styles$a.base);
+        var result = deepCopyObject(styles$b.base);
+        var keys = calculateNestedKeys(styles$b.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$a.base, key), type && lodash.get(styles$a[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$b.base, key), type && lodash.get(styles$b[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -877,10 +878,10 @@ var Container$2 = function (props) {
 var Section = function (props) {
     var children = props.children, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$a.base);
-        var keys = calculateNestedKeys(styles$a.base);
+        var result = deepCopyObject(styles$b.base);
+        var keys = calculateNestedKeys(styles$b.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$a.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$b.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -902,7 +903,7 @@ var normal$1 = {
 var sticky$1 = {
     container: 'sm:rounded-lg',
 };
-var styles$a = {
+var styles$b = {
     base: base$8,
     normal: normal$1,
     sticky: sticky$1,
@@ -1008,10 +1009,10 @@ var PanelPaginationNavigation = function (props) {
         }
     }, [defaultValue]);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$9.base);
-        var keys = calculateNestedKeys(styles$9.base);
+        var result = deepCopyObject(styles$a.base);
+        var keys = calculateNestedKeys(styles$a.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$9.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$a.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1072,7 +1073,7 @@ var base$7 = {
     label: 'sr-only',
     icon: 'w-5 h-5',
 };
-var styles$9 = {
+var styles$a = {
     base: base$7,
 };
 
@@ -1081,10 +1082,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$8.base);
-        var keys = calculateNestedKeys(styles$8.base);
+        var result = deepCopyObject(styles$9.base);
+        var keys = calculateNestedKeys(styles$9.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$8.base, key), type && lodash.get(styles$8[type], key), hasStickyHeader && lodash.get(styles$8.sticky, key), hasVerticalSeparators && lodash.get(styles$8.separated, key), areControlsVisible && lodash.get(styles$8.controlled, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$9.base, key), type && lodash.get(styles$9[type], key), hasStickyHeader && lodash.get(styles$9.sticky, key), hasVerticalSeparators && lodash.get(styles$9.separated, key), areControlsVisible && lodash.get(styles$9.controlled, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1321,7 +1322,7 @@ var controlled = {
         container: '!flex',
     },
 };
-var styles$8 = {
+var styles$9 = {
     base: base$6,
     normal: normal,
     panel: panel$1,
@@ -1368,30 +1369,30 @@ var TableList2 = function (props) {
             onChange && onChange(state);
         }
     }, [onChange, state]);
-    return (jsxRuntime.jsxs("div", __assign({ className: styles$7.container }, { children: [jsxRuntime.jsx("div", __assign({ className: styles$7.head }, { children: head && head(state) })), jsxRuntime.jsx("div", __assign({ className: "" }, { children: jsxRuntime.jsx("div", __assign({ className: "flow-root" }, { children: jsxRuntime.jsx("div", __assign({ className: "overflow-scroll" }, { children: jsxRuntime.jsxs("div", __assign({ className: "inline-block min-w-full align-middle" }, { children: [jsxRuntime.jsxs("table", __assign({ className: "min-w-full border-separate border-spacing-0 " }, { children: [jsxRuntime.jsx("thead", __assign({ className: "" }, { children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsxRuntime.jsx("tr", { children: headerGroup.headers.map(function (header) { return (jsxRuntime.jsxs("th", __assign({ colSpan: header.colSpan, className: toClassName(styles$7.body.table.head.cell, 'border-b', header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler(), style: {
+    return (jsxRuntime.jsxs("div", __assign({ className: styles$8.container }, { children: [jsxRuntime.jsx("div", __assign({ className: styles$8.head }, { children: head && head(state) })), jsxRuntime.jsx("div", __assign({ className: "" }, { children: jsxRuntime.jsx("div", __assign({ className: "flow-root" }, { children: jsxRuntime.jsx("div", __assign({ className: "overflow-scroll" }, { children: jsxRuntime.jsxs("div", __assign({ className: "inline-block min-w-full align-middle" }, { children: [jsxRuntime.jsxs("table", __assign({ className: "min-w-full border-separate border-spacing-0 " }, { children: [jsxRuntime.jsx("thead", __assign({ className: "" }, { children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsxRuntime.jsx("tr", { children: headerGroup.headers.map(function (header) { return (jsxRuntime.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: {
                                                         minWidth: header.column.columnDef.size
                                                             ? "".concat(header.column.columnDef.size, "px")
                                                             : 'auto',
                                                     } }, { children: [header.isPlaceholder
                                                             ? null
-                                                            : reactTable.flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsxRuntime.jsx("span", __assign({ className: toClassName(styles$7.sortIndicator.container, header.column.getIsSorted()
-                                                                ? styles$7.sortIndicator.isSorted
-                                                                : styles$7.sortIndicator.isNotSorted) }, { children: jsxRuntime.jsx(solid.ChevronDownIcon, { className: toClassName(styles$7.sortIndicator.icon.container, header.column.getIsSorted() === 'asc' &&
+                                                            : reactTable.flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsxRuntime.jsx("span", __assign({ className: toClassName(styles$8.sortIndicator.container, header.column.getIsSorted()
+                                                                ? styles$8.sortIndicator.isSorted
+                                                                : styles$8.sortIndicator.isNotSorted) }, { children: jsxRuntime.jsx(solid.ChevronDownIcon, { className: toClassName(styles$8.sortIndicator.icon.container, header.column.getIsSorted() === 'asc' &&
                                                                     '-scale-100'), "aria-hidden": "true" }) })))] }), header.id)); }) }, headerGroup.id)); }) })), !isLoading && (jsxRuntime.jsx("tbody", __assign({ className: "border" }, { children: table === null || table === void 0 ? void 0 : table.getRowModel().rows.map(function (row, index) {
                                                 var _a;
-                                                return (jsxRuntime.jsx("tr", __assign({ className: toClassName(styles$7.body.table.body.row, ((_a = config.options) === null || _a === void 0 ? void 0 : _a.isStriped) &&
+                                                return (jsxRuntime.jsx("tr", __assign({ className: toClassName(styles$8.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 (jsxRuntime.jsx("td", __assign({ className: toClassName(styles$7.body.table.body.cell, ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.hasStickyHeader) &&
+                                                        return (jsxRuntime.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) &&
                                                                 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: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }), cell.id));
                                                     }) }), row.id));
-                                            }) })))] })), isLoading && (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-y-2 w-full pt-5" }, { children: new Array(8).fill(undefined).map(function (index) { return (jsxRuntime.jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsxRuntime.jsx("div", { className: "w-20 h-14 rounded-md bg-gray-100 animate-pulse" }), jsxRuntime.jsx("div", { className: "w-full h-14 rounded-md bg-gray-100 animate-pulse" })] }), index)); }) })))] })) })) })) })), jsxRuntime.jsx("div", __assign({ className: styles$7.foot }, { children: foot && foot(state) }))] })));
+                                            }) })))] })), isLoading && (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-y-2 w-full pt-5" }, { children: new Array(8).fill(undefined).map(function (index) { return (jsxRuntime.jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsxRuntime.jsx("div", { className: "w-20 h-14 rounded-md bg-gray-100 animate-pulse" }), jsxRuntime.jsx("div", { className: "w-full h-14 rounded-md bg-gray-100 animate-pulse" })] }), index)); }) })))] })) })) })) })), jsxRuntime.jsx("div", __assign({ className: styles$8.foot }, { children: foot && foot(state) }))] })));
 };
 
-var styles$7 = {
+var styles$8 = {
     container: '',
     head: '',
     body: {
@@ -1434,10 +1435,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$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__default["default"](result, key, toClassName(get__default["default"](styles$6.base, key), type && get__default["default"](styles$6[type], key), get__default["default"](stylesOverrides, key)));
+            set__default["default"](result, key, toClassName(get__default["default"](styles$7.base, key), type && get__default["default"](styles$7[type], key), get__default["default"](stylesOverrides, key)));
         });
         return result;
     };
@@ -1558,7 +1559,7 @@ var bar = {
         link: '',
     },
 };
-var styles$6 = {
+var styles$7 = {
     base: base$5,
     slashes: slashes,
     chevrons: chevrons,
@@ -1570,10 +1571,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 = n.useState(2), current = _c[0], setCurrent = _c[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) {
-            lodash.set(result, key, toClassName(lodash.get(styles$5.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$6.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1630,7 +1631,7 @@ 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$5 = {
+var styles$6 = {
     base: base$4,
 };
 
@@ -1638,10 +1639,10 @@ var Container$1 = function (props) {
     var children = props.children, stylesOverrides = props.styles;
     var _a = n.useState(''), active = _a[0], setActive = _a[1];
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$4.base);
-        var keys = calculateNestedKeys(styles$4.base);
+        var result = deepCopyObject(styles$5.base);
+        var keys = calculateNestedKeys(styles$5.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$4.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$5.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1651,10 +1652,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$4.base);
-        var keys = calculateNestedKeys(styles$4.base);
+        var result = deepCopyObject(styles$5.base);
+        var keys = calculateNestedKeys(styles$5.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$4.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$5.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1700,10 +1701,10 @@ var List$1 = function (props) {
 var Item$1 = function (props) {
     var children = props.children, _a = props.as, LinkComponent = _a === void 0 ? 'a' : _a, _b = props.type, type = _b === void 0 ? 'underline' : _b, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$4.base);
-        var keys = calculateNestedKeys(styles$4.base);
+        var result = deepCopyObject(styles$5.base);
+        var keys = calculateNestedKeys(styles$5.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$4.base, key), type && lodash.get(styles$4[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$5.base, key), type && lodash.get(styles$5[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1761,7 +1762,7 @@ var buttons = {
         inactive: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
     },
 };
-var styles$4 = {
+var styles$5 = {
     base: base$3,
     underline: underline,
     pills: pills,
@@ -1789,11 +1790,11 @@ var List = function (props) {
         setActive && setActive(tab === null || tab === void 0 ? void 0 : tab.props.accessor);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (jsxRuntime.jsx("nav", __assign({ className: toClassName(styles$3.list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list) }, { children: children })));
+    return (jsxRuntime.jsx("nav", __assign({ className: toClassName(styles$4.list, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.list) }, { children: children })));
 };
 var Item = function (props) {
     var children = props.children, href = props.href, isCurrent = props.isCurrent, _a = props.linkComponent, LinkComponent = _a === void 0 ? 'a' : _a, onClick = props.onClick;
-    return (jsxRuntime.jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$3.item[isCurrent ? 'active' : 'notActive'], styles$3.item.base), onClick: onClick }, { children: children })));
+    return (jsxRuntime.jsx(LinkComponent, __assign({ href: href, className: toClassName(styles$4.item[isCurrent ? 'active' : 'notActive'], styles$4.item.base), onClick: onClick }, { children: children })));
 };
 var View = function (props) {
     var children = props.children;
@@ -1806,7 +1807,7 @@ var VerticalNavigation = {
     View: View,
 };
 
-var styles$3 = {
+var styles$4 = {
     container: '',
     list: 'space-y-1',
     item: {
@@ -1824,10 +1825,10 @@ var ModalOverlay = function (props) {
         handleClose: 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) {
-            lodash.set(result, key, toClassName(lodash.get(styles$2.base, key), size && lodash.get(styles$2[size], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$3.base, key), size && lodash.get(styles$3[size], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1899,7 +1900,7 @@ var xl$2 = {
         container: 'sm:max-w-4xl',
     },
 };
-var styles$2 = {
+var styles$3 = {
     base: base$2,
     xs: xs$2,
     sm: sm$2,
@@ -1911,10 +1912,10 @@ var styles$2 = {
 var NotificationOverlayContainer = function (_a) {
     var children = _a.children, stylesOverrides = _a.styles;
     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) {
-            lodash.set(result, key, toClassName(lodash.get(styles$1.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$2.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1929,10 +1930,10 @@ var NotificationOverlayItem = 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) {
-            lodash.set(result, key, toClassName(lodash.get(styles$1.base, key), size && lodash.get(styles$1[size], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$2.base, key), size && lodash.get(styles$2[size], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2004,7 +2005,7 @@ var xl$1 = {
         },
     },
 };
-var styles$1 = {
+var styles$2 = {
     base: base$1,
     xs: xs$1,
     sm: sm$1,
@@ -2021,15 +2022,15 @@ var SlideOverOverlay = function (props) {
         onClose: function () { return setIsOpen(false); },
     }); }, []);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles.base);
-        var keys = calculateNestedKeys(styles.base);
+        var result = deepCopyObject(styles$1.base);
+        var keys = calculateNestedKeys(styles$1.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles.base, key), size && lodash.get(styles[size], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$1.base, key), size && lodash.get(styles$1[size], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
-    var styles$1 = handleGenerateStyle();
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, __assign({ show: isOpen, as: n.Fragment }, { children: jsxRuntime.jsxs(react.Dialog, __assign({ as: "div", className: styles$1.container, onClose: setIsOpen }, { children: [jsxRuntime.jsx(react.Transition.Child, __assign({ as: n.Fragment, enter: styles$1.background.transition.enter, enterFrom: styles$1.background.transition.enterFrom, enterTo: styles$1.background.transition.enterTo, leave: styles$1.background.transition.leave, leaveFrom: styles$1.background.transition.leaveFrom, leaveTo: styles$1.background.transition.leaveTo }, { children: jsxRuntime.jsx("div", { className: styles$1.background.container }) })), jsxRuntime.jsx("div", __assign({ className: styles$1.layout.container }, { children: jsxRuntime.jsx("div", __assign({ className: styles$1.layout.content }, { children: jsxRuntime.jsx("div", __assign({ className: styles$1.layout.inner }, { children: jsxRuntime.jsx(react.Transition.Child, __assign({ as: n.Fragment, enter: styles$1.panel.transition.enter, enterFrom: styles$1.panel.transition.enterFrom, enterTo: styles$1.panel.transition.enterTo, leave: styles$1.panel.transition.leave, leaveFrom: styles$1.panel.transition.leaveFrom, leaveTo: styles$1.panel.transition.leaveTo }, { children: jsxRuntime.jsx(react.Dialog.Panel, __assign({ className: styles$1.panel.container }, { children: children(options) })) })) })) })) }))] })) })), trigger && trigger(options)] }));
+    var styles = handleGenerateStyle();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, __assign({ show: isOpen, as: n.Fragment }, { children: jsxRuntime.jsxs(react.Dialog, __assign({ as: "div", className: styles.container, onClose: setIsOpen }, { children: [jsxRuntime.jsx(react.Transition.Child, __assign({ as: n.Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo }, { children: jsxRuntime.jsx("div", { className: styles.background.container }) })), jsxRuntime.jsx("div", __assign({ className: styles.layout.container }, { children: jsxRuntime.jsx("div", __assign({ className: styles.layout.content }, { children: jsxRuntime.jsx("div", __assign({ className: styles.layout.inner }, { children: jsxRuntime.jsx(react.Transition.Child, __assign({ as: n.Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo }, { children: jsxRuntime.jsx(react.Dialog.Panel, __assign({ className: styles.panel.container }, { children: children(options) })) })) })) })) }))] })) })), trigger && trigger(options)] }));
 };
 
 var base = {
@@ -2087,7 +2088,7 @@ var xl = {
         container: 'sm:max-w-4xl',
     },
 };
-var styles = {
+var styles$1 = {
     base: base,
     xs: xs,
     sm: sm,
@@ -2096,6 +2097,59 @@ var styles = {
     xl: xl,
 };
 
+var TableColumnOptionsCustom = function (props) {
+    var table = props.table, trigger = props.trigger, setColumnOrder = props.setColumnOrder;
+    var handleUpdateColumnOrder = n.useCallback(function (table, column, location, setColumnOrder) {
+        var _a;
+        var ids = (_a = table
+            .getAllLeafColumns()) === null || _a === void 0 ? void 0 : _a.map(function (column) { return column.id; });
+        var currentIndexOfId = ids.findIndex(function (id) { return id === column.id; });
+        // Remove id from array.
+        ids.splice(currentIndexOfId, 1);
+        // Re-insert id at correct location in array.
+        ids.splice(location, 0, column.id);
+        setColumnOrder(ids);
+    }, []);
+    return (jsxRuntime.jsx(DropdownElement.Container, __assign({ trigger: trigger }, { children: jsxRuntime.jsx("div", __assign({ className: styles.controls.content }, { children: table.getAllLeafColumns().map(function (column, index) {
+                var canSort = column === null || column === void 0 ? void 0 : column.getCanSort();
+                return (jsxRuntime.jsx(DropdownElement.Item, { children: function () { return (jsxRuntime.jsxs("div", __assign({ className: toClassName(styles.controls.dropdown.container, !canSort && 'hidden') }, { children: [jsxRuntime.jsx("input", { className: styles.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsxRuntime.jsx("label", __assign({ className: styles.controls.dropdown.label }, { children: column.columnDef.header })), jsxRuntime.jsxs("div", __assign({ className: styles.controls.dropdown.actions }, { children: [jsxRuntime.jsx(outline$2.ChevronDownIcon, { className: styles.controls.dropdown.upIcon, onClick: function () {
+                                            return handleUpdateColumnOrder(table, column, index - 1, setColumnOrder);
+                                        } }), jsxRuntime.jsx(outline$2.ChevronDownIcon, { className: styles.controls.dropdown.downIcon, onClick: function () {
+                                            return handleUpdateColumnOrder(table, column, index + 1, setColumnOrder);
+                                        } })] }))] }))); } }, column.id));
+            }) })) })));
+};
+
+var styles = {
+    container: '',
+    controls: {
+        container: 'flex-row justify-between z-10 relative mb-4 gap-2 hidden',
+        content: 'my-2 flex flex-col',
+        head: '',
+        body: 'flex flex-row justify-end gap-2',
+        dropdown: {
+            container: 'px-4 py-2 text-sm flex flex-row items-center font-medium group',
+            input: 'mr-3 cursor-pointer',
+            label: 'mr-3',
+            actions: 'hidden grid-cols-2 gap-2 group-hover:grid text-gray-400',
+            upIcon: 'w-5 h-5 -scale-y-100 hover:text-black hover:bg-gray-200 rounded-md cursor-pointer',
+            downIcon: 'w-5 h-5  hover:text-black hover:bg-gray-200 rounded-md cursor-pointer',
+        },
+    },
+    label: 'hidden md:block',
+    icon: 'md:mr-3 inline-flex items-center',
+};
+
+var TableExcelExportCustom = function (props) {
+    var table = props.table, fileName = props.fileName, children = props.children;
+    var _a = useExcel(), generate = _a.generate, write = _a.write;
+    var handleExport = function () {
+        var sheets = generate([table]);
+        write(sheets, { fileName: fileName });
+    };
+    return jsxRuntime.jsx("div", { children: children({ handleExport: handleExport }) });
+};
+
 exports.AvatarElement = AvatarElement;
 exports.BadgeElement = BadgeElement;
 exports.BreadcrumbsNavigation = BreadcrumbsNavigation;
@@ -2115,6 +2169,8 @@ exports.PanelLayout = LayoutPanel;
 exports.PanelPaginationNavigation = PanelPaginationNavigation;
 exports.SlideOverOverlay = SlideOverOverlay;
 exports.TabNavigation = TabNavigation;
+exports.TableColumnOptionsCustom = TableColumnOptionsCustom;
+exports.TableExportCustom = TableExcelExportCustom;
 exports.TableList = TableList;
 exports.TableList2 = TableList2;
 exports.VerticalNavigation = VerticalNavigation;