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

package/dist/dialog/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/dialog/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Dialog. */\nexport const dialogTokens = defineComponentTokens('dialog', {\n    /** Color of the backdrop. */\n    backdrop: 'var(--panneau-color-backdrop)',\n    /** Maximum width of the default size. */\n    width: '32rem',\n    /** Maximum width of the small size. */\n    'width-sm': '24rem',\n    /** Maximum width of the large size. */\n    'width-lg': '48rem',\n    /** Background. */\n    bg: 'var(--panneau-color-surface-raised)',\n    /** Corner radius. */\n    radius: 'var(--panneau-radius-lg)',\n    /** Shadow. */\n    shadow: 'var(--panneau-shadow-lg)',\n    /** Horizontal padding. */\n    'padding-x': 'var(--panneau-space-5)',\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});\n"],"mappings":";;;AAGA,IAAa,eAAe,sBAAsB,UAAU;;CAExD,UAAU;;CAEV,OAAO;;CAEP,YAAY;;CAEZ,YAAY;;CAEZ,IAAI;;CAEJ,QAAQ;;CAER,QAAQ;;CAER,aAAa;;CAEb,mBAAmB;;CAEnB,qBAAqB;AACzB,CAAC"}

package/dist/disclosure/Disclosure.css

@@ -1,18 +1,18 @@
-.panneau-disclosure-WME8SS {
+.panneau-disclosure {
     display: flex;
     flex-direction: column;
     min-width: 0;
 }
 
-.panneau-trigger-0Jo--Y {
+.panneau-disclosure-trigger {
     display: flex;
     align-items: center;
     gap: var(--panneau-space-2);
     width: 100%;
     min-height: var(--panneau-control-height);
     padding: 0;
-    font-size: var(--panneau-font-size-lg);
-    font-weight: var(--panneau-font-weight-bold);
+    font-size: var(--panneau-disclosure-title-font-size, var(--panneau-font-size-lg));
+    font-weight: var(--panneau-disclosure-title-font-weight, var(--panneau-font-weight-bold));
     text-align: start;
     color: var(--panneau-color-text);
     cursor: pointer;
@@ -21,34 +21,34 @@
     border-radius: var(--panneau-radius-sm);
 }
 
-.panneau-trigger-0Jo--Y[data-focus-visible] {
+.panneau-disclosure-trigger[data-focus-visible] {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: 2px;
 }
 
-.panneau-chevron-1tYsh0 {
+.panneau-disclosure-chevron {
     color: var(--panneau-color-text-muted);
     transition: transform var(--panneau-duration);
 }
 
-.panneau-disclosure-WME8SS[data-expanded] .panneau-chevron-1tYsh0 {
+.panneau-disclosure[data-expanded] .panneau-disclosure-chevron {
     transform: rotate(90deg);
 }
 
-.panneau-title-DSKeDu {
+.panneau-disclosure-title {
     flex: 1 1 auto;
     min-width: 0;
 }
 
-.panneau-panel-heR-bQ {
+.panneau-disclosure-panel {
     min-width: 0;
 }
 
-.panneau-panelContent-FQV3Na {
-    padding-top: var(--panneau-space-3);
+.panneau-disclosure-panel-content {
+    padding-top: var(--panneau-disclosure-gap, var(--panneau-space-3));
 }
 
-.panneau-heading-pnG2s2 {
+.panneau-disclosure-heading {
     margin: 0;
     font: inherit;
 }

package/dist/disclosure/Disclosure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Disclosure.d.ts","sourceRoot":"","sources":["../../src/disclosure/Disclosure.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC,MAAM,WAAW,eAAe;IAC5B,kEAAkE;IAClE,KAAK,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iDAAiD;IACjD,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,gEAAgE;AAChE,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,YAAgB,EAChB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,GAAG,KAAK,EACX,EAAE,eAAe,+BAejB"}
+{"version":3,"file":"Disclosure.d.ts","sourceRoot":"","sources":["../../src/disclosure/Disclosure.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC,MAAM,WAAW,eAAe;IAC5B,kEAAkE;IAClE,KAAK,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iDAAiD;IACjD,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,gEAAgE;AAChE,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,YAAgB,EAChB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,GAAG,KAAK,EACX,EAAE,eAAe,+BAkBjB"}

package/dist/disclosure/Disclosure.js

@@ -9,7 +9,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function Disclosure$1({ title, titleEnd, headingLevel = 3, children, className, triggerClassName, panelClassName, ...props }) {
 	return /* @__PURE__ */ jsxs(Disclosure, {
 		...props,
-		className: cx(Disclosure_module_default.disclosure, className),
+		className: cx("panneau-disclosure", Disclosure_module_default.disclosure, className),
 		children: [/* @__PURE__ */ jsx(Heading, {
 			level: headingLevel,
 			className: Disclosure_module_default.heading,

package/dist/disclosure/Disclosure.js.map

@@ -1 +1 @@
-{"version":3,"file":"Disclosure.js","names":["Disclosure","AriaDisclosure","styles","_Fragment"],"sources":["../../src/disclosure/Disclosure.tsx"],"sourcesContent":["import { ChevronRight } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport {\n    Disclosure as AriaDisclosure,\n    Button,\n    DisclosurePanel,\n    Heading,\n} from 'react-aria-components';\n\nimport { Icon } from '../icon/Icon';\nimport { cx } from '../utils/cx';\nimport styles from './Disclosure.module.css';\n\nexport interface DisclosureProps {\n    /** Title of the button that expands and collapses the content. */\n    title: ReactNode;\n    /** Content after the title, in the button: a count of errors. */\n    titleEnd?: ReactNode;\n    /** Heading level of the title. Defaults to 3. */\n    headingLevel?: 2 | 3 | 4 | 5 | 6;\n    children?: ReactNode;\n    isExpanded?: boolean;\n    defaultExpanded?: boolean;\n    onExpandedChange?: (isExpanded: boolean) => void;\n    id?: string;\n    className?: string;\n    triggerClassName?: string;\n    panelClassName?: string;\n}\n\n/** A section whose content can be collapsed under its title. */\nexport function Disclosure({\n    title,\n    titleEnd,\n    headingLevel = 3,\n    children,\n    className,\n    triggerClassName,\n    panelClassName,\n    ...props\n}: DisclosureProps) {\n    return (\n        <AriaDisclosure {...props} className={cx(styles.disclosure, className)}>\n            <Heading level={headingLevel} className={styles.heading}>\n                <Button slot=\"trigger\" className={cx(styles.trigger, triggerClassName)}>\n                    <Icon icon={ChevronRight} className={styles.chevron} />\n                    <span className={styles.title}>{title}</span>\n                    {titleEnd !== undefined ? <> {titleEnd}</> : null}\n                </Button>\n            </Heading>\n            <DisclosurePanel className={cx(styles.panel, panelClassName)}>\n                <div className={styles.panelContent}>{children}</div>\n            </DisclosurePanel>\n        </AriaDisclosure>\n    );\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgBA,aAAW,EACvB,OACA,UACA,eAAe,GACf,UACA,WACA,kBACA,gBACA,GAAG,SACa;CAChB,OACI,qBAACC,YAAD;EAAgB,GAAI;EAAO,WAAW,GAAGC,0BAAO,YAAY,SAAS;EAArE,UAAA,CACI,oBAAC,SAAD;GAAS,OAAO;GAAc,WAAWA,0BAAO;GAC5C,UAAA,qBAAC,QAAD;IAAQ,MAAK;IAAU,WAAW,GAAGA,0BAAO,SAAS,gBAAgB;IAArE,UAAA;KACI,oBAAC,MAAD;MAAM,MAAM;MAAc,WAAWA,0BAAO;KAAQ,CAAA;KACpD,oBAAC,QAAD;MAAM,WAAWA,0BAAO;MAAQ,UAAA;KAAY,CAAA;KAC3C,aAAa,KAAA,IAAY,qBAAAC,UAAA,EAAA,UAAA,CAAE,KAAE,QAAS,EAAA,CAAA,IAAM;IACzC;;EACH,CAAA,GACT,oBAAC,iBAAD;GAAiB,WAAW,GAAGD,0BAAO,OAAO,cAAc;GACvD,UAAA,oBAAC,OAAD;IAAK,WAAWA,0BAAO;IAAe;GAAc,CAAA;EACvC,CAAA,CACL;;AAExB"}
+{"version":3,"file":"Disclosure.js","names":["Disclosure","AriaDisclosure","styles","_Fragment"],"sources":["../../src/disclosure/Disclosure.tsx"],"sourcesContent":["import { ChevronRight } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport {\n    Disclosure as AriaDisclosure,\n    Button,\n    DisclosurePanel,\n    Heading,\n} from 'react-aria-components';\n\nimport { Icon } from '../icon/Icon';\nimport { cx } from '../utils/cx';\nimport styles from './Disclosure.module.css';\n\nexport interface DisclosureProps {\n    /** Title of the button that expands and collapses the content. */\n    title: ReactNode;\n    /** Content after the title, in the button: a count of errors. */\n    titleEnd?: ReactNode;\n    /** Heading level of the title. Defaults to 3. */\n    headingLevel?: 2 | 3 | 4 | 5 | 6;\n    children?: ReactNode;\n    isExpanded?: boolean;\n    defaultExpanded?: boolean;\n    onExpandedChange?: (isExpanded: boolean) => void;\n    id?: string;\n    className?: string;\n    triggerClassName?: string;\n    panelClassName?: string;\n}\n\n/** A section whose content can be collapsed under its title. */\nexport function Disclosure({\n    title,\n    titleEnd,\n    headingLevel = 3,\n    children,\n    className,\n    triggerClassName,\n    panelClassName,\n    ...props\n}: DisclosureProps) {\n    return (\n        <AriaDisclosure\n            {...props}\n            className={cx('panneau-disclosure', styles.disclosure, className)}\n        >\n            <Heading level={headingLevel} className={styles.heading}>\n                <Button slot=\"trigger\" className={cx(styles.trigger, triggerClassName)}>\n                    <Icon icon={ChevronRight} className={styles.chevron} />\n                    <span className={styles.title}>{title}</span>\n                    {titleEnd !== undefined ? <> {titleEnd}</> : null}\n                </Button>\n            </Heading>\n            <DisclosurePanel className={cx(styles.panel, panelClassName)}>\n                <div className={styles.panelContent}>{children}</div>\n            </DisclosurePanel>\n        </AriaDisclosure>\n    );\n}\n"],"mappings":";;;;;;;;AA+BA,SAAgBA,aAAW,EACvB,OACA,UACA,eAAe,GACf,UACA,WACA,kBACA,gBACA,GAAG,SACa;CAChB,OACI,qBAACC,YAAD;EACI,GAAI;EACJ,WAAW,GAAG,sBAAsBC,0BAAO,YAAY,SAAS;EAFpE,UAAA,CAII,oBAAC,SAAD;GAAS,OAAO;GAAc,WAAWA,0BAAO;GAC5C,UAAA,qBAAC,QAAD;IAAQ,MAAK;IAAU,WAAW,GAAGA,0BAAO,SAAS,gBAAgB;IAArE,UAAA;KACI,oBAAC,MAAD;MAAM,MAAM;MAAc,WAAWA,0BAAO;KAAQ,CAAA;KACpD,oBAAC,QAAD;MAAM,WAAWA,0BAAO;MAAQ,UAAA;KAAY,CAAA;KAC3C,aAAa,KAAA,IAAY,qBAAAC,UAAA,EAAA,UAAA,CAAE,KAAE,QAAS,EAAA,CAAA,IAAM;IACzC;;EACH,CAAA,GACT,oBAAC,iBAAD;GAAiB,WAAW,GAAGD,0BAAO,OAAO,cAAc;GACvD,UAAA,oBAAC,OAAD;IAAK,WAAWA,0BAAO;IAAe;GAAc,CAAA;EACvC,CAAA,CACL;;AAExB"}

package/dist/disclosure/Disclosure.module.js

@@ -1,12 +1,12 @@
 import "./Disclosure.css";
 //#region src/disclosure/Disclosure.module.css
-var disclosure = "panneau-disclosure-WME8SS";
-var trigger = "panneau-trigger-0Jo--Y";
-var chevron = "panneau-chevron-1tYsh0";
-var title = "panneau-title-DSKeDu";
-var panel = "panneau-panel-heR-bQ";
-var panelContent = "panneau-panelContent-FQV3Na";
-var heading = "panneau-heading-pnG2s2";
+var disclosure = "panneau-disclosure";
+var trigger = "panneau-disclosure-trigger";
+var chevron = "panneau-disclosure-chevron";
+var title = "panneau-disclosure-title";
+var panel = "panneau-disclosure-panel";
+var panelContent = "panneau-disclosure-panel-content";
+var heading = "panneau-disclosure-heading";
 var Disclosure_module_default = {
 	disclosure,
 	trigger,

package/dist/disclosure/Disclosure.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Disclosure.module.js","names":[],"sources":["../../src/disclosure/Disclosure.module.css"],"sourcesContent":[".disclosure {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.trigger {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    width: 100%;\n    min-height: var(--panneau-control-height);\n    padding: 0;\n    font-size: var(--panneau-font-size-lg);\n    font-weight: var(--panneau-font-weight-bold);\n    text-align: start;\n    color: var(--panneau-color-text);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--panneau-radius-sm);\n}\n\n.trigger[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.chevron {\n    color: var(--panneau-color-text-muted);\n    transition: transform var(--panneau-duration);\n}\n\n.disclosure[data-expanded] .chevron {\n    transform: rotate(90deg);\n}\n\n.title {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.panel {\n    min-width: 0;\n}\n\n.panelContent {\n    padding-top: var(--panneau-space-3);\n}\n\n.heading {\n    margin: 0;\n    font: inherit;\n}\n"],"mappings":""}
+{"version":3,"file":"Disclosure.module.js","names":[],"sources":["../../src/disclosure/Disclosure.module.css"],"sourcesContent":[".disclosure {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.trigger {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    width: 100%;\n    min-height: var(--panneau-control-height);\n    padding: 0;\n    font-size: var(--panneau-disclosure-title-font-size, var(--panneau-font-size-lg));\n    font-weight: var(--panneau-disclosure-title-font-weight, var(--panneau-font-weight-bold));\n    text-align: start;\n    color: var(--panneau-color-text);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: var(--panneau-radius-sm);\n}\n\n.trigger[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.chevron {\n    color: var(--panneau-color-text-muted);\n    transition: transform var(--panneau-duration);\n}\n\n.disclosure[data-expanded] .chevron {\n    transform: rotate(90deg);\n}\n\n.title {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.panel {\n    min-width: 0;\n}\n\n.panelContent {\n    padding-top: var(--panneau-disclosure-gap, var(--panneau-space-3));\n}\n\n.heading {\n    margin: 0;\n    font: inherit;\n}\n"],"mappings":""}

package/dist/disclosure/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Disclosure. */
+export declare const disclosureTokens: import("..").ComponentTokens<"disclosure", "panneau-disclosure-gap" | "panneau-disclosure-title-font-weight" | "panneau-disclosure-title-font-size">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/disclosure/tokens.ts"],"names":[],"mappings":"AAEA,4BAA4B;AAC5B,eAAO,MAAM,gBAAgB,sJAO3B,CAAC"}

package/dist/disclosure/tokens.js

@@ -0,0 +1,15 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/disclosure/tokens.ts
+/** Tokens of Disclosure. */
+var disclosureTokens = defineComponentTokens("disclosure", {
+	/** 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)",
+	/** Space between the title and the content. */
+	gap: "var(--panneau-space-3)"
+});
+//#endregion
+export { disclosureTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/disclosure/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/disclosure/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Disclosure. */\nexport const disclosureTokens = defineComponentTokens('disclosure', {\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    /** Space between the title and the content. */\n    gap: 'var(--panneau-space-3)',\n});\n"],"mappings":";;;AAGA,IAAa,mBAAmB,sBAAsB,cAAc;;CAEhE,mBAAmB;;CAEnB,qBAAqB;;CAErB,KAAK;AACT,CAAC"}

package/dist/divider/Divider.css

@@ -0,0 +1,17 @@
+/* A line between groups: the space around it comes from the stack or row it is in. */
+
+.panneau-divider {
+    flex-shrink: 0;
+    margin: 0;
+    border: 0;
+    border-top: var(--panneau-divider-width, var(--panneau-border-width)) solid
+        var(--panneau-divider-color, var(--panneau-color-border));
+    opacity: 1;
+}
+
+.panneau-divider-vertical {
+    align-self: stretch;
+    border-top: 0;
+    border-left: var(--panneau-divider-width, var(--panneau-border-width)) solid
+        var(--panneau-divider-color, var(--panneau-color-border));
+}

package/dist/divider/Divider.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'react';
+export interface DividerProps extends HTMLAttributes<HTMLElement> {
+    /** `vertical` separates items of a row. Defaults to `horizontal`. */
+    orientation?: 'horizontal' | 'vertical';
+}
+/** A line between groups of content: an `hr`, or a vertical separator in a row. */
+export declare function Divider({ orientation, className, ...props }: DividerProps): import("react").JSX.Element;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/divider/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../src/divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC7D,qEAAqE;IACrE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CAC3C;AAED,mFAAmF;AACnF,wBAAgB,OAAO,CAAC,EAAE,WAA0B,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAYxF"}

package/dist/divider/Divider.js

@@ -0,0 +1,21 @@
+import { cx } from "../utils/cx.js";
+import Divider_module_default from "./Divider.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/divider/Divider.tsx
+/** A line between groups of content: an `hr`, or a vertical separator in a row. */
+function Divider({ orientation = "horizontal", className, ...props }) {
+	if (orientation === "vertical") return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "vertical",
+		...props,
+		className: cx("panneau-divider", Divider_module_default.divider, Divider_module_default.vertical, className)
+	});
+	return /* @__PURE__ */ jsx("hr", {
+		...props,
+		className: cx("panneau-divider", Divider_module_default.divider, className)
+	});
+}
+//#endregion
+export { Divider };
+
+//# sourceMappingURL=Divider.js.map

package/dist/divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","names":["styles"],"sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport { cx } from '../utils/cx';\nimport styles from './Divider.module.css';\n\nexport interface DividerProps extends HTMLAttributes<HTMLElement> {\n    /** `vertical` separates items of a row. Defaults to `horizontal`. */\n    orientation?: 'horizontal' | 'vertical';\n}\n\n/** A line between groups of content: an `hr`, or a vertical separator in a row. */\nexport function Divider({ orientation = 'horizontal', className, ...props }: DividerProps) {\n    if (orientation === 'vertical') {\n        return (\n            <div\n                role=\"separator\"\n                aria-orientation=\"vertical\"\n                {...props}\n                className={cx('panneau-divider', styles.divider, styles.vertical, className)}\n            />\n        );\n    }\n    return <hr {...props} className={cx('panneau-divider', styles.divider, className)} />;\n}\n"],"mappings":";;;;;AAWA,SAAgB,QAAQ,EAAE,cAAc,cAAc,WAAW,GAAG,SAAuB;CACvF,IAAI,gBAAgB,YAChB,OACI,oBAAC,OAAD;EACI,MAAK;EACL,oBAAiB;EACjB,GAAI;EACJ,WAAW,GAAG,mBAAmBA,uBAAO,SAASA,uBAAO,UAAU,SAAS;CAAE,CAAA;CAIzF,OAAO,oBAAC,MAAD;EAAI,GAAI;EAAO,WAAW,GAAG,mBAAmBA,uBAAO,SAAS,SAAS;CAAE,CAAA;AACtF"}

package/dist/divider/Divider.module.js

@@ -0,0 +1,12 @@
+import "./Divider.css";
+//#region src/divider/Divider.module.css
+var divider = "panneau-divider";
+var vertical = "panneau-divider-vertical";
+var Divider_module_default = {
+	divider,
+	vertical
+};
+//#endregion
+export { Divider_module_default as default, divider, vertical };
+
+//# sourceMappingURL=Divider.module.js.map

package/dist/divider/Divider.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.module.js","names":[],"sources":["../../src/divider/Divider.module.css"],"sourcesContent":["/* A line between groups: the space around it comes from the stack or row it is in. */\n\n.divider {\n    flex-shrink: 0;\n    margin: 0;\n    border: 0;\n    border-top: var(--panneau-divider-width, var(--panneau-border-width)) solid\n        var(--panneau-divider-color, var(--panneau-color-border));\n    opacity: 1;\n}\n\n.vertical {\n    align-self: stretch;\n    border-top: 0;\n    border-left: var(--panneau-divider-width, var(--panneau-border-width)) solid\n        var(--panneau-divider-color, var(--panneau-color-border));\n}\n"],"mappings":""}

package/dist/divider/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Divider. */
+export declare const dividerTokens: import("..").ComponentTokens<"divider", "panneau-divider-color" | "panneau-divider-width">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/divider/tokens.ts"],"names":[],"mappings":"AAEA,yBAAyB;AACzB,eAAO,MAAM,aAAa,4FAKxB,CAAC"}

package/dist/divider/tokens.js

@@ -0,0 +1,13 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/divider/tokens.ts
+/** Tokens of Divider. */
+var dividerTokens = defineComponentTokens("divider", {
+	/** Color of the line. */
+	color: "var(--panneau-color-border)",
+	/** Thickness of the line. */
+	width: "var(--panneau-border-width)"
+});
+//#endregion
+export { dividerTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/divider/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/divider/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Divider. */\nexport const dividerTokens = defineComponentTokens('divider', {\n    /** Color of the line. */\n    color: 'var(--panneau-color-border)',\n    /** Thickness of the line. */\n    width: 'var(--panneau-border-width)',\n});\n"],"mappings":";;;AAGA,IAAa,gBAAgB,sBAAsB,WAAW;;CAE1D,OAAO;;CAEP,OAAO;AACX,CAAC"}

package/dist/field/Field.css

@@ -1,31 +1,31 @@
 /* Shared look of labelled controls: label, description, errors and the control itself. */
 
-.panneau-field-llXva6 {
+.panneau-field {
     display: flex;
     flex-direction: column;
-    gap: var(--panneau-space-1);
+    gap: var(--panneau-field-gap, var(--panneau-space-1));
     min-width: 0;
 }
 
-.panneau-label-Q70cID {
-    font-size: var(--panneau-font-size-md);
-    font-weight: var(--panneau-font-weight-medium);
+.panneau-field-label {
+    font-size: var(--panneau-field-label-font-size, var(--panneau-font-size-md));
+    font-weight: var(--panneau-field-label-font-weight, var(--panneau-font-weight-medium));
     line-height: var(--panneau-line-height-tight);
     color: var(--panneau-color-text);
     overflow-wrap: anywhere;
 }
 
-.panneau-required-qGQQMa {
+.panneau-field-required {
     margin-inline-start: 0.2em;
     color: var(--panneau-color-danger);
 }
 
-.panneau-description-6IPisp {
+.panneau-field-description {
     font-size: var(--panneau-font-size-sm);
     color: var(--panneau-color-text-muted);
 }
 
-.panneau-errors-YFI9As {
+.panneau-field-errors {
     display: flex;
     flex-direction: column;
     gap: var(--panneau-space-1);
@@ -33,70 +33,71 @@
     color: var(--panneau-color-danger);
 }
 
-.panneau-error-UWz-28 {
+.panneau-field-error {
     display: block;
 }
 
-.panneau-control-eHvm-h {
+.panneau-field-control {
     display: flex;
     align-items: center;
     width: 100%;
     min-width: 0;
     min-height: var(--panneau-control-height);
-    padding: 0 var(--panneau-space-3);
+    padding: 0 var(--panneau-input-padding-x, var(--panneau-control-padding-x));
     font-size: var(--panneau-font-size-control);
     line-height: var(--panneau-line-height-tight);
     color: var(--panneau-color-text);
-    background-color: var(--panneau-color-surface);
-    border: var(--panneau-border-width) solid var(--panneau-color-border-control);
-    border-radius: var(--panneau-radius-md);
+    background-color: var(--panneau-input-bg, var(--panneau-color-surface));
+    border: var(--panneau-input-border-width, var(--panneau-border-width)) solid
+        var(--panneau-input-border-color, var(--panneau-color-border-control));
+    border-radius: var(--panneau-input-radius, var(--panneau-radius-md));
     transition:
         border-color var(--panneau-duration),
         box-shadow var(--panneau-duration);
 }
 
-.panneau-control-eHvm-h::placeholder {
+.panneau-field-control::placeholder {
     color: var(--panneau-color-text-muted);
     opacity: 1;
 }
 
-.panneau-control-eHvm-h[data-hovered],
-.panneau-control-eHvm-h:hover {
-    border-color: var(--panneau-color-text-muted);
+.panneau-field-control[data-hovered],
+.panneau-field-control:hover {
+    border-color: var(--panneau-input-border-color-hover, var(--panneau-color-text-muted));
 }
 
-.panneau-control-eHvm-h[data-focused],
-.panneau-control-eHvm-h[data-focus-within],
-.panneau-control-eHvm-h[data-focus-visible],
-.panneau-control-eHvm-h:focus-within {
+.panneau-field-control[data-focused],
+.panneau-field-control[data-focus-within],
+.panneau-field-control[data-focus-visible],
+.panneau-field-control:focus-within {
     border-color: var(--panneau-color-focus);
     outline: none;
     box-shadow: 0 0 0 1px var(--panneau-color-focus);
 }
 
-.panneau-control-eHvm-h[data-invalid] {
+.panneau-field-control[data-invalid] {
     border-color: var(--panneau-color-danger);
 }
 
-.panneau-control-eHvm-h[data-invalid][data-focused],
-.panneau-control-eHvm-h[data-invalid][data-focus-within],
-.panneau-control-eHvm-h[data-invalid]:focus-within {
+.panneau-field-control[data-invalid][data-focused],
+.panneau-field-control[data-invalid][data-focus-within],
+.panneau-field-control[data-invalid]:focus-within {
     box-shadow: 0 0 0 1px var(--panneau-color-danger);
 }
 
-.panneau-control-eHvm-h[data-disabled] {
+.panneau-field-control[data-disabled] {
     cursor: not-allowed;
     opacity: 0.6;
     background-color: var(--panneau-color-surface-sunken);
 }
 
-.panneau-control-eHvm-h[data-readonly],
-.panneau-control-eHvm-h[readonly] {
+.panneau-field-control[data-readonly],
+.panneau-field-control[readonly] {
     background-color: var(--panneau-color-surface-sunken);
 }
 
 /* An input inside a control (with adornments, segments or buttons): the control draws the box. */
-.panneau-bare-V21ZoZ {
+.panneau-field-bare {
     flex: 1 1 auto;
     min-width: 0;
     height: 100%;
@@ -109,12 +110,12 @@
     outline: none;
 }
 
-.panneau-bare-V21ZoZ::placeholder {
+.panneau-field-bare::placeholder {
     color: var(--panneau-color-text-muted);
     opacity: 1;
 }
 
-.panneau-adornment-A3klaS {
+.panneau-field-adornment {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -123,23 +124,25 @@
     white-space: nowrap;
 }
 
-.panneau-adornment-A3klaS:first-child {
+.panneau-field-adornment:first-child {
     margin-inline-end: var(--panneau-space-2);
 }
 
-.panneau-adornment-A3klaS:last-child {
+.panneau-field-adornment:last-child {
     margin-inline-start: var(--panneau-space-2);
 }
 
-.panneau-fieldset-g-kI7H {
+.panneau-field-fieldset {
     display: flex;
     flex-direction: column;
     gap: var(--panneau-space-2);
     min-width: 0;
 }
 
-.panneau-legend-vlWMl- {
+.panneau-field-legend {
     display: block;
+    float: none;
     width: 100%;
-    margin-bottom: var(--panneau-space-1);
+    margin: 0 0 var(--panneau-space-1);
+    padding: 0;
 }

package/dist/field/Field.module.js

@@ -1,16 +1,16 @@
 import "./Field.css";
 //#region src/field/Field.module.css
-var field = "panneau-field-llXva6";
-var label = "panneau-label-Q70cID";
-var required = "panneau-required-qGQQMa";
-var description = "panneau-description-6IPisp";
-var errors = "panneau-errors-YFI9As";
-var error = "panneau-error-UWz-28";
-var control = "panneau-control-eHvm-h";
-var bare = "panneau-bare-V21ZoZ";
-var adornment = "panneau-adornment-A3klaS";
-var fieldset = "panneau-fieldset-g-kI7H";
-var legend = "panneau-legend-vlWMl-";
+var field = "panneau-field";
+var label = "panneau-field-label";
+var required = "panneau-field-required";
+var description = "panneau-field-description";
+var errors = "panneau-field-errors";
+var error = "panneau-field-error";
+var control = "panneau-field-control";
+var bare = "panneau-field-bare";
+var adornment = "panneau-field-adornment";
+var fieldset = "panneau-field-fieldset";
+var legend = "panneau-field-legend";
 var Field_module_default = {
 	field,
 	label,

package/dist/field/Field.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.module.js","names":[],"sources":["../../src/field/Field.module.css"],"sourcesContent":["/* Shared look of labelled controls: label, description, errors and the control itself. */\n\n.field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    min-width: 0;\n}\n\n.label {\n    font-size: var(--panneau-font-size-md);\n    font-weight: var(--panneau-font-weight-medium);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    overflow-wrap: anywhere;\n}\n\n.required {\n    margin-inline-start: 0.2em;\n    color: var(--panneau-color-danger);\n}\n\n.description {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.errors {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-danger);\n}\n\n.error {\n    display: block;\n}\n\n.control {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    min-height: var(--panneau-control-height);\n    padding: 0 var(--panneau-space-3);\n    font-size: var(--panneau-font-size-control);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-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-md);\n    transition:\n        border-color var(--panneau-duration),\n        box-shadow var(--panneau-duration);\n}\n\n.control::placeholder {\n    color: var(--panneau-color-text-muted);\n    opacity: 1;\n}\n\n.control[data-hovered],\n.control:hover {\n    border-color: var(--panneau-color-text-muted);\n}\n\n.control[data-focused],\n.control[data-focus-within],\n.control[data-focus-visible],\n.control:focus-within {\n    border-color: var(--panneau-color-focus);\n    outline: none;\n    box-shadow: 0 0 0 1px var(--panneau-color-focus);\n}\n\n.control[data-invalid] {\n    border-color: var(--panneau-color-danger);\n}\n\n.control[data-invalid][data-focused],\n.control[data-invalid][data-focus-within],\n.control[data-invalid]:focus-within {\n    box-shadow: 0 0 0 1px var(--panneau-color-danger);\n}\n\n.control[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n.control[data-readonly],\n.control[readonly] {\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n/* An input inside a control (with adornments, segments or buttons): the control draws the box. */\n.bare {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    min-height: calc(var(--panneau-control-height) - 2 * var(--panneau-border-width));\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    background: transparent;\n    border: 0;\n    outline: none;\n}\n\n.bare::placeholder {\n    color: var(--panneau-color-text-muted);\n    opacity: 1;\n}\n\n.adornment {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    color: var(--panneau-color-text-muted);\n    white-space: nowrap;\n}\n\n.adornment:first-child {\n    margin-inline-end: var(--panneau-space-2);\n}\n\n.adornment:last-child {\n    margin-inline-start: var(--panneau-space-2);\n}\n\n.fieldset {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n}\n\n.legend {\n    display: block;\n    width: 100%;\n    margin-bottom: var(--panneau-space-1);\n}\n"],"mappings":""}
+{"version":3,"file":"Field.module.js","names":[],"sources":["../../src/field/Field.module.css"],"sourcesContent":["/* Shared look of labelled controls: label, description, errors and the control itself. */\n\n.field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-field-gap, var(--panneau-space-1));\n    min-width: 0;\n}\n\n.label {\n    font-size: var(--panneau-field-label-font-size, var(--panneau-font-size-md));\n    font-weight: var(--panneau-field-label-font-weight, var(--panneau-font-weight-medium));\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    overflow-wrap: anywhere;\n}\n\n.required {\n    margin-inline-start: 0.2em;\n    color: var(--panneau-color-danger);\n}\n\n.description {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.errors {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-danger);\n}\n\n.error {\n    display: block;\n}\n\n.control {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    min-height: var(--panneau-control-height);\n    padding: 0 var(--panneau-input-padding-x, var(--panneau-control-padding-x));\n    font-size: var(--panneau-font-size-control);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-input-bg, var(--panneau-color-surface));\n    border: var(--panneau-input-border-width, var(--panneau-border-width)) solid\n        var(--panneau-input-border-color, var(--panneau-color-border-control));\n    border-radius: var(--panneau-input-radius, var(--panneau-radius-md));\n    transition:\n        border-color var(--panneau-duration),\n        box-shadow var(--panneau-duration);\n}\n\n.control::placeholder {\n    color: var(--panneau-color-text-muted);\n    opacity: 1;\n}\n\n.control[data-hovered],\n.control:hover {\n    border-color: var(--panneau-input-border-color-hover, var(--panneau-color-text-muted));\n}\n\n.control[data-focused],\n.control[data-focus-within],\n.control[data-focus-visible],\n.control:focus-within {\n    border-color: var(--panneau-color-focus);\n    outline: none;\n    box-shadow: 0 0 0 1px var(--panneau-color-focus);\n}\n\n.control[data-invalid] {\n    border-color: var(--panneau-color-danger);\n}\n\n.control[data-invalid][data-focused],\n.control[data-invalid][data-focus-within],\n.control[data-invalid]:focus-within {\n    box-shadow: 0 0 0 1px var(--panneau-color-danger);\n}\n\n.control[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n.control[data-readonly],\n.control[readonly] {\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n/* An input inside a control (with adornments, segments or buttons): the control draws the box. */\n.bare {\n    flex: 1 1 auto;\n    min-width: 0;\n    height: 100%;\n    min-height: calc(var(--panneau-control-height) - 2 * var(--panneau-border-width));\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    background: transparent;\n    border: 0;\n    outline: none;\n}\n\n.bare::placeholder {\n    color: var(--panneau-color-text-muted);\n    opacity: 1;\n}\n\n.adornment {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    color: var(--panneau-color-text-muted);\n    white-space: nowrap;\n}\n\n.adornment:first-child {\n    margin-inline-end: var(--panneau-space-2);\n}\n\n.adornment:last-child {\n    margin-inline-start: var(--panneau-space-2);\n}\n\n.fieldset {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n}\n\n.legend {\n    display: block;\n    float: none;\n    width: 100%;\n    margin: 0 0 var(--panneau-space-1);\n    padding: 0;\n}\n"],"mappings":""}

package/dist/field/Fieldset.js

@@ -14,7 +14,7 @@ function Fieldset({ legend, description, errors = [], isRequired = false, isDisa
 	const errorsId = errors.length > 0 ? `${id}-errors` : null;
 	const describedBy = [descriptionId, errorsId].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsxs("fieldset", {
-		className: cx(Field_module_default.fieldset, className),
+		className: cx("panneau-fieldset", Field_module_default.fieldset, className),
 		"aria-describedby": describedBy !== "" ? describedBy : void 0,
 		"aria-invalid": errors.length > 0 ? true : void 0,
 		disabled: isDisabled,

package/dist/field/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","names":["styles","Fragment"],"sources":["../../src/field/Fieldset.tsx"],"sourcesContent":["import { Fragment, type ReactNode, useId } from 'react';\n\nimport { cx } from '../utils/cx';\nimport styles from './Field.module.css';\n\nexport interface FieldsetProps {\n    /** Title of the group of controls. */\n    legend?: ReactNode;\n    description?: ReactNode;\n    /** Errors of the group as a whole. */\n    errors?: readonly string[];\n    isRequired?: boolean;\n    isDisabled?: boolean;\n    children?: ReactNode;\n    className?: string;\n    legendClassName?: string;\n    descriptionClassName?: string;\n    errorsClassName?: string;\n}\n\n/**\n * Groups related controls under a legend, with a description and errors: for composite values\n * (a group of fields, a list of blocks, a value per locale). The description and the errors\n * describe the group for assistive technologies.\n */\nexport function Fieldset({\n    legend,\n    description,\n    errors = [],\n    isRequired = false,\n    isDisabled = false,\n    children,\n    className,\n    legendClassName,\n    descriptionClassName,\n    errorsClassName,\n}: FieldsetProps) {\n    const id = useId();\n    const descriptionId = description !== undefined ? `${id}-description` : null;\n    const errorsId = errors.length > 0 ? `${id}-errors` : null;\n    const describedBy = [descriptionId, errorsId].filter(Boolean).join(' ');\n    return (\n        <fieldset\n            className={cx(styles.fieldset, className)}\n            aria-describedby={describedBy !== '' ? describedBy : undefined}\n            aria-invalid={errors.length > 0 ? true : undefined}\n            disabled={isDisabled}\n        >\n            {legend !== undefined && legend !== null ? (\n                <legend className={cx(styles.legend, styles.label, legendClassName)}>\n                    {legend}\n                    {isRequired ? (\n                        <span className={styles.required} aria-hidden=\"true\">\n                            *\n                        </span>\n                    ) : null}\n                </legend>\n            ) : null}\n            {descriptionId !== null ? (\n                <div id={descriptionId} className={cx(styles.description, descriptionClassName)}>\n                    {description}\n                </div>\n            ) : null}\n            {children}\n            {errorsId !== null ? (\n                <div id={errorsId} className={cx(styles.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={styles.error}>{error}</span>\n                        </Fragment>\n                    ))}\n                </div>\n            ) : null}\n        </fieldset>\n    );\n}\n"],"mappings":";;;;;;;;;;AAyBA,SAAgB,SAAS,EACrB,QACA,aACA,SAAS,CAAA,GACT,aAAa,OACb,aAAa,OACb,UACA,WACA,iBACA,sBACA,mBACc;CACd,MAAM,KAAK,MAAM;CACjB,MAAM,gBAAgB,gBAAgB,KAAA,IAAY,GAAG,GAAE,gBAAiB;CACxE,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,YAAD;EACI,WAAW,GAAGA,qBAAO,UAAU,SAAS;EACxC,oBAAkB,gBAAgB,KAAK,cAAc,KAAA;EACrD,gBAAc,OAAO,SAAS,IAAI,OAAO,KAAA;EACzC,UAAU;EAJd,UAAA;GAMK,WAAW,KAAA,KAAa,WAAW,OAChC,qBAAC,UAAD;IAAQ,WAAW,GAAGA,qBAAO,QAAQA,qBAAO,OAAO,eAAe;IAAlE,UAAA,CACK,QACA,aACG,oBAAC,QAAD;KAAM,WAAWA,qBAAO;KAAU,eAAY;KAAM,UAAA;IAE9C,CAAA,IACN,IACA;GACR,CAAA,IAAA;GACH,kBAAkB,OACf,oBAAC,OAAD;IAAK,IAAI;IAAe,WAAW,GAAGA,qBAAO,aAAa,oBAAoB;IACzE,UAAA;GACA,CAAA,IACL;GACH;GACA,aAAa,OACV,oBAAC,OAAD;IAAK,IAAI;IAAU,WAAW,GAAGA,qBAAO,QAAQ,eAAe;IAC1D,UAAA,OAAO,KAAK,OAAO,UAChB,qBAACC,YAAD,EAAA,UAAA,CAEK,QAAQ,IAAI,MAAM,MACnB,oBAAC,QAAD;KAAM,WAAWD,qBAAO;KAAQ,UAAA;IAAY,CAAA,CACtC,EAAA,GAJK,KAIL,CACb;GACA,CAAA,IACL;EACE;;AAElB"}
+{"version":3,"file":"Fieldset.js","names":["styles","Fragment"],"sources":["../../src/field/Fieldset.tsx"],"sourcesContent":["import { Fragment, type ReactNode, useId } from 'react';\n\nimport { cx } from '../utils/cx';\nimport styles from './Field.module.css';\n\nexport interface FieldsetProps {\n    /** Title of the group of controls. */\n    legend?: ReactNode;\n    description?: ReactNode;\n    /** Errors of the group as a whole. */\n    errors?: readonly string[];\n    isRequired?: boolean;\n    isDisabled?: boolean;\n    children?: ReactNode;\n    className?: string;\n    legendClassName?: string;\n    descriptionClassName?: string;\n    errorsClassName?: string;\n}\n\n/**\n * Groups related controls under a legend, with a description and errors: for composite values\n * (a group of fields, a list of blocks, a value per locale). The description and the errors\n * describe the group for assistive technologies.\n */\nexport function Fieldset({\n    legend,\n    description,\n    errors = [],\n    isRequired = false,\n    isDisabled = false,\n    children,\n    className,\n    legendClassName,\n    descriptionClassName,\n    errorsClassName,\n}: FieldsetProps) {\n    const id = useId();\n    const descriptionId = description !== undefined ? `${id}-description` : null;\n    const errorsId = errors.length > 0 ? `${id}-errors` : null;\n    const describedBy = [descriptionId, errorsId].filter(Boolean).join(' ');\n    return (\n        <fieldset\n            className={cx('panneau-fieldset', styles.fieldset, className)}\n            aria-describedby={describedBy !== '' ? describedBy : undefined}\n            aria-invalid={errors.length > 0 ? true : undefined}\n            disabled={isDisabled}\n        >\n            {legend !== undefined && legend !== null ? (\n                <legend className={cx(styles.legend, styles.label, legendClassName)}>\n                    {legend}\n                    {isRequired ? (\n                        <span className={styles.required} aria-hidden=\"true\">\n                            *\n                        </span>\n                    ) : null}\n                </legend>\n            ) : null}\n            {descriptionId !== null ? (\n                <div id={descriptionId} className={cx(styles.description, descriptionClassName)}>\n                    {description}\n                </div>\n            ) : null}\n            {children}\n            {errorsId !== null ? (\n                <div id={errorsId} className={cx(styles.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={styles.error}>{error}</span>\n                        </Fragment>\n                    ))}\n                </div>\n            ) : null}\n        </fieldset>\n    );\n}\n"],"mappings":";;;;;;;;;;AAyBA,SAAgB,SAAS,EACrB,QACA,aACA,SAAS,CAAA,GACT,aAAa,OACb,aAAa,OACb,UACA,WACA,iBACA,sBACA,mBACc;CACd,MAAM,KAAK,MAAM;CACjB,MAAM,gBAAgB,gBAAgB,KAAA,IAAY,GAAG,GAAE,gBAAiB;CACxE,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,YAAD;EACI,WAAW,GAAG,oBAAoBA,qBAAO,UAAU,SAAS;EAC5D,oBAAkB,gBAAgB,KAAK,cAAc,KAAA;EACrD,gBAAc,OAAO,SAAS,IAAI,OAAO,KAAA;EACzC,UAAU;EAJd,UAAA;GAMK,WAAW,KAAA,KAAa,WAAW,OAChC,qBAAC,UAAD;IAAQ,WAAW,GAAGA,qBAAO,QAAQA,qBAAO,OAAO,eAAe;IAAlE,UAAA,CACK,QACA,aACG,oBAAC,QAAD;KAAM,WAAWA,qBAAO;KAAU,eAAY;KAAM,UAAA;IAE9C,CAAA,IACN,IACA;GACR,CAAA,IAAA;GACH,kBAAkB,OACf,oBAAC,OAAD;IAAK,IAAI;IAAe,WAAW,GAAGA,qBAAO,aAAa,oBAAoB;IACzE,UAAA;GACA,CAAA,IACL;GACH;GACA,aAAa,OACV,oBAAC,OAAD;IAAK,IAAI;IAAU,WAAW,GAAGA,qBAAO,QAAQ,eAAe;IAC1D,UAAA,OAAO,KAAK,OAAO,UAChB,qBAACC,YAAD,EAAA,UAAA,CAEK,QAAQ,IAAI,MAAM,MACnB,oBAAC,QAAD;KAAM,WAAWD,qBAAO;KAAQ,UAAA;IAAY,CAAA,CACtC,EAAA,GAJK,KAIL,CACb;GACA,CAAA,IACL;EACE;;AAElB"}

package/dist/field/inputTokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of the input box of text inputs, text areas, selects, combo boxes, number inputs, date pickers and time inputs. */
+export declare const inputTokens: import("..").ComponentTokens<"input", "panneau-input-radius" | "panneau-input-padding-x" | "panneau-input-border-width" | "panneau-input-bg" | "panneau-input-border-color" | "panneau-input-border-color-hover">;
+//# sourceMappingURL=inputTokens.d.ts.map

package/dist/field/inputTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputTokens.d.ts","sourceRoot":"","sources":["../../src/field/inputTokens.ts"],"names":[],"mappings":"AAEA,6HAA6H;AAC7H,eAAO,MAAM,WAAW,mNAatB,CAAC"}

package/dist/field/inputTokens.js

@@ -0,0 +1,21 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/field/inputTokens.ts
+/** Tokens of the input box of text inputs, text areas, selects, combo boxes, number inputs, date pickers and time inputs. */
+var inputTokens = defineComponentTokens("input", {
+	/** Horizontal padding. */
+	"padding-x": "var(--panneau-control-padding-x)",
+	/** Background. */
+	bg: "var(--panneau-color-surface)",
+	/** Width of the border. */
+	"border-width": "var(--panneau-border-width)",
+	/** Border color. */
+	"border-color": "var(--panneau-color-border-control)",
+	/** Corner radius. */
+	radius: "var(--panneau-radius-md)",
+	/** Border color of a hovered input. */
+	"border-color-hover": "var(--panneau-color-text-muted)"
+});
+//#endregion
+export { inputTokens };
+
+//# sourceMappingURL=inputTokens.js.map

package/dist/field/inputTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputTokens.js","names":[],"sources":["../../src/field/inputTokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of the input box of text inputs, text areas, selects, combo boxes, number inputs, date pickers and time inputs. */\nexport const inputTokens = defineComponentTokens('input', {\n    /** Horizontal padding. */\n    'padding-x': 'var(--panneau-control-padding-x)',\n    /** Background. */\n    bg: 'var(--panneau-color-surface)',\n    /** Width of the border. */\n    'border-width': 'var(--panneau-border-width)',\n    /** Border color. */\n    'border-color': 'var(--panneau-color-border-control)',\n    /** Corner radius. */\n    radius: 'var(--panneau-radius-md)',\n    /** Border color of a hovered input. */\n    'border-color-hover': 'var(--panneau-color-text-muted)',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,aAAa;;CAEb,IAAI;;CAEJ,gBAAgB;;CAEhB,gBAAgB;;CAEhB,QAAQ;;CAER,sBAAsB;AAC1B,CAAC"}

package/dist/field/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of the label, description and errors around inputs. */
+export declare const fieldTokens: import("..").ComponentTokens<"field", "panneau-field-gap" | "panneau-field-label-font-size" | "panneau-field-label-font-weight">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/field/tokens.ts"],"names":[],"mappings":"AAEA,iEAAiE;AACjE,eAAO,MAAM,WAAW,kIAOtB,CAAC"}

package/dist/field/tokens.js

@@ -0,0 +1,15 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/field/tokens.ts
+/** Tokens of the label, description and errors around inputs. */
+var fieldTokens = defineComponentTokens("field", {
+	/** Space between the label, the input, the description and the errors. */
+	gap: "var(--panneau-space-1)",
+	/** Font size of the label. */
+	"label-font-size": "var(--panneau-font-size-md)",
+	/** Font weight of the label. */
+	"label-font-weight": "var(--panneau-font-weight-medium)"
+});
+//#endregion
+export { fieldTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/field/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/field/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of the label, description and errors around inputs. */\nexport const fieldTokens = defineComponentTokens('field', {\n    /** Space between the label, the input, the description and the errors. */\n    gap: 'var(--panneau-space-1)',\n    /** Font size of the label. */\n    'label-font-size': 'var(--panneau-font-size-md)',\n    /** Font weight of the label. */\n    'label-font-weight': 'var(--panneau-font-weight-medium)',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,KAAK;;CAEL,mBAAmB;;CAEnB,qBAAqB;AACzB,CAAC"}