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

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,

package/dist/tabs/Tabs.module.js.map

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

package/dist/tabs/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Tabs. */
+export declare const tabsTokens: import("..").ComponentTokens<"tabs", "panneau-tabs-gap" | "panneau-tabs-border-color" | "panneau-tabs-tab-padding-x" | "panneau-tabs-tab-font-weight" | "panneau-tabs-tab-color" | "panneau-tabs-indicator-height" | "panneau-tabs-tab-color-selected" | "panneau-tabs-indicator-color">;
+//# sourceMappingURL=tokens.d.ts.map

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

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

package/dist/tabs/tokens.js

@@ -0,0 +1,25 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/tabs/tokens.ts
+/** Tokens of Tabs. */
+var tabsTokens = defineComponentTokens("tabs", {
+	/** Space between the tab list and the panel. */
+	gap: "var(--panneau-space-4)",
+	/** Color of the line under the tab list. */
+	"border-color": "var(--panneau-color-border)",
+	/** Horizontal padding of a tab. */
+	"tab-padding-x": "var(--panneau-space-3)",
+	/** Font weight of a tab. */
+	"tab-font-weight": "var(--panneau-font-weight-medium)",
+	/** Text color of a tab. */
+	"tab-color": "var(--panneau-color-text-muted)",
+	/** Height of the indicator under the selected tab. */
+	"indicator-height": "2px",
+	/** Text color of a hovered or selected tab. */
+	"tab-color-selected": "var(--panneau-color-text)",
+	/** Color of the indicator under the selected tab. */
+	"indicator-color": "var(--panneau-color-accent)"
+});
+//#endregion
+export { tabsTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/tabs/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/tabs/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Tabs. */\nexport const tabsTokens = defineComponentTokens('tabs', {\n    /** Space between the tab list and the panel. */\n    gap: 'var(--panneau-space-4)',\n    /** Color of the line under the tab list. */\n    'border-color': 'var(--panneau-color-border)',\n    /** Horizontal padding of a tab. */\n    'tab-padding-x': 'var(--panneau-space-3)',\n    /** Font weight of a tab. */\n    'tab-font-weight': 'var(--panneau-font-weight-medium)',\n    /** Text color of a tab. */\n    'tab-color': 'var(--panneau-color-text-muted)',\n    /** Height of the indicator under the selected tab. */\n    'indicator-height': '2px',\n    /** Text color of a hovered or selected tab. */\n    'tab-color-selected': 'var(--panneau-color-text)',\n    /** Color of the indicator under the selected tab. */\n    'indicator-color': 'var(--panneau-color-accent)',\n});\n"],"mappings":";;;AAGA,IAAa,aAAa,sBAAsB,QAAQ;;CAEpD,KAAK;;CAEL,gBAAgB;;CAEhB,iBAAiB;;CAEjB,mBAAmB;;CAEnB,aAAa;;CAEb,oBAAoB;;CAEpB,sBAAsB;;CAEtB,mBAAmB;AACvB,CAAC"}

package/dist/text/Text.css

@@ -0,0 +1,74 @@
+/* Text: sizes, weights and families of the theme, as modifiers. */
+
+.panneau-text {
+    margin: 0;
+}
+
+.panneau-text-size-xs {
+    font-size: var(--panneau-font-size-xs);
+}
+
+.panneau-text-size-sm {
+    font-size: var(--panneau-font-size-sm);
+}
+
+.panneau-text-size-md {
+    font-size: var(--panneau-font-size-md);
+}
+
+.panneau-text-size-lg {
+    font-size: var(--panneau-font-size-lg);
+}
+
+.panneau-text-size-xl {
+    font-size: var(--panneau-font-size-xl);
+}
+
+.panneau-text-weight-normal {
+    font-weight: var(--panneau-font-weight-normal);
+}
+
+.panneau-text-weight-medium {
+    font-weight: var(--panneau-font-weight-medium);
+}
+
+.panneau-text-weight-bold {
+    font-weight: var(--panneau-font-weight-bold);
+}
+
+.panneau-text-family-body {
+    font-family: var(--panneau-font-family-body);
+}
+
+.panneau-text-family-heading {
+    font-family: var(--panneau-font-family-heading);
+}
+
+.panneau-text-family-display {
+    font-family: var(--panneau-font-family-display);
+}
+
+.panneau-text-family-mono {
+    font-family: var(--panneau-font-family-mono);
+}
+
+.panneau-text-muted {
+    color: var(--panneau-text-muted-color, var(--panneau-color-text-muted));
+}
+
+/* A tone colors the text with the tone's text color, readable on surfaces. */
+.panneau-text-toned {
+    color: var(--panneau-tone-text);
+}
+
+.panneau-text-numeric {
+    font-variant-numeric: var(--panneau-font-numeric);
+}
+
+/* One line, cut with an ellipsis: the element needs a constrained width (a block, a flex item). */
+.panneau-text-truncate {
+    overflow: hidden;
+    min-width: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/dist/text/Text.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'react';
+import type { Tone } from '../theme/tones';
+/** A size of the font scale of the theme. */
+export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** A font role of the theme. */
+export type TextFamily = 'body' | 'heading' | 'display' | 'mono';
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to `p`. */
+    as?: 'p' | 'span' | 'div' | 'small' | 'strong' | 'em';
+    /** Font size, from the scale of the theme. Inherited by default. */
+    size?: TextSize;
+    /** Inherited by default. */
+    weight?: 'normal' | 'medium' | 'bold';
+    /** Font role. Inherited by default. */
+    family?: TextFamily;
+    /** Colors the text with a tone (`success`, `danger`…), readable on surfaces. */
+    tone?: Tone;
+    /** The muted text color, for secondary information. */
+    muted?: boolean;
+    /** Digits of equal width, so that numbers line up: stats, dates, ids. */
+    numeric?: boolean;
+    /** Keeps the text on one line, cut with an ellipsis. */
+    truncate?: boolean;
+}
+/** Text in the sizes, weights and font roles of the theme. */
+export declare function Text({ as: Element, size, weight, family, tone, muted, numeric, truncate, className, ...props }: TextProps): import("react").JSX.Element;
+//# sourceMappingURL=Text.d.ts.map

package/dist/text/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAI3C,6CAA6C;AAC7C,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,gCAAgC;AAChC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjE,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC1D,0CAA0C;IAC1C,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAC;IACtD,oEAAoE;IACpE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACtC,uCAAuC;IACvC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,gFAAgF;IAChF,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,uDAAuD;IACvD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,8DAA8D;AAC9D,wBAAgB,IAAI,CAAC,EACjB,EAAE,EAAE,OAAa,EACjB,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAa,EACb,OAAe,EACf,QAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,SAAS,+BAmBX"}

package/dist/text/Text.js

@@ -0,0 +1,16 @@
+import { cx } from "../utils/cx.js";
+import { toneClass } from "../theme/toneClass.js";
+import Text_module_default from "./Text.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/text/Text.tsx
+/** Text in the sizes, weights and font roles of the theme. */
+function Text({ as: Element = "p", size, weight, family, tone, muted = false, numeric = false, truncate = false, className, ...props }) {
+	return /* @__PURE__ */ jsx(Element, {
+		...props,
+		className: cx("panneau-text", Text_module_default.text, size !== void 0 && Text_module_default[`size-${size}`], weight !== void 0 && Text_module_default[`weight-${weight}`], family !== void 0 && Text_module_default[`family-${family}`], tone !== void 0 && toneClass(tone), tone !== void 0 && Text_module_default.toned, muted && Text_module_default.muted, numeric && Text_module_default.numeric, truncate && Text_module_default.truncate, className)
+	});
+}
+//#endregion
+export { Text };
+
+//# sourceMappingURL=Text.js.map

package/dist/text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","names":["styles"],"sources":["../../src/text/Text.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport { toneClass } from '../theme/toneClass';\nimport type { Tone } from '../theme/tones';\nimport { cx } from '../utils/cx';\nimport styles from './Text.module.css';\n\n/** A size of the font scale of the theme. */\nexport type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** A font role of the theme. */\nexport type TextFamily = 'body' | 'heading' | 'display' | 'mono';\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n    /** Element to render. Defaults to `p`. */\n    as?: 'p' | 'span' | 'div' | 'small' | 'strong' | 'em';\n    /** Font size, from the scale of the theme. Inherited by default. */\n    size?: TextSize;\n    /** Inherited by default. */\n    weight?: 'normal' | 'medium' | 'bold';\n    /** Font role. Inherited by default. */\n    family?: TextFamily;\n    /** Colors the text with a tone (`success`, `danger`…), readable on surfaces. */\n    tone?: Tone;\n    /** The muted text color, for secondary information. */\n    muted?: boolean;\n    /** Digits of equal width, so that numbers line up: stats, dates, ids. */\n    numeric?: boolean;\n    /** Keeps the text on one line, cut with an ellipsis. */\n    truncate?: boolean;\n}\n\n/** Text in the sizes, weights and font roles of the theme. */\nexport function Text({\n    as: Element = 'p',\n    size,\n    weight,\n    family,\n    tone,\n    muted = false,\n    numeric = false,\n    truncate = false,\n    className,\n    ...props\n}: TextProps) {\n    return (\n        <Element\n            {...props}\n            className={cx(\n                'panneau-text',\n                styles.text,\n                size !== undefined && styles[`size-${size}`],\n                weight !== undefined && styles[`weight-${weight}`],\n                family !== undefined && styles[`family-${family}`],\n                tone !== undefined && toneClass(tone),\n                tone !== undefined && styles.toned,\n                muted && styles.muted,\n                numeric && styles.numeric,\n                truncate && styles.truncate,\n                className,\n            )}\n        />\n    );\n}\n"],"mappings":";;;;;;AAiCA,SAAgB,KAAK,EACjB,IAAI,UAAU,KACd,MACA,QACA,QACA,MACA,QAAQ,OACR,UAAU,OACV,WAAW,OACX,WACA,GAAG,SACO;CACV,OACI,oBAAC,SAAD;EACI,GAAI;EACJ,WAAW,GACP,gBACAA,oBAAO,MACP,SAAS,KAAA,KAAaA,oBAAO,QAAQ,SACrC,WAAW,KAAA,KAAaA,oBAAO,UAAU,WACzC,WAAW,KAAA,KAAaA,oBAAO,UAAU,WACzC,SAAS,KAAA,KAAa,UAAU,IAAI,GACpC,SAAS,KAAA,KAAaA,oBAAO,OAC7B,SAASA,oBAAO,OAChB,WAAWA,oBAAO,SAClB,YAAYA,oBAAO,UACnB,SACJ;CAAE,CAAA;AAGd"}

