@panneau/fields 5.0.0-alpha.2 → 5.0.0-alpha.20

package/dist/boolean/BooleanField.js

@@ -4,23 +4,84 @@ import { Checkbox, Switch } from "@panneau/ui";
 import { jsx } from "react/jsx-runtime";
 //#region src/boolean/BooleanField.tsx
 /** A yes or no value, as a checkbox or a switch with its label. An empty value is `false`. */
-function BooleanField({ value, onChange, label, widget = "checkbox", disabled, readOnly, required, controlClassName, ...props }) {
-	const shared = {
-		...props,
-		isSelected: value === true,
-		onChange: (next) => onChange?.(next),
-		isDisabled: disabled,
-		isReadOnly: readOnly,
-		isRequired: required,
-		children: label
-	};
-	return widget === "switch" ? /* @__PURE__ */ jsx(Switch, {
-		...shared,
-		switchClassName: controlClassName
-	}) : /* @__PURE__ */ jsx(Checkbox, {
-		...shared,
-		checkboxClassName: controlClassName
-	});
+function BooleanField(t0) {
+	const $ = c(24);
+	let controlClassName;
+	let disabled;
+	let label;
+	let onChange;
+	let props;
+	let readOnly;
+	let required;
+	let t1;
+	let value;
+	if ($[0] !== t0) {
+		({value, onChange, label, widget: t1, disabled, readOnly, required, controlClassName, ...props} = t0);
+		$[0] = t0;
+		$[1] = controlClassName;
+		$[2] = disabled;
+		$[3] = label;
+		$[4] = onChange;
+		$[5] = props;
+		$[6] = readOnly;
+		$[7] = required;
+		$[8] = t1;
+		$[9] = value;
+	} else {
+		controlClassName = $[1];
+		disabled = $[2];
+		label = $[3];
+		onChange = $[4];
+		props = $[5];
+		readOnly = $[6];
+		required = $[7];
+		t1 = $[8];
+		value = $[9];
+	}
+	const widget = t1 === void 0 ? "checkbox" : t1;
+	const t2 = value === true;
+	let t3;
+	if ($[10] !== onChange) {
+		t3 = (next) => onChange?.(next);
+		$[10] = onChange;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== disabled || $[13] !== label || $[14] !== props || $[15] !== readOnly || $[16] !== required || $[17] !== t2 || $[18] !== t3) {
+		t4 = {
+			...props,
+			isSelected: t2,
+			onChange: t3,
+			isDisabled: disabled,
+			isReadOnly: readOnly,
+			isRequired: required,
+			children: label
+		};
+		$[12] = disabled;
+		$[13] = label;
+		$[14] = props;
+		$[15] = readOnly;
+		$[16] = required;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+	} else t4 = $[19];
+	const shared = t4;
+	let t5;
+	if ($[20] !== controlClassName || $[21] !== shared || $[22] !== widget) {
+		t5 = widget === "switch" ? /* @__PURE__ */ jsx(Switch, {
+			...shared,
+			switchClassName: controlClassName
+		}) : /* @__PURE__ */ jsx(Checkbox, {
+			...shared,
+			checkboxClassName: controlClassName
+		});
+		$[20] = controlClassName;
+		$[21] = shared;
+		$[22] = widget;
+		$[23] = t5;
+	} else t5 = $[23];
+	return t5;
 }
 /** The `boolean` type: setting `widget` (`checkbox` or `switch`). */
 function BooleanFieldEntry(props) {

package/dist/boolean/BooleanField.js.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanField.js","names":["_c"],"sources":["../../src/boolean/BooleanField.tsx"],"sourcesContent":["import { Checkbox, Switch } from '@panneau/ui';\n\nimport { getFieldProps, getSetting, isString } from '../shared/entry';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\n\nexport interface BooleanFieldProps extends Omit<FieldProps<boolean>, 'labelClassName'> {\n    /** `checkbox` (default) for a choice saved with the form, `switch` for an on and off setting. */\n    widget?: 'checkbox' | 'switch';\n    controlClassName?: string;\n}\n\n/** A yes or no value, as a checkbox or a switch with its label. An empty value is `false`. */\nexport function BooleanField({\n    value,\n    onChange,\n    label,\n    widget = 'checkbox',\n    disabled,\n    readOnly,\n    required,\n    controlClassName,\n    ...props\n}: BooleanFieldProps) {\n    const shared = {\n        ...props,\n        isSelected: value === true,\n        onChange: (next: boolean) => onChange?.(next),\n        isDisabled: disabled,\n        isReadOnly: readOnly,\n        isRequired: required,\n        children: label,\n    };\n    return widget === 'switch' ? (\n        <Switch {...shared} switchClassName={controlClassName} />\n    ) : (\n        <Checkbox {...shared} checkboxClassName={controlClassName} />\n    );\n}\n\n/** The `boolean` type: setting `widget` (`checkbox` or `switch`). */\nexport function BooleanFieldEntry(props: FieldEntryProps) {\n    const widget = getSetting(props.field, 'widget', isString);\n    return (\n        <BooleanField\n            {...getFieldProps(props)}\n            value={props.value === true}\n            onChange={props.onChange}\n            {...(widget === 'switch' || widget === 'checkbox' ? { widget } : {})}\n        />\n    );\n}\n"],"mappings":";;;;;;AAYA,SAAgB,aAAa,EACzB,OACA,UACA,OACA,SAAS,YACT,UACA,UACA,UACA,kBACA,GAAG,SACe;CAClB,MAAM,SAAS;EACX,GAAG;EACH,YAAY,UAAU;EACtB,WAAW,SAAkB,WAAW,IAAI;EAC5C,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,UAAU;CACd;CACA,OAAO,WAAW,WACd,oBAAC,QAAD;EAAQ,GAAI;EAAQ,iBAAiB;CAAiB,CAAA,IAEtD,oBAAC,UAAD;EAAU,GAAI;EAAQ,mBAAmB;CAAiB,CAAA;AAElE;;AAGA,SAAO,kBAAA,OAAA;CAAA,MAAA,IAAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,OAAA;EACY,KAAA,WAAW,MAAK,OAAQ,UAAU,QAAQ;EAAC,EAAA,KAAA,MAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAA1D,MAAA,SAAe;CAA4C,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAG/C,KAAA,cAAc,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CACjB,MAAA,KAAA,MAAK,UAAW;CAAI,IAAA;CAAA,IAAA,EAAA,OAAA,QAAA;EAEtB,KAAA,WAAW,YAAY,WAAW,aAAlC,EAAA,OAA6D,IAA7D,CAA6D;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,YAAA,EAAA,OAAA,MAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAJvE,KAAA,oBAAC,cAAD;GAAa,GACL;GACG,OAAA;GACG,UAAA,MAAK;GAAS,GACnB;EAA8D,CAAA;EACrE,EAAA,KAAA,MAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OALF;AAKE"}
+{"version":3,"file":"BooleanField.js","names":["Checkbox","Switch","getFieldProps","getSetting","isString","FieldEntryProps","FieldProps","BooleanFieldProps","Omit","widget","controlClassName","BooleanField","t0","$","_c","disabled","label","onChange","props","readOnly","required","t1","value","undefined","t2","t3","next","t4","isSelected","isDisabled","isReadOnly","isRequired","children","shared","t5","BooleanFieldEntry","field","_c"],"sources":["../../src/boolean/BooleanField.tsx"],"sourcesContent":["import { Checkbox, Switch } from '@panneau/ui';\n\nimport { getFieldProps, getSetting, isString } from '../shared/entry';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\n\nexport interface BooleanFieldProps extends Omit<FieldProps<boolean>, 'labelClassName'> {\n    /** `checkbox` (default) for a choice saved with the form, `switch` for an on and off setting. */\n    widget?: 'checkbox' | 'switch';\n    controlClassName?: string;\n}\n\n/** A yes or no value, as a checkbox or a switch with its label. An empty value is `false`. */\nexport function BooleanField({\n    value,\n    onChange,\n    label,\n    widget = 'checkbox',\n    disabled,\n    readOnly,\n    required,\n    controlClassName,\n    ...props\n}: BooleanFieldProps) {\n    const shared = {\n        ...props,\n        isSelected: value === true,\n        onChange: (next: boolean) => onChange?.(next),\n        isDisabled: disabled,\n        isReadOnly: readOnly,\n        isRequired: required,\n        children: label,\n    };\n    return widget === 'switch' ? (\n        <Switch {...shared} switchClassName={controlClassName} />\n    ) : (\n        <Checkbox {...shared} checkboxClassName={controlClassName} />\n    );\n}\n\n/** The `boolean` type: setting `widget` (`checkbox` or `switch`). */\nexport function BooleanFieldEntry(props: FieldEntryProps) {\n    const widget = getSetting(props.field, 'widget', isString);\n    return (\n        <BooleanField\n            {...getFieldProps(props)}\n            value={props.value === true}\n            onChange={props.onChange}\n            {...(widget === 'switch' || widget === 'checkbox' ? { widget } : {})}\n        />\n    );\n}\n"],"mappings":";;;;;;AAYA,SAAOW,aAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAJ;CAAA,IAAAK;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAT,EAAA,OAAAD,IAAA;EAAsB,CAAA,CAAAU,OAAAL,UAAAD,OAAAP,QAAAY,IAAAN,UAAAI,UAAAC,UAAAV,kBAAA,GAAAQ,SAAAN;EAUTC,EAAA,KAAAD;EAAAC,EAAA,KAAAH;EAAAG,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;CAAA,OAAA;EAAAZ,mBAAAG,EAAA;EAAAE,WAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAI,WAAAJ,EAAA;EAAAK,QAAAL,EAAA;EAAAM,WAAAN,EAAA;EAAAO,WAAAP,EAAA;EAAAQ,KAAAR,EAAA;EAAAS,QAAAT,EAAA;CAAA;CANhB,MAAAJ,SAAAY,OAAAE,KAAAA,IAAA,aAAAF;CASgB,MAAAG,KAAAF,UAAU;CAAI,IAAAG;CAAA,IAAAZ,EAAA,QAAAI,UAAA;EAChBQ,MAAAC,SAAmBT,WAAWS,IAAI;EAACb,EAAA,MAAAI;EAAAJ,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,QAAAE,YAAAF,EAAA,QAAAG,SAAAH,EAAA,QAAAK,SAAAL,EAAA,QAAAM,YAAAN,EAAA,QAAAO,YAAAP,EAAA,QAAAW,MAAAX,EAAA,QAAAY,IAAA;EAHlCE,KAAA;GAAA,GACRT;GAAKU,YACIJ;GAAcP,UAChBQ;GAAmCI,YACjCd;GAAQe,YACRX;GAAQY,YACRX;GAAQY,UACVhB;EACd;EAACH,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAW;EAAAX,EAAA,MAAAY;EAAAZ,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CARD,MAAAoB,SAAeN;CAQb,IAAAO;CAAA,IAAArB,EAAA,QAAAH,oBAAAG,EAAA,QAAAoB,UAAApB,EAAA,QAAAJ,QAAA;EACKyB,KAAAzB,WAAW,WACd,oBAAC,QAAD;GAAO,GAAKwB;GAAyBvB,iBAAAA;EAAgB,CAAA,IAErD,oBAAC,UAAD;GAAS,GAAKuB;GAA2BvB,mBAAAA;EAAgB,CAAA;EAC5DG,EAAA,MAAAH;EAAAG,EAAA,MAAAoB;EAAApB,EAAA,MAAAJ;EAAAI,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAA,OAJMqB;AAIN;;AAIL,SAAOC,kBAAAjB,OAAA;CAAA,MAAAL,IAAAC,EAAA,EAAA;CAAA,IAAAF;CAAA,IAAAC,EAAA,OAAAK,MAAAkB,OAAA;EACYxB,KAAAT,WAAWe,MAAKkB,OAAQ,UAAUhC,QAAQ;EAACS,EAAA,KAAAK,MAAAkB;EAAAvB,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAA1D,MAAAJ,SAAeG;CAA4C,IAAAS;CAAA,IAAAR,EAAA,OAAAK,OAAA;EAG/CG,KAAAnB,cAAcgB,KAAK;EAACL,EAAA,KAAAK;EAAAL,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CACjB,MAAAW,KAAAN,MAAKI,UAAW;CAAI,IAAAG;CAAA,IAAAZ,EAAA,OAAAJ,QAAA;EAEtBgB,KAAAhB,WAAW,YAAYA,WAAW,aAAlC,EAAAA,OAA6D,IAA7D,CAA6D;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAK,MAAAD,YAAAJ,EAAA,OAAAQ,MAAAR,EAAA,OAAAW,MAAAX,EAAA,OAAAY,IAAA;EAJvEE,KAAA,oBAAC,cAAD;GAAa,GACLN;GACG,OAAAG;GACG,UAAAN,MAAKD;GAAS,GACnBQ;EAA8D,CAAA;EACrEZ,EAAA,KAAAK,MAAAD;EAAAJ,EAAA,KAAAQ;EAAAR,EAAA,KAAAW;EAAAX,EAAA,KAAAY;EAAAZ,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OALFc;AAKE"}

package/dist/boolean/index.d.ts

@@ -1,2 +1,2 @@
-export { BooleanField, BooleanFieldEntry, type BooleanFieldProps } from './BooleanField';
+export { BooleanField, BooleanFieldEntry, type BooleanFieldProps } from './BooleanField.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/color/ColorField.css

@@ -31,3 +31,12 @@
 .panneau-color-field-input {
     font-family: var(--panneau-font-family-mono);
 }
+
+.panneau-color-field-palette-swatch {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    vertical-align: middle;
+    border: var(--panneau-border-width) solid var(--panneau-color-border-control);
+    border-radius: var(--panneau-radius-sm);
+}

package/dist/color/ColorField.d.ts

@@ -1,6 +1,13 @@
-import type { FieldEntryProps } from '../shared/types';
-import { type TextFieldProps } from '../text/TextField';
-export type ColorFieldProps = Omit<TextFieldProps, 'type' | 'prefix' | 'maxLength'>;
+import type { FieldEntryProps } from '../shared/types.js';
+import { type TextFieldProps } from '../text/TextField.js';
+import { type ColorPaletteEntry } from './palette.js';
+export interface ColorFieldProps extends Omit<TextFieldProps, 'type' | 'prefix' | 'maxLength'> {
+    /**
+     * The colors to pick from (decision 0058). With a palette, the field only offers its colors,
+     * and the value is the `value` of one of them.
+     */
+    palette?: readonly ColorPaletteEntry[] | null;
+}
 /**
  * Normalizes a hexadecimal color: `#` prefix, lowercase, and 3 digits expanded to 6. Returns the
  * text as is when it isn't a hexadecimal color.
@@ -10,7 +17,7 @@ export declare function normalizeColor(value: string): string;
  * A color as a hexadecimal value (`#1d4ed8`): typed, or picked with the browser's color picker.
  * The value is normalized on blur.
  */
-export declare function ColorField({ value, onChange, onBlur, disabled, readOnly, inputClassName, ...props }: ColorFieldProps): import("react").JSX.Element;
-/** The `color` type. */
+export declare function ColorField({ value, onChange, onBlur, disabled, readOnly, inputClassName, palette, ...props }: ColorFieldProps): import("react").JSX.Element;
+/** The `color` type: `settings.palette`, the colors to pick from. */
 export declare function ColorFieldEntry(props: FieldEntryProps): import("react").JSX.Element;
 //# sourceMappingURL=ColorField.d.ts.map

package/dist/color/ColorField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorField.d.ts","sourceRoot":"","sources":["../../src/color/ColorField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGnE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC,CAAC;AAEpF;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAUpD;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,GAAG,KAAK,EACX,EAAE,eAAe,+BAsCjB;AAED,wBAAwB;AACxB,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,+BAQrD"}
+{"version":3,"file":"ColorField.d.ts","sourceRoot":"","sources":["../../src/color/ColorField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,KAAK,iBAAiB,EAAmC,MAAM,WAAW,CAAC;AAEpF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;IAC1F;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,iBAAiB,EAAE,GAAG,IAAI,CAAC;CACjD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAUpD;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,OAAO,EACP,GAAG,KAAK,EACX,EAAE,eAAe,+BAmDjB;AA4ED,qEAAqE;AACrE,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,+BAUrD"}

package/dist/color/ColorField.js

@@ -3,8 +3,9 @@ import { getFieldProps, isString } from "../shared/entry.js";
 import { messages } from "../shared/messages.js";
 import { TextField } from "../text/TextField.js";
 import ColorField_module_default from "./ColorField.module.js";
+import { getColorPalette, getSwatchColor } from "./palette.js";
 import { c } from "react/compiler-runtime";
-import { usePanneauIntl } from "@panneau/ui";
+import { Select, usePanneauIntl } from "@panneau/ui";
 import { jsx } from "react/jsx-runtime";
 //#region src/color/ColorField.tsx
 /**
@@ -23,49 +24,75 @@ function normalizeColor(value) {
 * The value is normalized on blur.
 */
 function ColorField(t0) {
-	const $ = c(42);
+	const $ = c(51);
 	let disabled;
 	let inputClassName;
 	let onBlur;
 	let onChange;
+	let palette;
 	let props;
 	let readOnly;
 	let value;
 	if ($[0] !== t0) {
-		({value, onChange, onBlur, disabled, readOnly, inputClassName, ...props} = t0);
+		({value, onChange, onBlur, disabled, readOnly, inputClassName, palette, ...props} = t0);
 		$[0] = t0;
 		$[1] = disabled;
 		$[2] = inputClassName;
 		$[3] = onBlur;
 		$[4] = onChange;
-		$[5] = props;
-		$[6] = readOnly;
-		$[7] = value;
+		$[5] = palette;
+		$[6] = props;
+		$[7] = readOnly;
+		$[8] = value;
 	} else {
 		disabled = $[1];
 		inputClassName = $[2];
 		onBlur = $[3];
 		onChange = $[4];
-		props = $[5];
-		readOnly = $[6];
-		value = $[7];
+		palette = $[5];
+		props = $[6];
+		readOnly = $[7];
+		value = $[8];
 	}
 	const intl = usePanneauIntl();
+	if (palette !== void 0 && palette !== null && palette.length > 0) {
+		let t1;
+		if ($[9] !== disabled || $[10] !== onBlur || $[11] !== onChange || $[12] !== palette || $[13] !== props || $[14] !== readOnly || $[15] !== value) {
+			t1 = /* @__PURE__ */ jsx(PaletteSelect, {
+				...props,
+				palette,
+				value,
+				onChange,
+				onBlur,
+				disabled,
+				readOnly
+			});
+			$[9] = disabled;
+			$[10] = onBlur;
+			$[11] = onChange;
+			$[12] = palette;
+			$[13] = props;
+			$[14] = readOnly;
+			$[15] = value;
+			$[16] = t1;
+		} else t1 = $[16];
+		return t1;
+	}
 	let t1;
-	if ($[8] !== value) {
+	if ($[17] !== value) {
 		t1 = value !== null && value !== void 0 && /^#[0-9a-f]{6}$/i.test(value);
-		$[8] = value;
-		$[9] = t1;
-	} else t1 = $[9];
+		$[17] = value;
+		$[18] = t1;
+	} else t1 = $[18];
 	const valid = t1;
 	let t2;
-	if ($[10] !== inputClassName) {
+	if ($[19] !== inputClassName) {
 		t2 = cx(ColorField_module_default.input, inputClassName);
-		$[10] = inputClassName;
-		$[11] = t2;
-	} else t2 = $[11];
+		$[19] = inputClassName;
+		$[20] = t2;
+	} else t2 = $[20];
 	let t3;
-	if ($[12] !== onBlur || $[13] !== onChange || $[14] !== value) {
+	if ($[21] !== onBlur || $[22] !== onChange || $[23] !== value) {
 		t3 = () => {
 			if (value !== null && value !== void 0) {
 				const next = normalizeColor(value);
@@ -73,40 +100,40 @@ function ColorField(t0) {
 			}
 			onBlur?.();
 		};
-		$[12] = onBlur;
-		$[13] = onChange;
-		$[14] = value;
-		$[15] = t3;
-	} else t3 = $[15];
+		$[21] = onBlur;
+		$[22] = onChange;
+		$[23] = value;
+		$[24] = t3;
+	} else t3 = $[24];
 	const t4 = valid ? value : "transparent";
 	let t5;
-	if ($[16] !== t4) {
+	if ($[25] !== t4) {
 		t5 = { backgroundColor: t4 };
-		$[16] = t4;
-		$[17] = t5;
-	} else t5 = $[17];
+		$[25] = t4;
+		$[26] = t5;
+	} else t5 = $[26];
 	let t6;
-	if ($[18] !== valid || $[19] !== value) {
+	if ($[27] !== valid || $[28] !== value) {
 		t6 = valid ? value.toLowerCase() : "#000000";
-		$[18] = valid;
-		$[19] = value;
-		$[20] = t6;
-	} else t6 = $[20];
+		$[27] = valid;
+		$[28] = value;
+		$[29] = t6;
+	} else t6 = $[29];
 	let t7;
-	if ($[21] !== onChange) {
+	if ($[30] !== onChange) {
 		t7 = (event) => onChange?.(event.target.value);
-		$[21] = onChange;
-		$[22] = t7;
-	} else t7 = $[22];
+		$[30] = onChange;
+		$[31] = t7;
+	} else t7 = $[31];
 	const t8 = disabled === true || readOnly === true;
 	let t9;
-	if ($[23] !== intl) {
+	if ($[32] !== intl) {
 		t9 = intl.formatMessage(messages.pickColor);
-		$[23] = intl;
-		$[24] = t9;
-	} else t9 = $[24];
+		$[32] = intl;
+		$[33] = t9;
+	} else t9 = $[33];
 	let t10;
-	if ($[25] !== t6 || $[26] !== t7 || $[27] !== t8 || $[28] !== t9) {
+	if ($[34] !== t6 || $[35] !== t7 || $[36] !== t8 || $[37] !== t9) {
 		t10 = /* @__PURE__ */ jsx("input", {
 			type: "color",
 			className: ColorField_module_default.picker,
@@ -115,25 +142,25 @@ function ColorField(t0) {
 			disabled: t8,
 			"aria-label": t9
 		});
-		$[25] = t6;
-		$[26] = t7;
-		$[27] = t8;
-		$[28] = t9;
-		$[29] = t10;
-	} else t10 = $[29];
+		$[34] = t6;
+		$[35] = t7;
+		$[36] = t8;
+		$[37] = t9;
+		$[38] = t10;
+	} else t10 = $[38];
 	let t11;
-	if ($[30] !== t10 || $[31] !== t5) {
+	if ($[39] !== t10 || $[40] !== t5) {
 		t11 = /* @__PURE__ */ jsx("span", {
 			className: ColorField_module_default.swatch,
 			style: t5,
 			children: t10
 		});
-		$[30] = t10;
-		$[31] = t5;
-		$[32] = t11;
-	} else t11 = $[32];
+		$[39] = t10;
+		$[40] = t5;
+		$[41] = t11;
+	} else t11 = $[41];
 	let t12;
-	if ($[33] !== disabled || $[34] !== onChange || $[35] !== props || $[36] !== readOnly || $[37] !== t11 || $[38] !== t2 || $[39] !== t3 || $[40] !== value) {
+	if ($[42] !== disabled || $[43] !== onChange || $[44] !== props || $[45] !== readOnly || $[46] !== t11 || $[47] !== t2 || $[48] !== t3 || $[49] !== value) {
 		t12 = /* @__PURE__ */ jsx(TextField, {
 			autoComplete: "off",
 			...props,
@@ -145,41 +172,274 @@ function ColorField(t0) {
 			onBlur: t3,
 			prefix: t11
 		});
-		$[33] = disabled;
-		$[34] = onChange;
-		$[35] = props;
-		$[36] = readOnly;
-		$[37] = t11;
-		$[38] = t2;
-		$[39] = t3;
-		$[40] = value;
-		$[41] = t12;
-	} else t12 = $[41];
+		$[42] = disabled;
+		$[43] = onChange;
+		$[44] = props;
+		$[45] = readOnly;
+		$[46] = t11;
+		$[47] = t2;
+		$[48] = t3;
+		$[49] = value;
+		$[50] = t12;
+	} else t12 = $[50];
 	return t12;
 }
-/** The `color` type. */
+/** The swatch of a color, decorative: an empty box when it has no color to draw. */
+function Swatch(t0) {
+	const $ = c(4);
+	const { color } = t0;
+	let t1;
+	if ($[0] !== color) {
+		t1 = color !== null ? { backgroundColor: color } : void 0;
+		$[0] = color;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: ColorField_module_default.paletteSwatch,
+			style: t1
+		});
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+}
+/**
+* The colors of a palette, as a select whose options show their swatches. It can be emptied
+* unless the field is required. A value outside the palette, kept from before, shows as it is.
+*/
+function PaletteSelect(t0) {
+	const $ = c(65);
+	let autoFocus;
+	let className;
+	let controlClassName;
+	let description;
+	let descriptionClassName;
+	let disabled;
+	let errors;
+	let errorsClassName;
+	let id;
+	let label;
+	let labelClassName;
+	let name;
+	let onBlur;
+	let onChange;
+	let palette;
+	let placeholder;
+	let props;
+	let readOnly;
+	let required;
+	let value;
+	if ($[0] !== t0) {
+		({palette, value, onChange, onBlur, disabled, readOnly, required, label, description, errors, name, id, autoFocus, placeholder, className, labelClassName, descriptionClassName, errorsClassName, controlClassName, ...props} = t0);
+		$[0] = t0;
+		$[1] = autoFocus;
+		$[2] = className;
+		$[3] = controlClassName;
+		$[4] = description;
+		$[5] = descriptionClassName;
+		$[6] = disabled;
+		$[7] = errors;
+		$[8] = errorsClassName;
+		$[9] = id;
+		$[10] = label;
+		$[11] = labelClassName;
+		$[12] = name;
+		$[13] = onBlur;
+		$[14] = onChange;
+		$[15] = palette;
+		$[16] = placeholder;
+		$[17] = props;
+		$[18] = readOnly;
+		$[19] = required;
+		$[20] = value;
+	} else {
+		autoFocus = $[1];
+		className = $[2];
+		controlClassName = $[3];
+		description = $[4];
+		descriptionClassName = $[5];
+		disabled = $[6];
+		errors = $[7];
+		errorsClassName = $[8];
+		id = $[9];
+		label = $[10];
+		labelClassName = $[11];
+		name = $[12];
+		onBlur = $[13];
+		onChange = $[14];
+		palette = $[15];
+		placeholder = $[16];
+		props = $[17];
+		readOnly = $[18];
+		required = $[19];
+		value = $[20];
+	}
+	const intl = usePanneauIntl();
+	const current = value !== null && value !== void 0 && value !== "" ? value : null;
+	let t1;
+	if ($[21] !== current || $[22] !== palette) {
+		t1 = current !== null && !palette.some((entry) => entry.value === current) ? [...palette, { value: current }] : palette;
+		$[21] = current;
+		$[22] = palette;
+		$[23] = t1;
+	} else t1 = $[23];
+	const entries = t1;
+	let t2;
+	if ($[24] !== entries) {
+		t2 = entries.map(_temp);
+		$[24] = entries;
+		$[25] = t2;
+	} else t2 = $[25];
+	const options = t2;
+	let t3;
+	if ($[26] !== onChange) {
+		t3 = (next) => onChange?.(typeof next === "string" ? next : null);
+		$[26] = onChange;
+		$[27] = t3;
+	} else t3 = $[27];
+	let t4;
+	if ($[28] !== errors) {
+		t4 = errors ?? [];
+		$[28] = errors;
+		$[29] = t4;
+	} else t4 = $[29];
+	const t5 = disabled === true || readOnly === true;
+	let t6;
+	if ($[30] !== intl || $[31] !== placeholder) {
+		t6 = placeholder ?? intl.formatMessage(messages.pickColor);
+		$[30] = intl;
+		$[31] = placeholder;
+		$[32] = t6;
+	} else t6 = $[32];
+	let t7;
+	if ($[33] !== props) {
+		t7 = props["aria-label"] !== void 0 ? { "aria-label": props["aria-label"] } : {};
+		$[33] = props;
+		$[34] = t7;
+	} else t7 = $[34];
+	let t8;
+	if ($[35] !== name) {
+		t8 = name !== void 0 ? { name } : {};
+		$[35] = name;
+		$[36] = t8;
+	} else t8 = $[36];
+	let t9;
+	if ($[37] !== id) {
+		t9 = id !== void 0 ? { id } : {};
+		$[37] = id;
+		$[38] = t9;
+	} else t9 = $[38];
+	let t10;
+	if ($[39] !== autoFocus) {
+		t10 = autoFocus !== void 0 ? { autoFocus } : {};
+		$[39] = autoFocus;
+		$[40] = t10;
+	} else t10 = $[40];
+	let t11;
+	if ($[41] !== onBlur) {
+		t11 = onBlur !== void 0 ? { onBlur } : {};
+		$[41] = onBlur;
+		$[42] = t11;
+	} else t11 = $[42];
+	let t12;
+	if ($[43] !== controlClassName) {
+		t12 = controlClassName !== void 0 ? { triggerClassName: controlClassName } : {};
+		$[43] = controlClassName;
+		$[44] = t12;
+	} else t12 = $[44];
+	let t13;
+	if ($[45] !== className || $[46] !== current || $[47] !== description || $[48] !== descriptionClassName || $[49] !== errorsClassName || $[50] !== label || $[51] !== labelClassName || $[52] !== options || $[53] !== required || $[54] !== t10 || $[55] !== t11 || $[56] !== t12 || $[57] !== t3 || $[58] !== t4 || $[59] !== t5 || $[60] !== t6 || $[61] !== t7 || $[62] !== t8 || $[63] !== t9) {
+		t13 = /* @__PURE__ */ jsx(Select, {
+			options,
+			value: current,
+			onChange: t3,
+			label,
+			description,
+			errors: t4,
+			isRequired: required,
+			isDisabled: t5,
+			placeholder: t6,
+			className,
+			labelClassName,
+			descriptionClassName,
+			errorsClassName,
+			...t7,
+			...t8,
+			...t9,
+			...t10,
+			...t11,
+			...t12
+		});
+		$[45] = className;
+		$[46] = current;
+		$[47] = description;
+		$[48] = descriptionClassName;
+		$[49] = errorsClassName;
+		$[50] = label;
+		$[51] = labelClassName;
+		$[52] = options;
+		$[53] = required;
+		$[54] = t10;
+		$[55] = t11;
+		$[56] = t12;
+		$[57] = t3;
+		$[58] = t4;
+		$[59] = t5;
+		$[60] = t6;
+		$[61] = t7;
+		$[62] = t8;
+		$[63] = t9;
+		$[64] = t13;
+	} else t13 = $[64];
+	return t13;
+}
+/** The `color` type: `settings.palette`, the colors to pick from. */
+function _temp(entry_0) {
+	return {
+		value: entry_0.value,
+		label: entry_0.label ?? entry_0.value,
+		prefix: /* @__PURE__ */ jsx(Swatch, { color: getSwatchColor(entry_0) })
+	};
+}
 function ColorFieldEntry(props) {
-	const $ = c(6);
+	const $ = c(11);
 	let t0;
-	if ($[0] !== props) {
-		t0 = getFieldProps(props);
-		$[0] = props;
+	if ($[0] !== props.field) {
+		t0 = getColorPalette(props.field);
+		$[0] = props.field;
 		$[1] = t0;
 	} else t0 = $[1];
-	const t1 = isString(props.value) ? props.value : null;
-	let t2;
-	if ($[2] !== props.onChange || $[3] !== t0 || $[4] !== t1) {
-		t2 = /* @__PURE__ */ jsx(ColorField, {
-			...t0,
-			value: t1,
-			onChange: props.onChange
+	const palette = t0;
+	let t1;
+	if ($[2] !== props) {
+		t1 = getFieldProps(props);
+		$[2] = props;
+		$[3] = t1;
+	} else t1 = $[3];
+	const t2 = isString(props.value) ? props.value : null;
+	let t3;
+	if ($[4] !== palette) {
+		t3 = palette !== null ? { palette } : {};
+		$[4] = palette;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== props.onChange || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(ColorField, {
+			...t1,
+			value: t2,
+			onChange: props.onChange,
+			...t3
 		});
-		$[2] = props.onChange;
-		$[3] = t0;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
+		$[6] = props.onChange;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
 }
 //#endregion
 export { ColorField, ColorFieldEntry, normalizeColor };