@inf-monkeys-tech/monkeys-design 0.4.36 → 0.4.37

package/README.md

@@ -68,6 +68,109 @@ export function Example() {
 | `@inf-monkeys-tech/monkeys-design/palette` | palette 工具 |
 | `@inf-monkeys-tech/monkeys-design/theme-system` | 主题解析与应用工具 |
 
+## LoginPage
+
+`LoginPage` 是通用登录页 UI 组件。组件库只负责页面结构和样式契约，不包含登录请求、OAuth、路由、租户判断、i18n 初始化或租户定制样式。
+
+```tsx
+import {
+  LoginPage,
+  type LoginPageMethodConfig,
+} from '@inf-monkeys-tech/monkeys-design/components/login';
+import '@inf-monkeys-tech/monkeys-design/styles/login-page.scss';
+
+const methods: LoginPageMethodConfig[] = [
+  {
+    id: 'email',
+    label: 'Email',
+    fields: [],
+    submitLabel: 'Login',
+    onSubmit: (event) => event.preventDefault(),
+  },
+];
+
+export function Example() {
+  return (
+    <LoginPage
+      background={{ imageUrl: '', gradient: '' }}
+      logo={{ url: '', position: 'bottom', scale: 1 }}
+      primaryColor="#4D8F9D"
+      radius="12px"
+      toolbar={<div />}
+      title="Welcome"
+      methods={methods}
+    />
+  );
+}
+```
+
+默认背景规则：
+
+- 配置了 `background.imageUrl` 或 `background.gradient` 时，使用配置背景。
+- 未配置背景时，浅色模式使用白色和主题色渐变。
+- 未配置背景时，`.dark` 深色模式使用黑色和主题色渐变。
+
+宿主应用负责把全局主题传入 `primaryColor` 和 `radius`，组件会把它们作为 `--login-page-theme-primary-color` 和 `--login-page-theme-radius` 默认来源；页面级 `customCss` 仍可通过公开的 `--login-page-*` 变量做租户级覆盖。深浅色切换、语言切换等应用级控件通过 `toolbar` 传入。
+
+### LoginPage CSS 契约
+
+页面级自定义样式只能依赖 `data-login-page`、`data-login-part` 和公开 CSS 变量。不要依赖租户 id，不要新增登录页代码分支。
+
+推荐优先覆盖变量：
+
+```css
+[data-login-page] {
+  --login-page-panel-bg: rgb(255 255 255 / 0.92);
+  --login-page-panel-border: rgb(17 17 17 / 0.08);
+  --login-page-panel-shadow: 0 24px 60px rgb(0 0 0 / 0.08);
+  --login-page-control-bg: #ffffff;
+  --login-page-control-border: rgb(17 17 17 / 0.12);
+  --login-page-control-text: #111111;
+  --login-page-control-placeholder: #9f9fa9;
+  --login-page-form-width: 500px;
+}
+
+.dark [data-login-page] {
+  --login-page-panel-bg: rgb(12 12 12 / 0.9);
+  --login-page-control-bg: #111111;
+}
+```
+
+公开部件：
+
+```css
+[data-login-part='root'] {}
+[data-login-part='background'] {}
+[data-login-part='toolbar'] {}
+[data-login-part='logo'] {}
+[data-login-part='logo-image'] {}
+[data-login-part='panel'] {}
+[data-login-part='back'] {}
+[data-login-part='back-icon'] {}
+[data-login-part='title'] {}
+[data-login-part='tabs'] {}
+[data-login-part='tab'] {}
+[data-login-part='tab-icon'] {}
+[data-login-part='form'] {}
+[data-login-part='field'] {}
+[data-login-part='input'] {}
+[data-login-part='checkbox-label'] {}
+[data-login-part='checkbox'] {}
+[data-login-part='method-footer'] {}
+[data-login-part='method-footer-action'] {}
+[data-login-part='submit-button'] {}
+[data-login-part='callout'] {}
+[data-login-part='callout-title'] {}
+[data-login-part='callout-description'] {}
+[data-login-part='callout-detail'] {}
+[data-login-part='callout-action'] {}
+[data-login-part='external-methods'] {}
+[data-login-part='external-label'] {}
+[data-login-part='external-list'] {}
+[data-login-part='external-button'] {}
+[data-login-part='external-icon'] {}
+```
+
 ## 基础组件
 
 基础组件从 `components/base` 子路径导入：

package/dist/components/login/index.d.mts

@@ -1,5 +1,99 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 
+type LoginPageLogoLocation = 'top' | 'middle' | 'bottom';
+interface LoginPageBackgroundConfig {
+    imageUrl?: string;
+    gradient?: string;
+}
+interface LoginPageLogoConfig {
+    url?: string;
+    alt?: string;
+    position?: LoginPageLogoLocation;
+    scale?: number;
+}
+interface LoginPageFieldConfig {
+    id?: string;
+    name: string;
+    type?: React__default.HTMLInputTypeAttribute;
+    value: string;
+    placeholder?: string;
+    autoComplete?: string;
+    inputMode?: React__default.HTMLAttributes<HTMLInputElement>['inputMode'];
+    maxLength?: number;
+    pattern?: string;
+    required?: boolean;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+}
+interface LoginPageCheckboxConfig {
+    id: string;
+    label: React__default.ReactNode;
+    checked: boolean;
+    disabled?: boolean;
+    onChange: (checked: boolean) => void;
+}
+interface LoginPageMethodConfig {
+    id: string;
+    label: React__default.ReactNode;
+    icon?: React__default.ReactNode;
+    fields: LoginPageFieldConfig[];
+    submitLabel: React__default.ReactNode;
+    loadingLabel?: React__default.ReactNode;
+    isLoading?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+    checkbox?: LoginPageCheckboxConfig;
+    footer?: React__default.ReactNode;
+    footerAction?: {
+        label: React__default.ReactNode;
+        disabled?: boolean;
+        onClick: () => void;
+    };
+    onSubmit: (event: React__default.FormEvent<HTMLFormElement>) => void;
+}
+interface LoginPageExternalMethodConfig {
+    id: string;
+    label: React__default.ReactNode;
+    icon?: React__default.ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+    render?: (button: React__default.ReactElement) => React__default.ReactNode;
+}
+interface LoginPageCalloutConfig {
+    tone?: 'info' | 'warning' | 'success' | 'danger';
+    title: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    detail?: React__default.ReactNode;
+    action?: {
+        label: React__default.ReactNode;
+        disabled?: boolean;
+        onClick: () => void;
+    };
+}
+interface LoginPageProps {
+    className?: string;
+    style?: React__default.CSSProperties;
+    background?: LoginPageBackgroundConfig;
+    logo?: LoginPageLogoConfig;
+    primaryColor?: string;
+    radius?: string;
+    customCss?: string;
+    toolbar?: React__default.ReactNode;
+    title?: React__default.ReactNode;
+    backAction?: {
+        label: React__default.ReactNode;
+        icon?: React__default.ReactNode;
+        onClick: () => void;
+    };
+    methods: LoginPageMethodConfig[];
+    activeMethodId?: string;
+    defaultMethodId?: string;
+    onMethodChange?: (methodId: string) => void;
+    externalLabel?: React__default.ReactNode;
+    externalMethods?: LoginPageExternalMethodConfig[];
+    callout?: LoginPageCalloutConfig;
+}
 interface LoginLayoutProps {
     className?: string;
     style?: React__default.CSSProperties;
@@ -76,6 +170,8 @@ interface PendingApprovalProps {
     onBack?: () => void;
 }
 
+declare function LoginPage({ className, style, background, logo, primaryColor, radius, customCss, toolbar, title, backAction, methods, activeMethodId, defaultMethodId, onMethodChange, externalLabel, externalMethods, callout, }: LoginPageProps): react_jsx_runtime.JSX.Element;
+
 declare const LoginLayout: React__default.FC<LoginLayoutProps>;
 
 declare const EmailAuth: React__default.ForwardRefExoticComponent<EmailAuthProps & React__default.RefAttributes<HTMLFormElement>>;
@@ -88,4 +184,4 @@ declare const AuthDivider: React__default.FC<AuthDividerProps>;
 
 declare const PendingApproval: React__default.FC<PendingApprovalProps>;
 
-export { AuthDivider, type AuthDividerProps, EmailAuth, type EmailAuthProps, LoginLayout, type LoginLayoutProps, OAuthButton, type OAuthButtonProps, OIDCButton, type OIDCButtonProps, PendingApproval, type PendingApprovalProps };
+export { AuthDivider, type AuthDividerProps, EmailAuth, type EmailAuthProps, LoginLayout, type LoginLayoutProps, LoginPage, type LoginPageBackgroundConfig, type LoginPageCalloutConfig, type LoginPageCheckboxConfig, type LoginPageExternalMethodConfig, type LoginPageFieldConfig, type LoginPageLogoConfig, type LoginPageLogoLocation, type LoginPageMethodConfig, type LoginPageProps, OAuthButton, type OAuthButtonProps, OIDCButton, type OIDCButtonProps, PendingApproval, type PendingApprovalProps };

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

@@ -1,5 +1,99 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 
+type LoginPageLogoLocation = 'top' | 'middle' | 'bottom';
+interface LoginPageBackgroundConfig {
+    imageUrl?: string;
+    gradient?: string;
+}
+interface LoginPageLogoConfig {
+    url?: string;
+    alt?: string;
+    position?: LoginPageLogoLocation;
+    scale?: number;
+}
+interface LoginPageFieldConfig {
+    id?: string;
+    name: string;
+    type?: React__default.HTMLInputTypeAttribute;
+    value: string;
+    placeholder?: string;
+    autoComplete?: string;
+    inputMode?: React__default.HTMLAttributes<HTMLInputElement>['inputMode'];
+    maxLength?: number;
+    pattern?: string;
+    required?: boolean;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+}
+interface LoginPageCheckboxConfig {
+    id: string;
+    label: React__default.ReactNode;
+    checked: boolean;
+    disabled?: boolean;
+    onChange: (checked: boolean) => void;
+}
+interface LoginPageMethodConfig {
+    id: string;
+    label: React__default.ReactNode;
+    icon?: React__default.ReactNode;
+    fields: LoginPageFieldConfig[];
+    submitLabel: React__default.ReactNode;
+    loadingLabel?: React__default.ReactNode;
+    isLoading?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+    checkbox?: LoginPageCheckboxConfig;
+    footer?: React__default.ReactNode;
+    footerAction?: {
+        label: React__default.ReactNode;
+        disabled?: boolean;
+        onClick: () => void;
+    };
+    onSubmit: (event: React__default.FormEvent<HTMLFormElement>) => void;
+}
+interface LoginPageExternalMethodConfig {
+    id: string;
+    label: React__default.ReactNode;
+    icon?: React__default.ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+    render?: (button: React__default.ReactElement) => React__default.ReactNode;
+}
+interface LoginPageCalloutConfig {
+    tone?: 'info' | 'warning' | 'success' | 'danger';
+    title: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    detail?: React__default.ReactNode;
+    action?: {
+        label: React__default.ReactNode;
+        disabled?: boolean;
+        onClick: () => void;
+    };
+}
+interface LoginPageProps {
+    className?: string;
+    style?: React__default.CSSProperties;
+    background?: LoginPageBackgroundConfig;
+    logo?: LoginPageLogoConfig;
+    primaryColor?: string;
+    radius?: string;
+    customCss?: string;
+    toolbar?: React__default.ReactNode;
+    title?: React__default.ReactNode;
+    backAction?: {
+        label: React__default.ReactNode;
+        icon?: React__default.ReactNode;
+        onClick: () => void;
+    };
+    methods: LoginPageMethodConfig[];
+    activeMethodId?: string;
+    defaultMethodId?: string;
+    onMethodChange?: (methodId: string) => void;
+    externalLabel?: React__default.ReactNode;
+    externalMethods?: LoginPageExternalMethodConfig[];
+    callout?: LoginPageCalloutConfig;
+}
 interface LoginLayoutProps {
     className?: string;
     style?: React__default.CSSProperties;
@@ -76,6 +170,8 @@ interface PendingApprovalProps {
     onBack?: () => void;
 }
 
+declare function LoginPage({ className, style, background, logo, primaryColor, radius, customCss, toolbar, title, backAction, methods, activeMethodId, defaultMethodId, onMethodChange, externalLabel, externalMethods, callout, }: LoginPageProps): react_jsx_runtime.JSX.Element;
+
 declare const LoginLayout: React__default.FC<LoginLayoutProps>;
 
 declare const EmailAuth: React__default.ForwardRefExoticComponent<EmailAuthProps & React__default.RefAttributes<HTMLFormElement>>;
@@ -88,4 +184,4 @@ declare const AuthDivider: React__default.FC<AuthDividerProps>;
 
 declare const PendingApproval: React__default.FC<PendingApprovalProps>;
 
-export { AuthDivider, type AuthDividerProps, EmailAuth, type EmailAuthProps, LoginLayout, type LoginLayoutProps, OAuthButton, type OAuthButtonProps, OIDCButton, type OIDCButtonProps, PendingApproval, type PendingApprovalProps };
+export { AuthDivider, type AuthDividerProps, EmailAuth, type EmailAuthProps, LoginLayout, type LoginLayoutProps, LoginPage, type LoginPageBackgroundConfig, type LoginPageCalloutConfig, type LoginPageCheckboxConfig, type LoginPageExternalMethodConfig, type LoginPageFieldConfig, type LoginPageLogoConfig, type LoginPageLogoLocation, type LoginPageMethodConfig, type LoginPageProps, OAuthButton, type OAuthButtonProps, OIDCButton, type OIDCButtonProps, PendingApproval, type PendingApprovalProps };

package/dist/components/login/index.js

@@ -1,13 +1,272 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-// src/components/login/LoginLayout.tsx
+// src/components/login/LoginPage.tsx
+var LOGIN_LOGO_POSITIONS = ["top", "middle", "bottom"];
+var normalizeCssValue = (value) => {
+  const trimmed = value?.trim();
+  return trimmed || void 0;
+};
+var createBackgroundImage = (gradient, imageUrl) => {
+  const resolvedGradient = normalizeCssValue(gradient);
+  const resolvedImageUrl = normalizeCssValue(imageUrl);
+  return [resolvedGradient, resolvedImageUrl ? `url(${JSON.stringify(resolvedImageUrl)})` : void 0].filter(Boolean).join(", ");
+};
+var normalizeLogoPosition = (position) => position && LOGIN_LOGO_POSITIONS.includes(position) ? position : "bottom";
+var normalizeLogoScale = (scale) => typeof scale === "number" && Number.isFinite(scale) && scale > 0 ? scale : void 0;
+function LoginPage({
+  className,
+  style,
+  background,
+  logo,
+  primaryColor,
+  radius,
+  customCss,
+  toolbar,
+  title,
+  backAction,
+  methods,
+  activeMethodId,
+  defaultMethodId,
+  onMethodChange,
+  externalLabel,
+  externalMethods = [],
+  callout
+}) {
+  const availableMethods = React.useMemo(() => methods.filter((method) => !method.hidden), [methods]);
+  const fallbackMethodId = defaultMethodId ?? availableMethods[0]?.id;
+  const [internalMethodId, setInternalMethodId] = React.useState(fallbackMethodId);
+  const currentMethodId = activeMethodId ?? internalMethodId;
+  const activeMethod = availableMethods.find((method) => method.id === currentMethodId) ?? availableMethods[0];
+  const hasTabs = availableMethods.length > 1;
+  const backgroundImage = createBackgroundImage(background?.gradient, background?.imageUrl);
+  const backgroundMode = backgroundImage ? "custom" : "default";
+  const logoPosition = normalizeLogoPosition(logo?.position);
+  const logoScale = normalizeLogoScale(logo?.scale);
+  React.useEffect(() => {
+    if (!availableMethods.length) {
+      setInternalMethodId(void 0);
+      return;
+    }
+    if (!currentMethodId || !availableMethods.some((method) => method.id === currentMethodId)) {
+      setInternalMethodId(fallbackMethodId ?? availableMethods[0]?.id);
+    }
+  }, [availableMethods, currentMethodId, fallbackMethodId]);
+  const rootStyle = React.useMemo(
+    () => ({
+      ...primaryColor ? { ["--login-page-theme-primary-color"]: primaryColor } : null,
+      ...radius ? { ["--login-page-theme-radius"]: radius } : null,
+      ...style
+    }),
+    [primaryColor, radius, style]
+  );
+  const handleMethodChange = (methodId) => {
+    if (activeMethodId === void 0) {
+      setInternalMethodId(methodId);
+    }
+    onMethodChange?.(methodId);
+  };
+  const renderExternalMethod = (method) => {
+    const button = /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "login-page__oauth-button",
+        "data-login-part": "external-button",
+        "data-login-method-id": method.id,
+        onClick: method.onClick,
+        disabled: method.disabled,
+        children: [
+          method.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "login-page__oauth-icon", "data-login-part": "external-icon", children: method.icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: method.label })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: method.render ? method.render(button) : button }, method.id);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "main",
+    {
+      className: ["login-page", className].filter(Boolean).join(" "),
+      "data-login-page": true,
+      "data-login-part": "root",
+      "data-login-background": backgroundMode,
+      style: rootStyle,
+      children: [
+        customCss ? /* @__PURE__ */ jsxRuntime.jsx("style", { "data-login-page-custom-css": true, children: customCss }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "login-page__background",
+            "data-login-part": "background",
+            "data-login-background": backgroundMode,
+            style: backgroundImage ? { backgroundImage } : void 0,
+            "aria-hidden": "true"
+          }
+        ),
+        toolbar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__toolbar", "data-login-part": "toolbar", children: toolbar }) : null,
+        logo?.url ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `login-page__logo login-page__logo--${logoPosition}`,
+            "data-login-part": "logo",
+            "data-logo-position": logoPosition,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                className: "login-page__logo-image",
+                "data-login-part": "logo-image",
+                src: logo.url,
+                alt: logo.alt ?? "",
+                style: logoScale ? { transform: `scale(${logoScale})` } : void 0
+              }
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "section",
+          {
+            className: "login-page__form",
+            "data-login-part": "panel",
+            "aria-label": typeof title === "string" ? title : void 0,
+            children: [
+              backAction ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "login-page__back", "data-login-part": "back", onClick: backAction.onClick, children: [
+                backAction.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "login-page__back-icon", "data-login-part": "back-icon", children: backAction.icon }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: backAction.label })
+              ] }) : null,
+              title ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "login-page__title", "data-login-part": "title", children: title }) : null,
+              hasTabs ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__tabs", "data-login-part": "tabs", role: "tablist", children: availableMethods.map((method) => {
+                const selected = method.id === activeMethod?.id;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": selected,
+                    className: `login-page__tab ${selected ? "login-page__tab--active" : ""}`,
+                    "data-login-part": "tab",
+                    "data-login-method-id": method.id,
+                    "data-active": selected ? "true" : "false",
+                    onClick: () => handleMethodChange(method.id),
+                    children: [
+                      method.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "login-page__tab-icon", "data-login-part": "tab-icon", children: method.icon }) : null,
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: method.label })
+                    ]
+                  },
+                  method.id
+                );
+              }) }) : null,
+              activeMethod ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "form",
+                {
+                  className: "login-page__form-fields",
+                  "data-login-part": "form",
+                  "data-login-method-id": activeMethod.id,
+                  onSubmit: activeMethod.onSubmit,
+                  children: [
+                    activeMethod.fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__field", "data-login-part": "field", "data-login-field-name": field.name, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        id: field.id,
+                        name: field.name,
+                        type: field.type ?? "text",
+                        value: field.value,
+                        placeholder: field.placeholder,
+                        autoComplete: field.autoComplete,
+                        inputMode: field.inputMode,
+                        maxLength: field.maxLength,
+                        pattern: field.pattern,
+                        disabled: activeMethod.disabled || activeMethod.isLoading || field.disabled,
+                        required: field.required,
+                        className: "login-page__input",
+                        "data-login-part": "input",
+                        onChange: (event) => field.onChange(event.target.value)
+                      }
+                    ) }, field.name)),
+                    activeMethod.checkbox ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "login-page__remember", "data-login-part": "checkbox-label", htmlFor: activeMethod.checkbox.id, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          id: activeMethod.checkbox.id,
+                          type: "checkbox",
+                          className: "login-page__checkbox",
+                          "data-login-part": "checkbox",
+                          checked: activeMethod.checkbox.checked,
+                          disabled: activeMethod.disabled || activeMethod.isLoading || activeMethod.checkbox.disabled,
+                          onChange: (event) => activeMethod.checkbox?.onChange(event.target.checked)
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: activeMethod.checkbox.label })
+                    ] }) : null,
+                    activeMethod.footer || activeMethod.footerAction ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "login-page__method-footer", "data-login-part": "method-footer", children: [
+                      activeMethod.footer,
+                      activeMethod.footerAction ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "login-page__method-footer-action",
+                          "data-login-part": "method-footer-action",
+                          "data-login-method-id": activeMethod.id,
+                          onClick: activeMethod.footerAction.onClick,
+                          disabled: activeMethod.disabled || activeMethod.isLoading || activeMethod.footerAction.disabled,
+                          children: activeMethod.footerAction.label
+                        }
+                      ) : null
+                    ] }) : null,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "submit",
+                        className: "login-page__submit",
+                        "data-login-part": "submit-button",
+                        disabled: activeMethod.disabled || activeMethod.isLoading,
+                        children: activeMethod.isLoading && activeMethod.loadingLabel ? activeMethod.loadingLabel : activeMethod.submitLabel
+                      }
+                    )
+                  ]
+                }
+              ) : null,
+              callout ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: `login-page__callout login-page__callout--${callout.tone ?? "info"}`,
+                  "data-login-part": "callout",
+                  "data-tone": callout.tone ?? "info",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__callout-title", "data-login-part": "callout-title", children: callout.title }),
+                    callout.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "login-page__callout-description", "data-login-part": "callout-description", children: callout.description }) : null,
+                    callout.detail ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "login-page__callout-detail", "data-login-part": "callout-detail", children: callout.detail }) : null,
+                    callout.action ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "login-page__callout-action",
+                        "data-login-part": "callout-action",
+                        onClick: callout.action.onClick,
+                        disabled: callout.action.disabled,
+                        children: callout.action.label
+                      }
+                    ) : null
+                  ]
+                }
+              ) : null,
+              externalMethods.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "login-page__oauth-section", "data-login-part": "external-methods", children: [
+                externalLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__oauth-label", "data-login-part": "external-label", children: externalLabel }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "login-page__oauth-list", "data-login-part": "external-list", children: externalMethods.map(renderExternalMethod) })
+              ] }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 var containerStyle = {
   display: "flex",
   alignItems: "center",
@@ -308,6 +567,7 @@ var PendingApproval = ({
 exports.AuthDivider = AuthDivider;
 exports.EmailAuth = EmailAuth;
 exports.LoginLayout = LoginLayout;
+exports.LoginPage = LoginPage;
 exports.OAuthButton = OAuthButton;
 exports.OIDCButton = OIDCButton;
 exports.PendingApproval = PendingApproval;