Merge branch 'dev' into card

2026-08-13 23:02:23 +04:00 · 2022-09-14 01:44:52 +07:00
parent 8bcd9eb8d3 5ff24130cf
commit 9d411eb88f
52 changed files with 2850 additions and 604 deletions
@@ -1,44 +0,0 @@
-{
-  "files": [
-    {
-      "path": "./dist/css/tabler.css",
-      "maxSize": "55 kB"
-    },
-    {
-      "path": "./dist/css/tabler.min.css",
-      "maxSize": "45 kB"
-    },
-    {
-      "path": "./dist/css/tabler.rtl.css",
-      "maxSize": "55 kB"
-    },
-    {
-      "path": "./dist/css/tabler.rtl.min.css",
-      "maxSize": "45 kB"
-    },
-    {
-      "path": "./dist/css/tabler-flags.css",
-      "maxSize": "2 kB"
-    },
-    {
-      "path": "./dist/css/tabler-flags.min.css",
-      "maxSize": "2 kB"
-    },
-    {
-      "path": "./dist/css/tabler-payments.css",
-      "maxSize": "2 kB"
-    },
-    {
-      "path": "./dist/css/tabler-payments.min.css",
-      "maxSize": "2 kB"
-    },
-    {
-      "path": "./dist/js/tabler.js",
-      "maxSize": "100 kB"
-    },
-    {
-      "path": "./dist/js/tabler.min.js",
-      "maxSize": "50 kB"
-    }
-  ]
-}
@@ -10,15 +10,15 @@
      "license": "MIT",
      "dependencies": {
        "@popperjs/core": "^2.11.6",
-        "@tabler/icons": "^1.91.1",
+        "@tabler/icons": "^1.95.1",
        "bootstrap": "5.2.0",
        "node-sass": "^7.0.1"
      },
      "devDependencies": {
-        "@babel/core": "^7.18.13",
-        "@babel/preset-env": "^7.18.10",
+        "@babel/core": "^7.19.0",
+        "@babel/preset-env": "^7.19.0",
        "@rollup/plugin-commonjs": "^22.0.2",
-        "@rollup/plugin-node-resolve": "^13.3.0",
+        "@rollup/plugin-node-resolve": "^14.0.0",
        "@rollup/plugin-replace": "^4.0.0",
        "@rollup/pluginutils": "^4.2.1",
        "@rollup/stream": "^2.0.0",
@@ -28,7 +28,7 @@
        "browser-sync": "^2.27.10",
        "bundlewatch": "^0.3.3",
        "choices.js": "^10.1.0",
-        "chromatic": "^6.8.0",
+        "chromatic": "^6.9.0",
        "countup.js": "^2.3.2",
        "critical": "^4.0.1",
        "cross-spawn": "^7.0.3",
@@ -57,7 +57,7 @@
        "rollup": "^2.79.0",
        "rollup-plugin-babel": "^4.4.0",
        "rollup-plugin-cleanup": "^3.2.1",
-        "sass": "^1.54.7",
+        "sass": "^1.54.8",
        "tinymce": "^6.1.2",
        "tom-select": "^2.1.0",
        "vinyl-buffer": "^1.0.1",
@@ -162,30 +162,30 @@
      }
    },
    "node_modules/@babel/compat-data": {
-      "version": "7.18.8",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.8.tgz",
-      "integrity": "sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.19.0.tgz",
+      "integrity": "sha512-y5rqgTTPTmaF5e2nVhOxw+Ur9HDJLsWb6U/KpgUzRZEdPfE6VOubXBKLdbcUTijzRptednSBDQbYZBOSqJxpJw==",
      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
    },
    "node_modules/@babel/core": {
-      "version": "7.18.13",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.13.tgz",
-      "integrity": "sha512-ZisbOvRRusFktksHSG6pjj1CSvkPkcZq/KHD45LAkVP/oiHJkNBZWfpvlLmX8OtHDG8IuzsFlVRWo08w7Qxn0A==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.19.0.tgz",
+      "integrity": "sha512-reM4+U7B9ss148rh2n1Qs9ASS+w94irYXga7c2jaQv9RVzpS7Mv1a9rnYYwuDa45G+DkORt9g6An2k/V4d9LbQ==",
      "dev": true,
      "dependencies": {
        "@ampproject/remapping": "^2.1.0",
        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.13",
-        "@babel/helper-compilation-targets": "^7.18.9",
-        "@babel/helper-module-transforms": "^7.18.9",
-        "@babel/helpers": "^7.18.9",
-        "@babel/parser": "^7.18.13",
+        "@babel/generator": "^7.19.0",
+        "@babel/helper-compilation-targets": "^7.19.0",
+        "@babel/helper-module-transforms": "^7.19.0",
+        "@babel/helpers": "^7.19.0",
+        "@babel/parser": "^7.19.0",
        "@babel/template": "^7.18.10",
-        "@babel/traverse": "^7.18.13",
-        "@babel/types": "^7.18.13",
+        "@babel/traverse": "^7.19.0",
+        "@babel/types": "^7.19.0",
        "convert-source-map": "^1.7.0",
        "debug": "^4.1.0",
        "gensync": "^1.0.0-beta.2",
@@ -201,12 +201,12 @@
      }
    },
    "node_modules/@babel/generator": {
-      "version": "7.18.13",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.13.tgz",
-      "integrity": "sha512-CkPg8ySSPuHTYPJYo7IRALdqyjM9HCbt/3uOBEFbzyGVP6Mn8bwFPB0jX6982JVNBlYzM1nnPkfjuXSOPtQeEQ==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.19.0.tgz",
+      "integrity": "sha512-S1ahxf1gZ2dpoiFgA+ohK9DIpz50bJ0CWs7Zlzb54Z4sG8qmdIrGrVqmy1sAtTVRb+9CU6U8VqT9L0Zj7hxHVg==",
      "dev": true,
      "dependencies": {
-        "@babel/types": "^7.18.13",
+        "@babel/types": "^7.19.0",
        "@jridgewell/gen-mapping": "^0.3.2",
        "jsesc": "^2.5.1"
      },
@@ -254,12 +254,12 @@
      }
    },
    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.9.tgz",
-      "integrity": "sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.0.tgz",
+      "integrity": "sha512-Ai5bNWXIvwDvWM7njqsG3feMlL9hCVQsPYXodsZyLwshYkZVJt59Gftau4VrE8S9IT9asd2uSP1hG6wCNw+sXA==",
      "dev": true,
      "dependencies": {
-        "@babel/compat-data": "^7.18.8",
+        "@babel/compat-data": "^7.19.0",
        "@babel/helper-validator-option": "^7.18.6",
        "browserslist": "^4.20.2",
        "semver": "^6.3.0"
@@ -293,9 +293,9 @@
      }
    },
    "node_modules/@babel/helper-create-regexp-features-plugin": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.18.6.tgz",
-      "integrity": "sha512-7LcpH1wnQLGrI+4v+nPp+zUvIkF9x0ddv1Hkdue10tg3gmRnLy97DXh4STiOf1qeIInyD69Qv5kKSZzKD8B/7A==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.19.0.tgz",
+      "integrity": "sha512-htnV+mHX32DF81amCDrwIDr8nrp1PTm+3wfBN9/v8QJOLEioOCOG7qNyq0nHeFiWbT3Eb7gsPwEmV64UCQ1jzw==",
      "dev": true,
      "dependencies": {
        "@babel/helper-annotate-as-pure": "^7.18.6",
@@ -347,13 +347,13 @@
      }
    },
    "node_modules/@babel/helper-function-name": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.18.9.tgz",
-      "integrity": "sha512-fJgWlZt7nxGksJS9a0XdSaI4XvpExnNIgRP+rVefWh5U7BL8pPuir6SJUmFKRfjWQ51OtWSzwOxhaH/EBWWc0A==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz",
+      "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==",
      "dev": true,
      "dependencies": {
-        "@babel/template": "^7.18.6",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.18.10",
+        "@babel/types": "^7.19.0"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -396,9 +396,9 @@
      }
    },
    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.18.9.tgz",
-      "integrity": "sha512-KYNqY0ICwfv19b31XzvmI/mfcylOzbLtowkw+mfvGPAQ3kfCnMLYbED3YecL5tPd8nAYFQFAd6JHp2LxZk/J1g==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.19.0.tgz",
+      "integrity": "sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==",
      "dev": true,
      "dependencies": {
        "@babel/helper-environment-visitor": "^7.18.9",
@@ -406,9 +406,9 @@
        "@babel/helper-simple-access": "^7.18.6",
        "@babel/helper-split-export-declaration": "^7.18.6",
        "@babel/helper-validator-identifier": "^7.18.6",
-        "@babel/template": "^7.18.6",
-        "@babel/traverse": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.19.0",
+        "@babel/types": "^7.19.0"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -427,9 +427,9 @@
      }
    },
    "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz",
-      "integrity": "sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz",
+      "integrity": "sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==",
      "dev": true,
      "engines": {
        "node": ">=6.9.0"
@@ -547,14 +547,14 @@
      }
    },
    "node_modules/@babel/helpers": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.18.9.tgz",
-      "integrity": "sha512-Jf5a+rbrLoR4eNdUmnFu8cN5eNJT6qdTdOg5IHIzq87WwyRw9PwguLFOWYgktN/60IP4fgDUawJvs7PjQIzELQ==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.19.0.tgz",
+      "integrity": "sha512-DRBCKGwIEdqY3+rPJgG/dKfQy9+08rHIAJx8q2p+HSWP87s2HCrQmaAMMyMll2kIXKCW0cO1RdQskx15Xakftg==",
      "dev": true,
      "dependencies": {
-        "@babel/template": "^7.18.6",
-        "@babel/traverse": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.19.0",
+        "@babel/types": "^7.19.0"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -574,9 +574,9 @@
      }
    },
    "node_modules/@babel/parser": {
-      "version": "7.18.13",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.13.tgz",
-      "integrity": "sha512-dgXcIfMuQ0kgzLB2b9tRZs7TTFFaGM2AbtA4fJgUUYukzGH4jwsS7hzQHEGs67jdehpm22vkgKwvbU+aEflgwg==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.0.tgz",
+      "integrity": "sha512-74bEXKX2h+8rrfQUfsBfuZZHzsEs6Eql4pqy/T4Nn6Y9wNPggQOqD6z6pn5Bl8ZfysKouFZT/UXEH94ummEeQw==",
      "dev": true,
      "bin": {
        "parser": "bin/babel-parser.js"
@@ -618,13 +618,13 @@
      }
    },
    "node_modules/@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.18.10.tgz",
