@mitcsutt/kiln-ui 0.1.0

package/dist/components/typography/Heading/Heading.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.module.js","names":["heading","Heading_module_default"],"sources":["../../../../src/components/typography/Heading/Heading.module.css"],"sourcesContent":["/*\n * Two typographic roles, chosen by size:\n *   display (display-lg/md/sm) — --font-display, --display-*, --leading-tight, opsz\n *   heading (3xl … sm)         — --heading-font/-weight/-tracking/-transform, --leading-snug\n *\n * Responsive size: the component writes --heading-size-{base..xl} (see Stack for the\n * pattern) and data-role-{sm..xl}; a scalar size needs neither and resolves from\n * data-size alone.\n *\n * Component tokens:\n *   --heading-display-leading   default var(--leading-tight)\n *   --heading-leading           default var(--leading-snug)\n */\n.heading {\n  --_ink: var(--color-ink);\n  --_fs: var(--heading-size-base, var(--_size));\n\n  margin: 0;\n  font-family: var(--_ff);\n  font-size: var(--_fs);\n  font-weight: var(--_fw);\n  font-style: var(--_fst);\n  font-stretch: var(--_fstr);\n  font-variation-settings: var(--_fvs);\n  letter-spacing: var(--_ls);\n  text-transform: var(--_tt);\n  line-height: var(--_lh);\n  color: var(--_ink);\n  text-wrap: balance;\n  overflow-wrap: break-word;\n  font-kerning: normal;\n}\n\n.heading[data-balance='false'] {\n  text-wrap: pretty;\n}\n\n/* Sizes → a token on the type scale */\n.heading[data-size='display-lg'] {\n  --_size: var(--text-display-lg);\n}\n.heading[data-size='display-md'] {\n  --_size: var(--text-display-md);\n}\n.heading[data-size='display-sm'] {\n  --_size: var(--text-display-sm);\n}\n.heading[data-size='3xl'] {\n  --_size: var(--text-3xl);\n}\n.heading[data-size='2xl'] {\n  --_size: var(--text-2xl);\n}\n.heading[data-size='xl'] {\n  --_size: var(--text-xl);\n}\n.heading[data-size='lg'] {\n  --_size: var(--text-lg);\n}\n.heading[data-size='md'] {\n  --_size: var(--text-md);\n}\n.heading[data-size='sm'] {\n  --_size: var(--text-sm);\n}\n\n/* Roles */\n.heading[data-role='display'] {\n  --_ff: var(--font-display);\n  --_fw: var(--display-weight);\n  --_fst: var(--display-style);\n  --_fstr: var(--display-stretch);\n  --_fvs: 'opsz' var(--display-opsz);\n  --_ls: var(--display-tracking);\n  --_tt: var(--display-transform);\n  --_lh: var(--heading-display-leading, var(--leading-tight));\n}\n.heading[data-role='heading'] {\n  --_ff: var(--heading-font);\n  --_fw: var(--heading-weight);\n  --_fst: normal;\n  --_fstr: normal;\n  --_fvs: normal;\n  --_ls: var(--heading-tracking);\n  --_tt: var(--heading-transform);\n  --_lh: var(--heading-leading, var(--leading-snug));\n}\n\n/* Tones */\n.heading[data-tone='muted'] {\n  --_ink: var(--color-ink-muted);\n}\n.heading[data-tone='accent'] {\n  --_ink: var(--color-accent-text);\n}\n\n/* Responsive: size var per breakpoint, role attribute per breakpoint */\n@media (min-width: 40em) {\n  .heading {\n    --_fs: var(--heading-size-sm, var(--_size));\n  }\n  .heading[data-role-sm='display'] {\n    --_ff: var(--font-display);\n    --_fw: var(--display-weight);\n    --_fst: var(--display-style);\n    --_fstr: var(--display-stretch);\n    --_fvs: 'opsz' var(--display-opsz);\n    --_ls: var(--display-tracking);\n    --_tt: var(--display-transform);\n    --_lh: var(--heading-display-leading, var(--leading-tight));\n  }\n  .heading[data-role-sm='heading'] {\n    --_ff: var(--heading-font);\n    --_fw: var(--heading-weight);\n    --_fst: normal;\n    --_fstr: normal;\n    --_fvs: normal;\n    --_ls: var(--heading-tracking);\n    --_tt: var(--heading-transform);\n    --_lh: var(--heading-leading, var(--leading-snug));\n  }\n}\n@media (min-width: 48em) {\n  .heading {\n    --_fs: var(--heading-size-md, var(--_size));\n  }\n  .heading[data-role-md='display'] {\n    --_ff: var(--font-display);\n    --_fw: var(--display-weight);\n    --_fst: var(--display-style);\n    --_fstr: var(--display-stretch);\n    --_fvs: 'opsz' var(--display-opsz);\n    --_ls: var(--display-tracking);\n    --_tt: var(--display-transform);\n    --_lh: var(--heading-display-leading, var(--leading-tight));\n  }\n  .heading[data-role-md='heading'] {\n    --_ff: var(--heading-font);\n    --_fw: var(--heading-weight);\n    --_fst: normal;\n    --_fstr: normal;\n    --_fvs: normal;\n    --_ls: var(--heading-tracking);\n    --_tt: var(--heading-transform);\n    --_lh: var(--heading-leading, var(--leading-snug));\n  }\n}\n@media (min-width: 64em) {\n  .heading {\n    --_fs: var(--heading-size-lg, var(--_size));\n  }\n  .heading[data-role-lg='display'] {\n    --_ff: var(--font-display);\n    --_fw: var(--display-weight);\n    --_fst: var(--display-style);\n    --_fstr: var(--display-stretch);\n    --_fvs: 'opsz' var(--display-opsz);\n    --_ls: var(--display-tracking);\n    --_tt: var(--display-transform);\n    --_lh: var(--heading-display-leading, var(--leading-tight));\n  }\n  .heading[data-role-lg='heading'] {\n    --_ff: var(--heading-font);\n    --_fw: var(--heading-weight);\n    --_fst: normal;\n    --_fstr: normal;\n    --_fvs: normal;\n    --_ls: var(--heading-tracking);\n    --_tt: var(--heading-transform);\n    --_lh: var(--heading-leading, var(--leading-snug));\n  }\n}\n@media (min-width: 80em) {\n  .heading {\n    --_fs: var(--heading-size-xl, var(--_size));\n  }\n  .heading[data-role-xl='display'] {\n    --_ff: var(--font-display);\n    --_fw: var(--display-weight);\n    --_fst: var(--display-style);\n    --_fstr: var(--display-stretch);\n    --_fvs: 'opsz' var(--display-opsz);\n    --_ls: var(--display-tracking);\n    --_tt: var(--display-transform);\n    --_lh: var(--heading-display-leading, var(--leading-tight));\n  }\n  .heading[data-role-xl='heading'] {\n    --_ff: var(--heading-font);\n    --_fw: var(--heading-weight);\n    --_fst: normal;\n    --_fstr: normal;\n    --_fvs: normal;\n    --_ls: var(--heading-tracking);\n    --_tt: var(--heading-transform);\n    --_lh: var(--heading-leading, var(--leading-snug));\n  }\n}\n\n/* Measure: cap the line length with the width tokens. */\n.heading[data-measure='narrow'] {\n  max-inline-size: var(--width-narrow);\n}\n.heading[data-measure='text'] {\n  max-inline-size: var(--width-text);\n}\n.heading[data-measure='content'] {\n  max-inline-size: var(--width-content);\n}\n"],"mappings":""}

package/dist/components/typography/Heading/index.d.ts

@@ -0,0 +1,4 @@
+export { Heading } from './Heading.js';
+export { DEFAULT_HEADING_SIZE } from './sizes.js';
+export type { HeadingProps, HeadingTone, HeadingMeasure, HeadingElement } from './Heading.js';
+export type { HeadingLevel, HeadingSize } from './sizes.js';

package/dist/components/typography/Heading/sizes.d.ts

@@ -0,0 +1,4 @@
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingSize = 'display-lg' | 'display-md' | 'display-sm' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm';
+/** What each level looks like when no `size` is given. */
+export declare const DEFAULT_HEADING_SIZE: Record<HeadingLevel, HeadingSize>;

package/dist/components/typography/Heading/sizes.js

@@ -0,0 +1,13 @@
+//#region src/components/typography/Heading/sizes.ts
+var e = {
+	1: "display-md",
+	2: "3xl",
+	3: "2xl",
+	4: "xl",
+	5: "lg",
+	6: "md"
+};
+//#endregion
+export { e as DEFAULT_HEADING_SIZE };
+
+//# sourceMappingURL=sizes.js.map

