@panneau/lists 5.0.0-alpha.15 → 5.0.0-alpha.17

package/dist/displays/displays.js

@@ -2,14 +2,20 @@ import { messages } from "../messages.js";
 import { findOption, getFieldOptions, toText } from "../values.js";
 import Displays_module_default from "./Displays.module.js";
 import { c } from "react/compiler-runtime";
+import { fieldsMessages } from "@panneau/intl";
 import { Badge, Icon, usePanneauIntl } from "@panneau/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, Minus } from "lucide-react";
+import { Check, File, FileText, Globe, Hash, Mail, Minus, Phone } from "lucide-react";
 import { toReferences } from "@panneau/fields";
+import { formatAddress, isAddress } from "@panneau/fields/address";
+import { getColorPalette, getSwatchColor } from "@panneau/fields/color";
 import { getCountryFlag, getCountryName, isCountryCode } from "@panneau/fields/country";
-import { formatDuration } from "@panneau/fields/duration";
-import { getRegionCountry, getRegionName } from "@panneau/fields/region";
-import { parsePhone } from "@panneau/fields/tel";
+import { formatDateRange, getDateRangeSettings } from "@panneau/fields/daterange";
+import { formatDuration, getDurationUnits } from "@panneau/fields/duration";
+import { getLinkText, isLink } from "@panneau/fields/link";
+import { formatMoney } from "@panneau/fields/money";
+import { RegionFlag, getRegionCountry, getRegionName } from "@panneau/fields/region";
+import { parsePhone, splitExtension } from "@panneau/fields/tel";
 //#region src/displays/displays.tsx
 /** What a cell shows without a value. Hidden from assistive technologies, which skip the cell. */
 function EmptyValue() {
@@ -75,6 +81,7 @@ function TextDisplay(t0) {
 	if ($[8] !== text) {
 		t2 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: text
 		});
 		$[8] = text;
@@ -97,6 +104,7 @@ function RichTextDisplay(t0) {
 	if ($[2] !== text) {
 		t2 = text === "" ? /* @__PURE__ */ jsx(EmptyValue, {}) : /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: text
 		});
 		$[2] = text;
@@ -287,6 +295,87 @@ function DateTimeDisplay(t0) {
 	} else t4 = $[8];
 	return t4;
 }
+/**
+* A range of dates (decision 0053), in the format of the locale: `Nov 4 – 6, 2026`. Date-times show
+* in the zone of the value or the field, with its short name when it isn't the user's. A range open
+* at one end shows `From Nov 4, 2026` or `Until Dec 1, 2026`.
+*/
+function DateRangeDisplay(t0) {
+	const $ = c(8);
+	const { value, field } = t0;
+	const intl = usePanneauIntl();
+	let t1;
+	let t2;
+	if ($[0] !== field?.settings || $[1] !== intl || $[2] !== value) {
+		t2 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const range = formatDateRange(value, intl.locale, getDateRangeSettings(field?.settings).timeZone);
+			if (range === null) {
+				let t3;
+				if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+					t3 = /* @__PURE__ */ jsx(EmptyValue, {});
+					$[5] = t3;
+				} else t3 = $[5];
+				t2 = t3;
+				break bb0;
+			}
+			t1 = range.kind === "from" ? intl.formatMessage(messages.rangeFrom, { start: range.text }) : range.kind === "until" ? intl.formatMessage(messages.rangeUntil, { end: range.text }) : range.text;
+		}
+		$[0] = field?.settings;
+		$[1] = intl;
+		$[2] = value;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	if (t2 !== Symbol.for("react.early_return_sentinel")) return t2;
+	const text = t1;
+	let t3;
+	if ($[6] !== text) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: Displays_module_default.text,
+			"data-clamp": "",
+			children: text
+		});
+		$[6] = text;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+}
+/** An amount of money (decision 0053), in the currency format of the locale: `1 250,00 $`. */
+function MoneyDisplay(t0) {
+	const $ = c(6);
+	const { value } = t0;
+	const intl = usePanneauIntl();
+	let t1;
+	if ($[0] !== intl.locale || $[1] !== value) {
+		t1 = formatMoney(value, intl.locale);
+		$[0] = intl.locale;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	const text = t1;
+	if (text === null) {
+		let t2;
+		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[3] = t2;
+		} else t2 = $[3];
+		return t2;
+	}
+	let t2;
+	if ($[4] !== text) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: Displays_module_default.number,
+			children: text
+		});
+		$[4] = text;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
 /** A time of day (`14:30`), in the format of the locale. */
 function TimeDisplay(t0) {
 	const $ = c(13);
@@ -391,48 +480,54 @@ function SelectDisplay(t0) {
 }
 /** The labels of related items. */
 function RelationDisplay(t0) {
-	const $ = c(8);
+	const $ = c(10);
 	const { value } = t0;
 	let t1;
 	let t2;
 	let t3;
+	let t4;
 	if ($[0] !== value) {
-		t3 = Symbol.for("react.early_return_sentinel");
+		t4 = Symbol.for("react.early_return_sentinel");
 		bb0: {
 			const references = toReferences(value);
 			if (references.length === 0) {
-				let t4;
-				if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-					t4 = /* @__PURE__ */ jsx(EmptyValue, {});
-					$[4] = t4;
-				} else t4 = $[4];
-				t3 = t4;
+				let t5;
+				if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+					t5 = /* @__PURE__ */ jsx(EmptyValue, {});
+					$[5] = t5;
+				} else t5 = $[5];
+				t4 = t5;
 				break bb0;
 			}
 			t1 = Displays_module_default.text;
-			t2 = references.map(_temp).join(", ");
+			t2 = "";
+			t3 = references.map(_temp).join(", ");
 		}
 		$[0] = value;
 		$[1] = t1;
 		$[2] = t2;
 		$[3] = t3;
+		$[4] = t4;
 	} else {
 		t1 = $[1];
 		t2 = $[2];
 		t3 = $[3];
+		t4 = $[4];
 	}