-      "integrity": "sha512-1mFuY2TOsR1hxbjCo4QL+qlIjV07p4H4EUYw2J/WCqsvFV6V9X9z9YhXbWndc/4fw+hYGlDT7egYxliMp5O6Ew==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.19.0.tgz",
+      "integrity": "sha512-nhEByMUTx3uZueJ/QkJuSlCfN4FGg+xy+vRsfGQGzSauq5ks2Deid2+05Q3KhfaUjvec1IGhw/Zm3cFm8JigTQ==",
      "dev": true,
      "dependencies": {
        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
        "@babel/helper-remap-async-to-generator": "^7.18.9",
        "@babel/plugin-syntax-async-generators": "^7.8.4"
      },
@@ -1121,16 +1121,17 @@
      }
    },
    "node_modules/@babel/plugin-transform-classes": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.18.9.tgz",
-      "integrity": "sha512-EkRQxsxoytpTlKJmSPYrsOMjCILacAjtSVkd4gChEe2kXjFCun3yohhW5I7plXJhCemM0gKsaGMcO8tinvCA5g==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.19.0.tgz",
+      "integrity": "sha512-YfeEE9kCjqTS9IitkgfJuxjcEtLUHMqa8yUJ6zdz8vR7hKuo6mOy2C05P0F1tdMmDCeuyidKnlrw/iTppHcr2A==",
      "dev": true,
      "dependencies": {
        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-compilation-targets": "^7.19.0",
        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-function-name": "^7.19.0",
        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
        "@babel/helper-replace-supers": "^7.18.9",
        "@babel/helper-split-export-declaration": "^7.18.6",
        "globals": "^11.1.0"
@@ -1158,9 +1159,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-destructuring": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.9.tgz",
-      "integrity": "sha512-p5VCYNddPLkZTq4XymQIaIfZNJwT9YsjkPOhkVEqt6QIpQFZVM9IltqqYpOEkJoN1DPznmxUDyZ5CTZs/ZCuHA==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.13.tgz",
+      "integrity": "sha512-TodpQ29XekIsex2A+YJPj5ax2plkGa8YYY6mFjCohk/IG9IY42Rtuj1FuDeemfg2ipxIFLzPeA83SIBnlhSIow==",
      "dev": true,
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.18.9"
@@ -1317,14 +1318,14 @@
      }
    },
    "node_modules/@babel/plugin-transform-modules-systemjs": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.9.tgz",
-      "integrity": "sha512-zY/VSIbbqtoRoJKo2cDTewL364jSlZGvn0LKOf9ntbfxOvjfmyrdtEEOAdswOswhZEb8UH3jDkCKHd1sPgsS0A==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.19.0.tgz",
+      "integrity": "sha512-x9aiR0WXAWmOWsqcsnrzGR+ieaTMVyGyffPVA7F8cXAGt/UxefYv6uSHZLkAFChN5M5Iy1+wjE+xJuPt22H39A==",
      "dev": true,
      "dependencies": {
        "@babel/helper-hoist-variables": "^7.18.6",
-        "@babel/helper-module-transforms": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-module-transforms": "^7.19.0",
+        "@babel/helper-plugin-utils": "^7.19.0",
        "@babel/helper-validator-identifier": "^7.18.6",
        "babel-plugin-dynamic-import-node": "^2.3.3"
      },
@@ -1352,13 +1353,13 @@
      }
    },
    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.18.6.tgz",
-      "integrity": "sha512-UmEOGF8XgaIqD74bC8g7iV3RYj8lMf0Bw7NJzvnS9qQhM4mg+1WHKotUIdjxgD2RGrgFLZZPCFPFj3P/kVDYhg==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.19.0.tgz",
+      "integrity": "sha512-HDSuqOQzkU//kfGdiHBt71/hkDTApw4U/cMVgKgX7PqfB3LOaK+2GtCEsBu1dL9CkswDm0Gwehht1dCr421ULQ==",
      "dev": true,
      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.19.0",
+        "@babel/helper-plugin-utils": "^7.19.0"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -1475,12 +1476,12 @@
      }
    },
    "node_modules/@babel/plugin-transform-spread": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.18.9.tgz",
-      "integrity": "sha512-39Q814wyoOPtIB/qGopNIL9xDChOE1pNU0ZY5dO0owhiVt/5kFm4li+/bBtwc7QotG0u5EPzqhZdjMtmqBqyQA==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.19.0.tgz",
+      "integrity": "sha512-RsuMk7j6n+r752EtzyScnWkQyuJdli6LdO5Klv8Yx0OfPVTcQkIUfS8clx5e9yHXzlnhOZF3CbQ8C2uP5j074w==",
      "dev": true,
      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9"
      },
      "engines": {
@@ -1567,18 +1568,18 @@
      }
    },
    "node_modules/@babel/preset-env": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.18.10.tgz",
-      "integrity": "sha512-wVxs1yjFdW3Z/XkNfXKoblxoHgbtUF7/l3PvvP4m02Qz9TZ6uZGxRVYjSQeR87oQmHco9zWitW5J82DJ7sCjvA==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.19.0.tgz",
+      "integrity": "sha512-1YUju1TAFuzjIQqNM9WsF4U6VbD/8t3wEAlw3LFYuuEr+ywqLRcSXxFKz4DCEj+sN94l/XTDiUXYRrsvMpz9WQ==",
      "dev": true,
      "dependencies": {
-        "@babel/compat-data": "^7.18.8",
-        "@babel/helper-compilation-targets": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/compat-data": "^7.19.0",
+        "@babel/helper-compilation-targets": "^7.19.0",
+        "@babel/helper-plugin-utils": "^7.19.0",
        "@babel/helper-validator-option": "^7.18.6",
        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.18.6",
        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.18.9",
-        "@babel/plugin-proposal-async-generator-functions": "^7.18.10",
+        "@babel/plugin-proposal-async-generator-functions": "^7.19.0",
        "@babel/plugin-proposal-class-properties": "^7.18.6",
        "@babel/plugin-proposal-class-static-block": "^7.18.6",
        "@babel/plugin-proposal-dynamic-import": "^7.18.6",
@@ -1612,9 +1613,9 @@
        "@babel/plugin-transform-async-to-generator": "^7.18.6",
        "@babel/plugin-transform-block-scoped-functions": "^7.18.6",
        "@babel/plugin-transform-block-scoping": "^7.18.9",
-        "@babel/plugin-transform-classes": "^7.18.9",
+        "@babel/plugin-transform-classes": "^7.19.0",
        "@babel/plugin-transform-computed-properties": "^7.18.9",
-        "@babel/plugin-transform-destructuring": "^7.18.9",
+        "@babel/plugin-transform-destructuring": "^7.18.13",
        "@babel/plugin-transform-dotall-regex": "^7.18.6",
        "@babel/plugin-transform-duplicate-keys": "^7.18.9",
        "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
@@ -1624,9 +1625,9 @@
        "@babel/plugin-transform-member-expression-literals": "^7.18.6",
        "@babel/plugin-transform-modules-amd": "^7.18.6",
        "@babel/plugin-transform-modules-commonjs": "^7.18.6",
-        "@babel/plugin-transform-modules-systemjs": "^7.18.9",
+        "@babel/plugin-transform-modules-systemjs": "^7.19.0",
        "@babel/plugin-transform-modules-umd": "^7.18.6",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.18.6",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.19.0",
        "@babel/plugin-transform-new-target": "^7.18.6",
        "@babel/plugin-transform-object-super": "^7.18.6",
        "@babel/plugin-transform-parameters": "^7.18.8",
@@ -1634,14 +1635,14 @@
        "@babel/plugin-transform-regenerator": "^7.18.6",
        "@babel/plugin-transform-reserved-words": "^7.18.6",
        "@babel/plugin-transform-shorthand-properties": "^7.18.6",
-        "@babel/plugin-transform-spread": "^7.18.9",
+        "@babel/plugin-transform-spread": "^7.19.0",
        "@babel/plugin-transform-sticky-regex": "^7.18.6",
        "@babel/plugin-transform-template-literals": "^7.18.9",
        "@babel/plugin-transform-typeof-symbol": "^7.18.9",
        "@babel/plugin-transform-unicode-escapes": "^7.18.10",
        "@babel/plugin-transform-unicode-regex": "^7.18.6",
        "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.18.10",
+        "@babel/types": "^7.19.0",
        "babel-plugin-polyfill-corejs2": "^0.3.2",
        "babel-plugin-polyfill-corejs3": "^0.5.3",
        "babel-plugin-polyfill-regenerator": "^0.4.0",
@@ -1698,19 +1699,19 @@
      }
    },
    "node_modules/@babel/traverse": {
-      "version": "7.18.13",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.13.tgz",
-      "integrity": "sha512-N6kt9X1jRMLPxxxPYWi7tgvJRH/rtoU+dbKAPDM44RFHiMH8igdsaSBgFeskhSl/kLWLDUvIh1RXCrTmg0/zvA==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.0.tgz",
+      "integrity": "sha512-4pKpFRDh+utd2mbRC8JLnlsMUii3PMHjpL6a0SZ4NMZy7YFP9aXORxEhdMVOc9CpWtDF09IkciQLEhK7Ml7gRA==",
      "dev": true,
      "dependencies": {
        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.13",
+        "@babel/generator": "^7.19.0",
        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-function-name": "^7.19.0",
        "@babel/helper-hoist-variables": "^7.18.6",
        "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/parser": "^7.18.13",
-        "@babel/types": "^7.18.13",
+        "@babel/parser": "^7.19.0",
+        "@babel/types": "^7.19.0",
        "debug": "^4.1.0",
        "globals": "^11.1.0"
      },
@@ -1719,9 +1720,9 @@
      }
    },
    "node_modules/@babel/types": {
-      "version": "7.18.13",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.13.tgz",
-      "integrity": "sha512-ePqfTihzW0W6XAU+aMw2ykilisStJfDnsejDCXRchCcMJ4O0+8DhPXf2YUbZ6wjBlsEmZwLK/sPweWtu8hcJYQ==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.19.0.tgz",
+      "integrity": "sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==",
      "dev": true,
      "dependencies": {
        "@babel/helper-string-parser": "^7.18.10",
@@ -2225,9 +2226,9 @@
      "dev": true
    },
    "node_modules/@rollup/plugin-node-resolve": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.3.0.tgz",
-      "integrity": "sha512-Lus8rbUo1eEcnS4yTFKLZrVumLPY+YayBdWXgFSHYhTT2iJbMhoaaBL3xl5NCdeRytErGr8tZ0L71BMRmnlwSw==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-14.0.0.tgz",
+      "integrity": "sha512-XkWfpgp/zGiFu8LS+JAiQeZN4oYYA4/ViFJiZhwQegTg5ZbzKTvM9YyKXVBNnmZ8Et76WnlVgwRUu1rhKF4ayw==",
      "dev": true,
      "dependencies": {
        "@rollup/pluginutils": "^3.1.0",
@@ -2241,7 +2242,7 @@
        "node": ">= 10.0.0"
      },
      "peerDependencies": {
-        "rollup": "^2.42.0"
+        "rollup": "^2.78.0"
      }
    },
    "node_modules/@rollup/plugin-node-resolve/node_modules/@rollup/pluginutils": {
@@ -2398,9 +2399,9 @@
      }
    },
    "node_modules/@tabler/icons": {
-      "version": "1.91.1",
-      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.91.1.tgz",
-      "integrity": "sha512-4RSrNc7W8QOdpUwqAqvUQkxZeFyV3oh1XGG1KThIBYQgGvwz7c75C6DfJV399ietESFN6zPAbEfDVvdx66lAgw==",
+      "version": "1.95.1",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.95.1.tgz",
+      "integrity": "sha512-b3fwRzYwQPKqMT9Vw1AMv2I/uEAwrPgicMeGg9Qvg1mckFvy60iTC4MQkdVlgUeLxdPKDO+yGystfVrQp2OPyA==",
      "funding": {
        "type": "github",
        "url": "https://github.com/sponsors/codecalm"
@@ -4275,9 +4276,9 @@
      }
    },
    "node_modules/chromatic": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.8.0.tgz",
