@splunk/react-page 8.2.0-beta.1 → 8.2.1

package/18.js

@@ -61,7 +61,7 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
-        default: () => /* binding */ se
+        default: () => /* binding */ ve
     });
     // CONCATENATED MODULE: external "react-dom/client"
     const r = require("react-dom/client");
@@ -74,115 +74,115 @@
     // CONCATENATED MODULE: external "@babel/runtime/helpers/asyncToGenerator"
     const l = require("@babel/runtime/helpers/asyncToGenerator");
     var u =  e.n(l);
-    // CONCATENATED MODULE: external "@babel/runtime/regenerator"
-    const c = require("@babel/runtime/regenerator");
+    // CONCATENATED MODULE: external "@babel/runtime/helpers/taggedTemplateLiteral"
+    const c = require("@babel/runtime/helpers/taggedTemplateLiteral");
     var d =  e.n(c);
-    // CONCATENATED MODULE: external "react"
-    const s = require("react");
+    // CONCATENATED MODULE: external "@babel/runtime/regenerator"
+    const s = require("@babel/runtime/regenerator");
     var p =  e.n(s);
-    // CONCATENATED MODULE: external "scriptjs"
-    const v = require("scriptjs");
+    // CONCATENATED MODULE: external "react"
+    const v = require("react");
     var f =  e.n(v);
+    // CONCATENATED MODULE: external "scriptjs"
+    const m = require("scriptjs");
+    var h =  e.n(m);
+    // CONCATENATED MODULE: external "styled-components"
+    const b = require("styled-components");
+    var y =  e.n(b);
     // CONCATENATED MODULE: external "@splunk/react-ui/Layer"
-    const h = require("@splunk/react-ui/Layer");
+    const g = require("@splunk/react-ui/Layer");
     // CONCATENATED MODULE: external "@splunk/splunk-utils/url"
-    const m = require("@splunk/splunk-utils/url");
+    const k = require("@splunk/splunk-utils/url");
     // CONCATENATED MODULE: external "@splunk/themes/SplunkThemeProvider"
-    const b = require("@splunk/themes/SplunkThemeProvider");
-    var y =  e.n(b);
+    const w = require("@splunk/themes/SplunkThemeProvider");
+    var j =  e.n(w);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const S = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/ui-utils/boolean"
-    const g = require("@splunk/ui-utils/boolean");
+    const E = require("@splunk/ui-utils/boolean");
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const k = require("@splunk/ui-utils/i18n");
+    const O = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/splunk-utils/fetch"
-    const w = require("@splunk/splunk-utils/fetch");
+    const q = require("@splunk/splunk-utils/fetch");
     // CONCATENATED MODULE: external "prop-types"
