@nanisoft/prism-ui 0.13.0 → 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/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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"}

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

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Careers01 } from '../../blocks/careers-01/index.js';
+import { ContentGrid01 } from '../../blocks/content-grid-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 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 function CareersPage({ eyebrow, title, description, roles, closedLabel, values, teams, benefits, openings, openingsLabel, contact, empty, headingLevel = 'h1', className, }) {
+    assertLabels(roles, teams);
+    const narrowing = asNarrowing(openings, openingsLabel);
+    return (_jsxs("div", { "data-slot": "careers-page", className: cn(className), children: [_jsx(Careers01, { eyebrow: eyebrow, title: title, description: description, roles: roles.map(asRole), filters: narrowing, empty: empty, closedLabel: closedLabel, headingLevel: headingLevel }), values === undefined || values.length === 0 ? null : (_jsx(ContentGrid01, { entries: values.map((value) => ({ id: value.id, title: value.title, summary: value.body })), headingLevel: headingLevel })), teams === undefined || teams.length === 0 ? null : (_jsx(ContentGrid01, { variant: "rows", entries: teams.map((team) => ({
+                    id: team.id,
+                    title: team.name,
+                    summary: teamSummary(team),
+                })), headingLevel: headingLevel })), benefits === undefined || benefits.length === 0 ? null : (_jsx(ContentGrid01, { entries: benefits.map((benefit) => ({
+                    id: benefit.id,
+                    title: benefit.title,
+                    summary: benefit.body,
+                })), headingLevel: headingLevel })), contact === undefined ? null : (_jsxs(Section, { "data-slot": "careers-page-contact", children: [_jsx(SectionHeading, { as: childLevel(headingLevel), align: "left", title: contact.title, description: contact.description, className: "mb-8" }), _jsx(CtaLink, { href: contact.href, children: contact.hrefLabel })] }))] }));
+}
+/**
+ * The narrowing row, or nothing at all.
+ *
+ * A `nav` rather than a list of links on their own, because a row of links that
+ * filters a list is a landmark: a screen reader user who lands on the page and
+ * jumps to navigation expects to be told what the region is. The accessible name
+ * is the caller's, and the check in the same function is why that name is owed
+ * rather than optional: a `nav` with no name is announced as "navigation", which
+ * on a page with a site header above it is two regions called the same thing and
+ * nothing to tell them apart.
+ */
+function asNarrowing(openings, openingsLabel) {
+    if (openings === undefined || openings.length === 0)
+        return null;
+    if (openingsLabel === undefined || openingsLabel.trim() === '') {
+        throw new Error('CareersPage: openings were passed with no openingsLabel, so the row would be a navigation landmark announced ' +
+            'as nothing in particular, which is the one region on a page a screen reader user cannot then identify. Pass ' +
+            'the words that say what the row narrows, or drop the openings.');
+    }
+    return (_jsx("nav", { "aria-label": openingsLabel, className: "flex flex-wrap items-center gap-3", children: openings.map((opening) => (_jsx(CtaLink, { href: opening.href, variant: "outline", size: "sm", children: opening.label }, opening.href))) }));
+}
+/**
+ * One team as a row draws it, with the count under the detail rather than beside
+ * the name.
+ *
+ * A count is a reading and not a name, so it belongs in the row's body where the
+ * detail is and not in the row's heading where a reader scanning names would meet
+ * a number with no noun beside it. The span is given `block` and nothing else, so
+ * the count is a second line at the summary's own size rather than a smaller
+ * annotation this Page invented a size for.
+ */
+function teamSummary(team) {
+    const counted = team.roles === undefined ? null : (team.rolesLabel?.(team.roles, team.name) ?? null);
+    if (team.detail === undefined)
+        return counted;
+    if (counted === null)
+        return team.detail;
+    return (_jsxs(_Fragment, { children: [team.detail, _jsx("span", { className: "block", children: counted })] }));
+}
+/**
+ * One role as the list draws it, with the two link arms kept apart.
+ *
+ * The same seam the about page draws at its engagements: a consumer's role record
+ * is flat, and the pair is built once here rather than narrowed at every record.
+ * The `hrefLabel` fallback is unreachable, because the check above throws first,
+ * and it is written as an empty string rather than as an assertion so a future
+ * change in the order would render an unnamed link rather than lie to the
+ * compiler.
+ */
+function asRole(role) {
+    const shared = {
+        id: role.id,
+        title: role.title,
+        team: role.team,
+        location: role.location,
+        pattern: role.pattern,
+        summary: role.summary,
+        postedAt: role.postedAt,
+        closed: role.closed,
+    };
+    return role.href === undefined
+        ? shared
+        : { ...shared, href: role.href, hrefLabel: role.hrefLabel ?? '' };
+}
+/**
+ * The two checks the Page owes its own reader before anything is drawn, run once
+ * here so the messages name the Page's own props.
+ *
+ * A role with an `href` and no `hrefLabel` renders a link announced by its address,
+ * and a team with a `roles` count and no `rolesLabel` renders a bare numeral beside
+ * a name, which tells a screen reader nothing about what it counts. `Careers01`
+ * throws for the first of those on its own account and `ContentGrid01` cannot see
+ * the second at all, so the second exists here. The cost of throwing rather than
+ * degrading is that a caller with a data file that has drifted finds out at render
+ * instead of in review, which is the trade every refusal in this package makes.
+ */
+function assertLabels(roles, teams) {
+    for (const role of roles) {
+        if (role.href !== undefined && (role.hrefLabel === undefined || role.hrefLabel.trim() === '')) {
+            throw new Error('CareersPage: a role declares an href and no hrefLabel, so the row 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 ' +
+                'what following the link does, or drop the href.');
+        }
+    }
+    for (const team of teams ?? []) {
+        if (team.roles !== undefined && (team.rolesLabel === undefined || team.rolesLabel === null)) {
+            throw new Error('CareersPage: a team declares a roles count and no rolesLabel, so the reading would be a bare numeral ' +
+                'beside a team name, which tells a screen reader nothing about what it counts and a sighted reader only ' +
+                'that somebody counted. Pass the words for the count in your own language, or drop the count.');
+        }
+    }
+}
+export default CareersPage;