xmlui 0.9.17 → 0.9.19

package/dist/{apiInterceptorWorker-D94b73xQ.mjs → apiInterceptorWorker-BH8WAcl0.mjs}

@@ -12,7 +12,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
 var _executor, _DeferredPromise_instances, decorate_fn, _a2;
 import { delay as delay$1, HttpResponse, http } from "msw";
 import { isArray, isObject as isObject$1, mapValues } from "lodash-es";
-import { r as runEventHandlerCode, g as getDate, d as delay, m as miscellaneousUtils, a as dateFunctions, o as orderBy, T as ThrowStatementError } from "./index-B6kr6jsm.mjs";
+import { r as runEventHandlerCode, g as getDate, d as delay, m as miscellaneousUtils, a as dateFunctions, o as orderBy, T as ThrowStatementError } from "./index-KE5HIbCX.mjs";
 import Dexie from "dexie";
 var POSITIONALS_EXP = /(%?)(%([sdijo]))/g;
 function serializePositional(positional, flag) {

package/dist/{index-B6kr6jsm.mjs → index-KE5HIbCX.mjs}

@@ -3394,23 +3394,23 @@ function createUrlWithQueryParams(to2) {
   }
   return to2;
 }
-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$g = "_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$2 = "_content_1c9ty_27";
-const noScrollbarGutters = "_noScrollbarGutters_1c9ty_200";
+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$g = "_wrapper_rebcu_13";
+const vertical$4 = "_vertical_rebcu_23";
+const contentWrapper$1 = "_contentWrapper_rebcu_27";
+const navPanelWrapper = "_navPanelWrapper_rebcu_33";
+const PagesWrapper = "_PagesWrapper_rebcu_37";
+const footerWrapper = "_footerWrapper_rebcu_41";
+const sticky = "_sticky_rebcu_44";
+const horizontal$5 = "_horizontal_rebcu_51";
+const verticalFullHeader = "_verticalFullHeader_rebcu_73";
+const PagesWrapperInner = "_PagesWrapperInner_rebcu_90";
+const verticalConstrained = "_verticalConstrained_rebcu_102";
+const header$2 = "_header_rebcu_108";
+const scrollWholePage = "_scrollWholePage_rebcu_135";
+const headerWrapper$1 = "_headerWrapper_rebcu_138";
+const content$2 = "_content_rebcu_27";
+const noScrollbarGutters = "_noScrollbarGutters_rebcu_204";
 const styles$_ = {
   themeVars: themeVars$J,
   wrapper: wrapper$g,
@@ -4159,7 +4159,7 @@ function App({
                 children: /* @__PURE__ */ jsx("div", { className: styles$_.header, style: { paddingInline: 0 }, children: header2 })
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: styles$_.content, children: [
+            /* @__PURE__ */ jsxs("div", { className: classnames(styles$_.content, styles$_.verticalConstrained), children: [
               navPanelVisible && /* @__PURE__ */ jsx("aside", { className: styles$_.navPanelWrapper, children: navPanel }),
               /* @__PURE__ */ jsx("main", { className: styles$_.contentWrapper, children: /* @__PURE__ */ jsx("div", { className: styles$_.PagesWrapper, ref: noScrollPageContainerRef, children: /* @__PURE__ */ jsx(ScrollContext.Provider, { value: scrollContainerRef, children: /* @__PURE__ */ jsx("div", { className: styles$_.PagesWrapperInner, style: pagesWrapperInnerStyle, children }) }) }) })
             ] }),
@@ -20651,7 +20651,7 @@ const NavGroup = forwardRef(function NavGroup2({
   const { level } = useContext(NavGroupContext);
   const appLayoutContext = useAppLayoutContext();
   const navPanelContext = useContext(NavPanelContext);
-  let inline = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-full-header";
+  let inline = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-full-header" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-constrained-width";
   if (navPanelContext !== null) {
     inline = navPanelContext.inDrawer;
   }
@@ -21102,14 +21102,14 @@ const spinnerComponentRenderer = createComponentRenderer(
     );
   }
 );
-const themeVars$a = `'{"accentColor-Blockquote": "var(--xmlui-accentColor-Blockquote)", "accentWidth-Blockquote": "var(--xmlui-accentWidth-Blockquote)", "backgroundColor-Blockquote": "var(--xmlui-backgroundColor-Blockquote)", "paddingLeft-Blockquote": "var(--xmlui-paddingLeft-Blockquote)", "borderRadius-Blockquote": "var(--xmlui-borderRadius-Blockquote)", "marginTop-Blockquote": "var(--xmlui-marginTop-Blockquote)", "marginBottom-Blockquote": "var(--xmlui-marginBottom-Blockquote)", "backgroundColor-Admonition": "var(--xmlui-backgroundColor-Admonition)", "paddingLeft-Admonition": "var(--xmlui-paddingLeft-Admonition)", "borderRadius-Admonition": "var(--xmlui-borderRadius-Admonition)", "iconSize-Admonition": "var(--xmlui-iconSize-Admonition)", "marginTop-Admonition": "var(--xmlui-marginTop-Admonition)", "marginBottom-Admonition": "var(--xmlui-marginBottom-Admonition)", "marginLeft-Admonition-content": "var(--xmlui-marginLeft-Admonition-content)", "marginTop-HtmlVideo": "var(--xmlui-marginTop-HtmlVideo)", "marginBottom-HtmlVideo": "var(--xmlui-marginBottom-HtmlVideo)"}'`;
-const markdownContent = "_markdownContent_1anzp_13";
-const blockquote = "_blockquote_1anzp_13";
-const blockquoteContainer = "_blockquoteContainer_1anzp_31";
-const admonitionBlockquote = "_admonitionBlockquote_1anzp_34";
-const admonitionContainer = "_admonitionContainer_1anzp_40";
-const admonitionContent = "_admonitionContent_1anzp_45";
-const admonitionIcon = "_admonitionIcon_1anzp_48";
+const themeVars$a = `'{"maxWidth-Markdown": "var(--xmlui-maxWidth-Markdown)", "accentColor-Blockquote": "var(--xmlui-accentColor-Blockquote)", "accentWidth-Blockquote": "var(--xmlui-accentWidth-Blockquote)", "backgroundColor-Blockquote": "var(--xmlui-backgroundColor-Blockquote)", "paddingLeft-Blockquote": "var(--xmlui-paddingLeft-Blockquote)", "borderRadius-Blockquote": "var(--xmlui-borderRadius-Blockquote)", "marginTop-Blockquote": "var(--xmlui-marginTop-Blockquote)", "marginBottom-Blockquote": "var(--xmlui-marginBottom-Blockquote)", "backgroundColor-Admonition": "var(--xmlui-backgroundColor-Admonition)", "paddingLeft-Admonition": "var(--xmlui-paddingLeft-Admonition)", "borderRadius-Admonition": "var(--xmlui-borderRadius-Admonition)", "iconSize-Admonition": "var(--xmlui-iconSize-Admonition)", "marginTop-Admonition": "var(--xmlui-marginTop-Admonition)", "marginBottom-Admonition": "var(--xmlui-marginBottom-Admonition)", "marginLeft-Admonition-content": "var(--xmlui-marginLeft-Admonition-content)", "marginTop-HtmlVideo": "var(--xmlui-marginTop-HtmlVideo)", "marginBottom-HtmlVideo": "var(--xmlui-marginBottom-HtmlVideo)"}'`;
+const markdownContent = "_markdownContent_17igw_13";
+const blockquote = "_blockquote_17igw_16";
+const blockquoteContainer = "_blockquoteContainer_17igw_34";
+const admonitionBlockquote = "_admonitionBlockquote_17igw_37";
+const admonitionContainer = "_admonitionContainer_17igw_43";
+const admonitionContent = "_admonitionContent_17igw_48";
+const admonitionIcon = "_admonitionIcon_17igw_51";
 const styles$l = {
   themeVars: themeVars$a,
   markdownContent,
@@ -21191,7 +21191,13 @@ const Markdown = memo(function Markdown2({
           return /* @__PURE__ */ jsx("video", { className: styles$k.htmlVideo, ...props, children: children2 });
         },
         img({ children: children2, node, ...props }) {
-          return /* @__PURE__ */ jsx("img", { className: styles$k.htmlImage, ...props, children: children2 });
+          const src = props == null ? void 0 : props.src;
+          const popOut = props == null ? void 0 : props["data-popout"];
+          if (popOut) {
+            return /* @__PURE__ */ jsx("a", { href: src, target: "_blank", children: /* @__PURE__ */ jsx("img", { className: styles$k.htmlImage, ...props, children: children2 }) });
+          } else {
+            return /* @__PURE__ */ jsx("img", { className: styles$k.htmlImage, ...props, children: children2 });
+          }
         },
         h1({ children: children2 }) {
           return /* @__PURE__ */ jsx(Heading, { level: "h1", children: children2 });
@@ -21239,7 +21245,7 @@ const Markdown = memo(function Markdown2({
           return /* @__PURE__ */ jsx("ul", { className: styles$k.htmlUl, ...props, children: children2 });
         },
         li({ children: children2, node, ...props }) {
-          return /* @__PURE__ */ jsx("li", { className: styles$k.htmlLi, ...props, children: children2 });
+          return /* @__PURE__ */ jsx("li", { className: styles$k.htmlLi, ...props, children: /* @__PURE__ */ jsx(Text, { children: children2 }) });
         },
         hr() {
           return /* @__PURE__ */ jsx(HorizontalRule, {});
@@ -24103,7 +24109,8 @@ const InspectorContext = createContext(null);
 function InspectorProvider({
   children,
   sources,
-  projectCompilation
+  projectCompilation,
+  mockApi
 }) {
   const { root: root2 } = useTheme();
   const [inspectable, setInspectable] = useState({});
@@ -24154,9 +24161,10 @@ function InspectorProvider({
       devToolsSide,
       setDevToolsSide,
       devToolsEnabled: showCode,
-      projectCompilation
+      projectCompilation,
+      mockApi
     };
-  }, [devToolsSide, devToolsSize, sources, inspectedNode, showCode, projectCompilation]);
+  }, [devToolsSide, devToolsSize, sources, inspectedNode, showCode, projectCompilation, mockApi]);
   return /* @__PURE__ */ jsxs(InspectorContext.Provider, { value: contextValue2, children: [
     children,
     process.env.VITE_USER_COMPONENTS_Inspect !== "false" && showCode && inspectedNode !== null && createPortal(devToolsEntry == null ? void 0 : devToolsEntry.renderer({}), root2),
@@ -24275,7 +24283,8 @@ function useDevTools() {
     setDevToolsSize: context == null ? void 0 : context.setDevToolsSize,
     devToolsSide: context == null ? void 0 : context.devToolsSide,
     setDevToolsSide: context == null ? void 0 : context.setDevToolsSide,
-    devToolsEnabled: context == null ? void 0 : context.devToolsEnabled
+    devToolsEnabled: context == null ? void 0 : context.devToolsEnabled,
+    mockApi: context == null ? void 0 : context.mockApi
   };
 }
 function useInspector(node, uid) {
@@ -31645,7 +31654,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.9.17";
+const version = "0.9.19";
 const ApiInterceptorContext = createContext(null);
 function useApiInterceptorContext() {
   return useContext(ApiInterceptorContext);
@@ -35698,18 +35707,26 @@ const AppWrapper = ({
           defaultTheme,
           defaultTone,
           resources,
-          children: /* @__PURE__ */ jsx(InspectorProvider, { sources, projectCompilation, children: /* @__PURE__ */ jsx(ConfirmationModalContextProvider, { children: /* @__PURE__ */ jsx(
-            AppContent,
+          children: /* @__PURE__ */ jsx(
+            InspectorProvider,
             {
-              rootContainer: node,
-              routerBaseName: baseName,
-              globalProps,
-              standalone,
-              decorateComponentsWithTestId,
-              debugEnabled,
-              children
+              sources,
+              projectCompilation,
+              mockApi: globalProps.demoMockApi,
+              children: /* @__PURE__ */ jsx(ConfirmationModalContextProvider, { children: /* @__PURE__ */ jsx(
+                AppContent,
+                {
+                  rootContainer: node,
+                  routerBaseName: baseName,
+                  globalProps,
+                  standalone,
+                  decorateComponentsWithTestId,
+                  debugEnabled,
+                  children
+                }
+              ) })
             }
-          ) }) })
+          )
         }
       ) })
     ] })
@@ -35810,6 +35827,7 @@ function getTransitiveDependencies(directCompDepNames, components) {
   populateTransitiveDeps(directCompDepNames);
   return transitiveDeps;
   function populateTransitiveDeps(directCompDepNames2) {
+    if (!directCompDepNames2) return;
     for (const directDep of directCompDepNames2) {
       if (!transitiveDeps.has(directDep)) {
         transitiveDeps.add(directDep);
@@ -35832,7 +35850,7 @@ function ApiInterceptorProvider({
       let interceptorWorker;
       (async () => {
         if (process.env.VITE_MOCK_ENABLED) {
-          const { createApiInterceptorWorker } = await import("./apiInterceptorWorker-D94b73xQ.mjs");
+          const { createApiInterceptorWorker } = await import("./apiInterceptorWorker-BH8WAcl0.mjs");
           if (interceptor) {
             interceptorWorker = await createApiInterceptorWorker(interceptor, apiWorker);
             if (!apiWorker) {

package/dist/index.css

@@ -13,7 +13,7 @@
 @scope (#_ui-engine-theme-root) {
   :scope {
     line-height: 1.5;
-    font-feature-settings: normal;
+    font-feature-settings: var(--xmlui-font-feature-settings);
     font-variation-settings: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -968,7 +968,7 @@
  * 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_1c9ty_13 {
+._wrapper_rebcu_13 {
   --footer-height: 0px;
   --header-height: 0px;
   width: 100%;
@@ -978,191 +978,195 @@
   flex-direction: column;
   isolation: isolate;
 }
-._wrapper_1c9ty_13._vertical_1c9ty_23 {
+._wrapper_rebcu_13._vertical_rebcu_23 {
   flex-direction: row;
   overflow: initial;
 }
-._wrapper_1c9ty_13._vertical_1c9ty_23 ._contentWrapper_1c9ty_27 {
+._wrapper_rebcu_13._vertical_rebcu_23 ._contentWrapper_rebcu_27 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   position: relative;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_1c9ty_13._vertical_1c9ty_23 ._navPanelWrapper_1c9ty_33 {
+._wrapper_rebcu_13._vertical_rebcu_23 ._navPanelWrapper_rebcu_33 {
   width: var(--xmlui-width-navPanel-App);
   flex-shrink: 0;
 }
-._wrapper_1c9ty_13._vertical_1c9ty_23 ._PagesWrapper_1c9ty_37 {
+._wrapper_rebcu_13._vertical_rebcu_23 ._PagesWrapper_rebcu_37 {
   min-height: initial;
   flex: 1;
 }
-._wrapper_1c9ty_13._vertical_1c9ty_23 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._vertical_rebcu_23 ._footerWrapper_rebcu_41 {
   position: static;
 }
-._wrapper_1c9ty_13._vertical_1c9ty_23._sticky_1c9ty_44 ._contentWrapper_1c9ty_27 {
+._wrapper_rebcu_13._vertical_rebcu_23._sticky_rebcu_44 ._contentWrapper_rebcu_27 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_1c9ty_13._vertical_1c9ty_23._sticky_1c9ty_44 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._vertical_rebcu_23._sticky_rebcu_44 ._footerWrapper_rebcu_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_1c9ty_13._horizontal_1c9ty_51 {
+._wrapper_rebcu_13._horizontal_rebcu_51 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_1c9ty_13._horizontal_1c9ty_51 ._PagesWrapper_1c9ty_37 {
+._wrapper_rebcu_13._horizontal_rebcu_51 ._PagesWrapper_rebcu_37 {
   min-height: initial;
 }
-._wrapper_1c9ty_13._horizontal_1c9ty_51 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._horizontal_rebcu_51 ._footerWrapper_rebcu_41 {
   position: static;
 }
-._wrapper_1c9ty_13._horizontal_1c9ty_51._sticky_1c9ty_44 {
+._wrapper_rebcu_13._horizontal_rebcu_51._sticky_rebcu_44 {
   scroll-padding-top: var(--header-height);
   min-height: 100%;
 }
-._wrapper_1c9ty_13._horizontal_1c9ty_51._sticky_1c9ty_44 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._horizontal_rebcu_51._sticky_rebcu_44 ._footerWrapper_rebcu_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_1c9ty_13._horizontal_1c9ty_51 ._navPanelWrapper_1c9ty_33 {
+._wrapper_rebcu_13._horizontal_rebcu_51 ._navPanelWrapper_rebcu_33 {
   border-bottom: var(--xmlui-borderBottom-AppHeader);
   justify-content: end;
 }
-._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 {
+._wrapper_rebcu_13._verticalFullHeader_rebcu_73 {
   min-height: 100%;
   height: 100%;
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._navPanelWrapper_1c9ty_33 {
+._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._navPanelWrapper_rebcu_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._verticalFullHeader_1c9ty_73 ._PagesWrapper_1c9ty_37 {
+._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._PagesWrapper_rebcu_37 {
   overflow: initial;
   min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
   height: 100%;
 }
-._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._PagesWrapperInner_1c9ty_90 {
+._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._PagesWrapperInner_rebcu_90 {
   height: 100%;
 }
-._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._PagesWrapperInner_1c9ty_90 > .xmlui-page-root {
+._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._PagesWrapperInner_rebcu_90 > .xmlui-page-root {
   height: 100%;
 }
-._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._footerWrapper_rebcu_41 {
   position: sticky;
   left: 0;
   right: 0;
   bottom: 0;
 }
-._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 {
+._wrapper_rebcu_13._verticalConstrained_rebcu_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);
+._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._header_rebcu_108 {
+  max-width: var(--xmlui-maxWidth-content-App);
   margin: auto;
 }
-._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._navPanelWrapper_1c9ty_33 {
+._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._navPanelWrapper_rebcu_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 {
+._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._PagesWrapper_rebcu_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 {
+._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._PagesWrapperInner_rebcu_90 {
   height: 100%;
 }
-._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._PagesWrapperInner_1c9ty_90 > .xmlui-page-root {
+._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._PagesWrapperInner_rebcu_90 > .xmlui-page-root {
   height: 100%;
 }
-._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._footerWrapper_rebcu_41 {
   position: sticky;
   left: 0;
   right: 0;
   bottom: 0;
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135 {
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._headerWrapper_1c9ty_138 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._headerWrapper_rebcu_138 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._headerWrapper_1c9ty_138 > div {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._headerWrapper_rebcu_138 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._footerWrapper_rebcu_41 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._footerWrapper_1c9ty_41 > div {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._footerWrapper_rebcu_41 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalFullHeader_1c9ty_73 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalFullHeader_rebcu_73 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalFullHeader_1c9ty_73 ._content_1c9ty_27 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalFullHeader_rebcu_73 ._content_rebcu_27 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalFullHeader_1c9ty_73 ._contentWrapper_1c9ty_27 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalFullHeader_rebcu_73 ._contentWrapper_rebcu_27 {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._content_1c9ty_27 {
-  width: var(--xmlui-maxWidth-App);
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._content_rebcu_27 {
+  width: var(--xmlui-maxWidth-content-App);
   margin-inline: calc(-1 * var(--scrollbar-width));
   margin: auto;
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._contentWrapper_1c9ty_27 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._contentWrapper_rebcu_27 {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._headerWrapper_1c9ty_138 > div {
-  width: var(--xmlui-maxWidth-App);
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._headerWrapper_rebcu_138 > div {
+  width: var(--xmlui-maxWidth-content-App);
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._footerWrapper_rebcu_41 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._footerWrapper_1c9ty_41 > div {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._footerWrapper_rebcu_41 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) {
+._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) {
   overflow: hidden;
 }
-._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._content_1c9ty_27 {
+._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._content_rebcu_27 {
   min-height: 0;
   height: 100%;
 }
-._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._contentWrapper_1c9ty_27 {
+._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._contentWrapper_rebcu_27 {
   overflow: initial;
 }
-._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._PagesWrapper_1c9ty_37 {
+._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135)._verticalConstrained_rebcu_102 ._content_rebcu_27 {
+  width: var(--xmlui-maxWidth-content-App);
+  margin: auto;
+}
+._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._PagesWrapper_rebcu_37 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   min-height: 0;
   height: 100%;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._PagesWrapperInner_1c9ty_90 {
+._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._PagesWrapperInner_rebcu_90 {
   min-height: 100%;
   height: 0;
 }
-._wrapper_1c9ty_13._noScrollbarGutters_1c9ty_200 {
+._wrapper_rebcu_13._noScrollbarGutters_rebcu_204 {
   scrollbar-gutter: auto;
 }
-._wrapper_1c9ty_13._noScrollbarGutters_1c9ty_200 ._PagesWrapper_1c9ty_37 {
+._wrapper_rebcu_13._noScrollbarGutters_rebcu_204 ._PagesWrapper_rebcu_37 {
   scrollbar-gutter: auto;
 }
 
-._headerWrapper_1c9ty_138 {
+._headerWrapper_rebcu_138 {
   z-index: 1;
   min-height: 0;
   flex-shrink: 0;
@@ -1171,17 +1175,17 @@
   box-shadow: var(--xmlui-boxShadow-header-App);
   background-color: var(--xmlui-backgroundColor-AppHeader);
 }
-._headerWrapper_1c9ty_138._sticky_1c9ty_44 {
+._headerWrapper_rebcu_138._sticky_rebcu_44 {
   position: sticky;
 }
 
-._content_1c9ty_27 {
+._content_rebcu_27 {
   display: flex;
   flex-direction: row;
   isolation: isolate;
 }
 
-._contentWrapper_1c9ty_27 {
+._contentWrapper_rebcu_27 {
   position: relative;
   min-width: 0;
   flex: 1;
@@ -1192,21 +1196,21 @@
   border-left: var(--xmlui-borderLeft-content-App);
 }
 
-._navPanelWrapper_1c9ty_33 {
+._navPanelWrapper_rebcu_33 {
   display: flex;
   position: sticky;
   top: 0;
 }
-._navPanelWrapper_1c9ty_33:empty {
+._navPanelWrapper_rebcu_33:empty {
   display: none;
 }
 
-._PagesWrapper_1c9ty_37 {
+._PagesWrapper_rebcu_37 {
   flex: 1;
   isolation: isolate;
 }
 
-._PagesWrapperInner_1c9ty_90 {
+._PagesWrapperInner_rebcu_90 {
   --page-padding-left: var(--xmlui-space-4);
   --page-padding-right: var(--xmlui-space-4);
   --page-padding-top: var(--xmlui-space-5);
@@ -1224,7 +1228,7 @@
   display: flex;
   flex-direction: column;
 }
-._PagesWrapperInner_1c9ty_90 > .xmlui-page-root {
+._PagesWrapperInner_rebcu_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));
@@ -1236,7 +1240,7 @@
   margin-right: calc(-1 * var(--page-padding-right));
 }
 
-._footerWrapper_1c9ty_41 {
+._footerWrapper_rebcu_41 {
   flex-shrink: 0;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
@@ -6673,7 +6677,10 @@ button._selectTrigger_1ept5_46._valid_1ept5_37::placeholder {
  * 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.
  */
-._markdownContent_1anzp_13 ._blockquote_1anzp_13 {
+._markdownContent_17igw_13 {
+  max-width: var(--xmlui-maxWidth-Markdown);
+}
+._markdownContent_17igw_13 ._blockquote_17igw_16 {
   position: relative;
   margin-top: var(--xmlui-marginTop-Blockquote);
   margin-bottom: var(--xmlui-marginBottom-Blockquote);
@@ -6681,7 +6688,7 @@ button._selectTrigger_1ept5_46._valid_1ept5_37::placeholder {
   border-radius: var(--xmlui-borderRadius-Blockquote);
   padding-left: var(--xmlui-paddingLeft-Blockquote);
 }
-._markdownContent_1anzp_13 ._blockquote_1anzp_13::before {
+._markdownContent_17igw_13 ._blockquote_17igw_16::before {
   background-color: var(--xmlui-accentColor-Blockquote);
   position: absolute;
   top: 0;
@@ -6691,50 +6698,50 @@ button._selectTrigger_1ept5_46._valid_1ept5_37::placeholder {
   height: 100%;
   width: var(--xmlui-accentWidth-Blockquote);
 }
-._markdownContent_1anzp_13 ._blockquoteContainer_1anzp_31 {
-  padding: 0.5rem;
+._markdownContent_17igw_13 ._blockquoteContainer_17igw_34 {
+  padding: 0.5rem 0.5rem 0.1rem 0.5rem;
 }
-._markdownContent_1anzp_13 ._admonitionBlockquote_1anzp_34 {
+._markdownContent_17igw_13 ._admonitionBlockquote_17igw_37 {
   margin-top: var(--xmlui-marginTop-Admonition);
   margin-bottom: var(--xmlui-marginBottom-Admonition);
   background-color: var(--xmlui-backgroundColor-Admonition);
   border-radius: var(--xmlui-borderRadius-Admonition);
 }
-._markdownContent_1anzp_13 ._admonitionContainer_1anzp_40 {
+._markdownContent_17igw_13 ._admonitionContainer_17igw_43 {
   padding: 0.5rem;
   display: flex;
   align-items: flex-start;
 }
-._markdownContent_1anzp_13 ._admonitionContent_1anzp_45 {
+._markdownContent_17igw_13 ._admonitionContent_17igw_48 {
   margin-left: var(--xmlui-marginLeft-Admonition-content);
 }
-._markdownContent_1anzp_13 ._admonitionIcon_1anzp_48 {
+._markdownContent_17igw_13 ._admonitionIcon_17igw_51 {
   font-size: var(--xmlui-iconSize-Admonition);
   line-height: 1;
 }
-._markdownContent_1anzp_13 ._admonitionContent_1anzp_45 {
+._markdownContent_17igw_13 ._admonitionContent_17igw_48 {
   flex: 1;
   min-width: 0;
 }
-._markdownContent_1anzp_13 ._admonitionBlockquote_1anzp_34 ._admonitionContent_1anzp_45 [class*=text_][class*=markdown_] {
+._markdownContent_17igw_13 ._admonitionBlockquote_17igw_37 ._admonitionContent_17igw_48 [class*=text_][class*=markdown_] {
   margin-top: 0;
   margin-bottom: 0;
 }
-._markdownContent_1anzp_13 li:has(> input[type=checkbox]),
-._markdownContent_1anzp_13 li:has(> input[type=checkbox]) {
+._markdownContent_17igw_13 li:has(> input[type=checkbox]),
+._markdownContent_17igw_13 li:has(> input[type=checkbox]) {
   display: flex;
   align-items: flex-start;
 }
-._markdownContent_1anzp_13 li:has(> input[type=checkbox]) > input[type=checkbox],
-._markdownContent_1anzp_13 li:has(> input[type=checkbox]) > input[type=checkbox] {
+._markdownContent_17igw_13 li:has(> input[type=checkbox]) > input[type=checkbox],
+._markdownContent_17igw_13 li:has(> input[type=checkbox]) > input[type=checkbox] {
   margin-right: 8px;
   margin-top: 4px;
   flex-shrink: 0;
 }
-._markdownContent_1anzp_13 > *:first-child {
+._markdownContent_17igw_13 > *:first-child {
   margin-top: 0;
 }
-._markdownContent_1anzp_13 > *:last-child {
+._markdownContent_17igw_13 > *:last-child {
   margin-bottom: 0;
 }
 

package/dist/scripts/src/components/App/AppNative.js

@@ -186,7 +186,7 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
             content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalFullHeader), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: header }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
             break;
         case "vertical-constrained-width":
-            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalConstrained), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.header, style: { paddingInline: 0 }, children: header }) }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalConstrained), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.header, style: { paddingInline: 0 }, children: header }) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.content, App_module_scss_1.default.verticalConstrained), children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
             break;
         case "condensed":
         case "condensed-sticky":