simple-table-core 0.5.0 → 0.5.3

package/dist/index.css

@@ -0,0 +1,2 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");:root{--slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;--slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-900:#0f172a;--blue-50:#eff6ff;--blue-100:#dbeafe;--blue-200:#bfdbfe;--blue-300:#93c5fd;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;--blue-900:#1e3a8a;--orange-50:#fff7ed;--orange-100:#ffedd5;--orange-200:#fed7aa;--orange-300:#fdba74;--orange-400:#fb923c;--orange-500:#f97316;--orange-600:#ea580c;--orange-700:#c2410c;--orange-800:#9a3412;--orange-900:#7c2d12;--amber-50:#fffbeb;--amber-100:#fef3c7;--amber-200:#fde68a;--amber-300:#fcd34d;--amber-400:#fbbf24;--amber-500:#f59e0b;--amber-600:#d97706;--amber-700:#b45309;--amber-800:#92400e;--amber-900:#78350f;--st-border-radius:4px;--st-border-color:var(--slate-300);--st-border-width:1px;--st-resize-handle-color:var(--slate-300);--st-separator-border-color:var(--slate-300);--st-odd-row-background-color:var(--slate-100);--st-dragging-background-color:var(--blue-100);--st-selected-cell-background-color:var(--blue-200);--st-selected-first-cell-background-color:var(--amber-100);--st-border-top-color:var(--blue-500);--st-border-bottom-color:var(--blue-500);--st-border-left-color:var(--blue-500);--st-border-right-color:var(--blue-500);--st-border-top-white-color:#fff;--st-footer-background-color:#fff;--st-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--st-cell-padding:8px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Nunito}.st-wrapper{border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);max-height:100dvh;overflow:hidden;position:relative}.st-table-wrapper{display:flex;overflow:visible;width:max-content}.st-table,.st-table-wrapper{height:100%;position:relative;width:100%}.st-table{border-collapse:collapse;display:grid;overflow:auto;table-layout:auto;white-space:nowrap}.st-header-cell{align-items:center;background-color:#fff;border-bottom:var(--st-border-width) solid var(--st-border-color);border-top:var(--st-border-width) solid #0000;display:flex;font-weight:600;gap:4px;position:sticky;top:0;z-index:1}.st-header-cell.clickable{cursor:pointer}.st-header-cell.draggable{cursor:grab}.st-cell,.st-header-cell{color:var(--slate-800);overflow:hidden}.st-cell.clickable{cursor:pointer}.st-cell,.st-cell-editing,.st-header-cell{font-family:Nunito;height:40px;width:100%}.st-cell-editing{position:relative}.st-header-label{flex:1}.st-cell,.st-header-label{overflow:hidden;padding:var(--st-cell-padding);text-align:left;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}.st-cell{border:var(--st-border-width) solid #0000;position:relative}.st-sort-icon-container{align-items:center;display:flex;flex-direction:column;justify-content:center}.st-sort-icon{fill:var(--slate-500)}.st-header-resize-handle{background-color:var(--st-resize-handle-color);border-radius:.25rem;cursor:col-resize;height:20px;right:0;top:0;width:5px}.st-row-separator{background-color:var(--st-separator-border-color);grid-column:1/-1;height:1px}.st-cell-odd-row{background-color:var(--st-odd-row-background-color)}.st-dragging{background-color:var(--st-dragging-background-color)}.st-cell-selected{background-color:var(--st-selected-cell-background-color)}.st-cell-selected-first{background-color:var(--st-selected-first-cell-background-color)}.st-selected-top-border{border-top:var(--st-border-width) solid var(--st-border-top-color)}.st-selected-bottom-border{border-bottom:var(--st-border-width) solid var(--st-border-bottom-color)}.st-selected-left-border{border-left:var(--st-border-width) solid var(--st-border-left-color)}.st-selected-right-border{border-right:var(--st-border-width) solid var(--st-border-right-color)}.st-selected-top-border-white{border-top:var(--st-border-width) solid var(--st-border-top-white-color)}.st-footer{background-color:var(--st-footer-background-color);border-top:var(--st-border-width) solid var(--st-border-color);padding:8px}.st-footer,.st-next-prev-btn{align-items:center;display:flex}.st-next-prev-btn{fill:var(--slate-600);background-color:initial;border:none;border-radius:4px;cursor:pointer;justify-content:center;padding:4px;transition:background-color .3s ease}.disabled>.st-next-prev-icon{fill:var(--slate-400);cursor:not-allowed}.st-next-prev-btn:not(.disabled):hover{background-color:var(--slate-100)}.st-page-btn{background-color:initial;border:none;border-radius:var(--st-border-radius);color:var(--slate-600);cursor:pointer;margin-left:4px;padding:4px;transition:background-color .3s ease}.st-page-btn:hover{background-color:var(--slate-100)}.st-page-btn.active{background-color:var(--blue-500);color:#fff}.editable-cell-input{border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);box-shadow:var(--st-shadow);font-family:Nunito;font-size:1rem;height:100%;left:0;outline:none;padding:var(--st-cell-padding);position:absolute;top:0;width:100%;z-index:1}.editable-cell-input:focus{border:var(--st-border-width) solid var(--blue-500)}.st-column-editor{background:var(--st-footer-background-color);border-left:var(--st-border-width) solid var(--st-border-color);cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.st-column-editor-text{background-color:#fff;color:var(--slate-500);padding:8px 4px;writing-mode:vertical-rl;z-index:2}.st-column-editor-popout,.st-column-editor.open,.st-column-editor.open .st-column-editor-text{background-color:var(--slate-100)}.st-column-editor-popout{height:100%;overflow:hidden;position:absolute;right:calc(100% + 1px);top:0;transition:width .2s ease;width:0;z-index:1}.st-column-editor-popout-content{border-left:var(--st-border-width) solid var(--st-border-color);display:flex;flex-direction:column;gap:4px;height:100%;overflow:auto;padding:8px 4px}.st-column-editor-popout.open{width:200px}.st-column-editor-popout.left{transform:translateX(-100%)}.st-column-editor-popout.open.left{transform:translateX(0)}.st-checkbox-label{align-items:center;cursor:pointer;display:flex;gap:8px}.st-checkbox-input{display:none}.st-checkbox-custom{align-items:center;background-color:#fff;border:var(--st-border-width) solid var(--slate-300);border-radius:var(--st-border-radius);display:flex;height:24px;justify-content:center;transition:background-color .3s ease,border-color .3s ease;width:24px}.st-checkbox-custom.st-checked{background-color:var(--blue-500);border-color:var(--blue-500)}.st-checkbox-checkmark{border:solid #fff;border-width:0 2px 2px 0;height:11px;transform:rotate(45deg);width:6px}@keyframes slide-in-left{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slide-in-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["simple-table.css"],"names":[],"mappings":"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","file":"index.css","sourcesContent":["/* Import Nunito font from Google Fonts */\n@import url(\"https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap\");\n\n:root {\n  /* Slate Colors */\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\n  /* Blue Colors */\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\n  /* Orange Colors */\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\n  /* Amber Colors */\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\n  /* Customizable Variables */\n  --st-border-radius: 4px;\n  --st-border-color: var(--slate-300);\n  --st-border-width: 1px;\n  --st-resize-handle-color: var(--slate-300);\n  --st-separator-border-color: var(--slate-300);\n  --st-odd-row-background-color: var(--slate-100);\n  --st-dragging-background-color: var(--blue-100);\n  --st-selected-cell-background-color: var(--blue-200);\n  --st-selected-first-cell-background-color: var(--amber-100);\n  --st-border-top-color: var(--blue-500);\n  --st-border-bottom-color: var(--blue-500);\n  --st-border-left-color: var(--blue-500);\n  --st-border-right-color: var(--blue-500);\n  --st-border-top-white-color: white;\n  --st-footer-background-color: white;\n  --st-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --st-cell-padding: 8px;\n}\n\n/* Global styles */\n* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n/* Apply Nunito as the default font */\nbody {\n  font-family: \"Nunito\";\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 {\n  position: relative;\n  display: flex;\n  width: max-content;\n  overflow: visible;\n  height: 100%;\n  width: 100%;\n}\n\n/* Main table styling */\n.st-table {\n  position: relative;\n  display: grid;\n  border-collapse: collapse;\n  table-layout: auto;\n  white-space: nowrap;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n}\n\n/* Styles for table header cells */\n.st-header-cell {\n  position: sticky;\n  top: 0;\n  background-color: white;\n  z-index: 1;\n  font-weight: 600;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\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  color: var(--slate-800);\n  overflow: hidden;\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  font-family: \"Nunito\";\n}\n\n.st-cell-editing {\n  position: relative;\n}\n\n.st-header-label {\n  flex: 1;\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.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: 5px;\n  height: 20px;\n  cursor: col-resize;\n  background-color: var(--st-resize-handle-color);\n  border-radius: 0.25rem;\n}\n\n.st-row-separator {\n  height: 1px;\n  background-color: var(--st-separator-border-color);\n  grid-column: 1 / -1;\n}\n\n.st-cell-odd-row {\n  background-color: var(--st-odd-row-background-color);\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}\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}\n\n/* Blue top border for cells */\n.st-selected-top-border {\n  border-top: var(--st-border-width) solid var(--st-border-top-color);\n}\n\n/* Blue bottom border for cells */\n.st-selected-bottom-border {\n  border-bottom: var(--st-border-width) solid var(--st-border-bottom-color);\n}\n\n/* Blue left border for cells */\n.st-selected-left-border {\n  border-left: var(--st-border-width) solid var(--st-border-left-color);\n}\n\n/* Blue right border for cells */\n.st-selected-right-border {\n  border-right: var(--st-border-width) solid var(--st-border-right-color);\n}\n\n/* White top border for cells */\n.st-selected-top-border-white {\n  border-top: var(--st-border-width) solid var(--st-border-top-white-color);\n}\n\n.st-footer {\n  display: flex;\n  align-items: center;\n  background-color: var(--st-footer-background-color);\n\n  padding: 8px;\n\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: 4px;\n  cursor: pointer;\n  background-color: transparent;\n  border: none;\n  border-radius: 4px;\n  transition: background-color 0.3s 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: 4px;\n  padding: 4px;\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 0.3s ease;\n}\n\n.st-page-btn:hover {\n  background-color: var(--slate-100);\n}\n\n.st-page-btn.active {\n  background-color: var(--blue-500);\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-shadow);\n  z-index: 1;\n  outline: none;\n  height: 100%;\n  width: 100%;\n  padding: var(--st-cell-padding);\n  font-size: 1rem;\n  font-family: \"Nunito\";\n}\n.editable-cell-input:focus {\n  border: var(--st-border-width) solid var(--blue-500);\n}\n.st-column-editor {\n  position: relative;\n  user-select: none;\n\n  background: var(--st-footer-background-color);\n  border-left: var(--st-border-width) solid var(--st-border-color);\n  cursor: pointer;\n}\n\n.st-column-editor-text {\n  padding: 8px 4px;\n\n  writing-mode: vertical-rl;\n  color: var(--slate-500);\n  background-color: white;\n  z-index: 2;\n}\n\n.st-column-editor.open,\n.st-column-editor.open .st-column-editor-text {\n  background-color: var(--slate-100);\n}\n\n.st-column-editor-popout {\n  position: absolute;\n  top: 0;\n  right: calc(100% + 1px);\n  z-index: 1;\n\n  height: 100%;\n  background-color: var(--slate-100);\n\n  transition: width 0.2s 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: 4px;\n  padding: 8px 4px;\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: 8px;\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\n  width: 24px;\n  height: 24px;\n\n  border: var(--st-border-width) solid var(--slate-300);\n  border-radius: var(--st-border-radius);\n\n  background-color: white;\n  transition: background-color 0.3s ease, border-color 0.3s ease;\n}\n\n.st-checkbox-custom.st-checked {\n  background-color: var(--blue-500);\n  border-color: var(--blue-500);\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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-table-core",
-  "version": "0.5.0",
+  "version": "0.5.3",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -38,18 +38,20 @@
     "@storybook/test": "^8.4.1",
     "@types/node": "^16.18.111",
     "@types/react": "^18.3.9",
+    "autoprefixer": "^10.4.20",
     "eslint-plugin-storybook": "^0.9.0",
     "prop-types": "^15.8.1",
     "rollup": "^2.79.2",
     "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-delete": "^2.1.0",
+    "rollup-plugin-import-css": "^3.5.6",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
     "storybook": "^8.4.1",
     "typescript": "^4.9.5",
-    "webpack": "^5.95.0",
-    "rollup-plugin-delete": "^2.1.0"
+    "webpack": "^5.95.0"
   },
   "scripts": {
     "publish-fast": "npm run build && git add . && git commit -m \"$npm_config_message\" && npm publish && git push",

package/dist/styles/simple-table.css

@@ -1 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");:root{--slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;--slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-900:#0f172a;--blue-50:#eff6ff;--blue-100:#dbeafe;--blue-200:#bfdbfe;--blue-300:#93c5fd;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;--blue-900:#1e3a8a;--orange-50:#fff7ed;--orange-100:#ffedd5;--orange-200:#fed7aa;--orange-300:#fdba74;--orange-400:#fb923c;--orange-500:#f97316;--orange-600:#ea580c;--orange-700:#c2410c;--orange-800:#9a3412;--orange-900:#7c2d12;--amber-50:#fffbeb;--amber-100:#fef3c7;--amber-200:#fde68a;--amber-300:#fcd34d;--amber-400:#fbbf24;--amber-500:#f59e0b;--amber-600:#d97706;--amber-700:#b45309;--amber-800:#92400e;--amber-900:#78350f;--st-border-radius:4px;--st-border-color:var(--slate-300);--st-border-width:1px;--st-resize-handle-color:var(--slate-300);--st-separator-border-color:var(--slate-300);--st-odd-row-background-color:var(--slate-100);--st-dragging-background-color:var(--blue-100);--st-selected-cell-background-color:var(--blue-200);--st-selected-first-cell-background-color:var(--amber-100);--st-border-top-color:var(--blue-500);--st-border-bottom-color:var(--blue-500);--st-border-left-color:var(--blue-500);--st-border-right-color:var(--blue-500);--st-border-top-white-color:#fff;--st-footer-background-color:#fff;--st-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--st-cell-padding:8px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Nunito}.st-wrapper{border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);max-height:100dvh;overflow:hidden;position:relative}.st-table-wrapper{display:flex;overflow:visible;width:max-content}.st-table,.st-table-wrapper{height:100%;position:relative;width:100%}.st-table{border-collapse:collapse;display:grid;overflow:auto;table-layout:auto;white-space:nowrap}.st-header-cell{align-items:center;background-color:#fff;border-bottom:var(--st-border-width) solid var(--st-border-color);border-top:var(--st-border-width) solid #0000;display:flex;font-weight:600;gap:4px;position:sticky;top:0;z-index:1}.st-header-cell.clickable{cursor:pointer}.st-header-cell.draggable{cursor:grab}.st-cell,.st-header-cell{color:var(--slate-800);overflow:hidden}.st-cell.clickable{cursor:pointer}.st-cell,.st-cell-editing,.st-header-cell{font-family:Nunito;height:40px;width:100%}.st-cell-editing{position:relative}.st-header-label{flex:1}.st-cell,.st-header-label{overflow:hidden;padding:var(--st-cell-padding);text-align:left;text-overflow:ellipsis;user-select:none;white-space:nowrap;width:100%}.st-cell{border:var(--st-border-width) solid #0000;position:relative}.st-sort-icon-container{align-items:center;display:flex;flex-direction:column;justify-content:center}.st-sort-icon{fill:var(--slate-500)}.st-header-resize-handle{background-color:var(--st-resize-handle-color);border-radius:.25rem;cursor:col-resize;height:20px;right:0;top:0;width:5px}.st-row-separator{background-color:var(--st-separator-border-color);grid-column:1/-1;height:1px}.st-cell-odd-row{background-color:var(--st-odd-row-background-color)}.st-dragging{background-color:var(--st-dragging-background-color)}.st-cell-selected{background-color:var(--st-selected-cell-background-color)}.st-cell-selected-first{background-color:var(--st-selected-first-cell-background-color)}.st-selected-top-border{border-top:var(--st-border-width) solid var(--st-border-top-color)}.st-selected-bottom-border{border-bottom:var(--st-border-width) solid var(--st-border-bottom-color)}.st-selected-left-border{border-left:var(--st-border-width) solid var(--st-border-left-color)}.st-selected-right-border{border-right:var(--st-border-width) solid var(--st-border-right-color)}.st-selected-top-border-white{border-top:var(--st-border-width) solid var(--st-border-top-white-color)}.st-footer{background-color:var(--st-footer-background-color);border-top:var(--st-border-width) solid var(--st-border-color);padding:8px}.st-footer,.st-next-prev-btn{align-items:center;display:flex}.st-next-prev-btn{fill:var(--slate-600);background-color:initial;border:none;border-radius:4px;cursor:pointer;justify-content:center;padding:4px;transition:background-color .3s ease}.disabled>.st-next-prev-icon{fill:var(--slate-400);cursor:not-allowed}.st-next-prev-btn:not(.disabled):hover{background-color:var(--slate-100)}.st-page-btn{background-color:initial;border:none;border-radius:var(--st-border-radius);color:var(--slate-600);cursor:pointer;margin-left:4px;padding:4px;transition:background-color .3s ease}.st-page-btn:hover{background-color:var(--slate-100)}.st-page-btn.active{background-color:var(--blue-500);color:#fff}.editable-cell-input{border:var(--st-border-width) solid var(--st-border-color);border-radius:var(--st-border-radius);box-shadow:var(--st-shadow);font-family:Nunito;font-size:1rem;height:100%;left:0;outline:none;padding:var(--st-cell-padding);position:absolute;top:0;width:100%;z-index:1}.editable-cell-input:focus{border:var(--st-border-width) solid var(--blue-500)}.st-column-editor{background:var(--st-footer-background-color);border-left:var(--st-border-width) solid var(--st-border-color);cursor:pointer;position:relative;user-select:none}.st-column-editor-text{background-color:#fff;color:var(--slate-500);padding:8px 4px;writing-mode:vertical-rl;z-index:2}.st-column-editor-popout,.st-column-editor.open,.st-column-editor.open .st-column-editor-text{background-color:var(--slate-100)}.st-column-editor-popout{height:100%;overflow:hidden;position:absolute;right:calc(100% + 1px);top:0;transition:width .2s ease;width:0;z-index:1}.st-column-editor-popout-content{border-left:var(--st-border-width) solid var(--st-border-color);display:flex;flex-direction:column;gap:4px;height:100%;overflow:auto;padding:8px 4px}.st-column-editor-popout.open{width:200px}.st-column-editor-popout.left{transform:translateX(-100%)}.st-column-editor-popout.open.left{transform:translateX(0)}.st-checkbox-label{align-items:center;cursor:pointer;display:flex;gap:8px}.st-checkbox-input{display:none}.st-checkbox-custom{align-items:center;background-color:#fff;border:var(--st-border-width) solid var(--slate-300);border-radius:var(--st-border-radius);display:flex;height:24px;justify-content:center;transition:background-color .3s ease,border-color .3s ease;width:24px}.st-checkbox-custom.st-checked{background-color:var(--blue-500);border-color:var(--blue-500)}.st-checkbox-checkmark{border:solid #fff;border-width:0 2px 2px 0;height:11px;transform:rotate(45deg);width:6px}@keyframes slide-in-left{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slide-in-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}