From 802cef41a65c915871af80db933ad162e0cdd0da Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Sun, 9 Jun 2024 11:53:25 +0200
Subject: [PATCH] Rename KcApp to KcPage

---
 src/bin/eject-page.ts                         |  8 +++---
 stories/account/{KcApp.tsx => KcPage.tsx}     |  2 +-
 .../{PageStory.tsx => KcPageStory.tsx}        | 10 +++----
 stories/account/pages/Account.stories.tsx     | 10 +++----
 .../pages/FederatedIdentity.stories.tsx       | 12 ++++-----
 stories/account/pages/Log.stories.tsx         | 10 +++----
 stories/account/pages/Password.stories.tsx    | 12 ++++-----
 stories/account/pages/Sessions.stories.tsx    | 12 ++++-----
 stories/account/pages/Totp.stories.tsx        | 16 ++++++------
 stories/login/{KcApp.tsx => KcPage.tsx}       |  2 +-
 .../login/{PageStory.tsx => KcPageStory.tsx}  | 10 +++----
 stories/login/pages/Code.stories.tsx          | 10 +++----
 .../pages/DeleteAccountConfirm.stories.tsx    | 10 +++----
 .../login/pages/DeleteCredential.stories.tsx  | 10 +++----
 stories/login/pages/Error.stories.tsx         | 12 ++++-----
 .../pages/FrontchannelLogout.stories.tsx      | 10 +++----
 .../pages/IdpReviewUserProfile.stories.tsx    | 10 +++----
 stories/login/pages/Info.stories.tsx          | 14 +++++-----
 stories/login/pages/Login.stories.tsx         | 26 +++++++++----------
 .../login/pages/LoginConfigTotp.stories.tsx   | 14 +++++-----
 .../LoginDeviceVerifyUserCode.stories.tsx     | 10 +++----
 .../pages/LoginIdpLinkConfirm.stories.tsx     | 10 +++----
 .../login/pages/LoginIdpLinkEmail.stories.tsx | 10 +++----
 ...oginOauth2DeviceVerifyUserCode.stories.tsx | 10 +++----
 .../login/pages/LoginOauthGrant.stories.tsx   | 10 +++----
 stories/login/pages/LoginOtp.stories.tsx      | 10 +++----
 .../login/pages/LoginPageExpired.stories.tsx  | 10 +++----
 stories/login/pages/LoginPassword.stories.tsx | 10 +++----
 .../LoginRecoveryAuthnCodeConfig.stories.tsx  | 10 +++----
 .../LoginRecoveryAuthnCodeInput.stories.tsx   | 10 +++----
 stories/login/pages/LoginResetOtp.stories.tsx | 10 +++----
 .../pages/LoginResetPassword.stories.tsx      | 12 ++++-----
 .../pages/LoginUpdatePassword.stories.tsx     | 10 +++----
 .../pages/LoginUpdateProfile.stories.tsx      | 10 +++----
 stories/login/pages/LoginUsername.stories.tsx | 12 ++++-----
 .../login/pages/LoginVerifyEmail.stories.tsx  | 10 +++----
 stories/login/pages/LoginX509Info.stories.tsx | 10 +++----
 stories/login/pages/LogoutConfirm.stories.tsx | 10 +++----
 stories/login/pages/Register.stories.tsx      | 22 ++++++++--------
 stories/login/pages/SamlPostForm.stories.tsx  | 10 +++----
 .../pages/SelectAuthenticator.stories.tsx     | 12 ++++-----
 stories/login/pages/Terms.stories.tsx         | 14 +++++-----
 stories/login/pages/UpdateEmail.stories.tsx   | 10 +++----
 .../pages/WebauthnAuthenticate.stories.tsx    | 10 +++----
 stories/login/pages/WebauthnError.stories.tsx | 10 +++----
 .../login/pages/WebauthnRegister.stories.tsx  | 10 +++----
 46 files changed, 251 insertions(+), 251 deletions(-)
 rename stories/account/{KcApp.tsx => KcPage.tsx} (85%)
 rename stories/account/{PageStory.tsx => KcPageStory.tsx} (75%)
 rename stories/login/{KcApp.tsx => KcPage.tsx} (95%)
 rename stories/login/{PageStory.tsx => KcPageStory.tsx} (75%)

