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

package/dist/displays/displays.js

@@ -1,11 +1,22 @@
 import { messages } from "../messages.js";
-import { getFieldOptions, getOptionLabel, toText } from "../values.js";
+import { findOption, getFieldOptions, isRecord, toText } from "../values.js";
+import { getImageUrl } from "../images.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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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 { 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() {
@@ -24,10 +35,13 @@ function EmptyValue() {
 function isEmpty(value) {
 	return value === null || value === void 0 || value === "" || Array.isArray(value) && value.length === 0;
 }
-/** Text, on two lines at most. The default display. */
+/**
+* Text, on two lines at most. The default display. The value of a `secret` text field
+* (`settings.secret`) shows as dots, never in clear.
+*/
 function TextDisplay(t0) {
-	const $ = c(5);
-	const { value } = t0;
+	const $ = c(10);
+	const { value, field } = t0;
 	const intl = usePanneauIntl();
 	let t1;
 	if ($[0] !== intl.locale || $[1] !== value) {
@@ -37,15 +51,43 @@ function TextDisplay(t0) {
 		$[2] = t1;
 	} else t1 = $[2];
 	const text = t1;
+	if (text === "") {
+		let t2;
+		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[3] = t2;
+		} else t2 = $[3];
+		return t2;
+	}
+	if (field?.settings?.secret === true) {
+		let t2;
+		if ($[4] !== intl) {
+			t2 = intl.formatMessage(messages.secretValue);
+			$[4] = intl;
+			$[5] = t2;
+		} else t2 = $[5];
+		let t3;
+		if ($[6] !== t2) {
+			t3 = /* @__PURE__ */ jsx("span", {
+				role: "img",
+				"aria-label": t2,
+				children: "••••••••"
+			});
+			$[6] = t2;
+			$[7] = t3;
+		} else t3 = $[7];
+		return t3;
+	}
 	let t2;
-	if ($[3] !== text) {
-		t2 = text === "" ? /* @__PURE__ */ jsx(EmptyValue, {}) : /* @__PURE__ */ jsx("span", {
+	if ($[8] !== text) {
+		t2 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: text
 		});
-		$[3] = text;
-		$[4] = t2;
-	} else t2 = $[4];
+		$[8] = text;
+		$[9] = t2;
+	} else t2 = $[9];
 	return t2;
 }
 /** HTML as plain text. */
@@ -63,6 +105,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;
@@ -253,6 +296,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);
@@ -324,7 +448,13 @@ function SelectDisplay(t0) {
 				break bb0;
 			}
 			t1 = Displays_module_default.badges;
-			t2 = values.map((entry) => /* @__PURE__ */ jsx(Badge, { children: getOptionLabel(options, entry) ?? String(entry) }, String(entry)));
+			t2 = values.map((entry) => {
+				const option = findOption(options, entry);
+				return /* @__PURE__ */ jsx(Badge, {
+					tone: option?.tone ?? "neutral",
+					children: option?.label ?? String(entry)
+				}, String(entry));
+			});
 		}
 		$[0] = field;
 		$[1] = value;
@@ -351,48 +481,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) {
@@ -461,11 +597,16 @@ function EmailDisplay(t0) {
 	} else t2 = $[3];
 	return t2;
 }
-/** A swatch, with the color's code. */
-function ColorDisplay(t0) {
-	const $ = c(6);
-	const { value } = t0;
-	if (typeof value !== "string" || value === "") {
+/**
+* A link that calls the phone number: the flag of its country and the number in its international
+* 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(20);
+	const { value, field } = t0;
+	const intl = usePanneauIntl();
+	if (typeof value !== "string" || value.trim() === "") {
 		let t1;
 		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
@@ -474,33 +615,216 @@ function ColorDisplay(t0) {
 		return t1;
 	}
 	let t1;
-	if ($[1] !== value) {
-		t1 = /* @__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", {
-			className: Displays_module_default.color,
-			children: [t1, value]
+	let t3;
+	let t4;
+	let t5;
+	if ($[1] !== field || $[2] !== intl || $[3] !== value) {
+		t5 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const { number: text, extension } = field === null || field.settings?.extension === true ? splitExtension(value) : {
+				number: value,
+				extension: null
+			};
+			const number = parsePhone(text);
+			if (number === null) {
+				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: t7,
+						children: value
+					});
+					$[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}${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] = field;
+		$[2] = intl;
+		$[3] = value;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = t5;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+		t3 = $[6];
+		t4 = $[7];
+		t5 = $[8];
+	}
+	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, t4]
 		});
+		$[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 Country(t0) {
+	const $ = c(14);
+	const { code } = t0;
+	const intl = usePanneauIntl();
+	if (!isCountryCode(code)) {
+		let t1;
+		if ($[0] !== code) {
+			t1 = /* @__PURE__ */ jsx("span", {
+				className: Displays_module_default.text,
+				"data-clamp": "",
+				children: code
+			});
+			$[0] = code;
+			$[1] = t1;
+		} else t1 = $[1];
+		return t1;
+	}
+	let t1;
+	if ($[2] !== code) {
+		t1 = getCountryFlag(code);
+		$[2] = code;
 		$[3] = t1;
-		$[4] = value;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: Displays_module_default.flag,
+			"aria-hidden": "true",
+			children: t1
+		});
+		$[4] = t1;
 		$[5] = t2;
 	} else t2 = $[5];
