@declarion/react 0.65.1 → 0.66.1

package/dist-lib/components/primitives/Fields.js

@@ -0,0 +1,751 @@
+import { Icon as e } from "./Icons.js";
+import { Btn as t } from "./Btn.js";
+import { IconBtn as n } from "./IconBtn.js";
+import { Dropdown as r } from "./Dropdown.js";
+import { Chip as i } from "./Chip.js";
+import { useText as a } from "../../hooks/useText.js";
+import { BoolToggle as o } from "./BoolToggle.js";
+import { MenuItem as s } from "./MenuItem.js";
+import { useMemo as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/primitives/Fields.tsx
+var m = ({ children: t, required: n, hint: r, htmlFor: i, id: a }) => /* @__PURE__ */ p("div", {
+	style: {
+		display: "flex",
+		alignItems: "center",
+		gap: 4,
+		fontSize: 11.5,
+		color: "var(--text-3)",
+		fontWeight: 500,
+		marginBottom: 4,
+		letterSpacing: "0.01em"
+	},
+	children: [
+		i ? /* @__PURE__ */ f("label", {
+			id: a,
+			htmlFor: i,
+			children: t
+		}) : /* @__PURE__ */ f("span", {
+			id: a,
+			children: t
+		}),
+		n && /* @__PURE__ */ f("span", {
+			"aria-hidden": "true",
+			style: { color: "var(--danger)" },
+			children: "*"
+		}),
+		r && /* @__PURE__ */ f("span", {
+			title: r,
+			style: {
+				cursor: "help",
+				color: "var(--text-4)",
+				display: "flex"
+			},
+			children: /* @__PURE__ */ f(e.info, { size: 11 })
+		})
+	]
+}), h = {
+	width: "100%",
+	height: "var(--control-height)",
+	padding: "0 10px",
+	fontSize: "var(--control-font-size)",
+	lineHeight: "var(--control-line-height)",
+	background: "var(--surface)",
+	color: "var(--text)",
+	border: "1px solid var(--border)",
+	borderRadius: "var(--radius-md)",
+	outline: "none",
+	transition: "border-color .12s, box-shadow .12s"
+};
+function g({ value: e, onChange: t, placeholder: n, prefix: r, suffix: i, style: a, ...o }) {
+	let [s, c] = u(!1);
+	return /* @__PURE__ */ p("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 6,
+			...h,
+			padding: r || i ? "0 8px" : "0 10px",
+			borderColor: s ? "var(--accent)" : "var(--border)",
+			boxShadow: s ? "0 0 0 3px var(--accent-ring)" : "none",
+			...a
+		},
+		children: [
+			r && /* @__PURE__ */ f("span", {
+				style: {
+					color: "var(--text-3)",
+					display: "flex"
+				},
+				children: r
+			}),
+			/* @__PURE__ */ f("input", {
+				value: e ?? "",
+				onChange: (e) => t?.(e.target.value),
+				placeholder: n,
+				onFocus: () => c(!0),
+				onBlur: () => c(!1),
+				style: {
+					border: 0,
+					outline: 0,
+					background: "transparent",
+					flex: 1,
+					fontSize: "var(--control-font-size)",
+					color: "var(--text)",
+					padding: 0,
+					minWidth: 0
+				},
+				...o
+			}),
+			i && /* @__PURE__ */ f("span", {
+				style: {
+					color: "var(--text-3)",
+					display: "flex"
+				},
+				children: i
+			})
+		]
+	});
+}
+function _({ value: e, onChange: t, placeholder: n, rows: r = 4, fill: i, id: a, name: o, ariaRequired: s }) {
+	let [c, l] = u(!1), d = i ? {
+		flex: 1,
+		height: "100%",
+		minHeight: 0,
+		resize: "none"
+	} : {
+		height: "auto",
+		resize: "vertical"
+	};
+	return /* @__PURE__ */ f("textarea", {
+		id: a,
+		name: o,
+		"aria-required": s || void 0,
+		value: e ?? "",
+		onChange: (e) => t?.(e.target.value),
+		placeholder: n,
+		rows: i ? void 0 : r,
+		onFocus: () => l(!0),
+		onBlur: () => l(!1),
+		style: {
+			...h,
+			padding: "8px 10px",
+			lineHeight: 1.5,
+			...d,
+			borderColor: c ? "var(--accent)" : "var(--border)",
+			boxShadow: c ? "0 0 0 3px var(--accent-ring)" : "none",
+			fontFamily: "inherit"
+		}
+	});
+}
+var v = 20, y = 100;
+function b(e) {
+	return typeof e.label == "string" || typeof e.label == "number" ? String(e.label) : e.value;
+}
+function x({ value: t, options: n, onChange: i, placeholder: o, onSearchChange: m, ..._ }) {
+	let x = a(), [S, C] = u(!1), [w, T] = u(""), E = l(null), D = n.find((e) => !e.heading && !e.divider && e.value === t), O = n.filter((e) => !e.heading && !e.divider).length, k = !!m, A = k || O > v, j = (e) => {
+		T(e), m?.(e);
+	}, M = c(() => {
+		if (k) return n.slice(0, y);
+		let e = w.trim().toLowerCase();
+		return e ? n.filter((t) => !t.heading && !t.divider && b(t).toLowerCase().includes(e)).slice(0, y) : n.slice(0, y);
+	}, [
+		n,
+		w,
+		k
+	]);
+	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("button", {
+		..._,
+		type: "button",
+		ref: E,
+		"aria-haspopup": "listbox",
+		"aria-expanded": S,
+		onClick: () => {
+			C((e) => {
+				let t = !e;
+				return t && j(""), t;
+			});
+		},
+		style: {
+			...h,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			textAlign: "left",
+			cursor: "pointer",
+			..._.style,
+			color: D ? "var(--text)" : "var(--text-placeholder)"
+		},
+		children: [/* @__PURE__ */ f("span", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 6,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			},
+			children: D ? D.label : o ?? x("control.select.placeholder", "Select…")
+		}), /* @__PURE__ */ f(e.down, {
+			size: 12,
+			cls: "",
+			style: {
+				color: "var(--text-3)",
+				flexShrink: 0
+			}
+		})]
+	}), /* @__PURE__ */ p(r, {
+		open: S,
+		anchor: E.current,
+		onClose: () => C(!1),
+		width: E.current?.offsetWidth,
+		style: {
+			maxHeight: "min(360px, calc(var(--app-height) - 24px))",
+			overflowY: "auto"
+		},
+		children: [
+			A && /* @__PURE__ */ f("div", {
+				style: {
+					padding: 6,
+					position: "sticky",
+					top: -4,
+					background: "var(--surface)",
+					zIndex: 1
+				},
+				children: /* @__PURE__ */ f(g, {
+					value: w,
+					onChange: j,
+					placeholder: x("control.search", "Search…"),
+					prefix: /* @__PURE__ */ f(e.search, { size: 12 }),
+					autoFocus: !0
+				})
+			}),
+			M.map((e, n) => e.divider ? /* @__PURE__ */ f("div", { style: {
+				borderTop: "1px solid var(--divider)",
+				margin: "4px 0"
+			} }, `divider-${n}`) : e.heading ? /* @__PURE__ */ f("div", {
+				style: {
+					padding: "6px 10px 2px",
+					fontSize: 10.5,
+					fontWeight: 600,
+					color: "var(--text-3)",
+					textTransform: "uppercase",
+					letterSpacing: "0.06em"
+				},
+				children: e.label
+			}, `heading-${n}`) : /* @__PURE__ */ f(s, {
+				onClick: () => {
+					i(e.value), C(!1);
+				},
+				active: e.value === t,
+				children: e.label
+			}, e.value)),
+			M.length === 0 && /* @__PURE__ */ f("div", {
+				style: {
+					padding: "8px 10px",
+					fontSize: 12.5,
+					color: "var(--text-3)"
+				},
+				children: x("control.no_matches", "No matches")
+			})
+		]
+	})] });
+}
+function S({ value: t = [], options: n, onChange: i, placeholder: o, ...m }) {
+	let _ = a(), [x, S] = u(!1), [C, w] = u(""), T = l(null), E = n.filter((e) => !e.heading && !e.divider), D = E.length > v, O = t.map((e) => E.find((t) => t.value === e) ?? {
+		value: e,
+		label: e
+	}), k = c(() => {
+		let e = C.trim().toLowerCase();
+		return e ? n.filter((t) => !t.heading && !t.divider && b(t).toLowerCase().includes(e)).slice(0, y) : n.slice(0, y);
+	}, [n, C]), A = (e) => i(t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("button", {
+		...m,
+		type: "button",
+		ref: T,
+		"aria-haspopup": "listbox",
+		"aria-expanded": x,
+		onClick: () => {
+			S((e) => {
+				let t = !e;
+				return t && w(""), t;
+			});
+		},
+		style: {
+			...h,
+			height: "auto",
+			minHeight: "var(--control-height)",
+			display: "flex",
+			alignItems: "center",
+			flexWrap: "wrap",
+			gap: 4,
+			padding: O.length ? "3px 8px" : "0 10px",
+			textAlign: "left",
+			cursor: "pointer",
+			...m.style
+		},
+		children: [O.length === 0 ? /* @__PURE__ */ f("span", {
+			style: {
+				flex: 1,
+				color: "var(--text-placeholder)"
+			},
+			children: o ?? _("control.select.placeholder", "Select…")
+		}) : O.map((t) => /* @__PURE__ */ p("span", {
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				gap: 4,
+				height: 22,
+				padding: "0 4px 0 8px",
+				borderRadius: "var(--radius-md)",
+				background: "var(--surface-3)",
+				border: "1px solid var(--border)",
+				fontSize: 12,
+				color: "var(--text-2)",
+				maxWidth: "100%"
+			},
+			children: [/* @__PURE__ */ f("span", {
+				style: {
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				},
+				children: t.label
+			}), /* @__PURE__ */ f("span", {
+				role: "button",
+				"aria-label": _("control.remove_value", "Remove {value}", { value: b(t) }),
+				onClick: (e) => {
+					e.stopPropagation(), A(t.value);
+				},
+				style: {
+					display: "flex",
+					color: "var(--text-3)",
+					cursor: "pointer",
+					flexShrink: 0
+				},
+				children: /* @__PURE__ */ f(e.x, { size: 12 })
+			})]
+		}, t.value)), /* @__PURE__ */ f(e.down, {
+			size: 12,
+			cls: "",
+			style: {
+				color: "var(--text-3)",
+				marginLeft: "auto",
+				flexShrink: 0
+			}
+		})]
+	}), /* @__PURE__ */ p(r, {
+		open: x,
+		anchor: T.current,
+		onClose: () => S(!1),
+		width: T.current?.offsetWidth,
+		style: {
+			maxHeight: "min(360px, calc(var(--app-height) - 24px))",
+			overflowY: "auto"
+		},
+		children: [
+			D && /* @__PURE__ */ f("div", {
+				style: {
+					padding: 6,
+					position: "sticky",
+					top: -4,
+					background: "var(--surface)",
+					zIndex: 1
+				},
+				children: /* @__PURE__ */ f(g, {
+					value: C,
+					onChange: w,
+					placeholder: _("control.search", "Search…"),
+					prefix: /* @__PURE__ */ f(e.search, { size: 12 }),
+					autoFocus: !0
+				})
+			}),
+			k.map((n, r) => {
+				if (n.divider) return /* @__PURE__ */ f("div", { style: {
+					borderTop: "1px solid var(--divider)",
+					margin: "4px 0"
+				} }, `divider-${r}`);
+				if (n.heading) return /* @__PURE__ */ f("div", {
+					style: {
+						padding: "6px 10px 2px",
+						fontSize: 10.5,
+						fontWeight: 600,
+						color: "var(--text-3)",
+						textTransform: "uppercase",
+						letterSpacing: "0.06em"
+					},
+					children: n.label
+				}, `heading-${r}`);
+				let i = t.includes(n.value);
+				return /* @__PURE__ */ f(s, {
+					active: i,
+					icon: i ? /* @__PURE__ */ f(e.check, { size: 13 }) : /* @__PURE__ */ f("span", { style: {
+						display: "inline-block",
+						width: 13
+					} }),
+					onClick: () => A(n.value),
+					children: n.label
+				}, n.value);
+			}),
+			k.length === 0 && /* @__PURE__ */ f("div", {
+				style: {
+					padding: "8px 10px",
+					fontSize: 12.5,
+					color: "var(--text-3)"
+				},
+				children: _("control.no_matches", "No matches")
+			})
+		]
+	})] });
+}
+function C({ value: t, onChange: n }) {
+	let r = a();
+	return /* @__PURE__ */ f(g, {
+		value: t || "",
+		onChange: n,
+		placeholder: r("control.date.placeholder", "YYYY-MM-DD HH:mm"),
+		prefix: /* @__PURE__ */ f(e.calendar, { size: 13 })
+	});
+}
+function w(e) {
+	if (!e) return 0;
+	let t = 0;
+	return e.length >= 8 && t++, e.length >= 12 && t++, /[A-Z]/.test(e) && /[a-z]/.test(e) && t++, /\d/.test(e) && t++, /[^A-Za-z0-9]/.test(e) && t++, Math.min(4, t);
+}
+var T = [
+	(e) => e("control.password.strength.too_short", "Too short"),
+	(e) => e("control.password.strength.weak", "Weak"),
+	(e) => e("control.password.strength.fair", "Fair"),
+	(e) => e("control.password.strength.good", "Good"),
+	(e) => e("control.password.strength.strong", "Strong")
+], E = [
+	"var(--danger)",
+	"var(--danger)",
+	"var(--warning, #B45309)",
+	"var(--accent)",
+	"var(--success, #3FBF8F)"
+];
+function D({ value: t, onChange: n, placeholder: r, showStrength: i, id: o, name: s, ariaRequired: c }) {
+	let l = a(), [d, m] = u(!1), h = t || "", _ = w(h);
+	return /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f(g, {
+		id: o,
+		name: s,
+		"aria-required": c || void 0,
+		type: d ? "text" : "password",
+		value: h,
+		onChange: n,
+		placeholder: r ?? l("control.password.placeholder", "Enter password"),
+		suffix: /* @__PURE__ */ f("button", {
+			type: "button",
+			"aria-label": d ? l("control.password.hide", "Hide password") : l("control.password.show", "Show password"),
+			style: {
+				background: "none",
+				border: 0,
+				padding: 0,
+				cursor: "pointer",
+				color: "var(--text-3)",
+				display: "flex"
+			},
+			onClick: () => m((e) => !e),
+			children: f(d ? e.eyeOff : e.eye, { size: 14 })
+		})
+	}), i && /* @__PURE__ */ p("div", {
+		style: {
+			marginTop: 6,
+			display: "flex",
+			alignItems: "center",
+			gap: 8
+		},
+		children: [/* @__PURE__ */ f("div", {
+			style: {
+				display: "flex",
+				gap: 3,
+				flex: 1
+			},
+			children: [
+				0,
+				1,
+				2,
+				3
+			].map((e) => /* @__PURE__ */ f("span", { style: {
+				flex: 1,
+				height: 3,
+				borderRadius: 999,
+				background: e < _ ? E[_] : "var(--surface-3)",
+				transition: "background .15s"
+			} }, e))
+		}), /* @__PURE__ */ f("span", {
+			style: {
+				fontSize: 10.5,
+				color: "var(--text-3)",
+				minWidth: 54,
+				textAlign: "right"
+			},
+			children: h ? T[_](l) : ""
+		})]
+	})] });
+}
+function O({ value: e = [], onChange: t }) {
+	let n = a(), [r, o] = u("");
+	return /* @__PURE__ */ p("div", {
+		style: {
+			...h,
+			height: "auto",
+			minHeight: "var(--control-height)",
+			display: "flex",
+			flexWrap: "wrap",
+			gap: 4,
+			padding: "4px 6px",
+			alignItems: "center"
+		},
+		children: [e.map((n, r) => /* @__PURE__ */ f(i, {
+			tone: "slate",
+			onRemove: () => t(e.filter((e, t) => t !== r)),
+			children: n
+		}, r)), /* @__PURE__ */ f("input", {
+			value: r,
+			onChange: (e) => o(e.target.value),
+			onKeyDown: (n) => {
+				n.key === "Enter" && r.trim() && (t([...e, r.trim()]), o(""), n.preventDefault()), n.key === "Backspace" && !r && e.length && t(e.slice(0, -1));
+			},
+			placeholder: e.length ? "" : n("control.tags.placeholder", "Add tag… (Enter)"),
+			style: {
+				border: 0,
+				outline: 0,
+				flex: 1,
+				minWidth: 80,
+				background: "transparent",
+				fontSize: "var(--control-font-size)",
+				padding: "4px 2px"
+			}
+		})]
+	});
+}
+var k = "JSON";
+function A({ value: e, onChange: n }) {
+	let r = a();
+	return /* @__PURE__ */ p("div", {
+		style: {
+			border: "1px solid var(--border)",
+			borderRadius: "var(--radius-md)",
+			background: "var(--surface-2)",
+			overflow: "hidden"
+		},
+		children: [/* @__PURE__ */ p("div", {
+			style: {
+				padding: "6px 10px",
+				background: "var(--surface-3)",
+				borderBottom: "1px solid var(--border)",
+				display: "flex",
+				alignItems: "center",
+				gap: 8
+			},
+			children: [
+				/* @__PURE__ */ f("span", {
+					className: "mono",
+					style: {
+						fontSize: 10.5,
+						color: "var(--text-3)",
+						textTransform: "uppercase",
+						letterSpacing: "0.04em"
+					},
+					children: k
+				}),
+				/* @__PURE__ */ f("span", { style: { flex: 1 } }),
+				/* @__PURE__ */ f(t, {
+					size: "xs",
+					kind: "ghost",
+					children: r("control.json.format", "Format")
+				}),
+				/* @__PURE__ */ f(t, {
+					size: "xs",
+					kind: "ghost",
+					children: r("control.json.validate", "Validate")
+				})
+			]
+		}), /* @__PURE__ */ f("textarea", {
+			className: "mono",
+			value: e || "",
+			onChange: (e) => n?.(e.target.value),
+			style: {
+				width: "100%",
+				minHeight: 140,
+				padding: "10px 12px",
+				fontSize: "var(--control-font-size)",
+				lineHeight: 1.6,
+				background: "transparent",
+				border: 0,
+				outline: 0,
+				resize: "vertical",
+				color: "var(--text)"
+			}
+		})]
+	});
+}
+function j({ value: t, entity: n = "company", onChange: i, items: o = [], id: c, ariaLabelledby: m, ariaRequired: _ }) {
+	let v = a(), [y, b] = u(!1), x = l(null);
+	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("button", {
+		type: "button",
+		id: c,
+		"aria-labelledby": m,
+		"aria-required": _ || void 0,
+		ref: x,
+		onClick: () => b(!0),
+		style: {
+			...h,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			textAlign: "left",
+			cursor: "pointer"
+		},
+		children: [/* @__PURE__ */ p("span", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8,
+				overflow: "hidden"
+			},
+			children: [/* @__PURE__ */ f("span", {
+				style: {
+					width: 18,
+					height: 18,
+					borderRadius: "var(--radius-sm)",
+					background: "var(--accent-soft)",
+					color: "var(--accent)",
+					display: "inline-flex",
+					alignItems: "center",
+					justifyContent: "center"
+				},
+				children: /* @__PURE__ */ f(e.link, { size: 11 })
+			}), /* @__PURE__ */ f("span", {
+				style: { color: t ? "var(--accent)" : "var(--text-placeholder)" },
+				children: t || v("control.ref.link_to", "Link to {entity}…", { entity: n })
+			})]
+		}), /* @__PURE__ */ f(e.search, {
+			size: 12,
+			cls: "",
+			style: { color: "var(--text-3)" }
+		})]
+	}), /* @__PURE__ */ p(r, {
+		open: y,
+		anchor: x.current,
+		onClose: () => b(!1),
+		width: x.current?.offsetWidth,
+		children: [/* @__PURE__ */ f("div", {
+			style: { padding: 4 },
+			children: /* @__PURE__ */ f(g, {
+				placeholder: v("control.ref.search", "Search {entity}…", { entity: n }),
+				prefix: /* @__PURE__ */ f(e.search, { size: 12 }),
+				style: { marginBottom: 4 }
+			})
+		}), o.slice(0, 6).map((t) => /* @__PURE__ */ f(s, {
+			icon: /* @__PURE__ */ f(e.building, { size: 13 }),
+			onClick: () => {
+				i?.(t.name), b(!1);
+			},
+			children: t.name
+		}, t.id))]
+	})] });
+}
+function M({ label: e, children: t, mono: n, wide: r, empty: i }) {
+	return /* @__PURE__ */ p("div", {
+		style: {
+			display: "flex",
+			flexDirection: r ? "column" : "row",
+			gap: r ? 4 : 16,
+			minHeight: 24,
+			alignItems: "baseline"
+		},
+		children: [/* @__PURE__ */ f("div", {
+			style: {
+				width: r ? "auto" : 140,
+				flexShrink: 0,
+				fontSize: 11.5,
+				color: "var(--text-3)",
+				fontWeight: 500,
+				letterSpacing: "0.01em"
+			},
+			children: e
+		}), /* @__PURE__ */ f("div", {
+			className: n ? "mono num" : "num",
+			style: {
+				flex: 1,
+				fontSize: 12.5,
+				color: i ? "var(--text-4)" : "var(--text)",
+				lineHeight: "22px",
+				minWidth: 0,
+				wordBreak: "break-word"
+			},
+			children: i ? "—" : t
+		})]
+	});
+}
+function N({ value: t, onChange: r, type: i = "text", options: s }) {
+	let c = a(), [l, m] = u(!1), [h, _] = u(t), v = () => {
+		h !== void 0 && r?.(h), m(!1);
+	}, y = () => {
+		_(t), m(!1);
+	};
+	return l ? /* @__PURE__ */ p("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 4
+		},
+		onKeyDown: (e) => {
+			e.key === "Enter" && v(), e.key === "Escape" && y();
+		},
+		children: [i === "select" ? /* @__PURE__ */ f(x, {
+			value: h,
+			options: s || [],
+			onChange: (e) => {
+				_(e), r?.(e), m(!1);
+			}
+		}) : i === "bool" ? /* @__PURE__ */ f(o, {
+			value: h === "true",
+			onChange: (e) => {
+				let t = String(e);
+				_(t), r?.(t), m(!1);
+			}
+		}) : /* @__PURE__ */ f(g, {
+			value: h ?? "",
+			onChange: _,
+			autoFocus: !0
+		}), i !== "select" && i !== "bool" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(n, {
+			size: 24,
+			icon: /* @__PURE__ */ f(e.check, { size: 13 }),
+			onClick: v,
+			title: c("dialog.save", "Save")
+		}), /* @__PURE__ */ f(n, {
+			size: 24,
+			icon: /* @__PURE__ */ f(e.x, { size: 13 }),
+			onClick: y,
+			title: c("dialog.cancel", "Cancel")
+		})] })]
+	}) : /* @__PURE__ */ f("div", {
+		onClick: () => m(!0),
+		style: {
+			padding: "4px 6px",
+			margin: "-4px -6px",
+			borderRadius: "var(--radius-sm)",
+			cursor: "text",
+			border: "1px dashed transparent",
+			minHeight: 24,
+			display: "flex",
+			alignItems: "center",
+			gap: 4
+		},
+		onMouseEnter: (e) => {
+			e.currentTarget.style.borderColor = "var(--border)";
+		},
+		onMouseLeave: (e) => {
+			e.currentTarget.style.borderColor = "transparent";
+		},
+		children: t || /* @__PURE__ */ f("span", {
+			style: { color: "var(--text-4)" },
+			children: c("control.click_to_edit", "Click to edit")
+		})
+	});
+}
+//#endregion
+export { C as DateInput, m as FieldLabel, A as JsonField, S as MultiSelect, D as PasswordInput, N as QuickEditCell, j as RefField, x as Select, O as TagsInput, _ as TextArea, g as TextInput, M as ViewField };