package/dist/components/typography/Heading/sizes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.js","names":["DEFAULT_HEADING_SIZE"],"sources":["../../../../src/components/typography/Heading/sizes.ts"],"sourcesContent":["export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\nexport type HeadingSize =\n  'display-lg' | 'display-md' | 'display-sm' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm'\n\n/** What each level looks like when no `size` is given. */\nexport const DEFAULT_HEADING_SIZE: Record<HeadingLevel, HeadingSize> = {\n  1: 'display-md',\n  2: '3xl',\n  3: '2xl',\n  4: 'xl',\n  5: 'lg',\n  6: 'md',\n}\n"],"mappings":";AAKA,IAAaA,IAA0D;CACrE,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL"}

package/dist/components/typography/Kbd/Kbd.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from 'react';
+export type KbdSize = 'sm' | 'md';
+export interface KbdProps extends HTMLAttributes<HTMLElement> {
+    /** `sm` for menus and tooltips; `md` (default) inline with body text. */
+    size?: KbdSize;
+}
+/**
+ * A keyboard key. One key per <Kbd>; write combos as siblings so each key reads
+ * separately: <Kbd>⌘</Kbd> <Kbd>K</Kbd>.
+ */
+export declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/typography/Kbd/Kbd.js

@@ -0,0 +1,18 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./Kbd.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/typography/Kbd/Kbd.tsx
+var i = n(function({ size: n = "md", className: i, ...a }, o) {
+	return /* @__PURE__ */ r("kbd", {
+		ref: o,
+		className: e(t.kbd, i),
+		"data-kiln-component": "",
+		"data-size": n,
+		...a
+	});
+});
+//#endregion
+export { i as Kbd };
+
+//# sourceMappingURL=Kbd.js.map

package/dist/components/typography/Kbd/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.js","names":["styles","Kbd_module_default","Kbd","forwardRef","rest","cx","className","size"],"sources":["../../../../src/components/typography/Kbd/Kbd.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Kbd.module.css'\n\nexport type KbdSize = 'sm' | 'md'\n\nexport interface KbdProps extends HTMLAttributes<HTMLElement> {\n  /** `sm` for menus and tooltips; `md` (default) inline with body text. */\n  size?: KbdSize\n}\n\n/**\n * A keyboard key. One key per <Kbd>; write combos as siblings so each key reads\n * separately: <Kbd>⌘</Kbd> <Kbd>K</Kbd>.\n */\nexport const Kbd = forwardRef<HTMLElement, KbdProps>(function Kbd(\n  { size = 'md', className, ...rest },\n  ref,\n) {\n  return (\n    <kbd\n      ref={ref}\n      className={cx(styles.kbd, className)}\n      data-kiln-component=\"\"\n      data-size={size}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;AAeA,IAAaE,IAAMC,EAAkC,SACnD,EAAE,UAAO,MAAM,cAAW,GAAGC,KAC7B,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,WAAWC,EAAGL,EAAO,KAAKM,CAAS;EACnC,uBAAoB;EACpB,aAAWC;EACX,GAAIH;CACL,CAAA;AAEL,CAAC"}

package/dist/components/typography/Kbd/Kbd.module.js

@@ -0,0 +1,6 @@
+//#region src/components/typography/Kbd/Kbd.module.css
+var e = "kiln-Kbd__kbd", t = { kbd: e };
+//#endregion
+export { t as default, e as kbd };
+
+//# sourceMappingURL=Kbd.module.js.map

package/dist/components/typography/Kbd/Kbd.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.module.js","names":["kbd","Kbd_module_default"],"sources":["../../../../src/components/typography/Kbd/Kbd.module.css"],"sourcesContent":["/*\n * A keycap: hairline sides and a heavier bottom edge — the key's travel. One edge\n * treatment (border), no shadow.\n *\n * Component tokens:\n *   --kbd-radius   default half of --radius-field\n */\n.kbd {\n  --_fs: 0.8em;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-inline-size: 1.75em;\n  block-size: 1.75em;\n  padding-inline: 0.45em;\n  vertical-align: 0.08em;\n  border: var(--border-width) solid var(--color-line-strong);\n  border-block-end-width: calc(var(--border-width) + 1px);\n  border-radius: var(--kbd-radius, calc(var(--radius-field) / 2));\n  background: var(--color-surface);\n  color: var(--color-ink-muted);\n  font-family: var(--font-text);\n  font-size: var(--_fs);\n  font-weight: var(--label-weight);\n  font-variant-numeric: tabular-nums;\n  line-height: 1;\n  letter-spacing: 0;\n  text-transform: none;\n  white-space: nowrap;\n}\n\n.kbd[data-size='sm'] {\n  --_fs: 0.7em;\n}\n"],"mappings":""}

package/dist/components/typography/Kbd/index.d.ts

@@ -0,0 +1,2 @@
+export { Kbd } from './Kbd.js';
+export type { KbdProps, KbdSize } from './Kbd.js';

package/dist/components/typography/Link/Link.d.ts

@@ -0,0 +1,26 @@
+import { type AnchorHTMLAttributes } from 'react';
+export type LinkTone = 'default' | 'accent' | 'muted';
+export type LinkUnderline = 'always' | 'hover';
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** `default` is ink with a quiet underline; `accent` for the one link that matters; `muted` for meta lines. */
+    tone?: LinkTone;
+    /** `always` (default) for links inside prose; `hover` for links whose context already says "link" (nav, lists). */
+    underline?: LinkUnderline;
+    /**
+     * Opens in a new tab: sets `target="_blank"` + `rel="noopener noreferrer"`, adds a small
+     * arrow and a visually-hidden "(opens in new tab)" for screen readers.
+     */
+    external?: boolean;
+    /**
+     * Render the single child element instead of an <a>, merging props and styles.
+     * Use for router links: `<Link asChild><RouterLink to="/projects">Projects</RouterLink></Link>`.
+     */
+    asChild?: boolean;
+}
+/**
+ * Inline text link. Hover thickens the underline instead of changing colour, so the
+ * link stays legible in every theme.
+ *
+ * <Link href="https://github.com/mitcsutt/kiln" external>GitHub</Link>
+ */
+export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/typography/Link/Link.js

@@ -0,0 +1,32 @@
+import { cx as e } from "../../../utils/cx.js";
+import { ArrowUpRightIcon as t } from "../../../icons/icons.js";
+import n from "./Link.module.js";
+import { forwardRef as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Slot as s } from "radix-ui";
+//#region src/components/typography/Link/Link.tsx
+var c = r(function({ tone: r = "default", underline: c = "always", external: l = !1, asChild: u = !1, className: d, children: f, target: p, rel: m, ...h }, g) {
+	let _ = u ? s.Root : "a";
+	return /* @__PURE__ */ o(_, {
+		ref: g,
+		className: e(n.link, d),
+		"data-tone": r,
+		"data-underline": c,
+		"data-external": l || void 0,
+		target: l ? p ?? "_blank" : p,
+		rel: l ? m ?? "noopener noreferrer" : m,
+		...h,
+		children: [/* @__PURE__ */ a(s.Slottable, { children: f }), l ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("span", {
+			className: n.iconWrap,
+			"aria-hidden": "true",
+			children: ["⁠", /* @__PURE__ */ a(t, { className: n.icon })]
+		}), /* @__PURE__ */ a("span", {
+			className: n.srOnly,
+			children: " (opens in new tab)"
+		})] }) : null]
+	});
+});
+//#endregion
+export { c as Link };
+
+//# sourceMappingURL=Link.js.map

