@spear-ai/spectral 1.9.1 → 1.10.1

package/dist/DateTimePicker/DateTimeDisplayInput.js

@@ -1,277 +1,381 @@
 "use client";
 import "../styles/main.css";
-import { jsxs as O, jsx as b } from "react/jsx-runtime";
-import { getResolvedLocale as ee, getLocalizedPeriodLabels as te, formatSelectPeriodLabel as re } from "./DateTimeUtils.js";
-import { Label as ne } from "../Label.js";
-import { useControllableState as ae } from "../hooks/useControllableState.js";
-import { getInputClasses as ie } from "../utils/formFieldUtils.js";
-import { cn as U } from "../utils/twUtils.js";
-import { forwardRef as se, useRef as E, useMemo as D, useCallback as w, useEffect as oe } from "react";
-const v = {
-  month: { type: "month", min: 1, max: 12, length: 2 },
-  day: { type: "day", min: 1, max: 31, length: 2 },
-  year: { type: "year", min: 1900, max: 2100, length: 4 },
-  hour12: { type: "hour", min: 1, max: 12, length: 2 },
-  hour24: { type: "hour", min: 0, max: 23, length: 2 },
-  minute: { type: "minute", min: 0, max: 59, length: 2 },
-  period: { type: "period", min: 0, max: 1, length: 2 }
-}, ue = (k, e) => k === 2 ? e % 4 === 0 && e % 100 !== 0 || e % 400 === 0 ? 29 : 28 : [4, 6, 9, 11].includes(k) ? 30 : 31, ce = ({ ariaLabel: k, config: e, disabled: y, onLeftFocus: I, onRightFocus: m, onValueChange: u, periodLabels: h, value: s }) => {
-  const o = E(null), a = E(""), c = E(!1), M = D(() => {
-    switch (e.type) {
-      case "month":
-        return "MM";
-      case "day":
-        return "dd";
-      case "year":
-        return "yyyy";
-      case "hour":
-        return e.max === 23 ? "HH" : "hh";
-      case "minute":
-        return "mm";
-      case "period":
-        return (h?.am ?? "am").toLowerCase();
-      default:
-        return "––";
-    }
-  }, [e.type, e.max, h]), d = D(() => s === void 0 ? M : e.type === "period" ? (s === 0 ? h?.am ?? "am" : h?.pm ?? "pm").toLowerCase() : s.toString().padStart(e.length, "0"), [s, e, h, M]);
-  oe(() => {
-    o.current && !c.current && (o.current.value = d);
-  }, [d]);
-  const x = w(() => {
-    const t = a.current;
-    if (t) {
-      let r = parseInt(t, 10);
-      isNaN(r) || (r = Math.max(e.min, Math.min(e.max, r)), u(r));
-    }
-    a.current = "", c.current = !1, o.current && (o.current.value = d);
-  }, [e.min, e.max, d, u]), R = w(
-    (t) => {
-      if (!y) {
-        if (t.key === "Tab") {
-          x();
-          return;
-        }
-        if (t.key === "ArrowRight") {
-          t.preventDefault(), x(), m?.();
-          return;
-        }
-        if (t.key === "ArrowLeft") {
-          t.preventDefault(), x(), I?.();
-          return;
-        }
-        if (e.type === "period") {
-          t.preventDefault(), t.key === "ArrowUp" || t.key === "ArrowDown" ? u(s === 0 ? 1 : 0) : t.key.toLowerCase() === "a" ? u(0) : t.key.toLowerCase() === "p" && u(1);
-          return;
-        }
-        if (t.key === "ArrowUp") {
-          t.preventDefault(), a.current = "", c.current = !1;
-          const r = s === void 0 || s >= e.max ? e.min : s + 1;
-          u(r);
-          return;
-        }
-        if (t.key === "ArrowDown") {
-          t.preventDefault(), a.current = "", c.current = !1;
-          const r = s === void 0 || s <= e.min ? e.max : s - 1;
-          u(r);
-          return;
-        }
-        if (t.key === "Home") {
-          t.preventDefault(), a.current = "", c.current = !1, u(e.min);
-          return;
-        }
-        if (t.key === "End") {
-          t.preventDefault(), a.current = "", c.current = !1, u(e.max);
-          return;
-        }
-        if (t.key >= "0" && t.key <= "9") {
-          t.preventDefault();
-          const r = a.current + t.key, l = parseInt(r, 10);
-          if (e.length === 2)
-            if (r.length >= 2) {
-              const L = Math.max(e.min, Math.min(e.max, l));
-              a.current = "", c.current = !1, u(L), m?.();
-            } else if (l * 10 > e.max) {
-              const L = Math.max(e.min, Math.min(e.max, l));
-              a.current = "", c.current = !1, u(L), m?.();
-            } else
-              a.current = r, c.current = !0, o.current && (o.current.value = r);
-          else if (e.length === 4)
-            if (r.length >= 4) {
-              const L = Math.max(e.min, Math.min(e.max, l));
-              a.current = "", c.current = !1, u(L), m?.();
-            } else
-              a.current = r, c.current = !0, o.current && (o.current.value = r);
-          return;
-        }
-        if (t.key === "Backspace")
-          if (t.preventDefault(), a.current) {
-            const r = a.current.slice(0, -1);
-            a.current = r, c.current = r.length > 0, o.current && (o.current.value = r || d);
-          } else s !== void 0 && (a.current = "", c.current = !0, u(e.min), o.current && (o.current.value = M));
-      }
-    },
-    [y, e, s, d, M, u, I, m, x]
-  ), T = w(() => {
-    a.current && x();
-  }, [x]), S = w(() => {
-    c.current || (a.current = "");
-    const t = o.current;
-    if (t) {
-      const r = t.value.length;
-      t.setSelectionRange(r, r);
-    }
-  }, []), Y = w(() => {
-    o.current && (o.current.value = a.current || d);
-  }, [d]), H = w(() => {
-    switch (e.type) {
-      case "year":
-        return { width: 46, paddingLeft: 0 };
-      case "period":
-        return { width: 28, paddingLeft: 0, marginLeft: 4 };
-      case "month":
-        return { width: 28, paddingLeft: 0 };
-      case "day":
-        return { width: 28, paddingLeft: 0 };
-      case "hour":
-        return { width: 28, paddingLeft: 0 };
-      case "minute":
-        return { width: 30, paddingLeft: 0 };
-      default:
-        return { width: 24, paddingLeft: 0 };
-    }
-  }, [e.type]), p = D(() => H(), [H]), g = D(() => s === void 0, [s]);
-  return /* @__PURE__ */ b(
-    "input",
-    {
-      "aria-label": k,
-      "aria-valuemax": e.max,
-      "aria-valuemin": e.min,
-      "aria-valuenow": s,
-      className: U(
-        "inline-flex items-center justify-center rounded text-center tabular-nums",
-        "border-none bg-transparent outline-none",
-        "focus:bg-bg-tertiary focus:text-text-primary focus:ring-accent focus:ring-1",
-        "hover:bg-bg-secondary",
-        y && "cursor-not-allowed opacity-50",
-        g && "text-text-placeholder text-sm"
-      ),
-      "data-segment": e.type,
-      defaultValue: d,
-      disabled: y,
-      inputMode: "numeric",
-      onBlur: T,
-      onChange: Y,
-      onFocus: S,
-      onKeyDown: R,
-      ref: o,
-      role: "spinbutton",
-      style: p,
-      tabIndex: y ? -1 : 0
-    }
-  );
-}, le = se(
-  ({
-    className: k,
-    defaultValue: e,
-    disabled: y,
-    endIcon: I,
-    hourFormat: m = "12",
-    id: u,
-    label: h,
-    locale: s,
-    onChange: o,
-    showTime: a = !0,
-    state: c = "default",
-    value: M,
-    // Legacy props (deprecated)
-    date: d,
-    onDateChange: x,
-    ...R
-  }, T) => {
-    const S = E(null), Y = M ?? d, H = o ?? x, [p, g] = ae({
-      defaultValue: e,
-      onChange: H,
-      value: Y
-    }), t = D(() => ee(s), [s]), r = D(() => te(t), [t]), l = D(() => {
-      if (!p) return { month: void 0, day: void 0, year: void 0, hour: void 0, minute: void 0, period: void 0 };
-      const i = p.getHours();
-      let n, f;
-      return m === "24" ? (n = i, f = 0) : (f = i >= 12 ? 1 : 0, n = i % 12, n === 0 && (n = 12)), {
-        month: p.getMonth() + 1,
-        day: p.getDate(),
-        year: p.getFullYear(),
-        hour: n,
-        minute: p.getMinutes(),
-        period: f
-      };
-    }, [p, m]), L = l.month !== void 0 && l.day !== void 0 && l.year !== void 0, _ = w(
-      (i) => {
-        const n = { ...l, ...i };
-        if (n.month === void 0 && n.day === void 0 && n.year === void 0) {
-          g(void 0);
-          return;
-        }
-        const f = /* @__PURE__ */ new Date(), A = (n.month ?? f.getMonth() + 1) - 1, P = n.day ?? f.getDate(), N = n.year ?? f.getFullYear(), j = ue(A + 1, N), G = Math.min(P, j), W = l.month !== void 0 && l.day !== void 0 && l.year !== void 0, X = n.month !== void 0 && n.day !== void 0 && n.year !== void 0, B = !W && X;
-        let C;
-        if (m === "24")
-          C = B ? 0 : n.hour ?? 0;
-        else {
-          const F = B ? 12 : n.hour ?? 12, V = B ? 1 : n.period ?? 0, K = F, J = V;
-          K === 12 ? C = J === 0 ? 0 : 12 : C = J === 0 ? K : K + 12;
-        }
-        const Z = B ? 0 : n.minute ?? 0, $ = new Date(N, A, G, C, Z, 0, 0);
-        g($);
-      },
-      [l, m, g]
-    ), q = D(() => {
-      const i = [
-        { key: "month", config: v.month, ariaLabel: "Month" },
-        { key: "day", config: v.day, ariaLabel: "Day" },
-        { key: "year", config: v.year, ariaLabel: "Year" }
-      ];
-      if (!a) return i;
-      const n = m === "24" ? [
-        { key: "hour", config: v.hour24, ariaLabel: "Hours" },
-        { key: "minute", config: v.minute, ariaLabel: "Minutes" }
-      ] : [
-        { key: "hour", config: v.hour12, ariaLabel: "Hours" },
-        { key: "minute", config: v.minute, ariaLabel: "Minutes" },
-        { key: "period", config: v.period, ariaLabel: re(r, "Select {am} or {pm}") }
-      ];
-      return [...i, ...n];
-    }, [a, m, r]), z = w((i) => {
-      S.current?.querySelectorAll("[role='spinbutton']")[i]?.focus();
-    }, []), Q = U(ie(c, k));
-    return /* @__PURE__ */ O("div", { className: "flex flex-col gap-1.5", children: [
-      h && /* @__PURE__ */ b(ne, { className: "text-text-primary text-sm font-medium", htmlFor: u, children: h }),
-      /* @__PURE__ */ O("div", { className: U(Q, "relative", (y ?? c === "disabled") && "cursor-not-allowed", k), "data-slot": "datetime-display-input", id: u ?? "datetime-display-input", ref: T ?? S, ...R, children: [
-        /* @__PURE__ */ b("div", { className: "flex items-center", ref: S, children: q.map((i, n) => {
-          const f = ["month", "day", "year"].includes(i.key), A = ["hour", "minute", "period"].includes(i.key), P = i.key === "year", N = i.key === "hour", j = y ?? (A && !L);
-          return /* @__PURE__ */ O("span", { className: "flex items-center", children: [
-            N && /* @__PURE__ */ b("span", { "aria-hidden": "true", className: "text-text-secondary select-none", children: ", " }),
-            /* @__PURE__ */ b(
-              ce,
-              {
-                ariaLabel: i.ariaLabel,
-                config: i.config,
-                disabled: j,
-                onLeftFocus: () => n > 0 && z(n - 1),
-                onRightFocus: () => n < q.length - 1 && z(n + 1),
-                onValueChange: (G) => _({ [i.key]: G }),
-                periodLabels: r,
-                value: l[i.key]
-              }
-            ),
-            f && !P && /* @__PURE__ */ b("span", { "aria-hidden": "true", className: "text-text-secondary select-none", children: "/" }),
-            N && /* @__PURE__ */ b("span", { "aria-hidden": "true", className: "text-inherit select-none", children: ":" })
-          ] }, i.key);
-        }) }),
-        I
-      ] })
-    ] });
-  }
-);
-le.displayName = "DateTimeDisplayInput";
-export {
-  le as DateTimeDisplayInput
-};
+import { t as e } from "../twUtils-VNWgstKL.js";
+import { getInputClasses as t } from "../utils/formFieldUtils.js";
+import { useControllableState as n } from "../hooks/useControllableState.js";
+import { Label as r } from "../Label.js";
+import { S as i, b as a, f as o } from "../DateTimeUtils-DVvG6H-p.js";
+import { forwardRef as s, useCallback as c, useEffect as l, useMemo as u, useRef as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/DateTimePicker/DateTimeDisplayInput.tsx
+var m = {
+	month: {
+		type: "month",
+		min: 1,
+		max: 12,
+		length: 2
+	},
+	day: {
+		type: "day",
+		min: 1,
+		max: 31,
+		length: 2
+	},
+	year: {
+		type: "year",
+		min: 1900,
+		max: 2100,
+		length: 4
+	},
+	hour12: {
+		type: "hour",
+		min: 1,
+		max: 12,
+		length: 2
+	},
+	hour24: {
+		type: "hour",
+		min: 0,
+		max: 23,
+		length: 2
+	},
+	minute: {
+		type: "minute",
+		min: 0,
+		max: 59,
+		length: 2
+	},
+	period: {
+		type: "period",
+		min: 0,
+		max: 1,
+		length: 2
+	}
+}, h = (e, t) => e === 2 ? t % 4 == 0 && t % 100 != 0 || t % 400 == 0 ? 29 : 28 : [
+	4,
+	6,
+	9,
+	11
+].includes(e) ? 30 : 31, g = ({ ariaLabel: t, config: n, disabled: r, onLeftFocus: i, onRightFocus: a, onValueChange: o, periodLabels: s, value: p }) => {
+	let m = d(null), h = d(""), g = d(!1), _ = u(() => {
+		switch (n.type) {
+			case "month": return "MM";
+			case "day": return "dd";
+			case "year": return "yyyy";
+			case "hour": return n.max === 23 ? "HH" : "hh";
+			case "minute": return "mm";
+			case "period": return (s?.am ?? "am").toLowerCase();
+			default: return "––";
+		}
+	}, [
+		n.type,
+		n.max,
+		s
+	]), v = u(() => p === void 0 ? _ : n.type === "period" ? (p === 0 ? s?.am ?? "am" : s?.pm ?? "pm").toLowerCase() : p.toString().padStart(n.length, "0"), [
+		p,
+		n,
+		s,
+		_
+	]);
+	l(() => {
+		m.current && !g.current && (m.current.value = v);
+	}, [v]);
+	let y = c(() => {
+		let e = h.current;
+		if (e) {
+			let t = parseInt(e, 10);
+			isNaN(t) || (t = Math.max(n.min, Math.min(n.max, t)), o(t));
+		}
+		h.current = "", g.current = !1, m.current && (m.current.value = v);
+	}, [
+		n.min,
+		n.max,
+		v,
+		o
+	]), b = c((e) => {
+		if (!r) {
+			if (e.key === "Tab") {
+				y();
+				return;
+			}
+			if (e.key === "ArrowRight") {
+				e.preventDefault(), y(), a?.();
+				return;
+			}
+			if (e.key === "ArrowLeft") {
+				e.preventDefault(), y(), i?.();
+				return;
+			}
+			if (n.type === "period") {
+				e.preventDefault(), e.key === "ArrowUp" || e.key === "ArrowDown" ? o(p === 0 ? 1 : 0) : e.key.toLowerCase() === "a" ? o(0) : e.key.toLowerCase() === "p" && o(1);
+				return;
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault(), h.current = "", g.current = !1, o(p === void 0 || p >= n.max ? n.min : p + 1);
+				return;
+			}
+			if (e.key === "ArrowDown") {
+				e.preventDefault(), h.current = "", g.current = !1, o(p === void 0 || p <= n.min ? n.max : p - 1);
+				return;
+			}
+			if (e.key === "Home") {
+				e.preventDefault(), h.current = "", g.current = !1, o(n.min);
+				return;
+			}
+			if (e.key === "End") {
+				e.preventDefault(), h.current = "", g.current = !1, o(n.max);
+				return;
+			}
+			if (e.key >= "0" && e.key <= "9") {
+				e.preventDefault();
+				let t = h.current + e.key, r = parseInt(t, 10);
+				if (n.length === 2) if (t.length >= 2) {
+					let e = Math.max(n.min, Math.min(n.max, r));
+					h.current = "", g.current = !1, o(e), a?.();
+				} else if (r * 10 > n.max) {
+					let e = Math.max(n.min, Math.min(n.max, r));
+					h.current = "", g.current = !1, o(e), a?.();
+				} else h.current = t, g.current = !0, m.current && (m.current.value = t);
+				else if (n.length === 4) if (t.length >= 4) {
+					let e = Math.max(n.min, Math.min(n.max, r));
+					h.current = "", g.current = !1, o(e), a?.();
+				} else h.current = t, g.current = !0, m.current && (m.current.value = t);
+				return;
+			}
+			if (e.key === "Backspace") if (e.preventDefault(), h.current) {
+				let e = h.current.slice(0, -1);
+				h.current = e, g.current = e.length > 0, m.current && (m.current.value = e || v);
+			} else p !== void 0 && (h.current = "", g.current = !0, o(n.min), m.current && (m.current.value = _));
+		}
+	}, [
+		r,
+		n,
+		p,
+		v,
+		_,
+		o,
+		i,
+		a,
+		y
+	]), x = c(() => {
+		h.current && y();
+	}, [y]), S = c(() => {
+		g.current || (h.current = "");
+		let e = m.current;
+		if (e) {
+			let t = e.value.length;
+			e.setSelectionRange(t, t);
+		}
+	}, []), C = c(() => {
+		m.current && (m.current.value = h.current || v);
+	}, [v]), w = c(() => {
+		switch (n.type) {
+			case "year": return {
+				width: 46,
+				paddingLeft: 0
+			};
+			case "period": return {
+				width: 28,
+				paddingLeft: 0,
+				marginLeft: 4
+			};
+			case "month": return {
+				width: 28,
+				paddingLeft: 0
+			};
+			case "day": return {
+				width: 28,
+				paddingLeft: 0
+			};
+			case "hour": return {
+				width: 28,
+				paddingLeft: 0
+			};
+			case "minute": return {
+				width: 30,
+				paddingLeft: 0
+			};
+			default: return {
+				width: 24,
+				paddingLeft: 0
+			};
+		}
+	}, [n.type]), T = u(() => w(), [w]), E = u(() => p === void 0, [p]);
+	return /* @__PURE__ */ f("input", {
+		"aria-label": t,
+		"aria-valuemax": n.max,
+		"aria-valuemin": n.min,
+		"aria-valuenow": p,
+		className: e("rounded inline-flex items-center justify-center text-center tabular-nums", "border-none bg-transparent outline-none", "focus:bg-bg-tertiary focus:text-text-primary focus:ring-1 focus:ring-accent", "hover:bg-bg-secondary", r && "cursor-not-allowed opacity-50", E && "text-text-placeholder text-sm"),
+		"data-segment": n.type,
+		defaultValue: v,
+		disabled: r,
+		inputMode: "numeric",
+		onBlur: x,
+		onChange: C,
+		onFocus: S,
+		onKeyDown: b,
+		ref: m,
+		role: "spinbutton",
+		style: T,
+		tabIndex: r ? -1 : 0
+	});
+}, _ = s(({ className: s, defaultValue: l, disabled: _, endIcon: v, hourFormat: y = "12", id: b, label: x, locale: S, onChange: C, showTime: w = !0, state: T = "default", value: E, date: D, onDateChange: O, ...k }, A) => {
+	let j = d(null), [M, N] = n({
+		defaultValue: l,
+		onChange: C ?? O,
+		value: E ?? D
+	}), P = u(() => i(S), [S]), F = u(() => a(P), [P]), I = u(() => {
+		if (!M) return {
+			month: void 0,
+			day: void 0,
+			year: void 0,
+			hour: void 0,
+			minute: void 0,
+			period: void 0
+		};
+		let e = M.getHours(), t, n;
+		return y === "24" ? (t = e, n = 0) : (n = e >= 12 ? 1 : 0, t = e % 12, t === 0 && (t = 12)), {
+			month: M.getMonth() + 1,
+			day: M.getDate(),
+			year: M.getFullYear(),
+			hour: t,
+			minute: M.getMinutes(),
+			period: n
+		};
+	}, [M, y]), L = I.month !== void 0 && I.day !== void 0 && I.year !== void 0, R = c((e) => {
+		let t = {
+			...I,
+			...e
+		};
+		if (t.month === void 0 && t.day === void 0 && t.year === void 0) {
+			N(void 0);
+			return;
+		}
+		let n = /* @__PURE__ */ new Date(), r = (t.month ?? n.getMonth() + 1) - 1, i = t.day ?? n.getDate(), a = t.year ?? n.getFullYear(), o = h(r + 1, a), s = Math.min(i, o), c = I.month !== void 0 && I.day !== void 0 && I.year !== void 0, l = t.month !== void 0 && t.day !== void 0 && t.year !== void 0, u = !c && l, d;
+		if (y === "24") d = u ? 0 : t.hour ?? 0;
+		else {
+			let e = u ? 12 : t.hour ?? 12, n = u ? 1 : t.period ?? 0, r = e, i = n;
+			d = r === 12 ? i === 0 ? 0 : 12 : i === 0 ? r : r + 12;
+		}
+		let f = u ? 0 : t.minute ?? 0;
+		N(new Date(a, r, s, d, f, 0, 0));
+	}, [
+		I,
+		y,
+		N
+	]), z = u(() => {
+		let e = [
+			{
+				key: "month",
+				config: m.month,
+				ariaLabel: "Month"
+			},
+			{
+				key: "day",
+				config: m.day,
+				ariaLabel: "Day"
+			},
+			{
+				key: "year",
+				config: m.year,
+				ariaLabel: "Year"
+			}
+		];
+		if (!w) return e;
+		let t = y === "24" ? [{
+			key: "hour",
+			config: m.hour24,
+			ariaLabel: "Hours"
+		}, {
+			key: "minute",
+			config: m.minute,
+			ariaLabel: "Minutes"
+		}] : [
+			{
+				key: "hour",
+				config: m.hour12,
+				ariaLabel: "Hours"
+			},
+			{
+				key: "minute",
+				config: m.minute,
+				ariaLabel: "Minutes"
+			},
+			{
+				key: "period",
+				config: m.period,
+				ariaLabel: o(F, "Select {am} or {pm}")
+			}
+		];
+		return [...e, ...t];
+	}, [
+		w,
+		y,
+		F
+	]), B = c((e) => {
+		(j.current?.querySelectorAll("[role='spinbutton']")[e])?.focus();
+	}, []), V = e(t(T, s));
+	return /* @__PURE__ */ p("div", {
+		className: "gap-1.5 flex flex-col",
+		children: [x && /* @__PURE__ */ f(r, {
+			className: "text-sm font-medium text-text-primary",
+			htmlFor: b,
+			children: x
+		}), /* @__PURE__ */ p("div", {
+			className: e(V, "relative", (_ ?? T === "disabled") && "cursor-not-allowed", s),
+			"data-slot": "datetime-display-input",
+			id: b ?? "datetime-display-input",
+			ref: A ?? j,
+			...k,
+			children: [/* @__PURE__ */ f("div", {
+				className: "flex items-center",
+				ref: j,
+				children: z.map((e, t) => {
+					let n = [
+						"month",
+						"day",
+						"year"
+					].includes(e.key), r = [
+						"hour",
+						"minute",
+						"period"
+					].includes(e.key), i = e.key === "year", a = e.key === "hour", o = _ ?? (r && !L);
+					return /* @__PURE__ */ p("span", {
+						className: "flex items-center",
+						children: [
+							a && /* @__PURE__ */ f("span", {
+								"aria-hidden": "true",
+								className: "text-text-secondary select-none",
+								children: ",\xA0"
+							}),
+							/* @__PURE__ */ f(g, {
+								ariaLabel: e.ariaLabel,
+								config: e.config,
+								disabled: o,
+								onLeftFocus: () => t > 0 && B(t - 1),
+								onRightFocus: () => t < z.length - 1 && B(t + 1),
+								onValueChange: (t) => R({ [e.key]: t }),
+								periodLabels: F,
+								value: I[e.key]
+							}),
+							n && !i && /* @__PURE__ */ f("span", {
+								"aria-hidden": "true",
+								className: "text-text-secondary select-none",
+								children: "/"
+							}),
+							a && /* @__PURE__ */ f("span", {
+								"aria-hidden": "true",
+								className: "text-inherit select-none",
+								children: ":"
+							})
+						]
+					}, e.key);
+				})
+			}), v]
+		})]
+	});
+});
+_.displayName = "DateTimeDisplayInput";
+//#endregion
+export { _ as DateTimeDisplayInput };