@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/pages/about-page/index.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { About01 } from '../../blocks/about-01/index.js';
+import { Services01 } from '../../blocks/services-01/index.js';
+import { Story01 } from '../../blocks/story-01/index.js';
+import { Team01 } from '../../blocks/team-01/index.js';
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { Section, SectionHeading, childLevel } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * A complete about screen, in the order a reader arrives with its questions.
+ *
+ * **The decision this Page makes is the order, and the order is the whole of what
+ * it is.** Five bands, in this sequence: what this is, how it got here, who is
+ * here, what it does, and how to reach it. Each is a question a reader actually
+ * arrives with rather than a section a template happens to contain, and the
+ * sequence is the one those questions are asked in. A reader who opens an about
+ * page does not want the history first, because the history is only legible once
+ * they know what the thing is; they do not want the team before the story, because
+ * a name with no history behind it is a logo; and they do not want the services
+ * before the people, because a list of capabilities with nobody attached to it is
+ * a brochure. So: the statement, then the rail, then the faces, then the
+ * engagements, then the way on.
+ *
+ * **The order costs something, and the cost is the point of stating it.** A
+ * consumer whose story belongs after the team, which is a real and defensible
+ * arrangement for a company whose people are the argument, cannot reorder this
+ * page; the honest answer is that it composes two Pages, one holding the people
+ * and one holding the story, and the seam between them is two page vertical
+ * rhythms where the author wanted one. That is the correct price of an opinionated
+ * order. The alternative was a `order` prop, or a slots array, and either would
+ * have moved the decision from this file to the call site, which is to say it would
+ * have stopped being a Page and become a container for five Blocks with a layout
+ * the consumer has to get right themselves. An order the Page does not own is an
+ * order every consumer gets wrong differently.
+ *
+ * **What the Page refuses is which bands appear.** It decides the sequence and
+ * nothing else. `milestones`, `people`, `services` and `contact` are all optional
+ * and their absence removes a band without moving any other, so a product with no
+ * story to tell omits `milestones` and reads the same four questions in the same
+ * order. The Page holds no opinion about how many of the five a reader needs, and
+ * that is the same refusal `PageHeader01` and `Changelog01` state: the structure
+ * is read from the data rather than imposed on it.
+ *
+ * **The `h1` is the about band's own section heading, and that is a decision worth
+ * a paragraph.** The alternative is a title the Page draws above the first band,
+ * and it was rejected for two reasons. The first is duplication: the about band
+ * opens with a title, and a title the Page drew above it would be the same words
+ * twice within one screen. The second is that a Page that draws its own heading
+ * band has to decide where the bands start below it, and the answer is always a
+ * second `Section` of vertical rhythm between the heading and the first thing the
+ * heading is about, which on a page that already opens with a statement reads as
+ * an empty band. Handing the caller's title to the first band puts the page
+ * heading where the page's argument is, gives the page exactly one `h1` without
+ * the Page having to police that, and lets `About01` hold the heading left, which
+ * is the alignment `SectionHeading` requires of anything with content under it.
+ *
+ * **The bands after the first are untitled, and the outline that follows is
+ * deliberate.** Every Block below the about band is composed at the page's own
+ * heading level, so the principles, the milestones, the people and the engagements
+ * are all one step below the page heading and each band's items sit at that same
+ * level. The alternative was a section title per band, and that is a set of props
+ * whose every value is a section heading this Page would then own, which is a Page
+ * whose interface is a form rather than a screen. What the reader gets instead is
+ * a document they can navigate by heading: the page name, then every titled thing
+ * on the page, which is what a reader jumping to "the person who does X" or "the
+ * milestone where we shipped Y" is actually looking for. The cost is that no band
+ * announces itself, and a consumer who wants titled sections composes
+ * `SectionHeading` above the bands itself, where the words are the consumer's.
+ *
+ * **The closing band is a heading and a link, and it is not `Contact01`.** That
+ * Block is a form, its `onSubmit` is a function, and a function cannot cross from a
+ * server Component to a client Component, so a Page that composed it would have to
+ * be a client Component itself and every datum on this screen would then have to
+ * be serialised across that boundary to reach a band four sections down. The
+ * rejected alternative was a `form` slot, and it was refused for the same reason
+ * every other slot on this Page is a node rather than a callback: a Page is a
+ * screen model and a screen model describes a screen, it does not act on one.
+ * A consumer that wants a contact form on its about page composes `Contact01`
+ * beside this Page, which is where the form and the handler that owns it live.
+ *
+ * **The link arms are checked before anything is drawn.** A person or an
+ * engagement with an `href` and no `hrefLabel` would render a link announced by
+ * its address, which is punctuation rather than a name, and the cost of finding
+ * that out from a screen reader is a reader who cannot follow it. The Page throws
+ * rather than degrade, for the reason `Team01`, `ContentGrid01` and `Changelog01`
+ * each state for their own link: a defect that is invisible in a screenshot is not
+ * a defect a design system can afford to ship quietly.
+ *
+ * **The collections are copied rather than forwarded, and that is a boundary with
+ * `About01`, `Story01` and `Services01`.** Those Blocks declare mutable lists and
+ * this Page declares `readonly` ones, so each list is handed over as a fresh
+ * array. The cost is one allocation per band and the reason is a fixture: an
+ * `as const` array is how a consumer writes data they did not type by hand, and a
+ * mutable prop rejects it at the moment it is most useful.
+ *
+ * It is a server Component. It fetches nothing, it holds no state, it takes no
+ * function prop and it imports no router, so a consumer renders it from whichever
+ * route their framework names for the about page.
+ */
+export function AboutPage({ eyebrow, title, description, statement, principles, milestones, people, services, contact, headingLevel = 'h1', className, }) {
+    assertLinkLabels(people, services);
+    return (_jsxs("div", { "data-slot": "about-page", className: cn(className), children: [_jsx(About01, { eyebrow: eyebrow, title: title, statement: statement, body: description, principles: [...principles], headingLevel: headingLevel }), milestones === undefined || milestones.length === 0 ? null : (_jsx(Story01, { milestones: milestones.map((milestone) => ({
+                    ...milestone,
+                    // The rail draws one paragraph per milestone, so a milestone with no
+                    // body is handed an empty node rather than dropped: a hole in a
+                    // history is worse than a row with one sentence fewer.
+                    body: milestone.body ?? null,
+                })), headingLevel: headingLevel })), people === undefined || people.length === 0 ? null : (_jsx(Team01, { people: [...people], headingLevel: headingLevel })), services === undefined || services.length === 0 ? null : (_jsx(Services01, { services: services.map(asEngagement), headingLevel: headingLevel })), contact === undefined ? null : (_jsxs(Section, { "data-slot": "about-page-contact", children: [_jsx(SectionHeading, { as: childLevel(headingLevel), align: "left", title: contact.title, description: contact.description, className: "mb-8" }), contact.cta === undefined ? null : (_jsx(CtaLink, { href: contact.cta.href, children: contact.cta.label }))] }))] }));
+}
+/**
+ * One engagement as the grid draws it, with the two link arms kept apart.
+ *
+ * `Services01` states the pair as a union rather than as two optional fields, and
+ * this is the seam between that union and a Page prop which is flat on purpose: a
+ * consumer's data model is flat, and a caller that had to narrow their own record
+ * before they could hand it over would be doing the Block's type work at every
+ * call site. So the two arms are built here, once, and the flat pair is checked
+ * above before this runs.
+ *
+ * The `hrefLabel` fallback is unreachable, and it is there because the type cannot
+ * know the check has already thrown. It is written as an empty string rather than
+ * as an assertion so that a future change which reorders the two would render an
+ * unnamed link rather than quietly lie to the compiler.
+ */
+function asEngagement(service) {
+    const shared = {
+        id: service.id,
+        title: service.title,
+        body: service.body,
+        deliverables: service.deliverables === undefined ? undefined : [...service.deliverables],
+        outcome: service.outcome,
+    };
+    return service.href === undefined
+        ? shared
+        : { ...shared, href: service.href, hrefLabel: service.hrefLabel ?? '' };
+}
+/**
+ * The two link checks the composed Bands would otherwise make on the Page's
+ * behalf, run once here so the message names the Page's own prop.
+ *
+ * `Team01` and `Services01` each throw for their own link pair, and the reason
+ * this runs anyway is that a consumer reading a stack trace wants the name of the
+ * prop they passed, not the name of the band three frames down that received it.
+ * The word is the same one either way; only the sentence about who to fix changes.
+ */
+function assertLinkLabels(people, services) {
+    for (const person of people ?? []) {
+        if (person.href !== undefined && (person.hrefLabel === undefined || person.hrefLabel.trim() === '')) {
+            throw new Error('AboutPage: a person declares an href and no hrefLabel, so the cell would carry a link announced by its ' +
+                'address, which a screen reader reads out as punctuation rather than as a name. Pass the words that say ' +
+                'where the person goes, or drop the href.');
+        }
+    }
+    for (const service of services ?? []) {
+        if (service.href !== undefined && (service.hrefLabel === undefined || service.hrefLabel.trim() === '')) {
+            throw new Error('AboutPage: an engagement declares an href and no hrefLabel, so the card would carry a link announced by ' +
+                'its address. Pass the words that say where the engagement goes, or drop the href.');
+        }
+    }
+}
+export default AboutPage;