package/dist/components/typography/Link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","names":["styles","_Fragment","Link_module_default","Fragment$1","Link","forwardRef","rest","Comp","asChild","Slot","cx","className","tone","underline","external","target","rel","ArrowUpRightIcon"],"sources":["../../../../src/components/typography/Link/Link.tsx"],"sourcesContent":["import { forwardRef, type AnchorHTMLAttributes } from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { ArrowUpRightIcon } from '#icons'\nimport styles from './Link.module.css'\n\nexport type LinkTone = 'default' | 'accent' | 'muted'\nexport type LinkUnderline = 'always' | 'hover'\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** `default` is ink with a quiet underline; `accent` for the one link that matters; `muted` for meta lines. */\n  tone?: LinkTone\n  /** `always` (default) for links inside prose; `hover` for links whose context already says \"link\" (nav, lists). */\n  underline?: LinkUnderline\n  /**\n   * Opens in a new tab: sets `target=\"_blank\"` + `rel=\"noopener noreferrer\"`, adds a small\n   * arrow and a visually-hidden \"(opens in new tab)\" for screen readers.\n   */\n  external?: boolean\n  /**\n   * Render the single child element instead of an <a>, merging props and styles.\n   * Use for router links: `<Link asChild><RouterLink to=\"/projects\">Projects</RouterLink></Link>`.\n   */\n  asChild?: boolean\n}\n\n/**\n * Inline text link. Hover thickens the underline instead of changing colour, so the\n * link stays legible in every theme.\n *\n * <Link href=\"https://github.com/mitcsutt/kiln\" external>GitHub</Link>\n */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    tone = 'default',\n    underline = 'always',\n    external = false,\n    asChild = false,\n    className,\n    children,\n    target,\n    rel,\n    ...rest\n  },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : 'a'\n  return (\n    <Comp\n      ref={ref}\n      className={cx(styles.link, className)}\n      data-tone={tone}\n      data-underline={underline}\n      data-external={external || undefined}\n      target={external ? (target ?? '_blank') : target}\n      rel={external ? (rel ?? 'noopener noreferrer') : rel}\n      {...rest}\n    >\n      <Slot.Slottable>{children}</Slot.Slottable>\n      {external ? (\n        <>\n          {/* The word joiner keeps the arrow from wrapping onto a line of its own */}\n          <span className={styles.iconWrap} aria-hidden=\"true\">\n            {'\\u2060'}\n            <ArrowUpRightIcon className={styles.icon} />\n          </span>\n          <span className={styles.srOnly}> (opens in new tab)</span>\n        </>\n      ) : null}\n    </Comp>\n  )\n})\n"],"mappings":";;;;;;;AAgCA,IAAaI,IAAOC,EAAyC,SAC3D,EACE,UAAO,WACP,eAAY,UACZ,cAAW,IACX,aAAU,IACV,cACA,aACA,WACA,QACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAOC,IAAUC,EAAK,OAAO;CACnC,OACE,kBAACF,GAAD;EACO;EACL,WAAWG,EAAGV,EAAO,MAAMW,CAAS;EACpC,aAAWC;EACX,kBAAgBC;EAChB,iBAAeC,KAAY,KAAA;EAC3B,QAAQA,IAAYC,KAAU,WAAYA;EAC1C,KAAKD,IAAYE,KAAO,wBAAyBA;EACjD,GAAIV;EARN,UAAA,CAUE,kBAACG,EAAK,WAAN,EAAiB,YAAyB,CAAA,GACzCK,IACC,kBAAAb,GAAA,EAAA,UAAA,CAEE,kBAAC,QAAD;GAAM,WAAWD,EAAO;GAAU,eAAY;GAA9C,UAAA,CACG,KACD,kBAACiB,GAAD,EAAkB,WAAWjB,EAAO,KAAO,CAAA,CACvC;EACN,CAAA,GAAA,kBAAC,QAAD;GAAM,WAAWA,EAAO;GAAQ,UAAA;EAAyB,CAAA,CACzD,EAAA,CAAA,IACA,IACA;;AAEV,CAAC"}

package/dist/components/typography/Link/Link.module.js

@@ -0,0 +1,11 @@
+//#region src/components/typography/Link/Link.module.css
+var e = "kiln-Link__link", t = "kiln-Link__iconWrap", n = "kiln-Link__icon", r = "kiln-Link__srOnly", i = {
+	link: e,
+	iconWrap: t,
+	icon: n,
+	srOnly: r
+};
+//#endregion
+export { i as default, n as icon, t as iconWrap, e as link, r as srOnly };
+
+//# sourceMappingURL=Link.module.js.map

package/dist/components/typography/Link/Link.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.module.js","names":["link","iconWrap","icon","srOnly","Link_module_default"],"sources":["../../../../src/components/typography/Link/Link.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --link-thickness         resting underline, default max(0.75 × border, 0.065em)\n *   --link-thickness-hover   default max(border-width, 0.13em)\n *   --link-offset            default 0.22em\n */\n.link {\n  --_ink: var(--color-ink);\n  --_ink-hover: var(--_ink);\n  --_line: color-mix(in oklch, currentColor 42%, transparent);\n  --_line-hover: currentColor;\n\n  color: var(--_ink);\n  text-decoration-line: underline;\n  text-decoration-color: var(--_line);\n  text-decoration-thickness: var(--link-thickness, max(calc(var(--border-width) * 0.75), 0.065em));\n  text-underline-offset: var(--link-offset, 0.22em);\n  text-decoration-skip-ink: auto;\n  border-radius: 0.125em;\n  cursor: pointer;\n  transition:\n    color var(--dur-1) var(--ease-out),\n    text-decoration-color var(--dur-1) var(--ease-out),\n    text-decoration-thickness var(--dur-1) var(--ease-out),\n    text-underline-offset var(--dur-1) var(--ease-out);\n}\n\n.link[data-tone='accent'] {\n  --_ink: var(--color-accent-text);\n}\n.link[data-tone='muted'] {\n  --_ink: var(--color-ink-muted);\n  --_ink-hover: var(--color-ink);\n}\n\n.link[data-underline='hover'] {\n  text-decoration-color: transparent;\n}\n\n@media (hover: hover) {\n  .link:hover {\n    color: var(--_ink-hover);\n    text-decoration-color: var(--_line-hover);\n    text-decoration-thickness: var(--link-thickness-hover, max(var(--border-width), 0.13em));\n  }\n}\n\n.link:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n  text-decoration-color: var(--_line-hover);\n}\n\n/* The arrow hugs the last word (no wrap point before it) and sits a touch high.\n   The glyph's own side-bearing is the gap, so no extra margin. */\n.iconWrap {\n  white-space: nowrap;\n}\n.icon {\n  display: inline-block;\n  inline-size: 0.85em;\n  block-size: 0.85em;\n  margin-inline: -0.04em -0.12em;\n  vertical-align: 0;\n  transition: translate var(--dur-1) var(--ease-spring);\n}\n@media (hover: hover) {\n  .link:hover .icon {\n    translate: 0.08em -0.08em;\n  }\n}\n\n.srOnly {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":""}

package/dist/components/typography/Link/index.d.ts

@@ -0,0 +1,2 @@
+export { Link } from './Link.js';
+export type { LinkProps, LinkTone, LinkUnderline } from './Link.js';

package/dist/components/typography/Numeral/Numeral.d.ts

@@ -0,0 +1,29 @@
+import { type DataHTMLAttributes, type ReactNode } from 'react';
+export type NumeralTone = 'auto' | 'default' | 'muted' | 'accent' | 'positive' | 'caution' | 'critical';
+export type NumeralSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'display-sm' | 'display-md' | 'display-lg';
+export interface NumeralProps extends Omit<DataHTMLAttributes<HTMLDataElement>, 'value' | 'children' | 'prefix'> {
+    value: number;
+    /** Passed straight to `Intl.NumberFormat` (percent, units, fraction digits, compact…). */
+    format?: Intl.NumberFormatOptions;
+    /** BCP 47 locale. Default `en-AU`. */
+    locale?: string;
+    /** Shorthand for `format.signDisplay`. `exceptZero` shows +/− on everything but zero. */
+    signDisplay?: Intl.NumberFormatOptions['signDisplay'];
+    /** `auto` colours by sign: positive → positive tone, negative → critical. Omit to inherit. */
+    tone?: NumeralTone;
+    /** Step on the type scale. Omit to inherit — figures usually sit inside other text. */
+    size?: NumeralSize;
+    /** Set before the figures, proportional (not tabular): "≈", "#", "Rank ". Add your own spacing. */
+    prefix?: ReactNode;
+    /** Set after the figures, proportional: " seats", "×", " km". Add your own spacing. */
+    suffix?: ReactNode;
+}
+/**
+ * A formatted number. Always tabular, lining figures in the theme's numeric face, and
+ * wrapped in <data value> so the machine-readable value travels with it. Separators
+ * and symbols are set proportionally: some faces (Schibsted) make a tabular comma as
+ * wide as a digit, which reads as "1 , 017". Right-aligned columns still line up.
+ *
+ * <Numeral value={0.184} format={{ style: 'percent', maximumFractionDigits: 1 }} signDisplay="exceptZero" tone="auto" />
+ */
+export declare const Numeral: import("react").ForwardRefExoticComponent<NumeralProps & import("react").RefAttributes<HTMLDataElement>>;

package/dist/components/typography/Numeral/Numeral.js

@@ -0,0 +1,41 @@
+import { cx as e } from "../../../utils/cx.js";
+import { formatNumeralParts as t, signOf as n } from "./format.js";
+import r from "./Numeral.module.js";
+import { Fragment as i, forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/typography/Numeral/Numeral.tsx
+var c = a(function({ value: a, format: c, locale: l = "en-AU", signDisplay: u, tone: d, size: f, prefix: p, suffix: m, className: h, ...g }, _) {
+	let v = n(a), y = t(a, l, u ? {
+		...c,
+		signDisplay: u
+	} : c), b = d === "auto" ? v === "positive" ? "positive" : v === "negative" ? "critical" : void 0 : d;
+	return /* @__PURE__ */ s("data", {
+		ref: _,
+		value: String(a),
+		className: e(r.numeral, h),
+		"data-sign": v,
+		"data-tone": b,
+		"data-size": f,
+		...g,
+		children: [
+			p != null && p !== !1 ? /* @__PURE__ */ o("span", {
+				className: r.mark,
+				"data-affix": "prefix",
+				children: p
+			}) : null,
+			y.map((e, t) => e.kind === "mark" ? /* @__PURE__ */ o("span", {
+				className: r.mark,
+				children: e.value
+			}, t) : /* @__PURE__ */ o(i, { children: e.value }, t)),
+			m != null && m !== !1 ? /* @__PURE__ */ o("span", {
+				className: r.mark,
+				"data-affix": "suffix",
+				children: m
+			}) : null
+		]
+	});
+});
+//#endregion
+export { c as Numeral };
+
+//# sourceMappingURL=Numeral.js.map

package/dist/components/typography/Numeral/Numeral.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Numeral.js","names":["styles","Numeral_module_default","Numeral","forwardRef","rest","sign","signOf","value","parts","formatNumeralParts","locale","signDisplay","format","resolvedTone","tone","cx","className","size","prefix","part","i","Fragment","suffix"],"sources":["../../../../src/components/typography/Numeral/Numeral.tsx"],"sourcesContent":["import { Fragment, forwardRef, type DataHTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport { formatNumeralParts, signOf } from './format'\nimport styles from './Numeral.module.css'\n\nexport type NumeralTone =\n  'auto' | 'default' | 'muted' | 'accent' | 'positive' | 'caution' | 'critical'\nexport type NumeralSize =\n  'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'display-sm' | 'display-md' | 'display-lg'\n\nexport interface NumeralProps extends Omit<\n  DataHTMLAttributes<HTMLDataElement>,\n  'value' | 'children' | 'prefix'\n> {\n  value: number\n  /** Passed straight to `Intl.NumberFormat` (percent, units, fraction digits, compact…). */\n  format?: Intl.NumberFormatOptions\n  /** BCP 47 locale. Default `en-AU`. */\n  locale?: string\n  /** Shorthand for `format.signDisplay`. `exceptZero` shows +/− on everything but zero. */\n  signDisplay?: Intl.NumberFormatOptions['signDisplay']\n  /** `auto` colours by sign: positive → positive tone, negative → critical. Omit to inherit. */\n  tone?: NumeralTone\n  /** Step on the type scale. Omit to inherit — figures usually sit inside other text. */\n  size?: NumeralSize\n  /** Set before the figures, proportional (not tabular): \"≈\", \"#\", \"Rank \". Add your own spacing. */\n  prefix?: ReactNode\n  /** Set after the figures, proportional: \" seats\", \"×\", \" km\". Add your own spacing. */\n  suffix?: ReactNode\n}\n\n/**\n * A formatted number. Always tabular, lining figures in the theme's numeric face, and\n * wrapped in <data value> so the machine-readable value travels with it. Separators\n * and symbols are set proportionally: some faces (Schibsted) make a tabular comma as\n * wide as a digit, which reads as \"1 , 017\". Right-aligned columns still line up.\n *\n * <Numeral value={0.184} format={{ style: 'percent', maximumFractionDigits: 1 }} signDisplay=\"exceptZero\" tone=\"auto\" />\n */\nexport const Numeral = forwardRef<HTMLDataElement, NumeralProps>(function Numeral(\n  { value, format, locale = 'en-AU', signDisplay, tone, size, prefix, suffix, className, ...rest },\n  ref,\n) {\n  const sign = signOf(value)\n  const parts = formatNumeralParts(value, locale, signDisplay ? { ...format, signDisplay } : format)\n  const resolvedTone =\n    tone === 'auto'\n      ? sign === 'positive'\n        ? 'positive'\n        : sign === 'negative'\n          ? 'critical'\n          : undefined\n      : tone\n  return (\n    <data\n      ref={ref}\n      value={String(value)}\n      className={cx(styles.numeral, className)}\n      data-sign={sign}\n      data-tone={resolvedTone}\n      data-size={size}\n      {...rest}\n    >\n      {prefix != null && prefix !== false ? (\n        <span className={styles.mark} data-affix=\"prefix\">\n          {prefix}\n        </span>\n      ) : null}\n      {parts.map((part, i) =>\n        part.kind === 'mark' ? (\n          <span key={i} className={styles.mark}>\n            {part.value}\n          </span>\n        ) : (\n          <Fragment key={i}>{part.value}</Fragment>\n        ),\n      )}\n      {suffix != null && suffix !== false ? (\n        <span className={styles.mark} data-affix=\"suffix\">\n          {suffix}\n        </span>\n      ) : null}\n    </data>\n  )\n})\n"],"mappings":";;;;;;AAuCA,IAAaE,IAAUC,EAA0C,SAC/D,EAAE,UAAO,WAAQ,YAAS,SAAS,gBAAa,SAAM,SAAM,WAAQ,WAAQ,cAAW,GAAGC,KAC1F,GACA;CACA,IAAMC,IAAOC,EAAOC,CAAK,GACnBC,IAAQC,EAAmBF,GAAOG,GAAQC,IAAc;EAAE,GAAGC;EAAQ;CAAY,IAAIA,CAAM,GAC3FC,IACJC,MAAS,SACLT,MAAS,aACP,aACAA,MAAS,aACP,aACA,KAAA,IACJS;CACN,OACE,kBAAC,QAAD;EACO;EACL,OAAO,OAAOP,CAAK;EACnB,WAAWQ,EAAGf,EAAO,SAASgB,CAAS;EACvC,aAAWX;EACX,aAAWQ;EACX,aAAWI;EACX,GAAIb;EAPN,UAAA;GASGc,KAAU,QAAQA,MAAW,KAC5B,kBAAC,QAAD;IAAM,WAAWlB,EAAO;IAAM,cAAW;IACtC,UAAAkB;GACG,CAAA,IACJ;GACHV,EAAM,KAAK,GAAM,MAChBW,EAAK,SAAS,SACZ,kBAAC,QAAD;IAAc,WAAWnB,EAAO;IAC7B,UAAAmB,EAAK;GACF,GAFKC,CAEL,IAEN,kBAACC,GAAD,EAAA,UAAmBF,EAAK,MAAgB,GAAzBC,CAAyB,CAE5C;GACCE,KAAU,QAAQA,MAAW,KAC5B,kBAAC,QAAD;IAAM,WAAWtB,EAAO;IAAM,cAAW;IACtC,UAAAsB;GACG,CAAA,IACJ;EACA;;AAEV,CAAC"}

package/dist/components/typography/Numeral/Numeral.module.js

@@ -0,0 +1,9 @@
+//#region src/components/typography/Numeral/Numeral.module.css
+var e = "kiln-Numeral__numeral", t = "kiln-Numeral__mark", n = {
+	numeral: e,
+	mark: t
+};
+//#endregion
+export { n as default, t as mark, e as numeral };
+
+//# sourceMappingURL=Numeral.module.js.map

package/dist/components/typography/Numeral/Numeral.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Numeral.module.js","names":["numeral","mark","Numeral_module_default"],"sources":["../../../../src/components/typography/Numeral/Numeral.module.css"],"sourcesContent":["/*\n * Figures: --font-numeric, stretched per theme (Ledger's condensed receipt-tape mono),\n * tabular + lining so columns align and live values don't jiggle.\n *\n * Component tokens:\n *   --numeral-display-weight   default var(--display-weight)\n *   --numeral-tracking         default 0 (display sizes tighten slightly)\n *   --numeral-weight           default inherits (a condensed numeric face may want more)\n *   --numeral-scale            size relative to surrounding text when no `size`, default 1\n */\n.numeral {\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n  font-feature-settings:\n    'tnum' 1,\n    'lnum' 1;\n  font-size: calc(1em * var(--numeral-scale, 1));\n  /* No fallback on purpose: unset → the inherited weight */\n  font-weight: var(--numeral-weight);\n  letter-spacing: var(--numeral-tracking, 0);\n  white-space: nowrap;\n}\n\n.numeral[data-tone] {\n  color: var(--_ink);\n}\n.numeral[data-tone='default'] {\n  --_ink: var(--color-ink);\n}\n.numeral[data-tone='muted'] {\n  --_ink: var(--color-ink-muted);\n}\n.numeral[data-tone='accent'] {\n  --_ink: var(--color-accent-text);\n}\n.numeral[data-tone='positive'] {\n  --_ink: var(--tone-positive-text);\n}\n.numeral[data-tone='caution'] {\n  --_ink: var(--tone-caution-text);\n}\n.numeral[data-tone='critical'] {\n  --_ink: var(--tone-critical-text);\n}\n\n.numeral[data-size] {\n  font-size: var(--_fs);\n  line-height: var(--leading-snug);\n}\n.numeral[data-size='xs'] {\n  --_fs: var(--text-xs);\n}\n.numeral[data-size='sm'] {\n  --_fs: var(--text-sm);\n}\n.numeral[data-size='md'] {\n  --_fs: var(--text-md);\n}\n.numeral[data-size='lg'] {\n  --_fs: var(--text-lg);\n}\n.numeral[data-size='xl'] {\n  --_fs: var(--text-xl);\n}\n.numeral[data-size='2xl'] {\n  --_fs: var(--text-2xl);\n}\n.numeral[data-size='3xl'] {\n  --_fs: var(--text-3xl);\n}\n.numeral[data-size='display-sm'] {\n  --_fs: var(--text-display-sm);\n}\n.numeral[data-size='display-md'] {\n  --_fs: var(--text-display-md);\n}\n.numeral[data-size='display-lg'] {\n  --_fs: var(--text-display-lg);\n}\n\n.numeral:is([data-size='2xl'], [data-size='3xl'], [data-size^='display']) {\n  font-weight: var(--numeral-display-weight, var(--display-weight));\n  letter-spacing: var(--numeral-tracking, -0.015em);\n  line-height: max(var(--leading-tight), 1);\n}\n\n/* Separators, currency and units: proportional, so they don't open gaps between digits */\n.mark {\n  font-variant-numeric: proportional-nums lining-nums;\n  font-feature-settings:\n    'tnum' 0,\n    'lnum' 1;\n}\n"],"mappings":""}

package/dist/components/typography/Numeral/format.d.ts

@@ -0,0 +1,16 @@
+export type NumeralSign = 'positive' | 'negative' | 'zero';
+/** Resolve a number's sign, treating -0 as zero. */
+export declare function signOf(value: number): NumeralSign;
+export interface NumeralPart {
+    /** `figure` for digits and signs (tabular); `mark` for separators, symbols and units. */
+    kind: 'figure' | 'mark';
+    value: string;
+}
+/**
+ * Format a number into runs of figures and marks. Hyphens become a true minus sign
+ * (U+2212) so negatives are as wide as positives. Adjacent parts of the same kind are
+ * merged, so a plain integer is a single run.
+ */
+export declare function formatNumeralParts(value: number, locale?: string, format?: Intl.NumberFormatOptions): NumeralPart[];
+/** Format a number the way <Numeral> shows it, as a plain string. */
+export declare function formatNumeral(value: number, locale?: string, format?: Intl.NumberFormatOptions): string;

package/dist/components/typography/Numeral/format.js

@@ -0,0 +1,30 @@
+//#region src/components/typography/Numeral/format.ts
+function e(e) {
+	return e > 0 ? "positive" : e < 0 ? "negative" : "zero";
+}
+var t = /* @__PURE__ */ new Set([
+	"integer",
+	"fraction",
+	"minusSign",
+	"plusSign",
+	"nan",
+	"infinity"
+]);
+function n(e, n = "en-AU", r) {
+	let i = Object.is(e, -0) ? 0 : e, a = [];
+	for (let e of new Intl.NumberFormat(n, r).formatToParts(i)) {
+		let n = t.has(e.type) ? "figure" : "mark", r = e.type === "minusSign" ? "−" : e.value, i = a[a.length - 1];
+		i?.kind === n ? i.value += r : a.push({
+			kind: n,
+			value: r
+		});
+	}
+	return a;
+}
+function r(e, t = "en-AU", r) {
+	return n(e, t, r).map((e) => e.value).join("");
+}
+//#endregion
+export { r as formatNumeral, n as formatNumeralParts, e as signOf };
+
+//# sourceMappingURL=format.js.map

package/dist/components/typography/Numeral/format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.js","names":["signOf","value","FIGURE_PARTS","formatNumeralParts","normalised","runs","part","locale","format","kind","text","last","formatNumeral","p"],"sources":["../../../../src/components/typography/Numeral/format.ts"],"sourcesContent":["export type NumeralSign = 'positive' | 'negative' | 'zero'\n\n/** Resolve a number's sign, treating -0 as zero. */\nexport function signOf(value: number): NumeralSign {\n  return value > 0 ? 'positive' : value < 0 ? 'negative' : 'zero'\n}\n\nexport interface NumeralPart {\n  /** `figure` for digits and signs (tabular); `mark` for separators, symbols and units. */\n  kind: 'figure' | 'mark'\n  value: string\n}\n\nconst FIGURE_PARTS = new Set<Intl.NumberFormatPartTypes>([\n  'integer',\n  'fraction',\n  'minusSign',\n  'plusSign',\n  'nan',\n  'infinity',\n])\n\n/**\n * Format a number into runs of figures and marks. Hyphens become a true minus sign\n * (U+2212) so negatives are as wide as positives. Adjacent parts of the same kind are\n * merged, so a plain integer is a single run.\n */\nexport function formatNumeralParts(\n  value: number,\n  locale = 'en-AU',\n  format?: Intl.NumberFormatOptions,\n): NumeralPart[] {\n  const normalised = Object.is(value, -0) ? 0 : value\n  const runs: NumeralPart[] = []\n  for (const part of new Intl.NumberFormat(locale, format).formatToParts(normalised)) {\n    const kind = FIGURE_PARTS.has(part.type) ? 'figure' : 'mark'\n    const text = part.type === 'minusSign' ? '−' : part.value\n    const last = runs[runs.length - 1]\n    if (last?.kind === kind) last.value += text\n    else runs.push({ kind, value: text })\n  }\n  return runs\n}\n\n/** Format a number the way <Numeral> shows it, as a plain string. */\nexport function formatNumeral(\n  value: number,\n  locale = 'en-AU',\n  format?: Intl.NumberFormatOptions,\n): string {\n  return formatNumeralParts(value, locale, format)\n    .map((p) => p.value)\n    .join('')\n}\n"],"mappings":";AAGA,SAAgBA,EAAO,GAA4B;CACjD,OAAOC,IAAQ,IAAI,aAAaA,IAAQ,IAAI,aAAa;AAC3D;AAQA,IAAMC,oBAAe,IAAI,IAAgC;CACvD;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAOD,SAAgBC,EACd,GACA,IAAS,SACT,GACe;CACf,IAAMC,IAAa,OAAO,GAAGH,GAAO,EAAE,IAAI,IAAIA,GACxCI,IAAsB,CAAC;CAC7B,KAAK,IAAMC,KAAQ,IAAI,KAAK,aAAaC,GAAQC,CAAM,CAAC,CAAC,cAAcJ,CAAU,GAAG;EAClF,IAAMK,IAAOP,EAAa,IAAII,EAAK,IAAI,IAAI,WAAW,QAChDI,IAAOJ,EAAK,SAAS,cAAc,MAAMA,EAAK,OAC9CK,IAAON,EAAKA,EAAK,SAAS;EAChC,AAAIM,GAAM,SAASF,IAAM,EAAK,SAASC,IAClCL,EAAK,KAAK;GAAE;GAAM,OAAOK;EAAK,CAAC;CACtC;CACA,OAAOL;AACT;AAGA,SAAgBO,EACd,GACA,IAAS,SACT,GACQ;CACR,OAAOT,EAAmBF,GAAOM,GAAQC,CAAM,CAAC,CAC7C,KAAK,MAAMK,EAAE,KAAK,CAAC,CACnB,KAAK,EAAE;AACZ"}

package/dist/components/typography/Numeral/index.d.ts

@@ -0,0 +1,4 @@
+export { Numeral } from './Numeral.js';
+export { formatNumeral, formatNumeralParts, signOf } from './format.js';
+export type { NumeralProps, NumeralTone, NumeralSize } from './Numeral.js';
+export type { NumeralSign, NumeralPart } from './format.js';

package/dist/components/typography/Prose/Prose.d.ts

@@ -0,0 +1,16 @@
+import { type HTMLAttributes } from 'react';
+export type ProseSize = 'sm' | 'md' | 'lg';
+export type ProseElement = 'div' | 'article' | 'section';
+export interface ProseProps extends HTMLAttributes<HTMLElement> {
+    /** `md` (default) is the theme's `--prose-size`; `sm` for notes and sidebars, `lg` for essays. */
+    size?: ProseSize;
+    as?: ProseElement;
+}
+/**
+ * Long-form writing. Styles raw HTML/MDX children — headings, lists, quotes, code,
+ * figures, tables — in the theme's prose face with a comfortable measure and a
+ * vertical rhythm from the space scale.
+ *
+ * <Prose as="article"><MDXContent /></Prose>
+ */
+export declare const Prose: import("react").ForwardRefExoticComponent<ProseProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/typography/Prose/Prose.js

@@ -0,0 +1,17 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./Prose.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/typography/Prose/Prose.tsx
+var i = n(function({ size: n = "md", as: i = "div", className: a, ...o }, s) {
+	return /* @__PURE__ */ r(i, {
+		ref: s,
+		className: e(t.prose, a),
+		"data-size": n,
+		...o
+	});
+});
+//#endregion
+export { i as Prose };
+
+//# sourceMappingURL=Prose.js.map

package/dist/components/typography/Prose/Prose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prose.js","names":["styles","Prose_module_default","Prose","forwardRef","Comp","rest","cx","className","size"],"sources":["../../../../src/components/typography/Prose/Prose.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Prose.module.css'\n\nexport type ProseSize = 'sm' | 'md' | 'lg'\nexport type ProseElement = 'div' | 'article' | 'section'\n\nexport interface ProseProps extends HTMLAttributes<HTMLElement> {\n  /** `md` (default) is the theme's `--prose-size`; `sm` for notes and sidebars, `lg` for essays. */\n  size?: ProseSize\n  as?: ProseElement\n}\n\n/**\n * Long-form writing. Styles raw HTML/MDX children — headings, lists, quotes, code,\n * figures, tables — in the theme's prose face with a comfortable measure and a\n * vertical rhythm from the space scale.\n *\n * <Prose as=\"article\"><MDXContent /></Prose>\n */\nexport const Prose = forwardRef<HTMLElement, ProseProps>(function Prose(\n  { size = 'md', as: Comp = 'div', className, ...rest },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.prose, className)}\n      data-size={size}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;AAoBA,IAAaE,IAAQC,EAAoC,SACvD,EAAE,UAAO,MAAM,IAAIC,IAAO,OAAO,cAAW,GAAGC,KAC/C,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGN,EAAO,OAAOO,CAAS;EACrC,aAAWC;EACX,GAAIH;CACL,CAAA;AAEL,CAAC"}