package/dist/text/Text.module.js

@@ -0,0 +1,30 @@
+import "./Text.css";
+//#region src/text/Text.module.css
+var text = "panneau-text";
+var muted = "panneau-text-muted";
+var toned = "panneau-text-toned";
+var numeric = "panneau-text-numeric";
+var truncate = "panneau-text-truncate";
+var Text_module_default = {
+	text,
+	"size-xs": "panneau-text-size-xs",
+	"size-sm": "panneau-text-size-sm",
+	"size-md": "panneau-text-size-md",
+	"size-lg": "panneau-text-size-lg",
+	"size-xl": "panneau-text-size-xl",
+	"weight-normal": "panneau-text-weight-normal",
+	"weight-medium": "panneau-text-weight-medium",
+	"weight-bold": "panneau-text-weight-bold",
+	"family-body": "panneau-text-family-body",
+	"family-heading": "panneau-text-family-heading",
+	"family-display": "panneau-text-family-display",
+	"family-mono": "panneau-text-family-mono",
+	muted,
+	toned,
+	numeric,
+	truncate
+};
+//#endregion
+export { Text_module_default as default, muted, numeric, text, toned, truncate };
+
+//# sourceMappingURL=Text.module.js.map

package/dist/text/Text.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.module.js","names":[],"sources":["../../src/text/Text.module.css"],"sourcesContent":["/* Text: sizes, weights and families of the theme, as modifiers. */\n\n.text {\n    margin: 0;\n}\n\n.size-xs {\n    font-size: var(--panneau-font-size-xs);\n}\n\n.size-sm {\n    font-size: var(--panneau-font-size-sm);\n}\n\n.size-md {\n    font-size: var(--panneau-font-size-md);\n}\n\n.size-lg {\n    font-size: var(--panneau-font-size-lg);\n}\n\n.size-xl {\n    font-size: var(--panneau-font-size-xl);\n}\n\n.weight-normal {\n    font-weight: var(--panneau-font-weight-normal);\n}\n\n.weight-medium {\n    font-weight: var(--panneau-font-weight-medium);\n}\n\n.weight-bold {\n    font-weight: var(--panneau-font-weight-bold);\n}\n\n.family-body {\n    font-family: var(--panneau-font-family-body);\n}\n\n.family-heading {\n    font-family: var(--panneau-font-family-heading);\n}\n\n.family-display {\n    font-family: var(--panneau-font-family-display);\n}\n\n.family-mono {\n    font-family: var(--panneau-font-family-mono);\n}\n\n.muted {\n    color: var(--panneau-text-muted-color, var(--panneau-color-text-muted));\n}\n\n/* A tone colors the text with the tone's text color, readable on surfaces. */\n.toned {\n    color: var(--panneau-tone-text);\n}\n\n.numeric {\n    font-variant-numeric: var(--panneau-font-numeric);\n}\n\n/* One line, cut with an ellipsis: the element needs a constrained width (a block, a flex item). */\n.truncate {\n    overflow: hidden;\n    min-width: 0;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n"],"mappings":""}

package/dist/text/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Text. */
+export declare const textTokens: import("..").ComponentTokens<"text", "panneau-text-muted-color">;
+//# sourceMappingURL=tokens.d.ts.map

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

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

package/dist/text/tokens.js

@@ -0,0 +1,10 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/text/tokens.ts
+/** Tokens of Text. */
+var textTokens = defineComponentTokens("text", { 
+/** Color of muted text. */
+"muted-color": "var(--panneau-color-text-muted)" });
+//#endregion
+export { textTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/text/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/text/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Text. */\nexport const textTokens = defineComponentTokens('text', {\n    /** Color of muted text. */\n    'muted-color': 'var(--panneau-color-text-muted)',\n});\n"],"mappings":";;;AAGA,IAAa,aAAa,sBAAsB,QAAQ;;AAEpD,eAAe,kCACnB,CAAC"}

package/dist/text-area/TextArea.css

@@ -1,5 +1,5 @@
 /* Doubled class: overrides the shared control, whatever the CSS order. */
-.panneau-textArea-ET01uE.panneau-textArea-ET01uE {
+.panneau-text-area.panneau-text-area {
     display: block;
     min-height: calc(var(--panneau-control-height) * 2);
     padding: var(--panneau-space-2) var(--panneau-space-3);

package/dist/text-area/TextArea.js

@@ -12,7 +12,7 @@ function TextArea$1({ label, description, errors = [], placeholder, rows = 4, cl
 		isRequired,
 		isInvalid: errors.length > 0,
 		validationBehavior: "aria",
-		className: cx(Field_module_default.field, className),
+		className: cx("panneau-text-area", Field_module_default.field, className),
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, {
 				isRequired,

package/dist/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["TextArea","fieldStyles","AriaTextArea","styles"],"sources":["../../src/text-area/TextArea.tsx"],"sourcesContent":["import {\n    TextArea as AriaTextArea,\n    type TextFieldProps as AriaTextFieldProps,\n    TextField,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps\n    extends\n        Omit<AriaTextFieldProps, 'className' | 'style' | 'children' | 'isInvalid' | 'validate'>,\n        FieldChromeProps {\n    placeholder?: string;\n    /** Visible lines of text. Defaults to 4. */\n    rows?: number;\n    textAreaClassName?: string;\n}\n\n/** A multi-line text input with its label, description and errors. */\nexport function TextArea({\n    label,\n    description,\n    errors = [],\n    placeholder,\n    rows = 4,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    textAreaClassName,\n    isRequired,\n    ...props\n}: TextAreaProps) {\n    return (\n        <TextField\n            {...props}\n            isRequired={isRequired}\n            isInvalid={errors.length > 0}\n            validationBehavior=\"aria\"\n            className={cx(fieldStyles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <AriaTextArea\n                placeholder={placeholder}\n                rows={rows}\n                className={cx(fieldStyles.control, styles.textArea, textAreaClassName)}\n            />\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </TextField>\n    );\n}\n"],"mappings":";;;;;;;;AA2BA,SAAgBA,WAAS,EACrB,OACA,aACA,SAAS,CAAA,GACT,aACA,OAAO,GACP,WACA,gBACA,sBACA,iBACA,mBACA,YACA,GAAG,SACW;CACd,OACI,qBAAC,WAAD;EACI,GAAI;EACQ;EACZ,WAAW,OAAO,SAAS;EAC3B,oBAAmB;EACnB,WAAW,GAAGC,qBAAY,OAAO,SAAS;EAL9C,UAAA;GAOI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,oBAACC,UAAD;IACiB;IACP;IACN,WAAW,GAAGD,qBAAY,SAASE,wBAAO,UAAU,iBAAiB;GAAE,CAAA;GAE3E,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EACjD;;AAEnB"}
+{"version":3,"file":"TextArea.js","names":["TextArea","fieldStyles","AriaTextArea","styles"],"sources":["../../src/text-area/TextArea.tsx"],"sourcesContent":["import {\n    TextArea as AriaTextArea,\n    type TextFieldProps as AriaTextFieldProps,\n    TextField,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps\n    extends\n        Omit<AriaTextFieldProps, 'className' | 'style' | 'children' | 'isInvalid' | 'validate'>,\n        FieldChromeProps {\n    placeholder?: string;\n    /** Visible lines of text. Defaults to 4. */\n    rows?: number;\n    textAreaClassName?: string;\n}\n\n/** A multi-line text input with its label, description and errors. */\nexport function TextArea({\n    label,\n    description,\n    errors = [],\n    placeholder,\n    rows = 4,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    textAreaClassName,\n    isRequired,\n    ...props\n}: TextAreaProps) {\n    return (\n        <TextField\n            {...props}\n            isRequired={isRequired}\n            isInvalid={errors.length > 0}\n            validationBehavior=\"aria\"\n            className={cx('panneau-text-area', fieldStyles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <AriaTextArea\n                placeholder={placeholder}\n                rows={rows}\n                className={cx(fieldStyles.control, styles.textArea, textAreaClassName)}\n            />\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </TextField>\n    );\n}\n"],"mappings":";;;;;;;;AA2BA,SAAgBA,WAAS,EACrB,OACA,aACA,SAAS,CAAA,GACT,aACA,OAAO,GACP,WACA,gBACA,sBACA,iBACA,mBACA,YACA,GAAG,SACW;CACd,OACI,qBAAC,WAAD;EACI,GAAI;EACQ;EACZ,WAAW,OAAO,SAAS;EAC3B,oBAAmB;EACnB,WAAW,GAAG,qBAAqBC,qBAAY,OAAO,SAAS;EALnE,UAAA;GAOI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,oBAACC,UAAD;IACiB;IACP;IACN,WAAW,GAAGD,qBAAY,SAASE,wBAAO,UAAU,iBAAiB;GAAE,CAAA;GAE3E,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EACjD;;AAEnB"}

package/dist/text-area/TextArea.module.js

@@ -1,6 +1,6 @@
 import "./TextArea.css";
 //#region src/text-area/TextArea.module.css
-var textArea = "panneau-textArea-ET01uE";
+var textArea = "panneau-text-area";
 var TextArea_module_default = { textArea };
 //#endregion
 export { TextArea_module_default as default, textArea };

package/dist/text-input/TextInput.js

@@ -14,7 +14,7 @@ function TextInput({ label, description, errors = [], placeholder, prefix, suffi
 		isReadOnly,
 		isInvalid: invalid,
 		validationBehavior: "aria",
-		className: cx(Field_module_default.field, className),
+		className: cx("panneau-text-input", Field_module_default.field, className),
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, {
 				isRequired,

package/dist/text-input/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","names":["styles"],"sources":["../../src/text-input/TextInput.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    type TextFieldProps as AriaTextFieldProps,\n    Group,\n    Input,\n    TextField,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles as styles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\n\nexport interface TextInputProps\n    extends\n        Omit<\n            AriaTextFieldProps,\n            'className' | 'style' | 'children' | 'isInvalid' | 'validate' | 'type'\n        >,\n        FieldChromeProps {\n    type?: 'text' | 'email' | 'url' | 'tel' | 'password' | 'search';\n    placeholder?: string;\n    /** Content before the text, inside the control: a unit, a URL prefix, an icon. */\n    prefix?: ReactNode;\n    /** Content after the text, inside the control. */\n    suffix?: ReactNode;\n    /** Class name of the control (the box around the text). */\n    controlClassName?: string;\n    inputClassName?: string;\n}\n\n/** A single-line text input with its label, description and errors. */\nexport function TextInput({\n    label,\n    description,\n    errors = [],\n    placeholder,\n    prefix,\n    suffix,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    inputClassName,\n    isRequired,\n    isReadOnly,\n    ...props\n}: TextInputProps) {\n    const invalid = errors.length > 0;\n    const adorned = prefix !== undefined || suffix !== undefined;\n    return (\n        <TextField\n            {...props}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\n            isInvalid={invalid}\n            validationBehavior=\"aria\"\n            className={cx(styles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            {adorned ? (\n                <Group\n                    className={cx(styles.control, controlClassName)}\n                    data-invalid={invalid || undefined}\n                    data-readonly={isReadOnly || undefined}\n                    isDisabled={props.isDisabled}\n                >\n                    {prefix !== undefined ? (\n                        <span className={styles.adornment}>{prefix}</span>\n                    ) : null}\n                    <Input placeholder={placeholder} className={cx(styles.bare, inputClassName)} />\n                    {suffix !== undefined ? (\n                        <span className={styles.adornment}>{suffix}</span>\n                    ) : null}\n                </Group>\n            ) : (\n                <Input\n                    placeholder={placeholder}\n                    className={cx(styles.control, controlClassName, inputClassName)}\n                />\n            )}\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </TextField>\n    );\n}\n"],"mappings":";;;;;;;AAoCA,SAAgB,UAAU,EACtB,OACA,aACA,SAAS,CAAA,GACT,aACA,QACA,QACA,WACA,gBACA,sBACA,iBACA,kBACA,gBACA,YACA,YACA,GAAG,SACY;CACf,MAAM,UAAU,OAAO,SAAS;CAChC,MAAM,UAAU,WAAW,KAAA,KAAa,WAAW,KAAA;CACnD,OACI,qBAAC,WAAD;EACI,GAAI;EACQ;EACA;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAGA,qBAAO,OAAO,SAAS;EANzC,UAAA;GAQI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACX,UACG,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAO,SAAS,gBAAgB;IAC9C,gBAAc,WAAW,KAAA;IACzB,iBAAe,cAAc,KAAA;IAC7B,YAAY,MAAM;IAJtB,UAAA;KAMK,WAAW,KAAA,IACR,oBAAC,QAAD;MAAM,WAAWA,qBAAO;MAAY,UAAA;KAAa,CAAA,IACjD;KACJ,oBAAC,OAAD;MAAoB;MAAa,WAAW,GAAGA,qBAAO,MAAM,cAAc;KAAE,CAAA;KAC3E,WAAW,KAAA,IACR,oBAAC,QAAD;MAAM,WAAWA,qBAAO;MAAY,UAAA;KAAa,CAAA,IACjD;IACD;GAEP,CAAA,IAAA,oBAAC,OAAD;IACiB;IACb,WAAW,GAAGA,qBAAO,SAAS,kBAAkB,cAAc;GAAE,CAAA;GAGxE,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EACjD;;AAEnB"}
+{"version":3,"file":"TextInput.js","names":["styles"],"sources":["../../src/text-input/TextInput.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    type TextFieldProps as AriaTextFieldProps,\n    Group,\n    Input,\n    TextField,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles as styles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\n\nexport interface TextInputProps\n    extends\n        Omit<\n            AriaTextFieldProps,\n            'className' | 'style' | 'children' | 'isInvalid' | 'validate' | 'type'\n        >,\n        FieldChromeProps {\n    type?: 'text' | 'email' | 'url' | 'tel' | 'password' | 'search';\n    placeholder?: string;\n    /** Content before the text, inside the control: a unit, a URL prefix, an icon. */\n    prefix?: ReactNode;\n    /** Content after the text, inside the control. */\n    suffix?: ReactNode;\n    /** Class name of the control (the box around the text). */\n    controlClassName?: string;\n    inputClassName?: string;\n}\n\n/** A single-line text input with its label, description and errors. */\nexport function TextInput({\n    label,\n    description,\n    errors = [],\n    placeholder,\n    prefix,\n    suffix,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    inputClassName,\n    isRequired,\n    isReadOnly,\n    ...props\n}: TextInputProps) {\n    const invalid = errors.length > 0;\n    const adorned = prefix !== undefined || suffix !== undefined;\n    return (\n        <TextField\n            {...props}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\n            isInvalid={invalid}\n            validationBehavior=\"aria\"\n            className={cx('panneau-text-input', styles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            {adorned ? (\n                <Group\n                    className={cx(styles.control, controlClassName)}\n                    data-invalid={invalid || undefined}\n                    data-readonly={isReadOnly || undefined}\n                    isDisabled={props.isDisabled}\n                >\n                    {prefix !== undefined ? (\n                        <span className={styles.adornment}>{prefix}</span>\n                    ) : null}\n                    <Input placeholder={placeholder} className={cx(styles.bare, inputClassName)} />\n                    {suffix !== undefined ? (\n                        <span className={styles.adornment}>{suffix}</span>\n                    ) : null}\n                </Group>\n            ) : (\n                <Input\n                    placeholder={placeholder}\n                    className={cx(styles.control, controlClassName, inputClassName)}\n                />\n            )}\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </TextField>\n    );\n}\n"],"mappings":";;;;;;;AAoCA,SAAgB,UAAU,EACtB,OACA,aACA,SAAS,CAAA,GACT,aACA,QACA,QACA,WACA,gBACA,sBACA,iBACA,kBACA,gBACA,YACA,YACA,GAAG,SACY;CACf,MAAM,UAAU,OAAO,SAAS;CAChC,MAAM,UAAU,WAAW,KAAA,KAAa,WAAW,KAAA;CACnD,OACI,qBAAC,WAAD;EACI,GAAI;EACQ;EACA;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAG,sBAAsBA,qBAAO,OAAO,SAAS;EAN/D,UAAA;GAQI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACX,UACG,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAO,SAAS,gBAAgB;IAC9C,gBAAc,WAAW,KAAA;IACzB,iBAAe,cAAc,KAAA;IAC7B,YAAY,MAAM;IAJtB,UAAA;KAMK,WAAW,KAAA,IACR,oBAAC,QAAD;MAAM,WAAWA,qBAAO;MAAY,UAAA;KAAa,CAAA,IACjD;KACJ,oBAAC,OAAD;MAAoB;MAAa,WAAW,GAAGA,qBAAO,MAAM,cAAc;KAAE,CAAA;KAC3E,WAAW,KAAA,IACR,oBAAC,QAAD;MAAM,WAAWA,qBAAO;MAAY,UAAA;KAAa,CAAA,IACjD;IACD;GAEP,CAAA,IAAA,oBAAC,OAAD;IACiB;IACb,WAAW,GAAGA,qBAAO,SAAS,kBAAkB,cAAc;GAAE,CAAA;GAGxE,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EACjD;;AAEnB"}

package/dist/theme/Tone.css

@@ -0,0 +1,70 @@
+/*
+ * Built-in tones (decision 0024): each one sets the local --panneau-tone-* variables that
+ * components read, from the semantic tokens of the theme, so they follow the theme and the color
+ * scheme. A theme's own tones are written by getThemeCss() with the same class names
+ * (panneau-tone-<name>), and can redefine these.
+ */
+
+.panneau-tone-neutral {
+    --panneau-tone-text: var(--panneau-color-text);
+    --panneau-tone-subtle: var(--panneau-color-surface-sunken);
+    --panneau-tone-border: var(--panneau-color-border);
+    --panneau-tone-outline: var(--panneau-color-border-control);
+    --panneau-tone-solid: var(--panneau-color-text);
+    --panneau-tone-solid-hover: var(--panneau-color-text-muted);
+    --panneau-tone-solid-text: var(--panneau-color-bg);
+}
+
+.panneau-tone-accent {
+    --panneau-tone-text: var(--panneau-color-accent);
+    --panneau-tone-subtle: var(--panneau-color-accent-subtle);
+    --panneau-tone-border: color-mix(
+        in srgb,
+        var(--panneau-color-accent) 35%,
+        var(--panneau-color-surface)
+    );
+    --panneau-tone-outline: var(--panneau-color-accent);
+    --panneau-tone-solid: var(--panneau-color-accent);
+    --panneau-tone-solid-hover: var(--panneau-color-accent-hover);
+    --panneau-tone-solid-text: var(--panneau-color-accent-text);
+}
+
+.panneau-tone-success {
+    --panneau-tone-text: var(--panneau-color-success);
+    --panneau-tone-subtle: var(--panneau-color-success-subtle);
+    --panneau-tone-border: var(--panneau-color-success-border);
+    --panneau-tone-outline: var(--panneau-color-success);
+    --panneau-tone-solid: var(--panneau-color-success-solid);
+    --panneau-tone-solid-hover: var(--panneau-color-success-solid-hover);
+    --panneau-tone-solid-text: var(--panneau-color-success-solid-text);
+}
+
+.panneau-tone-warning {
+    --panneau-tone-text: var(--panneau-color-warning);
+    --panneau-tone-subtle: var(--panneau-color-warning-subtle);
+    --panneau-tone-border: var(--panneau-color-warning-border);
+    --panneau-tone-outline: var(--panneau-color-warning);
+    --panneau-tone-solid: var(--panneau-color-warning-solid);
+    --panneau-tone-solid-hover: var(--panneau-color-warning-solid-hover);
+    --panneau-tone-solid-text: var(--panneau-color-warning-solid-text);
+}
+
+.panneau-tone-danger {
+    --panneau-tone-text: var(--panneau-color-danger);
+    --panneau-tone-subtle: var(--panneau-color-danger-subtle);
+    --panneau-tone-border: var(--panneau-color-danger-border);
+    --panneau-tone-outline: var(--panneau-color-danger);
+    --panneau-tone-solid: var(--panneau-color-danger-solid);
+    --panneau-tone-solid-hover: var(--panneau-color-danger-solid-hover);
+    --panneau-tone-solid-text: var(--panneau-color-danger-solid-text);
+}
+
+.panneau-tone-info {
+    --panneau-tone-text: var(--panneau-color-info);
+    --panneau-tone-subtle: var(--panneau-color-info-subtle);
+    --panneau-tone-border: var(--panneau-color-info-border);
+    --panneau-tone-outline: var(--panneau-color-info);
+    --panneau-tone-solid: var(--panneau-color-info-solid);
+    --panneau-tone-solid-hover: var(--panneau-color-info-solid-hover);
+    --panneau-tone-solid-text: var(--panneau-color-info-solid-text);
+}

package/dist/theme/Tone.module.js

@@ -0,0 +1,20 @@
+import "./Tone.css";
+//#region src/theme/Tone.module.css
+var neutral = "panneau-tone-neutral";
+var accent = "panneau-tone-accent";
+var success = "panneau-tone-success";
+var warning = "panneau-tone-warning";
+var danger = "panneau-tone-danger";
+var info = "panneau-tone-info";
+var Tone_module_default = {
+	neutral,
+	accent,
+	success,
+	warning,
+	danger,
+	info
+};
+//#endregion
+export { accent, danger, Tone_module_default as default, info, neutral, success, warning };
+
+//# sourceMappingURL=Tone.module.js.map

package/dist/theme/Tone.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tone.module.js","names":[],"sources":["../../src/theme/Tone.module.css"],"sourcesContent":["/*\n * Built-in tones (decision 0024): each one sets the local --panneau-tone-* variables that\n * components read, from the semantic tokens of the theme, so they follow the theme and the color\n * scheme. A theme's own tones are written by getThemeCss() with the same class names\n * (panneau-tone-<name>), and can redefine these.\n */\n\n.neutral {\n    --panneau-tone-text: var(--panneau-color-text);\n    --panneau-tone-subtle: var(--panneau-color-surface-sunken);\n    --panneau-tone-border: var(--panneau-color-border);\n    --panneau-tone-outline: var(--panneau-color-border-control);\n    --panneau-tone-solid: var(--panneau-color-text);\n    --panneau-tone-solid-hover: var(--panneau-color-text-muted);\n    --panneau-tone-solid-text: var(--panneau-color-bg);\n}\n\n.accent {\n    --panneau-tone-text: var(--panneau-color-accent);\n    --panneau-tone-subtle: var(--panneau-color-accent-subtle);\n    --panneau-tone-border: color-mix(\n        in srgb,\n        var(--panneau-color-accent) 35%,\n        var(--panneau-color-surface)\n    );\n    --panneau-tone-outline: var(--panneau-color-accent);\n    --panneau-tone-solid: var(--panneau-color-accent);\n    --panneau-tone-solid-hover: var(--panneau-color-accent-hover);\n    --panneau-tone-solid-text: var(--panneau-color-accent-text);\n}\n\n.success {\n    --panneau-tone-text: var(--panneau-color-success);\n    --panneau-tone-subtle: var(--panneau-color-success-subtle);\n    --panneau-tone-border: var(--panneau-color-success-border);\n    --panneau-tone-outline: var(--panneau-color-success);\n    --panneau-tone-solid: var(--panneau-color-success-solid);\n    --panneau-tone-solid-hover: var(--panneau-color-success-solid-hover);\n    --panneau-tone-solid-text: var(--panneau-color-success-solid-text);\n}\n\n.warning {\n    --panneau-tone-text: var(--panneau-color-warning);\n    --panneau-tone-subtle: var(--panneau-color-warning-subtle);\n    --panneau-tone-border: var(--panneau-color-warning-border);\n    --panneau-tone-outline: var(--panneau-color-warning);\n    --panneau-tone-solid: var(--panneau-color-warning-solid);\n    --panneau-tone-solid-hover: var(--panneau-color-warning-solid-hover);\n    --panneau-tone-solid-text: var(--panneau-color-warning-solid-text);\n}\n\n.danger {\n    --panneau-tone-text: var(--panneau-color-danger);\n    --panneau-tone-subtle: var(--panneau-color-danger-subtle);\n    --panneau-tone-border: var(--panneau-color-danger-border);\n    --panneau-tone-outline: var(--panneau-color-danger);\n    --panneau-tone-solid: var(--panneau-color-danger-solid);\n    --panneau-tone-solid-hover: var(--panneau-color-danger-solid-hover);\n    --panneau-tone-solid-text: var(--panneau-color-danger-solid-text);\n}\n\n.info {\n    --panneau-tone-text: var(--panneau-color-info);\n    --panneau-tone-subtle: var(--panneau-color-info-subtle);\n    --panneau-tone-border: var(--panneau-color-info-border);\n    --panneau-tone-outline: var(--panneau-color-info);\n    --panneau-tone-solid: var(--panneau-color-info-solid);\n    --panneau-tone-solid-hover: var(--panneau-color-info-solid-hover);\n    --panneau-tone-solid-text: var(--panneau-color-info-solid-text);\n}\n"],"mappings":""}

package/dist/theme/bootstrap.d.ts

@@ -1,4 +1,14 @@
 import type { Theme } from './theme';
+import type { ToneValues } from './tones';
+/**
+ * A tone from one of Bootstrap's theme colors, read from its CSS variables (`--bs-<color>`,
+ * `-text-emphasis`, `-bg-subtle`, `-border-subtle`), so that a site's custom colors carry over:
+ * `tones: { brand: bootstrapTone('brand') }`. Text on the subtle background uses the emphasis
+ * color, as Bootstrap's alerts do. Light colors need dark solid text: `{ solidText: 'var(--bs-dark)' }`.
+ */
+export declare function bootstrapTone(color: string, { solidText }?: {
+    solidText?: string;
+}): ToneValues;
 /**
  * Maps Panneau's tokens to the CSS variables of Bootstrap 5.3, for sites that use Bootstrap: Panneau
  * then follows the site's colors, fonts and radii, and its color mode (`data-bs-theme`), without