From 34cc91032f0c8669d0ad883bbf8e7b142caa585d Mon Sep 17 00:00:00 2001
From: Jonas Hungershausen <jonas.hungershausen@gmail.com>
Date: Fri, 23 Sep 2022 14:03:42 +0200
Subject: [PATCH] chore: format using make (#5)

---
 .eslintrc.js                                |  24 +-
 .github/workflows/format.yml                |  17 +
 .github/workflows/release.yml               |   9 +-
 .prettierignore                             |   4 +-
 .storybook/main.js                          |  54 +--
 .storybook/preview-head.html                |   4 +-
 Makefile                                    |   9 +-
 README.md                                   | 193 +++++-----
 nx.json                                     |  10 +-
 package-lock.json                           |   1 +
 package.json                                |  13 +-
 packages/markup/package.json                |   2 +-
 packages/preact/package.json                |   2 +-
 packages/react/package.json                 |   2 +-
 packages/test/package.json                  |   2 +-
 playwright-ct.config.ts                     |  46 +--
 playwright.config.ts                        |  28 +-
 playwright/index.ts                         |   2 +-
 src/stories/Introduction.stories.mdx        |  45 ++-
 src/stories/Ory/auth-error.json             |  22 +-
 src/stories/Ory/login-flow-2fa.json         | 284 +++++++--------
 src/stories/Ory/login-flow-error.json       | 280 +++++++--------
 src/stories/Ory/login-flow.json             | 220 ++++++------
 src/stories/Ory/recovery-flow.json          | 130 +++----
 src/stories/Ory/register-flow-webauthn.json | 348 +++++++++---------
 src/stories/Ory/register-flow.json          | 370 ++++++++++----------
 src/stories/Ory/verification-flow.json      | 130 +++----
 src/theme/nav.css.ts                        |   2 +-
 tests/preact-spa/package.json               |   2 +-
 tests/preact-spa/vite.config.ts             |   6 +-
 tests/react-spa/package.json                |   2 +-
 tests/react-spa/vite.config.ts              |   6 +-
 tsconfig.build.json                         |  30 +-
 tsconfig.json                               |   6 +-
 tsconfig.node.json                          |   2 +-
 35 files changed, 1178 insertions(+), 1129 deletions(-)
 create mode 100644 .github/workflows/format.yml

diff --git a/.eslintrc.js b/.eslintrc.js
index 520dc5137..d03623f8e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,23 +2,23 @@ module.exports = {
   env: {
     browser: true,
     es6: true,
-    node: true
+    node: true,
   },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended'
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
   ],
   overrides: [],
-  parser: '@typescript-eslint/parser',
+  parser: "@typescript-eslint/parser",
   parserOptions: {
-    tsconfigRootDir: './',
+    tsconfigRootDir: "./",
     ecmaVersion: 2021,
-    sourceType: 'module',
+    sourceType: "module",
     ecmaFeatures: {
-      jsx: true
-    }
+      jsx: true,
+    },
   },
-  plugins: ['react', '@typescript-eslint'],
-  rules: {}
-};
+  plugins: ["react", "@typescript-eslint"],
+  rules: {},
+}
diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
new file mode 100644
index 000000000..a7a720ebc
--- /dev/null
+++ b/.github/workflows/format.yml
@@ -0,0 +1,17 @@
+name: Format
+
+on:
+  pull_request:
+  push:
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-go@v3
+        with:
+          go-version: 1.19
+      - run: make format
+      - name: Indicate formatting issues
+        run: git diff HEAD --exit-code --color
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index dd5198085..716c26ace 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -10,11 +10,14 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: "14"
       - run: npm ci
-      - run: npm version --no-git-tag-version ${{ github.event.release.tag_name }}
+      - run:
+          npm version --no-git-tag-version ${{ github.event.release.tag_name }}
       - run: npm run build
-      - run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN_AENEASR }}" > ~/.npmrc
+      - run:
+          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN_AENEASR
+          }}" > ~/.npmrc
       - run: npm publish --access public
         # env:
         #   NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_AENEASR }}
diff --git a/.prettierignore b/.prettierignore
index 81c22889d..92ac9b311 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -4,4 +4,6 @@ node_modules
 .vscode
 playwright-report
 public
-storybook-static
\ No newline at end of file
+storybook-static
+.github/pull_request_template.md
+CONTRIBUTING.md
diff --git a/.storybook/main.js b/.storybook/main.js
index a9fc0b800..7eddceef1 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,47 +1,47 @@
-const { vanillaExtractPlugin } = require('@vanilla-extract/vite-plugin');
-const { resolve } = require('path');
-const { mergeConfig } = require('vite');
+const { vanillaExtractPlugin } = require("@vanilla-extract/vite-plugin")
+const { resolve } = require("path")
+const { mergeConfig } = require("vite")
 
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions'
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
   ],
-  framework: '@storybook/react',
+  framework: "@storybook/react",
   core: {
-    builder: '@storybook/builder-vite'
+    builder: "@storybook/builder-vite",
   },
   typescript: {
-    reactDocgen: 'react-docgen' // 👈 react-docgen configured here.
+    reactDocgen: "react-docgen", // 👈 react-docgen configured here.
   },
   async viteFinal(config) {
     return mergeConfig(config, {
       build: {
-        minify: 'esbuild',
+        minify: "esbuild",
         sourcemap: true,
         lib: {
-          entry: resolve(__dirname, 'src/react.ts'),
-          name: 'ory/elements',
-          fileName: (format) => `index.${format}.js`
+          entry: resolve(__dirname, "src/react.ts"),
+          name: "ory/elements",
+          fileName: (format) => `index.${format}.js`,
         },
         rollupOptions: {
-          treeshake: 'recommended',
-          external: ['react', 'react-dom', 'storybook'],
+          treeshake: "recommended",
+          external: ["react", "react-dom", "storybook"],
           output: {
             globals: {
-              storybook: 'storybook',
-              react: 'React',
-              'react-dom': 'ReactDOM'
-            }
-          }
-        }
+              storybook: "storybook",
+              react: "React",
+              "react-dom": "ReactDOM",
+            },
+          },
+        },
       },
-      plugins: [vanillaExtractPlugin()]
-    });
+      plugins: [vanillaExtractPlugin()],
+    })
   },
   features: {
-    storyStoreV7: true
-  }
-};
+    storyStoreV7: true,
+  },
+}
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 05da1e9df..7100922b6 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,3 +1,3 @@
 <script>
