@protobase/ui 0.25.2 → 0.25.4

package/dist/auth/provider-sign-in-page.js

@@ -1,6 +1,7 @@
 import { Spinner } from "../primitives/spinner.js";
 import { signInMessage } from "./auth-messages.js";
 import { providerName } from "./provider-link.js";
+import { text } from "./messages.js";
 import { useAuth } from "./auth-provider.js";
 import { AuthLayout } from "./auth-layout.js";
 import { useEffect, useRef } from "react";
@@ -9,16 +10,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/provider-sign-in-page.tsx
 /** What the page shows while the browser leaves for the provider `name`. */
 const ProviderRedirect = ({ name, workspace }) => /* @__PURE__ */ jsx(AuthLayout, {
-	title: `Signing in with ${name}`,
+	title: text("signingInWith", name),
 	description: workspace,
 	children: /* @__PURE__ */ jsxs("p", {
 		role: "status",
 		className: "flex items-center justify-center gap-2 text-muted-foreground",
 		children: [
 			/* @__PURE__ */ jsx(Spinner, {}),
-			" Taking you to ",
-			name,
-			"…"
+			" ",
+			text("takingYouTo", name)
 		]
 	})
 });
@@ -34,7 +34,7 @@ const ProviderSignInPage = ({ provider, workspace, onFailed }) => {
 	useEffect(() => {
 		if (started.current) return;
 		started.current = true;
-		if (!offered) return onFailed(`Signing in with ${name} is not offered here. Sign in another way.`);
+		if (!offered) return onFailed(text("providerNotOffered", name));
 		signInSocial(provider).catch((failure) => {
 			if (!(failure instanceof AuthError)) throw failure;
 			onFailed(signInMessage(failure));

package/dist/auth/resend-code-button.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -22,7 +23,7 @@ const ResendCodeButton = ({ onResend, cooldown = 30, disabled }) => {
 			onResend();
 		},
 		className: "min-h-10",
-		children: left > 0 ? `Send a new code in ${left}s` : "Send a new code"
+		children: left > 0 ? text("sendNewCodeIn", left) : text("sendNewCode")
 	});
 };
 //#endregion

package/dist/auth/reset-password-form.js

@@ -1,4 +1,5 @@
 import { Input } from "../primitives/input.js";
+import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
 import { useState } from "react";
@@ -8,29 +9,29 @@ const ResetPasswordForm = ({ onSubmit, invalidLink, onRequestNewLink, onBack, bu
 	const [repeat, setRepeat] = useState("");
 	const [mismatch, setMismatch] = useState(false);
 	if (invalidLink) return /* @__PURE__ */ jsxs(AuthLayout, {
-		title: "This link no longer works",
+		title: text("linkExpiredTitle"),
 		children: [/* @__PURE__ */ jsx("p", {
 			className: "text-muted-foreground",
-			children: "A reset link works once, for a limited time. Ask for a new one to choose your password."
+			children: text("linkExpiredExplanation")
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "mt-4 flex flex-col gap-2",
 			children: [onRequestNewLink && /* @__PURE__ */ jsx(Button, {
 				variant: "primary",
 				className: "min-h-10",
 				onClick: onRequestNewLink,
-				children: "Send a new link"
+				children: text("sendNewLink")
 			}), /* @__PURE__ */ jsx(Button, {
 				variant: onRequestNewLink ? "ghost" : "primary",
 				className: "min-h-10",
 				onClick: onBack,
-				children: "Back to sign in"
+				children: text("backToSignIn")
 			})]
 		})]
 	});
-	const shown = mismatch ? "The passwords are not the same." : error;
+	const shown = mismatch ? text("passwordsDiffer") : error;
 	return /* @__PURE__ */ jsx(AuthLayout, {
-		title: "Choose a new password",
-		description: `At least 12 characters.`,
+		title: text("choosePassword"),
+		description: text("atLeast", 12),
 		children: /* @__PURE__ */ jsxs("form", {
 			className: "flex flex-col gap-4",
 			onSubmit: (event) => {
@@ -41,7 +42,7 @@ const ResetPasswordForm = ({ onSubmit, invalidLink, onRequestNewLink, onBack, bu
 			children: [
 				/* @__PURE__ */ jsxs("label", {
 					className: "flex flex-col gap-1.5 font-medium",
-					children: ["New password", /* @__PURE__ */ jsx(Input, {
+					children: [text("newPassword"), /* @__PURE__ */ jsx(Input, {
 						type: "password",
 						name: "new-password",
 						autoComplete: "new-password",
@@ -56,7 +57,7 @@ const ResetPasswordForm = ({ onSubmit, invalidLink, onRequestNewLink, onBack, bu
 				}),
 				/* @__PURE__ */ jsxs("label", {
 					className: "flex flex-col gap-1.5 font-medium",
-					children: ["Repeat new password", /* @__PURE__ */ jsx(Input, {
+					children: [text("repeatPassword"), /* @__PURE__ */ jsx(Input, {
 						type: "password",
 						name: "repeat-password",
 						autoComplete: "new-password",
@@ -70,7 +71,7 @@ const ResetPasswordForm = ({ onSubmit, invalidLink, onRequestNewLink, onBack, bu
 				}),
 				shown && /* @__PURE__ */ jsx("p", {
 					role: "alert",
-					className: "text-xs font-medium text-danger-text",
+					className: "text-body font-medium text-danger-text",
 					children: shown
 				}),
 				/* @__PURE__ */ jsx(Button, {
@@ -78,7 +79,7 @@ const ResetPasswordForm = ({ onSubmit, invalidLink, onRequestNewLink, onBack, bu
 					type: "submit",
 					loading: busy,
 					className: "min-h-10",
-					children: "Set new password"
+					children: text("setPassword")
 				})
 			]
 		})

package/dist/auth/reset-password-page.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { useAuth } from "./auth-provider.js";
 import { ResetPasswordForm } from "./reset-password-form.js";
 import { useState } from "react";
@@ -6,9 +7,9 @@ import { jsx } from "react/jsx-runtime";
 //#region src/auth/reset-password-page.tsx
 /** Better Auth's answers to a new password, in words for the person at the keyboard. */
 const resetPasswordMessage = (error) => {
-	if (error.status === 429) return "Too many attempts. Wait a minute and try again.";
-	if (error.code === "PASSWORD_TOO_SHORT") return `Use at least 12 characters.`;
-	if (error.code === "PASSWORD_TOO_LONG") return "That password is too long.";
+	if (error.status === 429) return text("tooManyAttempts");
+	if (error.code === "PASSWORD_TOO_SHORT") return text("useAtLeast", 12);
+	if (error.code === "PASSWORD_TOO_LONG") return text("passwordTooLong");
 	return error.message;
 };
 /** Sets a new password with the token of an emailed reset link. */

package/dist/auth/setup-required-form.js

@@ -1,27 +1,25 @@
+import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
 import { TwoFactorSetup } from "../account/two-factor-setup.js";
 import { AuthLayout } from "./auth-layout.js";
 import { KeyRound } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/setup-required-form.tsx
-const titles = {
-	twoFactor: "Turn on two-factor authentication",
-	passkey: "Add a passkey"
-};
+const title = (step) => step === "twoFactor" ? text("turnOnTwoFactor") : text("addPasskey");
 /** Shown after signing in while the account lacks something the sign-in policy requires; the app opens once it is set up. */
 const SetupRequiredForm = ({ step, twoFactor, onAddPasskey, busy, error, onSignOut }) => /* @__PURE__ */ jsxs(AuthLayout, {
-	title: titles[step],
-	description: "This app requires it for every account.",
+	title: title(step),
+	description: text("requiredForEveryAccount"),
 	children: [step === "twoFactor" ? /* @__PURE__ */ jsx(TwoFactorSetup, { ...twoFactor }) : /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-4",
 		children: [
 			/* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground",
-				children: "A passkey signs you in with Face ID, Touch ID, Windows Hello, your phone or a security key. Your browser asks which one to use."
+				children: text("passkeyExplanation")
 			}),
 			error && /* @__PURE__ */ jsx("p", {
 				role: "alert",
-				className: "text-xs font-medium text-danger-text",
+				className: "text-body font-medium text-danger-text",
 				children: error
 			}),
 			/* @__PURE__ */ jsxs(Button, {
@@ -29,14 +27,14 @@ const SetupRequiredForm = ({ step, twoFactor, onAddPasskey, busy, error, onSignO
 				loading: busy,
 				onClick: onAddPasskey,
 				className: "min-h-10",
-				children: [/* @__PURE__ */ jsx(KeyRound, { className: "size-4" }), "Add a passkey"]
+				children: [/* @__PURE__ */ jsx(KeyRound, { className: "size-4" }), text("addPasskey")]
 			})
 		]
 	}), /* @__PURE__ */ jsx("button", {
 		type: "button",
 		onClick: onSignOut,
 		className: "mt-4 w-full text-center font-medium text-muted-foreground hover:underline",
-		children: "Sign out"
+		children: text("signOut")
 	})]
 });
 //#endregion

package/dist/auth/setup-required-page.js

@@ -1,5 +1,6 @@
 import { Spinner } from "../primitives/spinner.js";
 import { authMessage } from "./auth-messages.js";
+import { text } from "./messages.js";
 import { useAuth } from "./auth-provider.js";
 import { SetupRequiredForm } from "./setup-required-form.js";
 import { useEffect, useState } from "react";
@@ -13,7 +14,7 @@ const SetupRequiredPage = ({ missing }) => {
 	const [busy, setBusy] = useState(false);
 	const [error, setError] = useState();
 	useEffect(() => {
-		session.account.signInMethods().then(setMethods, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : "Could not read your account"));
+		session.account.signInMethods().then(setMethods, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : text("couldNotReadAccount")));
 	}, [session]);
 	const addPasskey = async () => {
 		setBusy(true);
@@ -29,7 +30,11 @@ const SetupRequiredPage = ({ missing }) => {
 	};
 	if (!methods && !error) return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full min-h-48 items-center justify-center gap-2 text-muted-foreground",
-		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+		children: [
+			/* @__PURE__ */ jsx(Spinner, {}),
+			" ",
+			text("loading")
+		]
 	});
 	return /* @__PURE__ */ jsx(SetupRequiredForm, {
 		step: missing[0],

package/dist/auth/sign-in-form.js

@@ -1,5 +1,6 @@
 import { RouteLink } from "../primitives/route-link.js";
 import { Input } from "../primitives/input.js";
+import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
 import { ProviderIcon } from "./provider-icon.js";
@@ -11,7 +12,7 @@ const Divider = () => /* @__PURE__ */ jsxs("div", {
 	className: "my-4 flex items-center gap-3 text-xs text-muted-foreground",
 	children: [
 		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
-		"or",
+		text("or"),
 		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
 	]
 });
@@ -28,12 +29,12 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 		onSendCode?.(email.trim());
 	};
 	return /* @__PURE__ */ jsxs(AuthLayout, {
-		title: "Sign in to Protobase",
+		title: text("signInTitle"),
 		description: workspace,
 		children: [
 			notice && /* @__PURE__ */ jsx("p", {
 				role: "status",
-				className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
+				className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-body font-medium text-success-text",
 				children: notice
 			}),
 			(offered.length > 0 || withPasskey) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
@@ -43,30 +44,26 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 						onClick: () => onContinueWith?.(provider.id),
 						disabled: busy,
 						className: "min-h-10 w-full",
-						children: [
-							/* @__PURE__ */ jsx(ProviderIcon, { id: provider.id }),
-							"Continue with ",
-							provider.name
-						]
+						children: [/* @__PURE__ */ jsx(ProviderIcon, { id: provider.id }), text("continueWith", provider.name)]
 					}, provider.id)),
 					withPasskey && /* @__PURE__ */ jsxs(Button, {
 						onClick: () => onPasskey?.(),
 						disabled: busy,
 						className: "min-h-10 w-full",
-						children: [/* @__PURE__ */ jsx(KeyRound, { className: "size-4" }), "Sign in with a passkey"]
+						children: [/* @__PURE__ */ jsx(KeyRound, { className: "size-4" }), text("signInWithPasskey")]
 					}),
-					withPasskey && passkeyDomains.slice(1).map((domain) => /* @__PURE__ */ jsxs(Button, {
+					withPasskey && passkeyDomains.slice(1).map((domain) => /* @__PURE__ */ jsx(Button, {
 						variant: "ghost",
 						size: "sm",
 						onClick: () => onPasskey?.(domain),
 						disabled: busy,
 						className: "w-full",
-						children: ["Use a passkey made for ", domain]
+						children: text("passkeyFor", domain)
 					}, domain))
 				]
 			}), withPassword || withCode ? /* @__PURE__ */ jsx(Divider, {}) : error && /* @__PURE__ */ jsx("p", {
 				role: "alert",
-				className: "mt-4 text-xs font-medium text-danger-text",
+				className: "mt-4 text-body font-medium text-danger-text",
 				children: error
 			})] }),
 			(withPassword || withCode) && /* @__PURE__ */ jsxs("form", {
@@ -79,7 +76,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 				children: [
 					/* @__PURE__ */ jsxs("label", {
 						className: "flex flex-col gap-1.5 font-medium",
-						children: ["Email", /* @__PURE__ */ jsx(Input, {
+						children: [text("email"), /* @__PURE__ */ jsx(Input, {
 							ref: emailInput,
 							type: "email",
 							name: "email",
@@ -94,7 +91,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 					}),
 					withPassword && /* @__PURE__ */ jsxs("label", {
 						className: "flex flex-col gap-1.5 font-medium",
-						children: ["Password", /* @__PURE__ */ jsx(Input, {
+						children: [text("password"), /* @__PURE__ */ jsx(Input, {
 							type: "password",
 							name: "password",
 							autoComplete: "current-password",
@@ -107,7 +104,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 					}),
 					error && /* @__PURE__ */ jsx("p", {
 						role: "alert",
-						className: "text-xs font-medium text-danger-text",
+						className: "text-body font-medium text-danger-text",
 						children: error
 					}),
 					withPassword && /* @__PURE__ */ jsx(Button, {
@@ -115,7 +112,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 						type: "submit",
 						loading: busy,
 						className: "min-h-10",
-						children: "Sign in"
+						children: text("signIn")
 					}),
 					withCode && /* @__PURE__ */ jsxs(Button, {
 						variant: withPassword ? "secondary" : "primary",
@@ -124,24 +121,24 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 						loading: busy && !withPassword,
 						disabled: busy,
 						className: "min-h-10",
-						children: [/* @__PURE__ */ jsx(Mail, { className: "size-4" }), "Email me a sign-in code"]
+						children: [/* @__PURE__ */ jsx(Mail, { className: "size-4" }), text("emailSignInCode")]
 					}),
 					withPassword && forgotPassword && /* @__PURE__ */ jsx(RouteLink, {
 						to: forgotPassword,
 						className: "self-center font-medium text-primary-text hover:underline",
-						children: "Forgot password?"
+						children: text("forgotPassword")
 					})
 				]
 			}),
 			signUp && /* @__PURE__ */ jsxs("p", {
 				className: "mt-4 text-center text-muted-foreground",
 				children: [
-					"New here?",
+					text("newHere"),
 					" ",
 					/* @__PURE__ */ jsx(RouteLink, {
 						to: signUp,
 						className: "font-medium text-primary-text hover:underline",
-						children: "Create an account"
+						children: text("createAnAccount")
 					})
 				]
 			}),
@@ -149,7 +146,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 				type: "button",
 				onClick: onBrowse,
 				className: "mt-4 w-full text-center font-medium text-muted-foreground hover:text-foreground hover:underline",
-				children: "Continue without signing in"
+				children: text("browse")
 			})
 		]
 	});

package/dist/auth/sign-in-prompt.js

@@ -1,4 +1,5 @@
 import { RouteLink } from "../primitives/route-link.js";
+import { text } from "./messages.js";
 import { useAuth } from "./auth-provider.js";
 import { Button, buttonClass } from "../primitives/button.js";
 import { useSignInAddress } from "./use-sign-in-address.js";
@@ -31,12 +32,12 @@ const Actions = ({ prompt }) => {
 	}) : canSignUp && /* @__PURE__ */ jsx(RouteLink, {
 		to: link("sign-up"),
 		className: primary,
-		children: "Create an account"
+		children: text("createAnAccount")
 	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RouteLink, {
 		to: link(),
 		className: signUp ? buttonClass() : primary,
-		children: "Sign in"
+		children: text("signIn")
 	}), signUp] });
 };
 /**
@@ -55,7 +56,7 @@ const SignInPrompt = (props) => {
 		onClose: props.onClose,
 		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 			onClick: props.onClose,
-			children: "Not now"
+			children: text("notNow")
 		}), /* @__PURE__ */ jsx(Actions, { prompt })] }),
 		children: /* @__PURE__ */ jsx(Benefits, { benefits: prompt.benefits })
 	});

package/dist/auth/sign-up-code-form.js

@@ -1,21 +1,19 @@
+import { text } from "./messages.js";
 import { CodeForm } from "./code-form.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { slotted } from "../locale/slotted.js";
+import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/auth/sign-up-code-form.tsx
 /** The second step of making an account: the emailed code on its own, before the name and password. */
 const SignUpCodeForm = ({ email, onBack, ...rest }) => /* @__PURE__ */ jsx(CodeForm, {
-	title: "Check your email",
-	description: "Enter the code we sent to create your account.",
-	explanation: /* @__PURE__ */ jsxs(Fragment, { children: [
-		"A 6-digit code is on its way to ",
-		/* @__PURE__ */ jsx("span", {
-			className: "font-medium text-foreground",
-			children: email
-		}),
-		". It works for 5 minutes, once. If the address has an account already, the email says so instead."
-	] }),
-	submitLabel: "Continue",
+	title: text("checkEmail"),
+	description: text("signUpCodeDescription"),
+	explanation: /* @__PURE__ */ jsx(Fragment, { children: slotted(text("signUpCodeSent"), /* @__PURE__ */ jsx("span", {
+		className: "font-medium text-foreground",
+		children: email
+	})) }),
+	submitLabel: text("continue"),
 	onChangeAddress: onBack,
-	changeAddressLabel: "Use another address",
+	changeAddressLabel: text("useAnotherAddress"),
 	...rest
 });
 //#endregion

package/dist/auth/sign-up-details-form.js

@@ -1,6 +1,8 @@
 import { Input } from "../primitives/input.js";
+import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
+import { slotted } from "../locale/slotted.js";
 import { useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/sign-up-details-form.tsx
@@ -12,18 +14,14 @@ const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) =>
 	const withPassword = methods.includes("password");
 	const passwordOptional = methods.includes("emailCode");
 	return /* @__PURE__ */ jsxs(AuthLayout, {
-		title: "Your details",
-		description: "One last step to create your account.",
-		children: [/* @__PURE__ */ jsxs("p", {
+		title: text("detailsTitle"),
+		description: text("detailsDescription"),
+		children: [/* @__PURE__ */ jsx("p", {
 			className: "mb-4 text-muted-foreground",
-			children: [
-				"The code was right: the account is for ",
-				/* @__PURE__ */ jsx("span", {
-					className: "font-medium text-foreground",
-					children: email
-				}),
-				"."
-			]
+			children: slotted(text("codeWasRight"), /* @__PURE__ */ jsx("span", {
+				className: "font-medium text-foreground",
+				children: email
+			}))
 		}), /* @__PURE__ */ jsxs("form", {
 			className: "flex flex-col gap-4",
 			onSubmit: (event) => {
@@ -36,7 +34,7 @@ const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) =>
 			children: [
 				/* @__PURE__ */ jsxs("label", {
 					className: "flex flex-col gap-1.5 font-medium",
-					children: ["Your name", /* @__PURE__ */ jsx(Input, {
+					children: [text("yourName"), /* @__PURE__ */ jsx(Input, {
 						name: "name",
 						autoComplete: "name",
 						required: true,
@@ -51,7 +49,7 @@ const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) =>
 					className: "flex flex-col gap-1.5",
 					children: [/* @__PURE__ */ jsxs("label", {
 						className: "flex flex-col gap-1.5 font-medium",
-						children: [passwordOptional ? "Password (optional)" : "Password", /* @__PURE__ */ jsx(Input, {
+						children: [passwordOptional ? text("passwordOptional") : text("password"), /* @__PURE__ */ jsx(Input, {
 							type: "password",
 							name: "password",
 							autoComplete: "new-password",
@@ -66,17 +64,12 @@ const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) =>
 					}), /* @__PURE__ */ jsxs("p", {
 						id: passwordHint,
 						className: "text-xs text-muted-foreground",
-						children: [
-							"At least ",
-							12,
-							" characters.",
-							passwordOptional && " Without one, you sign in with a code we email you."
-						]
+						children: [text("atLeast", 12), passwordOptional && text("withoutPassword")]
 					})]
 				}),
 				error && /* @__PURE__ */ jsx("p", {
 					role: "alert",
-					className: "text-xs font-medium text-danger-text",
+					className: "text-body font-medium text-danger-text",
 					children: error
 				}),
 				/* @__PURE__ */ jsx(Button, {
@@ -84,13 +77,13 @@ const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) =>
 					type: "submit",
 					loading: busy,
 					className: "min-h-10",
-					children: "Create account"
+					children: text("createAccount")
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
 					onClick: onBack,
 					className: "min-h-10",
-					children: "Use another address"
+					children: text("useAnotherAddress")
 				})
 			]
 		})]

package/dist/auth/sign-up-email-form.js

@@ -1,4 +1,5 @@
 import { Input } from "../primitives/input.js";
+import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
 import { useState } from "react";
@@ -9,7 +10,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const SignUpEmailForm = ({ onSubmit, onSignIn, onBrowse, busy, error, workspace }) => {
 	const [email, setEmail] = useState("");
 	return /* @__PURE__ */ jsxs(AuthLayout, {
-		title: "Create an account",
+		title: text("createAnAccount"),
 		description: workspace,
 		children: [/* @__PURE__ */ jsxs("form", {
 			className: "flex flex-col gap-4",
@@ -20,7 +21,7 @@ const SignUpEmailForm = ({ onSubmit, onSignIn, onBrowse, busy, error, workspace
 			children: [
 				/* @__PURE__ */ jsxs("label", {
 					className: "flex flex-col gap-1.5 font-medium",
-					children: ["Email", /* @__PURE__ */ jsx(Input, {
+					children: [text("email"), /* @__PURE__ */ jsx(Input, {
 						type: "email",
 						name: "email",
 						autoComplete: "email",
@@ -34,11 +35,11 @@ const SignUpEmailForm = ({ onSubmit, onSignIn, onBrowse, busy, error, workspace
 				}),
 				/* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",
-					children: "We email you a code to make sure the address is yours."
+					children: text("codeToConfirm")
 				}),
 				error && /* @__PURE__ */ jsx("p", {
 					role: "alert",
-					className: "text-xs font-medium text-danger-text",
+					className: "text-body font-medium text-danger-text",
 					children: error
 				}),
 				/* @__PURE__ */ jsxs(Button, {
@@ -46,18 +47,18 @@ const SignUpEmailForm = ({ onSubmit, onSignIn, onBrowse, busy, error, workspace
 					type: "submit",
 					loading: busy,
 					className: "min-h-10",
-					children: [/* @__PURE__ */ jsx(Mail, { className: "size-4" }), "Email me a code"]
+					children: [/* @__PURE__ */ jsx(Mail, { className: "size-4" }), text("emailCode")]
 				}),
 				/* @__PURE__ */ jsxs("p", {
 					className: "text-center text-muted-foreground",
 					children: [
-						"Have an account?",
+						text("haveAccount"),
 						" ",
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: onSignIn,
 							className: "font-medium text-primary-text hover:underline",
-							children: "Sign in"
+							children: text("signIn")
 						})
 					]
 				})
@@ -66,7 +67,7 @@ const SignUpEmailForm = ({ onSubmit, onSignIn, onBrowse, busy, error, workspace
 			type: "button",
 			onClick: onBrowse,
 			className: "mt-4 w-full text-center font-medium text-muted-foreground hover:text-foreground hover:underline",
-			children: "Continue without an account"
+			children: text("browseWithoutAccount")
 		})]
 	});
 };

package/dist/auth/sign-up-page.js

@@ -1,4 +1,5 @@
 import { authMessage } from "./auth-messages.js";
+import { text } from "./messages.js";
 import { useAuth } from "./auth-provider.js";
 import { SignUpCodeForm } from "./sign-up-code-form.js";
 import { SignUpDetailsForm } from "./sign-up-details-form.js";
@@ -49,7 +50,7 @@ const SignUpPage = ({ workspace, email, ticket, onCodeSent, onVerified, onBack,
 		onSubmit: (code) => void attempt(async () => onVerified(await verifySignUpCode(email, code))),
 		onResend: () => void attempt(async () => {
 			await sendSignUpCode(email);
-			setNotice("A new code is on its way. Only the newest one works.");
+			setNotice(text("newCodeSent"));
 		})
 	});
 	return /* @__PURE__ */ jsx(SignUpDetailsForm, {