@epam/ai-dial-scheduled-tasks 1.1.0-dev.372 → 1.1.0-dev.375

package/index.js

@@ -1,10 +1,10 @@
 import { MDMessageViewer as e, PanelEmptyState as t, buildCssVars as n, mergeClasses as r } from "@epam/ai-dial-chat-shared";
-import { ButtonAppearance as i, ButtonDropdown as a, ButtonVariant as o, Calendar as s, CalendarMode as c, CardShell as l, DIAL_ICON_SIZE as u, DIAL_KIT_ICON_STROKE as d, ElementSize as f, FolderPath as p, GhostButton as m, GhostIconButton as h, Highlight as g, Input as _, Label as v, LazyMarkdownEditor as y, NeutralButton as b, NumberInput as x, PrimaryButton as S, Search as C, Select as w, Skeleton as T, SkeletonVariant as E, Spinner as D, Switch as ee, Textarea as O } from "@epam/ai-dial-ui-kit";
-import { IconAlertTriangle as k, IconArrowLeft as te, IconCalendarTime as A, IconCircleCheck as j, IconCircleX as M, IconClipboardX as N, IconPencilMinus as ne, IconPlayerPause as P, IconPlus as re, IconTrashX as ie } from "@tabler/icons-react";
-import { Suspense as F, lazy as I, useEffect as L, useRef as ae } from "react";
-import { Fragment as R, jsx as z, jsxs as B } from "react/jsx-runtime";
-import { BuilderFormContainer as V } from "@epam/ai-dial-builder-form";
-var H = {
+import { Button as i, ButtonAppearance as a, ButtonVariant as o, Calendar as s, CalendarMode as c, CardShell as l, DIAL_ICON_SIZE as u, DIAL_KIT_ICON_STROKE as d, Dropdown as f, ElementSize as p, EllipsisTooltip as m, FolderPath as h, GhostButton as g, GhostIconButton as _, Highlight as v, Input as y, Label as b, LazyMarkdownEditor as x, NeutralButton as S, NumberInput as C, PrimaryButton as w, Search as T, Select as E, Skeleton as D, SkeletonVariant as O, Spinner as k, Switch as ee, Textarea as A } from "@epam/ai-dial-ui-kit";
+import { IconAlertTriangle as j, IconArrowLeft as te, IconCalendarTime as ne, IconCheck as M, IconChevronDown as re, IconChevronUp as ie, IconCircleCheck as ae, IconCircleX as N, IconClipboardX as P, IconPencilMinus as oe, IconPlayerPause as F, IconPlus as se, IconTrashX as I } from "@tabler/icons-react";
+import { Suspense as L, lazy as R, useEffect as ce, useRef as z, useState as B } from "react";
+import { Fragment as V, jsx as H, jsxs as U } from "react/jsx-runtime";
+import { BuilderFormContainer as W } from "@epam/ai-dial-builder-form";
+var G = {
 	title: "_title_1hxc3_1",
 	description: "_description_1hxc3_5",
 	schedulePill: "_schedulePill_1hxc3_9",
@@ -15,21 +15,21 @@ var H = {
 	pausedPill: "_pausedPill_1hxc3_31",
 	pausedLabel: "_pausedLabel_1hxc3_36",
 	locationDivider: "_locationDivider_1hxc3_40"
-}, oe = ({ item: e, searchQuery: t = "", onCardClick: i, labels: a, styles: o, className: s }) => {
-	let c = a?.newBadgeLabel ?? "NEW", f = a?.pausedBadgeLabel ?? "Paused", { colors: m, typography: h } = o ?? {}, _ = h?.titleClassName ?? "dial-body-semi-text", v = h?.descriptionClassName ?? "dial-small-text", y = h?.descriptionSizeClassName ?? "dial-tiny-text", b = h?.scheduleLabelClassName ?? "dial-tiny-text", x = h?.locationLabelClassName ?? "dial-tiny-text", S = h?.locationLeafClassName ?? "dial-tiny-semi-text", C = h?.newBadgeClassName ?? "dial-tiny-semi-text", w = h?.pausedBadgeClassName ?? "dial-tiny-text", T = n({
-		"--stc-title-text": m?.titleText,
-		"--stc-desc-text": m?.descriptionText,
-		"--stc-pill-bg": m?.schedulePillBackground,
-		"--stc-pill-border": m?.schedulePillBorder,
-		"--stc-schedule-label-text": m?.scheduleLabelText,
-		"--stc-location-label-text": m?.locationLabelText,
-		"--stc-location-leaf-text": m?.locationLeafText,
-		"--stc-new-badge-bg": m?.newBadgeBackground,
-		"--stc-new-badge-text": m?.newBadgeText,
-		"--stc-location-divider-border": m?.locationDividerBorder,
-		"--stc-paused-bg": m?.pausedBadgeBackground,
-		"--stc-paused-border": m?.pausedBadgeBorder,
-		"--stc-paused-text": m?.pausedBadgeText
+}, K = ({ item: e, searchQuery: t = "", onCardClick: i, labels: a, styles: o, className: s }) => {
+	let c = a?.newBadgeLabel ?? "NEW", f = a?.pausedBadgeLabel ?? "Paused", { colors: p, typography: m } = o ?? {}, g = m?.titleClassName ?? "dial-body-semi-text", _ = m?.descriptionClassName ?? "dial-small-text", y = m?.descriptionSizeClassName ?? "dial-tiny-text", b = m?.scheduleLabelClassName ?? "dial-tiny-text", x = m?.locationLabelClassName ?? "dial-tiny-text", S = m?.locationLeafClassName ?? "dial-tiny-semi-text", C = m?.newBadgeClassName ?? "dial-tiny-semi-text", w = m?.pausedBadgeClassName ?? "dial-tiny-text", T = n({
+		"--stc-title-text": p?.titleText,
+		"--stc-desc-text": p?.descriptionText,
+		"--stc-pill-bg": p?.schedulePillBackground,
+		"--stc-pill-border": p?.schedulePillBorder,
+		"--stc-schedule-label-text": p?.scheduleLabelText,
+		"--stc-location-label-text": p?.locationLabelText,
+		"--stc-location-leaf-text": p?.locationLeafText,
+		"--stc-new-badge-bg": p?.newBadgeBackground,
+		"--stc-new-badge-text": p?.newBadgeText,
+		"--stc-location-divider-border": p?.locationDividerBorder,
+		"--stc-paused-bg": p?.pausedBadgeBackground,
+		"--stc-paused-border": p?.pausedBadgeBorder,
+		"--stc-paused-text": p?.pausedBadgeText
 	}), E = i ? {
 		tabIndex: 0,
 		onClick: () => i(e.id),
@@ -37,182 +37,197 @@ var H = {
 			(t.key === "Enter" || t.key === " ") && (t.preventDefault(), i(e.id));
 		}
 	} : {};
-	return /* @__PURE__ */ B(l, {
+	return /* @__PURE__ */ U(l, {
 		role: i ? "button" : "group",
 		"aria-label": e.displayName,
 		style: T,
 		className: r("h-[232px]", i && "cursor-pointer", s),
 		...E,
 		children: [
-			/* @__PURE__ */ B("div", {
+			/* @__PURE__ */ U("div", {
 				className: "flex min-w-0 shrink-0 items-center gap-2",
-				children: [/* @__PURE__ */ z(g, {
+				children: [/* @__PURE__ */ H(v, {
 					text: e.displayName,
 					query: t,
 					maxLines: 1,
-					className: r(_, H.title)
-				}), e.isNew && /* @__PURE__ */ z("span", {
-					className: r("shrink-0 rounded-full px-2 py-0.5", C, H.newBadge),
+					className: r(g, G.title)
+				}), e.isNew && /* @__PURE__ */ H("span", {
+					className: r("shrink-0 rounded-full px-2 py-0.5", C, G.newBadge),
 					children: c
 				})]
 			}),
-			e.descriptionPreview && /* @__PURE__ */ z("p", {
-				className: r("line-clamp-4 min-h-0 flex-1 overflow-hidden", y, v, H.description),
+			e.descriptionPreview && /* @__PURE__ */ H("p", {
+				className: r("line-clamp-4 min-h-0 flex-1 overflow-hidden", y, _, G.description),
 				children: e.descriptionPreview
 			}),
-			/* @__PURE__ */ B("div", {
+			/* @__PURE__ */ U("div", {
 				className: "mt-auto flex shrink-0 flex-col gap-3",
-				children: [/* @__PURE__ */ z("div", {
+				children: [/* @__PURE__ */ H("div", {
 					className: "flex min-h-[28px] items-center",
-					children: e.isActive === !1 ? /* @__PURE__ */ B("span", {
-						className: r("inline-flex items-center gap-1.5 rounded-full border px-2 py-1", H.pausedPill, w, H.pausedLabel),
-						children: [/* @__PURE__ */ z(P, {
+					children: e.isActive === !1 ? /* @__PURE__ */ U("span", {
+						className: r("inline-flex items-center gap-1.5 rounded-full border px-2 py-1", G.pausedPill, w, G.pausedLabel),
+						children: [/* @__PURE__ */ H(F, {
 							size: u.SM,
 							"aria-hidden": !0,
 							stroke: d
 						}), f]
-					}) : /* @__PURE__ */ z("span", {
-						className: r("inline-block rounded-lg border px-2 py-1", H.schedulePill, b, H.scheduleLabel),
+					}) : /* @__PURE__ */ H("span", {
+						className: r("inline-block rounded-lg border px-2 py-1", G.schedulePill, b, G.scheduleLabel),
 						children: e.scheduleLabel
 					})
-				}), e.locationSegments && e.locationSegments.length > 0 && /* @__PURE__ */ z(p, {
+				}), e.locationSegments && e.locationSegments.length > 0 && /* @__PURE__ */ H(h, {
 					segments: e.locationSegments,
-					labelClassName: r(x, H.locationLabel),
-					leafClassName: r(S, H.locationLeaf),
-					className: r("pt-3", H.locationDivider)
+					labelClassName: r(x, G.locationLabel),
+					leafClassName: r(S, G.locationLeaf),
+					className: r("pt-3", G.locationDivider)
 				})]
 			})
 		]
 	});
-}, U = { card: "_card_11bez_1" }, W = [
+}, le = { card: "_card_11bez_1" }, ue = [
 	"100%",
 	"100%",
 	"61%"
-], G = "var(--stcs-skeleton-bg)", K = ({ styles: e }) => /* @__PURE__ */ B(l, {
+], de = "var(--stcs-skeleton-bg)", fe = ({ styles: e }) => /* @__PURE__ */ U(l, {
 	"aria-hidden": !0,
 	style: n({ "--stcs-skeleton-bg": e?.colors?.skeletonColor }),
-	className: r("h-[232px]", U.card),
+	className: r("h-[232px]", le.card),
 	children: [
-		/* @__PURE__ */ z(T, {
-			variant: E.Rectangular,
+		/* @__PURE__ */ H(D, {
+			variant: O.Rectangular,
 			width: "60%",
 			height: "20px",
-			color: G,
+			color: de,
 			className: "shrink-0"
 		}),
-		/* @__PURE__ */ z("div", {
+		/* @__PURE__ */ H("div", {
 			className: "flex min-h-0 flex-1 flex-col gap-3 overflow-hidden",
-			children: W.map((e, t) => /* @__PURE__ */ z(T, {
-				variant: E.Rectangular,
+			children: ue.map((e, t) => /* @__PURE__ */ H(D, {
+				variant: O.Rectangular,
 				width: e,
 				height: "16px",
-				color: G
+				color: de
 			}, t))
 		}),
-		/* @__PURE__ */ z(T, {
-			variant: E.Rectangular,
+		/* @__PURE__ */ H(D, {
+			variant: O.Rectangular,
 			width: "110px",
 			height: "28px",
-			color: G,
+			color: de,
 			className: "shrink-0 rounded-lg"
 		})
 	]
-}), se = ({ items: e, searchQuery: t, onCardClick: n, labels: r, cardStyles: i, trailingSkeletonCount: a = 0, skeletonStyles: o }) => /* @__PURE__ */ B("div", {
+}), pe = ({ items: e, searchQuery: t, onCardClick: n, labels: r, cardStyles: i, trailingSkeletonCount: a = 0, skeletonStyles: o }) => /* @__PURE__ */ U("div", {
 	className: "grid grid-cols-1 gap-5 desktop:grid-cols-3",
-	children: [e.map((e) => /* @__PURE__ */ z(oe, {
+	children: [e.map((e) => /* @__PURE__ */ H(K, {
 		item: e,
 		searchQuery: t,
 		onCardClick: n,
 		labels: r,
 		styles: i
-	}, e.id)), Array.from({ length: a }, (e, t) => /* @__PURE__ */ z(K, { styles: o }, `skeleton-${t}`))]
+	}, e.id)), Array.from({ length: a }, (e, t) => /* @__PURE__ */ H(fe, { styles: o }, `skeleton-${t}`))]
 }), q = {
 	container: "_container_r5sk9_1",
 	subtitle: "_subtitle_r5sk9_5",
 	sortButton: "_sortButton_r5sk9_9"
-}, ce = (e, t, n, r, i, a) => {
+}, me = (e, t, n, r, i, a) => {
 	if (!e) return t ? a.loadingMoreLabel : n ? a.errorLabel : r > 0 ? `${r}` : i ? a.noResultsLabel : a.emptyStateLabel;
-}, le = (e) => {
+}, he = (e) => {
 	if (!e || e === document.body) return null;
 	let { overflow: t, overflowY: n } = getComputedStyle(e);
-	return t === "auto" || t === "scroll" || n === "auto" || n === "scroll" ? e : le(e.parentElement);
-}, ue = ({ labels: e, onCreateClick: s, searchQuery: c, onSearchQueryChange: l, sortKey: p, onSortChange: h, items: g, isLoading: _ = !1, error: v, onRetry: y, hasMore: b = !1, isLoadingMore: x = !1, skeletonCount: w = 6, onLoadMore: T, onCardClick: E, styles: ee }) => {
-	let { colors: O, typography: k, emptyStateIconSize: te = 48 } = ee ?? {}, j = k?.titleClassName ?? "dial-h1-text", M = k?.subtitleClassName ?? "dial-body-text", N = n({
-		"--st-bg": O?.background,
-		"--st-subtitle-text": O?.subtitleText,
-		"--st-sort-text": O?.sortButtonText
-	}), ne = (e) => {
+	return t === "auto" || t === "scroll" || n === "auto" || n === "scroll" ? e : he(e.parentElement);
+}, ge = ({ labels: e, onCreateClick: s, searchQuery: c, onSearchQueryChange: l, sortKey: h, onSortChange: _, items: v, isLoading: y = !1, error: b, onRetry: x, hasMore: S = !1, isLoadingMore: C = !1, skeletonCount: E = 6, onLoadMore: D, onCardClick: O, styles: ee }) => {
+	let { colors: A, typography: j, emptyStateIconSize: te = 48 } = ee ?? {}, ae = j?.titleClassName ?? "dial-h1-text", N = j?.subtitleClassName ?? "dial-body-text", P = n({
+		"--st-bg": A?.background,
+		"--st-subtitle-text": A?.subtitleText,
+		"--st-sort-text": A?.sortButtonText
+	}), oe = (e) => {
 		l(e ?? "");
-	}, P = e.sortOptions.find((e) => e.key === p)?.label ?? "", ie = ce(_, x, !!v, g.length, c.trim().length > 0, e), F = ae(null);
-	L(() => {
-		let e = F.current;
-		if (!e || !T) return;
-		let t = le(e.parentElement);
+	}, [F, I] = B(!1), L = e.sortOptions.find((e) => e.key === h)?.label ?? e.sortLabel, R = e.sortOptions.map((e) => {
+		let t = e.key === h;
+		return {
+			...e,
+			selectable: !0,
+			checked: t,
+			renderItem: () => /* @__PURE__ */ U(V, { children: [/* @__PURE__ */ H(m, { text: e.label }), t && /* @__PURE__ */ H(M, {
+				size: u.SM,
+				stroke: d,
+				"aria-hidden": !0
+			})] }),
+			onClick: () => {
+				I(!1), _(e.key);
+			}
+		};
+	}), W = me(y, C, !!b, v.length, c.trim().length > 0, e), G = z(null);
+	ce(() => {
+		let e = G.current;
+		if (!e || !D) return;
+		let t = he(e.parentElement);
 		if (!t) return;
 		let n = () => {
-			if (x || _ || !b) return;
+			if (C || y || !S) return;
 			let n = t.getBoundingClientRect(), r = e.getBoundingClientRect();
-			r.top < n.bottom && r.bottom > n.top && T();
+			r.top < n.bottom && r.bottom > n.top && D();
 		};
 		return t.addEventListener("scroll", n, { passive: !0 }), n(), () => t.removeEventListener("scroll", n);
 	}, [
-		b,
-		x,
-		_,
-		T
+		S,
+		C,
+		y,
+		D
 	]);
-	let I = () => _ ? /* @__PURE__ */ z(D, {}) : v ? /* @__PURE__ */ B("div", {
+	let K = () => y ? /* @__PURE__ */ H(k, {}) : b ? /* @__PURE__ */ U("div", {
 		className: "flex flex-col items-center gap-3",
-		children: [/* @__PURE__ */ z("p", {
-			className: r(M, q.subtitle),
+		children: [/* @__PURE__ */ H("p", {
+			className: r(N, q.subtitle),
 			children: e.errorLabel
-		}), /* @__PURE__ */ z(m, {
+		}), /* @__PURE__ */ H(g, {
 			label: e.retryLabel,
-			onClick: y
+			onClick: x
 		})]
-	}) : g.length === 0 ? c.trim() ? /* @__PURE__ */ z("p", {
-		className: r(M, q.subtitle),
+	}) : v.length === 0 ? c.trim() ? /* @__PURE__ */ H("p", {
+		className: r(N, q.subtitle),
 		children: e.noResultsLabel
-	}) : /* @__PURE__ */ z(t, {
-		icon: /* @__PURE__ */ z(A, {
+	}) : /* @__PURE__ */ H(t, {
+		icon: /* @__PURE__ */ H(ne, {
 			"aria-hidden": !0,
 			size: te,
 			stroke: 1
 		}),
 		label: e.emptyStateLabel
-	}) : /* @__PURE__ */ B("div", {
+	}) : /* @__PURE__ */ U("div", {
 		className: "flex w-full flex-col gap-6",
-		children: [/* @__PURE__ */ z(se, {
-			items: g,
+		children: [/* @__PURE__ */ H(pe, {
+			items: v,
 			searchQuery: c,
-			onCardClick: E,
+			onCardClick: O,
 			labels: e.cardLabels,
-			trailingSkeletonCount: x ? w : 0,
-			skeletonStyles: { colors: { skeletonColor: O?.skeletonColor } }
-		}), /* @__PURE__ */ z("div", {
-			ref: F,
+			trailingSkeletonCount: C ? E : 0,
+			skeletonStyles: { colors: { skeletonColor: A?.skeletonColor } }
+		}), /* @__PURE__ */ H("div", {
+			ref: G,
 			"aria-hidden": !0,
 			className: "h-px w-full"
 		})]
-	}), R = _ || !!v || g.length === 0;
-	return /* @__PURE__ */ B("div", {
-		style: N,
+	}), le = y || !!b || v.length === 0;
+	return /* @__PURE__ */ U("div", {
+		style: P,
 		className: r("flex h-full w-full flex-col gap-6 overflow-y-auto px-8 py-4", q.container),
 		children: [
-			/* @__PURE__ */ B("div", {
+			/* @__PURE__ */ U("div", {
 				className: "flex items-start justify-between gap-4",
-				children: [/* @__PURE__ */ B("div", {
+				children: [/* @__PURE__ */ U("div", {
 					className: "min-w-0 gap-2",
-					children: [/* @__PURE__ */ z("h1", {
-						className: r("truncate", j),
+					children: [/* @__PURE__ */ H("h1", {
+						className: r("truncate", ae),
 						children: e.title
-					}), /* @__PURE__ */ z("p", {
-						className: r("mt-1", M, q.subtitle),
+					}), /* @__PURE__ */ H("p", {
+						className: r("mt-1", N, q.subtitle),
 						children: e.subtitle
 					})]
-				}), /* @__PURE__ */ z(S, {
+				}), /* @__PURE__ */ H(w, {
 					label: e.createButtonLabel,
-					iconBefore: /* @__PURE__ */ z(re, {
+					iconBefore: /* @__PURE__ */ H(se, {
 						size: u.SM,
 						"aria-hidden": !0,
 						stroke: d
@@ -221,109 +236,118 @@ var H = {
 					className: "shrink-0"
 				})]
 			}),
-			/* @__PURE__ */ B("div", {
+			/* @__PURE__ */ U("div", {
 				className: "flex flex-wrap items-center gap-3",
-				children: [/* @__PURE__ */ z("div", {
+				children: [/* @__PURE__ */ H("div", {
 					role: "search",
 					className: "flex-1",
-					children: /* @__PURE__ */ z(C, {
+					children: /* @__PURE__ */ H(T, {
 						value: c,
-						onChange: ne,
+						onChange: oe,
 						placeholder: e.searchPlaceholder,
 						clearLabel: e.clearSearchLabel,
 						"aria-label": e.searchAriaLabel,
-						size: f.Large
+						size: p.Large
+					})
+				}), e.sortOptions.length > 0 && /* @__PURE__ */ H(f, {
+					items: R,
+					open: F,
+					onOpenChange: I,
+					children: /* @__PURE__ */ H(i, {
+						label: L,
+						variant: o.Primary,
+						appearance: a.Ghost,
+						className: q.sortButton,
+						iconAfter: H(F ? ie : re, {
+							size: u.SM,
+							stroke: d,
+							"aria-hidden": !0
+						})
 					})
-				}), e.sortOptions.length > 0 && /* @__PURE__ */ z(a, {
-					label: P,
-					variant: o.Primary,
-					appearance: i.Ghost,
-					items: e.sortOptions.map((e) => ({
-						...e,
-						onClick: () => h(e.key)
-					}))
 				})]
 			}),
-			/* @__PURE__ */ z("span", {
+			/* @__PURE__ */ H("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
-				children: ie
+				children: W
 			}),
-			/* @__PURE__ */ z("div", {
-				className: r("mx-auto flex size-full w-full max-w-[1180px] flex-col", R && "items-center justify-center"),
-				children: I()
+			/* @__PURE__ */ H("div", {
+				className: r("mx-auto flex size-full w-full max-w-[1180px] flex-col", le && "items-center justify-center"),
+				children: K()
 			})
 		]
 	});
-}, de = /* @__PURE__ */ function(e) {
+}, _e = /* @__PURE__ */ function(e) {
 	return e.FirstToRun = "firstToRun", e.LastToRun = "lastToRun", e.Newest = "newest", e.NameAZ = "nameAZ", e;
-}({}), fe = 500, J = /* @__PURE__ */ function(e) {
+}({}), ve = 500, J = /* @__PURE__ */ function(e) {
 	return e.OneTime = "oneTime", e.Hourly = "hourly", e.Daily = "daily", e.Weekly = "weekly", e.Monthly = "monthly", e;
-}({}), Y = (e) => String(e).padStart(2, "0"), pe = (e) => e ? new Date(e) : null, me = (e) => {
+}({}), Y = (e) => String(e).padStart(2, "0"), ye = (e) => e ? new Date(e) : null, be = (e) => {
 	if (e == null) return "";
 	let t = e instanceof Date ? e : new Date(e);
 	return Number.isNaN(t.getTime()) ? "" : `${t.getFullYear()}-${Y(t.getMonth() + 1)}-${Y(t.getDate())}T${Y(t.getHours())}:${Y(t.getMinutes())}`;
-}, he = (e) => {
+}, xe = (e) => {
 	if (!e) return null;
 	let [t, n, r] = e.split("-").map(Number);
 	return new Date(t, n - 1, r);
-}, ge = (e) => {
+}, Se = (e) => {
 	if (e == null) return "";
 	let t = e instanceof Date ? e : new Date(e);
 	return Number.isNaN(t.getTime()) ? "" : `${t.getFullYear()}-${Y(t.getMonth() + 1)}-${Y(t.getDate())}`;
-}, _e = (e) => {
+}, Ce = (e) => {
 	let t = Number(e);
 	return e && Number.isFinite(t) ? String(t + 1) : null;
-}, ve = (e) => {
+}, we = (e) => {
 	let t = typeof e == "string" ? Number(e) : NaN;
 	return Number.isFinite(t) ? String(t - 1) : "";
 }, X = {
 	detailsColumn: "_detailsColumn_1mg3v_1",
 	sectionSubtitle: "_sectionSubtitle_1mg3v_5",
 	instructionsError: "_instructionsError_1mg3v_9"
-}, ye = I(async () => ({ default: (await y()).MarkdownEditor })), be = ({ labels: e, values: t, errors: i, modelSelector: a, modelLabelId: o, onFieldChange: l, onBack: u, onCancel: d, onSubmit: f, isSubmitting: p = !1, markdownEditorTheme: m, styles: h }) => {
-	let { colors: g, typography: y } = h ?? {}, b = y?.titleClassName ?? "dial-h1-text", S = y?.sectionTitleClassName ?? "dial-body-semi-text", C = y?.sectionSubtitleClassName ?? "dial-tiny-text", T = y?.instructionsLabelClassName ?? "dial-body-semi-text mb-1", E = y?.instructionsErrorClassName ?? "dial-small-text", ee = n({
+}, Te = R(async () => ({ default: (await x()).MarkdownEditor })), Ee = ({ labels: e, values: t, errors: i, modelSelector: a, modelLabelId: o, onFieldChange: l, onBack: u, onCancel: d, onSubmit: f, isSubmitting: p = !1, markdownEditorTheme: m, styles: h }) => {
+	let { colors: g, typography: _ } = h ?? {}, v = _?.titleClassName ?? "dial-h1-text", x = _?.sectionTitleClassName ?? "dial-body-semi-text", S = _?.sectionSubtitleClassName ?? "dial-tiny-text", w = _?.instructionsLabelClassName ?? "dial-body-semi-text mb-1", T = _?.instructionsErrorClassName ?? "dial-small-text", D = n({
 		"--stcf-details-border": g?.detailsColumnBorder,
 		"--stcf-subtitle-text": g?.sectionSubtitleText,
 		"--stcf-error-text": g?.instructionsErrorText
-	}), k = p || !t.displayName.trim() || !t.modelId || !t.prompt.trim();
-	return /* @__PURE__ */ z(V, {
+	}), O = p || !t.displayName.trim() || !t.modelId || !t.prompt.trim();
+	return /* @__PURE__ */ H(W, {
 		labels: {
 			title: e.pageTitle,
 			backButtonLabel: e.backButtonLabel,
 			cancelButtonLabel: e.cancelButtonLabel,
-			submitButtonLabel: e.createButtonLabel
+			submitButtonLabel: e.createButtonLabel,
+			submittingLabel: e.submittingLabel ?? "Saving"
 		},
 		onBack: u,
 		onCancel: d,
 		onSubmit: f,
 		isCancelDisabled: p,
-		isSubmitDisabled: k,
+		isSubmitDisabled: O,
+		isSubmitting: p,
 		styles: {
 			colors: { background: g?.background },
 			header: {
 				colors: { borderColor: g?.headerBorder },
-				typography: { fontClassName: b }
+				typography: { fontClassName: v }
 			},
-			cssVars: ee
+			cssVars: D
 		},
-		left: /* @__PURE__ */ B("div", {
+		left: /* @__PURE__ */ U("div", {
 			role: "group",
 			"aria-label": e.detailsSectionTitle,
 			className: r("flex flex-1 flex-col gap-5 border-e px-8 py-6", X.detailsColumn),
 			children: [
-				/* @__PURE__ */ B("div", {
+				/* @__PURE__ */ U("div", {
 					className: "flex flex-col gap-1",
-					children: [/* @__PURE__ */ z("h2", {
-						className: S,
+					children: [/* @__PURE__ */ H("h2", {
+						className: x,
 						children: e.detailsSectionTitle
-					}), /* @__PURE__ */ z("p", {
-						className: r(C, X.sectionSubtitle),
+					}), /* @__PURE__ */ H("p", {
+						className: r(S, X.sectionSubtitle),
 						children: e.detailsSectionSubtitle
 					})]
 				}),
-				/* @__PURE__ */ z(_, {
+				/* @__PURE__ */ H(y, {
 					id: "scheduled-task-display-name",
 					value: t.displayName,
 					onChange: (e) => l("displayName", e ?? ""),
@@ -334,7 +358,7 @@ var H = {
 					invalid: !!i.displayName,
 					error: i.displayName
 				}),
-				/* @__PURE__ */ z(O, {
+				/* @__PURE__ */ H(A, {
 					id: "scheduled-task-description",
 					value: t.description ?? "",
 					onChange: (e) => l("description", e),
@@ -344,25 +368,25 @@ var H = {
 					error: i.description,
 					caption: t.description ? `${t.description.length}/500` : void 0
 				}),
-				/* @__PURE__ */ B("div", {
+				/* @__PURE__ */ U("div", {
 					className: "flex flex-col gap-1",
 					children: [
-						/* @__PURE__ */ z(v, {
+						/* @__PURE__ */ H(b, {
 							id: o,
 							label: e.modelOrAgentLabel,
 							required: !0
 						}),
 						a,
-						i.modelId && /* @__PURE__ */ z("p", {
-							className: r(E, X.instructionsError),
+						i.modelId && /* @__PURE__ */ H("p", {
+							className: r(T, X.instructionsError),
 							children: i.modelId
 						})
 					]
 				}),
-				/* @__PURE__ */ B("div", {
+				/* @__PURE__ */ U("div", {
 					className: "flex flex-col gap-3",
 					children: [
-						/* @__PURE__ */ z(w, {
+						/* @__PURE__ */ H(E, {
 							labelProps: { label: e.repeatLabel },
 							value: t.repeat,
 							onChange: (e) => l("repeat", e),
@@ -371,27 +395,27 @@ var H = {
 								label: e.label
 							}))
 						}),
-						t.repeat === J.OneTime && /* @__PURE__ */ B("div", {
+						t.repeat === J.OneTime && /* @__PURE__ */ U("div", {
 							className: "flex flex-col gap-1",
-							children: [/* @__PURE__ */ z(s, {
+							children: [/* @__PURE__ */ H(s, {
 								id: "scheduled-task-run-at",
 								mode: c.DateTime,
-								value: pe(t.runAt),
-								onChange: (e) => l("runAt", me(e)),
+								value: ye(t.runAt),
+								onChange: (e) => l("runAt", be(e)),
 								labelProps: {
 									label: e.runAtLabel,
 									required: !0
 								},
 								invalid: !!i.runAt
-							}), i.runAt && /* @__PURE__ */ z("p", {
-								className: r(E, X.instructionsError),
+							}), i.runAt && /* @__PURE__ */ H("p", {
+								className: r(T, X.instructionsError),
 								children: i.runAt
 							})]
 						}),
-						t.repeat !== J.OneTime && /* @__PURE__ */ B(R, { children: [
-							t.repeat !== J.Hourly && /* @__PURE__ */ B("div", {
+						t.repeat !== J.OneTime && /* @__PURE__ */ U(V, { children: [
+							t.repeat !== J.Hourly && /* @__PURE__ */ U("div", {
 								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ z(s, {
+								children: [/* @__PURE__ */ H(s, {
 									id: "scheduled-task-time",
 									mode: c.Time,
 									value: t.time,
@@ -401,29 +425,29 @@ var H = {
 										required: !0
 									},
 									invalid: !!i.time
-								}), i.time && /* @__PURE__ */ z("p", {
-									className: r(E, X.instructionsError),
+								}), i.time && /* @__PURE__ */ H("p", {
+									className: r(T, X.instructionsError),
 									children: i.time
 								})]
 							}),
-							t.repeat === J.Weekly && /* @__PURE__ */ B("div", {
+							t.repeat === J.Weekly && /* @__PURE__ */ U("div", {
 								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ z(s, {
+								children: [/* @__PURE__ */ H(s, {
 									id: "scheduled-task-day-of-week",
 									mode: c.Weekday,
-									value: _e(t.dayOfWeek),
-									onChange: (e) => l("dayOfWeek", ve(e)),
+									value: Ce(t.dayOfWeek),
+									onChange: (e) => l("dayOfWeek", we(e)),
 									labelProps: {
 										label: e.dayOfWeekLabel,
 										required: !0
 									},
 									invalid: !!i.dayOfWeek
-								}), i.dayOfWeek && /* @__PURE__ */ z("p", {
-									className: r(E, X.instructionsError),
+								}), i.dayOfWeek && /* @__PURE__ */ H("p", {
+									className: r(T, X.instructionsError),
 									children: i.dayOfWeek
 								})]
 							}),
-							t.repeat === J.Monthly && /* @__PURE__ */ z(_, {
+							t.repeat === J.Monthly && /* @__PURE__ */ H(y, {
 								id: "scheduled-task-day-of-month",
 								value: t.dayOfMonth ?? "",
 								onChange: (e) => l("dayOfMonth", e ?? ""),
@@ -434,7 +458,7 @@ var H = {
 								invalid: !!i.dayOfMonth,
 								error: i.dayOfMonth
 							}),
-							t.repeat === J.Hourly && /* @__PURE__ */ z(x, {
+							t.repeat === J.Hourly && /* @__PURE__ */ H(C, {
 								id: "scheduled-task-minute",
 								integer: !0,
 								min: 0,
@@ -448,34 +472,34 @@ var H = {
 								invalid: !!i.minute,
 								error: i.minute
 							}),
-							/* @__PURE__ */ B("div", {
+							/* @__PURE__ */ U("div", {
 								className: "flex flex-col gap-3 desktop:flex-row",
-								children: [/* @__PURE__ */ B("div", {
+								children: [/* @__PURE__ */ U("div", {
 									className: "flex flex-1 flex-col gap-1",
-									children: [/* @__PURE__ */ z(s, {
+									children: [/* @__PURE__ */ H(s, {
 										id: "scheduled-task-start-date",
 										mode: c.Date,
-										value: he(t.startDate),
-										onChange: (e) => l("startDate", ge(e)),
+										value: xe(t.startDate),
+										onChange: (e) => l("startDate", Se(e)),
 										labelProps: { label: e.startDateLabel },
 										placeholder: e.startDatePlaceholder,
 										invalid: !!i.startDate
-									}), i.startDate && /* @__PURE__ */ z("p", {
-										className: r(E, X.instructionsError),
+									}), i.startDate && /* @__PURE__ */ H("p", {
+										className: r(T, X.instructionsError),
 										children: i.startDate
 									})]
-								}), /* @__PURE__ */ B("div", {
+								}), /* @__PURE__ */ U("div", {
 									className: "flex flex-1 flex-col gap-1",
-									children: [/* @__PURE__ */ z(s, {
+									children: [/* @__PURE__ */ H(s, {
 										id: "scheduled-task-end-date",
 										mode: c.Date,
-										value: he(t.endDate),
-										onChange: (e) => l("endDate", ge(e)),
+										value: xe(t.endDate),
+										onChange: (e) => l("endDate", Se(e)),
 										labelProps: { label: e.endDateLabel },
 										placeholder: e.endDatePlaceholder,
 										invalid: !!i.endDate
-									}), i.endDate && /* @__PURE__ */ z("p", {
-										className: r(E, X.instructionsError),
+									}), i.endDate && /* @__PURE__ */ H("p", {
+										className: r(T, X.instructionsError),
 										children: i.endDate
 									})]
 								})]
@@ -485,39 +509,39 @@ var H = {
 				})
 			]
 		}),
-		children: /* @__PURE__ */ B("div", {
+		children: /* @__PURE__ */ U("div", {
 			role: "group",
 			"aria-label": e.configurationSectionTitle,
 			className: "flex flex-1 flex-col gap-5 px-8 py-6",
-			children: [/* @__PURE__ */ B("div", {
+			children: [/* @__PURE__ */ U("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ z("h2", {
-					className: S,
+				children: [/* @__PURE__ */ H("h2", {
+					className: x,
 					children: e.configurationSectionTitle
-				}), /* @__PURE__ */ z("p", {
-					className: r(C, X.sectionSubtitle),
+				}), /* @__PURE__ */ H("p", {
+					className: r(S, X.sectionSubtitle),
 					children: e.configurationSectionSubtitle
 				})]
-			}), /* @__PURE__ */ B("div", {
+			}), /* @__PURE__ */ U("div", {
 				role: "group",
 				"aria-label": e.instructionsLabel,
 				className: "flex flex-1 flex-col gap-1",
 				children: [
-					/* @__PURE__ */ z("span", {
-						className: T,
+					/* @__PURE__ */ H("span", {
+						className: w,
 						children: e.instructionsLabel
 					}),
-					/* @__PURE__ */ z(F, {
-						fallback: /* @__PURE__ */ z(D, {}),
-						children: /* @__PURE__ */ z(ye, {
+					/* @__PURE__ */ H(L, {
+						fallback: /* @__PURE__ */ H(k, {}),
+						children: /* @__PURE__ */ H(Te, {
 							value: t.prompt,
 							onChange: (e) => l("prompt", e),
 							height: 480,
 							theme: m
 						})
 					}),
-					i.prompt && /* @__PURE__ */ z("p", {
-						className: r(E, X.instructionsError),
+					i.prompt && /* @__PURE__ */ H("p", {
+						className: r(T, X.instructionsError),
 						children: i.prompt
 					})
 				]
@@ -527,30 +551,31 @@ var H = {
 }, Z = /* @__PURE__ */ function(e) {
 	return e.Success = "success", e.Error = "error", e.InProgress = "inProgress", e.Missed = "missed", e;
 }({}), Q = {
-	subtitleText: "_subtitleText_kxojs_1",
-	successIcon: "_successIcon_kxojs_5",
-	errorIcon: "_errorIcon_kxojs_9",
-	missedIcon: "_missedIcon_kxojs_13",
-	currentRun: "_currentRun_kxojs_17"
-}, xe = ({ status: e }) => {
+	subtitleText: "_subtitleText_1bug5_1",
+	successIcon: "_successIcon_1bug5_5",
+	errorIcon: "_errorIcon_1bug5_9",
+	missedIcon: "_missedIcon_1bug5_13",
+	currentRun: "_currentRun_1bug5_17",
+	unreadDot: "_unreadDot_1bug5_21"
+}, De = ({ status: e }) => {
 	switch (e) {
-		case Z.Success: return /* @__PURE__ */ z(j, {
+		case Z.Success: return /* @__PURE__ */ H(ae, {
 			size: u.SM,
 			className: Q.successIcon,
 			"aria-hidden": !0,
 			stroke: d
 		});
-		case Z.Error: return /* @__PURE__ */ z(M, {
+		case Z.Error: return /* @__PURE__ */ H(N, {
 			size: u.SM,
 			className: Q.errorIcon,
 			"aria-hidden": !0,
 			stroke: d
 		});
-		case Z.InProgress: return /* @__PURE__ */ z("span", {
+		case Z.InProgress: return /* @__PURE__ */ H("span", {
 			"aria-hidden": !0,
-			children: /* @__PURE__ */ z(D, { size: u.SM })
+			children: /* @__PURE__ */ H(k, { size: u.SM })
 		});
-		case Z.Missed: return /* @__PURE__ */ z(k, {
+		case Z.Missed: return /* @__PURE__ */ H(j, {
 			size: u.SM,
 			className: Q.missedIcon,
 			"aria-hidden": !0,
@@ -558,92 +583,102 @@ var H = {
 		});
 		default: return null;
 	}
-}, Se = ({ items: e, isLoading: t = !1, isLoadingMore: i = !1, skeletonCount: a = 6, error: o, onRetry: s, currentRunId: c, onRunClick: l, labels: u, footer: f, styles: p }) => {
-	let { colors: h, typography: g } = p ?? {}, _ = g?.runTimestampClassName ?? "dial-small-text", v = g?.subtitleClassName ?? "dial-body-text", y = n({
-		"--strhl-success-icon": h?.successIconColor,
-		"--strhl-error-icon": h?.errorIconColor,
-		"--strhl-missed-icon": h?.missedIconColor,
-		"--strhl-subtitle-text": h?.subtitleTextColor,
-		"--strhl-current-run-bg": h?.currentRunBackground
-	}), b = (e) => {
-		let t = u.runStatusLabels[e.status], n = e.id === c, i = n && u.currentRunLabel ? `${t} ${e.timestampLabel} — ${u.currentRunLabel}` : `${t} ${e.timestampLabel}`, a = !!l;
-		return /* @__PURE__ */ B("li", {
-			...a ? {
+}, Oe = ({ items: e, isLoading: t = !1, isLoadingMore: i = !1, skeletonCount: a = 6, error: o, onRetry: s, currentRunId: c, onRunClick: l, labels: u, footer: f, styles: p }) => {
+	let { colors: m, typography: h } = p ?? {}, _ = h?.runTimestampClassName ?? "dial-small-text", v = h?.subtitleClassName ?? "dial-body-text", y = u.unreadIndicatorLabel ?? "Unread", b = n({
+		"--strhl-success-icon": m?.successIconColor,
+		"--strhl-error-icon": m?.errorIconColor,
+		"--strhl-missed-icon": m?.missedIconColor,
+		"--strhl-subtitle-text": m?.subtitleTextColor,
+		"--strhl-current-run-bg": m?.currentRunBackground,
+		"--strhl-unread-dot": m?.unreadDotColor
+	}), x = (e) => {
+		let t = u.runStatusLabels[e.status], n = e.id === c, i = [e.isUnread ? y : void 0, n ? u.currentRunLabel : void 0].filter((e) => !!e), a = [`${t} ${e.timestampLabel}`, ...i].join(" — "), o = !!e.conversationId && !!l;
+		return /* @__PURE__ */ U("li", {
+			...o ? {
 				role: "button",
 				tabIndex: 0,
-				onClick: () => l?.(e.id),
+				onClick: () => l?.(e),
 				onKeyDown: (t) => {
-					(t.key === "Enter" || t.key === " ") && (t.preventDefault(), l?.(e.id));
+					(t.key === "Enter" || t.key === " ") && (t.preventDefault(), l?.(e));
 				}
 			} : {},
-			"aria-label": i,
+			"aria-label": a,
 			"aria-current": n ? "true" : void 0,
-			className: r("flex h-8 items-center justify-between gap-2 rounded-full pe-2 ps-5", n && Q.currentRun, a && "cursor-pointer"),
-			children: [/* @__PURE__ */ z("span", {
-				className: r(_, "truncate"),
-				children: e.timestampLabel
-			}), /* @__PURE__ */ z("span", {
+			className: r("flex h-8 items-center justify-between gap-2 rounded-full pe-2 ps-5", n && Q.currentRun, o && "cursor-pointer"),
+			children: [/* @__PURE__ */ U("span", {
+				className: "flex items-center gap-2 truncate",
+				children: [/* @__PURE__ */ H("span", {
+					className: "relative flex size-3 shrink-0 items-center justify-center",
+					children: e.isUnread && /* @__PURE__ */ H("span", {
+						className: r("size-[5.33px] rounded-full", Q.unreadDot),
+						"aria-hidden": !0
+					})
+				}), /* @__PURE__ */ H("span", {
+					className: r(_, "truncate"),
+					children: e.timestampLabel
+				})]
+			}), /* @__PURE__ */ H("span", {
 				className: "flex h-8 w-14 shrink-0 items-center justify-end",
-				children: /* @__PURE__ */ z(xe, { status: e.status })
+				children: /* @__PURE__ */ H(De, { status: e.status })
 			})]
 		}, e.id);
-	}, x = (e) => Array.from({ length: e }, (e, t) => /* @__PURE__ */ B("li", {
+	}, S = (e) => Array.from({ length: e }, (e, t) => /* @__PURE__ */ U("li", {
 		"aria-hidden": "true",
 		className: "flex h-8 items-center justify-between gap-2 pe-2 ps-5",
-		children: [/* @__PURE__ */ z(T, {
-			variant: E.Rectangular,
+		children: [/* @__PURE__ */ H(D, {
+			variant: O.Rectangular,
 			width: "160px",
 			height: "16px"
-		}), /* @__PURE__ */ z(T, {
-			variant: E.Rectangular,
+		}), /* @__PURE__ */ H(D, {
+			variant: O.Rectangular,
 			width: "16px",
 			height: "16px",
 			className: "shrink-0 rounded-full"
 		})]
 	}, `history-skeleton-${t}`));
-	return t && e.length === 0 ? /* @__PURE__ */ z("ul", {
-		style: y,
+	return t && e.length === 0 ? /* @__PURE__ */ H("ul", {
+		style: b,
 		"aria-label": u.historyTitle,
 		className: "flex flex-col gap-0.5",
-		children: x(a)
-	}) : o && e.length === 0 ? /* @__PURE__ */ B("div", {
-		style: y,
+		children: S(a)
+	}) : o && e.length === 0 ? /* @__PURE__ */ U("div", {
+		style: b,
 		className: "flex flex-col items-start gap-3",
-		children: [/* @__PURE__ */ z("p", {
+		children: [/* @__PURE__ */ H("p", {
 			role: "alert",
 			className: r(v, Q.subtitleText),
 			children: u.errorLabel
-		}), /* @__PURE__ */ z(m, {
+		}), /* @__PURE__ */ H(g, {
 			label: u.retryLabel,
 			onClick: s
 		})]
-	}) : e.length === 0 ? /* @__PURE__ */ B("div", {
-		style: y,
+	}) : e.length === 0 ? /* @__PURE__ */ U("div", {
+		style: b,
 		className: "flex w-full flex-col items-center justify-center gap-2 py-4",
-		children: [/* @__PURE__ */ z(N, {
+		children: [/* @__PURE__ */ H(P, {
 			size: 44,
 			stroke: d,
 			className: Q.subtitleText,
 			"aria-hidden": !0
-		}), /* @__PURE__ */ z("p", {
+		}), /* @__PURE__ */ H("p", {
 			role: "status",
 			className: _,
 			children: u.emptyLabel
 		})]
-	}) : /* @__PURE__ */ B("ul", {
-		style: y,
+	}) : /* @__PURE__ */ U("ul", {
+		style: b,
 		"aria-label": u.historyTitle,
 		className: "flex flex-col gap-0.5",
 		children: [
-			e.map(b),
-			i && x(a),
-			o ? /* @__PURE__ */ B("li", {
+			e.map(x),
+			i && S(a),
+			o ? /* @__PURE__ */ U("li", {
 				className: "flex flex-col items-start gap-3 px-5 py-2",
-				children: [/* @__PURE__ */ z("p", {
+				children: [/* @__PURE__ */ H("p", {
 					role: "alert",
 					className: r(v, Q.subtitleText),
 					children: u.errorLabel
-				}), /* @__PURE__ */ z(m, {
+				}), /* @__PURE__ */ H(g, {
 					label: u.retryLabel,
 					onClick: s
 				})]
@@ -659,35 +694,35 @@ var H = {
 	errorIcon: "_errorIcon_1ci42_21",
 	missedIcon: "_missedIcon_1ci42_25",
 	historyCard: "_historyCard_1ci42_29"
-}, Ce = ({ labels: t, onBack: i, onEdit: a, onDelete: s, isDeleting: c = !1, isDeleted: l = !1, isActive: f, isActiveUpdating: p = !1, isActiveDisabled: g = !1, onActiveChange: _, displayName: v, isLoading: y = !1, error: x, onRetry: S, description: C, modelLabel: w, repeatsLabel: T, activeWindowLabel: E, nextRunLabel: O, instructionsMarkdown: k, renderInstructions: A, runs: j, runsIsLoading: M = !1, runsIsLoadingMore: N = !1, runsSkeletonCount: P = 6, runsError: re, onRunsRetry: F, runsHasMore: I = !1, onRunsLoadMore: L, onRunClick: ae, styles: R }) => {
-	let { colors: V, typography: H } = R ?? {}, oe = H?.titleClassName ?? "dial-h2-text", U = H?.sectionTitleClassName ?? "dial-body-semi-text", W = H?.fieldLabelClassName ?? "dial-tiny-text", G = H?.fieldValueClassName ?? "dial-small-text", K = H?.runTimestampClassName ?? "dial-small-text", se = n({
-		"--stdv-bg": V?.background,
-		"--stdv-header-border": V?.headerBorder,
-		"--stdv-details-border": V?.detailsColumnBorder,
-		"--stdv-subtitle-text": V?.subtitleText,
-		"--stdv-success-icon": V?.successIconColor,
-		"--stdv-error-icon": V?.errorIconColor,
-		"--stdv-missed-icon": V?.missedIconColor,
-		"--stdv-history-bg": V?.historyCardBackground
-	}), q = L && I && t.historyShowMoreLabel ? /* @__PURE__ */ z("li", {
+}, ke = ({ labels: t, onBack: i, onEdit: a, onDelete: s, isDeleting: c = !1, isDeleted: l = !1, isActive: f, isActiveUpdating: p = !1, isActiveDisabled: m = !1, onActiveChange: h, displayName: v, isLoading: y = !1, error: b, onRetry: x, description: C, modelLabel: w, repeatsLabel: T, activeWindowLabel: E, nextRunLabel: D, instructionsMarkdown: O, renderInstructions: A, runs: j, runsIsLoading: ne = !1, runsIsLoadingMore: M = !1, runsSkeletonCount: re = 6, runsError: ie, onRunsRetry: ae, runsHasMore: N = !1, onRunsLoadMore: P, onRunClick: F, styles: se }) => {
+	let { colors: L, typography: R } = se ?? {}, ce = R?.titleClassName ?? "dial-h2-text", z = R?.sectionTitleClassName ?? "dial-body-semi-text", B = R?.fieldLabelClassName ?? "dial-tiny-text", V = R?.fieldValueClassName ?? "dial-small-text", W = R?.runTimestampClassName ?? "dial-small-text", G = n({
+		"--stdv-bg": L?.background,
+		"--stdv-header-border": L?.headerBorder,
+		"--stdv-details-border": L?.detailsColumnBorder,
+		"--stdv-subtitle-text": L?.subtitleText,
+		"--stdv-success-icon": L?.successIconColor,
+		"--stdv-error-icon": L?.errorIconColor,
+		"--stdv-missed-icon": L?.missedIconColor,
+		"--stdv-history-bg": L?.historyCardBackground
+	}), K = P && N && t.historyShowMoreLabel ? /* @__PURE__ */ H("li", {
 		className: r("sticky bottom-0 z-10 rounded-b-xl px-6 pb-5 pt-2", $.historyCard),
-		children: /* @__PURE__ */ z(m, {
+		children: /* @__PURE__ */ H(g, {
 			label: t.historyShowMoreLabel,
-			onClick: L,
-			disabled: N
+			onClick: P,
+			disabled: M
 		})
 	}) : void 0;
-	return /* @__PURE__ */ B("div", {
-		style: se,
+	return /* @__PURE__ */ U("div", {
+		style: G,
 		className: r("flex h-full w-full flex-col overflow-y-auto", $.container),
 		children: [
-			/* @__PURE__ */ B("div", {
+			/* @__PURE__ */ U("div", {
 				className: r("flex h-16 shrink-0 items-center justify-between gap-2 border-b px-8", $.header),
-				children: [/* @__PURE__ */ B("div", {
+				children: [/* @__PURE__ */ U("div", {
 					className: "flex min-w-0 items-center gap-2",
 					children: [
-						/* @__PURE__ */ z(h, {
-							icon: /* @__PURE__ */ z(te, {
+						/* @__PURE__ */ H(_, {
+							icon: /* @__PURE__ */ H(te, {
 								size: u.LG,
 								className: "rtl:scale-x-[-1]",
 								"aria-hidden": !0,
@@ -696,29 +731,29 @@ var H = {
 							"aria-label": t.backAriaLabel,
 							onClick: i
 						}),
-						/* @__PURE__ */ z("h1", {
-							className: r("truncate", oe),
+						/* @__PURE__ */ H("h1", {
+							className: r("truncate", ce),
 							children: v
 						}),
-						l && /* @__PURE__ */ z("span", {
-							className: r("shrink-0", G, $.subtitleText),
+						l && /* @__PURE__ */ H("span", {
+							className: r("shrink-0", V, $.subtitleText),
 							children: t.deletedStateLabel
 						})
 					]
-				}), /* @__PURE__ */ B("div", {
+				}), /* @__PURE__ */ U("div", {
 					className: "flex shrink-0 items-center gap-2",
 					children: [
-						!l && f !== void 0 && /* @__PURE__ */ z(ee, {
+						!l && f !== void 0 && /* @__PURE__ */ H(ee, {
 							id: "scheduled-task-active-switch",
 							labelProps: { label: t.activeStatusLabel },
 							isOn: f,
-							disabled: p || g || c,
-							onChange: (e) => _?.(e)
+							disabled: p || m || c,
+							onChange: (e) => h?.(e)
 						}),
-						!l && s && /* @__PURE__ */ z(m, {
+						!l && s && /* @__PURE__ */ H(g, {
 							variant: o.Danger,
 							label: t.deleteButtonLabel,
-							iconBefore: /* @__PURE__ */ z(ie, {
+							iconBefore: /* @__PURE__ */ H(I, {
 								size: u.SM,
 								"aria-hidden": !0,
 								stroke: d
@@ -727,9 +762,9 @@ var H = {
 							disabled: c,
 							className: "shrink-0"
 						}),
-						!l && a && /* @__PURE__ */ z(b, {
+						!l && a && /* @__PURE__ */ H(S, {
 							label: t.editButtonLabel,
-							iconBefore: /* @__PURE__ */ z(ne, {
+							iconBefore: /* @__PURE__ */ H(oe, {
 								size: u.SM,
 								"aria-hidden": !0,
 								stroke: d
@@ -741,141 +776,143 @@ var H = {
 					]
 				})]
 			}),
-			t.activeStatusAnnouncement != null && /* @__PURE__ */ z("span", {
+			t.activeStatusAnnouncement != null && /* @__PURE__ */ H("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
 				children: t.activeStatusAnnouncement
 			}),
-			y && /* @__PURE__ */ z("div", {
+			y && /* @__PURE__ */ H("div", {
 				className: "flex flex-1 items-center justify-center",
-				children: /* @__PURE__ */ z(D, {})
+				children: /* @__PURE__ */ H(k, {})
 			}),
-			!y && x && /* @__PURE__ */ B("div", {
+			!y && b && /* @__PURE__ */ U("div", {
 				className: "flex flex-1 flex-col items-center justify-center gap-3",
-				children: [/* @__PURE__ */ z("p", {
-					className: r(G, $.subtitleText),
+				children: [/* @__PURE__ */ H("p", {
+					className: r(V, $.subtitleText),
 					children: t.errorLabel
-				}), /* @__PURE__ */ z(m, {
+				}), /* @__PURE__ */ H(g, {
 					label: t.retryLabel,
-					onClick: S
+					onClick: x
 				})]
 			}),
-			!y && !x && /* @__PURE__ */ B("div", {
+			!y && !b && /* @__PURE__ */ U("div", {
 				className: "flex flex-1 flex-col desktop:flex-row",
 				children: [
-					/* @__PURE__ */ B("div", {
+					/* @__PURE__ */ U("div", {
 						role: "group",
 						"aria-label": t.detailsTitle,
 						className: r("flex w-full flex-col gap-5 border-e px-8 py-6 desktop:w-[360px] desktop:shrink-0", $.detailsColumn),
 						children: [
-							/* @__PURE__ */ z("h2", {
-								className: U,
+							/* @__PURE__ */ H("h2", {
+								className: z,
 								children: t.detailsTitle
 							}),
-							C && /* @__PURE__ */ B("div", {
+							C && /* @__PURE__ */ U("div", {
 								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ z("span", {
-									className: r(W, $.subtitleText),
+								children: [/* @__PURE__ */ H("span", {
+									className: r(B, $.subtitleText),
 									children: t.descriptionLabel
-								}), /* @__PURE__ */ z("p", {
-									className: G,
+								}), /* @__PURE__ */ H("p", {
+									className: V,
 									children: C
 								})]
 							}),
-							w && /* @__PURE__ */ B("div", {
+							w && /* @__PURE__ */ U("div", {
 								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ z("span", {
-									className: r(W, $.subtitleText),
+								children: [/* @__PURE__ */ H("span", {
+									className: r(B, $.subtitleText),
 									children: t.modelLabel
-								}), /* @__PURE__ */ z("p", {
-									className: G,
+								}), /* @__PURE__ */ H("p", {
+									className: V,
 									children: w
 								})]
 							}),
-							T && /* @__PURE__ */ B("div", {
+							T && /* @__PURE__ */ U("div", {
 								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ z("span", {
-									className: r(W, $.subtitleText),
+								children: [/* @__PURE__ */ H("span", {
+									className: r(B, $.subtitleText),
 									children: t.repeatsLabel
-								}), /* @__PURE__ */ z("p", {
-									className: G,
+								}), /* @__PURE__ */ H("p", {
+									className: V,
 									children: T
 								})]
 							}),
-							E && /* @__PURE__ */ B("div", {
+							E && /* @__PURE__ */ U("div", {
 								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ z("span", {
-									className: r(W, $.subtitleText),
+								children: [/* @__PURE__ */ H("span", {
+									className: r(B, $.subtitleText),
 									children: t.activeWindowLabel
-								}), /* @__PURE__ */ z("p", {
-									className: G,
+								}), /* @__PURE__ */ H("p", {
+									className: V,
 									children: E
 								})]
 							})
 						]
 					}),
-					/* @__PURE__ */ B("div", {
+					/* @__PURE__ */ U("div", {
 						className: "flex w-full min-w-0 flex-1 flex-col gap-5 px-8 py-6",
-						children: [/* @__PURE__ */ z("h2", {
-							className: U,
+						children: [/* @__PURE__ */ H("h2", {
+							className: z,
 							children: t.configurationTitle
-						}), /* @__PURE__ */ B("div", {
+						}), /* @__PURE__ */ U("div", {
 							role: "group",
 							"aria-label": t.instructionsLabel,
 							className: "flex flex-col gap-1",
-							children: [/* @__PURE__ */ z("span", {
-								className: r(W, $.subtitleText),
+							children: [/* @__PURE__ */ H("span", {
+								className: r(B, $.subtitleText),
 								children: t.instructionsLabel
-							}), k && ((t) => A ? A(t) : /* @__PURE__ */ z(e, { content: t }))(k)]
+							}), O && ((t) => A ? A(t) : /* @__PURE__ */ H(e, { content: t }))(O)]
 						})]
 					}),
-					/* @__PURE__ */ z("div", {
+					/* @__PURE__ */ H("div", {
 						className: "flex w-full justify-center p-6 desktop:w-auto desktop:items-start",
-						children: /* @__PURE__ */ B("div", {
+						children: /* @__PURE__ */ U("div", {
 							className: r("flex max-h-[70vh] w-full flex-col overflow-y-auto rounded-xl shadow-md desktop:w-[360px]", $.historyCard),
-							children: [/* @__PURE__ */ B("div", {
+							children: [/* @__PURE__ */ U("div", {
 								className: r("sticky top-0 z-10 flex flex-col gap-4 rounded-t-xl px-6 pb-2 pt-5", $.historyCard),
 								children: [
-									/* @__PURE__ */ z("h2", {
-										className: U,
+									/* @__PURE__ */ H("h2", {
+										className: z,
 										children: t.historyTitle
 									}),
-									O && /* @__PURE__ */ z("p", {
-										className: r(K, $.subtitleText),
-										children: O
+									D && /* @__PURE__ */ H("p", {
+										className: r(W, $.subtitleText),
+										children: D
 									}),
-									t.historyLoadingMoreLabel && /* @__PURE__ */ z("span", {
+									t.historyLoadingMoreLabel && /* @__PURE__ */ H("span", {
 										role: "status",
 										"aria-live": "polite",
 										className: "sr-only",
-										children: N ? t.historyLoadingMoreLabel : ""
+										children: M ? t.historyLoadingMoreLabel : ""
 									})
 								]
-							}), /* @__PURE__ */ z("div", {
+							}), /* @__PURE__ */ H("div", {
 								className: "flex flex-1 flex-col gap-4 px-6 pb-2",
-								children: /* @__PURE__ */ z(Se, {
+								children: /* @__PURE__ */ H(Oe, {
 									items: j,
-									isLoading: M,
-									isLoadingMore: N,
-									skeletonCount: P,
-									error: re,
-									onRetry: F,
-									onRunClick: ae,
+									isLoading: ne,
+									isLoadingMore: M,
+									skeletonCount: re,
+									error: ie,
+									onRetry: ae,
+									onRunClick: F,
 									labels: {
 										historyTitle: t.historyTitle,
 										emptyLabel: t.historyEmptyLabel,
 										errorLabel: t.historyErrorLabel,
 										retryLabel: t.historyRetryLabel,
-										runStatusLabels: t.runStatusLabels
+										runStatusLabels: t.runStatusLabels,
+										unreadIndicatorLabel: t.unreadIndicatorLabel
 									},
-									footer: q,
+									footer: K,
 									styles: {
-										typography: { runTimestampClassName: K },
+										typography: { runTimestampClassName: W },
 										colors: {
-											successIconColor: V?.successIconColor,
-											errorIconColor: V?.errorIconColor,
-											missedIconColor: V?.missedIconColor
+											successIconColor: L?.successIconColor,
+											errorIconColor: L?.errorIconColor,
+											missedIconColor: L?.missedIconColor,
+											unreadDotColor: L?.unreadDotColor
 										}
 									}
 								})
@@ -886,27 +923,27 @@ var H = {
 			})
 		]
 	});
-}, we = ({ modelLabel: t, instructionsLabel: n, modelDisplayName: r, instructionsMarkdown: i, renderInstructions: a, styles: o }) => {
+}, Ae = ({ modelLabel: t, instructionsLabel: n, modelDisplayName: r, instructionsMarkdown: i, renderInstructions: a, styles: o }) => {
 	let s = o?.typography?.fieldLabelClassName ?? "dial-tiny-text", c = o?.typography?.fieldValueClassName ?? "dial-body-text";
-	return /* @__PURE__ */ B("div", {
+	return /* @__PURE__ */ U("div", {
 		className: "flex flex-col gap-3",
-		children: [r && /* @__PURE__ */ B("div", {
+		children: [r && /* @__PURE__ */ U("div", {
 			className: "flex flex-col gap-2",
-			children: [/* @__PURE__ */ z("span", {
+			children: [/* @__PURE__ */ H("span", {
 				className: s,
 				children: t
-			}), /* @__PURE__ */ z("p", {
+			}), /* @__PURE__ */ H("p", {
 				className: c,
 				children: r
 			})]
-		}), i && /* @__PURE__ */ B("div", {
+		}), i && /* @__PURE__ */ U("div", {
 			className: "flex flex-col gap-2",
-			children: [/* @__PURE__ */ z("span", {
+			children: [/* @__PURE__ */ H("span", {
 				className: s,
 				children: n
-			}), ((t) => a ? a(t) : /* @__PURE__ */ z(e, { content: t }))(i)]
+			}), ((t) => a ? a(t) : /* @__PURE__ */ H(e, { content: t }))(i)]
 		})]
 	});
 };
 //#endregion
-export { fe as DESCRIPTION_MAX_LENGTH, oe as ScheduledTaskCard, se as ScheduledTaskCardGrid, K as ScheduledTaskCardSkeleton, be as ScheduledTaskCreateForm, Ce as ScheduledTaskDetailView, we as ScheduledTaskDetailsSummary, J as ScheduledTaskRepeat, Se as ScheduledTaskRunHistoryList, Z as ScheduledTaskRunStatus, ue as ScheduledTasks, de as ScheduledTasksSortKey };
+export { ve as DESCRIPTION_MAX_LENGTH, K as ScheduledTaskCard, pe as ScheduledTaskCardGrid, fe as ScheduledTaskCardSkeleton, Ee as ScheduledTaskCreateForm, ke as ScheduledTaskDetailView, Ae as ScheduledTaskDetailsSummary, J as ScheduledTaskRepeat, Oe as ScheduledTaskRunHistoryList, Z as ScheduledTaskRunStatus, ge as ScheduledTasks, _e as ScheduledTasksSortKey };