Add Modal

.github/workflows/ci.yml

@@ -0,0 +1,24 @@
+name: CI
+
+on: push
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2.2.2
+        with:
+          version: 7
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Run build
+        run: VITE_API_URL="https://staging-api.modrinth.com/v2/" pnpm build
+      - name: Run lint
+        run: pnpm lint
+      - name: Run check
+        run: pnpm check

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "locales"]
+	path = locales
+	url = https://github.com/modrinth/translations

.vscode/settings.json

@@ -19,5 +19,8 @@
 	"editor.formatOnPaste": true,
 	"[javascript]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+  "[markdown]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	}
 }

README.md

@@ -17,6 +17,28 @@ pnpm install # Install dependencies
 pnpm dev # Run dev server
 ```
 
+### Adding new components
+
+> Replace `ComponentName` with your component name in the steps below
+
+1. Create a `ComponentName.svelte` file in `src/package/components`
+2. Add an export for your component in [./src/package/index.ts](./src/package/index.ts)
+   ```
+   export { default as ComponentName } from './components/ComponentName.svelte'
+   ```
+3. Create a `ComponentName.md` file for documentation in `src/routes/components`
+4. Add an example of your component in your `ComponentName.md` file, like so:
+
+   ````md
+   ```svelte example raised
+   <script lang="ts">
+   	import { ComponentName } from 'omorphia'
+   </script>
+
+   <ComponentName />
+   ```
+   ````
+
 ## Packaging
 
 ```bash

locales

@@ -0,0 +1 @@
+Subproject commit a10e7f264d805e71850730402eeba420d1b8c523

package.json

@@ -30,6 +30,7 @@
 		"sveld": "^0.13.4",
 		"svelte": "^3.48.0",
 		"svelte-check": "^2.2.6",
+		"svelte-intl-precompile": "^0.11.1",
 		"svelte-preprocess": "^4.10.1",
 		"svelte2tsx": "^0.5.5",
 		"tslib": "^2.3.1",

pnpm-lock.yaml

@@ -40,6 +40,7 @@ specifiers:
   sveld: ^0.13.4
   svelte: ^3.48.0
   svelte-check: ^2.2.6
+  svelte-intl-precompile: ^0.11.1
   svelte-preprocess: ^4.10.1
   svelte-tiny-virtual-list: ^2.0.1
   svelte-use-click-outside: ^1.0.0
@@ -97,6 +98,7 @@ devDependencies:
   sveld: 0.13.4_jw3wiphoy34i6ad2hx6ga3jifa
   svelte: 3.48.0
   svelte-check: 2.4.5_2pvebpkgu3ohgo43qaf5qmcxwm
+  svelte-intl-precompile: 0.11.1_svelte@3.48.0
   svelte-preprocess: 4.10.4_44qe5g6fi6uxvss56imdgyaaty
   svelte2tsx: 0.5.5_c64miirrcucob5yjzfkddrmila
   tslib: 2.3.1
@@ -104,6 +106,14 @@ devDependencies:
 
 packages:
 
+  /@ampproject/remapping/2.2.0:
+    resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.1.1
+      '@jridgewell/trace-mapping': 0.3.13
+    dev: true
+
   /@antfu/install-pkg/0.1.0:
     resolution: {integrity: sha512-VaIJd3d1o7irZfK1U0nvBsHMyjkuyMP3HKYVV53z8DKyulkHKmjhhtccXO51WSPeeSHIeoJEoNOKavYpS7jkZw==}
     dependencies:
@@ -127,11 +137,146 @@ packages:
       '@babel/highlight': 7.16.10
     dev: true
 
