@ballistix.digital/react-components 0.4.57 → 0.4.59

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$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), 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), isLoading && lodash.get(styles$j.loading, key), lodash.get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -185,7 +185,7 @@ var online = {
 var blocked = {
     indicator: 'bg-red-400',
 };
-var styles$j = {
+var styles$k = {
     base: base$i,
     xs: xs$4,
     sm: sm$5,
@@ -204,10 +204,10 @@ var styles$j = {
 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$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), color && lodash.get(styles$i[color], key), size && lodash.get(styles$i[size], key), figure && lodash.get(styles$i[figure], key), isDisabled && lodash.get(styles$i.disabled, key), isLoading && lodash.get(styles$i.loading, key), lodash.get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -302,7 +302,7 @@ var disabled$2 = {
 var loading$1 = {
     container: 'cursor-progress',
 };
-var styles$i = {
+var styles$j = {
     base: base$h,
     normal: normal$3,
     indicator: indicator,
@@ -329,10 +329,10 @@ var styles$i = {
 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$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), type && lodash.get(styles$h[type], key), size && lodash.get(styles$h[size], key), figure && lodash.get(styles$h[figure], key), status && lodash.get(styles$h[status], key), isDisabled && lodash.get(styles$h.disabled, key), lodash.get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -392,7 +392,7 @@ var error = {
 var disabled$1 = {
     container: '!opacity-20 !cursor-not-allowed',
 };
-var styles$h = {
+var styles$i = {
     base: base$g,
     primary: primary,
     secondary: secondary,
@@ -414,10 +414,10 @@ var styles$h = {
 var ButtonGroupElement = function (props) {
     var children = props.children, 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), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$h.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -441,17 +441,17 @@ 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$g = {
+var styles$h = {
     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 handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$f.base);
-        var keys = calculateNestedKeys(styles$f.base);
+        var result = deepCopyObject(styles$g.base);
+        var keys = calculateNestedKeys(styles$g.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$f.base, key), type && lodash.get(styles$f[type], key), direction && lodash.get(styles$f[direction], key), lodash.get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -484,7 +484,7 @@ var topLeft = {
 var topRight = {
     items: 'origin-bottom-left left-0 bottom-0',
 };
-var styles$f = {
+var styles$g = {
     base: base$e,
     button: button,
     compact: compact,
@@ -535,10 +535,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$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), leading !== undefined && lodash.get(styles$e.leading, key), trailing !== undefined && lodash.get(styles$e.trailing, key), type && lodash.get(styles$e[type], key), isTouched === true && !isValid && lodash.get(styles$e.invalid, key), isDisabled && lodash.get(styles$e.disabled, key), lodash.get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -608,7 +608,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$e = {
+var styles$f = {
     base: base$d,
     leading: leading,
     trailing: trailing,
@@ -624,10 +624,10 @@ var styles$e = {
 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$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;
     };
@@ -664,7 +664,7 @@ var center$3 = {
 var fill$1 = {
     container: 'max-w-7xl mx-auto sm:px-6 lg:px-8',
 };
-var styles$d = {
+var styles$e = {
     base: base$c,
     break: breakStyles,
     center: center$3,
@@ -674,10 +674,10 @@ var styles$d = {
 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$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;
     };
@@ -701,7 +701,7 @@ var center$2 = {
 var right = {
     body: 'justify-end',
 };
-var styles$c = {
+var styles$d = {
     base: base$b,
     left: left,
     center: center$2,
@@ -711,10 +711,10 @@ var styles$c = {
 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$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;
     };
@@ -756,7 +756,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$b = {
+var styles$c = {
     base: base$a,
     fill: fill,
     'fill-sticky': fillSticky,
@@ -769,10 +769,10 @@ var styles$b = {
 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$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;
     };
@@ -845,7 +845,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$a = {
+var styles$b = {
     base: base$9,
     top: top,
     'top-reversed': topReversed,
@@ -864,10 +864,10 @@ var styles$a = {
 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$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), type && lodash.get(styles$9[type], key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$a.base, key), type && lodash.get(styles$a[type], key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -877,10 +877,10 @@ var Container$2 = function (props) {
 var Section = function (props) {
     var children = props.children, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$9.base);
-        var keys = calculateNestedKeys(styles$9.base);
+        var result = deepCopyObject(styles$a.base);
+        var keys = calculateNestedKeys(styles$a.base);
         keys.forEach(function (key) {
-            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;
     };
@@ -902,7 +902,7 @@ var normal$1 = {
 var sticky$1 = {
     container: 'sm:rounded-lg',
 };
-var styles$9 = {
+var styles$a = {
     base: base$8,
     normal: normal$1,
     sticky: sticky$1,
@@ -1008,10 +1008,10 @@ var PanelPaginationNavigation = function (props) {
         }
     }, [defaultValue]);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$8.base);
-        var keys = calculateNestedKeys(styles$8.base);
+        var result = deepCopyObject(styles$9.base);
+        var keys = calculateNestedKeys(styles$9.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$8.base, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$9.base, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -1072,7 +1072,7 @@ var base$7 = {
     label: 'sr-only',
     icon: 'w-5 h-5',
 };
-var styles$8 = {
+var styles$9 = {
     base: base$7,
 };
 
@@ -1081,10 +1081,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$7.base);
-        var keys = calculateNestedKeys(styles$7.base);
+        var result = deepCopyObject(styles$8.base);
+        var keys = calculateNestedKeys(styles$8.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$7.base, key), type && lodash.get(styles$7[type], key), hasStickyHeader && lodash.get(styles$7.sticky, key), hasVerticalSeparators && lodash.get(styles$7.separated, key), areControlsVisible && lodash.get(styles$7.controlled, key), lodash.get(stylesOverrides, 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)));
         });
         return result;
     };
@@ -1321,7 +1321,7 @@ var controlled = {
         container: '!flex',
     },
 };
-var styles$7 = {
+var styles$8 = {
     base: base$6,
     normal: normal,
     panel: panel$1,
@@ -1331,6 +1331,98 @@ var styles$7 = {
     controlled: controlled,
 };
 
+var TableList2 = function (props) {
+    var config = props.table, head = props.head, foot = props.foot, isLoading = props.isLoading, onChange = props.onChange;
+    var _a = n.useState([]), sorting = _a[0], setSorting = _a[1];
+    var _b = n.useState({}), columnVisibility = _b[0], setColumnVisibility = _b[1];
+    var _c = n.useState([]), columnOrder = _c[0], setColumnOrder = _c[1];
+    var table = reactTable.useReactTable({
+        getCoreRowModel: reactTable.getCoreRowModel(),
+        columns: config.columns,
+        data: config.data,
+        state: {
+            sorting: sorting,
+            columnVisibility: columnVisibility,
+            columnOrder: columnOrder,
+        },
+        manualPagination: true,
+        manualSorting: true,
+        onSortingChange: setSorting,
+        onColumnVisibilityChange: setColumnVisibility,
+        onColumnOrderChange: setColumnOrder,
+    });
+    var state = n.useMemo(function () { return ({
+        table: table,
+        //
+        sorting: sorting,
+        columnVisibility: columnVisibility,
+        columnOrder: columnOrder,
+        //
+        setSorting: setSorting,
+        setColumnVisibility: setColumnVisibility,
+        setColumnOrder: setColumnOrder,
+    }); }, [columnOrder, columnVisibility, sorting, table]);
+    // Trigger onChange handler when state changes.
+    n.useEffect(function () {
+        if (state) {
+            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: "mt-8 flow-root" }, { children: jsxRuntime.jsx("div", __assign({ className: "" }, { children: jsxRuntime.jsxs("div", __assign({ className: "inline-block min-w-full py-2 align-middle" }, { children: [jsxRuntime.jsxs("table", __assign({ className: "min-w-full border-separate border-spacing-0" }, { children: [jsxRuntime.jsx("thead", { 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, header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler() }, { 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' &&
+                                                                    '-scale-100'), "aria-hidden": "true" }) })))] }), header.id)); }) }, headerGroup.id)); }) }), !isLoading && (jsxRuntime.jsx("tbody", __assign({ className: styles$7.body.table.body.container }, { 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) &&
+                                                        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) &&
+                                                                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) }))] })));
+};
+
+var styles$7 = {
+    container: '',
+    head: '',
+    body: {
+        container: 'flex flex-col',
+        wrapper: '-my-2',
+        content: '',
+        styleWrapper: 'overflow-scroll w-screen md:w-auto md:overflow-auto pr-12 md:pr-0',
+        table: {
+            container: 'min-w-full divide-y divide-gray-300 ',
+            head: {
+                container: '',
+                row: '',
+                cell: 'py-3.5 px-3 text-left text-sm font-semibold text-gray-900 group',
+                checkbox: 'absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 sm:left-6',
+            },
+            body: {
+                container: 'divide-y divide-gray-200',
+                row: '',
+                cell: 'whitespace-nowrap py-4 px-3 text-sm text-gray-500',
+                checkbox: 'absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 sm:left-6',
+                indicator: 'absolute inset-y-0 left-0 w-0.5 bg-primary-600',
+            },
+        },
+    },
+    foot: '',
+    sortIndicator: {
+        container: 'ml-2 translate-y-1 inline-flex items-center flex-none rounded',
+        isSorted: 'bg-gray-100 text-gray-900 group-hover:bg-gray-200',
+        isNotSorted: 'invisible text-gray-400 group-hover:visible group-focus:visible',
+        icon: {
+            container: 'h-5 w-5',
+        },
+    },
+};
+
 var createColumnHelper = function () {
     return reactTable.createColumnHelper();
 };
@@ -2020,6 +2112,7 @@ exports.PanelPaginationNavigation = PanelPaginationNavigation;
 exports.SlideOverOverlay = SlideOverOverlay;
 exports.TabNavigation = TabNavigation;
 exports.TableList = TableList;
+exports.TableList2 = TableList2;
 exports.VerticalNavigation = VerticalNavigation;
 exports.createColumnHelper = createColumnHelper;
 //# sourceMappingURL=index.js.map