npm - simple-table-core - Versions diffs - 0.6.4 → 0.6.6 - Mend

simple-table-core 0.6.4 → 0.6.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/README.md +46 -60
package/dist/components/SimpleTable/RenderCells.d.ts +1 -1
package/dist/components/SimpleTable/TableContent.d.ts +1 -1
package/dist/components/SimpleTable/TableHeader.d.ts +1 -1
package/dist/components/SimpleTable/TableHorizontalScrollbar.d.ts +1 -1
package/dist/components/SimpleTable/TableRow.d.ts +1 -1
package/dist/components/SimpleTable/TableSection.d.ts +6 -5
package/dist/hooks/useScrollSync.d.ts +3 -0
package/dist/hooks/useScrollbarVisibility.d.ts +6 -0
package/dist/hooks/useWidthSync.d.ts +3 -0
package/dist/index.js +1 -1
package/dist/types/SharedTableProps.d.ts +1 -0
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -4,6 +4,16 @@ Any questions, support or features requests join me on Discord <a href="https://
 Simple Table is a powerful yet lightweight React grid component that provides a flexible, customizable, and high-performance solution for displaying and manipulating tabular data in your applications.
+## Live Demo
+Check out the live demo on CodeSandbox: <a href="https://codesandbox.io/p/sandbox/simple-table-pagination-example-rdjm5d?file=%2Fsrc%2FApp.tsx%3A33%2C24" target="_blank" rel="noopener noreferrer">Simple Table Pagination Example</a>
+<div align="center">
+    <a href="https://github.com/petera2c/simple-table-marketing/blob/main/src/assets/simple-table-demo-fast.gif?raw=true" target="_blank" rel="noopener noreferrer">
+        <img src="https://github.com/petera2c/simple-table-marketing/blob/main/src/assets/simple-table-demo-fast.gif?raw=true" alt="Simple Table Demo" />
+    </a>
+</div>
 ## Key Features
 - **Highly Customizable**: Fully customizable appearance with CSS variables and themes
@@ -23,57 +33,17 @@ For detailed documentation, visit: [Simple Table Documentation](https://docs.sim
 For more information, visit our website: [Simple Table](https://www.simple-table.com/)
-## Live Demo
-Check out the live demo on CodeSandbox: <a href="https://codesandbox.io/p/sandbox/simple-table-pagination-example-rdjm5d?file=%2Fsrc%2FApp.tsx%3A33%2C24" target="_blank" rel="noopener noreferrer">Simple Table Pagination Example</a>
-<div align="center">
-    <a href="https://github.com/petera2c/simple-table-marketing/blob/main/src/assets/simple-table-demo-fast.gif?raw=true" target="_blank" rel="noopener noreferrer">
-        <img src="https://github.com/petera2c/simple-table-marketing/blob/main/src/assets/simple-table-demo-fast.gif?raw=true" alt="Simple Table Demo" />
-    </a>
-</div>
 ## Installation
 ```bash
 # npm
-npm install simple-table-react
+npm install simple-table-core
 # yarn
-yarn add simple-table-react
+yarn add simple-table-core
 # pnpm
-pnpm add simple-table-react
-```
-## Quick Start
-```jsx
-import React, { useState } from "react";
-import SimpleTable from "simple-table-react";
-import "simple-table-react/dist/styles.css";
-const App = () => {
-  const [rows, setRows] = useState([
-    { rowMeta: { rowId: 0 }, rowData: { name: "John", age: 25 } },
-    { rowMeta: { rowId: 1 }, rowData: { name: "Jane", age: 30 } },
-  ]);
-  const headers = [
-    { accessor: "name", label: "Name", width: 200 },
-    { accessor: "age", label: "Age", width: 100 },
-  ];
-  const handleCellChange = ({ accessor, newValue, originalRowIndex }) => {
-    const updatedRows = [...rows];
-    updatedRows[originalRowIndex].rowData[accessor] = newValue;
-    setRows(updatedRows);
-  };
-  return <SimpleTable defaultHeaders={headers} rows={rows} onCellChange={handleCellChange} selectableCells />;
-};
-export default App;
+pnpm add simple-table-core
 ```
 ## Props
@@ -125,8 +95,8 @@ All styles for the Simple Table are customizable through CSS variables. You can
 You can override the following CSS variables to customize the appearance of the table:
 ```css
+/* light theme */
 :root {
-  /* Base variables */
   --st-border-radius: 4px;
   --st-border-width: 1px;
   --st-cell-padding: 8px;
@@ -134,26 +104,42 @@ You can override the following CSS variables to customize the appearance of the
   --st-font-weight-normal: 400;
   --st-font-weight-bold: 600;
   --st-transition-duration: 0.2s;
-  --st-transition-ease: ease-in-out;
+  --st-transition-ease: ease;
   --st-opacity-disabled: 0.5;
   --st-spacing-small: 4px;
   --st-spacing-medium: 8px;
   --st-spacing-large: 16px;
-  /* Colors */
-  --st-border-color: #e0e0e0;
-  --st-text-color: #333;
-  --st-background-color: #fff;
-  --st-header-background-color: #f5f5f5;
-  --st-resize-handle-color: #ccc;
-  --st-separator-border-color: #e0e0e0;
-  --st-odd-row-background-color: #f9f9f9;
-  --st-hover-background-color: #f0f0f0;
-  --st-dragging-background-color: #eaeaea;
-  --st-selected-cell-background-color: rgba(0, 120, 215, 0.1);
-  --st-selected-first-cell-background-color: rgba(0, 120, 215, 0.2);
-  --st-footer-background-color: #f5f5f5;
-  --st-last-group-row-separator-border-color: #4b5eaa;
+  --st-scrollbar-bg-color: transparent;
+  --st-scrollbar-thumb-color: var(--slate-200);
+  --st-border-color: var(--gray-300);
+  --st-odd-row-background-color: var(--white);
+  --st-even-row-background-color: var(--white);
+  --st-header-background-color: var(--white);
+  --st-dragging-background-color: var(--gray-200);
+  --st-selected-cell-background-color: var(--blue-200);
+  --st-selected-first-cell-background-color: var(--blue-200);
+  --st-footer-background-color: var(--white);
+  --st-cell-color: var(--gray-800);
+  --st-cell-odd-row-color: var(--gray-700);
+  --st-edit-cell-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 1px -1px rgba(0, 0, 0, 0.05);
+  --st-selected-cell-color: var(--gray-900);
+  --st-selected-first-cell-color: var(--gray-900);
+  --st-resize-handle-color: var(--blue-300);
+  --st-separator-border-color: var(--slate-100);
+  --st-last-group-row-separator-border-color: var(--slate-300);
+  --st-selected-border-top-color: var(--blue-600);
+  --st-selected-border-bottom-color: var(--blue-600);
+  --st-selected-border-left-color: var(--blue-600);
+  --st-selected-border-right-color: var(--blue-600);
+  --st-checkbox-checked-background-color: var(--blue-600);
+  --st-checkbox-checked-border-color: var(--blue-600);
+  --st-column-editor-background-color: var(--white);
+  --st-column-editor-popout-background-color: var(--white);
+  --st-button-hover-background-color: var(--gray-200);
+  --st-button-active-background-color: var(--blue-800);
+  --st-font-family: "Roboto", sans-serif;
+  --st-editable-cell-focus-border-color: var(--blue-600);
 }
 ```

package/dist/components/SimpleTable/RenderCells.d.ts CHANGED Viewed

@@ -12,5 +12,5 @@ declare const RenderCells: ({ getBorderClass, handleMouseDown, handleMouseOver,
     row: Row;
     rowIndex: number;
     shouldDisplayLastColumnCell: boolean;
-} & Omit<TableBodyProps, "currentRows">) => import("react/jsx-runtime").JSX.Element;
+} & Omit<TableBodyProps, "currentRows" | "headerContainerRef">) => import("react/jsx-runtime").JSX.Element;
 export default RenderCells;

package/dist/components/SimpleTable/TableContent.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { RefObject } from "react";
 import TableBodyProps from "../../types/TableBodyProps";
 import TableHeaderProps from "../../types/TableHeaderProps";