-	if (t3 !== Symbol.for("react.early_return_sentinel")) return t3;
-	let t4;
-	if ($[5] !== t1 || $[6] !== t2) {
-		t4 = /* @__PURE__ */ jsx("span", {
+	if (t4 !== Symbol.for("react.early_return_sentinel")) return t4;
+	let t5;
+	if ($[6] !== t1 || $[7] !== t2 || $[8] !== t3) {
+		t5 = /* @__PURE__ */ jsx("span", {
 			className: t1,
-			children: t2
+			"data-clamp": t2,
+			children: t3
 		});
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t4;
-	} else t4 = $[7];
-	return t4;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
 }
 /** A link that opens the URL. */
 function _temp(reference) {
@@ -503,11 +598,13 @@ function EmailDisplay(t0) {
 }
 /**
 * A link that calls the phone number: the flag of its country and the number in its international
-* format (`+1 514 555 0199`). A value that isn't E.164 shows as it is.
+* format (`+1 514 555 0199`), with its extension (`, ext. 123`) when its field allows one
+* (`settings.extension`) or the column has no field. A value that isn't E.164 shows as it is.
 */
 function TelDisplay(t0) {
-	const $ = c(16);
-	const { value } = t0;
+	const $ = c(20);
+	const { value, field } = t0;
+	const intl = usePanneauIntl();
 	if (typeof value !== "string" || value.trim() === "") {
 		let t1;
 		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -516,148 +613,214 @@ function TelDisplay(t0) {
 		} else t1 = $[0];
 		return t1;
 	}
-	let number;
 	let t1;
 	let t2;
 	let t3;
 	let t4;
-	if ($[1] !== value) {
-		t4 = Symbol.for("react.early_return_sentinel");
+	let t5;
+	if ($[1] !== field || $[2] !== intl || $[3] !== value) {
+		t5 = Symbol.for("react.early_return_sentinel");
 		bb0: {
-			number = parsePhone(value);
+			const { number: text, extension } = field === null || field.settings?.extension === true ? splitExtension(value) : {
+				number: value,
+				extension: null
+			};
+			const number = parsePhone(text);
 			if (number === null) {
-				let t5;
-				if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-					t5 = /[^\d+]/g;
-					$[7] = t5;
-				} else t5 = $[7];
-				const t6 = `tel:${value.replace(t5, "")}`;
-				let t7;
-				if ($[8] !== t6 || $[9] !== value) {
-					t7 = /* @__PURE__ */ jsx("a", {
+				let t6;
+				if ($[9] !== value) {
+					let t7;
+					if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+						t7 = /[^\d+]/g;
+						$[11] = t7;
+					} else t7 = $[11];
+					t6 = value.replace(t7, "");
+					$[9] = value;
+					$[10] = t6;
+				} else t6 = $[10];
+				const t7 = `tel:${t6}`;
+				let t8;
+				if ($[12] !== t7 || $[13] !== value) {
+					t8 = /* @__PURE__ */ jsx("a", {
 						className: Displays_module_default.link,
-						href: t6,
+						href: t7,
 						children: value
 					});
-					$[8] = t6;
-					$[9] = value;
-					$[10] = t7;
-				} else t7 = $[10];
-				t4 = t7;
+					$[12] = t7;
+					$[13] = value;
+					$[14] = t8;
+				} else t8 = $[14];
+				t5 = t8;
 				break bb0;
 			}
 			t1 = `${Displays_module_default.link} ${Displays_module_default.flagged}`;
-			t2 = `tel:${number.number}`;
+			t2 = `tel:${number.number}${extension !== null ? `;ext=${extension}` : ""}`;
 			t3 = number.country !== null ? /* @__PURE__ */ jsx("span", {
 				className: Displays_module_default.flag,
 				"aria-hidden": "true",
 				children: getCountryFlag(number.country)
 			}) : null;
+			t4 = extension !== null ? intl.formatMessage(messages.phoneExtension, {
+				number: number.international,
+				extension
+			}) : number.international;
 		}
-		$[1] = value;
-		$[2] = number;
-		$[3] = t1;
-		$[4] = t2;
-		$[5] = t3;
-		$[6] = t4;
+		$[1] = field;
+		$[2] = intl;
+		$[3] = value;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = t5;
 	} else {
-		number = $[2];
-		t1 = $[3];
-		t2 = $[4];
-		t3 = $[5];
-		t4 = $[6];
+		t1 = $[4];
+		t2 = $[5];
+		t3 = $[6];
+		t4 = $[7];
+		t5 = $[8];
 	}
-	if (t4 !== Symbol.for("react.early_return_sentinel")) return t4;
-	let t5;
-	if ($[11] !== number.international || $[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
-		t5 = /* @__PURE__ */ jsxs("a", {
+	if (t5 !== Symbol.for("react.early_return_sentinel")) return t5;
+	let t6;
+	if ($[15] !== t1 || $[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
+		t6 = /* @__PURE__ */ jsxs("a", {
 			className: t1,
 			href: t2,
-			children: [t3, number.international]
+			children: [t3, t4]
 		});
-		$[11] = number.international;
-		$[12] = t1;
-		$[13] = t2;
-		$[14] = t3;
-		$[15] = t5;
-	} else t5 = $[15];
-	return t5;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t6;
+	} else t6 = $[19];
+	return t6;
 }
 /** A country: its flag and its name in the user's locale. */
-function CountryDisplay(t0) {
-	const $ = c(15);
-	const { value } = t0;
+function Country(t0) {
+	const $ = c(14);
+	const { code } = t0;
 	const intl = usePanneauIntl();
-	if (typeof value !== "string" || value === "") {
-		let t1;
-		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
-			$[0] = t1;
-		} else t1 = $[0];
-		return t1;
-	}
-	if (!isCountryCode(value)) {
+	if (!isCountryCode(code)) {
 		let t1;
-		if ($[1] !== value) {
+		if ($[0] !== code) {
 			t1 = /* @__PURE__ */ jsx("span", {
 				className: Displays_module_default.text,
-				children: value
+				"data-clamp": "",
+				children: code
 			});
-			$[1] = value;
-			$[2] = t1;
-		} else t1 = $[2];
+			$[0] = code;
+			$[1] = t1;
+		} else t1 = $[1];
 		return t1;
 	}
 	let t1;
-	if ($[3] !== value) {
-		t1 = getCountryFlag(value);
-		$[3] = value;
-		$[4] = t1;
-	} else t1 = $[4];
+	if ($[2] !== code) {
+		t1 = getCountryFlag(code);
+		$[2] = code;
+		$[3] = t1;
+	} else t1 = $[3];
 	let t2;
-	if ($[5] !== t1) {
+	if ($[4] !== t1) {
 		t2 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.flag,
 			"aria-hidden": "true",
 			children: t1
 		});
-		$[5] = t1;
-		$[6] = t2;
-	} else t2 = $[6];
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
 	let t3;
-	if ($[7] !== intl.locale || $[8] !== value) {
-		t3 = getCountryName(value, intl.locale);
+	if ($[6] !== code || $[7] !== intl.locale) {
+		t3 = getCountryName(code, intl.locale);
+		$[6] = code;
 		$[7] = intl.locale;
-		$[8] = value;
-		$[9] = t3;
-	} else t3 = $[9];
+		$[8] = t3;
+	} else t3 = $[8];
 	let t4;
-	if ($[10] !== t3) {
+	if ($[9] !== t3) {
 		t4 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: t3
 		});
-		$[10] = t3;
-		$[11] = t4;
-	} else t4 = $[11];
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
 	let t5;
-	if ($[12] !== t2 || $[13] !== t4) {
+	if ($[11] !== t2 || $[12] !== t4) {
 		t5 = /* @__PURE__ */ jsxs("span", {
 			className: Displays_module_default.flagged,
 			children: [t2, t4]
 		});
-		$[12] = t2;
-		$[13] = t4;
-		$[14] = t5;
-	} else t5 = $[14];
+		$[11] = t2;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
 	return t5;
 }
+/** A country, or several (`multiple`): their flags and their names in the user's locale. */
+function CountryDisplay(t0) {
+	const $ = c(8);
+	const { value } = t0;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== value) {
+		t3 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const codes = (Array.isArray(value) ? value : [value]).filter(_temp2);
+			if (codes.length === 0) {
+				let t4;
+				if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+					t4 = /* @__PURE__ */ jsx(EmptyValue, {});
+					$[4] = t4;
+				} else t4 = $[4];
+				t3 = t4;
+				break bb0;
+			}
+			if (codes.length === 1) {
+				t3 = /* @__PURE__ */ jsx(Country, { code: codes[0] });
+				break bb0;
+			}
+			t1 = Displays_module_default.countries;
+			t2 = codes.map(_temp3);
+		}
+		$[0] = value;
+		$[1] = t1;
+		$[2] = t2;
+		$[3] = t3;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+		t3 = $[3];
+	}
+	if (t3 !== Symbol.for("react.early_return_sentinel")) return t3;
+	let t4;
+	if ($[5] !== t1 || $[6] !== t2) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			children: t2
+		});
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+}
 /**
-* A region: its name in the user's locale, from its country in the item (the field's `from`) or
-* the field's settings. A region that Panneau doesn't know shows as it is.
+* A region: its flag, when it has one, and its name in the user's locale, from its country in the
+* item (the field's `from`) or the field's settings. A region that Panneau doesn't know shows as it
+* is.
 */
+function _temp3(code_0) {
+	return /* @__PURE__ */ jsx(Country, { code: code_0 }, code_0);
+}
+function _temp2(code) {
+	return typeof code === "string" && code !== "";
+}
 function RegionDisplay(t0) {
-	const $ = c(10);
+	const $ = c(17);
 	const { value, field, item } = t0;
 	const intl = usePanneauIntl();
 	if (typeof value !== "string" || value === "") {
@@ -668,38 +831,76 @@ function RegionDisplay(t0) {
 		} else t1 = $[0];
 		return t1;
 	}
+	let country;
 	let t1;
-	let t2;
 	if ($[1] !== field || $[2] !== intl.locale || $[3] !== item || $[4] !== value) {
-		const country = field !== null ? getRegionCountry(field, item) : null;
-		t1 = Displays_module_default.text;
-		t2 = getRegionName(country, value, intl.locale) ?? value;
+		country = field !== null ? getRegionCountry(field, item) : null;
+		t1 = getRegionName(country, value, intl.locale);
 		$[1] = field;
 		$[2] = intl.locale;
 		$[3] = item;
 		$[4] = value;
-		$[5] = t1;
-		$[6] = t2;
+		$[5] = country;
+		$[6] = t1;
 	} else {
-		t1 = $[5];
-		t2 = $[6];
+		country = $[5];
+		t1 = $[6];
 	}
+	const name = t1;
+	if (name === null) {
+		let t2;
+		if ($[7] !== value) {
+			t2 = /* @__PURE__ */ jsx("span", {
+				className: Displays_module_default.text,
+				"data-clamp": "",
+				children: value
+			});
+			$[7] = value;
+			$[8] = t2;
+		} else t2 = $[8];
+		return t2;
+	}
+	let t2;
+	if ($[9] !== country || $[10] !== value) {
+		t2 = /* @__PURE__ */ jsx(RegionFlag, {
+			country,
+			code: value,
+			className: Displays_module_default.regionFlag
+		});
+		$[9] = country;
+		$[10] = value;
+		$[11] = t2;
+	} else t2 = $[11];
 	let t3;
-	if ($[7] !== t1 || $[8] !== t2) {
+	if ($[12] !== name) {
 		t3 = /* @__PURE__ */ jsx("span", {
-			className: t1,
-			children: t2
+			className: Displays_module_default.text,
+			"data-clamp": "",
+			children: name
 		});
-		$[7] = t1;
-		$[8] = t2;
-		$[9] = t3;
-	} else t3 = $[9];
-	return t3;
+		$[12] = name;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== t2 || $[15] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("span", {
+			className: Displays_module_default.flagged,
+			children: [t2, t3]
+		});
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return t4;
 }
-/** A duration in seconds, with its units: `1 h 5 min`, to the precision of its field. */
+/**
+* A duration with its units, `1 h 5 min` or `2 d 4 h`: in the unit of its field (seconds by
+* default), from its largest unit to its precision.
+*/
 function DurationDisplay(t0) {
-	const $ = c(6);
+	const $ = c(9);
 	const { value, field } = t0;
+	const intl = usePanneauIntl();
 	if (typeof value !== "number" || Number.isNaN(value)) {
 		let t1;
 		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -708,24 +909,41 @@ function DurationDisplay(t0) {
 		} else t1 = $[0];
 		return t1;
 	}
-	const precision = field?.settings?.precision === "minutes" ? "minutes" : "seconds";
 	let t1;
-	if ($[1] !== precision || $[2] !== value) {
-		t1 = formatDuration(value, { precision });
-		$[1] = precision;
-		$[2] = value;
-		$[3] = t1;
-	} else t1 = $[3];
 	let t2;
-	if ($[4] !== t1) {
-		t2 = /* @__PURE__ */ jsx("span", {
-			className: Displays_module_default.number,
-			children: t1
+	if ($[1] !== field || $[2] !== intl || $[3] !== value) {
+		const labels = {
+			days: intl.formatMessage(fieldsMessages.daysUnit),
+			hours: intl.formatMessage(fieldsMessages.hoursUnit),
+			minutes: intl.formatMessage(fieldsMessages.minutesUnit),
+			seconds: intl.formatMessage(fieldsMessages.secondsUnit)
+		};
+		const units = field !== null ? getDurationUnits(field) : {};
+		t1 = Displays_module_default.number;
+		t2 = formatDuration(value, {
+			...units,
+			labels
 		});
+		$[1] = field;
+		$[2] = intl;
+		$[3] = value;
 		$[4] = t1;
 		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	let t3;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			children: t2
+		});
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
 }
 /** JSON on one line, shortened. */
 function JsonDisplay(t0) {
@@ -780,7 +998,7 @@ function TagsDisplay(t0) {
 	if ($[0] !== field?.options || $[1] !== value) {
 		t3 = Symbol.for("react.early_return_sentinel");
 		bb0: {
-			const tags = Array.isArray(value) ? value.filter(_temp2) : [];
+			const tags = Array.isArray(value) ? value.filter(_temp4) : [];
 			if (tags.length === 0) {
 				let t4;
 				if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
@@ -830,7 +1048,7 @@ function TagsDisplay(t0) {
 	return t4;
 }
 /** What a URL embeds: its thumbnail and title, linked to it. */
-function _temp2(tag) {
+function _temp4(tag) {
 	return typeof tag === "string";
 }
 function EmbedDisplay(t0) {
@@ -866,6 +1084,7 @@ function EmbedDisplay(t0) {
 	if ($[6] !== t2) {
 		t3 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: t2
 		});
 		$[6] = t2;
@@ -906,6 +1125,7 @@ function LocationDisplay(t0) {
 		if ($[1] !== address) {
 			t1 = /* @__PURE__ */ jsx("span", {
 				className: Displays_module_default.text,
+				"data-clamp": "",
 				children: address
 			});
 			$[1] = address;
@@ -958,10 +1178,183 @@ function LocationDisplay(t0) {
 	} else t4 = $[14];
 	return t4;
 }
-/** A swatch, with the color's code. */
-function ColorDisplay(t0) {
-	const $ = c(6);
+/** An address on one line, in the order of its country, after the flag of its country. */
+function AddressDisplay(t0) {
+	const $ = c(17);
 	const { value } = t0;
+	const intl = usePanneauIntl();
+	if (!isAddress(value)) {
+		let t1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	let t1;
+	if ($[1] !== intl.locale || $[2] !== value) {
+		t1 = formatAddress(value, intl.locale);
+		$[1] = intl.locale;
+		$[2] = value;
+		$[3] = t1;
+	} else t1 = $[3];
+	const text = t1;
+	const country = typeof value.country === "string" ? value.country : "";
+	if (text === "" && !isCountryCode(country)) {
+		let t2;
+		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[4] = t2;
+		} else t2 = $[4];
+		return t2;
+	}
+	let t2;
+	if ($[5] !== country || $[6] !== intl.locale) {
+		t2 = isCountryCode(country) ? /* @__PURE__ */ jsx("span", {
+			className: Displays_module_default.flag,
+			title: getCountryName(country, intl.locale),
+			children: getCountryFlag(country)
+		}) : null;
+		$[5] = country;
+		$[6] = intl.locale;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== country || $[9] !== intl.locale || $[10] !== text) {
+		t3 = text !== "" ? text : getCountryName(country, intl.locale);
+		$[8] = country;
+		$[9] = intl.locale;
+		$[10] = text;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: Displays_module_default.text,
+			"data-clamp": "",
+			children: t3
+		});
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== t2 || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("span", {
+			className: Displays_module_default.flagged,
+			children: [t2, t4]
+		});
+		$[14] = t2;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
+}
+var LINK_ICONS = {
+	url: Globe,
+	page: FileText,
+	email: Mail,
+	tel: Phone,
+	file: File
+};
+/**
+* A link: the icon of its type, and its label in the user's locale, or its page or its URL. It
+* opens its URL when it has one, in a new tab when the link does.
+*/
+function LinkDisplay(t0) {
+	const $ = c(19);
+	const { value } = t0;
+	const intl = usePanneauIntl();
+	if (!isLink(value)) {
+		let t1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	let t1;
+	if ($[1] !== intl.locale || $[2] !== value) {
+		t1 = getLinkText(value, intl.locale);
+		$[1] = intl.locale;
+		$[2] = value;
+		$[3] = t1;
+	} else t1 = $[3];
+	const text = t1;
+	if (text === null) {
+		let t2;
+		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[4] = t2;
+		} else t2 = $[4];
+		return t2;
+	}
+	const t2 = LINK_ICONS[value.type] ?? Hash;
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Icon, {
+			icon: t2,
+			size: "sm"
+		});
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	const icon = t3;
+	const url = typeof value.url === "string" && value.url !== "" ? value.url : null;
+	if (url === null) {
+		let t4;
+		if ($[7] !== text) {
+			t4 = /* @__PURE__ */ jsx("span", {
+				className: Displays_module_default.text,
+				"data-clamp": "",
+				children: text
+			});
+			$[7] = text;
+			$[8] = t4;
+		} else t4 = $[8];
+		let t5;
+		if ($[9] !== icon || $[10] !== t4) {
+			t5 = /* @__PURE__ */ jsxs("span", {
+				className: Displays_module_default.flagged,
+				children: [icon, t4]
+			});
+			$[9] = icon;
+			$[10] = t4;
+			$[11] = t5;
+		} else t5 = $[11];
+		return t5;
+	}
+	let t4;
+	if ($[12] !== value.newTab) {
+		t4 = value.newTab === true ? {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		} : {};
+		$[12] = value.newTab;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== icon || $[15] !== t4 || $[16] !== text || $[17] !== url) {
+		t5 = /* @__PURE__ */ jsxs("a", {
+			className: `${Displays_module_default.link} ${Displays_module_default.flagged}`,
+			href: url,
+			...t4,
+			children: [icon, text]
+		});
+		$[14] = icon;
+		$[15] = t4;
+		$[16] = text;
+		$[17] = url;
+		$[18] = t5;
+	} else t5 = $[18];
+	return t5;
+}
+/**
+* A swatch, with the color's code. A color of the field's palette (`settings.palette`) shows its
+* swatch and its label.
+*/
+function ColorDisplay(t0) {
+	const $ = c(18);
+	const { value, field } = t0;
 	if (typeof value !== "string" || value === "") {
 		let t1;
 		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -971,26 +1364,79 @@ function ColorDisplay(t0) {
 		return t1;
 	}
 	let t1;
-	if ($[1] !== value) {
-		t1 = /* @__PURE__ */ jsx("span", {
+	if ($[1] !== field || $[2] !== value) {
+		t1 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const entry = getColorPalette(field)?.find((candidate) => candidate.value === value);
+			if (entry !== void 0) {
+				const swatch = getSwatchColor(entry);
+				let t2;
+				if ($[4] !== swatch) {
+					t2 = swatch !== null ? { backgroundColor: swatch } : void 0;
+					$[4] = swatch;
+					$[5] = t2;
+				} else t2 = $[5];
+				let t3;
+				if ($[6] !== t2) {
+					t3 = /* @__PURE__ */ jsx("span", {
+						className: Displays_module_default.swatch,
+						style: t2,
+						"aria-hidden": "true"
+					});
+					$[6] = t2;
+					$[7] = t3;
+				} else t3 = $[7];
+				const t4 = entry.label ?? entry.value;
+				let t5;
+				if ($[8] !== t4) {
+					t5 = /* @__PURE__ */ jsx("span", {
+						className: Displays_module_default.text,
+						"data-clamp": "",
+						children: t4
+					});
+					$[8] = t4;
+					$[9] = t5;
+				} else t5 = $[9];
+				let t6;
+				if ($[10] !== t3 || $[11] !== t5) {
+					t6 = /* @__PURE__ */ jsxs("span", {
+						className: Displays_module_default.paletteColor,
+						children: [t3, t5]
+					});
+					$[10] = t3;
+					$[11] = t5;
+					$[12] = t6;
+				} else t6 = $[12];
+				t1 = t6;
+				break bb0;
+			}
+		}
+		$[1] = field;
+		$[2] = value;
+		$[3] = t1;
+	} else t1 = $[3];
+	if (t1 !== Symbol.for("react.early_return_sentinel")) return t1;
+	let t2;
+	if ($[13] !== value) {
+		t2 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.swatch,
 			style: { backgroundColor: value },
 			"aria-hidden": "true"
 		});
-		$[1] = value;
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] !== t1 || $[4] !== value) {
-		t2 = /* @__PURE__ */ jsxs("span", {
+		$[13] = value;
+		$[14] = t2;
+	} else t2 = $[14];
+	let t3;
+	if ($[15] !== t2 || $[16] !== value) {
+		t3 = /* @__PURE__ */ jsxs("span", {
 			className: Displays_module_default.color,
-			children: [t1, value]
+			children: [t2, value]
 		});
-		$[3] = t1;
-		$[4] = value;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
+		$[15] = t2;
+		$[16] = value;
+		$[17] = t3;
+	} else t3 = $[17];
+	return t3;
 }
 /** A thumbnail and the name of a media item (or of the first one). */
 function MediaDisplay(t0) {
@@ -1022,6 +1468,7 @@ function MediaDisplay(t0) {
 	if ($[3] !== label) {
 		t2 = label !== "" ? /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: label
 		}) : null;
 		$[3] = label;
@@ -1068,9 +1515,13 @@ var builtInDisplays = {
 	embed: EmbedDisplay,
 	location: LocationDisplay,
 	country: CountryDisplay,
-	region: RegionDisplay
+	region: RegionDisplay,
+	address: AddressDisplay,
+	link: LinkDisplay,
+	daterange: DateRangeDisplay,
+	money: MoneyDisplay
 };
 //#endregion
-export { BooleanDisplay, ColorDisplay, CountryDisplay, DateDisplay, DateTimeDisplay, DurationDisplay, EmailDisplay, EmbedDisplay, EmptyValue, JsonDisplay, LocationDisplay, MediaDisplay, NumberDisplay, RegionDisplay, RelationDisplay, RichTextDisplay, SelectDisplay, TagsDisplay, TelDisplay, TextDisplay, TimeDisplay, UrlDisplay, builtInDisplays };
+export { AddressDisplay, BooleanDisplay, ColorDisplay, CountryDisplay, DateDisplay, DateRangeDisplay, DateTimeDisplay, DurationDisplay, EmailDisplay, EmbedDisplay, EmptyValue, JsonDisplay, LinkDisplay, LocationDisplay, MediaDisplay, MoneyDisplay, NumberDisplay, RegionDisplay, RelationDisplay, RichTextDisplay, SelectDisplay, TagsDisplay, TelDisplay, TextDisplay, TimeDisplay, UrlDisplay, builtInDisplays };
 
 //# sourceMappingURL=displays.js.map