oneslash-design-system 2.2.0 → 2.4.0

package/README.md

@@ -15,13 +15,13 @@ The package ships Tailwind class names, CSS variables and untranspiled `.jsx`. E
 3. **Tailwind v4:** import `oneslash-design-system/theme.css` (toggle) or `theme-auto.css` (OS), plus `typography.css` if you want the type scale.
 4. **Next.js:** `transpilePackages: ["oneslash-design-system"]` in `next.config`.
 5. **Scan the components:** v3 `content` gets `./node_modules/oneslash-design-system/dist/**/*.{js,jsx}`; v4 CSS gets `@source "../node_modules/oneslash-design-system/dist/**/*.jsx";`.
-6. **Load the fonts:** the package names Inter (`font-inter`) and JetBrains Mono (`font-mono`, for code, identifiers and type names) but does not ship them. Load both under their real family names, for example with one Google Fonts link in `<head>`:
+6. **Load the fonts:** the package names Inter (`font-inter`) and Fira Code (`font-mono`, for code, identifiers and type names; use it with `text-code`, the 14px weight-300 code style) but does not ship them. Load both under their real family names, for example with one Google Fonts link in `<head>`:
 
 ```html
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=JetBrains+Mono:wght@400&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Fira+Code:wght@300;400&display=swap">
 ```
 
