@3cr/viewer-browser 0.0.248 → 0.0.293

package/src/assets/logos/license/white/white.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 64" version="1.1" width="512" height="64">
+  <g>
+    <svg viewBox="0 0 448 64" width="448" height="64" >
+      <g>
+        <svg height="64" viewBox="1.05 -31.05 391.32 31.7" width="448">
+          <path fill="#ffffff" d="M15.7-10.9L15.7-10.9 12.15-10.9Q10.75-13 9.22-15.33 7.7-17.65 6.23-20.05 4.75-22.45 3.43-24.78 2.1-27.1 1.05-29.1L1.05-29.1Q1.25-29.65 1.8-30.18 2.35-30.7 3.25-30.7L3.25-30.7Q4.2-30.7 4.73-30.2 5.25-29.7 5.8-28.7L5.8-28.7Q6.45-27.55 7.28-26.13 8.1-24.7 9-23.13 9.9-21.55 10.8-20 11.7-18.45 12.48-17.1 13.25-15.75 13.85-14.75L13.85-14.75 14.05-14.75Q15.8-17.65 17.25-20.25 18.7-22.85 20.05-25.35 21.4-27.85 22.7-30.35L22.7-30.35Q23-30.55 23.45-30.63 23.9-30.7 24.25-30.7L24.25-30.7Q25.2-30.7 25.68-30.25 26.15-29.8 26.15-29L26.15-29Q26.15-28.5 25.38-26.88 24.6-25.25 23.2-22.83 21.8-20.4 19.9-17.35 18-14.3 15.7-10.9ZM11.9-1.6L11.9-12.85 15.95-12.85 15.95-0.1Q15.7 0 15.18 0.13 14.65 0.25 14.1 0.25L14.1 0.25Q13 0.25 12.45-0.2 11.9-0.65 11.9-1.6L11.9-1.6ZM59.2-15.2L59.2-15.2 59.2-15.2Q59.2-10 57.3-6.48 55.4-2.95 52.12-1.15 48.85 0.65 44.7 0.65L44.7 0.65Q40.6 0.65 37.3-1.15 34-2.95 32.1-6.48 30.2-10 30.2-15.2L30.2-15.2Q30.2-20.4 32.15-23.93 34.1-27.45 37.37-29.25 40.65-31.05 44.7-31.05L44.7-31.05Q48.8-31.05 52.07-29.25 55.35-27.45 57.27-23.93 59.2-20.4 59.2-15.2ZM55.05-15.2L55.05-15.2 55.05-15.2Q55.05-21.15 52.22-24.38 49.4-27.6 44.7-27.6L44.7-27.6Q40.05-27.6 37.22-24.38 34.4-21.15 34.4-15.2L34.4-15.2Q34.4-9.25 37.2-6.03 40-2.8 44.7-2.8L44.7-2.8Q49.45-2.8 52.25-6.03 55.05-9.25 55.05-15.2ZM78.15 0.65L78.15 0.65 78.15 0.65Q74.4 0.65 71.75-0.73 69.1-2.1 67.72-4.63 66.35-7.15 66.35-10.5L66.35-10.5 66.35-14.6 70.4-14.6 70.4-10.85Q70.4-6.85 72.62-4.83 74.85-2.8 78.15-2.8L78.15-2.8Q81.45-2.8 83.67-4.83 85.9-6.85 85.9-10.85L85.9-10.85 85.9-14.6 90-14.6 90-10.5Q90-7.15 88.62-4.63 87.25-2.1 84.6-0.73 81.95 0.65 78.15 0.65ZM70.4-28.8L70.4-12.55 66.35-12.55 66.35-30.3Q66.6-30.4 67.12-30.53 67.65-30.65 68.25-30.65L68.25-30.65Q69.35-30.65 69.87-30.23 70.4-29.8 70.4-28.8L70.4-28.8ZM90-28.8L90-12.55 85.9-12.55 85.9-30.3Q86.15-30.4 86.67-30.53 87.2-30.65 87.8-30.65L87.8-30.65Q88.9-30.65 89.45-30.23 90-29.8 90-28.8L90-28.8ZM102.89-27.1L102.89-14.9 108.64-14.9Q112.34-14.9 114.44-16.5 116.54-18.1 116.54-21.25L116.54-21.25Q116.54-24.35 114.34-25.95 112.14-27.55 108.04-27.55L108.04-27.55Q106.69-27.55 105.32-27.43 103.94-27.3 102.89-27.1L102.89-27.1ZM108.64-11.5L108.64-11.5 98.84-11.5 98.84-28.2Q98.84-29 99.27-29.43 99.69-29.85 100.49-30.1L100.49-30.1Q101.94-30.55 104.07-30.75 106.19-30.95 108.19-30.95L108.19-30.95Q114.44-30.95 117.54-28.4 120.64-25.85 120.64-21.25L120.64-21.25Q120.64-18.3 119.29-16.1 117.94-13.9 115.29-12.7 112.64-11.5 108.64-11.5ZM116.94-1.3L108.74-12.8 111.74-14.3Q113.14-12.55 114.64-10.65 116.14-8.75 117.54-6.95 118.94-5.15 120.04-3.73 121.14-2.3 121.74-1.5L121.74-1.5Q121.54-0.65 120.87-0.15 120.19 0.35 119.49 0.35L119.49 0.35Q118.64 0.35 118.09-0.08 117.54-0.5 116.94-1.3L116.94-1.3ZM98.84-1.6L98.84-12.6 102.94-12.6 102.94-0.1Q102.64 0 102.14 0.13 101.64 0.25 101.04 0.25L101.04 0.25Q99.94 0.25 99.39-0.2 98.84-0.65 98.84-1.6L98.84-1.6ZM143.29-2.2L143.29-17.75 147.39-17.75 147.39-0.4 145.49 0Q144.54 0 143.91-0.63 143.29-1.25 143.29-2.2L143.29-2.2ZM160.64 0L145.49 0 145.49-3.5 161.74-3.5Q161.99-3.3 162.14-2.85 162.29-2.4 162.29-1.85L162.29-1.85Q162.29-1 161.84-0.5 161.39 0 160.64 0L160.64 0ZM147.39-28.8L147.39-14.75 143.29-14.75 143.29-30.3Q143.54-30.4 144.06-30.53 144.59-30.65 145.19-30.65L145.19-30.65Q146.29-30.65 146.84-30.23 147.39-29.8 147.39-28.8L147.39-28.8ZM195.59-15.2L195.59-15.2 195.59-15.2Q195.59-10 193.69-6.48 191.79-2.95 188.51-1.15 185.24 0.65 181.09 0.65L181.09 0.65Q176.99 0.65 173.69-1.15 170.39-2.95 168.49-6.48 166.59-10 166.59-15.2L166.59-15.2Q166.59-20.4 168.54-23.93 170.49-27.45 173.76-29.25 177.04-31.05 181.09-31.05L181.09-31.05Q185.19-31.05 188.46-29.25 191.74-27.45 193.66-23.93 195.59-20.4 195.59-15.2ZM191.44-15.2L191.44-15.2 191.44-15.2Q191.44-21.15 188.61-24.38 185.79-27.6 181.09-27.6L181.09-27.6Q176.44-27.6 173.61-24.38 170.79-21.15 170.79-15.2L170.79-15.2Q170.79-9.25 173.59-6.03 176.39-2.8 181.09-2.8L181.09-2.8Q185.84-2.8 188.64-6.03 191.44-9.25 191.44-15.2ZM226.83-14.35L226.83-14.35 226.83-3.5Q226.83-2.6 226.31-1.98 225.78-1.35 224.73-0.85L224.73-0.85Q223.48-0.2 221.28 0.23 219.08 0.65 216.83 0.65L216.83 0.65Q212.18 0.65 208.61-1.05 205.03-2.75 203.03-6.25 201.03-9.75 201.03-15.15L201.03-15.15Q201.03-20.5 203.11-24.03 205.18-27.55 208.63-29.3 212.08-31.05 216.18-31.05L216.18-31.05Q219.03-31.05 221.18-30.45 223.33-29.85 224.53-28.95 225.73-28.05 225.73-27.1L225.73-27.1Q225.73-26.45 225.33-25.93 224.93-25.4 224.38-25.15L224.38-25.15Q223.03-26.05 221.18-26.83 219.33-27.6 216.43-27.6L216.43-27.6Q213.28-27.6 210.73-26.2 208.18-24.8 206.71-22.03 205.23-19.25 205.23-15.15L205.23-15.15Q205.23-10.85 206.76-8.13 208.28-5.4 210.93-4.1 213.58-2.8 216.88-2.8L216.88-2.8Q218.68-2.8 220.28-3.1 221.88-3.4 222.78-3.85L222.78-3.85 222.78-13.05 215.23-13.05Q215.08-13.3 214.93-13.73 214.78-14.15 214.78-14.65L214.78-14.65Q214.78-15.5 215.18-15.98 215.58-16.45 216.33-16.45L216.33-16.45 224.68-16.45Q225.58-16.45 226.21-15.88 226.83-15.3 226.83-14.35ZM261.98-15.2L261.98-15.2 261.98-15.2Q261.98-10 260.08-6.48 258.18-2.95 254.91-1.15 251.63 0.65 247.48 0.65L247.48 0.65Q243.38 0.65 240.08-1.15 236.78-2.95 234.88-6.48 232.98-10 232.98-15.2L232.98-15.2Q232.98-20.4 234.93-23.93 236.88-27.45 240.16-29.25 243.43-31.05 247.48-31.05L247.48-31.05Q251.58-31.05 254.86-29.25 258.13-27.45 260.06-23.93 261.98-20.4 261.98-15.2ZM257.83-15.2L257.83-15.2 257.83-15.2Q257.83-21.15 255.01-24.38 252.18-27.6 247.48-27.6L247.48-27.6Q242.83-27.6 240.01-24.38 237.18-21.15 237.18-15.2L237.18-15.2Q237.18-9.25 239.98-6.03 242.78-2.8 247.48-2.8L247.48-2.8Q252.23-2.8 255.03-6.03 257.83-9.25 257.83-15.2ZM284.18-1.6L284.18-18.1 288.28-18.1 288.28-0.1Q287.98 0 287.48 0.13 286.98 0.25 286.38 0.25L286.38 0.25Q285.28 0.25 284.73-0.2 284.18-0.65 284.18-1.6L284.18-1.6ZM288.28-28.8L288.28-14.75 284.18-14.75 284.18-30.3Q284.43-30.4 284.95-30.53 285.48-30.65 286.08-30.65L286.08-30.65Q287.18-30.65 287.73-30.23 288.28-29.8 288.28-28.8L288.28-28.8ZM303.88-1.6L303.88-18.1 307.98-18.1 307.98-0.1Q307.68 0 307.18 0.13 306.68 0.25 306.08 0.25L306.08 0.25Q304.98 0.25 304.43-0.2 303.88-0.65 303.88-1.6L303.88-1.6ZM307.98-28.8L307.98-14.75 303.88-14.75 303.88-30.3Q304.13-30.4 304.65-30.53 305.18-30.65 305.78-30.65L305.78-30.65Q306.88-30.65 307.43-30.23 307.98-29.8 307.98-28.8L307.98-28.8ZM306.03-17.1L306.03-13.7 286.63-13.7 286.63-17.1 306.03-17.1ZM316.87-2.2L316.87-18.3 320.92-18.3 320.92-0.4Q320.72-0.35 320.17-0.18 319.62 0 319.07 0L319.07 0Q318.07 0 317.47-0.63 316.87-1.25 316.87-2.2L316.87-2.2ZM320.92-30L320.92-12.4 316.87-12.45 316.87-28.2Q316.87-29.2 317.47-29.8 318.07-30.4 319.07-30.4L319.07-30.4Q319.62-30.4 320.17-30.25 320.72-30.1 320.92-30L320.92-30ZM333.02-13.9L319.07-13.9 319.07-17.3 334.12-17.3Q334.27-17.1 334.42-16.65 334.57-16.2 334.57-15.7L334.57-15.7Q334.57-14.9 334.17-14.4 333.77-13.9 333.02-13.9L333.02-13.9ZM334.82 0L319.07 0 319.07-3.4 335.92-3.4Q336.07-3.2 336.22-2.78 336.37-2.35 336.37-1.8L336.37-1.8Q336.37-1 335.97-0.5 335.57 0 334.82 0L334.82 0ZM334.57-26.95L319.07-26.95 319.07-30.4 335.67-30.4Q335.82-30.2 335.97-29.75 336.12-29.3 336.12-28.8L336.12-28.8Q336.12-28 335.72-27.48 335.32-26.95 334.57-26.95L334.57-26.95ZM347.47-27.1L347.47-14.9 353.22-14.9Q356.92-14.9 359.02-16.5 361.12-18.1 361.12-21.25L361.12-21.25Q361.12-24.35 358.92-25.95 356.72-27.55 352.62-27.55L352.62-27.55Q351.27-27.55 349.9-27.43 348.52-27.3 347.47-27.1L347.47-27.1ZM353.22-11.5L353.22-11.5 343.42-11.5 343.42-28.2Q343.42-29 343.85-29.43 344.27-29.85 345.07-30.1L345.07-30.1Q346.52-30.55 348.65-30.75 350.77-30.95 352.77-30.95L352.77-30.95Q359.02-30.95 362.12-28.4 365.22-25.85 365.22-21.25L365.22-21.25Q365.22-18.3 363.87-16.1 362.52-13.9 359.87-12.7 357.22-11.5 353.22-11.5ZM361.52-1.3L353.32-12.8 356.32-14.3Q357.72-12.55 359.22-10.65 360.72-8.75 362.12-6.95 363.52-5.15 364.62-3.73 365.72-2.3 366.32-1.5L366.32-1.5Q366.12-0.65 365.45-0.15 364.77 0.35 364.07 0.35L364.07 0.35Q363.22 0.35 362.67-0.08 362.12-0.5 361.52-1.3L361.52-1.3ZM343.42-1.6L343.42-12.6 347.52-12.6 347.52-0.1Q347.22 0 346.72 0.13 346.22 0.25 345.62 0.25L345.62 0.25Q344.52 0.25 343.97-0.2 343.42-0.65 343.42-1.6L343.42-1.6ZM372.87-2.2L372.87-18.3 376.92-18.3 376.92-0.4Q376.72-0.35 376.17-0.18 375.62 0 375.07 0L375.07 0Q374.07 0 373.47-0.63 372.87-1.25 372.87-2.2L372.87-2.2ZM376.92-30L376.92-12.4 372.87-12.45 372.87-28.2Q372.87-29.2 373.47-29.8 374.07-30.4 375.07-30.4L375.07-30.4Q375.62-30.4 376.17-30.25 376.72-30.1 376.92-30L376.92-30ZM389.02-13.9L375.07-13.9 375.07-17.3 390.12-17.3Q390.27-17.1 390.42-16.65 390.57-16.2 390.57-15.7L390.57-15.7Q390.57-14.9 390.17-14.4 389.77-13.9 389.02-13.9L389.02-13.9ZM390.82 0L375.07 0 375.07-3.4 391.92-3.4Q392.07-3.2 392.22-2.78 392.37-2.35 392.37-1.8L392.37-1.8Q392.37-1 391.97-0.5 391.57 0 390.82 0L390.82 0ZM390.57-26.95L375.07-26.95 375.07-30.4 391.67-30.4Q391.82-30.2 391.97-29.75 392.12-29.3 392.12-28.8L392.12-28.8Q392.12-28 391.72-27.48 391.32-26.95 390.57-26.95L390.57-26.95Z"/>
+        </svg>
+      </g>
+    </svg>
+  </g>
+  <g transform="matrix(1,0,0,1,448,0)">
+    <svg viewBox="0 0 64 64" width="64" height="64">
+      <g>
+        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="15.509999999999998 5 64.98000000000002 90">
+          <path fill="#ffffff" d="M49.948 5c-9.011 0-17.417 3.197-23.667 9.004-7.046 6.548-10.771 15.858-10.771 26.922 0 19.274 31.807 52.126 33.161 53.515 0.347 0.356 0.823 0.557 1.32 0.559h0.005c0.496 0 0.971-0.199 1.318-0.552 1.355-1.374 33.176-33.866 33.176-53.522C84.49 17.341 67.115 5 49.948 5m0.056 85.466c-6.047-6.46-30.79-33.85-30.79-49.54 0-10.008 3.317-18.379 9.588-24.208 5.563-5.168 13.073-8.015 21.146-8.015 14.853 0 30.839 10.084 30.839 32.223 0 16.003-24.725 43.133-30.783 49.54"/>
+          <path fill="#ffffff" d="M50 19.491c-10.019 0-18.171 8.152-18.171 18.171S39.981 55.833 50 55.833s18.171-8.152 18.171-18.171S60.019 19.491 50 19.491m0 32.638c-7.977 0-14.467-6.49-14.467-14.467S42.023 23.195 50 23.195c7.979 0 14.467 6.49 14.467 14.467S57.979 52.129 50 52.129"/>
+        </svg>
+      </g>
+    </svg>
+  </g>
+</svg>