-      "integrity": "sha512-8xwweZKZMO+DlvbLTcn08sl0yM+SHlBtr7FilglaF7HZKvjvlXe+3DKtsB2YKRPEiEVeaOsZ4hCQSQCiEGAw7A==",
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.9.0.tgz",
+      "integrity": "sha512-ykfUHLyznZTPi8djKMfrBoOpWinSUfa2HDLmvHgYc2e6Jc4Oqm5jYW9S7l92navSF+EOzov90L7W8rX2NpiBjQ==",
      "dev": true,
      "dependencies": {
        "@discoveryjs/json-ext": "^0.5.7",
@@ -14353,9 +14354,9 @@
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
    },
    "node_modules/sass": {
-      "version": "1.54.7",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.7.tgz",
-      "integrity": "sha512-3q7MQz7sCpVG6TLhUfZwGOcd2/sm2ghYN2JEdRjNiW04ILdvahdo9GuAs+bxsxZ3hDCKv+wUT5w0iFWGU0CxlA==",
+      "version": "1.54.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.8.tgz",
+      "integrity": "sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==",
      "dev": true,
      "dependencies": {
        "chokidar": ">=3.0.0 <4.0.0",
@@ -14376,7 +14377,7 @@
      "dependencies": {
        "glob": "^7.0.0",
        "lodash": "^4.17.11",
-        "scss-tokenizer": "^0.3.0",
+        "scss-tokenizer": "^0.4.3",
        "yargs": "^17.2.1"
      },
      "bin": {
@@ -14411,9 +14412,9 @@
      }
    },
    "node_modules/scss-tokenizer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.3.0.tgz",
-      "integrity": "sha512-14Zl9GcbBvOT9057ZKjpz5yPOyUWG2ojd9D5io28wHRYsOrs7U95Q+KNL87+32p8rc+LvDpbu/i9ZYjM9Q+FsQ==",
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.4.3.tgz",
+      "integrity": "sha512-raKLgf1LI5QMQnG+RxHz6oK0sL3x3I4FN2UDLqgLOGO8hodECNnNh5BXn7fAyBxrA8zVzdQizQ6XjNJQ+uBwMw==",
      "dependencies": {
        "js-base64": "^2.4.3",
        "source-map": "^0.7.1"
@@ -17461,27 +17462,27 @@
      }
    },
    "@babel/compat-data": {
-      "version": "7.18.8",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.18.8.tgz",
-      "integrity": "sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.19.0.tgz",
+      "integrity": "sha512-y5rqgTTPTmaF5e2nVhOxw+Ur9HDJLsWb6U/KpgUzRZEdPfE6VOubXBKLdbcUTijzRptednSBDQbYZBOSqJxpJw==",
      "dev": true
    },
    "@babel/core": {
-      "version": "7.18.13",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.13.tgz",
-      "integrity": "sha512-ZisbOvRRusFktksHSG6pjj1CSvkPkcZq/KHD45LAkVP/oiHJkNBZWfpvlLmX8OtHDG8IuzsFlVRWo08w7Qxn0A==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.19.0.tgz",
+      "integrity": "sha512-reM4+U7B9ss148rh2n1Qs9ASS+w94irYXga7c2jaQv9RVzpS7Mv1a9rnYYwuDa45G+DkORt9g6An2k/V4d9LbQ==",
      "dev": true,
      "requires": {
        "@ampproject/remapping": "^2.1.0",
        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.13",
-        "@babel/helper-compilation-targets": "^7.18.9",
-        "@babel/helper-module-transforms": "^7.18.9",
-        "@babel/helpers": "^7.18.9",
-        "@babel/parser": "^7.18.13",
+        "@babel/generator": "^7.19.0",
+        "@babel/helper-compilation-targets": "^7.19.0",
+        "@babel/helper-module-transforms": "^7.19.0",
+        "@babel/helpers": "^7.19.0",
+        "@babel/parser": "^7.19.0",
        "@babel/template": "^7.18.10",
-        "@babel/traverse": "^7.18.13",
-        "@babel/types": "^7.18.13",
+        "@babel/traverse": "^7.19.0",
+        "@babel/types": "^7.19.0",
        "convert-source-map": "^1.7.0",
        "debug": "^4.1.0",
        "gensync": "^1.0.0-beta.2",
@@ -17490,12 +17491,12 @@
      }
    },
    "@babel/generator": {
-      "version": "7.18.13",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.13.tgz",
-      "integrity": "sha512-CkPg8ySSPuHTYPJYo7IRALdqyjM9HCbt/3uOBEFbzyGVP6Mn8bwFPB0jX6982JVNBlYzM1nnPkfjuXSOPtQeEQ==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.19.0.tgz",
+      "integrity": "sha512-S1ahxf1gZ2dpoiFgA+ohK9DIpz50bJ0CWs7Zlzb54Z4sG8qmdIrGrVqmy1sAtTVRb+9CU6U8VqT9L0Zj7hxHVg==",
      "dev": true,
      "requires": {
-        "@babel/types": "^7.18.13",
+        "@babel/types": "^7.19.0",
        "@jridgewell/gen-mapping": "^0.3.2",
        "jsesc": "^2.5.1"
      },
@@ -17533,12 +17534,12 @@
      }
    },
    "@babel/helper-compilation-targets": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.9.tgz",
-      "integrity": "sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.0.tgz",
+      "integrity": "sha512-Ai5bNWXIvwDvWM7njqsG3feMlL9hCVQsPYXodsZyLwshYkZVJt59Gftau4VrE8S9IT9asd2uSP1hG6wCNw+sXA==",
      "dev": true,
      "requires": {
-        "@babel/compat-data": "^7.18.8",
+        "@babel/compat-data": "^7.19.0",
        "@babel/helper-validator-option": "^7.18.6",
        "browserslist": "^4.20.2",
        "semver": "^6.3.0"
@@ -17560,9 +17561,9 @@
      }
    },
    "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.18.6.tgz",
-      "integrity": "sha512-7LcpH1wnQLGrI+4v+nPp+zUvIkF9x0ddv1Hkdue10tg3gmRnLy97DXh4STiOf1qeIInyD69Qv5kKSZzKD8B/7A==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.19.0.tgz",
+      "integrity": "sha512-htnV+mHX32DF81amCDrwIDr8nrp1PTm+3wfBN9/v8QJOLEioOCOG7qNyq0nHeFiWbT3Eb7gsPwEmV64UCQ1jzw==",
      "dev": true,
      "requires": {
        "@babel/helper-annotate-as-pure": "^7.18.6",
@@ -17599,13 +17600,13 @@
      }
    },
    "@babel/helper-function-name": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.18.9.tgz",
-      "integrity": "sha512-fJgWlZt7nxGksJS9a0XdSaI4XvpExnNIgRP+rVefWh5U7BL8pPuir6SJUmFKRfjWQ51OtWSzwOxhaH/EBWWc0A==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz",
+      "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==",
      "dev": true,
      "requires": {
-        "@babel/template": "^7.18.6",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.18.10",
+        "@babel/types": "^7.19.0"
      }
    },
    "@babel/helper-hoist-variables": {
@@ -17636,9 +17637,9 @@
      }
    },
    "@babel/helper-module-transforms": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.18.9.tgz",
-      "integrity": "sha512-KYNqY0ICwfv19b31XzvmI/mfcylOzbLtowkw+mfvGPAQ3kfCnMLYbED3YecL5tPd8nAYFQFAd6JHp2LxZk/J1g==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.19.0.tgz",
+      "integrity": "sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==",
      "dev": true,
      "requires": {
        "@babel/helper-environment-visitor": "^7.18.9",
@@ -17646,9 +17647,9 @@
        "@babel/helper-simple-access": "^7.18.6",
        "@babel/helper-split-export-declaration": "^7.18.6",
        "@babel/helper-validator-identifier": "^7.18.6",
-        "@babel/template": "^7.18.6",
-        "@babel/traverse": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.19.0",
+        "@babel/types": "^7.19.0"
      }
    },
    "@babel/helper-optimise-call-expression": {
@@ -17661,9 +17662,9 @@
      }
    },
    "@babel/helper-plugin-utils": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz",
-      "integrity": "sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz",
+      "integrity": "sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==",
      "dev": true
    },
    "@babel/helper-remap-async-to-generator": {
@@ -17748,14 +17749,14 @@
      }
    },
    "@babel/helpers": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.18.9.tgz",
-      "integrity": "sha512-Jf5a+rbrLoR4eNdUmnFu8cN5eNJT6qdTdOg5IHIzq87WwyRw9PwguLFOWYgktN/60IP4fgDUawJvs7PjQIzELQ==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.19.0.tgz",
+      "integrity": "sha512-DRBCKGwIEdqY3+rPJgG/dKfQy9+08rHIAJx8q2p+HSWP87s2HCrQmaAMMyMll2kIXKCW0cO1RdQskx15Xakftg==",
      "dev": true,
      "requires": {
-        "@babel/template": "^7.18.6",
-        "@babel/traverse": "^7.18.9",
-        "@babel/types": "^7.18.9"
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.19.0",
+        "@babel/types": "^7.19.0"
      }
    },
    "@babel/highlight": {
@@ -17769,9 +17770,9 @@
      }
    },
    "@babel/parser": {
-      "version": "7.18.13",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.13.tgz",
-      "integrity": "sha512-dgXcIfMuQ0kgzLB2b9tRZs7TTFFaGM2AbtA4fJgUUYukzGH4jwsS7hzQHEGs67jdehpm22vkgKwvbU+aEflgwg==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.0.tgz",
+      "integrity": "sha512-74bEXKX2h+8rrfQUfsBfuZZHzsEs6Eql4pqy/T4Nn6Y9wNPggQOqD6z6pn5Bl8ZfysKouFZT/UXEH94ummEeQw==",
      "dev": true
    },
    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
@@ -17795,13 +17796,13 @@
      }
    },
    "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.18.10.tgz",
