@panneau/ui 5.0.0-alpha.0 → 5.0.0-alpha.2

package/dist/grid/Grid.css

@@ -0,0 +1,174 @@
+/* A grid: each prop can change at the breakpoints of the nearest container. */
+
+.panneau-grid {
+    display: grid;
+    min-width: 0;
+}
+/* Responsive values are set inline; children reset them so that they aren't inherited. */
+.panneau-grid > * {
+    --_panneau-grid-columns-base: initial;
+    --_panneau-grid-columns-sm: initial;
+    --_panneau-grid-columns-md: initial;
+    --_panneau-grid-columns-lg: initial;
+    --_panneau-grid-columns-xl: initial;
+    --_panneau-grid-gap-base: initial;
+    --_panneau-grid-gap-sm: initial;
+    --_panneau-grid-gap-md: initial;
+    --_panneau-grid-gap-lg: initial;
+    --_panneau-grid-gap-xl: initial;
+    --_panneau-grid-align-base: initial;
+    --_panneau-grid-align-sm: initial;
+    --_panneau-grid-align-md: initial;
+    --_panneau-grid-align-lg: initial;
+    --_panneau-grid-align-xl: initial;
+}
+
+.panneau-grid {
+    gap: var(--_panneau-grid-gap-base, var(--panneau-grid-gap, var(--panneau-space-4)));
+    align-items: var(--_panneau-grid-align-base, stretch);
+}
+
+@container (min-width: 40rem) {
+    .panneau-grid {
+        gap: var(
+            --_panneau-grid-gap-sm,
+            var(--_panneau-grid-gap-base, var(--panneau-grid-gap, var(--panneau-space-4)))
+        );
+        align-items: var(--_panneau-grid-align-sm, var(--_panneau-grid-align-base, stretch));
+    }
+}
+
+@container (min-width: 48rem) {
+    .panneau-grid {
+        gap: var(
+            --_panneau-grid-gap-md,
+            var(
+                --_panneau-grid-gap-sm,
+                var(--_panneau-grid-gap-base, var(--panneau-grid-gap, var(--panneau-space-4)))
+            )
+        );
+        align-items: var(
+            --_panneau-grid-align-md,
+            var(--_panneau-grid-align-sm, var(--_panneau-grid-align-base, stretch))
+        );
+    }
+}
+
+@container (min-width: 64rem) {
+    .panneau-grid {
+        gap: var(
+            --_panneau-grid-gap-lg,
+            var(
+                --_panneau-grid-gap-md,
+                var(
+                    --_panneau-grid-gap-sm,
+                    var(--_panneau-grid-gap-base, var(--panneau-grid-gap, var(--panneau-space-4)))
+                )
+            )
+        );
+        align-items: var(
+            --_panneau-grid-align-lg,
+            var(
+                --_panneau-grid-align-md,
+                var(--_panneau-grid-align-sm, var(--_panneau-grid-align-base, stretch))
+            )
+        );
+    }
+}
+
+@container (min-width: 80rem) {
+    .panneau-grid {
+        gap: var(
+            --_panneau-grid-gap-xl,
+            var(
+                --_panneau-grid-gap-lg,
+                var(
+                    --_panneau-grid-gap-md,
+                    var(
+                        --_panneau-grid-gap-sm,
+                        var(
+                            --_panneau-grid-gap-base,
+                            var(--panneau-grid-gap, var(--panneau-space-4))
+                        )
+                    )
+                )
+            )
+        );
+        align-items: var(
+            --_panneau-grid-align-xl,
+            var(
+                --_panneau-grid-align-lg,
+                var(
+                    --_panneau-grid-align-md,
+                    var(--_panneau-grid-align-sm, var(--_panneau-grid-align-base, stretch))
+                )
+            )
+        );
+    }
+}
+
+.panneau-grid:not(.panneau-grid-auto) {
+    grid-template-columns: repeat(var(--_panneau-grid-columns-base, 1), minmax(0, 1fr));
+}
+
+@container (min-width: 40rem) {
+    .panneau-grid:not(.panneau-grid-auto) {
+        grid-template-columns: repeat(
+            var(--_panneau-grid-columns-sm, var(--_panneau-grid-columns-base, 1)),
+            minmax(0, 1fr)
+        );
+    }
+}
+
+@container (min-width: 48rem) {
+    .panneau-grid:not(.panneau-grid-auto) {
+        grid-template-columns: repeat(
+            var(
+                --_panneau-grid-columns-md,
+                var(--_panneau-grid-columns-sm, var(--_panneau-grid-columns-base, 1))
+            ),
+            minmax(0, 1fr)
+        );
+    }
+}
+
+@container (min-width: 64rem) {
+    .panneau-grid:not(.panneau-grid-auto) {
+        grid-template-columns: repeat(
+            var(
+                --_panneau-grid-columns-lg,
+                var(
+                    --_panneau-grid-columns-md,
+                    var(--_panneau-grid-columns-sm, var(--_panneau-grid-columns-base, 1))
+                )
+            ),
+            minmax(0, 1fr)
+        );
+    }
+}
+
+@container (min-width: 80rem) {
+    .panneau-grid:not(.panneau-grid-auto) {
+        grid-template-columns: repeat(
+            var(
+                --_panneau-grid-columns-xl,
+                var(
+                    --_panneau-grid-columns-lg,
+                    var(
+                        --_panneau-grid-columns-md,
+                        var(--_panneau-grid-columns-sm, var(--_panneau-grid-columns-base, 1))
+                    )
+                )
+            ),
+            minmax(0, 1fr)
+        );
+    }
+}
+
+/* Columns of at least a width, as many as fit: repeat(auto-fit, minmax(...)). */
+.panneau-grid-auto {
+    grid-template-columns: repeat(
+        auto-fit,
+        minmax(min(var(--_panneau-grid-min-item-width), 100%), 1fr)
+    );
+}