-  window.global = window;
-</script>
\ No newline at end of file
+  window.global = window
+</script>
diff --git a/Makefile b/Makefile
index 5733fe979..c24b354e5 100644
--- a/Makefile
+++ b/Makefile
@@ -15,4 +15,11 @@ install:
 
 .bin/ory: Makefile
 	bash <(curl https://raw.githubusercontent.com/ory/meta/master/install.sh) -d -b .bin ory v0.1.38
-	touch -a -m .bin/ory
\ No newline at end of file
+	touch -a -m .bin/ory
+
+format: node_modules
+	npm exec -- prettier --write .
+	
+node_modules: package-lock.json
+	npm ci
+	touch node_modules
diff --git a/README.md b/README.md
index 826551191..4b7a8c5b3 100644
--- a/README.md
+++ b/README.md
@@ -1,155 +1,167 @@
 ## Elements
 
-Ory component library for custom UI integration and development. A set of tools 
+Ory component library for custom UI integration and development. A set of tools
 
-Here we are using [Vite](https://vitejs.dev/) as the bundler instead of only Rollup. This makes the bundling experience a bit easier and really fast! We can now support a variety of environments through a singular repository. For example, in this repository we already have React, Preact and HTML support. 
+Here we are using [Vite](https://vitejs.dev/) as the bundler instead of only
+Rollup. This makes the bundling experience a bit easier and really fast! We can
+now support a variety of environments through a singular repository. For
+example, in this repository we already have React, Preact and HTML support.
 
 ---
 
-[Vanilla-Extract](https://vanilla-extract.style/) is used to strongly type the CSS, a type of `CSS-in-JS` library which generates a static CSS file for us when the library is built. This means we can manage our CSS and reduce a lot of typing, since it can generate the CSS classes for us.
+[Vanilla-Extract](https://vanilla-extract.style/) is used to strongly type the
+CSS, a type of `CSS-in-JS` library which generates a static CSS file for us when
+the library is built. This means we can manage our CSS and reduce a lot of
+typing, since it can generate the CSS classes for us.
 
 Here is an example of vanilla-extract in action!
 
 ```ts
 export const dividerStyle = recipe({
   base: {
-    display: 'block',
-    textAlign: 'center',
-    overflow: 'hidden',
-    boxSizing: 'border-box',
+    display: "block",
+    textAlign: "center",
+    overflow: "hidden",
+    boxSizing: "border-box",
     border: 0,
     borderTop: `${pxToRem(4)} solid`,
     borderColor: oryTheme.border.def,
-    width: pxToRem(64)
+    width: pxToRem(64),
   },
   variants: {
     sizes: {
       fullWidth: {
-        width: '100%'
-      }
-    }
-  }
-});
+        width: "100%",
+      },
+    },
+  },
+})
 ```
+
 Generated JS function.
 
 ```js
-var dividerStyle = createRuntimeFn({ defaultClassName: "_3ldkmt0", variantClassNames: { sizes: { fullWidth: "_3ldkmt1" } }, defaultVariants: {}, compoundVariants: [] });
+var dividerStyle = createRuntimeFn({
+  defaultClassName: "_3ldkmt0",
+  variantClassNames: { sizes: { fullWidth: "_3ldkmt1" } },
+  defaultVariants: {},
+  compoundVariants: [],
+})
 ```
 
 And the generated CSS classes.
 
 ```css
 ._3ldkmt0 {
-  display:block;
-  text-align:center;
-  overflow:hidden;
-  box-sizing:border-box;
-  border:0;
-  border-top:.25rem solid;
-  border-color:var(--ory-theme-border-def);
-  width:4rem
+  display: block;
+  text-align: center;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 0;
+  border-top: 0.25rem solid;
+  border-color: var(--ory-theme-border-def);
+  width: 4rem;
 }
 
 ._3ldkmt1 {
-  width:100%
+  width: 100%;
 }
 ```
 
 ---
 
-Vanilla-Extract also provides us theme variables which we can give static names. This means we can overwrite them inside the project consuming the library!
+Vanilla-Extract also provides us theme variables which we can give static names.
+This means we can overwrite them inside the project consuming the library!
 
 ```css
 :root {
-    --ory-theme-font-family: Inter;
-    --ory-theme-font-style: normal;
-    --ory-theme-accent-def: #3D53F5;
-    --ory-theme-accent-muted: #6475F7;
-    --ory-theme-accent-emphasis: #3142C4;
-    --ory-theme-accent-disabled: #E0E0E0;
-    --ory-theme-accent-subtle: #eceefe;
-    --ory-theme-foreground-def: #171717;
-    --ory-theme-foreground-muted: #616161;
-    --ory-theme-foreground-subtle: #9E9E9E;
-    --ory-theme-foreground-disabled: #BDBDBD;
-    --ory-theme-foreground-on-dark: #FFFFFF;
-    --ory-theme-foreground-on-accent: #FFFFFF;
-    --ory-theme-foreground-on-disabled: #e0e0e0;
-    --ory-theme-background-surface: #FFFFFF;
-    --ory-theme-background-canvas: #FCFCFC;
-    --ory-theme-error-def: #9c0f2e;
-    --ory-theme-error-subtle: #fce8ec;
-    --ory-theme-error-muted: #e95c7b;
-    --ory-theme-error-emphasis: #DF1642;
-    --ory-theme-success-emphasis: #18A957;
-    --ory-theme-border-def: #E0E0E0;
-    --ory-theme-text-def: #FFFFFF;
-    --ory-theme-text-disabled: #757575;
-    --ory-theme-input-background: #FFFFFF;
-    --ory-theme-input-disabled: #E0E0E0;
-    --ory-theme-input-placeholder: #9E9E9E;
-    --ory-theme-input-text: #424242;
+  --ory-theme-font-family: Inter;
+  --ory-theme-font-style: normal;
+  --ory-theme-accent-def: #3d53f5;
+  --ory-theme-accent-muted: #6475f7;
+  --ory-theme-accent-emphasis: #3142c4;
+  --ory-theme-accent-disabled: #e0e0e0;
+  --ory-theme-accent-subtle: #eceefe;
+  --ory-theme-foreground-def: #171717;
+  --ory-theme-foreground-muted: #616161;
+  --ory-theme-foreground-subtle: #9e9e9e;
+  --ory-theme-foreground-disabled: #bdbdbd;
+  --ory-theme-foreground-on-dark: #ffffff;
+  --ory-theme-foreground-on-accent: #ffffff;
+  --ory-theme-foreground-on-disabled: #e0e0e0;
+  --ory-theme-background-surface: #ffffff;
+  --ory-theme-background-canvas: #fcfcfc;
+  --ory-theme-error-def: #9c0f2e;
+  --ory-theme-error-subtle: #fce8ec;
+  --ory-theme-error-muted: #e95c7b;
+  --ory-theme-error-emphasis: #df1642;
+  --ory-theme-success-emphasis: #18a957;
+  --ory-theme-border-def: #e0e0e0;
+  --ory-theme-text-def: #ffffff;
+  --ory-theme-text-disabled: #757575;
+  --ory-theme-input-background: #ffffff;
+  --ory-theme-input-disabled: #e0e0e0;
+  --ory-theme-input-placeholder: #9e9e9e;
+  --ory-theme-input-text: #424242;
 }
 ```
 
 ---
 
-For ExpressJS the library also exports a helper function which registers all of the CSS the library produces.
+For ExpressJS the library also exports a helper function which registers all of
+the CSS the library produces.
 
 ```ts
-import express, { Application } from 'express';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { oryTheme, Theme } from '../theme';
+import express, { Application } from "express"
+import { assignInlineVars } from "@vanilla-extract/dynamic"
+import { oryTheme, Theme } from "../theme"
 
 export const RegisterOryElementsExpress = (app: Application, theme: Theme) => {
-  app.use('/theme.css', (req, res) => {
-    res.header('Content-Type', 'text/css');
+  app.use("/theme.css", (req, res) => {
+    res.header("Content-Type", "text/css")
     res.send(
       `body {${assignInlineVars(oryTheme, {
         ...oryTheme,
-        ...theme
-      }).toString()}}`
-    );
-  });
-  app.use('/', express.static('node_modules/@ory/elements/dist'));
-};
+        ...theme,
+      }).toString()}}`,
+    )
+  })
+  app.use("/", express.static("node_modules/@ory/elements/dist"))
+}
 ```
 
-Which exposes all of the relevant css files for us which we just import in our HTML page:
+Which exposes all of the relevant css files for us which we just import in our
+HTML page:
 
 ```html
-  <link rel="stylesheet" href="style.css"> // the default theme variables
-  <link rel="stylesheet" href="theme.css"> // the overidden theme variables
+<link rel="stylesheet" href="style.css" /> // the default theme variables
+<link rel="stylesheet" href="theme.css" /> // the overidden theme variables
 ```
 
-We can then reference a component through the handlebars helper functions that return pure HTML.
+We can then reference a component through the handlebars helper functions that
+return pure HTML.
 
 ```handlebars
 {{{card}}}
 
-{{{typography
-      "Welcome!"
-      "headline37"
-      "foregroundDefault"
- }}}
+{{{typography "Welcome!" "headline37" "foregroundDefault"}}}
 ```
 
 ```ts
 // Render the data using a view (e.g. Jade Template):
-res.render('login', {
-   ...flow,
+res.render("login", {
+  ...flow,
   typography: (text: string, size: any, color: any) =>
-        Typography({
-          children: text,
-          type: "regular",
-          size,
-          color,
-        }),
-   card: Card({
-     title: "Login With Ory",
-     children: Message({message: "Woah there", severity: "info"})
-    })
+    Typography({
+      children: text,
+      type: "regular",
+      size,
+      color,
+    }),
+  card: Card({
+    title: "Login With Ory",
+    children: Message({ message: "Woah there", severity: "info" }),
+  }),
 })
 ```
 
@@ -157,7 +169,8 @@ res.render('login', {
 
 ### Example Apps
 
-Ory Elements also has example applications which we test the component library against.
+Ory Elements also has example applications which we test the component library
+against.
 
 Currently we have a `react` and `preact` SPA under the `tests/` directory.
 
@@ -166,7 +179,6 @@ To run the example application you will need a couple things:
 1. An [Ory Cloud (free) account](https://console.ory.sh/)
 2. The [Ory CLI (tunnel)](https://www.ory.sh/docs/guides/cli/installation)
 
-
 Clone this repository and setup the React example.
 
 ```shell
@@ -185,7 +197,8 @@ Now run the Ory CLI tunnel.
 ory tunnel http://localhost:3000 --project <project-slug> --dev
 ```
 
-The tunnel will now _mirror_ the Ory APIs under `http://localhost:4000` which we have 
-explicity told our React app to use through the `VITE_ORY_SDK_URL` export.
+The tunnel will now _mirror_ the Ory APIs under `http://localhost:4000` which we
+have explicity told our React app to use through the `VITE_ORY_SDK_URL` export.
 
-Open http://localhost:3000 in your browser and everything will work out of the box :)
+Open http://localhost:3000 in your browser and everything will work out of the
+box :)
diff --git a/nx.json b/nx.json
index 9b7074239..de18f9623 100644
--- a/nx.json
+++ b/nx.json
@@ -4,19 +4,13 @@
     "default": {
       "runner": "nx/tasks-runners/default",
       "options": {
-        "cacheableOperations": [
-          "build",
-          "dev",
-          "preview"
-        ]
+        "cacheableOperations": ["build", "dev", "preview"]
       }
     }
   },
   "targetDefaults": {
     "build": {
-      "dependsOn": [
-        "^build"
-      ]
+      "dependsOn": ["^build"]
     }
   },
   "affected": {
diff --git a/package-lock.json b/package-lock.json
index 87e684641..3832a0ef0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,6 +46,7 @@
         "lerna": "^5.4.3",
         "nx": "14.5.10",
         "ory-prettier-styles": "^1.3.0",
+        "prettier": "^2.7.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "require-from-string": "^2.0.2",
diff --git a/package.json b/package.json
index 15dd7b08b..0f88acb57 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,7 @@
     "build:markup": "lerna run build --stream --scope=@ory/elements-markup",
     "version": "lerna version --no-private",
     "test": "playwright test -c playwright-ct.config.ts",
-    "test-e2e": "playwright test -c playwright.config.ts",
-    "format": "prettier --write '{src/**/*,}.{tsx,ts,js,css}'",
-    "format:check": "prettier --check '{src/**/*,}.{tsx,ts,js,css}'"
+    "test-e2e": "playwright test -c playwright.config.ts"
   },
   "repository": {
     "type": "git",
@@ -36,6 +34,8 @@
   "devDependencies": {
     "@babel/core": "^7.18.10",
     "@ory/client": "^0.2.0-alpha.16",
+    "@ory/elements": "*",
+    "@ory/elements-test": "*",
     "@ory/integrations": "^0.2.7",
     "@playwright/experimental-ct-react": "^1.25.0",
     "@playwright/test": "^1.25.1",
@@ -67,15 +67,14 @@
     "lerna": "^5.4.3",
     "nx": "14.5.10",
     "ory-prettier-styles": "^1.3.0",
+    "prettier": "^2.7.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "require-from-string": "^2.0.2",
     "typescript": "^4.7.4",
     "vite": "^3.0.9",
     "vite-plugin-dts": "^1.4.1",
-    "wait-on": "^6.0.1",
-    "@ory/elements-test": "*",
-    "@ory/elements": "*"
+    "wait-on": "^6.0.1"
   },
   "files": [
     "dist/*"
@@ -88,4 +87,4 @@
     "packages/*",
     "tests/*"
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/markup/package.json b/packages/markup/package.json
index dc346c4ac..91ab79dc9 100644
--- a/packages/markup/package.json
+++ b/packages/markup/package.json
@@ -44,4 +44,4 @@
     "node": ">=16.16.0",
     "npm": ">=8.11.0"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/preact/package.json b/packages/preact/package.json
index de67d8128..624ef1099 100644
--- a/packages/preact/package.json
+++ b/packages/preact/package.json
@@ -50,4 +50,4 @@
     "node": ">=16.16.0",
     "npm": ">=8.11.0"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/react/package.json b/packages/react/package.json
index 22d43dd2a..b63c5773d 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -43,4 +43,4 @@
     "node": ">=16.16.0",
     "npm": ">=8.11.0"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/test/package.json b/packages/test/package.json
index 3155b9018..1843d2615 100644
--- a/packages/test/package.json
+++ b/packages/test/package.json
@@ -43,4 +43,4 @@
     "node": ">=16.16.0",
     "npm": ">=8.11.0"
   }
-}
\ No newline at end of file
+}
diff --git a/playwright-ct.config.ts b/playwright-ct.config.ts
index 66c51d7a4..eab5e9cfd 100644
--- a/playwright-ct.config.ts
+++ b/playwright-ct.config.ts
@@ -1,15 +1,15 @@
-import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react';
-import { devices } from '@playwright/experimental-ct-react';
-import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
-import react from '@vitejs/plugin-react';
+import type { PlaywrightTestConfig } from "@playwright/experimental-ct-react"
+import { devices } from "@playwright/experimental-ct-react"
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin"
+import react from "@vitejs/plugin-react"
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 const config: PlaywrightTestConfig = {
-  testDir: './src/react-components',
+  testDir: "./src/react-components",
   /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
-  snapshotDir: './__snapshots__',
+  snapshotDir: "./__snapshots__",
   /* Maximum time one test can run for. */
   timeout: 10 * 1000,
   /* Run tests in files in parallel */
@@ -21,40 +21,40 @@ const config: PlaywrightTestConfig = {
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: "on-first-retry",
 
     /* Port to use for Playwright component endpoint. */
     ctPort: 3100,
     ctViteConfig: {
-      plugins: [vanillaExtractPlugin(), react()]
-    }
+      plugins: [vanillaExtractPlugin(), react()],
+    },
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
+      name: "chromium",
       use: {
-        ...devices['Desktop Chrome']
-      }
+        ...devices["Desktop Chrome"],
+      },
     },
     {
-      name: 'firefox',
+      name: "firefox",
       use: {
-        ...devices['Desktop Firefox']
-      }
+        ...devices["Desktop Firefox"],
+      },
     },
     {
-      name: 'webkit',
+      name: "webkit",
       use: {
-        ...devices['Desktop Safari']
-      }
-    }
-  ]
-};
+        ...devices["Desktop Safari"],
+      },
+    },
+  ],
+}
 