-      "integrity": "sha512-1mFuY2TOsR1hxbjCo4QL+qlIjV07p4H4EUYw2J/WCqsvFV6V9X9z9YhXbWndc/4fw+hYGlDT7egYxliMp5O6Ew==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.19.0.tgz",
+      "integrity": "sha512-nhEByMUTx3uZueJ/QkJuSlCfN4FGg+xy+vRsfGQGzSauq5ks2Deid2+05Q3KhfaUjvec1IGhw/Zm3cFm8JigTQ==",
      "dev": true,
      "requires": {
        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
        "@babel/helper-remap-async-to-generator": "^7.18.9",
        "@babel/plugin-syntax-async-generators": "^7.8.4"
      }
@@ -18127,16 +18128,17 @@
      }
    },
    "@babel/plugin-transform-classes": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.18.9.tgz",
-      "integrity": "sha512-EkRQxsxoytpTlKJmSPYrsOMjCILacAjtSVkd4gChEe2kXjFCun3yohhW5I7plXJhCemM0gKsaGMcO8tinvCA5g==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.19.0.tgz",
+      "integrity": "sha512-YfeEE9kCjqTS9IitkgfJuxjcEtLUHMqa8yUJ6zdz8vR7hKuo6mOy2C05P0F1tdMmDCeuyidKnlrw/iTppHcr2A==",
      "dev": true,
      "requires": {
        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-compilation-targets": "^7.19.0",
        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-function-name": "^7.19.0",
        "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
        "@babel/helper-replace-supers": "^7.18.9",
        "@babel/helper-split-export-declaration": "^7.18.6",
        "globals": "^11.1.0"
@@ -18152,9 +18154,9 @@
      }
    },
    "@babel/plugin-transform-destructuring": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.9.tgz",
-      "integrity": "sha512-p5VCYNddPLkZTq4XymQIaIfZNJwT9YsjkPOhkVEqt6QIpQFZVM9IltqqYpOEkJoN1DPznmxUDyZ5CTZs/ZCuHA==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.13.tgz",
+      "integrity": "sha512-TodpQ29XekIsex2A+YJPj5ax2plkGa8YYY6mFjCohk/IG9IY42Rtuj1FuDeemfg2ipxIFLzPeA83SIBnlhSIow==",
      "dev": true,
      "requires": {
        "@babel/helper-plugin-utils": "^7.18.9"
@@ -18251,14 +18253,14 @@
      }
    },
    "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.9.tgz",
-      "integrity": "sha512-zY/VSIbbqtoRoJKo2cDTewL364jSlZGvn0LKOf9ntbfxOvjfmyrdtEEOAdswOswhZEb8UH3jDkCKHd1sPgsS0A==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.19.0.tgz",
+      "integrity": "sha512-x9aiR0WXAWmOWsqcsnrzGR+ieaTMVyGyffPVA7F8cXAGt/UxefYv6uSHZLkAFChN5M5Iy1+wjE+xJuPt22H39A==",
      "dev": true,
      "requires": {
        "@babel/helper-hoist-variables": "^7.18.6",
-        "@babel/helper-module-transforms": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-module-transforms": "^7.19.0",
+        "@babel/helper-plugin-utils": "^7.19.0",
        "@babel/helper-validator-identifier": "^7.18.6",
        "babel-plugin-dynamic-import-node": "^2.3.3"
      }
@@ -18274,13 +18276,13 @@
      }
    },
    "@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.18.6.tgz",
-      "integrity": "sha512-UmEOGF8XgaIqD74bC8g7iV3RYj8lMf0Bw7NJzvnS9qQhM4mg+1WHKotUIdjxgD2RGrgFLZZPCFPFj3P/kVDYhg==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.19.0.tgz",
+      "integrity": "sha512-HDSuqOQzkU//kfGdiHBt71/hkDTApw4U/cMVgKgX7PqfB3LOaK+2GtCEsBu1dL9CkswDm0Gwehht1dCr421ULQ==",
      "dev": true,
      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.19.0",
+        "@babel/helper-plugin-utils": "^7.19.0"
      }
    },
    "@babel/plugin-transform-new-target": {
@@ -18349,12 +18351,12 @@
      }
    },
    "@babel/plugin-transform-spread": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.18.9.tgz",
-      "integrity": "sha512-39Q814wyoOPtIB/qGopNIL9xDChOE1pNU0ZY5dO0owhiVt/5kFm4li+/bBtwc7QotG0u5EPzqhZdjMtmqBqyQA==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.19.0.tgz",
+      "integrity": "sha512-RsuMk7j6n+r752EtzyScnWkQyuJdli6LdO5Klv8Yx0OfPVTcQkIUfS8clx5e9yHXzlnhOZF3CbQ8C2uP5j074w==",
      "dev": true,
      "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.19.0",
        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9"
      }
    },
@@ -18405,18 +18407,18 @@
      }
    },
    "@babel/preset-env": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.18.10.tgz",
-      "integrity": "sha512-wVxs1yjFdW3Z/XkNfXKoblxoHgbtUF7/l3PvvP4m02Qz9TZ6uZGxRVYjSQeR87oQmHco9zWitW5J82DJ7sCjvA==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.19.0.tgz",
+      "integrity": "sha512-1YUju1TAFuzjIQqNM9WsF4U6VbD/8t3wEAlw3LFYuuEr+ywqLRcSXxFKz4DCEj+sN94l/XTDiUXYRrsvMpz9WQ==",
      "dev": true,
      "requires": {
-        "@babel/compat-data": "^7.18.8",
-        "@babel/helper-compilation-targets": "^7.18.9",
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/compat-data": "^7.19.0",
+        "@babel/helper-compilation-targets": "^7.19.0",
+        "@babel/helper-plugin-utils": "^7.19.0",
        "@babel/helper-validator-option": "^7.18.6",
        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.18.6",
        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.18.9",
-        "@babel/plugin-proposal-async-generator-functions": "^7.18.10",
+        "@babel/plugin-proposal-async-generator-functions": "^7.19.0",
        "@babel/plugin-proposal-class-properties": "^7.18.6",
        "@babel/plugin-proposal-class-static-block": "^7.18.6",
        "@babel/plugin-proposal-dynamic-import": "^7.18.6",
@@ -18450,9 +18452,9 @@
        "@babel/plugin-transform-async-to-generator": "^7.18.6",
        "@babel/plugin-transform-block-scoped-functions": "^7.18.6",
        "@babel/plugin-transform-block-scoping": "^7.18.9",
-        "@babel/plugin-transform-classes": "^7.18.9",
+        "@babel/plugin-transform-classes": "^7.19.0",
        "@babel/plugin-transform-computed-properties": "^7.18.9",
-        "@babel/plugin-transform-destructuring": "^7.18.9",
+        "@babel/plugin-transform-destructuring": "^7.18.13",
        "@babel/plugin-transform-dotall-regex": "^7.18.6",
        "@babel/plugin-transform-duplicate-keys": "^7.18.9",
        "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
@@ -18462,9 +18464,9 @@
        "@babel/plugin-transform-member-expression-literals": "^7.18.6",
        "@babel/plugin-transform-modules-amd": "^7.18.6",
        "@babel/plugin-transform-modules-commonjs": "^7.18.6",
-        "@babel/plugin-transform-modules-systemjs": "^7.18.9",
+        "@babel/plugin-transform-modules-systemjs": "^7.19.0",
        "@babel/plugin-transform-modules-umd": "^7.18.6",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.18.6",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.19.0",
        "@babel/plugin-transform-new-target": "^7.18.6",
        "@babel/plugin-transform-object-super": "^7.18.6",
        "@babel/plugin-transform-parameters": "^7.18.8",
@@ -18472,14 +18474,14 @@
        "@babel/plugin-transform-regenerator": "^7.18.6",
        "@babel/plugin-transform-reserved-words": "^7.18.6",
        "@babel/plugin-transform-shorthand-properties": "^7.18.6",
-        "@babel/plugin-transform-spread": "^7.18.9",
+        "@babel/plugin-transform-spread": "^7.19.0",
        "@babel/plugin-transform-sticky-regex": "^7.18.6",
        "@babel/plugin-transform-template-literals": "^7.18.9",
        "@babel/plugin-transform-typeof-symbol": "^7.18.9",
        "@babel/plugin-transform-unicode-escapes": "^7.18.10",
        "@babel/plugin-transform-unicode-regex": "^7.18.6",
        "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.18.10",
+        "@babel/types": "^7.19.0",
        "babel-plugin-polyfill-corejs2": "^0.3.2",
        "babel-plugin-polyfill-corejs3": "^0.5.3",
        "babel-plugin-polyfill-regenerator": "^0.4.0",
@@ -18521,27 +18523,27 @@
      }
    },
    "@babel/traverse": {
-      "version": "7.18.13",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.13.tgz",
-      "integrity": "sha512-N6kt9X1jRMLPxxxPYWi7tgvJRH/rtoU+dbKAPDM44RFHiMH8igdsaSBgFeskhSl/kLWLDUvIh1RXCrTmg0/zvA==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.0.tgz",
+      "integrity": "sha512-4pKpFRDh+utd2mbRC8JLnlsMUii3PMHjpL6a0SZ4NMZy7YFP9aXORxEhdMVOc9CpWtDF09IkciQLEhK7Ml7gRA==",
      "dev": true,
      "requires": {
        "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.13",
+        "@babel/generator": "^7.19.0",
        "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-function-name": "^7.19.0",
        "@babel/helper-hoist-variables": "^7.18.6",
        "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/parser": "^7.18.13",
-        "@babel/types": "^7.18.13",
+        "@babel/parser": "^7.19.0",
+        "@babel/types": "^7.19.0",
        "debug": "^4.1.0",
        "globals": "^11.1.0"
      }
    },
    "@babel/types": {
-      "version": "7.18.13",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.13.tgz",
-      "integrity": "sha512-ePqfTihzW0W6XAU+aMw2ykilisStJfDnsejDCXRchCcMJ4O0+8DhPXf2YUbZ6wjBlsEmZwLK/sPweWtu8hcJYQ==",
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.19.0.tgz",
+      "integrity": "sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==",
      "dev": true,
      "requires": {
        "@babel/helper-string-parser": "^7.18.10",
@@ -18941,9 +18943,9 @@
      }
    },
    "@rollup/plugin-node-resolve": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.3.0.tgz",