package/dist/pages/auth-page/index.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentProps, ReactNode } from 'react';
-import { AuthForm01 } from '../../blocks/auth-form-01';
+import { AuthForm01 } from '../../blocks/auth-form-01/index.js';
+import type { HeadingLevel } from '../../components/ui/section.js';
 export type AuthPageAside = {
     /** The supporting card's title. */
     title: string;
@@ -17,6 +18,18 @@ export type AuthPageProps = {
     aside?: AuthPageAside;
     /** A node under the form, such as a legal line or a link to another screen. */
     footer?: ReactNode;
+    /**
+     * Heading level for the two region titles, the form's and the aside's. See
+     * `HeadingLevel`.
+     *
+     * The page draws no heading of its own, so each region names itself and the two
+     * are siblings in the outline. They therefore take one level between them
+     * rather than each choosing one: two regions that announced themselves at
+     * different depths would read as one inside the other, and nothing in the layout
+     * says so. Defaults to `h2`, because a page composes under a document that has
+     * its own `h1`.
+     */
+    headingLevel?: HeadingLevel;
 };
 /**
  * A complete authentication screen.
@@ -31,6 +44,6 @@ export type AuthPageProps = {
  * split from the large breakpoint up when one is. That keeps the docs preview
  * and a narrow screen on the same, readable path.
  */
-export declare function AuthPage({ form, aside, footer }: AuthPageProps): import("react").JSX.Element;
+export declare function AuthPage({ form, aside, footer, headingLevel }: AuthPageProps): import("react").JSX.Element;
 export default AuthPage;
 //# sourceMappingURL=index.d.ts.map

package/dist/pages/auth-page/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/auth-page/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAStD,MAAM,MAAM,aAAa,GAAG;IAC1B,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,2BAA2B;IAC3B,IAAI,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,CAAA;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,aAAa,+BA+B9D;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/auth-page/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAQtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAE/D,MAAM,MAAM,aAAa,GAAG;IAC1B,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,2BAA2B;IAC3B,IAAI,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,CAAA;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,YAAmB,EAAE,EAAE,aAAa,+BAqCnF;AAED,eAAe,QAAQ,CAAA"}

package/dist/pages/auth-page/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AuthForm01 } from '../../blocks/auth-form-01';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '../../components/ui/card';
+import { AuthForm01 } from '../../blocks/auth-form-01/index.js';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '../../components/ui/card.js';
 /**
  * A complete authentication screen.
  *
@@ -15,9 +15,13 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '../.
  * split from the large breakpoint up when one is. That keeps the docs preview
  * and a narrow screen on the same, readable path.
  */
