From 38b91d30706d9fd06639c418f8cea4f3830f7bf8 Mon Sep 17 00:00:00 2001
From: ernzher <leeernzher@gmail.com>
Date: Thu, 30 Nov 2023 01:48:23 +0000
Subject: [PATCH 1/4] Edit: textInput tailwind version

---
 src/Viewer/renderers/textInput.jsx | 57 +++++-------------------------
 1 file changed, 9 insertions(+), 48 deletions(-)

diff --git a/src/Viewer/renderers/textInput.jsx b/src/Viewer/renderers/textInput.jsx
index 22668c00..2bd63768 100644
--- a/src/Viewer/renderers/textInput.jsx
+++ b/src/Viewer/renderers/textInput.jsx
@@ -16,6 +16,7 @@ import { MathJax } from "better-react-mathjax";
 import { BoardContext } from "./graph";
 import me from "math-expressions";
 import { getPositionFromAnchorByCoordinate } from "../../Core/utils/graphical";
+import { Label, TextInput as Input, Textarea } from 'flowbite-react';
 
 // Moved most of checkWorkStyle styling into Button
 const Button = styled.button`
@@ -37,35 +38,6 @@ const Button = styled.button`
   }
 `;
 
-const TextArea = styled.textarea`
-  width: ${(props) => props.width};
-  height: ${(props) =>
-    props.height}; // Same height as the checkWorkButton, accounting for the borders
-  font-size: 14px;
-  border: ${(props) =>
-    props.disabled ? "2px solid var(--mainGray)" : "var(--mainBorder)"};
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "auto")};
-
-  &:focus {
-    outline: var(--mainBorder);
-    outline-offset: 2px;
-  }
-`;
-
-const Input = styled.input`
-  width: ${(props) => props.width};
-  height: 20px; // Same height as the checkWorkButton, accounting for the borders
-  font-size: 14px;
-  border: ${(props) =>
-    props.disabled ? "2px solid var(--mainGray)" : "var(--mainBorder)"};
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "auto")};
-
-  &:focus {
-    outline: var(--mainBorder);
-    outline-offset: 2px;
-  }
-`;
-
 export default function TextInput(props) {
   let {
     name,
@@ -711,50 +683,39 @@ export default function TextInput(props) {
   }
   if (SVs.expanded) {
     input = (
-      <label style={{ display: "inline-flex", maxWidth: "100%" }}>
-        {label}
-        <TextArea
+      <div className="flex items-center">
+        {label && <Label htmlFor={inputKey} value={label} className="mr-2" />}
+        <Textarea
+          rows="2"
           key={inputKey}
           id={inputKey}
           value={rendererValue}
           disabled={disabled}
           onChange={onChangeHandler}
-          onKeyPress={handleKeyPress}
           onKeyDown={handleKeyDown}
           onBlur={handleBlur}
           onFocus={handleFocus}
           width={width}
           height={height}
-          style={{
-            margin: "0px 4px 4px 4px",
-            color: "var(--canvastext)",
-            background: "var(--canvas)",
-          }}
         />
-      </label>
+      </div>
     );
   } else {
     input = (
-      <label style={{ display: "inline-flex", maxWidth: "100%" }}>
-        {label}
+      <div className="flex items-center">
+        {label && <Label htmlFor={inputKey} value={label} className="mr-2" />}
         <Input
           key={inputKey}
           id={inputKey}
           value={rendererValue}
           disabled={disabled}
           onChange={onChangeHandler}
-          onKeyPress={handleKeyPress}
           onKeyDown={handleKeyDown}
           onBlur={handleBlur}
           onFocus={handleFocus}
           width={width}
-          style={{
-            margin: "0px 4px 4px 4px",
-            color: "var(--canvastext)",
-            background: "var(--canvas)",
-          }}
         />
-      </label>
+      </div>
     );
   }
 

From 9e1d41e0c7bed18792174252f0f8cb4f111fad4a Mon Sep 17 00:00:00 2001
From: ernzher <leeernzher@gmail.com>
Date: Thu, 30 Nov 2023 05:30:51 +0000
Subject: [PATCH 2/4] Add: TW Elements React package

---
 package-lock.json | 408 ++++++++++++++++++++++++++++++++++++++++++----
 package.json      |   3 +-
 2 files changed, 374 insertions(+), 37 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1cd6eab6..b01002c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -75,7 +75,8 @@
         "socket.io": "^4.5.0",
         "socket.io-client": "^4.5.0",
         "styled-components": "5.3.3",
-        "swiper": "^9.0.5"
+        "swiper": "^9.0.5",
+        "tw-elements-react": "^1.0.0-alpha2"
       },
       "devDependencies": {
         "@babel/eslint-parser": "^7.15.7",
@@ -1988,6 +1989,26 @@
         "node": ">=0.1.90"
       }
     },
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "node_modules/@cypress/request": {
       "version": "2.88.10",
       "license": "Apache-2.0",
@@ -3099,11 +3120,11 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz",
-      "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==",
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.0.tgz",
+      "integrity": "sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA==",
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/@rollup/plugin-alias": {
@@ -3282,6 +3303,26 @@
         "react-dom": "*"
       }
     },
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
+      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA=="
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag=="
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow=="
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA=="
+    },
     "node_modules/@types/accepts": {
       "version": "1.3.5",
       "dev": true,
@@ -3996,7 +4037,6 @@
     },
     "node_modules/acorn": {
       "version": "8.8.1",
-      "devOptional": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -4013,6 +4053,14 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-walk": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz",
+      "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "5.1.1",
       "dev": true,
@@ -5139,6 +5187,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/chart.js": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+    },
+    "node_modules/chartjs-plugin-datalabels": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
+      "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==",
+      "peerDependencies": {
+        "chart.js": ">=3.0.0"
+      }
+    },
     "node_modules/check-error": {
       "version": "1.0.2",
       "dev": true,
@@ -5648,6 +5709,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
+    },
     "node_modules/crelt": {
       "version": "1.0.5",
       "license": "MIT"
@@ -6439,9 +6505,9 @@
       "license": "MIT"
     },
     "node_modules/deepmerge": {
-      "version": "4.2.2",
-      "dev": true,
-      "license": "MIT",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10101,6 +10167,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
+    },
     "node_modules/map-cache": {
       "version": "0.2.2",
       "license": "MIT",
@@ -11829,6 +11900,20 @@
         "react-dom": ">0.13.0"
       }
     },
+    "node_modules/react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.5.6",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.6.tgz",
@@ -11875,29 +11960,29 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz",
-      "integrity": "sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.0.tgz",
+      "integrity": "sha512-pVvzsSsgUxxtuNfTHC4IxjATs10UaAtvLGVSA1tbUE4GDaOSU1Esu2xF5nWLz7KPiMuW8BJWuPFdlGYJ7/rW0w==",
       "dependencies": {
-        "@remix-run/router": "1.5.0"
+        "@remix-run/router": "1.13.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
         "react": ">=16.8"
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz",
-      "integrity": "sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.0.tgz",
+      "integrity": "sha512-CbcKjEyiSVpA6UtCHOIYLUYn/UJfwzp55va4yEfpk7JBN3GPqWfHrdLkAvNCcpXr8QoihcDMuk0dzWZxtlB/mQ==",
       "dependencies": {
-        "@remix-run/router": "1.5.0",
-        "react-router": "6.10.0"
+        "@remix-run/router": "1.13.0",
+        "react-router": "6.20.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
         "react": ">=16.8",
@@ -13734,6 +13819,61 @@
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
+    "node_modules/ts-node": {
+      "version": "10.9.1",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
+      "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ts-node/node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
+    },
+    "node_modules/ts-node/node_modules/diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.1",
       "dev": true,
@@ -13780,6 +13920,22 @@
         "node": "*"
       }
     },
+    "node_modules/tw-elements-react": {
+      "version": "1.0.0-alpha2",
+      "resolved": "https://registry.npmjs.org/tw-elements-react/-/tw-elements-react-1.0.0-alpha2.tgz",
+      "integrity": "sha512-RPsc4HQXTEujQsqusl5uCBjTC+4JmYUq9FTz/tYSSGrRl1SfoPo2vxy+YLa/II/6J8cQB+iuraNK3SisJBmGmQ==",
+      "dependencies": {
+        "@popperjs/core": "^2.11.8",
+        "chart.js": "^3.7.1",
+        "chartjs-plugin-datalabels": "^2.0.0",
+        "deepmerge": "^4.3.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-popper": "^2.3.0",
+        "react-router-dom": "^6.11.1",
+        "ts-node": "^10.9.1"
+      }
+    },
     "node_modules/tweetnacl": {
       "version": "0.14.5",
       "license": "Unlicense",
@@ -13833,6 +13989,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz",
+      "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/typical": {
       "version": "4.0.0",
       "dev": true,
@@ -14096,6 +14265,11 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg=="
+    },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
       "dev": true,
@@ -14271,6 +14445,14 @@
       "version": "2.2.6",
       "license": "MIT"
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "dev": true,
@@ -14665,6 +14847,14 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "devOptional": true,
@@ -16062,6 +16252,25 @@
       "version": "1.5.0",
       "optional": true
     },
+    "@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "requires": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "dependencies": {
+        "@jridgewell/trace-mapping": {
+          "version": "0.3.9",
+          "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+          "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+          "requires": {
+            "@jridgewell/resolve-uri": "^3.0.3",
+            "@jridgewell/sourcemap-codec": "^1.4.10"
+          }
+        }
+      }
+    },
     "@cypress/request": {
       "version": "2.88.10",
       "optional": true,
@@ -16756,9 +16965,9 @@
       }
     },
     "@remix-run/router": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz",
-      "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg=="
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.0.tgz",
+      "integrity": "sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA=="
     },
     "@rollup/plugin-alias": {
       "version": "3.1.9",
@@ -16871,6 +17080,26 @@
         "@testing-library/dom": "^7.28.1"
       }
     },
+    "@tsconfig/node10": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
+      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA=="
+    },
+    "@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag=="
+    },
+    "@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow=="
+    },
+    "@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA=="
+    },
     "@types/accepts": {
       "version": "1.3.5",
       "dev": true,
@@ -17430,14 +17659,18 @@
       }
     },
     "acorn": {
-      "version": "8.8.1",
-      "devOptional": true
+      "version": "8.8.1"
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "devOptional": true,
       "requires": {}
     },
+    "acorn-walk": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz",
+      "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA=="
+    },
     "agent-base": {
       "version": "5.1.1",
       "dev": true
@@ -18120,6 +18353,17 @@
         "supports-color": "^5.3.0"
       }
     },
+    "chart.js": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+    },
+    "chartjs-plugin-datalabels": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
+      "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==",
+      "requires": {}
+    },
     "check-error": {
       "version": "1.0.2",
       "dev": true
@@ -18452,6 +18696,11 @@
         "yaml": "^1.10.0"
       }
     },
+    "create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
+    },
     "crelt": {
       "version": "1.0.5"
     },
@@ -19008,8 +19257,9 @@
       "devOptional": true
     },
     "deepmerge": {
-      "version": "4.2.2",
-      "dev": true
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
     },
     "define-lazy-prop": {
       "version": "2.0.0",
@@ -21287,6 +21537,11 @@
         "semver": "^6.0.0"
       }
     },
+    "make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
+    },
     "map-cache": {
       "version": "0.2.2"
     },
@@ -22413,6 +22668,15 @@
         "resize-observer-polyfill": "^1.5.0"
       }
     },
+    "react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      }
+    },
     "react-remove-scroll": {
       "version": "2.5.6",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.6.tgz",
@@ -22435,20 +22699,20 @@
       }
     },
     "react-router": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz",
-      "integrity": "sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.0.tgz",
+      "integrity": "sha512-pVvzsSsgUxxtuNfTHC4IxjATs10UaAtvLGVSA1tbUE4GDaOSU1Esu2xF5nWLz7KPiMuW8BJWuPFdlGYJ7/rW0w==",
       "requires": {
-        "@remix-run/router": "1.5.0"
+        "@remix-run/router": "1.13.0"
       }
     },
     "react-router-dom": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz",
-      "integrity": "sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.0.tgz",
+      "integrity": "sha512-CbcKjEyiSVpA6UtCHOIYLUYn/UJfwzp55va4yEfpk7JBN3GPqWfHrdLkAvNCcpXr8QoihcDMuk0dzWZxtlB/mQ==",
       "requires": {
-        "@remix-run/router": "1.5.0",
-        "react-router": "6.10.0"
+        "@remix-run/router": "1.13.0",
+        "react-router": "6.20.0"
       }
     },
     "react-select": {
@@ -23672,6 +23936,38 @@
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
+    "ts-node": {
+      "version": "10.9.1",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
+      "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+      "requires": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "dependencies": {
+        "arg": {
+          "version": "4.1.3",
+          "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+          "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
+        },
+        "diff": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+          "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A=="
+        }
+      }
+    },
     "tsconfig-paths": {
       "version": "3.14.1",
       "dev": true,
@@ -23707,6 +24003,22 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "tw-elements-react": {
+      "version": "1.0.0-alpha2",
+      "resolved": "https://registry.npmjs.org/tw-elements-react/-/tw-elements-react-1.0.0-alpha2.tgz",
+      "integrity": "sha512-RPsc4HQXTEujQsqusl5uCBjTC+4JmYUq9FTz/tYSSGrRl1SfoPo2vxy+YLa/II/6J8cQB+iuraNK3SisJBmGmQ==",
+      "requires": {
+        "@popperjs/core": "^2.11.8",
+        "chart.js": "^3.7.1",
+        "chartjs-plugin-datalabels": "^2.0.0",
+        "deepmerge": "^4.3.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-popper": "^2.3.0",
+        "react-router-dom": "^6.11.1",
+        "ts-node": "^10.9.1"
+      }
+    },
     "tweetnacl": {
       "version": "0.14.5",
       "optional": true
@@ -23737,6 +24049,12 @@
     "typed-function": {
       "version": "2.1.0"
     },
+    "typescript": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz",
+      "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==",
+      "peer": true
+    },
     "typical": {
       "version": "4.0.0",
       "dev": true
@@ -23881,6 +24199,11 @@
       "version": "8.3.2",
       "optional": true
     },
+    "v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg=="
+    },
     "v8-to-istanbul": {
       "version": "8.1.1",
       "dev": true,
@@ -23982,6 +24305,14 @@
     "w3c-keyname": {
       "version": "2.2.6"
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "webidl-conversions": {
       "version": "7.0.0",
       "dev": true
@@ -24245,6 +24576,11 @@
       "version": "1.3.2",
       "dev": true
     },
+    "yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q=="
+    },
     "yocto-queue": {
       "version": "0.1.0",
       "devOptional": true
diff --git a/package.json b/package.json
index 9e14a6f3..a6a68e78 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,8 @@
     "socket.io": "^4.5.0",
     "socket.io-client": "^4.5.0",
     "styled-components": "5.3.3",
-    "swiper": "^9.0.5"
+    "swiper": "^9.0.5",
+    "tw-elements-react": "^1.0.0-alpha2"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.15.7",

From 9196ced007e88090610574d6bd7cd9f450a70da6 Mon Sep 17 00:00:00 2001
From: ernzher <leeernzher@gmail.com>
Date: Thu, 30 Nov 2023 05:51:07 +0000
Subject: [PATCH 3/4] Edit: Solution tailwind version

---
 src/Viewer/renderers/solution.jsx | 150 +++++++++++-------------------
 1 file changed, 52 insertions(+), 98 deletions(-)

diff --git a/src/Viewer/renderers/solution.jsx b/src/Viewer/renderers/solution.jsx
index 17394f22..63715e8b 100644
--- a/src/Viewer/renderers/solution.jsx
+++ b/src/Viewer/renderers/solution.jsx
@@ -1,26 +1,12 @@
 import React, { useEffect } from "react";
 import useDoenetRenderer from "../useDoenetRenderer";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPuzzlePiece as puzzle } from "@fortawesome/free-solid-svg-icons";
+import {
+  faChevronDown,
+  faPuzzlePiece,
+} from "@fortawesome/free-solid-svg-icons";
 import VisibilitySensor from "react-visibility-sensor-v2";
-import styled from "styled-components";
-import P from "../../Core/components/P";
-const SpanStyling = styled.span`
-  // display: block;
-  // margin: SVs.open ? 12px 4px 0px 4px : 12px 4px 12px 4px;
-  // padding: 6px;
-  // border: 2px solid black;
-  // border-top-left-radius: 5px;
-  // border-top-right-radius: 5px;
-  // border-bottom-left-radius: SVs.open ? 0px : 5px;
-  // border-bottom-right-radius: SVs.open ? 0px : 5px;
-  // background-color: var(--mainGray);
-  // cursor: pointer;
-  &: focus {
-    outline: 2px solid var(--canvastext);
-    outline-offset: 2px;
-  }
-`;
+import { TECollapse } from "tw-elements-react";
 
 export default React.memo(function Solution(props) {
   let { name, id, SVs, children, actions, callAction } =
@@ -41,95 +27,63 @@ export default React.memo(function Solution(props) {
       });
     };
   }, []);
-  let openCloseText = "open";
 
   if (SVs.hidden) {
     return null;
   }
 
-  let icon;
-  let childrenToRender = null;
-  let infoBlockStyle = { display: "none" };
-
-  let onClickFunction;
-  let cursorStyle;
-  let onKeyPressFunction;
-
-  if (SVs.open) {
-    icon = <FontAwesomeIcon icon={puzzle} />;
-    openCloseText = "close";
-    childrenToRender = children;
-    infoBlockStyle = {
-      display: "block",
-      margin: "0px 4px 12px 4px",
-      padding: "6px",
-      border: "2px solid var(--canvastext)",
-      borderTop: "0px",
-      borderBottomLeftRadius: "5px",
-      borderBottomRightRadius: "5px",
-      backgroundColor: "var(--canvas)",
-    };
-    onKeyPressFunction = (e) => {
-      if (e.key === "Enter") {
-        callAction({
-          action: actions.closeSolution,
-        });
-      }
-    };
-
-    if (SVs.canBeClosed) {
-      cursorStyle = "pointer";
-      onClickFunction = () => {
-        callAction({
-          action: actions.closeSolution,
-        });
-      };
-    } else {
-      onClickFunction = () => {};
-    }
-  } else {
-    icon = <FontAwesomeIcon icon={puzzle} rotation={90} />;
-    cursorStyle = "pointer";
-    onClickFunction = () => {
-      callAction({
-        action: actions.revealSolution,
-      });
-    };
-    onKeyPressFunction = (e) => {
-      if (e.key === "Enter") {
-        callAction({
-          action: actions.revealSolution,
-        });
-      }
-    };
-  }
+  let onHeaderClick = () => {
+    callAction({
+      action:
+        SVs.open && SVs.canBeClosed
+          ? actions.closeSolution
+          : actions.revealSolution,
+    });
+  };
 
   return (
     <VisibilitySensor partialVisibility={true} onChange={onChangeVisibility}>
-      <aside id={id} style={{ margin: "12px 0" }}>
+      <div id={id} className="py-2">
         <a name={id} />
-        <SpanStyling
-          style={{
-            display: "block",
-            margin: SVs.open ? "12px 4px 0px 4px" : "12px 4px 12px 4px",
-            padding: "6px",
-            border: "2px solid var(--canvastext)",
-            borderTopLeftRadius: "5px",
-            borderTopRightRadius: "5px",
-            borderBottomLeftRadius: SVs.open ? "0px" : "5px",
-            borderBottomRightRadius: SVs.open ? "0px" : "5px",
-            backgroundColor: "var(--mainGray)",
-            cursor: "pointer",
-          }}
-          tabIndex="0"
-          id={id + "_button"}
-          onClick={onClickFunction}
-          onKeyDown={onKeyPressFunction}
+        <button
+          className={`${
+            SVs.open &&
+            `text-primary [box-shadow:inset_0_-1px_0_rgba(229,231,235)]`
+          } w-full group relative bg-slate-100 border border-transparent rounded-md transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1`}
+          onClick={onHeaderClick}
+          onKeyDown={(e) => e.key === "Enter" && onHeaderClick}
+          aria-expanded="true"
+          aria-controls="collapseOne"
+        >
+          <div className="flex items-center justify-between px-5 py-4">
+            <div className="flex items-center">
+              <span
+                className={`${
+                  SVs.open ? `rotate-[90deg] ` : `rotate-0 fill-[#212529]`
+                } mr-3 flex items-center shrink-0 fill-[#336dec] transition-transform duration-200 ease-in-out motion-reduce:transition-none dark:fill-blue-300`}
+              >
+                <FontAwesomeIcon className="w-4 h-4" icon={faPuzzlePiece} />
+              </span>
+              Solution (click to {SVs.open ? "close" : "open"})
+            </div>
+            <span
+              className={`${
+                SVs.open ? `rotate-[-180deg] ` : `rotate-0 fill-[#212529]`
+              } ml-auto h-5 w-5 shrink-0 fill-[#336dec] transition-transform duration-200 ease-in-out motion-reduce:transition-none`}
+            >
+              <FontAwesomeIcon icon={faChevronDown} />
+            </span>
+          </div>
+        </button>
+        <TECollapse
+          show={SVs.open}
+          className="!mt-0 !rounded-b-none !shadow-none"
         >
-          {icon} {SVs.sectionName} {SVs.message} (click to {openCloseText})
-        </SpanStyling>
-        <span style={infoBlockStyle}>{childrenToRender}</span>
-      </aside>
+          <div className="w-full px-5 py-4 rounded-none border border-l-0 border-r-0 border-t-0 border-neutral-200">
+            {children}
+          </div>
+        </TECollapse>
+      </div>
     </VisibilitySensor>
   );
 });

