@splunk/react-ui 5.0.0-rc.2 → 5.1.0

package/Popover.js

@@ -61,49 +61,49 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        PopoverContext: () => /* reexport */ ue,
-        PopoverMenuContext: () => /* reexport */ nt,
-        PopoverProvider: () => /* reexport */ se,
-        default: () => /* reexport */ rt
+        PopoverContext: () => /* reexport */ ve,
+        PopoverMenuContext: () => /* reexport */ lt,
+        PopoverProvider: () => /* reexport */ he,
+        default: () => /* reexport */ it
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
     var n =  e.n(r);
-    // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
-    var a =  e.n(o);
     // CONCATENATED MODULE: external "lodash/clamp"
-    const i = require("lodash/clamp");
-    var l =  e.n(i);
+    const o = require("lodash/clamp");
+    var a =  e.n(o);
     // CONCATENATED MODULE: external "lodash/defer"
-    const c = require("lodash/defer");
-    var u =  e.n(c);
+    const i = require("lodash/defer");
+    var l =  e.n(i);
     // CONCATENATED MODULE: external "lodash/every"
-    const f = require("lodash/every");
-    var s =  e.n(f);
+    const c = require("lodash/every");
+    var u =  e.n(c);
     // CONCATENATED MODULE: external "lodash/has"
-    const p = require("lodash/has");
-    var v =  e.n(p);
+    const f = require("lodash/has");
+    var s =  e.n(f);
     // CONCATENATED MODULE: external "lodash/intersection"
-    const d = require("lodash/intersection");
-    var h =  e.n(d);
+    const p = require("lodash/intersection");
+    var v =  e.n(p);
     // CONCATENATED MODULE: external "lodash/isFinite"
-    const m = require("lodash/isFinite");
-    var b =  e.n(m);
+    const d = require("lodash/isFinite");
+    var h =  e.n(d);
     // CONCATENATED MODULE: external "lodash/isFunction"
-    const y = require("lodash/isFunction");
-    var g =  e.n(y);
+    const m = require("lodash/isFunction");
+    var b =  e.n(m);
     // CONCATENATED MODULE: external "lodash/omit"
-    const w = require("lodash/omit");
-    var S =  e.n(w);
+    const g = require("lodash/omit");
+    var y =  e.n(g);
     // CONCATENATED MODULE: external "lodash/throttle"
-    const O = require("lodash/throttle");
-    var P =  e.n(O);
+    const w = require("lodash/throttle");
+    var S =  e.n(w);
+    // CONCATENATED MODULE: external "prop-types"
+    const P = require("prop-types");
+    var O =  e.n(P);
     // CONCATENATED MODULE: external "@splunk/react-ui/Animation"
-    const j = require("@splunk/react-ui/Animation");
+    const C = require("@splunk/react-ui/Animation");
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
-    const C = require("@splunk/react-ui/EventListener");
-    var E =  e.n(C);
+    const E = require("@splunk/react-ui/EventListener");
+    var j =  e.n(E);
     // CONCATENATED MODULE: external "@splunk/react-ui/Layer"
     const x = require("@splunk/react-ui/Layer");
     var A =  e.n(x);
@@ -206,7 +206,33 @@
             throw new Error("".concat(a, " is not a valid placement value. Valid options are: 'above', 'below', 'left', or 'right'"));
         }
     }
-    function _(e) {
+    var _ = function e(t) {
+        var r = t.align, n = t.anchorPos, o = t.outerContainerEl, a = t.padding;
+        if (r === "edge") {
+            return n.left + o.offsetWidth - a;
+        }
+        if (r === "end") {
+            return n.right + a;
+        }
+        return n.middle + o.offsetWidth / 2;
+    };
+    var N = function e(t) {
+        var r = t.align, n = t.anchorPos, o = t.outerContainerEl, a = t.padding;
+        if (r === "edge") return n.left - a;
+        if (r === "end") return n.right - o.offsetWidth + a;
+        return n.middle - o.offsetWidth / 2;
+    };
+    var V = function e(t) {
+        var r = t.align, n = t.anchorPos, o = t.outerContainerEl, a = t.padding;
+        if (r === "edge") return n.top - a;
+        return n.top - o.offsetHeight / 2;
+    };
+    var z = function e(t) {
+        var r = t.align, n = t.anchorPos, o = t.outerContainerEl, a = t.padding;
+        if (r === "edge") return n.top + o.offsetHeight - a;
+        return n.bottom + o.offsetHeight / 2;
+    };
+    function K(e) {
         var t = e.align, r = e.anchorPos, n = e.scrollContainerPos, o = e.canCoverAnchor, a = e.defaultPlacement, i = e.outerContainerEl, l = e.padding, c = e.repositionMode, u = e.windowHeight, f = e.windowWidth;
         var s = c === "flip";
         var p = c === "any";
@@ -226,79 +252,99 @@
             outerContainerEl: i,
             padding: l,
             placement: h
-        }), b = m.top, y = m.left;
-        var g = "auto";
+        }), b = m.top, g = m.left;
+        var y = "auto";
         var w = f;
         var S = u;
-        var O = h;
+        var P = h;
         // Boolean convenience variables to simplify positioning logic.
-                var P = r.top - i.offsetHeight > 0;
-        var j = r.bottom + i.offsetHeight < u;
-        var C = r.left - i.offsetWidth > 0;
-        var E = r.right + i.offsetWidth < f;
+                var O = r.top - i.offsetHeight > 0;
+        var C = r.bottom + i.offsetHeight < u;
+        var E = r.left - i.offsetWidth > 0;
+        var j = r.right + i.offsetWidth < f;
         var x = r.top * .7 > u - r.bottom;
-        var A = (t === "edge" ? r.left + i.offsetWidth - l : r.middle + i.offsetWidth / 2) > f;
-        var k = (t === "edge" ? r.left - l : r.middle - i.offsetWidth / 2) < 0;
-        var T = (t === "edge" ? r.top - l : r.top - i.offsetHeight / 2) < 0;
-        var R = (t === "edge" ? r.top + i.offsetHeight - l : r.bottom + i.offsetHeight / 2) > u;
+        var A = _({
+            align: t,
+            anchorPos: r,
+            outerContainerEl: i,
+            padding: l
+        }) > f;
+        var k = N({
+            align: t,
+            anchorPos: r,
+            outerContainerEl: i,
+            padding: l
+        }) < 0;
+        var T = V({
+            align: t,
+            anchorPos: r,
+            outerContainerEl: i,
+            padding: l
+        }) < 0;
+        var R = z({
+            align: t,
+            anchorPos: r,
+            outerContainerEl: i,
+            padding: l
+        }) > u;
         // Handle each of the four placement options individually.