-export function AuthPage({ form, aside, footer }) {
+export function AuthPage({ form, aside, footer, headingLevel = 'h2' }) {
+    // The form and the aside are sibling regions, so they announce themselves at the
+    // same depth: at different depths one would read as inside the other, and
+    // nothing in the layout says so.
+    const Title = headingLevel;
     return (_jsx("div", { className: "bg-background text-foreground flex min-h-svh w-full items-center justify-center px-6 py-16", children: _jsxs("div", { className: aside
                 ? 'grid w-full max-w-page items-center gap-10 lg:grid-cols-2'
-                : 'w-full max-w-measure-narrow', children: [aside ? (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: aside.title }), aside.description ? (_jsx(CardDescription, { children: aside.description })) : null] }), aside.children ? _jsx(CardContent, { children: aside.children }) : null] })) : null, _jsxs("div", { className: "mx-auto w-full max-w-measure-narrow", children: [_jsx(AuthForm01, { ...form }), footer ? (_jsx("div", { className: "text-muted-foreground mt-4 text-center text-sm", children: footer })) : null] })] }) }));
+                : 'w-full max-w-measure-narrow', children: [aside ? (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: _jsx(Title, { children: aside.title }) }), aside.description ? (_jsx(CardDescription, { children: aside.description })) : null] }), aside.children ? _jsx(CardContent, { children: aside.children }) : null] })) : null, _jsxs("div", { className: "mx-auto w-full max-w-measure-narrow", children: [_jsx(AuthForm01, { ...form, headingLevel: headingLevel }), footer ? (_jsx("div", { className: "text-muted-foreground mt-4 text-center text-sm", children: footer })) : null] })] }) }));
 }
 export default AuthPage;

