@panneau/ui 5.0.0-alpha.1 → 5.0.0-alpha.3

package/dist/icon/lucideIconLoader.d.ts

@@ -0,0 +1,9 @@
+import type { NamedIconLoader } from './namedIcons';
+/**
+ * Loads any Lucide icon by its name (the names of lucide.dev/icons). Each icon is its own chunk,
+ * and so is the list of names, loaded the first time an icon is named. Bundlers emit a chunk per
+ * Lucide icon for it, so it lives in its own entry point: only apps that pass it to `PanneauRoot`
+ * pay for it.
+ */
+export declare const lucideIconLoader: NamedIconLoader;
+//# sourceMappingURL=lucideIconLoader.d.ts.map

package/dist/icon/lucideIconLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lucideIconLoader.d.ts","sourceRoot":"","sources":["../../src/icon/lucideIconLoader.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAMpD;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,eAY9B,CAAC"}

package/dist/icon/lucideIconLoader.js

@@ -0,0 +1,22 @@
+//#region src/icon/lucideIconLoader.ts
+var imports = null;
+/**
+* Loads any Lucide icon by its name (the names of lucide.dev/icons). Each icon is its own chunk,
+* and so is the list of names, loaded the first time an icon is named. Bundlers emit a chunk per
+* Lucide icon for it, so it lives in its own entry point: only apps that pass it to `PanneauRoot`
+* pay for it.
+*/
+var lucideIconLoader = (name) => {
+	imports ??= import("lucide-react/dynamicIconImports.mjs").then((module) => module.default, (error) => {
+		imports = null;
+		throw error;
+	});
+	return imports.then((all) => {
+		const load = Object.hasOwn(all, name) ? all[name] : void 0;
+		return load !== void 0 ? load().then((module) => module.default) : null;
+	});
+};
+//#endregion
+export { lucideIconLoader };
+
+//# sourceMappingURL=lucideIconLoader.js.map

package/dist/icon/lucideIconLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lucideIconLoader.js","names":[],"sources":["../../src/icon/lucideIconLoader.ts"],"sourcesContent":["import type { IconComponent } from './Icon';\nimport type { NamedIconLoader } from './namedIcons';\n\ntype IconImports = Readonly<Record<string, () => Promise<{ default: IconComponent }>>>;\n\nlet imports: Promise<IconImports> | null = null;\n\n/**\n * Loads any Lucide icon by its name (the names of lucide.dev/icons). Each icon is its own chunk,\n * and so is the list of names, loaded the first time an icon is named. Bundlers emit a chunk per\n * Lucide icon for it, so it lives in its own entry point: only apps that pass it to `PanneauRoot`\n * pay for it.\n */\nexport const lucideIconLoader: NamedIconLoader = (name) => {\n    imports ??= import('lucide-react/dynamicIconImports.mjs').then(\n        (module) => module.default as unknown as IconImports,\n        (error: unknown) => {\n            imports = null;\n            throw error;\n        },\n    );\n    return imports.then((all) => {\n        const load = Object.hasOwn(all, name) ? all[name] : undefined;\n        return load !== undefined ? load().then((module) => module.default) : null;\n    });\n};\n"],"mappings":";AAKA,IAAI,UAAuC;;;;;;;AAQ3C,IAAa,oBAAqC,SAAS;CACvD,YAAY,OAAO,sCAAsC,CAAC,MACrD,WAAW,OAAO,UAClB,UAAmB;EAChB,UAAU;EACV,MAAM;CACV,CACJ;CACA,OAAO,QAAQ,MAAM,QAAQ;EACzB,MAAM,OAAO,OAAO,OAAO,KAAK,IAAI,IAAI,IAAI,QAAQ,KAAA;EACpD,OAAO,SAAS,KAAA,IAAY,KAAK,CAAC,CAAC,MAAM,WAAW,OAAO,OAAO,IAAI;CAC1E,CAAC;AACL"}

package/dist/icon/namedIcons.d.ts

@@ -1,16 +1,23 @@
 import type { IconComponent } from './Icon';
 /**
- * Loads a Lucide icon by its name (`send`, `calendar-days`: the names of lucide.dev/icons), and
- * resolves with its component, or with `null` for a name Lucide doesn't have. Each icon is its own
- * module, and so is the list of names: neither is in the bundle until a named icon is used.
+ * Loads an icon component from its name, as definitions name icons (`"icon": "send"`), or
+ * resolves with `null` for a name it doesn't know. `lucideIconLoader` of `@panneau/ui/named-icons`
+ * loads any Lucide icon; an app can load only the icons its definitions use.
  */
-export declare function loadNamedIcon(name: string): Promise<IconComponent | null>;
+export type NamedIconLoader = (name: string) => Promise<IconComponent | null>;
+/** The loader of named icons, set by `PanneauRoot`'s `iconLoader`. */
+export declare const NamedIconLoaderContext: import("react").Context<NamedIconLoader | null>;
 /**
- * An icon component for a Lucide icon name, as definitions name them (`"icon": "send"`). It goes
+ * Loads an icon by its name with a loader, once per loader and name, and resolves with its
+ * component, or with `null` for a name the loader doesn't know.
+ */
+export declare function loadNamedIcon(name: string, loader: NamedIconLoader): Promise<IconComponent | null>;
+/**
+ * An icon component for an icon name, as definitions name them (`"icon": "send"`). It goes
  * wherever an icon component goes (`<Button icon={getNamedIcon('send')}>`), and is the same
- * component for the same name. It loads the icon the first time it renders (`loadNamedIcon()`),
- * and renders an empty space of the same size until then. A name Lucide doesn't have renders
- * nothing.
+ * component for the same name. It loads the icon with the `iconLoader` of `PanneauRoot` the first
+ * time it renders, and renders an empty space of the same size until then, or without a loader. A
+ * name the loader doesn't know renders nothing.
  */
 export declare function getNamedIcon(name: string): IconComponent;
 //# sourceMappingURL=namedIcons.d.ts.map

package/dist/icon/namedIcons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"namedIcons.d.ts","sourceRoot":"","sources":["../../src/icon/namedIcons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAwB5C;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,CAoCzE;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,CAwCxD"}
+{"version":3,"file":"namedIcons.d.ts","sourceRoot":"","sources":["../../src/icon/namedIcons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;AAU9E,sEAAsE;AACtE,eAAO,MAAM,sBAAsB,iDAA8C,CAAC;AA2BlF;;;GAGG;AACH,wBAAgB,aAAa,CACzB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,eAAe,GACxB,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,CA2B/B;AAID;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,CAkDxD"}

package/dist/icon/namedIcons.js

@@ -1,64 +1,78 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useSyncExternalStore } from "react";
+import { createContext, use, useEffect, useSyncExternalStore } from "react";
 //#region src/icon/namedIcons.tsx
