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

package/dist/stack/Stack.css

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

package/dist/stack/Stack.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+import { type Justification, type Responsive, type Space } from '../layout/responsive';
+export interface StackProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to `div`. */
+    as?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'main' | 'ul' | 'ol' | 'form';
+    /** Space between items, from the space scale. Defaults to the `--panneau-stack-gap` token. */
+    gap?: Responsive<Space>;
+    /** Horizontal alignment of the items. Defaults to `stretch`. */
+    align?: Responsive<'start' | 'center' | 'end' | 'stretch'>;
+    /** Vertical distribution of the items, when the stack is taller than them. Defaults to `start`. */
+    justify?: Responsive<Justification>;
+}
+/** Items one under the other, with space between them, like Bootstrap's `.vstack`. */
+export declare function Stack({ as: Element, gap, align, justify, className, style, ...props }: StackProps): import("react").JSX.Element;
+//# sourceMappingURL=Stack.d.ts.map

package/dist/stack/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EACH,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,KAAK,EAKb,MAAM,sBAAsB,CAAC;AAI9B,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC3D,4CAA4C;IAC5C,EAAE,CAAC,EACG,KAAK,GACL,SAAS,GACT,SAAS,GACT,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,MAAM,GACN,IAAI,GACJ,IAAI,GACJ,MAAM,CAAC;IACb,8FAA8F;IAC9F,GAAG,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IACxB,gEAAgE;IAChE,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC,CAAC;IAC3D,mGAAmG;IACnG,OAAO,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;CACvC;AAED,sFAAsF;AACtF,wBAAgB,KAAK,CAAC,EAClB,EAAE,EAAE,OAAe,EACnB,GAAG,EACH,KAAK,EACL,OAAO,EACP,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACX,EAAE,UAAU,+BAeZ"}

package/dist/stack/Stack.js

@@ -0,0 +1,21 @@
+import { cx } from "../utils/cx.js";
+import { justification, responsiveVariables, space, withVariables } from "../layout/responsive.js";
+import Stack_module_default from "./Stack.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/stack/Stack.tsx
+/** Items one under the other, with space between them, like Bootstrap's `.vstack`. */
+function Stack({ as: Element = "div", gap, align, justify, className, style, ...props }) {
+	return /* @__PURE__ */ jsx(Element, {
+		...props,
+		className: cx("panneau-stack", Stack_module_default.stack, className),
+		style: withVariables([
+			responsiveVariables("stack", "gap", gap, space),
+			responsiveVariables("stack", "align", align, String),
+			responsiveVariables("stack", "justify", justify, justification)
+		], style)
+	});
+}
+//#endregion
+export { Stack };
+
+//# sourceMappingURL=Stack.js.map

package/dist/stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","names":["styles"],"sources":["../../src/stack/Stack.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport {\n    type Justification,\n    type Responsive,\n    type Space,\n    justification,\n    responsiveVariables,\n    space,\n    withVariables,\n} from '../layout/responsive';\nimport { cx } from '../utils/cx';\nimport styles from './Stack.module.css';\n\nexport interface StackProps extends HTMLAttributes<HTMLElement> {\n    /** Element to render. Defaults to `div`. */\n    as?:\n        | 'div'\n        | 'section'\n        | 'article'\n        | 'aside'\n        | 'header'\n        | 'footer'\n        | 'nav'\n        | 'main'\n        | 'ul'\n        | 'ol'\n        | 'form';\n    /** Space between items, from the space scale. Defaults to the `--panneau-stack-gap` token. */\n    gap?: Responsive<Space>;\n    /** Horizontal alignment of the items. Defaults to `stretch`. */\n    align?: Responsive<'start' | 'center' | 'end' | 'stretch'>;\n    /** Vertical distribution of the items, when the stack is taller than them. Defaults to `start`. */\n    justify?: Responsive<Justification>;\n}\n\n/** Items one under the other, with space between them, like Bootstrap's `.vstack`. */\nexport function Stack({\n    as: Element = 'div',\n    gap,\n    align,\n    justify,\n    className,\n    style,\n    ...props\n}: StackProps) {\n    return (\n        <Element\n            {...props}\n            className={cx('panneau-stack', styles.stack, className)}\n            style={withVariables(\n                [\n                    responsiveVariables('stack', 'gap', gap, space),\n                    responsiveVariables('stack', 'align', align, String),\n                    responsiveVariables('stack', 'justify', justify, justification),\n                ],\n                style,\n            )}\n        />\n    );\n}\n"],"mappings":";;;;;;AAqCA,SAAgB,MAAM,EAClB,IAAI,UAAU,OACd,KACA,OACA,SACA,WACA,OACA,GAAG,SACQ;CACX,OACI,oBAAC,SAAD;EACI,GAAI;EACJ,WAAW,GAAG,iBAAiBA,qBAAO,OAAO,SAAS;EACtD,OAAO,cACH;GACI,oBAAoB,SAAS,OAAO,KAAK,KAAK;GAC9C,oBAAoB,SAAS,SAAS,OAAO,MAAM;GACnD,oBAAoB,SAAS,WAAW,SAAS,aAAa;EAAC,GAEnE,KACJ;CAAE,CAAA;AAGd"}