package/dist/pages/blog-post-page/index.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge } from '../../components/ui/badge';
-import { CtaLink } from '../../components/ui/cta-link';
-import { Heading, Text } from '../../components/ui/typography';
-import { Prose } from '../../components/ui/prose';
-import { Section } from '../../components/ui/section';
+import { Badge } from '../../components/ui/badge.js';
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { Heading, Text } from '../../components/ui/typography.js';
+import { Prose } from '../../components/ui/prose.js';
+import { Section } from '../../components/ui/section.js';
 /**
  * A complete blog post screen: the title, the standfirst, the byline, the body at
  * the measure, and the trail to the neighbouring posts.

package/dist/pages/careers-page/index.d.ts

@@ -0,0 +1,288 @@
+import type { ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * One open role: what it is, which team it is in, where it is, how it is worked,
+ * and where it is applied for.
+ *
+ * `title`, `team` and `location` are required because they are the three
+ * questions a reader asks before deciding whether a job is worth reading about,
+ * and a row missing one of them is a title with a link rather than a role.
+ *
+ * `href` and `hrefLabel` are flat here and a union on the Block, and the seam is
+ * the same one the about page draws: a consumer's data model is flat, and the two
+ * arms are built once at the call site rather than at every record.
+ */
+export type CareersPageRole = {
+    /** A stable key for the role. */
+    id: string;
+    /** The role's own title, as it is written in the posting. */
+    title: string;
+    /** The team the role sits in. */
+    team: string;
+    /** Where the role is. */
+    location: string;
+    /** The working pattern, for a company that has more than one. */
+    pattern?: string;
+    /** A sentence or two about the work, for a page that has room for it. */
+    summary?: ReactNode;
+    /** When it was posted, already written the way a reader should see it. */
+    postedAt?: string;
+    /**
+     * Marks the role as no longer open.
+     *
+     * A state and not a removal: the row stays, it is dimmed, and the caller's
+     * `closedLabel` says what happened. A reader who was told a role existed and
+     * finds it gone learns nothing.
+     */
+    closed?: boolean;
+    /** Where the role goes. Its presence makes the row carry a link. */
+    href?: string;
+    /** The words on the link. Required whenever `href` is, and enforced below. */
+    hrefLabel?: string;
+};
+/**
+ * One thing the company holds itself to, as a value.
+ *
+ * The same shape as a principle and deliberately: a value and a principle are the
+ * same kind of object on a careers page, a short name and a sentence saying what
+ * it means in practice, and a page that drew them differently would be inventing a
+ * difference its data does not contain.
+ */
+export type CareersPageValue = {
+    /** A stable key for the tile. */
+    id: string;
+    /** The value's own name. */
+    title: string;
+    /** What holding to it means here, in practice. */
+    body: ReactNode;
+};
+/**
+ * One team the company hires into: what it is called, what it does, and
+ * optionally how many of its roles are open.
+ *
+ * `roles` is a number rather than a sentence and `rolesLabel` is the sentence, for
+ * the reason `Community01` gives for a member count: "1,204 members" and "204
+ * online" are not two formats of one fact, every language words them differently,
+ * and a bare numeral beside a team name tells a screen reader nothing about what
+ * it counts. The Page throws when a count arrives with no words for it.
+ */
+export type CareersPageTeam = {
+    /** A stable key for the row. */
+    id: string;
+    /** The team's own name, as the team spells it. */
+    name: string;
+    /** What the team works on, in a sentence. */
+    detail?: ReactNode;
+    /** How many of its roles are open. Omit it for a team with no count to publish. */
+    roles?: number;
+    /** The words for that count, given the number and the team. Required whenever `roles` is. */
+    rolesLabel?: (count: number, team: string) => string;
+};
+/**
+ * One thing a role comes with, as a benefit.
+ *
+ * A benefit is a promise made by whoever wrote it, and it is the caller's. The
+ * Page holds the tile and the measure and nothing else.
+ */
+export type CareersPageBenefit = {
+    /** A stable key for the tile. */
+    id: string;
+    /** The benefit's own name. */
+    title: string;
+    /** What the reader gets, and under what conditions. */
+    body: ReactNode;
+};
+/**
+ * The closing band: a heading, a supporting line, and one way on.
+ *
+ * A heading and a link rather than a form, for the reason the about page gives:
+ * a contact form's handler is a function, a function cannot cross from a server
+ * Component to a client Component, and a Page that carried one would have to be a
+ * client Component itself. A careers page's last job is to say where to send a
+ * CV, not to take one.
+ */
+export type CareersPageContact = {
+    /** The band's heading. */
+    title: ReactNode;
+    /** One or two sentences under the heading. */
+    description?: ReactNode;
+    /** Where the conversation goes. */
+    href: string;
+    /** The words on the link. */
+    hrefLabel: string;
+};
+/**
+ * One narrowing link above the roles: a label and a destination.
+ *
+ * A link and not a control, and the reason is that a filter is state. Narrowing a
+ * list to one team means deciding which roles are in it, so a control that does it
+ * holds state, and this Page is a server Component and holds none. A set of links
+ * under a query parameter narrows the list on a server render with no client code
+ * at all, which is the arrangement a product whose roles are published as data can
+ * use without making its careers route a client bundle.
+ */
+export type CareersPageOpening = {
+    /** The words on the link. */
+    label: string;
+    /** Where the narrowed list is. */
+    href: string;
+};
+/**
+ * The props a CareersPage takes.
+ *
+ * Every string, number and destination is a prop and the Page ships none of them.
+ * A careers page hardcodes the two sentences that decide whether anybody applies,
+ * and those two sentences are the ones a consumer can least afford to inherit from
+ * a component library.
+ */
+export type CareersPageProps = {
+    /** Optional label above the page's own heading. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /**
+     * The page's heading, and the reason the roles band is not optional.
+     *
+     * It is the page's `h1`, drawn by the roles band rather than by the Page, and
+     * that placement is `Careers01`'s own design: a page that lists roles without
+     * saying why it exists reads as a job board. See the Page's JSDoc.
+     */
+    title: ReactNode;
+    /**
+     * The standfirst: one or two sentences under the heading.
+     *
+     * A string rather than a node, and the boundary is `Careers01`'s own
+     * `description` slot, which is a string because the band holds it inside a
+     * `SectionHeading`. The cost is that a caller who needs a link or a mark in the
+     * standfirst composes their own opening band above this Page, and the answer
+     * they get instead of a node is a sentence they can put a link around by hand.
+     */
+    description?: string;
+    /**
+     * The roles, in the order a reader should meet them. Order is the caller's
+     * because it is a claim about which role leads.
+     */
+    roles: readonly CareersPageRole[];
+    /**
+     * The words for a role that is no longer open.
+     *
+     * Required whenever a role is closed, and the requirement is enforced rather
+     * than documented: `Careers01` throws when a closed row arrives with no words
+     * on it, because a dimmed row with no explanation is a row a reader cannot tell
+     * from a rendering fault.
+     */
+    closedLabel?: string;
+    /**
+     * The values, in the order a reader should meet them. Omit them and the band is
+     * not there.
+     */
+    values?: readonly CareersPageValue[];
+    /** The teams, in the order a reader should meet them. Omit them and the band is not there. */
+    teams?: readonly CareersPageTeam[];
+    /** The benefits, in the order a reader should meet them. Omit them and the band is not there. */
+    benefits?: readonly CareersPageBenefit[];
+    /**
+     * The caller's own narrowing links, drawn above the roles.
+     *
+     * Links rather than controls, for the reason `CareersPageOpening` gives: a
+     * filter is state and a link is not. They go in the roles band's own filter
+     * slot, which is the seam `Careers01` draws for exactly this.
+     */
+    openings?: readonly CareersPageOpening[];
+    /** The accessible name of the narrowing row. Required whenever `openings` is, and enforced below. */
+    openingsLabel?: string;
+    /** The closing band. Omit it and the page ends on the last band that was given. */
+    contact?: CareersPageContact;
+    /**
+     * What the roles band shows instead of the rows when there are none.
+     *
+     * Required, and it is the whole of the argument this Page is a Page and not a
+     * `Careers01`. See the Page's JSDoc.
+     */
+    empty: ReactNode;
+    /**
+     * The heading level for the page's own heading, and one step below it for the
+     * Page's own bands.
+     *
+     * Defaults to `h1`, because a page owns the top of the document outline. A
+     * consumer embedding the page under a heading it already owns passes one level
+     * deeper and the outline follows.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Layout only, exactly as on every Component. Changing a Prism-owned visual
+     * property from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * A complete careers screen: who the company is, what it is hiring for, what it
+ * believes, who you would work with, what you would get, and where to send
+ * something.
+ *
+ * **The decision that makes this a Page rather than a `Careers01` is the empty
+ * state, and the Page makes it by refusing to branch on it.** A careers page with
+ * no open roles is one of the two states a careers page is always in, and it is
+ * the one a list is worst at: a list that renders nothing has told a reader
+ * nothing at all, and a route that 404s on the week a company closes its last
+ * vacancy is a route that fails exactly when somebody is most likely to be
+ * checking. So the roles band is not conditional here. It is always rendered, and
+ * it is always given `empty`, so it draws the caller's own sentence in place of the
+ * rows and the rest of the screen is unchanged around it. A consumer reading this
+ * page in a week with no vacancies still learns what the company is, what it
+ * believes, who they would work with and where to send a CV, which is the only
+ * thing a careers page is for. The rejected alternative was a `roles.length > 0`
+ * branch around the band, and it is the exact failure `ContentGrid01` and
+ * `Community01` each refuse in their own way: a section that is not there is a
+ * section a reader cannot tell from a section that failed to load.
+ *
+ * **The page heading is the roles band's own heading, and that is `Careers01`'s
+ * design rather than this Page's.** The band requires a title precisely because a
+ * page that lists roles without saying why it exists reads as a job board, so the
+ * page's `h1` is the one that does the saying and the Page draws no heading of its
+ * own above it. A Page that drew its own title and then handed the band a second
+ * one would say the same words twice within one screen, and the duplicate is the
+ * kind of thing no gate finds and every reader sees.
+ *
+ * **The order after the roles band is the order a reader asks the rest of it in.**
+ * Values, then teams, then benefits, then the way on. "What do you believe" comes
+ * before "who would I work with" because a team is a group of people a reader has
+ * to have a reason to care about, and it comes before the benefits because a
+ * benefit is a promise that needs the belief behind it to be worth reading. The
+ * cost is that a consumer who hires into one team only would want that band first,
+ * and the answer is the one the about page gives: the bands after the roles are
+ * each optional, and a consumer who wants a different order composes the screen
+ * from `ContentGrid01` itself.
+ *
+ * **The values, the teams and the benefits are the same Block three times, and
+ * that is a decision rather than a shortage.** Each is a set of titled things with
+ * a sentence under it and nothing else: no date, no figure, no status. A Page
+ * that drew them three different ways would be inventing differences its data does
+ * not contain, and the only difference between them here is the arrangement, which
+ * is what the `rows` form is for: a team is a set a reader compares, and a value
+ * and a benefit are sets a reader chooses from. The cost is that three consecutive
+ * bands share a frame, and the answer is that a consumer with a band of its own
+ * composes it in place of the one that is not doing the job.
+ *
+ * **The Page takes one function prop and it never crosses a boundary.** `rolesLabel`
+ * is a function because a count is a number and the words for it are a sentence
+ * the consumer writes in its own language, and because no two languages word a
+ * count the same way. It is called here, during this render, and what is handed
+ * down is the string it returned: a server Component may hold a function and call
+ * it, and what it may not do is pass one to a client Component, which is why
+ * nothing on this page receives a callback. Every one of the composed Blocks is a
+ * server Component, so the screen costs a consumer no client JavaScript at all.
+ *
+ * **The two checks that run before anything is drawn are the ones that would
+ * otherwise be invisible in a screenshot.** A role with an `href` and no
+ * `hrefLabel` renders a link announced by its address, and a narrowing row with no
+ * accessible name is a landmark announced as nothing, which is the state a screen
+ * reader user is least able to recover from. The Page throws on both, naming its
+ * own props, and the cost of throwing is that a JavaScript caller with a data file
+ * that has drifted finds out at render rather than in review.
+ *
+ * It is a server Component. It fetches nothing, it holds no state and it imports
+ * no router, so a consumer renders it from whichever route their framework names
+ * for the careers page and hands it the roles their own system published.
+ */
+export declare function CareersPage({ eyebrow, title, description, roles, closedLabel, values, teams, benefits, openings, openingsLabel, contact, empty, headingLevel, className, }: CareersPageProps): import("react").JSX.Element;
+export default CareersPage;
+//# sourceMappingURL=index.d.ts.map

package/dist/pages/careers-page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/careers-page/index.tsx"],"names":[],"mappings":"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"}