slicejs-web-framework 1.0.5 → 1.0.7

package/src/Components/Visual/Input/Input.css

@@ -0,0 +1,91 @@
+.eye {
+  color: var(--primary-color);
+  position: absolute;
+  user-select: none;
+  cursor: pointer;
+  right: 10px;
+}
+.input_area::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.input_area {
+  color: var(--font-primary-color);
+  width: 100%;
+  background: none;
+  outline: none;
+  border: none;
+}
+.slice_input {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  max-width: 100%;
+  border-radius: var(--border-radius-slice);
+  font-family: var(--font-family);
+  border: var(--slice-border) solid var(--primary-color);
+  background-color: var(--primary-background-color);
+  margin-bottom: 25px;
+  margin-top: 25px;
+  position: relative;
+}
+.slice_input_placeholder {
+  color: var(--primary-color);
+  position: absolute;
+  transition: all 0.5s;
+  user-select: none;
+}
+.slice_input_value {
+  scale: 0.8;
+  transform: translateY(-200%);
+  transition: all 0.5s;
+}
+.required,
+.required label,
+.required input {
+  border-color: var(--danger-color);
+  --primary-color: var(--danger-color);
+}
+
+.disabled,
+.disabled label {
+  border-color: var(--disabled-color);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: var(--disabled-color);
+  div {
+    background-color: var(--primary-color-shade);
+  }
+}
+.color_input {
+  border-radius: 100%;
+  height: 50px;
+  width: 50px;
+}
+.message {
+  color: var(--danger-color);
+  font-size: small;
+}
+
+@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px) rotate(0.5deg);
+  }
+  50% {
+    transform: translateX(5px) rotate(-0.5deg);
+  }
+  75% {
+    transform: translateX(-3px) rotate(0.3deg);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.error {
+  --primary-color: var(--danger-color);
+  animation: shake 0.5s infinite; /* Establece la animación y su duración */
+}

package/src/Components/Visual/Input/Input.html

@@ -0,0 +1,4 @@
+<div class="slice_input">
+  <label class="slice_input_placeholder"></label>
+  <input class="input_area" type="text" />
+</div>

package/src/Components/Visual/Input/Input.js

@@ -0,0 +1,215 @@
+export default class Input extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+      this.$inputContainer = this.querySelector('.slice_input');
+      this.$input = this.querySelector('.input_area');
+      this.$placeholder = this.querySelector('.slice_input_placeholder');
+
+      this.$inputContainer.addEventListener('click', () => {
+         this.$input.focus(); // Hacer que el input obtenga el foco al hacer clic en el contenedor
+      });
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = ['value', 'placeholder', 'type', 'required', 'conditions', 'disabled', 'secret'];
+   }
+
+   get placeholder() {
+      return this._placeholder;
+   }
+
+   set placeholder(value) {
+      this._placeholder = value;
+      this.$placeholder.textContent = value;
+   }
+
+   get value() {
+      return this.$input.value;
+   }
+
+   set value(value) {
+      if (value) {
+         this._value = value;
+         this.$input.value = value;
+         this.$placeholder.classList.add('slice_input_value');
+      } else {
+         this.$placeholder.classList.remove('slice_input_value');
+         this.$input.value = '';
+      }
+   }
+
+   get type() {
+      return this._type;
+   }
+
+   set type(value) {
+      const allowedTypes = ['text', 'password', 'email', 'number', 'date'];
+
+      if (!allowedTypes.includes(value)) {
+         throw new Error(`This type is not allowed: ${value}`);
+      }
+
+      this._type = value;
+      this.$input.type = value;
+      if (value === 'date') {
+         this.$placeholder.classList.add('slice_input_value');
+      }
+   }
+
+   get required() {
+      return this._required;
+   }
+
+   set required(boolean) {
+      this._required = boolean;
+      this.$input.required = boolean;
+   }
+
+   get disabled() {
+      return this._disabled;
+   }
+
+   set disabled(boolean) {
+      this._disabled = boolean;
+      this.$input.disabled = boolean;
+      if (boolean) {
+         this.$inputContainer.classList.add('disabled');
+      } else {
+         this.$inputContainer.classList.remove('disabled');
+      }
+   }
+
+   get secret() {
+      return this._secret;
+   }
+
+   set secret(boolean) {
+      this._secret = boolean;
+      if (boolean) {
+         this.$input.type = 'password';
+         if (!this.querySelector('.eye')) {
+            const reveal = document.createElement('label');
+
+            const eyeSlash = `<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+            <path stroke="var(--primary-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.933 13.909A4.357 4.357 0 0 1 3 12c0-1 4-6 9-6m7.6 3.8A5.068 5.068 0 0 1 21 12c0 1-3 6-9 6-.314 0-.62-.014-.918-.04M5 19 19 5m-4 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
+          </svg>`;
+            const eye = `<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+            <path stroke="var(--primary-color)" stroke-width="1.5" d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"/>
+            <path stroke="var(--primary-color)" stroke-width="1.5" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
+          </svg>`;
+
+            reveal.classList.add('eye');
+            reveal.innerHTML = eye;
+            reveal.addEventListener('click', () => {
+               if (this.$input.type === 'password') {
+                  this.$input.type = 'text';
+                  reveal.innerHTML = eyeSlash;
+               } else {
+                  this.$input.type = 'password';
+                  reveal.innerHTML = eye;
+               }
+            });
+            this.$inputContainer.appendChild(reveal);
+         } else {
+            this.querySelector('.eye').remove();
+         }
+      }
+   }
+
+   get conditions() {
+      return this._conditions;
+   }
+
+   set conditions(value) {
+      const {
+         regex = '',
+         minLength = 0,
+         maxLength = '',
+         minMinusc = 0,
+         maxMinusc = '',
+         minMayusc = 0,
+         maxMayusc = '',
+         minNumber = 0,
+         maxNumber = '',
+         minSymbol = 0,
+         maxSymbol = '',
+      } = value;
+
+      let regexPattern = '';
+
+      if (regex !== '') {
+         regexPattern = regex;
+      } else {
+         regexPattern =
+            `^(?=.*[a-z]{${minMinusc},${maxMinusc}})` +
+            `(?=.*[A-Z]{${minMayusc},${maxMayusc}})` +
+            `(?=.*\\d{${minNumber},${maxNumber}})` +
+            `(?=.*[\\W$]{${minSymbol},${maxSymbol}})` +
+            `.{${minLength},${maxLength}}$`;
+      }
+
+      this._conditions = new RegExp(regexPattern);
+   }
+
+   init() {
+      if (!this.type) {
+         this.type = 'text';
+      }
+
+      if (!this.disabled) {
+         this._disabled = false;
+      }
+
+      if (!this.required) {
+         this._required = false;
+      }
+
+      this.$input.addEventListener('input', () => {
+         this.update();
+      });
+   }
+
+   update() {
+      if (this.$input.value !== '' || !undefined) {
+         if (this.$input.value !== '') {
+            this.$placeholder.classList.add('slice_input_value');
+            this.triggerSuccess();
+         } else {
+            this.$placeholder.classList.remove('slice_input_value');
+            if (this.required) {
+               this.triggerError();
+            }
+         }
+      }
+   }
+
+   validateValue() {
+      if (this._conditions && !this._conditions.test(this.$input.value)) {
+         this.triggerError();
+         return false;
+      }
+      this.triggerSuccess();
+      return true;
+   }
+
+   clear() {
+      if (this.$input.value !== '') {
+         this.$input.value = '';
+         this.$placeholder.className = 'slice_input_placeholder';
+      }
+   }
+
+   triggerSuccess() {
+      this.$inputContainer.classList.remove('required');
+   }
+
+   triggerError() {
+      this.$inputContainer.classList.add('error');
+      this.$inputContainer.classList.add('required');
+      setTimeout(() => {
+         this.$inputContainer.classList.remove('error');
+      }, 500);
+   }
+}
+
+customElements.define('slice-input', Input);

package/src/Components/Visual/Layout/Layout.js

@@ -0,0 +1,49 @@
+export default class Layout extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = [];
+      this.currentView = null;
+   }
+
+   async init() {
+      if (this.layout) {
+         await this.onLayOut(this.layout);
+      }
+      if (this.view) {
+         await this.showing(this.view);
+      }
+   }
+
+   get layout() {
+      return this._layout;
+   }
+
+   set layout(value) {
+      this._layout = value;
+   }
+
+   get view() {
+      return this._view;
+   }
+
+   set view(value) {
+      this._view = value;
+   }
+
+   async showing(view) {
+      if (this.currentView) {
+         this.removeChild(this.currentView);
+      }
+      this.appendChild(view);
+      this.currentView = view;
+   }
+
+   async onLayOut(view) {
+      this.appendChild(view);
+   }
+}
+
+customElements.define('slice-layout', Layout);

package/src/Components/Visual/Loading/Loading.css

@@ -0,0 +1,56 @@
+.pizza-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: 499;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.slice_logo {
+  animation: spin 0.1s linear infinite;
+  height: 50px;
+  width: 50px;
+  position: absolute;
+
+  path {
+    fill: var(--primary-color);
+  }
+}
+
+.full-screen {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(90, 90, 90, 0.5);
+  z-index: 500;
+}

package/src/Components/Visual/Loading/Loading.html

@@ -0,0 +1,83 @@
+<div class="full-screen">
+  <div class="pizza-container center-screen">
+    <svg
+      class="slice_logo"
+      width="916"
+      height="914"
+      viewBox="0 0 916 914"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        opacity="0.5"
+        d="M650 803.2C649.2 803.9 648.7 804.1 648.8 803.8C648.8 803.4 644.5 805.3 639.2 808C633.9 810.6 625.7 814.6 621 816.8C616.3 818.9 609.4 822 605.5 823.5C601.6 825 594.2 827.8 589 829.7C583.8 831.7 572.5 835.2 564 837.7C555.5 840.1 546.5 842.5 544 843.1C541.5 843.6 533.4 845.1 526 846.4C518.6 847.7 510.9 849.1 509 849.4C507.1 849.7 500.5 850.4 494.5 851C488.5 851.6 469.8 852 453 851.9C436.2 851.8 419.8 851.4 416.5 851C413.2 850.5 404.4 849.2 397 848C389.6 846.9 382.6 845.8 381.5 845.6C380.4 845.4 375.2 844.2 370 843.1C364.8 841.9 358.7 840.4 356.5 839.8C354.3 839.2 344.2 836 334 832.7C323.8 829.4 313.5 825.8 311 824.7C308.5 823.6 305.1 822.2 303.5 821.5C301.9 820.8 297.4 818.8 293.5 817C289.6 815.3 281.7 811.4 275.7 808.4C269.8 805.4 264.9 803.1 264.7 803.2C264.5 803.4 262.9 805.9 261.2 808.7C259.4 811.6 258 814.2 258 814.5C258 814.8 256.5 817.4 254.7 820.2C252.8 823.1 250 828 248.3 831C246.7 834 244.4 838.1 243.3 840C242.2 841.9 239.9 846.1 238.2 849.2C236.4 852.4 235.2 855.7 235.5 856.5C235.8 857.3 241.7 860.7 248.8 864.1C255.8 867.5 263.7 871.3 266.5 872.7C269.3 874.1 276.7 877.4 283 880C289.3 882.7 300.6 886.9 308 889.4C315.4 891.9 324.9 894.9 329 896.1C333.1 897.2 337.2 898.4 338 898.6C338.8 898.8 342 899.6 345 900.5C348 901.3 357 903.3 365 904.9C373 906.5 381.8 908.1 384.5 908.5C387.3 908.9 389.7 909.3 390 909.5C390.3 909.6 393.2 910 396.5 910.4C399.8 910.7 403.6 911.2 405 911.5C406.4 911.7 410.4 912.2 414 912.6C417.6 912.9 436 913.2 455 913.3C474 913.3 492.6 913 496.5 912.6C500.4 912.2 504.6 911.7 506 911.5C507.4 911.2 511.4 910.8 515 910.4C518.6 910.1 521.7 909.6 522 909.5C522.3 909.3 524.5 908.9 527 908.6C529.5 908.2 532.6 907.7 534 907.5C535.4 907.2 537.6 906.8 539 906.5C540.4 906.2 542.6 905.8 544 905.5C545.4 905.2 547.5 904.7 548.8 904.5C550 904.2 552 903.8 553.3 903.5C554.5 903.3 557.8 902.5 560.5 901.9C563.3 901.3 567.6 900.2 570.3 899.4C572.9 898.6 575.7 898 576.5 898C577.3 898 585.3 895.5 594.3 892.5C603.2 889.5 614.3 885.7 619 884C623.7 882.3 631.1 879.3 635.5 877.3C639.9 875.3 651.9 869.5 662.3 864.4C672.6 859.2 681 854.4 681 853.7C681 853.1 679.6 850 677.9 847C676.2 844 673.5 839.2 672 836.5C670.5 833.7 665.7 825.4 661.5 818C657.2 810.6 653.2 803.9 652.6 803.2C651.7 802.3 651.1 802.2 650 803.2Z"
+        fill="black"
+      />
+      <path
+        opacity="0.2"
+        d="M685.7 71.8C683.3 75.5 676.5 86.8 670.6 97C664.6 107.2 660 115.9 660.3 116.5C660.5 117.1 665.4 120.6 671.1 124.5C676.8 128.3 685.5 134.3 690.5 137.8C695.5 141.3 704.2 148 710 152.7C715.8 157.5 728.6 169.5 738.6 179.4C748.5 189.4 760.2 201.8 764.5 207C768.8 212.2 775.3 220.8 779 226C782.7 231.2 789.3 241.6 793.8 249C798.2 256.4 805.7 269.5 810.4 278C815.2 286.5 821.3 299.2 824 306.2C826.8 313.3 830.8 324.3 833 330.7C835.3 337.2 838.9 349.2 841 357.5C843.2 365.7 846.3 380.6 848 390.5C849.7 400.4 851.8 418.2 852.8 430L854.5 451.5C901.3 451.5 915.1 451.3 915.5 451C915.8 450.7 915.4 440.1 914.5 427.5C913.6 414.9 912.2 400 911.4 394.5C910.6 389 909 379.5 907.9 373.5C906.8 367.4 904.2 355.3 902 346.5C899.9 337.7 896.1 324.2 893.5 316.5C890.9 308.8 886.4 296.4 883.5 289C880.6 281.6 876 270.8 873.3 265C870.6 259.2 863.9 246.6 858.6 237C853.2 227.4 844.6 213.2 839.6 205.5C834.5 197.8 825.6 185.4 819.8 178C814 170.6 804.3 159.1 798.3 152.5C792.3 145.9 782.2 135.5 775.9 129.5C769.6 123.4 758.4 113.4 751 107.2C743.6 101 727.1 88.9 714.5 80.4C701.8 71.9 691.2 65 690.8 65C690.4 65 688.1 68 685.7 71.7V71.8Z"
+        fill="black"
+      />
+      <path
+        opacity="0.4"
+        d="M26.5 462.7C32.5 462.9 42.7 462.9 49 462.7C55.3 462.6 50.4 462.4 38 462.4C25.6 462.4 20.5 462.6 26.5 462.7Z"
+        fill="black"
+      />
+      <path
+        d="M425.8 0.500008C425.6 0.700008 421 1.30001 415.5 1.90001C410 2.50001 403.7 3.20001 401.5 3.50001C399.3 3.80001 394.4 4.50001 390.5 5.10001C386.6 5.70001 382.1 6.50001 380.5 7.00001C378.9 7.50001 375.5 8.20001 373 8.50001C370.5 8.90001 362.2 10.6 354.5 12.5C346.8 14.3 337.1 16.7 333 17.8C328.9 19 320.1 21.8 313.5 24C306.9 26.3 300.1 28.7 298.5 29.5C296.9 30.2 293.2 31.5 290.5 32.5C287.7 33.5 274.1 39.8 260.2 46.6C246.4 53.4 235 59.4 235 60C235 60.6 237.1 64.9 239.6 69.8C242.1 74.6 245.2 80.1 246.5 82C247.7 83.9 252 91.4 256.1 98.6L263.5 111.8C269.7 109.5 275.3 106.9 280 104.5C284.7 102.1 291.4 98.8 295 97.2C298.6 95.5 305.3 92.6 310 90.7C314.7 88.8 323 85.6 328.5 83.7C334 81.7 341.9 79.1 346 77.9C350.1 76.7 353.9 75.5 354.5 75.4C355.1 75.3 359.6 74.2 364.5 73C369.4 71.8 374.4 70.7 375.5 70.4C376.6 70.2 382 69.1 387.5 67.9C393 66.7 403.6 65 411 64C422.5 62.4 430.3 62.2 463 62.4L501.5 62.6C533.3 68.4 546.3 71 551 72.1C555.7 73.3 560.2 74.4 561 74.6C561.8 74.8 565.9 75.9 570 77.1C574.1 78.3 583.1 81.3 590 83.7C596.9 86.2 604.9 89.3 607.7 90.6C610.6 91.9 613.2 93 613.5 93C613.8 93 616.1 93.9 618.7 95.1C621.4 96.2 629.7 100.3 637.2 104.1C644.8 107.9 651.1 110.9 651.3 110.7C651.5 110.6 655 104.7 659.2 97.5C663.4 90.3 667.7 82.9 668.7 81C669.8 79.1 672 75 673.7 72C675.4 69 677.8 64.6 679.1 62.2C680.4 59.9 681.3 57.8 681 57.5C680.7 57.3 676.5 55.1 671.5 52.5C666.5 49.9 662 47.5 661.5 47.1C661 46.6 656.5 44.5 651.5 42.2C646.5 40 640.2 37.2 637.5 36C634.7 34.7 627.4 31.8 621.2 29.4C615.1 27 608.3 24.6 606.2 24C604.2 23.5 599.1 21.9 595 20.5C590.9 19 580.7 16.1 572.5 14C564.2 11.9 549.9 8.80001 540.5 7.10001C531.1 5.50001 521.9 3.90001 520 3.60001C518.1 3.30001 513.6 2.80001 510 2.50001C506.4 2.20001 500.1 1.50001 496 1.00001C491.9 0.500008 474.5 0.100006 457.3 0.100006C440.1 0.200006 426 0.400008 425.8 0.500008Z"
+        fill="black"
+      />
+      <path
+        opacity="0.7"
+        d="M30.8 462.8L1.00002 463C0.700015 468 0.700012 470.4 0.700012 471.5C0.700012 472.6 1.10002 479.4 1.40002 486.5C1.80002 493.7 2.80002 504.9 3.50002 511.5C4.30002 518.1 6.10002 529.8 7.50002 537.5C8.90002 545.2 11.8 558.7 14 567.5C16.1 576.3 19.5 588.2 21.4 594C23.3 599.8 25.9 607.7 27.3 611.5C28.7 615.4 31.7 623.2 34 629C36.2 634.8 41.2 645.8 45 653.5C48.7 661.2 55.1 673.1 59 680C62.9 686.9 67.2 694.1 68.4 696C69.6 697.9 74.2 704.9 78.6 711.4C82.9 717.9 87.2 724.2 88 725.4C88.8 726.6 94.6 734 101 741.9C107.3 749.9 119.7 763.8 128.5 772.8C137.3 781.9 150.6 794.5 158 800.9C165.5 807.3 174.5 814.7 178 817.3C181.6 819.9 188.3 824.8 193 828.2C197.7 831.5 202.2 834.5 203 834.8C203.8 835.1 209 838.5 214.5 842.2C220 846 224.8 849 225.3 849C225.7 849 228.2 845.5 230.9 841.3C233.5 837 236.8 831.5 238.2 829C239.6 826.5 242.1 822.3 243.7 819.5C245.3 816.8 247.9 812.3 249.5 809.5C251.1 806.8 253.1 802.9 254.1 801L255.9 797.5C251.8 794.4 247.5 791.4 243.6 788.8C239.7 786.1 232.7 781.3 228 778.1C223.3 774.8 216.6 769.9 213 767.1C209.4 764.3 205.8 761.4 205 760.7C204.2 759.9 200.8 757 197.5 754.1C194.2 751.2 185.2 742.6 177.5 735C169.8 727.4 162.2 719.6 160.6 717.8C159 716 152.2 707.7 145.6 699.3C138.9 691 131.9 681.5 129.8 678.3C127.8 675.1 123.8 668.5 121 663.5C118.1 658.6 114.8 652.9 113.7 651C112.6 649.1 110.5 645.3 108.9 642.5C107.4 639.8 104 633.5 101.3 628.5C98.7 623.6 95.2 616.1 93.6 612C92 607.9 90.2 603.2 89.5 601.5C88.8 599.9 86.9 594.9 85.2 590.5C83.6 586.1 80.4 576.2 78.2 568.5C76 560.8 73 549.3 71.6 543C70.2 536.7 68.3 527 67.4 521.5C66.6 516 65.7 510.2 65.5 508.5C65.3 506.9 64.7 501.2 64.1 496C63.5 490.8 62.8 481.8 62.4 476C62.1 470.2 61.7 465 61.6 464.3C61.6 463.7 61.3 463 61 462.8C60.7 462.7 47.1 462.6 30.8 462.8Z"
+        fill="black"
+      />
+      <path
+        opacity="0.5"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M94.5 462.3C98.3 462.3 99.7 462.5 97.5 462.7C95.3 462.9 92.2 462.9 90.5 462.7C88.8 462.5 90.7 462.3 94.5 462.3ZM385 462.4C399.6 462.4 405.4 462.6 398 462.7C390.6 462.9 378.6 462.9 371.5 462.7C364.4 462.6 370.4 462.4 385 462.4ZM458.8 469C459.2 469 460 469.8 460.6 470.7C461.2 471.7 468.7 484.4 477.2 499C485.7 513.6 493.8 527.5 495.2 530C496.6 532.5 499.1 536.8 500.7 539.5C502.3 542.3 504.8 546.5 506.2 549C507.6 551.5 509.6 555.1 510.7 557C511.8 558.9 516.6 567 521.2 575C525.9 583 531.8 593 534.3 597.3C536.9 601.5 539 605.2 539 605.5C539 605.8 540.7 608.8 542.8 612.3C545 615.7 547.8 620.5 549.2 623C550.6 625.5 556 634.9 561.2 644C566.5 653.1 571.7 662.2 572.9 664.3C574 666.3 576 669.7 577.1 671.8C578.3 673.8 580.4 677.5 581.8 680C583.1 682.5 585.5 686.5 587 689C588.5 691.5 599.2 709.9 610.8 730C622.3 750.1 633.4 769.4 635.4 773C637.4 776.6 640.5 782.3 642.3 785.7C645.1 791.1 645.3 792 644 793.2C643.2 794 634.9 798.4 625.5 803.1C616.1 807.8 604.7 813.1 600 814.8C595.3 816.5 587.9 819.3 583.5 821C579.1 822.7 572.4 824.9 568.5 826C564.6 827 556.3 829.2 550 830.9C543.7 832.5 532.4 835 525 836.4C517.6 837.8 509.2 839.2 506.5 839.5C503.7 839.8 497.9 840.5 493.5 840.9C489.1 841.4 472.7 841.8 457 841.8C435.2 841.8 424.6 841.4 412 839.9C402.9 838.9 391.9 837.3 387.5 836.4C383.1 835.5 377.7 834.4 375.5 834C373.3 833.5 367.7 832.2 363 831C358.3 829.8 352.2 828.2 349.5 827.3C346.7 826.5 339.1 824 332.5 821.7C325.9 819.5 316.9 816.2 312.5 814.3C308.1 812.5 303.1 810.3 301.5 809.6C299.9 808.9 292.3 805.3 284.7 801.6C277.2 798 271 794.4 271 793.8C271 793.1 273 788.9 275.4 784.5C277.8 780.1 281.2 773.8 283 770.5C284.8 767.2 292.6 753.5 300.3 740C308 726.5 315.2 713.9 316.3 712C317.4 710.1 319.7 706 321.3 703C323 700 325.5 695.7 326.8 693.5C328.2 691.3 330.2 687.9 331.3 686C332.4 684.1 334.4 680.5 335.8 678C337.2 675.5 340 670.7 342.2 667.3C344.3 663.8 346 660.8 346 660.5C346 660.2 347.2 658.1 348.7 655.8C350.1 653.4 352.2 650 353.2 648.3C354.2 646.5 356 643.3 357.1 641.3C358.3 639.2 360.4 635.5 361.8 633C363.2 630.5 365.8 626.1 367.7 623.3C369.5 620.4 371 617.9 371 617.8C371 617.6 373.4 613.2 376.3 608C379.3 602.8 385.4 592.2 390 584.5C394.5 576.8 399.1 568.9 400.3 567C401.4 565.1 403.3 561.7 404.5 559.5C405.8 557.3 411.2 548.1 416.5 539C421.9 529.9 427.4 520.5 428.7 518C430.1 515.5 433.5 509.7 436.3 505C439.1 500.3 442.3 494.9 443.5 493C444.7 491.1 446.7 487.7 448 485.5C449.3 483.3 452.1 478.7 454.2 475.3C456.4 471.8 458.5 469 458.8 469ZM460.5 591.8C457.7 593.9 453.8 597.8 451.7 600.5C449.7 603.3 447.3 607.8 446.5 610.5C445.7 613.3 445 619.1 445 623.5C445 630.2 445.5 632.5 447.9 637.5C449.4 640.8 452.9 645.7 455.6 648.4C458.3 651.1 462.7 654.4 465.5 655.8C469.5 657.9 472.3 658.5 480 658.8C487 659.2 490.8 658.8 494.5 657.7C497.2 656.8 502.2 653.9 505.4 651.3C509.8 647.7 512.3 644.7 514.9 639.6C518.4 633 518.5 632.3 518.5 622.1C518.5 613 518.2 610.8 516.1 606.5C514.8 603.8 511.6 599.3 509.1 596.7C506.6 594 502.5 590.7 500 589.2C496.1 586.9 494 586.5 484.6 586C477.5 585.7 472.3 585.9 469.6 586.7C467.4 587.4 463.2 589.7 460.5 591.8ZM375.5 677C373.9 677.6 370.4 679.8 367.7 681.8C365.1 683.8 361.5 687.5 359.6 690C357.7 692.5 355.5 696.8 354.5 699.5C353.4 702.7 352.8 707.5 352.9 713C352.9 720.3 353.4 722.4 355.8 727.5C357.4 730.8 360.3 735.3 362.2 737.5C364.1 739.7 368.6 743.1 372.1 745C378.4 748.4 378.7 748.5 390 748.5C401.1 748.5 401.7 748.4 407 745.3C410 743.5 414.4 740.2 416.8 737.8C419.2 735.4 422.3 731 423.8 728C425.9 723.7 426.6 720.7 426.9 714C427.2 707.1 426.8 704.4 425 699.5C423.8 696.2 421.2 691.5 419.2 689C417.2 686.5 414.6 683.7 413.5 682.8C412.4 681.8 409 679.8 406 678.4C402.5 676.6 398.1 675.4 394 675.1C390.4 674.7 385.5 674.8 383 675.1C380.5 675.5 377.1 676.3 375.5 677ZM492.6 745.2C489.9 747.6 486.6 751.3 485.2 753.5C483.8 755.7 482.1 759.3 481.3 761.5C480.5 763.7 479.8 769.3 479.8 774C479.8 781.1 480.2 783.4 482.4 788.3C483.8 791.4 487.1 796.3 489.8 799.1C492.4 802 497.1 805.6 500.5 807.3C505.4 809.8 508.1 810.4 515.5 810.8C524.1 811.3 524.8 811.2 531.9 807.9C537.1 805.5 540.6 803 543.9 799.4C546.4 796.6 549.6 792.1 551 789.4C553.2 785.1 553.5 783.2 553.5 774C553.5 764.6 553.2 762.9 550.8 758C549.3 755 546.2 750.6 544 748.3C541.8 745.9 538.1 742.9 535.8 741.6C533.4 740.2 528.8 738.4 525.5 737.5C522.2 736.7 517.5 736 515 736.1C512.5 736.1 507.6 737.2 504 738.5C500.3 739.9 495.4 742.8 492.6 745.2Z"
+        fill="black"
+      />
+      <path
+        opacity="0.8"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M223.9 64C224.2 64 225.8 66.4 227.6 69.3C229.3 72.1 232.2 77.2 234 80.5C235.8 83.8 237.8 87.2 238.5 88C239.1 88.8 240.9 92 242.4 95C244 98 245.8 101.2 246.5 102C247.1 102.8 249.2 106.5 254.5 116.9L247 121.9C242.9 124.6 235.7 129.6 231 132.9C226.3 136.2 222.1 139.3 221.5 139.7C221 140.2 218.9 141.7 217 143C215.1 144.3 213 145.9 212.3 146.5C211.7 147 209.7 148.6 207.9 150C206.1 151.4 204.2 153 203.6 153.5C203 154.1 198.7 158 194 162.2C189.3 166.3 181.9 173.3 177.5 177.7C173.1 182 166.7 188.7 163.4 192.5C160 196.4 153.6 204 149.1 209.5C144.6 215 140.3 220.2 139.7 221C139 221.8 134.2 229.3 129 237.5C123.8 245.8 118.8 254.1 117.8 256C116.8 257.9 115.4 260.4 114.7 261.5C114.1 262.6 112.8 264.6 111.9 266C111 267.4 107.8 273.2 104.8 279C101.7 284.8 98 292.4 96.5 296C95 299.6 93 304.3 92 306.5C91 308.7 88.6 315.2 86.5 321C84.5 326.8 82.3 333.5 81.5 336C80.8 338.5 79 345 77.5 350.5C76 356 73.7 365.2 72.3 371C71 376.8 69.5 384 69 387C68.5 390 67.9 393.6 67.6 395C67.3 396.4 66.6 402 66 407.5C65.4 413 64.7 419.8 64.5 422.5C64.2 425.3 63.8 431.3 63.5 436C63.2 440.7 62.7 446.3 61.8 452.5L37.7 452.3C24.4 452.2 10.9 452.1 2 452L2.6 439.7C2.9 433 3.3 425 3.5 422C3.8 419 4.2 412.9 4.5 408.5C4.8 404.1 5.3 398.7 5.6 396.5C5.9 394.3 6.8 388.7 7.6 384C8.4 379.3 10.4 368.7 12.1 360.5C13.7 352.2 16.4 340.8 18 335C19.7 329.2 21.3 323.6 21.5 322.5C21.7 321.4 23.8 315.1 26.1 308.5C28.3 301.9 32.2 291.3 34.7 285C37.2 278.7 39.6 272.8 40 272C40.5 271.2 44.4 263.1 48.9 254C53.3 244.9 58.6 234.6 60.6 231C62.7 227.4 65.6 222.6 67.1 220.2C68.7 217.9 70 215.8 70 215.5C70 215.2 72.8 210.6 76.2 205.3C79.7 199.9 82.8 195.4 83.2 195.3C83.7 195.1 84 194.6 84 194C84 193.4 85.9 190.4 88.2 187.3C90.5 184.1 95.1 178.1 98.4 174C101.7 169.9 104.7 166.3 105 166C105.3 165.7 107.5 163 109.9 160C112.4 157 116.2 152.5 118.4 150.1C120.7 147.7 127.5 140.7 133.6 134.6C139.7 128.5 145.3 122.9 146.1 122.2C146.9 121.6 152.2 116.8 158 111.7C163.8 106.5 171.9 99.6 176 96.3C180.1 93 190.6 85.5 199.3 79.6C207.9 73.8 215.2 69 215.5 69C215.8 69 217.7 67.9 219.7 66.5C221.7 65.1 223.6 64 223.9 64ZM258.5 127C259.1 126.9 260.7 128.5 262.3 130.5C263.8 132.4 265 134.2 265 134.5C265 134.8 266.1 136.5 267.4 138.3C268.7 140 270.6 143.1 271.7 145C272.7 146.9 274.3 149.6 275.2 151C276.1 152.4 277.8 155.4 279.1 157.6C280.4 159.9 283.6 165.3 286.1 169.6C288.6 174 294.1 183.4 298.3 190.5C302.4 197.6 306.9 205.3 308.3 207.5C309.7 209.7 315 218.9 320.2 228C325.4 237.1 330.7 246.3 332 248.5C333.3 250.7 337.3 257.4 340.8 263.5C344.4 269.6 347.7 275.4 348.2 276.5C348.7 277.6 350.1 280.2 351.3 282.2C352.5 284.2 355.6 289.4 358.1 293.7C360.6 298 366.3 308 370.9 316C375.4 324 379.5 331.2 380 332C380.5 332.8 383.5 338 386.6 343.5C389.7 349 393.1 355.1 394.2 357C395.2 358.9 396.5 360.9 396.9 361.5C397.4 362.1 399.4 365.6 401.5 369.5C403.6 373.4 409.2 383.3 414 391.5C418.8 399.8 423.8 408.5 425.2 411C426.6 413.5 431.4 422 435.8 430C440.3 438 444.6 446.1 446.8 451.5L439.2 452.2C435 452.5 351.3 452.7 253.3 452.7C155.3 452.6 74.8 452.1 74.3 451.7C73.9 451.2 73.6 445.8 73.8 439.7C73.9 433.5 75 420.4 76.1 410.5C77.2 400.6 79 388 80.1 382.5C81.1 377 83.6 366.4 85.6 359C87.6 351.6 90.8 340.6 92.7 334.5C94.6 328.4 98.7 317.4 101.8 310C104.8 302.6 110.6 290.2 114.5 282.5C118.5 274.8 123.6 265.6 125.9 262C128.2 258.4 130.3 254.8 130.7 254C131 253.2 134.2 248 137.8 242.5C141.3 237 146.1 230 148.4 227C150.6 224 152.8 221.1 153.2 220.5C153.6 220 157.4 215.2 161.7 210C166 204.8 176.2 193.7 184.5 185.5C192.7 177.2 203.8 166.9 209.1 162.5C214.3 158.1 220.3 153.2 222.4 151.5C224.5 149.8 227 148.1 227.9 147.6C228.8 147.1 229.7 146.3 230 145.9C230.3 145.5 236.6 141.1 244 136.1C251.4 131.1 258 127 258.5 127ZM253.6 237.6C250.4 239.2 246.3 242.1 244.6 244.2C242.9 246.2 239.9 250.4 238 253.6C234.6 259.3 234.5 259.7 234.5 270C234.5 279.4 234.8 281.1 237.3 286.3C238.8 289.4 241.5 293.5 243.3 295.3C245 297.1 248.1 299.8 250 301.2C251.9 302.7 256.4 304.8 260 306.1C265.1 307.8 268 308.2 273.5 307.8C278.2 307.5 282.4 306.5 286.3 304.7C289.4 303.2 294.3 299.9 297.1 297.3C300.3 294.3 303.3 290.1 305.3 286C308 280.4 308.4 278.5 308.3 271.5C308.3 266.7 307.6 261.5 306.5 258.5C305.6 255.8 304.2 252.4 303.5 251C302.8 249.6 299.8 246.3 296.9 243.5C293.5 240.4 289 237.5 284.7 235.8C280 233.8 276.4 233 272.8 233.1C269.9 233.2 265.7 233.6 263.5 233.9C261.3 234.3 256.8 235.9 253.6 237.6ZM133.5 318.2C131.3 319.6 128.2 322.5 126.5 324.5C124.9 326.6 122.2 330.6 120.6 333.4C118.2 337.6 117.6 340 117.2 346.5C116.9 352 117.2 356.2 118.3 360C119.2 363 121.4 367.7 123.2 370.5C125 373.2 128.3 376.7 130.5 378.2C132.7 379.8 137 382.3 140 383.8C144.8 386.1 146.7 386.5 154.5 386.5C162.2 386.5 164.3 386.1 169 383.9C172 382.4 176.5 379.2 179 376.8C181.5 374.3 184.7 370.8 186.1 368.9C187.5 367 189.5 362.8 190.5 359.5C191.8 355 192.1 351.7 191.6 346.5C191.3 342.5 190 337.4 188.7 334.5C187.4 331.8 184.4 327.3 182 324.6C179.2 321.7 174.8 318.4 170.5 316.2C164.7 313.3 162.2 312.6 156 312.3C150.6 312.1 146.9 312.5 143 313.8C140 314.8 135.7 316.8 133.5 318.2ZM284 363C281.5 364.3 278 366.9 276.2 368.9C274.3 370.9 271.3 375.6 269.3 379.5C266.2 385.7 265.8 387.4 265.8 394.5C265.7 401.2 266.2 403.7 268.6 409.4C270.4 413.7 273.3 418.3 276 421.1C278.8 424.1 283.1 427.1 287.5 429.1C293.7 432 295.4 432.4 303 432.3C309.4 432.3 312.7 431.7 316.5 430.1C319.3 428.9 323.1 426.8 325 425.5C326.9 424.2 330.4 420.3 332.6 416.8C334.9 413.3 337.4 409.1 338.2 407.5C339.1 405.8 339.8 401.2 340 397C340.1 392.2 339.6 387.8 338.6 384.8C337.7 382.1 336.2 378.3 335.1 376.3C334.1 374.2 331.2 370.7 328.8 368.5C326.3 366.3 321.3 363 317.6 361.3C312 358.5 309.9 358 304.3 358.1C300.5 358.1 295.5 358.7 293 359.4C290.5 360.1 286.5 361.7 284 363Z"
+        fill="black"
+      />
+      <path
+        opacity="0.2"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M459.5 71.4C466.1 71.4 469 71.5 466 71.7C463 71.9 457.6 71.9 454 71.7C450.4 71.5 452.9 71.4 459.5 71.4ZM654.8 127C655.2 127 660.7 130.2 667 134.2C673.3 138.2 683.9 145.5 690.5 150.4C697.1 155.3 706.8 163 712 167.6C717.2 172.1 726.9 181.4 733.6 188.2C740.3 194.9 748.7 204 752.4 208.2C756 212.5 763 221.3 767.8 227.7C772.6 234.2 780.9 246.7 786.2 255.5C791.5 264.3 799 277.6 802.8 285C806.7 292.4 812.1 303.9 814.8 310.5C817.5 317.1 821.8 328.8 824.3 336.5C826.8 344.2 830.2 355.7 831.8 362C833.5 368.3 836 380 837.4 388C838.8 396 840.6 408.6 841.4 416C842.2 423.4 843 434.2 843.5 450.5L837.5 451.3C834.2 451.7 750 452 650.5 451.8C551 451.6 468.9 451.2 468.2 450.7C467.3 450.2 469.3 446.1 475.1 435.7C479.6 427.9 495.4 400.4 510.3 374.5C525.1 348.6 549 307.2 563.3 282.5C577.6 257.7 599 220.9 610.8 200.5C622.6 180.1 635.2 158.6 638.8 152.5C642.3 146.4 647.3 138.2 649.7 134.2C652.2 130.3 654.5 127 654.8 127ZM677.1 220.6C675.1 222.3 672.1 226.3 670.4 229.6C668.6 232.8 666.7 238.2 666 241.5C665.1 246.1 665.1 248.9 666 253.5C666.6 256.8 668.1 261.5 669.2 264C670.3 266.5 671.9 269.4 672.8 270.6C673.8 271.8 676.7 274.6 679.5 276.9C682.5 279.4 687.1 281.9 691 283.1C696.1 284.8 699.2 285.2 705.5 284.8C711.9 284.5 714.6 283.8 718.9 281.4C721.9 279.8 726.3 276.7 728.8 274.5C731.3 272.3 734.6 267.9 736.1 264.8C737.7 261.6 739.3 256.4 739.8 253.3C740.2 250.1 740.2 245 739.8 242C739.4 239 737.8 234 736.3 231C734.8 228 731.5 223.5 729 221C726.5 218.5 722.4 215.4 719.7 214.2C717.1 213 713.1 211.6 710.7 211C708.4 210.5 704 210 700.9 210C696.3 210 693.9 210.7 688 213.8C684 215.8 679.1 218.9 677.1 220.6ZM567.6 322.7C565.5 324.3 562.3 327.3 560.5 329.5C558.7 331.7 556.3 335.4 555.1 337.8C554 340.1 552.6 344.8 552 348.3C551.5 351.7 551.3 356.3 551.6 358.5C552 360.7 553.3 364.8 554.7 367.5C556 370.3 558.5 374.5 560.1 377C561.8 379.5 565 382.7 567.3 384.2C569.6 385.6 574.3 387.8 577.7 388.9C581.4 390.1 586.6 391 590.2 391C593.8 391 598.2 390.3 600.5 389.4C602.7 388.5 607.5 385.8 611.2 383.4C617.3 379.5 618.4 378.2 621.5 371.8C623.5 367.8 625.5 361.6 626.1 358.1C626.9 353.5 626.8 350.2 626 346.6C625.4 343.8 623.4 338.8 621.6 335.5C619.8 332.2 616.3 327.8 613.9 325.6C611.5 323.5 607 320.6 604 319.2C600.1 317.4 596.3 316.6 591 316.3C585.4 316.1 582 316.5 577.5 318C574.2 319.1 569.7 321.2 567.6 322.7ZM692.6 357C690.4 358.4 686.9 361.5 684.8 364C682.6 366.5 680 370.3 679 372.5C677.9 374.7 676.5 379 675.9 382C675.1 386.1 675 389.2 675.9 394C676.5 397.6 678.2 402.9 679.8 405.9C681.3 408.8 684.6 413.2 687.2 415.6C689.9 418 694.6 421.2 697.7 422.8C702.8 425.2 704.7 425.5 713 425.5C721.1 425.5 723.3 425.1 728 422.9C731 421.5 735.3 418.8 737.4 416.9C739.5 415 742.5 411.7 744 409.5C745.5 407.3 747.5 403 748.5 400C749.5 396.7 750.2 391.7 750.2 387.5C750.1 381.6 749.5 379.3 746.3 372.6C743.8 367.4 741 363.4 738 360.7C735.5 358.4 731 355.5 728 354.1C723.9 352.3 720.3 351.6 714 351.3C707.5 351 704.4 351.4 701 352.8C698.5 353.8 694.7 355.7 692.6 357ZM215 461.5C263.7 461.5 283.5 461.6 259 461.7C234.5 461.9 194.7 461.9 170.5 461.7C146.3 461.6 166.3 461.5 215 461.5ZM484.5 461.4C493.3 461.4 497.1 461.6 493 461.7C488.9 461.9 481.7 461.9 477 461.7C472.3 461.6 475.7 461.4 484.5 461.4ZM514.5 461.3C518.4 461.3 519.7 461.5 517.5 461.7C515.3 461.9 512.1 461.9 510.5 461.7C508.9 461.5 510.6 461.3 514.5 461.3ZM802 461.4C817.1 461.4 823.2 461.6 815.5 461.7C807.8 461.9 795.4 461.9 788 461.7C780.6 461.6 786.9 461.4 802 461.4ZM903.5 461.5L878.8 461.7C855.9 462 854 462.1 854 463.8C854 464.7 853.7 465.2 853.3 464.8C852.9 464.4 852.8 463.3 853.2 462.5C853.8 461.2 857.5 461 903.5 461.5ZM456.5 842.4C464.8 842.4 468.4 842.6 464.5 842.7C460.6 842.9 453.9 842.9 449.5 842.7C445.1 842.6 448.3 842.4 456.5 842.4Z"
+        fill="black"
+      />
+      <path
+        opacity="0.4"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M447.7 451.2C447.8 451.1 447.7 451.5 447.5 452C447.2 452.5 444.2 452.9 434.5 452.7L441 452C444.6 451.6 447.6 451.3 447.7 451.2ZM632 461.3C704.3 461.3 781 461.5 841.5 462.5L841.8 471C842 475.7 841.4 486.9 840.5 496C839.7 505.1 837.8 519 836.5 527C835.1 535 833.5 543.1 833 545C832.4 546.9 831.7 549.3 831.4 550.2C831.2 551.2 830.8 552.8 830.6 553.7C830.4 554.7 829.5 558.2 828.6 561.5C827.8 564.8 825.1 573.6 822.6 581C820.2 588.4 816.5 598.5 814.5 603.5C812.4 608.5 809.3 615.6 807.5 619.5C805.8 623.3 800.6 633.2 796 641.5C791.5 649.7 785.9 659.4 783.6 663C781.4 666.6 779.2 669.6 778.8 669.7C778.4 669.9 778 670.6 778 671.2C778 671.9 774.5 677.3 770.2 683.1C766 688.9 761 695.7 759.2 698.1C757.4 700.5 751.4 707.4 746 713.5C740.6 719.5 731.8 728.8 726.4 734C720.9 739.3 712.2 747.1 707 751.5C701.7 755.9 691.7 763.7 684.7 768.7C677.7 773.8 671.5 778 671 778C670.4 778 669.9 778.4 669.7 778.8C669.6 779.3 666.8 781.4 663.5 783.5C659 786.3 657.1 787 656 786.2C655.2 785.7 654 784.4 653.5 783.4C652.9 782.3 652.3 781.3 652 781C651.7 780.7 648.9 776.4 645.8 771.5C642.7 766.5 635.3 754.2 629.4 744C623.5 733.8 616.5 721.7 613.7 717C611 712.3 604.5 701.1 599.2 692C594 682.9 589.4 675 589 674.5C588.6 673.9 581.3 661.3 572.7 646.5C564.2 631.6 554.5 614.8 551.3 609C548 603.2 535 580.5 522.5 558.5C510 536.5 497.4 514.4 494.5 509.5C491.6 504.5 486.2 495.1 482.5 488.5C478.7 481.9 474.2 473.5 472.3 469.7C470.5 466 469 462.8 469 462.5C469 462.2 476.1 461.9 484.7 461.7C493.4 461.6 559.7 461.4 632 461.3ZM595 486C592 487.6 588.5 490 587.3 491.2C586.1 492.5 583 497.1 580.5 501.5L575.9 509.5C576.5 527.7 576.8 529.3 580.2 536.3C583.1 542.2 585 544.7 588.2 546.9C590.6 548.5 595.4 551.2 599 553C605.1 556.1 606 556.3 614 555.9C620.8 555.5 623.8 554.8 629 552.3C632.6 550.7 637.2 547.5 639.3 545.4C641.4 543.2 644.7 538.3 646.7 534.5C650.1 528.1 650.4 526.8 650.4 519C650.4 511.9 649.9 509.5 647.6 504.5C646.1 501.2 643.4 496.7 641.6 494.5C639.8 492.3 636.1 489.1 633.4 487.3C630.7 485.6 625.8 483.5 622.5 482.6C619.2 481.7 614.9 481.1 613 481.1C611.1 481.2 607.5 481.6 605 482.1C602.5 482.6 598 484.4 595 486ZM854.1 462H884.1C903.4 462 914 462.4 914 463C914 463.5 913.5 471.8 913 481.2C912.4 490.7 911.5 503.5 911 509.5C910.4 515.5 908.8 527.2 907.4 535.5C906 543.7 903.5 556.3 901.8 563.5C900.2 570.6 898.6 577 898.3 577.5C897.9 578 897.5 579.4 897.4 580.5C897.2 581.6 895.2 588.6 892.9 596C890.7 603.4 885.6 617.6 881.7 627.5C877.9 637.4 870.6 653.6 865.5 663.5C860.5 673.4 852.9 687.3 848.6 694.5C844.3 701.6 840.3 707.6 839.9 707.7C839.4 707.9 839 708.7 839 709.5C839 710.3 838.5 711 838 711C837.4 711 837 711.5 837 712C837 712.5 833.7 717.8 829.6 723.7C825.5 729.7 817.1 740.6 810.9 748C804.7 755.4 795.3 766.2 790.1 771.9C784.8 777.6 774.2 787.9 766.5 794.8C758.8 801.7 748.2 810.7 743 814.9C737.8 819.2 729.7 825.3 725 828.7C720.3 832 711.2 838.2 704.7 842.4C694.9 848.8 692.7 849.8 691.5 848.7C690.6 848.1 689.9 846.9 690 846.2C690 845.6 689.6 844.9 689.1 844.7C688.6 844.6 685.2 839.3 681.4 833C677.7 826.7 671.6 816.1 661.1 797.5L668.1 792.7C671.9 790.1 675.2 788 675.5 788C675.8 788 676.6 787.6 677.2 787C677.9 786.5 685 781.2 693 775.3C701 769.3 712.3 760.4 718 755.4C723.8 750.4 734.6 740 742 732.4C749.4 724.7 760.7 712.1 767 704.3C773.3 696.5 782.1 684.4 786.5 677.3C790.9 670.3 798 658.2 802.3 650.5C806.7 642.8 812.2 632.5 814.7 627.5C817.2 622.5 821.5 613.1 824.2 606.5C826.9 599.9 831.1 588.2 833.6 580.5C836.1 572.8 838.3 565.8 838.5 565C838.7 564.2 839.8 559.7 841 555C842.1 550.3 843.3 545.4 843.6 544C843.8 542.6 845.2 535.6 846.5 528.5C847.8 521.3 849.4 511.9 849.9 507.5C850.5 503.1 851.4 492.3 852 483.5C852.6 474.7 853.3 466.3 853.6 464.7L854.1 462ZM626 611.2C623.5 612.7 619.5 616 617 618.7C614.6 621.4 611.4 626 610 629C608.1 633.2 607.5 636.2 607.5 641.5C607.5 645.4 607.8 649.9 608.2 651.5C608.6 653.2 609.5 656.1 610.1 658C610.7 660 612.5 663.3 614.2 665.5C615.8 667.8 619.4 671.3 622.3 673.4C625.1 675.5 629.9 678.1 633 679.2C637.4 680.8 640.1 681.2 646.5 680.8C652.1 680.5 656.1 679.6 660 677.9C663 676.5 667.2 673.9 669.3 672C671.5 670.1 675.1 665.4 677.3 661.6L681.5 654.6C681.5 634.2 681.2 633.1 678.3 627C676.5 623.5 673.6 619.1 671.8 617.4C669.9 615.7 666.9 613.3 665 612.2C663 611 660.3 609.6 659 609C657.6 608.4 655.6 607.6 654.5 607.3C653.4 607 649.3 606.6 645.5 606.4C641.6 606.2 636.7 606.7 634.5 607.4C632.3 608.1 628.4 609.8 626 611.2ZM421.5 462.4C425.9 462.4 427.9 462.6 426 462.8C424 463 420.4 463 418 462.8C415.5 462.6 417.1 462.4 421.5 462.4ZM743 532.2C740.5 533.6 736.4 537 734 539.7C731.5 542.4 728.7 546.2 727.8 548.1C726.9 550 725.8 552.9 725.3 554.5C724.9 556.2 724.6 560.5 724.6 564C724.5 567.6 724.9 572.1 725.3 574C725.7 576 727.3 579.8 728.8 582.4C730.3 585.1 733.5 589.1 736 591.3C738.4 593.5 743.2 596.6 746.5 598.3C750.5 600.3 754.6 601.4 759 601.8C763.5 602.1 767.3 601.8 771.5 600.6C774.8 599.7 779.7 597.5 782.4 595.7C785.1 594 788.5 591 790 589C791.4 587.1 794 583.3 795.6 580.5C798.3 575.9 798.5 574.8 798.5 565C798.5 555.6 798.2 553.9 795.7 548.5C794.1 545.3 791.4 541.1 789.7 539.2C787.9 537.4 783.1 534.1 779 531.8C772.2 528.1 770.7 527.6 763.5 527.4C758.8 527.2 753.8 527.6 751.5 528.4C749.3 529.1 745.4 530.8 743 532.2Z"
+        fill="black"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M463.5 72.5C488.4 72.7 500.5 73.2 508.5 74.4C514.5 75.3 524.5 76.9 530.5 78.1C536.5 79.2 546.9 81.5 553.5 83.2C560.1 84.8 572.3 88.4 580.5 91.2C588.8 93.9 597.3 97.1 599.5 98.1C601.7 99.2 606.4 101.3 610 102.7C613.6 104.1 622.9 108.5 630.8 112.4C643.3 118.6 645 119.8 644.5 121.5C644.1 122.6 640.4 129.6 636.3 137C632.2 144.4 627.2 153.4 625.3 157C623.3 160.6 621 164.6 620 166C619 167.4 616.7 171.4 614.8 175C612.8 178.6 610.4 183.1 609.3 185C608.2 186.9 605.7 191.4 603.6 195C601.6 198.6 599.5 202.2 599 203C598.5 203.8 596.1 207.9 593.7 212C591.3 216.1 589 220.2 588.7 221C588.3 221.8 587.6 223.2 587 224C586.5 224.8 583.4 230 580.2 235.5C577 241 573.3 247.3 572.1 249.5C570.9 251.7 568.8 255.3 567.5 257.5C566.2 259.7 564.6 262.5 564.1 263.8C563.5 265 562.2 267.2 561.1 268.8C560.1 270.3 556.9 275.8 554 281C551 286.2 545.9 295.2 542.5 301C539.1 306.8 531.8 319.1 526.3 328.5C520.8 337.9 514.8 348.1 512.9 351.4C511 354.6 508.7 358.6 507.7 360.4C506.7 362.1 497.3 378.1 486.8 396C476.4 413.9 466.3 431 464.5 434C462.6 437 460.1 440.8 456.5 445.1L450.3 434.8C446.9 429.1 443.3 423.1 442.3 421.3C441.3 419.6 432.6 404.5 422.9 387.8C413.2 371.2 404.6 356.1 403.7 354.5C402.9 352.9 400.9 349.5 399.2 347C397.5 344.5 395.7 341.4 395.1 340C394.5 338.6 391.6 333.7 388.7 329C385.8 324.3 382.2 318 380.6 315C379.1 312 377.2 308.8 376.6 308C375.9 307.2 373.5 303.2 371.2 299.2C368.9 295.3 367 291.8 367 291.5C367 291.2 366.2 289.8 365.1 288.3C364.1 286.7 359.8 279.4 355.5 272C351.2 264.6 346.6 256.5 345.2 254C343.9 251.5 341.9 247.8 340.7 245.8C339.5 243.8 334 234.3 328.5 224.8C323.1 215.3 317.6 205.7 316.4 203.5C315.3 201.3 310.9 193.6 306.8 186.5C302.7 179.4 297 169.6 294.1 164.8C291.3 159.9 289 155.7 289 155.3C289 154.8 288.3 153.8 287.6 153C286.9 152.2 284.5 148.3 282.5 144.5C280.4 140.7 276.7 133.8 270 121L285.8 113.3C294.4 109 304 104.5 307 103.2C310 101.9 314.1 100.2 316 99.3C317.9 98.5 324.9 95.8 331.5 93.4C338.1 90.9 349.6 87.4 357 85.4C364.4 83.4 371.4 81.6 372.5 81.4C373.6 81.2 375.2 80.8 376 80.5C376.8 80.3 379.1 79.8 381 79.5C382.9 79.2 386.5 78.6 389 78.1C391.5 77.6 396.2 76.6 399.5 76C402.8 75.4 410.9 74.3 417.5 73.5C425.6 72.7 440.6 72.3 463.5 72.5ZM374 113.1C371.5 115.5 368.3 119.3 366.8 121.5C365.3 123.7 363.6 127.1 363.1 129C362.5 130.9 362.2 136.8 362.4 142C362.6 150.3 363 152.2 365.6 156.9C367.2 159.9 370.3 164.1 372.5 166.4C374.7 168.7 379 171.7 382 173.2C385 174.7 388.9 176.2 390.5 176.5C392.1 176.9 395.5 177.4 398 177.7C400.8 178 404.7 177.6 408.5 176.5C411.8 175.6 416.3 173.7 418.5 172.4C420.7 171.1 424.1 168.4 426.1 166.3C428.1 164.2 430.4 161.4 431.3 160C432.2 158.6 433.6 155.2 434.6 152.5C435.8 148.8 436.1 145.1 435.8 138C435.5 129.8 435 127.8 432.5 123.1C430.8 120.1 427.2 115.6 424.5 113.1C421.7 110.6 417.2 107.4 414.5 106.1C410.7 104.3 407.3 103.7 400 103.3C391.1 102.9 390.1 103 384.5 105.8C381.2 107.4 376.5 110.7 374 113.1ZM499.7 175.7C497.1 178.3 493.7 183 492.2 186C489.9 190.6 489.5 193 489.3 201C489.1 210 489.2 210.9 492.5 217.5C494.3 221.4 496.9 225.6 498.2 227C499.5 228.4 502.3 230.8 504.5 232.5C506.7 234.1 510.6 236.2 513.2 237.2C516.5 238.4 520.8 239 526.7 239C534.4 239 536.2 238.7 541.5 236.1C544.8 234.5 549.9 230.8 552.8 227.8C555.7 224.9 558.9 220.6 560 218.2C561.1 215.9 562.2 212.8 562.5 211.2C562.8 209.7 563.1 204.9 563.1 200.5C563 193.5 562.6 191.7 559.6 185.5C557.5 181.1 554.6 177.1 551.9 174.7C549.5 172.5 545.2 169.7 542.5 168.2C538.3 166.1 535.9 165.6 527 165.3C516.9 164.9 516.2 165 510.5 167.9C507.2 169.6 502.3 173.1 499.7 175.7ZM408.2 264.9C406.2 267 404 269.4 403.5 270.1C402.9 270.9 401.5 273.3 400.4 275.5C399.2 277.7 397.9 281.1 397.5 283C397.1 284.9 396.7 289.4 396.8 293C396.8 297.1 397.7 301.7 399.1 305.5C400.7 309.9 402.9 313.1 407.4 317.7C411 321.3 415.6 324.7 418.5 326C421.833 327.467 425.833 328.267 430.5 328.4C434.4 328.5 440 328.2 443 327.7C446 327.2 450.5 325.6 453 324C455.5 322.5 459.2 319.2 461.4 316.8C463.5 314.5 466.4 310.5 467.9 308C470.3 303.8 470.5 302.6 470.5 292C470.5 281.1 470.3 280.2 467.5 275.1C465.9 272.2 462.9 268.1 460.9 266.1C458.9 264.1 456.6 261.9 455.7 261.2C454.7 260.6 452.1 259 449.7 257.8C446.4 256.1 443.3 255.6 435 255.3C424.9 254.9 424.3 255 418.2 257.9C414.8 259.6 410.3 262.7 408.2 264.9Z"
+        fill="black"
+      />
+      <path
+        opacity="0.7"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M38 452.4C50.4 452.4 55.3 452.6 49 452.7C42.7 452.9 32.5 452.9 26.5 452.7C20.5 452.6 25.6 452.4 38 452.4ZM134 452.4C151.9 452.4 159.1 452.6 150 452.7C140.9 452.9 126.3 452.9 117.5 452.7C108.7 452.6 116.1 452.4 134 452.4ZM411.5 452.4C422.5 452.4 427.2 452.6 422 452.7C416.8 452.9 407.8 452.9 402 452.7C396.2 452.6 400.5 452.4 411.5 452.4ZM265.5 462.5C363.9 462.7 445.3 463 446.3 463.4C447.2 463.7 448 464.2 448 464.5C448 464.8 446.3 468 444.1 471.8C442 475.5 439.2 480.3 438 482.5C436.7 484.7 434.6 488.5 433.2 491C431.8 493.5 422.8 509.2 413.2 526C403.6 542.8 394 559.3 391.9 562.8C389.7 566.2 388 569.2 388 569.5C388 569.8 384.8 575.5 380.9 582.3C377 589 372.6 596.5 371.3 599C369.9 601.5 367.9 604.7 366.9 606.3C365.8 607.8 365 609.2 365 609.5C365 609.8 362 615.1 358.3 621.3C354.7 627.4 350.6 634.5 349.2 637C347.8 639.5 346.4 642 346 642.5C345.6 643 344.2 645.3 343 647.5C341.7 649.7 339.6 653.5 338.2 656C336.8 658.5 334.9 661.6 334 663C333.1 664.4 332.1 666 331.9 666.5C331.7 667.1 327.9 673.7 323.5 681.3C319.1 688.9 314.8 696.4 313.9 697.8C313 699.3 310.8 703.2 309 706.5C307.2 709.8 303.7 715.9 301.2 720C298.7 724.1 295.6 729.5 294.2 732C292.8 734.5 288.8 741.5 285.2 747.5C281.7 753.5 277.6 760.5 276.2 763C274.8 765.5 271.9 770.2 269.9 773.5C267.8 776.8 265.1 781.2 264 783.3C262.9 785.3 261.7 787 261.2 787C260.8 787 258.2 785.6 255.5 783.8C252.7 782.1 247.8 778.9 244.5 776.8C241.2 774.7 238.4 772.9 238.2 773C238.1 773 237.2 772.3 236.2 771.6C235.3 770.8 231.1 767.7 227 764.8C222.9 761.8 218.4 758.5 217.1 757.5C215.8 756.4 211.1 752.4 206.6 748.6C202.2 744.8 192 735.1 184 727C176 719 167 709.5 164 706.1C161 702.7 154.1 693.9 148.7 686.7C143.2 679.4 135.3 667.7 131 660.5C126.7 653.4 121.8 645 120.1 642C118.3 639 114.1 630.7 110.5 623.5C107 616.4 103.5 608.9 102.7 607C101.9 605.1 100.3 601.3 99.2 598.5C98.1 595.8 95.8 589.7 94.1 585C92.5 580.3 89.9 572.7 88.5 568C87.1 563.3 85.8 558.6 85.5 557.5C85.3 556.4 84 551 82.6 545.5C81.2 540 79.9 534.2 79.7 532.5C79.4 530.9 78.5 525.5 77.6 520.5C76.7 515.5 75.4 505.4 74.5 498C73.7 490.6 72.9 480.1 72.8 474.8C72.6 469.3 72.9 464.7 73.5 464.1C74.1 463.6 77.2 462.9 80.5 462.7C83.8 462.5 167 462.4 265.5 462.5ZM183 493.6C181.6 494.5 178.5 497.3 176 499.9C173.5 502.5 170.4 506.8 169 509.5C166.9 513.8 166.6 515.9 166.5 525C166.5 535.1 166.6 535.8 170 542.4C171.9 546.1 175.3 550.9 177.5 552.9C179.7 554.9 184.2 557.9 187.5 559.5C192.9 562.2 194.5 562.5 203 562.5C211.9 562.5 212.9 562.3 219.4 559C223.7 556.8 227.8 553.7 230.6 550.5C233.1 547.8 236 543.5 237.1 541C238.3 538.5 239.6 534 240.2 531C240.8 527.4 240.8 523.6 240.2 520C239.7 517 237.9 511.8 236.2 508.5C234.6 505.2 231.2 500.6 228.6 498.3C226.1 495.9 221.4 492.8 218.2 491.3C213.9 489.3 210.5 488.6 204.5 488.3C198.2 488 195.3 488.4 191 490C188 491.1 184.4 492.8 183 493.6ZM305.7 529.9C301.567 532.5 298.433 535.4 296.3 538.6C294.6 541.3 292.4 545.8 291.5 548.5C290.5 551.5 289.8 556.7 289.8 561.5C289.8 568.6 290.2 570.2 293.2 576C295 579.6 298.5 584.5 301 587C303.5 589.5 307.4 592.6 309.7 593.8C312.1 595 315.2 596.3 316.7 596.6C318.3 596.9 322 597.4 325 597.7C328.5 598.1 332.5 597.7 336.2 596.6C339.4 595.7 344.4 593.5 347.2 591.7C350.1 589.8 353.8 586.8 355.4 584.9C357 583 359.4 579.3 360.8 576.5C362.9 572.5 363.5 569.6 363.8 562L364.3 552.5C357.5 539.8 353.9 534.8 351.2 532.2C348.6 529.9 344 527 341 525.8C337.2 524.3 332.9 523.6 327 523.4C321.5 523.3 317.4 523.7 315.2 524.6C313.5 525.4 309.2 527.7 305.7 529.9ZM193 635.2C190 637.2 186.3 640.1 184.8 641.7C183.3 643.2 180.9 647 179.3 650C176.7 655 176.5 656.4 176.5 666.1C176.5 676.3 176.6 677 180.1 683.6C182.7 688.7 185.2 691.7 189.6 695.3C192.8 697.9 197.7 700.8 200.5 701.7C203.4 702.6 209 703.4 213.7 703.4C221.2 703.5 222.4 703.2 228.6 700C232.3 698.1 237 694.8 239.1 692.8C241.3 690.7 244.1 687.1 245.5 684.8C246.8 682.4 248.5 677.8 249.3 674.5C250.1 671.2 250.6 666.9 250.4 665C250.3 663.1 249.7 659.5 249.1 657C248.5 654.5 247.3 650.9 246.3 649C245.3 647.1 243.1 643.9 241.5 641.9C239.9 640 236.9 637.2 235 635.7C233.1 634.3 228.8 632.2 225.5 631C221.6 629.7 217.1 629 212.5 629C208.6 629.1 203.9 629.6 202 630.3C200.1 631 196 633.2 193 635.2Z"
+        fill="black"
+      />
+      <path
+        opacity="0.2"
+        d="M478 585.7C479.9 585.9 483.3 585.9 485.5 585.7C487.7 585.5 486.1 585.3 482 585.3C477.9 585.3 476.1 585.5 478 585.7Z"
+        fill="black"
+      />
+    </svg>
+  </div>
+</div>

package/src/Components/Visual/Loading/Loading.js

@@ -0,0 +1,38 @@
+export default class Loading extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = ['isActive'];
+   }
+
+   init() {}
+
+   start() {
+      document.body.appendChild(this);
+      this._isActive = true;
+   }
+
+   stop() {
+      this.remove();
+      this._isActive = false;
+   }
+
+   get isActive() {
+      return this._isActive;
+   }
+
+   set isActive(value) {
+      if (value === true) {
+         this._isActive = true;
+         if (!this._isActive) this.start();
+      }
+
+      if (value === false) {
+         this._isActive = false;
+         this.stop();
+      }
+   }
+}
+
+customElements.define('slice-loading', Loading);