@stealthscale/plugin-theming 0.0.0-stage → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Stealth Scale B.V.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,136 @@
-# Temporary Holding Version
+# @stealthscale/plugin-theming
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+`@stealthscale/plugin-theming` is the theming plugin. Its 25 pages document the theme a product's
+page wears: the themes on offer, every token, style and condition the theme fills with the value the
+stylesheet resolves in both color modes, the theme gate's pairs measured on the page, and how a
+theme is written, extended and checked. Its contract and its words are in
+`@stealthscale/plugin-theming-contract`.
+
+## Install
+
+```bash
+pnpm add @stealthscale/plugin-theming
+```
+
+The package peers on the component packages it renders (`component-actions`,
+`component-collections`, `component-content`, `component-data`, `component-disclosure`,
+`component-forms`, `component-layout`, `component-navigation`, `component-screen`,
+`component-surfaces` and `component-typography`), on `hooks`, `provider-i18n`, `provider-router`,
+`provider-shell`, `sdk-plugin` and `theme`, all under `@stealthscale`, and on `react`. It depends on
+its contract package and `sdk-core`, and on `lucide-react` for the icons of the copy control on its
+code samples.
+
+## Installing the plugin in a product
+
+A product installs the manifest:
+
+```ts
+// src/product.ts
+import { manifest as theming } from "@stealthscale/plugin-theming";
+import { defineProduct, installed } from "@stealthscale/sdk-core";
+
+export default defineProduct({
+  name: "product.name",
+  plugins: [installed(theming)],
+  productId: "docs",
+  version: "1.0.0",
+});
+```
+
+The pages read every token by name while they run, so the product's `theme.config.ts` states
+`tokens: "all"`. Without that setting the compiler writes only the tokens a recipe or the product's
+own code uses, and the pages mark every other token as not in the stylesheet.
+
+```ts
+// theme.config.ts
+import { cinder } from "@stealthscale/theme-cinder";
+import { ink } from "@stealthscale/theme-ink";
+import { type Application } from "@stealthscale/theme/authoring";
+
+export default {
+  themes: [ink, cinder],
+  tokens: "all",
+} satisfies Application;
+```
+
+The themes page shows a card per theme the product's `Shell` offers, and a product built with the
+product layers offers every theme `theme.config.ts` lists. A product without themes shows the
+foundation alone on every page.
+
+## The pages
+
+| Menu     | Page            | Shows                                                                              |
+| -------- | --------------- | ---------------------------------------------------------------------------------- |
+|          | `overview`      | What a theme is, how it styles a page, and a card per page of each menu            |
+| Basics   | `themes`        | A card per theme on offer, under its own attribute, with a button that wears it    |
+|          | `tokens`        | Reference and semantic tokens, how a recipe refers to one, their custom properties |
+|          | `recipes`       | How a component styles through its recipe, its layers and its class names          |
+|          | `conditions`    | The foundation's fourteen conditions, and the ones the browser decides now         |
+|          | `accessibility` | The gate's text, boundary and focus pairs measured on the page in both modes       |
+| Color    | `palettes`      | The eleven roles of each of the eight palettes, in both modes, with ratios         |
+|          | `surfaces`      | The backgrounds, inks and lines with their status members, in both modes           |
+|          | `series`        | The eight series colors on the page and on a panel                                 |
+|          | `code`          | The code inks on the page, on a panel and in a sample                              |
+|          | `looks`         | Every layer style on a box                                                         |
+| Type     | `faces`         | The three faces, the font sizes and the weights, each set in a sample              |
+|          | `text-styles`   | Every size style and role style set in a line, the line heights and the tracking   |
+| Space    | `spacing`       | The gap and inset scales, the grid, the marker, the ring and the safe area         |
+|          | `sizes`         | The control, icon and tag scales, the layout widths, the measures and the ratios   |
+|          | `breakpoints`   | The breakpoints and the container sizes                                            |
+|          | `density`       | The same controls at each density, and `dense()`                                   |
+| Shape    | `corners`       | The concentric corners, the reference radii, the stroke widths and the ring        |
+|          | `depth`         | The shadows in both modes, the blurs and the opacities                             |
+|          | `layers`        | The stacking order                                                                 |
+| Motion   | `motion`        | The paces and curves, the reference durations and curves, every animation style    |
+|          | `cursors`       | Every cursor on a tile under the pointer                                           |
+| Building | `writing`       | A shipped theme's whole statement, the axes, the colors and a derived theme        |
+|          | `extending`     | A theme's recipe extension, its scope and the keys it cannot state                 |
+|          | `gate`          | `violations()`, the thresholds, the floor, skipping a check and `report()`         |
+
+Each page titles the document `<title> · <product name>`, and a rail beside its sections lists them
+and marks the ones on screen. A section's text is Markdown, and each code sample has a copy control.
+
+## Reading the stylesheet
+
+No page contains a value of a token. A page lists the token's names from the theme foundation's
+`@stealthscale/theme/contract` entry and reads each value while it runs:
+
+- A probe the page appends into the block and removes in the same task states the token's custom
+  property three times. A color is read as `color`, every other token as the custom property with
+  its references substituted, and a length's pixels as `inline-size`.
+- A color or a shadow is read in two panels, one per mode, each with the worn theme's `data-theme`
+  and its own `data-color-mode`. The panels are side by side where each has `sizes.xl`, and stack
+  otherwise.
+- A contrast ratio comes from the foundation's `contrast()`, on the same pairs and thresholds the
+  theme gate measures, so the page and the gate cannot disagree.
+- A page marks a token the stylesheet does not declare as not in the stylesheet.
+
+The values follow the theme the page wears. A person who wears another theme from its card or from
+the bar's theme switcher sees the values of that theme.
+
+## The recipes it states
+
+Every part a page renders is a component of the library. Five recipes style the samples, published
+as a preset from `@stealthscale/plugin-theming/theme`:
+
+| Recipe           | Renders                                                                        |
+| ---------------- | ------------------------------------------------------------------------------ |
+| `theming-panel`  | The panel that shows a block in one color mode                                 |
+| `theming-sample` | A bar, a square, a line, a box at a ratio, a tile or words that show one token |
+| `theming-look`   | A box in each layer style                                                      |
+| `theming-text`   | A line in each text style                                                      |
+| `theming-motion` | A tile that plays each animation style                                         |
+
+The look, text and motion recipes take their axes from the foundation's name lists, and every recipe
+with an axis states each value under `staticCss`, so a product compiles every sample. A page passes
+a token to a sample as a custom property, such as `--theming-radius`, which the sample's recipe
+reads.
+
+## Words
+
+Every word a page writes is a key in the `theming` namespace, in the contract package's
+`locales/en/theming.json` and `locales/en/theming/<slug>.json`.
+
+## Licence
+
+MIT. See [LICENSE](LICENSE).

