xmlui 0.12.16 → 0.12.18

package/dist/lib/{AppRoot-DxPN3IhT.js → AppRoot-BNS2fGLn.js}

@@ -1,15 +1,14 @@
-import "./AppRoot.css";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { forwardRef, useState, useEffect, useContext, createContext, useMemo, useInsertionEffect, useLayoutEffect, useRef, memo, useCallback, useId, cloneElement, useImperativeHandle, isValidElement, startTransition, Fragment as Fragment$1, useReducer, useDeferredValue, createElement, useTransition, Children } from "react";
 import { useQuery, useInfiniteQuery, QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import produce, { createDraft, finishDraft, enableMapSet } from "immer";
-import { p as parseLayoutProperty, f as toCssPropertyNames, l as layoutOptionKeys, s as shallowCompare, u as useEvent, g as capitalizeFirstLetter$1, i as isComponentDefChildren, N as NotAComponentDefError, t as toCssVar$1, r as resolveAndCleanProps, n as normalizePath, h as THEME_VAR_PREFIX$2, S as StyleParser, j as generatedId, k as asyncThrottle, m as asOptionalBoolean, q as partitionObject, e as extractParam, v as randomUUID, w as processStatementQueue, x as readCookie, G as GenericBackendError, y as shouldKeep, z as createContextVariableError, a as parseParameterString, d as delay$1, A as toCssPropertyName, B as removeNullProperties, C as asyncWait, c as evalBinding, P as PropsTrasform, D as debounce$1, E as distinct, F as findByField, H as toHashObject, I as pluralize$1, J as humanReadableDateTimeTillNow, K as ensureMainThread, L as evalArrow, M as evalIdentifier, O as evalLiteral, Q as allowedNewConstructors, R as setExprValue, U as evalMemberAccessCore, V as isBannedFunction, W as getRootIdScope, X as evalPreOrPostCore, Y as evalAssignmentCore, Z as evalBinaryCore, _ as evalUnaryCore, $ as evalCalculatedMemberAccessCore, a0 as evalTemplateLiteralCore, a1 as getExprValue, a2 as isPromise, a3 as hoistFunctionDeclarations, a4 as StatementQueue, a5 as mapStatementsToQueueItems, a6 as toStatementItems, T as ThrowStatementError, a7 as reportEngineError, a8 as StatementExecutionError, a9 as releaseLoopScope, aa as createLoopScope, ab as guard, ac as provideTryBody, ad as createTryScope, ae as innermostTryScope, af as innermostLoopScope, ag as provideFinallyErrorBody, ah as provideFinallyBody, ai as innermostBlockScope, aj as provideCatchBody, ak as provideLoopBody, al as mapToItem, am as closing, an as ScriptParseError, ao as createValueExtractor, ap as collectVariableDependencies, aq as pickFromObject, ar as resolveResponsiveWhen, as as getFileExtension, at as formatFileSizeInBytes } from "./extractParam-DlVzewYK.js";
+import { p as parseLayoutProperty, f as toCssPropertyNames, l as layoutOptionKeys, s as shallowCompare, u as useEvent, g as capitalizeFirstLetter$1, i as isComponentDefChildren, N as NotAComponentDefError, t as toCssVar$1, r as resolveAndCleanProps, n as normalizePath, h as THEME_VAR_PREFIX$2, S as StyleParser, j as generatedId, k as asyncThrottle, m as asOptionalBoolean, q as partitionObject, e as extractParam, v as randomUUID, w as processStatementQueue, x as readCookie, G as GenericBackendError, y as shouldKeep, z as createContextVariableError, a as parseParameterString, d as delay$1, A as toCssPropertyName, B as removeNullProperties, C as asyncWait, c as evalBinding, P as PropsTrasform, D as debounce$1, E as distinct, F as findByField, H as toHashObject, I as pluralize$1, J as humanReadableDateTimeTillNow, K as ensureMainThread, L as evalArrow, M as evalIdentifier, O as evalLiteral, Q as allowedNewConstructors, R as setExprValue, U as evalMemberAccessCore, V as isBannedFunction, W as getRootIdScope, X as evalPreOrPostCore, Y as evalAssignmentCore, Z as evalBinaryCore, _ as evalUnaryCore, $ as evalCalculatedMemberAccessCore, a0 as evalTemplateLiteralCore, a1 as getExprValue, a2 as isPromise, a3 as hoistFunctionDeclarations, a4 as StatementQueue, a5 as mapStatementsToQueueItems, a6 as toStatementItems, T as ThrowStatementError, a7 as reportEngineError, a8 as StatementExecutionError, a9 as releaseLoopScope, aa as createLoopScope, ab as guard, ac as provideTryBody, ad as createTryScope, ae as innermostTryScope, af as innermostLoopScope, ag as provideFinallyErrorBody, ah as provideFinallyBody, ai as innermostBlockScope, aj as provideCatchBody, ak as provideLoopBody, al as mapToItem, am as closing, an as ScriptParseError, ao as createValueExtractor, ap as collectVariableDependencies, aq as pickFromObject, ar as resolveResponsiveWhen, as as getFileExtension, at as formatFileSizeInBytes } from "./extractParam-CGckz_NP.js";
 import classnames from "classnames";
 import { isEmpty, noop as noop$2, omitBy, isUndefined, isPlainObject as isPlainObject$1, isNil, unset, set, get, debounce, isEqual, union, uniq, orderBy, isObject, isArray, groupBy, sortBy, omit, throttle, isNumber, cloneDeep, isNaN as isNaN$1, merge, defaultTo, capitalize as capitalize$1, setWith, keyBy } from "lodash-es";
-import { K as MediaBreakpointKeys, W as T_ARROW_EXPRESSION, au as isArrowExpressionObject$1, ac as T_ARROW_EXPRESSION_STATEMENT, av as T_VAR_DECLARATION, ax as T_REACTIVE_VAR_DECLARATION, ai as T_NEW_EXPRESSION, aj as T_AWAIT_EXPRESSION, am as T_POSTFIX_OP_EXPRESSION, R as T_PREFIX_OP_EXPRESSION, ag as T_ASSIGNMENT_EXPRESSION, ak as T_SPREAD_EXPRESSION, aq as T_OBJECT_LITERAL, ar as T_ARRAY_LITERAL, at as T_TEMPLATE_LITERAL_EXPRESSION, ah as T_LITERAL, al as T_FUNCTION_INVOCATION_EXPRESSION, an as T_CONDITIONAL_EXPRESSION, as as T_SEQUENCE_EXPRESSION, ap as T_UNARY_EXPRESSION, ao as T_BINARY_EXPRESSION, L as T_CALCULATED_MEMBER_ACCESS_EXPRESSION, O as T_MEMBER_ACCESS_EXPRESSION, Q as T_IDENTIFIER, P as Parser, aw as T_DESTRUCTURE, ad as T_BLOCK_STATEMENT, a3 as T_EXPRESSION_STATEMENT, a8 as T_RETURN_STATEMENT, Y as T_EMPTY_STATEMENT, Z as T_SWITCH_STATEMENT, _ as T_TRY_STATEMENT, $ as T_THROW_STATEMENT, a0 as T_FOR_OF_STATEMENT, a1 as T_FOR_IN_STATEMENT, a2 as T_FOR_STATEMENT, X as createXmlUiTreeNodeId, a4 as T_BREAK_STATEMENT, a5 as T_CONTINUE_STATEMENT, a6 as T_DO_WHILE_STATEMENT, a7 as T_WHILE_STATEMENT, a9 as T_IF_STATEMENT, aa as T_CONST_STATEMENT, ab as T_LET_STATEMENT, ae as T_VAR_STATEMENT, V as T_FUNCTION_DECLARATION, af as T_ASYNC_FUNCTION_DECLARATION, ay as isParsedCodeDeclaration } from "./parser-kl5gouy9.js";
+import { K as MediaBreakpointKeys, W as T_ARROW_EXPRESSION, au as isArrowExpressionObject$1, ac as T_ARROW_EXPRESSION_STATEMENT, av as T_VAR_DECLARATION, ax as T_REACTIVE_VAR_DECLARATION, ai as T_NEW_EXPRESSION, aj as T_AWAIT_EXPRESSION, am as T_POSTFIX_OP_EXPRESSION, R as T_PREFIX_OP_EXPRESSION, ag as T_ASSIGNMENT_EXPRESSION, ak as T_SPREAD_EXPRESSION, aq as T_OBJECT_LITERAL, ar as T_ARRAY_LITERAL, at as T_TEMPLATE_LITERAL_EXPRESSION, ah as T_LITERAL, al as T_FUNCTION_INVOCATION_EXPRESSION, an as T_CONDITIONAL_EXPRESSION, as as T_SEQUENCE_EXPRESSION, ap as T_UNARY_EXPRESSION, ao as T_BINARY_EXPRESSION, L as T_CALCULATED_MEMBER_ACCESS_EXPRESSION, O as T_MEMBER_ACCESS_EXPRESSION, Q as T_IDENTIFIER, P as Parser, aw as T_DESTRUCTURE, ad as T_BLOCK_STATEMENT, a3 as T_EXPRESSION_STATEMENT, a8 as T_RETURN_STATEMENT, Y as T_EMPTY_STATEMENT, Z as T_SWITCH_STATEMENT, _ as T_TRY_STATEMENT, $ as T_THROW_STATEMENT, a0 as T_FOR_OF_STATEMENT, a1 as T_FOR_IN_STATEMENT, a2 as T_FOR_STATEMENT, X as createXmlUiTreeNodeId, a4 as T_BREAK_STATEMENT, a5 as T_CONTINUE_STATEMENT, a6 as T_DO_WHILE_STATEMENT, a7 as T_WHILE_STATEMENT, a9 as T_IF_STATEMENT, aa as T_CONST_STATEMENT, ab as T_LET_STATEMENT, ae as T_VAR_STATEMENT, V as T_FUNCTION_DECLARATION, af as T_ASYNC_FUNCTION_DECLARATION, ay as isParsedCodeDeclaration } from "./parser-DiBsM1dk.js";
 import Color from "color";
-import { g as PART_LABELED_ITEM, h as PART_LABEL, i as PART_ICON, f as PART_INPUT, j as PART_CONTENT$2, k as PART_HEADER, x as xmlUiMarkupToComponent, a as errReportComponent, l as PART_CONCISE_VALIDATION_FEEDBACK$5, m as PART_AVATAR, n as PART_TITLE$1, o as PART_SUBTITLE, P as PART_START_ADORNMENT, d as PART_END_ADORNMENT, p as PART_CLEAR_BUTTON$1, q as PART_YEAR, r as PART_MONTH, s as PART_DAY } from "./xmlui-parser-D_XJdENb.js";
+import { g as PART_LABELED_ITEM, h as PART_LABEL, i as PART_ICON, f as PART_INPUT, j as PART_CONTENT$2, k as PART_HEADER, x as xmlUiMarkupToComponent, a as errReportComponent, l as PART_CONCISE_VALIDATION_FEEDBACK$5, m as PART_AVATAR, n as PART_TITLE$1, o as PART_SUBTITLE, P as PART_START_ADORNMENT, d as PART_END_ADORNMENT, p as PART_CLEAR_BUTTON$1, q as PART_YEAR, r as PART_MONTH, s as PART_DAY } from "./xmlui-parser-CN1VIdSi.js";
 import * as InnerRadioGroup from "@radix-ui/react-radio-group";
 import { useContextSelector, createContext as createContext$1 } from "use-context-selector";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
@@ -47,7 +46,7 @@ import { Root as Root$2, List, Trigger as Trigger$1, Content as Content$1 } from
 import scrollIntoView from "scroll-into-view-if-needed";
 import * as RAccordion from "@radix-ui/react-accordion";
 import QRCodeLib from "react-qr-code";
-function getDefaultExportFromCjs(x) {
+import './AppRoot.css';function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
 var client = {};
@@ -139,7 +138,7 @@ function isInsideLayout(context, ...types) {
 }
 function stripDirectChildProps(context) {
   if (!context) return void 0;
-  const { ignoreLayoutProps, wrapChild, ...rest } = context;
+  const { ignoreLayoutProps, wrapChild, extraClassName, ...rest } = context;
   return rest;
 }
 const keyPrefix$1 = "xmlui";
@@ -301,7 +300,15 @@ const labelPositionMd = [
     description: "The right side of the input (left-to-right) or the left side of the input (right-to-left)"
   },
   { value: "top", description: "The top of the input" },
-  { value: "bottom", description: "The bottom of the input" }
+  { value: "bottom", description: "The bottom of the input" },
+  {
+    value: "before",
+    description: "The label is placed directly before the input with fit-content width. Similar to 'start' but the label does not stretch."
+  },
+  {
+    value: "after",
+    description: "The label is placed directly after the input with fit-content width. Similar to 'end' but the label does not stretch."
+  }
 ];
 const triggerPositionValues = ["start", "end"];
 const triggerPositionNames = [...triggerPositionValues];
@@ -515,25 +522,27 @@ function getElementRef(element) {
   return element.props.ref || element.ref;
 }
 const themeVars$12 = `'{"textColor-label-formItem": "var(--xmlui-textColor-label-formItem)", "fontFamily-label-formItem": "var(--xmlui-fontFamily-label-formItem)", "fontSize-label-formItem": "var(--xmlui-fontSize-label-formItem)", "fontWeight-label-formItem": "var(--xmlui-fontWeight-label-formItem)", "fontStyle-label-formItem": "var(--xmlui-fontStyle-label-formItem)", "textTransform-label-formItem": "var(--xmlui-textTransform-label-formItem)", "textColor-label-formItem--required": "var(--xmlui-textColor-label-formItem--required)", "fontSize-label-formItem--required": "var(--xmlui-fontSize-label-formItem--required)", "fontWeight-label-formItem--required": "var(--xmlui-fontWeight-label-formItem--required)", "fontStyle-label-formItem--required": "var(--xmlui-fontStyle-label-formItem--required)", "textTransform-label-formItem--required": "var(--xmlui-textTransform-label-formItem--required)", "textColor-requiredMark-formItem": "var(--xmlui-textColor-requiredMark-formItem)", "textColor-optionalTag-formItem": "var(--xmlui-textColor-optionalTag-formItem)"}'`;
-const container$7 = "_container_2lidb_14";
-const top$2 = "_top_2lidb_21";
-const end = "_end_2lidb_26";
-const bottom$2 = "_bottom_2lidb_32";
-const start = "_start_2lidb_37";
-const shrinkToLabel = "_shrinkToLabel_2lidb_43";
-const inputLabel = "_inputLabel_2lidb_46";
-const labelBreak = "_labelBreak_2lidb_59";
-const required = "_required_2lidb_64";
-const disabled$d = "_disabled_2lidb_71";
-const requiredMark = "_requiredMark_2lidb_75";
-const optionalTag = "_optionalTag_2lidb_79";
-const itemWithLabel = "_itemWithLabel_2lidb_83";
-const wrapper$g = "_wrapper_2lidb_88";
-const validationResultWrapper = "_validationResultWrapper_2lidb_96";
-const validationAnchor = "_validationAnchor_2lidb_99";
-const validationMessageAbsolute = "_validationMessageAbsolute_2lidb_102";
-const helperTextContainer = "_helperTextContainer_2lidb_109";
-const labelWrapper$1 = "_labelWrapper_2lidb_112";
+const container$7 = "_container_1jzhh_14";
+const top$2 = "_top_1jzhh_21";
+const end = "_end_1jzhh_26";
+const bottom$2 = "_bottom_1jzhh_32";
+const start = "_start_1jzhh_37";
+const before = "_before_1jzhh_43";
+const after = "_after_1jzhh_51";
+const shrinkToLabel = "_shrinkToLabel_1jzhh_59";
+const inputLabel = "_inputLabel_1jzhh_62";
+const labelBreak = "_labelBreak_1jzhh_75";
+const required = "_required_1jzhh_80";
+const disabled$d = "_disabled_1jzhh_87";
+const requiredMark = "_requiredMark_1jzhh_91";
+const optionalTag = "_optionalTag_1jzhh_95";
+const itemWithLabel = "_itemWithLabel_1jzhh_99";
+const wrapper$g = "_wrapper_1jzhh_105";
+const validationResultWrapper = "_validationResultWrapper_1jzhh_113";
+const validationAnchor = "_validationAnchor_1jzhh_116";
+const validationMessageAbsolute = "_validationMessageAbsolute_1jzhh_119";
+const helperTextContainer = "_helperTextContainer_1jzhh_126";
+const labelWrapper$1 = "_labelWrapper_1jzhh_129";
 const styles$1k = {
   themeVars: themeVars$12,
   container: container$7,
@@ -541,6 +550,8 @@ const styles$1k = {
   end,
   bottom: bottom$2,
   start,
+  before,
+  after,
   shrinkToLabel,
   inputLabel,
   labelBreak,
@@ -1799,17 +1810,17 @@ function simpleStringify(value) {
 function prefixLines(text2, prefix) {
   return text2.split("\n").map((line) => `${prefix}${line}`).join("\n");
 }
-function formatDiff(path, before, after) {
-  const beforeJson = simpleStringify(before);
-  const afterJson = simpleStringify(after);
+function formatDiff(path, before2, after2) {
+  const beforeJson = simpleStringify(before2);
+  const afterJson = simpleStringify(after2);
   const diffPretty = `path: ${path}
 ${prefixLines(beforeJson, "- ")}
 ${prefixLines(afterJson, "+ ")}`;
   return {
     path,
     type: "update",
-    before,
-    after,
+    before: before2,
+    after: after2,
     beforeJson,
     afterJson,
     diffText: `path: ${path}
@@ -2176,16 +2187,20 @@ const MemoizedItem = memo(
     node,
     renderChild: renderChild2,
     layoutContext,
-    contextVars = EMPTY_OBJECT
+    contextVars = EMPTY_OBJECT,
+    vars: vars2,
+    functions
   }) => {
     const shallowMemoedContextVars = useShallowCompareMemoize(contextVars);
     const nodeWithContextVars = useMemo(
       () => ({
         type: "Container",
         contextVars: shallowMemoedContextVars,
+        ...vars2 ? { vars: vars2 } : void 0,
+        ...functions ? { functions } : void 0,
         children: Array.isArray(node) ? node : [node]
       }),
-      [node, shallowMemoedContextVars]
+      [node, shallowMemoedContextVars, vars2, functions]
     );
     return /* @__PURE__ */ jsx(Fragment, { children: renderChild2(nodeWithContextVars, layoutContext) });
   }
@@ -3267,6 +3282,30 @@ const RadioGroup = forwardRef(function RadioGroup2({
     },
     [updateValue, readOnly2]
   );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (readOnly2 || !enabled2) return;
+      const isVerticalKey = e.key === "ArrowDown" || e.key === "ArrowUp";
+      const isHorizontalKey = e.key === "ArrowRight" || e.key === "ArrowLeft";
+      if (!isVerticalKey && !isHorizontalKey) return;
+      if (orientation === "horizontal" && isVerticalKey) return;
+      if (orientation === "vertical" && isHorizontalKey) return;
+      const isNext = e.key === "ArrowDown" || e.key === "ArrowRight";
+      const radios = Array.from(
+        radioGroupRef.current?.querySelectorAll('[role="radio"]:not(:disabled)') ?? []
+      );
+      if (radios.length === 0) return;
+      const focused22 = e.target;
+      const currentIndex = radios.indexOf(focused22);
+      if (currentIndex === -1) return;
+      const nextIndex = isNext ? (currentIndex + 1) % radios.length : (currentIndex - 1 + radios.length) % radios.length;
+      const nextValue = radios[nextIndex].getAttribute("value");
+      if (nextValue != null) {
+        onInputChange(nextValue);
+      }
+    },
+    [readOnly2, enabled2, orientation, onInputChange]
+  );
   const handleOnFocus = useCallback(
     (ev) => {
       setFocused(true);
@@ -3306,6 +3345,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
       id,
       onBlur: handleOnBlur,
       onFocus: handleOnFocus,
+      onKeyDown: handleKeyDown,
       onValueChange: onInputChange,
       value,
       disabled: !enabled2,
@@ -3595,7 +3635,8 @@ const defaultProps$1e = {
   shrinkToLabel: false,
   cloneStyle: false,
   requireLabelMode: "markRequired",
-  isInputTemplateUsed: false
+  isInputTemplateUsed: false,
+  compactInlineLabel: false
 };
 const numberRegex = /^[0-9]+$/;
 const ItemWithLabel = forwardRef(function ItemWithLabel2({
@@ -3604,7 +3645,7 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
   style: style2 = {},
   className,
   label: label2,
-  labelBreak: labelBreak2 = defaultProps$1e.labelBreak,
+  labelBreak: labelBreak2,
   labelWidth,
   enabled: enabled2 = defaultProps$1e.enabled,
   required: required2 = defaultProps$1e.required,
@@ -3622,6 +3663,7 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
   testId,
   cloneStyle = defaultProps$1e.cloneStyle,
   requireLabelMode = defaultProps$1e.requireLabelMode,
+  compactInlineLabel = defaultProps$1e.compactInlineLabel,
   ...rest
 }, ref) {
   const generatedId2 = useId();
@@ -3630,6 +3672,14 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
     (value) => value?.itemLabelPosition
   );
   const resolvedLabelPosition = labelPosition ?? formItemLabelPosition ?? "top";
+  const formItemLabelWidth = useFormContextPart(
+    (value) => value?.itemLabelWidth
+  );
+  const resolvedLabelWidthProp = labelWidth ?? formItemLabelWidth;
+  const formItemLabelBreak = useFormContextPart(
+    (value) => value?.itemLabelBreak
+  );
+  const resolvedLabelBreak = labelBreak2 ?? formItemLabelBreak ?? defaultProps$1e.labelBreak;
   const isInHorizontalStack = layoutContext?.orientation === "horizontal";
   const [inputElement, setInputElement] = useState(null);
   const [inputHeight, setInputHeight] = useState(void 0);
@@ -3647,7 +3697,8 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
       return () => observer.disconnect();
     }
   }, [inputElement]);
-  const labelWrapperHeight = resolvedLabelPosition === "start" || resolvedLabelPosition === "end" ? inputHeight : "auto";
+  const labelWrapperHeight = resolvedLabelPosition === "start" || resolvedLabelPosition === "end" || resolvedLabelPosition === "before" || resolvedLabelPosition === "after" ? inputHeight : "auto";
+  const resolvedLabelWidth = resolvedLabelWidthProp !== void 0 ? numberRegex.test(resolvedLabelWidthProp) ? `${resolvedLabelWidthProp}px` : resolvedLabelWidthProp : compactInlineLabel && (resolvedLabelPosition === "before" || resolvedLabelPosition === "after") ? "fit-content" : void 0;
   const isRadioGroup = React__default.isValidElement(children) && children.type === ThemedRadioGroup;
   if (label2 === void 0 && !validationResult) {
     return /* @__PURE__ */ jsx(Part, { partId: PART_LABELED_ITEM, children: /* @__PURE__ */ jsx(Slot, { ...rest, style: style2, className, id: inputId, ref, children }) });
@@ -3668,8 +3719,10 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
             className: classnames(styles$1k.container, {
               [styles$1k.top]: resolvedLabelPosition === "top",
               [styles$1k.bottom]: resolvedLabelPosition === "bottom",
-              [styles$1k.start]: resolvedLabelPosition === "start",
-              [styles$1k.end]: resolvedLabelPosition === "end",
+              [styles$1k.start]: resolvedLabelPosition === "start" || !compactInlineLabel && resolvedLabelPosition === "before",
+              [styles$1k.end]: resolvedLabelPosition === "end" || !compactInlineLabel && resolvedLabelPosition === "after",
+              [styles$1k.before]: compactInlineLabel && resolvedLabelPosition === "before",
+              [styles$1k.after]: compactInlineLabel && resolvedLabelPosition === "after",
               [styles$1k.shrinkToLabel]: shrinkToLabel2
             }),
             dir: rest?.direction,
@@ -3693,13 +3746,13 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
                       }),
                       style: {
                         ...labelStyle,
-                        width: labelWidth && numberRegex.test(labelWidth) ? `${labelWidth}px` : labelWidth,
-                        flexShrink: labelWidth !== void 0 ? 0 : void 0
+                        width: resolvedLabelWidth,
+                        flexShrink: resolvedLabelWidthProp !== void 0 ? 0 : void 0
                       },
                       className: classnames(styles$1k.inputLabel, {
                         [styles$1k.required]: required2,
                         [styles$1k.disabled]: !enabled2,
-                        [styles$1k.labelBreak]: labelBreak2
+                        [styles$1k.labelBreak]: resolvedLabelBreak
                       }),
                       children: [
                         label2,
@@ -3741,8 +3794,10 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
       className: classnames(styles$1k.container, {
         [styles$1k.top]: resolvedLabelPosition === "top",
         [styles$1k.bottom]: resolvedLabelPosition === "bottom",
-        [styles$1k.start]: resolvedLabelPosition === "start",
-        [styles$1k.end]: resolvedLabelPosition === "end",
+        [styles$1k.start]: resolvedLabelPosition === "start" || !compactInlineLabel && resolvedLabelPosition === "before",
+        [styles$1k.end]: resolvedLabelPosition === "end" || !compactInlineLabel && resolvedLabelPosition === "after",
+        [styles$1k.before]: compactInlineLabel && resolvedLabelPosition === "before",
+        [styles$1k.after]: compactInlineLabel && resolvedLabelPosition === "after",
         [styles$1k.shrinkToLabel]: shrinkToLabel2
       }),
       dir: rest?.direction,
@@ -3761,13 +3816,13 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
                 onClick: onLabelClick || (() => document.getElementById(inputId)?.focus()),
                 style: {
                   ...labelStyle,
-                  width: labelWidth && numberRegex.test(labelWidth) ? `${labelWidth}px` : labelWidth,
-                  flexShrink: labelWidth !== void 0 ? 0 : void 0
+                  width: resolvedLabelWidth,
+                  flexShrink: resolvedLabelWidthProp !== void 0 ? 0 : void 0
                 },
                 className: classnames(styles$1k.inputLabel, {
                   [styles$1k.required]: required2,
                   [styles$1k.disabled]: !enabled2,
-                  [styles$1k.labelBreak]: labelBreak2
+                  [styles$1k.labelBreak]: resolvedLabelBreak
                 }),
                 children: [
                   label2,
@@ -9259,26 +9314,24 @@ const localLinkComponentRenderer = wrapComponent(
   }
 );
 const themeVars$O = `'{"Input:borderRadius-Checkbox": "var(--xmlui-borderRadius-Checkbox)", "Input:borderColor-Checkbox": "var(--xmlui-borderColor-Checkbox)", "Input:backgroundColor-Checkbox": "var(--xmlui-backgroundColor-Checkbox)", "Input:outlineWidth-Checkbox--focus": "var(--xmlui-outlineWidth-Checkbox--focus)", "Input:outlineColor-Checkbox--focus": "var(--xmlui-outlineColor-Checkbox--focus)", "Input:outlineStyle-Checkbox--focus": "var(--xmlui-outlineStyle-Checkbox--focus)", "Input:outlineOffset-Checkbox--focus": "var(--xmlui-outlineOffset-Checkbox--focus)", "Input:borderRadius-Checkbox--error": "var(--xmlui-borderRadius-Checkbox--error)", "Input:borderColor-Checkbox--error": "var(--xmlui-borderColor-Checkbox--error)", "Input:backgroundColor-Checkbox--error": "var(--xmlui-backgroundColor-Checkbox--error)", "Input:outlineWidth-Checkbox--error--focus": "var(--xmlui-outlineWidth-Checkbox--error--focus)", "Input:outlineColor-Checkbox--error--focus": "var(--xmlui-outlineColor-Checkbox--error--focus)", "Input:outlineStyle-Checkbox--error--focus": "var(--xmlui-outlineStyle-Checkbox--error--focus)", "Input:outlineOffset-Checkbox--error--focus": "var(--xmlui-outlineOffset-Checkbox--error--focus)", "Input:borderRadius-Checkbox--warning": "var(--xmlui-borderRadius-Checkbox--warning)", "Input:borderColor-Checkbox--warning": "var(--xmlui-borderColor-Checkbox--warning)", "Input:backgroundColor-Checkbox--warning": "var(--xmlui-backgroundColor-Checkbox--warning)", "Input:outlineWidth-Checkbox--warning--focus": "var(--xmlui-outlineWidth-Checkbox--warning--focus)", "Input:outlineColor-Checkbox--warning--focus": "var(--xmlui-outlineColor-Checkbox--warning--focus)", "Input:outlineStyle-Checkbox--warning--focus": "var(--xmlui-outlineStyle-Checkbox--warning--focus)", "Input:outlineOffset-Checkbox--warning--focus": "var(--xmlui-outlineOffset-Checkbox--warning--focus)", "Input:borderRadius-Checkbox--success": "var(--xmlui-borderRadius-Checkbox--success)", "Input:borderColor-Checkbox--success": "var(--xmlui-borderColor-Checkbox--success)", "Input:backgroundColor-Checkbox--success": "var(--xmlui-backgroundColor-Checkbox--success)", "Input:outlineWidth-Checkbox--success--focus": "var(--xmlui-outlineWidth-Checkbox--success--focus)", "Input:outlineColor-Checkbox--success--focus": "var(--xmlui-outlineColor-Checkbox--success--focus)", "Input:outlineStyle-Checkbox--success--focus": "var(--xmlui-outlineStyle-Checkbox--success--focus)", "Input:outlineOffset-Checkbox--success--focus": "var(--xmlui-outlineOffset-Checkbox--success--focus)", "Input:borderColor-Checkbox--hover": "var(--xmlui-borderColor-Checkbox--hover)", "Input:backgroundColor-Checkbox--disabled": "var(--xmlui-backgroundColor-Checkbox--disabled)", "Input:borderColor-Checkbox--disabled": "var(--xmlui-borderColor-Checkbox--disabled)", "Input:borderColor-checked-Checkbox": "var(--xmlui-borderColor-checked-Checkbox)", "Input:backgroundColor-checked-Checkbox": "var(--xmlui-backgroundColor-checked-Checkbox)", "Input:borderColor-checked-Checkbox--error": "var(--xmlui-borderColor-checked-Checkbox--error)", "Input:backgroundColor-checked-Checkbox--error": "var(--xmlui-backgroundColor-checked-Checkbox--error)", "Input:borderColor-checked-Checkbox--warning": "var(--xmlui-borderColor-checked-Checkbox--warning)", "Input:backgroundColor-checked-Checkbox--warning": "var(--xmlui-backgroundColor-checked-Checkbox--warning)", "Input:borderColor-checked-Checkbox--success": "var(--xmlui-borderColor-checked-Checkbox--success)", "Input:backgroundColor-checked-Checkbox--success": "var(--xmlui-backgroundColor-checked-Checkbox--success)", "backgroundColor-indicator-Checkbox": "var(--xmlui-backgroundColor-indicator-Checkbox)", "Input:borderColor-Switch--hover": "var(--xmlui-borderColor-Switch--hover)", "Input:backgroundColor-Switch--disabled": "var(--xmlui-backgroundColor-Switch--disabled)", "Input:borderColor-Switch--disabled": "var(--xmlui-borderColor-Switch--disabled)", "Input:borderColor-checked-Switch": "var(--xmlui-borderColor-checked-Switch)", "Input:backgroundColor-checked-Switch": "var(--xmlui-backgroundColor-checked-Switch)", "Input:borderColor-checked-Switch--error": "var(--xmlui-borderColor-checked-Switch--error)", "Input:backgroundColor-checked-Switch--error": "var(--xmlui-backgroundColor-checked-Switch--error)", "Input:borderColor-checked-Switch--warning": "var(--xmlui-borderColor-checked-Switch--warning)", "Input:backgroundColor-checked-Switch--warning": "var(--xmlui-backgroundColor-checked-Switch--warning)", "Input:borderColor-checked-Switch--success": "var(--xmlui-borderColor-checked-Switch--success)", "Input:backgroundColor-checked-Switch--success": "var(--xmlui-backgroundColor-checked-Switch--success)", "Input:backgroundColor-Switch": "var(--xmlui-backgroundColor-Switch)", "Input:borderColor-Switch": "var(--xmlui-borderColor-Switch)", "backgroundColor-indicator-Switch": "var(--xmlui-backgroundColor-indicator-Switch)", "backgroundColor-checked-Switch": "var(--xmlui-backgroundColor-checked-Switch)", "backgroundColor-indicator-checked-Switch": "var(--xmlui-backgroundColor-indicator-checked-Switch)", "backgroundColor-Switch-indicator--disabled": "var(--xmlui-backgroundColor-Switch-indicator--disabled)", "Input:outlineWidth-Switch--focus": "var(--xmlui-outlineWidth-Switch--focus)", "Input:outlineColor-Switch--focus": "var(--xmlui-outlineColor-Switch--focus)", "Input:outlineStyle-Switch--focus": "var(--xmlui-outlineStyle-Switch--focus)", "Input:outlineOffset-Switch--focus": "var(--xmlui-outlineOffset-Switch--focus)", "Input:borderColor-Switch--error": "var(--xmlui-borderColor-Switch--error)", "Input:borderColor-Switch--warning": "var(--xmlui-borderColor-Switch--warning)", "Input:borderColor-Switch--success": "var(--xmlui-borderColor-Switch--success)"}'`;
-const resetAppearance = "_resetAppearance_xjsdj_14";
-const label = "_label_xjsdj_21";
-const inputContainer = "_inputContainer_xjsdj_24";
-const checkbox = "_checkbox_xjsdj_31";
-const forceHover = "_forceHover_xjsdj_62";
-const error$d = "_error_xjsdj_65";
-const warning$c = "_warning_xjsdj_76";
-const valid$d = "_valid_xjsdj_87";
-const noTransition = "_noTransition_xjsdj_177";
+const resetAppearance = "_resetAppearance_xdymb_14";
+const label = "_label_xdymb_21";
+const inputContainer = "_inputContainer_xdymb_24";
+const checkbox = "_checkbox_xdymb_31";
+const error$d = "_error_xdymb_62";
+const warning$c = "_warning_xdymb_73";
+const valid$d = "_valid_xdymb_84";
+const noTransition = "_noTransition_xdymb_174";
 const styles$14 = {
   themeVars: themeVars$O,
   resetAppearance,
   label,
   inputContainer,
   checkbox,
-  forceHover,
   error: error$d,
   warning: warning$c,
   valid: valid$d,
-  "switch": "_switch_xjsdj_146",
+  "switch": "_switch_xdymb_143",
   noTransition
 };
 const defaultProps$15 = {
@@ -9309,7 +9362,6 @@ const Toggle = forwardRef(function Toggle2({
   autoFocus,
   registerComponentApi,
   inputRenderer,
-  forceHover: forceHover2 = false,
   tabIndex,
   "aria-label": ariaLabel,
   ...rest
@@ -9436,7 +9488,6 @@ const Toggle = forwardRef(function Toggle2({
             [styles$14.error]: validationStatus === "error",
             [styles$14.warning]: validationStatus === "warning",
             [styles$14.valid]: validationStatus === "valid",
-            [styles$14.forceHover]: forceHover2,
             [styles$14.noTransition]: suppressTransition
           }
         )
@@ -9464,7 +9515,6 @@ const Toggle = forwardRef(function Toggle2({
     variant,
     indeterminate,
     autoFocus,
-    forceHover2,
     suppressTransition
   ]);
   return inputRenderer ? /* @__PURE__ */ jsxs("label", { className: classnames(styles$14.label, classes?.[COMPONENT_PART_KEY]), children: [
@@ -10685,7 +10735,7 @@ function ApiInterceptorProvider({
       return;
     }
     void (async () => {
-      const { initMock } = await import("./initMock-qSARW6AY.js");
+      const { initMock } = await import("./initMock-CAH6z4DK.js");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -10702,7 +10752,7 @@ function ApiInterceptorProvider({
           if (process.env.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
               useWorker ? import("./apiInterceptorWorker-CDO-h2U4.js") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-qSARW6AY.js")
+              import("./initMock-CAH6z4DK.js")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -10739,7 +10789,7 @@ function ApiInterceptorProvider({
         void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-CDO-h2U4.js"),
-            import("./initMock-qSARW6AY.js")
+            import("./initMock-CAH6z4DK.js")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -13458,27 +13508,28 @@ const navLinkStyles = {
   iconAlignEnd
 };
 const themeVars$I = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "width-navPanel-collapsed-App": "var(--xmlui-width-navPanel-collapsed-App)", "backgroundColor-navPanel-App": "var(--xmlui-backgroundColor-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "backgroundColor-content-App": "var(--xmlui-backgroundColor-content-App)", "borderLeft-content-App": "var(--xmlui-borderLeft-content-App)", "borderRight-navPanelWrapper-App": "var(--xmlui-borderRight-navPanelWrapper-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "maxWidth-content-App--withToc": "var(--xmlui-maxWidth-content-App--withToc)", "maxWidth-App": "var(--xmlui-maxWidth-App)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
-const appContainer = "_appContainer_x4udf_14";
-const vertical$4 = "_vertical_x4udf_25";
-const mainContentArea = "_mainContentArea_x4udf_28";
-const noScrollbarGutters = "_noScrollbarGutters_x4udf_31";
-const scrollWholePage = "_scrollWholePage_x4udf_34";
-const navPanelWrapper = "_navPanelWrapper_x4udf_37";
-const navPanelWrapperCollapsed = "_navPanelWrapperCollapsed_x4udf_42";
-const footerWrapper = "_footerWrapper_x4udf_47";
-const horizontal$4 = "_horizontal_x4udf_50";
-const sticky = "_sticky_x4udf_56";
-const headerWrapper$1 = "_headerWrapper_x4udf_65";
-const desktop = "_desktop_x4udf_81";
-const pagesContainer = "_pagesContainer_x4udf_112";
-const pageContentContainer = "_pageContentContainer_x4udf_123";
-const verticalFullHeader = "_verticalFullHeader_x4udf_150";
-const noFooter = "_noFooter_x4udf_156";
-const nonSticky = "_nonSticky_x4udf_209";
-const mainContentRow = "_mainContentRow_x4udf_240";
-const withToc = "_withToc_x4udf_369";
-const navPanelCollapsed = "_navPanelCollapsed_x4udf_372";
-const withDefaultContentPadding = "_withDefaultContentPadding_x4udf_378";
+const appContainer = "_appContainer_1rig9_14";
+const vertical$4 = "_vertical_1rig9_25";
+const mainContentArea = "_mainContentArea_1rig9_28";
+const noScrollbarGutters = "_noScrollbarGutters_1rig9_31";
+const scrollWholePage = "_scrollWholePage_1rig9_34";
+const navPanelWrapper = "_navPanelWrapper_1rig9_37";
+const navPanelWrapperCollapsed = "_navPanelWrapperCollapsed_1rig9_42";
+const footerWrapper = "_footerWrapper_1rig9_47";
+const horizontal$4 = "_horizontal_1rig9_50";
+const sticky = "_sticky_1rig9_56";
+const headerWrapper$1 = "_headerWrapper_1rig9_65";
+const desktop = "_desktop_1rig9_81";
+const pagesContainer = "_pagesContainer_1rig9_112";
+const pageContentContainer = "_pageContentContainer_1rig9_123";
+const verticalFullHeader = "_verticalFullHeader_1rig9_150";
+const noFooter = "_noFooter_1rig9_156";
+const nonSticky = "_nonSticky_1rig9_209";
+const mainContentRow = "_mainContentRow_1rig9_240";
+const fitContent = "_fitContent_1rig9_258";
+const withToc = "_withToc_1rig9_385";
+const navPanelCollapsed = "_navPanelCollapsed_1rig9_388";
+const withDefaultContentPadding = "_withDefaultContentPadding_1rig9_394";
 const styles$X = {
   themeVars: themeVars$I,
   appContainer,
@@ -13499,6 +13550,7 @@ const styles$X = {
   noFooter,
   nonSticky,
   mainContentRow,
+  fitContent,
   withToc,
   navPanelCollapsed,
   withDefaultContentPadding
@@ -14302,6 +14354,7 @@ const AppPagesSlot = createSlot("AppPagesSlot", styles$X.pagesContainer);
 const defaultProps$Y = {
   scrollWholePage: true,
   noScrollbarGutters: false,
+  fitContent: false,
   defaultTone: void 0,
   defaultTheme: void 0,
   autoDetectTone: false,
@@ -14332,6 +14385,7 @@ function App({
   loggedInUser,
   scrollWholePage: scrollWholePage2 = defaultProps$Y.scrollWholePage,
   noScrollbarGutters: noScrollbarGutters2 = defaultProps$Y.noScrollbarGutters,
+  fitContent: fitContent2 = defaultProps$Y.fitContent,
   onReady = defaultProps$Y.onReady,
   onMessageReceived = defaultProps$Y.onMessageReceived,
   onKeyDown = defaultProps$Y.onKeyDown,
@@ -14564,7 +14618,8 @@ function App({
     classes?.[COMPONENT_PART_KEY],
     styles$X.appContainer,
     {
-      [styles$X.scrollWholePage]: scrollWholePage2,
+      [styles$X.scrollWholePage]: scrollWholePage2 && !fitContent2,
+      [styles$X.fitContent]: fitContent2,
       [styles$X.noScrollbarGutters]: noScrollbarGutters2,
       [styles$X.noFooter]: !footerSticky,
       "media-large": mediaSize.largeScreen,
@@ -14631,6 +14686,7 @@ function App({
       }),
       style: styleWithHelpers,
       ref: shouldContainerScroll ? pageScrollRef : void 0,
+      "data-xmlui-app-fit-content": fitContent2 ? "true" : void 0,
       ...rest,
       children: config.useVerticalFullHeaderStructure ? /* @__PURE__ */ jsxs(Fragment, { children: [
         renderHeaderSlot(),
@@ -16155,17 +16211,15 @@ function hierarchyToNative(hierarchyData, fieldConfig) {
     treeItemsById
   };
 }
-const TreeRow = memo(({ index, data }) => {
+const TreeRow = memo(({ index, data, isSelected, isFocused }) => {
   const {
     nodes,
     toggleNode,
-    selectedId,
     itemRenderer,
     itemClickExpands,
     onItemClick,
     onSelection,
     lookupEventHandler,
-    focusedIndex,
     treeContainerRef,
     iconCollapsed,
     iconExpanded,
@@ -16175,8 +16229,6 @@ const TreeRow = memo(({ index, data }) => {
     spinnerDelay
   } = data;
   const treeItem = nodes[index];
-  const isFocused = focusedIndex === index && focusedIndex >= 0;
-  const isSelected = String(selectedId) === String(treeItem.key);
   const nodeWithState = treeItem;
   const isLoading = nodeWithState.loadingState === "loading";
   const [showSpinner, setShowSpinner] = useState(false);
@@ -16331,6 +16383,16 @@ const TreeRow = memo(({ index, data }) => {
     }
   ) });
 });
+const TreeMemoizedRow = memo(
+  ({ index, data, isSelected, isFocused }) => /* @__PURE__ */ jsx(TreeRow, { index, data, isSelected, isFocused }),
+  (prev, next) => {
+    if (prev.data !== next.data) return false;
+    if (prev.index !== next.index) return false;
+    if (prev.isSelected !== next.isSelected) return false;
+    if (prev.isFocused !== next.isFocused) return false;
+    return true;
+  }
+);
 const emptyTreeData = {
   treeData: [],
   treeItemsById: {}
@@ -17146,13 +17208,11 @@ const TreeComponent = memo((props) => {
     return {
       nodes: flatTreeData,
       toggleNode,
-      selectedId: effectiveSelectedId,
       itemRenderer,
       itemClickExpands,
       onItemClick,
       onSelection: (node) => setSelectedNodeById(node.key),
       lookupEventHandler,
-      focusedIndex,
       onKeyDown: handleKeyDown,
       treeContainerRef,
       iconCollapsed,
@@ -17165,13 +17225,11 @@ const TreeComponent = memo((props) => {
   }, [
     flatTreeData,
     toggleNode,
-    effectiveSelectedId,
     itemRenderer,
     itemClickExpands,
     onItemClick,
     setSelectedNodeById,
     lookupEventHandler,
-    focusedIndex,
     handleKeyDown,
     iconCollapsed,
     iconExpanded,
@@ -17989,7 +18047,9 @@ const TreeComponent = memo((props) => {
       children: /* @__PURE__ */ jsx(Virtualizer, { ref: listRef, itemSize: measuredItemSize || itemHeight, children: flatTreeData.map((node, index) => {
         const isFirstItem = index === 0;
         const shouldMeasure = isFirstItem && fixedItemSize;
-        return shouldMeasure ? /* @__PURE__ */ jsx("div", { ref: firstItemRef, children: /* @__PURE__ */ jsx(TreeRow, { index, data: itemData }) }, node.key) : /* @__PURE__ */ jsx(TreeRow, { index, data: itemData }, node.key);
+        const isSelected = String(effectiveSelectedId) === String(node.key);
+        const isFocused = focusedIndex === index && focusedIndex >= 0;
+        return shouldMeasure ? /* @__PURE__ */ jsx("div", { ref: firstItemRef, children: /* @__PURE__ */ jsx(TreeMemoizedRow, { index, data: itemData, isSelected, isFocused }) }, node.key) : /* @__PURE__ */ jsx(TreeMemoizedRow, { index, data: itemData, isSelected, isFocused }, node.key);
       }) })
     }
   );
@@ -18397,6 +18457,57 @@ const TreeMd = createMetadata({
     [`outlineOffset-${COMP$17}--focus`]: "$outlineOffset--focus"
   }
 });
+const defaultItemTemplate = {
+  type: "HStack",
+  props: {
+    verticalAlignment: "center",
+    gap: "$space-4"
+  },
+  children: [
+    {
+      type: "Icon",
+      when: "{$item.icon}",
+      props: {
+        name: "{$item.icon}"
+      }
+    },
+    {
+      type: "Text",
+      props: {
+        value: "{$item.name}"
+      }
+    }
+  ]
+};
+function TreeWithStableRenderer({ renderChild: renderChild2, itemTemplate, ...treeProps }) {
+  const renderChildRef = useRef(renderChild2);
+  renderChildRef.current = renderChild2;
+  const stableRenderChildRef = useRef(
+    (node, ctx) => renderChildRef.current(node, ctx)
+  );
+  const stableItemRenderer = useMemo(
+    () => (flatTreeNode) => {
+      const itemContext = {
+        id: flatTreeNode.id,
+        name: flatTreeNode.displayName,
+        depth: flatTreeNode.depth,
+        isExpanded: flatTreeNode.isExpanded,
+        hasChildren: flatTreeNode.hasChildren,
+        ...flatTreeNode
+      };
+      return /* @__PURE__ */ jsx(
+        MemoizedItem,
+        {
+          node: itemTemplate ?? defaultItemTemplate,
+          contextVars: { $item: itemContext },
+          renderChild: stableRenderChildRef.current
+        }
+      );
+    },
+    [itemTemplate]
+  );
+  return /* @__PURE__ */ jsx(TreeComponent, { ...treeProps, itemRenderer: stableItemRenderer });
+}
 const treeComponentRenderer = wrapComponent(
   COMP$17,
   TreeComponent,
@@ -18438,33 +18549,13 @@ const treeComponentRenderer = wrapComponent(
       "itemTemplate"
     ],
     customRender(_props, { node, extractValue, renderChild: renderChild2, classes, lookupEventHandler, registerComponentApi }) {
-      const defaultItemTemplate = {
-        type: "HStack",
-        props: {
-          verticalAlignment: "center",
-          gap: "$space-4"
-        },
-        children: [
-          {
-            type: "Icon",
-            when: "{$item.icon}",
-            props: {
-              name: "{$item.icon}"
-            }
-          },
-          {
-            type: "Text",
-            props: {
-              value: "{$item.name}"
-            }
-          }
-        ]
-      };
       return /* @__PURE__ */ jsx(
-        TreeComponent,
+        TreeWithStableRenderer,
         {
           registerComponentApi,
           classes,
+          renderChild: renderChild2,
+          itemTemplate: node.props.itemTemplate,
           data: extractValue(node.props.data),
           dataFormat: extractValue(node.props.dataFormat),
           idField: extractValue(node.props.idField),
@@ -18519,40 +18610,7 @@ const treeComponentRenderer = wrapComponent(
           onPasteAction: lookupEventHandler("pasteAction"),
           onDeleteAction: lookupEventHandler("deleteAction"),
           overflow: extractValue(node.props.overflow),
-          lookupEventHandler: node.events?.contextMenu ? lookupEventHandler : void 0,
-          itemRenderer: (flatTreeNode) => {
-            const itemContext = {
-              id: flatTreeNode.id,
-              // $item.id - Internal unique identifier
-              name: flatTreeNode.displayName,
-              // $item.name - Primary display text
-              depth: flatTreeNode.depth,
-              // $item.depth - Nesting level (0-based)
-              isExpanded: flatTreeNode.isExpanded,
-              // $item.isExpanded - Expansion state
-              hasChildren: flatTreeNode.hasChildren,
-              // $item.hasChildren - Children indicator
-              // - icon, iconExpanded, iconCollapsed (from icon fields)
-              // - uid, path, parentIds, selectable, children (TreeNode internals)
-              // - All original source data properties (custom fields)
-              ...flatTreeNode
-            };
-            return node.props.itemTemplate ? /* @__PURE__ */ jsx(
-              MemoizedItem,
-              {
-                node: node.props.itemTemplate,
-                contextVars: { $item: itemContext },
-                renderChild: renderChild2
-              }
-            ) : /* @__PURE__ */ jsx(
-              MemoizedItem,
-              {
-                node: defaultItemTemplate,
-                contextVars: { $item: itemContext },
-                renderChild: renderChild2
-              }
-            );
-          }
+          lookupEventHandler: node.events?.contextMenu ? lookupEventHandler : void 0
         }
       );
     }
@@ -18611,39 +18669,42 @@ const MessageListenerMd = createMetadata({
   }
 });
 const messageListenerComponentRenderer = wrapComponent(COMP$15, MessageListenerNative, MessageListenerMd, {});
-const themeVars$B = `'{"textColor-pagination-Table": "var(--xmlui-textColor-pagination-Table)", "backgroundColor-Table": "var(--xmlui-backgroundColor-Table)", "textColor-Table": "var(--xmlui-textColor-Table)", "backgroundColor-row-Table": "var(--xmlui-backgroundColor-row-Table)", "backgroundColor-row-Table--hover": "var(--xmlui-backgroundColor-row-Table--hover)", "backgroundColor-selected-Table": "var(--xmlui-backgroundColor-selected-Table)", "backgroundColor-selected-Table--hover": "var(--xmlui-backgroundColor-selected-Table--hover)", "backgroundColor-evenRow-Table": "var(--xmlui-backgroundColor-evenRow-Table)", "backgroundColor-oddRow-Table": "var(--xmlui-backgroundColor-oddRow-Table)", "backgroundColor-heading-Table": "var(--xmlui-backgroundColor-heading-Table)", "backgroundColor-heading-Table--hover": "var(--xmlui-backgroundColor-heading-Table--hover)", "backgroundColor-heading-Table--active": "var(--xmlui-backgroundColor-heading-Table--active)", "padding-heading-Table": "var(--xmlui-padding-heading-Table)", "paddingHorizontal-heading-Table": "var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table))", "paddingVertical-heading-Table": "var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table))", "paddingLeft-heading-Table": "var(--xmlui-paddingLeft-heading-Table, var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingRight-heading-Table": "var(--xmlui-paddingRight-heading-Table, var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingTop-heading-Table": "var(--xmlui-paddingTop-heading-Table, var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingBottom-heading-Table": "var(--xmlui-paddingBottom-heading-Table, var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table)))", "padding-cell-Table": "var(--xmlui-padding-cell-Table)", "paddingHorizontal-cell-Table": "var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table))", "paddingVertical-cell-Table": "var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table))", "paddingLeft-cell-Table": "var(--xmlui-paddingLeft-cell-Table, var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingRight-cell-Table": "var(--xmlui-paddingRight-cell-Table, var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingTop-cell-Table": "var(--xmlui-paddingTop-cell-Table, var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingBottom-cell-Table": "var(--xmlui-paddingBottom-cell-Table, var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingHorizontal-cell-first-Table": "var(--xmlui-paddingHorizontal-cell-first-Table)", "paddingHorizontal-cell-last-Table": "var(--xmlui-paddingHorizontal-cell-last-Table)", "border-cell-Table": "var(--xmlui-border-cell-Table)", "borderHorizontal-cell-Table": "var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table))", "borderVertical-cell-Table": "var(--xmlui-borderVertical-cell-Table, var(--xmlui-border-cell-Table))", "borderLeft-cell-Table": "var(--xmlui-borderLeft-cell-Table, var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table)))", "borderRight-cell-Table": "var(--xmlui-borderRight-cell-Table, var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table)))", "borderTop-cell-Table": "var(--xmlui-borderTop-cell-Table, var(--xmlui-borderVertical-cell-Table, var(--xmlui-border-cell-Table)))", "borderBottom-cell-Table": "var(--xmlui-borderBottom-cell-Table)", "borderWidth-cell-Table": "var(--xmlui-borderWidth-cell-Table)", "borderHorizontalWidth-cell-Table": "var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table))", "borderLeftWidth-cell-Table": "var(--xmlui-borderLeftWidth-cell-Table, var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderRightWidth-cell-Table": "var(--xmlui-borderRightWidth-cell-Table, var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderVerticalWidth-cell-Table": "var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table))", "borderTopWidth-cell-Table": "var(--xmlui-borderTopWidth-cell-Table, var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderBottomWidth-cell-Table": "var(--xmlui-borderBottomWidth-cell-Table, var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderStyle-cell-Table": "var(--xmlui-borderStyle-cell-Table)", "borderHorizontalStyle-cell-Table": "var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table))", "borderLeftStyle-cell-Table": "var(--xmlui-borderLeftStyle-cell-Table, var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderRightStyle-cell-Table": "var(--xmlui-borderRightStyle-cell-Table, var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderVerticalStyle-cell-Table": "var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table))", "borderTopStyle-cell-Table": "var(--xmlui-borderTopStyle-cell-Table, var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderBottomStyle-cell-Table": "var(--xmlui-borderBottomStyle-cell-Table, var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderColor-cell-Table": "var(--xmlui-borderColor-cell-Table)", "borderHorizontalColor-cell-Table": "var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table))", "borderLeftColor-cell-Table": "var(--xmlui-borderLeftColor-cell-Table, var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderRightColor-cell-Table": "var(--xmlui-borderRightColor-cell-Table, var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderVerticalColor-cell-Table": "var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table))", "borderTopColor-cell-Table": "var(--xmlui-borderTopColor-cell-Table, var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderBottomColor-cell-Table": "var(--xmlui-borderBottomColor-cell-Table, var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderStartStartRadius-cell-Table": "var(--xmlui-borderStartStartRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderStartEndRadius-cell-Table": "var(--xmlui-borderStartEndRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderEndStartRadius-cell-Table": "var(--xmlui-borderEndStartRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderEndEndRadius-cell-Table": "var(--xmlui-borderEndEndRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "border-Table": "var(--xmlui-border-Table)", "borderHorizontal-Table": "var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table))", "borderVertical-Table": "var(--xmlui-borderVertical-Table, var(--xmlui-border-Table))", "borderLeft-Table": "var(--xmlui-borderLeft-Table, var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table)))", "borderRight-Table": "var(--xmlui-borderRight-Table, var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table)))", "borderTop-Table": "var(--xmlui-borderTop-Table, var(--xmlui-borderVertical-Table, var(--xmlui-border-Table)))", "borderBottom-Table": "var(--xmlui-borderBottom-Table, var(--xmlui-borderVertical-Table, var(--xmlui-border-Table)))", "borderWidth-Table": "var(--xmlui-borderWidth-Table)", "borderHorizontalWidth-Table": "var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table))", "borderLeftWidth-Table": "var(--xmlui-borderLeftWidth-Table, var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderRightWidth-Table": "var(--xmlui-borderRightWidth-Table, var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderVerticalWidth-Table": "var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table))", "borderTopWidth-Table": "var(--xmlui-borderTopWidth-Table, var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderBottomWidth-Table": "var(--xmlui-borderBottomWidth-Table, var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderStyle-Table": "var(--xmlui-borderStyle-Table)", "borderHorizontalStyle-Table": "var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table))", "borderLeftStyle-Table": "var(--xmlui-borderLeftStyle-Table, var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderRightStyle-Table": "var(--xmlui-borderRightStyle-Table, var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderVerticalStyle-Table": "var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table))", "borderTopStyle-Table": "var(--xmlui-borderTopStyle-Table, var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderBottomStyle-Table": "var(--xmlui-borderBottomStyle-Table, var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderColor-Table": "var(--xmlui-borderColor-Table)", "borderHorizontalColor-Table": "var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table))", "borderLeftColor-Table": "var(--xmlui-borderLeftColor-Table, var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table)))", "borderRightColor-Table": "var(--xmlui-borderRightColor-Table, var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table)))", "borderVerticalColor-Table": "var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table))", "borderTopColor-Table": "var(--xmlui-borderTopColor-Table, var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table)))", "borderBottomColor-Table": "var(--xmlui-borderBottomColor-Table, var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table)))", "borderStartStartRadius-Table": "var(--xmlui-borderStartStartRadius-Table, var(--xmlui-borderRadius-Table))", "borderStartEndRadius-Table": "var(--xmlui-borderStartEndRadius-Table, var(--xmlui-borderRadius-Table))", "borderEndStartRadius-Table": "var(--xmlui-borderEndStartRadius-Table, var(--xmlui-borderRadius-Table))", "borderEndEndRadius-Table": "var(--xmlui-borderEndEndRadius-Table, var(--xmlui-borderRadius-Table))", "backgroundColor-pagination-Table": "var(--xmlui-backgroundColor-pagination-Table)", "textColor-heading-Table": "var(--xmlui-textColor-heading-Table)", "fontWeight-row-Table": "var(--xmlui-fontWeight-row-Table)", "fontSize-row-Table": "var(--xmlui-fontSize-row-Table)", "fontSize-checkbox-Table": "var(--xmlui-fontSize-checkbox-Table)", "fontWeight-heading-Table": "var(--xmlui-fontWeight-heading-Table)", "fontSize-heading-Table": "var(--xmlui-fontSize-heading-Table)", "textTransform-heading-Table": "var(--xmlui-textTransform-heading-Table)", "borderRadius-Table": "var(--xmlui-borderRadius-Table)", "outlineWidth-heading-Table--focus": "var(--xmlui-outlineWidth-heading-Table--focus)", "outlineColor-heading-Table--focus": "var(--xmlui-outlineColor-heading-Table--focus)", "outlineStyle-heading-Table--focus": "var(--xmlui-outlineStyle-heading-Table--focus)", "outlineOffset-heading-Table--focus": "var(--xmlui-outlineOffset-heading-Table--focus)", "borderBottom-last-row-Table": "var(--xmlui-borderBottom-last-row-Table)", "backgroundColor-pinnedCell-Table": "var(--xmlui-backgroundColor-pinnedCell-Table)"}'`;
-const wrapper$a = "_wrapper_xjp6g_14";
-const noScroll = "_noScroll_xjp6g_43";
-const clickableHeader = "_clickableHeader_xjp6g_46";
-const headerContent$1 = "_headerContent_xjp6g_60";
-const orderingIndicator = "_orderingIndicator_xjp6g_63";
-const activeOrdering = "_activeOrdering_xjp6g_68";
-const alwaysShow = "_alwaysShow_xjp6g_68";
-const headerRow = "_headerRow_xjp6g_105";
-const columnCell = "_columnCell_xjp6g_112";
-const cell = "_cell_xjp6g_113";
-const alignTop = "_alignTop_xjp6g_122";
-const alignCenter$1 = "_alignCenter_xjp6g_126";
-const alignBottom = "_alignBottom_xjp6g_130";
-const table = "_table_xjp6g_134";
-const row$1 = "_row_xjp6g_144";
-const checkBoxWrapper = "_checkBoxWrapper_xjp6g_150";
-const showInHeader = "_showInHeader_xjp6g_155";
-const showInRow = "_showInRow_xjp6g_155";
-const selected$3 = "_selected_xjp6g_160";
-const allSelected = "_allSelected_xjp6g_160";
-const cellContent = "_cellContent_xjp6g_191";
-const evenRow = "_evenRow_xjp6g_206";
-const oddRow = "_oddRow_xjp6g_209";
-const focused$3 = "_focused_xjp6g_224";
-const disabled$7 = "_disabled_xjp6g_236";
-const noBottomBorder = "_noBottomBorder_xjp6g_243";
-const headerWrapper = "_headerWrapper_xjp6g_256";
-const noRows$1 = "_noRows_xjp6g_273";
-const loadingWrapper$1 = "_loadingWrapper_xjp6g_312";
-const forceHoverWrapper = "_forceHoverWrapper_xjp6g_325";
-const resizer$1 = "_resizer_xjp6g_328";
-const isResizing = "_isResizing_xjp6g_349";
+const themeVars$B = `'{"textColor-pagination-Table": "var(--xmlui-textColor-pagination-Table)", "backgroundColor-Table": "var(--xmlui-backgroundColor-Table)", "textColor-Table": "var(--xmlui-textColor-Table)", "backgroundColor-row-Table": "var(--xmlui-backgroundColor-row-Table)", "backgroundColor-row-Table--hover": "var(--xmlui-backgroundColor-row-Table--hover)", "backgroundColor-selected-Table": "var(--xmlui-backgroundColor-selected-Table)", "backgroundColor-selected-Table--hover": "var(--xmlui-backgroundColor-selected-Table--hover)", "backgroundColor-evenRow-Table": "var(--xmlui-backgroundColor-evenRow-Table)", "backgroundColor-oddRow-Table": "var(--xmlui-backgroundColor-oddRow-Table)", "backgroundColor-heading-Table": "var(--xmlui-backgroundColor-heading-Table)", "backgroundColor-heading-Table--hover": "var(--xmlui-backgroundColor-heading-Table--hover)", "backgroundColor-heading-Table--active": "var(--xmlui-backgroundColor-heading-Table--active)", "padding-heading-Table": "var(--xmlui-padding-heading-Table)", "paddingHorizontal-heading-Table": "var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table))", "paddingVertical-heading-Table": "var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table))", "paddingLeft-heading-Table": "var(--xmlui-paddingLeft-heading-Table, var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingRight-heading-Table": "var(--xmlui-paddingRight-heading-Table, var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingTop-heading-Table": "var(--xmlui-paddingTop-heading-Table, var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingBottom-heading-Table": "var(--xmlui-paddingBottom-heading-Table, var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table)))", "padding-cell-Table": "var(--xmlui-padding-cell-Table)", "paddingHorizontal-cell-Table": "var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table))", "paddingVertical-cell-Table": "var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table))", "paddingLeft-cell-Table": "var(--xmlui-paddingLeft-cell-Table, var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingRight-cell-Table": "var(--xmlui-paddingRight-cell-Table, var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingTop-cell-Table": "var(--xmlui-paddingTop-cell-Table, var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingBottom-cell-Table": "var(--xmlui-paddingBottom-cell-Table, var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingHorizontal-cell-first-Table": "var(--xmlui-paddingHorizontal-cell-first-Table)", "paddingHorizontal-cell-last-Table": "var(--xmlui-paddingHorizontal-cell-last-Table)", "border-cell-Table": "var(--xmlui-border-cell-Table)", "borderHorizontal-cell-Table": "var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table))", "borderVertical-cell-Table": "var(--xmlui-borderVertical-cell-Table, var(--xmlui-border-cell-Table))", "borderLeft-cell-Table": "var(--xmlui-borderLeft-cell-Table, var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table)))", "borderRight-cell-Table": "var(--xmlui-borderRight-cell-Table, var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table)))", "borderTop-cell-Table": "var(--xmlui-borderTop-cell-Table, var(--xmlui-borderVertical-cell-Table, var(--xmlui-border-cell-Table)))", "borderBottom-cell-Table": "var(--xmlui-borderBottom-cell-Table)", "borderWidth-cell-Table": "var(--xmlui-borderWidth-cell-Table)", "borderHorizontalWidth-cell-Table": "var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table))", "borderLeftWidth-cell-Table": "var(--xmlui-borderLeftWidth-cell-Table, var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderRightWidth-cell-Table": "var(--xmlui-borderRightWidth-cell-Table, var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderVerticalWidth-cell-Table": "var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table))", "borderTopWidth-cell-Table": "var(--xmlui-borderTopWidth-cell-Table, var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderBottomWidth-cell-Table": "var(--xmlui-borderBottomWidth-cell-Table, var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderStyle-cell-Table": "var(--xmlui-borderStyle-cell-Table)", "borderHorizontalStyle-cell-Table": "var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table))", "borderLeftStyle-cell-Table": "var(--xmlui-borderLeftStyle-cell-Table, var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderRightStyle-cell-Table": "var(--xmlui-borderRightStyle-cell-Table, var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderVerticalStyle-cell-Table": "var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table))", "borderTopStyle-cell-Table": "var(--xmlui-borderTopStyle-cell-Table, var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderBottomStyle-cell-Table": "var(--xmlui-borderBottomStyle-cell-Table, var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderColor-cell-Table": "var(--xmlui-borderColor-cell-Table)", "borderHorizontalColor-cell-Table": "var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table))", "borderLeftColor-cell-Table": "var(--xmlui-borderLeftColor-cell-Table, var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderRightColor-cell-Table": "var(--xmlui-borderRightColor-cell-Table, var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderVerticalColor-cell-Table": "var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table))", "borderTopColor-cell-Table": "var(--xmlui-borderTopColor-cell-Table, var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderBottomColor-cell-Table": "var(--xmlui-borderBottomColor-cell-Table, var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderStartStartRadius-cell-Table": "var(--xmlui-borderStartStartRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderStartEndRadius-cell-Table": "var(--xmlui-borderStartEndRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderEndStartRadius-cell-Table": "var(--xmlui-borderEndStartRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderEndEndRadius-cell-Table": "var(--xmlui-borderEndEndRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "border-Table": "var(--xmlui-border-Table)", "borderHorizontal-Table": "var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table))", "borderVertical-Table": "var(--xmlui-borderVertical-Table, var(--xmlui-border-Table))", "borderLeft-Table": "var(--xmlui-borderLeft-Table, var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table)))", "borderRight-Table": "var(--xmlui-borderRight-Table, var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table)))", "borderTop-Table": "var(--xmlui-borderTop-Table, var(--xmlui-borderVertical-Table, var(--xmlui-border-Table)))", "borderBottom-Table": "var(--xmlui-borderBottom-Table, var(--xmlui-borderVertical-Table, var(--xmlui-border-Table)))", "borderWidth-Table": "var(--xmlui-borderWidth-Table)", "borderHorizontalWidth-Table": "var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table))", "borderLeftWidth-Table": "var(--xmlui-borderLeftWidth-Table, var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderRightWidth-Table": "var(--xmlui-borderRightWidth-Table, var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderVerticalWidth-Table": "var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table))", "borderTopWidth-Table": "var(--xmlui-borderTopWidth-Table, var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderBottomWidth-Table": "var(--xmlui-borderBottomWidth-Table, var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderStyle-Table": "var(--xmlui-borderStyle-Table)", "borderHorizontalStyle-Table": "var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table))", "borderLeftStyle-Table": "var(--xmlui-borderLeftStyle-Table, var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderRightStyle-Table": "var(--xmlui-borderRightStyle-Table, var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderVerticalStyle-Table": "var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table))", "borderTopStyle-Table": "var(--xmlui-borderTopStyle-Table, var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderBottomStyle-Table": "var(--xmlui-borderBottomStyle-Table, var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderColor-Table": "var(--xmlui-borderColor-Table)", "borderHorizontalColor-Table": "var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table))", "borderLeftColor-Table": "var(--xmlui-borderLeftColor-Table, var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table)))", "borderRightColor-Table": "var(--xmlui-borderRightColor-Table, var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table)))", "borderVerticalColor-Table": "var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table))", "borderTopColor-Table": "var(--xmlui-borderTopColor-Table, var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table)))", "borderBottomColor-Table": "var(--xmlui-borderBottomColor-Table, var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table)))", "borderStartStartRadius-Table": "var(--xmlui-borderStartStartRadius-Table, var(--xmlui-borderRadius-Table))", "borderStartEndRadius-Table": "var(--xmlui-borderStartEndRadius-Table, var(--xmlui-borderRadius-Table))", "borderEndStartRadius-Table": "var(--xmlui-borderEndStartRadius-Table, var(--xmlui-borderRadius-Table))", "borderEndEndRadius-Table": "var(--xmlui-borderEndEndRadius-Table, var(--xmlui-borderRadius-Table))", "backgroundColor-pagination-Table": "var(--xmlui-backgroundColor-pagination-Table)", "textColor-heading-Table": "var(--xmlui-textColor-heading-Table)", "fontWeight-row-Table": "var(--xmlui-fontWeight-row-Table)", "fontSize-row-Table": "var(--xmlui-fontSize-row-Table)", "fontSize-checkbox-Table": "var(--xmlui-fontSize-checkbox-Table)", "backgroundColor-selectionCell-Table": "var(--xmlui-backgroundColor-selectionCell-Table)", "backgroundColor-selectionCell-Table--hover": "var(--xmlui-backgroundColor-selectionCell-Table--hover)", "fontWeight-heading-Table": "var(--xmlui-fontWeight-heading-Table)", "fontSize-heading-Table": "var(--xmlui-fontSize-heading-Table)", "textTransform-heading-Table": "var(--xmlui-textTransform-heading-Table)", "borderRadius-Table": "var(--xmlui-borderRadius-Table)", "outlineWidth-heading-Table--focus": "var(--xmlui-outlineWidth-heading-Table--focus)", "outlineColor-heading-Table--focus": "var(--xmlui-outlineColor-heading-Table--focus)", "outlineStyle-heading-Table--focus": "var(--xmlui-outlineStyle-heading-Table--focus)", "outlineOffset-heading-Table--focus": "var(--xmlui-outlineOffset-heading-Table--focus)", "borderBottom-last-row-Table": "var(--xmlui-borderBottom-last-row-Table)", "backgroundColor-pinnedCell-Table": "var(--xmlui-backgroundColor-pinnedCell-Table)", "backgroundColor-pinnedCell-Table--hover": "var(--xmlui-backgroundColor-pinnedCell-Table--hover)", "Input:borderColor-Checkbox--hover": "var(--xmlui-borderColor-Checkbox--hover)"}'`;
+const wrapper$a = "_wrapper_1n82x_14";
+const noScroll = "_noScroll_1n82x_43";
+const clickableHeader = "_clickableHeader_1n82x_46";
+const headerContent$1 = "_headerContent_1n82x_60";
+const orderingIndicator = "_orderingIndicator_1n82x_63";
+const activeOrdering = "_activeOrdering_1n82x_68";
+const alwaysShow = "_alwaysShow_1n82x_68";
+const headerRow = "_headerRow_1n82x_105";
+const columnCell = "_columnCell_1n82x_112";
+const cell = "_cell_1n82x_113";
+const alignTop = "_alignTop_1n82x_122";
+const alignCenter$1 = "_alignCenter_1n82x_126";
+const alignBottom = "_alignBottom_1n82x_130";
+const table = "_table_1n82x_138";
+const row$1 = "_row_1n82x_148";
+const checkBoxWrapper = "_checkBoxWrapper_1n82x_154";
+const showInHeader = "_showInHeader_1n82x_159";
+const showInRow = "_showInRow_1n82x_159";
+const selected$3 = "_selected_1n82x_164";
+const allSelected = "_allSelected_1n82x_164";
+const cellContent = "_cellContent_1n82x_195";
+const evenRow = "_evenRow_1n82x_212";
+const oddRow = "_oddRow_1n82x_216";
+const focused$3 = "_focused_1n82x_236";
+const disabled$7 = "_disabled_1n82x_252";
+const noBottomBorder = "_noBottomBorder_1n82x_259";
+const headerWrapper = "_headerWrapper_1n82x_272";
+const noRows$1 = "_noRows_1n82x_289";
+const loadingWrapper$1 = "_loadingWrapper_1n82x_328";
+const selectionToggle = "_selectionToggle_1n82x_343";
+const toleranceCompact = "_toleranceCompact_1n82x_346";
+const toleranceComfortable = "_toleranceComfortable_1n82x_352";
+const toleranceSpacious = "_toleranceSpacious_1n82x_358";
+const resizer$1 = "_resizer_1n82x_368";
+const isResizing = "_isResizing_1n82x_389";
 const styles$R = {
   themeVars: themeVars$B,
   wrapper: wrapper$a,
@@ -18675,7 +18736,10 @@ const styles$R = {
   headerWrapper,
   noRows: noRows$1,
   loadingWrapper: loadingWrapper$1,
-  forceHoverWrapper,
+  selectionToggle,
+  toleranceCompact,
+  toleranceComfortable,
+  toleranceSpacious,
   resizer: resizer$1,
   isResizing
 };
@@ -19603,6 +19667,7 @@ const CheckboxMd = createMetadata({
     }
   },
   themeVars: parseScssVar(styles$14.themeVars),
+  compactInlineLabel: true,
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
     [`borderColor-${COMP$14}`]: `$borderColor-Input-default`,
@@ -20042,47 +20107,47 @@ const styles$Q = {
   paginationListVertical
 };
 const themeVars$z = `'{"border-Select": "var(--xmlui-border-Select)", "borderHorizontal-Select": "var(--xmlui-borderHorizontal-Select, var(--xmlui-border-Select))", "borderVertical-Select": "var(--xmlui-borderVertical-Select, var(--xmlui-border-Select))", "borderLeft-Select": "var(--xmlui-borderLeft-Select, var(--xmlui-borderHorizontal-Select, var(--xmlui-border-Select)))", "borderRight-Select": "var(--xmlui-borderRight-Select, var(--xmlui-borderHorizontal-Select, var(--xmlui-border-Select)))", "borderTop-Select": "var(--xmlui-borderTop-Select, var(--xmlui-borderVertical-Select, var(--xmlui-border-Select)))", "borderBottom-Select": "var(--xmlui-borderBottom-Select, var(--xmlui-borderVertical-Select, var(--xmlui-border-Select)))", "borderWidth-Select": "var(--xmlui-borderWidth-Select)", "borderHorizontalWidth-Select": "var(--xmlui-borderHorizontalWidth-Select, var(--xmlui-borderWidth-Select))", "borderLeftWidth-Select": "var(--xmlui-borderLeftWidth-Select, var(--xmlui-borderHorizontalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderRightWidth-Select": "var(--xmlui-borderRightWidth-Select, var(--xmlui-borderHorizontalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderVerticalWidth-Select": "var(--xmlui-borderVerticalWidth-Select, var(--xmlui-borderWidth-Select))", "borderTopWidth-Select": "var(--xmlui-borderTopWidth-Select, var(--xmlui-borderVerticalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderBottomWidth-Select": "var(--xmlui-borderBottomWidth-Select, var(--xmlui-borderVerticalWidth-Select, var(--xmlui-borderWidth-Select)))", "borderStyle-Select": "var(--xmlui-borderStyle-Select)", "borderHorizontalStyle-Select": "var(--xmlui-borderHorizontalStyle-Select, var(--xmlui-borderStyle-Select))", "borderLeftStyle-Select": "var(--xmlui-borderLeftStyle-Select, var(--xmlui-borderHorizontalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderRightStyle-Select": "var(--xmlui-borderRightStyle-Select, var(--xmlui-borderHorizontalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderVerticalStyle-Select": "var(--xmlui-borderVerticalStyle-Select, var(--xmlui-borderStyle-Select))", "borderTopStyle-Select": "var(--xmlui-borderTopStyle-Select, var(--xmlui-borderVerticalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderBottomStyle-Select": "var(--xmlui-borderBottomStyle-Select, var(--xmlui-borderVerticalStyle-Select, var(--xmlui-borderStyle-Select)))", "borderColor-Select": "var(--xmlui-borderColor-Select)", "borderHorizontalColor-Select": "var(--xmlui-borderHorizontalColor-Select, var(--xmlui-borderColor-Select))", "borderLeftColor-Select": "var(--xmlui-borderLeftColor-Select, var(--xmlui-borderHorizontalColor-Select, var(--xmlui-borderColor-Select)))", "borderRightColor-Select": "var(--xmlui-borderRightColor-Select, var(--xmlui-borderHorizontalColor-Select, var(--xmlui-borderColor-Select)))", "borderVerticalColor-Select": "var(--xmlui-borderVerticalColor-Select, var(--xmlui-borderColor-Select))", "borderTopColor-Select": "var(--xmlui-borderTopColor-Select, var(--xmlui-borderVerticalColor-Select, var(--xmlui-borderColor-Select)))", "borderBottomColor-Select": "var(--xmlui-borderBottomColor-Select, var(--xmlui-borderVerticalColor-Select, var(--xmlui-borderColor-Select)))", "borderStartStartRadius-Select": "var(--xmlui-borderStartStartRadius-Select, var(--xmlui-borderRadius-Select))", "borderStartEndRadius-Select": "var(--xmlui-borderStartEndRadius-Select, var(--xmlui-borderRadius-Select))", "borderEndStartRadius-Select": "var(--xmlui-borderEndStartRadius-Select, var(--xmlui-borderRadius-Select))", "borderEndEndRadius-Select": "var(--xmlui-borderEndEndRadius-Select, var(--xmlui-borderRadius-Select))", "padding-Select": "var(--xmlui-padding-Select)", "paddingHorizontal-Select": "var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select))", "paddingVertical-Select": "var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select))", "paddingLeft-Select": "var(--xmlui-paddingLeft-Select, var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select)))", "paddingRight-Select": "var(--xmlui-paddingRight-Select, var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select)))", "paddingTop-Select": "var(--xmlui-paddingTop-Select, var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select)))", "paddingBottom-Select": "var(--xmlui-paddingBottom-Select, var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select)))", "padding-item-Select": "var(--xmlui-padding-item-Select)", "paddingHorizontal-item-Select": "var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select))", "paddingVertical-item-Select": "var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select))", "paddingLeft-item-Select": "var(--xmlui-paddingLeft-item-Select, var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select)))", "paddingRight-item-Select": "var(--xmlui-paddingRight-item-Select, var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select)))", "paddingTop-item-Select": "var(--xmlui-paddingTop-item-Select, var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select)))", "paddingBottom-item-Select": "var(--xmlui-paddingBottom-item-Select, var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select)))", "Input:borderRadius-Select": "var(--xmlui-borderRadius-Select)", "Input:borderColor-Select": "var(--xmlui-borderColor-Select)", "Input:borderWidth-Select": "var(--xmlui-borderWidth-Select)", "Input:borderStyle-Select": "var(--xmlui-borderStyle-Select)", "Input:fontSize-Select": "var(--xmlui-fontSize-Select)", "Input:backgroundColor-Select": "var(--xmlui-backgroundColor-Select)", "Input:boxShadow-Select": "var(--xmlui-boxShadow-Select)", "Input:textColor-Select": "var(--xmlui-textColor-Select)", "Input:borderColor-Select--hover": "var(--xmlui-borderColor-Select--hover)", "Input:backgroundColor-Select--hover": "var(--xmlui-backgroundColor-Select--hover)", "Input:boxShadow-Select--hover": "var(--xmlui-boxShadow-Select--hover)", "Input:textColor-Select--hover": "var(--xmlui-textColor-Select--hover)", "Input:outlineWidth-Select--focus": "var(--xmlui-outlineWidth-Select--focus)", "Input:outlineColor-Select--focus": "var(--xmlui-outlineColor-Select--focus)", "Input:outlineStyle-Select--focus": "var(--xmlui-outlineStyle-Select--focus)", "Input:outlineOffset-Select--focus": "var(--xmlui-outlineOffset-Select--focus)", "Input:textColor-placeholder-Select": "var(--xmlui-textColor-placeholder-Select)", "Input:fontSize-placeholder-Select": "var(--xmlui-fontSize-placeholder-Select)", "Input:borderRadius-Select--error": "var(--xmlui-borderRadius-Select--error)", "Input:borderColor-Select--error": "var(--xmlui-borderColor-Select--error)", "Input:borderWidth-Select--error": "var(--xmlui-borderWidth-Select--error)", "Input:borderStyle-Select--error": "var(--xmlui-borderStyle-Select--error)", "Input:fontSize-Select--error": "var(--xmlui-fontSize-Select--error)", "Input:backgroundColor-Select--error": "var(--xmlui-backgroundColor-Select--error)", "Input:boxShadow-Select--error": "var(--xmlui-boxShadow-Select--error)", "Input:textColor-Select--error": "var(--xmlui-textColor-Select--error)", "Input:borderColor-Select--error--hover": "var(--xmlui-borderColor-Select--error--hover)", "Input:backgroundColor-Select--error--hover": "var(--xmlui-backgroundColor-Select--error--hover)", "Input:boxShadow-Select--error--hover": "var(--xmlui-boxShadow-Select--error--hover)", "Input:textColor-Select--error--hover": "var(--xmlui-textColor-Select--error--hover)", "Input:outlineWidth-Select--error--focus": "var(--xmlui-outlineWidth-Select--error--focus)", "Input:outlineColor-Select--error--focus": "var(--xmlui-outlineColor-Select--error--focus)", "Input:outlineStyle-Select--error--focus": "var(--xmlui-outlineStyle-Select--error--focus)", "Input:outlineOffset-Select--error--focus": "var(--xmlui-outlineOffset-Select--error--focus)", "Input:textColor-placeholder-Select--error": "var(--xmlui-textColor-placeholder-Select--error)", "Input:fontSize-placeholder-Select--error": "var(--xmlui-fontSize-placeholder-Select--error)", "Input:borderRadius-Select--warning": "var(--xmlui-borderRadius-Select--warning)", "Input:borderColor-Select--warning": "var(--xmlui-borderColor-Select--warning)", "Input:borderWidth-Select--warning": "var(--xmlui-borderWidth-Select--warning)", "Input:borderStyle-Select--warning": "var(--xmlui-borderStyle-Select--warning)", "Input:fontSize-Select--warning": "var(--xmlui-fontSize-Select--warning)", "Input:backgroundColor-Select--warning": "var(--xmlui-backgroundColor-Select--warning)", "Input:boxShadow-Select--warning": "var(--xmlui-boxShadow-Select--warning)", "Input:textColor-Select--warning": "var(--xmlui-textColor-Select--warning)", "Input:borderColor-Select--warning--hover": "var(--xmlui-borderColor-Select--warning--hover)", "Input:backgroundColor-Select--warning--hover": "var(--xmlui-backgroundColor-Select--warning--hover)", "Input:boxShadow-Select--warning--hover": "var(--xmlui-boxShadow-Select--warning--hover)", "Input:textColor-Select--warning--hover": "var(--xmlui-textColor-Select--warning--hover)", "Input:outlineWidth-Select--warning--focus": "var(--xmlui-outlineWidth-Select--warning--focus)", "Input:outlineColor-Select--warning--focus": "var(--xmlui-outlineColor-Select--warning--focus)", "Input:outlineStyle-Select--warning--focus": "var(--xmlui-outlineStyle-Select--warning--focus)", "Input:outlineOffset-Select--warning--focus": "var(--xmlui-outlineOffset-Select--warning--focus)", "Input:textColor-placeholder-Select--warning": "var(--xmlui-textColor-placeholder-Select--warning)", "Input:fontSize-placeholder-Select--warning": "var(--xmlui-fontSize-placeholder-Select--warning)", "Input:borderRadius-Select--success": "var(--xmlui-borderRadius-Select--success)", "Input:borderColor-Select--success": "var(--xmlui-borderColor-Select--success)", "Input:borderWidth-Select--success": "var(--xmlui-borderWidth-Select--success)", "Input:borderStyle-Select--success": "var(--xmlui-borderStyle-Select--success)", "Input:fontSize-Select--success": "var(--xmlui-fontSize-Select--success)", "Input:backgroundColor-Select--success": "var(--xmlui-backgroundColor-Select--success)", "Input:boxShadow-Select--success": "var(--xmlui-boxShadow-Select--success)", "Input:textColor-Select--success": "var(--xmlui-textColor-Select--success)", "Input:borderColor-Select--success--hover": "var(--xmlui-borderColor-Select--success--hover)", "Input:backgroundColor-Select--success--hover": "var(--xmlui-backgroundColor-Select--success--hover)", "Input:boxShadow-Select--success--hover": "var(--xmlui-boxShadow-Select--success--hover)", "Input:textColor-Select--success--hover": "var(--xmlui-textColor-Select--success--hover)", "Input:outlineWidth-Select--success--focus": "var(--xmlui-outlineWidth-Select--success--focus)", "Input:outlineColor-Select--success--focus": "var(--xmlui-outlineColor-Select--success--focus)", "Input:outlineStyle-Select--success--focus": "var(--xmlui-outlineStyle-Select--success--focus)", "Input:outlineOffset-Select--success--focus": "var(--xmlui-outlineOffset-Select--success--focus)", "Input:textColor-placeholder-Select--success": "var(--xmlui-textColor-placeholder-Select--success)", "Input:fontSize-placeholder-Select--success": "var(--xmlui-fontSize-placeholder-Select--success)", "Input:backgroundColor-Select--disabled": "var(--xmlui-backgroundColor-Select--disabled)", "Input:textColor-Select--disabled": "var(--xmlui-textColor-Select--disabled)", "Input:borderColor-Select--disabled": "var(--xmlui-borderColor-Select--disabled)", "paddingVertical-Select-badge": "var(--xmlui-paddingVertical-Select-badge)", "paddingHorizontal-Select-badge": "var(--xmlui-paddingHorizontal-Select-badge)", "borderRadius-Select-badge": "var(--xmlui-borderRadius-Select-badge)", "Input:fontSize-Select-badge": "var(--xmlui-fontSize-Select-badge)", "Input:backgroundColor-Select-badge": "var(--xmlui-backgroundColor-Select-badge)", "Input:textColor-Select-badge": "var(--xmlui-textColor-Select-badge)", "Input:backgroundColor-Select-badge--hover": "var(--xmlui-backgroundColor-Select-badge--hover)", "Input:textColor-Select-badge--hover": "var(--xmlui-textColor-Select-badge--hover)", "Input:backgroundColor-Select-badge--active": "var(--xmlui-backgroundColor-Select-badge--active)", "Input:textColor-Select-badge--active": "var(--xmlui-textColor-Select-badge--active)", "Input:backgroundColor-menu-Select": "var(--xmlui-backgroundColor-menu-Select)", "Input:borderRadius-menu-Select": "var(--xmlui-borderRadius-menu-Select)", "Input:boxShadow-menu-Select": "var(--xmlui-boxShadow-menu-Select)", "Input:borderWidth-menu-Select": "var(--xmlui-borderWidth-menu-Select)", "Input:borderColor-menu-Select": "var(--xmlui-borderColor-menu-Select)", "backgroundColor-item-Select": "var(--xmlui-backgroundColor-item-Select)", "backgroundColor-item-Select--active": "var(--xmlui-backgroundColor-item-Select--active)", "backgroundColor-item-Select--hover": "var(--xmlui-backgroundColor-item-Select--hover)", "textColor-item-Select--disabled": "var(--xmlui-textColor-item-Select--disabled)", "opacity-text-item-Select--disabled": "var(--xmlui-opacity-text-item-Select--disabled)", "textColor-indicator-Select": "var(--xmlui-textColor-indicator-Select)", "minHeight-Select": "var(--xmlui-minHeight-Select)", "minWidth-Select": "var(--xmlui-minWidth-Select)", "minHeight-item-Select": "var(--xmlui-minHeight-item-Select)"}'`;
-const selectTrigger = "_selectTrigger_1w1m2_17";
-const error$b = "_error_1w1m2_57";
-const warning$b = "_warning_1w1m2_83";
-const valid$b = "_valid_1w1m2_109";
-const disabled$6 = "_disabled_1w1m2_135";
-const placeholder$2 = "_placeholder_1w1m2_147";
-const actions$1 = "_actions_1w1m2_164";
-const action$1 = "_action_1w1m2_164";
-const badgeListContainer = "_badgeListContainer_1w1m2_179";
-const badgeList$1 = "_badgeList_1w1m2_179";
-const inputWrapper$1 = "_inputWrapper_1w1m2_192";
-const badge$2 = "_badge_1w1m2_179";
-const selectContent = "_selectContent_1w1m2_227";
-const command$1 = "_command_1w1m2_246";
-const commandInputContainer = "_commandInputContainer_1w1m2_253";
-const commandInput$1 = "_commandInput_1w1m2_253";
-const commandList$1 = "_commandList_1w1m2_272";
-const groupHeader = "_groupHeader_1w1m2_280";
-const multiSelectOption = "_multiSelectOption_1w1m2_292";
-const multiSelectOptionContent = "_multiSelectOptionContent_1w1m2_307";
-const highlighted$1 = "_highlighted_1w1m2_316";
-const disabledOption$1 = "_disabledOption_1w1m2_322";
-const selectValue = "_selectValue_1w1m2_337";
-const selectDropdownContent = "_selectDropdownContent_1w1m2_347";
-const fadeIn = "_fadeIn_1w1m2_1";
-const zoomIn = "_zoomIn_1w1m2_1";
-const fadeOut = "_fadeOut_1w1m2_1";
-const zoomOut = "_zoomOut_1w1m2_1";
-const slideInFromTop = "_slideInFromTop_1w1m2_1";
-const slideInFromRight = "_slideInFromRight_1w1m2_1";
-const slideInFromLeft = "_slideInFromLeft_1w1m2_1";
-const slideInFromBottom = "_slideInFromBottom_1w1m2_1";
-const selectViewport = "_selectViewport_1w1m2_379";
-const selectScrollUpButton = "_selectScrollUpButton_1w1m2_383";
-const selectScrollDownButton = "_selectScrollDownButton_1w1m2_391";
-const selectEmpty = "_selectEmpty_1w1m2_399";
-const selectOption = "_selectOption_1w1m2_412";
-const selectOptionContent = "_selectOptionContent_1w1m2_436";
-const selectOptionIndicator = "_selectOptionIndicator_1w1m2_450";
-const loading = "_loading_1w1m2_460";
-const srOnly$1 = "_srOnly_1w1m2_463";
+const selectTrigger = "_selectTrigger_sfiq6_17";
+const error$b = "_error_sfiq6_57";
+const warning$b = "_warning_sfiq6_83";
+const valid$b = "_valid_sfiq6_109";
+const disabled$6 = "_disabled_sfiq6_135";
+const placeholder$2 = "_placeholder_sfiq6_147";
+const actions$1 = "_actions_sfiq6_164";
+const action$1 = "_action_sfiq6_164";
+const badgeListContainer = "_badgeListContainer_sfiq6_179";
+const badgeList$1 = "_badgeList_sfiq6_179";
+const inputWrapper$1 = "_inputWrapper_sfiq6_192";
+const badge$2 = "_badge_sfiq6_179";
+const selectContent = "_selectContent_sfiq6_227";
+const command$1 = "_command_sfiq6_246";
+const commandInputContainer = "_commandInputContainer_sfiq6_253";
+const commandInput$1 = "_commandInput_sfiq6_253";
+const commandList$1 = "_commandList_sfiq6_272";
+const groupHeader = "_groupHeader_sfiq6_280";
+const multiSelectOption = "_multiSelectOption_sfiq6_292";
+const multiSelectOptionContent = "_multiSelectOptionContent_sfiq6_307";
+const highlighted$1 = "_highlighted_sfiq6_316";
+const disabledOption$1 = "_disabledOption_sfiq6_322";
+const selectValue = "_selectValue_sfiq6_337";
+const selectDropdownContent = "_selectDropdownContent_sfiq6_347";
+const fadeIn = "_fadeIn_sfiq6_1";
+const zoomIn = "_zoomIn_sfiq6_1";
+const fadeOut = "_fadeOut_sfiq6_1";
+const zoomOut = "_zoomOut_sfiq6_1";
+const slideInFromTop = "_slideInFromTop_sfiq6_1";
+const slideInFromRight = "_slideInFromRight_sfiq6_1";
+const slideInFromLeft = "_slideInFromLeft_sfiq6_1";
+const slideInFromBottom = "_slideInFromBottom_sfiq6_1";
+const selectViewport = "_selectViewport_sfiq6_381";
+const selectScrollUpButton = "_selectScrollUpButton_sfiq6_385";
+const selectScrollDownButton = "_selectScrollDownButton_sfiq6_394";
+const selectEmpty = "_selectEmpty_sfiq6_403";
+const selectOption = "_selectOption_sfiq6_416";
+const selectOptionContent = "_selectOptionContent_sfiq6_440";
+const selectOptionIndicator = "_selectOptionIndicator_sfiq6_454";
+const loading = "_loading_sfiq6_464";
+const srOnly$1 = "_srOnly_sfiq6_467";
 const styles$P = {
   themeVars: themeVars$z,
   selectTrigger,
@@ -20252,6 +20317,7 @@ const SimpleSelect = forwardRef(
       valueRenderer,
       options: options2,
       children,
+      scrollIndicators = true,
       validationIcon,
       validationStatus,
       invalidMessages,
@@ -20262,8 +20328,60 @@ const SimpleSelect = forwardRef(
     } = props;
     const composedRef = forwardRef ? composeRefs(triggerRef, forwardedRef) : triggerRef;
     const [open, setOpen] = useState(false);
+    const contentRef = useRef(null);
+    useEffect(() => {
+      if (!open || modal) return;
+      const body2 = document.body;
+      const LOCK_ATTR = "data-scroll-locked";
+      let didDecrement = false;
+      const decrement = () => {
+        const count = parseInt(body2.getAttribute(LOCK_ATTR) || "0", 10);
+        if (count > 0 && !didDecrement) {
+          didDecrement = true;
+          if (count <= 1) {
+            body2.removeAttribute(LOCK_ATTR);
+          } else {
+            body2.setAttribute(LOCK_ATTR, String(count - 1));
+          }
+        }
+      };
+      const raf = requestAnimationFrame(decrement);
+      const handler = (e) => {
+        const viewport = body2.querySelector("[data-radix-select-viewport]");
+        if (!viewport || !viewport.contains(e.target)) {
+          e.stopPropagation();
+        }
+      };
+      document.addEventListener("wheel", handler, true);
+      document.addEventListener("touchmove", handler, true);
+      return () => {
+        cancelAnimationFrame(raf);
+        if (didDecrement) {
+          const count = parseInt(body2.getAttribute(LOCK_ATTR) || "0", 10);
+          body2.setAttribute(LOCK_ATTR, String(count + 1));
+        }
+        document.removeEventListener("wheel", handler, true);
+        document.removeEventListener("touchmove", handler, true);
+      };
+    }, [open, modal]);
+    useEffect(() => {
+      if (!open) return;
+      const el = contentRef.current;
+      if (!el) return;
+      let rafId = requestAnimationFrame(() => {
+        rafId = requestAnimationFrame(() => {
+          el.style.height = `${el.clientHeight}px`;
+        });
+      });
+      return () => {
+        cancelAnimationFrame(rafId);
+        if (contentRef.current) {
+          contentRef.current.style.height = "auto";
+        }
+      };
+    }, [open]);
     const stringValue = useMemo(() => {
-      return value != void 0 ? String(value) : void 0;
+      return value != null && value !== "" ? String(value) : "";
     }, [value]);
     const handleValueChange = useCallback(
       (val) => {
@@ -20365,13 +20483,14 @@ const SimpleSelect = forwardRef(
           /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsxs(
             Content,
             {
+              ref: contentRef,
               collisionPadding: 0,
               className: classnames(contentClassName, styles$P.selectDropdownContent),
               position: "popper",
               align: "start",
               style: { height: "auto", maxHeight: height, minWidth: panelWidth },
               children: [
-                /* @__PURE__ */ jsx(ScrollUpButton, { className: styles$P.selectScrollUpButton, children: /* @__PURE__ */ jsx(ThemedIcon, { name: "chevronup" }) }),
+                scrollIndicators && /* @__PURE__ */ jsx(ScrollUpButton, { className: styles$P.selectScrollUpButton, children: /* @__PURE__ */ jsx(ThemedIcon, { name: "chevronup" }) }),
                 /* @__PURE__ */ jsx(Part, { partId: "listWrapper", children: /* @__PURE__ */ jsx(Viewport, { className: styles$P.selectViewport, children: groupBy2 && groupedOptions ? (
                   // Render grouped options directly from options array
                   /* @__PURE__ */ jsx(Fragment, { children: Object.keys(groupedOptions).length === 0 ? emptyListNode : Object.entries(groupedOptions).map(([groupName, groupOptions]) => /* @__PURE__ */ jsxs(Group, { children: [
@@ -20395,7 +20514,7 @@ const SimpleSelect = forwardRef(
                     options2.length === 0 && emptyListNode
                   ] })
                 ) }) }),
-                /* @__PURE__ */ jsx(ScrollDownButton, { className: styles$P.selectScrollDownButton, children: /* @__PURE__ */ jsx(ThemedIcon, { name: "chevrondown" }) })
+                scrollIndicators && /* @__PURE__ */ jsx(ScrollDownButton, { className: styles$P.selectScrollDownButton, children: /* @__PURE__ */ jsx(ThemedIcon, { name: "chevrondown" }) })
               ]
             }
           ) })
@@ -20522,6 +20641,7 @@ const Select = forwardRef(function Select2({
   contentClassName,
   classes,
   dropdownHeight,
+  scrollIndicators,
   // Validation
   validationStatus = defaultProps$Q.validationStatus,
   // Event handlers
@@ -20639,6 +20759,32 @@ const Select = forwardRef(function Select2({
       updateState({ value: initialValue }, { initial: true });
     }
   }, [initialValue, updateState]);
+  const isInsideForm = useIsInsideForm();
+  const hasValidatedInitialValueRef = useRef(false);
+  useEffect(() => {
+    if (!isInsideForm) return;
+    if (hasValidatedInitialValueRef.current) return;
+    if (options2.length === 0) return;
+    if (value === void 0 || value === null) return;
+    hasValidatedInitialValueRef.current = true;
+    if (!multiSelect) {
+      if (value !== "") {
+        const isValid2 = options2.some((opt) => `${opt.value}` === `${value}`);
+        if (!isValid2) {
+          updateState({ value: void 0 }, { formOnly: true });
+        }
+      }
+    } else {
+      if (Array.isArray(value) && value.length > 0) {
+        const validValues = value.filter(
+          (v) => options2.some((opt) => String(opt.value) === String(v))
+        );
+        if (validValues.length !== value.length) {
+          updateState({ value: validValues });
+        }
+      }
+    }
+  }, [isInsideForm, options2, value, multiSelect, updateState]);
   useEffect(() => {
     const current = referenceElement;
     const currentObserver = observer.current;
@@ -20877,6 +21023,7 @@ const Select = forwardRef(function Select2({
           clearable,
           onClear: clearValue,
           valueRenderer,
+          scrollIndicators,
           validationStatus,
           invalidMessages,
           finalValidationIconSuccess,
@@ -21179,6 +21326,11 @@ const SelectMd = createMetadata({
     dropdownHeight: d(
       "This property sets the height of the dropdown list. If not set, the height is determined automatically."
     ),
+    scrollIndicators: {
+      description: "This property controls whether scroll indicator arrows are displayed at the top and bottom of the dropdown list when the content overflows.",
+      valueType: "boolean",
+      defaultValue: true
+    },
     emptyListTemplate: dComponent(
       `This optional property provides the ability to customize what is displayed when the list of options is empty.`
     ),
@@ -21326,6 +21478,7 @@ const selectComponentRenderer = wrapComponent(COMP$13, Select, SelectMd, {
     "validationStatus",
     "emptyListTemplate",
     "dropdownHeight",
+    "scrollIndicators",
     "required",
     "modal",
     "groupBy",
@@ -21380,6 +21533,7 @@ const selectComponentRenderer = wrapComponent(COMP$13, Select, SelectMd, {
         registerComponentApi,
         emptyListTemplate: renderChild2(node.props.emptyListTemplate),
         dropdownHeight: extractValue(node.props.dropdownHeight),
+        scrollIndicators: extractValue.asOptionalBoolean(node.props.scrollIndicators),
         required: extractValue.asOptionalBoolean(node.props.required),
         modal: extractValue.asOptionalBoolean(node.props.modal),
         groupBy: extractValue(node.props.groupBy),
@@ -22198,32 +22352,32 @@ function defaultIsRowUnselectable(_) {
 }
 const SELECT_COLUMN_WIDTH = 42;
 const DEFAULT_PAGE_SIZES = [10];
-const getCheckboxTolerancePixels = (tolerance) => {
-  switch (tolerance) {
-    case "none":
-      return 0;
-    case "compact":
-      return 8;
-    case "comfortable":
-      return 12;
-    case "spacious":
-      return 16;
-    default:
-      return 8;
-  }
-};
-const isWithinCheckboxBoundary = (pointX, pointY, checkboxRect, tolerancePixels) => {
-  const distanceToLeft = Math.abs(pointX - checkboxRect.left);
-  const distanceToRight = Math.abs(pointX - checkboxRect.right);
-  const distanceToTop = Math.abs(pointY - checkboxRect.top);
-  const distanceToBottom = Math.abs(pointY - checkboxRect.bottom);
-  const withinHorizontalBounds = pointX >= checkboxRect.left && pointX <= checkboxRect.right;
-  const withinVerticalBounds = pointY >= checkboxRect.top && pointY <= checkboxRect.bottom;
-  const withinCheckbox = withinHorizontalBounds && withinVerticalBounds;
-  const nearHorizontalBoundary = withinVerticalBounds && (distanceToLeft <= tolerancePixels || distanceToRight <= tolerancePixels);
-  const nearVerticalBoundary = withinHorizontalBounds && (distanceToTop <= tolerancePixels || distanceToBottom <= tolerancePixels);
-  return withinCheckbox || nearHorizontalBoundary || nearVerticalBoundary;
-};
+function SelectionToggle({
+  checkboxTolerance,
+  ariaLabel,
+  value,
+  indeterminate,
+  onDidChange,
+  alwaysVisibleClassName
+}) {
+  const wrapperClassName = classnames(styles$R.checkBoxWrapper, alwaysVisibleClassName, {
+    [styles$R.toleranceCompact]: checkboxTolerance === "compact",
+    [styles$R.toleranceComfortable]: checkboxTolerance === "comfortable",
+    [styles$R.toleranceSpacious]: checkboxTolerance === "spacious"
+  });
+  return /* @__PURE__ */ jsx("div", { className: wrapperClassName, children: /* @__PURE__ */ jsx(
+    ThemedToggle,
+    {
+      ...{
+        "aria-label": ariaLabel,
+        className: styles$R.selectionToggle,
+        value,
+        indeterminate,
+        onDidChange
+      }
+    }
+  ) });
+}
 const getCommonPinningStyles = (column, isHeader = false) => {
   const isPinned = column.getIsPinned();
   return {
@@ -22235,7 +22389,7 @@ const getCommonPinningStyles = (column, isHeader = false) => {
     left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
     right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
     position: isPinned ? "sticky" : "relative",
-    backgroundColor: isPinned ? isHeader ? "var(--xmlui-backgroundColor-heading-Table)" : "var(--xmlui-backgroundColor-pinnedCell-Table)" : void 0,
+    backgroundColor: isPinned ? isHeader ? toCssVar("$backgroundColor-heading-Table") : column.id === "select" ? `var(--checkbox-cell-bg, ${toCssVar("$backgroundColor-selectionCell-Table")})` : `var(--pinned-cell-bg, ${toCssVar("$backgroundColor-pinnedCell-Table")})` : void 0,
     zIndex: isPinned ? 1 : void 0
   };
 };
@@ -22501,9 +22655,6 @@ const Table = memo(forwardRef(
       }
     }, [autoFocus]);
     const [visibleItems2, setVisibleItems] = useState(EMPTY_ARRAY);
-    const [hoveredRowId, setHoveredRowId] = useState(null);
-    const [headerCheckboxHovered, setHeaderCheckboxHovered] = useState(false);
-    const tolerancePixels = getCheckboxTolerancePixels(checkboxTolerance);
     const {
       toggleRow,
       checkAllRows,
@@ -22661,11 +22812,8 @@ const Table = memo(forwardRef(
         }
       });
     }, [getThemeVar, safeColumns]);
-    const columnsWithSelectColumn = useMemo(() => {
-      if (hideSelectionCheckboxes) {
-        return columnsWithCustomCell;
-      }
-      const selectColumn = {
+    const selectColumn = useMemo(() => {
+      return {
         id: "select",
         size: SELECT_COLUMN_WIDTH,
         enableResizing: false,
@@ -22674,68 +22822,59 @@ const Table = memo(forwardRef(
           pinTo: "left"
         },
         header: ({ table: table22 }) => enableMultiRowSelection && !hideSelectionCheckboxesHeader ? /* @__PURE__ */ jsx(
-          ThemedToggle,
+          SelectionToggle,
           {
-            ...{
-              "aria-label": "Select all rows",
-              className: classnames(styles$R.checkBoxWrapper, {
-                [styles$R.showInHeader]: alwaysShowSelectionCheckboxesHeader,
-                [styles$R.forceHoverWrapper]: headerCheckboxHovered
-              }),
-              value: table22.getIsAllRowsSelected(),
-              indeterminate: table22.getIsSomeRowsSelected(),
-              forceHover: headerCheckboxHovered,
-              onDidChange: () => {
-                const allSelected2 = table22.getRowModel().rows.every(
-                  (row2) => rowDisabledPredicate(row2.original) || rowUnselectablePredicate(row2.original) || row2.getIsSelected()
-                );
-                checkAllRows(!allSelected2);
-              }
+            checkboxTolerance,
+            ariaLabel: "Select all rows",
+            alwaysVisibleClassName: alwaysShowSelectionCheckboxesHeader ? styles$R.showInHeader : void 0,
+            value: table22.getIsAllRowsSelected(),
+            indeterminate: table22.getIsSomeRowsSelected(),
+            onDidChange: () => {
+              const allSelected2 = table22.getRowModel().rows.every(
+                (row2) => rowDisabledPredicate(row2.original) || rowUnselectablePredicate(row2.original) || row2.getIsSelected()
+              );
+              checkAllRows(!allSelected2);
             }
           }
         ) : null,
         cell: ({ row: row2 }) => {
           return /* @__PURE__ */ jsx(Fragment, { children: row2.getCanSelect() && /* @__PURE__ */ jsx(
-            ThemedToggle,
+            SelectionToggle,
             {
-              ...{
-                "aria-label": `Select ${row2.original[idKey]}`,
-                className: classnames(styles$R.checkBoxWrapper, {
-                  [styles$R.forceHoverWrapper]: hoveredRowId === row2.id,
-                  [styles$R.showInRow]: alwaysShowSelectionCheckboxes
-                }),
-                value: row2.getIsSelected(),
-                indeterminate: row2.getIsSomeSelected(),
-                forceHover: hoveredRowId === row2.id,
-                onDidChange: () => {
-                  if (!enableMultiRowSelection && row2.getIsSelected()) {
-                    checkAllRows(false);
-                  } else {
-                    toggleRow(row2.original, { metaKey: true });
-                  }
+              checkboxTolerance,
+              ariaLabel: `Select ${row2.original[idKey]}`,
+              alwaysVisibleClassName: alwaysShowSelectionCheckboxes ? styles$R.showInRow : void 0,
+              value: row2.getIsSelected(),
+              indeterminate: row2.getIsSomeSelected(),
+              onDidChange: () => {
+                if (!enableMultiRowSelection && row2.getIsSelected()) {
+                  checkAllRows(false);
+                } else {
+                  toggleRow(row2.original, { metaKey: true });
                 }
               }
             }
           ) });
         }
       };
-      return rowsSelectable ? [selectColumn, ...columnsWithCustomCell] : columnsWithCustomCell;
     }, [
       idKey,
-      rowsSelectable,
-      columnsWithCustomCell,
       enableMultiRowSelection,
       alwaysShowSelectionCheckboxesHeader,
       checkAllRows,
       toggleRow,
+      checkboxTolerance,
       rowDisabledPredicate,
       rowUnselectablePredicate,
-      hoveredRowId,
-      headerCheckboxHovered,
-      hideSelectionCheckboxes,
       hideSelectionCheckboxesHeader,
       alwaysShowSelectionCheckboxes
     ]);
+    const columnsWithSelectColumn = useMemo(() => {
+      if (hideSelectionCheckboxes) {
+        return columnsWithCustomCell;
+      }
+      return rowsSelectable ? [selectColumn, ...columnsWithCustomCell] : columnsWithCustomCell;
+    }, [rowsSelectable, columnsWithCustomCell, hideSelectionCheckboxes, selectColumn]);
     const [pagination2, setPagination] = useState({
       pageSize: effectiveIsPaginated ? effectivePageSize : Number.MAX_VALUE,
       pageIndex: currentPageIndex
@@ -22970,8 +23109,6 @@ const Table = memo(forwardRef(
       toggleRow,
       checkAllRows,
       enableMultiRowSelection,
-      tolerancePixels,
-      setHoveredRowId,
       lookupEventHandler,
       rowDoubleClick,
       striped,
@@ -23002,6 +23139,7 @@ const Table = memo(forwardRef(
               "td",
               {
                 className: classnames(styles$R.cell, alignmentClass, columnClassName),
+                "data-column-id": cell2.column.id,
                 style: {
                   width: size,
                   "--column-width": `${size}px`,
@@ -23077,23 +23215,15 @@ const Table = memo(forwardRef(
                   return;
                 }
                 wrapperRef.current?.focus();
-                const currentRow = event.currentTarget;
-                const checkbox2 = currentRow.querySelector(
-                  'input[type="checkbox"]'
-                );
-                if (checkbox2) {
-                  const checkboxRect = checkbox2.getBoundingClientRect();
-                  const clickX = event.clientX;
-                  const clickY = event.clientY;
+                const isSelectColumn = target2.closest("td")?.getAttribute("data-column-id") === "select";
+                if (isSelectColumn) {
                   const rs = rowStateRef.current;
-                  if (isWithinCheckboxBoundary(clickX, clickY, checkboxRect, rs.tolerancePixels)) {
-                    if (!rs.enableMultiRowSelection && row2.getIsSelected()) {
-                      rs.checkAllRows(false);
-                    } else {
-                      rs.toggleRow(row2.original, { metaKey: true });
-                    }
-                    return;
+                  if (!rs.enableMultiRowSelection && row2.getIsSelected()) {
+                    rs.checkAllRows(false);
+                  } else {
+                    rs.toggleRow(row2.original, { metaKey: true });
                   }
+                  return;
                 }
                 rowStateRef.current.toggleRow(row2.original, event);
               },
@@ -23108,35 +23238,6 @@ const Table = memo(forwardRef(
                   }
                 }
               },
-              onMouseMove: (event) => {
-                const currentRow = event.currentTarget;
-                const checkbox2 = currentRow.querySelector(
-                  'input[type="checkbox"]'
-                );
-                if (checkbox2) {
-                  const checkboxRect = checkbox2.getBoundingClientRect();
-                  const mouseX = event.clientX;
-                  const mouseY = event.clientY;
-                  const shouldShowHover = isWithinCheckboxBoundary(
-                    mouseX,
-                    mouseY,
-                    checkboxRect,
-                    rowStateRef.current.tolerancePixels
-                  );
-                  if (shouldShowHover) {
-                    rowStateRef.current.setHoveredRowId(row2.id);
-                    currentRow.style.cursor = "pointer";
-                  } else {
-                    rowStateRef.current.setHoveredRowId(null);
-                    currentRow.style.cursor = "";
-                  }
-                }
-              },
-              onMouseLeave: (event) => {
-                const currentRow = event.currentTarget;
-                currentRow.style.cursor = "";
-                rowStateRef.current.setHoveredRowId(null);
-              },
               onContextMenu: rowStateRef.current.lookupEventHandler ? (event) => {
                 event.preventDefault();
                 const handler = rowStateRef.current.lookupEventHandler("contextMenu", {
@@ -23260,7 +23361,7 @@ const Table = memo(forwardRef(
       queueMicrotask(() => {
         recalculateStarSizes();
       });
-    }, [recalculateStarSizes, safeColumns]);
+    }, [recalculateStarSizes, safeColumns, columnsWithCustomCell, rowsSelectable, hideSelectionCheckboxes]);
     useIsomorphicLayoutEffect(() => {
       registerComponentApi(selectionApi);
     }, [registerComponentApi, selectionApi]);
@@ -23332,81 +23433,20 @@ const Table = memo(forwardRef(
                     }),
                     onClick: (event) => {
                       const target2 = event.target;
+                      if (target2.tagName.toLowerCase() === "input" && target2.getAttribute("type") === "checkbox") {
+                        return;
+                      }
                       const headerCell = target2.closest("th");
-                      if (headerCell && rowsSelectable && enableMultiRowSelection) {
-                        const header2 = headerGroup.headers.find((h) => {
-                          const headerElement = headerCell;
-                          return headerElement?.getAttribute("data-column-id") === h.id || h.id === "select";
-                        });
-                        if (header2 && header2.id === "select") {
-                          const clickX = event.clientX;
-                          const clickY = event.clientY;
-                          const checkbox2 = headerCell.querySelector(
-                            'input[type="checkbox"]'
+                      if (headerCell && rowsSelectable && enableMultiRowSelection && !hideSelectionCheckboxesHeader) {
+                        const headerId = headerCell.getAttribute("data-column-id");
+                        if (headerId === "select") {
+                          const allSelected2 = table2.getRowModel().rows.every(
+                            (row2) => rowDisabledPredicate(row2.original) || rowUnselectablePredicate(row2.original) || row2.getIsSelected()
                           );
-                          if (checkbox2) {
-                            const checkboxRect = checkbox2.getBoundingClientRect();
-                            if (isWithinCheckboxBoundary(
-                              clickX,
-                              clickY,
-                              checkboxRect,
-                              tolerancePixels
-                            )) {
-                              event.preventDefault();
-                              event.stopPropagation();
-                              const allSelected2 = table2.getRowModel().rows.every(
-                                (row2) => rowDisabledPredicate(row2.original) || rowUnselectablePredicate(row2.original) || row2.getIsSelected()
-                              );
-                              checkAllRows(!allSelected2);
-                            }
-                          }
-                        }
-                      }
-                    },
-                    onMouseMove: (event) => {
-                      if (rowsSelectable && enableMultiRowSelection) {
-                        const target2 = event.target;
-                        const headerCell = target2.closest("th");
-                        if (headerCell) {
-                          const header2 = headerGroup.headers.find((h) => {
-                            const headerElement = headerCell;
-                            return headerElement?.getAttribute("data-column-id") === h.id || h.id === "select";
-                          });
-                          if (header2 && header2.id === "select") {
-                            const mouseX = event.clientX;
-                            const mouseY = event.clientY;
-                            const checkbox2 = headerCell.querySelector(
-                              'input[type="checkbox"]'
-                            );
-                            if (checkbox2) {
-                              const checkboxRect = checkbox2.getBoundingClientRect();
-                              const shouldShowHover = isWithinCheckboxBoundary(
-                                mouseX,
-                                mouseY,
-                                checkboxRect,
-                                tolerancePixels
-                              );
-                              if (shouldShowHover && !headerCheckboxHovered) {
-                                setHeaderCheckboxHovered(true);
-                                event.currentTarget.style.cursor = "pointer";
-                              } else if (!shouldShowHover && headerCheckboxHovered) {
-                                setHeaderCheckboxHovered(false);
-                                event.currentTarget.style.cursor = "";
-                              }
-                            }
-                          } else if (headerCheckboxHovered) {
-                            setHeaderCheckboxHovered(false);
-                            event.currentTarget.style.cursor = "";
-                          }
+                          checkAllRows(!allSelected2);
                         }
                       }
                     },
-                    onMouseLeave: (event) => {
-                      if (headerCheckboxHovered) {
-                        setHeaderCheckboxHovered(false);
-                        event.currentTarget.style.cursor = "";
-                      }
-                    },
                     children: headerGroup.headers.map((header2, headerIndex) => {
                       const { width, ...style22 } = header2.column.columnDef.meta?.style || {};
                       const size = header2.getSize();
@@ -23941,8 +23981,6 @@ const TableMd = createMetadata({
     [`textTransform-heading-${COMP$11}`]: "uppercase",
     [`fontSize-row-${COMP$11}`]: "$fontSize-sm",
     [`fontSize-checkbox-${COMP$11}`]: "$fontSize",
-    // [`backgroundColor-${COMP}`]: "transparent",
-    // [`backgroundColor-row-${COMP}`]: "inherit",
     [`backgroundColor-selected-${COMP$11}--hover`]: `$backgroundColor-row-${COMP$11}--hover`,
     [`backgroundColor-pagination-${COMP$11}`]: `$backgroundColor-${COMP$11}`,
     [`textColor-pagination-${COMP$11}`]: "$color-secondary",
@@ -23960,7 +23998,10 @@ const TableMd = createMetadata({
     [`userSelect-row-${COMP$11}`]: "none",
     [`backgroundColor-evenRow-${COMP$11}`]: `$backgroundColor-row-${COMP$11}`,
     [`backgroundColor-oddRow-${COMP$11}`]: `$color-surface-100`,
-    [`backgroundColor-pinnedCell-${COMP$11}`]: "$color-surface-50"
+    [`backgroundColor-pinnedCell-${COMP$11}`]: "$color-surface-50",
+    [`backgroundColor-pinnedCell-${COMP$11}--hover`]: `$backgroundColor-row-${COMP$11}--hover`,
+    [`backgroundColor-selectionCell-${COMP$11}`]: "$backgroundColor-pinnedCell-Table",
+    [`backgroundColor-selectionCell-${COMP$11}--hover`]: `$backgroundColor-row-${COMP$11}--hover`
   }
 });
 const TableWithColumns = memo(
@@ -25058,15 +25099,15 @@ const cardComponentRenderer = wrapComponent(
   }
 );
 const themeVars$s = `'{"padding-ModalDialog": "var(--xmlui-padding-ModalDialog)", "paddingHorizontal-ModalDialog": "var(--xmlui-paddingHorizontal-ModalDialog, var(--xmlui-padding-ModalDialog))", "paddingVertical-ModalDialog": "var(--xmlui-paddingVertical-ModalDialog, var(--xmlui-padding-ModalDialog))", "paddingLeft-ModalDialog": "var(--xmlui-paddingLeft-ModalDialog, var(--xmlui-paddingHorizontal-ModalDialog, var(--xmlui-padding-ModalDialog)))", "paddingRight-ModalDialog": "var(--xmlui-paddingRight-ModalDialog, var(--xmlui-paddingHorizontal-ModalDialog, var(--xmlui-padding-ModalDialog)))", "paddingTop-ModalDialog": "var(--xmlui-paddingTop-ModalDialog, var(--xmlui-paddingVertical-ModalDialog, var(--xmlui-padding-ModalDialog)))", "paddingBottom-ModalDialog": "var(--xmlui-paddingBottom-ModalDialog, var(--xmlui-paddingVertical-ModalDialog, var(--xmlui-padding-ModalDialog)))", "padding-overlay-ModalDialog": "var(--xmlui-padding-overlay-ModalDialog)", "paddingHorizontal-overlay-ModalDialog": "var(--xmlui-paddingHorizontal-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog))", "paddingVertical-overlay-ModalDialog": "var(--xmlui-paddingVertical-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog))", "paddingLeft-overlay-ModalDialog": "var(--xmlui-paddingLeft-overlay-ModalDialog, var(--xmlui-paddingHorizontal-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "paddingRight-overlay-ModalDialog": "var(--xmlui-paddingRight-overlay-ModalDialog, var(--xmlui-paddingHorizontal-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "paddingTop-overlay-ModalDialog": "var(--xmlui-paddingTop-overlay-ModalDialog, var(--xmlui-paddingVertical-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "paddingBottom-overlay-ModalDialog": "var(--xmlui-paddingBottom-overlay-ModalDialog, var(--xmlui-paddingVertical-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "textColor-title-ModalDialog": "var(--xmlui-textColor-title-ModalDialog)", "fontFamily-title-ModalDialog": "var(--xmlui-fontFamily-title-ModalDialog)", "fontSize-title-ModalDialog": "var(--xmlui-fontSize-title-ModalDialog)", "fontStyle-title-ModalDialog": "var(--xmlui-fontStyle-title-ModalDialog)", "fontVariant-title-ModalDialog": "var(--xmlui-fontVariant-title-ModalDialog)", "fontWeight-title-ModalDialog": "var(--xmlui-fontWeight-title-ModalDialog)", "fontStretch-title-ModalDialog": "var(--xmlui-fontStretch-title-ModalDialog)", "textDecorationLine-title-ModalDialog": "var(--xmlui-textDecorationLine-title-ModalDialog)", "textDecorationColor-title-ModalDialog": "var(--xmlui-textDecorationColor-title-ModalDialog)", "textDecorationStyle-title-ModalDialog": "var(--xmlui-textDecorationStyle-title-ModalDialog)", "textDecorationThickness-title-ModalDialog": "var(--xmlui-textDecorationThickness-title-ModalDialog)", "textUnderlineOffset-title-ModalDialog": "var(--xmlui-textUnderlineOffset-title-ModalDialog)", "lineHeight-title-ModalDialog": "var(--xmlui-lineHeight-title-ModalDialog)", "backgroundColor-title-ModalDialog": "var(--xmlui-backgroundColor-title-ModalDialog)", "textTransform-title-ModalDialog": "var(--xmlui-textTransform-title-ModalDialog)", "letterSpacing-title-ModalDialog": "var(--xmlui-letterSpacing-title-ModalDialog)", "wordSpacing-title-ModalDialog": "var(--xmlui-wordSpacing-title-ModalDialog)", "textShadow-title-ModalDialog": "var(--xmlui-textShadow-title-ModalDialog)", "textIndent-title-ModalDialog": "var(--xmlui-textIndent-title-ModalDialog)", "textAlign-title-ModalDialog": "var(--xmlui-textAlign-title-ModalDialog)", "textAlignLast-title-ModalDialog": "var(--xmlui-textAlignLast-title-ModalDialog)", "wordBreak-title-ModalDialog": "var(--xmlui-wordBreak-title-ModalDialog)", "wordWrap-title-ModalDialog": "var(--xmlui-wordWrap-title-ModalDialog)", "direction-title-ModalDialog": "var(--xmlui-direction-title-ModalDialog)", "writingMode-title-ModalDialog": "var(--xmlui-writingMode-title-ModalDialog)", "lineBreak-title-ModalDialog": "var(--xmlui-lineBreak-title-ModalDialog)", "Dialog:backgroundColor-ModalDialog": "var(--xmlui-backgroundColor-ModalDialog)", "Dialog:backgroundColor-overlay-ModalDialog": "var(--xmlui-backgroundColor-overlay-ModalDialog)", "Dialog:borderRadius-ModalDialog": "var(--xmlui-borderRadius-ModalDialog)", "Dialog:fontFamily-ModalDialog": "var(--xmlui-fontFamily-ModalDialog)", "Dialog:textColor-ModalDialog": "var(--xmlui-textColor-ModalDialog)", "Dialog:minWidth-ModalDialog": "var(--xmlui-minWidth-ModalDialog)", "Dialog:maxWidth-ModalDialog": "var(--xmlui-maxWidth-ModalDialog)", "Dialog:maxHeight-ModalDialog": "var(--xmlui-maxHeight-ModalDialog)", "Dialog:marginBottom-title-ModalDialog": "var(--xmlui-marginBottom-title-ModalDialog)"}'`;
-const overlay$2 = "_overlay_wrfrc_14";
-const fullScreen = "_fullScreen_wrfrc_22";
-const content$2 = "_content_wrfrc_28";
-const overlayBg$1 = "_overlayBg_wrfrc_37";
-const nested = "_nested_wrfrc_43";
-const contentAnimation = "_contentAnimation_wrfrc_74";
-const dialogTitle = "_dialogTitle_wrfrc_80";
-const innerContent = "_innerContent_wrfrc_109";
-const closeButton$2 = "_closeButton_wrfrc_135";
+const overlay$2 = "_overlay_nc6kd_14";
+const fullScreen = "_fullScreen_nc6kd_22";
+const content$2 = "_content_nc6kd_28";
+const overlayBg$1 = "_overlayBg_nc6kd_37";
+const nested = "_nested_nc6kd_43";
+const contentAnimation = "_contentAnimation_nc6kd_74";
+const dialogTitle = "_dialogTitle_nc6kd_80";
+const innerContent = "_innerContent_nc6kd_109";
+const closeButton$2 = "_closeButton_nc6kd_135";
 const styles$I = {
   themeVars: themeVars$s,
   overlay: overlay$2,
@@ -25419,7 +25460,9 @@ const modalViewComponentRenderer = wrapComponent(
                     ...contextVars,
                     $param: openParams?.[0],
                     $params: openParams
-                  }
+                  },
+                  vars: node._savedVarDefs,
+                  functions: node._savedFunctionDefs
                 }
               );
             }
@@ -27021,6 +27064,7 @@ const queueComponentRenderer = wrapComponent(COMP$N, QueueWithContextVar, QueueM
     }
   )
 });
+const warnedLayoutForwardTypes = /* @__PURE__ */ new Set();
 const CompoundComponent = forwardRef(
   ({
     node,
@@ -27042,6 +27086,9 @@ const CompoundComponent = forwardRef(
     contextVars,
     // Extract contextVars to prevent it from being passed to DOM elements
     globalVars,
+    // Strip XMLUI-internal props that must never be forwarded to inner DOM elements
+    logInteraction: _logInteraction,
+    classes: _classes,
     ...restProps
   }, forwardedRef) => {
     const resolvedPropsInner = useMemo(() => {
@@ -27133,8 +27180,20 @@ const CompoundComponent = forwardRef(
         children: node.children
       };
     }, [hasTemplateProps, node.children, node.props, renderChild2]);
-    const safeLayoutContext = layoutContext ? { ...layoutContext, wrapChild: void 0 } : layoutContext;
+    const extraClassName = restProps.className;
+    const safeLayoutContext = extraClassName ? { ...layoutContext ?? {}, wrapChild: void 0, extraClassName } : layoutContext ? { ...layoutContext, wrapChild: void 0 } : layoutContext;
     const ret = renderChild2(nodeWithPropsAndEvents, safeLayoutContext, memoedParentRenderContext);
+    if (process.env.NODE_ENV !== "production" && extraClassName) {
+      if (compound.type === "Fragment") {
+        const usedLayoutProps = layoutOptionKeys.filter((key) => key in node.props);
+        if (usedLayoutProps.length > 0 && !warnedLayoutForwardTypes.has(node.type)) {
+          warnedLayoutForwardTypes.add(node.type);
+          console.warn(
+            `[XMLUI] Component '${node.type}' has layout props (${usedLayoutProps.join(", ")}) but its template has multiple root children — layout props cannot be forwarded. Wrap the template content in a single root element to enable layout forwarding.`
+          );
+        }
+      }
+    }
     if (forwardedRef && ret && isValidElement(ret)) {
       return React__default.cloneElement(ret, {
         ref: composeRefs(forwardedRef, ret.ref),
@@ -27257,7 +27316,8 @@ function useListData({
     if (groupBy$1 === void 0) {
       return EMPTY_OBJECT;
     }
-    return groupBy(cappedItems, (item2) => item2[groupBy$1]);
+    const iteratee = typeof groupBy$1 === "function" ? groupBy$1 : (item2) => item2[groupBy$1];
+    return groupBy(cappedItems, iteratee);
   }, [cappedItems, groupBy$1]);
   const sections = useMemo(() => {
     if (groupBy$1 === void 0) {
@@ -28054,7 +28114,7 @@ const ListMd = createMetadata({
       defaultValue: false
     },
     groupBy: d(
-      "This property sets which data item property is used to group the list items. If not set, no grouping is done."
+      "This property sets which data item property is used to group the list items. Accepts a field name string or a function that receives an item and returns the group key. If not set, no grouping is done."
     ),
     orderBy: d(
       `This optioanl property enables the ordering of list items by specifying an attribute in the data.`
@@ -28113,6 +28173,9 @@ const ListMd = createMetadata({
     syncWithVar: d(
       `The name of a global variable to synchronize the list's selection state with. The named variable must reference an object; the list will read from and write to its 'selectedIds' property. When provided, this takes precedence over \`initiallySelected\`.`
     ),
+    refreshOn: d(
+      `Bind this property to a global variable (or expression) whose change should force all visible list items to re-render and pick up the latest reactive state. When not set, items re-render on every XMLUI reactive cycle (safe but less optimal). When set, items only re-render when the bound value changes, which eliminates spurious re-renders from unrelated global-variable updates (e.g. focus events).`
+    ),
     rowUnselectablePredicate: {
       description: `This property defines a predicate function with a return value that determines if the row should be unselectable. The function retrieves the item to display and should return a Boolean-like value. This property only has an effect when the \`rowsSelectable\` property is set to \`true\`.`
     },
@@ -28279,6 +28342,29 @@ const ListMd = createMetadata({
   }
 });
 const VALID_IDENTIFIER_RE$1 = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+const ListMemoizedItem = memo(
+  ({ node, renderChild: renderChild2, layoutContext, contextVars }) => /* @__PURE__ */ jsx(
+    MemoizedItem,
+    {
+      node,
+      renderChild: renderChild2,
+      layoutContext,
+      contextVars
+    }
+  ),
+  (prev, next) => {
+    if (prev.renderVersion !== next.renderVersion) return false;
+    if (prev.node !== next.node) return false;
+    const prevVars = prev.contextVars ?? EMPTY_OBJECT;
+    const nextVars = next.contextVars ?? EMPTY_OBJECT;
+    const keys = Object.keys(nextVars);
+    if (keys.length !== Object.keys(prevVars).length) return false;
+    for (const k of keys) {
+      if (prevVars[k] !== nextVars[k]) return false;
+    }
+    return true;
+  }
+);
 const ListWithSelection = memo(function ListWithSelection2({
   extractValue,
   node,
@@ -28294,10 +28380,30 @@ const ListWithSelection = memo(function ListWithSelection2({
   const itemTemplate = node.props.itemTemplate;
   const hideEmptyGroups = extractValue.asOptionalBoolean(node.props.hideEmptyGroups, true);
   const selectionContext = useSelectionContext();
+  const renderChildRef = useRef(renderChild2);
+  renderChildRef.current = renderChild2;
+  const layoutContextRef = useRef(layoutContext);
+  layoutContextRef.current = layoutContext;
+  const stableRenderChildFnRef = useRef(
+    (node2, ctx) => renderChildRef.current(node2, ctx)
+  );
+  const refreshOn = extractValue(node.props.refreshOn);
+  const prevRefreshOnRef = useRef(refreshOn);
+  const renderVersionRef = useRef(0);
+  const shouldForceRefresh = node.props.refreshOn === void 0 || prevRefreshOnRef.current !== refreshOn;
+  if (shouldForceRefresh) {
+    prevRefreshOnRef.current = refreshOn;
+    renderVersionRef.current++;
+  }
   const syncVarName = extractValue.asOptionalString(node.props.syncWithVar);
   const lookupActionRef = useRef(lookupAction);
   lookupActionRef.current = lookupAction;
   const syncAdapterHolderRef = useRef(null);
+  const pendingOwnWriteRef = useRef(false);
+  const pendingOwnWriteVersionRef = useRef(0);
+  const ownWriteCountRef = useRef(0);
+  const pendingOwnWrite = pendingOwnWriteRef.current;
+  pendingOwnWriteRef.current = false;
   let syncAdapter;
   if (syncVarName !== void 0) {
     if (!VALID_IDENTIFIER_RE$1.test(syncVarName)) {
@@ -28310,14 +28416,31 @@ const ListWithSelection = memo(function ListWithSelection2({
           syncAdapterHolderRef.current = {
             value: currentSyncVarValue,
             update: ({ selectedIds }) => {
-              const valueJson = JSON.stringify(selectedIds);
-              const expr = `{${syncVarName} = {selectedIds: ${valueJson}}}`;
-              const handler = lookupActionRef.current?.(expr, { ephemeral: true });
-              handler?.();
+              pendingOwnWriteRef.current = true;
+              const thisVersion = ++ownWriteCountRef.current;
+              pendingOwnWriteVersionRef.current = thisVersion;
+              const windowKey = `__listSync_${syncVarName}`;
+              window[windowKey] = { selectedIds, __v: thisVersion };
+              const handler = lookupActionRef.current?.(
+                `{${syncVarName} = window.${windowKey}}`,
+                { ephemeral: true }
+              );
+              startTransition(() => {
+                handler?.();
+              });
             }
           };
-        } else {
-          syncAdapterHolderRef.current.value = currentSyncVarValue;
+        } else if (currentSyncVarValue !== syncAdapterHolderRef.current.value) {
+          const isOwnWrite = pendingOwnWrite || pendingOwnWriteVersionRef.current > 0 && currentSyncVarValue?.__v === pendingOwnWriteVersionRef.current;
+          if (isOwnWrite) {
+            syncAdapterHolderRef.current.value = currentSyncVarValue;
+          } else {
+            pendingOwnWriteVersionRef.current = 0;
+            syncAdapterHolderRef.current = {
+              value: currentSyncVarValue,
+              update: syncAdapterHolderRef.current.update
+            };
+          }
         }
       } else {
         syncAdapterHolderRef.current = null;
@@ -28327,6 +28450,58 @@ const ListWithSelection = memo(function ListWithSelection2({
     syncAdapterHolderRef.current = null;
   }
   syncAdapter = syncAdapterHolderRef.current;
+  const stableItemRenderer = useMemo(
+    () => itemTemplate ? (item2, key, rowIndex, count, isSelected) => /* @__PURE__ */ jsx(
+      ListMemoizedItem,
+      {
+        node: itemTemplate,
+        renderChild: stableRenderChildFnRef.current,
+        layoutContext: layoutContextRef.current,
+        renderVersion: renderVersionRef.current,
+        contextVars: {
+          $item: item2,
+          $itemIndex: rowIndex,
+          $isFirst: rowIndex === 0,
+          $isLast: rowIndex === count - 1,
+          $isSelected: isSelected
+        }
+      },
+      key
+    ) : void 0,
+    // idKey is included because it is captured by itemTemplate renders via $item[idKey].
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [itemTemplate, idKey]
+  );
+  const stableSectionRenderer = useMemo(
+    () => node.props.groupBy ? (item2, key) => (item2.items?.length ?? 0) > 0 || !hideEmptyGroups ? /* @__PURE__ */ jsx(
+      MemoizedSection,
+      {
+        node: node.props.groupHeaderTemplate ?? { type: "Fragment" },
+        renderChild: stableRenderChildFnRef.current,
+        item: item2
+      },
+      key
+    ) : null : void 0,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [node.props.groupBy, node.props.groupHeaderTemplate, hideEmptyGroups]
+  );
+  const stableSectionFooterRenderer = useMemo(
+    () => node.props.groupFooterTemplate ? (item2, key) => (item2.items?.length ?? 0) > 0 || !hideEmptyGroups ? /* @__PURE__ */ jsx(
+      MemoizedItem,
+      {
+        node: node.props.groupFooterTemplate ?? { type: "Fragment" },
+        renderChild: stableRenderChildFnRef.current,
+        contextVars: {
+          $group: item2
+        }
+      },
+      key
+    ) : null : void 0,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [node.props.groupFooterTemplate, hideEmptyGroups]
+  );
+  const groupByExtracted = extractValue(node.props.groupBy);
+  const groupByResolved = isArrowExpressionObject$1(groupByExtracted) ? lookupSyncCallback(node.props.groupBy) : groupByExtracted;
   const listContent = /* @__PURE__ */ jsx(
     ListNative,
     {
@@ -28335,7 +28510,7 @@ const ListWithSelection = memo(function ListWithSelection2({
       loading: extractValue.asOptionalBoolean(node.props.loading),
       items: extractValue(node.props.items) || extractValue(node.props.data),
       limit: extractValue(node.props.limit),
-      groupBy: extractValue(node.props.groupBy),
+      groupBy: groupByResolved,
       orderBy: extractValue(node.props.orderBy),
       availableGroups: extractValue(node.props.availableGroups),
       scrollAnchor: node.props.scrollAnchor,
@@ -28368,44 +28543,9 @@ const ListWithSelection = memo(function ListWithSelection2({
       onDeleteAction: lookupEventHandler("deleteAction"),
       rowDoubleClick: lookupEventHandler("rowDoubleClick"),
       keyBindings: extractValue(node.props.keyBindings),
-      itemRenderer: itemTemplate && ((item2, key, rowIndex, count, isSelected) => {
-        return /* @__PURE__ */ jsx(
-          MemoizedItem,
-          {
-            node: itemTemplate,
-            renderChild: renderChild2,
-            layoutContext,
-            contextVars: {
-              $item: item2,
-              $itemIndex: rowIndex,
-              $isFirst: rowIndex === 0,
-              $isLast: rowIndex === count - 1,
-              $isSelected: isSelected
-            }
-          },
-          key
-        );
-      }),
-      sectionRenderer: node.props.groupBy ? (item2, key) => (item2.items?.length ?? 0) > 0 || !hideEmptyGroups ? /* @__PURE__ */ jsx(
-        MemoizedSection,
-        {
-          node: node.props.groupHeaderTemplate ?? { type: "Fragment" },
-          renderChild: renderChild2,
-          item: item2
-        },
-        key
-      ) : null : void 0,
-      sectionFooterRenderer: node.props.groupFooterTemplate ? (item2, key) => (item2.items?.length ?? 0) > 0 || !hideEmptyGroups ? /* @__PURE__ */ jsx(
-        MemoizedItem,
-        {
-          node: node.props.groupFooterTemplate ?? { type: "Fragment" },
-          renderChild: renderChild2,
-          contextVars: {
-            $group: item2
-          }
-        },
-        key
-      ) : null : void 0
+      itemRenderer: stableItemRenderer,
+      sectionRenderer: stableSectionRenderer,
+      sectionFooterRenderer: stableSectionFooterRenderer
     }
   );
   if (selectionContext === null) {
@@ -29008,6 +29148,8 @@ const TileGridWithSync = memo(
     const prevRefreshOnRef = useRef(refreshOn);
     const renderVersionRef = useRef(0);
     const pendingOwnWriteRef = useRef(false);
+    const pendingOwnWriteVersionRef = useRef(0);
+    const ownWriteCountRef = useRef(0);
     const pendingOwnWrite = pendingOwnWriteRef.current;
     pendingOwnWriteRef.current = false;
     const shouldForceRefresh = node.props.refreshOn === void 0 || prevRefreshOnRef.current !== refreshOn;
@@ -29028,20 +29170,26 @@ const TileGridWithSync = memo(
               value: currentValue,
               update: ({ selectedIds }) => {
                 const windowKey = `__tgSync_${syncVarName}`;
-                window[windowKey] = selectedIds;
+                pendingOwnWriteRef.current = true;
+                const thisVersion = ++ownWriteCountRef.current;
+                pendingOwnWriteVersionRef.current = thisVersion;
+                window[windowKey] = { selectedIds, __v: thisVersion };
                 const handler = lookupActionRef.current?.(
-                  `{${syncVarName} = {selectedIds: window.${windowKey}}}`,
+                  `{${syncVarName} = {selectedIds: window.${windowKey}.selectedIds, __v: window.${windowKey}.__v}}`,
                   { ephemeral: true }
                 );
-                pendingOwnWriteRef.current = true;
                 startTransition(() => {
                   handler?.();
                 });
               }
             };
           } else if (currentValue !== syncAdapterHolderRef.current.value) {
-            if (pendingOwnWrite) {
+            const isOwnWrite = pendingOwnWrite || pendingOwnWriteVersionRef.current > 0 && currentValue?.__v === pendingOwnWriteVersionRef.current;
+            if (isOwnWrite) {
               syncAdapterHolderRef.current.value = currentValue;
+              if (currentValue?.__v === pendingOwnWriteVersionRef.current) {
+                pendingOwnWriteVersionRef.current = 0;
+              }
             } else {
               syncAdapterHolderRef.current = {
                 value: currentValue,
@@ -31477,53 +31625,53 @@ const numberBoxComponentRenderer = wrapComponent(COMP$H, ThemedNumberBox, Number
   deriveAriaLabel: (props) => props.label || props.placeholder
 });
 const themeVars$h = `'{"padding-DatePicker": "var(--xmlui-padding-DatePicker)", "paddingHorizontal-DatePicker": "var(--xmlui-paddingHorizontal-DatePicker, var(--xmlui-padding-DatePicker))", "paddingVertical-DatePicker": "var(--xmlui-paddingVertical-DatePicker, var(--xmlui-padding-DatePicker))", "paddingLeft-DatePicker": "var(--xmlui-paddingLeft-DatePicker, var(--xmlui-paddingHorizontal-DatePicker, var(--xmlui-padding-DatePicker)))", "paddingRight-DatePicker": "var(--xmlui-paddingRight-DatePicker, var(--xmlui-paddingHorizontal-DatePicker, var(--xmlui-padding-DatePicker)))", "paddingTop-DatePicker": "var(--xmlui-paddingTop-DatePicker, var(--xmlui-paddingVertical-DatePicker, var(--xmlui-padding-DatePicker)))", "paddingBottom-DatePicker": "var(--xmlui-paddingBottom-DatePicker, var(--xmlui-paddingVertical-DatePicker, var(--xmlui-padding-DatePicker)))", "Input:borderRadius-DatePicker": "var(--xmlui-borderRadius-DatePicker)", "Input:borderColor-DatePicker": "var(--xmlui-borderColor-DatePicker)", "Input:borderWidth-DatePicker": "var(--xmlui-borderWidth-DatePicker)", "Input:borderStyle-DatePicker": "var(--xmlui-borderStyle-DatePicker)", "Input:backgroundColor-DatePicker": "var(--xmlui-backgroundColor-DatePicker)", "Input:boxShadow-DatePicker": "var(--xmlui-boxShadow-DatePicker)", "Input:textColor-DatePicker": "var(--xmlui-textColor-DatePicker)", "Input:borderColor-DatePicker--hover": "var(--xmlui-borderColor-DatePicker--hover)", "Input:backgroundColor-DatePicker--hover": "var(--xmlui-backgroundColor-DatePicker--hover)", "Input:boxShadow-DatePicker--hover": "var(--xmlui-boxShadow-DatePicker--hover)", "Input:textColor-DatePicker--hover": "var(--xmlui-textColor-DatePicker--hover)", "Input:outlineWidth-DatePicker--focus": "var(--xmlui-outlineWidth-DatePicker--focus)", "Input:outlineColor-DatePicker--focus": "var(--xmlui-outlineColor-DatePicker--focus)", "Input:outlineStyle-DatePicker--focus": "var(--xmlui-outlineStyle-DatePicker--focus)", "Input:outlineOffset-DatePicker--focus": "var(--xmlui-outlineOffset-DatePicker--focus)", "Input:textColor-placeholder-DatePicker": "var(--xmlui-textColor-placeholder-DatePicker)", "Input:fontSize-placeholder-DatePicker": "var(--xmlui-fontSize-placeholder-DatePicker)", "Input:color-adornment-DatePicker": "var(--xmlui-color-adornment-DatePicker)", "Input:borderRadius-DatePicker--error": "var(--xmlui-borderRadius-DatePicker--error)", "Input:borderColor-DatePicker--error": "var(--xmlui-borderColor-DatePicker--error)", "Input:borderWidth-DatePicker--error": "var(--xmlui-borderWidth-DatePicker--error)", "Input:borderStyle-DatePicker--error": "var(--xmlui-borderStyle-DatePicker--error)", "Input:backgroundColor-DatePicker--error": "var(--xmlui-backgroundColor-DatePicker--error)", "Input:boxShadow-DatePicker--error": "var(--xmlui-boxShadow-DatePicker--error)", "Input:textColor-DatePicker--error": "var(--xmlui-textColor-DatePicker--error)", "Input:borderColor-DatePicker--error--hover": "var(--xmlui-borderColor-DatePicker--error--hover)", "Input:backgroundColor-DatePicker--error--hover": "var(--xmlui-backgroundColor-DatePicker--error--hover)", "Input:boxShadow-DatePicker--error--hover": "var(--xmlui-boxShadow-DatePicker--error--hover)", "Input:textColor-DatePicker--error--hover": "var(--xmlui-textColor-DatePicker--error--hover)", "Input:outlineWidth-DatePicker--error--focus": "var(--xmlui-outlineWidth-DatePicker--error--focus)", "Input:outlineColor-DatePicker--error--focus": "var(--xmlui-outlineColor-DatePicker--error--focus)", "Input:outlineStyle-DatePicker--error--focus": "var(--xmlui-outlineStyle-DatePicker--error--focus)", "Input:outlineOffset-DatePicker--error--focus": "var(--xmlui-outlineOffset-DatePicker--error--focus)", "Input:textColor-placeholder-DatePicker--error": "var(--xmlui-textColor-placeholder-DatePicker--error)", "Input:fontSize-placeholder-DatePicker--error": "var(--xmlui-fontSize-placeholder-DatePicker--error)", "Input:color-adornment-DatePicker--error": "var(--xmlui-color-adornment-DatePicker--error)", "Input:borderRadius-DatePicker--warning": "var(--xmlui-borderRadius-DatePicker--warning)", "Input:borderColor-DatePicker--warning": "var(--xmlui-borderColor-DatePicker--warning)", "Input:borderWidth-DatePicker--warning": "var(--xmlui-borderWidth-DatePicker--warning)", "Input:borderStyle-DatePicker--warning": "var(--xmlui-borderStyle-DatePicker--warning)", "Input:backgroundColor-DatePicker--warning": "var(--xmlui-backgroundColor-DatePicker--warning)", "Input:boxShadow-DatePicker--warning": "var(--xmlui-boxShadow-DatePicker--warning)", "Input:textColor-DatePicker--warning": "var(--xmlui-textColor-DatePicker--warning)", "Input:borderColor-DatePicker--warning--hover": "var(--xmlui-borderColor-DatePicker--warning--hover)", "Input:backgroundColor-DatePicker--warning--hover": "var(--xmlui-backgroundColor-DatePicker--warning--hover)", "Input:boxShadow-DatePicker--warning--hover": "var(--xmlui-boxShadow-DatePicker--warning--hover)", "Input:textColor-DatePicker--warning--hover": "var(--xmlui-textColor-DatePicker--warning--hover)", "Input:outlineWidth-DatePicker--warning--focus": "var(--xmlui-outlineWidth-DatePicker--warning--focus)", "Input:outlineColor-DatePicker--warning--focus": "var(--xmlui-outlineColor-DatePicker--warning--focus)", "Input:outlineStyle-DatePicker--warning--focus": "var(--xmlui-outlineStyle-DatePicker--warning--focus)", "Input:outlineOffset-DatePicker--warning--focus": "var(--xmlui-outlineOffset-DatePicker--warning--focus)", "Input:textColor-placeholder-DatePicker--warning": "var(--xmlui-textColor-placeholder-DatePicker--warning)", "Input:fontSize-placeholder-DatePicker--warning": "var(--xmlui-fontSize-placeholder-DatePicker--warning)", "Input:color-adornment-DatePicker--warning": "var(--xmlui-color-adornment-DatePicker--warning)", "Input:borderRadius-DatePicker--success": "var(--xmlui-borderRadius-DatePicker--success)", "Input:borderColor-DatePicker--success": "var(--xmlui-borderColor-DatePicker--success)", "Input:borderWidth-DatePicker--success": "var(--xmlui-borderWidth-DatePicker--success)", "Input:borderStyle-DatePicker--success": "var(--xmlui-borderStyle-DatePicker--success)", "Input:backgroundColor-DatePicker--success": "var(--xmlui-backgroundColor-DatePicker--success)", "Input:boxShadow-DatePicker--success": "var(--xmlui-boxShadow-DatePicker--success)", "Input:textColor-DatePicker--success": "var(--xmlui-textColor-DatePicker--success)", "Input:borderColor-DatePicker--success--hover": "var(--xmlui-borderColor-DatePicker--success--hover)", "Input:backgroundColor-DatePicker--success--hover": "var(--xmlui-backgroundColor-DatePicker--success--hover)", "Input:boxShadow-DatePicker--success--hover": "var(--xmlui-boxShadow-DatePicker--success--hover)", "Input:textColor-DatePicker--success--hover": "var(--xmlui-textColor-DatePicker--success--hover)", "Input:outlineWidth-DatePicker--success--focus": "var(--xmlui-outlineWidth-DatePicker--success--focus)", "Input:outlineColor-DatePicker--success--focus": "var(--xmlui-outlineColor-DatePicker--success--focus)", "Input:outlineStyle-DatePicker--success--focus": "var(--xmlui-outlineStyle-DatePicker--success--focus)", "Input:outlineOffset-DatePicker--success--focus": "var(--xmlui-outlineOffset-DatePicker--success--focus)", "Input:textColor-placeholder-DatePicker--success": "var(--xmlui-textColor-placeholder-DatePicker--success)", "Input:fontSize-placeholder-DatePicker--success": "var(--xmlui-fontSize-placeholder-DatePicker--success)", "Input:color-adornment-DatePicker--success": "var(--xmlui-color-adornment-DatePicker--success)", "Input:fontSize-DatePicker": "var(--xmlui-fontSize-DatePicker)", "Input:backgroundColor-DatePicker--disabled": "var(--xmlui-backgroundColor-DatePicker--disabled)", "Input:textColor-DatePicker--disabled": "var(--xmlui-textColor-DatePicker--disabled)", "Input:borderColor-DatePicker--disabled": "var(--xmlui-borderColor-DatePicker--disabled)", "Input:boxShadow-menu-DatePicker": "var(--xmlui-boxShadow-menu-DatePicker)", "Input:backgroundColor-menu-DatePicker": "var(--xmlui-backgroundColor-menu-DatePicker)", "Input:borderRadius-menu-DatePicker": "var(--xmlui-borderRadius-menu-DatePicker)", "Input:backgroundColor-item-DatePicker--active": "var(--xmlui-backgroundColor-item-DatePicker--active)", "Input:backgroundColor-item-DatePicker--hover": "var(--xmlui-backgroundColor-item-DatePicker--hover)", "Input:textColor-value-DatePicker": "var(--xmlui-textColor-value-DatePicker)", "Input:minHeight-DatePicker": "var(--xmlui-minHeight-DatePicker)", "Input:borderColor-selectedItem-DatePicker": "var(--xmlui-borderColor-selectedItem-DatePicker)"}'`;
-const datePicker = "_datePicker_1f64a_14";
-const placeholder$1 = "_placeholder_1f64a_53";
-const adornment$2 = "_adornment_1f64a_57";
-const error$8 = "_error_1f64a_60";
-const warning$8 = "_warning_1f64a_88";
-const valid$8 = "_valid_1f64a_116";
-const disabled$5 = "_disabled_1f64a_144";
-const indicator$1 = "_indicator_1f64a_150";
-const datePickerInput = "_datePickerInput_1f64a_151";
-const inlinePickerMenu = "_inlinePickerMenu_1f64a_154";
-const datePickerMenu = "_datePickerMenu_1f64a_164";
-const root$3 = "_root_1f64a_175";
-const day$1 = "_day_1f64a_255";
-const day_button = "_day_button_1f64a_261";
-const caption_label = "_caption_label_1f64a_283";
-const dropdown = "_dropdown_1f64a_293";
-const button_next = "_button_next_1f64a_296";
-const button_previous = "_button_previous_1f64a_297";
-const chevron$1 = "_chevron_1f64a_326";
-const nav = "_nav_1f64a_330";
-const dropdowns = "_dropdowns_1f64a_334";
-const dropdown_root = "_dropdown_root_1f64a_356";
-const month_caption = "_month_caption_1f64a_369";
-const month$1 = "_month_1f64a_369";
-const months = "_months_1f64a_402";
-const month_grid = "_month_grid_1f64a_409";
-const weekday = "_weekday_1f64a_420";
-const week_number = "_week_number_1f64a_429";
-const today = "_today_1f64a_440";
-const outside = "_outside_1f64a_440";
-const selected = "_selected_1f64a_443";
-const hidden = "_hidden_1f64a_459";
-const range_start = "_range_start_1f64a_463";
-const range_middle = "_range_middle_1f64a_470";
-const range_end = "_range_end_1f64a_480";
-const hovered = "_hovered_1f64a_491";
-const singleSelected = "_singleSelected_1f64a_499";
-const focusable = "_focusable_1f64a_502";
-const datePickerValue = "_datePickerValue_1f64a_505";
-const weeks_before_enter = "_weeks_before_enter_1f64a_541";
-const weeks_before_exit = "_weeks_before_exit_1f64a_544";
-const weeks_after_enter = "_weeks_after_enter_1f64a_547";
-const weeks_after_exit = "_weeks_after_exit_1f64a_550";
-const caption_after_enter = "_caption_after_enter_1f64a_581";
-const caption_after_exit = "_caption_after_exit_1f64a_584";
-const caption_before_enter = "_caption_before_enter_1f64a_587";
-const caption_before_exit = "_caption_before_exit_1f64a_590";
+const datePicker = "_datePicker_1jlyg_14";
+const placeholder$1 = "_placeholder_1jlyg_53";
+const adornment$2 = "_adornment_1jlyg_57";
+const error$8 = "_error_1jlyg_60";
+const warning$8 = "_warning_1jlyg_88";
+const valid$8 = "_valid_1jlyg_116";
+const disabled$5 = "_disabled_1jlyg_144";
+const indicator$1 = "_indicator_1jlyg_150";
+const datePickerInput = "_datePickerInput_1jlyg_151";
+const datePickerValue = "_datePickerValue_1jlyg_154";
+const inlinePickerMenu = "_inlinePickerMenu_1jlyg_158";
+const datePickerMenu = "_datePickerMenu_1jlyg_168";
+const root$3 = "_root_1jlyg_178";
+const months = "_months_1jlyg_226";
+const month_grid = "_month_grid_1jlyg_233";
+const month_caption = "_month_caption_1jlyg_236";
+const nav = "_nav_1jlyg_244";
+const button_next = "_button_next_1jlyg_252";
+const button_previous = "_button_previous_1jlyg_253";
+const chevron$1 = "_chevron_1jlyg_282";
+const month$1 = "_month_1jlyg_226";
+const caption_label = "_caption_label_1jlyg_315";
+const dropdown = "_dropdown_1jlyg_325";
+const dropdowns = "_dropdowns_1jlyg_328";
+const dropdown_root = "_dropdown_root_1jlyg_349";
+const weekday = "_weekday_1jlyg_362";
+const week_number = "_week_number_1jlyg_371";
+const day$1 = "_day_1jlyg_381";
+const day_button = "_day_button_1jlyg_387";
+const today = "_today_1jlyg_409";
+const outside = "_outside_1jlyg_409";
+const selected = "_selected_1jlyg_412";
+const hidden = "_hidden_1jlyg_425";
+const range_start = "_range_start_1jlyg_429";
+const range_middle = "_range_middle_1jlyg_436";
+const range_end = "_range_end_1jlyg_446";
+const hovered = "_hovered_1jlyg_456";
+const singleSelected = "_singleSelected_1jlyg_463";
+const focusable = "_focusable_1jlyg_466";
+const weeks_before_enter = "_weeks_before_enter_1jlyg_501";
+const weeks_before_exit = "_weeks_before_exit_1jlyg_504";
+const weeks_after_enter = "_weeks_after_enter_1jlyg_507";
+const weeks_after_exit = "_weeks_after_exit_1jlyg_510";
+const caption_after_enter = "_caption_after_enter_1jlyg_541";
+const caption_after_exit = "_caption_after_exit_1jlyg_544";
+const caption_before_enter = "_caption_before_enter_1jlyg_547";
+const caption_before_exit = "_caption_before_exit_1jlyg_550";
 const styles$w = {
   themeVars: themeVars$h,
   datePicker,
@@ -31535,25 +31683,26 @@ const styles$w = {
   disabled: disabled$5,
   indicator: indicator$1,
   datePickerInput,
+  datePickerValue,
   inlinePickerMenu,
   datePickerMenu,
   root: root$3,
-  day: day$1,
-  day_button,
-  caption_label,
-  dropdown,
+  months,
+  month_grid,
+  month_caption,
+  nav,
   button_next,
   button_previous,
   chevron: chevron$1,
-  nav,
+  month: month$1,
+  caption_label,
+  dropdown,
   dropdowns,
   dropdown_root,
-  month_caption,
-  month: month$1,
-  months,
-  month_grid,
   weekday,
   week_number,
+  day: day$1,
+  day_button,
   today,
   outside,
   selected,
@@ -31564,19 +31713,18 @@ const styles$w = {
   hovered,
   singleSelected,
   focusable,
-  datePickerValue,
   weeks_before_enter,
-  "rdp-slide_in_left": "_rdp-slide_in_left_1f64a_1",
+  "rdp-slide_in_left": "_rdp-slide_in_left_1jlyg_1",
   weeks_before_exit,
-  "rdp-slide_out_left": "_rdp-slide_out_left_1f64a_1",
+  "rdp-slide_out_left": "_rdp-slide_out_left_1jlyg_1",
   weeks_after_enter,
-  "rdp-slide_in_right": "_rdp-slide_in_right_1f64a_1",
+  "rdp-slide_in_right": "_rdp-slide_in_right_1jlyg_1",
   weeks_after_exit,
-  "rdp-slide_out_right": "_rdp-slide_out_right_1f64a_1",
+  "rdp-slide_out_right": "_rdp-slide_out_right_1jlyg_1",
   caption_after_enter,
-  "rdp-fade_in": "_rdp-fade_in_1f64a_1",
+  "rdp-fade_in": "_rdp-fade_in_1jlyg_1",
   caption_after_exit,
-  "rdp-fade_out": "_rdp-fade_out_1f64a_1",
+  "rdp-fade_out": "_rdp-fade_out_1jlyg_1",
   caption_before_enter,
   caption_before_exit
 };
@@ -32202,12 +32350,14 @@ const datePickerComponentRenderer = wrapComponent(
   }
 );
 const themeVars$g = `'{"gap-Form": "var(--xmlui-gap-Form)", "gap-buttonRow-Form": "var(--xmlui-gap-buttonRow-Form)", "marginTop-buttonRow-Form": "var(--xmlui-marginTop-buttonRow-Form)", "paddingTop-buttonRow-Form": "var(--xmlui-paddingTop-buttonRow-Form)", "backgroundColor-Form": "var(--xmlui-backgroundColor-Form)", "backgroundColor-buttonRow-Form": "var(--xmlui-backgroundColor-buttonRow-Form)"}'`;
-const formWrapper = "_formWrapper_1daax_14";
-const buttonRow = "_buttonRow_1daax_20";
-const stickyButtonRow = "_stickyButtonRow_1daax_28";
+const formWrapper = "_formWrapper_1rntd_14";
+const stickyForm = "_stickyForm_1rntd_20";
+const buttonRow = "_buttonRow_1rntd_23";
+const stickyButtonRow = "_stickyButtonRow_1rntd_31";
 const styles$v = {
   themeVars: themeVars$g,
   formWrapper,
+  stickyForm,
   buttonRow,
   stickyButtonRow
 };
@@ -33276,7 +33426,7 @@ const Form = forwardRef(function({
         ...rest,
         noValidate: true,
         style: style2,
-        className: classnames(styles$v.formWrapper, classes?.[COMPONENT_PART_KEY], className),
+        className: classnames(styles$v.formWrapper, { [styles$v.stickyForm]: stickyButtonRow2 }, classes?.[COMPONENT_PART_KEY], className),
         onSubmit: doSubmit,
         onReset: doReset,
         id,
@@ -37163,6 +37313,233 @@ const formSegmentComponentRenderer = wrapComponent(COMP$A, FormSegmentNative, Fo
     }
   )
 });
+function parseHierarchyLabels(labelText) {
+  const result = [];
+  let currentLabel = "";
+  let escaped = false;
+  for (let i = 0; i < labelText.length; i++) {
+    const char = labelText[i];
+    if (escaped) {
+      currentLabel += char;
+      escaped = false;
+    } else if (char === "\\") {
+      escaped = true;
+    } else if (char === "|") {
+      result.push(currentLabel.trim());
+      currentLabel = "";
+    } else {
+      currentLabel += char;
+    }
+  }
+  if (currentLabel.length > 0) {
+    result.push(currentLabel.trim());
+  }
+  return result;
+}
+function extractAppComponents(children) {
+  const result = { restChildren: [] };
+  if (!children) return result;
+  for (const child of children) {
+    if (child.type === "Theme") {
+      extractFromThemeWrapper(child, result);
+    } else {
+      extractDirectChild(child, result);
+    }
+  }
+  return result;
+}
+function extractFromThemeWrapper(themeNode, result) {
+  const otherChildren = [];
+  themeNode.children?.forEach((child) => {
+    if (child.type === "Fragment" && child.children && child.when === void 0) {
+      child.children.forEach((fragmentChild) => {
+        if (fragmentChild.type === "AppHeader") {
+          result.AppHeader = { ...themeNode, children: [fragmentChild] };
+        } else if (fragmentChild.type === "Footer") {
+          result.Footer = { ...themeNode, children: [fragmentChild] };
+        } else if (fragmentChild.type === "NavPanel") {
+          result.NavPanel = { ...themeNode, children: [fragmentChild] };
+        } else {
+          otherChildren.push(fragmentChild);
+        }
+      });
+    } else if (child.type === "AppHeader") {
+      result.AppHeader = { ...themeNode, children: [child] };
+    } else if (child.type === "Footer") {
+      result.Footer = { ...themeNode, children: [child] };
+    } else if (child.type === "NavPanel") {
+      result.NavPanel = { ...themeNode, children: [child] };
+    } else {
+      otherChildren.push(child);
+    }
+  });
+  if (otherChildren.length > 0) {
+    result.restChildren.push({ ...themeNode, children: otherChildren });
+  }
+}
+function extractDirectChild(child, result) {
+  if (child.type === "Fragment" && child.children && child.when === void 0) {
+    child.children.forEach((fragmentChild) => {
+      extractDirectChild(fragmentChild, result);
+    });
+    return;
+  }
+  switch (child.type) {
+    case "Theme":
+      extractFromThemeWrapper(child, result);
+      break;
+    case "AppHeader":
+      result.AppHeader = child;
+      break;
+    case "Footer":
+      result.Footer = child;
+      break;
+    case "NavPanel":
+      result.NavPanel = child;
+      break;
+    case "Pages":
+      result.Pages = child;
+      result.restChildren.push(child);
+      break;
+    default:
+      result.restChildren.push(child);
+  }
+}
+function findOrCreateNavGroup(navItems, groupLabel) {
+  const existingGroup = navItems.find(
+    (item2) => item2.type === "NavGroup" && item2.props?.label === groupLabel
+  );
+  if (existingGroup) {
+    return existingGroup;
+  }
+  const newGroup = {
+    type: "NavGroup",
+    props: {
+      label: groupLabel
+    },
+    children: []
+  };
+  navItems.push(newGroup);
+  return newGroup;
+}
+function labelExistsInHierarchy(searchLabel, hierarchy) {
+  return hierarchy.some((node) => {
+    if (node.label === searchLabel) {
+      return true;
+    }
+    if (node.children && node.children.length > 0) {
+      return labelExistsInHierarchy(searchLabel, node.children);
+    }
+    return false;
+  });
+}
+function extractNavGroupUrls(node) {
+  const urls = /* @__PURE__ */ new Set();
+  if (!node) return urls;
+  collectNavGroupUrls(node.children, urls);
+  return urls;
+}
+function collectNavGroupUrls(children, urls) {
+  if (!children) return;
+  for (const child of children) {
+    if (child.type === "NavGroup" && typeof child.props?.to === "string" && child.props.to) {
+      urls.add(child.props.to);
+    }
+    if (child.children) {
+      collectNavGroupUrls(child.children, urls);
+    }
+  }
+}
+function processNavItems(items, parentHierarchy, extractValue) {
+  items.forEach((navItem) => {
+    if (navItem.type === "NavLink") {
+      let itemLabel = navItem.props?.label;
+      let itemPath = navItem.props?.to;
+      if (!itemLabel) {
+        if (navItem.children?.length === 1 && navItem.children[0].type === "TextNode") {
+          itemLabel = navItem.children[0].props.value;
+        }
+      }
+      if (itemLabel) {
+        const labelValue = extractValue(itemLabel);
+        parentHierarchy.push({
+          type: "NavLink",
+          label: labelValue,
+          path: itemPath ? extractValue(itemPath) : void 0
+        });
+      }
+    } else if (navItem.type === "NavGroup") {
+      let groupLabel = navItem.props?.label;
+      if (groupLabel) {
+        const labelValue = extractValue(groupLabel);
+        const groupNode = {
+          type: "NavGroup",
+          label: labelValue,
+          children: []
+        };
+        parentHierarchy.push(groupNode);
+        if (navItem.children && navItem.children.length > 0) {
+          processNavItems(navItem.children, groupNode.children, extractValue);
+        }
+      } else if (navItem.children && navItem.children.length > 0) {
+        processNavItems(navItem.children, parentHierarchy, extractValue);
+      }
+    }
+  });
+}
+function extractNavPanelFromPages(Pages2, NavPanel3, extractValue) {
+  if (!Pages2) return null;
+  const extraNavs = [];
+  const navigationHierarchy = [];
+  if (NavPanel3?.children) {
+    processNavItems(NavPanel3.children, navigationHierarchy, extractValue);
+  }
+  Pages2.children?.forEach((page) => {
+    if (page.type === "Page" && page.props.navLabel) {
+      const label2 = extractValue(page.props.navLabel);
+      const url = extractValue(page.props.url);
+      const hierarchyLabels = parseHierarchyLabels(label2);
+      if (hierarchyLabels.length === 0) {
+        return;
+      }
+      if (hierarchyLabels.length === 1) {
+        if (!labelExistsInHierarchy(hierarchyLabels[0], navigationHierarchy)) {
+          extraNavs.push({
+            type: "NavLink",
+            props: {
+              label: hierarchyLabels[0],
+              to: url
+            }
+          });
+        }
+        return;
+      }
+      let currentLevel = extraNavs;
+      for (let i = 0; i < hierarchyLabels.length - 1; i++) {
+        const groupLabel = hierarchyLabels[i];
+        const navGroup = findOrCreateNavGroup(currentLevel, groupLabel);
+        if (!navGroup.children) {
+          navGroup.children = [];
+        }
+        currentLevel = navGroup.children;
+      }
+      const leafLabel = hierarchyLabels[hierarchyLabels.length - 1];
+      const existingNavLink = currentLevel.find(
+        (item2) => item2.type === "NavLink" && item2.props?.label === leafLabel
+      );
+      if (!existingNavLink) {
+        currentLevel.push({
+          type: "NavLink",
+          props: {
+            label: leafLabel,
+            to: url
+          }
+        });
+      }
+    }
+  });
+  return extraNavs;
+}
 const HIDDEN_STYLE$1 = {
   position: "absolute",
   top: "-9999px",
@@ -37172,7 +37549,7 @@ const indexerContextValue = {
   indexing: true
 };
 const EXCLUDED_URL_PATTERNS = [/^\/404$/, /^\/not-found$/];
-function SearchIndexCollector({ Pages: Pages2, renderChild: renderChild2 }) {
+function SearchIndexCollector({ Pages: Pages2, NavPanel: NavPanel3, renderChild: renderChild2 }) {
   const appContext = useAppContext();
   const setIndexing = useSearchContextSetIndexing();
   const loadedExternalIndex = useSearchContextLoadedExternalIndex();
@@ -37186,14 +37563,16 @@ function SearchIndexCollector({ Pages: Pages2, renderChild: renderChild2 }) {
       setIndexing(false);
     };
   }, [setIndexing]);
+  const navGroupUrls = useMemo(() => extractNavGroupUrls(NavPanel3), [NavPanel3]);
   const pagesToIndex = useMemo(() => {
     return Pages2?.children?.filter(
       (child) => child.type === "Page" && // Ensure 'Page' matches your actual component type name
       child.props?.url && // Ensure URL exists
-      !child.props.url.includes("*") && !child.props.url.includes(":") && !EXCLUDED_URL_PATTERNS.some((pattern) => pattern.test(child.props.url)) && child.props?.searchIndexable !== false
-      // explicit opt-out
+      !child.props.url.includes("*") && !child.props.url.includes(":") && !EXCLUDED_URL_PATTERNS.some((pattern) => pattern.test(child.props.url)) && child.props?.searchIndexable !== false && // explicit opt-out
+      !navGroupUrls.has(child.props.url)
+      // exclude NavGroup summary pages
     ) || [];
-  }, [Pages2?.children]);
+  }, [Pages2?.children, navGroupUrls]);
   const [, startTransitionParent] = useTransition();
   const handlePageIndexed = useCallback(() => {
     startTransitionParent(() => {
@@ -37271,216 +37650,6 @@ function PageIndexer({ Page, renderChild: renderChild2, onIndexed }) {
   }
   return /* @__PURE__ */ jsx("div", { ref: contentRef, children: renderChild2(Page.children) });
 }
-function parseHierarchyLabels(labelText) {
-  const result = [];
-  let currentLabel = "";
-  let escaped = false;
-  for (let i = 0; i < labelText.length; i++) {
-    const char = labelText[i];
-    if (escaped) {
-      currentLabel += char;
-      escaped = false;
-    } else if (char === "\\") {
-      escaped = true;
-    } else if (char === "|") {
-      result.push(currentLabel.trim());
-      currentLabel = "";
-    } else {
-      currentLabel += char;
-    }
-  }
-  if (currentLabel.length > 0) {
-    result.push(currentLabel.trim());
-  }
-  return result;
-}
-function extractAppComponents(children) {
-  const result = { restChildren: [] };
-  if (!children) return result;
-  for (const child of children) {
-    if (child.type === "Theme") {
-      extractFromThemeWrapper(child, result);
-    } else {
-      extractDirectChild(child, result);
-    }
-  }
-  return result;
-}
-function extractFromThemeWrapper(themeNode, result) {
-  const otherChildren = [];
-  themeNode.children?.forEach((child) => {
-    if (child.type === "Fragment" && child.children && child.when === void 0) {
-      child.children.forEach((fragmentChild) => {
-        if (fragmentChild.type === "AppHeader") {
-          result.AppHeader = { ...themeNode, children: [fragmentChild] };
-        } else if (fragmentChild.type === "Footer") {
-          result.Footer = { ...themeNode, children: [fragmentChild] };
-        } else if (fragmentChild.type === "NavPanel") {
-          result.NavPanel = { ...themeNode, children: [fragmentChild] };
-        } else {
-          otherChildren.push(fragmentChild);
-        }
-      });
-    } else if (child.type === "AppHeader") {
-      result.AppHeader = { ...themeNode, children: [child] };
-    } else if (child.type === "Footer") {
-      result.Footer = { ...themeNode, children: [child] };
-    } else if (child.type === "NavPanel") {
-      result.NavPanel = { ...themeNode, children: [child] };
-    } else {
-      otherChildren.push(child);
-    }
-  });
-  if (otherChildren.length > 0) {
-    result.restChildren.push({ ...themeNode, children: otherChildren });
-  }
-}
-function extractDirectChild(child, result) {
-  if (child.type === "Fragment" && child.children && child.when === void 0) {
-    child.children.forEach((fragmentChild) => {
-      extractDirectChild(fragmentChild, result);
-    });
-    return;
-  }
-  switch (child.type) {
-    case "Theme":
-      extractFromThemeWrapper(child, result);
-      break;
-    case "AppHeader":
-      result.AppHeader = child;
-      break;
-    case "Footer":
-      result.Footer = child;
-      break;
-    case "NavPanel":
-      result.NavPanel = child;
-      break;
-    case "Pages":
-      result.Pages = child;
-      result.restChildren.push(child);
-      break;
-    default:
-      result.restChildren.push(child);
-  }
-}
-function findOrCreateNavGroup(navItems, groupLabel) {
-  const existingGroup = navItems.find(
-    (item2) => item2.type === "NavGroup" && item2.props?.label === groupLabel
-  );
-  if (existingGroup) {
-    return existingGroup;
-  }
-  const newGroup = {
-    type: "NavGroup",
-    props: {
-      label: groupLabel
-    },
-    children: []
-  };
-  navItems.push(newGroup);
-  return newGroup;
-}
-function labelExistsInHierarchy(searchLabel, hierarchy) {
-  return hierarchy.some((node) => {
-    if (node.label === searchLabel) {
-      return true;
-    }
-    if (node.children && node.children.length > 0) {
-      return labelExistsInHierarchy(searchLabel, node.children);
-    }
-    return false;
-  });
-}
-function processNavItems(items, parentHierarchy, extractValue) {
-  items.forEach((navItem) => {
-    if (navItem.type === "NavLink") {
-      let itemLabel = navItem.props?.label;
-      let itemPath = navItem.props?.to;
-      if (!itemLabel) {
-        if (navItem.children?.length === 1 && navItem.children[0].type === "TextNode") {
-          itemLabel = navItem.children[0].props.value;
-        }
-      }
-      if (itemLabel) {
-        const labelValue = extractValue(itemLabel);
-        parentHierarchy.push({
-          type: "NavLink",
-          label: labelValue,
-          path: itemPath ? extractValue(itemPath) : void 0
-        });
-      }
-    } else if (navItem.type === "NavGroup") {
-      let groupLabel = navItem.props?.label;
-      if (groupLabel) {
-        const labelValue = extractValue(groupLabel);
-        const groupNode = {
-          type: "NavGroup",
-          label: labelValue,
-          children: []
-        };
-        parentHierarchy.push(groupNode);
-        if (navItem.children && navItem.children.length > 0) {
-          processNavItems(navItem.children, groupNode.children, extractValue);
-        }
-      } else if (navItem.children && navItem.children.length > 0) {
-        processNavItems(navItem.children, parentHierarchy, extractValue);
-      }
-    }
-  });
-}
-function extractNavPanelFromPages(Pages2, NavPanel3, extractValue) {
-  if (!Pages2) return null;
-  const extraNavs = [];
-  const navigationHierarchy = [];
-  if (NavPanel3?.children) {
-    processNavItems(NavPanel3.children, navigationHierarchy, extractValue);
-  }
-  Pages2.children?.forEach((page) => {
-    if (page.type === "Page" && page.props.navLabel) {
-      const label2 = extractValue(page.props.navLabel);
-      const url = extractValue(page.props.url);
-      const hierarchyLabels = parseHierarchyLabels(label2);
-      if (hierarchyLabels.length === 0) {
-        return;
-      }
-      if (hierarchyLabels.length === 1) {
-        if (!labelExistsInHierarchy(hierarchyLabels[0], navigationHierarchy)) {
-          extraNavs.push({
-            type: "NavLink",
-            props: {
-              label: hierarchyLabels[0],
-              to: url
-            }
-          });
-        }
-        return;
-      }
-      let currentLevel = extraNavs;
-      for (let i = 0; i < hierarchyLabels.length - 1; i++) {
-        const groupLabel = hierarchyLabels[i];
-        const navGroup = findOrCreateNavGroup(currentLevel, groupLabel);
-        if (!navGroup.children) {
-          navGroup.children = [];
-        }
-        currentLevel = navGroup.children;
-      }
-      const leafLabel = hierarchyLabels[hierarchyLabels.length - 1];
-      const existingNavLink = currentLevel.find(
-        (item2) => item2.type === "NavLink" && item2.props?.label === leafLabel
-      );
-      if (!existingNavLink) {
-        currentLevel.push({
-          type: "NavLink",
-          props: {
-            label: leafLabel,
-            to: url
-          }
-        });
-      }
-    }
-  });
-  return extraNavs;
-}
 const COMP$z = "App";
 const AppMd = createMetadata({
   status: "stable",
@@ -37517,6 +37686,11 @@ const AppMd = createMetadata({
       valueType: "boolean",
       defaultValue: defaultProps$Y.scrollWholePage
     },
+    fitContent: {
+      description: `When \`true\`, the app sizes itself to its content's natural height rather than filling its container's viewport. Intended for embedding an app inside an iframe or as a block within a larger page: the host page becomes the sole scroll container. This overrides \`scrollWholePage\`'s viewport pinning.`,
+      valueType: "boolean",
+      defaultValue: defaultProps$Y.fitContent
+    },
     noScrollbarGutters: {
       description: "This boolean property specifies whether the scrollbar gutters should be hidden.",
       valueType: "boolean",
@@ -37660,11 +37834,13 @@ function AppNode({ node, extractValue, renderChild: renderChild2, classes, looku
   const applyDefaultContentPadding = !Pages2 && !hasExplicitPadding;
   const footerSticky = Footer3?.props?.sticky !== void 0 ? extractValue.asOptionalBoolean(Footer3.props.sticky, true) : true;
   const scrollWholePage2 = extractValue.asOptionalBoolean(node.props.scrollWholePage, true);
+  const fitContent2 = extractValue.asOptionalBoolean(node.props.fitContent, false);
   const contentLayoutContext = !scrollWholePage2 ? { type: "Stack", orientation: "vertical" } : void 0;
   return /* @__PURE__ */ jsxs(
     App,
     {
       scrollWholePage: scrollWholePage2,
+      fitContent: fitContent2,
       noScrollbarGutters: extractValue.asOptionalBoolean(node.props.noScrollbarGutters, false),
       classes,
       layout: extractValue(node.props.layout),
@@ -37696,7 +37872,7 @@ function AppNode({ node, extractValue, renderChild: renderChild2, classes, looku
       registerComponentApi,
       children: [
         renderChild2(restChildren, contentLayoutContext),
-        /* @__PURE__ */ jsx(SearchIndexCollector, { Pages: Pages2, renderChild: renderChild2 })
+        /* @__PURE__ */ jsx(SearchIndexCollector, { Pages: Pages2, NavPanel: NavPanel3, renderChild: renderChild2 })
       ]
     }
   );
@@ -38482,6 +38658,7 @@ const formSectionRenderer = createUserDefinedComponentRenderer(
 const COMP$s = "Switch";
 const SwitchMd = createMetadata({
   status: "stable",
+  compactInlineLabel: true,
   description: "`Switch` enables users to toggle between two states: on and off.",
   parts: {
     label: {
@@ -41793,6 +41970,7 @@ async function callApi({ state, appContext, lookupAction, getCurrentState, apiIn
   uid: actionUid,
   onProgress,
   omitTransactionId,
+  onMockExecute,
   onResponseHeaders,
   //operation
   headers,
@@ -41861,40 +42039,61 @@ async function callApi({ state, appContext, lookupAction, getCurrentState, apiIn
     resolvedBody = rawBody || body2;
   }
   try {
-    const operation = {
-      headers,
-      url,
-      queryParams,
-      rawBody,
-      method,
-      body: body2,
-      payloadType,
-      credentials
-    };
-    const _onProgress = lookupAction(onProgress, uid, {
-      eventName: "progress"
-    });
-    const apiTraceId = getCurrentTrace();
-    traceApiCall(appContext, "api:start", resolvedUrl, resolvedMethod, {
-      transactionId: clientTxId,
-      body: resolvedBody
-    });
-    const result = await new RestApiProxy(appContext, apiInstance).execute({
-      operation,
-      params: stateContext,
-      transactionId: clientTxId,
-      omitTransactionId,
-      resolveBindingExpressions,
-      onProgress: _onProgress,
-      onResponseHeaders
-    });
-    traceApiCall(appContext, "api:complete", resolvedUrl, resolvedMethod, {
-      transactionId: clientTxId,
-      body: resolvedBody,
-      result,
-      status: getLastApiStatus(clientTxId),
-      _traceId: apiTraceId
-    });
+    let result;
+    if (onMockExecute) {
+      const resolvedMockQueryParams = extractParam(stateContext, queryParams, appContext) || {};
+      const resolvedMockBody = rawBody ? extractParam(stateContext, rawBody, appContext) : body2 ? extractParam(stateContext, body2, appContext) : void 0;
+      const resolvedMockHeaders = extractParam(stateContext, headers, appContext) || {};
+      const mockFn = lookupAction(onMockExecute, uid, {
+        eventName: "mockExecute",
+        context: {
+          ...getCurrentState(),
+          $pathParams: {},
+          $queryParams: resolvedMockQueryParams,
+          $requestBody: resolvedMockBody,
+          $cookies: {},
+          $requestHeaders: resolvedMockHeaders,
+          $param: stateContext["$param"],
+          $params: stateContext["$params"]
+        }
+      });
+      result = await mockFn?.();
+    } else {
+      const operation = {
+        headers,
+        url,
+        queryParams,
+        rawBody,
+        method,
+        body: body2,
+        payloadType,
+        credentials
+      };
+      const _onProgress = lookupAction(onProgress, uid, {
+        eventName: "progress"
+      });
+      const apiTraceId = getCurrentTrace();
+      traceApiCall(appContext, "api:start", resolvedUrl, resolvedMethod, {
+        transactionId: clientTxId,
+        body: resolvedBody
+      });
+      result = await new RestApiProxy(appContext, apiInstance).execute({
+        operation,
+        params: stateContext,
+        transactionId: clientTxId,
+        omitTransactionId,
+        resolveBindingExpressions,
+        onProgress: _onProgress,
+        onResponseHeaders
+      });
+      traceApiCall(appContext, "api:complete", resolvedUrl, resolvedMethod, {
+        transactionId: clientTxId,
+        body: resolvedBody,
+        result,
+        status: getLastApiStatus(clientTxId),
+        _traceId: apiTraceId
+      });
+    }
     const onSuccessFn = typeof onSuccess === "function" ? onSuccess : lookupAction(onSuccess, uid, { eventName: "success", context: getCurrentState() });
     const onSuccessResult = await onSuccessFn?.(result, stateContext["$param"]);
     updateQueriesWithResult(
@@ -42845,6 +43044,7 @@ const labelBehavior = {
         isInputTemplateUsed: !!componentNode.props?.inputTemplate,
         direction,
         layoutContext,
+        compactInlineLabel: !!metadata?.compactInlineLabel,
         children: node
       }
     );
@@ -42947,7 +43147,7 @@ function VariantWrapper({
     }
     variantSpec[selector][cssProperty] = cssVarValue;
   }
-  const customVariantClassName = useStyles(variantSpec, { layer: "themes" });
+  const customVariantClassName = useStyles(variantSpec, { layer: "dynamic" });
   const isItemWithLabel = children.type === ItemWithLabel;
   if (isItemWithLabel && children.props?.children) {
     const innerChild = children.props.children;
@@ -43139,7 +43339,9 @@ function FormBindingWrapper({
   const childRegisterComponentApi = children?.props?.registerComponentApi;
   const onStateChange = useCallback(
     ({ value: value2 }, options2) => {
-      childUpdateState?.({ value: value2 }, options2);
+      if (!options2?.formOnly) {
+        childUpdateState?.({ value: value2 }, options2);
+      }
       if (!isInsideForm) return;
       if (!options2?.initial) {
         dispatch(fieldChanged(formItemId, value2));
@@ -43327,6 +43529,7 @@ const formBindingBehavior = {
         labelBreak: labelBreak2,
         enabled: enabled2,
         requireLabelMode,
+        className,
         layoutContext,
         children: node
       },
@@ -44686,15 +44889,15 @@ function DataLoader({
   const loaded = useCallback(
     (data, pageInfo) => {
       if (xsVerbose) {
-        const before = prevDataRef.current;
-        const after = data;
+        const before2 = prevDataRef.current;
+        const after2 = data;
         const dataSourceId = loader.props.id || loader.uid || loader.props.url || "DataSource";
         const path = `DataSource:${dataSourceId}`;
         xsLog("state:changes", {
           uid: dataSourceId,
           eventName: `DataSource:${dataSourceId}`,
           instanceId: instanceIdRef.current,
-          diff: [formatDiff(path, before, after)]
+          diff: [formatDiff(path, before2, after2)]
         });
         prevDataRef.current = data;
         pendingTraceIdRef.current = void 0;
@@ -47453,22 +47656,22 @@ const redirectRenderer = wrapComponent(COMP$m, Navigate, RedirectMd, {
     }
   )
 });
-const themeVars$7 = `'{"padding-trigger-Tabs": "var(--xmlui-padding-trigger-Tabs)", "paddingHorizontal-trigger-Tabs": "var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs))", "paddingVertical-trigger-Tabs": "var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs))", "paddingLeft-trigger-Tabs": "var(--xmlui-paddingLeft-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingRight-trigger-Tabs": "var(--xmlui-paddingRight-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingTop-trigger-Tabs": "var(--xmlui-paddingTop-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingBottom-trigger-Tabs": "var(--xmlui-paddingBottom-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "backgroundColor-Tabs": "var(--xmlui-backgroundColor-Tabs)", "borderColor-Tabs": "var(--xmlui-borderColor-Tabs)", "borderWidth-Tabs": "var(--xmlui-borderWidth-Tabs)", "borderColor-active-Tabs": "var(--xmlui-borderColor-active-Tabs)", "backgroundColor-trigger-Tabs": "var(--xmlui-backgroundColor-trigger-Tabs)", "borderRadius-trigger-Tabs": "var(--xmlui-borderRadius-trigger-Tabs)", "border-trigger-Tabs": "var(--xmlui-border-trigger-Tabs)", "textColor-trigger-Tabs": "var(--xmlui-textColor-trigger-Tabs)", "textColor-trigger-Tabs--active": "var(--xmlui-textColor-trigger-Tabs--active)", "textColor-trigger-Tabs--hover": "var(--xmlui-textColor-trigger-Tabs--hover)", "backgroundColor-trigger-Tabs--hover": "var(--xmlui-backgroundColor-trigger-Tabs--hover)", "backgroundColor-trigger-Tabs--active": "var(--xmlui-backgroundColor-trigger-Tabs--active)", "backgroundColor-list-Tabs": "var(--xmlui-backgroundColor-list-Tabs)", "borderRadius-list-Tabs": "var(--xmlui-borderRadius-list-Tabs)", "border-list-Tabs": "var(--xmlui-border-list-Tabs)", "gap-list-Tabs": "var(--xmlui-gap-list-Tabs)"}'`;
-const tabs = "_tabs_1coc2_14";
-const filler = "_filler_1coc2_26";
-const tabTrigger = "_tabTrigger_1coc2_39";
-const distributeEvenly = "_distributeEvenly_1coc2_46";
-const tabsList = "_tabsList_1coc2_97";
-const alignStart = "_alignStart_1coc2_115";
-const alignEnd = "_alignEnd_1coc2_118";
-const alignCenter = "_alignCenter_1coc2_121";
-const alignStretch = "_alignStretch_1coc2_124";
-const tabsContent = "_tabsContent_1coc2_130";
-const accordionView = "_accordionView_1coc2_134";
-const accordionRoot = "_accordionRoot_1coc2_137";
-const accordionInterleaved = "_accordionInterleaved_1coc2_142";
-const accordionList = "_accordionList_1coc2_147";
-const accordionTrigger = "_accordionTrigger_1coc2_159";
+const themeVars$7 = `'{"padding-trigger-Tabs": "var(--xmlui-padding-trigger-Tabs)", "paddingHorizontal-trigger-Tabs": "var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs))", "paddingVertical-trigger-Tabs": "var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs))", "paddingLeft-trigger-Tabs": "var(--xmlui-paddingLeft-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingRight-trigger-Tabs": "var(--xmlui-paddingRight-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingTop-trigger-Tabs": "var(--xmlui-paddingTop-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingBottom-trigger-Tabs": "var(--xmlui-paddingBottom-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "backgroundColor-Tabs": "var(--xmlui-backgroundColor-Tabs)", "borderColor-Tabs": "var(--xmlui-borderColor-Tabs)", "borderWidth-Tabs": "var(--xmlui-borderWidth-Tabs)", "borderColor-active-Tabs": "var(--xmlui-borderColor-active-Tabs)", "backgroundColor-trigger-Tabs": "var(--xmlui-backgroundColor-trigger-Tabs)", "borderRadius-trigger-Tabs": "var(--xmlui-borderRadius-trigger-Tabs)", "border-trigger-Tabs": "var(--xmlui-border-trigger-Tabs)", "textColor-trigger-Tabs": "var(--xmlui-textColor-trigger-Tabs)", "textColor-trigger-Tabs--active": "var(--xmlui-textColor-trigger-Tabs--active)", "textColor-trigger-Tabs--hover": "var(--xmlui-textColor-trigger-Tabs--hover)", "backgroundColor-trigger-Tabs--hover": "var(--xmlui-backgroundColor-trigger-Tabs--hover)", "backgroundColor-trigger-Tabs--active": "var(--xmlui-backgroundColor-trigger-Tabs--active)", "backgroundColor-list-Tabs": "var(--xmlui-backgroundColor-list-Tabs)", "borderRadius-list-Tabs": "var(--xmlui-borderRadius-list-Tabs)", "border-list-Tabs": "var(--xmlui-border-list-Tabs)", "gap-list-Tabs": "var(--xmlui-gap-list-Tabs)", "paddingTop-TabItem": "var(--xmlui-paddingTop-TabItem)"}'`;
+const tabs = "_tabs_unyqa_14";
+const filler = "_filler_unyqa_26";
+const tabTrigger = "_tabTrigger_unyqa_39";
+const distributeEvenly = "_distributeEvenly_unyqa_46";
+const tabsList = "_tabsList_unyqa_97";
+const alignStart = "_alignStart_unyqa_115";
+const alignEnd = "_alignEnd_unyqa_118";
+const alignCenter = "_alignCenter_unyqa_121";
+const alignStretch = "_alignStretch_unyqa_124";
+const tabsContent = "_tabsContent_unyqa_130";
+const accordionView = "_accordionView_unyqa_135";
+const accordionRoot = "_accordionRoot_unyqa_138";
+const accordionInterleaved = "_accordionInterleaved_unyqa_143";
+const accordionList = "_accordionList_unyqa_148";
+const accordionTrigger = "_accordionTrigger_unyqa_160";
 const styles$h = {
   themeVars: themeVars$7,
   tabs,
@@ -47493,9 +47696,10 @@ const TabContext = createContext({
   unRegister: (innerId) => {
   },
   activeTabId: "",
-  getTabItems: () => []
+  getTabItems: () => [],
+  keepMounted: false
 });
-function useTabContextValue() {
+function useTabContextValue(keepMounted = false) {
   const [tabItems, setTabItems] = useState(EMPTY_ARRAY);
   const tabItemsRef = useRef(EMPTY_ARRAY);
   tabItemsRef.current = tabItems;
@@ -47528,9 +47732,10 @@ function useTabContextValue() {
       unRegister,
       activeTabId,
       setActiveTabId,
-      getTabItems
+      getTabItems,
+      keepMounted
     };
-  }, [register, unRegister, activeTabId, getTabItems]);
+  }, [register, unRegister, activeTabId, getTabItems, keepMounted]);
   return {
     tabItems,
     tabContextValue
@@ -47544,7 +47749,8 @@ const defaultProps$c = {
   orientation: "horizontal",
   tabAlignment: "start",
   accordionView: false,
-  distributeEvenly: false
+  distributeEvenly: false,
+  keepMounted: void 0
 };
 const Tabs = forwardRef(function Tabs2({
   activeTab = defaultProps$c.activeTab,
@@ -47561,9 +47767,13 @@ const Tabs = forwardRef(function Tabs2({
   distributeEvenly: distributeEvenly2 = defaultProps$c.distributeEvenly,
   onDidChange = noop$1,
   onContextMenu,
+  keepMounted = defaultProps$c.keepMounted,
+  gap,
   ...rest
 }, forwardedRef) {
-  const { tabItems, tabContextValue } = useTabContextValue();
+  const isInsideForm = useIsInsideForm();
+  const resolvedKeepMounted = keepMounted ?? isInsideForm;
+  const { tabItems, tabContextValue } = useTabContextValue(resolvedKeepMounted);
   const _id = useId();
   const tabsId = id || _id;
   const validActiveTab = useMemo(() => {
@@ -47630,7 +47840,7 @@ const Tabs = forwardRef(function Tabs2({
         id: tabsId,
         ref: forwardedRef,
         className: classnames(styles$h.tabs, styles$h.accordionView, classes?.[COMPONENT_PART_KEY], className),
-        style: style2,
+        style: { ...style2, ...gap !== void 0 ? { "--paddingTop-TabItem": gap } : {} },
         children: /* @__PURE__ */ jsx(
           Root$2,
           {
@@ -47726,7 +47936,7 @@ const Tabs = forwardRef(function Tabs2({
         }
       },
       orientation,
-      style: style2,
+      style: { ...style2, ...gap !== void 0 ? { "--paddingTop-TabItem": gap } : {} },
       children: [
         /* @__PURE__ */ jsxs(
           List,
@@ -47798,6 +48008,14 @@ const TabsMd = createMetadata({
     },
     headerTemplate: {
       ...dComponent(`This property declares the template for the clickable tab area.`)
+    },
+    keepMounted: {
+      description: `When enabled, all tab panels remain mounted in the DOM even when not active — inactive panels are hidden with \`display: none\`. This ensures that form fields inside non-visible tabs stay registered with an enclosing Form. Defaults to \`true\` when the Tabs component is inside a Form, \`false\` otherwise.`,
+      valueType: "boolean"
+    },
+    gap: {
+      description: `Sets the gap (padding) between the tab header strip and the active tab panel content. Accepts any valid CSS length (e.g. \`"8px"\`, \`"1rem"\`). When set, this overrides the \`paddingTop-TabItem\` theme variable.`,
+      valueType: "string"
     }
   },
   events: {
@@ -47836,7 +48054,8 @@ const TabsMd = createMetadata({
     [`textColor-trigger-${COMP$l}`]: "$color-primary-600",
     [`textColor-trigger-${COMP$l}--active`]: "$color-primary-900",
     [`textColor-trigger-${COMP$l}--hover`]: "$color-primary-900",
-    [`gap-list-${COMP$l}`]: "0px"
+    [`gap-list-${COMP$l}`]: "0px",
+    [`paddingTop-TabItem`]: "$gap-normal"
   }
 });
 const ThemedTabs = React__default.forwardRef(
@@ -47858,7 +48077,7 @@ const tabsComponentRenderer = wrapComponent(
   TabsMd,
   {
     exposeRegisterApi: true,
-    exclude: ["activeTab", "orientation", "tabAlignment", "accordionView", "headerTemplate"],
+    exclude: ["activeTab", "orientation", "tabAlignment", "accordionView", "headerTemplate", "keepMounted", "gap"],
     events: [],
     customRender(_props, { extractValue, node, renderChild: renderChild2, classes, registerComponentApi, lookupEventHandler }) {
       return /* @__PURE__ */ jsx(
@@ -47880,6 +48099,8 @@ const tabsComponentRenderer = wrapComponent(
           orientation: extractValue(node.props?.orientation),
           tabAlignment: extractValue(node.props?.tabAlignment),
           accordionView: extractValue(node.props?.accordionView),
+          keepMounted: extractValue.asOptionalBoolean(node.props?.keepMounted),
+          gap: extractValue.asOptionalString(node.props?.gap),
           onDidChange: lookupEventHandler("didChange"),
           onContextMenu: lookupEventHandler("contextMenu"),
           registerComponentApi,
@@ -48649,7 +48870,7 @@ const AccordionMd = createMetadata({
 const accordionComponentRenderer = wrapComponent(COMP$h, AccordionComponent, AccordionMd);
 const TabItemComponent = forwardRef(function TabItemComponent2({ children, label: label2, headerRenderer, style: style2, id, className, classes, activated, ...rest }, forwardedRef) {
   const innerId = useId();
-  const { register, unRegister, activeTabId, getTabItems } = useTabContext();
+  const { register, unRegister, activeTabId, getTabItems, keepMounted } = useTabContext();
   useEffect(() => {
     register({
       label: label2,
@@ -48669,7 +48890,8 @@ const TabItemComponent = forwardRef(function TabItemComponent2({ children, label
       activated();
     }
   }, [activeTabId, innerId, activated]);
-  if (activeTabId !== innerId) return null;
+  const isActive = activeTabId === innerId;
+  if (!isActive && !keepMounted) return null;
   const tabItems = getTabItems();
   const tabIndex = tabItems?.findIndex((item2) => item2.innerId === innerId) ?? 0;
   const contentOrder = tabIndex * 2 + 1;
@@ -48679,9 +48901,14 @@ const TabItemComponent = forwardRef(function TabItemComponent2({ children, label
       ...rest,
       key: innerId,
       value: innerId,
+      forceMount: keepMounted ? true : void 0,
       className: classnames(styles$h.tabsContent, classes?.[COMPONENT_PART_KEY], className),
       ref: forwardedRef,
-      style: { ...style2, order: contentOrder }
+      style: {
+        ...style2,
+        order: contentOrder,
+        ...keepMounted && !isActive ? { display: "none" } : {}
+      }
     },
     children
   );
@@ -49508,7 +49735,7 @@ function evaluateCondition(conditionExpr, statusData, progress, result, executio
     return false;
   }
 }
-function APICallNative({ registerComponentApi, node, uid, updateState, onSuccess, onStatusUpdate, onTimeout }) {
+function APICallNative({ registerComponentApi, node, uid, updateState, onSuccess, onStatusUpdate, onTimeout, hasMockExecute }) {
   const deferredStateRef = useRef({
     isPolling: false,
     statusData: null,
@@ -49774,6 +50001,7 @@ function APICallNative({ registerComponentApi, node, uid, updateState, onSuccess
             onProgress: node.events?.progress,
             onBeforeRequest: node.events?.beforeRequest,
             onSuccess: onSuccess ?? node.events?.success,
+            onMockExecute: node.events?.mockExecute,
             onResponseHeaders: (h) => {
               capturedResponseHeaders = h;
               lastResponseHeadersRef.current = h;
@@ -50143,6 +50371,11 @@ const APICallMd = createMetadata({
       signature: "() => void",
       parameters: {}
     },
+    mockExecute: {
+      description: "When defined, this event handler replaces the actual API request. The handler receives the resolved request properties as context variables: `$pathParams`, `$queryParams`, `$requestBody`, `$cookies`, `$requestHeaders`. When triggered via the `execute()` method, `$param` and `$params` are also available. The return value of the handler becomes the result of the API call.",
+      signature: "() => any",
+      parameters: {}
+    },
     progress: dInternal()
   },
   contextVars: {
@@ -50152,6 +50385,21 @@ const APICallMd = createMetadata({
     $params: {
       description: "Array of all parameters passed to `execute()` method (access with `$params[0]`, `$params[1]`, etc.)"
     },
+    $pathParams: {
+      description: "Path parameters extracted from the request URL (available in `mockExecute`)"
+    },
+    $queryParams: {
+      description: "Resolved query parameters (available in `mockExecute`)"
+    },
+    $requestBody: {
+      description: "Resolved request body (available in `mockExecute`)"
+    },
+    $cookies: {
+      description: "Request cookies (available in `mockExecute`)"
+    },
+    $requestHeaders: {
+      description: "Resolved request headers (available in `mockExecute`)"
+    },
     $result: {
       description: "Response data (available in `completedNotificationMessage`)"
     },
@@ -50237,7 +50485,8 @@ const apiCallRenderer = createComponentRenderer(
         updateState,
         onSuccess: lookupEventHandler("success"),
         onStatusUpdate: lookupEventHandler("statusUpdate"),
-        onTimeout: lookupEventHandler("timeout")
+        onTimeout: lookupEventHandler("timeout"),
+        hasMockExecute: !!node.events?.mockExecute
       }
     );
   }
@@ -54244,9 +54493,10 @@ const Dialog = ({
   children,
   isOpen,
   onClose,
-  buttons
+  buttons,
+  width
 }) => {
-  return /* @__PURE__ */ jsxs(ThemedModalDialog, { onClose, isInitiallyOpen: isOpen, title: title2, children: [
+  return /* @__PURE__ */ jsxs(ThemedModalDialog, { onClose, isInitiallyOpen: isOpen, title: title2, style: width ? { width } : void 0, children: [
     /* @__PURE__ */ jsxs("div", { className: styles$4.dialogContent, children: [
       /* @__PURE__ */ jsx("div", { id: "dialogDesc", children: /* @__PURE__ */ jsx(ThemedText, { children: description }) }),
       children
@@ -54255,7 +54505,7 @@ const Dialog = ({
   ] });
 };
 const ConfirmationModalContext = React__default.createContext({
-  confirm: (_title, _message, _actionLabel, _cancelLabel) => Promise.resolve(false)
+  confirm: () => Promise.resolve(false)
 });
 const useConfirm = () => useContext(ConfirmationModalContext);
 function isTracingActive() {
@@ -54267,6 +54517,7 @@ const ConfirmationModalContextProvider = ({ children }) => {
   const [message, setMessage] = useState();
   const [cancelLabel, setCancelLabel] = useState("Cancel");
   const [buttons, setButtons] = useState([]);
+  const [width, setWidth] = useState();
   const resolver = useRef(null);
   const buttonsRef = useRef(null);
   useEffect(() => {
@@ -54280,7 +54531,25 @@ const ConfirmationModalContextProvider = ({ children }) => {
     }
   }, [showConfirmationModal]);
   const handleShow = useCallback(
-    (title22 = "Confirm Operation", message2 = "Are you sure you want to perform this operation?", actionLabel = "Yes", cancelLabel2 = "Cancel") => {
+    (titleOrOptions = "Confirm Operation", messageArg = "Are you sure you want to perform this operation?", actionLabelArg = "Yes", cancelLabelArg = "Cancel", widthArg) => {
+      let title22;
+      let message2;
+      let actionLabel;
+      let cancelLabel2;
+      let resolvedWidth;
+      if (typeof titleOrOptions === "object" && titleOrOptions !== null) {
+        title22 = titleOrOptions.title ?? "Confirm Operation";
+        message2 = titleOrOptions.message ?? "Are you sure you want to perform this operation?";
+        actionLabel = titleOrOptions.actionLabel ?? "Yes";
+        cancelLabel2 = titleOrOptions.cancelLabel ?? "Cancel";
+        resolvedWidth = titleOrOptions.width;
+      } else {
+        title22 = titleOrOptions;
+        message2 = messageArg;
+        actionLabel = actionLabelArg;
+        cancelLabel2 = cancelLabelArg;
+        resolvedWidth = widthArg;
+      }
       if (isTracingActive()) {
         const w = window;
         w._xsPendingConfirmTrace = w._xsCurrentTrace || w._xsLastInteraction?.id;
@@ -54302,6 +54571,7 @@ const ConfirmationModalContextProvider = ({ children }) => {
       setButtons([{ label: actionLabel, value: true }]);
       setMessage(message2);
       setCancelLabel(cancelLabel2);
+      setWidth(resolvedWidth);
       setShowConfirmationModal(true);
       return new Promise(function(resolve) {
         resolver.current = resolve;
@@ -54365,6 +54635,7 @@ const ConfirmationModalContextProvider = ({ children }) => {
         description: message,
         isOpen: true,
         onClose: handleCancel,
+        width,
         buttons: /* @__PURE__ */ jsxs(
           ThemedStack,
           {
@@ -55237,7 +55508,7 @@ function IconProvider({ children, icons }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.12.16";
+const version = "0.12.18";
 function createPubSubService() {
   const subscriptions = /* @__PURE__ */ new Map();
   const publishTopic = (topic, data) => {
@@ -59105,6 +59376,7 @@ const StateContainer = memo(
       ...node.vars,
       ...parsedScriptPart?.vars
     });
+    const parentFnDeps = useFnDeps();
     const functionDeps = useMemo(() => {
       const fnDeps = {};
       Object.entries(varDefinitions).forEach(([key, value]) => {
@@ -59114,8 +59386,11 @@ const StateContainer = memo(
           fnDeps[key] = collectVariableDependencies(value, referenceTrackedApi);
         }
       });
-      return collectFnVarDeps(fnDeps);
-    }, [referenceTrackedApi, varDefinitions]);
+      const localFnDeps = collectFnVarDeps(fnDeps);
+      if (Object.keys(parentFnDeps).length === 0) return localFnDeps;
+      if (Object.keys(localFnDeps).length === 0) return parentFnDeps;
+      return { ...parentFnDeps, ...localFnDeps };
+    }, [parentFnDeps, referenceTrackedApi, varDefinitions]);
     const preResolvedLocalVars = useVars(
       varDefinitions,
       functionDeps,
@@ -59324,6 +59599,8 @@ const getWrappedWithContainer = (node) => {
     return node;
   }
   const wrappedNode = { ...node, props: { ...node.props } };
+  if (node.vars) wrappedNode._savedVarDefs = node.vars;
+  if (node.functions) wrappedNode._savedFunctionDefs = node.functions;
   delete wrappedNode.loaders;
   delete wrappedNode.vars;
   delete wrappedNode.functions;
@@ -59540,7 +59817,7 @@ function ApiBoundComponent({
         }
         return JSON.stringify(eventData);
       };
-      const { success, error: error2, progress, beforeRequest } = actionComponent.events || {};
+      const { success, error: error2, progress, beforeRequest, mockExecute } = actionComponent.events || {};
       switch (type) {
         case "FileUpload": {
           const {
@@ -59633,6 +59910,7 @@ function ApiBoundComponent({
               onProgress: ${prepareEvent(progress)},
               onBeforeRequest: ${prepareEvent(beforeRequest)},
               onSuccess: ${prepareEvent(success)},
+              onMockExecute: ${prepareEvent(mockExecute)},
               updates: ${JSON.stringify(updates)},
               optimisticValue: ${JSON.stringify(optimisticValue)},
               payloadType: ${JSON.stringify(payloadType)},
@@ -60073,7 +60351,8 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
     return { "&": stableLayoutCss, ...stableResponsiveStyleObject };
   }, [stableLayoutCss, stableResponsiveStyleObject]);
   const layoutClassName = useStyles(combinedStyleObject);
-  const className = [themeClassName, layoutClassName].filter(Boolean).join(" ");
+  const extraClassName = layoutContextRef?.current?.extraClassName;
+  const className = [themeClassName, layoutClassName, extraClassName].filter(Boolean).join(" ");
   const memoedClasses = useMemo(() => ({ [COMPONENT_PART_KEY]: className }), [className]);
   const { inspectId, refreshInspection } = useInspector(safeNode, uid);
   const currentWhenValue = resolveResponsiveWhen(
@@ -61039,30 +61318,30 @@ function AppContent({
   const update = useCallback(
     (bucket, patch) => {
       setAppState((prev) => {
-        const before = prev[bucket];
-        const after = {
+        const before2 = prev[bucket];
+        const after2 = {
           ...prev[bucket] || {},
           ...patch
         };
         const next = {
           ...prev,
-          [bucket]: after
+          [bucket]: after2
         };
         if (xsVerbose && typeof window !== "undefined") {
           const w = window;
           const lastInteraction = w._xsLastInteraction;
           const traceId = w._xsCurrentTrace || (!w._xsStartupComplete ? w._xsStartupTrace : void 0) || (lastInteraction && Date.now() - lastInteraction.ts < 2e3 ? lastInteraction.id : void 0);
           const perfTs = typeof performance !== "undefined" ? performance.now() : void 0;
-          const beforeJson = simpleStringify(before);
-          const afterJson = simpleStringify(after);
+          const beforeJson = simpleStringify(before2);
+          const afterJson = simpleStringify(after2);
           const diffPretty = `path: AppState:${bucket}
 ${prefixLines(beforeJson, "- ")}
 ${prefixLines(afterJson, "+ ")}`;
           const diff = {
             path: `AppState:${bucket}`,
             type: "update",
-            before,
-            after,
+            before: before2,
+            after: after2,
             beforeJson,
             afterJson,
             diffText: `path: AppState:${bucket}