package/dist/stack/Stack.module.js

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

package/dist/stack/Stack.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.module.js","names":[],"sources":["../../src/stack/Stack.module.css"],"sourcesContent":["/* A vertical stack: each prop can change at the breakpoints of the nearest container. */\n\n.stack {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n/* Responsive values are set inline; children reset them so that they aren't inherited. */\n.stack > * {\n    --_panneau-stack-gap-base: initial;\n    --_panneau-stack-gap-sm: initial;\n    --_panneau-stack-gap-md: initial;\n    --_panneau-stack-gap-lg: initial;\n    --_panneau-stack-gap-xl: initial;\n    --_panneau-stack-align-base: initial;\n    --_panneau-stack-align-sm: initial;\n    --_panneau-stack-align-md: initial;\n    --_panneau-stack-align-lg: initial;\n    --_panneau-stack-align-xl: initial;\n    --_panneau-stack-justify-base: initial;\n    --_panneau-stack-justify-sm: initial;\n    --_panneau-stack-justify-md: initial;\n    --_panneau-stack-justify-lg: initial;\n    --_panneau-stack-justify-xl: initial;\n}\n\n.stack {\n    gap: var(--_panneau-stack-gap-base, var(--panneau-stack-gap, var(--panneau-space-4)));\n    align-items: var(--_panneau-stack-align-base, stretch);\n    justify-content: var(--_panneau-stack-justify-base, start);\n}\n\n@container (min-width: 40rem) {\n    .stack {\n        gap: var(\n            --_panneau-stack-gap-sm,\n            var(--_panneau-stack-gap-base, var(--panneau-stack-gap, var(--panneau-space-4)))\n        );\n        align-items: var(--_panneau-stack-align-sm, var(--_panneau-stack-align-base, stretch));\n        justify-content: var(\n            --_panneau-stack-justify-sm,\n            var(--_panneau-stack-justify-base, start)\n        );\n    }\n}\n\n@container (min-width: 48rem) {\n    .stack {\n        gap: var(\n            --_panneau-stack-gap-md,\n            var(\n                --_panneau-stack-gap-sm,\n                var(--_panneau-stack-gap-base, var(--panneau-stack-gap, var(--panneau-space-4)))\n            )\n        );\n        align-items: var(\n            --_panneau-stack-align-md,\n            var(--_panneau-stack-align-sm, var(--_panneau-stack-align-base, stretch))\n        );\n        justify-content: var(\n            --_panneau-stack-justify-md,\n            var(--_panneau-stack-justify-sm, var(--_panneau-stack-justify-base, start))\n        );\n    }\n}\n\n@container (min-width: 64rem) {\n    .stack {\n        gap: var(\n            --_panneau-stack-gap-lg,\n            var(\n                --_panneau-stack-gap-md,\n                var(\n                    --_panneau-stack-gap-sm,\n                    var(--_panneau-stack-gap-base, var(--panneau-stack-gap, var(--panneau-space-4)))\n                )\n            )\n        );\n        align-items: var(\n            --_panneau-stack-align-lg,\n            var(\n                --_panneau-stack-align-md,\n                var(--_panneau-stack-align-sm, var(--_panneau-stack-align-base, stretch))\n            )\n        );\n        justify-content: var(\n            --_panneau-stack-justify-lg,\n            var(\n                --_panneau-stack-justify-md,\n                var(--_panneau-stack-justify-sm, var(--_panneau-stack-justify-base, start))\n            )\n        );\n    }\n}\n\n@container (min-width: 80rem) {\n    .stack {\n        gap: var(\n            --_panneau-stack-gap-xl,\n            var(\n                --_panneau-stack-gap-lg,\n                var(\n                    --_panneau-stack-gap-md,\n                    var(\n                        --_panneau-stack-gap-sm,\n                        var(\n                            --_panneau-stack-gap-base,\n                            var(--panneau-stack-gap, var(--panneau-space-4))\n                        )\n                    )\n                )\n            )\n        );\n        align-items: var(\n            --_panneau-stack-align-xl,\n            var(\n                --_panneau-stack-align-lg,\n                var(\n                    --_panneau-stack-align-md,\n                    var(--_panneau-stack-align-sm, var(--_panneau-stack-align-base, stretch))\n                )\n            )\n        );\n        justify-content: var(\n            --_panneau-stack-justify-xl,\n            var(\n                --_panneau-stack-justify-lg,\n                var(\n                    --_panneau-stack-justify-md,\n                    var(--_panneau-stack-justify-sm, var(--_panneau-stack-justify-base, start))\n                )\n            )\n        );\n    }\n}\n"],"mappings":""}

package/dist/stack/tokens.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/stack/tokens.ts"],"names":[],"mappings":"AAEA,uBAAuB;AACvB,eAAO,MAAM,WAAW,4DAGtB,CAAC"}

package/dist/stack/tokens.js

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

package/dist/stack/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/stack/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Stack. */\nexport const stackTokens = defineComponentTokens('stack', {\n    /** Space between items, when the `gap` prop is not set. */\n    gap: 'var(--panneau-space-4)',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;AAEtD,KAAK,yBACT,CAAC"}

package/dist/switch/Switch.css

@@ -1,4 +1,4 @@
-.panneau-switch-pwmftu {
+.panneau-switch-control {
     display: inline-flex;
     align-items: center;
     gap: var(--panneau-space-2);
@@ -9,61 +9,70 @@
     -webkit-tap-highlight-color: transparent;
 }
 
-.panneau-switch-pwmftu[data-disabled] {
+.panneau-switch-control[data-disabled] {
     cursor: not-allowed;
     opacity: 0.55;
 }
 
-.panneau-switch-pwmftu[data-readonly] {
+.panneau-switch-control[data-readonly] {
     cursor: default;
 }
 
-.panneau-track-PtpuqW {
+.panneau-switch-track {
     position: relative;
     flex: 0 0 auto;
-    width: 2.25rem;
-    height: 1.25rem;
-    background-color: var(--panneau-color-border-control);
-    border-radius: var(--panneau-radius-full);
+    width: var(--panneau-switch-width, 2.25rem);
+    height: var(--panneau-switch-height, 1.25rem);
+    background-color: var(--panneau-switch-track-bg, var(--panneau-color-border-control));
+    border-radius: var(--panneau-switch-radius, var(--panneau-radius-full));
     transition: background-color var(--panneau-duration);
 }
 
-.panneau-thumb-pQGDyC {
+.panneau-switch-thumb {
     position: absolute;
-    top: 0.125rem;
-    left: 0.125rem;
-    width: 1rem;
-    height: 1rem;
-    background-color: var(--panneau-color-surface);
-    border-radius: var(--panneau-radius-full);
+    top: calc((var(--panneau-switch-height, 1.25rem) - var(--panneau-switch-thumb-size, 1rem)) / 2);
+    left: calc(
+        (var(--panneau-switch-height, 1.25rem) - var(--panneau-switch-thumb-size, 1rem)) / 2
+    );
+    width: var(--panneau-switch-thumb-size, 1rem);
+    height: var(--panneau-switch-thumb-size, 1rem);
+    background-color: var(--panneau-switch-thumb-bg, var(--panneau-color-surface));
+    border-radius: var(--panneau-switch-radius, var(--panneau-radius-full));
     box-shadow: var(--panneau-shadow-sm);
     transition: transform var(--panneau-duration);
 }
 
-.panneau-switch-pwmftu[data-selected] .panneau-track-PtpuqW {
-    background-color: var(--panneau-color-accent);
+.panneau-switch-control[data-selected] .panneau-switch-track {
+    background-color: var(--panneau-switch-checked-bg, var(--panneau-color-accent));
 }
 
-.panneau-switch-pwmftu[data-selected] .panneau-thumb-pQGDyC {
-    background-color: var(--panneau-color-accent-text);
-    transform: translateX(1rem);
+.panneau-switch-control[data-selected] .panneau-switch-thumb {
+    background-color: var(--panneau-switch-checked-thumb-bg, var(--panneau-color-accent-text));
+    /* The thumb travels the width of the track minus its height (both ends keep the same inset). */
+    transform: translateX(
+        calc(var(--panneau-switch-width, 2.25rem) - var(--panneau-switch-height, 1.25rem))
+    );
 }
 
-.panneau-switch-pwmftu[data-selected] .panneau-thumb-pQGDyC:dir(rtl) {
-    transform: translateX(-1rem);
+.panneau-switch-control[data-selected] .panneau-switch-thumb:dir(rtl) {
+    transform: translateX(
+        calc(
+            -1 * calc(var(--panneau-switch-width, 2.25rem) - var(--panneau-switch-height, 1.25rem))
+        )
+    );
 }
 
-.panneau-switch-pwmftu[data-focus-visible] .panneau-track-PtpuqW {
+.panneau-switch-control[data-focus-visible] .panneau-switch-track {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: 2px;
 }
 
-.panneau-label-L3fUnh {
+.panneau-switch-label {
     overflow-wrap: anywhere;
 }
 
 @media (pointer: coarse) {
-    .panneau-switch-pwmftu {
+    .panneau-switch-control {
         min-height: 2.75rem;
     }
 }

package/dist/switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAwB,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElG,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAIhF,MAAM,WAAW,WACb,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,EAAE,iBAAiB;IACpF,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,6DAA6D;AAC7D,wBAAgB,MAAM,CAAC,EACnB,QAAQ,EACR,WAAW,EACX,MAAW,EACX,SAAS,EACT,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,GAAG,KAAK,EACX,EAAE,WAAW,+BAyBb"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAwB,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElG,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAIhF,MAAM,WAAW,WACb,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,EAAE,iBAAiB;IACpF,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,6DAA6D;AAC7D,wBAAgB,MAAM,CAAC,EACnB,QAAQ,EACR,WAAW,EACX,MAAW,EACX,SAAS,EACT,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,GAAG,KAAK,EACX,EAAE,WAAW,+BA0Bb"}

package/dist/switch/Switch.js

@@ -7,6 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** An on and off switch, for settings that apply at once. */
 function Switch$1({ children, description, errors = [], className, switchClassName, descriptionClassName, errorsClassName, ...props }) {
 	return /* @__PURE__ */ jsx(ChoiceChrome, {
+		component: "switch",
 		description,
 		errors,
 		className,
@@ -15,7 +16,7 @@ function Switch$1({ children, description, errors = [], className, switchClassNa
 		children: (describedBy) => /* @__PURE__ */ jsxs(Switch, {
 			...props,
 			"aria-describedby": describedBy,
-			className: cx(Switch_module_default.switch, switchClassName),
+			className: cx(Switch_module_default.control, switchClassName),
 			children: [/* @__PURE__ */ jsx("span", {
 				className: Switch_module_default.track,
 				"aria-hidden": "true",

package/dist/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["Switch","AriaSwitch","styles"],"sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Switch as AriaSwitch, type SwitchProps as AriaSwitchProps } from 'react-aria-components';\n\nimport { ChoiceChrome, type ChoiceChromeProps } from '../checkbox/ChoiceChrome';\nimport { cx } from '../utils/cx';\nimport styles from './Switch.module.css';\n\nexport interface SwitchProps\n    extends Omit<AriaSwitchProps, 'className' | 'style' | 'children'>, ChoiceChromeProps {\n    /** Label, next to the switch. */\n    children?: ReactNode;\n    switchClassName?: string;\n}\n\n/** An on and off switch, for settings that apply at once. */\nexport function Switch({\n    children,\n    description,\n    errors = [],\n    className,\n    switchClassName,\n    descriptionClassName,\n    errorsClassName,\n    ...props\n}: SwitchProps) {\n    return (\n        <ChoiceChrome\n            description={description}\n            errors={errors}\n            className={className}\n            descriptionClassName={descriptionClassName}\n            errorsClassName={errorsClassName}\n        >\n            {(describedBy) => (\n                <AriaSwitch\n                    {...props}\n                    aria-describedby={describedBy}\n                    className={cx(styles.switch, switchClassName)}\n                >\n                    <span className={styles.track} aria-hidden=\"true\">\n                        <span className={styles.thumb} />\n                    </span>\n                    {children !== undefined ? (\n                        <span className={styles.label}>{children}</span>\n                    ) : null}\n                </AriaSwitch>\n            )}\n        </ChoiceChrome>\n    );\n}\n"],"mappings":";;;;;;;AAeA,SAAgBA,SAAO,EACnB,UACA,aACA,SAAS,CAAA,GACT,WACA,iBACA,sBACA,iBACA,GAAG,SACS;CACZ,OACI,oBAAC,cAAD;EACiB;EACL;EACG;EACW;EACL;EAEf,WAAA,gBACE,qBAACC,QAAD;GACI,GAAI;GACJ,oBAAkB;GAClB,WAAW,GAAGC,sBAAO,QAAQ,eAAe;GAHhD,UAAA,CAKI,oBAAC,QAAD;IAAM,WAAWA,sBAAO;IAAO,eAAY;IACvC,UAAA,oBAAC,QAAD,EAAM,WAAWA,sBAAO,MAAM,CAAA;GAC5B,CAAA,GACL,aAAa,KAAA,IACV,oBAAC,QAAD;IAAM,WAAWA,sBAAO;IAAQ;GAAe,CAAA,IAC/C,IACI;;CAEN,CAAA;AAEtB"}
+{"version":3,"file":"Switch.js","names":["Switch","AriaSwitch","styles"],"sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Switch as AriaSwitch, type SwitchProps as AriaSwitchProps } from 'react-aria-components';\n\nimport { ChoiceChrome, type ChoiceChromeProps } from '../checkbox/ChoiceChrome';\nimport { cx } from '../utils/cx';\nimport styles from './Switch.module.css';\n\nexport interface SwitchProps\n    extends Omit<AriaSwitchProps, 'className' | 'style' | 'children'>, ChoiceChromeProps {\n    /** Label, next to the switch. */\n    children?: ReactNode;\n    switchClassName?: string;\n}\n\n/** An on and off switch, for settings that apply at once. */\nexport function Switch({\n    children,\n    description,\n    errors = [],\n    className,\n    switchClassName,\n    descriptionClassName,\n    errorsClassName,\n    ...props\n}: SwitchProps) {\n    return (\n        <ChoiceChrome\n            component=\"switch\"\n            description={description}\n            errors={errors}\n            className={className}\n            descriptionClassName={descriptionClassName}\n            errorsClassName={errorsClassName}\n        >\n            {(describedBy) => (\n                <AriaSwitch\n                    {...props}\n                    aria-describedby={describedBy}\n                    className={cx(styles.control, switchClassName)}\n                >\n                    <span className={styles.track} aria-hidden=\"true\">\n                        <span className={styles.thumb} />\n                    </span>\n                    {children !== undefined ? (\n                        <span className={styles.label}>{children}</span>\n                    ) : null}\n                </AriaSwitch>\n            )}\n        </ChoiceChrome>\n    );\n}\n"],"mappings":";;;;;;;AAeA,SAAgBA,SAAO,EACnB,UACA,aACA,SAAS,CAAA,GACT,WACA,iBACA,sBACA,iBACA,GAAG,SACS;CACZ,OACI,oBAAC,cAAD;EACI,WAAU;EACG;EACL;EACG;EACW;EACL;EAEf,WAAA,gBACE,qBAACC,QAAD;GACI,GAAI;GACJ,oBAAkB;GAClB,WAAW,GAAGC,sBAAO,SAAS,eAAe;GAHjD,UAAA,CAKI,oBAAC,QAAD;IAAM,WAAWA,sBAAO;IAAO,eAAY;IACvC,UAAA,oBAAC,QAAD,EAAM,WAAWA,sBAAO,MAAM,CAAA;GAC5B,CAAA,GACL,aAAa,KAAA,IACV,oBAAC,QAAD;IAAM,WAAWA,sBAAO;IAAQ;GAAe,CAAA,IAC/C,IACI;;CAEN,CAAA;AAEtB"}

package/dist/switch/Switch.module.js

@@ -1,15 +1,16 @@
 import "./Switch.css";
 //#region src/switch/Switch.module.css
-var track = "panneau-track-PtpuqW";
-var thumb = "panneau-thumb-pQGDyC";
-var label = "panneau-label-L3fUnh";
+var control = "panneau-switch-control";
+var track = "panneau-switch-track";
+var thumb = "panneau-switch-thumb";
+var label = "panneau-switch-label";
 var Switch_module_default = {
-	"switch": "panneau-switch-pwmftu",
+	control,
 	track,
 	thumb,
 	label
 };
 //#endregion
-export { Switch_module_default as default, label, thumb, track };
+export { control, Switch_module_default as default, label, thumb, track };
 
 //# sourceMappingURL=Switch.module.js.map

package/dist/switch/Switch.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.module.js","names":[],"sources":["../../src/switch/Switch.module.css"],"sourcesContent":[".switch {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: 1.5rem;\n    font-size: var(--panneau-font-size-md);\n    color: var(--panneau-color-text);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.switch[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.switch[data-readonly] {\n    cursor: default;\n}\n\n.track {\n    position: relative;\n    flex: 0 0 auto;\n    width: 2.25rem;\n    height: 1.25rem;\n    background-color: var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-full);\n    transition: background-color var(--panneau-duration);\n}\n\n.thumb {\n    position: absolute;\n    top: 0.125rem;\n    left: 0.125rem;\n    width: 1rem;\n    height: 1rem;\n    background-color: var(--panneau-color-surface);\n    border-radius: var(--panneau-radius-full);\n    box-shadow: var(--panneau-shadow-sm);\n    transition: transform var(--panneau-duration);\n}\n\n.switch[data-selected] .track {\n    background-color: var(--panneau-color-accent);\n}\n\n.switch[data-selected] .thumb {\n    background-color: var(--panneau-color-accent-text);\n    transform: translateX(1rem);\n}\n\n.switch[data-selected] .thumb:dir(rtl) {\n    transform: translateX(-1rem);\n}\n\n.switch[data-focus-visible] .track {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.label {\n    overflow-wrap: anywhere;\n}\n\n@media (pointer: coarse) {\n    .switch {\n        min-height: 2.75rem;\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"Switch.module.js","names":[],"sources":["../../src/switch/Switch.module.css"],"sourcesContent":[".control {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: 1.5rem;\n    font-size: var(--panneau-font-size-md);\n    color: var(--panneau-color-text);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.control[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.control[data-readonly] {\n    cursor: default;\n}\n\n.track {\n    position: relative;\n    flex: 0 0 auto;\n    width: var(--panneau-switch-width, 2.25rem);\n    height: var(--panneau-switch-height, 1.25rem);\n    background-color: var(--panneau-switch-track-bg, var(--panneau-color-border-control));\n    border-radius: var(--panneau-switch-radius, var(--panneau-radius-full));\n    transition: background-color var(--panneau-duration);\n}\n\n.thumb {\n    position: absolute;\n    top: calc((var(--panneau-switch-height, 1.25rem) - var(--panneau-switch-thumb-size, 1rem)) / 2);\n    left: calc(\n        (var(--panneau-switch-height, 1.25rem) - var(--panneau-switch-thumb-size, 1rem)) / 2\n    );\n    width: var(--panneau-switch-thumb-size, 1rem);\n    height: var(--panneau-switch-thumb-size, 1rem);\n    background-color: var(--panneau-switch-thumb-bg, var(--panneau-color-surface));\n    border-radius: var(--panneau-switch-radius, var(--panneau-radius-full));\n    box-shadow: var(--panneau-shadow-sm);\n    transition: transform var(--panneau-duration);\n}\n\n.control[data-selected] .track {\n    background-color: var(--panneau-switch-checked-bg, var(--panneau-color-accent));\n}\n\n.control[data-selected] .thumb {\n    background-color: var(--panneau-switch-checked-thumb-bg, var(--panneau-color-accent-text));\n    /* The thumb travels the width of the track minus its height (both ends keep the same inset). */\n    transform: translateX(\n        calc(var(--panneau-switch-width, 2.25rem) - var(--panneau-switch-height, 1.25rem))\n    );\n}\n\n.control[data-selected] .thumb:dir(rtl) {\n    transform: translateX(\n        calc(\n            -1 * calc(var(--panneau-switch-width, 2.25rem) - var(--panneau-switch-height, 1.25rem))\n        )\n    );\n}\n\n.control[data-focus-visible] .track {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.label {\n    overflow-wrap: anywhere;\n}\n\n@media (pointer: coarse) {\n    .control {\n        min-height: 2.75rem;\n    }\n}\n"],"mappings":""}

package/dist/switch/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Switch. */
+export declare const switchTokens: import("..").ComponentTokens<"switch", "panneau-switch-height" | "panneau-switch-width" | "panneau-switch-radius" | "panneau-switch-checked-bg" | "panneau-switch-track-bg" | "panneau-switch-thumb-size" | "panneau-switch-thumb-bg" | "panneau-switch-checked-thumb-bg">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/switch/tokens.ts"],"names":[],"mappings":"AAEA,wBAAwB;AACxB,eAAO,MAAM,YAAY,4QAiBvB,CAAC"}

package/dist/switch/tokens.js

@@ -0,0 +1,25 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/switch/tokens.ts
+/** Tokens of Switch. */
+var switchTokens = defineComponentTokens("switch", {
+	/** Width of the track. */
+	width: "2.25rem",
+	/** Height of the track. */
+	height: "1.25rem",
+	/** Background of the track when off. */
+	"track-bg": "var(--panneau-color-border-control)",
+	/** Corner radius of the track and the thumb. */
+	radius: "var(--panneau-radius-full)",
+	/** Size of the thumb. */
+	"thumb-size": "1rem",
+	/** Background of the thumb when off. */
+	"thumb-bg": "var(--panneau-color-surface)",
+	/** Background of the track when on. */
+	"checked-bg": "var(--panneau-color-accent)",
+	/** Background of the thumb when on. */
+	"checked-thumb-bg": "var(--panneau-color-accent-text)"
+});
+//#endregion
+export { switchTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/switch/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/switch/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Switch. */\nexport const switchTokens = defineComponentTokens('switch', {\n    /** Width of the track. */\n    width: '2.25rem',\n    /** Height of the track. */\n    height: '1.25rem',\n    /** Background of the track when off. */\n    'track-bg': 'var(--panneau-color-border-control)',\n    /** Corner radius of the track and the thumb. */\n    radius: 'var(--panneau-radius-full)',\n    /** Size of the thumb. */\n    'thumb-size': '1rem',\n    /** Background of the thumb when off. */\n    'thumb-bg': 'var(--panneau-color-surface)',\n    /** Background of the track when on. */\n    'checked-bg': 'var(--panneau-color-accent)',\n    /** Background of the thumb when on. */\n    'checked-thumb-bg': 'var(--panneau-color-accent-text)',\n});\n"],"mappings":";;;AAGA,IAAa,eAAe,sBAAsB,UAAU;;CAExD,OAAO;;CAEP,QAAQ;;CAER,YAAY;;CAEZ,QAAQ;;CAER,cAAc;;CAEd,YAAY;;CAEZ,cAAc;;CAEd,oBAAoB;AACxB,CAAC"}

package/dist/tabs/Tabs.css

@@ -1,83 +1,84 @@
-.panneau-tabs-JqDxcK {
+.panneau-tabs {
     display: flex;
     flex-direction: column;
-    gap: var(--panneau-space-4);
+    gap: var(--panneau-tabs-gap, var(--panneau-space-4));
     min-width: 0;
 }
 
-.panneau-list-uiIzNm {
+.panneau-tabs-list {
     display: flex;
     gap: var(--panneau-space-1);
     overflow-x: auto;
-    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-bottom: var(--panneau-border-width) solid
+        var(--panneau-tabs-border-color, var(--panneau-color-border));
     scrollbar-width: none;
 }
 
-.panneau-list-uiIzNm::-webkit-scrollbar {
+.panneau-tabs-list::-webkit-scrollbar {
     display: none;
 }
 
-.panneau-tab-dwPfFm {
+.panneau-tabs-tab {
     position: relative;
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
     gap: var(--panneau-space-2);
     min-height: var(--panneau-control-height);
-    padding: 0 var(--panneau-space-3);
+    padding: 0 var(--panneau-tabs-tab-padding-x, var(--panneau-space-3));
     font-size: var(--panneau-font-size-md);
-    font-weight: var(--panneau-font-weight-medium);
-    color: var(--panneau-color-text-muted);
+    font-weight: var(--panneau-tabs-tab-font-weight, var(--panneau-font-weight-medium));
+    color: var(--panneau-tabs-tab-color, var(--panneau-color-text-muted));
     white-space: nowrap;
     cursor: pointer;
     outline: none;
     -webkit-tap-highlight-color: transparent;
 }
 
-.panneau-tab-dwPfFm::after {
+.panneau-tabs-tab::after {
     position: absolute;
     inset-inline: var(--panneau-space-2);
     bottom: calc(-1 * var(--panneau-border-width));
-    height: 2px;
+    height: var(--panneau-tabs-indicator-height, 2px);
     content: '';
     background-color: transparent;
     border-radius: 2px 2px 0 0;
 }
 
-.panneau-tab-dwPfFm[data-hovered] {
-    color: var(--panneau-color-text);
+.panneau-tabs-tab[data-hovered] {
+    color: var(--panneau-tabs-tab-color-selected, var(--panneau-color-text));
 }
 
-.panneau-tab-dwPfFm[data-selected] {
-    color: var(--panneau-color-text);
+.panneau-tabs-tab[data-selected] {
+    color: var(--panneau-tabs-tab-color-selected, var(--panneau-color-text));
 }
 
-.panneau-tab-dwPfFm[data-selected]::after {
-    background-color: var(--panneau-color-accent);
+.panneau-tabs-tab[data-selected]::after {
+    background-color: var(--panneau-tabs-indicator-color, var(--panneau-color-accent));
 }
 
-.panneau-tab-dwPfFm[data-disabled] {
+.panneau-tabs-tab[data-disabled] {
     cursor: not-allowed;
     opacity: 0.5;
 }
 
-.panneau-tab-dwPfFm[data-focus-visible] {
+.panneau-tabs-tab[data-focus-visible] {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: -2px;
     border-radius: var(--panneau-radius-sm);
 }
 
-.panneau-panel-H3uAcq {
+.panneau-tabs-panel {
     min-width: 0;
     outline: none;
 }
 
-.panneau-panel-H3uAcq[data-focus-visible] {
+.panneau-tabs-panel[data-focus-visible] {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: 2px;
 }
 
-.panneau-panel-H3uAcq[data-inert],
-.panneau-panel-H3uAcq[inert] {
+.panneau-tabs-panel[data-inert],
+.panneau-tabs-panel[inert] {
     display: none;
 }

package/dist/tabs/Tabs.js

@@ -20,7 +20,7 @@ function Tabs$1(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cx(Tabs_module_default.tabs, className);
+		t1 = cx("panneau-tabs", Tabs_module_default.tabs, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -52,7 +52,7 @@ function TabList$1(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cx(Tabs_module_default.list, className);
+		t1 = cx("panneau-tab-list", Tabs_module_default.list, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -84,7 +84,7 @@ function Tab$1(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cx(Tabs_module_default.tab, className);
+		t1 = cx("panneau-tab", Tabs_module_default.tab, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -119,7 +119,7 @@ function TabPanel$1(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cx(Tabs_module_default.panel, className);
+		t1 = cx("panneau-tab-panel", Tabs_module_default.panel, className);
 		$[3] = className;
 		$[4] = t1;
 	} else t1 = $[4];

package/dist/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["Tabs","_c","styles","AriaTabs","TabList","AriaTabList","Tab","AriaTab","TabPanel","AriaTabPanel"],"sources":["../../src/tabs/Tabs.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    Tab as AriaTab,\n    TabList as AriaTabList,\n    type TabListProps as AriaTabListProps,\n    TabPanel as AriaTabPanel,\n    type TabPanelProps as AriaTabPanelProps,\n    type TabProps as AriaTabProps,\n    Tabs as AriaTabs,\n    type TabsProps as AriaTabsProps,\n} from 'react-aria-components';\n\nimport { cx } from '../utils/cx';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style'> {\n    className?: string;\n}\n\n/** Tabs: a `TabList` of `Tab`s, then a `TabPanel` per tab, matched by `id`. */\nexport function Tabs({ className, ...props }: TabsProps) {\n    return <AriaTabs {...props} className={cx(styles.tabs, className)} />;\n}\n\nexport interface TabListProps<T extends object> extends Omit<\n    AriaTabListProps<T>,\n    'className' | 'style'\n> {\n    className?: string;\n}\n\n/** The row of tabs. It scrolls sideways when the tabs don't fit, on phones. */\nexport function TabList<T extends object>({ className, ...props }: TabListProps<T>) {\n    return <AriaTabList {...props} className={cx(styles.list, className)} />;\n}\n\nexport interface TabProps extends Omit<AriaTabProps, 'className' | 'style' | 'children'> {\n    children?: ReactNode;\n    className?: string;\n}\n\n/** A tab. Put a `Badge` in it for a count, such as the errors of the panel. */\nexport function Tab({ className, ...props }: TabProps) {\n    return <AriaTab {...props} className={cx(styles.tab, className)} />;\n}\n\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, 'className' | 'style'> {\n    className?: string;\n}\n\n/**\n * The content of a tab. With `shouldForceMount`, the panel stays mounted (and hidden) when another\n * tab is selected, which keeps the state of its fields.\n */\nexport function TabPanel({ className, ...props }: TabPanelProps) {\n    return <AriaTabPanel {...props} className={cx(styles.panel, className)} />;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["Tabs","_c","styles","AriaTabs","TabList","AriaTabList","Tab","AriaTab","TabPanel","AriaTabPanel"],"sources":["../../src/tabs/Tabs.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    Tab as AriaTab,\n    TabList as AriaTabList,\n    type TabListProps as AriaTabListProps,\n    TabPanel as AriaTabPanel,\n    type TabPanelProps as AriaTabPanelProps,\n    type TabProps as AriaTabProps,\n    Tabs as AriaTabs,\n    type TabsProps as AriaTabsProps,\n} from 'react-aria-components';\n\nimport { cx } from '../utils/cx';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style'> {\n    className?: string;\n}\n\n/** Tabs: a `TabList` of `Tab`s, then a `TabPanel` per tab, matched by `id`. */\nexport function Tabs({ className, ...props }: TabsProps) {\n    return <AriaTabs {...props} className={cx('panneau-tabs', styles.tabs, className)} />;\n}\n\nexport interface TabListProps<T extends object> extends Omit<\n    AriaTabListProps<T>,\n    'className' | 'style'\n> {\n    className?: string;\n}\n\n/** The row of tabs. It scrolls sideways when the tabs don't fit, on phones. */\nexport function TabList<T extends object>({ className, ...props }: TabListProps<T>) {\n    return <AriaTabList {...props} className={cx('panneau-tab-list', styles.list, className)} />;\n}\n\nexport interface TabProps extends Omit<AriaTabProps, 'className' | 'style' | 'children'> {\n    children?: ReactNode;\n    className?: string;\n}\n\n/** A tab. Put a `Badge` in it for a count, such as the errors of the panel. */\nexport function Tab({ className, ...props }: TabProps) {\n    return <AriaTab {...props} className={cx('panneau-tab', styles.tab, className)} />;\n}\n\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, 'className' | 'style'> {\n    className?: string;\n}\n\n/**\n * The content of a tab. With `shouldForceMount`, the panel stays mounted (and hidden) when another\n * tab is selected, which keeps the state of its fields.\n */\nexport function TabPanel({ className, ...props }: TabPanelProps) {\n    return <AriaTabPanel {...props} className={cx('panneau-tab-panel', styles.panel, className)} />;\n}\n"],"mappings":"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"}

package/dist/tabs/Tabs.module.js

@@ -1,9 +1,9 @@
 import "./Tabs.css";
 //#region src/tabs/Tabs.module.css
-var tabs = "panneau-tabs-JqDxcK";
-var list = "panneau-list-uiIzNm";
-var tab = "panneau-tab-dwPfFm";
-var panel = "panneau-panel-H3uAcq";
+var tabs = "panneau-tabs";
+var list = "panneau-tabs-list";
+var tab = "panneau-tabs-tab";
+var panel = "panneau-tabs-panel";
 var Tabs_module_default = {
 	tabs,
 	list,