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

package/dist/number-input/NumberInput.css

@@ -1,25 +1,25 @@
-.panneau-control-4aptNi.panneau-control-4aptNi {
+.panneau-number-input-control.panneau-number-input-control {
     padding-inline-end: 0;
     overflow: hidden;
 }
 
-.panneau-input-qqs-MV {
-    font-variant-numeric: tabular-nums;
+.panneau-number-input-input {
+    font-variant-numeric: var(--panneau-font-numeric);
 }
 
-.panneau-steppers-JoTs6w {
+.panneau-number-input-steppers {
     display: flex;
     flex-direction: column;
     align-self: stretch;
     border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);
 }
 
-.panneau-stepper-sAGR2f {
+.panneau-number-input-stepper {
     display: flex;
     flex: 1 1 0;
     align-items: center;
     justify-content: center;
-    width: 1.75rem;
+    width: var(--panneau-number-input-stepper-width, 1.75rem);
     padding: 0;
     color: var(--panneau-color-text-muted);
     cursor: pointer;
@@ -27,31 +27,31 @@
     border: 0;
 }
 
-.panneau-stepper-sAGR2f + .panneau-stepper-sAGR2f {
+.panneau-number-input-stepper + .panneau-number-input-stepper {
     border-top: var(--panneau-border-width) solid var(--panneau-color-border);
 }
 
-.panneau-stepper-sAGR2f[data-hovered] {
+.panneau-number-input-stepper[data-hovered] {
     color: var(--panneau-color-text);
     background-color: var(--panneau-color-hover);
 }
 
-.panneau-stepper-sAGR2f[data-pressed] {
+.panneau-number-input-stepper[data-pressed] {
     background-color: var(--panneau-color-pressed);
 }
 
-.panneau-stepper-sAGR2f[data-disabled] {
+.panneau-number-input-stepper[data-disabled] {
     cursor: not-allowed;
     opacity: 0.5;
 }
 
 /* Touch screens have their own keyboard for numbers: the steppers would be too small. */
 @media (pointer: coarse) {
-    .panneau-steppers-JoTs6w {
+    .panneau-number-input-steppers {
         display: none;
     }
 
-    .panneau-control-4aptNi.panneau-control-4aptNi {
+    .panneau-number-input-control.panneau-number-input-control {
         padding-inline-end: var(--panneau-space-3);
     }
 }

package/dist/number-input/NumberInput.js

@@ -25,7 +25,7 @@ function NumberInput({ label, description, errors = [], value, defaultValue, onC
 		isReadOnly,
 		isInvalid: invalid,
 		validationBehavior: "aria",
-		className: cx(Field_module_default.field, className),
+		className: cx("panneau-number-input", Field_module_default.field, className),
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, {
 				isRequired,

package/dist/number-input/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","names":["fieldStyles","styles"],"sources":["../../src/number-input/NumberInput.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport {\n    type NumberFieldProps as AriaNumberFieldProps,\n    Button,\n    Group,\n    Input,\n    NumberField,\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 { cx } from '../utils/cx';\nimport styles from './NumberInput.module.css';\n\nexport interface NumberInputProps\n    extends\n        Omit<\n            AriaNumberFieldProps,\n            | 'className'\n            | 'style'\n            | 'children'\n            | 'isInvalid'\n            | 'validate'\n            | 'value'\n            | 'defaultValue'\n            | 'onChange'\n        >,\n        FieldChromeProps {\n    /** The number, or `null` when empty. */\n    value?: number | null;\n    defaultValue?: number | null;\n    /** Called with the number, or `null` when the input is cleared. */\n    onChange?: (value: number | null) => void;\n    placeholder?: string;\n    /** Content after the number, inside the control: a unit. */\n    suffix?: ReactNode;\n    controlClassName?: string;\n    inputClassName?: string;\n}\n\nfunction toAria(value: number | null | undefined): number | undefined {\n    return value === null ? Number.NaN : value;\n}\n\n/**\n * A number input, formatted for the locale, with steppers and arrow keys. An empty input is\n * `null`, not `NaN`.\n */\nexport function NumberInput({\n    label,\n    description,\n    errors = [],\n    value,\n    defaultValue,\n    onChange,\n    placeholder,\n    suffix,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    inputClassName,\n    isRequired,\n    isReadOnly,\n    ...props\n}: NumberInputProps) {\n    const invalid = errors.length > 0;\n    return (\n        <NumberField\n            {...props}\n            value={toAria(value)}\n            defaultValue={toAria(defaultValue)}\n            onChange={(next) => onChange?.(Number.isNaN(next) ? null : next)}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\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                data-readonly={isReadOnly || undefined}\n            >\n                <Input\n                    placeholder={placeholder}\n                    className={cx(fieldStyles.bare, styles.input, inputClassName)}\n                />\n                {suffix !== undefined ? (\n                    <span className={fieldStyles.adornment}>{suffix}</span>\n                ) : null}\n                {isReadOnly !== true ? (\n                    <span className={styles.steppers}>\n                        <Button slot=\"increment\" className={styles.stepper}>\n                            <Icon icon={ChevronUp} size=\"xs\" />\n                        </Button>\n                        <Button slot=\"decrement\" className={styles.stepper}>\n                            <Icon icon={ChevronDown} size=\"xs\" />\n                        </Button>\n                    </span>\n                ) : null}\n            </Group>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </NumberField>\n    );\n}\n"],"mappings":";;;;;;;;;AA+CA,SAAS,OAAO,OAAsD;CAClE,OAAO,UAAU,OAAO,MAAa;AACzC;;;;;AAMA,SAAgB,YAAY,EACxB,OACA,aACA,SAAS,CAAA,GACT,OACA,cACA,UACA,aACA,QACA,WACA,gBACA,sBACA,iBACA,kBACA,gBACA,YACA,YACA,GAAG,SACc;CACjB,MAAM,UAAU,OAAO,SAAS;CAChC,OACI,qBAAC,aAAD;EACI,GAAI;EACJ,OAAO,OAAO,KAAK;EACnB,cAAc,OAAO,YAAY;EACjC,WAAW,SAAS,WAAW,OAAO,MAAM,IAAI,IAAI,OAAO,IAAI;EACnD;EACA;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAGA,qBAAY,OAAO,SAAS;EAT9C,UAAA;GAWI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAY,SAASC,2BAAO,SAAS,gBAAgB;IACnE,gBAAc,WAAW,KAAA;IACzB,iBAAe,cAAc,KAAA;IAHjC,UAAA;KAKI,oBAAC,OAAD;MACiB;MACb,WAAW,GAAGD,qBAAY,MAAMC,2BAAO,OAAO,cAAc;KAAE,CAAA;KAEjE,WAAW,KAAA,IACR,oBAAC,QAAD;MAAM,WAAWD,qBAAY;MAAY,UAAA;KAAa,CAAA,IACtD;KACH,eAAe,OACZ,qBAAC,QAAD;MAAM,WAAWC,2BAAO;MAAxB,UAAA,CACI,oBAAC,QAAD;OAAQ,MAAK;OAAY,WAAWA,2BAAO;OACvC,UAAA,oBAAC,MAAD;QAAM,MAAM;QAAW,MAAK;OAAI,CAAA;MAC5B,CAAA,GACR,oBAAC,QAAD;OAAQ,MAAK;OAAY,WAAWA,2BAAO;OACvC,UAAA,oBAAC,MAAD;QAAM,MAAM;QAAa,MAAK;OAAI,CAAA;MAC9B,CAAA,CACN;KACN,CAAA,IAAA;IACD;;GACP,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EAC/C;;AAErB"}
+{"version":3,"file":"NumberInput.js","names":["fieldStyles","styles"],"sources":["../../src/number-input/NumberInput.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport {\n    type NumberFieldProps as AriaNumberFieldProps,\n    Button,\n    Group,\n    Input,\n    NumberField,\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 { cx } from '../utils/cx';\nimport styles from './NumberInput.module.css';\n\nexport interface NumberInputProps\n    extends\n        Omit<\n            AriaNumberFieldProps,\n            | 'className'\n            | 'style'\n            | 'children'\n            | 'isInvalid'\n            | 'validate'\n            | 'value'\n            | 'defaultValue'\n            | 'onChange'\n        >,\n        FieldChromeProps {\n    /** The number, or `null` when empty. */\n    value?: number | null;\n    defaultValue?: number | null;\n    /** Called with the number, or `null` when the input is cleared. */\n    onChange?: (value: number | null) => void;\n    placeholder?: string;\n    /** Content after the number, inside the control: a unit. */\n    suffix?: ReactNode;\n    controlClassName?: string;\n    inputClassName?: string;\n}\n\nfunction toAria(value: number | null | undefined): number | undefined {\n    return value === null ? Number.NaN : value;\n}\n\n/**\n * A number input, formatted for the locale, with steppers and arrow keys. An empty input is\n * `null`, not `NaN`.\n */\nexport function NumberInput({\n    label,\n    description,\n    errors = [],\n    value,\n    defaultValue,\n    onChange,\n    placeholder,\n    suffix,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    inputClassName,\n    isRequired,\n    isReadOnly,\n    ...props\n}: NumberInputProps) {\n    const invalid = errors.length > 0;\n    return (\n        <NumberField\n            {...props}\n            value={toAria(value)}\n            defaultValue={toAria(defaultValue)}\n            onChange={(next) => onChange?.(Number.isNaN(next) ? null : next)}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\n            isInvalid={invalid}\n            validationBehavior=\"aria\"\n            className={cx('panneau-number-input', 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                data-readonly={isReadOnly || undefined}\n            >\n                <Input\n                    placeholder={placeholder}\n                    className={cx(fieldStyles.bare, styles.input, inputClassName)}\n                />\n                {suffix !== undefined ? (\n                    <span className={fieldStyles.adornment}>{suffix}</span>\n                ) : null}\n                {isReadOnly !== true ? (\n                    <span className={styles.steppers}>\n                        <Button slot=\"increment\" className={styles.stepper}>\n                            <Icon icon={ChevronUp} size=\"xs\" />\n                        </Button>\n                        <Button slot=\"decrement\" className={styles.stepper}>\n                            <Icon icon={ChevronDown} size=\"xs\" />\n                        </Button>\n                    </span>\n                ) : null}\n            </Group>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </NumberField>\n    );\n}\n"],"mappings":";;;;;;;;;AA+CA,SAAS,OAAO,OAAsD;CAClE,OAAO,UAAU,OAAO,MAAa;AACzC;;;;;AAMA,SAAgB,YAAY,EACxB,OACA,aACA,SAAS,CAAA,GACT,OACA,cACA,UACA,aACA,QACA,WACA,gBACA,sBACA,iBACA,kBACA,gBACA,YACA,YACA,GAAG,SACc;CACjB,MAAM,UAAU,OAAO,SAAS;CAChC,OACI,qBAAC,aAAD;EACI,GAAI;EACJ,OAAO,OAAO,KAAK;EACnB,cAAc,OAAO,YAAY;EACjC,WAAW,SAAS,WAAW,OAAO,MAAM,IAAI,IAAI,OAAO,IAAI;EACnD;EACA;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAG,wBAAwBA,qBAAY,OAAO,SAAS;EATtE,UAAA;GAWI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAY,SAASC,2BAAO,SAAS,gBAAgB;IACnE,gBAAc,WAAW,KAAA;IACzB,iBAAe,cAAc,KAAA;IAHjC,UAAA;KAKI,oBAAC,OAAD;MACiB;MACb,WAAW,GAAGD,qBAAY,MAAMC,2BAAO,OAAO,cAAc;KAAE,CAAA;KAEjE,WAAW,KAAA,IACR,oBAAC,QAAD;MAAM,WAAWD,qBAAY;MAAY,UAAA;KAAa,CAAA,IACtD;KACH,eAAe,OACZ,qBAAC,QAAD;MAAM,WAAWC,2BAAO;MAAxB,UAAA,CACI,oBAAC,QAAD;OAAQ,MAAK;OAAY,WAAWA,2BAAO;OACvC,UAAA,oBAAC,MAAD;QAAM,MAAM;QAAW,MAAK;OAAI,CAAA;MAC5B,CAAA,GACR,oBAAC,QAAD;OAAQ,MAAK;OAAY,WAAWA,2BAAO;OACvC,UAAA,oBAAC,MAAD;QAAM,MAAM;QAAa,MAAK;OAAI,CAAA;MAC9B,CAAA,CACN;KACN,CAAA,IAAA;IACD;;GACP,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EAC/C;;AAErB"}

package/dist/number-input/NumberInput.module.js

@@ -1,9 +1,9 @@
 import "./NumberInput.css";
 //#region src/number-input/NumberInput.module.css
-var control = "panneau-control-4aptNi";
-var input = "panneau-input-qqs-MV";
-var steppers = "panneau-steppers-JoTs6w";
-var stepper = "panneau-stepper-sAGR2f";
+var control = "panneau-number-input-control";
+var input = "panneau-number-input-input";
+var steppers = "panneau-number-input-steppers";
+var stepper = "panneau-number-input-stepper";
 var NumberInput_module_default = {
 	control,
 	input,

package/dist/number-input/NumberInput.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.module.js","names":[],"sources":["../../src/number-input/NumberInput.module.css"],"sourcesContent":[".control.control {\n    padding-inline-end: 0;\n    overflow: hidden;\n}\n\n.input {\n    font-variant-numeric: tabular-nums;\n}\n\n.steppers {\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.stepper {\n    display: flex;\n    flex: 1 1 0;\n    align-items: center;\n    justify-content: center;\n    width: 1.75rem;\n    padding: 0;\n    color: var(--panneau-color-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n}\n\n.stepper + .stepper {\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.stepper[data-hovered] {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-hover);\n}\n\n.stepper[data-pressed] {\n    background-color: var(--panneau-color-pressed);\n}\n\n.stepper[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n/* Touch screens have their own keyboard for numbers: the steppers would be too small. */\n@media (pointer: coarse) {\n    .steppers {\n        display: none;\n    }\n\n    .control.control {\n        padding-inline-end: var(--panneau-space-3);\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"NumberInput.module.js","names":[],"sources":["../../src/number-input/NumberInput.module.css"],"sourcesContent":[".control.control {\n    padding-inline-end: 0;\n    overflow: hidden;\n}\n\n.input {\n    font-variant-numeric: var(--panneau-font-numeric);\n}\n\n.steppers {\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.stepper {\n    display: flex;\n    flex: 1 1 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--panneau-number-input-stepper-width, 1.75rem);\n    padding: 0;\n    color: var(--panneau-color-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n}\n\n.stepper + .stepper {\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.stepper[data-hovered] {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-hover);\n}\n\n.stepper[data-pressed] {\n    background-color: var(--panneau-color-pressed);\n}\n\n.stepper[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n/* Touch screens have their own keyboard for numbers: the steppers would be too small. */\n@media (pointer: coarse) {\n    .steppers {\n        display: none;\n    }\n\n    .control.control {\n        padding-inline-end: var(--panneau-space-3);\n    }\n}\n"],"mappings":""}

package/dist/number-input/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of NumberInput. */
+export declare const numberInputTokens: import("..").ComponentTokens<"number-input", "panneau-number-input-stepper-width">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/number-input/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/number-input/tokens.ts"],"names":[],"mappings":"AAEA,6BAA6B;AAC7B,eAAO,MAAM,iBAAiB,oFAG5B,CAAC"}

package/dist/number-input/tokens.js

@@ -0,0 +1,10 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/number-input/tokens.ts
+/** Tokens of NumberInput. */
+var numberInputTokens = defineComponentTokens("number-input", { 
+/** Width of the increment and decrement buttons. */
+"stepper-width": "1.75rem" });
+//#endregion
+export { numberInputTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/number-input/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/number-input/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of NumberInput. */\nexport const numberInputTokens = defineComponentTokens('number-input', {\n    /** Width of the increment and decrement buttons. */\n    'stepper-width': '1.75rem',\n});\n"],"mappings":";;;AAGA,IAAa,oBAAoB,sBAAsB,gBAAgB;;AAEnE,iBAAiB,UACrB,CAAC"}

package/dist/popover/Popover.css

@@ -1,30 +1,31 @@
-.panneau-popover-KacUIM {
+.panneau-popover {
     min-width: var(--trigger-width, 10rem);
     max-width: calc(100vw - 2 * var(--panneau-space-4));
     color: var(--panneau-color-text);
-    background-color: var(--panneau-color-surface-raised);
-    border: var(--panneau-border-width) solid var(--panneau-color-border);
-    border-radius: var(--panneau-radius-lg);
-    box-shadow: var(--panneau-shadow-lg);
+    background-color: var(--panneau-popover-bg, var(--panneau-color-surface-raised));
+    border: var(--panneau-border-width) solid
+        var(--panneau-popover-border-color, var(--panneau-color-border));
+    border-radius: var(--panneau-popover-radius, var(--panneau-radius-lg));
+    box-shadow: var(--panneau-popover-shadow, var(--panneau-shadow-lg));
     outline: none;
     overflow: auto;
     z-index: var(--panneau-z-overlay);
 }
 
-.panneau-popover-KacUIM[data-entering] {
-    animation: panneau-pop-fB47s- var(--panneau-duration) ease-out;
+.panneau-popover[data-entering] {
+    animation: panneau-popover-pop var(--panneau-duration) ease-out;
 }
 
-.panneau-popover-KacUIM[data-exiting] {
-    animation: panneau-pop-fB47s- var(--panneau-duration) ease-in reverse;
+.panneau-popover[data-exiting] {
+    animation: panneau-popover-pop var(--panneau-duration) ease-in reverse;
 }
 
-.panneau-dialog-2cVt0D {
-    padding: var(--panneau-space-3);
+.panneau-popover-dialog {
+    padding: var(--panneau-popover-padding, var(--panneau-space-3));
     outline: none;
 }
 
-@keyframes panneau-pop-fB47s- {
+@keyframes panneau-popover-pop {
     from {
         opacity: 0;
         transform: scale(0.97);

package/dist/popover/Popover.js

@@ -14,7 +14,7 @@ function Popover$1({ children, "aria-label": ariaLabel, className, dialogClassNa
 	return /* @__PURE__ */ jsx(Popover, {
 		...props,
 		offset,
-		className: cx(Popover_module_default.popover, className),
+		className: cx("panneau-popover", Popover_module_default.popover, className),
 		UNSTABLE_portalContainer: container,
 		children: /* @__PURE__ */ jsx(Dialog, {
 			"aria-label": ariaLabel,
@@ -30,7 +30,7 @@ function PopoverSurface({ children, className, offset = 6, ...props }) {
 	return /* @__PURE__ */ jsx(Popover, {
 		...props,
 		offset,
-		className: cx(Popover_module_default.popover, className),
+		className: cx("panneau-popover", Popover_module_default.popover, className),
 		UNSTABLE_portalContainer: container,
 		children
 	});

package/dist/popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["Popover","AriaPopover","styles"],"sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    Popover as AriaPopover,\n    type PopoverProps as AriaPopoverProps,\n    Dialog,\n} from 'react-aria-components';\n\nimport { usePortalContainer } from '../root/PanneauRoot';\nimport { cx } from '../utils/cx';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<\n    AriaPopoverProps,\n    'className' | 'style' | 'children' | 'UNSTABLE_portalContainer'\n> {\n    children?: ReactNode;\n    /** Accessible label of the popover's dialog, when it has no heading. */\n    'aria-label'?: string;\n    className?: string;\n    dialogClassName?: string;\n}\n\n/**\n * A popover with free content, inside a `PopoverTrigger` with its button as the first child. Its\n * content is a non-modal dialog: focus moves into it and comes back to the button when it closes.\n */\nexport function Popover({\n    children,\n    'aria-label': ariaLabel,\n    className,\n    dialogClassName,\n    offset = 6,\n    ...props\n}: PopoverProps) {\n    const container = usePortalContainer();\n    if (container === null) {\n        return null;\n    }\n    return (\n        <AriaPopover\n            {...props}\n            offset={offset}\n            className={cx(styles.popover, className)}\n            UNSTABLE_portalContainer={container}\n        >\n            <Dialog aria-label={ariaLabel} className={cx(styles.dialog, dialogClassName)}>\n                {children}\n            </Dialog>\n        </AriaPopover>\n    );\n}\n\n/** The popover surface without a dialog, for listboxes and menus. */\nexport function PopoverSurface({\n    children,\n    className,\n    offset = 6,\n    ...props\n}: Omit<PopoverProps, 'aria-label' | 'dialogClassName'>) {\n    const container = usePortalContainer();\n    if (container === null) {\n        return null;\n    }\n    return (\n        <AriaPopover\n            {...props}\n            offset={offset}\n            className={cx(styles.popover, className)}\n            UNSTABLE_portalContainer={container}\n        >\n            {children}\n        </AriaPopover>\n    );\n}\n\nexport { DialogTrigger as PopoverTrigger } from 'react-aria-components';\n"],"mappings":";;;;;;;;;;AA0BA,SAAgBA,UAAQ,EACpB,UACA,cAAc,WACd,WACA,iBACA,SAAS,GACT,GAAG,SACU;CACb,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,oBAACC,SAAD;EACI,GAAI;EACI;EACR,WAAW,GAAGC,uBAAO,SAAS,SAAS;EACvC,0BAA0B;EAE1B,UAAA,oBAAC,QAAD;GAAQ,cAAY;GAAW,WAAW,GAAGA,uBAAO,QAAQ,eAAe;GACtE;EACG,CAAA;CACC,CAAA;AAErB;;AAGA,SAAgB,eAAe,EAC3B,UACA,WACA,SAAS,GACT,GAAG,SACkD;CACrD,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,oBAACD,SAAD;EACI,GAAI;EACI;EACR,WAAW,GAAGC,uBAAO,SAAS,SAAS;EACvC,0BAA0B;EAEzB;CACQ,CAAA;AAErB"}
+{"version":3,"file":"Popover.js","names":["Popover","AriaPopover","styles"],"sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    Popover as AriaPopover,\n    type PopoverProps as AriaPopoverProps,\n    Dialog,\n} from 'react-aria-components';\n\nimport { usePortalContainer } from '../root/PanneauRoot';\nimport { cx } from '../utils/cx';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<\n    AriaPopoverProps,\n    'className' | 'style' | 'children' | 'UNSTABLE_portalContainer'\n> {\n    children?: ReactNode;\n    /** Accessible label of the popover's dialog, when it has no heading. */\n    'aria-label'?: string;\n    className?: string;\n    dialogClassName?: string;\n}\n\n/**\n * A popover with free content, inside a `PopoverTrigger` with its button as the first child. Its\n * content is a non-modal dialog: focus moves into it and comes back to the button when it closes.\n */\nexport function Popover({\n    children,\n    'aria-label': ariaLabel,\n    className,\n    dialogClassName,\n    offset = 6,\n    ...props\n}: PopoverProps) {\n    const container = usePortalContainer();\n    if (container === null) {\n        return null;\n    }\n    return (\n        <AriaPopover\n            {...props}\n            offset={offset}\n            className={cx('panneau-popover', styles.popover, className)}\n            UNSTABLE_portalContainer={container}\n        >\n            <Dialog aria-label={ariaLabel} className={cx(styles.dialog, dialogClassName)}>\n                {children}\n            </Dialog>\n        </AriaPopover>\n    );\n}\n\n/** The popover surface without a dialog, for listboxes and menus. */\nexport function PopoverSurface({\n    children,\n    className,\n    offset = 6,\n    ...props\n}: Omit<PopoverProps, 'aria-label' | 'dialogClassName'>) {\n    const container = usePortalContainer();\n    if (container === null) {\n        return null;\n    }\n    return (\n        <AriaPopover\n            {...props}\n            offset={offset}\n            className={cx('panneau-popover', styles.popover, className)}\n            UNSTABLE_portalContainer={container}\n        >\n            {children}\n        </AriaPopover>\n    );\n}\n\nexport { DialogTrigger as PopoverTrigger } from 'react-aria-components';\n"],"mappings":";;;;;;;;;;AA0BA,SAAgBA,UAAQ,EACpB,UACA,cAAc,WACd,WACA,iBACA,SAAS,GACT,GAAG,SACU;CACb,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,oBAACC,SAAD;EACI,GAAI;EACI;EACR,WAAW,GAAG,mBAAmBC,uBAAO,SAAS,SAAS;EAC1D,0BAA0B;EAE1B,UAAA,oBAAC,QAAD;GAAQ,cAAY;GAAW,WAAW,GAAGA,uBAAO,QAAQ,eAAe;GACtE;EACG,CAAA;CACC,CAAA;AAErB;;AAGA,SAAgB,eAAe,EAC3B,UACA,WACA,SAAS,GACT,GAAG,SACkD;CACrD,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,oBAACD,SAAD;EACI,GAAI;EACI;EACR,WAAW,GAAG,mBAAmBC,uBAAO,SAAS,SAAS;EAC1D,0BAA0B;EAEzB;CACQ,CAAA;AAErB"}

package/dist/popover/Popover.module.js

@@ -1,8 +1,8 @@
 import "./Popover.css";
 //#region src/popover/Popover.module.css
-var popover = "panneau-popover-KacUIM";
-var pop = "panneau-pop-fB47s-";
-var dialog = "panneau-dialog-2cVt0D";
+var popover = "panneau-popover";
+var pop = "panneau-popover-pop";
+var dialog = "panneau-popover-dialog";
 var Popover_module_default = {
 	popover,
 	pop,

package/dist/popover/Popover.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.module.js","names":[],"sources":["../../src/popover/Popover.module.css"],"sourcesContent":[".popover {\n    min-width: var(--trigger-width, 10rem);\n    max-width: calc(100vw - 2 * var(--panneau-space-4));\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface-raised);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-lg);\n    box-shadow: var(--panneau-shadow-lg);\n    outline: none;\n    overflow: auto;\n    z-index: var(--panneau-z-overlay);\n}\n\n.popover[data-entering] {\n    animation: pop var(--panneau-duration) ease-out;\n}\n\n.popover[data-exiting] {\n    animation: pop var(--panneau-duration) ease-in reverse;\n}\n\n.dialog {\n    padding: var(--panneau-space-3);\n    outline: none;\n}\n\n@keyframes pop {\n    from {\n        opacity: 0;\n        transform: scale(0.97);\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"Popover.module.js","names":[],"sources":["../../src/popover/Popover.module.css"],"sourcesContent":[".popover {\n    min-width: var(--trigger-width, 10rem);\n    max-width: calc(100vw - 2 * var(--panneau-space-4));\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-popover-bg, var(--panneau-color-surface-raised));\n    border: var(--panneau-border-width) solid\n        var(--panneau-popover-border-color, var(--panneau-color-border));\n    border-radius: var(--panneau-popover-radius, var(--panneau-radius-lg));\n    box-shadow: var(--panneau-popover-shadow, var(--panneau-shadow-lg));\n    outline: none;\n    overflow: auto;\n    z-index: var(--panneau-z-overlay);\n}\n\n.popover[data-entering] {\n    animation: pop var(--panneau-duration) ease-out;\n}\n\n.popover[data-exiting] {\n    animation: pop var(--panneau-duration) ease-in reverse;\n}\n\n.dialog {\n    padding: var(--panneau-popover-padding, var(--panneau-space-3));\n    outline: none;\n}\n\n@keyframes pop {\n    from {\n        opacity: 0;\n        transform: scale(0.97);\n    }\n}\n"],"mappings":""}

package/dist/popover/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Popover. */
+export declare const popoverTokens: import("..").ComponentTokens<"popover", "panneau-popover-radius" | "panneau-popover-padding" | "panneau-popover-bg" | "panneau-popover-border-color" | "panneau-popover-shadow">;
+//# sourceMappingURL=tokens.d.ts.map

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

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

package/dist/popover/tokens.js

@@ -0,0 +1,19 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/popover/tokens.ts
+/** Tokens of Popover. */
+var popoverTokens = defineComponentTokens("popover", {
+	/** Background. */
+	bg: "var(--panneau-color-surface-raised)",
+	/** Border color. */
+	"border-color": "var(--panneau-color-border)",
+	/** Corner radius. */
+	radius: "var(--panneau-radius-lg)",
+	/** Shadow. */
+	shadow: "var(--panneau-shadow-lg)",
+	/** Padding of the content. */
+	padding: "var(--panneau-space-3)"
+});
+//#endregion
+export { popoverTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/popover/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/popover/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Popover. */\nexport const popoverTokens = defineComponentTokens('popover', {\n    /** Background. */\n    bg: 'var(--panneau-color-surface-raised)',\n    /** Border color. */\n    'border-color': 'var(--panneau-color-border)',\n    /** Corner radius. */\n    radius: 'var(--panneau-radius-lg)',\n    /** Shadow. */\n    shadow: 'var(--panneau-shadow-lg)',\n    /** Padding of the content. */\n    padding: 'var(--panneau-space-3)',\n});\n"],"mappings":";;;AAGA,IAAa,gBAAgB,sBAAsB,WAAW;;CAE1D,IAAI;;CAEJ,gBAAgB;;CAEhB,QAAQ;;CAER,QAAQ;;CAER,SAAS;AACb,CAAC"}

package/dist/prose/Prose.css

@@ -0,0 +1,141 @@
+/*
+ * Rich content: Panneau styles no element outside of this container, since it is often embedded in
+ * someone else's page. Rules use :where() on the elements, so a class on any of them wins.
+ */
+
+.panneau-prose {
+    line-height: var(--panneau-prose-line-height, 1.6);
+    overflow-wrap: break-word;
+}
+
+.panneau-prose > * + * {
+    margin-top: var(--panneau-prose-gap, var(--panneau-space-4));
+}
+
+.panneau-prose > :where(h1, h2, h3, h4, h5, h6):not(:first-child) {
+    margin-top: var(--panneau-prose-heading-gap, var(--panneau-space-6));
+}
+
+.panneau-prose :where(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--panneau-heading-font-family, var(--panneau-font-family-heading));
+    color: var(--panneau-heading-color, inherit);
+}
+
+.panneau-prose :where(h1) {
+    font-size: var(--panneau-heading-1-font-size, 1.75rem);
+    font-weight: var(--panneau-heading-1-font-weight, var(--panneau-font-weight-bold));
+    line-height: var(--panneau-heading-1-line-height, var(--panneau-line-height-tight));
+    letter-spacing: var(--panneau-heading-1-letter-spacing, -0.015em);
+}
+
+.panneau-prose :where(h2) {
+    font-size: var(--panneau-heading-2-font-size, 1.375rem);
+    font-weight: var(--panneau-heading-2-font-weight, var(--panneau-font-weight-bold));
+    line-height: var(--panneau-heading-2-line-height, var(--panneau-line-height-tight));
+    letter-spacing: var(--panneau-heading-2-letter-spacing, -0.01em);
+}
+
+.panneau-prose :where(h3) {
+    font-size: var(--panneau-heading-3-font-size, 1.125rem);
+    font-weight: var(--panneau-heading-3-font-weight, var(--panneau-font-weight-bold));
+    line-height: var(--panneau-heading-3-line-height, var(--panneau-line-height-tight));
+    letter-spacing: var(--panneau-heading-3-letter-spacing, normal);
+}
+
+.panneau-prose :where(h4, h5, h6) {
+    font-size: var(--panneau-heading-4-font-size, var(--panneau-font-size-lg));
+    font-weight: var(--panneau-heading-4-font-weight, var(--panneau-font-weight-bold));
+    line-height: var(--panneau-heading-4-line-height, var(--panneau-line-height-tight));
+    letter-spacing: var(--panneau-heading-4-letter-spacing, normal);
+}
+
+.panneau-prose :where(ul, ol) {
+    padding-inline-start: var(--panneau-prose-list-indent, 1.5em);
+}
+
+.panneau-prose :where(ul) {
+    list-style: disc;
+}
+
+.panneau-prose :where(ol) {
+    list-style: decimal;
+}
+
+.panneau-prose :where(li + li, li > ul, li > ol) {
+    margin-top: var(--panneau-space-1);
+}
+
+.panneau-prose :where(a) {
+    color: var(--panneau-prose-link-color, var(--panneau-color-link));
+    text-decoration: underline;
+}
+
+.panneau-prose :where(strong, b) {
+    font-weight: var(--panneau-font-weight-bold);
+}
+
+.panneau-prose :where(code, kbd, samp, pre) {
+    color: var(--panneau-prose-code-color, inherit);
+    font-family: var(--panneau-font-family-mono);
+    font-size: var(--panneau-prose-code-font-size, 0.875em);
+}
+
+.panneau-prose :where(:not(pre) > code) {
+    padding: 0.1em 0.3em;
+    border-radius: var(--panneau-prose-code-radius, var(--panneau-radius-sm));
+    background-color: var(--panneau-prose-code-bg, var(--panneau-color-surface-sunken));
+}
+
+.panneau-prose :where(pre) {
+    overflow-x: auto;
+    padding: var(--panneau-space-3) var(--panneau-space-4);
+    border-radius: var(--panneau-prose-code-radius, var(--panneau-radius-sm));
+    background-color: var(--panneau-prose-code-bg, var(--panneau-color-surface-sunken));
+    line-height: var(--panneau-line-height);
+}
+
+.panneau-prose :where(pre code) {
+    font-size: inherit;
+}
+
+.panneau-prose :where(blockquote) {
+    margin-inline: 0;
+    padding-inline-start: var(--panneau-space-4);
+    border-inline-start: 3px solid
+        var(--panneau-prose-quote-border-color, var(--panneau-color-border));
+    color: var(--panneau-prose-quote-color, var(--panneau-color-text-muted));
+}
+
+.panneau-prose :where(figcaption) {
+    margin-top: var(--panneau-space-2);
+    color: var(--panneau-prose-quote-color, var(--panneau-color-text-muted));
+    font-size: var(--panneau-font-size-sm);
+}
+
+.panneau-prose :where(hr) {
+    border: 0;
+    border-top: var(--panneau-border-width) solid
+        var(--panneau-prose-border-color, var(--panneau-color-border));
+}
+
+.panneau-prose :where(table) {
+    width: 100%;
+    border-collapse: collapse;
+    font-variant-numeric: var(--panneau-font-numeric);
+}
+
+.panneau-prose :where(th, td) {
+    padding: var(--panneau-space-2) var(--panneau-space-3);
+    border-bottom: var(--panneau-border-width) solid
+        var(--panneau-prose-border-color, var(--panneau-color-border));
+    text-align: start;
+    vertical-align: top;
+}
+
+.panneau-prose :where(th) {
+    font-weight: var(--panneau-font-weight-bold);
+}
+
+.panneau-prose :where(img, video) {
+    height: auto;
+}

package/dist/prose/Prose.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+export interface ProseProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to `div`. */
+    as?: 'div' | 'article' | 'section';
+}
+/**
+ * Styles the elements of rich content (headings, paragraphs, lists, links, quotes, code, tables):
+ * the output of an editor, Markdown, or a help page. Outside of it, Panneau styles no element.
+ */
+export declare function Prose({ as: Element, className, ...props }: ProseProps): import("react").JSX.Element;
+//# sourceMappingURL=Prose.d.ts.map

package/dist/prose/Prose.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prose.d.ts","sourceRoot":"","sources":["../../src/prose/Prose.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC3D,4CAA4C;IAC5C,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;CACtC;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EAAE,EAAE,EAAE,OAAe,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAE7E"}

package/dist/prose/Prose.js

@@ -0,0 +1,18 @@
+import { cx } from "../utils/cx.js";
+import Prose_module_default from "./Prose.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/prose/Prose.tsx
+/**
+* Styles the elements of rich content (headings, paragraphs, lists, links, quotes, code, tables):
+* the output of an editor, Markdown, or a help page. Outside of it, Panneau styles no element.
+*/
+function Prose({ as: Element = "div", className, ...props }) {
+	return /* @__PURE__ */ jsx(Element, {
+		...props,
+		className: cx("panneau-prose", Prose_module_default.prose, className)
+	});
+}
+//#endregion
+export { Prose };
+
+//# sourceMappingURL=Prose.js.map

package/dist/prose/Prose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prose.js","names":["styles"],"sources":["../../src/prose/Prose.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport { cx } from '../utils/cx';\nimport styles from './Prose.module.css';\n\nexport interface ProseProps extends HTMLAttributes<HTMLElement> {\n    /** Element to render. Defaults to `div`. */\n    as?: 'div' | 'article' | 'section';\n}\n\n/**\n * Styles the elements of rich content (headings, paragraphs, lists, links, quotes, code, tables):\n * the output of an editor, Markdown, or a help page. Outside of it, Panneau styles no element.\n */\nexport function Prose({ as: Element = 'div', className, ...props }: ProseProps) {\n    return <Element {...props} className={cx('panneau-prose', styles.prose, className)} />;\n}\n"],"mappings":";;;;;;;;AAcA,SAAgB,MAAM,EAAE,IAAI,UAAU,OAAO,WAAW,GAAG,SAAqB;CAC5E,OAAO,oBAAC,SAAD;EAAS,GAAI;EAAO,WAAW,GAAG,iBAAiBA,qBAAO,OAAO,SAAS;CAAE,CAAA;AACvF"}

package/dist/prose/Prose.module.js

@@ -0,0 +1,8 @@
+import "./Prose.css";
+//#region src/prose/Prose.module.css
+var prose = "panneau-prose";
+var Prose_module_default = { prose };
+//#endregion
+export { Prose_module_default as default, prose };
+
+//# sourceMappingURL=Prose.module.js.map

package/dist/prose/Prose.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prose.module.js","names":[],"sources":["../../src/prose/Prose.module.css"],"sourcesContent":["/*\n * Rich content: Panneau styles no element outside of this container, since it is often embedded in\n * someone else's page. Rules use :where() on the elements, so a class on any of them wins.\n */\n\n.prose {\n    line-height: var(--panneau-prose-line-height, 1.6);\n    overflow-wrap: break-word;\n}\n\n.prose > * + * {\n    margin-top: var(--panneau-prose-gap, var(--panneau-space-4));\n}\n\n.prose > :where(h1, h2, h3, h4, h5, h6):not(:first-child) {\n    margin-top: var(--panneau-prose-heading-gap, var(--panneau-space-6));\n}\n\n.prose :where(h1, h2, h3, h4, h5, h6) {\n    font-family: var(--panneau-heading-font-family, var(--panneau-font-family-heading));\n    color: var(--panneau-heading-color, inherit);\n}\n\n.prose :where(h1) {\n    font-size: var(--panneau-heading-1-font-size, 1.75rem);\n    font-weight: var(--panneau-heading-1-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-heading-1-line-height, var(--panneau-line-height-tight));\n    letter-spacing: var(--panneau-heading-1-letter-spacing, -0.015em);\n}\n\n.prose :where(h2) {\n    font-size: var(--panneau-heading-2-font-size, 1.375rem);\n    font-weight: var(--panneau-heading-2-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-heading-2-line-height, var(--panneau-line-height-tight));\n    letter-spacing: var(--panneau-heading-2-letter-spacing, -0.01em);\n}\n\n.prose :where(h3) {\n    font-size: var(--panneau-heading-3-font-size, 1.125rem);\n    font-weight: var(--panneau-heading-3-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-heading-3-line-height, var(--panneau-line-height-tight));\n    letter-spacing: var(--panneau-heading-3-letter-spacing, normal);\n}\n\n.prose :where(h4, h5, h6) {\n    font-size: var(--panneau-heading-4-font-size, var(--panneau-font-size-lg));\n    font-weight: var(--panneau-heading-4-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-heading-4-line-height, var(--panneau-line-height-tight));\n    letter-spacing: var(--panneau-heading-4-letter-spacing, normal);\n}\n\n.prose :where(ul, ol) {\n    padding-inline-start: var(--panneau-prose-list-indent, 1.5em);\n}\n\n.prose :where(ul) {\n    list-style: disc;\n}\n\n.prose :where(ol) {\n    list-style: decimal;\n}\n\n.prose :where(li + li, li > ul, li > ol) {\n    margin-top: var(--panneau-space-1);\n}\n\n.prose :where(a) {\n    color: var(--panneau-prose-link-color, var(--panneau-color-link));\n    text-decoration: underline;\n}\n\n.prose :where(strong, b) {\n    font-weight: var(--panneau-font-weight-bold);\n}\n\n.prose :where(code, kbd, samp, pre) {\n    color: var(--panneau-prose-code-color, inherit);\n    font-family: var(--panneau-font-family-mono);\n    font-size: var(--panneau-prose-code-font-size, 0.875em);\n}\n\n.prose :where(:not(pre) > code) {\n    padding: 0.1em 0.3em;\n    border-radius: var(--panneau-prose-code-radius, var(--panneau-radius-sm));\n    background-color: var(--panneau-prose-code-bg, var(--panneau-color-surface-sunken));\n}\n\n.prose :where(pre) {\n    overflow-x: auto;\n    padding: var(--panneau-space-3) var(--panneau-space-4);\n    border-radius: var(--panneau-prose-code-radius, var(--panneau-radius-sm));\n    background-color: var(--panneau-prose-code-bg, var(--panneau-color-surface-sunken));\n    line-height: var(--panneau-line-height);\n}\n\n.prose :where(pre code) {\n    font-size: inherit;\n}\n\n.prose :where(blockquote) {\n    margin-inline: 0;\n    padding-inline-start: var(--panneau-space-4);\n    border-inline-start: 3px solid\n        var(--panneau-prose-quote-border-color, var(--panneau-color-border));\n    color: var(--panneau-prose-quote-color, var(--panneau-color-text-muted));\n}\n\n.prose :where(figcaption) {\n    margin-top: var(--panneau-space-2);\n    color: var(--panneau-prose-quote-color, var(--panneau-color-text-muted));\n    font-size: var(--panneau-font-size-sm);\n}\n\n.prose :where(hr) {\n    border: 0;\n    border-top: var(--panneau-border-width) solid\n        var(--panneau-prose-border-color, var(--panneau-color-border));\n}\n\n.prose :where(table) {\n    width: 100%;\n    border-collapse: collapse;\n    font-variant-numeric: var(--panneau-font-numeric);\n}\n\n.prose :where(th, td) {\n    padding: var(--panneau-space-2) var(--panneau-space-3);\n    border-bottom: var(--panneau-border-width) solid\n        var(--panneau-prose-border-color, var(--panneau-color-border));\n    text-align: start;\n    vertical-align: top;\n}\n\n.prose :where(th) {\n    font-weight: var(--panneau-font-weight-bold);\n}\n\n.prose :where(img, video) {\n    height: auto;\n}\n"],"mappings":""}

package/dist/prose/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Prose. Its headings use the tokens of Heading. */
+export declare const proseTokens: import("..").ComponentTokens<"prose", "panneau-prose-gap" | "panneau-prose-border-color" | "panneau-prose-line-height" | "panneau-prose-heading-gap" | "panneau-prose-list-indent" | "panneau-prose-link-color" | "panneau-prose-code-font-size" | "panneau-prose-code-color" | "panneau-prose-code-bg" | "panneau-prose-code-radius" | "panneau-prose-quote-border-color" | "panneau-prose-quote-color">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/prose/tokens.ts"],"names":[],"mappings":"AAEA,+DAA+D;AAC/D,eAAO,MAAM,WAAW,2YAyBtB,CAAC"}

package/dist/prose/tokens.js

@@ -0,0 +1,33 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/prose/tokens.ts
+/** Tokens of Prose. Its headings use the tokens of Heading. */
+var proseTokens = defineComponentTokens("prose", {
+	/** Line height of the content. */
+	"line-height": "1.6",
+	/** Space between blocks: paragraphs, lists, tables. */
+	gap: "var(--panneau-space-4)",
+	/** Space above a heading. */
+	"heading-gap": "var(--panneau-space-6)",
+	/** Indent of lists. */
+	"list-indent": "1.5em",
+	/** Color of links. */
+	"link-color": "var(--panneau-color-link)",
+	/** Font size of code, relative to the text around it. */
+	"code-font-size": "0.875em",
+	/** Text color of code: inherited, so that a site's global `code` color doesn't apply. */
+	"code-color": "inherit",
+	/** Background of code and code blocks. */
+	"code-bg": "var(--panneau-color-surface-sunken)",
+	/** Corner radius of code and code blocks. */
+	"code-radius": "var(--panneau-radius-sm)",
+	/** Border of quotes. */
+	"quote-border-color": "var(--panneau-color-border)",
+	/** Text color of quotes and captions. */
+	"quote-color": "var(--panneau-color-text-muted)",
+	/** Color of the borders of tables and of horizontal rules. */
+	"border-color": "var(--panneau-color-border)"
+});
+//#endregion
+export { proseTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/prose/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/prose/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Prose. Its headings use the tokens of Heading. */\nexport const proseTokens = defineComponentTokens('prose', {\n    /** Line height of the content. */\n    'line-height': '1.6',\n    /** Space between blocks: paragraphs, lists, tables. */\n    gap: 'var(--panneau-space-4)',\n    /** Space above a heading. */\n    'heading-gap': 'var(--panneau-space-6)',\n    /** Indent of lists. */\n    'list-indent': '1.5em',\n    /** Color of links. */\n    'link-color': 'var(--panneau-color-link)',\n    /** Font size of code, relative to the text around it. */\n    'code-font-size': '0.875em',\n    /** Text color of code: inherited, so that a site's global `code` color doesn't apply. */\n    'code-color': 'inherit',\n    /** Background of code and code blocks. */\n    'code-bg': 'var(--panneau-color-surface-sunken)',\n    /** Corner radius of code and code blocks. */\n    'code-radius': 'var(--panneau-radius-sm)',\n    /** Border of quotes. */\n    'quote-border-color': 'var(--panneau-color-border)',\n    /** Text color of quotes and captions. */\n    'quote-color': 'var(--panneau-color-text-muted)',\n    /** Color of the borders of tables and of horizontal rules. */\n    'border-color': 'var(--panneau-color-border)',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,eAAe;;CAEf,KAAK;;CAEL,eAAe;;CAEf,eAAe;;CAEf,cAAc;;CAEd,kBAAkB;;CAElB,cAAc;;CAEd,WAAW;;CAEX,eAAe;;CAEf,sBAAsB;;CAEtB,eAAe;;CAEf,gBAAgB;AACpB,CAAC"}