package/dist/grid/Grid.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from 'react';
+import { type Responsive, type Space } from '../layout/responsive';
+export interface GridProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to `div`. */
+    as?: 'div' | 'section' | 'ul' | 'ol' | 'dl';
+    /** Number of equal columns: `3`, or `{ base: 1, md: 2, lg: 3 }`. Defaults to 1. */
+    columns?: Responsive<number>;
+    /**
+     * Minimum width of a cell (`'16rem'`): as many columns as fit, like `repeat(auto-fit, ...)`.
+     * It replaces `columns`.
+     */
+    minItemWidth?: string;
+    /** Space between cells, from the space scale. Defaults to the `--panneau-grid-gap` token. */
+    gap?: Responsive<Space>;
+    /** Vertical alignment of the cells in their row. Defaults to `stretch`. */
+    align?: Responsive<'start' | 'center' | 'end' | 'stretch'>;
+}
+/** Cells in columns: a fixed number per breakpoint, or as many as fit. */
+export declare function Grid({ as: Element, columns, minItemWidth, gap, align, className, style, ...props }: GridProps): import("react").JSX.Element;
+export interface GridItemProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to `div`. */
+    as?: 'div' | 'section' | 'article' | 'li';
+    /** Columns the cell spans: a number, or `full` for the whole row. Defaults to 1. */
+    span?: Responsive<number | 'full'>;
+}
+/** A cell of a `Grid` that spans several columns, per breakpoint. */
+export declare function GridItem({ as: Element, span, className, style, ...props }: GridItemProps): import("react").JSX.Element;
+//# sourceMappingURL=Grid.d.ts.map

package/dist/grid/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EACH,KAAK,UAAU,EACf,KAAK,KAAK,EAIb,MAAM,sBAAsB,CAAC;AAK9B,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC1D,4CAA4C;IAC5C,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5C,mFAAmF;IACnF,OAAO,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6FAA6F;IAC7F,GAAG,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IACxB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC,CAAC;CAC9D;AAED,0EAA0E;AAC1E,wBAAgB,IAAI,CAAC,EACjB,EAAE,EAAE,OAAe,EACnB,OAAO,EACP,YAAY,EACZ,GAAG,EACH,KAAK,EACL,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACX,EAAE,SAAS,+BAyBX;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,4CAA4C;IAC5C,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C,oFAAoF;IACpF,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;CACtC;AAED,qEAAqE;AACrE,wBAAgB,QAAQ,CAAC,EAAE,EAAE,EAAE,OAAe,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAehG"}

package/dist/grid/Grid.js

@@ -0,0 +1,31 @@
+import { cx } from "../utils/cx.js";
+import { responsiveVariables, space, withVariables } from "../layout/responsive.js";
+import Grid_module_default from "./Grid.module.js";
+import GridItem_module_default from "./GridItem.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/grid/Grid.tsx
+/** Cells in columns: a fixed number per breakpoint, or as many as fit. */
+function Grid({ as: Element = "div", columns, minItemWidth, gap, align, className, style, ...props }) {
+	return /* @__PURE__ */ jsx(Element, {
+		...props,
+		className: cx("panneau-grid", Grid_module_default.grid, minItemWidth !== void 0 && Grid_module_default.auto, className),
+		style: withVariables([
+			responsiveVariables("grid", "columns", columns, (count) => String(Math.max(1, Math.floor(count)))),
+			minItemWidth !== void 0 ? { "--_panneau-grid-min-item-width": minItemWidth } : {},
+			responsiveVariables("grid", "gap", gap, space),
+			responsiveVariables("grid", "align", align, String)
+		], style)
+	});
+}
+/** A cell of a `Grid` that spans several columns, per breakpoint. */
+function GridItem({ as: Element = "div", span, className, style, ...props }) {
+	return /* @__PURE__ */ jsx(Element, {
+		...props,
+		className: cx("panneau-grid-item", GridItem_module_default["grid-item"], className),
+		style: withVariables([responsiveVariables("grid-item", "span", span, (value) => value === "full" ? "1 / -1" : `span ${Math.max(1, Math.floor(value))}`)], style)
+	});
+}
+//#endregion
+export { Grid, GridItem };
+
+//# sourceMappingURL=Grid.js.map

package/dist/grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","names":["styles","itemStyles"],"sources":["../../src/grid/Grid.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport {\n    type Responsive,\n    type Space,\n    responsiveVariables,\n    space,\n    withVariables,\n} from '../layout/responsive';\nimport { cx } from '../utils/cx';\nimport styles from './Grid.module.css';\nimport itemStyles from './GridItem.module.css';\n\nexport interface GridProps extends HTMLAttributes<HTMLElement> {\n    /** Element to render. Defaults to `div`. */\n    as?: 'div' | 'section' | 'ul' | 'ol' | 'dl';\n    /** Number of equal columns: `3`, or `{ base: 1, md: 2, lg: 3 }`. Defaults to 1. */\n    columns?: Responsive<number>;\n    /**\n     * Minimum width of a cell (`'16rem'`): as many columns as fit, like `repeat(auto-fit, ...)`.\n     * It replaces `columns`.\n     */\n    minItemWidth?: string;\n    /** Space between cells, from the space scale. Defaults to the `--panneau-grid-gap` token. */\n    gap?: Responsive<Space>;\n    /** Vertical alignment of the cells in their row. Defaults to `stretch`. */\n    align?: Responsive<'start' | 'center' | 'end' | 'stretch'>;\n}\n\n/** Cells in columns: a fixed number per breakpoint, or as many as fit. */\nexport function Grid({\n    as: Element = 'div',\n    columns,\n    minItemWidth,\n    gap,\n    align,\n    className,\n    style,\n    ...props\n}: GridProps) {\n    return (\n        <Element\n            {...props}\n            className={cx(\n                'panneau-grid',\n                styles.grid,\n                minItemWidth !== undefined && styles.auto,\n                className,\n            )}\n            style={withVariables(\n                [\n                    responsiveVariables('grid', 'columns', columns, (count) =>\n                        String(Math.max(1, Math.floor(count))),\n                    ),\n                    minItemWidth !== undefined\n                        ? { '--_panneau-grid-min-item-width': minItemWidth }\n                        : {},\n                    responsiveVariables('grid', 'gap', gap, space),\n                    responsiveVariables('grid', 'align', align, String),\n                ],\n                style,\n            )}\n        />\n    );\n}\n\nexport interface GridItemProps extends HTMLAttributes<HTMLElement> {\n    /** Element to render. Defaults to `div`. */\n    as?: 'div' | 'section' | 'article' | 'li';\n    /** Columns the cell spans: a number, or `full` for the whole row. Defaults to 1. */\n    span?: Responsive<number | 'full'>;\n}\n\n/** A cell of a `Grid` that spans several columns, per breakpoint. */\nexport function GridItem({ as: Element = 'div', span, className, style, ...props }: GridItemProps) {\n    return (\n        <Element\n            {...props}\n            className={cx('panneau-grid-item', itemStyles['grid-item'], className)}\n            style={withVariables(\n                [\n                    responsiveVariables('grid-item', 'span', span, (value) =>\n                        value === 'full' ? '1 / -1' : `span ${Math.max(1, Math.floor(value))}`,\n                    ),\n                ],\n                style,\n            )}\n        />\n    );\n}\n"],"mappings":";;;;;;;AA8BA,SAAgB,KAAK,EACjB,IAAI,UAAU,OACd,SACA,cACA,KACA,OACA,WACA,OACA,GAAG,SACO;CACV,OACI,oBAAC,SAAD;EACI,GAAI;EACJ,WAAW,GACP,gBACAA,oBAAO,MACP,iBAAiB,KAAA,KAAaA,oBAAO,MACrC,SACJ;EACA,OAAO,cACH;GACI,oBAAoB,QAAQ,WAAW,UAAU,UAC7C,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC,CAAC,CACzC;GACA,iBAAiB,KAAA,IACX,EAAE,kCAAkC,aAAa,IACjD,CAAC;GACP,oBAAoB,QAAQ,OAAO,KAAK,KAAK;GAC7C,oBAAoB,QAAQ,SAAS,OAAO,MAAM;EAAC,GAEvD,KACJ;CAAE,CAAA;AAGd;;AAUA,SAAgB,SAAS,EAAE,IAAI,UAAU,OAAO,MAAM,WAAW,OAAO,GAAG,SAAwB;CAC/F,OACI,oBAAC,SAAD;EACI,GAAI;EACJ,WAAW,GAAG,qBAAqBC,wBAAW,cAAc,SAAS;EACrE,OAAO,cACH,CACI,oBAAoB,aAAa,QAAQ,OAAO,UAC5C,UAAU,SAAS,WAAW,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC,GACvE,CAAC,GAEL,KACJ;CAAE,CAAA;AAGd"}