package/dist/accessibility-Dg5Dh35o.js

@@ -0,0 +1,409 @@
+import { n as colorOf, o as ratioOf } from "./measure-uwF7Fmpy.js";
+import { n as variableOf } from "./variables-ymFs3Bzn.js";
+import { n as useWords, t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { n as attributesOf } from "./attributes-vx1W0PiK.js";
+import { t as useReadings } from "./use-readings-D56mNtEc.js";
+import { t as useWornTheme } from "./worn-D4HEJsJ2.js";
+import { PALETTES, THRESHOLDS, boundaryPairs, focusPairs, textPairs } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { Stack } from "@stealthscale/component-layout";
+import { ChevronRightIcon } from "lucide-react";
+import { Table } from "@stealthscale/component-collections";
+import { Badge, Format } from "@stealthscale/component-data";
+import { Details } from "@stealthscale/component-disclosure";
+import { Code, Text } from "@stealthscale/component-typography";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/pairs.ts
+/**
+* Returns the custom properties a list of pairs reads: each front and each back, once.
+*
+* @param pairs - The pairs, whose tokens are paths in the `colors` category.
+*/
+function variablesOf(pairs) {
+	return [...new Set(pairs.flatMap(({ back, front }) => [variableOf("colors", front), variableOf("colors", back)]))];
+}
+/**
+* Returns the ratio of one pair in one mode's readings.
+*/
+function ratioIn(pair, readings) {
+	return ratioOf(colorOf(readings.get(variableOf("colors", pair.front))), colorOf(readings.get(variableOf("colors", pair.back))));
+}
+/**
+* Measures every pair in both modes.
+*
+* @param pairs - The gate's pairs, whose tokens are paths in the `colors` category.
+* @param light - The readings of the light mode.
+* @param dark - The readings of the dark mode.
+*/
+function measuredPairs(pairs, light, dark) {
+	return pairs.map((pair) => ({
+		...pair,
+		dark: ratioIn(pair, dark),
+		light: ratioIn(pair, light)
+	}));
+}
+/**
+* Returns true where a pair clears its ratio in both modes.
+*
+* @param pair - A measured pair.
+*/
+function passes({ dark, light, minimum }) {
+	return light !== void 0 && dark !== void 0 && light >= minimum && dark >= minimum;
+}
+/**
+* Sums a list of measured pairs: how many there are, how many pass, and the lowest ratio.
+*
+* @param pairs - The measured pairs.
+*/
+function summaryOf(pairs) {
+	const ratios = pairs.flatMap(({ dark, light }) => [light, dark].filter((ratio) => ratio !== void 0));
+	return {
+		count: pairs.length,
+		lowest: ratios.length === 0 ? void 0 : Math.min(...ratios),
+		passing: pairs.filter((pair) => passes(pair)).length
+	};
+}
+//#endregion
+//#region src/blocks/pair-summary.tsx
+/**
+* The digits a ratio is written with.
+*/
+const DIGITS = {
+	maximumFractionDigits: 2,
+	minimumFractionDigits: 2
+};
+/**
+* Returns a ratio cell: the ratio with two digits and a badge where it is below the pair's minimum,
+* or nothing where it cannot be measured.
+*/
+function ratioCell(ratio, minimum, below) {
+	if (ratio === void 0) return null;
+	return /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		gap: "xs",
+		justify: "end",
+		children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx(Format.Number, {
+			options: DIGITS,
+			value: ratio
+		}), ":1"] }), ratio < minimum ? /* @__PURE__ */ jsx(Badge, {
+			palette: "error",
+			size: "sm",
+			children: below
+		}) : null]
+	});
+}
+/**
+* Returns a cell with a token's name in code.
+*/
+function tokenCell(token) {
+	return /* @__PURE__ */ jsx(Code, { children: token });
+}
+/**
+* Returns the table's columns: the two tokens, the minimum, and the ratio in each mode.
+*/
+function columnsOf(headings) {
+	return [
+		{
+			cell: ({ front }) => tokenCell(front),
+			key: "front",
+			label: headings.front,
+			rowHeader: true
+		},
+		{
+			cell: ({ back }) => tokenCell(back),
+			key: "back",
+			label: headings.back
+		},
+		{
+			key: "minimum",
+			label: headings.minimum,
+			numeric: true
+		},
+		{
+			cell: ({ light, minimum }) => ratioCell(light, minimum, headings.below),
+			key: "light",
+			label: headings.light,
+			numeric: true
+		},
+		{
+			cell: ({ dark, minimum }) => ratioCell(dark, minimum, headings.below),
+			key: "dark",
+			label: headings.dark,
+			numeric: true
+		}
+	];
+}
+/**
+* Renders the sum of the pairs, and the pairs in a disclosure under it.
+*/
+function PairSummary(t0) {
+	const $ = c(29);
+	const { caption, rows } = t0;
+	const { t } = useWords();
+	let T0;
+	let T1;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== rows || $[1] !== t) {
+		const { count, lowest, passing } = summaryOf(rows);
+		t3 = /* @__PURE__ */ jsx(Text, { children: t("blocks.pairs", {
+			count,
+			lowest: lowest?.toFixed(2) ?? "-",
+			passing
+		}) });
+		T1 = Details.Root;
+		T0 = Details.Summary;
+		if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(Details.Indicator, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) });
+			$[7] = t1;
+		} else t1 = $[7];
+		t2 = t("blocks.everyPair", { count });
+		$[0] = rows;
+		$[1] = t;
+		$[2] = T0;
+		$[3] = T1;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		T0 = $[2];
+		T1 = $[3];
+		t1 = $[4];
+		t2 = $[5];
+		t3 = $[6];
+	}
+	let t4;
+	if ($[8] !== T0 || $[9] !== t1 || $[10] !== t2) {
+		t4 = /* @__PURE__ */ jsxs(T0, { children: [t1, t2] });
+		$[8] = T0;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== caption || $[13] !== t) {
+		t5 = t("blocks.tableOf", { name: caption });
+		$[12] = caption;
+		$[13] = t;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== t) {
+		t6 = columnsOf({
+			back: t("blocks.back"),
+			below: t("blocks.below"),
+			dark: t("blocks.dark"),
+			front: t("blocks.front"),
+			light: t("blocks.light"),
+			minimum: t("blocks.minimum")
+		});
+		$[15] = t;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== caption || $[18] !== rows || $[19] !== t5 || $[20] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Details.Content, { children: /* @__PURE__ */ jsx(Table.Simple, {
+			"aria-label": t5,
+			caption,
+			columns: t6,
+			rows,
+			rowToKey: _temp
+		}) });
+		$[17] = caption;
+		$[18] = rows;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = t7;
+	} else t7 = $[21];
+	let t8;
+	if ($[22] !== T1 || $[23] !== t4 || $[24] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(T1, { children: [t4, t7] });
+		$[22] = T1;
+		$[23] = t4;
+		$[24] = t7;
+		$[25] = t8;
+	} else t8 = $[25];
+	let t9;
+	if ($[26] !== t3 || $[27] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, t8] });
+		$[26] = t3;
+		$[27] = t8;
+		$[28] = t9;
+	} else t9 = $[28];
+	return t9;
+}
+function _temp(t0) {
+	const { back, front } = t0;
+	return `${front} ${back}`;
+}
+//#endregion
+//#region src/blocks/pair-table.tsx
+/**
+* Renders a class of the theme gate's pairs measured live on the theme the page wears.
+*/
+/**
+* Renders the pairs' sum and every pair, each measured in both modes.
+*
+* @remarks
+*   The pairs are read in two hidden elements, one per mode, each wearing the page's theme, so the
+*   ratios are the stylesheet's and not a copy of the gate's arithmetic.
+*/
+function PairTable(t0) {
+	const $ = c(21);
+	const { caption, pairs } = t0;
+	const worn = useWornTheme();
+	const [light, setLight] = useState(null);
+	const [dark, setDark] = useState(null);
+	let t1;
+	if ($[0] !== pairs) {
+		t1 = variablesOf(pairs);
+		$[0] = pairs;
+		$[1] = t1;
+	} else t1 = $[1];
+	const variables = t1;
+	const t2 = useReadings(light, variables);
+	const t3 = useReadings(dark, variables);
+	let t4;
+	if ($[2] !== pairs || $[3] !== t2 || $[4] !== t3) {
+		t4 = measuredPairs(pairs, t2, t3);
+		$[2] = pairs;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	const rows = t4;
+	let t5;
+	if ($[6] !== worn) {
+		t5 = attributesOf(worn, "light");
+		$[6] = worn;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			hidden: true,
+			ref: setLight,
+			...t5
+		});
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== worn) {
+		t7 = attributesOf(worn, "dark");
+		$[10] = worn;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== t7) {
+		t8 = /* @__PURE__ */ jsx("div", {
+			hidden: true,
+			ref: setDark,
+			...t7
+		});
+		$[12] = t7;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== caption || $[15] !== rows) {
+		t9 = /* @__PURE__ */ jsx(PairSummary, {
+			caption,
+			rows
+		});
+		$[14] = caption;
+		$[15] = rows;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== t6 || $[18] !== t8 || $[19] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [
+				t6,
+				t8,
+				t9
+			]
+		});
+		$[17] = t6;
+		$[18] = t8;
+		$[19] = t9;
+		$[20] = t10;
+	} else t10 = $[20];
+	return t10;
+}
+//#endregion
+//#region src/pages/accessibility.tsx
+/**
+* Lists each class of pair the gate measures, by its section, with its pairs over the eight
+* semantic palettes at the gate's own thresholds.
+*/
+const CLASSES = [
+	{
+		id: "text",
+		pairs: textPairs(PALETTES, THRESHOLDS)
+	},
+	{
+		id: "boundary",
+		pairs: boundaryPairs(PALETTES, THRESHOLDS)
+	},
+	{
+		id: "focus",
+		pairs: focusPairs(PALETTES, THRESHOLDS)
+	}
+];
+/**
+* Renders the accessibility page.
+*/
+function AccessibilityPage() {
+	const $ = c(6);
+	const { t } = useWords();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { id: "gate" };
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		let t3;
+		let t4;
+		let t5;
+		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+			t3 = { id: "targets" };
+			t4 = { id: "motion" };
+			t5 = { id: "forced" };
+			$[3] = t3;
+			$[4] = t4;
+			$[5] = t5;
+		} else {
+			t3 = $[3];
+			t4 = $[4];
+			t5 = $[5];
+		}
+		t1 = /* @__PURE__ */ jsx(DocPage, {
+			page: "accessibility",
+			sections: [
+				t0,
+				...CLASSES.map((t2) => {
+					const { id, pairs } = t2;
+					return {
+						block: /* @__PURE__ */ jsx(PairTable, {
+							caption: t(`accessibility.sections.${id}.title`, { defaultValue: id }),
+							pairs
+						}),
+						id
+					};
+				}),
+				t3,
+				t4,
+				t5
+			]
+		});
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+//#endregion
+export { AccessibilityPage };