-   `next/font/google` registers a hashed family name instead, so with it apply `mono.className` to the code element rather than relying on `font-mono`.
+   Don't load Fira Code with `next/font/google`: it registers a generated family name, so `font-mono` would not find it. If your Content Security Policy blocks Google Fonts, self-host it with `@fontsource/fira-code` (import `latin-300.css` and `latin-400.css` in the root layout), which keeps the real family name.
 
 ```css
 /* Tailwind v4, OS-driven dark mode */
@@ -34,6 +34,22 @@ The package ships Tailwind class names, CSS variables and untranspiled `.jsx`. E
 
 Use class names that mean the same thing in Tailwind v3 and v4 inside components, since apps on both versions compile them.
 
+## Building a page
+
+2.4.0 adds what a page needs on top of the components, so a page can be written with no markup of its own: `PageShell` (the column and the space between sections), `PageHeader`, `SectionIntro`, `FactsRow`, `NumberedRow`, `Surface` (a panel, or a sheet of `paper`), `Figure`, `LinkCard`, `Heading`, `Paragraph`, `List`, and the layout helpers `Stack`, `Cluster`, `Grid` and `PageSection` in `components/layout`. Spacing has steps up to `page` (160px), text widths are `max-w-measure-*`, and the column is `max-w-page`. A Button in a `Stack` stretches to the full width, so put it in a `Cluster`.
+
+```jsx
+import PageShell from 'oneslash-design-system/components/pageShell';
+import { PageSection } from 'oneslash-design-system/components/layout';
+import SectionIntro from 'oneslash-design-system/components/sectionIntro';
+
+<PageShell>
+  <PageSection>
+    <SectionIntro name="Origin" statement="Say the point of the section here." />
+  </PageSection>
+</PageShell>
+```
+
 ## Releasing
 
 Bump `version` in `package.json`, run `npm run build`, and merge to `main`. The Release workflow runs the tests and `npm run check:contrast`, then publishes to npm, creates the tag and GitHub Release with notes from the merged PR titles, and updates the docs site.

package/dist/components/factsRow.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Fact {
+    label: string;
+    value: React.ReactNode;
+}
+interface FactsRowProps {
+    items: Fact[];
+}
+export default function FactsRow({ items }: FactsRowProps): React.JSX.Element;
+export {};

package/dist/components/factsRow.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Line from './line';
+var columns = {
+    3: 'md:grid-cols-3',
+    4: 'md:grid-cols-4',
+    5: 'md:grid-cols-5',
+};
+// The few facts that sit under a title: small labels over small values,
+// under a rule. Two across on a phone, one per fact from the medium breakpoint.
+export default function FactsRow(_a) {
+    var items = _a.items;
+    var md = columns[Math.min(5, Math.max(3, items.length))];
+    return (<div className="flex flex-col gap-medium">
+      <Line />
+      <dl className={"grid grid-cols-2 gap-large text-body2 ".concat(md)}>
+        {items.map(function (_a) {
+            var label = _a.label, value = _a.value;
+            return (<div key={label}>
+            <dt className="text-fg-secondary">{label}</dt>
+            <dd className="text-fg-primary">{value}</dd>
+          </div>);
+        })}
+      </dl>
+    </div>);
+}

package/dist/components/figure.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface FigureProps {
+    /** An image or a video. */
+    children: React.ReactNode;
+    caption?: React.ReactNode;
+    /** Crop what is inside to this width over height, filling the frame. */
+    crop?: number;
+    /** Set it on a sheet of paper that stays light in dark mode, for scans and drawings in black. */
+    paper?: boolean;
+    radius?: 'control' | 'container';
+    className?: string;
+}
+export default function Figure({ children, caption, crop, paper, radius, className, }: FigureProps): React.JSX.Element;
+export {};

package/dist/components/figure.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+var radii = { control: 'rounded-control', container: 'rounded-container' };
+export default function Figure(_a) {
+    var children = _a.children, caption = _a.caption, crop = _a.crop, _b = _a.paper, paper = _b === void 0 ? false : _b, _c = _a.radius, radius = _c === void 0 ? 'container' : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
+    var frame = paper ? "bg-background-paper p-large md:p-xlarge ".concat(radii[radius]) : "overflow-hidden ".concat(radii[radius]);
+    return (<figure className={"flex flex-col gap-medium ".concat(className)}>
+      {crop ? (<div className={"relative overflow-hidden ".concat(radii[radius], " [&_img]:absolute [&_img]:inset-0 [&_img]:h-full [&_img]:w-full [&_img]:object-cover")} style={{ aspectRatio: crop }}>
+          {children}
+        </div>) : (<div className={frame}>{children}</div>)}
+      {caption && <figcaption className="text-body2 text-fg-secondary">{caption}</figcaption>}
+    </figure>);
+}

package/dist/components/heading.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface HeadingProps {
+    children: React.ReactNode;
+    /** The element: h2 to h4. Pick the one that fits the page's outline, not the size. */
+    level?: 2 | 3 | 4;
+    /** How large it is set. */
+    size?: 'h4' | 'h5' | 'h6' | 'subtitle1';
+    id?: string;
+    className?: string;
+}
+export default function Heading({ children, level, size, id, className }: HeadingProps): React.JSX.Element;
+export {};

package/dist/components/heading.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+var sizes = {
+    h4: 'text-h4',
+    h5: 'text-h5',
+    h6: 'text-h6',
+    subtitle1: 'text-subtitle1',
+};
+export default function Heading(_a) {
+    var children = _a.children, _b = _a.level, level = _b === void 0 ? 3 : _b, _c = _a.size, size = _c === void 0 ? 'h6' : _c, id = _a.id, _d = _a.className, className = _d === void 0 ? '' : _d;
+    var Tag = "h".concat(level);
+    return (<Tag id={id} className={"".concat(sizes[size], " text-fg-primary ").concat(className)}>
+      {children}
+    </Tag>);
+}

package/dist/components/layout.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+type Gap = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'huge' | 'giant';
+interface LayoutProps {
+    children: React.ReactNode;
+    gap?: Gap;
+    className?: string;
+}
+interface StackProps extends LayoutProps {
+    /** `stretch` gives every child the full width, which suits panels. `start` lets a child keep its own width, which a Button needs. */
+    align?: 'stretch' | 'start';
+}
+export declare function Stack({ children, gap, align, className }: StackProps): React.JSX.Element;
+export declare function Cluster({ children, gap, className }: LayoutProps): React.JSX.Element;
+interface GridProps extends LayoutProps {
+    /** How many columns from the medium breakpoint up. Below it: two for `compact`, otherwise one. */
+    columns?: 2 | 3 | 4;
+    compact?: boolean;
+    /** `stretch` makes the items in a row the same height; `start` lets each keep its own. */
+    align?: 'stretch' | 'start';
+}
+export declare function Grid({ children, columns, compact, align, gap, className }: GridProps): React.JSX.Element;
+export declare function PageSection({ children, gap, className }: LayoutProps): React.JSX.Element;
+export {};

package/dist/components/layout.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+var gaps = {
+    small: 'gap-small',
+    medium: 'gap-medium',
+    large: 'gap-large',
+    xlarge: 'gap-xlarge',
+    xxlarge: 'gap-xxlarge',
+    huge: 'gap-huge',
+    giant: 'gap-giant',
+};
+// One column of things, a spacing token apart.
+export function Stack(_a) {
+    var children = _a.children, _b = _a.gap, gap = _b === void 0 ? 'large' : _b, _c = _a.align, align = _c === void 0 ? 'stretch' : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
+    return <div className={"flex flex-col ".concat(align === 'start' ? 'items-start' : '', " ").concat(gaps[gap], " ").concat(className)}>{children}</div>;
+}
+// Things that sit in a row and wrap, a spacing token apart.
+export function Cluster(_a) {
+    var children = _a.children, _b = _a.gap, gap = _b === void 0 ? 'medium' : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
+    return <div className={"flex flex-wrap items-center ".concat(gaps[gap], " ").concat(className)}>{children}</div>;
+}
+var mdColumns = { 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-4' };
+export function Grid(_a) {
+    var children = _a.children, _b = _a.columns, columns = _b === void 0 ? 2 : _b, _c = _a.compact, compact = _c === void 0 ? false : _c, _d = _a.align, align = _d === void 0 ? 'stretch' : _d, _e = _a.gap, gap = _e === void 0 ? 'large' : _e, _f = _a.className, className = _f === void 0 ? '' : _f;
+    return (<div className={"grid ".concat(compact ? 'grid-cols-2' : 'grid-cols-1', " ").concat(mdColumns[columns], " ").concat(align === 'start' ? 'items-start' : '', " ").concat(gaps[gap], " ").concat(className)}>
+      {children}
+    </div>);
+}
+// A section of a page: a column of its parts. The first child is usually a SectionIntro.
+// Children take the full width; put a Button in a Cluster so it keeps its own.
+export function PageSection(_a) {
+    var children = _a.children, _b = _a.gap, gap = _b === void 0 ? 'huge' : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
+    return <section className={"flex flex-col ".concat(gaps[gap], " ").concat(className)}>{children}</section>;
+}

package/dist/components/linkCard.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface LinkCardProps {
+    href: string;
+    title: string;
+    /** A small line under the title, in the mono face. */
+    caption?: string;
+    className?: string;
+}
+export default function LinkCard({ href, title, caption, className }: LinkCardProps): React.JSX.Element;
+export {};

package/dist/components/linkCard.jsx

@@ -0,0 +1,16 @@
+'use client';
+import React from 'react';
+import NextLink from 'next/link';
+import Icon from './icon';
+import { focusRing } from './sharedStyles';
+// A link set as a card: the title, a caption, and an arrow that moves off the corner.
+export default function LinkCard(_a) {
+    var href = _a.href, title = _a.title, caption = _a.caption, _b = _a.className, className = _b === void 0 ? '' : _b;
+    return (<NextLink href={href} className={"group flex items-center justify-between gap-xxlarge rounded-container bg-background-panel p-large transition-colors hover:bg-background-accent200 motion-reduce:transition-none ".concat(focusRing, " ").concat(className)}>
+      <span className="flex flex-col gap-small">
+        <span className="text-subtitle1 text-fg-primary">{title}</span>
+        {caption && <span className="font-mono text-caption text-fg-secondary">{caption}</span>}
+      </span>
+      <Icon name="ArrowUpRight" size="small" color="secondary" className="shrink-0 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 motion-reduce:transition-none"/>
+    </NextLink>);
+}

package/dist/components/list.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ListProps {
+    items: React.ReactNode[];
+    size?: 'body1' | 'body2';
+    tone?: 'primary' | 'secondary';
+    className?: string;
+}
+export default function List({ items, size, tone, className }: ListProps): React.JSX.Element;
+export {};

package/dist/components/list.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+var sizes = { body1: 'text-body1', body2: 'text-body2' };
+var tones = { primary: 'text-fg-primary', secondary: 'text-fg-secondary' };
+// A plain list, one line of text per item, a little apart.
+export default function List(_a) {
+    var items = _a.items, _b = _a.size, size = _b === void 0 ? 'body2' : _b, _c = _a.tone, tone = _c === void 0 ? 'primary' : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
+    return (<ul className={"flex flex-col gap-medium ".concat(sizes[size], " ").concat(tones[tone], " ").concat(className)}>
+      {items.map(function (item, i) { return (<li key={i}>{item}</li>); })}
+    </ul>);
+}

package/dist/components/numberedRow.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface NumberedRowProps {
+    /** Starts at 0; shown as 01, 02. */
+    index: number;
+    title: string;
+    /** What the row says: paragraphs, links. */
+    children?: React.ReactNode;
+    /** One line with a check, for what the row comes to. */
+    proof?: string;
+    /** What the row is about, shown beside it on wide windows and under it otherwise. */
+    visual?: React.ReactNode;
+}
+export default function NumberedRow({ index, title, children, proof, visual }: NumberedRowProps): React.JSX.Element;
+export {};

package/dist/components/numberedRow.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Icon from './icon';
+import Surface from './surface';
+// A numbered row with the thing it is about beside it. From the 2xl breakpoint
+// the two sit side by side and swap sides each row; below it the visual sits
+// under the text. A row with nothing to show is text alone.
+export default function NumberedRow(_a) {
+    var index = _a.index, title = _a.title, children = _a.children, proof = _a.proof, visual = _a.visual;
+    return (<article className={"grid grid-cols-1 items-center gap-xxlarge ".concat(visual ? '2xl:grid-cols-2 2xl:gap-giant' : '')}>
+      <div className={"flex flex-col gap-large ".concat(visual && index % 2 === 1 ? '2xl:order-2' : '')}>
+        <span className="font-mono text-body2 text-fg-secondary">{String(index + 1).padStart(2, '0')}</span>
+        <h3 className="text-h5 text-fg-primary md:text-h4">{title}</h3>
+        {children && (<div className="flex max-w-measure-body flex-col gap-large text-body1 text-fg-secondary">{children}</div>)}
+        {proof && (<p className="flex items-start gap-medium text-body2 text-fg-primary">
+            <Icon name="Check" size="small" color="success" className="mt-0.5 shrink-0"/>
+            {proof}
+          </p>)}
+      </div>
+      {visual && (<Surface align="center" minHeight="tall" padding="medium">
+          {visual}
+        </Surface>)}
+    </article>);
+}

package/dist/components/pageHeader.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface PageHeaderProps {
+    /** A small line over the title: where this page sits. */
+    eyebrow?: string;
+    title: string;
+    lede?: React.ReactNode;
+    facts?: {
+        label: string;
+        value: React.ReactNode;
+    }[];
+}
+export default function PageHeader({ eyebrow, title, lede, facts }: PageHeaderProps): React.JSX.Element;
+export {};

package/dist/components/pageHeader.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import FactsRow from './factsRow';
+import Paragraph from './paragraph';
+export default function PageHeader(_a) {
+    var eyebrow = _a.eyebrow, title = _a.title, lede = _a.lede, facts = _a.facts;
+    return (<div className="flex flex-col gap-huge">
+      <div className="flex flex-col gap-large">
+        {eyebrow && (<Paragraph tone="secondary" size="body2" measure="none">
+            {eyebrow}
+          </Paragraph>)}
+        <h1 className="text-h3 text-fg-primary md:text-h2">{title}</h1>
+        {lede && (<Paragraph tone="secondary" measure="lede">
+            {lede}
+          </Paragraph>)}
+      </div>
+      {facts && <FactsRow items={facts}/>}
+    </div>);
+}

package/dist/components/pageShell.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PageShellProps extends React.ComponentPropsWithoutRef<'main'> {
+    children: React.ReactNode;
+    /** Let the column grow from the 2xl breakpoint, for pages with wide figures. */
+    wide?: boolean;
+}
+export default function PageShell({ children, wide, className, ...rest }: PageShellProps): React.JSX.Element;
+export {};

package/dist/components/pageShell.jsx

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+// The frame of a page: the column, its side space, and the space between sections.
+// Anything else given (data-* attributes, an id) goes to the <main>.
+export default function PageShell(_a) {
+    var children = _a.children, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? '' : _c, rest = __rest(_a, ["children", "wide", "className"]);
+    return (<main className={"min-h-screen ".concat(className)} {...rest}>
+      <div className={"mx-auto flex w-full max-w-page flex-col gap-section px-xlarge pb-page pt-giant md:px-xxlarge ".concat(wide ? '2xl:max-w-page-wide' : '')}>
+        {children}
+      </div>
+    </main>);
+}

package/dist/components/paragraph.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface ParagraphProps {
+    children: React.ReactNode;
+    tone?: 'primary' | 'secondary';
+    size?: 'body1' | 'body2' | 'caption';
+    /** How wide a line may run, so a paragraph stays readable. `none` leaves it to the parent. */
+    measure?: 'narrow' | 'lede' | 'body' | 'wide' | 'none';
+    /** Set in the mono face, for labels, numbers and dates. */
+    mono?: boolean;
+    className?: string;
+}
+export default function Paragraph({ children, tone, size, measure, mono, className, }: ParagraphProps): React.JSX.Element;
+export {};

package/dist/components/paragraph.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+var tones = { primary: 'text-fg-primary', secondary: 'text-fg-secondary' };
+var sizes = { body1: 'text-body1', body2: 'text-body2', caption: 'text-caption' };
+var measures = {
+    narrow: 'max-w-measure-narrow',
+    lede: 'max-w-measure-lede',
+    body: 'max-w-measure-body',
+    wide: 'max-w-measure-wide',
+    none: '',
+};
+export default function Paragraph(_a) {
+    var children = _a.children, _b = _a.tone, tone = _b === void 0 ? 'primary' : _b, _c = _a.size, size = _c === void 0 ? 'body1' : _c, _d = _a.measure, measure = _d === void 0 ? 'body' : _d, _e = _a.mono, mono = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? '' : _f;
+    return (<p className={"".concat(sizes[size], " ").concat(tones[tone], " ").concat(measures[measure], " ").concat(mono ? 'font-mono' : '', " ").concat(className)}>
+      {children}
+    </p>);
+}

package/dist/components/sectionIntro.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare function headingId(text: string): string | undefined;
+interface SectionIntroProps {
+    /** The section's name. It is the heading, so a contents list shows it. */
+    name: string;
+    /** The point the section makes, set large under the name. */
+    statement?: string;
+    /** What carries on from the statement, usually paragraphs. */
+    children?: React.ReactNode;
+    id?: string;
+}
+export default function SectionIntro({ name, statement, children, id }: SectionIntroProps): React.JSX.Element;
+export {};

package/dist/components/sectionIntro.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+// The id a section heading carries, made from its own text, so every section
+// has a link (/about#design-philosophy) without each page naming one.
+// Built at run time: the tsconfig targets ES5, which has no \p{...} in a literal.
+var NOT_A_LETTER_OR_NUMBER = new RegExp('[^\\p{L}\\p{N}]+', 'gu');
+export function headingId(text) {
+    var id = text
+        .toLowerCase()
+        .replace(NOT_A_LETTER_OR_NUMBER, '-')
+        .replace(/^-|-$/g, '');
+    return id || undefined;
+}
+export default function SectionIntro(_a) {
+    var name = _a.name, statement = _a.statement, children = _a.children, id = _a.id;
+    return (<div className="flex max-w-measure-statement flex-col gap-large">
+      <h2 id={id !== null && id !== void 0 ? id : headingId(name)} className="scroll-mt-giant text-body2 font-normal text-fg-secondary">
+        {name}
+      </h2>
+      {statement && <p className="text-h4 text-fg-primary md:text-h3">{statement}</p>}
+      {children}
+    </div>);
+}

package/dist/components/surface.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface SurfaceProps {
+    children: React.ReactNode;
+    /** `panel` is the quiet surface content sits on; `paper` stays light in dark mode, for scans and drawings in black. */
+    tone?: 'panel' | 'paper';
+    padding?: 'small' | 'medium' | 'large' | 'xlarge';
+    /** The least height it takes: `short` is 20rem, `tall` is 26rem from the medium breakpoint up. */
+    minHeight?: 'short' | 'tall';
+    /** `center` centers what is inside, both ways. `start` lays it out as it comes. */
+    align?: 'center' | 'start';
+    className?: string;
+}
+export default function Surface({ children, tone, padding, minHeight, align, className, }: SurfaceProps): React.JSX.Element;
+export {};

package/dist/components/surface.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+var tones = { panel: 'bg-background-panel', paper: 'bg-background-paper' };
+var paddings = {
+    small: 'p-medium md:p-large',
+    medium: 'p-large md:p-xxlarge',
+    large: 'p-xlarge md:p-xxlarge',
+    xlarge: 'p-xlarge md:p-huge',
+};
+var heights = {
+    short: 'min-h-[var(--os-stage-short)]',
+    tall: 'min-h-[var(--os-stage-short)] md:min-h-[var(--os-stage-tall)]',
+};
+export default function Surface(_a) {
+    var children = _a.children, _b = _a.tone, tone = _b === void 0 ? 'panel' : _b, _c = _a.padding, padding = _c === void 0 ? 'large' : _c, minHeight = _a.minHeight, _d = _a.align, align = _d === void 0 ? 'start' : _d, _e = _a.className, className = _e === void 0 ? '' : _e;
+    var alignClasses = align === 'center' ? 'flex items-center justify-center overflow-hidden' : '';
+    return (<div className={"rounded-container ".concat(tones[tone], " ").concat(paddings[padding], " ").concat(minHeight ? heights[minHeight] : '', " ").concat(alignClasses, " ").concat(className)}>
+      {children}
+    </div>);
+}

package/dist/designTokens.d.ts

@@ -97,6 +97,8 @@ declare const defaultSets: {
         background: {
             elevated: string;
             overlay: string;
+            panel: string;
+            paper: string;
             default: string;
             accent100: string;
             accent200: string;
@@ -249,6 +251,8 @@ declare const defaultSets: {
         background: {
             elevated: string;
             overlay: string;
+            panel: string;
+            paper: string;
             default: string;
             accent100: string;
             accent200: string;
@@ -403,6 +407,8 @@ declare const forestSets: {
         background: {
             elevated: string;
             overlay: string;
+            panel: string;
+            paper: string;
             default: string;
             accent100: string;
             accent200: string;
@@ -555,6 +561,8 @@ declare const forestSets: {
         background: {
             elevated: string;
             overlay: string;
+            panel: string;
+            paper: string;
             default: string;
             accent100: string;
             accent200: string;
@@ -712,6 +720,8 @@ export declare namespace themes {
             background: {
                 elevated: string;
                 overlay: string;
+                panel: string;
+                paper: string;
                 default: string;
                 accent100: string;
                 accent200: string;
@@ -864,6 +874,8 @@ export declare namespace themes {
             background: {
                 elevated: string;
                 overlay: string;
+                panel: string;
+                paper: string;
                 default: string;
                 accent100: string;
                 accent200: string;
@@ -1018,6 +1030,8 @@ export declare namespace themes {
             background: {
                 elevated: string;
                 overlay: string;
+                panel: string;
+                paper: string;
                 default: string;
                 accent100: string;
                 accent200: string;
@@ -1170,6 +1184,8 @@ export declare namespace themes {
             background: {
                 elevated: string;
                 overlay: string;
+                panel: string;
+                paper: string;
                 default: string;
                 accent100: string;
                 accent200: string;
@@ -1324,6 +1340,8 @@ export declare namespace themes {
             background: {
                 elevated: string;
                 overlay: string;
+                panel: string;
+                paper: string;
                 default: string;
                 accent100: string;
                 accent200: string;
@@ -1476,6 +1494,8 @@ export declare namespace themes {
             background: {
                 elevated: string;
                 overlay: string;
+                panel: string;
+                paper: string;
                 default: string;
                 accent100: string;
                 accent200: string;
@@ -1536,6 +1556,27 @@ export declare namespace spacing {
     let small: string;
     let medium: string;
     let large: string;
+    let xlarge: string;
+    let xxlarge: string;
+    let huge: string;
+    let giant: string;
+    let section: string;
+    let page: string;
+}
+export declare namespace measure {
+    let narrow: string;
+    let lede: string;
+    let statement: string;
+    let body: string;
+    let wide: string;
+}
+export declare let container: {
+    page: string;
+    'page-wide': string;
+};
+export declare namespace stage {
+    let short: string;
+    let tall: string;
 }
 export declare namespace typography {
     let family: string;
@@ -1646,6 +1687,16 @@ export declare namespace typography {
         let letterSpacing_10: string;
         export { letterSpacing_10 as letterSpacing };
     }
+    namespace code {
+        let weight_11: string;
+        export { weight_11 as weight };
+        let size_11: string;
+        export { size_11 as size };
+        let lineHeight_11: string;
+        export { lineHeight_11 as lineHeight };
+        let letterSpacing_11: string;
+        export { letterSpacing_11 as letterSpacing };
+    }
     namespace alignments {
         let left: string;
         let center: string;
@@ -1654,10 +1705,11 @@ export declare namespace typography {
     }
 }
 export declare namespace radius {
-    let inline: string;
-    let control: string;
-    let container: string;
-    let full: string;
+    export let inline: string;
+    export let control: string;
+    let container_1: string;
+    export { container_1 as container };
+    export let full: string;
 }
 export declare namespace shadow {
     let overlay: string;