@splunk/react-ui 5.0.0-rc.1 → 5.0.0

package/README.md

@@ -8,7 +8,7 @@ Install the package and its dependencies.
 
 1. Install the peer dependencies:
     ```bash
-    npm install react@^16 react-dom@^16 styled-components@^5
+    npm install react@^18 react-dom@^18 styled-components@^5
     ```
 2. Install the package:
     ```bash
@@ -74,7 +74,7 @@ It is strongly recommended to include only one instance of `@splunk/react-ui` in
 using multiple instances of this library on the same page is discouraged.
 
 ```
-| Multiple instances | @splunk/react-ui 4.x    | @splunk/react-ui 4.x and 3.x |
+| Multiple instances | @splunk/react-ui 5.x    | @splunk/react-ui 5.x and 4.x |
 | ------------------ | ----------------------- | ---------------------------- |
 | In the same bundle | Deduplicate             | Avoid                        |
 | On the same page   | Avoid                   | Avoid                        |
@@ -84,19 +84,19 @@ using multiple instances of this library on the same page is discouraged.
 
 Multiple instances of `@splunk/react-ui` in the same bundle should be avoided.
 For example, instead of `4.0.0` and `4.1.0` only `4.1.0` should be used.
-Multiple versions of `3.x` are not supported.
+Only major bug fixes will be supported in version `4.x`
 Use a package manager (Yarn or NPM) or a module bundler (Webpack) to deduplicate versions.
 
 ##### 1. Yarn or NPM:
 `yarn` and `npm` resolve dependencies to avoid duplicate versions.
 
 Pros:
-  * Supports `4.x` and `3.x` in the same bundle.
+  * Supports `5.x` and `4.x` in the same bundle.
 
 Cons:
   * Extra versions can unexpectedly be added to lock files while updating dependencies.
   * Upgrades may require rebuilding the lock file.
-  * All packages must all define their `@splunk/react-ui` dependency with a major version (`@^4.0` or `@^4.1`),
+  * All packages must all define their `@splunk/react-ui` dependency with a major version (`@^5.0` or `@^4.1`),
   not a minor version (`@~4.0`).  
 
 
@@ -108,7 +108,7 @@ Pros:
   * Reliably builds with one version of `@splunk/react-ui`.
 
 Cons:
-  * Cannot be used when `3.x` and `4.x` are required by different dependencies.
+  * Cannot be used when `5.x` and `4.x` are required by different dependencies.
   * If dependencies rely on a newer version, unexpected breakages may occur.
 
 ### On the same page

package/Resize.js

@@ -61,7 +61,7 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        default: () => /* reexport */ U
+        default: () => /* reexport */ X
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -77,80 +77,78 @@
     var u =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const l = require("@splunk/ui-utils/i18n");