package/dist/components/typography/Prose/Prose.module.js

@@ -0,0 +1,6 @@
+//#region src/components/typography/Prose/Prose.module.css
+var e = "kiln-Prose__prose", t = { prose: e };
+//#endregion
+export { t as default, e as prose };
+
+//# sourceMappingURL=Prose.module.js.map

package/dist/components/typography/Prose/Prose.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prose.module.js","names":["prose","Prose_module_default"],"sources":["../../../../src/components/typography/Prose/Prose.module.css"],"sourcesContent":["/*\n * Long-form writing. Descendant selectors are wrapped in :where() so every rule stays at\n * one-class specificity — a consumer's className (or an MDX component) always wins.\n *\n * Library components placed inside Prose (CodeBlock, Quote, Card, Table, Alert…) carry\n * `data-kiln-component` on their root, and every descendant rule ends in\n *   :not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *))\n * so it stops at that boundary — Prose styles raw HTML/MDX, never a component's insides.\n * (`@scope (.prose) to ([data-kiln-component])` says the same thing; :not() is used for\n * broader browser support.) The boundary must sit *inside* this .prose, so a Prose that\n * is itself inside a Card is still styled.\n *\n * Rhythm: paragraphs flow on --space-4; headings take more above than below (they belong\n * to what follows); figures, code and quotes get a wider --space-6 berth.\n *\n * Component tokens:\n *   --prose-measure    default 68ch\n *   --prose-link-line  underline colour for links, default accent at 70%\n */\n.prose {\n  --_fs: var(--prose-size);\n  --_flow: var(--space-4);\n\n  max-inline-size: var(--prose-measure, 68ch);\n  color: var(--color-ink);\n  font-family: var(--font-prose);\n  font-size: var(--_fs);\n  line-height: var(--prose-leading);\n  font-optical-sizing: auto;\n  overflow-wrap: break-word;\n}\n.prose[data-size='sm'] {\n  --_fs: calc(var(--prose-size) * 0.89);\n  --_flow: var(--space-3);\n}\n.prose[data-size='lg'] {\n  --_fs: calc(var(--prose-size) * 1.12);\n  --_flow: var(--space-5);\n}\n\n/* ── Flow ─────────────────────────────────────────────────────────────── */\n.prose > * {\n  margin-block: 0;\n}\n.prose > * + * {\n  margin-block-start: var(--_flow);\n}\n.prose > * + :where(figure, pre, blockquote, table, hr),\n.prose > :where(figure, pre, blockquote, table, hr) + * {\n  margin-block-start: var(--space-6);\n}\n.prose > * + :where(h2) {\n  margin-block-start: var(--space-7);\n}\n.prose > * + :where(h3) {\n  margin-block-start: var(--space-6);\n}\n.prose > * + :where(h4, h5, h6) {\n  margin-block-start: var(--space-5);\n}\n.prose > :where(h1, h2, h3, h4, h5, h6) + * {\n  margin-block-start: var(--space-3);\n}\n\n/* ── Text ─────────────────────────────────────────────────────────────── */\n.prose :where(p, li):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  text-wrap: pretty;\n}\n.prose :where(strong, b):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  font-weight: 650;\n}\n.prose\n  :where(h1, h2, h3, h4, h5, h6):not(\n    :where(.prose [data-kiln-component], .prose [data-kiln-component] *)\n  )\n  strong {\n  font-weight: inherit;\n}\n.prose :where(mark):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  padding-inline: 0.15em;\n  border-radius: 0.15em;\n  background: var(--color-highlight);\n  color: var(--color-highlight-ink);\n}\n.prose :where(small):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  font-size: 0.84em;\n  color: var(--color-ink-muted);\n}\n.prose\n  :where(abbr[title]):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  text-decoration: underline dotted;\n  text-underline-offset: 0.2em;\n  cursor: help;\n}\n\n/* ── Headings: the theme's heading role, scaled from the prose size ────── */\n.prose\n  :where(h1, h2, h3):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  font-family: var(--heading-font);\n  font-weight: var(--heading-weight);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  line-height: var(--leading-snug);\n  color: var(--color-ink);\n  text-wrap: balance;\n}\n.prose :where(h1):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  font-size: calc(1em * pow(var(--type-ratio), 3));\n}\n.prose :where(h2):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  font-size: calc(1em * pow(var(--type-ratio), 2));\n}\n.prose :where(h3):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  font-size: calc(1em * var(--type-ratio));\n}\n/* Small headings step out of the display face into the text face — a run-in label, not a title. */\n.prose\n  :where(h4, h5, h6):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  font-family: var(--font-text);\n  font-size: 1em;\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  line-height: var(--leading-snug);\n  color: var(--color-ink);\n}\n.prose :where(h5, h6):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  font-size: 0.89em;\n  color: var(--color-ink-muted);\n}\n\n/* ── Links: ink text, accent rule; hover thickens ─────────────────────── */\n.prose :where(a):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  color: inherit;\n  text-decoration-line: underline;\n  text-decoration-color: var(\n    --prose-link-line,\n    color-mix(in oklch, var(--color-accent) 70%, transparent)\n  );\n  text-decoration-thickness: max(calc(var(--border-width) * 0.75), 0.065em);\n  text-underline-offset: 0.22em;\n  transition:\n    text-decoration-color var(--dur-1) var(--ease-out),\n    text-decoration-thickness var(--dur-1) var(--ease-out);\n}\n@media (hover: hover) {\n  .prose :where(a):hover {\n    text-decoration-color: var(--color-accent);\n    text-decoration-thickness: max(var(--border-width), 0.13em);\n  }\n}\n.prose\n  :where(a):not(\n    :where(.prose [data-kiln-component], .prose [data-kiln-component] *)\n  ):focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n  border-radius: 0.125em;\n}\n\n/* ── Lists ────────────────────────────────────────────────────────────── */\n.prose :where(ul, ol):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  padding-inline-start: 1.35em;\n}\n.prose :where(li + li):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)),\n.prose\n  :where(li > ul, li > ol):not(\n    :where(.prose [data-kiln-component], .prose [data-kiln-component] *)\n  ) {\n  margin-block-start: var(--space-2);\n}\n.prose\n  :where(li):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *))::marker {\n  color: var(--color-ink-subtle);\n}\n.prose\n  :where(ol > li):not(\n    :where(.prose [data-kiln-component], .prose [data-kiln-component] *)\n  )::marker {\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  /* Lining but proportional: some faces give a tabular '.' a full figure width */\n  font-variant-numeric: lining-nums;\n  font-size: 0.9em;\n}\n.prose\n  :where(ul > li):not(\n    :where(.prose [data-kiln-component], .prose [data-kiln-component] *)\n  )::marker {\n  content: '\\2013\\00a0\\00a0';\n}\n.prose :where(dl):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  display: grid;\n  gap: var(--space-1) var(--space-4);\n}\n.prose :where(dt):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  font-family: var(--font-text);\n  font-weight: var(--label-weight);\n}\n.prose :where(dd):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  margin: 0;\n  color: var(--color-ink-muted);\n}\n\n/* ── Quotes: a hanging mark in the display face, no rule down the side ── */\n.prose\n  :where(blockquote):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  position: relative;\n  margin-inline: 0;\n  padding-inline-start: 1.25em;\n  color: var(--color-ink-muted);\n  font-size: 1.06em;\n}\n.prose\n  :where(blockquote):not(\n    :where(.prose [data-kiln-component], .prose [data-kiln-component] *)\n  )::before {\n  content: '\\201C';\n  position: absolute;\n  inset-inline-start: -0.04em;\n  inset-block-start: -0.06em;\n  color: var(--color-accent-text);\n  font-family: var(--font-display);\n  font-weight: var(--display-weight);\n  font-size: 2.1em;\n  line-height: 1;\n}\n.prose\n  :where(blockquote):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *))\n  > *\n  + * {\n  margin-block-start: var(--space-3);\n}\n.prose\n  :where(blockquote cite, blockquote footer):not(\n    :where(.prose [data-kiln-component], .prose [data-kiln-component] *)\n  ) {\n  display: block;\n  font-family: var(--font-text);\n  font-size: 0.8em;\n  font-style: normal;\n  color: var(--color-ink-subtle);\n}\n.prose :where(q):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  quotes: '\\201C' '\\201D' '\\2018' '\\2019';\n}\n\n/* ── Code ─────────────────────────────────────────────────────────────── */\n.prose\n  :where(code, kbd, samp):not(\n    :where(.prose [data-kiln-component], .prose [data-kiln-component] *)\n  ) {\n  font-family: var(--font-mono);\n  font-stretch: var(--mono-stretch);\n  font-size: 0.8em;\n  font-variant-ligatures: none;\n  letter-spacing: 0;\n  text-transform: none;\n}\n.prose\n  :where(:not(pre) > code):not(\n    :where(.prose [data-kiln-component], .prose [data-kiln-component] *)\n  ) {\n  padding: 0.08em 0.26em;\n  font-size: 0.85em;\n  font-weight: 400;\n  border-radius: calc(var(--radius-field) / 2);\n  background: var(--color-surface-sunken);\n  overflow-wrap: anywhere;\n  box-decoration-break: clone;\n  -webkit-box-decoration-break: clone;\n}\n.prose :where(kbd):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  padding: 0.1em 0.4em;\n  border: var(--border-width) solid var(--color-line-strong);\n  border-block-end-width: calc(var(--border-width) + 1px);\n  border-radius: calc(var(--radius-field) / 2);\n  font-family: var(--font-text);\n  font-weight: var(--label-weight);\n}\n.prose :where(pre):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  padding: var(--space-4) var(--space-5);\n  overflow-x: auto;\n  border-radius: var(--radius-media);\n  background: var(--color-surface-sunken);\n  line-height: 1.65;\n  tab-size: 2;\n  white-space: pre;\n}\n.prose\n  :where(pre):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *))\n  :where(code) {\n  font-size: 0.78em;\n}\n.prose\n  :where(pre):not(\n    :where(.prose [data-kiln-component], .prose [data-kiln-component] *)\n  ):focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n/* ── Figures ──────────────────────────────────────────────────────────── */\n.prose\n  :where(img, video, svg):not(\n    :where(.prose [data-kiln-component], .prose [data-kiln-component] *)\n  ) {\n  display: block;\n  max-inline-size: 100%;\n  block-size: auto;\n}\n.prose :where(figure):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  margin-inline: 0;\n}\n.prose\n  :where(figure):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *))\n  :where(img, video) {\n  inline-size: 100%;\n  border-radius: var(--radius-media);\n}\n.prose\n  :where(figcaption):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  margin-block-start: var(--space-3);\n  font-family: var(--font-text);\n  font-size: var(--text-sm);\n  line-height: var(--leading-snug);\n  color: var(--color-ink-muted);\n  text-wrap: pretty;\n}\n\n/* ── Rules & tables ───────────────────────────────────────────────────── */\n.prose :where(hr):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  block-size: 0;\n  border: 0;\n  border-block-start: var(--border-width) solid var(--color-line);\n}\n.prose :where(table):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  inline-size: 100%;\n  border-collapse: collapse;\n  font-family: var(--font-text);\n  font-size: var(--text-sm);\n  line-height: var(--leading-snug);\n  font-variant-numeric: tabular-nums lining-nums;\n}\n.prose :where(caption):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  padding-block-end: var(--space-2);\n  text-align: start;\n  color: var(--color-ink-muted);\n}\n.prose :where(th, td):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  padding: var(--space-2) var(--space-3);\n  border-block-end: var(--border-width) solid var(--color-line);\n  text-align: start;\n  vertical-align: top;\n}\n.prose\n  :where(th:first-child, td:first-child):not(\n    :where(.prose [data-kiln-component], .prose [data-kiln-component] *)\n  ) {\n  padding-inline-start: 0;\n}\n.prose\n  :where(th:last-child, td:last-child):not(\n    :where(.prose [data-kiln-component], .prose [data-kiln-component] *)\n  ) {\n  padding-inline-end: 0;\n}\n.prose :where(thead th):not(:where(.prose [data-kiln-component], .prose [data-kiln-component] *)) {\n  border-block-end-color: var(--color-line-strong);\n  font-weight: var(--label-weight);\n  color: var(--color-ink-muted);\n}\n.prose\n  :where(td[align='right'], th[align='right']):not(\n    :where(.prose [data-kiln-component], .prose [data-kiln-component] *)\n  ),\n.prose\n  :where(td[data-numeric], th[data-numeric]):not(\n    :where(.prose [data-kiln-component], .prose [data-kiln-component] *)\n  ) {\n  text-align: end;\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n}\n"],"mappings":""}

