@protobase/ui 0.25.2 → 0.25.4

package/dist/account/sign-in-policy-labels.js

@@ -1,80 +1,81 @@
+import { text } from "./messages.js";
 //#region src/account/sign-in-policy-labels.ts
-const onOff = [{
+const onOff = () => [{
 	value: "allowed",
-	label: "On"
+	label: text("on")
 }, {
 	value: "forbidden",
-	label: "Off"
+	label: text("off")
 }];
-const optionalRequiredOff = [
+const optionalRequiredOff = () => [
 	{
 		value: "allowed",
-		label: "Optional"
+		label: text("optional")
 	},
 	{
 		value: "required",
-		label: "Required"
+		label: text("required")
 	},
 	{
 		value: "forbidden",
-		label: "Off"
+		label: text("off")
 	}
 ];
 /** The rows of the sign-in policy page, in order, with the rules each method takes and their words. */
-const policyRows = [
+const policyRows = () => [
 	{
 		method: "password",
-		label: "Password",
-		description: "Sign in with the email address and a password.",
-		rules: onOff
+		label: text("password"),
+		description: text("passwordDescription"),
+		rules: onOff()
 	},
 	{
 		method: "emailCode",
-		label: "Emailed sign-in code",
-		description: "Sign in with a one-time code mailed to the account's address.",
-		rules: onOff
+		label: text("emailedSignInCode"),
+		description: text("emailedSignInCodeDescription"),
+		rules: onOff()
 	},
 	{
 		method: "passkey",
-		label: "Passkeys",
-		description: "Sign in with Face ID, Touch ID, Windows Hello, a phone or a security key. Required: everyone adds one after signing in.",
-		rules: optionalRequiredOff
+		label: text("passkeys"),
+		description: text("passkeysPolicyDescription"),
+		rules: optionalRequiredOff()
 	},
 	{
 		method: "twoFactor",
-		label: "Two-factor authentication",
-		description: "A code from an authenticator app, or an emailed one, after a password or an emailed sign-in code. Required: everyone turns it on after signing in.",
-		rules: optionalRequiredOff
+		label: text("twoFactor"),
+		description: text("twoFactorPolicyDescription"),
+		rules: optionalRequiredOff()
 	},
 	{
 		method: "staffAccess",
-		label: "Staff sign-in as a person",
-		description: "The team that runs this app signs in as someone to help them, with a reason, for a short session. Each time is in the log below; with \"Email the person\" they are told too.",
+		label: text("staffAccess"),
+		description: text("staffAccessDescription"),
 		rules: [
 			{
 				value: "allowed",
-				label: "On"
+				label: text("on")
 			},
 			{
 				value: "notify",
-				label: "Email the person"
+				label: text("emailThePerson")
 			},
 			{
 				value: "forbidden",
-				label: "Off"
+				label: text("off")
 			}
 		]
 	},
 	{
 		method: "platformSignIn",
-		label: "Sign-in through the platform",
-		description: "The sign-in provider the platform that runs this app adds, for people who have an account here already. It never creates accounts.",
-		rules: onOff
+		label: text("platformSignIn"),
+		description: text("platformSignInDescription"),
+		rules: onOff()
 	}
 ];
 /** The word for `rule` in `method`'s row, for example "Optional" for an allowed passkey. Every rule the server stores has one. */
 const ruleLabel = (method, rule) => {
-	const label = policyRows.find((row) => row.method === method)?.rules.find((option) => option.value === rule)?.label;
+	const label = policyRows().find((row) => row.method === method)?.rules.find((option) => option.value === rule)?.label;
 	if (label === void 0) throw new Error(`No label for the ${rule} rule of ${method}`);
 	return label;
 };

package/dist/account/sign-in-policy-page.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { Spinner } from "../primitives/spinner.js";
 import { PageHeader } from "../app-shell/page-header.js";
 import { authMessage } from "../auth/auth-messages.js";
@@ -13,7 +14,7 @@ const StaffSignIns = ({ operator }) => {
 	const [signIns, setSignIns] = useState();
 	const [error, setError] = useState();
 	useEffect(() => {
-		session.staff.log().then(setSignIns, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : "Could not read the staff sign-ins"));
+		session.staff.log().then(setSignIns, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : text("couldNotReadStaffSignIns")));
 	}, [session]);
 	return /* @__PURE__ */ jsx(StaffSignInLog, {
 		operator,
@@ -32,7 +33,7 @@ const SignInPolicyPage = () => {
 	const [error, setError] = useState();
 	const [notice, setNotice] = useState();
 	useEffect(() => {
-		session.signInPolicy.read().then(setState, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : "Could not read the sign-in policy"));
+		session.signInPolicy.read().then(setState, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : text("couldNotReadPolicy")));
 	}, [session]);
 	const save = async (policy) => {
 		setBusy(true);
@@ -40,7 +41,7 @@ const SignInPolicyPage = () => {
 		setNotice(void 0);
 		try {
 			setState(await session.signInPolicy.save(policy));
-			setNotice("Saved. It applies to every sign-in from now on.");
+			setNotice(text("policySaved"));
 		} catch (failure) {
 			if (!(failure instanceof AuthError)) throw failure;
 			setError(authMessage(failure));
@@ -50,8 +51,8 @@ const SignInPolicyPage = () => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 py-6 md:px-6",
 		children: [/* @__PURE__ */ jsx(PageHeader, {
-			title: "Sign-in policy",
-			subtitle: "How people sign in to this app. Signed-in people keep their session, and are asked for what is newly required within 15 minutes."
+			title: text("signInPolicy"),
+			subtitle: text("policySubtitle")
 		}), state ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SignInPolicyForm, {
 			state,
 			busy,
@@ -64,7 +65,11 @@ const SignInPolicyPage = () => {
 			children: error
 		}) : /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2 text-muted-foreground",
-			children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+			children: [
+				/* @__PURE__ */ jsx(Spinner, {}),
+				" ",
+				text("loading")
+			]
 		})]
 	});
 };

package/dist/account/sign-in-providers-section.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { Badge } from "../primitives/badge.js";
 import { authMessage } from "../auth/auth-messages.js";
 import { Button } from "../primitives/button.js";
@@ -23,8 +24,8 @@ const SignInProvidersSection = ({ providers, linked, onConnect, error: returned
 		}
 	};
 	return /* @__PURE__ */ jsxs(AccountSection, {
-		title: "Connected accounts",
-		description: "Sign in with these instead of your password. Connecting one asks you to sign in there; its address may differ from yours here.",
+		title: text("connectedAccounts"),
+		description: text("connectedAccountsDescription"),
 		children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsx("ul", {
 			className: "divide-y rounded-md border",
 			children: providers.map((provider) => /* @__PURE__ */ jsxs("li", {
@@ -37,13 +38,13 @@ const SignInProvidersSection = ({ providers, linked, onConnect, error: returned
 					}),
 					linked.includes(provider.id) ? /* @__PURE__ */ jsx(Badge, {
 						tone: "green",
-						children: "Connected"
-					}) : /* @__PURE__ */ jsxs(Button, {
+						children: text("connected")
+					}) : /* @__PURE__ */ jsx(Button, {
 						size: "sm",
 						loading: busy === provider.id,
 						disabled: busy !== void 0,
 						onClick: () => void connect(provider.id),
-						children: ["Connect ", provider.name]
+						children: text("connect", provider.name)
 					})
 				]
 			}, provider.id))

package/dist/account/staff-sign-in-log.js

@@ -1,27 +1,28 @@
+import { text } from "./messages.js";
 import { Badge } from "../primitives/badge.js";
 import { formatDateTime } from "../format/date.js";
 import { AccountSection, SectionError } from "./account-section.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/account/staff-sign-in-log.tsx
-const stateOf = (entry, now) => entry.endedAt ? /* @__PURE__ */ jsxs(Badge, {
+const stateOf = (entry, now) => entry.endedAt ? /* @__PURE__ */ jsx(Badge, {
 	tone: "neutral",
-	children: ["Stopped ", formatDateTime(Date.parse(entry.endedAt))]
-}) : Date.parse(entry.expiresAt) <= now ? /* @__PURE__ */ jsxs(Badge, {
+	children: text("stopped", formatDateTime(Date.parse(entry.endedAt)))
+}) : Date.parse(entry.expiresAt) <= now ? /* @__PURE__ */ jsx(Badge, {
 	tone: "neutral",
-	children: ["Ended ", formatDateTime(Date.parse(entry.expiresAt))]
-}) : /* @__PURE__ */ jsxs(Badge, {
+	children: text("ended", formatDateTime(Date.parse(entry.expiresAt)))
+}) : /* @__PURE__ */ jsx(Badge, {
 	tone: "amber",
-	children: ["Signed in until ", formatDateTime(Date.parse(entry.expiresAt))]
+	children: text("signedInUntil", formatDateTime(Date.parse(entry.expiresAt)))
 });
 /** The app's log of staff sign-ins, for admins: who signed in as whom, why, and when. */
 const StaffSignInLog = ({ signIns, operator, error, now = Date.now() }) => /* @__PURE__ */ jsxs(AccountSection, {
-	title: "Staff sign-ins",
-	description: `Each time staff of ${operator} signed in as someone here, newest first.`,
+	title: text("staffSignIns"),
+	description: text("staffSignInsDescription", operator),
 	children: [
 		/* @__PURE__ */ jsx(SectionError, { message: error }),
 		signIns && signIns.length === 0 && /* @__PURE__ */ jsx("p", {
 			className: "text-muted-foreground",
-			children: "No staff has signed in as anyone yet."
+			children: text("noStaffSignIns")
 		}),
 		signIns && signIns.length > 0 && /* @__PURE__ */ jsx("ul", {
 			className: "divide-y rounded-md border",
@@ -37,7 +38,7 @@ const StaffSignInLog = ({ signIns, operator, error, now = Date.now() }) => /* @_
 							}),
 							/* @__PURE__ */ jsx("span", {
 								className: "text-muted-foreground",
-								children: "as"
+								children: text("as")
 							}),
 							/* @__PURE__ */ jsx("span", {
 								className: "font-medium break-all",

package/dist/account/totp-qr.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { encode } from "uqr";
@@ -18,7 +19,7 @@ const TotpQr = ({ uri, className }) => {
 	return /* @__PURE__ */ jsxs("svg", {
 		viewBox: `0 0 ${size} ${size}`,
 		role: "img",
-		"aria-label": "QR code for your authenticator app",
+		"aria-label": text("qrCode"),
 		shapeRendering: "crispEdges",
 		className,
 		children: [/* @__PURE__ */ jsx("rect", {

package/dist/account/two-factor-section.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { Badge } from "../primitives/badge.js";
 import { Button } from "../primitives/button.js";
 import { Dialog } from "../primitives/dialog.js";
@@ -9,9 +10,9 @@ import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/account/two-factor-section.tsx
 const offDescriptions = {
-	allowed: "Ask for a second step after your password or an emailed sign-in code: a code from an authenticator app, or one emailed to you. A passkey needs no second step.",
-	required: "This app requires two-factor authentication for every account. Turn it on to keep using the app.",
-	forbidden: "Your admin turned two-factor authentication off for this app."
+	allowed: "twoFactorAllowed",
+	required: "twoFactorRequired",
+	forbidden: "twoFactorForbidden"
 };
 const TwoFactorSection = (props) => {
 	const { rule, enabled, authenticatorApp, mail, needsPassword, onTurnOff, onNewBackupCodes, onChanged } = props;
@@ -19,14 +20,14 @@ const TwoFactorSection = (props) => {
 	const close = () => setOpen(void 0);
 	const status = enabled ? /* @__PURE__ */ jsx(Badge, {
 		tone: "green",
-		children: "On"
+		children: text("on")
 	}) : rule === "required" ? /* @__PURE__ */ jsx(Badge, {
 		tone: "amber",
-		children: "Required"
-	}) : /* @__PURE__ */ jsx(Badge, { children: "Off" });
-	const description = !enabled ? offDescriptions[rule] : authenticatorApp ? `Signing in with a password or an emailed sign-in code also asks for a code from your authenticator app${mail ? ", or one emailed to you" : ""}. Backup codes work when you do not have the app.` : "Signing in with a password or an emailed sign-in code also asks for a code emailed to you.";
+		children: text("required")
+	}) : /* @__PURE__ */ jsx(Badge, { children: text("off") });
+	const description = !enabled ? text(offDescriptions[rule]) : authenticatorApp ? text(mail ? "twoFactorOnWithAppOrMail" : "twoFactorOnWithApp") : text("twoFactorOnWithMail");
 	if (open?.kind === "setup") return /* @__PURE__ */ jsx(AccountSection, {
-		title: "Two-factor authentication",
+		title: text("twoFactor"),
 		status,
 		description,
 		children: /* @__PURE__ */ jsx("div", {
@@ -46,7 +47,7 @@ const TwoFactorSection = (props) => {
 		})
 	});
 	return /* @__PURE__ */ jsxs(AccountSection, {
-		title: "Two-factor authentication",
+		title: text("twoFactor"),
 		status,
 		description,
 		children: [
@@ -59,32 +60,32 @@ const TwoFactorSection = (props) => {
 							kind: "setup",
 							appOnly: false
 						}),
-						children: "Turn on"
+						children: text("turnOn")
 					}),
 					enabled && !authenticatorApp && rule !== "forbidden" && /* @__PURE__ */ jsx(Button, {
 						onClick: () => setOpen({
 							kind: "setup",
 							appOnly: true
 						}),
-						children: "Add an authenticator app"
+						children: text("addAuthenticator")
 					}),
 					enabled && authenticatorApp && /* @__PURE__ */ jsx(Button, {
 						onClick: () => setOpen({ kind: "new-codes" }),
-						children: "New backup codes"
+						children: text("newBackupCodes")
 					}),
 					enabled && /* @__PURE__ */ jsx(Button, {
 						variant: "danger",
 						disabled: rule === "required",
-						title: rule === "required" ? "This app requires two-factor authentication." : void 0,
+						title: rule === "required" ? text("twoFactorIsRequired") : void 0,
 						onClick: () => setOpen({ kind: "turn-off" }),
-						children: "Turn off"
+						children: text("turnOff")
 					})
 				]
 			}),
 			open?.kind === "turn-off" && /* @__PURE__ */ jsx(PasswordDialog, {
-				title: "Turn off two-factor authentication?",
-				description: "Signing in then needs only your password or an emailed code. Your backup codes stop working.",
-				confirmLabel: "Turn off",
+				title: text("turnOffTitle"),
+				description: text("turnOffDescription"),
+				confirmLabel: text("turnOff"),
 				danger: true,
 				needsPassword,
 				onClose: close,
@@ -95,9 +96,9 @@ const TwoFactorSection = (props) => {
 				}
 			}),
 			open?.kind === "new-codes" && /* @__PURE__ */ jsx(PasswordDialog, {
-				title: "Make new backup codes?",
-				description: "Your current backup codes stop working, and you get ten new ones.",
-				confirmLabel: "Make new codes",
+				title: text("newCodesTitle"),
+				description: text("newCodesDescription"),
+				confirmLabel: text("makeNewCodes"),
 				needsPassword,
 				onClose: close,
 				onConfirm: async (password) => setOpen({
@@ -106,13 +107,13 @@ const TwoFactorSection = (props) => {
 				})
 			}),
 			open?.kind === "codes" && /* @__PURE__ */ jsx(Dialog, {
-				title: "Your new backup codes",
-				description: "Keep them somewhere safe: each one signs you in once if you lose your phone. They are not shown again.",
+				title: text("yourNewCodes"),
+				description: text("keepCodesSafe"),
 				onClose: close,
 				actions: /* @__PURE__ */ jsx(Button, {
 					variant: "primary",
 					onClick: close,
-					children: "I saved my backup codes"
+					children: text("savedCodes")
 				}),
 				children: /* @__PURE__ */ jsx(BackupCodes, { codes: open.codes })
 			})

package/dist/account/two-factor-setup.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
 import { authMessage } from "../auth/auth-messages.js";
@@ -9,14 +10,14 @@ import { useState } from "react";
 import { AuthError } from "@protobase/client";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/account/two-factor-setup.tsx
-const choices = [{
+const choices = () => [{
 	value: "app",
-	label: "Authenticator app",
-	description: "A code from an app such as Google Authenticator, Microsoft Authenticator or 1Password. Comes with backup codes."
+	label: text("authenticatorApp"),
+	description: text("authenticatorAppDescription")
 }, {
 	value: "email",
-	label: "Emailed code",
-	description: "A code mailed to your address each time you sign in with a password or an emailed sign-in code."
+	label: text("emailedCode"),
+	description: text("emailedCodeDescription")
 }];
 /** Turns on two-factor authentication: choose the app or emailed codes, confirm the password, scan, and keep the backup codes. */
 const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfirmApp, onEmailedCodes, onDone, onCancel }) => {
@@ -26,7 +27,7 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 	const [code, setCode] = useState("");
 	const [busy, setBusy] = useState(false);
 	const [error, setError] = useState();
-	const offered = offerEmailedCodes ? choices : choices.filter((option) => option.value === "app");
+	const offered = offerEmailedCodes ? choices() : choices().filter((option) => option.value === "app");
 	const attempt = async (action) => {
 		setBusy(true);
 		setError(void 0);
@@ -58,7 +59,7 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 	});
 	const errorLine = error && /* @__PURE__ */ jsx("p", {
 		role: "alert",
-		className: "text-xs font-medium text-danger-text",
+		className: "text-body font-medium text-danger-text",
 		children: error
 	});
 	if (step.kind === "backup-codes") return /* @__PURE__ */ jsxs("div", {
@@ -66,14 +67,14 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 		children: [
 			/* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground",
-				children: "Two-factor authentication is on. Keep these backup codes somewhere safe: each one signs you in once if you lose your phone. They are not shown again."
+				children: text("twoFactorIsOn")
 			}),
 			/* @__PURE__ */ jsx(BackupCodes, { codes: step.codes }),
 			/* @__PURE__ */ jsx(Button, {
 				variant: "primary",
 				onClick: onDone,
 				className: "min-h-10",
-				children: "I saved my backup codes"
+				children: text("savedCodes")
 			})
 		]
 	});
@@ -86,7 +87,7 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 		children: [
 			/* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground",
-				children: "Scan this code with your authenticator app, then enter the 6-digit code it shows."
+				children: text("scanCode")
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col items-center gap-2",
@@ -95,7 +96,7 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 					className: "size-44 rounded-md border"
 				}), /* @__PURE__ */ jsxs("p", {
 					className: "text-center text-xs text-muted-foreground",
-					children: ["Can't scan it? Enter this key in the app:", /* @__PURE__ */ jsx("span", {
+					children: [text("cannotScan"), /* @__PURE__ */ jsx("span", {
 						className: "mt-1 block break-all font-mono text-body text-foreground",
 						children: totpKey(step.setup.totpURI)
 					})]
@@ -103,7 +104,7 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 			}),
 			/* @__PURE__ */ jsxs("label", {
 				className: "flex flex-col gap-1.5 font-medium",
-				children: ["Code from the app", /* @__PURE__ */ jsx(OtpInput, {
+				children: [text("codeFromApp"), /* @__PURE__ */ jsx(OtpInput, {
 					name: "code",
 					required: true,
 					autoFocus: true,
@@ -119,13 +120,13 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 				type: "submit",
 				loading: busy,
 				className: "min-h-10",
-				children: "Turn on"
+				children: text("turnOn")
 			}),
 			onCancel && /* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
 				onClick: onCancel,
 				className: "min-h-10",
-				children: "Cancel"
+				children: text("cancel")
 			})
 		]
 	});
@@ -138,7 +139,7 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				role: "radiogroup",
-				"aria-label": "Second step",
+				"aria-label": text("secondStep"),
 				className: "flex flex-col gap-2",
 				children: offered.map((option) => /* @__PURE__ */ jsxs("button", {
 					type: "button",
@@ -157,7 +158,7 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 			}),
 			needsPassword && /* @__PURE__ */ jsxs("label", {
 				className: "flex flex-col gap-1.5 font-medium",
-				children: ["Your password", /* @__PURE__ */ jsx(Input, {
+				children: [text("yourPassword"), /* @__PURE__ */ jsx(Input, {
 					type: "password",
 					name: "password",
 					autoComplete: "current-password",
@@ -174,13 +175,13 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 				type: "submit",
 				loading: busy,
 				className: "min-h-10",
-				children: "Continue"
+				children: text("continue")
 			}),
 			onCancel && /* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
 				onClick: onCancel,
 				className: "min-h-10",
-				children: "Cancel"
+				children: text("cancel")
 			})
 		]
 	});

package/dist/action-card/action-card.js

@@ -1,6 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { Button } from "../primitives/button.js";
 import { Dialog } from "../primitives/dialog.js";
+import { text } from "./messages.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/action-card/action-card.tsx
@@ -76,7 +77,7 @@ const ActionCard = ({ title, tone = "neutral", badge, note, actions = [], onActi
 				onClose: () => setConfirming(void 0),
 				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 					onClick: () => setConfirming(void 0),
-					children: "Cancel"
+					children: text("cancel")
 				}), /* @__PURE__ */ jsx(Button, {
 					variant: confirming.style === "danger" ? "danger" : "primary",
 					onClick: () => {

package/dist/action-card/field-list.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/action-card/field-list.tsx
 /** Labelled values, one per row, inside a card. */
 const FieldList = ({ fields }) => /* @__PURE__ */ jsx("dl", {
-	className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs",
+	className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-body",
 	children: fields.map((field, index) => /* @__PURE__ */ jsxs("div", {
 		className: "contents",
 		children: [/* @__PURE__ */ jsx("dt", {

package/dist/action-card/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/action-card/messages.ts
+const text = defineMessages({
+	en: { cancel: "Cancel" },
+	nl: { cancel: "Annuleren" }
+});
+//#endregion
+export { text };

package/dist/activity-chart/activity-chart.js

@@ -6,6 +6,7 @@ import { formatDayShort } from "../format/date.js";
 import { activitySeries } from "../mocks/activity.js";
 import { halfOverHalfDelta, totalCount } from "./activity-math.js";
 import { ActivityTooltip } from "./activity-tooltip.js";
+import { text } from "./messages.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
@@ -54,10 +55,10 @@ const ActivityChart = ({ title = "Orders created", noun = "orders", defaultGranu
 				onChange: setGranularity,
 				options: [{
 					value: "day",
-					label: "Day"
+					label: text("day")
 				}, {
 					value: "week",
-					label: "Week"
+					label: text("week")
 				}]
 			})]
 		}), /* @__PURE__ */ jsx("div", {

package/dist/activity-chart/messages.js

@@ -0,0 +1,14 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/activity-chart/messages.ts
+const text = defineMessages({
+	en: {
+		day: "Day",
+		week: "Week"
+	},
+	nl: {
+		day: "Dag",
+		week: "Week"
+	}
+});
+//#endregion
+export { text };

package/dist/app/app.d.ts

@@ -2,8 +2,8 @@ import { SidebarMode } from "../app-shell/sidebar-mode.js";
 import "../app-shell/index.js";
 import { ProjectUi } from "./pages/project-ui.js";
 import { PluginLoader } from "../plugins/load-plugin.js";
-import { AssistantClient, AuthSession, Client, RuntimeClient } from "@protobase/client";
 import { Locale } from "@protobase/schema/internal";
+import { AssistantClient, AuthSession, Client, RuntimeClient } from "@protobase/client";
 //#region src/app/app.d.ts
 export type AppProps = {
   /** Where `/api/v1` lives. Defaults to the current origin. */