@poly-x/react 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/index.cjs

@@ -353,35 +353,63 @@ function Protected({ children, fallback = null, loading = null }) {
 //#endregion
 //#region src/components/sign-in.tsx
 const DEFAULT_LABELS = {
+	heading: "Sign in",
+	subheading: "Enter your credentials to continue.",
+	tagline: "",
 	emailLabel: "Email",
+	emailPlaceholder: "you@company.com",
 	passwordLabel: "Password",
+	passwordPlaceholder: "••••••••",
 	submit: "Sign in",
 	submitting: "Signing in…",
 	chooseWorkspace: "Choose a workspace",
+	chooseWorkspaceSubheading: "You have access to more than one workspace.",
+	securedBy: "Secured by PolyX",
+	setPasswordHeading: "Choose a new password",
+	setPasswordSubheading: "Your temporary password must be replaced before you continue.",
+	newPasswordLabel: "New password",
+	confirmPasswordLabel: "Confirm new password",
+	setPasswordSubmit: "Set password and sign in",
+	passwordMismatch: "Those passwords don't match.",
+	weakPassword: "Password must be at least 6 characters.",
 	invalidCredentials: "Invalid email or password.",
 	noAccess: "You don't have access to this application.",
 	passwordChangeRequired: "You must reset your password before you can sign in.",
 	genericError: "Something went wrong. Please try again."
 };
+/** Mirrors poly-auth's own floor (Joi: min 6). */
+const MIN_PASSWORD_LENGTH = 6;
 /**
 * The embedded, Clerk-style sign-in form (D2b). Renders email/password inside the
 * consuming app and POSTs to the SDK's BFF (`@poly-x/next` `authenticate`), which
 * runs the credential authorize server-side and seals an httpOnly session — no
 * redirect to a hosted PolyX login page, no tokens or credentials in the browser
 * after submit. Handles the workspace picker (select_tenant) inline.
+*
+* Ships styled: `import "@poly-x/react/styles.css"` once, then theme it by
+* overriding the `--polyx-*` custom properties on any ancestor.
 */
 function SignIn(props) {
 	const action = props.action ?? "/api/polyx/authenticate";
+	const variant = props.variant ?? "card";
 	const labels = {
 		...DEFAULT_LABELS,
 		...props.labels
 	};
 	const [email, setEmail] = (0, react.useState)("");
 	const [password, setPassword] = (0, react.useState)("");
+	const [newPassword, setNewPassword] = (0, react.useState)("");
+	const [confirmPassword, setConfirmPassword] = (0, react.useState)("");
+	const [mustSetPassword, setMustSetPassword] = (0, react.useState)(false);
 	const [tenants, setTenants] = (0, react.useState)(null);
 	const [submitting, setSubmitting] = (0, react.useState)(false);
 	const [error, setError] = (0, react.useState)(null);
-	async function authenticate(tenantId) {
+	/**
+	* One round-trip to the BFF. `tenantId` picks a workspace; `passwords` completes
+	* the temp-password flow (the BFF re-verifies the temporary password, sets the
+	* new one, and signs the user straight in).
+	*/
+	async function authenticate(options = {}) {
 		setSubmitting(true);
 		setError(null);
 		try {
@@ -392,7 +420,8 @@ function SignIn(props) {
 					email,
 					password,
 					organizationCode: props.organizationCode,
-					tenantId
+					tenantId: options.tenantId,
+					...options.passwords
 				})
 			})).json().catch(() => ({}));
 			switch (body.status) {
@@ -402,16 +431,22 @@ function SignIn(props) {
 				case "select_tenant":
 					setTenants(body.tenants ?? []);
 					return;
+				case "password_change_required":
+					setMustSetPassword(true);
+					if (body.userId) props.onPasswordChangeRequired?.(body.userId);
+					return;
+				case "password_mismatch":
+					setError(labels.passwordMismatch);
+					return;
+				case "weak_password":
+					setError(labels.weakPassword);
+					return;
 				case "invalid_credentials":
 					setError(labels.invalidCredentials);
 					return;
 				case "no_access":
 					setError(labels.noAccess);
 					return;
-				case "password_change_required":
-					setError(labels.passwordChangeRequired);
-					if (body.userId) props.onPasswordChangeRequired?.(body.userId);
-					return;
 				default:
 					setError(labels.genericError);
 					return;
@@ -426,73 +461,212 @@ function SignIn(props) {
 		event.preventDefault();
 		authenticate();
 	}
-	if (tenants) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: props.className,
-		"data-polyx-signin": "select-tenant",
+	function onSetPasswordSubmit(event) {
+		event.preventDefault();
+		if (newPassword !== confirmPassword) {
+			setError(labels.passwordMismatch);
+			return;
+		}
+		authenticate({ passwords: {
+			newPassword,
+			confirmPassword
+		} });
+	}
+	const picking = tenants !== null;
+	const hasPanel = variant === "page" && Boolean(props.panel || props.logo || labels.tagline);
+	const showHeaderLogo = Boolean(props.logo) && !hasPanel;
+	const rootClass = [
+		"polyx-signin",
+		`polyx-signin--${variant}`,
+		hasPanel && "polyx-signin--split",
+		props.className
+	].filter(Boolean).join(" ");
+	const step = picking ? "select_tenant" : mustSetPassword ? "set_password" : "credentials";
+	const HEADINGS = {
+		credentials: {
+			heading: labels.heading,
+			subheading: labels.subheading
+		},
+		select_tenant: {
+			heading: labels.chooseWorkspace,
+			subheading: labels.chooseWorkspaceSubheading
+		},
+		set_password: {
+			heading: labels.setPasswordHeading,
+			subheading: labels.setPasswordSubheading
+		}
+	};
+	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "polyx-signin__header",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			showHeaderLogo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "polyx-signin__logo",
+				children: props.logo
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
 				className: "polyx-signin__heading",
-				children: labels.chooseWorkspace
+				children: HEADINGS[step].heading
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-				className: "polyx-signin__tenants",
-				children: tenants.map((tenant) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: "polyx-signin__tenant",
-					disabled: submitting,
-					onClick: () => void authenticate(tenant.tenantId),
-					children: tenant.name ?? tenant.slug ?? tenant.organizationCode ?? tenant.tenantId
-				}) }, tenant.tenantId))
-			}),
-			error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				role: "alert",
-				className: "polyx-signin__error",
-				children: error
-			}) : null
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "polyx-signin__subheading",
+				children: HEADINGS[step].subheading
+			})
 		]
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
-		className: props.className,
-		"data-polyx-signin": "credentials",
-		onSubmit,
+	const errorNode = error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		role: "alert",
+		className: "polyx-signin__error",
+		children: error
+	}) : null;
+	const footer = props.showSecuredBy === false ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+		className: "polyx-signin__footer",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			className: "polyx-signin__shield",
+			viewBox: "0 0 16 16",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 0.5 2 3v4.2c0 3.5 2.5 6.7 6 7.8 3.5-1.1 6-4.3 6-7.8V3L8 .5Zm2.9 5.6-3.4 3.4a.7.7 0 0 1-1 0L5.1 8.1a.7.7 0 1 1 1-1l.9.9 2.9-2.9a.7.7 0 0 1 1 1Z" })
+		}), labels.securedBy]
+	});
+	const tenantPicker = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "polyx-signin__form",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: "polyx-signin__tenants",
+			children: (tenants ?? []).map((tenant) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "polyx-signin__tenant",
+				disabled: submitting,
+				onClick: () => void authenticate({ tenantId: tenant.tenantId }),
+				children: tenant.name ?? tenant.slug ?? tenant.organizationCode ?? tenant.tenantId
+			}) }, tenant.tenantId))
+		}), errorNode]
+	});
+	const setPasswordForm = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+		className: "polyx-signin__form",
+		onSubmit: onSetPasswordSubmit,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 				className: "polyx-signin__field",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: labels.emailLabel }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					type: "email",
-					name: "email",
-					autoComplete: "username",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "polyx-signin__label",
+					children: labels.newPasswordLabel
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					className: "polyx-signin__input",
+					type: "password",
+					name: "newPassword",
+					autoComplete: "new-password",
+					placeholder: labels.passwordPlaceholder,
 					required: true,
