diff --git a/.eslintrc.js b/.eslintrc.js
index dd49b89..b3d7308 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -50,6 +50,7 @@ module.exports = {
     "max-classes-per-file": ["error", 1],
     // "max-depth": ["warn", 4],
     // "max-lines": "warn",
+    "max-len": ["warn", { code: 100 }],
     // "max-lines-per-function": "warn",
     // "max-nested-callbacks": "warn",
     // "max-params": "warn",
diff --git a/README.md b/README.md
index c9088be..1d182aa 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,7 @@
 #### [Front](https://github.com/Accords-Library/accords-library.com) (this repository)
 
 - Language: [TypeScript](https://www.typescriptlang.org/)
+- Framework: [Next.js](https://nextjs.org/) (React)
 - Queries: [GraphQL Code Generator](https://www.graphql-code-generator.com/)
   - Fetch the GraphQL schema from the GraphQL back-end endpoint
   - Read the operations and fragments stored as graphql files in the `src/graphql` folder
@@ -33,28 +34,34 @@
   - Support for Arbitrary React Components and Component Props!
   - Autogenerated multi-level table of content and anchor links for the different headers
 - Styling: [Tailwind CSS](https://tailwindcss.com/)
-  - Good typographic defaults using [Tailwind/Typography](https://tailwindcss.com/docs/typography-plugin)
-  - Beside the theme declaration no CSS outside of Tailwind CSS
   - Manually added support for scrollbar styling
   - Support for [Material Icons](https://fonts.google.com/icons)
-  - Support for light and dark mode with a manual switch and system's selected theme by default
   - Support for creating any arbitrary theming mode by swapping CSS variables
   - Support for many screen sizes and resolutions
-- Framework: [Next.js](https://nextjs.org/) (React)
-  - Multilanguage support
 - State Management: [React Context](https://reactjs.org/docs/context.html)
   - Persistent app state using LocalStorage
+- Accessibility
+  - Gestures using [react-swipeable](https://www.npmjs.com/package/react-swipeable)
+  - Keyboard hotkeys using [react-hot-keys](https://www.npmjs.com/package/react-hot-keys)
+  - Support for light and dark mode with a manual switch and system's selected theme by default
+  - Fonts can be swaped to [OpenDyslexic](https://www.npmjs.com/package/@fontsource/opendyslexic)
+- Multilingual
+  - By default, use the browser's language as the main language
+  - Fallback languages are used for content which are not available in the main language
+  - Main and fallback languages can be ordered manually by the user
+  - At the content level, the user can know which language is available
+  - Furthermore, the user can temporary select another language then the one that was automatically selected
 - SSG + ISR (Static Site Generation + Incremental Static Regeneration):
   - The website is built before running in production
   - Performances are great, and possibility to deploy the app using a CDN
-  - On-Demand ISR to continuously update the website when new content is added or existing content is modified/deleted.
+  - On-Demand ISR to continuously update the website when new content is added or existing content is modified/deleted
 - SEO
   - Good defaults for the metadate and OpenGraph properties
   - Each page can provide the thumbnail, title, description to be used
   - Automatic generation of the sitemap using [next-sitemap](https://www.npmjs.com/package/next-sitemap)
 - Data quality testing
   - Data from the CMS is subject to a battery of tests (about 20 warning types and 40 error types) at build time
-  - Each warning/error comes with a front-end link to the incriminating element, as well as a link to the CMS to fix it.
+  - Each warning/error comes with a front-end link to the incriminating element, as well as a link to the CMS to fix it
   - Check for completeness, conformity, and integrity
 
 ## Installation
diff --git a/package-lock.json b/package-lock.json
index 2d5b4f1..53e0989 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,49 +9,50 @@
         "@fontsource/material-icons": "^4.5.4",
         "@fontsource/material-icons-rounded": "^4.5.4",
         "@fontsource/opendyslexic": "^4.5.4",
-        "@fontsource/vollkorn": "^4.5.6",
-        "@fontsource/zen-maru-gothic": "^4.5.8",
+        "@fontsource/vollkorn": "^4.5.9",
+        "@fontsource/zen-maru-gothic": "^4.5.11",
         "@tippyjs/react": "^4.2.6",
-        "autoprefixer": "^10.4.5",
+        "autoprefixer": "^10.4.7",
         "graphql-request": "^4.2.0",
         "markdown-to-jsx": "^7.1.7",
-        "next": "^12.1.2",
-        "nodemailer": "^6.7.3",
-        "react": "17.0.2",
-        "react-dom": "17.0.2",
-        "react-image-lightbox": "^5.1.4",
-        "react-swipeable": "^6.2.1",
+        "next": "^12.1.6",
+        "nodemailer": "^6.7.5",
+        "react": "18.1.0",
+        "react-dom": "18.1.0",
+        "react-hot-keys": "^2.7.2",
+        "react-swipeable": "^7.0.0",
         "turndown": "^7.1.1"
       },
       "devDependencies": {
         "@graphql-codegen/cli": "^2.6.2",
-        "@graphql-codegen/typescript": "2.4.8",
-        "@graphql-codegen/typescript-graphql-request": "^4.4.5",
-        "@graphql-codegen/typescript-operations": "^2.3.5",
-        "@types/node": "17.0.25",
+        "@graphql-codegen/typescript": "2.4.11",
+        "@graphql-codegen/typescript-graphql-request": "^4.4.8",
+        "@graphql-codegen/typescript-operations": "^2.4.0",
+        "@types/node": "17.0.33",
         "@types/nodemailer": "^6.4.4",
-        "@types/react": "17.0.43",
-        "@types/react-dom": "^17.0.14",
+        "@types/react": "18.0.9",
+        "@types/react-dom": "^18.0.4",
         "@types/turndown": "^5.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.20.0",
-        "@typescript-eslint/parser": "^5.20.0",
-        "eslint": "^8.14.0",
-        "eslint-config-next": "12.1.5",
-        "graphql": "^14.7.0",
+        "@typescript-eslint/eslint-plugin": "^5.23.0",
+        "@typescript-eslint/parser": "^5.23.0",
+        "eslint": "^8.15.0",
+        "eslint-config-next": "12.1.6",
+        "graphql": "^16.5.0",
         "next-sitemap": "^2.5.20",
         "prettier": "^2.6.2",
         "prettier-plugin-organize-imports": "^2.3.4",
         "tailwindcss": "^3.0.24",
-        "typescript": "^4.6.3"
+        "typescript": "^4.6.4"
       }
     },
     "node_modules/@ampproject/remapping": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
-      "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
+      "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.0"
+        "@jridgewell/gen-mapping": "^0.1.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
       },
       "engines": {
         "node": ">=6.0.0"
@@ -70,34 +71,34 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.7.tgz",
-      "integrity": "sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.10.tgz",
+      "integrity": "sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.17.8",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.8.tgz",
-      "integrity": "sha512-OdQDV/7cRBtJHLSOBqqbYNkOcydOgnX59TZx4puf41fzcVtN3e/4yqY8lMQsK+5X2lJtAdmA+6OHqsj1hBJ4IQ==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.10.tgz",
+      "integrity": "sha512-liKoppandF3ZcBnIYFjfSDHZLKdLHGJRkoWtG8zQyGJBQfIYobpnVGI5+pLBNtS6psFLDzyq8+h5HiVljW9PNA==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.7",
-        "@babel/helper-compilation-targets": "^7.17.7",
+        "@babel/generator": "^7.17.10",
+        "@babel/helper-compilation-targets": "^7.17.10",
         "@babel/helper-module-transforms": "^7.17.7",
-        "@babel/helpers": "^7.17.8",
-        "@babel/parser": "^7.17.8",
+        "@babel/helpers": "^7.17.9",
+        "@babel/parser": "^7.17.10",
         "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.3",
-        "@babel/types": "^7.17.0",
+        "@babel/traverse": "^7.17.10",
+        "@babel/types": "^7.17.10",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
-        "json5": "^2.1.2",
+        "json5": "^2.2.1",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -130,14 +131,14 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz",
-      "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.10.tgz",
+      "integrity": "sha512-46MJZZo9y3o4kmhBVc7zW7i8dtR1oIK/sdO5NcfcZRhTGYi+KKJRtHNgsU6c4VUcJmUNV/LQdebD/9Dlv4K+Tg==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.17.0",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
+        "@babel/types": "^7.17.10",
+        "@jridgewell/gen-mapping": "^0.1.0",
+        "jsesc": "^2.5.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -156,14 +157,14 @@
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz",
-      "integrity": "sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.10.tgz",
+      "integrity": "sha512-gh3RxjWbauw/dFiU/7whjd0qN9K6nPJMqe6+Er7rOavFh0CQUSwhAE3IcTho2rywPJFxej6TUUHDkWcYI6gGqQ==",
       "dev": true,
       "dependencies": {
-        "@babel/compat-data": "^7.17.7",
+        "@babel/compat-data": "^7.17.10",
         "@babel/helper-validator-option": "^7.16.7",
-        "browserslist": "^4.17.5",
+        "browserslist": "^4.20.2",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -183,15 +184,15 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.17.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.6.tgz",
-      "integrity": "sha512-SogLLSxXm2OkBbSsHZMM4tUi8fUzjs63AT/d0YQIzr6GSd8Hxsbk2KYDX0k0DweAzGMj/YWeiCsorIdtdcW8Eg==",
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz",
+      "integrity": "sha512-kUjip3gruz6AJKOq5i3nC6CoCEEF/oHH3cp6tOZhB+IyyyPyW0g1Gfsxn3mkk6S08pIA2y8GQh609v9G/5sHVQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
         "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.16.7",
-        "@babel/helper-member-expression-to-functions": "^7.16.7",
+        "@babel/helper-function-name": "^7.17.9",
+        "@babel/helper-member-expression-to-functions": "^7.17.7",
         "@babel/helper-optimise-call-expression": "^7.16.7",
         "@babel/helper-replace-supers": "^7.16.7",
         "@babel/helper-split-export-declaration": "^7.16.7"
@@ -216,26 +217,13 @@
       }
     },
     "node_modules/@babel/helper-function-name": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz",
-      "integrity": "sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==",
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz",
+      "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-get-function-arity": "^7.16.7",
         "@babel/template": "^7.16.7",
-        "@babel/types": "^7.16.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-get-function-arity": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz",
-      "integrity": "sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.17.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -388,13 +376,13 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.17.8",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.8.tgz",
-      "integrity": "sha512-QcL86FGxpfSJwGtAvv4iG93UL6bmqBdmoVY0CMCU2g+oD2ezQse3PT5Pa+jiD6LJndBQi0EDlpzOWNlLuhz5gw==",
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.9.tgz",
+      "integrity": "sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==",
       "dev": true,
       "dependencies": {
         "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.3",
+        "@babel/traverse": "^7.17.9",
         "@babel/types": "^7.17.0"
       },
       "engines": {
@@ -487,9 +475,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.17.8",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.8.tgz",
-      "integrity": "sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.10.tgz",
+      "integrity": "sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -772,9 +760,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.7.tgz",
-      "integrity": "sha512-ITPmR2V7MqioMJyrxUo2onHNC3e+MvfFiFIR0RP21d3PtlVb6sfzoxNKiphSZUOM9hEIdzCcZe83ieX3yoqjUA==",
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.9.tgz",
+      "integrity": "sha512-2TBFd/r2I6VlYn0YRTz2JdazS+FoUuQ2rIFHoAxtyP/0G3D82SBLaRq9rnUkpqlLg03Byfl/+M32mpxjO6KaPw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-module-transforms": "^7.17.7",
@@ -919,7 +907,6 @@
       "version": "7.17.2",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
       "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -955,19 +942,19 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.17.3",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.3.tgz",
-      "integrity": "sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.10.tgz",
+      "integrity": "sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.3",
+        "@babel/generator": "^7.17.10",
         "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.16.7",
+        "@babel/helper-function-name": "^7.17.9",
         "@babel/helper-hoist-variables": "^7.16.7",
         "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/parser": "^7.17.3",
-        "@babel/types": "^7.17.0",
+        "@babel/parser": "^7.17.10",
+        "@babel/types": "^7.17.10",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -985,9 +972,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
-      "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.10.tgz",
+      "integrity": "sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A==",
       "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.16.7",
@@ -1028,19 +1015,19 @@
       "dev": true
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.2.tgz",
-      "integrity": "sha512-lTVWHs7O2hjBFZunXTZYnYqtB9GakA1lnxIf+gKq2nY5gxkkNi/lQvveW6t8gFdOHTg6nG50Xs95PrLqVpcaLg==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.3.tgz",
+      "integrity": "sha512-uGo44hIwoLGNyduRpjdEpovcbMdd+Nv7amtmJxnKmI8xj6yd5LncmSwDa5NgX/41lIFJtkjD6YdVfgEzPfJ5UA==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.3.1",
+        "espree": "^9.3.2",
         "globals": "^13.9.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.0",
-        "minimatch": "^3.0.4",
+        "minimatch": "^3.1.2",
         "strip-json-comments": "^3.1.1"
       },
       "engines": {
@@ -1063,14 +1050,14 @@
       "integrity": "sha512-afgJ74VbN5SYYyv2VEAcTMHDMqLIqEtHRHyhUqMXd7IxzYOxvEpUw2Q963BHK3134RLJ1U1QeZgY0a7934+Fig=="
     },
     "node_modules/@fontsource/vollkorn": {
-      "version": "4.5.6",
-      "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.6.tgz",
-      "integrity": "sha512-1IBBJM4Tj2UZ7fzoJEfHBY/oOqkyVzynFbX/Hdl3smDYB7Zw8BwcGBNHIT1alyZi2aI/9ir3cI/mynBSVUJ8Cw=="
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.9.tgz",
+      "integrity": "sha512-Lb6FpYn0dIR94I/SU624eyLoBUvfDgTGLHi6cioaMlyC3TJGaYVFQZCZV00pM0LHDVHnoOVyD34+rBNPL03jEA=="
     },
     "node_modules/@fontsource/zen-maru-gothic": {
-      "version": "4.5.8",
-      "resolved": "https://registry.npmjs.org/@fontsource/zen-maru-gothic/-/zen-maru-gothic-4.5.8.tgz",
-      "integrity": "sha512-8w48IqZRW9rWaOXUX2fO994piFcsh7be+WiC18U9D7EE/3DLTwn1vlywss9CBmuFQwogAfsDoCp7aduuxE7nAQ=="
+      "version": "4.5.11",
+      "resolved": "https://registry.npmjs.org/@fontsource/zen-maru-gothic/-/zen-maru-gothic-4.5.11.tgz",
+      "integrity": "sha512-/msDkcA4N6OFXj7QPQXxNK3F088G4101TQYx8kLyw6TB+TQzWVzYyX8pyAx2v2k4IVjwh5wkjEEm7PD5iSn+0Q=="
     },
     "node_modules/@graphql-codegen/cli": {
       "version": "2.6.2",
@@ -1542,31 +1529,31 @@
       "dev": true
     },
     "node_modules/@graphql-codegen/typescript": {
-      "version": "2.4.8",
-      "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-2.4.8.tgz",
-      "integrity": "sha512-tVsHIkuyenBany7c5IMU1yi4S1er2hgyXJGNY7PcyhpJMx0eChmbqz1VTiZxDEwi8mDBS2mn3TaSJMh6xuJM5g==",
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-2.4.11.tgz",
+      "integrity": "sha512-K3oDLPJRH9Wgpg9TOvb7L+xrJZ8HxkIzV2umqGn54c+8DQjvnRFBIYRO0THgUBMnEauE2sEy6RZkGHGfgQUruA==",
       "dev": true,
       "dependencies": {
         "@graphql-codegen/plugin-helpers": "^2.4.0",
         "@graphql-codegen/schema-ast": "^2.4.1",
-        "@graphql-codegen/visitor-plugin-common": "2.7.4",
+        "@graphql-codegen/visitor-plugin-common": "2.8.0",
         "auto-bind": "~4.0.0",
-        "tslib": "~2.3.0"
+        "tslib": "~2.4.0"
       },
       "peerDependencies": {
         "graphql": "^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
       }
     },
     "node_modules/@graphql-codegen/typescript-graphql-request": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-graphql-request/-/typescript-graphql-request-4.4.5.tgz",
-      "integrity": "sha512-D8ao8j43R8pStLqCMXVzdvGX9xc/x+IWd8ZacbKUVKbpWxlO7AEVAF89fgTpPv4FFTYG62BdkElf3ePcvgEWuw==",
+      "version": "4.4.8",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-graphql-request/-/typescript-graphql-request-4.4.8.tgz",
+      "integrity": "sha512-4PuFMJCGhS/sY8n3ePr1JD349NUw5H6zySAJIvchVatPAbanI6swGKvu/YElkBYvx0l+S17TxTylAUui5N0QyA==",
       "dev": true,
       "dependencies": {
         "@graphql-codegen/plugin-helpers": "^2.4.0",
-        "@graphql-codegen/visitor-plugin-common": "2.7.4",
+        "@graphql-codegen/visitor-plugin-common": "2.8.0",
         "auto-bind": "~4.0.0",
-        "tslib": "~2.3.0"
+        "tslib": "~2.4.0"
       },
       "peerDependencies": {
         "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
@@ -1575,43 +1562,43 @@
       }
     },
     "node_modules/@graphql-codegen/typescript-graphql-request/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
       "dev": true
     },
     "node_modules/@graphql-codegen/typescript-operations": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-operations/-/typescript-operations-2.3.5.tgz",
-      "integrity": "sha512-GCZQW+O+cIF62ioPkQMoSJGzjJhtr7ttZGJOAoN/Q/oolG8ph9jNFePKO67tSQ/POAs5HLqfat4kAlCK8OPV3Q==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-operations/-/typescript-operations-2.4.0.tgz",
+      "integrity": "sha512-vJ15FLyWchuO2Xkp6uz7jJOdChiay7P9KJKFDILx/JTwjinU1fFa7iOvyeTvslqiUPxgsXthR5izdY+E5IyLkQ==",
       "dev": true,
       "dependencies": {
         "@graphql-codegen/plugin-helpers": "^2.4.0",
-        "@graphql-codegen/typescript": "^2.4.8",
-        "@graphql-codegen/visitor-plugin-common": "2.7.4",
+        "@graphql-codegen/typescript": "^2.4.11",
+        "@graphql-codegen/visitor-plugin-common": "2.8.0",
         "auto-bind": "~4.0.0",
-        "tslib": "~2.3.0"
+        "tslib": "~2.4.0"
       },
       "peerDependencies": {
         "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
       }
     },
     "node_modules/@graphql-codegen/typescript-operations/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
       "dev": true
     },
     "node_modules/@graphql-codegen/typescript/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
       "dev": true
     },
     "node_modules/@graphql-codegen/visitor-plugin-common": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-2.7.4.tgz",
-      "integrity": "sha512-aaDoEudDD+B7DK/UwDSL2Fzej75N9hNJ3N8FQuTIeDyw6FNGWUxmkjVBLQGlzfnYfK8IYkdfYkrPn3Skq0pVxA==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-2.8.0.tgz",
+      "integrity": "sha512-29MOaxBog7qaEhmeCzJn2mONSbcA+slCTzHN4nJ3aZl4KrC9V32rXlQpG5x0qHbFQ1LaG1f5gPO83xbiAeMBIw==",
       "dev": true,
       "dependencies": {
         "@graphql-codegen/plugin-helpers": "^2.4.0",
@@ -1623,16 +1610,16 @@
         "dependency-graph": "^0.11.0",
         "graphql-tag": "^2.11.0",
         "parse-filepath": "^1.0.2",
-        "tslib": "~2.3.0"
+        "tslib": "~2.4.0"
       },
       "peerDependencies": {
         "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
       }
     },
     "node_modules/@graphql-codegen/visitor-plugin-common/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
       "dev": true
     },
     "node_modules/@graphql-tools/apollo-engine-loader": {
@@ -1985,14 +1972,26 @@
       "dev": true
     },
     "node_modules/@graphql-tools/relay-operation-optimizer": {
-      "version": "6.4.5",
-      "resolved": "https://registry.npmjs.org/@graphql-tools/relay-operation-optimizer/-/relay-operation-optimizer-6.4.5.tgz",
-      "integrity": "sha512-AB/eOfpjteO4Gt0is0U1TseDuFjs/DLV1N0cqF0t6TqQLNVBeWIw7yVb8jw7HIfg3jcKLj++8582lhvCsWMT5g==",
+      "version": "6.4.10",
+      "resolved": "https://registry.npmjs.org/@graphql-tools/relay-operation-optimizer/-/relay-operation-optimizer-6.4.10.tgz",
+      "integrity": "sha512-a5wDdXP7MmwZDy9R8+RZ0ajJBWX1Lk9sIG6uSIo5G/LnGpXncgBhKpJf5r6rOf0zsFLWnAkYm/dCDMpFaGE/Yw==",
       "dev": true,
       "dependencies": {
-        "@graphql-tools/utils": "8.6.5",
+        "@graphql-tools/utils": "8.6.10",
         "relay-compiler": "12.0.0",
-        "tslib": "~2.3.0"
+        "tslib": "~2.4.0"
+      },
+      "peerDependencies": {
+        "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0"
+      }
+    },
+    "node_modules/@graphql-tools/relay-operation-optimizer/node_modules/@graphql-tools/utils": {
+      "version": "8.6.10",
+      "resolved": "https://registry.npmjs.org/@graphql-tools/utils/-/utils-8.6.10.tgz",
+      "integrity": "sha512-bJH9qwuyM3BP0PTU6/lvBDkk6jdEIOn+dbyk4pHMVNnvbJ1gZQwo62To8SHxxaUTus8OMhhVPSh9ApWXREURcg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "~2.4.0"
       },
       "peerDependencies": {
         "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0"
@@ -2030,9 +2029,9 @@
       }
     },
     "node_modules/@graphql-tools/relay-operation-optimizer/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
       "dev": true
     },
     "node_modules/@graphql-tools/schema": {
@@ -2204,25 +2203,47 @@
       "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==",
       "dev": true
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
+      "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.0",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
-      "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz",
+      "integrity": "sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.1.tgz",
+      "integrity": "sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==",
       "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
-      "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==",
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz",
+      "integrity": "sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==",
       "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz",
-      "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==",
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz",
+      "integrity": "sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==",
       "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
@@ -2230,23 +2251,23 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.2.tgz",
-      "integrity": "sha512-A/P4ysmFScBFyu1ZV0Mr1Y89snyQhqGwsCrkEpK+itMF+y+pMqBoPVIyakUf4LXqGWJGiGFuIerihvSG70Ad8Q=="
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.6.tgz",
+      "integrity": "sha512-Te/OBDXFSodPU6jlXYPAXpmZr/AkG6DCATAxttQxqOWaq6eDFX25Db3dK0120GZrSZmv4QCe9KsZmJKDbWs4OA=="
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "12.1.5",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-12.1.5.tgz",
-      "integrity": "sha512-Cnb8ERC5bNKBFrnMH6203sp/b0Y78QRx1XsFu+86oBtDBmQmOFoHu7teQjHm69ER73XKK3aGaeoLiXacHoUFsg==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-12.1.6.tgz",
+      "integrity": "sha512-yNUtJ90NEiYFT6TJnNyofKMPYqirKDwpahcbxBgSIuABwYOdkGwzos1ZkYD51Qf0diYwpQZBeVqElTk7Q2WNqw==",
       "dev": true,
       "dependencies": {
         "glob": "7.1.7"
       }
     },
     "node_modules/@next/swc-android-arm-eabi": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.2.tgz",
-      "integrity": "sha512-iwalfLBhYmCIlj09czFbovj1SmTycf0AGR8CB357wgmEN8xIuznIwSsCH87AhwQ9apfNtdeDhxvuKmhS9T3FqQ==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.6.tgz",
+      "integrity": "sha512-BxBr3QAAAXWgk/K7EedvzxJr2dE014mghBSA9iOEAv0bMgF+MRq4PoASjuHi15M2zfowpcRG8XQhMFtxftCleQ==",
       "cpu": [
         "arm"
       ],
@@ -2259,9 +2280,9 @@
       }
     },
     "node_modules/@next/swc-android-arm64": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.1.2.tgz",
-      "integrity": "sha512-ZoR0Vx7czJhTgRAcFbzTKQc2n2ChC036/uc6PbgYiI/LreEnfmsV/CiREP0pUVs5ndntOX8kBA3BSbh4zCO5tQ==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.1.6.tgz",
+      "integrity": "sha512-EboEk3ROYY7U6WA2RrMt/cXXMokUTXXfnxe2+CU+DOahvbrO8QSWhlBl9I9ZbFzJx28AGB9Yo3oQHCvph/4Lew==",
       "cpu": [
         "arm64"
       ],
@@ -2274,9 +2295,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.2.tgz",
-      "integrity": "sha512-VXv7lpqFjHwkK65CZHkjvBxlSBTG+l3O0Zl2zHniHj0xHzxJZvR8VFjV2zIMZCYSfVqeQ5yt2rjwuQ9zbpGtXQ==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.6.tgz",
+      "integrity": "sha512-P0EXU12BMSdNj1F7vdkP/VrYDuCNwBExtRPDYawgSUakzi6qP0iKJpya2BuLvNzXx+XPU49GFuDC5X+SvY0mOw==",
       "cpu": [
         "arm64"
       ],
@@ -2289,9 +2310,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.2.tgz",
-      "integrity": "sha512-evXxJQnXEnU+heWyun7d0UV6bhBcmoiyFGR3O3v9qdhGbeXh+SXYVxRO69juuh6V7RWRdlb1KQ0rGUNa1k0XSw==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.6.tgz",
+      "integrity": "sha512-9FptMnbgHJK3dRDzfTpexs9S2hGpzOQxSQbe8omz6Pcl7rnEp9x4uSEKY51ho85JCjL4d0tDLBcXEJZKKLzxNg==",
       "cpu": [
         "x64"
       ],
@@ -2304,9 +2325,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm-gnueabihf": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.2.tgz",
-      "integrity": "sha512-LJV/wo6R0Ot7Y/20bZs00aBG4J333RT6H/5Q2AROE4Hnx7cenSktSnfU6WCnJgzYLSIHdbLs549LcZMULuVquw==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.6.tgz",
+      "integrity": "sha512-PvfEa1RR55dsik/IDkCKSFkk6ODNGJqPY3ysVUZqmnWMDSuqFtf7BPWHFa/53znpvVB5XaJ5Z1/6aR5CTIqxPw==",
       "cpu": [
         "arm"
       ],
@@ -2319,9 +2340,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.2.tgz",
-      "integrity": "sha512-fjlYU1Y8kVjjRKyuyQBYLHPxjGOS2ox7U8TqAvtgKvd2PxqdsgW4sP+VDovRVPrZlGXNllKoJiqMO1OoR9fB6w==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.6.tgz",
+      "integrity": "sha512-53QOvX1jBbC2ctnmWHyRhMajGq7QZfl974WYlwclXarVV418X7ed7o/EzGY+YVAEKzIVaAB9JFFWGXn8WWo0gQ==",
       "cpu": [
         "arm64"
       ],
@@ -2334,9 +2355,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.2.tgz",
-      "integrity": "sha512-Y1JRDMHqSjLObjyrD1hf6ePrJcOF/mkw+LbAzoNgrHL1dSuIAqcz3jYunJt8T7Yw48xSJy6LPSL9BclAHwEwOA==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.6.tgz",
+      "integrity": "sha512-CMWAkYqfGdQCS+uuMA1A2UhOfcUYeoqnTW7msLr2RyYAys15pD960hlDfq7QAi8BCAKk0sQ2rjsl0iqMyziohQ==",
       "cpu": [
         "arm64"
       ],
@@ -2349,9 +2370,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.2.tgz",
-      "integrity": "sha512-5N4QSRT60ikQqCU8iHfYZzlhg6MFTLsKhMTARmhn8wLtZfN9VVyTFwZrJQWjV64dZc4JFeXDANGao8fm55y6bw==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.6.tgz",
+      "integrity": "sha512-AC7jE4Fxpn0s3ujngClIDTiEM/CQiB2N2vkcyWWn6734AmGT03Duq6RYtPMymFobDdAtZGFZd5nR95WjPzbZAQ==",
       "cpu": [
         "x64"
       ],
@@ -2364,9 +2385,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.2.tgz",
-      "integrity": "sha512-b32F/xAgdYG4Pt0foFzhF+2uhvNxnEj7aJNp1R4EhZotdej2PzvFWcP/dGkc7MJl205pBz5oC3gHyILIIlW6XA==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.6.tgz",
+      "integrity": "sha512-c9Vjmi0EVk0Kou2qbrynskVarnFwfYIi+wKufR9Ad7/IKKuP6aEhOdZiIIdKsYWRtK2IWRF3h3YmdnEa2WLUag==",
       "cpu": [
         "x64"
       ],
@@ -2379,9 +2400,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.2.tgz",
-      "integrity": "sha512-hVOcGmWDeVwO00Aclopsj6MoYhfJl5zA4vjAai9KjgclQTFZa/DC0vQjgKAHHKGT5oMHgjiq/G7L6P1/UfwYnw==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.6.tgz",
+      "integrity": "sha512-3UTOL/5XZSKFelM7qN0it35o3Cegm6LsyuERR3/OoqEExyj3aCk7F025b54/707HTMAnjlvQK3DzLhPu/xxO4g==",
       "cpu": [
         "arm64"
       ],
@@ -2394,9 +2415,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.2.tgz",
-      "integrity": "sha512-wnVDGIVz2pR3vIkyN6IE+1NvMSBrBj1jba11iR16m8TAPzZH/PrNsxr0a9N5VavEXXLcQpoUVvT+N7nflbRAHg==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.6.tgz",
+      "integrity": "sha512-8ZWoj6nCq6fI1yCzKq6oK0jE6Mxlz4MrEsRyu0TwDztWQWe7rh4XXGLAa2YVPatYcHhMcUL+fQQbqd1MsgaSDA==",
       "cpu": [
         "ia32"
       ],
@@ -2409,9 +2430,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.2.tgz",
-      "integrity": "sha512-MLNcurEpQp0+7OU9261f7PkN52xTGkfrt4IYTIXau7DO/aHj927oK6piIJdl9EOHdX/KN5W6qlyErj170PSHtw==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.6.tgz",
+      "integrity": "sha512-4ZEwiRuZEicXhXqmhw3+de8Z4EpOLQj/gp+D9fFWo6ii6W1kBkNNvvEx4A90ugppu+74pT1lIJnOuz3A9oQeJA==",
       "cpu": [
         "x64"
       ],
@@ -2469,9 +2490,9 @@
       }
     },
     "node_modules/@rushstack/eslint-patch": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.0.8.tgz",
-      "integrity": "sha512-ZK5v4bJwgXldAUA8r3q9YKfCwOqoHTK/ZqRjSeRXQrBXWouoPnS4MQtgC4AXGiiBuUu5wxrRgTlv0ktmM4P1Aw==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz",
+      "integrity": "sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==",
       "dev": true
     },
     "node_modules/@samverschueren/stream-to-observable": {
@@ -2570,9 +2591,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "17.0.25",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.25.tgz",
-      "integrity": "sha512-wANk6fBrUwdpY4isjWrKTufkrXdu1D2YHCot2fD/DfWxF5sMrVSA+KN7ydckvaTCh0HiqX9IVl0L5/ZoXg5M7w==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.33.tgz",
+      "integrity": "sha512-miWq2m2FiQZmaHfdZNcbpp9PuXg34W5JZ5CrJ/BaS70VuhoJENBEQybeiYSaPBRNq6KQGnjfEnc/F3PN++D+XQ==",
       "dev": true
     },
     "node_modules/@types/nodemailer": {
@@ -2597,9 +2618,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "17.0.43",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz",
-      "integrity": "sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==",
+      "version": "18.0.9",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.9.tgz",
+      "integrity": "sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -2608,9 +2629,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "17.0.14",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.14.tgz",
-      "integrity": "sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==",
+      "version": "18.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.4.tgz",
+      "integrity": "sha512-FgTtbqPOCI3dzZPZoC2T/sx3L34qxy99ITWn4eoSA95qPyXDMH0ALoAqUp49ITniiJFsXUVBtalh/KffMpg21Q==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
@@ -2647,14 +2668,14 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.20.0.tgz",
-      "integrity": "sha512-fapGzoxilCn3sBtC6NtXZX6+P/Hef7VDbyfGqTTpzYydwhlkevB+0vE0EnmHPVTVSy68GUncyJ/2PcrFBeCo5Q==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.23.0.tgz",
+      "integrity": "sha512-hEcSmG4XodSLiAp1uxv/OQSGsDY6QN3TcRU32gANp+19wGE1QQZLRS8/GV58VRUoXhnkuJ3ZxNQ3T6Z6zM59DA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.20.0",
-        "@typescript-eslint/type-utils": "5.20.0",
-        "@typescript-eslint/utils": "5.20.0",
+        "@typescript-eslint/scope-manager": "5.23.0",
+        "@typescript-eslint/type-utils": "5.23.0",
+        "@typescript-eslint/utils": "5.23.0",
         "debug": "^4.3.2",
         "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.1.8",
@@ -2680,14 +2701,14 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.20.0.tgz",
-      "integrity": "sha512-UWKibrCZQCYvobmu3/N8TWbEeo/EPQbS41Ux1F9XqPzGuV7pfg6n50ZrFo6hryynD8qOTTfLHtHjjdQtxJ0h/w==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.23.0.tgz",
+      "integrity": "sha512-V06cYUkqcGqpFjb8ttVgzNF53tgbB/KoQT/iB++DOIExKmzI9vBJKjZKt/6FuV9c+zrDsvJKbJ2DOCYwX91cbw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.20.0",
-        "@typescript-eslint/types": "5.20.0",
-        "@typescript-eslint/typescript-estree": "5.20.0",
+        "@typescript-eslint/scope-manager": "5.23.0",
+        "@typescript-eslint/types": "5.23.0",
+        "@typescript-eslint/typescript-estree": "5.23.0",
         "debug": "^4.3.2"
       },
       "engines": {
@@ -2707,13 +2728,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.20.0.tgz",
-      "integrity": "sha512-h9KtuPZ4D/JuX7rpp1iKg3zOH0WNEa+ZIXwpW/KWmEFDxlA/HSfCMhiyF1HS/drTICjIbpA6OqkAhrP/zkCStg==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.23.0.tgz",
+      "integrity": "sha512-EhjaFELQHCRb5wTwlGsNMvzK9b8Oco4aYNleeDlNuL6qXWDF47ch4EhVNPh8Rdhf9tmqbN4sWDk/8g+Z/J8JVw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.20.0",
-        "@typescript-eslint/visitor-keys": "5.20.0"
+        "@typescript-eslint/types": "5.23.0",
+        "@typescript-eslint/visitor-keys": "5.23.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2724,12 +2745,12 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.20.0.tgz",
-      "integrity": "sha512-WxNrCwYB3N/m8ceyoGCgbLmuZwupvzN0rE8NBuwnl7APgjv24ZJIjkNzoFBXPRCGzLNkoU/WfanW0exvp/+3Iw==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.23.0.tgz",
+      "integrity": "sha512-iuI05JsJl/SUnOTXA9f4oI+/4qS/Zcgk+s2ir+lRmXI+80D8GaGwoUqs4p+X+4AxDolPpEpVUdlEH4ADxFy4gw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/utils": "5.20.0",
+        "@typescript-eslint/utils": "5.23.0",
         "debug": "^4.3.2",
         "tsutils": "^3.21.0"
       },
@@ -2750,9 +2771,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.20.0.tgz",
-      "integrity": "sha512-+d8wprF9GyvPwtoB4CxBAR/s0rpP25XKgnOvMf/gMXYDvlUC3rPFHupdTQ/ow9vn7UDe5rX02ovGYQbv/IUCbg==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.23.0.tgz",
+      "integrity": "sha512-NfBsV/h4dir/8mJwdZz7JFibaKC3E/QdeMEDJhiAE3/eMkoniZ7MjbEMCGXw6MZnZDMN3G9S0mH/6WUIj91dmw==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2763,13 +2784,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.20.0.tgz",
-      "integrity": "sha512-36xLjP/+bXusLMrT9fMMYy1KJAGgHhlER2TqpUVDYUQg4w0q/NW/sg4UGAgVwAqb8V4zYg43KMUpM8vV2lve6w==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.23.0.tgz",
+      "integrity": "sha512-xE9e0lrHhI647SlGMl+m+3E3CKPF1wzvvOEWnuE3CCjjT7UiRnDGJxmAcVKJIlFgK6DY9RB98eLr1OPigPEOGg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.20.0",
-        "@typescript-eslint/visitor-keys": "5.20.0",
+        "@typescript-eslint/types": "5.23.0",
+        "@typescript-eslint/visitor-keys": "5.23.0",
         "debug": "^4.3.2",
         "globby": "^11.0.4",
         "is-glob": "^4.0.3",
@@ -2790,15 +2811,15 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.20.0.tgz",
-      "integrity": "sha512-lHONGJL1LIO12Ujyx8L8xKbwWSkoUKFSO+0wDAqGXiudWB2EO7WEUT+YZLtVbmOmSllAjLb9tpoIPwpRe5Tn6w==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.23.0.tgz",
+      "integrity": "sha512-dbgaKN21drqpkbbedGMNPCtRPZo1IOUr5EI9Jrrh99r5UW5Q0dz46RKXeSBoPV+56R6dFKpbrdhgUNSJsDDRZA==",
       "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
-        "@typescript-eslint/scope-manager": "5.20.0",
-        "@typescript-eslint/types": "5.20.0",
-        "@typescript-eslint/typescript-estree": "5.20.0",
+        "@typescript-eslint/scope-manager": "5.23.0",
+        "@typescript-eslint/types": "5.23.0",
+        "@typescript-eslint/typescript-estree": "5.23.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0"
       },
@@ -2836,12 +2857,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.20.0.tgz",
-      "integrity": "sha512-1flRpNF+0CAQkMNlTJ6L/Z5jiODG/e5+7mk6XwtPOUS3UrTz3UOiAg9jG2VtKsWI6rZQfy4C6a232QNRZTRGlg==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.23.0.tgz",
+      "integrity": "sha512-Vd4mFNchU62sJB8pX19ZSPog05B0Y0CE2UxAZPT5k4iqhRYjPnqyY3woMxCd0++t9OTqkgjST+1ydLBi7e2Fvg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.20.0",
+        "@typescript-eslint/types": "5.23.0",
         "eslint-visitor-keys": "^3.0.0"
       },
       "engines": {
@@ -2865,9 +2886,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
+      "version": "8.7.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -3054,14 +3075,15 @@
       }
     },
     "node_modules/array.prototype.flat": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz",
-      "integrity": "sha512-KaYU+S+ndVqyUnignHftkwc58o3uVU1jzczILJ1tN2YaIZpFIKBiP/x/j97E5MVPsaCloPbqWLB/8qCTVvT2qg==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
+      "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.0"
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3071,14 +3093,15 @@
       }
     },
     "node_modules/array.prototype.flatmap": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz",
-      "integrity": "sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
+      "integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.0",
+        "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.0"
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3117,9 +3140,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.5.tgz",
-      "integrity": "sha512-Fvd8yCoA7lNX/OUllvS+aS1I7WRBclGXsepbvT8ZaPgrH24rgXpZzF0/6Hh3ZEkwg+0AES/Osd196VZmYoEFtw==",
+      "version": "10.4.7",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
+      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
       "funding": [
         {
           "type": "opencollective",
@@ -3131,8 +3154,8 @@
         }
       ],
       "dependencies": {
-        "browserslist": "^4.20.2",
-        "caniuse-lite": "^1.0.30001332",
+        "browserslist": "^4.20.3",
+        "caniuse-lite": "^1.0.30001335",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -3291,9 +3314,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.20.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.2.tgz",
-      "integrity": "sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==",
+      "version": "4.20.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz",
+      "integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==",
       "funding": [
         {
           "type": "opencollective",
@@ -3305,10 +3328,10 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001317",
-        "electron-to-chromium": "^1.4.84",
+        "caniuse-lite": "^1.0.30001332",
+        "electron-to-chromium": "^1.4.118",
         "escalade": "^3.1.1",
-        "node-releases": "^2.0.2",
+        "node-releases": "^2.0.3",
         "picocolors": "^1.0.0"
       },
       "bin": {
@@ -3446,9 +3469,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001332",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz",
-      "integrity": "sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==",
+      "version": "1.0.30001338",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001338.tgz",
+      "integrity": "sha512-1gLHWyfVoRDsHieO+CaeYe7jSo/MT7D7lhaXUiwwbuR5BwQxORs0f1tAwUSQr3YbxRXJvxHM/PA5FfPQRnsPeQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -4197,15 +4220,19 @@
       "dev": true
     },
     "node_modules/define-properties": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
+      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
       "dev": true,
       "dependencies": {
-        "object-keys": "^1.0.12"
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/defined": {
@@ -4332,9 +4359,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.118",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.118.tgz",
-      "integrity": "sha512-maZIKjnYDvF7Fs35nvVcyr44UcKNwybr93Oba2n3HkKDFAtk0svERkLN/HyczJDS3Fo4wU9th9fUQd09ZLtj1w=="
+      "version": "1.4.137",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz",
+      "integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA=="
     },
     "node_modules/elegant-spinner": {
       "version": "1.0.1",
@@ -4370,31 +4397,34 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
-      "integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.0.tgz",
+      "integrity": "sha512-URbD8tgRthKD3YcC39vbvSDrX23upXnPcnGAjQfgxXF5ID75YcENawc9ZX/9iTP9ptUyfCLIxTTuMYoRfiOVKA==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "es-to-primitive": "^1.2.1",
         "function-bind": "^1.1.1",
+        "function.prototype.name": "^1.1.5",
         "get-intrinsic": "^1.1.1",
         "get-symbol-description": "^1.0.0",
         "has": "^1.0.3",
-        "has-symbols": "^1.0.2",
+        "has-property-descriptors": "^1.0.0",
+        "has-symbols": "^1.0.3",
         "internal-slot": "^1.0.3",
         "is-callable": "^1.2.4",
-        "is-negative-zero": "^2.0.1",
+        "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.1",
+        "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
-        "is-weakref": "^1.0.1",
-        "object-inspect": "^1.11.0",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.12.0",
         "object-keys": "^1.1.1",
         "object.assign": "^4.1.2",
-        "string.prototype.trimend": "^1.0.4",
-        "string.prototype.trimstart": "^1.0.4",
-        "unbox-primitive": "^1.0.1"
+        "regexp.prototype.flags": "^1.4.1",
+        "string.prototype.trimend": "^1.0.5",
+        "string.prototype.trimstart": "^1.0.5",
+        "unbox-primitive": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4403,6 +4433,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "dev": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      }
+    },
     "node_modules/es-to-primitive": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
@@ -4441,12 +4480,12 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.14.0.tgz",
-      "integrity": "sha512-3/CE4aJX7LNEiE3i6FeodHmI/38GZtWCsAtsymScmzYapx8q1nVVb+eLcLSzATmCPXw5pT4TqVs1E0OmxAd9tw==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.15.0.tgz",
+      "integrity": "sha512-GG5USZ1jhCu8HJkzGgeK8/+RGnHaNYZGrGDzUtigK3BsGESW/rs2az23XqE0WVwDxy1VRvvjSSGu5nB0Bu+6SA==",
       "dev": true,
       "dependencies": {
-        "@eslint/eslintrc": "^1.2.2",
+        "@eslint/eslintrc": "^1.2.3",
         "@humanwhocodes/config-array": "^0.9.2",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
@@ -4457,7 +4496,7 @@
         "eslint-scope": "^7.1.1",
         "eslint-utils": "^3.0.0",
         "eslint-visitor-keys": "^3.3.0",
-        "espree": "^9.3.1",
+        "espree": "^9.3.2",
         "esquery": "^1.4.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -4473,7 +4512,7 @@
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
         "lodash.merge": "^4.6.2",
-        "minimatch": "^3.0.4",
+        "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
         "regexpp": "^3.2.0",
@@ -4493,20 +4532,20 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "12.1.5",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-12.1.5.tgz",
-      "integrity": "sha512-P+DCt5ti63KhC0qNLzrAmPcwRGq8pYqgcf/NNr1E+WjCrMkWdCAXkIANTquo+kcO1adR2k1lTo5GCrNUtKy4hQ==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-12.1.6.tgz",
+      "integrity": "sha512-qoiS3g/EPzfCTkGkaPBSX9W0NGE/B1wNO3oWrd76QszVGrdpLggNqcO8+LR6MB0CNqtp9Q8NoeVrxNVbzM9hqA==",
       "dev": true,
       "dependencies": {
-        "@next/eslint-plugin-next": "12.1.5",
-        "@rushstack/eslint-patch": "1.0.8",
-        "@typescript-eslint/parser": "5.10.1",
-        "eslint-import-resolver-node": "0.3.4",
-        "eslint-import-resolver-typescript": "2.4.0",
-        "eslint-plugin-import": "2.25.2",
-        "eslint-plugin-jsx-a11y": "6.5.1",
-        "eslint-plugin-react": "7.29.1",
-        "eslint-plugin-react-hooks": "4.3.0"
+        "@next/eslint-plugin-next": "12.1.6",
+        "@rushstack/eslint-patch": "^1.1.3",
+        "@typescript-eslint/parser": "^5.21.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^2.7.1",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-react": "^7.29.4",
+        "eslint-plugin-react-hooks": "^4.5.0"
       },
       "peerDependencies": {
         "eslint": "^7.23.0 || ^8.0.0",
@@ -4519,143 +4558,36 @@
         }
       }
     },
-    "node_modules/eslint-config-next/node_modules/@typescript-eslint/parser": {
-      "version": "5.10.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.10.1.tgz",
-      "integrity": "sha512-GReo3tjNBwR5RnRO0K2wDIDN31cM3MmDtgyQ85oAxAmC5K3j/g85IjP+cDfcqDsDDBf1HNKQAD0WqOYL8jXqUA==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "5.10.1",
-        "@typescript-eslint/types": "5.10.1",
-        "@typescript-eslint/typescript-estree": "5.10.1",
-        "debug": "^4.3.2"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/eslint-config-next/node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.10.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.1.tgz",
-      "integrity": "sha512-Lyvi559Gvpn94k7+ElXNMEnXu/iundV5uFmCUNnftbFrUbAJ1WBoaGgkbOBm07jVZa682oaBU37ao/NGGX4ZDg==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.10.1",
-        "@typescript-eslint/visitor-keys": "5.10.1"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/eslint-config-next/node_modules/@typescript-eslint/types": {
-      "version": "5.10.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.1.tgz",
-      "integrity": "sha512-ZvxQ2QMy49bIIBpTqFiOenucqUyjTQ0WNLhBM6X1fh1NNlYAC6Kxsx8bRTY3jdYsYg44a0Z/uEgQkohbR0H87Q==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/eslint-config-next/node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.10.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.1.tgz",
-      "integrity": "sha512-PwIGnH7jIueXv4opcwEbVGDATjGPO1dx9RkUl5LlHDSe+FXxPwFL5W/qYd5/NHr7f6lo/vvTrAzd0KlQtRusJQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.10.1",
-        "@typescript-eslint/visitor-keys": "5.10.1",
-        "debug": "^4.3.2",
-        "globby": "^11.0.4",
-        "is-glob": "^4.0.3",
-        "semver": "^7.3.5",
-        "tsutils": "^3.21.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/eslint-config-next/node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.10.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.1.tgz",
-      "integrity": "sha512-NjQ0Xinhy9IL979tpoTRuLKxMc0zJC7QVSdeerXs2/QvOy2yRkzX5dRb10X5woNUdJgU8G3nYRDlI33sq1K4YQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.10.1",
-        "eslint-visitor-keys": "^3.0.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
     "node_modules/eslint-import-resolver-node": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz",
-      "integrity": "sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==",
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
+      "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
       "dev": true,
       "dependencies": {
-        "debug": "^2.6.9",
-        "resolve": "^1.13.1"
+        "debug": "^3.2.7",
+        "resolve": "^1.20.0"
       }
     },
     "node_modules/eslint-import-resolver-node/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
       "dependencies": {
-        "ms": "2.0.0"
+        "ms": "^2.1.1"
       }
     },
-    "node_modules/eslint-import-resolver-node/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
-    },
     "node_modules/eslint-import-resolver-typescript": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.4.0.tgz",
-      "integrity": "sha512-useJKURidCcldRLCNKWemr1fFQL1SzB3G4a0li6lFGvlc5xGe1hY343bvG07cbpCzPuM/lK19FIJB3XGFSkplA==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz",
+      "integrity": "sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==",
       "dev": true,
       "dependencies": {
-        "debug": "^4.1.1",
-        "glob": "^7.1.6",
-        "is-glob": "^4.0.1",
-        "resolve": "^1.17.0",
-        "tsconfig-paths": "^3.9.0"
+        "debug": "^4.3.4",
+        "glob": "^7.2.0",
+        "is-glob": "^4.0.3",
+        "resolve": "^1.22.0",
+        "tsconfig-paths": "^3.14.1"
       },
       "engines": {
         "node": ">=4"
@@ -4665,6 +4597,43 @@
         "eslint-plugin-import": "*"
       }
     },
+    "node_modules/eslint-import-resolver-typescript/node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-import-resolver-typescript/node_modules/glob": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/eslint-module-utils": {
       "version": "2.7.3",
       "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
@@ -4688,9 +4657,9 @@
       }
     },
     "node_modules/eslint-plugin-import": {
-      "version": "2.25.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.2.tgz",
-      "integrity": "sha512-qCwQr9TYfoBHOFcVGKY9C9unq05uOxxdklmBXLVvcwo68y5Hta6/GzCZEMx2zQiu0woKNEER0LE7ZgaOfBU14g==",
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
+      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
       "dev": true,
       "dependencies": {
         "array-includes": "^3.1.4",
@@ -4698,14 +4667,14 @@
         "debug": "^2.6.9",
         "doctrine": "^2.1.0",
         "eslint-import-resolver-node": "^0.3.6",
-        "eslint-module-utils": "^2.7.0",
+        "eslint-module-utils": "^2.7.3",
         "has": "^1.0.3",
-        "is-core-module": "^2.7.0",
+        "is-core-module": "^2.8.1",
         "is-glob": "^4.0.3",
-        "minimatch": "^3.0.4",
+        "minimatch": "^3.1.2",
         "object.values": "^1.1.5",
-        "resolve": "^1.20.0",
-        "tsconfig-paths": "^3.11.0"
+        "resolve": "^1.22.0",
+        "tsconfig-paths": "^3.14.1"
       },
       "engines": {
         "node": ">=4"
@@ -4735,31 +4704,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/eslint-plugin-import/node_modules/eslint-import-resolver-node": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
-      "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^3.2.7",
-        "resolve": "^1.20.0"
-      }
-    },
-    "node_modules/eslint-plugin-import/node_modules/eslint-import-resolver-node/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dev": true,
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/eslint-plugin-import/node_modules/eslint-import-resolver-node/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
-    },
     "node_modules/eslint-plugin-import/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -4793,9 +4737,9 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.29.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.29.1.tgz",
-      "integrity": "sha512-WtzRpHMhsOX05ZrkyaaqmLl2uXGqmYooCfBxftJKlkYdsltiufGgfU7uuoHwR2lBam2Kh/EIVID4aU9e3kbCMA==",
+      "version": "7.29.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz",
+      "integrity": "sha512-CVCXajliVh509PcZYRFyu/BoUEz452+jtQJq2b3Bae4v3xBUWPLCmtmBM+ZinG4MzwmxJgJ2M5rMqhqLVn7MtQ==",
       "dev": true,
       "dependencies": {
         "array-includes": "^3.1.4",
@@ -4821,9 +4765,9 @@
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz",
-      "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz",
+      "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==",
       "dev": true,
       "engines": {
         "node": ">=10"
@@ -4916,13 +4860,13 @@
       }
     },
     "node_modules/espree": {
-      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.1.tgz",
-      "integrity": "sha512-bvdyLmJMfwkV3NCRl5ZhJf22zBFo1y8bYh3VYb+bfzqNB4Je68P2sSuXyuFquzWLebHpNd2/d5uv7yoP9ISnGQ==",
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
+      "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.7.0",
-        "acorn-jsx": "^5.3.1",
+        "acorn": "^8.7.1",
+        "acorn-jsx": "^5.3.2",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
@@ -4986,11 +4930,6 @@
       "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
       "dev": true
     },
-    "node_modules/exenv": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
-      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
-    },
     "node_modules/external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -5257,12 +5196,39 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
+      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.0",
+        "functions-have-names": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -5413,14 +5379,11 @@
       }
     },
     "node_modules/graphql": {
-      "version": "14.7.0",
-      "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.7.0.tgz",
-      "integrity": "sha512-l0xWZpoPKpppFzMfvVyFmp9vLN7w/ZZJPefUicMCepfJeQ8sMcztloGYY9DfjVPo6tIUDzU5Hw3MUbIjj9AVVA==",
-      "dependencies": {
-        "iterall": "^1.2.2"
-      },
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.5.0.tgz",
+      "integrity": "sha512-qbHgh8Ix+j/qY+a/ZcJnFQ+j8ezakqPiHwPiZhV/3PgGlgf96QMBB5/f2rkiC9sgLoy/xvT6TSiaf2nTHJh5iA==",
       "engines": {
-        "node": ">= 6.x"
+        "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
       }
     },
     "node_modules/graphql-request": {
@@ -5526,9 +5489,9 @@
       }
     },
     "node_modules/has-bigints": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
-      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
       "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -5543,6 +5506,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
@@ -5570,6 +5545,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hotkeys-js": {
+      "version": "3.8.7",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.7.tgz",
+      "integrity": "sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg=="
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
@@ -5891,9 +5871,9 @@
       }
     },
     "node_modules/is-number-object": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.6.tgz",
-      "integrity": "sha512-bEVOqiRcvo3zO1+G2lVMy+gkkEm9Yh7cDMRusKKu5ZJKPUYSJwICTKZrNKHA2EbSP0Tu0+6B/emsYNHZyn6K8g==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
       "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
@@ -5952,10 +5932,13 @@
       }
     },
     "node_modules/is-shared-array-buffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz",
-      "integrity": "sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
       "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -6078,7 +6061,8 @@
     "node_modules/iterall": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.3.0.tgz",
-      "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg=="
+      "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==",
+      "dev": true
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
@@ -6794,15 +6778,14 @@
       "dev": true
     },
     "node_modules/next": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/next/-/next-12.1.2.tgz",
-      "integrity": "sha512-JHPCsnFTBO0Z4SQxSYc611UA1WA+r/3y3Neg66AH5/gSO/oksfRnFw/zGX/FZ9+oOUHS9y3wJFawNpVYR2gJSQ==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-12.1.6.tgz",
+      "integrity": "sha512-cebwKxL3/DhNKfg9tPZDQmbRKjueqykHHbgaoG4VBRH3AHQJ2HO0dbKFiS1hPhe1/qgc2d/hFeadsbPicmLD+A==",
       "dependencies": {
-        "@next/env": "12.1.2",
-        "caniuse-lite": "^1.0.30001283",
+        "@next/env": "12.1.6",
+        "caniuse-lite": "^1.0.30001332",
         "postcss": "8.4.5",
-        "styled-jsx": "5.0.1",
-        "use-subscription": "1.5.1"
+        "styled-jsx": "5.0.2"
       },
       "bin": {
         "next": "dist/bin/next"
@@ -6811,18 +6794,18 @@
         "node": ">=12.22.0"
       },
       "optionalDependencies": {
-        "@next/swc-android-arm-eabi": "12.1.2",
-        "@next/swc-android-arm64": "12.1.2",
-        "@next/swc-darwin-arm64": "12.1.2",
-        "@next/swc-darwin-x64": "12.1.2",
-        "@next/swc-linux-arm-gnueabihf": "12.1.2",
-        "@next/swc-linux-arm64-gnu": "12.1.2",
-        "@next/swc-linux-arm64-musl": "12.1.2",
-        "@next/swc-linux-x64-gnu": "12.1.2",
-        "@next/swc-linux-x64-musl": "12.1.2",
-        "@next/swc-win32-arm64-msvc": "12.1.2",
-        "@next/swc-win32-ia32-msvc": "12.1.2",
-        "@next/swc-win32-x64-msvc": "12.1.2"
+        "@next/swc-android-arm-eabi": "12.1.6",
+        "@next/swc-android-arm64": "12.1.6",
+        "@next/swc-darwin-arm64": "12.1.6",
+        "@next/swc-darwin-x64": "12.1.6",
+        "@next/swc-linux-arm-gnueabihf": "12.1.6",
+        "@next/swc-linux-arm64-gnu": "12.1.6",
+        "@next/swc-linux-arm64-musl": "12.1.6",
+        "@next/swc-linux-x64-gnu": "12.1.6",
+        "@next/swc-linux-x64-musl": "12.1.6",
+        "@next/swc-win32-arm64-msvc": "12.1.6",
+        "@next/swc-win32-ia32-msvc": "12.1.6",
+        "@next/swc-win32-x64-msvc": "12.1.6"
       },
       "peerDependencies": {
         "fibers": ">= 3.1.0",
@@ -6924,14 +6907,14 @@
       "dev": true
     },
     "node_modules/node-releases": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.2.tgz",
-      "integrity": "sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg=="
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz",
+      "integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ=="
     },
     "node_modules/nodemailer": {
-      "version": "6.7.3",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.7.3.tgz",
-      "integrity": "sha512-KUdDsspqx89sD4UUyUKzdlUOper3hRkDVkrKh/89G+d9WKsU5ox51NWS4tB1XR5dPUdR4SP0E3molyEfOvSa3g==",
+      "version": "6.7.5",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.7.5.tgz",
+      "integrity": "sha512-6VtMpwhsrixq1HDYSBBHvW0GwiWawE75dS3oal48VqRhUvKJNnKnJo2RI/bCVQubj1vgrgscMNW4DHaD6xtMCg==",
       "engines": {
         "node": ">=6.0.0"
       }
@@ -7062,13 +7045,13 @@
       }
     },
     "node_modules/object.hasown": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz",
-      "integrity": "sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz",
+      "integrity": "sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==",
       "dev": true,
       "dependencies": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -7671,41 +7654,40 @@
       }
     },
     "node_modules/react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.1.0.tgz",
+      "integrity": "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz",
+      "integrity": "sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.22.0"
       },
       "peerDependencies": {
-        "react": "17.0.2"
+        "react": "^18.1.0"
       }
     },
-    "node_modules/react-image-lightbox": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.4.tgz",
-      "integrity": "sha512-kTiAODz091bgT7SlWNHab0LSMZAPJtlNWDGKv7pLlLY1krmf7FuG1zxE0wyPpeA8gPdwfr3cu6sPwZRqWsc3Eg==",
+    "node_modules/react-hot-keys": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-hot-keys/-/react-hot-keys-2.7.2.tgz",
+      "integrity": "sha512-Z7eSh7SU6s52+zP+vkfFoNk0x4kgEmnwqDiyACKv53crK2AZ7FUaBLnf+vxLor3dvtId9murLmKOsrJeYgeHWw==",
       "dependencies": {
-        "prop-types": "^15.7.2",
-        "react-modal": "^3.11.1"
+        "hotkeys-js": "^3.8.1",
+        "prop-types": "^15.7.2"
       },
       "peerDependencies": {
-        "react": "16.x || 17.x",
-        "react-dom": "16.x || 17.x"
+        "@babel/runtime": ">=7.10.0",
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
       }
     },
     "node_modules/react-is": {
@@ -7713,35 +7695,12 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "node_modules/react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
-    "node_modules/react-modal": {
-      "version": "3.14.4",
-      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.14.4.tgz",
-      "integrity": "sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg==",
-      "dependencies": {
-        "exenv": "^1.2.0",
-        "prop-types": "^15.7.2",
-        "react-lifecycles-compat": "^3.0.0",
-        "warning": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17",
-        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17"
-      }
-    },
     "node_modules/react-swipeable": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-6.2.1.tgz",
-      "integrity": "sha512-JpTj+tjJTDcIWtoMkab6zfwWD1T1tBzUyEfXsXnohnNkwA2dTuNS0gtN7HoxU1Qa+e3GDnfNYk2z7vwzfO4SoQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.0.tgz",
+      "integrity": "sha512-NI7KGfQ6gwNFN0Hor3vytYW3iRfMMaivGEuxcADOOfBCx/kqwXE8IfHFxEcxSUkxCYf38COLKYd9EMYZghqaUA==",
       "peerDependencies": {
-        "react": "^16.8.3 || ^17"
+        "react": "^16.8.3 || ^17 || ^18"
       }
     },
     "node_modules/readable-stream": {
@@ -7773,17 +7732,17 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz",
-      "integrity": "sha512-pMR7hBVUUGI7PMA37m2ofIdQCsomVnas+Jn5UPGAHQ+/LlwKm/aTLJHdasmHRzlfeZwHiAOaRSo2rbBDm3nNUQ==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -8028,12 +7987,11 @@
       "dev": true
     },
     "node_modules/scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz",
+      "integrity": "sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "node_modules/scuid": {
@@ -8134,15 +8092,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -8254,26 +8203,28 @@
       }
     },
     "node_modules/string.prototype.trimend": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
+      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/string.prototype.trimstart": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
+      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -8313,9 +8264,9 @@
       }
     },
     "node_modules/styled-jsx": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.1.tgz",
-      "integrity": "sha512-+PIZ/6Uk40mphiQJJI1202b+/dYeTVd9ZnMPR80pgiWbjIwvN2zIp4r9et0BgqBuShh48I0gttPlAXA7WVvBxw==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.2.tgz",
+      "integrity": "sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==",
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -8581,9 +8532,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.6.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
-      "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
+      "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -8613,14 +8564,14 @@
       }
     },
     "node_modules/unbox-primitive": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
-      "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
       "dev": true,
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has-bigints": "^1.0.1",
-        "has-symbols": "^1.0.2",
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
         "which-boxed-primitive": "^1.0.2"
       },
       "funding": {
@@ -8690,17 +8641,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/use-subscription": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
-      "integrity": "sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==",
-      "dependencies": {
-        "object-assign": "^4.1.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -8728,14 +8668,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -9069,12 +9001,13 @@
   },
   "dependencies": {
     "@ampproject/remapping": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
-      "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
+      "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
       "dev": true,
       "requires": {
-        "@jridgewell/trace-mapping": "^0.3.0"
+        "@jridgewell/gen-mapping": "^0.1.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
       }
     },
     "@babel/code-frame": {
@@ -9087,31 +9020,31 @@
       }
     },
     "@babel/compat-data": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.7.tgz",
-      "integrity": "sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.10.tgz",
+      "integrity": "sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw==",
       "dev": true
     },
     "@babel/core": {
-      "version": "7.17.8",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.8.tgz",
-      "integrity": "sha512-OdQDV/7cRBtJHLSOBqqbYNkOcydOgnX59TZx4puf41fzcVtN3e/4yqY8lMQsK+5X2lJtAdmA+6OHqsj1hBJ4IQ==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.10.tgz",
+      "integrity": "sha512-liKoppandF3ZcBnIYFjfSDHZLKdLHGJRkoWtG8zQyGJBQfIYobpnVGI5+pLBNtS6psFLDzyq8+h5HiVljW9PNA==",
       "dev": true,
       "requires": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.7",
-        "@babel/helper-compilation-targets": "^7.17.7",
+        "@babel/generator": "^7.17.10",
+        "@babel/helper-compilation-targets": "^7.17.10",
         "@babel/helper-module-transforms": "^7.17.7",
-        "@babel/helpers": "^7.17.8",
-        "@babel/parser": "^7.17.8",
+        "@babel/helpers": "^7.17.9",
+        "@babel/parser": "^7.17.10",
         "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.3",
-        "@babel/types": "^7.17.0",
+        "@babel/traverse": "^7.17.10",
+        "@babel/types": "^7.17.10",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
-        "json5": "^2.1.2",
+        "json5": "^2.2.1",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -9130,14 +9063,14 @@
       }
     },
     "@babel/generator": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz",
-      "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.10.tgz",
+      "integrity": "sha512-46MJZZo9y3o4kmhBVc7zW7i8dtR1oIK/sdO5NcfcZRhTGYi+KKJRtHNgsU6c4VUcJmUNV/LQdebD/9Dlv4K+Tg==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.17.0",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
+        "@babel/types": "^7.17.10",
+        "@jridgewell/gen-mapping": "^0.1.0",
+        "jsesc": "^2.5.1"
       }
     },
     "@babel/helper-annotate-as-pure": {
@@ -9150,14 +9083,14 @@
       }
     },
     "@babel/helper-compilation-targets": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz",
-      "integrity": "sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.10.tgz",
+      "integrity": "sha512-gh3RxjWbauw/dFiU/7whjd0qN9K6nPJMqe6+Er7rOavFh0CQUSwhAE3IcTho2rywPJFxej6TUUHDkWcYI6gGqQ==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.17.7",
+        "@babel/compat-data": "^7.17.10",
         "@babel/helper-validator-option": "^7.16.7",
-        "browserslist": "^4.17.5",
+        "browserslist": "^4.20.2",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -9170,15 +9103,15 @@
       }
     },
     "@babel/helper-create-class-features-plugin": {
-      "version": "7.17.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.6.tgz",
-      "integrity": "sha512-SogLLSxXm2OkBbSsHZMM4tUi8fUzjs63AT/d0YQIzr6GSd8Hxsbk2KYDX0k0DweAzGMj/YWeiCsorIdtdcW8Eg==",
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz",
+      "integrity": "sha512-kUjip3gruz6AJKOq5i3nC6CoCEEF/oHH3cp6tOZhB+IyyyPyW0g1Gfsxn3mkk6S08pIA2y8GQh609v9G/5sHVQ==",
       "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
         "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.16.7",
-        "@babel/helper-member-expression-to-functions": "^7.16.7",
+        "@babel/helper-function-name": "^7.17.9",
+        "@babel/helper-member-expression-to-functions": "^7.17.7",
         "@babel/helper-optimise-call-expression": "^7.16.7",
         "@babel/helper-replace-supers": "^7.16.7",
         "@babel/helper-split-export-declaration": "^7.16.7"
@@ -9194,23 +9127,13 @@
       }
     },
     "@babel/helper-function-name": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz",
-      "integrity": "sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==",
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz",
+      "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==",
       "dev": true,
       "requires": {
-        "@babel/helper-get-function-arity": "^7.16.7",
         "@babel/template": "^7.16.7",
-        "@babel/types": "^7.16.7"
-      }
-    },
-    "@babel/helper-get-function-arity": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz",
-      "integrity": "sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.17.0"
       }
     },
     "@babel/helper-hoist-variables": {
@@ -9324,13 +9247,13 @@
       "dev": true
     },
     "@babel/helpers": {
-      "version": "7.17.8",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.8.tgz",
-      "integrity": "sha512-QcL86FGxpfSJwGtAvv4iG93UL6bmqBdmoVY0CMCU2g+oD2ezQse3PT5Pa+jiD6LJndBQi0EDlpzOWNlLuhz5gw==",
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.9.tgz",
+      "integrity": "sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==",
       "dev": true,
       "requires": {
         "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.3",
+        "@babel/traverse": "^7.17.9",
         "@babel/types": "^7.17.0"
       }
     },
@@ -9404,9 +9327,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.17.8",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.8.tgz",
-      "integrity": "sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.10.tgz",
+      "integrity": "sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==",
       "dev": true
     },
     "@babel/plugin-proposal-class-properties": {
@@ -9586,9 +9509,9 @@
       }
     },
     "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.7.tgz",
-      "integrity": "sha512-ITPmR2V7MqioMJyrxUo2onHNC3e+MvfFiFIR0RP21d3PtlVb6sfzoxNKiphSZUOM9hEIdzCcZe83ieX3yoqjUA==",
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.9.tgz",
+      "integrity": "sha512-2TBFd/r2I6VlYn0YRTz2JdazS+FoUuQ2rIFHoAxtyP/0G3D82SBLaRq9rnUkpqlLg03Byfl/+M32mpxjO6KaPw==",
       "dev": true,
       "requires": {
         "@babel/helper-module-transforms": "^7.17.7",
@@ -9679,7 +9602,6 @@
       "version": "7.17.2",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
       "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -9706,19 +9628,19 @@
       }
     },
     "@babel/traverse": {
-      "version": "7.17.3",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.3.tgz",
-      "integrity": "sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.10.tgz",
+      "integrity": "sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.3",
+        "@babel/generator": "^7.17.10",
         "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.16.7",
+        "@babel/helper-function-name": "^7.17.9",
         "@babel/helper-hoist-variables": "^7.16.7",
         "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/parser": "^7.17.3",
-        "@babel/types": "^7.17.0",
+        "@babel/parser": "^7.17.10",
+        "@babel/types": "^7.17.10",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -9732,9 +9654,9 @@
       }
     },
     "@babel/types": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
-      "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.10.tgz",
+      "integrity": "sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A==",
       "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.16.7",
@@ -9768,19 +9690,19 @@
       }
     },
     "@eslint/eslintrc": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.2.tgz",
-      "integrity": "sha512-lTVWHs7O2hjBFZunXTZYnYqtB9GakA1lnxIf+gKq2nY5gxkkNi/lQvveW6t8gFdOHTg6nG50Xs95PrLqVpcaLg==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.3.tgz",
+      "integrity": "sha512-uGo44hIwoLGNyduRpjdEpovcbMdd+Nv7amtmJxnKmI8xj6yd5LncmSwDa5NgX/41lIFJtkjD6YdVfgEzPfJ5UA==",
       "dev": true,
       "requires": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.3.1",
+        "espree": "^9.3.2",
         "globals": "^13.9.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.0",
-        "minimatch": "^3.0.4",
+        "minimatch": "^3.1.2",
         "strip-json-comments": "^3.1.1"
       }
     },
@@ -9800,14 +9722,14 @@
       "integrity": "sha512-afgJ74VbN5SYYyv2VEAcTMHDMqLIqEtHRHyhUqMXd7IxzYOxvEpUw2Q963BHK3134RLJ1U1QeZgY0a7934+Fig=="
     },
     "@fontsource/vollkorn": {
-      "version": "4.5.6",
-      "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.6.tgz",
-      "integrity": "sha512-1IBBJM4Tj2UZ7fzoJEfHBY/oOqkyVzynFbX/Hdl3smDYB7Zw8BwcGBNHIT1alyZi2aI/9ir3cI/mynBSVUJ8Cw=="
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.9.tgz",
+      "integrity": "sha512-Lb6FpYn0dIR94I/SU624eyLoBUvfDgTGLHi6cioaMlyC3TJGaYVFQZCZV00pM0LHDVHnoOVyD34+rBNPL03jEA=="
     },
     "@fontsource/zen-maru-gothic": {
-      "version": "4.5.8",
-      "resolved": "https://registry.npmjs.org/@fontsource/zen-maru-gothic/-/zen-maru-gothic-4.5.8.tgz",
-      "integrity": "sha512-8w48IqZRW9rWaOXUX2fO994piFcsh7be+WiC18U9D7EE/3DLTwn1vlywss9CBmuFQwogAfsDoCp7aduuxE7nAQ=="
+      "version": "4.5.11",
+      "resolved": "https://registry.npmjs.org/@fontsource/zen-maru-gothic/-/zen-maru-gothic-4.5.11.tgz",
+      "integrity": "sha512-/msDkcA4N6OFXj7QPQXxNK3F088G4101TQYx8kLyw6TB+TQzWVzYyX8pyAx2v2k4IVjwh5wkjEEm7PD5iSn+0Q=="
     },
     "@graphql-codegen/cli": {
       "version": "2.6.2",
@@ -10174,71 +10096,71 @@
       }
     },
     "@graphql-codegen/typescript": {
-      "version": "2.4.8",
-      "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-2.4.8.tgz",
-      "integrity": "sha512-tVsHIkuyenBany7c5IMU1yi4S1er2hgyXJGNY7PcyhpJMx0eChmbqz1VTiZxDEwi8mDBS2mn3TaSJMh6xuJM5g==",
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-2.4.11.tgz",
+      "integrity": "sha512-K3oDLPJRH9Wgpg9TOvb7L+xrJZ8HxkIzV2umqGn54c+8DQjvnRFBIYRO0THgUBMnEauE2sEy6RZkGHGfgQUruA==",
       "dev": true,
       "requires": {
         "@graphql-codegen/plugin-helpers": "^2.4.0",
         "@graphql-codegen/schema-ast": "^2.4.1",
-        "@graphql-codegen/visitor-plugin-common": "2.7.4",
+        "@graphql-codegen/visitor-plugin-common": "2.8.0",
         "auto-bind": "~4.0.0",
-        "tslib": "~2.3.0"
+        "tslib": "~2.4.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
           "dev": true
         }
       }
     },
     "@graphql-codegen/typescript-graphql-request": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-graphql-request/-/typescript-graphql-request-4.4.5.tgz",
-      "integrity": "sha512-D8ao8j43R8pStLqCMXVzdvGX9xc/x+IWd8ZacbKUVKbpWxlO7AEVAF89fgTpPv4FFTYG62BdkElf3ePcvgEWuw==",
+      "version": "4.4.8",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-graphql-request/-/typescript-graphql-request-4.4.8.tgz",
+      "integrity": "sha512-4PuFMJCGhS/sY8n3ePr1JD349NUw5H6zySAJIvchVatPAbanI6swGKvu/YElkBYvx0l+S17TxTylAUui5N0QyA==",
       "dev": true,
       "requires": {
         "@graphql-codegen/plugin-helpers": "^2.4.0",
-        "@graphql-codegen/visitor-plugin-common": "2.7.4",
+        "@graphql-codegen/visitor-plugin-common": "2.8.0",
         "auto-bind": "~4.0.0",
-        "tslib": "~2.3.0"
+        "tslib": "~2.4.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
           "dev": true
         }
       }
     },
     "@graphql-codegen/typescript-operations": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-operations/-/typescript-operations-2.3.5.tgz",
-      "integrity": "sha512-GCZQW+O+cIF62ioPkQMoSJGzjJhtr7ttZGJOAoN/Q/oolG8ph9jNFePKO67tSQ/POAs5HLqfat4kAlCK8OPV3Q==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-operations/-/typescript-operations-2.4.0.tgz",
+      "integrity": "sha512-vJ15FLyWchuO2Xkp6uz7jJOdChiay7P9KJKFDILx/JTwjinU1fFa7iOvyeTvslqiUPxgsXthR5izdY+E5IyLkQ==",
       "dev": true,
       "requires": {
         "@graphql-codegen/plugin-helpers": "^2.4.0",
-        "@graphql-codegen/typescript": "^2.4.8",
-        "@graphql-codegen/visitor-plugin-common": "2.7.4",
+        "@graphql-codegen/typescript": "^2.4.11",
+        "@graphql-codegen/visitor-plugin-common": "2.8.0",
         "auto-bind": "~4.0.0",
-        "tslib": "~2.3.0"
+        "tslib": "~2.4.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
           "dev": true
         }
       }
     },
     "@graphql-codegen/visitor-plugin-common": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-2.7.4.tgz",
-      "integrity": "sha512-aaDoEudDD+B7DK/UwDSL2Fzej75N9hNJ3N8FQuTIeDyw6FNGWUxmkjVBLQGlzfnYfK8IYkdfYkrPn3Skq0pVxA==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-2.8.0.tgz",
+      "integrity": "sha512-29MOaxBog7qaEhmeCzJn2mONSbcA+slCTzHN4nJ3aZl4KrC9V32rXlQpG5x0qHbFQ1LaG1f5gPO83xbiAeMBIw==",
       "dev": true,
       "requires": {
         "@graphql-codegen/plugin-helpers": "^2.4.0",
@@ -10250,13 +10172,13 @@
         "dependency-graph": "^0.11.0",
         "graphql-tag": "^2.11.0",
         "parse-filepath": "^1.0.2",
-        "tslib": "~2.3.0"
+        "tslib": "~2.4.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
           "dev": true
         }
       }
@@ -10583,16 +10505,25 @@
       }
     },
     "@graphql-tools/relay-operation-optimizer": {
-      "version": "6.4.5",
-      "resolved": "https://registry.npmjs.org/@graphql-tools/relay-operation-optimizer/-/relay-operation-optimizer-6.4.5.tgz",
-      "integrity": "sha512-AB/eOfpjteO4Gt0is0U1TseDuFjs/DLV1N0cqF0t6TqQLNVBeWIw7yVb8jw7HIfg3jcKLj++8582lhvCsWMT5g==",
+      "version": "6.4.10",
+      "resolved": "https://registry.npmjs.org/@graphql-tools/relay-operation-optimizer/-/relay-operation-optimizer-6.4.10.tgz",
+      "integrity": "sha512-a5wDdXP7MmwZDy9R8+RZ0ajJBWX1Lk9sIG6uSIo5G/LnGpXncgBhKpJf5r6rOf0zsFLWnAkYm/dCDMpFaGE/Yw==",
       "dev": true,
       "requires": {
-        "@graphql-tools/utils": "8.6.5",
+        "@graphql-tools/utils": "8.6.10",
         "relay-compiler": "12.0.0",
-        "tslib": "~2.3.0"
+        "tslib": "~2.4.0"
       },
       "dependencies": {
+        "@graphql-tools/utils": {
+          "version": "8.6.10",
+          "resolved": "https://registry.npmjs.org/@graphql-tools/utils/-/utils-8.6.10.tgz",
+          "integrity": "sha512-bJH9qwuyM3BP0PTU6/lvBDkk6jdEIOn+dbyk4pHMVNnvbJ1gZQwo62To8SHxxaUTus8OMhhVPSh9ApWXREURcg==",
+          "dev": true,
+          "requires": {
+            "tslib": "~2.4.0"
+          }
+        },
         "relay-compiler": {
           "version": "12.0.0",
           "resolved": "https://registry.npmjs.org/relay-compiler/-/relay-compiler-12.0.0.tgz",
@@ -10619,9 +10550,9 @@
           }
         },
         "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
           "dev": true
         }
       }
@@ -10770,22 +10701,38 @@
       "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==",
       "dev": true
     },
+    "@jridgewell/gen-mapping": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
+      "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.0.0",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "@jridgewell/resolve-uri": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
-      "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz",
+      "integrity": "sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==",
+      "dev": true
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.1.tgz",
+      "integrity": "sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==",
       "dev": true
     },
     "@jridgewell/sourcemap-codec": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
-      "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==",
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz",
+      "integrity": "sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==",
       "dev": true
     },
     "@jridgewell/trace-mapping": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz",
-      "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==",
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz",
+      "integrity": "sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==",
       "dev": true,
       "requires": {
         "@jridgewell/resolve-uri": "^3.0.3",
@@ -10793,89 +10740,89 @@
       }
     },
     "@next/env": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.2.tgz",
-      "integrity": "sha512-A/P4ysmFScBFyu1ZV0Mr1Y89snyQhqGwsCrkEpK+itMF+y+pMqBoPVIyakUf4LXqGWJGiGFuIerihvSG70Ad8Q=="
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.6.tgz",
+      "integrity": "sha512-Te/OBDXFSodPU6jlXYPAXpmZr/AkG6DCATAxttQxqOWaq6eDFX25Db3dK0120GZrSZmv4QCe9KsZmJKDbWs4OA=="
     },
     "@next/eslint-plugin-next": {
-      "version": "12.1.5",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-12.1.5.tgz",
-      "integrity": "sha512-Cnb8ERC5bNKBFrnMH6203sp/b0Y78QRx1XsFu+86oBtDBmQmOFoHu7teQjHm69ER73XKK3aGaeoLiXacHoUFsg==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-12.1.6.tgz",
+      "integrity": "sha512-yNUtJ90NEiYFT6TJnNyofKMPYqirKDwpahcbxBgSIuABwYOdkGwzos1ZkYD51Qf0diYwpQZBeVqElTk7Q2WNqw==",
       "dev": true,
       "requires": {
         "glob": "7.1.7"
       }
     },
     "@next/swc-android-arm-eabi": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.2.tgz",
-      "integrity": "sha512-iwalfLBhYmCIlj09czFbovj1SmTycf0AGR8CB357wgmEN8xIuznIwSsCH87AhwQ9apfNtdeDhxvuKmhS9T3FqQ==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.6.tgz",
+      "integrity": "sha512-BxBr3QAAAXWgk/K7EedvzxJr2dE014mghBSA9iOEAv0bMgF+MRq4PoASjuHi15M2zfowpcRG8XQhMFtxftCleQ==",
       "optional": true
     },
     "@next/swc-android-arm64": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.1.2.tgz",
-      "integrity": "sha512-ZoR0Vx7czJhTgRAcFbzTKQc2n2ChC036/uc6PbgYiI/LreEnfmsV/CiREP0pUVs5ndntOX8kBA3BSbh4zCO5tQ==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.1.6.tgz",
+      "integrity": "sha512-EboEk3ROYY7U6WA2RrMt/cXXMokUTXXfnxe2+CU+DOahvbrO8QSWhlBl9I9ZbFzJx28AGB9Yo3oQHCvph/4Lew==",
       "optional": true
     },
     "@next/swc-darwin-arm64": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.2.tgz",
-      "integrity": "sha512-VXv7lpqFjHwkK65CZHkjvBxlSBTG+l3O0Zl2zHniHj0xHzxJZvR8VFjV2zIMZCYSfVqeQ5yt2rjwuQ9zbpGtXQ==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.6.tgz",
+      "integrity": "sha512-P0EXU12BMSdNj1F7vdkP/VrYDuCNwBExtRPDYawgSUakzi6qP0iKJpya2BuLvNzXx+XPU49GFuDC5X+SvY0mOw==",
       "optional": true
     },
     "@next/swc-darwin-x64": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.2.tgz",
-      "integrity": "sha512-evXxJQnXEnU+heWyun7d0UV6bhBcmoiyFGR3O3v9qdhGbeXh+SXYVxRO69juuh6V7RWRdlb1KQ0rGUNa1k0XSw==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.6.tgz",
+      "integrity": "sha512-9FptMnbgHJK3dRDzfTpexs9S2hGpzOQxSQbe8omz6Pcl7rnEp9x4uSEKY51ho85JCjL4d0tDLBcXEJZKKLzxNg==",
       "optional": true
     },
     "@next/swc-linux-arm-gnueabihf": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.2.tgz",
-      "integrity": "sha512-LJV/wo6R0Ot7Y/20bZs00aBG4J333RT6H/5Q2AROE4Hnx7cenSktSnfU6WCnJgzYLSIHdbLs549LcZMULuVquw==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.6.tgz",
+      "integrity": "sha512-PvfEa1RR55dsik/IDkCKSFkk6ODNGJqPY3ysVUZqmnWMDSuqFtf7BPWHFa/53znpvVB5XaJ5Z1/6aR5CTIqxPw==",
       "optional": true
     },
     "@next/swc-linux-arm64-gnu": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.2.tgz",
-      "integrity": "sha512-fjlYU1Y8kVjjRKyuyQBYLHPxjGOS2ox7U8TqAvtgKvd2PxqdsgW4sP+VDovRVPrZlGXNllKoJiqMO1OoR9fB6w==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.6.tgz",
+      "integrity": "sha512-53QOvX1jBbC2ctnmWHyRhMajGq7QZfl974WYlwclXarVV418X7ed7o/EzGY+YVAEKzIVaAB9JFFWGXn8WWo0gQ==",
       "optional": true
     },
     "@next/swc-linux-arm64-musl": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.2.tgz",
-      "integrity": "sha512-Y1JRDMHqSjLObjyrD1hf6ePrJcOF/mkw+LbAzoNgrHL1dSuIAqcz3jYunJt8T7Yw48xSJy6LPSL9BclAHwEwOA==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.6.tgz",
+      "integrity": "sha512-CMWAkYqfGdQCS+uuMA1A2UhOfcUYeoqnTW7msLr2RyYAys15pD960hlDfq7QAi8BCAKk0sQ2rjsl0iqMyziohQ==",
       "optional": true
     },
     "@next/swc-linux-x64-gnu": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.2.tgz",
-      "integrity": "sha512-5N4QSRT60ikQqCU8iHfYZzlhg6MFTLsKhMTARmhn8wLtZfN9VVyTFwZrJQWjV64dZc4JFeXDANGao8fm55y6bw==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.6.tgz",
+      "integrity": "sha512-AC7jE4Fxpn0s3ujngClIDTiEM/CQiB2N2vkcyWWn6734AmGT03Duq6RYtPMymFobDdAtZGFZd5nR95WjPzbZAQ==",
       "optional": true
     },
     "@next/swc-linux-x64-musl": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.2.tgz",
-      "integrity": "sha512-b32F/xAgdYG4Pt0foFzhF+2uhvNxnEj7aJNp1R4EhZotdej2PzvFWcP/dGkc7MJl205pBz5oC3gHyILIIlW6XA==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.6.tgz",
+      "integrity": "sha512-c9Vjmi0EVk0Kou2qbrynskVarnFwfYIi+wKufR9Ad7/IKKuP6aEhOdZiIIdKsYWRtK2IWRF3h3YmdnEa2WLUag==",
       "optional": true
     },
     "@next/swc-win32-arm64-msvc": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.2.tgz",
-      "integrity": "sha512-hVOcGmWDeVwO00Aclopsj6MoYhfJl5zA4vjAai9KjgclQTFZa/DC0vQjgKAHHKGT5oMHgjiq/G7L6P1/UfwYnw==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.6.tgz",
+      "integrity": "sha512-3UTOL/5XZSKFelM7qN0it35o3Cegm6LsyuERR3/OoqEExyj3aCk7F025b54/707HTMAnjlvQK3DzLhPu/xxO4g==",
       "optional": true
     },
     "@next/swc-win32-ia32-msvc": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.2.tgz",
-      "integrity": "sha512-wnVDGIVz2pR3vIkyN6IE+1NvMSBrBj1jba11iR16m8TAPzZH/PrNsxr0a9N5VavEXXLcQpoUVvT+N7nflbRAHg==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.6.tgz",
+      "integrity": "sha512-8ZWoj6nCq6fI1yCzKq6oK0jE6Mxlz4MrEsRyu0TwDztWQWe7rh4XXGLAa2YVPatYcHhMcUL+fQQbqd1MsgaSDA==",
       "optional": true
     },
     "@next/swc-win32-x64-msvc": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.2.tgz",
-      "integrity": "sha512-MLNcurEpQp0+7OU9261f7PkN52xTGkfrt4IYTIXau7DO/aHj927oK6piIJdl9EOHdX/KN5W6qlyErj170PSHtw==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.6.tgz",
+      "integrity": "sha512-4ZEwiRuZEicXhXqmhw3+de8Z4EpOLQj/gp+D9fFWo6ii6W1kBkNNvvEx4A90ugppu+74pT1lIJnOuz3A9oQeJA==",
       "optional": true
     },
     "@nodelib/fs.scandir": {
@@ -10910,9 +10857,9 @@
       "integrity": "sha512-8U7hIl7+30XbIrJ0deQMXpXESM1L4yrt6BHok5hzcR0LivivuNkk+tHU1iRVScOwCmQcrOr6kvtIr29MNbQHqQ=="
     },
     "@rushstack/eslint-patch": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.0.8.tgz",
-      "integrity": "sha512-ZK5v4bJwgXldAUA8r3q9YKfCwOqoHTK/ZqRjSeRXQrBXWouoPnS4MQtgC4AXGiiBuUu5wxrRgTlv0ktmM4P1Aw==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz",
+      "integrity": "sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==",
       "dev": true
     },
     "@samverschueren/stream-to-observable": {
@@ -10987,9 +10934,9 @@
       }
     },
     "@types/node": {
-      "version": "17.0.25",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.25.tgz",
-      "integrity": "sha512-wANk6fBrUwdpY4isjWrKTufkrXdu1D2YHCot2fD/DfWxF5sMrVSA+KN7ydckvaTCh0HiqX9IVl0L5/ZoXg5M7w==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.33.tgz",
+      "integrity": "sha512-miWq2m2FiQZmaHfdZNcbpp9PuXg34W5JZ5CrJ/BaS70VuhoJENBEQybeiYSaPBRNq6KQGnjfEnc/F3PN++D+XQ==",
       "dev": true
     },
     "@types/nodemailer": {
@@ -11014,9 +10961,9 @@
       "dev": true
     },
     "@types/react": {
-      "version": "17.0.43",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz",
-      "integrity": "sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==",
+      "version": "18.0.9",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.9.tgz",
+      "integrity": "sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==",
       "dev": true,
       "requires": {
         "@types/prop-types": "*",
@@ -11025,9 +10972,9 @@
       }
     },
     "@types/react-dom": {
-      "version": "17.0.14",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.14.tgz",
-      "integrity": "sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==",
+      "version": "18.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.4.tgz",
+      "integrity": "sha512-FgTtbqPOCI3dzZPZoC2T/sx3L34qxy99ITWn4eoSA95qPyXDMH0ALoAqUp49ITniiJFsXUVBtalh/KffMpg21Q==",
       "dev": true,
       "requires": {
         "@types/react": "*"
@@ -11064,14 +11011,14 @@
       }
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.20.0.tgz",
-      "integrity": "sha512-fapGzoxilCn3sBtC6NtXZX6+P/Hef7VDbyfGqTTpzYydwhlkevB+0vE0EnmHPVTVSy68GUncyJ/2PcrFBeCo5Q==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.23.0.tgz",
+      "integrity": "sha512-hEcSmG4XodSLiAp1uxv/OQSGsDY6QN3TcRU32gANp+19wGE1QQZLRS8/GV58VRUoXhnkuJ3ZxNQ3T6Z6zM59DA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.20.0",
-        "@typescript-eslint/type-utils": "5.20.0",
-        "@typescript-eslint/utils": "5.20.0",
+        "@typescript-eslint/scope-manager": "5.23.0",
+        "@typescript-eslint/type-utils": "5.23.0",
+        "@typescript-eslint/utils": "5.23.0",
         "debug": "^4.3.2",
         "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.1.8",
@@ -11081,52 +11028,52 @@
       }
     },
     "@typescript-eslint/parser": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.20.0.tgz",
-      "integrity": "sha512-UWKibrCZQCYvobmu3/N8TWbEeo/EPQbS41Ux1F9XqPzGuV7pfg6n50ZrFo6hryynD8qOTTfLHtHjjdQtxJ0h/w==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.23.0.tgz",
+      "integrity": "sha512-V06cYUkqcGqpFjb8ttVgzNF53tgbB/KoQT/iB++DOIExKmzI9vBJKjZKt/6FuV9c+zrDsvJKbJ2DOCYwX91cbw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.20.0",
-        "@typescript-eslint/types": "5.20.0",
-        "@typescript-eslint/typescript-estree": "5.20.0",
+        "@typescript-eslint/scope-manager": "5.23.0",
+        "@typescript-eslint/types": "5.23.0",
+        "@typescript-eslint/typescript-estree": "5.23.0",
         "debug": "^4.3.2"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.20.0.tgz",
-      "integrity": "sha512-h9KtuPZ4D/JuX7rpp1iKg3zOH0WNEa+ZIXwpW/KWmEFDxlA/HSfCMhiyF1HS/drTICjIbpA6OqkAhrP/zkCStg==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.23.0.tgz",
+      "integrity": "sha512-EhjaFELQHCRb5wTwlGsNMvzK9b8Oco4aYNleeDlNuL6qXWDF47ch4EhVNPh8Rdhf9tmqbN4sWDk/8g+Z/J8JVw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.20.0",
-        "@typescript-eslint/visitor-keys": "5.20.0"
+        "@typescript-eslint/types": "5.23.0",
+        "@typescript-eslint/visitor-keys": "5.23.0"
       }
     },
     "@typescript-eslint/type-utils": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.20.0.tgz",
-      "integrity": "sha512-WxNrCwYB3N/m8ceyoGCgbLmuZwupvzN0rE8NBuwnl7APgjv24ZJIjkNzoFBXPRCGzLNkoU/WfanW0exvp/+3Iw==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.23.0.tgz",
+      "integrity": "sha512-iuI05JsJl/SUnOTXA9f4oI+/4qS/Zcgk+s2ir+lRmXI+80D8GaGwoUqs4p+X+4AxDolPpEpVUdlEH4ADxFy4gw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/utils": "5.20.0",
+        "@typescript-eslint/utils": "5.23.0",
         "debug": "^4.3.2",
         "tsutils": "^3.21.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.20.0.tgz",
-      "integrity": "sha512-+d8wprF9GyvPwtoB4CxBAR/s0rpP25XKgnOvMf/gMXYDvlUC3rPFHupdTQ/ow9vn7UDe5rX02ovGYQbv/IUCbg==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.23.0.tgz",
+      "integrity": "sha512-NfBsV/h4dir/8mJwdZz7JFibaKC3E/QdeMEDJhiAE3/eMkoniZ7MjbEMCGXw6MZnZDMN3G9S0mH/6WUIj91dmw==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.20.0.tgz",
-      "integrity": "sha512-36xLjP/+bXusLMrT9fMMYy1KJAGgHhlER2TqpUVDYUQg4w0q/NW/sg4UGAgVwAqb8V4zYg43KMUpM8vV2lve6w==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.23.0.tgz",
+      "integrity": "sha512-xE9e0lrHhI647SlGMl+m+3E3CKPF1wzvvOEWnuE3CCjjT7UiRnDGJxmAcVKJIlFgK6DY9RB98eLr1OPigPEOGg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.20.0",
-        "@typescript-eslint/visitor-keys": "5.20.0",
+        "@typescript-eslint/types": "5.23.0",
+        "@typescript-eslint/visitor-keys": "5.23.0",
         "debug": "^4.3.2",
         "globby": "^11.0.4",
         "is-glob": "^4.0.3",
@@ -11135,15 +11082,15 @@
       }
     },
     "@typescript-eslint/utils": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.20.0.tgz",
-      "integrity": "sha512-lHONGJL1LIO12Ujyx8L8xKbwWSkoUKFSO+0wDAqGXiudWB2EO7WEUT+YZLtVbmOmSllAjLb9tpoIPwpRe5Tn6w==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.23.0.tgz",
+      "integrity": "sha512-dbgaKN21drqpkbbedGMNPCtRPZo1IOUr5EI9Jrrh99r5UW5Q0dz46RKXeSBoPV+56R6dFKpbrdhgUNSJsDDRZA==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.9",
-        "@typescript-eslint/scope-manager": "5.20.0",
-        "@typescript-eslint/types": "5.20.0",
-        "@typescript-eslint/typescript-estree": "5.20.0",
+        "@typescript-eslint/scope-manager": "5.23.0",
+        "@typescript-eslint/types": "5.23.0",
+        "@typescript-eslint/typescript-estree": "5.23.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0"
       },
@@ -11167,12 +11114,12 @@
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.20.0.tgz",
-      "integrity": "sha512-1flRpNF+0CAQkMNlTJ6L/Z5jiODG/e5+7mk6XwtPOUS3UrTz3UOiAg9jG2VtKsWI6rZQfy4C6a232QNRZTRGlg==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.23.0.tgz",
+      "integrity": "sha512-Vd4mFNchU62sJB8pX19ZSPog05B0Y0CE2UxAZPT5k4iqhRYjPnqyY3woMxCd0++t9OTqkgjST+1ydLBi7e2Fvg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.20.0",
+        "@typescript-eslint/types": "5.23.0",
         "eslint-visitor-keys": "^3.0.0"
       }
     },
@@ -11186,9 +11133,9 @@
       }
     },
     "acorn": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
+      "version": "8.7.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
       "dev": true
     },
     "acorn-jsx": {
@@ -11323,25 +11270,27 @@
       "dev": true
     },
     "array.prototype.flat": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz",
-      "integrity": "sha512-KaYU+S+ndVqyUnignHftkwc58o3uVU1jzczILJ1tN2YaIZpFIKBiP/x/j97E5MVPsaCloPbqWLB/8qCTVvT2qg==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
+      "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.0"
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
       }
     },
     "array.prototype.flatmap": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz",
-      "integrity": "sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
+      "integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.0",
+        "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.0"
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
       }
     },
     "asap": {
@@ -11368,12 +11317,12 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.5.tgz",
-      "integrity": "sha512-Fvd8yCoA7lNX/OUllvS+aS1I7WRBclGXsepbvT8ZaPgrH24rgXpZzF0/6Hh3ZEkwg+0AES/Osd196VZmYoEFtw==",
+      "version": "10.4.7",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
+      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
       "requires": {
-        "browserslist": "^4.20.2",
-        "caniuse-lite": "^1.0.30001332",
+        "browserslist": "^4.20.3",
+        "caniuse-lite": "^1.0.30001335",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -11497,14 +11446,14 @@
       }
     },
     "browserslist": {
-      "version": "4.20.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.2.tgz",
-      "integrity": "sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==",
+      "version": "4.20.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz",
+      "integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==",
       "requires": {
-        "caniuse-lite": "^1.0.30001317",
-        "electron-to-chromium": "^1.4.84",
+        "caniuse-lite": "^1.0.30001332",
+        "electron-to-chromium": "^1.4.118",
         "escalade": "^3.1.1",
-        "node-releases": "^2.0.2",
+        "node-releases": "^2.0.3",
         "picocolors": "^1.0.0"
       }
     },
@@ -11600,9 +11549,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001332",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz",
-      "integrity": "sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw=="
+      "version": "1.0.30001338",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001338.tgz",
+      "integrity": "sha512-1gLHWyfVoRDsHieO+CaeYe7jSo/MT7D7lhaXUiwwbuR5BwQxORs0f1tAwUSQr3YbxRXJvxHM/PA5FfPQRnsPeQ=="
     },
     "capital-case": {
       "version": "1.0.4",
@@ -12251,12 +12200,13 @@
       "dev": true
     },
     "define-properties": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
+      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
       "dev": true,
       "requires": {
-        "object-keys": "^1.0.12"
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
       }
     },
     "defined": {
@@ -12356,9 +12306,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.118",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.118.tgz",
-      "integrity": "sha512-maZIKjnYDvF7Fs35nvVcyr44UcKNwybr93Oba2n3HkKDFAtk0svERkLN/HyczJDS3Fo4wU9th9fUQd09ZLtj1w=="
+      "version": "1.4.137",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz",
+      "integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA=="
     },
     "elegant-spinner": {
       "version": "1.0.1",
@@ -12391,31 +12341,43 @@
       }
     },
     "es-abstract": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
-      "integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.0.tgz",
+      "integrity": "sha512-URbD8tgRthKD3YcC39vbvSDrX23upXnPcnGAjQfgxXF5ID75YcENawc9ZX/9iTP9ptUyfCLIxTTuMYoRfiOVKA==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "es-to-primitive": "^1.2.1",
         "function-bind": "^1.1.1",
+        "function.prototype.name": "^1.1.5",
         "get-intrinsic": "^1.1.1",
         "get-symbol-description": "^1.0.0",
         "has": "^1.0.3",
-        "has-symbols": "^1.0.2",
+        "has-property-descriptors": "^1.0.0",
+        "has-symbols": "^1.0.3",
         "internal-slot": "^1.0.3",
         "is-callable": "^1.2.4",
-        "is-negative-zero": "^2.0.1",
+        "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.1",
+        "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
-        "is-weakref": "^1.0.1",
-        "object-inspect": "^1.11.0",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.12.0",
         "object-keys": "^1.1.1",
         "object.assign": "^4.1.2",
-        "string.prototype.trimend": "^1.0.4",
-        "string.prototype.trimstart": "^1.0.4",
-        "unbox-primitive": "^1.0.1"
+        "regexp.prototype.flags": "^1.4.1",
+        "string.prototype.trimend": "^1.0.5",
+        "string.prototype.trimstart": "^1.0.5",
+        "unbox-primitive": "^1.0.2"
+      }
+    },
+    "es-shim-unscopables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
       }
     },
     "es-to-primitive": {
@@ -12441,12 +12403,12 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.14.0.tgz",
-      "integrity": "sha512-3/CE4aJX7LNEiE3i6FeodHmI/38GZtWCsAtsymScmzYapx8q1nVVb+eLcLSzATmCPXw5pT4TqVs1E0OmxAd9tw==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.15.0.tgz",
+      "integrity": "sha512-GG5USZ1jhCu8HJkzGgeK8/+RGnHaNYZGrGDzUtigK3BsGESW/rs2az23XqE0WVwDxy1VRvvjSSGu5nB0Bu+6SA==",
       "dev": true,
       "requires": {
-        "@eslint/eslintrc": "^1.2.2",
+        "@eslint/eslintrc": "^1.2.3",
         "@humanwhocodes/config-array": "^0.9.2",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
@@ -12457,7 +12419,7 @@
         "eslint-scope": "^7.1.1",
         "eslint-utils": "^3.0.0",
         "eslint-visitor-keys": "^3.3.0",
-        "espree": "^9.3.1",
+        "espree": "^9.3.2",
         "esquery": "^1.4.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -12473,7 +12435,7 @@
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
         "lodash.merge": "^4.6.2",
-        "minimatch": "^3.0.4",
+        "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
         "regexpp": "^3.2.0",
@@ -12484,115 +12446,79 @@
       }
     },
     "eslint-config-next": {
-      "version": "12.1.5",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-12.1.5.tgz",
-      "integrity": "sha512-P+DCt5ti63KhC0qNLzrAmPcwRGq8pYqgcf/NNr1E+WjCrMkWdCAXkIANTquo+kcO1adR2k1lTo5GCrNUtKy4hQ==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-12.1.6.tgz",
+      "integrity": "sha512-qoiS3g/EPzfCTkGkaPBSX9W0NGE/B1wNO3oWrd76QszVGrdpLggNqcO8+LR6MB0CNqtp9Q8NoeVrxNVbzM9hqA==",
       "dev": true,
       "requires": {
-        "@next/eslint-plugin-next": "12.1.5",
-        "@rushstack/eslint-patch": "1.0.8",
-        "@typescript-eslint/parser": "5.10.1",
-        "eslint-import-resolver-node": "0.3.4",
-        "eslint-import-resolver-typescript": "2.4.0",
-        "eslint-plugin-import": "2.25.2",
-        "eslint-plugin-jsx-a11y": "6.5.1",
-        "eslint-plugin-react": "7.29.1",
-        "eslint-plugin-react-hooks": "4.3.0"
-      },
-      "dependencies": {
-        "@typescript-eslint/parser": {
-          "version": "5.10.1",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.10.1.tgz",
-          "integrity": "sha512-GReo3tjNBwR5RnRO0K2wDIDN31cM3MmDtgyQ85oAxAmC5K3j/g85IjP+cDfcqDsDDBf1HNKQAD0WqOYL8jXqUA==",
-          "dev": true,
-          "requires": {
-            "@typescript-eslint/scope-manager": "5.10.1",
-            "@typescript-eslint/types": "5.10.1",
-            "@typescript-eslint/typescript-estree": "5.10.1",
-            "debug": "^4.3.2"
-          }
-        },
-        "@typescript-eslint/scope-manager": {
-          "version": "5.10.1",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.1.tgz",
-          "integrity": "sha512-Lyvi559Gvpn94k7+ElXNMEnXu/iundV5uFmCUNnftbFrUbAJ1WBoaGgkbOBm07jVZa682oaBU37ao/NGGX4ZDg==",
-          "dev": true,
-          "requires": {
-            "@typescript-eslint/types": "5.10.1",
-            "@typescript-eslint/visitor-keys": "5.10.1"
-          }
-        },
-        "@typescript-eslint/types": {
-          "version": "5.10.1",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.1.tgz",
-          "integrity": "sha512-ZvxQ2QMy49bIIBpTqFiOenucqUyjTQ0WNLhBM6X1fh1NNlYAC6Kxsx8bRTY3jdYsYg44a0Z/uEgQkohbR0H87Q==",
-          "dev": true
-        },
-        "@typescript-eslint/typescript-estree": {
-          "version": "5.10.1",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.1.tgz",
-          "integrity": "sha512-PwIGnH7jIueXv4opcwEbVGDATjGPO1dx9RkUl5LlHDSe+FXxPwFL5W/qYd5/NHr7f6lo/vvTrAzd0KlQtRusJQ==",
-          "dev": true,
-          "requires": {
-            "@typescript-eslint/types": "5.10.1",
-            "@typescript-eslint/visitor-keys": "5.10.1",
-            "debug": "^4.3.2",
-            "globby": "^11.0.4",
-            "is-glob": "^4.0.3",
-            "semver": "^7.3.5",
-            "tsutils": "^3.21.0"
-          }
-        },
-        "@typescript-eslint/visitor-keys": {
-          "version": "5.10.1",
-          "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.1.tgz",
-          "integrity": "sha512-NjQ0Xinhy9IL979tpoTRuLKxMc0zJC7QVSdeerXs2/QvOy2yRkzX5dRb10X5woNUdJgU8G3nYRDlI33sq1K4YQ==",
-          "dev": true,
-          "requires": {
-            "@typescript-eslint/types": "5.10.1",
-            "eslint-visitor-keys": "^3.0.0"
-          }
-        }
+        "@next/eslint-plugin-next": "12.1.6",
+        "@rushstack/eslint-patch": "^1.1.3",
+        "@typescript-eslint/parser": "^5.21.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^2.7.1",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-react": "^7.29.4",
+        "eslint-plugin-react-hooks": "^4.5.0"
       }
     },
     "eslint-import-resolver-node": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz",
-      "integrity": "sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==",
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
+      "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
       "dev": true,
       "requires": {
-        "debug": "^2.6.9",
-        "resolve": "^1.13.1"
+        "debug": "^3.2.7",
+        "resolve": "^1.20.0"
       },
       "dependencies": {
         "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
           "dev": true,
           "requires": {
-            "ms": "2.0.0"
+            "ms": "^2.1.1"
           }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
         }
       }
     },
     "eslint-import-resolver-typescript": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.4.0.tgz",
-      "integrity": "sha512-useJKURidCcldRLCNKWemr1fFQL1SzB3G4a0li6lFGvlc5xGe1hY343bvG07cbpCzPuM/lK19FIJB3XGFSkplA==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz",
+      "integrity": "sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==",
       "dev": true,
       "requires": {
-        "debug": "^4.1.1",
-        "glob": "^7.1.6",
-        "is-glob": "^4.0.1",
-        "resolve": "^1.17.0",
-        "tsconfig-paths": "^3.9.0"
+        "debug": "^4.3.4",
+        "glob": "^7.2.0",
+        "is-glob": "^4.0.3",
+        "resolve": "^1.22.0",
+        "tsconfig-paths": "^3.14.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "glob": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+          "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
       }
     },
     "eslint-module-utils": {
@@ -12617,9 +12543,9 @@
       }
     },
     "eslint-plugin-import": {
-      "version": "2.25.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.2.tgz",
-      "integrity": "sha512-qCwQr9TYfoBHOFcVGKY9C9unq05uOxxdklmBXLVvcwo68y5Hta6/GzCZEMx2zQiu0woKNEER0LE7ZgaOfBU14g==",
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
+      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
       "dev": true,
       "requires": {
         "array-includes": "^3.1.4",
@@ -12627,14 +12553,14 @@
         "debug": "^2.6.9",
         "doctrine": "^2.1.0",
         "eslint-import-resolver-node": "^0.3.6",
-        "eslint-module-utils": "^2.7.0",
+        "eslint-module-utils": "^2.7.3",
         "has": "^1.0.3",
-        "is-core-module": "^2.7.0",
+        "is-core-module": "^2.8.1",
         "is-glob": "^4.0.3",
-        "minimatch": "^3.0.4",
+        "minimatch": "^3.1.2",
         "object.values": "^1.1.5",
-        "resolve": "^1.20.0",
-        "tsconfig-paths": "^3.11.0"
+        "resolve": "^1.22.0",
+        "tsconfig-paths": "^3.14.1"
       },
       "dependencies": {
         "debug": {
@@ -12655,33 +12581,6 @@
             "esutils": "^2.0.2"
           }
         },
-        "eslint-import-resolver-node": {
-          "version": "0.3.6",
-          "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
-          "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
-          "dev": true,
-          "requires": {
-            "debug": "^3.2.7",
-            "resolve": "^1.20.0"
-          },
-          "dependencies": {
-            "debug": {
-              "version": "3.2.7",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-              "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-              "dev": true,
-              "requires": {
-                "ms": "^2.1.1"
-              }
-            },
-            "ms": {
-              "version": "2.1.3",
-              "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-              "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-              "dev": true
-            }
-          }
-        },
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -12711,9 +12610,9 @@
       }
     },
     "eslint-plugin-react": {
-      "version": "7.29.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.29.1.tgz",
-      "integrity": "sha512-WtzRpHMhsOX05ZrkyaaqmLl2uXGqmYooCfBxftJKlkYdsltiufGgfU7uuoHwR2lBam2Kh/EIVID4aU9e3kbCMA==",
+      "version": "7.29.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz",
+      "integrity": "sha512-CVCXajliVh509PcZYRFyu/BoUEz452+jtQJq2b3Bae4v3xBUWPLCmtmBM+ZinG4MzwmxJgJ2M5rMqhqLVn7MtQ==",
       "dev": true,
       "requires": {
         "array-includes": "^3.1.4",
@@ -12760,9 +12659,9 @@
       }
     },
     "eslint-plugin-react-hooks": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz",
-      "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz",
+      "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==",
       "dev": true,
       "requires": {}
     },
@@ -12800,13 +12699,13 @@
       "dev": true
     },
     "espree": {
-      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.1.tgz",
-      "integrity": "sha512-bvdyLmJMfwkV3NCRl5ZhJf22zBFo1y8bYh3VYb+bfzqNB4Je68P2sSuXyuFquzWLebHpNd2/d5uv7yoP9ISnGQ==",
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
+      "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
       "dev": true,
       "requires": {
-        "acorn": "^8.7.0",
-        "acorn-jsx": "^5.3.1",
+        "acorn": "^8.7.1",
+        "acorn-jsx": "^5.3.2",
         "eslint-visitor-keys": "^3.3.0"
       }
     },
@@ -12852,11 +12751,6 @@
       "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
       "dev": true
     },
-    "exenv": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
-      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
-    },
     "external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -13073,12 +12967,30 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "function.prototype.name": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
+      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.0",
+        "functions-have-names": "^1.2.2"
+      }
+    },
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -13187,12 +13099,9 @@
       }
     },
     "graphql": {
-      "version": "14.7.0",
-      "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.7.0.tgz",
-      "integrity": "sha512-l0xWZpoPKpppFzMfvVyFmp9vLN7w/ZZJPefUicMCepfJeQ8sMcztloGYY9DfjVPo6tIUDzU5Hw3MUbIjj9AVVA==",
-      "requires": {
-        "iterall": "^1.2.2"
-      }
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.5.0.tgz",
+      "integrity": "sha512-qbHgh8Ix+j/qY+a/ZcJnFQ+j8ezakqPiHwPiZhV/3PgGlgf96QMBB5/f2rkiC9sgLoy/xvT6TSiaf2nTHJh5iA=="
     },
     "graphql-request": {
       "version": "4.2.0",
@@ -13269,9 +13178,9 @@
       }
     },
     "has-bigints": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
-      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
       "dev": true
     },
     "has-flag": {
@@ -13280,6 +13189,15 @@
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true
     },
+    "has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.1"
+      }
+    },
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
@@ -13295,6 +13213,11 @@
         "has-symbols": "^1.0.2"
       }
     },
+    "hotkeys-js": {
+      "version": "3.8.7",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.7.tgz",
+      "integrity": "sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg=="
+    },
     "http-cache-semantics": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
@@ -13521,9 +13444,9 @@
       "dev": true
     },
     "is-number-object": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.6.tgz",
-      "integrity": "sha512-bEVOqiRcvo3zO1+G2lVMy+gkkEm9Yh7cDMRusKKu5ZJKPUYSJwICTKZrNKHA2EbSP0Tu0+6B/emsYNHZyn6K8g==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
       "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
@@ -13564,10 +13487,13 @@
       }
     },
     "is-shared-array-buffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz",
-      "integrity": "sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==",
-      "dev": true
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
     },
     "is-stream": {
       "version": "1.1.0",
@@ -13657,7 +13583,8 @@
     "iterall": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.3.0.tgz",
-      "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg=="
+      "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==",
+      "dev": true
     },
     "js-tokens": {
       "version": "4.0.0",
@@ -14228,27 +14155,26 @@
       "dev": true
     },
     "next": {
-      "version": "12.1.2",
-      "resolved": "https://registry.npmjs.org/next/-/next-12.1.2.tgz",
-      "integrity": "sha512-JHPCsnFTBO0Z4SQxSYc611UA1WA+r/3y3Neg66AH5/gSO/oksfRnFw/zGX/FZ9+oOUHS9y3wJFawNpVYR2gJSQ==",
+      "version": "12.1.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-12.1.6.tgz",
+      "integrity": "sha512-cebwKxL3/DhNKfg9tPZDQmbRKjueqykHHbgaoG4VBRH3AHQJ2HO0dbKFiS1hPhe1/qgc2d/hFeadsbPicmLD+A==",
       "requires": {
-        "@next/env": "12.1.2",
-        "@next/swc-android-arm-eabi": "12.1.2",
-        "@next/swc-android-arm64": "12.1.2",
-        "@next/swc-darwin-arm64": "12.1.2",
-        "@next/swc-darwin-x64": "12.1.2",
-        "@next/swc-linux-arm-gnueabihf": "12.1.2",
-        "@next/swc-linux-arm64-gnu": "12.1.2",
-        "@next/swc-linux-arm64-musl": "12.1.2",
-        "@next/swc-linux-x64-gnu": "12.1.2",
-        "@next/swc-linux-x64-musl": "12.1.2",
-        "@next/swc-win32-arm64-msvc": "12.1.2",
-        "@next/swc-win32-ia32-msvc": "12.1.2",
-        "@next/swc-win32-x64-msvc": "12.1.2",
-        "caniuse-lite": "^1.0.30001283",
+        "@next/env": "12.1.6",
+        "@next/swc-android-arm-eabi": "12.1.6",
+        "@next/swc-android-arm64": "12.1.6",
+        "@next/swc-darwin-arm64": "12.1.6",
+        "@next/swc-darwin-x64": "12.1.6",
+        "@next/swc-linux-arm-gnueabihf": "12.1.6",
+        "@next/swc-linux-arm64-gnu": "12.1.6",
+        "@next/swc-linux-arm64-musl": "12.1.6",
+        "@next/swc-linux-x64-gnu": "12.1.6",
+        "@next/swc-linux-x64-musl": "12.1.6",
+        "@next/swc-win32-arm64-msvc": "12.1.6",
+        "@next/swc-win32-ia32-msvc": "12.1.6",
+        "@next/swc-win32-x64-msvc": "12.1.6",
+        "caniuse-lite": "^1.0.30001332",
         "postcss": "8.4.5",
-        "styled-jsx": "5.0.1",
-        "use-subscription": "1.5.1"
+        "styled-jsx": "5.0.2"
       },
       "dependencies": {
         "postcss": {
@@ -14294,14 +14220,14 @@
       "dev": true
     },
     "node-releases": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.2.tgz",
-      "integrity": "sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg=="
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz",
+      "integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ=="
     },
     "nodemailer": {
-      "version": "6.7.3",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.7.3.tgz",
-      "integrity": "sha512-KUdDsspqx89sD4UUyUKzdlUOper3hRkDVkrKh/89G+d9WKsU5ox51NWS4tB1XR5dPUdR4SP0E3molyEfOvSa3g=="
+      "version": "6.7.5",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.7.5.tgz",
+      "integrity": "sha512-6VtMpwhsrixq1HDYSBBHvW0GwiWawE75dS3oal48VqRhUvKJNnKnJo2RI/bCVQubj1vgrgscMNW4DHaD6xtMCg=="
     },
     "normalize-path": {
       "version": "3.0.0",
@@ -14390,13 +14316,13 @@
       }
     },
     "object.hasown": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz",
-      "integrity": "sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz",
+      "integrity": "sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==",
       "dev": true,
       "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
       }
     },
     "object.values": {
@@ -14801,31 +14727,29 @@
       }
     },
     "react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.1.0.tgz",
+      "integrity": "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==",
       "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz",
+      "integrity": "sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==",
       "requires": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.22.0"
       }
     },
-    "react-image-lightbox": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.4.tgz",
-      "integrity": "sha512-kTiAODz091bgT7SlWNHab0LSMZAPJtlNWDGKv7pLlLY1krmf7FuG1zxE0wyPpeA8gPdwfr3cu6sPwZRqWsc3Eg==",
+    "react-hot-keys": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-hot-keys/-/react-hot-keys-2.7.2.tgz",
+      "integrity": "sha512-Z7eSh7SU6s52+zP+vkfFoNk0x4kgEmnwqDiyACKv53crK2AZ7FUaBLnf+vxLor3dvtId9murLmKOsrJeYgeHWw==",
       "requires": {
-        "prop-types": "^15.7.2",
-        "react-modal": "^3.11.1"
+        "hotkeys-js": "^3.8.1",
+        "prop-types": "^15.7.2"
       }
     },
     "react-is": {
@@ -14833,26 +14757,10 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
-    "react-modal": {
-      "version": "3.14.4",
-      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.14.4.tgz",
-      "integrity": "sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg==",
-      "requires": {
-        "exenv": "^1.2.0",
-        "prop-types": "^15.7.2",
-        "react-lifecycles-compat": "^3.0.0",
-        "warning": "^4.0.3"
-      }
-    },
     "react-swipeable": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-6.2.1.tgz",
-      "integrity": "sha512-JpTj+tjJTDcIWtoMkab6zfwWD1T1tBzUyEfXsXnohnNkwA2dTuNS0gtN7HoxU1Qa+e3GDnfNYk2z7vwzfO4SoQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.0.tgz",
+      "integrity": "sha512-NI7KGfQ6gwNFN0Hor3vytYW3iRfMMaivGEuxcADOOfBCx/kqwXE8IfHFxEcxSUkxCYf38COLKYd9EMYZghqaUA==",
       "requires": {}
     },
     "readable-stream": {
@@ -14878,17 +14786,17 @@
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "regexp.prototype.flags": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz",
-      "integrity": "sha512-pMR7hBVUUGI7PMA37m2ofIdQCsomVnas+Jn5UPGAHQ+/LlwKm/aTLJHdasmHRzlfeZwHiAOaRSo2rbBDm3nNUQ==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
       }
     },
     "regexpp": {
@@ -15050,12 +14958,11 @@
       "dev": true
     },
     "scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz",
+      "integrity": "sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==",
       "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "scuid": {
@@ -15135,12 +15042,6 @@
       "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=",
       "dev": true
     },
-    "source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true
-    },
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -15240,23 +15141,25 @@
       }
     },
     "string.prototype.trimend": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
+      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
       }
     },
     "string.prototype.trimstart": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
+      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
       }
     },
     "strip-ansi": {
@@ -15281,9 +15184,9 @@
       "dev": true
     },
     "styled-jsx": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.1.tgz",
-      "integrity": "sha512-+PIZ/6Uk40mphiQJJI1202b+/dYeTVd9ZnMPR80pgiWbjIwvN2zIp4r9et0BgqBuShh48I0gttPlAXA7WVvBxw==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.2.tgz",
+      "integrity": "sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==",
       "requires": {}
     },
     "supports-color": {
@@ -15474,9 +15377,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.6.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
-      "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
+      "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==",
       "dev": true
     },
     "ua-parser-js": {
@@ -15486,14 +15389,14 @@
       "dev": true
     },
     "unbox-primitive": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
-      "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
       "dev": true,
       "requires": {
-        "function-bind": "^1.1.1",
-        "has-bigints": "^1.0.1",
-        "has-symbols": "^1.0.2",
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
         "which-boxed-primitive": "^1.0.2"
       }
     },
@@ -15547,14 +15450,6 @@
         "prepend-http": "^2.0.0"
       }
     },
-    "use-subscription": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz",
-      "integrity": "sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==",
-      "requires": {
-        "object-assign": "^4.1.1"
-      }
-    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -15579,14 +15474,6 @@
       "integrity": "sha512-41BrgH+dIbCFXClcSapVs5M6GkENd3gQOJpEfPDNa71LsUGMXDL0jMWpI/Rh7WhX+Aalfz2TTS3Zt5pUsbnhLg==",
       "dev": true
     },
-    "warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
diff --git a/package.json b/package.json
index 749cd13..f72931c 100644
--- a/package.json
+++ b/package.json
@@ -16,39 +16,39 @@
     "@fontsource/material-icons": "^4.5.4",
     "@fontsource/material-icons-rounded": "^4.5.4",
     "@fontsource/opendyslexic": "^4.5.4",
-    "@fontsource/vollkorn": "^4.5.6",
-    "@fontsource/zen-maru-gothic": "^4.5.8",
+    "@fontsource/vollkorn": "^4.5.9",
+    "@fontsource/zen-maru-gothic": "^4.5.11",
     "@tippyjs/react": "^4.2.6",
-    "autoprefixer": "^10.4.5",
+    "autoprefixer": "^10.4.7",
     "graphql-request": "^4.2.0",
     "markdown-to-jsx": "^7.1.7",
-    "next": "^12.1.2",
-    "nodemailer": "^6.7.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-image-lightbox": "^5.1.4",
-    "react-swipeable": "^6.2.1",
+    "next": "^12.1.6",
+    "nodemailer": "^6.7.5",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-hot-keys": "^2.7.2",
+    "react-swipeable": "^7.0.0",
     "turndown": "^7.1.1"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^2.6.2",
-    "@graphql-codegen/typescript": "2.4.8",
-    "@graphql-codegen/typescript-graphql-request": "^4.4.5",
-    "@graphql-codegen/typescript-operations": "^2.3.5",
-    "@types/node": "17.0.25",
+    "@graphql-codegen/typescript": "2.4.11",
+    "@graphql-codegen/typescript-graphql-request": "^4.4.8",
+    "@graphql-codegen/typescript-operations": "^2.4.0",
+    "@types/node": "17.0.33",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "^18.0.4",
     "@types/turndown": "^5.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.20.0",
-    "eslint": "^8.14.0",
-    "eslint-config-next": "12.1.5",
-    "graphql": "^14.7.0",
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
+    "eslint": "^8.15.0",
+    "eslint-config-next": "12.1.6",
+    "graphql": "^16.5.0",
     "next-sitemap": "^2.5.20",
     "prettier": "^2.6.2",
     "prettier-plugin-organize-imports": "^2.3.4",
     "tailwindcss": "^3.0.24",
-    "typescript": "^4.6.3"
+    "typescript": "^4.6.4"
   }
 }
diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index 044ab83..6510034 100644
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -1,23 +1,19 @@
-import Button from "components/Inputs/Button";
+import { Button } from "components/Inputs/Button";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { UploadImageFragment } from "graphql/generated";
+import { AppStaticProps } from "graphql/getAppStaticProps";
+import { prettyLanguage, prettySlug } from "helpers/formatters";
+import { getOgImage, ImageQuality, OgImage } from "helpers/img";
+import { Immutable } from "helpers/types";
 import { useMediaMobile } from "hooks/useMediaQuery";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { AppStaticProps } from "queries/getAppStaticProps";
-import {
-  getOgImage,
-  OgImage,
-  prettyLanguage,
-  prettySlug,
-} from "queries/helpers";
 import { useEffect, useState } from "react";
 import { useSwipeable } from "react-swipeable";
-import { ImageQuality } from "./Img";
-import OrderableList from "./Inputs/OrderableList";
-import Select from "./Inputs/Select";
-import MainPanel from "./Panels/MainPanel";
-import Popup from "./Popup";
+import { OrderableList } from "./Inputs/OrderableList";
+import { Select } from "./Inputs/Select";
+import { MainPanel } from "./Panels/MainPanel";
+import { Popup } from "./Popup";
 
 interface Props extends AppStaticProps {
   subPanel?: React.ReactNode;
@@ -29,8 +25,19 @@ interface Props extends AppStaticProps {
   description?: string;
 }
 
-export default function AppLayout(props: Props): JSX.Element {
-  const { langui, currencies, languages, subPanel, contentPanel } = props;
+export function AppLayout(props: Immutable<Props>): JSX.Element {
+  const {
+    langui,
+    currencies,
+    languages,
+    subPanel,
+    contentPanel,
+    thumbnail,
+    title,
+    navTitle,
+    description,
+    subPanelIcon,
+  } = props;
   const router = useRouter();
   const isMobile = useMediaMobile();
   const appLayout = useAppLayout();
@@ -39,19 +46,23 @@ export default function AppLayout(props: Props): JSX.Element {
 
   const handlers = useSwipeable({
     onSwipedLeft: (SwipeEventData) => {
-      if (SwipeEventData.velocity < sensibilitySwipe) return;
-      if (appLayout.mainPanelOpen) {
-        appLayout.setMainPanelOpen(false);
-      } else if (subPanel && contentPanel) {
-        appLayout.setSubPanelOpen(true);
+      if (appLayout.menuGestures) {
+        if (SwipeEventData.velocity < sensibilitySwipe) return;
+        if (appLayout.mainPanelOpen) {
+          appLayout.setMainPanelOpen(false);
+        } else if (subPanel && contentPanel) {
+          appLayout.setSubPanelOpen(true);
+        }
       }
     },
     onSwipedRight: (SwipeEventData) => {
-      if (SwipeEventData.velocity < sensibilitySwipe) return;
-      if (appLayout.subPanelOpen) {
-        appLayout.setSubPanelOpen(false);
-      } else {
-        appLayout.setMainPanelOpen(true);
+      if (appLayout.menuGestures) {
+        if (SwipeEventData.velocity < sensibilitySwipe) return;
+        if (appLayout.subPanelOpen) {
+          appLayout.setSubPanelOpen(false);
+        } else {
+          appLayout.setMainPanelOpen(true);
+        }
       }
     },
   });
@@ -59,8 +70,8 @@ export default function AppLayout(props: Props): JSX.Element {
   const turnSubIntoContent = subPanel && !contentPanel;
 
   const titlePrefix = "Accord’s Library";
-  const metaImage: OgImage = props.thumbnail
-    ? getOgImage(ImageQuality.Og, props.thumbnail)
+  const metaImage: OgImage = thumbnail
+    ? getOgImage(ImageQuality.Og, thumbnail)
     : {
         image: "/default_og.jpg",
         width: 1200,
@@ -68,9 +79,9 @@ export default function AppLayout(props: Props): JSX.Element {
         alt: "Accord's Library Logo",
       };
   const ogTitle =
-    props.title ?? props.navTitle ?? prettySlug(router.asPath.split("/").pop());
+    title ?? navTitle ?? prettySlug(router.asPath.split("/").pop());
 
-  const metaDescription = props.description ?? langui.default_description ?? "";
+  const metaDescription = description ?? langui.default_description ?? "";
 
   useEffect(() => {
     document.getElementsByTagName("html")[0].style.fontSize = `${
@@ -115,7 +126,7 @@ export default function AppLayout(props: Props): JSX.Element {
   }, [currencySelect]);
 
   let gridCol = "";
-  if (props.subPanel) {
+  if (subPanel) {
     if (appLayout.mainPanelReduced) {
       gridCol = "grid-cols-[6rem_20rem_1fr]";
     } else {
@@ -140,7 +151,9 @@ export default function AppLayout(props: Props): JSX.Element {
     >
       <div
         {...handlers}
-        className={`fixed inset-0 touch-pan-y p-0 m-0 bg-light text-black grid [grid-template-areas:'main_sub_content'] ${gridCol} mobile:grid-cols-[1fr] mobile:grid-rows-[1fr_5rem] mobile:[grid-template-areas:'content''navbar']`}
+        className={`fixed inset-0 touch-pan-y p-0 m-0 bg-light text-black grid
+        [grid-template-areas:'main_sub_content'] ${gridCol} mobile:grid-cols-[1fr]
+        mobile:grid-rows-[1fr_5rem] mobile:[grid-template-areas:'content''navbar']`}
       >
         <Head>
           <title>{`${titlePrefix} - ${ogTitle}`}</title>
@@ -172,7 +185,8 @@ export default function AppLayout(props: Props): JSX.Element {
 
         {/* Background when navbar is opened */}
         <div
-          className={`[grid-area:content] mobile:z-10 absolute inset-0 transition-[backdrop-filter] duration-500 ${
+          className={`[grid-area:content] mobile:z-10 absolute
+          inset-0 transition-[backdrop-filter] duration-500 ${
             (appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
               ? "[backdrop-filter:blur(2px)]"
               : "pointer-events-none touch-none "
@@ -201,7 +215,10 @@ export default function AppLayout(props: Props): JSX.Element {
             contentPanel
           ) : (
             <div className="grid place-content-center h-full">
-              <div className="text-dark border-dark border-2 border-dotted rounded-2xl p-8 grid grid-flow-col place-items-center gap-9 opacity-40">
+              <div
+                className="text-dark border-dark border-2 border-dotted rounded-2xl
+              p-8 grid grid-flow-col place-items-center gap-9 opacity-40"
+              >
                 <p className="text-4xl">❮</p>
                 <p className="text-2xl w-64">{langui.select_option_sidebar}</p>
               </div>
@@ -212,7 +229,10 @@ export default function AppLayout(props: Props): JSX.Element {
         {/* Sub panel */}
         {subPanel && (
           <div
-            className={`[grid-area:sub] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%] mobile:justify-self-end border-r-[1px] mobile:border-r-0 mobile:border-l-[1px] border-black border-dotted overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
+            className={`[grid-area:sub] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%]
+            mobile:justify-self-end border-r-[1px] mobile:border-r-0 mobile:border-l-[1px]
+            border-black border-dotted overflow-y-scroll webkit-scrollbar:w-0
+            [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
           ${
             turnSubIntoContent
               ? "mobile:border-l-0 mobile:w-full"
@@ -225,14 +245,21 @@ export default function AppLayout(props: Props): JSX.Element {
 
         {/* Main panel */}
         <div
-          className={`[grid-area:main] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%] mobile:justify-self-start border-r-[1px] border-black border-dotted overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
-        ${appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"}`}
+          className={`[grid-area:main] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%]
+          mobile:justify-self-start border-r-[1px] border-black border-dotted overflow-y-scroll
+          webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light
+          texture-paper-dots ${
+            appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"
+          }`}
         >
           <MainPanel langui={langui} />
         </div>
 
         {/* Navbar */}
-        <div className="[grid-area:navbar] border-t-[1px] border-black border-dotted grid grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light texture-paper-dots">
+        <div
+          className="[grid-area:navbar] border-t-[1px] border-black border-dotted grid
+          grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light texture-paper-dots"
+        >
           <span
             className="material-icons mt-[.1em] cursor-pointer"
             onClick={() => {
@@ -261,8 +288,8 @@ export default function AppLayout(props: Props): JSX.Element {
             {subPanel && !turnSubIntoContent
               ? appLayout.subPanelOpen
                 ? "close"
-                : props.subPanelIcon
-                ? props.subPanelIcon
+                : subPanelIcon
+                ? subPanelIcon
                 : "tune"
               : ""}
           </span>
@@ -274,7 +301,10 @@ export default function AppLayout(props: Props): JSX.Element {
         >
           <h2 className="text-2xl">{langui.settings}</h2>
 
-          <div className="mt-4 grid gap-16 justify-items-center text-center desktop:grid-cols-[auto_auto]">
+          <div
+            className="mt-4 grid gap-16 justify-items-center
+            text-center desktop:grid-cols-[auto_auto]"
+          >
             {router.locales && (
               <div>
                 <h3 className="text-xl">{langui.languages}</h3>
@@ -295,6 +325,12 @@ export default function AppLayout(props: Props): JSX.Element {
                             ])
                           )
                     }
+                    insertLabels={
+                      new Map([
+                        [0, langui.primary_language],
+                        [1, langui.secondary_language],
+                      ])
+                    }
                     onChange={(items) => {
                       const preferredLanguages = [...items].map(
                         ([code]) => code
@@ -437,6 +473,7 @@ export default function AppLayout(props: Props): JSX.Element {
                       (event.target as HTMLInputElement).value
                     )
                   }
+                  value={appLayout.playerName}
                 />
               </div>
             </div>
diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
index b410c5e..33dbe51 100644
--- a/src/components/Chip.tsx
+++ b/src/components/Chip.tsx
@@ -1,12 +1,16 @@
+import { Immutable } from "helpers/types";
+
 interface Props {
   className?: string;
   children: React.ReactNode;
 }
 
-export default function Chip(props: Props): JSX.Element {
+export function Chip(props: Immutable<Props>): JSX.Element {
   return (
     <div
-      className={`grid place-content-center place-items-center text-xs pb-[0.14rem] whitespace-nowrap px-1.5 border-[1px] rounded-full opacity-70 transition-[color,_opacity,_border-color] hover:opacity-100 ${props.className}`}
+      className={`grid place-content-center place-items-center text-xs pb-[0.14rem]
+      whitespace-nowrap px-1.5 border-[1px] rounded-full opacity-70
+      transition-[color,_opacity,_border-color] hover:opacity-100 ${props.className}`}
     >
       {props.children}
     </div>
diff --git a/src/components/HorizontalLine.tsx b/src/components/HorizontalLine.tsx
index ae6a065..1d5e291 100644
--- a/src/components/HorizontalLine.tsx
+++ b/src/components/HorizontalLine.tsx
@@ -1,8 +1,10 @@
+import { Immutable } from "helpers/types";
+
 interface Props {
   className?: string;
 }
 
-export default function HorizontalLine(props: Props): JSX.Element {
+export function HorizontalLine(props: Immutable<Props>): JSX.Element {
   return (
     <div
       className={`h-0 w-full my-8 border-t-[3px] border-dotted border-black ${props.className}`}
diff --git a/src/components/Img.tsx b/src/components/Img.tsx
index d62dee3..5c1f6a8 100644
--- a/src/components/Img.tsx
+++ b/src/components/Img.tsx
@@ -1,106 +1,43 @@
 import { UploadImageFragment } from "graphql/generated";
-import Image, { ImageProps } from "next/image";
+import { getAssetURL, getImgSizesByQuality, ImageQuality } from "helpers/img";
+import { Immutable } from "helpers/types";
+import { ImageProps } from "next/image";
+import { MouseEventHandler } from "react";
 
 interface Props {
   className?: string;
   image?: UploadImageFragment | string;
   quality?: ImageQuality;
   alt?: ImageProps["alt"];
-  layout?: ImageProps["layout"];
-  objectFit?: ImageProps["objectFit"];
-  priority?: ImageProps["priority"];
+  onClick?: MouseEventHandler<HTMLImageElement>;
 }
 
-export default function Img(props: Props): JSX.Element {
-  if (typeof props.image === "string") {
+export function Img(props: Immutable<Props>): JSX.Element {
+  const {
+    className,
+    image,
+    quality = ImageQuality.Small,
+    alt,
+    onClick,
+  } = props;
+
+  if (typeof image === "string") {
+    return (
+      <img className={className} src={image} alt={alt ?? ""} loading="lazy" />
+    );
+  } else if (image?.width && image.height) {
+    const imgSize = getImgSizesByQuality(image.width, image.height, quality);
     return (
       <img
-        className={props.className}
-        src={props.image}
-        alt={props.alt ?? ""}
-      />
-    );
-  } else if (props.image?.width && props.image.height) {
-    const imgSize = getImgSizesByQuality(
-      props.image.width,
-      props.image.height,
-      props.quality ?? ImageQuality.Small
-    );
-    return (
-      <Image
-        className={props.className}
-        src={getAssetURL(
-          props.image.url,
-          props.quality ? props.quality : ImageQuality.Small
-        )}
-        alt={props.alt ?? props.image.alternativeText ?? ""}
-        width={props.layout === "fill" ? undefined : imgSize.width}
-        height={props.layout === "fill" ? undefined : imgSize.height}
-        layout={props.layout}
-        objectFit={props.objectFit}
-        priority={props.priority}
-        unoptimized
+        className={className}
+        src={getAssetURL(image.url, quality)}
+        alt={alt ?? image.alternativeText ?? ""}
+        width={imgSize.width}
+        height={imgSize.height}
+        loading="lazy"
+        onClick={onClick}
       />
     );
   }
   return <></>;
 }
-
-export enum ImageQuality {
-  Small = "small",
-  Medium = "medium",
-  Large = "large",
-  Og = "og",
-}
-
-export function getAssetFilename(path: string): string {
-  let result = path.split("/");
-  result = result[result.length - 1].split(".");
-  result = result
-    .splice(0, result.length - 1)
-    .join(".")
-    .split("_");
-  return result[0];
-}
-
-export function getAssetURL(url: string, quality: ImageQuality): string {
-  let newUrl = url;
-  newUrl = newUrl.replace(/^\/uploads/u, `/${quality}`);
-  newUrl = newUrl.replace(/.jpg$/u, ".webp");
-  newUrl = newUrl.replace(/.jpeg$/u, ".webp");
-  newUrl = newUrl.replace(/.png$/u, ".webp");
-  if (quality === ImageQuality.Og) newUrl = newUrl.replace(/.webp$/u, ".jpg");
-  return process.env.NEXT_PUBLIC_URL_IMG + newUrl;
-}
-
-export function getImgSizesByMaxSize(
-  width: number,
-  height: number,
-  maxSize: number
-): { width: number; height: number } {
-  if (width > height) {
-    if (width < maxSize) return { width: width, height: height };
-    return { width: maxSize, height: (height / width) * maxSize };
-  }
-  if (height < maxSize) return { width: width, height: height };
-  return { width: (width / height) * maxSize, height: maxSize };
-}
-
-export function getImgSizesByQuality(
-  width: number,
-  height: number,
-  quality: ImageQuality
-): { width: number; height: number } {
-  switch (quality) {
-    case ImageQuality.Og:
-      return getImgSizesByMaxSize(width, height, 512);
-    case ImageQuality.Small:
-      return getImgSizesByMaxSize(width, height, 512);
-    case ImageQuality.Medium:
-      return getImgSizesByMaxSize(width, height, 1024);
-    case ImageQuality.Large:
-      return getImgSizesByMaxSize(width, height, 2048);
-    default:
-      return { width: 0, height: 0 };
-  }
-}
diff --git a/src/components/Inputs/Button.tsx b/src/components/Inputs/Button.tsx
index 0c2b0eb..9a18772 100644
--- a/src/components/Inputs/Button.tsx
+++ b/src/components/Inputs/Button.tsx
@@ -1,3 +1,4 @@
+import { Immutable } from "helpers/types";
 import { useRouter } from "next/router";
 import { MouseEventHandler } from "react";
 
@@ -14,7 +15,7 @@ interface Props {
   badgeNumber?: number;
 }
 
-export default function Button(props: Props): JSX.Element {
+export function Button(props: Immutable<Props>): JSX.Element {
   const {
     draggable,
     id,
@@ -39,11 +40,15 @@ export default function Button(props: Props): JSX.Element {
       transition-all select-none hover:[--opacityBadge:0] --opacityBadge:100 ${className} ${
         active
           ? "text-light bg-black drop-shadow-black-lg !border-black cursor-not-allowed"
-          : "cursor-pointer hover:text-light hover:bg-dark hover:drop-shadow-shade-lg active:bg-black active:text-light active:drop-shadow-black-lg active:border-black"
+          : `cursor-pointer hover:text-light hover:bg-dark hover:drop-shadow-shade-lg
+          active:bg-black active:text-light active:drop-shadow-black-lg active:border-black`
       }`}
     >
       {badgeNumber && (
-        <div className="opacity-[var(--opacityBadge)] transition-opacity grid place-items-center absolute -top-3 -right-2 bg-dark w-8 h-8 text-light font-bold rounded-full">
+        <div
+          className="opacity-[var(--opacityBadge)] transition-opacity grid place-items-center
+          absolute -top-3 -right-2 bg-dark w-8 h-8 text-light font-bold rounded-full"
+        >
           {badgeNumber}
         </div>
       )}
diff --git a/src/components/Inputs/LanguageSwitcher.tsx b/src/components/Inputs/LanguageSwitcher.tsx
index d98b958..307215c 100644
--- a/src/components/Inputs/LanguageSwitcher.tsx
+++ b/src/components/Inputs/LanguageSwitcher.tsx
@@ -1,8 +1,9 @@
-import { AppStaticProps } from "queries/getAppStaticProps";
-import { prettyLanguage } from "queries/helpers";
+import { AppStaticProps } from "graphql/getAppStaticProps";
+import { prettyLanguage } from "helpers/formatters";
+import { Immutable } from "helpers/types";
 import { Dispatch, SetStateAction } from "react";
-import ToolTip from "../ToolTip";
-import Button from "./Button";
+import { ToolTip } from "../ToolTip";
+import { Button } from "./Button";
 
 interface Props {
   className?: string;
@@ -12,7 +13,7 @@ interface Props {
   setLocalesIndex: Dispatch<SetStateAction<number | undefined>>;
 }
 
-export default function LanguageSwitcher(props: Props): JSX.Element {
+export function LanguageSwitcher(props: Immutable<Props>): JSX.Element {
   const { locales, className, localesIndex, setLocalesIndex } = props;
 
   return (
diff --git a/src/components/Inputs/OrderableList.tsx b/src/components/Inputs/OrderableList.tsx
index c079bd2..e013d50 100644
--- a/src/components/Inputs/OrderableList.tsx
+++ b/src/components/Inputs/OrderableList.tsx
@@ -1,13 +1,15 @@
-import { arrayMove } from "queries/helpers";
+import { arrayMove } from "helpers/others";
+import { Immutable } from "helpers/types";
 import { useEffect, useState } from "react";
 
 interface Props {
   className?: string;
   items: Map<string, string>;
+  insertLabels?: Map<number, string | null | undefined>;
   onChange?: (items: Map<string, string>) => void;
 }
 
-export default function OrderableList(props: Props): JSX.Element {
+export function OrderableList(props: Immutable<Props>): JSX.Element {
   const [items, setItems] = useState<Map<string, string>>(props.items);
 
   useEffect(() => {
@@ -24,12 +26,8 @@ export default function OrderableList(props: Props): JSX.Element {
     <div className="grid gap-2">
       {[...items].map(([key, value], index) => (
         <>
-          {index === 0 ? (
-            <p>Primary language</p>
-          ) : index === 1 ? (
-            <p>Secondary languages</p>
-          ) : (
-            ""
+          {props.insertLabels?.get(index) && (
+            <p>{props.insertLabels.get(index)}</p>
           )}
           <div
             onDragStart={(event) => {
diff --git a/src/components/Inputs/PageSelector.tsx b/src/components/Inputs/PageSelector.tsx
index da75714..fe376bd 100644
--- a/src/components/Inputs/PageSelector.tsx
+++ b/src/components/Inputs/PageSelector.tsx
@@ -1,5 +1,6 @@
+import { Immutable } from "helpers/types";
 import { Dispatch, SetStateAction } from "react";
-import Button from "./Button";
+import { Button } from "./Button";
 
 interface Props {
   className?: string;
@@ -8,7 +9,7 @@ interface Props {
   setPage: Dispatch<SetStateAction<number>>;
 }
 
-export default function PageSelector(props: Props): JSX.Element {
+export function PageSelector(props: Immutable<Props>): JSX.Element {
   const { page, setPage, maxPage } = props;
 
   return (
diff --git a/src/components/Inputs/Select.tsx b/src/components/Inputs/Select.tsx
index 63728c4..fd379cc 100644
--- a/src/components/Inputs/Select.tsx
+++ b/src/components/Inputs/Select.tsx
@@ -1,3 +1,4 @@
+import { Immutable } from "helpers/types";
 import { Dispatch, SetStateAction, useState } from "react";
 
 interface Props {
@@ -9,7 +10,7 @@ interface Props {
   className?: string;
 }
 
-export default function Select(props: Props): JSX.Element {
+export function Select(props: Immutable<Props>): JSX.Element {
   const [opened, setOpened] = useState(false);
 
   return (
@@ -19,7 +20,9 @@ export default function Select(props: Props): JSX.Element {
       } ${props.className}`}
     >
       <div
-        className={`outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent] bg-light rounded-[1em] p-1 grid grid-flow-col grid-cols-[1fr_auto_auto] place-items-center cursor-pointer hover:bg-mid transition-all ${
+        className={`outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent]
+        bg-light rounded-[1em] p-1 grid grid-flow-col grid-cols-[1fr_auto_auto] place-items-center
+        cursor-pointer hover:bg-mid transition-all ${
           opened && "outline-[transparent] rounded-b-none"
         }`}
       >
@@ -47,7 +50,8 @@ export default function Select(props: Props): JSX.Element {
           <>
             {index !== props.state && (
               <div
-                className="bg-light hover:bg-mid transition-colors cursor-pointer p-1 last-of-type:rounded-b-[1em]"
+                className="bg-light hover:bg-mid transition-colors
+                cursor-pointer p-1 last-of-type:rounded-b-[1em]"
                 key={index}
                 id={option}
                 onClick={() => {
diff --git a/src/components/Inputs/Switch.tsx b/src/components/Inputs/Switch.tsx
index 9640fa3..be1d2c7 100644
--- a/src/components/Inputs/Switch.tsx
+++ b/src/components/Inputs/Switch.tsx
@@ -1,3 +1,4 @@
+import { Immutable } from "helpers/types";
 import { Dispatch, SetStateAction } from "react";
 
 interface Props {
@@ -6,18 +7,20 @@ interface Props {
   className?: string;
 }
 
-export default function Switch(props: Props): JSX.Element {
+export function Switch(props: Immutable<Props>): JSX.Element {
   return (
     <div
-      className={`h-6 w-12 rounded-full border-2 border-mid grid transition-colors relative cursor-pointer ${
-        props.className
-      } ${props.state ? "bg-mid" : "bg-light"}`}
+      className={`h-6 w-12 rounded-full border-2 border-mid grid
+      transition-colors relative cursor-pointer ${props.className} ${
+        props.state ? "bg-mid" : "bg-light"
+      }`}
       onClick={() => {
         props.setState(!props.state);
       }}
     >
       <div
-        className={`bg-dark aspect-square rounded-full absolute top-0 bottom-0 left-0 transition-transform ${
+        className={`bg-dark aspect-square rounded-full absolute
+        top-0 bottom-0 left-0 transition-transform ${
           props.state && "translate-x-[115%]"
         }`}
       ></div>
diff --git a/src/components/InsetBox.tsx b/src/components/InsetBox.tsx
index e19f8cd..d9e980a 100644
--- a/src/components/InsetBox.tsx
+++ b/src/components/InsetBox.tsx
@@ -1,10 +1,12 @@
+import { Immutable } from "helpers/types";
+
 interface Props {
   className?: string;
   children: React.ReactNode;
   id?: string;
 }
 
-export default function InsetBox(props: Props): JSX.Element {
+export function InsetBox(props: Immutable<Props>): JSX.Element {
   return (
     <div
       id={props.id}
diff --git a/src/components/Library/ContentLine.tsx b/src/components/Library/ContentLine.tsx
index e1dc01f..5d70725 100644
--- a/src/components/Library/ContentLine.tsx
+++ b/src/components/Library/ContentLine.tsx
@@ -1,26 +1,24 @@
-import Chip from "components/Chip";
-import Button from "components/Inputs/Button";
+import { Chip } from "components/Chip";
+import { Button } from "components/Inputs/Button";
 import { GetLibraryItemQuery } from "graphql/generated";
-import { AppStaticProps } from "queries/getAppStaticProps";
-import { prettyinlineTitle, prettySlug } from "queries/helpers";
+import { AppStaticProps } from "graphql/getAppStaticProps";
+import { prettyinlineTitle, prettySlug } from "helpers/formatters";
+import { Immutable } from "helpers/types";
 import { useState } from "react";
 
 interface Props {
-  content: Exclude<
-    Exclude<
-      Exclude<
-        GetLibraryItemQuery["libraryItems"],
-        null | undefined
-      >["data"][number]["attributes"],
-      null | undefined
-    >["contents"],
-    null | undefined
+  content: NonNullable<
+    NonNullable<
+      NonNullable<
+        GetLibraryItemQuery["libraryItems"]
+      >["data"][number]["attributes"]
+    >["contents"]
   >["data"][number];
   parentSlug: string;
   langui: AppStaticProps["langui"];
 }
 
-export default function ContentLine(props: Props): JSX.Element {
+export function ContentLine(props: Immutable<Props>): JSX.Element {
   const { content, langui, parentSlug } = props;
 
   const [opened, setOpened] = useState(false);
@@ -32,15 +30,19 @@ export default function ContentLine(props: Props): JSX.Element {
           opened && "bg-mid shadow-inner-sm shadow-shade h-auto py-3 my-2"
         }`}
       >
-        <div className="grid gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_12ch] thin:grid-cols-[auto_auto_1fr_auto]">
+        <div
+          className="grid gap-4 place-items-center
+        grid-cols-[auto_auto_1fr_auto_12ch] thin:grid-cols-[auto_auto_1fr_auto]"
+        >
           <a>
             <h3 className="cursor-pointer" onClick={() => setOpened(!opened)}>
-              {content.attributes.content?.data?.attributes?.titles?.[0]
+              {content.attributes.content?.data?.attributes?.translations?.[0]
                 ? prettyinlineTitle(
-                    content.attributes.content.data.attributes.titles[0]
+                    content.attributes.content.data.attributes.translations[0]
                       ?.pre_title,
-                    content.attributes.content.data.attributes.titles[0]?.title,
-                    content.attributes.content.data.attributes.titles[0]
+                    content.attributes.content.data.attributes.translations[0]
+                      ?.title,
+                    content.attributes.content.data.attributes.translations[0]
                       ?.subtitle
                   )
                 : prettySlug(content.attributes.slug, props.parentSlug)}
diff --git a/src/components/Library/ScanSet.tsx b/src/components/Library/ScanSet.tsx
index 1dd924d..95d98e3 100644
--- a/src/components/Library/ScanSet.tsx
+++ b/src/components/Library/ScanSet.tsx
@@ -1,76 +1,55 @@
-import Chip from "components/Chip";
-import Img, {
-  getAssetFilename,
-  getAssetURL,
-  ImageQuality,
-} from "components/Img";
-import Button from "components/Inputs/Button";
-import RecorderChip from "components/RecorderChip";
-import ToolTip from "components/ToolTip";
+import { Chip } from "components/Chip";
+import { Img } from "components/Img";
+import { Button } from "components/Inputs/Button";
+import { RecorderChip } from "components/RecorderChip";
+import { ToolTip } from "components/ToolTip";
 import { GetLibraryItemScansQuery } from "graphql/generated";
-import useSmartLanguage from "hooks/useSmartLanguage";
-import { AppStaticProps } from "queries/getAppStaticProps";
-import { getStatusDescription, isInteger } from "queries/helpers";
-import { Dispatch, SetStateAction } from "react";
+import { AppStaticProps } from "graphql/getAppStaticProps";
+import { getAssetFilename, getAssetURL, ImageQuality } from "helpers/img";
+import { isInteger } from "helpers/numbers";
+import { getStatusDescription } from "helpers/others";
+import { Immutable } from "helpers/types";
+import { useSmartLanguage } from "hooks/useSmartLanguage";
 
 interface Props {
-  setLightboxOpen: Dispatch<SetStateAction<boolean>>;
-  setLightboxImages: Dispatch<SetStateAction<string[]>>;
-  setLightboxIndex: Dispatch<SetStateAction<number>>;
-  scanSet: Exclude<
-    Exclude<
-      Exclude<
-        Exclude<
-          Exclude<
-            GetLibraryItemScansQuery["libraryItems"],
-            null | undefined
-          >["data"][number]["attributes"],
-          null | undefined
-        >["contents"],
-        null | undefined
-      >["data"][number]["attributes"],
-      null | undefined
-    >["scan_set"],
-    null | undefined
+  openLightBox: (images: string[], index?: number) => void;
+  scanSet: NonNullable<
+    NonNullable<
+      NonNullable<
+        NonNullable<
+          NonNullable<
+            GetLibraryItemScansQuery["libraryItems"]
+          >["data"][number]["attributes"]
+        >["contents"]
+      >["data"][number]["attributes"]
+    >["scan_set"]
   >;
   slug: string;
   title: string;
   languages: AppStaticProps["languages"];
   langui: AppStaticProps["langui"];
-  content: Exclude<
-    Exclude<
-      Exclude<
-        Exclude<
-          GetLibraryItemScansQuery["libraryItems"],
-          null | undefined
-        >["data"][number]["attributes"],
-        null | undefined
-      >["contents"],
-      null | undefined
-    >["data"][number]["attributes"],
-    null | undefined
+  content: NonNullable<
+    NonNullable<
+      NonNullable<
+        NonNullable<
+          GetLibraryItemScansQuery["libraryItems"]
+        >["data"][number]["attributes"]
+      >["contents"]
+    >["data"][number]["attributes"]
   >["content"];
 }
 
-export default function ScanSet(props: Props): JSX.Element {
-  const {
-    setLightboxOpen,
-    setLightboxImages,
-    setLightboxIndex,
-    scanSet,
-    slug,
-    title,
-    languages,
-    langui,
-    content,
-  } = props;
+export function ScanSet(props: Immutable<Props>): JSX.Element {
+  const { openLightBox, scanSet, slug, title, languages, langui, content } =
+    props;
 
   const [selectedScan, LanguageSwitcher] = useSmartLanguage({
     items: scanSet,
     languages: languages,
-    languageExtractor: (item) => item?.language?.data?.attributes?.code,
+    languageExtractor: (item) => item.language?.data?.attributes?.code,
     transform: (item) => {
-      item?.pages?.data.sort((a, b) => {
+      const newItem = { ...item } as NonNullable<Props["scanSet"][number]>;
+      newItem.pages?.data.sort((a, b) => {
         if (a.attributes?.url && b.attributes?.url) {
           let aName = getAssetFilename(a.attributes.url);
           let bName = getAssetFilename(b.attributes.url);
@@ -93,7 +72,7 @@ export default function ScanSet(props: Props): JSX.Element {
         }
         return 0;
       });
-      return item;
+      return newItem;
     },
   });
 
@@ -101,7 +80,10 @@ export default function ScanSet(props: Props): JSX.Element {
     <>
       {selectedScan && (
         <div>
-          <div className="flex flex-row flex-wrap place-items-center gap-6 text-base pt-10 first-of-type:pt-0">
+          <div
+            className="flex flex-row flex-wrap place-items-center
+          gap-6 text-base pt-10 first-of-type:pt-0"
+          >
             <h2 id={slug} className="text-2xl">
               {title}
             </h2>
@@ -198,11 +180,16 @@ export default function ScanSet(props: Props): JSX.Element {
             )}
           </div>
 
-          <div className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0">
+          <div
+            className="grid gap-8 items-end mobile:grid-cols-2
+            desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))]
+            pb-12 border-b-[3px] border-dotted last-of-type:border-0"
+          >
             {selectedScan.pages?.data.map((page, index) => (
               <div
                 key={page.id}
-                className="drop-shadow-shade-lg hover:scale-[1.02] cursor-pointer transition-transform"
+                className="drop-shadow-shade-lg hover:scale-[1.02]
+                cursor-pointer transition-transform"
                 onClick={() => {
                   const images: string[] = [];
                   selectedScan.pages?.data.map((image) => {
@@ -211,9 +198,7 @@ export default function ScanSet(props: Props): JSX.Element {
                         getAssetURL(image.attributes.url, ImageQuality.Large)
                       );
                   });
-                  setLightboxOpen(true);
-                  setLightboxImages(images);
-                  setLightboxIndex(index);
+                  openLightBox(images, index);
                 }}
               >
                 {page.attributes && (
diff --git a/src/components/Library/ScanSetCover.tsx b/src/components/Library/ScanSetCover.tsx
index 6cea335..f6b85b3 100644
--- a/src/components/Library/ScanSetCover.tsx
+++ b/src/components/Library/ScanSetCover.tsx
@@ -1,48 +1,37 @@
-import Chip from "components/Chip";
-import Img, { getAssetURL, ImageQuality } from "components/Img";
-import RecorderChip from "components/RecorderChip";
-import ToolTip from "components/ToolTip";
+import { Chip } from "components/Chip";
+import { Img } from "components/Img";
+import { RecorderChip } from "components/RecorderChip";
+import { ToolTip } from "components/ToolTip";
 import {
   GetLibraryItemScansQuery,
   UploadImageFragment,
 } from "graphql/generated";
-import useSmartLanguage from "hooks/useSmartLanguage";
-import { AppStaticProps } from "queries/getAppStaticProps";
-import { getStatusDescription } from "queries/helpers";
-import { Dispatch, SetStateAction } from "react";
+import { AppStaticProps } from "graphql/getAppStaticProps";
+import { getAssetURL, ImageQuality } from "helpers/img";
+import { getStatusDescription } from "helpers/others";
+import { Immutable } from "helpers/types";
+import { useSmartLanguage } from "hooks/useSmartLanguage";
 
 interface Props {
-  setLightboxOpen: Dispatch<SetStateAction<boolean>>;
-  setLightboxImages: Dispatch<SetStateAction<string[]>>;
-  setLightboxIndex: Dispatch<SetStateAction<number>>;
-  images: Exclude<
-    Exclude<
-      Exclude<
-        GetLibraryItemScansQuery["libraryItems"],
-        null | undefined
-      >["data"][number]["attributes"],
-      null | undefined
-    >["images"],
-    null | undefined
+  openLightBox: (images: string[], index?: number) => void;
+  images: NonNullable<
+    NonNullable<
+      NonNullable<
+        GetLibraryItemScansQuery["libraryItems"]
+      >["data"][number]["attributes"]
+    >["images"]
   >;
   languages: AppStaticProps["languages"];
   langui: AppStaticProps["langui"];
 }
 
-export default function ScanSetCover(props: Props): JSX.Element {
-  const {
-    setLightboxOpen,
-    setLightboxImages,
-    setLightboxIndex,
-    images,
-    languages,
-    langui,
-  } = props;
+export function ScanSetCover(props: Immutable<Props>): JSX.Element {
+  const { openLightBox, images, languages, langui } = props;
 
   const [selectedScan, LanguageSwitcher] = useSmartLanguage({
     items: images,
     languages: languages,
-    languageExtractor: (item) => item?.language?.data?.attributes?.code,
+    languageExtractor: (item) => item.language?.data?.attributes?.code,
   });
 
   const coverImages: UploadImageFragment[] = [];
@@ -64,7 +53,10 @@ export default function ScanSetCover(props: Props): JSX.Element {
       <>
         {selectedScan && (
           <div>
-            <div className="flex flex-row flex-wrap place-items-center gap-6 text-base pt-10 first-of-type:pt-0">
+            <div
+              className="flex flex-row flex-wrap place-items-center
+              gap-6 text-base pt-10 first-of-type:pt-0"
+            >
               <h2 id={"cover"} className="text-2xl">
                 {"Cover"}
               </h2>
@@ -149,20 +141,23 @@ export default function ScanSetCover(props: Props): JSX.Element {
                 )}
             </div>
 
-            <div className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0">
+            <div
+              className="grid gap-8 items-end mobile:grid-cols-2
+              desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))]
+              pb-12 border-b-[3px] border-dotted last-of-type:border-0"
+            >
               {coverImages.map((image, index) => (
                 <div
                   key={image.url}
-                  className="drop-shadow-shade-lg hover:scale-[1.02] cursor-pointer transition-transform"
+                  className="drop-shadow-shade-lg hover:scale-[1.02]
+                  cursor-pointer transition-transform"
                   onClick={() => {
                     const imgs: string[] = [];
                     coverImages.map((img) => {
                       if (img.url)
                         imgs.push(getAssetURL(img.url, ImageQuality.Large));
                     });
-                    setLightboxOpen(true);
-                    setLightboxImages(imgs);
-                    setLightboxIndex(index);
+                    openLightBox(imgs, index);
                   }}
                 >
                   <Img image={image} quality={ImageQuality.Small} />
diff --git a/src/components/LightBox.tsx b/src/components/LightBox.tsx
index 4864815..cb47c6f 100644
--- a/src/components/LightBox.tsx
+++ b/src/components/LightBox.tsx
@@ -1,6 +1,10 @@
-import { useMediaMobile } from "hooks/useMediaQuery";
+import { Immutable } from "helpers/types";
 import { Dispatch, SetStateAction } from "react";
-import Lightbox from "react-image-lightbox";
+import Hotkeys from "react-hot-keys";
+import { useSwipeable } from "react-swipeable";
+import { Img } from "./Img";
+import { Button } from "./Inputs/Button";
+import { Popup } from "./Popup";
 
 interface Props {
   setState:
@@ -12,27 +16,75 @@ interface Props {
   setIndex: Dispatch<SetStateAction<number>>;
 }
 
-export default function LightBox(props: Props): JSX.Element {
+export function LightBox(props: Immutable<Props>): JSX.Element {
   const { state, setState, images, index, setIndex } = props;
-  const mobile = useMediaMobile();
+
+  function handlePrevious() {
+    if (index > 0) setIndex(index - 1);
+  }
+
+  function handleNext() {
+    if (index < images.length - 1) setIndex(index + 1);
+  }
+
+  const sensibilitySwipe = 0.5;
+
+  const handlers = useSwipeable({
+    onSwipedLeft: (SwipeEventData) => {
+      if (SwipeEventData.velocity < sensibilitySwipe) return;
+      handleNext();
+    },
+    onSwipedRight: (SwipeEventData) => {
+      if (SwipeEventData.velocity < sensibilitySwipe) return;
+      handlePrevious();
+    },
+  });
 
   return (
     <>
       {state && (
-        <Lightbox
-          reactModalProps={{
-            parentSelector: () => document.getElementById("MyAppLayout"),
+        <Hotkeys
+          keyName="left,right"
+          allowRepeat
+          onKeyDown={(keyName) => {
+            if (keyName === "left") {
+              handlePrevious();
+            } else {
+              handleNext();
+            }
           }}
-          mainSrc={images[index]}
-          prevSrc={index > 0 ? images[index - 1] : undefined}
-          nextSrc={index < images.length ? images[index + 1] : undefined}
-          onMovePrevRequest={() => setIndex(index - 1)}
-          onMoveNextRequest={() => setIndex(index + 1)}
-          imageCaption=""
-          imageTitle=""
-          onCloseRequest={() => setState(false)}
-          imagePadding={mobile ? 0 : 70}
-        />
+        >
+          <Popup setState={setState} state={state} padding={false} fillViewport>
+            <div
+              {...handlers}
+              className={`grid grid-cols-[4em,1fr,4em] mobile:grid-cols-2
+              [grid-template-areas:"left_image_right"]
+              mobile:[grid-template-areas:"image_image""left_right"]
+              place-items-center first-letter:gap-4 w-full h-full overflow-hidden`}
+            >
+              <div className="[grid-area:left]">
+                {index > 0 && (
+                  <Button onClick={handlePrevious}>
+                    <span className="material-icons">chevron_left</span>
+                  </Button>
+                )}
+              </div>
+
+              <Img
+                className="max-h-full [grid-area:image]"
+                image={images[index]}
+              />
+
+              <div className="[grid-area:right]">
+                {index < images.length - 1 && (
+                  <Button onClick={handleNext}>
+                    <span className="material-icons">chevron_right</span>
+                  </Button>
+                )}
+              </div>
+            </div>
+          </Popup>
+        </Hotkeys>
       )}
     </>
   );
diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx
index a8b2b2a..6b86231 100644
--- a/src/components/Markdown/Markdawn.tsx
+++ b/src/components/Markdown/Markdawn.tsx
@@ -1,13 +1,15 @@
-import HorizontalLine from "components/HorizontalLine";
-import Img, { getAssetURL, ImageQuality } from "components/Img";
-import InsetBox from "components/InsetBox";
-import LightBox from "components/LightBox";
-import ToolTip from "components/ToolTip";
+import { HorizontalLine } from "components/HorizontalLine";
+import { Img } from "components/Img";
+import { InsetBox } from "components/InsetBox";
+import { ToolTip } from "components/ToolTip";
 import { useAppLayout } from "contexts/AppLayoutContext";
+import { slugify } from "helpers/formatters";
+import { getAssetURL, ImageQuality } from "helpers/img";
+import { Immutable } from "helpers/types";
+import { useLightBox } from "hooks/useLightBox";
 import Markdown from "markdown-to-jsx";
 import { useRouter } from "next/router";
-import { slugify } from "queries/helpers";
-import React, { useState } from "react";
+import React from "react";
 import ReactDOMServer from "react-dom/server";
 
 interface Props {
@@ -15,26 +17,18 @@ interface Props {
   text: string;
 }
 
-export default function Markdawn(props: Props): JSX.Element {
+export function Markdawn(props: Immutable<Props>): JSX.Element {
   const appLayout = useAppLayout();
   const text = preprocessMarkDawn(props.text);
 
   const router = useRouter();
 
-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [lightboxImages, setLightboxImages] = useState([""]);
-  const [lightboxIndex, setLightboxIndex] = useState(0);
+  const [openLightBox, LightBox] = useLightBox();
 
   if (text) {
     return (
       <>
-        <LightBox
-          state={lightboxOpen}
-          setState={setLightboxOpen}
-          images={lightboxImages}
-          index={lightboxIndex}
-          setIndex={setLightboxIndex}
-        />
+        <LightBox />
         <Markdown
           className={`formatted ${props.className}`}
           options={{
@@ -253,13 +247,11 @@ export default function Markdawn(props: Props): JSX.Element {
                   <div
                     className="my-8 cursor-pointer place-content-center grid"
                     onClick={() => {
-                      setLightboxOpen(true);
-                      setLightboxImages([
+                      openLightBox([
                         compProps.src.startsWith("/uploads/")
                           ? getAssetURL(compProps.src, ImageQuality.Large)
                           : compProps.src,
                       ]);
-                      setLightboxIndex(0);
                     }}
                   >
                     <Img
@@ -268,8 +260,6 @@ export default function Markdawn(props: Props): JSX.Element {
                           ? getAssetURL(compProps.src, ImageQuality.Small)
                           : compProps.src
                       }
-                      layout="fill"
-                      objectFit="contain"
                       quality={ImageQuality.Medium}
                     ></Img>
                   </div>
diff --git a/src/components/Markdown/TOC.tsx b/src/components/Markdown/TOC.tsx
index 54822de..4d14b64 100644
--- a/src/components/Markdown/TOC.tsx
+++ b/src/components/Markdown/TOC.tsx
@@ -1,5 +1,6 @@
+import { slugify } from "helpers/formatters";
+import { Immutable } from "helpers/types";
 import { useRouter } from "next/router";
-import { slugify } from "queries/helpers";
 import { preprocessMarkDawn } from "./Markdawn";
 
 interface Props {
@@ -7,7 +8,7 @@ interface Props {
   title?: string;
 }
 
-export default function TOCComponent(props: Props): JSX.Element {
+export function TOC(props: Immutable<Props>): JSX.Element {
   const { text, title } = props;
   const toc = getTocFromMarkdawn(preprocessMarkDawn(text), title);
   const router = useRouter();
@@ -28,7 +29,7 @@ export default function TOCComponent(props: Props): JSX.Element {
 }
 
 interface LevelProps {
-  tocchildren: TOC[];
+  tocchildren: TOCInterface[];
   parentNumbering: string;
 }
 
@@ -60,14 +61,14 @@ function TOCLevel(props: LevelProps): JSX.Element {
   );
 }
 
-interface TOC {
+interface TOCInterface {
   title: string;
   slug: string;
-  children: TOC[];
+  children: TOCInterface[];
 }
 
-export function getTocFromMarkdawn(text: string, title?: string): TOC {
-  const toc: TOC = {
+export function getTocFromMarkdawn(text: string, title?: string): TOCInterface {
+  const toc: TOCInterface = {
     title: title ?? "Return to top",
     slug: slugify(title),
     children: [],
diff --git a/src/components/PanelComponents/NavOption.tsx b/src/components/PanelComponents/NavOption.tsx
index 9de955a..a36eecc 100644
--- a/src/components/PanelComponents/NavOption.tsx
+++ b/src/components/PanelComponents/NavOption.tsx
@@ -1,4 +1,5 @@
-import ToolTip from "components/ToolTip";
+import { ToolTip } from "components/ToolTip";
+import { Immutable } from "helpers/types";
 import { useRouter } from "next/router";
 import { MouseEventHandler } from "react";
 
@@ -12,15 +13,19 @@ interface Props {
   onClick?: MouseEventHandler<HTMLDivElement>;
 }
 
-export default function NavOption(props: Props): JSX.Element {
+export function NavOption(props: Immutable<Props>): JSX.Element {
   const router = useRouter();
   const isActive = router.asPath.startsWith(props.url);
   const divActive = "bg-mid shadow-inner-sm shadow-shade";
+
   const border =
     "outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent]";
-  const divCommon = `gap-x-5 w-full rounded-2xl cursor-pointer p-4 hover:bg-mid hover:shadow-inner-sm hover:shadow-shade hover:active:shadow-inner hover:active:shadow-shade transition-all ${
-    props.border ? border : ""
-  } ${isActive ? divActive : ""}`;
+
+  const divCommon = `gap-x-5 w-full rounded-2xl cursor-pointer p-4 hover:bg-mid
+  hover:shadow-inner-sm hover:shadow-shade hover:active:shadow-inner
+  hover:active:shadow-shade transition-all ${props.border ? border : ""} ${
+    isActive ? divActive : ""
+  }`;
 
   return (
     <ToolTip
diff --git a/src/components/PanelComponents/PanelHeader.tsx b/src/components/PanelComponents/PanelHeader.tsx
index 7eef723..652e69a 100644
--- a/src/components/PanelComponents/PanelHeader.tsx
+++ b/src/components/PanelComponents/PanelHeader.tsx
@@ -1,4 +1,5 @@
-import HorizontalLine from "components/HorizontalLine";
+import { HorizontalLine } from "components/HorizontalLine";
+import { Immutable } from "helpers/types";
 
 interface Props {
   icon?: string;
@@ -6,7 +7,7 @@ interface Props {
   description?: string | null | undefined;
 }
 
-export default function PanelHeader(props: Props): JSX.Element {
+export function PanelHeader(props: Immutable<Props>): JSX.Element {
   return (
     <>
       <div className="w-full grid place-items-center">
diff --git a/src/components/PanelComponents/ReturnButton.tsx b/src/components/PanelComponents/ReturnButton.tsx
index b7347a2..edc40fc 100644
--- a/src/components/PanelComponents/ReturnButton.tsx
+++ b/src/components/PanelComponents/ReturnButton.tsx
@@ -1,7 +1,8 @@
-import HorizontalLine from "components/HorizontalLine";
-import Button from "components/Inputs/Button";
+import { HorizontalLine } from "components/HorizontalLine";
+import { Button } from "components/Inputs/Button";
 import { useAppLayout } from "contexts/AppLayoutContext";
-import { AppStaticProps } from "queries/getAppStaticProps";
+import { AppStaticProps } from "graphql/getAppStaticProps";
+import { Immutable } from "helpers/types";
 
 interface Props {
   href: string;
@@ -18,7 +19,7 @@ export enum ReturnButtonType {
   both = "both",
 }
 
-export default function ReturnButton(props: Props): JSX.Element {
+export function ReturnButton(props: Immutable<Props>): JSX.Element {
   const appLayout = useAppLayout();
 
   return (
diff --git a/src/components/Panels/ContentPanel.tsx b/src/components/Panels/ContentPanel.tsx
index b583e99..5019cdd 100644
--- a/src/components/Panels/ContentPanel.tsx
+++ b/src/components/Panels/ContentPanel.tsx
@@ -1,3 +1,5 @@
+import { Immutable } from "helpers/types";
+
 interface Props {
   children: React.ReactNode;
   autoformat?: boolean;
@@ -9,13 +11,13 @@ export enum ContentPanelWidthSizes {
   large = "large",
 }
 
-export default function ContentPanel(props: Props): JSX.Element {
+export function ContentPanel(props: Immutable<Props>): JSX.Element {
   const width = props.width ? props.width : ContentPanelWidthSizes.default;
   const widthCSS =
     width === ContentPanelWidthSizes.default ? "max-w-2xl" : "w-full";
 
   return (
-    <div className={`grid pt-10 pb-20 px-6 desktop:py-20 desktop:px-10`}>
+    <div className={`grid pt-10 pb-20 px-4 desktop:py-20 desktop:px-10`}>
       <main
         className={`${
           props.autoformat && "formatted"
diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx
index 500b862..4d83cfc 100644
--- a/src/components/Panels/MainPanel.tsx
+++ b/src/components/Panels/MainPanel.tsx
@@ -1,25 +1,27 @@
-import HorizontalLine from "components/HorizontalLine";
-import Button from "components/Inputs/Button";
-import NavOption from "components/PanelComponents/NavOption";
-import ToolTip from "components/ToolTip";
+import { HorizontalLine } from "components/HorizontalLine";
+import { Button } from "components/Inputs/Button";
+import { NavOption } from "components/PanelComponents/NavOption";
+import { ToolTip } from "components/ToolTip";
 import { useAppLayout } from "contexts/AppLayoutContext";
+import { AppStaticProps } from "graphql/getAppStaticProps";
+import { Immutable } from "helpers/types";
 import { useMediaDesktop } from "hooks/useMediaQuery";
 import Markdown from "markdown-to-jsx";
 import Link from "next/link";
-import { AppStaticProps } from "queries/getAppStaticProps";
 
 interface Props {
   langui: AppStaticProps["langui"];
 }
 
-export default function MainPanel(props: Props): JSX.Element {
+export function MainPanel(props: Immutable<Props>): JSX.Element {
   const { langui } = props;
   const isDesktop = useMediaDesktop();
   const appLayout = useAppLayout();
 
   return (
     <div
-      className={`flex flex-col justify-center content-start gap-y-2 justify-items-center text-center p-8 ${
+      className={`flex flex-col justify-center content-start
+      gap-y-2 justify-items-center text-center p-8 ${
         appLayout.mainPanelReduced && isDesktop && "px-4"
       }`}
     >
@@ -44,7 +46,9 @@ export default function MainPanel(props: Props): JSX.Element {
               onClick={() => appLayout.setMainPanelOpen(false)}
               className={`${
                 appLayout.mainPanelReduced && isDesktop ? "w-12" : "w-1/2"
-              } aspect-square cursor-pointer transition-colors [mask:url('/icons/accords.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black hover:bg-dark mb-4`}
+              } aspect-square cursor-pointer transition-colors [mask:url('/icons/accords.svg')]
+              ![mask-size:contain] ![mask-repeat:no-repeat]
+              ![mask-position:center] bg-black hover:bg-dark mb-4`}
             ></div>
           </Link>
 
@@ -68,22 +72,11 @@ export default function MainPanel(props: Props): JSX.Element {
               disabled={!appLayout.mainPanelReduced}
             >
               <Button
-                className={
-                  appLayout.mainPanelReduced && isDesktop
-                    ? ""
-                    : "!py-0.5 !px-2.5"
-                }
                 onClick={() => {
                   appLayout.setConfigPanelOpen(true);
                 }}
               >
-                <span
-                  className={`material-icons ${
-                    !(appLayout.mainPanelReduced && isDesktop) && "!text-sm"
-                  } `}
-                >
-                  settings
-                </span>
+                <span className={"material-icons"}>settings</span>
               </Button>
             </ToolTip>
 
@@ -218,10 +211,22 @@ export default function MainPanel(props: Props): JSX.Element {
           className="transition-[filter] colorize-black hover:colorize-dark"
           href="https://creativecommons.org/licenses/by-sa/4.0/"
         >
-          <div className="mt-4 mb-8 grid grid-flow-col place-content-center gap-1 hover:[--theme-color-black:var(--theme-color-dark)]">
-            <div className="w-6 aspect-square [mask:url('/icons/creative-commons-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black" />
-            <div className="w-6 aspect-square [mask:url('/icons/creative-commons-by-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black" />
-            <div className="w-6 aspect-square [mask:url('/icons/creative-commons-sa-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black" />
+          <div
+            className="mt-4 mb-8 grid grid-flow-col place-content-center gap-1
+            hover:[--theme-color-black:var(--theme-color-dark)]"
+          >
+            <div
+              className="w-6 aspect-square [mask:url('/icons/creative-commons-brands.svg')]
+              ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black"
+            />
+            <div
+              className="w-6 aspect-square [mask:url('/icons/creative-commons-by-brands.svg')]
+              ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black"
+            />
+            <div
+              className="w-6 aspect-square [mask:url('/icons/creative-commons-sa-brands.svg')]
+              ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black"
+            />
           </div>
         </a>
         <p>
@@ -232,14 +237,18 @@ export default function MainPanel(props: Props): JSX.Element {
         <div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
           <a
             aria-label="Browse our GitHub repository, which include this website source code"
-            className="transition-colors [mask:url('/icons/github-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] w-10 aspect-square bg-black hover:bg-dark"
+            className="transition-colors [mask:url('/icons/github-brands.svg')]
+            ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center]
+            w-10 aspect-square bg-black hover:bg-dark"
             href="https://github.com/Accords-Library"
             target="_blank"
             rel="noopener noreferrer"
           ></a>
           <a
             aria-label="Join our Discord server!"
-            className="transition-colors [mask:url('/icons/discord-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] w-10 aspect-square bg-black hover:bg-dark"
+            className="transition-colors [mask:url('/icons/discord-brands.svg')]
+            ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center]
+            w-10 aspect-square bg-black hover:bg-dark"
             href="/discord"
             target="_blank"
             rel="noopener noreferrer"
diff --git a/src/components/Panels/SubPanel.tsx b/src/components/Panels/SubPanel.tsx
index 4494645..da69642 100644
--- a/src/components/Panels/SubPanel.tsx
+++ b/src/components/Panels/SubPanel.tsx
@@ -1,8 +1,10 @@
+import { Immutable } from "helpers/types";
+
 interface Props {
   children: React.ReactNode;
 }
 
-export default function SubPanel(props: Props): JSX.Element {
+export function SubPanel(props: Immutable<Props>): JSX.Element {
   return (
     <div className="grid pt-10 pb-20 px-6 desktop:py-8 desktop:px-10 gap-y-2 text-center">
       {props.children}
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index 37be3cc..78739aa 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -1,4 +1,7 @@
-import { Dispatch, SetStateAction } from "react";
+import { useAppLayout } from "contexts/AppLayoutContext";
+import { Immutable } from "helpers/types";
+import { Dispatch, SetStateAction, useEffect } from "react";
+import Hotkeys from "react-hot-keys";
 
 interface Props {
   setState:
@@ -8,42 +11,65 @@ interface Props {
   children: React.ReactNode;
   fillViewport?: boolean;
   hideBackground?: boolean;
+  padding?: boolean;
 }
 
-export default function Popup(props: Props): JSX.Element {
+export function Popup(props: Immutable<Props>): JSX.Element {
+  const {
+    setState,
+    state,
+    children,
+    fillViewport,
+    hideBackground,
+    padding = true,
+  } = props;
+
+  const appLayout = useAppLayout();
+
+  useEffect(() => {
+    appLayout.setMenuGestures(!state);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state]);
+
   return (
-    <div
-      className={`fixed inset-0 z-50 grid place-content-center
-      transition-[backdrop-filter] duration-500 ${
-        props.state
-          ? "[backdrop-filter:blur(2px)]"
-          : "pointer-events-none touch-none"
-      }`}
+    <Hotkeys
+      keyName="escape"
+      allowRepeat
+      onKeyDown={() => {
+        setState(false);
+      }}
     >
       <div
-        className={`fixed bg-shade inset-0 transition-all duration-500 ${
-          props.state ? "bg-opacity-50" : "bg-opacity-0"
-        }`}
-        onClick={() => {
-          props.setState(false);
-        }}
-      />
-
-      <div
-        className={`p-10 grid gap-4 place-items-center transition-transform ${
-          props.state ? "scale-100" : "scale-0"
-        } ${
-          props.fillViewport
-            ? "absolute inset-10 top-20"
-            : "relative max-h-[80vh] overflow-y-auto mobile:w-[85vw]"
-        } ${
-          props.hideBackground
-            ? ""
-            : "bg-light rounded-lg shadow-2xl shadow-shade"
-        }`}
+        className={`fixed inset-0 z-50 grid place-content-center
+      transition-[backdrop-filter] duration-500 ${
+        state ? "[backdrop-filter:blur(2px)]" : "pointer-events-none touch-none"
+      }`}
       >
-        {props.children}
+        <div
+          className={`fixed bg-shade inset-0 transition-all duration-500 ${
+            state ? "bg-opacity-50" : "bg-opacity-0"
+          }`}
+          onClick={() => {
+            setState(false);
+          }}
+        />
+
+        <div
+          className={`${
+            padding && "p-10 mobile:p-6"
+          } grid gap-4 place-items-center transition-transform ${
+            state ? "scale-100" : "scale-0"
+          } ${
+            fillViewport
+              ? "absolute inset-10"
+              : "relative max-h-[80vh] overflow-y-auto mobile:w-[85vw]"
+          } ${
+            hideBackground ? "" : "bg-light rounded-lg shadow-2xl shadow-shade"
+          }`}
+        >
+          {children}
+        </div>
       </div>
-    </div>
+    </Hotkeys>
   );
 }
diff --git a/src/components/PostPage.tsx b/src/components/PostPage.tsx
index da7b5f2..e324f0a 100644
--- a/src/components/PostPage.tsx
+++ b/src/components/PostPage.tsx
@@ -1,29 +1,22 @@
-import { GetPostQuery } from "graphql/generated";
-import useSmartLanguage from "hooks/useSmartLanguage";
-import { AppStaticProps } from "queries/getAppStaticProps";
-import { getStatusDescription, prettySlug } from "queries/helpers";
-import AppLayout from "./AppLayout";
-import Chip from "./Chip";
-import HorizontalLine from "./HorizontalLine";
-import Markdawn from "./Markdown/Markdawn";
-import TOC from "./Markdown/TOC";
-import ReturnButton, { ReturnButtonType } from "./PanelComponents/ReturnButton";
-import ContentPanel from "./Panels/ContentPanel";
-import SubPanel from "./Panels/SubPanel";
-import RecorderChip from "./RecorderChip";
-import ThumbnailHeader from "./ThumbnailHeader";
-import ToolTip from "./ToolTip";
-
-export type Post = Exclude<
-  Exclude<
-    GetPostQuery["posts"],
-    null | undefined
-  >["data"][number]["attributes"],
-  null | undefined
->;
+import { AppStaticProps } from "graphql/getAppStaticProps";
+import { prettySlug } from "helpers/formatters";
+import { getStatusDescription } from "helpers/others";
+import { Immutable, PostWithTranslations } from "helpers/types";
+import { useSmartLanguage } from "hooks/useSmartLanguage";
+import { AppLayout } from "./AppLayout";
+import { Chip } from "./Chip";
+import { HorizontalLine } from "./HorizontalLine";
+import { Markdawn } from "./Markdown/Markdawn";
+import { TOC } from "./Markdown/TOC";
+import { ReturnButton, ReturnButtonType } from "./PanelComponents/ReturnButton";
+import { ContentPanel } from "./Panels/ContentPanel";
+import { SubPanel } from "./Panels/SubPanel";
+import { RecorderChip } from "./RecorderChip";
+import { ThumbnailHeader } from "./ThumbnailHeader";
+import { ToolTip } from "./ToolTip";
 
 interface Props {
-  post: Post;
+  post: PostWithTranslations;
   langui: AppStaticProps["langui"];
   languages: AppStaticProps["languages"];
   currencies: AppStaticProps["currencies"];
@@ -38,7 +31,7 @@ interface Props {
   appendBody?: JSX.Element;
 }
 
-export default function PostPage(props: Props): JSX.Element {
+export function PostPage(props: Immutable<Props>): JSX.Element {
   const {
     post,
     langui,
diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
index 0255a6f..b18dc83 100644
--- a/src/components/PreviewCard.tsx
+++ b/src/components/PreviewCard.tsx
@@ -4,16 +4,18 @@ import {
   PricePickerFragment,
   UploadImageFragment,
 } from "graphql/generated";
-import Link from "next/link";
-import { AppStaticProps } from "queries/getAppStaticProps";
+import { AppStaticProps } from "graphql/getAppStaticProps";
 import {
   prettyDate,
   prettyDuration,
   prettyPrice,
   prettyShortenNumber,
-} from "queries/helpers";
-import Chip from "./Chip";
-import Img, { ImageQuality } from "./Img";
+} from "helpers/formatters";
+import { ImageQuality } from "helpers/img";
+import { Immutable } from "helpers/types";
+import Link from "next/link";
+import { Chip } from "./Chip";
+import { Img } from "./Img";
 
 interface Props {
   thumbnail?: UploadImageFragment | string | null | undefined;
@@ -26,6 +28,7 @@ interface Props {
   topChips?: string[];
   bottomChips?: string[];
   keepInfoVisible?: boolean;
+  stackNumber?: number;
   metadata?: {
     currencies?: AppStaticProps["currencies"];
     release_date?: DatePickerFragment | null;
@@ -42,7 +45,7 @@ interface Props {
     | { __typename: "anotherHoverlayName" };
 }
 
-export default function ThumbnailPreview(props: Props): JSX.Element {
+export function PreviewCard(props: Immutable<Props>): JSX.Element {
   const {
     href,
     thumbnail,
@@ -50,6 +53,7 @@ export default function ThumbnailPreview(props: Props): JSX.Element {
     title,
     subtitle,
     description,
+    stackNumber = 0,
     topChips,
     bottomChips,
     keepInfoVisible,
@@ -110,8 +114,41 @@ export default function ThumbnailPreview(props: Props): JSX.Element {
         className="drop-shadow-shade-xl cursor-pointer grid items-end
         fine:[--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02]
         [--bg-opacity:0] hover:[--bg-opacity:0.5] [--play-opacity:0]
-        hover:[--play-opacity:100] transition-transform"
+        hover:[--play-opacity:100] transition-transform
+        [--stacked-top:0] hover:[--stacked-top:1]"
       >
+        {stackNumber > 0 && (
+          <>
+            <div
+              className="bg-light rounded-md overflow-hidden absolute transition-[top_transform]
+              inset-0 -top-[var(--stacked-top)*2.1rem] brightness-[0.8] sepia-[0.5]
+              scale-[calc(1-0.15*var(--stacked-top))]"
+            >
+              {thumbnail && (
+                <Img
+                  className="opacity-30 "
+                  image={thumbnail}
+                  quality={ImageQuality.Medium}
+                />
+              )}
+            </div>
+
+            <div
+              className="bg-light rounded-md overflow-hidden absolute transition-[top_transform]
+              -top-[var(--stacked-top)*1rem] inset-0 brightness-[0.9] sepia-[0.2]
+              scale-[calc(1-0.06*var(--stacked-top))]"
+            >
+              {thumbnail && (
+                <Img
+                  className="opacity-70"
+                  image={thumbnail}
+                  quality={ImageQuality.Medium}
+                />
+              )}
+            </div>
+          </>
+        )}
+
         {thumbnail ? (
           <div className="relative">
             <Img
@@ -123,6 +160,14 @@ export default function ThumbnailPreview(props: Props): JSX.Element {
               image={thumbnail}
               quality={ImageQuality.Medium}
             />
+            {stackNumber > 0 && (
+              <div
+                className="absolute right-2 top-2 text-light bg-black
+                  bg-opacity-60 px-2 rounded-full"
+              >
+                {stackNumber}
+              </div>
+            )}
             {hoverlay && hoverlay.__typename === "Video" && (
               <>
                 <div
@@ -149,18 +194,26 @@ export default function ThumbnailPreview(props: Props): JSX.Element {
         ) : (
           <div
             style={{ aspectRatio: thumbnailAspectRatio }}
-            className={`w-full bg-light ${
+            className={`w-full bg-light relative ${
               keepInfoVisible
                 ? "rounded-t-md"
                 : "rounded-md coarse:rounded-b-none"
             }`}
-          ></div>
+          >
+            {stackNumber > 0 && (
+              <div
+                className="absolute right-2 top-2 text-light bg-black
+                bg-opacity-60 px-2 rounded-full"
+              >
+                {stackNumber}
+              </div>
+            )}
+          </div>
         )}
         <div
           className={`linearbg-obi ${
-            keepInfoVisible
-              ? "-mt-[0.3333em]"
-              : `fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md
+            !keepInfoVisible &&
+            `fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md
               bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)]`
           } transition-opacity z-20 grid p-4 gap-2`}
         >
@@ -173,11 +226,15 @@ export default function ThumbnailPreview(props: Props): JSX.Element {
             </div>
           )}
           <div className="my-1">
-            {pre_title && <p className="leading-none mb-1">{pre_title}</p>}
-            {title && (
-              <p className="font-headers text-lg leading-none">{title}</p>
+            {pre_title && (
+              <p className="leading-none mb-1 break-words">{pre_title}</p>
             )}
-            {subtitle && <p className="leading-none">{subtitle}</p>}
+            {title && (
+              <p className="font-headers text-lg leading-none break-words">
+                {title}
+              </p>
+            )}
+            {subtitle && <p className="leading-none break-words">{subtitle}</p>}
           </div>
           {description && <p>{description}</p>}
           {bottomChips && bottomChips.length > 0 && (
diff --git a/src/components/PreviewLine.tsx b/src/components/PreviewLine.tsx
index e039450..742be36 100644
--- a/src/components/PreviewLine.tsx
+++ b/src/components/PreviewLine.tsx
@@ -1,7 +1,9 @@
 import { UploadImageFragment } from "graphql/generated";
+import { ImageQuality } from "helpers/img";
+import { Immutable } from "helpers/types";
 import Link from "next/link";
-import Chip from "./Chip";
-import Img, { ImageQuality } from "./Img";
+import { Chip } from "./Chip";
+import { Img } from "./Img";
 
 interface Props {
   thumbnail?: UploadImageFragment | string | null | undefined;
@@ -14,7 +16,7 @@ interface Props {
   bottomChips?: string[];
 }
 
-export default function PreviewLine(props: Props): JSX.Element {
+export function PreviewLine(props: Immutable<Props>): JSX.Element {
   const {
     href,
     thumbnail,
@@ -29,8 +31,9 @@ export default function PreviewLine(props: Props): JSX.Element {
   return (
     <Link href={href} passHref>
       <div
-        className="drop-shadow-shade-xl rounded-md bg-light cursor-pointer hover:scale-[1.02]
-         transition-transform flex flex-row gap-4 overflow-hidden place-items-center pr-4 w-full h-36"
+        className="drop-shadow-shade-xl rounded-md bg-light cursor-pointer
+        hover:scale-[1.02] transition-transform flex flex-row gap-4
+        overflow-hidden place-items-center pr-4 w-full h-36"
       >
         {thumbnail ? (
           <div className="h-full aspect-[3/2]">
diff --git a/src/components/RecorderChip.tsx b/src/components/RecorderChip.tsx
index 4a5a324..de7c824 100644
--- a/src/components/RecorderChip.tsx
+++ b/src/components/RecorderChip.tsx
@@ -1,9 +1,11 @@
-import Chip from "components/Chip";
+import { Chip } from "components/Chip";
 import { RecorderChipFragment } from "graphql/generated";
-import { AppStaticProps } from "queries/getAppStaticProps";
-import Img, { ImageQuality } from "./Img";
-import Markdawn from "./Markdown/Markdawn";
-import ToolTip from "./ToolTip";
+import { AppStaticProps } from "graphql/getAppStaticProps";
+import { ImageQuality } from "helpers/img";
+import { Immutable } from "helpers/types";
+import { Img } from "./Img";
+import { Markdawn } from "./Markdown/Markdawn";
+import { ToolTip } from "./ToolTip";
 
 interface Props {
   className?: string;
@@ -11,7 +13,7 @@ interface Props {
   langui: AppStaticProps["langui"];
 }
 
-export default function RecorderChip(props: Props): JSX.Element {
+export function RecorderChip(props: Immutable<Props>): JSX.Element {
   const { recorder, langui } = props;
   return (
     <ToolTip
@@ -49,10 +51,7 @@ export default function RecorderChip(props: Props): JSX.Element {
               )}
             </div>
           </div>
-
           {recorder.bio?.[0] && <Markdawn text={recorder.bio[0].bio ?? ""} />}
-
-          {/* <Button className="cursor-not-allowed">View profile</Button> */}
         </div>
       }
       placement="top"
diff --git a/src/components/SVG.tsx b/src/components/SVG.tsx
index a54a111..0e37899 100644
--- a/src/components/SVG.tsx
+++ b/src/components/SVG.tsx
@@ -1,3 +1,4 @@
+import { Immutable } from "helpers/types";
 import Image from "next/image";
 
 interface Props {
@@ -6,7 +7,7 @@ interface Props {
   className?: string;
 }
 
-export default function SVG(props: Props): JSX.Element {
+export function SVG(props: Immutable<Props>): JSX.Element {
   return (
     <div className={props.className}>
       <Image
diff --git a/src/components/ThumbnailHeader.tsx b/src/components/ThumbnailHeader.tsx
index 7512e09..40f7724 100644
--- a/src/components/ThumbnailHeader.tsx
+++ b/src/components/ThumbnailHeader.tsx
@@ -1,36 +1,31 @@
-import Chip from "components/Chip";
-import Img, { ImageQuality } from "components/Img";
-import InsetBox from "components/InsetBox";
-import Markdawn from "components/Markdown/Markdawn";
-import { GetContentQuery, UploadImageFragment } from "graphql/generated";
-import { AppStaticProps } from "queries/getAppStaticProps";
-import { prettyinlineTitle, prettySlug, slugify } from "queries/helpers";
+import { Chip } from "components/Chip";
+import { Img } from "components/Img";
+import { InsetBox } from "components/InsetBox";
+import { Markdawn } from "components/Markdown/Markdawn";
+import { GetContentTextQuery, UploadImageFragment } from "graphql/generated";
+import { AppStaticProps } from "graphql/getAppStaticProps";
+import { prettyinlineTitle, prettySlug, slugify } from "helpers/formatters";
+import { getAssetURL, ImageQuality } from "helpers/img";
+import { Immutable } from "helpers/types";
+import { useLightBox } from "hooks/useLightBox";
 
 interface Props {
   pre_title?: string | null | undefined;
   title: string | null | undefined;
   subtitle?: string | null | undefined;
   description?: string | null | undefined;
-  type?: Exclude<
-    Exclude<
-      GetContentQuery["contents"],
-      null | undefined
-    >["data"][number]["attributes"],
-    null | undefined
+  type?: NonNullable<
+    NonNullable<GetContentTextQuery["contents"]>["data"][number]["attributes"]
   >["type"];
-  categories?: Exclude<
-    Exclude<
-      GetContentQuery["contents"],
-      null | undefined
-    >["data"][number]["attributes"],
-    null | undefined
+  categories?: NonNullable<
+    NonNullable<GetContentTextQuery["contents"]>["data"][number]["attributes"]
   >["categories"];
   thumbnail?: UploadImageFragment | null | undefined;
   langui: AppStaticProps["langui"];
   languageSwitcher?: JSX.Element;
 }
 
-export default function ThumbnailHeader(props: Props): JSX.Element {
+export function ThumbnailHeader(props: Immutable<Props>): JSX.Element {
   const {
     langui,
     pre_title,
@@ -43,16 +38,21 @@ export default function ThumbnailHeader(props: Props): JSX.Element {
     languageSwitcher,
   } = props;
 
+  const [openLightBox, LightBox] = useLightBox();
+
   return (
     <>
+      <LightBox />
       <div className="grid place-items-center gap-12 mb-12">
         <div className="drop-shadow-shade-lg">
           {thumbnail ? (
             <Img
-              className=" rounded-xl"
+              className="rounded-xl cursor-pointer"
               image={thumbnail}
               quality={ImageQuality.Medium}
-              priority
+              onClick={() => {
+                openLightBox([getAssetURL(thumbnail.url, ImageQuality.Large)]);
+              }}
             />
           ) : (
             <div className="w-96 aspect-[4/3] bg-light rounded-xl"></div>
diff --git a/src/components/ToolTip.tsx b/src/components/ToolTip.tsx
index fb5a82f..63dd291 100644
--- a/src/components/ToolTip.tsx
+++ b/src/components/ToolTip.tsx
@@ -3,13 +3,13 @@ import "tippy.js/animations/scale-subtle.css";
 
 interface Props extends TippyProps {}
 
-export default function ToolTip(props: Props): JSX.Element {
-  const newProps = { ...props };
-
-  // Set defaults
-  if (newProps.delay === undefined) newProps.delay = [150, 0];
-  if (newProps.interactive === undefined) newProps.interactive = true;
-  if (newProps.animation === undefined) newProps.animation = "scale-subtle";
+export function ToolTip(props: Props): JSX.Element {
+  const newProps: Props = {
+    delay: [150, 0],
+    interactive: true,
+    animation: "scale-subtle",
+    ...props,
+  };
 
   return (
     <Tippy className={`text-[80%] ${newProps.className}`} {...newProps}>
diff --git a/src/components/Wiki/Chronology/ChronologyItemComponent.tsx b/src/components/Wiki/Chronology/ChronologyItemComponent.tsx
index ef1cb47..7f5c4c0 100644
--- a/src/components/Wiki/Chronology/ChronologyItemComponent.tsx
+++ b/src/components/Wiki/Chronology/ChronologyItemComponent.tsx
@@ -1,22 +1,20 @@
-import Chip from "components/Chip";
-import ToolTip from "components/ToolTip";
+import { Chip } from "components/Chip";
+import { ToolTip } from "components/ToolTip";
 import {
   Enum_Componenttranslationschronologyitem_Status,
   GetChronologyItemsQuery,
 } from "graphql/generated";
-import { AppStaticProps } from "queries/getAppStaticProps";
-import { getStatusDescription } from "queries/helpers";
+import { AppStaticProps } from "graphql/getAppStaticProps";
+import { getStatusDescription } from "helpers/others";
+import { Immutable } from "helpers/types";
 
 interface Props {
-  item: Exclude<
-    GetChronologyItemsQuery["chronologyItems"],
-    null | undefined
-  >["data"][number];
+  item: NonNullable<GetChronologyItemsQuery["chronologyItems"]>["data"][number];
   displayYear: boolean;
   langui: AppStaticProps["langui"];
 }
 
-export default function ChronologyItemComponent(props: Props): JSX.Element {
+export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
   const { langui } = props;
 
   function generateAnchor(
@@ -71,7 +69,8 @@ export default function ChronologyItemComponent(props: Props): JSX.Element {
   if (props.item.attributes) {
     return (
       <div
-        className="grid place-content-start grid-rows-[auto_1fr] grid-cols-[4em] py-4 px-8 rounded-2xl target:bg-mid target:py-8 target:my-4"
+        className="grid place-content-start grid-rows-[auto_1fr] grid-cols-[4em]
+        py-4 px-8 rounded-2xl target:bg-mid target:py-8 target:my-4"
         id={generateAnchor(
           props.item.attributes.year,
           props.item.attributes.month,
@@ -100,7 +99,10 @@ export default function ChronologyItemComponent(props: Props): JSX.Element {
                     <>
                       {translation && (
                         <>
-                          <div className="place-items-start place-content-start grid grid-flow-col gap-2">
+                          <div
+                            className="place-items-start
+                            place-content-start grid grid-flow-col gap-2"
+                          >
                             {translation.status !==
                               Enum_Componenttranslationschronologyitem_Status.Done && (
                               <ToolTip
@@ -125,7 +127,8 @@ export default function ChronologyItemComponent(props: Props): JSX.Element {
                               className={
                                 event.translations &&
                                 event.translations.length > 1
-                                  ? "before:content-['-'] before:text-dark before:inline-block before:w-4 before:ml-[-1em] mt-2 whitespace-pre-line"
+                                  ? `before:content-['-'] before:text-dark before:inline-block
+                                    before:w-4 before:ml-[-1em] mt-2 whitespace-pre-line`
                                   : "whitespace-pre-line"
                               }
                             >
diff --git a/src/components/Wiki/Chronology/ChronologyYearComponent.tsx b/src/components/Wiki/Chronology/ChronologyYearComponent.tsx
index 69ba5b6..c9b6daf 100644
--- a/src/components/Wiki/Chronology/ChronologyYearComponent.tsx
+++ b/src/components/Wiki/Chronology/ChronologyYearComponent.tsx
@@ -1,17 +1,17 @@
-import ChronologyItemComponent from "components/Wiki/Chronology/ChronologyItemComponent";
+import { ChronologyItemComponent } from "components/Wiki/Chronology/ChronologyItemComponent";
 import { GetChronologyItemsQuery } from "graphql/generated";
-import { AppStaticProps } from "queries/getAppStaticProps";
+import { AppStaticProps } from "graphql/getAppStaticProps";
+import { Immutable } from "helpers/types";
 
 interface Props {
   year: number;
-  items: Exclude<
-    GetChronologyItemsQuery["chronologyItems"],
-    null | undefined
+  items: NonNullable<
+    GetChronologyItemsQuery["chronologyItems"]
   >["data"][number][];
   langui: AppStaticProps["langui"];
 }
 
-export default function ChronologyYearComponent(props: Props): JSX.Element {
+export function ChronologyYearComponent(props: Immutable<Props>): JSX.Element {
   const { langui } = props;
 
   return (
diff --git a/src/contexts/AppLayoutContext.tsx b/src/contexts/AppLayoutContext.tsx
index 79a750b..f9bc26e 100644
--- a/src/contexts/AppLayoutContext.tsx
+++ b/src/contexts/AppLayoutContext.tsx
@@ -1,6 +1,7 @@
-import useDarkMode from "hooks/useDarkMode";
-import useStateWithLocalStorage from "hooks/useStateWithLocalStorage";
-import React, { ReactNode, useContext } from "react";
+import { Immutable } from "helpers/types";
+import { useDarkMode } from "hooks/useDarkMode";
+import { useStateWithLocalStorage } from "hooks/useStateWithLocalStorage";
+import React, { ReactNode, useContext, useState } from "react";
 
 interface AppLayoutState {
   subPanelOpen: boolean | undefined;
@@ -14,6 +15,7 @@ interface AppLayoutState {
   currency: string | undefined;
   playerName: string | undefined;
   preferredLanguages: string[] | undefined;
+  menuGestures: boolean;
   setSubPanelOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
   setConfigPanelOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
   setMainPanelReduced: React.Dispatch<
@@ -31,6 +33,7 @@ interface AppLayoutState {
   setPreferredLanguages: React.Dispatch<
     React.SetStateAction<string[] | undefined>
   >;
+  setMenuGestures: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 /* eslint-disable @typescript-eslint/no-empty-function */
@@ -46,6 +49,7 @@ const initialState: AppLayoutState = {
   currency: "USD",
   playerName: "",
   preferredLanguages: [],
+  menuGestures: true,
   setSubPanelOpen: () => {},
   setMainPanelReduced: () => {},
   setMainPanelOpen: () => {},
@@ -57,6 +61,7 @@ const initialState: AppLayoutState = {
   setCurrency: () => {},
   setPlayerName: () => {},
   setPreferredLanguages: () => {},
+  setMenuGestures: () => {},
 };
 /* eslint-enable @typescript-eslint/no-empty-function */
 
@@ -72,7 +77,7 @@ interface Props {
   children: ReactNode;
 }
 
-export function AppContextProvider(props: Props): JSX.Element {
+export function AppContextProvider(props: Immutable<Props>): JSX.Element {
   const [subPanelOpen, setSubPanelOpen] = useStateWithLocalStorage<
     boolean | undefined
   >("subPanelOpen", initialState.subPanelOpen);
@@ -115,6 +120,8 @@ export function AppContextProvider(props: Props): JSX.Element {
     string[] | undefined
   >("preferredLanguages", initialState.preferredLanguages);
 
+  const [menuGestures, setMenuGestures] = useState(false);
+
   return (
     <AppContext.Provider
       value={{
@@ -129,6 +136,7 @@ export function AppContextProvider(props: Props): JSX.Element {
         currency,
         playerName,
         preferredLanguages,
+        menuGestures,
         setSubPanelOpen,
         setConfigPanelOpen,
         setMainPanelReduced,
@@ -140,6 +148,7 @@ export function AppContextProvider(props: Props): JSX.Element {
         setCurrency,
         setPlayerName,
         setPreferredLanguages,
+        setMenuGestures,
       }}
     >
       {props.children}
diff --git a/src/queries/getAppStaticProps.ts b/src/graphql/getAppStaticProps.ts
similarity index 60%
rename from src/queries/getAppStaticProps.ts
rename to src/graphql/getAppStaticProps.ts
index ed9179a..fee9a66 100644
--- a/src/queries/getAppStaticProps.ts
+++ b/src/graphql/getAppStaticProps.ts
@@ -4,22 +4,18 @@ import {
   GetWebsiteInterfaceQuery,
 } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
+import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
 
-export interface AppStaticProps {
-  langui: Exclude<
-    Exclude<
-      GetWebsiteInterfaceQuery["websiteInterfaces"],
-      null | undefined
-    >["data"][number]["attributes"],
-    null | undefined
+export type AppStaticProps = Immutable<{
+  langui: NonNullable<
+    NonNullable<
+      GetWebsiteInterfaceQuery["websiteInterfaces"]
+    >["data"][number]["attributes"]
   >;
-  currencies: Exclude<
-    GetCurrenciesQuery["currencies"],
-    null | undefined
-  >["data"];
-  languages: Exclude<GetLanguagesQuery["languages"], null | undefined>["data"];
-}
+  currencies: NonNullable<GetCurrenciesQuery["currencies"]>["data"];
+  languages: NonNullable<GetLanguagesQuery["languages"]>["data"];
+}>;
 
 export async function getAppStaticProps(
   context: GetStaticPropsContext
@@ -50,9 +46,11 @@ export async function getAppStaticProps(
     })
   ).websiteInterfaces?.data[0].attributes;
 
-  return {
-    langui: langui ?? ({} as AppStaticProps["langui"]),
-    currencies: currencies?.data ?? ({} as AppStaticProps["currencies"]),
-    languages: languages?.data ?? ({} as AppStaticProps["languages"]),
+  const appStaticProps: AppStaticProps = {
+    langui: langui ?? {},
+    currencies: currencies?.data ?? [],
+    languages: languages?.data ?? [],
   };
+
+  return appStaticProps;
 }
diff --git a/src/graphql/getPostStaticProps.ts b/src/graphql/getPostStaticProps.ts
new file mode 100644
index 0000000..4913b9c
--- /dev/null
+++ b/src/graphql/getPostStaticProps.ts
@@ -0,0 +1,32 @@
+import { PostWithTranslations } from "helpers/types";
+import { GetStaticPropsContext } from "next";
+import { AppStaticProps, getAppStaticProps } from "./getAppStaticProps";
+import { getReadySdk } from "./sdk";
+
+export interface PostStaticProps extends AppStaticProps {
+  post: PostWithTranslations;
+}
+
+export function getPostStaticProps(
+  slug: string
+): (
+  context: GetStaticPropsContext
+) => Promise<{ notFound: boolean } | { props: PostStaticProps }> {
+  return async (context: GetStaticPropsContext) => {
+    const sdk = getReadySdk();
+    const post = await sdk.getPost({
+      slug: slug,
+      language_code: context.locale ?? "en",
+    });
+    if (post.posts?.data[0].attributes?.translations) {
+      const props: PostStaticProps = {
+        ...(await getAppStaticProps(context)),
+        post: post.posts.data[0].attributes as PostWithTranslations,
+      };
+      return {
+        props: props,
+      };
+    }
+    return { notFound: true };
+  };
+}
diff --git a/src/graphql/operations/devGetContents.graphql b/src/graphql/operations/devGetContents.graphql
index 8047400..030ab45 100644
--- a/src/graphql/operations/devGetContents.graphql
+++ b/src/graphql/operations/devGetContents.graphql
@@ -14,7 +14,13 @@ query devGetContents {
             id
           }
         }
-        titles {
+
+        ranged_contents {
+          data {
+            id
+          }
+        }
+        translations {
           language {
             data {
               id
@@ -22,62 +28,36 @@ query devGetContents {
           }
           title
           description
-        }
-        ranged_contents {
-          data {
-            id
-          }
-        }
-        text_set {
-          language {
-            data {
-              id
+          text_set {
+            source_language {
+              data {
+                id
+              }
             }
-          }
-          source_language {
-            data {
-              id
+            status
+            transcribers {
+              data {
+                id
+              }
             }
-          }
-          status
-          transcribers {
-            data {
-              id
+            translators {
+              data {
+                id
+              }
             }
-          }
-          translators {
-            data {
-              id
+            proofreaders {
+              data {
+                id
+              }
             }
+            text
           }
-          proofreaders {
-            data {
-              id
-            }
-          }
-          text
-        }
-        video_set {
-          id
-        }
-        audio_set {
-          id
         }
         thumbnail {
           data {
             id
           }
         }
-        next_recommended {
-          data {
-            id
-          }
-        }
-        previous_recommended {
-          data {
-            id
-          }
-        }
       }
     }
   }
diff --git a/src/graphql/operations/getContent.graphql b/src/graphql/operations/getContent.graphql
deleted file mode 100644
index 1265734..0000000
--- a/src/graphql/operations/getContent.graphql
+++ /dev/null
@@ -1,77 +0,0 @@
-query getContent($slug: String, $language_code: String) {
-  contents(filters: { slug: { eq: $slug } }) {
-    data {
-      attributes {
-        slug
-        titles(filters: { language: { code: { eq: $language_code } } }) {
-          pre_title
-          title
-          subtitle
-          description
-        }
-        categories {
-          data {
-            id
-            attributes {
-              name
-              short
-            }
-          }
-        }
-        type {
-          data {
-            attributes {
-              slug
-              titles(filters: { language: { code: { eq: $language_code } } }) {
-                title
-              }
-            }
-          }
-        }
-        ranged_contents {
-          data {
-            id
-            attributes {
-              slug
-              scan_set {
-                id
-              }
-              library_item {
-                data {
-                  attributes {
-                    slug
-                    title
-                    subtitle
-                    thumbnail {
-                      data {
-                        attributes {
-                          ...uploadImage
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-        text_set {
-          id
-        }
-        video_set {
-          id
-        }
-        audio_set {
-          id
-        }
-        thumbnail {
-          data {
-            attributes {
-              ...uploadImage
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/graphql/operations/getContentText.graphql b/src/graphql/operations/getContentText.graphql
index c35af05..c7881ce 100644
--- a/src/graphql/operations/getContentText.graphql
+++ b/src/graphql/operations/getContentText.graphql
@@ -4,12 +4,7 @@ query getContentText($slug: String, $language_code: String) {
       id
       attributes {
         slug
-        titles {
-          pre_title
-          title
-          subtitle
-          description
-        }
+
         categories {
           data {
             id
@@ -56,9 +51,7 @@ query getContentText($slug: String, $language_code: String) {
             }
           }
         }
-        text_set {
-          status
-          text
+        translations {
           language {
             data {
               attributes {
@@ -66,39 +59,48 @@ query getContentText($slug: String, $language_code: String) {
               }
             }
           }
-          source_language {
-            data {
-              attributes {
-                code
+          pre_title
+          title
+          subtitle
+          description
+          text_set {
+            status
+            text
+            source_language {
+              data {
+                attributes {
+                  code
+                }
               }
             }
-          }
-          transcribers {
-            data {
-              id
-              attributes {
-                ...recorderChip
+            transcribers {
+              data {
+                id
+                attributes {
+                  ...recorderChip
+                }
               }
             }
-          }
-          translators {
-            data {
-              id
-              attributes {
-                ...recorderChip
+            translators {
+              data {
+                id
+                attributes {
+                  ...recorderChip
+                }
               }
             }
-          }
-          proofreaders {
-            data {
-              id
-              attributes {
-                ...recorderChip
+            proofreaders {
+              data {
+                id
+                attributes {
+                  ...recorderChip
+                }
               }
             }
+            notes
           }
-          notes
         }
+
         thumbnail {
           data {
             attributes {
@@ -106,78 +108,47 @@ query getContentText($slug: String, $language_code: String) {
             }
           }
         }
-        previous_recommended {
+        group {
           data {
             attributes {
-              slug
-              titles(filters: { language: { code: { eq: $language_code } } }) {
-                pre_title
-                title
-                subtitle
-              }
-              categories {
-                data {
-                  id
-                  attributes {
-                    short
-                  }
-                }
-              }
-              type {
+              contents {
                 data {
                   attributes {
                     slug
-                    titles(
-                      filters: { language: { code: { eq: $language_code } } }
-                    ) {
+                    translations {
+                      pre_title
                       title
+                      subtitle
                     }
-                  }
-                }
-              }
-              thumbnail {
-                data {
-                  attributes {
-                    ...uploadImage
-                  }
-                }
-              }
-            }
-          }
-        }
-        next_recommended {
-          data {
-            attributes {
-              slug
-              titles(filters: { language: { code: { eq: $language_code } } }) {
-                pre_title
-                title
-                subtitle
-              }
-              categories {
-                data {
-                  id
-                  attributes {
-                    short
-                  }
-                }
-              }
-              type {
-                data {
-                  attributes {
-                    slug
-                    titles(
-                      filters: { language: { code: { eq: $language_code } } }
-                    ) {
-                      title
+                    categories {
+                      data {
+                        id
+                        attributes {
+                          short
+                        }
+                      }
+                    }
+                    type {
+                      data {
+                        attributes {
+                          slug
+                          titles(
+                            filters: {
+                              language: { code: { eq: $language_code } }
+                            }
+                          ) {
+                            title
+                          }
+                        }
+                      }
+                    }
+                    thumbnail {
+                      data {
+                        attributes {
+                          ...uploadImage
+                        }
+                      }
                     }
-                  }
-                }
-              }
-              thumbnail {
-                data {
-                  attributes {
-                    ...uploadImage
                   }
                 }
               }
diff --git a/src/graphql/operations/getContents.graphql b/src/graphql/operations/getContents.graphql
index 3801b8c..4dfa7d4 100644
--- a/src/graphql/operations/getContents.graphql
+++ b/src/graphql/operations/getContents.graphql
@@ -4,7 +4,7 @@ query getContents($language_code: String) {
       id
       attributes {
         slug
-        titles(filters: { language: { code: { eq: $language_code } } }) {
+        translations {
           pre_title
           title
           subtitle
@@ -55,14 +55,17 @@ query getContents($language_code: String) {
             }
           }
         }
-        text_set {
-          id
-        }
-        video_set {
-          id
-        }
-        audio_set {
-          id
+        group {
+          data {
+            attributes {
+              combine
+              contents {
+                data {
+                  id
+                }
+              }
+            }
+          }
         }
         thumbnail {
           data {
diff --git a/src/graphql/operations/getLibraryItem.graphql b/src/graphql/operations/getLibraryItem.graphql
index dd20e9f..5f588d6 100644
--- a/src/graphql/operations/getLibraryItem.graphql
+++ b/src/graphql/operations/getLibraryItem.graphql
@@ -362,22 +362,18 @@ query getLibraryItem($slug: String, $language_code: String) {
                         }
                       }
                     }
-                    titles(
-                      filters: { language: { code: { eq: $language_code } } }
-                    ) {
+                    translations {
+                      language {
+                        data {
+                          attributes {
+                            code
+                          }
+                        }
+                      }
                       pre_title
                       title
                       subtitle
                     }
-                    text_set {
-                      id
-                    }
-                    video_set {
-                      id
-                    }
-                    audio_set {
-                      id
-                    }
                   }
                 }
               }
diff --git a/src/graphql/operations/getWebsiteInterface.graphql b/src/graphql/operations/getWebsiteInterface.graphql
index 2b66963..8051f7d 100644
--- a/src/graphql/operations/getWebsiteInterface.graphql
+++ b/src/graphql/operations/getWebsiteInterface.graphql
@@ -132,6 +132,19 @@ query getWebsiteInterface($language_code: String) {
         response_invalid_code
         response_invalid_email
         response_email_success
+        always_show_info
+        item_not_available
+        primary_language
+        secondary_language
+        combine_related_contents
+        previous_content
+        followup_content
+        videos
+        view_on
+        channel
+        subscribers
+        description
+        available_at
       }
     }
   }
diff --git a/src/helpers/contents.ts b/src/helpers/contents.ts
new file mode 100644
index 0000000..00967b9
--- /dev/null
+++ b/src/helpers/contents.ts
@@ -0,0 +1,31 @@
+import { ContentWithTranslations, Immutable } from "./types";
+
+type Group = Immutable<
+  NonNullable<
+    NonNullable<
+      NonNullable<
+        NonNullable<ContentWithTranslations["group"]>["data"]
+      >["attributes"]
+    >["contents"]
+  >["data"]
+>;
+
+export function getPreviousContent(group: Group, currentSlug: string) {
+  for (let index = 0; index < group.length; index += 1) {
+    const content = group[index];
+    if (content.attributes?.slug === currentSlug && index > 0) {
+      return group[index - 1];
+    }
+  }
+  return undefined;
+}
+
+export function getNextContent(group: Group, currentSlug: string) {
+  for (let index = 0; index < group.length; index += 1) {
+    const content = group[index];
+    if (content.attributes?.slug === currentSlug && index < group.length - 1) {
+      return group[index + 1];
+    }
+  }
+  return undefined;
+}
diff --git a/src/queries/helpers.ts b/src/helpers/formatters.ts
similarity index 63%
rename from src/queries/helpers.ts
rename to src/helpers/formatters.ts
index b20ad97..7b00940 100644
--- a/src/queries/helpers.ts
+++ b/src/helpers/formatters.ts
@@ -1,20 +1,9 @@
-import {
-  getAssetURL,
-  getImgSizesByQuality,
-  ImageQuality,
-} from "components/Img";
-import {
-  DatePickerFragment,
-  Enum_Componentsetstextset_Status,
-  GetCurrenciesQuery,
-  GetLibraryItemQuery,
-  GetLibraryItemScansQuery,
-  PricePickerFragment,
-  UploadImageFragment,
-} from "graphql/generated";
-import { AppStaticProps } from "./getAppStaticProps";
+import { DatePickerFragment, PricePickerFragment } from "graphql/generated";
+import { AppStaticProps } from "../graphql/getAppStaticProps";
+import { convertPrice } from "./numbers";
+import { Immutable } from "./types";
 
-export function prettyDate(datePicker: DatePickerFragment): string {
+export function prettyDate(datePicker: Immutable<DatePickerFragment>): string {
   let result = "";
   if (datePicker.year) result += datePicker.year.toString();
   if (datePicker.month)
@@ -25,7 +14,7 @@ export function prettyDate(datePicker: DatePickerFragment): string {
 }
 
 export function prettyPrice(
-  pricePicker: PricePickerFragment,
+  pricePicker: Immutable<PricePickerFragment>,
   currencies: AppStaticProps["currencies"],
   targetCurrencyCode?: string
 ): string {
@@ -45,25 +34,6 @@ export function prettyPrice(
   return result;
 }
 
-export function convertPrice(
-  pricePicker: PricePickerFragment,
-  targetCurrency: Exclude<
-    GetCurrenciesQuery["currencies"],
-    null | undefined
-  >["data"][number]
-): number {
-  if (
-    pricePicker.amount &&
-    pricePicker.currency?.data?.attributes &&
-    targetCurrency.attributes
-  )
-    return (
-      (pricePicker.amount * pricePicker.currency.data.attributes.rate_to_usd) /
-      targetCurrency.attributes.rate_to_usd
-    );
-  return 0;
-}
-
 export function prettySlug(slug?: string, parentSlug?: string): string {
   if (slug) {
     if (parentSlug && slug.startsWith(parentSlug))
@@ -88,7 +58,7 @@ export function prettyinlineTitle(
 }
 
 export function prettyItemType(
-  metadata: any,
+  metadata: Immutable<any>,
   langui: AppStaticProps["langui"]
 ): string | undefined | null {
   switch (metadata.__typename) {
@@ -110,7 +80,7 @@ export function prettyItemType(
 }
 
 export function prettyItemSubType(
-  metadata:
+  metadata: Immutable<
     | {
         __typename: "ComponentMetadataAudio";
         subtype?: {
@@ -187,6 +157,7 @@ export function prettyItemSubType(
       }
     | { __typename: "Error" }
     | null
+  >
 ): string {
   if (metadata) {
     switch (metadata.__typename) {
@@ -300,87 +271,6 @@ export function capitalizeString(string: string): string {
   return words.join(" ");
 }
 
-export function convertMmToInch(mm: number | null | undefined): string {
-  return mm ? (mm * 0.03937008).toPrecision(3) : "";
-}
-
-export interface OgImage {
-  image: string;
-  width: number;
-  height: number;
-  alt: string;
-}
-
-export function getOgImage(
-  quality: ImageQuality,
-  image: UploadImageFragment
-): OgImage {
-  const imgSize = getImgSizesByQuality(
-    image.width ?? 0,
-    image.height ?? 0,
-    quality ? quality : ImageQuality.Small
-  );
-  return {
-    image: getAssetURL(image.url, quality),
-    width: imgSize.width,
-    height: imgSize.height,
-    alt: image.alternativeText || "",
-  };
-}
-
-export function sortContent(
-  contents:
-    | Exclude<
-        Exclude<
-          GetLibraryItemQuery["libraryItems"],
-          null | undefined
-        >["data"][number]["attributes"],
-        null | undefined
-      >["contents"]
-    | Exclude<
-        Exclude<
-          GetLibraryItemScansQuery["libraryItems"],
-          null | undefined
-        >["data"][number]["attributes"],
-        null | undefined
-      >["contents"]
-) {
-  contents?.data.sort((a, b) => {
-    if (
-      a.attributes?.range[0]?.__typename === "ComponentRangePageRange" &&
-      b.attributes?.range[0]?.__typename === "ComponentRangePageRange"
-    ) {
-      return (
-        a.attributes.range[0].starting_page -
-        b.attributes.range[0].starting_page
-      );
-    }
-    return 0;
-  });
-}
-
-export function getStatusDescription(
-  status: string,
-  langui: AppStaticProps["langui"]
-): string | null | undefined {
-  switch (status) {
-    case Enum_Componentsetstextset_Status.Incomplete:
-      return langui.status_incomplete;
-
-    case Enum_Componentsetstextset_Status.Draft:
-      return langui.status_draft;
-
-    case Enum_Componentsetstextset_Status.Review:
-      return langui.status_review;
-
-    case Enum_Componentsetstextset_Status.Done:
-      return langui.status_done;
-
-    default:
-      return "";
-  }
-}
-
 export function slugify(string: string | undefined): string {
   if (!string) {
     return "";
@@ -400,51 +290,3 @@ export function slugify(string: string | undefined): string {
     .trim()
     .replace(/ /gu, "-");
 }
-
-export function randomInt(min: number, max: number) {
-  return Math.floor(Math.random() * (max - min)) + min;
-}
-
-export function getLocalesFromLanguages(
-  languages?: Array<{
-    language?: {
-      data?: {
-        attributes?: { code: string } | null;
-      } | null;
-    } | null;
-  } | null> | null
-) {
-  return languages
-    ? languages.map((language) => language?.language?.data?.attributes?.code)
-    : [];
-}
-
-export function getVideoThumbnailURL(uid: string): string {
-  return `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.webp`;
-}
-
-export function getVideoFile(uid: string): string {
-  return `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.mp4`;
-}
-
-export function arrayMove<T>(arr: T[], old_index: number, new_index: number) {
-  arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
-  return arr;
-}
-
-export function getPreferredLanguage(
-  preferredLanguages: (string | undefined)[],
-  availableLanguages: Map<string, number>
-): number | undefined {
-  for (const locale of preferredLanguages) {
-    if (locale && availableLanguages.has(locale)) {
-      return availableLanguages.get(locale);
-    }
-  }
-  return undefined;
-}
-
-export function isInteger(value: string): boolean {
-  // eslint-disable-next-line require-unicode-regexp
-  return /^[+-]?[0-9]+$/.test(value);
-}
diff --git a/src/helpers/img.ts b/src/helpers/img.ts
new file mode 100644
index 0000000..686edbd
--- /dev/null
+++ b/src/helpers/img.ts
@@ -0,0 +1,88 @@
+import { UploadImageFragment } from "graphql/generated";
+import { Immutable } from "./types";
+
+export enum ImageQuality {
+  Small = "small",
+  Medium = "medium",
+  Large = "large",
+  Og = "og",
+}
+
+export interface OgImage {
+  image: string;
+  width: number;
+  height: number;
+  alt: string;
+}
+
+export function getAssetFilename(path: string): string {
+  let result = path.split("/");
+  result = result[result.length - 1].split(".");
+  result = result
+    .splice(0, result.length - 1)
+    .join(".")
+    .split("_");
+  return result[0];
+}
+
+export function getAssetURL(
+  url: string,
+  quality: Immutable<ImageQuality>
+): string {
+  let newUrl = url;
+  newUrl = newUrl.replace(/^\/uploads/u, `/${quality}`);
+  newUrl = newUrl.replace(/.jpg$/u, ".webp");
+  newUrl = newUrl.replace(/.jpeg$/u, ".webp");
+  newUrl = newUrl.replace(/.png$/u, ".webp");
+  if (quality === ImageQuality.Og) newUrl = newUrl.replace(/.webp$/u, ".jpg");
+  return process.env.NEXT_PUBLIC_URL_IMG + newUrl;
+}
+
+export function getImgSizesByMaxSize(
+  width: number,
+  height: number,
+  maxSize: number
+): { width: number; height: number } {
+  if (width > height) {
+    if (width < maxSize) return { width: width, height: height };
+    return { width: maxSize, height: (height / width) * maxSize };
+  }
+  if (height < maxSize) return { width: width, height: height };
+  return { width: (width / height) * maxSize, height: maxSize };
+}
+
+export function getImgSizesByQuality(
+  width: number,
+  height: number,
+  quality: ImageQuality
+): { width: number; height: number } {
+  switch (quality) {
+    case ImageQuality.Og:
+      return getImgSizesByMaxSize(width, height, 512);
+    case ImageQuality.Small:
+      return getImgSizesByMaxSize(width, height, 512);
+    case ImageQuality.Medium:
+      return getImgSizesByMaxSize(width, height, 1024);
+    case ImageQuality.Large:
+      return getImgSizesByMaxSize(width, height, 2048);
+    default:
+      return { width: 0, height: 0 };
+  }
+}
+
+export function getOgImage(
+  quality: Immutable<ImageQuality>,
+  image: Immutable<UploadImageFragment>
+): OgImage {
+  const imgSize = getImgSizesByQuality(
+    image.width ?? 0,
+    image.height ?? 0,
+    quality ? quality : ImageQuality.Small
+  );
+  return {
+    image: getAssetURL(image.url, quality),
+    width: imgSize.width,
+    height: imgSize.height,
+    alt: image.alternativeText || "",
+  };
+}
diff --git a/src/helpers/numbers.ts b/src/helpers/numbers.ts
new file mode 100644
index 0000000..0448cc3
--- /dev/null
+++ b/src/helpers/numbers.ts
@@ -0,0 +1,33 @@
+import { GetCurrenciesQuery, PricePickerFragment } from "graphql/generated";
+import { Immutable } from "./types";
+
+export function convertPrice(
+  pricePicker: Immutable<PricePickerFragment>,
+  targetCurrency: Immutable<
+    NonNullable<GetCurrenciesQuery["currencies"]>["data"][number]
+  >
+): number {
+  if (
+    pricePicker.amount &&
+    pricePicker.currency?.data?.attributes &&
+    targetCurrency.attributes
+  )
+    return (
+      (pricePicker.amount * pricePicker.currency.data.attributes.rate_to_usd) /
+      targetCurrency.attributes.rate_to_usd
+    );
+  return 0;
+}
+
+export function convertMmToInch(mm: number | null | undefined): string {
+  return mm ? (mm * 0.03937008).toPrecision(3) : "";
+}
+
+export function randomInt(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
+export function isInteger(value: string): boolean {
+  // eslint-disable-next-line require-unicode-regexp
+  return /^[+-]?[0-9]+$/.test(value);
+}
diff --git a/src/helpers/others.ts b/src/helpers/others.ts
new file mode 100644
index 0000000..d6f1197
--- /dev/null
+++ b/src/helpers/others.ts
@@ -0,0 +1,66 @@
+import {
+  Enum_Componentsetstextset_Status,
+  GetLibraryItemQuery,
+  GetLibraryItemScansQuery,
+} from "graphql/generated";
+import { AppStaticProps } from "../graphql/getAppStaticProps";
+import { Immutable } from "./types";
+
+type SortContentProps =
+  | NonNullable<
+      NonNullable<
+        GetLibraryItemQuery["libraryItems"]
+      >["data"][number]["attributes"]
+    >["contents"]
+  | NonNullable<
+      NonNullable<
+        GetLibraryItemScansQuery["libraryItems"]
+      >["data"][number]["attributes"]
+    >["contents"];
+
+export function sortContent(contents: Immutable<SortContentProps>) {
+  if (contents) {
+    const newContent = { ...contents } as SortContentProps;
+    newContent?.data.sort((a, b) => {
+      if (
+        a.attributes?.range[0]?.__typename === "ComponentRangePageRange" &&
+        b.attributes?.range[0]?.__typename === "ComponentRangePageRange"
+      ) {
+        return (
+          a.attributes.range[0].starting_page -
+          b.attributes.range[0].starting_page
+        );
+      }
+      return 0;
+    });
+    return newContent as Immutable<SortContentProps>;
+  }
+  return contents;
+}
+
+export function getStatusDescription(
+  status: string,
+  langui: AppStaticProps["langui"]
+): string | null | undefined {
+  switch (status) {
+    case Enum_Componentsetstextset_Status.Incomplete:
+      return langui.status_incomplete;
+
+    case Enum_Componentsetstextset_Status.Draft:
+      return langui.status_draft;
+
+    case Enum_Componentsetstextset_Status.Review:
+      return langui.status_review;
+
+    case Enum_Componentsetstextset_Status.Done:
+      return langui.status_done;
+
+    default:
+      return "";
+  }
+}
+
+export function arrayMove<T>(arr: T[], old_index: number, new_index: number) {
+  arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
+  return arr;
+}
diff --git a/src/helpers/types.ts b/src/helpers/types.ts
new file mode 100644
index 0000000..eb6fe98
--- /dev/null
+++ b/src/helpers/types.ts
@@ -0,0 +1,26 @@
+import { GetContentTextQuery, GetPostQuery } from "graphql/generated";
+import React from "react";
+
+type Post = NonNullable<
+  NonNullable<GetPostQuery["posts"]>["data"][number]["attributes"]
+>;
+
+export interface PostWithTranslations extends Omit<Post, "translations"> {
+  translations: NonNullable<Post["translations"]>;
+}
+
+type Content = NonNullable<
+  NonNullable<GetContentTextQuery["contents"]>["data"][number]["attributes"]
+>;
+
+export interface ContentWithTranslations extends Omit<Content, "translations"> {
+  translations: NonNullable<Content["translations"]>;
+}
+
+type ImmutableBlackList<T> = JSX.Element | React.ReactNode | Function;
+
+export type Immutable<T> = {
+  readonly [K in keyof T]: T[K] extends ImmutableBlackList<T>
+    ? T[K]
+    : Immutable<T[K]>;
+};
diff --git a/src/helpers/videos.ts b/src/helpers/videos.ts
new file mode 100644
index 0000000..fb80203
--- /dev/null
+++ b/src/helpers/videos.ts
@@ -0,0 +1,7 @@
+export function getVideoThumbnailURL(uid: string): string {
+  return `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.webp`;
+}
+
+export function getVideoFile(uid: string): string {
+  return `${process.env.NEXT_PUBLIC_URL_WATCH}/videos/${uid}.mp4`;
+}
diff --git a/src/hooks/useDarkMode.ts b/src/hooks/useDarkMode.ts
index 4705942..72b26ea 100644
--- a/src/hooks/useDarkMode.ts
+++ b/src/hooks/useDarkMode.ts
@@ -1,8 +1,8 @@
 import { useEffect } from "react";
 import { usePrefersDarkMode } from "./useMediaQuery";
-import useStateWithLocalStorage from "./useStateWithLocalStorage";
+import { useStateWithLocalStorage } from "./useStateWithLocalStorage";
 
-export default function useDarkMode(
+export function useDarkMode(
   key: string,
   initialValue: boolean | undefined
 ): [
diff --git a/src/hooks/useLightBox.tsx b/src/hooks/useLightBox.tsx
new file mode 100644
index 0000000..f4b7f4a
--- /dev/null
+++ b/src/hooks/useLightBox.tsx
@@ -0,0 +1,28 @@
+import { LightBox } from "components/LightBox";
+import { useState } from "react";
+
+export function useLightBox(): [
+  (images: string[], index?: number) => void,
+  () => JSX.Element
+] {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxImages, setLightboxImages] = useState([""]);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+
+  return [
+    (images: string[], index = 0) => {
+      setLightboxOpen(true);
+      setLightboxImages(images);
+      setLightboxIndex(index);
+    },
+    () => (
+      <LightBox
+        state={lightboxOpen}
+        setState={setLightboxOpen}
+        images={lightboxImages}
+        index={lightboxIndex}
+        setIndex={setLightboxIndex}
+      />
+    ),
+  ];
+}
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
index 00c90c6..3d999b9 100644
--- a/src/hooks/useMediaQuery.ts
+++ b/src/hooks/useMediaQuery.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-export default function useMediaQuery(query: string): boolean {
+export function useMediaQuery(query: string): boolean {
   function getMatches(query: string): boolean {
     // Prevents SSR issues
     if (typeof window !== "undefined") {
diff --git a/src/hooks/useSmartLanguage.tsx b/src/hooks/useSmartLanguage.tsx
index ec6bf53..4936e97 100644
--- a/src/hooks/useSmartLanguage.tsx
+++ b/src/hooks/useSmartLanguage.tsx
@@ -1,20 +1,32 @@
-import LanguageSwitcher from "components/Inputs/LanguageSwitcher";
+import { LanguageSwitcher } from "components/Inputs/LanguageSwitcher";
 import { useAppLayout } from "contexts/AppLayoutContext";
+import { AppStaticProps } from "graphql/getAppStaticProps";
+import { Immutable } from "helpers/types";
 import { useRouter } from "next/router";
-import { AppStaticProps } from "queries/getAppStaticProps";
-import { getPreferredLanguage } from "queries/helpers";
 import { useEffect, useMemo, useState } from "react";
 
 interface Props<T> {
-  items: T[];
+  items: Immutable<T[]>;
   languages: AppStaticProps["languages"];
-  languageExtractor: (item: T) => string | undefined;
-  transform?: (item: T) => T;
+  languageExtractor: (item: NonNullable<Immutable<T>>) => string | undefined;
+  transform?: (item: NonNullable<Immutable<T>>) => NonNullable<Immutable<T>>;
 }
 
-export default function useSmartLanguage<T>(
+function getPreferredLanguage(
+  preferredLanguages: (string | undefined)[],
+  availableLanguages: Map<string, number>
+): number | undefined {
+  for (const locale of preferredLanguages) {
+    if (locale && availableLanguages.has(locale)) {
+      return availableLanguages.get(locale);
+    }
+  }
+  return undefined;
+}
+
+export function useSmartLanguage<T>(
   props: Props<T>
-): [T | undefined, () => JSX.Element] {
+): [Immutable<T | undefined>, () => JSX.Element] {
   const {
     items,
     languageExtractor,
@@ -28,12 +40,15 @@ export default function useSmartLanguage<T>(
   const [selectedTranslationIndex, setSelectedTranslationIndex] = useState<
     number | undefined
   >();
-  const [selectedTranslation, setSelectedTranslation] = useState<T>();
+  const [selectedTranslation, setSelectedTranslation] =
+    useState<Immutable<T>>();
 
   useEffect(() => {
     items.map((elem, index) => {
-      const result = languageExtractor(elem);
-      if (result !== undefined) availableLocales.set(result, index);
+      if (elem !== null && elem !== undefined) {
+        const result = languageExtractor(elem);
+        if (result !== undefined) availableLocales.set(result, index);
+      }
     });
   }, [availableLocales, items, languageExtractor]);
 
@@ -47,8 +62,9 @@ export default function useSmartLanguage<T>(
   }, [appLayout.preferredLanguages, availableLocales, router.locale]);
 
   useEffect(() => {
-    if (selectedTranslationIndex !== undefined)
+    if (selectedTranslationIndex !== undefined) {
       setSelectedTranslation(transform(items[selectedTranslationIndex]));
+    }
   }, [items, selectedTranslationIndex, transform]);
 
   return [
diff --git a/src/hooks/useStateWithLocalStorage.ts b/src/hooks/useStateWithLocalStorage.ts
index 5981b2e..d32249b 100644
--- a/src/hooks/useStateWithLocalStorage.ts
+++ b/src/hooks/useStateWithLocalStorage.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-export default function useStateWithLocalStorage<T>(
+export function useStateWithLocalStorage<T>(
   key: string,
   initialValue: T
 ): [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>] {
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 6c69fdf..e2ba153 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,14 +1,16 @@
-import AppLayout from "components/AppLayout";
-import ReturnButton, {
+import { AppLayout } from "components/AppLayout";
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel from "components/Panels/ContentPanel";
+import { ContentPanel } from "components/Panels/ContentPanel";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
+import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
 interface Props extends AppStaticProps {}
 
-export default function FourOhFour(props: Props): JSX.Element {
+export default function FourOhFour(props: Immutable<Props>): JSX.Element {
   const { langui } = props;
   const contentPanel = (
     <ContentPanel>
diff --git a/src/pages/500.tsx b/src/pages/500.tsx
index c647c95..a09e9e3 100644
--- a/src/pages/500.tsx
+++ b/src/pages/500.tsx
@@ -1,14 +1,16 @@
-import AppLayout from "components/AppLayout";
-import ReturnButton, {
+import { AppLayout } from "components/AppLayout";
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel from "components/Panels/ContentPanel";
+import { ContentPanel } from "components/Panels/ContentPanel";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
+import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
 interface Props extends AppStaticProps {}
 
-export default function FiveHundred(props: Props): JSX.Element {
+export default function FiveHundred(props: Immutable<Props>): JSX.Element {
   const { langui } = props;
   const contentPanel = (
     <ContentPanel>
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 4c21e31..6c05daa 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -6,7 +6,7 @@ import Document, {
   NextScript,
 } from "next/document";
 
-class MyDocument extends Document {
+export default class MyDocument extends Document {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   static async getInitialProps(ctx: DocumentContext) {
     const initialProps = await Document.getInitialProps(ctx);
@@ -65,5 +65,3 @@ class MyDocument extends Document {
     );
   }
 }
-
-export default MyDocument;
diff --git a/src/pages/about-us/accords-handbook.tsx b/src/pages/about-us/accords-handbook.tsx
index f902502..e35fab1 100644
--- a/src/pages/about-us/accords-handbook.tsx
+++ b/src/pages/about-us/accords-handbook.tsx
@@ -1,13 +1,13 @@
-import PostPage, { Post } from "components/PostPage";
-import { getReadySdk } from "graphql/sdk";
-import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
+import { PostPage } from "components/PostPage";
+import {
+  getPostStaticProps,
+  PostStaticProps,
+} from "graphql/getPostStaticProps";
+import { Immutable } from "helpers/types";
 
-interface Props extends AppStaticProps {
-  post: Post;
-}
-
-export default function AccordsHandbook(props: Props): JSX.Element {
+export default function AccordsHandbook(
+  props: Immutable<PostStaticProps>
+): JSX.Element {
   const { post, langui, languages, currencies } = props;
   return (
     <PostPage
@@ -23,21 +23,4 @@ export default function AccordsHandbook(props: Props): JSX.Element {
   );
 }
 
-export async function getStaticProps(
-  context: GetStaticPropsContext
-): Promise<{ notFound: boolean } | { props: Props }> {
-  const sdk = getReadySdk();
-  const slug = "accords-handbook";
-  const post = await sdk.getPost({
-    slug: slug,
-    language_code: context.locale ?? "en",
-  });
-  if (!post.posts?.data[0].attributes) return { notFound: true };
-  const props: Props = {
-    ...(await getAppStaticProps(context)),
-    post: post.posts.data[0].attributes,
-  };
-  return {
-    props: props,
-  };
-}
+export const getStaticProps = getPostStaticProps("accords-handbook");
diff --git a/src/pages/about-us/contact.tsx b/src/pages/about-us/contact.tsx
index 91f9b92..d79b21d 100644
--- a/src/pages/about-us/contact.tsx
+++ b/src/pages/about-us/contact.tsx
@@ -1,18 +1,18 @@
-import InsetBox from "components/InsetBox";
-import PostPage, { Post } from "components/PostPage";
-import { getReadySdk } from "graphql/sdk";
-import { GetStaticPropsContext } from "next";
+import { InsetBox } from "components/InsetBox";
+import { PostPage } from "components/PostPage";
+import {
+  getPostStaticProps,
+  PostStaticProps,
+} from "graphql/getPostStaticProps";
+import { randomInt } from "helpers/numbers";
+import { Immutable } from "helpers/types";
 import { useRouter } from "next/router";
 import { RequestMailProps, ResponseMailProps } from "pages/api/mail";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-import { randomInt } from "queries/helpers";
 import { useState } from "react";
 
-interface Props extends AppStaticProps {
-  post: Post;
-}
-
-export default function AboutUs(props: Props): JSX.Element {
+export default function AboutUs(
+  props: Immutable<PostStaticProps>
+): JSX.Element {
   const { post, langui, languages, currencies } = props;
 
   const router = useRouter();
@@ -181,21 +181,4 @@ export default function AboutUs(props: Props): JSX.Element {
   );
 }
 
-export async function getStaticProps(
-  context: GetStaticPropsContext
-): Promise<{ notFound: boolean } | { props: Props }> {
-  const sdk = getReadySdk();
-  const slug = "contact";
-  const post = await sdk.getPost({
-    slug: slug,
-    language_code: context.locale ?? "en",
-  });
-  if (!post.posts?.data[0].attributes) return { notFound: true };
-  const props: Props = {
-    ...(await getAppStaticProps(context)),
-    post: post.posts.data[0].attributes,
-  };
-  return {
-    props: props,
-  };
-}
+export const getStaticProps = getPostStaticProps("contact");
diff --git a/src/pages/about-us/index.tsx b/src/pages/about-us/index.tsx
index 750e308..b36e212 100644
--- a/src/pages/about-us/index.tsx
+++ b/src/pages/about-us/index.tsx
@@ -1,13 +1,14 @@
-import AppLayout from "components/AppLayout";
-import NavOption from "components/PanelComponents/NavOption";
-import PanelHeader from "components/PanelComponents/PanelHeader";
-import SubPanel from "components/Panels/SubPanel";
+import { AppLayout } from "components/AppLayout";
+import { NavOption } from "components/PanelComponents/NavOption";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
+import { SubPanel } from "components/Panels/SubPanel";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
+import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
 interface Props extends AppStaticProps {}
 
-export default function AboutUs(props: Props): JSX.Element {
+export default function AboutUs(props: Immutable<Props>): JSX.Element {
   const { langui } = props;
   const subPanel = (
     <SubPanel>
diff --git a/src/pages/about-us/legality.tsx b/src/pages/about-us/legality.tsx
index a6274a1..36cd458 100644
--- a/src/pages/about-us/legality.tsx
+++ b/src/pages/about-us/legality.tsx
@@ -1,13 +1,10 @@
-import PostPage, { Post } from "components/PostPage";
-import { getReadySdk } from "graphql/sdk";
-import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
+import { PostPage } from "components/PostPage";
+import {
+  getPostStaticProps,
+  PostStaticProps,
+} from "graphql/getPostStaticProps";
 
-interface Props extends AppStaticProps {
-  post: Post;
-}
-
-export default function SiteInformation(props: Props): JSX.Element {
+export default function Legality(props: PostStaticProps): JSX.Element {
   const { post, langui, languages, currencies } = props;
   return (
     <PostPage
@@ -23,21 +20,4 @@ export default function SiteInformation(props: Props): JSX.Element {
   );
 }
 
-export async function getStaticProps(
-  context: GetStaticPropsContext
-): Promise<{ notFound: boolean } | { props: Props }> {
-  const sdk = getReadySdk();
-  const slug = "legality";
-  const post = await sdk.getPost({
-    slug: slug,
-    language_code: context.locale ?? "en",
-  });
-  if (!post.posts?.data[0].attributes) return { notFound: true };
-  const props: Props = {
-    ...(await getAppStaticProps(context)),
-    post: post.posts.data[0].attributes,
-  };
-  return {
-    props: props,
-  };
-}
+export const getStaticProps = getPostStaticProps("legality");
diff --git a/src/pages/about-us/sharing-policy.tsx b/src/pages/about-us/sharing-policy.tsx
index ed6ce6e..3174092 100644
--- a/src/pages/about-us/sharing-policy.tsx
+++ b/src/pages/about-us/sharing-policy.tsx
@@ -1,12 +1,10 @@
-import PostPage, { Post } from "components/PostPage";
-import { getReadySdk } from "graphql/sdk";
-import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
+import { PostPage } from "components/PostPage";
+import {
+  getPostStaticProps,
+  PostStaticProps,
+} from "graphql/getPostStaticProps";
 
-interface Props extends AppStaticProps {
-  post: Post;
-}
-export default function SharingPolicy(props: Props): JSX.Element {
+export default function SharingPolicy(props: PostStaticProps): JSX.Element {
   const { post, langui, languages, currencies } = props;
   return (
     <PostPage
@@ -22,21 +20,4 @@ export default function SharingPolicy(props: Props): JSX.Element {
   );
 }
 
-export async function getStaticProps(
-  context: GetStaticPropsContext
-): Promise<{ notFound: boolean } | { props: Props }> {
-  const sdk = getReadySdk();
-  const slug = "sharing-policy";
-  const post = await sdk.getPost({
-    slug: slug,
-    language_code: context.locale ?? "en",
-  });
-  if (!post.posts?.data[0].attributes) return { notFound: true };
-  const props: Props = {
-    ...(await getAppStaticProps(context)),
-    post: post.posts.data[0].attributes,
-  };
-  return {
-    props: props,
-  };
-}
+export const getStaticProps = getPostStaticProps("sharing-policy");
diff --git a/src/pages/api/mail.ts b/src/pages/api/mail.ts
index e874acb..7fb6b00 100644
--- a/src/pages/api/mail.ts
+++ b/src/pages/api/mail.ts
@@ -14,7 +14,7 @@ export interface RequestMailProps {
   formName: string;
 }
 
-export default async function Mail(
+export async function Mail(
   req: NextApiRequest,
   res: NextApiResponse<ResponseMailProps>
 ) {
diff --git a/src/pages/api/revalidate.ts b/src/pages/api/revalidate.ts
index 2b9baea..99673cb 100644
--- a/src/pages/api/revalidate.ts
+++ b/src/pages/api/revalidate.ts
@@ -70,7 +70,7 @@ type ResponseMailProps = {
   revalidated: boolean;
 };
 
-export default async function Mail(
+export async function Mail(
   req: NextApiRequest,
   res: NextApiResponse<ResponseMailProps>
 ) {
diff --git a/src/pages/archives/index.tsx b/src/pages/archives/index.tsx
index 5694feb..8ce723d 100644
--- a/src/pages/archives/index.tsx
+++ b/src/pages/archives/index.tsx
@@ -1,13 +1,14 @@
-import AppLayout from "components/AppLayout";
-import NavOption from "components/PanelComponents/NavOption";
-import PanelHeader from "components/PanelComponents/PanelHeader";
-import SubPanel from "components/Panels/SubPanel";
+import { AppLayout } from "components/AppLayout";
+import { NavOption } from "components/PanelComponents/NavOption";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
+import { SubPanel } from "components/Panels/SubPanel";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
+import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
 interface Props extends AppStaticProps {}
 
-export default function Archives(props: Props): JSX.Element {
+export default function Archives(props: Immutable<Props>): JSX.Element {
   const { langui } = props;
   const subPanel = (
     <SubPanel>
diff --git a/src/pages/archives/videos/c/[uid].tsx b/src/pages/archives/videos/c/[uid].tsx
index 1e66aca..430989b 100644
--- a/src/pages/archives/videos/c/[uid].tsx
+++ b/src/pages/archives/videos/c/[uid].tsx
@@ -1,29 +1,30 @@
-import AppLayout from "components/AppLayout";
-import Switch from "components/Inputs/Switch";
-import PanelHeader from "components/PanelComponents/PanelHeader";
-import ReturnButton, {
+import { AppLayout } from "components/AppLayout";
+import { Switch } from "components/Inputs/Switch";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
-import ThumbnailPreview from "components/PreviewCard";
+import { SubPanel } from "components/Panels/SubPanel";
+import { PreviewCard } from "components/PreviewCard";
 import { GetVideoChannelQuery } from "graphql/generated";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
+import { getVideoThumbnailURL } from "helpers/videos";
 import {
   GetStaticPathsContext,
   GetStaticPathsResult,
   GetStaticPropsContext,
 } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-import { getVideoThumbnailURL } from "queries/helpers";
 import { useState } from "react";
 
 interface Props extends AppStaticProps {
-  channel: Exclude<
-    GetVideoChannelQuery["videoChannels"],
-    null | undefined
+  channel: NonNullable<
+    GetVideoChannelQuery["videoChannels"]
   >["data"][number]["attributes"];
 }
 
@@ -35,7 +36,7 @@ export default function Channel(props: Props): JSX.Element {
     <SubPanel>
       <ReturnButton
         href="/archives/videos/"
-        title={"Videos"}
+        title={langui.videos}
         langui={langui}
         displayOn={ReturnButtonType.desktop}
         className="mb-10"
@@ -43,12 +44,12 @@ export default function Channel(props: Props): JSX.Element {
 
       <PanelHeader
         icon="movie"
-        title="Videos"
+        title={langui.videos}
         description={langui.archives_description}
       />
 
       <div className="flex flex-row gap-2 place-items-center coarse:hidden">
-        <p className="flex-shrink-0">{"Always show info"}:</p>
+        <p className="flex-shrink-0">{langui.always_show_info}:</p>
         <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
       </div>
     </SubPanel>
@@ -60,11 +61,15 @@ export default function Channel(props: Props): JSX.Element {
         <h1 className="text-3xl">{channel?.title}</h1>
         <p>{channel?.subscribers.toLocaleString()} subscribers</p>
       </div>
-      <div className="grid gap-8 items-start mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0">
+      <div
+        className="grid gap-8 items-start mobile:grid-cols-2
+        desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]
+        pb-12 border-b-[3px] border-dotted last-of-type:border-0"
+      >
         {channel?.videos?.data.map((video) => (
           <>
             {video.attributes && (
-              <ThumbnailPreview
+              <PreviewCard
                 key={video.id}
                 href={`/archives/videos/v/${video.attributes.uid}`}
                 title={video.attributes.title}
diff --git a/src/pages/archives/videos/index.tsx b/src/pages/archives/videos/index.tsx
index 66c5732..273e5c5 100644
--- a/src/pages/archives/videos/index.tsx
+++ b/src/pages/archives/videos/index.tsx
@@ -1,24 +1,27 @@
-import AppLayout from "components/AppLayout";
-import PageSelector from "components/Inputs/PageSelector";
-import Switch from "components/Inputs/Switch";
-import PanelHeader from "components/PanelComponents/PanelHeader";
-import ReturnButton, {
+import { AppLayout } from "components/AppLayout";
+import { PageSelector } from "components/Inputs/PageSelector";
+import { Switch } from "components/Inputs/Switch";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
-import ThumbnailPreview from "components/PreviewCard";
+import { SubPanel } from "components/Panels/SubPanel";
+import { PreviewCard } from "components/PreviewCard";
 import { GetVideosPreviewQuery } from "graphql/generated";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
+import { prettyDate } from "helpers/formatters";
+import { getVideoThumbnailURL } from "helpers/videos";
 import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-import { getVideoThumbnailURL, prettyDate } from "queries/helpers";
 import { useState } from "react";
 
 interface Props extends AppStaticProps {
-  videos: Exclude<GetVideosPreviewQuery["videos"], null | undefined>["data"];
+  videos: NonNullable<GetVideosPreviewQuery["videos"]>["data"];
 }
 
 export default function Videos(props: Props): JSX.Element {
@@ -64,7 +67,7 @@ export default function Videos(props: Props): JSX.Element {
       />
 
       <div className="flex flex-row gap-2 place-items-center coarse:hidden">
-        <p className="flex-shrink-0">{"Always show info"}:</p>
+        <p className="flex-shrink-0">{langui.always_show_info}:</p>
         <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
       </div>
     </SubPanel>
@@ -79,11 +82,15 @@ export default function Videos(props: Props): JSX.Element {
         className="mb-12"
       />
 
-      <div className="grid gap-8 items-start thin:grid-cols-1 mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0">
+      <div
+        className="grid gap-8 items-start thin:grid-cols-1 mobile:grid-cols-2
+        desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]
+        pb-12 border-b-[3px] border-dotted last-of-type:border-0"
+      >
         {paginatedVideos[page].map((video) => (
           <>
             {video.attributes && (
-              <ThumbnailPreview
+              <PreviewCard
                 key={video.id}
                 href={`/archives/videos/v/${video.attributes.uid}`}
                 title={video.attributes.title}
diff --git a/src/pages/archives/videos/v/[uid].tsx b/src/pages/archives/videos/v/[uid].tsx
index b768ac6..19b685c 100644
--- a/src/pages/archives/videos/v/[uid].tsx
+++ b/src/pages/archives/videos/v/[uid].tsx
@@ -1,34 +1,33 @@
-import AppLayout from "components/AppLayout";
-import HorizontalLine from "components/HorizontalLine";
-import Button from "components/Inputs/Button";
-import InsetBox from "components/InsetBox";
-import NavOption from "components/PanelComponents/NavOption";
-import ReturnButton, {
+import { AppLayout } from "components/AppLayout";
+import { HorizontalLine } from "components/HorizontalLine";
+import { Button } from "components/Inputs/Button";
+import { InsetBox } from "components/InsetBox";
+import { NavOption } from "components/PanelComponents/NavOption";
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { GetVideoQuery } from "graphql/generated";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
+import { prettyDate, prettyShortenNumber } from "helpers/formatters";
+import { getVideoFile } from "helpers/videos";
 import { useMediaMobile } from "hooks/useMediaQuery";
 import {
   GetStaticPathsContext,
   GetStaticPathsResult,
   GetStaticPropsContext,
 } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-import { getVideoFile, prettyDate, prettyShortenNumber } from "queries/helpers";
 
 interface Props extends AppStaticProps {
-  video: Exclude<
-    Exclude<
-      GetVideoQuery["videos"],
-      null | undefined
-    >["data"][number]["attributes"],
-    null | undefined
+  video: NonNullable<
+    NonNullable<GetVideoQuery["videos"]>["data"][number]["attributes"]
   >;
 }
 
@@ -40,7 +39,7 @@ export default function Video(props: Props): JSX.Element {
     <SubPanel>
       <ReturnButton
         href="/archives/videos/"
-        title={"Videos"}
+        title={langui.videos}
         langui={langui}
         displayOn={ReturnButtonType.desktop}
         className="mb-10"
@@ -56,14 +55,14 @@ export default function Video(props: Props): JSX.Element {
       />
 
       <NavOption
-        title={"Channel"}
+        title={langui.channel}
         url="#channel"
         border
         onClick={() => appLayout.setSubPanelOpen(false)}
       />
 
       <NavOption
-        title={"Description"}
+        title={langui.description}
         url="#description"
         border
         onClick={() => appLayout.setSubPanelOpen(false)}
@@ -98,7 +97,8 @@ export default function Video(props: Props): JSX.Element {
               className="w-full aspect-video"
               title="YouTube video player"
               frameBorder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allow="accelerometer; autoplay; clipboard-write;
+              encrypted-media; gyroscope; picture-in-picture"
               allowFullScreen
             ></iframe>
           )}
@@ -135,7 +135,7 @@ export default function Video(props: Props): JSX.Element {
                 target="_blank"
                 rel="noreferrer"
               >
-                <Button className="!py-0 !px-3">{`View on ${video.source}`}</Button>
+                <Button className="!py-0 !px-3">{`${langui.view_on} ${video.source}`}</Button>
               </a>
             </div>
           </div>
@@ -144,7 +144,7 @@ export default function Video(props: Props): JSX.Element {
         {video.channel?.data?.attributes && (
           <InsetBox id="channel" className="grid place-items-center">
             <div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-4 text-center">
-              <h2 className="text-2xl">{"Channel"}</h2>
+              <h2 className="text-2xl">{langui.channel}</h2>
               <div>
                 <Button
                   href={`/archives/videos/c/${video.channel.data.attributes.uid}`}
@@ -153,8 +153,7 @@ export default function Video(props: Props): JSX.Element {
                 </Button>
 
                 <p>
-                  {video.channel.data.attributes.subscribers.toLocaleString()}{" "}
-                  subscribers
+                  {`${video.channel.data.attributes.subscribers.toLocaleString()} ${langui.subscribers?.toLowerCase()}`}
                 </p>
               </div>
             </div>
@@ -163,7 +162,7 @@ export default function Video(props: Props): JSX.Element {
 
         <InsetBox id="description" className="grid place-items-center">
           <div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-8">
-            <h2 className="text-2xl">{"Description"}</h2>
+            <h2 className="text-2xl">{langui.description}</h2>
             <p className="whitespace-pre-line">{video.description}</p>
           </div>
         </InsetBox>
diff --git a/src/pages/chronicles/index.tsx b/src/pages/chronicles/index.tsx
index f78e0dd..cb376ca 100644
--- a/src/pages/chronicles/index.tsx
+++ b/src/pages/chronicles/index.tsx
@@ -1,12 +1,13 @@
-import AppLayout from "components/AppLayout";
-import PanelHeader from "components/PanelComponents/PanelHeader";
-import SubPanel from "components/Panels/SubPanel";
+import { AppLayout } from "components/AppLayout";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
+import { SubPanel } from "components/Panels/SubPanel";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
+import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
 interface Props extends AppStaticProps {}
 
-export default function Chronicles(props: Props): JSX.Element {
+export default function Chronicles(props: Immutable<Props>): JSX.Element {
   const { langui } = props;
   const subPanel = (
     <SubPanel>
diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx
index 37625a5..7d7479d 100644
--- a/src/pages/contents/[slug]/index.tsx
+++ b/src/pages/contents/[slug]/index.tsx
@@ -1,56 +1,60 @@
-import AppLayout from "components/AppLayout";
-import Chip from "components/Chip";
-import HorizontalLine from "components/HorizontalLine";
-import Markdawn from "components/Markdown/Markdawn";
-import TOC from "components/Markdown/TOC";
-import ReturnButton, {
+import { AppLayout } from "components/AppLayout";
+import { Chip } from "components/Chip";
+import { HorizontalLine } from "components/HorizontalLine";
+import { Markdawn } from "components/Markdown/Markdawn";
+import { TOC } from "components/Markdown/TOC";
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
-import PreviewLine from "components/PreviewLine";
-import RecorderChip from "components/RecorderChip";
-import ThumbnailHeader from "components/ThumbnailHeader";
-import ToolTip from "components/ToolTip";
-import { GetContentTextQuery } from "graphql/generated";
+import { ContentPanel } from "components/Panels/ContentPanel";
+import { SubPanel } from "components/Panels/SubPanel";
+import { PreviewLine } from "components/PreviewLine";
+import { RecorderChip } from "components/RecorderChip";
+import { ThumbnailHeader } from "components/ThumbnailHeader";
+import { ToolTip } from "components/ToolTip";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
+import { getNextContent, getPreviousContent } from "helpers/contents";
+import {
+  prettyinlineTitle,
+  prettyLanguage,
+  prettySlug,
+} from "helpers/formatters";
+import { getStatusDescription } from "helpers/others";
+import { ContentWithTranslations, Immutable } from "helpers/types";
 import { useMediaMobile } from "hooks/useMediaQuery";
-import useSmartLanguage from "hooks/useSmartLanguage";
+import { useSmartLanguage } from "hooks/useSmartLanguage";
 import {
   GetStaticPathsContext,
   GetStaticPathsResult,
   GetStaticPropsContext,
 } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-import {
-  getStatusDescription,
-  prettyinlineTitle,
-  prettyLanguage,
-  prettySlug,
-} from "queries/helpers";
 
 interface Props extends AppStaticProps {
-  content: Exclude<
-    GetContentTextQuery["contents"],
-    null | undefined
-  >["data"][number]["attributes"];
-  contentId: Exclude<
-    GetContentTextQuery["contents"],
-    null | undefined
-  >["data"][number]["id"];
+  content: ContentWithTranslations;
 }
 
-export default function Content(props: Props): JSX.Element {
+export default function Content(props: Immutable<Props>): JSX.Element {
   const { langui, content, languages } = props;
   const isMobile = useMediaMobile();
 
-  const [selectedTextSet, LanguageSwitcher] = useSmartLanguage({
-    items: content?.text_set,
+  const [selectedTranslation, LanguageSwitcher] = useSmartLanguage({
+    items: content.translations,
     languages: languages,
-    languageExtractor: (item) => item?.language?.data?.attributes?.code,
+    languageExtractor: (item) => item.language?.data?.attributes?.code,
   });
 
-  const selectedTitle = content?.titles?.[0];
+  const previousContent = content.group?.data?.attributes?.contents
+    ? getPreviousContent(
+        content.group.data.attributes.contents.data,
+        content.slug
+      )
+    : undefined;
+
+  const nextContent = content.group?.data?.attributes?.contents
+    ? getNextContent(content.group.data.attributes.contents.data, content.slug)
+    : undefined;
 
   const subPanel = (
     <SubPanel>
@@ -62,124 +66,133 @@ export default function Content(props: Props): JSX.Element {
         horizontalLine
       />
 
-      {selectedTextSet?.source_language?.data?.attributes && (
+      {selectedTranslation?.text_set && (
         <div className="grid gap-5">
           <h2 className="text-xl">
-            {selectedTextSet.source_language.data.attributes.code ===
-            selectedTextSet.language?.data?.attributes?.code
+            {selectedTranslation.text_set.source_language?.data?.attributes
+              ?.code === selectedTranslation.language?.data?.attributes?.code
               ? langui.transcript_notice
               : langui.translation_notice}
           </h2>
 
-          {selectedTextSet.source_language.data.attributes.code !==
-            selectedTextSet.language?.data?.attributes?.code && (
-            <div className="grid place-items-center gap-2">
-              <p className="font-headers">{langui.source_language}:</p>
-              <Chip>
-                {prettyLanguage(
-                  selectedTextSet.source_language.data.attributes.code,
-                  languages
-                )}
-              </Chip>
-            </div>
-          )}
+          {selectedTranslation.text_set.source_language?.data?.attributes
+            ?.code &&
+            selectedTranslation.text_set.source_language.data.attributes
+              .code !==
+              selectedTranslation.language?.data?.attributes?.code && (
+              <div className="grid place-items-center gap-2">
+                <p className="font-headers">{langui.source_language}:</p>
+                <Chip>
+                  {prettyLanguage(
+                    selectedTranslation.text_set.source_language.data.attributes
+                      .code,
+                    languages
+                  )}
+                </Chip>
+              </div>
+            )}
 
           <div className="grid grid-flow-col place-items-center place-content-center gap-2">
             <p className="font-headers">{langui.status}:</p>
 
             <ToolTip
-              content={getStatusDescription(selectedTextSet.status, langui)}
+              content={getStatusDescription(
+                selectedTranslation.text_set.status,
+                langui
+              )}
               maxWidth={"20rem"}
             >
-              <Chip>{selectedTextSet.status}</Chip>
+              <Chip>{selectedTranslation.text_set.status}</Chip>
             </ToolTip>
           </div>
 
-          {selectedTextSet.transcribers &&
-            selectedTextSet.transcribers.data.length > 0 && (
+          {selectedTranslation.text_set.transcribers &&
+            selectedTranslation.text_set.transcribers.data.length > 0 && (
               <div>
                 <p className="font-headers">{langui.transcribers}:</p>
                 <div className="grid place-items-center place-content-center gap-2">
-                  {selectedTextSet.transcribers.data.map((recorder) => (
-                    <>
-                      {recorder.attributes && (
-                        <RecorderChip
-                          key={recorder.id}
-                          langui={langui}
-                          recorder={recorder.attributes}
-                        />
-                      )}
-                    </>
-                  ))}
+                  {selectedTranslation.text_set.transcribers.data.map(
+                    (recorder) => (
+                      <>
+                        {recorder.attributes && (
+                          <RecorderChip
+                            key={recorder.id}
+                            langui={langui}
+                            recorder={recorder.attributes}
+                          />
+                        )}
+                      </>
+                    )
+                  )}
                 </div>
               </div>
             )}
 
-          {selectedTextSet.translators &&
-            selectedTextSet.translators.data.length > 0 && (
+          {selectedTranslation.text_set.translators &&
+            selectedTranslation.text_set.translators.data.length > 0 && (
               <div>
                 <p className="font-headers">{langui.translators}:</p>
                 <div className="grid place-items-center place-content-center gap-2">
-                  {selectedTextSet.translators.data.map((recorder) => (
-                    <>
-                      {recorder.attributes && (
-                        <RecorderChip
-                          key={recorder.id}
-                          langui={langui}
-                          recorder={recorder.attributes}
-                        />
-                      )}
-                    </>
-                  ))}
+                  {selectedTranslation.text_set.translators.data.map(
+                    (recorder) => (
+                      <>
+                        {recorder.attributes && (
+                          <RecorderChip
+                            key={recorder.id}
+                            langui={langui}
+                            recorder={recorder.attributes}
+                          />
+                        )}
+                      </>
+                    )
+                  )}
                 </div>
               </div>
             )}
 
-          {selectedTextSet.proofreaders &&
-            selectedTextSet.proofreaders.data.length > 0 && (
+          {selectedTranslation.text_set.proofreaders &&
+            selectedTranslation.text_set.proofreaders.data.length > 0 && (
               <div>
                 <p className="font-headers">{langui.proofreaders}:</p>
                 <div className="grid place-items-center place-content-center gap-2">
-                  {selectedTextSet.proofreaders.data.map((recorder) => (
-                    <>
-                      {recorder.attributes && (
-                        <RecorderChip
-                          key={recorder.id}
-                          langui={langui}
-                          recorder={recorder.attributes}
-                        />
-                      )}
-                    </>
-                  ))}
+                  {selectedTranslation.text_set.proofreaders.data.map(
+                    (recorder) => (
+                      <>
+                        {recorder.attributes && (
+                          <RecorderChip
+                            key={recorder.id}
+                            langui={langui}
+                            recorder={recorder.attributes}
+                          />
+                        )}
+                      </>
+                    )
+                  )}
                 </div>
               </div>
             )}
 
-          {selectedTextSet.notes && (
+          {selectedTranslation.text_set.notes && (
             <div>
               <p className="font-headers">{"Notes"}:</p>
               <div className="grid place-items-center place-content-center gap-2">
-                <Markdawn text={selectedTextSet.notes} />
+                <Markdawn text={selectedTranslation.text_set.notes} />
               </div>
             </div>
           )}
         </div>
       )}
 
-      {selectedTextSet && content?.text_set && selectedTextSet.text && (
+      {selectedTranslation?.text_set?.text && (
         <>
           <HorizontalLine />
           <TOC
-            text={selectedTextSet.text}
-            title={
-              content.titles && content.titles.length > 0 && selectedTitle
-                ? prettyinlineTitle(
-                    selectedTitle.pre_title,
-                    selectedTitle.title,
-                    selectedTitle.subtitle
-                  )
-                : prettySlug(content.slug)
-            }
+            text={selectedTranslation.text_set.text}
+            title={prettyinlineTitle(
+              selectedTranslation.pre_title,
+              selectedTranslation.title,
+              selectedTranslation.subtitle
+            )}
           />
         </>
       )}
@@ -188,142 +201,119 @@ export default function Content(props: Props): JSX.Element {
   const contentPanel = (
     <ContentPanel>
       <ReturnButton
-        href={`/contents/${content?.slug}`}
+        href={`/contents/${content.slug}`}
         title={langui.content}
         langui={langui}
         displayOn={ReturnButtonType.mobile}
         className="mb-10"
       />
 
-      {content && (
-        <div className="grid place-items-center">
-          <ThumbnailHeader
-            thumbnail={content.thumbnail?.data?.attributes}
-            pre_title={
-              selectedTitle?.pre_title ?? content.titles?.[0]?.pre_title
-            }
-            title={selectedTitle?.title ?? content.titles?.[0]?.title}
-            subtitle={selectedTitle?.subtitle ?? content.titles?.[0]?.subtitle}
-            description={
-              selectedTitle?.description ?? content.titles?.[0]?.description
-            }
-            type={content.type}
-            categories={content.categories}
-            langui={langui}
-            languageSwitcher={<LanguageSwitcher />}
-          />
+      <div className="grid place-items-center">
+        <ThumbnailHeader
+          thumbnail={content.thumbnail?.data?.attributes}
+          pre_title={selectedTranslation?.pre_title}
+          title={selectedTranslation?.title}
+          subtitle={selectedTranslation?.subtitle}
+          description={selectedTranslation?.description}
+          type={content.type}
+          categories={content.categories}
+          langui={langui}
+          languageSwitcher={<LanguageSwitcher />}
+        />
 
-          {content.previous_recommended?.data?.attributes && (
-            <div className="mt-12 mb-8 w-full">
-              <h2 className="text-center text-2xl mb-4">Previous content</h2>
-              <PreviewLine
-                href={`/contents/${content.previous_recommended.data.attributes.slug}`}
-                pre_title={
-                  content.previous_recommended.data.attributes.titles?.[0]
-                    ?.pre_title
-                }
-                title={
-                  content.previous_recommended.data.attributes.titles?.[0]
-                    ?.title ??
-                  prettySlug(content.previous_recommended.data.attributes.slug)
-                }
-                subtitle={
-                  content.previous_recommended.data.attributes.titles?.[0]
-                    ?.subtitle
-                }
-                thumbnail={
-                  content.previous_recommended.data.attributes.thumbnail?.data
-                    ?.attributes
-                }
-                thumbnailAspectRatio="3/2"
-                topChips={
-                  isMobile
-                    ? undefined
-                    : content.previous_recommended.data.attributes.type?.data
-                        ?.attributes
-                    ? [
-                        content.previous_recommended.data.attributes.type.data
-                          .attributes.titles?.[0]
-                          ? content.previous_recommended.data.attributes.type
-                              .data.attributes.titles[0]?.title
-                          : prettySlug(
-                              content.previous_recommended.data.attributes.type
-                                .data.attributes.slug
-                            ),
-                      ]
-                    : undefined
-                }
-                bottomChips={
-                  isMobile
-                    ? undefined
-                    : content.previous_recommended.data.attributes.categories?.data.map(
-                        (category) => category.attributes?.short ?? ""
-                      )
-                }
-              />
-            </div>
-          )}
+        {previousContent?.attributes && (
+          <div className="mt-12 mb-8 w-full">
+            <h2 className="text-center text-2xl mb-4">
+              {langui.previous_content}
+            </h2>
+            <PreviewLine
+              href={`/contents/${previousContent.attributes.slug}`}
+              pre_title={
+                previousContent.attributes.translations?.[0]?.pre_title
+              }
+              title={
+                previousContent.attributes.translations?.[0]?.title ??
+                prettySlug(previousContent.attributes.slug)
+              }
+              subtitle={previousContent.attributes.translations?.[0]?.subtitle}
+              thumbnail={previousContent.attributes.thumbnail?.data?.attributes}
+              thumbnailAspectRatio="3/2"
+              topChips={
+                isMobile
+                  ? undefined
+                  : previousContent.attributes.type?.data?.attributes
+                  ? [
+                      previousContent.attributes.type.data.attributes
+                        .titles?.[0]
+                        ? previousContent.attributes.type.data.attributes
+                            .titles[0]?.title
+                        : prettySlug(
+                            previousContent.attributes.type.data.attributes.slug
+                          ),
+                    ]
+                  : undefined
+              }
+              bottomChips={
+                isMobile
+                  ? undefined
+                  : previousContent.attributes.categories?.data.map(
+                      (category) => category.attributes?.short ?? ""
+                    )
+              }
+            />
+          </div>
+        )}
 
-          <HorizontalLine />
+        <HorizontalLine />
 
-          <Markdawn text={selectedTextSet?.text ?? ""} />
+        <Markdawn text={selectedTranslation?.text_set?.text ?? ""} />
 
-          {content.next_recommended?.data?.attributes && (
-            <>
-              <HorizontalLine />
-              <h2 className="text-center text-2xl mb-4">Follow-up content</h2>
-              <PreviewLine
-                href={`/contents/${content.next_recommended.data.attributes.slug}`}
-                pre_title={
-                  content.next_recommended.data.attributes.titles?.[0]
-                    ?.pre_title
-                }
-                title={
-                  content.next_recommended.data.attributes.titles?.[0]?.title ??
-                  prettySlug(content.next_recommended.data.attributes.slug)
-                }
-                subtitle={
-                  content.next_recommended.data.attributes.titles?.[0]?.subtitle
-                }
-                thumbnail={
-                  content.next_recommended.data.attributes.thumbnail?.data
-                    ?.attributes
-                }
-                thumbnailAspectRatio="3/2"
-                topChips={
-                  isMobile
-                    ? undefined
-                    : content.next_recommended.data.attributes.type?.data
-                        ?.attributes
-                    ? [
-                        content.next_recommended.data.attributes.type.data
-                          .attributes.titles?.[0]
-                          ? content.next_recommended.data.attributes.type.data
-                              .attributes.titles[0]?.title
-                          : prettySlug(
-                              content.next_recommended.data.attributes.type.data
-                                .attributes.slug
-                            ),
-                      ]
-                    : undefined
-                }
-                bottomChips={
-                  isMobile
-                    ? undefined
-                    : content.next_recommended.data.attributes.categories?.data.map(
-                        (category) => category.attributes?.short ?? ""
-                      )
-                }
-              />
-            </>
-          )}
-        </div>
-      )}
+        {nextContent?.attributes && (
+          <>
+            <HorizontalLine />
+            <h2 className="text-center text-2xl mb-4">
+              {langui.followup_content}
+            </h2>
+            <PreviewLine
+              href={`/contents/${nextContent.attributes.slug}`}
+              pre_title={nextContent.attributes.translations?.[0]?.pre_title}
+              title={
+                nextContent.attributes.translations?.[0]?.title ??
+                prettySlug(nextContent.attributes.slug)
+              }
+              subtitle={nextContent.attributes.translations?.[0]?.subtitle}
+              thumbnail={nextContent.attributes.thumbnail?.data?.attributes}
+              thumbnailAspectRatio="3/2"
+              topChips={
+                isMobile
+                  ? undefined
+                  : nextContent.attributes.type?.data?.attributes
+                  ? [
+                      nextContent.attributes.type.data.attributes.titles?.[0]
+                        ? nextContent.attributes.type.data.attributes.titles[0]
+                            ?.title
+                        : prettySlug(
+                            nextContent.attributes.type.data.attributes.slug
+                          ),
+                    ]
+                  : undefined
+              }
+              bottomChips={
+                isMobile
+                  ? undefined
+                  : nextContent.attributes.categories?.data.map(
+                      (category) => category.attributes?.short ?? ""
+                    )
+              }
+            />
+          </>
+        )}
+      </div>
     </ContentPanel>
   );
 
   let description = "";
-  if (content?.type?.data) {
+  if (content.type?.data) {
     description += `${langui.type}: `;
 
     description +=
@@ -332,7 +322,7 @@ export default function Content(props: Props): JSX.Element {
 
     description += "\n";
   }
-  if (content?.categories?.data && content.categories.data.length > 0) {
+  if (content.categories?.data && content.categories.data.length > 0) {
     description += `${langui.categories}: `;
     description += content.categories.data
       .map((category) => category.attributes?.short)
@@ -343,15 +333,15 @@ export default function Content(props: Props): JSX.Element {
   return (
     <AppLayout
       navTitle={
-        content?.titles && content.titles.length > 0 && content.titles[0]
+        selectedTranslation
           ? prettyinlineTitle(
-              content.titles[0].pre_title,
-              content.titles[0].title,
-              content.titles[0].subtitle
+              selectedTranslation.pre_title,
+              selectedTranslation.title,
+              selectedTranslation.subtitle
             )
-          : prettySlug(content?.slug)
+          : prettySlug(content.slug)
       }
-      thumbnail={content?.thumbnail?.data?.attributes ?? undefined}
+      thumbnail={content.thumbnail?.data?.attributes ?? undefined}
       contentPanel={contentPanel}
       subPanel={subPanel}
       description={description}
@@ -370,12 +360,12 @@ export async function getStaticProps(
     language_code: context.locale ?? "en",
   });
 
-  if (!content.contents || content.contents.data.length === 0)
+  if (!content.contents || !content.contents.data[0].attributes?.translations) {
     return { notFound: true };
+  }
   const props: Props = {
     ...(await getAppStaticProps(context)),
-    content: content.contents.data[0].attributes,
-    contentId: content.contents.data[0].id,
+    content: content.contents.data[0].attributes as ContentWithTranslations,
   };
   return {
     props: props,
diff --git a/src/pages/contents/index.tsx b/src/pages/contents/index.tsx
index 0bda034..b727caf 100644
--- a/src/pages/contents/index.tsx
+++ b/src/pages/contents/index.tsx
@@ -1,39 +1,51 @@
-import AppLayout from "components/AppLayout";
-import Chip from "components/Chip";
-import Select from "components/Inputs/Select";
-import Switch from "components/Inputs/Switch";
-import PanelHeader from "components/PanelComponents/PanelHeader";
-import ContentPanel, {
+import { AppLayout } from "components/AppLayout";
+import { Chip } from "components/Chip";
+import { Select } from "components/Inputs/Select";
+import { Switch } from "components/Inputs/Switch";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
-import ThumbnailPreview from "components/PreviewCard";
+import { SubPanel } from "components/Panels/SubPanel";
+import { PreviewCard } from "components/PreviewCard";
 import { GetContentsQuery } from "graphql/generated";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
+import { prettyinlineTitle, prettySlug } from "helpers/formatters";
+import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-import { prettyinlineTitle, prettySlug } from "queries/helpers";
 import { useEffect, useState } from "react";
 
 interface Props extends AppStaticProps {
-  contents: Exclude<GetContentsQuery["contents"], null | undefined>["data"];
+  contents: NonNullable<GetContentsQuery["contents"]>["data"];
 }
 
-type GroupContentItems = Map<string, Props["contents"]>;
+type GroupContentItems = Map<string, Immutable<Props["contents"]>>;
 
-export default function Contents(props: Props): JSX.Element {
+export default function Contents(props: Immutable<Props>): JSX.Element {
   const { langui, contents } = props;
 
   const [groupingMethod, setGroupingMethod] = useState<number>(-1);
   const [keepInfoVisible, setKeepInfoVisible] = useState(false);
 
+  const [combineRelatedContent, setCombineRelatedContent] = useState(true);
+
+  const [filteredItems, setFilteredItems] = useState(
+    filterContents(combineRelatedContent, contents)
+  );
+
   const [groups, setGroups] = useState<GroupContentItems>(
-    getGroups(langui, groupingMethod, contents)
+    getGroups(langui, groupingMethod, filteredItems)
   );
 
   useEffect(() => {
-    setGroups(getGroups(langui, groupingMethod, contents));
-  }, [langui, groupingMethod, contents]);
+    setFilteredItems(filterContents(combineRelatedContent, contents));
+  }, [combineRelatedContent, contents]);
+
+  useEffect(() => {
+    setGroups(getGroups(langui, groupingMethod, filteredItems));
+  }, [langui, groupingMethod, filteredItems]);
 
   const subPanel = (
     <SubPanel>
@@ -55,7 +67,15 @@ export default function Contents(props: Props): JSX.Element {
       </div>
 
       <div className="flex flex-row gap-2 place-items-center coarse:hidden">
-        <p className="flex-shrink-0">{"Always show info"}:</p>
+        <p className="flex-shrink-0">{langui.combine_related_contents}:</p>
+        <Switch
+          setState={setCombineRelatedContent}
+          state={combineRelatedContent}
+        />
+      </div>
+
+      <div className="flex flex-row gap-2 place-items-center coarse:hidden">
+        <p className="flex-shrink-0">{langui.always_show_info}:</p>
         <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
       </div>
     </SubPanel>
@@ -69,7 +89,8 @@ export default function Contents(props: Props): JSX.Element {
               {name && (
                 <h2
                   key={`h2${name}`}
-                  className="text-2xl pb-2 pt-10 first-of-type:pt-0 flex flex-row place-items-center gap-2"
+                  className="text-2xl pb-2 pt-10 first-of-type:pt-0
+                  flex flex-row place-items-center gap-2"
                 >
                   {name}
                   <Chip>{`${items.length} ${
@@ -81,22 +102,30 @@ export default function Contents(props: Props): JSX.Element {
               )}
               <div
                 key={`items${name}`}
-                className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"
+                className="grid gap-8 mobile:gap-4 items-end grid-cols-2
+                desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"
               >
                 {items.map((item) => (
                   <>
                     {item.attributes && (
-                      <ThumbnailPreview
+                      <PreviewCard
                         key={item.id}
                         href={`/contents/${item.attributes.slug}`}
-                        pre_title={item.attributes.titles?.[0]?.pre_title}
+                        pre_title={item.attributes.translations?.[0]?.pre_title}
                         title={
-                          item.attributes.titles?.[0]?.title ??
+                          item.attributes.translations?.[0]?.title ??
                           prettySlug(item.attributes.slug)
                         }
-                        subtitle={item.attributes.titles?.[0]?.subtitle}
+                        subtitle={item.attributes.translations?.[0]?.subtitle}
                         thumbnail={item.attributes.thumbnail?.data?.attributes}
                         thumbnailAspectRatio="3/2"
+                        stackNumber={
+                          combineRelatedContent &&
+                          item.attributes.group?.data?.attributes?.combine
+                            ? item.attributes.group.data.attributes.contents
+                                ?.data.length
+                            : 0
+                        }
                         topChips={
                           item.attributes.type?.data?.attributes
                             ? [
@@ -143,18 +172,18 @@ export async function getStaticProps(
   });
   if (!contents.contents) return { notFound: true };
   contents.contents.data.sort((a, b) => {
-    const titleA = a.attributes?.titles?.[0]
+    const titleA = a.attributes?.translations?.[0]
       ? prettyinlineTitle(
-          a.attributes.titles[0].pre_title,
-          a.attributes.titles[0].title,
-          a.attributes.titles[0].subtitle
+          a.attributes.translations[0].pre_title,
+          a.attributes.translations[0].title,
+          a.attributes.translations[0].subtitle
         )
       : a.attributes?.slug ?? "";
-    const titleB = b.attributes?.titles?.[0]
+    const titleB = b.attributes?.translations?.[0]
       ? prettyinlineTitle(
-          b.attributes.titles[0].pre_title,
-          b.attributes.titles[0].title,
-          b.attributes.titles[0].subtitle
+          b.attributes.translations[0].pre_title,
+          b.attributes.translations[0].title,
+          b.attributes.translations[0].subtitle
         )
       : b.attributes?.slug ?? "";
     return titleA.localeCompare(titleB);
@@ -172,7 +201,7 @@ export async function getStaticProps(
 function getGroups(
   langui: AppStaticProps["langui"],
   groupByType: number,
-  items: Props["contents"]
+  items: Immutable<Props["contents"]>
 ): GroupContentItems {
   switch (groupByType) {
     case 0: {
@@ -209,15 +238,16 @@ function getGroups(
     }
 
     case 1: {
-      const group: GroupContentItems = new Map();
+      const group = new Map();
       items.map((item) => {
         const type =
           item.attributes?.type?.data?.attributes?.titles?.[0]?.title ??
-          prettySlug(item.attributes?.type?.data?.attributes?.slug);
+          item.attributes?.type?.data?.attributes?.slug
+            ? prettySlug(item.attributes.type.data.attributes.slug)
+            : langui.no_type;
         if (!group.has(type)) group.set(type, []);
         group.get(type)?.push(item);
       });
-
       return group;
     }
 
@@ -228,3 +258,19 @@ function getGroups(
     }
   }
 }
+
+function filterContents(
+  combineRelatedContent: boolean,
+  contents: Immutable<Props["contents"]>
+): Immutable<Props["contents"]> {
+  if (combineRelatedContent) {
+    return [...contents].filter(
+      (content) =>
+        !content.attributes?.group?.data?.attributes ||
+        !content.attributes.group.data.attributes.combine ||
+        content.attributes.group.data.attributes.contents?.data[0].id ===
+          content.id
+    );
+  }
+  return contents;
+}
diff --git a/src/pages/dev/checkup/contents.tsx b/src/pages/dev/checkup/contents.tsx
index 15eab1b..431569e 100644
--- a/src/pages/dev/checkup/contents.tsx
+++ b/src/pages/dev/checkup/contents.tsx
@@ -1,23 +1,22 @@
-import AppLayout from "components/AppLayout";
-import Chip from "components/Chip";
-import Button from "components/Inputs/Button";
-import ContentPanel, {
+import { AppLayout } from "components/AppLayout";
+import { Chip } from "components/Chip";
+import { Button } from "components/Inputs/Button";
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import ToolTip from "components/ToolTip";
-import {
-  DevGetContentsQuery,
-  Enum_Componentsetstextset_Status,
-} from "graphql/generated";
+import { ToolTip } from "components/ToolTip";
+import { DevGetContentsQuery } from "graphql/generated";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
+import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
 interface Props extends AppStaticProps {
   contents: DevGetContentsQuery;
 }
 
-export default function CheckupContents(props: Props): JSX.Element {
+export default function CheckupContents(props: Immutable<Props>): JSX.Element {
   const { contents } = props;
   const testReport = testingContent(contents);
 
@@ -38,7 +37,8 @@ export default function CheckupContents(props: Props): JSX.Element {
       {testReport.lines.map((line, index) => (
         <div
           key={index}
-          className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] gap-2 items-center mb-2 justify-items-start"
+          className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr]
+          gap-2 items-center mb-2 justify-items-start"
         >
           <Button
             href={line.frontendUrl}
@@ -112,7 +112,7 @@ type ReportLine = {
   frontendUrl: string;
 };
 
-function testingContent(contents: Props["contents"]): Report {
+function testingContent(contents: Immutable<Props["contents"]>): Report {
   const report: Report = {
     title: "Contents",
     lines: [],
@@ -163,23 +163,6 @@ function testingContent(contents: Props["contents"]): Report {
         });
       }
 
-      if (
-        content.attributes.next_recommended?.data?.id === content.id ||
-        content.attributes.previous_recommended?.data?.id === content.id
-      ) {
-        report.lines.push({
-          subitems: [content.attributes.slug],
-          name: "Self Recommendation",
-          type: "Error",
-          severity: "Very High",
-          description:
-            "The Content is referring to itself as a Next or Previous Recommended.",
-          recommandation: "",
-          backendUrl: backendUrl,
-          frontendUrl: frontendUrl,
-        });
-      }
-
       if (!content.attributes.thumbnail?.data?.id) {
         report.lines.push({
           subitems: [content.attributes.slug],
@@ -193,7 +176,7 @@ function testingContent(contents: Props["contents"]): Report {
         });
       }
 
-      if (content.attributes.titles?.length === 0) {
+      if (content.attributes.translations?.length === 0) {
         report.lines.push({
           subitems: [content.attributes.slug],
           name: "No Titles",
@@ -207,10 +190,10 @@ function testingContent(contents: Props["contents"]): Report {
       } else {
         const titleLanguages: string[] = [];
 
-        content.attributes.titles?.map((title, titleIndex) => {
-          if (title && content.attributes) {
-            if (title.language?.data?.id) {
-              if (title.language.data.id in titleLanguages) {
+        content.attributes.translations?.map((translation, titleIndex) => {
+          if (translation && content.attributes) {
+            if (translation.language?.data?.id) {
+              if (translation.language.data.id in titleLanguages) {
                 report.lines.push({
                   subitems: [
                     content.attributes.slug,
@@ -225,7 +208,7 @@ function testingContent(contents: Props["contents"]): Report {
                   frontendUrl: frontendUrl,
                 });
               } else {
-                titleLanguages.push(title.language.data.id);
+                titleLanguages.push(translation.language.data.id);
               }
             } else {
               report.lines.push({
@@ -242,7 +225,7 @@ function testingContent(contents: Props["contents"]): Report {
                 frontendUrl: frontendUrl,
               });
             }
-            if (!title.description) {
+            if (!translation.description) {
               report.lines.push({
                 subitems: [
                   content.attributes.slug,
@@ -257,229 +240,199 @@ function testingContent(contents: Props["contents"]): Report {
                 frontendUrl: frontendUrl,
               });
             }
+
+            if (translation.text_set) {
+              report.lines.push({
+                subitems: [content.attributes.slug],
+                name: "No Text Set",
+                type: "Missing",
+                severity: "Medium",
+                description: "The Content has no Text Set.",
+                recommandation: "",
+                backendUrl: backendUrl,
+                frontendUrl: frontendUrl,
+              });
+            } else {
+              /*
+               *const textSetLanguages: string[] = [];
+               *if (content.attributes && textSet) {
+               *  if (textSet.language?.data?.id) {
+               *    if (textSet.language.data.id in textSetLanguages) {
+               *      report.lines.push({
+               *        subitems: [
+               *          content.attributes.slug,
+               *          `TextSet ${textSetIndex.toString()}`,
+               *        ],
+               *        name: "Duplicate Language",
+               *        type: "Error",
+               *        severity: "High",
+               *        description: "",
+               *        recommandation: "",
+               *        backendUrl: backendUrl,
+               *        frontendUrl: frontendUrl,
+               *      });
+               *    } else {
+               *      textSetLanguages.push(textSet.language.data.id);
+               *    }
+               *  } else {
+               *    report.lines.push({
+               *      subitems: [
+               *        content.attributes.slug,
+               *        `TextSet ${textSetIndex.toString()}`,
+               *      ],
+               *      name: "No Language",
+               *      type: "Error",
+               *      severity: "Very High",
+               *      description: "",
+               *      recommandation: "",
+               *      backendUrl: backendUrl,
+               *      frontendUrl: frontendUrl,
+               *    });
+               *  }
+               *
+               *  if (!textSet.source_language?.data?.id) {
+               *    report.lines.push({
+               *      subitems: [
+               *        content.attributes.slug,
+               *        `TextSet ${textSetIndex.toString()}`,
+               *      ],
+               *      name: "No Source Language",
+               *      type: "Error",
+               *      severity: "High",
+               *      description: "",
+               *      recommandation: "",
+               *      backendUrl: backendUrl,
+               *      frontendUrl: frontendUrl,
+               *    });
+               *  }
+               *
+               *  if (textSet.status !== Enum_Componentsetstextset_Status.Done) {
+               *    report.lines.push({
+               *      subitems: [
+               *        content.attributes.slug,
+               *        `TextSet ${textSetIndex.toString()}`,
+               *      ],
+               *      name: "Not Done Status",
+               *      type: "Improvement",
+               *      severity: "Low",
+               *      description: "",
+               *      recommandation: "",
+               *      backendUrl: backendUrl,
+               *      frontendUrl: frontendUrl,
+               *    });
+               *  }
+               *
+               *  if (!textSet.text || textSet.text.length < 10) {
+               *    report.lines.push({
+               *      subitems: [
+               *        content.attributes.slug,
+               *        `TextSet ${textSetIndex.toString()}`,
+               *      ],
+               *      name: "No Text",
+               *      type: "Missing",
+               *      severity: "Medium",
+               *      description: "",
+               *      recommandation: "",
+               *      backendUrl: backendUrl,
+               *      frontendUrl: frontendUrl,
+               *    });
+               *  }
+               *
+               *  if (
+               *    textSet.source_language?.data?.id ===
+               *    textSet.language?.data?.id
+               *  ) {
+               *    if (textSet.transcribers?.data.length === 0) {
+               *      report.lines.push({
+               *        subitems: [
+               *          content.attributes.slug,
+               *          `TextSet ${textSetIndex.toString()}`,
+               *        ],
+               *        name: "No Transcribers",
+               *        type: "Missing",
+               *        severity: "High",
+               *        description:
+               *          "The Content is a Transcription but doesn't credit any Transcribers.",
+               *        recommandation: "Add the appropriate Transcribers.",
+               *        backendUrl: backendUrl,
+               *        frontendUrl: frontendUrl,
+               *      });
+               *    }
+               *    if (
+               *      textSet.translators?.data &&
+               *      textSet.translators.data.length > 0
+               *    ) {
+               *      report.lines.push({
+               *        subitems: [
+               *          content.attributes.slug,
+               *          `TextSet ${textSetIndex.toString()}`,
+               *        ],
+               *        name: "Credited Translators",
+               *        type: "Error",
+               *        severity: "High",
+               *        description:
+               *          "The Content is a Transcription but credits one or more Translators.",
+               *        recommandation:
+               *          "If appropriate, create a Translation Text Set with the Translator credited there.",
+               *        backendUrl: backendUrl,
+               *        frontendUrl: frontendUrl,
+               *      });
+               *    }
+               *  } else {
+               *    if (textSet.translators?.data.length === 0) {
+               *      report.lines.push({
+               *        subitems: [
+               *          content.attributes.slug,
+               *          `TextSet ${textSetIndex.toString()}`,
+               *        ],
+               *        name: "No Translators",
+               *        type: "Missing",
+               *        severity: "High",
+               *        description:
+               *          "The Content is a Transcription but doesn't credit any Translators.",
+               *        recommandation: "Add the appropriate Translators.",
+               *        backendUrl: backendUrl,
+               *        frontendUrl: frontendUrl,
+               *      });
+               *    }
+               *    if (
+               *      textSet.transcribers?.data &&
+               *      textSet.transcribers.data.length > 0
+               *    ) {
+               *      report.lines.push({
+               *        subitems: [
+               *          content.attributes.slug,
+               *          `TextSet ${textSetIndex.toString()}`,
+               *        ],
+               *        name: "Credited Transcribers",
+               *        type: "Error",
+               *        severity: "High",
+               *        description:
+               *          "The Content is a Translation but credits one or more Transcribers.",
+               *        recommandation:
+               *          "If appropriate, create a Transcription Text Set with the Transcribers credited there.",
+               *        backendUrl: backendUrl,
+               *        frontendUrl: frontendUrl,
+               *      });
+               *    }
+               *  }
+               *}
+               */
+            }
+
+            report.lines.push({
+              subitems: [content.attributes.slug],
+              name: "No Sets",
+              type: "Missing",
+              severity: "Medium",
+              description: "The Content has no Sets.",
+              recommandation: "",
+              backendUrl: backendUrl,
+              frontendUrl: frontendUrl,
+            });
           }
         });
       }
-
-      if (
-        content.attributes.text_set?.length === 0 &&
-        content.attributes.audio_set?.length === 0 &&
-        content.attributes.video_set?.length === 0
-      ) {
-        report.lines.push({
-          subitems: [content.attributes.slug],
-          name: "No Sets",
-          type: "Missing",
-          severity: "Medium",
-          description: "The Content has no Sets.",
-          recommandation: "",
-          backendUrl: backendUrl,
-          frontendUrl: frontendUrl,
-        });
-      } else {
-        if (content.attributes.video_set?.length === 0) {
-          report.lines.push({
-            subitems: [content.attributes.slug],
-            name: "No Video Sets",
-            type: "Missing",
-            severity: "Very Low",
-            description: "The Content has no Video Sets.",
-            recommandation: "",
-            backendUrl: backendUrl,
-            frontendUrl: frontendUrl,
-          });
-        }
-        if (content.attributes.audio_set?.length === 0) {
-          report.lines.push({
-            subitems: [content.attributes.slug],
-            name: "No Audio Sets",
-            type: "Missing",
-            severity: "Very Low",
-            description: "The Content has no Audio Sets.",
-            recommandation: "",
-            backendUrl: backendUrl,
-            frontendUrl: frontendUrl,
-          });
-        }
-        if (content.attributes.text_set?.length === 0) {
-          report.lines.push({
-            subitems: [content.attributes.slug],
-            name: "No Text Set",
-            type: "Missing",
-            severity: "Medium",
-            description: "The Content has no Text Set.",
-            recommandation: "",
-            backendUrl: backendUrl,
-            frontendUrl: frontendUrl,
-          });
-        } else {
-          const textSetLanguages: string[] = [];
-
-          content.attributes.text_set?.map((textSet, textSetIndex) => {
-            if (content.attributes && textSet) {
-              if (textSet.language?.data?.id) {
-                if (textSet.language.data.id in textSetLanguages) {
-                  report.lines.push({
-                    subitems: [
-                      content.attributes.slug,
-                      `TextSet ${textSetIndex.toString()}`,
-                    ],
-                    name: "Duplicate Language",
-                    type: "Error",
-                    severity: "High",
-                    description: "",
-                    recommandation: "",
-                    backendUrl: backendUrl,
-                    frontendUrl: frontendUrl,
-                  });
-                } else {
-                  textSetLanguages.push(textSet.language.data.id);
-                }
-              } else {
-                report.lines.push({
-                  subitems: [
-                    content.attributes.slug,
-                    `TextSet ${textSetIndex.toString()}`,
-                  ],
-                  name: "No Language",
-                  type: "Error",
-                  severity: "Very High",
-                  description: "",
-                  recommandation: "",
-                  backendUrl: backendUrl,
-                  frontendUrl: frontendUrl,
-                });
-              }
-
-              if (!textSet.source_language?.data?.id) {
-                report.lines.push({
-                  subitems: [
-                    content.attributes.slug,
-                    `TextSet ${textSetIndex.toString()}`,
-                  ],
-                  name: "No Source Language",
-                  type: "Error",
-                  severity: "High",
-                  description: "",
-                  recommandation: "",
-                  backendUrl: backendUrl,
-                  frontendUrl: frontendUrl,
-                });
-              }
-
-              if (textSet.status !== Enum_Componentsetstextset_Status.Done) {
-                report.lines.push({
-                  subitems: [
-                    content.attributes.slug,
-                    `TextSet ${textSetIndex.toString()}`,
-                  ],
-                  name: "Not Done Status",
-                  type: "Improvement",
-                  severity: "Low",
-                  description: "",
-                  recommandation: "",
-                  backendUrl: backendUrl,
-                  frontendUrl: frontendUrl,
-                });
-              }
-
-              if (!textSet.text || textSet.text.length < 10) {
-                report.lines.push({
-                  subitems: [
-                    content.attributes.slug,
-                    `TextSet ${textSetIndex.toString()}`,
-                  ],
-                  name: "No Text",
-                  type: "Missing",
-                  severity: "Medium",
-                  description: "",
-                  recommandation: "",
-                  backendUrl: backendUrl,
-                  frontendUrl: frontendUrl,
-                });
-              }
-
-              if (
-                textSet.source_language?.data?.id === textSet.language?.data?.id
-              ) {
-                if (textSet.transcribers?.data.length === 0) {
-                  report.lines.push({
-                    subitems: [
-                      content.attributes.slug,
-                      `TextSet ${textSetIndex.toString()}`,
-                    ],
-                    name: "No Transcribers",
-                    type: "Missing",
-                    severity: "High",
-                    description:
-                      "The Content is a Transcription but doesn't credit any Transcribers.",
-                    recommandation: "Add the appropriate Transcribers.",
-                    backendUrl: backendUrl,
-                    frontendUrl: frontendUrl,
-                  });
-                }
-                if (
-                  textSet.translators?.data &&
-                  textSet.translators.data.length > 0
-                ) {
-                  report.lines.push({
-                    subitems: [
-                      content.attributes.slug,
-                      `TextSet ${textSetIndex.toString()}`,
-                    ],
-                    name: "Credited Translators",
-                    type: "Error",
-                    severity: "High",
-                    description:
-                      "The Content is a Transcription but credits one or more Translators.",
-                    recommandation:
-                      "If appropriate, create a Translation Text Set with the Translator credited there.",
-                    backendUrl: backendUrl,
-                    frontendUrl: frontendUrl,
-                  });
-                }
-              } else {
-                if (textSet.translators?.data.length === 0) {
-                  report.lines.push({
-                    subitems: [
-                      content.attributes.slug,
-                      `TextSet ${textSetIndex.toString()}`,
-                    ],
-                    name: "No Translators",
-                    type: "Missing",
-                    severity: "High",
-                    description:
-                      "The Content is a Transcription but doesn't credit any Translators.",
-                    recommandation: "Add the appropriate Translators.",
-                    backendUrl: backendUrl,
-                    frontendUrl: frontendUrl,
-                  });
-                }
-                if (
-                  textSet.transcribers?.data &&
-                  textSet.transcribers.data.length > 0
-                ) {
-                  report.lines.push({
-                    subitems: [
-                      content.attributes.slug,
-                      `TextSet ${textSetIndex.toString()}`,
-                    ],
-                    name: "Credited Transcribers",
-                    type: "Error",
-                    severity: "High",
-                    description:
-                      "The Content is a Translation but credits one or more Transcribers.",
-                    recommandation:
-                      "If appropriate, create a Transcription Text Set with the Transcribers credited there.",
-                    backendUrl: backendUrl,
-                    frontendUrl: frontendUrl,
-                  });
-                }
-              }
-            }
-          });
-        }
-      }
     }
   });
   return report;
diff --git a/src/pages/dev/checkup/libraryitems.tsx b/src/pages/dev/checkup/libraryitems.tsx
index 0555e0f..ddf1dcc 100644
--- a/src/pages/dev/checkup/libraryitems.tsx
+++ b/src/pages/dev/checkup/libraryitems.tsx
@@ -1,23 +1,27 @@
-import AppLayout from "components/AppLayout";
-import Chip from "components/Chip";
-import Button from "components/Inputs/Button";
-import ContentPanel, {
+import { AppLayout } from "components/AppLayout";
+import { Chip } from "components/Chip";
+import { Button } from "components/Inputs/Button";
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import ToolTip from "components/ToolTip";
+import { ToolTip } from "components/ToolTip";
 import {
   DevGetLibraryItemsQuery,
   Enum_Componentcollectionscomponentlibraryimages_Status,
 } from "graphql/generated";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
+import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
 interface Props extends AppStaticProps {
   libraryItems: DevGetLibraryItemsQuery;
 }
 
-export default function CheckupLibraryItems(props: Props): JSX.Element {
+export default function CheckupLibraryItems(
+  props: Immutable<Props>
+): JSX.Element {
   const { libraryItems } = props;
   const testReport = testingLibraryItem(libraryItems);
 
@@ -38,7 +42,8 @@ export default function CheckupLibraryItems(props: Props): JSX.Element {
       {testReport.lines.map((line, index) => (
         <div
           key={index}
-          className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] gap-2 items-center mb-2 justify-items-start"
+          className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr]
+          gap-2 items-center mb-2 justify-items-start"
         >
           <Button
             href={line.frontendUrl}
@@ -113,7 +118,9 @@ type ReportLine = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function testingLibraryItem(libraryItems: Props["libraryItems"]): Report {
+function testingLibraryItem(
+  libraryItems: Immutable<Props["libraryItems"]>
+): Report {
   const report: Report = {
     title: "Contents",
     lines: [],
diff --git a/src/pages/dev/editor.tsx b/src/pages/dev/editor.tsx
index 4311a6e..0e12464 100644
--- a/src/pages/dev/editor.tsx
+++ b/src/pages/dev/editor.tsx
@@ -1,19 +1,21 @@
-import AppLayout from "components/AppLayout";
-import Button from "components/Inputs/Button";
-import Markdawn from "components/Markdown/Markdawn";
-import ContentPanel, {
+import { AppLayout } from "components/AppLayout";
+import { Button } from "components/Inputs/Button";
+import { Markdawn } from "components/Markdown/Markdawn";
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import Popup from "components/Popup";
-import ToolTip from "components/ToolTip";
+import { Popup } from "components/Popup";
+import { ToolTip } from "components/ToolTip";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
+import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 import { useCallback, useState } from "react";
 import TurndownService from "turndown";
 
 interface Props extends AppStaticProps {}
 
-export default function Editor(props: Props): JSX.Element {
+export default function Editor(props: Immutable<Props>): JSX.Element {
   const handleInput = useCallback((text: string) => {
     setMarkdown(text);
   }, []);
@@ -337,7 +339,8 @@ export default function Editor(props: Props): JSX.Element {
               const textarea = event.target as HTMLTextAreaElement;
               handleInput(textarea.value);
             }}
-            className="bg-mid !bg-opacity-40 rounded-xl outline-none p-8 w-full text-black font-monospace h-[70vh]"
+            className="bg-mid !bg-opacity-40 rounded-xl
+            outline-none p-8 w-full text-black font-monospace h-[70vh]"
             value={markdown}
             title="Input textarea"
           />
diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx
index 03340c9..1978b95 100644
--- a/src/pages/gallery/index.tsx
+++ b/src/pages/gallery/index.tsx
@@ -1,10 +1,11 @@
-import AppLayout from "components/AppLayout";
+import { AppLayout } from "components/AppLayout";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
+import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
 interface Props extends AppStaticProps {}
 
-export default function Gallery(props: Props): JSX.Element {
+export default function Gallery(props: Immutable<Props>): JSX.Element {
   const { langui } = props;
   const contentPanel = (
     <iframe
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c318fa2..8b3865a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,13 +1,11 @@
-import PostPage, { Post } from "components/PostPage";
-import { getReadySdk } from "graphql/sdk";
-import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
+import { PostPage } from "components/PostPage";
+import {
+  getPostStaticProps,
+  PostStaticProps,
+} from "graphql/getPostStaticProps";
+import { Immutable } from "helpers/types";
 
-interface Props extends AppStaticProps {
-  post: Post;
-}
-
-export default function Home(props: Props): JSX.Element {
+export default function Home(props: Immutable<PostStaticProps>): JSX.Element {
   const { post, langui, languages, currencies } = props;
   return (
     <PostPage
@@ -17,7 +15,11 @@ export default function Home(props: Props): JSX.Element {
       post={post}
       prependBody={
         <div className="grid place-items-center place-content-center w-full gap-5 text-center">
-          <div className="[mask:url('/icons/accords.svg')] [mask-size:contain] [mask-repeat:no-repeat] [mask-position:center] w-32 aspect-square mobile:w-[50vw] bg-black" />
+          <div
+            className="[mask:url('/icons/accords.svg')] [mask-size:contain]
+            [mask-repeat:no-repeat] [mask-position:center] w-32 aspect-square
+            mobile:w-[50vw] bg-black"
+          />
           <h1 className="text-5xl mb-0">Accord&rsquo;s Library</h1>
           <h2 className="text-xl -mt-5">
             Discover • Analyze • Translate • Archive
@@ -30,21 +32,4 @@ export default function Home(props: Props): JSX.Element {
   );
 }
 
-export async function getStaticProps(
-  context: GetStaticPropsContext
-): Promise<{ notFound: boolean } | { props: Props }> {
-  const sdk = getReadySdk();
-  const slug = "home";
-  const post = await sdk.getPost({
-    slug: slug,
-    language_code: context.locale ?? "en",
-  });
-  if (!post.posts?.data[0].attributes) return { notFound: true };
-  const props: Props = {
-    ...(await getAppStaticProps(context)),
-    post: post.posts.data[0].attributes,
-  };
-  return {
-    props: props,
-  };
-}
+export const getStaticProps = getPostStaticProps("home");
diff --git a/src/pages/library/[slug]/index.tsx b/src/pages/library/[slug]/index.tsx
index d0ee755..9b20761 100644
--- a/src/pages/library/[slug]/index.tsx
+++ b/src/pages/library/[slug]/index.tsx
@@ -1,57 +1,59 @@
-import AppLayout from "components/AppLayout";
-import Chip from "components/Chip";
-import Img, { getAssetURL, ImageQuality } from "components/Img";
-import Button from "components/Inputs/Button";
-import Switch from "components/Inputs/Switch";
-import InsetBox from "components/InsetBox";
-import ContentLine from "components/Library/ContentLine";
-import LightBox from "components/LightBox";
-import NavOption from "components/PanelComponents/NavOption";
-import ReturnButton, {
+import { AppLayout } from "components/AppLayout";
+import { Chip } from "components/Chip";
+import { Img } from "components/Img";
+import { Button } from "components/Inputs/Button";
+import { Switch } from "components/Inputs/Switch";
+import { InsetBox } from "components/InsetBox";
+import { ContentLine } from "components/Library/ContentLine";
+import { NavOption } from "components/PanelComponents/NavOption";
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
-import ThumbnailPreview from "components/PreviewCard";
+import { SubPanel } from "components/Panels/SubPanel";
+import { PreviewCard } from "components/PreviewCard";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import {
   Enum_Componentmetadatabooks_Binding_Type,
   Enum_Componentmetadatabooks_Page_Order,
   GetLibraryItemQuery,
 } from "graphql/generated";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
 import {
-  GetStaticPathsContext,
-  GetStaticPathsResult,
-  GetStaticPropsContext,
-} from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-import {
-  convertMmToInch,
   prettyDate,
   prettyinlineTitle,
   prettyItemSubType,
   prettyItemType,
   prettyPrice,
   prettyURL,
-  sortContent,
-} from "queries/helpers";
+} from "helpers/formatters";
+import { getAssetURL, ImageQuality } from "helpers/img";
+import { convertMmToInch } from "helpers/numbers";
+import { sortContent } from "helpers/others";
+import { Immutable } from "helpers/types";
+import { useLightBox } from "hooks/useLightBox";
+import {
+  GetStaticPathsContext,
+  GetStaticPathsResult,
+  GetStaticPropsContext,
+} from "next";
 import { useState } from "react";
 
 interface Props extends AppStaticProps {
-  item: Exclude<
-    GetLibraryItemQuery["libraryItems"],
-    null | undefined
+  item: NonNullable<
+    GetLibraryItemQuery["libraryItems"]
   >["data"][number]["attributes"];
-  itemId: Exclude<
-    GetLibraryItemQuery["libraryItems"],
-    null | undefined
+  itemId: NonNullable<
+    GetLibraryItemQuery["libraryItems"]
   >["data"][number]["id"];
 }
 
-export default function LibrarySlug(props: Props): JSX.Element {
+export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
   const { item, langui, currencies } = props;
   const appLayout = useAppLayout();
 
@@ -61,10 +63,7 @@ export default function LibrarySlug(props: Props): JSX.Element {
 
   sortContent(item?.contents);
 
-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [lightboxImages, setLightboxImages] = useState([""]);
-  const [lightboxIndex, setLightboxIndex] = useState(0);
-
+  const [openLightBox, LightBox] = useLightBox();
   const [keepInfoVisible, setKeepInfoVisible] = useState(false);
 
   let displayOpenScans = false;
@@ -134,13 +133,7 @@ export default function LibrarySlug(props: Props): JSX.Element {
 
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.large}>
-      <LightBox
-        state={lightboxOpen}
-        setState={setLightboxOpen}
-        images={lightboxImages}
-        index={lightboxIndex}
-        setIndex={setLightboxIndex}
-      />
+      <LightBox />
 
       <ReturnButton
         href="/library/"
@@ -151,17 +144,16 @@ export default function LibrarySlug(props: Props): JSX.Element {
       />
       <div className="grid place-items-center gap-12">
         <div
-          className="drop-shadow-shade-xl w-full h-[50vh] mobile:h-[60vh] desktop:mb-16 relative cursor-pointer"
+          className="drop-shadow-shade-xl w-full h-[50vh]
+          mobile:h-[60vh] desktop:mb-16 relative cursor-pointer"
           onClick={() => {
             if (item?.thumbnail?.data?.attributes) {
-              setLightboxOpen(true);
-              setLightboxImages([
+              openLightBox([
                 getAssetURL(
                   item.thumbnail.data.attributes.url,
                   ImageQuality.Large
                 ),
               ]);
-              setLightboxIndex(0);
             }
           }}
         >
@@ -169,9 +161,7 @@ export default function LibrarySlug(props: Props): JSX.Element {
             <Img
               image={item.thumbnail.data.attributes}
               quality={ImageQuality.Large}
-              layout="fill"
-              objectFit="contain"
-              priority
+              className="w-full h-full object-contain"
             />
           ) : (
             <div className="w-full aspect-[21/29.7] bg-light rounded-xl"></div>
@@ -212,7 +202,7 @@ export default function LibrarySlug(props: Props): JSX.Element {
               <>
                 {item?.urls && item.urls.length ? (
                   <div className="flex flex-row place-items-center gap-3">
-                    <p>Available at</p>
+                    <p>{langui.available_at}</p>
                     {item.urls.map((url) => (
                       <>
                         {url?.url && (
@@ -228,7 +218,7 @@ export default function LibrarySlug(props: Props): JSX.Element {
                     ))}
                   </div>
                 ) : (
-                  <p>This item is not for sale or is no longer available</p>
+                  <p>{langui.item_not_available}</p>
                 )}
               </>
             )}
@@ -238,13 +228,17 @@ export default function LibrarySlug(props: Props): JSX.Element {
         {item?.gallery && item.gallery.data.length > 0 && (
           <div id="gallery" className="grid place-items-center gap-8  w-full">
             <h2 className="text-2xl">{langui.gallery}</h2>
-            <div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
+            <div
+              className="grid w-full gap-8 items-end
+              grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"
+            >
               {item.gallery.data.map((galleryItem, index) => (
                 <>
                   {galleryItem.attributes && (
                     <div
                       key={galleryItem.id}
-                      className="relative aspect-square hover:scale-[1.02] transition-transform cursor-pointer"
+                      className="relative aspect-square hover:scale-[1.02]
+                      transition-transform cursor-pointer"
                       onClick={() => {
                         if (item.gallery?.data) {
                           const images: string[] = [];
@@ -257,18 +251,14 @@ export default function LibrarySlug(props: Props): JSX.Element {
                                 )
                               );
                           });
-                          setLightboxOpen(true);
-                          setLightboxImages(images);
-                          setLightboxIndex(index);
+                          openLightBox(images, index);
                         }
                       }}
                     >
-                      <div className="bg-light absolute inset-0 rounded-lg drop-shadow-shade-md"></div>
                       <Img
-                        className="rounded-lg"
+                        className="bg-light rounded-lg drop-shadow-shade-md
+                        w-full h-full object-cover"
                         image={galleryItem.attributes}
-                        layout="fill"
-                        objectFit="cover"
                       />
                     </div>
                   )}
@@ -425,14 +415,17 @@ export default function LibrarySlug(props: Props): JSX.Element {
             </h2>
 
             <div className="-mt-6 mb-8 flex flex-row gap-2 place-items-center coarse:hidden">
-              <p className="flex-shrink-0">{"Always show info"}:</p>
+              <p className="flex-shrink-0">{langui.always_show_info}:</p>
               <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
             </div>
-            <div className="grid gap-8 items-end mobile:grid-cols-2 grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
+            <div
+              className="grid gap-8 items-end mobile:grid-cols-2
+              grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full"
+            >
               {item.subitems.data.map((subitem) => (
                 <>
                   {subitem.attributes && (
-                    <ThumbnailPreview
+                    <PreviewCard
                       key={subitem.id}
                       href={`/library/${subitem.attributes.slug}`}
                       title={subitem.attributes.title}
diff --git a/src/pages/library/[slug]/scans.tsx b/src/pages/library/[slug]/scans.tsx
index cab0072..ce183dc 100644
--- a/src/pages/library/[slug]/scans.tsx
+++ b/src/pages/library/[slug]/scans.tsx
@@ -1,47 +1,46 @@
-import AppLayout from "components/AppLayout";
-import ScanSet from "components/Library/ScanSet";
-import ScanSetCover from "components/Library/ScanSetCover";
-import LightBox from "components/LightBox";
-import NavOption from "components/PanelComponents/NavOption";
-import ReturnButton, {
+import { AppLayout } from "components/AppLayout";
+import { ScanSet } from "components/Library/ScanSet";
+import { ScanSetCover } from "components/Library/ScanSetCover";
+import { NavOption } from "components/PanelComponents/NavOption";
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel, {
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
+import { SubPanel } from "components/Panels/SubPanel";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { GetLibraryItemScansQuery } from "graphql/generated";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
+import { prettyinlineTitle, prettySlug } from "helpers/formatters";
+import { sortContent } from "helpers/others";
+import { Immutable } from "helpers/types";
+import { useLightBox } from "hooks/useLightBox";
 import {
   GetStaticPathsContext,
   GetStaticPathsResult,
   GetStaticPropsContext,
 } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-import { prettyinlineTitle, prettySlug, sortContent } from "queries/helpers";
-import { useState } from "react";
 
 interface Props extends AppStaticProps {
-  item: Exclude<
-    GetLibraryItemScansQuery["libraryItems"],
-    null | undefined
+  item: NonNullable<
+    GetLibraryItemScansQuery["libraryItems"]
   >["data"][number]["attributes"];
-  itemId: Exclude<
-    GetLibraryItemScansQuery["libraryItems"],
-    null | undefined
+  itemId: NonNullable<
+    GetLibraryItemScansQuery["libraryItems"]
   >["data"][number]["id"];
 }
 
-export default function LibrarySlug(props: Props): JSX.Element {
+export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
   const { item, langui, languages } = props;
   const appLayout = useAppLayout();
 
   sortContent(item?.contents);
 
-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [lightboxImages, setLightboxImages] = useState([""]);
-  const [lightboxIndex, setLightboxIndex] = useState(0);
+  const [openLightBox, LightBox] = useLightBox();
 
   const subPanel = (
     <SubPanel>
@@ -61,7 +60,9 @@ export default function LibrarySlug(props: Props): JSX.Element {
           subtitle={
             content.attributes?.range[0]?.__typename ===
             "ComponentRangePageRange"
-              ? `${content.attributes.range[0].starting_page} → ${content.attributes.range[0].ending_page}`
+              ? `${content.attributes.range[0].starting_page}` +
+                `→` +
+                `${content.attributes.range[0].ending_page}`
               : undefined
           }
           onClick={() => appLayout.setSubPanelOpen(false)}
@@ -73,13 +74,7 @@ export default function LibrarySlug(props: Props): JSX.Element {
 
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.large}>
-      <LightBox
-        state={lightboxOpen}
-        setState={setLightboxOpen}
-        images={lightboxImages}
-        index={lightboxIndex}
-        setIndex={setLightboxIndex}
-      />
+      <LightBox />
 
       <ReturnButton
         href={`/library/${item?.slug}`}
@@ -92,9 +87,7 @@ export default function LibrarySlug(props: Props): JSX.Element {
       {item?.images && (
         <ScanSetCover
           images={item.images}
-          setLightboxImages={setLightboxImages}
-          setLightboxIndex={setLightboxIndex}
-          setLightboxOpen={setLightboxOpen}
+          openLightBox={openLightBox}
           languages={languages}
           langui={langui}
         />
@@ -106,9 +99,7 @@ export default function LibrarySlug(props: Props): JSX.Element {
             <ScanSet
               key={content.id}
               scanSet={content.attributes.scan_set}
-              setLightboxImages={setLightboxImages}
-              setLightboxIndex={setLightboxIndex}
-              setLightboxOpen={setLightboxOpen}
+              openLightBox={openLightBox}
               slug={content.attributes.slug}
               title={prettySlug(content.attributes.slug, item.slug)}
               languages={languages}
diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx
index 89eb620..f8c2e5f 100644
--- a/src/pages/library/index.tsx
+++ b/src/pages/library/index.tsx
@@ -1,35 +1,34 @@
-import AppLayout from "components/AppLayout";
-import Chip from "components/Chip";
-import Select from "components/Inputs/Select";
-import Switch from "components/Inputs/Switch";
-import PanelHeader from "components/PanelComponents/PanelHeader";
-import ContentPanel, {
+import { AppLayout } from "components/AppLayout";
+import { Chip } from "components/Chip";
+import { Select } from "components/Inputs/Select";
+import { Switch } from "components/Inputs/Switch";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
-import ThumbnailPreview from "components/PreviewCard";
+import { SubPanel } from "components/Panels/SubPanel";
+import { PreviewCard } from "components/PreviewCard";
 import { GetLibraryItemsPreviewQuery } from "graphql/generated";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
-import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 import {
-  convertPrice,
   prettyDate,
   prettyinlineTitle,
   prettyItemSubType,
-} from "queries/helpers";
+} from "helpers/formatters";
+import { convertPrice } from "helpers/numbers";
+import { Immutable } from "helpers/types";
+import { GetStaticPropsContext } from "next";
 import { useEffect, useState } from "react";
 
 interface Props extends AppStaticProps {
-  items: Exclude<
-    GetLibraryItemsPreviewQuery["libraryItems"],
-    null | undefined
-  >["data"];
+  items: NonNullable<GetLibraryItemsPreviewQuery["libraryItems"]>["data"];
 }
 
-type GroupLibraryItems = Map<string, Props["items"]>;
+type GroupLibraryItems = Map<string, Immutable<Props["items"]>>;
 
-export default function Library(props: Props): JSX.Element {
+export default function Library(props: Immutable<Props>): JSX.Element {
   const { langui, items: libraryItems, currencies } = props;
 
   const [showSubitems, setShowSubitems] = useState<boolean>(false);
@@ -39,7 +38,7 @@ export default function Library(props: Props): JSX.Element {
   const [groupingMethod, setGroupingMethod] = useState<number>(-1);
   const [keepInfoVisible, setKeepInfoVisible] = useState(false);
 
-  const [filteredItems, setFilteredItems] = useState<Props["items"]>(
+  const [filteredItems, setFilteredItems] = useState(
     filterItems(
       showSubitems,
       showPrimaryItems,
@@ -48,11 +47,11 @@ export default function Library(props: Props): JSX.Element {
     )
   );
 
-  const [sortedItems, setSortedItem] = useState<Props["items"]>(
+  const [sortedItems, setSortedItem] = useState(
     sortBy(groupingMethod, filteredItems, currencies)
   );
 
-  const [groups, setGroups] = useState<GroupLibraryItems>(
+  const [groups, setGroups] = useState(
     getGroups(langui, groupingMethod, sortedItems)
   );
 
@@ -128,7 +127,7 @@ export default function Library(props: Props): JSX.Element {
       </div>
 
       <div className="flex flex-row gap-2 place-items-center coarse:hidden">
-        <p className="flex-shrink-0">{"Always show info"}:</p>
+        <p className="flex-shrink-0">{langui.always_show_info}:</p>
         <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
       </div>
     </SubPanel>
@@ -142,7 +141,8 @@ export default function Library(props: Props): JSX.Element {
               {name && (
                 <h2
                   key={`h2${name}`}
-                  className="text-2xl pb-2 pt-10 first-of-type:pt-0 flex flex-row place-items-center gap-2"
+                  className="text-2xl pb-2 pt-10 first-of-type:pt-0
+                  flex flex-row place-items-center gap-2"
                 >
                   {name}
                   <Chip>{`${items.length} ${
@@ -154,12 +154,14 @@ export default function Library(props: Props): JSX.Element {
               )}
               <div
                 key={`items${name}`}
-                className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0"
+                className="grid gap-8 mobile:gap-4 items-end mobile:grid-cols-2
+                desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))]
+                pb-12 border-b-[3px] border-dotted last-of-type:border-0"
               >
                 {items.map((item) => (
                   <>
                     {item.attributes && (
-                      <ThumbnailPreview
+                      <PreviewCard
                         key={item.id}
                         href={`/library/${item.attributes.slug}`}
                         title={item.attributes.title}
@@ -224,7 +226,7 @@ export async function getStaticProps(
 function getGroups(
   langui: AppStaticProps["langui"],
   groupByType: number,
-  items: Props["items"]
+  items: Immutable<Props["items"]>
 ): GroupLibraryItems {
   switch (groupByType) {
     case 0: {
@@ -262,7 +264,7 @@ function getGroups(
     }
 
     case 1: {
-      const group: GroupLibraryItems = new Map();
+      const group = new Map();
       group.set(langui.audio ?? "Audio", []);
       group.set(langui.game ?? "Game", []);
       group.set(langui.textual ?? "Textual", []);
@@ -334,7 +336,7 @@ function getGroups(
             years.push(item.attributes.release_date.year);
         }
       });
-      const group: GroupLibraryItems = new Map();
+      const group = new Map();
       years.sort((a, b) => a - b);
       years.map((year) => {
         group.set(year.toString(), []);
@@ -352,7 +354,7 @@ function getGroups(
     }
 
     default: {
-      const group: GroupLibraryItems = new Map();
+      const group = new Map();
       group.set("", items);
       return group;
     }
@@ -363,8 +365,8 @@ function filterItems(
   showSubitems: boolean,
   showPrimaryItems: boolean,
   showSecondaryItems: boolean,
-  items: Props["items"]
-): Props["items"] {
+  items: Immutable<Props["items"]>
+): Immutable<Props["items"]> {
   return [...items].filter((item) => {
     if (!showSubitems && !item.attributes?.root_item) return false;
     if (
@@ -384,9 +386,9 @@ function filterItems(
 
 function sortBy(
   orderByType: number,
-  items: Props["items"],
+  items: Immutable<Props["items"]>,
   currencies: AppStaticProps["currencies"]
-): Props["items"] {
+): Immutable<Props["items"]> {
   switch (orderByType) {
     case 0:
       return [...items].sort((a, b) => {
diff --git a/src/pages/merch/index.tsx b/src/pages/merch/index.tsx
index 9d0708d..edb4218 100644
--- a/src/pages/merch/index.tsx
+++ b/src/pages/merch/index.tsx
@@ -1,11 +1,12 @@
-import AppLayout from "components/AppLayout";
-import PanelHeader from "components/PanelComponents/PanelHeader";
-import SubPanel from "components/Panels/SubPanel";
+import { AppLayout } from "components/AppLayout";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
+import { SubPanel } from "components/Panels/SubPanel";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
+import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
 interface Props extends AppStaticProps {}
-export default function Merch(props: Props): JSX.Element {
+export default function Merch(props: Immutable<Props>): JSX.Element {
   const { langui } = props;
   const subPanel = (
     <SubPanel>
diff --git a/src/pages/news/[slug].tsx b/src/pages/news/[slug].tsx
index 58e2d78..497dace 100644
--- a/src/pages/news/[slug].tsx
+++ b/src/pages/news/[slug].tsx
@@ -1,22 +1,20 @@
-import PostPage, { Post } from "components/PostPage";
-import { GetPostQuery } from "graphql/generated";
+import { PostPage } from "components/PostPage";
+import { AppStaticProps } from "graphql/getAppStaticProps";
+import {
+  getPostStaticProps,
+  PostStaticProps,
+} from "graphql/getPostStaticProps";
 import { getReadySdk } from "graphql/sdk";
+import { Immutable } from "helpers/types";
 import {
   GetStaticPathsContext,
   GetStaticPathsResult,
   GetStaticPropsContext,
 } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
-interface Props extends AppStaticProps {
-  post: Post;
-  postId: Exclude<
-    GetPostQuery["posts"],
-    null | undefined
-  >["data"][number]["id"];
-}
+interface Props extends AppStaticProps, PostStaticProps {}
 
-export default function LibrarySlug(props: Props): JSX.Element {
+export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
   const { post, langui, languages, currencies } = props;
   return (
     <PostPage
@@ -36,21 +34,8 @@ export default function LibrarySlug(props: Props): JSX.Element {
 export async function getStaticProps(
   context: GetStaticPropsContext
 ): Promise<{ notFound: boolean } | { props: Props }> {
-  const sdk = getReadySdk();
   const slug = context.params?.slug ? context.params.slug.toString() : "";
-  const post = await sdk.getPost({
-    slug: slug,
-    language_code: context.locale ?? "en",
-  });
-  if (!post.posts?.data[0].attributes) return { notFound: true };
-  const props: Props = {
-    ...(await getAppStaticProps(context)),
-    post: post.posts.data[0].attributes,
-    postId: post.posts.data[0].id,
-  };
-  return {
-    props: props,
-  };
+  return await getPostStaticProps(slug)(context);
 }
 
 export async function getStaticPaths(
diff --git a/src/pages/news/index.tsx b/src/pages/news/index.tsx
index e4bad83..6890ebc 100644
--- a/src/pages/news/index.tsx
+++ b/src/pages/news/index.tsx
@@ -1,35 +1,30 @@
-import AppLayout from "components/AppLayout";
-import Switch from "components/Inputs/Switch";
-import PanelHeader from "components/PanelComponents/PanelHeader";
-import ContentPanel, {
+import { AppLayout } from "components/AppLayout";
+import { Switch } from "components/Inputs/Switch";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
+import {
+  ContentPanel,
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
-import ThumbnailPreview from "components/PreviewCard";
+import { SubPanel } from "components/Panels/SubPanel";
+import { PreviewCard } from "components/PreviewCard";
 import { GetPostsPreviewQuery } from "graphql/generated";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
+import { prettyDate, prettySlug } from "helpers/formatters";
+import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-import { prettyDate, prettySlug } from "queries/helpers";
 import { useState } from "react";
 
 interface Props extends AppStaticProps {
-  posts: Exclude<GetPostsPreviewQuery["posts"], null | undefined>["data"];
+  posts: NonNullable<GetPostsPreviewQuery["posts"]>["data"];
 }
 
-export default function News(props: Props): JSX.Element {
-  const { langui, posts } = props;
+export default function News(props: Immutable<Props>): JSX.Element {
+  const { langui } = props;
+  const posts = sortPosts(props.posts);
 
   const [keepInfoVisible, setKeepInfoVisible] = useState(true);
 
-  posts
-    .sort((a, b) => {
-      const dateA = a.attributes?.date ? prettyDate(a.attributes.date) : "9999";
-      const dateB = b.attributes?.date ? prettyDate(b.attributes.date) : "9999";
-      return dateA.localeCompare(dateB);
-    })
-    .reverse();
-
   const subPanel = (
     <SubPanel>
       <PanelHeader
@@ -39,7 +34,7 @@ export default function News(props: Props): JSX.Element {
       />
 
       <div className="flex flex-row gap-2 place-items-center coarse:hidden">
-        <p className="flex-shrink-0">{"Always show info"}:</p>
+        <p className="flex-shrink-0">{langui.always_show_info}:</p>
         <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
       </div>
     </SubPanel>
@@ -47,11 +42,14 @@ export default function News(props: Props): JSX.Element {
 
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.large}>
-      <div className="grid gap-8 items-end grid-cols-1 desktop:grid-cols-[repeat(auto-fill,_minmax(20rem,1fr))]">
+      <div
+        className="grid gap-8 items-end grid-cols-1
+        desktop:grid-cols-[repeat(auto-fill,_minmax(20rem,1fr))]"
+      >
         {posts.map((post) => (
           <>
             {post.attributes && (
-              <ThumbnailPreview
+              <PreviewCard
                 key={post.id}
                 href={`/news/${post.attributes.slug}`}
                 title={
@@ -103,3 +101,17 @@ export async function getStaticProps(
     props: props,
   };
 }
+
+function sortPosts(
+  posts: Immutable<Props["posts"]>
+): Immutable<Props["posts"]> {
+  const sortedPosts = [...posts] as Props["posts"];
+  sortedPosts
+    .sort((a, b) => {
+      const dateA = a.attributes?.date ? prettyDate(a.attributes.date) : "9999";
+      const dateB = b.attributes?.date ? prettyDate(b.attributes.date) : "9999";
+      return dateA.localeCompare(dateB);
+    })
+    .reverse();
+  return sortedPosts as Immutable<Props["posts"]>;
+}
diff --git a/src/pages/wiki/chronology.tsx b/src/pages/wiki/chronology.tsx
index 6fcbe6b..a867a01 100644
--- a/src/pages/wiki/chronology.tsx
+++ b/src/pages/wiki/chronology.tsx
@@ -1,28 +1,25 @@
-import AppLayout from "components/AppLayout";
-import InsetBox from "components/InsetBox";
-import NavOption from "components/PanelComponents/NavOption";
-import ReturnButton, {
+import { AppLayout } from "components/AppLayout";
+import { InsetBox } from "components/InsetBox";
+import { NavOption } from "components/PanelComponents/NavOption";
+import {
+  ReturnButton,
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
-import ContentPanel from "components/Panels/ContentPanel";
-import SubPanel from "components/Panels/SubPanel";
-import ChronologyYearComponent from "components/Wiki/Chronology/ChronologyYearComponent";
+import { ContentPanel } from "components/Panels/ContentPanel";
+import { SubPanel } from "components/Panels/SubPanel";
+import { ChronologyYearComponent } from "components/Wiki/Chronology/ChronologyYearComponent";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { GetChronologyItemsQuery, GetErasQuery } from "graphql/generated";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
+import { prettySlug } from "helpers/formatters";
 import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-import { prettySlug } from "queries/helpers";
 
 interface Props extends AppStaticProps {
-  chronologyItems: Exclude<
-    GetChronologyItemsQuery["chronologyItems"],
-    null | undefined
-  >["data"];
-  chronologyEras: Exclude<
-    GetErasQuery["chronologyEras"],
-    null | undefined
+  chronologyItems: NonNullable<
+    GetChronologyItemsQuery["chronologyItems"]
   >["data"];
+  chronologyEras: NonNullable<GetErasQuery["chronologyEras"]>["data"];
 }
 
 export default function Chronology(props: Props): JSX.Element {
diff --git a/src/pages/wiki/index.tsx b/src/pages/wiki/index.tsx
index cd61d94..e783a41 100644
--- a/src/pages/wiki/index.tsx
+++ b/src/pages/wiki/index.tsx
@@ -1,13 +1,14 @@
-import AppLayout from "components/AppLayout";
-import NavOption from "components/PanelComponents/NavOption";
-import PanelHeader from "components/PanelComponents/PanelHeader";
-import SubPanel from "components/Panels/SubPanel";
+import { AppLayout } from "components/AppLayout";
+import { NavOption } from "components/PanelComponents/NavOption";
+import { PanelHeader } from "components/PanelComponents/PanelHeader";
+import { SubPanel } from "components/Panels/SubPanel";
+import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
+import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
-import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 
 interface Props extends AppStaticProps {}
 
-export default function Wiki(props: Props): JSX.Element {
+export default function Wiki(props: Immutable<Props>): JSX.Element {
   const { langui } = props;
   const subPanel = (
     <SubPanel>
diff --git a/tailwind.config.js b/tailwind.config.js
index 5beab85..03baaca 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -159,5 +159,13 @@ module.exports = {
         },
       });
     }),
+
+    plugin(function ({ addUtilities }) {
+      addUtilities({
+        ".break-words": {
+          "word-break": "break-word",
+        },
+      });
+    }),
   ],
 };