-                if (O === "above") {
-            if (!P && v) {
-                if (j) {
-                    return _(I(I({}, e), {}, {
+                if (P === "above") {
+            if (!O && v) {
+                if (C) {
+                    return K(I(I({}, e), {}, {
                         placement: "below"
                     }));
                 }
-                if (p && E) {
-                    return _(I(I({}, e), {}, {
+                if (p && j) {
+                    return K(I(I({}, e), {}, {
                         placement: "right"
                     }));
                 }
-                if (p && C) {
-                    return _(I(I({}, e), {}, {
+                if (p && E) {
+                    return K(I(I({}, e), {}, {
                         placement: "left"
                     }));
                 }
                 if (o) {
-                    O = "misaligned";
+                    P = "misaligned";
                     b = 0;
                 }
             }
-            if (O !== "misaligned") {
-                g = u - b - i.offsetHeight;
+            if (P !== "misaligned") {
+                y = u - b - i.offsetHeight;
                 if (n) {
-                    g = Math.min(g, u - n.top);
+                    y = Math.min(y, u - n.top);
                 }
                 b = "auto";
             }
             if (A) {
-                y = Math.max(f - i.offsetWidth, 0);
+                g = Math.max(f - i.offsetWidth, 0);
             } else if (k) {
-                y = 0;
+                g = 0;
             }
             if (!o) {
                 S = r.top;
             }
         }
-        if (O === "below") {
-            if (!j && v) {
-                if (P && x) {
-                    return _(I(I({}, e), {}, {
+        if (P === "below") {
+            if (!C && v) {
+                if (O && x) {
+                    return K(I(I({}, e), {}, {
                         placement: "above"
                     }));
                 }
-                if (p && E) {
-                    return _(I(I({}, e), {}, {
+                if (p && j) {
+                    return K(I(I({}, e), {}, {
                         placement: "right"
                     }));
                 }
-                if (p && C) {
-                    return _(I(I({}, e), {}, {
+                if (p && E) {
+                    return K(I(I({}, e), {}, {
                         placement: "left"
                     }));
                 }
                 if (o) {
-                    O = "misaligned";
+                    P = "misaligned";
                     b = 0;
                 }
             }
@@ -306,33 +352,33 @@
                 b = Math.min(b, n.bottom);
             }
             if (A) {
-                y = Math.max(f - i.offsetWidth, 0);
+                g = Math.max(f - i.offsetWidth, 0);
             } else if (k) {
-                y = 0;
+                g = 0;
             }
             if (!o) {
                 S = u - r.bottom;
             }
         }
-        if (O === "left") {
-            if (!C && v) {
-                if (E) {
-                    return _(I(I({}, e), {}, {
+        if (P === "left") {
+            if (!E && v) {
+                if (j) {
+                    return K(I(I({}, e), {}, {
                         placement: "right"
                     }));
                 }
-                if (p && j) {
-                    return _(I(I({}, e), {}, {
+                if (p && C) {
+                    return K(I(I({}, e), {}, {
                         placement: "below"
                     }));
                 }
-                if (p && P) {
-                    return _(I(I({}, e), {}, {
+                if (p && O) {
+                    return K(I(I({}, e), {}, {
                         placement: "above"
                     }));
                 }
                 if (o) {
-                    O = "misaligned";
+                    P = "misaligned";
                     b = 0;
                 }
             }
@@ -345,25 +391,25 @@
                 w = r.left;
             }
         }
-        if (O === "right") {
-            if (!E && v) {
-                if (C) {
-                    return _(I(I({}, e), {}, {
+        if (P === "right") {
+            if (!j && v) {
+                if (E) {
+                    return K(I(I({}, e), {}, {
                         placement: "left"
                     }));
                 }
-                if (p && j) {
-                    return _(I(I({}, e), {}, {
+                if (p && C) {
+                    return K(I(I({}, e), {}, {
                         placement: "below"
                     }));
                 }
-                if (p && P) {
-                    return _(I(I({}, e), {}, {
+                if (p && O) {
+                    return K(I(I({}, e), {}, {
                         placement: "above"
                     }));
                 }
                 if (o) {
-                    O = "misaligned";
+                    P = "misaligned";
                     b = 0;
                 }
             }
@@ -377,93 +423,93 @@
             }
         }
         return {
-            placement: O,
+            placement: P,
             maxHeight: S,
             maxWidth: w,
             outerContainerStyle: {
                 top: b,
-                left: y,
-                bottom: g
+                left: g,
+                bottom: y
             }
         };
     }
     // CONCATENATED MODULE: external "@react-spring/web"
-    const N = require("@react-spring/web");
+    const X = require("@react-spring/web");
     // CONCATENATED MODULE: external "styled-components"
-    const V = require("styled-components");
-    var z =  e.n(V);
+    const B = require("styled-components");
+    var Y =  e.n(B);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const K = require("@splunk/themes");
+    const U = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Popover/PopoverStyles.ts
-    var X = 8;
-    var B = z()(N.animated.div).withConfig({
+    var G = 8;
+    var J = Y()(X.animated.div).withConfig({
         displayName: "PopoverStyles__Styled",
         componentId: "sc-1nahsvw-0"
-    })([ "position:fixed;z-index:", ";left:-300%;top:-300%;" ], K.variables.zindexPopover);
+    })([ "position:fixed;z-index:", ";left:-300%;top:-300%;" ], U.variables.zindexPopover);
     // These hex codes are the inverted values of variables.backgroundColorPopup which are not exposed as tokens
-        var Y = (0, V.css)([ "", "" ], (0, K.pick)({
+        var Q = (0, B.css)([ "", "" ], (0, U.pick)({
         light: "#27292e",
-        dark: K.variables.white
+        dark: U.variables.white
     }));
-    var U = z().div.withConfig({
+    var Z = Y().div.withConfig({
         displayName: "PopoverStyles__StyledBox",
         componentId: "sc-1nahsvw-1"
-    })([ "", ";", ";", ";" ], K.mixins.reset("block"), (function(e) {
+    })([ "", ";", ";", ";" ], U.mixins.reset("block"), (function(e) {
         var t = e.$open;
-        return !t && (0, V.css)([ "pointer-events:none;" ]);
+        return !t && (0, B.css)([ "pointer-events:none;" ]);
     }), (function(e) {
         var t = e.$appearance, r = e.$boxPadding;
-        return t !== "none" && (0, V.css)([ "padding:", "px;" ], r);
+        return t !== "none" && (0, B.css)([ "padding:", "px;" ], r);
     }));
-    var G = z().div.withConfig({
+    var ee = Y().div.withConfig({
         displayName: "PopoverStyles__StyledContent",
         componentId: "sc-1nahsvw-2"
-    })([ "border-radius:", ";background-color:", ";color:", ";", "" ], K.variables.borderRadius, (0, 
-    K.pickVariant)("$appearance", {
-        normal: K.variables.backgroundColorPopup,
-        inverted: Y
-    }), (0, K.pickVariant)("$appearance", {
-        normal: K.variables.contentColorDefault,
-        inverted: K.variables.contentColorInverted
-    }), (0, K.pickVariant)("$appearance", {
-        normal: (0, V.css)([ "box-shadow:", ";" ], K.variables.overlayShadow)
+    })([ "border-radius:", ";background-color:", ";color:", ";", "" ], U.variables.borderRadius, (0, 
+    U.pickVariant)("$appearance", {
+        normal: U.variables.backgroundColorPopup,
+        inverted: Q
+    }), (0, U.pickVariant)("$appearance", {
+        normal: U.variables.contentColorDefault,
+        inverted: U.variables.contentColorInverted
+    }), (0, U.pickVariant)("$appearance", {
+        normal: (0, B.css)([ "box-shadow:", ";" ], U.variables.overlayShadow)
     }));
-    var J = z().div.withConfig({
+    var te = Y().div.withConfig({
         displayName: "PopoverStyles__StyledArrow",
         componentId: "sc-1nahsvw-3"
-    })([ "width:0;height:0;border-left:", "px solid transparent;border-right:", "px solid transparent;position:absolute;border-bottom-width:", "px;border-bottom-style:solid;", ";" ], X, X, X, (function(e) {
+    })([ "width:0;height:0;border-left:", "px solid transparent;border-right:", "px solid transparent;position:absolute;border-bottom-width:", "px;border-bottom-style:solid;", ";" ], G, G, G, (function(e) {
         var t = e.$appearance;
-        return t !== "none" && (0, V.css)([ "border-bottom-color:", ";" ], (0, K.pickVariant)("$appearance", {
-            normal: K.variables.backgroundColorPopup,
-            inverted: Y
+        return t !== "none" && (0, B.css)([ "border-bottom-color:", ";" ], (0, U.pickVariant)("$appearance", {
+            normal: U.variables.backgroundColorPopup,
+            inverted: Q
         }));
     }));
-    var Q = z().svg.withConfig({
+    var re = Y().svg.withConfig({
         displayName: "PopoverStyles__StyledHitArea",
         componentId: "sc-1nahsvw-4"
     })([ "position:fixed;pointer-events:none;path{pointer-events:auto;stroke-width:0;stroke:transparent;fill:transparent;}" ]);
     // CONCATENATED MODULE: ./src/Popover/PopoverHitArea.tsx
-    function Z(e, t) {
-        return oe(e) || ne(e, t) || te(e, t) || ee();
+    function ne(e, t) {
+        return ce(e) || le(e, t) || ae(e, t) || oe();
     }
-    function ee() {
+    function oe() {
         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 te(e, t) {
+    function ae(e, t) {
         if (e) {
-            if ("string" == typeof e) return re(e, t);
+            if ("string" == typeof e) return ie(e, t);
             var r = {}.toString.call(e).slice(8, -1);
-            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? re(e, t) : void 0;
+            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? ie(e, t) : void 0;
         }
     }
-    function re(e, t) {
+    function ie(e, t) {
         (null == t || t > e.length) && (t = e.length);
         for (var r = 0, n = Array(t); r < t; r++) {
             n[r] = e[r];
         }
         return n;
     }
-    function ne(e, t) {
+    function le(e, t) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
             var n, o, a, i, l = [], c = !0, u = !1;
@@ -485,15 +531,15 @@
             return l;
         }
     }
-    function oe(e) {
+    function ce(e) {
         if (Array.isArray(e)) return e;
     }
-    var ae = {
-        anchorRect: a().object,
-        popoverEl: a().object,
-        popoverPlacement: a().oneOf([ "above", "below", "left", "right", "misaligned" ])
+    var ue = {
+        anchorRect: O().object,
+        popoverEl: O().object,
+        popoverPlacement: O().oneOf([ "above", "below", "left", "right", "misaligned" ])
     };
-    var ie = function e(t) {
+    var fe = function e(t) {
         var r = t.anchorRect, n = t.popoverEl, o = t.popoverPlacement;
         if (r != null && n != null && o != null) {
             var a = n.getBoundingClientRect();
@@ -525,20 +571,20 @@
             if (o === "left" || o === "right") {
                 var m = r.top - a.top;
                 var b = 0;
-                var y = r.width;
+                var g = r.width;
                 if (o === "right") {
                     b = r.width;
-                    y = 0;
+                    g = 0;
                 }
-                var g = "".concat(b, " 0");
+                var y = "".concat(b, " 0");
                 var w = "".concat(b, " ").concat(a.height);
                 var S = "".concat(b, " ").concat(m);
-                var O = "".concat(y, " ").concat(m);
-                var P = "".concat(b, " ").concat(m + r.height);
-                var j = "".concat(y, " ").concat(m + r.height);
-                var C = "\n                        M ".concat(g, "\n                        S ").concat(S, " , ").concat(O, "\n                        L ").concat(S, "\n                        L ").concat(P, "\n                        L ").concat(j, "\n                        S ").concat(P, " , ").concat(w, "\n                    ");
+                var P = "".concat(g, " ").concat(m);
+                var O = "".concat(b, " ").concat(m + r.height);
+                var C = "".concat(g, " ").concat(m + r.height);
+                var E = "\n                        M ".concat(y, "\n                        S ").concat(S, " , ").concat(P, "\n                        L ").concat(S, "\n                        L ").concat(O, "\n                        L ").concat(C, "\n                        S ").concat(O, " , ").concat(w, "\n                    ");
                 return {
-                    hitAreaPath: C,
+                    hitAreaPath: E,
                     hitAreaStyle: {
                         left: r.left,
                         top: a.top,
@@ -553,12 +599,12 @@
             hitAreaStyle: {}
         };
     };
-    var le =  n().forwardRef((function(e, t) {
+    var se =  n().forwardRef((function(e, t) {
         var o = e.anchorRect, a = e.popoverEl, i = e.popoverPlacement;
-        var l = (0, r.useState)(null), c = Z(l, 2), u = c[0], f = c[1];
-        var s = (0, r.useState)({}), p = Z(s, 2), v = p[0], d = p[1];
+        var l = (0, r.useState)(null), c = ne(l, 2), u = c[0], f = c[1];
+        var s = (0, r.useState)({}), p = ne(s, 2), v = p[0], d = p[1];
         (0, r.useEffect)((function() {
-            var e = ie({
+            var e = fe({
                 anchorRect: o,
                 popoverEl: a,
                 popoverPlacement: i
@@ -568,7 +614,7 @@
         }), [ o, a, i ]);
         if (u != null) {
             
-            return n().createElement(Q, {
+            return n().createElement(re, {
                 "data-test": "popover-hit-area",
                 style: v
             },  n().createElement("path", {
@@ -578,17 +624,17 @@
         }
         return null;
     }));
-    le.propTypes = ae;
-    /* harmony default export */    const ce = le;
+    se.propTypes = ue;
+    /* harmony default export */    const pe = se;
     // CONCATENATED MODULE: ./src/Popover/PopoverProvider.tsx
-    var ue =  (0, r.createContext)({});
-    var fe = {
-        children: a().node,
-        hideArrow: a().bool
+    var ve =  (0, r.createContext)({});
+    var de = {
+        children: O().node,
+        hideArrow: O().bool
     };
     /**
  * Provides a method for controlling certain `Popover` props in components that use `Popover`.
- */    var se = function e(t) {
+ */    var he = function e(t) {
         var o = t.children, a = t.hideArrow;
         var i = (0, r.useMemo)((function() {
             return {
@@ -596,14 +642,14 @@
             };
         }), [ a ]);
         
-        return n().createElement(ue.Provider, {
+        return n().createElement(ve.Provider, {
             value: i
         }, o);
     };
-    se.propTypes = fe;
+    he.propTypes = de;
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var pe = {
+    var me = {
         body: {
             appendChild: function e() {
                 return [];
@@ -657,16 +703,16 @@
             search: ""
         }
     };
-    function ve() {
-        var e = typeof document !== "undefined" ? document : pe;
+    function be() {
+        var e = typeof document !== "undefined" ? document : me;
         return e;
     }
-    var de = ve();
-    /* harmony default export */    const he = /* unused pure expression or super */ null && de;
+    var ge = be();
+    /* harmony default export */    const ye = /* unused pure expression or super */ null && ge;
     // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var me = {
-        document: pe,
+    var we = {
+        document: me,
         navigator: {
             userAgent: ""
         },
@@ -720,22 +766,22 @@
             clearTimeout(t);
         }
     };
-    function be() {
-        var e = typeof window !== "undefined" ? window : me;
+    function Se() {
+        var e = typeof window !== "undefined" ? window : we;
         return e;
     }
-    var ye = be();
-    /* harmony default export */    const ge = /* unused pure expression or super */ null && ye;
+    var Pe = Se();
+    /* harmony default export */    const Oe = /* unused pure expression or super */ null && Pe;
     // CONCATENATED MODULE: ./src/utils/getBoundingClientRect.ts
-    function we(e) {
+    function Ce(e) {
         "@babel/helpers - typeof";
-        return we = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return Ce = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, we(e);
+        }, Ce(e);
     }
-    function Se(e, t) {
+    function Ee(e, t) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -745,46 +791,46 @@
         }
         return r;
     }
-    function Oe(e) {
+    function je(e) {
         for (var t = 1; t < arguments.length; t++) {
             var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? Se(Object(r), !0).forEach((function(t) {
-                Pe(e, t, r[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Se(Object(r)).forEach((function(t) {
+            t % 2 ? Ee(Object(r), !0).forEach((function(t) {
+                xe(e, t, r[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Ee(Object(r)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
             }));
         }
         return e;
     }
-    function Pe(e, t, r) {
-        return (t = je(t)) in e ? Object.defineProperty(e, t, {
+    function xe(e, t, r) {
+        return (t = Ae(t)) in e ? Object.defineProperty(e, t, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[t] = r, e;
     }
-    function je(e) {
-        var t = Ce(e, "string");
-        return "symbol" == we(t) ? t : t + "";
+    function Ae(e) {
+        var t = ke(e, "string");
+        return "symbol" == Ce(t) ? t : t + "";
     }
-    function Ce(e, t) {
-        if ("object" != we(e) || !e) return e;
+    function ke(e, t) {
+        if ("object" != Ce(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
             var n = r.call(e, t || "default");
-            if ("object" != we(n)) return n;
+            if ("object" != Ce(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
     }
     // Checks if browser is Safari
-        function Ee() {
+        function Te() {
         return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
     }
     // Formats return value to DOMRect
-        function xe(e) {
-        return Oe(Oe({}, e), {}, {
+        function Re(e) {
+        return je(je({}, e), {}, {
             top: e.y,
             left: e.x,
             right: e.x + e.width,
@@ -798,18 +844,18 @@
  * @param {boolean} offsets - Use when position of element relative to the layout viewport offsets are needed for Safari.
  * @returns {Omit<DOMRect, 'toJSON'>}
  * @public
- */    function Ae(e, t) {
+ */    function Me(e, t) {
         var r, n;
         var o = e.getBoundingClientRect();
-        var a = Ee();
+        var a = Te();
         if (!t || !a) {
             return o;
         }
-        var i = be();
+        var i = Se();
         var l = o.left + (((r = i.visualViewport) === null || r === void 0 ? void 0 : r.offsetLeft) || 0);
         var c = o.top + (((n = i.visualViewport) === null || n === void 0 ? void 0 : n.offsetTop) || 0);
         var u = o.width, f = o.height;
-        return xe({
+        return Re({
             width: u,
             height: f,
             x: l,
@@ -823,7 +869,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function ke(e, t) {
+    function We(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -836,16 +882,16 @@
         }
     }
     // CONCATENATED MODULE: ./src/Popover/Popover.tsx
-    function Te(e) {
+    function qe(e) {
         "@babel/helpers - typeof";
-        return Te = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return qe = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, Te(e);
+        }, qe(e);
     }
-    function Re() {
-        return Re = Object.assign ? Object.assign.bind() : function(e) {
+    function He() {
+        return He = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -853,9 +899,9 @@
                 }
             }
             return e;
-        }, Re.apply(null, arguments);
+        }, He.apply(null, arguments);
     }
-    function Me(e, t) {
+    function Ie(e, t) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -865,60 +911,60 @@
         }
         return r;
     }
-    function We(e) {
+    function Le(e) {
         for (var t = 1; t < arguments.length; t++) {
             var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? Me(Object(r), !0).forEach((function(t) {
-                qe(e, t, r[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Me(Object(r)).forEach((function(t) {
+            t % 2 ? Ie(Object(r), !0).forEach((function(t) {
+                De(e, t, r[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Ie(Object(r)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
             }));
         }
         return e;
     }
-    function qe(e, t, r) {
-        return (t = He(t)) in e ? Object.defineProperty(e, t, {
+    function De(e, t, r) {
+        return (t = Fe(t)) in e ? Object.defineProperty(e, t, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[t] = r, e;
     }
-    function He(e) {
-        var t = Ie(e, "string");
-        return "symbol" == Te(t) ? t : t + "";
+    function Fe(e) {
+        var t = $e(e, "string");
+        return "symbol" == qe(t) ? t : t + "";
     }
-    function Ie(e, t) {
-        if ("object" != Te(e) || !e) return e;
+    function $e(e, t) {
+        if ("object" != qe(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
             var n = r.call(e, t || "default");
-            if ("object" != Te(n)) return n;
+            if ("object" != qe(n)) return n;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
     }
-    function Le(e, t) {
-        return Ne(e) || _e(e, t) || Fe(e, t) || De();
+    function _e(e, t) {
+        return Xe(e) || Ke(e, t) || Ve(e, t) || Ne();
     }
-    function De() {
+    function Ne() {
         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 Fe(e, t) {
+    function Ve(e, t) {
         if (e) {
-            if ("string" == typeof e) return $e(e, t);
+            if ("string" == typeof e) return ze(e, t);
             var r = {}.toString.call(e).slice(8, -1);
-            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? $e(e, t) : void 0;
+            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? ze(e, t) : void 0;
         }
     }
-    function $e(e, t) {
+    function ze(e, t) {
         (null == t || t > e.length) && (t = e.length);
         for (var r = 0, n = Array(t); r < t; r++) {
             n[r] = e[r];
         }
         return n;
     }
-    function _e(e, t) {
+    function Ke(e, t) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
             var n, o, a, i, l = [], c = !0, u = !1;
@@ -940,12 +986,12 @@
             return l;
         }
     }
-    function Ne(e) {
+    function Xe(e) {
         if (Array.isArray(e)) return e;
     }
-    function Ve(e, t) {
+    function Be(e, t) {
         if (null == e) return {};
-        var r, n, o = ze(e, t);
+        var r, n, o = Ye(e, t);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (n = 0; n < a.length; n++) {
@@ -954,7 +1000,7 @@
         }
         return o;
     }
-    function ze(e, t) {
+    function Ye(e, t) {
         if (null == e) return {};
         var r = {};
         for (var n in e) {
@@ -969,78 +1015,78 @@
     /** @public */
     /** @public */
     /** @public */
-    /** @public */    var Ke = [ "clickAway", "escapeKey", "offScreen", "tabKey" ];
-    var Xe = {
-        align: a().oneOf([ "center", "edge", "end" ]),
-        anchor: a().object,
-        animation: a().bool,
-        animationConfig: a().object,
-        appearance: a().oneOf([ "normal", "inverted", "none" ]),
-        autoCloseWhenOffScreen: a().bool,
-        canCoverAnchor: a().bool,
-        children: a().oneOfType([ a().node, a().func ]),
-        closeReasons: a().arrayOf(a().oneOf(Ke)),
-        defaultPlacement: a().oneOf([ "above", "below", "left", "right", "vertical", "horizontal" ]),
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        id: a().string,
-        hideArrow: a().bool,
-        hitAreaRef: a().oneOfType([ a().func, a().object ]),
-        onRequestClose: a().func,
-        open: a().bool,
-        outerRef: a().oneOfType([ a().func, a().object ]),
-        pointTo: a().shape({
-            x: a().number,
-            y: a().number
+    /** @public */    var Ue = [ "clickAway", "escapeKey", "offScreen", "tabKey" ];
+    var Ge = {
+        align: O().oneOf([ "center", "edge", "end" ]),
+        anchor: O().object,
+        animation: O().bool,
+        animationConfig: O().object,
+        appearance: O().oneOf([ "normal", "inverted", "none" ]),
+        autoCloseWhenOffScreen: O().bool,
+        canCoverAnchor: O().bool,
+        children: O().oneOfType([ O().node, O().func ]),
+        closeReasons: O().arrayOf(O().oneOf(Ue)),
+        defaultPlacement: O().oneOf([ "above", "below", "left", "right", "vertical", "horizontal" ]),
+        elementRef: O().oneOfType([ O().func, O().object ]),
+        id: O().string,
+        hideArrow: O().bool,
+        hitAreaRef: O().oneOfType([ O().func, O().object ]),
+        onRequestClose: O().func,
+        open: O().bool,
+        outerRef: O().oneOfType([ O().func, O().object ]),
+        pointTo: O().shape({
+            x: O().number,
+            y: O().number
         }),
-        repositionMode: a().oneOf([ "none", "flip", "any" ]),
-        retainFocus: a().bool,
-        takeFocus: a().bool,
-        splunkTheme: a().object
+        repositionMode: O().oneOf([ "none", "flip", "any" ]),
+        retainFocus: O().bool,
+        takeFocus: O().bool,
+        splunkTheme: O().object
     };
-    var Be = {
+    var Je = {
         passive: false,
         capture: true
     };
-    function Ye(e, t) {
+    function Qe(e, t) {
         var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-        return !!e && !!t && s()(e, (function(e, n) {
-            if (b()(e)) {
+        return !!e && !!t && u()(e, (function(e, n) {
+            if (h()(e)) {
                 return Math.abs(t[n] - e) <= r;
             }
             return t[n] === e;
         }));
     }
-    function Ue(e) {
-        var t = e.anchorPos, r = e.borderRadius, n = e.placement, o = e.outerContainerStyle, a = e.outerContainerEl;
+    function Ze(e) {
+        var t = e.anchorPos, r = e.borderRadius, n = e.placement, o = e.outerContainerStyle, i = e.outerContainerEl;
         if (n === "misaligned") {
             return [ {
                 display: "none"
             } ];
         }
-        var i = {
+        var l = {
             display: "block"
         };
-        var c = X * 2;
+        var c = G * 2;
         // bottom edge
-                var u = a.offsetHeight / 2 - (X * 2 + r + X / 2);
+                var u = i.offsetHeight / 2 - (G * 2 + r + G / 2);
         // top edge
-                var f = -(a.offsetHeight / 2 - (X + r + X / 2));
-        var s = t.center - (o.top + a.offsetHeight / 2) - X / 2;
-        var p = l()(s, f, u);
+                var f = -(i.offsetHeight / 2 - (G + r + G / 2));
+        var s = t.center - (o.top + i.offsetHeight / 2) - G / 2;
+        var p = a()(s, f, u);
         // right edge
-                var v = a.offsetWidth / 2 - (c + X + r);
+                var v = i.offsetWidth / 2 - (c + G + r);
         // left edge
-                var d = -(a.offsetWidth / 2 - (X + r));
-        var h = t.middle - (o.left + a.offsetWidth / 2) - X;
-        var m = l()(h, d, v);
+                var d = -(i.offsetWidth / 2 - (G + r));
+        var h = t.middle - (o.left + i.offsetWidth / 2) - G;
+        var m = a()(h, d, v);
         var b = {
             left: {
-                translateX: X / 2,
+                translateX: G / 2,
                 translateY: p,
                 rotate: 90
             },
             right: {
-                translateX: -X / 2,
+                translateX: -G / 2,
                 translateY: p,
                 rotate: -90
             },
@@ -1055,36 +1101,36 @@
                 rotate: 0
             }
         };
-        var y = b[n];
-        i.transform = "translate(".concat(y.translateX, "px, ").concat(y.translateY, "px) rotate(").concat(y.rotate, "deg)");
+        var g = b[n];
+        l.transform = "translate(".concat(g.translateX, "px, ").concat(g.translateY, "px) rotate(").concat(g.rotate, "deg)");
         // set new positions
-                var g = {
+                var y = {
             left: "right",
             right: "left",
             above: "bottom",
             below: "top"
         };
-        i[g[n]] = "0";
+        l[y[n]] = "0";
         var w = {
             left: "top",
             right: "top",
             above: "left",
             below: "left"
         };
-        i[w[n]] = "50%";
-        return [ i, y ];
+        l[w[n]] = "50%";
+        return [ l, g ];
     }
-    function Ge(e) {
+    function et(e) {
         var t = e.anchorEl, r = e.offsets, n = r === void 0 ? false : r, o = e.pointTo;
-        var a = Ae(t, n);
+        var a = Me(t, n);
         var i = {
             // these are rounded to avoid causing visual regressions
             // they were previously clientWidth and clientHeight which were already rounded
             width: Math.round(a.width),
             height: Math.round(a.height)
         };
-        var l = o && v()(o, "x");
-        var c = o && v()(o, "y");
+        var l = o && s()(o, "x");
+        var c = o && s()(o, "y");
         i.left = l ? a.left + ((o === null || o === void 0 ? void 0 : o.x) || 0) : a.left;
         i.top = c ? a.top + ((o === null || o === void 0 ? void 0 : o.y) || 0) : a.top;
         i.right = l ? i.left + i.width : a.left + i.width || a.right;
@@ -1097,11 +1143,11 @@
         i.center = c ? i.top : a.top + (i.bottom - a.top) / 2;
         return i;
     }
-    function Je(e) {
+    function tt(e) {
         return e !== window && e !== window.document;
     }
-    function Qe(e, t) {
-        var r = be();
+    function rt(e, t) {
+        var r = Se();
         if (e.top < 0 || e.top > r.innerHeight || e.left < 0 || e.left > r.innerWidth) {
             return true;
         }
@@ -1112,47 +1158,48 @@
         }
         return false;
     }
-    function Ze(e, t) {
+    function nt(e, t) {
         // this accomodates the arrow height
         // and provides some spacing between the end of the Popover and the edge of the window
-        var r = X * 2;
-        return t !== "none" && e != null && b()(e) ? e - r : e || null;
+        var r = G * 2;
+        return t !== "none" && e != null && h()(e) ? e - r : e || null;
     }
-    var et = {};
+    var ot = {};
     /**
  * `Popover` is used to create layovers such as dropdowns, contextual menus, or tooltips. Use
  * this only when the other components don't provide sufficient functionality or control. A controlled
  * `Dropdown` covers use cases where you might consider using `Popover` directly.
- */    function tt(e) {
+ */    function at(e) {
         var t, o;
-        var a = e.align, i = a === void 0 ? "center" : a, l = e.anchor, c = e.animation, f = c === void 0 ? true : c, s = e.animationConfig, p = s === void 0 ? et : s, v = e.appearance, d = v === void 0 ? "normal" : v, m = e.autoCloseWhenOffScreen, b = m === void 0 ? true : m, y = e.canCoverAnchor, w = e.children, O = e.closeReasons, C = O === void 0 ? Ke : O, x = e.defaultPlacement, k = x === void 0 ? "below" : x, R = e.elementRef, q = e.hideArrow, H = e.hitAreaRef, I = e.id, L = e.onRequestClose, D = e.open, F = e.outerRef, $ = e.pointTo, N = e.repositionMode, V = N === void 0 ? "flip" : N, z = e.retainFocus, K = z === void 0 ? true : z, Y = e.takeFocus, Q = Ve(e, [ "align", "anchor", "animation", "animationConfig", "appearance", "autoCloseWhenOffScreen", "canCoverAnchor", "children", "closeReasons", "defaultPlacement", "elementRef", "hideArrow", "hitAreaRef", "id", "onRequestClose", "open", "outerRef", "pointTo", "repositionMode", "retainFocus", "takeFocus" ]);
+        var a = e.align, i = a === void 0 ? "center" : a, c = e.anchor, u = e.animation, f = u === void 0 ? true : u, s = e.animationConfig, p = s === void 0 ? ot : s, d = e.appearance, h = d === void 0 ? "normal" : d, m = e.autoCloseWhenOffScreen, g = m === void 0 ? true : m, w = e.canCoverAnchor, P = e.children, O = e.closeReasons, E = O === void 0 ? Ue : O, x = e.defaultPlacement, k = x === void 0 ? "below" : x, R = e.elementRef, q = e.hideArrow, H = e.hitAreaRef, I = e.id, L = e.onRequestClose, D = e.open, F = e.outerRef, $ = e.pointTo, _ = e.repositionMode, N = _ === void 0 ? "flip" : _, V = e.retainFocus, z = V === void 0 ? true : V, X = e.takeFocus, B = e.toggleId, Y = Be(e, [ "align", "anchor", "animation", "animationConfig", "appearance", "autoCloseWhenOffScreen", "canCoverAnchor", "children", "closeReasons", "defaultPlacement", "elementRef", "hideArrow", "hitAreaRef", "id", "onRequestClose", "open", "outerRef", "pointTo", "repositionMode", "retainFocus", "takeFocus", "toggleId" ]);
         // @docs-props-type PopoverPropsBase
                 if (false) {}
-        var Z = (0, r.useState)(D), ee = Le(Z, 2), te = ee[0], re = ee[1];
-        var ne = (0, r.useState)(false), oe = Le(ne, 2), ae = oe[0], ie = oe[1];
-        if (D !== ae) {
+        var U = (0, r.useState)(D), Q = _e(U, 2), re = Q[0], ne = Q[1];
+        var oe = (0, r.useState)(false), ae = _e(oe, 2), ie = ae[0], le = ae[1];
+        if (D !== ie) {
             // formerly implemented by componentWillReceiveProps
             // we can't use prevOpen here since that's a ref behind the scenes
             // and won't get updated until the component re-renders successfully
             // whereas setAnimating will interrupt the re-render and we'll end up in an infinite loop
             // so we need to update the value of wasOpen at the same time
-            re(f);
-            ie(D);
+            ne(f);
+            le(D);
         }
         // this is a single state object because all these properties
         // are updated at the same time by setPlacement
-                var le = (0, r.useState)({}), fe = Le(le, 2), se = fe[0], pe = fe[1];
-        var ve = (0, r.useRef)(true);
-        var de = (0, r.useRef)(false);
-        var he = (0, r.useRef)(null);
+                var ce = (0, r.useState)({}), ue = _e(ce, 2), fe = ue[0], se = ue[1];
+        var de = (0, r.useRef)(true);
+        var he = (0, r.useRef)(false);
         var me = (0, r.useRef)(null);
-        var ye = (0, r.useRef)(null);
-        var ge = {
-            anchorHeight: ((t = se.anchorPos) === null || t === void 0 ? void 0 : t.height) || null,
-            anchorWidth: ((o = se.anchorPos) === null || o === void 0 ? void 0 : o.width) || null,
-            placement: se.placement || null,
-            maxHeight: Ze(se.maxHeight, d),
-            maxWidth: Ze(se.maxWidth, d)
+        var be = (0, r.useRef)(null);
+        var ge = (0, r.useRef)(null);
+        var ye = {
+            anchorHeight: ((t = fe.anchorPos) === null || t === void 0 ? void 0 : t.height) || null,
+            anchorWidth: ((o = fe.anchorPos) === null || o === void 0 ? void 0 : o.width) || null,
+            placement: fe.placement || null,
+            maxHeight: nt(fe.maxHeight, h),
+            maxWidth: nt(fe.maxWidth, h),
+            toggleId: B
         };
         var we = (0, r.useMemo)((function() {
             return f ? {
@@ -1161,92 +1208,92 @@
                 opacity: 1
             };
         }), [ f, D ]);
-        var Se = be();
-        var Oe = D || te;
-        var Pe = (0, r.useContext)(T()) || Se;
-        var je = Pe !== Se;
-        var Ce = (0, r.useContext)(ue), Ee = Ce.hideArrow;
-        var xe = q !== null && q !== void 0 ? q : Ee;
+        var Pe = Se();
+        var Oe = D || re;
+        var Ce = (0, r.useContext)(T()) || Pe;
+        var Ee = Ce !== Pe;
+        var je = (0, r.useContext)(ve), xe = je.hideArrow;
+        var Ae = q !== null && q !== void 0 ? q : xe;
         (0, r.useEffect)((function() {
             if (false) {}
-        }), [ l ]);
-        var Ae = (0, r.useCallback)((function(e) {
-            if (D && (C === null || C === void 0 ? void 0 : C.includes(e.reason))) {
+        }), [ c ]);
+        var ke = (0, r.useCallback)((function(e) {
+            if (D && (E === null || E === void 0 ? void 0 : E.includes(e.reason))) {
                 L === null || L === void 0 ? void 0 : L(e);
             }
-        }), [ C, D, L ]);
+        }), [ E, D, L ]);
         var Te = (0, r.useCallback)((function(e, t) {
-            var r = Qe(e, t);
+            var r = rt(e, t);
             if (r) {
-                Ae({
+                ke({
                     reason: "offScreen"
                 });
             }
             return r;
-        }), [ Ae ]);
-        var Me = M()(), qe = Me.borderRadius, He = Me.spacingXSmall;
-        var Ie = parseInt(qe, 10);
-        var De = parseInt(He, 10);
+        }), [ ke ]);
+        var Re = M()(), Me = Re.borderRadius, qe = Re.spacingXSmall;
+        var Ie = parseInt(Me, 10);
+        var De = parseInt(qe, 10);
         // this is intentionally smaller when the arrow is hidden to address SUI-5452
-                var Fe = xe ? De : X;
+                var Fe = Ae ? De : G;
         // do not call this directly - use setPlacement (the throttled version) instead
                 var $e = (0, r.useCallback)((function(e) {
-            pe((function(t) {
+            se((function(t) {
                 var r, n;
                 // If these conditions are not met, we cannot set the popover.
-                                if (!D || !ye.current || !l) {
+                                if (!D || !ge.current || !c) {
                     // if (__DEV__ && !anchor && open) {
                     //     throw new Error(`Invalid anchor ${anchor} provided to Popover.`);
                     // }
                     return t;
                 }
-                var o = Ge({
-                    anchorEl: l,
+                var o = et({
+                    anchorEl: c,
                     pointTo: $
                 });
-                var a = Ge({
-                    anchorEl: l,
+                var a = et({
+                    anchorEl: c,
                     offsets: true,
                     pointTo: $
                 });
-                var c = Je(Pe) ? Ge({
-                    anchorEl: Pe,
+                var l = tt(Ce) ? et({
+                    anchorEl: Ce,
                     pointTo: $
                 }) : undefined;
-                if (e && b) {
-                    if (Te(o, c)) {
+                if (e && g) {
+                    if (Te(o, l)) {
                         return t;
                     }
                 }
-                var u = _({
+                var u = K({
                     align: i,
                     anchorPos: a,
-                    scrollContainerPos: c,
-                    canCoverAnchor: y,
+                    scrollContainerPos: l,
+                    canCoverAnchor: w,
                     defaultPlacement: k,
-                    repositionMode: V,
-                    outerContainerEl: ye.current,
+                    repositionMode: N,
+                    outerContainerEl: ge.current,
                     padding: Fe,
-                    windowWidth: Se.innerWidth,
-                    windowHeight: Se.innerHeight
+                    windowWidth: Pe.innerWidth,
+                    windowHeight: Pe.innerHeight
                 }), f = u.placement, s = u.outerContainerStyle, p = u.maxHeight, v = u.maxWidth;
-                var d = Ye(a, t.anchorPos) && Ye(s, t.outerContainerStyle) && f === t.placement && p === t.maxHeight && v === t.maxWidth;
+                var d = Qe(a, t.anchorPos) && Qe(s, t.outerContainerStyle) && f === t.placement && p === t.maxHeight && v === t.maxWidth;
                 var h = true;
                 var m = {};
-                var g;
-                if (he.current) {
-                    var w = Ue({
+                var b;
+                if (me.current) {
+                    var S = Ze({
                         anchorPos: a,
                         borderRadius: Ie,
                         outerContainerStyle: s,
                         placement: f,
-                        outerContainerEl: ye.current
+                        outerContainerEl: ge.current
                     });
-                    var O = Le(w, 2);
-                    m = O[0];
-                    g = O[1];
+                    var P = _e(S, 2);
+                    m = P[0];
+                    b = P[1];
                 }
-                h = Ye(S()(m, "transform"), S()(t.arrowStyle, "transform")) && Ye((r = g) !== null && r !== void 0 ? r : {}, (n = t.arrowStyleTransformMeta) !== null && n !== void 0 ? n : {});
+                h = Qe(y()(m, "transform"), y()(t.arrowStyle, "transform")) && Qe((r = b) !== null && r !== void 0 ? r : {}, (n = t.arrowStyleTransformMeta) !== null && n !== void 0 ? n : {});
                 // If none of the position data has changed, do not set state.
                                 if (d && h) {
                     return t;
@@ -1254,100 +1301,102 @@
                 return {
                     anchorPos: a,
                     arrowStyle: m,
-                    arrowStyleTransformMeta: g,
+                    arrowStyleTransformMeta: b,
                     outerContainerStyle: s,
                     placement: f,
                     maxHeight: p,
                     maxWidth: v
                 };
             }));
-        }), [ i, l, b, Ie, Fe, y, Te, k, D, $, V, Pe, Se.innerHeight, Se.innerWidth ]);
+        }), [ i, c, g, Ie, Fe, w, Te, k, D, $, N, Ce, Pe.innerHeight, Pe.innerWidth ]);
         // these are useMemo rather than useCallback so that ESLint can correctly analyze the dependencies
         // see https://github.com/facebook/react/issues/19240#issuecomment-652945246
-                var _e = (0, r.useMemo)((function() {
-            return P()($e.bind(null, true), 0);
+                var Ne = (0, r.useMemo)((function() {
+            return S()($e.bind(null, true), 0);
         }), [ $e ]);
-        var Ne = (0, r.useMemo)((function() {
-            return P()($e.bind(null, true), 0);
+        var Ve = (0, r.useMemo)((function() {
+            return S()($e.bind(null, true), 0);
         }), [ $e ]);
         var ze = (0, r.useMemo)((function() {
-            return P()($e, 0, {
+            return S()($e, 0, {
                 leading: false
             });
         }), [ $e ]);
         // this needs to run on every render - equivalent to componentDidUpdate
                 (0, r.useEffect)((function() {
-            if (!me.current) {
+            if (!be.current) {
                 return;
             }
-            if (D || te) {
+            if (D || re) {
                 ze();
             }
         }));
         (0, r.useEffect)((function() {
-            if (Y && D && me.current && se.placement != null && !de.current) {
-                de.current = true;
-                (0, W.takeFocus)(me.current);
+            if (X && D && be.current && fe.placement != null && !he.current) {
+                he.current = true;
+                (0, W.takeFocus)(be.current);
             }
-        }), [ D, se.placement, Y ]);
-        // it is not part of the previous useEffect because it needs to be equivalent to componentWillUnmount
-                (0, r.useEffect)((function() {
+        }), [ D, fe.placement, X ]);
+        (0, r.useEffect)((function() {
+            // we need to set this to true on every mount because React.StrictMode will call the effect twice
+            // and we need to ensure that allowAnimationUpdates is true while the component is mounted
+            de.current = true;
             return function() {
                 ze.cancel();
-                _e.cancel();
                 Ne.cancel();
-                ve.current = false;
+                Ve.cancel();
+                de.current = false;
             };
-            // no dependencies here since this needs to set up a cleanup function exactly once
+            // no dependencies here since this is equivalent to componentDidMount and componentWillUnmount
             // eslint-disable-next-line react-hooks/exhaustive-deps
                 }), []);
         // EventListeners only need to be rendered when open,
         // otherwise leads to negative performance impacts
-                var Xe = Oe ?  n().createElement(n().Fragment, null, je &&  n().createElement(E(), {
-            target: Pe,
+                var Ke = Oe ?  n().createElement(n().Fragment, null, Ee &&  n().createElement(j(), {
+            target: Ce,
             eventType: "scroll",
-            listener: _e,
-            options: Be,
+            listener: Ne,
+            options: Je,
             key: "eventListener"
-        }),  n().createElement(E(), {
-            target: Se,
+        }),  n().createElement(j(), {
+            target: Pe,
             eventType: "resize",
             listener: ze,
             key: "eventListenerOnWindowResize"
-        }),  n().createElement(E(), {
-            target: Se,
+        }),  n().createElement(j(), {
+            target: Pe,
             eventType: "scroll",
-            listener: Ne,
-            options: Be,
+            listener: Ve,
+            options: Je,
             key: "eventListenerOnWindowScroll"
         })) : null;
-        var tt = (0, r.useCallback)((function() {
+        var Xe = (0, r.useCallback)((function() {
             // checking allowAnimationUpdates avoids trying to update state after the component has been unmounted - see SUI-3666
-            if (ve.current) {
-                re(false);
+            if (de.current) {
+                ne(false);
             }
         }), []);
-        var rt = (0, r.useCallback)((function(e) {
-            me.current = e;
-            if (e && Y) {
-                u()(W.takeFocus, e);
+        var Ye = (0, r.useCallback)((function(e) {
+            be.current = e;
+            if (e && X) {
+                l()(W.takeFocus, e);
             }
-            ke(R, e);
-        }), [ R, Y ]);
-        var nt = (0, r.useCallback)((function(e) {
-            ye.current = e;
-            ke(F, e);
+            We(R, e);
+        }), [ R, X ]);
+        var Ge = (0, r.useCallback)((function(e) {
+            ge.current = e;
+            We(F, e);
         }), [ F ]);
-        var ot = (0, r.useCallback)((function(e) {
-            if (me.current) {
-                if (K) {
-                    (0, W.handleTab)(me.current, e);
+        var at = (0, r.useCallback)((function(e) {
+            if (be.current) {
+                if (z) {
+                    (0, W.handleTab)(be.current, e);
                 } else if ((0, W.isTabKey)(e)) {
-                    var t = (0, W.getSortedTabbableElements)(me.current);
+                    var t = (0, W.getSortedTabbableElements)(be.current);
                     if (t.length > 0) {
                         var r = e.shiftKey ? t[0] : t[t.length - 1];
                         if (r === e.target) {
-                            Ae({
+                            ke({
                                 event: e,
                                 reason: "tabKey"
                             });
@@ -1355,73 +1404,73 @@
                     }
                 }
             }
-        }), [ Ae, K ]);
-        var at = (0, r.useMemo)((function() {
+        }), [ ke, z ]);
+        var it = (0, r.useMemo)((function() {
             return {
                 opacity: f ? 0 : 1
             };
         }), [ f ]);
-        var it = (0, r.useMemo)((function() {
-            return We({
+        var lt = (0, r.useMemo)((function() {
+            return Le({
                 tension: 300,
                 friction: 20,
                 clamp: true
             }, p);
         }), [ p ]);
-        var lt = (0, j.useAnimation)({
-            from: at,
+        var ct = (0, C.useAnimation)({
+            from: it,
             to: we,
             // Setting clamp to true will stop animating at the point it hit's it's goal value.
             // This will prevent click through while animating out (SUI-6618).
-            config: it,
-            onRest: tt
+            config: lt,
+            onRest: Xe
         });
-        var ct = (0, r.useMemo)((function() {
-            return We(We({}, se.outerContainerStyle), lt);
-        }), [ se.outerContainerStyle, lt ]);
         var ut = (0, r.useMemo)((function() {
-            return h()(C === null || C === void 0 ? void 0 : C.filter((function(e) {
+            return Le(Le({}, fe.outerContainerStyle), ct);
+        }), [ fe.outerContainerStyle, ct ]);
+        var ft = (0, r.useMemo)((function() {
+            return v()(E === null || E === void 0 ? void 0 : E.filter((function(e) {
                 return e !== "offScreen";
             })), A().possibleCloseReasons);
-        }), [ C ]);
-        var ft = g()(w) ? w(ge) : w;
+        }), [ E ]);
+        var st = b()(P) ? P(ye) : P;
         
-        return n().createElement(n().Fragment, null, Xe,  n().createElement(A(), {
-            closeReasons: ut,
+        return n().createElement(n().Fragment, null, Ke,  n().createElement(A(), {
+            closeReasons: ft,
             open: Oe,
-            onRequestClose: Ae,
+            onRequestClose: ke,
             key: "Layer"
-        }, Oe && me.current && H &&  n().createElement(ce, {
-            anchorRect: se.anchorPos,
-            popoverEl: me.current,
-            popoverPlacement: se.placement,
+        }, Oe && be.current && H &&  n().createElement(pe, {
+            anchorRect: fe.anchorPos,
+            popoverEl: be.current,
+            popoverPlacement: fe.placement,
             ref: H
-        }), Oe &&  n().createElement(B, {
+        }), Oe &&  n().createElement(J, {
             "data-test": "outer-popover",
-            style: ct,
-            ref: nt
-        },  n().createElement(U, Re({
-            $appearance: d,
+            style: ut,
+            ref: Ge
+        },  n().createElement(Z, He({
+            $appearance: h,
             $boxPadding: Fe,
             $open: D,
             "data-test": "popover",
-            ref: rt,
+            ref: Ye,
             id: I,
-            onKeyDown: ot
-        }, Q),  n().createElement(n().Fragment, null, d === "none" && ft, d !== "none" && !xe &&  n().createElement(J, {
+            onKeyDown: at
+        }, Y),  n().createElement(n().Fragment, null, h === "none" && st, h !== "none" && !Ae &&  n().createElement(te, {
             "data-test": "popover-arrow",
-            $appearance: d,
-            ref: he,
-            style: se.arrowStyle
-        }), d !== "none" &&  n().createElement(G, {
-            $appearance: d
-        }, ft))))));
+            $appearance: h,
+            ref: me,
+            style: fe.arrowStyle
+        }), h !== "none" &&  n().createElement(ee, {
+            $appearance: h
+        }, st))))));
     }
-    tt.propTypes = Xe;
-    tt.possibleCloseReasons = Ke;
-    /* harmony default export */    const rt = tt;
+    at.propTypes = Ge;
+    at.possibleCloseReasons = Ue;
+    /* harmony default export */    const it = at;
     // CONCATENATED MODULE: ./src/Popover/PopoverMenuContext.tsx
-    var nt =  (0, r.createContext)({});
+    var lt =  (0, r.createContext)({});
     // CONCATENATED MODULE: ./src/Popover/index.ts
     module.exports = t;
     /******/})();