package/dist/grid/Grid.module.js

@@ -0,0 +1,12 @@
+import "./Grid.css";
+//#region src/grid/Grid.module.css
+var grid = "panneau-grid";
+var auto = "panneau-grid-auto";
+var Grid_module_default = {
+	grid,
+	auto
+};
+//#endregion
+export { auto, Grid_module_default as default, grid };
+
+//# sourceMappingURL=Grid.module.js.map

package/dist/grid/Grid.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.module.js","names":[],"sources":["../../src/grid/Grid.module.css"],"sourcesContent":["/* A grid: each prop can change at the breakpoints of the nearest container. */\n\n.grid {\n    display: grid;\n    min-width: 0;\n}\n/* Responsive values are set inline; children reset them so that they aren't inherited. */\n.grid > * {\n    --_panneau-grid-columns-base: initial;\n    --_panneau-grid-columns-sm: initial;\n    --_panneau-grid-columns-md: initial;\n    --_panneau-grid-columns-lg: initial;\n    --_panneau-grid-columns-xl: initial;\n    --_panneau-grid-gap-base: initial;\n    --_panneau-grid-gap-sm: initial;\n    --_panneau-grid-gap-md: initial;\n    --_panneau-grid-gap-lg: initial;\n    --_panneau-grid-gap-xl: initial;\n    --_panneau-grid-align-base: initial;\n    --_panneau-grid-align-sm: initial;\n    --_panneau-grid-align-md: initial;\n    --_panneau-grid-align-lg: initial;\n    --_panneau-grid-align-xl: initial;\n}\n\n.grid {\n    gap: var(--_panneau-grid-gap-base, var(--panneau-grid-gap, var(--panneau-space-4)));\n    align-items: var(--_panneau-grid-align-base, stretch);\n}\n\n@container (min-width: 40rem) {\n    .grid {\n        gap: var(\n            --_panneau-grid-gap-sm,\n            var(--_panneau-grid-gap-base, var(--panneau-grid-gap, var(--panneau-space-4)))\n        );\n        align-items: var(--_panneau-grid-align-sm, var(--_panneau-grid-align-base, stretch));\n    }\n}\n\n@container (min-width: 48rem) {\n    .grid {\n        gap: var(\n            --_panneau-grid-gap-md,\n            var(\n                --_panneau-grid-gap-sm,\n                var(--_panneau-grid-gap-base, var(--panneau-grid-gap, var(--panneau-space-4)))\n            )\n        );\n        align-items: var(\n            --_panneau-grid-align-md,\n            var(--_panneau-grid-align-sm, var(--_panneau-grid-align-base, stretch))\n        );\n    }\n}\n\n@container (min-width: 64rem) {\n    .grid {\n        gap: var(\n            --_panneau-grid-gap-lg,\n            var(\n                --_panneau-grid-gap-md,\n                var(\n                    --_panneau-grid-gap-sm,\n                    var(--_panneau-grid-gap-base, var(--panneau-grid-gap, var(--panneau-space-4)))\n                )\n            )\n        );\n        align-items: var(\n            --_panneau-grid-align-lg,\n            var(\n                --_panneau-grid-align-md,\n                var(--_panneau-grid-align-sm, var(--_panneau-grid-align-base, stretch))\n            )\n        );\n    }\n}\n\n@container (min-width: 80rem) {\n    .grid {\n        gap: var(\n            --_panneau-grid-gap-xl,\n            var(\n                --_panneau-grid-gap-lg,\n                var(\n                    --_panneau-grid-gap-md,\n                    var(\n                        --_panneau-grid-gap-sm,\n                        var(\n                            --_panneau-grid-gap-base,\n                            var(--panneau-grid-gap, var(--panneau-space-4))\n                        )\n                    )\n                )\n            )\n        );\n        align-items: var(\n            --_panneau-grid-align-xl,\n            var(\n                --_panneau-grid-align-lg,\n                var(\n                    --_panneau-grid-align-md,\n                    var(--_panneau-grid-align-sm, var(--_panneau-grid-align-base, stretch))\n                )\n            )\n        );\n    }\n}\n\n.grid:not(.auto) {\n    grid-template-columns: repeat(var(--_panneau-grid-columns-base, 1), minmax(0, 1fr));\n}\n\n@container (min-width: 40rem) {\n    .grid:not(.auto) {\n        grid-template-columns: repeat(\n            var(--_panneau-grid-columns-sm, var(--_panneau-grid-columns-base, 1)),\n            minmax(0, 1fr)\n        );\n    }\n}\n\n@container (min-width: 48rem) {\n    .grid:not(.auto) {\n        grid-template-columns: repeat(\n            var(\n                --_panneau-grid-columns-md,\n                var(--_panneau-grid-columns-sm, var(--_panneau-grid-columns-base, 1))\n            ),\n            minmax(0, 1fr)\n        );\n    }\n}\n\n@container (min-width: 64rem) {\n    .grid:not(.auto) {\n        grid-template-columns: repeat(\n            var(\n                --_panneau-grid-columns-lg,\n                var(\n                    --_panneau-grid-columns-md,\n                    var(--_panneau-grid-columns-sm, var(--_panneau-grid-columns-base, 1))\n                )\n            ),\n            minmax(0, 1fr)\n        );\n    }\n}\n\n@container (min-width: 80rem) {\n    .grid:not(.auto) {\n        grid-template-columns: repeat(\n            var(\n                --_panneau-grid-columns-xl,\n                var(\n                    --_panneau-grid-columns-lg,\n                    var(\n                        --_panneau-grid-columns-md,\n                        var(--_panneau-grid-columns-sm, var(--_panneau-grid-columns-base, 1))\n                    )\n                )\n            ),\n            minmax(0, 1fr)\n        );\n    }\n}\n\n/* Columns of at least a width, as many as fit: repeat(auto-fit, minmax(...)). */\n.auto {\n    grid-template-columns: repeat(\n        auto-fit,\n        minmax(min(var(--_panneau-grid-min-item-width), 100%), 1fr)\n    );\n}\n"],"mappings":""}