-    const j = require("prop-types");
-    var S =  e.n(j);
+    const C = require("prop-types");
+    var x =  e.n(C);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const E = require("@splunk/react-ui/ScreenReaderContent");
-    var O =  e.n(E);
-    // CONCATENATED MODULE: external "@babel/runtime/helpers/taggedTemplateLiteral"
-    const q = require("@babel/runtime/helpers/taggedTemplateLiteral");
-    var x =  e.n(q);
-    // CONCATENATED MODULE: external "styled-components"
-    const C = require("styled-components");
-    var B =  e.n(C);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const P = require("@splunk/themes");
+    const B = require("@splunk/react-ui/ScreenReaderContent");
+    var P =  e.n(B);
     // CONCATENATED MODULE: ./src/LoadingStyles.js
     function L() {
-        var e = x()([ "\n    animation-name: ", ";\n    animation-duration: 1.4s;\n    animation-iteration-count: infinite;\n    animation-fill-mode: both;\n    background-color: ", ";\n    width: 10px;\n    height: 10px;\n    border-radius: 5px;\n    display: inline-block;\n    margin-right: ", ";\n\n    &:nth-child(2) {\n        animation-delay: 0.2s;\n    }\n\n    &:nth-child(3) {\n        animation-delay: 0.4s;\n    }\n" ]);
+        var e = d()([ "\n    animation-name: ", ";\n    animation-duration: 1.4s;\n    animation-iteration-count: infinite;\n    animation-fill-mode: both;\n    background-color: ", ";\n    width: 10px;\n    height: 10px;\n    border-radius: 5px;\n    display: inline-block;\n    margin-right: ", ";\n\n    &:nth-child(2) {\n        animation-delay: 0.2s;\n    }\n\n    &:nth-child(3) {\n        animation-delay: 0.4s;\n    }\n" ]);
         L = function n() {
             return e;
         };
         return e;
     }
     function _() {
-        var e = x()([ "\n    color: ", ";\n    padding-top: 30vh;\n    text-align: center;\n    min-height: 400px;\n" ]);
+        var e = d()([ "\n    color: ", ";\n    padding-top: 30vh;\n    text-align: center;\n    min-height: 400px;\n" ]);
         _ = function n() {
             return e;
         };
         return e;
     }
     function T() {
-        var e = x()([ "\n    background-color: ", ";\n    min-height: ", "px;\n" ]);
+        var e = d()([ "\n    background-color: ", ";\n    min-height: ", "px;\n" ]);
         T = function n() {
             return e;
         };
         return e;
     }
     function F() {
-        var e = x()([ "\n    padding: 0;\n    background-color: ", ";\n    height: ", "px;\n" ]);
+        var e = d()([ "\n    padding: 0;\n    background-color: ", ";\n    height: ", "px;\n" ]);
         F = function n() {
             return e;
         };
         return e;
     }
     function A() {
-        var e = x()([ "\n    background-color: ", ";\n    position: fixed;\n    opacity: 1;\n    z-index: 10000;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n" ]);
+        var e = d()([ "\n    background-color: ", ";\n    position: fixed;\n    opacity: 1;\n    z-index: 10000;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n" ]);
         A = function n() {
             return e;
         };
         return e;
     }
     function D() {
-        var e = x()([ "\n    0% {\n        opacity: 0.2;\n    }\n\n    20% {\n        opacity: 1;\n    }\n\n    100% {\n        opacity: 0.2;\n    }\n" ]);
+        var e = d()([ "\n    0% {\n        opacity: 0.2;\n    }\n\n    20% {\n        opacity: 1;\n    }\n\n    100% {\n        opacity: 0.2;\n    }\n" ]);
         D = function n() {
             return e;
         };
         return e;
     }