package/src/assets/styles.scss

@@ -1,20 +1,443 @@
-@import 'vuetify/styles';
-@import 'intro.js/introjs.css';
+@use 'palette' as palette;
+@use 'settings' as settings;
+@use 'vuetify';
 
-.v-overlay {
-  z-index: 3400 !important;
+@include palette.util-classes('shark', palette.$shark);
+@include palette.util-classes('minsk', palette.$minsk);
+@include palette.util-classes('picton', palette.$picton);
+@include palette.util-classes('malachite', palette.$malachite);
+@include palette.util-classes('lightning', palette.$lightning);
+@include palette.util-classes('amaranth', palette.$amaranth);
+
+html {
+  overflow: hidden;
 }
 
-.introjs-tooltipReferenceLayer {
-  z-index: 3401;
+.material-symbols-filled {
+  // Used for 'filled' icon set
+  font-variation-settings: 'FILL' 1;
 }
 
-.introjs-overlay,
-.introjs-helperLayer {
-  pointer-events: none;
-  z-index: 3401;
+@mixin slider-dot {
+  content: url("@/assets/images/dot.svg");
+  width: 4px;
+  height: 4px;
+  position: absolute;
+  top: -6.5px;
 }
 
-.introjs-dontShowAgain {
-  display: none;
+.new-style {
+  --md: 12px !important;
+  --xxl: 24px !important;
+  --xxxxl: 48px !important;
+  --base: 8px !important;
+
+  .sh-label {
+    @extend .text-xs-semibold;
+    color: rgb(var(--v-theme-text)) !important;
+  }
+
+  .v-input, .v-otp-input {
+    .v-input__details {
+      padding-inline: 0;
+      margin-top: 2px;
+
+      .v-messages {
+        color: rgb(var(--v-theme-amaranth_700)) !important;
+      }
+    }
+
+    .v-field {
+      opacity: 1 !important;
+      background-color: rgb(var(--v-theme-surface));
+
+      input {
+        line-height: 1.5;
+        font-size: 16px !important;
+      }
+
+      .v-field__outline {
+        color: map-get(palette.$shark, 200) !important;
+        --v-field-border-width: 1px !important;
+        --v-field-border-opacity: 1 !important;
+      }
+    }
+
+    .v-field:hover:not(.v-field--focused):not(.v-field--error) {
+      .v-field__outline {
+        opacity: 1 !important;
+        color: rgb(var(--v-theme-minsk_900)) !important;
+        --v-field-border-width: 1px !important;
+      }
+    }
+
+    .v-field--focused {
+      .v-field__outline {
+        opacity: 1 !important;
+        --dynamic-color: rgb(var(--v-theme-primary)) !important;
+        --ring-color: rgb(var(--v-theme-minsk_200)) !important;
+        color: var(--dynamic-color) !important;
+        --v-field-border-width: 1px !important;
+      }
+    }
+
+    .v-field--error {
+      .v-field__outline {
+        opacity: 1 !important;
+        --dynamic-color: rgb(var(--v-theme-amaranth_500)) !important;
+        --ring-color: rgb(var(--v-theme-amaranth_200)) !important;
+        color: var(--dynamic-color) !important;
+        --v-field-border-width: 1px !important;
+      }
+    }
+
+    .v-field--error:hover {
+      .v-field__outline {
+        opacity: 1 !important;
+        --dynamic-color: rgb(var(--v-theme-amaranth_700)) !important;
+        --ring-color: rgb(var(--v-theme-amaranth_200)) !important;
+        color: var(--dynamic-color) !important;
+        --v-field-border-width: 1px !important;
+      }
+    }
+
+    &:not(.hide-ring) .v-field--error .v-field__outline,
+    &:not(.hide-ring) .v-field--focused .v-field__outline {
+      box-shadow: 0 0 0 4px var(--ring-color);
+    }
+  }
+
+  .v-checkbox .v-selection-control {
+    --v-input-control-height: 36px;
+  }
+}
+
+// TODO: Dark Slider
+.v-range-slider.v-input--horizontal, .v-slider.v-input--horizontal {
+  & {
+    margin-inline: 0 !important;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  .v-slider-thumb {
+    & {
+      transform: translateX(10%) translateY(-50%) !important;
+      background-color: var(--thumbBackgroundColor, #F7F7F8);
+      width: 14px;
+      height: 44px;
+    }
+
+    .v-slider-thumb__surface {
+      border-radius: 4px;
+      box-shadow: none !important;
+      width: 2px;
+      height: 44px;
+      position: relative;
+      transform: translateX(6px);
+      background-color: map-get(palette.$minsk, 500);
+    }
+
+    .v-slider-thumb__surface::before, .v-slider-thumb__ripple {
+      display: none;
+    }
+
+    .v-slider-thumb__label {
+      & {
+        @extend .text-center;
+        @extend .text-sm-semibold;
+        border-radius: var(--lg, 16px);
+        background: map-get(palette.$minsk, 200);
+        padding: var(--md, 12px) 8px;
+        color: map-get(palette.$minsk, 900);
+        bottom: calc(var(--v-slider-thumb-size) / 3) !important;
+      }
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .v-slider-track__background, .v-slider-track__fill {
+    height: 16px !important;
+  }
+
+  .v-slider-track__fill {
+    & {
+      background-color: map-get(palette.$minsk, 500);
+      border-radius: 4px;
+      margin-left: 6px;
+    }
+
+    &::after {
+      @include slider-dot;
+      left: 50%;
+      transform: translate(-195%, -50%);
+      // https://codepen.io/sosuke/pen/Pjoqqp
+      filter: invert(76%) sepia(30%) saturate(342%) hue-rotate(192deg) brightness(106%) contrast(98%);
+    }
+  }
+
+  .v-slider-track__background {
+    & {
+      border-radius: 12px;
+      background-color: #ccccd0;
+      opacity: 1 !important;
+    }
+
+    &::before, &::after {
+      @include slider-dot;
+      transform: translate(-50%, -50%);
+      // https://codepen.io/sosuke/pen/Pjoqqp
+      filter: invert(38%) sepia(5%) saturate(1118%) hue-rotate(202deg) brightness(92%) contrast(89%);
+    }
+
+    &::before {
+      left: 8px;
+    }
+
+    &::after {
+      right: 4px;
+    }
+  }
+}
+
+.v-slider.v-input--vertical {
+  & {
+    margin-inline: 0 !important;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  .v-input__control {
+    /* https://github.com/vuetifyjs/vuetify/issues/18813 */
+    min-height: 0 !important;
+    flex: 1 1 auto !important;
+  }
+
+  .v-slider-thumb {
+    & {
+      transform: translateX(10%) translateY(-50%) !important;
+      background-color: var(--thumbBackgroundColor, #F7F7F8);
+      width: 44px;
+      height: 14px;
+    }
+
+    .v-slider-thumb__surface {
+      border-radius: 4px;
+      box-shadow: none !important;
+      width: 44px;
+      height: 2px;
+      position: relative;
+      transform: translateY(6px) translateX(-5px);
+      background-color: #C9D7FC;
+    }
+
+    .v-slider-thumb__surface::before, .v-slider-thumb__ripple {
+      display: none;
+    }
+
+    .v-slider-thumb__label {
+      & {
+        @extend .text-center;
+        @extend .text-sm-semibold;
+        border-radius: var(--lg, 16px);
+        background: var(--Primary-200, #C9D7FC);
+        color: var(--Primary-900, #2E3176);
+        min-height: 44px;
+        left: -22px;
+        top: -22px;
+      }
+
+      div {
+        padding: var(--md, 12px) 8px !important;
+      }
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .v-slider-track__background, .v-slider-track__fill {
+    width: 16px !important;
+  }
+
+  .v-slider-track__fill {
+    & {
+      background-color: #C9D7FC;
+      border-radius: 0px 0px 12px 12px;
+    }
+
+    &::after {
+      @include slider-dot;
+      bottom: 20px;
+      left: 6.2px;
+      top: unset;
+      // https://codepen.io/sosuke/pen/Pjoqqp
+      filter: invert(16%) sepia(44%) saturate(2660%) hue-rotate(222deg) brightness(89%) contrast(92%);
+
+    }
+  }
+
+  .v-slider-track__background {
+    & {
+      border-radius: 12px;
+      background-color: #3A3A40;
+      opacity: 1 !important;
+    }
+
+    &::before, &::after {
+      @include slider-dot;
+      transform: translate(-50%, -50%);
+      // https://codepen.io/sosuke/pen/Pjoqqp
+      filter: invert(80%) sepia(45%) saturate(382%) hue-rotate(190deg) brightness(101%) contrast(98%);
+    }
+
+    &::before {
+      left: 8px;
+    }
+
+    &::after {
+      right: 4px;
+    }
+  }
+}
+
+.v-btn {
+  &.v-btn--variant-outlined {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+
+  .v-btn__prepend {
+    margin-inline-end: 8px !important;
+
+    .v-icon {
+      --v-icon-size-multiplier: 1 !important;
+    }
+  }
+}
+
+.v-btn-toggle {
+  .v-btn {
+    color: map-get(palette.$minsk, 900) !important;
+  }
+
+  .v-btn--active {
+    background-color: map-get(palette.$minsk, 200) !important;
+  }
+}
+
+.v-list {
+  @extend .pa-2;
+
+  &:not(.no-hover) {
+    .v-list-item {
+      transition: background-color 0.3s ease;
+      border-radius: 8px !important;
+
+      &:hover {
+        background-color: map-get(palette.$minsk, 50) !important;
+      }
+    }
+  }
+}
+
+.v-list-item-title {
+  color: map-get(palette.$shark, 900);
+}
+
+.v-list-item-subtitle {
+  color: map-get(palette.$shark, 600);
+}
+
+.v-tabs {
+  border-radius: 8px !important;
+
+  .v-slide-group__next, .v-slide-group__prev {
+    display: none;
+  }
+
+  .v-slide-group__container {
+    background: map-get(palette.$minsk, 100) !important;
+
+    .v-btn {
+      border-radius: 4px !important;
+      height: auto !important;
+      margin: 6px !important;
+      min-width: 64px !important;
+
+      & ~ .v-btn {
+        margin-left: 0 !important;
+        margin-right: 6px !important;
+      }
+
+      .v-btn__content {
+        color: rgb(var(--v-theme-primary)) !important;
+        text-align: center !important;
+      }
+    }
+
+
+    .v-tab-item--selected {
+      background: rgb(var(--v-theme-surface)) !important;
+      box-shadow: 0 1px 3px 0 rgba(29, 29, 73, 0.1),
+      0 1px 2px -1px rgba(29, 29, 73, 0.1) !important;
+
+      .v-btn__content {
+        color: map-get(palette.$minsk, 900) !important;
+      }
+    }
+  }
+}
+
+.v-tabs.vertical_squash {
+  .v-slide-group__container {
+    background: map-get(palette.$minsk, 100) !important;
+
+    .v-btn {
+      padding: 0 !important;
+      border-radius: 4px !important;
+      height: auto !important;
+      margin: 6px !important;
+      min-width: 0px !important;
+      min-height: 36px !important;
+
+      .v-btn__content {
+        color: rgb(var(--v-theme-primary)) !important;
+        text-align: center !important;
+        margin: auto;
+      }
+    }
+
+    .v-tab-item--selected {
+      background: rgb(var(--v-theme-surface)) !important;
+      box-shadow: 0 1px 3px 0 rgba(29, 29, 73, 0.1),
+      0 1px 2px -1px rgba(29, 29, 73, 0.1) !important;
+
+      .v-btn__content {
+        color: map-get(palette.$minsk, 900) !important;
+      }
+    }
+  }
+}
+
+.v-overlay__scrim, .v-navigation-drawer__scrim {
+  opacity: 1 !important;
+  background-color: rgba(31, 31, 55, 0.90) !important;
+  backdrop-filter: blur(20px) !important;
+}
+
+.isModal {
+  background-color: rgba(31, 31, 55, 0.9);
+
+  .title-display {
+    color: rgb(var(--v-theme-surface));
+  }
+
+  .display {
+    font-weight: 600;
+    color: map-get(palette.$shark, 300);
+  }
 }

package/src/components/ShFlatIconBtn.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="new-style py-0">
+    <v-btn
+      data-testid="button"
+      variant="flat"
+      class="share-btn mt-2 mx-0 px-2"
+      v-bind="attrs"
+      min-height="0"
+      :v-slot="slots"
+    >
+      <v-icon v-if="icon" data-testid="icon" color="minsk_500" :icon="icon" size="20" class="mr-1" />
+      {{ text }}
+      <template v-for="(_, name) in slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="{ ...slotData }"></slot>
+      </template>
+    </v-btn>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAttrs, useSlots } from 'vue';
+
+interface Props {
+  icon?: string | undefined;
+  text: string;
+  id?: string | undefined;
+}
+
+withDefaults(defineProps<Props>(), {
+  id: `${Math.random() * 10000}`,
+  icon: undefined
+});
+
+const attrs = useAttrs();
+const slots = useSlots();
+</script>

package/src/components/ShPlainIconBtn.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="new-style py-0">
+    <v-btn
+      data-testid="button"
+      variant="plain"
+      color="minsk_900"
+      base-color="white"
+      :border="props.border && 'sm'"
+      class="share-btn mt-2 mx-0"
+      v-bind="attrs"
+      :class="!props.border && 'px-2'"
+      min-height="0"
+      :v-slot="slots"
+    >
+      <v-icon v-if="icon" data-testid="icon" color="minsk_500" size="20" :icon="icon" class="mr-1" />
+      {{ text }}
+      <template v-for="(_, name) in slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="{ ...slotData }"></slot>
+      </template>
+    </v-btn>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAttrs, useSlots } from 'vue';
+
+interface Props {
+  icon?: string | undefined;
+  text: string;
+  border?: boolean | undefined;
+  id?: string | undefined;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: `${Math.random() * 10000}`,
+  border: false,
+  icon: undefined
+});
+
+const attrs = useAttrs();
+const slots = useSlots();
+</script>

package/src/components/ShSelect.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="new-style py-0">
+    <label v-if="label !== false" class="pl-0 pb-1 sh-label" :for="props.id" data-testid="label">
+      {{ props.label }}
+    </label>
+    <v-select
+      :ref="childRef"
+      :list-props="{ class: 'pa-2' }"
+      class="pt-1 my-select"
+      variant="outlined"
+      density="comfortable"
+      clearable
+      menu-icon="keyboard_arrow_down"
+      v-bind="{ ...attrs, ...slots }"
+      :v-slot="slots"
+    >
+      <template v-for="(_, name) in slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="slotData"></slot>
+      </template>
+    </v-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAttrs, useSlots } from 'vue';
+
+interface Props {
+  label: string | boolean;
+  id?: string | undefined;
+  childRef?: string | undefined;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Label',
+  id: `${Math.random() * 10000}`
+});
+
+const attrs = useAttrs();
+const slots = useSlots();
+</script>
+
+<style lang="scss">
+.v-select {
+  .v-select__menu-icon {
+    color: rgba(104, 117, 236, 1);
+  }
+}
+</style>

package/src/components/ShTextField.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="new-style py-1">
+    <label v-if="label !== false" class="pl-0 pb-2 sh-label" :for="props.id" data-testid="label">
+      {{ props.label }}</label
+    >
+    <v-text-field
+      :ref="childRef"
+      class="pt-2"
+      bg-color="white"
+      variant="outlined"
+      density="comfortable"
+      clearable
+      v-bind="{ ...attrs, ...slots }"
+      :v-slot="slots"
+    >
+      <template v-for="(_, name) in slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="slotData"></slot>
+      </template>
+    </v-text-field>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAttrs, useSlots } from 'vue';
+
+interface Props {
+  label: string | boolean;
+  id?: string | undefined;
+  childRef?: string | undefined;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Label',
+  id: `${Math.random() * 10000}`
+});
+
+const attrs = useAttrs();
+const slots = useSlots();
+</script>

package/src/components/ShTextarea.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="new-style py-1">
+    <label v-if="label !== false" class="pl-0 pb-2 sh-label" :for="props.id" data-testid="label">
+      {{ props.label }}</label
+    >
+    <v-textarea
+      :ref="childRef"
+      class="pt-2"
+      bg-color="white"
+      variant="outlined"
+      density="comfortable"
+      clearable
+      v-bind="{ ...attrs, ...slots }"
+      :v-slot="slots"
+    >
+      <template v-for="(_, name) in slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="slotData"></slot>
+      </template>
+    </v-textarea>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAttrs, useSlots } from 'vue';
+
+interface Props {
+  label: string | boolean;
+  id?: string | undefined;
+  childRef?: string | undefined;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Label',
+  id: `${Math.random() * 10000}`
+});
+
+const attrs = useAttrs();
+const slots = useSlots();
+</script>