package/dist/grid/GridItem.css

@@ -0,0 +1,59 @@
+/* A cell of a Grid that spans several columns, per breakpoint. */
+
+.panneau-grid-item {
+    min-width: 0;
+}
+/* Responsive values are set inline; children reset them so that they aren't inherited. */
+.panneau-grid-item > * {
+    --_panneau-grid-item-span-base: initial;
+    --_panneau-grid-item-span-sm: initial;
+    --_panneau-grid-item-span-md: initial;
+    --_panneau-grid-item-span-lg: initial;
+    --_panneau-grid-item-span-xl: initial;
+}
+
+.panneau-grid-item {
+    grid-column: var(--_panneau-grid-item-span-base, auto);
+}
+
+@container (min-width: 40rem) {
+    .panneau-grid-item {
+        grid-column: var(--_panneau-grid-item-span-sm, var(--_panneau-grid-item-span-base, auto));
+    }
+}
+
+@container (min-width: 48rem) {
+    .panneau-grid-item {
+        grid-column: var(
+            --_panneau-grid-item-span-md,
+            var(--_panneau-grid-item-span-sm, var(--_panneau-grid-item-span-base, auto))
+        );
+    }
+}
+
+@container (min-width: 64rem) {
+    .panneau-grid-item {
+        grid-column: var(
+            --_panneau-grid-item-span-lg,
+            var(
+                --_panneau-grid-item-span-md,
+                var(--_panneau-grid-item-span-sm, var(--_panneau-grid-item-span-base, auto))
+            )
+        );
+    }
+}
+
+@container (min-width: 80rem) {
+    .panneau-grid-item {
+        grid-column: var(
+            --_panneau-grid-item-span-xl,
+            var(
+                --_panneau-grid-item-span-lg,
+                var(
+                    --_panneau-grid-item-span-md,
+                    var(--_panneau-grid-item-span-sm, var(--_panneau-grid-item-span-base, auto))
+                )
+            )
+        );
+    }
+}

package/dist/grid/GridItem.module.js

@@ -0,0 +1,7 @@
+import "./GridItem.css";
+//#region src/grid/GridItem.module.css
+var GridItem_module_default = { "grid-item": "panneau-grid-item" };
+//#endregion
+export { GridItem_module_default as default };
+
+//# sourceMappingURL=GridItem.module.js.map

package/dist/grid/GridItem.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.module.js","names":[],"sources":["../../src/grid/GridItem.module.css"],"sourcesContent":["/* A cell of a Grid that spans several columns, per breakpoint. */\n\n.grid-item {\n    min-width: 0;\n}\n/* Responsive values are set inline; children reset them so that they aren't inherited. */\n.grid-item > * {\n    --_panneau-grid-item-span-base: initial;\n    --_panneau-grid-item-span-sm: initial;\n    --_panneau-grid-item-span-md: initial;\n    --_panneau-grid-item-span-lg: initial;\n    --_panneau-grid-item-span-xl: initial;\n}\n\n.grid-item {\n    grid-column: var(--_panneau-grid-item-span-base, auto);\n}\n\n@container (min-width: 40rem) {\n    .grid-item {\n        grid-column: var(--_panneau-grid-item-span-sm, var(--_panneau-grid-item-span-base, auto));\n    }\n}\n\n@container (min-width: 48rem) {\n    .grid-item {\n        grid-column: var(\n            --_panneau-grid-item-span-md,\n            var(--_panneau-grid-item-span-sm, var(--_panneau-grid-item-span-base, auto))\n        );\n    }\n}\n\n@container (min-width: 64rem) {\n    .grid-item {\n        grid-column: var(\n            --_panneau-grid-item-span-lg,\n            var(\n                --_panneau-grid-item-span-md,\n                var(--_panneau-grid-item-span-sm, var(--_panneau-grid-item-span-base, auto))\n            )\n        );\n    }\n}\n\n@container (min-width: 80rem) {\n    .grid-item {\n        grid-column: var(\n            --_panneau-grid-item-span-xl,\n            var(\n                --_panneau-grid-item-span-lg,\n                var(\n                    --_panneau-grid-item-span-md,\n                    var(--_panneau-grid-item-span-sm, var(--_panneau-grid-item-span-base, auto))\n                )\n            )\n        );\n    }\n}\n"],"mappings":""}

package/dist/grid/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Grid. */
+export declare const gridTokens: import("..").ComponentTokens<"grid", "panneau-grid-gap">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/grid/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/grid/tokens.ts"],"names":[],"mappings":"AAEA,sBAAsB;AACtB,eAAO,MAAM,UAAU,0DAGrB,CAAC"}

package/dist/grid/tokens.js