-export default config;
+export default config
diff --git a/playwright.config.ts b/playwright.config.ts
index c4c4514b7..0b19ac7b0 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,5 +1,5 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
-import { devices } from '@playwright/test';
+import type { PlaywrightTestConfig } from "@playwright/test"
+import { devices } from "@playwright/test"
 
 /**
  * Read environment variables from file.
@@ -11,7 +11,7 @@ import { devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 const config: PlaywrightTestConfig = {
-  testDir: './e2e',
+  testDir: "./e2e",
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
   expect: {
@@ -19,7 +19,7 @@ const config: PlaywrightTestConfig = {
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000
+    timeout: 5000,
   },
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -30,7 +30,7 @@ const config: PlaywrightTestConfig = {
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
@@ -39,29 +39,29 @@ const config: PlaywrightTestConfig = {
     // baseURL: 'http://localhost:3000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: "on-first-retry",
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
+      name: "chromium",
       use: {
-        ...devices['Desktop Chrome'],
+        ...devices["Desktop Chrome"],
       },
     },
 
     {
-      name: 'firefox',
+      name: "firefox",
       use: {
-        ...devices['Desktop Firefox'],
+        ...devices["Desktop Firefox"],
       },
     },
 
     {
-      name: 'webkit',
+      name: "webkit",
       use: {
-        ...devices['Desktop Safari'],
+        ...devices["Desktop Safari"],
       },
     },
 
@@ -102,6 +102,6 @@ const config: PlaywrightTestConfig = {
   //   command: 'npm run start',
   //   port: 3000,
   // },
-};
+}
 
-export default config;
+export default config
diff --git a/playwright/index.ts b/playwright/index.ts
index 33a92ce7b..a642e0a65 100644
--- a/playwright/index.ts
+++ b/playwright/index.ts
@@ -1,3 +1,3 @@
 // Import styles, initialize component theme here.
 // import '../src/common.css';
-import { ThemeProvider } from '../src/react-components/provider';
+import { ThemeProvider } from "../src/react-components/provider"
diff --git a/src/stories/Introduction.stories.mdx b/src/stories/Introduction.stories.mdx
index e6492d3b1..a68433905 100644
--- a/src/stories/Introduction.stories.mdx
+++ b/src/stories/Introduction.stories.mdx
@@ -1,12 +1,12 @@
-import { Meta } from '@storybook/addon-docs';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
+import { Meta } from "@storybook/addon-docs"
+import Code from "./assets/code-brackets.svg"
+import Colors from "./assets/colors.svg"
+import Comments from "./assets/comments.svg"
+import Direction from "./assets/direction.svg"
+import Flow from "./assets/flow.svg"
+import Plugin from "./assets/plugin.svg"
+import Repo from "./assets/repo.svg"
+import StackAlt from "./assets/stackalt.svg"
 
 <Meta title="Example/Introduction" />
 
@@ -116,12 +116,15 @@ import StackAlt from './assets/stackalt.svg';
 
 # Welcome to Storybook
 
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+Storybook helps you build UI components in isolation from your app's business
+logic, data, and context. That makes it easy to develop hard-to-reach states.
+Save these UI states as **stories** to revisit during development, testing, or
+QA.
 
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+Browse example stories now by navigating to them in the sidebar. View their code
+in the `stories` directory to learn how they work. We recommend building UIs
+with a [**component-driven**](https://componentdriven.org) process starting with
+atomic components and ending with pages.
 
 <div className="subheading">Configure</div>
 
@@ -182,14 +185,22 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
       Configure, customize, and extend
     </span>
   </a>
-  <a className="link-item" href="src/stories/Introduction.stories" target="_blank">
+  <a
+    className="link-item"
+    href="src/stories/Introduction.stories"
+    target="_blank"
+  >
     <img src={Direction} alt="direction" />
     <span>
       <strong>In-depth guides</strong>
       Best practices from leading teams
     </span>
   </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+  <a
+    className="link-item"
+    href="https://github.com/storybookjs/storybook"
+    target="_blank"
+  >
     <img src={Code} alt="code" />
     <span>
       <strong>GitHub project</strong>
@@ -206,6 +217,6 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 </div>
 
 <div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <span className="tip">Tip</span>Edit the Markdown in{" "}
   <code>stories/Introduction.stories.mdx</code>
 </div>
diff --git a/src/stories/Ory/auth-error.json b/src/stories/Ory/auth-error.json
index e1e34ec96..59eefdc38 100644
--- a/src/stories/Ory/auth-error.json
+++ b/src/stories/Ory/auth-error.json
@@ -1,12 +1,12 @@
 {
-    "id": "993c948b-6ac1-411c-bcaf-029f56b44d5e",
-    "error": {
-        "code": 400,
-        "debug": "key ory_kratos_oidc_auth_code_session does not exist in cookie: ory_kratos_continuity\n",
-        "message": "no resumable session found",
-        "reason": "The browser does not contain the necessary cookie to resume the session. This is a security violation and was blocked. Please clear your browser's cookies and cache and try again!",
-        "status": "Bad Request"
-    },
-    "created_at": "2022-08-11T14:08:09.054554Z",
-    "updated_at": "2022-08-11T14:08:09.054554Z"
-}
\ No newline at end of file
+  "id": "993c948b-6ac1-411c-bcaf-029f56b44d5e",
+  "error": {
+    "code": 400,
+    "debug": "key ory_kratos_oidc_auth_code_session does not exist in cookie: ory_kratos_continuity\n",
+    "message": "no resumable session found",
+    "reason": "The browser does not contain the necessary cookie to resume the session. This is a security violation and was blocked. Please clear your browser's cookies and cache and try again!",
+    "status": "Bad Request"
+  },
+  "created_at": "2022-08-11T14:08:09.054554Z",
+  "updated_at": "2022-08-11T14:08:09.054554Z"
+}
diff --git a/src/stories/Ory/login-flow-2fa.json b/src/stories/Ory/login-flow-2fa.json
index 315cb7bc3..d281a4c57 100644
--- a/src/stories/Ory/login-flow-2fa.json
+++ b/src/stories/Ory/login-flow-2fa.json
@@ -1,143 +1,143 @@
 {
-    "id": "0e21a525-6aa7-40e2-8dbf-5fa51f292dc1",
-    "type": "browser",
-    "expires_at": "2022-08-22T22:32:15.614434Z",
-    "issued_at": "2022-08-22T22:02:15.614434Z",
-    "request_url": "http://project.console.ory.sh/self-service/login/browser?aal=aal2",
-    "ui": {
-        "action": "https://project.console.ory.sh/self-service/login?flow=0e21a525-6aa7-40e2-8dbf-5fa51f292dc1",
-        "method": "POST",
-        "nodes": [
-            {
-                "type": "input",
-                "group": "default",
-                "attributes": {
-                    "name": "csrf_token",
-                    "type": "hidden",
-                    "value": "daYqaGczESQOiLZ03a+YgBJC9eo/mHfVl52x4rFnS8gqrH/EoYRdnNT62zDsbHpeDdHvvNLmzxAPN+QBbmDpBw==",
-                    "required": true,
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {}
-            },
-            {
-                "type": "input",
-                "group": "default",
-                "attributes": {
-                    "name": "identifier",
-                    "type": "hidden",
-                    "value": "aecaf2bf-b33f-4271-9c4d-0c0eb722fcf8",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {}
-            },
-            {
-                "type": "input",
-                "group": "webauthn",
-                "attributes": {
-                    "name": "webauthn_login_trigger",
-                    "type": "button",
-                    "value": "",
-                    "disabled": false,
-                    "onclick": "window.__oryWebAuthnLogin({\"publicKey\":{\"challenge\":\"=\",\"timeout\":60000,\"rpId\":\"console.ory.sh\",\"allowCredentials\":[{\"type\":\"public-key\",\"id\":\"==\"}],\"userVerification\":\"discouraged\"}})",
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1010008,
-                        "text": "Use security key",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "webauthn",
-                "attributes": {
-                    "name": "webauthn_login",
-                    "type": "hidden",
-                    "value": "",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {}
-            },
-            {
-                "type": "script",
-                "group": "webauthn",
-                "attributes": {
-                    "src": "https://project.console.ory.sh/.well-known/ory/webauthn.js",
-                    "async": true,
-                    "referrerpolicy": "no-referrer",
-                    "crossorigin": "anonymous",
-                    "integrity": "sha512-E3ctShTQEYTkfWrjztRCbP77lN7L0jJC2IOd6j8vqUKslvqhX/Ho3QxlQJIeTI78krzAWUQlDXd9JQ0PZlKhzQ==",
-                    "type": "text/javascript",
-                    "id": "webauthn_script",
-                    "nonce": "6d2cacc8-9abd-4f8f-b2b9-cd5250bfa677",
-                    "node_type": "script"
-                },
-                "messages": [],
-                "meta": {}
-            },
-            {
-                "type": "input",
-                "group": "totp",
-                "attributes": {
-                    "name": "totp_code",
-                    "type": "text",
-                    "value": "",
-                    "required": true,
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1010006,
-                        "text": "Authentication code",
-                        "type": "info",
-                        "context": {}
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "totp",
-                "attributes": {
-                    "name": "method",
-                    "type": "submit",
-                    "value": "totp",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1010009,
-                        "text": "Use Authenticator",
-                        "type": "info",
-                        "context": {}
-                    }
-                }
-            }
-        ],
-        "messages": [
-            {
-                "id": 1010004,
-                "text": "Please complete the second authentication challenge.",
-                "type": "info",
-                "context": {}
-            }
-        ]
-    },
-    "created_at": "2022-08-22T22:02:15.825471Z",
-    "updated_at": "2022-08-22T22:02:15.825471Z",
-    "refresh": false,
-    "requested_aal": "aal2"
-}
\ No newline at end of file
+  "id": "0e21a525-6aa7-40e2-8dbf-5fa51f292dc1",
+  "type": "browser",
+  "expires_at": "2022-08-22T22:32:15.614434Z",
+  "issued_at": "2022-08-22T22:02:15.614434Z",
+  "request_url": "http://project.console.ory.sh/self-service/login/browser?aal=aal2",
+  "ui": {
+    "action": "https://project.console.ory.sh/self-service/login?flow=0e21a525-6aa7-40e2-8dbf-5fa51f292dc1",
+    "method": "POST",
+    "nodes": [
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "csrf_token",
+          "type": "hidden",
+          "value": "daYqaGczESQOiLZ03a+YgBJC9eo/mHfVl52x4rFnS8gqrH/EoYRdnNT62zDsbHpeDdHvvNLmzxAPN+QBbmDpBw==",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "identifier",
+          "type": "hidden",
+          "value": "aecaf2bf-b33f-4271-9c4d-0c0eb722fcf8",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "webauthn",
+        "attributes": {
+          "name": "webauthn_login_trigger",
+          "type": "button",
+          "value": "",
+          "disabled": false,
+          "onclick": "window.__oryWebAuthnLogin({\"publicKey\":{\"challenge\":\"=\",\"timeout\":60000,\"rpId\":\"console.ory.sh\",\"allowCredentials\":[{\"type\":\"public-key\",\"id\":\"==\"}],\"userVerification\":\"discouraged\"}})",
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010008,
+            "text": "Use security key",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "webauthn",
+        "attributes": {
+          "name": "webauthn_login",
+          "type": "hidden",
+          "value": "",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "script",
+        "group": "webauthn",
+        "attributes": {
+          "src": "https://project.console.ory.sh/.well-known/ory/webauthn.js",
+          "async": true,
+          "referrerpolicy": "no-referrer",
+          "crossorigin": "anonymous",
+          "integrity": "sha512-E3ctShTQEYTkfWrjztRCbP77lN7L0jJC2IOd6j8vqUKslvqhX/Ho3QxlQJIeTI78krzAWUQlDXd9JQ0PZlKhzQ==",
+          "type": "text/javascript",
+          "id": "webauthn_script",
+          "nonce": "6d2cacc8-9abd-4f8f-b2b9-cd5250bfa677",
+          "node_type": "script"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "totp",
+        "attributes": {
+          "name": "totp_code",
+          "type": "text",
+          "value": "",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010006,
+            "text": "Authentication code",
+            "type": "info",
+            "context": {}
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "totp",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "totp",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010009,
+            "text": "Use Authenticator",
+            "type": "info",
+            "context": {}
+          }
+        }
+      }
+    ],
+    "messages": [
+      {
+        "id": 1010004,
+        "text": "Please complete the second authentication challenge.",
+        "type": "info",
+        "context": {}
+      }
+    ]
+  },
+  "created_at": "2022-08-22T22:02:15.825471Z",
+  "updated_at": "2022-08-22T22:02:15.825471Z",
+  "refresh": false,
+  "requested_aal": "aal2"
+}
diff --git a/src/stories/Ory/login-flow-error.json b/src/stories/Ory/login-flow-error.json
index 49d504ac3..1b30aad5b 100644
--- a/src/stories/Ory/login-flow-error.json
+++ b/src/stories/Ory/login-flow-error.json
@@ -1,143 +1,143 @@
 {
-    "id": "e565dc97-17cd-462c-b02a-575cae0073d7",
-    "type": "browser",
-    "expires_at": "2022-08-11T09:58:08.397197Z",
-    "issued_at": "2022-08-11T09:28:08.397197Z",
-    "request_url": "http://project.console.ory.sh/self-service/login/browser?refresh=false",
-    "ui": {
-        "action": "https://project.console.ory.sh/self-service/login?flow=e565dc97-17cd-462c-b02a-575cae0073d7",
-        "method": "POST",
-        "nodes": [
-            {
-                "type": "input",
-                "group": "oidc",
-                "attributes": {
-                    "name": "provider",
-                    "type": "submit",
-                    "value": "github",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1010002,
-                        "text": "Sign in with github",
-                        "type": "info",
-                        "context": {
-                            "provider": "github"
-                        }
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "oidc",
-                "attributes": {
-                    "name": "provider",
-                    "type": "submit",
-                    "value": "google",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1010002,
-                        "text": "Sign in with google",
-                        "type": "info",
-                        "context": {
-                            "provider": "google"
-                        }
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "default",
-                "attributes": {
-                    "name": "csrf_token",
-                    "type": "hidden",
-                    "value": "9MLkOckkbh9rK3kgR9qE2GJ5l86+NTRNXXsYwxe91gjhKXtl9aHG1TvNZiaOpwW2ioypjvKPt/KlrUFIRSnCUQ==",
-                    "required": true,
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {}
-            },
-            {
-                "type": "input",
-                "group": "default",
-                "attributes": {
-                    "name": "identifier",
-                    "type": "text",
-                    "value": "sd@fsd",
-                    "required": true,
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070004,
-                        "text": "ID",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "password",
-                "attributes": {
-                    "name": "password",
-                    "type": "password",
-                    "required": true,
-                    "autocomplete": "current-password",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070001,
-                        "text": "Password",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "password",
-                "attributes": {
-                    "name": "method",
-                    "type": "submit",
-                    "value": "password",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1010001,
-                        "text": "Sign in",
-                        "type": "info",
-                        "context": {}
-                    }
-                }
+  "id": "e565dc97-17cd-462c-b02a-575cae0073d7",
+  "type": "browser",
+  "expires_at": "2022-08-11T09:58:08.397197Z",
+  "issued_at": "2022-08-11T09:28:08.397197Z",
+  "request_url": "http://project.console.ory.sh/self-service/login/browser?refresh=false",
+  "ui": {
+    "action": "https://project.console.ory.sh/self-service/login?flow=e565dc97-17cd-462c-b02a-575cae0073d7",
+    "method": "POST",
+    "nodes": [
+      {
+        "type": "input",
+        "group": "oidc",
+        "attributes": {
+          "name": "provider",
+          "type": "submit",
+          "value": "github",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010002,
+            "text": "Sign in with github",
+            "type": "info",
+            "context": {
+              "provider": "github"
             }
-        ],
-        "messages": [
-            {
-                "id": 4000006,
-                "text": "The provided credentials are invalid, check for spelling mistakes in your password or username, email address, or phone number.",
-                "type": "error",
-                "context": {}
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "oidc",
+        "attributes": {
+          "name": "provider",
+          "type": "submit",
+          "value": "google",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010002,
+            "text": "Sign in with google",
+            "type": "info",
+            "context": {
+              "provider": "google"
             }
-        ]
-    },
-    "created_at": "2022-08-11T09:28:08.405977Z",
-    "updated_at": "2022-08-11T09:28:08.405977Z",
-    "refresh": false,
-    "requested_aal": "aal1"
-}
\ No newline at end of file
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "csrf_token",
+          "type": "hidden",
+          "value": "9MLkOckkbh9rK3kgR9qE2GJ5l86+NTRNXXsYwxe91gjhKXtl9aHG1TvNZiaOpwW2ioypjvKPt/KlrUFIRSnCUQ==",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "identifier",
+          "type": "text",
+          "value": "sd@fsd",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070004,
+            "text": "ID",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "password",
+          "type": "password",
+          "required": true,
+          "autocomplete": "current-password",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070001,
+            "text": "Password",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "password",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010001,
+            "text": "Sign in",
+            "type": "info",
+            "context": {}
+          }
+        }
+      }
+    ],
+    "messages": [
+      {
+        "id": 4000006,
+        "text": "The provided credentials are invalid, check for spelling mistakes in your password or username, email address, or phone number.",
+        "type": "error",
+        "context": {}
+      }
+    ]
+  },
+  "created_at": "2022-08-11T09:28:08.405977Z",
+  "updated_at": "2022-08-11T09:28:08.405977Z",
+  "refresh": false,
+  "requested_aal": "aal1"
+}
diff --git a/src/stories/Ory/login-flow.json b/src/stories/Ory/login-flow.json
index 4e3e926bb..7d5c747e5 100644
--- a/src/stories/Ory/login-flow.json
+++ b/src/stories/Ory/login-flow.json
@@ -1,111 +1,111 @@
 {
-    "id": "4a7c067f-ae1f-4015-b3e3-74e1de254b40",
-    "type": "browser",
-    "expires_at": "2022-08-23T18:50:56.82053129Z",
-    "issued_at": "2022-08-23T18:20:56.82053129Z",
-    "request_url": "http://test.com/self-service/login/browser",
-    "ui": {
-        "action": "http://test.com/self-service/login?flow=4a7c067f-ae1f-4015-b3e3-74e1de254b40",
-        "method": "POST",
-        "nodes": [
-            {
-                "type": "input",
-                "group": "default",
-                "attributes": {
-                    "name": "csrf_token",
-                    "type": "hidden",
-                    "value": "6Ov489/mtfsZ9cnFjqsSzxITOj4F6F1DaLTlrznzZtmFNHE9hssysNvRxD6vmbjhxexBYUcJ4HMC14wSREegkg==",
-                    "required": true,
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {}
-            },
-            {
-                "type": "input",
-                "group": "default",
-                "attributes": {
-                    "name": "identifier",
-                    "type": "text",
-                    "value": "",
-                    "required": true,
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070004,
-                        "text": "ID",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "webauthn",
-                "attributes": {
-                    "name": "method",
-                    "type": "submit",
-                    "value": "webauthn",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1010001,
-                        "text": "Sign in with security key",
-                        "type": "info",
-                        "context": {}
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "password",
-                "attributes": {
-                    "name": "password",
-                    "type": "password",
-                    "required": true,
-                    "autocomplete": "current-password",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070001,
-                        "text": "Password",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "password",
-                "attributes": {
-                    "name": "method",
-                    "type": "submit",
-                    "value": "password",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1010001,
-                        "text": "Sign in",
-                        "type": "info",
-                        "context": {}
-                    }
-                }
-            }
-        ]
-    },
-    "created_at": "2022-08-23T18:20:56.827165Z",
-    "updated_at": "2022-08-23T18:20:56.827165Z",
-    "refresh": false,
-    "requested_aal": "aal1"
-}
\ No newline at end of file
+  "id": "4a7c067f-ae1f-4015-b3e3-74e1de254b40",
+  "type": "browser",
+  "expires_at": "2022-08-23T18:50:56.82053129Z",
+  "issued_at": "2022-08-23T18:20:56.82053129Z",
+  "request_url": "http://test.com/self-service/login/browser",
+  "ui": {
+    "action": "http://test.com/self-service/login?flow=4a7c067f-ae1f-4015-b3e3-74e1de254b40",
+    "method": "POST",
+    "nodes": [
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "csrf_token",
+          "type": "hidden",
+          "value": "6Ov489/mtfsZ9cnFjqsSzxITOj4F6F1DaLTlrznzZtmFNHE9hssysNvRxD6vmbjhxexBYUcJ4HMC14wSREegkg==",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "identifier",
+          "type": "text",
+          "value": "",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070004,
+            "text": "ID",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "webauthn",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "webauthn",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010001,
+            "text": "Sign in with security key",
+            "type": "info",
+            "context": {}
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "password",
+          "type": "password",
+          "required": true,
+          "autocomplete": "current-password",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070001,
+            "text": "Password",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "password",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1010001,
+            "text": "Sign in",
+            "type": "info",
+            "context": {}
+          }
+        }
+      }
+    ]
+  },
+  "created_at": "2022-08-23T18:20:56.827165Z",
+  "updated_at": "2022-08-23T18:20:56.827165Z",
+  "refresh": false,
+  "requested_aal": "aal1"
+}
diff --git a/src/stories/Ory/recovery-flow.json b/src/stories/Ory/recovery-flow.json
index c1ceb15df..64414346d 100644
--- a/src/stories/Ory/recovery-flow.json
+++ b/src/stories/Ory/recovery-flow.json
@@ -1,66 +1,66 @@
 {
-    "id": "d1aee690-fc92-456c-b4df-fcc536184d72",
-    "type": "browser",
-    "expires_at": "2022-08-10T16:22:14.721210778Z",
-    "issued_at": "2022-08-10T15:52:14.721210778Z",
-    "request_url": "http://project.console.ory.sh/self-service/recovery/browser",
-    "ui": {
-        "action": "https://project.console.ory.sh/self-service/recovery?flow=d1aee690-fc92-456c-b4df-fcc536184d72",
-        "method": "POST",
-        "nodes": [
-            {
-                "type": "input",
-                "group": "default",
-                "attributes": {
-                    "name": "csrf_token",
-                    "type": "hidden",
-                    "value": "908s8H/4VNyyLghv9crWHroZ/cu5el1IjQvOP3cQJS4ayNvETILNednFoWJ113AhcYrW8qNGJX2B1PAjRscNng==",
-                    "required": true,
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {}
-            },
-            {
-                "type": "input",
-                "group": "link",
-                "attributes": {
-                    "name": "email",
-                    "type": "email",
-                    "required": true,
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070007,
-                        "text": "Email",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "link",
-                "attributes": {
-                    "name": "method",
-                    "type": "submit",
-                    "value": "link",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070005,
-                        "text": "Submit",
-                        "type": "info"
-                    }
-                }
-            }
-        ]
-    },
-    "state": "choose_method"
-}
\ No newline at end of file
+  "id": "d1aee690-fc92-456c-b4df-fcc536184d72",
+  "type": "browser",
+  "expires_at": "2022-08-10T16:22:14.721210778Z",
+  "issued_at": "2022-08-10T15:52:14.721210778Z",
+  "request_url": "http://project.console.ory.sh/self-service/recovery/browser",
+  "ui": {
+    "action": "https://project.console.ory.sh/self-service/recovery?flow=d1aee690-fc92-456c-b4df-fcc536184d72",
+    "method": "POST",
+    "nodes": [
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "csrf_token",
+          "type": "hidden",
+          "value": "908s8H/4VNyyLghv9crWHroZ/cu5el1IjQvOP3cQJS4ayNvETILNednFoWJ113AhcYrW8qNGJX2B1PAjRscNng==",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "link",
+        "attributes": {
+          "name": "email",
+          "type": "email",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070007,
+            "text": "Email",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "link",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "link",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070005,
+            "text": "Submit",
+            "type": "info"
+          }
+        }
+      }
+    ]
+  },
+  "state": "choose_method"
+}
diff --git a/src/stories/Ory/register-flow-webauthn.json b/src/stories/Ory/register-flow-webauthn.json
index 3a62f77dc..2273a44e3 100644
--- a/src/stories/Ory/register-flow-webauthn.json
+++ b/src/stories/Ory/register-flow-webauthn.json
@@ -1,175 +1,175 @@
 {
-    "id": "a4535906-1c4b-4b4a-b84e-8246b756dffe",
-    "type": "browser",
-    "expires_at": "2022-08-22T14:39:46.330928Z",
-    "issued_at": "2022-08-22T14:09:46.330928Z",
-    "request_url": "http://project.console.ory.sh/self-service/registration/browser?return_to=",
-    "ui": {
-        "action": "http://project.console.ory.sh/self-service/registration?flow=a4535906-1c4b-4b4a-b84e-8246b756dffe",
-        "method": "POST",
-        "nodes": [
-            {
-                "type": "input",
-                "group": "default",
-                "attributes": {
-                    "name": "traits.email",
-                    "type": "email",
-                    "required": true,
-                    "autocomplete": "email",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070002,
-                        "text": "E-Mail",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "default",
-                "attributes": {
-                    "name": "traits.firstName",
-                    "type": "text",
-                    "required": true,
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070002,
-                        "text": "First Name",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "default",
-                "attributes": {
-                    "name": "csrf_token",
-                    "type": "hidden",
-                    "value": "f5EgWzcuFMVn0hSuGmotWjJntG1VRIWHzRdpqOfNucu+JJempBB0+ivjTG6iR50mV1ScEpwoshFF0pe/nESywA==",
-                    "required": true,
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {}
-            },
-            {
-                "type": "input",
-                "group": "webauthn",
-                "attributes": {
-                    "name": "webauthn_register_displayname",
-                    "type": "text",
-                    "value": "",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1050013,
-                        "text": "Name of the security key",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "webauthn",
-                "attributes": {
-                    "name": "webauthn_register",
-                    "type": "hidden",
-                    "value": "",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {}
-            },
-            {
-                "type": "input",
-                "group": "webauthn",
-                "attributes": {
-                    "name": "webauthn_register_trigger",
-                    "type": "button",
-                    "value": "",
-                    "disabled": false,
-                    "onclick": "window.__oryWebAuthnRegistration({\"publicKey\":{\"challenge\":\"s=\",\"rp\":{\"name\":\"Personal\",\"id\":\"some-slug.projects.oryapis.com\"},\"user\":{\"name\":\"placeholder\",\"icon\":\"https://via.placeholder.com/128\",\"displayName\":\"placeholder\",\"id\":\"==\"},\"pubKeyCredParams\":[{\"type\":\"public-key\",\"alg\":-7},{\"type\":\"public-key\",\"alg\":-35},{\"type\":\"public-key\",\"alg\":-36},{\"type\":\"public-key\",\"alg\":-257},{\"type\":\"public-key\",\"alg\":-258},{\"type\":\"public-key\",\"alg\":-259},{\"type\":\"public-key\",\"alg\":-37},{\"type\":\"public-key\",\"alg\":-38},{\"type\":\"public-key\",\"alg\":-39},{\"type\":\"public-key\",\"alg\":-8}],\"authenticatorSelection\":{\"userVerification\":\"discouraged\"},\"timeout\":60000}})",
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1040004,
-                        "text": "Sign up with security key",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "script",
-                "group": "webauthn",
-                "attributes": {
-                    "src": "http://project.console.ory.sh/.well-known/ory/webauthn.js",
-                    "async": true,
-                    "referrerpolicy": "no-referrer",
-                    "crossorigin": "anonymous",
-                    "integrity": "sha512-E3ctShTQEYTkfWrjztRCbP77lN7L0jJC2IOd6j8vqUKslvqhX/Ho3QxlQJIeTI78krzAWUQlDXd9JQ0PZlKhzQ==",
-                    "type": "text/javascript",
-                    "id": "webauthn_script",
-                    "nonce": "107c6218-7cc9-4533-917d-57ccc3cf90c6",
-                    "node_type": "script"
-                },
-                "messages": [],
-                "meta": {}
-            },
-            {
-                "type": "input",
-                "group": "password",
-                "attributes": {
-                    "name": "password",
-                    "type": "password",
-                    "required": true,
-                    "autocomplete": "new-password",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070001,
-                        "text": "Password",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "password",
-                "attributes": {
-                    "name": "method",
-                    "type": "submit",
-                    "value": "password",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1040001,
-                        "text": "Sign up",
-                        "type": "info",
-                        "context": {}
-                    }
-                }
-            }
-        ]
-    }
-}
\ No newline at end of file
+  "id": "a4535906-1c4b-4b4a-b84e-8246b756dffe",
+  "type": "browser",
+  "expires_at": "2022-08-22T14:39:46.330928Z",
+  "issued_at": "2022-08-22T14:09:46.330928Z",
+  "request_url": "http://project.console.ory.sh/self-service/registration/browser?return_to=",
+  "ui": {
+    "action": "http://project.console.ory.sh/self-service/registration?flow=a4535906-1c4b-4b4a-b84e-8246b756dffe",
+    "method": "POST",
+    "nodes": [
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "traits.email",
+          "type": "email",
+          "required": true,
+          "autocomplete": "email",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070002,
+            "text": "E-Mail",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "traits.firstName",
+          "type": "text",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070002,
+            "text": "First Name",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "csrf_token",
+          "type": "hidden",
+          "value": "f5EgWzcuFMVn0hSuGmotWjJntG1VRIWHzRdpqOfNucu+JJempBB0+ivjTG6iR50mV1ScEpwoshFF0pe/nESywA==",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "webauthn",
+        "attributes": {
+          "name": "webauthn_register_displayname",
+          "type": "text",
+          "value": "",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1050013,
+            "text": "Name of the security key",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "webauthn",
+        "attributes": {
+          "name": "webauthn_register",
+          "type": "hidden",
+          "value": "",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "webauthn",
+        "attributes": {
+          "name": "webauthn_register_trigger",
+          "type": "button",
+          "value": "",
+          "disabled": false,
+          "onclick": "window.__oryWebAuthnRegistration({\"publicKey\":{\"challenge\":\"s=\",\"rp\":{\"name\":\"Personal\",\"id\":\"some-slug.projects.oryapis.com\"},\"user\":{\"name\":\"placeholder\",\"icon\":\"https://via.placeholder.com/128\",\"displayName\":\"placeholder\",\"id\":\"==\"},\"pubKeyCredParams\":[{\"type\":\"public-key\",\"alg\":-7},{\"type\":\"public-key\",\"alg\":-35},{\"type\":\"public-key\",\"alg\":-36},{\"type\":\"public-key\",\"alg\":-257},{\"type\":\"public-key\",\"alg\":-258},{\"type\":\"public-key\",\"alg\":-259},{\"type\":\"public-key\",\"alg\":-37},{\"type\":\"public-key\",\"alg\":-38},{\"type\":\"public-key\",\"alg\":-39},{\"type\":\"public-key\",\"alg\":-8}],\"authenticatorSelection\":{\"userVerification\":\"discouraged\"},\"timeout\":60000}})",
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1040004,
+            "text": "Sign up with security key",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "script",
+        "group": "webauthn",
+        "attributes": {
+          "src": "http://project.console.ory.sh/.well-known/ory/webauthn.js",
+          "async": true,
+          "referrerpolicy": "no-referrer",
+          "crossorigin": "anonymous",
+          "integrity": "sha512-E3ctShTQEYTkfWrjztRCbP77lN7L0jJC2IOd6j8vqUKslvqhX/Ho3QxlQJIeTI78krzAWUQlDXd9JQ0PZlKhzQ==",
+          "type": "text/javascript",
+          "id": "webauthn_script",
+          "nonce": "107c6218-7cc9-4533-917d-57ccc3cf90c6",
+          "node_type": "script"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "password",
+          "type": "password",
+          "required": true,
+          "autocomplete": "new-password",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070001,
+            "text": "Password",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "password",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1040001,
+            "text": "Sign up",
+            "type": "info",
+            "context": {}
+          }
+        }
+      }
+    ]
+  }
+}
diff --git a/src/stories/Ory/register-flow.json b/src/stories/Ory/register-flow.json
index 5118bfc50..5727c9b3b 100644
--- a/src/stories/Ory/register-flow.json
+++ b/src/stories/Ory/register-flow.json
@@ -1,187 +1,187 @@
 {
-    "id": "c9dd6996-b5f9-4255-ba49-5ed0e13b1b9a",
-    "type": "browser",
-    "expires_at": "2022-08-05T11:13:15.502149013Z",
-    "issued_at": "2022-08-05T10:43:15.502149013Z",
-    "request_url": "http://project.console.ory.sh/self-service/registration/browser",
-    "ui": {
-        "action": "https://project.console.ory.sh/self-service/registration?flow=c9dd6996-b5f9-4255-ba49-5ed0e13b1b9a",
-        "method": "POST",
-        "nodes": [
-            {
-                "type": "input",
-                "group": "default",
-                "attributes": {
-                    "name": "csrf_token",
-                    "type": "hidden",
-                    "value": "tFdjiYdn6IgyeoiDfN7AGRgDX2AzcwhcJl4emCXMKo3ciO6e5FxI9MDvRov1yWUtA07pe6dYa/yejFY72+ktsQ==",
-                    "required": true,
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {}
-            },
-            {
-                "type": "input",
-                "group": "oidc",
-                "attributes": {
-                    "name": "provider",
-                    "type": "submit",
-                    "value": "github",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1040002,
-                        "text": "Sign up with github",
-                        "type": "info",
-                        "context": {
-                            "provider": "github"
-                        }
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "oidc",
-                "attributes": {
-                    "name": "provider",
-                    "type": "submit",
-                    "value": "google",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1040002,
-                        "text": "Sign up with google",
-                        "type": "info",
-                        "context": {
-                            "provider": "google"
-                        }
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "password",
-                "attributes": {
-                    "name": "traits.email",
-                    "type": "email",
-                    "required": true,
-                    "autocomplete": "email",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070002,
-                        "text": "Email address",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "password",
-                "attributes": {
-                    "name": "password",
-                    "type": "password",
-                    "required": true,
-                    "autocomplete": "new-password",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070001,
-                        "text": "Password",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "password",
-                "attributes": {
-                    "name": "traits.name",
-                    "type": "text",
-                    "required": true,
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070002,
-                        "text": "Name",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "password",
-                "attributes": {
-                    "name": "traits.consent.newsletter",
-                    "type": "checkbox",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070002,
-                        "text": "Please inform me about platform and security updates",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "password",
-                "attributes": {
-                    "name": "traits.consent.tos",
-                    "type": "datetime-local",
-                    "required": true,
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070002,
-                        "text": "I accept the Terms of Service https://www.ory.sh/ptos",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "password",
-                "attributes": {
-                    "name": "method",
-                    "type": "submit",
-                    "value": "password",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1040001,
-                        "text": "Sign up",
-                        "type": "info",
-                        "context": {}
-                    }
-                }
+  "id": "c9dd6996-b5f9-4255-ba49-5ed0e13b1b9a",
+  "type": "browser",
+  "expires_at": "2022-08-05T11:13:15.502149013Z",
+  "issued_at": "2022-08-05T10:43:15.502149013Z",
+  "request_url": "http://project.console.ory.sh/self-service/registration/browser",
+  "ui": {
+    "action": "https://project.console.ory.sh/self-service/registration?flow=c9dd6996-b5f9-4255-ba49-5ed0e13b1b9a",
+    "method": "POST",
+    "nodes": [
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "csrf_token",
+          "type": "hidden",
+          "value": "tFdjiYdn6IgyeoiDfN7AGRgDX2AzcwhcJl4emCXMKo3ciO6e5FxI9MDvRov1yWUtA07pe6dYa/yejFY72+ktsQ==",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "oidc",
+        "attributes": {
+          "name": "provider",
+          "type": "submit",
+          "value": "github",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1040002,
+            "text": "Sign up with github",
+            "type": "info",
+            "context": {
+              "provider": "github"
             }
-        ]
-    }
-}
\ No newline at end of file
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "oidc",
+        "attributes": {
+          "name": "provider",
+          "type": "submit",
+          "value": "google",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1040002,
+            "text": "Sign up with google",
+            "type": "info",
+            "context": {
+              "provider": "google"
+            }
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "traits.email",
+          "type": "email",
+          "required": true,
+          "autocomplete": "email",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070002,
+            "text": "Email address",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "password",
+          "type": "password",
+          "required": true,
+          "autocomplete": "new-password",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070001,
+            "text": "Password",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "traits.name",
+          "type": "text",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070002,
+            "text": "Name",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "traits.consent.newsletter",
+          "type": "checkbox",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070002,
+            "text": "Please inform me about platform and security updates",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "traits.consent.tos",
+          "type": "datetime-local",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070002,
+            "text": "I accept the Terms of Service https://www.ory.sh/ptos",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "password",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "password",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1040001,
+            "text": "Sign up",
+            "type": "info",
+            "context": {}
+          }
+        }
+      }
+    ]
+  }
+}
diff --git a/src/stories/Ory/verification-flow.json b/src/stories/Ory/verification-flow.json
index 1b0c2b46e..add77e013 100644
--- a/src/stories/Ory/verification-flow.json
+++ b/src/stories/Ory/verification-flow.json
@@ -1,66 +1,66 @@
 {
-    "id": "544adecc-d51f-443a-b5a0-8e57a639bcbf",
-    "type": "browser",
-    "expires_at": "2022-08-10T17:31:11.730178932Z",
-    "issued_at": "2022-08-10T16:31:11.730178932Z",
-    "request_url": "http://project.console.ory.sh/self-service/verification/browser",
-    "ui": {
-        "action": "https://project.console.ory.sh/self-service/verification?flow=544adecc-d51f-443a-b5a0-8e57a639bcbf",
-        "method": "POST",
-        "nodes": [
-            {
-                "type": "input",
-                "group": "default",
-                "attributes": {
-                    "name": "csrf_token",
-                    "type": "hidden",
-                    "value": "Tdt00Dex00zJt+wEPXedaEaBIfyfqyJEP3A1jUnribGgXIPkBMtK6aJcRQm9ajtXjRIKxYWXWnEzrwuReDyhAQ==",
-                    "required": true,
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {}
-            },
-            {
-                "type": "input",
-                "group": "link",
-                "attributes": {
-                    "name": "email",
-                    "type": "email",
-                    "required": true,
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070007,
-                        "text": "Email",
-                        "type": "info"
-                    }
-                }
-            },
-            {
-                "type": "input",
-                "group": "link",
-                "attributes": {
-                    "name": "method",
-                    "type": "submit",
-                    "value": "link",
-                    "disabled": false,
-                    "node_type": "input"
-                },
-                "messages": [],
-                "meta": {
-                    "label": {
-                        "id": 1070005,
-                        "text": "Submit",
-                        "type": "info"
-                    }
-                }
-            }
-        ]
-    },
-    "state": "choose_method"
-}
\ No newline at end of file
+  "id": "544adecc-d51f-443a-b5a0-8e57a639bcbf",
+  "type": "browser",
+  "expires_at": "2022-08-10T17:31:11.730178932Z",
+  "issued_at": "2022-08-10T16:31:11.730178932Z",
+  "request_url": "http://project.console.ory.sh/self-service/verification/browser",
+  "ui": {
+    "action": "https://project.console.ory.sh/self-service/verification?flow=544adecc-d51f-443a-b5a0-8e57a639bcbf",
+    "method": "POST",
+    "nodes": [
+      {
+        "type": "input",
+        "group": "default",
+        "attributes": {
+          "name": "csrf_token",
+          "type": "hidden",
+          "value": "Tdt00Dex00zJt+wEPXedaEaBIfyfqyJEP3A1jUnribGgXIPkBMtK6aJcRQm9ajtXjRIKxYWXWnEzrwuReDyhAQ==",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {}
+      },
+      {
+        "type": "input",
+        "group": "link",
+        "attributes": {
+          "name": "email",
+          "type": "email",
+          "required": true,
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070007,
+            "text": "Email",
+            "type": "info"
+          }
+        }
+      },
+      {
+        "type": "input",
+        "group": "link",
+        "attributes": {
+          "name": "method",
+          "type": "submit",
+          "value": "link",
+          "disabled": false,
+          "node_type": "input"
+        },
+        "messages": [],
+        "meta": {
+          "label": {
+            "id": 1070005,
+            "text": "Submit",
+            "type": "info"
+          }
+        }
+      }
+    ]
+  },
+  "state": "choose_method"
+}
diff --git a/src/theme/nav.css.ts b/src/theme/nav.css.ts
index 64bdf781a..fc27afc90 100644
--- a/src/theme/nav.css.ts
+++ b/src/theme/nav.css.ts
@@ -41,7 +41,7 @@ export const navSectionTitleStyle = style({
   flexDirection: "row",
   justifyContent: "space-between",
   alignItems: "center",
-  
+
   padding: pxToRem(0, 8, 6),
 })
 
diff --git a/tests/preact-spa/package.json b/tests/preact-spa/package.json
index fc1307862..317ce3402 100644
--- a/tests/preact-spa/package.json
+++ b/tests/preact-spa/package.json
@@ -24,4 +24,4 @@
   "eslintConfig": {
     "extends": "preact"
   }
-}
\ No newline at end of file
+}
diff --git a/tests/preact-spa/vite.config.ts b/tests/preact-spa/vite.config.ts
index e3bdaffe8..c8a215738 100644
--- a/tests/preact-spa/vite.config.ts
+++ b/tests/preact-spa/vite.config.ts
@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import preact from '@preact/preset-vite'
+import { defineConfig } from "vite"
+import preact from "@preact/preset-vite"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact()]
+  plugins: [preact()],
 })
diff --git a/tests/react-spa/package.json b/tests/react-spa/package.json
index f26bf90cd..20f60247e 100644
--- a/tests/react-spa/package.json
+++ b/tests/react-spa/package.json
@@ -21,4 +21,4 @@
     "typescript": "^4.6.4",
     "vite": "^3.0.7"
   }
-}
\ No newline at end of file
+}
diff --git a/tests/react-spa/vite.config.ts b/tests/react-spa/vite.config.ts
index b1b5f91e5..16d719d61 100644
--- a/tests/react-spa/vite.config.ts
+++ b/tests/react-spa/vite.config.ts
@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react()],
 })
diff --git a/tsconfig.build.json b/tsconfig.build.json
index 0e21a886d..6ce3f196a 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -1,13 +1,19 @@
 {
-    "extends": "./tsconfig.json",
-    "compilerOptions": {
-      "emitDeclarationOnly": false,
-      "declaration": true,
-      "declarationMap": true,
-      "declarationDir": "dist",
-      "rootDir": "./src",
-      "noEmit": false
-    },
-    "include": ["./src"],
-    "exclude": ["**/*.spec.*", "**/*.test.*", "**/*.stories.*", "node_modules", "dist"]
-}
\ No newline at end of file
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDeclarationOnly": false,
+    "declaration": true,
+    "declarationMap": true,
+    "declarationDir": "dist",
+    "rootDir": "./src",
+    "noEmit": false
+  },
+  "include": ["./src"],
+  "exclude": [
+    "**/*.spec.*",
+    "**/*.test.*",
+    "**/*.stories.*",
+    "node_modules",
+    "dist"
+  ]
+}
diff --git a/tsconfig.json b/tsconfig.json
index d27f8ade9..8108760c9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,11 +2,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
-    ],
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 0fdd25208..7fa507678 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -5,7 +5,7 @@
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
-    "esModuleInterop": true,
+    "esModuleInterop": true
   },
   "include": ["vite.config.ts"]
 }