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

package/Modal.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
-            /******/ () => t["default"]
-            /******/ : () => t
+        /******/ e.n = r => {
+            /******/ var t = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
             /******/;
-            e.d(r, {
-                a: r
+            e.d(t, {
+                a: t
             });
-            /******/            return r;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var n in r) {
-                /******/ if (e.o(r, n) && !e.o(t, n)) {
-                    /******/ Object.defineProperty(t, n, {
+        /******/ e.d = (r, t) => {
+            /******/ for (var n in t) {
+                /******/ if (e.o(t, n) && !e.o(r, n)) {
+                    /******/ Object.defineProperty(r, n, {
                         enumerable: true,
-                        get: r[n]
+                        get: t[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
         /******/;
     })();
     /******/
@@ -56,260 +56,242 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var t = {};
+    /************************************************************************/    var r = {};
     // ESM COMPAT FLAG
-        e.r(t);
+        e.r(r);
     // EXPORTS
-        e.d(t, {
-        Body: () => /* reexport */ A,
+        e.d(r, {
+        Body: () => /* reexport */ D,
         Footer: () => /* reexport */ V,
-        Header: () => /* reexport */ ye,
-        default: () => /* reexport */ $e
+        Header: () => /* reexport */ ue,
+        default: () => /* reexport */ Ie
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var n =  e.n(r);
+    const t = require("react");
+    var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
     var i =  e.n(o);
     // CONCATENATED MODULE: external "lodash/defer"
     const a = require("lodash/defer");
     var l =  e.n(a);
-    // CONCATENATED MODULE: external "lodash/keys"
-    const c = require("lodash/keys");
-    var s =  e.n(c);
     // CONCATENATED MODULE: external "lodash/memoize"
     const u = require("lodash/memoize");
-    var p =  e.n(u);
-    // CONCATENATED MODULE: external "lodash/omit"
-    const d = require("lodash/omit");
-    var f =  e.n(d);
+    var c =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/react-ui/ModalLayer"
-    const y = require("@splunk/react-ui/ModalLayer");
-    var b =  e.n(y);
+    const s = require("@splunk/react-ui/ModalLayer");
+    var f =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
-    const m = require("@splunk/ui-utils/focus");
+    const d = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const v = require("@splunk/ui-utils/id");
+    const p = require("@splunk/ui-utils/id");
+    // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
+    const v = require("@splunk/react-ui/usePrevious");
+    var y =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScrollContainerContext"
-    const h = require("@splunk/react-ui/ScrollContainerContext");
+    const b = require("@splunk/react-ui/ScrollContainerContext");
     // CONCATENATED MODULE: external "styled-components"
-    const g = require("styled-components");
-    var x =  e.n(g);
+    const m = require("styled-components");
+    var g =  e.n(m);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const O = require("@splunk/react-ui/Box");
-    var w =  e.n(O);
+    const h = require("@splunk/react-ui/Box");
+    var O =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/themes"
     const S = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Modal/BodyStyles.ts
-    var k = x()(w()).withConfig({
+    var w = g()(O()).withConfig({
         displayName: "BodyStyles__StyledBox",
         componentId: "lv54z7-0"
-    })([ "background-color:", ";", " flex:0 1 auto;overflow:auto;" ], (0, S.pick)({
+    })([ "background-color:", ";padding:", " ", ";flex:0 1 auto;overflow:auto;" ], (0, 
+    S.pick)({
         enterprise: S.variables.backgroundColor,
         prisma: S.variables.backgroundColorDialog
-    }), (0, S.pick)({
-        enterprise: {
-            comfortable: (0, g.css)([ "padding:28px;" ]),
-            compact: (0, g.css)([ "padding:24px;" ])
-        },
-        prisma: {
-            comfortable: (0, g.css)([ "padding:12px 24px;&:first-child{padding-top:36px;}&:last-child{padding-bottom:36px;}" ]),
-            compact: (0, g.css)([ "padding:8px 24px;&:first-child{padding-top:26px;}&:last-child{padding-bottom:26px;}" ])
-        }
-    }));
+    }), S.variables.spacingMedium, S.variables.spacingXLarge);
     // CONCATENATED MODULE: ./src/Modal/Body.tsx
     function j() {
         return j = 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]);
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
                 }
             }
             return e;
         }, j.apply(null, arguments);
     }
-    function C(e, t) {
-        return T(e) || _(e, t) || P(e, t) || I();
+    function C(e, r) {
+        return I(e) || E(e, r) || k(e, r) || x();
     }
-    function I() {
+    function x() {
         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 P(e, t) {
+    function k(e, r) {
         if (e) {
-            if ("string" == typeof e) return E(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;
+            if ("string" == typeof e) return P(e, r);
+            var t = {}.toString.call(e).slice(8, -1);
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? P(e, r) : void 0;
         }
     }
-    function E(e, t) {
-        (null == t || t > e.length) && (t = e.length);
-        for (var r = 0, n = Array(t); r < t; r++) {
-            n[r] = e[r];
+    function P(e, r) {
+        (null == r || r > e.length) && (r = e.length);
+        for (var t = 0, n = Array(r); t < r; t++) {
+            n[t] = e[t];
         }
         return n;
     }
-    function _(e, t) {
-        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != r) {
-            var n, o, i, a, l = [], c = !0, s = !1;
+    function E(e, r) {
+        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != t) {
+            var n, o, i, a, l = [], u = !0, c = !1;
             try {
-                if (i = (r = r.call(e)).next, 0 === t) {
-                    if (Object(r) !== r) return;
-                    c = !1;
-                } else for (;!(c = (n = i.call(r)).done) && (l.push(n.value), l.length !== t); c = !0) {
+                if (i = (t = t.call(e)).next, 0 === r) {
+                    if (Object(t) !== t) return;
+                    u = !1;
+                } else for (;!(u = (n = i.call(t)).done) && (l.push(n.value), l.length !== r); u = !0) {
                 }
             } catch (e) {
-                s = !0, o = e;
+                c = !0, o = e;
             } finally {
                 try {
-                    if (!c && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                    if (!u && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
                 } finally {
-                    if (s) throw o;
+                    if (c) throw o;
                 }
             }
             return l;
         }
     }
-    function T(e) {
+    function I(e) {
         if (Array.isArray(e)) return e;
     }
-    function M(e, t) {
+    function q(e, r) {
         if (null == e) return {};
-        var r, n, o = q(e, t);
+        var t, n, o = _(e, r);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
-                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+                t = i[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
         return o;
     }
-    function q(e, t) {
+    function _(e, r) {
         if (null == e) return {};
-        var r = {};
+        var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (t.includes(n)) continue;
-                r[n] = e[n];
+                if (r.includes(n)) continue;
+                t[n] = e[n];
             }
         }
-        return r;
+        return t;
     }
-    var F = {
+    var T = {
         children: i().node
     };
     /**
  * A styled container for `Modal` body content.
- */    function D(e) {
-        var t = e.children, o = M(e, [ "children" ]);
+ */    function A(e) {
+        var r = e.children, o = q(e, [ "children" ]);
         // @docs-props-type BodyPropsBase
-                var i = (0, r.useState)(), a = C(i, 2), l = a[0], c = a[1];
-        var s = (0, r.useCallback)((function(e) {
-            c(e);
+                var i = (0, t.useState)(), a = C(i, 2), l = a[0], u = a[1];
+        var c = (0, t.useCallback)((function(e) {
+            u(e);
         }), []);
         
-        return n().createElement(k, j({
+        return n().createElement(w, j({
             "data-test": "body"
         }, o, {
-            elementRef: s
-        }),  n().createElement(h.ScrollContainerProvider, {
+            elementRef: c
+        }),  n().createElement(b.ScrollContainerProvider, {
             value: l
-        }, t));
+        }, r));
     }
-    D.propTypes = F;
-    /* harmony default export */    const A = D;
+    A.propTypes = T;
+    /* harmony default export */    const D = A;
     // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
-    const R = require("@splunk/react-ui/Divider");
-    var B =  e.n(R);
+    const M = require("@splunk/react-ui/Divider");
+    var R =  e.n(M);
     // CONCATENATED MODULE: ./src/Modal/FooterStyles.ts
-    var H = x()(w()).withConfig({
-        displayName: "FooterStyles__StyledBox",
+    var B = g().div.withConfig({
+        displayName: "FooterStyles__StyledDiv",
         componentId: "yszcmv-0"
-    })([ "flex:0 0 auto;text-align:right;padding:", ";background-color:", ";& > button{min-width:80px;}" ], (0, 
-    S.pick)({
-        enterprise: S.variables.spacingLarge,
-        prisma: {
-            comfortable: "24px",
-            compact: "18px 24px"
-        }
-    }), (0, S.pick)({
-        enterprise: S.variables.backgroundColor,
-        prisma: S.variables.backgroundColorDialog
+    })([ "flex:0 0 auto;padding:", " ", ";background-color:", ";& > button{min-width:80px;}", "" ], S.variables.spacingLarge, S.variables.spacingXLarge, S.variables.backgroundColorDialog, (0, 
+    S.pickVariant)("$layout", {
+        auto: (0, m.css)([ "display:flex;align-items:center;justify-content:flex-end;gap:", ";& > *:is(button,*){flex:0 0 auto;}& >:not(button){margin-right:auto;}&:has(button + button + button) > button:first-of-type{margin-right:auto;}" ], S.variables.spacingSmall),
+        none: (0, m.css)([ "text-align:right;" ])
     }));
     // CONCATENATED MODULE: ./src/Modal/ModalContext.tsx
-    var N =  (0, r.createContext)({});
-    /* harmony default export */    const z = N;
+    var F =  (0, t.createContext)({});
+    /* harmony default export */    const N = F;
     // CONCATENATED MODULE: ./src/Modal/Footer.tsx
     function L() {
         return L = 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]);
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
                 }
             }
             return e;
         }, L.apply(null, arguments);
     }
-    function X(e, t) {
+    function H(e, r) {
         if (null == e) return {};
-        var r, n, o = $(e, t);
+        var t, n, o = X(e, r);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
-                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+                t = i[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
         return o;
     }
-    function $(e, t) {
+    function X(e, r) {
         if (null == e) return {};
-        var r = {};
+        var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (t.includes(n)) continue;
-                r[n] = e[n];
+                if (r.includes(n)) continue;
+                t[n] = e[n];
             }
         }
-        return r;
+        return t;
     }
-    var K = {
-        children: i().node
+    var z = {
+        children: i().node,
+        layout: i().oneOf([ "auto", "none" ])
     };
     /**
  * A styled container for `Modal` footer content.
- */    function U(e) {
-        var t = e.children, o = X(e, [ "children" ]);
+ */    function $(e) {
+        var r = e.children, o = e.layout, i = o === void 0 ? "auto" : o, a = H(e, [ "children", "layout" ]);
         // @docs-props-type FooterPropsBase
-                var i = (0, r.useContext)(z), a = i.divider;
-        var l = a === "both" || a === "footer";
+                var l = (0, t.useContext)(N), u = l.divider;
+        var c = u === "both" || u === "footer";
         
-        return n().createElement(n().Fragment, null, l &&  n().createElement(B(), {
+        return n().createElement(n().Fragment, null, c &&  n().createElement(R(), {
             "aria-hidden": true
-        }),  n().createElement(H, L({
-            "data-test": "footer"
-        }, o), t));
+        }),  n().createElement(B, L({
+            "data-test": "footer",
+            $layout: i
+        }, a), r));
     }
-    U.propTypes = K;
-    /* harmony default export */    const V = U;
+    $.propTypes = z;
+    /* harmony default export */    const V = $;
     // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
-    const W = require("@splunk/react-icons/Cross");
-    var G =  e.n(W);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
-    const J = require("@splunk/react-icons/enterprise/Close");
-    var Q =  e.n(J);
+    const U = require("@splunk/react-icons/Cross");
+    var K =  e.n(U);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const Y = require("@splunk/ui-utils/i18n");
-    // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
-    const Z = require("@splunk/react-ui/ButtonSimple");
-    var ee =  e.n(Z);
+    const W = require("@splunk/ui-utils/i18n");
+    // CONCATENATED MODULE: external "@splunk/react-ui/Button"
+    const G = require("@splunk/react-ui/Button");
+    var J =  e.n(G);
     // CONCATENATED MODULE: ./src/Modal/HeaderStyles.ts
-    var te = x()(w()).withConfig({
-        displayName: "HeaderStyles__StyledBox",
+    var Q = g()(O()).withConfig({
+        displayName: "HeaderStyles__Styled",
         componentId: "sc-1y722ut-0"
-    })([ "", ";flex:0 0 auto;position:relative;min-height:", ";background-color:", ";padding:", ";align-items:flex-start;padding-right:", ";" ], S.mixins.reset("flex"), (0, 
+    })([ "", ";flex:0 0 auto;position:relative;min-height:", ";background-color:", ";padding:", " ", ";gap:", ";" ], S.mixins.reset("flex"), (0, 
     S.pick)({
         enterprise: "30px",
         prisma: {
@@ -319,180 +301,113 @@
     }), (0, S.pick)({
         enterprise: S.variables.backgroundColor,
         prisma: S.variables.backgroundColorDialog
-    }), (0, S.pick)({
-        enterprise: "25px 28px",
-        prisma: {
-            comfortable: "18px 24px",
-            compact: "14px 24px"
-        }
-    }), (function(e) {
-        var t = e.$close;
-        return t && (0, S.pick)({
-            enterprise: "54px",
-            prisma: {
-                comfortable: "64px",
-                compact: "56px"
-            }
-        });
-    }));
-    var re = x().div.withConfig({
+    }), S.variables.spacingLarge, S.variables.spacingXLarge, S.variables.spacingSmall);
+    var Y = g().div.withConfig({
         displayName: "HeaderStyles__StyledTitleWrapper",
         componentId: "sc-1y722ut-1"
-    })([ "", ";flex-direction:column;align-self:center;" ], S.mixins.reset("flex"));
-    var ne = x().div.withConfig({
-        displayName: "HeaderStyles__StyledIcon",
-        componentId: "sc-1y722ut-2"
-    })([ "", ";align-items:center;justify-content:center;margin-right:", ";background-color:", ";width:", ";height:", ";flex-shrink:0;" ], S.mixins.reset("inline-flex"), S.variables.spacingLarge, S.variables.transparent, (0, 
-    S.pick)({
-        comfortable: "40px",
-        compact: "32px"
-    }), (0, S.pick)({
-        comfortable: "40px",
-        compact: "32px"
-    }));
-    var oe = x().h2.withConfig({
+    })([ "", ";flex-direction:column;align-self:center;margin-right:auto;" ], S.mixins.reset("flex"));
+    var Z = g().h2.withConfig({
         displayName: "HeaderStyles__StyledTitle",
-        componentId: "sc-1y722ut-3"
-    })([ "", ";", " margin:0;overflow-wrap:break-word;" ], S.mixins.reset("block"), (0, 
-    S.pick)({
-        enterprise: (0, g.css)([ "", "" ], S.mixins.typography({
-            size: 20,
-            weight: "semiBold",
-            color: "active",
-            lineHeight: 22
-        })),
-        prisma: (0, g.css)([ "", "" ], S.mixins.typography({
-            size: 20,
-            weight: "semiBold",
-            color: "active",
-            lineHeight: 24
-        }))
-    }));
-    var ie = x().p.withConfig({
+        componentId: "sc-1y722ut-2"
+    })([ "", ";", " margin:0;overflow-wrap:break-word;" ], S.mixins.reset("block"), S.mixins.typography("title3"));
+    var ee = g().p.withConfig({
         displayName: "HeaderStyles__StyledSubtitle",
-        componentId: "sc-1y722ut-4"
+        componentId: "sc-1y722ut-3"
     })([ "", ";overflow-wrap:break-word;" ], S.mixins.reset("block"));
-    var ae = x().div.withConfig({
-        displayName: "HeaderStyles__StyledButtonsWrapper",
-        componentId: "sc-1y722ut-5"
-    })([ "", ";position:absolute;top:", ";right:", ";bottom:50%;", " max-height:35px;transform-origin:bottom right;transform:rotate(-90deg) translateX(100%);" ], S.mixins.reset("block"), (0, 
-    S.pick)({
-        enterprise: 0,
-        prisma: {
-            comfortable: "-2px",
-            compact: "-6px"
-        }
-    }), (0, S.pick)({
-        enterprise: 0,
-        prisma: {
-            comfortable: "-2px",
-            compact: "-6px"
-        }
-    }), (0, S.pick)({
-        prisma: {
-            comfortable: (0, g.css)([ "min-height:35px;" ]),
-            compact: (0, g.css)([ "min-height:30px;" ])
-        }
-    }));
-    var le = x().div.withConfig({
-        displayName: "HeaderStyles__StyledClose",
-        componentId: "sc-1y722ut-6"
-    })([ "", ";position:absolute;right:0;top:0;transform:rotate(90deg) translate(-50%,-50%);" ], S.mixins.reset("block"));
-    var ce = x()(ee()).withConfig({
-        displayName: "HeaderStyles__StyledButtonSimple",
-        componentId: "sc-1y722ut-7"
-    })([ "float:right;width:", ";height:", ";text-align:center;" ], S.variables.inputHeight, S.variables.inputHeight);
+    var re = g()(J()).withConfig({
+        displayName: "HeaderStyles__StyledButton",
+        componentId: "sc-1y722ut-4"
+    })([ "flex-shrink:0;flex-grow:0;align-self:flex-start;margin-left:auto;" ]);
     // CONCATENATED MODULE: ./src/Modal/Header.tsx
-    function se() {
-        return se = 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]);
+    function te() {
+        return te = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
                 }
             }
             return e;
-        }, se.apply(null, arguments);
+        }, te.apply(null, arguments);
     }
-    function ue(e, t) {
+    function ne(e, r) {
         if (null == e) return {};
-        var r, n, o = pe(e, t);
+        var t, n, o = oe(e, r);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
-                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+                t = i[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
         return o;
     }
-    function pe(e, t) {
+    function oe(e, r) {
         if (null == e) return {};
-        var r = {};
+        var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (t.includes(n)) continue;
-                r[n] = e[n];
+                if (r.includes(n)) continue;
+                t[n] = e[n];
             }
         }
-        return r;
+        return t;
     }
-    var de = {
+    var ie = {
         children: i().node,
         icon: i().node,
-        onRequestClose: i().func,
-        subtitle: i().node,
-        title: i().string
+        hideCloseButton: i().bool,
+        title: i().string,
+        subtitle: i().node
     };
+    var ae =  n().createElement(K(), {
+        width: "20px",
+        height: "20px"
+    });
     /**
  * A styled container for `Modal` header content.
- */    function fe(e) {
-        var t = e.children, o = e.icon, i = e.onRequestClose, a = e.subtitle, l = e.title, c = ue(e, [ "children", "icon", "onRequestClose", "subtitle", "title" ]);
+ */    function le(e) {
+        var r = e.children, o = e.icon, i = e.hideCloseButton, a = i === void 0 ? false : i, l = e.title, u = e.subtitle, c = ne(e, [ "children", "icon", "hideCloseButton", "title", "subtitle" ]);
         // @docs-props-type StepPropsBase
-                var s = (0, r.useContext)(z), u = s.titleId, p = s.subtitleId, d = s.divider;
-        var f = d === "both" || d === "header";
-        var y = (0, S.useSplunkTheme)(), b = y.isCompact, m = y.isEnterprise;
-        var v = b ? "20px" : "24px";
+                var s = (0, t.useContext)(N), f = s.titleId, d = s.subtitleId, p = s.divider, v = s.onRequestClose;
+        var y = p === "both" || p === "header";
+        var b =  (0, t.isValidElement)(o) &&  (0, t.cloneElement)(o, {
+            width: o.props.width || "48px",
+            height: o.props.height || "48px"
+        });
+        var m = (0, t.useCallback)((function(e) {
+            v === null || v === void 0 ? void 0 : v({
+                event: e,
+                reason: "clickCloseButton"
+            });
+        }), [ v ]);
         
-        return n().createElement(n().Fragment, null,  n().createElement(te, se({
-            $close: !!i,
+        return n().createElement(n().Fragment, null,  n().createElement(Q, te({
             "data-test": "header"
-        }, c), o &&  n().createElement(ne, null, o), l ?  n().createElement(re, null, l &&  n().createElement(oe, {
-            id: u,
+        }, c), b, l ?  n().createElement(Y, null, l &&  n().createElement(Z, {
+            id: f,
             "data-test": "title"
-        }, l), a &&  n().createElement(ie, {
-            id: p,
+        }, l), u &&  n().createElement(ee, {
+            id: d,
             "data-test": "subtitle"
-        }, a)) : t, i &&  n().createElement(ae, null,  n().createElement(le, null,  n().createElement(ce, {
-            appearance: "subtle",
-            "aria-label": (0, Y._)("Close"),
+        }, u)) : r, !a && v &&  n().createElement(re, {
+            appearance: "secondary",
+            "aria-label": (0, W._)("Close"),
             "data-test": "close",
-            onClick: i
-        }, m ?  n().createElement(Q(), {
-            "data-test": "cross",
-            inline: false,
-            screenReaderText: null,
-            size: "13px"
-        }) :  n().createElement(G(), {
-            "data-test": "cross",
-            height: v,
-            width: v
-        }))))), f &&  n().createElement(B(), {
+            icon: ae,
+            onClick: m
+        })), y &&  n().createElement(R(), {
             "aria-hidden": true
         }));
     }
-    fe.propTypes = de;
-    /* harmony default export */    const ye = fe;
+    le.propTypes = ie;
+    /* harmony default export */    const ue = le;
     // CONCATENATED MODULE: external "react-spring"
-    const be = require("react-spring");
+    const ce = require("react-spring");
     // CONCATENATED MODULE: ./src/Modal/ModalStyles.ts
-    var me = x()(be.animated.div).withConfig({
+    var se = g()(ce.animated.div).withConfig({
         displayName: "ModalStyles__Styled",
         componentId: "sc-5fn8ds-0"
-    })([ "", ";flex-direction:column;position:fixed;left:50%;transform:translateX(-50%);z-index:", ";", "" ], S.mixins.reset("flex"), S.variables.zindexModal, (0, 
-    S.pick)({
-        enterprise: (0, g.css)([ "box-shadow:0 1px 5px ", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);" ], S.variables.black, S.variables.spacingLarge, S.variables.spacingLarge),
-        prisma: (0, g.css)([ "box-shadow:", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);border-radius:", ";overflow:hidden;" ], S.variables.modalShadow, S.variables.spacingXLarge, S.variables.spacingXLarge, S.variables.borderRadius)
-    }));
+    })([ "", ";flex-direction:column;position:fixed;left:50%;transform:translateX(-50%);z-index:", ";box-shadow:", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);border-radius:", ";overflow:hidden;" ], S.mixins.reset("flex"), S.variables.zindexModal, S.variables.modalShadow, S.variables.spacingXLarge, S.variables.spacingXLarge, S.variables.borderRadius);
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -500,173 +415,149 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function ve(e, t) {
+    function fe(e, r) {
         if (e) {
             if (typeof e === "function") {
-                e(t);
+                e(r);
             } else {
                 // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
                 // the intention here is to signal "we will take care of setting 'current', not you".
-                e.current = t;
+                e.current = r;
  // eslint-disable-line no-param-reassign
                         }
         }
     }
     // CONCATENATED MODULE: ./src/Modal/Modal.tsx
-    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) {
-                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+    function de() {
+        return de = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
                 }
             }
             return e;
-        }, he.apply(null, arguments);
-    }
-    function ge(e) {
-        return Se(e) || we(e) || Oe(e) || xe();
-    }
-    function xe() {
-        throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+        }, de.apply(null, arguments);
     }
-    function Oe(e, t) {
-        if (e) {
-            if ("string" == typeof e) return ke(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) ? ke(e, t) : void 0;
-        }
-    }
-    function we(e) {
-        if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
-    }
-    function Se(e) {
-        if (Array.isArray(e)) return ke(e);
-    }
-    function ke(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 je(e, t) {
-        var r = Object.keys(e);
+    function pe(e, r) {
+        var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
-            t && (n = n.filter((function(t) {
-                return Object.getOwnPropertyDescriptor(e, t).enumerable;
-            }))), r.push.apply(r, n);
+            r && (n = n.filter((function(r) {
+                return Object.getOwnPropertyDescriptor(e, r).enumerable;
+            }))), t.push.apply(t, n);
         }
-        return r;
-    }
-    function Ce(e) {
-        for (var t = 1; t < arguments.length; t++) {
-            var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? je(Object(r), !0).forEach((function(t) {
-                Be(e, t, r[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : je(Object(r)).forEach((function(t) {
-                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
+        return t;
+    }
+    function ve(e) {
+        for (var r = 1; r < arguments.length; r++) {
+            var t = null != arguments[r] ? arguments[r] : {};
+            r % 2 ? pe(Object(t), !0).forEach((function(r) {
+                ye(e, r, t[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : pe(Object(t)).forEach((function(r) {
+                Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
             }));
         }
         return e;
     }
-    function Ie(e) {
+    function ye(e, r, t) {
+        return (r = be(r)) in e ? Object.defineProperty(e, r, {
+            value: t,
+            enumerable: !0,
+            configurable: !0,
+            writable: !0
+        }) : e[r] = t, e;
+    }
+    function be(e) {
+        var r = me(e, "string");
+        return "symbol" == ge(r) ? r : r + "";
+    }
+    function me(e, r) {
+        if ("object" != ge(e) || !e) return e;
+        var t = e[Symbol.toPrimitive];
+        if (void 0 !== t) {
+            var n = t.call(e, r || "default");
+            if ("object" != ge(n)) return n;
+            throw new TypeError("@@toPrimitive must return a primitive value.");
+        }
+        return ("string" === r ? String : Number)(e);
+    }
+    function ge(e) {
         "@babel/helpers - typeof";
-        return Ie = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return ge = "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;
-        }, Ie(e);
+        }, ge(e);
+    }
+    function he(e, r) {
+        return Ce(e) || je(e, r) || Se(e, r) || Oe();
     }
-    function Pe(e, t) {
-        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
+    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 Ee(e, t) {
-        for (var r = 0; r < t.length; r++) {
-            var n = t[r];
-            n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), 
-            Object.defineProperty(e, He(n.key), n);
+    function Se(e, r) {
+        if (e) {
+            if ("string" == typeof e) return we(e, r);
+            var t = {}.toString.call(e).slice(8, -1);
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? we(e, r) : void 0;
         }
     }
-    function _e(e, t, r) {
-        return t && Ee(e.prototype, t), r && Ee(e, r), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
-    }
-    function Te(e, t) {
-        if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(t && t.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
+    function we(e, r) {
+        (null == r || r > e.length) && (r = e.length);
+        for (var t = 0, n = Array(r); t < r; t++) {
+            n[t] = e[t];
+        }
+        return n;
+    }
+    function je(e, r) {
+        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != t) {
+            var n, o, i, a, l = [], u = !0, c = !1;
+            try {
+                if (i = (t = t.call(e)).next, 0 === r) {
+                    if (Object(t) !== t) return;
+                    u = !1;
+                } else for (;!(u = (n = i.call(t)).done) && (l.push(n.value), l.length !== r); u = !0) {
+                }
+            } catch (e) {
+                c = !0, o = e;
+            } finally {
+                try {
+                    if (!u && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
+                } finally {
+                    if (c) throw o;
+                }
             }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), t && Me(e, t);
-    }
-    function Me(e, t) {
-        return Me = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-            return e.__proto__ = t, e;
-        }, Me(e, t);
-    }
-    function qe(e) {
-        var t = Ae();
-        return function() {
-            var r, n = Re(e);
-            if (t) {
-                var o = Re(this).constructor;
-                r = Reflect.construct(n, arguments, o);
-            } else r = n.apply(this, arguments);
-            return Fe(this, r);
-        };
+            return l;
+        }
     }
-    function Fe(e, t) {
-        if (t && ("object" == Ie(t) || "function" == typeof t)) return t;
-        if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return De(e);
+    function Ce(e) {
+        if (Array.isArray(e)) return e;
     }
-    function De(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
+    function xe(e, r) {
+        if (null == e) return {};
+        var t, n, o = ke(e, r);
+        if (Object.getOwnPropertySymbols) {
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                t = i[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
+            }
+        }
+        return o;
     }
-    function Ae() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (Ae = function t() {
-            return !!e;
-        })();
-    }
-    function Re(e) {
-        return Re = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, Re(e);
-    }
-    function Be(e, t, r) {
-        return (t = He(t)) in e ? Object.defineProperty(e, t, {
-            value: r,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[t] = r, e;
-    }
-    function He(e) {
-        var t = Ne(e, "string");
-        return "symbol" == Ie(t) ? t : t + "";
-    }
-    function Ne(e, t) {
-        if ("object" != Ie(e) || !e) return e;
-        var r = e[Symbol.toPrimitive];
-        if (void 0 !== r) {
-            var n = r.call(e, t || "default");
-            if ("object" != Ie(n)) return n;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
+    function ke(e, r) {
+        if (null == e) return {};
+        var t = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (r.includes(n)) continue;
+                t[n] = e[n];
+            }
         }
-        return ("string" === t ? String : Number)(e);
+        return t;
     }
-    /** @public */    var ze = {
+    /** @public */    var Pe = {
         children: i().node,
         closeOnClickAway: i().bool,
         divider: i().oneOf([ "header", "footer", "both", "none" ]),
@@ -674,192 +565,158 @@
         initialFocus: i().oneOfType([ i().object, i().oneOf([ "first", "container" ]) ]),
         onRequestClose: i().func,
         open: i().bool,
-        returnFocus: i().oneOfType([ i().func, i().object ])
+        returnFocus: i().oneOfType([ i().func, i().object ]).isRequired
     };
-    var Le = {
-        // TODO: Set to `false` in next major version
-        closeOnClickAway: true,
-        divider: "both",
-        initialFocus: "first",
-        open: false
-    };
-    var Xe =  function(e) {
-        Te(o, e);
-        var t = qe(o);
+    function Ee(e) {
+        var r = e.children, o = e.closeOnClickAway, i = e.elementRef, a = e.divider, u = a === void 0 ? "both" : a, s = e.initialFocus, v = s === void 0 ? "first" : s, b = e.onRequestClose, m = e.open, g = m === void 0 ? false : m, h = e.returnFocus, O = e.style, S = xe(e, [ "children", "closeOnClickAway", "elementRef", "divider", "initialFocus", "onRequestClose", "open", "returnFocus", "style" ]);
         // @docs-props-type ModalPropsBase
+                var w = (0, t.useRef)(null);
         // this timeout ensures that the Modal is finished rendering before setting the focus
-                function o(e) {
-            var i;
-            Pe(this, o);
-            i = t.call(this, e);
-            Be(De(i), "el", null);
-            Be(De(i), "initialFocusTimeoutId", undefined);
-            Be(De(i), "initialFocus", null);
-            Be(De(i), "headerTitleId", void 0);
-            Be(De(i), "headerSubtitleId", void 0);
-            Be(De(i), "getDefaultMotionStyle", (function() {
-                return {
-                    top: 0
-                };
-            }));
-            Be(De(i), "getMotionStyle", (function() {
-                if (i.props.open) {
-                    return {
-                        top: 40
-                    };
-                }
+                var j;
+        var C = (0, t.useRef)(undefined);
+        var x = (0, t.useRef)(null);
+        var k = (0, t.useState)((function() {
+            return {
+                headerTitleId: (0, p.createDOMID)("titleId"),
+                headerSubtitleId: (0, p.createDOMID)("subtitleId")
+            };
+        })), P = he(k, 1), E = P[0], I = E.headerTitleId, q = E.headerSubtitleId;
+        var _ = y()(g);
+        var T = (0, t.useCallback)((function() {
+            return {
+                top: 0
+            };
+        }), []);
+        var A = (0, t.useCallback)((function() {
+            if (g) {
                 return {
-                    top: 0
+                    top: 40
                 };
-            }));
-            Be(De(i), "handleFocus", (function(e) {
-                var t = i.props, r = t.initialFocus, n = t.open;
-                if (n) {
-                    i.initialFocusTimeoutId = l()((function() {
-                        var e;
-                        // not using the takeFocus() util here because it
-                        // doesn't work for all values of "initialFocus"
-                        // and it has a nested defer() call, which we want to avoid
-                                                if (i.initialFocus !== r) {
-                            if (r === "first") {
-                                if (i.el) {
-                                    /* eslint-disable prefer-destructuring */
-                                    /* prefer-desturucting leads to harder-to-read syntax in this case */
-                                    e = (0, m.getSortedTabbableElements)(i.el)[0];
-                                    /* eslint-enable prefer-destructuring */                                }
-                            } else if (r === "container") {
-                                e = i.el;
-                            } else if (Ie(r) === "object") {
-                                e = r;
-                            }
-                            // Typescript isn't happy with optional chaining here
-                                                        if (e != null && "focus" in e) {
-                                e.focus();
-                            }
-                            i.initialFocus = r;
+            }
+            return {
+                top: 0
+            };
+        }), [ g ]);
+        var D = (0, t.useCallback)((function(e) {
+            if (g) {
+                C.current = l()((function() {
+                    var e;
+                    // not using the takeFocus() util here because it
+                    // doesn't work for all values of "initialFocus"
+                    // and it has a nested defer() call, which we want to avoid
+                                        if (x.current !== v) {
+                        if (v === "first") {
+                            if (w.current) {
+                                /* eslint-disable prefer-destructuring */
+                                /* prefer-desturucting leads to harder-to-read syntax in this case */
+                                e = (0, d.getSortedTabbableElements)(w.current)[0];
+                                /* eslint-enable prefer-destructuring */                            }
+                        } else if (v === "container") {
+                            e = w.current;
+                        } else if (ge(v) === "object") {
+                            e = v;
                         }
-                    }));
-                } else {
-                    i.initialFocus = null;
-                    clearTimeout(i.initialFocusTimeoutId);
-                    if (e) {
-                        /**
-           * We return focus to the invoking element here instead of in `handleRequestClose` because users can
-           * close the modal by updating the value of the `open` prop without calling `onRequestClose`
-           */
-                        var o = i.props.returnFocus;
-                        if (o != null) {
-                            if (typeof o === "function") {
-                                o();
-                            } else {
-                                l()((function() {
-                                    var e, t;
-                                    (e = o.current) === null || e === void 0 ? void 0 : (t = e.focus) === null || t === void 0 ? void 0 : t.call(e);
-                                }));
-                            }
+                        // Typescript isn't happy with optional chaining here
+                                                if (e != null && "focus" in e) {
+                            e.focus();
+                        }
+                        x.current = v;
+                    }
+                }));
+            } else {
+                x.current = null;
+                clearTimeout(C.current);
+                if (e) {
+                    /**
+         * We return focus to the invoking element here instead of in `handleRequestClose` because users can
+         * close the modal by updating the value of the `open` prop without calling `onRequestClose`
+         */
+                    if (h != null) {
+                        if (typeof h === "function") {
+                            h();
+                        } else {
+                            l()((function() {
+                                var e, r;
+                                (e = h.current) === null || e === void 0 ? void 0 : (r = e.focus) === null || r === void 0 ? void 0 : r.call(e);
+                            }));
                         }
                     }
                 }
-            }));
-            Be(De(i), "handleModalMount", (function(e) {
-                i.el = e;
-                ve(i.props.elementRef, e);
-            }));
-            Be(De(i), "handleModalKeyDown", (function(e) {
-                if (i.el !== null) {
-                    (0, m.handleTab)(i.el, e.nativeEvent);
-                }
-            }));
-            Be(De(i), "handleRequestClose", (function(e) {
-                var t, r;
-                i.initialFocus = null;
-                (t = (r = i.props).onRequestClose) === null || t === void 0 ? void 0 : t.call(r, e);
-            }));
-            Be(De(i), "getProviderValue", p()((function(e) {
-                var t = e.titleId, r = e.subtitleId, n = e.divider;
-                return {
-                    titleId: t,
-                    subtitleId: r,
-                    divider: n
-                };
-            })));
-            Be(De(i), "getModalStyles", p()((function(e) {
-                var t = e.opacity, r = e.style, n = e.top;
-                return Ce(Ce({}, r), {}, {
-                    opacity: t,
-                    top: n
-                });
-            })));
-            Be(De(i), "renderModal", (function(e) {
-                var t = i.props, a = t.children, l = t.divider, c = t.style;
-                var u = e.top, p = e.opacity;
-                var d = r.Children.toArray(a).filter(r.isValidElement);
-                
-                return n().createElement(me, he({
-                    ref: i.handleModalMount,
-                    "data-test": "modal",
-                    style: i.getModalStyles({
-                        opacity: p,
-                        style: c,
-                        top: u
-                    }),
-                    tabIndex: -1,
-                    onKeyDown: i.handleModalKeyDown,
-                    role: "dialog",
-                    "aria-labelledby": i.headerTitleId,
-                    "aria-describedby": i.headerSubtitleId
-                }, f()(i.props, [].concat(ge(s()(o.propTypes)), [ "style" ]))),  n().createElement(z.Provider, {
-                    value: i.getProviderValue({
-                        titleId: i.headerTitleId,
-                        subtitleId: i.headerSubtitleId,
-                        divider: l
-                    })
-                }, d));
-            }));
-            i.headerTitleId = (0, v.createDOMID)("titleId");
-            i.headerSubtitleId = (0, v.createDOMID)("subtitleId");
-            return i;
-        }
-        _e(o, [ {
-            key: "componentDidMount",
-            value: function e() {
-                this.handleFocus();
             }
-        }, {
-            key: "componentDidUpdate",
-            value: function e(t) {
-                var r = this.props.initialFocus;
-                if (t.initialFocus !== r) {
-                    // cancel the defer() set up in handleInitialFocus()
-                    // so that focus won't jump around if "initialFocus" changes
-                    clearTimeout(this.initialFocusTimeoutId);
-                }
-                this.handleFocus(t.open);
+        }), [ v, g, h ]);
+        (0, t.useEffect)((function() {
+            if (x.current !== v) {
+                // cancel the defer() set up in handleInitialFocus()
+                // so that focus won't jump around if "initialFocus" changes
+                clearTimeout(C.current);
             }
-        }, {
-            key: "render",
-            value: function e() {
-                var t = this.props.closeOnClickAway;
-                var r = t ? "interactive" : "visible";
-                
-                return n().createElement(b(), {
-                    getDefaultMotionStyle: this.getDefaultMotionStyle,
-                    getMotionStyle: this.getMotionStyle,
-                    onRequestClose: this.handleRequestClose,
-                    open: this.props.open,
-                    renderModal: this.renderModal,
-                    scrim: r
-                });
+            D(_);
+        }), [ D, v, g, j, _ ]);
+        var M = (0, t.useCallback)((function(e) {
+            w.current = e;
+            fe(i, e);
+        }), [ i, w ]);
+        var R = function e(r) {
+            if (w.current !== null) {
+                (0, d.handleTab)(w.current, r.nativeEvent);
             }
-        } ]);
-        return o;
-    }(r.Component);
-    Be(Xe, "propTypes", ze);
-    Be(Xe, "defaultProps", Le);
-    Be(Xe, "Header", ye);
-    Be(Xe, "Body", A);
-    Be(Xe, "Footer", V);
-    /* harmony default export */    const $e = Xe;
+        };
+        var B = (0, t.useCallback)((function(e) {
+            x.current = null;
+            b === null || b === void 0 ? void 0 : b(e);
+        }), [ b ]);
+        var F = (0, t.useMemo)((function() {
+            return {
+                divider: u,
+                onRequestClose: b,
+                subtitleId: q,
+                titleId: I
+            };
+        }), [ u, b, I, q ]);
+        var L = c()((function(e) {
+            var r = e.opacity, t = e.modalStyle, n = e.top;
+            return ve(ve({}, t), {}, {
+                opacity: r,
+                top: n
+            });
+        }));
+        var H = (0, t.useCallback)((function(e) {
+            var o = e.top, i = e.opacity;
+            var a = t.Children.toArray(r).filter(t.isValidElement);
+            
+            return n().createElement(se, de({
+                ref: M,
+                "data-test": "modal",
+                style: L({
+                    opacity: i,
+                    modalStyle: O,
+                    top: o
+                }),
+                tabIndex: -1,
+                onKeyDown: R,
+                role: "dialog",
+                "aria-labelledby": I,
+                "aria-describedby": q
+            }, S),  n().createElement(N.Provider, {
+                value: F
+            }, a));
+        }), [ r, L, M, I, q, S, O, F ]);
+        var X = o ? "interactive" : "visible";
+        
+        return n().createElement(f(), {
+            getDefaultMotionStyle: T,
+            getMotionStyle: A,
+            onRequestClose: B,
+            open: g,
+            renderModal: H,
+            scrim: X
+        });
+    }
+    Ee.propTypes = Pe;
+    Ee.Header = ue;
+    Ee.Footer = V;
+    Ee.Body = D;
+    /* harmony default export */    const Ie = Ee;
     // CONCATENATED MODULE: ./src/Modal/index.ts
-    module.exports = t;
+    module.exports = r;
     /******/})();