@@ -0,0 +1,10 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/grid/tokens.ts
+/** Tokens of Grid. */
+var gridTokens = defineComponentTokens("grid", { 
+/** Space between cells, in both directions, when the `gap` prop is not set. */
+gap: "var(--panneau-space-4)" });
+//#endregion
+export { gridTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/grid/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/grid/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Grid. */\nexport const gridTokens = defineComponentTokens('grid', {\n    /** Space between cells, in both directions, when the `gap` prop is not set. */\n    gap: 'var(--panneau-space-4)',\n});\n"],"mappings":";;;AAGA,IAAa,aAAa,sBAAsB,QAAQ;;AAEpD,KAAK,yBACT,CAAC"}

package/dist/heading/Heading.css

@@ -0,0 +1,52 @@
+/* Headings: one class per visual size, independent of the level of the element. */
+
+.panneau-heading {
+    margin: 0;
+    font-family: var(--panneau-heading-font-family, var(--panneau-font-family-heading));
+    color: var(--panneau-heading-color, inherit);
+    overflow-wrap: break-word;
+}
+
+.panneau-heading-size-1 {
+    font-size: var(--panneau-heading-1-font-size, 1.75rem);
+    font-weight: var(--panneau-heading-1-font-weight, var(--panneau-font-weight-bold));
+    line-height: var(--panneau-heading-1-line-height, var(--panneau-line-height-tight));
+    letter-spacing: var(--panneau-heading-1-letter-spacing, -0.015em);
+}
+
+.panneau-heading-size-2 {
+    font-size: var(--panneau-heading-2-font-size, 1.375rem);
+    font-weight: var(--panneau-heading-2-font-weight, var(--panneau-font-weight-bold));
+    line-height: var(--panneau-heading-2-line-height, var(--panneau-line-height-tight));
+    letter-spacing: var(--panneau-heading-2-letter-spacing, -0.01em);
+}
+
+.panneau-heading-size-3 {
+    font-size: var(--panneau-heading-3-font-size, 1.125rem);
+    font-weight: var(--panneau-heading-3-font-weight, var(--panneau-font-weight-bold));
+    line-height: var(--panneau-heading-3-line-height, var(--panneau-line-height-tight));
+    letter-spacing: var(--panneau-heading-3-letter-spacing, normal);
+}
+
+.panneau-heading-size-4 {
+    font-size: var(--panneau-heading-4-font-size, var(--panneau-font-size-lg));
+    font-weight: var(--panneau-heading-4-font-weight, var(--panneau-font-weight-bold));
+    line-height: var(--panneau-heading-4-line-height, var(--panneau-line-height-tight));
+    letter-spacing: var(--panneau-heading-4-letter-spacing, normal);
+}
+
+.panneau-heading-size-display-1 {
+    font-family: var(--panneau-heading-display-font-family, var(--panneau-font-family-display));
+    font-size: var(--panneau-heading-display-1-font-size, 3rem);
+    font-weight: var(--panneau-heading-display-1-font-weight, var(--panneau-font-weight-bold));
+    line-height: var(--panneau-heading-display-1-line-height, 1.1);
+    letter-spacing: var(--panneau-heading-display-1-letter-spacing, -0.025em);
+}
+
+.panneau-heading-size-display-2 {
+    font-family: var(--panneau-heading-display-font-family, var(--panneau-font-family-display));
+    font-size: var(--panneau-heading-display-2-font-size, 2.25rem);
+    font-weight: var(--panneau-heading-display-2-font-weight, var(--panneau-font-weight-bold));
+    line-height: var(--panneau-heading-display-2-line-height, 1.15);
+    letter-spacing: var(--panneau-heading-display-2-letter-spacing, -0.02em);
+}

package/dist/heading/Heading.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react';
+/** The level of a heading element: `h1` to `h6`. */
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** The visual size of a heading: 1 to 4, or a display size for hero text and stats. */
+export type HeadingSize = 1 | 2 | 3 | 4 | 'display-1' | 'display-2';
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** Level of the element, for the outline of the page. Defaults to 2. */
+    level?: HeadingLevel;
+    /**
+     * Visual size, independent of the level, like Bootstrap's `.h1` and `.display-1`. Defaults to
+     * the level, and to 4 for levels 5 and 6.
+     */
+    size?: HeadingSize;
+}
+/** A heading, styled by the heading tokens of the theme. */
+export declare function Heading({ level, size, className, ...props }: HeadingProps): import("react").JSX.Element;
+//# sourceMappingURL=Heading.d.ts.map

package/dist/heading/Heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,oDAAoD;AACpD,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,uFAAuF;AACvF,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,WAAW,GAAG,WAAW,CAAC;AAEpE,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,kBAAkB,CAAC;IACpE,wEAAwE;IACxE,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,4DAA4D;AAC5D,wBAAgB,OAAO,CAAC,EAAE,KAAS,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAc7E"}

package/dist/heading/Heading.js

@@ -0,0 +1,17 @@
+import { cx } from "../utils/cx.js";
+import Heading_module_default from "./Heading.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/heading/Heading.tsx
+/** A heading, styled by the heading tokens of the theme. */
+function Heading({ level = 2, size, className, ...props }) {
+	const Element = `h${level}`;
+	const visualSize = size ?? Math.min(level, 4);
+	return /* @__PURE__ */ jsx(Element, {
+		...props,
+		className: cx("panneau-heading", Heading_module_default.heading, Heading_module_default[`size-${visualSize}`], className)
+	});
+}
+//#endregion
+export { Heading };
+
+//# sourceMappingURL=Heading.js.map

