Rename KcApp to KcPage

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; }) {`,
                 ``,
                 `     // ...`,
                 ``,

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 });

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 };
 }

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 />
 };

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: {

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: [

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" }
             }}

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",

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,

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 });

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 };
 }

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 />
 };

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 />
 };

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 />
 };

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" }
             }}

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 />
 };

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 />
 };

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"

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 }
             }}

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),

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 />
 };

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 />
 };

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 />
 };

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 />
 };

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 />
 };

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 />
 };

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 />
 };

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 />
 };

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 />
 };

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 />
 };

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 />
 };

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,

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 />
 };

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 />
 };

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,

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 />
 };

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 />
 };

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 />
 };

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: {

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 />
 };

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: [

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"

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 />
 };

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 />
 };

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 />
 };

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 />
 };