From 1a53a3e00858f26fc333aa57f85cd7bbe46ca570 Mon Sep 17 00:00:00 2001
From: ernzher <leeernzher@gmail.com>
Date: Thu, 30 Nov 2023 23:09:55 +0000
Subject: [PATCH 4/4] Add: slider tailwind version(commented with notes)

---
 src/Viewer/renderers/slider.jsx | 81 +++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)

diff --git a/src/Viewer/renderers/slider.jsx b/src/Viewer/renderers/slider.jsx
index f44d8f0d..5bdb6046 100644
--- a/src/Viewer/renderers/slider.jsx
+++ b/src/Viewer/renderers/slider.jsx
@@ -9,6 +9,87 @@ import { useSetRecoilState } from "recoil";
 import { rendererState } from "../useDoenetRenderer";
 import { MathJax } from "better-react-mathjax";
 
+// Commented code below: Tailwind version of slider ~ by Lee
+// Code commented due to differences in how the current slider works and this NEW slider works, different props/way of using props
+// Ex1: steps in the current slider refers to the difference between ticks, this new slider refers it to how far the thumb jumps
+// Ex2: ticks in the new slider refers to the number of ticks on the whole slider, which can't be controlled in the current slider
+// Code sandbox link to view how this component works: https://codesandbox.io/p/devbox/slider-component-tj9pr6?file=%2Fmy-project%2Fsrc%2Fcomponents%2FSlider.jsx
+// To run: go to terminal, run 'cd my-project', then 'npm start', navigate to 'App.jsx' to modify and test with difference props
+
+// export default function Slider({
+//   min = 0,
+//   max = 100,
+//   label,
+//   step,
+//   options,
+//   value,
+//   onChange,
+//   disabled,
+//   ticks,
+// }) {
+//   const [tickValues, setTickValues] = useState([]);
+
+//   const getDecimalPlaces = (number) => {
+//     if (Math.floor(number) === number) return 0;
+//     return number.toString().split(".")[1].length || 0;
+//   };
+
+//   useEffect(() => {
+//     if (options) {
+//       if (options.length > 1) setTickValues(options);
+//       else console.log("At least 2 options should be provided...");
+//     } else if (ticks) {
+//       let difference = max - min;
+//       if (difference > ticks) {
+//         while (difference % ticks !== 0) ticks--;
+//       } else {
+//         while (getDecimalPlaces(difference / ticks) > 2) ticks--;
+//       }
+//       let marks = [];
+//       let tickStep = difference / ticks;
+//       for (let i = min; Math.round(i * 100) / 100 <= max; i += tickStep) {
+//         marks.push(i.toFixed(getDecimalPlaces(tickStep)));
+//       }
+//       setTickValues(marks);
+//     }
+//   }, []);
+
+//   return (
+//     <div className="flex flex-col">
+//       {label && (
+//         <span className="mb-2 inline-block text-neutral-900">{label}</span>
+//       )}
+//       <div className="px-2">
+//         <input
+//           type="range"
+//           className="appearance-none w-full transparent h-1.5 cursor-pointer rounded-lg border-transparent bg-neutral-200 focus:outline-none"
+//           value={value}
+//           min={options ? 0 : min}
+//           max={options ? options.length - 1 : max}
+//           step={options ? 1 : step}
+//           onChange={(event) => onChange && onChange(event.target.value)}
+//           disabled={disabled}
+//         />
+//       </div>
+//       {tickValues.length > 0 && (
+//         <div className="flex justify-between mt-1 text-xs text-gray-600">
+//           {tickValues.map((tick, idx) => (
+//             <span
+//               key={`tick-${idx}`}
+//               className={`${
+//                 options ? "w-12" : "w-8"
+//               } mx-0.5 text-center text-ellipsis overflow-hidden hover:overflow-visible hover:cursor-pointer`}
+//               onClick={() => onChange && onChange(tick)}
+//             >
+//               {tick}
+//             </span>
+//           ))}
+//         </div>
+//       )}
+//     </div>
+//   );
+// }
+
 let round_to_decimals = (x, n) => me.round_numbers_to_decimals(x, n).tree;
 
 const SliderContainer = styled.div`