astryx-dracula 0.5.0 → 0.6.2

package/package.json

@@ -1,122 +1,127 @@
 {
-  "author": "Yuzu Octopus",
-  "bugs": {
-    "url": "https://github.com/yuzu-octopus/astryx-dracula/issues"
-  },
-  "dependencies": {
-    "lucide-react": "^1.45.0"
-  },
-  "description": "Pure Dracula brand theme for Astryx React sites. Dark-only tokens, syntax highlighting, and chart colors with prebuilt CSS.",
-  "devDependencies": {
-    "@astryxdesign/cli": "0.6.3",
-    "@astryxdesign/core": "0.6.3",
-    "@types/bun": "^1.4.2",
-    "@types/node": "^26.5.1",
-    "@types/react": "^19.3.0",
-    "@types/react-dom": "^19.3.0",
-    "@vitejs/plugin-react": "^6.1.1",
-    "typescript": "^7.0.2",
-    "vite": "^8.3.0"
-  },
-  "exports": {
-    "./shared/auth-chrome": "./shared/auth-chrome.tsx",
-    "./shared/auth-chrome-config": "./shared/auth-chrome-config.ts",
-    "./shared/auth-copy": "./shared/auth-copy.ts",
-    "./shared/chaptered-doc": "./shared/chaptered-doc.tsx",
-    "./shared/chaptered-doc-config": "./shared/chaptered-doc-config.ts",
-    "./shared/chart-hues": "./shared/chart-hues.ts",
-    "./shared/chart-labels": "./shared/chart-labels.tsx",
-    "./shared/chart-legend": "./shared/chart-legend.tsx",
-    "./shared/chart-panel-style": "./shared/chart-panel-style.ts",
-    "./shared/data-bar": "./shared/data-bar.tsx",
-    "./shared/gallery-image": "./shared/gallery-image.ts",
-    "./shared/login-demo": "./shared/login-demo.ts",
-    "./shared/metric-delta": "./shared/metric-delta.tsx",
-    "./shared/order-desk": "./shared/order-desk.tsx",
-    "./shared/revenue-chart": "./shared/revenue-chart.tsx",
-    "./shared/scene-castle": "./shared/scene-castle.tsx",
-    "./shared/scene-frame": "./shared/scene-frame.tsx",
-    "./shared/scene-hues": "./shared/scene-hues.ts",
-    "./shared/scene-tile": "./shared/scene-tile.tsx",
-    "./shared/settings-data": "./shared/settings-data.ts",
-    "./shared/settings-rows": "./shared/settings-rows.tsx",
-    "./shared/sparkline": "./shared/sparkline.tsx",
-    "./shared/format-money": "./shared/format-money.ts",
-    "./shared/metric-card": "./shared/metric-card.tsx",
-    "./shared/stars": "./shared/stars.tsx",
-    "./shared/sso-icons": "./shared/sso-icons.tsx",
-    ".": {
-      "types": "./astryx-dracula.d.ts",
-      "default": "./astryx-dracula.js"
-    },
-    "./astryx.integration.mjs": "./astryx.integration.mjs",
-    "./package.json": "./package.json",
-    "./templates/*": "./templates/*",
-    "./theme.css": "./theme.css",
-    "./tokens.css": "./tokens.css"
-  },
-  "files": [
-    "BRAND.md",
-    "LICENSE",
-    "README.md",
-    "USAGE.md",
-    "astryx-dracula.d.ts",
-    "astryx-dracula.js",
-    "astryx-dracula.variants.d.ts",
-    "fonts/",
-    "icons.mjs",
-    "icons.tsx",
-    "shared/",
-    "theme.css",
-    "tokens.css",
-    "templates/",
-    "astryx.integration.mjs"
-  ],
-  "keywords": [
-    "astryx",
-    "dracula",
-    "dracula-theme",
-    "theme",
-    "design-system",
-    "dark-theme",
-    "react",
-    "tokens"
-  ],
-  "license": "MIT",
-  "name": "astryx-dracula",
-  "peerDependencies": {
-    "@astryxdesign/core": "^0.6.3",
-    "lucide-react": "^1.45.0",
-    "react": ">=19.0.0",
-    "react-dom": ">=19.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/yuzu-octopus/astryx-dracula.git"
-  },
-  "scripts": {
-    "audit": "bun run fonts:sync && bun scripts/check.ts",
-    "fonts:sync": "mkdir -p public/fonts && cp fonts/*.woff2 public/fonts/",
-    "build": "tsc --noEmit && vite build",
-    "dev": "vite",
-    "preview": "vite preview",
-    "theme:build": "bun run icons:build && bunx astryx theme build astryx-theme.ts -o theme.css --icons-specifier ./icons.mjs",
-    "icons:build": "bun build icons.tsx --outfile icons.mjs --format esm --external react --external lucide-react",
-    "theme:check": "bun run icons:check && bunx astryx theme build astryx-theme.ts -o theme.css --icons-specifier ./icons.mjs --check --json | bun -e 'const r = JSON.parse(await Bun.stdin.text()); if (r.type !== \"theme.build.check\") { console.error(\"theme:check: unexpected CLI response \" + JSON.stringify(r).slice(0, 200)); process.exit(1); } const stale = r.data.stale.filter(s => s.path !== \"astryx-dracula.js\"); for (const s of stale) console.error(\"stale: \" + s.path + \" (\" + s.reason + \")\"); if (stale.length) process.exit(1); const entry = await import(\"./astryx-dracula.js\"); if (!entry.astryxDraculaTheme || !entry.draculaIconRegistry) { console.error(\"astryx-dracula.js is missing its theme or icon registry export\"); process.exit(1); } console.log(\"theme outputs up to date; astryx-dracula.js (hand-maintained) loads and exports\");' && bun run entry:check",
-    "icons:check": "bun build icons.tsx --outfile .tmp-icons.mjs --format esm --external react --external lucide-react; s=$?; cmp -s .tmp-icons.mjs icons.mjs; c=$?; rm -f .tmp-icons.mjs; [ $s -eq 0 ] && [ $c -eq 0 ] || { echo 'stale: icons.mjs (rerun bun run icons:build)'; exit 1; }",
-    "entry:check": "node -e \"const{pathToFileURL}=require('url');const{resolve}=require('path');import(pathToFileURL(resolve('astryx-dracula.js')).href).then(m=>{if(!m.astryxDraculaTheme||!m.draculaIconRegistry){console.error('astryx-dracula.js is missing its theme or icon registry export');process.exit(1)}console.log('astryx-dracula.js loads under plain Node ESM')}).catch(e=>{console.error('astryx-dracula.js is not importable by Node ESM: '+e.message);process.exit(1)})\"",
-    "prepublishOnly": "bun run theme:check && bun run icons:check && bun run entry:check && bun run audit && tsc --noEmit && bunx react-doctor@latest --score"
-  },
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "trustedDependencies": [
-    "@astryxdesign/core",
-    "@astryxdesign/cli"
-  ],
-  "type": "module",
-  "version": "0.5.0",
-  "patchedDependencies": {
-    "@astryxdesign/core@0.6.3": "patches/@astryxdesign%2Fcore@0.6.3.patch"
-  }
+	"author": "Yuzu Octopus",
+	"bugs": {
+		"url": "https://github.com/yuzu-octopus/astryx-dracula/issues"
+	},
+	"dependencies": {
+		"lucide-react": "^1.61.0"
+	},
+	"description": "Pure Dracula brand theme for Astryx React sites. Dark-only tokens, syntax highlighting, and chart colors with prebuilt CSS.",
+	"devDependencies": {
+		"@astryxdesign/cli": "0.7.2",
+		"@astryxdesign/core": "0.7.2",
+		"@biomejs/biome": "2.6.2",
+		"@types/bun": "^1.4.3",
+		"@types/node": "^26.6.5",
+		"@types/react": "^19.3.0",
+		"@types/react-dom": "^19.3.0",
+		"@vitejs/plugin-react": "^6.1.2",
+		"typescript": "^7.0.2",
+		"vite": "^8.3.5"
+	},
+	"exports": {
+		"./shared/auth-chrome": "./shared/auth-chrome.tsx",
+		"./shared/auth-chrome-config": "./shared/auth-chrome-config.ts",
+		"./shared/auth-copy": "./shared/auth-copy.ts",
+		"./shared/chaptered-doc": "./shared/chaptered-doc.tsx",
+		"./shared/chaptered-doc-config": "./shared/chaptered-doc-config.ts",
+		"./shared/chart-hues": "./shared/chart-hues.ts",
+		"./shared/chart-labels": "./shared/chart-labels.tsx",
+		"./shared/chart-legend": "./shared/chart-legend.tsx",
+		"./shared/chart-panel-style": "./shared/chart-panel-style.ts",
+		"./shared/data-bar": "./shared/data-bar.tsx",
+		"./shared/gallery-image": "./shared/gallery-image.ts",
+		"./shared/login-demo": "./shared/login-demo.ts",
+		"./shared/metric-delta": "./shared/metric-delta.tsx",
+		"./shared/order-desk": "./shared/order-desk.tsx",
+		"./shared/revenue-chart": "./shared/revenue-chart.tsx",
+		"./shared/scene-castle": "./shared/scene-castle.tsx",
+		"./shared/scene-frame": "./shared/scene-frame.tsx",
+		"./shared/scene-hues": "./shared/scene-hues.ts",
+		"./shared/scene-tile": "./shared/scene-tile.tsx",
+		"./shared/settings-data": "./shared/settings-data.ts",
+		"./shared/settings-rows": "./shared/settings-rows.tsx",
+		"./shared/sparkline": "./shared/sparkline.tsx",
+		"./shared/format-money": "./shared/format-money.ts",
+		"./shared/metric-card": "./shared/metric-card.tsx",
+		"./shared/stars": "./shared/stars.tsx",
+		"./shared/sso-icons": "./shared/sso-icons.tsx",
+		".": {
+			"types": "./astryx-dracula.d.ts",
+			"default": "./astryx-dracula.js"
+		},
+		"./astryx.integration.mjs": "./astryx.integration.mjs",
+		"./package.json": "./package.json",
+		"./templates/*": "./templates/*",
+		"./theme.css": {
+			"types": "./theme.css.d.ts",
+			"default": "./theme.css"
+		},
+		"./tokens.css": "./tokens.css"
+	},
+	"files": [
+		"BRAND.md",
+		"LICENSE",
+		"README.md",
+		"USAGE.md",
+		"astryx-dracula.d.ts",
+		"astryx-dracula.js",
+		"astryx-dracula.variants.d.ts",
+		"fonts/",
+		"icons.mjs",
+		"icons.tsx",
+		"shared/",
+		"theme.css.d.ts",
+		"theme.css",
+		"tokens.css",
+		"templates/",
+		"astryx.integration.mjs"
+	],
+	"keywords": [
+		"astryx",
+		"dracula",
+		"dracula-theme",
+		"theme",
+		"design-system",
+		"dark-theme",
+		"react",
+		"tokens"
+	],
+	"license": "MIT",
+	"name": "astryx-dracula",
+	"peerDependencies": {
+		"@astryxdesign/core": "^0.7.2",
+		"lucide-react": "^1.45.0",
+		"react": ">=19.0.0",
+		"react-dom": ">=19.0.0"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/yuzu-octopus/astryx-dracula.git"
+	},
+	"scripts": {
+		"audit": "bun run fonts:sync && bun scripts/check.ts",
+		"fonts:sync": "mkdir -p public/fonts && cp fonts/*.woff2 public/fonts/",
+		"build": "bun check && vite build",
+		"dev": "vite",
+		"preview": "vite preview",
+		"theme:build": "bun run icons:build && bunx astryx theme build astryx-theme.ts -o theme.css --icons-specifier ./icons.mjs",
+		"icons:build": "NODE_ENV=production bun build icons.tsx --outfile icons.mjs --format esm --external react --external lucide-react",
+		"theme:check": "bun run icons:check && bunx astryx theme build astryx-theme.ts -o theme.css --icons-specifier ./icons.mjs --check --json | bun -e 'const r = JSON.parse(await Bun.stdin.text()); if (r.type !== \"theme.build.check\") { console.error(\"theme:check: unexpected CLI response \" + JSON.stringify(r).slice(0, 200)); process.exit(1); } const stale = r.data.stale; for (const s of stale) console.error(\"stale: \" + s.path + \" (\" + s.reason + \")\"); if (stale.length) process.exit(1); const entry = await import(\"./astryx-dracula.js\"); if (!entry.astryxDraculaTheme || !entry.draculaIconRegistry) { console.error(\"astryx-dracula.js is missing its theme or icon registry export\"); process.exit(1); } console.log(\"theme outputs up to date; astryx-dracula.js (hand-maintained) loads and exports\");' && bun run entry:check",
+		"icons:check": "NODE_ENV=production bun build icons.tsx --outfile .tmp-icons.mjs --format esm --external react --external lucide-react; s=$?; cmp -s .tmp-icons.mjs icons.mjs; c=$?; rm -f .tmp-icons.mjs; [ $s -eq 0 ] && [ $c -eq 0 ] || { echo 'stale: icons.mjs (rerun bun run icons:build)'; exit 1; }",
+		"entry:check": "node -e \"const{pathToFileURL}=require('url');const{resolve}=require('path');import(pathToFileURL(resolve('astryx-dracula.js')).href).then(m=>{if(!m.astryxDraculaTheme||!m.draculaIconRegistry){console.error('astryx-dracula.js is missing its theme or icon registry export');process.exit(1)}console.log('astryx-dracula.js loads under plain Node ESM')}).catch(e=>{console.error('astryx-dracula.js is not importable by Node ESM: '+e.message);process.exit(1)})\"",
+		"prepublishOnly": "bun run theme:check && bun run icons:check && bun run entry:check && bun run audit && bun check && bun run fmt:check && bun run lint && bunx react-doctor@latest --score",
+		"fmt": "bun fmt '**/*.{ts,tsx,mjs,js,jsx,json,css}'",
+		"fmt:check": "bun fmt --check '**/*.{ts,tsx,mjs,js,jsx,json,css}'",
+		"lint": "biome lint"
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"trustedDependencies": [
+		"@astryxdesign/core",
+		"@astryxdesign/cli"
+	],
+	"type": "module",
+	"version": "0.6.2"
 }

package/shared/auth-chrome-config.ts

@@ -2,17 +2,17 @@
 // reason as shared/scene-hues.ts: a .tsx exporting non-components breaks React
 // Fast Refresh. Five templates import these, so they are genuinely shared --
 // they were only ever co-located by accident of history.
-import type {CSSProperties} from 'react';
+import type { CSSProperties } from "react";
 
 // Standalone auth pages paint their own body background (no host shell).
 export const authPageStyle: CSSProperties = {
-  minHeight: '100%',
-  backgroundColor: 'var(--color-background-body)',
-  padding: 'var(--spacing-6)',
+	minHeight: "100%",
+	backgroundColor: "var(--color-background-body)",
+	padding: "var(--spacing-6)",
 };
 // Cap the column at 400px but let it shrink to fit narrow screens.
-export const authContentStyle: CSSProperties = {width: '100%', maxWidth: 400};
+export const authContentStyle: CSSProperties = { width: "100%", maxWidth: 400 };
 // WCAG 1.3.5 autocomplete: TextInput forwards unknown props to <input> but its
 // prop type omits input-only attributes, so spread through a widened record.
 export const inputAutoComplete = (value: string) =>
-  ({autoComplete: value}) as Record<string, string>;
+	({ autoComplete: value }) as Record<string, string>;

package/shared/auth-chrome.tsx

@@ -1,41 +1,40 @@
 // Shared login chrome: page wash + 400px column + Moon brand row + the
 // autocomplete widen-record TextInput needs (prop type omits input attrs).
-import type {ReactNode} from 'react';
-import {Moon} from 'lucide-react';
-import {VStack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-import {Icon} from '@astryxdesign/core/Icon';
-import {Card} from '@astryxdesign/core/Card';
-import {Link} from '@astryxdesign/core/Link';
-import {TextInput} from '@astryxdesign/core/TextInput';
-import {Button} from '@astryxdesign/core/Button';
-import {Heading} from '@astryxdesign/core/Text';
-import {
-  AUTH_BRAND_NAME,
-  AUTH_HEADING,
-  AUTH_SUBTITLE,
-  AUTH_PRIMARY_CTA,
-  AUTH_SIGNUP_PROMPT,
-  AUTH_SIGNUP_LINK,
-  AUTH_FORGOT_PASSWORD,
-  AUTH_EMAIL_PLACEHOLDER,
-  AUTH_PASSWORD_PLACEHOLDER,
-  AUTH_TERMS_PREFIX,
-  AUTH_TERMS_SERVICE,
-  AUTH_TERMS_PRIVACY,
-} from 'astryx-dracula/shared/auth-copy';
-import {inputAutoComplete} from 'astryx-dracula/shared/auth-chrome-config';
 
+import { Button } from "@astryxdesign/core/Button";
+import { Card } from "@astryxdesign/core/Card";
+import { Icon } from "@astryxdesign/core/Icon";
+import { VStack } from "@astryxdesign/core/Layout";
+import { Link } from "@astryxdesign/core/Link";
+import { Heading, Text } from "@astryxdesign/core/Text";
+import { TextInput } from "@astryxdesign/core/TextInput";
+import { inputAutoComplete } from "astryx-dracula/shared/auth-chrome-config";
+import {
+	AUTH_BRAND_NAME,
+	AUTH_EMAIL_PLACEHOLDER,
+	AUTH_FORGOT_PASSWORD,
+	AUTH_HEADING,
+	AUTH_PASSWORD_PLACEHOLDER,
+	AUTH_PRIMARY_CTA,
+	AUTH_SIGNUP_LINK,
+	AUTH_SIGNUP_PROMPT,
+	AUTH_SUBTITLE,
+	AUTH_TERMS_PREFIX,
+	AUTH_TERMS_PRIVACY,
+	AUTH_TERMS_SERVICE,
+} from "astryx-dracula/shared/auth-copy";
+import { Moon } from "lucide-react";
+import type { ReactNode } from "react";
 
 export function LoginBrand() {
-  return (
-    <VStack gap={2} hAlign="center">
-      <Icon icon={Moon} size="lg" color="secondary" />
-      <Text type="body" weight="semibold" size="lg">
-        {AUTH_BRAND_NAME}
-      </Text>
-    </VStack>
-  );
+	return (
+		<VStack gap={2} hAlign="center">
+			<Icon icon={Moon} size="lg" color="secondary" />
+			<Text type="body" weight="semibold" size="lg">
+				{AUTH_BRAND_NAME}
+			</Text>
+		</VStack>
+	);
 }
 
 // Shared password-login core: the centered header, credential fields, primary
@@ -45,43 +44,43 @@ export function LoginBrand() {
 // shell — login-split's two-column grid and login-sso's step machine keep
 // their own markup and take the pieces below instead of this whole card.
 export function AuthCard({
-  selfHash,
-  signupLink = AUTH_SIGNUP_LINK,
-  children,
+	selfHash,
+	signupLink = AUTH_SIGNUP_LINK,
+	children,
 }: {
-  selfHash: string;
-  signupLink?: string;
-  children: ReactNode;
+	selfHash: string;
+	signupLink?: string;
+	children: ReactNode;
 }) {
-  return (
-    <>
-      <Card padding={4} width="100%">
-        <VStack gap={4} hAlign="stretch">
-          <VStack gap={1} hAlign="center">
-            <Heading level={1} type="display-2" justify="center">
-              {AUTH_HEADING}
-            </Heading>
-            <Text type="body" color="secondary">
-              {AUTH_SUBTITLE}
-            </Text>
-          </VStack>
-          {children}
-          {/* Prose link: colour alone is not a cue inside a sentence
+	return (
+		<>
+			<Card padding={4} width="100%">
+				<VStack gap={4} hAlign="stretch">
+					<VStack gap={1} hAlign="center">
+						<Heading level={1} type="display-2" justify="center">
+							{AUTH_HEADING}
+						</Heading>
+						<Text type="body" color="secondary">
+							{AUTH_SUBTITLE}
+						</Text>
+					</VStack>
+					{children}
+					{/* Prose link: colour alone is not a cue inside a sentence
               (WCAG 1.4.1 / F73), so it asks for the underline the kit
               only gives on hover. */}
-          <VStack hAlign="center">
-            <Text type="supporting" color="secondary">
-              {AUTH_SIGNUP_PROMPT}{' '}
-              <Link href={selfHash} type="supporting" hasUnderline>
-                {signupLink}
-              </Link>
-            </Text>
-          </VStack>
-        </VStack>
-      </Card>
-      <AuthTerms selfHash={selfHash} />
-    </>
-  );
+					<VStack hAlign="center">
+						<Text type="supporting" color="secondary">
+							{AUTH_SIGNUP_PROMPT}{" "}
+							<Link href={selfHash} type="supporting" hasUnderline>
+								{signupLink}
+							</Link>
+						</Text>
+					</VStack>
+				</VStack>
+			</Card>
+			<AuthTerms selfHash={selfHash} />
+		</>
+	);
 }
 
 // Email + password fields with the shared error/forgot-password rhythm, plus
@@ -89,87 +88,87 @@ export function AuthCard({
 // not the outer 16px: without the group the two inputs sat twice as far
 // apart as the fields below them.
 export function AuthLoginFields({
-  email,
-  password,
-  error,
-  selfHash,
-  isLoading,
-  onEmailChange,
-  onPasswordChange,
-  onSubmit,
+	email,
+	password,
+	error,
+	selfHash,
+	isLoading,
+	onEmailChange,
+	onPasswordChange,
+	onSubmit,
 }: {
-  email: string;
-  password: string;
-  error: string | null;
-  selfHash: string;
-  isLoading: boolean;
-  onEmailChange: (value: string) => void;
-  onPasswordChange: (value: string) => void;
-  onSubmit: () => void;
+	email: string;
+	password: string;
+	error: string | null;
+	selfHash: string;
+	isLoading: boolean;
+	onEmailChange: (value: string) => void;
+	onPasswordChange: (value: string) => void;
+	onSubmit: () => void;
 }) {
-  return (
-    <>
-      <VStack gap={2}>
-        <TextInput
-          label="Email"
-          isLabelHidden
-          value={email}
-          onChange={onEmailChange}
-          placeholder={AUTH_EMAIL_PLACEHOLDER}
-          type="email"
-          {...inputAutoComplete('email')}
-          size="lg"
-          onEnter={onSubmit}
-          status={error ? {type: 'error', message: error} : undefined}
-        />
-        <VStack gap={1}>
-          <TextInput
-            label="Password"
-            isLabelHidden
-            value={password}
-            onChange={onPasswordChange}
-            placeholder={AUTH_PASSWORD_PLACEHOLDER}
-            type="password"
-            {...inputAutoComplete('current-password')}
-            size="lg"
-            onEnter={onSubmit}
-            status={error ? {type: 'error', message: error} : undefined}
-          />
-          {error && (
-            <VStack hAlign="end">
-              <Link href={selfHash} color="secondary" isStandalone>
-                {AUTH_FORGOT_PASSWORD}
-              </Link>
-            </VStack>
-          )}
-        </VStack>
-      </VStack>
-      <Button
-        label={AUTH_PRIMARY_CTA}
-        variant="primary"
-        size="lg"
-        isLoading={isLoading}
-        onClick={onSubmit}
-      />
-    </>
-  );
+	return (
+		<>
+			<VStack gap={2}>
+				<TextInput
+					label="Email"
+					isLabelHidden
+					value={email}
+					onChange={onEmailChange}
+					placeholder={AUTH_EMAIL_PLACEHOLDER}
+					type="email"
+					{...inputAutoComplete("email")}
+					size="lg"
+					onEnter={onSubmit}
+					status={error ? { type: "error", message: error } : undefined}
+				/>
+				<VStack gap={1}>
+					<TextInput
+						label="Password"
+						isLabelHidden
+						value={password}
+						onChange={onPasswordChange}
+						placeholder={AUTH_PASSWORD_PLACEHOLDER}
+						type="password"
+						{...inputAutoComplete("current-password")}
+						size="lg"
+						onEnter={onSubmit}
+						status={error ? { type: "error", message: error } : undefined}
+					/>
+					{error && (
+						<VStack hAlign="end">
+							<Link href={selfHash} color="secondary" isStandalone>
+								{AUTH_FORGOT_PASSWORD}
+							</Link>
+						</VStack>
+					)}
+				</VStack>
+			</VStack>
+			<Button
+				label={AUTH_PRIMARY_CTA}
+				variant="primary"
+				size="lg"
+				isLoading={isLoading}
+				onClick={onSubmit}
+			/>
+		</>
+	);
 }
 
 // The family terms line, rendered below the card in the page column.
-export function AuthTerms({selfHash}: {selfHash: string}) {
-  return (
-    <VStack hAlign="center" width="100%">
-      <Text type="supporting" color="secondary" justify="center">
-        {AUTH_TERMS_PREFIX}{' '}
-        <Link href={selfHash} type="supporting" hasUnderline>
-          {AUTH_TERMS_SERVICE}
-        </Link>{' '}
-        and{' '}
-        <Link href={selfHash} type="supporting" hasUnderline>
-          {AUTH_TERMS_PRIVACY}
-        </Link>
-        .
-      </Text>
-    </VStack>
-  );
+export function AuthTerms({ selfHash }: { selfHash: string }) {
+	return (
+		<VStack hAlign="center" width="100%">
+			<Text type="supporting" color="secondary" justify="center">
+				{AUTH_TERMS_PREFIX}{" "}
+				<Link href={selfHash} type="supporting" hasUnderline>
+					{AUTH_TERMS_SERVICE}
+				</Link>{" "}
+				and{" "}
+				<Link href={selfHash} type="supporting" hasUnderline>
+					{AUTH_TERMS_PRIVACY}
+				</Link>
+				.
+			</Text>
+		</VStack>
+	);
 }