-type OmittedTableProps = "shouldDisplayLastColumnCell" | "pinnedLeftColumns" | "pinnedRightColumns" | "mainTemplateColumns" | "pinnedLeftTemplateColumns" | "pinnedRightTemplateColumns";
+type OmittedTableProps = "headerContainerRef" | "shouldDisplayLastColumnCell" | "pinnedLeftColumns" | "pinnedRightColumns" | "mainTemplateColumns" | "pinnedLeftTemplateColumns" | "pinnedRightTemplateColumns";
 interface TableContentProps extends Omit<TableHeaderProps, OmittedTableProps>, Omit<TableBodyProps, OmittedTableProps> {
     editColumns: boolean;
     pinnedLeftRef: RefObject<HTMLDivElement | null>;

package/dist/components/SimpleTable/TableHeader.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import TableHeaderProps from "../../types/TableHeaderProps";
-declare const TableHeader: ({ allowAnimations, columnResizing, currentRows, draggable, draggedHeaderRef, forceUpdate, headersRef, hiddenColumns, hoveredHeaderRef, isWidthDragging, mainTemplateColumns, onSort, onTableHeaderDragEnd, pinnedLeftColumns, pinnedLeftTemplateColumns, pinnedRightColumns, pinnedRightTemplateColumns, selectableColumns, setIsWidthDragging, setSelectedCells, shouldDisplayLastColumnCell, sort, sortDownIcon, sortUpIcon, tableRef, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableHeader: ({ allowAnimations, columnResizing, currentRows, draggable, draggedHeaderRef, forceUpdate, headerContainerRef, headersRef, hiddenColumns, hoveredHeaderRef, isWidthDragging, mainTemplateColumns, onSort, onTableHeaderDragEnd, pinnedLeftColumns, pinnedLeftTemplateColumns, pinnedRightColumns, pinnedRightTemplateColumns, selectableColumns, setIsWidthDragging, setSelectedCells, shouldDisplayLastColumnCell, sort, sortDownIcon, sortUpIcon, tableRef, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default TableHeader;

package/dist/components/SimpleTable/TableHorizontalScrollbar.d.ts CHANGED Viewed

@@ -5,5 +5,5 @@ declare const TableHorizontalScrollbar: ({ headersRef, pinnedLeftRef, pinnedRigh
     pinnedLeftRef: RefObject<HTMLDivElement | null>;
     pinnedRightRef: RefObject<HTMLDivElement | null>;
     tableRef: RefObject<HTMLDivElement | null>;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default TableHorizontalScrollbar;

package/dist/components/SimpleTable/TableRow.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ declare const TableRow: ({ depth, getNextRowIndex, index, lastGroupRow, pinned,
     index: number;
     lastGroupRow?: boolean | undefined;
     pinned?: "left" | "right" | undefined;
-    props: Omit<TableBodyProps, "currentRows"> & {
+    props: Omit<TableBodyProps, "currentRows" | "headerContainerRef"> & {
         onExpandRowClick: (rowIndex: number) => void;
     };
     row: Row;

package/dist/components/SimpleTable/TableSection.d.ts CHANGED Viewed

@@ -1,12 +1,13 @@
 import Row from "../../types/Row";
 import { RefObject } from "react";
 import TableBodyProps from "../../types/TableBodyProps";
-declare const TableSection: ({ rows, templateColumns, pinned, sectionRef, isRowExpanded, onExpandRowClick, ...props }: {
-    rows: Row[];
-    templateColumns: string;
-    pinned?: "left" | "right" | undefined;
-    sectionRef?: RefObject<HTMLDivElement | null> | undefined;
+declare const TableSection: ({ headerContainerRef, isRowExpanded, onExpandRowClick, pinned, rows, sectionRef, templateColumns, ...props }: {
+    headerContainerRef: RefObject<HTMLDivElement | null>;
     isRowExpanded: (rowId: string | number) => boolean;
     onExpandRowClick: (rowIndex: number) => void;
+    pinned?: "left" | "right" | undefined;
+    rows: Row[];
+    sectionRef?: RefObject<HTMLDivElement | null> | undefined;
+    templateColumns: string;
 } & Omit<TableBodyProps, "currentRows">) => import("react/jsx-runtime").JSX.Element;
 export default TableSection;

package/dist/hooks/useScrollSync.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { RefObject } from "react";
+declare const useScrollSync: (sourceRef: RefObject<HTMLElement | null>, targetRef: RefObject<HTMLElement | null>) => void;
+export default useScrollSync;

package/dist/hooks/useScrollbarVisibility.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { RefObject } from "react";
+declare const useScrollbarVisibility: ({ headerContainerRef, mainSectionRef, }: {
+    headerContainerRef?: RefObject<HTMLElement | null> | undefined;
+    mainSectionRef?: RefObject<HTMLElement | null> | undefined;
+}) => void;
+export default useScrollbarVisibility;

package/dist/hooks/useWidthSync.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { RefObject } from "react";
+declare const useWidthSync: (ref: RefObject<HTMLElement | null>, callback: (width: number) => void) => void;
+export default useWidthSync;

package/dist/index.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{jsxs as e,jsx as n,Fragment as r}from"react/jsx-runtime";import{useState as o,useRef as t,useCallback as a,useEffect as l,useMemo as s,createContext as c,forwardRef as d,useContext as i,useLayoutEffect as u,createElement as g,createRef as b,memo as f,useReducer as v}from"react";var p=function(){return p=Object.assign\|\|function(e){for(var n,r=1,o=arguments.length;r<o;r++)for(var t in n=arguments[r])Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t]);return e},p.apply(this,arguments)};function h(e,n){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&n.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(o=Object.getOwnPropertySymbols(e);t<o.length;t++)n.indexOf(o[t])<0&&Object.prototype.propertyIsEnumerable.call(e,o[t])&&(r[o[t]]=e[o[t]])}return r}function m(e,n,r){if(r\|\|2===arguments.length)for(var o,t=0,a=n.length;t<a;t++)!o&&t in n\|\|(o\|\|(o=Array.prototype.slice.call(n,0,t)),o[t]=n[t]);return e.concat(o\|\|Array.prototype.slice.call(n))}"function"==typeof SuppressedError&&SuppressedError;var w=function(r){var o=r.currentPage,t=r.hideFooter,a=r.nextIcon,l=r.onPageChange,s=r.prevIcon,c=r.rowsPerPage,d=r.shouldPaginate,i=r.totalRows,u=Math.ceil(i/c),g=o>1,b=o<u,f=function(e){e>=1&&e<=u&&l(e)};return t\|\|!d?null:e("div",p({className:"st-footer"},{children:[n("button",p({className:"st-next-prev-btn ".concat(g?"":"disabled"),onClick:function(){return f(o-1)},disabled:!g},{children:s})),n("button",p({className:"st-next-prev-btn ".concat(b?"":"disabled"),onClick:function(){return f(o+1)},disabled:!b},{children:a})),Array.from({length:u},(function(e,r){return n("button",p({onClick:function(){return f(r+1)},className:"st-page-btn ".concat(o===r+1?"active":"")},{children:r+1}),r)}))]}))},k=function(e){var r=e.className;return n("svg",p({className:r,viewBox:"0 0 24 24",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"})}))},x=function(e){var r=e.className;return n("svg",p({className:r,viewBox:"0 0 24 24",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"})}))},y=c({rows:[],tableRows:[]}),R=function(e){var r=e.className;return n("svg",p({className:r,viewBox:"0 0 20 20",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M5.41 11.41L10 6.83l4.59 4.58L16 10l-6-6-6 6z"})}))},C=function(e){var r=e.className;return n("svg",p({className:r,viewBox:"0 0 20 20",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M5.41 7.59L10 12.17l4.59-4.58L16 9l-6 6-6-6z"})}))},D=function(r){var t=r.checked,a=void 0!==t&&t,l=r.children,s=r.onChange,c=o(a),d=c[0],i=c[1];return e("label",p({className:"st-checkbox-label"},{children:[n("input",{checked:d,className:"st-checkbox-input",onChange:function(){var e=!d;i(e),s&&s(e)},type:"checkbox"}),n("span",p({className:"st-checkbox-custom ".concat(d?"st-checked":"")},{children:d&&n("span",{className:"st-checkbox-checkmark"})})),l]}))},E=function(e){var r=e.headers,o=e.open,t=e.position;e.setOpen;var a=e.setHiddenColumns,l=e.hiddenColumns,s="left"===t?"left":"";return n("div",p({className:"st-column-editor-popout ".concat(o?"open":""," ").concat(s),onClick:function(e){return e.stopPropagation()}},{children:n("div",p({className:"st-column-editor-popout-content"},{children:r.map((function(e,r){return n(D,p({checked:l[e.accessor],onChange:function(n){var r;return a(p(p({},l),((r={})[e.accessor]=n,r)))}},{children:e.label}),r)}))}))}))},I=function(r){var t=r.columnEditorText,a=r.editColumns,l=r.editColumnsInitOpen,s=r.headers,c=r.position,d=void 0===c?"right":c,i=r.setHiddenColumns,u=r.hiddenColumns,g=o(l),b=g[0],f=g[1];return a?e("div",p({className:"st-column-editor ".concat(b?"open":""," ").concat(d),onClick:function(){return function(e){f(e)}(!b)}},{children:[n("div",p({className:"st-column-editor-text"},{children:t})),n(E,{headers:s,open:b,position:d,setOpen:f,setHiddenColumns:i,hiddenColumns:u})]})):null};!function(e,n){void 0===n&&(n={});var r=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head\|\|document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===r&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}(':root {\n /* New Variables for Theming /\n --st-resize-handle-width: 3px;\n\n --st-border-radius: 4px;\n --st-border-width: 1px;\n --st-cell-padding: 8px;\n --st-font-size: 1rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 700;\n --st-transition-duration: 0.3s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 4px;\n --st-spacing-medium: 8px;\n --st-spacing-large: 16px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n / Tailwind Colors /\n --white: #fff;\n --black: #000;\n\n --slate-50: #f8fafc;\n --slate-100: #f1f5f9;\n --slate-200: #e2e8f0;\n --slate-300: #cbd5e1;\n --slate-400: #94a3b8;\n --slate-500: #64748b;\n --slate-600: #475569;\n --slate-700: #334155;\n --slate-800: #1e293b;\n --slate-900: #0f172a;\n --slate-950: #020617;\n\n --gray-50: #f9fafb;\n --gray-100: #f3f4f6;\n --gray-200: #e5e7eb;\n --gray-300: #d1d5db;\n --gray-400: #9ca3af;\n --gray-500: #6b7280;\n --gray-600: #4b5563;\n --gray-700: #374151;\n --gray-800: #1f2937;\n --gray-900: #111827;\n --gray-950: #030712;\n\n --zinc-50: #fafafa;\n --zinc-100: #f4f4f5;\n --zinc-200: #e4e4e7;\n --zinc-300: #d4d4d8;\n --zinc-400: #a1a1aa;\n --zinc-500: #71717a;\n --zinc-600: #52525b;\n --zinc-700: #3f3f46;\n --zinc-800: #27272a;\n --zinc-900: #18181b;\n --zinc-950: #09090b;\n\n --neutral-50: #fafafa;\n --neutral-100: #f5f5f5;\n --neutral-200: #e5e5e5;\n --neutral-300: #d4d4d4;\n --neutral-400: #a3a3a3;\n --neutral-500: #737373;\n --neutral-600: #525252;\n --neutral-700: #404040;\n --neutral-800: #262626;\n --neutral-900: #171717;\n --neutral-950: #0a0a0a;\n\n --stone-50: #fafaf9;\n --stone-100: #f5f5f4;\n --stone-200: #e7e5e4;\n --stone-300: #d6d3d1;\n --stone-400: #a8a29e;\n --stone-500: #78716c;\n --stone-600: #57534e;\n --stone-700: #44403c;\n --stone-800: #292524;\n --stone-900: #1c1917;\n --stone-950: #0c0a09;\n\n --red-50: #fef2f2;\n --red-100: #fee2e2;\n --red-200: #fecaca;\n --red-300: #fca5a5;\n --red-400: #f87171;\n --red-500: #ef4444;\n --red-600: #dc2626;\n --red-700: #b91c1c;\n --red-800: #991b1b;\n --red-900: #7f1d1d;\n --red-950: #450a0a;\n\n --orange-50: #fff7ed;\n --orange-100: #ffedd5;\n --orange-200: #fed7aa;\n --orange-300: #fdba74;\n --orange-400: #fb923c;\n --orange-500: #f97316;\n --orange-600: #ea580c;\n --orange-700: #c2410c;\n --orange-800: #9a3412;\n --orange-900: #7c2d12;\n --orange-950: #431407;\n\n --amber-50: #fffbeb;\n --amber-100: #fef3c7;\n --amber-200: #fde68a;\n --amber-300: #fcd34d;\n --amber-400: #fbbf24;\n --amber-500: #f59e0b;\n --amber-600: #d97706;\n --amber-700: #b45309;\n --amber-800: #92400e;\n --amber-900: #78350f;\n --amber-950: #451a03;\n\n --yellow-50: #fefce8;\n --yellow-100: #fef9c3;\n --yellow-200: #fef08a;\n --yellow-300: #fde047;\n --yellow-400: #facc15;\n --yellow-500: #eab308;\n --yellow-600: #ca8a04;\n --yellow-700: #a16207;\n --yellow-800: #854d0e;\n --yellow-900: #713f12;\n --yellow-950: #422006;\n\n --lime-50: #f7fee7;\n --lime-100: #ecfccb;\n --lime-200: #d9f99d;\n --lime-300: #bef264;\n --lime-400: #a3e635;\n --lime-500: #84cc16;\n --lime-600: #65a30d;\n --lime-700: #4d7c0f;\n --lime-800: #3f6212;\n --lime-900: #365314;\n --lime-950: #1a2e05;\n\n --green-50: #f0fdf4;\n --green-100: #dcfce7;\n --green-200: #bbf7d0;\n --green-300: #86efac;\n --green-400: #4ade80;\n --green-500: #22c55e;\n --green-600: #16a34a;\n --green-700: #15803d;\n --green-800: #166534;\n --green-900: #14532d;\n --green-950: #052e16;\n\n --emerald-50: #ecfdf5;\n --emerald-100: #d1fae5;\n --emerald-200: #a7f3d0;\n --emerald-300: #6ee7b7;\n --emerald-400: #34d399;\n --emerald-500: #10b981;\n --emerald-600: #059669;\n --emerald-700: #047857;\n --emerald-800: #065f46;\n --emerald-900: #064e3b;\n --emerald-950: #022c22;\n\n --teal-50: #f0fdfa;\n --teal-100: #ccfbf1;\n --teal-200: #99f6e4;\n --teal-300: #5eead4;\n --teal-400: #2dd4bf;\n --teal-500: #14b8a6;\n --teal-600: #0d9488;\n --teal-700: #0f766e;\n --teal-800: #115e59;\n --teal-900: #134e4a;\n --teal-950: #042f2e;\n\n --cyan-50: #ecfeff;\n --cyan-100: #cffafe;\n --cyan-200: #a5f3fc;\n --cyan-300: #67e8f9;\n --cyan-400: #22d3ee;\n --cyan-500: #06b6d4;\n --cyan-600: #0891b2;\n --cyan-700: #0e7490;\n --cyan-800: #155e75;\n --cyan-900: #164e63;\n --cyan-950: #083344;\n\n --sky-50: #f0f9ff;\n --sky-100: #e0f2fe;\n --sky-200: #bae6fd;\n --sky-300: #7dd3fc;\n --sky-400: #38bdf8;\n --sky-500: #0ea5e9;\n --sky-600: #0284c7;\n --sky-700: #0369a1;\n --sky-800: #075985;\n --sky-900: #0c4a6e;\n --sky-950: #082f49;\n\n --blue-50: #eff6ff;\n --blue-100: #dbeafe;\n --blue-200: #bfdbfe;\n --blue-300: #93c5fd;\n --blue-400: #60a5fa;\n --blue-500: #3b82f6;\n --blue-600: #2563eb;\n --blue-700: #1d4ed8;\n --blue-800: #1e40af;\n --blue-900: #1e3a8a;\n --blue-950: #172554;\n\n --indigo-50: #eef2ff;\n --indigo-100: #e0e7ff;\n --indigo-200: #c7d2fe;\n --indigo-300: #a5b4fc;\n --indigo-400: #818cf8;\n --indigo-500: #6366f1;\n --indigo-600: #4f46e5;\n --indigo-700: #4338ca;\n --indigo-800: #3730a3;\n --indigo-900: #312e81;\n --indigo-950: #1e1b4b;\n\n --violet-50: #f5f3ff;\n --violet-100: #ede9fe;\n --violet-200: #ddd6fe;\n --violet-300: #c4b5fd;\n --violet-400: #a78bfa;\n --violet-500: #8b5cf6;\n --violet-600: #7c3aed;\n --violet-700: #6d28d9;\n --violet-800: #5b21b6;\n --violet-900: #4c1d95;\n --violet-950: #2e1065;\n\n --purple-50: #faf5ff;\n --purple-100: #f3e8ff;\n --purple-200: #e9d5ff;\n --purple-300: #d8b4fe;\n --purple-400: #c084fc;\n --purple-500: #a855f7;\n --purple-600: #9333ea;\n --purple-700: #7e22ce;\n --purple-800: #6b21a8;\n --purple-900: #581c87;\n --purple-950: #3b0764;\n\n --fuchsia-50: #fdf4ff;\n --fuchsia-100: #fae8ff;\n --fuchsia-200: #f5d0fe;\n --fuchsia-300: #f0abfc;\n --fuchsia-400: #e879f9;\n --fuchsia-500: #d946ef;\n --fuchsia-600: #c026d3;\n --fuchsia-700: #a21caf;\n --fuchsia-800: #86198f;\n --fuchsia-900: #701a75;\n --fuchsia-950: #4a044e;\n\n --pink-50: #fdf2f8;\n --pink-100: #fce7f3;\n --pink-200: #fbcfe8;\n --pink-300: #f9a8d4;\n --pink-400: #f472b6;\n --pink-500: #ec4899;\n --pink-600: #db2777;\n --pink-700: #be185d;\n --pink-800: #9d174d;\n --pink-900: #831843;\n --pink-950: #500724;\n\n --rose-50: #fff1f2;\n --rose-100: #ffe4e6;\n --rose-200: #fecdd3;\n --rose-300: #fda4af;\n --rose-400: #fb7185;\n --rose-500: #f43f5e;\n --rose-600: #e11d48;\n --rose-700: #be123c;\n --rose-800: #9f1239;\n --rose-900: #881337;\n --rose-950: #4c0519;\n}\n\n.theme-light {\n / Base Variables /\n --st-border-radius: 4px;\n --st-border-width: 1px;\n --st-cell-padding: 8px;\n --st-font-size: 0.875rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.2s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 4px;\n --st-spacing-medium: 8px;\n --st-spacing-large: 16px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--gray-300); / Light gray for borders /\n --st-odd-row-background-color: var(--white); / White for odd rows /\n --st-even-row-background-color: var(--white); / White for even rows /\n --st-header-background-color: var(--white); / Deep blue for headers /\n --st-dragging-background-color: var(--gray-200); / Light gray for dragging /\n --st-selected-cell-background-color: var(--blue-200); / Gold for selected cells /\n --st-selected-first-cell-background-color: var(--blue-200); / Gold for first selected cell /\n --st-footer-background-color: var(--white); / White for footer /\n --st-cell-color: var(--gray-800); / Dark gray for cell text /\n --st-cell-odd-row-color: var(--gray-700); / Slightly lighter gray for odd row text /\n --st-edit-cell-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 1px -1px rgba(0, 0, 0, 0.05); / Subtle shadow /\n --st-selected-cell-color: var(--gray-900); / Darker gray for selected cell text /\n --st-selected-first-cell-color: var(--gray-900); / Darker gray for first selected cell text /\n --st-resize-handle-color: var(--blue-300); / Darker blue for resize handles /\n --st-separator-border-color: var(--slate-100); / Light gray for separators /\n --st-last-group-row-separator-border-color: var(--slate-300); / Light gray for separators /\n --st-selected-border-top-color: var(--blue-600); / Darker blue for selected borders /\n --st-selected-border-bottom-color: var(--blue-600);\n --st-selected-border-left-color: var(--blue-600);\n --st-selected-border-right-color: var(--blue-600);\n --st-checkbox-checked-background-color: var(--blue-600); / Darker blue for checked checkboxes /\n --st-checkbox-checked-border-color: var(--blue-600);\n --st-column-editor-background-color: var(--white); / White for column editor /\n --st-column-editor-popout-background-color: var(--white); / White for popout editor /\n --st-button-hover-background-color: var(--gray-200); / Light gray for button hover /\n --st-button-active-background-color: var(--blue-800); / Deep blue for button active /\n --st-font-family: "Roboto", sans-serif; / Professional font /\n --st-editable-cell-focus-border-color: var(--blue-600); / Darker blue for editable cell focus /\n}\n\n.theme-dark {\n / Base Variables /\n --st-border-radius: 6px;\n --st-border-width: 1px;\n --st-cell-padding: 10px;\n --st-font-size: 0.875rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.2s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 6px;\n --st-spacing-medium: 10px;\n --st-spacing-large: 20px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-600);\n\n --st-border-color: var(--slate-800);\n --st-odd-row-background-color: var(--slate-800);\n --st-even-row-background-color: var(--slate-900);\n --st-header-background-color: var(--slate-700);\n --st-dragging-background-color: var(--blue-800);\n --st-selected-cell-background-color: var(--blue-700);\n --st-selected-first-cell-background-color: var(--amber-700);\n --st-footer-background-color: var(--slate-900);\n --st-cell-color: var(--white);\n --st-cell-odd-row-color: var(--slate-300);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--white / 0.1), 0 1px 2px -1px var(--white / 0.1);\n --st-selected-cell-color: var(--white);\n --st-selected-first-cell-color: var(--white);\n --st-resize-handle-color: var(--slate-600);\n --st-separator-border-color: var(--slate-500);\n --st-last-group-row-separator-border-color: var(--slate-700);\n --st-selected-border-top-color: var(--blue-700);\n --st-selected-border-bottom-color: var(--blue-700);\n --st-selected-border-left-color: var(--blue-700);\n --st-selected-border-right-color: var(--blue-700);\n --st-checkbox-checked-background-color: var(--blue-700);\n --st-checkbox-checked-border-color: var(--blue-700);\n --st-column-editor-background-color: var(--slate-800);\n --st-column-editor-popout-background-color: var(--slate-800);\n --st-button-hover-background-color: var(--slate-600);\n --st-button-active-background-color: var(--slate-700);\n --st-font-family: "Open Sans", sans-serif;\n --st-editable-cell-focus-border-color: var(--slate-600);\n}\n\n.theme-high-contrast {\n / Base Variables /\n --st-border-radius: 0;\n --st-border-width: 2px;\n --st-cell-padding: 12px;\n --st-font-size: 1rem;\n --st-font-weight-normal: 500;\n --st-font-weight-bold: 800;\n --st-transition-duration: 0s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.7;\n --st-spacing-small: 8px;\n --st-spacing-medium: 12px;\n --st-spacing-large: 24px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: #000000;\n\n --st-border-color: var(--slate-900);\n --st-odd-row-background-color: var(--slate-50);\n --st-even-row-background-color: var(--slate-900);\n --st-header-background-color: var(--slate-900);\n --st-dragging-background-color: var(--yellow-500);\n --st-selected-cell-background-color: var(--slate-900);\n --st-selected-first-cell-background-color: var(--red-500);\n --st-footer-background-color: var(--slate-900);\n --st-cell-color: var(--white);\n --st-cell-odd-row-color: var(--slate-900);\n --st-edit-cell-shadow: none;\n --st-selected-cell-color: var(--white);\n --st-selected-first-cell-color: var(--white);\n --st-resize-handle-color: var(--white);\n --st-separator-border-color: var(--slate-200);\n --st-last-group-row-separator-border-color: var(--slate-900);\n --st-selected-border-top-color: var(--orange-600);\n --st-selected-border-bottom-color: var(--orange-600);\n --st-selected-border-left-color: var(--orange-600);\n --st-selected-border-right-color: var(--orange-600);\n --st-checkbox-checked-background-color: var(--slate-50);\n --st-checkbox-checked-border-color: var(--slate-50);\n --st-column-editor-background-color: var(--slate-900);\n --st-column-editor-popout-background-color: var(--slate-900);\n --st-button-hover-background-color: var(--slate-50);\n --st-button-active-background-color: var(--slate-900);\n --st-font-family: "Arial", sans-serif;\n --st-editable-cell-focus-border-color: var(--orange-600);\n}\n\n.theme-pastel {\n / Base Variables /\n --st-border-radius: 8px;\n --st-border-width: 1px;\n --st-cell-padding: 10px;\n --st-font-size: 0.9rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.3s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 6px;\n --st-spacing-medium: 10px;\n --st-spacing-large: 20px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--purple-200);\n --st-odd-row-background-color: var(--purple-50);\n --st-even-row-background-color: var(--blue-50);\n --st-header-background-color: var(--blue-50);\n --st-dragging-background-color: var(--cyan-50);\n --st-selected-cell-background-color: var(--orange-50);\n --st-selected-first-cell-background-color: var(--amber-50);\n --st-footer-background-color: var(--purple-50);\n --st-cell-color: var(--slate-600);\n --st-cell-odd-row-color: var(--slate-700);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.1), 0 1px 2px -1px var(--black / 0.1);\n --st-selected-cell-color: var(--slate-600);\n --st-selected-first-cell-color: var(--slate-600);\n --st-resize-handle-color: var(--purple-200);\n --st-separator-border-color: var(--purple-200);\n --st-last-group-row-separator-border-color: var(--purple-500);\n --st-selected-border-top-color: var(--amber-500);\n --st-selected-border-bottom-color: var(--amber-500);\n --st-selected-border-left-color: var(--amber-500);\n --st-selected-border-right-color: var(--amber-500);\n --st-checkbox-checked-background-color: var(--purple-200);\n --st-checkbox-checked-border-color: var(--purple-200);\n --st-column-editor-background-color: var(--purple-50);\n --st-column-editor-popout-background-color: var(--purple-50);\n --st-button-hover-background-color: var(--purple-100);\n --st-button-active-background-color: var(--purple-200);\n --st-font-family: "Comic Sans MS", cursive, sans-serif;\n --st-editable-cell-focus-border-color: var(--purple-300);\n}\n\n.theme-vibrant {\n / Base Variables /\n --st-border-radius: 12px;\n --st-border-width: 2px;\n --st-cell-padding: 12px;\n --st-font-size: 1rem;\n --st-font-weight-normal: 500;\n --st-font-weight-bold: 700;\n --st-transition-duration: 0.3s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 8px;\n --st-spacing-medium: 12px;\n --st-spacing-large: 24px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--orange-500);\n --st-odd-row-background-color: var(--orange-100);\n --st-even-row-background-color: var(--orange-200);\n --st-header-background-color: var(--orange-300);\n --st-dragging-background-color: var(--blue-300);\n --st-selected-cell-background-color: var(--blue-400);\n --st-selected-first-cell-background-color: var(--amber-300);\n --st-footer-background-color: var(--orange-50);\n --st-cell-color: var(--orange-900);\n --st-cell-odd-row-color: var(--orange-800);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.2), 0 1px 2px -1px var(--black / 0.2);\n --st-selected-cell-color: var(--orange-900);\n --st-selected-first-cell-color: var(--orange-900);\n --st-resize-handle-color: var(--orange-400);\n --st-separator-border-color: var(--orange-200);\n --st-last-group-row-separator-border-color: var(--orange-500);\n --st-selected-border-top-color: var(--orange-700);\n --st-selected-border-bottom-color: var(--orange-700);\n --st-selected-border-left-color: var(--orange-700);\n --st-selected-border-right-color: var(--orange-700);\n --st-checkbox-checked-background-color: var(--orange-500);\n --st-checkbox-checked-border-color: var(--orange-500);\n --st-column-editor-background-color: var(--orange-100);\n --st-column-editor-popout-background-color: var(--orange-100);\n --st-button-hover-background-color: var(--orange-300);\n --st-button-active-background-color: var(--orange-400);\n --st-font-family: "Lobster", cursive;\n --st-editable-cell-focus-border-color: var(--orange-600);\n}\n\n.theme-solarized-light {\n / Base Variables /\n --st-border-radius: 4px;\n --st-border-width: 1px;\n --st-cell-padding: 8px;\n --st-font-size: 0.875rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.2s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 4px;\n --st-spacing-medium: 8px;\n --st-spacing-large: 16px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--yellow-300);\n --st-odd-row-background-color: var(--yellow-50);\n --st-even-row-background-color: var(--yellow-200);\n --st-header-background-color: var(--yellow-200);\n --st-dragging-background-color: var(--yellow-300);\n --st-selected-cell-background-color: var(--slate-400);\n --st-selected-first-cell-background-color: var(--amber-600);\n --st-footer-background-color: var(--yellow-50);\n --st-cell-color: var(--slate-600);\n --st-cell-odd-row-color: var(--slate-700);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.1), 0 1px 2px -1px var(--black / 0.1);\n --st-selected-cell-color: var(--slate-600);\n --st-selected-first-cell-color: var(--slate-600);\n --st-resize-handle-color: var(--slate-400);\n --st-separator-border-color: var(--yellow-300);\n --st-last-group-row-separator-border-color: var(--yellow-500);\n --st-selected-border-top-color: var(--yellow-600);\n --st-selected-border-bottom-color: var(--yellow-600);\n --st-selected-border-left-color: var(--yellow-600);\n --st-selected-border-right-color: var(--yellow-600);\n --st-checkbox-checked-background-color: var(--slate-400);\n --st-checkbox-checked-border-color: var(--slate-400);\n --st-column-editor-background-color: var(--yellow-200);\n --st-column-editor-popout-background-color: var(--yellow-200);\n --st-button-hover-background-color: var(--yellow-200);\n --st-button-active-background-color: var(--slate-400);\n --st-font-family: "Georgia", serif;\n --st-editable-cell-focus-border-color: var(--yellow-400);\n}\n\n.theme-solarized-dark {\n / Base Variables /\n --st-border-radius: 4px;\n --st-border-width: 1px;\n --st-cell-padding: 8px;\n --st-font-size: 0.875rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.2s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 4px;\n --st-spacing-medium: 8px;\n --st-spacing-large: 16px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-600);\n\n --st-border-color: var(--slate-800);\n --st-odd-row-background-color: var(--slate-900);\n --st-even-row-background-color: var(--slate-800);\n --st-header-background-color: var(--slate-800);\n --st-dragging-background-color: var(--slate-800);\n --st-selected-cell-background-color: var(--slate-600);\n --st-selected-first-cell-background-color: var(--amber-600);\n --st-footer-background-color: var(--slate-900);\n --st-cell-color: var(--slate-300);\n --st-cell-odd-row-color: var(--slate-400);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--white / 0.1), 0 1px 2px -1px var(--white / 0.1);\n --st-selected-cell-color: var(--slate-300);\n --st-selected-first-cell-color: var(--slate-300);\n --st-resize-handle-color: var(--slate-600);\n --st-separator-border-color: var(--slate-400);\n --st-last-group-row-separator-border-color: var(--slate-600);\n --st-selected-border-top-color: var(--blue-800);\n --st-selected-border-bottom-color: var(--blue-800);\n --st-selected-border-left-color: var(--blue-800);\n --st-selected-border-right-color: var(--blue-800);\n --st-checkbox-checked-background-color: var(--slate-600);\n --st-checkbox-checked-border-color: var(--slate-600);\n --st-column-editor-background-color: var(--slate-800);\n --st-column-editor-popout-background-color: var(--slate-800);\n --st-button-hover-background-color: var(--slate-600);\n --st-button-active-background-color: var(--slate-800);\n --st-font-family: "Courier New", monospace;\n --st-editable-cell-focus-border-color: var(--blue-800);\n}\n\n.theme-ocean {\n / Base Variables /\n --st-border-radius: 6px;\n --st-border-width: 1px;\n --st-cell-padding: 10px;\n --st-font-size: 0.9rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.3s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 6px;\n --st-spacing-medium: 10px;\n --st-spacing-large: 20px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--cyan-700);\n --st-odd-row-background-color: var(--cyan-50);\n --st-even-row-background-color: var(--cyan-100);\n --st-header-background-color: var(--cyan-100);\n --st-dragging-background-color: var(--cyan-300);\n --st-selected-cell-background-color: var(--cyan-700);\n --st-selected-first-cell-background-color: var(--slate-900);\n --st-footer-background-color: var(--cyan-50);\n --st-cell-color: var(--slate-900);\n --st-cell-odd-row-color: var(--cyan-700);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.1), 0 1px 2px -1px var(--black / 0.1);\n --st-selected-cell-color: var(--slate-900);\n --st-selected-first-cell-color: var(--slate-900);\n --st-resize-handle-color: var(--cyan-300);\n --st-separator-border-color: var(--cyan-200);\n --st-last-group-row-separator-border-color: var(--cyan-500);\n --st-selected-border-top-color: var(--blue-700);\n --st-selected-border-bottom-color: var(--blue-700);\n --st-selected-border-left-color: var(--blue-700);\n --st-selected-border-right-color: var(--blue-700);\n --st-checkbox-checked-background-color: var(--cyan-700);\n --st-checkbox-checked-border-color: var(--cyan-700);\n --st-column-editor-background-color: var(--cyan-100);\n --st-column-editor-popout-background-color: var(--cyan-100);\n --st-button-hover-background-color: var(--cyan-300);\n --st-button-active-background-color: var(--cyan-700);\n --st-font-family: "Verdana", sans-serif;\n --st-editable-cell-focus-border-color: var(--cyan-500);\n}\n\n.theme-forest {\n / Base Variables /\n --st-border-radius: 4px;\n --st-border-width: 1px;\n --st-cell-padding: 8px;\n --st-font-size: 0.875rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.2s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 4px;\n --st-spacing-medium: 8px;\n --st-spacing-large: 16px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--green-800);\n --st-odd-row-background-color: var(--green-50);\n --st-even-row-background-color: var(--green-100);\n --st-header-background-color: var(--green-100);\n --st-dragging-background-color: var(--green-400);\n --st-selected-cell-background-color: var(--green-700);\n --st-selected-first-cell-background-color: var(--green-900);\n --st-footer-background-color: var(--green-50);\n --st-cell-color: var(--green-900);\n --st-cell-odd-row-color: var(--green-700);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.1), 0 1px 2px -1px var(--black / 0.1);\n --st-selected-cell-color: var(--green-900);\n --st-selected-first-cell-color: var(--green-900);\n --st-resize-handle-color: var(--green-400);\n --st-separator-border-color: var(--green-200);\n --st-last-group-row-separator-border-color: var(--green-500);\n --st-selected-border-top-color: var(--green-600);\n --st-selected-border-bottom-color: var(--green-600);\n --st-selected-border-left-color: var(--green-600);\n --st-selected-border-right-color: var(--green-600);\n --st-checkbox-checked-background-color: var(--green-700);\n --st-checkbox-checked-border-color: var(--green-700);\n --st-column-editor-background-color: var(--green-100);\n --st-column-editor-popout-background-color: var(--green-100);\n --st-button-hover-background-color: var(--green-400);\n --st-button-active-background-color: var(--green-700);\n --st-font-family: "Tahoma", sans-serif;\n --st-editable-cell-focus-border-color: var(--green-600);\n}\n\n.theme-desert {\n / Base Variables /\n --st-border-radius: 8px;\n --st-border-width: 1px;\n --st-cell-padding: 10px;\n --st-font-size: 0.9rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.3s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 6px;\n --st-spacing-medium: 10px;\n --st-spacing-large: 20px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--amber-600);\n --st-odd-row-background-color: var(--amber-50);\n --st-even-row-background-color: var(--amber-100);\n --st-header-background-color: var(--amber-100);\n --st-dragging-background-color: var(--amber-300);\n --st-selected-cell-background-color: var(--amber-600);\n --st-selected-first-cell-background-color: var(--amber-800);\n --st-footer-background-color: var(--amber-50);\n --st-cell-color: var(--amber-800);\n --st-cell-odd-row-color: var(--amber-600);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.1), 0 1px 2px -1px var(--black / 0.1);\n --st-selected-cell-color: var(--amber-800);\n --st-selected-first-cell-color: var(--amber-800);\n --st-resize-handle-color: var(--amber-300);\n --st-separator-border-color: var(--amber-200);\n --st-last-group-row-separator-border-color: var(--amber-500);\n --st-selected-border-top-color: var(--amber-700);\n --st-selected-border-bottom-color: var(--amber-700);\n --st-selected-border-left-color: var(--amber-700);\n --st-selected-border-right-color: var(--amber-700);\n --st-checkbox-checked-background-color: var(--amber-600);\n --st-checkbox-checked-border-color: var(--amber-600);\n --st-column-editor-background-color: var(--amber-100);\n --st-column-editor-popout-background-color: var(--amber-100);\n --st-button-hover-background-color: var(--amber-300);\n --st-button-active-background-color: var(--amber-600);\n --st-font-family: "Times New Roman", serif;\n --st-editable-cell-focus-border-color: var(--amber-700);\n}\n\n.theme-bubblegum {\n / Base Variables /\n --st-border-radius: 16px;\n --st-border-width: 2px;\n --st-cell-padding: 12px;\n --st-font-size: 1rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.3s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 8px;\n --st-spacing-medium: 12px;\n --st-spacing-large: 24px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--pink-500);\n --st-odd-row-background-color: var(--pink-50);\n --st-even-row-background-color: var(--pink-100);\n --st-header-background-color: var(--pink-200);\n --st-dragging-background-color: var(--pink-300);\n --st-selected-cell-background-color: var(--pink-400);\n --st-selected-first-cell-background-color: var(--pink-600);\n --st-footer-background-color: var(--pink-50);\n --st-cell-color: var(--pink-900);\n --st-cell-odd-row-color: var(--pink-800);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.1), 0 1px 2px -1px var(--black / 0.1);\n --st-selected-cell-color: var(--pink-900);\n --st-selected-first-cell-color: var(--pink-900);\n --st-resize-handle-color: var(--pink-400);\n --st-separator-border-color: var(--pink-200);\n --st-last-group-row-separator-border-color: var(--pink-500);\n --st-selected-border-top-color: var(--pink-700);\n --st-selected-border-bottom-color: var(--pink-700);\n --st-selected-border-left-color: var(--pink-700);\n --st-selected-border-right-color: var(--pink-700);\n --st-checkbox-checked-background-color: var(--pink-500);\n --st-checkbox-checked-border-color: var(--pink-500);\n --st-column-editor-background-color: var(--pink-100);\n --st-column-editor-popout-background-color: var(--pink-100);\n --st-button-hover-background-color: var(--pink-300);\n --st-button-active-background-color: var(--pink-400);\n --st-font-family: "Pacifico", cursive;\n --st-editable-cell-focus-border-color: var(--pink-600);\n}\n\n.theme-90s {\n / Base Variables /\n --st-border-radius: 0;\n --st-border-width: 2px;\n --st-cell-padding: 8px;\n --st-font-size: 0.875rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 700;\n --st-transition-duration: 0.1s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 4px;\n --st-spacing-medium: 8px;\n --st-spacing-large: 16px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--gray-500);\n --st-odd-row-background-color: var(--gray-100);\n --st-even-row-background-color: var(--gray-200);\n --st-header-background-color: var(--gray-300);\n --st-dragging-background-color: var(--gray-400);\n --st-selected-cell-background-color: var(--gray-500);\n --st-selected-first-cell-background-color: var(--gray-600);\n --st-footer-background-color: var(--gray-100);\n --st-cell-color: var(--gray-900);\n --st-cell-odd-row-color: var(--gray-800);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.1), 0 1px 2px -1px var(--black / 0.1);\n --st-selected-cell-color: var(--gray-900);\n --st-selected-first-cell-color: var(--gray-900);\n --st-resize-handle-color: var(--gray-400);\n --st-separator-border-color: var(--gray-200);\n --st-last-group-row-separator-border-color: var(--gray-500);\n --st-selected-border-top-color: var(--gray-700);\n --st-selected-border-bottom-color: var(--gray-700);\n --st-selected-border-left-color: var(--gray-700);\n --st-selected-border-right-color: var(--gray-700);\n --st-checkbox-checked-background-color: var(--gray-500);\n --st-checkbox-checked-border-color: var(--gray-500);\n --st-column-editor-background-color: var(--gray-200);\n --st-column-editor-popout-background-color: var(--gray-200);\n --st-button-hover-background-color: var(--gray-300);\n --st-button-active-background-color: var(--gray-400);\n --st-font-family: "Courier New", monospace;\n --st-editable-cell-focus-border-color: var(--gray-600);\n}\n\n/ Global styles /\n {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: var(--st-font-family);\n scrollbar-color: var(--st-scrollbar-thumb-color) var(--st-scrollbar-bg-color);\n scrollbar-width: thin;\n}\n\n/* Apply Nunito as the default font /\nbody {\n font-size: var(--st-font-size);\n font-weight: var(--st-font-weight-normal);\n}\n\n/ Wrapper for the table /\n.st-wrapper {\n position: relative;\n border: var(--st-border-width) solid var(--st-border-color);\n border-radius: var(--st-border-radius);\n max-height: 100dvh;\n overflow: hidden;\n}\n\n.st-table-wrapper-container {\n position: relative;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n}\n.st-table-wrapper {\n position: relative;\n display: flex;\n overflow: auto;\n height: 100%;\n width: 100%;\n}\n.st-table-content {\n display: flex;\n flex-direction: column;\n}\n\n/ Header /\n.st-table-header-container {\n display: flex;\n}\n\n.st-table-header-container::after {\n content: "";\n display: block;\n width: 11px;\n flex-shrink: 0;\n background-color: var(--st-header-background-color);\n border-bottom: var(--st-border-width) solid var(--st-border-color);\n}\n\n.st-header-pinned-left,\n.st-header-main,\n.st-header-pinned-right {\n display: grid;\n}\n.st-header-pinned-left {\n border-right: var(--st-border-width) solid var(--st-border-color);\n}\n.st-header-pinned-right {\n border-left: var(--st-border-width) solid var(--st-border-color);\n}\n.st-header-main {\n overflow: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n.st-header-main::-webkit-scrollbar {\n display: none;\n}\n\n/ Body /\n.st-table-body-container {\n display: flex;\n width: 100%;\n overflow: auto;\n height: max-content;\n / min-height: calc(100% - 40px); /\n}\n.st-table-body-main,\n.st-table-body-pinned-left,\n.st-table-body-pinned-right {\n display: grid;\n height: max-content;\n / min-height 100% - table header height /\n / min-height: calc(100% - 40px); /\n}\n.st-table-body-pinned-left {\n border-right: var(--st-border-width) solid var(--st-border-color);\n}\n.st-table-body-main {\n overflow: auto;\n scrollbar-width: none;\n}\n\n.st-table-body-pinned-right {\n border-left: var(--st-border-width) solid var(--st-border-color);\n}\n\n/ Styles for table header cells /\n.st-header-cell {\n position: sticky;\n top: 0;\n background-color: var(--st-header-background-color);\n z-index: 1;\n font-weight: var(--st-font-weight-bold);\n\n display: flex;\n align-items: center;\n gap: var(--st-spacing-small);\n border-top: var(--st-border-width) solid transparent;\n border-bottom: var(--st-border-width) solid var(--st-border-color);\n}\n.st-header-cell.clickable {\n cursor: pointer;\n}\n.st-header-cell.draggable {\n cursor: grab;\n}\n\n/ Common styles for table header and cells /\n.st-header-cell,\n.st-cell {\n display: flex;\n align-items: center;\n color: var(--slate-800);\n overflow: hidden;\n gap: var(--st-spacing-small);\n / mix-blend-mode: multiply; /\n}\n.st-header-cell.right-aligned,\n.st-cell.right-aligned {\n justify-content: flex-end;\n text-align: right;\n}\n.st-cell.right-aligned {\n padding-right: calc(var(--st-cell-padding) + var(--st-spacing-small) + var(--st-resize-handle-width));\n}\n.st-header-cell.right-aligned > .st-header-label {\n text-align: right;\n}\n\n.st-cell.clickable {\n cursor: pointer;\n}\n\n.st-header-cell,\n.st-cell,\n.st-cell-editing {\n width: 100%;\n height: 40px;\n}\n\n.st-cell-editing {\n position: relative;\n}\n\n.st-header-label {\n flex: 1;\n color: var(--st-cell-color);\n}\n\n.st-header-label,\n.st-cell {\n user-select: none;\n padding: var(--st-cell-padding);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n}\n.st-cell {\n position: relative;\n border: var(--st-border-width) solid transparent;\n}\n\n.st-cell-depth-1 {\n padding-left: calc(var(--st-cell-padding) 4);\n}\n.st-cell-depth-2 {\n padding-left: calc(var(--st-cell-padding) * 5);\n}\n.st-cell-depth-3 {\n padding-left: calc(var(--st-cell-padding) * 6);\n}\n.st-cell-depth-4 {\n padding-left: calc(var(--st-cell-padding) * 7);\n}\n.st-cell-depth-5 {\n padding-left: calc(var(--st-cell-padding) * 8);\n}\n.st-cell-depth-6 {\n padding-left: calc(var(--st-cell-padding) * 9);\n}\n.st-cell-depth-7 {\n padding-left: calc(var(--st-cell-padding) * 10);\n}\n\n.st-sort-icon-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.st-sort-icon {\n fill: var(--slate-500);\n}\n\n.st-header-resize-handle {\n top: 0;\n right: 0;\n width: var(--st-resize-handle-width);\n height: 12px;\n cursor: col-resize;\n background-color: var(--st-resize-handle-color);\n}\n\n.st-row-separator {\n height: 1px;\n background-color: var(--st-separator-border-color);\n grid-column: 1 / -1;\n}\n.st-row-separator.st-last-group-row {\n background-color: var(--st-last-group-row-separator-border-color);\n}\n.st-cell-even-row {\n background-color: var(--st-even-row-background-color);\n}\n\n.st-cell-odd-row:not(.st-cell-selected) {\n background-color: var(--st-odd-row-background-color);\n color: var(--st-cell-odd-row-color);\n}\n.st-cell:not(.st-cell-odd-row):not(.st-cell-selected) {\n color: var(--st-cell-color);\n}\n.st-last-group-row {\n}\n\n/* Style for a cell when it is being dragged /\n.st-dragging {\n background-color: var(--st-dragging-background-color);\n}\n\n/ Style for selected table cells /\n.st-cell-selected {\n background-color: var(--st-selected-cell-background-color);\n color: var(--st-selected-cell-color);\n}\n\n/ Style for the first selected table cell /\n.st-cell-selected-first {\n background-color: var(--st-selected-first-cell-background-color);\n color: var(--st-selected-first-cell-color);\n}\n\n/ Border for selected cells /\n.st-selected-top-border {\n border-top: var(--st-border-width) solid var(--st-selected-border-top-color);\n}\n\n.st-selected-bottom-border {\n border-bottom: var(--st-border-width) solid var(--st-selected-border-bottom-color);\n}\n\n.st-selected-left-border {\n border-left: var(--st-border-width) solid var(--st-selected-border-left-color);\n}\n\n.st-selected-right-border {\n border-right: var(--st-border-width) solid var(--st-selected-border-right-color);\n}\n\n.st-horizontal-scrollbar-left,\n.st-horizontal-scrollbar-right {\n background-color: var(--st-scrollbar-bg-color);\n}\n.st-horizontal-scrollbar-middle {\n overflow-x: scroll;\n}\n.st-horizontal-scrollbar-middle > div {\n padding-bottom: 0.01px;\n transform: translateY(1px);\n}\n\n.st-horizontal-scrollbar-container {\n display: flex;\n align-items: center;\n}\n.st-footer {\n display: flex;\n align-items: center;\n background-color: var(--st-footer-background-color);\n padding: var(--st-spacing-medium);\n border-top: var(--st-border-width) solid var(--st-border-color);\n}\n\n.st-next-prev-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--st-spacing-small);\n cursor: pointer;\n background-color: transparent;\n border: none;\n border-radius: var(--st-border-radius);\n transition: background-color var(--st-transition-duration) var(--st-transition-ease);\n}\n.st-next-prev-btn {\n fill: var(--slate-600);\n}\n.disabled > .st-next-prev-icon {\n cursor: not-allowed;\n fill: var(--slate-400);\n}\n\n.st-next-prev-btn:not(.disabled):hover {\n background-color: var(--slate-100);\n}\n\n.st-page-btn {\n margin-left: var(--st-spacing-small);\n padding: var(--st-spacing-small);\n cursor: pointer;\n background-color: transparent;\n color: var(--slate-600);\n border: none;\n border-radius: var(--st-border-radius);\n transition: background-color var(--st-transition-duration) var(--st-transition-ease);\n}\n\n.st-page-btn:hover {\n background-color: var(--st-button-hover-background-color);\n}\n\n.st-page-btn.active {\n background-color: var(--st-button-active-background-color);\n color: white;\n}\n\n.editable-cell-input {\n position: absolute;\n top: 0;\n left: 0;\n border-radius: var(--st-border-radius);\n border: var(--st-border-width) solid var(--st-border-color);\n box-shadow: var(--st-edit-cell-shadow-color);\n z-index: 1;\n outline: none;\n height: 100%;\n width: 100%;\n padding: var(--st-cell-padding);\n font-size: var(--st-font-size);\n}\n.editable-cell-input:focus {\n border: var(--st-border-width) solid var(--st-editable-cell-focus-border-color);\n}\n.st-column-editor {\n position: relative;\n user-select: none;\n background: var(--st-footer-background-color);\n border-left: var(--st-border-width) solid var(--st-border-color);\n cursor: pointer;\n color: var(--slate-500);\n flex-shrink: 0;\n}\n\n.st-column-editor-text {\n padding: var(--st-spacing-medium) var(--st-spacing-small);\n writing-mode: vertical-rl;\n z-index: 2;\n}\n\n.st-column-editor.open,\n.st-column-editor.open .st-column-editor-text {\n background-color: var(--st-column-editor-background-color);\n}\n\n.st-column-editor-popout {\n position: absolute;\n top: 0;\n right: calc(100% + 1px);\n z-index: 1;\n height: 100%;\n background-color: var(--st-column-editor-popout-background-color);\n transition: width var(--st-transition-duration) var(--st-transition-ease);\n overflow: hidden;\n width: 0;\n}\n.st-column-editor-popout-content {\n display: flex;\n flex-direction: column;\n overflow: auto;\n gap: var(--st-spacing-small);\n padding: var(--st-spacing-medium) var(--st-spacing-small);\n border-left: var(--st-border-width) solid var(--st-border-color);\n height: 100%;\n}\n\n.st-column-editor-popout.open {\n width: 200px;\n}\n\n.st-column-editor-popout.left {\n transform: translateX(-100%);\n}\n\n.st-column-editor-popout.open.left {\n transform: translateX(0);\n}\n\n/ Checkbox styles /\n.st-checkbox-label {\n display: flex;\n align-items: center;\n cursor: pointer;\n gap: var(--st-spacing-medium);\n}\n\n.st-checkbox-input {\n display: none; / Hide the default checkbox /\n}\n\n.st-checkbox-custom {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border: var(--st-border-width) solid var(--slate-300);\n border-radius: var(--st-border-radius);\n background-color: white;\n transition: background-color var(--st-transition-duration) var(--st-transition-ease),\n border-color var(--st-transition-duration) var(--st-transition-ease);\n}\n\n.st-checkbox-custom.st-checked {\n background-color: var(--st-checkbox-checked-background-color);\n border-color: var(--st-checkbox-checked-border-color);\n}\n\n.st-checkbox-checkmark {\n width: 6px;\n height: 11px;\n border: solid white;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n\n@keyframes slide-in-left {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes slide-in-right {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n/ Group Header Styles /\n.st-group-header {\n background-color: var(--st-header-background-color);\n cursor: pointer;\n user-select: none;\n height: 40px;\n display: flex;\n align-items: center;\n border-bottom: var(--st-border-width) solid var(--st-border-color);\n color: var(--st-cell-color);\n font-weight: var(--st-font-weight-bold);\n transition: background-color var(--st-transition-duration) var(--st-transition-ease);\n}\n\n.st-group-header:hover {\n background-color: var(--st-button-hover-background-color);\n}\n\n.st-group-header-content {\n display: flex;\n align-items: center;\n gap: var(--st-spacing-medium);\n}\n\n.st-group-toggle-icon {\n font-size: 0.8em;\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.st-group-name {\n font-weight: var(--st-font-weight-bold);\n}\n\n.st-group-count {\n color: var(--st-cell-odd-row-color);\n font-size: 0.9em;\n}\n\n/ Animation for expand/collapse /\n.st-group-header.expanded .st-group-toggle-icon {\n transform: rotate(0deg);\n transition: transform var(--st-transition-duration) var(--st-transition-ease);\n}\n\n.st-group-header.collapsed .st-group-toggle-icon {\n transform: rotate(-90deg);\n transition: transform var(--st-transition-duration) var(--st-transition-ease);\n}\n');var z,S=function(e){var n=e.accessor,r=e.rowIndex;return"cell-".concat(n,"-").concat(r)},N=function(e){var n=e.hiddenColumns,r=e.header,o=e.pinned;return n[r.accessor]?null:!o&&!r.pinned\|\|r.pinned===o\|\|null},H=function(r){var o=r.value,t=r.onBlur,a=r.onChange;return e("select",p({value:o.toString(),onBlur:t,onChange:function(e){var n=e.target.value;a("true"===n)}},{children:[n("option",p({value:"true"},{children:"True"})),n("option",p({value:"false"},{children:"False"}))]}))},L=function(e){var r=e.defaultValue,o=e.onBlur,a=e.onChange,l=t(null);return n("input",{className:"editable-cell-input",ref:l,autoFocus:!0,type:"text",defaultValue:null!=r?r:"",onBlur:o,onChange:function(e){var n=e.target.value;a(n)}})},M=function(e){var r=e.defaultValue,o=e.onBlur,a=e.onChange,l=t(null);return n("input",{className:"editable-cell-input",ref:l,autoFocus:!0,defaultValue:r.toString(),onBlur:o,onChange:function(e){var n=e.target.value;/^\d\.?\d$/.test(n)&&a(n)}})},T=function(e){var o=e.onChange,t=e.setIsEditing,a=e.value,l=function(e){null==o\|\|o(e)},s=function(){t(!1)};return n(r,{children:"string"==typeof a\|\|null==a?n(L,{defaultValue:a,onBlur:s,onChange:l}):"boolean"==typeof a?n(H,{onBlur:s,onChange:l,value:a}):"number"==typeof a?n(M,{defaultValue:a,onBlur:s,onChange:l}):null})},O=0,B=function(){return function(e){var n=e.callback,r=e.callbackProps,o=e.limit,t=Date.now();(0===O\|\|t-O>=o)&&(O=t,n(r))}},A=Date.now(),P={screenX:0,screenY:0},W=function(e){var n,r,o=e.draggedHeaderRef,a=e.headersRef,s=e.hoveredHeaderRef,c=e.onTableHeaderDragEnd,d=(n=a.current,r=t(n),l((function(){r.current=n}),[n]),r.current);return{handleDragStart:function(e){o.current=e,A=Date.now()},handleDragOver:function(e){var n,r=e.event,t=e.hoveredHeader;if(r.preventDefault(),a.current){var l=r.currentTarget.getAnimations().some((function(e){return"running"===e.playState})),i=r.screenX,u=r.screenY,g=Math.sqrt(Math.pow(i-P.screenX,2)+Math.pow(u-P.screenY,2));s.current=t;var b=m([],a.current,!0),f=b.findIndex((function(e){var n;return e.accessor===(null===(n=o.current)\|\|void 0===n?void 0:n.accessor)})),v=b.findIndex((function(e){return e.accessor===t.accessor})),p=b.splice(f,1)[0];if(b.splice(v,0,p),!(l\|\|t.accessor===(null===(n=o.current)\|\|void 0===n?void 0:n.accessor)\|\|null===o.current\|\|g<10\|\|void 0===f\|\|void 0===v\|\|JSON.stringify(b)===JSON.stringify(a.current))){var h=Date.now();JSON.stringify(b)===JSON.stringify(d)&&h-A<800&&g<50\|\|(A=h,P={screenX:i,screenY:u},c(b))}}},handleDragEnd:function(){o.current=null,s.current=null}}},U=d((function(r,t){var a,s=r.borderClass,c=r.cellHasChildren,d=r.colIndex,u=r.content,g=r.depth,b=r.draggedHeaderRef,f=r.header,v=r.headersRef,h=r.hoveredHeaderRef,m=r.isRowExpanded,w=r.isSelected,k=r.isTopLeftCell,R=r.onCellChange,D=r.onExpandRowClick,E=r.onMouseDown,I=r.onMouseOver,z=r.onTableHeaderDragEnd,N=r.row,H=r.rowIndex,L=i(y),M=L.rows,O=L.tableRows,A=o(u),P=A[0],U=A[1],j=o(!1),V=j[0],G=j[1],X=W({draggedHeaderRef:b,headersRef:v,hoveredHeaderRef:h,onTableHeaderDragEnd:z}).handleDragOver,F=B(),J=Boolean(null==f?void 0:f.isEditable),Y=H%2==0,q="st-cell ".concat(g>0&&f.expandable?"st-cell-depth-".concat(g):""," ").concat(w?k?"st-cell-selected-first-cell ".concat(s):"st-cell-selected ".concat(s):""," ").concat(Y?"st-cell-odd-row":"st-cell-even-row"," ").concat(J?"clickable":""," ").concat("right"===f.align?"right-aligned":"");l((function(){"object"!=typeof u&&U(u)}),[u]),l((function(){}),[f.accessor,P,M,null===(a=N.rowMeta)\|\|void 0===a?void 0:a.rowId,O]);return V?n("div",p({className:"st-cell-editing ".concat(Y?"st-cell-odd-row":"st-cell-even-row"),id:S({accessor:f.accessor,rowIndex:H+1})},{children:n(T,{onChange:function(e){var n;U(e),null==R\|\|R({accessor:f.accessor,newValue:e,newRowIndex:H,originalRowIndex:null===(n=N.rowMeta)\|\|void 0===n?void 0:n.rowId,row:N})},setIsEditing:G,value:P})})):e("div",p({className:q,id:S({accessor:f.accessor,rowIndex:H+1}),onDoubleClick:function(){return f.isEditable&&G(!0)},onMouseDown:function(){return E(H,d)},onMouseOver:function(){return I(H,d)},onDragOver:function(e){return F({callback:X,callbackProps:{event:e,hoveredHeader:f},limit:50})},ref:t},{children:[f.expandable&&c?m(N.rowMeta.rowId)?n("div",p({className:"st-sort-icon-container",onClick:function(){return D(N.rowMeta.rowId)}},{children:n(C,{className:"st-sort-icon"})})):n("div",p({className:"st-sort-icon-container",onClick:function(){return D(N.rowMeta.rowId)}},{children:n(x,{className:"st-sort-icon"})})):null,n("span",{children:P})]}))})),j=d((function(e,r){return e.visible?n("div",{className:"st-cell",ref:r}):n("div",{ref:r})})),V=function(e){var r=e.lastGroupRow;return n("div",{className:"st-row-separator ".concat(r?"st-last-group-row":"")})},G=function(e){var o=e.allowAnimations,t=e.children,a=h(e,["allowAnimations","children"]);return o?n(X,p({},a,{children:t})):n(r,{children:t})},X=function(e){var a=e.allowHorizontalAnimate,s=void 0===a\|\|a,c=e.children,d=e.draggedHeaderRef,i=e.isBody,g=e.pauseAnimation,b=e.rowIndex,f=e.tableRef,v=e.headersRef,p=t(!1),h=o({}),m=h[0],w=h[1],k=t({}),x=v.current;return u((function(){if(x){var e=function(e){var n=e.currentHeaders,r=e.draggedHeaderRef,o=e.rowIndex,t={};return n.forEach((function(e){var n;if(e){var a=document.getElementById(S({accessor:e.accessor,rowIndex:o}));if(a){var l=a.getAnimations().some((function(e){return"running"===e.playState})),s=a.getBoundingClientRect();l&&(null===(n=null==r?void 0:r.current)\|\|void 0===n?void 0:n.accessor)!==e.accessor?t[e.accessor]=!1:t[e.accessor]=s}}})),t}({currentHeaders:x,draggedHeaderRef:d,rowIndex:b});JSON.stringify(e)!==JSON.stringify(m)&&(k.current=m,w(e))}}),[m,x,d,i,b]),u((function(){var e=f.current,n=function(){p.current=!0},r=function(){p.current=!1};return null==e\|\|e.addEventListener("scroll",n),null==e\|\|e.addEventListener("scrollend",r),function(){null==e\|\|e.removeEventListener("scroll",n),null==e\|\|e.removeEventListener("scrollend",r)}}),[d,f]),l((function(){g\|\|p.current\|\|Object.keys(k.current).length&&x&&x.forEach((function(e){var n=document.getElementById(S({accessor:e.accessor,rowIndex:b}));if(n){var r=k.current[e.accessor],o=m[e.accessor];if(r&&o){var t=r.left-o.left,a=s?0:r.top-o.top,l=Math.abs(t),c=Math.abs(a);(l>10\|\|c>10)&&requestAnimationFrame((function(){n.style.transform="translate(".concat(t,"px, ").concat(a,"px)"),n.style.transition="transform 0s",requestAnimationFrame((function(){n.style.transform="",n.style.transition="transform ".concat(400,"ms ease-out")}))}))}}}))}),[s,m,x,i,g,k,b]),n(r,{children:c})},F=function(r){var o,t=r.getBorderClass,a=r.handleMouseDown,l=r.handleMouseOver,s=r.headers,c=r.hiddenColumns,d=r.isRowExpanded,i=r.isSelected,u=r.isTopLeftCell,f=r.lastGroupRow,v=r.onExpandRowClick,m=r.pinned,w=r.row,k=r.rowIndex,x=r.shouldDisplayLastColumnCell,y=h(r,["getBorderClass","handleMouseDown","handleMouseOver","headers","hiddenColumns","isRowExpanded","isSelected","isTopLeftCell","lastGroupRow","onExpandRowClick","pinned","row","rowIndex","shouldDisplayLastColumnCell"]),R=null===(o=w.rowMeta)\|\|void 0===o?void 0:o.children;return e(G,p({allowAnimations:y.allowAnimations,allowHorizontalAnimate:y.shouldPaginate,draggedHeaderRef:y.draggedHeaderRef,headersRef:y.headersRef,isBody:!0,pauseAnimation:y.isWidthDragging,rowIndex:k+1,tableRef:y.tableRef},{children:[0!==k&&n(V,{lastGroupRow:f}),s.map((function(e,n){if(!N({hiddenColumns:c,header:e,pinned:m}))return null;var r=w.rowData[e.accessor];return e.cellRenderer&&(r=e.cellRenderer(w)),g(U,p({},y,{borderClass:t(k,n),cellHasChildren:((null==R?void 0:R.length)\|\|0)>0,colIndex:n,content:r,header:e,isRowExpanded:d,isSelected:i(k,n),isTopLeftCell:u(k,n),key:n,onExpandRowClick:v,onMouseDown:function(){return a({rowIndex:k,colIndex:n})},onMouseOver:function(){return l(k,n)},row:w,rowIndex:k}))})),n(j,{ref:b(),visible:x})]}))},J=function(o){var t,a,l,s=o.depth,c=void 0===s?0:s,d=o.getNextRowIndex,i=o.index,u=o.lastGroupRow,b=o.pinned,f=o.props,v=o.row,h=((null===(a=null===(t=v.rowMeta)\|\|void 0===t?void 0:t.children)\|\|void 0===a?void 0:a.length)\|\|0)>0,m=d(),w=(null===(l=v.rowMeta)\|\|void 0===l?void 0:l.children)\|\|[];return e(r,{children:[g(F,p({},f,{depth:c,lastGroupRow:u,key:i,pinned:b,row:v,rowIndex:m})),h&&f.isRowExpanded(v.rowMeta.rowId)&&w.map((function(e,r){return n(J,{depth:c+1,getNextRowIndex:d,index:r,pinned:b,props:f,row:e},r)}))]})},Y=function(e){var r=e.rows,o=e.templateColumns,a=e.pinned,s=e.sectionRef,c=e.isRowExpanded,d=e.onExpandRowClick,i=h(e,["rows","templateColumns","pinned","sectionRef","isRowExpanded","onExpandRowClick"]),u=a?"st-table-body-pinned-".concat(a):"st-table-body-main",g=t(0);l((function(){g.current=0}));var b=function(){return g.current++};return n("div",p({className:u,ref:s,style:{gridTemplateColumns:o}},{children:r.map((function(e,r){var o,t;return n(J,{getNextRowIndex:b,index:r,lastGroupRow:Boolean(null===(t=null===(o=e.rowMeta)\|\|void 0===o?void 0:o.children)\|\|void 0===t?void 0:t.length),pinned:a,props:p(p({},i),{isRowExpanded:c,onExpandRowClick:d}),row:e},r)}))}))},q=function(r){var o=r.currentRows,t=r.isRowExpanded,a=r.mainTemplateColumns,l=r.onExpandRowClick,s=r.pinnedLeftColumns,c=r.pinnedLeftRef,d=r.pinnedLeftTemplateColumns,i=r.pinnedRightColumns,u=r.pinnedRightRef,g=r.pinnedRightTemplateColumns,b=r.tableRef;return e("div",p({className:"st-table-body-container"},{children:[s.length>0&&n(Y,p({},r,{rows:o,templateColumns:d,pinned:"left",sectionRef:c,isRowExpanded:t,onExpandRowClick:l})),n(Y,p({},r,{rows:o,templateColumns:a,sectionRef:b,isRowExpanded:t,onExpandRowClick:l})),i.length>0&&n(Y,p({},r,{rows:o,templateColumns:g,pinned:"right",sectionRef:u,isRowExpanded:t,onExpandRowClick:l}))]}))},K=function(e){var n=e.event,r=e.forceUpdate,o=e.header,t=e.headersRef,a=e.index;e.reverse;var l=e.setIsWidthDragging;l(!0),n.preventDefault();var s=n.clientX;if(o){var c=o.width,d=function(e){var n=Math.max(c+(e.clientX-s),40);o&&t.current&&(t.current[a].width=n,r())},i=function(){document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",i),l(!1)};document.addEventListener("mousemove",d),document.addEventListener("mouseup",i)}},$=d((function(r,t){var a,s=r.columnResizing,c=r.currentRows,d=r.draggable,i=r.draggedHeaderRef,u=r.forceUpdate,g=r.headersRef,b=r.hoveredHeaderRef,f=r.index,v=r.onSort,h=r.onTableHeaderDragEnd,m=r.reverse,w=r.selectableColumns,k=r.setIsWidthDragging,x=r.setSelectedCells,y=r.sort,R=r.sortDownIcon,C=r.sortUpIcon,D=o(!1),E=D[0],I=D[1],z=null===(a=g.current)\|\|void 0===a?void 0:a[f],N=Boolean(null==z?void 0:z.isSortable),H="st-header-cell ".concat(z===b.current?"st-hovered":""," ").concat(E?"st-dragging":""," ").concat(N?"clickable":""," ").concat(d&&!N?"draggable":""," ").concat("right"===(null==z?void 0:z.align)?"right-aligned":""),L=W({draggedHeaderRef:i,headersRef:g,hoveredHeaderRef:b,onTableHeaderDragEnd:h}),M=L.handleDragStart,T=L.handleDragEnd,O=W({draggedHeaderRef:i,headersRef:g,hoveredHeaderRef:b,onTableHeaderDragEnd:h}).handleDragOver,A=B(),P=function(e){var n=e.event,r=e.header;if(w){var o=c.length,t=Array.from({length:o},(function(e,n){return"".concat(n,"-").concat(f)})),a=function(e,n){var r=new Set,t=Math.min(e,n),a=Math.max(e,n);return Array.from({length:o}).forEach((function(e,n){Array.from({length:a-t+1}).forEach((function(e,o){r.add("".concat(n,"-").concat(t+o))}))})),r};n.shiftKey?x((function(e){var n,r=Number(null===(n=Array.from(e)[0])\|\|void 0===n?void 0:n.split("-")[1]),o=Number(t[0].split("-")[1]);return r===o?new Set(t):r>o?a(o,r):a(r,o)})):x(new Set(t))}else r.isSortable&&v(f,r.accessor)};if(l((function(){var e=function(e){e.preventDefault(),e.dataTransfer.dropEffect="move"};return document.addEventListener("dragover",e),function(){document.removeEventListener("dragover",e)}}),[]),!z)return null;var U=s&&n("div",{className:"st-header-resize-handle",onMouseDown:function(e){A({callback:K,callbackProps:{event:e,forceUpdate:u,header:z,headersRef:g,index:f,setIsWidthDragging:k},limit:10})}});return e("div",p({className:H,id:S({accessor:z.accessor,rowIndex:0}),onDragOver:function(e){A({callback:O,callbackProps:{event:e,hoveredHeader:z},limit:50})},ref:t,style:{width:z.width}},{children:[m&&U,n("div",p({className:"st-header-label",draggable:d,onClick:function(e){return P({event:e,header:z})},onDragEnd:function(e){e.preventDefault(),I(!1),T()},onDragStart:function(e){d&&z&&function(e){I(!0),M(e)}(z)},onMouseEnter:function(){return document.body.style.overflow="hidden"},onMouseLeave:function(){return document.body.style.overflow="auto"}},{children:null==z?void 0:z.label})),y&&y.key.accessor===z.accessor&&e("div",p({className:"st-sort-icon-container",onClick:function(e){return P({event:e,header:z})}},{children:["ascending"===y.direction&&C&&C,"descending"===y.direction&&R&&R]})),!m&&U]}))})),Q=function(r){var o,a,s,c=r.allowAnimations,d=r.columnResizing,i=r.currentRows,u=r.draggable,g=r.draggedHeaderRef,f=r.forceUpdate,v=r.headersRef,h=r.hiddenColumns,m=r.hoveredHeaderRef,w=r.isWidthDragging,k=r.mainTemplateColumns,x=r.onSort,y=r.onTableHeaderDragEnd,R=r.pinnedLeftColumns,C=r.pinnedLeftTemplateColumns,D=r.pinnedRightColumns,E=r.pinnedRightTemplateColumns,I=r.selectableColumns,z=r.setIsWidthDragging,S=r.setSelectedCells,H=r.shouldDisplayLastColumnCell,L=r.sort,M=r.sortDownIcon,T=r.sortUpIcon,O=r.tableRef,B=t(null);l((function(){if(O.current){var e=O.current,n=function(){var n,r=null==e?void 0:e.scrollLeft;void 0!==r&&(null===(n=B.current)\|\|void 0===n\|\|n.scrollTo(r,0))};return e.addEventListener("scroll",n),function(){null==e\|\|e.removeEventListener("scroll",n)}}}),[O]);return e("div",p({className:"st-table-header-container"},{children:[R.length>0&&n("div",p({className:"st-header-pinned-left",style:{gridTemplateColumns:C}},{children:n(G,p({allowAnimations:c,draggedHeaderRef:g,headersRef:v,pauseAnimation:w,rowIndex:0,tableRef:O},{children:null===(o=v.current)\|\|void 0===o?void 0:o.map((function(e,r){return N({hiddenColumns:h,header:e,pinned:"left"})?n($,{columnResizing:d,currentRows:i,draggable:u,draggedHeaderRef:g,forceUpdate:f,headersRef:v,hoveredHeaderRef:m,index:r,onSort:x,onTableHeaderDragEnd:y,ref:b(),selectableColumns:I,setIsWidthDragging:z,setSelectedCells:S,sort:L,sortDownIcon:M,sortUpIcon:T},e.accessor):null}))}))})),n("div",p({className:"st-header-main",onScroll:function(e){var n,r,o=null===(n=B.current)\|\|void 0===n?void 0:n.scrollLeft;void 0!==o&&(null===(r=O.current)\|\|void 0===r\|\|r.scrollTo(o,0))},ref:B,style:{gridTemplateColumns:k}},{children:e(G,p({allowAnimations:c,draggedHeaderRef:g,headersRef:v,pauseAnimation:w,rowIndex:0,tableRef:O},{children:[null===(a=v.current)\|\|void 0===a?void 0:a.map((function(e,r){return N({hiddenColumns:h,header:e})?n($,{columnResizing:d,currentRows:i,draggable:u,draggedHeaderRef:g,forceUpdate:f,headersRef:v,hoveredHeaderRef:m,index:r,onSort:x,onTableHeaderDragEnd:y,ref:b(),selectableColumns:I,setIsWidthDragging:z,setSelectedCells:S,sort:L,sortDownIcon:M,sortUpIcon:T},e.accessor):null})),n(j,{ref:b(),visible:H})]}))})),D.length>0&&n("div",p({className:"st-header-pinned-right",style:{gridTemplateColumns:E}},{children:e(G,p({allowAnimations:c,draggedHeaderRef:g,headersRef:v,pauseAnimation:w,rowIndex:0,tableRef:O},{children:[null===(s=v.current)\|\|void 0===s?void 0:s.map((function(e,r){return N({hiddenColumns:h,header:e,pinned:"right"})?n($,{columnResizing:d,currentRows:i,draggable:u,draggedHeaderRef:g,forceUpdate:f,headersRef:v,hoveredHeaderRef:m,index:r,onSort:x,onTableHeaderDragEnd:y,reverse:!0,ref:b(),selectableColumns:I,setIsWidthDragging:z,setSelectedCells:S,sort:L,sortDownIcon:M,sortUpIcon:T},e.accessor):null})),n(j,{ref:b(),visible:H})]}))}))]}))},Z=function(r){var o=r.allowAnimations,t=r.columnResizing,a=r.currentRows,l=r.draggable,c=r.draggedHeaderRef,d=r.editColumns,i=r.forceUpdate,u=r.getBorderClass,g=r.handleMouseDown,b=r.handleMouseOver,f=r.headersRef,v=r.hiddenColumns,h=r.hoveredHeaderRef,m=r.isRowExpanded,w=r.isSelected,k=r.isTopLeftCell,x=r.isWidthDragging,y=r.onCellChange,R=r.onExpandRowClick,C=r.onSort,D=r.onTableHeaderDragEnd,E=r.pinnedLeftRef,I=r.pinnedRightRef,z=r.selectableColumns,S=r.setIsWidthDragging,N=r.setSelectedCells,H=r.shouldPaginate,L=r.sort,M=r.sortDownIcon,T=r.sortUpIcon,O=r.tableRef,B=f.current.filter((function(e){return!e.hide&&!e.pinned})),A=s((function(){return!!O.current&&B.reduce((function(e,n){return e+n.width}),0)<O.current.clientWidth}),[B,O]),P=f.current.filter((function(e){return"left"===e.pinned&&!0!==e.hide})),W=f.current.filter((function(e){return"right"===e.pinned&&!0!==e.hide})),U=s((function(){return"".concat(P.map((function(e){return"".concat(e.width,"px")})).join(" "))}),[P]),j=s((function(){return"".concat(B.filter((function(e){return!0!==v[e.accessor]})).map((function(e){return"".concat(e.width,"px")})).join(" ")," 1fr")}),[B,v]),V=s((function(){return"".concat(W.map((function(e){return"".concat(e.width,"px")})).join(" "))}),[W]),G={allowAnimations:o,columnResizing:t,currentRows:a,draggable:l,draggedHeaderRef:c,forceUpdate:i,headersRef:f,hiddenColumns:v,hoveredHeaderRef:h,isWidthDragging:x,mainTemplateColumns:j,onSort:C,onTableHeaderDragEnd:D,pinnedLeftColumns:P,pinnedLeftTemplateColumns:U,pinnedRightColumns:W,pinnedRightTemplateColumns:V,selectableColumns:z,setIsWidthDragging:S,setSelectedCells:N,shouldDisplayLastColumnCell:A,sort:L,sortDownIcon:M,sortUpIcon:T,tableRef:O},X={allowAnimations:o,currentRows:a,draggedHeaderRef:c,getBorderClass:u,handleMouseDown:g,handleMouseOver:b,headers:f.current,headersRef:f,hiddenColumns:v,hoveredHeaderRef:h,isRowExpanded:m,isSelected:w,isTopLeftCell:k,isWidthDragging:x,mainTemplateColumns:j,onCellChange:y,onExpandRowClick:R,onTableHeaderDragEnd:D,pinnedLeftColumns:P,pinnedLeftRef:E,pinnedLeftTemplateColumns:U,pinnedRightColumns:W,pinnedRightRef:I,pinnedRightTemplateColumns:V,shouldDisplayLastColumnCell:A,shouldPaginate:H,tableRef:O};return e("div",p({className:"st-table-content",style:{width:d?"calc(100% - 27.5px)":"100%"}},{children:[n(Q,p({},G)),n(q,p({},X))]}))},_=function(r){r.headersRef;var a=r.pinnedLeftRef,s=r.pinnedRightRef,c=r.tableRef,d=o(0),i=d[0],u=d[1],g=o(0),b=g[0],f=g[1],v=o(0),h=v[0],m=v[1],w=t(null);return l((function(){if(a.current){var e=function(){var e;u((null===(e=a.current)\|\|void 0===e?void 0:e.scrollWidth)\|\|0)};e();var n=new ResizeObserver((function(){e()}));return n.observe(a.current),function(){return n.disconnect()}}}),[a]),l((function(){if(c.current){var e=function(){var e;m((null===(e=c.current)\|\|void 0===e?void 0:e.scrollWidth)\|\|0)};e();var n=new ResizeObserver((function(){e()}));return n.observe(c.current),function(){return n.disconnect()}}}),[c]),l((function(){if(s.current){var e=function(){var e;f((null===(e=s.current)\|\|void 0===e?void 0:e.scrollWidth)\|\|0)};e();var n=new ResizeObserver((function(){e()}));return n.observe(s.current),function(){return n.disconnect()}}}),[s]),l((function(){if(c.current){var e=c.current,n=function(){var n,r=null==e?void 0:e.scrollLeft;void 0!==r&&(null===(n=w.current)\|\|void 0===n\|\|n.scrollTo(r,0))};return e.addEventListener("scroll",n),function(){null==e\|\|e.removeEventListener("scroll",n)}}}),[c]),e("div",p({className:"st-horizontal-scrollbar-container"},{children:[i>0&&n("div",{className:"st-horizontal-scrollbar-left",style:{flexShrink:0,width:i}}),h>0&&n("div",p({className:"st-horizontal-scrollbar-middle",onScroll:function(){var e,n,r=null===(e=w.current)\|\|void 0===e?void 0:e.scrollLeft;void 0!==r&&(null===(n=c.current)\|\|void 0===n\|\|n.scrollTo(r,0))},ref:w,style:{width:h}},{children:n("div",{style:{width:h}})})),b>0&&n("div",{className:"st-horizontal-scrollbar-right",style:{flexShrink:0,width:b}})]}))},ee=function(e,n){var r=o(null),t=r[0],a=r[1],l=o({}),c=l[0],d=l[1],i=s((function(){if(!t)return e;var r=function(e,n,r){var o=r?r.key:e[0],t="ascending";return r&&r.key.accessor===o.accessor&&"ascending"===r.direction&&(t="descending"),{sortedData:m([],n,!0).sort((function(e,n){var r,a,l,s,c=null!==(a=null===(r=null==e?void 0:e.rowData)\|\|void 0===r?void 0:r[o.accessor])&&void 0!==a?a:"",d=null!==(s=null===(l=null==n?void 0:n.rowData)\|\|void 0===l?void 0:l[o.accessor])&&void 0!==s?s:"";return c<d?"ascending"===t?1:-1:c>d?"ascending"===t?-1:1:0})),newSortConfig:{key:o,direction:t}}}(n,e,t).sortedData;return r}),[e,t,n]);return{sort:t,setSort:a,sortedRows:i,hiddenColumns:c,setHiddenColumns:d}};!function(e){e.Left="left",e.Right="right"}(z\|\|(z={}));var ne=function(r){var c=r.allowAnimations,d=void 0!==c&&c,i=r.columnEditorPosition,u=void 0===i?z.Right:i,g=r.columnEditorText,b=void 0===g?"Columns":g,f=r.columnResizing,h=void 0!==f&&f,m=r.defaultHeaders,D=r.draggable,E=void 0!==D&&D,S=r.editColumns,N=void 0!==S&&S,H=r.editColumnsInitOpen,L=void 0!==H&&H,M=r.height,T=r.hideFooter,O=void 0!==T&&T,B=r.nextIcon,A=void 0===B?n(x,{className:"st-next-prev-icon"}):B,P=r.onCellChange,W=r.prevIcon,U=void 0===W?n(k,{className:"st-next-prev-icon"}):W,j=r.rows,V=r.rowsPerPage,G=void 0===V?10:V,X=r.selectableCells,F=void 0!==X&&X,J=r.selectableColumns,Y=void 0!==J&&J,q=r.shouldPaginate,K=void 0!==q&&q,$=r.sortDownIcon,Q=void 0===$?n(C,{className:"st-sort-icon"}):$,ne=r.sortUpIcon,re=void 0===ne?n(R,{className:"st-sort-icon"}):ne,oe=r.theme,te=void 0===oe?"light":oe,ae=o((function(){return function(e){var n=new Set,r=function(e){var o;e.rowMeta.isExpanded&&n.add(e.rowMeta.rowId.toString()),null===(o=e.rowMeta.children)\|\|void 0===o\|\|o.forEach(r)};return e.forEach(r),n}(j)})),le=ae[0],se=ae[1],ce=s((function(){return j.map((function(e,n){return p(p({},e),{originalRowIndex:n})}))}),[j]),de=t(null),ie=t(null),ue=t(null),ge=t(null),be=t(null),fe=t(m),ve=o(!1),pe=ve[0],he=ve[1],me=o(1),we=me[0],ke=me[1],xe=ee(ce,fe.current),ye=xe.sort,Re=xe.setSort,Ce=xe.sortedRows,De=xe.hiddenColumns,Ee=xe.setHiddenColumns,Ie=a((function(e){var n=String(e);se((function(e){var r=new Set(e);return r.has(n)?r.delete(n):r.add(n),r}))}),[]),ze=a((function(e){return le.has(String(e))}),[le]),Se=v((function(e){return e+1}),0)[1],Ne=function(e){var n=e.selectableCells,r=e.headers,c=e.rows,d=o(new Set),i=d[0],u=d[1],g=t(!1),b=t(null),f=a((function(){var e=Array.from(i).reduce((function(e,n){var o=n.split("-").map(Number),t=o[0],a=o[1];return e[t]\|\|(e[t]=[]),e[t][a]=c[t][r[a].accessor],e}),{}),n=Object.values(e).map((function(e){return Object.values(e).join("\t")})).join("\n");navigator.clipboard.writeText(n)}),[i,c,r]);l((function(){var e=function(e){(e.ctrlKey\|\|e.metaKey)&&"c"===e.key&&f()};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[f]);var v=a((function(e,n){return i.has("".concat(e,"-").concat(n))}),[i]),p=a((function(e,n){var r=[];return v(e-1,n)\|\|r.push("st-selected-top-border"),v(e+1,n)\|\|r.push("st-selected-bottom-border"),v(e,n-1)\|\|r.push("st-selected-left-border"),v(e,n+1)\|\|r.push("st-selected-right-border"),r.join(" ")}),[v]),h=s((function(){var e=Math.min.apply(Math,Array.from(i).map((function(e){return parseInt(e.split("-")[0])}))),n=Math.min.apply(Math,Array.from(i).map((function(e){return parseInt(e.split("-")[1])})));return function(r,o){return r===e&&o===n}}),[i]);return{selectedCells:i,handleMouseDown:function(e){var r=e.colIndex,o=e.rowIndex;n&&(g.current=!0,b.current={row:o,col:r},u(new Set(["".concat(o,"-").concat(r)])))},handleMouseOver:function(e,r){if(n&&g.current&&b.current){for(var o=new Set,t=Math.min(b.current.row,e),a=Math.max(b.current.row,e),l=Math.min(b.current.col,r),s=Math.max(b.current.col,r),c=t;c<=a;c++)for(var d=l;d<=s;d++)o.add("".concat(c,"-").concat(d));u(o)}},handleMouseUp:function(){g.current=!1,b.current=null},isSelected:v,getBorderClass:p,isTopLeftCell:h,setSelectedCells:u}}({selectableCells:F,headers:fe.current,rows:Ce}),He=Ne.handleMouseDown,Le=Ne.handleMouseOver,Me=Ne.handleMouseUp,Te=Ne.isSelected,Oe=Ne.getBorderClass,Be=Ne.isTopLeftCell,Ae=Ne.setSelectedCells,Pe=s((function(){return K?Ce.slice((we-1)G,we*G):Ce}),[we,G,K,Ce]),We=a((function(e,n){Re((function(r){return(null==r?void 0:r.key.accessor)!==n?{key:fe.current[e],direction:"ascending"}:"ascending"===(null==r?void 0:r.direction)?{key:fe.current[e],direction:"descending"}:null}))}),[Re]),Ue=a((function(e){fe.current=e,Se()}),[]);return l((function(){var e=function(e){var n=e.target;n.closest(".st-cell")\|\|Y&&(n.classList.contains("st-header-cell")\|\|n.classList.contains("st-header-label"))\|\|Ae(new Set)};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[Y,Ae]),n(y.Provider,p({value:{rows:j,tableRows:ce}},{children:e("div",p({className:"st-wrapper theme-".concat(te),style:M?{height:M}:{}},{children:[e("div",p({className:"st-table-wrapper-container"},{children:[e("div",p({className:"st-table-wrapper",onMouseUp:Me,onMouseLeave:Me},{children:[n(Z,{allowAnimations:d,columnResizing:h,currentRows:Pe,draggable:E,draggedHeaderRef:ie,editColumns:N,forceUpdate:Se,getBorderClass:Oe,handleMouseDown:He,handleMouseOver:Le,headers:fe.current,headersRef:fe,hiddenColumns:De,hoveredHeaderRef:ue,isRowExpanded:ze,isSelected:Te,isTopLeftCell:Be,isWidthDragging:pe,onCellChange:P,onExpandRowClick:Ie,onSort:We,onTableHeaderDragEnd:Ue,pinnedLeftRef:ge,pinnedRightRef:be,selectableColumns:Y,setIsWidthDragging:he,setSelectedCells:Ae,shouldPaginate:K,sort:ye,sortDownIcon:Q,sortUpIcon:re,tableRef:de}),n(I,{columnEditorText:b,editColumns:N,editColumnsInitOpen:L,headers:fe.current,hiddenColumns:De,position:u,setHiddenColumns:Ee})]})),n(_,{headersRef:fe,pinnedLeftRef:ge,pinnedRightRef:be,tableRef:de})]})),n(w,{currentPage:we,hideFooter:O,nextIcon:A,onPageChange:ke,prevIcon:U,rowsPerPage:G,shouldPaginate:K,totalRows:Ce.length})]}))}))};ne.defaultProps={allowAnimations:!1,columnEditorPosition:z.Right,columnEditorText:"Columns",columnResizing:!1,defaultHeaders:[],draggable:!1,editColumns:!1,editColumnsInitOpen:!1,height:"",hideFooter:!1,nextIcon:n(x,{className:"st-next-prev-icon"}),onCellChange:function(){},prevIcon:n(k,{className:"st-next-prev-icon"}),rows:[],rowsPerPage:10,selectableCells:!1,selectableColumns:!1,shouldPaginate:!1,sortDownIcon:n(C,{className:"st-sort-icon"}),sortUpIcon:n(R,{className:"st-sort-icon"}),theme:"light"};var re=f(ne);export{re as SimpleTable};
1	+ import{jsxs as e,jsx as n,Fragment as r}from"react/jsx-runtime";import{useState as o,useRef as t,useCallback as a,useEffect as l,useMemo as s,createContext as c,forwardRef as d,useContext as i,useLayoutEffect as u,createElement as g,createRef as b,memo as f,useReducer as v}from"react";var p=function(){return p=Object.assign\|\|function(e){for(var n,r=1,o=arguments.length;r<o;r++)for(var t in n=arguments[r])Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t]);return e},p.apply(this,arguments)};function h(e,n){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&n.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(o=Object.getOwnPropertySymbols(e);t<o.length;t++)n.indexOf(o[t])<0&&Object.prototype.propertyIsEnumerable.call(e,o[t])&&(r[o[t]]=e[o[t]])}return r}function m(e,n,r){if(r\|\|2===arguments.length)for(var o,t=0,a=n.length;t<a;t++)!o&&t in n\|\|(o\|\|(o=Array.prototype.slice.call(n,0,t)),o[t]=n[t]);return e.concat(o\|\|Array.prototype.slice.call(n))}"function"==typeof SuppressedError&&SuppressedError;var w=function(r){var o=r.currentPage,t=r.hideFooter,a=r.nextIcon,l=r.onPageChange,s=r.prevIcon,c=r.rowsPerPage,d=r.shouldPaginate,i=r.totalRows,u=Math.ceil(i/c),g=o>1,b=o<u,f=function(e){e>=1&&e<=u&&l(e)};return t\|\|!d?null:e("div",p({className:"st-footer"},{children:[n("button",p({className:"st-next-prev-btn ".concat(g?"":"disabled"),onClick:function(){return f(o-1)},disabled:!g},{children:s})),n("button",p({className:"st-next-prev-btn ".concat(b?"":"disabled"),onClick:function(){return f(o+1)},disabled:!b},{children:a})),Array.from({length:u},(function(e,r){return n("button",p({onClick:function(){return f(r+1)},className:"st-page-btn ".concat(o===r+1?"active":"")},{children:r+1}),r)}))]}))},k=function(e){var r=e.className;return n("svg",p({className:r,viewBox:"0 0 24 24",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"})}))},x=function(e){var r=e.className;return n("svg",p({className:r,viewBox:"0 0 24 24",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"})}))},y=c({rows:[],tableRows:[]}),R=function(e){var r=e.className;return n("svg",p({className:r,viewBox:"0 0 20 20",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M5.41 11.41L10 6.83l4.59 4.58L16 10l-6-6-6 6z"})}))},C=function(e){var r=e.className;return n("svg",p({className:r,viewBox:"0 0 20 20",width:"20",height:"20",xmlns:"http://www.w3.org/2000/svg"},{children:n("path",{d:"M5.41 7.59L10 12.17l4.59-4.58L16 9l-6 6-6-6z"})}))},D=function(r){var t=r.checked,a=void 0!==t&&t,l=r.children,s=r.onChange,c=o(a),d=c[0],i=c[1];return e("label",p({className:"st-checkbox-label"},{children:[n("input",{checked:d,className:"st-checkbox-input",onChange:function(){var e=!d;i(e),s&&s(e)},type:"checkbox"}),n("span",p({className:"st-checkbox-custom ".concat(d?"st-checked":"")},{children:d&&n("span",{className:"st-checkbox-checkmark"})})),l]}))},E=function(e){var r=e.headers,o=e.open,t=e.position;e.setOpen;var a=e.setHiddenColumns,l=e.hiddenColumns,s="left"===t?"left":"";return n("div",p({className:"st-column-editor-popout ".concat(o?"open":""," ").concat(s),onClick:function(e){return e.stopPropagation()}},{children:n("div",p({className:"st-column-editor-popout-content"},{children:r.map((function(e,r){return n(D,p({checked:l[e.accessor],onChange:function(n){var r;return a(p(p({},l),((r={})[e.accessor]=n,r)))}},{children:e.label}),r)}))}))}))},I=function(r){var t=r.columnEditorText,a=r.editColumns,l=r.editColumnsInitOpen,s=r.headers,c=r.position,d=void 0===c?"right":c,i=r.setHiddenColumns,u=r.hiddenColumns,g=o(l),b=g[0],f=g[1];return a?e("div",p({className:"st-column-editor ".concat(b?"open":""," ").concat(d),onClick:function(){return function(e){f(e)}(!b)}},{children:[n("div",p({className:"st-column-editor-text"},{children:t})),n(E,{headers:s,open:b,position:d,setOpen:f,setHiddenColumns:i,hiddenColumns:u})]})):null};!function(e,n){void 0===n&&(n={});var r=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head\|\|document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===r&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}(':root {\n /* New Variables for Theming /\n --st-resize-handle-width: 3px;\n\n --st-border-radius: 4px;\n --st-border-width: 1px;\n --st-cell-padding: 8px;\n --st-font-size: 1rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 700;\n --st-transition-duration: 0.3s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 4px;\n --st-spacing-medium: 8px;\n --st-spacing-large: 16px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n / Tailwind Colors /\n --white: #fff;\n --black: #000;\n\n --slate-50: #f8fafc;\n --slate-100: #f1f5f9;\n --slate-200: #e2e8f0;\n --slate-300: #cbd5e1;\n --slate-400: #94a3b8;\n --slate-500: #64748b;\n --slate-600: #475569;\n --slate-700: #334155;\n --slate-800: #1e293b;\n --slate-900: #0f172a;\n --slate-950: #020617;\n\n --gray-50: #f9fafb;\n --gray-100: #f3f4f6;\n --gray-200: #e5e7eb;\n --gray-300: #d1d5db;\n --gray-400: #9ca3af;\n --gray-500: #6b7280;\n --gray-600: #4b5563;\n --gray-700: #374151;\n --gray-800: #1f2937;\n --gray-900: #111827;\n --gray-950: #030712;\n\n --zinc-50: #fafafa;\n --zinc-100: #f4f4f5;\n --zinc-200: #e4e4e7;\n --zinc-300: #d4d4d8;\n --zinc-400: #a1a1aa;\n --zinc-500: #71717a;\n --zinc-600: #52525b;\n --zinc-700: #3f3f46;\n --zinc-800: #27272a;\n --zinc-900: #18181b;\n --zinc-950: #09090b;\n\n --neutral-50: #fafafa;\n --neutral-100: #f5f5f5;\n --neutral-200: #e5e5e5;\n --neutral-300: #d4d4d4;\n --neutral-400: #a3a3a3;\n --neutral-500: #737373;\n --neutral-600: #525252;\n --neutral-700: #404040;\n --neutral-800: #262626;\n --neutral-900: #171717;\n --neutral-950: #0a0a0a;\n\n --stone-50: #fafaf9;\n --stone-100: #f5f5f4;\n --stone-200: #e7e5e4;\n --stone-300: #d6d3d1;\n --stone-400: #a8a29e;\n --stone-500: #78716c;\n --stone-600: #57534e;\n --stone-700: #44403c;\n --stone-800: #292524;\n --stone-900: #1c1917;\n --stone-950: #0c0a09;\n\n --red-50: #fef2f2;\n --red-100: #fee2e2;\n --red-200: #fecaca;\n --red-300: #fca5a5;\n --red-400: #f87171;\n --red-500: #ef4444;\n --red-600: #dc2626;\n --red-700: #b91c1c;\n --red-800: #991b1b;\n --red-900: #7f1d1d;\n --red-950: #450a0a;\n\n --orange-50: #fff7ed;\n --orange-100: #ffedd5;\n --orange-200: #fed7aa;\n --orange-300: #fdba74;\n --orange-400: #fb923c;\n --orange-500: #f97316;\n --orange-600: #ea580c;\n --orange-700: #c2410c;\n --orange-800: #9a3412;\n --orange-900: #7c2d12;\n --orange-950: #431407;\n\n --amber-50: #fffbeb;\n --amber-100: #fef3c7;\n --amber-200: #fde68a;\n --amber-300: #fcd34d;\n --amber-400: #fbbf24;\n --amber-500: #f59e0b;\n --amber-600: #d97706;\n --amber-700: #b45309;\n --amber-800: #92400e;\n --amber-900: #78350f;\n --amber-950: #451a03;\n\n --yellow-50: #fefce8;\n --yellow-100: #fef9c3;\n --yellow-200: #fef08a;\n --yellow-300: #fde047;\n --yellow-400: #facc15;\n --yellow-500: #eab308;\n --yellow-600: #ca8a04;\n --yellow-700: #a16207;\n --yellow-800: #854d0e;\n --yellow-900: #713f12;\n --yellow-950: #422006;\n\n --lime-50: #f7fee7;\n --lime-100: #ecfccb;\n --lime-200: #d9f99d;\n --lime-300: #bef264;\n --lime-400: #a3e635;\n --lime-500: #84cc16;\n --lime-600: #65a30d;\n --lime-700: #4d7c0f;\n --lime-800: #3f6212;\n --lime-900: #365314;\n --lime-950: #1a2e05;\n\n --green-50: #f0fdf4;\n --green-100: #dcfce7;\n --green-200: #bbf7d0;\n --green-300: #86efac;\n --green-400: #4ade80;\n --green-500: #22c55e;\n --green-600: #16a34a;\n --green-700: #15803d;\n --green-800: #166534;\n --green-900: #14532d;\n --green-950: #052e16;\n\n --emerald-50: #ecfdf5;\n --emerald-100: #d1fae5;\n --emerald-200: #a7f3d0;\n --emerald-300: #6ee7b7;\n --emerald-400: #34d399;\n --emerald-500: #10b981;\n --emerald-600: #059669;\n --emerald-700: #047857;\n --emerald-800: #065f46;\n --emerald-900: #064e3b;\n --emerald-950: #022c22;\n\n --teal-50: #f0fdfa;\n --teal-100: #ccfbf1;\n --teal-200: #99f6e4;\n --teal-300: #5eead4;\n --teal-400: #2dd4bf;\n --teal-500: #14b8a6;\n --teal-600: #0d9488;\n --teal-700: #0f766e;\n --teal-800: #115e59;\n --teal-900: #134e4a;\n --teal-950: #042f2e;\n\n --cyan-50: #ecfeff;\n --cyan-100: #cffafe;\n --cyan-200: #a5f3fc;\n --cyan-300: #67e8f9;\n --cyan-400: #22d3ee;\n --cyan-500: #06b6d4;\n --cyan-600: #0891b2;\n --cyan-700: #0e7490;\n --cyan-800: #155e75;\n --cyan-900: #164e63;\n --cyan-950: #083344;\n\n --sky-50: #f0f9ff;\n --sky-100: #e0f2fe;\n --sky-200: #bae6fd;\n --sky-300: #7dd3fc;\n --sky-400: #38bdf8;\n --sky-500: #0ea5e9;\n --sky-600: #0284c7;\n --sky-700: #0369a1;\n --sky-800: #075985;\n --sky-900: #0c4a6e;\n --sky-950: #082f49;\n\n --blue-50: #eff6ff;\n --blue-100: #dbeafe;\n --blue-200: #bfdbfe;\n --blue-300: #93c5fd;\n --blue-400: #60a5fa;\n --blue-500: #3b82f6;\n --blue-600: #2563eb;\n --blue-700: #1d4ed8;\n --blue-800: #1e40af;\n --blue-900: #1e3a8a;\n --blue-950: #172554;\n\n --indigo-50: #eef2ff;\n --indigo-100: #e0e7ff;\n --indigo-200: #c7d2fe;\n --indigo-300: #a5b4fc;\n --indigo-400: #818cf8;\n --indigo-500: #6366f1;\n --indigo-600: #4f46e5;\n --indigo-700: #4338ca;\n --indigo-800: #3730a3;\n --indigo-900: #312e81;\n --indigo-950: #1e1b4b;\n\n --violet-50: #f5f3ff;\n --violet-100: #ede9fe;\n --violet-200: #ddd6fe;\n --violet-300: #c4b5fd;\n --violet-400: #a78bfa;\n --violet-500: #8b5cf6;\n --violet-600: #7c3aed;\n --violet-700: #6d28d9;\n --violet-800: #5b21b6;\n --violet-900: #4c1d95;\n --violet-950: #2e1065;\n\n --purple-50: #faf5ff;\n --purple-100: #f3e8ff;\n --purple-200: #e9d5ff;\n --purple-300: #d8b4fe;\n --purple-400: #c084fc;\n --purple-500: #a855f7;\n --purple-600: #9333ea;\n --purple-700: #7e22ce;\n --purple-800: #6b21a8;\n --purple-900: #581c87;\n --purple-950: #3b0764;\n\n --fuchsia-50: #fdf4ff;\n --fuchsia-100: #fae8ff;\n --fuchsia-200: #f5d0fe;\n --fuchsia-300: #f0abfc;\n --fuchsia-400: #e879f9;\n --fuchsia-500: #d946ef;\n --fuchsia-600: #c026d3;\n --fuchsia-700: #a21caf;\n --fuchsia-800: #86198f;\n --fuchsia-900: #701a75;\n --fuchsia-950: #4a044e;\n\n --pink-50: #fdf2f8;\n --pink-100: #fce7f3;\n --pink-200: #fbcfe8;\n --pink-300: #f9a8d4;\n --pink-400: #f472b6;\n --pink-500: #ec4899;\n --pink-600: #db2777;\n --pink-700: #be185d;\n --pink-800: #9d174d;\n --pink-900: #831843;\n --pink-950: #500724;\n\n --rose-50: #fff1f2;\n --rose-100: #ffe4e6;\n --rose-200: #fecdd3;\n --rose-300: #fda4af;\n --rose-400: #fb7185;\n --rose-500: #f43f5e;\n --rose-600: #e11d48;\n --rose-700: #be123c;\n --rose-800: #9f1239;\n --rose-900: #881337;\n --rose-950: #4c0519;\n}\n\n.theme-light {\n / Base Variables /\n --st-border-radius: 4px;\n --st-border-width: 1px;\n --st-cell-padding: 8px;\n --st-font-size: 0.875rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.2s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 4px;\n --st-spacing-medium: 8px;\n --st-spacing-large: 16px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--gray-300); / Light gray for borders /\n --st-odd-row-background-color: var(--white); / White for odd rows /\n --st-even-row-background-color: var(--white); / White for even rows /\n --st-header-background-color: var(--white); / Deep blue for headers /\n --st-dragging-background-color: var(--gray-200); / Light gray for dragging /\n --st-selected-cell-background-color: var(--blue-200); / Gold for selected cells /\n --st-selected-first-cell-background-color: var(--blue-200); / Gold for first selected cell /\n --st-footer-background-color: var(--white); / White for footer /\n --st-cell-color: var(--gray-800); / Dark gray for cell text /\n --st-cell-odd-row-color: var(--gray-700); / Slightly lighter gray for odd row text /\n --st-edit-cell-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 1px -1px rgba(0, 0, 0, 0.05); / Subtle shadow /\n --st-selected-cell-color: var(--gray-900); / Darker gray for selected cell text /\n --st-selected-first-cell-color: var(--gray-900); / Darker gray for first selected cell text /\n --st-resize-handle-color: var(--blue-300); / Darker blue for resize handles /\n --st-separator-border-color: var(--slate-100); / Light gray for separators /\n --st-last-group-row-separator-border-color: var(--slate-300); / Light gray for separators /\n --st-selected-border-top-color: var(--blue-600); / Darker blue for selected borders /\n --st-selected-border-bottom-color: var(--blue-600);\n --st-selected-border-left-color: var(--blue-600);\n --st-selected-border-right-color: var(--blue-600);\n --st-checkbox-checked-background-color: var(--blue-600); / Darker blue for checked checkboxes /\n --st-checkbox-checked-border-color: var(--blue-600);\n --st-column-editor-background-color: var(--white); / White for column editor /\n --st-column-editor-popout-background-color: var(--white); / White for popout editor /\n --st-button-hover-background-color: var(--gray-200); / Light gray for button hover /\n --st-button-active-background-color: var(--blue-800); / Deep blue for button active /\n --st-font-family: "Roboto", sans-serif; / Professional font /\n --st-editable-cell-focus-border-color: var(--blue-600); / Darker blue for editable cell focus /\n}\n\n.theme-dark {\n / Base Variables /\n --st-border-radius: 6px;\n --st-border-width: 1px;\n --st-cell-padding: 10px;\n --st-font-size: 0.875rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.2s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 6px;\n --st-spacing-medium: 10px;\n --st-spacing-large: 20px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-600);\n\n --st-border-color: var(--slate-800);\n --st-odd-row-background-color: var(--slate-800);\n --st-even-row-background-color: var(--slate-900);\n --st-header-background-color: var(--slate-700);\n --st-dragging-background-color: var(--blue-800);\n --st-selected-cell-background-color: var(--blue-700);\n --st-selected-first-cell-background-color: var(--amber-700);\n --st-footer-background-color: var(--slate-900);\n --st-cell-color: var(--white);\n --st-cell-odd-row-color: var(--slate-300);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--white / 0.1), 0 1px 2px -1px var(--white / 0.1);\n --st-selected-cell-color: var(--white);\n --st-selected-first-cell-color: var(--white);\n --st-resize-handle-color: var(--slate-600);\n --st-separator-border-color: var(--slate-500);\n --st-last-group-row-separator-border-color: var(--slate-700);\n --st-selected-border-top-color: var(--blue-700);\n --st-selected-border-bottom-color: var(--blue-700);\n --st-selected-border-left-color: var(--blue-700);\n --st-selected-border-right-color: var(--blue-700);\n --st-checkbox-checked-background-color: var(--blue-700);\n --st-checkbox-checked-border-color: var(--blue-700);\n --st-column-editor-background-color: var(--slate-800);\n --st-column-editor-popout-background-color: var(--slate-800);\n --st-button-hover-background-color: var(--slate-600);\n --st-button-active-background-color: var(--slate-700);\n --st-font-family: "Open Sans", sans-serif;\n --st-editable-cell-focus-border-color: var(--slate-600);\n}\n\n.theme-high-contrast {\n / Base Variables /\n --st-border-radius: 0;\n --st-border-width: 2px;\n --st-cell-padding: 12px;\n --st-font-size: 1rem;\n --st-font-weight-normal: 500;\n --st-font-weight-bold: 800;\n --st-transition-duration: 0s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.7;\n --st-spacing-small: 8px;\n --st-spacing-medium: 12px;\n --st-spacing-large: 24px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: #000000;\n\n --st-border-color: var(--slate-900);\n --st-odd-row-background-color: var(--slate-50);\n --st-even-row-background-color: var(--slate-900);\n --st-header-background-color: var(--slate-900);\n --st-dragging-background-color: var(--yellow-500);\n --st-selected-cell-background-color: var(--slate-900);\n --st-selected-first-cell-background-color: var(--red-500);\n --st-footer-background-color: var(--slate-900);\n --st-cell-color: var(--white);\n --st-cell-odd-row-color: var(--slate-900);\n --st-edit-cell-shadow: none;\n --st-selected-cell-color: var(--white);\n --st-selected-first-cell-color: var(--white);\n --st-resize-handle-color: var(--white);\n --st-separator-border-color: var(--slate-200);\n --st-last-group-row-separator-border-color: var(--slate-900);\n --st-selected-border-top-color: var(--orange-600);\n --st-selected-border-bottom-color: var(--orange-600);\n --st-selected-border-left-color: var(--orange-600);\n --st-selected-border-right-color: var(--orange-600);\n --st-checkbox-checked-background-color: var(--slate-50);\n --st-checkbox-checked-border-color: var(--slate-50);\n --st-column-editor-background-color: var(--slate-900);\n --st-column-editor-popout-background-color: var(--slate-900);\n --st-button-hover-background-color: var(--slate-50);\n --st-button-active-background-color: var(--slate-900);\n --st-font-family: "Arial", sans-serif;\n --st-editable-cell-focus-border-color: var(--orange-600);\n}\n\n.theme-pastel {\n / Base Variables /\n --st-border-radius: 8px;\n --st-border-width: 1px;\n --st-cell-padding: 10px;\n --st-font-size: 0.9rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.3s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 6px;\n --st-spacing-medium: 10px;\n --st-spacing-large: 20px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--purple-200);\n --st-odd-row-background-color: var(--purple-50);\n --st-even-row-background-color: var(--blue-50);\n --st-header-background-color: var(--blue-50);\n --st-dragging-background-color: var(--cyan-50);\n --st-selected-cell-background-color: var(--orange-50);\n --st-selected-first-cell-background-color: var(--amber-50);\n --st-footer-background-color: var(--purple-50);\n --st-cell-color: var(--slate-600);\n --st-cell-odd-row-color: var(--slate-700);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.1), 0 1px 2px -1px var(--black / 0.1);\n --st-selected-cell-color: var(--slate-600);\n --st-selected-first-cell-color: var(--slate-600);\n --st-resize-handle-color: var(--purple-200);\n --st-separator-border-color: var(--purple-200);\n --st-last-group-row-separator-border-color: var(--purple-500);\n --st-selected-border-top-color: var(--amber-500);\n --st-selected-border-bottom-color: var(--amber-500);\n --st-selected-border-left-color: var(--amber-500);\n --st-selected-border-right-color: var(--amber-500);\n --st-checkbox-checked-background-color: var(--purple-200);\n --st-checkbox-checked-border-color: var(--purple-200);\n --st-column-editor-background-color: var(--purple-50);\n --st-column-editor-popout-background-color: var(--purple-50);\n --st-button-hover-background-color: var(--purple-100);\n --st-button-active-background-color: var(--purple-200);\n --st-font-family: "Comic Sans MS", cursive, sans-serif;\n --st-editable-cell-focus-border-color: var(--purple-300);\n}\n\n.theme-vibrant {\n / Base Variables /\n --st-border-radius: 12px;\n --st-border-width: 2px;\n --st-cell-padding: 12px;\n --st-font-size: 1rem;\n --st-font-weight-normal: 500;\n --st-font-weight-bold: 700;\n --st-transition-duration: 0.3s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 8px;\n --st-spacing-medium: 12px;\n --st-spacing-large: 24px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--orange-500);\n --st-odd-row-background-color: var(--orange-100);\n --st-even-row-background-color: var(--orange-200);\n --st-header-background-color: var(--orange-300);\n --st-dragging-background-color: var(--blue-300);\n --st-selected-cell-background-color: var(--blue-400);\n --st-selected-first-cell-background-color: var(--amber-300);\n --st-footer-background-color: var(--orange-50);\n --st-cell-color: var(--orange-900);\n --st-cell-odd-row-color: var(--orange-800);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.2), 0 1px 2px -1px var(--black / 0.2);\n --st-selected-cell-color: var(--orange-900);\n --st-selected-first-cell-color: var(--orange-900);\n --st-resize-handle-color: var(--orange-400);\n --st-separator-border-color: var(--orange-200);\n --st-last-group-row-separator-border-color: var(--orange-500);\n --st-selected-border-top-color: var(--orange-700);\n --st-selected-border-bottom-color: var(--orange-700);\n --st-selected-border-left-color: var(--orange-700);\n --st-selected-border-right-color: var(--orange-700);\n --st-checkbox-checked-background-color: var(--orange-500);\n --st-checkbox-checked-border-color: var(--orange-500);\n --st-column-editor-background-color: var(--orange-100);\n --st-column-editor-popout-background-color: var(--orange-100);\n --st-button-hover-background-color: var(--orange-300);\n --st-button-active-background-color: var(--orange-400);\n --st-font-family: "Lobster", cursive;\n --st-editable-cell-focus-border-color: var(--orange-600);\n}\n\n.theme-solarized-light {\n / Base Variables /\n --st-border-radius: 4px;\n --st-border-width: 1px;\n --st-cell-padding: 8px;\n --st-font-size: 0.875rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.2s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 4px;\n --st-spacing-medium: 8px;\n --st-spacing-large: 16px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--yellow-300);\n --st-odd-row-background-color: var(--yellow-50);\n --st-even-row-background-color: var(--yellow-200);\n --st-header-background-color: var(--yellow-200);\n --st-dragging-background-color: var(--yellow-300);\n --st-selected-cell-background-color: var(--slate-400);\n --st-selected-first-cell-background-color: var(--amber-600);\n --st-footer-background-color: var(--yellow-50);\n --st-cell-color: var(--slate-600);\n --st-cell-odd-row-color: var(--slate-700);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.1), 0 1px 2px -1px var(--black / 0.1);\n --st-selected-cell-color: var(--slate-600);\n --st-selected-first-cell-color: var(--slate-600);\n --st-resize-handle-color: var(--slate-400);\n --st-separator-border-color: var(--yellow-300);\n --st-last-group-row-separator-border-color: var(--yellow-500);\n --st-selected-border-top-color: var(--yellow-600);\n --st-selected-border-bottom-color: var(--yellow-600);\n --st-selected-border-left-color: var(--yellow-600);\n --st-selected-border-right-color: var(--yellow-600);\n --st-checkbox-checked-background-color: var(--slate-400);\n --st-checkbox-checked-border-color: var(--slate-400);\n --st-column-editor-background-color: var(--yellow-200);\n --st-column-editor-popout-background-color: var(--yellow-200);\n --st-button-hover-background-color: var(--yellow-200);\n --st-button-active-background-color: var(--slate-400);\n --st-font-family: "Georgia", serif;\n --st-editable-cell-focus-border-color: var(--yellow-400);\n}\n\n.theme-solarized-dark {\n / Base Variables /\n --st-border-radius: 4px;\n --st-border-width: 1px;\n --st-cell-padding: 8px;\n --st-font-size: 0.875rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.2s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 4px;\n --st-spacing-medium: 8px;\n --st-spacing-large: 16px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-600);\n\n --st-border-color: var(--slate-800);\n --st-odd-row-background-color: var(--slate-900);\n --st-even-row-background-color: var(--slate-800);\n --st-header-background-color: var(--slate-800);\n --st-dragging-background-color: var(--slate-800);\n --st-selected-cell-background-color: var(--slate-600);\n --st-selected-first-cell-background-color: var(--amber-600);\n --st-footer-background-color: var(--slate-900);\n --st-cell-color: var(--slate-300);\n --st-cell-odd-row-color: var(--slate-400);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--white / 0.1), 0 1px 2px -1px var(--white / 0.1);\n --st-selected-cell-color: var(--slate-300);\n --st-selected-first-cell-color: var(--slate-300);\n --st-resize-handle-color: var(--slate-600);\n --st-separator-border-color: var(--slate-400);\n --st-last-group-row-separator-border-color: var(--slate-600);\n --st-selected-border-top-color: var(--blue-800);\n --st-selected-border-bottom-color: var(--blue-800);\n --st-selected-border-left-color: var(--blue-800);\n --st-selected-border-right-color: var(--blue-800);\n --st-checkbox-checked-background-color: var(--slate-600);\n --st-checkbox-checked-border-color: var(--slate-600);\n --st-column-editor-background-color: var(--slate-800);\n --st-column-editor-popout-background-color: var(--slate-800);\n --st-button-hover-background-color: var(--slate-600);\n --st-button-active-background-color: var(--slate-800);\n --st-font-family: "Courier New", monospace;\n --st-editable-cell-focus-border-color: var(--blue-800);\n}\n\n.theme-ocean {\n / Base Variables /\n --st-border-radius: 6px;\n --st-border-width: 1px;\n --st-cell-padding: 10px;\n --st-font-size: 0.9rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.3s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 6px;\n --st-spacing-medium: 10px;\n --st-spacing-large: 20px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--cyan-700);\n --st-odd-row-background-color: var(--cyan-50);\n --st-even-row-background-color: var(--cyan-100);\n --st-header-background-color: var(--cyan-100);\n --st-dragging-background-color: var(--cyan-300);\n --st-selected-cell-background-color: var(--cyan-700);\n --st-selected-first-cell-background-color: var(--slate-900);\n --st-footer-background-color: var(--cyan-50);\n --st-cell-color: var(--slate-900);\n --st-cell-odd-row-color: var(--cyan-700);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.1), 0 1px 2px -1px var(--black / 0.1);\n --st-selected-cell-color: var(--slate-900);\n --st-selected-first-cell-color: var(--slate-900);\n --st-resize-handle-color: var(--cyan-300);\n --st-separator-border-color: var(--cyan-200);\n --st-last-group-row-separator-border-color: var(--cyan-500);\n --st-selected-border-top-color: var(--blue-700);\n --st-selected-border-bottom-color: var(--blue-700);\n --st-selected-border-left-color: var(--blue-700);\n --st-selected-border-right-color: var(--blue-700);\n --st-checkbox-checked-background-color: var(--cyan-700);\n --st-checkbox-checked-border-color: var(--cyan-700);\n --st-column-editor-background-color: var(--cyan-100);\n --st-column-editor-popout-background-color: var(--cyan-100);\n --st-button-hover-background-color: var(--cyan-300);\n --st-button-active-background-color: var(--cyan-700);\n --st-font-family: "Verdana", sans-serif;\n --st-editable-cell-focus-border-color: var(--cyan-500);\n}\n\n.theme-forest {\n / Base Variables /\n --st-border-radius: 4px;\n --st-border-width: 1px;\n --st-cell-padding: 8px;\n --st-font-size: 0.875rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.2s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 4px;\n --st-spacing-medium: 8px;\n --st-spacing-large: 16px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--green-800);\n --st-odd-row-background-color: var(--green-50);\n --st-even-row-background-color: var(--green-100);\n --st-header-background-color: var(--green-100);\n --st-dragging-background-color: var(--green-400);\n --st-selected-cell-background-color: var(--green-700);\n --st-selected-first-cell-background-color: var(--green-900);\n --st-footer-background-color: var(--green-50);\n --st-cell-color: var(--green-900);\n --st-cell-odd-row-color: var(--green-700);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.1), 0 1px 2px -1px var(--black / 0.1);\n --st-selected-cell-color: var(--green-900);\n --st-selected-first-cell-color: var(--green-900);\n --st-resize-handle-color: var(--green-400);\n --st-separator-border-color: var(--green-200);\n --st-last-group-row-separator-border-color: var(--green-500);\n --st-selected-border-top-color: var(--green-600);\n --st-selected-border-bottom-color: var(--green-600);\n --st-selected-border-left-color: var(--green-600);\n --st-selected-border-right-color: var(--green-600);\n --st-checkbox-checked-background-color: var(--green-700);\n --st-checkbox-checked-border-color: var(--green-700);\n --st-column-editor-background-color: var(--green-100);\n --st-column-editor-popout-background-color: var(--green-100);\n --st-button-hover-background-color: var(--green-400);\n --st-button-active-background-color: var(--green-700);\n --st-font-family: "Tahoma", sans-serif;\n --st-editable-cell-focus-border-color: var(--green-600);\n}\n\n.theme-desert {\n / Base Variables /\n --st-border-radius: 8px;\n --st-border-width: 1px;\n --st-cell-padding: 10px;\n --st-font-size: 0.9rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.3s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 6px;\n --st-spacing-medium: 10px;\n --st-spacing-large: 20px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--amber-600);\n --st-odd-row-background-color: var(--amber-50);\n --st-even-row-background-color: var(--amber-100);\n --st-header-background-color: var(--amber-100);\n --st-dragging-background-color: var(--amber-300);\n --st-selected-cell-background-color: var(--amber-600);\n --st-selected-first-cell-background-color: var(--amber-800);\n --st-footer-background-color: var(--amber-50);\n --st-cell-color: var(--amber-800);\n --st-cell-odd-row-color: var(--amber-600);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.1), 0 1px 2px -1px var(--black / 0.1);\n --st-selected-cell-color: var(--amber-800);\n --st-selected-first-cell-color: var(--amber-800);\n --st-resize-handle-color: var(--amber-300);\n --st-separator-border-color: var(--amber-200);\n --st-last-group-row-separator-border-color: var(--amber-500);\n --st-selected-border-top-color: var(--amber-700);\n --st-selected-border-bottom-color: var(--amber-700);\n --st-selected-border-left-color: var(--amber-700);\n --st-selected-border-right-color: var(--amber-700);\n --st-checkbox-checked-background-color: var(--amber-600);\n --st-checkbox-checked-border-color: var(--amber-600);\n --st-column-editor-background-color: var(--amber-100);\n --st-column-editor-popout-background-color: var(--amber-100);\n --st-button-hover-background-color: var(--amber-300);\n --st-button-active-background-color: var(--amber-600);\n --st-font-family: "Times New Roman", serif;\n --st-editable-cell-focus-border-color: var(--amber-700);\n}\n\n.theme-bubblegum {\n / Base Variables /\n --st-border-radius: 16px;\n --st-border-width: 2px;\n --st-cell-padding: 12px;\n --st-font-size: 1rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 600;\n --st-transition-duration: 0.3s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 8px;\n --st-spacing-medium: 12px;\n --st-spacing-large: 24px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--pink-500);\n --st-odd-row-background-color: var(--pink-50);\n --st-even-row-background-color: var(--pink-100);\n --st-header-background-color: var(--pink-200);\n --st-dragging-background-color: var(--pink-300);\n --st-selected-cell-background-color: var(--pink-400);\n --st-selected-first-cell-background-color: var(--pink-600);\n --st-footer-background-color: var(--pink-50);\n --st-cell-color: var(--pink-900);\n --st-cell-odd-row-color: var(--pink-800);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.1), 0 1px 2px -1px var(--black / 0.1);\n --st-selected-cell-color: var(--pink-900);\n --st-selected-first-cell-color: var(--pink-900);\n --st-resize-handle-color: var(--pink-400);\n --st-separator-border-color: var(--pink-200);\n --st-last-group-row-separator-border-color: var(--pink-500);\n --st-selected-border-top-color: var(--pink-700);\n --st-selected-border-bottom-color: var(--pink-700);\n --st-selected-border-left-color: var(--pink-700);\n --st-selected-border-right-color: var(--pink-700);\n --st-checkbox-checked-background-color: var(--pink-500);\n --st-checkbox-checked-border-color: var(--pink-500);\n --st-column-editor-background-color: var(--pink-100);\n --st-column-editor-popout-background-color: var(--pink-100);\n --st-button-hover-background-color: var(--pink-300);\n --st-button-active-background-color: var(--pink-400);\n --st-font-family: "Pacifico", cursive;\n --st-editable-cell-focus-border-color: var(--pink-600);\n}\n\n.theme-90s {\n / Base Variables /\n --st-border-radius: 0;\n --st-border-width: 2px;\n --st-cell-padding: 8px;\n --st-font-size: 0.875rem;\n --st-font-weight-normal: 400;\n --st-font-weight-bold: 700;\n --st-transition-duration: 0.1s;\n --st-transition-ease: ease;\n --st-opacity-disabled: 0.5;\n --st-spacing-small: 4px;\n --st-spacing-medium: 8px;\n --st-spacing-large: 16px;\n --st-scrollbar-bg-color: transparent;\n --st-scrollbar-thumb-color: var(--slate-200);\n\n --st-border-color: var(--gray-500);\n --st-odd-row-background-color: var(--gray-100);\n --st-even-row-background-color: var(--gray-200);\n --st-header-background-color: var(--gray-300);\n --st-dragging-background-color: var(--gray-400);\n --st-selected-cell-background-color: var(--gray-500);\n --st-selected-first-cell-background-color: var(--gray-600);\n --st-footer-background-color: var(--gray-100);\n --st-cell-color: var(--gray-900);\n --st-cell-odd-row-color: var(--gray-800);\n --st-edit-cell-shadow: 0 1px 3px 0 var(--black / 0.1), 0 1px 2px -1px var(--black / 0.1);\n --st-selected-cell-color: var(--gray-900);\n --st-selected-first-cell-color: var(--gray-900);\n --st-resize-handle-color: var(--gray-400);\n --st-separator-border-color: var(--gray-200);\n --st-last-group-row-separator-border-color: var(--gray-500);\n --st-selected-border-top-color: var(--gray-700);\n --st-selected-border-bottom-color: var(--gray-700);\n --st-selected-border-left-color: var(--gray-700);\n --st-selected-border-right-color: var(--gray-700);\n --st-checkbox-checked-background-color: var(--gray-500);\n --st-checkbox-checked-border-color: var(--gray-500);\n --st-column-editor-background-color: var(--gray-200);\n --st-column-editor-popout-background-color: var(--gray-200);\n --st-button-hover-background-color: var(--gray-300);\n --st-button-active-background-color: var(--gray-400);\n --st-font-family: "Courier New", monospace;\n --st-editable-cell-focus-border-color: var(--gray-600);\n}\n\n/ Global styles /\n {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: var(--st-font-family);\n scrollbar-color: var(--st-scrollbar-thumb-color) var(--st-scrollbar-bg-color);\n scrollbar-width: thin;\n}\n\n/* Apply Nunito as the default font /\nbody {\n font-size: var(--st-font-size);\n font-weight: var(--st-font-weight-normal);\n}\n\n/ Wrapper for the table /\n.st-wrapper {\n position: relative;\n border: var(--st-border-width) solid var(--st-border-color);\n border-radius: var(--st-border-radius);\n max-height: 100dvh;\n overflow: hidden;\n}\n\n.st-table-wrapper-container {\n position: relative;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n}\n.st-table-wrapper {\n flex: 1;\n position: relative;\n display: flex;\n width: 100%;\n min-height: 0;\n}\n.st-table-content {\n display: flex;\n flex-direction: column;\n}\n\n/ Header /\n.st-header-container {\n display: flex;\n}\n\n.st-header-container.st-header-scroll-padding::after {\n content: "";\n display: block;\n width: 11.01px;\n flex-shrink: 0;\n background-color: var(--st-header-background-color);\n border-bottom: var(--st-border-width) solid var(--st-border-color);\n}\n\n.st-header-pinned-left,\n.st-header-main,\n.st-header-pinned-right {\n display: grid;\n}\n.st-header-pinned-left {\n border-right: var(--st-border-width) solid var(--st-border-color);\n}\n.st-header-pinned-right {\n border-left: var(--st-border-width) solid var(--st-border-color);\n}\n.st-header-main {\n overflow: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n.st-header-main::-webkit-scrollbar {\n display: none;\n}\n\n/ Body /\n.st-table-body-container {\n display: flex;\n width: 100%;\n overflow: auto;\n height: max-content;\n / min-height: calc(100% - 40px); /\n}\n.st-table-body-main,\n.st-table-body-pinned-left,\n.st-table-body-pinned-right {\n display: grid;\n height: max-content;\n / min-height 100% - table header height /\n / min-height: calc(100% - 40px); /\n}\n.st-table-body-pinned-left {\n border-right: var(--st-border-width) solid var(--st-border-color);\n}\n.st-table-body-main {\n overflow: auto;\n scrollbar-width: none;\n}\n\n.st-table-body-pinned-right {\n border-left: var(--st-border-width) solid var(--st-border-color);\n}\n\n/ Styles for table header cells /\n.st-header-cell {\n position: sticky;\n top: 0;\n background-color: var(--st-header-background-color);\n z-index: 1;\n font-weight: var(--st-font-weight-bold);\n\n display: flex;\n align-items: center;\n gap: var(--st-spacing-small);\n border-top: var(--st-border-width) solid transparent;\n border-bottom: var(--st-border-width) solid var(--st-border-color);\n}\n.st-header-cell.clickable {\n cursor: pointer;\n}\n.st-header-cell.draggable {\n cursor: grab;\n}\n\n/ Common styles for table header and cells /\n.st-header-cell,\n.st-cell {\n display: flex;\n align-items: center;\n color: var(--slate-800);\n overflow: hidden;\n gap: var(--st-spacing-small);\n / mix-blend-mode: multiply; /\n}\n.st-header-cell.right-aligned,\n.st-cell.right-aligned {\n justify-content: flex-end;\n text-align: right;\n}\n.st-cell.right-aligned {\n padding-right: calc(var(--st-cell-padding) + var(--st-spacing-small) + var(--st-resize-handle-width));\n}\n.st-header-cell.right-aligned > .st-header-label {\n text-align: right;\n}\n\n.st-cell.clickable {\n cursor: pointer;\n}\n\n.st-header-cell,\n.st-cell,\n.st-cell-editing {\n width: 100%;\n height: 40px;\n}\n\n.st-cell-editing {\n position: relative;\n}\n\n.st-header-label {\n flex: 1;\n color: var(--st-cell-color);\n}\n\n.st-header-label,\n.st-cell {\n user-select: none;\n padding: var(--st-cell-padding);\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n}\n.st-cell {\n position: relative;\n border: var(--st-border-width) solid transparent;\n}\n\n.st-cell-depth-1 {\n padding-left: calc(var(--st-cell-padding) 4);\n}\n.st-cell-depth-2 {\n padding-left: calc(var(--st-cell-padding) * 5);\n}\n.st-cell-depth-3 {\n padding-left: calc(var(--st-cell-padding) * 6);\n}\n.st-cell-depth-4 {\n padding-left: calc(var(--st-cell-padding) * 7);\n}\n.st-cell-depth-5 {\n padding-left: calc(var(--st-cell-padding) * 8);\n}\n.st-cell-depth-6 {\n padding-left: calc(var(--st-cell-padding) * 9);\n}\n.st-cell-depth-7 {\n padding-left: calc(var(--st-cell-padding) * 10);\n}\n\n.st-sort-icon-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.st-sort-icon {\n fill: var(--slate-500);\n}\n\n.st-header-resize-handle {\n top: 0;\n right: 0;\n width: var(--st-resize-handle-width);\n height: 12px;\n cursor: col-resize;\n background-color: var(--st-resize-handle-color);\n}\n\n.st-row-separator {\n height: 1px;\n background-color: var(--st-separator-border-color);\n grid-column: 1 / -1;\n}\n.st-row-separator.st-last-group-row {\n background-color: var(--st-last-group-row-separator-border-color);\n}\n.st-cell-even-row {\n background-color: var(--st-even-row-background-color);\n}\n\n.st-cell-odd-row:not(.st-cell-selected) {\n background-color: var(--st-odd-row-background-color);\n color: var(--st-cell-odd-row-color);\n}\n.st-cell:not(.st-cell-odd-row):not(.st-cell-selected) {\n color: var(--st-cell-color);\n}\n.st-last-group-row {\n}\n\n/* Style for a cell when it is being dragged /\n.st-dragging {\n background-color: var(--st-dragging-background-color);\n}\n\n/ Style for selected table cells /\n.st-cell-selected {\n background-color: var(--st-selected-cell-background-color);\n color: var(--st-selected-cell-color);\n}\n\n/ Style for the first selected table cell /\n.st-cell-selected-first {\n background-color: var(--st-selected-first-cell-background-color);\n color: var(--st-selected-first-cell-color);\n}\n\n/ Border for selected cells /\n.st-selected-top-border {\n border-top: var(--st-border-width) solid var(--st-selected-border-top-color);\n}\n\n.st-selected-bottom-border {\n border-bottom: var(--st-border-width) solid var(--st-selected-border-bottom-color);\n}\n\n.st-selected-left-border {\n border-left: var(--st-border-width) solid var(--st-selected-border-left-color);\n}\n\n.st-selected-right-border {\n border-right: var(--st-border-width) solid var(--st-selected-border-right-color);\n}\n\n.st-horizontal-scrollbar-left,\n.st-horizontal-scrollbar-right {\n background-color: var(--st-scrollbar-bg-color);\n}\n.st-horizontal-scrollbar-middle {\n overflow-x: scroll;\n}\n.st-horizontal-scrollbar-middle > div {\n padding-bottom: 0.01px;\n transform: translateY(1px);\n}\n\n.st-horizontal-scrollbar-container {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n.st-footer {\n display: flex;\n align-items: center;\n background-color: var(--st-footer-background-color);\n padding: var(--st-spacing-medium);\n border-top: var(--st-border-width) solid var(--st-border-color);\n}\n\n.st-next-prev-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--st-spacing-small);\n cursor: pointer;\n background-color: transparent;\n border: none;\n border-radius: var(--st-border-radius);\n transition: background-color var(--st-transition-duration) var(--st-transition-ease);\n}\n.st-next-prev-btn {\n fill: var(--slate-600);\n}\n.disabled > .st-next-prev-icon {\n cursor: not-allowed;\n fill: var(--slate-400);\n}\n\n.st-next-prev-btn:not(.disabled):hover {\n background-color: var(--slate-100);\n}\n\n.st-page-btn {\n margin-left: var(--st-spacing-small);\n padding: var(--st-spacing-small);\n cursor: pointer;\n background-color: transparent;\n color: var(--slate-600);\n border: none;\n border-radius: var(--st-border-radius);\n transition: background-color var(--st-transition-duration) var(--st-transition-ease);\n}\n\n.st-page-btn:hover {\n background-color: var(--st-button-hover-background-color);\n}\n\n.st-page-btn.active {\n background-color: var(--st-button-active-background-color);\n color: white;\n}\n\n.editable-cell-input {\n position: absolute;\n top: 0;\n left: 0;\n border-radius: var(--st-border-radius);\n border: var(--st-border-width) solid var(--st-border-color);\n box-shadow: var(--st-edit-cell-shadow-color);\n z-index: 1;\n outline: none;\n height: 100%;\n width: 100%;\n padding: var(--st-cell-padding);\n font-size: var(--st-font-size);\n}\n.editable-cell-input:focus {\n border: var(--st-border-width) solid var(--st-editable-cell-focus-border-color);\n}\n.st-column-editor {\n position: relative;\n user-select: none;\n background: var(--st-footer-background-color);\n border-left: var(--st-border-width) solid var(--st-border-color);\n cursor: pointer;\n color: var(--slate-500);\n flex-shrink: 0;\n}\n\n.st-column-editor-text {\n padding: var(--st-spacing-medium) var(--st-spacing-small);\n writing-mode: vertical-rl;\n z-index: 2;\n}\n\n.st-column-editor.open,\n.st-column-editor.open .st-column-editor-text {\n background-color: var(--st-column-editor-background-color);\n}\n\n.st-column-editor-popout {\n position: absolute;\n top: 0;\n right: calc(100% + 1px);\n z-index: 1;\n height: 100%;\n background-color: var(--st-column-editor-popout-background-color);\n transition: width var(--st-transition-duration) var(--st-transition-ease);\n overflow: hidden;\n width: 0;\n}\n.st-column-editor-popout-content {\n display: flex;\n flex-direction: column;\n overflow: auto;\n gap: var(--st-spacing-small);\n padding: var(--st-spacing-medium) var(--st-spacing-small);\n border-left: var(--st-border-width) solid var(--st-border-color);\n height: 100%;\n}\n\n.st-column-editor-popout.open {\n width: 200px;\n}\n\n.st-column-editor-popout.left {\n transform: translateX(-100%);\n}\n\n.st-column-editor-popout.open.left {\n transform: translateX(0);\n}\n\n/ Checkbox styles /\n.st-checkbox-label {\n display: flex;\n align-items: center;\n cursor: pointer;\n gap: var(--st-spacing-medium);\n}\n\n.st-checkbox-input {\n display: none; / Hide the default checkbox /\n}\n\n.st-checkbox-custom {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border: var(--st-border-width) solid var(--slate-300);\n border-radius: var(--st-border-radius);\n background-color: white;\n transition: background-color var(--st-transition-duration) var(--st-transition-ease),\n border-color var(--st-transition-duration) var(--st-transition-ease);\n}\n\n.st-checkbox-custom.st-checked {\n background-color: var(--st-checkbox-checked-background-color);\n border-color: var(--st-checkbox-checked-border-color);\n}\n\n.st-checkbox-checkmark {\n width: 6px;\n height: 11px;\n border: solid white;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n\n@keyframes slide-in-left {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes slide-in-right {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n/ Group Header Styles /\n.st-group-header {\n background-color: var(--st-header-background-color);\n cursor: pointer;\n user-select: none;\n height: 40px;\n display: flex;\n align-items: center;\n border-bottom: var(--st-border-width) solid var(--st-border-color);\n color: var(--st-cell-color);\n font-weight: var(--st-font-weight-bold);\n transition: background-color var(--st-transition-duration) var(--st-transition-ease);\n}\n\n.st-group-header:hover {\n background-color: var(--st-button-hover-background-color);\n}\n\n.st-group-header-content {\n display: flex;\n align-items: center;\n gap: var(--st-spacing-medium);\n}\n\n.st-group-toggle-icon {\n font-size: 0.8em;\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.st-group-name {\n font-weight: var(--st-font-weight-bold);\n}\n\n.st-group-count {\n color: var(--st-cell-odd-row-color);\n font-size: 0.9em;\n}\n\n/ Animation for expand/collapse /\n.st-group-header.expanded .st-group-toggle-icon {\n transform: rotate(0deg);\n transition: transform var(--st-transition-duration) var(--st-transition-ease);\n}\n\n.st-group-header.collapsed .st-group-toggle-icon {\n transform: rotate(-90deg);\n transition: transform var(--st-transition-duration) var(--st-transition-ease);\n}\n');var z,S=function(e){var n=e.accessor,r=e.rowIndex;return"cell-".concat(n,"-").concat(r)},N=function(e){var n=e.hiddenColumns,r=e.header,o=e.pinned;return n[r.accessor]?null:!o&&!r.pinned\|\|r.pinned===o\|\|null},H=function(r){var o=r.value,t=r.onBlur,a=r.onChange;return e("select",p({value:o.toString(),onBlur:t,onChange:function(e){var n=e.target.value;a("true"===n)}},{children:[n("option",p({value:"true"},{children:"True"})),n("option",p({value:"false"},{children:"False"}))]}))},L=function(e){var r=e.defaultValue,o=e.onBlur,a=e.onChange,l=t(null);return n("input",{className:"editable-cell-input",ref:l,autoFocus:!0,type:"text",defaultValue:null!=r?r:"",onBlur:o,onChange:function(e){var n=e.target.value;a(n)}})},M=function(e){var r=e.defaultValue,o=e.onBlur,a=e.onChange,l=t(null);return n("input",{className:"editable-cell-input",ref:l,autoFocus:!0,defaultValue:r.toString(),onBlur:o,onChange:function(e){var n=e.target.value;/^\d\.?\d$/.test(n)&&a(n)}})},T=function(e){var o=e.onChange,t=e.setIsEditing,a=e.value,l=function(e){null==o\|\|o(e)},s=function(){t(!1)};return n(r,{children:"string"==typeof a\|\|null==a?n(L,{defaultValue:a,onBlur:s,onChange:l}):"boolean"==typeof a?n(H,{onBlur:s,onChange:l,value:a}):"number"==typeof a?n(M,{defaultValue:a,onBlur:s,onChange:l}):null})},O=0,B=function(){return function(e){var n=e.callback,r=e.callbackProps,o=e.limit,t=Date.now();(0===O\|\|t-O>=o)&&(O=t,n(r))}},A=Date.now(),P={screenX:0,screenY:0},W=function(e){var n,r,o=e.draggedHeaderRef,a=e.headersRef,s=e.hoveredHeaderRef,c=e.onTableHeaderDragEnd,d=(n=a.current,r=t(n),l((function(){r.current=n}),[n]),r.current);return{handleDragStart:function(e){o.current=e,A=Date.now()},handleDragOver:function(e){var n,r=e.event,t=e.hoveredHeader;if(r.preventDefault(),a.current){var l=r.currentTarget.getAnimations().some((function(e){return"running"===e.playState})),i=r.screenX,u=r.screenY,g=Math.sqrt(Math.pow(i-P.screenX,2)+Math.pow(u-P.screenY,2));s.current=t;var b=m([],a.current,!0),f=b.findIndex((function(e){var n;return e.accessor===(null===(n=o.current)\|\|void 0===n?void 0:n.accessor)})),v=b.findIndex((function(e){return e.accessor===t.accessor})),p=b.splice(f,1)[0];if(b.splice(v,0,p),!(l\|\|t.accessor===(null===(n=o.current)\|\|void 0===n?void 0:n.accessor)\|\|null===o.current\|\|g<10\|\|void 0===f\|\|void 0===v\|\|JSON.stringify(b)===JSON.stringify(a.current))){var h=Date.now();JSON.stringify(b)===JSON.stringify(d)&&h-A<800&&g<50\|\|(A=h,P={screenX:i,screenY:u},c(b))}}},handleDragEnd:function(){o.current=null,s.current=null}}},U=d((function(r,t){var a,s=r.borderClass,c=r.cellHasChildren,d=r.colIndex,u=r.content,g=r.depth,b=r.draggedHeaderRef,f=r.header,v=r.headersRef,h=r.hoveredHeaderRef,m=r.isRowExpanded,w=r.isSelected,k=r.isTopLeftCell,R=r.onCellChange,D=r.onExpandRowClick,E=r.onMouseDown,I=r.onMouseOver,z=r.onTableHeaderDragEnd,N=r.row,H=r.rowIndex,L=i(y),M=L.rows,O=L.tableRows,A=o(u),P=A[0],U=A[1],j=o(!1),V=j[0],G=j[1],X=W({draggedHeaderRef:b,headersRef:v,hoveredHeaderRef:h,onTableHeaderDragEnd:z}).handleDragOver,F=B(),J=Boolean(null==f?void 0:f.isEditable),Y=H%2==0,q="st-cell ".concat(g>0&&f.expandable?"st-cell-depth-".concat(g):""," ").concat(w?k?"st-cell-selected-first-cell ".concat(s):"st-cell-selected ".concat(s):""," ").concat(Y?"st-cell-odd-row":"st-cell-even-row"," ").concat(J?"clickable":""," ").concat("right"===f.align?"right-aligned":"");l((function(){"object"!=typeof u&&U(u)}),[u]),l((function(){}),[f.accessor,P,M,null===(a=N.rowMeta)\|\|void 0===a?void 0:a.rowId,O]);return V?n("div",p({className:"st-cell-editing ".concat(Y?"st-cell-odd-row":"st-cell-even-row"),id:S({accessor:f.accessor,rowIndex:H+1})},{children:n(T,{onChange:function(e){var n;U(e),null==R\|\|R({accessor:f.accessor,newValue:e,newRowIndex:H,originalRowIndex:null===(n=N.rowMeta)\|\|void 0===n?void 0:n.rowId,row:N})},setIsEditing:G,value:P})})):e("div",p({className:q,id:S({accessor:f.accessor,rowIndex:H+1}),onDoubleClick:function(){return f.isEditable&&G(!0)},onMouseDown:function(){return E(H,d)},onMouseOver:function(){return I(H,d)},onDragOver:function(e){return F({callback:X,callbackProps:{event:e,hoveredHeader:f},limit:50})},ref:t},{children:[f.expandable&&c?m(N.rowMeta.rowId)?n("div",p({className:"st-sort-icon-container",onClick:function(){return D(N.rowMeta.rowId)}},{children:n(C,{className:"st-sort-icon"})})):n("div",p({className:"st-sort-icon-container",onClick:function(){return D(N.rowMeta.rowId)}},{children:n(x,{className:"st-sort-icon"})})):null,n("span",{children:P})]}))})),j=d((function(e,r){return e.visible?n("div",{className:"st-cell",ref:r}):n("div",{ref:r})})),V=function(e){var r=e.lastGroupRow;return n("div",{className:"st-row-separator ".concat(r?"st-last-group-row":"")})},G=function(e){var o=e.allowAnimations,t=e.children,a=h(e,["allowAnimations","children"]);return o?n(X,p({},a,{children:t})):n(r,{children:t})},X=function(e){var a=e.allowHorizontalAnimate,s=void 0===a\|\|a,c=e.children,d=e.draggedHeaderRef,i=e.isBody,g=e.pauseAnimation,b=e.rowIndex,f=e.tableRef,v=e.headersRef,p=t(!1),h=o({}),m=h[0],w=h[1],k=t({}),x=v.current;return u((function(){if(x){var e=function(e){var n=e.currentHeaders,r=e.draggedHeaderRef,o=e.rowIndex,t={};return n.forEach((function(e){var n;if(e){var a=document.getElementById(S({accessor:e.accessor,rowIndex:o}));if(a){var l=a.getAnimations().some((function(e){return"running"===e.playState})),s=a.getBoundingClientRect();l&&(null===(n=null==r?void 0:r.current)\|\|void 0===n?void 0:n.accessor)!==e.accessor?t[e.accessor]=!1:t[e.accessor]=s}}})),t}({currentHeaders:x,draggedHeaderRef:d,rowIndex:b});JSON.stringify(e)!==JSON.stringify(m)&&(k.current=m,w(e))}}),[m,x,d,i,b]),u((function(){var e=f.current,n=function(){p.current=!0},r=function(){p.current=!1};return null==e\|\|e.addEventListener("scroll",n),null==e\|\|e.addEventListener("scrollend",r),function(){null==e\|\|e.removeEventListener("scroll",n),null==e\|\|e.removeEventListener("scrollend",r)}}),[d,f]),l((function(){g\|\|p.current\|\|Object.keys(k.current).length&&x&&x.forEach((function(e){var n=document.getElementById(S({accessor:e.accessor,rowIndex:b}));if(n){var r=k.current[e.accessor],o=m[e.accessor];if(r&&o){var t=r.left-o.left,a=s?0:r.top-o.top,l=Math.abs(t),c=Math.abs(a);(l>10\|\|c>10)&&requestAnimationFrame((function(){n.style.transform="translate(".concat(t,"px, ").concat(a,"px)"),n.style.transition="transform 0s",requestAnimationFrame((function(){n.style.transform="",n.style.transition="transform ".concat(400,"ms ease-out")}))}))}}}))}),[s,m,x,i,g,k,b]),n(r,{children:c})},F=function(r){var o,t=r.getBorderClass,a=r.handleMouseDown,l=r.handleMouseOver,s=r.headers,c=r.hiddenColumns,d=r.isRowExpanded,i=r.isSelected,u=r.isTopLeftCell,f=r.lastGroupRow,v=r.onExpandRowClick,m=r.pinned,w=r.row,k=r.rowIndex,x=r.shouldDisplayLastColumnCell,y=h(r,["getBorderClass","handleMouseDown","handleMouseOver","headers","hiddenColumns","isRowExpanded","isSelected","isTopLeftCell","lastGroupRow","onExpandRowClick","pinned","row","rowIndex","shouldDisplayLastColumnCell"]),R=null===(o=w.rowMeta)\|\|void 0===o?void 0:o.children;return e(G,p({allowAnimations:y.allowAnimations,allowHorizontalAnimate:y.shouldPaginate,draggedHeaderRef:y.draggedHeaderRef,headersRef:y.headersRef,isBody:!0,pauseAnimation:y.isWidthDragging,rowIndex:k+1,tableRef:y.tableRef},{children:[0!==k&&n(V,{lastGroupRow:f}),s.map((function(e,n){if(!N({hiddenColumns:c,header:e,pinned:m}))return null;var r=w.rowData[e.accessor];return e.cellRenderer&&(r=e.cellRenderer(w)),g(U,p({},y,{borderClass:t(k,n),cellHasChildren:((null==R?void 0:R.length)\|\|0)>0,colIndex:n,content:r,header:e,isRowExpanded:d,isSelected:i(k,n),isTopLeftCell:u(k,n),key:n,onExpandRowClick:v,onMouseDown:function(){return a({rowIndex:k,colIndex:n})},onMouseOver:function(){return l(k,n)},row:w,rowIndex:k}))})),n(j,{ref:b(),visible:x})]}))},J=function(o){var t,a,l,s=o.depth,c=void 0===s?0:s,d=o.getNextRowIndex,i=o.index,u=o.lastGroupRow,b=o.pinned,f=o.props,v=o.row,h=((null===(a=null===(t=v.rowMeta)\|\|void 0===t?void 0:t.children)\|\|void 0===a?void 0:a.length)\|\|0)>0,m=d(),w=(null===(l=v.rowMeta)\|\|void 0===l?void 0:l.children)\|\|[];return e(r,{children:[g(F,p({},f,{depth:c,lastGroupRow:u,key:i,pinned:b,row:v,rowIndex:m})),h&&f.isRowExpanded(v.rowMeta.rowId)&&w.map((function(e,r){return n(J,{depth:c+1,getNextRowIndex:d,index:r,pinned:b,props:f,row:e},r)}))]})},Y=function(e){e.headerContainerRef;var r=e.isRowExpanded,o=e.onExpandRowClick,a=e.pinned,s=e.rows,c=e.sectionRef,d=e.templateColumns,i=h(e,["headerContainerRef","isRowExpanded","onExpandRowClick","pinned","rows","sectionRef","templateColumns"]),u=a?"st-table-body-pinned-".concat(a):"st-table-body-main",g=t(0);l((function(){g.current=0}));var b=function(){return g.current++};return n("div",p({className:u,ref:c,style:{gridTemplateColumns:d}},{children:s.map((function(e,t){var l,s;return n(J,{getNextRowIndex:b,index:t,lastGroupRow:Boolean(null===(s=null===(l=e.rowMeta)\|\|void 0===l?void 0:l.children)\|\|void 0===s?void 0:s.length),pinned:a,props:p(p({},i),{isRowExpanded:r,onExpandRowClick:o}),row:e},t)}))}))},q=function(r){var a=t(null),s=r.currentRows,c=r.headerContainerRef,d=r.isRowExpanded,i=r.mainTemplateColumns,u=r.onExpandRowClick,g=r.pinnedLeftColumns,b=r.pinnedLeftRef,f=r.pinnedLeftTemplateColumns,v=r.pinnedRightColumns,h=r.pinnedRightRef,m=r.pinnedRightTemplateColumns,w=r.tableRef;return function(e){var n=e.headerContainerRef,r=e.mainSectionRef,t=o(!1),a=t[0],s=t[1];l((function(){var e=null==n?void 0:n.current;if(a&&e)return e.classList.add("st-header-scroll-padding"),function(){e.classList.remove("st-header-scroll-padding")}}),[n,a]),l((function(){var e=null==n?void 0:n.current,o=null==r?void 0:r.current;if(o&&e){var t=function(){if(o){var e=o.scrollHeight>o.clientHeight;console.log(o),s(e)}};t();var a=new ResizeObserver((function(){t()}));return a.observe(o),function(){o&&a.unobserve(o)}}}),[n,r])}({headerContainerRef:c,mainSectionRef:a}),e("div",p({className:"st-table-body-container",ref:a},{children:[g.length>0&&n(Y,p({},r,{rows:s,templateColumns:f,pinned:"left",sectionRef:b,isRowExpanded:d,onExpandRowClick:u})),n(Y,p({},r,{rows:s,templateColumns:i,sectionRef:w,isRowExpanded:d,onExpandRowClick:u})),v.length>0&&n(Y,p({},r,{rows:s,templateColumns:m,pinned:"right",sectionRef:h,isRowExpanded:d,onExpandRowClick:u}))]}))},K=function(e){var n=e.event,r=e.forceUpdate,o=e.header,t=e.headersRef,a=e.index;e.reverse;var l=e.setIsWidthDragging;l(!0),n.preventDefault();var s=n.clientX;if(o){var c=o.width,d=function(e){var n=Math.max(c+(e.clientX-s),40);o&&t.current&&(t.current[a].width=n,r())},i=function(){document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",i),l(!1)};document.addEventListener("mousemove",d),document.addEventListener("mouseup",i)}},$=d((function(r,t){var a,s=r.columnResizing,c=r.currentRows,d=r.draggable,i=r.draggedHeaderRef,u=r.forceUpdate,g=r.headersRef,b=r.hoveredHeaderRef,f=r.index,v=r.onSort,h=r.onTableHeaderDragEnd,m=r.reverse,w=r.selectableColumns,k=r.setIsWidthDragging,x=r.setSelectedCells,y=r.sort,R=r.sortDownIcon,C=r.sortUpIcon,D=o(!1),E=D[0],I=D[1],z=null===(a=g.current)\|\|void 0===a?void 0:a[f],N=Boolean(null==z?void 0:z.isSortable),H="st-header-cell ".concat(z===b.current?"st-hovered":""," ").concat(E?"st-dragging":""," ").concat(N?"clickable":""," ").concat(d&&!N?"draggable":""," ").concat("right"===(null==z?void 0:z.align)?"right-aligned":""),L=W({draggedHeaderRef:i,headersRef:g,hoveredHeaderRef:b,onTableHeaderDragEnd:h}),M=L.handleDragStart,T=L.handleDragEnd,O=W({draggedHeaderRef:i,headersRef:g,hoveredHeaderRef:b,onTableHeaderDragEnd:h}).handleDragOver,A=B(),P=function(e){var n=e.event,r=e.header;if(w){var o=c.length,t=Array.from({length:o},(function(e,n){return"".concat(n,"-").concat(f)})),a=function(e,n){var r=new Set,t=Math.min(e,n),a=Math.max(e,n);return Array.from({length:o}).forEach((function(e,n){Array.from({length:a-t+1}).forEach((function(e,o){r.add("".concat(n,"-").concat(t+o))}))})),r};n.shiftKey?x((function(e){var n,r=Number(null===(n=Array.from(e)[0])\|\|void 0===n?void 0:n.split("-")[1]),o=Number(t[0].split("-")[1]);return r===o?new Set(t):r>o?a(o,r):a(r,o)})):x(new Set(t))}else r.isSortable&&v(f,r.accessor)};if(l((function(){var e=function(e){e.preventDefault(),e.dataTransfer.dropEffect="move"};return document.addEventListener("dragover",e),function(){document.removeEventListener("dragover",e)}}),[]),!z)return null;var U=s&&n("div",{className:"st-header-resize-handle",onMouseDown:function(e){A({callback:K,callbackProps:{event:e,forceUpdate:u,header:z,headersRef:g,index:f,setIsWidthDragging:k},limit:10})}});return e("div",p({className:H,id:S({accessor:z.accessor,rowIndex:0}),onDragOver:function(e){A({callback:O,callbackProps:{event:e,hoveredHeader:z},limit:50})},ref:t,style:{width:z.width}},{children:[m&&U,n("div",p({className:"st-header-label",draggable:d,onClick:function(e){return P({event:e,header:z})},onDragEnd:function(e){e.preventDefault(),I(!1),T()},onDragStart:function(e){d&&z&&function(e){I(!0),M(e)}(z)},onMouseEnter:function(){return document.body.style.overflow="hidden"},onMouseLeave:function(){return document.body.style.overflow="auto"}},{children:null==z?void 0:z.label})),y&&y.key.accessor===z.accessor&&e("div",p({className:"st-sort-icon-container",onClick:function(e){return P({event:e,header:z})}},{children:["ascending"===y.direction&&C&&C,"descending"===y.direction&&R&&R]})),!m&&U]}))})),Q=function(e,n){l((function(){if(e.current){var r=e.current,o=function(){var e,o=null==r?void 0:r.scrollLeft;void 0!==o&&(null===(e=n.current)\|\|void 0===e\|\|e.scrollTo(o,0))};return r.addEventListener("scroll",o),function(){null==r\|\|r.removeEventListener("scroll",o)}}}),[e,n])},Z=function(r){var o,a,l,s=r.allowAnimations,c=r.columnResizing,d=r.currentRows,i=r.draggable,u=r.draggedHeaderRef,g=r.forceUpdate,f=r.headerContainerRef,v=r.headersRef,h=r.hiddenColumns,m=r.hoveredHeaderRef,w=r.isWidthDragging,k=r.mainTemplateColumns,x=r.onSort,y=r.onTableHeaderDragEnd,R=r.pinnedLeftColumns,C=r.pinnedLeftTemplateColumns,D=r.pinnedRightColumns,E=r.pinnedRightTemplateColumns,I=r.selectableColumns,z=r.setIsWidthDragging,S=r.setSelectedCells,H=r.shouldDisplayLastColumnCell,L=r.sort,M=r.sortDownIcon,T=r.sortUpIcon,O=r.tableRef,B=t(null);Q(O,B);return e("div",p({className:"st-header-container",ref:f},{children:[R.length>0&&n("div",p({className:"st-header-pinned-left",style:{gridTemplateColumns:C}},{children:n(G,p({allowAnimations:s,draggedHeaderRef:u,headersRef:v,pauseAnimation:w,rowIndex:0,tableRef:O},{children:null===(o=v.current)\|\|void 0===o?void 0:o.map((function(e,r){return N({hiddenColumns:h,header:e,pinned:"left"})?n($,{columnResizing:c,currentRows:d,draggable:i,draggedHeaderRef:u,forceUpdate:g,headersRef:v,hoveredHeaderRef:m,index:r,onSort:x,onTableHeaderDragEnd:y,ref:b(),selectableColumns:I,setIsWidthDragging:z,setSelectedCells:S,sort:L,sortDownIcon:M,sortUpIcon:T},e.accessor):null}))}))})),n("div",p({className:"st-header-main",onScroll:function(e){var n,r,o=null===(n=B.current)\|\|void 0===n?void 0:n.scrollLeft;void 0!==o&&(null===(r=O.current)\|\|void 0===r\|\|r.scrollTo(o,0))},ref:B,style:{gridTemplateColumns:k}},{children:e(G,p({allowAnimations:s,draggedHeaderRef:u,headersRef:v,pauseAnimation:w,rowIndex:0,tableRef:O},{children:[null===(a=v.current)\|\|void 0===a?void 0:a.map((function(e,r){return N({hiddenColumns:h,header:e})?n($,{columnResizing:c,currentRows:d,draggable:i,draggedHeaderRef:u,forceUpdate:g,headersRef:v,hoveredHeaderRef:m,index:r,onSort:x,onTableHeaderDragEnd:y,ref:b(),selectableColumns:I,setIsWidthDragging:z,setSelectedCells:S,sort:L,sortDownIcon:M,sortUpIcon:T},e.accessor):null})),n(j,{ref:b(),visible:H})]}))})),D.length>0&&n("div",p({className:"st-header-pinned-right",style:{gridTemplateColumns:E}},{children:e(G,p({allowAnimations:s,draggedHeaderRef:u,headersRef:v,pauseAnimation:w,rowIndex:0,tableRef:O},{children:[null===(l=v.current)\|\|void 0===l?void 0:l.map((function(e,r){return N({hiddenColumns:h,header:e,pinned:"right"})?n($,{columnResizing:c,currentRows:d,draggable:i,draggedHeaderRef:u,forceUpdate:g,headersRef:v,hoveredHeaderRef:m,index:r,onSort:x,onTableHeaderDragEnd:y,reverse:!0,ref:b(),selectableColumns:I,setIsWidthDragging:z,setSelectedCells:S,sort:L,sortDownIcon:M,sortUpIcon:T},e.accessor):null})),n(j,{ref:b(),visible:H})]}))}))]}))},_=function(r){var o=r.allowAnimations,a=r.columnResizing,l=r.currentRows,c=r.draggable,d=r.draggedHeaderRef,i=r.editColumns,u=r.forceUpdate,g=r.getBorderClass,b=r.handleMouseDown,f=r.handleMouseOver,v=r.headersRef,h=r.hiddenColumns,m=r.hoveredHeaderRef,w=r.isRowExpanded,k=r.isSelected,x=r.isTopLeftCell,y=r.isWidthDragging,R=r.onCellChange,C=r.onExpandRowClick,D=r.onSort,E=r.onTableHeaderDragEnd,I=r.pinnedLeftRef,z=r.pinnedRightRef,S=r.selectableColumns,N=r.setIsWidthDragging,H=r.setSelectedCells,L=r.shouldPaginate,M=r.sort,T=r.sortDownIcon,O=r.sortUpIcon,B=r.tableRef,A=t(null),P=v.current.filter((function(e){return!e.hide&&!e.pinned})),W=s((function(){return!!B.current&&P.reduce((function(e,n){return e+n.width}),0)<B.current.clientWidth}),[P,B]),U=v.current.filter((function(e){return"left"===e.pinned&&!0!==e.hide})),j=v.current.filter((function(e){return"right"===e.pinned&&!0!==e.hide})),V=s((function(){return"".concat(U.map((function(e){return"".concat(e.width,"px")})).join(" "))}),[U]),G=s((function(){return"".concat(P.filter((function(e){return!0!==h[e.accessor]})).map((function(e){return"".concat(e.width,"px")})).join(" ")," 1fr")}),[P,h]),X=s((function(){return"".concat(j.map((function(e){return"".concat(e.width,"px")})).join(" "))}),[j]),F={allowAnimations:o,columnResizing:a,currentRows:l,draggable:c,draggedHeaderRef:d,forceUpdate:u,headerContainerRef:A,headersRef:v,hiddenColumns:h,hoveredHeaderRef:m,isWidthDragging:y,mainTemplateColumns:G,onSort:D,onTableHeaderDragEnd:E,pinnedLeftColumns:U,pinnedLeftTemplateColumns:V,pinnedRightColumns:j,pinnedRightTemplateColumns:X,selectableColumns:S,setIsWidthDragging:N,setSelectedCells:H,shouldDisplayLastColumnCell:W,sort:M,sortDownIcon:T,sortUpIcon:O,tableRef:B},J={allowAnimations:o,currentRows:l,draggedHeaderRef:d,getBorderClass:g,handleMouseDown:b,handleMouseOver:f,headerContainerRef:A,headers:v.current,headersRef:v,hiddenColumns:h,hoveredHeaderRef:m,isRowExpanded:w,isSelected:k,isTopLeftCell:x,isWidthDragging:y,mainTemplateColumns:G,onCellChange:R,onExpandRowClick:C,onTableHeaderDragEnd:E,pinnedLeftColumns:U,pinnedLeftRef:I,pinnedLeftTemplateColumns:V,pinnedRightColumns:j,pinnedRightRef:z,pinnedRightTemplateColumns:X,shouldDisplayLastColumnCell:W,shouldPaginate:L,tableRef:B};return e("div",p({className:"st-table-content",style:{width:i?"calc(100% - 27.5px)":"100%"}},{children:[n(Z,p({},F)),n(q,p({},J))]}))},ee=function(e,n){l((function(){var r=e.current;if(r){var o=function(){n((null==r?void 0:r.scrollWidth)\|\|0)};o();var t=new ResizeObserver((function(){o()}));return t.observe(r),function(){return t.disconnect()}}}),[n,e])},ne=function(r){r.headersRef;var a=r.pinnedLeftRef,l=r.pinnedRightRef,s=r.tableRef,c=o(0),d=c[0],i=c[1],u=o(0),g=u[0],b=u[1],f=o(0),v=f[0],h=f[1],m=t(null);return ee(a,i),ee(s,h),ee(l,b),Q(s,m),!s.current\|\|s.current.scrollWidth<=s.current.clientWidth?null:e("div",p({className:"st-horizontal-scrollbar-container"},{children:[d>0&&n("div",{className:"st-horizontal-scrollbar-left",style:{flexShrink:0,width:d}}),v>0&&n("div",p({className:"st-horizontal-scrollbar-middle",onScroll:function(){var e,n,r=null===(e=m.current)\|\|void 0===e?void 0:e.scrollLeft;void 0!==r&&(null===(n=s.current)\|\|void 0===n\|\|n.scrollTo(r,0))},ref:m,style:{width:v}},{children:n("div",{style:{width:v}})})),g>0&&n("div",{className:"st-horizontal-scrollbar-right",style:{flexShrink:0,width:g}})]}))},re=function(e,n){var r=o(null),t=r[0],a=r[1],l=o({}),c=l[0],d=l[1],i=s((function(){if(!t)return e;var r=function(e,n,r){var o=r?r.key:e[0],t="ascending";return r&&r.key.accessor===o.accessor&&"ascending"===r.direction&&(t="descending"),{sortedData:m([],n,!0).sort((function(e,n){var r,a,l,s,c=null!==(a=null===(r=null==e?void 0:e.rowData)\|\|void 0===r?void 0:r[o.accessor])&&void 0!==a?a:"",d=null!==(s=null===(l=null==n?void 0:n.rowData)\|\|void 0===l?void 0:l[o.accessor])&&void 0!==s?s:"";return c<d?"ascending"===t?1:-1:c>d?"ascending"===t?-1:1:0})),newSortConfig:{key:o,direction:t}}}(n,e,t).sortedData;return r}),[e,t,n]);return{sort:t,setSort:a,sortedRows:i,hiddenColumns:c,setHiddenColumns:d}};!function(e){e.Left="left",e.Right="right"}(z\|\|(z={}));var oe=function(r){var c=r.allowAnimations,d=void 0!==c&&c,i=r.columnEditorPosition,u=void 0===i?z.Right:i,g=r.columnEditorText,b=void 0===g?"Columns":g,f=r.columnResizing,h=void 0!==f&&f,m=r.defaultHeaders,D=r.draggable,E=void 0!==D&&D,S=r.editColumns,N=void 0!==S&&S,H=r.editColumnsInitOpen,L=void 0!==H&&H,M=r.height,T=r.hideFooter,O=void 0!==T&&T,B=r.nextIcon,A=void 0===B?n(x,{className:"st-next-prev-icon"}):B,P=r.onCellChange,W=r.prevIcon,U=void 0===W?n(k,{className:"st-next-prev-icon"}):W,j=r.rows,V=r.rowsPerPage,G=void 0===V?10:V,X=r.selectableCells,F=void 0!==X&&X,J=r.selectableColumns,Y=void 0!==J&&J,q=r.shouldPaginate,K=void 0!==q&&q,$=r.sortDownIcon,Q=void 0===$?n(C,{className:"st-sort-icon"}):$,Z=r.sortUpIcon,ee=void 0===Z?n(R,{className:"st-sort-icon"}):Z,oe=r.theme,te=void 0===oe?"light":oe,ae=o((function(){return function(e){var n=new Set,r=function(e){var o;e.rowMeta.isExpanded&&n.add(e.rowMeta.rowId.toString()),null===(o=e.rowMeta.children)\|\|void 0===o\|\|o.forEach(r)};return e.forEach(r),n}(j)})),le=ae[0],se=ae[1],ce=s((function(){return j.map((function(e,n){return p(p({},e),{originalRowIndex:n})}))}),[j]),de=t(null),ie=t(null),ue=t(null),ge=t(null),be=t(null),fe=t(m),ve=o(!1),pe=ve[0],he=ve[1],me=o(1),we=me[0],ke=me[1],xe=re(ce,fe.current),ye=xe.sort,Re=xe.setSort,Ce=xe.sortedRows,De=xe.hiddenColumns,Ee=xe.setHiddenColumns,Ie=a((function(e){var n=String(e);se((function(e){var r=new Set(e);return r.has(n)?r.delete(n):r.add(n),r}))}),[]),ze=a((function(e){return le.has(String(e))}),[le]),Se=v((function(e){return e+1}),0)[1],Ne=function(e){var n=e.selectableCells,r=e.headers,c=e.rows,d=o(new Set),i=d[0],u=d[1],g=t(!1),b=t(null),f=a((function(){var e=Array.from(i).reduce((function(e,n){var o=n.split("-").map(Number),t=o[0],a=o[1];return e[t]\|\|(e[t]=[]),e[t][a]=c[t][r[a].accessor],e}),{}),n=Object.values(e).map((function(e){return Object.values(e).join("\t")})).join("\n");navigator.clipboard.writeText(n)}),[i,c,r]);l((function(){var e=function(e){(e.ctrlKey\|\|e.metaKey)&&"c"===e.key&&f()};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[f]);var v=a((function(e,n){return i.has("".concat(e,"-").concat(n))}),[i]),p=a((function(e,n){var r=[];return v(e-1,n)\|\|r.push("st-selected-top-border"),v(e+1,n)\|\|r.push("st-selected-bottom-border"),v(e,n-1)\|\|r.push("st-selected-left-border"),v(e,n+1)\|\|r.push("st-selected-right-border"),r.join(" ")}),[v]),h=s((function(){var e=Math.min.apply(Math,Array.from(i).map((function(e){return parseInt(e.split("-")[0])}))),n=Math.min.apply(Math,Array.from(i).map((function(e){return parseInt(e.split("-")[1])})));return function(r,o){return r===e&&o===n}}),[i]);return{selectedCells:i,handleMouseDown:function(e){var r=e.colIndex,o=e.rowIndex;n&&(g.current=!0,b.current={row:o,col:r},u(new Set(["".concat(o,"-").concat(r)])))},handleMouseOver:function(e,r){if(n&&g.current&&b.current){for(var o=new Set,t=Math.min(b.current.row,e),a=Math.max(b.current.row,e),l=Math.min(b.current.col,r),s=Math.max(b.current.col,r),c=t;c<=a;c++)for(var d=l;d<=s;d++)o.add("".concat(c,"-").concat(d));u(o)}},handleMouseUp:function(){g.current=!1,b.current=null},isSelected:v,getBorderClass:p,isTopLeftCell:h,setSelectedCells:u}}({selectableCells:F,headers:fe.current,rows:Ce}),He=Ne.handleMouseDown,Le=Ne.handleMouseOver,Me=Ne.handleMouseUp,Te=Ne.isSelected,Oe=Ne.getBorderClass,Be=Ne.isTopLeftCell,Ae=Ne.setSelectedCells,Pe=s((function(){return K?Ce.slice((we-1)G,we*G):Ce}),[we,G,K,Ce]),We=a((function(e,n){Re((function(r){return(null==r?void 0:r.key.accessor)!==n?{key:fe.current[e],direction:"ascending"}:"ascending"===(null==r?void 0:r.direction)?{key:fe.current[e],direction:"descending"}:null}))}),[Re]),Ue=a((function(e){fe.current=e,Se()}),[]);return l((function(){var e=function(e){var n=e.target;n.closest(".st-cell")\|\|Y&&(n.classList.contains("st-header-cell")\|\|n.classList.contains("st-header-label"))\|\|Ae(new Set)};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[Y,Ae]),n(y.Provider,p({value:{rows:j,tableRows:ce}},{children:e("div",p({className:"st-wrapper theme-".concat(te),style:M?{height:M}:{}},{children:[e("div",p({className:"st-table-wrapper-container"},{children:[e("div",p({className:"st-table-wrapper",onMouseUp:Me,onMouseLeave:Me},{children:[n(_,{allowAnimations:d,columnResizing:h,currentRows:Pe,draggable:E,draggedHeaderRef:ie,editColumns:N,forceUpdate:Se,getBorderClass:Oe,handleMouseDown:He,handleMouseOver:Le,headers:fe.current,headersRef:fe,hiddenColumns:De,hoveredHeaderRef:ue,isRowExpanded:ze,isSelected:Te,isTopLeftCell:Be,isWidthDragging:pe,onCellChange:P,onExpandRowClick:Ie,onSort:We,onTableHeaderDragEnd:Ue,pinnedLeftRef:ge,pinnedRightRef:be,selectableColumns:Y,setIsWidthDragging:he,setSelectedCells:Ae,shouldPaginate:K,sort:ye,sortDownIcon:Q,sortUpIcon:ee,tableRef:de}),n(I,{columnEditorText:b,editColumns:N,editColumnsInitOpen:L,headers:fe.current,hiddenColumns:De,position:u,setHiddenColumns:Ee})]})),n(ne,{headersRef:fe,pinnedLeftRef:ge,pinnedRightRef:be,tableRef:de})]})),n(w,{currentPage:we,hideFooter:O,nextIcon:A,onPageChange:ke,prevIcon:U,rowsPerPage:G,shouldPaginate:K,totalRows:Ce.length})]}))}))};oe.defaultProps={allowAnimations:!1,columnEditorPosition:z.Right,columnEditorText:"Columns",columnResizing:!1,defaultHeaders:[],draggable:!1,editColumns:!1,editColumnsInitOpen:!1,height:"",hideFooter:!1,nextIcon:n(x,{className:"st-next-prev-icon"}),onCellChange:function(){},prevIcon:n(k,{className:"st-next-prev-icon"}),rows:[],rowsPerPage:10,selectableCells:!1,selectableColumns:!1,shouldPaginate:!1,sortDownIcon:n(C,{className:"st-sort-icon"}),sortUpIcon:n(R,{className:"st-sort-icon"}),theme:"light"};var te=f(oe);export{te as SimpleTable};

package/dist/types/SharedTableProps.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import HeaderObject from "./HeaderObject";
 interface SharedTableProps {
     allowAnimations: boolean;
     draggedHeaderRef: RefObject<HeaderObject | null>;
+    headerContainerRef: RefObject<HTMLDivElement | null>;
     headersRef: RefObject<HeaderObject[]>;
     hiddenColumns: Record<string, boolean>;
     hoveredHeaderRef: RefObject<HeaderObject | null>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "simple-table-core",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",