-					value: email,
+					minLength: MIN_PASSWORD_LENGTH,
+					value: newPassword,
 					disabled: submitting,
-					onChange: (event) => setEmail(event.target.value)
+					onChange: (event) => setNewPassword(event.target.value)
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 				className: "polyx-signin__field",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: labels.passwordLabel }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "polyx-signin__label",
+					children: labels.confirmPasswordLabel
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					className: "polyx-signin__input",
 					type: "password",
-					name: "password",
-					autoComplete: "current-password",
+					name: "confirmPassword",
+					autoComplete: "new-password",
+					placeholder: labels.passwordPlaceholder,
 					required: true,
-					value: password,
+					minLength: MIN_PASSWORD_LENGTH,
+					value: confirmPassword,
 					disabled: submitting,
-					onChange: (event) => setPassword(event.target.value)
+					onChange: (event) => setConfirmPassword(event.target.value)
 				})]
 			}),
-			error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				role: "alert",
-				className: "polyx-signin__error",
-				children: error
-			}) : null,
+			errorNode,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "submit",
 				className: "polyx-signin__submit",
 				disabled: submitting,
-				children: submitting ? labels.submitting : labels.submit
+				children: submitting ? labels.submitting : labels.setPasswordSubmit
 			})
 		]
 	});
+	const card = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "polyx-signin__card",
+		children: [
+			header,
+			step === "select_tenant" ? tenantPicker : step === "set_password" ? setPasswordForm : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				className: "polyx-signin__form",
+				onSubmit,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "polyx-signin__field",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "polyx-signin__label",
+							children: labels.emailLabel
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							className: "polyx-signin__input",
+							type: "email",
+							name: "email",
+							autoComplete: "username",
+							placeholder: labels.emailPlaceholder,
+							required: true,
+							value: email,
+							disabled: submitting,
+							onChange: (event) => setEmail(event.target.value)
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "polyx-signin__field",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "polyx-signin__label",
+							children: labels.passwordLabel
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							className: "polyx-signin__input",
+							type: "password",
+							name: "password",
+							autoComplete: "current-password",
+							placeholder: labels.passwordPlaceholder,
+							required: true,
+							value: password,
+							disabled: submitting,
+							onChange: (event) => setPassword(event.target.value)
+						})]
+					}),
+					errorNode,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "submit",
+						className: "polyx-signin__submit",
+						disabled: submitting,
+						children: submitting ? labels.submitting : labels.submit
+					})
+				]
+			}),
+			footer
+		]
+	});
+	if (variant === "page") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: rootClass,
+		"data-polyx-signin": step,
+		children: [hasPanel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+			className: "polyx-signin__panel",
+			children: props.panel ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [props.logo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "polyx-signin__panel-logo",
+				children: props.logo
+			}) : null, labels.tagline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "polyx-signin__tagline",
+				children: labels.tagline
+			}) : null] })
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "polyx-signin__main",
+			children: card
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: rootClass,
+		"data-polyx-signin": step,
+		children: card
+	});
 }
 //#endregion
 //#region src/components/auth-callback.tsx