diff --git a/src/bin/eject-page.ts b/src/bin/eject-page.ts
index c2717036..01df60b3 100644
--- a/src/bin/eject-page.ts
+++ b/src/bin/eject-page.ts
@@ -149,7 +149,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             break edit_KcApp;
         }
 
-        const kcAppTsxPath = pathJoin(themeSrcDirPath, themeType, "KcApp.tsx");
+        const kcAppTsxPath = pathJoin(themeSrcDirPath, themeType, "KcPage.tsx");
 
         const kcAppTsxCode = fs.readFileSync(kcAppTsxPath).toString("utf8");
 
@@ -172,7 +172,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         if (kcAppTsxCode === modifiedKcAppTsxCode) {
             console.log(
                 chalk.red(
-                    "Unable to automatically update KcApp.tsx, please update it manually"
+                    "Unable to automatically update KcPage.tsx, please update it manually"
                 )
             );
             return;
@@ -201,7 +201,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                     ".",
                     pathRelative(process.cwd(), themeSrcDirPath),
                     themeType,
-                    "KcApp.tsx"
+                    "KcPage.tsx"
                 )
             )}:`,
             chalk.grey("```"),
@@ -215,7 +215,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             ),
             ...[
                 ``,
-                ` export default function KcApp(props: { kcContext: KcContext; }) {`,
+                ` export default function KcPage(props: { kcContext: KcContext; }) {`,
                 ``,
                 `     // ...`,
                 ``,
diff --git a/stories/account/KcApp.tsx b/stories/account/KcPage.tsx
similarity index 85%
rename from stories/account/KcApp.tsx
rename to stories/account/KcPage.tsx
index a8f2ee89..c58bb128 100644
--- a/stories/account/KcApp.tsx
+++ b/stories/account/KcPage.tsx
@@ -4,7 +4,7 @@ import { useI18n } from "./i18n";
 import type { KcContext } from "./KcContext";
 import Template from "../../dist/account/Template";
 
-export default function KcApp(props: { kcContext: KcContext }) {
+export default function KcPage(props: { kcContext: KcContext }) {
     const { kcContext } = props;
 
     const { i18n } = useI18n({ kcContext });
diff --git a/stories/account/PageStory.tsx b/stories/account/KcPageStory.tsx
similarity index 75%
rename from stories/account/PageStory.tsx
rename to stories/account/KcPageStory.tsx
index 6e6321ae..7e45ea2d 100644
--- a/stories/account/PageStory.tsx
+++ b/stories/account/KcPageStory.tsx
@@ -3,7 +3,7 @@ import type { DeepPartial } from "../../dist/tools/DeepPartial";
 import type { KcContext } from "./KcContext";
 import { createGetKcContextMock } from "../../dist/account/KcContext";
 import type { KcContextExtension, KcContextExtensionPerPage } from "./KcContext";
-import KcApp from "./KcApp";
+import KcPage from "./KcPage";
 import { themeNames, kcEnvDefaults } from "../kc.gen";
 
 const kcContextExtension: KcContextExtension = {
@@ -21,10 +21,10 @@ export const { getKcContextMock } = createGetKcContextMock({
     overridesPerPage: {}
 });
 
-export function createPageStory<PageId extends KcContext["pageId"]>(params: { pageId: PageId }) {
+export function createKcPageStory<PageId extends KcContext["pageId"]>(params: { pageId: PageId }) {
     const { pageId } = params;
 
-    function PageStory(props: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
+    function KcPageStory(props: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
         const { kcContext: overrides } = props;
 
         const kcContextMock = getKcContextMock({
@@ -34,10 +34,10 @@ export function createPageStory<PageId extends KcContext["pageId"]>(params: { pa
 
         return (
             <React.StrictMode>
-                <KcApp kcContext={kcContextMock} />
+                <KcPage kcContext={kcContextMock} />
             </React.StrictMode>
         );
     }
 
-    return { PageStory };
+    return { KcPageStory };
 }
diff --git a/stories/account/pages/Account.stories.tsx b/stories/account/pages/Account.stories.tsx
index d6aad7c8..04e654d2 100644
--- a/stories/account/pages/Account.stories.tsx
+++ b/stories/account/pages/Account.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "account.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "account.ftl" });
 
 const meta = {
     title: "account/account.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/account/pages/FederatedIdentity.stories.tsx b/stories/account/pages/FederatedIdentity.stories.tsx
index be5b4f09..ccb29405 100644
--- a/stories/account/pages/FederatedIdentity.stories.tsx
+++ b/stories/account/pages/FederatedIdentity.stories.tsx
@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "federatedIdentity.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "federatedIdentity.ftl" });
 
 const meta = {
     title: "account/federatedIdentity.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const NotConnected: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 pageId: "federatedIdentity.ftl",
                 federatedIdentity: {
diff --git a/stories/account/pages/Log.stories.tsx b/stories/account/pages/Log.stories.tsx
index 47fb5a05..e945f8be 100644
--- a/stories/account/pages/Log.stories.tsx
+++ b/stories/account/pages/Log.stories.tsx
@@ -1,15 +1,15 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({
+const { KcPageStory } = createKcPageStory({
     pageId: "log.ftl"
 });
 
 const meta = {
     title: "account/log.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 log: {
                     events: [
diff --git a/stories/account/pages/Password.stories.tsx b/stories/account/pages/Password.stories.tsx
index c0ba3198..b9632bd9 100644
--- a/stories/account/pages/Password.stories.tsx
+++ b/stories/account/pages/Password.stories.tsx
@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "password.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "password.ftl" });
 
 const meta = {
     title: "account/password.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithMessage: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 message: { type: "success", summary: "This is a test message" }
             }}
diff --git a/stories/account/pages/Sessions.stories.tsx b/stories/account/pages/Sessions.stories.tsx
index 92dc8349..434622f5 100644
--- a/stories/account/pages/Sessions.stories.tsx
+++ b/stories/account/pages/Sessions.stories.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "sessions.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "sessions.ftl" });
 
 const meta = {
     title: "account/sessions.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
@@ -15,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 sessions: {
                     sessions: [
@@ -45,7 +45,7 @@ export const Default: Story = {
 
 export const WithError: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 url: { passwordUrl: "/auth/realms/keycloakify/account/password" },
                 stateChecker: "xQ7EOgFrLi4EvnJ8dbXKhwFGWk_bkOp0X89mhilt1os",
diff --git a/stories/account/pages/Totp.stories.tsx b/stories/account/pages/Totp.stories.tsx
index 86bda33b..1ad1f027 100644
--- a/stories/account/pages/Totp.stories.tsx
+++ b/stories/account/pages/Totp.stories.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "totp.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "totp.ftl" });
 
 const meta = {
     title: "account/totp.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
@@ -15,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 totp: {
                     enabled: false,
@@ -51,7 +51,7 @@ export const Default: Story = {
 
 export const WithTotpEnabled: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 totp: {
                     enabled: true,
@@ -98,7 +98,7 @@ export const WithTotpEnabled: Story = {
 
 export const WithManualMode: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 mode: "manual",
                 totp: {
@@ -136,7 +136,7 @@ export const WithManualMode: Story = {
 
 export const MoreThanOneTotpProviders: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 totp: {
                     enabled: true,
diff --git a/stories/login/KcApp.tsx b/stories/login/KcPage.tsx
similarity index 95%
rename from stories/login/KcApp.tsx
rename to stories/login/KcPage.tsx
index a28272ba..6f86e5a4 100644
--- a/stories/login/KcApp.tsx
+++ b/stories/login/KcPage.tsx
@@ -6,7 +6,7 @@ import { useDownloadTerms } from "../../dist/login/lib/useDownloadTerms";
 import Template from "../../dist/login/Template";
 import UserProfileFormFields from "../../dist/login/UserProfileFormFields";
 
-export default function KcApp(props: { kcContext: KcContext }) {
+export default function KcPage(props: { kcContext: KcContext }) {
     const { kcContext } = props;
 
     const { i18n } = useI18n({ kcContext });
diff --git a/stories/login/PageStory.tsx b/stories/login/KcPageStory.tsx
similarity index 75%
rename from stories/login/PageStory.tsx
rename to stories/login/KcPageStory.tsx
index 9ecde5df..f0043b00 100644
--- a/stories/login/PageStory.tsx
+++ b/stories/login/KcPageStory.tsx
@@ -3,7 +3,7 @@ import type { DeepPartial } from "../../dist/tools/DeepPartial";
 import type { KcContext } from "./KcContext";
 import { createGetKcContextMock } from "../../dist/login/KcContext";
 import type { KcContextExtension, KcContextExtensionPerPage } from "./KcContext";
-import KcApp from "./KcApp";
+import KcPage from "./KcPage";
 import { themeNames, kcEnvDefaults } from "../kc.gen";
 
 const kcContextExtension: KcContextExtension = {
@@ -21,10 +21,10 @@ export const { getKcContextMock } = createGetKcContextMock({
     overridesPerPage: {}
 });
 
-export function createPageStory<PageId extends KcContext["pageId"]>(params: { pageId: PageId }) {
+export function createKcPageStory<PageId extends KcContext["pageId"]>(params: { pageId: PageId }) {
     const { pageId } = params;
 
-    function PageStory(props: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
+    function KcPageStory(props: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
         const { kcContext: overrides } = props;
 
         const kcContextMock = getKcContextMock({
@@ -34,10 +34,10 @@ export function createPageStory<PageId extends KcContext["pageId"]>(params: { pa
 
         return (
             <React.StrictMode>
-                <KcApp kcContext={kcContextMock} />
+                <KcPage kcContext={kcContextMock} />
             </React.StrictMode>
         );
     }
 
-    return { PageStory };
+    return { KcPageStory };
 }
diff --git a/stories/login/pages/Code.stories.tsx b/stories/login/pages/Code.stories.tsx
index cb15d4dd..0fcdf87f 100644
--- a/stories/login/pages/Code.stories.tsx
+++ b/stories/login/pages/Code.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "code.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "code.ftl" });
 
 const meta = {
     title: "login/code.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/DeleteAccountConfirm.stories.tsx b/stories/login/pages/DeleteAccountConfirm.stories.tsx
index 87f25a4f..501fa0c4 100644
--- a/stories/login/pages/DeleteAccountConfirm.stories.tsx
+++ b/stories/login/pages/DeleteAccountConfirm.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "delete-account-confirm.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "delete-account-confirm.ftl" });
 
 const meta = {
     title: "login/delete-account-confirm.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/DeleteCredential.stories.tsx b/stories/login/pages/DeleteCredential.stories.tsx
index 4776b60a..7b211a52 100644
--- a/stories/login/pages/DeleteCredential.stories.tsx
+++ b/stories/login/pages/DeleteCredential.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "delete-credential.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "delete-credential.ftl" });
 
 const meta = {
     title: "login/delete-credential.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/Error.stories.tsx b/stories/login/pages/Error.stories.tsx
index 62e6405c..7b12410e 100644
--- a/stories/login/pages/Error.stories.tsx
+++ b/stories/login/pages/Error.stories.tsx
@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "error.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "error.ftl" });
 
 const meta = {
     title: "login/error.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithAnotherMessage: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 message: { summary: "With another error message" }
             }}
diff --git a/stories/login/pages/FrontchannelLogout.stories.tsx b/stories/login/pages/FrontchannelLogout.stories.tsx
index 49428037..9dacf0b0 100644
--- a/stories/login/pages/FrontchannelLogout.stories.tsx
+++ b/stories/login/pages/FrontchannelLogout.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "frontchannel-logout.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "frontchannel-logout.ftl" });
 
 const meta = {
     title: "login/frontchannel-logout.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/IdpReviewUserProfile.stories.tsx b/stories/login/pages/IdpReviewUserProfile.stories.tsx
index ad541998..6778e77d 100644
--- a/stories/login/pages/IdpReviewUserProfile.stories.tsx
+++ b/stories/login/pages/IdpReviewUserProfile.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "idp-review-user-profile.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "idp-review-user-profile.ftl" });
 
 const meta = {
     title: "login/idp-review-user-profile.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/Info.stories.tsx b/stories/login/pages/Info.stories.tsx
index 11582261..762f7b44 100644
--- a/stories/login/pages/Info.stories.tsx
+++ b/stories/login/pages/Info.stories.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "info.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "info.ftl" });
 
 const meta = {
     title: "login/info.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
@@ -15,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 message: {
                     summary: "Server info message"
@@ -27,7 +27,7 @@ export const Default: Story = {
 
 export const WithLinkBack: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 message: {
                     summary: "Server message"
@@ -40,7 +40,7 @@ export const WithLinkBack: Story = {
 
 export const WithRequiredActions: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 message: {
                     summary: "Server message"
diff --git a/stories/login/pages/Login.stories.tsx b/stories/login/pages/Login.stories.tsx
index f1a0a3d2..7c9fc242 100644
--- a/stories/login/pages/Login.stories.tsx
+++ b/stories/login/pages/Login.stories.tsx
@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login.ftl" });
 
 const meta = {
     title: "login/login.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithoutRegistration: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: { registrationAllowed: false }
             }}
@@ -29,7 +29,7 @@ export const WithoutRegistration: Story = {
 
 export const WithoutRememberMe: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: { rememberMe: false }
             }}
@@ -39,7 +39,7 @@ export const WithoutRememberMe: Story = {
 
 export const WithoutPasswordReset: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: { resetPasswordAllowed: false }
             }}
@@ -49,7 +49,7 @@ export const WithoutPasswordReset: Story = {
 
 export const WithEmailAsUsername: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: { loginWithEmailAllowed: false }
             }}
@@ -59,7 +59,7 @@ export const WithEmailAsUsername: Story = {
 
 export const WithPresetUsername: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 login: { username: "max.mustermann@mail.com" }
             }}
@@ -69,7 +69,7 @@ export const WithPresetUsername: Story = {
 
 export const WithImmutablePresetUsername: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 auth: {
                     attemptedUsername: "max.mustermann@mail.com",
@@ -87,7 +87,7 @@ export const WithImmutablePresetUsername: Story = {
 
 export const WithSocialProviders: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 social: {
                     displayInfo: true,
@@ -173,7 +173,7 @@ export const WithSocialProviders: Story = {
 
 export const WithoutPasswordField: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: { password: false }
             }}
diff --git a/stories/login/pages/LoginConfigTotp.stories.tsx b/stories/login/pages/LoginConfigTotp.stories.tsx
index 3b5732b3..5d38df9b 100644
--- a/stories/login/pages/LoginConfigTotp.stories.tsx
+++ b/stories/login/pages/LoginConfigTotp.stories.tsx
@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-config-totp.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-config-totp.ftl" });
 
 const meta = {
     title: "login/login-config-totp.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithManualSetUp: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 mode: "manual"
             }}
@@ -29,7 +29,7 @@ export const WithManualSetUp: Story = {
 
 export const WithError: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 messagesPerField: {
                     get: (fieldName: string) => (fieldName === "totp" ? "Invalid TOTP" : undefined),
diff --git a/stories/login/pages/LoginDeviceVerifyUserCode.stories.tsx b/stories/login/pages/LoginDeviceVerifyUserCode.stories.tsx
index e124bab3..0999ba0f 100644
--- a/stories/login/pages/LoginDeviceVerifyUserCode.stories.tsx
+++ b/stories/login/pages/LoginDeviceVerifyUserCode.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-oauth2-device-verify-user-code.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-oauth2-device-verify-user-code.ftl" });
 
 const meta = {
     title: "login/login-oauth2-device-verify-user-code.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/LoginIdpLinkConfirm.stories.tsx b/stories/login/pages/LoginIdpLinkConfirm.stories.tsx
index dd5db319..6642bf2b 100644
--- a/stories/login/pages/LoginIdpLinkConfirm.stories.tsx
+++ b/stories/login/pages/LoginIdpLinkConfirm.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-idp-link-confirm.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-idp-link-confirm.ftl" });
 
 const meta = {
     title: "login/login-idp-link-confirm.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/LoginIdpLinkEmail.stories.tsx b/stories/login/pages/LoginIdpLinkEmail.stories.tsx
index 79b1dc94..a58ae2d3 100644
--- a/stories/login/pages/LoginIdpLinkEmail.stories.tsx
+++ b/stories/login/pages/LoginIdpLinkEmail.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-idp-link-email.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-idp-link-email.ftl" });
 
 const meta = {
     title: "login/login-idp-link-email.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/LoginOauth2DeviceVerifyUserCode.stories.tsx b/stories/login/pages/LoginOauth2DeviceVerifyUserCode.stories.tsx
index e124bab3..0999ba0f 100644
--- a/stories/login/pages/LoginOauth2DeviceVerifyUserCode.stories.tsx
+++ b/stories/login/pages/LoginOauth2DeviceVerifyUserCode.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-oauth2-device-verify-user-code.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-oauth2-device-verify-user-code.ftl" });
 
 const meta = {
     title: "login/login-oauth2-device-verify-user-code.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/LoginOauthGrant.stories.tsx b/stories/login/pages/LoginOauthGrant.stories.tsx
index bfcb7465..53569903 100644
--- a/stories/login/pages/LoginOauthGrant.stories.tsx
+++ b/stories/login/pages/LoginOauthGrant.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-oauth-grant.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-oauth-grant.ftl" });
 
 const meta = {
     title: "login/login-oauth-grant.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/LoginOtp.stories.tsx b/stories/login/pages/LoginOtp.stories.tsx
index a5c9c646..84b1061a 100644
--- a/stories/login/pages/LoginOtp.stories.tsx
+++ b/stories/login/pages/LoginOtp.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-otp.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-otp.ftl" });
 
 const meta = {
     title: "login/login-otp.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/LoginPageExpired.stories.tsx b/stories/login/pages/LoginPageExpired.stories.tsx
index 3d3f6020..22e43072 100644
--- a/stories/login/pages/LoginPageExpired.stories.tsx
+++ b/stories/login/pages/LoginPageExpired.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-page-expired.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-page-expired.ftl" });
 
 const meta = {
     title: "login/login-page-expired.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/LoginPassword.stories.tsx b/stories/login/pages/LoginPassword.stories.tsx
index 66e42a3d..247ec786 100644
--- a/stories/login/pages/LoginPassword.stories.tsx
+++ b/stories/login/pages/LoginPassword.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-password.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-password.ftl" });
 
 const meta = {
     title: "login/login-password.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/LoginRecoveryAuthnCodeConfig.stories.tsx b/stories/login/pages/LoginRecoveryAuthnCodeConfig.stories.tsx
index 0afb8247..26c181fa 100644
--- a/stories/login/pages/LoginRecoveryAuthnCodeConfig.stories.tsx
+++ b/stories/login/pages/LoginRecoveryAuthnCodeConfig.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-recovery-authn-code-config.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-recovery-authn-code-config.ftl" });
 
 const meta = {
     title: "login/login-recovery-authn-code-config.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/LoginRecoveryAuthnCodeInput.stories.tsx b/stories/login/pages/LoginRecoveryAuthnCodeInput.stories.tsx
index 88a344dd..d4cddcc8 100644
--- a/stories/login/pages/LoginRecoveryAuthnCodeInput.stories.tsx
+++ b/stories/login/pages/LoginRecoveryAuthnCodeInput.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-recovery-authn-code-input.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-recovery-authn-code-input.ftl" });
 
 const meta = {
     title: "login/login-recovery-authn-code-input.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/LoginResetOtp.stories.tsx b/stories/login/pages/LoginResetOtp.stories.tsx
index 16dc5625..59db7637 100644
--- a/stories/login/pages/LoginResetOtp.stories.tsx
+++ b/stories/login/pages/LoginResetOtp.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-reset-otp.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-reset-otp.ftl" });
 
 const meta = {
     title: "login/login-reset-otp.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/LoginResetPassword.stories.tsx b/stories/login/pages/LoginResetPassword.stories.tsx
index 53bae39a..12412f31 100644
--- a/stories/login/pages/LoginResetPassword.stories.tsx
+++ b/stories/login/pages/LoginResetPassword.stories.tsx
@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-reset-password.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-reset-password.ftl" });
 
 const meta = {
     title: "login/login-reset-password.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithEmailAsUsername: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: {
                     loginWithEmailAllowed: true,
diff --git a/stories/login/pages/LoginUpdatePassword.stories.tsx b/stories/login/pages/LoginUpdatePassword.stories.tsx
index 35e38e28..904e3983 100644
--- a/stories/login/pages/LoginUpdatePassword.stories.tsx
+++ b/stories/login/pages/LoginUpdatePassword.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-update-password.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-update-password.ftl" });
 
 const meta = {
     title: "login/login-update-password.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/LoginUpdateProfile.stories.tsx b/stories/login/pages/LoginUpdateProfile.stories.tsx
index a7e4f394..bb5a6e04 100644
--- a/stories/login/pages/LoginUpdateProfile.stories.tsx
+++ b/stories/login/pages/LoginUpdateProfile.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-update-profile.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-update-profile.ftl" });
 
 const meta = {
     title: "login/login-update-profile.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/LoginUsername.stories.tsx b/stories/login/pages/LoginUsername.stories.tsx
index 07818c80..a391ffb5 100644
--- a/stories/login/pages/LoginUsername.stories.tsx
+++ b/stories/login/pages/LoginUsername.stories.tsx
@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-username.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-username.ftl" });
 
 const meta = {
     title: "login/login-username.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithEmailAsUsername: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: {
                     loginWithEmailAllowed: true,
diff --git a/stories/login/pages/LoginVerifyEmail.stories.tsx b/stories/login/pages/LoginVerifyEmail.stories.tsx
index 31482071..2005b977 100644
--- a/stories/login/pages/LoginVerifyEmail.stories.tsx
+++ b/stories/login/pages/LoginVerifyEmail.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-verify-email.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-verify-email.ftl" });
 
 const meta = {
     title: "login/login-verify-email.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/LoginX509Info.stories.tsx b/stories/login/pages/LoginX509Info.stories.tsx
index 432a37aa..f3c6be75 100644
--- a/stories/login/pages/LoginX509Info.stories.tsx
+++ b/stories/login/pages/LoginX509Info.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-x509-info.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-x509-info.ftl" });
 
 const meta = {
     title: "login/login-x509-info.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/LogoutConfirm.stories.tsx b/stories/login/pages/LogoutConfirm.stories.tsx
index 5e3d11fe..20ae5c94 100644
--- a/stories/login/pages/LogoutConfirm.stories.tsx
+++ b/stories/login/pages/LogoutConfirm.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "logout-confirm.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "logout-confirm.ftl" });
 
 const meta = {
     title: "login/logout-confirm.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/Register.stories.tsx b/stories/login/pages/Register.stories.tsx
index b7542c1b..3aa91f19 100644
--- a/stories/login/pages/Register.stories.tsx
+++ b/stories/login/pages/Register.stories.tsx
@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "register.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "register.ftl" });
 
 const meta = {
     title: "login/register.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithFieldError: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 profile: {
                     attributesByName: {
@@ -41,7 +41,7 @@ export const WithFieldError: Story = {
 
 export const WithEmailAsUsername: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: {
                     registrationEmailAsUsername: true
@@ -53,7 +53,7 @@ export const WithEmailAsUsername: Story = {
 
 export const WithoutPassword: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 passwordRequired: false
             }}
@@ -63,7 +63,7 @@ export const WithoutPassword: Story = {
 
 export const WithRecaptcha: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 scripts: ["https://www.google.com/recaptcha/api.js?hl=en"],
                 recaptchaRequired: true,
@@ -75,7 +75,7 @@ export const WithRecaptcha: Story = {
 
 export const WithRecaptchaFrench: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 locale: {
                     currentLanguageTag: "fr"
@@ -90,7 +90,7 @@ export const WithRecaptchaFrench: Story = {
 
 export const WithPresets: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 profile: {
                     attributesByName: {
diff --git a/stories/login/pages/SamlPostForm.stories.tsx b/stories/login/pages/SamlPostForm.stories.tsx
index 88aa03aa..32faad13 100644
--- a/stories/login/pages/SamlPostForm.stories.tsx
+++ b/stories/login/pages/SamlPostForm.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "saml-post-form.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "saml-post-form.ftl" });
 
 const meta = {
     title: "login/saml-post-form.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/SelectAuthenticator.stories.tsx b/stories/login/pages/SelectAuthenticator.stories.tsx
index 5e80b30c..bc62822d 100644
--- a/stories/login/pages/SelectAuthenticator.stories.tsx
+++ b/stories/login/pages/SelectAuthenticator.stories.tsx
@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "select-authenticator.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "select-authenticator.ftl" });
 
 const meta = {
     title: "login/select-authenticator.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithDifferentAuthenticationMethods: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 auth: {
                     authenticationSelections: [
diff --git a/stories/login/pages/Terms.stories.tsx b/stories/login/pages/Terms.stories.tsx
index 31ae9cc4..624106df 100644
--- a/stories/login/pages/Terms.stories.tsx
+++ b/stories/login/pages/Terms.stories.tsx
@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "terms.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "terms.ftl" });
 
 const meta = {
     title: "login/terms.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const French: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 locale: {
                     currentLanguageTag: "fr"
@@ -31,7 +31,7 @@ export const French: Story = {
 
 export const Spanish: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 locale: {
                     currentLanguageTag: "es"
diff --git a/stories/login/pages/UpdateEmail.stories.tsx b/stories/login/pages/UpdateEmail.stories.tsx
index b7ba3499..bcb56556 100644
--- a/stories/login/pages/UpdateEmail.stories.tsx
+++ b/stories/login/pages/UpdateEmail.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "update-email.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "update-email.ftl" });
 
 const meta = {
     title: "login/update-email.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/WebauthnAuthenticate.stories.tsx b/stories/login/pages/WebauthnAuthenticate.stories.tsx
index 4c11c679..fc68e97b 100644
--- a/stories/login/pages/WebauthnAuthenticate.stories.tsx
+++ b/stories/login/pages/WebauthnAuthenticate.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "webauthn-authenticate.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "webauthn-authenticate.ftl" });
 
 const meta = {
     title: "login/webauthn-authenticate.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/WebauthnError.stories.tsx b/stories/login/pages/WebauthnError.stories.tsx
index 6ce6a81a..db76221b 100644
--- a/stories/login/pages/WebauthnError.stories.tsx
+++ b/stories/login/pages/WebauthnError.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "webauthn-error.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "webauthn-error.ftl" });
 
 const meta = {
     title: "login/webauthn-error.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
diff --git a/stories/login/pages/WebauthnRegister.stories.tsx b/stories/login/pages/WebauthnRegister.stories.tsx
index 96d0867b..ff8b70bb 100644
--- a/stories/login/pages/WebauthnRegister.stories.tsx
+++ b/stories/login/pages/WebauthnRegister.stories.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "webauthn-register.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "webauthn-register.ftl" });
 
 const meta = {
     title: "login/webauthn-register.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };