@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

package/dist/bigconsole/components/datasink/RefreshTypeSelector.js

@@ -1,271 +1,276 @@
-import { memo as e, useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import "../common/sectionStyles.js";
+import "../common/index.js";
+import { memo as e, useCallback as t, useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+import { useI18n as o } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/bigconsole/components/datasink/RefreshTypeSelector.tsx
-var s = [
-	{
-		label: "Every 5 minutes",
-		cron: "*/5 * * * *",
-		description: "High frequency updates"
-	},
-	{
-		label: "Every 15 minutes",
-		cron: "*/15 * * * *",
-		description: "Balanced frequency"
-	},
-	{
-		label: "Every hour",
-		cron: "0 * * * *",
-		description: "Hourly updates"
-	},
-	{
-		label: "Every day at midnight",
-		cron: "0 0 * * *",
-		description: "Daily updates"
-	}
-], c = [
-	{
-		value: "UTC",
-		label: "UTC"
-	},
-	{
-		value: "America/New_York",
-		label: "Eastern Time (US)"
-	},
-	{
-		value: "America/Los_Angeles",
-		label: "Pacific Time (US)"
-	},
-	{
-		value: "Europe/London",
-		label: "London (UK)"
-	},
-	{
-		value: "Europe/Paris",
-		label: "Paris (EU)"
-	},
-	{
-		value: "Asia/Tokyo",
-		label: "Tokyo (Japan)"
-	},
-	{
-		value: "Asia/Kolkata",
-		label: "India (IST)"
-	},
-	{
-		value: "Australia/Sydney",
-		label: "Sydney (Australia)"
-	}
-];
-function l(e) {
-	return s.find((t) => t.cron === e) || null;
-}
-var u = e(function({ value: e, onChange: u, disabled: d = !1, error: f }) {
-	let [p, m] = i(e?.type || "manual"), [h, g] = i(e?.schedule ? l(e.schedule.cron) || null : s[1]), [_, v] = i(e?.schedule ? !l(e.schedule.cron) : !1), [y, b] = i(e?.schedule?.cron || ""), [x, S] = i(e?.schedule?.timezone || "UTC"), C = r(e);
+var l = e(function({ value: e, onChange: l, disabled: u = !1, error: d }) {
+	let { t: f } = o(), p = r(() => [
+		{
+			label: f("bigconsole.dataSinks.refreshType.presetEvery5MinutesLabel", "Every 5 minutes"),
+			cron: "*/5 * * * *",
+			description: f("bigconsole.dataSinks.refreshType.presetEvery5MinutesDescription", "High frequency updates")
+		},
+		{
+			label: f("bigconsole.dataSinks.refreshType.presetEvery15MinutesLabel", "Every 15 minutes"),
+			cron: "*/15 * * * *",
+			description: f("bigconsole.dataSinks.refreshType.presetEvery15MinutesDescription", "Balanced frequency")
+		},
+		{
+			label: f("bigconsole.dataSinks.refreshType.presetEveryHourLabel", "Every hour"),
+			cron: "0 * * * *",
+			description: f("bigconsole.dataSinks.refreshType.presetEveryHourDescription", "Hourly updates")
+		},
+		{
+			label: f("bigconsole.dataSinks.refreshType.presetEveryDayLabel", "Every day at midnight"),
+			cron: "0 0 * * *",
+			description: f("bigconsole.dataSinks.refreshType.presetEveryDayDescription", "Daily updates")
+		}
+	], [f]), m = r(() => [
+		{
+			value: "UTC",
+			label: f("bigconsole.dataSinks.refreshType.timezoneUtc", "UTC")
+		},
+		{
+			value: "America/New_York",
+			label: f("bigconsole.dataSinks.refreshType.timezoneEastern", "Eastern Time (US)")
+		},
+		{
+			value: "America/Los_Angeles",
+			label: f("bigconsole.dataSinks.refreshType.timezonePacific", "Pacific Time (US)")
+		},
+		{
+			value: "Europe/London",
+			label: f("bigconsole.dataSinks.refreshType.timezoneLondon", "London (UK)")
+		},
+		{
+			value: "Europe/Paris",
+			label: f("bigconsole.dataSinks.refreshType.timezoneParis", "Paris (EU)")
+		},
+		{
+			value: "Asia/Tokyo",
+			label: f("bigconsole.dataSinks.refreshType.timezoneTokyo", "Tokyo (Japan)")
+		},
+		{
+			value: "Asia/Kolkata",
+			label: f("bigconsole.dataSinks.refreshType.timezoneKolkata", "India (IST)")
+		},
+		{
+			value: "Australia/Sydney",
+			label: f("bigconsole.dataSinks.refreshType.timezoneSydney", "Sydney (Australia)")
+		}
+	], [f]), h = t((e) => p.find((t) => t.cron === e) || null, [p]), [g, _] = a(e?.type || "manual"), [v, y] = a(e?.schedule ? h(e.schedule.cron) || null : p[1]), [b, x] = a(e?.schedule ? !h(e.schedule.cron) : !1), [S, C] = a(e?.schedule?.cron || ""), [w, T] = a(e?.schedule?.timezone || "UTC"), E = i(e);
 	n(() => {
-		C.current !== e && e && (C.current = e, queueMicrotask(() => {
-			if (m(e.type), e.schedule) {
-				S(e.schedule.timezone);
-				let t = l(e.schedule.cron);
-				t ? (g(t), v(!1)) : (b(e.schedule.cron), v(!0));
+		E.current !== e && e && (E.current = e, queueMicrotask(() => {
+			if (_(e.type), e.schedule) {
+				T(e.schedule.timezone);
+				let t = h(e.schedule.cron);
+				t ? (y(t), x(!1)) : (C(e.schedule.cron), x(!0));
 			}
 		}));
-	}, [e]);
-	let w = t((e) => {
-		d || (m(e), u(e === "manual" ? { type: "manual" } : {
+	}, [e, h]);
+	let D = t((e) => {
+		u || (_(e), l(e === "manual" ? { type: "manual" } : {
 			type: "scheduled",
 			schedule: {
-				cron: _ ? y : h?.cron || s[1].cron,
-				timezone: x
+				cron: b ? S : v?.cron || p[1].cron,
+				timezone: w
 			}
 		}));
 	}, [
-		d,
 		u,
-		_,
-		y,
-		h,
-		x
-	]), T = t((e) => {
-		d || (g(e), v(!1), u({
+		l,
+		b,
+		S,
+		v,
+		w,
+		p
+	]), O = t((e) => {
+		u || (y(e), x(!1), l({
 			type: "scheduled",
 			schedule: {
 				cron: e.cron,
-				timezone: x
+				timezone: w
 			}
 		}));
 	}, [
-		d,
 		u,
-		x
-	]), E = t(() => {
-		d || (v(!0), g(null), y && u({
+		l,
+		w
+	]), k = t(() => {
+		u || (x(!0), y(null), S && l({
 			type: "scheduled",
 			schedule: {
-				cron: y,
-				timezone: x
+				cron: S,
+				timezone: w
 			}
 		}));
 	}, [
-		d,
 		u,
-		y,
-		x
-	]), D = t((e) => {
+		l,
+		S,
+		w
+	]), A = t((e) => {
 		let t = e.target.value;
-		b(t), t.trim() && u({
+		C(t), t.trim() && l({
 			type: "scheduled",
 			schedule: {
 				cron: t,
-				timezone: x
+				timezone: w
 			}
 		});
-	}, [u, x]), O = t((e) => {
+	}, [l, w]), j = t((e) => {
 		let t = e.target.value;
-		S(t), p === "scheduled" && u({
+		T(t), g === "scheduled" && l({
 			type: "scheduled",
 			schedule: {
-				cron: _ ? y : h?.cron || "",
+				cron: b ? S : v?.cron || "",
 				timezone: t
 			}
 		});
 	}, [
-		u,
-		p,
-		_,
-		y,
-		h
+		l,
+		g,
+		b,
+		S,
+		v
 	]);
-	return /* @__PURE__ */ o("div", {
+	return /* @__PURE__ */ c("div", {
 		className: "space-y-4",
 		children: [
-			/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
+			/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
 				className: "block text-sm font-medium text-text-primary mb-1",
-				children: "Refresh Type"
-			}), /* @__PURE__ */ a("p", {
+				children: f("bigconsole.dataSinks.refreshType.heading", "Refresh Type")
+			}), /* @__PURE__ */ s("p", {
 				className: "text-xs text-text-secondary",
-				children: "When should this data be updated?"
+				children: f("bigconsole.dataSinks.refreshType.headingDescription", "When should this data be updated?")
 			})] }),
-			/* @__PURE__ */ o("div", {
-				className: "space-y-3",
-				children: [/* @__PURE__ */ o("label", {
+			/* @__PURE__ */ c("div", {
+				className: "space-y-list-gap",
+				children: [/* @__PURE__ */ c("label", {
 					className: `
-            flex items-start gap-3
-            p-4
-            border rounded-lg
-            cursor-pointer
-            transition-all
-            ${d ? "opacity-50 cursor-not-allowed" : ""}
-            ${p === "manual" ? "border-action-primary-bg bg-action-primary-bg/5" : "border-border-default hover:border-border-hover"}
+            flex cursor-pointer items-start gap-3
+            rounded-input
+            border p-4
+            motion-safe:transition-colors
+            ${u ? "cursor-not-allowed opacity-50" : ""}
+            ${g === "manual" ? "border-[var(--color-action-primary-bg)] bg-bg-accentSubtle" : "border-[var(--color-border-subtle)] hover:border-[var(--color-border-strong)]"}
           `,
-					children: [/* @__PURE__ */ a("input", {
+					children: [/* @__PURE__ */ s("input", {
 						type: "radio",
 						name: "refresh-type",
-						checked: p === "manual",
-						onChange: () => w("manual"),
-						disabled: d,
-						className: "\n              mt-0.5\n              w-4 h-4\n              text-action-primary-bg\n              border-border-default\n              focus:ring-action-primary-bg\n              focus:ring-offset-0\n            "
-					}), /* @__PURE__ */ o("div", {
+						checked: g === "manual",
+						onChange: () => D("manual"),
+						disabled: u,
+						className: "\n              mt-0.5\n              h-4 w-4\n              border-[var(--color-border-default)]\n              text-action-primary-bg\n              focus-visible:ring-2\n              focus-visible:ring-ring\n            "
+					}), /* @__PURE__ */ c("div", {
 						className: "flex-1",
-						children: [/* @__PURE__ */ a("span", {
+						children: [/* @__PURE__ */ s("span", {
 							className: "text-sm font-medium text-text-primary",
-							children: "Manual"
-						}), /* @__PURE__ */ a("p", {
+							children: f("bigconsole.dataSinks.refreshType.manualLabel", "Manual")
+						}), /* @__PURE__ */ s("p", {
 							className: "text-xs text-text-secondary mt-0.5",
-							children: "Data refreshes only when you click the \"Refresh\" button"
+							children: f("bigconsole.dataSinks.refreshType.manualDescription", "Data refreshes only when you click the \"Refresh\" button")
 						})]
 					})]
-				}), /* @__PURE__ */ o("div", {
+				}), /* @__PURE__ */ c("div", {
 					className: `
-            border rounded-lg
-            transition-all
-            ${d ? "opacity-50" : ""}
-            ${p === "scheduled" ? "border-action-primary-bg bg-action-primary-bg/5" : "border-border-default"}
+            rounded-input border
+            motion-safe:transition-colors
+            ${u ? "opacity-50" : ""}
+            ${g === "scheduled" ? "border-[var(--color-action-primary-bg)] bg-bg-accentSubtle" : "border-[var(--color-border-subtle)]"}
           `,
-					children: [/* @__PURE__ */ o("label", {
+					children: [/* @__PURE__ */ c("label", {
 						className: `
               flex items-start gap-3
               p-4
               cursor-pointer
-              ${d ? "cursor-not-allowed" : ""}
+              ${u ? "cursor-not-allowed" : ""}
             `,
-						children: [/* @__PURE__ */ a("input", {
+						children: [/* @__PURE__ */ s("input", {
 							type: "radio",
 							name: "refresh-type",
-							checked: p === "scheduled",
-							onChange: () => w("scheduled"),
-							disabled: d,
-							className: "\n                mt-0.5\n                w-4 h-4\n                text-action-primary-bg\n                border-border-default\n                focus:ring-action-primary-bg\n                focus:ring-offset-0\n              "
-						}), /* @__PURE__ */ o("div", {
+							checked: g === "scheduled",
+							onChange: () => D("scheduled"),
+							disabled: u,
+							className: "\n                mt-0.5\n                h-4 w-4\n                border-[var(--color-border-default)]\n                text-action-primary-bg\n                focus-visible:ring-2\n                focus-visible:ring-ring\n              "
+						}), /* @__PURE__ */ c("div", {
 							className: "flex-1",
-							children: [/* @__PURE__ */ a("span", {
+							children: [/* @__PURE__ */ s("span", {
 								className: "text-sm font-medium text-text-primary",
-								children: "Automatic"
-							}), /* @__PURE__ */ a("p", {
+								children: f("bigconsole.dataSinks.refreshType.automaticLabel", "Automatic")
+							}), /* @__PURE__ */ s("p", {
 								className: "text-xs text-text-secondary mt-0.5",
-								children: "Data refreshes on a schedule"
+								children: f("bigconsole.dataSinks.refreshType.automaticDescription", "Data refreshes on a schedule")
 							})]
 						})]
-					}), p === "scheduled" && /* @__PURE__ */ o("div", {
-						className: "px-4 pb-4 space-y-4",
+					}), g === "scheduled" && /* @__PURE__ */ c("div", {
+						className: "space-y-form-gap px-4 pb-4",
 						children: [
-							/* @__PURE__ */ o("div", {
-								className: "border-t border-border-default pt-4",
-								children: [/* @__PURE__ */ a("label", {
-									className: "block text-xs font-medium text-text-secondary mb-2",
-									children: "Schedule"
-								}), /* @__PURE__ */ a("div", {
-									className: "grid grid-cols-2 gap-2",
-									children: s.map((e) => /* @__PURE__ */ a("button", {
+							/* @__PURE__ */ c("div", {
+								className: "border-t border-[var(--color-border-subtle)] pt-4",
+								children: [/* @__PURE__ */ s("label", {
+									className: "mb-2 block text-xs font-medium text-text-secondary",
+									children: f("bigconsole.dataSinks.refreshType.scheduleLabel", "Schedule")
+								}), /* @__PURE__ */ s("div", {
+									className: "grid grid-cols-1 gap-2 sm:grid-cols-2",
+									children: p.map((e) => /* @__PURE__ */ s("button", {
 										type: "button",
-										onClick: () => T(e),
-										disabled: d,
+										onClick: () => O(e),
+										disabled: u,
 										className: `
+                        min-h-[var(--size-controlHeight-md)] rounded-input
+                        border
                         px-3 py-2
                         text-left
-                        border rounded-md
-                        transition-colors
-                        ${d ? "cursor-not-allowed" : "cursor-pointer"}
-                        ${!_ && h?.cron === e.cron ? "border-action-primary-bg bg-action-primary-bg/10 text-action-primary-bg" : "border-border-default hover:border-border-hover"}
+                        motion-safe:transition-colors
+                        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface
+                        ${u ? "cursor-not-allowed" : "cursor-pointer"}
+                        ${!b && v?.cron === e.cron ? "border-[var(--color-action-primary-bg)] bg-bg-accentSubtle text-text-link" : "border-[var(--color-border-subtle)] hover:border-[var(--color-border-strong)]"}
                       `,
-										children: /* @__PURE__ */ a("span", {
+										children: /* @__PURE__ */ s("span", {
 											className: "text-sm font-medium",
 											children: e.label
 										})
 									}, e.cron))
 								})]
 							}),
-							/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("button", {
+							/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("button", {
 								type: "button",
-								onClick: E,
-								disabled: d,
+								onClick: k,
+								disabled: u,
 								className: `
-                    text-xs
-                    ${_ ? "text-action-primary-bg" : "text-text-secondary hover:text-text-primary"}
+                    min-h-[var(--size-controlHeight-md)] rounded-button text-xs
+                    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface
+                    ${b ? "text-text-link" : "text-text-secondary hover:text-text-primary"}
                   `,
-								children: _ ? "Using custom schedule" : "Use custom schedule..."
-							}), _ && /* @__PURE__ */ o("div", {
+								children: b ? f("bigconsole.dataSinks.refreshType.usingCustomSchedule", "Using custom schedule") : f("bigconsole.dataSinks.refreshType.useCustomSchedule", "Use custom schedule...")
+							}), b && /* @__PURE__ */ c("div", {
 								className: "mt-2",
-								children: [/* @__PURE__ */ a("input", {
+								children: [/* @__PURE__ */ s("input", {
 									type: "text",
-									value: y,
-									onChange: D,
-									disabled: d,
+									"aria-label": "Custom cron expression",
+									value: S,
+									onChange: A,
+									disabled: u,
 									placeholder: "*/15 * * * *",
-									className: "\n                        w-full px-3 py-2\n                        bg-bg-sunken\n                        border rounded-md\n                        text-sm text-text-primary\n                        placeholder-text-tertiary\n                        font-mono\n                        focus:outline-none\n                        focus:border-action-primary-bg\n                        focus:ring-2\n                        focus:ring-action-primary-bg/20\n                        border-border-default\n                      "
-								}), /* @__PURE__ */ a("p", {
-									className: "mt-1 text-xs text-text-tertiary",
-									children: "Enter a cron expression (e.g., */15 * * * * for every 15 minutes)"
+									className: "\n                        h-control-md w-full min-w-0\n                        rounded-input\n                        border border-[var(--color-border-default)]\n                        bg-bg-sunken\n                        px-3\n                        font-mono\n                        text-sm text-text-primary\n                        focus-visible:outline-none\n                        focus-visible:ring-2\n                        focus-visible:ring-ring\n                      "
+								}), /* @__PURE__ */ s("p", {
+									className: "mt-1 text-xs text-text-muted",
+									children: f("bigconsole.dataSinks.refreshType.customCronHelp", "Enter a cron expression (e.g., */15 * * * * for every 15 minutes)")
 								})]
 							})] }),
-							/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("label", {
-								className: "block text-xs font-medium text-text-secondary mb-2",
-								children: "Timezone"
-							}), /* @__PURE__ */ a("select", {
-								value: x,
-								onChange: O,
-								disabled: d,
-								className: "\n                    w-full px-3 py-2\n                    bg-bg-sunken\n                    border border-border-default rounded-md\n                    text-sm text-text-primary\n                    focus:outline-none\n                    focus:border-action-primary-bg\n                    focus:ring-2\n                    focus:ring-action-primary-bg/20\n                  ",
-								children: c.map((e) => /* @__PURE__ */ a("option", {
+							/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
+								htmlFor: "refresh-timezone",
+								className: "mb-2 block text-xs font-medium text-text-secondary",
+								children: f("bigconsole.dataSinks.refreshType.timezoneLabel", "Timezone")
+							}), /* @__PURE__ */ s("select", {
+								id: "refresh-timezone",
+								value: w,
+								onChange: j,
+								disabled: u,
+								className: "\n                    h-control-md w-full min-w-0\n                    rounded-input\n                    border border-[var(--color-border-default)]\n                    bg-bg-sunken\n                    px-3\n                    text-sm text-text-primary\n                    focus-visible:outline-none\n                    focus-visible:ring-2\n                    focus-visible:ring-ring\n                  ",
+								children: m.map((e) => /* @__PURE__ */ s("option", {
 									value: e.value,
 									children: e.label
 								}, e.value))
@@ -274,28 +279,28 @@ var u = e(function({ value: e, onChange: u, disabled: d = !1, error: f }) {
 					})]
 				})]
 			}),
-			f && /* @__PURE__ */ o("div", {
+			d && /* @__PURE__ */ c("div", {
 				className: "flex items-start gap-2",
-				children: [/* @__PURE__ */ a("svg", {
+				children: [/* @__PURE__ */ s("svg", {
 					className: "w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5",
 					fill: "none",
 					stroke: "currentColor",
 					viewBox: "0 0 24 24",
-					children: /* @__PURE__ */ a("path", {
+					children: /* @__PURE__ */ s("path", {
 						strokeLinecap: "round",
 						strokeLinejoin: "round",
 						strokeWidth: 2,
 						d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 					})
-				}), /* @__PURE__ */ a("p", {
+				}), /* @__PURE__ */ s("p", {
 					className: "text-xs text-status-error-text",
-					children: f
+					children: d
 				})]
 			})
 		]
 	});
 });
 //#endregion
-export { u as default };
+export { l as default };
 
 //# sourceMappingURL=RefreshTypeSelector.js.map

package/dist/bigconsole/components/datasink/RefreshTypeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"RefreshTypeSelector.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/RefreshTypeSelector.tsx"],"sourcesContent":["/**\n * Refresh Type Selector\n *\n * Component for selecting data refresh type (manual or scheduled).\n */\n\nimport { memo, useState, useEffect, useCallback, useRef } from 'react';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface SchedulePreset {\n  label: string;\n  cron: string;\n  description: string;\n}\n\ninterface TimezoneOption {\n  value: string;\n  label: string;\n}\n\ninterface RefreshSchedule {\n  cron: string;\n  timezone: string;\n}\n\ninterface RefreshConfig {\n  type: 'manual' | 'scheduled';\n  schedule?: RefreshSchedule;\n}\n\ninterface RefreshTypeSelectorProps {\n  /** Current refresh configuration */\n  value?: RefreshConfig;\n  /** Callback when configuration changes */\n  onChange: (config: RefreshConfig) => void;\n  /** Whether selector is disabled */\n  disabled?: boolean;\n  /** Error message */\n  error?: string;\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst SCHEDULE_PRESETS: SchedulePreset[] = [\n  {\n    label: 'Every 5 minutes',\n    cron: '*/5 * * * *',\n    description: 'High frequency updates',\n  },\n  {\n    label: 'Every 15 minutes',\n    cron: '*/15 * * * *',\n    description: 'Balanced frequency',\n  },\n  {\n    label: 'Every hour',\n    cron: '0 * * * *',\n    description: 'Hourly updates',\n  },\n  {\n    label: 'Every day at midnight',\n    cron: '0 0 * * *',\n    description: 'Daily updates',\n  },\n];\n\nconst TIMEZONE_OPTIONS: TimezoneOption[] = [\n  { value: 'UTC', label: 'UTC' },\n  { value: 'America/New_York', label: 'Eastern Time (US)' },\n  { value: 'America/Los_Angeles', label: 'Pacific Time (US)' },\n  { value: 'Europe/London', label: 'London (UK)' },\n  { value: 'Europe/Paris', label: 'Paris (EU)' },\n  { value: 'Asia/Tokyo', label: 'Tokyo (Japan)' },\n  { value: 'Asia/Kolkata', label: 'India (IST)' },\n  { value: 'Australia/Sydney', label: 'Sydney (Australia)' },\n];\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Find preset by cron expression\n */\nfunction findPresetByCron(cron: string): SchedulePreset | null {\n  return SCHEDULE_PRESETS.find((preset) => preset.cron === cron) || null;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const RefreshTypeSelector = memo(function RefreshTypeSelector({\n  value,\n  onChange,\n  disabled = false,\n  error,\n}: RefreshTypeSelectorProps) {\n  // State\n  const [refreshType, setRefreshType] = useState<'manual' | 'scheduled'>(value?.type || 'manual');\n  const [selectedPreset, setSelectedPreset] = useState<SchedulePreset | null>(\n    value?.schedule ? findPresetByCron(value.schedule.cron) || null : SCHEDULE_PRESETS[1]\n  );\n  const [isCustomSchedule, setIsCustomSchedule] = useState(\n    value?.schedule ? !findPresetByCron(value.schedule.cron) : false\n  );\n  const [customCron, setCustomCron] = useState(value?.schedule?.cron || '');\n  const [timezone, setTimezone] = useState(value?.schedule?.timezone || 'UTC');\n  const prevValueRef = useRef(value);\n\n  // Sync state when value changes (using deferred update to avoid cascading renders)\n  useEffect(() => {\n    if (prevValueRef.current !== value && value) {\n      prevValueRef.current = value;\n      // Defer state updates to avoid synchronous setState in effect\n      queueMicrotask(() => {\n        setRefreshType(value.type);\n        if (value.schedule) {\n          setTimezone(value.schedule.timezone);\n          const preset = findPresetByCron(value.schedule.cron);\n          if (preset) {\n            setSelectedPreset(preset);\n            setIsCustomSchedule(false);\n          } else {\n            setCustomCron(value.schedule.cron);\n            setIsCustomSchedule(true);\n          }\n        }\n      });\n    }\n  }, [value]);\n\n  // Handle refresh type change\n  const handleTypeChange = useCallback(\n    (type: 'manual' | 'scheduled') => {\n      if (disabled) return;\n      setRefreshType(type);\n      if (type === 'manual') {\n        onChange({ type: 'manual' });\n      } else {\n        const cron = isCustomSchedule ? customCron : selectedPreset?.cron || SCHEDULE_PRESETS[1].cron;\n        onChange({\n          type: 'scheduled',\n          schedule: { cron, timezone },\n        });\n      }\n    },\n    [disabled, onChange, isCustomSchedule, customCron, selectedPreset, timezone]\n  );\n\n  // Handle preset selection\n  const handlePresetSelect = useCallback(\n    (preset: SchedulePreset) => {\n      if (disabled) return;\n      setSelectedPreset(preset);\n      setIsCustomSchedule(false);\n      onChange({\n        type: 'scheduled',\n        schedule: { cron: preset.cron, timezone },\n      });\n    },\n    [disabled, onChange, timezone]\n  );\n\n  // Handle custom schedule toggle\n  const handleCustomToggle = useCallback(() => {\n    if (disabled) return;\n    setIsCustomSchedule(true);\n    setSelectedPreset(null);\n    if (customCron) {\n      onChange({\n        type: 'scheduled',\n        schedule: { cron: customCron, timezone },\n      });\n    }\n  }, [disabled, onChange, customCron, timezone]);\n\n  // Handle custom cron change\n  const handleCustomCronChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const cron = e.target.value;\n      setCustomCron(cron);\n      if (cron.trim()) {\n        onChange({\n          type: 'scheduled',\n          schedule: { cron, timezone },\n        });\n      }\n    },\n    [onChange, timezone]\n  );\n\n  // Handle timezone change\n  const handleTimezoneChange = useCallback(\n    (e: React.ChangeEvent<HTMLSelectElement>) => {\n      const tz = e.target.value;\n      setTimezone(tz);\n      if (refreshType === 'scheduled') {\n        const cron = isCustomSchedule ? customCron : selectedPreset?.cron || '';\n        onChange({\n          type: 'scheduled',\n          schedule: { cron, timezone: tz },\n        });\n      }\n    },\n    [onChange, refreshType, isCustomSchedule, customCron, selectedPreset]\n  );\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Label */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Refresh Type</label>\n        <p className=\"text-xs text-text-secondary\">When should this data be updated?</p>\n      </div>\n\n      {/* Options */}\n      <div className=\"space-y-3\">\n        {/* Manual option */}\n        <label\n          className={`\n            flex items-start gap-3\n            p-4\n            border rounded-lg\n            cursor-pointer\n            transition-all\n            ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n            ${\n              refreshType === 'manual'\n                ? 'border-action-primary-bg bg-action-primary-bg/5'\n                : 'border-border-default hover:border-border-hover'\n            }\n          `}\n        >\n          <input\n            type=\"radio\"\n            name=\"refresh-type\"\n            checked={refreshType === 'manual'}\n            onChange={() => handleTypeChange('manual')}\n            disabled={disabled}\n            className={`\n              mt-0.5\n              w-4 h-4\n              text-action-primary-bg\n              border-border-default\n              focus:ring-action-primary-bg\n              focus:ring-offset-0\n            `}\n          />\n          <div className=\"flex-1\">\n            <span className=\"text-sm font-medium text-text-primary\">Manual</span>\n            <p className=\"text-xs text-text-secondary mt-0.5\">\n              Data refreshes only when you click the &quot;Refresh&quot; button\n            </p>\n          </div>\n        </label>\n\n        {/* Scheduled option */}\n        <div\n          className={`\n            border rounded-lg\n            transition-all\n            ${disabled ? 'opacity-50' : ''}\n            ${refreshType === 'scheduled' ? 'border-action-primary-bg bg-action-primary-bg/5' : 'border-border-default'}\n          `}\n        >\n          <label\n            className={`\n              flex items-start gap-3\n              p-4\n              cursor-pointer\n              ${disabled ? 'cursor-not-allowed' : ''}\n            `}\n          >\n            <input\n              type=\"radio\"\n              name=\"refresh-type\"\n              checked={refreshType === 'scheduled'}\n              onChange={() => handleTypeChange('scheduled')}\n              disabled={disabled}\n              className={`\n                mt-0.5\n                w-4 h-4\n                text-action-primary-bg\n                border-border-default\n                focus:ring-action-primary-bg\n                focus:ring-offset-0\n              `}\n            />\n            <div className=\"flex-1\">\n              <span className=\"text-sm font-medium text-text-primary\">Automatic</span>\n              <p className=\"text-xs text-text-secondary mt-0.5\">Data refreshes on a schedule</p>\n            </div>\n          </label>\n\n          {/* Schedule options (shown when scheduled is selected) */}\n          {refreshType === 'scheduled' && (\n            <div className=\"px-4 pb-4 space-y-4\">\n              {/* Schedule presets */}\n              <div className=\"border-t border-border-default pt-4\">\n                <label className=\"block text-xs font-medium text-text-secondary mb-2\">Schedule</label>\n                <div className=\"grid grid-cols-2 gap-2\">\n                  {SCHEDULE_PRESETS.map((preset) => (\n                    <button\n                      key={preset.cron}\n                      type=\"button\"\n                      onClick={() => handlePresetSelect(preset)}\n                      disabled={disabled}\n                      className={`\n                        px-3 py-2\n                        text-left\n                        border rounded-md\n                        transition-colors\n                        ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}\n                        ${\n                          !isCustomSchedule && selectedPreset?.cron === preset.cron\n                            ? 'border-action-primary-bg bg-action-primary-bg/10 text-action-primary-bg'\n                            : 'border-border-default hover:border-border-hover'\n                        }\n                      `}\n                    >\n                      <span className=\"text-sm font-medium\">{preset.label}</span>\n                    </button>\n                  ))}\n                </div>\n              </div>\n\n              {/* Custom schedule */}\n              <div>\n                <button\n                  type=\"button\"\n                  onClick={handleCustomToggle}\n                  disabled={disabled}\n                  className={`\n                    text-xs\n                    ${isCustomSchedule ? 'text-action-primary-bg' : 'text-text-secondary hover:text-text-primary'}\n                  `}\n                >\n                  {isCustomSchedule ? 'Using custom schedule' : 'Use custom schedule...'}\n                </button>\n                {isCustomSchedule && (\n                  <div className=\"mt-2\">\n                    <input\n                      type=\"text\"\n                      value={customCron}\n                      onChange={handleCustomCronChange}\n                      disabled={disabled}\n                      placeholder=\"*/15 * * * *\"\n                      className={`\n                        w-full px-3 py-2\n                        bg-bg-sunken\n                        border rounded-md\n                        text-sm text-text-primary\n                        placeholder-text-tertiary\n                        font-mono\n                        focus:outline-none\n                        focus:border-action-primary-bg\n                        focus:ring-2\n                        focus:ring-action-primary-bg/20\n                        border-border-default\n                      `}\n                    />\n                    <p className=\"mt-1 text-xs text-text-tertiary\">\n                      Enter a cron expression (e.g., */15 * * * * for every 15 minutes)\n                    </p>\n                  </div>\n                )}\n              </div>\n\n              {/* Timezone */}\n              <div>\n                <label className=\"block text-xs font-medium text-text-secondary mb-2\">Timezone</label>\n                <select\n                  value={timezone}\n                  onChange={handleTimezoneChange}\n                  disabled={disabled}\n                  className={`\n                    w-full px-3 py-2\n                    bg-bg-sunken\n                    border border-border-default rounded-md\n                    text-sm text-text-primary\n                    focus:outline-none\n                    focus:border-action-primary-bg\n                    focus:ring-2\n                    focus:ring-action-primary-bg/20\n                  `}\n                >\n                  {TIMEZONE_OPTIONS.map((tz) => (\n                    <option key={tz.value} value={tz.value}>\n                      {tz.label}\n                    </option>\n                  ))}\n                </select>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Error message */}\n      {error && (\n        <div className=\"flex items-start gap-2\">\n          <svg\n            className=\"w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n          <p className=\"text-xs text-status-error-text\">{error}</p>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default RefreshTypeSelector;\n"],"mappings":"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"}
+{"version":3,"file":"RefreshTypeSelector.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/RefreshTypeSelector.tsx"],"sourcesContent":["/**\n * Refresh Type Selector\n *\n * Component for selecting data refresh type (manual or scheduled).\n */\n\nimport { memo, useState, useEffect, useCallback, useMemo, useRef } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { SECTION_FOCUS_RING } from '../common';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface SchedulePreset {\n  label: string;\n  cron: string;\n  description: string;\n}\n\ninterface TimezoneOption {\n  value: string;\n  label: string;\n}\n\ninterface RefreshSchedule {\n  cron: string;\n  timezone: string;\n}\n\ninterface RefreshConfig {\n  type: 'manual' | 'scheduled';\n  schedule?: RefreshSchedule;\n}\n\ninterface RefreshTypeSelectorProps {\n  /** Current refresh configuration */\n  value?: RefreshConfig;\n  /** Callback when configuration changes */\n  onChange: (config: RefreshConfig) => void;\n  /** Whether selector is disabled */\n  disabled?: boolean;\n  /** Error message */\n  error?: string;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const RefreshTypeSelector = memo(function RefreshTypeSelector({\n  value,\n  onChange,\n  disabled = false,\n  error,\n}: RefreshTypeSelectorProps) {\n  const { t } = useI18n();\n\n  const SCHEDULE_PRESETS = useMemo<SchedulePreset[]>(\n    () => [\n      {\n        label: t('bigconsole.dataSinks.refreshType.presetEvery5MinutesLabel', 'Every 5 minutes'),\n        cron: '*/5 * * * *',\n        description: t('bigconsole.dataSinks.refreshType.presetEvery5MinutesDescription', 'High frequency updates'),\n      },\n      {\n        label: t('bigconsole.dataSinks.refreshType.presetEvery15MinutesLabel', 'Every 15 minutes'),\n        cron: '*/15 * * * *',\n        description: t('bigconsole.dataSinks.refreshType.presetEvery15MinutesDescription', 'Balanced frequency'),\n      },\n      {\n        label: t('bigconsole.dataSinks.refreshType.presetEveryHourLabel', 'Every hour'),\n        cron: '0 * * * *',\n        description: t('bigconsole.dataSinks.refreshType.presetEveryHourDescription', 'Hourly updates'),\n      },\n      {\n        label: t('bigconsole.dataSinks.refreshType.presetEveryDayLabel', 'Every day at midnight'),\n        cron: '0 0 * * *',\n        description: t('bigconsole.dataSinks.refreshType.presetEveryDayDescription', 'Daily updates'),\n      },\n    ],\n    [t]\n  );\n\n  const TIMEZONE_OPTIONS = useMemo<TimezoneOption[]>(\n    () => [\n      { value: 'UTC', label: t('bigconsole.dataSinks.refreshType.timezoneUtc', 'UTC') },\n      { value: 'America/New_York', label: t('bigconsole.dataSinks.refreshType.timezoneEastern', 'Eastern Time (US)') },\n      {\n        value: 'America/Los_Angeles',\n        label: t('bigconsole.dataSinks.refreshType.timezonePacific', 'Pacific Time (US)'),\n      },\n      { value: 'Europe/London', label: t('bigconsole.dataSinks.refreshType.timezoneLondon', 'London (UK)') },\n      { value: 'Europe/Paris', label: t('bigconsole.dataSinks.refreshType.timezoneParis', 'Paris (EU)') },\n      { value: 'Asia/Tokyo', label: t('bigconsole.dataSinks.refreshType.timezoneTokyo', 'Tokyo (Japan)') },\n      { value: 'Asia/Kolkata', label: t('bigconsole.dataSinks.refreshType.timezoneKolkata', 'India (IST)') },\n      { value: 'Australia/Sydney', label: t('bigconsole.dataSinks.refreshType.timezoneSydney', 'Sydney (Australia)') },\n    ],\n    [t]\n  );\n\n  // Find preset by cron expression\n  const findPresetByCron = useCallback(\n    (cron: string): SchedulePreset | null => SCHEDULE_PRESETS.find((preset) => preset.cron === cron) || null,\n    [SCHEDULE_PRESETS]\n  );\n\n  // State\n  const [refreshType, setRefreshType] = useState<'manual' | 'scheduled'>(value?.type || 'manual');\n  const [selectedPreset, setSelectedPreset] = useState<SchedulePreset | null>(\n    value?.schedule ? findPresetByCron(value.schedule.cron) || null : SCHEDULE_PRESETS[1]\n  );\n  const [isCustomSchedule, setIsCustomSchedule] = useState(\n    value?.schedule ? !findPresetByCron(value.schedule.cron) : false\n  );\n  const [customCron, setCustomCron] = useState(value?.schedule?.cron || '');\n  const [timezone, setTimezone] = useState(value?.schedule?.timezone || 'UTC');\n  const prevValueRef = useRef(value);\n\n  // Sync state when value changes (using deferred update to avoid cascading renders)\n  useEffect(() => {\n    if (prevValueRef.current !== value && value) {\n      prevValueRef.current = value;\n      // Defer state updates to avoid synchronous setState in effect\n      queueMicrotask(() => {\n        setRefreshType(value.type);\n        if (value.schedule) {\n          setTimezone(value.schedule.timezone);\n          const preset = findPresetByCron(value.schedule.cron);\n          if (preset) {\n            setSelectedPreset(preset);\n            setIsCustomSchedule(false);\n          } else {\n            setCustomCron(value.schedule.cron);\n            setIsCustomSchedule(true);\n          }\n        }\n      });\n    }\n  }, [value, findPresetByCron]);\n\n  // Handle refresh type change\n  const handleTypeChange = useCallback(\n    (type: 'manual' | 'scheduled') => {\n      if (disabled) return;\n      setRefreshType(type);\n      if (type === 'manual') {\n        onChange({ type: 'manual' });\n      } else {\n        const cron = isCustomSchedule ? customCron : selectedPreset?.cron || SCHEDULE_PRESETS[1].cron;\n        onChange({\n          type: 'scheduled',\n          schedule: { cron, timezone },\n        });\n      }\n    },\n    [disabled, onChange, isCustomSchedule, customCron, selectedPreset, timezone, SCHEDULE_PRESETS]\n  );\n\n  // Handle preset selection\n  const handlePresetSelect = useCallback(\n    (preset: SchedulePreset) => {\n      if (disabled) return;\n      setSelectedPreset(preset);\n      setIsCustomSchedule(false);\n      onChange({\n        type: 'scheduled',\n        schedule: { cron: preset.cron, timezone },\n      });\n    },\n    [disabled, onChange, timezone]\n  );\n\n  // Handle custom schedule toggle\n  const handleCustomToggle = useCallback(() => {\n    if (disabled) return;\n    setIsCustomSchedule(true);\n    setSelectedPreset(null);\n    if (customCron) {\n      onChange({\n        type: 'scheduled',\n        schedule: { cron: customCron, timezone },\n      });\n    }\n  }, [disabled, onChange, customCron, timezone]);\n\n  // Handle custom cron change\n  const handleCustomCronChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const cron = e.target.value;\n      setCustomCron(cron);\n      if (cron.trim()) {\n        onChange({\n          type: 'scheduled',\n          schedule: { cron, timezone },\n        });\n      }\n    },\n    [onChange, timezone]\n  );\n\n  // Handle timezone change\n  const handleTimezoneChange = useCallback(\n    (e: React.ChangeEvent<HTMLSelectElement>) => {\n      const tz = e.target.value;\n      setTimezone(tz);\n      if (refreshType === 'scheduled') {\n        const cron = isCustomSchedule ? customCron : selectedPreset?.cron || '';\n        onChange({\n          type: 'scheduled',\n          schedule: { cron, timezone: tz },\n        });\n      }\n    },\n    [onChange, refreshType, isCustomSchedule, customCron, selectedPreset]\n  );\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Label */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.dataSinks.refreshType.heading', 'Refresh Type')}\n        </label>\n        <p className=\"text-xs text-text-secondary\">\n          {t('bigconsole.dataSinks.refreshType.headingDescription', 'When should this data be updated?')}\n        </p>\n      </div>\n\n      {/* Options */}\n      <div className=\"space-y-list-gap\">\n        {/* Manual option */}\n        <label\n          className={`\n            flex cursor-pointer items-start gap-3\n            rounded-input\n            border p-4\n            motion-safe:transition-colors\n            ${disabled ? 'cursor-not-allowed opacity-50' : ''}\n            ${\n              refreshType === 'manual'\n                ? 'border-[var(--color-action-primary-bg)] bg-bg-accentSubtle'\n                : 'border-[var(--color-border-subtle)] hover:border-[var(--color-border-strong)]'\n            }\n          `}\n        >\n          <input\n            type=\"radio\"\n            name=\"refresh-type\"\n            checked={refreshType === 'manual'}\n            onChange={() => handleTypeChange('manual')}\n            disabled={disabled}\n            className={`\n              mt-0.5\n              h-4 w-4\n              border-[var(--color-border-default)]\n              text-action-primary-bg\n              focus-visible:ring-2\n              focus-visible:ring-ring\n            `}\n          />\n          <div className=\"flex-1\">\n            <span className=\"text-sm font-medium text-text-primary\">\n              {t('bigconsole.dataSinks.refreshType.manualLabel', 'Manual')}\n            </span>\n            <p className=\"text-xs text-text-secondary mt-0.5\">\n              {t(\n                'bigconsole.dataSinks.refreshType.manualDescription',\n                'Data refreshes only when you click the \"Refresh\" button'\n              )}\n            </p>\n          </div>\n        </label>\n\n        {/* Scheduled option */}\n        <div\n          className={`\n            rounded-input border\n            motion-safe:transition-colors\n            ${disabled ? 'opacity-50' : ''}\n            ${\n              refreshType === 'scheduled'\n                ? 'border-[var(--color-action-primary-bg)] bg-bg-accentSubtle'\n                : 'border-[var(--color-border-subtle)]'\n            }\n          `}\n        >\n          <label\n            className={`\n              flex items-start gap-3\n              p-4\n              cursor-pointer\n              ${disabled ? 'cursor-not-allowed' : ''}\n            `}\n          >\n            <input\n              type=\"radio\"\n              name=\"refresh-type\"\n              checked={refreshType === 'scheduled'}\n              onChange={() => handleTypeChange('scheduled')}\n              disabled={disabled}\n              className={`\n                mt-0.5\n                h-4 w-4\n                border-[var(--color-border-default)]\n                text-action-primary-bg\n                focus-visible:ring-2\n                focus-visible:ring-ring\n              `}\n            />\n            <div className=\"flex-1\">\n              <span className=\"text-sm font-medium text-text-primary\">\n                {t('bigconsole.dataSinks.refreshType.automaticLabel', 'Automatic')}\n              </span>\n              <p className=\"text-xs text-text-secondary mt-0.5\">\n                {t('bigconsole.dataSinks.refreshType.automaticDescription', 'Data refreshes on a schedule')}\n              </p>\n            </div>\n          </label>\n\n          {/* Schedule options (shown when scheduled is selected) */}\n          {refreshType === 'scheduled' && (\n            <div className=\"space-y-form-gap px-4 pb-4\">\n              {/* Schedule presets */}\n              <div className=\"border-t border-[var(--color-border-subtle)] pt-4\">\n                <label className=\"mb-2 block text-xs font-medium text-text-secondary\">\n                  {t('bigconsole.dataSinks.refreshType.scheduleLabel', 'Schedule')}\n                </label>\n                {/* Single column below `sm`: two \"Every day at midnight\"-length\n                    buttons never fit side by side inside a card at 390px. */}\n                <div className=\"grid grid-cols-1 gap-2 sm:grid-cols-2\">\n                  {SCHEDULE_PRESETS.map((preset) => (\n                    <button\n                      key={preset.cron}\n                      type=\"button\"\n                      onClick={() => handlePresetSelect(preset)}\n                      disabled={disabled}\n                      className={`\n                        min-h-[var(--size-controlHeight-md)] rounded-input\n                        border\n                        px-3 py-2\n                        text-left\n                        motion-safe:transition-colors\n                        ${SECTION_FOCUS_RING}\n                        ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}\n                        ${\n                          !isCustomSchedule && selectedPreset?.cron === preset.cron\n                            ? 'border-[var(--color-action-primary-bg)] bg-bg-accentSubtle text-text-link'\n                            : 'border-[var(--color-border-subtle)] hover:border-[var(--color-border-strong)]'\n                        }\n                      `}\n                    >\n                      <span className=\"text-sm font-medium\">{preset.label}</span>\n                    </button>\n                  ))}\n                </div>\n              </div>\n\n              {/* Custom schedule */}\n              <div>\n                <button\n                  type=\"button\"\n                  onClick={handleCustomToggle}\n                  disabled={disabled}\n                  className={`\n                    min-h-[var(--size-controlHeight-md)] rounded-button text-xs\n                    ${SECTION_FOCUS_RING}\n                    ${isCustomSchedule ? 'text-text-link' : 'text-text-secondary hover:text-text-primary'}\n                  `}\n                >\n                  {isCustomSchedule\n                    ? t('bigconsole.dataSinks.refreshType.usingCustomSchedule', 'Using custom schedule')\n                    : t('bigconsole.dataSinks.refreshType.useCustomSchedule', 'Use custom schedule...')}\n                </button>\n                {isCustomSchedule && (\n                  <div className=\"mt-2\">\n                    <input\n                      type=\"text\"\n                      aria-label=\"Custom cron expression\"\n                      value={customCron}\n                      onChange={handleCustomCronChange}\n                      disabled={disabled}\n                      placeholder=\"*/15 * * * *\"\n                      className={`\n                        h-control-md w-full min-w-0\n                        rounded-input\n                        border border-[var(--color-border-default)]\n                        bg-bg-sunken\n                        px-3\n                        font-mono\n                        text-sm text-text-primary\n                        focus-visible:outline-none\n                        focus-visible:ring-2\n                        focus-visible:ring-ring\n                      `}\n                    />\n                    <p className=\"mt-1 text-xs text-text-muted\">\n                      {t(\n                        'bigconsole.dataSinks.refreshType.customCronHelp',\n                        'Enter a cron expression (e.g., */15 * * * * for every 15 minutes)'\n                      )}\n                    </p>\n                  </div>\n                )}\n              </div>\n\n              {/* Timezone */}\n              <div>\n                <label htmlFor=\"refresh-timezone\" className=\"mb-2 block text-xs font-medium text-text-secondary\">\n                  {t('bigconsole.dataSinks.refreshType.timezoneLabel', 'Timezone')}\n                </label>\n                <select\n                  id=\"refresh-timezone\"\n                  value={timezone}\n                  onChange={handleTimezoneChange}\n                  disabled={disabled}\n                  className={`\n                    h-control-md w-full min-w-0\n                    rounded-input\n                    border border-[var(--color-border-default)]\n                    bg-bg-sunken\n                    px-3\n                    text-sm text-text-primary\n                    focus-visible:outline-none\n                    focus-visible:ring-2\n                    focus-visible:ring-ring\n                  `}\n                >\n                  {TIMEZONE_OPTIONS.map((tz) => (\n                    <option key={tz.value} value={tz.value}>\n                      {tz.label}\n                    </option>\n                  ))}\n                </select>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Error message */}\n      {error && (\n        <div className=\"flex items-start gap-2\">\n          <svg\n            className=\"w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n          <p className=\"text-xs text-status-error-text\">{error}</p>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default RefreshTypeSelector;\n"],"mappings":"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"}

package/dist/bigconsole/components/datasink/SetupStateBadge.js

@@ -6,7 +6,7 @@ var r = {
 		label: "Workflow Pending",
 		shortLabel: "Draft",
 		bgColor: "bg-status-warning-bg/10",
-		textColor: "text-status-warning-text",
+		textColor: "text-[var(--color-status-warning-text)]",
 		icon: "pending"
 	},
 	workflow_running: {
@@ -20,14 +20,14 @@ var r = {
 		label: "Workflow Completed",
 		shortLabel: "Config Needed",
 		bgColor: "bg-status-warning-bg/10",
-		textColor: "text-status-warning-text",
+		textColor: "text-[var(--color-status-warning-text)]",
 		icon: "pending"
 	},
 	configuration_pending: {
 		label: "Configuration Pending",
 		shortLabel: "In Progress",
 		bgColor: "bg-status-warning-bg/10",
-		textColor: "text-status-warning-text",
+		textColor: "text-[var(--color-status-warning-text)]",
 		icon: "pending"
 	},
 	completed: {