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

package/dist/button/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/button/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Button. */\nexport const buttonTokens = defineComponentTokens('button', {\n    /** Space between the icon and the label. */\n    gap: 'var(--panneau-space-2)',\n    /** Horizontal padding. */\n    'padding-x': 'calc(var(--panneau-control-padding-x) + var(--panneau-space-1))',\n    /** Font size of the label. */\n    'font-size': 'var(--panneau-font-size-md)',\n    /** Font weight of the label. */\n    'font-weight': 'var(--panneau-font-weight-medium)',\n    /** Width of the border. */\n    'border-width': 'var(--panneau-border-width)',\n    /** Corner radius. */\n    radius: 'var(--panneau-radius-md)',\n    /** Horizontal padding of the small size. */\n    'padding-x-sm': 'var(--panneau-control-padding-x)',\n    /** Font size of the small size. */\n    'font-size-sm': 'var(--panneau-font-size-sm)',\n});\n"],"mappings":";;;AAGA,IAAa,eAAe,sBAAsB,UAAU;;CAExD,KAAK;;CAEL,aAAa;;CAEb,aAAa;;CAEb,eAAe;;CAEf,gBAAgB;;CAEhB,QAAQ;;CAER,gBAAgB;;CAEhB,gBAAgB;AACpB,CAAC"}

package/dist/card/Card.css

