@splunk/react-ui 4.42.0 → 5.0.0-beta.2

package/Tree.js

@@ -240,17 +240,17 @@
         };
         function A(n) {
             var t = n.id, o = n.children, a = n.content, i = n.customIndent, l = n.endAdornment, c = n.labelledBy, f = n.onFocus, d = n.onKeyDown, b = n.onToggle, g = n.open, h = g === void 0 ? true : g, I = n.toggle, w = S(n, [ "id", "children", "content", "customIndent", "endAdornment", "labelledBy", "onFocus", "onKeyDown", "onToggle", "open", "toggle" ]);
-            var O = (0, e.useContext)(u), j = O.defaultIndent, A = j === void 0 ? true : j, x = O.onItemKeyDown, E = O.onItemClick, P = O.removeNode, T = O.setNode, k = O.itemPaths, C = O.focusedItemId;
+            var O = (0, e.useContext)(u), j = O.defaultIndent, A = j === void 0 ? true : j, x = O.onItemKeyDown, E = O.onItemClick, P = O.removeNode, k = O.setNode, T = O.itemPaths, C = O.focusedItemId;
             var D = (0, e.useState)(h), _ = m(D, 2), M = _[0], N = _[1];
  // make first tree item tabbable
-                        var $ = (0, e.useState)((k === null || k === void 0 ? void 0 : k.get("".concat(t))) === "0" ? 0 : -1), K = m($, 2), F = K[0], q = K[1];
+                        var $ = (0, e.useState)((T === null || T === void 0 ? void 0 : T.get("".concat(t))) === "0" ? 0 : -1), K = m($, 2), F = K[0], q = K[1];
             var B = (0, e.useRef)(null);
             var U = (0, e.useRef)(null);
             var X = e.Children.toArray(o).filter(e.isValidElement);
             X.forEach((function(e, r) {
                 if (e.props.id) {
-                    if (M && T) {
-                        T("".concat(e.props.id), "".concat(k === null || k === void 0 ? void 0 : k.get("".concat(t)), "-").concat(r));
+                    if (M && k) {
+                        k("".concat(e.props.id), "".concat(T === null || T === void 0 ? void 0 : T.get("".concat(t)), "-").concat(r));
                     } else if (P) {
                         P(e.props.id);
                     }
@@ -270,7 +270,7 @@
                 f === null || f === void 0 ? void 0 : f(r);
             };
             var V = function e() {
-                if ((k === null || k === void 0 ? void 0 : k.get("".concat(t))) === "0") {
+                if ((T === null || T === void 0 ? void 0 : T.get("".concat(t))) === "0") {
                     q(0);
                 }
             };
@@ -287,7 +287,7 @@
                 r.stopPropagation();
                 // Used to ensure first item in Tree is tab navigable, i.e. in JSONTree when focus is manually set to the root item,
                 // this allows user to tab backwards to previous item. Tab index is reset to 0 onBlur.
-                                if (r.shiftKey && r.key === "Tab" && (k === null || k === void 0 ? void 0 : k.get("".concat(t))) === "0") {
+                                if (r.shiftKey && r.key === "Tab" && (T === null || T === void 0 ? void 0 : T.get("".concat(t))) === "0") {
                     q(-1);
                 }
                 x === null || x === void 0 ? void 0 : x(r, t, M, X, z);
@@ -332,19 +332,19 @@
         /* harmony default export */        const x = A;
         // CONCATENATED MODULE: ./src/Tree/treeUtils.ts
         function E(e, r) {
-            return D(e) || C(e, r) || T(e, r) || P();
+            return D(e) || C(e, r) || k(e, r) || P();
         }
         function P() {
             throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
         }
-        function T(e, r) {
+        function k(e, r) {
             if (e) {
-                if ("string" == typeof e) return k(e, r);
+                if ("string" == typeof e) return T(e, r);
                 var n = {}.toString.call(e).slice(8, -1);
-                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? k(e, r) : void 0;
+                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? T(e, r) : void 0;
             }
         }
-        function k(e, r) {
+        function T(e, r) {
             (null == r || r > e.length) && (r = e.length);
             for (var n = 0, t = Array(r); n < r; n++) {
                 t[n] = e[n];
@@ -597,8 +597,9 @@
             var c = (0, e.useState)(), f = R(c, 2), d = f[0], v = f[1];
             var s = new Map;
             var y = function e(r, n, t, o, a) {
-                var l = (0, i.keycode)(r.nativeEvent);
                 r.stopPropagation();
+                var l = (0, i.keycode)(r.nativeEvent);
+                var u = t && (o === null || o === void 0 ? void 0 : o.length);
                 switch (l) {
                   case "up":
                     r.preventDefault();
@@ -612,7 +613,7 @@
 
                   case "left":
                     r.preventDefault();
-                    if (t && (o === null || o === void 0 ? void 0 : o.length)) {
+                    if (u) {
                         a(false, r);
                     } else {
                         v(K(s, n));
@@ -621,7 +622,7 @@
 
                   case "right":
                     r.preventDefault();
-                    if (t && (o === null || o === void 0 ? void 0 : o.length)) {
+                    if (u) {
                         v(q(s, n));
                     } else {
                         a(true, r);
@@ -638,6 +639,11 @@
                     v(z(s));
                     break;
 
+                  case "enter":
+                    r.preventDefault();
+                    a(!u, r);
+                    break;
+
                   default:
  // do nothing
                                 }

package/Typography.js

@@ -62,7 +62,7 @@
     // EXPORTS
         e.d(r, {
         Typography: () => /* reexport */ g,
-        default: () => /* reexport */ m
+        default: () => /* reexport */ h
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
@@ -70,15 +70,15 @@
     // CONCATENATED MODULE: external "prop-types"
     const a = require("prop-types");
     var o =  e.n(a);
-    // CONCATENATED MODULE: external "@splunk/themes/mixins"
-    const i = require("@splunk/themes/mixins");
-    var l =  e.n(i);
     // CONCATENATED MODULE: external "styled-components"
-    const s = require("styled-components");
-    var p =  e.n(s);
+    const i = require("styled-components");
+    var l =  e.n(i);
+    // CONCATENATED MODULE: external "@splunk/themes/mixins"
+    const s = require("@splunk/themes/mixins");
+    var u =  e.n(s);
     // CONCATENATED MODULE: ./src/Typography/Typography.tsx
-    function u() {
-        return u = Object.assign ? Object.assign.bind() : function(e) {
+    function p() {
+        return p = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -86,9 +86,9 @@
                 }
             }
             return e;
-        }, u.apply(null, arguments);
+        }, p.apply(null, arguments);
     }
-    function y(e, r) {
+    function c(e, r) {
         if (null == e) return {};
         var t, n, a = f(e, r);
         if (Object.getOwnPropertySymbols) {
@@ -110,64 +110,49 @@
         }
         return t;
     }
-    // TODO: Remove in next major version (SUI-5350)
-    // TODO: TypographyPropsBase should extend from TypographyParams (SUI-5343)
-    // Weight is omitted because the types conflict since weight no longer supports number values in the mixin
-    // but they are supported in the component to avoid a breaking change
-        var c = {
+    var y = {
         children: o().node.isRequired,
         as: o().string.isRequired,
         elementRef: o().oneOfType([ o().func, o().object ]),
-        family: o().oneOf([ "sansSerif", "monospace" ]),
-        variant: o().oneOf(i.typographyVariants),
-        size: o().number,
-        lineHeight: o().number,
+        family: o().oneOf([ "sansSerif", "monospace", "title" ]),
+        variant: o().oneOf(s.typographyVariants),
+        size: o().oneOf([ 24, 20, 18, 16, 14, 12 ]),
+        lineHeight: o().oneOf([ "single", "tight", "snug", "comfortable", "relaxed", "spacious", "normal" ]),
         color: o().oneOf([ "active", "default", "disabled", "inverted", "muted", "inherit" ]),
-        weight: o().oneOf([ 300, 400, 500, 600, 700, 800, 900, "light", "normal", "semiBold", "bold", "extraBold", "heavy" ]),
-        withReset: o().bool
+        weight: o().oneOf([ "light", "normal", "semiBold", "bold", "extraBold", "heavy" ])
     };
-    var d = p().p.withConfig({
+    var d = l().p.withConfig({
         displayName: "Typography__StyledTypography",
         componentId: "cgxs34-0"
     })([ "", "" ], (function(e) {
         var r = e.$variant, t = e.$typographyParams;
-        return r ? l().typography(r, t) : l().typography(t);
+        return r ? u().typography(r, t) : u().typography(t);
     }));
-    var h = {
-        300: "light",
-        400: "normal",
-        500: "semiBold",
-        600: "semiBold",
-        700: "bold",
-        800: "extraBold",
-        900: "heavy"
-    };
     /**
  * Typography renders text content with styling based on the Splunk Design System.
  */    function g(e) {
-        var r = e.children, t = e.as, a = e.elementRef, o = e.variant, i = e.family, l = e.size, s = e.lineHeight, p = e.color, f = e.weight, c = e.withReset, g = y(e, [ "children", "as", "elementRef", "variant", "family", "size", "lineHeight", "color", "weight", "withReset" ]);
+        var r = e.children, a = e.as, o = e.elementRef, i = e.variant, l = e.family, s = e.size, u = e.lineHeight, f = e.color, y = e.weight, g = c(e, [ "children", "as", "elementRef", "variant", "family", "size", "lineHeight", "color", "weight" ]);
         // @docs-props-type TypographyPropsBase
-        // TODO: Remove in next major version (SUI-5350)
-                if (false) {}
-        var m = {
-            family: i,
-            size: l,
-            lineHeight: s,
-            color: p,
-            withReset: c,
-            weight: typeof f === "number" ? h[f] : f
-        };
+                var h = (0, t.useMemo)((function() {
+            return {
+                family: l,
+                size: s,
+                lineHeight: u,
+                color: f,
+                weight: y
+            };
+        }), [ f, l, u, s, y ]);
         
-        return n().createElement(d, u({
-            as: t,
-            ref: a,
+        return n().createElement(d, p({
+            as: a,
+            ref: o,
             "data-test": "typography",
-            $variant: o,
-            $typographyParams: m
+            $variant: i,
+            $typographyParams: h
         }, g), r);
     }
-    g.propTypes = c;
-    /* harmony default export */    const m = g;
+    g.propTypes = y;
+    /* harmony default export */    const h = g;
     // CONCATENATED MODULE: ./src/Typography/index.ts
     module.exports = r;
     /******/})();

package/WaitSpinner.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = r => {
-            /******/ var t = r && r.__esModule ? 
-            /******/ () => r["default"]
-            /******/ : () => r
+        /******/ e.n = t => {
+            /******/ var r = t && t.__esModule ? 
+            /******/ () => t["default"]
+            /******/ : () => t
             /******/;
-            e.d(t, {
-                a: t
+            e.d(r, {
+                a: r
             });
-            /******/            return t;
+            /******/            return r;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, t) => {
-            /******/ for (var i in t) {
-                /******/ if (e.o(t, i) && !e.o(r, i)) {
-                    /******/ Object.defineProperty(r, i, {
+        /******/ e.d = (t, r) => {
+            /******/ for (var n in r) {
+                /******/ if (e.o(r, n) && !e.o(t, n)) {
+                    /******/ Object.defineProperty(t, n, {
                         enumerable: true,
-                        get: t[i]
+                        get: r[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
         /******/;
     })();
     /******/
@@ -56,168 +56,137 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var r = {};
+    /************************************************************************/    var t = {};
     // ESM COMPAT FLAG
-        e.r(r);
+        e.r(t);
     // EXPORTS
-        e.d(r, {
-        default: () => /* reexport */ _
+        e.d(t, {
+        default: () => /* reexport */ x
     });
     // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var i =  e.n(t);
+    const r = require("react");
+    var n =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
-    const n = require("prop-types");
-    var a =  e.n(n);
+    const a = require("prop-types");
+    var i =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/react-ui/AnimationToggle"
     const s = require("@splunk/react-ui/AnimationToggle");
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const o = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const l = require("@splunk/ui-utils/i18n");
+    const o = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
-    const c = require("styled-components");
-    var m =  e.n(c);
+    const l = require("styled-components");
+    var c =  e.n(l);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const f = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/WaitSpinner/WaitSpinnerStyles.ts
-    var f = m().div.withConfig({
+    var u = c().div.withConfig({
         displayName: "WaitSpinnerStyles__Styled",
         componentId: "sc-1nu971z-0"
-    })([ "", ";align-items:center;" ], o.mixins.reset("inline-flex"));
-    var p = (0, c.keyframes)([ "100%{transform:rotate(360deg);}" ]);
-    var d = (0, c.keyframes)([ "0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}" ]);
-    var u = "2.07s";
-    var y = m().svg.withConfig({
+    })([ "", ";align-items:center;" ], f.mixins.reset("inline-flex"));
+    var d = (0, l.keyframes)([ "100%{transform:rotate(360deg);}" ]);
+    var m = (0, l.keyframes)([ "0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}" ]);
+    var p = "2.07s";
+    var y = c().svg.withConfig({
         displayName: "WaitSpinnerStyles__StyledSvg",
         componentId: "sc-1nu971z-1"
-    })([ "", " ", "" ], (0, o.pickVariant)("$size", {
-        small: {
-            enterprise: (0, c.css)([ "width:14px;height:14px;" ]),
-            prisma: (0, c.css)([ "width:16px;height:16px;" ])
-        },
-        medium: {
-            enterprise: (0, c.css)([ "width:19px;height:19px;" ]),
-            prisma: (0, c.css)([ "width:24px;height:24px;" ])
-        },
-        large: {
-            enterprise: (0, c.css)([ "width:28px;height:28px;" ]),
-            prisma: (0, c.css)([ "width:40px;height:40px;" ])
-        }
+    })([ "", " ", "" ], (0, f.pickVariant)("$size", {
+        small: (0, l.css)([ "width:16px;height:16px;" ]),
+        medium: (0, l.css)([ "width:24px;height:24px;" ]),
+        large: (0, l.css)([ "width:40px;height:40px;" ])
     }), (function(e) {
-        var r = e.$animated;
-        return r && (0, o.pick)({
-            enterprise: (0, c.css)([ "transform-origin:center;animation:", " 1.2s steps(64) infinite;" ], p),
-            prisma: (0, c.css)([ "animation:", " ", " infinite linear,", " 500ms cubic-bezier(0.01,0,0,1);" ], p, u, d)
-        });
+        var t = e.$animated;
+        return t && (0, l.css)([ "animation:", " ", " infinite linear,", " 500ms cubic-bezier(0.01,0,0,1);" ], d, p, m);
     }));
-    var h = (0, c.keyframes)([ "0%{stroke-dasharray:110 10;stroke-dashoffset:-5.5;animation-timing-function:cubic-bezier(0.8,0,0.83,1);}50%{stroke-dasharray:26 94;stroke-dashoffset:-152;}100%{stroke-dasharray:110 10;stroke-dashoffset:-246.5;animation-timing-function:cubic-bezier(0.33,0,0.67,1);}" ]);
-    var v = (0, c.keyframes)([ "0%{stroke-dasharray:7 113;stroke-dashoffset:3;animation-timing-function:cubic-bezier(0.8,0,0.83,1);}50%{stroke-dasharray:90 30;stroke-dashoffset:-60;}100%{stroke-dasharray:7 113;stroke-dashoffset:-238;animation-timing-function:cubic-bezier(0.33,0,0.67,1);}" ]);
-    var g = m().circle.withConfig({
-        displayName: "WaitSpinnerStyles__StyledPrismaBasePath",
+    var v = (0, l.keyframes)([ "0%{stroke-dasharray:110 10;stroke-dashoffset:-5.5;animation-timing-function:cubic-bezier(0.8,0,0.83,1);}50%{stroke-dasharray:26 94;stroke-dashoffset:-152;}100%{stroke-dasharray:110 10;stroke-dashoffset:-246.5;animation-timing-function:cubic-bezier(0.33,0,0.67,1);}" ]);
+    var h = (0, l.keyframes)([ "0%{stroke-dasharray:7 113;stroke-dashoffset:3;animation-timing-function:cubic-bezier(0.8,0,0.83,1);}50%{stroke-dasharray:90 30;stroke-dashoffset:-60;}100%{stroke-dasharray:7 113;stroke-dashoffset:-238;animation-timing-function:cubic-bezier(0.33,0,0.67,1);}" ]);
+    var g = c().circle.withConfig({
+        displayName: "WaitSpinnerStyles__StyledBasePath",
         componentId: "sc-1nu971z-2"
-    })([ "stroke:", ";stroke-width:2;fill:transparent;", " stroke-dasharray:110 10;stroke-dashoffset:-5.5;" ], o.variables.contentColorDisabled, (function(e) {
-        var r = e.$animated;
-        return r && (0, c.css)([ "animation:", " ", " infinite;animation-fill-mode:backwards;" ], h, u);
+    })([ "stroke:", ";stroke-width:2;fill:transparent;", " stroke-dasharray:110 10;stroke-dashoffset:-5.5;" ], f.variables.contentColorDisabled, (function(e) {
+        var t = e.$animated;
+        return t && (0, l.css)([ "animation:", " ", " infinite;animation-fill-mode:backwards;" ], v, p);
     }));
-    var k = m().circle.withConfig({
-        displayName: "WaitSpinnerStyles__StyledPrismaFillPath",
+    var b = c().circle.withConfig({
+        displayName: "WaitSpinnerStyles__StyledFillPath",
         componentId: "sc-1nu971z-3"
     })([ "fill:transparent;stroke-width:2;stroke:", ";stroke-dasharray:7 113;stroke-dashoffset:3;", "" ], (0, 
-    o.pickVariant)("$size", {
-        small: o.variables.contentColorDefault,
-        medium: o.variables.contentColorDefault,
-        large: o.variables.interactiveColorPrimary
+    f.pickVariant)("$size", {
+        small: f.variables.contentColorDefault,
+        medium: f.variables.contentColorDefault,
+        large: f.variables.interactiveColorPrimary
     }), (function(e) {
-        var r = e.$animated;
-        return r && (0, c.css)([ "animation:", " ", " infinite;" ], v, u);
-    }));
-    var b = m().circle.withConfig({
-        displayName: "WaitSpinnerStyles__StyledEnterpriseCircle",
-        componentId: "sc-1nu971z-4"
-    })([ "fill:transparent;stroke:", ";stroke-width:2px;", "" ], (0, o.pick)({
-        enterprise: {
-            dark: o.variables.white,
-            light: o.variables.gray60
-        },
-        prisma: o.variables.contentColorMuted
-    }), (0, o.pick)({
-        enterprise: (0, c.css)([ "stroke-dasharray:34 19;" ])
+        var t = e.$animated;
+        return t && (0, l.css)([ "animation:", " ", " infinite;" ], h, p);
     }));
     // CONCATENATED MODULE: ./src/WaitSpinner/WaitSpinner.tsx
-    function w() {
-        return w = Object.assign ? Object.assign.bind() : function(e) {
-            for (var r = 1; r < arguments.length; r++) {
-                var t = arguments[r];
-                for (var i in t) {
-                    ({}).hasOwnProperty.call(t, i) && (e[i] = t[i]);
+    function k() {
+        return k = Object.assign ? Object.assign.bind() : function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
                 }
             }
             return e;
-        }, w.apply(null, arguments);
+        }, k.apply(null, arguments);
     }
-    function x(e, r) {
+    function w(e, t) {
         if (null == e) return {};
-        var t, i, n = S(e, r);
+        var r, n, a = S(e, t);
         if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (i = 0; i < a.length; i++) {
-                t = a[i], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
-        return n;
+        return a;
     }
-    function S(e, r) {
+    function S(e, t) {
         if (null == e) return {};
-        var t = {};
-        for (var i in e) {
-            if ({}.hasOwnProperty.call(e, i)) {
-                if (r.includes(i)) continue;
-                t[i] = e[i];
+        var r = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (t.includes(n)) continue;
+                r[n] = e[n];
             }
         }
-        return t;
+        return r;
     }
     var z = {
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        screenReaderText: a().oneOfType([ a().string, a().oneOf([ "null" ]) ]),
-        size: a().oneOf([ "small", "medium", "large" ])
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        screenReaderText: i().oneOfType([ i().string, i().oneOf([ "null" ]) ]),
+        size: i().oneOf([ "small", "medium", "large" ])
     };
     function O(e) {
-        var r = e.elementRef, t = e.screenReaderText, n = t === void 0 ? (0, l._)("Waiting") : t, a = e.size, c = a === void 0 ? "small" : a, m = x(e, [ "elementRef", "screenReaderText", "size" ]);
+        var t = e.elementRef, r = e.screenReaderText, a = r === void 0 ? (0, o._)("Waiting") : r, i = e.size, l = i === void 0 ? "small" : i, c = w(e, [ "elementRef", "screenReaderText", "size" ]);
         // @docs-props-type WaitSpinnerPropsBase
-                if (false) {}
-        var p = (0, s.useAnimationToggle)() === "on";
-        var d = (0, o.useSplunkTheme)(), u = d.isPrisma;
-        var h = u ? "0 0 40 40" : "0 0 19 19";
+                var f = (0, s.useAnimationToggle)() === "on";
         
-        return i().createElement(f, w({
-            "data-test": "wait-spinner"
-        }, m),  i().createElement(y, {
-            viewBox: h,
+        return n().createElement(u, k({
+            "data-test": "wait-spinner",
+            ref: t
+        }, c),  n().createElement(y, {
+            viewBox: "0 0 40 40",
             version: "1.1",
             xmlns: "http://www.w3.org/2000/svg",
-            ref: r,
-            $animated: p,
-            $size: c
-        }, n &&  i().createElement("title", null, n),  i().createElement("g", null, u ?  i().createElement(i().Fragment, null,  i().createElement(g, {
+            $animated: f,
+            $size: l
+        }, a &&  n().createElement("title", null, a),  n().createElement("g", null,  n().createElement(g, {
             r: "19",
             cx: "20",
             cy: "20",
-            $animated: p,
-            $size: c
-        }),  i().createElement(k, {
+            $animated: f,
+            $size: l
+        }),  n().createElement(b, {
             r: "19",
             cx: "20",
             cy: "20",
-            $animated: p,
-            $size: c
-        })) :  i().createElement(b, {
-            cx: "9.5",
-            cy: "9.5",
-            r: "8.5"
+            $animated: f,
+            $size: l
         }))));
     }
     O.propTypes = z;
-    /* harmony default export */    const _ = O;
+    /* harmony default export */    const x = O;
     // CONCATENATED MODULE: ./src/WaitSpinner/index.ts
-    module.exports = r;
+    module.exports = t;
     /******/})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.42.0",
+  "version": "5.0.0-beta.2",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -18,7 +18,7 @@
     "lint:quiet": "yarn run eslint --quiet && yarn run stylelint",
     "lint:ci": "yarn run eslint:ci && yarn run stylelint",
     "start": "cross-env NODE_ENV=development webpack --watch",
-    "storybook": "sb dev -p 6006",
+    "storybook": "STORYBOOK_BRANCH=$(git branch --show-current) sb dev -p 6006",
     "storybook:test": "node ../../infra/visual-tests/test.js",
     "storybook:test:all": "yarn storybook:test --all",
     "storybook:a11y": "yarn storybook:test --a11y",
@@ -35,8 +35,8 @@
     "types:start": "yarn types:build --watch"
   },
   "peerDependencies": {
-    "react": "^16.8",
-    "react-dom": "^16.8",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "^5.3.10"
   },
   "dependencies": {
@@ -44,17 +44,17 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@splunk/react-icons": "^4.11.0",
-    "@splunk/themes": "^0.23.0",
-    "@splunk/ui-utils": "^1.7.1",
-    "commonmark": "^0.30.0",
-    "commonmark-react-renderer": "^4.3.2",
+    "@splunk/react-icons": "5.0.0-beta.2",
+    "@splunk/themes": "1.0.0-beta.2",
+    "@splunk/ui-utils": "^1.8.0",
     "decimal.js-light": "^2.2.3",
     "lodash": "^4.17.14",
     "moment": "^2.29.4",
     "prop-types": "^15.6.2",
+    "react-markdown": "^8.0.7",
     "react-resize-detector": "^3.2.1",
     "react-spring": "9.2.4",
+    "remark-gfm": "^1.0.0",
     "tinycolor2": "^1.4.1",
     "use-typed-event-listener": "^3.0.0"
   },
@@ -62,9 +62,9 @@
     "@babel/core": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.18.6",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "1.0.0-beta.13",
+    "@splunk/docs-gen": "1.0.0-beta.14.v5.2",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "1.0.0-beta.20",
+    "@splunk/react-docs": "1.0.0-beta.21.v5.2",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",
@@ -77,16 +77,15 @@
     "@storybook/test-runner": "0.16.0",
     "@testing-library/cypress": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^14.4.3",
-    "@types/commonmark": "^0.27.6",
     "@types/jest": "^26.0.0",
     "@types/lodash": "^4.14.156",
     "@types/node": "^10.17.26",
     "@types/prismjs": "^1.26.3",
-    "@types/react": "^16.9.38",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/react-resize-detector": "^3.1.1",
     "@types/sinon": "^4.3.3",
     "@types/styled-components": "^5.1.0",
@@ -132,9 +131,9 @@
     "prismjs": "^1.29.0",
     "prompt": "^1.0.0",
     "raw-loader": "^4.0.2",
-    "react": "^16.12.0",
+    "react": "^18.2.0",
     "react-docgen": "^5.4.0",
-    "react-dom": "^16.12.0",
+    "react-dom": "^18.2.0",
     "react-test-renderer": "^16.13.1",
     "sinon": "^2.1.0",
     "storybook": "^7.6.17",

package/stubs-dependencies.d.ts

@@ -1,10 +1,3 @@
-declare module 'commonmark-react-renderer' {
-    export default class Renderer {
-        constructor(options: {});
-        render(ast: import('commonmark').Node): React.ReactNode[];
-    }
-}
-
 // https://github.com/storybookjs/storybook/issues/7677
 // https://github.com/ComponentDriven/csf/blob/next/src/story.test.ts
 declare module '@storybook/react' {