diff --git a/docs/css/styles.1689852038054.css b/docs/css/styles.1690791059529.css
similarity index 93%
rename from docs/css/styles.1689852038054.css
rename to docs/css/styles.1690791059529.css
index 69deb5d8..50722bcb 100644
--- a/docs/css/styles.1689852038054.css
+++ b/docs/css/styles.1690791059529.css
@@ -1 +1 @@
-/*! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.w-800{width:800px}.side-menu{left:-100%;transition:left .5s ease}.mobile-menu-opened .side-menu{left:0}.min-w-270{min-width:270px}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}.dark{color-scheme:dark}.header-anchor{display:inline-flex}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.absolute{position:absolute}.relative{position:relative}.right-4{right:1rem}.top-2{top:.5rem}.z-50{z-index:50}.order-2{order:2}.order-1{order:1}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.my-24{margin-bottom:6rem;margin-top:6rem}.my-14{margin-bottom:3.5rem;margin-top:3.5rem}.mx-4{margin-left:1rem;margin-right:1rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.my-4{margin-bottom:1rem;margin-top:1rem}.my-10{margin-bottom:2.5rem;margin-top:2.5rem}.my-12{margin-bottom:3rem;margin-top:3rem}.mr-4{margin-right:1rem}.mb-20{margin-bottom:5rem}.mt-6{margin-top:1.5rem}.mt-12{margin-top:3rem}.mt-20{margin-top:5rem}.mt-14{margin-top:3.5rem}.mt-8{margin-top:2rem}.mt-4{margin-top:1rem}.ml-3{margin-left:.75rem}.mr-6{margin-right:1.5rem}.ml-6{margin-left:1.5rem}.mr-2{margin-right:.5rem}.mb-14{margin-bottom:3.5rem}.ml-2{margin-left:.5rem}.mb-8{margin-bottom:2rem}.mb-4{margin-bottom:1rem}.mb-10{margin-bottom:2.5rem}.mb-2{margin-bottom:.5rem}.mt-24{margin-top:6rem}.mb-12{margin-bottom:3rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-5{height:1.25rem}.h-16{height:4rem}.h-9{height:2.25rem}.h-2\.5{height:.625rem}.h-2{height:.5rem}.h-screen{height:100vh}.h-full{height:100%}.w-5{width:1.25rem}.w-96{width:24rem}.w-16{width:4rem}.w-20{width:5rem}.w-2\.5{width:.625rem}.w-2{width:.5rem}.w-full{width:100%}.w-24{width:6rem}.max-w-5xl{max-width:64rem}.max-w-3xl{max-width:48rem}.max-w-full{max-width:100%}.max-w-7xl{max-width:80rem}.flex-1{flex:1 1 0%}.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-20{gap:5rem}.gap-8{gap:2rem}.gap-4{gap:1rem}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1.5rem*var(--tw-space-x-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.border-8{border-width:8px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-l-4{border-left-width:4px}.border-emerald-200{--tw-border-opacity:1;border-color:rgb(167 243 208/var(--tw-border-opacity))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.border-sky-100{--tw-border-opacity:1;border-color:rgb(224 242 254/var(--tw-border-opacity))}.border-lime-100{--tw-border-opacity:1;border-color:rgb(236 252 203/var(--tw-border-opacity))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-blue-300{--tw-border-opacity:1;border-color:rgb(147 197 253/var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-emerald-100{--tw-bg-opacity:1;background-color:rgb(209 250 229/var(--tw-bg-opacity))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(238 242 255/var(--tw-bg-opacity))}.bg-sky-50{--tw-bg-opacity:1;background-color:rgb(240 249 255/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-slate-100\/30{background-color:rgba(241,245,249,.3)}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-amber-400{--tw-bg-opacity:1;background-color:rgb(251 191 36/var(--tw-bg-opacity))}.bg-lime-500{--tw-bg-opacity:1;background-color:rgb(132 204 22/var(--tw-bg-opacity))}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-slate-400\/10{background-color:rgba(148,163,184,.1)}.p-2{padding:.5rem}.p-4{padding:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-14{padding-left:3.5rem;padding-right:3.5rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-20{padding-bottom:5rem;padding-top:5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pr-4{padding-right:1rem}.pt-20{padding-top:5rem}.pb-12{padding-bottom:3rem}.pt-12{padding-top:3rem}.pb-4{padding-bottom:1rem}.pl-3{padding-left:.75rem}.pb-2{padding-bottom:.5rem}.pt-4{padding-top:1rem}.pl-2{padding-left:.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-roboto{font-family:Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-sm{font-size:.875rem;line-height:1.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-base{font-size:1rem;line-height:1.5rem}.font-extrabold{font-weight:800}.font-semibold{font-weight:600}.font-medium{font-weight:500}.font-bold{font-weight:700}.leading-5{line-height:1.25rem}.leading-7{line-height:1.75rem}.leading-8{line-height:2rem}.tracking-tight{letter-spacing:-.025em}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-sky-500{--tw-text-opacity:1;color:rgb(14 165 233/var(--tw-text-opacity))}.text-sky-600{--tw-text-opacity:1;color:rgb(2 132 199/var(--tw-text-opacity))}.text-sky-300{--tw-text-opacity:1;color:rgb(125 211 252/var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-slate-900\/10{--tw-ring-color:rgba(15,23,42,.1)}.filter{-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.last\:border-0:last-child{border-width:0}.hover\:bg-slate-700:hover{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity))}.hover\:bg-sky-100:hover{--tw-bg-opacity:1;background-color:rgb(224 242 254/var(--tw-bg-opacity))}.hover\:bg-slate-100\/20:hover{background-color:rgba(241,245,249,.2)}.hover\:bg-slate-400\/20:hover{background-color:rgba(148,163,184,.2)}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:text-slate-500:hover{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.hover\:text-sky-700:hover{--tw-text-opacity:1;color:rgb(3 105 161/var(--tw-text-opacity))}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-slate-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(148 163 184/var(--tw-ring-opacity))}.focus\:ring-sky-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(2 132 199/var(--tw-ring-opacity))}.focus\:ring-gray-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(75 85 99/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-slate-50:focus{--tw-ring-offset-color:#f8fafc}.group:hover .group-hover\:text-sky-400{--tw-text-opacity:1;color:rgb(56 189 248/var(--tw-text-opacity))}.dark .dark\:border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.dark .dark\:border-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity))}.dark .dark\:bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.dark .dark\:bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}.dark .dark\:bg-sky-900{--tw-bg-opacity:1;background-color:rgb(12 74 110/var(--tw-bg-opacity))}.dark .dark\:text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity))}.dark .dark\:text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.dark .dark\:text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity))}@media (min-width:640px){.sm\:mt-10{margin-top:2.5rem}.sm\:w-auto{width:auto}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-24{padding-top:6rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:768px){.md\:w-350{width:350px}.md\:w-100-350{width:calc(100% - 350px)}.md\:static{position:static}.md\:left-auto{left:auto}.md\:inline-block{display:inline-block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:px-8{padding-left:2rem;padding-right:2rem}}@media (min-width:1024px){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:py-24{padding-bottom:6rem;padding-top:6rem}.lg\:pt-32{padding-top:8rem}.lg\:text-6xl{font-size:3.75rem;line-height:1}}
\ No newline at end of file
+/*! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.w-800{width:800px}.side-menu{left:-100%;transition:left .5s ease}.mobile-menu-opened .side-menu{left:0}.min-w-270{min-width:270px}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}.dark{color-scheme:dark}.header-anchor{display:inline-flex}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.absolute{position:absolute}.relative{position:relative}.right-4{right:1rem}.top-2{top:.5rem}.z-50{z-index:50}.order-2{order:2}.order-1{order:1}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.my-24{margin-bottom:6rem;margin-top:6rem}.my-14{margin-bottom:3.5rem;margin-top:3.5rem}.mx-4{margin-left:1rem;margin-right:1rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.my-4{margin-bottom:1rem;margin-top:1rem}.my-10{margin-bottom:2.5rem;margin-top:2.5rem}.my-12{margin-bottom:3rem;margin-top:3rem}.mr-4{margin-right:1rem}.mb-20{margin-bottom:5rem}.mt-6{margin-top:1.5rem}.mt-12{margin-top:3rem}.mt-20{margin-top:5rem}.mt-14{margin-top:3.5rem}.mt-8{margin-top:2rem}.mt-4{margin-top:1rem}.ml-3{margin-left:.75rem}.mr-6{margin-right:1.5rem}.ml-6{margin-left:1.5rem}.mr-2{margin-right:.5rem}.mb-14{margin-bottom:3.5rem}.ml-2{margin-left:.5rem}.mb-8{margin-bottom:2rem}.mb-4{margin-bottom:1rem}.mb-10{margin-bottom:2.5rem}.mb-2{margin-bottom:.5rem}.mt-24{margin-top:6rem}.mb-12{margin-bottom:3rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-5{height:1.25rem}.h-16{height:4rem}.h-9{height:2.25rem}.h-2\.5{height:.625rem}.h-2{height:.5rem}.h-screen{height:100vh}.h-full{height:100%}.w-5{width:1.25rem}.w-96{width:24rem}.w-16{width:4rem}.w-20{width:5rem}.w-2\.5{width:.625rem}.w-2{width:.5rem}.w-full{width:100%}.w-24{width:6rem}.max-w-5xl{max-width:64rem}.max-w-3xl{max-width:48rem}.max-w-full{max-width:100%}.max-w-7xl{max-width:80rem}.flex-1{flex:1 1 0%}.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}.rotate-90{--tw-rotate:90deg}.rotate-90,.transform{-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-20{gap:5rem}.gap-8{gap:2rem}.gap-4{gap:1rem}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1.5rem*var(--tw-space-x-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.border-8{border-width:8px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-l-4{border-left-width:4px}.border-emerald-200{--tw-border-opacity:1;border-color:rgb(167 243 208/var(--tw-border-opacity))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.border-sky-100{--tw-border-opacity:1;border-color:rgb(224 242 254/var(--tw-border-opacity))}.border-lime-100{--tw-border-opacity:1;border-color:rgb(236 252 203/var(--tw-border-opacity))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-blue-300{--tw-border-opacity:1;border-color:rgb(147 197 253/var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-emerald-100{--tw-bg-opacity:1;background-color:rgb(209 250 229/var(--tw-bg-opacity))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(238 242 255/var(--tw-bg-opacity))}.bg-sky-50{--tw-bg-opacity:1;background-color:rgb(240 249 255/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-slate-100\/30{background-color:rgba(241,245,249,.3)}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-amber-400{--tw-bg-opacity:1;background-color:rgb(251 191 36/var(--tw-bg-opacity))}.bg-lime-500{--tw-bg-opacity:1;background-color:rgb(132 204 22/var(--tw-bg-opacity))}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-slate-400\/10{background-color:rgba(148,163,184,.1)}.p-2{padding:.5rem}.p-4{padding:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-14{padding-left:3.5rem;padding-right:3.5rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-20{padding-bottom:5rem;padding-top:5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pr-4{padding-right:1rem}.pt-20{padding-top:5rem}.pb-12{padding-bottom:3rem}.pt-12{padding-top:3rem}.pb-4{padding-bottom:1rem}.pl-3{padding-left:.75rem}.pb-2{padding-bottom:.5rem}.pt-4{padding-top:1rem}.pl-2{padding-left:.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-roboto{font-family:Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-sm{font-size:.875rem;line-height:1.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-base{font-size:1rem;line-height:1.5rem}.font-extrabold{font-weight:800}.font-semibold{font-weight:600}.font-medium{font-weight:500}.font-bold{font-weight:700}.leading-5{line-height:1.25rem}.leading-7{line-height:1.75rem}.leading-8{line-height:2rem}.tracking-tight{letter-spacing:-.025em}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-sky-500{--tw-text-opacity:1;color:rgb(14 165 233/var(--tw-text-opacity))}.text-sky-600{--tw-text-opacity:1;color:rgb(2 132 199/var(--tw-text-opacity))}.text-sky-300{--tw-text-opacity:1;color:rgb(125 211 252/var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-slate-900\/10{--tw-ring-color:rgba(15,23,42,.1)}.filter{-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.last\:border-0:last-child{border-width:0}.hover\:bg-slate-700:hover{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity))}.hover\:bg-sky-100:hover{--tw-bg-opacity:1;background-color:rgb(224 242 254/var(--tw-bg-opacity))}.hover\:bg-slate-100\/20:hover{background-color:rgba(241,245,249,.2)}.hover\:bg-slate-400\/20:hover{background-color:rgba(148,163,184,.2)}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:text-slate-500:hover{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.hover\:text-sky-700:hover{--tw-text-opacity:1;color:rgb(3 105 161/var(--tw-text-opacity))}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-slate-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(148 163 184/var(--tw-ring-opacity))}.focus\:ring-sky-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(2 132 199/var(--tw-ring-opacity))}.focus\:ring-gray-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(75 85 99/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-slate-50:focus{--tw-ring-offset-color:#f8fafc}.group:hover .group-hover\:text-sky-400{--tw-text-opacity:1;color:rgb(56 189 248/var(--tw-text-opacity))}.dark .dark\:border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.dark .dark\:border-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity))}.dark .dark\:bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.dark .dark\:bg-\[\#090f1c\]{--tw-bg-opacity:1;background-color:rgb(9 15 28/var(--tw-bg-opacity))}.dark .dark\:bg-sky-900{--tw-bg-opacity:1;background-color:rgb(12 74 110/var(--tw-bg-opacity))}.dark .dark\:text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity))}.dark .dark\:text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.dark .dark\:text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity))}@media (min-width:640px){.sm\:mt-10{margin-top:2.5rem}.sm\:w-auto{width:auto}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-24{padding-top:6rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:768px){.md\:w-350{width:350px}.md\:w-100-350{width:calc(100% - 350px)}.md\:static{position:static}.md\:left-auto{left:auto}.md\:inline-block{display:inline-block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:px-8{padding-left:2rem;padding-right:2rem}}@media (min-width:1024px){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:py-24{padding-bottom:6rem;padding-top:6rem}.lg\:pt-32{padding-top:8rem}.lg\:text-6xl{font-size:3.75rem;line-height:1}}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 52c4fbbb..75952d2a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
   </head>
   <body class="font-roboto bg-white" id="special-page">
     <div class="flex justify-center items-center bg-emerald-100 border-b border-emerald-200">
@@ -138,7 +138,7 @@ <h2 class="mt-8 font-semibold text-sky-500">Responsive</h2>
       step="10"
 
       theme="target"
-      css-links="/js/index.1689852038054.css"
+      css-links="/js/index.1690791059529.css"
 
       moving-tooltip="true"
       moving-tooltip-bg="#1e8696"
@@ -322,7 +322,7 @@ <h2 class="mt-8 font-semibold text-sky-500">Data</h2>
       moving-tooltip-bg="#ccdef7"
       moving-tooltip-text-color="#092d4d"
       moving-tooltip-width="45"
-      css-links="/js/index.1689852038054.css"
+      css-links="/js/index.1690791059529.css"
       slider-bg-fill="#3b75c8"
       slider-width="450px"></tc-range-slider>
     <div class="ml-6 text-xs justify-center leading-5 bg-slate-100/30 hover:bg-slate-100/20 text-white rounded-full py-1 px-3 hidden md:flex items-center space-x-2 w-20">z</div>
@@ -720,7 +720,7 @@ <h2 class="mt-8 font-semibold text-sky-500">Free</h2>
       </div>
     </footer>
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
     <script src="/highlight.js/highlight.min.js"></script>
     <script>
       try{
diff --git a/docs/js/index.1689852038054.css b/docs/js/index.1690791059529.css
similarity index 98%
rename from docs/js/index.1689852038054.css
rename to docs/js/index.1690791059529.css
index da71e662..2214d196 100644
--- a/docs/js/index.1689852038054.css
+++ b/docs/js/index.1690791059529.css
@@ -1,2 +1,2 @@
 .theme-target{--panel-bg: #D7DCDF;--panel-bg-hover: #ccd1d3;--panel-bg-fill: #47a4bc;--pointer-bg: #1aa4bc;--pointer-bg-hover: #0f7b8c;--pointer-bg-focus: #0f7b8c;--pointer-shadow: 0 0 0 3px #fff, 0 0 0 6px #1aa4bc;--pointer-shadow-hover: 0 0 0 3px #fff, 0 0 0 6px #0f7b8c;--pointer-shadow-focus: 0 0 0 3px #fff, 0 0 0 6px #0f7b8c;--pointer-border: 0;--pointer-border-hover: 0;--pointer-border-focus: 0}.theme-glass{--pointer-bg: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(206, 206, 206, 1) 48%, rgba(255, 255, 255, 0) 100%);--pointer-bg-hover: linear-gradient(to bottom, rgba(206, 206, 206, 1) 0%, rgba(255, 255, 255, 0) 48%, rgba(206, 206, 206, 1) 100%);--pointer-bg-focus: linear-gradient(to bottom, rgba(206, 206, 206, 1) 0%, rgba(255, 255, 255, 0) 48%, rgba(206, 206, 206, 1) 100%);--pointer-border-radius: 3px}.theme-rect{--panel-bg: #9FD2FA;--panel-bg-hover: #4075E2;--panel-bg-fill: #4075E2;--pointer-width: 10px;--pointer-height: 20px;--pointer-bg: #4075E2;--pointer-bg-hover: #4075E2;--pointer-bg-focus: #4075E2;--pointer-border: 0;--pointer-border-hover: 0;--pointer-border-focus: 0;--pointer-shadow: none;--pointer-shadow-hover: none;--pointer-shadow-focus: none;--pointer-border-radius: 0}.theme-circle{--height: .3rem;--panel-bg: #E6E6E6;--panel-bg-hover: #E6E6E6;--panel-bg-fill: #60CD17;--pointer-width: 1.5rem;--pointer-height: 1.5rem;--pointer-bg: #333940;--pointer-bg-hover: #333940;--pointer-bg-focus: #333940;--pointer-shadow: 0px 4px 25px rgb(0, 0, 0, .5);--pointer-shadow-hover: 0px 4px 25px rgb(0, 0, 0, .5);--pointer-shadow-focus: 0px 4px 25px rgb(0, 0, 0, .5);--pointer-border: 6px solid #fff;--pointer-border-hover: 6px solid #fff;--pointer-border-focus: 6px solid #fff}.theme-rainbow{--panel-bg: linear-gradient( 90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100% );--panel-bg-hover: var(--panel-bg);--panel-bg-fill: rgba(0, 0, 0, .6);--pointer-width: 1.7rem;--pointer-height: 1.7rem;--pointer-bg: #fff;--pointer-bg-hover: #dcdcdc;--pointer-bg-focus: #dcdcdc;--pointer-border: 0;--pointer-border-hover: 0;--pointer-border-focus: 0}.theme-ruler{--height: 1rem;--panel-bg-border-radius: 2px;--panel-bg: #fff;--panel-bg-hover: #fff;--panel-bg-fill: #ccc}.theme-ruler .panel{background-size:.4rem 100%;background-repeat:repeat-x;background-image:linear-gradient(90deg,rgba(0,0,0,0) calc(50% - 2px),var(--panel-bg-fill, #000) 50%,rgba(0,0,0,0) calc(50% + 2px))}.shape{--pointer-border: 0;--pointer-border-hover: 0;--pointer-border-focus: 0;--pointer-border-radius: 0}.shape-triangle .pointer-shape{-webkit-clip-path:polygon(50% 0%,0% 100%,100% 100%);clip-path:polygon(50% 0%,0% 100%,100% 100%)}.shape-rhombus .pointer-shape{-webkit-clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}.shape-trapezoid .pointer-shape{-webkit-clip-path:polygon(20% 0%,80% 0%,100% 100%,0% 100%);clip-path:polygon(20% 0%,80% 0%,100% 100%,0% 100%)}.shape-parallelogram .pointer-shape{-webkit-clip-path:polygon(25% 0%,100% 0%,75% 100%,0% 100%);clip-path:polygon(25% 0%,100% 0%,75% 100%,0% 100%)}.shape-right-arrow .pointer-shape{-webkit-clip-path:polygon(0% 0%,75% 0%,100% 50%,75% 100%,0% 100%);clip-path:polygon(0% 0%,75% 0%,100% 50%,75% 100%,0% 100%)}.shape-star .pointer-shape{-webkit-clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
-/*# sourceMappingURL=index.1689852038054.css.map */
+/*# sourceMappingURL=index.1690791059529.css.map */
diff --git a/docs/js/index.1689852038054.css.map b/docs/js/index.1690791059529.css.map
similarity index 100%
rename from docs/js/index.1689852038054.css.map
rename to docs/js/index.1690791059529.css.map
diff --git a/docs/js/index.1689852038054.js b/docs/js/index.1690791059529.js
similarity index 99%
rename from docs/js/index.1689852038054.js
rename to docs/js/index.1690791059529.js
index 8f6707fb..1d758553 100644
--- a/docs/js/index.1689852038054.js
+++ b/docs/js/index.1690791059529.js
@@ -156,4 +156,4 @@
     transform: translateY(-50%);
 }
     `}};window.tcRangeSliderPlugins.push(H);var X=H})();(()=>{var t=Object.defineProperty,s=Math.pow,c=(e,r,i)=>r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[r]=i,m=(e,r,i)=>(c(e,typeof r!="symbol"?r+"":r,i),i),w=(e,r)=>` ${r&&r.length>0?r.map(i=>`<link rel="stylesheet" href="${i}" />`).join(""):""} <style> ${e} </style> <div class="range-slider-box"> <div class="row"> <div id="range-slider" class="range-slider"> <div class="container"> <div class="panel"></div> <div class="panel-fill"></div> <div class="container"> <div class="pointer" tabindex="0" role="slider"> <div class="pointer-shape"></div> </div> </div> </div> </div> </div> </div>`,S=":host{--width:300px;--height:.25rem;--opacity:.4;--panel-bg:#cbd5e1;--panel-bg-hover:#94a3b8;--panel-bg-fill:#475569;--panel-bg-border-radius:1rem;--pointer-width:1rem;--pointer-height:1rem;--pointer-bg:#fff;--pointer-bg-hover:#dcdcdc;--pointer-bg-focus:#dcdcdc;--pointer-shadow:0 0 2px rgba(0,0,0,0.8);--pointer-shadow-hover:0 0 2px #000;--pointer-shadow-focus:var(--pointer-shadow-hover);--pointer-border:1px solid hsla(0,0%,88%,0.5);--pointer-border-hover:1px solid #94a3b8;--pointer-border-focus:var(--pointer-border-hover);--pointer-border-radius:100%;--animate-onclick:.3s}:host{max-width:100%}.range-slider-box{display:flex;position:relative;flex-direction:column}.range-slider{position:relative;width:var(--width,100%);height:var(--height,0.25rem);touch-action:none;max-width:100%;box-sizing:border-box;cursor:pointer}.row{width:100%;display:flex;align-items:center}.range-slider.disabled{opacity:var(--opacity,0.4);cursor:default}.pointer.disabled{-webkit-filter:brightness(0.8);filter:brightness(0.8);cursor:default}.range-slider *{box-sizing:border-box}.container{position:absolute;width:100%;height:100%}.panel{position:absolute;z-index:10;width:100%;height:100%;background:var(--panel-bg,#2d4373);border-radius:var(--panel-bg-border-radius,1rem);overflow:hidden;transition:.3s all ease}.panel-fill{background:var(--panel-bg-fill,#000);border-radius:var(--panel-bg-border-radius,1rem);overflow:hidden;height:100%;position:absolute;z-index:10}.panel:hover{background:var(--panel-bg-hover,#5f79b7)}.disabled .panel:hover{background:var(--panel-bg,#5f79b7)}.pointer{position:absolute;z-index:20;outline:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pointer-shape{background:var(--pointer-bg,#fff);background-size:contain;box-shadow:var(--pointer-shadow);border:var(--pointer-border);border-radius:var(--pointer-border-radius,100%);-webkit-transform:translateX(-50%);transform:translateX(-50%);width:var(--pointer-width,15px);height:var(--pointer-height,15px);transition:.3s all ease}.pointer-shape:hover{background:var(--pointer-bg-hover,#fff);background-size:contain;border:var(--pointer-border-hover);box-shadow:var(--pointer-shadow-hover)}.disabled .pointer-shape:hover{background:var(--pointer-bg,#fff);background-size:contain;border:var(--pointer-border);box-shadow:var(--pointer-shadow)}.pointer:focus .pointer-shape{background:var(--pointer-bg-focus,#fff);background-size:contain;border:var(--pointer-border-focus);box-shadow:var(--pointer-shadow-focus)}.disabled .pointer:focus .pointer-shape{background:var(--pointer-bg,#fff);background-size:contain;border:var(--pointer-border);box-shadow:var(--pointer-shadow)}.type-vertical .range-slider{--width:.25rem;--height:300px;max-height:100%}.type-vertical .range-slider .pointer{left:50%}.type-vertical .range-slider .panel-fill{width:100%}.type-vertical.range-slider-box{flex-direction:row}.type-vertical .row{flex-direction:column}.animate-on-click .pointer,.animate-on-click .panel-fill{transition:all var(--animate-onclick)}.range-dragging .panel-fill{cursor:move}",H="pointers-overlap",X="pointers-min-distance",h="pointers-max-distance",L="range-dragging",T="data",u="min",o="max",x="step",p="round",k="type",W="theme",K="rtl",ce="btt",Z="disabled",F="keyboard-disabled",Y="mousewheel-disabled",ee="slider-width",J="slider-height",A="slider-radius",oe="slider-bg",ge="slider-bg-hover",f="slider-bg-fill",I="pointer-width",Q="pointer-height",N="pointer-radius",_="pointer-bg",ie="pointer-bg-hover",fe="pointer-bg-focus",He="pointer-shadow",Oe="pointer-shadow-hover",qe="pointer-shadow-focus",ze="pointer-border",Ne="pointer-border-hover",Ve="pointer-border-focus",Pe="animate-onclick",et="css-links",be="vertical",Le="horizontal",d=(e,r,i,l,g)=>{let $=r-e;return $===0?i:(l-i)*(g-e)/$+i},P=e=>!isNaN(parseFloat(e))&&isFinite(e),z=(e,r)=>P(e)?Number(e):r,te=(e,r)=>r===0?0:Math.round(e/r)*r,xe=(e,r=1/0)=>{if(r===1/0)return e;let i=s(10,r);return Math.round(e*i)/i},O=e=>e==null?!1:typeof e=="boolean"?e:e.trim().toLowerCase()==="true",Ee=(e,r)=>{e.dispatchEvent(new CustomEvent("onPointerClicked",{detail:{$pointer:r}}))},de=(e,r)=>{e.dispatchEvent(new CustomEvent("onMouseDown",{detail:{nativeEvent:r}}))},Se=(e,r)=>{e.dispatchEvent(new CustomEvent("onMouseUp",{detail:{nativeEvent:r}}))},ke=(e,r)=>{e.dispatchEvent(new CustomEvent("onKeyDown",{detail:{nativeEvent:r}}))},tt=(e,r)=>{if(!r||r.length<=0)return;let i=r.map(g=>P(g)?z(g,g):g),l={values:i||[]};l.value=i[0],l.value0=i[0],l.value1=i[0];for(let g=1;g<i.length;g++)l[`value${g+1}`]=i[g];e.dispatchEvent(new CustomEvent("change",{detail:l}))},nt=(e,r,i)=>{let l=0,g,$,C,v,b=!1,D=(B,G,se,ae,ne,re)=>{let pe=l;se!==void 0&&B>se&&(B=se),G!==void 0&&B<G&&(B=G),l=B;let me=l;return(ae===be&&re||ae===Le&&ne)&&(me=100-me),ae===be?r.style.top=`${me}%`:r.style.left=`${me}%`,pe!==l},q=B=>B===r||r.contains(B),E=(B,G,se,ae)=>{g=B,$=G,C=se,v=ae},j=B=>{b=B,r.classList.toggle("disabled",b),b?r.setAttribute("aria-disabled","true"):r.hasAttribute("aria-disabled")&&r.removeAttribute("aria-disabled")},he=(B,G)=>{G==null?r.removeAttribute(B):r.setAttribute(B,G)},ue=B=>r.getAttribute(B),M=B=>{if(!b){switch(B.key){case"ArrowLeft":{B.preventDefault(),typeof g=="function"&&g(i);break}case"ArrowRight":{B.preventDefault(),typeof $=="function"&&$(i);break}case"ArrowUp":{B.preventDefault(),typeof C=="function"&&C(i);break}case"ArrowDown":{B.preventDefault(),typeof v=="function"&&v(i);break}}ke(e,B)}},R=()=>{b||Ee(e,r)};return r.className=`pointer pointer-${i}`,r.addEventListener("keydown",M),r.addEventListener("click",R),{$pointer:r,get percent(){return l},get disabled(){return b},set disabled(B){j(B)},updatePosition:D,isClicked:q,setCallbacks:E,setAttr:he,getAttr:ue,destroy:()=>{r.removeEventListener("keydown",M),r.removeEventListener("click",R),r.remove()}}},xn=e=>{if(e==null)return;if(Array.isArray(e))return e;if(e.trim()==="")return;let r=e.split(","),i=[],l=!0;for(let g=0;g<r.length;g++){let $=r[g].trim();$!==""&&(i.push($),P($)||(l=!1))}return l?i.map(g=>Number(g)):i},En=(e,r)=>r?r.findIndex(i=>i===e||i.toString().trim()===e.toString().trim()):-1,wn=e=>({updatePosition:(r,i,l,g)=>{if(i.length<=0)return;let $=i.length===1,C=i[0],v=i[i.length-1];r===be?(e.style.removeProperty("width"),e.style.removeProperty("right"),e.style.removeProperty("left"),$?e.style.height=`${C}%`:e.style.height=`${Math.abs(C-v)}%`,g?(e.style.bottom="0%",$?e.style.top="auto":e.style.top=`${Math.min(100-v,100-C)}%`):(e.style.bottom="auto",$?e.style.top="0%":e.style.top=`${Math.min(C,v)}%`)):(e.style.removeProperty("height"),e.style.removeProperty("top"),e.style.removeProperty("bottom"),$?e.style.width=`${C}%`:e.style.width=`${Math.abs(C-v)}%`,l?(e.style.right="0%",$?e.style.left="auto":e.style.left=`${Math.min(100-v,100-C)}%`):(e.style.right="auto",$?e.style.left="0%":e.style.left=`${Math.min(C,v)}%`))}}),Mt="--animate-onclick",Ln="--width",kn="--height",$n="--panel-bg-border-radius",Sn="--panel-bg",Mn="--panel-bg-hover",Bn="--panel-bg-fill",In="--pointer-width",Tn="--pointer-height",An="--pointer-border-radius",Pn="--pointer-bg",Cn="--pointer-bg-hover",Dn="--pointer-bg-focus",Rn="--pointer-shadow",Hn="--pointer-shadow-hover",On="--pointer-shadow-focus",qn="--pointer-border",zn="--pointer-border-hover",Nn="--pointer-border-focus",Fe=(e,r,i)=>{let l=new Map;for(let g of e.attributes){let $=g.nodeName.trim().toLowerCase();if(!r.test($))continue;let C=$.replace(/\D/g,"").trim(),v=C===""||C==="0"||C==="1"?0:z(C,0)-1,b=i&&typeof i=="function"?i(g.value):g.value;l.set(v,b)}return l},Vn=e=>{if(!e)return null;let r=e.getAttribute(et);if(!r)return null;let i=r.split(";"),l=[];for(let g of i)g.trim()!==""&&l.push(g.trim());return l},Bt=[[Ln,ee,"sliderWidth",null],[kn,J,"sliderHeight",null],[$n,A,"sliderRadius",null],[Sn,oe,"sliderBg",null],[Mn,ge,"sliderBgHover",null],[Bn,f,"sliderBgFill",null],[In,I,"pointer#Width",/^pointer([0-9]*)-width$/],[Tn,Q,"pointer#Height",/^pointer([0-9]*)-height$/],[An,N,"pointer#Radius",/^pointer([0-9]*)-radius$/],[Pn,_,"pointer#Bg",/^pointer([0-9]*)-bg$/],[Cn,ie,"pointer#BgHover",/^pointer([0-9]*)-bg-hover$/],[Dn,fe,"pointer#BgFocus",/^pointer([0-9]*)-bg-focus$/],[Rn,He,"pointer#Shadow",/^pointer([0-9]*)-shadow$/],[Hn,Oe,"pointer#ShadowHover",/^pointer([0-9]*)-shadow-hover$/],[On,qe,"pointer#ShadowFocus",/^pointer([0-9]*)-shadow-focus$/],[qn,ze,"pointer#Border",/^pointer([0-9]*)-border$/],[zn,Ne,"pointer#BorderHover",/^pointer([0-9]*)-border-hover$/],[Nn,Ve,"pointer#BorderFocus",/^pointer([0-9]*)-border-focus$/]],Fn=(e,r,i)=>{let l=null,g=[],$=new Map,C=(M,R=r)=>{let B=[...R.classList];for(let G of B)G.startsWith(M)&&r.classList.remove(G)},v=()=>{C("shape");let M=r.querySelectorAll(".pointer");for(let R of M)C("shape",R)},b=M=>{l=M,C("theme-"),typeof M=="string"&&r.classList.add(`theme-${M}`)},D=()=>{if(v(),!(g.length<=0)){r.classList.add("shape",`shape-${g[0]}`);for(let M=1;M<g.length;M++){let R=g[M];if(!R)continue;let B=r.querySelector(`.pointer-${M}`);!B||B.classList.add("shape",`shape-${R}`)}}},q=(M,R)=>{g[M]=R,D()},E=()=>{v();let M=Fe(e,/^pointer([0-9]*)-shape$/);if(!(M.size<=0)){for(let R of M){let B=R[0];g[B]=R[1]}D()}},j=(M,R)=>`${M}-${R}`,he=(M,R,B)=>{let G=i[B];if(!G)return;let se=B===0?r:G.$pointer;if(R==null){$.has(j(M,B))&&$.delete(j(M,B)),se.style.removeProperty(M);return}$.set(j(M,B),R),se.style.setProperty(M,R)},ue=(M,R)=>$.get(j(M,R));return(()=>{for(let M of Bt){let[R,B,G,se]=M;if(se){let ne=Fe(e,se);for(let re of ne){let pe=re[0],me=re[1];he(R,me,pe)}}else{let ne=e.getAttribute(B);he(R,ne,0)}let ae=[];if(G.indexOf("#")===-1)ae.push([G,0]);else{ae.push([G.replace("#",""),0]),ae.push([G.replace("#","0"),0]),ae.push([G.replace("#","1"),0]);for(let ne=1;ne<i.length;ne++)ae.push([G.replace("#",(ne+1).toString()),ne])}for(let ne of ae)try{let re=ne[0],pe=ne[1];Object.prototype.hasOwnProperty.call(e,re)||Object.defineProperty(e,re,{get(){return ue(R,pe)},set:me=>{he(R,me,pe)}})}catch(re){console.error(re)}}b(e.getAttribute(W)),E()})(),{setStyle:he,getStyle:ue,get theme(){return l},set theme(M){b(M)},get pointerShapes(){return g},setPointerShape:q}},Ie="animate-on-click",It="range-dragging",jn=(e,r,i,l)=>{let g=[],$=q=>{for(let E of g)E.update&&typeof E.update=="function"&&E.update(q)},C=()=>{for(let q of g)q.destroy&&typeof q.destroy=="function"&&q.destroy()},v=(q,E)=>{for(let j of g)j.onAttrChange&&typeof j.onAttrChange=="function"&&j.onAttrChange(q,E)},b=q=>{if(q.gettersAndSetters){for(let E of q.gettersAndSetters)if(!(!E.name||!E.attributes))try{Object.prototype.hasOwnProperty.call(e,E.name)||Object.defineProperty(e,E.name,E.attributes)}catch(j){console.error("defineSettersGetters error:",j)}}},D=q=>{var E;if(!q.css)return;let j=(E=e.shadowRoot)==null?void 0:E.querySelector("style");!j||(j.innerHTML+=q.css)};return{init:()=>{if(window.tcRangeSliderPlugins)for(let q of window.tcRangeSliderPlugins){let E=q();g.push(E),E.init&&typeof E.init=="function"&&(E.init(e,r,i,l),b(E),D(E))}},update:$,onAttrChange:v,destroy:C}},Un=10,Tt=20,Wn=(e,r)=>{let i=new Map,l=/^value([0-9]*)$/;for(let v of e.attributes){let b=v.nodeName.trim().toLowerCase();if(!l.test(b))continue;let D=b.replace("value","").trim(),q=D===""||D==="0"||D==="1"?0:z(D,0)-1,E=P(v.value)?z(v.value,0):v.value;i.set(q,E)}let g=Math.max(...Array.from(i.keys())),$=[];$.push([nt(e,r,0),i.get(0)]);let C=r;for(let v=1;v<=g;v++){let b=r.cloneNode(!0);C.after(b),C=b,$.push([nt(e,b,v),i.get(v)])}return $},At=(e,r,i,l,g,$,C)=>{try{Object.defineProperty(e,l,{configurable:!0,get(){if(!r)return;let v=r.pointers[i];if(!v)return;let b=r.getTextValue(v.percent);return P(b)?z(b,b):b},set:v=>{r.pointers[i]?r==null||r.setValue(v,i):r==null||r.addPointer(v)}}),Object.defineProperty(e,g,{configurable:!0,get(){var v,b;return(b=(v=r==null?void 0:r.pointers[i])==null?void 0:v.getAttr("aria-label"))!=null?b:void 0},set:v=>{!r||r.setAriaLabel(i,v)}}),Object.defineProperty(e,$,{configurable:!0,get(){var v,b;return(b=(v=r==null?void 0:r.styles)==null?void 0:v.pointerShapes[i])!=null?b:null},set:v=>{!r||!r.styles||r.styles.setPointerShape(i,v)}}),Object.defineProperty(e,C,{configurable:!0,get(){var v;return(v=r==null?void 0:r.pointers[i].disabled)!=null?v:!1},set:v=>{if(!r)return;let b=r==null?void 0:r.pointers[i];!b||(b.disabled=v)}})}catch(v){console.error(v)}},_n=(e,r)=>{let i=[["value","ariaLabel","pointerShape","pointerDisabled",0],["value0","ariaLabel0","pointerShape0","pointer0Disabled",0],["value1","ariaLabel1","pointerShape1","pointer1Disabled",0]];for(let l=2;l<Un;l++)i.push([`value${l}`,`ariaLabel${l}`,`pointer${l}Shape`,`pointer${l}Disabled`,l-1]);for(let l of i)At(e,r,l[4],l[0],l[1],l[2],l[3])},Pt=(e,r,i)=>{var l;let g=(l=i.shadowRoot)==null?void 0:l.querySelector(".container");if(g)for(let $ of e)r?g.prepend($.$pointer):g.append($.$pointer)},Gn=(e,r)=>{if(!(!r||e.length<=1)){for(let i of e)i.$pointer.style.zIndex=Tt.toString();r.$pointer.style.zIndex=(Tt*2).toString()}},rt=0,Ce=100,Te=2,Ct="0.3s",Yn=(e,r,i)=>{let l=i.map(n=>n[0]),g=null,$=null,C=null,v=null,b=rt,D=Ce,q,E,j=Le,he=Te,ue=!1,M=!1,R=!1,B=0,G=1/0,se=!1,ae,ne,re=!1,pe=!1,me=!1,$e=Ct,Dt=[],Rt=n=>{re||(n.preventDefault&&n.preventDefault(),Me(n),window.addEventListener("mousemove",Me),window.addEventListener("mouseup",je),de(e,n))},je=n=>{re||(ae=void 0,ne=void 0,window.removeEventListener("mousemove",Me),window.removeEventListener("mouseup",je),$e&&r.classList.add(Ie),Se(e,n))},Jn=(n,a)=>{if(l.length<=0)return;if(l.length===1)return l[0].isClicked(n)&&$e&&r.classList.remove(Ie),l[0];let y=Zn(n);if(se){let V=a,ye=We(V);ye!==void 0&&(V=te(V,ye)),y?(ae=V,ne=0,$e&&r.classList.remove(Ie)):ae!==void 0&&(ne=V-ae,ae=V)}if(!Qn(n)&&!y){for(let V of l)if(!(!V.isClicked(n)||V.disabled))return $e&&r.classList.remove(Ie),V;for(let V of l)if(g===V)return V}let U=1/0,le=null;for(let V of l){if(V.disabled)continue;let ye=Math.abs(a-V.percent);ye<U&&(U=ye,le=V)}return le},Ht=()=>l.findIndex(n=>g===n&&!n.disabled),Me=n=>{let a;if(j===be){let{height:U,top:le}=r.getBoundingClientRect(),V=n.type.indexOf("mouse")!==-1?n.clientY:n.touches[0].clientY;a=Math.min(Math.max(0,V-le),U)*100/U}else{let{width:U,left:le}=r.getBoundingClientRect(),V=n.type.indexOf("mouse")!==-1?n.clientX:n.touches[0].clientX;a=Math.min(Math.max(0,V-le),U)*100/U}if((ue||M)&&(a=100-a),g=Jn(n.target,a),g&&Gn(l,g),se&&l.length>1&&ne!==void 0){let U=l[0],le=l[l.length-1],V=U.percent+ne<0,ye=le.percent+ne>100;if(V||ye)return;for(let Ze=0;Ze<l.length;Ze++)ve(Ze,l[Ze].percent+ne);return}let y=Ht();y!==-1&&(ve(y,a),g==null||g.$pointer.focus())},Ue=n=>{if(re||document.activeElement!==e||(g==null?void 0:g.disabled))return;n.stopPropagation(),n.preventDefault();let a=n.deltaY<0,y=ue||M,U=a?!y:y,le=Ht();le!==-1&&(U?De(le,l[le].percent):Re(le,l[le].percent))},Ot=n=>{re||pe||(j===be?M?ve(n,100):ve(n,0):ue?Re(n,l[n].percent):De(n,l[n].percent))},qt=n=>{re||pe||(j===be?M?ve(n,0):ve(n,100):ue?De(n,l[n].percent):Re(n,l[n].percent))},zt=n=>{re||pe||(j===be?M?Re(n,l[n].percent):De(n,l[n].percent):ue?ve(n,100):ve(n,0))},Nt=n=>{re||pe||(j===be?M?De(n,l[n].percent):Re(n,l[n].percent):ue?ve(n,0):ve(n,100))},Qn=n=>n.classList.contains("panel"),Zn=n=>n.classList.contains("panel-fill"),De=(n,a)=>{if(a===void 0)return;let y=We(a);y==null&&(y=1),a-=y,a<0&&(a=0),ve(n,a)},Re=(n,a)=>{if(a===void 0)return;let y=We(a);y==null&&(y=1),a+=y,a>100&&(a=100),ve(n,a)},Be=()=>{!v||v.update({percents:Vt(),values:Ft(),$pointers:jt(),min:Ut(),max:Wt(),data:it(),step:ot(),round:st(),type:at(),textMin:_e(),textMax:Ge(),rightToLeft:ct(),bottomToTop:gt(),pointersOverlap:bt(),pointersMinDistance:dt(),pointersMaxDistance:ut(),rangeDragging:ht(),disabled:pt(),keyboardDisabled:mt(),mousewheelDisabled:vt()})},er=()=>{Be()},tr=n=>{if(!(R||l.length<=1||D===b))if(n===0){let a=G*100/(D-b);return Math.max(0,l[n+1].percent-a)}else{let a=B*100/(D-b);return Math.min(l[n-1].percent+a,100)}},nr=n=>{if(!(R||l.length<=1||D===b))if(n===l.length-1){let a=G*100/(D-b);return Math.min(l[n-1].percent+a,100)}else{let a=B*100/(D-b);return Math.max(0,l[n+1].percent-a)}},We=n=>{let a;if(typeof q=="function"){let y=d(0,100,b,D,n);a=q(y,n)}else a=q;if(P(a)){let y=D-b;return a=y===0?0:a*100/y,a}},Ae=n=>{if(n===void 0)return;let a=d(0,100,b,D,n);return E!==void 0?E[Math.round(a)]:xe(a,he)},_e=()=>E!==void 0?E[b]:b,Ge=()=>E!==void 0?E[D]:D,ot=()=>q,rr=n=>{var a;return n<=0||R?_e():(a=Ae(l[n-1].percent))!=null?a:""},lr=n=>{var a;return l.length<=1||n>=l.length-1||R?Ge():(a=Ae(l[n+1].percent))!=null?a:""},Vt=()=>l.map(n=>n.percent),Ft=()=>l.map(n=>Ae(n.percent)),jt=()=>l.map(n=>n.$pointer),Ut=()=>b,Wt=()=>D,it=()=>E,at=()=>j,st=()=>he,dt=()=>B,ut=()=>G,or=n=>Dt[n],ct=()=>ue,gt=()=>M,pt=()=>re,mt=()=>pe,vt=()=>me,bt=()=>R,ht=()=>se,ve=(n,a)=>{if(a===void 0)return;let y=We(a);y!==void 0&&(a=te(a,y));let U=l[n];if(!U)return;let le=U.updatePosition(a,tr(n),nr(n),j,ue,M);$==null||$.updatePosition(j,l.map(V=>V.percent),ue,M),Be();for(let V of l){let ye=Ae(V.percent);ye!==void 0&&(V.setAttr("aria-valuenow",ye.toString()),V.setAttr("aria-valuetext",ye.toString()))}ar(),le&&tt(e,l.map(V=>Ae(V.percent)))},we=()=>{for(let n=0;n<l.length;n++)ve(n,l[n].percent)},ir=(n,a)=>{b=E!==void 0?0:z(n,rt),D=E!==void 0?E.length-1:z(a,Ce),Ye(b),Xe(D)},ar=()=>{var n,a;for(let y=0;y<l.length;y++){let U=l[y];U.setAttr("aria-valuemin",((n=rr(y))!=null?n:"").toString()),U.setAttr("aria-valuemax",((a=lr(y))!=null?a:"").toString())}},Ye=n=>{b=z(n,rt),b>D&&(D=b+Ce),we()},Xe=n=>{D=z(n,Ce),D<b&&(D=b+Ce),we()},_t=n=>{R=!0;for(let a=0;a<n.length;a++)Ke(n[a],a);R=!1;for(let a=0;a<n.length;a++)Ke(n[a],a)},Ke=(n,a)=>{let y;E!==void 0?(y=n==null?0:En(n,E),y===-1&&(y=0)):(y=z(n,b),y<b&&(y=b),y>D&&(y=D));let U=d(b,D,0,100,y);ve(a,U)},Je=n=>{if(n==null){q=void 0;return}if(typeof n=="function"){q=n,we();return}if(P(n)){q=z(n,1);let a=Math.abs(D-b);q>a&&(q=void 0),we();return}q=void 0},ft=n=>{R=n,we()},yt=n=>{(!P(n)||n<0)&&(n=0),B=n},xt=n=>{(!P(n)||n<0)&&(n=1/0),G=n},Et=n=>{re=n,r.classList.toggle("disabled",re),re?r.setAttribute("aria-disabled","true"):r.hasAttribute("aria-disabled")&&r.removeAttribute("aria-disabled")},Gt=n=>{pe=n},Yt=n=>{me=n,me?document.removeEventListener("wheel",Ue):document.addEventListener("wheel",Ue,{passive:!1})},wt=n=>{if(n==null){E=void 0;return}if(E=xn(n),E===void 0||E.length<=0){E=void 0;return}Ye(0),Xe(E.length-1),q===void 0&&Je(1)},Lt=n=>{var a;typeof n=="string"?j=n.trim().toLowerCase()===be?be:Le:j=Le;let y=(a=e.shadowRoot)==null?void 0:a.querySelector(".range-slider-box");if(!y)return;y.className=`range-slider-box type-${j}`,we();let U=j===be?"vertical":"horizontal";for(let le of l)le.setAttr("aria-orientation",U)},kt=n=>{ue=n,l.length>1&&Pt(l,ue,e),we(),Be()},$t=n=>{M=n,l.length>1&&Pt(l,M,e),we(),Be()},St=n=>{he=z(n,Te),he<0&&(he=Te),Be()},Xt=n=>{n==null||n.toString().trim().toLowerCase()==="false"?($e=void 0,r.style.removeProperty(Mt),r.classList.remove(Ie)):($e=n.toString(),r.style.setProperty(Mt,$e),r.classList.add(Ie))},Kt=(n,a)=>{let y=l[n];!y||(y.setAttr("aria-label",a),Dt[n]=a)},Qe=n=>{if(ae=void 0,l.length<=1){se=!1,r.classList.remove(It);return}se=n,r.classList.toggle(It,se)},sr=()=>{Et(O(e.getAttribute(Z))),pe=O(e.getAttribute(F)),me=O(e.getAttribute(Y));let n=Fe(e,/^pointer([0-9]*)-disabled$/,a=>O(a));for(let a of n){let y=a[0];!l[y]||(l[y].disabled=a[1])}},dr=()=>{let n=Fe(e,/^aria-label([0-9]*)$/);for(let a of n){let y=a[0];Kt(y,a[1])}},ur=n=>{let a=l.length,y=l[a-1].$pointer,U=y.cloneNode(!0);y.after(U);let le=nt(e,U,a);return le.setCallbacks(Ot,qt,zt,Nt),l.push(le),Ke(n,a),we(),Be(),a},cr=()=>{let n=l.length,a=l[n-1];return a?(a.destroy(),l.pop(),l.length<=1&&Qe(!1),we(),Be(),n-1):-1};return(()=>{var n,a;for(let U of l)U.setCallbacks(Ot,qt,zt,Nt);let y=(n=e.shadowRoot)==null?void 0:n.querySelector(".panel-fill");y&&($=wn(y)),Lt(e.getAttribute(k)),kt(O(e.getAttribute(K))),$t(O(e.getAttribute(ce))),ir(e.getAttribute(u),e.getAttribute(o)),Je(e.getAttribute(x)),wt(e.getAttribute(T)),_t(i.map(U=>U[1])),ft(O(e.getAttribute(H))),yt(z(e.getAttribute(X),0)),xt(z(e.getAttribute(h),1/0)),Qe(O(e.getAttribute(L))),St(z(e.getAttribute(p),Te)),sr(),dr(),C=Fn(e,r,l),Xt((a=e.getAttribute(Pe))!=null?a:Ct),r.addEventListener("mousedown",Rt),r.addEventListener("mouseup",je),r.addEventListener("touchmove",Me),r.addEventListener("touchstart",Me),me||document.addEventListener("wheel",Ue,{passive:!1}),v=jn(e,er,{setValues:_t,setMin:Ye,setMax:Xe,setStep:Je,setPointersOverlap:ft,setPointersMinDistance:yt,setPointersMaxDistance:xt,setDisabled:Et,setType:Lt,setRightToLeft:kt,setBottomToTop:$t,setRound:St,setKeyboardDisabled:Gt,setMousewheelDisabled:Yt,setRangeDragging:Qe,setData:wt},{getPercents:Vt,getValues:Ft,getPointerElements:jt,getMin:Ut,getMax:Wt,getStep:ot,getData:it,getType:at,getRound:st,getTextMin:_e,getTextMax:Ge,isRightToLeft:ct,isBottomToTop:gt,isDisabled:pt,isKeyboardDisabled:mt,isMousewheelDisabled:vt,isPointersOverlap:bt,isRangeDraggingEnabled:ht,getPointersMinDistance:dt,getPointersMaxDistance:ut}),v.init()})(),{get pointers(){return l},get styles(){return C},get pluginsManager(){return v},get min(){return _e()},get max(){return Ge()},get step(){return ot()},get pointersOverlap(){return bt()},set pointersOverlap(n){ft(n)},get pointersMinDistance(){return dt()},set pointersMinDistance(n){yt(n)},get pointersMaxDistance(){return ut()},set pointersMaxDistance(n){xt(n)},get disabled(){return pt()},set disabled(n){Et(n)},get data(){return it()},get type(){return at()},set type(n){Lt(n)},get rightToLeft(){return ct()},set rightToLeft(n){kt(n)},get bottomToTop(){return gt()},set bottomToTop(n){$t(n)},get round(){return st()},set round(n){St(n)},get animateOnClick(){return $e},set animateOnClick(n){Xt(n)},get keyboardDisabled(){return mt()},set keyboardDisabled(n){Gt(n)},get mousewheelDisabled(){return vt()},set mousewheelDisabled(n){Yt(n)},get rangeDragging(){return ht()},set rangeDragging(n){Qe(n)},setMin:Ye,setMax:Xe,setValue:Ke,setStep:Je,setData:wt,getTextValue:Ae,setAriaLabel:Kt,getAriaLabel:or,addPointer:ur,removePointer:cr,destroy:()=>{r.removeEventListener("mousedown",Rt),r.removeEventListener("mouseup",je),r.removeEventListener("touchmove",Me),r.removeEventListener("touchstart",Me),document.removeEventListener("wheel",Ue);for(let n of l)n.destroy();v==null||v.destroy()}}},Xn=(e,r,i)=>{let l=Bt.find(([v,b,D,q])=>b.replace("#","")===r.replace(/\d+/g,""));if(l&&e.styles){let[v,b,D,q]=l,E=r.replace(/\D/g,"").trim(),j=E===""||E==="0"||E==="1"?0:z(E,0)-1;e.styles.setStyle(v,i,j);return}switch(e&&e.pluginsManager&&e.pluginsManager.onAttrChange(r,i),r){case u:{e.setMin(i);break}case o:{e.setMax(i);break}case x:{e.setStep(i);break}case H:{e.pointersOverlap=O(i);break}case X:{e.pointersMinDistance=z(i,0);break}case L:{e.rangeDragging=O(i);break}case h:{e.pointersMaxDistance=z(i,1/0);break}case Z:{e.disabled=O(i);break}case F:{e.keyboardDisabled=O(i);break}case Y:{e.mousewheelDisabled=O(i);break}case T:{e.setData(i);break}case k:{e.type=i;break}case K:{e.rightToLeft=O(i);break}case ce:{e.bottomToTop=O(i);break}case p:{e.round=z(i,Te);break}case W:{e.styles&&(e.styles.theme=i);break}case Pe:{e.animateOnClick=i;break}}let g=null;if(/^value([0-9]*)$/.test(r)&&(g="value"),/^pointer([0-9]*)-disabled$/.test(r)&&(g="pointer-disabled"),/^aria-label([0-9]*)$/.test(r)&&(g="aria-label"),/^pointer([0-9]*)-shape$/.test(r)&&(g="pointer-shape"),!g)return;let $=r.replace(/\D/g,"").trim(),C=$===""||$==="0"||$==="1"?0:z($,0)-1;switch(g){case"value":{e.setValue(i,C);break}case"pointer-disabled":{let v=e==null?void 0:e.pointers[C];if(!v)return;v.disabled=O(i);break}case"aria-label":{e.setAriaLabel(C,i);break}case"pointer-shape":{e.styles&&e.styles.setPointerShape(C,i);break}}},Kn=class extends HTMLElement{constructor(){super(),m(this,"slider"),m(this,"_externalCSSList",[]),m(this,"_observer",null),this.attachShadow({mode:"open"})}set step(e){this.slider&&this.slider.setStep(e)}get step(){var e;return(e=this.slider)==null?void 0:e.step}set disabled(e){this.slider&&(this.slider.disabled=e)}get disabled(){var e,r;return(r=(e=this.slider)==null?void 0:e.disabled)!=null?r:!1}set data(e){var r;(r=this.slider)==null||r.setData(e)}get data(){var e;return(e=this.slider)==null?void 0:e.data}set min(e){var r;(r=this.slider)==null||r.setMin(e)}get min(){var e;return(e=this.slider)==null?void 0:e.min}set max(e){var r;(r=this.slider)==null||r.setMax(e)}get max(){var e;return(e=this.slider)==null?void 0:e.max}set round(e){!this.slider||(this.slider.round=e)}get round(){var e,r;return(r=(e=this.slider)==null?void 0:e.round)!=null?r:Te}set type(e){!this.slider||(this.slider.type=e!=null?e:Le)}get type(){var e;return((e=this.slider)==null?void 0:e.type)||Le}set pointersOverlap(e){!this.slider||(this.slider.pointersOverlap=e)}get pointersOverlap(){var e,r;return(r=(e=this.slider)==null?void 0:e.pointersOverlap)!=null?r:!1}set pointersMinDistance(e){!this.slider||(this.slider.pointersMinDistance=e)}get pointersMinDistance(){var e,r;return(r=(e=this.slider)==null?void 0:e.pointersMinDistance)!=null?r:0}set pointersMaxDistance(e){!this.slider||(this.slider.pointersMaxDistance=e)}get pointersMaxDistance(){var e,r;return(r=(e=this.slider)==null?void 0:e.pointersMaxDistance)!=null?r:1/0}set theme(e){!this.slider||!this.slider.styles||(this.slider.styles.theme=e)}get theme(){var e,r,i;return(i=(r=(e=this.slider)==null?void 0:e.styles)==null?void 0:r.theme)!=null?i:null}set rtl(e){!this.slider||(this.slider.rightToLeft=e)}get rtl(){var e,r;return(r=(e=this.slider)==null?void 0:e.rightToLeft)!=null?r:!1}set btt(e){!this.slider||(this.slider.bottomToTop=e)}get btt(){var e,r;return(r=(e=this.slider)==null?void 0:e.bottomToTop)!=null?r:!1}set keyboardDisabled(e){!this.slider||(this.slider.keyboardDisabled=e)}get keyboardDisabled(){var e,r;return(r=(e=this.slider)==null?void 0:e.keyboardDisabled)!=null?r:!1}set mousewheelDisabled(e){!this.slider||(this.slider.mousewheelDisabled=e)}get mousewheelDisabled(){var e,r;return(r=(e=this.slider)==null?void 0:e.mousewheelDisabled)!=null?r:!1}set animateOnClick(e){!this.slider||(this.slider.animateOnClick=e)}get animateOnClick(){var e;return(e=this.slider)==null?void 0:e.animateOnClick}get rangeDragging(){var e,r;return(r=(e=this.slider)==null?void 0:e.rangeDragging)!=null?r:!1}set rangeDragging(e){this.slider&&(this.slider.rangeDragging=O(e))}get externalCSSList(){return this._externalCSSList}addPointer(e){var r,i;if(!this.slider)return;let l=(i=(r=this.slider)==null?void 0:r.addPointer(e))!=null?i:0;At(this,this.slider,l,`value${l+1}`,`ariaLabel${l+1}`,`pointerShape${l+1}`,`pointer${l+1}Disabled`)}removePointer(){var e;!this.slider||(e=this.slider)==null||e.removePointer()}addCSS(e){if(!this.shadowRoot)return;let r=document.createElement("style");r.textContent=e,this.shadowRoot.appendChild(r)}connectedCallback(){var e,r;if(!this.shadowRoot)return;this._externalCSSList=Vn(this),this.shadowRoot.innerHTML=w(S,this._externalCSSList);let i=(e=this.shadowRoot)==null?void 0:e.querySelector(".pointer");if(!i)return;let l=(r=this.shadowRoot)==null?void 0:r.getElementById("range-slider");if(!l)return;let g=Wn(this,i);this.slider=Yn(this,l,g),_n(this,this.slider),this._observer=new MutationObserver($=>{$.forEach(C=>{var v;if(!this.slider||C.type!=="attributes")return;let b=C.attributeName;!b||Xn(this.slider,b,(v=this.getAttribute(b))!=null?v:"")})}),this._observer.observe(this,{attributes:!0})}disconnectedCallback(){this._observer&&this._observer.disconnect(),this.slider&&this.slider.destroy()}},lt=Kn;window.tcRangeSlider=lt,customElements.get("toolcool-range-slider")||customElements.define("toolcool-range-slider",lt),customElements.get("tc-range-slider")||customElements.define("tc-range-slider",class extends lt{})})();var Jt=()=>{if(!!document.querySelector('[data-examples="get-set-values"]')){try{let t=document.getElementById("slider-1"),s=document.getElementById("label-1");t.addEventListener("change",c=>{s.textContent=c.detail.value}),t.value=50}catch(t){console.error(t)}try{let t=document.getElementById("slider-2"),s=document.getElementById("label-2"),c=document.getElementById("label-3");t.addEventListener("change",m=>{s.textContent=m.detail.value,c.textContent=m.detail.value2}),t.value1=40,t.value2=80}catch(t){console.error(t)}}},Qt=()=>{if(!!document.querySelector('[data-examples="auto-binding-values"]'))try{let t=document.getElementById("slider-2");t.valueLabel=".value-22"}catch(t){console.error(t)}},Zt=()=>{if(!!document.querySelector('[data-examples="auto-generated-labels"]')){try{let t=document.getElementById("slider-3");if(!t)return;let s=document.getElementById("toggle-gen-labels");if(!s)return;s.addEventListener("click",()=>{let c=t;c.generateLabels=!c.generateLabels})}catch(t){console.error(t)}try{let t=document.getElementById("slider-4");if(!t)return;let s=document.getElementById("toggle-gen-labels-units");if(!s)return;s.addEventListener("click",()=>{let m=t;m.generateLabelsUnits=m.generateLabelsUnits==="%"?"":"%"});let c=document.getElementById("toggle-gen-labels-colors");if(!c)return;c.addEventListener("click",()=>{let m=t;m.generateLabelsTextColor=m.generateLabelsTextColor==="#ff0000"?"":"#ff0000"})}catch(t){console.error(t)}try{let t=document.getElementById("auto-gen-labels-slider-5");if(!t)return;t.generateLabelsFormat=s=>s===void 0?"":`$${Number(s).toFixed(2)}`}catch(t){console.error(t)}}},en=()=>{if(!!document.querySelector('[data-examples="min-max"]'))try{let t=document.getElementById("slider-4"),s=document.getElementById("set-min-max-btn"),c=document.getElementById("set-min-max-btn-reset");s.addEventListener("click",()=>{t.min=-200,t.max=200}),c.addEventListener("click",()=>{t.min=-500,t.max=500})}catch(t){console.error(t)}},tn=()=>{if(!!document.querySelector('[data-examples="rounding"]'))try{let t=document.getElementById("slider-5"),s=document.getElementById("rounding-btn"),c=document.getElementById("rounding-reset");s.addEventListener("click",()=>{t.round=0}),c.addEventListener("click",()=>{t.round=2})}catch(t){console.error(t)}},nn=()=>{if(!!document.querySelector('[data-examples="step"]'))try{let t=document.getElementById("slider-6"),s=document.getElementById("step-btn"),c=document.getElementById("step-reset");s.addEventListener("click",()=>{t.step=10}),c.addEventListener("click",()=>{t.step=void 0})}catch(t){console.error(t)}},rn=()=>{if(!!document.querySelector('[data-examples="non-linear-step"]'))try{let t=document.getElementById("slider-7");t.step=(s,c)=>s<50?5:10}catch(t){console.error(t)}},ln=()=>{if(!!document.querySelector('[data-examples="data"]'))try{let t=document.getElementById("slider-8"),s=document.getElementById("data-btn"),c=document.getElementById("data-reset");s.addEventListener("click",()=>{t.data=["red","green","blue","yellow","pink","brown","silver","white","black"]}),c.addEventListener("click",()=>{t.data=[0,10,20,30,40,50,60,70,80,90,100]})}catch(t){console.error(t)}},on=()=>{if(!!document.querySelector('[data-examples="width-height-border-radius"]'))try{let t=document.getElementById("slider-9"),s=document.getElementById("styles-btn"),c=document.getElementById("styles-reset");s.addEventListener("click",()=>{t.sliderWidth="200px",t.sliderHeight="0.7rem",t.sliderRadius=0,t.pointerWidth="1.8rem",t.pointerHeight="1.8rem",t.pointerRadius=0,t.pointer2Width="1.3rem",t.pointer2Height="1.3rem",t.pointer2Radius="1rem"}),c.addEventListener("click",()=>{t.sliderWidth="300px",t.sliderHeight="0.25rem",t.sliderRadius="1rem",t.pointerWidth="1rem",t.pointerHeight="1rem",t.pointerRadius="100%",t.pointer2Width="1rem",t.pointer2Height="1rem",t.pointer2Radius="100%"})}catch(t){console.error(t)}},an=()=>{if(!!document.querySelector('[data-examples="colors"]'))try{let t=document.getElementById("slider-10"),s=document.getElementById("color-btn"),c=document.getElementById("color-reset");s.addEventListener("click",()=>{t.sliderBg="#efefef",t.sliderBgHover="#ddd",t.sliderBgFill="#ccc",t.pointer1Bg="red",t.pointer2Bg="green",t.pointer3Bg="blue",t.pointer1Border="none",t.pointer2Border="none",t.pointer3Border="none"}),c.addEventListener("click",()=>{t.sliderBg=void 0,t.sliderBgHover=void 0,t.sliderBgFill=void 0,t.pointer1Bg=void 0,t.pointer2Bg=void 0,t.pointer3Bg=void 0,t.pointer1Border=void 0,t.pointer2Border=void 0,t.pointer3Border=void 0})}catch(t){console.error(t)}},sn=()=>{if(!!document.querySelector('[data-examples="themes"]'))try{let t=document.getElementById("slider-11"),s=document.getElementById("rect-btn"),c=document.getElementById("glass-btn"),m=document.getElementById("circle-btn"),w=document.getElementById("rainbow-btn");s.addEventListener("click",()=>{t.theme="rect"}),c.addEventListener("click",()=>{t.theme="glass"}),m.addEventListener("click",()=>{t.theme="circle"}),w.addEventListener("click",()=>{t.theme="rainbow"})}catch(t){console.error(t)}},dn=()=>{if(!!document.querySelector('[data-examples="pointer-shapes"]'))try{let t=document.getElementById("slider-12"),s=document.getElementById("shape-triangle-btn"),c=document.getElementById("shape-star-btn"),m=document.getElementById("shape-rhombus-btn"),w=document.getElementById("shape-trapezoid-btn"),S=document.getElementById("shape-parallelogram-btn"),H=document.getElementById("shape-right-arrow-btn");s.addEventListener("click",()=>{t.pointerShape="triangle"}),c.addEventListener("click",()=>{t.pointerShape="star"}),m.addEventListener("click",()=>{t.pointerShape="rhombus"}),w.addEventListener("click",()=>{t.pointerShape="trapezoid"}),S.addEventListener("click",()=>{t.pointerShape="parallelogram"}),H.addEventListener("click",()=>{t.pointerShape="right-arrow"})}catch(t){console.error(t)}},un=()=>{if(!!document.querySelector('[data-examples="animation"]'))try{let t=document.getElementById("slider-13"),s=document.getElementById("animation-2s-btn"),c=document.getElementById("animation-disable-btn"),m=document.getElementById("animation-reset-btn");s.addEventListener("click",()=>{t.animateOnClick="2s"}),c.addEventListener("click",()=>{t.animateOnClick=!1}),m.addEventListener("click",()=>{t.animateOnClick="0.3s"})}catch(t){console.error(t)}},cn=()=>{if(!!document.querySelector('[data-examples="vertical"]')){try{let t=document.getElementById("slider-14"),s=document.getElementById("vertical-btn"),c=document.getElementById("horizontal-btn");s.addEventListener("click",()=>{t.type="vertical"}),c.addEventListener("click",()=>{t.type="horizontal"})}catch(t){console.error(t)}try{let t=document.getElementById("slider-14_2"),s=document.getElementById("btt-btn"),c=document.getElementById("ttb-btn");s.addEventListener("click",()=>{t.btt=!0}),c.addEventListener("click",()=>{t.btt=!1})}catch(t){console.error(t)}}},gn=()=>{if(!!document.querySelector('[data-examples="rtl"]'))try{let t=document.getElementById("slider-15"),s=document.getElementById("rtl-btn"),c=document.getElementById("ltr-btn");s.addEventListener("click",()=>{t.rtl=!0}),c.addEventListener("click",()=>{t.rtl=!1})}catch(t){console.error(t)}},pn=()=>{if(!!document.querySelector('[data-examples="disabled"]')){try{let t=document.getElementById("slider-16");document.getElementById("disabled-toggle-btn").addEventListener("click",()=>{t.disabled=!t.disabled})}catch(t){console.error(t)}try{let t=document.getElementById("slider-17");document.getElementById("disabled-pointers-toggle-btn").addEventListener("click",()=>{t.pointer1Disabled=!t.pointer1Disabled,t.pointer2Disabled=!t.pointer2Disabled})}catch(t){console.error(t)}}},mn=()=>{if(!!document.querySelector('[data-examples="range-dragging"]'))try{let t=document.getElementById("slider-19"),s=document.getElementById("range-dragging-toggle-btn");s.addEventListener("click",()=>{t.rangeDragging=!t.rangeDragging,s.textContent=t.rangeDragging?"Disable Range Dragging":"Enable Range Dragging"})}catch(t){console.error(t)}},vn=()=>{if(!!document.querySelector('[data-examples="pointers-overlap"]'))try{let t=document.getElementById("slider-20"),s=document.getElementById("pointers-overlap-toggle-btn");s.addEventListener("click",()=>{t.pointersOverlap=!t.pointersOverlap,s.textContent=t.pointersOverlap?"Disable Pointers Overlap":"Enable Pointers Overlap"})}catch(t){console.error(t)}},bn=()=>{if(!!document.querySelector('[data-examples="soft-limits"]'))try{let t=document.getElementById("slider-21");t.addEventListener("onMouseUp",()=>{t.value1!==void 0&&t.value1<20&&(t.value1=20),t.value2!==void 0&&t.value2>80&&(t.value2=80)})}catch(t){console.error(t)}},hn=()=>{if(!!document.querySelector('[data-examples="created-slider-dynamically"]'))try{let t=document.getElementById("slider-box-1"),s=document.getElementById("create-slider-btn-1");s.addEventListener("click",()=>{let c=t.querySelector("tc-range-slider");if(c)c.remove(),s.textContent="Create Slider";else{let m=document.createElement("tc-range-slider");m.setAttribute("min","-100"),m.setAttribute("max","100"),m.setAttribute("value1","10"),m.setAttribute("value2","50"),m.setAttribute("generate-labels","true"),t.prepend(m),s.textContent="Remove Slider"}})}catch(t){console.error(t)}},fn=()=>{if(!!document.querySelector('[data-examples="moving-tooltip"]'))try{let t=document.getElementById("moving-tooltip-slider-1");document.getElementById("moving-tooltip-toggle-btn").addEventListener("click",()=>{let c=t;c.movingTooltip=!c.movingTooltip})}catch(t){console.error(t)}},yn=()=>{if(!!document.querySelector('[data-examples="marks-plugin"]'))try{let t=document.getElementById("marks-plugin-1");document.getElementById("marks-plugin-toggle-btn").addEventListener("click",()=>{t.marksEnabled=!t.marksEnabled})}catch(t){console.error(t)}};var gr=()=>{let t=document.getElementById("mobile-menu-btn");if(!t)return;t.addEventListener("click",m=>{m.stopPropagation(),document.body.classList.toggle("mobile-menu-opened")}),document.body.addEventListener("click",()=>{document.body.classList.remove("mobile-menu-opened")});let s=document.getElementById("side-menu");if(!s)return;s.addEventListener("click",m=>{m.stopPropagation()});let c=document.getElementById("mobile-menu-close-btn");!c||c.addEventListener("click",()=>{document.body.classList.remove("mobile-menu-opened")})},pr=()=>{let t=document.querySelector(".side-menu");if(!t)return;let s=window.location.pathname,c=t.querySelector(`a[href='${s}']`);if(!c)return;c.scrollIntoView({block:"center"});let m=window.location.hash;if(!m)return;let w=document.getElementById(m.replace("#",""));!w||w.scrollIntoView({block:"start"})},mr=()=>{let t=document.querySelectorAll(".side-menu [data-collapsible-title]");for(let s of t)s.addEventListener("click",()=>{var w;let c=s.getAttribute("data-opened")==="true";s.setAttribute("data-opened",(!c).toString());let m=s.querySelector("[data-arrow]");!m||(m.classList.toggle("rotate-90",!c),(w=s.nextElementSibling)==null||w.classList.toggle("hidden",c))})},vr=()=>{let t=window.localStorage.getItem("mode")||"light";document.documentElement.classList.toggle("dark",t==="dark");let s=document.getElementById("move-to-dark-mode-btn"),c=document.getElementById("move-to-light-mode-btn"),m=()=>{document.documentElement.classList.add("dark"),s.classList.add("hidden"),c.classList.remove("hidden"),window.localStorage.setItem("mode","dark")},w=()=>{document.documentElement.classList.remove("dark"),c.classList.add("hidden"),s.classList.remove("hidden"),window.localStorage.setItem("mode","light")};t==="dark"?m():w(),s==null||s.addEventListener("click",m),c==null||c.addEventListener("click",w)},br=()=>{document.getElementById("special-page")||(gr(),pr(),mr(),vr(),Jt(),Qt(),Zt(),en(),tn(),nn(),rn(),ln(),on(),an(),sn(),dn(),un(),cn(),gn(),pn(),mn(),vn(),bn(),hn(),fn(),yn())};document.addEventListener("DOMContentLoaded",()=>{br()});})();
-//# sourceMappingURL=index.1689852038054.js.map
+//# sourceMappingURL=index.1690791059529.js.map
diff --git a/docs/js/index.1689852038054.js.map b/docs/js/index.1690791059529.js.map
similarity index 100%
rename from docs/js/index.1689852038054.js.map
rename to docs/js/index.1690791059529.js.map
diff --git a/docs/pages/accessibility.html b/docs/pages/accessibility.html
index f0f3f46f..1783f2ac 100644
--- a/docs/pages/accessibility.html
+++ b/docs/pages/accessibility.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="accessibility-via-aria-attributes" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#accessibility-via-aria-attributes">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -266,6 +271,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/add-css-api.html b/docs/pages/add-css-api.html
index 8ecaa04b..77b979eb 100644
--- a/docs/pages/add-css-api.html
+++ b/docs/pages/add-css-api.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="add-css-api" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#add-css-api">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -216,6 +221,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/add-remove-pointer.html b/docs/pages/add-remove-pointer.html
index d8b5c8cf..2d8a5dd6 100644
--- a/docs/pages/add-remove-pointer.html
+++ b/docs/pages/add-remove-pointer.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="add-remove-pointer-api" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#add-remove-pointer-api">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -213,6 +218,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/animation.html b/docs/pages/animation.html
index 58b28e50..25ea99ac 100644
--- a/docs/pages/animation.html
+++ b/docs/pages/animation.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="animation-on-panel-click" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#animation-on-panel-click">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -254,6 +259,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/auto-binding-labels.html b/docs/pages/auto-binding-labels.html
index eb552e7b..bdb8819d 100644
--- a/docs/pages/auto-binding-labels.html
+++ b/docs/pages/auto-binding-labels.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="auto-binding-labels" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#auto-binding-labels">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -297,6 +302,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/auto-generated-labels.html b/docs/pages/auto-generated-labels.html
index 6d6c22ba..ddc49d52 100644
--- a/docs/pages/auto-generated-labels.html
+++ b/docs/pages/auto-generated-labels.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="auto-generated-labels" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#auto-generated-labels">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -358,6 +363,6 @@ <h3 id="custom-formatting" tabindex="-1" class="text-3xl mb-8"><a class="header-
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/basic-usage.html b/docs/pages/basic-usage.html
index e81231bc..2ffa8a9d 100644
--- a/docs/pages/basic-usage.html
+++ b/docs/pages/basic-usage.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="basic-usage" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#basic-usage">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -216,6 +221,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/colors.html b/docs/pages/colors.html
index 5e237a10..63cf68ca 100644
--- a/docs/pages/colors.html
+++ b/docs/pages/colors.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="colors" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#colors">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -487,6 +492,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/css-links.html b/docs/pages/css-links.html
index d4160935..376ee7a9 100644
--- a/docs/pages/css-links.html
+++ b/docs/pages/css-links.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="css-links" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#css-links">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -207,6 +212,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/css-themes.html b/docs/pages/css-themes.html
index 7d9807bd..5932b64d 100644
--- a/docs/pages/css-themes.html
+++ b/docs/pages/css-themes.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h1 id="custom-css-theme" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#custom-css-theme">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -239,6 +244,6 @@ <h2 id="the-complete-example" tabindex="-1" class="text-3xl mb-8"><a class="head
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/disabled.html b/docs/pages/disabled.html
index 341acc9c..209bc237 100644
--- a/docs/pages/disabled.html
+++ b/docs/pages/disabled.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="disable-range-slider-completely-or-several-pointers" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#disable-range-slider-completely-or-several-pointers">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -316,6 +321,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/events.html b/docs/pages/events.html
index 53f32776..41a58d60 100644
--- a/docs/pages/events.html
+++ b/docs/pages/events.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="events" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#events">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -267,6 +272,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/generating-slider-dynamically.html b/docs/pages/generating-slider-dynamically.html
index 9d14ca59..b1376231 100644
--- a/docs/pages/generating-slider-dynamically.html
+++ b/docs/pages/generating-slider-dynamically.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="generating-slider-dynamically" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#generating-slider-dynamically">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -226,6 +231,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/get-set-values-and-change-event.html b/docs/pages/get-set-values-and-change-event.html
index e77a17d1..a14529f6 100644
--- a/docs/pages/get-set-values-and-change-event.html
+++ b/docs/pages/get-set-values-and-change-event.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="get-set-values-and-change-event" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#get-set-values-and-change-event">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -275,6 +280,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/images-and-svgs-as-pointers.html b/docs/pages/images-and-svgs-as-pointers.html
index 11cc455f..9dc88cef 100644
--- a/docs/pages/images-and-svgs-as-pointers.html
+++ b/docs/pages/images-and-svgs-as-pointers.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="images-and-svgs-as-pointers" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#images-and-svgs-as-pointers">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -259,6 +264,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/javascript-plugin-example.html b/docs/pages/javascript-plugin-example.html
index dea849c4..acf7d843 100644
--- a/docs/pages/javascript-plugin-example.html
+++ b/docs/pages/javascript-plugin-example.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h1 id="java-script-plugin-example" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#java-script-plugin-example">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -414,6 +419,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/javascript-plugin-interface.html b/docs/pages/javascript-plugin-interface.html
index 240b585e..a5013074 100644
--- a/docs/pages/javascript-plugin-interface.html
+++ b/docs/pages/javascript-plugin-interface.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h1 id="java-script-plugin-interface" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#java-script-plugin-interface">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -224,6 +229,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/javascript-plugins.html b/docs/pages/javascript-plugins.html
index 5ece6636..a8132d38 100644
--- a/docs/pages/javascript-plugins.html
+++ b/docs/pages/javascript-plugins.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h1 id="java-script-plugins" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#java-script-plugins">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -255,6 +260,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/list-of-individual-values-and-text-data.html b/docs/pages/list-of-individual-values-and-text-data.html
index dd0dd0d2..12e28ec0 100644
--- a/docs/pages/list-of-individual-values-and-text-data.html
+++ b/docs/pages/list-of-individual-values-and-text-data.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="range-values-list" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#range-values-list">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -269,6 +274,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/marks-plugin.html b/docs/pages/marks-plugin.html
index fc384117..ee51e8da 100644
--- a/docs/pages/marks-plugin.html
+++ b/docs/pages/marks-plugin.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="marks-plugin" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#marks-plugin">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -553,6 +558,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/max-and-min-pointers-distance.html b/docs/pages/max-and-min-pointers-distance.html
index 78ab7fc7..d4b3dd33 100644
--- a/docs/pages/max-and-min-pointers-distance.html
+++ b/docs/pages/max-and-min-pointers-distance.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="maximum-and-minimum-pointers-distance" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#maximum-and-minimum-pointers-distance">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -269,6 +274,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/min-and-max.html b/docs/pages/min-and-max.html
index 13f3e5a4..1061a3d1 100644
--- a/docs/pages/min-and-max.html
+++ b/docs/pages/min-and-max.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="range-min-and-max" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#range-min-and-max">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -288,6 +293,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/moving-tooltip-plugin.html b/docs/pages/moving-tooltip-plugin.html
index 57b86cfb..d0307ac7 100644
--- a/docs/pages/moving-tooltip-plugin.html
+++ b/docs/pages/moving-tooltip-plugin.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="moving-tooltip-plugin" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#moving-tooltip-plugin">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -406,6 +411,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/next-js.html b/docs/pages/next-js.html
index b2734a46..096f23fc 100644
--- a/docs/pages/next-js.html
+++ b/docs/pages/next-js.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="usage-with-next-js" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#usage-with-next-js">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -214,6 +219,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/nodejs.html b/docs/pages/nodejs.html
index f6a48b5e..5fb606ea 100644
--- a/docs/pages/nodejs.html
+++ b/docs/pages/nodejs.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="node-js-and-java-script-bundlers" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#node-js-and-java-script-bundlers">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -220,6 +225,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/non-linear-step.html b/docs/pages/non-linear-step.html
index c2abb116..9ca8beae 100644
--- a/docs/pages/non-linear-step.html
+++ b/docs/pages/non-linear-step.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="non-linear-slider" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#non-linear-slider">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -233,6 +238,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/origin-at-center-plugin.html b/docs/pages/origin-at-center-plugin.html
index fb513b13..87ab9b77 100644
--- a/docs/pages/origin-at-center-plugin.html
+++ b/docs/pages/origin-at-center-plugin.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="origin-at-center-plugin" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#origin-at-center-plugin">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -235,6 +240,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/plugin-data-interface.html b/docs/pages/plugin-data-interface.html
index c51930c1..6b14a8c0 100644
--- a/docs/pages/plugin-data-interface.html
+++ b/docs/pages/plugin-data-interface.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h1 id="plugin-data-interface" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#plugin-data-interface">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -228,6 +233,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/plugin-getters-interface.html b/docs/pages/plugin-getters-interface.html
index 73359f22..ccd67f46 100644
--- a/docs/pages/plugin-getters-interface.html
+++ b/docs/pages/plugin-getters-interface.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h1 id="getters-object-interface" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#getters-object-interface">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -227,6 +232,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/plugin-setters-interface.html b/docs/pages/plugin-setters-interface.html
index 99de3dbe..5ee8fb9b 100644
--- a/docs/pages/plugin-setters-interface.html
+++ b/docs/pages/plugin-setters-interface.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h1 id="setters-object-interface" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#setters-object-interface">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -221,6 +226,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/plugins.html b/docs/pages/plugins.html
index 0a1e8117..e91a090e 100644
--- a/docs/pages/plugins.html
+++ b/docs/pages/plugins.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h1 id="plugins" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#plugins">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -213,6 +218,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/pointer-shape-themes.html b/docs/pages/pointer-shape-themes.html
index a6807fd5..47230555 100644
--- a/docs/pages/pointer-shape-themes.html
+++ b/docs/pages/pointer-shape-themes.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h1 id="pointer-shapes-custom-themes" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#pointer-shapes-custom-themes">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -210,6 +215,6 @@ <h2 id="the-complete-example" tabindex="-1" class="text-3xl mb-8"><a class="head
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/pointer-shapes.html b/docs/pages/pointer-shapes.html
index 7b6cb526..1cd51459 100644
--- a/docs/pages/pointer-shapes.html
+++ b/docs/pages/pointer-shapes.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="pointer-shapes" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#pointer-shapes">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -180,7 +185,7 @@
 <div class="my-12 flex flex-col items-center">
     <tc-range-slider
         pointer-shape="triangle"
-        css-links="/js/index.1689852038054.css"
+        css-links="/js/index.1690791059529.css"
         value1="30"
         value2="50"
         value3="70"
@@ -218,7 +223,7 @@
         pointer1-shape="triangle"
         pointer2-shape="star"
         pointer3-shape="trapezoid"
-        css-links="/js/index.1689852038054.css"
+        css-links="/js/index.1690791059529.css"
         value1="10"
         value2="50"
         value3="90"
@@ -282,7 +287,7 @@
     <tc-range-slider
         pointer1-shape="rhombus"
         pointer2-shape="parallelogram"
-        css-links="/js/index.1689852038054.css"
+        css-links="/js/index.1690791059529.css"
         value1="30"
         value2="60"
         pointer-width="35px"
@@ -316,7 +321,7 @@
     <tc-range-slider
         pointer1-shape="trapezoid"
         pointer2-shape="right-arrow"
-        css-links="/js/index.1689852038054.css"
+        css-links="/js/index.1690791059529.css"
         value1="30"
         value2="60"
         pointer-width="35px"
@@ -344,7 +349,7 @@
     <tc-range-slider
         id="slider-12"
         pointer-shape="trapezoid"
-        css-links="/js/index.1689852038054.css"
+        css-links="/js/index.1690791059529.css"
         value1="30"
         value2="70"
         pointer-width="35px"
@@ -409,6 +414,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/pointers-overlap.html b/docs/pages/pointers-overlap.html
index 6c6dffac..9c81b6ec 100644
--- a/docs/pages/pointers-overlap.html
+++ b/docs/pages/pointers-overlap.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="pointers-overlap" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#pointers-overlap">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -236,6 +241,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/range-dragging.html b/docs/pages/range-dragging.html
index 6a00b524..8fe8d6ed 100644
--- a/docs/pages/range-dragging.html
+++ b/docs/pages/range-dragging.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="range-dragging" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#range-dragging">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -255,6 +260,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/react-typescript.html b/docs/pages/react-typescript.html
index 86fe2ca9..80bbb6f8 100644
--- a/docs/pages/react-typescript.html
+++ b/docs/pages/react-typescript.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="usage-with-react-and-type-script" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#usage-with-react-and-type-script">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -247,6 +252,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/right-to-left-support.html b/docs/pages/right-to-left-support.html
index 696b82e0..06aefc67 100644
--- a/docs/pages/right-to-left-support.html
+++ b/docs/pages/right-to-left-support.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="right-to-left-slider" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#right-to-left-slider">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -192,7 +197,7 @@
       value1="40"
       value2="60"
       theme="target"
-      css-links="/js/index.1689852038054.css"
+      css-links="/js/index.1690791059529.css"
       generate-labels="true"></tc-range-slider>
     <div class="flex items-center">
         <button id="rtl-btn" type="button" class="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-3 focus:outline-none focus:ring-2 bg-sky-50 text-sky-600 hover:bg-sky-100 hover:text-sky-700 focus:ring-sky-600 mt-8 mx-2">Right to Left</button>
@@ -255,6 +260,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/rounding.html b/docs/pages/rounding.html
index 30d9b566..6cedb274 100644
--- a/docs/pages/rounding.html
+++ b/docs/pages/rounding.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="rounding" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#rounding">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -243,6 +248,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/soft-limits.html b/docs/pages/soft-limits.html
index 68837360..88db0a10 100644
--- a/docs/pages/soft-limits.html
+++ b/docs/pages/soft-limits.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="soft-limits" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#soft-limits">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -236,6 +241,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/step.html b/docs/pages/step.html
index c6f51c62..8b72baa0 100644
--- a/docs/pages/step.html
+++ b/docs/pages/step.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="step" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#step">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -297,6 +302,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/storage.html b/docs/pages/storage.html
index bf485062..325cda08 100644
--- a/docs/pages/storage.html
+++ b/docs/pages/storage.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="storage-plugin" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#storage-plugin">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -259,6 +264,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/themes.html b/docs/pages/themes.html
index 76cdbcf8..94dbcb80 100644
--- a/docs/pages/themes.html
+++ b/docs/pages/themes.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="themes-predefined-styles" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#themes-predefined-styles">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -181,7 +186,7 @@
 <div class="my-12 flex flex-col items-center">
     <tc-range-slider
         theme="glass"
-        css-links="/js/index.1689852038054.css"
+        css-links="/js/index.1690791059529.css"
         value1="30"
         value2="60"></tc-range-slider>
 </div>
@@ -193,7 +198,7 @@
 <div class="my-12 flex flex-col items-center">
     <tc-range-slider
         theme="rect"
-        css-links="/js/index.1689852038054.css"
+        css-links="/js/index.1690791059529.css"
         value1="30"
         value2="60"></tc-range-slider>
 </div>
@@ -205,7 +210,7 @@
 <div class="my-12 flex flex-col items-center">
     <tc-range-slider
         theme="circle"
-        css-links="/js/index.1689852038054.css"
+        css-links="/js/index.1690791059529.css"
         value1="30"
         value2="60"></tc-range-slider>
 </div>
@@ -217,7 +222,7 @@
 <div class="my-12 flex flex-col items-center">
     <tc-range-slider
         theme="rainbow"
-        css-links="/js/index.1689852038054.css"
+        css-links="/js/index.1690791059529.css"
         value1="30"
         value2="60"></tc-range-slider>
 </div>
@@ -229,7 +234,7 @@
 <div class="my-12 flex flex-col items-center">
     <tc-range-slider
         theme="ruler"
-        css-links="/js/index.1689852038054.css"
+        css-links="/js/index.1690791059529.css"
         value1="30"
         value2="60"></tc-range-slider>
 </div>
@@ -247,7 +252,7 @@
 <div class="my-12 flex flex-col items-center">
     <tc-range-slider
       theme="target"
-      css-links="/js/index.1689852038054.css"
+      css-links="/js/index.1690791059529.css"
       value1="30"
       value2="60"
       pointer2-bg="red"
@@ -272,7 +277,7 @@
     <tc-range-slider
       id="slider-11"
       theme="target"
-      css-links="/js/index.1689852038054.css"
+      css-links="/js/index.1690791059529.css"
       value1="30"
       value2="70"></tc-range-slider>
     <div class="grid grid-cols-2 gap-4 items-center mt-8">
@@ -341,6 +346,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/touch-and-keyboard-support.html b/docs/pages/touch-and-keyboard-support.html
index 2043c581..83f5cb07 100644
--- a/docs/pages/touch-and-keyboard-support.html
+++ b/docs/pages/touch-and-keyboard-support.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="touch-and-keyboard-support" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#touch-and-keyboard-support">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -371,6 +376,6 @@ <h3 id="mousewheel-disabled-attribute" tabindex="-1" class="text-3xl mb-8"><a cl
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/vertical-slider.html b/docs/pages/vertical-slider.html
index 72f87b18..f5cee68d 100644
--- a/docs/pages/vertical-slider.html
+++ b/docs/pages/vertical-slider.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="vertical-slider" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#vertical-slider">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -195,7 +200,7 @@
     <tc-range-slider
         id="slider-14"
         theme="glass"
-        css-links="/js/index.1689852038054.css"
+        css-links="/js/index.1690791059529.css"
         value1="30"
         value2="70"
         pointer-width="1.5rem"
@@ -215,7 +220,7 @@
         id="slider-14_2"
         type="vertical"
         theme="glass"
-        css-links="/js/index.1689852038054.css"
+        css-links="/js/index.1690791059529.css"
         value1="30"
         value2="70"
         pointer-width="1.5rem"
@@ -275,6 +280,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/docs/pages/width-height-and-border-radius.html b/docs/pages/width-height-and-border-radius.html
index f41702cd..5589a19d 100644
--- a/docs/pages/width-height-and-border-radius.html
+++ b/docs/pages/width-height-and-border-radius.html
@@ -17,8 +17,8 @@
     <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
     <link rel="stylesheet" href="/highlight.js/styles/tokyo-night-dark.css" />
-    <link rel="stylesheet" href="/css/styles.1689852038054.css" />
-    <!--<link rel="stylesheet" href="/js/index.1689852038054.css" />-->
+    <link rel="stylesheet" href="/css/styles.1690791059529.css" />
+    <!--<link rel="stylesheet" href="/js/index.1690791059529.css" />-->
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-D3TJWMC6F4"></script>
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -150,7 +155,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h2 id="width-height-and-border-radius" tabindex="-1" class="text-3xl mb-8"><a class="header-anchor text-sky-500" href="#width-height-and-border-radius">
       <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
     <path stroke="none" d="M0 0h24v24H0z"/>
@@ -385,6 +390,6 @@
       </div>
     </footer>-->
 
-    <script src="/js/index.1689852038054.js"></script>
+    <script src="/js/index.1690791059529.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/src/docs/data/layouts/page-layout.html b/src/docs/data/layouts/page-layout.html
index 0cd5ddf8..469da7fd 100644
--- a/src/docs/data/layouts/page-layout.html
+++ b/src/docs/data/layouts/page-layout.html
@@ -65,6 +65,11 @@
           </a>
         </div>
 
+        <div>
+          <p class="text-center text-sm">
+            🤩 If you like this project, please support us by starring our <a target="_blank" rel="noopener noreferrer" href="https://github.com/mzusin/toolcool-range-slider" class="underline">GitHub repository</a> 🤩</p>
+        </div>
+
         <div class="flex items-center">
 
           <!-- themes -->
@@ -115,7 +120,7 @@
           </div>
         </div>
 
-        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
+        <div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-[#090f1c]">
           <div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200">{% page-content %}</div>
 
           {% prev-next %}