@refinedev/core 4.45.0 → 4.46.0

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # @refinedev/core
 
+## 4.46.0
+
+### Minor Changes
+
+-   [#5343](https://github.com/refinedev/refine/pull/5343) [`dd8f1270f6`](https://github.com/refinedev/refine/commit/dd8f1270f692d1eec279973e53fcc5a7e650b983) Thanks [@alicanerdurmaz](https://github.com/alicanerdurmaz)! - fix: `hideForm` should remove all form fields. (submit button, form fields, rememberMe checkbox, forgot password link, etc.) but the `/register` link should be visible.
+
+-   [#5307](https://github.com/refinedev/refine/pull/5307) [`f8e407f850`](https://github.com/refinedev/refine/commit/f8e407f85054bccf1e6ff45c84928bc01db7f5eb) Thanks [@jackprogramsjp](https://github.com/jackprogramsjp)! - feat: added `hideForm` props for `LoginPage` and `RegisterPage` for `AuthPage` feature.
+
+    Now with the `hideForm` props feature, you can be able to hide the forms (like email/password)
+    to only show the OAuth providers. This avoids having to make your own entire AuthPage.
+
+### Patch Changes
+
+-   [#5323](https://github.com/refinedev/refine/pull/5323) [`17aa8c1cd6`](https://github.com/refinedev/refine/commit/17aa8c1cd6858c5a2b0c996c97230047e049bf3b) Thanks [@alicanerdurmaz](https://github.com/alicanerdurmaz)! - ### Breaking changes
+
+    fix: added required `key` prop to `<Auhtenticated />` component to resolve issues of rendering of the unwanted content and wrongful redirections. #4782
+
+    #### Why is it required?
+
+    Due to the [nature of React](https://react.dev/learn/rendering-lists#why-does-react-need-keys), components are not unmounted and remounted again if props are changed. While this is mostly a good practice for performance, in some cases you'll want your component to re-mount instead of updating; for example, if you don't want to use any of the previous states and effects initiated with the old props.
+
+    The `<Authenticated />` component has this kind of scenario when it's used for page-level authentication checks. If the previous check results were used for the rendering of the content (`fallback` or `children`) this may lead to unexpected behaviors and flashing of the unwanted content.
+
+    To avoid this, a key property must be set with different values for each use of the `<Authenticated />` components. This will make sure that React will unmount and remount the component instead of updating the props.
+
+    ```tsx
+    import { Refine, Authenticated, AuthPage } from "@refinedev/core";
+    import {
+      CatchAllNavigate,
+    } from "@refinedev/react-router-v6";
+    import { BrowserRouter, Routes, Route, Outlet, Navigate } from "react-router-dom";
+
+    const App = () => {
+      return (
+        <BrowserRouter>
+          <Refine {/* ... */}>
+            <Routes>
+              <Route
+                element={
+                  <Authenticated
+                    key="authenticated-routes"
+                    fallback={<CatchAllNavigate to="/login" />}
+                  >
+                    <Outlet />
+                  </Authenticated>
+                }
+              >
+                <Route index element={<h1>Dashboard Page</h1>} />
+              </Route>
+
+              <Route
+                element={
+                  <Authenticated key="unauthenticated-routes" fallback={<Outlet />}>
+                     <Navigate to="/" replace />
+                  </Authenticated>
+                }
+              >
+                <Route path="/login" element={<AuthPage type="login" />} />
+              </Route>
+            </Routes>
+          </Refine>
+        </BrowserRouter>
+      );
+    };
+    ```
+
+    In the example above, the `<Authenticated />` is rendered as the wrapper of both the `index` route and `/login` route. Without a `key` property, `<Authenticated />` will not be re-mounted and can result in rendering the content depending on the previous authentication check. This will lead to redirecting to `/login` when trying to access the `index` route instead of rendering the content of the `index` or navigating to `index` route instead of `/login` if the user just logged out.
+
+-   [#5339](https://github.com/refinedev/refine/pull/5339) [`4c49ef0a06`](https://github.com/refinedev/refine/commit/4c49ef0a0660c2941c983025a187d45b521aa27c) Thanks [@alicanerdurmaz](https://github.com/alicanerdurmaz)! - feat: `<WelcomePage />` component redesigned.
+
+-   [#5316](https://github.com/refinedev/refine/pull/5316) [`3bdb9cb1cb`](https://github.com/refinedev/refine/commit/3bdb9cb1cb4cdcfaf363e7e9938737ed6f8e634e) Thanks [@ksankeerth](https://github.com/ksankeerth)! - fix: Return type is not mentioned correctly in useOne, useSelect, useForm, useMany and useShow hooks
+
+    This fix has improved type safety of return type of useOne, useSelect, useForm, useMany and useShow hooks.
+
+## 4.45.1
+
+### Patch Changes
+
+-   [#5289](https://github.com/refinedev/refine/pull/5289) [`0d1e269c0283`](https://github.com/refinedev/refine/commit/0d1e269c02837bea4c1df3f4a56dfad52974bd7a) Thanks [@alicanerdurmaz](https://github.com/alicanerdurmaz)! - feat: `<GitHubBanner />` styles updated.
+
+    fix: `<GitHubBanner />` hydration error. #5295
+
 ## 4.45.0
 
 ### Minor Changes

package/README.md

@@ -1,11 +1,10 @@
-<br/>
-
-<div align="center" style="margin: 30px;">
+<div align="center">
 <a href="https://refine.dev/">
-  <img src="https://refine.ams3.cdn.digitaloceanspaces.com/refine_logo.png"   style="width:250px;" align="center" />
+    <img alt="refine logo" src="https://refine.ams3.cdn.digitaloceanspaces.com/readme/refine-readme-banner.png">
 </a>
-<br />
-<br />
+  
+<br/>
+<br/>
 
 <div align="center">
     <a href="https://refine.dev">Home Page</a> |
@@ -16,83 +15,94 @@
 </div>
 </div>
 
-<br />
+<br/>
+<br/>
 
-<div align="center"><strong>Build your <a href="https://reactjs.org/">React</a>-based CRUD applications, without constraints.</strong><br>An open source, headless web application framework developed with flexibility in mind.
+<div align="center"><strong>Build your <a href="https://reactjs.org/">React</a>-based CRUD applications, without constraints.</strong><br>An open-source, headless web application framework developed with flexibility in mind.
 
 <br />
 <br />
 
-[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/refine)
-[![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)](https://twitter.com/refine_dev)
-
-<a href="https://www.producthunt.com/posts/refine-3?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-refine&#0045;3" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=362220&theme=light&period=daily" alt="refine - 100&#0037;&#0032;open&#0032;source&#0032;React&#0032;framework&#0032;to&#0032;build&#0032;web&#0032;apps&#0032;3x&#0032;faster | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
-
 </div>
 
 <div align="center">
 
 [![Awesome](https://github.com/refinedev/awesome-refine/raw/main/images/badge.svg)](https://github.com/refinedev/awesome-refine)
-[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)
-[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)
 [![npm version](https://img.shields.io/npm/v/@refinedev/core.svg)](https://www.npmjs.com/package/@refinedev/core)
-[![npm](https://img.shields.io/npm/dm/@refinedev/core)](https://www.npmjs.com/package/@refinedev/core)
 [![](https://img.shields.io/github/commit-activity/m/refinedev/refine)](https://github.com/refinedev/refine/commits/master)
 [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md)
 
+[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/refine)
+[![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)](https://twitter.com/refine_dev)
+
+<a href="https://www.producthunt.com/posts/refine-3?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-refine&#0045;3" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=362220&theme=light&period=daily" alt="refine - 100&#0037;&#0032;open&#0032;source&#0032;React&#0032;framework&#0032;to&#0032;build&#0032;web&#0032;apps&#0032;3x&#0032;faster | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
 </div>
 
 <br/>
-<a href="https://refine.dev/">
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/18739364/200257042-3f2aa7f7-a07f-4824-8d2a-b25f26b6fd32.png">
-  <img alt="how-works-refine" src="https://user-images.githubusercontent.com/18739364/200257209-8fc0c8b1-2568-453e-873f-00513434deed.png">
-</picture>
-</a>
 
-## What is refine?
+[![how-refine-works](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/new-diagram.jpg)](https://refine.dev)
+
+## What is Refine?
 
-**refine** is a React-based framework for the rapid ✨ development of web applications.
-It eliminates repetitive tasks demanded by **CRUD** operations and provides industry standard solutions for critical parts like **authentication**, **access control**, **routing**, **networking**, **state management**, and **i18n**.
+**Refine** is a meta **React** framework that enables the rapid✨ development of a wide range of web applications.
 
-**refine** is _headless by design_, thereby offering unlimited styling and customization options.
+From internal tools to admin panels, B2B apps, and dashboards, it serves as a comprehensive solution for building any type of **CRUD** application.
+
+Refine's internal hooks and components simplify the development process and eliminate repetitive tasks by providing industry-standard solutions for crucial aspects of a project, including **authentication**, **access control**, **routing**, **networking**, **state management**, and **i18n**.
+
+**Refine** is _headless by design_, thereby offering unlimited styling and customization options.
 
 ## What do you mean by "headless" ?
 
-Instead of being a limited set of pre-styled components, **refine** is a collection of helper `hooks`, `components`, and `providers`. They are all decoupled from _UI components_ and _business logic_, so that they never keep you from customizing your _UI_ or coding your own flow.
+Instead of being limited to a set of pre-styled components, **Refine** provides collections of helper `hooks`, `components`, `providers`, and more. Since business logic and the UI are completely decoupled, you can customize the UI without constraints.
 
-**refine** seamlessly works with any **custom design** or **UI framework** that you favor. For convenience, it ships with ready-made integrations for [Ant Design System](https://ant.design/), [Material UI](https://mui.com/material-ui/getting-started/overview/), [Mantine](https://mantine.dev/), and [Chakra UI](https://chakra-ui.com/).
+It means that **Refine** just works _seamlessly_ with any _custom designs_ or _UI frameworks_. Thanks to it's headless architecture, you can use popular CSS frameworks like [TailwindCSS](https://tailwindcss.com/) or even create your own styles from scratch.
 
-## Use cases
+Refine also provides integrations with [Ant Design](https://ant.design/), [Material UI](https://mui.com/material-ui/getting-started/overview/), [Mantine](https://mantine.dev/), and [Chakra UI](https://chakra-ui.com/) to get you started quickly. These libraries are a set of components that are nicely integrated with the headless `@refinedev/core` package.
 
-**refine** shines on _data-intensive⚡_ applications like **admin panels**, **dashboards** and **internal tools**. Thanks to the built-in **SSR support**, **refine** can also power _customer-facing_ applications like **storefronts**.
+### Headless in Routing
 
-You can take a look at some live examples that can be built using **refine** from scratch:
+For the routing, Refine's headless approach shines too. It doesn't tie you to a single routing method or library. Instead, it offers a simple routing interface with built-in integrations for popular libraries.
 
-<a href="https://s.refine.dev/readme-admin-panel" target="_blank">
- <img src="https://user-images.githubusercontent.com/18739364/204285956-cc20fa11-b769-4bd5-b8f6-9c05a283ac85.gif"   style="width:267px;"  />
-</a>
+This means you can use Refine seamlessly on different platforms like React Native, Electron, Next.js, Remix, etc. without any extra setup steps.
 
- <a href="https://s.refine.dev/readme-medium-clone" target="_blank">
-<img src="https://user-images.githubusercontent.com/18739364/204285047-8f24f1f4-65ea-4952-83ed-81e92cdd5b90.gif"   style="width:200px;"  />
-</a>
+## ⚡ Try Refine
 
- <a href="https://s.refine.dev/readme-ssr-storefront" target="_blank">
-<img src="https://user-images.githubusercontent.com/18739364/204285039-1ce0cb06-fbf8-4704-89c9-2e004620c9a8.gif"   style="width:200px;"  />
-</a>
+Refine's [browser-based app scaffolder](https://refine.dev/#playground) enables you to build a Refine app through an interactive, step-by-step process in your browser.
+
+You have the freedom to select your preferred libraries and frameworks, and the tool generates a ready-to-download boilerplate code. This feature not only lets you preview and tweak your project on the fly but also accelerates the overall development workflow.
 
-<br/>
 <br/>
 
-[👉 Refer to most popular real use case examples](https://refine.dev/examples/)
+<div align="center">
+<a href="https://refine.dev/#playground" target="_blank">
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-07-25-refine-primereact/create-refine-project.gif"    />
+</a>
+</div>
 
-[👉 More **refine** powered different usage scenarios can be found here](https://refine.dev/docs/examples/)
+## Use cases
+
+**Refine** shines on _data-intensive⚡_ enterprise B2B applications like **admin panels**, **dashboards** and **internal tools**. Thanks to the built-in **SSR support**, it can also power _customer-facing_ applications like **storefronts**.
+
+You can take a look at some live examples that can be built using **refine** from scratch:
+
+- [Fully-functional CRM Application](https://example.crm.refine.dev/)
+- [Fully-functional Admin Panel](https://s.refine.dev/readme-admin-panel)
+- [Win95 Style Admin panel 🪟](https://win95.refine.dev/)
+- [Medium Clone - Real World Example](https://s.refine.dev/readme-medium-clone)
+- [Multitenancy Example](https://multi-tenancy-strapi.refine.dev/)
+- [Storefront](https://s.refine.dev/readme-ssr-storefront)
+
+[👉 Refer to most popular real use case examples](https://refine.dev/docs/examples/)
+
+[👉 More **Refine** powered different usage scenarios can be found here](https://refine.dev/docs/examples#other-examples)
 
 ## Key Features
 
 ⚙️ Zero-config, **one-minute setup** with a **single CLI command**
 
-🔌 Connectors for **15+ backend services** including [REST API](https://github.com/refinedev/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/refinedev/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/refinedev/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/refinedev/refine/tree/master/packages/airtable), [Strapi](https://github.com/refinedev/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/refinedev/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/refinedev/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/refinedev/refine/tree/master/packages/supabase), [Hasura](https://github.com/refinedev/refine/tree/master/packages/hasura), [Appwrite](https://github.com/refinedev/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Nestjs-Query](https://github.com/refinedev/refine/tree/master/packages/nestjs-query) and [Directus](https://directus.io/).
+🔌 Connectors for **15+ backend services** including [REST API](https://github.com/refinedev/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/refinedev/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/refinedev/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/refinedev/refine/tree/master/packages/airtable), [Strapi](https://github.com/refinedev/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/refinedev/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/refinedev/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/refinedev/refine/tree/master/packages/supabase), [Hasura](https://github.com/refinedev/refine/tree/master/packages/hasura), [Appwrite](https://github.com/refinedev/refine/tree/master/packages/appwrite), [Nestjs-Query](https://github.com/refinedev/refine/tree/master/packages/nestjs-query), [Firebase](https://firebase.google.com/), [Sanity](https://www.sanity.io/), and [Directus](https://directus.io/).
 
 🌐 **SSR support** with **Next.js** or **Remix**
 
@@ -114,17 +124,18 @@ You can take a look at some live examples that can be built using **refine** fro
 
 ⌛️ Built-in CLI with time-saving features
 
-💻 refine [Devtools](https://github.com/refinedev/refine/blob/master/packages/devtools/README.md) - dive deeper into your app and provide useful insights
+💻 Refine [Devtools](https://github.com/refinedev/refine/blob/master/packages/devtools/README.md) - dive deeper into your app and provide useful insights
 
 ✅ Full **test coverage**
 
 ## Quick Start
 
-The fastest way to get started with **refine** is by using the `create refine-app` project starter tool.
-Run the following command to create a new **refine** project configured with [Ant Design System](https://ant.design/) as the default UI framework:
+There are two ways to create a Refine app: either by using the `create refine-app` CLI tool or the [browser-based app scaffolder](https://refine.dev/#playground).
+
+To quickly start a Refine project with [Ant Design](https://ant.design/) as the default UI framework, run the following command.
 
 ```
-npm create refine-app@latest -- --preset refine-antd
+npm create refine-app@latest -- -o refine-antd
 ```
 
 Once the setup is complete, navigate to the project folder and start your project with:
@@ -135,17 +146,27 @@ npm run dev
 
 <br/>
 
-Your **refine** application will be accessible at [http://localhost:3000](http://localhost:3000):
+Your **Refine** application will be accessible at [http://localhost:5173](http://localhost:5173):
 
-<a href="http://localhost:3000">![Welcome on board](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/welcome-on-board.png)</a>
+<a href="http://localhost:5173">![Welcome on board](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/welcome.png)</a>
 
 <br/>
 
-Let's consume a public `fake REST API` and add two resources (_posts_, _categories_) to our project. Replace the contents of `src/App.tsx` with the following code:
+> Note: The command above uses pre-set options for ease. For a different tech stack, simply run:
+>
+> ```
+> npm create refine-app@latest
+> ```
+
+Let's consume a public `fake REST API` and add two resources (_blog_posts_ and _categories_) to our project. Replace the contents of `src/App.tsx` with the following code:
 
 ```tsx title="src/App.tsx"
 import { Refine } from "@refinedev/core";
-import { Layout, notificationProvider, ErrorComponent } from "@refinedev/antd";
+import {
+  notificationProvider,
+  ErrorComponent,
+  ThemedLayout,
+} from "@refinedev/antd";
 import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
 import dataProvider from "@refinedev/simple-rest";
 
@@ -156,62 +177,53 @@ import { AntdInferencer } from "@refinedev/inferencer/antd";
 import "@refinedev/antd/dist/reset.css";
 
 const App: React.FC = () => {
-    return (
-        <BrowserRouter>
-            <Refine
-                routerProvider={routerProvider}
-                dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
-                notificationProvider={notificationProvider}
-                resources={[
-                    {
-                        name: "posts",
-                        list: "/posts",
-                        show: "/posts/show/:id",
-                        create: "/posts/create",
-                        edit: "/posts/edit/:id",
-                        meta: { canDelete: true },
-                    },
-                    {
-                        name: "categories",
-                        list: "/categories",
-                        show: "/categories/show/:id",
-                    },
-                ]}
-            >
-                <Routes>
-                    <Route
-                        element={
-                            <Layout>
-                                <Outlet />
-                            </Layout>
-                        }
-                    >
-                        <Route index element={<NavigateToResource />} />
-                        <Route path="posts">
-                            <Route index element={<AntdInferencer />} />
-                            <Route
-                                path="show/:id"
-                                element={<AntdInferencer />}
-                            />
-                            <Route path="create" element={<AntdInferencer />} />
-                            <Route
-                                path="edit/:id"
-                                element={<AntdInferencer />}
-                            />
-                        </Route>
-                        <Route path="categories">
-                            <Route index element={<AntdInferencer />} />
-                            <Route
-                                path="show/:id"
-                                element={<AntdInferencer />}
-                            />
-                        </Route>
-                        <Route path="*" element={<ErrorComponent />} />
-                    </Route>
-                </Routes>
-            </Refine>
-        </BrowserRouter>
-    );
+  return (
+    <BrowserRouter>
+      <Refine
+        routerProvider={routerProvider}
+        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+        notificationProvider={notificationProvider}
+        resources={[
+          {
+            name: "blog_posts",
+            list: "/blog-posts",
+            show: "/blog-posts/show/:id",
+            create: "/blog-posts/create",
+            edit: "/blog-posts/edit/:id",
+            meta: { canDelete: true },
+          },
+          {
+            name: "categories",
+            list: "/categories",
+            show: "/categories/show/:id",
+          },
+        ]}
+      >
+        <Routes>
+          <Route
+            element={
+              <ThemedLayout>
+                <Outlet />
+              </ThemedLayout>
+            }
+          >
+            <Route index element={<NavigateToResource />} />
+            <Route path="blog-posts">
+              <Route index element={<AntdInferencer />} />
+              <Route path="show/:id" element={<AntdInferencer />} />
+              <Route path="create" element={<AntdInferencer />} />
+              <Route path="edit/:id" element={<AntdInferencer />} />
+            </Route>
+            <Route path="categories">
+              <Route index element={<AntdInferencer />} />
+              <Route path="show/:id" element={<AntdInferencer />} />
+            </Route>
+            <Route path="*" element={<ErrorComponent />} />
+          </Route>
+        </Routes>
+      </Refine>
+    </BrowserRouter>
+  );
 };
 
 export default App;
@@ -219,43 +231,39 @@ export default App;
 
 <br/>
 
-🚀 Thanks to **refine Inferencer package**, it guesses the configuration to use for the `list`, `show`, `create`, and `edit` pages based on the data fetched from the API and generates the pages automatically.
+🚀 The [**Refine Inferencer package**](https://refine.dev/docs/packages/documentation/inferencer/) automatically generates `list`, `show`, `create`, and `edit` pages by guessing configurations from API data. We've used it here for a quick, clear start, but you can also choose to code your pages from scratch instead of using the Inferencer feature.
 
-Now, you should see the output as a table populated with `post` & `category` data:
+Now, you should see the output as a table populated with `blog_posts` & `category` data:
 
-![First example result](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/readme-quick-start.png)
+![First example result](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/readme-quick-start-2.png)
 
 <br/>
 
-You can get the auto-generated pages codes by clicking the `Show Code` button on each page. Afterward, simply pass the pages to the `resources` array by replacing with the Inferencer components.
+You can get the auto-generated page codes by clicking the `Show Code` button on each page. Afterward, simply pass the pages to the `resources` array by replacing them with the Inferencer components.
 
 ## Next Steps
 
 👉 Jump to [Tutorial](https://refine.dev/docs/tutorial/introduction/index/) to continue your work and turn the example into a full-blown CRUD application.
 
-👉 Visit [Learn the Basics Page](https://refine.dev/docs/getting-started/overview/) to get informed about the fundamental concepts.
+👉 Visit the [Learn the Basics page](https://refine.dev/docs/getting-started/overview/) to get informed about the fundamental concepts.
 
 👉 Read more on [Advanced Tutorials
 ](https://refine.dev/docs/advanced-tutorials/) for different usage scenarios.
 
-👉 See the real-life [Finefoods Demo](https://refine.dev/demo/) project.
-
-👉 Play with interactive [Examples](https://refine.dev/docs/examples/)
-
-## Stargazers
+👉 See the real-life [CRM Application](https://example.crm.refine.dev/) project built using Refine.
 
-[![Stargazers repo roster for refinedev/refine](https://reporoster.com/stars/refinedev/refine)](https://github.com/refinedev/refine/stargazers)
+👉 Play with interactive [examples](https://refine.dev/docs/examples/).
 
 ## Contribution
 
-[👉 Refer to contribution docs for more information](https://refine.dev/docs/contributing/#ways-to-contribute)
+[👉 Refer to the contribution docs for more information.](https://refine.dev/docs/contributing/#ways-to-contribute)
 
-If you have any doubts related to the project or want to discuss something, then join our [Discord Server](https://discord.gg/refine).
+If you have any doubts related to the project or want to discuss something, then join our [Discord server](https://discord.gg/refine).
 
-## Our ♥️ Contributors
+## Contributors ♥️
 
 <a href="https://github.com/refinedev/refine/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=refinedev/refine" />
+  <img src="https://contrib.rocks/image?repo=refinedev/refine&max=400&columns=20" />
 </a>
 
 ## License

package/dist/components/authenticated/index.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
 export declare type AuthenticatedCommonProps = {
+    /**
+     * Unique key to identify the component.
+     * This is required if you have multiple `Authenticated` components at the same level.
+     * @required
+     */
+    key: React.Key;
     /**
      * Whether to redirect user if not logged in or not.
      * If not set, user will be redirected to `redirectTo` property of the `check` function's response.
@@ -36,6 +42,34 @@ export declare type LegacyAuthenticatedProps = {
 export declare type AuthenticatedProps = {
     v3LegacyAuthProviderCompatible?: false;
 } & AuthenticatedCommonProps;
+/**
+ * `<Authenticated>` is the component form of {@link https://refine.dev/docs/api-reference/core/hooks/auth/useAuthenticated `useAuthenticated`}. It internally uses `useAuthenticated` to provide it's functionality.
+ *
+ * @requires {@link https://react.dev/learn/rendering-lists#why-does-react-need-keys `key`} prop if you have multiple components at the same level.
+ * In React, components don't automatically unmount and remount with prop changes, which is generally good for performance. However, for specific cases this can cause issues like unwanted content rendering (`fallback` or `children`). To solve this, assigning unique `key` values to each instance of component is necessary, forcing React to unmount and remount the component, rather than just updating its props.
+ * @example
+ *```tsx
+ * <Authenticated key="dashboard">
+ *   <h1>Dashboard Page</h1>
+ * </Authenticated>
+ *```
+ *
+ * @see {@link https://refine.dev/docs/core/components/auth/authenticated `<Authenticated>`} component for more details.
+ */
 export declare function Authenticated(props: LegacyAuthenticatedProps): JSX.Element | null;
+/**
+ * `<Authenticated>` is the component form of {@link https://refine.dev/docs/api-reference/core/hooks/auth/useAuthenticated `useAuthenticated`}. It internally uses `useAuthenticated` to provide it's functionality.
+ *
+ * @requires {@link https://react.dev/learn/rendering-lists#why-does-react-need-keys `key`} prop if you have multiple components at the same level.
+ * In React, components don't automatically unmount and remount with prop changes, which is generally good for performance. However, for specific cases this can cause issues like unwanted content rendering (`fallback` or `children`). To solve this, assigning unique `key` values to each instance of component is necessary, forcing React to unmount and remount the component, rather than just updating its props.
+ * @example
+ *```tsx
+ * <Authenticated key="dashboard">
+ *   <h1>Dashboard Page</h1>
+ * </Authenticated>
+ *```
+ *
+ * @see {@link https://refine.dev/docs/core/components/auth/authenticated `<Authenticated>`} component for more details.
+ */
 export declare function Authenticated(props: AuthenticatedProps): JSX.Element | null;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/authenticated/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/authenticated/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAyC1B,oBAAY,wBAAwB,GAAG;IACnC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF,oBAAY,wBAAwB,GAAG;IACnC,8BAA8B,EAAE,IAAI,CAAC;CACxC,GAAG,wBAAwB,CAAC;AAE7B,oBAAY,kBAAkB,GAAG;IAC7B,8BAA8B,CAAC,EAAE,KAAK,CAAC;CAC1C,GAAG,wBAAwB,CAAC;AAE7B,wBAAgB,aAAa,CACzB,KAAK,EAAE,wBAAwB,GAChC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AAEtB,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/authenticated/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,oBAAY,wBAAwB,GAAG;IACnC;;;;OAIG;IACH,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC;IACf;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF,oBAAY,wBAAwB,GAAG;IACnC,8BAA8B,EAAE,IAAI,CAAC;CACxC,GAAG,wBAAwB,CAAC;AAE7B,oBAAY,kBAAkB,GAAG;IAC7B,8BAA8B,CAAC,EAAE,KAAK,CAAC;CAC1C,GAAG,wBAAwB,CAAC;AAE7B;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CACzB,KAAK,EAAE,wBAAwB,GAChC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AAEtB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC"}

package/dist/components/gh-banner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/gh-banner/index.tsx"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY,mBAmFxB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/gh-banner/index.tsx"],"names":[],"mappings":";AAMA,eAAO,MAAM,YAAY,mBA+HxB,CAAC"}

package/dist/components/gh-banner/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/gh-banner/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,UAiEpB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/gh-banner/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,UA6CpB,CAAC"}

package/dist/components/pages/auth/components/login/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/auth/components/login/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,cAAc,EAAkB,MAAM,2BAA2B,CAAC;AAK3E,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGpD,aAAK,UAAU,GAAG,cAAc,CAAC,YAAY,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC;AAE5E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwK1C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/auth/components/login/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,cAAc,EAAkB,MAAM,2BAA2B,CAAC;AAK3E,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGpD,aAAK,UAAU,GAAG,cAAc,CAAC,YAAY,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC;AAE5E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAkM1C,CAAC"}

package/dist/components/pages/auth/components/register/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/auth/components/register/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAU9D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGpD,aAAK,aAAa,GAAG,iBAAiB,CAClC,YAAY,EACZ,YAAY,EACZ,aAAa,CAChB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgJhD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/auth/components/register/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAU9D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGpD,aAAK,aAAa,GAAG,iBAAiB,CAClC,YAAY,EACZ,YAAY,EACZ,aAAa,CAChB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuKhD,CAAC"}

package/dist/components/pages/welcome/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/welcome/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAoGxC;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EA6G/B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/welcome/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA8CxC;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EA2J/B,CAAC"}