+  /@babel/code-frame/7.16.7:
+    resolution: {integrity: sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.16.10
+    dev: true
+
+  /@babel/compat-data/7.17.10:
+    resolution: {integrity: sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/core/7.18.2:
+    resolution: {integrity: sha512-A8pri1YJiC5UnkdrWcmfZTJTV85b4UXTAfImGmCfYmax4TR9Cw8sDS0MOk++Gp2mE/BefVJ5nwy5yzqNJbP/DQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.2.0
+      '@babel/code-frame': 7.16.7
+      '@babel/generator': 7.18.2
+      '@babel/helper-compilation-targets': 7.18.2_@babel+core@7.18.2
+      '@babel/helper-module-transforms': 7.18.0
+      '@babel/helpers': 7.18.2
+      '@babel/parser': 7.18.4
+      '@babel/template': 7.16.7
+      '@babel/traverse': 7.18.2
+      '@babel/types': 7.18.4
+      convert-source-map: 1.8.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.1
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/generator/7.18.2:
+    resolution: {integrity: sha512-W1lG5vUwFvfMd8HVXqdfbuG7RuaSrTCCD8cl8fP8wOivdbtbIg2Db3IWUcgvfxKbbn6ZBGYRW/Zk1MIwK49mgw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.18.4
+      '@jridgewell/gen-mapping': 0.3.1
+      jsesc: 2.5.2
+    dev: true
+
+  /@babel/helper-compilation-targets/7.18.2_@babel+core@7.18.2:
+    resolution: {integrity: sha512-s1jnPotJS9uQnzFtiZVBUxe67CuBa679oWFHpxYYnTpRL/1ffhyX44R9uYiXoa/pLXcY9H2moJta0iaanlk/rQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/compat-data': 7.17.10
+      '@babel/core': 7.18.2
+      '@babel/helper-validator-option': 7.16.7
+      browserslist: 4.20.4
+      semver: 6.3.0
+    dev: true
+
+  /@babel/helper-environment-visitor/7.18.2:
+    resolution: {integrity: sha512-14GQKWkX9oJzPiQQ7/J36FTXcD4kSp8egKjO9nINlSKiHITRA9q/R74qu8S9xlc/b/yjsJItQUeeh3xnGN0voQ==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-function-name/7.17.9:
+    resolution: {integrity: sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.16.7
+      '@babel/types': 7.18.4
+    dev: true
+
+  /@babel/helper-hoist-variables/7.16.7:
+    resolution: {integrity: sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.18.4
+    dev: true
+
+  /@babel/helper-module-imports/7.16.7:
+    resolution: {integrity: sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.18.4
+    dev: true
+
+  /@babel/helper-module-transforms/7.18.0:
+    resolution: {integrity: sha512-kclUYSUBIjlvnzN2++K9f2qzYKFgjmnmjwL4zlmU5f8ZtzgWe8s0rUPSTGy2HmK4P8T52MQsS+HTQAgZd3dMEA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-environment-visitor': 7.18.2
+      '@babel/helper-module-imports': 7.16.7
+      '@babel/helper-simple-access': 7.18.2
+      '@babel/helper-split-export-declaration': 7.16.7
+      '@babel/helper-validator-identifier': 7.16.7
+      '@babel/template': 7.16.7
+      '@babel/traverse': 7.18.2
+      '@babel/types': 7.18.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-plugin-utils/7.17.12:
+    resolution: {integrity: sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-simple-access/7.18.2:
+    resolution: {integrity: sha512-7LIrjYzndorDY88MycupkpQLKS1AFfsVRm2k/9PtKScSy5tZq0McZTj+DiMRynboZfIqOKvo03pmhTaUgiD6fQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.18.4
+    dev: true
+
+  /@babel/helper-split-export-declaration/7.16.7:
+    resolution: {integrity: sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.18.4
+    dev: true
+
   /@babel/helper-validator-identifier/7.16.7:
     resolution: {integrity: sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==}
     engines: {node: '>=6.9.0'}
     dev: true
 
+  /@babel/helper-validator-option/7.16.7:
+    resolution: {integrity: sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helpers/7.18.2:
+    resolution: {integrity: sha512-j+d+u5xT5utcQSzrh9p+PaJX94h++KN+ng9b9WEJq7pkUPAd61FGqhjuUEdfknb3E/uDBb7ruwEeKkIxNJPIrg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.16.7
+      '@babel/traverse': 7.18.2
+      '@babel/types': 7.18.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@babel/highlight/7.16.10:
     resolution: {integrity: sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==}
     engines: {node: '>=6.9.0'}
@@ -141,6 +286,14 @@ packages:
       js-tokens: 4.0.0
     dev: true
 
+  /@babel/parser/7.18.4:
+    resolution: {integrity: sha512-FDge0dFazETFcxGw/EXzOkN8uJp0PC7Qbm+Pe9T+av2zlBpOgunFHkQPPn+eRuClU73JF+98D531UgayY89tow==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.18.4
+    dev: true
+
   /@babel/runtime/7.17.9:
     resolution: {integrity: sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==}
     engines: {node: '>=6.9.0'}
@@ -148,6 +301,41 @@ packages:
       regenerator-runtime: 0.13.9
     dev: false
 
+  /@babel/template/7.16.7:
+    resolution: {integrity: sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.16.7
+      '@babel/parser': 7.18.4
+      '@babel/types': 7.18.4
+    dev: true
+
+  /@babel/traverse/7.18.2:
+    resolution: {integrity: sha512-9eNwoeovJ6KH9zcCNnENY7DMFwTU9JdGCFtqNLfUAqtUHRCOsTOqWoffosP8vKmNYeSBUv3yVJXjfd8ucwOjUA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.16.7
+      '@babel/generator': 7.18.2
+      '@babel/helper-environment-visitor': 7.18.2
+      '@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.18.4
+      '@babel/types': 7.18.4
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/types/7.18.4:
+    resolution: {integrity: sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.16.7
+      to-fast-properties: 2.0.0
+    dev: true
+
   /@csstools/postcss-cascade-layers/1.0.3_postcss@8.4.8:
     resolution: {integrity: sha512-fvXP0+dcllGtRKAjA5n5tBr57xWQalKky09hSiXAZ9qqjHn0sDuQV2Jz0Y5zHRQ6iGrAjJZOf2+xQj3yuXfLwA==}
     engines: {node: ^12 || ^14 || >=16}
@@ -300,6 +488,34 @@ packages:
       - supports-color
     dev: true
 
+  /@formatjs/ecma402-abstract/1.11.7:
+    resolution: {integrity: sha512-uNaok4XWMJBtPZk/veTDamFCm5HeWJUk2jwoVfH5/+wenQ60QHjH6T3UQ0GOOCz9jpKmed7vqOri7xSf//Dt7g==}
+    dependencies:
+      '@formatjs/intl-localematcher': 0.2.28
+      tslib: 2.4.0
+    dev: true
+
+  /@formatjs/icu-messageformat-parser/2.1.3:
+    resolution: {integrity: sha512-hsdAn1dXcujW/G8DHw0iiIy7357pw10yOulCrL6xrQOKJAxT7m7EgpG0Hm1OW9xqaLEzqWyE/jA2AGVnOCaCQw==}
+    dependencies:
+      '@formatjs/ecma402-abstract': 1.11.7
+      '@formatjs/icu-skeleton-parser': 1.3.9
+      tslib: 2.4.0
+    dev: true
+
+  /@formatjs/icu-skeleton-parser/1.3.9:
+    resolution: {integrity: sha512-s9THwwhiiSzbGSk73FP6Ur2MBwEj1vfgYDHKa5FiXGQMfYzdRdRvyH1dgqNgSFJPB6PM3DKtkloJLjpqpSDNUg==}
+    dependencies:
+      '@formatjs/ecma402-abstract': 1.11.7
+      tslib: 2.4.0
+    dev: true
+
+  /@formatjs/intl-localematcher/0.2.28:
+    resolution: {integrity: sha512-FLsc6Gifs1np/8HnCn/7Q+lHMmenrD5fuDhRT82yj0gi9O19kfaFwjQUw1gZsyILuRyT93GuzdifHj7TKRhBcw==}
+    dependencies:
+      tslib: 2.4.0
+    dev: true
+
   /@humanwhocodes/config-array/0.5.0:
     resolution: {integrity: sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==}
     engines: {node: '>=10.10.0'}
@@ -747,6 +963,44 @@ packages:
       regenerator-runtime: 0.13.9
     dev: false
 
+  /@jridgewell/gen-mapping/0.1.1:
+    resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.1
+      '@jridgewell/sourcemap-codec': 1.4.13
+    dev: true
+
+  /@jridgewell/gen-mapping/0.3.1:
+    resolution: {integrity: sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.1
+      '@jridgewell/sourcemap-codec': 1.4.13
+      '@jridgewell/trace-mapping': 0.3.13
+    dev: true
+
+  /@jridgewell/resolve-uri/3.0.7:
+    resolution: {integrity: sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/set-array/1.1.1:
+    resolution: {integrity: sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/sourcemap-codec/1.4.13:
+    resolution: {integrity: sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==}
+    dev: true
+
+  /@jridgewell/trace-mapping/0.3.13:
+    resolution: {integrity: sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.0.7
+      '@jridgewell/sourcemap-codec': 1.4.13
+    dev: true
+
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1174,6 +1428,10 @@ packages:
       sprintf-js: 1.0.3
     dev: true
 
+  /argparse/2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+    dev: true
+
   /array-union/1.0.2:
     resolution: {integrity: sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=}
     engines: {node: '>=0.10.0'}
@@ -1233,6 +1491,16 @@ packages:
       postcss-value-parser: 4.2.0
     dev: false
 
+  /babel-plugin-precompile-intl/0.5.1:
+    resolution: {integrity: sha512-ki0llx5xZT1jQeLUIILVlAaaJQl/Jk+YTCXQZXoqjdwdUeAd2FTAOUWOYKk0W4KC+ONGFqtYfKmyjZkm5hlhpw==}
+    dependencies:
+      '@babel/core': 7.18.2
+      '@babel/helper-plugin-utils': 7.17.12
+      '@formatjs/icu-messageformat-parser': 2.1.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1309,7 +1577,6 @@ packages:
       escalade: 3.1.1
       node-releases: 2.0.5
       picocolors: 1.0.0
-    dev: false
 
   /buffer-crc32/0.2.13:
     resolution: {integrity: sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=}
@@ -1370,7 +1637,6 @@ packages:
 
   /caniuse-lite/1.0.30001349:
     resolution: {integrity: sha512-VFaWW3jeo6DLU5rwdiasosxhYSduJgSGil4cSyX3/85fbctlE58pXAkWyuRmVA0r2RxsOSVYUTZcySJ8WpbTxw==}
-    dev: false
 
   /chalk/2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
@@ -1502,6 +1768,12 @@ packages:
     resolution: {integrity: sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=}
     dev: false
 
+  /convert-source-map/1.8.0:
+    resolution: {integrity: sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==}
+    dependencies:
+      safe-buffer: 5.1.2
+    dev: true
+
   /core-util-is/1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
     dev: false
@@ -1801,7 +2073,6 @@ packages:
 
   /electron-to-chromium/1.4.147:
     resolution: {integrity: sha512-czclPqxLMPqPMkahKcske4TaS5lcznsc26ByBlEFDU8grTBVK9C5W6K9I6oEEhm4Ai4jTihGnys90xY1yjXcRg==}
-    dev: false
 
   /electron-to-chromium/1.4.80:
     resolution: {integrity: sha512-COsbJCGVYCc/aAY4cd94x1Js3q0r406YKGbdL8LXHg0O9dEjuFEFU/vZneRxBxKo/f1lLHi0YyAR7sbFM+i8Bg==}
@@ -2041,7 +2312,6 @@ packages:
   /escalade/3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
-    dev: false
 
   /escape-goat/2.1.1:
     resolution: {integrity: sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==}
@@ -2383,6 +2653,11 @@ packages:
       wide-align: 1.1.5
     dev: false
 
+  /gensync/1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
   /get-stream/4.1.0:
     resolution: {integrity: sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==}
     engines: {node: '>=6'}
@@ -2443,6 +2718,11 @@ packages:
       process: 0.11.10
     dev: false
 
+  /globals/11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+    dev: true
+
   /globals/13.12.1:
     resolution: {integrity: sha512-317dFlgY2pdJZ9rspXDks7073GpDmXdfbM3vYYp0HAMKGDh1FfWPleI2ljVNLQX5M5lXcAslTcPTrOrMEFOjyw==}
     engines: {node: '>=8'}
@@ -2739,6 +3019,19 @@ packages:
       esprima: 4.0.1
     dev: true
 
+  /js-yaml/4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+    dev: true
+
+  /jsesc/2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
   /json-buffer/3.0.0:
     resolution: {integrity: sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=}
     dev: true
@@ -2755,6 +3048,12 @@ packages:
     resolution: {integrity: sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=}
     dev: true
 
+  /json5/2.2.1:
+    resolution: {integrity: sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
   /jsonfile/6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
     dependencies:
@@ -3060,7 +3359,6 @@ packages:
 
   /node-releases/2.0.5:
     resolution: {integrity: sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==}
-    dev: false
 
   /nodemon/2.0.15:
     resolution: {integrity: sha512-gdHMNx47Gw7b3kWxJV64NI+Q5nfl0y5DgDbiVtShiwa7Z0IZ07Ll4RLFo6AjrhzMtoEZn5PDE3/c2AbVsiCkpA==}
@@ -3249,6 +3547,11 @@ packages:
   /path-parse/1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
+  /path-starts-with/2.0.0:
+    resolution: {integrity: sha512-3UHTHbJz5+NLkPafFR+2ycJOjoc4WV2e9qCZCnm71zHiWaFrm1XniLVTkZXvaRgxr1xFh9JsTdicpH2yM03nLA==}
+    engines: {node: '>=8'}
+    dev: true
+
   /path-type/4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -4044,6 +4347,14 @@ packages:
       tunnel-agent: 0.6.0
     dev: false
 
+  /precompile-intl-runtime/0.7.0_svelte@3.48.0:
+    resolution: {integrity: sha512-Zics5Ia/YAb8zE+hkFnkOdJBfdJ1mrCY++pvenIyz6y9lVh0Gz/SW4tQ1TBcn8eFMPRqURqMVUot6dp09PZYOA==}
+    peerDependencies:
+      svelte: ^3.37.0
+    dependencies:
+      svelte: 3.48.0
+    dev: true
+
   /prelude-ls/1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -4275,7 +4586,6 @@ packages:
 
   /safe-buffer/5.1.2:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
-    dev: false
 
   /safe-buffer/5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
@@ -4473,6 +4783,11 @@ packages:
     dependencies:
       ansi-regex: 5.0.1
 
+  /strip-bom/5.0.0:
+    resolution: {integrity: sha512-p+byADHF7SzEcVnLvc/r3uognM1hUhObuHXxJcgLCfD194XAkaLbjq3Wzb0N5G2tgIjH0dgT708Z51QxMeu60A==}
+    engines: {node: '>=12'}
+    dev: true
+
   /strip-final-newline/2.0.0:
     resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
     engines: {node: '>=6'}
@@ -4589,6 +4904,20 @@ packages:
       svelte: 3.48.0
     dev: true
 
+  /svelte-intl-precompile/0.11.1_svelte@3.48.0:
+    resolution: {integrity: sha512-P91cUUtaTkCjZiQBlcfPDaS0U9yTJSXTKsqK83bq2iLSvPFkb/JHNMPwEG+aph11CY6Y4GcZI1rsB905GG7tmw==}
+    dependencies:
+      babel-plugin-precompile-intl: 0.5.1
+      js-yaml: 4.1.0
+      json5: 2.2.1
+      path-starts-with: 2.0.0
+      precompile-intl-runtime: 0.7.0_svelte@3.48.0
+      strip-bom: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+      - svelte
+    dev: true
+
   /svelte-preprocess/4.10.4_44qe5g6fi6uxvss56imdgyaaty:
     resolution: {integrity: sha512-fuwol0N4UoHsNQolLFbMqWivqcJ9N0vfWO9IuPAiX/5okfoGXURyJ6nECbuEIv0nU3M8Xe2I1ONNje2buk7l6A==}
     engines: {node: '>= 9.11.2'}
@@ -4739,6 +5068,11 @@ packages:
     resolution: {integrity: sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==}
     dev: false
 
+  /to-fast-properties/2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+    dev: true
+
   /to-readable-stream/1.0.0:
     resolution: {integrity: sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==}
     engines: {node: '>=6'}
@@ -4769,6 +5103,10 @@ packages:
     resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
     dev: true
 
+  /tslib/2.4.0:
+    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
+    dev: true
+
   /tsutils/3.21.0_typescript@4.6.2:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}

src/docs/layout/page.svelte

@@ -19,7 +19,7 @@
 	let api
 	if ($page.url.pathname.includes('components')) {
 		if (import.meta.env.DEV) {
-			import(`../../../package/components/${title}.svelte?raw&sveld`).then(
+			import(`../../package/components/${title}.svelte?raw&sveld`).then(
 				(output) => (api = output.default)
 			)
 		} else {

src/package/components/Button.svelte

@@ -78,11 +78,11 @@
 		border-radius: var(--rounded);
 		transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out;
 
-		&:hover {
+		&:hover:not(&--color-transparent) {
 			filter: brightness(0.85);
 		}
 
-		&:active {
+		&:active:not(&--color-transparent) {
 			transform: scale(0.95);
 			filter: brightness(0.8);
 		}
@@ -114,6 +114,15 @@
 			&-transparent {
 				background-color: transparent;
 				box-shadow: none;
+				filter: brightness(1) !important;
+
+				&:hover {
+					background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
+				}
+
+				&:active {
+					background-image: linear-gradient(rgba(0, 0, 0, 0.2) 0 0);
+				}
 			}
 
 			&-danger {
@@ -122,8 +131,8 @@
 			}
 
 			&-danger-light {
-				background-color: var(--color-popup-danger-bg);
+				background-color: var(--color-danger-bg);
-				color: var(--color-popup-danger-text);
+				color: var(--color-danger-text);
 			}
 		}
 

src/package/components/Modal.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { fade, fly } from 'svelte/transition'
+	import Button from './Button.svelte'
+	import { classCombine } from '../utils/classCombine'
+	import IconX from 'virtual:icons/heroicons-outline/x'
+	import { t } from 'svelte-intl-precompile'
+
+	export let open = false
+
+	/** Set the width of the modal */
+	export let size: 'md' | 'lg' = 'md'
+
+	export let title = ''
+
+	/** If enabled, clicking outside the modal with close it */
+	export let dismissable = true
+
+	function close() {
+		open = false
+	}
+</script>
+
+{#if open}
+	<div
+		class="modal-background"
+		transition:fade={{ duration: 300 }}
+		on:click={() => {
+			if (dismissable) close()
+		}} />
+
+	<div
+		class={classCombine(['modal', `modal--size-${size}`, 'card'])}
+		transition:fly={{ y: 400, duration: 250 }}>
+		<div class="modal__top">
+			<h2 class="title-secondary">{title}</h2>
+			<Button title="Close" color="transparent" on:click={close}>
+				<IconX width={20} />
+			</Button>
+		</div>
+
+		<slot />
+
+		<div class="modal__buttons">
+			<Button on:click={close}><IconX /> Cancel</Button>
+			<slot name="button" />
+		</div>
+	</div>
+{/if}
+
+<style lang="postcss">
+	:global(.base.theme-dark > .modal, .base.theme-oled > .modal) {
+		border: 1px solid var(--color-divider);
+	}
+
+	.modal-background {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: hsla(0, 0%, 0%, 0.5);
+		backdrop-filter: blur(3px);
+		z-index: 20;
+	}
+
+	.modal {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+
+		width: 80%;
+		z-index: 21;
+		max-height: calc(100% - 2rem);
+		overflow-y: auto;
+
+		&--size {
+			&-md {
+				max-width: 600px;
+			}
+			&-lg {
+				max-width: 750px;
+			}
+		}
+
+		&__top {
+			background-color: var(--color-bg);
+			margin: -1rem -1rem 0.5rem -1rem;
+			padding: 1rem 1rem 1rem 1.5rem;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		&__danger {
+			margin: -1.5rem -1rem 0.5rem;
+			background-color: var(--color-danger-bg);
+			padding: 1rem 1.25rem;
+			display: flex;
+			align-items: center;
+			gap: 1rem;
+			color: var(--color-danger-text);
+			border-color: var(--color-danger-text);
+			border-width: 0.15rem 0;
+			border-style: solid;
+
+			:global(.icon) {
+				height: 1.5rem;
+				width: 1.5rem;
+			}
+		}
+
+		:global(p),
+		:global(ul),
+		:global(ol) {
+			line-height: 1.5;
+			margin: 0;
+
+			:global(a) {
+				color: var(--color-link);
+
+				&:hover {
+					text-decoration: underline;
+				}
+			}
+		}
+
+		&__buttons {
+			margin-top: 1rem;
+			display: flex;
+			justify-content: flex-end;
+			gap: 1rem;
+		}
+	}
+</style>

src/package/components/ModalDeletion.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import Modal from './Modal.svelte'
+	import Button from './Button.svelte'
+	import TextInput from './TextInput.svelte'
+	import { t } from 'svelte-intl-precompile'
+	import IconExclamation from 'virtual:icons/heroicons-outline/exclamation'
+	import IconTrash from 'virtual:icons/heroicons-outline/trash'
+	import { markdown } from '../utils'
+
+	export let key: string
+	export let type: 'project' | 'version' | 'account' | 'image'
+
+	export let open = false
+
+	let keyInput = ''
+</script>
+
+<Modal title={$t(`modal.deletion.${type}.title`)} bind:open>
+	{#if type === 'account' || 'project'}
+		<div class="important-banner">
+			<IconExclamation /><span>{$t('modal.deletion.generic.important')}</span>
+		</div>
+	{/if}
+	{@html markdown($t(`modal.deletion.${type}.description`))}
+	<span class="verify-label">{@html $t('modal.deletion.generic.verify', { values: { key } })}</span>
+	<TextInput
+		placeholder={$t('modal.deletion.generic.placeholder', { values: { key } })}
+		bind:value={keyInput} />
+	<Button color="danger" slot="button" disabled={key !== keyInput}>
+		<IconTrash />
+		{$t(`modal.deletion.${type}.action`)}
+	</Button>
+</Modal>
+
+<style lang="postcss">
+	.important-banner {
+		margin: -1.5rem -1rem 0.5rem;
+		background-color: var(--color-danger-bg);
+		padding: 1rem 1.25rem;
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		color: var(--color-danger-text);
+		border-color: var(--color-danger-text);
+		border-width: 0.15rem 0;
+		border-style: solid;
+
+		:global(.icon) {
+			height: 1.5rem;
+			width: 1.5rem;
+		}
+	}
+
+	.verify-label {
+		font-weight: var(--font-weight-bold);
+	}
+
+	:global(i) {
+		font-weight: var(--font-weight-normal);
+	}
+</style>

src/package/index.ts

@@ -14,6 +14,10 @@ export { default as Chips } from './components/Chips.svelte'
 
 export { default as FormField } from './components/FormField.svelte'
 
+export { default as Modal } from './components/Modal.svelte'
+
+export { default as ModalDeletion } from './components/ModalDeletion.svelte'
+
 export { default as NavRow } from './components/NavRow.svelte'
 
 export { default as Pagination } from './components/Pagination.svelte'

src/package/styles/themes/dark.postcss

@@ -54,8 +54,8 @@
 	--color-ad-link: hsl(200, 70%, 50%);
 
 	/* Popup colors */
-	--color-popup-danger-bg: hsl(355, 70%, 20%);
+	--color-danger-bg: hsl(355, 70%, 20%);
-	--color-popup-danger-text: hsl(342, 70%, 75%);
+	--color-danger-text: hsl(342, 70%, 75%);
 
 	--color-input-light: hsl(220, 13%, 20%);
 

src/package/styles/themes/light.postcss

@@ -54,9 +54,9 @@
 	--color-ad-bg: hsl(200, 70%, 82%);
 	--color-ad-link: hsl(200, 80%, 40%);
 
-	/* Popup colors */
+	/* Danger colors */
-	--color-popup-danger-bg: hsl(355, 70%, 88%);
+	--color-danger-bg: hsl(355, 70%, 88%);
-	--color-popup-danger-text: hsl(342, 70%, 35%);
+	--color-danger-text: hsl(342, 70%, 35%);
 
 	/* Scrollbar color */
 	--color-scrollbar-thumb: hsl(220, 13%, 70%);

src/routes/__layout.svelte

@@ -1,3 +1,13 @@
+<script context="module" lang="ts">
+	import { addMessages, init } from 'svelte-intl-precompile'
+	import en from '$locales/en'
+	addMessages('en', en)
+	init({
+		initialLocale: 'en',
+		fallbackLocale: 'en',
+	})
+</script>
+
 <script lang="ts">
 	import '$package/styles.postcss'
 	import '../docs/styles/prism-one-dark.css'

src/routes/components/FormField.md

@@ -1,8 +1,6 @@
 ```svelte example raised
 <script lang="ts">
-	import { FormField } from 'omorphia'
+	import { FormField, Slider, TextInput } from 'omorphia'
-	import { Slider } from 'omorphia'
-	import { TextInput } from 'omorphia'
 </script>
 
 <FormField label="Favorite number">

src/routes/components/Modal.md

@@ -0,0 +1,15 @@
+```svelte example raised
+<script lang="ts">
+	import { Modal, Checkbox, Button } from 'omorphia'
+	import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
+
+	let open = false
+</script>
+
+<Checkbox bind:checked={open}>Open modal</Checkbox>
+
+<Modal title="Example modal" danger cancelButton bind:open>
+	<p>Secret message goes here!</p>
+	<Button color="primary" slot="button"><IconArrowRight /> Continue</Button>
+</Modal>
+```

src/routes/components/ModalDeletion.md

@@ -0,0 +1,16 @@
+```svelte example raised
+<script lang="ts">
+	import { ModalDeletion, Button } from 'omorphia'
+
+	let open = false
+</script>
+
+<Button
+	color="danger"
+	on:click={() => {
+		open = true
+	}}>
+	Delete account
+</Button>
+<ModalDeletion type="account" key="venashial" bind:open />
+```

svelte.config.js

@@ -6,6 +6,7 @@ import sveld from './plugins/sveld.js'
 import path from 'path'
 import { preprocess, plugins } from './src/package/config/svelte.config.js'
 import Generator from './src/package/plugins/generator/index.js'
+import precompileIntl from 'svelte-intl-precompile/sveltekit-plugin'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -27,6 +28,7 @@ const config = {
 				...plugins,
 				examples,
 				sveld(),
+				precompileIntl('locales'),
 			],
 
 			resolve: {