package/dist/components/typography/Prose/index.d.ts

@@ -0,0 +1,2 @@
+export { Prose } from './Prose.js';
+export type { ProseProps, ProseSize, ProseElement } from './Prose.js';

package/dist/components/typography/Quote/Quote.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type QuoteSize = 'sm' | 'md' | 'lg';
+export interface QuoteProps extends HTMLAttributes<HTMLElement> {
+    /** Who said it. A name, or a name plus role: `<>Rosa Nguyen<br />Head of design</>`. */
+    cite?: ReactNode;
+    /** URL of the source, set on the <blockquote cite> attribute. */
+    citeUrl?: string;
+    /**
+     * `sm` a testimonial in the prose face; `md` (default) a pull quote in the display
+     * face; `lg` the one quote a page is built around.
+     */
+    size?: QuoteSize;
+}
+/**
+ * A pull quote or testimonial. The opening mark hangs in its own column in the display
+ * face — the typographer's treatment, not a coloured bar down the side.
+ *
+ * <Quote cite="Ada Okafor">Software should stay out of the way.</Quote>
+ */
+export declare const Quote: import("react").ForwardRefExoticComponent<QuoteProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/typography/Quote/Quote.js

@@ -0,0 +1,34 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./Quote.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/typography/Quote/Quote.tsx
+var a = n(function({ cite: n, citeUrl: a, size: o = "md", className: s, children: c, ...l }, u) {
+	return /* @__PURE__ */ i("figure", {
+		ref: u,
+		className: e(t.quote, s),
+		"data-kiln-component": "",
+		"data-size": o,
+		...l,
+		children: [
+			/* @__PURE__ */ r("span", {
+				className: t.mark,
+				"aria-hidden": "true",
+				children: "“"
+			}),
+			/* @__PURE__ */ r("blockquote", {
+				className: t.body,
+				cite: a,
+				children: c
+			}),
+			n ? /* @__PURE__ */ r("figcaption", {
+				className: t.cite,
+				children: n
+			}) : null
+		]
+	});
+});
+//#endregion
+export { a as Quote };
+
+//# sourceMappingURL=Quote.js.map

