@base316/react 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @base316/react
 
+## 0.3.0 — 2026-10-03
+
+Requires `@base316/sdk` 0.3.0.
+
+### Added
+
+- **White-label for a tenant**: `Base316Provider` takes `tenant` —
+  `{ organizationId }` or `{ organizationExternalId }` — and every component
+  under it shows that tenant's branding (its own, then its parent's, then the
+  environment's). Changing it restyles without a reload; an inline object does
+  not refetch.
+- `TeamMembers` says when a team is reached through the organization that
+  manages it rather than by membership.
+- `SubscriptionManager` and `PricingTable` know when an account's plan is
+  provided by the organization that manages it: the plan is shown with the
+  provider named, and nothing can be bought, changed or cancelled.
+  `usePlans()` returns `managedBy`.
+
 ## 0.2.0
 
 The first release since `0.1.0` on 13 September. The package shipped **8

package/README.md

@@ -79,6 +79,20 @@ inherits your application's styles automatically — silently absorbing whatever
 `body { font }` and `button { }` rules happen to exist produces components that
 look broken in ways neither side can predict.
 
+## White-label for a tenant
+
+When one business runs your product for others — a firm and its clients — show
+the firm's brand on the screens its clients see:
+
+```tsx
+<Base316Provider publishableKey={key} tenant={{ organizationExternalId: firm.id }}>
+```
+
+The tenant's own branding, then its parent's, then your environment's, field
+by field. Change `tenant` when the person switches team and every component
+restyles. `TeamMembers` says so when a team is reached through the firm rather
+than by membership.
+
 ## Reading the session
 
 ```tsx

package/dist/index.cjs

@@ -204,6 +204,10 @@ var STYLESHEET = `
   align-items: stretch;
 }
 