@@ -1,50 +1,57 @@
-.panneau-card-V59wYu {
+.panneau-card {
     display: flex;
     flex-direction: column;
     min-width: 0;
     color: var(--panneau-color-text);
-    background-color: var(--panneau-color-surface);
-    border: var(--panneau-border-width) solid var(--panneau-color-border);
-    border-radius: var(--panneau-radius-lg);
-    box-shadow: var(--panneau-shadow-sm);
+    background-color: var(--panneau-card-bg, var(--panneau-color-surface));
+    border: var(--panneau-card-border-width, var(--panneau-border-width)) solid
+        var(--panneau-card-border-color, var(--panneau-color-border));
+    border-radius: var(--panneau-card-radius, var(--panneau-radius-lg));
+    box-shadow: var(--panneau-card-shadow, var(--panneau-shadow-sm));
 }
 
-.panneau-header-JX2f2b {
+.panneau-card-header {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: var(--panneau-space-2);
-    padding: var(--panneau-space-3) var(--panneau-space-4);
-    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);
+    padding: var(--panneau-card-header-padding-y, var(--panneau-space-3))
+        var(--panneau-card-padding-x, var(--panneau-space-4));
+    border-bottom: var(--panneau-card-border-width, var(--panneau-border-width)) solid
+        var(--panneau-card-border-color, var(--panneau-color-border));
 }
 
-.panneau-title-uA0j8G {
-    font-size: var(--panneau-font-size-lg);
-    font-weight: var(--panneau-font-weight-bold);
+.panneau-card-title {
+    font-size: var(--panneau-card-title-font-size, var(--panneau-font-size-lg));
+    font-weight: var(--panneau-card-title-font-weight, var(--panneau-font-weight-bold));
     line-height: var(--panneau-line-height-tight);
+    margin: 0;
 }
 
-.panneau-body-Zo-Z8N {
+.panneau-card-body {
     display: flex;
     flex-direction: column;
-    gap: var(--panneau-space-4);
-    padding: var(--panneau-space-4);
+    gap: var(--panneau-card-gap, var(--panneau-space-4));
+    padding: var(--panneau-card-padding-y, var(--panneau-space-4))
+        var(--panneau-card-padding-x, var(--panneau-space-4));
 }
 
-.panneau-footer-8OW7kW {
+.panneau-card-footer {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
     gap: var(--panneau-space-2);
-    padding: var(--panneau-space-3) var(--panneau-space-4);
-    border-top: var(--panneau-border-width) solid var(--panneau-color-border);
+    padding: var(--panneau-card-header-padding-y, var(--panneau-space-3))
+        var(--panneau-card-padding-x, var(--panneau-space-4));
+    border-top: var(--panneau-card-border-width, var(--panneau-border-width)) solid
+        var(--panneau-card-border-color, var(--panneau-color-border));
 }
 
 @media (max-width: 30rem) {
-    .panneau-header-JX2f2b,
-    .panneau-body-Zo-Z8N,
-    .panneau-footer-8OW7kW {
+    .panneau-card-header,
+    .panneau-card-body,
+    .panneau-card-footer {
         padding-inline: var(--panneau-space-3);
     }
 }

package/dist/card/Card.js

@@ -10,7 +10,7 @@ function Card({ title, headingLevel = 2, actions, children, footer, as, classNam
 	const Element = as ?? (hasTitle ? "section" : "div");
 	const Heading = `h${headingLevel}`;
 	return /* @__PURE__ */ jsxs(Element, {
-		className: cx(Card_module_default.card, className),
+		className: cx("panneau-card", Card_module_default.card, className),
 		"aria-labelledby": hasTitle && Element !== "div" ? titleId : void 0,
 		children: [
 			hasTitle || actions !== void 0 && actions !== null ? /* @__PURE__ */ jsxs("header", {

package/dist/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["styles"],"sources":["../../src/card/Card.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport { cx } from '../utils/cx';\nimport styles from './Card.module.css';\n\nexport interface CardProps {\n    /** Title in the header. */\n    title?: ReactNode;\n    /** Heading level of the title. Defaults to 2. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** Content at the end of the header: actions, a status. */\n    actions?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    /** Element of the card: `section` (default) with a title, `div` otherwise. */\n    as?: 'section' | 'div' | 'article';\n    className?: string;\n    headerClassName?: string;\n    bodyClassName?: string;\n    footerClassName?: string;\n}\n\n/** A surface that groups related content, with an optional header and footer. */\nexport function Card({\n    title,\n    headingLevel = 2,\n    actions,\n    children,\n    footer,\n    as,\n    className,\n    headerClassName,\n    bodyClassName,\n    footerClassName,\n}: CardProps) {\n    const titleId = useId();\n    const hasTitle = title !== undefined && title !== null;\n    const Element = as ?? (hasTitle ? 'section' : 'div');\n    const Heading = `h${headingLevel}` as const;\n    return (\n        <Element\n            className={cx(styles.card, className)}\n            aria-labelledby={hasTitle && Element !== 'div' ? titleId : undefined}\n        >\n            {hasTitle || (actions !== undefined && actions !== null) ? (\n                <header className={cx(styles.header, headerClassName)}>\n                    {hasTitle ? (\n                        <Heading id={titleId} className={styles.title}>\n                            {title}\n                        </Heading>\n                    ) : (\n                        <span />\n                    )}\n                    {actions}\n                </header>\n            ) : null}\n            <div className={cx(styles.body, bodyClassName)}>{children}</div>\n            {footer !== undefined && footer !== null ? (\n                <footer className={cx(styles.footer, footerClassName)}>{footer}</footer>\n            ) : null}\n        </Element>\n    );\n}\n"],"mappings":";;;;;;AAuBA,SAAgB,KAAK,EACjB,OACA,eAAe,GACf,SACA,UACA,QACA,IACA,WACA,iBACA,eACA,mBACU;CACV,MAAM,UAAU,MAAM;CACtB,MAAM,WAAW,UAAU,KAAA,KAAa,UAAU;CAClD,MAAM,UAAU,OAAO,WAAW,YAAY;CAC9C,MAAM,UAAU,IAAI;CACpB,OACI,qBAAC,SAAD;EACI,WAAW,GAAGA,oBAAO,MAAM,SAAS;EACpC,mBAAiB,YAAY,YAAY,QAAQ,UAAU,KAAA;EAF/D,UAAA;GAIK,YAAa,YAAY,KAAA,KAAa,YAAY,OAC/C,qBAAC,UAAD;IAAQ,WAAW,GAAGA,oBAAO,QAAQ,eAAe;IAApD,UAAA,CACK,WACG,oBAAC,SAAD;KAAS,IAAI;KAAS,WAAWA,oBAAO;KACnC,UAAA;IACI,CAAA,IAET,oBAAC,QAAD,CAAK,CAAA,GAER,OACG;GACR,CAAA,IAAA;GACJ,oBAAC,OAAD;IAAK,WAAW,GAAGA,oBAAO,MAAM,aAAa;IAAI;GAAc,CAAA;GAC9D,WAAW,KAAA,KAAa,WAAW,OAChC,oBAAC,UAAD;IAAQ,WAAW,GAAGA,oBAAO,QAAQ,eAAe;IAAI,UAAA;GAAe,CAAA,IACvE;EACC;;AAEjB"}
+{"version":3,"file":"Card.js","names":["styles"],"sources":["../../src/card/Card.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport { cx } from '../utils/cx';\nimport styles from './Card.module.css';\n\nexport interface CardProps {\n    /** Title in the header. */\n    title?: ReactNode;\n    /** Heading level of the title. Defaults to 2. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** Content at the end of the header: actions, a status. */\n    actions?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    /** Element of the card: `section` (default) with a title, `div` otherwise. */\n    as?: 'section' | 'div' | 'article';\n    className?: string;\n    headerClassName?: string;\n    bodyClassName?: string;\n    footerClassName?: string;\n}\n\n/** A surface that groups related content, with an optional header and footer. */\nexport function Card({\n    title,\n    headingLevel = 2,\n    actions,\n    children,\n    footer,\n    as,\n    className,\n    headerClassName,\n    bodyClassName,\n    footerClassName,\n}: CardProps) {\n    const titleId = useId();\n    const hasTitle = title !== undefined && title !== null;\n    const Element = as ?? (hasTitle ? 'section' : 'div');\n    const Heading = `h${headingLevel}` as const;\n    return (\n        <Element\n            className={cx('panneau-card', styles.card, className)}\n            aria-labelledby={hasTitle && Element !== 'div' ? titleId : undefined}\n        >\n            {hasTitle || (actions !== undefined && actions !== null) ? (\n                <header className={cx(styles.header, headerClassName)}>\n                    {hasTitle ? (\n                        <Heading id={titleId} className={styles.title}>\n                            {title}\n                        </Heading>\n                    ) : (\n                        <span />\n                    )}\n                    {actions}\n                </header>\n            ) : null}\n            <div className={cx(styles.body, bodyClassName)}>{children}</div>\n            {footer !== undefined && footer !== null ? (\n                <footer className={cx(styles.footer, footerClassName)}>{footer}</footer>\n            ) : null}\n        </Element>\n    );\n}\n"],"mappings":";;;;;;AAuBA,SAAgB,KAAK,EACjB,OACA,eAAe,GACf,SACA,UACA,QACA,IACA,WACA,iBACA,eACA,mBACU;CACV,MAAM,UAAU,MAAM;CACtB,MAAM,WAAW,UAAU,KAAA,KAAa,UAAU;CAClD,MAAM,UAAU,OAAO,WAAW,YAAY;CAC9C,MAAM,UAAU,IAAI;CACpB,OACI,qBAAC,SAAD;EACI,WAAW,GAAG,gBAAgBA,oBAAO,MAAM,SAAS;EACpD,mBAAiB,YAAY,YAAY,QAAQ,UAAU,KAAA;EAF/D,UAAA;GAIK,YAAa,YAAY,KAAA,KAAa,YAAY,OAC/C,qBAAC,UAAD;IAAQ,WAAW,GAAGA,oBAAO,QAAQ,eAAe;IAApD,UAAA,CACK,WACG,oBAAC,SAAD;KAAS,IAAI;KAAS,WAAWA,oBAAO;KACnC,UAAA;IACI,CAAA,IAET,oBAAC,QAAD,CAAK,CAAA,GAER,OACG;GACR,CAAA,IAAA;GACJ,oBAAC,OAAD;IAAK,WAAW,GAAGA,oBAAO,MAAM,aAAa;IAAI;GAAc,CAAA;GAC9D,WAAW,KAAA,KAAa,WAAW,OAChC,oBAAC,UAAD;IAAQ,WAAW,GAAGA,oBAAO,QAAQ,eAAe;IAAI,UAAA;GAAe,CAAA,IACvE;EACC;;AAEjB"}

package/dist/card/Card.module.js

@@ -1,10 +1,10 @@
 import "./Card.css";
 //#region src/card/Card.module.css
-var card = "panneau-card-V59wYu";
-var header = "panneau-header-JX2f2b";
-var title = "panneau-title-uA0j8G";
-var body = "panneau-body-Zo-Z8N";
-var footer = "panneau-footer-8OW7kW";
+var card = "panneau-card";
+var header = "panneau-card-header";
+var title = "panneau-card-title";
+var body = "panneau-card-body";
+var footer = "panneau-card-footer";
 var Card_module_default = {
 	card,
 	header,

package/dist/card/Card.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.module.js","names":[],"sources":["../../src/card/Card.module.css"],"sourcesContent":[".card {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-lg);\n    box-shadow: var(--panneau-shadow-sm);\n}\n\n.header {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    padding: var(--panneau-space-3) var(--panneau-space-4);\n    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.title {\n    font-size: var(--panneau-font-size-lg);\n    font-weight: var(--panneau-font-weight-bold);\n    line-height: var(--panneau-line-height-tight);\n}\n\n.body {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-4);\n    padding: var(--panneau-space-4);\n}\n\n.footer {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    gap: var(--panneau-space-2);\n    padding: var(--panneau-space-3) var(--panneau-space-4);\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n@media (max-width: 30rem) {\n    .header,\n    .body,\n    .footer {\n        padding-inline: var(--panneau-space-3);\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"Card.module.js","names":[],"sources":["../../src/card/Card.module.css"],"sourcesContent":[".card {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-card-bg, var(--panneau-color-surface));\n    border: var(--panneau-card-border-width, var(--panneau-border-width)) solid\n        var(--panneau-card-border-color, var(--panneau-color-border));\n    border-radius: var(--panneau-card-radius, var(--panneau-radius-lg));\n    box-shadow: var(--panneau-card-shadow, var(--panneau-shadow-sm));\n}\n\n.header {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    padding: var(--panneau-card-header-padding-y, var(--panneau-space-3))\n        var(--panneau-card-padding-x, var(--panneau-space-4));\n    border-bottom: var(--panneau-card-border-width, var(--panneau-border-width)) solid\n        var(--panneau-card-border-color, var(--panneau-color-border));\n}\n\n.title {\n    font-size: var(--panneau-card-title-font-size, var(--panneau-font-size-lg));\n    font-weight: var(--panneau-card-title-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-line-height-tight);\n    margin: 0;\n}\n\n.body {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-card-gap, var(--panneau-space-4));\n    padding: var(--panneau-card-padding-y, var(--panneau-space-4))\n        var(--panneau-card-padding-x, var(--panneau-space-4));\n}\n\n.footer {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    gap: var(--panneau-space-2);\n    padding: var(--panneau-card-header-padding-y, var(--panneau-space-3))\n        var(--panneau-card-padding-x, var(--panneau-space-4));\n    border-top: var(--panneau-card-border-width, var(--panneau-border-width)) solid\n        var(--panneau-card-border-color, var(--panneau-color-border));\n}\n\n@media (max-width: 30rem) {\n    .header,\n    .body,\n    .footer {\n        padding-inline: var(--panneau-space-3);\n    }\n}\n"],"mappings":""}

package/dist/card/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Card. */
+export declare const cardTokens: import("..").ComponentTokens<"card", "panneau-card-radius" | "panneau-card-gap" | "panneau-card-padding-y" | "panneau-card-padding-x" | "panneau-card-border-width" | "panneau-card-title-font-weight" | "panneau-card-bg" | "panneau-card-border-color" | "panneau-card-shadow" | "panneau-card-header-padding-y" | "panneau-card-title-font-size">;
+//# sourceMappingURL=tokens.d.ts.map

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

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

package/dist/card/tokens.js

@@ -0,0 +1,31 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/card/tokens.ts
+/** Tokens of Card. */
+var cardTokens = defineComponentTokens("card", {
+	/** Background. */
+	bg: "var(--panneau-color-surface)",
+	/** Width of the border and of the separators. */
+	"border-width": "var(--panneau-border-width)",
+	/** Color of the border and of the separators. */
+	"border-color": "var(--panneau-color-border)",
+	/** Corner radius. */
+	radius: "var(--panneau-radius-lg)",
+	/** Shadow. */
+	shadow: "var(--panneau-shadow-sm)",
+	/** Vertical padding of the header and the footer. */
+	"header-padding-y": "var(--panneau-space-3)",
+	/** Horizontal padding of every section. */
+	"padding-x": "var(--panneau-space-4)",
+	/** Font size of the title. */
+	"title-font-size": "var(--panneau-font-size-lg)",
+	/** Font weight of the title. */
+	"title-font-weight": "var(--panneau-font-weight-bold)",
+	/** Vertical padding of the body. */
+	"padding-y": "var(--panneau-space-4)",
+	/** Space between the children of the body. */
+	gap: "var(--panneau-space-4)"
+});
+//#endregion
+export { cardTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/card/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/card/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Card. */\nexport const cardTokens = defineComponentTokens('card', {\n    /** Background. */\n    bg: 'var(--panneau-color-surface)',\n    /** Width of the border and of the separators. */\n    'border-width': 'var(--panneau-border-width)',\n    /** Color of the border and of the separators. */\n    'border-color': 'var(--panneau-color-border)',\n    /** Corner radius. */\n    radius: 'var(--panneau-radius-lg)',\n    /** Shadow. */\n    shadow: 'var(--panneau-shadow-sm)',\n    /** Vertical padding of the header and the footer. */\n    'header-padding-y': 'var(--panneau-space-3)',\n    /** Horizontal padding of every section. */\n    'padding-x': 'var(--panneau-space-4)',\n    /** Font size of the title. */\n    'title-font-size': 'var(--panneau-font-size-lg)',\n    /** Font weight of the title. */\n    'title-font-weight': 'var(--panneau-font-weight-bold)',\n    /** Vertical padding of the body. */\n    'padding-y': 'var(--panneau-space-4)',\n    /** Space between the children of the body. */\n    gap: 'var(--panneau-space-4)',\n});\n"],"mappings":";;;AAGA,IAAa,aAAa,sBAAsB,QAAQ;;CAEpD,IAAI;;CAEJ,gBAAgB;;CAEhB,gBAAgB;;CAEhB,QAAQ;;CAER,QAAQ;;CAER,oBAAoB;;CAEpB,aAAa;;CAEb,mBAAmB;;CAEnB,qBAAqB;;CAErB,aAAa;;CAEb,KAAK;AACT,CAAC"}

package/dist/checkbox/Checkbox.css

@@ -1,11 +1,11 @@
-.panneau-field-4Ta5L2 {
+.panneau-checkbox-field {
     display: flex;
     flex-direction: column;
     gap: var(--panneau-space-1);
     min-width: 0;
 }
 
-.panneau-checkbox-05Z5t- {
+.panneau-checkbox {
     display: inline-flex;
     align-items: flex-start;
     gap: var(--panneau-space-2);
@@ -16,64 +16,65 @@
     -webkit-tap-highlight-color: transparent;
 }
 
-.panneau-checkbox-05Z5t-[data-disabled] {
+.panneau-checkbox[data-disabled] {
     cursor: not-allowed;
     opacity: 0.55;
 }
 
-.panneau-box-6cFOt8 {
+.panneau-checkbox-box {
     display: flex;
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
-    width: 1.125rem;
-    height: 1.125rem;
+    width: var(--panneau-checkbox-size, 1.125rem);
+    height: var(--panneau-checkbox-size, 1.125rem);
     margin-top: 0.125rem;
-    color: var(--panneau-color-accent-text);
-    background-color: var(--panneau-color-surface);
-    border: var(--panneau-border-width) solid var(--panneau-color-border-control);
-    border-radius: var(--panneau-radius-sm);
+    color: var(--panneau-checkbox-checked-color, var(--panneau-color-accent-text));
+    background-color: var(--panneau-checkbox-bg, var(--panneau-color-surface));
+    border: var(--panneau-border-width) solid
+        var(--panneau-checkbox-border-color, var(--panneau-color-border-control));
+    border-radius: var(--panneau-checkbox-radius, var(--panneau-radius-sm));
     transition:
         background-color var(--panneau-duration),
         border-color var(--panneau-duration);
 }
 
-.panneau-checkbox-05Z5t-[data-hovered] .panneau-box-6cFOt8 {
+.panneau-checkbox[data-hovered] .panneau-checkbox-box {
     border-color: var(--panneau-color-text-muted);
 }
 
-.panneau-checkbox-05Z5t-[data-selected] .panneau-box-6cFOt8,
-.panneau-checkbox-05Z5t-[data-indeterminate] .panneau-box-6cFOt8 {
-    background-color: var(--panneau-color-accent);
-    border-color: var(--panneau-color-accent);
+.panneau-checkbox[data-selected] .panneau-checkbox-box,
+.panneau-checkbox[data-indeterminate] .panneau-checkbox-box {
+    background-color: var(--panneau-checkbox-checked-bg, var(--panneau-color-accent));
+    border-color: var(--panneau-checkbox-checked-bg, var(--panneau-color-accent));
 }
 
-.panneau-checkbox-05Z5t-[data-invalid] .panneau-box-6cFOt8 {
+.panneau-checkbox[data-invalid] .panneau-checkbox-box {
     border-color: var(--panneau-color-danger);
 }
 
-.panneau-checkbox-05Z5t-[data-focus-visible] .panneau-box-6cFOt8 {
+.panneau-checkbox[data-focus-visible] .panneau-checkbox-box {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: 2px;
 }
 
-.panneau-checkbox-05Z5t-[data-readonly] {
+.panneau-checkbox[data-readonly] {
     cursor: default;
 }
 
-.panneau-label-ubb5Uj {
+.panneau-checkbox-label {
     line-height: var(--panneau-line-height);
     overflow-wrap: anywhere;
 }
 
 /* Touch screens: a taller row, so the whole label is an easy target. */
 @media (pointer: coarse) {
-    .panneau-checkbox-05Z5t- {
+    .panneau-checkbox {
         min-height: 2.75rem;
         align-items: center;
     }
 
-    .panneau-box-6cFOt8 {
+    .panneau-checkbox-box {
         margin-top: 0;
     }
 }

package/dist/checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEH,KAAK,aAAa,IAAI,iBAAiB,EAC1C,MAAM,uBAAuB,CAAC;AAK/B,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEtE,MAAM,WAAW,aACb,SACI,IAAI,CAAC,iBAAiB,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC,EACtF,iBAAiB;IACrB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,+EAA+E;AAC/E,wBAAgB,QAAQ,CAAC,EACrB,QAAQ,EACR,WAAW,EACX,MAAW,EACX,SAAS,EACT,iBAAiB,EACjB,oBAAoB,EACpB,eAAe,EACf,GAAG,KAAK,EACX,EAAE,aAAa,+BAmCf"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEH,KAAK,aAAa,IAAI,iBAAiB,EAC1C,MAAM,uBAAuB,CAAC;AAK/B,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEtE,MAAM,WAAW,aACb,SACI,IAAI,CAAC,iBAAiB,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC,EACtF,iBAAiB;IACrB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,+EAA+E;AAC/E,wBAAgB,QAAQ,CAAC,EACrB,QAAQ,EACR,WAAW,EACX,MAAW,EACX,SAAS,EACT,iBAAiB,EACjB,oBAAoB,EACpB,eAAe,EACf,GAAG,KAAK,EACX,EAAE,aAAa,+BAoCf"}

package/dist/checkbox/Checkbox.js

@@ -9,6 +9,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 /** A checkbox with its label, and optional description and errors under it. */
 function Checkbox$1({ children, description, errors = [], className, checkboxClassName, descriptionClassName, errorsClassName, ...props }) {
 	return /* @__PURE__ */ jsx(ChoiceChrome, {
+		component: "checkbox",
 		description,
 		errors,
 		className,

package/dist/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["Checkbox","AriaCheckbox","styles","_Fragment"],"sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { Check, Minus } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport {\n    Checkbox as AriaCheckbox,\n    type CheckboxProps as AriaCheckboxProps,\n} from 'react-aria-components';\n\nimport { Icon } from '../icon/Icon';\nimport { cx } from '../utils/cx';\nimport styles from './Checkbox.module.css';\nimport { ChoiceChrome, type ChoiceChromeProps } from './ChoiceChrome';\n\nexport interface CheckboxProps\n    extends\n        Omit<AriaCheckboxProps, 'className' | 'style' | 'children' | 'isInvalid' | 'validate'>,\n        ChoiceChromeProps {\n    /** Label, next to the box. */\n    children?: ReactNode;\n    checkboxClassName?: string;\n}\n\n/** A checkbox with its label, and optional description and errors under it. */\nexport function Checkbox({\n    children,\n    description,\n    errors = [],\n    className,\n    checkboxClassName,\n    descriptionClassName,\n    errorsClassName,\n    ...props\n}: CheckboxProps) {\n    return (\n        <ChoiceChrome\n            description={description}\n            errors={errors}\n            className={className}\n            descriptionClassName={descriptionClassName}\n            errorsClassName={errorsClassName}\n        >\n            {(describedBy) => (\n                <AriaCheckbox\n                    {...props}\n                    aria-describedby={describedBy}\n                    isInvalid={errors.length > 0}\n                    validationBehavior=\"aria\"\n                    className={cx(styles.checkbox, checkboxClassName)}\n                >\n                    {({ isSelected, isIndeterminate }) => (\n                        <>\n                            <span className={styles.box} aria-hidden=\"true\">\n                                {isIndeterminate ? (\n                                    <Icon icon={Minus} size=\"xs\" />\n                                ) : isSelected ? (\n                                    <Icon icon={Check} size=\"xs\" />\n                                ) : null}\n                            </span>\n                            {children !== undefined ? (\n                                <span className={styles.label}>{children}</span>\n                            ) : null}\n                        </>\n                    )}\n                </AriaCheckbox>\n            )}\n        </ChoiceChrome>\n    );\n}\n"],"mappings":";;;;;;;;;AAsBA,SAAgBA,WAAS,EACrB,UACA,aACA,SAAS,CAAA,GACT,WACA,mBACA,sBACA,iBACA,GAAG,SACW;CACd,OACI,oBAAC,cAAD;EACiB;EACL;EACG;EACW;EACL;EAEf,WAAA,gBACE,oBAACC,UAAD;GACI,GAAI;GACJ,oBAAkB;GAClB,WAAW,OAAO,SAAS;GAC3B,oBAAmB;GACnB,WAAW,GAAGC,wBAAO,UAAU,iBAAiB;GAE9C,WAAA,EAAE,YAAY,sBACZ,qBAAAC,UAAA,EAAA,UAAA,CACI,oBAAC,QAAD;IAAM,WAAWD,wBAAO;IAAK,eAAY;IACpC,UAAA,kBACG,oBAAC,MAAD;KAAM,MAAM;KAAO,MAAK;IAAI,CAAA,IAC5B,aACA,oBAAC,MAAD;KAAM,MAAM;KAAO,MAAK;IAAI,CAAA,IAC5B;GACF,CAAA,GACL,aAAa,KAAA,IACV,oBAAC,QAAD;IAAM,WAAWA,wBAAO;IAAQ;GAAe,CAAA,IAC/C,IACR,EAAA,CAAA;EAEM,CAAA;CAER,CAAA;AAEtB"}
+{"version":3,"file":"Checkbox.js","names":["Checkbox","AriaCheckbox","styles","_Fragment"],"sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { Check, Minus } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport {\n    Checkbox as AriaCheckbox,\n    type CheckboxProps as AriaCheckboxProps,\n} from 'react-aria-components';\n\nimport { Icon } from '../icon/Icon';\nimport { cx } from '../utils/cx';\nimport styles from './Checkbox.module.css';\nimport { ChoiceChrome, type ChoiceChromeProps } from './ChoiceChrome';\n\nexport interface CheckboxProps\n    extends\n        Omit<AriaCheckboxProps, 'className' | 'style' | 'children' | 'isInvalid' | 'validate'>,\n        ChoiceChromeProps {\n    /** Label, next to the box. */\n    children?: ReactNode;\n    checkboxClassName?: string;\n}\n\n/** A checkbox with its label, and optional description and errors under it. */\nexport function Checkbox({\n    children,\n    description,\n    errors = [],\n    className,\n    checkboxClassName,\n    descriptionClassName,\n    errorsClassName,\n    ...props\n}: CheckboxProps) {\n    return (\n        <ChoiceChrome\n            component=\"checkbox\"\n            description={description}\n            errors={errors}\n            className={className}\n            descriptionClassName={descriptionClassName}\n            errorsClassName={errorsClassName}\n        >\n            {(describedBy) => (\n                <AriaCheckbox\n                    {...props}\n                    aria-describedby={describedBy}\n                    isInvalid={errors.length > 0}\n                    validationBehavior=\"aria\"\n                    className={cx(styles.checkbox, checkboxClassName)}\n                >\n                    {({ isSelected, isIndeterminate }) => (\n                        <>\n                            <span className={styles.box} aria-hidden=\"true\">\n                                {isIndeterminate ? (\n                                    <Icon icon={Minus} size=\"xs\" />\n                                ) : isSelected ? (\n                                    <Icon icon={Check} size=\"xs\" />\n                                ) : null}\n                            </span>\n                            {children !== undefined ? (\n                                <span className={styles.label}>{children}</span>\n                            ) : null}\n                        </>\n                    )}\n                </AriaCheckbox>\n            )}\n        </ChoiceChrome>\n    );\n}\n"],"mappings":";;;;;;;;;AAsBA,SAAgBA,WAAS,EACrB,UACA,aACA,SAAS,CAAA,GACT,WACA,mBACA,sBACA,iBACA,GAAG,SACW;CACd,OACI,oBAAC,cAAD;EACI,WAAU;EACG;EACL;EACG;EACW;EACL;EAEf,WAAA,gBACE,oBAACC,UAAD;GACI,GAAI;GACJ,oBAAkB;GAClB,WAAW,OAAO,SAAS;GAC3B,oBAAmB;GACnB,WAAW,GAAGC,wBAAO,UAAU,iBAAiB;GAE9C,WAAA,EAAE,YAAY,sBACZ,qBAAAC,UAAA,EAAA,UAAA,CACI,oBAAC,QAAD;IAAM,WAAWD,wBAAO;IAAK,eAAY;IACpC,UAAA,kBACG,oBAAC,MAAD;KAAM,MAAM;KAAO,MAAK;IAAI,CAAA,IAC5B,aACA,oBAAC,MAAD;KAAM,MAAM;KAAO,MAAK;IAAI,CAAA,IAC5B;GACF,CAAA,GACL,aAAa,KAAA,IACV,oBAAC,QAAD;IAAM,WAAWA,wBAAO;IAAQ;GAAe,CAAA,IAC/C,IACR,EAAA,CAAA;EAEM,CAAA;CAER,CAAA;AAEtB"}

package/dist/checkbox/Checkbox.module.js

@@ -1,9 +1,9 @@
 import "./Checkbox.css";
 //#region src/checkbox/Checkbox.module.css
-var field = "panneau-field-4Ta5L2";
-var checkbox = "panneau-checkbox-05Z5t-";
-var box = "panneau-box-6cFOt8";
-var label = "panneau-label-ubb5Uj";
+var field = "panneau-checkbox-field";
+var checkbox = "panneau-checkbox";
+var box = "panneau-checkbox-box";
+var label = "panneau-checkbox-label";
 var Checkbox_module_default = {
 	field,
 	checkbox,

package/dist/checkbox/Checkbox.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.module.js","names":[],"sources":["../../src/checkbox/Checkbox.module.css"],"sourcesContent":[".field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    min-width: 0;\n}\n\n.checkbox {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-2);\n    min-height: 1.5rem;\n    font-size: var(--panneau-font-size-md);\n    color: var(--panneau-color-text);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.checkbox[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.box {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: 1.125rem;\n    height: 1.125rem;\n    margin-top: 0.125rem;\n    color: var(--panneau-color-accent-text);\n    background-color: var(--panneau-color-surface);\n    border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-sm);\n    transition:\n        background-color var(--panneau-duration),\n        border-color var(--panneau-duration);\n}\n\n.checkbox[data-hovered] .box {\n    border-color: var(--panneau-color-text-muted);\n}\n\n.checkbox[data-selected] .box,\n.checkbox[data-indeterminate] .box {\n    background-color: var(--panneau-color-accent);\n    border-color: var(--panneau-color-accent);\n}\n\n.checkbox[data-invalid] .box {\n    border-color: var(--panneau-color-danger);\n}\n\n.checkbox[data-focus-visible] .box {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.checkbox[data-readonly] {\n    cursor: default;\n}\n\n.label {\n    line-height: var(--panneau-line-height);\n    overflow-wrap: anywhere;\n}\n\n/* Touch screens: a taller row, so the whole label is an easy target. */\n@media (pointer: coarse) {\n    .checkbox {\n        min-height: 2.75rem;\n        align-items: center;\n    }\n\n    .box {\n        margin-top: 0;\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"Checkbox.module.js","names":[],"sources":["../../src/checkbox/Checkbox.module.css"],"sourcesContent":[".field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    min-width: 0;\n}\n\n.checkbox {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-2);\n    min-height: 1.5rem;\n    font-size: var(--panneau-font-size-md);\n    color: var(--panneau-color-text);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.checkbox[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.box {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--panneau-checkbox-size, 1.125rem);\n    height: var(--panneau-checkbox-size, 1.125rem);\n    margin-top: 0.125rem;\n    color: var(--panneau-checkbox-checked-color, var(--panneau-color-accent-text));\n    background-color: var(--panneau-checkbox-bg, var(--panneau-color-surface));\n    border: var(--panneau-border-width) solid\n        var(--panneau-checkbox-border-color, var(--panneau-color-border-control));\n    border-radius: var(--panneau-checkbox-radius, var(--panneau-radius-sm));\n    transition:\n        background-color var(--panneau-duration),\n        border-color var(--panneau-duration);\n}\n\n.checkbox[data-hovered] .box {\n    border-color: var(--panneau-color-text-muted);\n}\n\n.checkbox[data-selected] .box,\n.checkbox[data-indeterminate] .box {\n    background-color: var(--panneau-checkbox-checked-bg, var(--panneau-color-accent));\n    border-color: var(--panneau-checkbox-checked-bg, var(--panneau-color-accent));\n}\n\n.checkbox[data-invalid] .box {\n    border-color: var(--panneau-color-danger);\n}\n\n.checkbox[data-focus-visible] .box {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.checkbox[data-readonly] {\n    cursor: default;\n}\n\n.label {\n    line-height: var(--panneau-line-height);\n    overflow-wrap: anywhere;\n}\n\n/* Touch screens: a taller row, so the whole label is an easy target. */\n@media (pointer: coarse) {\n    .checkbox {\n        min-height: 2.75rem;\n        align-items: center;\n    }\n\n    .box {\n        margin-top: 0;\n    }\n}\n"],"mappings":""}

package/dist/checkbox/ChoiceChrome.d.ts

@@ -1,5 +1,7 @@
 import { type ReactNode } from 'react';
 export interface ChoiceChromeProps {
+    /** The component, for its `panneau-<component>` class: `checkbox` or `switch`. */
+    component?: string;
     /** Help text under the control. */
     description?: ReactNode;
     /** Error messages. Any message makes the control invalid. */
@@ -9,7 +11,7 @@ export interface ChoiceChromeProps {
     errorsClassName?: string;
 }
 /** Description and errors under a checkbox or a switch, linked to it. */
-export declare function ChoiceChrome({ description, errors, className, descriptionClassName, errorsClassName, children, }: ChoiceChromeProps & {
+export declare function ChoiceChrome({ component, description, errors, className, descriptionClassName, errorsClassName, children, }: ChoiceChromeProps & {
     children: (describedBy: string | undefined) => ReactNode;
 }): import("react").JSX.Element;
 //# sourceMappingURL=ChoiceChrome.d.ts.map

package/dist/checkbox/ChoiceChrome.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceChrome.d.ts","sourceRoot":"","sources":["../../src/checkbox/ChoiceChrome.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAMxD,MAAM,WAAW,iBAAiB;IAC9B,mCAAmC;IACnC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,yEAAyE;AACzE,wBAAgB,YAAY,CAAC,EACzB,WAAW,EACX,MAAW,EACX,SAAS,EACT,oBAAoB,EACpB,eAAe,EACf,QAAQ,GACX,EAAE,iBAAiB,GAAG;IAAE,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,KAAK,SAAS,CAAA;CAAE,+BA8BlF"}
+{"version":3,"file":"ChoiceChrome.d.ts","sourceRoot":"","sources":["../../src/checkbox/ChoiceChrome.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAMxD,MAAM,WAAW,iBAAiB;IAC9B,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,yEAAyE;AACzE,wBAAgB,YAAY,CAAC,EACzB,SAAS,EACT,WAAW,EACX,MAAW,EACX,SAAS,EACT,oBAAoB,EACpB,eAAe,EACf,QAAQ,GACX,EAAE,iBAAiB,GAAG;IAAE,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,KAAK,SAAS,CAAA;CAAE,+BAoClF"}

package/dist/checkbox/ChoiceChrome.js

@@ -5,13 +5,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, useId } from "react";
 //#region src/checkbox/ChoiceChrome.tsx
 /** Description and errors under a checkbox or a switch, linked to it. */
-function ChoiceChrome({ description, errors = [], className, descriptionClassName, errorsClassName, children }) {
+function ChoiceChrome({ component, description, errors = [], className, descriptionClassName, errorsClassName, children }) {
 	const id = useId();
 	const descriptionId = description !== void 0 && description !== null ? `${id}-description` : null;
 	const errorsId = errors.length > 0 ? `${id}-errors` : null;
 	const describedBy = [descriptionId, errorsId].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx(Checkbox_module_default.field, className),
+		className: cx(component !== void 0 && `panneau-${component}`, Checkbox_module_default.field, className),
 		children: [
 			children(describedBy !== "" ? describedBy : void 0),
 			descriptionId !== null ? /* @__PURE__ */ jsx("div", {

package/dist/checkbox/ChoiceChrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceChrome.js","names":["styles","fieldStyles","Fragment"],"sources":["../../src/checkbox/ChoiceChrome.tsx"],"sourcesContent":["import { Fragment, type ReactNode, useId } from 'react';\n\nimport { fieldStyles } from '../field/FieldParts';\nimport { cx } from '../utils/cx';\nimport styles from './Checkbox.module.css';\n\nexport interface ChoiceChromeProps {\n    /** Help text under the control. */\n    description?: ReactNode;\n    /** Error messages. Any message makes the control invalid. */\n    errors?: readonly string[];\n    className?: string;\n    descriptionClassName?: string;\n    errorsClassName?: string;\n}\n\n/** Description and errors under a checkbox or a switch, linked to it. */\nexport function ChoiceChrome({\n    description,\n    errors = [],\n    className,\n    descriptionClassName,\n    errorsClassName,\n    children,\n}: ChoiceChromeProps & { children: (describedBy: string | undefined) => ReactNode }) {\n    const id = useId();\n    const descriptionId =\n        description !== undefined && description !== null ? `${id}-description` : null;\n    const errorsId = errors.length > 0 ? `${id}-errors` : null;\n    const describedBy = [descriptionId, errorsId].filter(Boolean).join(' ');\n    return (\n        <div className={cx(styles.field, className)}>\n            {children(describedBy !== '' ? describedBy : undefined)}\n            {descriptionId !== null ? (\n                <div\n                    id={descriptionId}\n                    className={cx(fieldStyles.description, descriptionClassName)}\n                >\n                    {description}\n                </div>\n            ) : null}\n            {errorsId !== null ? (\n                <div id={errorsId} className={cx(fieldStyles.errors, errorsClassName)}>\n                    {errors.map((error, index) => (\n                        <Fragment key={index}>\n                            {/* A space between messages, for assistive technologies. */}\n                            {index > 0 ? ' ' : null}\n                            <span className={fieldStyles.error}>{error}</span>\n                        </Fragment>\n                    ))}\n                </div>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AAiBA,SAAgB,aAAa,EACzB,aACA,SAAS,CAAA,GACT,WACA,sBACA,iBACA,YACiF;CACjF,MAAM,KAAK,MAAM;CACjB,MAAM,gBACF,gBAAgB,KAAA,KAAa,gBAAgB,OAAO,GAAG,GAAE,gBAAiB;CAC9E,MAAM,WAAW,OAAO,SAAS,IAAI,GAAG,GAAE,WAAY;CACtD,MAAM,cAAc,CAAC,eAAe,QAAQ,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CACtE,OACI,qBAAC,OAAD;EAAK,WAAW,GAAGA,wBAAO,OAAO,SAAS;EAA1C,UAAA;GACK,SAAS,gBAAgB,KAAK,cAAc,KAAA,CAAS;GACrD,kBAAkB,OACf,oBAAC,OAAD;IACI,IAAI;IACJ,WAAW,GAAGC,qBAAY,aAAa,oBAAoB;IAE1D,UAAA;GACA,CAAA,IACL;GACH,aAAa,OACV,oBAAC,OAAD;IAAK,IAAI;IAAU,WAAW,GAAGA,qBAAY,QAAQ,eAAe;IAC/D,UAAA,OAAO,KAAK,OAAO,UAChB,qBAACC,YAAD,EAAA,UAAA,CAEK,QAAQ,IAAI,MAAM,MACnB,oBAAC,QAAD;KAAM,WAAWD,qBAAY;KAAQ,UAAA;IAAY,CAAA,CAC3C,EAAA,GAJK,KAIL,CACb;GACA,CAAA,IACL;EACH;;AAEb"}
+{"version":3,"file":"ChoiceChrome.js","names":["styles","fieldStyles","Fragment"],"sources":["../../src/checkbox/ChoiceChrome.tsx"],"sourcesContent":["import { Fragment, type ReactNode, useId } from 'react';\n\nimport { fieldStyles } from '../field/FieldParts';\nimport { cx } from '../utils/cx';\nimport styles from './Checkbox.module.css';\n\nexport interface ChoiceChromeProps {\n    /** The component, for its `panneau-<component>` class: `checkbox` or `switch`. */\n    component?: string;\n    /** Help text under the control. */\n    description?: ReactNode;\n    /** Error messages. Any message makes the control invalid. */\n    errors?: readonly string[];\n    className?: string;\n    descriptionClassName?: string;\n    errorsClassName?: string;\n}\n\n/** Description and errors under a checkbox or a switch, linked to it. */\nexport function ChoiceChrome({\n    component,\n    description,\n    errors = [],\n    className,\n    descriptionClassName,\n    errorsClassName,\n    children,\n}: ChoiceChromeProps & { children: (describedBy: string | undefined) => ReactNode }) {\n    const id = useId();\n    const descriptionId =\n        description !== undefined && description !== null ? `${id}-description` : null;\n    const errorsId = errors.length > 0 ? `${id}-errors` : null;\n    const describedBy = [descriptionId, errorsId].filter(Boolean).join(' ');\n    return (\n        <div\n            className={cx(\n                component !== undefined && `panneau-${component}`,\n                styles.field,\n                className,\n            )}\n        >\n            {children(describedBy !== '' ? describedBy : undefined)}\n            {descriptionId !== null ? (\n                <div\n                    id={descriptionId}\n                    className={cx(fieldStyles.description, descriptionClassName)}\n                >\n                    {description}\n                </div>\n            ) : null}\n            {errorsId !== null ? (\n                <div id={errorsId} className={cx(fieldStyles.errors, errorsClassName)}>\n                    {errors.map((error, index) => (\n                        <Fragment key={index}>\n                            {/* A space between messages, for assistive technologies. */}\n                            {index > 0 ? ' ' : null}\n                            <span className={fieldStyles.error}>{error}</span>\n                        </Fragment>\n                    ))}\n                </div>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AAmBA,SAAgB,aAAa,EACzB,WACA,aACA,SAAS,CAAA,GACT,WACA,sBACA,iBACA,YACiF;CACjF,MAAM,KAAK,MAAM;CACjB,MAAM,gBACF,gBAAgB,KAAA,KAAa,gBAAgB,OAAO,GAAG,GAAE,gBAAiB;CAC9E,MAAM,WAAW,OAAO,SAAS,IAAI,GAAG,GAAE,WAAY;CACtD,MAAM,cAAc,CAAC,eAAe,QAAQ,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CACtE,OACI,qBAAC,OAAD;EACI,WAAW,GACP,cAAc,KAAA,KAAa,WAAW,aACtCA,wBAAO,OACP,SACJ;EALJ,UAAA;GAOK,SAAS,gBAAgB,KAAK,cAAc,KAAA,CAAS;GACrD,kBAAkB,OACf,oBAAC,OAAD;IACI,IAAI;IACJ,WAAW,GAAGC,qBAAY,aAAa,oBAAoB;IAE1D,UAAA;GACA,CAAA,IACL;GACH,aAAa,OACV,oBAAC,OAAD;IAAK,IAAI;IAAU,WAAW,GAAGA,qBAAY,QAAQ,eAAe;IAC/D,UAAA,OAAO,KAAK,OAAO,UAChB,qBAACC,YAAD,EAAA,UAAA,CAEK,QAAQ,IAAI,MAAM,MACnB,oBAAC,QAAD;KAAM,WAAWD,qBAAY;KAAQ,UAAA;IAAY,CAAA,CAC3C,EAAA,GAJK,KAIL,CACb;GACA,CAAA,IACL;EACH;;AAEb"}

package/dist/checkbox/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Checkbox. */
+export declare const checkboxTokens: import("..").ComponentTokens<"checkbox", "panneau-checkbox-size" | "panneau-checkbox-radius" | "panneau-checkbox-bg" | "panneau-checkbox-border-color" | "panneau-checkbox-checked-color" | "panneau-checkbox-checked-bg">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/checkbox/tokens.ts"],"names":[],"mappings":"AAEA,0BAA0B;AAC1B,eAAO,MAAM,cAAc,4NAazB,CAAC"}

package/dist/checkbox/tokens.js

@@ -0,0 +1,21 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/checkbox/tokens.ts
+/** Tokens of Checkbox. */
+var checkboxTokens = defineComponentTokens("checkbox", {
+	/** Size of the box. */
+	size: "1.125rem",
+	/** Color of the check mark. */
+	"checked-color": "var(--panneau-color-accent-text)",
+	/** Background of the box. */
+	bg: "var(--panneau-color-surface)",
+	/** Border color of the box. */
+	"border-color": "var(--panneau-color-border-control)",
+	/** Corner radius of the box. */
+	radius: "var(--panneau-radius-sm)",
+	/** Background and border color of a checked box. */
+	"checked-bg": "var(--panneau-color-accent)"
+});
+//#endregion
+export { checkboxTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/checkbox/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/checkbox/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Checkbox. */\nexport const checkboxTokens = defineComponentTokens('checkbox', {\n    /** Size of the box. */\n    size: '1.125rem',\n    /** Color of the check mark. */\n    'checked-color': 'var(--panneau-color-accent-text)',\n    /** Background of the box. */\n    bg: 'var(--panneau-color-surface)',\n    /** Border color of the box. */\n    'border-color': 'var(--panneau-color-border-control)',\n    /** Corner radius of the box. */\n    radius: 'var(--panneau-radius-sm)',\n    /** Background and border color of a checked box. */\n    'checked-bg': 'var(--panneau-color-accent)',\n});\n"],"mappings":";;;AAGA,IAAa,iBAAiB,sBAAsB,YAAY;;CAE5D,MAAM;;CAEN,iBAAiB;;CAEjB,IAAI;;CAEJ,gBAAgB;;CAEhB,QAAQ;;CAER,cAAc;AAClB,CAAC"}

package/dist/combo-box/ComboBox.css

@@ -1,8 +1,8 @@
-.panneau-control-zMvu7z.panneau-control-zMvu7z {
+.panneau-combo-box-control.panneau-combo-box-control {
     padding-inline-end: 0;
 }
 
-.panneau-button-RsfUPx {
+.panneau-combo-box-button {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -15,11 +15,11 @@
     border: 0;
 }
 
-.panneau-button-RsfUPx[data-hovered] {
+.panneau-combo-box-button[data-hovered] {
     color: var(--panneau-color-text);
 }
 
-.panneau-status-8R1JBC {
+.panneau-combo-box-status {
     display: flex;
     align-items: center;
     padding-inline: var(--panneau-space-1);

package/dist/combo-box/ComboBox.js

@@ -30,7 +30,7 @@ function ComboBox$1({ items, value, onChange, label, description, errors = [], p
 		isRequired,
 		isInvalid: invalid,
 		validationBehavior: "aria",
-		className: cx(Field_module_default.field, className),
+		className: cx("panneau-combo-box", Field_module_default.field, className),
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, {
 				isRequired,

package/dist/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["item","ComboBox","AriaComboBox","fieldStyles","styles","listStyles","_Fragment"],"sources":["../../src/combo-box/ComboBox.tsx"],"sourcesContent":["import { Check, ChevronDown } from 'lucide-react';\nimport {\n    ComboBox as AriaComboBox,\n    type ComboBoxProps as AriaComboBoxProps,\n    Button,\n    Group,\n    Input,\n    ListBox,\n    ListBoxItem,\n    Text,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { Icon } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { PopoverSurface } from '../popover/Popover';\nimport listStyles from '../select/ListBox.module.css';\nimport { Spinner } from '../spinner/Spinner';\nimport { cx } from '../utils/cx';\nimport styles from './ComboBox.module.css';\n\n/** An item that a combo box can pick. */\nexport interface ComboBoxItem {\n    id: string;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n}\n\nexport interface ComboBoxProps\n    extends\n        Omit<\n            AriaComboBoxProps<ComboBoxItem>,\n            | 'className'\n            | 'style'\n            | 'children'\n            | 'items'\n            | 'defaultItems'\n            | 'isInvalid'\n            | 'validate'\n            | 'selectedKey'\n            | 'defaultSelectedKey'\n            | 'onSelectionChange'\n            | 'value'\n            | 'defaultValue'\n            | 'onChange'\n        >,\n        FieldChromeProps {\n    /** The items to show. For a local list, filter them with `inputValue`; for a search, fetch them. */\n    items: readonly ComboBoxItem[];\n    /** Id of the selected item, or `null`. */\n    value?: string | null;\n    onChange?: (id: string | null) => void;\n    placeholder?: string;\n    /** Shows a spinner while items load. */\n    isLoading?: boolean;\n    /** Text shown without items. Defaults to \"No results\". */\n    emptyMessage?: string;\n    controlClassName?: string;\n    inputClassName?: string;\n    popoverClassName?: string;\n}\n\n/**\n * A text input with a list of suggestions, to pick one item. Items can be filtered locally or come\n * from a search (`inputValue`, `onInputChange` and `isLoading`).\n */\nexport function ComboBox({\n    items,\n    value,\n    onChange,\n    label,\n    description,\n    errors = [],\n    placeholder,\n    isLoading = false,\n    emptyMessage,\n    isRequired,\n    menuTrigger = 'focus',\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    inputClassName,\n    popoverClassName,\n    ...props\n}: ComboBoxProps) {\n    const intl = usePanneauIntl();\n    const invalid = errors.length > 0;\n    return (\n        <AriaComboBox\n            {...props}\n            items={items}\n            selectedKey={value}\n            onSelectionChange={\n                onChange !== undefined\n                    ? (key) => onChange(key === null ? null : String(key))\n                    : undefined\n            }\n            disabledKeys={items.filter((item) => item.disabled === true).map((item) => item.id)}\n            menuTrigger={menuTrigger}\n            allowsEmptyCollection\n            isRequired={isRequired}\n            isInvalid={invalid}\n            validationBehavior=\"aria\"\n            className={cx(fieldStyles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <Group\n                className={cx(fieldStyles.control, styles.control, controlClassName)}\n                data-invalid={invalid || undefined}\n            >\n                <Input placeholder={placeholder} className={cx(fieldStyles.bare, inputClassName)} />\n                {isLoading ? (\n                    <span className={styles.status}>\n                        <Spinner size=\"sm\" />\n                    </span>\n                ) : null}\n                <Button\n                    className={styles.button}\n                    aria-label={intl.formatMessage(messages.showOptions)}\n                >\n                    <Icon icon={ChevronDown} />\n                </Button>\n            </Group>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n            <PopoverSurface className={popoverClassName}>\n                <ListBox<ComboBoxItem>\n                    className={listStyles.listBox}\n                    renderEmptyState={() => (\n                        <div className={listStyles.empty}>\n                            {isLoading\n                                ? intl.formatMessage(messages.loading)\n                                : (emptyMessage ?? intl.formatMessage(messages.noResults))}\n                        </div>\n                    )}\n                >\n                    {(item) => (\n                        <ListBoxItem\n                            id={item.id}\n                            textValue={item.label}\n                            className={listStyles.item}\n                        >\n                            {({ isSelected }) => (\n                                <>\n                                    <span className={listStyles.check}>\n                                        {isSelected ? <Icon icon={Check} size=\"sm\" /> : null}\n                                    </span>\n                                    <span className={listStyles.itemText}>\n                                        <Text slot=\"label\" className={listStyles.itemLabel}>\n                                            {item.label}\n                                        </Text>\n                                        {item.description !== undefined ? (\n                                            <Text\n                                                slot=\"description\"\n                                                className={listStyles.itemDescription}\n                                            >\n                                                {item.description}\n                                            </Text>\n                                        ) : null}\n                                    </span>\n                                </>\n                            )}\n                        </ListBoxItem>\n                    )}\n                </ListBox>\n            </PopoverSurface>\n        </AriaComboBox>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0EA,SAAgBC,WAAS,EACrB,OACA,OACA,UACA,OACA,aACA,SAAS,CAAA,GACT,aACA,YAAY,OACZ,cACA,YACA,cAAc,SACd,WACA,gBACA,sBACA,iBACA,kBACA,gBACA,kBACA,GAAG,SACW;CACd,MAAM,OAAO,eAAe;CAC5B,MAAM,UAAU,OAAO,SAAS;CAChC,OACI,qBAACC,UAAD;EACI,GAAI;EACG;EACP,aAAa;EACb,mBACI,aAAa,KAAA,KACN,QAAQ,SAAS,QAAQ,OAAO,OAAO,OAAO,GAAG,CAAC,IACnD,KAAA;EAEV,cAAc,MAAM,QAAQ,SAAS,KAAK,aAAa,IAAI,CAAC,CAAC,KAAKF,WAASA,OAAK,EAAE;EACrE;EACb,uBAAA;EACY;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAGG,qBAAY,OAAO,SAAS;EAf9C,UAAA;GAiBI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAY,SAASC,wBAAO,SAAS,gBAAgB;IACnE,gBAAc,WAAW,KAAA;IAF7B,UAAA;KAII,oBAAC,OAAD;MAAoB;MAAa,WAAW,GAAGD,qBAAY,MAAM,cAAc;KAAE,CAAA;KAChF,YACG,oBAAC,QAAD;MAAM,WAAWC,wBAAO;MACpB,UAAA,oBAAC,SAAD,EAAS,MAAK,KAAI,CAAA;KAChB,CAAA,IACN;KACJ,oBAAC,QAAD;MACI,WAAWA,wBAAO;MAClB,cAAY,KAAK,cAAc,SAAS,WAAW;MAEnD,UAAA,oBAAC,MAAD,EAAM,MAAM,YAAY,CAAA;KACpB,CAAA;IACL;;GACP,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;GACxD,oBAAC,gBAAD;IAAgB,WAAW;IACvB,UAAA,oBAAC,SAAD;KACI,WAAWC,uBAAW;KACtB,wBACI,oBAAC,OAAD;MAAK,WAAWA,uBAAW;MACtB,UAAA,YACK,KAAK,cAAc,SAAS,OAAO,IAClC,gBAAgB,KAAK,cAAc,SAAS,SAAS;KAC3D,CAAA;KAGPL,WAAAA,WACE,oBAAC,aAAD;MACI,IAAIA,OAAK;MACT,WAAWA,OAAK;MAChB,WAAWK,uBAAW;MAEpB,WAAA,EAAE,iBACA,qBAAAC,UAAA,EAAA,UAAA,CACI,oBAAC,QAAD;OAAM,WAAWD,uBAAW;OACvB,UAAA,aAAa,oBAAC,MAAD;QAAM,MAAM;QAAO,MAAK;OAAI,CAAA,IAAM;MAC9C,CAAA,GACN,qBAAC,QAAD;OAAM,WAAWA,uBAAW;OAA5B,UAAA,CACI,oBAAC,MAAD;QAAM,MAAK;QAAQ,WAAWA,uBAAW;QACpCL,UAAAA,OAAK;OACJ,CAAA,GACLA,OAAK,gBAAgB,KAAA,IAClB,oBAAC,MAAD;QACI,MAAK;QACL,WAAWK,uBAAW;QAErBL,UAAAA,OAAK;OACJ,CAAA,IACN,IACF;MACV,CAAA,CAAA,EAAA,CAAA;KAEK,CAAA;IAEZ,CAAA;GACG,CAAA;EACN;;AAEtB"}
+{"version":3,"file":"ComboBox.js","names":["item","ComboBox","AriaComboBox","fieldStyles","styles","listStyles","_Fragment"],"sources":["../../src/combo-box/ComboBox.tsx"],"sourcesContent":["import { Check, ChevronDown } from 'lucide-react';\nimport {\n    ComboBox as AriaComboBox,\n    type ComboBoxProps as AriaComboBoxProps,\n    Button,\n    Group,\n    Input,\n    ListBox,\n    ListBoxItem,\n    Text,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { Icon } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { PopoverSurface } from '../popover/Popover';\nimport listStyles from '../select/ListBox.module.css';\nimport { Spinner } from '../spinner/Spinner';\nimport { cx } from '../utils/cx';\nimport styles from './ComboBox.module.css';\n\n/** An item that a combo box can pick. */\nexport interface ComboBoxItem {\n    id: string;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n}\n\nexport interface ComboBoxProps\n    extends\n        Omit<\n            AriaComboBoxProps<ComboBoxItem>,\n            | 'className'\n            | 'style'\n            | 'children'\n            | 'items'\n            | 'defaultItems'\n            | 'isInvalid'\n            | 'validate'\n            | 'selectedKey'\n            | 'defaultSelectedKey'\n            | 'onSelectionChange'\n            | 'value'\n            | 'defaultValue'\n            | 'onChange'\n        >,\n        FieldChromeProps {\n    /** The items to show. For a local list, filter them with `inputValue`; for a search, fetch them. */\n    items: readonly ComboBoxItem[];\n    /** Id of the selected item, or `null`. */\n    value?: string | null;\n    onChange?: (id: string | null) => void;\n    placeholder?: string;\n    /** Shows a spinner while items load. */\n    isLoading?: boolean;\n    /** Text shown without items. Defaults to \"No results\". */\n    emptyMessage?: string;\n    controlClassName?: string;\n    inputClassName?: string;\n    popoverClassName?: string;\n}\n\n/**\n * A text input with a list of suggestions, to pick one item. Items can be filtered locally or come\n * from a search (`inputValue`, `onInputChange` and `isLoading`).\n */\nexport function ComboBox({\n    items,\n    value,\n    onChange,\n    label,\n    description,\n    errors = [],\n    placeholder,\n    isLoading = false,\n    emptyMessage,\n    isRequired,\n    menuTrigger = 'focus',\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    inputClassName,\n    popoverClassName,\n    ...props\n}: ComboBoxProps) {\n    const intl = usePanneauIntl();\n    const invalid = errors.length > 0;\n    return (\n        <AriaComboBox\n            {...props}\n            items={items}\n            selectedKey={value}\n            onSelectionChange={\n                onChange !== undefined\n                    ? (key) => onChange(key === null ? null : String(key))\n                    : undefined\n            }\n            disabledKeys={items.filter((item) => item.disabled === true).map((item) => item.id)}\n            menuTrigger={menuTrigger}\n            allowsEmptyCollection\n            isRequired={isRequired}\n            isInvalid={invalid}\n            validationBehavior=\"aria\"\n            className={cx('panneau-combo-box', fieldStyles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <Group\n                className={cx(fieldStyles.control, styles.control, controlClassName)}\n                data-invalid={invalid || undefined}\n            >\n                <Input placeholder={placeholder} className={cx(fieldStyles.bare, inputClassName)} />\n                {isLoading ? (\n                    <span className={styles.status}>\n                        <Spinner size=\"sm\" />\n                    </span>\n                ) : null}\n                <Button\n                    className={styles.button}\n                    aria-label={intl.formatMessage(messages.showOptions)}\n                >\n                    <Icon icon={ChevronDown} />\n                </Button>\n            </Group>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n            <PopoverSurface className={popoverClassName}>\n                <ListBox<ComboBoxItem>\n                    className={listStyles.listBox}\n                    renderEmptyState={() => (\n                        <div className={listStyles.empty}>\n                            {isLoading\n                                ? intl.formatMessage(messages.loading)\n                                : (emptyMessage ?? intl.formatMessage(messages.noResults))}\n                        </div>\n                    )}\n                >\n                    {(item) => (\n                        <ListBoxItem\n                            id={item.id}\n                            textValue={item.label}\n                            className={listStyles.item}\n                        >\n                            {({ isSelected }) => (\n                                <>\n                                    <span className={listStyles.check}>\n                                        {isSelected ? <Icon icon={Check} size=\"sm\" /> : null}\n                                    </span>\n                                    <span className={listStyles.itemText}>\n                                        <Text slot=\"label\" className={listStyles.itemLabel}>\n                                            {item.label}\n                                        </Text>\n                                        {item.description !== undefined ? (\n                                            <Text\n                                                slot=\"description\"\n                                                className={listStyles.itemDescription}\n                                            >\n                                                {item.description}\n                                            </Text>\n                                        ) : null}\n                                    </span>\n                                </>\n                            )}\n                        </ListBoxItem>\n                    )}\n                </ListBox>\n            </PopoverSurface>\n        </AriaComboBox>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0EA,SAAgBC,WAAS,EACrB,OACA,OACA,UACA,OACA,aACA,SAAS,CAAA,GACT,aACA,YAAY,OACZ,cACA,YACA,cAAc,SACd,WACA,gBACA,sBACA,iBACA,kBACA,gBACA,kBACA,GAAG,SACW;CACd,MAAM,OAAO,eAAe;CAC5B,MAAM,UAAU,OAAO,SAAS;CAChC,OACI,qBAACC,UAAD;EACI,GAAI;EACG;EACP,aAAa;EACb,mBACI,aAAa,KAAA,KACN,QAAQ,SAAS,QAAQ,OAAO,OAAO,OAAO,GAAG,CAAC,IACnD,KAAA;EAEV,cAAc,MAAM,QAAQ,SAAS,KAAK,aAAa,IAAI,CAAC,CAAC,KAAKF,WAASA,OAAK,EAAE;EACrE;EACb,uBAAA;EACY;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAG,qBAAqBG,qBAAY,OAAO,SAAS;EAfnE,UAAA;GAiBI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAY,SAASC,wBAAO,SAAS,gBAAgB;IACnE,gBAAc,WAAW,KAAA;IAF7B,UAAA;KAII,oBAAC,OAAD;MAAoB;MAAa,WAAW,GAAGD,qBAAY,MAAM,cAAc;KAAE,CAAA;KAChF,YACG,oBAAC,QAAD;MAAM,WAAWC,wBAAO;MACpB,UAAA,oBAAC,SAAD,EAAS,MAAK,KAAI,CAAA;KAChB,CAAA,IACN;KACJ,oBAAC,QAAD;MACI,WAAWA,wBAAO;MAClB,cAAY,KAAK,cAAc,SAAS,WAAW;MAEnD,UAAA,oBAAC,MAAD,EAAM,MAAM,YAAY,CAAA;KACpB,CAAA;IACL;;GACP,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;GACxD,oBAAC,gBAAD;IAAgB,WAAW;IACvB,UAAA,oBAAC,SAAD;KACI,WAAWC,uBAAW;KACtB,wBACI,oBAAC,OAAD;MAAK,WAAWA,uBAAW;MACtB,UAAA,YACK,KAAK,cAAc,SAAS,OAAO,IAClC,gBAAgB,KAAK,cAAc,SAAS,SAAS;KAC3D,CAAA;KAGPL,WAAAA,WACE,oBAAC,aAAD;MACI,IAAIA,OAAK;MACT,WAAWA,OAAK;MAChB,WAAWK,uBAAW;MAEpB,WAAA,EAAE,iBACA,qBAAAC,UAAA,EAAA,UAAA,CACI,oBAAC,QAAD;OAAM,WAAWD,uBAAW;OACvB,UAAA,aAAa,oBAAC,MAAD;QAAM,MAAM;QAAO,MAAK;OAAI,CAAA,IAAM;MAC9C,CAAA,GACN,qBAAC,QAAD;OAAM,WAAWA,uBAAW;OAA5B,UAAA,CACI,oBAAC,MAAD;QAAM,MAAK;QAAQ,WAAWA,uBAAW;QACpCL,UAAAA,OAAK;OACJ,CAAA,GACLA,OAAK,gBAAgB,KAAA,IAClB,oBAAC,MAAD;QACI,MAAK;QACL,WAAWK,uBAAW;QAErBL,UAAAA,OAAK;OACJ,CAAA,IACN,IACF;MACV,CAAA,CAAA,EAAA,CAAA;KAEK,CAAA;IAEZ,CAAA;GACG,CAAA;EACN;;AAEtB"}

package/dist/combo-box/ComboBox.module.js

@@ -1,8 +1,8 @@
 import "./ComboBox.css";
 //#region src/combo-box/ComboBox.module.css
-var control = "panneau-control-zMvu7z";
-var button = "panneau-button-RsfUPx";
-var status = "panneau-status-8R1JBC";
+var control = "panneau-combo-box-control";
+var button = "panneau-combo-box-button";
+var status = "panneau-combo-box-status";
 var ComboBox_module_default = {
 	control,
 	button,

package/dist/container/Container.css

@@ -0,0 +1,32 @@
+/*
+ * A centered column with a maximum width. It is a size container: the responsive props of the
+ * primitives inside it follow its width.
+ */
+
+.panneau-container {
+    box-sizing: border-box;
+    width: 100%;
+    margin-inline: auto;
+    padding-inline: var(--panneau-container-padding-x, var(--panneau-space-4));
+    container-type: inline-size;
+}
+
+.panneau-container-sm {
+    max-width: var(--panneau-container-width-sm, 40rem);
+}
+
+.panneau-container-md {
+    max-width: var(--panneau-container-width-md, 48rem);
+}
+
+.panneau-container-lg {
+    max-width: var(--panneau-container-width-lg, 64rem);
+}
+
+.panneau-container-xl {
+    max-width: var(--panneau-container-width-xl, 80rem);
+}
+
+.panneau-container-flush {
+    padding-inline: 0;
+}

package/dist/container/Container.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+export interface ContainerProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to `div`. */
+    as?: 'div' | 'section' | 'main' | 'article' | 'header' | 'footer';
+    /** Maximum width, from the `--panneau-container-width-*` tokens, or `full`. Defaults to `lg`. */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Removes the horizontal padding. */
+    flush?: boolean;
+}
+/**
+ * A centered column with a maximum width. It is a size container: responsive props inside it follow
+ * its width. Like any size container, it needs a width from its parent: in a row, give it one.
+ */
+export declare function Container({ as: Element, size, flush, className, ...props }: ContainerProps): import("react").JSX.Element;
+//# sourceMappingURL=Container.d.ts.map

package/dist/container/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../src/container/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D,4CAA4C;IAC5C,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAClE,iGAAiG;IACjG,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC1C,sCAAsC;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACtB,EAAE,EAAE,OAAe,EACnB,IAAW,EACX,KAAa,EACb,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,+BAahB"}

package/dist/container/Container.js

@@ -0,0 +1,18 @@
+import { cx } from "../utils/cx.js";
+import Container_module_default from "./Container.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/container/Container.tsx
+/**
+* A centered column with a maximum width. It is a size container: responsive props inside it follow
+* its width. Like any size container, it needs a width from its parent: in a row, give it one.
+*/
+function Container({ as: Element = "div", size = "lg", flush = false, className, ...props }) {
+	return /* @__PURE__ */ jsx(Element, {
+		...props,
+		className: cx("panneau-container", Container_module_default.container, size !== "full" && Container_module_default[size], flush && Container_module_default.flush, className)
+	});
+}
+//#endregion
+export { Container };
+
+//# sourceMappingURL=Container.js.map