package/dist/components/typography/Quote/Quote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Quote.js","names":["styles","Quote_module_default","Quote","forwardRef","rest","cx","className","size","citeUrl","cite"],"sources":["../../../../src/components/typography/Quote/Quote.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Quote.module.css'\n\nexport type QuoteSize = 'sm' | 'md' | 'lg'\n\nexport interface QuoteProps extends HTMLAttributes<HTMLElement> {\n  /** Who said it. A name, or a name plus role: `<>Rosa Nguyen<br />Head of design</>`. */\n  cite?: ReactNode\n  /** URL of the source, set on the <blockquote cite> attribute. */\n  citeUrl?: string\n  /**\n   * `sm` a testimonial in the prose face; `md` (default) a pull quote in the display\n   * face; `lg` the one quote a page is built around.\n   */\n  size?: QuoteSize\n}\n\n/**\n * A pull quote or testimonial. The opening mark hangs in its own column in the display\n * face — the typographer's treatment, not a coloured bar down the side.\n *\n * <Quote cite=\"Ada Okafor\">Software should stay out of the way.</Quote>\n */\nexport const Quote = forwardRef<HTMLElement, QuoteProps>(function Quote(\n  { cite, citeUrl, size = 'md', className, children, ...rest },\n  ref,\n) {\n  return (\n    <figure\n      ref={ref}\n      className={cx(styles.quote, className)}\n      data-kiln-component=\"\"\n      data-size={size}\n      {...rest}\n    >\n      <span className={styles.mark} aria-hidden=\"true\">\n        {'“'}\n      </span>\n      <blockquote className={styles.body} cite={citeUrl}>\n        {children}\n      </blockquote>\n      {cite ? <figcaption className={styles.cite}>{cite}</figcaption> : null}\n    </figure>\n  )\n})\n"],"mappings":";;;;;AAwBA,IAAaE,IAAQC,EAAoC,SACvD,EAAE,SAAM,YAAS,UAAO,MAAM,cAAW,aAAU,GAAGC,KACtD,GACA;CACA,OACE,kBAAC,UAAD;EACO;EACL,WAAWC,EAAGL,EAAO,OAAOM,CAAS;EACrC,uBAAoB;EACpB,aAAWC;EACX,GAAIH;EALN,UAAA;GAOE,kBAAC,QAAD;IAAM,WAAWJ,EAAO;IAAM,eAAY;IACvC,UAAA;GACG,CAAA;GACN,kBAAC,cAAD;IAAY,WAAWA,EAAO;IAAM,MAAMQ;IACvC;GACS,CAAA;GACXC,IAAO,kBAAC,cAAD;IAAY,WAAWT,EAAO;IAAO,UAAAS;GAAiB,CAAA,IAAI;EAC5D;;AAEZ,CAAC"}