-	return t2;
+	let t3;
+	if ($[6] !== code || $[7] !== intl.locale) {
+		t3 = getCountryName(code, intl.locale);
+		$[6] = code;
+		$[7] = intl.locale;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: Displays_module_default.text,
+			"data-clamp": "",
+			children: t3
+		});
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t2 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("span", {
+			className: Displays_module_default.flagged,
+			children: [t2, t4]
+		});
+		$[11] = t2;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
 }
-/** A thumbnail and the name of a media item (or of the first one). */
-function MediaDisplay(t0) {
+/** A country, or several (`multiple`): their flags and their names in the user's locale. */
+function CountryDisplay(t0) {
 	const $ = c(8);
 	const { value } = t0;
-	const media = Array.isArray(value) ? value[0] : value;
-	if (media === null || typeof media !== "object") {
+	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 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(17);
+	const { value, field, item } = t0;
+	const intl = usePanneauIntl();
+	if (typeof value !== "string" || value === "") {
 		let t1;
 		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
@@ -508,45 +832,768 @@ function MediaDisplay(t0) {
 		} else t1 = $[0];
 		return t1;
 	}
-	const { thumbnailUrl, url, name, filename } = media;
-	const source = typeof thumbnailUrl === "string" ? thumbnailUrl : typeof url === "string" ? url : null;
-	const label = typeof name === "string" ? name : typeof filename === "string" ? filename : "";
+	let country;
 	let t1;
-	if ($[1] !== source) {
-		t1 = source !== null ? /* @__PURE__ */ jsx("img", {
-			className: Displays_module_default.thumbnail,
-			src: source,
-			alt: ""
-		}) : null;
-		$[1] = source;
-		$[2] = t1;
-	} else t1 = $[2];
+	if ($[1] !== field || $[2] !== intl.locale || $[3] !== item || $[4] !== value) {
+		country = field !== null ? getRegionCountry(field, item) : null;
+		t1 = getRegionName(country, value, intl.locale);
+		$[1] = field;
+		$[2] = intl.locale;
+		$[3] = item;
+		$[4] = value;
+		$[5] = country;
+		$[6] = t1;
+	} else {
+		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 ($[3] !== label) {
-		t2 = label !== "" ? /* @__PURE__ */ jsx("span", {
-			className: Displays_module_default.text,
-			children: label
-		}) : null;
-		$[3] = label;
-		$[4] = t2;
-	} else t2 = $[4];
+	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 ($[5] !== t1 || $[6] !== t2) {
-		t3 = /* @__PURE__ */ jsxs("span", {
-			className: Displays_module_default.media,
-			children: [t1, t2]
+	if ($[12] !== name) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: Displays_module_default.text,
+			"data-clamp": "",
+			children: name
 		});
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	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;
 }
 /**
-* The built-in displays, by name. A column's display is its `display`, its field's `display`, or
-* its field's type: field types are display names. Values without a known display are shown as
-* text.
+* 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(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")) {
+			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	let t1;
+	let t2;
+	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 {
+		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) {
+	const $ = c(9);
+	const { value } = t0;
+	if (value === null || value === void 0 || typeof value !== "object") {
+		let t1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	let t1;
+	let t2;
+	let t3;
+	if ($[1] !== value) {
+		const json = JSON.stringify(value);
+		t1 = Displays_module_default.code;
+		t2 = json.length > 80 ? json : void 0;
+		t3 = json.length > 80 ? `${json.slice(0, 79)}…` : json;
+		$[1] = value;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+	}
+	let t4;
+	if ($[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx("code", {
+			className: t1,
+			title: t2,
+			children: t3
+		});
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+/** Tags, as badges, with the labels of their options. */
+function TagsDisplay(t0) {
+	const $ = c(13);
+	const { value, field } = t0;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== field?.options || $[1] !== value) {
+		t3 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const tags = Array.isArray(value) ? value.filter(_temp4) : [];
+			if (tags.length === 0) {
+				let t4;
+				if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+					t4 = /* @__PURE__ */ jsx(EmptyValue, {});
+					$[5] = t4;
+				} else t4 = $[5];
+				t3 = t4;
+				break bb0;
+			}
+			let t4;
+			if ($[6] !== field?.options) {
+				t4 = field?.options ?? [];
+				$[6] = field?.options;
+				$[7] = t4;
+			} else t4 = $[7];
+			const options = t4;
+			t1 = Displays_module_default.tags;
+			let t5;
+			if ($[8] !== options) {
+				t5 = (tag_0) => /* @__PURE__ */ jsx(Badge, { children: options.find((option) => String(option.value) === tag_0)?.label ?? tag_0 }, tag_0);
+				$[8] = options;
+				$[9] = t5;
+			} else t5 = $[9];
+			t2 = tags.map(t5);
+		}
+		$[0] = field?.options;
+		$[1] = value;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+	}
+	if (t3 !== Symbol.for("react.early_return_sentinel")) return t3;
+	let t4;
+	if ($[10] !== t1 || $[11] !== t2) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			children: t2
+		});
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+}
+/** What a URL embeds: its thumbnail and title, linked to it. */
+function _temp4(tag) {
+	return typeof tag === "string";
+}
+function EmbedDisplay(t0) {
+	const $ = c(12);
+	const { value } = t0;
+	if (value === null || typeof value !== "object" || typeof value.url !== "string") {
+		let t1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	const { url, title, thumbnailUrl } = value;
+	let t1;
+	if ($[1] !== thumbnailUrl) {
+		t1 = typeof thumbnailUrl === "string" ? /* @__PURE__ */ jsx("img", {
+			className: Displays_module_default.thumbnail,
+			src: thumbnailUrl,
+			alt: ""
+		}) : null;
+		$[1] = thumbnailUrl;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== title || $[4] !== url) {
+		t2 = typeof title === "string" ? title : url.replace(/^https?:\/\//, "");
+		$[3] = title;
+		$[4] = url;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: Displays_module_default.text,
+			"data-clamp": "",
+			children: t2
+		});
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t1 || $[9] !== t3 || $[10] !== url) {
+		t4 = /* @__PURE__ */ jsxs("a", {
+			className: `${Displays_module_default.link} ${Displays_module_default.media}`,
+			href: url,
+			target: "_blank",
+			rel: "noreferrer",
+			children: [t1, t3]
+		});
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = url;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+/** A place: its address, or its coordinates. */
+function LocationDisplay(t0) {
+	const $ = c(15);
+	const { value } = t0;
+	const intl = usePanneauIntl();
+	if (value === null || typeof value !== "object") {
+		let t1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	const { lat, lng, address } = value;
+	if (typeof address === "string" && address !== "") {
+		let t1;
+		if ($[1] !== address) {
+			t1 = /* @__PURE__ */ jsx("span", {
+				className: Displays_module_default.text,
+				"data-clamp": "",
+				children: address
+			});
+			$[1] = address;
+			$[2] = t1;
+		} else t1 = $[2];
+		return t1;
+	}
+	if (typeof lat !== "number" || typeof lng !== "number") {
+		let t1;
+		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[3] = t1;
+		} else t1 = $[3];
+		return t1;
+	}
+	let t1;
+	if ($[4] !== intl) {
+		t1 = (number) => intl.formatNumber(number, { maximumFractionDigits: 5 });
+		$[4] = intl;
+		$[5] = t1;
+	} else t1 = $[5];
+	const format = t1;
+	let t2;
+	if ($[6] !== format || $[7] !== lat) {
+		t2 = format(lat);
+		$[6] = format;
+		$[7] = lat;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== format || $[10] !== lng) {
+		t3 = format(lng);
+		$[9] = format;
+		$[10] = lng;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== t2 || $[13] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("span", {
+			className: Displays_module_default.number,
+			children: [
+				t2,
+				", ",
+				t3
+			]
+		});
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	return t4;
+}
+/** 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")) {
+			t1 = /* @__PURE__ */ jsx(EmptyValue, {});
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	let t1;
+	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"
+		});
+		$[13] = value;
+		$[14] = t2;
+	} else t2 = $[14];
+	let t3;
+	if ($[15] !== t2 || $[16] !== value) {
+		t3 = /* @__PURE__ */ jsxs("span", {
+			className: Displays_module_default.color,
+			children: [t2, value]
+		});
+		$[15] = t2;
+		$[16] = value;
+		$[17] = t3;
+	} else t3 = $[17];
+	return t3;
+}
+/** The text of a media, a reference or a file: its label, name or file name. */
+function mediaLabel(value) {
+	for (const key of [
+		"label",
+		"name",
+		"filename"
+	]) {
+		const text = value[key];
+		if (typeof text === "string" && text !== "") return text;
+	}
+	return "";
+}
+/**
+* A thumbnail and the name of a media (or of the first one), for `media` and `image` values:
+* a media reference (`{ id, label, media }`), or a media with its URLs.
+*/
+function MediaDisplay(t0) {
+	const $ = c(12);
+	const { value } = t0;
+	const media = Array.isArray(value) ? value[0] : value;
+	if (!isRecord(media)) {
+		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] !== media) {
+		t1 = getImageUrl(media);
+		$[1] = media;
+		$[2] = t1;
+	} else t1 = $[2];
+	const source = t1;
+	let t2;
+	if ($[3] !== media) {
+		t2 = mediaLabel(media);
+		$[3] = media;
+		$[4] = t2;
+	} else t2 = $[4];
+	const label = t2;
+	let t3;
+	if ($[5] !== source) {
+		t3 = source !== null ? /* @__PURE__ */ jsx("img", {
+			className: Displays_module_default.thumbnail,
+			src: source,
+			alt: "",
+			loading: "lazy"
+		}) : null;
+		$[5] = source;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== label) {
+		t4 = label !== "" ? /* @__PURE__ */ jsx("span", {
+			className: Displays_module_default.text,
+			"data-clamp": "",
+			children: label
+		}) : null;
+		$[7] = label;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t3 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("span", {
+			className: Displays_module_default.media,
+			children: [t3, t4]
+		});
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+/**
+* Stored files (`file` values): the thumbnail of an image, or an icon, and the name of each file,
+* linked to its URL.
+*/
+function FileDisplay(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 files = (Array.isArray(value) ? value : [value]).filter(isRecord);
+			if (files.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;
+			}
+			t1 = Displays_module_default.files;
+			t2 = files.map(_temp5);
+		}
+		$[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;
+}
+/**
+* The built-in displays, by name. A column's display is its `display`, its field's `display`, or
+* its field's type: field types are display names. Values without a known display are shown as
+* text.
+*/
+function _temp5(file, index) {
+	const image = getImageUrl(file);
+	const name = mediaLabel(file);
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [image !== null ? /* @__PURE__ */ jsx("img", {
+		className: Displays_module_default.thumbnail,
+		src: image,
+		alt: "",
+		loading: "lazy"
+	}) : /* @__PURE__ */ jsx(Icon, {
+		icon: File,
+		size: "sm"
+	}), /* @__PURE__ */ jsx("span", {
+		className: Displays_module_default.text,
+		"data-clamp": "",
+		children: name !== "" ? name : typeof file.url === "string" ? file.url : ""
+	})] });
+	return typeof file.url === "string" && file.url !== "" ? /* @__PURE__ */ jsx("a", {
+		className: `${Displays_module_default.link} ${Displays_module_default.media}`,
+		href: file.url,
+		target: "_blank",
+		rel: "noreferrer",
+		children: content
+	}, index) : /* @__PURE__ */ jsx("span", {
+		className: Displays_module_default.media,
+		children: content
+	}, index);
+}
 var builtInDisplays = {
 	text: TextDisplay,
 	textarea: TextDisplay,
@@ -562,9 +1609,24 @@ var builtInDisplays = {
 	url: UrlDisplay,
 	email: EmailDisplay,
 	color: ColorDisplay,
-	media: MediaDisplay
+	media: MediaDisplay,
+	image: MediaDisplay,
+	file: FileDisplay,
+	tel: TelDisplay,
+	range: NumberDisplay,
+	duration: DurationDisplay,
+	json: JsonDisplay,
+	tags: TagsDisplay,
+	embed: EmbedDisplay,
+	location: LocationDisplay,
+	country: CountryDisplay,
+	region: RegionDisplay,
+	address: AddressDisplay,
+	link: LinkDisplay,
+	daterange: DateRangeDisplay,
+	money: MoneyDisplay
 };
 //#endregion
-export { BooleanDisplay, ColorDisplay, DateDisplay, DateTimeDisplay, EmailDisplay, EmptyValue, MediaDisplay, NumberDisplay, RelationDisplay, RichTextDisplay, SelectDisplay, TextDisplay, TimeDisplay, UrlDisplay, builtInDisplays };
+export { AddressDisplay, BooleanDisplay, ColorDisplay, CountryDisplay, DateDisplay, DateRangeDisplay, DateTimeDisplay, DurationDisplay, EmailDisplay, EmbedDisplay, EmptyValue, FileDisplay, JsonDisplay, LinkDisplay, LocationDisplay, MediaDisplay, MoneyDisplay, NumberDisplay, RegionDisplay, RelationDisplay, RichTextDisplay, SelectDisplay, TagsDisplay, TelDisplay, TextDisplay, TimeDisplay, UrlDisplay, builtInDisplays };
 
 //# sourceMappingURL=displays.js.map