@krelborn/stylesui 0.0.0-stage → 0.8.1

package/dist/components/Code/Code.css

@@ -0,0 +1 @@
+.sui-code-arLxg{padding:0 var(--sui-space-1,.25rem);border-radius:var(--sui-radius-sm,2px);background-color:var(--sui-color-sunken,#f3f4f6);color:var(--sui-color-text,#111827);font-family:var(--sui-font-mono,ui-monospace, SFMono-Regular, Menlo, monospace);overflow-wrap:anywhere;font-size:.875em}

package/dist/components/Code/Code.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `Code`: every native `code` prop
+ */
+export type CodeProps = Omit<BoxProps<"code">, "as">;
+/**
+ * Inline code, such as a command, a file name or a value, in the theme's monospace font on the sunken colour
+ *
+ * @example
+ * <Text as="p">Run <Code>pnpm install</Code> first.</Text>
+ */
+export declare function Code({ className, ...rest }: CodeProps): JSX.Element;

package/dist/components/Code/Code.js

@@ -0,0 +1,20 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./Code.module.js";
+import { clsx as n } from "clsx";
+import { c as r } from "react/compiler-runtime";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/Code/Code.tsx
+function a(a) {
+	let o = r(8), s, c;
+	o[0] === a ? (s = o[1], c = o[2]) : ({className: s, ...c} = a, o[0] = a, o[1] = s, o[2] = c);
+	let l;
+	o[3] === s ? l = o[4] : (l = n(t.code, s), o[3] = s, o[4] = l);
+	let u;
+	return o[5] !== c || o[6] !== l ? (u = /* @__PURE__ */ i(e, {
+		...c,
+		as: "code",
+		className: l
+	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
+}
+//#endregion
+export { a as Code };

package/dist/components/Code/Code.module.js

@@ -0,0 +1,4 @@
+import './Code.css';//#region src/components/Code/Code.module.css
+var e = "sui-code-arLxg", t = { code: e };
+//#endregion
+export { e as code, t as default };

package/dist/components/Code/index.d.ts

@@ -0,0 +1,2 @@
+export { Code } from "./Code";
+export type { CodeProps } from "./Code";

package/dist/components/Counter/Counter.css

@@ -0,0 +1 @@
+.sui-counter-ESMMm[data-variant]{min-block-size:1.25rem;min-inline-size:1.25rem;padding:0 var(--sui-space-1,.25rem);border-radius:var(--sui-radius-full,9999px);font-variant-numeric:tabular-nums;white-space:nowrap;justify-content:center;line-height:1}

package/dist/components/Counter/Counter.d.ts

@@ -0,0 +1,39 @@
+import type { JSX } from "react";
+import type { BadgeTone, BadgeVariant } from "../Badge";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `Counter`: its own props plus every `span` prop except `children`
+ */
+export interface CounterProps extends Omit<BoxProps<"span">, "as" | "children" | "dangerouslySetInnerHTML"> {
+    /**
+     * Whether the count is only a lower bound, which adds "+" after it, as in "30+". Defaults to `false`.
+     */
+    capped?: boolean;
+    /**
+     * The number shown. Below 1 the counter renders nothing.
+     */
+    count: number;
+    /**
+     * Words screen readers read after the count, hidden on screen, so that "3" reads as "3 new"
+     */
+    hiddenSuffix?: string;
+    /**
+     * The largest count shown, at least 1. A count above it shows as the maximum followed by "+", as in "99+".
+     */
+    max?: number;
+    /**
+     * Colour, from Badge's tones. Defaults to `neutral`.
+     */
+    tone?: BadgeTone;
+    /**
+     * Style, from Badge's variants. Defaults to `subtle`.
+     */
+    variant?: BadgeVariant;
+}
+/**
+ * A small pill showing a count, such as the unread items in a list. It renders nothing for a count below 1.
+ *
+ * @example
+ * <Counter count={unread} hiddenSuffix="unread" max={99} tone="primary" variant="solid" />
+ */
+export declare function Counter({ capped, className, count, hiddenSuffix, max, tone, variant, ...rest }: CounterProps): JSX.Element | null;

package/dist/components/Counter/Counter.js

@@ -0,0 +1,19 @@
+import { VisuallyHidden as e } from "../VisuallyHidden/VisuallyHidden.js";
+import { Badge as t } from "../Badge/Badge.js";
+import n from "./Counter.module.js";
+import { clsx as r } from "clsx";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/Counter/Counter.tsx
+function o({ capped: o = !1, className: s, count: c, hiddenSuffix: l, max: u, tone: d = "neutral", variant: f = "subtle", ...p }) {
+	if (!(c >= 1)) return null;
+	let m = u !== void 0 && c > u, h = m ? u : c;
+	return /* @__PURE__ */ a(t, {
+		...p,
+		className: r(n.counter, s),
+		tone: d,
+		variant: f,
+		children: [m || o ? `${h}+` : h, l !== void 0 && /* @__PURE__ */ i(e, { children: ` ${l}` })]
+	});
+}
+//#endregion
+export { o as Counter };

package/dist/components/Counter/Counter.module.js

@@ -0,0 +1,4 @@
+import './Counter.css';//#region src/components/Counter/Counter.module.css
+var e = "sui-counter-ESMMm", t = { counter: e };
+//#endregion
+export { e as counter, t as default };

package/dist/components/Counter/index.d.ts

@@ -0,0 +1,2 @@
+export { Counter } from "./Counter";
+export type { CounterProps } from "./Counter";

package/dist/components/Cover/Cover.css

@@ -0,0 +1 @@
+.sui-cover-qYwGB{gap:var(--sui-cover-gap);min-block-size:var(--sui-cover-minimum-height);padding:var(--sui-cover-padding);flex-direction:column;display:flex}.sui-principal-tixG4{margin-block:auto}

package/dist/components/Cover/Cover.d.ts

@@ -0,0 +1,40 @@
+import type { JSX, ReactNode } from "react";
+import type { Space } from "../../layout";
+import type { BoxElement, BoxProps } from "../Box";
+interface CoverOwnProps {
+    /**
+     * Content pinned to the bottom of the cover
+     */
+    bottom?: ReactNode;
+    /**
+     * Minimum space between the top, centred and bottom content. Defaults to `4`.
+     */
+    gap?: Space;
+    /**
+     * Minimum height of the cover, as a CSS length. Defaults to `100dvh`.
+     */
+    minimumHeight?: string;
+    /**
+     * Space inside the cover's edges. Defaults to `4`.
+     */
+    padding?: Space;
+    /**
+     * Content pinned to the top of the cover
+     */
+    top?: ReactNode;
+}
+/**
+ * Props for `Cover`: its own props plus every prop supported by the element given in `as`
+ */
+export type CoverProps<E extends BoxElement = "div"> = CoverOwnProps & Omit<BoxProps<E>, keyof CoverOwnProps>;
+/**
+ * Minimum-height area that vertically centres its children, with optional content pinned above
+ * and below. The children render inside a `div`.
+ *
+ * @example
+ * <Cover as="section" minimumHeight="60vh" top={<Text>Featured</Text>} aria-label="Welcome">
+ *   <Heading level={1}>Notes on layout</Heading>
+ * </Cover>
+ */
+export declare function Cover<E extends BoxElement = "div">({ as, bottom, className, gap, minimumHeight, padding, top, ...rest }: CoverProps<E>): JSX.Element;
+export {};

package/dist/components/Cover/Cover.js

@@ -0,0 +1,30 @@
+import { Box as e } from "../Box/Box.js";
+import { spaceValue as t } from "../../layout/spaceValue.js";
+import { withCustomProperties as n } from "../../layout/withCustomProperties.js";
+import r from "./Cover.module.js";
+import { clsx as i } from "clsx";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/Cover/Cover.tsx
+function s({ as: s, bottom: c, className: l, gap: u = 4, minimumHeight: d = "100dvh", padding: f = 4, top: p, ...m }) {
+	let { children: h, style: g, ..._ } = m;
+	return /* @__PURE__ */ o(e, {
+		..._,
+		as: s,
+		className: i(r.cover, l),
+		style: n({
+			"--sui-cover-gap": t(u),
+			"--sui-cover-minimum-height": d,
+			"--sui-cover-padding": t(f)
+		}, g),
+		children: [
+			p,
+			/* @__PURE__ */ a("div", {
+				className: r.principal,
+				children: h
+			}),
+			c
+		]
+	});
+}
+//#endregion
+export { s as Cover };

package/dist/components/Cover/Cover.module.js

@@ -0,0 +1,7 @@
+import './Cover.css';//#region src/components/Cover/Cover.module.css
+var e = "sui-cover-qYwGB", t = "sui-principal-tixG4", n = {
+	cover: e,
+	principal: t
+};
+//#endregion
+export { e as cover, n as default, t as principal };

package/dist/components/Cover/index.d.ts

@@ -0,0 +1,2 @@
+export { Cover } from "./Cover";
+export type { CoverProps } from "./Cover";

package/dist/components/Divider/Divider.css

@@ -0,0 +1 @@
+.sui-divider-KSGsi{--sui-divider-color:var(--sui-color-border,#d1d5db);--sui-divider-width:var(--sui-border-width,1px);border:0;margin:0}.sui-divider-KSGsi[data-orientation=horizontal]{border-block-start:var(--sui-divider-width) solid var(--sui-divider-color);inline-size:100%}.sui-divider-KSGsi[data-orientation=vertical]{border-inline-start:var(--sui-divider-width) solid var(--sui-divider-color);align-self:stretch;inline-size:0}

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,25 @@
+import type { JSX } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Direction a divider runs: `horizontal` between stacked content, `vertical` between items in a row
+ */
+export type DividerOrientation = "horizontal" | "vertical";
+/**
+ * Props for `Divider`: its own props plus every native hr prop
+ */
+export interface DividerProps extends Omit<BoxProps<"hr">, "as" | "children" | "dangerouslySetInnerHTML"> {
+    /**
+     * Direction the divider runs. A vertical divider needs a flex row to stretch. Defaults to `horizontal`.
+     */
+    orientation?: DividerOrientation;
+}
+/**
+ * Thin rule that separates content, exposed to assistive technology as a separator
+ *
+ * The rule is decorative and its colour is not held to 3:1 contrast. Where it is the only visible sign of a break,
+ * set `--sui-divider-color: var(--sui-color-input-border)`.
+ *
+ * @example
+ * <Divider />
+ */
+export declare function Divider({ className, orientation, ...rest }: DividerProps): JSX.Element;

package/dist/components/Divider/Divider.js

@@ -0,0 +1,16 @@
+import { Box as e } from "../Box/Box.js";
+import t from "./Divider.module.js";
+import { clsx as n } from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Divider/Divider.tsx
+function i({ className: i, orientation: a = "horizontal", ...o }) {
+	return /* @__PURE__ */ r(e, {
+		...o,
+		as: "hr",
+		className: n(t.divider, i),
+		"aria-orientation": a === "vertical" ? "vertical" : void 0,
+		"data-orientation": a
+	});
+}
+//#endregion
+export { i as Divider };

package/dist/components/Divider/Divider.module.js

@@ -0,0 +1,4 @@
+import './Divider.css';//#region src/components/Divider/Divider.module.css
+var e = "sui-divider-KSGsi", t = { divider: e };
+//#endregion
+export { t as default, e as divider };

package/dist/components/Divider/index.d.ts

@@ -0,0 +1,2 @@
+export { Divider } from "./Divider";
+export type { DividerOrientation, DividerProps } from "./Divider";

package/dist/components/Field/Field.css

@@ -0,0 +1 @@
+.sui-field-m7I4B{--sui-field-gap:var(--sui-space-1,.25rem);gap:var(--sui-field-gap);font-family:var(--sui-font-body,system-ui, sans-serif);line-height:var(--sui-line-height-normal,1.5);flex-direction:column;display:flex}.sui-label-LAQio{font-weight:var(--sui-font-weight-control,500)}.sui-field-m7I4B[data-disabled] .sui-label-LAQio,fieldset:disabled .sui-label-LAQio{opacity:.5}.sui-description-yqljW{color:var(--sui-color-text-muted,#4b5563);font-size:var(--sui-font-size-sm,.875rem)}.sui-error-m0uol{color:var(--sui-color-danger-text,#b91c1c);font-size:var(--sui-font-size-sm,.875rem)}

package/dist/components/Field/Field.d.ts

@@ -0,0 +1,49 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Elements a `Field` can render: block containers that can hold its label, description, control and error
+ */
+export type FieldElement = "div" | "li" | "section";
+interface FieldOwnProps {
+    /**
+     * `id` of the control, which the label points at. Wins over an `id` set on the control. Defaults to a
+     * generated id.
+     */
+    controlId?: string;
+    /**
+     * Supporting text shown between the label and the control, linked to the control with `aria-describedby`
+     */
+    description?: ReactNode;
+    /**
+     * Disables the control and dims the label. Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Error message shown below the control. Marks the control `aria-invalid` and is linked to it with
+     * `aria-describedby`. It is not a live region.
+     */
+    error?: ReactNode;
+    /**
+     * Label for the control. Omit only for a control that labels itself.
+     */
+    label?: ReactNode;
+    /**
+     * Sets `required` on the control and adds an `aria-hidden` asterisk to the label. Defaults to `false`.
+     */
+    required?: boolean;
+}
+/**
+ * Props for `Field`: its own props plus every prop supported by the element given in `as`
+ */
+export type FieldProps<E extends FieldElement = "div"> = FieldOwnProps & Omit<BoxProps<E>, keyof FieldOwnProps>;
+/**
+ * Wraps one form control with a label, a description and an error message, and links them to the control so the
+ * label and error association is written once. Renders the label, description, control and error in that order.
+ *
+ * @example
+ * <Field description="We only use it to send receipts" label="Email" required={true}>
+ *   <TextInput />
+ * </Field>
+ */
+export declare function Field<E extends FieldElement = "div">({ as, className, controlId, description, disabled, error, label, required, ...rest }: FieldProps<E>): JSX.Element;
+export {};

package/dist/components/Field/Field.js

@@ -0,0 +1,48 @@
+import { FieldContext as e } from "../../forms/FieldContext.js";
+import { hasContent as t } from "../../forms/hasContent.js";
+import { Box as n } from "../Box/Box.js";
+import { RequiredIndicator as r } from "../RequiredIndicator/RequiredIndicator.js";
+import i from "./Field.module.js";
+import { clsx as a } from "clsx";
+import { useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/Field/Field.tsx
+function l({ as: l, className: u, controlId: d, description: f, disabled: p = !1, error: m, label: h, required: g = !1, ..._ }) {
+	let { children: v, ...y } = _, b = o(), x = `${b}-description`, S = `${b}-error`, C = t(f), w = t(m), T = [C && x, w && S].filter(Boolean).join(" "), E = {
+		controlId: d ?? b,
+		describedBy: T === "" ? void 0 : T,
+		disabled: p,
+		invalid: w,
+		required: g
+	};
+	return /* @__PURE__ */ c(n, {
+		...y,
+		as: l,
+		className: a(i.field, u),
+		"data-disabled": p ? "" : void 0,
+		children: [
+			t(h) && /* @__PURE__ */ c(n, {
+				as: "label",
+				className: i.label,
+				htmlFor: E.controlId,
+				children: [h, g && /* @__PURE__ */ s(r, {})]
+			}),
+			C && /* @__PURE__ */ s(n, {
+				className: i.description,
+				id: x,
+				children: f
+			}),
+			/* @__PURE__ */ s(e.Provider, {
+				value: E,
+				children: v
+			}),
+			w && /* @__PURE__ */ s(n, {
+				className: i.error,
+				id: S,
+				children: m
+			})
+		]
+	});
+}
+//#endregion
+export { l as Field };

package/dist/components/Field/Field.module.js

@@ -0,0 +1,9 @@
+import './Field.css';//#region src/components/Field/Field.module.css
+var e = "sui-field-m7I4B", t = "sui-label-LAQio", n = "sui-description-yqljW", r = "sui-error-m0uol", i = {
+	field: e,
+	label: t,
+	description: n,
+	error: r
+};
+//#endregion
+export { i as default, n as description, r as error, e as field, t as label };

package/dist/components/Field/index.d.ts

@@ -0,0 +1,2 @@
+export { Field } from "./Field";
+export type { FieldElement, FieldProps } from "./Field";

package/dist/components/Fieldset/Fieldset.css

@@ -0,0 +1 @@
+.sui-fieldset-XI428{--sui-fieldset-gap:var(--sui-space-1,.25rem);gap:var(--sui-fieldset-gap);min-inline-size:0;font-family:var(--sui-font-body,system-ui, sans-serif);line-height:var(--sui-line-height-normal,1.5);border:0;flex-direction:column;padding:0;display:flex}.sui-legend-u9wBt{font-weight:var(--sui-font-weight-control,500);margin-block-end:var(--sui-fieldset-gap);padding:0}.sui-fieldset-XI428:disabled .sui-legend-u9wBt{opacity:.5}.sui-description-KGes-{color:var(--sui-color-text-muted,#4b5563);font-size:var(--sui-font-size-sm,.875rem)}.sui-error-Dionz{color:var(--sui-color-danger-text,#b91c1c);font-size:var(--sui-font-size-sm,.875rem)}

package/dist/components/Fieldset/Fieldset.d.ts

@@ -0,0 +1,35 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `Fieldset`: its own props plus every native fieldset prop
+ */
+export interface FieldsetProps extends Omit<BoxProps<"fieldset">, "aria-labelledby" | "as"> {
+    /**
+     * Not accepted: the `label` always names the group
+     */
+    "aria-labelledby"?: never;
+    /**
+     * Supporting text shown below the label, linked to the group with `aria-describedby`
+     */
+    description?: ReactNode;
+    /**
+     * Error message shown below the controls, linked to the group with `aria-describedby`. It is not a live region.
+     */
+    error?: ReactNode;
+    /**
+     * Label for the group, rendered as its `legend`, which names the group
+     */
+    label: ReactNode;
+}
+/**
+ * Groups related form controls under a legend, with an optional description and error for the group. The
+ * native `disabled` prop disables every control inside and dims the legend. Controls inside do not take the
+ * state of a surrounding `Field`.
+ *
+ * @example
+ * <Fieldset description="Choose how we reach you" label="Notifications">
+ *   <Checkbox>Email</Checkbox>
+ *   <Checkbox>Text message</Checkbox>
+ * </Fieldset>
+ */
+export declare function Fieldset({ "aria-describedby": consumerDescribedBy, children, className, description, error, label, ...rest }: FieldsetProps): JSX.Element;

package/dist/components/Fieldset/Fieldset.js

@@ -0,0 +1,65 @@
+import { FieldContext as e } from "../../forms/FieldContext.js";
+import { hasContent as t } from "../../forms/hasContent.js";
+import { Box as n } from "../Box/Box.js";
+import r from "./Fieldset.module.js";
+import { clsx as i } from "clsx";
+import { useId as a } from "react";
+import { c as o } from "react/compiler-runtime";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/Fieldset/Fieldset.tsx
+function l(l) {
+	let u = o(40), d, f, p, m, h, g, _;
+	u[0] === l ? (d = u[1], f = u[2], p = u[3], m = u[4], h = u[5], g = u[6], _ = u[7]) : ({"aria-describedby": p, children: d, className: f, description: m, error: h, label: g, ..._} = l, u[0] = l, u[1] = d, u[2] = f, u[3] = p, u[4] = m, u[5] = h, u[6] = g, u[7] = _);
+	let v = a(), y = `${v}-legend`, b = `${v}-description`, x = `${v}-error`, S;
+	u[8] === m ? S = u[9] : (S = t(m), u[8] = m, u[9] = S);
+	let C = S, w;
+	u[10] === h ? w = u[11] : (w = t(h), u[10] = h, u[11] = w);
+	let T = w, E = C && b, D = T && x, O;
+	u[12] !== p || u[13] !== E || u[14] !== D ? (O = [
+		E,
+		D,
+		p
+	].filter(Boolean), u[12] = p, u[13] = E, u[14] = D, u[15] = O) : O = u[15];
+	let k = O.join(" "), A;
+	u[16] === f ? A = u[17] : (A = i(r.fieldset, f), u[16] = f, u[17] = A);
+	let j = k === "" ? void 0 : k, M;
+	u[18] !== g || u[19] !== y ? (M = /* @__PURE__ */ s(n, {
+		as: "legend",
+		className: r.legend,
+		id: y,
+		children: g
+	}), u[18] = g, u[19] = y, u[20] = M) : M = u[20];
+	let N;
+	u[21] !== m || u[22] !== b || u[23] !== C ? (N = C && /* @__PURE__ */ s(n, {
+		className: r.description,
+		id: b,
+		children: m
+	}), u[21] = m, u[22] = b, u[23] = C, u[24] = N) : N = u[24];
+	let P;
+	u[25] === d ? P = u[26] : (P = /* @__PURE__ */ s(e.Provider, {
+		value: null,
+		children: d
+	}), u[25] = d, u[26] = P);
+	let F;
+	u[27] !== h || u[28] !== x || u[29] !== T ? (F = T && /* @__PURE__ */ s(n, {
+		className: r.error,
+		id: x,
+		children: h
+	}), u[27] = h, u[28] = x, u[29] = T, u[30] = F) : F = u[30];
+	let I;
+	return u[31] !== y || u[32] !== _ || u[33] !== P || u[34] !== F || u[35] !== A || u[36] !== j || u[37] !== M || u[38] !== N ? (I = /* @__PURE__ */ c(n, {
+		..._,
+		as: "fieldset",
+		className: A,
+		"aria-describedby": j,
+		"aria-labelledby": y,
+		children: [
+			M,
+			N,
+			P,
+			F
+		]
+	}), u[31] = y, u[32] = _, u[33] = P, u[34] = F, u[35] = A, u[36] = j, u[37] = M, u[38] = N, u[39] = I) : I = u[39], I;
+}
+//#endregion
+export { l as Fieldset };

package/dist/components/Fieldset/Fieldset.module.js

@@ -0,0 +1,9 @@
+import './Fieldset.css';//#region src/components/Fieldset/Fieldset.module.css
+var e = "sui-fieldset-XI428", t = "sui-legend-u9wBt", n = "sui-description-KGes-", r = "sui-error-Dionz", i = {
+	fieldset: e,
+	legend: t,
+	description: n,
+	error: r
+};
+//#endregion
+export { i as default, n as description, r as error, e as fieldset, t as legend };

package/dist/components/Fieldset/index.d.ts

@@ -0,0 +1,2 @@
+export { Fieldset } from "./Fieldset";
+export type { FieldsetProps } from "./Fieldset";

package/dist/components/Frame/Frame.css

@@ -0,0 +1 @@
+.sui-frame-S3Ved{aspect-ratio:var(--sui-frame-ratio);overflow:hidden}.sui-frame-S3Ved>:is(img,video,iframe){object-fit:cover;block-size:100%;inline-size:100%}

package/dist/components/Frame/Frame.d.ts

@@ -0,0 +1,23 @@
+import type { JSX } from "react";
+import type { BoxElement, BoxProps } from "../Box";
+interface FrameOwnProps {
+    /**
+     * Width-to-height ratio, for example `"4 / 3"`. Defaults to `"16 / 9"`.
+     */
+    ratio?: `${number} / ${number}`;
+}
+/**
+ * Props for `Frame`: its own props plus every prop supported by the element given in `as`
+ */
+export type FrameProps<E extends BoxElement = "div"> = FrameOwnProps & Omit<BoxProps<E>, keyof FrameOwnProps>;
+/**
+ * Fixed aspect-ratio box that crops a single `img`, `video` or `iframe` child to fill it. For a
+ * captioned image, put the frame inside a `figure` beside the `figcaption`.
+ *
+ * @example
+ * <Frame ratio="4 / 3">
+ *   <img alt="Mountain lake at dawn" src="lake.jpg" />
+ * </Frame>
+ */
+export declare function Frame<E extends BoxElement = "div">({ as, className, ratio, ...rest }: FrameProps<E>): JSX.Element;
+export {};

package/dist/components/Frame/Frame.js

@@ -0,0 +1,17 @@
+import { Box as e } from "../Box/Box.js";
+import { withCustomProperties as t } from "../../layout/withCustomProperties.js";
+import n from "./Frame.module.js";
+import { clsx as r } from "clsx";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/Frame/Frame.tsx
+function a({ as: a, className: o, ratio: s = "16 / 9", ...c }) {
+	let { style: l, ...u } = c;
+	return /* @__PURE__ */ i(e, {
+		...u,
+		as: a,
+		className: r(n.frame, o),
+		style: t({ "--sui-frame-ratio": s }, l)
+	});
+}
+//#endregion
+export { a as Frame };

package/dist/components/Frame/Frame.module.js

@@ -0,0 +1,4 @@
+import './Frame.css';//#region src/components/Frame/Frame.module.css
+var e = "sui-frame-S3Ved", t = { frame: e };
+//#endregion
+export { t as default, e as frame };

package/dist/components/Frame/index.d.ts

@@ -0,0 +1,2 @@
+export { Frame } from "./Frame";
+export type { FrameProps } from "./Frame";

package/dist/components/Grid/Grid.css

@@ -0,0 +1 @@
+.sui-grid-h49fk{grid-template-columns:repeat(auto-fit, minmax(min(var(--sui-grid-minimum-item-width), 100%), 1fr));gap:var(--sui-grid-gap);display:grid}.sui-grid-h49fk:where(ul,ol){margin:0;padding:0;list-style:none}

package/dist/components/Grid/Grid.d.ts

@@ -0,0 +1,25 @@
+import type { JSX } from "react";
+import type { Space } from "../../layout";
+import type { BoxElement, BoxProps } from "../Box";
+interface GridOwnProps {
+    /**
+     * Space between items in both directions. Defaults to `4`.
+     */
+    gap?: Space;
+    /**
+     * Narrowest an item may get before the grid drops a column, as a CSS length. Defaults to `16rem`.
+     */
+    minimumItemWidth?: string;
+}
+/**
+ * Props for `Grid`: its own props plus every prop supported by the element given in `as`
+ */
+export type GridProps<E extends BoxElement = "div"> = GridOwnProps & Omit<BoxProps<E>, keyof GridOwnProps>;
+/**
+ * Responsive grid that fits as many equal columns as its width allows, without breakpoints
+ *
+ * @example
+ * <Grid as="ul" minimumItemWidth="18rem">...</Grid>
+ */
+export declare function Grid<E extends BoxElement = "div">({ as, className, gap, minimumItemWidth, ...rest }: GridProps<E>): JSX.Element;
+export {};

package/dist/components/Grid/Grid.js

@@ -0,0 +1,23 @@
+import { Box as e } from "../Box/Box.js";
+import { listRole as t } from "../../layout/listRole.js";
+import { spaceValue as n } from "../../layout/spaceValue.js";
+import { withCustomProperties as r } from "../../layout/withCustomProperties.js";
+import i from "./Grid.module.js";
+import { clsx as a } from "clsx";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/Grid/Grid.tsx
+function s({ as: s, className: c, gap: l = 4, minimumItemWidth: u = "16rem", ...d }) {
+	let { role: f, style: p, ...m } = d, h = s ?? "div";
+	return /* @__PURE__ */ o(e, {
+		...m,
+		as: h,
+		className: a(i.grid, c),
+		role: t(h, f),
+		style: r({
+			"--sui-grid-gap": n(l),
+			"--sui-grid-minimum-item-width": u
+		}, p)
+	});
+}
+//#endregion
+export { s as Grid };

package/dist/components/Grid/Grid.module.js

@@ -0,0 +1,4 @@
+import './Grid.css';//#region src/components/Grid/Grid.module.css
+var e = "sui-grid-h49fk", t = { grid: e };
+//#endregion
+export { t as default, e as grid };

package/dist/components/Grid/index.d.ts

@@ -0,0 +1,2 @@
+export { Grid } from "./Grid";
+export type { GridProps } from "./Grid";

package/dist/components/Heading/Heading.css

@@ -0,0 +1 @@
+.sui-heading-2pnHW{font-family:var(--sui-font-heading,system-ui, sans-serif);font-weight:var(--sui-font-weight-bold,700);line-height:var(--sui-line-height-tight,1.25);margin:0}.sui-heading-2pnHW[data-size=xs]{font-size:var(--sui-font-size-xs,.75rem)}.sui-heading-2pnHW[data-size=sm]{font-size:var(--sui-font-size-sm,.875rem)}.sui-heading-2pnHW[data-size=md]{font-size:var(--sui-font-size-md,1rem)}.sui-heading-2pnHW[data-size=lg]{font-size:var(--sui-font-size-lg,1.125rem)}.sui-heading-2pnHW[data-size=xl]{font-size:var(--sui-font-size-xl,1.25rem)}.sui-heading-2pnHW[data-size="2xl"]{font-size:var(--sui-font-size-2xl,1.5rem)}.sui-heading-2pnHW[data-size="3xl"]{font-size:var(--sui-font-size-3xl,1.875rem)}.sui-heading-2pnHW[data-tone=muted]{color:var(--sui-color-text-muted,#4b5563)}