-      "integrity": "sha512-Lus8rbUo1eEcnS4yTFKLZrVumLPY+YayBdWXgFSHYhTT2iJbMhoaaBL3xl5NCdeRytErGr8tZ0L71BMRmnlwSw==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-14.0.0.tgz",
+      "integrity": "sha512-XkWfpgp/zGiFu8LS+JAiQeZN4oYYA4/ViFJiZhwQegTg5ZbzKTvM9YyKXVBNnmZ8Et76WnlVgwRUu1rhKF4ayw==",
      "dev": true,
      "requires": {
        "@rollup/pluginutils": "^3.1.0",
@@ -19080,9 +19082,9 @@
      }
    },
    "@tabler/icons": {
-      "version": "1.91.1",
-      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.91.1.tgz",
-      "integrity": "sha512-4RSrNc7W8QOdpUwqAqvUQkxZeFyV3oh1XGG1KThIBYQgGvwz7c75C6DfJV399ietESFN6zPAbEfDVvdx66lAgw==",
+      "version": "1.95.1",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.95.1.tgz",
+      "integrity": "sha512-b3fwRzYwQPKqMT9Vw1AMv2I/uEAwrPgicMeGg9Qvg1mckFvy60iTC4MQkdVlgUeLxdPKDO+yGystfVrQp2OPyA==",
      "requires": {}
    },
    "@tootallnate/once": {
@@ -20495,9 +20497,9 @@
      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
    },
    "chromatic": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.8.0.tgz",
-      "integrity": "sha512-8xwweZKZMO+DlvbLTcn08sl0yM+SHlBtr7FilglaF7HZKvjvlXe+3DKtsB2YKRPEiEVeaOsZ4hCQSQCiEGAw7A==",
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.9.0.tgz",
+      "integrity": "sha512-ykfUHLyznZTPi8djKMfrBoOpWinSUfa2HDLmvHgYc2e6Jc4Oqm5jYW9S7l92navSF+EOzov90L7W8rX2NpiBjQ==",
      "dev": true,
      "requires": {
        "@discoveryjs/json-ext": "^0.5.7",
@@ -28268,9 +28270,9 @@
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
    },
    "sass": {
-      "version": "1.54.7",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.7.tgz",
-      "integrity": "sha512-3q7MQz7sCpVG6TLhUfZwGOcd2/sm2ghYN2JEdRjNiW04ILdvahdo9GuAs+bxsxZ3hDCKv+wUT5w0iFWGU0CxlA==",
+      "version": "1.54.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.8.tgz",
+      "integrity": "sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==",
      "dev": true,
      "requires": {
        "chokidar": ">=3.0.0 <4.0.0",
@@ -28293,7 +28295,7 @@
      "requires": {
        "glob": "^7.0.0",
        "lodash": "^4.17.11",
-        "scss-tokenizer": "^0.3.0",
+        "scss-tokenizer": "^0.4.3",
        "yargs": "^17.2.1"
      }
    },
@@ -28313,9 +28315,9 @@
      }
    },
    "scss-tokenizer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.3.0.tgz",