package/dist/components/typography/Quote/Quote.module.js

@@ -0,0 +1,11 @@
+//#region src/components/typography/Quote/Quote.module.css
+var e = "kiln-Quote__quote", t = "kiln-Quote__mark", n = "kiln-Quote__body", r = "kiln-Quote__cite", i = {
+	quote: e,
+	mark: t,
+	body: n,
+	cite: r
+};
+//#endregion
+export { n as body, r as cite, i as default, t as mark, e as quote };
+
+//# sourceMappingURL=Quote.module.js.map

package/dist/components/typography/Quote/Quote.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Quote.module.js","names":["quote","mark","body","cite","Quote_module_default"],"sources":["../../../../src/components/typography/Quote/Quote.module.css"],"sourcesContent":["/*\n * Layout: a two-column grid. The opening quote mark hangs in the first column, so the\n * text keeps a clean left edge and the mark sits in the margin like set type.\n *\n * Component tokens:\n *   --quote-mark-color   default var(--color-accent-text)\n *   --quote-measure      default 28ch (md/lg), 60ch (sm)\n */\n/* Zero-specificity reset, so a surrounding flow (Prose, Stack) or a className can space it. */\n:where(.quote) {\n  margin: 0;\n}\n.quote {\n  --_fs: var(--text-2xl);\n  --_measure: var(--quote-measure, 26ch);\n\n  display: grid;\n  grid-template-columns: 0.62em minmax(0, 1fr);\n  column-gap: 0.12em;\n  row-gap: var(--space-4);\n  font-size: var(--_fs);\n}\n.quote[data-size='sm'] {\n  --_fs: var(--text-lg);\n  --_measure: var(--quote-measure, 60ch);\n  grid-template-columns: 0.75em minmax(0, 1fr);\n  row-gap: var(--space-3);\n}\n.quote[data-size='lg'] {\n  --_fs: var(--text-display-sm);\n  --_measure: var(--quote-measure, 22ch);\n  row-gap: var(--space-5);\n}\n\n.mark {\n  grid-column: 1;\n  grid-row: 1;\n  justify-self: end;\n  color: var(--quote-mark-color, var(--color-accent-text));\n  font-family: var(--font-display);\n  font-weight: var(--display-weight);\n  font-size: 1.9em;\n  line-height: 0.82;\n  user-select: none;\n}\n\n.body {\n  grid-column: 2;\n  grid-row: 1;\n  max-inline-size: var(--_measure);\n  margin: 0;\n  color: var(--color-ink);\n  font-family: var(--font-display);\n  font-weight: var(--display-weight);\n  font-style: var(--display-style);\n  font-stretch: var(--display-stretch);\n  letter-spacing: calc(var(--display-tracking) * 0.6);\n  text-transform: var(--display-transform);\n  line-height: calc(var(--leading-tight) + 0.1);\n  text-wrap: balance;\n}\n.body > * {\n  margin: 0;\n}\n.body > * + * {\n  margin-block-start: 0.5em;\n}\n\n/* Testimonials read as prose: the prose face, sentence case, relaxed leading */\n.quote[data-size='sm'] .body {\n  font-family: var(--font-prose);\n  font-weight: 400;\n  font-style: normal;\n  letter-spacing: 0;\n  text-transform: none;\n  line-height: var(--leading-snug);\n  text-wrap: pretty;\n}\n.quote[data-size='sm'] .mark {\n  font-size: 1.7em;\n  line-height: 0.9;\n}\n\n.cite {\n  grid-column: 2;\n  font-family: var(--font-text);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: var(--label-weight);\n  line-height: var(--leading-snug);\n  color: var(--color-ink);\n}\n/* Anything after the name (role, date) steps down */\n.cite :where(br) + *,\n.cite :where(small, span) {\n  font-weight: 400;\n  color: var(--color-ink-muted);\n}\n"],"mappings":""}

