@splunk/react-page 8.0.0-beta.2 → 8.0.0-beta.4

package/18.js

@@ -79,21 +79,21 @@
     const c = require("@splunk/themes/SplunkThemeProvider");
     var d =  e.n(c);
     // CONCATENATED MODULE: external "styled-components"
-    const p = require("styled-components");
-    var s =  e.n(p);
+    const s = require("styled-components");
+    var p =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/themes"
     const v = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/LoadingStyles.js
-    function f() {
+    function m() {
         var e = k([ "\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" ]);
-        f = function n() {
+        m = function n() {
             return e;
         };
         return e;
     }
-    function m() {
+    function f() {
         var e = k([ "\n    color: ", ";\n    padding-top: 30vh;\n    text-align: center;\n    min-height: 400px;\n" ]);
-        m = function n() {
+        f = function n() {
             return e;
         };
         return e;
@@ -105,16 +105,16 @@
         };
         return e;
     }
-    function b() {
+    function y() {
         var e = k([ "\n    padding: 0;\n    background-color: ", ";\n    height: ", "px;\n" ]);
-        b = function n() {
+        y = function n() {
             return e;
         };
         return e;
     }
-    function y() {
+    function b() {
         var e = k([ "\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" ]);
-        y = function n() {
+        b = function n() {
             return e;
         };
         return e;
@@ -135,18 +135,18 @@
     }
     var S = 45;
     var w = 34;
-    var E = (0, p.keyframes)(g());
-    var j = s().div(y(), v.variables.backgroundColorPage);
-    var C = s().div(b(), (0, v.pick)({
+    var E = (0, s.keyframes)(g());
+    var j = p().div(b(), v.variables.backgroundColorPage);
+    var C = p().div(y(), (0, v.pick)({
         prisma: v.variables.backgroundColorSection,
         enterprise: v.variables.gray20
     }), w);
-    var q = s().div(h(), (0, v.pick)({
+    var q = p().div(h(), (0, v.pick)({
         prisma: v.variables.backgroundColorPopup,
         enterprise: v.variables.gray30
     }), S);
-    var x = s().div(m(), v.variables.contentColorInverted);
-    var B = s().div(f(), E, v.variables.neutral500, (0, v.pick)({
+    var x = p().div(f(), v.variables.contentColorInverted);
+    var B = p().div(m(), E, v.variables.neutral500, (0, v.pick)({
         prisma: v.variables.spacingMedium,
         enterprise: v.variables.spacingSmall
     }));
@@ -154,12 +154,12 @@
     const O = require("prop-types");
     var P =  e.n(O);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const L = require("@splunk/react-ui/ScreenReaderContent");
-    var _ =  e.n(L);
+    const F = require("@splunk/react-ui/ScreenReaderContent");
+    var L =  e.n(F);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const A = require("@splunk/ui-utils/i18n");
+    const _ = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: ./src/Loading.jsx
-    var F = {
+    var A = {
         hideAppBar: P().bool,
         hideChrome: P().bool,
         hideSplunkBar: P().bool,
@@ -169,10 +169,10 @@
     function T(e) {
         var n = e.AppBarFallback, r = n === void 0 ? q : n, t = e.hideAppBar, i = e.hideChrome, o = e.hideSplunkBar, l = e.SplunkBarFallback, u = l === void 0 ? C : l;
         
-        return a().createElement(j, null, !i && !o &&  a().createElement(u, null), !i && !t &&  a().createElement(r, null),  a().createElement(x, null,  a().createElement(B, null),  a().createElement(B, null),  a().createElement(B, null),  a().createElement(_(), null, (0, 
-        A._)("Loading"))));
+        return a().createElement(j, null, !i && !o &&  a().createElement(u, null), !i && !t &&  a().createElement(r, null),  a().createElement(x, null,  a().createElement(B, null),  a().createElement(B, null),  a().createElement(B, null),  a().createElement(L(), null, (0, 
+        _._)("Loading"))));
     }
-    T.propTypes = F;
+    T.propTypes = A;
     /* harmony default export */    const H = T;
     // CONCATENATED MODULE: ./src/baseLayout.jsx
     function M(e, n) {
@@ -207,7 +207,7 @@
  * @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 U(e, n) {
+ */    function D(e, n) {
         var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}, t = r.loader, a = t === void 0 ? "scriptjs" : t;
         var i = e === "dark" ? I : G;
         var l = (0, u.createStaticURL)(i);
@@ -232,7 +232,7 @@
  * @param {HTMLDivElement} headerContainer
  * @param {object} [options]
  * @private
- */    function D(e) {
+ */    function U(e) {
         var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         var r = n.hideSplunkBar, t = n.hideAppBar, a = n.headerHeight;
         var i = e.children[0];
@@ -280,6 +280,8 @@
  * to the edge of the page.
  * @param {Boolean} [options.useGlobalLayerStack = true] - Wraps elements in @splunk/react-ui's LayerStackGlobalProvider.
  * @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".
  * @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
  * Change this only if the default loader does not work for your application.
  * @param {Boolean} [options.lazyLoadLayout = false] - Prioritizes loading the React element and lazily fetches and compiles the layout API (navigation bar).
@@ -288,54 +290,54 @@
  * @param {function} [options.onLayoutComplete] - A callback function which executes after layout API is fetched and compiled.
  */    function K(e, n) {
         var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-        var t = r.useGlobalLayerStack, i = t === void 0 ? true : t, o = r.pageTitle, l = r.theme, u = l === void 0 ? "light" : l, c = r.loader, p = c === void 0 ? "scriptjs" : c, s = M(r, [ "useGlobalLayerStack", "pageTitle", "theme", "loader" ]);
+        var t = r.useGlobalLayerStack, i = t === void 0 ? true : t, o = r.pageTitle, l = r.theme, u = l === void 0 ? "light" : l, c = r.themeDensity, s = r.loader, p = s === void 0 ? "scriptjs" : s, v = M(r, [ "useGlobalLayerStack", "pageTitle", "theme", "themeDensity", "loader" ]);
         if (o) {
             document.title = o;
         }
-        var v = s.hideChrome, f = s.hideAppBar, m = s.hideSplunkBar, h = s.SplunkBarFallback, b = h === void 0 ? C : h, y = s.AppBarFallback, g = y === void 0 ? q : y, k = s.lazyLoadLayout, E = k === void 0 ? false : k, j = s.onLayoutComplete, x = s.onLayoutStart;
-        var B = document.createElement("div");
-        var O = document.createElement("div");
-        x === null || x === void 0 ? void 0 : x({
-            headerContainer: O,
-            bodyContainer: B
+        var m = v.hideChrome, f = v.themeFamily, h = f === void 0 ? "enterprise" : f, y = v.hideAppBar, b = v.hideSplunkBar, g = v.SplunkBarFallback, k = g === void 0 ? C : g, E = v.AppBarFallback, j = E === void 0 ? q : E, x = v.lazyLoadLayout, B = x === void 0 ? false : x, O = v.onLayoutComplete, P = v.onLayoutStart;
+        var F = document.createElement("div");
+        var L = document.createElement("div");
+        P === null || P === void 0 ? void 0 : P({
+            headerContainer: L,
+            bodyContainer: F
         });
         // The "theme" in enterprise used to be "enterprise" instead of "light"...
-                var P = u === "light" || u === "enterprise" ? "light" : "dark";
-        var L = {
-            family: "enterprise",
-            colorScheme: P,
-            density: "comfortable"
+                var _ = u === "light" || u === "enterprise" ? "light" : "dark";
+        var A = {
+            family: h,
+            colorScheme: _,
+            density: c || (h === "prisma" ? "compact" : "comfortable")
         };
-        var _;
-        var A;
-        if (E) {
+        var T;
+        var z;
+        if (B) {
             // render the React app immediately without waiting for layout API
-            if (!v) {
-                document.body.appendChild(O);
-                A = n( a().createElement(a().Fragment, null, !m &&  a().createElement(b, null), !f &&  a().createElement(g, null)), O);
+            if (!m) {
+                document.body.appendChild(L);
+                z = n( a().createElement(a().Fragment, null, !b &&  a().createElement(k, null), !y &&  a().createElement(j, null)), L);
                 // explicitly set height and background of header container to avoid layout and color shift when fallback gets replaced
-                                var F = O.offsetHeight;
-                var T = D(O, {
-                    hideSplunkBar: m,
-                    hideAppBar: f,
-                    headerHeight: F,
-                    AppBarFallback: g,
-                    SplunkBarFallback: b
+                                var G = L.offsetHeight;
+                var I = U(L, {
+                    hideSplunkBar: b,
+                    hideAppBar: y,
+                    headerHeight: G,
+                    AppBarFallback: j,
+                    SplunkBarFallback: k
                 });
-                O.style.height = "".concat(F, "px");
-                O.style.background = "".concat(T);
+                L.style.height = "".concat(G, "px");
+                L.style.background = "".concat(I);
             }
-            document.body.appendChild(B);
-            _ = J(e, n, B, i, L);
+            document.body.appendChild(F);
+            T = J(e, n, F, i, A);
         } else {
-            document.body.appendChild(B);
-            _ = n( a().createElement(d(), L,  a().createElement(H, s)), B);
+            document.body.appendChild(F);
+            T = n( a().createElement(d(), A,  a().createElement(H, v)), F);
         }
-        U(u, (function(r) {
+        D(u, (function(r) {
             var t;
             if (r) {
-                t = r.create(s).getContainerElement();
-                if (s.layout === "fixed") {
+                t = r.create(v).getContainerElement();
+                if (v.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
@@ -359,25 +361,25 @@
                 t = document.createElement("div");
                 document.body.appendChild(t);
             }
-            if (E) {
-                if (!v) {
+            if (B) {
+                if (!m) {
                     // replace placeholder nav bar with real nav bar
-                    A.unmount(O);
+                    z.unmount(L);
                     var a = document.querySelector(R);
-                    var o = (!v && !m ? w : 0) + (!v && !f ? S : 0);
+                    var o = (!m && !b ? w : 0) + (!m && !y ? S : 0);
                     // set a min-height for basic nav bar components and auto height for any additional components like global banner
-                                        O.style.minHeight = "".concat(o, "px");
-                    O.style.height = "auto";
-                    O.appendChild(a);
+                                        L.style.minHeight = "".concat(o, "px");
+                    L.style.height = "auto";
+                    L.appendChild(a);
                 }
-                t.appendChild(B);
-                j === null || j === void 0 ? void 0 : j();
+                t.appendChild(F);
+                O === null || O === void 0 ? void 0 : O();
             } else {
                 setTimeout((function() {
-                    _.unmount(B);
-                    _ = J(e, n, B, i, L);
-                    t.appendChild(B);
-                    j === null || j === void 0 ? void 0 : j();
+                    T.unmount(F);
+                    T = J(e, n, F, i, A);
+                    t.appendChild(F);
+                    O === null || O === void 0 ? void 0 : O();
                 }), 30);
             }
         }), {

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 Change Log
 ============
 
+8.0.0-beta.4 - May 7, 2025
+----------
+* Updated dependencies.
+
+8.0.0-beta.3 - April 2, 2025
+----------
+* Includes changes from `7.2.0`.
+
+7.2.0 - April 1, 2025
+----------
+New Features:
+* Added support for `themeFamily` and `themeDensity` options (SPL-273100).
+
 8.0.0-beta.2 - March 5, 2025
 ----------
 * Public release of `8.0.0-beta.1`

package/index.js

@@ -61,8 +61,8 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
-        AppBar: () => /* reexport */ y,
-        SplunkBar: () => /* reexport */ b,
+        AppBar: () => /* reexport */ b,
+        SplunkBar: () => /* reexport */ y,
         default: () => /* binding */ W
     });
     // CONCATENATED MODULE: external "react-dom"
@@ -123,19 +123,19 @@
         }));
     }
     var v = 45;
-    var f = 34;
-    var m = (0, t.keyframes)(p());
+    var m = 34;
+    var f = (0, t.keyframes)(p());
     var h = a().div(d(), i.variables.backgroundColorPage);
-    var b = a().div(c(), (0, i.pick)({
+    var y = a().div(c(), (0, i.pick)({
         prisma: i.variables.backgroundColorSection,
         enterprise: i.variables.gray20
-    }), f);
-    var y = a().div(u(), (0, i.pick)({
+    }), m);
+    var b = a().div(u(), (0, i.pick)({
         prisma: i.variables.backgroundColorPopup,
         enterprise: i.variables.gray30
     }), v);
     var g = a().div(l(), i.variables.contentColorInverted);
-    var k = a().div(o(), m, i.variables.neutral500, (0, i.pick)({
+    var k = a().div(o(), f, i.variables.neutral500, (0, i.pick)({
         prisma: i.variables.spacingMedium,
         enterprise: i.variables.spacingSmall
     }));
@@ -157,11 +157,11 @@
     var P =  e.n(O);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
     const A = require("@splunk/react-ui/ScreenReaderContent");
-    var L =  e.n(A);
+    var F =  e.n(A);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const _ = require("@splunk/ui-utils/i18n");
+    const L = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: ./src/Loading.jsx
-    var F = {
+    var _ = {
         hideAppBar: P().bool,
         hideChrome: P().bool,
         hideSplunkBar: P().bool,
@@ -169,12 +169,12 @@
         SplunkBarFallback: P().elementType
     };
     function T(e) {
-        var n = e.AppBarFallback, r = n === void 0 ? y : n, t = e.hideAppBar, a = e.hideChrome, i = e.hideSplunkBar, o = e.SplunkBarFallback, l = o === void 0 ? b : o;
+        var n = e.AppBarFallback, r = n === void 0 ? b : n, t = e.hideAppBar, a = e.hideChrome, i = e.hideSplunkBar, o = e.SplunkBarFallback, l = o === void 0 ? y : o;
         
-        return w().createElement(h, null, !a && !i &&  w().createElement(l, null), !a && !t &&  w().createElement(r, null),  w().createElement(g, null,  w().createElement(k, null),  w().createElement(k, null),  w().createElement(k, null),  w().createElement(L(), null, (0, 
-        _._)("Loading"))));
+        return w().createElement(h, null, !a && !i &&  w().createElement(l, null), !a && !t &&  w().createElement(r, null),  w().createElement(g, null,  w().createElement(k, null),  w().createElement(k, null),  w().createElement(k, null),  w().createElement(F(), null, (0, 
+        L._)("Loading"))));
     }
-    T.propTypes = F;
+    T.propTypes = _;
     /* harmony default export */    const H = T;
     // CONCATENATED MODULE: ./src/baseLayout.jsx
     function M(e, n) {
@@ -201,7 +201,7 @@
     }
     var G = "build/api/layout.js";
     var I = "build/api/layout-dark.js";
-    var R = 'header[data-view="splunkjs/mvc/headerview"]';
+    var D = 'header[data-view="splunkjs/mvc/headerview"]';
     /**
  * Loads the layout from the server, using requirejs if available on the window and scriptjs if not.
  *
@@ -209,7 +209,7 @@
  * @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 U(e, n) {
+ */    function R(e, n) {
         var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}, t = r.loader, a = t === void 0 ? "scriptjs" : t;
         var i = e === "dark" ? I : G;
         var o = (0, B.createStaticURL)(i);
@@ -234,7 +234,7 @@
  * @param {HTMLDivElement} headerContainer
  * @param {object} [options]
  * @private
- */    function N(e) {
+ */    function U(e) {
         var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         var r = n.hideSplunkBar, t = n.hideAppBar, a = n.headerHeight;
         var i = e.children[0];
@@ -258,7 +258,7 @@
  * @param {boolean} useGlobalLayerStack
  * @param {object} splunkTheme
  * @private
- */    function D(e, n, r) {
+ */    function N(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 i = t ?  w().createElement(j.LayerStackGlobalProvider, null,  w().createElement(x(), a, e)) :  w().createElement(x(), a, e);
@@ -282,6 +282,8 @@
  * to the edge of the page.
  * @param {Boolean} [options.useGlobalLayerStack = true] - Wraps elements in @splunk/react-ui's LayerStackGlobalProvider.
  * @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".
  * @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
  * Change this only if the default loader does not work for your application.
  * @param {Boolean} [options.lazyLoadLayout = false] - Prioritizes loading the React element and lazily fetches and compiles the layout API (navigation bar).
@@ -290,54 +292,54 @@
  * @param {function} [options.onLayoutComplete] - A callback function which executes after layout API is fetched and compiled.
  */    function J(e, n) {
         var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-        var t = r.useGlobalLayerStack, a = t === void 0 ? true : t, i = r.pageTitle, o = r.theme, l = o === void 0 ? "light" : o, u = r.loader, c = u === void 0 ? "scriptjs" : u, d = M(r, [ "useGlobalLayerStack", "pageTitle", "theme", "loader" ]);
+        var t = r.useGlobalLayerStack, a = t === void 0 ? true : t, i = r.pageTitle, o = r.theme, l = o === void 0 ? "light" : o, u = r.themeDensity, c = r.loader, d = c === void 0 ? "scriptjs" : c, p = M(r, [ "useGlobalLayerStack", "pageTitle", "theme", "themeDensity", "loader" ]);
         if (i) {
             document.title = i;
         }
-        var p = d.hideChrome, s = d.hideAppBar, m = d.hideSplunkBar, h = d.SplunkBarFallback, g = h === void 0 ? b : h, k = d.AppBarFallback, S = k === void 0 ? y : k, C = d.lazyLoadLayout, E = C === void 0 ? false : C, j = d.onLayoutComplete, B = d.onLayoutStart;
-        var q = document.createElement("div");
-        var O = document.createElement("div");
-        B === null || B === void 0 ? void 0 : B({
-            headerContainer: O,
-            bodyContainer: q
+        var s = p.hideChrome, f = p.themeFamily, h = f === void 0 ? "enterprise" : f, g = p.hideAppBar, k = p.hideSplunkBar, S = p.SplunkBarFallback, C = S === void 0 ? y : S, E = p.AppBarFallback, j = E === void 0 ? b : E, B = p.lazyLoadLayout, q = B === void 0 ? false : B, O = p.onLayoutComplete, P = p.onLayoutStart;
+        var A = document.createElement("div");
+        var F = document.createElement("div");
+        P === null || P === void 0 ? void 0 : P({
+            headerContainer: F,
+            bodyContainer: A
         });
         // The "theme" in enterprise used to be "enterprise" instead of "light"...
-                var P = l === "light" || l === "enterprise" ? "light" : "dark";
-        var A = {
-            family: "enterprise",
-            colorScheme: P,
-            density: "comfortable"
+                var L = l === "light" || l === "enterprise" ? "light" : "dark";
+        var _ = {
+            family: h,
+            colorScheme: L,
+            density: u || (h === "prisma" ? "compact" : "comfortable")
         };
-        var L;
-        var _;
-        if (E) {
+        var T;
+        var z;
+        if (q) {
             // render the React app immediately without waiting for layout API
-            if (!p) {
-                document.body.appendChild(O);
-                _ = n( w().createElement(w().Fragment, null, !m &&  w().createElement(g, null), !s &&  w().createElement(S, null)), O);
+            if (!s) {
+                document.body.appendChild(F);
+                z = n( w().createElement(w().Fragment, null, !k &&  w().createElement(C, null), !g &&  w().createElement(j, null)), F);
                 // explicitly set height and background of header container to avoid layout and color shift when fallback gets replaced
-                                var F = O.offsetHeight;
-                var T = N(O, {
-                    hideSplunkBar: m,
-                    hideAppBar: s,
-                    headerHeight: F,
-                    AppBarFallback: S,
-                    SplunkBarFallback: g
+                                var G = F.offsetHeight;
+                var I = U(F, {
+                    hideSplunkBar: k,
+                    hideAppBar: g,
+                    headerHeight: G,
+                    AppBarFallback: j,
+                    SplunkBarFallback: C
                 });
-                O.style.height = "".concat(F, "px");
-                O.style.background = "".concat(T);
+                F.style.height = "".concat(G, "px");
+                F.style.background = "".concat(I);
             }
-            document.body.appendChild(q);
-            L = D(e, n, q, a, A);
+            document.body.appendChild(A);
+            T = N(e, n, A, a, _);
         } else {
-            document.body.appendChild(q);
-            L = n( w().createElement(x(), A,  w().createElement(H, d)), q);
+            document.body.appendChild(A);
+            T = n( w().createElement(x(), _,  w().createElement(H, p)), A);
         }
-        U(l, (function(r) {
+        R(l, (function(r) {
             var t;
             if (r) {
-                t = r.create(d).getContainerElement();
-                if (d.layout === "fixed") {
+                t = r.create(p).getContainerElement();
+                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
@@ -361,29 +363,29 @@
                 t = document.createElement("div");
                 document.body.appendChild(t);
             }
-            if (E) {
-                if (!p) {
+            if (q) {
+                if (!s) {
                     // replace placeholder nav bar with real nav bar
-                    _.unmount(O);
-                    var i = document.querySelector(R);
-                    var o = (!p && !m ? f : 0) + (!p && !s ? v : 0);
+                    z.unmount(F);
+                    var i = document.querySelector(D);
+                    var o = (!s && !k ? m : 0) + (!s && !g ? v : 0);
                     // set a min-height for basic nav bar components and auto height for any additional components like global banner
-                                        O.style.minHeight = "".concat(o, "px");
-                    O.style.height = "auto";
-                    O.appendChild(i);
+                                        F.style.minHeight = "".concat(o, "px");
+                    F.style.height = "auto";
+                    F.appendChild(i);
                 }
-                t.appendChild(q);
-                j === null || j === void 0 ? void 0 : j();
+                t.appendChild(A);
+                O === null || O === void 0 ? void 0 : O();
             } else {
                 setTimeout((function() {
-                    L.unmount(q);
-                    L = D(e, n, q, a, A);
-                    t.appendChild(q);
-                    j === null || j === void 0 ? void 0 : j();
+                    T.unmount(A);
+                    T = N(e, n, A, a, _);
+                    t.appendChild(A);
+                    O === null || O === void 0 ? void 0 : O();
                 }), 30);
             }
         }), {
-            loader: c
+            loader: d
         });
     }
     /* harmony default export */    const K = J;
@@ -413,6 +415,8 @@
  * to the edge of the page.
  * @param {Boolean} [options.useGlobalLayerStack = true] - Wraps elements in @splunk/react-ui's LayerStackGlobalProvider.
  * @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".
  * @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
  * Change this only if the default loader does not work for your application.
  * @param {Boolean} [options.lazyLoadLayout = false] - Prioritizes loading the React element and lazily fetches and compiles the layout API (navigation bar).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-page",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.4",
   "description": "Load React components into the latest layout from Splunk Enterprise",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -21,9 +21,9 @@
     "test:cypress:ci": "node src/tests/run-cypress-tests.js"
   },
   "dependencies": {
-    "@splunk/react-ui": "5.0.0-beta.2",
+    "@splunk/react-ui": "5.0.0-beta.5",
     "@splunk/splunk-utils": "^3.2.0",
-    "@splunk/themes": "1.0.0-beta.2",
+    "@splunk/themes": "1.0.0-beta.5",
     "@splunk/ui-utils": "^1.8.0",
     "prop-types": "^15.6.2",
     "scriptjs": "^2.5.8"
@@ -33,7 +33,7 @@
     "@babel/eslint-parser": "^7.16.0",
     "@splunk/babel-preset": "^4.0.0",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "1.0.0-beta.21.v5.2",
+    "@splunk/react-docs": "1.0.0-beta.22.v5",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/webpack-configs": "^7.0.2",
     "babel-loader": "^8.3.0",