-var entries = /* @__PURE__ */ new Map();
+/** Icons by name, for each loader. */
+var caches = /* @__PURE__ */ new WeakMap();
 var components = /* @__PURE__ */ new Map();
 var listeners = /* @__PURE__ */ new Set();
-var imports = null;
+/** The loader of named icons, set by `PanneauRoot`'s `iconLoader`. */
+var NamedIconLoaderContext = createContext(null);
+function cache(loader) {
+	let entries = caches.get(loader);
+	if (entries === void 0) {
+		entries = /* @__PURE__ */ new Map();
+		caches.set(loader, entries);
+	}
+	return entries;
+}
 function subscribe(listener) {
 	listeners.add(listener);
 	return () => {
 		listeners.delete(listener);
 	};
 }
-function setEntry(name, entry) {
-	entries.set(name, entry);
+function setEntry(loader, name, entry) {
+	if (entry === void 0) cache(loader).delete(name);
+	else cache(loader).set(name, entry);
 	listeners.forEach((listener) => listener());
 }
 /**
-* Loads a Lucide icon by its name (`send`, `calendar-days`: the names of lucide.dev/icons), and
-* resolves with its component, or with `null` for a name Lucide doesn't have. Each icon is its own
-* module, and so is the list of names: neither is in the bundle until a named icon is used.
+* Loads an icon by its name with a loader, once per loader and name, and resolves with its
+* component, or with `null` for a name the loader doesn't know.
 */
-function loadNamedIcon(name) {
-	const entry = entries.get(name);
+function loadNamedIcon(name, loader) {
+	const entry = cache(loader).get(name);
 	if (entry?.status === "loaded") return Promise.resolve(entry.icon);
 	if (entry?.status === "missing") return Promise.resolve(null);
-	if (entry === void 0) setEntry(name, { status: "loading" });
-	imports ??= import("lucide-react/dynamicIconImports.mjs").then((module) => module.default);
-	return imports.then((all) => {
-		const load = Object.hasOwn(all, name) ? all[name] : void 0;
-		return load !== void 0 ? load().then((module) => module.default) : null;
-	}).then((icon) => {
+	if (entry === void 0) setEntry(loader, name, { status: "loading" });
+	return loader(name).then((icon) => {
 		if (icon === null) {
-			console.warn(`[panneau] Lucide has no icon named "${name}".`);
-			setEntry(name, { status: "missing" });
-		} else setEntry(name, {
+			console.warn(`[panneau] No icon named "${name}".`);
+			setEntry(loader, name, { status: "missing" });
+		} else setEntry(loader, name, {
 			status: "loaded",
 			icon
 		});
 		return icon;
 	}, (error) => {
-		entries.delete(name);
-		imports = null;
+		setEntry(loader, name, void 0);
 		throw error;
 	});
 }
+var warnedWithoutLoader = false;
 /**
-* An icon component for a Lucide icon name, as definitions name them (`"icon": "send"`). It goes
+* An icon component for an icon name, as definitions name them (`"icon": "send"`). It goes
 * wherever an icon component goes (`<Button icon={getNamedIcon('send')}>`), and is the same
-* component for the same name. It loads the icon the first time it renders (`loadNamedIcon()`),
-* and renders an empty space of the same size until then. A name Lucide doesn't have renders
-* nothing.
+* component for the same name. It loads the icon with the `iconLoader` of `PanneauRoot` the first
+* time it renders, and renders an empty space of the same size until then, or without a loader. A
+* name the loader doesn't know renders nothing.
 */
 function getNamedIcon(name) {
 	const existing = components.get(name);
 	if (existing !== void 0) return existing;
 	const NamedIcon = ({ size = 24, className, ...props }) => {
-		const entry = useSyncExternalStore(subscribe, () => entries.get(name), () => entries.get(name));
+		const loader = use(NamedIconLoaderContext);
+		const entry = useSyncExternalStore(subscribe, () => loader !== null ? cache(loader).get(name) : void 0, () => loader !== null ? cache(loader).get(name) : void 0);
 		useEffect(() => {
-			if (entries.get(name) === void 0) loadNamedIcon(name).catch(() => void 0);
-		}, []);
+			if (loader === null) {
+				if (!warnedWithoutLoader) {
+					warnedWithoutLoader = true;
+					console.warn(`[panneau] The icon "${name}" is named, but PanneauRoot has no iconLoader: pass lucideIconLoader from @panneau/ui/named-icons.`);
+				}
+				return;
+			}
+			if (cache(loader).get(name) === void 0) loadNamedIcon(name, loader).catch(() => void 0);
+		}, [loader]);
 		if (entry?.status === "loaded") {
 			const Loaded = entry.icon;
 			return /* @__PURE__ */ jsx(Loaded, {
@@ -85,6 +99,6 @@ function getNamedIcon(name) {
 	return NamedIcon;
 }
 //#endregion
-export { getNamedIcon, loadNamedIcon };
+export { NamedIconLoaderContext, getNamedIcon, loadNamedIcon };
 
 //# sourceMappingURL=namedIcons.js.map

package/dist/icon/namedIcons.js.map

@@ -1 +1 @@
-{"version":3,"file":"namedIcons.js","names":[],"sources":["../../src/icon/namedIcons.tsx"],"sourcesContent":["import { useEffect, useSyncExternalStore } from 'react';\n\nimport type { IconComponent } from './Icon';\n\ntype IconImports = Readonly<Record<string, () => Promise<{ default: IconComponent }>>>;\n\ntype Entry =\n    { status: 'loading' } | { status: 'loaded'; icon: IconComponent } | { status: 'missing' };\n\nconst entries = new Map<string, Entry>();\nconst components = new Map<string, IconComponent>();\nconst listeners = new Set<() => void>();\nlet imports: Promise<IconImports> | null = null;\n\nfunction subscribe(listener: () => void): () => void {\n    listeners.add(listener);\n    return () => {\n        listeners.delete(listener);\n    };\n}\n\nfunction setEntry(name: string, entry: Entry) {\n    entries.set(name, entry);\n    listeners.forEach((listener) => listener());\n}\n\n/**\n * Loads a Lucide icon by its name (`send`, `calendar-days`: the names of lucide.dev/icons), and\n * resolves with its component, or with `null` for a name Lucide doesn't have. Each icon is its own\n * module, and so is the list of names: neither is in the bundle until a named icon is used.\n */\nexport function loadNamedIcon(name: string): Promise<IconComponent | null> {\n    const entry = entries.get(name);\n    if (entry?.status === 'loaded') {\n        return Promise.resolve(entry.icon);\n    }\n    if (entry?.status === 'missing') {\n        return Promise.resolve(null);\n    }\n    if (entry === undefined) {\n        setEntry(name, { status: 'loading' });\n    }\n    imports ??= import('lucide-react/dynamicIconImports.mjs').then(\n        (module) => module.default as unknown as IconImports,\n    );\n    return imports\n        .then((all) => {\n            const load = Object.hasOwn(all, name) ? all[name] : undefined;\n            return load !== undefined ? load().then((module) => module.default) : null;\n        })\n        .then(\n            (icon) => {\n                if (icon === null) {\n                    console.warn(`[panneau] Lucide has no icon named \"${name}\".`);\n                    setEntry(name, { status: 'missing' });\n                } else {\n                    setEntry(name, { status: 'loaded', icon });\n                }\n                return icon;\n            },\n            (error: unknown) => {\n                // A chunk that failed to load (offline): the icon is loaded again when it mounts.\n                entries.delete(name);\n                imports = null;\n                throw error;\n            },\n        );\n}\n\n/**\n * An icon component for a Lucide icon name, as definitions name them (`\"icon\": \"send\"`). It goes\n * wherever an icon component goes (`<Button icon={getNamedIcon('send')}>`), and is the same\n * component for the same name. It loads the icon the first time it renders (`loadNamedIcon()`),\n * and renders an empty space of the same size until then. A name Lucide doesn't have renders\n * nothing.\n */\nexport function getNamedIcon(name: string): IconComponent {\n    const existing = components.get(name);\n    if (existing !== undefined) {\n        return existing;\n    }\n    const NamedIcon: IconComponent = ({ size = 24, className, ...props }) => {\n        const entry = useSyncExternalStore(\n            subscribe,\n            () => entries.get(name),\n            () => entries.get(name),\n        );\n        useEffect(() => {\n            if (entries.get(name) === undefined) {\n                loadNamedIcon(name).catch(() => undefined);\n            }\n        }, []);\n        if (entry?.status === 'loaded') {\n            const Loaded = entry.icon;\n            return <Loaded size={size} className={className} {...props} />;\n        }\n        if (entry?.status === 'missing') {\n            return null;\n        }\n        const { 'aria-hidden': hidden, 'aria-label': label, role } = props;\n        return (\n            <svg\n                width={size}\n                height={size}\n                viewBox=\"0 0 24 24\"\n                className={className}\n                aria-hidden={hidden}\n                aria-label={label}\n                role={role}\n                data-loading=\"\"\n            />\n        );\n    };\n    NamedIcon.displayName = `NamedIcon(${name})`;\n    components.set(name, NamedIcon);\n    return NamedIcon;\n}\n"],"mappings":";;;AASA,IAAM,0BAAU,IAAI,IAAmB;AACvC,IAAM,6BAAa,IAAI,IAA2B;AAClD,IAAM,4BAAY,IAAI,IAAgB;AACtC,IAAI,UAAuC;AAE3C,SAAS,UAAU,UAAkC;CACjD,UAAU,IAAI,QAAQ;CACtB,aAAa;EACT,UAAU,OAAO,QAAQ;CAC7B;AACJ;AAEA,SAAS,SAAS,MAAc,OAAc;CAC1C,QAAQ,IAAI,MAAM,KAAK;CACvB,UAAU,SAAS,aAAa,SAAS,CAAC;AAC9C;;;;;;AAOA,SAAgB,cAAc,MAA6C;CACvE,MAAM,QAAQ,QAAQ,IAAI,IAAI;CAC9B,IAAI,OAAO,WAAW,UAClB,OAAO,QAAQ,QAAQ,MAAM,IAAI;CAErC,IAAI,OAAO,WAAW,WAClB,OAAO,QAAQ,QAAQ,IAAI;CAE/B,IAAI,UAAU,KAAA,GACV,SAAS,MAAM,EAAE,QAAQ,UAAU,CAAC;CAExC,YAAY,OAAO,sCAAsC,CAAC,MACrD,WAAW,OAAO,OACvB;CACA,OAAO,QACF,MAAM,QAAQ;EACX,MAAM,OAAO,OAAO,OAAO,KAAK,IAAI,IAAI,IAAI,QAAQ,KAAA;EACpD,OAAO,SAAS,KAAA,IAAY,KAAK,CAAC,CAAC,MAAM,WAAW,OAAO,OAAO,IAAI;CAC1E,CAAC,CAAC,CACD,MACI,SAAS;EACN,IAAI,SAAS,MAAM;GACf,QAAQ,KAAK,uCAAuC,KAAI,GAAI;GAC5D,SAAS,MAAM,EAAE,QAAQ,UAAU,CAAC;EACxC,OACI,SAAS,MAAM;GAAE,QAAQ;GAAU;EAAK,CAAC;EAE7C,OAAO;CACX,IACC,UAAmB;EAEhB,QAAQ,OAAO,IAAI;EACnB,UAAU;EACV,MAAM;CACV,CACJ;AACR;;;;;;;;AASA,SAAgB,aAAa,MAA6B;CACtD,MAAM,WAAW,WAAW,IAAI,IAAI;CACpC,IAAI,aAAa,KAAA,GACb,OAAO;CAEX,MAAM,aAA4B,EAAE,OAAO,IAAI,WAAW,GAAG,YAAY;EACrE,MAAM,QAAQ,qBACV,iBACM,QAAQ,IAAI,IAAI,SAChB,QAAQ,IAAI,IAAI,CAC1B;EACA,gBAAgB;GACZ,IAAI,QAAQ,IAAI,IAAI,MAAM,KAAA,GACtB,cAAc,IAAI,CAAC,CAAC,YAAY,KAAA,CAAS;EAEjD,GAAG,CAAA,CAAE;EACL,IAAI,OAAO,WAAW,UAAU;GAC5B,MAAM,SAAS,MAAM;GACrB,OAAO,oBAAC,QAAD;IAAc;IAAiB;IAAW,GAAI;GAAM,CAAA;EAC/D;EACA,IAAI,OAAO,WAAW,WAClB,OAAO;EAEX,MAAM,EAAE,eAAe,QAAQ,cAAc,OAAO,SAAS;EAC7D,OACI,oBAAC,OAAD;GACI,OAAO;GACP,QAAQ;GACR,SAAQ;GACG;GACX,eAAa;GACb,cAAY;GACN;GACN,gBAAa;EAAE,CAAA;CAG3B;CACA,UAAU,cAAc,aAAa,KAAI;CACzC,WAAW,IAAI,MAAM,SAAS;CAC9B,OAAO;AACX"}
+{"version":3,"file":"namedIcons.js","names":[],"sources":["../../src/icon/namedIcons.tsx"],"sourcesContent":["import { createContext, use, useEffect, useSyncExternalStore } from 'react';\n\nimport type { IconComponent } from './Icon';\n\n/**\n * Loads an icon component from its name, as definitions name icons (`\"icon\": \"send\"`), or\n * resolves with `null` for a name it doesn't know. `lucideIconLoader` of `@panneau/ui/named-icons`\n * loads any Lucide icon; an app can load only the icons its definitions use.\n */\nexport type NamedIconLoader = (name: string) => Promise<IconComponent | null>;\n\ntype Entry =\n    { status: 'loading' } | { status: 'loaded'; icon: IconComponent } | { status: 'missing' };\n\n/** Icons by name, for each loader. */\nconst caches = new WeakMap<NamedIconLoader, Map<string, Entry>>();\nconst components = new Map<string, IconComponent>();\nconst listeners = new Set<() => void>();\n\n/** The loader of named icons, set by `PanneauRoot`'s `iconLoader`. */\nexport const NamedIconLoaderContext = createContext<NamedIconLoader | null>(null);\n\nfunction cache(loader: NamedIconLoader): Map<string, Entry> {\n    let entries = caches.get(loader);\n    if (entries === undefined) {\n        entries = new Map();\n        caches.set(loader, entries);\n    }\n    return entries;\n}\n\nfunction subscribe(listener: () => void): () => void {\n    listeners.add(listener);\n    return () => {\n        listeners.delete(listener);\n    };\n}\n\nfunction setEntry(loader: NamedIconLoader, name: string, entry: Entry | undefined) {\n    if (entry === undefined) {\n        cache(loader).delete(name);\n    } else {\n        cache(loader).set(name, entry);\n    }\n    listeners.forEach((listener) => listener());\n}\n\n/**\n * Loads an icon by its name with a loader, once per loader and name, and resolves with its\n * component, or with `null` for a name the loader doesn't know.\n */\nexport function loadNamedIcon(\n    name: string,\n    loader: NamedIconLoader,\n): Promise<IconComponent | null> {\n    const entry = cache(loader).get(name);\n    if (entry?.status === 'loaded') {\n        return Promise.resolve(entry.icon);\n    }\n    if (entry?.status === 'missing') {\n        return Promise.resolve(null);\n    }\n    if (entry === undefined) {\n        setEntry(loader, name, { status: 'loading' });\n    }\n    return loader(name).then(\n        (icon) => {\n            if (icon === null) {\n                console.warn(`[panneau] No icon named \"${name}\".`);\n                setEntry(loader, name, { status: 'missing' });\n            } else {\n                setEntry(loader, name, { status: 'loaded', icon });\n            }\n            return icon;\n        },\n        (error: unknown) => {\n            // A chunk that failed to load (offline): the icon is loaded again when it mounts.\n            setEntry(loader, name, undefined);\n            throw error;\n        },\n    );\n}\n\nlet warnedWithoutLoader = false;\n\n/**\n * An icon component for an icon name, as definitions name them (`\"icon\": \"send\"`). It goes\n * wherever an icon component goes (`<Button icon={getNamedIcon('send')}>`), and is the same\n * component for the same name. It loads the icon with the `iconLoader` of `PanneauRoot` the first\n * time it renders, and renders an empty space of the same size until then, or without a loader. A\n * name the loader doesn't know renders nothing.\n */\nexport function getNamedIcon(name: string): IconComponent {\n    const existing = components.get(name);\n    if (existing !== undefined) {\n        return existing;\n    }\n    const NamedIcon: IconComponent = ({ size = 24, className, ...props }) => {\n        const loader = use(NamedIconLoaderContext);\n        const entry = useSyncExternalStore(\n            subscribe,\n            () => (loader !== null ? cache(loader).get(name) : undefined),\n            () => (loader !== null ? cache(loader).get(name) : undefined),\n        );\n        useEffect(() => {\n            if (loader === null) {\n                if (!warnedWithoutLoader) {\n                    warnedWithoutLoader = true;\n                    console.warn(\n                        `[panneau] The icon \"${name}\" is named, but PanneauRoot has no iconLoader: pass lucideIconLoader from @panneau/ui/named-icons.`,\n                    );\n                }\n                return;\n            }\n            if (cache(loader).get(name) === undefined) {\n                loadNamedIcon(name, loader).catch(() => undefined);\n            }\n        }, [loader]);\n        if (entry?.status === 'loaded') {\n            const Loaded = entry.icon;\n            return <Loaded size={size} className={className} {...props} />;\n        }\n        if (entry?.status === 'missing') {\n            return null;\n        }\n        const { 'aria-hidden': hidden, 'aria-label': label, role } = props;\n        return (\n            <svg\n                width={size}\n                height={size}\n                viewBox=\"0 0 24 24\"\n                className={className}\n                aria-hidden={hidden}\n                aria-label={label}\n                role={role}\n                data-loading=\"\"\n            />\n        );\n    };\n    NamedIcon.displayName = `NamedIcon(${name})`;\n    components.set(name, NamedIcon);\n    return NamedIcon;\n}\n"],"mappings":";;;;AAeA,IAAM,yBAAS,IAAI,QAA6C;AAChE,IAAM,6BAAa,IAAI,IAA2B;AAClD,IAAM,4BAAY,IAAI,IAAgB;;AAGtC,IAAa,yBAAyB,cAAsC,IAAI;AAEhF,SAAS,MAAM,QAA6C;CACxD,IAAI,UAAU,OAAO,IAAI,MAAM;CAC/B,IAAI,YAAY,KAAA,GAAW;EACvB,0BAAU,IAAI,IAAI;EAClB,OAAO,IAAI,QAAQ,OAAO;CAC9B;CACA,OAAO;AACX;AAEA,SAAS,UAAU,UAAkC;CACjD,UAAU,IAAI,QAAQ;CACtB,aAAa;EACT,UAAU,OAAO,QAAQ;CAC7B;AACJ;AAEA,SAAS,SAAS,QAAyB,MAAc,OAA0B;CAC/E,IAAI,UAAU,KAAA,GACV,MAAM,MAAM,CAAC,CAAC,OAAO,IAAI;MAEzB,MAAM,MAAM,CAAC,CAAC,IAAI,MAAM,KAAK;CAEjC,UAAU,SAAS,aAAa,SAAS,CAAC;AAC9C;;;;;AAMA,SAAgB,cACZ,MACA,QAC6B;CAC7B,MAAM,QAAQ,MAAM,MAAM,CAAC,CAAC,IAAI,IAAI;CACpC,IAAI,OAAO,WAAW,UAClB,OAAO,QAAQ,QAAQ,MAAM,IAAI;CAErC,IAAI,OAAO,WAAW,WAClB,OAAO,QAAQ,QAAQ,IAAI;CAE/B,IAAI,UAAU,KAAA,GACV,SAAS,QAAQ,MAAM,EAAE,QAAQ,UAAU,CAAC;CAEhD,OAAO,OAAO,IAAI,CAAC,CAAC,MACf,SAAS;EACN,IAAI,SAAS,MAAM;GACf,QAAQ,KAAK,4BAA4B,KAAI,GAAI;GACjD,SAAS,QAAQ,MAAM,EAAE,QAAQ,UAAU,CAAC;EAChD,OACI,SAAS,QAAQ,MAAM;GAAE,QAAQ;GAAU;EAAK,CAAC;EAErD,OAAO;CACX,IACC,UAAmB;EAEhB,SAAS,QAAQ,MAAM,KAAA,CAAS;EAChC,MAAM;CACV,CACJ;AACJ;AAEA,IAAI,sBAAsB;;;;;;;;AAS1B,SAAgB,aAAa,MAA6B;CACtD,MAAM,WAAW,WAAW,IAAI,IAAI;CACpC,IAAI,aAAa,KAAA,GACb,OAAO;CAEX,MAAM,aAA4B,EAAE,OAAO,IAAI,WAAW,GAAG,YAAY;EACrE,MAAM,SAAS,IAAI,sBAAsB;EACzC,MAAM,QAAQ,qBACV,iBACO,WAAW,OAAO,MAAM,MAAM,CAAC,CAAC,IAAI,IAAI,IAAI,KAAA,SAC5C,WAAW,OAAO,MAAM,MAAM,CAAC,CAAC,IAAI,IAAI,IAAI,KAAA,CACvD;EACA,gBAAgB;GACZ,IAAI,WAAW,MAAM;IACjB,IAAI,CAAC,qBAAqB;KACtB,sBAAsB;KACtB,QAAQ,KACJ,uBAAuB,KAAI,mGAC/B;IACJ;IACA;GACJ;GACA,IAAI,MAAM,MAAM,CAAC,CAAC,IAAI,IAAI,MAAM,KAAA,GAC5B,cAAc,MAAM,MAAM,CAAC,CAAC,YAAY,KAAA,CAAS;EAEzD,GAAG,CAAC,MAAM,CAAC;EACX,IAAI,OAAO,WAAW,UAAU;GAC5B,MAAM,SAAS,MAAM;GACrB,OAAO,oBAAC,QAAD;IAAc;IAAiB;IAAW,GAAI;GAAM,CAAA;EAC/D;EACA,IAAI,OAAO,WAAW,WAClB,OAAO;EAEX,MAAM,EAAE,eAAe,QAAQ,cAAc,OAAO,SAAS;EAC7D,OACI,oBAAC,OAAD;GACI,OAAO;GACP,QAAQ;GACR,SAAQ;GACG;GACX,eAAa;GACb,cAAY;GACN;GACN,gBAAa;EAAE,CAAA;CAG3B;CACA,UAAU,cAAc,aAAa,KAAI;CACzC,WAAW,IAAI,MAAM,SAAS;CAC9B,OAAO;AACX"}

package/dist/icon-button/IconButton.css

@@ -1,9 +1,9 @@
 /* Doubled classes: more specific than the button's own padding, whatever the CSS order. */
-.panneau-iconButton-eXWLoz.panneau-iconButton-eXWLoz {
+.panneau-icon-button.panneau-icon-button {
     width: var(--panneau-control-height);
     padding: 0;
 }
 
-.panneau-iconButton-eXWLoz.panneau-sm-i6-bGf {
+.panneau-icon-button.panneau-icon-button-sm {
     width: var(--panneau-control-height-sm);
 }

package/dist/icon-button/IconButton.d.ts

@@ -11,5 +11,5 @@ export interface IconButtonProps extends Omit<ButtonProps, 'icon' | 'iconEnd' |
     style?: CSSProperties;
 }
 /** A square button with only an icon. Its label is announced and shown as a tooltip. */
-export declare function IconButton({ icon, label, variant, size, showTooltip, className, ...props }: IconButtonProps): import("react").JSX.Element;
+export declare function IconButton({ icon, label, appearance, size, showTooltip, className, ...props }: IconButtonProps): import("react").JSX.Element;
 //# sourceMappingURL=IconButton.d.ts.map

package/dist/icon-button/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAKlD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CACzC,WAAW,EACX,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,YAAY,CAC/D;IACG,IAAI,EAAE,aAAa,CAAC;IACpB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,wFAAwF;AACxF,wBAAgB,UAAU,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,OAAiB,EACjB,IAAW,EACX,WAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,eAAe,+BAejB"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAKlD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CACzC,WAAW,EACX,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,YAAY,CAC/D;IACG,IAAI,EAAE,aAAa,CAAC;IACpB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,wFAAwF;AACxF,wBAAgB,UAAU,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,UAAoB,EACpB,IAAW,EACX,WAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,eAAe,+BAoBjB"}

package/dist/icon-button/IconButton.js

@@ -5,14 +5,14 @@ import IconButton_module_default from "./IconButton.module.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/icon-button/IconButton.tsx
 /** A square button with only an icon. Its label is announced and shown as a tooltip. */
-function IconButton({ icon, label, variant = "ghost", size = "md", showTooltip = true, className, ...props }) {
+function IconButton({ icon, label, appearance = "ghost", size = "md", showTooltip = true, className, ...props }) {
 	const button = /* @__PURE__ */ jsx(Button, {
 		...props,
-		variant,
+		appearance,
 		size,
 		icon,
 		"aria-label": label,
-		className: cx(IconButton_module_default.iconButton, size === "sm" && IconButton_module_default.sm, className)
+		className: cx("panneau-icon-button", IconButton_module_default.iconButton, size === "sm" && IconButton_module_default.sm, className)
 	});
 	if (!showTooltip) return button;
 	return /* @__PURE__ */ jsx(Tooltip, {

package/dist/icon-button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":["styles"],"sources":["../../src/icon-button/IconButton.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport { Button, type ButtonProps } from '../button/Button';\nimport type { IconComponent } from '../icon/Icon';\nimport { Tooltip } from '../tooltip/Tooltip';\nimport { cx } from '../utils/cx';\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps extends Omit<\n    ButtonProps,\n    'icon' | 'iconEnd' | 'children' | 'fullWidth' | 'aria-label'\n> {\n    icon: IconComponent;\n    /** Accessible label, also shown as a tooltip. */\n    label: string;\n    /** Shows the label in a tooltip on hover and focus. Defaults to true. */\n    showTooltip?: boolean;\n    className?: string;\n    style?: CSSProperties;\n}\n\n/** A square button with only an icon. Its label is announced and shown as a tooltip. */\nexport function IconButton({\n    icon,\n    label,\n    variant = 'ghost',\n    size = 'md',\n    showTooltip = true,\n    className,\n    ...props\n}: IconButtonProps) {\n    const button = (\n        <Button\n            {...props}\n            variant={variant}\n            size={size}\n            icon={icon}\n            aria-label={label}\n            className={cx(styles.iconButton, size === 'sm' && styles.sm, className)}\n        />\n    );\n    if (!showTooltip) {\n        return button;\n    }\n    return <Tooltip content={label}>{button}</Tooltip>;\n}\n"],"mappings":";;;;;;;AAsBA,SAAgB,WAAW,EACvB,MACA,OACA,UAAU,SACV,OAAO,MACP,cAAc,MACd,WACA,GAAG,SACa;CAChB,MAAM,SACF,oBAAC,QAAD;EACI,GAAI;EACK;EACH;EACA;EACN,cAAY;EACZ,WAAW,GAAGA,0BAAO,YAAY,SAAS,QAAQA,0BAAO,IAAI,SAAS;CAAE,CAAA;CAGhF,IAAI,CAAC,aACD,OAAO;CAEX,OAAO,oBAAC,SAAD;EAAS,SAAS;EAAQ,UAAA;CAAgB,CAAA;AACrD"}
+{"version":3,"file":"IconButton.js","names":["styles"],"sources":["../../src/icon-button/IconButton.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport { Button, type ButtonProps } from '../button/Button';\nimport type { IconComponent } from '../icon/Icon';\nimport { Tooltip } from '../tooltip/Tooltip';\nimport { cx } from '../utils/cx';\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps extends Omit<\n    ButtonProps,\n    'icon' | 'iconEnd' | 'children' | 'fullWidth' | 'aria-label'\n> {\n    icon: IconComponent;\n    /** Accessible label, also shown as a tooltip. */\n    label: string;\n    /** Shows the label in a tooltip on hover and focus. Defaults to true. */\n    showTooltip?: boolean;\n    className?: string;\n    style?: CSSProperties;\n}\n\n/** A square button with only an icon. Its label is announced and shown as a tooltip. */\nexport function IconButton({\n    icon,\n    label,\n    appearance = 'ghost',\n    size = 'md',\n    showTooltip = true,\n    className,\n    ...props\n}: IconButtonProps) {\n    const button = (\n        <Button\n            {...props}\n            appearance={appearance}\n            size={size}\n            icon={icon}\n            aria-label={label}\n            className={cx(\n                'panneau-icon-button',\n                styles.iconButton,\n                size === 'sm' && styles.sm,\n                className,\n            )}\n        />\n    );\n    if (!showTooltip) {\n        return button;\n    }\n    return <Tooltip content={label}>{button}</Tooltip>;\n}\n"],"mappings":";;;;;;;AAsBA,SAAgB,WAAW,EACvB,MACA,OACA,aAAa,SACb,OAAO,MACP,cAAc,MACd,WACA,GAAG,SACa;CAChB,MAAM,SACF,oBAAC,QAAD;EACI,GAAI;EACQ;EACN;EACA;EACN,cAAY;EACZ,WAAW,GACP,uBACAA,0BAAO,YACP,SAAS,QAAQA,0BAAO,IACxB,SACJ;CAAE,CAAA;CAGV,IAAI,CAAC,aACD,OAAO;CAEX,OAAO,oBAAC,SAAD;EAAS,SAAS;EAAQ,UAAA;CAAgB,CAAA;AACrD"}

package/dist/icon-button/IconButton.module.js

@@ -1,7 +1,7 @@
 import "./IconButton.css";
 //#region src/icon-button/IconButton.module.css
-var iconButton = "panneau-iconButton-eXWLoz";
-var sm = "panneau-sm-i6-bGf";
+var iconButton = "panneau-icon-button";
+var sm = "panneau-icon-button-sm";
 var IconButton_module_default = {
 	iconButton,
 	sm

package/dist/index.d.ts

@@ -1,7 +1,11 @@
-export { Alert, type AlertProps, type AlertTone } from './alert/Alert';
-export { Badge, type BadgeProps, type BadgeTone } from './badge/Badge';
-export { Button, type ButtonProps, type ButtonVariant } from './button/Button';
+export { Alert, type AlertAppearance, type AlertProps, type AlertTone, type AlertVariants, } from './alert/Alert';
+export { Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, type BadgeVariants, } from './badge/Badge';
+export { Button, type ButtonAppearance, type ButtonProps, type ButtonVariant, type ButtonVariants, } from './button/Button';
 export { Card, type CardProps } from './card/Card';
+export { Container, type ContainerProps } from './container/Container';
+export { Divider, type DividerProps } from './divider/Divider';
+export { Grid, GridItem, type GridItemProps, type GridProps } from './grid/Grid';
+export { Heading, type HeadingLevel, type HeadingProps, type HeadingSize } from './heading/Heading';
 export { Checkbox, type CheckboxProps } from './checkbox/Checkbox';
 export { type ChoiceChromeProps } from './checkbox/ChoiceChrome';
 export { ComboBox, type ComboBoxItem, type ComboBoxProps } from './combo-box/ComboBox';
@@ -11,7 +15,7 @@ export { Disclosure, type DisclosureProps } from './disclosure/Disclosure';
 export { type FieldChromeProps } from './field/FieldParts';
 export { Fieldset, type FieldsetProps } from './field/Fieldset';
 export { Icon, type IconComponent, type IconProps, type IconSize } from './icon/Icon';
-export { getNamedIcon, loadNamedIcon } from './icon/namedIcons';
+export { type NamedIconLoader, getNamedIcon, loadNamedIcon } from './icon/namedIcons';
 export { IconButton, type IconButtonProps } from './icon-button/IconButton';
 export { usePanneauIntl } from './intl/usePanneauIntl';
 export { Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, } from './menu/Menu';
@@ -19,14 +23,30 @@ export { NumberInput, type NumberInputProps } from './number-input/NumberInput';
 export { Popover, type PopoverProps, PopoverTrigger } from './popover/Popover';
 export { RadioGroup, type RadioGroupProps } from './radio-group/RadioGroup';
 export { PanneauRoot, type PanneauRootProps, usePortalContainer } from './root/PanneauRoot';
+export { ThemeScope, type ThemeScopeProps } from './root/ThemeScope';
 export { type MultipleSelectProps, type OptionValue, Select, type SelectBaseProps, type SelectOption, type SelectProps, type SingleSelectProps, } from './select/Select';
+export { Inline, type InlineProps } from './inline/Inline';
+export { BREAKPOINTS, type Breakpoint, type Justification, type Responsive, type Space, } from './layout/responsive';
+export { Prose, type ProseProps } from './prose/Prose';
 export { Spinner, type SpinnerProps } from './spinner/Spinner';
+export { Stack, type StackProps } from './stack/Stack';
 export { Switch, type SwitchProps } from './switch/Switch';
 export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, } from './tabs/Tabs';
+export { Text, type TextFamily, type TextProps, type TextSize } from './text/Text';
 export { TextArea, type TextAreaProps } from './text-area/TextArea';
 export { TextInput, type TextInputProps } from './text-input/TextInput';
-export { bootstrapTheme } from './theme/bootstrap';
-export { type ColorScheme, type Theme } from './theme/theme';
+export { bootstrapTheme, bootstrapTone } from './theme/bootstrap';
+export { CHART_CATEGORICAL_COUNT, CHART_SEQUENTIAL_COUNT, chartColors } from './theme/chartColors';
+export { type ThemeContrastCheck, type ThemeReport, checkTheme } from './theme/checkTheme';
+export { type ColorDifferenceCheck, type ColorVisionDeficiency, checkColorDifferences, } from './theme/colorVision';
+export { type Rgb } from './theme/color';
+export { type ComponentTokens, defineComponentTokens } from './theme/componentTokens';
+export { type ComponentTokenName, componentTokens } from './theme/components';
+export { type PaletteTokenName, type PanneauTokens, type ThemeDefinition, type ThemeTokens, type TokenName, defineTheme, findUnknownTokens, mergeThemes, } from './theme/defineTheme';
+export { SEMANTIC_TOKENS, type SemanticTokenName } from './theme/semanticTokens';
+export { type ThemeFont, type ThemeFontFace, type ThemeFontStylesheet } from './theme/fonts';
+export { type ColorScheme, type Density, type Theme } from './theme/theme';
+export { BUILT_IN_TONES, type PanneauTones, type Tone, type ToneInput, type ToneSurfaces, type ToneValues, deriveTone, toneClassName, } from './theme/tones';
 export { TimeInput, type TimeInputProps } from './time-input/TimeInput';
 export { type ToastContent, type ToastOptions, type ToastTone, type Toasts, useToast, } from './toast/Toast';
 export { Tooltip, type TooltipProps } from './tooltip/Tooltip';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,EACL,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,aAAa,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EACH,KAAK,EACL,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,aAAa,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EACH,MAAM,EACN,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,cAAc,GACtB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AACjF,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACpG,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AACtF,OAAO,EAAE,KAAK,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EACH,IAAI,EACJ,QAAQ,EACR,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,aAAa,EACb,WAAW,GACd,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EACH,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAChB,MAAM,EACN,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,iBAAiB,GACzB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EACH,WAAW,EACX,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,KAAK,GACb,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EACH,GAAG,EACH,OAAO,EACP,KAAK,YAAY,EACjB,QAAQ,EACR,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,IAAI,EACJ,KAAK,SAAS,GACjB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,IAAI,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AACnF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACnG,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC3F,OAAO,EACH,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,qBAAqB,GACxB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,eAAe,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACtF,OAAO,EAAE,KAAK,kBAAkB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EACH,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,WAAW,EACX,iBAAiB,EACjB,WAAW,GACd,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,KAAK,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AACjF,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EACH,cAAc,EACd,KAAK,YAAY,EACjB,KAAK,IAAI,EACT,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,UAAU,EACV,aAAa,GAChB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EACH,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,MAAM,EACX,QAAQ,GACX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -1,7 +1,9 @@
 import { Icon } from "./icon/Icon.js";
 import { usePanneauIntl } from "./intl/usePanneauIntl.js";
 import { Spinner } from "./spinner/Spinner.js";
+import { BUILT_IN_TONES, deriveTone, toneClassName } from "./theme/tones.js";
 import { Button } from "./button/Button.js";
+import { getNamedIcon, loadNamedIcon } from "./icon/namedIcons.js";
 import { useToast } from "./toast/Toast.js";
 import { PanneauRoot, usePortalContainer } from "./root/PanneauRoot.js";
 import { Tooltip } from "./tooltip/Tooltip.js";
@@ -9,6 +11,11 @@ import { IconButton } from "./icon-button/IconButton.js";
 import { Alert } from "./alert/Alert.js";
 import { Badge } from "./badge/Badge.js";
 import { Card } from "./card/Card.js";
+import { Container } from "./container/Container.js";
+import { Divider } from "./divider/Divider.js";
+import { BREAKPOINTS } from "./layout/responsive.js";
+import { Grid, GridItem } from "./grid/Grid.js";
+import { Heading } from "./heading/Heading.js";
 import { Checkbox } from "./checkbox/Checkbox.js";
 import { Popover, PopoverTrigger } from "./popover/Popover.js";
 import { ComboBox } from "./combo-box/ComboBox.js";
@@ -16,15 +23,26 @@ import { DatePicker } from "./date-picker/DatePicker.js";
 import { Dialog, DialogTrigger } from "./dialog/Dialog.js";
 import { Disclosure } from "./disclosure/Disclosure.js";
 import { Fieldset } from "./field/Fieldset.js";
-import { getNamedIcon, loadNamedIcon } from "./icon/namedIcons.js";
 import { Menu, MenuItem, MenuSeparator, MenuTrigger } from "./menu/Menu.js";
 import { NumberInput } from "./number-input/NumberInput.js";
 import { RadioGroup } from "./radio-group/RadioGroup.js";
+import { ThemeScope } from "./root/ThemeScope.js";
 import { Select } from "./select/Select.js";
+import { Inline } from "./inline/Inline.js";
+import { Prose } from "./prose/Prose.js";
+import { Stack } from "./stack/Stack.js";
 import { Switch } from "./switch/Switch.js";
 import { Tab, TabList, TabPanel, Tabs } from "./tabs/Tabs.js";
+import { Text } from "./text/Text.js";
 import { TextArea } from "./text-area/TextArea.js";
 import { TextInput } from "./text-input/TextInput.js";
-import { bootstrapTheme } from "./theme/bootstrap.js";
+import { bootstrapTheme, bootstrapTone } from "./theme/bootstrap.js";
+import { CHART_CATEGORICAL_COUNT, CHART_SEQUENTIAL_COUNT, chartColors } from "./theme/chartColors.js";
+import { checkColorDifferences } from "./theme/colorVision.js";
+import { checkTheme } from "./theme/checkTheme.js";
+import { defineComponentTokens } from "./theme/componentTokens.js";
+import { componentTokens } from "./theme/components.js";
+import { SEMANTIC_TOKENS } from "./theme/semanticTokens.js";
+import { defineTheme, findUnknownTokens, mergeThemes } from "./theme/defineTheme.js";
 import { TimeInput } from "./time-input/TimeInput.js";
-export { Alert, Badge, Button, Card, Checkbox, ComboBox, DatePicker, Dialog, DialogTrigger, Disclosure, Fieldset, Icon, IconButton, Menu, MenuItem, MenuSeparator, MenuTrigger, NumberInput, PanneauRoot, Popover, PopoverTrigger, RadioGroup, Select, Spinner, Switch, Tab, TabList, TabPanel, Tabs, TextArea, TextInput, TimeInput, Tooltip, bootstrapTheme, getNamedIcon, loadNamedIcon, usePanneauIntl, usePortalContainer, useToast };
+export { Alert, BREAKPOINTS, BUILT_IN_TONES, Badge, Button, CHART_CATEGORICAL_COUNT, CHART_SEQUENTIAL_COUNT, Card, Checkbox, ComboBox, Container, DatePicker, Dialog, DialogTrigger, Disclosure, Divider, Fieldset, Grid, GridItem, Heading, Icon, IconButton, Inline, Menu, MenuItem, MenuSeparator, MenuTrigger, NumberInput, PanneauRoot, Popover, PopoverTrigger, Prose, RadioGroup, SEMANTIC_TOKENS, Select, Spinner, Stack, Switch, Tab, TabList, TabPanel, Tabs, Text, TextArea, TextInput, ThemeScope, TimeInput, Tooltip, bootstrapTheme, bootstrapTone, chartColors, checkColorDifferences, checkTheme, componentTokens, defineComponentTokens, defineTheme, deriveTone, findUnknownTokens, getNamedIcon, loadNamedIcon, mergeThemes, toneClassName, usePanneauIntl, usePortalContainer, useToast };

package/dist/inline/Inline.css

@@ -0,0 +1,142 @@
+/* A horizontal row that wraps: each prop can change at the breakpoints of the nearest container. */
+
+.panneau-inline {
+    display: flex;
+    flex-wrap: wrap;
+    min-width: 0;
+}
+
+.panneau-inline-nowrap {
+    flex-wrap: nowrap;
+}
+/* Responsive values are set inline; children reset them so that they aren't inherited. */
+.panneau-inline > * {
+    --_panneau-inline-gap-base: initial;
+    --_panneau-inline-gap-sm: initial;
+    --_panneau-inline-gap-md: initial;
+    --_panneau-inline-gap-lg: initial;
+    --_panneau-inline-gap-xl: initial;
+    --_panneau-inline-align-base: initial;
+    --_panneau-inline-align-sm: initial;
+    --_panneau-inline-align-md: initial;
+    --_panneau-inline-align-lg: initial;
+    --_panneau-inline-align-xl: initial;
+    --_panneau-inline-justify-base: initial;
+    --_panneau-inline-justify-sm: initial;
+    --_panneau-inline-justify-md: initial;
+    --_panneau-inline-justify-lg: initial;
+    --_panneau-inline-justify-xl: initial;
+}
+
+.panneau-inline {
+    gap: var(--_panneau-inline-gap-base, var(--panneau-inline-gap, var(--panneau-space-2)));
+    align-items: var(--_panneau-inline-align-base, center);
+    justify-content: var(--_panneau-inline-justify-base, start);
+}
+
+@container (min-width: 40rem) {
+    .panneau-inline {
+        gap: var(
+            --_panneau-inline-gap-sm,
+            var(--_panneau-inline-gap-base, var(--panneau-inline-gap, var(--panneau-space-2)))
+        );
+        align-items: var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center));
+        justify-content: var(
+            --_panneau-inline-justify-sm,
+            var(--_panneau-inline-justify-base, start)
+        );
+    }
+}
+
+@container (min-width: 48rem) {
+    .panneau-inline {
+        gap: var(
+            --_panneau-inline-gap-md,
+            var(
+                --_panneau-inline-gap-sm,
+                var(--_panneau-inline-gap-base, var(--panneau-inline-gap, var(--panneau-space-2)))
+            )
+        );
+        align-items: var(
+            --_panneau-inline-align-md,
+            var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center))
+        );
+        justify-content: var(
+            --_panneau-inline-justify-md,
+            var(--_panneau-inline-justify-sm, var(--_panneau-inline-justify-base, start))
+        );
+    }
+}
+
+@container (min-width: 64rem) {
+    .panneau-inline {
+        gap: var(
+            --_panneau-inline-gap-lg,
+            var(
+                --_panneau-inline-gap-md,
+                var(
+                    --_panneau-inline-gap-sm,
+                    var(
+                        --_panneau-inline-gap-base,
+                        var(--panneau-inline-gap, var(--panneau-space-2))
+                    )
+                )
+            )
+        );
+        align-items: var(
+            --_panneau-inline-align-lg,
+            var(
+                --_panneau-inline-align-md,
+                var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center))
+            )
+        );
+        justify-content: var(
+            --_panneau-inline-justify-lg,
+            var(
+                --_panneau-inline-justify-md,
+                var(--_panneau-inline-justify-sm, var(--_panneau-inline-justify-base, start))
+            )
+        );
+    }
+}
+
+@container (min-width: 80rem) {
+    .panneau-inline {
+        gap: var(
+            --_panneau-inline-gap-xl,
+            var(
+                --_panneau-inline-gap-lg,
+                var(
+                    --_panneau-inline-gap-md,
+                    var(
+                        --_panneau-inline-gap-sm,
+                        var(
+                            --_panneau-inline-gap-base,
+                            var(--panneau-inline-gap, var(--panneau-space-2))
+                        )
+                    )
+                )
+            )
+        );
+        align-items: var(
+            --_panneau-inline-align-xl,
+            var(
+                --_panneau-inline-align-lg,
+                var(
+                    --_panneau-inline-align-md,
+                    var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center))
+                )
+            )
+        );
+        justify-content: var(
+            --_panneau-inline-justify-xl,
+            var(
+                --_panneau-inline-justify-lg,
+                var(
+                    --_panneau-inline-justify-md,
+                    var(--_panneau-inline-justify-sm, var(--_panneau-inline-justify-base, start))
+                )
+            )
+        );
+    }
+}

package/dist/inline/Inline.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react';
+import { type Justification, type Responsive, type Space } from '../layout/responsive';
+export interface InlineProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to `div`. */
+    as?: 'div' | 'section' | 'header' | 'footer' | 'nav' | 'ul' | 'ol' | 'span';
+    /** Space between items, from the space scale. Defaults to the `--panneau-inline-gap` token. */
+    gap?: Responsive<Space>;
+    /** Vertical alignment of the items. Defaults to `center`. */
+    align?: Responsive<'start' | 'center' | 'end' | 'stretch' | 'baseline'>;
+    /** Horizontal distribution of the items. Defaults to `start`. */
+    justify?: Responsive<Justification>;
+    /** Items wrap to the next line when they don't fit. Defaults to `true`. */
+    wrap?: boolean;
+}
+/** Items side by side, wrapping when they don't fit, like Bootstrap's `.hstack`. */
+export declare function Inline({ as: Element, gap, align, justify, wrap, className, style, ...props }: InlineProps): import("react").JSX.Element;
+//# sourceMappingURL=Inline.d.ts.map

package/dist/inline/Inline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../src/inline/Inline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EACH,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,KAAK,EAKb,MAAM,sBAAsB,CAAC;AAI9B,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,4CAA4C;IAC5C,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC5E,+FAA+F;IAC/F,GAAG,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IACxB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;IACxE,iEAAiE;IACjE,OAAO,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IACpC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,oFAAoF;AACpF,wBAAgB,MAAM,CAAC,EACnB,EAAE,EAAE,OAAe,EACnB,GAAG,EACH,KAAK,EACL,OAAO,EACP,IAAW,EACX,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACX,EAAE,WAAW,+BAeb"}