package/dist/heading/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","names":["styles"],"sources":["../../src/heading/Heading.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport { cx } from '../utils/cx';\nimport styles from './Heading.module.css';\n\n/** The level of a heading element: `h1` to `h6`. */\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/** The visual size of a heading: 1 to 4, or a display size for hero text and stats. */\nexport type HeadingSize = 1 | 2 | 3 | 4 | 'display-1' | 'display-2';\n\nexport interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {\n    /** Level of the element, for the outline of the page. Defaults to 2. */\n    level?: HeadingLevel;\n    /**\n     * Visual size, independent of the level, like Bootstrap's `.h1` and `.display-1`. Defaults to\n     * the level, and to 4 for levels 5 and 6.\n     */\n    size?: HeadingSize;\n}\n\n/** A heading, styled by the heading tokens of the theme. */\nexport function Heading({ level = 2, size, className, ...props }: HeadingProps) {\n    const Element = `h${level}` as const;\n    const visualSize = size ?? Math.min(level, 4);\n    return (\n        <Element\n            {...props}\n            className={cx(\n                'panneau-heading',\n                styles.heading,\n                styles[`size-${visualSize}`],\n                className,\n            )}\n        />\n    );\n}\n"],"mappings":";;;;;AAsBA,SAAgB,QAAQ,EAAE,QAAQ,GAAG,MAAM,WAAW,GAAG,SAAuB;CAC5E,MAAM,UAAU,IAAI;CACpB,MAAM,aAAa,QAAQ,KAAK,IAAI,OAAO,CAAC;CAC5C,OACI,oBAAC,SAAD;EACI,GAAI;EACJ,WAAW,GACP,mBACAA,uBAAO,SACPA,uBAAO,QAAQ,eACf,SACJ;CAAE,CAAA;AAGd"}

package/dist/heading/Heading.module.js

@@ -0,0 +1,16 @@
+import "./Heading.css";
+//#region src/heading/Heading.module.css
+var heading = "panneau-heading";
+var Heading_module_default = {
+	heading,
+	"size-1": "panneau-heading-size-1",
+	"size-2": "panneau-heading-size-2",
+	"size-3": "panneau-heading-size-3",
+	"size-4": "panneau-heading-size-4",
+	"size-display-1": "panneau-heading-size-display-1",
+	"size-display-2": "panneau-heading-size-display-2"
+};
+//#endregion
+export { Heading_module_default as default, heading };
+
+//# sourceMappingURL=Heading.module.js.map

package/dist/heading/Heading.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.module.js","names":[],"sources":["../../src/heading/Heading.module.css"],"sourcesContent":["/* Headings: one class per visual size, independent of the level of the element. */\n\n.heading {\n    margin: 0;\n    font-family: var(--panneau-heading-font-family, var(--panneau-font-family-heading));\n    color: var(--panneau-heading-color, inherit);\n    overflow-wrap: break-word;\n}\n\n.size-1 {\n    font-size: var(--panneau-heading-1-font-size, 1.75rem);\n    font-weight: var(--panneau-heading-1-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-heading-1-line-height, var(--panneau-line-height-tight));\n    letter-spacing: var(--panneau-heading-1-letter-spacing, -0.015em);\n}\n\n.size-2 {\n    font-size: var(--panneau-heading-2-font-size, 1.375rem);\n    font-weight: var(--panneau-heading-2-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-heading-2-line-height, var(--panneau-line-height-tight));\n    letter-spacing: var(--panneau-heading-2-letter-spacing, -0.01em);\n}\n\n.size-3 {\n    font-size: var(--panneau-heading-3-font-size, 1.125rem);\n    font-weight: var(--panneau-heading-3-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-heading-3-line-height, var(--panneau-line-height-tight));\n    letter-spacing: var(--panneau-heading-3-letter-spacing, normal);\n}\n\n.size-4 {\n    font-size: var(--panneau-heading-4-font-size, var(--panneau-font-size-lg));\n    font-weight: var(--panneau-heading-4-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-heading-4-line-height, var(--panneau-line-height-tight));\n    letter-spacing: var(--panneau-heading-4-letter-spacing, normal);\n}\n\n.size-display-1 {\n    font-family: var(--panneau-heading-display-font-family, var(--panneau-font-family-display));\n    font-size: var(--panneau-heading-display-1-font-size, 3rem);\n    font-weight: var(--panneau-heading-display-1-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-heading-display-1-line-height, 1.1);\n    letter-spacing: var(--panneau-heading-display-1-letter-spacing, -0.025em);\n}\n\n.size-display-2 {\n    font-family: var(--panneau-heading-display-font-family, var(--panneau-font-family-display));\n    font-size: var(--panneau-heading-display-2-font-size, 2.25rem);\n    font-weight: var(--panneau-heading-display-2-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-heading-display-2-line-height, 1.15);\n    letter-spacing: var(--panneau-heading-display-2-letter-spacing, -0.02em);\n}\n"],"mappings":""}

package/dist/heading/tokens.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tokens of Heading, like Bootstrap's `$headings-*` and `$display-font-sizes`. `Prose` applies
+ * them to the headings of rich content too.
+ */
+export declare const headingTokens: import("..").ComponentTokens<"heading", "panneau-heading-color" | "panneau-heading-font-family" | "panneau-heading-display-font-family" | "panneau-heading-1-font-size" | "panneau-heading-1-font-weight" | "panneau-heading-1-line-height" | "panneau-heading-1-letter-spacing" | "panneau-heading-2-font-size" | "panneau-heading-2-font-weight" | "panneau-heading-2-line-height" | "panneau-heading-2-letter-spacing" | "panneau-heading-3-font-size" | "panneau-heading-3-font-weight" | "panneau-heading-3-line-height" | "panneau-heading-3-letter-spacing" | "panneau-heading-4-font-size" | "panneau-heading-4-font-weight" | "panneau-heading-4-line-height" | "panneau-heading-4-letter-spacing" | "panneau-heading-display-1-font-size" | "panneau-heading-display-1-font-weight" | "panneau-heading-display-1-line-height" | "panneau-heading-display-1-letter-spacing" | "panneau-heading-display-2-font-size" | "panneau-heading-display-2-font-weight" | "panneau-heading-display-2-line-height" | "panneau-heading-display-2-letter-spacing">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/heading/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/heading/tokens.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,aAAa,ggCAuDxB,CAAC"}

package/dist/heading/tokens.js