+/* Messages above the cards span the row rather than taking a card's column. */
+.b316-plans-error,
+.b316-plans-managed { grid-column: 1 / -1; }
+
 .b316-plan {
   display: flex;
   flex-direction: column;
@@ -666,6 +670,7 @@ function Base316Provider({
   token: controlledToken,
   onTokenChange,
   appearance: appearance2,
+  tenant,
   className,
   children
 }) {
@@ -694,16 +699,20 @@ function Base316Provider({
     }
     setInternalToken(readStoredToken());
   }, [controlled]);
+  const tenantKey = tenant ? "organizationId" in tenant ? `id:${tenant.organizationId}` : `ext:${tenant.organizationExternalId}` : null;
   (0, import_react.useEffect)(() => {
     let cancelled = false;
-    client.billing.branding().then((result) => {
+    const request = tenantKey ? client.billing.tenantBranding(
+      tenantKey.startsWith("id:") ? { organizationId: tenantKey.slice(3) } : { organizationExternalId: tenantKey.slice(4) }
+    ) : client.billing.branding();
+    request.then((result) => {
       if (!cancelled) setBranding(result);
     }).catch(() => {
     });
     return () => {
       cancelled = true;
     };
-  }, [client]);
+  }, [client, tenantKey]);
   const setToken = (0, import_react.useCallback)(
     (next) => {
       if (controlled) {
@@ -1002,6 +1011,7 @@ function SignIn({
   onSignedIn,
   passkeys = true,
   magicLinkRedirectUrl,
+  phone = false,
   className,
   style
 }) {
@@ -1010,6 +1020,11 @@ function SignIn({
   const [password, setPassword] = (0, import_react3.useState)("");
   const [code, setCode] = (0, import_react3.useState)("");
   const [pendingChallenge, setPendingChallenge] = (0, import_react3.useState)(null);
+  const [pendingFactors, setPendingFactors] = (0, import_react3.useState)([]);
+  const [phoneNumber, setPhoneNumber] = (0, import_react3.useState)("");
+  const [phoneChallenge, setPhoneChallenge] = (0, import_react3.useState)(
+    null
+  );
   const [error, setError] = (0, import_react3.useState)(null);
   const [busy, setBusy] = (0, import_react3.useState)(false);
   const [passkeyReady, setPasskeyReady] = (0, import_react3.useState)(false);
@@ -1116,9 +1131,30 @@ function SignIn({
         onSignedIn?.();
         return;
       }
+      if (mode === "phone") {
+        if (!phoneChallenge) {
+          const started = await client.auth.phone.start({ phone: phoneNumber });
+          setPhoneChallenge({ token: started.challengeToken, hint: started.destinationHint });
+          return;
+        }
+        const signedIn = await client.auth.phone.verify({
+          challengeToken: phoneChallenge.token,
+          code
+        });
+        if ((0, import_sdk2.needsSecondFactor)(signedIn)) {
+          setPendingChallenge(signedIn.challengeToken);
+          setPendingFactors(signedIn.factors);
+          setCode("");
+          return;
+        }
+        setToken(signedIn.token);
+        onSignedIn?.();
+        return;
+      }
       const result = await client.auth.signIn({ email, password });
       if ((0, import_sdk2.needsSecondFactor)(result)) {
         setPendingChallenge(result.challengeToken);
+        setPendingFactors(result.factors);
         return;
       }
       setToken(result.token);
@@ -1126,13 +1162,20 @@ function SignIn({
     } catch (cause) {
       console.error("[base316] sign-in failed", cause);
       setError(
-        pendingChallenge ? "That code was not accepted." : "That email and password did not match."
+        pendingChallenge ? "That code was not accepted." : mode === "phone" ? phoneChallenge ? "That code did not work. Check it, or ask for a new one." : (
+          // Why a text could not be sent is worth saying — a number in the
+          // wrong format, or too many requests — and the server words it
+          // without saying anything about accounts.
+          cause instanceof Error && cause.message ? cause.message : "We could not send a code. Try again."
+        ) : "That email and password did not match."
       );
     } finally {
       setBusy(false);
     }
   }
   const magicAvailable = Boolean(magicLinkRedirectUrl) && !pendingChallenge;
+  const tabsShown = (magicAvailable || phone) && !pendingChallenge;
+  const deliveredFactor = pendingFactors.find((factor) => factor.destinationHint);
   if (linkSent) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cls("b316-card", className), style, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "Check your email" }),
@@ -1155,7 +1198,7 @@ function SignIn({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
     error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    magicAvailable ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "b316-tabs", children: [
+    tabsShown ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "b316-tabs", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
         {
@@ -1165,7 +1208,7 @@ function SignIn({
           children: "Password"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      magicAvailable ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
         {
           type: "button",
@@ -1173,7 +1216,16 @@ function SignIn({
           onClick: () => setMode("magic"),
           children: "Magic link"
         }
-      )
+      ) : null,
+      phone ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          className: cls("b316-tab", mode === "phone" ? "b316-tab-on" : void 0),
+          onClick: () => setMode("phone"),
+          children: "Text message"
+        }
+      ) : null
     ] }) : null,
     pendingChallenge ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "b316-field", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "b316-label", htmlFor: "b316-code", children: "Authentication code" }),
@@ -1189,7 +1241,55 @@ function SignIn({
           required: true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "b316-muted", children: "From your authenticator app, or one of your recovery codes." })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "b316-muted", children: deliveredFactor ? `We sent a code to ${deliveredFactor.destinationHint}. Enter it, or one of your recovery codes.` : "From your authenticator app, or one of your recovery codes." })
+    ] }) : mode === "phone" ? phoneChallenge ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "b316-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "b316-label", htmlFor: "b316-phone-code", children: "Code" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          id: "b316-phone-code",
+          className: "b316-input",
+          value: code,
+          onChange: (event) => setCode(event.target.value),
+          autoComplete: "one-time-code",
+          inputMode: "numeric",
+          required: true
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "b316-muted", children: [
+        "We sent a code to ",
+        phoneChallenge.hint,
+        ". It expires in ten minutes.",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "b316-button-quiet",
+            onClick: () => {
+              setPhoneChallenge(null);
+              setCode("");
+            },
+            children: "Use a different number"
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "b316-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "b316-label", htmlFor: "b316-phone", children: "Mobile number" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          id: "b316-phone",
+          className: "b316-input",
+          type: "tel",
+          value: phoneNumber,
+          onChange: (event) => setPhoneNumber(event.target.value),
+          autoComplete: "tel",
+          placeholder: "+14155550123",
+          required: true
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "b316-muted", children: "Include the country code." })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "b316-field", children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "b316-label", htmlFor: "b316-email", children: "Email" }),
@@ -1222,7 +1322,7 @@ function SignIn({
         )
       ] }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? "Working\u2026" : pendingChallenge ? "Verify" : mode === "magic" ? "Email me a link" : "Sign in" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? "Working\u2026" : pendingChallenge ? "Verify" : mode === "magic" ? "Email me a link" : mode === "phone" && !phoneChallenge ? "Text me a code" : "Sign in" }),
     passkeyReady && !pendingChallenge ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "b316-muted", style: { textAlign: "center", margin: "10px 0" }, children: "or" }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1837,6 +1937,7 @@ var import_react10 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function TwoFactorManager({
   enabled = false,
+  allowSms = false,
   onEnabled,
   onDisabled,
   className,
@@ -1846,6 +1947,7 @@ function TwoFactorManager({
   const [stage, setStage] = (0, import_react10.useState)({ name: "idle" });
   const [on, setOn] = (0, import_react10.useState)(enabled);
   const [code, setCode] = (0, import_react10.useState)("");
+  const [phone, setPhone] = (0, import_react10.useState)("");
   const [error, setError] = (0, import_react10.useState)(null);
   const [busy, setBusy] = (0, import_react10.useState)(false);
   if (!token) {
@@ -1875,6 +1977,21 @@ function TwoFactorManager({
       setBusy(false);
     }
   }
+  async function beginSms() {
+    setBusy(true);
+    setError(null);
+    try {
+      const enrollment = await client.auth.mfa.enrollSms(
+        token,
+        phone.trim() ? { phone: phone.trim() } : {}
+      );
+      setStage({ name: "enrollingEmail", ...enrollment });
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Could not send a code.");
+    } finally {
+      setBusy(false);
+    }
+  }
   async function confirm() {
     if (stage.name !== "enrolling" && stage.name !== "enrollingEmail") {
       return;
@@ -1917,6 +2034,33 @@ function TwoFactorManager({
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Save these recovery codes somewhere safe. Each one signs you in once if you lose your authenticator, and they are not shown again." }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "b316-mfa-code-list", children: stage.recoveryCodes.map((recovery) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("code", { children: recovery }) }, recovery)) }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "b316-button", onClick: () => setStage({ name: "idle" }), children: "I have saved them" })
+    ] }) : stage.name === "smsNumber" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "We will text a code to this number now, and each time you sign in." }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-phone", children: "Mobile number" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "input",
+        {
+          id: "b316-mfa-phone",
+          className: "b316-input",
+          type: "tel",
+          autoComplete: "tel",
+          placeholder: "+14155550123",
+          value: phone,
+          onChange: (event) => setPhone(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "b316-button-quiet",
+            onClick: () => setStage({ name: "idle" }),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
+      ] })
     ] }) : stage.name === "enrollingEmail" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "b316-mfa-enrol", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
         "We sent a code to ",
@@ -2018,7 +2162,17 @@ function TwoFactorManager({
             onClick: beginEmail,
             children: "Email me a code"
           }
-        )
+        ),
+        allowSms ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "b316-button-quiet",
+            disabled: busy,
+            onClick: () => setStage({ name: "smsNumber" }),
+            children: "Text me a code"
+          }
+        ) : null
       ] })
     ] })
   ] });