-      "integrity": "sha512-14Zl9GcbBvOT9057ZKjpz5yPOyUWG2ojd9D5io28wHRYsOrs7U95Q+KNL87+32p8rc+LvDpbu/i9ZYjM9Q+FsQ==",
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.4.3.tgz",
+      "integrity": "sha512-raKLgf1LI5QMQnG+RxHz6oK0sL3x3I4FN2UDLqgLOGO8hodECNnNh5BXn7fAyBxrA8zVzdQizQ6XjNJQ+uBwMw==",
      "requires": {
        "js-base64": "^2.4.3",
        "source-map": "^0.7.1"
@@ -2,6 +2,7 @@
  "name": "@tabler/core",
  "version": "1.0.0-beta11",
  "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
+  "homepage": "https://tabler.io",
  "scripts": {
    "start": "gulp start",
    "start-plugins": "gulp start --with-plugins",
@@ -55,12 +56,55 @@
  "umd:main": "dist/js/tabler.min.js",
  "module": "dist/js/tabler.esm.js",
  "main": "dist/js/tabler.js",
-  "homepage": "https://tabler.io",
+  "bundlewatch": {
+    "files": [
+      {
+        "path": "./dist/css/tabler.css",
+        "maxSize": "61 kB"
+      },
+      {
+        "path": "./dist/css/tabler.min.css",
+        "maxSize": "55 kB"
+      },
+      {
+        "path": "./dist/css/tabler.rtl.css",
+        "maxSize": "61 kB"
+      },
+      {
+        "path": "./dist/css/tabler.rtl.min.css",
+        "maxSize": "55 kB"
+      },
+      {
+        "path": "./dist/css/tabler-flags.css",
+        "maxSize": "2 kB"
+      },
+      {
+        "path": "./dist/css/tabler-flags.min.css",
+        "maxSize": "2 kB"
+      },
+      {
+        "path": "./dist/css/tabler-payments.css",
+        "maxSize": "2 kB"
+      },
+      {
+        "path": "./dist/css/tabler-payments.min.css",
+        "maxSize": "2 kB"
+      },
+      {
+        "path": "./dist/js/tabler.js",
+        "maxSize": "100 kB"
+      },
+      {
+        "path": "./dist/js/tabler.min.js",
+        "maxSize": "50 kB"
+      }
+    ]
+  },
  "devDependencies": {
-    "@babel/core": "^7.18.13",
-    "@babel/preset-env": "^7.18.10",
+    "@babel/core": "^7.19.0",
+    "@babel/preset-env": "^7.19.0",
    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-node-resolve": "^14.0.0",
    "@rollup/plugin-replace": "^4.0.0",
    "@rollup/pluginutils": "^4.2.1",
    "@rollup/stream": "^2.0.0",
@@ -70,7 +114,7 @@
    "browser-sync": "^2.27.10",
    "bundlewatch": "^0.3.3",
    "choices.js": "^10.1.0",
-    "chromatic": "^6.8.0",
+    "chromatic": "^6.9.0",
    "countup.js": "^2.3.2",
    "critical": "^4.0.1",
    "cross-spawn": "^7.0.3",
@@ -99,7 +143,7 @@
    "rollup": "^2.79.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-cleanup": "^3.2.1",
-    "sass": "^1.54.7",
+    "sass": "^1.54.8",
    "tinymce": "^6.1.2",
    "tom-select": "^2.1.0",
    "vinyl-buffer": "^1.0.1",
@@ -109,7 +153,7 @@
  },
  "dependencies": {
    "@popperjs/core": "^2.11.6",
-    "@tabler/icons": "^1.91.1",
+    "@tabler/icons": "^1.95.1",
    "bootstrap": "5.2.0",
    "node-sass": "^7.0.1"
  },
@@ -7,7 +7,7 @@ export const hexToRgba = (hex, opacity) => {
 }

 export const getColor = (color, opacity = 1) => {
-  const c = getComputedStyle(document.documentElement).getPropertyValue(`--${prefix}${color}`).trim()
+  const c = getComputedStyle(document.body).getPropertyValue(`--${prefix}${color}`).trim()

  if (opacity !== 1) {
 	 return hexToRgba(c, opacity)
@@ -119,6 +119,12 @@ base:
        sign-in:
          title: Sign in
          url: sign-in.html
+        sign-in-illustration:
+          title: Sign in with illustration
+          url: sign-in-illustration.html
+        sign-in-cover:
+          title: Sign in with cover
+          url: sign-in-cover.html
        sign-up:
          title: Sign up
          url: sign-up.html
@@ -18,7 +18,7 @@ Now you just need to tell Tabler to use your favorite font:

 ```html
 <style>
-body {
+:root {
  --tblr-font-sans-serif: 'Inter';
 }
 </style>
@@ -1,5 +1,5 @@
 {% assign person = site.data.people[0] %}
-<form class="card card-md" action="{{ site.base }}" method="get" autocomplete="off">
+<form class="card card-md" action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 	<div class="card-body text-center">
 		<div class="mb-4">
 			<h2 class="card-title">Account Locked</h2>
@@ -1,4 +1,4 @@
-<form class="card card-md" action="{{ site.base }}" method="get">
+<form class="card card-md" action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 	<div class="card-body">
 		<h2 class="card-title text-center mb-4">Forgot password</h2>

@@ -0,0 +1,13 @@
+<div class="card card-md">
+	<div class="card-body">
+		<div class="row align-items-center">
+			<div class="col">
+				<h2 class="h3">Enterprise-ready. Reach out for a custom quote.</h2>
+				<p class="m-0 text-muted">Tabler is designed to work great for large enterprises. Take a look at our feature comparison.</p>
+			</div>
+			<div class="col-auto">
+				{% include ui/button.html text="Book a demo" %}
+			</div>
+		</div>
+	</div>
+</div>
@@ -1,30 +1,8 @@
-<form class="card card-md" action="{{ site.base }}" method="get" autocomplete="off">
+<div class="card card-md">
 	<div class="card-body">
-		<h2 class="card-title text-center mb-4">Login to your account</h2>
+		<h2 class="h2 text-center mb-4">Login to your account</h2>

-		<div class="mb-3">
-			<label class="form-label">Email address</label>
-			<input type="email" class="form-control" placeholder="Enter email" autocomplete="off">
-		</div>
-		<div class="mb-2">
-			<label class="form-label">
-				Password
-				<span class="form-label-description">
-					<a href="{{ site.base }}/forgot-password.html">I forgot password</a>
-				</span>
-			</label>
-			{% include ui/form/input-group.html type="password" append-button="eye:Show password" flat=true placeholder="Password" %}
-		</div>
-		<div class="mb-2">
-			<label class="form-check">
-				<input type="checkbox" class="form-check-input"/>
-				<span class="form-check-label">Remember me on this device</span>
-			</label>
-		</div>
-
-		<div class="form-footer">
-			<button type="submit" class="btn btn-primary w-100">Sign in</button>
-		</div>
+		{% include forms/sign-in.html %}
 	</div>

 	{% include ui/hr.html text="or" %}
@@ -35,7 +13,7 @@
 			<div class="col">{% include ui/button.html color="white" block=true icon="brand-twitter" icon-color="twitter" text="Login with Twitter" %}</div>
 		</div>
 	</div>
-</form>
+</div>

 <div class="text-center text-muted mt-3">
 	Don't have account yet? <a href="{{ site.base }}/sign-up.html" tabindex="-1">Sign up</a>
@@ -1,4 +1,4 @@
-<form class="card card-md" action="{{ site.base }}" method="get">
+<form class="card card-md" action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 	<div class="card-body">
 		<h2 class="card-title text-center mb-4">Create new account</h2>

@@ -0,0 +1,25 @@
+<form action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
+	<div class="mb-3">
+		<label class="form-label">Email address</label>
+		<input type="email" class="form-control" placeholder="your@email.com" autocomplete="off">
+	</div>
+	<div class="mb-2">
+		<label class="form-label">
+			Password
+			<span class="form-label-description">
+					<a href="{{ site.base }}/forgot-password.html">I forgot password</a>
+				</span>
+		</label>
+		{% include ui/form/input-group.html type="password" append-button="eye:Show password" flat=true placeholder="Your password" %}
+	</div>
+	<div class="mb-2">
+		<label class="form-check">
+			<input type="checkbox" class="form-check-input"/>
+			<span class="form-check-label">Remember me on this device</span>
+		</label>
+	</div>
+
+	<div class="form-footer">
+		<button type="submit" class="btn btn-primary w-100">Sign in</button>
+	</div>
+</form>
@@ -1,17 +0,0 @@
-<div class="page-header mb-3">
-	<div class="row align-items-center mw-100">
-		<div class="col">
-			<div class="mb-1">
-				{% include ui/breadcrumb.html pages="Administration,Settings" %}
-			</div>
-			<h2 class="page-title">
-				<span class="text-truncate">Settings</span>
-			</h2>
-		</div>
-		<div class="col-auto">
-			<div class="btn-list">
-				{% include ui/button.html color="primary" text="Save Settings" %}
-			</div>
-		</div>
-	</div>
-</div>
@@ -1,7 +1,7 @@
 {% assign breakpoint = include.breakpoint | default: 'lg' %}

 <div{% if include.class %} class="{{ include.class }}"{% endif %}>
-	<form action="." method="get">
+	<form action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
 		{% include ui/form/input-icon.html prepend=true dark=include.dark rounded=include.rounded aria-label="Search in website" %}
 	</form>
 </div>
@@ -6,22 +6,28 @@
 	<div class="nav-item d-none d-{{ include.breakpoint }}-flex me-3">
 		<div class="btn-list">
 			{% if include.dark %}
-				{% include ui/button.html color="dark" icon="brand-github" text="Source code" href=site.github-url external=true %}
-				{% include ui/button.html color="dark" icon="heart" icon-color="pink" text="Sponsor" href=site.github-sponsors-url external=true %}
+			{% include ui/button.html color="dark" icon="brand-github" text="Source code" href=site.github-url
+			external=true %}
+			{% include ui/button.html color="dark" icon="heart" icon-color="pink" text="Sponsor"
+			href=site.github-sponsors-url external=true %}
 			{% else %}
-				{% include ui/button.html icon="brand-github" outline=true text="Source code" href=site.github-url external=true %}
-				{% include ui/button.html icon="heart" icon-color="pink" outline=true text="Sponsor" href=site.github-sponsors-url external=true %}
+			{% include ui/button.html icon="brand-github" outline=true text="Source code" href=site.github-url
+			external=true %}
+			{% include ui/button.html icon="heart" icon-color="pink" outline=true text="Sponsor"
+			href=site.github-sponsors-url external=true %}
 			{% endif %}
 		</div>
 	</div>
 	{% endunless %}

 	<div class="d-none d-{{ include.breakpoint }}-flex">
-		<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+		<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
 			{% include ui/icon.html icon="moon" %}
 		</a>

-		<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+		<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
+		   data-bs-placement="bottom">
 			{% include ui/icon.html icon="sun" %}
 		</a>

@@ -47,6 +53,13 @@
 			</div>
 			{% endunless %}
 		</a>
-		{% include ui/dropdown-menu.html arrow=true right=true separated=true menu="Set status,Profile & account,Feedback,|,Settings,Logout" %}
+		<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+			<a href="#" class="dropdown-item">Status</a>
+			<a href="#" class="dropdown-item">Profile</a>
+			<a href="#" class="dropdown-item">Feedback</a>
+			<div class="dropdown-divider"></div>
+			<a href="{{ site.base }}/settings.html" class="dropdown-item">Settings</a>
+			<a href="{{ site.base }}/sign-in.html" class="dropdown-item">Logout</a>
+		</div>
 	</div>
 </div>
@@ -1,4 +1,4 @@
-<form action="" method="get">
+<form action="{{ site.base }}/" method="get" autocomplete="off" novalidate>

 	<div class="subheader mb-2">Category</div>
 	{% assign items = "Games,Clothing,Jewelery,Toys" | split:  "," %}
@@ -2,7 +2,7 @@
 {% assign text = include.text  | default: "Text"%}
 {% assign description = include.description | default: "Description" %}

-<form class="dropzone" id="dropzone-{{ id }}" action=".">
+<form class="dropzone" id="dropzone-{{ id }}" action="{{ site.base }}/" autocomplete="off" novalidate>
 	<div class="fallback">
 		<input name="file" type="file" {% if include.multiple %} multiple {% endif %} />
 	</div>
@@ -6,14 +6,20 @@
 {% assign name = include.name | default: false %}
 {% assign is_empty = include['empty'] | default: false %}
 {% unless title %}
-   {% assign title = '' %}
-   {% if disabled %}{% assign title = title | append: ' disabled' %}{% endif %}
-   {% if checked %}{% assign title = title | append: ' checked' %}{% endif %}
-   {% if switch %}{% assign title = title | append: ' switch' %}{% endif %}
-   {% assign title = title | append: ' ' | append: type %}
-   {% assign title = title | append: ' input' | lstrip | capitalize %}
+{% assign title = '' %}
+{% if disabled %}{% assign title = title | append: ' disabled' %}{% endif %}
+{% if checked %}{% assign title = title | append: ' checked' %}{% endif %}
+{% if switch %}{% assign title = title | append: ' switch' %}{% endif %}
+{% assign title = title | append: ' ' | append: type %}
+{% assign title = title | append: ' input' | lstrip | capitalize %}
 {% endunless %}
-<label class="form-check{% if include.inline %} form-check-inline{% endif %}{% if switch %} form-switch{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
-   <input class="form-check-input{% if is_empty %} position-static{% endif %}" type="{{ type }}"{% if name %} name="{{ name }}"{% endif %}{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
+<label class="form-check{% if include.inline %} form-check-inline{% endif %}{% if switch %} form-switch{% if include['size'] %} form-switch-{{ include['size'] }}{% endif %}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	<input class="form-check-input{% if is_empty %} position-static{% endif %}" type="{{ type }}" {% if name %}
+	       name="{{ name }}" {% endif %}{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
+	{% if include.title-on and include.title-off %}
+	<span class="form-check-label form-check-label-on">{{include.title-on }}</span>
+	<span class="form-check-label form-check-label-off">{{include.title-off }}</span>
+	{% else %}
 	{% unless is_empty %}<span class="form-check-label">{{ title }}</span>{% endunless %}
+	{% endif %}
 </label>
@@ -1 +1 @@
-<img src="{{ site.base }}/static/illustrations/{{ include.image }}" height="128"{% if include.class %} class="{{ include.class }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}  alt="">
+<img src="{{ site.base }}/static/illustrations/{{ include.image }}" height="{{ include.height | default: 128 }}"{% if include.class %} class="{{ include.class }}"{% endif %} alt="">
@@ -3,6 +3,11 @@
 {% assign color = include.color | default: data.color | default: 'green' %}

 {% if data %}
+	{% if jekyll.environment == 'development' %}
+		<div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
+			{% include ui/svg.html width="590" height="252" ratio=true border=true %}
+		</div>
+	{% else %}
 		<div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
 			<div>
 				<div id="map-{{ id }}" class="w-100 h-100"></div>
@@ -22,11 +27,11 @@
 					regionStyle: {
 						initial: {
 							{% unless data.filled %}
-						fill: '#F8FAFC',
+							fill: tabler.getColor('body-bg'),
 							stroke: 'rgba(98, 105, 118, .16)',
 							strokeWidth: 1,
 							{% else %}
-						fill: '#e9ecef',
+							fill: tabler.getColor('body-bg'),
 							stroke: '#fff',
 							strokeWidth: 1,
 							{% endunless %}
@@ -37,7 +42,7 @@
 					{% if data.values %}
 					// -------- Series --------
 					visualizeData: {
-					scale: ['#F8FAFC', tabler.getColor('{{ data.color }}')],
+						scale: [tabler.getColor('card-bg'), tabler.getColor('{{ data.color }}')],
 						values: {{ data.values }},
 					},
 					{% endif %}
@@ -110,4 +115,5 @@
 				{{ script }}
 			{% endcapture_global %}
 		{% endif %}
+	{% endif %}
 {% endif %}
@@ -1,7 +1,7 @@
 {% assign width = include.width | default: include.size | default: 20 %}
 {% assign height = include.height | default: include.size | default: 20 %}
-<svg xmlns="http://www.w3.org/2000/svg"{% if include.class %} class="{{ include.class }}"{% endif %} preserveAspectRatio="{% if include.ratio %}xMidYMid meet{% else %}none{% endif %}" width="{{ width }}" height="{% if include.ratio %}auto{% else %}{{ height }}{% endif %}" viewBox="0 0 {{ width }} {{ height }}" stroke="var(--tblr-border-color, #b8cef1)">
-<!--	<rect x=".5" y=".5" width="{{ width | minus: 1 }}" height="{{ height | minus: 1 }}" fill="#fff" rx="2"></rect>-->
+<svg xmlns="http://www.w3.org/2000/svg"{% if include.class %} class="{{ include.class }}"{% endif %} preserveAspectRatio="{% if include.ratio %}xMidYMid meet{% else %}none{% endif %}" width="{{ width }}" height="{{ height }}" viewBox="0 0 {{ width }} {{ height }}" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)"{% if include.border %} style="width: 100%; height: auto"{% endif %}>
+	{% if include.border %}<rect x=".5" y=".5" width="{{ width | minus: 1 }}" height="{{ height | minus: 1 }}" rx="2"></rect>{% endif %}
 	<line x1="0" y1="0" x2="{{ width }}" y2="{{ height }}"></line>
 	<line x1="0" y1="{{ height }}" x2="{{ width }}" y2="0"></line>
 </svg>
@@ -8,7 +8,7 @@
 <script>
  // @formatter:off
  document.addEventListener("DOMContentLoaded", function () {
-    tinyMCE.init({
+    let options = {
      selector: '#tinymce-{{ id }}',
      height: 300,
      menubar: false,
@@ -23,7 +23,14 @@
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat',
      content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }'
-    });
+    }
+
+    if (localStorage.getItem("tablerTheme") === 'dark') {
+      options.skin = 'oxide-dark';
+      options.content_css = 'dark';
+    }
+
+    tinyMCE.init(options);
  })
  // @formatter:on
 </script>
@@ -36,7 +36,7 @@
 	<style>
 		@import url('https://rsms.me/inter/inter.css');
 		:root {
-			--tblr-font-sans-serif: Inter,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+			--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
 		}
 	</style>
 </head>
@@ -0,0 +1,34 @@
+---
+layout: default
+title: Settings
+page-header: Account Settings
+---
+
+<div class="card">
+	<div class="row g-0">
+		<div class="col-3 d-none d-md-block border-end">
+			<div class="card-body">
+				<h4 class="subheader">Business settings</h4>
+
+				<div class="list-group list-group-transparent">
+					<a href="{{ site.base }}/settings.html" class="list-group-item list-group-item-action d-flex align-items-center{% if page.path == 'settings.html' %} active{% endif %}">My Account</a>
+					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">My Notifications</a>
+					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">Connected Apps</a>
+					<a href="{{ site.base }}/settings-plan.html" class="list-group-item list-group-item-action d-flex align-items-center{% if page.path == 'settings-plan.html' %} active{% endif %}">Plans</a>
+					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">Billing & Invoices</a>
+				</div>
+
+				<h4 class="subheader mt-4">Experience</h4>
+
+				<div class="list-group list-group-transparent">
+					<a href="#" class="list-group-item list-group-item-action">Give Feedback</a>
+				</div>
+			</div>
+		</div>
+		<div class="col d-flex flex-column">
+
+			{{ content }}
+
+		</div>
+	</div>
+</div>
@@ -4,10 +4,13 @@ body-class: border-top-wide border-primary d-flex flex-column
 ---

 <div class="page page-center">
-	<div class="container-{{ page.container-size | default: 'tight' }} py-4">
+	<div class="container container-{{ page.container-size | default: 'tight' }} py-4">
+
+		{% unless page.hide-logo %}
 		<div class="text-center mb-4">
 			<a href="{{ site.base }}" class="navbar-brand navbar-brand-autodark"><img src="{{ site.base }}/static/logo.svg" height="36" alt=""></a>
 		</div>
+		{% endunless %}

 		{{ content }}
 	</div>
@@ -34,7 +34,7 @@ menu: extra.pricing-table
 				</thead>
 				<tbody>
 				<tr class="bg-light">
-					 <th colspan="4">Features</th>
+					 <th colspan="4" class="subheader">Features</th>
 				</tr>
 				<tr>
 					 <td>Some info about feature</td>
@@ -55,7 +55,7 @@ menu: extra.pricing-table
 					 <td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
 				</tr>
 				<tr class="bg-light">
-					 <th colspan="4">Reporting</th>
+					 <th colspan="4" class="subheader">Reporting</th>
 				</tr>
 				<tr>
 					 <td>Free hosting and domain name</td>
@@ -70,7 +70,7 @@ menu: extra.pricing-table
 					 <td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
 				</tr>
 				<tr class="bg-light">
-					 <th colspan="4">Support</th>
+					 <th colspan="4" class="subheader">Support</th>
 				</tr>
 				<tr>
 					 <td>Email marketing and service</td>
@@ -9,8 +9,7 @@ menu: extra.pricing
 		{% include cards/pricing-card.html price="0" users=3 category="Free" %}
 	</div>
 	<div class="col-sm-6 col-lg-3">
-		{% include cards/pricing-card.html price="49" users=10 category="Premium" features="1100" featured-color="green"
-		%}
+		{% include cards/pricing-card.html price="49" users=10 category="Premium" features="1100" featured-color="green" %}
 	</div>
 	<div class="col-sm-6 col-lg-3">
 		{% include cards/pricing-card.html price="99" category="Enterprise" users=100 features="1110" %}
@@ -19,18 +18,6 @@ menu: extra.pricing
 		{% include cards/pricing-card.html price="139" category="Unlimited" users="Unlimited" features="1111" %}
 	</div>
 	<div class="col-12">
-		<div class="card card-md">
-			<div class="card-body">
-				<div class="row align-items-center">
-					<div class="col">
-						<h2 class="h3">Enterprise-ready. Reach out for a custom quote.</h2>
-						<p class="m-0 text-muted">Tabler is designed to work great for large enterprises. Take a look at our feature comparison.</p>
-					</div>
-					<div class="col-auto">
-						{% include ui/button.html text="Book a demo" %}
-					</div>
-				</div>
-			</div>
-		</div>
+		{% include cards/pricing-card-enterprise.html %}
 	</div>
 </div>
@@ -0,0 +1,25 @@
+---
+layout: settings
+title: Settings
+---
+
+<div class="card-body">
+	<h2 class="mb-4">Plans</h2>
+
+	<p class="text-muted mb-4">This workspace’s Basic Plan is set to $34 per month and will renew on June 19, 2022.</p>
+
+	<div class="row row-cards">
+		<div class="col-lg-4">
+			{% include cards/pricing-card.html price="0" users=3 category="Free" %}
+		</div>
+		<div class="col-lg-4">
+			{% include cards/pricing-card.html price="49" users=10 category="Premium" features="1100" featured-color="green" %}
+		</div>
+		<div class="col-lg-4">
+			{% include cards/pricing-card.html price="99" category="Enterprise" users=100 features="1110" %}
+		</div>
+		<div class="col-12">
+			{% include cards/pricing-card-enterprise.html %}
+		</div>
+	</div>
+</div>
@@ -1,27 +1,69 @@
 ---
-layout: default
-title: Settings
+layout: settings
 ---
-{% include layout/headers/page-header-settings.html %}
-<div class="row">
-	 <div class="col-12 col-md-4 px-4">
-		  {% assign items = "Account,Preferences,Privacy Settings, Theme,Audience and visibility,App Development" | split: "," %}
-		  <div class="list-group list-group-transparent mb-3 ml-3">
-				{% for item in items %}
-				<a class="list-group-item list-group-item-action d-flex align-items-center{% if forloop.first %} active{% endif %}"
-					href="#">
-					 {{ item }}
-					 <small class="text-muted ms-auto">{{ forloop.index | random_number: 11, 200 }}</small>
-				</a>
-				{% endfor %}
+
+
+<div class="card-body">
+	<h2 class="mb-4">My Account</h2>
+
+	<h3 class="card-title">Profile Details</h3>
+
+	<div class="row align-items-center">
+		<div class="col-auto">{% include ui/avatar.html size="xl" person-id="1" %}</div>
+		<div class="col-auto">{% include ui/button.html text="Change avatar" %}</div>
+		<div class="col-auto">{% include ui/button.html text="Delete avatar" color="danger" ghost=true %}</div>
+	</div>
+
+
+	<h3 class="card-title mt-4">Business Profile</h3>
+
+	<div class="row g-3">
+		<div class="col-md">
+			<div class="form-label">Business Name</div>
+			<input type="text" class="form-control" value="{{ site.data.people[0].company }}">
+		</div>
+		<div class="col-md">
+			<div class="form-label">Business ID</div>
+			<input type="text" class="form-control" value="560afc32">
+		</div>
+		<div class="col-md">
+			<div class="form-label">Location</div>
+			<input type="text" class="form-control"
+			       value="{{ site.data.people[0].city }}, {{ site.data.people[0].country }}">
 		</div>
 	</div>
-	 <div class="col-12 col-md-8">
-		  <div class="row">
-				<div class="col-12">
-					 {% include cards/form/layout.html horizontal=true title="Account" %}
+
+	<h3 class="card-title mt-4">Email</h3>
+	<p class="card-subtitle">This contact will be shown to others publicly, so choose it carefully.</p>
+
+	<div>
+		<div class="row g-2">
+			<div class="col-auto">
+				<input type="text" class="form-control w-auto" value="{{ site.data.people[0].email }}">
+			</div>
+			<div class="col-auto">{% include ui/button.html text="Change" %}</div>
 		</div>
 	</div>
+
+
+	<h3 class="card-title mt-4">Password</h3>
+	<p class="card-subtitle">You can set a permanent password if you don't want to use temporary login codes.</p>
+	<div>
+		{% include ui/button.html text="Set new password" %}
+	</div>
+
+
+	<h3 class="card-title mt-4">Public profile</h3>
+	<p class="card-subtitle">Making your profile public means that anyone on the Dashkit network will be able to find
+		you.</p>
+	<div>
+		{% include ui/form/check.html switch=true size="lg" title-on="You're currently visible" title-off="You're
+		currently invisible" %}
+	</div>
+</div>
+<div class="card-footer bg-transparent mt-auto">
+	<div class="btn-list justify-content-end">
+		{% include ui/button.html text="Cancel" %}
+		{% include ui/button.html text="Submit" color="primary" %}
 	</div>
 </div>
-
@@ -0,0 +1,28 @@
+---
+layout: base
+title: Sign in with cover
+body-class: d-flex flex-column bg-white
+---
+
+<div class="row g-0 flex-fill">
+	<div class="col-12 col-lg-6 col-xl-4 border-top-wide border-primary d-flex flex-column justify-content-center">
+		<div class="container container-tight my-5 px-lg-5">
+			<div class="text-center mb-4">
+				<a href="{{ site.base }}" class="navbar-brand navbar-brand-autodark"><img src="{{ site.base }}/static/logo.svg" height="36" alt=""></a>
+			</div>
+
+			<h2 class="h3 text-center mb-3">
+				Login to your account
+			</h2>
+
+			{% include forms/sign-in.html %}
+
+			<div class="text-center text-muted mt-3">
+				Don't have account yet? <a href="{{ site.base }}/sign-up.html" tabindex="-1">Sign up</a>
+			</div>
+		</div>
+	</div>
+	<div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
+		<div class="bg-cover h-100 min-vh-100" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[16].file}})"></div>
+	</div>
+</div>
@@ -0,0 +1,23 @@
+---
+layout: single
+title: Sign in with illustration
+container-size: normal
+hide-logo: true
+---
+
+<div class="row align-items-center g-4">
+	<div class="col-lg">
+		<div class="container-tight">
+			<div class="text-center mb-4">
+				<a href="{{ site.base }}" class="navbar-brand navbar-brand-autodark"><img src="{{ site.base }}/static/logo.svg" height="36" alt=""></a>
+			</div>
+
+			{% include cards/sign-in.html show-header="1" %}
+		</div>
+	</div>
+	<div class="col-lg d-none d-lg-block">
+		{% include ui/illustration.html image="undraw_secure_login_pdn4.svg" class="d-block mx-auto" height=300 %}
+	</div>
+</div>
+
+
@@ -3,6 +3,7 @@

@import "fonts/webfonts";

+@import "layout/root";
@import "layout/core";
@import "layout/navbar";
@import "layout/page";
@@ -97,7 +97,7 @@ $gray-800: #1d273b !default;
 $gray-900: #0f172a !default;

 $light: $gray-50 !default;
-$dark: $gray-900 !default;
+$dark: $gray-800 !default;

 $body-bg: $gray-100 !default;
 $body-color: $dark !default;
@@ -136,8 +136,8 @@ $border-color-dark-translucent: rgba($text-muted, $border-dark-opacity) !default
 $border-color-active: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default;
 $border-color-active-translucent: rgba($text-muted, $border-active-opacity) !default;

-$active-bg: rgba($blue, .04) !default;
-$hover-bg: rgba($text-muted, .04) !default;
+$active-bg: rgba(var(--#{$prefix}primary-rgb), .04) !default;
+$hover-bg: rgba(var(--#{$prefix}muted-rgb), .04) !default;
 $disabled-bg: var(--#{$prefix}gray-100) !default;

 $link-color: var(--#{$prefix}primary) !default;
@@ -315,7 +315,21 @@ $aspect-ratios: (
 ) !default;

 // Shadows
-$shadow: rgba($dark, .04) 0 2px 4px 0 !default;
+$shadow: rgba(var(--#{$prefix}body-color-rgb), .04) 0 2px 4px 0 !default;
+$shadow-transparent: 0 0 0 0 transparent !default;
+$shadow-button: 0 1px 0 rgba(var(--#{$prefix}body-color-rgb), .04) !default;
+$shadow-button-inset: inset 0 -1px 0 rgba(var(--#{$prefix}body-color-rgb), .2) !default;
+$shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), .04) !default;
+$shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), .16) 0 2px 16px 0 !default;
+
+$shadows: (
+  shadow: $shadow,
+  shadow-transparent: $shadow-transparent,
+  shadow-button: $shadow-button,
+  shadow-button-inset: $shadow-button-inset,
+  shadow-card: $shadow-card,
+  shadow-card-hover: $shadow-card-hover,
+) !default;

 // Transitions
 $transition-time: .3s !default;
@@ -392,6 +406,8 @@ $btn-border-radius: var(--#{$prefix}border-radius) !default;

 //cards
 $card-title-spacer-y: 1.25rem !default;
+$card-box-shadow: var(--#{$prefix}shadow-card) !default;
+$card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default;

 $card-bg: #f8fafc !default;
 $card-bg-hover: $white !default;
@@ -401,10 +417,10 @@ $card-border-width: var(--#{$prefix}border-width) !default;
 $card-border-color: var(--#{$prefix}border-color) !default;
 $card-border-radius: var(--#{$prefix}border-radius) !default;

-$card-spacer-x: 1.25rem !default;
+$card-spacer-x: 1.5rem !default;
 $card-spacer-y: 1rem !default;

-$card-cap-bg: $gray-50 !default;
+$card-cap-bg: var(--#{$prefix}gray-50) !default;
 $card-cap-color: inherit !default;
 $card-cap-padding-x: $card-spacer-x !default;
 $card-cap-padding-y: $card-spacer-y !default;
@@ -412,9 +428,6 @@ $card-cap-padding-y: $card-spacer-y !default;
 $card-status-size: $border-width-wide !default;
 $card-group-margin: 1.5rem !default;

-$card-shadow: $shadow !default;
-$card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default;
-
 $card-stamp-opacity: .2 !default;

 $cards-grid-gap: 1rem !default;
@@ -1,4 +1,5 @@
 // stylelint-disable property-no-vendor-prefix
+
 :root {
  font-size: 16px;
  height: 100%;
@@ -29,6 +30,7 @@ body {
  font-feature-settings: "liga" 0;
  position: relative;
  min-height: 100%;
+  height: 100%;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
@@ -2,7 +2,7 @@
  display: flex;
  flex-direction: column;
  position: relative;
-  min-height: 100vh;
+  min-height: 100%;
 }

 .page-center {
@@ -0,0 +1,23 @@
+:root {
+  font-size: 16px;
+  height: 100%;
+
+  @each $name, $color in map-merge($theme-colors, $gray-colors) {
+    --#{$prefix}#{$name}: #{$color};
+    --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
+    --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
+    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
+  }
+
+  --#{$prefix}card-bg: #{$card-bg};
+
+  --#{$prefix}border-color: #{$border-color};
+  --#{$prefix}border-color-light: #{$border-color-light};
+
+  --#{$prefix}icon-color: #{$icon-color};
+  --#{$prefix}disabled-bg: #{$disabled-bg};
+
+  @each $name, $value in $shadows {
+    --#{$prefix}#{$name}: #{$value};
+  }
+}
@@ -9,7 +9,7 @@
  }

  @if ($include-color) {
-    color: $text-muted;
+    color: var(--#{$prefix}muted);
  }
 }

@@ -99,4 +99,5 @@
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: transparent;
  --#{$prefix}gradient: none;
+  --#{$prefix}btn-box-shadow: none;
 }
@@ -5,13 +5,13 @@
  --#{$prefix}btn-icon-size: #{$icon-size};
  --#{$prefix}btn-color: var(--#{$prefix}body-color);
  --#{$prefix}btn-border-color: var(--#{$prefix}border-color);
-  //background-color: var(--#{$prefix}btn-color, var(--#{$prefix}card-bg));
-  //color: var(--#{$prefix}btn-color-text);
+  --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
+  box-shadow: var(--#{$prefix}btn-box-shadow);

  .icon {
    width: var(--#{$prefix}btn-icon-size);
@@ -63,11 +63,23 @@
@each $color, $value in $theme-colors {
  .btn-#{$color} {
    --#{$prefix}btn-border-color: transparent;
-    --#{$prefix}btn-color: #{color-contrast($value)};
+    --#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg);
    --#{$prefix}btn-bg: var(--#{$prefix}#{$color});
-    --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color}-darken);
-    --#{$prefix}btn-hover-color: #{color-contrast($value)};
    --#{$prefix}btn-hover-border-color: transparent;
+    --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-hover-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
+    --#{$prefix}btn-active-border-color: transparent;
+    --#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-active-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
+    --#{$prefix}btn-disabled-bg: rgba(var(--#{$prefix}#{$color}-rgb), .5);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button), var(--#{$prefix}shadow-button-inset);
+  }
+
+  .btn-outline-#{$color} {
+    --#{$prefix}btn-color: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-border-color: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-active-color: var(--#{$prefix}#{$color});
  }
 }

@@ -81,7 +81,7 @@
    left: 0;
    height: 1.4rem;
    content: "";
-    background: rgba($primary, .1);
+    background: rgba(var(--#{$prefix}primary-rgb), .1);
    transform: translateY(-50%);
  }

@@ -3,10 +3,10 @@
  --#{$prefix}card-bg: var(--#{$prefix}card-bg);
  --#{$prefix}card-color: var(--#{$prefix}card-color);

-  box-shadow: $card-shadow;
  border: $card-border-width solid $card-border-color;
  background: var(--#{$prefix}card-bg, #{$card-bg});
  border-radius: var(--#{$prefix}card-border-radius);
+  box-shadow: var(--#{$prefix}card-box-shadow);
  @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);

  @media print {
@@ -19,7 +19,7 @@

    &:hover {
      text-decoration: none;
-      box-shadow: $card-shadow-hover;
+      box-shadow: $shadow-card-hover;
    }
  }

@@ -110,7 +110,7 @@

 .card-active {
  position: relative;
-  background-color: rgba($primary, .03);
+  background-color: rgba(var(--#{$prefix}primary-rgb), .03);
  z-index: 1;

  &:before {
@@ -311,7 +311,6 @@
 }

 .card-subtitle {
-  margin-top: divide(-$card-spacer-y, 2);
  margin-bottom: $card-title-spacer-y;
  color: $text-muted;
  font-weight: normal;
@@ -331,17 +330,17 @@
    margin-bottom: 0;
  }

-  .card-sm > & {
+  .card-sm & {
    padding: 1rem;
  }

-  .card-md > & {
+  .card-md & {
    @include media-breakpoint-up(md) {
      padding: 2.5rem;
    }
  }

-  .card-lg > & {
+  .card-lg & {
    @include media-breakpoint-up(md) {
      padding: 2rem;
    }
@@ -167,12 +167,12 @@ Timeline


 .list-group-transparent {
+  --#{$prefix}list-group-border-radius: 0;
  margin: 0 (- $list-group-item-padding-x);

  .list-group-item {
    background: none;
    border: 0;
-    border-radius: 3px;

    .icon {
      color: $text-muted;
@@ -1,7 +1,6 @@
 .toast {
  background: $white;
  border: $alert-border-width solid $alert-border-color;
-  border-left: .25rem solid var(--#{$prefix}toast-color);
  box-shadow: $alert-shadow;

  .toast-header {
@@ -152,8 +152,7 @@ img {
 Selection
 */
 ::selection {
-  color: $white;
-  background-color: lighten($primary, 8%);
+  background-color: rgba(var(--#{$prefix}primary-rgb), .16);
 }

 /**
@@ -5,7 +5,19 @@ Form check
  user-select: none;

  &.form-check-highlight .form-check-input:not(:checked) ~ .form-check-label {
-    opacity: $text-muted-opacity;
+    color: var(--#{$prefix}muted);
+  }
+
+  .form-check-label-off {
+    color: var(--#{$prefix}muted);
+  }
+
+  .form-check-input:checked ~ .form-check-label-off {
+    display: none;
+  }
+
+  .form-check-input:not(:checked) ~ .form-check-label-on {
+    display: none;
  }
 }

@@ -57,9 +69,22 @@ Form switch
 }

 .form-switch-lg {
+  padding-left: 3.5rem;
+  min-height: 1.5rem;
+
  .form-check-input {
    height: 1.5rem;
    width: 2.75rem;
    background-size: 1.5rem;
+    margin-left: -3.5rem;
+  }
+
+  .form-check-label {
+    padding-top: .125rem;
  }
 }
+
+/*Correction of Form-check position*/
+.form-check-input:checked{
+  border: none;
+}
@@ -95,7 +95,7 @@ Select group
 .form-selectgroup-input:checked + .form-selectgroup-label {
  z-index: 1;
  color: var(--#{$prefix}primary);
-  background: rgba($primary, .04);
+  background: rgba(var(--#{$prefix}primary-rgb), .04);
  border-color: var(--#{$prefix}primary);
 }

@@ -19,9 +19,8 @@ Hr text
  &:after,
  &:before {
    flex: 1 1 auto;
-    height: $hr-height;
-    background-color: currentColor;
-    opacity: $hr-opacity;
+    height: 1px;
+    background-color: var(--#{$prefix}border-color);
  }

  &:before {
@@ -24,6 +24,6 @@
  }

  .text-#{"" + $color}-fg {
-    color: color-contrast($value) !important;
+    color: color-contrast($value ) !important;
  }
 }
@@ -4,7 +4,7 @@
  background: $dark;
  font-family: inherit;
  font-size: $h5-font-size;
-  box-shadow: $card-shadow;
+  box-shadow: $card-box-shadow;
 }

 .jvm-series-container .jvm-legend  .jvm-legend-title {
@@ -40,7 +40,7 @@
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1rem;
-  box-shadow: $card-shadow;
+  box-shadow: $card-box-shadow;

  &.jvm-zoomout {
    top: 2.5rem;
@@ -1,7 +1,7 @@
 .litepicker {
-  --litepicker-month-weekday-color: #{$text-muted};
-  --litepicker-button-prev-month-color: #{$text-muted};
-  --litepicker-button-next-month-color: #{$text-muted};
+  --litepicker-month-weekday-color: #{var(--#{$prefix}muted)};
+  --litepicker-button-prev-month-color: #{var(--#{$prefix}muted)};
+  --litepicker-button-next-month-color: #{var(--#{$prefix}muted)};
  --litepicker-button-prev-month-color-hover: #{ var(--#{$prefix}primary) };
  --litepicker-button-next-month-color-hover: #{ var(--#{$prefix}primary) };
  --litepicker-day-color: var(--#{$prefix}body-color);