diff --git a/examples/query/react/advanced/src/Pokemon.tsx b/examples/query/react/advanced/src/Pokemon.tsx
index 4e848e96..9746ec0d 100644
--- a/examples/query/react/advanced/src/Pokemon.tsx
+++ b/examples/query/react/advanced/src/Pokemon.tsx
@@ -1,33 +1,33 @@
-import { useGetPokemonByNameQuery } from './services/pokemon'
-
-export const Pokemon = ({
-  name,
-  pollingInterval,
-}: {
-  name: string
-  pollingInterval: number
-}) => {
-  const { data, error, isLoading, isFetching } = useGetPokemonByNameQuery(
-    name,
-    {
-      pollingInterval,
-    },
-  )
-
-  return (
-    <>
-      {error ? (
-        <>Oh no, there was an error</>
-      ) : isLoading ? (
-        <>Loading...</>
-      ) : data ? (
-        <>
-          <h3>
-            {data.species.name} {isFetching ? '...' : ''}
-          </h3>
-          <img src={data.sprites.front_shiny} alt={data.species.name} />
-        </>
-      ) : null}
-    </>
-  )
-}
+import { useGetPokemonByNameQuery } from './services/pokemon'
+
+export const Pokemon = ({
+  name,
+  pollingInterval,
+}: {
+  name: string
+  pollingInterval: number
+}) => {
+  const { data, error, isLoading, isFetching } = useGetPokemonByNameQuery(
+    name,
+    {
+      pollingInterval,
+    },
+  )
+
+  return (
+    <>
+      {error ? (
+        <>Oh no, there was an error</>
+      ) : isLoading ? (
+        <>Loading...</>
+      ) : data ? (
+        <>
+          <h3>
+            {data.species.name} {isFetching ? '...' : ''}
+          </h3>
+          <img src={data.sprites.front_shiny} alt={data.species.name} />
+        </>
+      ) : null}
+    </>
+  )
+}
diff --git a/examples/query/react/advanced/src/services/pokemon.ts b/examples/query/react/advanced/src/services/pokemon.ts
index d9f7890a..5ec3234f 100644
--- a/examples/query/react/advanced/src/services/pokemon.ts
+++ b/examples/query/react/advanced/src/services/pokemon.ts
@@ -1,15 +1,15 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-
-export const pokemonApi = createApi({
-  reducerPath: 'pokemonApi',
-  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
-  tagTypes: [],
-  endpoints: (builder) => ({
-    getPokemonByName: builder.query({
-      query: (name: string) => `pokemon/${name}`,
-    }),
-  }),
-})
-
-// Export hooks for usage in functional components
-export const { useGetPokemonByNameQuery } = pokemonApi
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+export const pokemonApi = createApi({
+  reducerPath: 'pokemonApi',
+  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
+  tagTypes: [],
+  endpoints: (builder) => ({
+    getPokemonByName: builder.query({
+      query: (name: string) => `pokemon/${name}`,
+    }),
+  }),
+})
+
+// Export hooks for usage in functional components
+export const { useGetPokemonByNameQuery } = pokemonApi
diff --git a/examples/query/react/authentication-with-extrareducers/src/mocks/browser.ts b/examples/query/react/authentication-with-extrareducers/src/mocks/browser.ts
index d8d2c7d7..b234fdae 100644
--- a/examples/query/react/authentication-with-extrareducers/src/mocks/browser.ts
+++ b/examples/query/react/authentication-with-extrareducers/src/mocks/browser.ts
@@ -1,4 +1,4 @@
-import { setupWorker } from 'msw'
-import { handlers } from './handlers'
-
-export const worker = setupWorker(...handlers)
+import { setupWorker } from 'msw'
+import { handlers } from './handlers'
+
+export const worker = setupWorker(...handlers)
diff --git a/examples/query/react/authentication/src/mocks/browser.ts b/examples/query/react/authentication/src/mocks/browser.ts
index d8d2c7d7..b234fdae 100644
--- a/examples/query/react/authentication/src/mocks/browser.ts
+++ b/examples/query/react/authentication/src/mocks/browser.ts
@@ -1,4 +1,4 @@
-import { setupWorker } from 'msw'
-import { handlers } from './handlers'
-
-export const worker = setupWorker(...handlers)
+import { setupWorker } from 'msw'
+import { handlers } from './handlers'
+
+export const worker = setupWorker(...handlers)
diff --git a/examples/query/react/basic/src/services/pokemon.ts b/examples/query/react/basic/src/services/pokemon.ts
index 1d2e0316..0a2b88e6 100644
--- a/examples/query/react/basic/src/services/pokemon.ts
+++ b/examples/query/react/basic/src/services/pokemon.ts
@@ -1,14 +1,14 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-
-export const pokemonApi = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
-  tagTypes: [],
-  endpoints: (builder) => ({
-    getPokemonByName: builder.query({
-      query: (name: string) => `pokemon/${name}`,
-    }),
-  }),
-})
-
-// Export hooks for usage in functional components
-export const { useGetPokemonByNameQuery } = pokemonApi
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+export const pokemonApi = createApi({
+  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
+  tagTypes: [],
+  endpoints: (builder) => ({
+    getPokemonByName: builder.query({
+      query: (name: string) => `pokemon/${name}`,
+    }),
+  }),
+})
+
+// Export hooks for usage in functional components
+export const { useGetPokemonByNameQuery } = pokemonApi
diff --git a/examples/query/react/basic/src/store.ts b/examples/query/react/basic/src/store.ts
index 22c59dd8..58e58a55 100644
--- a/examples/query/react/basic/src/store.ts
+++ b/examples/query/react/basic/src/store.ts
@@ -1,21 +1,21 @@
-import { combineReducers, configureStore } from '@reduxjs/toolkit'
-import type { PreloadedState } from '@reduxjs/toolkit'
-import { pokemonApi } from './services/pokemon'
-
-const rootReducer = combineReducers({
-  [pokemonApi.reducerPath]: pokemonApi.reducer,
-})
-
-export const setupStore = (preloadedState?: PreloadedState<RootState>) => {
-  return configureStore({
-    reducer: rootReducer,
-    middleware: (getDefaultMiddleware) =>
-      // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
-      getDefaultMiddleware().concat(pokemonApi.middleware),
-    preloadedState,
-  })
-}
-
-export type RootState = ReturnType<typeof rootReducer>
-export type AppStore = ReturnType<typeof setupStore>
-export type AppDispatch = AppStore['dispatch']
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import type { PreloadedState } from '@reduxjs/toolkit'
+import { pokemonApi } from './services/pokemon'
+
+const rootReducer = combineReducers({
+  [pokemonApi.reducerPath]: pokemonApi.reducer,
+})
+
+export const setupStore = (preloadedState?: PreloadedState<RootState>) => {
+  return configureStore({
+    reducer: rootReducer,
+    middleware: (getDefaultMiddleware) =>
+      // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
+      getDefaultMiddleware().concat(pokemonApi.middleware),
+    preloadedState,
+  })
+}
+
+export type RootState = ReturnType<typeof rootReducer>
+export type AppStore = ReturnType<typeof setupStore>
+export type AppDispatch = AppStore['dispatch']
diff --git a/examples/query/react/conditional-fetching/src/services/pokemon.ts b/examples/query/react/conditional-fetching/src/services/pokemon.ts
index b338a20b..fb7cc5c1 100644
--- a/examples/query/react/conditional-fetching/src/services/pokemon.ts
+++ b/examples/query/react/conditional-fetching/src/services/pokemon.ts
@@ -1,15 +1,15 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-import type { PokemonName } from '../pokemon.data'
-
-export const pokemonApi = createApi({
-  reducerPath: 'pokemonApi',
-  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
-  endpoints: (builder) => ({
-    getPokemonByName: builder.query({
-      query: (name: PokemonName) => `pokemon/${name}`,
-    }),
-  }),
-})
-
-// Export hooks for usage in functional components
-export const { useGetPokemonByNameQuery } = pokemonApi
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import type { PokemonName } from '../pokemon.data'
+
+export const pokemonApi = createApi({
+  reducerPath: 'pokemonApi',
+  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
+  endpoints: (builder) => ({
+    getPokemonByName: builder.query({
+      query: (name: PokemonName) => `pokemon/${name}`,
+    }),
+  }),
+})
+
+// Export hooks for usage in functional components
+export const { useGetPokemonByNameQuery } = pokemonApi
diff --git a/examples/query/react/conditional-fetching/src/store.ts b/examples/query/react/conditional-fetching/src/store.ts
index 8168bb91..69b71824 100644
--- a/examples/query/react/conditional-fetching/src/store.ts
+++ b/examples/query/react/conditional-fetching/src/store.ts
@@ -1,11 +1,11 @@
-import { configureStore } from '@reduxjs/toolkit'
-import { pokemonApi } from './services/pokemon'
-
-export const store = configureStore({
-  reducer: {
-    [pokemonApi.reducerPath]: pokemonApi.reducer,
-  },
-  // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
-  middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware().concat(pokemonApi.middleware),
-})
+import { configureStore } from '@reduxjs/toolkit'
+import { pokemonApi } from './services/pokemon'
+
+export const store = configureStore({
+  reducer: {
+    [pokemonApi.reducerPath]: pokemonApi.reducer,
+  },
+  // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(pokemonApi.middleware),
+})
diff --git a/examples/query/react/deduping-queries/src/services/pokemon.ts b/examples/query/react/deduping-queries/src/services/pokemon.ts
index 2dfb0463..67f55e3b 100644
--- a/examples/query/react/deduping-queries/src/services/pokemon.ts
+++ b/examples/query/react/deduping-queries/src/services/pokemon.ts
@@ -1,13 +1,13 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-
-export const pokemonApi = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
-  endpoints: (builder) => ({
-    getPokemonByName: builder.query({
-      query: (name: string) => `pokemon/${name}`,
-    }),
-  }),
-})
-
-// Export hooks for usage in functional components
-export const { useGetPokemonByNameQuery } = pokemonApi
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+export const pokemonApi = createApi({
+  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
+  endpoints: (builder) => ({
+    getPokemonByName: builder.query({
+      query: (name: string) => `pokemon/${name}`,
+    }),
+  }),
+})
+
+// Export hooks for usage in functional components
+export const { useGetPokemonByNameQuery } = pokemonApi
diff --git a/examples/query/react/deduping-queries/src/store.ts b/examples/query/react/deduping-queries/src/store.ts
index 8168bb91..69b71824 100644
--- a/examples/query/react/deduping-queries/src/store.ts
+++ b/examples/query/react/deduping-queries/src/store.ts
@@ -1,11 +1,11 @@
-import { configureStore } from '@reduxjs/toolkit'
-import { pokemonApi } from './services/pokemon'
-
-export const store = configureStore({
-  reducer: {
-    [pokemonApi.reducerPath]: pokemonApi.reducer,
-  },
-  // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
-  middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware().concat(pokemonApi.middleware),
-})
+import { configureStore } from '@reduxjs/toolkit'
+import { pokemonApi } from './services/pokemon'
+
+export const store = configureStore({
+  reducer: {
+    [pokemonApi.reducerPath]: pokemonApi.reducer,
+  },
+  // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(pokemonApi.middleware),
+})
diff --git a/examples/query/react/graphql-codegen/src/app/services/baseApi.ts b/examples/query/react/graphql-codegen/src/app/services/baseApi.ts
index 8e5f6919..aa2cf22d 100644
--- a/examples/query/react/graphql-codegen/src/app/services/baseApi.ts
+++ b/examples/query/react/graphql-codegen/src/app/services/baseApi.ts
@@ -1,9 +1,9 @@
-import { createApi } from '@reduxjs/toolkit/query/react'
-import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query'
-
-export const api = createApi({
-  baseQuery: graphqlRequestBaseQuery({
-    url: '/graphql',
-  }),
-  endpoints: () => ({}),
-})
+import { createApi } from '@reduxjs/toolkit/query/react'
+import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query'
+
+export const api = createApi({
+  baseQuery: graphqlRequestBaseQuery({
+    url: '/graphql',
+  }),
+  endpoints: () => ({}),
+})
diff --git a/examples/query/react/graphql-codegen/src/features/posts/PostsManager.tsx b/examples/query/react/graphql-codegen/src/features/posts/PostsManager.tsx
index 9eefa7bf..82052c13 100644
--- a/examples/query/react/graphql-codegen/src/features/posts/PostsManager.tsx
+++ b/examples/query/react/graphql-codegen/src/features/posts/PostsManager.tsx
@@ -1,112 +1,112 @@
-import * as React from 'react'
-import {
-  Badge,
-  Box,
-  Button,
-  Divider,
-  Flex,
-  Heading,
-  HStack,
-  Icon,
-  List,
-  ListIcon,
-  ListItem,
-  Spacer,
-  Stat,
-  StatLabel,
-  StatNumber,
-} from '@chakra-ui/react'
-import { MdArrowBack, MdArrowForward, MdBook } from 'react-icons/md'
-import { useGetPostsQuery } from './GetPosts.generated'
-
-const getColorForStatus = (status: string | undefined) => {
-  return status === 'draft'
-    ? 'gray'
-    : status === 'pending_review'
-      ? 'orange'
-      : 'green'
-}
-
-const PostList = () => {
-  const [page, setPage] = React.useState(1)
-  const { data, isLoading, isFetching } = useGetPostsQuery({
-    skip: page * 10,
-    take: 10,
-  })
-
-  if (isLoading) {
-    return <div>Loading</div>
-  }
-
-  return (
-    <Box>
-      <HStack spacing="14px">
-        <Button
-          onClick={() => setPage((prev) => prev - 1)}
-          isLoading={isFetching}
-          disabled={page === 1}
-        >
-          <Icon as={MdArrowBack} />
-        </Button>
-        <Button
-          onClick={() => setPage((prev) => prev + 1)}
-          isLoading={isFetching}
-        >
-          <Icon as={MdArrowForward} />
-        </Button>
-        <Box>{`${page}`}</Box>
-      </HStack>
-      <List spacing={3} mt={6}>
-        {data?.posts?.length ? (
-          data?.posts.map(({ id, title, status }) => (
-            <ListItem key={id}>
-              <ListIcon as={MdBook} color="green.500" /> {title}{' '}
-              <Badge
-                ml="1"
-                fontSize="0.8em"
-                colorScheme={getColorForStatus(status)}
-              >
-                {status}
-              </Badge>
-            </ListItem>
-          ))
-        ) : (
-          <ListItem>No posts :(</ListItem>
-        )}
-      </List>
-    </Box>
-  )
-}
-
-export const PostsCountStat = () => {
-  const { data } = useGetPostsQuery({})
-
-  return (
-    <Stat>
-      <StatLabel>Total Posts</StatLabel>
-      <StatNumber>{`${data?.posts?.length || 'NA'}`}</StatNumber>
-    </Stat>
-  )
-}
-
-export const PostsManager = () => {
-  return (
-    <Box>
-      <Flex wrap="wrap" bg="#011627" p={4} color="white">
-        <Box>
-          <Heading size="xl">Manage Posts</Heading>
-        </Box>
-        <Spacer />
-        <Box>
-          <PostsCountStat />
-        </Box>
-      </Flex>
-      <Divider />
-      <Box p={4}>
-        <PostList />
-      </Box>
-    </Box>
-  )
-}
-
-export default PostsManager
+import * as React from 'react'
+import {
+  Badge,
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Heading,
+  HStack,
+  Icon,
+  List,
+  ListIcon,
+  ListItem,
+  Spacer,
+  Stat,
+  StatLabel,
+  StatNumber,
+} from '@chakra-ui/react'
+import { MdArrowBack, MdArrowForward, MdBook } from 'react-icons/md'
+import { useGetPostsQuery } from './GetPosts.generated'
+
+const getColorForStatus = (status: string | undefined) => {
+  return status === 'draft'
+    ? 'gray'
+    : status === 'pending_review'
+      ? 'orange'
+      : 'green'
+}
+
+const PostList = () => {
+  const [page, setPage] = React.useState(1)
+  const { data, isLoading, isFetching } = useGetPostsQuery({
+    skip: page * 10,
+    take: 10,
+  })
+
+  if (isLoading) {
+    return <div>Loading</div>
+  }
+
+  return (
+    <Box>
+      <HStack spacing="14px">
+        <Button
+          onClick={() => setPage((prev) => prev - 1)}
+          isLoading={isFetching}
+          disabled={page === 1}
+        >
+          <Icon as={MdArrowBack} />
+        </Button>
+        <Button
+          onClick={() => setPage((prev) => prev + 1)}
+          isLoading={isFetching}
+        >
+          <Icon as={MdArrowForward} />
+        </Button>
+        <Box>{`${page}`}</Box>
+      </HStack>
+      <List spacing={3} mt={6}>
+        {data?.posts?.length ? (
+          data?.posts.map(({ id, title, status }) => (
+            <ListItem key={id}>
+              <ListIcon as={MdBook} color="green.500" /> {title}{' '}
+              <Badge
+                ml="1"
+                fontSize="0.8em"
+                colorScheme={getColorForStatus(status)}
+              >
+                {status}
+              </Badge>
+            </ListItem>
+          ))
+        ) : (
+          <ListItem>No posts :(</ListItem>
+        )}
+      </List>
+    </Box>
+  )
+}
+
+export const PostsCountStat = () => {
+  const { data } = useGetPostsQuery({})
+
+  return (
+    <Stat>
+      <StatLabel>Total Posts</StatLabel>
+      <StatNumber>{`${data?.posts?.length || 'NA'}`}</StatNumber>
+    </Stat>
+  )
+}
+
+export const PostsManager = () => {
+  return (
+    <Box>
+      <Flex wrap="wrap" bg="#011627" p={4} color="white">
+        <Box>
+          <Heading size="xl">Manage Posts</Heading>
+        </Box>
+        <Spacer />
+        <Box>
+          <PostsCountStat />
+        </Box>
+      </Flex>
+      <Divider />
+      <Box p={4}>
+        <PostList />
+      </Box>
+    </Box>
+  )
+}
+
+export default PostsManager
diff --git a/examples/query/react/graphql-codegen/src/mocks/browser.ts b/examples/query/react/graphql-codegen/src/mocks/browser.ts
index b741446c..82d072ec 100644
--- a/examples/query/react/graphql-codegen/src/mocks/browser.ts
+++ b/examples/query/react/graphql-codegen/src/mocks/browser.ts
@@ -1,4 +1,4 @@
-import { setupWorker } from 'msw'
-import { handlers } from './db'
-
-export const worker = setupWorker(...handlers)
+import { setupWorker } from 'msw'
+import { handlers } from './db'
+
+export const worker = setupWorker(...handlers)
diff --git a/examples/query/react/graphql/src/app/services/posts.ts b/examples/query/react/graphql/src/app/services/posts.ts
index 0d84c75f..ff5230e7 100644
--- a/examples/query/react/graphql/src/app/services/posts.ts
+++ b/examples/query/react/graphql/src/app/services/posts.ts
@@ -1,77 +1,77 @@
-import { createApi } from '@reduxjs/toolkit/query/react'
-import { gql } from 'graphql-request'
-import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query'
-
-export const postStatuses = ['draft', 'published', 'pending_review'] as const
-
-export interface Post {
-  id: string
-  title: string
-  author: string
-  content: string
-  status: (typeof postStatuses)[number]
-  created_at: string
-  updated_at: string
-}
-
-export interface Pagination {
-  page: number
-  per_page: number
-  total: number
-  total_pages: number
-}
-
-export interface GetPostsResponse extends Pagination {
-  data: {
-    posts: Post[]
-  }
-}
-
-interface PostResponse {
-  data: {
-    post: Post
-  }
-}
-
-export const api = createApi({
-  baseQuery: graphqlRequestBaseQuery({
-    url: '/graphql',
-  }),
-  endpoints: (builder) => ({
-    getPosts: builder.query<
-      GetPostsResponse,
-      { page?: number; per_page?: number }
-    >({
-      query: ({ page, per_page }) => ({
-        document: gql`
-          query GetPosts($page: Int = 1, $per_page: Int = 10) {
-            posts(page: $page, per_page: $per_page) {
-              id
-              title
-            }
-          }
-        `,
-        variables: {
-          page,
-          per_page,
-        },
-      }),
-    }),
-    getPost: builder.query<Post, string>({
-      query: (id) => ({
-        document: gql`
-        query GetPost($id: ID!) {
-          post(id: ${id}) {
-            id
-            title
-            body
-          }
-        }
-        `,
-      }),
-      transformResponse: (response: PostResponse) => response.data.post,
-    }),
-  }),
-})
-
-export const { useGetPostsQuery, useGetPostQuery } = api
+import { createApi } from '@reduxjs/toolkit/query/react'
+import { gql } from 'graphql-request'
+import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query'
+
+export const postStatuses = ['draft', 'published', 'pending_review'] as const
+
+export interface Post {
+  id: string
+  title: string
+  author: string
+  content: string
+  status: (typeof postStatuses)[number]
+  created_at: string
+  updated_at: string
+}
+
+export interface Pagination {
+  page: number
+  per_page: number
+  total: number
+  total_pages: number
+}
+
+export interface GetPostsResponse extends Pagination {
+  data: {
+    posts: Post[]
+  }
+}
+
+interface PostResponse {
+  data: {
+    post: Post
+  }
+}
+
+export const api = createApi({
+  baseQuery: graphqlRequestBaseQuery({
+    url: '/graphql',
+  }),
+  endpoints: (builder) => ({
+    getPosts: builder.query<
+      GetPostsResponse,
+      { page?: number; per_page?: number }
+    >({
+      query: ({ page, per_page }) => ({
+        document: gql`
+          query GetPosts($page: Int = 1, $per_page: Int = 10) {
+            posts(page: $page, per_page: $per_page) {
+              id
+              title
+            }
+          }
+        `,
+        variables: {
+          page,
+          per_page,
+        },
+      }),
+    }),
+    getPost: builder.query<Post, string>({
+      query: (id) => ({
+        document: gql`
+        query GetPost($id: ID!) {
+          post(id: ${id}) {
+            id
+            title
+            body
+          }
+        }
+        `,
+      }),
+      transformResponse: (response: PostResponse) => response.data.post,
+    }),
+  }),
+})
+
+export const { useGetPostsQuery, useGetPostQuery } = api
diff --git a/examples/query/react/graphql/src/features/posts/PostsManager.tsx b/examples/query/react/graphql/src/features/posts/PostsManager.tsx
index 8203ed4b..da92a4ee 100644
--- a/examples/query/react/graphql/src/features/posts/PostsManager.tsx
+++ b/examples/query/react/graphql/src/features/posts/PostsManager.tsx
@@ -1,110 +1,110 @@
-import * as React from 'react'
-import {
-  Badge,
-  Box,
-  Button,
-  Divider,
-  Flex,
-  Heading,
-  HStack,
-  Icon,
-  List,
-  ListIcon,
-  ListItem,
-  Spacer,
-  Stat,
-  StatLabel,
-  StatNumber,
-} from '@chakra-ui/react'
-import { MdArrowBack, MdArrowForward, MdBook } from 'react-icons/md'
-import { Post, useGetPostsQuery } from '../../app/services/posts'
-
-const getColorForStatus = (status: Post['status']) => {
-  return status === 'draft'
-    ? 'gray'
-    : status === 'pending_review'
-      ? 'orange'
-      : 'green'
-}
-
-const PostList = () => {
-  const [page, setPage] = React.useState(1)
-  const { data: posts, isLoading, isFetching } = useGetPostsQuery({ page })
-
-  if (isLoading) {
-    return <div>Loading</div>
-  }
-
-  if (!posts?.data) {
-    return <div>No posts :(</div>
-  }
-
-  return (
-    <Box>
-      <HStack spacing="14px">
-        <Button
-          onClick={() => setPage((prev) => prev - 1)}
-          isLoading={isFetching}
-          disabled={page === 1}
-        >
-          <Icon as={MdArrowBack} />
-        </Button>
-        <Button
-          onClick={() => setPage((prev) => prev + 1)}
-          isLoading={isFetching}
-          disabled={page === posts.total_pages}
-        >
-          <Icon as={MdArrowForward} />
-        </Button>
-        <Box>{`${page} / ${posts.total_pages}`}</Box>
-      </HStack>
-      <List spacing={3} mt={6}>
-        {posts?.data.posts.map(({ id, title, status }) => (
-          <ListItem key={id}>
-            <ListIcon as={MdBook} color="green.500" /> {title}{' '}
-            <Badge
-              ml="1"
-              fontSize="0.8em"
-              colorScheme={getColorForStatus(status)}
-            >
-              {status}
-            </Badge>
-          </ListItem>
-        ))}
-      </List>
-    </Box>
-  )
-}
-
-export const PostsCountStat = () => {
-  const { data: posts } = useGetPostsQuery({})
-
-  return (
-    <Stat>
-      <StatLabel>Total Posts</StatLabel>
-      <StatNumber>{`${posts?.total || 'NA'}`}</StatNumber>
-    </Stat>
-  )
-}
-
-export const PostsManager = () => {
-  return (
-    <Box>
-      <Flex wrap="wrap" bg="#011627" p={4} color="white">
-        <Box>
-          <Heading size="xl">Manage Posts</Heading>
-        </Box>
-        <Spacer />
-        <Box>
-          <PostsCountStat />
-        </Box>
-      </Flex>
-      <Divider />
-      <Box p={4}>
-        <PostList />
-      </Box>
-    </Box>
-  )
-}
-
-export default PostsManager
+import * as React from 'react'
+import {
+  Badge,
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Heading,
+  HStack,
+  Icon,
+  List,
+  ListIcon,
+  ListItem,
+  Spacer,
+  Stat,
+  StatLabel,
+  StatNumber,
+} from '@chakra-ui/react'
+import { MdArrowBack, MdArrowForward, MdBook } from 'react-icons/md'
+import { Post, useGetPostsQuery } from '../../app/services/posts'
+
+const getColorForStatus = (status: Post['status']) => {
+  return status === 'draft'
+    ? 'gray'
+    : status === 'pending_review'
+      ? 'orange'
+      : 'green'
+}
+
+const PostList = () => {
+  const [page, setPage] = React.useState(1)
+  const { data: posts, isLoading, isFetching } = useGetPostsQuery({ page })
+
+  if (isLoading) {
+    return <div>Loading</div>
+  }
+
+  if (!posts?.data) {
+    return <div>No posts :(</div>
+  }
+
+  return (
+    <Box>
+      <HStack spacing="14px">
+        <Button
+          onClick={() => setPage((prev) => prev - 1)}
+          isLoading={isFetching}
+          disabled={page === 1}
+        >
+          <Icon as={MdArrowBack} />
+        </Button>
+        <Button
+          onClick={() => setPage((prev) => prev + 1)}
+          isLoading={isFetching}
+          disabled={page === posts.total_pages}
+        >
+          <Icon as={MdArrowForward} />
+        </Button>
+        <Box>{`${page} / ${posts.total_pages}`}</Box>
+      </HStack>
+      <List spacing={3} mt={6}>
+        {posts?.data.posts.map(({ id, title, status }) => (
+          <ListItem key={id}>
+            <ListIcon as={MdBook} color="green.500" /> {title}{' '}
+            <Badge
+              ml="1"
+              fontSize="0.8em"
+              colorScheme={getColorForStatus(status)}
+            >
+              {status}
+            </Badge>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  )
+}
+
+export const PostsCountStat = () => {
+  const { data: posts } = useGetPostsQuery({})
+
+  return (
+    <Stat>
+      <StatLabel>Total Posts</StatLabel>
+      <StatNumber>{`${posts?.total || 'NA'}`}</StatNumber>
+    </Stat>
+  )
+}
+
+export const PostsManager = () => {
+  return (
+    <Box>
+      <Flex wrap="wrap" bg="#011627" p={4} color="white">
+        <Box>
+          <Heading size="xl">Manage Posts</Heading>
+        </Box>
+        <Spacer />
+        <Box>
+          <PostsCountStat />
+        </Box>
+      </Flex>
+      <Divider />
+      <Box p={4}>
+        <PostList />
+      </Box>
+    </Box>
+  )
+}
+
+export default PostsManager
diff --git a/examples/query/react/graphql/src/mocks/browser.ts b/examples/query/react/graphql/src/mocks/browser.ts
index b741446c..82d072ec 100644
--- a/examples/query/react/graphql/src/mocks/browser.ts
+++ b/examples/query/react/graphql/src/mocks/browser.ts
@@ -1,4 +1,4 @@
-import { setupWorker } from 'msw'
-import { handlers } from './db'
-
-export const worker = setupWorker(...handlers)
+import { setupWorker } from 'msw'
+import { handlers } from './db'
+
+export const worker = setupWorker(...handlers)
diff --git a/examples/query/react/kitchen-sink/src/app/services/counter.ts b/examples/query/react/kitchen-sink/src/app/services/counter.ts
index de350e18..0386a412 100644
--- a/examples/query/react/kitchen-sink/src/app/services/counter.ts
+++ b/examples/query/react/kitchen-sink/src/app/services/counter.ts
@@ -1,40 +1,40 @@
-import { api } from './api'
-
-interface CountResponse {
-  count: number
-}
-
-export const counterApi = api.injectEndpoints({
-  endpoints: (build) => ({
-    getCount: build.query<CountResponse, void>({
-      query: () => 'count',
-      providesTags: ['Counter'],
-    }),
-    incrementCount: build.mutation<CountResponse, number>({
-      query(amount) {
-        return {
-          url: `increment`,
-          method: 'PUT',
-          body: { amount },
-        }
-      },
-      invalidatesTags: ['Counter'],
-    }),
-    decrementCount: build.mutation<CountResponse, number>({
-      query(amount) {
-        return {
-          url: `decrement`,
-          method: 'PUT',
-          body: { amount },
-        }
-      },
-      invalidatesTags: ['Counter'],
-    }),
-  }),
-})
-
-export const {
-  useDecrementCountMutation,
-  useGetCountQuery,
-  useIncrementCountMutation,
-} = counterApi
+import { api } from './api'
+
+interface CountResponse {
+  count: number
+}
+
+export const counterApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    getCount: build.query<CountResponse, void>({
+      query: () => 'count',
+      providesTags: ['Counter'],
+    }),
+    incrementCount: build.mutation<CountResponse, number>({
+      query(amount) {
+        return {
+          url: `increment`,
+          method: 'PUT',
+          body: { amount },
+        }
+      },
+      invalidatesTags: ['Counter'],
+    }),
+    decrementCount: build.mutation<CountResponse, number>({
+      query(amount) {
+        return {
+          url: `decrement`,
+          method: 'PUT',
+          body: { amount },
+        }
+      },
+      invalidatesTags: ['Counter'],
+    }),
+  }),
+})
+
+export const {
+  useDecrementCountMutation,
+  useGetCountQuery,
+  useIncrementCountMutation,
+} = counterApi
diff --git a/examples/query/react/kitchen-sink/src/app/store.ts b/examples/query/react/kitchen-sink/src/app/store.ts
index e814615c..fe8c2b61 100644
--- a/examples/query/react/kitchen-sink/src/app/store.ts
+++ b/examples/query/react/kitchen-sink/src/app/store.ts
@@ -1,26 +1,26 @@
-import { configureStore, ConfigureStoreOptions } from '@reduxjs/toolkit'
-import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
-import { api } from './services/api'
-import polling from '../features/polling/pollingSlice'
-import auth from '../features/auth/authSlice'
-
-export const createStore = (
-  options?: ConfigureStoreOptions['preloadedState'] | undefined,
-) =>
-  configureStore({
-    reducer: {
-      [api.reducerPath]: api.reducer,
-      polling,
-      auth,
-    },
-    middleware: (getDefaultMiddleware) =>
-      getDefaultMiddleware().concat(api.middleware),
-    ...options,
-  })
-
-export const store = createStore()
-
-export type AppDispatch = typeof store.dispatch
-export const useAppDispatch: () => AppDispatch = useDispatch
-export type RootState = ReturnType<typeof store.getState>
-export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector
+import { configureStore, ConfigureStoreOptions } from '@reduxjs/toolkit'
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import { api } from './services/api'
+import polling from '../features/polling/pollingSlice'
+import auth from '../features/auth/authSlice'
+
+export const createStore = (
+  options?: ConfigureStoreOptions['preloadedState'] | undefined,
+) =>
+  configureStore({
+    reducer: {
+      [api.reducerPath]: api.reducer,
+      polling,
+      auth,
+    },
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware().concat(api.middleware),
+    ...options,
+  })
+
+export const store = createStore()
+
+export type AppDispatch = typeof store.dispatch
+export const useAppDispatch: () => AppDispatch = useDispatch
+export type RootState = ReturnType<typeof store.getState>
+export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector
diff --git a/examples/query/react/kitchen-sink/src/features/counter/Counter.module.css b/examples/query/react/kitchen-sink/src/features/counter/Counter.module.css
index 7e60ca1c..f4689a5d 100644
--- a/examples/query/react/kitchen-sink/src/features/counter/Counter.module.css
+++ b/examples/query/react/kitchen-sink/src/features/counter/Counter.module.css
@@ -1,77 +1,77 @@
-.row {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.row:not(:last-child) {
-  margin-bottom: 16px;
-}
-
-.value {
-  font-size: 78px;
-  padding-left: 16px;
-  padding-right: 16px;
-  margin-top: 2px;
-  font-family: 'Courier New', Courier, monospace;
-}
-
-.button {
-  appearance: none;
-  background: none;
-  font-size: 32px;
-  padding-left: 12px;
-  padding-right: 12px;
-  outline: none;
-  border: 2px solid transparent;
-  color: rgb(112, 76, 182);
-  padding-bottom: 4px;
-  cursor: pointer;
-  background-color: rgba(112, 76, 182, 0.1);
-  border-radius: 2px;
-  transition: all 0.15s;
-}
-
-.textbox {
-  font-size: 32px;
-  padding: 2px;
-  width: 64px;
-  text-align: center;
-  margin-right: 8px;
-}
-
-.button:hover,
-.button:focus {
-  border: 2px solid rgba(112, 76, 182, 0.4);
-}
-
-.button:active {
-  background-color: rgba(112, 76, 182, 0.2);
-}
-
-.asyncButton {
-  composes: button;
-  position: relative;
-  margin-left: 8px;
-}
-
-.asyncButton:after {
-  content: '';
-  background-color: rgba(112, 76, 182, 0.15);
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  transition:
-    width 1s linear,
-    opacity 0.5s ease 1s;
-}
-
-.asyncButton:active:after {
-  width: 0%;
-  opacity: 1;
-  transition: 0s;
-}
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.row:not(:last-child) {
+  margin-bottom: 16px;
+}
+
+.value {
+  font-size: 78px;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-top: 2px;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+.button {
+  appearance: none;
+  background: none;
+  font-size: 32px;
+  padding-left: 12px;
+  padding-right: 12px;
+  outline: none;
+  border: 2px solid transparent;
+  color: rgb(112, 76, 182);
+  padding-bottom: 4px;
+  cursor: pointer;
+  background-color: rgba(112, 76, 182, 0.1);
+  border-radius: 2px;
+  transition: all 0.15s;
+}
+
+.textbox {
+  font-size: 32px;
+  padding: 2px;
+  width: 64px;
+  text-align: center;
+  margin-right: 8px;
+}
+
+.button:hover,
+.button:focus {
+  border: 2px solid rgba(112, 76, 182, 0.4);
+}
+
+.button:active {
+  background-color: rgba(112, 76, 182, 0.2);
+}
+
+.asyncButton {
+  composes: button;
+  position: relative;
+  margin-left: 8px;
+}
+
+.asyncButton:after {
+  content: '';
+  background-color: rgba(112, 76, 182, 0.15);
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  transition:
+    width 1s linear,
+    opacity 0.5s ease 1s;
+}
+
+.asyncButton:active:after {
+  width: 0%;
+  opacity: 1;
+  transition: 0s;
+}
diff --git a/examples/query/react/kitchen-sink/src/features/counter/Counter.tsx b/examples/query/react/kitchen-sink/src/features/counter/Counter.tsx
index ed8c5bf3..02e22179 100644
--- a/examples/query/react/kitchen-sink/src/features/counter/Counter.tsx
+++ b/examples/query/react/kitchen-sink/src/features/counter/Counter.tsx
@@ -1,52 +1,52 @@
-import React, { useState } from 'react'
-import styles from './Counter.module.css'
-import {
-  useDecrementCountMutation,
-  useGetCountQuery,
-  useIncrementCountMutation,
-} from '../../app/services/counter'
-
-export function Counter({
-  id,
-  onRemove,
-}: {
-  id?: string
-  onRemove?: () => void
-}) {
-  const [pollingInterval, setPollingInterval] = useState(10000)
-  const { data } = useGetCountQuery(undefined, { pollingInterval })
-  const [increment] = useIncrementCountMutation()
-
-  const [decrement] = useDecrementCountMutation()
-
-  return (
-    <div>
-      <div className={styles.row}>
-        <button
-          className={styles.button}
-          aria-label="Increment value"
-          onClick={() => increment(1)}
-        >
-          +
-        </button>
-        <span className={styles.value}>{data?.count || 0}</span>
-        <button
-          className={styles.button}
-          aria-label="Decrement value"
-          onClick={() => decrement(1)}
-        >
-          -
-        </button>
-        <input
-          type="number"
-          name="pollingInterval"
-          value={pollingInterval}
-          onChange={({ target: { valueAsNumber } }) =>
-            setPollingInterval(valueAsNumber)
-          }
-        />
-        {onRemove && <button onClick={onRemove}>Remove {id}</button>}
-      </div>
-    </div>
-  )
-}
+import React, { useState } from 'react'
+import styles from './Counter.module.css'
+import {
+  useDecrementCountMutation,
+  useGetCountQuery,
+  useIncrementCountMutation,
+} from '../../app/services/counter'
+
+export function Counter({
+  id,
+  onRemove,
+}: {
+  id?: string
+  onRemove?: () => void
+}) {
+  const [pollingInterval, setPollingInterval] = useState(10000)
+  const { data } = useGetCountQuery(undefined, { pollingInterval })
+  const [increment] = useIncrementCountMutation()
+
+  const [decrement] = useDecrementCountMutation()
+
+  return (
+    <div>
+      <div className={styles.row}>
+        <button
+          className={styles.button}
+          aria-label="Increment value"
+          onClick={() => increment(1)}
+        >
+          +
+        </button>
+        <span className={styles.value}>{data?.count || 0}</span>
+        <button
+          className={styles.button}
+          aria-label="Decrement value"
+          onClick={() => decrement(1)}
+        >
+          -
+        </button>
+        <input
+          type="number"
+          name="pollingInterval"
+          value={pollingInterval}
+          onChange={({ target: { valueAsNumber } }) =>
+            setPollingInterval(valueAsNumber)
+          }
+        />
+        {onRemove && <button onClick={onRemove}>Remove {id}</button>}
+      </div>
+    </div>
+  )
+}
diff --git a/examples/query/react/kitchen-sink/src/features/posts/PostDetail.tsx b/examples/query/react/kitchen-sink/src/features/posts/PostDetail.tsx
index 2ff9b8b1..efa40895 100644
--- a/examples/query/react/kitchen-sink/src/features/posts/PostDetail.tsx
+++ b/examples/query/react/kitchen-sink/src/features/posts/PostDetail.tsx
@@ -1,131 +1,131 @@
-import * as React from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
-import { useTypedSelector } from '../../app/store'
-import {
-  useDeletePostMutation,
-  useGetPostQuery,
-  useUpdatePostMutation,
-} from '../../app/services/posts'
-import { selectGlobalPollingEnabled } from '../polling/pollingSlice'
-
-const EditablePostName = ({
-  name: initialName,
-  onUpdate,
-  onCancel,
-  loading = false,
-}: {
-  name: string
-  onUpdate: (name: string) => void
-  onCancel: () => void
-  loading?: boolean
-}) => {
-  const [name, setName] = React.useState(initialName)
-
-  const handleChange = ({
-    target: { value },
-  }: React.ChangeEvent<HTMLInputElement>) => setName(value)
-
-  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
-    e.preventDefault()
-    onUpdate(name)
-  }
-  const handleCancel = () => onCancel()
-
-  return (
-    <div>
-      <form onSubmit={handleSubmit}>
-        <input
-          type="text"
-          onChange={handleChange}
-          value={name}
-          disabled={loading}
-        />
-        <button type="submit" disabled={loading}>
-          {loading ? 'Updating...' : 'Update'}
-        </button>
-        <button onClick={handleCancel} disabled={loading}>
-          Cancel
-        </button>
-      </form>
-    </div>
-  )
-}
-
-const PostJsonDetail = ({ id }: { id: number }) => {
-  const { data: post } = useGetPostQuery(id)
-
-  return (
-    <div className="row" style={{ background: '#eee' }}>
-      <pre>{JSON.stringify(post, null, 2)}</pre>
-    </div>
-  )
-}
-
-export const PostDetail = () => {
-  const { id } = useParams<{ id: any }>()
-  const navigate = useNavigate()
-  const globalPolling = useTypedSelector(selectGlobalPollingEnabled)
-
-  const [isEditing, setIsEditing] = React.useState(false)
-
-  const {
-    data: post,
-    isFetching,
-    isLoading,
-  } = useGetPostQuery(id, { pollingInterval: globalPolling ? 3000 : 0 })
-
-  const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation()
-  const [deletePost, { isLoading: isDeleting }] = useDeletePostMutation()
-
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
-
-  if (!post) {
-    return <div>Missing post!</div>
-  }
-
-  return (
-    <div>
-      {isEditing ? (
-        <EditablePostName
-          name={post.name}
-          onUpdate={(name) =>
-            updatePost({ id, name })
-              .then((result) => {
-                // handle the success!
-                console.log('Update Result', result)
-                setIsEditing(false)
-              })
-              .catch((error) => console.error('Update Error', error))
-          }
-          onCancel={() => setIsEditing(false)}
-          loading={isUpdating}
-        />
-      ) : (
-        <React.Fragment>
-          <div className="row">
-            <div className="column">
-              <h3>
-                {post.name} {isFetching ? '...refetching' : ''}
-              </h3>
-            </div>
-            <button
-              onClick={() => setIsEditing(true)}
-              disabled={isDeleting || isUpdating}
-            >
-              {isUpdating ? 'Updating...' : 'Edit'}
-            </button>
-            <button
-              onClick={() => deletePost(id).then(() => navigate('/posts'))}
-              disabled={isDeleting}
-            >
-              {isDeleting ? 'Deleting...' : 'Delete'}
-            </button>
-          </div>
-        </React.Fragment>
-      )}
-      <PostJsonDetail id={id} />
-    </div>
-  )
-}
+import * as React from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { useTypedSelector } from '../../app/store'
+import {
+  useDeletePostMutation,
+  useGetPostQuery,
+  useUpdatePostMutation,
+} from '../../app/services/posts'
+import { selectGlobalPollingEnabled } from '../polling/pollingSlice'
+
+const EditablePostName = ({
+  name: initialName,
+  onUpdate,
+  onCancel,
+  loading = false,
+}: {
+  name: string
+  onUpdate: (name: string) => void
+  onCancel: () => void
+  loading?: boolean
+}) => {
+  const [name, setName] = React.useState(initialName)
+
+  const handleChange = ({
+    target: { value },
+  }: React.ChangeEvent<HTMLInputElement>) => setName(value)
+
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
+    e.preventDefault()
+    onUpdate(name)
+  }
+  const handleCancel = () => onCancel()
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          onChange={handleChange}
+          value={name}
+          disabled={loading}
+        />
+        <button type="submit" disabled={loading}>
+          {loading ? 'Updating...' : 'Update'}
+        </button>
+        <button onClick={handleCancel} disabled={loading}>
+          Cancel
+        </button>
+      </form>
+    </div>
+  )
+}
+
+const PostJsonDetail = ({ id }: { id: number }) => {
+  const { data: post } = useGetPostQuery(id)
+
+  return (
+    <div className="row" style={{ background: '#eee' }}>
+      <pre>{JSON.stringify(post, null, 2)}</pre>
+    </div>
+  )
+}
+
+export const PostDetail = () => {
+  const { id } = useParams<{ id: any }>()
+  const navigate = useNavigate()
+  const globalPolling = useTypedSelector(selectGlobalPollingEnabled)
+
+  const [isEditing, setIsEditing] = React.useState(false)
+
+  const {
+    data: post,
+    isFetching,
+    isLoading,
+  } = useGetPostQuery(id, { pollingInterval: globalPolling ? 3000 : 0 })
+
+  const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation()
+  const [deletePost, { isLoading: isDeleting }] = useDeletePostMutation()
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (!post) {
+    return <div>Missing post!</div>
+  }
+
+  return (
+    <div>
+      {isEditing ? (
+        <EditablePostName
+          name={post.name}
+          onUpdate={(name) =>
+            updatePost({ id, name })
+              .then((result) => {
+                // handle the success!
+                console.log('Update Result', result)
+                setIsEditing(false)
+              })
+              .catch((error) => console.error('Update Error', error))
+          }
+          onCancel={() => setIsEditing(false)}
+          loading={isUpdating}
+        />
+      ) : (
+        <React.Fragment>
+          <div className="row">
+            <div className="column">
+              <h3>
+                {post.name} {isFetching ? '...refetching' : ''}
+              </h3>
+            </div>
+            <button
+              onClick={() => setIsEditing(true)}
+              disabled={isDeleting || isUpdating}
+            >
+              {isUpdating ? 'Updating...' : 'Edit'}
+            </button>
+            <button
+              onClick={() => deletePost(id).then(() => navigate('/posts'))}
+              disabled={isDeleting}
+            >
+              {isDeleting ? 'Deleting...' : 'Delete'}
+            </button>
+          </div>
+        </React.Fragment>
+      )}
+      <PostJsonDetail id={id} />
+    </div>
+  )
+}
diff --git a/examples/query/react/kitchen-sink/src/features/posts/PostsManager.css b/examples/query/react/kitchen-sink/src/features/posts/PostsManager.css
index 4f5c7da8..de5f5755 100644
--- a/examples/query/react/kitchen-sink/src/features/posts/PostsManager.css
+++ b/examples/query/react/kitchen-sink/src/features/posts/PostsManager.css
@@ -1,10 +1,10 @@
-.posts-list {
-  display: flex;
-  flex-direction: column;
-  flex-basis: 100%;
-  flex: 1;
-  min-height: 200px;
-  border-right: 1px solid #eee;
-  padding: 20px;
-  text-align: left;
-}
+.posts-list {
+  display: flex;
+  flex-direction: column;
+  flex-basis: 100%;
+  flex: 1;
+  min-height: 200px;
+  border-right: 1px solid #eee;
+  padding: 20px;
+  text-align: left;
+}
diff --git a/examples/query/react/kitchen-sink/src/features/posts/PostsManager.tsx b/examples/query/react/kitchen-sink/src/features/posts/PostsManager.tsx
index cd717465..08aa899a 100644
--- a/examples/query/react/kitchen-sink/src/features/posts/PostsManager.tsx
+++ b/examples/query/react/kitchen-sink/src/features/posts/PostsManager.tsx
@@ -1,141 +1,141 @@
-import React, { useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { Route, Routes, useNavigate } from 'react-router-dom'
-import {
-  Post,
-  useAddPostMutation,
-  useGetPostsQuery,
-  useLoginMutation,
-  useGetErrorProneQuery,
-} from '../../app/services/posts'
-import { selectIsAuthenticated, logout } from '../auth/authSlice'
-import { PostDetail } from './PostDetail'
-import './PostsManager.css'
-
-const AddPost = () => {
-  const initialValue = { name: '' }
-  const [post, setPost] = useState<Partial<Post>>(initialValue)
-  const [addPost, { isLoading }] = useAddPostMutation()
-
-  const handleChange = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
-    setPost((prev) => ({
-      ...prev,
-      [target.name]: target.value,
-    }))
-  }
-
-  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
-    e.preventDefault()
-    await addPost(post)
-    setPost(initialValue)
-  }
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <div className="row">
-        <div className="column column-3">
-          <input
-            name="name"
-            placeholder="New post name"
-            type="text"
-            onChange={handleChange}
-            value={post.name}
-          />
-        </div>
-        <div className="column column-1">
-          <button type="submit" disabled={isLoading}>
-            {isLoading ? 'Adding...' : 'Add Post'}
-          </button>
-        </div>
-      </div>
-    </form>
-  )
-}
-
-const PostListItem = ({
-  data: { name, id },
-  onSelect,
-}: {
-  data: Post
-  onSelect: (id: number) => void
-}) => {
-  return (
-    <li>
-      <a href="#" onClick={() => onSelect(id)}>
-        {name}
-      </a>
-    </li>
-  )
-}
-
-const PostList = () => {
-  const { data: posts, isLoading } = useGetPostsQuery()
-  const navigate = useNavigate()
-
-  if (isLoading) {
-    return <div>Loading</div>
-  }
-
-  if (!posts) {
-    return <div>No posts :(</div>
-  }
-
-  return (
-    <div>
-      {posts.map((post) => (
-        <PostListItem
-          key={post.id}
-          data={post}
-          onSelect={(id) => navigate(`/posts/${id}`)}
-        />
-      ))}
-    </div>
-  )
-}
-
-export const PostsManager = () => {
-  const [login] = useLoginMutation()
-  const [initRetries, setInitRetries] = useState(false)
-  const { data, error, isFetching } = useGetErrorProneQuery(undefined, {
-    skip: !initRetries,
-  })
-  const dispatch = useDispatch()
-  const isAuthenticated = useSelector(selectIsAuthenticated)
-
-  return (
-    <div>
-      <h3>Posts</h3>
-      {!isAuthenticated ? (
-        <button
-          onClick={() => login({ ignore: 'This will just set the headers' })}
-        >
-          Login
-        </button>
-      ) : (
-        <button onClick={() => dispatch(logout())}>Logout</button>
-      )}
-      <button onClick={() => setInitRetries(true)}>
-        {isFetching ? 'retrying...' : 'Start error prone retries'}
-      </button>
-      <hr />
-      <div className="row">
-        <div className="posts-list">
-          <AddPost />
-          <hr />
-          Posts:
-          <PostList />
-          <hr />
-          List with duplicate subscription:
-          <PostList />
-        </div>
-        <div className="column column-3 text-left">
-          <Routes>
-            <Route path="/:id" element={<PostDetail />} />
-          </Routes>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default PostsManager
+import React, { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { Route, Routes, useNavigate } from 'react-router-dom'
+import {
+  Post,
+  useAddPostMutation,
+  useGetPostsQuery,
+  useLoginMutation,
+  useGetErrorProneQuery,
+} from '../../app/services/posts'
+import { selectIsAuthenticated, logout } from '../auth/authSlice'
+import { PostDetail } from './PostDetail'
+import './PostsManager.css'
+
+const AddPost = () => {
+  const initialValue = { name: '' }
+  const [post, setPost] = useState<Partial<Post>>(initialValue)
+  const [addPost, { isLoading }] = useAddPostMutation()
+
+  const handleChange = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
+    setPost((prev) => ({
+      ...prev,
+      [target.name]: target.value,
+    }))
+  }
+
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
+    e.preventDefault()
+    await addPost(post)
+    setPost(initialValue)
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="row">
+        <div className="column column-3">
+          <input
+            name="name"
+            placeholder="New post name"
+            type="text"
+            onChange={handleChange}
+            value={post.name}
+          />
+        </div>
+        <div className="column column-1">
+          <button type="submit" disabled={isLoading}>
+            {isLoading ? 'Adding...' : 'Add Post'}
+          </button>
+        </div>
+      </div>
+    </form>
+  )
+}
+
+const PostListItem = ({
+  data: { name, id },
+  onSelect,
+}: {
+  data: Post
+  onSelect: (id: number) => void
+}) => {
+  return (
+    <li>
+      <a href="#" onClick={() => onSelect(id)}>
+        {name}
+      </a>
+    </li>
+  )
+}
+
+const PostList = () => {
+  const { data: posts, isLoading } = useGetPostsQuery()
+  const navigate = useNavigate()
+
+  if (isLoading) {
+    return <div>Loading</div>
+  }
+
+  if (!posts) {
+    return <div>No posts :(</div>
+  }
+
+  return (
+    <div>
+      {posts.map((post) => (
+        <PostListItem
+          key={post.id}
+          data={post}
+          onSelect={(id) => navigate(`/posts/${id}`)}
+        />
+      ))}
+    </div>
+  )
+}
+
+export const PostsManager = () => {
+  const [login] = useLoginMutation()
+  const [initRetries, setInitRetries] = useState(false)
+  const { data, error, isFetching } = useGetErrorProneQuery(undefined, {
+    skip: !initRetries,
+  })
+  const dispatch = useDispatch()
+  const isAuthenticated = useSelector(selectIsAuthenticated)
+
+  return (
+    <div>
+      <h3>Posts</h3>
+      {!isAuthenticated ? (
+        <button
+          onClick={() => login({ ignore: 'This will just set the headers' })}
+        >
+          Login
+        </button>
+      ) : (
+        <button onClick={() => dispatch(logout())}>Logout</button>
+      )}
+      <button onClick={() => setInitRetries(true)}>
+        {isFetching ? 'retrying...' : 'Start error prone retries'}
+      </button>
+      <hr />
+      <div className="row">
+        <div className="posts-list">
+          <AddPost />
+          <hr />
+          Posts:
+          <PostList />
+          <hr />
+          List with duplicate subscription:
+          <PostList />
+        </div>
+        <div className="column column-3 text-left">
+          <Routes>
+            <Route path="/:id" element={<PostDetail />} />
+          </Routes>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PostsManager
diff --git a/examples/query/react/kitchen-sink/src/mocks/browser.ts b/examples/query/react/kitchen-sink/src/mocks/browser.ts
index d8d2c7d7..b234fdae 100644
--- a/examples/query/react/kitchen-sink/src/mocks/browser.ts
+++ b/examples/query/react/kitchen-sink/src/mocks/browser.ts
@@ -1,4 +1,4 @@
-import { setupWorker } from 'msw'
-import { handlers } from './handlers'
-
-export const worker = setupWorker(...handlers)
+import { setupWorker } from 'msw'
+import { handlers } from './handlers'
+
+export const worker = setupWorker(...handlers)
diff --git a/examples/query/react/mutations/src/app/services/posts.ts b/examples/query/react/mutations/src/app/services/posts.ts
index 563d00f3..d8f20762 100644
--- a/examples/query/react/mutations/src/app/services/posts.ts
+++ b/examples/query/react/mutations/src/app/services/posts.ts
@@ -1,62 +1,62 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-
-export interface Post {
-  id: string
-  name: string
-}
-
-type PostsResponse = Post[]
-
-export const api = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
-  tagTypes: ['Post'],
-  endpoints: (build) => ({
-    getPosts: build.query<PostsResponse, void>({
-      query: () => 'posts',
-      providesTags: (result) =>
-        result
-          ? [
-              ...result.map(({ id }) => ({ type: 'Post' as const, id })),
-              { type: 'Post', id: 'LIST' },
-            ]
-          : [{ type: 'Post', id: 'LIST' }],
-    }),
-    addPost: build.mutation<Post, Partial<Post>>({
-      query: (body) => ({
-        url: `posts`,
-        method: 'POST',
-        body,
-      }),
-      invalidatesTags: [{ type: 'Post', id: 'LIST' }],
-    }),
-    getPost: build.query<Post, string>({
-      query: (id) => `posts/${id}`,
-      providesTags: (result, error, id) => [{ type: 'Post', id }],
-    }),
-    updatePost: build.mutation<void, Pick<Post, 'id'> & Partial<Post>>({
-      query: ({ id, ...patch }) => ({
-        url: `posts/${id}`,
-        method: 'PUT',
-        body: patch,
-      }),
-      invalidatesTags: (result, error, { id }) => [{ type: 'Post', id }],
-    }),
-    deletePost: build.mutation<{ success: boolean; id: number }, number>({
-      query(id) {
-        return {
-          url: `posts/${id}`,
-          method: 'DELETE',
-        }
-      },
-      invalidatesTags: (result, error, id) => [{ type: 'Post', id }],
-    }),
-  }),
-})
-
-export const {
-  useGetPostQuery,
-  useGetPostsQuery,
-  useAddPostMutation,
-  useUpdatePostMutation,
-  useDeletePostMutation,
-} = api
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+export interface Post {
+  id: string
+  name: string
+}
+
+type PostsResponse = Post[]
+
+export const api = createApi({
+  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
+  tagTypes: ['Post'],
+  endpoints: (build) => ({
+    getPosts: build.query<PostsResponse, void>({
+      query: () => 'posts',
+      providesTags: (result) =>
+        result
+          ? [
+              ...result.map(({ id }) => ({ type: 'Post' as const, id })),
+              { type: 'Post', id: 'LIST' },
+            ]
+          : [{ type: 'Post', id: 'LIST' }],
+    }),
+    addPost: build.mutation<Post, Partial<Post>>({
+      query: (body) => ({
+        url: `posts`,
+        method: 'POST',
+        body,
+      }),
+      invalidatesTags: [{ type: 'Post', id: 'LIST' }],
+    }),
+    getPost: build.query<Post, string>({
+      query: (id) => `posts/${id}`,
+      providesTags: (result, error, id) => [{ type: 'Post', id }],
+    }),
+    updatePost: build.mutation<void, Pick<Post, 'id'> & Partial<Post>>({
+      query: ({ id, ...patch }) => ({
+        url: `posts/${id}`,
+        method: 'PUT',
+        body: patch,
+      }),
+      invalidatesTags: (result, error, { id }) => [{ type: 'Post', id }],
+    }),
+    deletePost: build.mutation<{ success: boolean; id: number }, number>({
+      query(id) {
+        return {
+          url: `posts/${id}`,
+          method: 'DELETE',
+        }
+      },
+      invalidatesTags: (result, error, id) => [{ type: 'Post', id }],
+    }),
+  }),
+})
+
+export const {
+  useGetPostQuery,
+  useGetPostsQuery,
+  useAddPostMutation,
+  useUpdatePostMutation,
+  useDeletePostMutation,
+} = api
diff --git a/examples/query/react/mutations/src/features/posts/PostDetail.tsx b/examples/query/react/mutations/src/features/posts/PostDetail.tsx
index 5a55f1b1..6786dec4 100644
--- a/examples/query/react/mutations/src/features/posts/PostDetail.tsx
+++ b/examples/query/react/mutations/src/features/posts/PostDetail.tsx
@@ -1,153 +1,153 @@
-import React, { useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
-import {
-  useDeletePostMutation,
-  useGetPostQuery,
-  useUpdatePostMutation,
-} from '../../app/services/posts'
-import {
-  Box,
-  Button,
-  Center,
-  CloseButton,
-  Flex,
-  Heading,
-  Input,
-  Spacer,
-  Stack,
-  useToast,
-} from '@chakra-ui/react'
-
-const EditablePostName = ({
-  name: initialName,
-  onUpdate,
-  onCancel,
-  isLoading = false,
-}: {
-  name: string
-  onUpdate: (name: string) => void
-  onCancel: () => void
-  isLoading?: boolean
-}) => {
-  const [name, setName] = useState(initialName)
-
-  const handleChange = ({
-    target: { value },
-  }: React.ChangeEvent<HTMLInputElement>) => setName(value)
-
-  const handleUpdate = () => onUpdate(name)
-  const handleCancel = () => onCancel()
-
-  return (
-    <Flex>
-      <Box flex={10}>
-        <Input
-          type="text"
-          onChange={handleChange}
-          value={name}
-          disabled={isLoading}
-        />
-      </Box>
-      <Spacer />
-      <Box>
-        <Stack spacing={4} direction="row" align="center">
-          <Button onClick={handleUpdate} isLoading={isLoading}>
-            Update
-          </Button>
-          <CloseButton bg="red" onClick={handleCancel} disabled={isLoading} />
-        </Stack>
-      </Box>
-    </Flex>
-  )
-}
-
-const PostJsonDetail = ({ id }: { id: string }) => {
-  const { data: post } = useGetPostQuery(id)
-
-  return (
-    <Box mt={5} bg="#eee">
-      <pre>{JSON.stringify(post, null, 2)}</pre>
-    </Box>
-  )
-}
-
-export const PostDetail = () => {
-  const { id } = useParams<{ id: any }>()
-  const navigate = useNavigate()
-
-  const toast = useToast()
-
-  const [isEditing, setIsEditing] = useState(false)
-
-  const { data: post, isLoading } = useGetPostQuery(id)
-
-  const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation()
-
-  const [deletePost, { isLoading: isDeleting }] = useDeletePostMutation()
-
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
-
-  if (!post) {
-    return (
-      <Center h="200px">
-        <Heading size="md">
-          Post {id} is missing! Try reloading or selecting another post...
-        </Heading>
-      </Center>
-    )
-  }
-
-  return (
-    <Box p={4}>
-      {isEditing ? (
-        <EditablePostName
-          name={post.name}
-          onUpdate={async (name) => {
-            try {
-              await updatePost({ id, name }).unwrap()
-            } catch {
-              toast({
-                title: 'An error occurred',
-                description: "We couldn't save your changes, try again!",
-                status: 'error',
-                duration: 2000,
-                isClosable: true,
-              })
-            } finally {
-              setIsEditing(false)
-            }
-          }}
-          onCancel={() => setIsEditing(false)}
-          isLoading={isUpdating}
-        />
-      ) : (
-        <Flex>
-          <Box>
-            <Heading size="md">{post.name}</Heading>
-          </Box>
-          <Spacer />
-          <Box>
-            <Stack spacing={4} direction="row" align="center">
-              <Button
-                onClick={() => setIsEditing(true)}
-                disabled={isDeleting || isUpdating}
-              >
-                {isUpdating ? 'Updating...' : 'Edit'}
-              </Button>
-              <Button
-                onClick={() => deletePost(id).then(() => navigate('/posts'))}
-                disabled={isDeleting}
-                colorScheme="red"
-              >
-                {isDeleting ? 'Deleting...' : 'Delete'}
-              </Button>
-            </Stack>
-          </Box>
-        </Flex>
-      )}
-      <PostJsonDetail id={post.id} />
-    </Box>
-  )
-}
+import React, { useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import {
+  useDeletePostMutation,
+  useGetPostQuery,
+  useUpdatePostMutation,
+} from '../../app/services/posts'
+import {
+  Box,
+  Button,
+  Center,
+  CloseButton,
+  Flex,
+  Heading,
+  Input,
+  Spacer,
+  Stack,
+  useToast,
+} from '@chakra-ui/react'
+
+const EditablePostName = ({
+  name: initialName,
+  onUpdate,
+  onCancel,
+  isLoading = false,
+}: {
+  name: string
+  onUpdate: (name: string) => void
+  onCancel: () => void
+  isLoading?: boolean
+}) => {
+  const [name, setName] = useState(initialName)
+
+  const handleChange = ({
+    target: { value },
+  }: React.ChangeEvent<HTMLInputElement>) => setName(value)
+
+  const handleUpdate = () => onUpdate(name)
+  const handleCancel = () => onCancel()
+
+  return (
+    <Flex>
+      <Box flex={10}>
+        <Input
+          type="text"
+          onChange={handleChange}
+          value={name}
+          disabled={isLoading}
+        />
+      </Box>
+      <Spacer />
+      <Box>
+        <Stack spacing={4} direction="row" align="center">
+          <Button onClick={handleUpdate} isLoading={isLoading}>
+            Update
+          </Button>
+          <CloseButton bg="red" onClick={handleCancel} disabled={isLoading} />
+        </Stack>
+      </Box>
+    </Flex>
+  )
+}
+
+const PostJsonDetail = ({ id }: { id: string }) => {
+  const { data: post } = useGetPostQuery(id)
+
+  return (
+    <Box mt={5} bg="#eee">
+      <pre>{JSON.stringify(post, null, 2)}</pre>
+    </Box>
+  )
+}
+
+export const PostDetail = () => {
+  const { id } = useParams<{ id: any }>()
+  const navigate = useNavigate()
+
+  const toast = useToast()
+
+  const [isEditing, setIsEditing] = useState(false)
+
+  const { data: post, isLoading } = useGetPostQuery(id)
+
+  const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation()
+
+  const [deletePost, { isLoading: isDeleting }] = useDeletePostMutation()
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (!post) {
+    return (
+      <Center h="200px">
+        <Heading size="md">
+          Post {id} is missing! Try reloading or selecting another post...
+        </Heading>
+      </Center>
+    )
+  }
+
+  return (
+    <Box p={4}>
+      {isEditing ? (
+        <EditablePostName
+          name={post.name}
+          onUpdate={async (name) => {
+            try {
+              await updatePost({ id, name }).unwrap()
+            } catch {
+              toast({
+                title: 'An error occurred',
+                description: "We couldn't save your changes, try again!",
+                status: 'error',
+                duration: 2000,
+                isClosable: true,
+              })
+            } finally {
+              setIsEditing(false)
+            }
+          }}
+          onCancel={() => setIsEditing(false)}
+          isLoading={isUpdating}
+        />
+      ) : (
+        <Flex>
+          <Box>
+            <Heading size="md">{post.name}</Heading>
+          </Box>
+          <Spacer />
+          <Box>
+            <Stack spacing={4} direction="row" align="center">
+              <Button
+                onClick={() => setIsEditing(true)}
+                disabled={isDeleting || isUpdating}
+              >
+                {isUpdating ? 'Updating...' : 'Edit'}
+              </Button>
+              <Button
+                onClick={() => deletePost(id).then(() => navigate('/posts'))}
+                disabled={isDeleting}
+                colorScheme="red"
+              >
+                {isDeleting ? 'Deleting...' : 'Delete'}
+              </Button>
+            </Stack>
+          </Box>
+        </Flex>
+      )}
+      <PostJsonDetail id={post.id} />
+    </Box>
+  )
+}
diff --git a/examples/query/react/mutations/src/features/posts/PostsManager.tsx b/examples/query/react/mutations/src/features/posts/PostsManager.tsx
index e5bf8a28..279365ac 100644
--- a/examples/query/react/mutations/src/features/posts/PostsManager.tsx
+++ b/examples/query/react/mutations/src/features/posts/PostsManager.tsx
@@ -1,164 +1,164 @@
-import {
-  Box,
-  Button,
-  Center,
-  Divider,
-  Flex,
-  FormControl,
-  FormLabel,
-  Heading,
-  Input,
-  List,
-  ListIcon,
-  ListItem,
-  Spacer,
-  Stat,
-  StatLabel,
-  StatNumber,
-  useToast,
-} from '@chakra-ui/react'
-import { MdBook } from 'react-icons/md'
-import React, { useState } from 'react'
-import { Route, Routes, useNavigate } from 'react-router-dom'
-import {
-  Post,
-  useAddPostMutation,
-  useGetPostsQuery,
-} from '../../app/services/posts'
-import { PostDetail } from './PostDetail'
-
-const AddPost = () => {
-  const initialValue = { name: '' }
-  const [post, setPost] = useState<Pick<Post, 'name'>>(initialValue)
-  const [addPost, { isLoading }] = useAddPostMutation()
-  const toast = useToast()
-
-  const handleChange = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
-    setPost((prev) => ({
-      ...prev,
-      [target.name]: target.value,
-    }))
-  }
-
-  const handleAddPost = async () => {
-    try {
-      await addPost(post).unwrap()
-      setPost(initialValue)
-    } catch {
-      toast({
-        title: 'An error occurred',
-        description: "We couldn't save your post, try again!",
-        status: 'error',
-        duration: 2000,
-        isClosable: true,
-      })
-    }
-  }
-
-  return (
-    <Flex p={5}>
-      <Box flex={10}>
-        <FormControl isInvalid={Boolean(post.name.length < 3 && post.name)}>
-          <FormLabel htmlFor="name">Post name</FormLabel>
-          <Input
-            id="name"
-            name="name"
-            placeholder="Enter post name"
-            value={post.name}
-            onChange={handleChange}
-          />
-        </FormControl>
-      </Box>
-      <Spacer />
-      <Box>
-        <Button
-          mt={8}
-          colorScheme="purple"
-          isLoading={isLoading}
-          onClick={handleAddPost}
-        >
-          Add Post
-        </Button>
-      </Box>
-    </Flex>
-  )
-}
-
-const PostList = () => {
-  const { data: posts, isLoading } = useGetPostsQuery()
-  const navigate = useNavigate()
-
-  if (isLoading) {
-    return <div>Loading</div>
-  }
-
-  if (!posts) {
-    return <div>No posts :(</div>
-  }
-
-  return (
-    <List spacing={3}>
-      {posts.map(({ id, name }) => (
-        <ListItem key={id} onClick={() => navigate(`/posts/${id}`)}>
-          <ListIcon as={MdBook} color="green.500" /> {name}
-        </ListItem>
-      ))}
-    </List>
-  )
-}
-
-export const PostsCountStat = () => {
-  const { data: posts } = useGetPostsQuery()
-
-  if (!posts) return null
-
-  return (
-    <Stat>
-      <StatLabel>Active Posts</StatLabel>
-      <StatNumber>{posts?.length}</StatNumber>
-    </Stat>
-  )
-}
-
-export const PostsManager = () => {
-  return (
-    <Box>
-      <Flex bg="#011627" p={4} color="white">
-        <Box>
-          <Heading size="xl">Manage Posts</Heading>
-        </Box>
-        <Spacer />
-        <Box>
-          <PostsCountStat />
-        </Box>
-      </Flex>
-      <Divider />
-      <AddPost />
-      <Divider />
-      <Flex wrap="wrap">
-        <Box flex={1} borderRight="1px solid #eee">
-          <Box p={4} borderBottom="1px solid #eee">
-            <Heading size="sm">Posts</Heading>
-          </Box>
-          <Box p={4}>
-            <PostList />
-          </Box>
-        </Box>
-        <Box flex={2}>
-          <Routes>
-            <Route path="/posts/:id" element={<PostDetail />} />
-            <Route
-              element={
-                <Center h="200px">
-                  <Heading size="md">Select a post to edit!</Heading>
-                </Center>
-              }
-            />
-          </Routes>
-        </Box>
-      </Flex>
-    </Box>
-  )
-}
-
-export default PostsManager
+import {
+  Box,
+  Button,
+  Center,
+  Divider,
+  Flex,
+  FormControl,
+  FormLabel,
+  Heading,
+  Input,
+  List,
+  ListIcon,
+  ListItem,
+  Spacer,
+  Stat,
+  StatLabel,
+  StatNumber,
+  useToast,
+} from '@chakra-ui/react'
+import { MdBook } from 'react-icons/md'
+import React, { useState } from 'react'
+import { Route, Routes, useNavigate } from 'react-router-dom'
+import {
+  Post,
+  useAddPostMutation,
+  useGetPostsQuery,
+} from '../../app/services/posts'
+import { PostDetail } from './PostDetail'
+
+const AddPost = () => {
+  const initialValue = { name: '' }
+  const [post, setPost] = useState<Pick<Post, 'name'>>(initialValue)
+  const [addPost, { isLoading }] = useAddPostMutation()
+  const toast = useToast()
+
+  const handleChange = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
+    setPost((prev) => ({
+      ...prev,
+      [target.name]: target.value,
+    }))
+  }
+
+  const handleAddPost = async () => {
+    try {
+      await addPost(post).unwrap()
+      setPost(initialValue)
+    } catch {
+      toast({
+        title: 'An error occurred',
+        description: "We couldn't save your post, try again!",
+        status: 'error',
+        duration: 2000,
+        isClosable: true,
+      })
+    }
+  }
+
+  return (
+    <Flex p={5}>
+      <Box flex={10}>
+        <FormControl isInvalid={Boolean(post.name.length < 3 && post.name)}>
+          <FormLabel htmlFor="name">Post name</FormLabel>
+          <Input
+            id="name"
+            name="name"
+            placeholder="Enter post name"
+            value={post.name}
+            onChange={handleChange}
+          />
+        </FormControl>
+      </Box>
+      <Spacer />
+      <Box>
+        <Button
+          mt={8}
+          colorScheme="purple"
+          isLoading={isLoading}
+          onClick={handleAddPost}
+        >
+          Add Post
+        </Button>
+      </Box>
+    </Flex>
+  )
+}
+
+const PostList = () => {
+  const { data: posts, isLoading } = useGetPostsQuery()
+  const navigate = useNavigate()
+
+  if (isLoading) {
+    return <div>Loading</div>
+  }
+
+  if (!posts) {
+    return <div>No posts :(</div>
+  }
+
+  return (
+    <List spacing={3}>
+      {posts.map(({ id, name }) => (
+        <ListItem key={id} onClick={() => navigate(`/posts/${id}`)}>
+          <ListIcon as={MdBook} color="green.500" /> {name}
+        </ListItem>
+      ))}
+    </List>
+  )
+}
+
+export const PostsCountStat = () => {
+  const { data: posts } = useGetPostsQuery()
+
+  if (!posts) return null
+
+  return (
+    <Stat>
+      <StatLabel>Active Posts</StatLabel>
+      <StatNumber>{posts?.length}</StatNumber>
+    </Stat>
+  )
+}
+
+export const PostsManager = () => {
+  return (
+    <Box>
+      <Flex bg="#011627" p={4} color="white">
+        <Box>
+          <Heading size="xl">Manage Posts</Heading>
+        </Box>
+        <Spacer />
+        <Box>
+          <PostsCountStat />
+        </Box>
+      </Flex>
+      <Divider />
+      <AddPost />
+      <Divider />
+      <Flex wrap="wrap">
+        <Box flex={1} borderRight="1px solid #eee">
+          <Box p={4} borderBottom="1px solid #eee">
+            <Heading size="sm">Posts</Heading>
+          </Box>
+          <Box p={4}>
+            <PostList />
+          </Box>
+        </Box>
+        <Box flex={2}>
+          <Routes>
+            <Route path="/posts/:id" element={<PostDetail />} />
+            <Route
+              element={
+                <Center h="200px">
+                  <Heading size="md">Select a post to edit!</Heading>
+                </Center>
+              }
+            />
+          </Routes>
+        </Box>
+      </Flex>
+    </Box>
+  )
+}
+
+export default PostsManager
diff --git a/examples/query/react/mutations/src/mocks/browser.ts b/examples/query/react/mutations/src/mocks/browser.ts
index 53e40204..deff8abe 100644
--- a/examples/query/react/mutations/src/mocks/browser.ts
+++ b/examples/query/react/mutations/src/mocks/browser.ts
@@ -1,4 +1,4 @@
-import { setupWorker } from 'msw'
-import { handlers } from './db'
-
-export const worker = setupWorker(...(handlers as any))
+import { setupWorker } from 'msw'
+import { handlers } from './db'
+
+export const worker = setupWorker(...(handlers as any))
diff --git a/examples/query/react/mutations/src/store.ts b/examples/query/react/mutations/src/store.ts
index c9c7f400..d1f10df1 100644
--- a/examples/query/react/mutations/src/store.ts
+++ b/examples/query/react/mutations/src/store.ts
@@ -1,11 +1,11 @@
-import { configureStore } from '@reduxjs/toolkit'
-import { api } from './app/services/posts'
-
-export const store = configureStore({
-  reducer: {
-    [api.reducerPath]: api.reducer,
-  },
-  // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
-  middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware().concat(api.middleware),
-})
+import { configureStore } from '@reduxjs/toolkit'
+import { api } from './app/services/posts'
+
+export const store = configureStore({
+  reducer: {
+    [api.reducerPath]: api.reducer,
+  },
+  // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(api.middleware),
+})
diff --git a/examples/query/react/optimistic-update/src/app/services/posts.ts b/examples/query/react/optimistic-update/src/app/services/posts.ts
index 3033e3ad..cd26c2c9 100644
--- a/examples/query/react/optimistic-update/src/app/services/posts.ts
+++ b/examples/query/react/optimistic-update/src/app/services/posts.ts
@@ -1,74 +1,74 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-
-export interface Post {
-  id: string
-  name: string
-}
-
-type PostsResponse = Post[]
-
-export const api = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
-  tagTypes: ['Post'],
-  endpoints: (build) => ({
-    getPosts: build.query<PostsResponse, void>({
-      query: () => 'posts',
-      providesTags: (result) =>
-        result
-          ? [
-              ...result.map(({ id }) => ({ type: 'Post' as const, id })),
-              { type: 'Post', id: 'LIST' },
-            ]
-          : [{ type: 'Post', id: 'LIST' }],
-    }),
-    addPost: build.mutation<Post, Partial<Post>>({
-      query: (body) => ({
-        url: `posts`,
-        method: 'POST',
-        body,
-      }),
-      invalidatesTags: [{ type: 'Post', id: 'LIST' }],
-    }),
-    getPost: build.query<Post, string>({
-      query: (id) => `posts/${id}`,
-      providesTags: (result, error, id) => [{ type: 'Post', id }],
-    }),
-    updatePost: build.mutation<void, Pick<Post, 'id'> & Partial<Post>>({
-      query: ({ id, ...patch }) => ({
-        url: `posts/${id}`,
-        method: 'PUT',
-        body: patch,
-      }),
-      async onQueryStarted({ id, ...patch }, { dispatch, queryFulfilled }) {
-        const patchResult = dispatch(
-          api.util.updateQueryData('getPost', id, (draft) => {
-            Object.assign(draft, patch)
-          }),
-        )
-        try {
-          await queryFulfilled
-        } catch {
-          patchResult.undo()
-        }
-      },
-      invalidatesTags: (result, error, { id }) => [{ type: 'Post', id }],
-    }),
-    deletePost: build.mutation<{ success: boolean; id: number }, number>({
-      query(id) {
-        return {
-          url: `posts/${id}`,
-          method: 'DELETE',
-        }
-      },
-      invalidatesTags: (result, error, id) => [{ type: 'Post', id }],
-    }),
-  }),
-})
-
-export const {
-  useGetPostQuery,
-  useGetPostsQuery,
-  useAddPostMutation,
-  useUpdatePostMutation,
-  useDeletePostMutation,
-} = api
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+export interface Post {
+  id: string
+  name: string
+}
+
+type PostsResponse = Post[]
+
+export const api = createApi({
+  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
+  tagTypes: ['Post'],
+  endpoints: (build) => ({
+    getPosts: build.query<PostsResponse, void>({
+      query: () => 'posts',
+      providesTags: (result) =>
+        result
+          ? [
+              ...result.map(({ id }) => ({ type: 'Post' as const, id })),
+              { type: 'Post', id: 'LIST' },
+            ]
+          : [{ type: 'Post', id: 'LIST' }],
+    }),
+    addPost: build.mutation<Post, Partial<Post>>({
+      query: (body) => ({
+        url: `posts`,
+        method: 'POST',
+        body,
+      }),
+      invalidatesTags: [{ type: 'Post', id: 'LIST' }],
+    }),
+    getPost: build.query<Post, string>({
+      query: (id) => `posts/${id}`,
+      providesTags: (result, error, id) => [{ type: 'Post', id }],
+    }),
+    updatePost: build.mutation<void, Pick<Post, 'id'> & Partial<Post>>({
+      query: ({ id, ...patch }) => ({
+        url: `posts/${id}`,
+        method: 'PUT',
+        body: patch,
+      }),
+      async onQueryStarted({ id, ...patch }, { dispatch, queryFulfilled }) {
+        const patchResult = dispatch(
+          api.util.updateQueryData('getPost', id, (draft) => {
+            Object.assign(draft, patch)
+          }),
+        )
+        try {
+          await queryFulfilled
+        } catch {
+          patchResult.undo()
+        }
+      },
+      invalidatesTags: (result, error, { id }) => [{ type: 'Post', id }],
+    }),
+    deletePost: build.mutation<{ success: boolean; id: number }, number>({
+      query(id) {
+        return {
+          url: `posts/${id}`,
+          method: 'DELETE',
+        }
+      },
+      invalidatesTags: (result, error, id) => [{ type: 'Post', id }],
+    }),
+  }),
+})
+
+export const {
+  useGetPostQuery,
+  useGetPostsQuery,
+  useAddPostMutation,
+  useUpdatePostMutation,
+  useDeletePostMutation,
+} = api
diff --git a/examples/query/react/optimistic-update/src/features/posts/PostDetail.tsx b/examples/query/react/optimistic-update/src/features/posts/PostDetail.tsx
index 5a55f1b1..6786dec4 100644
--- a/examples/query/react/optimistic-update/src/features/posts/PostDetail.tsx
+++ b/examples/query/react/optimistic-update/src/features/posts/PostDetail.tsx
@@ -1,153 +1,153 @@
-import React, { useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
-import {
-  useDeletePostMutation,
-  useGetPostQuery,
-  useUpdatePostMutation,
-} from '../../app/services/posts'
-import {
-  Box,
-  Button,
-  Center,
-  CloseButton,
-  Flex,
-  Heading,
-  Input,
-  Spacer,
-  Stack,
-  useToast,
-} from '@chakra-ui/react'
-
-const EditablePostName = ({
-  name: initialName,
-  onUpdate,
-  onCancel,
-  isLoading = false,
-}: {
-  name: string
-  onUpdate: (name: string) => void
-  onCancel: () => void
-  isLoading?: boolean
-}) => {
-  const [name, setName] = useState(initialName)
-
-  const handleChange = ({
-    target: { value },
-  }: React.ChangeEvent<HTMLInputElement>) => setName(value)
-
-  const handleUpdate = () => onUpdate(name)
-  const handleCancel = () => onCancel()
-
-  return (
-    <Flex>
-      <Box flex={10}>
-        <Input
-          type="text"
-          onChange={handleChange}
-          value={name}
-          disabled={isLoading}
-        />
-      </Box>
-      <Spacer />
-      <Box>
-        <Stack spacing={4} direction="row" align="center">
-          <Button onClick={handleUpdate} isLoading={isLoading}>
-            Update
-          </Button>
-          <CloseButton bg="red" onClick={handleCancel} disabled={isLoading} />
-        </Stack>
-      </Box>
-    </Flex>
-  )
-}
-
-const PostJsonDetail = ({ id }: { id: string }) => {
-  const { data: post } = useGetPostQuery(id)
-
-  return (
-    <Box mt={5} bg="#eee">
-      <pre>{JSON.stringify(post, null, 2)}</pre>
-    </Box>
-  )
-}
-
-export const PostDetail = () => {
-  const { id } = useParams<{ id: any }>()
-  const navigate = useNavigate()
-
-  const toast = useToast()
-
-  const [isEditing, setIsEditing] = useState(false)
-
-  const { data: post, isLoading } = useGetPostQuery(id)
-
-  const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation()
-
-  const [deletePost, { isLoading: isDeleting }] = useDeletePostMutation()
-
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
-
-  if (!post) {
-    return (
-      <Center h="200px">
-        <Heading size="md">
-          Post {id} is missing! Try reloading or selecting another post...
-        </Heading>
-      </Center>
-    )
-  }
-
-  return (
-    <Box p={4}>
-      {isEditing ? (
-        <EditablePostName
-          name={post.name}
-          onUpdate={async (name) => {
-            try {
-              await updatePost({ id, name }).unwrap()
-            } catch {
-              toast({
-                title: 'An error occurred',
-                description: "We couldn't save your changes, try again!",
-                status: 'error',
-                duration: 2000,
-                isClosable: true,
-              })
-            } finally {
-              setIsEditing(false)
-            }
-          }}
-          onCancel={() => setIsEditing(false)}
-          isLoading={isUpdating}
-        />
-      ) : (
-        <Flex>
-          <Box>
-            <Heading size="md">{post.name}</Heading>
-          </Box>
-          <Spacer />
-          <Box>
-            <Stack spacing={4} direction="row" align="center">
-              <Button
-                onClick={() => setIsEditing(true)}
-                disabled={isDeleting || isUpdating}
-              >
-                {isUpdating ? 'Updating...' : 'Edit'}
-              </Button>
-              <Button
-                onClick={() => deletePost(id).then(() => navigate('/posts'))}
-                disabled={isDeleting}
-                colorScheme="red"
-              >
-                {isDeleting ? 'Deleting...' : 'Delete'}
-              </Button>
-            </Stack>
-          </Box>
-        </Flex>
-      )}
-      <PostJsonDetail id={post.id} />
-    </Box>
-  )
-}
+import React, { useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import {
+  useDeletePostMutation,
+  useGetPostQuery,
+  useUpdatePostMutation,
+} from '../../app/services/posts'
+import {
+  Box,
+  Button,
+  Center,
+  CloseButton,
+  Flex,
+  Heading,
+  Input,
+  Spacer,
+  Stack,
+  useToast,
+} from '@chakra-ui/react'
+
+const EditablePostName = ({
+  name: initialName,
+  onUpdate,
+  onCancel,
+  isLoading = false,
+}: {
+  name: string
+  onUpdate: (name: string) => void
+  onCancel: () => void
+  isLoading?: boolean
+}) => {
+  const [name, setName] = useState(initialName)
+
+  const handleChange = ({
+    target: { value },
+  }: React.ChangeEvent<HTMLInputElement>) => setName(value)
+
+  const handleUpdate = () => onUpdate(name)
+  const handleCancel = () => onCancel()
+
+  return (
+    <Flex>
+      <Box flex={10}>
+        <Input
+          type="text"
+          onChange={handleChange}
+          value={name}
+          disabled={isLoading}
+        />
+      </Box>
+      <Spacer />
+      <Box>
+        <Stack spacing={4} direction="row" align="center">
+          <Button onClick={handleUpdate} isLoading={isLoading}>
+            Update
+          </Button>
+          <CloseButton bg="red" onClick={handleCancel} disabled={isLoading} />
+        </Stack>
+      </Box>
+    </Flex>
+  )
+}
+
+const PostJsonDetail = ({ id }: { id: string }) => {
+  const { data: post } = useGetPostQuery(id)
+
+  return (
+    <Box mt={5} bg="#eee">
+      <pre>{JSON.stringify(post, null, 2)}</pre>
+    </Box>
+  )
+}
+
+export const PostDetail = () => {
+  const { id } = useParams<{ id: any }>()
+  const navigate = useNavigate()
+
+  const toast = useToast()
+
+  const [isEditing, setIsEditing] = useState(false)
+
+  const { data: post, isLoading } = useGetPostQuery(id)
+
+  const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation()
+
+  const [deletePost, { isLoading: isDeleting }] = useDeletePostMutation()
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (!post) {
+    return (
+      <Center h="200px">
+        <Heading size="md">
+          Post {id} is missing! Try reloading or selecting another post...
+        </Heading>
+      </Center>
+    )
+  }
+
+  return (
+    <Box p={4}>
+      {isEditing ? (
+        <EditablePostName
+          name={post.name}
+          onUpdate={async (name) => {
+            try {
+              await updatePost({ id, name }).unwrap()
+            } catch {
+              toast({
+                title: 'An error occurred',
+                description: "We couldn't save your changes, try again!",
+                status: 'error',
+                duration: 2000,
+                isClosable: true,
+              })
+            } finally {
+              setIsEditing(false)
+            }
+          }}
+          onCancel={() => setIsEditing(false)}
+          isLoading={isUpdating}
+        />
+      ) : (
+        <Flex>
+          <Box>
+            <Heading size="md">{post.name}</Heading>
+          </Box>
+          <Spacer />
+          <Box>
+            <Stack spacing={4} direction="row" align="center">
+              <Button
+                onClick={() => setIsEditing(true)}
+                disabled={isDeleting || isUpdating}
+              >
+                {isUpdating ? 'Updating...' : 'Edit'}
+              </Button>
+              <Button
+                onClick={() => deletePost(id).then(() => navigate('/posts'))}
+                disabled={isDeleting}
+                colorScheme="red"
+              >
+                {isDeleting ? 'Deleting...' : 'Delete'}
+              </Button>
+            </Stack>
+          </Box>
+        </Flex>
+      )}
+      <PostJsonDetail id={post.id} />
+    </Box>
+  )
+}
diff --git a/examples/query/react/optimistic-update/src/features/posts/PostsManager.tsx b/examples/query/react/optimistic-update/src/features/posts/PostsManager.tsx
index 7718cc20..77e02a66 100644
--- a/examples/query/react/optimistic-update/src/features/posts/PostsManager.tsx
+++ b/examples/query/react/optimistic-update/src/features/posts/PostsManager.tsx
@@ -1,192 +1,192 @@
-import {
-  Box,
-  Button,
-  Center,
-  Divider,
-  Flex,
-  FormControl,
-  FormLabel,
-  Heading,
-  Input,
-  List,
-  ListIcon,
-  ListItem,
-  Spacer,
-  Stat,
-  StatLabel,
-  StatNumber,
-} from '@chakra-ui/react'
-import { MdBook } from 'react-icons/md'
-import React, { useState } from 'react'
-import { Route, Routes, useNavigate } from 'react-router-dom'
-import {
-  Post,
-  useAddPostMutation,
-  useGetPostQuery,
-  useGetPostsQuery,
-} from '../../app/services/posts'
-import { PostDetail } from './PostDetail'
-import { v4 as uuid } from 'uuid'
-
-const AddPost = () => {
-  const initialValue: Post = { id: uuid(), name: '' }
-  const [post, setPost] = useState(initialValue)
-  const [addPost, { isLoading }] = useAddPostMutation()
-
-  const handleChange = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
-    setPost((prev) => ({
-      ...prev,
-      [target.name]: target.value,
-    }))
-  }
-
-  const handleAddPost = () => addPost(post).then(() => setPost(initialValue))
-
-  return (
-    <Flex p={5}>
-      <Box flex={10}>
-        <FormControl isInvalid={Boolean(post.name.length < 3 && post.name)}>
-          <FormLabel htmlFor="name">Post name</FormLabel>
-          <Input
-            id="name"
-            name="name"
-            placeholder="Enter post name"
-            value={post.name}
-            onChange={handleChange}
-          />
-        </FormControl>
-      </Box>
-      <Spacer />
-      <Box>
-        <Button
-          mt={8}
-          colorScheme="purple"
-          isLoading={isLoading}
-          onClick={handleAddPost}
-        >
-          Add Post
-        </Button>
-      </Box>
-    </Flex>
-  )
-}
-
-const PostList = () => {
-  const { data: posts, isLoading } = useGetPostsQuery()
-  const navigate = useNavigate()
-
-  if (isLoading) {
-    return <div>Loading</div>
-  }
-
-  if (!posts) {
-    return <div>No posts :(</div>
-  }
-
-  return (
-    <List spacing={3}>
-      {posts.map(({ id, name }) => (
-        <ListItem key={id} onClick={() => navigate(`/posts/${id}`)}>
-          <ListIcon as={MdBook} color="green.500" /> {name}
-        </ListItem>
-      ))}
-    </List>
-  )
-}
-
-const PostNameSubscribed = ({ id }: { id: string }) => {
-  const { data, isFetching } = useGetPostQuery(id)
-  const navigate = useNavigate()
-
-  console.log('data', data, isFetching)
-
-  if (!data) return null
-
-  return (
-    <ListItem key={id} onClick={() => navigate(`/posts/${id}`)}>
-      <ListIcon as={MdBook} color="green.500" /> {data.name}
-    </ListItem>
-  )
-}
-const PostListSubscribed = () => {
-  const { data: posts, isLoading } = useGetPostsQuery()
-
-  if (isLoading) {
-    return <div>Loading</div>
-  }
-
-  if (!posts) {
-    return <div>No posts :(</div>
-  }
-
-  return (
-    <List spacing={3}>
-      {posts.map(({ id }) => (
-        <PostNameSubscribed id={id} key={id} />
-      ))}
-    </List>
-  )
-}
-
-export const PostsCountStat = () => {
-  const { data: posts } = useGetPostsQuery()
-
-  if (!posts) return null
-
-  return (
-    <Stat>
-      <StatLabel>Active Posts</StatLabel>
-      <StatNumber>{posts?.length}</StatNumber>
-    </Stat>
-  )
-}
-
-export const PostsManager = () => {
-  return (
-    <Box>
-      <Flex bg="#011627" p={4} color="white">
-        <Box>
-          <Heading size="xl">Manage Posts</Heading>
-        </Box>
-        <Spacer />
-        <Box>
-          <PostsCountStat />
-        </Box>
-      </Flex>
-      <Divider />
-      <AddPost />
-      <Divider />
-      <Flex wrap="wrap">
-        <Box flex={1} borderRight="1px solid #eee">
-          <Box p={4} borderBottom="1px solid #eee">
-            <Heading size="sm">Posts</Heading>
-          </Box>
-          <Box p={4}>
-            <PostList />
-          </Box>
-          <Box p={4} borderBottom="1px solid #eee">
-            <Heading size="sm">Posts (subscribed)</Heading>
-          </Box>
-          <Box p={4}>
-            <PostListSubscribed />
-          </Box>
-        </Box>
-        <Box flex={2}>
-          <Routes>
-            <Route path="/posts/:id" element={<PostDetail />} />
-            <Route
-              path="*"
-              element={
-                <Center h="200px">
-                  <Heading size="md">Select a post to edit!</Heading>
-                </Center>
-              }
-            />
-          </Routes>
-        </Box>
-      </Flex>
-    </Box>
-  )
-}
-
-export default PostsManager
+import {
+  Box,
+  Button,
+  Center,
+  Divider,
+  Flex,
+  FormControl,
+  FormLabel,
+  Heading,
+  Input,
+  List,
+  ListIcon,
+  ListItem,
+  Spacer,
+  Stat,
+  StatLabel,
+  StatNumber,
+} from '@chakra-ui/react'
+import { MdBook } from 'react-icons/md'
+import React, { useState } from 'react'
+import { Route, Routes, useNavigate } from 'react-router-dom'
+import {
+  Post,
+  useAddPostMutation,
+  useGetPostQuery,
+  useGetPostsQuery,
+} from '../../app/services/posts'
+import { PostDetail } from './PostDetail'
+import { v4 as uuid } from 'uuid'
+
+const AddPost = () => {
+  const initialValue: Post = { id: uuid(), name: '' }
+  const [post, setPost] = useState(initialValue)
+  const [addPost, { isLoading }] = useAddPostMutation()
+
+  const handleChange = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
+    setPost((prev) => ({
+      ...prev,
+      [target.name]: target.value,
+    }))
+  }
+
+  const handleAddPost = () => addPost(post).then(() => setPost(initialValue))
+
+  return (
+    <Flex p={5}>
+      <Box flex={10}>
+        <FormControl isInvalid={Boolean(post.name.length < 3 && post.name)}>
+          <FormLabel htmlFor="name">Post name</FormLabel>
+          <Input
+            id="name"
+            name="name"
+            placeholder="Enter post name"
+            value={post.name}
+            onChange={handleChange}
+          />
+        </FormControl>
+      </Box>
+      <Spacer />
+      <Box>
+        <Button
+          mt={8}
+          colorScheme="purple"
+          isLoading={isLoading}
+          onClick={handleAddPost}
+        >
+          Add Post
+        </Button>
+      </Box>
+    </Flex>
+  )
+}
+
+const PostList = () => {
+  const { data: posts, isLoading } = useGetPostsQuery()
+  const navigate = useNavigate()
+
+  if (isLoading) {
+    return <div>Loading</div>
+  }
+
+  if (!posts) {
+    return <div>No posts :(</div>
+  }
+
+  return (
+    <List spacing={3}>
+      {posts.map(({ id, name }) => (
+        <ListItem key={id} onClick={() => navigate(`/posts/${id}`)}>
+          <ListIcon as={MdBook} color="green.500" /> {name}
+        </ListItem>
+      ))}
+    </List>
+  )
+}
+
+const PostNameSubscribed = ({ id }: { id: string }) => {
+  const { data, isFetching } = useGetPostQuery(id)
+  const navigate = useNavigate()
+
+  console.log('data', data, isFetching)
+
+  if (!data) return null
+
+  return (
+    <ListItem key={id} onClick={() => navigate(`/posts/${id}`)}>
+      <ListIcon as={MdBook} color="green.500" /> {data.name}
+    </ListItem>
+  )
+}
+const PostListSubscribed = () => {
+  const { data: posts, isLoading } = useGetPostsQuery()
+
+  if (isLoading) {
+    return <div>Loading</div>
+  }
+
+  if (!posts) {
+    return <div>No posts :(</div>
+  }
+
+  return (
+    <List spacing={3}>
+      {posts.map(({ id }) => (
+        <PostNameSubscribed id={id} key={id} />
+      ))}
+    </List>
+  )
+}
+
+export const PostsCountStat = () => {
+  const { data: posts } = useGetPostsQuery()
+
+  if (!posts) return null
+
+  return (
+    <Stat>
+      <StatLabel>Active Posts</StatLabel>
+      <StatNumber>{posts?.length}</StatNumber>
+    </Stat>
+  )
+}
+
+export const PostsManager = () => {
+  return (
+    <Box>
+      <Flex bg="#011627" p={4} color="white">
+        <Box>
+          <Heading size="xl">Manage Posts</Heading>
+        </Box>
+        <Spacer />
+        <Box>
+          <PostsCountStat />
+        </Box>
+      </Flex>
+      <Divider />
+      <AddPost />
+      <Divider />
+      <Flex wrap="wrap">
+        <Box flex={1} borderRight="1px solid #eee">
+          <Box p={4} borderBottom="1px solid #eee">
+            <Heading size="sm">Posts</Heading>
+          </Box>
+          <Box p={4}>
+            <PostList />
+          </Box>
+          <Box p={4} borderBottom="1px solid #eee">
+            <Heading size="sm">Posts (subscribed)</Heading>
+          </Box>
+          <Box p={4}>
+            <PostListSubscribed />
+          </Box>
+        </Box>
+        <Box flex={2}>
+          <Routes>
+            <Route path="/posts/:id" element={<PostDetail />} />
+            <Route
+              path="*"
+              element={
+                <Center h="200px">
+                  <Heading size="md">Select a post to edit!</Heading>
+                </Center>
+              }
+            />
+          </Routes>
+        </Box>
+      </Flex>
+    </Box>
+  )
+}
+
+export default PostsManager
diff --git a/examples/query/react/optimistic-update/src/mocks/browser.ts b/examples/query/react/optimistic-update/src/mocks/browser.ts
index 53e40204..deff8abe 100644
--- a/examples/query/react/optimistic-update/src/mocks/browser.ts
+++ b/examples/query/react/optimistic-update/src/mocks/browser.ts
@@ -1,4 +1,4 @@
-import { setupWorker } from 'msw'
-import { handlers } from './db'
-
-export const worker = setupWorker(...(handlers as any))
+import { setupWorker } from 'msw'
+import { handlers } from './db'
+
+export const worker = setupWorker(...(handlers as any))
diff --git a/examples/query/react/pagination/src/app/services/posts.ts b/examples/query/react/pagination/src/app/services/posts.ts
index b4863852..a21040fc 100644
--- a/examples/query/react/pagination/src/app/services/posts.ts
+++ b/examples/query/react/pagination/src/app/services/posts.ts
@@ -1,31 +1,31 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-
-export const postStatuses = ['draft', 'published', 'pending_review'] as const
-
-export interface Post {
-  id: string
-  title: string
-  author: string
-  content: string
-  status: (typeof postStatuses)[number]
-  created_at: string
-  updated_at: string
-}
-
-interface ListResponse<T> {
-  page: number
-  per_page: number
-  total: number
-  total_pages: number
-  data: T[]
-}
-export const api = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
-  endpoints: (build) => ({
-    listPosts: build.query<ListResponse<Post>, number | void>({
-      query: (page = 1) => `posts?page=${page}`,
-    }),
-  }),
-})
-
-export const { useListPostsQuery } = api
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+export const postStatuses = ['draft', 'published', 'pending_review'] as const
+
+export interface Post {
+  id: string
+  title: string
+  author: string
+  content: string
+  status: (typeof postStatuses)[number]
+  created_at: string
+  updated_at: string
+}
+
+interface ListResponse<T> {
+  page: number
+  per_page: number
+  total: number
+  total_pages: number
+  data: T[]
+}
+export const api = createApi({
+  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
+  endpoints: (build) => ({
+    listPosts: build.query<ListResponse<Post>, number | void>({
+      query: (page = 1) => `posts?page=${page}`,
+    }),
+  }),
+})
+
+export const { useListPostsQuery } = api
diff --git a/examples/query/react/pagination/src/features/posts/PostsManager.tsx b/examples/query/react/pagination/src/features/posts/PostsManager.tsx
index 52f3b824..999b05b4 100644
--- a/examples/query/react/pagination/src/features/posts/PostsManager.tsx
+++ b/examples/query/react/pagination/src/features/posts/PostsManager.tsx
@@ -1,110 +1,110 @@
-import * as React from 'react'
-import {
-  Badge,
-  Box,
-  Button,
-  Divider,
-  Flex,
-  Heading,
-  HStack,
-  Icon,
-  List,
-  ListIcon,
-  ListItem,
-  Spacer,
-  Stat,
-  StatLabel,
-  StatNumber,
-} from '@chakra-ui/react'
-import { MdArrowBack, MdArrowForward, MdBook } from 'react-icons/md'
-import { Post, useListPostsQuery } from '../../app/services/posts'
-
-const getColorForStatus = (status: Post['status']) => {
-  return status === 'draft'
-    ? 'gray'
-    : status === 'pending_review'
-      ? 'orange'
-      : 'green'
-}
-
-const PostList = () => {
-  const [page, setPage] = React.useState(1)
-  const { data: posts, isLoading, isFetching } = useListPostsQuery(page)
-
-  if (isLoading) {
-    return <div>Loading</div>
-  }
-
-  if (!posts?.data) {
-    return <div>No posts :(</div>
-  }
-
-  return (
-    <Box>
-      <HStack spacing="14px">
-        <Button
-          onClick={() => setPage((prev) => prev - 1)}
-          isLoading={isFetching}
-          disabled={page === 1}
-        >
-          <Icon as={MdArrowBack} />
-        </Button>
-        <Button
-          onClick={() => setPage((prev) => prev + 1)}
-          isLoading={isFetching}
-          disabled={page === posts.total_pages}
-        >
-          <Icon as={MdArrowForward} />
-        </Button>
-        <Box>{`${page} / ${posts.total_pages}`}</Box>
-      </HStack>
-      <List spacing={3} mt={6}>
-        {posts?.data.map(({ id, title, status }) => (
-          <ListItem key={id}>
-            <ListIcon as={MdBook} color="green.500" /> {title}{' '}
-            <Badge
-              ml="1"
-              fontSize="0.8em"
-              colorScheme={getColorForStatus(status)}
-            >
-              {status}
-            </Badge>
-          </ListItem>
-        ))}
-      </List>
-    </Box>
-  )
-}
-
-export const PostsCountStat = () => {
-  const { data: posts } = useListPostsQuery()
-
-  return (
-    <Stat>
-      <StatLabel>Total Posts</StatLabel>
-      <StatNumber>{`${posts?.total || 'NA'}`}</StatNumber>
-    </Stat>
-  )
-}
-
-export const PostsManager = () => {
-  return (
-    <Box>
-      <Flex wrap="wrap" bg="#011627" p={4} color="white">
-        <Box>
-          <Heading size="xl">Manage Posts</Heading>
-        </Box>
-        <Spacer />
-        <Box>
-          <PostsCountStat />
-        </Box>
-      </Flex>
-      <Divider />
-      <Box p={4}>
-        <PostList />
-      </Box>
-    </Box>
-  )
-}
-
-export default PostsManager
+import * as React from 'react'
+import {
+  Badge,
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Heading,
+  HStack,
+  Icon,
+  List,
+  ListIcon,
+  ListItem,
+  Spacer,
+  Stat,
+  StatLabel,
+  StatNumber,
+} from '@chakra-ui/react'
+import { MdArrowBack, MdArrowForward, MdBook } from 'react-icons/md'
+import { Post, useListPostsQuery } from '../../app/services/posts'
+
+const getColorForStatus = (status: Post['status']) => {
+  return status === 'draft'
+    ? 'gray'
+    : status === 'pending_review'
+      ? 'orange'
+      : 'green'
+}
+
+const PostList = () => {
+  const [page, setPage] = React.useState(1)
+  const { data: posts, isLoading, isFetching } = useListPostsQuery(page)
+
+  if (isLoading) {
+    return <div>Loading</div>
+  }
+
+  if (!posts?.data) {
+    return <div>No posts :(</div>
+  }
+
+  return (
+    <Box>
+      <HStack spacing="14px">
+        <Button
+          onClick={() => setPage((prev) => prev - 1)}
+          isLoading={isFetching}
+          disabled={page === 1}
+        >
+          <Icon as={MdArrowBack} />
+        </Button>
+        <Button
+          onClick={() => setPage((prev) => prev + 1)}
+          isLoading={isFetching}
+          disabled={page === posts.total_pages}
+        >
+          <Icon as={MdArrowForward} />
+        </Button>
+        <Box>{`${page} / ${posts.total_pages}`}</Box>
+      </HStack>
+      <List spacing={3} mt={6}>
+        {posts?.data.map(({ id, title, status }) => (
+          <ListItem key={id}>
+            <ListIcon as={MdBook} color="green.500" /> {title}{' '}
+            <Badge
+              ml="1"
+              fontSize="0.8em"
+              colorScheme={getColorForStatus(status)}
+            >
+              {status}
+            </Badge>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  )
+}
+
+export const PostsCountStat = () => {
+  const { data: posts } = useListPostsQuery()
+
+  return (
+    <Stat>
+      <StatLabel>Total Posts</StatLabel>
+      <StatNumber>{`${posts?.total || 'NA'}`}</StatNumber>
+    </Stat>
+  )
+}
+
+export const PostsManager = () => {
+  return (
+    <Box>
+      <Flex wrap="wrap" bg="#011627" p={4} color="white">
+        <Box>
+          <Heading size="xl">Manage Posts</Heading>
+        </Box>
+        <Spacer />
+        <Box>
+          <PostsCountStat />
+        </Box>
+      </Flex>
+      <Divider />
+      <Box p={4}>
+        <PostList />
+      </Box>
+    </Box>
+  )
+}
+
+export default PostsManager
diff --git a/examples/query/react/pagination/src/mocks/browser.ts b/examples/query/react/pagination/src/mocks/browser.ts
index 53e40204..deff8abe 100644
--- a/examples/query/react/pagination/src/mocks/browser.ts
+++ b/examples/query/react/pagination/src/mocks/browser.ts
@@ -1,4 +1,4 @@
-import { setupWorker } from 'msw'
-import { handlers } from './db'
-
-export const worker = setupWorker(...(handlers as any))
+import { setupWorker } from 'msw'
+import { handlers } from './db'
+
+export const worker = setupWorker(...(handlers as any))
diff --git a/examples/query/react/polling/src/services/pokemon.ts b/examples/query/react/polling/src/services/pokemon.ts
index b338a20b..fb7cc5c1 100644
--- a/examples/query/react/polling/src/services/pokemon.ts
+++ b/examples/query/react/polling/src/services/pokemon.ts
@@ -1,15 +1,15 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-import type { PokemonName } from '../pokemon.data'
-
-export const pokemonApi = createApi({
-  reducerPath: 'pokemonApi',
-  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
-  endpoints: (builder) => ({
-    getPokemonByName: builder.query({
-      query: (name: PokemonName) => `pokemon/${name}`,
-    }),
-  }),
-})
-
-// Export hooks for usage in functional components
-export const { useGetPokemonByNameQuery } = pokemonApi
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import type { PokemonName } from '../pokemon.data'
+
+export const pokemonApi = createApi({
+  reducerPath: 'pokemonApi',
+  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
+  endpoints: (builder) => ({
+    getPokemonByName: builder.query({
+      query: (name: PokemonName) => `pokemon/${name}`,
+    }),
+  }),
+})
+
+// Export hooks for usage in functional components
+export const { useGetPokemonByNameQuery } = pokemonApi
diff --git a/examples/query/react/polling/src/store.ts b/examples/query/react/polling/src/store.ts
index 8168bb91..69b71824 100644
--- a/examples/query/react/polling/src/store.ts
+++ b/examples/query/react/polling/src/store.ts
@@ -1,11 +1,11 @@
-import { configureStore } from '@reduxjs/toolkit'
-import { pokemonApi } from './services/pokemon'
-
-export const store = configureStore({
-  reducer: {
-    [pokemonApi.reducerPath]: pokemonApi.reducer,
-  },
-  // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
-  middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware().concat(pokemonApi.middleware),
-})
+import { configureStore } from '@reduxjs/toolkit'
+import { pokemonApi } from './services/pokemon'
+
+export const store = configureStore({
+  reducer: {
+    [pokemonApi.reducerPath]: pokemonApi.reducer,
+  },
+  // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(pokemonApi.middleware),
+})
diff --git a/examples/query/react/prefetching-automatic-waterfall/src/app/services/posts.ts b/examples/query/react/prefetching-automatic-waterfall/src/app/services/posts.ts
index d4032ef9..2242d2e8 100644
--- a/examples/query/react/prefetching-automatic-waterfall/src/app/services/posts.ts
+++ b/examples/query/react/prefetching-automatic-waterfall/src/app/services/posts.ts
@@ -1,31 +1,31 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-
-export const postStatuses = ['draft', 'published', 'pending_review'] as const
-
-export interface Post {
-  id: string
-  title: string
-  author: string
-  content: string
-  status: (typeof postStatuses)[number]
-  created_at: string
-  updated_at: string
-}
-
-interface ListResponse<T> {
-  page: number
-  per_page: number
-  total: number
-  total_pages: number
-  data: T[]
-}
-export const api = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
-  endpoints: (build) => ({
-    listPosts: build.query<ListResponse<Post>, number | void>({
-      query: (page = 1) => `posts?page=${page}`,
-    }),
-  }),
-})
-
-export const { useListPostsQuery, usePrefetch } = api
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+export const postStatuses = ['draft', 'published', 'pending_review'] as const
+
+export interface Post {
+  id: string
+  title: string
+  author: string
+  content: string
+  status: (typeof postStatuses)[number]
+  created_at: string
+  updated_at: string
+}
+
+interface ListResponse<T> {
+  page: number
+  per_page: number
+  total: number
+  total_pages: number
+  data: T[]
+}
+export const api = createApi({
+  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
+  endpoints: (build) => ({
+    listPosts: build.query<ListResponse<Post>, number | void>({
+      query: (page = 1) => `posts?page=${page}`,
+    }),
+  }),
+})
+
+export const { useListPostsQuery, usePrefetch } = api
diff --git a/examples/query/react/prefetching-automatic-waterfall/src/features/posts/PostsManager.tsx b/examples/query/react/prefetching-automatic-waterfall/src/features/posts/PostsManager.tsx
index eb093dad..faf69b3f 100644
--- a/examples/query/react/prefetching-automatic-waterfall/src/features/posts/PostsManager.tsx
+++ b/examples/query/react/prefetching-automatic-waterfall/src/features/posts/PostsManager.tsx
@@ -1,130 +1,130 @@
-import { useCallback, useState, useEffect } from 'react'
-import {
-  Badge,
-  Box,
-  Button,
-  Divider,
-  Flex,
-  Heading,
-  HStack,
-  Icon,
-  List,
-  ListIcon,
-  ListItem,
-  Spacer,
-  Stat,
-  StatLabel,
-  StatNumber,
-} from '@chakra-ui/react'
-import { MdArrowBack, MdArrowForward, MdBook } from 'react-icons/md'
-import { Post, usePrefetch, useListPostsQuery } from '../../app/services/posts'
-
-const getColorForStatus = (status: Post['status']) => {
-  return status === 'draft'
-    ? 'gray'
-    : status === 'pending_review'
-      ? 'orange'
-      : 'green'
-}
-
-const PostList = () => {
-  const [page, setPage] = useState(1)
-  const [hasPrefetchedAll, setHasPrefetchedAll] = useState(false)
-
-  const { data: posts, isLoading, isFetching } = useListPostsQuery(page)
-
-  const prefetchPage = usePrefetch('listPosts')
-
-  const prefetchNext = useCallback(() => {
-    prefetchPage(page + 1)
-  }, [prefetchPage, page])
-
-  useEffect(() => {
-    if (!hasPrefetchedAll) {
-      if (posts && posts.total_pages > 1) {
-        ;[...new Array(posts.total_pages)].forEach((page, index) => {
-          if (index >= posts.total_pages) return
-          prefetchPage(index + 1, { force: true })
-        })
-        setHasPrefetchedAll(true)
-      }
-    }
-  }, [posts, page, prefetchPage, hasPrefetchedAll])
-
-  if (isLoading) {
-    return <div>Loading</div>
-  }
-
-  if (!posts?.data) {
-    return <div>No posts :(</div>
-  }
-
-  return (
-    <Box>
-      <HStack spacing="14px">
-        <Button
-          onClick={() => setPage((prev) => prev - 1)}
-          isLoading={isFetching}
-          disabled={page === 1}
-        >
-          <Icon as={MdArrowBack} />
-        </Button>
-        <Button
-          onClick={() => setPage((prev) => prev + 1)}
-          isLoading={isFetching}
-          disabled={page === posts.total_pages}
-          onMouseEnter={prefetchNext}
-        >
-          <Icon as={MdArrowForward} />
-        </Button>
-        <Box>{`${page} / ${posts.total_pages}`}</Box>
-      </HStack>
-      <List spacing={3} mt={6}>
-        {posts?.data.map(({ id, title, status }) => (
-          <ListItem key={id}>
-            <ListIcon as={MdBook} color="green.500" /> {title}{' '}
-            <Badge
-              ml="1"
-              fontSize="0.8em"
-              colorScheme={getColorForStatus(status)}
-            >
-              {status}
-            </Badge>
-          </ListItem>
-        ))}
-      </List>
-    </Box>
-  )
-}
-export const PostsCountStat = () => {
-  const { data: posts } = useListPostsQuery()
-
-  return (
-    <Stat>
-      <StatLabel>Total Posts</StatLabel>
-      <StatNumber>{`${posts?.total || 'NA'}`}</StatNumber>
-    </Stat>
-  )
-}
-
-export const PostsManager = () => {
-  return (
-    <Box>
-      <Flex wrap="wrap" bg="#011627" p={4} color="white">
-        <Box>
-          <Heading size="xl">Manage Posts</Heading>
-        </Box>
-        <Spacer />
-        <Box>
-          <PostsCountStat />
-        </Box>
-      </Flex>
-      <Divider />
-      <Box p={4}>
-        <PostList />
-      </Box>
-    </Box>
-  )
-}
-
-export default PostsManager
+import { useCallback, useState, useEffect } from 'react'
+import {
+  Badge,
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Heading,
+  HStack,
+  Icon,
+  List,
+  ListIcon,
+  ListItem,
+  Spacer,
+  Stat,
+  StatLabel,
+  StatNumber,
+} from '@chakra-ui/react'
+import { MdArrowBack, MdArrowForward, MdBook } from 'react-icons/md'
+import { Post, usePrefetch, useListPostsQuery } from '../../app/services/posts'
+
+const getColorForStatus = (status: Post['status']) => {
+  return status === 'draft'
+    ? 'gray'
+    : status === 'pending_review'
+      ? 'orange'
+      : 'green'
+}
+
+const PostList = () => {
+  const [page, setPage] = useState(1)
+  const [hasPrefetchedAll, setHasPrefetchedAll] = useState(false)
+
+  const { data: posts, isLoading, isFetching } = useListPostsQuery(page)
+
+  const prefetchPage = usePrefetch('listPosts')
+
+  const prefetchNext = useCallback(() => {
+    prefetchPage(page + 1)
+  }, [prefetchPage, page])
+
+  useEffect(() => {
+    if (!hasPrefetchedAll) {
+      if (posts && posts.total_pages > 1) {
+        ;[...new Array(posts.total_pages)].forEach((page, index) => {
+          if (index >= posts.total_pages) return
+          prefetchPage(index + 1, { force: true })
+        })
+        setHasPrefetchedAll(true)
+      }
+    }
+  }, [posts, page, prefetchPage, hasPrefetchedAll])
+
+  if (isLoading) {
+    return <div>Loading</div>
+  }
+
+  if (!posts?.data) {
+    return <div>No posts :(</div>
+  }
+
+  return (
+    <Box>
+      <HStack spacing="14px">
+        <Button
+          onClick={() => setPage((prev) => prev - 1)}
+          isLoading={isFetching}
+          disabled={page === 1}
+        >
+          <Icon as={MdArrowBack} />
+        </Button>
+        <Button
+          onClick={() => setPage((prev) => prev + 1)}
+          isLoading={isFetching}
+          disabled={page === posts.total_pages}
+          onMouseEnter={prefetchNext}
+        >
+          <Icon as={MdArrowForward} />
+        </Button>
+        <Box>{`${page} / ${posts.total_pages}`}</Box>
+      </HStack>
+      <List spacing={3} mt={6}>
+        {posts?.data.map(({ id, title, status }) => (
+          <ListItem key={id}>
+            <ListIcon as={MdBook} color="green.500" /> {title}{' '}
+            <Badge
+              ml="1"
+              fontSize="0.8em"
+              colorScheme={getColorForStatus(status)}
+            >
+              {status}
+            </Badge>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  )
+}
+export const PostsCountStat = () => {
+  const { data: posts } = useListPostsQuery()
+
+  return (
+    <Stat>
+      <StatLabel>Total Posts</StatLabel>
+      <StatNumber>{`${posts?.total || 'NA'}`}</StatNumber>
+    </Stat>
+  )
+}
+
+export const PostsManager = () => {
+  return (
+    <Box>
+      <Flex wrap="wrap" bg="#011627" p={4} color="white">
+        <Box>
+          <Heading size="xl">Manage Posts</Heading>
+        </Box>
+        <Spacer />
+        <Box>
+          <PostsCountStat />
+        </Box>
+      </Flex>
+      <Divider />
+      <Box p={4}>
+        <PostList />
+      </Box>
+    </Box>
+  )
+}
+
+export default PostsManager
diff --git a/examples/query/react/prefetching-automatic-waterfall/src/mocks/browser.ts b/examples/query/react/prefetching-automatic-waterfall/src/mocks/browser.ts
index 53e40204..deff8abe 100644
--- a/examples/query/react/prefetching-automatic-waterfall/src/mocks/browser.ts
+++ b/examples/query/react/prefetching-automatic-waterfall/src/mocks/browser.ts
@@ -1,4 +1,4 @@
-import { setupWorker } from 'msw'
-import { handlers } from './db'
-
-export const worker = setupWorker(...(handlers as any))
+import { setupWorker } from 'msw'
+import { handlers } from './db'
+
+export const worker = setupWorker(...(handlers as any))
diff --git a/examples/query/react/prefetching-automatic/src/app/services/posts.ts b/examples/query/react/prefetching-automatic/src/app/services/posts.ts
index d4032ef9..2242d2e8 100644
--- a/examples/query/react/prefetching-automatic/src/app/services/posts.ts
+++ b/examples/query/react/prefetching-automatic/src/app/services/posts.ts
@@ -1,31 +1,31 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-
-export const postStatuses = ['draft', 'published', 'pending_review'] as const
-
-export interface Post {
-  id: string
-  title: string
-  author: string
-  content: string
-  status: (typeof postStatuses)[number]
-  created_at: string
-  updated_at: string
-}
-
-interface ListResponse<T> {
-  page: number
-  per_page: number
-  total: number
-  total_pages: number
-  data: T[]
-}
-export const api = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
-  endpoints: (build) => ({
-    listPosts: build.query<ListResponse<Post>, number | void>({
-      query: (page = 1) => `posts?page=${page}`,
-    }),
-  }),
-})
-
-export const { useListPostsQuery, usePrefetch } = api
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+export const postStatuses = ['draft', 'published', 'pending_review'] as const
+
+export interface Post {
+  id: string
+  title: string
+  author: string
+  content: string
+  status: (typeof postStatuses)[number]
+  created_at: string
+  updated_at: string
+}
+
+interface ListResponse<T> {
+  page: number
+  per_page: number
+  total: number
+  total_pages: number
+  data: T[]
+}
+export const api = createApi({
+  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
+  endpoints: (build) => ({
+    listPosts: build.query<ListResponse<Post>, number | void>({
+      query: (page = 1) => `posts?page=${page}`,
+    }),
+  }),
+})
+
+export const { useListPostsQuery, usePrefetch } = api
diff --git a/examples/query/react/prefetching-automatic/src/features/posts/PostsManager.tsx b/examples/query/react/prefetching-automatic/src/features/posts/PostsManager.tsx
index 34354810..ed465054 100644
--- a/examples/query/react/prefetching-automatic/src/features/posts/PostsManager.tsx
+++ b/examples/query/react/prefetching-automatic/src/features/posts/PostsManager.tsx
@@ -1,122 +1,122 @@
-import { useCallback, useState, useEffect } from 'react'
-import {
-  Badge,
-  Box,
-  Button,
-  Divider,
-  Flex,
-  Heading,
-  HStack,
-  Icon,
-  List,
-  ListIcon,
-  ListItem,
-  Spacer,
-  Stat,
-  StatLabel,
-  StatNumber,
-} from '@chakra-ui/react'
-import { MdArrowBack, MdArrowForward, MdBook } from 'react-icons/md'
-import { Post, usePrefetch, useListPostsQuery } from '../../app/services/posts'
-
-const getColorForStatus = (status: Post['status']) => {
-  return status === 'draft'
-    ? 'gray'
-    : status === 'pending_review'
-      ? 'orange'
-      : 'green'
-}
-
-const PostList = () => {
-  const [page, setPage] = useState(1)
-  const { data: posts, isLoading, isFetching } = useListPostsQuery(page)
-  const prefetchPage = usePrefetch('listPosts')
-
-  const prefetchNext = useCallback(() => {
-    prefetchPage(page + 1)
-  }, [prefetchPage, page])
-
-  useEffect(() => {
-    if (page !== posts?.total_pages) {
-      prefetchNext()
-    }
-  }, [posts, page, prefetchNext])
-
-  if (isLoading) {
-    return <div>Loading</div>
-  }
-
-  if (!posts?.data) {
-    return <div>No posts :(</div>
-  }
-
-  return (
-    <Box>
-      <HStack spacing="14px">
-        <Button
-          onClick={() => setPage((prev) => prev - 1)}
-          isLoading={isFetching}
-          disabled={page === 1}
-        >
-          <Icon as={MdArrowBack} />
-        </Button>
-        <Button
-          onClick={() => setPage((prev) => prev + 1)}
-          isLoading={isFetching}
-          disabled={page === posts.total_pages}
-          onMouseEnter={prefetchNext}
-        >
-          <Icon as={MdArrowForward} />
-        </Button>
-        <Box>{`${page} / ${posts.total_pages}`}</Box>
-      </HStack>
-      <List spacing={3} mt={6}>
-        {posts?.data.map(({ id, title, status }) => (
-          <ListItem key={id}>
-            <ListIcon as={MdBook} color="green.500" /> {title}{' '}
-            <Badge
-              ml="1"
-              fontSize="0.8em"
-              colorScheme={getColorForStatus(status)}
-            >
-              {status}
-            </Badge>
-          </ListItem>
-        ))}
-      </List>
-    </Box>
-  )
-}
-
-export const PostsCountStat = () => {
-  const { data: posts } = useListPostsQuery()
-
-  return (
-    <Stat>
-      <StatLabel>Total Posts</StatLabel>
-      <StatNumber>{`${posts?.total || 'NA'}`}</StatNumber>
-    </Stat>
-  )
-}
-
-export const PostsManager = () => {
-  return (
-    <Box>
-      <Flex wrap="wrap" bg="#011627" p={4} color="white">
-        <Box>
-          <Heading size="xl">Manage Posts</Heading>
-        </Box>
-        <Spacer />
-        <Box>
-          <PostsCountStat />
-        </Box>
-      </Flex>
-      <Divider />
-      <Box p={4}>
-        <PostList />
-      </Box>
-    </Box>
-  )
-}
-
-export default PostsManager
+import { useCallback, useState, useEffect } from 'react'
+import {
+  Badge,
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Heading,
+  HStack,
+  Icon,
+  List,
+  ListIcon,
+  ListItem,
+  Spacer,
+  Stat,
+  StatLabel,
+  StatNumber,
+} from '@chakra-ui/react'
+import { MdArrowBack, MdArrowForward, MdBook } from 'react-icons/md'
+import { Post, usePrefetch, useListPostsQuery } from '../../app/services/posts'
+
+const getColorForStatus = (status: Post['status']) => {
+  return status === 'draft'
+    ? 'gray'
+    : status === 'pending_review'
+      ? 'orange'
+      : 'green'
+}
+
+const PostList = () => {
+  const [page, setPage] = useState(1)
+  const { data: posts, isLoading, isFetching } = useListPostsQuery(page)
+  const prefetchPage = usePrefetch('listPosts')
+
+  const prefetchNext = useCallback(() => {
+    prefetchPage(page + 1)
+  }, [prefetchPage, page])
+
+  useEffect(() => {
+    if (page !== posts?.total_pages) {
+      prefetchNext()
+    }
+  }, [posts, page, prefetchNext])
+
+  if (isLoading) {
+    return <div>Loading</div>
+  }
+
+  if (!posts?.data) {
+    return <div>No posts :(</div>
+  }
+
+  return (
+    <Box>
+      <HStack spacing="14px">
+        <Button
+          onClick={() => setPage((prev) => prev - 1)}
+          isLoading={isFetching}
+          disabled={page === 1}
+        >
+          <Icon as={MdArrowBack} />
+        </Button>
+        <Button
+          onClick={() => setPage((prev) => prev + 1)}
+          isLoading={isFetching}
+          disabled={page === posts.total_pages}
+          onMouseEnter={prefetchNext}
+        >
+          <Icon as={MdArrowForward} />
+        </Button>
+        <Box>{`${page} / ${posts.total_pages}`}</Box>
+      </HStack>
+      <List spacing={3} mt={6}>
+        {posts?.data.map(({ id, title, status }) => (
+          <ListItem key={id}>
+            <ListIcon as={MdBook} color="green.500" /> {title}{' '}
+            <Badge
+              ml="1"
+              fontSize="0.8em"
+              colorScheme={getColorForStatus(status)}
+            >
+              {status}
+            </Badge>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  )
+}
+
+export const PostsCountStat = () => {
+  const { data: posts } = useListPostsQuery()
+
+  return (
+    <Stat>
+      <StatLabel>Total Posts</StatLabel>
+      <StatNumber>{`${posts?.total || 'NA'}`}</StatNumber>
+    </Stat>
+  )
+}
+
+export const PostsManager = () => {
+  return (
+    <Box>
+      <Flex wrap="wrap" bg="#011627" p={4} color="white">
+        <Box>
+          <Heading size="xl">Manage Posts</Heading>
+        </Box>
+        <Spacer />
+        <Box>
+          <PostsCountStat />
+        </Box>
+      </Flex>
+      <Divider />
+      <Box p={4}>
+        <PostList />
+      </Box>
+    </Box>
+  )
+}
+
+export default PostsManager
diff --git a/examples/query/react/prefetching-automatic/src/mocks/browser.ts b/examples/query/react/prefetching-automatic/src/mocks/browser.ts
index 53e40204..deff8abe 100644
--- a/examples/query/react/prefetching-automatic/src/mocks/browser.ts
+++ b/examples/query/react/prefetching-automatic/src/mocks/browser.ts
@@ -1,4 +1,4 @@
-import { setupWorker } from 'msw'
-import { handlers } from './db'
-
-export const worker = setupWorker(...(handlers as any))
+import { setupWorker } from 'msw'
+import { handlers } from './db'
+
+export const worker = setupWorker(...(handlers as any))
diff --git a/examples/query/react/prefetching/src/app/services/posts.ts b/examples/query/react/prefetching/src/app/services/posts.ts
index d4032ef9..2242d2e8 100644
--- a/examples/query/react/prefetching/src/app/services/posts.ts
+++ b/examples/query/react/prefetching/src/app/services/posts.ts
@@ -1,31 +1,31 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-
-export const postStatuses = ['draft', 'published', 'pending_review'] as const
-
-export interface Post {
-  id: string
-  title: string
-  author: string
-  content: string
-  status: (typeof postStatuses)[number]
-  created_at: string
-  updated_at: string
-}
-
-interface ListResponse<T> {
-  page: number
-  per_page: number
-  total: number
-  total_pages: number
-  data: T[]
-}
-export const api = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
-  endpoints: (build) => ({
-    listPosts: build.query<ListResponse<Post>, number | void>({
-      query: (page = 1) => `posts?page=${page}`,
-    }),
-  }),
-})
-
-export const { useListPostsQuery, usePrefetch } = api
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+export const postStatuses = ['draft', 'published', 'pending_review'] as const
+
+export interface Post {
+  id: string
+  title: string
+  author: string
+  content: string
+  status: (typeof postStatuses)[number]
+  created_at: string
+  updated_at: string
+}
+
+interface ListResponse<T> {
+  page: number
+  per_page: number
+  total: number
+  total_pages: number
+  data: T[]
+}
+export const api = createApi({
+  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
+  endpoints: (build) => ({
+    listPosts: build.query<ListResponse<Post>, number | void>({
+      query: (page = 1) => `posts?page=${page}`,
+    }),
+  }),
+})
+
+export const { useListPostsQuery, usePrefetch } = api
diff --git a/examples/query/react/prefetching/src/features/posts/PostsManager.tsx b/examples/query/react/prefetching/src/features/posts/PostsManager.tsx
index 5999215a..4b9b8377 100644
--- a/examples/query/react/prefetching/src/features/posts/PostsManager.tsx
+++ b/examples/query/react/prefetching/src/features/posts/PostsManager.tsx
@@ -1,116 +1,116 @@
-import { useCallback, useState } from 'react'
-import {
-  Badge,
-  Box,
-  Button,
-  Divider,
-  Flex,
-  Heading,
-  HStack,
-  Icon,
-  List,
-  ListIcon,
-  ListItem,
-  Spacer,
-  Stat,
-  StatLabel,
-  StatNumber,
-} from '@chakra-ui/react'
-import { MdArrowBack, MdArrowForward, MdBook } from 'react-icons/md'
-import { Post, usePrefetch, useListPostsQuery } from '../../app/services/posts'
-
-const getColorForStatus = (status: Post['status']) => {
-  return status === 'draft'
-    ? 'gray'
-    : status === 'pending_review'
-      ? 'orange'
-      : 'green'
-}
-
-const PostList = () => {
-  const [page, setPage] = useState(1)
-  const { data: posts, isLoading, isFetching } = useListPostsQuery(page)
-  const prefetchPage = usePrefetch('listPosts')
-
-  const prefetchNext = useCallback(() => {
-    prefetchPage(page + 1)
-  }, [prefetchPage, page])
-
-  if (isLoading) {
-    return <div>Loading</div>
-  }
-
-  if (!posts?.data) {
-    return <div>No posts :(</div>
-  }
-
-  return (
-    <Box>
-      <HStack spacing="14px">
-        <Button
-          onClick={() => setPage((prev) => prev - 1)}
-          isLoading={isFetching}
-          disabled={page === 1}
-        >
-          <Icon as={MdArrowBack} />
-        </Button>
-        <Button
-          onClick={() => setPage((prev) => prev + 1)}
-          isLoading={isFetching}
-          disabled={page === posts.total_pages}
-          onMouseEnter={prefetchNext}
-        >
-          <Icon as={MdArrowForward} />
-        </Button>
-        <Box>{`${page} / ${posts.total_pages}`}</Box>
-      </HStack>
-      <List spacing={3} mt={6}>
-        {posts?.data.map(({ id, title, status }) => (
-          <ListItem key={id}>
-            <ListIcon as={MdBook} color="green.500" /> {title}{' '}
-            <Badge
-              ml="1"
-              fontSize="0.8em"
-              colorScheme={getColorForStatus(status)}
-            >
-              {status}
-            </Badge>
-          </ListItem>
-        ))}
-      </List>
-    </Box>
-  )
-}
-
-export const PostsCountStat = () => {
-  const { data: posts } = useListPostsQuery()
-
-  return (
-    <Stat>
-      <StatLabel>Total Posts</StatLabel>
-      <StatNumber>{`${posts?.total || 'NA'}`}</StatNumber>
-    </Stat>
-  )
-}
-
-export const PostsManager = () => {
-  return (
-    <Box>
-      <Flex wrap="wrap" bg="#011627" p={4} color="white">
-        <Box>
-          <Heading size="xl">Manage Posts</Heading>
-        </Box>
-        <Spacer />
-        <Box>
-          <PostsCountStat />
-        </Box>
-      </Flex>
-      <Divider />
-      <Box p={4}>
-        <PostList />
-      </Box>
-    </Box>
-  )
-}
-
-export default PostsManager
+import { useCallback, useState } from 'react'
+import {
+  Badge,
+  Box,
+  Button,
+  Divider,
+  Flex,
+  Heading,
+  HStack,
+  Icon,
+  List,
+  ListIcon,
+  ListItem,
+  Spacer,
+  Stat,
+  StatLabel,
+  StatNumber,
+} from '@chakra-ui/react'
+import { MdArrowBack, MdArrowForward, MdBook } from 'react-icons/md'
+import { Post, usePrefetch, useListPostsQuery } from '../../app/services/posts'
+
+const getColorForStatus = (status: Post['status']) => {
+  return status === 'draft'
+    ? 'gray'
+    : status === 'pending_review'
+      ? 'orange'
+      : 'green'
+}
+
+const PostList = () => {
+  const [page, setPage] = useState(1)
+  const { data: posts, isLoading, isFetching } = useListPostsQuery(page)
+  const prefetchPage = usePrefetch('listPosts')
+
+  const prefetchNext = useCallback(() => {
+    prefetchPage(page + 1)
+  }, [prefetchPage, page])
+
+  if (isLoading) {
+    return <div>Loading</div>
+  }
+
+  if (!posts?.data) {
+    return <div>No posts :(</div>
+  }
+
+  return (
+    <Box>
+      <HStack spacing="14px">
+        <Button
+          onClick={() => setPage((prev) => prev - 1)}
+          isLoading={isFetching}
+          disabled={page === 1}
+        >
+          <Icon as={MdArrowBack} />
+        </Button>
+        <Button
+          onClick={() => setPage((prev) => prev + 1)}
+          isLoading={isFetching}
+          disabled={page === posts.total_pages}
+          onMouseEnter={prefetchNext}
+        >
+          <Icon as={MdArrowForward} />
+        </Button>
+        <Box>{`${page} / ${posts.total_pages}`}</Box>
+      </HStack>
+      <List spacing={3} mt={6}>
+        {posts?.data.map(({ id, title, status }) => (
+          <ListItem key={id}>
+            <ListIcon as={MdBook} color="green.500" /> {title}{' '}
+            <Badge
+              ml="1"
+              fontSize="0.8em"
+              colorScheme={getColorForStatus(status)}
+            >
+              {status}
+            </Badge>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  )
+}
+
+export const PostsCountStat = () => {
+  const { data: posts } = useListPostsQuery()
+
+  return (
+    <Stat>
+      <StatLabel>Total Posts</StatLabel>
+      <StatNumber>{`${posts?.total || 'NA'}`}</StatNumber>
+    </Stat>
+  )
+}
+
+export const PostsManager = () => {
+  return (
+    <Box>
+      <Flex wrap="wrap" bg="#011627" p={4} color="white">
+        <Box>
+          <Heading size="xl">Manage Posts</Heading>
+        </Box>
+        <Spacer />
+        <Box>
+          <PostsCountStat />
+        </Box>
+      </Flex>
+      <Divider />
+      <Box p={4}>
+        <PostList />
+      </Box>
+    </Box>
+  )
+}
+
+export default PostsManager
diff --git a/examples/query/react/prefetching/src/mocks/browser.ts b/examples/query/react/prefetching/src/mocks/browser.ts
index 53e40204..deff8abe 100644
--- a/examples/query/react/prefetching/src/mocks/browser.ts
+++ b/examples/query/react/prefetching/src/mocks/browser.ts
@@ -1,4 +1,4 @@
-import { setupWorker } from 'msw'
-import { handlers } from './db'
-
-export const worker = setupWorker(...(handlers as any))
+import { setupWorker } from 'msw'
+import { handlers } from './db'
+
+export const worker = setupWorker(...(handlers as any))
diff --git a/packages/toolkit/api-extractor-react.json b/packages/toolkit/api-extractor-react.json
index 5b110e70..35ed8b94 100644
--- a/packages/toolkit/api-extractor-react.json
+++ b/packages/toolkit/api-extractor-react.json
@@ -1,356 +1,356 @@
-/**
- * Config file for API Extractor.  For more info, please visit: https://api-extractor.com
- */
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
-
-  /**
-   * Optionally specifies another JSON config file that this file extends from.  This provides a way for
-   * standard settings to be shared across multiple projects.
-   *
-   * If the path starts with "./" or "../", the path is resolved relative to the folder of the file that contains
-   * the "extends" field.  Otherwise, the first path segment is interpreted as an NPM package name, and will be
-   * resolved using NodeJS require().
-   *
-   * SUPPORTED TOKENS: none
-   * DEFAULT VALUE: ""
-   */
-  // "extends": "./shared/api-extractor-base.json"
-  // "extends": "my-package/include/api-extractor-base.json"
-
-  /**
-   * Determines the "<projectFolder>" token that can be used with other config file settings.  The project folder
-   * typically contains the tsconfig.json and package.json config files, but the path is user-defined.
-   *
-   * The path is resolved relative to the folder of the config file that contains the setting.
-   *
-   * The default value for "projectFolder" is the token "<lookup>", which means the folder is determined by traversing
-   * parent folders, starting from the folder containing api-extractor.json, and stopping at the first folder
-   * that contains a tsconfig.json file.  If a tsconfig.json file cannot be found in this way, then an error
-   * will be reported.
-   *
-   * SUPPORTED TOKENS: <lookup>
-   * DEFAULT VALUE: "<lookup>"
-   */
-  "projectFolder": ".",
-
-  /**
-   * (REQUIRED) Specifies the .d.ts file to be used as the starting point for analysis.  API Extractor
-   * analyzes the symbols exported by this module.
-   *
-   * The file extension must be ".d.ts" and not ".ts".
-   *
-   * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-   * prepend a folder token such as "<projectFolder>".
-   *
-   * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-   */
-  "mainEntryPointFilePath": "dist/react/index.d.ts",
-  //"mainEntryPointFilePath": "/home/weber/tmp/rtk-origin-master/dist/index.d.ts",
-
-  /**
-   * A list of NPM package names whose exports should be treated as part of this package.
-   *
-   * For example, suppose that Webpack is used to generate a distributed bundle for the project "library1",
-   * and another NPM package "library2" is embedded in this bundle.  Some types from library2 may become part
-   * of the exported API for library1, but by default API Extractor would generate a .d.ts rollup that explicitly
-   * imports library2.  To avoid this, we can specify:
-   *
-   *   "bundledPackages": [ "library2" ],
-   *
-   * This would direct API Extractor to embed those types directly in the .d.ts rollup, as if they had been
-   * local files for library1.
-   */
-  "bundledPackages": [],
-
-  /**
-   * Determines how the TypeScript compiler engine will be invoked by API Extractor.
-   */
-  "compiler": {
-    /**
-     * Specifies the path to the tsconfig.json file to be used by API Extractor when analyzing the project.
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * Note: This setting will be ignored if "overrideTsconfig" is used.
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: "<projectFolder>/tsconfig.json"
-     */
-    // "tsconfigFilePath": "<projectFolder>/tsconfig.json",
-    /**
-     * Provides a compiler configuration that will be used instead of reading the tsconfig.json file from disk.
-     * The object must conform to the TypeScript tsconfig schema:
-     *
-     * http://json.schemastore.org/tsconfig
-     *
-     * If omitted, then the tsconfig.json file will be read from the "projectFolder".
-     *
-     * DEFAULT VALUE: no overrideTsconfig section
-     */
-    // "overrideTsconfig": {
-    //   . . .
-    // }
-    /**
-     * This option causes the compiler to be invoked with the --skipLibCheck option. This option is not recommended
-     * and may cause API Extractor to produce incomplete or incorrect declarations, but it may be required when
-     * dependencies contain declarations that are incompatible with the TypeScript engine that API Extractor uses
-     * for its analysis.  Where possible, the underlying issue should be fixed rather than relying on skipLibCheck.
-     *
-     * DEFAULT VALUE: false
-     */
-    // "skipLibCheck": true,
-  },
-
-  /**
-   * Configures how the API report file (*.api.md) will be generated.
-   */
-  "apiReport": {
-    /**
-     * (REQUIRED) Whether to generate an API report.
-     */
-    "enabled": true,
-
-    /**
-     * The filename for the API report files.  It will be combined with "reportFolder" or "reportTempFolder" to produce
-     * a full file path.
-     *
-     * The file extension should be ".api.md", and the string should not contain a path separator such as "\" or "/".
-     *
-     * SUPPORTED TOKENS: <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: "<unscopedPackageName>.api.md"
-     */
-    "reportFileName": "redux-toolkit-react.api.md",
-
-    /**
-     * Specifies the folder where the API report file is written.  The file name portion is determined by
-     * the "reportFileName" setting.
-     *
-     * The API report file is normally tracked by Git.  Changes to it can be used to trigger a branch policy,
-     * e.g. for an API review.
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: "<projectFolder>/etc/"
-     */
-    "reportFolder": "<projectFolder>/etc/"
-
-    /**
-     * Specifies the folder where the temporary report file is written.  The file name portion is determined by
-     * the "reportFileName" setting.
-     *
-     * After the temporary file is written to disk, it is compared with the file in the "reportFolder".
-     * If they are different, a production build will fail.
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: "<projectFolder>/temp/"
-     */
-    // "reportTempFolder": "<projectFolder>/temp/"
-  },
-
-  /**
-   * Configures how the doc model file (*.api.json) will be generated.
-   */
-  "docModel": {
-    /**
-     * (REQUIRED) Whether to generate a doc model file.
-     */
-    "enabled": false
-
-    /**
-     * The output path for the doc model file.  The file extension should be ".api.json".
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: "<projectFolder>/temp/<unscopedPackageName>.api.json"
-     */
-    // "apiJsonFilePath": "<projectFolder>/temp/<unscopedPackageName>.api.json"
-  },
-
-  /**
-   * Configures how the .d.ts rollup file will be generated.
-   */
-  "dtsRollup": {
-    /**
-     * (REQUIRED) Whether to generate the .d.ts rollup file.
-     */
-    "enabled": false,
-
-    /**
-     * Specifies the output path for a .d.ts rollup file to be generated without any trimming.
-     * This file will include all declarations that are exported by the main entry point.
-     *
-     * If the path is an empty string, then this file will not be written.
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: "<projectFolder>/dist/<unscopedPackageName>.d.ts"
-     */
-    "untrimmedFilePath": "<projectFolder>/dist/react/typings.d.ts"
-
-    /**
-     * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "beta" release.
-     * This file will include only declarations that are marked as "@public" or "@beta".
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: ""
-     */
-    // "betaTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-beta.d.ts",
-
-    /**
-     * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "public" release.
-     * This file will include only declarations that are marked as "@public".
-     *
-     * If the path is an empty string, then this file will not be written.
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: ""
-     */
-    // "publicTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-public.d.ts",
-
-    /**
-     * When a declaration is trimmed, by default it will be replaced by a code comment such as
-     * "Excluded from this release type: exampleMember".  Set "omitTrimmingComments" to true to remove the
-     * declaration completely.
-     *
-     * DEFAULT VALUE: false
-     */
-    // "omitTrimmingComments": true
-  },
-
-  /**
-   * Configures how the tsdoc-metadata.json file will be generated.
-   */
-  "tsdocMetadata": {
-    /**
-     * Whether to generate the tsdoc-metadata.json file.
-     *
-     * DEFAULT VALUE: true
-     */
-    "enabled": false
-
-    /**
-     * Specifies where the TSDoc metadata file should be written.
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * The default value is "<lookup>", which causes the path to be automatically inferred from the "tsdocMetadata",
-     * "typings" or "main" fields of the project's package.json.  If none of these fields are set, the lookup
-     * falls back to "tsdoc-metadata.json" in the package folder.
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: "<lookup>"
-     */
-    // "tsdocMetadataFilePath": "<projectFolder>/dist/tsdoc-metadata.json"
-  },
-
-  /**
-   * Configures how API Extractor reports error and warning messages produced during analysis.
-   *
-   * There are three sources of messages:  compiler messages, API Extractor messages, and TSDoc messages.
-   */
-  "messages": {
-    /**
-     * Configures handling of diagnostic messages reported by the TypeScript compiler engine while analyzing
-     * the input .d.ts files.
-     *
-     * TypeScript message identifiers start with "TS" followed by an integer.  For example: "TS2551"
-     *
-     * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
-     */
-    "compilerMessageReporting": {
-      /**
-       * Configures the default routing for messages that don't match an explicit rule in this table.
-       */
-      "default": {
-        /**
-         * Specifies whether the message should be written to the the tool's output log.  Note that
-         * the "addToApiReportFile" property may supersede this option.
-         *
-         * Possible values: "error", "warning", "none"
-         *
-         * Errors cause the build to fail and return a nonzero exit code.  Warnings cause a production build fail
-         * and return a nonzero exit code.  For a non-production build (e.g. when "api-extractor run" includes
-         * the "--local" option), the warning is displayed but the build will not fail.
-         *
-         * DEFAULT VALUE: "warning"
-         */
-        "logLevel": "warning"
-
-        /**
-         * When addToApiReportFile is true:  If API Extractor is configured to write an API report file (.api.md),
-         * then the message will be written inside that file; otherwise, the message is instead logged according to
-         * the "logLevel" option.
-         *
-         * DEFAULT VALUE: false
-         */
-        // "addToApiReportFile": false
-      }
-
-      // "TS2551": {
-      //   "logLevel": "warning",
-      //   "addToApiReportFile": true
-      // },
-      //
-      // . . .
-    },
-
-    /**
-     * Configures handling of messages reported by API Extractor during its analysis.
-     *
-     * API Extractor message identifiers start with "ae-".  For example: "ae-extra-release-tag"
-     *
-     * DEFAULT VALUE: See api-extractor-defaults.json for the complete table of extractorMessageReporting mappings
-     */
-    "extractorMessageReporting": {
-      "default": {
-        "logLevel": "warning"
-        // "addToApiReportFile": false
-      },
-      "ae-forgotten-export": {
-        "logLevel": "none",
-        "addToApiReportFile": false
-      }
-      //
-      // . . .
-    },
-
-    /**
-     * Configures handling of messages reported by the TSDoc parser when analyzing code comments.
-     *
-     * TSDoc message identifiers start with "tsdoc-".  For example: "tsdoc-link-tag-unescaped-text"
-     *
-     * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
-     */
-    "tsdocMessageReporting": {
-      "default": {
-        "logLevel": "none"
-        // "addToApiReportFile": false
-      }
-
-      // "tsdoc-link-tag-unescaped-text": {
-      //   "logLevel": "warning",
-      //   "addToApiReportFile": true
-      // },
-      //
-      // . . .
-    }
-  }
-}
+/**
+ * Config file for API Extractor.  For more info, please visit: https://api-extractor.com
+ */
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+
+  /**
+   * Optionally specifies another JSON config file that this file extends from.  This provides a way for
+   * standard settings to be shared across multiple projects.
+   *
+   * If the path starts with "./" or "../", the path is resolved relative to the folder of the file that contains
+   * the "extends" field.  Otherwise, the first path segment is interpreted as an NPM package name, and will be
+   * resolved using NodeJS require().
+   *
+   * SUPPORTED TOKENS: none
+   * DEFAULT VALUE: ""
+   */
+  // "extends": "./shared/api-extractor-base.json"
+  // "extends": "my-package/include/api-extractor-base.json"
+
+  /**
+   * Determines the "<projectFolder>" token that can be used with other config file settings.  The project folder
+   * typically contains the tsconfig.json and package.json config files, but the path is user-defined.
+   *
+   * The path is resolved relative to the folder of the config file that contains the setting.
+   *
+   * The default value for "projectFolder" is the token "<lookup>", which means the folder is determined by traversing
+   * parent folders, starting from the folder containing api-extractor.json, and stopping at the first folder
+   * that contains a tsconfig.json file.  If a tsconfig.json file cannot be found in this way, then an error
+   * will be reported.
+   *
+   * SUPPORTED TOKENS: <lookup>
+   * DEFAULT VALUE: "<lookup>"
+   */
+  "projectFolder": ".",
+
+  /**
+   * (REQUIRED) Specifies the .d.ts file to be used as the starting point for analysis.  API Extractor
+   * analyzes the symbols exported by this module.
+   *
+   * The file extension must be ".d.ts" and not ".ts".
+   *
+   * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+   * prepend a folder token such as "<projectFolder>".
+   *
+   * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+   */
+  "mainEntryPointFilePath": "dist/react/index.d.ts",
+  //"mainEntryPointFilePath": "/home/weber/tmp/rtk-origin-master/dist/index.d.ts",
+
+  /**
+   * A list of NPM package names whose exports should be treated as part of this package.
+   *
+   * For example, suppose that Webpack is used to generate a distributed bundle for the project "library1",
+   * and another NPM package "library2" is embedded in this bundle.  Some types from library2 may become part
+   * of the exported API for library1, but by default API Extractor would generate a .d.ts rollup that explicitly
+   * imports library2.  To avoid this, we can specify:
+   *
+   *   "bundledPackages": [ "library2" ],
+   *
+   * This would direct API Extractor to embed those types directly in the .d.ts rollup, as if they had been
+   * local files for library1.
+   */
+  "bundledPackages": [],
+
+  /**
+   * Determines how the TypeScript compiler engine will be invoked by API Extractor.
+   */
+  "compiler": {
+    /**
+     * Specifies the path to the tsconfig.json file to be used by API Extractor when analyzing the project.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * Note: This setting will be ignored if "overrideTsconfig" is used.
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/tsconfig.json"
+     */
+    // "tsconfigFilePath": "<projectFolder>/tsconfig.json",
+    /**
+     * Provides a compiler configuration that will be used instead of reading the tsconfig.json file from disk.
+     * The object must conform to the TypeScript tsconfig schema:
+     *
+     * http://json.schemastore.org/tsconfig
+     *
+     * If omitted, then the tsconfig.json file will be read from the "projectFolder".
+     *
+     * DEFAULT VALUE: no overrideTsconfig section
+     */
+    // "overrideTsconfig": {
+    //   . . .
+    // }
+    /**
+     * This option causes the compiler to be invoked with the --skipLibCheck option. This option is not recommended
+     * and may cause API Extractor to produce incomplete or incorrect declarations, but it may be required when
+     * dependencies contain declarations that are incompatible with the TypeScript engine that API Extractor uses
+     * for its analysis.  Where possible, the underlying issue should be fixed rather than relying on skipLibCheck.
+     *
+     * DEFAULT VALUE: false
+     */
+    // "skipLibCheck": true,
+  },
+
+  /**
+   * Configures how the API report file (*.api.md) will be generated.
+   */
+  "apiReport": {
+    /**
+     * (REQUIRED) Whether to generate an API report.
+     */
+    "enabled": true,
+
+    /**
+     * The filename for the API report files.  It will be combined with "reportFolder" or "reportTempFolder" to produce
+     * a full file path.
+     *
+     * The file extension should be ".api.md", and the string should not contain a path separator such as "\" or "/".
+     *
+     * SUPPORTED TOKENS: <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<unscopedPackageName>.api.md"
+     */
+    "reportFileName": "redux-toolkit-react.api.md",
+
+    /**
+     * Specifies the folder where the API report file is written.  The file name portion is determined by
+     * the "reportFileName" setting.
+     *
+     * The API report file is normally tracked by Git.  Changes to it can be used to trigger a branch policy,
+     * e.g. for an API review.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/etc/"
+     */
+    "reportFolder": "<projectFolder>/etc/"
+
+    /**
+     * Specifies the folder where the temporary report file is written.  The file name portion is determined by
+     * the "reportFileName" setting.
+     *
+     * After the temporary file is written to disk, it is compared with the file in the "reportFolder".
+     * If they are different, a production build will fail.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/temp/"
+     */
+    // "reportTempFolder": "<projectFolder>/temp/"
+  },
+
+  /**
+   * Configures how the doc model file (*.api.json) will be generated.
+   */
+  "docModel": {
+    /**
+     * (REQUIRED) Whether to generate a doc model file.
+     */
+    "enabled": false
+
+    /**
+     * The output path for the doc model file.  The file extension should be ".api.json".
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/temp/<unscopedPackageName>.api.json"
+     */
+    // "apiJsonFilePath": "<projectFolder>/temp/<unscopedPackageName>.api.json"
+  },
+
+  /**
+   * Configures how the .d.ts rollup file will be generated.
+   */
+  "dtsRollup": {
+    /**
+     * (REQUIRED) Whether to generate the .d.ts rollup file.
+     */
+    "enabled": false,
+
+    /**
+     * Specifies the output path for a .d.ts rollup file to be generated without any trimming.
+     * This file will include all declarations that are exported by the main entry point.
+     *
+     * If the path is an empty string, then this file will not be written.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/dist/<unscopedPackageName>.d.ts"
+     */
+    "untrimmedFilePath": "<projectFolder>/dist/react/typings.d.ts"
+
+    /**
+     * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "beta" release.
+     * This file will include only declarations that are marked as "@public" or "@beta".
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: ""
+     */
+    // "betaTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-beta.d.ts",
+
+    /**
+     * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "public" release.
+     * This file will include only declarations that are marked as "@public".
+     *
+     * If the path is an empty string, then this file will not be written.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: ""
+     */
+    // "publicTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-public.d.ts",
+
+    /**
+     * When a declaration is trimmed, by default it will be replaced by a code comment such as
+     * "Excluded from this release type: exampleMember".  Set "omitTrimmingComments" to true to remove the
+     * declaration completely.
+     *
+     * DEFAULT VALUE: false
+     */
+    // "omitTrimmingComments": true
+  },
+
+  /**
+   * Configures how the tsdoc-metadata.json file will be generated.
+   */
+  "tsdocMetadata": {
+    /**
+     * Whether to generate the tsdoc-metadata.json file.
+     *
+     * DEFAULT VALUE: true
+     */
+    "enabled": false
+
+    /**
+     * Specifies where the TSDoc metadata file should be written.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * The default value is "<lookup>", which causes the path to be automatically inferred from the "tsdocMetadata",
+     * "typings" or "main" fields of the project's package.json.  If none of these fields are set, the lookup
+     * falls back to "tsdoc-metadata.json" in the package folder.
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<lookup>"
+     */
+    // "tsdocMetadataFilePath": "<projectFolder>/dist/tsdoc-metadata.json"
+  },
+
+  /**
+   * Configures how API Extractor reports error and warning messages produced during analysis.
+   *
+   * There are three sources of messages:  compiler messages, API Extractor messages, and TSDoc messages.
+   */
+  "messages": {
+    /**
+     * Configures handling of diagnostic messages reported by the TypeScript compiler engine while analyzing
+     * the input .d.ts files.
+     *
+     * TypeScript message identifiers start with "TS" followed by an integer.  For example: "TS2551"
+     *
+     * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+     */
+    "compilerMessageReporting": {
+      /**
+       * Configures the default routing for messages that don't match an explicit rule in this table.
+       */
+      "default": {
+        /**
+         * Specifies whether the message should be written to the the tool's output log.  Note that
+         * the "addToApiReportFile" property may supersede this option.
+         *
+         * Possible values: "error", "warning", "none"
+         *
+         * Errors cause the build to fail and return a nonzero exit code.  Warnings cause a production build fail
+         * and return a nonzero exit code.  For a non-production build (e.g. when "api-extractor run" includes
+         * the "--local" option), the warning is displayed but the build will not fail.
+         *
+         * DEFAULT VALUE: "warning"
+         */
+        "logLevel": "warning"
+
+        /**
+         * When addToApiReportFile is true:  If API Extractor is configured to write an API report file (.api.md),
+         * then the message will be written inside that file; otherwise, the message is instead logged according to
+         * the "logLevel" option.
+         *
+         * DEFAULT VALUE: false
+         */
+        // "addToApiReportFile": false
+      }
+
+      // "TS2551": {
+      //   "logLevel": "warning",
+      //   "addToApiReportFile": true
+      // },
+      //
+      // . . .
+    },
+
+    /**
+     * Configures handling of messages reported by API Extractor during its analysis.
+     *
+     * API Extractor message identifiers start with "ae-".  For example: "ae-extra-release-tag"
+     *
+     * DEFAULT VALUE: See api-extractor-defaults.json for the complete table of extractorMessageReporting mappings
+     */
+    "extractorMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+        // "addToApiReportFile": false
+      },
+      "ae-forgotten-export": {
+        "logLevel": "none",
+        "addToApiReportFile": false
+      }
+      //
+      // . . .
+    },
+
+    /**
+     * Configures handling of messages reported by the TSDoc parser when analyzing code comments.
+     *
+     * TSDoc message identifiers start with "tsdoc-".  For example: "tsdoc-link-tag-unescaped-text"
+     *
+     * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+     */
+    "tsdocMessageReporting": {
+      "default": {
+        "logLevel": "none"
+        // "addToApiReportFile": false
+      }
+
+      // "tsdoc-link-tag-unescaped-text": {
+      //   "logLevel": "warning",
+      //   "addToApiReportFile": true
+      // },
+      //
+      // . . .
+    }
+  }
+}
diff --git a/packages/toolkit/api-extractor.json b/packages/toolkit/api-extractor.json
index bec61ea5..c9319953 100644
--- a/packages/toolkit/api-extractor.json
+++ b/packages/toolkit/api-extractor.json
@@ -1,356 +1,356 @@
-/**
- * Config file for API Extractor.  For more info, please visit: https://api-extractor.com
- */
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
-
-  /**
-   * Optionally specifies another JSON config file that this file extends from.  This provides a way for
-   * standard settings to be shared across multiple projects.
-   *
-   * If the path starts with "./" or "../", the path is resolved relative to the folder of the file that contains
-   * the "extends" field.  Otherwise, the first path segment is interpreted as an NPM package name, and will be
-   * resolved using NodeJS require().
-   *
-   * SUPPORTED TOKENS: none
-   * DEFAULT VALUE: ""
-   */
-  // "extends": "./shared/api-extractor-base.json"
-  // "extends": "my-package/include/api-extractor-base.json"
-
-  /**
-   * Determines the "<projectFolder>" token that can be used with other config file settings.  The project folder
-   * typically contains the tsconfig.json and package.json config files, but the path is user-defined.
-   *
-   * The path is resolved relative to the folder of the config file that contains the setting.
-   *
-   * The default value for "projectFolder" is the token "<lookup>", which means the folder is determined by traversing
-   * parent folders, starting from the folder containing api-extractor.json, and stopping at the first folder
-   * that contains a tsconfig.json file.  If a tsconfig.json file cannot be found in this way, then an error
-   * will be reported.
-   *
-   * SUPPORTED TOKENS: <lookup>
-   * DEFAULT VALUE: "<lookup>"
-   */
-  "projectFolder": ".",
-
-  /**
-   * (REQUIRED) Specifies the .d.ts file to be used as the starting point for analysis.  API Extractor
-   * analyzes the symbols exported by this module.
-   *
-   * The file extension must be ".d.ts" and not ".ts".
-   *
-   * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-   * prepend a folder token such as "<projectFolder>".
-   *
-   * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-   */
-  "mainEntryPointFilePath": "dist/index.d.ts",
-  //"mainEntryPointFilePath": "/home/weber/tmp/rtk-origin-master/dist/index.d.ts",
-
-  /**
-   * A list of NPM package names whose exports should be treated as part of this package.
-   *
-   * For example, suppose that Webpack is used to generate a distributed bundle for the project "library1",
-   * and another NPM package "library2" is embedded in this bundle.  Some types from library2 may become part
-   * of the exported API for library1, but by default API Extractor would generate a .d.ts rollup that explicitly
-   * imports library2.  To avoid this, we can specify:
-   *
-   *   "bundledPackages": [ "library2" ],
-   *
-   * This would direct API Extractor to embed those types directly in the .d.ts rollup, as if they had been
-   * local files for library1.
-   */
-  "bundledPackages": [],
-
-  /**
-   * Determines how the TypeScript compiler engine will be invoked by API Extractor.
-   */
-  "compiler": {
-    /**
-     * Specifies the path to the tsconfig.json file to be used by API Extractor when analyzing the project.
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * Note: This setting will be ignored if "overrideTsconfig" is used.
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: "<projectFolder>/tsconfig.json"
-     */
-    // "tsconfigFilePath": "<projectFolder>/tsconfig.json",
-    /**
-     * Provides a compiler configuration that will be used instead of reading the tsconfig.json file from disk.
-     * The object must conform to the TypeScript tsconfig schema:
-     *
-     * http://json.schemastore.org/tsconfig
-     *
-     * If omitted, then the tsconfig.json file will be read from the "projectFolder".
-     *
-     * DEFAULT VALUE: no overrideTsconfig section
-     */
-    // "overrideTsconfig": {
-    //   . . .
-    // }
-    /**
-     * This option causes the compiler to be invoked with the --skipLibCheck option. This option is not recommended
-     * and may cause API Extractor to produce incomplete or incorrect declarations, but it may be required when
-     * dependencies contain declarations that are incompatible with the TypeScript engine that API Extractor uses
-     * for its analysis.  Where possible, the underlying issue should be fixed rather than relying on skipLibCheck.
-     *
-     * DEFAULT VALUE: false
-     */
-    // "skipLibCheck": true,
-  },
-
-  /**
-   * Configures how the API report file (*.api.md) will be generated.
-   */
-  "apiReport": {
-    /**
-     * (REQUIRED) Whether to generate an API report.
-     */
-    "enabled": true,
-
-    /**
-     * The filename for the API report files.  It will be combined with "reportFolder" or "reportTempFolder" to produce
-     * a full file path.
-     *
-     * The file extension should be ".api.md", and the string should not contain a path separator such as "\" or "/".
-     *
-     * SUPPORTED TOKENS: <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: "<unscopedPackageName>.api.md"
-     */
-    "reportFileName": "redux-toolkit.api.md",
-
-    /**
-     * Specifies the folder where the API report file is written.  The file name portion is determined by
-     * the "reportFileName" setting.
-     *
-     * The API report file is normally tracked by Git.  Changes to it can be used to trigger a branch policy,
-     * e.g. for an API review.
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: "<projectFolder>/etc/"
-     */
-    "reportFolder": "<projectFolder>/etc/"
-
-    /**
-     * Specifies the folder where the temporary report file is written.  The file name portion is determined by
-     * the "reportFileName" setting.
-     *
-     * After the temporary file is written to disk, it is compared with the file in the "reportFolder".
-     * If they are different, a production build will fail.
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: "<projectFolder>/temp/"
-     */
-    // "reportTempFolder": "<projectFolder>/temp/"
-  },
-
-  /**
-   * Configures how the doc model file (*.api.json) will be generated.
-   */
-  "docModel": {
-    /**
-     * (REQUIRED) Whether to generate a doc model file.
-     */
-    "enabled": false
-
-    /**
-     * The output path for the doc model file.  The file extension should be ".api.json".
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: "<projectFolder>/temp/<unscopedPackageName>.api.json"
-     */
-    // "apiJsonFilePath": "<projectFolder>/temp/<unscopedPackageName>.api.json"
-  },
-
-  /**
-   * Configures how the .d.ts rollup file will be generated.
-   */
-  "dtsRollup": {
-    /**
-     * (REQUIRED) Whether to generate the .d.ts rollup file.
-     */
-    "enabled": false,
-
-    /**
-     * Specifies the output path for a .d.ts rollup file to be generated without any trimming.
-     * This file will include all declarations that are exported by the main entry point.
-     *
-     * If the path is an empty string, then this file will not be written.
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: "<projectFolder>/dist/<unscopedPackageName>.d.ts"
-     */
-    "untrimmedFilePath": "<projectFolder>/dist/typings.d.ts"
-
-    /**
-     * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "beta" release.
-     * This file will include only declarations that are marked as "@public" or "@beta".
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: ""
-     */
-    // "betaTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-beta.d.ts",
-
-    /**
-     * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "public" release.
-     * This file will include only declarations that are marked as "@public".
-     *
-     * If the path is an empty string, then this file will not be written.
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: ""
-     */
-    // "publicTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-public.d.ts",
-
-    /**
-     * When a declaration is trimmed, by default it will be replaced by a code comment such as
-     * "Excluded from this release type: exampleMember".  Set "omitTrimmingComments" to true to remove the
-     * declaration completely.
-     *
-     * DEFAULT VALUE: false
-     */
-    // "omitTrimmingComments": true
-  },
-
-  /**
-   * Configures how the tsdoc-metadata.json file will be generated.
-   */
-  "tsdocMetadata": {
-    /**
-     * Whether to generate the tsdoc-metadata.json file.
-     *
-     * DEFAULT VALUE: true
-     */
-    "enabled": false
-
-    /**
-     * Specifies where the TSDoc metadata file should be written.
-     *
-     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
-     * prepend a folder token such as "<projectFolder>".
-     *
-     * The default value is "<lookup>", which causes the path to be automatically inferred from the "tsdocMetadata",
-     * "typings" or "main" fields of the project's package.json.  If none of these fields are set, the lookup
-     * falls back to "tsdoc-metadata.json" in the package folder.
-     *
-     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
-     * DEFAULT VALUE: "<lookup>"
-     */
-    // "tsdocMetadataFilePath": "<projectFolder>/dist/tsdoc-metadata.json"
-  },
-
-  /**
-   * Configures how API Extractor reports error and warning messages produced during analysis.
-   *
-   * There are three sources of messages:  compiler messages, API Extractor messages, and TSDoc messages.
-   */
-  "messages": {
-    /**
-     * Configures handling of diagnostic messages reported by the TypeScript compiler engine while analyzing
-     * the input .d.ts files.
-     *
-     * TypeScript message identifiers start with "TS" followed by an integer.  For example: "TS2551"
-     *
-     * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
-     */
-    "compilerMessageReporting": {
-      /**
-       * Configures the default routing for messages that don't match an explicit rule in this table.
-       */
-      "default": {
-        /**
-         * Specifies whether the message should be written to the the tool's output log.  Note that
-         * the "addToApiReportFile" property may supersede this option.
-         *
-         * Possible values: "error", "warning", "none"
-         *
-         * Errors cause the build to fail and return a nonzero exit code.  Warnings cause a production build fail
-         * and return a nonzero exit code.  For a non-production build (e.g. when "api-extractor run" includes
-         * the "--local" option), the warning is displayed but the build will not fail.
-         *
-         * DEFAULT VALUE: "warning"
-         */
-        "logLevel": "warning"
-
-        /**
-         * When addToApiReportFile is true:  If API Extractor is configured to write an API report file (.api.md),
-         * then the message will be written inside that file; otherwise, the message is instead logged according to
-         * the "logLevel" option.
-         *
-         * DEFAULT VALUE: false
-         */
-        // "addToApiReportFile": false
-      }
-
-      // "TS2551": {
-      //   "logLevel": "warning",
-      //   "addToApiReportFile": true
-      // },
-      //
-      // . . .
-    },
-
-    /**
-     * Configures handling of messages reported by API Extractor during its analysis.
-     *
-     * API Extractor message identifiers start with "ae-".  For example: "ae-extra-release-tag"
-     *
-     * DEFAULT VALUE: See api-extractor-defaults.json for the complete table of extractorMessageReporting mappings
-     */
-    "extractorMessageReporting": {
-      "default": {
-        "logLevel": "warning"
-        // "addToApiReportFile": false
-      },
-      "ae-forgotten-export": {
-        "logLevel": "none",
-        "addToApiReportFile": false
-      }
-      //
-      // . . .
-    },
-
-    /**
-     * Configures handling of messages reported by the TSDoc parser when analyzing code comments.
-     *
-     * TSDoc message identifiers start with "tsdoc-".  For example: "tsdoc-link-tag-unescaped-text"
-     *
-     * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
-     */
-    "tsdocMessageReporting": {
-      "default": {
-        "logLevel": "none"
-        // "addToApiReportFile": false
-      }
-
-      // "tsdoc-link-tag-unescaped-text": {
-      //   "logLevel": "warning",
-      //   "addToApiReportFile": true
-      // },
-      //
-      // . . .
-    }
-  }
-}
+/**
+ * Config file for API Extractor.  For more info, please visit: https://api-extractor.com
+ */
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+
+  /**
+   * Optionally specifies another JSON config file that this file extends from.  This provides a way for
+   * standard settings to be shared across multiple projects.
+   *
+   * If the path starts with "./" or "../", the path is resolved relative to the folder of the file that contains
+   * the "extends" field.  Otherwise, the first path segment is interpreted as an NPM package name, and will be
+   * resolved using NodeJS require().
+   *
+   * SUPPORTED TOKENS: none
+   * DEFAULT VALUE: ""
+   */
+  // "extends": "./shared/api-extractor-base.json"
+  // "extends": "my-package/include/api-extractor-base.json"
+
+  /**
+   * Determines the "<projectFolder>" token that can be used with other config file settings.  The project folder
+   * typically contains the tsconfig.json and package.json config files, but the path is user-defined.
+   *
+   * The path is resolved relative to the folder of the config file that contains the setting.
+   *
+   * The default value for "projectFolder" is the token "<lookup>", which means the folder is determined by traversing
+   * parent folders, starting from the folder containing api-extractor.json, and stopping at the first folder
+   * that contains a tsconfig.json file.  If a tsconfig.json file cannot be found in this way, then an error
+   * will be reported.
+   *
+   * SUPPORTED TOKENS: <lookup>
+   * DEFAULT VALUE: "<lookup>"
+   */
+  "projectFolder": ".",
+
+  /**
+   * (REQUIRED) Specifies the .d.ts file to be used as the starting point for analysis.  API Extractor
+   * analyzes the symbols exported by this module.
+   *
+   * The file extension must be ".d.ts" and not ".ts".
+   *
+   * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+   * prepend a folder token such as "<projectFolder>".
+   *
+   * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+   */
+  "mainEntryPointFilePath": "dist/index.d.ts",
+  //"mainEntryPointFilePath": "/home/weber/tmp/rtk-origin-master/dist/index.d.ts",
+
+  /**
+   * A list of NPM package names whose exports should be treated as part of this package.
+   *
+   * For example, suppose that Webpack is used to generate a distributed bundle for the project "library1",
+   * and another NPM package "library2" is embedded in this bundle.  Some types from library2 may become part
+   * of the exported API for library1, but by default API Extractor would generate a .d.ts rollup that explicitly
+   * imports library2.  To avoid this, we can specify:
+   *
+   *   "bundledPackages": [ "library2" ],
+   *
+   * This would direct API Extractor to embed those types directly in the .d.ts rollup, as if they had been
+   * local files for library1.
+   */
+  "bundledPackages": [],
+
+  /**
+   * Determines how the TypeScript compiler engine will be invoked by API Extractor.
+   */
+  "compiler": {
+    /**
+     * Specifies the path to the tsconfig.json file to be used by API Extractor when analyzing the project.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * Note: This setting will be ignored if "overrideTsconfig" is used.
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/tsconfig.json"
+     */
+    // "tsconfigFilePath": "<projectFolder>/tsconfig.json",
+    /**
+     * Provides a compiler configuration that will be used instead of reading the tsconfig.json file from disk.
+     * The object must conform to the TypeScript tsconfig schema:
+     *
+     * http://json.schemastore.org/tsconfig
+     *
+     * If omitted, then the tsconfig.json file will be read from the "projectFolder".
+     *
+     * DEFAULT VALUE: no overrideTsconfig section
+     */
+    // "overrideTsconfig": {
+    //   . . .
+    // }
+    /**
+     * This option causes the compiler to be invoked with the --skipLibCheck option. This option is not recommended
+     * and may cause API Extractor to produce incomplete or incorrect declarations, but it may be required when
+     * dependencies contain declarations that are incompatible with the TypeScript engine that API Extractor uses
+     * for its analysis.  Where possible, the underlying issue should be fixed rather than relying on skipLibCheck.
+     *
+     * DEFAULT VALUE: false
+     */
+    // "skipLibCheck": true,
+  },
+
+  /**
+   * Configures how the API report file (*.api.md) will be generated.
+   */
+  "apiReport": {
+    /**
+     * (REQUIRED) Whether to generate an API report.
+     */
+    "enabled": true,
+
+    /**
+     * The filename for the API report files.  It will be combined with "reportFolder" or "reportTempFolder" to produce
+     * a full file path.
+     *
+     * The file extension should be ".api.md", and the string should not contain a path separator such as "\" or "/".
+     *
+     * SUPPORTED TOKENS: <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<unscopedPackageName>.api.md"
+     */
+    "reportFileName": "redux-toolkit.api.md",
+
+    /**
+     * Specifies the folder where the API report file is written.  The file name portion is determined by
+     * the "reportFileName" setting.
+     *
+     * The API report file is normally tracked by Git.  Changes to it can be used to trigger a branch policy,
+     * e.g. for an API review.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/etc/"
+     */
+    "reportFolder": "<projectFolder>/etc/"
+
+    /**
+     * Specifies the folder where the temporary report file is written.  The file name portion is determined by
+     * the "reportFileName" setting.
+     *
+     * After the temporary file is written to disk, it is compared with the file in the "reportFolder".
+     * If they are different, a production build will fail.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/temp/"
+     */
+    // "reportTempFolder": "<projectFolder>/temp/"
+  },
+
+  /**
+   * Configures how the doc model file (*.api.json) will be generated.
+   */
+  "docModel": {
+    /**
+     * (REQUIRED) Whether to generate a doc model file.
+     */
+    "enabled": false
+
+    /**
+     * The output path for the doc model file.  The file extension should be ".api.json".
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/temp/<unscopedPackageName>.api.json"
+     */
+    // "apiJsonFilePath": "<projectFolder>/temp/<unscopedPackageName>.api.json"
+  },
+
+  /**
+   * Configures how the .d.ts rollup file will be generated.
+   */
+  "dtsRollup": {
+    /**
+     * (REQUIRED) Whether to generate the .d.ts rollup file.
+     */
+    "enabled": false,
+
+    /**
+     * Specifies the output path for a .d.ts rollup file to be generated without any trimming.
+     * This file will include all declarations that are exported by the main entry point.
+     *
+     * If the path is an empty string, then this file will not be written.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/dist/<unscopedPackageName>.d.ts"
+     */
+    "untrimmedFilePath": "<projectFolder>/dist/typings.d.ts"
+
+    /**
+     * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "beta" release.
+     * This file will include only declarations that are marked as "@public" or "@beta".
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: ""
+     */
+    // "betaTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-beta.d.ts",
+
+    /**
+     * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "public" release.
+     * This file will include only declarations that are marked as "@public".
+     *
+     * If the path is an empty string, then this file will not be written.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: ""
+     */
+    // "publicTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-public.d.ts",
+
+    /**
+     * When a declaration is trimmed, by default it will be replaced by a code comment such as
+     * "Excluded from this release type: exampleMember".  Set "omitTrimmingComments" to true to remove the
+     * declaration completely.
+     *
+     * DEFAULT VALUE: false
+     */
+    // "omitTrimmingComments": true
+  },
+
+  /**
+   * Configures how the tsdoc-metadata.json file will be generated.
+   */
+  "tsdocMetadata": {
+    /**
+     * Whether to generate the tsdoc-metadata.json file.
+     *
+     * DEFAULT VALUE: true
+     */
+    "enabled": false
+
+    /**
+     * Specifies where the TSDoc metadata file should be written.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * The default value is "<lookup>", which causes the path to be automatically inferred from the "tsdocMetadata",
+     * "typings" or "main" fields of the project's package.json.  If none of these fields are set, the lookup
+     * falls back to "tsdoc-metadata.json" in the package folder.
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<lookup>"
+     */
+    // "tsdocMetadataFilePath": "<projectFolder>/dist/tsdoc-metadata.json"
+  },
+
+  /**
+   * Configures how API Extractor reports error and warning messages produced during analysis.
+   *
+   * There are three sources of messages:  compiler messages, API Extractor messages, and TSDoc messages.
+   */
+  "messages": {
+    /**
+     * Configures handling of diagnostic messages reported by the TypeScript compiler engine while analyzing
+     * the input .d.ts files.
+     *
+     * TypeScript message identifiers start with "TS" followed by an integer.  For example: "TS2551"
+     *
+     * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+     */
+    "compilerMessageReporting": {
+      /**
+       * Configures the default routing for messages that don't match an explicit rule in this table.
+       */
+      "default": {
+        /**
+         * Specifies whether the message should be written to the the tool's output log.  Note that
+         * the "addToApiReportFile" property may supersede this option.
+         *
+         * Possible values: "error", "warning", "none"
+         *
+         * Errors cause the build to fail and return a nonzero exit code.  Warnings cause a production build fail
+         * and return a nonzero exit code.  For a non-production build (e.g. when "api-extractor run" includes
+         * the "--local" option), the warning is displayed but the build will not fail.
+         *
+         * DEFAULT VALUE: "warning"
+         */
+        "logLevel": "warning"
+
+        /**
+         * When addToApiReportFile is true:  If API Extractor is configured to write an API report file (.api.md),
+         * then the message will be written inside that file; otherwise, the message is instead logged according to
+         * the "logLevel" option.
+         *
+         * DEFAULT VALUE: false
+         */
+        // "addToApiReportFile": false
+      }
+
+      // "TS2551": {
+      //   "logLevel": "warning",
+      //   "addToApiReportFile": true
+      // },
+      //
+      // . . .
+    },
+
+    /**
+     * Configures handling of messages reported by API Extractor during its analysis.
+     *
+     * API Extractor message identifiers start with "ae-".  For example: "ae-extra-release-tag"
+     *
+     * DEFAULT VALUE: See api-extractor-defaults.json for the complete table of extractorMessageReporting mappings
+     */
+    "extractorMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+        // "addToApiReportFile": false
+      },
+      "ae-forgotten-export": {
+        "logLevel": "none",
+        "addToApiReportFile": false
+      }
+      //
+      // . . .
+    },
+
+    /**
+     * Configures handling of messages reported by the TSDoc parser when analyzing code comments.
+     *
+     * TSDoc message identifiers start with "tsdoc-".  For example: "tsdoc-link-tag-unescaped-text"
+     *
+     * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+     */
+    "tsdocMessageReporting": {
+      "default": {
+        "logLevel": "none"
+        // "addToApiReportFile": false
+      }
+
+      // "tsdoc-link-tag-unescaped-text": {
+      //   "logLevel": "warning",
+      //   "addToApiReportFile": true
+      // },
+      //
+      // . . .
+    }
+  }
+}
diff --git a/packages/toolkit/src/entities/models.ts b/packages/toolkit/src/entities/models.ts
index 76de9872..efe06450 100644
--- a/packages/toolkit/src/entities/models.ts
+++ b/packages/toolkit/src/entities/models.ts
@@ -1,198 +1,198 @@
-import type { UncheckedIndexedAccess } from '../uncheckedindexed'
-import type { Draft } from 'immer'
-import type { PayloadAction } from '../createAction'
-import type { GetSelectorsOptions } from './state_selectors'
-import type { CastAny, Id as Compute } from '../tsHelpers'
-
-/**
- * @public
- */
-export type EntityId = number | string
-
-/**
- * @public
- */
-export type Comparer<T> = (a: T, b: T) => number
-
-/**
- * @public
- */
-export type IdSelector<T, Id extends EntityId> = (model: T) => Id
-
-/**
- * @public
- */
-export type Update<T, Id extends EntityId> = { id: Id; changes: Partial<T> }
-
-/**
- * @public
- */
-export interface EntityState<T, Id extends EntityId> {
-  ids: Id[]
-  entities: Record<Id, T>
-}
-
-/**
- * @public
- */
-export interface EntityAdapterOptions<T, Id extends EntityId> {
-  selectId?: IdSelector<T, Id>
-  sortComparer?: false | Comparer<T>
-}
-
-export type PreventAny<S, T, Id extends EntityId> = CastAny<
-  S,
-  EntityState<T, Id>
->
-
-export type DraftableEntityState<T, Id extends EntityId> =
-  | EntityState<T, Id>
-  | Draft<EntityState<T, Id>>
-
-/**
- * @public
- */
-export interface EntityStateAdapter<T, Id extends EntityId> {
-  addOne<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    entity: T,
-  ): S
-  addOne<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    action: PayloadAction<T>,
-  ): S
-
-  addMany<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    entities: readonly T[] | Record<Id, T>,
-  ): S
-  addMany<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    entities: PayloadAction<readonly T[] | Record<Id, T>>,
-  ): S
-
-  setOne<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    entity: T,
-  ): S
-  setOne<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    action: PayloadAction<T>,
-  ): S
-  setMany<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    entities: readonly T[] | Record<Id, T>,
-  ): S
-  setMany<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    entities: PayloadAction<readonly T[] | Record<Id, T>>,
-  ): S
-  setAll<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    entities: readonly T[] | Record<Id, T>,
-  ): S
-  setAll<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    entities: PayloadAction<readonly T[] | Record<Id, T>>,
-  ): S
-
-  removeOne<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    key: Id,
-  ): S
-  removeOne<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    key: PayloadAction<Id>,
-  ): S
-
-  removeMany<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    keys: readonly Id[],
-  ): S
-  removeMany<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    keys: PayloadAction<readonly Id[]>,
-  ): S
-
-  removeAll<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-  ): S
-
-  updateOne<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    update: Update<T, Id>,
-  ): S
-  updateOne<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    update: PayloadAction<Update<T, Id>>,
-  ): S
-
-  updateMany<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    updates: ReadonlyArray<Update<T, Id>>,
-  ): S
-  updateMany<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    updates: PayloadAction<ReadonlyArray<Update<T, Id>>>,
-  ): S
-
-  upsertOne<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    entity: T,
-  ): S
-  upsertOne<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    entity: PayloadAction<T>,
-  ): S
-
-  upsertMany<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    entities: readonly T[] | Record<Id, T>,
-  ): S
-  upsertMany<S extends DraftableEntityState<T, Id>>(
-    state: PreventAny<S, T, Id>,
-    entities: PayloadAction<readonly T[] | Record<Id, T>>,
-  ): S
-}
-
-/**
- * @public
- */
-export interface EntitySelectors<T, V, Id extends EntityId> {
-  selectIds: (state: V) => Id[]
-  selectEntities: (state: V) => Record<Id, T>
-  selectAll: (state: V) => T[]
-  selectTotal: (state: V) => number
-  selectById: (state: V, id: Id) => Compute<UncheckedIndexedAccess<T>>
-}
-
-/**
- * @public
- */
-export interface EntityStateFactory<T, Id extends EntityId> {
-  getInitialState(
-    state?: undefined,
-    entities?: Record<Id, T> | readonly T[],
-  ): EntityState<T, Id>
-  getInitialState<S extends object>(
-    state: S,
-    entities?: Record<Id, T> | readonly T[],
-  ): EntityState<T, Id> & S
-}
-
-/**
- * @public
- */
-export interface EntityAdapter<T, Id extends EntityId>
-  extends EntityStateAdapter<T, Id>,
-    EntityStateFactory<T, Id>,
-    Required<EntityAdapterOptions<T, Id>> {
-  getSelectors(
-    selectState?: undefined,
-    options?: GetSelectorsOptions,
-  ): EntitySelectors<T, EntityState<T, Id>, Id>
-  getSelectors<V>(
-    selectState: (state: V) => EntityState<T, Id>,
-    options?: GetSelectorsOptions,
-  ): EntitySelectors<T, V, Id>
-}
+import type { UncheckedIndexedAccess } from '../uncheckedindexed'
+import type { Draft } from 'immer'
+import type { PayloadAction } from '../createAction'
+import type { GetSelectorsOptions } from './state_selectors'
+import type { CastAny, Id as Compute } from '../tsHelpers'
+
+/**
+ * @public
+ */
+export type EntityId = number | string
+
+/**
+ * @public
+ */
+export type Comparer<T> = (a: T, b: T) => number
+
+/**
+ * @public
+ */
+export type IdSelector<T, Id extends EntityId> = (model: T) => Id
+
+/**
+ * @public
+ */
+export type Update<T, Id extends EntityId> = { id: Id; changes: Partial<T> }
+
+/**
+ * @public
+ */
+export interface EntityState<T, Id extends EntityId> {
+  ids: Id[]
+  entities: Record<Id, T>
+}
+
+/**
+ * @public
+ */
+export interface EntityAdapterOptions<T, Id extends EntityId> {
+  selectId?: IdSelector<T, Id>
+  sortComparer?: false | Comparer<T>
+}
+
+export type PreventAny<S, T, Id extends EntityId> = CastAny<
+  S,
+  EntityState<T, Id>
+>
+
+export type DraftableEntityState<T, Id extends EntityId> =
+  | EntityState<T, Id>
+  | Draft<EntityState<T, Id>>
+
+/**
+ * @public
+ */
+export interface EntityStateAdapter<T, Id extends EntityId> {
+  addOne<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    entity: T,
+  ): S
+  addOne<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    action: PayloadAction<T>,
+  ): S
+
+  addMany<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    entities: readonly T[] | Record<Id, T>,
+  ): S
+  addMany<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    entities: PayloadAction<readonly T[] | Record<Id, T>>,
+  ): S
+
+  setOne<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    entity: T,
+  ): S
+  setOne<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    action: PayloadAction<T>,
+  ): S
+  setMany<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    entities: readonly T[] | Record<Id, T>,
+  ): S
+  setMany<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    entities: PayloadAction<readonly T[] | Record<Id, T>>,
+  ): S
+  setAll<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    entities: readonly T[] | Record<Id, T>,
+  ): S
+  setAll<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    entities: PayloadAction<readonly T[] | Record<Id, T>>,
+  ): S
+
+  removeOne<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    key: Id,
+  ): S
+  removeOne<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    key: PayloadAction<Id>,
+  ): S
+
+  removeMany<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    keys: readonly Id[],
+  ): S
+  removeMany<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    keys: PayloadAction<readonly Id[]>,
+  ): S
+
+  removeAll<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+  ): S
+
+  updateOne<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    update: Update<T, Id>,
+  ): S
+  updateOne<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    update: PayloadAction<Update<T, Id>>,
+  ): S
+
+  updateMany<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    updates: ReadonlyArray<Update<T, Id>>,
+  ): S
+  updateMany<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    updates: PayloadAction<ReadonlyArray<Update<T, Id>>>,
+  ): S
+
+  upsertOne<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    entity: T,
+  ): S
+  upsertOne<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    entity: PayloadAction<T>,
+  ): S
+
+  upsertMany<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    entities: readonly T[] | Record<Id, T>,
+  ): S
+  upsertMany<S extends DraftableEntityState<T, Id>>(
+    state: PreventAny<S, T, Id>,
+    entities: PayloadAction<readonly T[] | Record<Id, T>>,
+  ): S
+}
+
+/**
+ * @public
+ */
+export interface EntitySelectors<T, V, Id extends EntityId> {
+  selectIds: (state: V) => Id[]
+  selectEntities: (state: V) => Record<Id, T>
+  selectAll: (state: V) => T[]
+  selectTotal: (state: V) => number
+  selectById: (state: V, id: Id) => Compute<UncheckedIndexedAccess<T>>
+}
+
+/**
+ * @public
+ */
+export interface EntityStateFactory<T, Id extends EntityId> {
+  getInitialState(
+    state?: undefined,
+    entities?: Record<Id, T> | readonly T[],
+  ): EntityState<T, Id>
+  getInitialState<S extends object>(
+    state: S,
+    entities?: Record<Id, T> | readonly T[],
+  ): EntityState<T, Id> & S
+}
+
+/**
+ * @public
+ */
+export interface EntityAdapter<T, Id extends EntityId>
+  extends EntityStateAdapter<T, Id>,
+    EntityStateFactory<T, Id>,
+    Required<EntityAdapterOptions<T, Id>> {
+  getSelectors(
+    selectState?: undefined,
+    options?: GetSelectorsOptions,
+  ): EntitySelectors<T, EntityState<T, Id>, Id>
+  getSelectors<V>(
+    selectState: (state: V) => EntityState<T, Id>,
+    options?: GetSelectorsOptions,
+  ): EntitySelectors<T, V, Id>
+}
diff --git a/packages/toolkit/src/entities/sorted_state_adapter.ts b/packages/toolkit/src/entities/sorted_state_adapter.ts
index 1a2af5c5..dc730145 100644
--- a/packages/toolkit/src/entities/sorted_state_adapter.ts
+++ b/packages/toolkit/src/entities/sorted_state_adapter.ts
@@ -1,168 +1,168 @@
-import type {
-  IdSelector,
-  Comparer,
-  EntityStateAdapter,
-  Update,
-  EntityId,
-  DraftableEntityState,
-} from './models'
-import { createStateOperator } from './state_adapter'
-import { createUnsortedStateAdapter } from './unsorted_state_adapter'
-import {
-  selectIdValue,
-  ensureEntitiesArray,
-  splitAddedUpdatedEntities,
-} from './utils'
-
-export function createSortedStateAdapter<T, Id extends EntityId>(
-  selectId: IdSelector<T, Id>,
-  sort: Comparer<T>,
-): EntityStateAdapter<T, Id> {
-  type R = DraftableEntityState<T, Id>
-
-  const { removeOne, removeMany, removeAll } =
-    createUnsortedStateAdapter(selectId)
-
-  function addOneMutably(entity: T, state: R): void {
-    return addManyMutably([entity], state)
-  }
-
-  function addManyMutably(
-    newEntities: readonly T[] | Record<Id, T>,
-    state: R,
-  ): void {
-    newEntities = ensureEntitiesArray(newEntities)
-
-    const models = newEntities.filter(
-      (model) => !(selectIdValue(model, selectId) in state.entities),
-    )
-
-    if (models.length !== 0) {
-      merge(models, state)
-    }
-  }
-
-  function setOneMutably(entity: T, state: R): void {
-    return setManyMutably([entity], state)
-  }
-
-  function setManyMutably(
-    newEntities: readonly T[] | Record<Id, T>,
-    state: R,
-  ): void {
-    newEntities = ensureEntitiesArray(newEntities)
-    if (newEntities.length !== 0) {
-      merge(newEntities, state)
-    }
-  }
-
-  function setAllMutably(
-    newEntities: readonly T[] | Record<Id, T>,
-    state: R,
-  ): void {
-    newEntities = ensureEntitiesArray(newEntities)
-    state.entities = {} as Record<Id, T>
-    state.ids = []
-
-    addManyMutably(newEntities, state)
-  }
-
-  function updateOneMutably(update: Update<T, Id>, state: R): void {
-    return updateManyMutably([update], state)
-  }
-
-  function updateManyMutably(
-    updates: ReadonlyArray<Update<T, Id>>,
-    state: R,
-  ): void {
-    let appliedUpdates = false
-
-    for (let update of updates) {
-      const entity: T | undefined = (state.entities as Record<Id, T>)[update.id]
-      if (!entity) {
-        continue
-      }
-
-      appliedUpdates = true
-
-      Object.assign(entity, update.changes)
-      const newId = selectId(entity)
-      if (update.id !== newId) {
-        delete (state.entities as Record<Id, T>)[update.id]
-        ;(state.entities as Record<Id, T>)[newId] = entity
-      }
-    }
-
-    if (appliedUpdates) {
-      resortEntities(state)
-    }
-  }
-
-  function upsertOneMutably(entity: T, state: R): void {
-    return upsertManyMutably([entity], state)
-  }
-
-  function upsertManyMutably(
-    newEntities: readonly T[] | Record<Id, T>,
-    state: R,
-  ): void {
-    const [added, updated] = splitAddedUpdatedEntities<T, Id>(
-      newEntities,
-      selectId,
-      state,
-    )
-
-    updateManyMutably(updated, state)
-    addManyMutably(added, state)
-  }
-
-  function areArraysEqual(a: readonly unknown[], b: readonly unknown[]) {
-    if (a.length !== b.length) {
-      return false
-    }
-
-    for (let i = 0; i < a.length && i < b.length; i++) {
-      if (a[i] === b[i]) {
-        continue
-      }
-      return false
-    }
-    return true
-  }
-
-  function merge(models: readonly T[], state: R): void {
-    // Insert/overwrite all new/updated
-    models.forEach((model) => {
-      ;(state.entities as Record<Id, T>)[selectId(model)] = model
-    })
-
-    resortEntities(state)
-  }
-
-  function resortEntities(state: R) {
-    const allEntities = Object.values(state.entities) as T[]
-    allEntities.sort(sort)
-
-    const newSortedIds = allEntities.map(selectId)
-    const { ids } = state
-
-    if (!areArraysEqual(ids, newSortedIds)) {
-      state.ids = newSortedIds
-    }
-  }
-
-  return {
-    removeOne,
-    removeMany,
-    removeAll,
-    addOne: createStateOperator(addOneMutably),
-    updateOne: createStateOperator(updateOneMutably),
-    upsertOne: createStateOperator(upsertOneMutably),
-    setOne: createStateOperator(setOneMutably),
-    setMany: createStateOperator(setManyMutably),
-    setAll: createStateOperator(setAllMutably),
-    addMany: createStateOperator(addManyMutably),
-    updateMany: createStateOperator(updateManyMutably),
-    upsertMany: createStateOperator(upsertManyMutably),
-  }
-}
+import type {
+  IdSelector,
+  Comparer,
+  EntityStateAdapter,
+  Update,
+  EntityId,
+  DraftableEntityState,
+} from './models'
+import { createStateOperator } from './state_adapter'
+import { createUnsortedStateAdapter } from './unsorted_state_adapter'
+import {
+  selectIdValue,
+  ensureEntitiesArray,
+  splitAddedUpdatedEntities,
+} from './utils'
+
+export function createSortedStateAdapter<T, Id extends EntityId>(
+  selectId: IdSelector<T, Id>,
+  sort: Comparer<T>,
+): EntityStateAdapter<T, Id> {
+  type R = DraftableEntityState<T, Id>
+
+  const { removeOne, removeMany, removeAll } =
+    createUnsortedStateAdapter(selectId)
+
+  function addOneMutably(entity: T, state: R): void {
+    return addManyMutably([entity], state)
+  }
+
+  function addManyMutably(
+    newEntities: readonly T[] | Record<Id, T>,
+    state: R,
+  ): void {
+    newEntities = ensureEntitiesArray(newEntities)
+
+    const models = newEntities.filter(
+      (model) => !(selectIdValue(model, selectId) in state.entities),
+    )
+
+    if (models.length !== 0) {
+      merge(models, state)
+    }
+  }
+
+  function setOneMutably(entity: T, state: R): void {
+    return setManyMutably([entity], state)
+  }
+
+  function setManyMutably(
+    newEntities: readonly T[] | Record<Id, T>,
+    state: R,
+  ): void {
+    newEntities = ensureEntitiesArray(newEntities)
+    if (newEntities.length !== 0) {
+      merge(newEntities, state)
+    }
+  }
+
+  function setAllMutably(
+    newEntities: readonly T[] | Record<Id, T>,
+    state: R,
+  ): void {
+    newEntities = ensureEntitiesArray(newEntities)
+    state.entities = {} as Record<Id, T>
+    state.ids = []
+
+    addManyMutably(newEntities, state)
+  }
+
+  function updateOneMutably(update: Update<T, Id>, state: R): void {
+    return updateManyMutably([update], state)
+  }
+
+  function updateManyMutably(
+    updates: ReadonlyArray<Update<T, Id>>,
+    state: R,
+  ): void {
+    let appliedUpdates = false
+
+    for (let update of updates) {
+      const entity: T | undefined = (state.entities as Record<Id, T>)[update.id]
+      if (!entity) {
+        continue
+      }
+
+      appliedUpdates = true
+
+      Object.assign(entity, update.changes)
+      const newId = selectId(entity)
+      if (update.id !== newId) {
+        delete (state.entities as Record<Id, T>)[update.id]
+        ;(state.entities as Record<Id, T>)[newId] = entity
+      }
+    }
+
+    if (appliedUpdates) {
+      resortEntities(state)
+    }
+  }
+
+  function upsertOneMutably(entity: T, state: R): void {
+    return upsertManyMutably([entity], state)
+  }
+
+  function upsertManyMutably(
+    newEntities: readonly T[] | Record<Id, T>,
+    state: R,
+  ): void {
+    const [added, updated] = splitAddedUpdatedEntities<T, Id>(
+      newEntities,
+      selectId,
+      state,
+    )
+
+    updateManyMutably(updated, state)
+    addManyMutably(added, state)
+  }
+
+  function areArraysEqual(a: readonly unknown[], b: readonly unknown[]) {
+    if (a.length !== b.length) {
+      return false
+    }
+
+    for (let i = 0; i < a.length && i < b.length; i++) {
+      if (a[i] === b[i]) {
+        continue
+      }
+      return false
+    }
+    return true
+  }
+
+  function merge(models: readonly T[], state: R): void {
+    // Insert/overwrite all new/updated
+    models.forEach((model) => {
+      ;(state.entities as Record<Id, T>)[selectId(model)] = model
+    })
+
+    resortEntities(state)
+  }
+
+  function resortEntities(state: R) {
+    const allEntities = Object.values(state.entities) as T[]
+    allEntities.sort(sort)
+
+    const newSortedIds = allEntities.map(selectId)
+    const { ids } = state
+
+    if (!areArraysEqual(ids, newSortedIds)) {
+      state.ids = newSortedIds
+    }
+  }
+
+  return {
+    removeOne,
+    removeMany,
+    removeAll,
+    addOne: createStateOperator(addOneMutably),
+    updateOne: createStateOperator(updateOneMutably),
+    upsertOne: createStateOperator(upsertOneMutably),
+    setOne: createStateOperator(setOneMutably),
+    setMany: createStateOperator(setManyMutably),
+    setAll: createStateOperator(setAllMutably),
+    addMany: createStateOperator(addManyMutably),
+    updateMany: createStateOperator(updateManyMutably),
+    upsertMany: createStateOperator(upsertManyMutably),
+  }
+}
diff --git a/packages/toolkit/src/entities/tests/entity_slice_enhancer.test.ts b/packages/toolkit/src/entities/tests/entity_slice_enhancer.test.ts
index 0842a205..f6b0c7bd 100644
--- a/packages/toolkit/src/entities/tests/entity_slice_enhancer.test.ts
+++ b/packages/toolkit/src/entities/tests/entity_slice_enhancer.test.ts
@@ -1,59 +1,59 @@
-import { createEntityAdapter, createSlice } from '../..'
-import type {
-  PayloadAction,
-  Slice,
-  SliceCaseReducers,
-  UnknownAction,
-} from '../..'
-import type { EntityId, EntityState, IdSelector } from '../models'
-import type { BookModel } from './fixtures/book'
-
-describe('Entity Slice Enhancer', () => {
-  let slice: Slice<EntityState<BookModel, BookModel['id']>>
-
-  beforeEach(() => {
-    const indieSlice = entitySliceEnhancer({
-      name: 'book',
-      selectId: (book: BookModel) => book.id,
-    })
-    slice = indieSlice
-  })
-
-  it('exposes oneAdded', () => {
-    const book = {
-      id: '0',
-      title: 'Der Steppenwolf',
-      author: 'Herman Hesse',
-    }
-    const action = slice.actions.oneAdded(book)
-    const oneAdded = slice.reducer(undefined, action as UnknownAction)
-    expect(oneAdded.entities['0']).toBe(book)
-  })
-})
-
-interface EntitySliceArgs<T, Id extends EntityId> {
-  name: string
-  selectId: IdSelector<T, Id>
-  modelReducer?: SliceCaseReducers<T>
-}
-
-function entitySliceEnhancer<T, Id extends EntityId>({
-  name,
-  selectId,
-  modelReducer,
-}: EntitySliceArgs<T, Id>) {
-  const modelAdapter = createEntityAdapter({
-    selectId,
-  })
-
-  return createSlice({
-    name,
-    initialState: modelAdapter.getInitialState(),
-    reducers: {
-      oneAdded(state, action: PayloadAction<T>) {
-        modelAdapter.addOne(state, action.payload)
-      },
-      ...modelReducer,
-    },
-  })
-}
+import { createEntityAdapter, createSlice } from '../..'
+import type {
+  PayloadAction,
+  Slice,
+  SliceCaseReducers,
+  UnknownAction,
+} from '../..'
+import type { EntityId, EntityState, IdSelector } from '../models'
+import type { BookModel } from './fixtures/book'
+
+describe('Entity Slice Enhancer', () => {
+  let slice: Slice<EntityState<BookModel, BookModel['id']>>
+
+  beforeEach(() => {
+    const indieSlice = entitySliceEnhancer({
+      name: 'book',
+      selectId: (book: BookModel) => book.id,
+    })
+    slice = indieSlice
+  })
+
+  it('exposes oneAdded', () => {
+    const book = {
+      id: '0',
+      title: 'Der Steppenwolf',
+      author: 'Herman Hesse',
+    }
+    const action = slice.actions.oneAdded(book)
+    const oneAdded = slice.reducer(undefined, action as UnknownAction)
+    expect(oneAdded.entities['0']).toBe(book)
+  })
+})
+
+interface EntitySliceArgs<T, Id extends EntityId> {
+  name: string
+  selectId: IdSelector<T, Id>
+  modelReducer?: SliceCaseReducers<T>
+}
+
+function entitySliceEnhancer<T, Id extends EntityId>({
+  name,
+  selectId,
+  modelReducer,
+}: EntitySliceArgs<T, Id>) {
+  const modelAdapter = createEntityAdapter({
+    selectId,
+  })
+
+  return createSlice({
+    name,
+    initialState: modelAdapter.getInitialState(),
+    reducers: {
+      oneAdded(state, action: PayloadAction<T>) {
+        modelAdapter.addOne(state, action.payload)
+      },
+      ...modelReducer,
+    },
+  })
+}
diff --git a/website/README.md b/website/README.md
index 7923efb9..71505291 100644
--- a/website/README.md
+++ b/website/README.md
@@ -1,33 +1,33 @@
-# Website
-
-This website is built using Docusaurus 2, a modern static website generator.
-
-### Installation
-
-```
-$ yarn
-```
-
-### Local Development
-
-```
-$ yarn start
-```
-
-This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
-
-### Build
-
-```
-$ yarn build
-```
-
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
-
-### Deployment
-
-```
-$ GIT_USER=<Your GitHub username> USE_SSH=1 yarn deploy
-```
-
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
+# Website
+
+This website is built using Docusaurus 2, a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=1 yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
diff --git a/website/sidebars.json b/website/sidebars.json
index b3f2c944..ef79ee1a 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -1,150 +1,150 @@
-{
-  "docs": [
-    {
-      "type": "category",
-      "label": "Introduction",
-      "collapsed": false,
-      "items": [
-        "introduction/getting-started",
-        "introduction/why-rtk-is-redux-today"
-      ]
-    },
-
-    {
-      "type": "category",
-      "label": "Tutorials",
-      "collapsed": false,
-      "items": [
-        "tutorials/tutorials-overview",
-        "tutorials/quick-start",
-        "tutorials/typescript",
-        "tutorials/rtk-query"
-      ]
-    },
-    {
-      "type": "category",
-      "label": "Using Redux Toolkit",
-      "collapsed": false,
-      "items": [
-        {
-          "type": "category",
-          "label": "Migrations",
-          "items": ["usage/migrating-to-modern-redux", "usage/migrating-rtk-2"]
-        },
-        "usage/usage-guide",
-        "usage/usage-with-typescript",
-        "usage/immer-reducers",
-        "usage/nextjs"
-      ]
-    },
-    {
-      "type": "category",
-      "label": "API Reference",
-      "collapsed": true,
-      "items": [
-        {
-          "type": "category",
-          "label": "Store Setup",
-          "collapsed": false,
-          "items": [
-            "api/configureStore",
-            "api/getDefaultMiddleware",
-            "api/immutabilityMiddleware",
-            "api/serializabilityMiddleware",
-            "api/actionCreatorMiddleware",
-            "api/createListenerMiddleware",
-            "api/createDynamicMiddleware",
-            "api/getDefaultEnhancers",
-            "api/autoBatchEnhancer"
-          ]
-        },
-        {
-          "type": "category",
-          "label": "Reducers and Actions",
-          "collapsed": false,
-          "items": [
-            "api/createReducer",
-            "api/createAction",
-            "api/createSlice",
-            "api/createAsyncThunk",
-            "api/createEntityAdapter",
-            "api/combineSlices"
-          ]
-        },
-        {
-          "type": "category",
-          "label": "Other",
-          "collapsed": false,
-          "items": [
-            "api/createSelector",
-            "api/matching-utilities",
-            "api/other-exports",
-            "api/codemods",
-            { "type": "link", "label": "Error Messages", "href": "/errors" }
-          ]
-        }
-      ]
-    },
-    {
-      "type": "category",
-      "label": "RTK Query",
-      "collapsed": false,
-      "items": [
-        "rtk-query/overview",
-        "rtk-query/comparison",
-        "rtk-query/usage/examples",
-        "rtk-query/usage-with-typescript",
-        {
-          "type": "category",
-          "label": "Using RTK Query",
-          "collapsed": true,
-          "items": [
-            "rtk-query/usage/queries",
-            "rtk-query/usage/mutations",
-            "rtk-query/usage/cache-behavior",
-            "rtk-query/usage/automated-refetching",
-            "rtk-query/usage/manual-cache-updates",
-            "rtk-query/usage/conditional-fetching",
-            "rtk-query/usage/error-handling",
-            "rtk-query/usage/pagination",
-            "rtk-query/usage/prefetching",
-            "rtk-query/usage/polling",
-            "rtk-query/usage/streaming-updates",
-            "rtk-query/usage/code-splitting",
-            "rtk-query/usage/code-generation",
-            "rtk-query/usage/server-side-rendering",
-            "rtk-query/usage/persistence-and-rehydration",
-            "rtk-query/usage/customizing-create-api",
-            "rtk-query/usage/customizing-queries",
-            "rtk-query/usage/usage-without-react-hooks",
-            "rtk-query/usage/migrating-to-rtk-query"
-          ]
-        },
-        {
-          "type": "category",
-          "label": "API Reference",
-          "collapsed": true,
-          "items": [
-            "rtk-query/api/createApi",
-            "rtk-query/api/fetchBaseQuery",
-            "rtk-query/api/ApiProvider",
-            "rtk-query/api/setupListeners",
-            {
-              "type": "category",
-              "label": "Generated API Slices",
-              "collapsed": false,
-              "items": [
-                "rtk-query/api/created-api/overview",
-                "rtk-query/api/created-api/redux-integration",
-                "rtk-query/api/created-api/endpoints",
-                "rtk-query/api/created-api/code-splitting",
-                "rtk-query/api/created-api/api-slice-utils",
-                "rtk-query/api/created-api/hooks"
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
+{
+  "docs": [
+    {
+      "type": "category",
+      "label": "Introduction",
+      "collapsed": false,
+      "items": [
+        "introduction/getting-started",
+        "introduction/why-rtk-is-redux-today"
+      ]
+    },
+
+    {
+      "type": "category",
+      "label": "Tutorials",
+      "collapsed": false,
+      "items": [
+        "tutorials/tutorials-overview",
+        "tutorials/quick-start",
+        "tutorials/typescript",
+        "tutorials/rtk-query"
+      ]
+    },
+    {
+      "type": "category",
+      "label": "Using Redux Toolkit",
+      "collapsed": false,
+      "items": [
+        {
+          "type": "category",
+          "label": "Migrations",
+          "items": ["usage/migrating-to-modern-redux", "usage/migrating-rtk-2"]
+        },
+        "usage/usage-guide",
+        "usage/usage-with-typescript",
+        "usage/immer-reducers",
+        "usage/nextjs"
+      ]
+    },
+    {
+      "type": "category",
+      "label": "API Reference",
+      "collapsed": true,
+      "items": [
+        {
+          "type": "category",
+          "label": "Store Setup",
+          "collapsed": false,
+          "items": [
+            "api/configureStore",
+            "api/getDefaultMiddleware",
+            "api/immutabilityMiddleware",
+            "api/serializabilityMiddleware",
+            "api/actionCreatorMiddleware",
+            "api/createListenerMiddleware",
+            "api/createDynamicMiddleware",
+            "api/getDefaultEnhancers",
+            "api/autoBatchEnhancer"
+          ]
+        },
+        {
+          "type": "category",
+          "label": "Reducers and Actions",
+          "collapsed": false,
+          "items": [
+            "api/createReducer",
+            "api/createAction",
+            "api/createSlice",
+            "api/createAsyncThunk",
+            "api/createEntityAdapter",
+            "api/combineSlices"
+          ]
+        },
+        {
+          "type": "category",
+          "label": "Other",
+          "collapsed": false,
+          "items": [
+            "api/createSelector",
+            "api/matching-utilities",
+            "api/other-exports",
+            "api/codemods",
+            { "type": "link", "label": "Error Messages", "href": "/errors" }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "category",
+      "label": "RTK Query",
+      "collapsed": false,
+      "items": [
+        "rtk-query/overview",
+        "rtk-query/comparison",
+        "rtk-query/usage/examples",
+        "rtk-query/usage-with-typescript",
+        {
+          "type": "category",
+          "label": "Using RTK Query",
+          "collapsed": true,
+          "items": [
+            "rtk-query/usage/queries",
+            "rtk-query/usage/mutations",
+            "rtk-query/usage/cache-behavior",
+            "rtk-query/usage/automated-refetching",
+            "rtk-query/usage/manual-cache-updates",
+            "rtk-query/usage/conditional-fetching",
+            "rtk-query/usage/error-handling",
+            "rtk-query/usage/pagination",
+            "rtk-query/usage/prefetching",
+            "rtk-query/usage/polling",
+            "rtk-query/usage/streaming-updates",
+            "rtk-query/usage/code-splitting",
+            "rtk-query/usage/code-generation",
+            "rtk-query/usage/server-side-rendering",
+            "rtk-query/usage/persistence-and-rehydration",
+            "rtk-query/usage/customizing-create-api",
+            "rtk-query/usage/customizing-queries",
+            "rtk-query/usage/usage-without-react-hooks",
+            "rtk-query/usage/migrating-to-rtk-query"
+          ]
+        },
+        {
+          "type": "category",
+          "label": "API Reference",
+          "collapsed": true,
+          "items": [
+            "rtk-query/api/createApi",
+            "rtk-query/api/fetchBaseQuery",
+            "rtk-query/api/ApiProvider",
+            "rtk-query/api/setupListeners",
+            {
+              "type": "category",
+              "label": "Generated API Slices",
+              "collapsed": false,
+              "items": [
+                "rtk-query/api/created-api/overview",
+                "rtk-query/api/created-api/redux-integration",
+                "rtk-query/api/created-api/endpoints",
+                "rtk-query/api/created-api/code-splitting",
+                "rtk-query/api/created-api/api-slice-utils",
+                "rtk-query/api/created-api/hooks"
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/website/src/js/monokaiTheme.js b/website/src/js/monokaiTheme.js
index 94e5cb45..bd3eebd1 100644
--- a/website/src/js/monokaiTheme.js
+++ b/website/src/js/monokaiTheme.js
@@ -1,62 +1,62 @@
-module.exports = {
-  plain: {
-    color: '#f8f8f2',
-    backgroundColor: '#272822',
-  },
-  styles: [
-    {
-      types: ['comment', 'prolog', 'doctype', 'cdata'],
-      style: {
-        color: '#778090',
-      },
-    },
-    {
-      types: ['punctuation'],
-      style: {
-        color: '#F8F8F2',
-      },
-    },
-    {
-      types: ['property', 'tag', 'constant', 'symbol', 'deleted'],
-      style: {
-        color: '#F92672',
-      },
-    },
-    {
-      types: ['boolean', 'number'],
-      style: {
-        color: '#AE81FF',
-      },
-    },
-    {
-      types: ['selector', 'attr-name', 'string', 'char', 'builtin', 'inserted'],
-      style: {
-        color: '#a6e22e',
-      },
-    },
-    {
-      types: ['operator', 'entity', 'url', 'variable'],
-      style: {
-        color: '#F8F8F2',
-      },
-    },
-    {
-      types: ['atrule', 'attr-value', 'function'],
-      style: {
-        color: '#E6D874',
-      },
-    },
-    {
-      types: ['keyword'],
-      style: {
-        color: '#F92672',
-      },
-    },
-    {
-      types: ['regex', 'important'],
-      style: {
-        color: '#FD971F',
-      },
-    },
-  ],
-}
+module.exports = {
+  plain: {
+    color: '#f8f8f2',
+    backgroundColor: '#272822',
+  },
+  styles: [
+    {
+      types: ['comment', 'prolog', 'doctype', 'cdata'],
+      style: {
+        color: '#778090',
+      },
+    },
+    {
+      types: ['punctuation'],
+      style: {
+        color: '#F8F8F2',
+      },
+    },
+    {
+      types: ['property', 'tag', 'constant', 'symbol', 'deleted'],
+      style: {
+        color: '#F92672',
+      },
+    },
+    {
+      types: ['boolean', 'number'],
+      style: {
+        color: '#AE81FF',
+      },
+    },
+    {
+      types: ['selector', 'attr-name', 'string', 'char', 'builtin', 'inserted'],
+      style: {
+        color: '#a6e22e',
+      },
+    },
+    {
+      types: ['operator', 'entity', 'url', 'variable'],
+      style: {
+        color: '#F8F8F2',
+      },
+    },
+    {
+      types: ['atrule', 'attr-value', 'function'],
+      style: {
+        color: '#E6D874',
+      },
+    },
+    {
+      types: ['keyword'],
+      style: {
+        color: '#F92672',
+      },
+    },
+    {
+      types: ['regex', 'important'],
+      style: {
+        color: '#FD971F',
+      },
+    },
+  ],
+}
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 82f02a91..f7b43f53 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -1,213 +1,213 @@
-import React from 'react'
-import classnames from 'classnames'
-import Layout from '@theme/Layout'
-import Link from '@docusaurus/Link'
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
-import useBaseUrl from '@docusaurus/useBaseUrl'
-import styles from './styles.module.css'
-
-const features = [
-  {
-    content: (
-      <p>
-        Includes utilities to simplify common use cases like{' '}
-        <strong>store setup, creating reducers, immutable update logic</strong>,
-        and more.
-      </p>
-    ),
-    image: (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 909.83 1100">
-        <g>
-          <path d="M886.9 557.45a78.28 78.28 0 00-63.4-22.52 80.17 80.17 0 00-88-97.47 82.63 82.63 0 001.84-17.46 82 82 0 00-73.86-81.55l139-139A81.94 81.94 0 10686.63 83.5L412.05 358.08c-18.64 18.64-41.11 31.55-65 37.35-17.91 4.35-36 4.4-50.55.28-14.38-22.37-27.88-40.68-30.8-44.6-29.61-40.41-56.89-81.54-88.7-130.88-32.71-50.66-74.06-72.44-113.46-59.73C53 163.89 43 170.07 32.92 179.38 15.06 195.91-1.28 214.46.08 238.15c1 18.15 11.48 34.43 27.29 59.07 9 13.95 20.09 31.32 31.94 53 7.11 13.05 12.46 26.58 18.13 40.91 2.24 5.68 4.57 11.55 7 17.43 7.36 17.61 16.71 40.94 23.81 65.21 11.72 40 5.36 78.49-1.36 119.2-4.85 29.33-9.86 59.66-8 91.42 2.37 40.18 13.66 80.92 33.55 121.08 18.75 37.87 44.15 73 75.49 104.3 57.84 57.84 129 95.64 200.5 106.42a269.83 269.83 0 0040.28 3.1 225.74 225.74 0 0059.29-7.66c32.34-8.77 60.2-24.68 82.8-47.28L820.22 735l66.67-66.67a78.5 78.5 0 00.01-110.88zm-106.08-75.92a50.32 50.32 0 010 71.1l-4.79 4.8-66.67 66.67-4.81 4.81a50.28 50.28 0 11-71.11-71.1l38.16-38.16 38.15-38.15a50.33 50.33 0 0171.07.03zM655.39 368a51.94 51.94 0 0136.73 88.67l-41.77 41.77-38.15 38.18-3.6 3.61a51.94 51.94 0 01-73.46-73.46l35.35-35.36 48.18-48.18A51.61 51.61 0 01655.39 368zm-85.76 575.19c-37.56 37.55-93.2 53-156.68 43.39-65.17-9.84-130.43-44.63-183.77-98q-8-8-15.37-16.27a170.76 170.76 0 0046.47 6.6 151.64 151.64 0 0025.42-2.11c38.61-6.55 69.21-28.22 88.49-62.66A12.48 12.48 0 10352.4 802c-15.68 28-39.53 44.92-70.88 50.24-36.89 6.26-75.64-5.26-99.85-21.42a350.45 350.45 0 01-22.31-38.59c-18.09-36.54-28.35-73.4-30.49-109.54-1.68-28.41 2.85-55.78 7.63-84.76 7-42.24 14.2-85.91.57-132.51-7.52-25.69-17.27-50-24.93-68.36-2.34-5.6-4.61-11.34-6.8-16.89-5.75-14.54-11.7-29.57-19.69-44.24-12.36-22.66-23.82-40.53-33-54.89-12.77-19.91-22-34.3-22.59-44.58-.36-6.35 2.12-15.47 23.26-35 6.79-6.29 13.15-10.33 19.43-12.35 36.16-11.67 67.32 29.3 79 47.45 32.15 49.81 59.73 91.39 89.81 132.41l.07.09c15.41 20.7 56.86 80.6 63.42 108.77a15 15 0 1029.22-6.8c-2.78-11.94-9.63-26.93-18-42.24a144.06 144.06 0 0037.87-4.15c29.22-7.09 56.58-22.75 79.12-45.29l274.58-274.63a51.94 51.94 0 0173.46 73.46L597.45 362l-83.54 83.53a81.91 81.91 0 0075.44 138 80.23 80.23 0 0097.47 88.1A78.28 78.28 0 00709.34 735a78 78 0 0046.11 22.36zm296.06-296.06l-31.32 31.31L799 713.81a48.47 48.47 0 01-68.46 0 48.47 48.47 0 010-68.46l66.71-66.71a48.42 48.42 0 0168.44 68.5z"></path>
-          <path d="M273 168.1a15 15 0 1021.27-21.1l-75-75.78a15 15 0 00-21.32 21.11zM330.86 122.33A15 15 0 00345.48 134a15.31 15.31 0 003.33-.37 15 15 0 0011.31-17.95l-23.58-104a15 15 0 10-29.25 6.63zM413.46 133.22a15 15 0 0019.09-9.22l35-100.73a15 15 0 00-28.34-9.86l-35 100.73a15 15 0 009.25 19.08zM468.54 167.07a15 15 0 0021.09 2.26l83-66.94A15 15 0 10553.82 79l-83.02 67a15 15 0 00-2.26 21.07z"></path>
-        </g>
-      </svg>
-    ),
-    imageAlign: 'top',
-    title: 'Simple',
-  },
-  {
-    content: (
-      <p>
-        Provides <strong>good defaults for store setup out of the box</strong>,
-        and includes{' '}
-        <strong>the most commonly used Redux addons built-in</strong>.
-      </p>
-    ),
-    image: (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 91 91">
-        <path d="M69.203 90.954c1.16 0 2.104-.943 2.104-2.105V66.335c5.709-6.025 8.842-13.879 8.842-22.215 0-2.088-.211-4.174-.604-6.207l-.004-.014c-.01-.061-.014-.123-.025-.182a2.06 2.06 0 00-.221-.594c-.002-.004-.002-.01-.002-.012-1.111-2.002-2.689-3.166-2.865-3.293a2.1 2.1 0 00-2.922.475c-.68.938-.473 2.25.459 2.938.006.004.387.309.824.797-2.381 2.465-9.92 8.479-26.879 8.479-15.66 0-24.072-6.082-26.939-8.662.342-.32.676-.57.844-.68a2.105 2.105 0 00-2.275-3.541c-.219.143-2.182 1.443-3.215 3.404l-.012.02-.004.008c-.006.01-.004.02-.008.029a2.095 2.095 0 00-.188.52 32.727 32.727 0 00-.656 6.516c0 .281.006.561.014.834l-9.473 16.41c-.375.652-.375 1.455 0 2.105s1.072 1.051 1.822 1.051h4.916v9.836c0 5.658 4.602 10.262 10.262 10.262h10.799v4.23a2.106 2.106 0 004.209 0v-4.23h5.137a2.105 2.105 0 000-4.209H22.998a6.061 6.061 0 01-6.055-6.053v-11.94a2.103 2.103 0 00-2.104-2.104h-3.373l7.949-13.771a2.09 2.09 0 00.279-1.104s-.01-2.525.027-3.125c4.336 3.369 13.301 8.402 28.188 8.402 15.385 0 23.857-4.617 27.994-7.988.025.463.035.928.035 1.393 0 7.451-2.885 14.457-8.117 19.752l-4.777 3.215a2.1 2.1 0 00-.572 2.918 2.1 2.1 0 002.92.575l1.707-1.148V88.85a2.104 2.104 0 002.104 2.104z"></path>
-        <path d="M21.506 28.792c0 4.555 3.375 8.344 8.006 9.293 1.773 3.059 5.15 4.988 8.939 4.988 4.018 0 7.406-2.156 9.459-5.012 2.051 2.855 5.441 5.012 9.455 5.012 3.791 0 7.168-1.93 8.939-4.988 4.633-.947 8.008-4.738 8.01-9.293 0-4.66-3.588-8.545-8.314-9.381-.957-4.342-5.072-7.619-9.992-7.619-3.301 0-6.232 1.482-8.098 3.768-1.867-2.285-4.799-3.768-8.1-3.768-4.92.006-9.035 3.279-9.994 7.619-4.722.838-8.31 4.721-8.31 9.381zm34.502-12.791c3.305 0 5.996 2.398 5.996 5.344 0 1.525-.74 2.982-2.029 4.002a2.104 2.104 0 002.603 3.303c1.654-1.303 2.803-3.039 3.32-4.957 2.438.682 4.207 2.709 4.207 5.1-.002 2.752-2.314 5.037-5.381 5.318a8.98 8.98 0 01-.617.027 2.102 2.102 0 00-2.104 2.104c0 .195.025.387.076.568-1.119 1.268-2.854 2.055-4.715 2.055-3.004 0-5.568-2.045-6.711-4.363.705-.496 1.518-1.109 2.195-1.719.943.055 1.592.244 2.404.904a2.097 2.097 0 002.959-.306 2.101 2.101 0 00-.305-2.959 8.077 8.077 0 00-2.404-1.375 48.546 48.546 0 001.434-2.967 2.104 2.104 0 10-3.857-1.682c-.615 1.414-1.881 3.986-2.656 4.883a5.531 5.531 0 01-.41.398v-8.334c.001-2.946 2.688-5.344 5.995-5.344zm-26.09 7.691c.518 1.92 1.668 3.658 3.324 4.959a2.1 2.1 0 002.953-.354 2.1 2.1 0 00-.354-2.953c-1.287-1.016-2.027-2.475-2.027-4 0-2.943 2.691-5.342 5.998-5.344 3.305 0 5.992 2.398 5.992 5.344v8.336a5.277 5.277 0 01-.408-.398c-.773-.895-2.043-3.471-2.66-4.885a2.106 2.106 0 00-3.859 1.685c.107.244.693 1.559 1.438 2.961a8.023 8.023 0 00-2.404 1.379 2.104 2.104 0 102.658 3.261c.807-.658 1.455-.848 2.402-.902a23.035 23.035 0 002.193 1.719c-1.143 2.32-3.707 4.363-6.713 4.363-1.859 0-3.592-.785-4.713-2.055a2.105 2.105 0 00-2.027-2.672c-.209 0-.414-.014-.617-.027-3.066-.281-5.379-2.566-5.379-5.318 0-2.39 1.769-4.417 4.203-5.099zM49.449 6.368v-4.02a2.103 2.103 0 10-4.209.001v4.02a2.106 2.106 0 004.209-.001zM61.707 11.397c.805 0 1.574-.465 1.924-1.25l1.633-3.672a2.104 2.104 0 10-3.845-1.709l-1.631 3.67a2.103 2.103 0 001.919 2.961zM75.059 19.366l2.984-2.697a2.102 2.102 0 00.152-2.971 2.108 2.108 0 00-2.973-.152l-2.984 2.697a2.106 2.106 0 001.411 3.666 2.1 2.1 0 001.41-.543zM81.756 32.429l3.822-1.25a2.105 2.105 0 001.348-2.652 2.109 2.109 0 00-2.656-1.348l-3.822 1.246a2.104 2.104 0 00.654 4.105c.216 0 .437-.031.654-.101zM14.514 29.294l-3.834-1.207a2.105 2.105 0 10-1.266 4.014l3.832 1.209a2.103 2.103 0 002.641-1.377 2.106 2.106 0 00-1.373-2.639zM19.385 14.249c-.873-.77-2.203-.686-2.973.184s-.688 2.197.184 2.969l3.012 2.664c.4.354.896.527 1.395.527a2.1 2.1 0 001.576-.709 2.108 2.108 0 00-.182-2.973l-3.012-2.662zM32.717 11.776a2.102 2.102 0 001.912-2.98L32.957 5.14a2.105 2.105 0 00-3.828 1.75l1.674 3.658a2.1 2.1 0 001.914 1.228z"></path>
-      </svg>
-    ),
-    imageAlign: 'top',
-    title: 'Opinionated',
-  },
-  {
-    content: (
-      <p>
-        Takes inspiration from libraries like Immer and Autodux to let you{' '}
-        <strong>write "mutative" immutable update logic</strong>, and even{' '}
-        <strong>create entire "slices" of state automatically</strong>.
-      </p>
-    ),
-    image: (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-        <path
-          style={{
-            WebkitTextIndent: '0',
-            textIndent: '0',
-            WebkitTextTransform: 'none',
-            textTransform: 'none',
-            blockProgression: 'tb',
-          }}
-          d="M53.533 6.597c2.042 2.05 3.013 5.112 3.55 8.343.536 3.23.562 6.64 0 9.467a2.028 2.028 0 01-.966 1.343l-1.9 1.125c-.091 2.268-.183 4.979-1.307 6.593-.658.914-1.707 1.412-2.647 1.531-.94.119-1.83-.042-2.677-.344a7.946 7.946 0 01-3.145-2.062c-2.365 1.102-4.484 1.457-7.255 1.344v2.406c3.414 4.348 6.774 9.622 8.936 16.216 5.034-4.604 10.001-7.54 16.004-7.562 8.495.01 15.049 3.541 19.367 8.28C85.816 58.023 88 63.902 88 68.994c0 5.62-.511 10.328-3.051 14.435-2.54 4.107-6.941 7.324-14.105 10.405-.311.136-.658.19-.996.156-14.14-2.055-28.393-2.891-42.625-4-4.605-.07-8.17-1.817-8.936-5.717l-.934-6.655c-6.805-10.63-5.876-20.344-3.954-31.246 2.186-10.62 3.737-19.463 6.289-28.87.515-2.999 2.451-4.297 5.137-5.5 8.604-3.364 18.538-5.92 27.307-5.998.542-.04 1.06.254 1.4.593zm-2.398 3.5c-8.865.513-16.85 2.108-24.69 5.561-1.925.674-2.47 1.316-2.896 2.875-2.353 9.427-4.696 20.033-6.227 28.558-1.378 6.876-1.403 14.71.124 20.997.143-2.863.945-5.706 3.799-8.093-.527 10.113-.446 13.848.903 23.372.603 1.91 2.434 2.643 5.23 2.624 14.19.634 28.232 2.3 42.314 3.968 6.494-2.847 9.994-5.551 11.894-8.623 1.04-1.681 1.639-3.577 1.993-5.78-3.414-.412-6.983-.95-8.19-2.594-9.657 5.227-22.04 6-26.247.03 15.444 4.844 31.809-2.505 32.818-12.06a21.662 21.662 0 00-3.394-4.968c-3.648-4.003-9.04-6.967-16.471-6.967-6.954-.051-10.942 4.564-14.696 7.748 1.422 10.833-1.594 16.348-8.22 18.248 9.027-12.705 2.617-26.423-5.542-36.745-.28-.351-.436-.8-.436-1.25v-3.78c-.975-.577-1.73-1.204-2.273-2.156-.478-.837-.632-1.684-.685-2.594-2.58-.185-4.962-1.018-5.013-3.468 8.967 4 7.97-4 8.967-4 .997 0 .437 4.081.997 5.031.243.688.752 1.297 1.338 1.969-1.226-.304-2.102-.814-2.273.281.022 1.04.479 1.674 1.433 1.718 1.636-.01 3.002-.061 4.483-.28-.01-5.851-.145-8.01-1.992-11.718 2.759 0 3.807 4.302 3.954 11.249 1.025-.496 2.025-1.14 3.02-1.719-.006-5.71-.082-7.944-.996-12.53 2.498 4.18 2.89 7.07 2.958 11.374l2.989-1.75c-.2-5.369-1.087-8.232-1.962-12.623 3.056 3.833 3.76 7.666 3.892 11.499l1.183-.688c.307-2.103.349-4.744-.062-7.217-.396-2.382-1.201-4.343-2.024-5.5zM50.108 29.28l-2.024 1.156c.505.389 1.012.49 1.619.594-.033.004.286-.781.405-1.75zm33.626 37.057c-1.787 2.138-4.041 4.003-6.538 5.562 1.334.4 3.202.623 6.756.312.1-2.058.115-3.992-.218-5.874z"
-          overflow="visible"
-        ></path>
-      </svg>
-    ),
-    imageAlign: 'top',
-    title: 'Powerful',
-  },
-  {
-    content: (
-      <p>
-        Lets you focus on the core logic your app needs, so you can{' '}
-        <strong>do more work with less code</strong>.
-      </p>
-    ),
-    image: (
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-        <path d="M37.434 25.406H92.54A2.464 2.464 0 0095 22.947a2.463 2.463 0 00-2.46-2.46H37.434a2.463 2.463 0 00-2.459 2.46 2.462 2.462 0 002.459 2.459zM11.18 28.335c.748 1.036 1.853 1.631 3.031 1.631l.127-.002c1.226-.044 2.331-.719 3.03-1.853l10.027-16.233a2.465 2.465 0 00-2.093-3.752c-.86 0-1.644.437-2.094 1.168L14.12 24.003l-4.666-6.46c-.764-1.059-2.369-1.323-3.433-.555a2.444 2.444 0 00-.989 1.602 2.44 2.44 0 00.434 1.832l5.714 7.913zM92.54 51.441H37.434a2.462 2.462 0 00-2.459 2.459 2.463 2.463 0 002.459 2.461H92.54A2.465 2.465 0 0095 53.9a2.463 2.463 0 00-2.46-2.459zM26.593 39.449a2.458 2.458 0 00-3.385.8L14.12 54.957l-4.666-6.46c-.764-1.06-2.369-1.323-3.433-.555a2.444 2.444 0 00-.989 1.602 2.44 2.44 0 00.434 1.832l5.715 7.913c.748 1.036 1.852 1.631 3.03 1.631l.126-.002c1.228-.044 2.332-.719 3.032-1.854l10.026-16.231a2.463 2.463 0 00-.802-3.384zM92.54 82.396H37.434a2.462 2.462 0 00-2.459 2.459 2.463 2.463 0 002.459 2.461H92.54A2.465 2.465 0 0095 84.855a2.463 2.463 0 00-2.46-2.459zM26.593 70.402a2.466 2.466 0 00-1.291-.367c-.86 0-1.644.438-2.094 1.168L14.12 85.911l-4.666-6.46c-.765-1.061-2.371-1.321-3.433-.555a2.442 2.442 0 00-.989 1.604 2.438 2.438 0 00.434 1.83l5.715 7.913c.748 1.036 1.852 1.631 3.03 1.631l.127-.002c1.226-.044 2.331-.72 3.03-1.851l10.027-16.234a2.464 2.464 0 00-.802-3.385z"></path>
-      </svg>
-    ),
-    imageAlign: 'top',
-    title: 'Effective',
-  },
-]
-
-const otherLibraries = [
-  {
-    content: 'A predictable state container for JavaScript applications',
-    title: 'Redux',
-    link: 'https://redux.js.org',
-    image: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        aria-hidden="true"
-        data-icon="external-link-square-alt"
-        data-prefix="fas"
-        viewBox="0 0 448 512"
-      >
-        <path d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"></path>
-      </svg>
-    ),
-  },
-  {
-    content: 'Official React bindings for Redux',
-    title: 'React-Redux',
-    link: 'https://react-redux.js.org',
-    image: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        aria-hidden="true"
-        data-icon="external-link-square-alt"
-        data-prefix="fas"
-        viewBox="0 0 448 512"
-      >
-        <path d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"></path>
-      </svg>
-    ),
-  },
-]
-
-function Home() {
-  const context = useDocusaurusContext()
-  const { siteConfig = {} } = context
-
-  return (
-    <Layout title={siteConfig.title} description={siteConfig.tagline}>
-      <header className={classnames('hero hero--primary', styles.heroBanner)}>
-        <div className="container">
-          <div className={styles.title}>
-            <img
-              src="img/redux_white.svg"
-              alt="Redux logo"
-              width="100"
-              height="100"
-            />
-            <h1 className={`${styles.projectTitle} hero__title`}>
-              {siteConfig.title}
-            </h1>
-          </div>
-          <p className="hero__subtitle">{siteConfig.tagline}</p>
-          <div className={styles.buttons}>
-            <Link
-              className={classnames(
-                'button button--secondary button--lg',
-                styles.getStarted,
-              )}
-              to={useBaseUrl('introduction/getting-started')}
-            >
-              Get Started
-            </Link>
-          </div>
-        </div>
-      </header>
-      <main>
-        {features && features.length && (
-          <section className={styles.features}>
-            <div className={classnames('container', styles.featureBlock)}>
-              <div className="row">
-                {features.map(({ image, title, content }, idx) => (
-                  <div key={idx} className={classnames('col', styles.feature)}>
-                    {image && (
-                      <div className={`text--center ${styles.blockImage}`}>
-                        {image}
-                      </div>
-                    )}
-                    <h2 className={`text--center ${styles.featureTitle}`}>
-                      {title}
-                    </h2>
-                    <div className={styles.featureContent}>{content}</div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </section>
-        )}
-        {otherLibraries && otherLibraries.length && (
-          <section className={styles.features}>
-            <div className="container">
-              <div className="row">
-                <div className="col">
-                  <h2 className={`text--center ${styles.secondTitle}`}>
-                    Other Libraries from the Redux Team
-                  </h2>
-                </div>
-              </div>
-              <div className="row">
-                {otherLibraries.map(({ image, title, content, link }, idx) => (
-                  <div
-                    key={idx}
-                    className={classnames('col col--6', styles.feature)}
-                  >
-                    <h2 className="text--center">
-                      <a href={link} className={styles.featureAnchor}>
-                        {title}
-                        {image}
-                      </a>
-                    </h2>
-                    <p className="text--center">{content}</p>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </section>
-        )}
-      </main>
-    </Layout>
-  )
-}
-
-export default Home
+import React from 'react'
+import classnames from 'classnames'
+import Layout from '@theme/Layout'
+import Link from '@docusaurus/Link'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import styles from './styles.module.css'
+
+const features = [
+  {
+    content: (
+      <p>
+        Includes utilities to simplify common use cases like{' '}
+        <strong>store setup, creating reducers, immutable update logic</strong>,
+        and more.
+      </p>
+    ),
+    image: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 909.83 1100">
+        <g>
+          <path d="M886.9 557.45a78.28 78.28 0 00-63.4-22.52 80.17 80.17 0 00-88-97.47 82.63 82.63 0 001.84-17.46 82 82 0 00-73.86-81.55l139-139A81.94 81.94 0 10686.63 83.5L412.05 358.08c-18.64 18.64-41.11 31.55-65 37.35-17.91 4.35-36 4.4-50.55.28-14.38-22.37-27.88-40.68-30.8-44.6-29.61-40.41-56.89-81.54-88.7-130.88-32.71-50.66-74.06-72.44-113.46-59.73C53 163.89 43 170.07 32.92 179.38 15.06 195.91-1.28 214.46.08 238.15c1 18.15 11.48 34.43 27.29 59.07 9 13.95 20.09 31.32 31.94 53 7.11 13.05 12.46 26.58 18.13 40.91 2.24 5.68 4.57 11.55 7 17.43 7.36 17.61 16.71 40.94 23.81 65.21 11.72 40 5.36 78.49-1.36 119.2-4.85 29.33-9.86 59.66-8 91.42 2.37 40.18 13.66 80.92 33.55 121.08 18.75 37.87 44.15 73 75.49 104.3 57.84 57.84 129 95.64 200.5 106.42a269.83 269.83 0 0040.28 3.1 225.74 225.74 0 0059.29-7.66c32.34-8.77 60.2-24.68 82.8-47.28L820.22 735l66.67-66.67a78.5 78.5 0 00.01-110.88zm-106.08-75.92a50.32 50.32 0 010 71.1l-4.79 4.8-66.67 66.67-4.81 4.81a50.28 50.28 0 11-71.11-71.1l38.16-38.16 38.15-38.15a50.33 50.33 0 0171.07.03zM655.39 368a51.94 51.94 0 0136.73 88.67l-41.77 41.77-38.15 38.18-3.6 3.61a51.94 51.94 0 01-73.46-73.46l35.35-35.36 48.18-48.18A51.61 51.61 0 01655.39 368zm-85.76 575.19c-37.56 37.55-93.2 53-156.68 43.39-65.17-9.84-130.43-44.63-183.77-98q-8-8-15.37-16.27a170.76 170.76 0 0046.47 6.6 151.64 151.64 0 0025.42-2.11c38.61-6.55 69.21-28.22 88.49-62.66A12.48 12.48 0 10352.4 802c-15.68 28-39.53 44.92-70.88 50.24-36.89 6.26-75.64-5.26-99.85-21.42a350.45 350.45 0 01-22.31-38.59c-18.09-36.54-28.35-73.4-30.49-109.54-1.68-28.41 2.85-55.78 7.63-84.76 7-42.24 14.2-85.91.57-132.51-7.52-25.69-17.27-50-24.93-68.36-2.34-5.6-4.61-11.34-6.8-16.89-5.75-14.54-11.7-29.57-19.69-44.24-12.36-22.66-23.82-40.53-33-54.89-12.77-19.91-22-34.3-22.59-44.58-.36-6.35 2.12-15.47 23.26-35 6.79-6.29 13.15-10.33 19.43-12.35 36.16-11.67 67.32 29.3 79 47.45 32.15 49.81 59.73 91.39 89.81 132.41l.07.09c15.41 20.7 56.86 80.6 63.42 108.77a15 15 0 1029.22-6.8c-2.78-11.94-9.63-26.93-18-42.24a144.06 144.06 0 0037.87-4.15c29.22-7.09 56.58-22.75 79.12-45.29l274.58-274.63a51.94 51.94 0 0173.46 73.46L597.45 362l-83.54 83.53a81.91 81.91 0 0075.44 138 80.23 80.23 0 0097.47 88.1A78.28 78.28 0 00709.34 735a78 78 0 0046.11 22.36zm296.06-296.06l-31.32 31.31L799 713.81a48.47 48.47 0 01-68.46 0 48.47 48.47 0 010-68.46l66.71-66.71a48.42 48.42 0 0168.44 68.5z"></path>
+          <path d="M273 168.1a15 15 0 1021.27-21.1l-75-75.78a15 15 0 00-21.32 21.11zM330.86 122.33A15 15 0 00345.48 134a15.31 15.31 0 003.33-.37 15 15 0 0011.31-17.95l-23.58-104a15 15 0 10-29.25 6.63zM413.46 133.22a15 15 0 0019.09-9.22l35-100.73a15 15 0 00-28.34-9.86l-35 100.73a15 15 0 009.25 19.08zM468.54 167.07a15 15 0 0021.09 2.26l83-66.94A15 15 0 10553.82 79l-83.02 67a15 15 0 00-2.26 21.07z"></path>
+        </g>
+      </svg>
+    ),
+    imageAlign: 'top',
+    title: 'Simple',
+  },
+  {
+    content: (
+      <p>
+        Provides <strong>good defaults for store setup out of the box</strong>,
+        and includes{' '}
+        <strong>the most commonly used Redux addons built-in</strong>.
+      </p>
+    ),
+    image: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 91 91">
+        <path d="M69.203 90.954c1.16 0 2.104-.943 2.104-2.105V66.335c5.709-6.025 8.842-13.879 8.842-22.215 0-2.088-.211-4.174-.604-6.207l-.004-.014c-.01-.061-.014-.123-.025-.182a2.06 2.06 0 00-.221-.594c-.002-.004-.002-.01-.002-.012-1.111-2.002-2.689-3.166-2.865-3.293a2.1 2.1 0 00-2.922.475c-.68.938-.473 2.25.459 2.938.006.004.387.309.824.797-2.381 2.465-9.92 8.479-26.879 8.479-15.66 0-24.072-6.082-26.939-8.662.342-.32.676-.57.844-.68a2.105 2.105 0 00-2.275-3.541c-.219.143-2.182 1.443-3.215 3.404l-.012.02-.004.008c-.006.01-.004.02-.008.029a2.095 2.095 0 00-.188.52 32.727 32.727 0 00-.656 6.516c0 .281.006.561.014.834l-9.473 16.41c-.375.652-.375 1.455 0 2.105s1.072 1.051 1.822 1.051h4.916v9.836c0 5.658 4.602 10.262 10.262 10.262h10.799v4.23a2.106 2.106 0 004.209 0v-4.23h5.137a2.105 2.105 0 000-4.209H22.998a6.061 6.061 0 01-6.055-6.053v-11.94a2.103 2.103 0 00-2.104-2.104h-3.373l7.949-13.771a2.09 2.09 0 00.279-1.104s-.01-2.525.027-3.125c4.336 3.369 13.301 8.402 28.188 8.402 15.385 0 23.857-4.617 27.994-7.988.025.463.035.928.035 1.393 0 7.451-2.885 14.457-8.117 19.752l-4.777 3.215a2.1 2.1 0 00-.572 2.918 2.1 2.1 0 002.92.575l1.707-1.148V88.85a2.104 2.104 0 002.104 2.104z"></path>
+        <path d="M21.506 28.792c0 4.555 3.375 8.344 8.006 9.293 1.773 3.059 5.15 4.988 8.939 4.988 4.018 0 7.406-2.156 9.459-5.012 2.051 2.855 5.441 5.012 9.455 5.012 3.791 0 7.168-1.93 8.939-4.988 4.633-.947 8.008-4.738 8.01-9.293 0-4.66-3.588-8.545-8.314-9.381-.957-4.342-5.072-7.619-9.992-7.619-3.301 0-6.232 1.482-8.098 3.768-1.867-2.285-4.799-3.768-8.1-3.768-4.92.006-9.035 3.279-9.994 7.619-4.722.838-8.31 4.721-8.31 9.381zm34.502-12.791c3.305 0 5.996 2.398 5.996 5.344 0 1.525-.74 2.982-2.029 4.002a2.104 2.104 0 002.603 3.303c1.654-1.303 2.803-3.039 3.32-4.957 2.438.682 4.207 2.709 4.207 5.1-.002 2.752-2.314 5.037-5.381 5.318a8.98 8.98 0 01-.617.027 2.102 2.102 0 00-2.104 2.104c0 .195.025.387.076.568-1.119 1.268-2.854 2.055-4.715 2.055-3.004 0-5.568-2.045-6.711-4.363.705-.496 1.518-1.109 2.195-1.719.943.055 1.592.244 2.404.904a2.097 2.097 0 002.959-.306 2.101 2.101 0 00-.305-2.959 8.077 8.077 0 00-2.404-1.375 48.546 48.546 0 001.434-2.967 2.104 2.104 0 10-3.857-1.682c-.615 1.414-1.881 3.986-2.656 4.883a5.531 5.531 0 01-.41.398v-8.334c.001-2.946 2.688-5.344 5.995-5.344zm-26.09 7.691c.518 1.92 1.668 3.658 3.324 4.959a2.1 2.1 0 002.953-.354 2.1 2.1 0 00-.354-2.953c-1.287-1.016-2.027-2.475-2.027-4 0-2.943 2.691-5.342 5.998-5.344 3.305 0 5.992 2.398 5.992 5.344v8.336a5.277 5.277 0 01-.408-.398c-.773-.895-2.043-3.471-2.66-4.885a2.106 2.106 0 00-3.859 1.685c.107.244.693 1.559 1.438 2.961a8.023 8.023 0 00-2.404 1.379 2.104 2.104 0 102.658 3.261c.807-.658 1.455-.848 2.402-.902a23.035 23.035 0 002.193 1.719c-1.143 2.32-3.707 4.363-6.713 4.363-1.859 0-3.592-.785-4.713-2.055a2.105 2.105 0 00-2.027-2.672c-.209 0-.414-.014-.617-.027-3.066-.281-5.379-2.566-5.379-5.318 0-2.39 1.769-4.417 4.203-5.099zM49.449 6.368v-4.02a2.103 2.103 0 10-4.209.001v4.02a2.106 2.106 0 004.209-.001zM61.707 11.397c.805 0 1.574-.465 1.924-1.25l1.633-3.672a2.104 2.104 0 10-3.845-1.709l-1.631 3.67a2.103 2.103 0 001.919 2.961zM75.059 19.366l2.984-2.697a2.102 2.102 0 00.152-2.971 2.108 2.108 0 00-2.973-.152l-2.984 2.697a2.106 2.106 0 001.411 3.666 2.1 2.1 0 001.41-.543zM81.756 32.429l3.822-1.25a2.105 2.105 0 001.348-2.652 2.109 2.109 0 00-2.656-1.348l-3.822 1.246a2.104 2.104 0 00.654 4.105c.216 0 .437-.031.654-.101zM14.514 29.294l-3.834-1.207a2.105 2.105 0 10-1.266 4.014l3.832 1.209a2.103 2.103 0 002.641-1.377 2.106 2.106 0 00-1.373-2.639zM19.385 14.249c-.873-.77-2.203-.686-2.973.184s-.688 2.197.184 2.969l3.012 2.664c.4.354.896.527 1.395.527a2.1 2.1 0 001.576-.709 2.108 2.108 0 00-.182-2.973l-3.012-2.662zM32.717 11.776a2.102 2.102 0 001.912-2.98L32.957 5.14a2.105 2.105 0 00-3.828 1.75l1.674 3.658a2.1 2.1 0 001.914 1.228z"></path>
+      </svg>
+    ),
+    imageAlign: 'top',
+    title: 'Opinionated',
+  },
+  {
+    content: (
+      <p>
+        Takes inspiration from libraries like Immer and Autodux to let you{' '}
+        <strong>write "mutative" immutable update logic</strong>, and even{' '}
+        <strong>create entire "slices" of state automatically</strong>.
+      </p>
+    ),
+    image: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+        <path
+          style={{
+            WebkitTextIndent: '0',
+            textIndent: '0',
+            WebkitTextTransform: 'none',
+            textTransform: 'none',
+            blockProgression: 'tb',
+          }}
+          d="M53.533 6.597c2.042 2.05 3.013 5.112 3.55 8.343.536 3.23.562 6.64 0 9.467a2.028 2.028 0 01-.966 1.343l-1.9 1.125c-.091 2.268-.183 4.979-1.307 6.593-.658.914-1.707 1.412-2.647 1.531-.94.119-1.83-.042-2.677-.344a7.946 7.946 0 01-3.145-2.062c-2.365 1.102-4.484 1.457-7.255 1.344v2.406c3.414 4.348 6.774 9.622 8.936 16.216 5.034-4.604 10.001-7.54 16.004-7.562 8.495.01 15.049 3.541 19.367 8.28C85.816 58.023 88 63.902 88 68.994c0 5.62-.511 10.328-3.051 14.435-2.54 4.107-6.941 7.324-14.105 10.405-.311.136-.658.19-.996.156-14.14-2.055-28.393-2.891-42.625-4-4.605-.07-8.17-1.817-8.936-5.717l-.934-6.655c-6.805-10.63-5.876-20.344-3.954-31.246 2.186-10.62 3.737-19.463 6.289-28.87.515-2.999 2.451-4.297 5.137-5.5 8.604-3.364 18.538-5.92 27.307-5.998.542-.04 1.06.254 1.4.593zm-2.398 3.5c-8.865.513-16.85 2.108-24.69 5.561-1.925.674-2.47 1.316-2.896 2.875-2.353 9.427-4.696 20.033-6.227 28.558-1.378 6.876-1.403 14.71.124 20.997.143-2.863.945-5.706 3.799-8.093-.527 10.113-.446 13.848.903 23.372.603 1.91 2.434 2.643 5.23 2.624 14.19.634 28.232 2.3 42.314 3.968 6.494-2.847 9.994-5.551 11.894-8.623 1.04-1.681 1.639-3.577 1.993-5.78-3.414-.412-6.983-.95-8.19-2.594-9.657 5.227-22.04 6-26.247.03 15.444 4.844 31.809-2.505 32.818-12.06a21.662 21.662 0 00-3.394-4.968c-3.648-4.003-9.04-6.967-16.471-6.967-6.954-.051-10.942 4.564-14.696 7.748 1.422 10.833-1.594 16.348-8.22 18.248 9.027-12.705 2.617-26.423-5.542-36.745-.28-.351-.436-.8-.436-1.25v-3.78c-.975-.577-1.73-1.204-2.273-2.156-.478-.837-.632-1.684-.685-2.594-2.58-.185-4.962-1.018-5.013-3.468 8.967 4 7.97-4 8.967-4 .997 0 .437 4.081.997 5.031.243.688.752 1.297 1.338 1.969-1.226-.304-2.102-.814-2.273.281.022 1.04.479 1.674 1.433 1.718 1.636-.01 3.002-.061 4.483-.28-.01-5.851-.145-8.01-1.992-11.718 2.759 0 3.807 4.302 3.954 11.249 1.025-.496 2.025-1.14 3.02-1.719-.006-5.71-.082-7.944-.996-12.53 2.498 4.18 2.89 7.07 2.958 11.374l2.989-1.75c-.2-5.369-1.087-8.232-1.962-12.623 3.056 3.833 3.76 7.666 3.892 11.499l1.183-.688c.307-2.103.349-4.744-.062-7.217-.396-2.382-1.201-4.343-2.024-5.5zM50.108 29.28l-2.024 1.156c.505.389 1.012.49 1.619.594-.033.004.286-.781.405-1.75zm33.626 37.057c-1.787 2.138-4.041 4.003-6.538 5.562 1.334.4 3.202.623 6.756.312.1-2.058.115-3.992-.218-5.874z"
+          overflow="visible"
+        ></path>
+      </svg>
+    ),
+    imageAlign: 'top',
+    title: 'Powerful',
+  },
+  {
+    content: (
+      <p>
+        Lets you focus on the core logic your app needs, so you can{' '}
+        <strong>do more work with less code</strong>.
+      </p>
+    ),
+    image: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+        <path d="M37.434 25.406H92.54A2.464 2.464 0 0095 22.947a2.463 2.463 0 00-2.46-2.46H37.434a2.463 2.463 0 00-2.459 2.46 2.462 2.462 0 002.459 2.459zM11.18 28.335c.748 1.036 1.853 1.631 3.031 1.631l.127-.002c1.226-.044 2.331-.719 3.03-1.853l10.027-16.233a2.465 2.465 0 00-2.093-3.752c-.86 0-1.644.437-2.094 1.168L14.12 24.003l-4.666-6.46c-.764-1.059-2.369-1.323-3.433-.555a2.444 2.444 0 00-.989 1.602 2.44 2.44 0 00.434 1.832l5.714 7.913zM92.54 51.441H37.434a2.462 2.462 0 00-2.459 2.459 2.463 2.463 0 002.459 2.461H92.54A2.465 2.465 0 0095 53.9a2.463 2.463 0 00-2.46-2.459zM26.593 39.449a2.458 2.458 0 00-3.385.8L14.12 54.957l-4.666-6.46c-.764-1.06-2.369-1.323-3.433-.555a2.444 2.444 0 00-.989 1.602 2.44 2.44 0 00.434 1.832l5.715 7.913c.748 1.036 1.852 1.631 3.03 1.631l.126-.002c1.228-.044 2.332-.719 3.032-1.854l10.026-16.231a2.463 2.463 0 00-.802-3.384zM92.54 82.396H37.434a2.462 2.462 0 00-2.459 2.459 2.463 2.463 0 002.459 2.461H92.54A2.465 2.465 0 0095 84.855a2.463 2.463 0 00-2.46-2.459zM26.593 70.402a2.466 2.466 0 00-1.291-.367c-.86 0-1.644.438-2.094 1.168L14.12 85.911l-4.666-6.46c-.765-1.061-2.371-1.321-3.433-.555a2.442 2.442 0 00-.989 1.604 2.438 2.438 0 00.434 1.83l5.715 7.913c.748 1.036 1.852 1.631 3.03 1.631l.127-.002c1.226-.044 2.331-.72 3.03-1.851l10.027-16.234a2.464 2.464 0 00-.802-3.385z"></path>
+      </svg>
+    ),
+    imageAlign: 'top',
+    title: 'Effective',
+  },
+]
+
+const otherLibraries = [
+  {
+    content: 'A predictable state container for JavaScript applications',
+    title: 'Redux',
+    link: 'https://redux.js.org',
+    image: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        data-icon="external-link-square-alt"
+        data-prefix="fas"
+        viewBox="0 0 448 512"
+      >
+        <path d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"></path>
+      </svg>
+    ),
+  },
+  {
+    content: 'Official React bindings for Redux',
+    title: 'React-Redux',
+    link: 'https://react-redux.js.org',
+    image: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        data-icon="external-link-square-alt"
+        data-prefix="fas"
+        viewBox="0 0 448 512"
+      >
+        <path d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"></path>
+      </svg>
+    ),
+  },
+]
+
+function Home() {
+  const context = useDocusaurusContext()
+  const { siteConfig = {} } = context
+
+  return (
+    <Layout title={siteConfig.title} description={siteConfig.tagline}>
+      <header className={classnames('hero hero--primary', styles.heroBanner)}>
+        <div className="container">
+          <div className={styles.title}>
+            <img
+              src="img/redux_white.svg"
+              alt="Redux logo"
+              width="100"
+              height="100"
+            />
+            <h1 className={`${styles.projectTitle} hero__title`}>
+              {siteConfig.title}
+            </h1>
+          </div>
+          <p className="hero__subtitle">{siteConfig.tagline}</p>
+          <div className={styles.buttons}>
+            <Link
+              className={classnames(
+                'button button--secondary button--lg',
+                styles.getStarted,
+              )}
+              to={useBaseUrl('introduction/getting-started')}
+            >
+              Get Started
+            </Link>
+          </div>
+        </div>
+      </header>
+      <main>
+        {features && features.length && (
+          <section className={styles.features}>
+            <div className={classnames('container', styles.featureBlock)}>
+              <div className="row">
+                {features.map(({ image, title, content }, idx) => (
+                  <div key={idx} className={classnames('col', styles.feature)}>
+                    {image && (
+                      <div className={`text--center ${styles.blockImage}`}>
+                        {image}
+                      </div>
+                    )}
+                    <h2 className={`text--center ${styles.featureTitle}`}>
+                      {title}
+                    </h2>
+                    <div className={styles.featureContent}>{content}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+        )}
+        {otherLibraries && otherLibraries.length && (
+          <section className={styles.features}>
+            <div className="container">
+              <div className="row">
+                <div className="col">
+                  <h2 className={`text--center ${styles.secondTitle}`}>
+                    Other Libraries from the Redux Team
+                  </h2>
+                </div>
+              </div>
+              <div className="row">
+                {otherLibraries.map(({ image, title, content, link }, idx) => (
+                  <div
+                    key={idx}
+                    className={classnames('col col--6', styles.feature)}
+                  >
+                    <h2 className="text--center">
+                      <a href={link} className={styles.featureAnchor}>
+                        {title}
+                        {image}
+                      </a>
+                    </h2>
+                    <p className="text--center">{content}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+        )}
+      </main>
+    </Layout>
+  )
+}
+
+export default Home
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
index 54f97730..f9b824ce 100644
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@@ -1,110 +1,110 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-@media screen and (max-width: 966px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.featureBlock {
-  margin-top: 40px;
-}
-
-.blockImage {
-  margin-bottom: 20px;
-}
-
-.blockImage svg {
-  fill: currentColor;
-  width: 60px;
-  height: 60px;
-}
-
-.featureTitle {
-  font-size: 30px;
-  padding: 10px 0;
-}
-
-@media screen and (max-width: 966px) {
-  .featureContent {
-    text-align: center;
-  }
-}
-
-.title {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.projectTitle {
-  margin: 0.3em 0;
-}
-
-.featureAnchor svg {
-  margin-left: 5px;
-  max-width: 16px;
-  max-height: 16px;
-  fill: currentColor;
-}
-
-.getStarted:hover {
-  background: #fff;
-  color: var(--ifm-color-primary);
-}
-
-.secondTitle {
-  font-size: 30px;
-  margin-bottom: 55px;
-}
-
-.mainFull {
-  padding: 34px 16px;
-  width: 100%;
-  max-width: var(--ifm-container-width);
-  margin: 0px auto;
-}
-.mainFull h1 {
-  font-size: 3rem;
-  color: var(--ifm-heading-color);
-  font-weight: var(--ifm-heading-font-weight);
-  line-height: var(--ifm-heading-line-height);
-}
-
-.mainFull p {
-  margin-bottom: var(--ifm-leading);
-  margin-top: 0;
-}
-
-.errorDetails {
-  color: #ff6464;
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin: 30px 0;
-  font-weight: bold;
-  background-color: rgba(255, 100, 100, 0.1);
-  display: block;
-}
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 966px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureBlock {
+  margin-top: 40px;
+}
+
+.blockImage {
+  margin-bottom: 20px;
+}
+
+.blockImage svg {
+  fill: currentColor;
+  width: 60px;
+  height: 60px;
+}
+
+.featureTitle {
+  font-size: 30px;
+  padding: 10px 0;
+}
+
+@media screen and (max-width: 966px) {
+  .featureContent {
+    text-align: center;
+  }
+}
+
+.title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.projectTitle {
+  margin: 0.3em 0;
+}
+
+.featureAnchor svg {
+  margin-left: 5px;
+  max-width: 16px;
+  max-height: 16px;
+  fill: currentColor;
+}
+
+.getStarted:hover {
+  background: #fff;
+  color: var(--ifm-color-primary);
+}
+
+.secondTitle {
+  font-size: 30px;
+  margin-bottom: 55px;
+}
+
+.mainFull {
+  padding: 34px 16px;
+  width: 100%;
+  max-width: var(--ifm-container-width);
+  margin: 0px auto;
+}
+.mainFull h1 {
+  font-size: 3rem;
+  color: var(--ifm-heading-color);
+  font-weight: var(--ifm-heading-font-weight);
+  line-height: var(--ifm-heading-line-height);
+}
+
+.mainFull p {
+  margin-bottom: var(--ifm-leading);
+  margin-top: 0;
+}
+
+.errorDetails {
+  color: #ff6464;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 30px 0;
+  font-weight: bold;
+  background-color: rgba(255, 100, 100, 0.1);
+  display: block;
+}