@@ -2350,6 +2504,16 @@ function TeamMembers({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cls("b316-card b316-team", className), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "b316-team-title", children: team?.name ?? "Team" }),
+    team?.inherited ? (
+      // Not a member of this team, so not in the list below and with nothing
+      // to leave: access comes from the team that manages it, and ends there.
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "b316-muted", children: [
+        "You have access through",
+        " ",
+        teams.find((candidate) => candidate.id === team.via)?.name ?? "the organization that manages this team",
+        "."
+      ] })
+    ) : null,
     error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "b316-team-list", children: (members ?? []).map((member) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("li", { className: "b316-team-member", children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
@@ -2706,6 +2870,7 @@ function usePlans(options = {}) {
   const [busyPlanVersionId, setBusy] = (0, import_react18.useState)(null);
   const [lastError, setLastError] = (0, import_react18.useState)(null);
   const [ownPlanVersionId, setOwnPlanVersionId] = (0, import_react18.useState)(null);
+  const [managedBy, setManagedBy] = (0, import_react18.useState)(null);
   const [reloadCount, setReloadCount] = (0, import_react18.useState)(0);
   const supplied = options.currentPlanVersionId;
   const discover = supplied === void 0;
@@ -2726,13 +2891,16 @@ function usePlans(options = {}) {
     };
   }, [client, reloadCount]);
   (0, import_react18.useEffect)(() => {
-    if (!discover || !token) {
+    if (!token) {
       return;
     }
     let cancelled = false;
     client.billing.subscription(token).then((result) => {
       if (!cancelled) {
-        setOwnPlanVersionId(result.subscription?.planVersion.id ?? null);
+        setManagedBy(result.managedBy ?? null);
+        if (discover) {
+          setOwnPlanVersionId(result.subscription?.planVersion.id ?? null);
+        }
       }
     }).catch(() => null);
     return () => {
@@ -2746,6 +2914,11 @@ function usePlans(options = {}) {
   const selectPlan = (0, import_react18.useCallback)(
     async (plan) => {
       setLastError(null);
+      if (managedBy) {
+        const reason = `Your plan is provided by ${managedBy.name ?? "the organization that manages your account"}.`;
+        setLastError(reason);
+        return { status: "failed", reason };
+      }
       if (!token) {
         return { status: "needs-sign-in" };
       }
@@ -2782,7 +2955,7 @@ function usePlans(options = {}) {
         setBusy(null);
       }
     },
-    [client, token, options.navigate]
+    [client, token, options.navigate, managedBy]
   );
   return {
     plans,
@@ -2792,6 +2965,7 @@ function usePlans(options = {}) {
     busyPlanVersionId,
     lastError,
     signedIn: token !== null,
+    managedBy,
     selectPlan,
     reload
   };
@@ -2831,6 +3005,7 @@ function PricingTable({
     busyPlanVersionId: busy,
     lastError,
     signedIn,
+    managedBy,
     selectPlan
   } = usePlans({ currentPlanVersionId });
   async function choose(plan) {
@@ -2856,7 +3031,16 @@ function PricingTable({
   const anyDescription = plans.some((plan) => Boolean(plan.description));
   const anyFeatured = plans.some((plan) => plan.key === featuredPlanKey);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cls("b316-plans", className), style, children: [
-    lastError ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "b316-plans-error", role: "alert", children: lastError }) : null,
+    managedBy ? (
+      // A client company's plan comes from the firm that runs it. The table
+      // still shows what is on offer, with the current plan marked, but
+      // nothing here can be bought: it would grant this account nothing.
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-plans-managed b316-muted", children: [
+        "Your plan is provided by ",
+        managedBy.name ?? "the organization that manages your account",
+        ". Ask them to change it."
+      ] })
+    ) : lastError ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "b316-plans-error", role: "alert", children: lastError }) : null,
     plans.map((plan) => {
       const base = plan.prices.find((price) => price.featureId === null) ?? plan.prices[0];
       const isCurrent = current === plan.planVersionId;
@@ -2885,7 +3069,7 @@ function PricingTable({
               {
                 type: "button",
                 className: isCurrent ? "b316-button b316-button-current" : "b316-button",
-                disabled: isCurrent || busy !== null || !signedIn && !signInUrl && !onSelectPlan,
+                disabled: isCurrent || managedBy !== null || busy !== null || !signedIn && !signInUrl && !onSelectPlan,
                 onClick: () => {
                   void choose(plan);
                 },
@@ -4217,6 +4401,7 @@ function SubscriptionManager({
   const { client, token, loading: sessionLoading } = useBase316();
   const [subscription, setSubscription] = (0, import_react26.useState)(null);
   const [loading, setLoading] = (0, import_react26.useState)(true);
+  const [managedBy, setManagedBy] = (0, import_react26.useState)(null);
   const [busy, setBusy] = (0, import_react26.useState)(false);
   const [error, setError] = (0, import_react26.useState)(null);
   const load = (0, import_react26.useCallback)(async () => {
@@ -4228,6 +4413,7 @@ function SubscriptionManager({
     try {
       const result = await client.billing.subscription(token);
       setSubscription(result.subscription);
+      setManagedBy(result.managedBy ?? null);
     } catch (cause) {
       console.error("[base316] could not load the subscription", cause);
       setError("Could not load your subscription.");
@@ -4259,7 +4445,11 @@ function SubscriptionManager({
       " \xB7 ",
       subscription.cancelAtPeriodEnd ? `Ends ${renews}` : `Renews ${renews}`
     ] }),
-    subscription.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("p", { className: "b316-muted", children: [
+    managedBy ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("p", { className: "b316-muted", children: [
+      "Provided by ",
+      managedBy.name ?? "the organization that manages your account",
+      ". Ask them to change or cancel it."
+    ] }) : subscription.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("p", { className: "b316-muted", children: [
       "This subscription will not renew. You keep access until ",
       renews,
       "."
@@ -4596,6 +4786,11 @@ var MANIFEST = [
         summary: "Colours, radius and font as tokens. Restyles everything at once.",
         required: false
       },
+      {
+        name: "tenant",
+        summary: "White-label everything inside for one tenant \u2014 `{ organizationId }` or `{ organizationExternalId }`. A firm's name, logo and colours on the screens it runs its clients on; its own branding, then its parent's, then the environment's. Change it when the user switches team.",
+        required: false
+      },
       ...appearance
     ],
     seeAlso: ["useBase316", "useSession"]
@@ -4621,7 +4816,7 @@ var MANIFEST = [
   {
     name: "SignIn",
     kind: "component",
-    summary: "Password, passkey and magic-link sign-in in one form.",
+    summary: "Password, passkey, magic-link and text-message sign-in in one form.",
     useWhen: "The application renders its own sign-in rather than redirecting to the hosted page.",
     requires: [],
     props: [
@@ -4636,6 +4831,11 @@ var MANIFEST = [
         summary: "Where an emailed link lands, which must be registered on the environment. Without it, magic link is not offered at all.",
         required: false
       },
+      {
+        name: "phone",
+        summary: "Offer signing in with a code sent by text message. Needs text messages switched on for the environment, and its own Twilio account in production.",
+        required: false
+      },
       ...appearance
     ],
     seeAlso: ["SignUp", "ForgotPassword"]
@@ -4769,8 +4969,8 @@ var MANIFEST = [
   {
     name: "TwoFactorManager",
     kind: "component",
-    summary: "Turn two-factor authentication on or off, by authenticator app or a code to the inbox.",
-    useWhen: "A security settings page. Offers both factors; the app is stronger, the emailed code is the one people who will not install an app actually use.",
+    summary: "Turn two-factor authentication on or off, by authenticator app, a code to the inbox or a code by text message.",
+    useWhen: "A security settings page. The app is strongest; the emailed or texted code is the one people who will not install an app actually use.",
     requires: ["session"],
     props: [
       {
@@ -4778,6 +4978,11 @@ var MANIFEST = [
         summary: "Whether a factor already exists, which decides which side is shown.",
         required: false
       },
+      {
+        name: "allowSms",
+        summary: "Offer a code by text message. Off by default: it only works once the environment can send one.",
+        required: false
+      },
       { name: "onEnabled", summary: "Called once a factor is confirmed.", required: false },
       { name: "onDisabled", summary: "Called once it is removed.", required: false },
       ...appearance
@@ -4798,7 +5003,7 @@ var MANIFEST = [
   {
     name: "Branding",
     kind: "component",
-    summary: "The environment's logo, name and tagline.",
+    summary: "The logo, name and tagline \u2014 the environment's, or the tenant's when the provider is given a `tenant`.",
     useWhen: "Above a sign-in form, so your pages match the hosted ones.",
     requires: [],
     props: [
@@ -4810,7 +5015,7 @@ var MANIFEST = [
   {
     name: "TeamMembers",
     kind: "component",
-    summary: "Who is in a team, who has been invited, and the way in and out.",
+    summary: "Who is in a team, who has been invited, and the way in and out. A team reached only through the organization that manages it says so, and offers nothing to leave.",
     useWhen: "A Team or Members settings page. One component covers the list, the pending invitations, the invite box and leaving.",
     requires: ["session"],
     props: [