package/dist/attributes-vx1W0PiK.js

@@ -0,0 +1,26 @@
+import { COLOR_MODE_ATTRIBUTE, THEME_ATTRIBUTE } from "@stealthscale/theme";
+//#region src/reading/attributes.ts
+/**
+* Writes the attributes that switch an element to the worn theme in one color mode.
+*/
+/**
+* Lists the modes in the order a page shows them.
+*/
+const MODES = ["light", "dark"];
+/**
+* Returns the attributes of an element in a mode: the mode, and the worn theme beside it.
+*
+* @remarks
+*   The theme is stated beside the mode, because the built stylesheet resolves a theme's colors on
+*   the element with the theme attribute. A product that offers no theme states the mode alone.
+* @param worn - The theme the page wears, or undefined where the product offers none.
+* @param mode - The color mode.
+*/
+function attributesOf(worn, mode) {
+	return worn === void 0 ? { [COLOR_MODE_ATTRIBUTE]: mode } : {
+		[COLOR_MODE_ATTRIBUTE]: mode,
+		[THEME_ATTRIBUTE]: worn
+	};
+}
+//#endregion
+export { attributesOf as n, MODES as t };

package/dist/breakpoints-CJjhy79u.js

@@ -0,0 +1,83 @@
+import { n as useWords, t as DocPage } from "./doc-page-BQXdbP_h.js";
+import { t as tokenRows } from "./rows-Dv8c7jye.js";
+import { t as TokenTable } from "./token-table-yrZh5kLy.js";
+import { BREAKPOINTS, CONTAINERS } from "@stealthscale/theme/contract";
+import { c } from "react/compiler-runtime";
+import { Stack } from "@stealthscale/component-layout";
+import { Code } from "@stealthscale/component-typography";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/breakpoints.tsx
+/**
+* The container sizes, each named in code.
+*
+* @remarks
+*   The compiler writes a container size into each query that names it and declares no custom
+*   property for it, so the page lists the names and the prose explains the query.
+*/
+const SIZES = /* @__PURE__ */ jsx(Stack, {
+	direction: "row",
+	gap: "xs",
+	wrap: true,
+	children: CONTAINERS.map((size) => /* @__PURE__ */ jsx(Code, { children: size }, size))
+});
+/**
+* Renders the breakpoints page.
+*/
+function BreakpointsPage() {
+	const $ = c(9);
+	const { t } = useWords();
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("breakpoints.sections.breakpoints.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = tokenRows("breakpoints", BREAKPOINTS);
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = {
+			block: /* @__PURE__ */ jsx(TokenTable, {
+				caption: t0,
+				lengths: true,
+				rows: t1
+			}),
+			id: "breakpoints"
+		};
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = { id: "conditions" };
+		t4 = {
+			block: SIZES,
+			id: "containers"
+		};
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		t3 = $[5];
+		t4 = $[6];
+	}
+	let t5;
+	if ($[7] !== t2) {
+		t5 = /* @__PURE__ */ jsx(DocPage, {
+			page: "breakpoints",
+			sections: [
+				t2,
+				t3,
+				t4
+			]
+		});
+		$[7] = t2;
+		$[8] = t5;
+	} else t5 = $[8];
+	return t5;
+}
+//#endregion
+export { BreakpointsPage };