xmlui 0.9.8 → 0.9.10

package/dist/{apiInterceptorWorker-DOyaK_s_.mjs → apiInterceptorWorker-BJYj3y8V.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-CUYSE1U7.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-6PAZN2xn.mjs";
 import Dexie from "dexie";
 var POSITIONALS_EXP = /(%?)(%([sdijo]))/g;
 function serializePositional(positional, flag) {

package/dist/{index-CUYSE1U7.mjs → index-6PAZN2xn.mjs}

@@ -7,7 +7,7 @@ import { useQuery, useInfiniteQuery, QueryClientProvider, QueryClient } from "@t
 import produce, { createDraft, finishDraft, enableMapSet } from "immer";
 import { throttle, get, isNil, omitBy, isUndefined, noop as noop$2, isPlainObject, isEqual, union, uniq, orderBy as orderBy$1, isEmpty, isObject, isArray, groupBy, sortBy, omit, isNumber, isString, cloneDeep, merge, defaultTo, capitalize, unset, setWith, keyBy, pick } from "lodash-es";
 import { formatDistanceToNow, parse, format, parseISO, isValid, isTomorrow, isYesterday, isToday, isThisWeek, formatRelative, isThisYear, isSameDay, differenceInMinutes } from "date-fns";
-import { v as validationStatusMd, l as labelPositionMd, o as orientationOptionMd, a as alignmentOptionValues, L as LinkTargetMd, b as alignmentOptionMd, i as iconPositionMd, c as buttonTypesMd, s as sizeMd, d as buttonThemeMd, e as buttonVariantMd, P as Parser, T as T_CALCULATED_MEMBER_ACCESS_EXPRESSION, f as T_MEMBER_ACCESS_EXPRESSION, g as T_IDENTIFIER, h as T_PREFIX_OP_EXPRESSION, j as T_FUNCTION_DECLARATION, k as T_ARROW_EXPRESSION, m as createXmlUiTreeNodeId, n as T_EMPTY_STATEMENT, p as T_SWITCH_STATEMENT, q as T_TRY_STATEMENT, r as T_THROW_STATEMENT, t as T_FOR_OF_STATEMENT, u as T_FOR_IN_STATEMENT, w as T_FOR_STATEMENT, x as T_EXPRESSION_STATEMENT, y as T_BREAK_STATEMENT, z as T_CONTINUE_STATEMENT, A as T_DO_WHILE_STATEMENT, B as T_WHILE_STATEMENT, C as T_RETURN_STATEMENT, D as T_IF_STATEMENT, E as T_CONST_STATEMENT, F as T_LET_STATEMENT, G as T_ARROW_EXPRESSION_STATEMENT, H as T_BLOCK_STATEMENT, I as T_VAR_STATEMENT, J as T_ASSIGNMENT_EXPRESSION, K as T_LITERAL, M as T_SPREAD_EXPRESSION, N as T_FUNCTION_INVOCATION_EXPRESSION, O as T_POSTFIX_OP_EXPRESSION, Q as T_CONDITIONAL_EXPRESSION, R as T_BINARY_EXPRESSION, S as T_UNARY_EXPRESSION, U as T_OBJECT_LITERAL, V as T_ARRAY_LITERAL, W as T_SEQUENCE_EXPRESSION, X as T_TEMPLATE_LITERAL_EXPRESSION, Y as T_VAR_DECLARATION, Z as T_DESTRUCTURE, _ as TextVariantElement, $ as VariantPropsKeys, a0 as variantOptionsMd, a1 as scrollAnchoringValues, a2 as buttonThemeNames, a3 as iconPositionNames, a4 as buttonVariantNames, a5 as nodeToComponentDef, a6 as triggerPositionNames, a7 as statusColorMd, a8 as placementMd, a9 as httpMethodNames, aa as PARSED_MARK_PROP, ab as layoutOptionKeys, ac as viewportSizeNames, ad as componentFileExtension, ae as codeBehindFileExtension, af as getLintSeverity, ag as LintSeverity, ah as lintApp, ai as printComponentLints, aj as lintErrorsComponent, ak as collectCodeBehindFromSource, al as removeCodeBehindTokensFromTree } from "./lint-B9tKGcOX.mjs";
+import { v as validationStatusMd, l as labelPositionMd, o as orientationOptionMd, a as alignmentOptionValues, L as LinkTargetMd, b as alignmentOptionMd, i as iconPositionMd, c as buttonTypesMd, s as sizeMd, d as buttonThemeMd, e as buttonVariantMd, P as Parser, T as T_CALCULATED_MEMBER_ACCESS_EXPRESSION, f as T_MEMBER_ACCESS_EXPRESSION, g as T_IDENTIFIER, h as T_PREFIX_OP_EXPRESSION, j as T_FUNCTION_DECLARATION, k as T_ARROW_EXPRESSION, m as createXmlUiTreeNodeId, n as T_EMPTY_STATEMENT, p as T_SWITCH_STATEMENT, q as T_TRY_STATEMENT, r as T_THROW_STATEMENT, t as T_FOR_OF_STATEMENT, u as T_FOR_IN_STATEMENT, w as T_FOR_STATEMENT, x as T_EXPRESSION_STATEMENT, y as T_BREAK_STATEMENT, z as T_CONTINUE_STATEMENT, A as T_DO_WHILE_STATEMENT, B as T_WHILE_STATEMENT, C as T_RETURN_STATEMENT, D as T_IF_STATEMENT, E as T_CONST_STATEMENT, F as T_LET_STATEMENT, G as T_ARROW_EXPRESSION_STATEMENT, H as T_BLOCK_STATEMENT, I as T_VAR_STATEMENT, J as T_ASSIGNMENT_EXPRESSION, K as T_LITERAL, M as T_SPREAD_EXPRESSION, N as T_FUNCTION_INVOCATION_EXPRESSION, O as T_POSTFIX_OP_EXPRESSION, Q as T_CONDITIONAL_EXPRESSION, R as T_BINARY_EXPRESSION, S as T_UNARY_EXPRESSION, U as T_OBJECT_LITERAL, V as T_ARRAY_LITERAL, W as T_SEQUENCE_EXPRESSION, X as T_TEMPLATE_LITERAL_EXPRESSION, Y as T_VAR_DECLARATION, Z as T_DESTRUCTURE, _ as TextVariantElement, $ as VariantPropsKeys, a0 as variantOptionsMd, a1 as scrollAnchoringValues, a2 as buttonThemeNames, a3 as iconPositionNames, a4 as buttonVariantNames, a5 as nodeToComponentDef, a6 as triggerPositionNames, a7 as statusColorMd, a8 as placementMd, a9 as httpMethodNames, aa as PARSED_MARK_PROP, ab as layoutOptionKeys, ac as viewportSizeNames, ad as componentFileExtension, ae as codeBehindFileExtension, af as getLintSeverity, ag as LintSeverity, ah as lintApp, ai as printComponentLints, aj as lintErrorsComponent, ak as collectCodeBehindFromSource, al as removeCodeBehindTokensFromTree } from "./lint-DmJOJSJa.mjs";
 import classnames from "classnames";
 import Color from "color";
 import TextareaAutosize from "react-textarea-autosize";
@@ -3423,21 +3423,21 @@ 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)", "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$h = "_wrapper_1larq_13";
-const vertical$4 = "_vertical_1larq_23";
-const contentWrapper$1 = "_contentWrapper_1larq_27";
-const navPanelWrapper = "_navPanelWrapper_1larq_33";
-const PagesWrapper = "_PagesWrapper_1larq_37";
-const footerWrapper = "_footerWrapper_1larq_41";
-const sticky = "_sticky_1larq_44";
-const horizontal$5 = "_horizontal_1larq_51";
-const verticalFullHeader = "_verticalFullHeader_1larq_73";
-const PagesWrapperInner = "_PagesWrapperInner_1larq_90";
-const scrollWholePage = "_scrollWholePage_1larq_102";
-const headerWrapper$1 = "_headerWrapper_1larq_105";
-const content$3 = "_content_1larq_27";
-const noScrollbarGutters = "_noScrollbarGutters_1larq_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)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
+const wrapper$h = "_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$3 = "_content_qcc08_27";
+const noScrollbarGutters = "_noScrollbarGutters_qcc08_147";
 const styles$$ = {
   themeVars: themeVars$J,
   wrapper: wrapper$h,
@@ -8207,7 +8207,7 @@ function generateBorderSegments(theme2) {
   }
   const result = { ...theme2 };
   Object.entries(theme2).forEach(([key, value]) => {
-    var _a, _b;
+    var _a, _b, _c;
     let match = borderRegEx.exec(key);
     if (match) {
       const remainder = match[1];
@@ -8216,9 +8216,9 @@ function generateBorderSegments(theme2) {
       result[`borderTop-${remainder}`] = value;
       result[`borderBottom-${remainder}`] = value;
       const border = getBorderSegments(value);
-      result[`borderWidth-${remainder}`] = border.thickness;
-      result[_a = `borderStyle-${remainder}`] ?? (result[_a] = border.style);
-      result[_b = `borderColor-${remainder}`] ?? (result[_b] = border.color);
+      result[_a = `borderWidth-${remainder}`] ?? (result[_a] = border.thickness);
+      result[_b = `borderStyle-${remainder}`] ?? (result[_b] = border.style);
+      result[_c = `borderColor-${remainder}`] ?? (result[_c] = border.color);
     }
     match = thicknessBorderRegEx.exec(key);
     if (match) {
@@ -14556,6 +14556,7 @@ const TextBox = forwardRef(function TextBox2({
   labelBreak: labelBreak2,
   required: required2
 }, ref) {
+  id = id || useId();
   const inputRef = useRef(null);
   useEffect(() => {
     if (autoFocus) {
@@ -14608,6 +14609,7 @@ const TextBox = forwardRef(function TextBox2({
   return /* @__PURE__ */ jsx(
     ItemWithLabel,
     {
+      id,
       labelPosition,
       label: label2,
       labelWidth,
@@ -19583,6 +19585,7 @@ const AppMd = createMetadata({
     [`boxShadow-header-${COMP$G}`]: "$boxShadow-spread",
     [`boxShadow-navPanel-${COMP$G}`]: "$boxShadow-spread",
     [`scroll-padding-block-Pages`]: "$space-4",
+    [`backgroundColor-content-App`]: "$backgroundColor",
     light: {
       // --- No light-specific theme vars
     },
@@ -31675,7 +31678,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.9.8";
+const version = "0.9.10";
 const ApiInterceptorContext = createContext(null);
 function useApiInterceptorContext() {
   return useContext(ApiInterceptorContext);
@@ -35715,7 +35718,7 @@ function ApiInterceptorProvider({
       let interceptorWorker;
       (async () => {
         if (process.env.VITE_MOCK_ENABLED) {
-          const { createApiInterceptorWorker } = await import("./apiInterceptorWorker-DOyaK_s_.mjs");
+          const { createApiInterceptorWorker } = await import("./apiInterceptorWorker-BJYj3y8V.mjs");
           if (interceptor) {
             interceptorWorker = await createApiInterceptorWorker(interceptor, apiWorker);
             if (!apiWorker) {
@@ -36331,6 +36334,7 @@ async function parseCodeBehindResponse(response) {
   try {
     parser.parseStatements();
   } catch (e) {
+    console.error("Error parsing code behind", e);
     if (parser.errors.length > 0) {
       return {
         component: errReportScriptError(parser.errors[0], response.url),
@@ -36339,19 +36343,23 @@ async function parseCodeBehindResponse(response) {
       };
     }
   }
-  const codeBehind = collectCodeBehindFromSource("Main", code2);
-  if (Object.keys(codeBehind.moduleErrors ?? {}).length > 0) {
+  try {
+    const codeBehind = collectCodeBehindFromSource("Main", code2);
+    if (Object.keys(codeBehind.moduleErrors ?? {}).length > 0) {
+      return {
+        component: errReportModuleErrors(codeBehind.moduleErrors, response.url),
+        file: response.url,
+        hasError: true
+      };
+    }
+    removeCodeBehindTokensFromTree(codeBehind);
     return {
-      component: errReportModuleErrors(codeBehind.moduleErrors, response.url),
-      file: response.url,
-      hasError: true
+      codeBehind,
+      file: response.url
     };
+  } catch (e) {
+    console.error("Error collecting code behind", e);
   }
-  removeCodeBehindTokensFromTree(codeBehind);
-  return {
-    codeBehind,
-    file: response.url
-  };
 }
 function matchesFileName(path, fileName) {
   return path.endsWith(`/${fileName}.ts`) || path.endsWith(`/${fileName}.js`) || path.endsWith(`/${fileName}.${componentFileExtension}`) || path.endsWith(`/${fileName}.${codeBehindFileExtension}`);
@@ -36643,9 +36651,10 @@ function useStandalone(standaloneAppDef, runtime = EMPTY_OBJECT, extensionManage
             );
             const componentCodeBehindPromise = new Promise(async (resolve) => {
               try {
-                const codeBehindWrapper = await parseCodeBehindResponse(
-                  await fetchWithoutCache(`components/${componentPath}.${codeBehindFileExtension}`)
+                const codeBehind = await fetchWithoutCache(
+                  `components/${componentPath}.${codeBehindFileExtension}`
                 );
+                const codeBehindWrapper = await parseCodeBehindResponse(codeBehind);
                 if (codeBehindWrapper.hasError) {
                   errorComponents.push(codeBehindWrapper.component);
                 }

package/dist/index.css

@@ -976,7 +976,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_1larq_13 {
+._wrapper_qcc08_13 {
   --footer-height: 0px;
   --header-height: 0px;
   width: 100%;
@@ -986,138 +986,138 @@
   flex-direction: column;
   isolation: isolate;
 }
-._wrapper_1larq_13._vertical_1larq_23 {
+._wrapper_qcc08_13._vertical_qcc08_23 {
   flex-direction: row;
   overflow: initial;
 }
-._wrapper_1larq_13._vertical_1larq_23 ._contentWrapper_1larq_27 {
+._wrapper_qcc08_13._vertical_qcc08_23 ._contentWrapper_qcc08_27 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   position: relative;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_1larq_13._vertical_1larq_23 ._navPanelWrapper_1larq_33 {
+._wrapper_qcc08_13._vertical_qcc08_23 ._navPanelWrapper_qcc08_33 {
   width: var(--xmlui-width-navPanel-App);
   flex-shrink: 0;
 }
-._wrapper_1larq_13._vertical_1larq_23 ._PagesWrapper_1larq_37 {
+._wrapper_qcc08_13._vertical_qcc08_23 ._PagesWrapper_qcc08_37 {
   min-height: initial;
   flex: 1;
 }
-._wrapper_1larq_13._vertical_1larq_23 ._footerWrapper_1larq_41 {
+._wrapper_qcc08_13._vertical_qcc08_23 ._footerWrapper_qcc08_41 {
   position: static;
 }
-._wrapper_1larq_13._vertical_1larq_23._sticky_1larq_44 ._contentWrapper_1larq_27 {
+._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._contentWrapper_qcc08_27 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_1larq_13._vertical_1larq_23._sticky_1larq_44 ._footerWrapper_1larq_41 {
+._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_1larq_13._horizontal_1larq_51 {
+._wrapper_qcc08_13._horizontal_qcc08_51 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_1larq_13._horizontal_1larq_51 ._PagesWrapper_1larq_37 {
+._wrapper_qcc08_13._horizontal_qcc08_51 ._PagesWrapper_qcc08_37 {
   min-height: initial;
 }
-._wrapper_1larq_13._horizontal_1larq_51 ._footerWrapper_1larq_41 {
+._wrapper_qcc08_13._horizontal_qcc08_51 ._footerWrapper_qcc08_41 {
   position: static;
 }
-._wrapper_1larq_13._horizontal_1larq_51._sticky_1larq_44 {
+._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 {
   scroll-padding-top: var(--header-height);
   min-height: 100%;
 }
-._wrapper_1larq_13._horizontal_1larq_51._sticky_1larq_44 ._footerWrapper_1larq_41 {
+._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_1larq_13._horizontal_1larq_51 ._navPanelWrapper_1larq_33 {
+._wrapper_qcc08_13._horizontal_qcc08_51 ._navPanelWrapper_qcc08_33 {
   border-bottom: var(--xmlui-borderBottom-AppHeader);
   justify-content: end;
 }
-._wrapper_1larq_13._verticalFullHeader_1larq_73 {
+._wrapper_qcc08_13._verticalFullHeader_qcc08_73 {
   min-height: 100%;
   height: 100%;
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_1larq_13._verticalFullHeader_1larq_73 ._navPanelWrapper_1larq_33 {
+._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._navPanelWrapper_qcc08_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_1larq_13._verticalFullHeader_1larq_73 ._PagesWrapper_1larq_37 {
+._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapper_qcc08_37 {
   overflow: initial;
   min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
   height: 100%;
 }
-._wrapper_1larq_13._verticalFullHeader_1larq_73 ._PagesWrapperInner_1larq_90 {
+._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 {
   height: 100%;
 }
-._wrapper_1larq_13._verticalFullHeader_1larq_73 ._PagesWrapperInner_1larq_90 > .xmlui-page-root {
+._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 > .xmlui-page-root {
   height: 100%;
 }
-._wrapper_1larq_13._verticalFullHeader_1larq_73 ._footerWrapper_1larq_41 {
+._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._footerWrapper_qcc08_41 {
   position: sticky;
   left: 0;
   right: 0;
   bottom: 0;
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102 {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102 {
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102 ._headerWrapper_1larq_105 {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102 ._headerWrapper_1larq_105 > div {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102 ._footerWrapper_1larq_41 {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102 ._footerWrapper_1larq_41 > div {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102._verticalFullHeader_1larq_73 {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102._verticalFullHeader_1larq_73 ._content_1larq_27 {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._content_qcc08_27 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102._verticalFullHeader_1larq_73 ._contentWrapper_1larq_27 {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._contentWrapper_qcc08_27 {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1larq_13:not(._scrollWholePage_1larq_102) {
+._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) {
   overflow: hidden;
 }
-._wrapper_1larq_13:not(._scrollWholePage_1larq_102) ._content_1larq_27 {
+._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._content_qcc08_27 {
   min-height: 0;
   height: 100%;
 }
-._wrapper_1larq_13:not(._scrollWholePage_1larq_102) ._contentWrapper_1larq_27 {
+._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._contentWrapper_qcc08_27 {
   overflow: initial;
 }
-._wrapper_1larq_13:not(._scrollWholePage_1larq_102) ._PagesWrapper_1larq_37 {
+._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapper_qcc08_37 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   min-height: 0;
   height: 100%;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_1larq_13:not(._scrollWholePage_1larq_102) ._PagesWrapperInner_1larq_90 {
+._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapperInner_qcc08_90 {
   min-height: 100%;
   height: 0;
 }
-._wrapper_1larq_13._noScrollbarGutters_1larq_147 {
+._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 {
   scrollbar-gutter: auto;
 }
-._wrapper_1larq_13._noScrollbarGutters_1larq_147 ._PagesWrapper_1larq_37 {
+._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 ._PagesWrapper_qcc08_37 {
   scrollbar-gutter: auto;
 }
 
-._headerWrapper_1larq_105 {
+._headerWrapper_qcc08_105 {
   z-index: 1;
   min-height: 0;
   flex-shrink: 0;
@@ -1126,40 +1126,42 @@
   box-shadow: var(--xmlui-boxShadow-header-App);
   background-color: var(--xmlui-backgroundColor-AppHeader);
 }
-._headerWrapper_1larq_105._sticky_1larq_44 {
+._headerWrapper_qcc08_105._sticky_qcc08_44 {
   position: sticky;
 }
 
-._content_1larq_27 {
+._content_qcc08_27 {
   display: flex;
   flex-direction: row;
   isolation: isolate;
 }
 
-._contentWrapper_1larq_27 {
+._contentWrapper_qcc08_27 {
   position: relative;
   min-width: 0;
   flex: 1;
   display: flex;
   flex-direction: column;
   box-shadow: var(--xmlui-boxShadow-navPanel-App);
+  background-color: var(--xmlui-backgroundColor-content-App);
+  border-left: var(--xmlui-borderLeft-content-App);
 }
 
-._navPanelWrapper_1larq_33 {
+._navPanelWrapper_qcc08_33 {
   display: flex;
   position: sticky;
   top: 0;
 }
-._navPanelWrapper_1larq_33:empty {
+._navPanelWrapper_qcc08_33:empty {
   display: none;
 }
 
-._PagesWrapper_1larq_37 {
+._PagesWrapper_qcc08_37 {
   flex: 1;
   isolation: isolate;
 }
 
-._PagesWrapperInner_1larq_90 {
+._PagesWrapperInner_qcc08_90 {
   --page-padding-left: var(--xmlui-space-4);
   --page-padding-right: var(--xmlui-space-4);
   --page-padding-top: var(--xmlui-space-5);
@@ -1177,7 +1179,7 @@
   display: flex;
   flex-direction: column;
 }
-._PagesWrapperInner_1larq_90 > .xmlui-page-root {
+._PagesWrapperInner_qcc08_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));
@@ -1189,7 +1191,7 @@
   margin-right: calc(-1 * var(--page-padding-right));
 }
 
-._footerWrapper_1larq_41 {
+._footerWrapper_qcc08_41 {
   flex-shrink: 0;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.