@darajs/core 1.29.4 → 1.29.6

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

@@ -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`
@@ -18984,12 +18986,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 +19008,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 +19095,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 +19109,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 +19708,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 +19811,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 +19854,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 +19990,7 @@
 			$hasAnchor: !!href,
 			autoFocus,
 			className,
-			disabled: disabled || loading,
+			disabled: Boolean(disabled) || Boolean(loading),
 			id,
 			onClick,
 			outline,
@@ -20021,7 +20026,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 +20164,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 +20181,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 +20256,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 +27485,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 +27510,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 +27540,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 +27562,8 @@
 
     a {
         color: ${(props) => props.theme.colors.primary};
-        word-break: break-word;
+        word-break: normal;
+        overflow-wrap: anywhere;
     }
 
     blockquote {
@@ -27567,13 +27572,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 +27667,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 +27705,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 +27865,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 +27914,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 +27941,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 +27988,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 +28002,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 +28079,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 +28111,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 +30500,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 +30528,6 @@
 
         width: 0.3125rem;
         height: 0.625rem;
-
         border: solid ${(props) => props.theme.colors.grey5};
         border-width: 0 2px 2px 0;
     }
@@ -30539,12 +30540,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 +30600,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 +30685,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 +30729,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 +30778,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 +30952,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 +30975,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 +31084,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 +33288,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 +33301,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 +33419,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 +33448,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 +33470,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 +33480,6 @@
     white-space: nowrap;
 
     background-color: transparent;
-    border: none;
     outline: 0;
 
     :disabled {
@@ -33489,8 +33494,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 +33548,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 +38569,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 +38583,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 +38619,7 @@
     width: 100%;
     min-height: 2rem;
     padding: 0.25rem 1.5rem;
+    border-radius: 0.25rem;
 
     font-size: 0.75rem;
     font-weight: 300;
@@ -38625,7 +38632,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 +38660,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 +38671,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 +38845,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 +38882,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 +39050,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 +39092,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 +39117,6 @@
             display: block;
 
             width: 6rem;
-
             border-top: ${(props) => props.isRange ? `1px solid ${props.theme.colors.grey2}` : "none"};
         }
     }
@@ -39228,7 +39236,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 +39339,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 +39468,7 @@
 
     width: 10px;
     height: 10px;
+    border-radius: 5px;
 
     color: ${(props) => {
 		var _a;
@@ -39470,7 +39479,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 +39496,7 @@
 
         width: 10px;
         height: 10px;
+        border-radius: 5px;
 
         color: ${(props) => {
 		var _a;
@@ -39498,7 +39507,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 +39517,7 @@
 
         width: 10px;
         height: 10px;
+        border-radius: 5px;
 
         color: ${(props) => {
 		var _a;
@@ -39519,7 +39528,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 +40640,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 +40783,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 +40919,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 +40935,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 +40971,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 +40984,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 +41024,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 +41034,6 @@
     white-space: nowrap;
 
     background-color: transparent;
-    border: none;
     outline: 0;
 
     :disabled {
@@ -41049,13 +41058,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 +41120,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 +41146,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 +41312,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 +41473,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 +41559,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 +41621,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 +41680,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 +41783,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 +41801,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 +42231,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 +42292,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 +42349,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 +42361,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 +42420,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 +42474,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 +42509,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 +42527,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 +42586,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 +42598,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 +45037,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 +45050,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 +45074,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 +45106,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 +45226,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 +45246,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 +45261,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 +46321,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 +46357,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 +46790,6 @@
 
     width: 1.5rem;
     height: 1.5rem;
-
     border-radius: 0.25rem;
 
     :hover {
@@ -47288,10 +47300,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 +47326,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 +47395,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 +47480,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 +47613,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 +47662,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 +47790,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 +47798,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 +47824,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 +47887,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 +47940,6 @@
     flex-shrink: 0;
 
     width: 100%;
-
     border-radius: 1rem 1rem 0 0;
 `;
 	var TabComponent = dist_default.span`
@@ -47940,11 +47954,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 +48060,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 +48480,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 +48494,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 +49212,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 +49254,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 +50259,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 +50299,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 +50430,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 +50702,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 +50744,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 +51080,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);
 	}
@@ -52678,12 +52991,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 +53012,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 +53043,11 @@
     display: flex;
 
     padding-left: 0;
+    border: none;
 
     color: ${() => theme.colors.grey4};
 
     background: transparent;
-    border: none;
 
     :hover {
         text-decoration: underline;
@@ -68607,29 +68918,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";
@@ -87898,7 +88339,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,
@@ -89465,7 +89906,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 +90407,7 @@ ${String(error)}`;
 					if (result instanceof Promise) promiseChain = result;
 				}
 			}
-			return promiseChain || void 0;
+			return promiseChain ?? void 0;
 		}, []);
 	}
 	/**
@@ -90797,9 +91238,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 +91285,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 +91304,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);
@@ -91270,7 +91711,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 +91746,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 +91759,6 @@ ${String(error)}`;
 
     width: 100%;
     margin: 0 auto;
-
     border-bottom: 1px solid;
     border-bottom-color: ${(props) => props.theme.colors.grey5};
 `;
@@ -91345,9 +91784,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 +91869,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 +91977,9 @@ ${String(error)}`;
     width: 24px;
     height: 100%;
     padding: 0;
+    border: 0;
 
     background-color: transparent;
-    border: 0;
 `;
 	/**
 	* Sidebar resizer.
@@ -91690,8 +92129,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 +92138,8 @@ ${String(error)}`;
     }
 
     *::-webkit-scrollbar-thumb {
-        background-color: ${(props) => props.theme.colors.grey5};
         border-radius: 100px;
+        background-color: ${(props) => props.theme.colors.grey5};
     }
 `;
 	/**
@@ -92117,7 +92556,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}.`);
@@ -92660,7 +93099,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 +93138,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 +93184,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 +93450,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 +93472,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 +93585,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 +93603,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 +93612,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 +127140,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 +127158,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 +127176,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 +127299,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 +127457,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 +127474,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 +127564,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 +127659,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 +127670,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 +127698,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 {