@fairgarden/design 0.1.0-alpha.0

package/components/SpecList/SpecList.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export declare const specList: (props?: ({
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SpecListVariants = VariantProps<typeof specList>;
+/** Props for SpecList: `dl` props and the color axes. */
+export type SpecListProps = React.ComponentPropsWithRef<'dl'> & {
+    /**
+     * Primary Radix scale: labels, leaders and values. Never defaulted;
+     * omitted, it inherits the scope [D133].
+     */
+    primary?: SpecListVariants['primary'];
+    /** Secondary Radix scale: unused. Never defaulted. */
+    secondary?: SpecListVariants['secondary'];
+};
+/** The leader list. Put `SpecListItem`s inside; on a saturated ground keep it to 6 pairs. */
+export declare function SpecList(props: SpecListProps): React.JSX.Element;
+/** Props for SpecListItem: `div` props and the label. */
+export type SpecListItemProps = React.ComponentPropsWithRef<'div'> & {
+    /** The caps label (`type-label`); author it in sentence case. */
+    label: React.ReactNode;
+};
+/**
+ * One pair: "Label ········ Value". The leader stops `--size-px-2` short of
+ * each text and sits on the label's last baseline; a long value wraps and
+ * stays right-aligned. A label never splits from its value in print.
+ */
+export declare function SpecListItem(props: SpecListItemProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=SpecList.d.ts.map

package/components/SpecList/SpecList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpecList.d.ts","sourceRoot":"","sources":["../../src/components/SpecList/SpecList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA0BjE,eAAO,MAAM,QAAQ;;;8EAMnB,CAAA;AAEF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAErD,yDAAyD;AACzD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,qBAAqB,CAAC,IAAI,CAAC,GAAG;IAC9D;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,sDAAsD;IACtD,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;CAC1C,CAAA;AAED,6FAA6F;AAC7F,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAI5C;AAED,yDAAyD;AACzD,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAAG;IACnE,iEAAiE;IACjE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAQpD"}

package/components/SpecList/SpecList.js

@@ -0,0 +1,51 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './spec-list.module.css';
+/*
+ * Leader list (§8.3; the §12.7 leader sheet): label, a dotted leader, then
+ * the value right-aligned in tabular figures. Prices, dimensions,
+ * printable forms.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: spec-list.module.css; CVA function `specList`.
+ * - Axes: `primary`, `secondary` → scales module classes.
+ * - Compound variants: none.
+ * - Defaults: color axes none [D133].
+ * - Color fallback: inherits the scope. Secondary drives nothing here.
+ * - States: static.
+ * - Parts: base (`dl`, the container), item, label, leader (the item's
+ *   `::before`, a `line-dotted-fine` run in --role-rule drawn as an SVG
+ *   mask), value.
+ * - Scope: none.
+ * - Container: `base` is an inline-size container; below 320 px of it the
+ *   leader drops and the label stacks over the value. Baseline without
+ *   support: the leader stays and wraps safely.
+ */
+export const specList = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/** The leader list. Put `SpecListItem`s inside; on a saturated ground keep it to 6 pairs. */
+export function SpecList(props) {
+    const { primary, secondary, className, ...rest } = props;
+    const scope = useScopeAttributes();
+    return React.createElement("dl", { ...rest, ...scope, className: specList({ primary, secondary, className }) });
+}
+/**
+ * One pair: "Label ········ Value". The leader stops `--size-px-2` short of
+ * each text and sits on the label's last baseline; a long value wraps and
+ * stays right-aligned. A label never splits from its value in print.
+ */
+export function SpecListItem(props) {
+    const { label, className, children, ...rest } = props;
+    return (React.createElement("div", { ...rest, className: className ? `${styles.item} ${className}` : styles.item },
+        React.createElement("dt", { className: styles.label }, label),
+        React.createElement("dd", { className: styles.value }, children)));
+}
+//# sourceMappingURL=SpecList.js.map

package/components/SpecList/SpecList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpecList.js","sourceRoot":"","sources":["../../src/components/SpecList/SpecList.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACvC,QAAQ,EAAE;QACR,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;CACF,CAAC,CAAA;AAeF,6FAA6F;AAC7F,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACxD,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,OAAO,+BAAQ,IAAI,KAAM,KAAK,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,GAAI,CAAA;AAC5F,CAAC;AAQD;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACrD,OAAO,CACL,gCAAS,IAAI,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI;QAC/E,4BAAI,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAM;QACzC,4BAAI,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,QAAQ,CAAM,CACxC,CACP,CAAA;AACH,CAAC"}

package/components/SpecList/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SpecList';
+//# sourceMappingURL=index.d.ts.map

package/components/SpecList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/SpecList/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/components/SpecList/index.js

@@ -0,0 +1,2 @@
+export * from './SpecList';
+//# sourceMappingURL=index.js.map

package/components/SpecList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/SpecList/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/components/SpecList/spec-list.module.css

@@ -0,0 +1,95 @@
+/*
+ * Leader list (§8.3; §12.7). CVA function `specList`. Color roles (§12.7):
+ * label --role-muted, leader line-dotted-fine in --role-rule, value
+ * --primary12. The leader is the item's `::before`, a flex item between
+ * label and value: an SVG mask cuts a 1 px solid border into true round
+ * dots at a 3 px pitch [D36, D68], never a dotted border style or a
+ * gradient. Being a border it prints as foreground, at 0.75 pt dots on a
+ * 2.25 pt pitch, and takes the system ink in forced colors.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.label {
+  composes: typeLabel typeMuted from '../../utils/type.module.css';
+}
+
+.value {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    container-type: inline-size;
+    /* Size containment leaves no intrinsic width: fill the box, never collapse as a flex or shrink-to-fit item. */
+    inline-size: 100%;
+    display: grid;
+    row-gap: var(--size-px-2);
+    margin: 0;
+    min-inline-size: 0;
+  }
+
+  /* Label, leader, value on the label's last baseline; the leader stops --size-px-2 short of each. */
+  .item {
+    display: flex;
+    align-items: last baseline;
+    column-gap: var(--size-px-2);
+    min-inline-size: 0;
+  }
+
+  .label {
+    flex: 0 1 auto;
+    min-inline-size: 0;
+    margin: 0;
+  }
+
+  .item::before {
+    content: '';
+    order: 1;
+    flex: 1 0 var(--size-px-5);
+    align-self: last baseline;
+    block-size: 0;
+    border-block-end: var(--ds-dot-fine) solid var(--role-rule);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 1'%3E%3Ccircle cx='1.5' cy='0.5' r='0.5'/%3E%3C/svg%3E");
+    mask-size: var(--ds-dot-fine-pitch) var(--ds-dot-fine);
+    mask-repeat: round no-repeat;
+    mask-origin: border-box;
+  }
+
+  /* The value: right-aligned lining tabular figures; a wrapped value stays right-aligned. */
+  .value {
+    order: 2;
+    flex: 0 1 auto;
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--primary12);
+    font-variant-numeric: var(--ds-numerals-data);
+    text-align: end;
+  }
+
+  /* Below 320 px of the list: the leader drops and the label stacks over the value (§8.3). */
+  @container (width < 320px) {
+    .item {
+      flex-direction: column;
+      align-items: flex-start;
+      row-gap: var(--size-px-1);
+    }
+
+    .item::before {
+      display: none;
+    }
+
+    .value {
+      text-align: start;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    .item {
+      break-inside: avoid;
+    }
+  }
+}

package/components/SpecSheet/SpecSheet.d.ts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export { SpecGridItem, type SpecGridItemProps } from '../SpecGrid';
+export { SpecListItem, type SpecListItemProps } from '../SpecList';
+export declare const specSheet: (props?: ({
+    kind?: "manual" | "glance" | "leader" | "form-box" | null | undefined;
+    split?: boolean | null | undefined;
+    figured?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SpecSheetVariants = Omit<VariantProps<typeof specSheet>, 'figured'>;
+/** The reference-page identity block [D188]: portrait, common name and secondary name. */
+export interface SpecSheetIdentity {
+    /** A §10.12 Avatar at one of its fixed steps (e.g. `size="xl"`, 128 px). */
+    portrait?: React.ReactNode;
+    /** The common name, `type-itemhead` in `--primary12`. */
+    commonName: React.ReactNode;
+    /** The secondary (scientific) name, `type-secondary-name` in italic. */
+    secondaryName?: React.ReactNode;
+}
+/** The optional "More Details" disclosure (§10.13). */
+export interface SpecSheetMore {
+    /** The trigger label, title case: "More Details" [D160]. */
+    label: React.ReactNode;
+    /** The label while open, e.g. "Fewer Details". Omitted, `label` stays. */
+    openLabel?: React.ReactNode;
+    /** The further spec rows (SpecGridItems, or SpecListItems in a leader sheet). */
+    children: React.ReactNode;
+}
+type HeadingLevel = 2 | 3 | 4;
+interface SpecSheetCommonProps extends Omit<React.ComponentPropsWithRef<'section'>, 'children'> {
+    /**
+     * The section head: the chapter-stack H2 ("At a Glance") in `type-h2`
+     * and `--role-heading`; `headingLevel` 3 or 4 sets it as a module head
+     * in `type-itemhead` and `--primary12`.
+     */
+    heading?: React.ReactNode;
+    /** The heading level. Default `2`. */
+    headingLevel?: HeadingLevel;
+    /** Reference pages: the identity block above the sheet, heading the reading column [D188]. */
+    identity?: SpecSheetIdentity;
+    /** The lead, `type-lead` (§3.5 Recipe C). Beside the grid with `split`. */
+    lead?: React.ReactNode;
+    /**
+     * The provenance line, `type-small`: "Text adapted from *Lives of North
+     * American Birds*". Set book titles in `<cite>`; a linked title takes the
+     * body link's underline.
+     */
+    provenance?: React.ReactNode;
+    /** An optional figure (a §8.5 Figure). From 1024 px of the sheet it sits beside the grid (5 / 7). */
+    figure?: React.ReactNode;
+    /** Accessible name for the grid when no `heading` labels it. */
+    label?: string;
+    /** The "More Details" disclosure for long sheets; it prints expanded. */
+    more?: SpecSheetMore;
+    /**
+     * Primary Radix scale: rules, labels, values, frames and focus rings.
+     * Never defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: SpecSheetVariants['primary'];
+    /** Secondary Radix scale: only a linked provenance title's underline. Never defaulted. */
+    secondary?: SpecSheetVariants['secondary'];
+}
+interface SpecSheetGlanceProps extends SpecSheetCommonProps {
+    /**
+     * `glance` (default): the rule-topped At a Glance grid (SpecGrid; pass
+     * `SpecGridItem`s). `leader`: one column of "Label ···· Value" rows
+     * (SpecList; pass `SpecListItem`s). `manual`: a `line-double` frame for a
+     * full-page item (title, figure, numbered list, price, allergen matrix).
+     * `form-box`: a ruled box around the grid.
+     */
+    kind?: 'glance';
+    /**
+     * The At a Glance split, on reference pages [D188]: from `--lg-n-above`
+     * the lead and provenance take the first half of the reading span and the
+     * grid the second, staying 2-up; below, the lead stacks above the grid.
+     * Default `false`.
+     */
+    split?: boolean;
+    /** The spec cells: `SpecGridItem`s. */
+    children: React.ReactNode;
+}
+interface SpecSheetLeaderProps extends SpecSheetCommonProps {
+    kind: 'leader';
+    split?: never;
+    /** The rows: `SpecListItem`s. */
+    children: React.ReactNode;
+}
+interface SpecSheetManualProps extends SpecSheetCommonProps {
+    kind: 'manual';
+    split?: never;
+    /** The manual page's content: a title, a Figure, an `ol`, a price, a SpecList or a table. */
+    children: React.ReactNode;
+}
+interface SpecSheetFormBoxProps extends SpecSheetCommonProps {
+    kind: 'form-box';
+    split?: never;
+    /** The cells: `SpecGridItem`s, each a small caps label at the top left over its value. */
+    children: React.ReactNode;
+}
+/**
+ * Props for SpecSheet: `section` props, the kind and split, the sheet's
+ * parts and the color axes. `split` is accepted only with `kind="glance"`.
+ */
+export type SpecSheetProps = SpecSheetGlanceProps | SpecSheetLeaderProps | SpecSheetManualProps | SpecSheetFormBoxProps;
+/**
+ * A spec sheet. It prints as on screen, stacked, with black 0.75 pt rules
+ * and leaders; cells never split across pages.
+ */
+export declare function SpecSheet(props: SpecSheetProps): React.JSX.Element;
+//# sourceMappingURL=SpecSheet.d.ts.map

package/components/SpecSheet/SpecSheet.d.ts.map

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

package/components/SpecSheet/SpecSheet.js

@@ -0,0 +1,128 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from '../Collapsible';
+import { SpecGrid } from '../SpecGrid';
+import { SpecList } from '../SpecList';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './spec-sheet.module.css';
+export { SpecGridItem } from '../SpecGrid';
+export { SpecListItem } from '../SpecList';
+/*
+ * Spec Sheet (§12.7): an item's measurable attributes, the densest module,
+ * with no ornament. Composed from a `section`, the §8.3 spec grid (SpecGrid)
+ * or leader list (SpecList), an optional `figure`, an optional provenance
+ * line and a Collapsible for "More Details". On reference pages the
+ * identity block heads the reading column [D188].
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: spec-sheet.module.css; CVA function `specSheet`.
+ * - Axes: `kind` → glance | leader | manual | form-box → `glance`,
+ *   `kindLeader` (axis-prefixed: `leader` is also a part), `manual`,
+ *   `formBox`; `split` → `split` (glance only: the At a Glance split, lead
+ *   beside the grid from --lg-n-above [D188]; excluded in the types for the
+ *   other kinds); `primary`, `secondary` → scales module classes.
+ * - Compound variants: none.
+ * - Defaults: kind glance, split false; color axes: none [D133].
+ * - Color fallback: inherits the scope. Secondary drives nothing in the
+ *   sheet (no accents, P6); only a linked provenance title takes the
+ *   --role-accent underline.
+ * - States: static. The estimated cell (SpecGridItem `estimated`) is a data
+ *   flag drawn by SpecGrid. The Collapsible's `data-panel-open` (Trigger)
+ *   and `data-open` (Panel) follow §10.13 in its own module; `:hover` and
+ *   `:focus-visible` on the provenance link follow the body link (§9.3).
+ * - Parts: base (with `figured` while it holds a figure), identity
+ *   (portrait, names, commonName, secondaryName), heading (moduleHeading
+ *   at levels 3 and 4), intro, lead, provenance, body, sheet, grid (the
+ *   SpecGrid or SpecList: cell, rule, icon, label, value and leader are
+ *   theirs), frame and frameContent (manual), figure, more (Collapsible
+ *   Root), moreTrigger, morePanel.
+ * - Scope: none.
+ * - Container: `base` is the inline-size container named `spec-grid`; the
+ *   figure layout queries it (sheet beside its figure, 5 / 7, from 1024 px;
+ *   viewport fallback --lg-n-above). The grid is its own `spec-grid`
+ *   container (SpecGrid), so with `split` its ≈ 350–450 px half keeps it
+ *   2-up by the §8.3 thresholds. The split itself is a page-grid placement
+ *   on viewport media (--lg-n-above); its baseline is the lead stacked above
+ *   the grid [D163, D188].
+ *
+ * Audubon's sticky scroll-spy rail and its sticky aside cards are rejected
+ * [D188]: nothing in the sheet is sticky, and the identity block heads the
+ * reading column in the flow.
+ */
+export const specSheet = cva(styles.base, {
+    variants: {
+        kind: {
+            glance: styles.glance,
+            leader: styles.kindLeader,
+            manual: styles.manual,
+            'form-box': styles.formBox,
+        },
+        split: {
+            true: styles.split,
+        },
+        // Computed from `figure`, never a prop: the sheet may sit beside it.
+        figured: {
+            true: styles.figured,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'glance',
+        split: false,
+    },
+});
+const headingTags = { 2: 'h2', 3: 'h3', 4: 'h4' };
+/**
+ * A spec sheet. It prints as on screen, stacked, with black 0.75 pt rules
+ * and leaders; cells never split across pages.
+ */
+export function SpecSheet(props) {
+    const { kind, split, heading, headingLevel = 2, identity, lead, provenance, figure, label, more, primary, secondary, className, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const headingId = React.useId();
+    const resolvedKind = kind ?? 'glance';
+    const HeadingTag = headingTags[headingLevel];
+    const isSplit = resolvedKind === 'glance' && split === true;
+    const renderRows = (rows, extraLabel) => {
+        if (resolvedKind === 'leader') {
+            return (React.createElement(SpecList, { className: styles.grid, "aria-label": extraLabel }, rows));
+        }
+        if (resolvedKind === 'manual') {
+            return React.createElement("div", { className: styles.frameContent }, rows);
+        }
+        return (React.createElement(SpecGrid, { className: styles.grid, label: extraLabel }, rows));
+    };
+    const gridLabel = heading == null ? label : undefined;
+    const intro = lead != null || provenance != null ? (React.createElement("div", { className: styles.intro },
+        lead != null ? React.createElement("div", { className: styles.lead }, lead) : null,
+        provenance != null ? React.createElement("p", { className: styles.provenance }, provenance) : null)) : null;
+    const rows = renderRows(children, gridLabel);
+    const main = resolvedKind === 'manual' ? React.createElement("div", { className: styles.frame }, rows) : rows;
+    return (React.createElement("section", { ...rest, ...scope, "aria-labelledby": heading != null ? headingId : rest['aria-labelledby'], className: specSheet({
+            kind: resolvedKind,
+            split: isSplit,
+            figured: figure != null,
+            primary,
+            secondary,
+            className,
+        }) },
+        identity ? (React.createElement("div", { className: styles.identity },
+            identity.portrait != null ? (React.createElement("div", { className: styles.portrait }, identity.portrait)) : null,
+            React.createElement("div", { className: styles.names },
+                React.createElement("p", { className: styles.commonName }, identity.commonName),
+                identity.secondaryName != null ? (React.createElement("p", { className: styles.secondaryName }, identity.secondaryName)) : null))) : null,
+        heading != null ? (React.createElement(HeadingTag, { id: headingId, className: headingLevel === 2 ? styles.heading : styles.moduleHeading }, heading)) : null,
+        React.createElement("div", { className: styles.body },
+            intro,
+            React.createElement("div", { className: styles.sheet },
+                main,
+                more ? (React.createElement(Collapsible, { className: styles.more },
+                    React.createElement(CollapsibleTrigger, { className: styles.moreTrigger, openLabel: more.openLabel }, more.label),
+                    React.createElement(CollapsiblePanel, { className: styles.morePanel }, renderRows(more.children)))) : null),
+            figure != null ? React.createElement("div", { className: styles.figure }, figure) : null)));
+}
+//# sourceMappingURL=SpecSheet.js.map

package/components/SpecSheet/SpecSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpecSheet.js","sourceRoot":"","sources":["../../src/components/SpecSheet/SpecSheet.tsx"],"names":[],"mappings":"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"}

package/components/SpecSheet/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SpecSheet';
+//# sourceMappingURL=index.d.ts.map

package/components/SpecSheet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/SpecSheet/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/components/SpecSheet/index.js

@@ -0,0 +1,2 @@
+export * from './SpecSheet';
+//# sourceMappingURL=index.js.map

package/components/SpecSheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/SpecSheet/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}