@@ -0,0 +1,66 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/heading/tokens.ts
+/**
+* Tokens of Heading, like Bootstrap's `$headings-*` and `$display-font-sizes`. `Prose` applies
+* them to the headings of rich content too.
+*/
+var headingTokens = defineComponentTokens("heading", {
+	/** Font family of sizes 1 to 4. */
+	"font-family": "var(--panneau-font-family-heading)",
+	/** Font family of the display sizes. */
+	"display-font-family": "var(--panneau-font-family-display)",
+	/** Text color. */
+	color: "inherit",
+	/** Font size of the level 1. */
+	"1-font-size": "1.75rem",
+	/** Font weight of the level 1. */
+	"1-font-weight": "var(--panneau-font-weight-bold)",
+	/** Line height of the level 1. */
+	"1-line-height": "var(--panneau-line-height-tight)",
+	/** Letter spacing of the level 1. */
+	"1-letter-spacing": "-0.015em",
+	/** Font size of the level 2. */
+	"2-font-size": "1.375rem",
+	/** Font weight of the level 2. */
+	"2-font-weight": "var(--panneau-font-weight-bold)",
+	/** Line height of the level 2. */
+	"2-line-height": "var(--panneau-line-height-tight)",
+	/** Letter spacing of the level 2. */
+	"2-letter-spacing": "-0.01em",
+	/** Font size of the level 3. */
+	"3-font-size": "1.125rem",
+	/** Font weight of the level 3. */
+	"3-font-weight": "var(--panneau-font-weight-bold)",
+	/** Line height of the level 3. */
+	"3-line-height": "var(--panneau-line-height-tight)",
+	/** Letter spacing of the level 3. */
+	"3-letter-spacing": "normal",
+	/** Font size of the level 4 (and 5, 6). */
+	"4-font-size": "var(--panneau-font-size-lg)",
+	/** Font weight of the level 4 (and 5, 6). */
+	"4-font-weight": "var(--panneau-font-weight-bold)",
+	/** Line height of the level 4 (and 5, 6). */
+	"4-line-height": "var(--panneau-line-height-tight)",
+	/** Letter spacing of the level 4 (and 5, 6). */
+	"4-letter-spacing": "normal",
+	/** Font size of the display size 1. */
+	"display-1-font-size": "3rem",
+	/** Font weight of the display size 1. */
+	"display-1-font-weight": "var(--panneau-font-weight-bold)",
+	/** Line height of the display size 1. */
+	"display-1-line-height": "1.1",
+	/** Letter spacing of the display size 1. */
+	"display-1-letter-spacing": "-0.025em",
+	/** Font size of the display size 2. */
+	"display-2-font-size": "2.25rem",
+	/** Font weight of the display size 2. */
+	"display-2-font-weight": "var(--panneau-font-weight-bold)",
+	/** Line height of the display size 2. */
+	"display-2-line-height": "1.15",
+	/** Letter spacing of the display size 2. */
+	"display-2-letter-spacing": "-0.02em"
+});
+//#endregion
+export { headingTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/heading/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/heading/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/**\n * Tokens of Heading, like Bootstrap's `$headings-*` and `$display-font-sizes`. `Prose` applies\n * them to the headings of rich content too.\n */\nexport const headingTokens = defineComponentTokens('heading', {\n    /** Font family of sizes 1 to 4. */\n    'font-family': 'var(--panneau-font-family-heading)',\n    /** Font family of the display sizes. */\n    'display-font-family': 'var(--panneau-font-family-display)',\n    /** Text color. */\n    color: 'inherit',\n    /** Font size of the level 1. */\n    '1-font-size': '1.75rem',\n    /** Font weight of the level 1. */\n    '1-font-weight': 'var(--panneau-font-weight-bold)',\n    /** Line height of the level 1. */\n    '1-line-height': 'var(--panneau-line-height-tight)',\n    /** Letter spacing of the level 1. */\n    '1-letter-spacing': '-0.015em',\n    /** Font size of the level 2. */\n    '2-font-size': '1.375rem',\n    /** Font weight of the level 2. */\n    '2-font-weight': 'var(--panneau-font-weight-bold)',\n    /** Line height of the level 2. */\n    '2-line-height': 'var(--panneau-line-height-tight)',\n    /** Letter spacing of the level 2. */\n    '2-letter-spacing': '-0.01em',\n    /** Font size of the level 3. */\n    '3-font-size': '1.125rem',\n    /** Font weight of the level 3. */\n    '3-font-weight': 'var(--panneau-font-weight-bold)',\n    /** Line height of the level 3. */\n    '3-line-height': 'var(--panneau-line-height-tight)',\n    /** Letter spacing of the level 3. */\n    '3-letter-spacing': 'normal',\n    /** Font size of the level 4 (and 5, 6). */\n    '4-font-size': 'var(--panneau-font-size-lg)',\n    /** Font weight of the level 4 (and 5, 6). */\n    '4-font-weight': 'var(--panneau-font-weight-bold)',\n    /** Line height of the level 4 (and 5, 6). */\n    '4-line-height': 'var(--panneau-line-height-tight)',\n    /** Letter spacing of the level 4 (and 5, 6). */\n    '4-letter-spacing': 'normal',\n    /** Font size of the display size 1. */\n    'display-1-font-size': '3rem',\n    /** Font weight of the display size 1. */\n    'display-1-font-weight': 'var(--panneau-font-weight-bold)',\n    /** Line height of the display size 1. */\n    'display-1-line-height': '1.1',\n    /** Letter spacing of the display size 1. */\n    'display-1-letter-spacing': '-0.025em',\n    /** Font size of the display size 2. */\n    'display-2-font-size': '2.25rem',\n    /** Font weight of the display size 2. */\n    'display-2-font-weight': 'var(--panneau-font-weight-bold)',\n    /** Line height of the display size 2. */\n    'display-2-line-height': '1.15',\n    /** Letter spacing of the display size 2. */\n    'display-2-letter-spacing': '-0.02em',\n});\n"],"mappings":";;;;;;AAMA,IAAa,gBAAgB,sBAAsB,WAAW;;CAE1D,eAAe;;CAEf,uBAAuB;;CAEvB,OAAO;;CAEP,eAAe;;CAEf,iBAAiB;;CAEjB,iBAAiB;;CAEjB,oBAAoB;;CAEpB,eAAe;;CAEf,iBAAiB;;CAEjB,iBAAiB;;CAEjB,oBAAoB;;CAEpB,eAAe;;CAEf,iBAAiB;;CAEjB,iBAAiB;;CAEjB,oBAAoB;;CAEpB,eAAe;;CAEf,iBAAiB;;CAEjB,iBAAiB;;CAEjB,oBAAoB;;CAEpB,uBAAuB;;CAEvB,yBAAyB;;CAEzB,yBAAyB;;CAEzB,4BAA4B;;CAE5B,uBAAuB;;CAEvB,yBAAyB;;CAEzB,yBAAyB;;CAEzB,4BAA4B;AAChC,CAAC"}

package/dist/icon/Icon.css

@@ -1,4 +1,4 @@
-.panneau-icon-Y4DzXz {
+.panneau-icon {
     display: inline-block;
     flex: 0 0 auto;
     vertical-align: middle;

package/dist/icon/Icon.js

@@ -16,7 +16,7 @@ function Icon({ icon: Component, size = "md", label, className }) {
 		size: pixels,
 		strokeWidth: 2,
 		absoluteStrokeWidth: pixels < 16,
-		className: cx(Icon_module_default.icon, className),
+		className: cx("panneau-icon", Icon_module_default.icon, className),
 		"aria-hidden": label === void 0 ? "true" : void 0,
 		"aria-label": label,
 		role: label !== void 0 ? "img" : void 0,

package/dist/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["styles"],"sources":["../../src/icon/Icon.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\n\nimport { cx } from '../utils/cx';\nimport styles from './Icon.module.css';\n\n/**\n * An icon component: any Lucide icon (`import { Pencil } from 'lucide-react'`), or a component\n * with the same props.\n */\nexport type IconComponent = ComponentType<{\n    size?: number | string;\n    strokeWidth?: number | string;\n    absoluteStrokeWidth?: boolean;\n    className?: string;\n    'aria-hidden'?: boolean | 'true' | 'false';\n    'aria-label'?: string;\n    role?: string;\n    focusable?: boolean | 'true' | 'false';\n}>;\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst SIZES: Record<IconSize, number> = { xs: 12, sm: 14, md: 16, lg: 20, xl: 24 };\n\nexport interface IconProps {\n    /** The icon: a Lucide icon component. */\n    icon: IconComponent;\n    /** Defaults to `md` (16px). A number is in pixels. */\n    size?: IconSize | number;\n    /**\n     * Accessible label. Icons without a label are decorative and hidden from assistive\n     * technologies, which is right next to a text that says the same.\n     */\n    label?: string;\n    className?: string;\n}\n\n/** Renders an icon of the icon set (Lucide) at a size of the scale, decorative by default. */\nexport function Icon({ icon: Component, size = 'md', label, className }: IconProps) {\n    const pixels = typeof size === 'number' ? size : SIZES[size];\n    return (\n        <Component\n            size={pixels}\n            strokeWidth={2}\n            absoluteStrokeWidth={pixels < 16}\n            className={cx(styles.icon, className)}\n            aria-hidden={label === undefined ? 'true' : undefined}\n            aria-label={label}\n            role={label !== undefined ? 'img' : undefined}\n            focusable=\"false\"\n        />\n    );\n}\n"],"mappings":";;;;AAsBA,IAAM,QAAkC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI,IAAI;AAAG;;AAgBjF,SAAgB,KAAK,EAAE,MAAM,WAAW,OAAO,MAAM,OAAO,aAAwB;CAChF,MAAM,SAAS,OAAO,SAAS,WAAW,OAAO,MAAM;CACvD,OACI,oBAAC,WAAD;EACI,MAAM;EACN,aAAa;EACb,qBAAqB,SAAS;EAC9B,WAAW,GAAGA,oBAAO,MAAM,SAAS;EACpC,eAAa,UAAU,KAAA,IAAY,SAAS,KAAA;EAC5C,cAAY;EACZ,MAAM,UAAU,KAAA,IAAY,QAAQ,KAAA;EACpC,WAAU;CAAO,CAAA;AAG7B"}
+{"version":3,"file":"Icon.js","names":["styles"],"sources":["../../src/icon/Icon.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\n\nimport { cx } from '../utils/cx';\nimport styles from './Icon.module.css';\n\n/**\n * An icon component: any Lucide icon (`import { Pencil } from 'lucide-react'`), or a component\n * with the same props.\n */\nexport type IconComponent = ComponentType<{\n    size?: number | string;\n    strokeWidth?: number | string;\n    absoluteStrokeWidth?: boolean;\n    className?: string;\n    'aria-hidden'?: boolean | 'true' | 'false';\n    'aria-label'?: string;\n    role?: string;\n    focusable?: boolean | 'true' | 'false';\n}>;\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst SIZES: Record<IconSize, number> = { xs: 12, sm: 14, md: 16, lg: 20, xl: 24 };\n\nexport interface IconProps {\n    /** The icon: a Lucide icon component. */\n    icon: IconComponent;\n    /** Defaults to `md` (16px). A number is in pixels. */\n    size?: IconSize | number;\n    /**\n     * Accessible label. Icons without a label are decorative and hidden from assistive\n     * technologies, which is right next to a text that says the same.\n     */\n    label?: string;\n    className?: string;\n}\n\n/** Renders an icon of the icon set (Lucide) at a size of the scale, decorative by default. */\nexport function Icon({ icon: Component, size = 'md', label, className }: IconProps) {\n    const pixels = typeof size === 'number' ? size : SIZES[size];\n    return (\n        <Component\n            size={pixels}\n            strokeWidth={2}\n            absoluteStrokeWidth={pixels < 16}\n            className={cx('panneau-icon', styles.icon, className)}\n            aria-hidden={label === undefined ? 'true' : undefined}\n            aria-label={label}\n            role={label !== undefined ? 'img' : undefined}\n            focusable=\"false\"\n        />\n    );\n}\n"],"mappings":";;;;AAsBA,IAAM,QAAkC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI,IAAI;AAAG;;AAgBjF,SAAgB,KAAK,EAAE,MAAM,WAAW,OAAO,MAAM,OAAO,aAAwB;CAChF,MAAM,SAAS,OAAO,SAAS,WAAW,OAAO,MAAM;CACvD,OACI,oBAAC,WAAD;EACI,MAAM;EACN,aAAa;EACb,qBAAqB,SAAS;EAC9B,WAAW,GAAG,gBAAgBA,oBAAO,MAAM,SAAS;EACpD,eAAa,UAAU,KAAA,IAAY,SAAS,KAAA;EAC5C,cAAY;EACZ,MAAM,UAAU,KAAA,IAAY,QAAQ,KAAA;EACpC,WAAU;CAAO,CAAA;AAG7B"}

package/dist/icon/Icon.module.js

@@ -1,6 +1,6 @@
 import "./Icon.css";
 //#region src/icon/Icon.module.css
-var icon = "panneau-icon-Y4DzXz";
+var icon = "panneau-icon";
 var Icon_module_default = { icon };
 //#endregion
 export { Icon_module_default as default, icon };