package/dist/index.d.cts

@@ -193,24 +193,57 @@ declare function Protected({
 //#region src/components/sign-in.d.ts
 /** Every user-facing string, overridable for i18n / white-labelling. */
 interface SignInLabels {
+  heading: string;
+  subheading: string;
+  /** Headline on the `page` variant's brand panel. Empty renders a clean brand panel. */
+  tagline: string;
   emailLabel: string;
+  emailPlaceholder: string;
   passwordLabel: string;
+  passwordPlaceholder: string;
   submit: string;
   submitting: string;
   chooseWorkspace: string;
+  chooseWorkspaceSubheading: string;
+  securedBy: string;
+  setPasswordHeading: string;
+  setPasswordSubheading: string;
+  newPasswordLabel: string;
+  confirmPasswordLabel: string;
+  setPasswordSubmit: string;
+  passwordMismatch: string;
+  weakPassword: string;
   invalidCredentials: string;
   noAccess: string;
   passwordChangeRequired: string;
   genericError: string;
 }
+/**
+ * `card` renders just the card — drop it into your own layout.
+ * `page` owns the viewport — a split layout with a brand panel beside the form
+ * (the panel collapses away under 64rem, leaving the form on its own).
+ */
+type SignInVariant = "card" | "page";
 interface SignInProps {
+  /** Layout preset. Default `card`. */
+  variant?: SignInVariant;
+  /**
+   * Content for the `page` variant's brand panel. Defaults to your `logo` plus
+   * `labels.tagline`; pass your own node to take the panel over completely.
+   * Ignored by the `card` variant.
+   */
+  panel?: ReactNode;
   /** BFF endpoint backed by `createAuthHandlers().authenticate`. Default `/api/polyx/authenticate`. */
   action?: string;
   /** Where to send the browser after success. Overrides the server's default redirect. */
   afterSignInPath?: string;
   /** Pre-scope the login to a single organization (skips org discovery). */
   organizationCode?: string;
-  /** Applied to the root `<form>` / picker container — style via your own CSS. */
+  /** Rendered above the heading — your wordmark or logo. */
+  logo?: ReactNode;
+  /** Show the "Secured by PolyX" attribution under the form. Default true. */
+  showSecuredBy?: boolean;
+  /** Appended to the root element's class list, for escape-hatch styling. */
   className?: string;
   labels?: Partial<SignInLabels>;
   /** Fired when the backend requires the user to set a new password before continuing. */
@@ -222,6 +255,9 @@ interface SignInProps {
  * runs the credential authorize server-side and seals an httpOnly session — no
  * redirect to a hosted PolyX login page, no tokens or credentials in the browser
  * after submit. Handles the workspace picker (select_tenant) inline.
+ *
+ * Ships styled: `import "@poly-x/react/styles.css"` once, then theme it by
+ * overriding the `--polyx-*` custom properties on any ancestor.
  */
 declare function SignIn(props: SignInProps): ReactNode;
 //#endregion
@@ -243,4 +279,4 @@ declare function AuthCallback({
 declare const PACKAGE_NAME = "@poly-x/react";
 declare const version = "0.0.0";
 //#endregion
-export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, SessionStoragePkceStore, SignIn, type SignInLabels, type SignInOptions, type SignInProps, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };
+export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, SessionStoragePkceStore, SignIn, type SignInLabels, type SignInOptions, type SignInProps, type SignInVariant, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };

package/dist/index.d.mts

@@ -193,24 +193,57 @@ declare function Protected({
 //#region src/components/sign-in.d.ts
 /** Every user-facing string, overridable for i18n / white-labelling. */
 interface SignInLabels {
+  heading: string;
+  subheading: string;
+  /** Headline on the `page` variant's brand panel. Empty renders a clean brand panel. */
+  tagline: string;
   emailLabel: string;
+  emailPlaceholder: string;
   passwordLabel: string;
+  passwordPlaceholder: string;
   submit: string;
   submitting: string;
   chooseWorkspace: string;
+  chooseWorkspaceSubheading: string;
+  securedBy: string;
+  setPasswordHeading: string;
+  setPasswordSubheading: string;
+  newPasswordLabel: string;
+  confirmPasswordLabel: string;
+  setPasswordSubmit: string;
+  passwordMismatch: string;
+  weakPassword: string;
   invalidCredentials: string;
   noAccess: string;
   passwordChangeRequired: string;
   genericError: string;
 }
+/**
+ * `card` renders just the card — drop it into your own layout.
+ * `page` owns the viewport — a split layout with a brand panel beside the form
+ * (the panel collapses away under 64rem, leaving the form on its own).
+ */
+type SignInVariant = "card" | "page";
 interface SignInProps {
+  /** Layout preset. Default `card`. */
+  variant?: SignInVariant;
+  /**
+   * Content for the `page` variant's brand panel. Defaults to your `logo` plus
+   * `labels.tagline`; pass your own node to take the panel over completely.
+   * Ignored by the `card` variant.
+   */
+  panel?: ReactNode;
   /** BFF endpoint backed by `createAuthHandlers().authenticate`. Default `/api/polyx/authenticate`. */
   action?: string;
   /** Where to send the browser after success. Overrides the server's default redirect. */
   afterSignInPath?: string;
   /** Pre-scope the login to a single organization (skips org discovery). */
   organizationCode?: string;
-  /** Applied to the root `<form>` / picker container — style via your own CSS. */
+  /** Rendered above the heading — your wordmark or logo. */
+  logo?: ReactNode;
+  /** Show the "Secured by PolyX" attribution under the form. Default true. */
+  showSecuredBy?: boolean;
+  /** Appended to the root element's class list, for escape-hatch styling. */
   className?: string;
   labels?: Partial<SignInLabels>;
   /** Fired when the backend requires the user to set a new password before continuing. */
@@ -222,6 +255,9 @@ interface SignInProps {
  * runs the credential authorize server-side and seals an httpOnly session — no
  * redirect to a hosted PolyX login page, no tokens or credentials in the browser
  * after submit. Handles the workspace picker (select_tenant) inline.
+ *
+ * Ships styled: `import "@poly-x/react/styles.css"` once, then theme it by
+ * overriding the `--polyx-*` custom properties on any ancestor.
  */
 declare function SignIn(props: SignInProps): ReactNode;
 //#endregion
@@ -243,4 +279,4 @@ declare function AuthCallback({
 declare const PACKAGE_NAME = "@poly-x/react";
 declare const version = "0.0.0";
 //#endregion
-export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, SessionStoragePkceStore, SignIn, type SignInLabels, type SignInOptions, type SignInProps, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };
+export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, SessionStoragePkceStore, SignIn, type SignInLabels, type SignInOptions, type SignInProps, type SignInVariant, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { AuthClient, FetchTransport, InMemoryLock, InMemoryPkceStore, InMemorySessionChannel, InMemorySessionStore, createSessionEngine, generatePkce, randomState, resolveConfig } from "@poly-x/core";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth-channel.ts
 var BroadcastAuthChannel = class {
 	supported;
@@ -352,35 +352,63 @@ function Protected({ children, fallback = null, loading = null }) {
 //#endregion
 //#region src/components/sign-in.tsx
 const DEFAULT_LABELS = {
+	heading: "Sign in",
+	subheading: "Enter your credentials to continue.",
+	tagline: "",
 	emailLabel: "Email",
+	emailPlaceholder: "you@company.com",
 	passwordLabel: "Password",
+	passwordPlaceholder: "••••••••",
 	submit: "Sign in",
 	submitting: "Signing in…",
 	chooseWorkspace: "Choose a workspace",
+	chooseWorkspaceSubheading: "You have access to more than one workspace.",
+	securedBy: "Secured by PolyX",
+	setPasswordHeading: "Choose a new password",
+	setPasswordSubheading: "Your temporary password must be replaced before you continue.",
+	newPasswordLabel: "New password",
+	confirmPasswordLabel: "Confirm new password",
+	setPasswordSubmit: "Set password and sign in",
+	passwordMismatch: "Those passwords don't match.",
+	weakPassword: "Password must be at least 6 characters.",
 	invalidCredentials: "Invalid email or password.",
 	noAccess: "You don't have access to this application.",
 	passwordChangeRequired: "You must reset your password before you can sign in.",
 	genericError: "Something went wrong. Please try again."
 };
+/** Mirrors poly-auth's own floor (Joi: min 6). */
+const MIN_PASSWORD_LENGTH = 6;
 /**
 * The embedded, Clerk-style sign-in form (D2b). Renders email/password inside the
 * consuming app and POSTs to the SDK's BFF (`@poly-x/next` `authenticate`), which
 * runs the credential authorize server-side and seals an httpOnly session — no
 * redirect to a hosted PolyX login page, no tokens or credentials in the browser
 * after submit. Handles the workspace picker (select_tenant) inline.
+*
+* Ships styled: `import "@poly-x/react/styles.css"` once, then theme it by
+* overriding the `--polyx-*` custom properties on any ancestor.
 */
 function SignIn(props) {
 	const action = props.action ?? "/api/polyx/authenticate";
+	const variant = props.variant ?? "card";
 	const labels = {
 		...DEFAULT_LABELS,
 		...props.labels
 	};
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
+	const [newPassword, setNewPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [mustSetPassword, setMustSetPassword] = useState(false);
 	const [tenants, setTenants] = useState(null);
 	const [submitting, setSubmitting] = useState(false);
 	const [error, setError] = useState(null);
-	async function authenticate(tenantId) {
+	/**
+	* One round-trip to the BFF. `tenantId` picks a workspace; `passwords` completes
+	* the temp-password flow (the BFF re-verifies the temporary password, sets the
+	* new one, and signs the user straight in).
+	*/
+	async function authenticate(options = {}) {
 		setSubmitting(true);
 		setError(null);
 		try {
@@ -391,7 +419,8 @@ function SignIn(props) {
 					email,
 					password,
 					organizationCode: props.organizationCode,
-					tenantId
+					tenantId: options.tenantId,
+					...options.passwords
 				})
 			})).json().catch(() => ({}));
 			switch (body.status) {
@@ -401,16 +430,22 @@ function SignIn(props) {
 				case "select_tenant":
 					setTenants(body.tenants ?? []);
 					return;
+				case "password_change_required":
+					setMustSetPassword(true);
+					if (body.userId) props.onPasswordChangeRequired?.(body.userId);
+					return;
+				case "password_mismatch":
+					setError(labels.passwordMismatch);
+					return;
+				case "weak_password":
+					setError(labels.weakPassword);
+					return;
 				case "invalid_credentials":
 					setError(labels.invalidCredentials);
 					return;
 				case "no_access":
 					setError(labels.noAccess);
 					return;
-				case "password_change_required":
-					setError(labels.passwordChangeRequired);
-					if (body.userId) props.onPasswordChangeRequired?.(body.userId);
-					return;
 				default:
 					setError(labels.genericError);
 					return;
@@ -425,73 +460,212 @@ function SignIn(props) {
 		event.preventDefault();
 		authenticate();
 	}
-	if (tenants) return /* @__PURE__ */ jsxs("div", {
-		className: props.className,
-		"data-polyx-signin": "select-tenant",
+	function onSetPasswordSubmit(event) {
+		event.preventDefault();
+		if (newPassword !== confirmPassword) {
+			setError(labels.passwordMismatch);
+			return;
+		}
+		authenticate({ passwords: {
+			newPassword,
+			confirmPassword
+		} });
+	}
+	const picking = tenants !== null;
+	const hasPanel = variant === "page" && Boolean(props.panel || props.logo || labels.tagline);
+	const showHeaderLogo = Boolean(props.logo) && !hasPanel;
+	const rootClass = [
+		"polyx-signin",
+		`polyx-signin--${variant}`,
+		hasPanel && "polyx-signin--split",
+		props.className
+	].filter(Boolean).join(" ");
+	const step = picking ? "select_tenant" : mustSetPassword ? "set_password" : "credentials";
+	const HEADINGS = {
+		credentials: {
+			heading: labels.heading,
+			subheading: labels.subheading
+		},
+		select_tenant: {
+			heading: labels.chooseWorkspace,
+			subheading: labels.chooseWorkspaceSubheading
+		},
+		set_password: {
+			heading: labels.setPasswordHeading,
+			subheading: labels.setPasswordSubheading
+		}
+	};
+	const header = /* @__PURE__ */ jsxs("div", {
+		className: "polyx-signin__header",
 		children: [
-			/* @__PURE__ */ jsx("p", {
+			showHeaderLogo ? /* @__PURE__ */ jsx("div", {
+				className: "polyx-signin__logo",
+				children: props.logo
+			}) : null,
+			/* @__PURE__ */ jsx("h1", {
 				className: "polyx-signin__heading",
-				children: labels.chooseWorkspace
+				children: HEADINGS[step].heading
 			}),
-			/* @__PURE__ */ jsx("ul", {
-				className: "polyx-signin__tenants",
-				children: tenants.map((tenant) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "polyx-signin__tenant",
-					disabled: submitting,
-					onClick: () => void authenticate(tenant.tenantId),
-					children: tenant.name ?? tenant.slug ?? tenant.organizationCode ?? tenant.tenantId
-				}) }, tenant.tenantId))
-			}),
-			error ? /* @__PURE__ */ jsx("p", {
-				role: "alert",
-				className: "polyx-signin__error",
-				children: error
-			}) : null
+			/* @__PURE__ */ jsx("p", {
+				className: "polyx-signin__subheading",
+				children: HEADINGS[step].subheading
+			})
 		]
 	});
-	return /* @__PURE__ */ jsxs("form", {
-		className: props.className,
-		"data-polyx-signin": "credentials",
-		onSubmit,
+	const errorNode = error ? /* @__PURE__ */ jsx("p", {
+		role: "alert",
+		className: "polyx-signin__error",
+		children: error
+	}) : null;
+	const footer = props.showSecuredBy === false ? null : /* @__PURE__ */ jsxs("p", {
+		className: "polyx-signin__footer",
+		children: [/* @__PURE__ */ jsx("svg", {
+			className: "polyx-signin__shield",
+			viewBox: "0 0 16 16",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: /* @__PURE__ */ jsx("path", { d: "M8 0.5 2 3v4.2c0 3.5 2.5 6.7 6 7.8 3.5-1.1 6-4.3 6-7.8V3L8 .5Zm2.9 5.6-3.4 3.4a.7.7 0 0 1-1 0L5.1 8.1a.7.7 0 1 1 1-1l.9.9 2.9-2.9a.7.7 0 0 1 1 1Z" })
+		}), labels.securedBy]
+	});
+	const tenantPicker = /* @__PURE__ */ jsxs("div", {
+		className: "polyx-signin__form",
+		children: [/* @__PURE__ */ jsx("ul", {
+			className: "polyx-signin__tenants",
+			children: (tenants ?? []).map((tenant) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "polyx-signin__tenant",
+				disabled: submitting,
+				onClick: () => void authenticate({ tenantId: tenant.tenantId }),
+				children: tenant.name ?? tenant.slug ?? tenant.organizationCode ?? tenant.tenantId
+			}) }, tenant.tenantId))
+		}), errorNode]
+	});
+	const setPasswordForm = /* @__PURE__ */ jsxs("form", {
+		className: "polyx-signin__form",
+		onSubmit: onSetPasswordSubmit,
 		children: [
 			/* @__PURE__ */ jsxs("label", {
 				className: "polyx-signin__field",
-				children: [/* @__PURE__ */ jsx("span", { children: labels.emailLabel }), /* @__PURE__ */ jsx("input", {
-					type: "email",
-					name: "email",
-					autoComplete: "username",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "polyx-signin__label",
+					children: labels.newPasswordLabel
+				}), /* @__PURE__ */ jsx("input", {
+					className: "polyx-signin__input",
+					type: "password",
+					name: "newPassword",
+					autoComplete: "new-password",
+					placeholder: labels.passwordPlaceholder,
 					required: true,
-					value: email,
+					minLength: MIN_PASSWORD_LENGTH,
+					value: newPassword,
 					disabled: submitting,
-					onChange: (event) => setEmail(event.target.value)
+					onChange: (event) => setNewPassword(event.target.value)
 				})]
 			}),
 			/* @__PURE__ */ jsxs("label", {
 				className: "polyx-signin__field",
-				children: [/* @__PURE__ */ jsx("span", { children: labels.passwordLabel }), /* @__PURE__ */ jsx("input", {
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "polyx-signin__label",
+					children: labels.confirmPasswordLabel
+				}), /* @__PURE__ */ jsx("input", {
+					className: "polyx-signin__input",
 					type: "password",
-					name: "password",
-					autoComplete: "current-password",
+					name: "confirmPassword",
+					autoComplete: "new-password",
+					placeholder: labels.passwordPlaceholder,
 					required: true,
-					value: password,
+					minLength: MIN_PASSWORD_LENGTH,
+					value: confirmPassword,
 					disabled: submitting,
-					onChange: (event) => setPassword(event.target.value)
+					onChange: (event) => setConfirmPassword(event.target.value)
 				})]
 			}),
-			error ? /* @__PURE__ */ jsx("p", {
-				role: "alert",
-				className: "polyx-signin__error",
-				children: error
-			}) : null,
+			errorNode,
 			/* @__PURE__ */ jsx("button", {
 				type: "submit",
 				className: "polyx-signin__submit",
 				disabled: submitting,
-				children: submitting ? labels.submitting : labels.submit
+				children: submitting ? labels.submitting : labels.setPasswordSubmit
 			})
 		]
 	});
+	const card = /* @__PURE__ */ jsxs("div", {
+		className: "polyx-signin__card",
+		children: [
+			header,
+			step === "select_tenant" ? tenantPicker : step === "set_password" ? setPasswordForm : /* @__PURE__ */ jsxs("form", {
+				className: "polyx-signin__form",
+				onSubmit,
+				children: [
+					/* @__PURE__ */ jsxs("label", {
+						className: "polyx-signin__field",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "polyx-signin__label",
+							children: labels.emailLabel
+						}), /* @__PURE__ */ jsx("input", {
+							className: "polyx-signin__input",
+							type: "email",
+							name: "email",
+							autoComplete: "username",
+							placeholder: labels.emailPlaceholder,
+							required: true,
+							value: email,
+							disabled: submitting,
+							onChange: (event) => setEmail(event.target.value)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "polyx-signin__field",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "polyx-signin__label",
+							children: labels.passwordLabel
+						}), /* @__PURE__ */ jsx("input", {
+							className: "polyx-signin__input",
+							type: "password",
+							name: "password",
+							autoComplete: "current-password",
+							placeholder: labels.passwordPlaceholder,
+							required: true,
+							value: password,
+							disabled: submitting,
+							onChange: (event) => setPassword(event.target.value)
+						})]
+					}),
+					errorNode,
+					/* @__PURE__ */ jsx("button", {
+						type: "submit",
+						className: "polyx-signin__submit",
+						disabled: submitting,
+						children: submitting ? labels.submitting : labels.submit
+					})
+				]
+			}),
+			footer
+		]
+	});
+	if (variant === "page") return /* @__PURE__ */ jsxs("div", {
+		className: rootClass,
+		"data-polyx-signin": step,
+		children: [hasPanel ? /* @__PURE__ */ jsx("aside", {
+			className: "polyx-signin__panel",
+			children: props.panel ?? /* @__PURE__ */ jsxs(Fragment, { children: [props.logo ? /* @__PURE__ */ jsx("div", {
+				className: "polyx-signin__panel-logo",
+				children: props.logo
+			}) : null, labels.tagline ? /* @__PURE__ */ jsx("p", {
+				className: "polyx-signin__tagline",
+				children: labels.tagline
+			}) : null] })
+		}) : null, /* @__PURE__ */ jsx("div", {
+			className: "polyx-signin__main",
+			children: card
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: rootClass,
+		"data-polyx-signin": step,
+		children: card
+	});
 }
 //#endregion
 //#region src/components/auth-callback.tsx

package/dist/styles.css

@@ -0,0 +1,379 @@
+/**
+ * @poly-x/react — default component styles.
+ *
+ * Import once, near the root of your app:
+ *   import "@poly-x/react/styles.css";   // or "@poly-x/next/styles.css"
+ *
+ * The SDK is a guest in your app: every rule is scoped under a `.polyx-*` class,
+ * there are no global element selectors, and nothing here leaks into your own
+ * markup. To theme it, override the custom properties below on any ancestor
+ * (`:root`, a wrapper div, …) — that is the supported theming surface. Dark mode
+ * follows the OS by default and defers to an explicit `.dark` / `[data-theme]`
+ * on a host ancestor when one is present.
+ */
+
+.polyx-signin {
+	/* Colors */
+	--polyx-brand: #4f46e5;
+	--polyx-brand-hover: #4338ca;
+	--polyx-brand-fg: #ffffff;
+	--polyx-bg: #ffffff;
+	--polyx-fg: #18181b;
+	--polyx-muted-fg: #71717a;
+	--polyx-border: #e4e4e7;
+	--polyx-input-bg: #ffffff;
+	--polyx-ring: #a5b4fc;
+	--polyx-danger: #dc2626;
+	--polyx-danger-bg: #fef2f2;
+	--polyx-page-bg: #fafafa;
+
+	/* Shape + type */
+	--polyx-radius: 0.75rem;
+	--polyx-radius-sm: 0.5rem;
+	--polyx-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+	--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 10px 30px rgb(0 0 0 / 0.07);
+
+	font-family: var(--polyx-font);
+	color: var(--polyx-fg);
+	-webkit-font-smoothing: antialiased;
+}
+
+/* Scoped box model — applies only inside our own subtree. */
+.polyx-signin,
+.polyx-signin *,
+.polyx-signin *::before,
+.polyx-signin *::after {
+	box-sizing: border-box;
+}
+
+/* Dark: follow the OS… */
+@media (prefers-color-scheme: dark) {
+	.polyx-signin {
+		--polyx-brand: #6366f1;
+		--polyx-brand-hover: #818cf8;
+		--polyx-bg: #18181b;
+		--polyx-fg: #fafafa;
+		--polyx-muted-fg: #a1a1aa;
+		--polyx-border: #3f3f46;
+		--polyx-input-bg: #27272a;
+		--polyx-ring: #4f46e5;
+		--polyx-danger: #f87171;
+		--polyx-danger-bg: #2a1616;
+		--polyx-page-bg: #09090b;
+		--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 10px 30px rgb(0 0 0 / 0.35);
+	}
+}
+
+/* …but an explicit host theme wins over the OS preference (`:where` keeps
+   specificity at 0 so these stay as easy to override as the base rule). */
+:where(.dark, [data-theme="dark"]) .polyx-signin {
+	--polyx-brand: #6366f1;
+	--polyx-brand-hover: #818cf8;
+	--polyx-bg: #18181b;
+	--polyx-fg: #fafafa;
+	--polyx-muted-fg: #a1a1aa;
+	--polyx-border: #3f3f46;
+	--polyx-input-bg: #27272a;
+	--polyx-ring: #4f46e5;
+	--polyx-danger: #f87171;
+	--polyx-danger-bg: #2a1616;
+	--polyx-page-bg: #09090b;
+	--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.4), 0 10px 30px rgb(0 0 0 / 0.35);
+}
+
+:where(.light, [data-theme="light"]) .polyx-signin {
+	--polyx-brand: #4f46e5;
+	--polyx-brand-hover: #4338ca;
+	--polyx-bg: #ffffff;
+	--polyx-fg: #18181b;
+	--polyx-muted-fg: #71717a;
+	--polyx-border: #e4e4e7;
+	--polyx-input-bg: #ffffff;
+	--polyx-ring: #a5b4fc;
+	--polyx-danger: #dc2626;
+	--polyx-danger-bg: #fef2f2;
+	--polyx-page-bg: #fafafa;
+	--polyx-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 10px 30px rgb(0 0 0 / 0.07);
+}
+
+/* --- Variants ------------------------------------------------------------ */
+
+/* `card`: just the card — drop it anywhere in your own layout. */
+.polyx-signin--card {
+	display: block;
+}
+
+.polyx-signin__card {
+	width: 100%;
+	max-width: 27rem;
+	margin-inline: auto;
+	padding: 2.25rem;
+	background: var(--polyx-bg);
+	border: 1px solid var(--polyx-border);
+	border-radius: var(--polyx-radius);
+	box-shadow: var(--polyx-shadow);
+}
+
+/**
+ * `page`: owns the viewport. With brand content (a `logo`, a `tagline`, or a
+ * custom `panel`) it becomes a split layout — brand panel beside the form on
+ * wide screens, a slim brand band above it on narrow ones. With no brand content
+ * there's nothing to put in a panel, so it stays a single centered column.
+ */
+.polyx-signin--page {
+	display: grid;
+	grid-template-columns: 1fr;
+	min-height: 100dvh;
+}
+
+.polyx-signin--page.polyx-signin--split {
+	grid-template-rows: auto 1fr;
+}
+
+@media (min-width: 64rem) {
+	.polyx-signin--page.polyx-signin--split {
+		grid-template-columns: 1.1fr 1fr;
+		grid-template-rows: 1fr;
+	}
+}
+
+.polyx-signin__panel {
+	display: flex;
+	position: relative;
+	overflow: hidden;
+	align-items: center;
+	gap: 1rem;
+	padding: 1.25rem 1.5rem;
+	color: var(--polyx-brand-fg);
+	background: linear-gradient(145deg, var(--polyx-brand), color-mix(in srgb, var(--polyx-brand) 55%, #000));
+}
+
+@media (min-width: 64rem) {
+	.polyx-signin__panel {
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 2rem;
+		padding: 3.5rem;
+	}
+}
+
+/* Soft light-bloom so a bare brand panel still reads as designed, not as a flat fill. */
+.polyx-signin__panel::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	background:
+		radial-gradient(circle at 82% 12%, rgb(255 255 255 / 0.18), transparent 45%),
+		radial-gradient(circle at 12% 88%, rgb(255 255 255 / 0.1), transparent 42%);
+}
+
+.polyx-signin__panel-logo,
+.polyx-signin__tagline {
+	position: relative;
+	z-index: 1;
+}
+
+/* The tagline is the panel's headline — it only earns its space on wide screens. */
+.polyx-signin__tagline {
+	display: none;
+	margin: 0;
+	max-width: 18ch;
+	font-size: 2rem;
+	font-weight: 600;
+	line-height: 1.2;
+	letter-spacing: -0.02em;
+}
+
+@media (min-width: 64rem) {
+	.polyx-signin__tagline {
+		display: block;
+	}
+}
+
+.polyx-signin__main {
+	display: grid;
+	place-items: center;
+	padding: 2.5rem 1.5rem;
+	background: var(--polyx-page-bg);
+}
+
+/* On the page variant the form isn't a floating card — it sits on the page itself. */
+.polyx-signin--page .polyx-signin__card {
+	max-width: 25rem;
+	padding: 0;
+	background: transparent;
+	border: none;
+	box-shadow: none;
+}
+
+
+/* --- Header -------------------------------------------------------------- */
+
+.polyx-signin__header {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+	margin-bottom: 1.75rem;
+}
+
+.polyx-signin__logo {
+	display: flex;
+	margin-bottom: 0.75rem;
+}
+
+.polyx-signin__heading {
+	margin: 0;
+	font-size: 1.375rem;
+	font-weight: 600;
+	letter-spacing: -0.01em;
+	color: var(--polyx-fg);
+}
+
+.polyx-signin__subheading {
+	margin: 0;
+	font-size: 0.875rem;
+	color: var(--polyx-muted-fg);
+}
+
+/* --- Form ---------------------------------------------------------------- */
+
+.polyx-signin__form {
+	display: flex;
+	flex-direction: column;
+	gap: 1.125rem;
+}
+
+.polyx-signin__field {
+	display: flex;
+	flex-direction: column;
+	gap: 0.4375rem;
+}
+
+.polyx-signin__label {
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--polyx-fg);
+}
+
+.polyx-signin__input {
+	width: 100%;
+	height: 2.5rem;
+	padding: 0 0.75rem;
+	font: inherit;
+	font-size: 0.875rem;
+	color: var(--polyx-fg);
+	background: var(--polyx-input-bg);
+	border: 1px solid var(--polyx-border);
+	border-radius: var(--polyx-radius-sm);
+	outline: none;
+	transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.polyx-signin__input::placeholder {
+	color: var(--polyx-muted-fg);
+}
+
+.polyx-signin__input:focus-visible {
+	border-color: var(--polyx-brand);
+	box-shadow: 0 0 0 3px var(--polyx-ring);
+}
+
+.polyx-signin__input:disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+
+/* --- Buttons ------------------------------------------------------------- */
+
+.polyx-signin__submit,
+.polyx-signin__tenant {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	min-height: 2.5rem;
+	padding: 0 1rem;
+	font: inherit;
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--polyx-brand-fg);
+	background: var(--polyx-brand);
+	border: 1px solid transparent;
+	border-radius: var(--polyx-radius-sm);
+	cursor: pointer;
+	transition: background-color 0.15s ease;
+}
+
+.polyx-signin__submit:hover:not(:disabled),
+.polyx-signin__tenant:hover:not(:disabled) {
+	background: var(--polyx-brand-hover);
+}
+
+.polyx-signin__submit:focus-visible,
+.polyx-signin__tenant:focus-visible {
+	outline: none;
+	box-shadow: 0 0 0 3px var(--polyx-ring);
+}
+
+.polyx-signin__submit:disabled,
+.polyx-signin__tenant:disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+
+/* --- Error --------------------------------------------------------------- */
+
+.polyx-signin__error {
+	margin: 0;
+	padding: 0.625rem 0.75rem;
+	font-size: 0.8125rem;
+	color: var(--polyx-danger);
+	background: var(--polyx-danger-bg);
+	border: 1px solid color-mix(in srgb, var(--polyx-danger) 30%, transparent);
+	border-radius: var(--polyx-radius-sm);
+}
+
+/* --- Footer -------------------------------------------------------------- */
+
+.polyx-signin__footer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.375rem;
+	margin-top: 1.5rem;
+	font-size: 0.75rem;
+	color: var(--polyx-muted-fg);
+}
+
+.polyx-signin__shield {
+	flex: none;
+	width: 0.875rem;
+	height: 0.875rem;
+	opacity: 0.85;
+}
+
+/* --- Workspace picker ---------------------------------------------------- */
+
+.polyx-signin__tenants {
+	display: flex;
+	flex-direction: column;
+	gap: 0.625rem;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+/* The picker's buttons read as choices, not as the primary CTA. */
+.polyx-signin__tenant {
+	justify-content: flex-start;
+	color: var(--polyx-fg);
+	background: var(--polyx-input-bg);
+	border-color: var(--polyx-border);
+}
+
+.polyx-signin__tenant:hover:not(:disabled) {
+	background: var(--polyx-input-bg);
+	border-color: var(--polyx-brand);
+}

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@poly-x/react",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.4",
   "description": "PolyX SDK for React SPAs - provider, hooks, drop-in auth UI",
   "license": "MIT",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist"
   ],
@@ -18,13 +20,14 @@
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       }
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.cts",
   "dependencies": {
-    "@poly-x/core": "0.1.0-alpha.2"
+    "@poly-x/core": "0.1.0-alpha.4"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -51,7 +54,7 @@
     "react-dom": "^19.2.7"
   },
   "scripts": {
-    "build": "tsdown",
+    "build": "tsdown && node scripts/copy-styles.mjs",
     "test": "vitest run",
     "lint": "eslint src"
   }