package/dist/components/typography/Quote/index.d.ts

@@ -0,0 +1,2 @@
+export { Quote } from './Quote.js';
+export type { QuoteProps, QuoteSize } from './Quote.js';

package/dist/components/typography/SectionHeader/SectionHeader.d.ts

@@ -0,0 +1,33 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { Responsive } from '../../../utils/responsive.js';
+import { type HeadingLevel, type HeadingSize } from '../Heading/index.js';
+export type SectionHeaderElement = 'div' | 'header';
+export interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** The section or page title. Rendered as a <Heading>. */
+    title: ReactNode;
+    /** Heading level. Default 2 (use 1 for a page header). */
+    level?: HeadingLevel;
+    /** Heading size; defaults from `level`. Responsive. */
+    size?: Responsive<HeadingSize>;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** Buttons or links. Right of the title from `md` up; below it on small screens. */
+    actions?: ReactNode;
+    /**
+     * Small context above the title — only when it tells the reader something
+     * ("2025–26 financial year", "Sprint 2"). Plain muted text, never a tracked-caps eyebrow.
+     */
+    kicker?: ReactNode;
+    /** A hairline under the header. */
+    divider?: boolean;
+    as?: SectionHeaderElement;
+    /** Id for the heading, so a surrounding <section aria-labelledby> can point at it. */
+    titleId?: string;
+}
+/**
+ * The title block for a page or section: optional kicker, heading, description and
+ * actions. Title, kicker and description are grouped in an <hgroup>.
+ *
+ * <SectionHeader title="September invoices" description="$4,182.60 of $5,200 target" actions={<Button>Export CSV</Button>} />
+ */
+export declare const SectionHeader: import("react").ForwardRefExoticComponent<SectionHeaderProps & import("react").RefAttributes<HTMLElement>>;