-    var R = 45;
-    var G = 34;
-    var H = (0, C.keyframes)(D());
-    var M = B().div(A(), P.variables.backgroundColorPage);
-    var z = B().div(F(), (0, P.pick)({
-        prisma: P.variables.backgroundColorSection,
-        enterprise: P.variables.gray20
-    }), G);
-    var U = B().div(T(), (0, P.pick)({
-        prisma: P.variables.backgroundColorPopup,
-        enterprise: P.variables.gray30
+    var G = 45;
+    var R = 34;
+    var H = (0, b.keyframes)(D());
+    var M = y().div(A(), S.variables.backgroundColorPage);
+    var z = y().div(F(), (0, S.pick)({
+        prisma: S.variables.backgroundColorSection,
+        enterprise: S.variables.gray20
     }), R);
-    var I = B().div(_(), P.variables.contentColorInverted);
-    var W = B().div(L(), H, P.variables.neutral500, (0, P.pick)({
-        prisma: P.variables.spacingMedium,
-        enterprise: P.variables.spacingSmall
+    var U = y().div(T(), (0, S.pick)({
+        prisma: S.variables.backgroundColorPopup,
+        enterprise: S.variables.gray30
+    }), G);
+    var I = y().div(_(), S.variables.contentColorInverted);
+    var W = y().div(L(), H, S.variables.neutral500, (0, S.pick)({
+        prisma: S.variables.spacingMedium,
+        enterprise: S.variables.spacingSmall
     }));
     // CONCATENATED MODULE: ./src/Loading.jsx
     var J = {
-        hideAppBar: S().bool,
-        hideChrome: S().bool,
-        hideSplunkBar: S().bool,
-        AppBarFallback: S().elementType,
-        SplunkBarFallback: S().elementType
+        hideAppBar: x().bool,
+        hideChrome: x().bool,
+        hideSplunkBar: x().bool,
+        AppBarFallback: x().elementType,
+        SplunkBarFallback: x().elementType
     };
     function K(e) {
         var n = e.AppBarFallback, r = n === void 0 ? U : n, t = e.hideAppBar, a = e.hideChrome, o = e.hideSplunkBar, i = e.SplunkBarFallback, l = i === void 0 ? z : i;
         
-        return p().createElement(M, null, !a && !o &&  p().createElement(l, null), !a && !t &&  p().createElement(r, null),  p().createElement(I, null,  p().createElement(W, null),  p().createElement(W, null),  p().createElement(W, null),  p().createElement(O(), null, (0, 
-        k._)("Loading"))));
+        return f().createElement(M, null, !a && !o &&  f().createElement(l, null), !a && !t &&  f().createElement(r, null),  f().createElement(I, null,  f().createElement(W, null),  f().createElement(W, null),  f().createElement(W, null),  f().createElement(P(), null, (0, 
+        O._)("Loading"))));
     }
     K.propTypes = J;
     /* harmony default export */    const N = K;
@@ -208,19 +208,27 @@
         }
         return e;
     }
-    var X = function e() {
-        return fetch((0, m.createRESTURL)("web-features?output_mode=json", {
+    function X() {
+        var e = d()([ "\n    body {\n        background-color: ", ";\n    }\n" ]);
+        X = function n() {
+            return e;
+        };
+        return e;
+    }
+    var Y = (0, b.createGlobalStyle)(X(), S.variables.backgroundColorPage);
+    var Z = function e() {
+        return fetch((0, k.createRESTURL)("web-features?output_mode=json", {
             app: "-",
             owner: "-",
             sharing: "system"
-        })).then((0, w.handleResponse)(200))["catch"]((0, w.handleError)((0, k._)("failed to get web features")));
+        })).then((0, q.handleResponse)(200))["catch"]((0, q.handleError)((0, O._)("failed to get web features")));
     };
-    var Y = "feature:modern-nav";
-    var Z =  function() {
-        var e = u()( d().mark((function e(n) {
+    var $ = "feature:modern-nav";
+    var ee =  function() {
+        var e = u()( p().mark((function e(n) {
             var r, t;
             var a, o;
-            return d().wrap((function e(i) {
+            return p().wrap((function e(i) {
                 while (1) {
                     switch (i.prev = i.next) {
                       case 0:
@@ -232,14 +240,14 @@
 
                       case 2:
                         i.next = 4;
-                        return X();
+                        return Z();
 
                       case 4:
                         a = i.sent;
                         o = a.entry.find((function(e) {
-                            return e.name === Y;
+                            return e.name === $;
                         }));
-                        return i.abrupt("return", (r = (0, g.normalizeBoolean)(o === null || o === void 0 ? void 0 : (t = o.content) === null || t === void 0 ? void 0 : t.enable_nav_vnext)) !== null && r !== void 0 ? r : false);
+                        return i.abrupt("return", (r = (0, E.normalizeBoolean)(o === null || o === void 0 ? void 0 : (t = o.content) === null || t === void 0 ? void 0 : t.enable_nav_vnext)) !== null && r !== void 0 ? r : false);
 
                       case 7:
                       case "end":
@@ -252,10 +260,10 @@
             return e.apply(this, arguments);
         };
     }();
-    var $ = "build/api/layout.js";
-    var ee = "build/api/layout-dark.js";
-    var ne = "build/api/layout-modern-nav.js";
-    var re = 'header[data-view="splunkjs/mvc/headerview"]';
+    var ne = "build/api/layout.js";
+    var re = "build/api/layout-dark.js";
+    var te = "build/api/layout-modern-nav.js";
+    var ae = 'header[data-view="splunkjs/mvc/headerview"]';
     /**
  * Loads the layout from the server, using requirejs if available on the window and scriptjs if not.
  *
@@ -263,18 +271,18 @@
  * @param {object} [options]
  * @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
  * @private
- */    function te(e, n, r) {
+ */    function oe(e, n, r) {
         var t = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}, a = t.loader, o = a === void 0 ? "scriptjs" : a;
-        Z(n).then((function(n) {
+        ee(n).then((function(n) {
             var t;
             if (n) {
-                t = ne;
+                t = te;
             } else {
-                t = e === "dark" ? ee : $;
+                t = e === "dark" ? re : ne;
             }
-            var a = (0, m.createStaticURL)(t);
+            var a = (0, k.createStaticURL)(t);
             if (o === "scriptjs") {
-                f()(a, (function() {
+                h()(a, (function() {
                     // eslint-disable-next-line no-underscore-dangle
                     r(window.__splunk_layout__);
                 }));
@@ -295,7 +303,7 @@
  * @param {HTMLDivElement} headerContainer
  * @param {object} [options]
  * @private
- */    function ae(e) {
+ */    function ie(e) {
         var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         var r = n.hideSplunkBar, t = n.hideAppBar, a = n.headerHeight;
         var o = e.children[0];
@@ -310,7 +318,7 @@
         }
         return i;
     }
-    function oe(e) {
+    function le(e) {
         var n = e.navLayout, r = e.baseOptions, t = e.additionalOptions;
         return n === "auto" ? V(V({}, r), t) : r;
     }
@@ -323,10 +331,10 @@
  * @param {boolean} useGlobalLayerStack
  * @param {object} splunkTheme
  * @private
- */    function ie(e, n, r) {
+ */    function ue(e, n, r) {
         var t = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
         var a = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
-        var o = t ?  p().createElement(h.LayerStackGlobalProvider, null,  p().createElement(y(), a, e)) :  p().createElement(y(), a, e);
+        var o = t ?  f().createElement(g.LayerStackGlobalProvider, null,  f().createElement(j(), a,  f().createElement(Y, null), e)) :  f().createElement(j(), a,  f().createElement(Y, null), e);
         return n(o, r);
     }
     /**
@@ -346,7 +354,7 @@
  * @param {string} [options.layout = 'scrolling'] - Set to `fixed` to fix all navigation bars
  * to the edge of the page.
  * @param {Boolean} [options.useGlobalLayerStack = true] - Wraps elements in @splunk/react-ui's LayerStackGlobalProvider.
- * @private {Boolean} [options.navLayout = 'classic'] - Used to determine layout asset to load. Ex. "classic" or "auto".
+ * @param {Boolean} [options.navLayout = 'classic'] - Used to determine layout asset to load. Ex. "classic" or "auto".
  * @param {String} [options.theme = 'light'] - Used to theme UI elements. Ex. "light" or "dark".
  * @param {String} [options.themeFamily = 'enterprise'] - Ex. Theme family to use for UI elements. Ex. "enterprise" or "prisma".
  * @param {String} [options.themeDensity] - Ex. Theme density to use for UI elements. Ex. "compact" or "comfortable".
@@ -356,67 +364,67 @@
  * @param {element} [options.SplunkBarFallback = SplunkBar] - A React element used as a placeholder for the splunk bar while the navigation bar is loading.
  * @param {element} [options.AppBarFallback = AppBar] - A React element used as a placeholder for the app bar while the navigation bar is loading.
  * @param {function} [options.onLayoutComplete] - A callback function which executes after layout API is fetched and compiled.
- */    function le(e, n) {
+ */    function ce(e, n) {
         var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-        var t = r.useGlobalLayerStack, o = t === void 0 ? true : t, i = r.pageTitle, l = r.theme, u = l === void 0 ? "light" : l, c = r.themeDensity, d = r.loader, s = d === void 0 ? "scriptjs" : d, v = a()(r, [ "useGlobalLayerStack", "pageTitle", "theme", "themeDensity", "loader" ]);
+        var t = r.useGlobalLayerStack, o = t === void 0 ? true : t, i = r.pageTitle, l = r.theme, u = l === void 0 ? "light" : l, c = r.themeDensity, d = r.loader, s = d === void 0 ? "scriptjs" : d, p = a()(r, [ "useGlobalLayerStack", "pageTitle", "theme", "themeDensity", "loader" ]);
         if (i) {
             document.title = i;
         }
-        var f = v.hideChrome, h = v.themeFamily, m = h === void 0 ? "enterprise" : h, b = v.hideAppBar, g = v.hideSplunkBar, k = v.SplunkBarFallback, w = k === void 0 ? z : k, j = v.AppBarFallback, S = j === void 0 ? U : j, E = v.lazyLoadLayout, O = E === void 0 ? false : E, q = v.onLayoutComplete, x = v.onLayoutStart, C = v.navLayout, B = C === void 0 ? "classic" : C;
+        var v = p.hideChrome, m = p.themeFamily, h = m === void 0 ? "enterprise" : m, b = p.hideAppBar, y = p.hideSplunkBar, g = p.SplunkBarFallback, k = g === void 0 ? z : g, w = p.AppBarFallback, S = w === void 0 ? U : w, E = p.lazyLoadLayout, O = E === void 0 ? false : E, q = p.onLayoutComplete, C = p.onLayoutStart, x = p.navLayout, B = x === void 0 ? "classic" : x;
         var P = document.createElement("div");
         var L = document.createElement("div");
-        x === null || x === void 0 ? void 0 : x({
+        C === null || C === void 0 ? void 0 : C({
             headerContainer: L,
             bodyContainer: P
         });
         // The "theme" in enterprise used to be "enterprise" instead of "light"...
                 var _ = u === "light" || u === "enterprise" ? "light" : "dark";
         var T = {
-            family: m,
+            family: h,
             colorScheme: _,
-            density: c || (m === "prisma" ? "compact" : "comfortable")
+            density: c || (h === "prisma" ? "compact" : "comfortable")
         };
         var F;
         var A;
-        if (v.navLayout === "auto") {
+        if (p.navLayout === "auto") {
             P.style.flexGrow = "1";
         }
         if (O) {
             // render the React app immediately without waiting for layout API
-            if (!f) {
+            if (!v) {
                 document.body.appendChild(L);
-                A = n( p().createElement(p().Fragment, null, !g &&  p().createElement(w, null), !b &&  p().createElement(S, null)), L);
+                A = n( f().createElement(f().Fragment, null, !y &&  f().createElement(k, null), !b &&  f().createElement(S, null)), L);
                 // explicitly set height and background of header container to avoid layout and color shift when fallback gets replaced
                                 var D = L.offsetHeight;
-                var H = ae(L, {
-                    hideSplunkBar: g,
+                var H = ie(L, {
+                    hideSplunkBar: y,
                     hideAppBar: b,
                     headerHeight: D,
                     AppBarFallback: S,
-                    SplunkBarFallback: w
+                    SplunkBarFallback: k
                 });
                 L.style.height = "".concat(D, "px");
                 L.style.background = "".concat(H);
             }
             document.body.appendChild(P);
-            F = ie(e, n, P, o, T);
+            F = ue(e, n, P, o, T);
         } else {
             document.body.appendChild(P);
-            F = n( p().createElement(y(), T,  p().createElement(N, v)), P);
+            F = n( f().createElement(j(), T,  f().createElement(Y, null),  f().createElement(N, p)), P);
         }
-        te(u, B, (function(r) {
+        oe(u, B, (function(r) {
             var t;
             if (r) {
-                var a = oe({
+                var a = le({
                     navLayout: B,
-                    baseOptions: v,
+                    baseOptions: p,
                     additionalOptions: {
                         theme: u,
-                        themeFamily: m
+                        themeFamily: h
                     }
                 });
                 t = r.create(a).getContainerElement();
-                if (v.layout === "fixed") {
+                if (p.layout === "fixed") {
                     // the above create method adds flex: 1 0 0
                     // IE 11 disregards 0px shorthand for flex-basis component.
                     // flex-basis 0% is better than 0px because css minification can remove px
@@ -441,11 +449,11 @@
                 document.body.appendChild(t);
             }
             if (O) {
-                if (!f) {
+                if (!v) {
                     // replace placeholder nav bar with real nav bar
                     A.unmount(L);
-                    var i = document.querySelector(re);
-                    var l = (!f && !g ? G : 0) + (!f && !b ? R : 0);
+                    var i = document.querySelector(ae);
+                    var l = (!v && !y ? R : 0) + (!v && !b ? G : 0);
                     // set a min-height for basic nav bar components and auto height for any additional components like global banner
                                         L.style.minHeight = "".concat(l, "px");
                     L.style.height = "auto";
@@ -456,7 +464,7 @@
             } else {
                 setTimeout((function() {
                     F.unmount(P);
-                    F = ie(e, n, P, o, T);
+                    F = ue(e, n, P, o, T);
                     t.appendChild(P);
                     q === null || q === void 0 ? void 0 : q();
                 }), 30);
@@ -465,9 +473,9 @@
             loader: s
         });
     }
-    /* harmony default export */    const ue = le;
+    /* harmony default export */    const de = ce;
     // CONCATENATED MODULE: ./src/18.jsx
-    var ce = function e(n, t) {
+    var se = function e(n, t) {
         var a = (0, r.createRoot)(t);
         a.render(n);
         return a;
@@ -495,9 +503,9 @@
  * @param {element} [options.SplunkBarFallback = SplunkBar] - A React element used as a placeholder for the splunk bar while the navigation bar is loading.
  * @param {element} [options.AppBarFallback = AppBar] - A React element used as a placeholder for the app bar while the navigation bar is loading.
  * @param {function} [options.onLayoutComplete] - A callback function which executes after layout API is fetched and compiled.
- */    function de(e, n) {
-        ue(e, ce, n);
+ */    function pe(e, n) {
+        de(e, se, n);
     }
-    /* harmony default export */    const se = de;
+    /* harmony default export */    const ve = pe;
     module.exports = n;
     /******/})();

package/CHANGELOG.md

@@ -1,6 +1,16 @@
 Change Log
 ============
 
+8.2.1 - February 10, 2026
+----------
+Bug Fixes:
+* `layout` now sets the page's background color to match the current color scheme (SUI-7503).
+
+8.2.0 - January 8, 2025
+----------
+New Features:
+* Added a new `options.navLayout` parameter.
+
 8.2.0-beta.1 - October 14, 2025
 ----------
 * No public API changes.

package/baseLayout.d.ts

@@ -16,7 +16,7 @@ export default layout;
  * @param {string} [options.layout = 'scrolling'] - Set to `fixed` to fix all navigation bars
  * to the edge of the page.
  * @param {Boolean} [options.useGlobalLayerStack = true] - Wraps elements in @splunk/react-ui's LayerStackGlobalProvider.
- * @private {Boolean} [options.navLayout = 'classic'] - Used to determine layout asset to load. Ex. "classic" or "auto".
+ * @param {Boolean} [options.navLayout = 'classic'] - Used to determine layout asset to load. Ex. "classic" or "auto".
  * @param {String} [options.theme = 'light'] - Used to theme UI elements. Ex. "light" or "dark".
  * @param {String} [options.themeFamily = 'enterprise'] - Ex. Theme family to use for UI elements. Ex. "enterprise" or "prisma".
  * @param {String} [options.themeDensity] - Ex. Theme density to use for UI elements. Ex. "compact" or "comfortable".

package/cypress.config.js

@@ -1,6 +1,8 @@
 /* eslint-env node */
 const { defineConfig } = require('cypress');
 
+const port = process.env.DOCKER_SPLUNK_PORT || 8000;
+
 module.exports = defineConfig({
     env: {},
     defaultCommandTimeout: 1000,
@@ -15,7 +17,7 @@ module.exports = defineConfig({
                 }
             });
         },
-        baseUrl: 'http://localhost:8000',
+        baseUrl: `http://localhost:${port}`,
         specPattern: 'src/tests/**.spec.js',
     },
 });

package/index.js

@@ -63,7 +63,7 @@
         e.d(n, {
         AppBar: () => /* reexport */ g,
         SplunkBar: () => /* reexport */ y,
-        default: () => /* binding */ se
+        default: () => /* binding */ ve
     });
     // CONCATENATED MODULE: external "react-dom"
     const r = require("react-dom");
@@ -210,15 +210,23 @@
         }
         return e;
     }
-    var X = function e() {
+    function X() {
+        var e = a()([ "\n    body {\n        background-color: ", ";\n    }\n" ]);
+        X = function n() {
+            return e;
+        };
+        return e;
+    }
+    var Y = (0, o.createGlobalStyle)(X(), l.variables.backgroundColorPage);
+    var Z = function e() {
         return fetch((0, F.createRESTURL)("web-features?output_mode=json", {
             app: "-",
             owner: "-",
             sharing: "system"
         })).then((0, R.handleResponse)(200))["catch"]((0, R.handleError)((0, M._)("failed to get web features")));
     };
-    var Y = "feature:modern-nav";
-    var Z =  function() {
+    var $ = "feature:modern-nav";
+    var ee =  function() {
         var e = C()( B().mark((function e(n) {
             var r, t;
             var a, o;
@@ -234,12 +242,12 @@
 
                       case 2:
                         i.next = 4;
-                        return X();
+                        return Z();
 
                       case 4:
                         a = i.sent;
                         o = a.entry.find((function(e) {
-                            return e.name === Y;
+                            return e.name === $;
                         }));
                         return i.abrupt("return", (r = (0, H.normalizeBoolean)(o === null || o === void 0 ? void 0 : (t = o.content) === null || t === void 0 ? void 0 : t.enable_nav_vnext)) !== null && r !== void 0 ? r : false);
 
@@ -254,10 +262,10 @@
             return e.apply(this, arguments);
         };
     }();
-    var $ = "build/api/layout.js";
-    var ee = "build/api/layout-dark.js";
-    var ne = "build/api/layout-modern-nav.js";
-    var re = 'header[data-view="splunkjs/mvc/headerview"]';
+    var ne = "build/api/layout.js";
+    var re = "build/api/layout-dark.js";
+    var te = "build/api/layout-modern-nav.js";
+    var ae = 'header[data-view="splunkjs/mvc/headerview"]';
     /**
  * Loads the layout from the server, using requirejs if available on the window and scriptjs if not.
  *
@@ -265,14 +273,14 @@
  * @param {object} [options]
  * @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
  * @private
- */    function te(e, n, r) {
+ */    function oe(e, n, r) {
         var t = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}, a = t.loader, o = a === void 0 ? "scriptjs" : a;
-        Z(n).then((function(n) {
+        ee(n).then((function(n) {
             var t;
             if (n) {
-                t = ne;
+                t = te;
             } else {
-                t = e === "dark" ? ee : $;
+                t = e === "dark" ? re : ne;
             }
             var a = (0, F.createStaticURL)(t);
             if (o === "scriptjs") {
@@ -297,7 +305,7 @@
  * @param {HTMLDivElement} headerContainer
  * @param {object} [options]
  * @private
- */    function ae(e) {
+ */    function ie(e) {
         var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         var r = n.hideSplunkBar, t = n.hideAppBar, a = n.headerHeight;
         var o = e.children[0];
@@ -312,7 +320,7 @@
         }
         return i;
     }
-    function oe(e) {
+    function le(e) {
         var n = e.navLayout, r = e.baseOptions, t = e.additionalOptions;
         return n === "auto" ? V(V({}, r), t) : r;
     }
@@ -325,10 +333,10 @@
  * @param {boolean} useGlobalLayerStack
  * @param {object} splunkTheme
  * @private
- */    function ie(e, n, r) {
+ */    function ue(e, n, r) {
         var t = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
         var a = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
-        var o = t ?  L().createElement(A.LayerStackGlobalProvider, null,  L().createElement(G(), a, e)) :  L().createElement(G(), a, e);
+        var o = t ?  L().createElement(A.LayerStackGlobalProvider, null,  L().createElement(G(), a,  L().createElement(Y, null), e)) :  L().createElement(G(), a,  L().createElement(Y, null), e);
         return n(o, r);
     }
     /**
@@ -348,7 +356,7 @@
  * @param {string} [options.layout = 'scrolling'] - Set to `fixed` to fix all navigation bars
  * to the edge of the page.
  * @param {Boolean} [options.useGlobalLayerStack = true] - Wraps elements in @splunk/react-ui's LayerStackGlobalProvider.
- * @private {Boolean} [options.navLayout = 'classic'] - Used to determine layout asset to load. Ex. "classic" or "auto".
+ * @param {Boolean} [options.navLayout = 'classic'] - Used to determine layout asset to load. Ex. "classic" or "auto".
  * @param {String} [options.theme = 'light'] - Used to theme UI elements. Ex. "light" or "dark".
  * @param {String} [options.themeFamily = 'enterprise'] - Ex. Theme family to use for UI elements. Ex. "enterprise" or "prisma".
  * @param {String} [options.themeDensity] - Ex. Theme density to use for UI elements. Ex. "compact" or "comfortable".
@@ -358,7 +366,7 @@
  * @param {element} [options.SplunkBarFallback = SplunkBar] - A React element used as a placeholder for the splunk bar while the navigation bar is loading.
  * @param {element} [options.AppBarFallback = AppBar] - A React element used as a placeholder for the app bar while the navigation bar is loading.
  * @param {function} [options.onLayoutComplete] - A callback function which executes after layout API is fetched and compiled.
- */    function le(e, n) {
+ */    function ce(e, n) {
         var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
         var t = r.useGlobalLayerStack, a = t === void 0 ? true : t, o = r.pageTitle, i = r.theme, l = i === void 0 ? "light" : i, u = r.themeDensity, c = r.loader, d = c === void 0 ? "scriptjs" : c, s = S()(r, [ "useGlobalLayerStack", "pageTitle", "theme", "themeDensity", "loader" ]);
         if (o) {
@@ -390,7 +398,7 @@
                 M = n( L().createElement(L().Fragment, null, !k &&  L().createElement(j, null), !b &&  L().createElement(O, null)), A);
                 // explicitly set height and background of header container to avoid layout and color shift when fallback gets replaced
                                 var R = A.offsetHeight;
-                var z = ae(A, {
+                var z = ie(A, {
                     hideSplunkBar: k,
                     hideAppBar: b,
                     headerHeight: R,
@@ -401,15 +409,15 @@
                 A.style.background = "".concat(z);
             }
             document.body.appendChild(T);
-            H = ie(e, n, T, a, D);
+            H = ue(e, n, T, a, D);
         } else {
             document.body.appendChild(T);
-            H = n( L().createElement(G(), D,  L().createElement(K, s)), T);
+            H = n( L().createElement(G(), D,  L().createElement(Y, null),  L().createElement(K, s)), T);
         }
-        te(l, _, (function(r) {
+        oe(l, _, (function(r) {
             var t;
             if (r) {
-                var o = oe({
+                var o = le({
                     navLayout: _,
                     baseOptions: s,
                     additionalOptions: {
@@ -446,7 +454,7 @@
                 if (!p) {
                     // replace placeholder nav bar with real nav bar
                     M.unmount(A);
-                    var i = document.querySelector(re);
+                    var i = document.querySelector(ae);
                     var u = (!p && !k ? m : 0) + (!p && !b ? f : 0);
                     // set a min-height for basic nav bar components and auto height for any additional components like global banner
                                         A.style.minHeight = "".concat(u, "px");
@@ -458,7 +466,7 @@
             } else {
                 setTimeout((function() {
                     H.unmount(T);
-                    H = ie(e, n, T, a, D);
+                    H = ue(e, n, T, a, D);
                     t.appendChild(T);
                     x === null || x === void 0 ? void 0 : x();
                 }), 30);
@@ -467,9 +475,9 @@
             loader: d
         });
     }
-    /* harmony default export */    const ue = le;
+    /* harmony default export */    const de = ce;
     // CONCATENATED MODULE: ./src/index.jsx
-    var ce = function e(n, t) {
+    var se = function e(n, t) {
         (0, r.render)(n, t);
         return {
             unmount: function e() {
@@ -503,9 +511,9 @@
  * @param {element} [options.AppBarFallback = AppBar] - A React element used as a placeholder for the app bar while the navigation bar is loading.
  * @param {function} [options.onLayoutComplete] - A callback function which executes after layout API is fetched and compiled.
  * @param {function} [options.onLayoutStart] - A callback function which executes once the layout starts to render
- */    function de(e, n) {
-        ue(e, ce, n);
+ */    function pe(e, n) {
+        de(e, se, n);
     }
-    /* harmony default export */    const se = de;
+    /* harmony default export */    const ve = pe;
     module.exports = n;
     /******/})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-page",
-  "version": "8.2.0-beta.1",
+  "version": "8.2.1",
   "description": "Load React components into the latest layout from Splunk Enterprise",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -19,16 +19,16 @@
     "lint:ci": "yarn run eslint:ci && yarn run stylelint",
     "start": "cross-env NODE_ENV=development webpack --watch",
     "stylelint": "stylelint \"src/**/*.{js,jsx}\" --config stylelint.config.js",
-    "test:cypress": "node src/tests/run-cypress-tests.js 8.0.3",
+    "test:cypress": "DOCKER_SPLUNK_VERSION=10.0.0 node src/tests/run-cypress-tests.js",
     "test:cypress:ci": "node src/tests/run-cypress-tests.js",
     "types:build": "tsc",
     "types:start": "yarn types:build --watch"
   },
   "dependencies": {
-    "@splunk/react-ui": "^5.4.0",
-    "@splunk/splunk-utils": "^3.3.0",
-    "@splunk/themes": "^1.3.0",
-    "@splunk/ui-utils": "^1.11.0",
+    "@splunk/react-ui": "^5.8.0",
+    "@splunk/splunk-utils": "^3.4.0",
+    "@splunk/themes": "^1.5.0",
+    "@splunk/ui-utils": "^1.12.0",
     "prop-types": "^15.6.2",
     "scriptjs": "^2.5.8"
   },
@@ -38,9 +38,9 @@
     "@babel/plugin-transform-runtime": "^7.28.3",
     "@splunk/babel-preset": "^4.0.0",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "^1.4.0",
+    "@splunk/react-docs": "^1.5.1",
     "@splunk/stylelint-config": "^5.0.0",
-    "@splunk/webpack-configs": "^7.0.2",
+    "@splunk/webpack-configs": "^7.0.3",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-imports": "^2.0.0",
     "cross-env": "^6.0.3",