-    // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const f = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "styled-components"
-    const d = require("styled-components");
-    var v =  e.n(d);
+    const f = require("styled-components");
+    var d =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const h = require("@splunk/themes");
+    const v = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Resize/ResizeStyles.ts
-    var p = "12px";
-    var m = v().div.withConfig({
+    var h = "12px";
+    var p = d().div.withConfig({
         displayName: "ResizeStyles__Styled",
         componentId: "sc-181mwes-0"
-    })([ "", ";position:relative;overflow-x:hidden;overflow-y:hidden;" ], h.mixins.reset("block"));
-    var y = v().svg.withConfig({
+    })([ "", ";position:relative;overflow-x:hidden;overflow-y:hidden;" ], v.mixins.reset("block"));
+    var m = d().svg.withConfig({
         displayName: "ResizeStyles__StyledCornerSvg",
         componentId: "sc-181mwes-1"
     })([ "display:block;stroke:currentColor;" ]);
-    var w = v().svg.withConfig({
+    var w = d().svg.withConfig({
         displayName: "ResizeStyles__StyledSideSvg",
         componentId: "sc-181mwes-2"
     })([ "display:block;fill:currentColor;" ]);
-    var b = v().div.withConfig({
+    var y = d().div.withConfig({
         displayName: "ResizeStyles__StyledBorder",
         componentId: "sc-181mwes-3"
-    })([ "", ";height:100%;width:100%;border:0 solid ", ";", " ", " ", " ", "" ], h.mixins.reset("block"), h.variables.borderColorWeak, (function(e) {
+    })([ "", ";height:100%;width:100%;border:0 solid ", ";", " ", " ", " ", "" ], v.mixins.reset("block"), v.variables.borderColorWeak, (function(e) {
         var t = e.$borderSides;
-        return t.n && (0, d.css)([ "border-top-width:", ";" ], p);
+        return t.n && (0, f.css)([ "border-top-width:", ";" ], h);
     }), (function(e) {
         var t = e.$borderSides;
-        return t.e && (0, d.css)([ "border-right-width:", ";" ], p);
+        return t.e && (0, f.css)([ "border-right-width:", ";" ], h);
     }), (function(e) {
         var t = e.$borderSides;
-        return t.s && (0, d.css)([ "border-bottom-width:", ";" ], p);
+        return t.s && (0, f.css)([ "border-bottom-width:", ";" ], h);
     }), (function(e) {
         var t = e.$borderSides;
-        return t.w && (0, d.css)([ "border-left-width:", ";" ], p);
+        return t.w && (0, f.css)([ "border-left-width:", ";" ], h);
     }));
-    var g = (0, d.css)([ "", ";color:", ";", " &:focus{box-shadow:inset 0 0 0 1px ", ";}", "" ], h.mixins.reset("block"), h.variables.contentColorDefault, (function(e) {
+    var b = (0, f.css)([ "", ";color:", ";", " &:focus{box-shadow:inset 0 0 0 1px ", ";}", "" ], v.mixins.reset("block"), v.variables.contentColorDefault, (function(e) {
         var t = e.$isSeparator, r = e.$cardinalDirection;
         var n = [ "n", "e", "w", "s" ].includes(r);
-        return t && n ? (0, d.css)([ "&:hover,&:focus,&:active{color:", ";background-color:", ";}" ], h.variables.contentColorAccentStrong, h.variables.borderColorWeak) : (0, 
-        d.css)([ "&:hover,&:focus,&:active{color:", ";background-color:", ";}" ], h.variables.contentColorAccentStrong, h.variables.actionColorBackgroundSubtleHover);
-    }), h.variables.focusColor, (function(e) {
+        return t && n ? (0, f.css)([ "&:hover,&:focus,&:active{color:", ";background-color:", ";}" ], v.variables.contentColorAccentStrong, v.variables.borderColorWeak) : (0, 
+        f.css)([ "&:hover,&:focus,&:active{color:", ";background-color:", ";}" ], v.variables.contentColorAccentStrong, v.variables.actionColorBackgroundSubtleHover);
+    }), v.variables.focusColor, (function(e) {
         var t = e.$showHandles;
-        return t === "on-hover" && (0, d.css)([ "opacity:0;transition:opacity 200ms;", ":hover > div > &,&:focus{opacity:1;}" ], /* sc-sel */ m);
+        return t === "on-hover" && (0, f.css)([ "opacity:0;transition:opacity 200ms;", ":hover > div > &,&:focus{opacity:1;}" ], /* sc-sel */ p);
     }));
-    var S = (0, d.css)([ "", ";width:", ";height:", ";position:absolute;background-clip:content-box;z-index:2;" ], g, p, p);
-    var E = (0, d.css)([ "height:100%;" ]);
-    var x = (0, d.css)([ "width:100%;display:flex;justify-content:center;" ]);
-    var k = (0, d.css)([ "", ";position:absolute;z-index:1;", "" ], g, (function(e) {
+    var g = (0, f.css)([ "", ";width:", ";height:", ";position:absolute;background-clip:content-box;z-index:2;" ], b, h, h);
+    var S = (0, f.css)([ "height:100%;" ]);
+    var E = (0, f.css)([ "width:100%;display:flex;justify-content:center;" ]);
+    var x = (0, f.css)([ "", ";position:absolute;z-index:1;", "" ], b, (function(e) {
         var t = e.$isSeparator;
-        return t && (0, h.pickVariant)("$cardinalDirection", {
-            n: x,
-            s: x,
-            e: E,
-            w: E
+        return t && (0, v.pickVariant)("$cardinalDirection", {
+            n: E,
+            s: E,
+            e: S,
+            w: S
         });
     }));
     var z = function e(t) {
         var r = t.$isSeparator;
-        return r ? "0" : "calc(50% - ".concat(p, " / 2)");
+        return r ? "0" : "calc(50% - ".concat(h, " / 2)");
     };
-    var C = v().button.withConfig({
+    var k = d().button.withConfig({
         displayName: "ResizeStyles__StyledResize",
         componentId: "sc-181mwes-4"
-    })([ "", "" ], (0, h.pickVariant)("$cardinalDirection", {
-        nw: (0, d.css)([ "", ";top:0;left:0;cursor:nwse-resize;" ], S),
-        n: (0, d.css)([ "", ";cursor:ns-resize;top:0;left:", ";" ], k, z),
-        ne: (0, d.css)([ "", ";right:0;top:0;cursor:nesw-resize;> ", "{transform:rotate(90deg);}" ], S, /* sc-sel */ y),
-        w: (0, d.css)([ "", ";cursor:ew-resize;left:0;top:", ";" ], k, z),
-        e: (0, d.css)([ "", ";cursor:ew-resize;right:0;top:", ";" ], k, z),
-        sw: (0, d.css)([ "", ";left:0;bottom:0;cursor:nesw-resize;> ", "{transform:rotate(-90deg);}" ], S, /* sc-sel */ y),
-        s: (0, d.css)([ "", ";cursor:ns-resize;bottom:0;left:", ";" ], k, z),
-        se: (0, d.css)([ "", ";right:0;bottom:0;cursor:nwse-resize;> ", "{transform:rotate(180deg);}" ], S, /* sc-sel */ y)
+    })([ "", "" ], (0, v.pickVariant)("$cardinalDirection", {
+        nw: (0, f.css)([ "", ";top:0;left:0;cursor:nwse-resize;" ], g),
+        n: (0, f.css)([ "", ";cursor:ns-resize;top:0;left:", ";" ], x, z),
+        ne: (0, f.css)([ "", ";right:0;top:0;cursor:nesw-resize;> ", "{transform:rotate(90deg);}" ], g, /* sc-sel */ m),
+        w: (0, f.css)([ "", ";cursor:ew-resize;left:0;top:", ";" ], x, z),
+        e: (0, f.css)([ "", ";cursor:ew-resize;right:0;top:", ";" ], x, z),
+        sw: (0, f.css)([ "", ";left:0;bottom:0;cursor:nesw-resize;> ", "{transform:rotate(-90deg);}" ], g, /* sc-sel */ m),
+        s: (0, f.css)([ "", ";cursor:ns-resize;bottom:0;left:", ";" ], x, z),
+        se: (0, f.css)([ "", ";right:0;bottom:0;cursor:nwse-resize;> ", "{transform:rotate(180deg);}" ], g, /* sc-sel */ m)
     }));
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
@@ -208,15 +206,15 @@
             search: ""
         }
     };
-    function O() {
+    function A() {
         var e = typeof document !== "undefined" ? document : R;
         return e;
     }
-    var _ = O();
-    /* harmony default export */    const $ = /* unused pure expression or super */ null && _;
+    var C = A();
+    /* harmony default export */    const O = /* unused pure expression or super */ null && C;
     // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var q = {
+    var _ = {
         document: R,
         navigator: {
             userAgent: ""
@@ -271,12 +269,12 @@
             clearTimeout(t);
         }
     };
-    function j() {
-        var e = typeof window !== "undefined" ? window : q;
+    function $() {
+        var e = typeof window !== "undefined" ? window : _;
         return e;
     }
-    var A = j();
-    /* harmony default export */    const D = A;
+    var D = $();
+    /* harmony default export */    const j = D;
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -284,7 +282,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function I(e, t) {
+    function q(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -297,8 +295,8 @@
         }
     }
     // CONCATENATED MODULE: ./src/Resize/Resize.tsx
-    function T() {
-        return T = Object.assign ? Object.assign.bind() : function(e) {
+    function I() {
+        return I = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -306,29 +304,29 @@
                 }
             }
             return e;
-        }, T.apply(null, arguments);
+        }, I.apply(null, arguments);
     }
-    function H(e, t) {
-        return B(e) || P(e, t) || N(e, t) || M();
+    function T(e, t) {
+        return P(e) || N(e, t) || H(e, t) || L();
     }
-    function M() {
+    function L() {
         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 N(e, t) {
+    function H(e, t) {
         if (e) {
-            if ("string" == typeof e) return L(e, t);
+            if ("string" == typeof e) return M(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) ? L(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) ? M(e, t) : void 0;
         }
     }
-    function L(e, t) {
+    function M(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 P(e, t) {
+    function N(e, t) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
             var n, o, i, a, s = [], c = !0, u = !1;
@@ -350,12 +348,12 @@
             return s;
         }
     }
-    function B(e) {
+    function P(e) {
         if (Array.isArray(e)) return e;
     }
-    function W(e, t) {
+    function B(e, t) {
         if (null == e) return {};
-        var r, n, o = F(e, t);
+        var r, n, o = U(e, t);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
@@ -364,7 +362,7 @@
         }
         return o;
     }
-    function F(e, t) {
+    function U(e, t) {
         if (null == e) return {};
         var r = {};
         for (var n in e) {
@@ -376,7 +374,7 @@
         return r;
     }
     /** @public */
-    /** @public */    var K = {
+    /** @public */    var W = {
         appearance: i().oneOf([ "border", "overlay", "separator" ]),
         children: i().node,
         elementRef: i().oneOfType([ i().func, i().object ]),
@@ -385,8 +383,8 @@
         resizeHandles: i().arrayOf(i().oneOf([ "nw", "n", "ne", "w", "e", "sw", "s", "se" ])).isRequired,
         showHandles: i().oneOf([ "always", "on-hover" ])
     };
-    var V = [ "nw", "n", "ne", "w", "e", "sw", "s", "se" ];
-    var X = {
+    var F = [ "nw", "n", "ne", "w", "e", "sw", "s", "se" ];
+    var K = {
         nw: (0, l._)("Resize northwest"),
         n: (0, l._)("Resize north"),
         ne: (0, l._)("Resize northeast"),
@@ -398,104 +396,104 @@
     };
     /**
  * Resize is a utility container with drag handles for resizing.
- */    function Y(e) {
-        var t = e.appearance, o = t === void 0 ? "overlay" : t, i = e.children, a = e.elementRef, c = e.keyIncrement, l = c === void 0 ? 10 : c, d = e.onRequestResize, v = e.resizeHandles, h = e.showHandles, p = h === void 0 ? "always" : h, g = W(e, [ "appearance", "children", "elementRef", "keyIncrement", "onRequestResize", "resizeHandles", "showHandles" ]);
+ */    function V(e) {
+        var t = e.appearance, o = t === void 0 ? "overlay" : t, i = e.children, a = e.elementRef, c = e.keyIncrement, l = c === void 0 ? 10 : c, f = e.onRequestResize, d = e.resizeHandles, v = e.showHandles, h = v === void 0 ? "always" : v, b = B(e, [ "appearance", "children", "elementRef", "keyIncrement", "onRequestResize", "resizeHandles", "showHandles" ]);
         // @docs-props-type ResizePropsBase
                 (0, r.useEffect)((function() {
             if (false) {}
-        }), [ o, v ]);
-        var S = (0, r.useState)(), E = H(S, 2), x = E[0], k = E[1];
-        var z = (0, r.useState)(null), R = H(z, 2), O = R[0], _ = R[1];
-        var $ = (0, r.useState)(), q = H($, 2), j = q[0], A = q[1];
-        var M = (0, r.useState)(), N = H(M, 2), L = N[0], P = N[1];
-        var B = (0, r.useState)(), F = H(B, 2), K = F[0], Y = F[1];
-        var U = (0, r.useState)(), G = H(U, 2), J = G[0], Q = G[1];
-        var Z = (0, r.useCallback)((function(e) {
-            _(e);
-            I(a, e);
+        }), [ o, d ]);
+        var g = (0, r.useState)(), S = T(g, 2), E = S[0], x = S[1];
+        var z = (0, r.useState)(null), R = T(z, 2), A = R[0], C = R[1];
+        var O = (0, r.useState)(), _ = T(O, 2), $ = _[0], D = _[1];
+        var L = (0, r.useState)(), H = T(L, 2), M = H[0], N = H[1];
+        var P = (0, r.useState)(), U = T(P, 2), W = U[0], V = U[1];
+        var X = (0, r.useState)(), Y = T(X, 2), G = Y[0], J = Y[1];
+        var Q = (0, r.useCallback)((function(e) {
+            C(e);
+            q(a, e);
         }), [ a ]);
-        var ee = (0, r.useCallback)((function() {
-            k(undefined);
-        }), [ k ]);
-        var te = (0, r.useCallback)((function(e, t) {
+        var Z = (0, r.useCallback)((function() {
+            x(undefined);
+        }), [ x ]);
+        var ee = (0, r.useCallback)((function(e, t) {
             if (e.button > 0) {
                 return;
             }
             e.preventDefault();
             e.persist();
-            k(t);
-            P(O === null || O === void 0 ? void 0 : O.offsetWidth);
-            A(O === null || O === void 0 ? void 0 : O.offsetHeight);
-            Y(e.clientX);
-            Q(e.clientY);
-        }), [ O ]);
-        var re = (0, r.useMemo)((function() {
+            x(t);
+            N(A === null || A === void 0 ? void 0 : A.offsetWidth);
+            D(A === null || A === void 0 ? void 0 : A.offsetHeight);
+            V(e.clientX);
+            J(e.clientY);
+        }), [ A ]);
+        var te = (0, r.useMemo)((function() {
             var e = {};
-            V.forEach((function(t) {
+            F.forEach((function(t) {
                 e["handleDragStart".concat(t)] = function(e) {
-                    te(e, t);
+                    ee(e, t);
                 };
             }));
             return e;
-        }), [ te ]);
-        var ne = (0, r.useCallback)((function(e) {
-            var t = (x === null || x === void 0 ? void 0 : x.match(/(w|e)$/)) ? e.clientX - (K || 0) : 0;
-            var r = (x === null || x === void 0 ? void 0 : x.match(/^(s|n)/)) ? e.clientY - (J || 0) : 0;
+        }), [ ee ]);
+        var re = (0, r.useCallback)((function(e) {
+            var t = (E === null || E === void 0 ? void 0 : E.match(/(w|e)$/)) ? e.clientX - (W || 0) : 0;
+            var r = (E === null || E === void 0 ? void 0 : E.match(/^(s|n)/)) ? e.clientY - (G || 0) : 0;
             var n = {
-                width: (x === null || x === void 0 ? void 0 : x.match(/w$/)) ? (L || 0) - t : (L || 0) + t,
-                height: (x === null || x === void 0 ? void 0 : x.match(/^n/)) ? (j || 0) - r : (j || 0) + r
+                width: (E === null || E === void 0 ? void 0 : E.match(/w$/)) ? (M || 0) - t : (M || 0) + t,
+                height: (E === null || E === void 0 ? void 0 : E.match(/^n/)) ? ($ || 0) - r : ($ || 0) + r
             };
-            d(e, n);
-        }), [ x, d, j, L, K, J ]);
-        var oe = (0, r.useCallback)((function(e, t) {
-            var r = (0, f.keycode)(e.nativeEvent);
+            f(e, n);
+        }), [ E, f, $, M, W, G ]);
+        var ne = (0, r.useCallback)((function(e, t) {
+            var r = e.key;
             var n = t.slice(-1);
             var o = {
                 e: {
-                    right: 1,
-                    left: -1
+                    ArrowRight: 1,
+                    ArrowLeft: -1
                 },
                 w: {
-                    right: -1,
-                    left: 1
+                    ArrowRight: -1,
+                    ArrowLeft: 1
                 }
             };
-            var i = (n === "e" || n === "w") && (r === "right" || r === "left") ? o[n][r] : 0;
+            var i = (n === "e" || n === "w") && (r === "ArrowRight" || r === "ArrowLeft") ? o[n][r] : 0;
             var a = t.charAt(0);
             var s = {
                 n: {
-                    down: -1,
-                    up: 1
+                    ArrowDown: -1,
+                    ArrowUp: 1
                 },
                 s: {
-                    down: 1,
-                    up: -1
+                    ArrowDown: 1,
+                    ArrowUp: -1
                 }
             };
-            var c = (a === "n" || a === "s") && (r === "up" || r === "down") ? s[a][r] : 0;
-            if ((i || c) && O) {
+            var c = (a === "n" || a === "s") && (r === "ArrowUp" || r === "ArrowDown") ? s[a][r] : 0;
+            if ((i || c) && A) {
                 e.preventDefault();
                 var u = {
-                    width: O.offsetWidth + i * l,
-                    height: O.offsetHeight + c * l
+                    width: A.offsetWidth + i * l,
+                    height: A.offsetHeight + c * l
                 };
-                d(e, u);
+                f(e, u);
             }
-        }), [ O, l, d ]);
-        var ie = (0, r.useMemo)((function() {
+        }), [ A, l, f ]);
+        var oe = (0, r.useMemo)((function() {
             var e = {};
-            V.forEach((function(t) {
+            F.forEach((function(t) {
                 e["handleKeyDown".concat(t)] = function(e) {
-                    oe(e, t);
+                    ne(e, t);
                 };
             }));
             return e;
-        }), [ oe ]);
-        var ae = (0, r.useCallback)((function(e) {
+        }), [ ne ]);
+        var ie = (0, r.useCallback)((function(e) {
             var t = e.length > 1;
             var r;
             if (t) {
-                r =  n().createElement(y, {
+                r =  n().createElement(m, {
                     viewBox: "0 0 12 12",
                     width: "12px",
                     height: "12px"
@@ -546,52 +544,52 @@
                 }));
             }
             
-            return n().createElement(C, {
+            return n().createElement(k, {
                 key: e,
                 "data-test": "resize-handle-".concat(e),
-                onKeyDown: ie["handleKeyDown".concat(e)],
-                onMouseDown: re["handleDragStart".concat(e)],
+                onKeyDown: oe["handleKeyDown".concat(e)],
+                onMouseDown: te["handleDragStart".concat(e)],
                 $cardinalDirection: e,
                 $isSeparator: o === "separator",
-                $showHandles: p
-            }, r,  n().createElement(u(), null, X[e]));
-        }), [ o, re, ie, p ]);
+                $showHandles: h
+            }, r,  n().createElement(u(), null, K[e]));
+        }), [ o, te, oe, h ]);
         /* When appearance is border, determine which sides need margin.
    * Converts ['se', 'n'] to { e: true, s: true, n: true}
-   */        var se = {};
+   */        var ae = {};
         if (o === "border") {
-            v.join("").split("").filter((function(e, t, r) {
+            d.join("").split("").filter((function(e, t, r) {
                 return r.indexOf(e) === t;
             })).forEach((function(e) {
-                se[e] = true;
+                ae[e] = true;
             }));
         }
         // Handles are inserted before and after children to optimize tab order
-                var ce = V.slice(0, 4).filter((function(e) {
-            return v.indexOf(e) > -1;
-        })).map(ae);
-        var ue = V.slice(4).filter((function(e) {
-            return v.indexOf(e) > -1;
-        })).map(ae);
+                var se = F.slice(0, 4).filter((function(e) {
+            return d.indexOf(e) > -1;
+        })).map(ie);
+        var ce = F.slice(4).filter((function(e) {
+            return d.indexOf(e) > -1;
+        })).map(ie);
         
-        return n().createElement(m, T({
+        return n().createElement(p, I({
             "data-test": "resize",
-            ref: Z
-        }, g),  n().createElement(b, {
-            $borderSides: se,
+            ref: Q
+        }, b),  n().createElement(y, {
+            $borderSides: ae,
             $isSeparator: o === "separator"
-        }, O && ce, i, O && ue, x &&  n().createElement(n().Fragment, null,  n().createElement(s(), {
-            target: D,
+        }, A && se, i, A && ce, E &&  n().createElement(n().Fragment, null,  n().createElement(s(), {
+            target: j,
             eventType: "mousemove",
-            listener: ne
+            listener: re
         }),  n().createElement(s(), {
-            target: D,
+            target: j,
             eventType: "mouseup",
-            listener: ee
+            listener: Z
         }))));
     }
-    Y.propTypes = K;
-    /* harmony default export */    const U = Y;
+    V.propTypes = W;
+    /* harmony default export */    const X = V;
     // CONCATENATED MODULE: ./src/Resize/index.ts
     module.exports = t;
     /******/})();