xmlui 0.9.15 → 0.9.17

package/dist/xmlui-standalone.umd.js

@@ -985,7 +985,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._wrapper_qcc08_13 {
+._wrapper_1c9ty_13 {
   --footer-height: 0px;
   --header-height: 0px;
   width: 100%;
@@ -995,138 +995,191 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   flex-direction: column;
   isolation: isolate;
 }
-._wrapper_qcc08_13._vertical_qcc08_23 {
+._wrapper_1c9ty_13._vertical_1c9ty_23 {
   flex-direction: row;
   overflow: initial;
 }
-._wrapper_qcc08_13._vertical_qcc08_23 ._contentWrapper_qcc08_27 {
+._wrapper_1c9ty_13._vertical_1c9ty_23 ._contentWrapper_1c9ty_27 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   position: relative;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_qcc08_13._vertical_qcc08_23 ._navPanelWrapper_qcc08_33 {
+._wrapper_1c9ty_13._vertical_1c9ty_23 ._navPanelWrapper_1c9ty_33 {
   width: var(--xmlui-width-navPanel-App);
   flex-shrink: 0;
 }
-._wrapper_qcc08_13._vertical_qcc08_23 ._PagesWrapper_qcc08_37 {
+._wrapper_1c9ty_13._vertical_1c9ty_23 ._PagesWrapper_1c9ty_37 {
   min-height: initial;
   flex: 1;
 }
-._wrapper_qcc08_13._vertical_qcc08_23 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._vertical_1c9ty_23 ._footerWrapper_1c9ty_41 {
   position: static;
 }
-._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._contentWrapper_qcc08_27 {
+._wrapper_1c9ty_13._vertical_1c9ty_23._sticky_1c9ty_44 ._contentWrapper_1c9ty_27 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._vertical_1c9ty_23._sticky_1c9ty_44 ._footerWrapper_1c9ty_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_qcc08_13._horizontal_qcc08_51 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_qcc08_13._horizontal_qcc08_51 ._PagesWrapper_qcc08_37 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51 ._PagesWrapper_1c9ty_37 {
   min-height: initial;
 }
-._wrapper_qcc08_13._horizontal_qcc08_51 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51 ._footerWrapper_1c9ty_41 {
   position: static;
 }
-._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51._sticky_1c9ty_44 {
   scroll-padding-top: var(--header-height);
   min-height: 100%;
 }
-._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51._sticky_1c9ty_44 ._footerWrapper_1c9ty_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_qcc08_13._horizontal_qcc08_51 ._navPanelWrapper_qcc08_33 {
+._wrapper_1c9ty_13._horizontal_1c9ty_51 ._navPanelWrapper_1c9ty_33 {
   border-bottom: var(--xmlui-borderBottom-AppHeader);
   justify-content: end;
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 {
   min-height: 100%;
   height: 100%;
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._navPanelWrapper_qcc08_33 {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._navPanelWrapper_1c9ty_33 {
   width: var(--xmlui-width-navPanel-App);
   position: sticky;
   height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
   top: var(--header-height);
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapper_qcc08_37 {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._PagesWrapper_1c9ty_37 {
   overflow: initial;
   min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
   height: 100%;
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._PagesWrapperInner_1c9ty_90 {
   height: 100%;
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 > .xmlui-page-root {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._PagesWrapperInner_1c9ty_90 > .xmlui-page-root {
   height: 100%;
 }
-._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._footerWrapper_1c9ty_41 {
   position: sticky;
   left: 0;
   right: 0;
   bottom: 0;
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102 {
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 {
+  min-height: 100%;
+  height: 100%;
+  overflow: auto;
+  scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._header_1c9ty_108 {
+  max-width: var(--xmlui-maxWidth-App);
+  margin: auto;
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._navPanelWrapper_1c9ty_33 {
+  width: var(--xmlui-width-navPanel-App);
+  position: sticky;
+  height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
+  top: var(--header-height);
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._PagesWrapper_1c9ty_37 {
+  overflow: initial;
+  min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
+  height: 100%;
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._PagesWrapperInner_1c9ty_90 {
+  height: 100%;
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._PagesWrapperInner_1c9ty_90 > .xmlui-page-root {
+  height: 100%;
+}
+._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._footerWrapper_1c9ty_41 {
+  position: sticky;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 {
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._headerWrapper_1c9ty_138 {
+  margin-inline: calc(-1 * var(--scrollbar-width));
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._headerWrapper_1c9ty_138 > div {
+  padding-inline: var(--scrollbar-width);
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._footerWrapper_1c9ty_41 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 > div {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._footerWrapper_1c9ty_41 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalFullHeader_1c9ty_73 {
+  scroll-padding-top: var(--header-height);
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalFullHeader_1c9ty_73 ._content_1c9ty_27 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 > div {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalFullHeader_1c9ty_73 ._contentWrapper_1c9ty_27 {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._content_qcc08_27 {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._content_1c9ty_27 {
+  width: var(--xmlui-maxWidth-App);
   margin-inline: calc(-1 * var(--scrollbar-width));
+  margin: auto;
 }
-._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._contentWrapper_qcc08_27 {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._contentWrapper_1c9ty_27 {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) {
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._headerWrapper_1c9ty_138 > div {
+  width: var(--xmlui-maxWidth-App);
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._footerWrapper_1c9ty_41 {
+  margin-inline: calc(-1 * var(--scrollbar-width));
+}
+._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._footerWrapper_1c9ty_41 > div {
+  padding-inline: var(--scrollbar-width);
+}
+._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) {
   overflow: hidden;
 }
-._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._content_qcc08_27 {
+._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._content_1c9ty_27 {
   min-height: 0;
   height: 100%;
 }
-._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._contentWrapper_qcc08_27 {
+._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._contentWrapper_1c9ty_27 {
   overflow: initial;
 }
-._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapper_qcc08_37 {
+._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._PagesWrapper_1c9ty_37 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   min-height: 0;
   height: 100%;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapperInner_qcc08_90 {
+._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._PagesWrapperInner_1c9ty_90 {
   min-height: 100%;
   height: 0;
 }
-._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 {
+._wrapper_1c9ty_13._noScrollbarGutters_1c9ty_200 {
   scrollbar-gutter: auto;
 }
-._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 ._PagesWrapper_qcc08_37 {
+._wrapper_1c9ty_13._noScrollbarGutters_1c9ty_200 ._PagesWrapper_1c9ty_37 {
   scrollbar-gutter: auto;
 }
 
-._headerWrapper_qcc08_105 {
+._headerWrapper_1c9ty_138 {
   z-index: 1;
   min-height: 0;
   flex-shrink: 0;
@@ -1135,17 +1188,17 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   box-shadow: var(--xmlui-boxShadow-header-App);
   background-color: var(--xmlui-backgroundColor-AppHeader);
 }
-._headerWrapper_qcc08_105._sticky_qcc08_44 {
+._headerWrapper_1c9ty_138._sticky_1c9ty_44 {
   position: sticky;
 }
 
-._content_qcc08_27 {
+._content_1c9ty_27 {
   display: flex;
   flex-direction: row;
   isolation: isolate;
 }
 
-._contentWrapper_qcc08_27 {
+._contentWrapper_1c9ty_27 {
   position: relative;
   min-width: 0;
   flex: 1;
@@ -1156,21 +1209,21 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   border-left: var(--xmlui-borderLeft-content-App);
 }
 
-._navPanelWrapper_qcc08_33 {
+._navPanelWrapper_1c9ty_33 {
   display: flex;
   position: sticky;
   top: 0;
 }
-._navPanelWrapper_qcc08_33:empty {
+._navPanelWrapper_1c9ty_33:empty {
   display: none;
 }
 
-._PagesWrapper_qcc08_37 {
+._PagesWrapper_1c9ty_37 {
   flex: 1;
   isolation: isolate;
 }
 
-._PagesWrapperInner_qcc08_90 {
+._PagesWrapperInner_1c9ty_90 {
   --page-padding-left: var(--xmlui-space-4);
   --page-padding-right: var(--xmlui-space-4);
   --page-padding-top: var(--xmlui-space-5);
@@ -1188,7 +1241,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   display: flex;
   flex-direction: column;
 }
-._PagesWrapperInner_qcc08_90 > .xmlui-page-root {
+._PagesWrapperInner_1c9ty_90 > .xmlui-page-root {
   padding-top: var(--page-padding-top-override, var(--page-padding-top));
   padding-bottom: var(--page-padding-bottom-override, var(--page-padding-bottom));
   padding-right: var(--page-padding-right-override, var(--page-padding-right));
@@ -1200,7 +1253,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   margin-right: calc(-1 * var(--page-padding-right));
 }
 
-._footerWrapper_qcc08_41 {
+._footerWrapper_1c9ty_41 {
   flex-shrink: 0;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
@@ -15931,7 +15984,7 @@ li .htmlOl {
       });
     }
   }
-  var define_process_env_default$a = { NODE_ENV: "production", VITE_MOCK_ENABLED: true, VITE_MOCK_WORKER_LOCATION: "mockApi.js", VITE_USED_COMPONENTS_Pdf: "false", VITE_USED_COMPONENTS_Chart: "false", VITE_USER_COMPONENTS_XmluiCodeHightlighter: "false", VITE_USED_COMPONENTS_Tree: "false", VITE_XMLUI_VERSION: "0.9.15 (built 4/23/2025)" };
+  var define_process_env_default$a = { NODE_ENV: "production", VITE_MOCK_ENABLED: true, VITE_MOCK_WORKER_LOCATION: "mockApi.js", VITE_USED_COMPONENTS_Pdf: "false", VITE_USED_COMPONENTS_Chart: "false", VITE_USER_COMPONENTS_XmluiCodeHightlighter: "false", VITE_USED_COMPONENTS_Tree: "false", VITE_XMLUI_VERSION: "0.9.17 (built 4/24/2025)" };
   class Mutation extends Removable {
     constructor(config) {
       super();
@@ -32293,21 +32346,23 @@ ${error2.errorObject}`;
     }, r2;
   }(reactExports.Component);
   W$4.propTypes = { base: PropTypes.object, bodyAttributes: PropTypes.object, children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]), defaultTitle: PropTypes.string, defer: PropTypes.bool, encodeSpecialCharacters: PropTypes.bool, htmlAttributes: PropTypes.object, link: PropTypes.arrayOf(PropTypes.object), meta: PropTypes.arrayOf(PropTypes.object), noscript: PropTypes.arrayOf(PropTypes.object), onChangeClientState: PropTypes.func, script: PropTypes.arrayOf(PropTypes.object), style: PropTypes.arrayOf(PropTypes.object), title: PropTypes.string, titleAttributes: PropTypes.object, titleTemplate: PropTypes.string, prioritizeSeoTags: PropTypes.bool, helmetData: PropTypes.object }, W$4.defaultProps = { defer: true, encodeSpecialCharacters: true, prioritizeSeoTags: false }, W$4.displayName = "Helmet";
-  const themeVars$J = `'{"width-navPanel-App": "var(--xmlui-width-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)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
-  const wrapper$e = "_wrapper_qcc08_13";
-  const vertical$4 = "_vertical_qcc08_23";
-  const contentWrapper$1 = "_contentWrapper_qcc08_27";
-  const navPanelWrapper = "_navPanelWrapper_qcc08_33";
-  const PagesWrapper = "_PagesWrapper_qcc08_37";
-  const footerWrapper = "_footerWrapper_qcc08_41";
-  const sticky = "_sticky_qcc08_44";
-  const horizontal$5 = "_horizontal_qcc08_51";
-  const verticalFullHeader = "_verticalFullHeader_qcc08_73";
-  const PagesWrapperInner = "_PagesWrapperInner_qcc08_90";
-  const scrollWholePage = "_scrollWholePage_qcc08_102";
-  const headerWrapper$1 = "_headerWrapper_qcc08_105";
-  const content$4 = "_content_qcc08_27";
-  const noScrollbarGutters = "_noScrollbarGutters_qcc08_147";
+  const themeVars$J = `'{"width-navPanel-App": "var(--xmlui-width-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)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "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 wrapper$e = "_wrapper_1c9ty_13";
+  const vertical$4 = "_vertical_1c9ty_23";
+  const contentWrapper$1 = "_contentWrapper_1c9ty_27";
+  const navPanelWrapper = "_navPanelWrapper_1c9ty_33";
+  const PagesWrapper = "_PagesWrapper_1c9ty_37";
+  const footerWrapper = "_footerWrapper_1c9ty_41";
+  const sticky = "_sticky_1c9ty_44";
+  const horizontal$5 = "_horizontal_1c9ty_51";
+  const verticalFullHeader = "_verticalFullHeader_1c9ty_73";
+  const PagesWrapperInner = "_PagesWrapperInner_1c9ty_90";
+  const verticalConstrained = "_verticalConstrained_1c9ty_102";
+  const header$2 = "_header_1c9ty_108";
+  const scrollWholePage = "_scrollWholePage_1c9ty_135";
+  const headerWrapper$1 = "_headerWrapper_1c9ty_138";
+  const content$4 = "_content_1c9ty_27";
+  const noScrollbarGutters = "_noScrollbarGutters_1c9ty_200";
   const styles$Y = {
     themeVars: themeVars$J,
     wrapper: wrapper$e,
@@ -32320,6 +32375,8 @@ ${error2.errorObject}`;
     horizontal: horizontal$5,
     verticalFullHeader,
     PagesWrapperInner,
+    verticalConstrained,
+    header: header$2,
     scrollWholePage,
     headerWrapper: headerWrapper$1,
     content: content$4,
@@ -35488,6 +35545,31 @@ ${error2.errorObject}`;
           }
         );
         break;
+      case "vertical-constrained-width":
+        content2 = /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: classNames(wrapperBaseClasses, styles$Y.verticalConstrained),
+            style: styleWithHelpers,
+            ref: scrollPageContainerRef,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "header",
+                {
+                  className: classNames(styles$Y.headerWrapper, styles$Y.sticky),
+                  ref: headerRefCallback,
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$Y.header, style: { paddingInline: 0 }, children: header2 })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$Y.content, children: [
+                navPanelVisible && /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: styles$Y.navPanelWrapper, children: navPanel }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("main", { className: styles$Y.contentWrapper, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$Y.PagesWrapper, ref: noScrollPageContainerRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollContext.Provider, { value: scrollContainerRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$Y.PagesWrapperInner, style: pagesWrapperInnerStyle, children }) }) }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$Y.footerWrapper, ref: footerRefCallback, children: footer2 })
+            ]
+          }
+        );
+        break;
       case "condensed":
       case "condensed-sticky":
         content2 = /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -35578,6 +35660,7 @@ ${error2.errorObject}`;
       case "vertical":
       case "vertical-sticky":
       case "vertical-full-header":
+      case "vertical-constrained-width":
         return "vertical";
       default:
         return "horizontal";
@@ -44512,6 +44595,12 @@ ${error2.errorObject}`;
     delete resultProps.radiusTopRight;
     delete resultProps.radiusBottomLeft;
     delete resultProps.radiusBottomRight;
+    delete resultProps.paddingHorizontal;
+    delete resultProps.paddingVertical;
+    delete resultProps.marginHorizontal;
+    delete resultProps.marginVertical;
+    delete resultProps.borderHorizontal;
+    delete resultProps.borderVertical;
     return result;
   }
   function removeStylesFromProps(nodeProps, layoutCss = {}) {
@@ -51856,7 +51945,7 @@ ${error2.errorObject}`;
       result.cssProps.flexShrink = 0;
     }
     collectCss("width");
-    const horizontalStarSize = getHorizontalStartSize(result.cssProps.width, layoutContext);
+    const horizontalStarSize = getHorizontalStarSize(result.cssProps.width, layoutContext);
     if (horizontalStarSize !== null) {
       result.cssProps.flex = horizontalStarSize;
       result.cssProps.flexShrink = 1;
@@ -51864,7 +51953,7 @@ ${error2.errorObject}`;
     collectCss("minWidth");
     collectCss("maxWidth");
     collectCss("height");
-    const verticalStarSize = getVerticalStartSize(result.cssProps.height, layoutContext);
+    const verticalStarSize = getVerticalStarSize(result.cssProps.height, layoutContext);
     if (verticalStarSize !== null) {
       result.cssProps.flex = verticalStarSize;
       result.cssProps.flexShrink = 1;
@@ -52048,12 +52137,12 @@ ${error2.errorObject}`;
         result.cssProps[propCssName || prop] = value;
       }
     }
-    function getHorizontalStartSize(size2, layoutContext2) {
+    function getHorizontalStarSize(size2, layoutContext2) {
       if (!size2) return null;
       const orientation = getOrientation(layoutContext2);
       return orientation === "horizontal" && starSizeRegex.test(size2.toString()) ? getStarSizeNumber(size2.toString()) : null;
     }
-    function getVerticalStartSize(size2, layoutContext2) {
+    function getVerticalStarSize(size2, layoutContext2) {
       if (!size2) return null;
       const orientation = getOrientation(layoutContext2);
       return orientation === "vertical" && starSizeRegex.test(size2.toString()) ? getStarSizeNumber(size2.toString()) : null;
@@ -66848,7 +66937,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         },
         "data-state": selected2 ? "checked" : void 0,
         keywords,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$w.multiComboboxOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$w.multiComboboxOptionContent, children: optionRenderer ? optionRenderer({ label: label2, value, enabled: enabled2, keywords }, selectedValue, false) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           optionLabelRenderer ? optionLabelRenderer({ label: label2, value }) : label2,
           selected2 && /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1, { name: "checkmark" })
         ] }) })
@@ -66876,7 +66965,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     (option, ref) => {
       const { value, label: label2, enabled: enabled2 = true } = option;
       const { onOptionRemove, onOptionAdd } = useOption();
-      const { optionLabelRenderer, optionRenderer } = useSelect();
+      const { optionLabelRenderer, optionRenderer, value: selectedValue, multiSelect } = useSelect();
       reactExports.useLayoutEffect(() => {
         onOptionAdd(option);
         return () => onOptionRemove(option);
@@ -66885,7 +66974,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         label: label2,
         value,
         enabled: enabled2
-      }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      }, selectedValue, false) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(ItemText, { className: styles$w.selectItemContent, children: optionLabelRenderer ? optionLabelRenderer({ value, label: label2 }) : label2 }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$w.selectItemIndicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemIndicator, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1, { name: "checkmark" }) }) })
       ] }) }) });
@@ -126033,12 +126122,16 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
               }
             );
           } : void 0,
-          optionRenderer: node2.props.optionTemplate ? (item2) => {
+          optionRenderer: node2.props.optionTemplate ? (item2, val, inTrigger) => {
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
               MemoizedItem,
               {
                 node: node2.props.optionTemplate,
                 item: item2,
+                contextVars: {
+                  $selectedValue: val,
+                  $inTrigger: inTrigger
+                },
                 renderChild: (...args) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItemText, { children: renderChild2(...args) })
               }
             );
@@ -132787,7 +132880,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   const InspectorContext = reactExports.createContext(null);
   function InspectorProvider({
     children,
-    sources
+    sources,
+    projectCompilation
   }) {
     const { root: root2 } = useTheme();
     const [inspectable, setInspectable] = reactExports.useState({});
@@ -132837,9 +132931,10 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         setDevToolsSize,
         devToolsSide,
         setDevToolsSide,
-        devToolsEnabled: showCode
+        devToolsEnabled: showCode,
+        projectCompilation
       };
-    }, [devToolsSide, devToolsSize, sources, inspectedNode, showCode]);
+    }, [devToolsSide, devToolsSize, sources, inspectedNode, showCode, projectCompilation]);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(InspectorContext.Provider, { value: contextValue2, children: [
       children,
       define_process_env_default$7.VITE_USER_COMPONENTS_Inspect !== "false" && showCode && inspectedNode !== null && reactDomExports.createPortal(devToolsEntry == null ? void 0 : devToolsEntry.renderer({}), root2),
@@ -132950,6 +133045,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   function useDevTools() {
     const context = reactExports.useContext(InspectorContext);
     return {
+      projectCompilation: context == null ? void 0 : context.projectCompilation,
       inspectedNode: context == null ? void 0 : context.inspectedNode,
       sources: context == null ? void 0 : context.sources,
       setIsOpen: context == null ? void 0 : context.setIsOpen,
@@ -133868,17 +133964,17 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     loaderInProgressChanged: loaderInProgressChanged2,
     loaderIsRefetchingChanged: loaderIsRefetchingChanged2,
     loaderError: loaderError2,
-    transformResult
+    transformResult,
+    structuralSharing = true
   }) {
     const { uid } = loader;
     const appContext = useAppContext();
-    const [isRefetching, setIsRefetching] = reactExports.useState(false);
-    const { data, status, isFetching, error: error2, refetch } = useQuery({
+    const { data, status, isFetching, error: error2, refetch, isRefetching } = useQuery({
       queryKey: reactExports.useMemo(
         () => queryId ? queryId : [uid, extractParam(state, loader.props, appContext)],
         [appContext, loader.props, queryId, state, uid]
       ),
-      structuralSharing: false,
+      structuralSharing,
       queryFn: reactExports.useCallback(
         async ({ signal }) => {
           try {
@@ -133914,7 +134010,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       let intervalId;
       if (pollIntervalInSeconds) {
         intervalId = setInterval(() => {
-          setIsRefetching(true);
           refetch();
         }, pollIntervalInSeconds * 1e3);
       }
@@ -133937,11 +134032,9 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         loaderLoaded2(data);
         setTimeout(() => {
           onLoaded == null ? void 0 : onLoaded(data, isRefetching);
-          setIsRefetching(false);
         }, 0);
       } else if (status === "error" && error2 !== prevError) {
         loaderError2(error2);
-        setIsRefetching(false);
       }
     }, [data, error2, loaderError2, loaderLoaded2, onLoaded, prevData, prevError, status, isRefetching]);
     reactExports.useLayoutEffect(() => {
@@ -133952,7 +134045,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     reactExports.useEffect(() => {
       registerComponentApi == null ? void 0 : registerComponentApi({
         refetch: async (options2) => {
-          setIsRefetching(true);
           refetch(options2);
         },
         update: async (updater) => {
@@ -133993,14 +134085,15 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     }, [appContext.queryClient, queryId, refetch, registerComponentApi, data]);
     return null;
   }
-  function ApiLoader$1({
+  function ApiLoader({
     loader,
     loaderInProgressChanged: loaderInProgressChanged2,
     loaderIsRefetchingChanged: loaderIsRefetchingChanged2,
     loaderLoaded: loaderLoaded2,
     loaderError: loaderError2,
     state,
-    doNotRemoveNulls
+    doNotRemoveNulls,
+    structuralSharing = true
   }) {
     const appContext = useAppContext();
     const url = extractParam(state, loader.props.url, appContext);
@@ -134028,7 +134121,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         loaderIsRefetchingChanged: loaderIsRefetchingChanged2,
         loaderLoaded: loaderLoaded2,
         loaderError: loaderError2,
-        loaderFn: doLoad
+        loaderFn: doLoad,
+        structuralSharing
       }
     );
   }
@@ -134043,7 +134137,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     "ApiLoader",
     ({ loader, state, loaderInProgressChanged: loaderInProgressChanged2, loaderIsRefetchingChanged: loaderIsRefetchingChanged2, loaderLoaded: loaderLoaded2, loaderError: loaderError2 }) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ApiLoader$1,
+        ApiLoader,
         {
           loader,
           state,
@@ -134063,7 +134157,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     loaderError: loaderError2,
     loaderLoaded: loaderLoaded2,
     state,
-    doNotRemoveNulls
+    doNotRemoveNulls,
+    structuralSharing = true
   }) {
     const appContext = useAppContext();
     const method = extractParam(state, loader.props.method, appContext);
@@ -134098,7 +134193,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         loaderIsRefetchingChanged: loaderIsRefetchingChanged2,
         loaderLoaded: loaderLoaded2,
         loaderError: loaderError2,
-        loaderFn: doLoad
+        loaderFn: doLoad,
+        structuralSharing
       }
     );
   }
@@ -134128,13 +134224,14 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     },
     ExternalDataLoaderMd
   );
-  function ApiLoader({
+  function MockLoader({
     loader,
     loaderInProgressChanged: loaderInProgressChanged2,
     loaderIsRefetchingChanged: loaderIsRefetchingChanged2,
     loaderError: loaderError2,
     loaderLoaded: loaderLoaded2,
-    state
+    state,
+    structuralSharing
   }) {
     const appContext = useAppContext();
     const waitTime = extractParam(state, loader.props.waitTime, appContext);
@@ -134152,7 +134249,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         loaderIsRefetchingChanged: loaderIsRefetchingChanged2,
         loaderLoaded: loaderLoaded2,
         loaderError: loaderError2,
-        loaderFn: doLoad
+        loaderFn: doLoad,
+        structuralSharing
       }
     );
   }
@@ -134167,7 +134265,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     "MockLoader",
     ({ loader, state, loaderInProgressChanged: loaderInProgressChanged2, loaderLoaded: loaderLoaded2, loaderError: loaderError2 }) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ApiLoader,
+        MockLoader,
         {
           loader,
           state,
@@ -134612,7 +134710,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     loaderIsRefetchingChanged: loaderIsRefetchingChanged2,
     loaderLoaded: loaderLoaded2,
     loaderError: loaderError2,
-    transformResult
+    transformResult,
+    structuralSharing = true
   }) {
     const { uid } = loader;
     const appContext = useAppContext();
@@ -134621,7 +134720,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       [appContext, loader.props, queryId, state, uid]
     );
     const thizRef = reactExports.useRef(queryKey);
-    const [isRefetching, setIsRefetching] = reactExports.useState(false);
     const getPreviousPageParam2 = reactExports.useCallback(
       (firstPage) => {
         let prevPageParam = void 0;
@@ -134671,7 +134769,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       isFetching,
       refetch,
       fetchPreviousPage,
-      fetchNextPage
+      fetchNextPage,
+      isRefetching
     } = useInfiniteQuery({
       queryKey,
       queryFn: reactExports.useCallback(
@@ -134680,6 +134779,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         },
         [loaderFn]
       ),
+      structuralSharing,
       select: reactExports.useCallback(
         (data2) => {
           let result = [];
@@ -134739,11 +134839,9 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         loaderLoaded2(data, pageInfo);
         setTimeout(() => {
           onLoaded == null ? void 0 : onLoaded(data, isRefetching);
-          setIsRefetching(false);
         }, 0);
       } else if (status === "error" && prevError !== error2) {
         loaderError2(error2);
-        setIsRefetching(false);
       }
     }, [
       data,
@@ -134761,7 +134859,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       let intervalId;
       if (pollIntervalInSeconds) {
         intervalId = setInterval(() => {
-          setIsRefetching(true);
           refetch();
         }, pollIntervalInSeconds * 1e3);
       }
@@ -134782,7 +134879,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         fetchPrevPage,
         fetchNextPage: stableFetchNextPage,
         refetch: async (options2) => {
-          setIsRefetching(true);
           refetch(options2);
         },
         update: async (updater) => {
@@ -134849,7 +134945,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     loaderIsRefetchingChanged: loaderIsRefetchingChanged2,
     loaderLoaded: loaderLoaded2,
     loaderError: loaderError2,
-    transformResult
+    transformResult,
+    structuralSharing = true
   }) {
     const appContext = useAppContext();
     const url = extractParam(state, loader.props.url, appContext);
@@ -135109,7 +135206,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         registerComponentApi,
         pollIntervalInSeconds,
         onLoaded,
-        transformResult
+        transformResult,
+        structuralSharing
       },
       queryId == null ? void 0 : queryId.join("")
     ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -135126,7 +135224,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         pollIntervalInSeconds,
         registerComponentApi,
         onLoaded,
-        transformResult
+        transformResult,
+        structuralSharing
       },
       queryId == null ? void 0 : queryId.join("")
     );
@@ -135148,7 +135247,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       completedNotificationMessage: d$5("The message to show when the loader completes"),
       errorNotificationMessage: d$5("The message to show when an error occurs"),
       transformResult: d$5("Function for transforming the datasource result"),
-      dataType: d$5("Type of data to fetch (default: json, or csv, or sql)")
+      dataType: d$5("Type of data to fetch (default: json, or csv, or sql)"),
+      structuralSharing: d$5("Whether to use structural sharing for the data")
     },
     events: {
       loaded: d$5("Event to trigger when the data is loaded"),
@@ -135166,7 +135266,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       loaderError: loaderError2,
       registerComponentApi,
       lookupAction,
-      lookupSyncCallback
+      lookupSyncCallback,
+      extractValue
     }) => {
       var _a3, _b2, _c2;
       if (!((_a3 = loader.props) == null ? void 0 : _a3.url) || !loader.props.url.trim()) {
@@ -135184,7 +135285,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
           registerComponentApi,
           transformResult: lookupSyncCallback(loader.props.transformResult),
           onLoaded: lookupAction((_b2 = loader.events) == null ? void 0 : _b2.loaded, { eventName: "loaded" }),
-          onError: lookupAction((_c2 = loader.events) == null ? void 0 : _c2.error, { eventName: "error" })
+          onError: lookupAction((_c2 = loader.events) == null ? void 0 : _c2.error, { eventName: "error" }),
+          structuralSharing: extractValue.asOptionalBoolean(loader.props.structuralSharing)
         }
       );
     },
@@ -143865,7 +143967,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
     ] });
   }
-  const version = "0.9.15";
+  const version = "0.9.17";
   const ApiInterceptorContext = reactExports.createContext(null);
   function useApiInterceptorContext() {
     return reactExports.useContext(ApiInterceptorContext);
@@ -147531,7 +147633,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       return nodeValue ?? "";
     }
     if (node2.type === "TextNode") {
-      return extractParam(state, nodeValue, appContext, true);
+      const extractedValue = extractParam(state, nodeValue, appContext, true);
+      return typeof extractedValue === "boolean" ? extractedValue.toString() : extractedValue;
     }
     if (node2.type === "Slot") {
       let slotChildren;
@@ -147981,7 +148084,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     resources,
     resourceMap,
     sources,
-    children
+    children,
+    projectCompilation
   }) => {
     if (previewMode) {
       q$1.canUseDOM = false;
@@ -148000,7 +148104,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
             defaultTheme,
             defaultTone,
             resources,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(InspectorProvider, { sources, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConfirmationModalContextProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(InspectorProvider, { sources, projectCompilation, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConfirmationModalContextProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               AppContent,
               {
                 rootContainer: node2,
@@ -148623,6 +148727,10 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       },
       nextPageSelector: {
         description: `When using \`${COMP}\` with paging, the response may contain information about the previous and next page. This property defines the selector that extracts the next page information from the response deserialized to an object.`
+      },
+      structuralSharing: {
+        description: "This property allows structural sharing. When turned on, `DataSource` will keep the original reference if nothing has changed in the data. If a subset has changed, `DataSource` will keep the unchanged parts and only replace the changed parts. If you do not need this behavior, set this property to `false`.",
+        defaultValue: "true"
       }
     },
     events: {
@@ -148632,7 +148740,9 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       error: d$5(`This event fires when a request results in an error.`)
     },
     apis: {
-      value: d$5("This property retrieves the data queried from the source after optional transformations."),
+      value: d$5(
+        "This property retrieves the data queried from the source after optional transformations."
+      ),
       inProgress: d$5("This property indicates if the data is being fetched."),
       isRefetching: d$5("This property indicates if the data is being re-fetched."),
       loaded: d$5("This property indicates if the data has been loaded."),
@@ -148838,7 +148948,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     ToneChangerButton: ToneChangerButtonMd,
     Tree: TreeMd
   };
-  var define_process_env_default$2 = { VITE_XMLUI_VERSION: "0.9.15 (built 4/23/2025)" };
+  var define_process_env_default$2 = { VITE_XMLUI_VERSION: "0.9.17 (built 4/24/2025)" };
   const MAIN_FILE = "Main." + componentFileExtension;
   const MAIN_CODE_BEHIND_FILE = "Main." + codeBehindFileExtension;
   const CONFIG_FILE = "config.json";
@@ -153276,7 +153386,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   function isResponseWithoutBody(status) {
     return RESPONSE_STATUS_CODES_WITHOUT_BODY.has(status);
   }
-  var define_process_env_default$1 = { NODE_ENV: "production", VITE_MOCK_ENABLED: true, VITE_MOCK_WORKER_LOCATION: "mockApi.js", VITE_USED_COMPONENTS_Pdf: "false", VITE_USED_COMPONENTS_Chart: "false", VITE_USER_COMPONENTS_XmluiCodeHightlighter: "false", VITE_USED_COMPONENTS_Tree: "false", VITE_XMLUI_VERSION: "0.9.15 (built 4/23/2025)" };
+  var define_process_env_default$1 = { NODE_ENV: "production", VITE_MOCK_ENABLED: true, VITE_MOCK_WORKER_LOCATION: "mockApi.js", VITE_USED_COMPONENTS_Pdf: "false", VITE_USED_COMPONENTS_Chart: "false", VITE_USER_COMPONENTS_XmluiCodeHightlighter: "false", VITE_USED_COMPONENTS_Tree: "false", VITE_XMLUI_VERSION: "0.9.17 (built 4/24/2025)" };
   var __defProp$7 = Object.defineProperty;
   var __export = (target2, all2) => {
     for (var name2 in all2)