@darajs/core 1.29.4 → 1.29.7

package/dist/umd/dara.core.umd.cjs

@@ -2992,7 +2992,7 @@
 	var { applyAtomValueWrites: applyAtomValueWrites$1 } = Recoil_RecoilValueInterface;
 	var { releaseScheduledRetainablesNow: releaseScheduledRetainablesNow$1 } = Recoil_Retention;
 	var { freshSnapshot: freshSnapshot$1 } = Recoil_Snapshot$1;
-	var { useCallback: useCallback$27, useContext: useContext$16, useEffect: useEffect$54, useMemo: useMemo$32, useRef: useRef$1$2, useState: useState$48 } = react.default;
+	var { useCallback: useCallback$27, useContext: useContext$16, useEffect: useEffect$55, useMemo: useMemo$32, useRef: useRef$1$2, useState: useState$48 } = react.default;
 	function notInAContext() {
 		throw Recoil_err$2("This component must be used inside a <RecoilRoot> component.");
 	}
@@ -3079,13 +3079,13 @@
 		const storeRef = useStoreRef();
 		const [, setState] = useState$48([]);
 		setNotifyBatcherOfChange(() => setState({}));
-		useEffect$54(() => {
+		useEffect$55(() => {
 			setNotifyBatcherOfChange(() => setState({}));
 			return () => {
 				setNotifyBatcherOfChange(() => {});
 			};
 		}, [setNotifyBatcherOfChange]);
-		useEffect$54(() => {
+		useEffect$55(() => {
 			Recoil_Queue.enqueueExecution("Batcher", () => {
 				endBatch(storeRef.current);
 			});
@@ -3190,7 +3190,7 @@
 		if (storeProp != null) storeRef.current = storeProp;
 		storeStateRef = Recoil_useRefInitOnce(() => initializeState_DEPRECATED != null ? initialStoreState_DEPRECATED(storeRef.current, initializeState_DEPRECATED) : initializeState != null ? initialStoreState(initializeState) : makeEmptyStoreState$2());
 		const mutableSource = useMemo$32(() => createMutableSource$1 === null || createMutableSource$1 === void 0 ? void 0 : createMutableSource$1(storeStateRef, () => storeStateRef.current.currentTree.version), [storeStateRef]);
-		useEffect$54(() => {
+		useEffect$55(() => {
 			const store = storeRef.current;
 			for (const atomKey of new Set(store.getState().knownAtoms)) initializeNode$2(store, atomKey, "get");
 			return () => {
@@ -10129,6 +10129,9 @@
 	* See the License for the specific language governing permissions and
 	* limitations under the License.
 	*/
+	function getMaxItems$1(maxItems) {
+		return maxItems || 5;
+	}
 	var List = dist_default.div`
     z-index: 5000;
 
@@ -10136,8 +10139,7 @@
     display: ${(props) => props.isOpen ? "flex" : "none"};
     flex-direction: column;
 
-    max-height: calc(${(props) => (props.maxItems || 5) * 2}em + 2px);
-
+    max-height: calc(${(props) => getMaxItems$1(props.maxItems) * 2}em + 2px);
     border: 1px solid ${(props) => props.theme.colors.grey3};
 `;
 	var NoItemsLabel = dist_default.span`
@@ -11930,48 +11932,6 @@
 		return isFunction(resultSelector) ? mergeMap(project, resultSelector, 1) : mergeMap(project, 1);
 	}
 	//#endregion
-	//#region ../../node_modules/.pnpm/rxjs@7.8.1/node_modules/rxjs/dist/esm5/internal/operators/debounceTime.js
-	function debounceTime(dueTime, scheduler) {
-		if (scheduler === void 0) scheduler = asyncScheduler;
-		return operate(function(source, subscriber) {
-			var activeTask = null;
-			var lastValue = null;
-			var lastTime = null;
-			var emit = function() {
-				if (activeTask) {
-					activeTask.unsubscribe();
-					activeTask = null;
-					var value = lastValue;
-					lastValue = null;
-					subscriber.next(value);
-				}
-			};
-			function emitWhenIdle() {
-				var targetTime = lastTime + dueTime;
-				var now = scheduler.now();
-				if (now < targetTime) {
-					activeTask = this.schedule(void 0, targetTime - now);
-					subscriber.add(activeTask);
-					return;
-				}
-				emit();
-			}
-			source.subscribe(createOperatorSubscriber(subscriber, function(value) {
-				lastValue = value;
-				lastTime = scheduler.now();
-				if (!activeTask) {
-					activeTask = scheduler.schedule(emitWhenIdle, dueTime);
-					subscriber.add(activeTask);
-				}
-			}, function() {
-				emit();
-				subscriber.complete();
-			}, void 0, function() {
-				lastValue = activeTask = null;
-			}));
-		});
-	}
-	//#endregion
 	//#region ../../node_modules/.pnpm/rxjs@7.8.1/node_modules/rxjs/dist/esm5/internal/operators/take.js
 	function take(count) {
 		return count <= 0 ? function() {
@@ -12020,106 +11980,6 @@
 		});
 	}
 	//#endregion
-	//#region ../../node_modules/.pnpm/rxjs@7.8.1/node_modules/rxjs/dist/esm5/internal/operators/share.js
-	function share(options) {
-		if (options === void 0) options = {};
-		var _a = options.connector, connector = _a === void 0 ? function() {
-			return new Subject();
-		} : _a, _b = options.resetOnError, resetOnError = _b === void 0 ? true : _b, _c = options.resetOnComplete, resetOnComplete = _c === void 0 ? true : _c, _d = options.resetOnRefCountZero, resetOnRefCountZero = _d === void 0 ? true : _d;
-		return function(wrapperSource) {
-			var connection;
-			var resetConnection;
-			var subject;
-			var refCount = 0;
-			var hasCompleted = false;
-			var hasErrored = false;
-			var cancelReset = function() {
-				resetConnection === null || resetConnection === void 0 || resetConnection.unsubscribe();
-				resetConnection = void 0;
-			};
-			var reset = function() {
-				cancelReset();
-				connection = subject = void 0;
-				hasCompleted = hasErrored = false;
-			};
-			var resetAndUnsubscribe = function() {
-				var conn = connection;
-				reset();
-				conn === null || conn === void 0 || conn.unsubscribe();
-			};
-			return operate(function(source, subscriber) {
-				refCount++;
-				if (!hasErrored && !hasCompleted) cancelReset();
-				var dest = subject = subject !== null && subject !== void 0 ? subject : connector();
-				subscriber.add(function() {
-					refCount--;
-					if (refCount === 0 && !hasErrored && !hasCompleted) resetConnection = handleReset(resetAndUnsubscribe, resetOnRefCountZero);
-				});
-				dest.subscribe(subscriber);
-				if (!connection && refCount > 0) {
-					connection = new SafeSubscriber({
-						next: function(value) {
-							return dest.next(value);
-						},
-						error: function(err) {
-							hasErrored = true;
-							cancelReset();
-							resetConnection = handleReset(reset, resetOnError, err);
-							dest.error(err);
-						},
-						complete: function() {
-							hasCompleted = true;
-							cancelReset();
-							resetConnection = handleReset(reset, resetOnComplete);
-							dest.complete();
-						}
-					});
-					innerFrom(source).subscribe(connection);
-				}
-			})(wrapperSource);
-		};
-	}
-	function handleReset(reset, on) {
-		var args = [];
-		for (var _i = 2; _i < arguments.length; _i++) args[_i - 2] = arguments[_i];
-		if (on === true) {
-			reset();
-			return;
-		}
-		if (on === false) return;
-		var onSubscriber = new SafeSubscriber({ next: function() {
-			onSubscriber.unsubscribe();
-			reset();
-		} });
-		return innerFrom(on.apply(void 0, __spreadArray([], __read(args)))).subscribe(onSubscriber);
-	}
-	//#endregion
-	//#region ../../node_modules/.pnpm/rxjs@7.8.1/node_modules/rxjs/dist/esm5/internal/operators/switchMap.js
-	function switchMap(project, resultSelector) {
-		return operate(function(source, subscriber) {
-			var innerSubscriber = null;
-			var index = 0;
-			var isComplete = false;
-			var checkComplete = function() {
-				return isComplete && !innerSubscriber && subscriber.complete();
-			};
-			source.subscribe(createOperatorSubscriber(subscriber, function(value) {
-				innerSubscriber === null || innerSubscriber === void 0 || innerSubscriber.unsubscribe();
-				var innerIndex = 0;
-				var outerIndex = index++;
-				innerFrom(project(value, outerIndex)).subscribe(innerSubscriber = createOperatorSubscriber(subscriber, function(innerValue) {
-					return subscriber.next(resultSelector ? resultSelector(value, innerValue, outerIndex, innerIndex++) : innerValue);
-				}, function() {
-					innerSubscriber = null;
-					checkComplete();
-				}));
-			}, function() {
-				isComplete = true;
-				checkComplete();
-			}));
-		});
-	}
-	//#endregion
 	//#region ../../node_modules/.pnpm/rxjs@7.8.1/node_modules/rxjs/dist/esm5/internal/operators/takeWhile.js
 	function takeWhile(predicate, inclusive) {
 		if (inclusive === void 0) inclusive = false;
@@ -17644,14 +17504,14 @@
 	* earlier React versions.
 	* @see https://floating-ui.com/docs/react-utils#useid
 	*/
-	var useId$1 = SafeReact.useId || useFloatingId;
+	var useId$2 = SafeReact.useId || useFloatingId;
 	/**
 	* Renders a pointing arrow triangle.
 	* @see https://floating-ui.com/docs/FloatingArrow
 	*/
 	var FloatingArrow = /*#__PURE__*/ react$3.forwardRef(function FloatingArrow(props, ref) {
 		const { context: { placement, elements: { floating }, middlewareData: { arrow, shift } }, width = 14, height = 7, tipRadius = 0, strokeWidth = 0, staticOffset, stroke, d, style: { transform, ...restStyle } = {}, ...rest } = props;
-		const clipPathId = useId$1();
+		const clipPathId = useId$2();
 		const [isRTL, setIsRTL] = react$3.useState(false);
 		index(() => {
 			if (!floating) return;
@@ -18140,7 +18000,7 @@
 	function useFloatingPortalNode(props) {
 		if (props === void 0) props = {};
 		const { id, root } = props;
-		const uniqueId = useId$1();
+		const uniqueId = useId$2();
 		const portalContext = usePortalContext();
 		const [portalNode, setPortalNode] = react$3.useState(null);
 		const portalNodeRef = react$3.useRef(null);
@@ -18569,7 +18429,7 @@
 	}
 	function useFloatingRootContext(options) {
 		const { open = false, onOpenChange: onOpenChangeProp, elements: elementsProp } = options;
-		const floatingId = useId$1();
+		const floatingId = useId$2();
 		const dataRef = react$3.useRef({});
 		const [events] = react$3.useState(() => createPubSub());
 		const nested = useFloatingParentNodeId() != null;
@@ -18872,7 +18732,7 @@
 		const { open, floatingId } = context;
 		const { enabled = true, role = "dialog" } = props;
 		const ariaRole = (_componentRoleToAriaR = componentRoleToAriaRoleMap.get(role)) != null ? _componentRoleToAriaR : role;
-		const referenceId = useId$1();
+		const referenceId = useId$2();
 		const isNested = useFloatingParentNodeId() != null;
 		const reference = react$3.useMemo(() => {
 			if (ariaRole === "tooltip" || role === "label") return { ["aria-" + (role === "label" ? "labelledby" : "describedby")]: open ? floatingId : void 0 };
@@ -18984,12 +18844,12 @@
 	*/
 	var AccordionItemWrapper = dist_default.div`
     width: 100%;
+    border: 1px solid ${(props) => props.theme.colors.grey1};
+    border-radius: 0.25rem;
     background-color: ${(props) => {
 		var _a;
 		return (_a = props.backgroundColor) !== null && _a !== void 0 ? _a : props.theme.colors.blue1;
 	}};
-    border: 1px solid ${(props) => props.theme.colors.grey1};
-    border-radius: 0.25rem;
 
     /* Define the animation used for collapsing */
     /* stylelint-disable-next-line -- external classname */
@@ -19006,14 +18866,14 @@
 
     width: 100%;
     padding: 0.5rem 1rem;
+    border: none;
+    border-radius: ${(props) => props.isOpen ? "0.25rem 0.25rem 0rem 0rem" : "0.25rem"};
 
     font-size: 1.2em;
     font-weight: 400;
     color: ${(props) => props.theme.colors.text};
 
     background-color: ${(props) => props.theme.colors.grey1};
-    border: none;
-    border-radius: ${(props) => props.isOpen ? "0.25rem 0.25rem 0rem 0rem" : "0.25rem"};
 
     &:hover {
         background-color: ${(props) => props.theme.colors.grey2};
@@ -19093,6 +18953,10 @@
 	* limitations under the License.
 	*/
 	var shouldForwardProp$4 = (prop) => !["color", "width"].includes(prop);
+	function getWidth$1(width) {
+		if (width) return width;
+		return "auto";
+	}
 	/**
 	* A simple badge component
 	*
@@ -19103,17 +18967,17 @@
     align-items: center;
     justify-content: center;
 
-    width: ${(props) => props.width || "auto"};
+    width: ${(props) => getWidth$1(props.width)};
     height: ${(props) => props.height ? `${props.height}px` : "2rem"};
     padding: 0 0.75rem;
+    border: 1px solid ${(props) => props.color};
+    border-radius: ${(props) => props.height ? `${props.height / 2}px` : "1rem"};
 
     font-size: 0.875rem;
     font-weight: 400;
     color: ${(props) => props.outline ? props.color : props.theme.colors.blue1};
 
     background-color: ${(props) => props.outline ? props.theme.colors.blue1 : props.color};
-    border: 1px solid ${(props) => props.color};
-    border-radius: ${(props) => props.height ? `${props.height / 2}px` : "1rem"};
 `;
 	//#endregion
 	//#region ../../node_modules/.pnpm/@babel+runtime@7.26.10/node_modules/@babel/runtime/helpers/esm/extends.js
@@ -19702,12 +19566,12 @@
 
         width: 25%;
         height: 25%;
+        border-radius: 100%;
 
         background-color: ${(props) => {
 		var _a;
 		return (_a = props.color) !== null && _a !== void 0 ? _a : props.theme.colors.grey4;
 	}};
-        border-radius: 100%;
 
         animation: sk-chase-dot-before 2s infinite ease-in-out both;
     }
@@ -19805,7 +19669,7 @@
 					(0, import_jsx_runtime.jsx)("div", { className: "sk-chase-dot" }),
 					(0, import_jsx_runtime.jsx)("div", { className: "sk-chase-dot" })
 				]
-			}), (props.showText || props.text) && (0, import_jsx_runtime.jsx)(LoadingText, {
+			}), (Boolean(props.showText) || Boolean(props.text)) && (0, import_jsx_runtime.jsx)(LoadingText, {
 				color: props.color,
 				children: (_a = props.text) !== null && _a !== void 0 ? _a : "LOADING"
 			})]
@@ -19848,13 +19712,12 @@
     height: 2.5rem;
     padding: ${(props) => props.$hasAnchor ? 0 : "0 1rem"};
     padding: 0 1rem;
+    border: none;
+    border-radius: 0.25rem;
 
     font-size: 1rem;
     font-weight: 600;
 
-    border: none;
-    border-radius: 0.25rem;
-
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
@@ -19985,7 +19848,7 @@
 			$hasAnchor: !!href,
 			autoFocus,
 			className,
-			disabled: disabled || loading,
+			disabled: Boolean(disabled) || Boolean(loading),
 			id,
 			onClick,
 			outline,
@@ -20021,7 +19884,6 @@
     flex: 1 1 auto;
 
     height: 2.5rem;
-
     border: 1px solid ${(props) => {
 		var _a;
 		return props.disabled ? props.theme.colors.grey2 : (_a = props.theme.colors) === null || _a === void 0 ? void 0 : _a[props.styling];
@@ -20160,11 +20022,11 @@
     align-items: center;
 
     padding: 0;
+    border: none;
 
     color: ${(props) => props.theme.colors.grey4};
 
     background-color: inherit;
-    border: none;
 
     :hover {
         color: ${(props) => props.theme.colors.grey5};
@@ -20177,11 +20039,11 @@
     z-index: 3;
 
     padding: 0;
+    border: none;
 
     color: ${(props) => props.selected ? props.theme.colors.grey4 : props.theme.colors.grey3};
 
     background-color: inherit;
-    border: none;
 
     :hover {
         color: ${(props) => props.theme.colors.grey4};
@@ -20252,13 +20114,13 @@
     height: 100%;
     min-height: 3.4rem;
     padding: 1rem;
+    border: 1px solid ${(props) => props.isErrored ? props.theme.colors.error : props.theme.colors.grey1};
+    border-radius: 0.25rem;
 
     font-size: 1rem;
     color: ${(props) => props.disabled ? props.theme.colors.grey2 : props.theme.colors.text};
 
     background-color: ${(props) => props.theme.colors.grey1};
-    border: 1px solid ${(props) => props.isErrored ? props.theme.colors.error : props.theme.colors.grey1};
-    border-radius: 0.25rem;
     outline: 0;
 
     :hover:not(:disabled) {
@@ -27481,11 +27343,11 @@
     justify-content: space-between;
 
     padding: 0.5rem 1rem;
+    border-radius: 0.25rem 0.25rem 0 0;
 
     font-size: 0.875rem;
 
     background-color: ${(props) => props.$isLightTheme ? theme.colors.blue2 : darkTheme.colors.blue2} !important;
-    border-radius: 0.25rem 0.25rem 0 0;
 `;
 	var CopyToClipboardContainer = dist_default.span`
     :hover {
@@ -27506,9 +27368,9 @@
 
     margin: 0;
     padding: 1rem;
+    border-radius: 0 0 0.25rem 0.25rem;
 
     background-color: ${(props) => props.$isLightTheme ? theme.colors.blue1 : darkTheme.colors.blue1} !important;
-    border-radius: 0 0 0.25rem 0.25rem;
 `;
 	//#endregion
 	//#region ../ui-components/dist/markdown/markdown.js
@@ -27536,9 +27398,9 @@
 
         code {
             padding: 0.1rem;
-            background-color: ${(props) => props.theme.colors.grey1};
             border: 1px solid ${(props) => props.theme.colors.grey3};
             border-radius: 0.25rem;
+            background-color: ${(props) => props.theme.colors.grey1};
         }
     }
 
@@ -27558,7 +27420,8 @@
 
     a {
         color: ${(props) => props.theme.colors.primary};
-        word-break: break-word;
+        word-break: normal;
+        overflow-wrap: anywhere;
     }
 
     blockquote {
@@ -27567,13 +27430,12 @@
         margin-top: 1.5rem;
         margin-bottom: 1.5rem;
         padding-left: 1rem;
+        border-left: 0.25rem solid ${(props) => props.theme.colors.grey3};
 
         font-weight: 500;
         font-style: italic;
         color: ${(props) => props.theme.colors.grey6};
 
-        border-left: 0.25rem solid ${(props) => props.theme.colors.grey3};
-
         p:first-of-type::before {
             content: open-quote;
         }
@@ -27663,13 +27525,13 @@
         margin-top: 1.7rem;
         margin-bottom: 1.7rem;
         padding: 0 0.5em;
+        border: 1px solid ${(props) => props.theme.colors.blue3};
+        border-radius: 0.375rem;
 
         font-size: 0.9rem;
         line-height: 1.7;
 
         background-color: ${(props) => props.theme.colors.blue2};
-        border: 1px solid ${(props) => props.theme.colors.blue3};
-        border-radius: 0.375rem;
 
         div {
             background-color: ${(props) => props.theme.colors.blue2} !important;
@@ -27701,9 +27563,9 @@
 
             code {
                 padding: 0.1em;
-                background-color: ${(props) => props.theme.colors.grey1};
                 border: 1px solid ${(props) => props.theme.colors.grey3};
                 border-radius: 0.25rem;
+                background-color: ${(props) => props.theme.colors.grey1};
             }
 
             p {
@@ -27861,11 +27723,11 @@
 
     max-width: 15rem;
     padding: 0.75rem 1rem;
-
-    word-break: break-word;
-
     border-radius: 0.25rem;
 
+    word-break: normal;
+    overflow-wrap: anywhere;
+
     transition: opacity 150ms ease-in-out;
 
     ${(props) => {
@@ -27910,7 +27772,7 @@
 			];
 		}, [placement]);
 		const { refs, floatingStyles, context } = useFloating({
-			open: visible !== void 0 ? visible : isOpen,
+			open: visible !== null && visible !== void 0 ? visible : isOpen,
 			onOpenChange: visible !== void 0 ? void 0 : setIsOpen,
 			placement: placement === "auto" ? void 0 : placement,
 			middleware,
@@ -27937,7 +27799,7 @@
 			}),
 			useRole(context, { role: "tooltip" })
 		]);
-		const isVisible = visible !== void 0 ? visible : isOpen;
+		const isVisible = visible !== null && visible !== void 0 ? visible : isOpen;
 		const childRef = children && typeof children === "object" && "ref" in children ? children.ref : null;
 		const mergedRef = useMergeRefs([refs.setReference, childRef]);
 		const referenceElement = children ? react.cloneElement(children, getReferenceProps(Object.assign({ ref: mergedRef }, children.props))) : null;
@@ -27984,9 +27846,9 @@
     gap: 0.5rem;
 
     padding: 0.3rem;
+    border-radius: 0.25rem;
 
     background-color: ${(props) => props.theme.colors.blue1};
-    border-radius: 0.25rem;
     box-shadow: ${(props) => props.theme.shadow.medium};
 `;
 	var MessageWrapper = dist_default.div`
@@ -27998,9 +27860,9 @@
 
     width: 100%;
     padding: 1rem;
+    border-radius: 0.25rem;
 
     background-color: ${(props) => props.$messageFromActiveUser ? props.theme.colors.blue2 : props.theme.colors.blue1};
-    border-radius: 0.25rem;
     box-shadow: ${(props) => props.theme.shadow.medium};
 
     :hover ${InteractiveIcons} {
@@ -28075,11 +27937,10 @@
 
     width: 2rem;
     height: 2rem;
+    border-radius: 50%;
 
     font-weight: 700;
     color: white;
-
-    border-radius: 50%;
 `;
 	//#endregion
 	//#region ../ui-components/dist/chat/chat.js
@@ -28108,9 +27969,9 @@
     width: ${(props) => props.$isPopup ? "350px" : "100%"};
     height: ${(props) => props.$isPopup ? "calc(100vh - 2rem)" : "100%"};
     padding: 1.5rem;
+    border-radius: ${(props) => props.$isPopup ? "0.4rem" : 0};
 
     background-color: ${(props) => props.$isPopup ? `${props.theme.colors.background}e6` : "inherit"};
-    border-radius: ${(props) => props.$isPopup ? "0.4rem" : 0};
     box-shadow: ${(props) => props.theme.shadow.medium};
 `;
 	var ReplyWrapper = dist_default.div`
@@ -30497,11 +30358,10 @@
 
     width: ${(props) => props.isListStyle ? "100%" : "fit-content"};
     padding: 0.5625rem 0 0.5625rem 2rem;
+    border-radius: 0.25rem;
 
     font-size: 1rem;
 
-    border-radius: 0.25rem;
-
     ${(props) => {
 		if (props.isListStyle && !props.disabled) return `
                 :hover {
@@ -30526,7 +30386,6 @@
 
         width: 0.3125rem;
         height: 0.625rem;
-
         border: solid ${(props) => props.theme.colors.grey5};
         border-width: 0 2px 2px 0;
     }
@@ -30539,12 +30398,12 @@
     :hover {
         span,
         input:checked ~ span {
+            border: 1px solid ${(props) => props.theme.colors.grey4};
             background-color: ${(props) => {
 		if (props.disabled) return props.theme.colors.grey3;
 		if (props.isListStyle) return props.theme.colors.blue1;
 		return props.theme.colors.grey1;
 	}};
-            border: 1px solid ${(props) => props.theme.colors.grey4};
         }
     }
 
@@ -30599,7 +30458,8 @@
 	* @param {CheckboxProps} props - the component props
 	*/
 	function Checkbox(props) {
-		const [checked, setChecked] = (0, react.useState)(props.selected || props.initialValue);
+		var _a;
+		const [checked, setChecked] = (0, react.useState)((_a = props.selected) !== null && _a !== void 0 ? _a : props.initialValue);
 		(0, react.useEffect)(() => {
 			if (props.selected !== void 0) setChecked(props.selected);
 		}, [props.selected]);
@@ -30683,7 +30543,10 @@
 	* @param {CheckboxGroupProps} props - the component props
 	*/
 	function CheckboxGroup(props) {
-		const [values, setValues] = (0, react.useState)(() => getInitialValue$3(props.values || props.initialValue));
+		const [values, setValues] = (0, react.useState)(() => {
+			var _a;
+			return getInitialValue$3((_a = props.values) !== null && _a !== void 0 ? _a : props.initialValue);
+		});
 		const [checkedState, setCheckedState] = (0, react.useState)(() => getInitialCheckedState(props.items, values));
 		const isSelectPermitted = (0, react.useMemo)(() => {
 			if (!props.selectMax || values.length < props.selectMax) return true;
@@ -30724,7 +30587,7 @@
 			className: props.className,
 			style: props.style,
 			id: props.id,
-			children: [(props.selectMax || props.selectMin) && (0, import_jsx_runtime.jsx)(CheckboxInfo, { children: infoMessage }), props.items.map((item, index) => {
+			children: [(Boolean(props.selectMax) || Boolean(props.selectMin)) && (0, import_jsx_runtime.jsx)(CheckboxInfo, { children: infoMessage }), props.items.map((item, index) => {
 				var _a, _b;
 				return (0, import_jsx_runtime.jsx)(CheckboxWrapper, {
 					"aria-disabled": props.disabled,
@@ -30773,13 +30636,13 @@
     width: 100%;
     height: 100%;
     padding: 0 1rem;
+    border: 1px solid ${(props) => props.isErrored ? props.theme.colors.error : props.theme.colors.grey1};
+    border-radius: 0.25rem;
 
     font-size: 1rem;
     color: ${(props) => props.disabled ? props.theme.colors.grey2 : props.theme.colors.text};
 
     background-color: ${(props) => props.theme.colors.grey1};
-    border: 1px solid ${(props) => props.isErrored ? props.theme.colors.error : props.theme.colors.grey1};
-    border-radius: 0.25rem;
     outline: 0;
 
     :active:not(:disabled),
@@ -30947,21 +30810,21 @@
 
     width: 17.5rem;
     padding: 1.25rem 0.5rem;
+    border-radius: 0.25rem;
 
     background-color: ${(props) => props.theme.colors.grey1};
-    border-radius: 0.25rem;
     box-shadow: ${(props) => props.theme.shadow.light};
 `;
 	var StyledSearchBar = dist_default(SearchBar)`
     width: 15.5rem;
-    background-color: ${(props) => props.theme.colors.blue1};
     border: 1px solid ${(props) => props.theme.colors.blue1};
     border-radius: 0.25rem;
+    background-color: ${(props) => props.theme.colors.blue1};
 
     input {
         width: 15.5rem;
-        background-color: ${(props) => props.theme.colors.blue1};
         border: none;
+        background-color: ${(props) => props.theme.colors.blue1};
 
         :active:not(:disabled),
         :focus:not(:disabled) {
@@ -30970,22 +30833,23 @@
     }
 
     :hover:not(:disabled) {
-        background-color: ${(props) => props.theme.colors.blue1};
         border: 1px solid ${(props) => props.theme.colors.grey2};
+        background-color: ${(props) => props.theme.colors.blue1};
 
         input {
-            background-color: ${(props) => props.theme.colors.blue1};
             border: none;
+            background-color: ${(props) => props.theme.colors.blue1};
         }
     }
 `;
 	var FilterButtons = dist_default.button`
+    border: none;
+
     font-size: 0.75rem;
     font-weight: 400;
     color: ${(props) => props.theme.colors.primary};
 
     background-color: inherit;
-    border: none;
 
     :hover {
         cursor: pointer;
@@ -31078,7 +30942,7 @@
 					values: filterValue
 				}) }),
 				(0, import_jsx_runtime.jsx)(ApplyButton, {
-					disabled: props.disabled || previousFilter === filterValue,
+					disabled: Boolean(props.disabled) || previousFilter === filterValue,
 					onClick: (e) => {
 						var _a, _b;
 						(_a = props.onChange) === null || _a === void 0 || _a.call(props, filterValue, e);
@@ -33282,6 +33146,7 @@
     width: 100%;
     min-height: 2rem;
     padding: 0.25rem 1rem;
+    border-bottom: 1px solid ${(props) => props.theme.colors.grey3};
 
     font-size: ${(props) => props.size ? `${props.size}rem` : "1rem"};
     font-weight: 300;
@@ -33294,7 +33159,6 @@
 		if (props.isHighlighted) return props.theme.colors.grey2;
 		return props.theme.colors.blue1;
 	}};
-    border-bottom: 1px solid ${(props) => props.theme.colors.grey3};
 
     :hover {
         background-color: ${(props) => props.theme.colors.grey2};
@@ -33413,7 +33277,6 @@
     width: 100%;
     min-width: 4rem;
     height: 2.5rem;
-
     border-radius: ${(props) => props.isOpen ? "0.25rem 0.25rem 0px 0px" : "0.25rem"};
 
     ${(props) => {
@@ -33443,12 +33306,12 @@
     width: calc(100% - 1rem);
     height: 100%;
     padding: 0 0.25rem 0 1rem;
+    border: none;
+    border-radius: ${(props) => props.isOpen ? "0.25rem 0.25rem 0px 0px" : "0.25rem"};
 
     color: ${(props) => props.disabled ? props.theme.colors.grey2 : props.theme.colors.text};
 
     background-color: ${(props) => props.theme.colors.grey1};
-    border: none;
-    border-radius: ${(props) => props.isOpen ? "0.25rem 0.25rem 0px 0px" : "0.25rem"};
 
     :hover {
         background-color: ${(props) => props.disabled ? props.theme.colors.grey1 : props.theme.colors.grey2};
@@ -33465,6 +33328,7 @@
     height: 100%;
     margin-right: 0.5rem;
     padding: 0;
+    border: none;
 
     font-size: ${(props) => props.size ? `${props.size}rem` : props.theme.font.size};
     font-weight: 300;
@@ -33474,7 +33338,6 @@
     white-space: nowrap;
 
     background-color: transparent;
-    border: none;
     outline: 0;
 
     :disabled {
@@ -33489,8 +33352,9 @@
     display: flex;
     flex-direction: column;
 
-    background-color: ${(props) => props.theme.colors.blue1};
     border-radius: 4px;
+
+    background-color: ${(props) => props.theme.colors.blue1};
     outline: none;
     box-shadow: rgb(0 0 0 / 10%) 0 2px 5px;
 
@@ -33542,14 +33406,14 @@
     min-width: 160px;
     height: fit-content;
     padding: 5px 8px;
+    border: none;
+    border-radius: 4px;
 
     font-size: 0.9rem;
     color: ${(props) => props.theme.colors.text};
     white-space: nowrap;
 
     background-color: ${(props) => props.theme.colors.blue1};
-    border: none;
-    border-radius: 4px;
     box-shadow: none;
 
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -38563,10 +38427,10 @@
     width: 100%;
     height: 100%;
     padding: 0 0.5rem 0 1rem;
+    border: none;
 
     font-size: ${(props) => props.theme.font.size};
 
-    border: none;
     outline: 0;
 
     :not(:enabled) {
@@ -38577,12 +38441,12 @@
 
     width: 100%;
     padding: 0 0.25rem;
+    border-radius: 0.25rem;
 
     font-size: 0.875rem;
     color: ${(props) => props.theme.colors.text};
 
     background-color: ${(props) => props.theme.colors.grey1};
-    border-radius: 0.25rem;
 
     :hover:enabled {
         background-color: ${(props) => props.theme.colors.grey2};
@@ -38613,6 +38477,7 @@
     width: 100%;
     min-height: 2rem;
     padding: 0.25rem 1.5rem;
+    border-radius: 0.25rem;
 
     font-size: 0.75rem;
     font-weight: 300;
@@ -38625,7 +38490,6 @@
 		if (props.isHighlighted) return props.theme.colors.grey2;
 		return props.theme.colors.grey1;
 	}};
-    border-radius: 0.25rem;
 
     :hover {
         background-color: ${(props) => props.isSelected ? props.theme.colors.primary : props.theme.colors.grey2};
@@ -38654,6 +38518,9 @@
 			children: item.label
 		}));
 	});
+	function getMaxItems(maxItems) {
+		return maxItems || 5;
+	}
 	var StyledDropdownList = react.memo(dist_default(dropdown_list_default)`
     overflow-y: auto;
     display: ${(props) => props.isOpen ? "flex" : "none"};
@@ -38662,12 +38529,13 @@
 
     width: 16.25rem;
     max-height: calc(
-        ${(props) => (props.maxItems || 5) * 2}em + 2px + (${(props) => (props.maxItems || 5) - 1}) * 0.125em
+        ${(props) => getMaxItems(props.maxItems) * 2}em + 2px + (${(props) => getMaxItems(props.maxItems) - 1}) *
+            0.125em
     );
     margin-left: ${(props) => props.displacement}rem;
+    border: none;
 
     background-color: ${(props) => props.theme.colors.grey1};
-    border: none;
     box-shadow: none;
 `);
 	var DatepickerSelectButtonPrimary = react.memo(({ disabled, getToggleButtonProps, setReference, getReferenceProps, size, isOpen, selectedItem }) => (0, import_jsx_runtime.jsxs)(SelectButtonPrimary, Object.assign({ disabled }, getToggleButtonProps({
@@ -38835,12 +38703,12 @@
     .react-datepicker {
         width: 16.45rem;
         height: 18.5rem;
+        border: 1px solid ${(props) => props.theme.colors.grey1};
 
         font-family: Manrope, sans-serif;
         font-size: 0.75rem;
 
         background-color: ${(props) => props.theme.colors.grey1};
-        border: 1px solid ${(props) => props.theme.colors.grey1};
         box-shadow: ${(props) => props.theme.shadow.light};
 
         svg {
@@ -38872,11 +38740,11 @@
                 margin-right: 3px;
                 margin-left: 3px;
                 padding: 1.25em 0.75em 0;
+                border: none;
 
                 color: ${(props) => props.theme.colors.text};
 
                 background-color: ${(props) => props.theme.colors.grey1};
-                border: none;
 
                 .react-datepicker__day-names {
                     display: flex;
@@ -39040,15 +38908,15 @@
     width: 8.5rem;
     height: 2.5rem;
     padding: 0 1rem;
+    border: 1px solid ${(props) => props.theme.colors.grey1};
+    border-radius: 0.25rem;
+    border-radius: ${(props) => props.isTimeRange ? "0.25rem 0.25rem 0rem 0rem" : "0.25rem"};
 
     font-size: 1rem;
     color: ${(props) => props.disabled ? props.theme.colors.grey2 : props.theme.colors.text};
     text-align: center;
 
     background-color: ${(props) => props.theme.colors.grey1};
-    border: 1px solid ${(props) => props.theme.colors.grey1};
-    border-radius: 0.25rem;
-    border-radius: ${(props) => props.isTimeRange ? "0.25rem 0.25rem 0rem 0rem" : "0.25rem"};
     outline: 0;
 
     :focus:not(:disabled) {
@@ -39082,13 +38950,12 @@
         justify-content: center;
 
         padding: 0.5rem;
+        border-radius: ${(props) => props.isRange ? "0rem 0rem 0.25rem 0.25rem" : "0.25rem"};
 
         font-size: 1rem;
         color: ${(props) => props.theme.colors.text};
         text-align: center;
 
-        border-radius: ${(props) => props.isRange ? "0rem 0rem 0.25rem 0.25rem" : "0.25rem"};
-
         :focus:not(:disabled) {
             border: 1px solid ${(props) => props.theme.colors.grey3};
         }
@@ -39108,7 +38975,6 @@
             display: block;
 
             width: 6rem;
-
             border-top: ${(props) => props.isRange ? `1px solid ${props.theme.colors.grey2}` : "none"};
         }
     }
@@ -39228,7 +39094,7 @@
 	function DatePicker(props) {
 		var _a, _b, _c;
 		const value = (_a = props.value) !== null && _a !== void 0 ? _a : props.initialValue;
-		const [selectedDate, setSelectedDate] = (0, react.useState)(value || (props.selectsRange ? [null, null] : null));
+		const [selectedDate, setSelectedDate] = (0, react.useState)(value !== null && value !== void 0 ? value : props.selectsRange ? [null, null] : null);
 		const [selectedTime, setSelectedTime] = (0, react.useState)(() => getInitialTime(value, props.selectsRange));
 		const formatToApply = (_b = props.dateFormat) !== null && _b !== void 0 ? _b : "dd/MM/yyyy";
 		const [startDate, setStartDate] = (0, react.useState)(() => getInitialDate(value, formatToApply, true));
@@ -39331,7 +39197,7 @@
 		(0, react.useEffect)(() => {
 			var _a;
 			const newValue = (_a = props.value) !== null && _a !== void 0 ? _a : props.initialValue;
-			const newDate = newValue || (props.selectsRange ? [null, null] : null);
+			const newDate = newValue !== null && newValue !== void 0 ? newValue : props.selectsRange ? [null, null] : null;
 			if (JSON.stringify(newDate) === JSON.stringify(selectedDateRef.current)) return;
 			setSelectedDate(newDate);
 			const newTime = getInitialTime(newValue, props.selectsRange);
@@ -39460,6 +39326,7 @@
 
     width: 10px;
     height: 10px;
+    border-radius: 5px;
 
     color: ${(props) => {
 		var _a;
@@ -39470,7 +39337,6 @@
 		var _a;
 		return (_a = props.$grey4) !== null && _a !== void 0 ? _a : props.theme.colors.grey4;
 	}};
-    border-radius: 5px;
 
     animation: dot-flashing 1s infinite linear alternate;
     animation-delay: 0.5s;
@@ -39488,6 +39354,7 @@
 
         width: 10px;
         height: 10px;
+        border-radius: 5px;
 
         color: ${(props) => {
 		var _a;
@@ -39498,7 +39365,6 @@
 		var _a;
 		return (_a = props.$grey4) !== null && _a !== void 0 ? _a : props.theme.colors.grey4;
 	}};
-        border-radius: 5px;
 
         animation: dot-flashing 1s infinite alternate;
         animation-delay: 0s;
@@ -39509,6 +39375,7 @@
 
         width: 10px;
         height: 10px;
+        border-radius: 5px;
 
         color: ${(props) => {
 		var _a;
@@ -39519,7 +39386,6 @@
 		var _a;
 		return (_a = props.$grey4) !== null && _a !== void 0 ? _a : props.theme.colors.grey4;
 	}};
-        border-radius: 5px;
 
         animation: dot-flashing 1s infinite alternate;
         animation-delay: 1s;
@@ -40632,12 +40498,11 @@
     justify-content: center;
 
     margin-top: 20px;
-
-    color: ${(props) => props.theme.colors.text};
-
     border: 1px dashed ${(props) => props.isDragActive ? props.theme.colors.primary : props.theme.colors.grey3};
     border-radius: 0.25rem;
 
+    color: ${(props) => props.theme.colors.text};
+
     :hover {
         background-color: ${(props) => props.theme.colors.grey1};
     }
@@ -40776,10 +40641,9 @@
         width: 0.9rem;
         height: 0.8rem;
         margin-right: 0.1rem;
+        border-bottom: thin solid ${(props) => props.theme.colors.grey6};
 
         vertical-align: top;
-
-        border-bottom: thin solid ${(props) => props.theme.colors.grey6};
     }
 
     &:last-child {
@@ -40913,11 +40777,11 @@
     max-height: 80vh;
     margin-top: ${(props) => props.render ? 0 : "-50px"};
     padding: 1.75rem;
+    border-radius: 0.25rem;
 
     font-size: ${(props) => props.theme.font.size};
 
     background-color: ${(props) => props.theme.colors.grey1};
-    border-radius: 0.25rem;
     box-shadow: ${(props) => props.theme.shadow.medium};
 
     transition: margin-top ease-in 0.1s;
@@ -40929,11 +40793,15 @@
     justify-content: space-between;
     margin-top: 1rem;
 `;
+	function getFlexDirection(flexDirection) {
+		if (flexDirection) return flexDirection;
+		return "column";
+	}
 	/** Arranges the modal header and adds some space below it */
 	var ModalHeader = dist_default.div`
     display: flex;
     flex: 0 0 auto;
-    flex-direction: ${(props) => props.flexDirection || "column"};
+    flex-direction: ${(props) => getFlexDirection(props.flexDirection)};
     justify-content: space-between;
 
     margin-bottom: 1rem;
@@ -40961,7 +40829,6 @@
     width: 100%;
     max-width: ${(props) => props.maxWidth};
     max-height: ${(props) => props.maxRows * 2.5}rem;
-
     border-radius: ${(props) => props.isOpen ? "0.25rem 0.25rem 0rem 0rem" : "0.25rem"};
 `;
 	var InputWrapper$3 = dist_default.div`
@@ -40975,12 +40842,12 @@
     min-height: 2.5rem;
     margin-right: 0.25rem;
     padding: 0.25rem 0.5rem 0.25rem 1rem;
+    border: none;
+    border-radius: ${(props) => props.isOpen ? "0.25rem 0.25rem 0rem 0rem" : "0.25rem"};
 
     color: ${(props) => props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.text};
 
     background-color: ${(props) => props.theme.colors.grey1};
-    border: none;
-    border-radius: ${(props) => props.isOpen ? "0.25rem 0.25rem 0rem 0rem" : "0.25rem"};
 
     :hover {
         background-color: ${(props) => props.isDisabled ? props.theme.colors.grey1 : props.theme.colors.grey2};
@@ -41015,6 +40882,7 @@
 
     margin-right: 0.5rem;
     padding: 0;
+    border: none;
 
     font-size: ${(props) => props.size ? `${props.size}rem` : props.theme.font.size};
     font-weight: 300;
@@ -41024,7 +40892,6 @@
     white-space: nowrap;
 
     background-color: transparent;
-    border: none;
     outline: 0;
 
     :disabled {
@@ -41049,13 +40916,13 @@
 
     height: ${tagHeight}rem;
     padding: 0 0.75rem;
+    border: 1px solid ${(props) => props.theme.colors.primary};
+    border-radius: 1rem;
 
     font-size: 0.875rem;
     color: ${(props) => props.disabled ? props.theme.colors.grey3 : props.theme.colors.text};
 
     background-color: ${(props) => props.disabled ? props.theme.colors.grey3 : props.theme.colors.blue3};
-    border: 1px solid ${(props) => props.theme.colors.primary};
-    border-radius: 1rem;
 
     svg {
         width: 0.85rem;
@@ -41111,7 +40978,6 @@
     width: 100%;
     min-width: 4rem;
     height: 2.5rem;
-
     border-radius: ${(props) => props.isOpen ? "0.25rem 0.25rem 0rem 0rem" : "0.25rem"};
 
     ${(props) => {
@@ -41138,13 +41004,13 @@
     width: 100%;
     height: 100%;
     padding: 0 0.5rem 0 1rem;
+    border: none;
+    border-radius: ${(props) => props.isOpen ? "0.25rem 0.25rem 0rem 0rem" : "0.25rem"};
 
     font-size: 1rem;
     color: ${(props) => props.theme.colors.text};
 
     background-color: ${(props) => props.theme.colors.grey1};
-    border: none;
-    border-radius: ${(props) => props.isOpen ? "0.25rem 0.25rem 0rem 0rem" : "0.25rem"};
     outline: 0;
 
     :not(:enabled) {
@@ -41304,12 +41170,12 @@
 
     input {
         width: ${(props) => props.showTwoInputs ? "106px" : "100%"};
-        background-color: ${(props) => props.theme.colors.background};
         border: 1px solid ${(props) => props.showError ? props.theme.colors.error : props.theme.colors.background};
+        background-color: ${(props) => props.theme.colors.background};
 
         :hover:not(:disabled) {
-            background-color: ${(props) => props.theme.colors.background};
             border: 1px solid ${(props) => props.showError ? props.theme.colors.error : props.theme.colors.grey3};
+            background-color: ${(props) => props.theme.colors.background};
         }
 
         :active:not(:disabled),
@@ -41465,7 +41331,6 @@
 
     box-sizing: border-box;
     padding: 0.25rem 0;
-
     border-radius: 0 0.25rem 0.25rem 0;
 `;
 	var StepperButton = dist_default(button_default)`
@@ -41552,11 +41417,11 @@
     width: 22ch;
     height: 2.5rem;
     padding-right: 0.5rem;
-
-    background-color: ${(props) => props.theme.colors.grey1};
     border: 1px solid ${(props) => props.errorMsg ? props.theme.colors.error : props.theme.colors.grey1};
     border-radius: 0.25rem;
 
+    background-color: ${(props) => props.theme.colors.grey1};
+
     input {
         height: calc(2.5rem - 2px);
         border: none;
@@ -41614,7 +41479,7 @@
 	* @param integerOnly whether to limit the input to only accept integers
 	*/
 	var numericFilter = (integerOnly) => (e) => {
-		if (parseInt(e.key) || parseInt(e.key) === 0) return true;
+		if (parseInt(e.key, 10) || parseInt(e.key, 10) === 0) return true;
 		if (CONTROL_KEYS.includes(e.key)) return true;
 		const target = e.target;
 		if (!integerOnly && e.key === Key.PERIOD && !target.value.includes(Key.PERIOD)) return true;
@@ -41673,7 +41538,7 @@
 			if (e.key === Key.DOWN) step(stepSkip * -1);
 		};
 		const handleOnChange = (0, react.useCallback)((v, e) => {
-			const parsed = props.integerOnly ? parseInt(v) : parseFloat(v);
+			const parsed = props.integerOnly ? parseInt(v, 10) : parseFloat(v);
 			if (value === void 0) {
 				setInput(v);
 				onChange === null || onChange === void 0 || onChange(parsed, e);
@@ -41776,11 +41641,11 @@
     max-height: 100%;
     margin: 2rem;
     padding: 1rem;
+    border-radius: 0.25rem;
 
     color: ${(props) => props.theme.colors.text};
 
     background-color: ${(props) => props.theme.colors.grey1};
-    border-radius: 0.25rem;
 `;
 	var Card$1 = dist_default.div`
     cursor: pointer;
@@ -41794,12 +41659,12 @@
 
     margin: 1rem;
     padding: 1rem;
+    border: ${(props) => `2px solid ${props.selected ? props.theme.colors.primary : "transparent"}`};
+    border-radius: 0.25rem;
 
     text-align: center;
 
     background-color: ${(props) => props.theme.colors.blue1};
-    border: ${(props) => `2px solid ${props.selected ? props.theme.colors.primary : "transparent"}`};
-    border-radius: 0.25rem;
 
     :hover {
         border: ${(props) => `2px solid ${props.selected ? props.theme.colors.primary : props.theme.colors.grey3}`};
@@ -42224,19 +42089,23 @@
 
     width: 100%;
     height: ${(props) => props.small ? "0.5rem" : "1rem"};
+    border-radius: ${(props) => props.small ? "0.25rem" : "0.5rem"};
 
     background-color: ${(props) => props.theme.colors.grey2};
-    border-radius: ${(props) => props.small ? "0.25rem" : "0.5rem"};
 `;
+	function getBarColor(color, fallback) {
+		if (color) return color;
+		return fallback;
+	}
 	var Bar = dist_default.div`
     position: absolute;
 
     overflow: ${(props) => props.multi ? "hidden" : "visible"};
 
     height: 100%;
-
-    background-color: ${(props) => props.color ? props.color : props.theme.colors.primary};
     border-radius: ${(props) => props.small ? "0.25rem" : "0.5rem"};
+
+    background-color: ${(props) => getBarColor(props.color, props.theme.colors.primary)};
 `;
 	var Text = dist_default.span`
     position: absolute;
@@ -42281,10 +42150,10 @@
 		const progresses = typeof props.progress === "number" ? [{
 			index: 0,
 			value: props.progress
-		}] : (0, import_sortBy.default)([...props.progress.map((x, i) => ({
+		}] : (0, import_sortBy.default)(props.progress.map((x, i) => ({
 			index: i,
 			value: x
-		}))], "value").reverse();
+		})), "value").reverse();
 		const colors = arrayify(props.color, defaultColors.slice(0, progresses.length));
 		const labels = arrayify(props.label, progresses.map((x) => `${x.value}%`));
 		return (0, import_jsx_runtime.jsx)(Track$1, {
@@ -42338,12 +42207,11 @@
     width: ${(props) => props.isListStyle ? "auto" : "fit-content"};
     height: 2.5rem;
     padding: 0 0.5rem;
-
-    color: ${(props) => props["aria-disabled"] ? props.theme.colors.grey3 : props.theme.colors.text};
-
     border: none;
     border-radius: 0.25rem;
 
+    color: ${(props) => props["aria-disabled"] ? props.theme.colors.grey3 : props.theme.colors.text};
+
     /* sets checkmark indicator */
     span::after {
         top: calc(0.25rem - 1px);
@@ -42351,9 +42219,9 @@
 
         width: 0.5rem;
         height: 0.5rem;
+        border-radius: 50%;
 
         background-color: ${(props) => props["aria-disabled"] ? props.theme.colors.grey3 : props.theme.colors.grey5};
-        border-radius: 50%;
     }
 
     /* Show the checkmark when checked */
@@ -42410,11 +42278,11 @@
 
     width: 1rem;
     height: 1rem;
-
-    background-color: ${(props) => props.disabled ? props.theme.colors.grey1 : props.theme.colors.blue1};
     border: 1px solid ${(props) => props.disabled ? props.theme.colors.grey2 : props.theme.colors.grey3};
     border-radius: 50%;
 
+    background-color: ${(props) => props.disabled ? props.theme.colors.grey1 : props.theme.colors.blue1};
+
     ::after {
         content: '';
         position: relative;
@@ -42464,9 +42332,9 @@
     padding: ${(props) => (props === null || props === void 0 ? void 0 : props.heading) || !props.section ? "0 0.7rem" : "0 1.5rem"};
     padding-right: 0.7rem;
 
+    font-size: ${(props) => props.size ? `${props.size}rem` : "1rem"};
     font-weight: ${(props) => (props === null || props === void 0 ? void 0 : props.heading) ? "bold" : "normal"};
     color: ${(props) => getTextColor(props === null || props === void 0 ? void 0 : props.heading, props.isSelected, props.theme)};
-    font-size: ${(props) => props.size ? `${props.size}rem` : "1rem"};
 
     ${(props) => {
 		if (props.heading) return `
@@ -42499,12 +42367,14 @@
 		}, []);
 	}
 	var SectionedListItem = ({ item, index, getItemProps, isSelected, isHighlighted, size }) => {
+		var _a;
 		const theme = useClTheme();
-		const _a = getItemProps({
+		const _b = getItemProps({
 			index,
 			item
-		}), { itemClassName } = _a, itemProps = __rest$3(_a, ["itemClassName"]);
+		}), { itemClassName } = _b, itemProps = __rest$3(_b, ["itemClassName"]);
 		if (item.heading) delete itemProps.onClick;
+		const badgeColor = ((_a = item.badge) === null || _a === void 0 ? void 0 : _a.color) || theme.colors.primary;
 		return (0, import_jsx_runtime.jsxs)(ListItemSpan, Object.assign({}, itemProps, {
 			heading: item.heading,
 			section: item.section,
@@ -42515,7 +42385,7 @@
 			size,
 			isHighlighted,
 			children: [item.label || item.section, item.badge && (0, import_jsx_runtime.jsx)(Badge, {
-				color: item.badge.color || theme.colors.primary,
+				color: badgeColor,
 				children: item.badge.label
 			})]
 		}));
@@ -42574,6 +42444,7 @@
 			}
 		}, syncKbdHighlightIdx(setKbdHighlightIdx)), { stateReducer: (state, { changes, type }) => {
 			var _a, _b, _c;
+			var _d;
 			if (type === stateChangeTypes.ControlledPropUpdatedSelectedItem) return Object.assign(Object.assign({}, changes), { inputValue: "" });
 			if (type === stateChangeTypes.InputFocus || type === stateChangeTypes.ToggleButtonClick && changes.isOpen) {
 				setPendingHighlight(changes.selectedItem ? props.items.findIndex((i) => i.value === changes.selectedItem.value) : 0);
@@ -42585,7 +42456,7 @@
 				stateChangeTypes.InputBlur,
 				stateChangeTypes.InputKeyDownEscape,
 				stateChangeTypes.ToggleButtonClick
-			].includes(type)) return Object.assign(Object.assign({}, changes), { inputValue: ((_a = changes.selectedItem) === null || _a === void 0 ? void 0 : _a.label) || "" });
+			].includes(type)) return Object.assign(Object.assign({}, changes), { inputValue: (_d = (_a = changes.selectedItem) === null || _a === void 0 ? void 0 : _a.label) !== null && _d !== void 0 ? _d : "" });
 			if (type === stateChangeTypes.InputKeyDownArrowUp && ((_b = items[changes.highlightedIndex]) === null || _b === void 0 ? void 0 : _b.heading)) return Object.assign(Object.assign({}, changes), { highlightedIndex: changes.highlightedIndex - 1 < 0 ? items.length - 1 : changes.highlightedIndex - 1 });
 			if (type === stateChangeTypes.InputKeyDownArrowDown && ((_c = items[changes.highlightedIndex]) === null || _c === void 0 ? void 0 : _c.heading)) return Object.assign(Object.assign({}, changes), { highlightedIndex: changes.highlightedIndex + 1 === items.length ? 0 : changes.highlightedIndex + 1 });
 			return changes;
@@ -45024,9 +44895,9 @@
 
     width: 100%;
     height: 0.25rem;
+    border-radius: 0.125rem;
 
     background-color: ${(props) => props.theme.colors.grey2};
-    border-radius: 0.125rem;
 `;
 	var StyledSliderThumb = dist_default($6f909507e6374d18$export$2c1b491743890dec)`
     cursor: pointer;
@@ -45037,9 +44908,9 @@
 
     width: 1rem;
     height: 1rem;
+    border-radius: 50%;
 
     background-color: ${(props) => props.theme.colors.primary};
-    border-radius: 50%;
 
     &[data-focus-visible] {
         outline: 2px solid ${(props) => props.theme.colors.primary};
@@ -45061,9 +44932,9 @@
     transform: translateY(-50%);
 
     height: 0.25rem;
+    border-radius: 0.125rem;
 
     background-color: ${(props) => props.theme.colors.primary};
-    border-radius: 0.125rem;
 `;
 	var TrackLabel = dist_default.span`
     position: absolute;
@@ -45093,9 +44964,9 @@
         width: 0.125rem;
         height: 0.125rem;
         margin-top: -0.685rem;
+        border-radius: 50%;
 
         background-color: ${(props) => props.theme.colors.grey3};
-        border-radius: 50%;
     }
 `;
 	var SwapButton = dist_default(button_default).attrs({ styling: "plain" })`
@@ -45213,12 +45084,12 @@
     padding: 0;
     padding-right: ${(props) => props.enabled ? "1.75rem" : "0.5rem"};
     padding-left: ${(props) => props.enabled ? "0.5rem" : "1.75rem"};
+    border-radius: 0.75rem;
 
     font-size: ${(props) => props.theme.font.size};
     color: ${(props) => props.theme.colors.blue1};
 
     background-color: ${(props) => props.enabled ? props.theme.colors.primary : props.theme.colors.secondary};
-    border-radius: 0.75rem;
 
     svg {
         color: ${(props) => props.theme.colors.blue1};
@@ -45233,9 +45104,9 @@
 
     width: 1.25rem;
     height: 1.25rem;
+    border-radius: 0.625rem;
 
     background-color: ${(props) => props.theme.colors.blue1};
-    border-radius: 0.625rem;
 
     transition: left 100ms linear;
 `;
@@ -45248,7 +45119,7 @@
 		off: "OFF",
 		on: "ON"
 	}, lightDark = false, onChange, style, value, id }, ref) {
-		const [enabled, setEnabled] = (0, react.useState)(value || initialValue);
+		const [enabled, setEnabled] = (0, react.useState)(value !== null && value !== void 0 ? value : initialValue);
 		const labelIconToShow = (0, react.useMemo)(() => {
 			if (lightDark) return enabled ? (0, import_jsx_runtime.jsx)(Sun, {}) : (0, import_jsx_runtime.jsx)(Moon, {});
 			return enabled ? labels.on : labels.off;
@@ -46308,16 +46179,16 @@
     input {
         width: 6.7rem;
         padding: 0;
-        background-color: ${(props) => props.theme.colors.background};
         border: 1px solid ${(props) => props.theme.colors.background};
+        background-color: ${(props) => props.theme.colors.background};
 
         ::after {
             width: 5rem;
         }
 
         :hover:not(:disabled) {
-            background-color: ${(props) => props.theme.colors.background};
             border: 1px solid ${(props) => props.theme.colors.grey4};
+            background-color: ${(props) => props.theme.colors.background};
         }
     }
 
@@ -46344,9 +46215,9 @@
     .react-datepicker {
         margin-bottom: -1rem;
         margin-left: -0.5rem;
+        border: none;
 
         background-color: ${(props) => props.theme.colors.grey1};
-        border: none;
         box-shadow: none;
 
         /* stylelint-disable -- external classnames */
@@ -46777,7 +46648,6 @@
 
     width: 1.5rem;
     height: 1.5rem;
-
     border-radius: 0.25rem;
 
     :hover {
@@ -47288,10 +47158,10 @@
     min-width: 80px;
     height: 0.7rem;
     margin: 0.5rem;
+    border-radius: 0.5rem;
 
     background: ${(props) => `linear-gradient(to right, ${props.theme.colors.grey2}, ${curriedTransparentize(.2, props.theme.colors.grey3)}, ${props.theme.colors.grey2});`};
     background-size: 50%;
-    border-radius: 0.5rem;
 
     animation-name: ani-horizontal;
     animation-duration: 3.5s;
@@ -47314,11 +47184,11 @@
 
     min-width: 80px;
     height: ${({ rowHeight }) => `${rowHeight}px`};
+    border-bottom: 1px solid ${(props) => props.theme.colors.grey3};
 
     color: ${(props) => props.theme.colors.grey6};
 
     background-color: ${(props) => props.theme.colors.blue1};
-    border-bottom: 1px solid ${(props) => props.theme.colors.grey3};
 
     :last-child {
         border-right: 0;
@@ -47383,36 +47253,36 @@
 			var _a;
 			return String((_a = row.original[col]) !== null && _a !== void 0 ? _a : "");
 		}).join("_") : void 0;
-		return (0, react.createElement)(Row, Object.assign({}, restRow, {
-			key: `row-${index}`,
+		return (0, import_jsx_runtime.jsx)(Row, Object.assign({}, restRow, {
 			"data-row-id": rowDataId,
 			onClick,
 			onClickRow,
 			style: Object.assign(Object.assign({}, rowStyle), {
 				top: index === 0 ? DEFAULT_ROW_HEIGHT : index * rowHeight + DEFAULT_ROW_HEIGHT,
 				width: totalColumnsWidth > width ? totalColumnsWidth : "100%"
+			}),
+			children: row.cells.map((cell, colIdx) => {
+				var _a, _b, _c, _d, _e;
+				const cellProps = cell.getCellProps();
+				return (0, import_jsx_runtime.jsx)(Cell, Object.assign({}, cellProps, {
+					rowHeight,
+					style: Object.assign(Object.assign(Object.assign(Object.assign({}, cellProps.style), {
+						backgroundColor,
+						justifyContent: mappedColumns[colIdx].align,
+						maxWidth: (_a = cell.column) === null || _a === void 0 ? void 0 : _a.maxWidth,
+						width: cellProps.style.width === "NaNpx" ? mappedColumns[colIdx].width : cellProps.style.width
+					}), ((_b = mappedColumns[colIdx]) === null || _b === void 0 ? void 0 : _b.sticky) === "left" && typeof ((_c = mappedColumns[colIdx]) === null || _c === void 0 ? void 0 : _c.stickyOffset) === "number" ? { left: `${mappedColumns[colIdx].stickyOffset}px` } : {}), ((_d = mappedColumns[colIdx]) === null || _d === void 0 ? void 0 : _d.sticky) === "right" && typeof ((_e = mappedColumns[colIdx]) === null || _e === void 0 ? void 0 : _e.stickyOffset) === "number" ? { right: `${mappedColumns[colIdx].stickyOffset}px` } : {}),
+					children: (0, import_jsx_runtime.jsx)(CellContent, {
+						hasRowHeight: rowHeight !== DEFAULT_ROW_HEIGHT,
+						children: cell.render("Cell", {
+							colIdx,
+							currentEditCell,
+							rowIdx: index
+						})
+					})
+				}), `cell-${index}-${colIdx}`);
 			})
-		}), row.cells.map((cell, colIdx) => {
-			var _a, _b, _c, _d, _e;
-			const cellProps = cell.getCellProps();
-			return (0, react.createElement)(Cell, Object.assign({}, cellProps, {
-				rowHeight,
-				key: `cell-${index}-${colIdx}`,
-				style: Object.assign(Object.assign(Object.assign(Object.assign({}, cellProps.style), {
-					backgroundColor,
-					justifyContent: mappedColumns[colIdx].align,
-					maxWidth: (_a = cell.column) === null || _a === void 0 ? void 0 : _a.maxWidth,
-					width: cellProps.style.width === "NaNpx" ? mappedColumns[colIdx].width : cellProps.style.width
-				}), ((_b = mappedColumns[colIdx]) === null || _b === void 0 ? void 0 : _b.sticky) === "left" && typeof ((_c = mappedColumns[colIdx]) === null || _c === void 0 ? void 0 : _c.stickyOffset) === "number" ? { left: `${mappedColumns[colIdx].stickyOffset}px` } : {}), ((_d = mappedColumns[colIdx]) === null || _d === void 0 ? void 0 : _d.sticky) === "right" && typeof ((_e = mappedColumns[colIdx]) === null || _e === void 0 ? void 0 : _e.stickyOffset) === "number" ? { right: `${mappedColumns[colIdx].stickyOffset}px` } : {})
-			}), (0, import_jsx_runtime.jsx)(CellContent, {
-				hasRowHeight: rowHeight !== DEFAULT_ROW_HEIGHT,
-				children: cell.render("Cell", {
-					colIdx,
-					currentEditCell,
-					rowIdx: index
-				})
-			}));
-		}));
+		}), `row-${index}`);
 	}, arePropsEqual);
 	//#endregion
 	//#region ../ui-components/dist/table/table.js
@@ -47468,7 +47338,7 @@
 
         position: sticky;
         z-index: 5;
-        inset: calc(2.5rem - 2px) 0 0 0;
+        inset: calc(2.5rem - 2px) 0 0;
 
         display: block;
 
@@ -47601,8 +47471,8 @@
 		for (let i = 0; i < len; i++) {
 			const aa = a[i];
 			const bb = b[i];
-			const an = parseInt(aa);
-			const bn = parseInt(bb);
+			const an = parseInt(aa, 10);
+			const bn = parseInt(bb, 10);
 			const aIsNaN = Number.isNaN(an);
 			const bIsNaN = Number.isNaN(bn);
 			if (aIsNaN && bIsNaN) {
@@ -47650,11 +47520,11 @@
 	var appendStickyOffsets = (columns) => {
 		let leftOffset = 0;
 		let rightOffset = 0;
-		const rightStickyColumnWidths = columns.filter((col) => col.sticky === "right").slice(1).map((col) => parseInt(col.width) || 150);
+		const rightStickyColumnWidths = columns.filter((col) => col.sticky === "right").slice(1).map((col) => parseInt(col.width, 10) || 150);
 		return columns.map((col) => {
 			if (col.sticky === "left") {
 				const nextCol = Object.assign(Object.assign({}, col), { stickyOffset: leftOffset });
-				const width = parseInt(col.width) || 150;
+				const width = parseInt(col.width, 10) || 150;
 				leftOffset += width;
 				return nextCol;
 			}
@@ -47778,7 +47648,7 @@
 			return appendStickyOffsets(appendFilterComponents(orderStickyCols(processedColumns)));
 		}, [columns, actions]);
 		const hasFixedColumns = (0, react.useMemo)(() => mappedColumns.some((column) => "sticky" in column), [mappedColumns]);
-		const totalColumnsWidth = (0, react.useMemo)(() => mappedColumns.reduce((acc, column) => acc + (parseInt(column.width) || 150), 0), [mappedColumns]);
+		const totalColumnsWidth = (0, react.useMemo)(() => mappedColumns.reduce((acc, column) => acc + (parseInt(column.width, 10) || 150), 0), [mappedColumns]);
 		const filterTypes = (0, react.useMemo)(() => ({
 			categorical,
 			datetime: datetime$2,
@@ -47786,7 +47656,7 @@
 		}), []);
 		const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, state: { sortBy, filters }, setAllFilters, resetResizing, allColumns } = (0, import_react_table.useTable)({
 			columns: mappedColumns,
-			data: data || infiniteData,
+			data: data !== null && data !== void 0 ? data : infiniteData,
 			filterTypes,
 			sortTypes: { alphanumeric: caseInsensitiveAlphanumeric },
 			initialState: { sortBy: currentSortBy.map((sort) => Object.assign(Object.assign({}, sort), { id: mappedColumns.find((col) => [col.sortKey, col.accessor].includes(sort.id)).accessor })) },
@@ -47812,53 +47682,56 @@
 			var { children, style: tableStyle } = _a, rest = __rest$1(_a, ["children", "style"]);
 			return (0, import_jsx_runtime.jsxs)("div", { children: [(0, import_jsx_runtime.jsx)(Header, {
 				style: { width: `max(${totalColumnsWidth}px, 100%)` },
-				children: headerGroups.map((headerGroup, gidx) => (0, react.createElement)(HeaderRow, Object.assign({}, headerGroup.getHeaderGroupProps(), { key: `group-${gidx}` }), headerGroup.headers.map((col, cidx) => {
-					const headerProps = col.getHeaderProps();
-					const sortProps = col.getSortByToggleProps();
-					const headerContent = col.render("Header");
-					const resizerProps = col.getResizerProps();
-					const numVisibleColumns = allColumns.filter((column) => column.isVisible).length;
-					const showSort = !col.disableSortBy;
-					const showFilter = col.canFilter && col.filter;
-					const showOptions = cidx === numVisibleColumns - 1 && showTableOptions;
-					const showHeaderCellButtonContainer = showSort || showFilter || showOptions;
-					return (0, react.createElement)(HeaderCell, Object.assign({}, headerProps, {
-						key: `col-${gidx}-${cidx}`,
-						style: Object.assign(Object.assign(Object.assign(Object.assign({}, headerProps.style), {
-							maxWidth: col.maxWidth,
-							width: headerProps.style.width === "NaNpx" ? mappedColumns[cidx].width : headerProps.style.width
-						}), col.sticky === "left" && typeof col.stickyOffset === "number" ? { left: `${col.stickyOffset}px` } : {}), col.sticky === "right" && typeof col.stickyOffset === "number" ? { right: `${col.stickyOffset}px` } : {})
-					}), (0, import_jsx_runtime.jsxs)(HeaderTooltipContainer, {
-						isPrimitiveHeader: typeof headerContent === "string",
-						children: [(0, import_jsx_runtime.jsx)(HeaderContentWrapper, Object.assign({}, sortProps, {
-							isPrimitiveHeader: typeof headerContent === "string",
-							title: typeof headerContent === "string" ? headerContent : "",
-							children: headerContent
-						})), col.tooltip && (0, import_jsx_runtime.jsx)(Tooltip, {
-							content: col.tooltip,
-							children: (0, import_jsx_runtime.jsx)(TooltipIcon, { icon: faCircleQuestion })
-						})]
-					}), showHeaderCellButtonContainer && (0, import_jsx_runtime.jsxs)(HeaderCellButtonContainer, { children: [(0, import_jsx_runtime.jsxs)(HeaderIconsWrapper, { children: [
-						showSort && (0, import_jsx_runtime.jsx)(HeaderIconWrapper, { children: (0, import_jsx_runtime.jsx)(SortIcon, Object.assign({}, sortProps, {
-							className: "tableSortArrow",
-							icon: getSortIcon(col.isSorted, col.isSortedDesc),
-							isSorted: col.isSorted
-						})) }),
-						showFilter ? (0, import_jsx_runtime.jsx)(FilterContainer, { col }) : null,
-						showOptions && (0, import_jsx_runtime.jsx)(OptionsMenu, {
-							allColumns,
-							allowColumnHiding: allowHiding,
-							numVisibleColumns,
-							resetResizing,
-							setAllFilters,
-							style: tableOptionsStyle
-						})
-					] }), (0, import_jsx_runtime.jsx)(ResizeBorder, Object.assign({}, resizerProps))] }));
-				})))
-			}), (0, react.createElement)("div", Object.assign({}, tableProps, rest, {
-				key: "table-body-inner",
-				style: tableStyle
-			}), children)] }, "table-inner");
+				children: headerGroups.map((headerGroup) => {
+					const _a = headerGroup.getHeaderGroupProps(), { key: headerGroupKey } = _a, headerGroupProps = __rest$1(_a, ["key"]);
+					return (0, import_jsx_runtime.jsx)(HeaderRow, Object.assign({}, headerGroupProps, { children: headerGroup.headers.map((col, cidx) => {
+						const _a = col.getHeaderProps(), { key: headerCellKey } = _a, headerProps = __rest$1(_a, ["key"]);
+						const sortProps = col.getSortByToggleProps();
+						const headerContent = col.render("Header");
+						const resizerProps = col.getResizerProps();
+						const numVisibleColumns = allColumns.filter((column) => column.isVisible).length;
+						const showSort = !col.disableSortBy;
+						const showFilter = col.canFilter && col.filter;
+						const showOptions = cidx === numVisibleColumns - 1 && showTableOptions;
+						const showHeaderCellButtonContainer = Boolean(showSort) || Boolean(showFilter) || Boolean(showOptions);
+						return (0, import_jsx_runtime.jsxs)(HeaderCell, Object.assign({}, headerProps, {
+							style: Object.assign(Object.assign(Object.assign(Object.assign({}, headerProps.style), {
+								maxWidth: col.maxWidth,
+								width: headerProps.style.width === "NaNpx" ? mappedColumns[cidx].width : headerProps.style.width
+							}), col.sticky === "left" && typeof col.stickyOffset === "number" ? { left: `${col.stickyOffset}px` } : {}), col.sticky === "right" && typeof col.stickyOffset === "number" ? { right: `${col.stickyOffset}px` } : {}),
+							children: [(0, import_jsx_runtime.jsxs)(HeaderTooltipContainer, {
+								isPrimitiveHeader: typeof headerContent === "string",
+								children: [(0, import_jsx_runtime.jsx)(HeaderContentWrapper, Object.assign({}, sortProps, {
+									isPrimitiveHeader: typeof headerContent === "string",
+									title: typeof headerContent === "string" ? headerContent : "",
+									children: headerContent
+								})), col.tooltip && (0, import_jsx_runtime.jsx)(Tooltip, {
+									content: col.tooltip,
+									children: (0, import_jsx_runtime.jsx)(TooltipIcon, { icon: faCircleQuestion })
+								})]
+							}), showHeaderCellButtonContainer && (0, import_jsx_runtime.jsxs)(HeaderCellButtonContainer, { children: [(0, import_jsx_runtime.jsxs)(HeaderIconsWrapper, { children: [
+								showSort && (0, import_jsx_runtime.jsx)(HeaderIconWrapper, { children: (0, import_jsx_runtime.jsx)(SortIcon, Object.assign({}, sortProps, {
+									className: "tableSortArrow",
+									icon: getSortIcon(col.isSorted, col.isSortedDesc),
+									isSorted: col.isSorted
+								})) }),
+								showFilter ? (0, import_jsx_runtime.jsx)(FilterContainer, { col }) : null,
+								showOptions && (0, import_jsx_runtime.jsx)(OptionsMenu, {
+									allColumns,
+									allowColumnHiding: allowHiding,
+									numVisibleColumns,
+									resetResizing,
+									setAllFilters,
+									style: tableOptionsStyle
+								})
+							] }), (0, import_jsx_runtime.jsx)(ResizeBorder, Object.assign({}, resizerProps))] })]
+						}), headerCellKey);
+					}) }), headerGroupKey);
+				})
+			}), (0, import_jsx_runtime.jsx)("div", Object.assign({}, tableProps, rest, {
+				style: tableStyle,
+				children
+			}), "table-body-inner")] }, "table-inner");
 		}, useDeepCompare([
 			tableProps,
 			totalColumnsWidth,
@@ -47872,7 +47745,7 @@
 				return (0, import_jsx_runtime.jsx)(StyledFixedSizeList, {
 					height,
 					innerElementType: renderTable,
-					itemCount: itemCount || rows.length,
+					itemCount: itemCount !== null && itemCount !== void 0 ? itemCount : rows.length,
 					itemData: createItemData$1(width, currentEditCell, headerGroups, rows, prepareRow, getItem, totalColumnsWidth, onClickRow, throttledClickRow, backgroundColor, mappedColumns, tableRowHeight, rowDataIdColumn),
 					itemSize: tableRowHeight,
 					onItemsRendered,
@@ -47925,7 +47798,6 @@
     flex-shrink: 0;
 
     width: 100%;
-
     border-radius: 1rem 1rem 0 0;
 `;
 	var TabComponent = dist_default.span`
@@ -47940,11 +47812,11 @@
 
     box-sizing: border-box;
     height: 2.5rem;
+    border-bottom: ${(props) => props.selected ? `2px solid ${props.theme.colors.primary}` : `1px solid ${props.theme.colors.grey3}`};
 
     color: ${(props) => props.selected ? props.theme.colors.primary : props.theme.colors.grey3};
 
     background-color: ${(props) => props.theme.colors.blue1};
-    border-bottom: ${(props) => props.selected ? `2px solid ${props.theme.colors.primary}` : `1px solid ${props.theme.colors.grey3}`};
 
     :hover {
         color: ${(props) => props.selected ? props.theme.colors.primary : props.theme.colors.text};
@@ -48046,6 +47918,12 @@
 		const end = source.endsWith("$") ? source.length - 1 : source.length;
 		return source.slice(start, end);
 	}
+	function floatSafeRemainder(val, step) {
+		const valDecCount = (val.toString().split(".")[1] || "").length;
+		const stepDecCount = (step.toString().split(".")[1] || "").length;
+		const decCount = valDecCount > stepDecCount ? valDecCount : stepDecCount;
+		return Number.parseInt(val.toFixed(decCount).replace(".", "")) % Number.parseInt(step.toFixed(decCount).replace(".", "")) / 10 ** decCount;
+	}
 	function defineLazy(object, key, getter) {
 		Object.defineProperty(object, key, {
 			get() {
@@ -48460,7 +48338,10 @@
 		const regex = params ? `[\\s\\S]{${params?.minimum ?? 0},${params?.maximum ?? ""}}` : `[\\s\\S]*`;
 		return new RegExp(`^${regex}$`);
 	};
+	var integer = /^\d+$/;
+	var number$3 = /^-?\d+(?:\.\d+)?/i;
 	var boolean$1 = /true|false/i;
+	var _null$2 = /null/i;
 	var lowercase = /^[^A-Z]*$/;
 	var uppercase = /^[^a-z]*$/;
 	//#endregion
@@ -48471,6 +48352,140 @@
 		inst._zod.def = def;
 		(_a = inst._zod).onattach ?? (_a.onattach = []);
 	});
+	var numericOriginMap = {
+		number: "number",
+		bigint: "bigint",
+		object: "date"
+	};
+	var $ZodCheckLessThan = /*@__PURE__*/ $constructor("$ZodCheckLessThan", (inst, def) => {
+		$ZodCheck.init(inst, def);
+		const origin = numericOriginMap[typeof def.value];
+		inst._zod.onattach.push((inst) => {
+			const bag = inst._zod.bag;
+			const curr = (def.inclusive ? bag.maximum : bag.exclusiveMaximum) ?? Number.POSITIVE_INFINITY;
+			if (def.value < curr) if (def.inclusive) bag.maximum = def.value;
+			else bag.exclusiveMaximum = def.value;
+		});
+		inst._zod.check = (payload) => {
+			if (def.inclusive ? payload.value <= def.value : payload.value < def.value) return;
+			payload.issues.push({
+				origin,
+				code: "too_big",
+				maximum: def.value,
+				input: payload.value,
+				inclusive: def.inclusive,
+				inst,
+				continue: !def.abort
+			});
+		};
+	});
+	var $ZodCheckGreaterThan = /*@__PURE__*/ $constructor("$ZodCheckGreaterThan", (inst, def) => {
+		$ZodCheck.init(inst, def);
+		const origin = numericOriginMap[typeof def.value];
+		inst._zod.onattach.push((inst) => {
+			const bag = inst._zod.bag;
+			const curr = (def.inclusive ? bag.minimum : bag.exclusiveMinimum) ?? Number.NEGATIVE_INFINITY;
+			if (def.value > curr) if (def.inclusive) bag.minimum = def.value;
+			else bag.exclusiveMinimum = def.value;
+		});
+		inst._zod.check = (payload) => {
+			if (def.inclusive ? payload.value >= def.value : payload.value > def.value) return;
+			payload.issues.push({
+				origin,
+				code: "too_small",
+				minimum: def.value,
+				input: payload.value,
+				inclusive: def.inclusive,
+				inst,
+				continue: !def.abort
+			});
+		};
+	});
+	var $ZodCheckMultipleOf = /*@__PURE__*/ $constructor("$ZodCheckMultipleOf", (inst, def) => {
+		$ZodCheck.init(inst, def);
+		inst._zod.onattach.push((inst) => {
+			var _a;
+			(_a = inst._zod.bag).multipleOf ?? (_a.multipleOf = def.value);
+		});
+		inst._zod.check = (payload) => {
+			if (typeof payload.value !== typeof def.value) throw new Error("Cannot mix number and bigint in multiple_of check.");
+			if (typeof payload.value === "bigint" ? payload.value % def.value === BigInt(0) : floatSafeRemainder(payload.value, def.value) === 0) return;
+			payload.issues.push({
+				origin: typeof payload.value,
+				code: "not_multiple_of",
+				divisor: def.value,
+				input: payload.value,
+				inst,
+				continue: !def.abort
+			});
+		};
+	});
+	var $ZodCheckNumberFormat = /*@__PURE__*/ $constructor("$ZodCheckNumberFormat", (inst, def) => {
+		$ZodCheck.init(inst, def);
+		def.format = def.format || "float64";
+		const isInt = def.format?.includes("int");
+		const origin = isInt ? "int" : "number";
+		const [minimum, maximum] = NUMBER_FORMAT_RANGES[def.format];
+		inst._zod.onattach.push((inst) => {
+			const bag = inst._zod.bag;
+			bag.format = def.format;
+			bag.minimum = minimum;
+			bag.maximum = maximum;
+			if (isInt) bag.pattern = integer;
+		});
+		inst._zod.check = (payload) => {
+			const input = payload.value;
+			if (isInt) {
+				if (!Number.isInteger(input)) {
+					payload.issues.push({
+						expected: origin,
+						format: def.format,
+						code: "invalid_type",
+						input,
+						inst
+					});
+					return;
+				}
+				if (!Number.isSafeInteger(input)) {
+					if (input > 0) payload.issues.push({
+						input,
+						code: "too_big",
+						maximum: Number.MAX_SAFE_INTEGER,
+						note: "Integers must be within the safe integer range.",
+						inst,
+						origin,
+						continue: !def.abort
+					});
+					else payload.issues.push({
+						input,
+						code: "too_small",
+						minimum: Number.MIN_SAFE_INTEGER,
+						note: "Integers must be within the safe integer range.",
+						inst,
+						origin,
+						continue: !def.abort
+					});
+					return;
+				}
+			}
+			if (input < minimum) payload.issues.push({
+				origin: "number",
+				input,
+				code: "too_small",
+				minimum,
+				inclusive: true,
+				inst,
+				continue: !def.abort
+			});
+			if (input > maximum) payload.issues.push({
+				origin: "number",
+				input,
+				code: "too_big",
+				maximum,
+				inst
+			});
+		};
+	});
 	var $ZodCheckMaxLength = /*@__PURE__*/ $constructor("$ZodCheckMaxLength", (inst, def) => {
 		var _a;
 		$ZodCheck.init(inst, def);
@@ -49055,6 +49070,30 @@
 			});
 		};
 	});
+	var $ZodNumber = /*@__PURE__*/ $constructor("$ZodNumber", (inst, def) => {
+		$ZodType.init(inst, def);
+		inst._zod.pattern = inst._zod.bag.pattern ?? number$3;
+		inst._zod.parse = (payload, _ctx) => {
+			if (def.coerce) try {
+				payload.value = Number(payload.value);
+			} catch (_) {}
+			const input = payload.value;
+			if (typeof input === "number" && !Number.isNaN(input) && Number.isFinite(input)) return payload;
+			const received = typeof input === "number" ? Number.isNaN(input) ? "NaN" : !Number.isFinite(input) ? "Infinity" : void 0 : void 0;
+			payload.issues.push({
+				expected: "number",
+				code: "invalid_type",
+				input,
+				inst,
+				...received ? { received } : {}
+			});
+			return payload;
+		};
+	});
+	var $ZodNumberFormat = /*@__PURE__*/ $constructor("$ZodNumber", (inst, def) => {
+		$ZodCheckNumberFormat.init(inst, def);
+		$ZodNumber.init(inst, def);
+	});
 	var $ZodBoolean = /*@__PURE__*/ $constructor("$ZodBoolean", (inst, def) => {
 		$ZodType.init(inst, def);
 		inst._zod.pattern = boolean$1;
@@ -49073,6 +49112,22 @@
 			return payload;
 		};
 	});
+	var $ZodNull = /*@__PURE__*/ $constructor("$ZodNull", (inst, def) => {
+		$ZodType.init(inst, def);
+		inst._zod.pattern = _null$2;
+		inst._zod.values = /* @__PURE__ */ new Set([null]);
+		inst._zod.parse = (payload, _ctx) => {
+			const input = payload.value;
+			if (input === null) return payload;
+			payload.issues.push({
+				expected: "null",
+				code: "invalid_type",
+				input,
+				inst
+			});
+			return payload;
+		};
+	});
 	var $ZodAny = /*@__PURE__*/ $constructor("$ZodAny", (inst, def) => {
 		$ZodType.init(inst, def);
 		inst._zod.parse = (payload) => payload;
@@ -50062,12 +50117,34 @@
 			...normalizeParams(params)
 		});
 	}
+	function _number(Class, params) {
+		return new Class({
+			type: "number",
+			checks: [],
+			...normalizeParams(params)
+		});
+	}
+	function _int(Class, params) {
+		return new Class({
+			type: "number",
+			check: "number_format",
+			abort: false,
+			format: "safeint",
+			...normalizeParams(params)
+		});
+	}
 	function _boolean(Class, params) {
 		return new Class({
 			type: "boolean",
 			...normalizeParams(params)
 		});
 	}
+	function _null$1(Class, params) {
+		return new Class({
+			type: "null",
+			...normalizeParams(params)
+		});
+	}
 	function _any(Class) {
 		return new Class({ type: "any" });
 	}
@@ -50080,6 +50157,45 @@
 			...normalizeParams(params)
 		});
 	}
+	function _lt(value, params) {
+		return new $ZodCheckLessThan({
+			check: "less_than",
+			...normalizeParams(params),
+			value,
+			inclusive: false
+		});
+	}
+	function _lte(value, params) {
+		return new $ZodCheckLessThan({
+			check: "less_than",
+			...normalizeParams(params),
+			value,
+			inclusive: true
+		});
+	}
+	function _gt(value, params) {
+		return new $ZodCheckGreaterThan({
+			check: "greater_than",
+			...normalizeParams(params),
+			value,
+			inclusive: false
+		});
+	}
+	function _gte(value, params) {
+		return new $ZodCheckGreaterThan({
+			check: "greater_than",
+			...normalizeParams(params),
+			value,
+			inclusive: true
+		});
+	}
+	function _multipleOf(value, params) {
+		return new $ZodCheckMultipleOf({
+			check: "multiple_of",
+			...normalizeParams(params),
+			value
+		});
+	}
 	function _maxLength(maximum, params) {
 		return new $ZodCheckMaxLength({
 			check: "max_length",
@@ -50172,6 +50288,16 @@
 			...normalizeParams(params)
 		});
 	}
+	function _custom(Class, fn, _params) {
+		const norm = normalizeParams(_params);
+		norm.abort ?? (norm.abort = true);
+		return new Class({
+			type: "custom",
+			check: "custom",
+			fn,
+			...norm
+		});
+	}
 	function _refine(Class, fn, _params) {
 		return new Class({
 			type: "custom",
@@ -50434,6 +50560,41 @@
 		$ZodJWT.init(inst, def);
 		ZodStringFormat.init(inst, def);
 	});
+	var ZodNumber = /*@__PURE__*/ $constructor("ZodNumber", (inst, def) => {
+		$ZodNumber.init(inst, def);
+		ZodType.init(inst, def);
+		inst.gt = (value, params) => inst.check(_gt(value, params));
+		inst.gte = (value, params) => inst.check(_gte(value, params));
+		inst.min = (value, params) => inst.check(_gte(value, params));
+		inst.lt = (value, params) => inst.check(_lt(value, params));
+		inst.lte = (value, params) => inst.check(_lte(value, params));
+		inst.max = (value, params) => inst.check(_lte(value, params));
+		inst.int = (params) => inst.check(int(params));
+		inst.safe = (params) => inst.check(int(params));
+		inst.positive = (params) => inst.check(_gt(0, params));
+		inst.nonnegative = (params) => inst.check(_gte(0, params));
+		inst.negative = (params) => inst.check(_lt(0, params));
+		inst.nonpositive = (params) => inst.check(_lte(0, params));
+		inst.multipleOf = (value, params) => inst.check(_multipleOf(value, params));
+		inst.step = (value, params) => inst.check(_multipleOf(value, params));
+		inst.finite = () => inst;
+		const bag = inst._zod.bag;
+		inst.minValue = Math.max(bag.minimum ?? Number.NEGATIVE_INFINITY, bag.exclusiveMinimum ?? Number.NEGATIVE_INFINITY) ?? null;
+		inst.maxValue = Math.min(bag.maximum ?? Number.POSITIVE_INFINITY, bag.exclusiveMaximum ?? Number.POSITIVE_INFINITY) ?? null;
+		inst.isInt = (bag.format ?? "").includes("int") || Number.isSafeInteger(bag.multipleOf ?? .5);
+		inst.isFinite = true;
+		inst.format = bag.format ?? null;
+	});
+	function number$4(params) {
+		return _number(ZodNumber, params);
+	}
+	var ZodNumberFormat = /*@__PURE__*/ $constructor("ZodNumberFormat", (inst, def) => {
+		$ZodNumberFormat.init(inst, def);
+		ZodNumber.init(inst, def);
+	});
+	function int(params) {
+		return _int(ZodNumberFormat, params);
+	}
 	var ZodBoolean = /*@__PURE__*/ $constructor("ZodBoolean", (inst, def) => {
 		$ZodBoolean.init(inst, def);
 		ZodType.init(inst, def);
@@ -50441,6 +50602,13 @@
 	function boolean(params) {
 		return _boolean(ZodBoolean, params);
 	}
+	var ZodNull = /*@__PURE__*/ $constructor("ZodNull", (inst, def) => {
+		$ZodNull.init(inst, def);
+		ZodType.init(inst, def);
+	});
+	function _null(params) {
+		return _null$1(ZodNull, params);
+	}
 	var ZodAny = /*@__PURE__*/ $constructor("ZodAny", (inst, def) => {
 		$ZodAny.init(inst, def);
 		ZodType.init(inst, def);
@@ -50770,6 +50938,9 @@
 		ch._zod.check = fn;
 		return ch;
 	}
+	function custom$4(fn, _params) {
+		return _custom(ZodCustom, fn ?? (() => true), _params);
+	}
 	function refine(fn, _params = {}) {
 		return _refine(ZodCustom, fn, _params);
 	}
@@ -51522,6 +51693,17 @@
 	//#endregion
 	//#region js/api/http.tsx
 	var import_cloneDeep = /* @__PURE__ */ __toESM(require_cloneDeep(), 1);
+	var signalIds = /* @__PURE__ */ new WeakMap();
+	var nextSignalId = 1;
+	function getSignalId(signal) {
+		let id = signalIds.get(signal);
+		if (id === void 0) {
+			id = nextSignalId;
+			nextSignalId += 1;
+			signalIds.set(signal, id);
+		}
+		return id;
+	}
 	/**
 	* Serializable form of RequestExtras.
 	* Required to use for e.g. recoil params as they need to be serializable.
@@ -51550,6 +51732,10 @@
 		toJSON() {
 			const serializable = this.toSerializable();
 			if (!serializable) return null;
+			if (this.extras.signal) return JSON.stringify({
+				...serializable,
+				signal: getSignalId(this.extras.signal)
+			});
 			return JSON.stringify(serializable);
 		}
 	};
@@ -52678,12 +52864,12 @@
     width: 22rem;
     height: ${(props) => props.hasTitle ? "5.625rem" : "4.375rem"};
     padding: 1rem;
+    border: 1px solid ${(props) => getStatusColor(props.status, props.theme.colors)};
+    border-radius: 0.25rem;
 
     color: ${(props) => getStatusColor(props.status, props.theme.colors)};
 
     background-color: ${(props) => mix$1(.1, getStatusColor(props.status, props.theme.colors), props.theme.colors.background)};
-    border: 1px solid ${(props) => getStatusColor(props.status, props.theme.colors)};
-    border-radius: 0.25rem;
     box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
 `;
 	var Message = dist_default.div`
@@ -52699,23 +52885,21 @@
     overflow: hidden;
     display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
     -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
 
     font-size: 1rem;
     font-weight: 700;
     text-overflow: ellipsis;
-
-    -webkit-line-clamp: 1;
 `;
 	var Body = dist_default.span`
     overflow: hidden;
     display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
     -webkit-box-orient: vertical;
+    -webkit-line-clamp: ${(props) => props.moreDetailsShown ? 1 : 2};
 
     font-weight: 400;
     line-height: 1.25rem;
     text-overflow: ellipsis;
-
-    -webkit-line-clamp: ${(props) => props.moreDetailsShown ? 1 : 2};
 `;
 	var Icon$1 = dist_default.div`
     display: flex;
@@ -52732,11 +52916,11 @@
     display: flex;
 
     padding-left: 0;
+    border: none;
 
     color: ${() => theme.colors.grey4};
 
     background: transparent;
-    border: none;
 
     :hover {
         text-decoration: underline;
@@ -68607,29 +68791,159 @@
 			this.task_id = task_id;
 		}
 	};
+	var initMessageSchema = object$4({
+		message: object$4({ channel: string$4() }),
+		type: literal$4("init")
+	});
+	var pingPongMessageSchema = object$4({
+		message: _null(),
+		type: union$4([literal$4("ping"), literal$4("pong")])
+	});
+	var taskNotificationContentSchema = discriminatedUnion("status", [
+		object$4({
+			status: literal$4("COMPLETE"),
+			task_id: string$4()
+		}).passthrough(),
+		object$4({
+			status: literal$4("ERROR"),
+			task_id: string$4(),
+			error: string$4()
+		}).passthrough(),
+		object$4({
+			status: literal$4("PROGRESS"),
+			task_id: string$4(),
+			progress: number$4(),
+			message: string$4()
+		}).passthrough(),
+		object$4({
+			status: literal$4("CANCELED"),
+			task_id: string$4()
+		}).passthrough()
+	]);
+	var taskNotificationMessageSchema = object$4({
+		__typename: literal$4("TaskNotificationMessage"),
+		message: taskNotificationContentSchema,
+		type: literal$4("message")
+	});
+	var serverErrorMessageSchema = object$4({
+		__typename: literal$4("ServerErrorMessage"),
+		message: object$4({
+			error: string$4(),
+			time: string$4()
+		}),
+		type: literal$4("message")
+	});
+	var variableRequestMessageSchema = object$4({
+		__typename: literal$4("VariableRequestMessage"),
+		message: object$4({
+			/** Channel to send in the response */
+			__rchan: string$4(),
+			variable: custom$4()
+		}),
+		type: literal$4("message")
+	});
+	var actionMessageSchema = object$4({
+		__typename: literal$4("ActionMessage"),
+		message: object$4({
+			/**
+			* Action implementation instance
+			*/
+			action: custom$4().nullable(),
+			/**
+			* Execution uid
+			*/
+			uid: string$4()
+		}),
+		type: literal$4("message")
+	});
+	var backendStoreMessageSchema = object$4({
+		__typename: literal$4("BackendStoreMessage"),
+		message: object$4({
+			store_uid: string$4(),
+			value: any(),
+			sequence_number: number$4()
+		}),
+		type: literal$4("message")
+	});
+	var backendStorePatchMessageSchema = object$4({
+		__typename: literal$4("BackendStorePatchMessage"),
+		message: object$4({
+			store_uid: string$4(),
+			patches: array$4(object$4({
+				op: union$4([
+					literal$4("add"),
+					literal$4("remove"),
+					literal$4("replace"),
+					literal$4("move"),
+					literal$4("copy"),
+					literal$4("test")
+				]),
+				path: string$4(),
+				value: any().optional(),
+				from: string$4().optional()
+			})),
+			sequence_number: number$4()
+		}),
+		type: literal$4("message")
+	});
+	var serverVariableMessageSchema = object$4({
+		__typename: literal$4("ServerVariableMessage"),
+		message: object$4({
+			__type: literal$4("ServerVariable"),
+			uid: string$4(),
+			sequence_number: number$4()
+		}),
+		type: literal$4("message")
+	});
+	var customMessageSchema = object$4({
+		message: object$4({
+			data: any(),
+			kind: string$4(),
+			/** Optional ID, returned from server custom messages coming as a response for a custom client message */
+			__response_for: string$4().optional(),
+			/** Optional ID, should be included as `__response_for` when the server responds to this message */
+			__rchan: string$4().optional()
+		}),
+		type: literal$4("custom")
+	});
+	var firstPartyServerMessageSchema = discriminatedUnion("__typename", [
+		taskNotificationMessageSchema,
+		serverErrorMessageSchema,
+		variableRequestMessageSchema,
+		actionMessageSchema,
+		backendStoreMessageSchema,
+		backendStorePatchMessageSchema,
+		serverVariableMessageSchema
+	]);
+	var webSocketMessageSchema = union$4([
+		initMessageSchema,
+		pingPongMessageSchema,
+		firstPartyServerMessageSchema,
+		customMessageSchema
+	]);
 	function isInitMessage(message) {
 		return message.type === "init";
 	}
 	function isTaskNotification(message) {
-		return message.type === "message" && "status" in message.message && "task_id" in message.message;
+		return message.type === "message" && message.__typename === "TaskNotificationMessage";
 	}
 	function isServerVariableMessage(message) {
-		return message.type === "message" && "__type" in message.message && message.message.__type === "ServerVariable";
+		return message.type === "message" && message.__typename === "ServerVariableMessage";
 	}
 	function isServerErrorMessage(message) {
-		return message.type === "message" && "error" in message.message;
+		return message.type === "message" && message.__typename === "ServerErrorMessage";
 	}
 	function isVariableRequestMessage(message) {
-		return message.type === "message" && "variable" in message.message;
+		return message.type === "message" && message.__typename === "VariableRequestMessage";
 	}
 	function isActionMessage(message) {
-		return message.type === "message" && "action" in message.message;
+		return message.type === "message" && message.__typename === "ActionMessage";
 	}
 	function isBackendStoreMessage(message) {
-		return message.type === "message" && "store_uid" in message.message && "value" in message.message;
+		return message.type === "message" && message.__typename === "BackendStoreMessage";
 	}
 	function isBackendStorePatchMessage(message) {
-		return message.type === "message" && "store_uid" in message.message && "patches" in message.message;
+		return message.type === "message" && message.__typename === "BackendStorePatchMessage";
 	}
 	function isCustomMessage(message) {
 		return message.type === "custom";
@@ -69415,11 +69729,611 @@
 		return identifier;
 	}
 	//#endregion
+	//#region js/shared/interactivity/polling.tsx
+	var DEFAULT_JITTER_RATIO = .1;
+	var MAX_BACKOFF_MS = 6e4;
+	var POLL_FORCE_KEY_PREFIX = "__dara_poll__:";
+	var retryAfterByError = /* @__PURE__ */ new WeakMap();
+	/** Throw an AbortError when an old run attempts to publish a result. */
+	function assertCurrentRun(handle) {
+		if (!handle.isCurrent() || handle.signal.aborted) throw new DOMException("The request was superseded", "AbortError");
+	}
+	/** Check whether an error represents intentional request cancellation. */
+	function isAbortError(error) {
+		return error instanceof DOMException && error.name === "AbortError" || typeof error === "object" && error !== null && "name" in error && error.name === "AbortError";
+	}
+	/** Read Retry-After saved at the HTTP response seam. */
+	function getRetryAfterMs(error) {
+		return typeof error === "object" && error !== null ? retryAfterByError.get(error) : void 0;
+	}
+	/**
+	* Coordinates non-overlapping, fixed-delay polling for request identities.
+	*
+	* A request identity includes the rendered variable/component identity and its
+	* serialized request extras. Multiple React consumers of the same identity
+	* share one timer and one active request generation.
+	*/
+	var Poller = class {
+		#clearTimeout;
+		#entries = /* @__PURE__ */ new Map();
+		#getVisibilityState;
+		#jitterRatio;
+		#now;
+		#random;
+		#setTimeout;
+		#visibilityTarget;
+		#owners = /* @__PURE__ */ new Map();
+		#listeningForVisibility = false;
+		constructor(options = {}) {
+			this.#clearTimeout = options.clearTimeout ?? ((timer) => clearTimeout(timer));
+			this.#getVisibilityState = options.getVisibilityState ?? (() => typeof document === "undefined" ? "visible" : document.visibilityState);
+			this.#jitterRatio = options.jitterRatio ?? DEFAULT_JITTER_RATIO;
+			this.#now = options.now ?? (() => Date.now());
+			this.#random = options.random ?? (() => Math.random());
+			this.#setTimeout = options.setTimeout ?? ((callback, delay) => setTimeout(callback, delay));
+			this.#visibilityTarget = options.visibilityTarget ?? (typeof document === "undefined" ? void 0 : document);
+		}
+		/**
+		* Register one rendered polling consumer.
+		*
+		* The returned cleanup releases the consumer. The final cleanup aborts the
+		* owned request on the next macrotask so React StrictMode can immediately
+		* reacquire the same identity without cancelling useful work.
+		*/
+		subscribe(key, intervalSeconds, refresh) {
+			const intervalMs = (intervalSeconds ?? 0) * 1e3;
+			if (!Number.isFinite(intervalMs) || !(intervalMs > 0)) return () => {};
+			const entry = this.#getOrCreateEntry(key);
+			const oldIntervalMs = entry.subscribers.size > 0 ? this.#getIntervalMs(entry) : void 0;
+			if (entry.disposeTimer !== void 0) {
+				this.#clearTimeout(entry.disposeTimer);
+				entry.disposeTimer = void 0;
+			}
+			const subscriberId = Symbol(key);
+			entry.subscribers.set(subscriberId, {
+				intervalMs,
+				refresh
+			});
+			this.#startVisibilityListener();
+			if (entry.subscribers.size === 1 && entry.state.kind === "idle" && entry.timer === void 0) this.#schedulePoll(key, entry);
+			else if (entry.timer !== void 0 && entry.failureCount === 0 && oldIntervalMs !== void 0 && intervalMs < oldIntervalMs) {
+				const remaining = Math.max(0, (entry.nextRunAt ?? this.#now()) - this.#now());
+				this.#schedule(key, entry, Math.min(remaining, this.#withJitter(intervalMs)));
+			}
+			return () => {
+				const removedIntervalMs = this.#getIntervalMs(entry);
+				entry.subscribers.delete(subscriberId);
+				if (entry.subscribers.size > 0) {
+					if (entry.timer !== void 0 && entry.failureCount === 0 && this.#getIntervalMs(entry) > removedIntervalMs) this.#schedulePoll(key, entry);
+					return;
+				}
+				this.#clearTimer(entry);
+				entry.disposeTimer = this.#setTimeout(() => {
+					entry.disposeTimer = void 0;
+					if (entry.subscribers.size > 0) return;
+					if (entry.owners.size > 0) return;
+					if (this.#entries.get(key) !== entry) return;
+					if (entry.state.kind === "running") {
+						entry.state.run.controller.abort();
+						entry.state.run.detachExternalSignal?.();
+						entry.state.run.end();
+					}
+					this.#entries.delete(key);
+					this.#stopVisibilityListenerIfIdle();
+				}, 0);
+			};
+		}
+		/**
+		* Claim a key during render so Suspense cannot skip its ownership effect.
+		*
+		* A later owner commit prunes claims left by an abandoned render.
+		*/
+		claimKey(ownerId, hookId, key) {
+			const owner = this.#getOrCreateOwner(ownerId);
+			if (owner.hooks.get(hookId) === key) return;
+			const oldKey = owner.claims.get(hookId);
+			owner.claims.set(hookId, key);
+			this.#getOrCreateEntry(key).owners.add(ownerId);
+			if (oldKey !== void 0 && oldKey !== key && !this.#ownerHasKey(owner, oldKey)) this.#dropOwnedKey(ownerId, oldKey);
+		}
+		/** Apply the hook claims collected by one committed owner render. */
+		commitOwner(ownerId, claims) {
+			const owner = this.#getOrCreateOwner(ownerId);
+			if (owner.disposeTimer !== void 0) {
+				this.#clearTimeout(owner.disposeTimer);
+				owner.disposeTimer = void 0;
+			}
+			const droppedClaims = /* @__PURE__ */ new Set();
+			for (const [hookId, key] of owner.claims) if (claims.get(hookId) !== key) {
+				owner.claims.delete(hookId);
+				droppedClaims.add(key);
+			}
+			const nextRenderKeys = /* @__PURE__ */ new Set();
+			for (const key of new Set(claims.values())) {
+				this.#getOrCreateEntry(key).owners.add(ownerId);
+				if (!this.#hasHookForKey(owner, key) && !this.#hasClaimForKey(owner, key)) nextRenderKeys.add(key);
+			}
+			const oldRenderKeys = owner.renderKeys;
+			owner.renderKeys = nextRenderKeys;
+			for (const key of oldRenderKeys) if (!nextRenderKeys.has(key) && !this.#hasHookForKey(owner, key)) this.#dropOwnedKey(ownerId, key);
+			for (const key of droppedClaims) if (!this.#ownerHasKey(owner, key)) this.#dropOwnedKey(ownerId, key);
+		}
+		/** Keep one key after its hook commits. */
+		mountKey(ownerId, hookId, key) {
+			const owner = this.#getOrCreateOwner(ownerId);
+			if (owner.disposeTimer !== void 0) {
+				this.#clearTimeout(owner.disposeTimer);
+				owner.disposeTimer = void 0;
+			}
+			const timer = owner.timers.get(hookId);
+			if (timer !== void 0) {
+				this.#clearTimeout(timer);
+				owner.timers.delete(hookId);
+			}
+			const oldKey = owner.hooks.get(hookId);
+			owner.hooks.set(hookId, key);
+			owner.claims.delete(hookId);
+			owner.renderKeys.delete(key);
+			this.#getOrCreateEntry(key).owners.add(ownerId);
+			if (oldKey !== void 0 && oldKey !== key && !this.#ownerHasKey(owner, oldKey)) this.#dropOwnedKey(ownerId, oldKey);
+		}
+		/** Drop a committed hook key after the StrictMode remount window. */
+		unmountKey(ownerId, hookId, key) {
+			const owner = this.#owners.get(ownerId);
+			if (!owner || owner.timers.has(hookId)) return;
+			const timer = this.#setTimeout(() => {
+				owner.timers.delete(hookId);
+				if (owner.hooks.get(hookId) !== key) return;
+				owner.hooks.delete(hookId);
+				if (!this.#ownerHasKey(owner, key)) this.#dropOwnedKey(ownerId, key);
+				this.#stopVisibilityListenerIfIdle();
+			}, 0);
+			owner.timers.set(hookId, timer);
+		}
+		/** Release a rendered owner after the StrictMode remount window. */
+		releaseOwner(ownerId) {
+			const owner = this.#owners.get(ownerId);
+			if (!owner || owner.disposeTimer !== void 0) return;
+			owner.disposeTimer = this.#setTimeout(() => this.#dropOwner(ownerId, owner), 0);
+		}
+		/**
+		* Run one request for a polling identity.
+		*
+		* Matching callers share one promise. Dependency runs replace older work,
+		* while a poll that arrives during a run leaves one follow-up refresh.
+		*/
+		run({ cause, inputKey, key, read, signal, work, write }) {
+			const entry = this.#entries.get(key);
+			const running = entry?.state.kind === "running" ? entry.state.run : void 0;
+			if (running?.cause === cause && running.inputKey === inputKey && running.result) return running.result;
+			const handle = this.#start(key, cause, signal, inputKey);
+			const result = this.#runWork({
+				cause,
+				handle,
+				read,
+				work,
+				write
+			});
+			const state = this.#entries.get(key)?.state;
+			if (state?.kind === "running" && handle.isCurrent()) state.run.result = result;
+			return result;
+		}
+		#start(key, cause, externalSignal, inputKey) {
+			const entry = this.#getOrCreateEntry(key);
+			if (entry.state.kind === "running") {
+				const running = entry.state.run;
+				if (cause === "poll") {
+					entry.runAgain = true;
+					const abortedController = new AbortController();
+					abortedController.abort();
+					return {
+						signal: abortedController.signal,
+						finish: () => {},
+						isCurrent: () => false,
+						waitForNewer: () => this.#waitForNewer(key, entry.generation)
+					};
+				}
+				running.controller.abort();
+				running.detachExternalSignal?.();
+				running.end();
+			}
+			this.#clearTimer(entry);
+			const generation = ++entry.generation;
+			const controller = new AbortController();
+			let end = () => {};
+			const activeRun = {
+				cause,
+				controller,
+				done: new Promise((resolve) => {
+					end = resolve;
+				}),
+				end,
+				generation,
+				inputKey
+			};
+			entry.state = {
+				kind: "running",
+				run: activeRun
+			};
+			if (externalSignal && typeof externalSignal.addEventListener === "function") if (externalSignal.aborted) controller.abort(externalSignal.reason);
+			else {
+				const abortFromExternalSignal = () => controller.abort(externalSignal.reason);
+				externalSignal.addEventListener("abort", abortFromExternalSignal, { once: true });
+				activeRun.detachExternalSignal = () => externalSignal.removeEventListener("abort", abortFromExternalSignal);
+			}
+			return this.#createRunHandle(key, activeRun);
+		}
+		#createRunHandle(key, activeRun) {
+			let finished = false;
+			return {
+				signal: activeRun.controller.signal,
+				finish: (outcome) => {
+					if (finished) return;
+					finished = true;
+					this.#finishRun(key, activeRun.generation, outcome);
+				},
+				isCurrent: () => {
+					const state = this.#entries.get(key)?.state;
+					return state?.kind === "running" && state.run.generation === activeRun.generation;
+				},
+				waitForNewer: () => this.#waitForNewer(key, activeRun.generation)
+			};
+		}
+		async #runWork({ cause, handle, read, work, write }) {
+			let outcome = { status: "success" };
+			try {
+				assertCurrentRun(handle);
+				const value = await work(handle.signal);
+				assertCurrentRun(handle);
+				write(value);
+				return value;
+			} catch (error) {
+				outcome = isAbortError(error) ? { status: "aborted" } : {
+					status: "error",
+					retryAfterMs: getRetryAfterMs(error)
+				};
+				const previous = read?.();
+				if (isAbortError(error) && previous?.found) {
+					await handle.waitForNewer();
+					const latest = read?.();
+					return latest?.found ? latest.value : previous.value;
+				}
+				if (cause === "poll" && previous?.found) return previous.value;
+				throw error;
+			} finally {
+				handle.finish(outcome);
+			}
+		}
+		/** Refresh now, or keep one refresh while busy. */
+		runNow(key) {
+			const entry = this.#entries.get(key);
+			if (!entry || entry.subscribers.size === 0) return;
+			if (this.#getVisibilityState() === "hidden") {
+				entry.runOnShow = true;
+				return;
+			}
+			if (entry.state.kind !== "idle") {
+				entry.runAgain = true;
+				return;
+			}
+			this.#clearTimer(entry);
+			entry.state = { kind: "starting" };
+			this.#getSubscriber(entry)?.refresh();
+		}
+		/** Abort and remove every polling identity. Intended for test isolation. */
+		clear() {
+			for (const entry of this.#entries.values()) {
+				this.#clearTimer(entry);
+				if (entry.disposeTimer !== void 0) this.#clearTimeout(entry.disposeTimer);
+				if (entry.state.kind === "running") {
+					entry.state.run.controller.abort();
+					entry.state.run.detachExternalSignal?.();
+					entry.state.run.end();
+				}
+			}
+			for (const owner of this.#owners.values()) {
+				if (owner.disposeTimer !== void 0) this.#clearTimeout(owner.disposeTimer);
+				for (const timer of owner.timers.values()) this.#clearTimeout(timer);
+			}
+			this.#owners.clear();
+			this.#entries.clear();
+			this.#stopVisibilityListenerIfIdle();
+		}
+		/** Current time according to the injected clock. */
+		now() {
+			return this.#now();
+		}
+		#finishRun(key, generation, outcome) {
+			const entry = this.#entries.get(key);
+			if (!entry || entry.state.kind !== "running" || entry.state.run.generation !== generation) return;
+			entry.state.run.detachExternalSignal?.();
+			entry.state.run.end();
+			entry.state = { kind: "idle" };
+			if (entry.subscribers.size === 0) {
+				if (entry.owners.size === 0) {
+					this.#entries.delete(key);
+					this.#stopVisibilityListenerIfIdle();
+				}
+				return;
+			}
+			if (outcome.status === "success") {
+				entry.failureCount = 0;
+				entry.nextRunAt = void 0;
+			} else if (outcome.status === "error") {
+				entry.failureCount += 1;
+				entry.runAgain = false;
+				const baseDelay = this.#getIntervalMs(entry);
+				const exponentialDelay = Math.min(baseDelay * 2 ** (entry.failureCount - 1), MAX_BACKOFF_MS);
+				const jitteredDelay = Math.min(this.#withJitter(exponentialDelay), MAX_BACKOFF_MS);
+				const backoffDelay = Math.max(jitteredDelay, outcome.retryAfterMs ?? 0);
+				this.#schedule(key, entry, backoffDelay);
+			}
+			if (this.#getVisibilityState() === "hidden") {
+				entry.runOnShow = true;
+				return;
+			}
+			if (outcome.status === "success") {
+				if (entry.runAgain || entry.runOnShow) {
+					entry.runAgain = false;
+					entry.runOnShow = false;
+					this.runNow(key);
+					return;
+				}
+				this.#schedulePoll(key, entry);
+				return;
+			}
+			if (outcome.status === "aborted") if (entry.runAgain) {
+				entry.runAgain = false;
+				this.runNow(key);
+			} else this.#schedulePoll(key, entry);
+		}
+		async #waitForNewer(key, generation) {
+			let seenGeneration = generation;
+			while (true) {
+				const state = this.#entries.get(key)?.state;
+				const activeRun = state?.kind === "running" ? state.run : void 0;
+				if (!activeRun || activeRun.generation <= seenGeneration) return;
+				seenGeneration = activeRun.generation;
+				await activeRun.done;
+			}
+		}
+		#getIntervalMs(entry) {
+			return Math.min(...Array.from(entry.subscribers.values(), (subscriber) => subscriber.intervalMs));
+		}
+		#getOrCreateEntry(key) {
+			let entry = this.#entries.get(key);
+			if (!entry) {
+				entry = {
+					failureCount: 0,
+					generation: 0,
+					owners: /* @__PURE__ */ new Set(),
+					runAgain: false,
+					runOnShow: false,
+					state: { kind: "idle" },
+					subscribers: /* @__PURE__ */ new Map()
+				};
+				this.#entries.set(key, entry);
+			}
+			return entry;
+		}
+		#getSubscriber(entry) {
+			return Array.from(entry.subscribers.values()).sort((a, b) => a.intervalMs - b.intervalMs)[0];
+		}
+		#getOrCreateOwner(ownerId) {
+			let owner = this.#owners.get(ownerId);
+			if (!owner) {
+				const newOwner = {
+					claims: /* @__PURE__ */ new Map(),
+					hooks: /* @__PURE__ */ new Map(),
+					renderKeys: /* @__PURE__ */ new Set(),
+					timers: /* @__PURE__ */ new Map()
+				};
+				owner = newOwner;
+				this.#owners.set(ownerId, newOwner);
+			}
+			return owner;
+		}
+		#dropOwnedKey(ownerId, key) {
+			const entry = this.#entries.get(key);
+			if (!entry) return;
+			entry.owners.delete(ownerId);
+			if (entry.owners.size > 0 || entry.subscribers.size > 0) return;
+			this.#clearTimer(entry);
+			if (entry.state.kind === "running") {
+				entry.state.run.controller.abort();
+				entry.state.run.detachExternalSignal?.();
+				entry.state.run.end();
+			}
+			this.#entries.delete(key);
+		}
+		#dropOwner(ownerId, owner) {
+			if (this.#owners.get(ownerId) !== owner) return;
+			this.#owners.delete(ownerId);
+			for (const timer of owner.timers.values()) this.#clearTimeout(timer);
+			const keys = /* @__PURE__ */ new Set([
+				...owner.claims.values(),
+				...owner.renderKeys,
+				...owner.hooks.values()
+			]);
+			for (const key of keys) this.#dropOwnedKey(ownerId, key);
+			this.#stopVisibilityListenerIfIdle();
+		}
+		#hasClaimForKey(owner, key) {
+			return Array.from(owner.claims.values()).some((claimKey) => claimKey === key);
+		}
+		#hasHookForKey(owner, key) {
+			return Array.from(owner.hooks.values()).some((hookKey) => hookKey === key);
+		}
+		#ownerHasKey(owner, key) {
+			return owner.renderKeys.has(key) || this.#hasHookForKey(owner, key) || this.#hasClaimForKey(owner, key);
+		}
+		#schedulePoll(key, entry) {
+			this.#schedule(key, entry, this.#withJitter(this.#getIntervalMs(entry)));
+		}
+		#schedule(key, entry, delay) {
+			this.#clearTimer(entry);
+			entry.nextRunAt = this.#now() + delay;
+			if (this.#getVisibilityState() === "hidden") {
+				entry.runOnShow = true;
+				return;
+			}
+			entry.timer = this.#setTimeout(() => {
+				entry.timer = void 0;
+				entry.nextRunAt = void 0;
+				this.runNow(key);
+			}, delay);
+		}
+		#clearTimer(entry, clearNextRun = true) {
+			if (entry.timer !== void 0) {
+				this.#clearTimeout(entry.timer);
+				entry.timer = void 0;
+			}
+			if (clearNextRun) entry.nextRunAt = void 0;
+		}
+		#withJitter(delay) {
+			const multiplier = 1 - this.#jitterRatio + this.#random() * this.#jitterRatio * 2;
+			return Math.max(0, delay * multiplier);
+		}
+		#handleVisibilityChange = () => {
+			const hidden = this.#getVisibilityState() === "hidden";
+			for (const [key, entry] of this.#entries) {
+				if (hidden) {
+					entry.runOnShow = entry.subscribers.size > 0;
+					if (entry.timer !== void 0) this.#clearTimer(entry, entry.failureCount === 0);
+					continue;
+				}
+				if (!entry.runOnShow || entry.subscribers.size === 0) continue;
+				entry.runOnShow = false;
+				const delay = Math.max(0, (entry.nextRunAt ?? this.#now()) - this.#now());
+				if (delay > 0) this.#schedule(key, entry, delay);
+				else this.runNow(key);
+			}
+		};
+		#startVisibilityListener() {
+			if (this.#listeningForVisibility || !this.#visibilityTarget) return;
+			this.#visibilityTarget.addEventListener("visibilitychange", this.#handleVisibilityChange);
+			this.#listeningForVisibility = true;
+		}
+		#stopVisibilityListenerIfIdle() {
+			if (!this.#listeningForVisibility || this.#entries.size > 0 || !this.#visibilityTarget) return;
+			this.#visibilityTarget.removeEventListener("visibilitychange", this.#handleVisibilityChange);
+			this.#listeningForVisibility = false;
+		}
+	};
+	var poller = new Poller();
+	/**
+	* Register fixed-delay polling for a request identity.
+	*
+	* `refresh` only invalidates the corresponding selector. Request lifecycle,
+	* backpressure, retries, and cancellation remain owned by the poller.
+	*/
+	function usePolling(key, intervalSeconds, refresh) {
+		const refreshRef = useLatestRef$3(refresh);
+		(0, react$3.useEffect)(() => poller.subscribe(key, intervalSeconds, () => refreshRef.current()), [
+			intervalSeconds,
+			key,
+			refreshRef
+		]);
+	}
+	/**
+	* Create a render-local map of hooks to polling keys.
+	*
+	* The commit drops claims left by hooks that did not render.
+	*/
+	function usePollScope() {
+		const id = (0, react$3.useId)();
+		const claims = /* @__PURE__ */ new Map();
+		(0, react$3.useLayoutEffect)(() => {
+			poller.commitOwner(id, claims);
+		});
+		(0, react$3.useLayoutEffect)(() => () => poller.releaseOwner(id), [id]);
+		return {
+			claims,
+			id
+		};
+	}
+	/**
+	* Keep one request key for a rendered hook.
+	*
+	* The hook must claim the key during render because an initial suspended render
+	* runs no effect. The claim only marks ownership; it starts no work. The passive
+	* effect keeps the claim after commit and stays mounted when Suspense hides an
+	* existing tree.
+	*/
+	function usePollKey(scope, key) {
+		const hookId = (0, react$3.useId)();
+		scope?.claims.set(hookId, key);
+		const ownerId = scope?.id;
+		if (ownerId) poller.claimKey(ownerId, hookId, key);
+		(0, react$3.useEffect)(() => {
+			if (!ownerId) return;
+			poller.mountKey(ownerId, hookId, key);
+			return () => poller.unmountKey(ownerId, hookId, key);
+		}, [
+			hookId,
+			key,
+			ownerId
+		]);
+	}
+	/** Run one request using the production poller. */
+	function runPoll(run) {
+		return poller.run(run);
+	}
+	/** Create a force key that identifies a poller-owned refresh. */
+	function createPollForceKey() {
+		return `${POLL_FORCE_KEY_PREFIX}${globalThis.crypto?.randomUUID?.() ?? String(Math.random())}`;
+	}
+	/** Check whether a selector force key originated from the poller. */
+	function isPollForceKey(forceKey) {
+		return forceKey?.startsWith(POLL_FORCE_KEY_PREFIX) ?? false;
+	}
+	/** Extract Retry-After as a non-negative delay in milliseconds. */
+	function parseRetryAfter(response, now = poller.now()) {
+		const value = response.headers.get("Retry-After");
+		if (!value) return;
+		const seconds = Number(value);
+		if (Number.isFinite(seconds) && seconds >= 0) return seconds * 1e3;
+		const retryAt = Date.parse(value);
+		if (Number.isNaN(retryAt)) return;
+		return Math.max(0, retryAt - now);
+	}
+	/** Keep Retry-After beside an error without changing the error object. */
+	function markRetryAfter(error, response) {
+		const delay = parseRetryAfter(response);
+		if (delay !== void 0 && typeof error === "object" && error !== null) retryAfterByError.set(error, delay);
+		return error;
+	}
+	/** Await a promise while preserving ownership of request cancellation. */
+	async function waitOrAbort(promise, signal) {
+		if (!signal) return promise;
+		if (signal.aborted) throw new DOMException("The request was aborted", "AbortError");
+		return new Promise((resolve, reject) => {
+			const abort = () => {
+				signal.removeEventListener("abort", abort);
+				reject(new DOMException("The request was aborted", "AbortError"));
+			};
+			signal.addEventListener("abort", abort, { once: true });
+			promise.then((value) => {
+				signal.removeEventListener("abort", abort);
+				resolve(value);
+			}, (error) => {
+				signal.removeEventListener("abort", abort);
+				reject(error);
+			});
+		});
+	}
+	/** Clear production polling state. Intended for test isolation. */
+	function clearPolling_TEST() {
+		poller.clear();
+	}
+	//#endregion
 	//#region js/shared/interactivity/store.tsx
 	/**
 	* Key -> atom
 	*/
 	var atomRegistry = /* @__PURE__ */ new Map();
+	/** Request identity -> polling-only trigger atom. */
+	var pollingTriggerRegistry = /* @__PURE__ */ new Map();
 	/**
 	* Key -> atom family
 	*/
@@ -69455,6 +70369,19 @@
 	*/
 	var depsRegistry = /* @__PURE__ */ new Map();
 	/**
+	* Get the trigger used to refresh exactly one selector/request-extras identity.
+	*/
+	function getOrRegisterPollingTrigger(requestKey) {
+		if (!pollingTriggerRegistry.has(requestKey)) pollingTriggerRegistry.set(requestKey, Recoil_index_8({
+			default: {
+				force_key: null,
+				inc: 0
+			},
+			key: `_POLLING_TRIGGER_${requestKey}`
+		}));
+		return pollingTriggerRegistry.get(requestKey);
+	}
+	/**
 	* Registry key types that do not use 'nested' in their key
 	*/
 	var SHARED_KEY_TYPES = ["result-selector", "derived-selector"];
@@ -69473,8 +70400,10 @@
 	* Clear registries - to be used in tests only.
 	*/
 	function clearRegistries_TEST() {
+		clearPolling_TEST();
 		for (const registry of [
 			atomRegistry,
+			pollingTriggerRegistry,
 			atomFamilyRegistry,
 			atomFamilyMembersRegistry,
 			selectorRegistry,
@@ -85782,24 +86711,8 @@ ${String(error)}`;
 		module.exports = set;
 	}));
 	//#endregion
-	//#region js/shared/utils/use-interval.tsx
-	var import_set = /* @__PURE__ */ __toESM(require_set(), 1);
-	/**
-	* Helper hook that runs a function after given intervals
-	*
-	* @param callback the function to run after each interval
-	* @param delay the delay in seconds between each interval
-	*/
-	function useInterval(callback, delay) {
-		(0, react$3.useEffect)(() => {
-			if (delay) {
-				const id = setInterval(callback, delay * 1e3);
-				return () => clearInterval(id);
-			}
-		}, useDeepCompare([delay, callback]));
-	}
-	//#endregion
 	//#region js/shared/utils/deferred.tsx
+	var import_set = /* @__PURE__ */ __toESM(require_set(), 1);
 	var DeferredImpl = class {
 		#resolve;
 		#reject;
@@ -85941,7 +86854,7 @@ ${String(error)}`;
 	* - `values`, values to pass in the request
 	* - `wsClient`, websocket client
 	*/
-	async function fetchDerivedVariable({ cache, extras, force_key, variableUid, values, wsClient }) {
+	async function fetchDerivedVariable({ cache, extras, force_key, signal, variableUid, values, wsClient }) {
 		const cacheControl = cache === null ? { "cache-control": "none" } : void 0;
 		const ws_channel = await wsClient.getChannel();
 		const res = await request(`/api/core/derived-variable/${variableUid}`, {
@@ -85952,34 +86865,50 @@ ${String(error)}`;
 			}),
 			headers: { ...cacheControl },
 			method: HTTP_METHOD.POST
-		}, extras);
+		}, extras, { signal });
 		await handleAuthErrors(res, { authenticationFailureRedirect: "login" });
-		await validateResponse(res, `Failed to fetch the derived variable with uid: ${variableUid}`);
+		try {
+			await validateResponse(res, `Failed to fetch the derived variable with uid: ${variableUid}`);
+		} catch (error) {
+			throw markRetryAfter(error, res);
+		}
 		return res.json();
 	}
+	var pendingFetches = /* @__PURE__ */ new Map();
 	/**
-	* Add a debounced version of the fetch so as to not overload the backend on startup. This needs to be cached per uid
-	* so that we only debounce calls to the same DerivedVariable. Debouncing is done with rxjs as everything here is
-	* promise based and async
+	* Wait 10 ms so matching selector reads share one fetch. A running fetch stays separate.
 	*/
-	var debouncedFetchSubjects = {};
-	var debouncedFetchCache = {};
-	async function debouncedFetchDerivedVariable({ variableUid, selectorKey, values, wsClient, extras, cache, force_key }) {
-		if (!debouncedFetchSubjects[selectorKey]) {
-			debouncedFetchSubjects[selectorKey] = new BehaviorSubject(null);
-			debouncedFetchCache[selectorKey] = debouncedFetchSubjects[selectorKey].pipe(filter((args) => !!args), debounceTime(10), switchMap((args) => from(fetchDerivedVariable(args))), share());
-		}
-		debouncedFetchSubjects[selectorKey].next({
-			cache,
-			extras,
-			force_key,
-			selectorKey,
-			values,
-			variableUid,
-			wsClient
+	function startPendingFetch(selectorKey, pending) {
+		if (pendingFetches.get(selectorKey) !== pending) return;
+		pendingFetches.delete(selectorKey);
+		fetchDerivedVariable(pending.args).then((response) => {
+			for (const waiter of pending.waiters) waiter.resolve(response);
+		}, (error) => {
+			for (const waiter of pending.waiters) waiter.reject(error);
 		});
+	}
+	async function debouncedFetchDerivedVariable(args) {
 		return new Promise((resolve, reject) => {
-			debouncedFetchCache[selectorKey].pipe(take(1)).subscribe(resolve, reject);
+			const pending = pendingFetches.get(args.selectorKey);
+			if (pending) {
+				if (pending.timer !== void 0) clearTimeout(pending.timer);
+				pending.args = args;
+				pending.waiters.push({
+					reject,
+					resolve
+				});
+				pending.timer = setTimeout(() => startPendingFetch(args.selectorKey, pending), 10);
+				return;
+			}
+			const next = {
+				args,
+				waiters: [{
+					reject,
+					resolve
+				}]
+			};
+			next.timer = setTimeout(() => startPendingFetch(args.selectorKey, next), 10);
+			pendingFetches.set(args.selectorKey, next);
 		});
 	}
 	/**
@@ -86061,9 +86990,11 @@ ${String(error)}`;
 	* @param resolvedVariables resolved values of dependant variables - turned into primitives and Resolved forms
 	* @param get getter function to resolve atoms to values
 	* @param triggerList list of trigger info objects
-	* @param triggers list of triggers to register as dependencies; first one is expected to be the self-trigger
+	* @param selfTriggers triggers owned by this request identity
+	* @param childTriggers triggers owned by nested variables
 	*/
-	function resolveDerivedValue({ key, variables, deps, resolvedVariables, resolutionStrategy, triggerList, triggers }) {
+	function resolveDerivedValue({ key, variables, deps, resolvedVariables, resolutionStrategy, triggerList, selfTriggers, childTriggers }) {
+		const triggers = [...selfTriggers, ...childTriggers];
 		/**
 		* Array of values:
 		* - primitive values are resolved to themselves
@@ -86124,16 +87055,17 @@ ${String(error)}`;
 				};
 			}
 			const previousTriggerCounters = previousEntry.args.slice(previousEntry.args.length - triggers.length);
+			const dependenciesChanged = !(0, import_isEqual.default)(previousEntry.args.slice(0, -triggers.length), relevantValues.slice(0, -triggers.length));
 			let selfTriggerForceKey = null;
-			for (const [idx, triggerValue] of triggers.entries())
+			for (const [idx, triggerValue] of dependenciesChanged ? [] : triggers.entries())
  /**
 			*  If any of the nested trigger value has changed (this execution was caused by a trigger)
 			*  handle the force_key appropriately
 			*/
 			if (triggerValue.inc !== previousTriggerCounters[idx]) {
-				if (idx === 0) selfTriggerForceKey = triggerValue.force_key;
+				if (idx < selfTriggers.length) selfTriggerForceKey = triggerValue.force_key;
 				else if (triggerValue.force_key) {
-					const triggerInfo = triggerList[idx - 1];
+					const triggerInfo = triggerList[idx - selfTriggers.length];
 					if (triggerInfo.path.length === 0) selfTriggerForceKey = triggerValue.force_key;
 					else (0, import_set.default)(values, [...triggerInfo.path, "force_key"], triggerValue.force_key);
 				}
@@ -86181,9 +87113,9 @@ ${String(error)}`;
 					}));
 					const selfTrigger = get(getOrRegisterTrigger(variable));
 					const selectorKey = key + extrasSerializable.toJSON();
+					const pollingTrigger = get(getOrRegisterPollingTrigger(getRegistryKey(variable, "derived-selector") + extrasSerializable.toJSON()));
 					const triggerList = buildTriggerList(variable.variables);
-					const triggers = registerChildTriggers(triggerList, get);
-					triggers.unshift(selfTrigger);
+					const childTriggers = registerChildTriggers(triggerList, get);
 					return resolveDerivedValue({
 						key: selectorKey,
 						variables: variable.variables,
@@ -86194,7 +87126,8 @@ ${String(error)}`;
 							get
 						},
 						triggerList,
-						triggers
+						selfTriggers: [selfTrigger, pollingTrigger],
+						childTriggers
 					});
 				},
 				key: nanoid$1()
@@ -86228,68 +87161,104 @@ ${String(error)}`;
 						error.selectorExtras = extrasSerializable.toJSON();
 						throw error;
 					};
-					const handleError = (func) => {
-						try {
-							return func();
-						} catch (e) {
-							throwError(e);
-						}
-					};
 					let derivedResult = get(getOrRegisterDerivedVariableResult(variable, wsClient, taskContext, extrasSerializable.extras));
 					if (derivedResult.type === "previous") return derivedResult.entry.result;
 					const { extras } = extrasSerializable;
-					let variableResponse = null;
-					let shouldFetchTask = false;
-					if (derivedResult.type === "cached") try {
-						const response = await derivedResult.response.getValue();
-						shouldFetchTask = true;
-						if (!response.ok) throwError(new Error(response.value));
-						variableResponse = response.value;
-						derivedResult = derivedResult.currentResult;
-					} catch (e) {
-						throwError(e);
-					}
-					else variableResponse = await handleError(() => debouncedFetchDerivedVariable({
-						cache: variable.cache,
-						extras,
-						force_key: derivedResult.selfTriggerForceKey,
-						selectorKey,
-						values: normalizeRequest(cleanArgs(derivedResult.values), variable.variables),
-						variableUid: variable.uid,
-						wsClient
-					}));
-					let variableValue = NOT_SET$1;
-					taskContext.cleanupRunningTasks(variable.uid);
-					if (isTaskResponse(variableResponse)) {
-						const taskId = variableResponse.task_id;
-						if (shouldFetchTask) try {
-							const taskResult = await fetchTaskResult(taskId, extras);
-							if (taskResult.status === "ok") variableValue = taskResult.result;
-						} catch (e) {
-							throwError(e);
+					const currentResult = derivedResult.type === "current" ? derivedResult : void 0;
+					const pollRequest = isPollForceKey(currentResult?.selfTriggerForceKey);
+					const inputKey = currentResult ? JSON.stringify({
+						forceKey: currentResult.selfTriggerForceKey,
+						values: currentResult.values
+					}) : void 0;
+					const fetchValue = async (signal) => {
+						let variableResponse = null;
+						let shouldFetchTask = false;
+						if (derivedResult.type === "cached") {
+							const response = await derivedResult.response.getValue();
+							shouldFetchTask = true;
+							if (!response.ok) throwError(new Error(response.value));
+							variableResponse = response.value;
+							derivedResult = derivedResult.currentResult;
+						} else {
+							signal.addEventListener("abort", () => taskContext.cleanupRunningTasks(variable.uid), { once: true });
+							variableResponse = await debouncedFetchDerivedVariable({
+								cache: variable.cache,
+								extras,
+								force_key: currentResult.selfTriggerForceKey,
+								selectorKey,
+								signal,
+								values: normalizeRequest(cleanArgs(currentResult.values), variable.variables),
+								variableUid: variable.uid,
+								wsClient
+							});
 						}
-						if (variableValue === NOT_SET$1) {
-							taskContext.startTask(taskId, variable.uid, getRegistryKey(variable, "trigger"));
-							try {
-								await wsClient.waitForTask(taskId);
-							} catch (e) {
-								if (e instanceof TaskError) throwError(e);
-								return null;
-							} finally {
-								taskContext.endTask(taskId);
+						signal?.throwIfAborted();
+						let variableValue = NOT_SET$1;
+						taskContext.cleanupRunningTasks(variable.uid);
+						if (isTaskResponse(variableResponse)) {
+							const taskId = variableResponse.task_id;
+							if (shouldFetchTask) {
+								const taskResult = await fetchTaskResult(taskId, {
+									...extras,
+									signal
+								});
+								if (taskResult.status === "ok") variableValue = taskResult.result;
 							}
-							variableValue = await handleError(async () => {
-								const result = await fetchTaskResult(taskId, extras);
+							if (variableValue === NOT_SET$1) {
+								taskContext.startTask(taskId, variable.uid, getRegistryKey(variable, "trigger"));
+								try {
+									await waitOrAbort(wsClient.waitForTask(taskId), signal);
+								} catch (e) {
+									if (e instanceof TaskError || isAbortError(e)) throw e;
+									return null;
+								} finally {
+									taskContext.endTask(taskId);
+								}
+								const result = await fetchTaskResult(taskId, {
+									...extras,
+									signal
+								});
 								if (result.status === "not_found") throw new Error("Task result not found");
-								return result.result;
-							});
-						}
-					} else variableValue = variableResponse.value;
-					depsRegistry.set(derivedResult.depsKey, {
-						args: derivedResult.relevantValues,
-						result: variableValue
-					});
-					return variableValue;
+								variableValue = result.result;
+							}
+						} else variableValue = variableResponse.value;
+						return variableValue;
+					};
+					if (!currentResult) try {
+						const variableValue = await fetchValue();
+						depsRegistry.set(derivedResult.depsKey, {
+							args: derivedResult.relevantValues,
+							result: variableValue
+						});
+						return variableValue;
+					} catch (error) {
+						return throwError(error);
+					}
+					const runResult = currentResult;
+					try {
+						return await runPoll({
+							cause: pollRequest ? "poll" : "dependency",
+							inputKey,
+							key: selectorKey,
+							read: () => {
+								const saved = depsRegistry.get(runResult.depsKey);
+								return saved ? {
+									found: true,
+									value: saved.result
+								} : { found: false };
+							},
+							signal: extras.signal ?? void 0,
+							work: fetchValue,
+							write: (variableValue) => {
+								depsRegistry.set(runResult.depsKey, {
+									args: runResult.relevantValues,
+									result: variableValue
+								});
+							}
+						});
+					} catch (error) {
+						return throwError(error);
+					}
 				},
 				key: nanoid$1()
 			}));
@@ -86341,7 +87310,7 @@ ${String(error)}`;
 	* Otherwise, returns an object with values so be sent to the backend
 	* and handles to resolve the cached promise to the result.
 	*/
-	function preloadDerivedValue({ key, variables, deps, triggerList, triggers, snapshot, params }) {
+	function preloadDerivedValue({ key, variables, deps, triggerList, selfTriggers, childTriggers, snapshot, params }) {
 		const derivedResult = resolveDerivedValue({
 			key,
 			variables,
@@ -86353,7 +87322,8 @@ ${String(error)}`;
 				params
 			},
 			triggerList,
-			triggers
+			selfTriggers,
+			childTriggers
 		});
 		if (derivedResult.type === "previous") return null;
 		return {
@@ -86366,16 +87336,16 @@ ${String(error)}`;
 	*/
 	function preloadDerivedVariable(variable, snapshot, params) {
 		const key = getRegistryKey(variable, "result-selector") + new RequestExtrasSerializable({}).toJSON();
-		const triggerList = [...buildTriggerList(variable.variables), {
-			path: [],
-			variable
-		}];
-		const triggers = triggerList.map((ti) => resolveTriggerStatic(getOrRegisterTrigger(ti.variable), snapshot));
+		const requestKey = getRegistryKey(variable, "derived-selector") + new RequestExtrasSerializable({}).toJSON();
+		const triggerList = buildTriggerList(variable.variables);
+		const selfTriggers = [resolveTriggerStatic(getOrRegisterTrigger(variable), snapshot), resolveTriggerStatic(getOrRegisterPollingTrigger(requestKey), snapshot)];
+		const childTriggers = triggerList.map((ti) => resolveTriggerStatic(getOrRegisterTrigger(ti.variable), snapshot));
 		return preloadDerivedValue({
 			key,
 			variables: variable.variables,
 			deps: variable.deps,
-			triggers,
+			selfTriggers,
+			childTriggers,
 			triggerList,
 			snapshot,
 			params
@@ -86389,14 +87359,17 @@ ${String(error)}`;
 	* @param taskContext global task context
 	* @param search search query
 	* @param extras request extras to be merged into the options
+	* @param pollScope render-local scope for requests started before commit
 	*/
-	function useDerivedVariable(variable, WsClient, taskContext, extras, pollingInterval) {
+	function useDerivedVariable(variable, WsClient, taskContext, extras, pollingInterval, pollScope) {
 		const dvSelector = getOrRegisterDerivedVariable(variable, WsClient, taskContext, extras);
-		const triggerUpdates = Recoil_index_24((0, react$3.useMemo)(() => getOrRegisterTrigger(variable), []));
-		useInterval((0, react$3.useCallback)((force = true) => triggerUpdates((val) => ({
-			force_key: force ? nanoid$1() : null,
+		const pollingKey = getRegistryKey(variable, "derived-selector") + new RequestExtrasSerializable(extras).toJSON();
+		usePollKey(pollScope, pollingKey);
+		const triggerUpdates = Recoil_index_24((0, react$3.useMemo)(() => getOrRegisterPollingTrigger(pollingKey), [pollingKey]));
+		usePolling(pollingKey, pollingInterval, (0, react$3.useCallback)(() => triggerUpdates((val) => ({
+			force_key: createPollForceKey(),
 			inc: val.inc + 1
-		})), [triggerUpdates]), pollingInterval);
+		})), [triggerUpdates]));
 		return dvSelector;
 	}
 	//#endregion
@@ -87415,6 +88388,37 @@ ${String(error)}`;
 	* This allows Recoil to properly release instances when components unmount.
 	*/
 	var streamSelectorFamilyRegistry = /* @__PURE__ */ new Map();
+	var STREAM_EVENT_TYPES = /* @__PURE__ */ new Set([
+		"add",
+		"remove",
+		"clear",
+		"replace",
+		"json_snapshot",
+		"json_patch",
+		"reconnect",
+		"error"
+	]);
+	/**
+	* Parse an SSE message into a supported StreamEvent.
+	*
+	* Comment-only SSE frames are delivered by fetch-event-source as messages with
+	* empty data. They are transport heartbeats rather than application events.
+	*/
+	function parseStreamEventMessage(message) {
+		if (message.data.trim() === "") return null;
+		let parsed;
+		try {
+			parsed = JSON.parse(message.data);
+		} catch (parseError) {
+			console.error("Failed to parse SSE event:", parseError, message.data);
+			return null;
+		}
+		if (parsed === null || typeof parsed !== "object" || !("type" in parsed) || typeof parsed.type !== "string" || !STREAM_EVENT_TYPES.has(parsed.type)) {
+			console.error("Unsupported SSE event:", parsed);
+			return null;
+		}
+		return parsed;
+	}
 	/**
 	* Extract a key from an item using the key_accessor path.
 	*
@@ -87556,12 +88560,17 @@ ${String(error)}`;
 	* @returns The value to expose to components
 	*/
 	function getStreamValue(state, keyAccessor) {
+		if (state.status === "error") throw new UserError(state.error ?? "Stream failed");
 		if (keyAccessor !== null && state.data !== null && typeof state.data === "object" && !Array.isArray(state.data)) return Object.values(state.data);
 		return state.data;
 	}
 	var MAX_RETRIES = 5;
 	var BASE_DELAY_MS = 1e3;
 	var MAX_DELAY_MS = 3e4;
+	/** Error that should stop the SSE connection rather than be retried. */
+	var FatalStreamError = class extends Error {};
+	/** Error that should be handled by the SSE retry policy. */
+	var RetriableStreamError = class extends Error {};
 	/**
 	* Calculate exponential backoff delay.
 	*/
@@ -87591,52 +88600,62 @@ ${String(error)}`;
 		let retryCount = 0;
 		let isFirstMessage = true;
 		let currentState = INITIAL_CONNECTED_STATE;
+		let terminalErrorReported = false;
 		const normalizedValues = normalizeRequest(params.resolvedValues, params.variables);
+		const reportTerminalError = (error) => {
+			if (terminalErrorReported) return;
+			terminalErrorReported = true;
+			callbacks.onError(error instanceof Error ? error.message : String(error));
+		};
 		fetchEventSource(`/api/core/stream/${params.uid}`, {
+			...params.extras,
 			method: HTTP_METHOD.POST,
 			body: JSON.stringify({ values: normalizedValues }),
 			signal: controller.signal,
 			onopen: async (response) => {
-				if (response.ok) {
-					retryCount = 0;
-					return;
-				}
+				if (response.ok) return;
 				if (await handleAuthErrors(response, { authenticationFailureRedirect: "login" })) controller.abort();
 				throw /* @__PURE__ */ new Error(`Stream request failed: ${response.status} ${response.statusText}`);
 			},
 			onmessage: (msg) => {
-				let event;
-				try {
-					event = JSON.parse(msg.data);
-				} catch (parseError) {
-					console.error("Failed to parse SSE event:", parseError, msg.data);
-					return;
-				}
+				const event = parseStreamEventMessage(msg);
+				if (event === null) return;
 				if (event.type === "reconnect") {
 					console.info("StreamVariable: Server requested reconnect, reconnecting...");
-					throw new Error("Server requested reconnect");
+					throw new RetriableStreamError("Server requested reconnect");
 				}
-				currentState = applyStreamEvent(currentState, event, params.keyAccessor);
+				if (event.type === "error") throw new FatalStreamError(typeof event.data === "string" ? event.data : "Unknown error");
+				const nextState = applyStreamEvent(currentState, event, params.keyAccessor);
+				if (nextState === currentState || nextState.status === "error") throw new FatalStreamError(nextState.error ?? `Stream event "${event.type}" could not be applied`);
+				retryCount = 0;
+				currentState = nextState;
 				if (isFirstMessage) {
 					isFirstMessage = false;
 					callbacks.onFirstData(currentState);
 				} else callbacks.onUpdate(currentState);
 			},
 			onerror: (err) => {
-				if (controller.signal.aborted) return;
+				if (controller.signal.aborted) throw err;
+				if (err instanceof FatalStreamError) {
+					reportTerminalError(err);
+					throw err;
+				}
 				retryCount++;
 				if (retryCount > MAX_RETRIES) {
-					callbacks.onError(err instanceof Error ? err.message : String(err));
-					return;
+					reportTerminalError(err);
+					throw err;
 				}
 				const delay = getBackoffDelay(retryCount - 1);
 				console.warn(`Stream connection failed, retrying in ${delay}ms (attempt ${retryCount}/${MAX_RETRIES})...`);
 				return delay;
 			},
-			onclose: () => {},
+			onclose: () => {
+				throw new RetriableStreamError("Stream closed unexpectedly");
+			},
 			fetch: request,
-			...params.extras,
 			headers: params.extras.headers
+		}).catch((error) => {
+			if (!controller.signal.aborted) reportTerminalError(error);
 		});
 		return {
 			cleanup: () => {
@@ -87657,10 +88676,8 @@ ${String(error)}`;
 		return ({ setSelf }) => {
 			const params = deserializeAtomParams(atomKey);
 			let resolveInitialData = null;
-			let rejectInitialData = null;
-			setSelf(new Promise((resolve, reject) => {
+			setSelf(new Promise((resolve) => {
 				resolveInitialData = resolve;
-				rejectInitialData = reject;
 			}));
 			const startConnection = () => {
 				return startStreamConnection(params, {
@@ -87668,7 +88685,6 @@ ${String(error)}`;
 						if (resolveInitialData) {
 							resolveInitialData(state);
 							resolveInitialData = null;
-							rejectInitialData = null;
 						}
 						setSelf(state);
 					},
@@ -87676,15 +88692,16 @@ ${String(error)}`;
 						setSelf(state);
 					},
 					onError: (error) => {
-						if (rejectInitialData) {
-							rejectInitialData(new Error(error));
-							resolveInitialData = null;
-							rejectInitialData = null;
-						} else setSelf({
+						const errorState = {
 							data: void 0,
 							status: "error",
 							error
-						});
+						};
+						if (resolveInitialData) {
+							resolveInitialData(errorState);
+							resolveInitialData = null;
+						}
+						setSelf(errorState);
 					}
 				});
 			};
@@ -87898,7 +88915,7 @@ ${String(error)}`;
 				variable: await resolveVariable(resolvedValue.variable, client, taskContext, extras, resolver)
 			};
 			const resolvedValueMap = isVariable(variable.value_map) ? await resolveVariable(variable.value_map, client, taskContext, extras, resolver) : variable.value_map;
-			const resolvedDefault = isVariable(variable.default) ? await resolveVariable(variable.default, client, taskContext, extras, resolver) : variable.default;
+			const resolvedDefault = variable.default !== void 0 && isVariable(variable.default) ? await resolveVariable(variable.default, client, taskContext, extras, resolver) : variable.default;
 			return {
 				type: "switch",
 				uid: variable.uid,
@@ -89158,6 +90175,22 @@ ${String(error)}`;
 		return theme;
 	}
 	//#endregion
+	//#region js/shared/utils/use-interval.tsx
+	/**
+	* Helper hook that runs a function after given intervals
+	*
+	* @param callback the function to run after each interval
+	* @param delay the delay in seconds between each interval
+	*/
+	function useInterval(callback, delay) {
+		(0, react$3.useEffect)(() => {
+			if (delay) {
+				const id = setInterval(callback, delay * 1e3);
+				return () => clearInterval(id);
+			}
+		}, useDeepCompare([delay, callback]));
+	}
+	//#endregion
 	//#region js/shared/utils/use-previous.tsx
 	/**
 	* A helper hook to keep track of the previous value of a variable.
@@ -89465,7 +90498,7 @@ ${String(error)}`;
 					return desc ? -comparison : comparison;
 				});
 			}
-			const startIndex = pagination.offset || 0;
+			const startIndex = pagination.offset ?? 0;
 			const endIndex = pagination.limit ? startIndex + pagination.limit : filteredData.length;
 			filteredData = filteredData.slice(startIndex, endIndex);
 		}
@@ -89966,7 +90999,7 @@ ${String(error)}`;
 					if (result instanceof Promise) promiseChain = result;
 				}
 			}
-			return promiseChain || void 0;
+			return promiseChain ?? void 0;
 		}, []);
 	}
 	/**
@@ -90130,6 +91163,12 @@ ${String(error)}`;
 		return key;
 	}
 	/**
+	* Generate the request identity used for polling and cancellation.
+	*/
+	function getServerComponentRequestKey(uid, loopInstanceUid, extras) {
+		return getComponentRegistryKey(uid, false, loopInstanceUid) + new RequestExtrasSerializable(extras).toJSON();
+	}
+	/**
 	* Fetch a component from the backend, expects a component instance to be returned.
 	*
 	* @param component the component to fetch
@@ -90138,7 +91177,7 @@ ${String(error)}`;
 	* @param extras request extras to be merged into the options
 	* @param wsClient websocket client
 	*/
-	async function fetchFunctionComponent(component, values, uid, extras, wsClient) {
+	async function fetchFunctionComponent(component, values, uid, extras, wsClient, signal) {
 		const ws_channel = await wsClient.getChannel();
 		const res = await request(`/api/core/components/${component}`, {
 			body: JSON.stringify({
@@ -90147,9 +91186,13 @@ ${String(error)}`;
 				ws_channel
 			}),
 			method: HTTP_METHOD.POST
-		}, extras);
+		}, extras, { signal });
 		await handleAuthErrors(res, { authenticationFailureRedirect: "login" });
-		await validateResponse(res, `Failed to fetch the component: ${component}`);
+		try {
+			await validateResponse(res, `Failed to fetch the component: ${component}`);
+		} catch (error) {
+			throw markRetryAfter(error, res);
+		}
 		return await res.json();
 	}
 	function getOrRegisterComponentTrigger(uid, loop_instance_uid) {
@@ -90185,25 +91228,19 @@ ${String(error)}`;
 					error.selectorExtras = extrasSerializable.toJSON();
 					throw error;
 				};
-				const handleError = (func) => {
-					try {
-						return func();
-					} catch (e) {
-						throwError(e);
-					}
-				};
+				const selectorKey = key + extrasSerializable.toJSON();
 				const resolvedKwargs = await Promise.all(Object.entries(dynamicKwargs).map(async ([k, value]) => {
 					return [k, isVariable(value) ? await resolveVariable(value, wsClient, taskContext, currentExtras) : value];
 				})).then((entries) => Object.fromEntries(entries));
 				const resolvedKwargsList = Object.values(resolvedKwargs);
 				const kwargsList = Object.values(dynamicKwargs);
 				const selfTrigger = get(getOrRegisterComponentTrigger(uid, loop_instance_uid));
+				const pollingTrigger = get(getOrRegisterPollingTrigger(selectorKey));
 				const triggerList = buildTriggerList(kwargsList);
-				const triggers = registerChildTriggers(triggerList, get);
-				triggers.unshift(selfTrigger);
+				const childTriggers = registerChildTriggers(triggerList, get);
 				const { extras } = extrasSerializable;
 				let derivedResult = resolveDerivedValue({
-					key,
+					key: selectorKey,
 					variables: kwargsList,
 					deps: kwargsList,
 					resolvedVariables: resolvedKwargsList,
@@ -90212,59 +91249,97 @@ ${String(error)}`;
 						get
 					},
 					triggerList,
-					triggers
+					selfTriggers: [selfTrigger, pollingTrigger],
+					childTriggers
 				});
 				if (derivedResult.type === "previous") return derivedResult.entry.result;
-				let result = NOT_SET;
-				let shouldFetchTask = false;
-				if (derivedResult.type === "cached") try {
-					const response = await derivedResult.response.getValue();
-					shouldFetchTask = true;
-					if (!response.ok) throwError(new Error(response.value));
-					result = response.value;
-					derivedResult = derivedResult.currentResult;
-				} catch (e) {
-					throwError(e);
-				}
-				else {
-					const kwargValues = cleanKwargs(Object.keys(dynamicKwargs).reduce((acc, k, idx) => {
-						acc[k] = derivedResult.values[idx];
-						return acc;
-					}, {}));
-					result = await handleError(() => fetchFunctionComponent(name, normalizeRequest(kwargValues, dynamicKwargs), uid, extras, wsClient));
-				}
-				taskContext.cleanupRunningTasks(key);
-				if (isTaskResponse$1(result)) {
-					const taskId = result.task_id;
-					result = NOT_SET;
-					if (shouldFetchTask) try {
-						const taskResult = await fetchTaskResult(taskId, extras);
-						if (taskResult.status === "ok") result = taskResult.result;
-					} catch (e) {
-						throwError(e);
-					}
-					if (result === NOT_SET) {
-						taskContext.startTask(taskId, key, getComponentRegistryKey(uid, true));
-						try {
-							await wsClient.waitForTask(taskId);
-						} catch (e) {
-							throwError(e);
-						} finally {
-							taskContext.endTask(taskId);
+				const currentResult = derivedResult.type === "current" ? derivedResult : void 0;
+				const pollRequest = isPollForceKey(currentResult?.selfTriggerForceKey);
+				const inputKey = currentResult ? JSON.stringify({
+					forceKey: currentResult.selfTriggerForceKey,
+					values: currentResult.values
+				}) : void 0;
+				const fetchComponent = async (signal) => {
+					let result = NOT_SET;
+					let shouldFetchTask = false;
+					if (derivedResult.type === "cached") {
+						const response = await derivedResult.response.getValue();
+						shouldFetchTask = true;
+						if (!response.ok) throwError(new Error(response.value));
+						result = response.value;
+						derivedResult = derivedResult.currentResult;
+					} else {
+						signal.addEventListener("abort", () => taskContext.cleanupRunningTasks(key), { once: true });
+						result = await fetchFunctionComponent(name, normalizeRequest(cleanKwargs(Object.keys(dynamicKwargs).reduce((acc, k, idx) => {
+							acc[k] = currentResult.values[idx];
+							return acc;
+						}, {})), dynamicKwargs), uid, extras, wsClient, signal);
+					}
+					signal?.throwIfAborted();
+					taskContext.cleanupRunningTasks(key);
+					if (isTaskResponse$1(result)) {
+						const taskId = result.task_id;
+						result = NOT_SET;
+						if (shouldFetchTask) {
+							const taskResult = await fetchTaskResult(taskId, {
+								...extras,
+								signal
+							});
+							if (taskResult.status === "ok") result = taskResult.result;
+						}
+						if (result === NOT_SET) {
+							taskContext.startTask(taskId, key, getComponentRegistryKey(uid, true));
+							try {
+								await waitOrAbort(wsClient.waitForTask(taskId), signal);
+							} finally {
+								taskContext.endTask(taskId);
+							}
+							const response = await fetchTaskResult(taskId, {
+								...extras,
+								signal
+							});
+							if (response.status === "not_found") throw new Error("Task result not found");
+							result = response.result;
 						}
-						result = await handleError(async () => {
-							const res = await fetchTaskResult(taskId, extras);
-							if (res.status === "not_found") throw new Error("Task result not found");
-							return res.result;
-						});
 					}
+					if (result !== NOT_SET && result !== null) result = denormalize(result.data, result.lookup);
+					return result;
+				};
+				if (!currentResult) try {
+					const result = await fetchComponent();
+					depsRegistry.set(derivedResult.depsKey, {
+						args: derivedResult.relevantValues,
+						result
+					});
+					return result;
+				} catch (error) {
+					return throwError(error);
+				}
+				const runResult = currentResult;
+				try {
+					return await runPoll({
+						cause: pollRequest ? "poll" : "dependency",
+						inputKey,
+						key: selectorKey,
+						read: () => {
+							const saved = depsRegistry.get(runResult.depsKey);
+							return saved ? {
+								found: true,
+								value: saved.result
+							} : { found: false };
+						},
+						signal: extras.signal ?? void 0,
+						work: fetchComponent,
+						write: (result) => {
+							depsRegistry.set(runResult.depsKey, {
+								args: runResult.relevantValues,
+								result
+							});
+						}
+					});
+				} catch (error) {
+					return throwError(error);
 				}
-				if (result !== NOT_SET && result !== null) result = denormalize(result.data, result.lookup);
-				depsRegistry.set(key, {
-					args: derivedResult.relevantValues,
-					result
-				});
-				return result;
 			},
 			key
 		}));
@@ -90276,7 +91351,7 @@ ${String(error)}`;
 		return selectorInstance;
 	}
 	function preloadServerComponent(component, snapshot, params) {
-		const key = getComponentRegistryKey(component.uid, false, component.loop_instance_uid);
+		const key = getServerComponentRequestKey(component.uid, component.loop_instance_uid, {});
 		const kwargsList = Object.values(component.props.dynamic_kwargs);
 		const triggerList = buildTriggerList(kwargsList);
 		return preloadDerivedValue({
@@ -90284,7 +91359,8 @@ ${String(error)}`;
 			variables: kwargsList,
 			deps: kwargsList,
 			triggerList,
-			triggers: [...triggerList.map((ti) => resolveTriggerStatic(getOrRegisterTrigger(ti.variable), snapshot)), resolveTriggerStatic(getOrRegisterComponentTrigger(component.uid), snapshot)],
+			selfTriggers: [resolveTriggerStatic(getOrRegisterComponentTrigger(component.uid, component.loop_instance_uid), snapshot), resolveTriggerStatic(getOrRegisterPollingTrigger(key), snapshot)],
+			childTriggers: triggerList.map((ti) => resolveTriggerStatic(getOrRegisterTrigger(ti.variable), snapshot)),
 			snapshot,
 			params
 		});
@@ -90302,6 +91378,8 @@ ${String(error)}`;
 		const { client: wsClient } = (0, react$3.useContext)(websocketCtx);
 		const taskContext = useTaskContext();
 		const variablesContext = (0, react$3.useContext)(variablesCtx);
+		const requestKey = getServerComponentRequestKey(uid, loop_instance_uid, extras);
+		usePollKey(variablesContext?.pollScope, requestKey);
 		const bus = useEventBus();
 		variablesContext?.variables.current.add(getComponentRegistryKey(uid));
 		(0, react$3.useEffect)(() => {
@@ -90341,6 +91419,18 @@ ${String(error)}`;
 			}));
 		}, [uid]);
 	}
+	/**
+	* Refresh one server-component/request-extras identity for polling.
+	*/
+	function usePollServerComponent(uid, loopInstanceUid, extras) {
+		const requestKey = getServerComponentRequestKey(uid, loopInstanceUid, extras);
+		return Recoil_index_31(({ set }) => () => {
+			set(getOrRegisterPollingTrigger(requestKey), (triggerIndexValue) => ({
+				force_key: createPollForceKey(),
+				inc: triggerIndexValue.inc + 1
+			}));
+		}, [requestKey]);
+	}
 	//#endregion
 	//#region js/shared/center/center.tsx
 	var Center = dist_default.div`
@@ -90797,9 +91887,9 @@ ${String(error)}`;
 
     height: min-content;
     padding: 1rem;
+    border-radius: 0.25rem;
 
     background-color: ${(props) => curriedTransparentize$1(.9, props.theme.colors.error)};
-    border-radius: 0.25rem;
 `);
 	var IconWrapper = dist_default.div`
     display: flex;
@@ -90844,15 +91934,15 @@ ${String(error)}`;
 
     width: 40px;
     height: 40px;
-
-    color: ${(props) => props.theme.colors.error};
-
-    background-color: inherit;
     border: none;
     border: 1px solid;
     border-color: ${(props) => props.theme.colors.error};
     border-radius: 5px;
 
+    color: ${(props) => props.theme.colors.error};
+
+    background-color: inherit;
+
     transition-timing-function: ease;
     transition-duration: 100ms;
     transition-property: color, border-color;
@@ -90863,8 +91953,8 @@ ${String(error)}`;
     }
 
     &:hover {
-        color: ${(props) => props.theme.colors.errorHover};
         border-color: ${(props) => props.theme.colors.errorHover};
+        color: ${(props) => props.theme.colors.errorHover};
 
         i {
             transform: rotate(180deg);
@@ -91036,6 +92126,10 @@ ${String(error)}`;
 		}
 		const { hasRunningTasks, cleanupRunningTasks } = useTaskContext();
 		const variables = (0, react$3.useRef)(/* @__PURE__ */ new Set());
+		const variableContext = {
+			pollScope: usePollScope(),
+			variables
+		};
 		(0, react$3.useEffect)(() => {
 			return () => {
 				if (variables.current.size > 0 && hasRunningTasks()) cleanupRunningTasks(...variables.current.values());
@@ -91050,7 +92144,7 @@ ${String(error)}`;
 				...fallbackProps
 			}),
 			onReset: onResetErrorBoundary
-		}, /* @__PURE__ */ React.createElement(fallbackCtx.Provider, { value: { suspend } }, /* @__PURE__ */ React.createElement(variablesCtx.Provider, { value: { variables } }, /* @__PURE__ */ React.createElement(react$3.Suspense, { fallback }, component))));
+		}, /* @__PURE__ */ React.createElement(fallbackCtx.Provider, { value: { suspend } }, /* @__PURE__ */ React.createElement(variablesCtx.Provider, { value: variableContext }, /* @__PURE__ */ React.createElement(react$3.Suspense, { fallback }, component))));
 	}
 	function useResolveDynamicKwargPollingIntervals(dynamicKwargs) {
 		return (0, react$3.useMemo)(() => {
@@ -91075,9 +92169,12 @@ ${String(error)}`;
 	function PythonWrapper(props) {
 		const component = useServerComponent(props.name, props.uid, props.dynamic_kwargs, props.component.loop_instance_uid);
 		const refresh = useRefreshServerComponent(props.uid, props.component.loop_instance_uid);
+		const extras = useRequestExtras();
+		const poll = usePollServerComponent(props.uid, props.component.loop_instance_uid, extras);
 		const [componentPollingInterval] = useVariable(props.polling_interval ?? null);
 		const resolvedKwargPollingIntervals = useResolveDynamicKwargPollingIntervals(props.dynamic_kwargs);
-		useInterval(refresh, (0, react$3.useMemo)(() => computePollingInterval(resolvedKwargPollingIntervals, componentPollingInterval), [resolvedKwargPollingIntervals, componentPollingInterval]));
+		const pollingInterval = (0, react$3.useMemo)(() => computePollingInterval(resolvedKwargPollingIntervals, componentPollingInterval), [resolvedKwargPollingIntervals, componentPollingInterval]);
+		usePolling(getServerComponentRequestKey(props.uid, props.component.loop_instance_uid, extras), pollingInterval, poll);
 		if (component === null) return null;
 		if (isRawString(component)) return /* @__PURE__ */ React.createElement(React.Fragment, null, component.props.content);
 		if (isInvalidComponent(component)) return /* @__PURE__ */ React.createElement(ErrorDisplay$1, {
@@ -91270,7 +92367,6 @@ ${String(error)}`;
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
     padding-left: 0.5rem;
-
     border-bottom: 1px solid;
     border-bottom-color: ${(props) => props.theme.colors.grey5};
 `;
@@ -91306,11 +92402,11 @@ ${String(error)}`;
     flex-direction: column;
 
     width: 100%;
+    border-left: 1px solid ${(props) => props.theme.colors.grey5};
 
     color: ${(props) => props.theme.colors.text};
 
     background-color: ${(props) => props.theme.colors.blue1};
-    border-left: 1px solid ${(props) => props.theme.colors.grey5};
 `;
 	var HeaderWrapper = dist_default.div`
     display: flex;
@@ -91319,7 +92415,6 @@ ${String(error)}`;
 
     width: 100%;
     margin: 0 auto;
-
     border-bottom: 1px solid;
     border-bottom-color: ${(props) => props.theme.colors.grey5};
 `;
@@ -91345,9 +92440,9 @@ ${String(error)}`;
     }
 `;
 	var SelectionButton = dist_default(button_default)`
-    color: ${(props) => props.theme.colors.text};
     border-bottom: 2px solid ${(props) => props.theme.colors.primary};
     border-radius: 0;
+    color: ${(props) => props.theme.colors.text};
 
     :hover:not(:disabled) {
         color: ${(props) => props.theme.colors.text};
@@ -91430,13 +92525,13 @@ ${String(error)}`;
 
     width: ${50}px;
     height: ${50}px;
+    border: 1px solid;
+    border-color: ${(props) => props.theme.colors.secondary};
+    border-radius: 30%;
 
     color: ${(props) => props.theme.colors.blue1};
 
     background-color: ${(props) => props.theme.colors.secondary};
-    border: 1px solid;
-    border-color: ${(props) => props.theme.colors.secondary};
-    border-radius: 30%;
 
     transition: ${(props) => !props.$isDragging ? "left top" : "none"} 150ms ease 0s;
 `;
@@ -91538,9 +92633,9 @@ ${String(error)}`;
     width: 24px;
     height: 100%;
     padding: 0;
+    border: 0;
 
     background-color: transparent;
-    border: 0;
 `;
 	/**
 	* Sidebar resizer.
@@ -91690,8 +92785,8 @@ ${String(error)}`;
     }
 
     *::-webkit-scrollbar-track {
-        background: ${(props) => props.theme.colors.grey2};
         border-radius: 100px;
+        background: ${(props) => props.theme.colors.grey2};
     }
 
     *::-webkit-scrollbar-corner {
@@ -91699,8 +92794,8 @@ ${String(error)}`;
     }
 
     *::-webkit-scrollbar-thumb {
-        background-color: ${(props) => props.theme.colors.grey5};
         border-radius: 100px;
+        background-color: ${(props) => props.theme.colors.grey5};
     }
 `;
 	/**
@@ -91850,24 +92945,49 @@ ${String(error)}`;
 	* @param signal AbortSignal to abort the generator
 	*/
 	async function* ndjson(response, signal) {
+		if (!response.body) throw new Error("Route response body is missing");
 		const reader = response.body.getReader();
 		const newline = /\r?\n/;
 		const decoder = new TextDecoder();
 		let buffer = "";
-		while (true) {
-			if (signal?.aborted) throw new DOMException("The operation was aborted", "AbortError");
-			const { done, value } = await reader.read();
-			if (done) {
-				if (buffer.length > 0) yield JSON.parse(buffer);
-				return;
+		let cancelPromise;
+		const abortError = () => new DOMException("The operation was aborted", "AbortError");
+		const cancel = (reason) => {
+			cancelPromise ??= reader.cancel(reason).catch(() => void 0);
+			return cancelPromise;
+		};
+		const abort = () => {
+			cancel(signal?.reason ?? abortError());
+		};
+		signal?.addEventListener("abort", abort, { once: true });
+		try {
+			while (true) {
+				if (signal?.aborted) throw abortError();
+				const { done, value } = await reader.read();
+				if (signal?.aborted) throw abortError();
+				if (done) {
+					if (buffer.length > 0) yield JSON.parse(buffer);
+					return;
+				}
+				const chunk = decoder.decode(value, { stream: true });
+				buffer += chunk;
+				const parts = buffer.split(newline);
+				buffer = parts.pop();
+				for (const part of parts) yield JSON.parse(part);
 			}
-			const chunk = decoder.decode(value, { stream: true });
-			buffer += chunk;
-			const parts = buffer.split(newline);
-			buffer = parts.pop();
-			for (const part of parts) yield JSON.parse(part);
+		} catch (error) {
+			await cancel(error);
+			throw error;
+		} finally {
+			signal?.removeEventListener("abort", abort);
+			reader.releaseLock();
 		}
 	}
+	function rejectPending(handle, error) {
+		if (handle.status !== "pending") return;
+		handle.getValue().catch(() => void 0);
+		handle.reject(error);
+	}
 	/**
 	* Fetch route data from the server.
 	*
@@ -91955,8 +93075,6 @@ ${String(error)}`;
 		if (!response.ok) throw new LoaderError((await response.json()).detail);
 		const template = deferred();
 		const onLoadActions = deferred();
-		const resolvedDvs = /* @__PURE__ */ new Set();
-		const resolvedPyComponents = /* @__PURE__ */ new Set();
 		queueMicrotask(async () => {
 			try {
 				for await (const data of ndjson(response, signal)) {
@@ -91966,20 +93084,14 @@ ${String(error)}`;
 						template.resolve(component);
 					}
 					if (chunk.type === "actions") onLoadActions.resolve(actions.flatMap((a) => isAnnotatedAction(a) ? chunk.actions[a.uid] : a));
-					if (chunk.type === "derived_variable") {
-						dvHandlesByUid[chunk.uid]?.handle.resolve(chunk.result);
-						resolvedDvs.add(chunk.uid);
-					}
-					if (chunk.type === "py_component") {
-						pyHandlesByUid[chunk.uid]?.handle.resolve(chunk.result);
-						resolvedPyComponents.add(chunk.uid);
-					}
+					if (chunk.type === "derived_variable") dvHandlesByUid[chunk.uid]?.handle.resolve(chunk.result);
+					if (chunk.type === "py_component") pyHandlesByUid[chunk.uid]?.handle.resolve(chunk.result);
 				}
 			} catch (e) {
-				template.reject(e);
-				onLoadActions.reject(e);
-				for (const [uid, handle] of Object.entries(dvHandlesByUid)) if (!resolvedDvs.has(uid)) handle.handle.reject(e);
-				for (const [uid, handle] of Object.entries(pyHandlesByUid)) if (!resolvedPyComponents.has(uid)) handle.handle.reject(e);
+				rejectPending(template, e);
+				rejectPending(onLoadActions, e);
+				for (const handle of Object.values(dvHandlesByUid)) rejectPending(handle.handle, e);
+				for (const handle of Object.values(pyHandlesByUid)) rejectPending(handle.handle, e);
 			}
 		});
 		const [templateValue, onLoadActionsValue] = await Promise.all([template.getValue(), onLoadActions.getValue()]);
@@ -92117,7 +93229,7 @@ ${String(error)}`;
 			await Promise.allSettled(Array.from(extrasMap.entries()).map(([serializableExtras, storeDiff]) => sendRequest(serializableExtras, storeDiff)));
 		}, [client]);
 		const applyPatchesToAtoms = Recoil_index_31(({ snapshot, set }) => async (storeUid, patches, sequenceNumber) => {
-			const expectedSequence = STORE_SEQUENCE_MAP.get(storeUid) || 0;
+			const expectedSequence = STORE_SEQUENCE_MAP.get(storeUid) ?? 0;
 			if (sequenceNumber !== expectedSequence + 1) {
 				if (sequenceNumber <= expectedSequence) return;
 				console.warn(`Sequence number mismatch for store ${storeUid}. Expected: ${expectedSequence + 1}, Got: ${sequenceNumber}.`);
@@ -92512,7 +93624,7 @@ ${String(error)}`;
 		useStreamSubscription((0, react$3.useMemo)(() => findStreamVariables(variable).map((s) => s.uid), [variable.uid]), extras);
 		if (isDerivedVariable(variable)) {
 			const [pollingInterval] = useVariable(variable.polling_interval ?? null, { suspend: false });
-			const selectorLoadable = Recoil_index_28(useDerivedVariable(variable, wsClient, taskContext, extras, pollingInterval ?? void 0));
+			const selectorLoadable = Recoil_index_28(useDerivedVariable(variable, wsClient, taskContext, extras, pollingInterval ?? void 0, variablesContext?.pollScope));
 			(0, react$3.useEffect)(() => {
 				if (selectorLoadable.state !== "loading") bus.publish("DERIVED_VARIABLE_LOADED", {
 					variable,
@@ -92523,7 +93635,7 @@ ${String(error)}`;
 		}
 		if (isSwitchVariable(variable)) return [useSwitchVariable(variable), warnUpdateOnDerivedState];
 		if (isStateVariable(variable)) {
-			const parentLoadable = Recoil_index_28(useDerivedVariable(variable.parent_variable, wsClient, taskContext, extras));
+			const parentLoadable = Recoil_index_28(useDerivedVariable(variable.parent_variable, wsClient, taskContext, extras, void 0, variablesContext?.pollScope));
 			let stateValue;
 			switch (variable.property_name) {
 				case "loading":
@@ -92660,7 +93772,7 @@ ${String(error)}`;
 				width: props.width,
 				...flexProps,
 				...rawStyles,
-				...props.style ?? {}
+				...props.style
 			};
 			return Object.fromEntries(Object.entries(stylesObj).filter(([, v]) => v !== null && v !== void 0));
 		}, [
@@ -92699,11 +93811,11 @@ ${String(error)}`;
 `;
 	var Card = dist_default.div`
     padding: 1.5rem;
+    border-radius: 1rem;
 
     color: ${(props) => props.theme.colors.text};
 
     background-color: ${(props) => props.theme.colors.blue1};
-    border-radius: 1rem;
     box-shadow: ${(props) => props.theme.shadow.medium};
 
     @media (width >= 640px) {
@@ -92745,14 +93857,14 @@ ${String(error)}`;
     height: 2.5rem;
     margin-top: 0.5rem;
     padding: 0 1rem;
+    border: none;
+    border-radius: 0.25rem;
 
     font-size: 1rem;
     line-height: 1.5rem;
     color: ${(props) => props.theme.colors.text};
 
     background-color: ${(props) => props.theme.colors.blue1};
-    border: none;
-    border-radius: 0.25rem;
     outline: none;
     box-shadow:
         inset 0 0 0 0 ${(props) => props.theme.colors.blue1},
@@ -93011,7 +94123,7 @@ ${String(error)}`;
 		const { search } = useLocation();
 		const query = (0, react$3.useMemo)(() => new URLSearchParams(search), [search]);
 		const code = props.code ?? query.get("code");
-		const errorConfig = code && errorMessages[code] || errorMessages.default;
+		const errorConfig = code ? errorMessages[code] ?? errorMessages.default : errorMessages.default;
 		return /* @__PURE__ */ React.createElement(CenteredDivWithGap$1, null, /* @__PURE__ */ React.createElement("h1", null, errorConfig.title), /* @__PURE__ */ React.createElement("p", null, errorConfig.description), /* @__PURE__ */ React.createElement(button_default, {
 			href: "/login",
 			styling: errorConfig.styling
@@ -93033,8 +94145,8 @@ ${String(error)}`;
 
     code {
         padding: 0.2rem;
-        background-color: ${(props) => props.theme.colors.grey2};
         border-radius: 0.5rem;
+        background-color: ${(props) => props.theme.colors.grey2};
     }
 `;
 	var Title = dist_default.h1`
@@ -93146,8 +94258,9 @@ body,
 		return !securityContext.isSecureContext;
 	}
 	function getAuthOriginRecommendation(location) {
-		const host = location.host || location.hostname;
-		const pathname = location.pathname || "";
+		let host = location.host;
+		if (!host) host = location.hostname;
+		const pathname = location.pathname ?? "";
 		if (location.hostname.toLowerCase() === "0.0.0.0") return `http://${host.replace(/^0\.0\.0\.0/i, "localhost")}${pathname}`;
 		return `https://${host}${pathname}`;
 	}
@@ -93163,6 +94276,7 @@ body,
     box-sizing: border-box;
     width: 100%;
     padding: 0.75rem 1rem;
+    border-bottom: 1px solid ${(props) => curriedTransparentize$1(.7, props.theme.colors.error)};
 
     font-size: 0.875rem;
     line-height: 1.4;
@@ -93171,12 +94285,11 @@ body,
     letter-spacing: 0.01em;
 
     background-color: ${(props) => curriedTransparentize$1(.9, props.theme.colors.error)};
-    border-bottom: 1px solid ${(props) => curriedTransparentize$1(.7, props.theme.colors.error)};
 `;
 	var InlineCode = dist_default.code`
     font-family: monospace;
     font-size: inherit;
-    word-break: break-word;
+    word-break: normal;
     overflow-wrap: anywhere;
 `;
 	var RecommendationLink = dist_default.a`
@@ -126700,6 +127813,9 @@ while (n === a[++i] && n === a[++i] && n === a[++i] && n === a[++i] && n === a[+
 			return processedRow;
 		});
 	};
+	/**
+	* Convert records to a matrix while leaving missing fields as empty cells.
+	*/
 	var createMatrixFromArrayOfObjects = (content) => {
 		const processedContent = processDataForDownload(content);
 		const headings = [];
@@ -126715,7 +127831,8 @@ while (n === a[++i] && n === a[++i] && n === a[++i] && n === a[++i] && n === a[+
 		const headingsLength = headings.length;
 		const matrix = [];
 		processedContent.forEach((c) => {
-			const row = new Array(headingsLength);
+			const row = [];
+			row.length = headingsLength;
 			Object.entries(c).forEach(([k, v]) => {
 				row[indexes[k]] = v;
 			});
@@ -126732,6 +127849,9 @@ while (n === a[++i] && n === a[++i] && n === a[++i] && n === a[++i] && n === a[+
 		if (cellValue.search(/("|,|\n)/g) > 0) cellValue = `"${cellValue}"`;
 		return cellValue;
 	};
+	/**
+	* Serialize a matrix as a CSV blob.
+	*/
 	var createCsvFromMatrix = (matrix) => {
 		const csv = matrix.map((col) => col.map((cell) => processCell(cell)).join(",")).join("\n");
 		return new Blob([csv], { type: "text/csv" });
@@ -126852,14 +127972,13 @@ while (n === a[++i] && n === a[++i] && n === a[++i] && n === a[++i] && n === a[+
     width: ${(props) => props.direction === "row" ? "10rem" : "100%"};
     height: 3rem;
     padding: 0 1rem;
+    border-radius: 1rem;
 
     font-size: 0.875rem;
     font-weight: 700;
     color: ${(props) => props.theme.colors.secondary};
     text-decoration: none;
 
-    border-radius: 1rem;
-
     :hover {
         background: ${(props) => curriedTransparentize$1(.9, props.theme.colors.secondary)};
     }
@@ -127011,9 +128130,9 @@ while (n === a[++i] && n === a[++i] && n === a[++i] && n === a[++i] && n === a[+
 		const [to] = useVariable(props.to);
 		const linkKey = getResolvedToHookKey(to);
 		return /* @__PURE__ */ react$3.createElement(LinkResolveImpl, {
+			key: linkKey,
 			...props,
-			to,
-			key: linkKey
+			to
 		});
 	}
 	//#endregion
@@ -127028,14 +128147,13 @@ while (n === a[++i] && n === a[++i] && n === a[++i] && n === a[++i] && n === a[+
     width: auto;
     height: 3rem;
     padding: 0 1rem;
+    border-radius: 1rem;
 
     font-size: 0.875rem;
     font-weight: 700;
     color: ${(props) => props.theme.colors.secondary};
     text-decoration: none;
 
-    border-radius: 1rem;
-
     :hover {
         background: ${(props) => curriedTransparentize$1(.9, props.theme.colors.secondary)};
     }
@@ -127119,12 +128237,16 @@ while (n === a[++i] && n === a[++i] && n === a[++i] && n === a[++i] && n === a[+
 	//#endregion
 	//#region js/components/side-bar-frame.tsx
 	var shouldForwardProp$1 = (prop) => !["width"].includes(prop);
+	function getWidth(width) {
+		if (width) return width;
+		return "240px";
+	}
 	var SideBar = dist_default.div.withConfig({ shouldForwardProp: shouldForwardProp$1 })`
     display: flex;
     flex-direction: column;
     align-items: center;
 
-    width: ${(props) => props.width || "240px"};
+    width: ${(props) => getWidth(props.width)};
     min-width: 150px;
     max-width: 350px;
     height: 100%;
@@ -127210,6 +128332,10 @@ while (n === a[++i] && n === a[++i] && n === a[++i] && n === a[++i] && n === a[+
 	//#endregion
 	//#region js/components/top-bar-frame.tsx
 	var shouldForwardProp = (prop) => !["width"].includes(prop);
+	function getHeight(height) {
+		if (height) return height;
+		return "124px";
+	}
 	var TopBar = dist_default.div.withConfig({ shouldForwardProp })`
     display: flex;
     flex-direction: column;
@@ -127217,7 +128343,7 @@ while (n === a[++i] && n === a[++i] && n === a[++i] && n === a[++i] && n === a[+
     align-items: flex-end;
 
     width: 100%;
-    height: ${(props) => props.height || "124px"};
+    height: ${(props) => getHeight(props.height)};
     min-height: 100px;
     max-height: 350px;
     padding: 2rem 3rem;
@@ -127245,7 +128371,6 @@ while (n === a[++i] && n === a[++i] && n === a[++i] && n === a[++i] && n === a[+
     height: 3rem;
     margin-left: 0.5rem;
     padding: 1rem;
-
     border-radius: 1rem;
 
     a {
@@ -127563,8 +128688,10 @@ while (n === a[++i] && n === a[++i] && n === a[++i] && n === a[++i] && n === a[+
 	exports.getOrRegisterDerivedVariable = getOrRegisterDerivedVariable;
 	exports.getOrRegisterDerivedVariableResult = getOrRegisterDerivedVariableResult;
 	exports.getOrRegisterDerivedVariableValue = getOrRegisterDerivedVariableValue;
+	exports.getOrRegisterPollingTrigger = getOrRegisterPollingTrigger;
 	exports.getOrRegisterServerVariable = getOrRegisterServerVariable;
 	exports.getRegistryKey = getRegistryKey;
+	exports.getServerComponentRequestKey = getServerComponentRequestKey;
 	exports.getSessionIdentifier = getSessionIdentifier;
 	exports.getTabularVariableValue = getTabularVariableValue;
 	exports.getVariableHookSignature = getVariableHookSignature;
@@ -127601,6 +128728,7 @@ while (n === a[++i] && n === a[++i] && n === a[++i] && n === a[++i] && n === a[+
 	exports.onSessionIdChange = onSessionIdChange;
 	exports.parseLoginReferrer = parseLoginReferrer;
 	exports.parseRawCss = parseRawCss;
+	exports.pollingTriggerRegistry = pollingTriggerRegistry;
 	exports.preloadDerivedValue = preloadDerivedValue;
 	exports.preloadDerivedVariable = preloadDerivedVariable;
 	exports.preloadServerComponent = preloadServerComponent;
@@ -127634,6 +128762,7 @@ while (n === a[++i] && n === a[++i] && n === a[++i] && n === a[++i] && n === a[+
 	exports.useFetchTabularDerivedVariable = useFetchTabularDerivedVariable;
 	exports.useFetchTabularServerVariable = useFetchTabularServerVariable;
 	exports.useInterval = useInterval;
+	exports.usePollServerComponent = usePollServerComponent;
 	exports.usePreloadRoute = usePreloadRoute;
 	exports.usePrevious = usePrevious;
 	exports.useRefreshSelector = useRefreshSelector;