@splunk/react-ui 5.0.0-beta.4 → 5.0.0-beta.5

package/Resize.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = r => {
-            /******/ var t = r && r.__esModule ? 
-            /******/ () => r["default"]
-            /******/ : () => r
+        /******/ e.n = t => {
+            /******/ var r = t && t.__esModule ? 
+            /******/ () => t["default"]
+            /******/ : () => t
             /******/;
-            e.d(t, {
-                a: t
+            e.d(r, {
+                a: r
             });
-            /******/            return t;
+            /******/            return r;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, t) => {
-            /******/ for (var n in t) {
-                /******/ if (e.o(t, n) && !e.o(r, n)) {
-                    /******/ Object.defineProperty(r, n, {
+        /******/ e.d = (t, r) => {
+            /******/ for (var n in r) {
+                /******/ if (e.o(r, n) && !e.o(t, n)) {
+                    /******/ Object.defineProperty(t, n, {
                         enumerable: true,
-                        get: t[n]
+                        get: r[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
         /******/;
     })();
     /******/
@@ -56,126 +56,227 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var r = {};
+    /************************************************************************/    var t = {};
     // ESM COMPAT FLAG
-        e.r(r);
+        e.r(t);
     // EXPORTS
-        e.d(r, {
-        default: () => /* reexport */ V
+        e.d(t, {
+        default: () => /* reexport */ U
     });
     // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var n =  e.n(t);
+    const r = require("react");
+    var n =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var o =  e.n(i);
+    const o = require("prop-types");
+    var i =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
     const a = require("@splunk/react-ui/EventListener");
     var s =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const l = require("@splunk/react-ui/ScreenReaderContent");
-    var c =  e.n(l);
+    const c = require("@splunk/react-ui/ScreenReaderContent");
+    var u =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const u = require("@splunk/ui-utils/i18n");
+    const l = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const d = require("@splunk/ui-utils/keyboard");
+    const f = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "styled-components"
-    const f = require("styled-components");
-    var v =  e.n(f);
+    const d = require("styled-components");
+    var v =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/themes"
     const h = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Resize/ResizeStyles.ts
-    var p = "9px";
-    var w = "14px";
-    var y = "3px";
-    var m = "11px";
-    var b = v().div.withConfig({
+    var p = "12px";
+    var m = v().div.withConfig({
         displayName: "ResizeStyles__Styled",
         componentId: "sc-181mwes-0"
     })([ "", ";position:relative;overflow-x:hidden;overflow-y:hidden;" ], h.mixins.reset("block"));
-    var g = v().div.withConfig({
-        displayName: "ResizeStyles__StyledBorder",
-        componentId: "sc-181mwes-1"
-    })([ "", ";height:100%;width:100%;border:0 solid ", ";", " ", " ", " ", "" ], h.mixins.reset("block"), (0, 
-    h.pick)({
-        // TODO(SUI-6298): Should use a semantically correct token
-        prisma: {
-            light: "#eeeeee",
-            dark: "#272a2f"
-        },
-        enterprise: {
-            dark: h.variables.gray22,
-            light: h.variables.white
-        }
-    }), (function(e) {
-        var r = e.$borderSides;
-        return r.n && (0, f.css)([ "border-top-width:", ";" ], p);
-    }), (function(e) {
-        var r = e.$borderSides;
-        return r.e && (0, f.css)([ "border-right-width:", ";" ], p);
-    }), (function(e) {
-        var r = e.$borderSides;
-        return r.s && (0, f.css)([ "border-bottom-width:", ";" ], p);
-    }), (function(e) {
-        var r = e.$borderSides;
-        return r.w && (0, f.css)([ "border-left-width:", ";" ], p);
-    }));
-    var S = v().svg.withConfig({
+    var y = v().svg.withConfig({
         displayName: "ResizeStyles__StyledCornerSvg",
-        componentId: "sc-181mwes-2"
+        componentId: "sc-181mwes-1"
     })([ "display:block;stroke:currentColor;" ]);
-    var k = v().path.withConfig({
-        displayName: "ResizeStyles__StyledCornerPath",
-        componentId: "sc-181mwes-3"
-    })([ "stroke-width:1.1px;" ]);
-    var z = v().svg.withConfig({
+    var w = v().svg.withConfig({
         displayName: "ResizeStyles__StyledSideSvg",
-        componentId: "sc-181mwes-4"
+        componentId: "sc-181mwes-2"
     })([ "display:block;fill:currentColor;" ]);
-    var x = (0, f.css)([ "", ";color:", ";&:hover,&:focus{color:", ";", "}", "" ], h.mixins.reset("block"), (0, 
-    h.pick)({
-        prisma: h.variables.contentColorDefault,
-        enterprise: {
-            dark: h.variables.gray92,
-            light: h.variables.borderColor
-        }
-    }), h.variables.contentColorAccent, (function(e) {
-        var r = e.$isSeparator, t = e.$cardinalDirection;
-        var n = [ "n", "e", "w", "s" ].includes(t);
-        return r && n && (0, f.css)([ "background-color:", ";&:active{background-color:", ";}" ], h.variables.borderColorWeak, h.variables.borderColorStrong);
+    var b = v().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) {
+        var t = e.$borderSides;
+        return t.n && (0, d.css)([ "border-top-width:", ";" ], p);
+    }), (function(e) {
+        var t = e.$borderSides;
+        return t.e && (0, d.css)([ "border-right-width:", ";" ], p);
+    }), (function(e) {
+        var t = e.$borderSides;
+        return t.s && (0, d.css)([ "border-bottom-width:", ";" ], p);
     }), (function(e) {
-        var r = e.$showHandles;
-        return r === "on-hover" && (0, f.css)([ "opacity:0;transition:opacity 200ms;", ":hover > div > &,&:focus{opacity:1;}" ], /* sc-sel */ b);
+        var t = e.$borderSides;
+        return t.w && (0, d.css)([ "border-left-width:", ";" ], p);
     }));
-    var R = (0, f.css)([ "", ";width:", ";height:", ";position:absolute;background-clip:content-box;z-index:2;" ], x, m, m);
-    var O = (0, f.css)([ "height:100%;" ]);
-    var _ = (0, f.css)([ "width:100%;display:flex;justify-content:center;" ]);
-    var C = (0, f.css)([ "", ";position:absolute;z-index:1;", "" ], x, (function(e) {
-        var r = e.$isSeparator;
-        return r && (0, h.pickVariant)("$cardinalDirection", {
-            n: _,
-            s: _,
-            e: O,
-            w: O
+    var g = (0, d.css)([ "", ";color:", ";", " &:focus{box-shadow:inset 0 0 0 1px ", ";}", "" ], h.mixins.reset("block"), h.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) {
+        var t = e.$showHandles;
+        return t === "on-hover" && (0, d.css)([ "opacity:0;transition:opacity 200ms;", ":hover > div > &,&:focus{opacity:1;}" ], /* sc-sel */ m);
+    }));
+    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 t = e.$isSeparator;
+        return t && (0, h.pickVariant)("$cardinalDirection", {
+            n: x,
+            s: x,
+            e: E,
+            w: E
         });
     }));
-    var E = function e(r) {
-        var t = r.$isSeparator;
-        return t ? "0" : "calc(50% - ".concat(w, " / 2)");
+    var z = function e(t) {
+        var r = t.$isSeparator;
+        return r ? "0" : "calc(50% - ".concat(p, " / 2)");
     };
-    var $ = v().button.withConfig({
+    var C = v().button.withConfig({
         displayName: "ResizeStyles__StyledResize",
-        componentId: "sc-181mwes-5"
+        componentId: "sc-181mwes-4"
     })([ "", "" ], (0, h.pickVariant)("$cardinalDirection", {
-        nw: (0, f.css)([ "", ";top:0;left:0;cursor:nwse-resize;> ", "{transform:rotate(180deg);}" ], R, /* sc-sel */ S),
-        n: (0, f.css)([ "", ";cursor:ns-resize;top:0;left:", ";padding:", " 0;" ], C, E, y),
-        ne: (0, f.css)([ "", ";right:0;top:0;cursor:nesw-resize;> ", "{transform:rotate(-90deg);}" ], R, /* sc-sel */ S),
-        w: (0, f.css)([ "", ";cursor:ew-resize;padding:0 ", ";left:0;top:", ";" ], C, y, E),
-        e: (0, f.css)([ "", ";cursor:ew-resize;padding:0 ", ";right:0;top:", ";" ], C, y, E),
-        sw: (0, f.css)([ "", ";left:0;bottom:0;cursor:nesw-resize;> ", "{transform:rotate(90deg);}" ], R, /* sc-sel */ S),
-        s: (0, f.css)([ "", ";cursor:ns-resize;padding:", " 0;bottom:0;left:", ";" ], C, y, E),
-        se: (0, f.css)([ "", ";right:0;bottom:0;cursor:nwse-resize;" ], R)
+        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)
     }));
+    // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
+    /* eslint-disable @typescript-eslint/no-empty-function */
+    var R = {
+        body: {
+            appendChild: function e() {
+                return [];
+            }
+        },
+        addEventListener: function e() {},
+        removeEventListener: function e() {},
+        activeElement: {
+            blur: function e() {},
+            nodeName: ""
+        },
+        querySelector: function e() {
+            return null;
+        },
+        querySelectorAll: function e() {
+            return [];
+        },
+        getElementById: function e() {
+            return null;
+        },
+        createEvent: function e() {
+            return {
+                initEvent: function e() {}
+            };
+        },
+        createElement: function e() {
+            return {
+                children: [],
+                childNodes: [],
+                style: {},
+                setAttribute: function e() {},
+                getElementsByTagName: function e() {
+                    return [];
+                }
+            };
+        },
+        createElementNS: function e() {
+            return {};
+        },
+        importNode: function e() {
+            return null;
+        },
+        location: {
+            hash: "",
+            host: "",
+            hostname: "",
+            href: "",
+            origin: "",
+            pathname: "",
+            protocol: "",
+            search: ""
+        }
+    };
+    function O() {
+        var e = typeof document !== "undefined" ? document : R;
+        return e;
+    }
+    var _ = O();
+    /* harmony default export */    const $ = /* unused pure expression or super */ null && _;
+    // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
+    /* eslint-disable @typescript-eslint/no-empty-function */
+    var q = {
+        document: R,
+        navigator: {
+            userAgent: ""
+        },
+        location: {
+            hash: "",
+            host: "",
+            hostname: "",
+            href: "",
+            origin: "",
+            pathname: "",
+            protocol: "",
+            search: ""
+        },
+        history: {
+            replaceState: function e() {},
+            pushState: function e() {},
+            go: function e() {},
+            back: function e() {}
+        },
+        CustomEvent: function e() {
+            return this;
+        },
+        addEventListener: function e() {},
+        removeEventListener: function e() {},
+        getComputedStyle: function e() {
+            return {
+                getPropertyValue: function e() {
+                    return "";
+                }
+            };
+        },
+        Image: function e() {},
+        Date: function e() {},
+        screen: {},
+        setTimeout: function e() {},
+        clearTimeout: function e() {},
+        matchMedia: function e() {
+            return {};
+        },
+        requestAnimationFrame: function e(t) {
+            if (typeof setTimeout === "undefined") {
+                t();
+                return null;
+            }
+            return setTimeout(t, 0);
+        },
+        cancelAnimationFrame: function e(t) {
+            if (typeof setTimeout === "undefined") {
+                return;
+            }
+            clearTimeout(t);
+        }
+    };
+    function j() {
+        var e = typeof window !== "undefined" ? window : q;
+        return e;
+    }
+    var A = j();
+    /* harmony default export */    const D = A;
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -183,173 +284,173 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function j(e, r) {
+    function I(e, t) {
         if (e) {
             if (typeof e === "function") {
-                e(r);
+                e(t);
             } 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 = r;
+                e.current = t;
  // eslint-disable-line no-param-reassign
                         }
         }
     }
     // CONCATENATED MODULE: ./src/Resize/Resize.tsx
-    function q() {
-        return q = 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]);
+    function T() {
+        return T = Object.assign ? Object.assign.bind() : function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
                 }
             }
             return e;
-        }, q.apply(null, arguments);
+        }, T.apply(null, arguments);
     }
-    function D(e, r) {
-        return A(e) || P(e, r) || H(e, r) || I();
+    function H(e, t) {
+        return B(e) || P(e, t) || N(e, t) || M();
     }
-    function I() {
+    function M() {
         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 H(e, r) {
+    function N(e, t) {
         if (e) {
-            if ("string" == typeof e) return M(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) ? M(e, r) : void 0;
+            if ("string" == typeof e) return L(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;
         }
     }
-    function M(e, r) {
-        (null == r || r > e.length) && (r = e.length);
-        for (var t = 0, n = Array(r); t < r; t++) {
-            n[t] = e[t];
+    function L(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, r) {
-        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != t) {
-            var n, i, o, a, s = [], l = !0, c = !1;
+    function P(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;
             try {
-                if (o = (t = t.call(e)).next, 0 === r) {
-                    if (Object(t) !== t) return;
-                    l = !1;
-                } else for (;!(l = (n = o.call(t)).done) && (s.push(n.value), s.length !== r); l = !0) {
+                if (i = (r = r.call(e)).next, 0 === t) {
+                    if (Object(r) !== r) return;
+                    c = !1;
+                } else for (;!(c = (n = i.call(r)).done) && (s.push(n.value), s.length !== t); c = !0) {
                 }
             } catch (e) {
-                c = !0, i = e;
+                u = !0, o = e;
             } finally {
                 try {
-                    if (!l && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
+                    if (!c && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
                 } finally {
-                    if (c) throw i;
+                    if (u) throw o;
                 }
             }
             return s;
         }
     }
-    function A(e) {
+    function B(e) {
         if (Array.isArray(e)) return e;
     }
-    function T(e, r) {
+    function W(e, t) {
         if (null == e) return {};
-        var t, n, i = N(e, r);
+        var r, n, o = F(e, t);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < o.length; n++) {
-                t = o[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (i[t] = e[t]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
             }
         }
-        return i;
+        return o;
     }
-    function N(e, r) {
+    function F(e, t) {
         if (null == e) return {};
-        var t = {};
+        var r = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
-                t[n] = e[n];
+                if (t.includes(n)) continue;
+                r[n] = e[n];
             }
         }
-        return t;
+        return r;
     }
     /** @public */
-    /** @public */    var B = {
-        appearance: o().oneOf([ "border", "overlay", "separator" ]),
-        children: o().node,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        keyIncrement: o().number,
-        onRequestResize: o().func.isRequired,
-        resizeHandles: o().arrayOf(o().oneOf([ "nw", "n", "ne", "w", "e", "sw", "s", "se" ])).isRequired,
-        showHandles: o().oneOf([ "always", "on-hover" ])
+    /** @public */    var K = {
+        appearance: i().oneOf([ "border", "overlay", "separator" ]),
+        children: i().node,
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        keyIncrement: i().number,
+        onRequestResize: i().func.isRequired,
+        resizeHandles: i().arrayOf(i().oneOf([ "nw", "n", "ne", "w", "e", "sw", "s", "se" ])).isRequired,
+        showHandles: i().oneOf([ "always", "on-hover" ])
     };
-    var K = [ "nw", "n", "ne", "w", "e", "sw", "s", "se" ];
-    var L = {
-        nw: (0, u._)("Resize northwest"),
-        n: (0, u._)("Resize north"),
-        ne: (0, u._)("Resize northeast"),
-        w: (0, u._)("Resize west"),
-        e: (0, u._)("Resize east"),
-        sw: (0, u._)("Resize southwest"),
-        s: (0, u._)("Resize south"),
-        se: (0, u._)("Resize southeast")
+    var V = [ "nw", "n", "ne", "w", "e", "sw", "s", "se" ];
+    var X = {
+        nw: (0, l._)("Resize northwest"),
+        n: (0, l._)("Resize north"),
+        ne: (0, l._)("Resize northeast"),
+        w: (0, l._)("Resize west"),
+        e: (0, l._)("Resize east"),
+        sw: (0, l._)("Resize southwest"),
+        s: (0, l._)("Resize south"),
+        se: (0, l._)("Resize southeast")
     };
     /**
  * Resize is a utility container with drag handles for resizing.
- */    function W(e) {
-        var r = e.appearance, i = r === void 0 ? "overlay" : r, o = e.children, a = e.elementRef, l = e.keyIncrement, u = l === void 0 ? 10 : l, f = e.onRequestResize, v = e.resizeHandles, h = e.showHandles, p = h === void 0 ? "always" : h, w = T(e, [ "appearance", "children", "elementRef", "keyIncrement", "onRequestResize", "resizeHandles", "showHandles" ]);
+ */    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" ]);
         // @docs-props-type ResizePropsBase
-                (0, t.useEffect)((function() {
+                (0, r.useEffect)((function() {
             if (false) {}
-        }), [ i, v ]);
-        var y = (0, t.useState)(), m = D(y, 2), x = m[0], R = m[1];
-        var O = (0, t.useState)(null), _ = D(O, 2), C = _[0], E = _[1];
-        var I = (0, t.useState)(), H = D(I, 2), M = H[0], P = H[1];
-        var A = (0, t.useState)(), N = D(A, 2), B = N[0], W = N[1];
-        var V = (0, t.useState)(), X = D(V, 2), Y = X[0], F = X[1];
-        var U = (0, t.useState)(), G = D(U, 2), J = G[0], Q = G[1];
-        var Z = (0, t.useCallback)((function(e) {
-            E(e);
-            j(a, e);
+        }), [ 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);
         }), [ a ]);
-        var ee = (0, t.useCallback)((function() {
-            R(undefined);
-        }), [ R ]);
-        var re = (0, t.useCallback)((function(e, r) {
+        var ee = (0, r.useCallback)((function() {
+            k(undefined);
+        }), [ k ]);
+        var te = (0, r.useCallback)((function(e, t) {
             if (e.button > 0) {
                 return;
             }
             e.preventDefault();
             e.persist();
-            R(r);
-            W(C === null || C === void 0 ? void 0 : C.offsetWidth);
-            P(C === null || C === void 0 ? void 0 : C.offsetHeight);
-            F(e.clientX);
+            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);
-        }), [ C ]);
-        var te = (0, t.useMemo)((function() {
+        }), [ O ]);
+        var re = (0, r.useMemo)((function() {
             var e = {};
-            K.forEach((function(r) {
-                e["handleDragStart".concat(r)] = function(e) {
-                    re(e, r);
+            V.forEach((function(t) {
+                e["handleDragStart".concat(t)] = function(e) {
+                    te(e, t);
                 };
             }));
             return e;
-        }), [ re ]);
-        var ne = (0, t.useCallback)((function(e) {
-            var r = (x === null || x === void 0 ? void 0 : x.match(/(w|e)$/)) ? e.clientX - (Y || 0) : 0;
-            var t = (x === null || x === void 0 ? void 0 : x.match(/^(s|n)/)) ? e.clientY - (J || 0) : 0;
+        }), [ 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;
             var n = {
-                width: (x === null || x === void 0 ? void 0 : x.match(/w$/)) ? (B || 0) - r : (B || 0) + r,
-                height: (x === null || x === void 0 ? void 0 : x.match(/^n/)) ? (M || 0) - t : (M || 0) + t
+                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
             };
-            f(e, n);
-        }), [ x, f, M, B, Y, J ]);
-        var ie = (0, t.useCallback)((function(e, r) {
-            var t = (0, d.keycode)(e.nativeEvent);
-            var n = r.slice(-1);
-            var i = {
+            d(e, n);
+        }), [ x, d, j, L, K, J ]);
+        var oe = (0, r.useCallback)((function(e, t) {
+            var r = (0, f.keycode)(e.nativeEvent);
+            var n = t.slice(-1);
+            var o = {
                 e: {
                     right: 1,
                     left: -1
@@ -359,8 +460,8 @@
                     left: 1
                 }
             };
-            var o = (n === "e" || n === "w") && (t === "right" || t === "left") ? i[n][t] : 0;
-            var a = r.charAt(0);
+            var i = (n === "e" || n === "w") && (r === "right" || r === "left") ? o[n][r] : 0;
+            var a = t.charAt(0);
             var s = {
                 n: {
                     down: -1,
@@ -371,115 +472,126 @@
                     up: -1
                 }
             };
-            var l = (a === "n" || a === "s") && (t === "up" || t === "down") ? s[a][t] : 0;
-            if ((o || l) && C) {
+            var c = (a === "n" || a === "s") && (r === "up" || r === "down") ? s[a][r] : 0;
+            if ((i || c) && O) {
                 e.preventDefault();
-                var c = {
-                    width: C.offsetWidth + o * u,
-                    height: C.offsetHeight + l * u
+                var u = {
+                    width: O.offsetWidth + i * l,
+                    height: O.offsetHeight + c * l
                 };
-                f(e, c);
+                d(e, u);
             }
-        }), [ C, u, f ]);
-        var oe = (0, t.useMemo)((function() {
+        }), [ O, l, d ]);
+        var ie = (0, r.useMemo)((function() {
             var e = {};
-            K.forEach((function(r) {
-                e["handleKeyDown".concat(r)] = function(e) {
-                    ie(e, r);
+            V.forEach((function(t) {
+                e["handleKeyDown".concat(t)] = function(e) {
+                    oe(e, t);
                 };
             }));
             return e;
-        }), [ ie ]);
-        var ae = (0, t.useCallback)((function(e) {
-            var r = e.length > 1;
-            var t;
-            if (r) {
-                t =  n().createElement(S, {
-                    viewBox: "0 0 11 11",
-                    width: "11px",
-                    height: "11px"
-                },  n().createElement(k, {
-                    d: "M0 8 L 8 0 M4 8 L 8 4"
+        }), [ oe ]);
+        var ae = (0, r.useCallback)((function(e) {
+            var t = e.length > 1;
+            var r;
+            if (t) {
+                r =  n().createElement(y, {
+                    viewBox: "0 0 12 12",
+                    width: "12px",
+                    height: "12px"
+                },  n().createElement("path", {
+                    d: "M10.7783 4L7.24279 7.53553L3.70725 11.0711"
+                }),  n().createElement("path", {
+                    d: "M7.94971 3.5L5.47483 5.97487L2.99996 8.44975"
                 }));
             } else if (e === "n" || e === "s") {
-                t =  n().createElement(z, {
-                    viewBox: "0 0 14 3",
-                    width: "14px",
-                    height: "3px"
+                r =  n().createElement(w, {
+                    viewBox: "0 0 12 12",
+                    width: "12px",
+                    height: "12px"
                 },  n().createElement("rect", {
-                    width: "14",
+                    width: "12",
                     height: "1",
                     x: "0",
-                    y: "0"
+                    y: "4",
+                    rx: "0.5",
+                    ry: "0.5"
                 }),  n().createElement("rect", {
-                    width: "14",
+                    width: "12",
                     height: "1",
                     x: "0",
-                    y: "2"
+                    y: "7",
+                    rx: "0.5",
+                    ry: "0.5"
                 }));
             } else if (e === "e" || e === "w") {
-                t =  n().createElement(z, {
-                    viewBox: "0 0 3 14",
-                    width: "3px",
-                    height: "14px"
+                r =  n().createElement(w, {
+                    viewBox: "0 0 12 12",
+                    width: "12px",
+                    height: "12px"
                 },  n().createElement("rect", {
                     width: "1",
-                    height: "14",
-                    x: "0",
-                    y: "0"
+                    height: "12",
+                    x: "4",
+                    y: "0",
+                    rx: "0.5",
+                    ry: "0.5"
                 }),  n().createElement("rect", {
                     width: "1",
-                    height: "14",
-                    x: "2",
-                    y: "0"
+                    height: "12",
+                    x: "7",
+                    y: "0",
+                    rx: "0.5",
+                    ry: "0.5"
                 }));
             }
             
-            return n().createElement($, {
+            return n().createElement(C, {
                 key: e,
                 "data-test": "resize-handle-".concat(e),
-                onKeyDown: oe["handleKeyDown".concat(e)],
-                onMouseDown: te["handleDragStart".concat(e)],
+                onKeyDown: ie["handleKeyDown".concat(e)],
+                onMouseDown: re["handleDragStart".concat(e)],
                 $cardinalDirection: e,
-                $isSeparator: i === "separator",
+                $isSeparator: o === "separator",
                 $showHandles: p
-            }, t,  n().createElement(c(), null, L[e]));
-        }), [ i, te, oe, p ]);
+            }, r,  n().createElement(u(), null, X[e]));
+        }), [ o, re, ie, p ]);
         /* When appearance is border, determine which sides need margin.
    * Converts ['se', 'n'] to { e: true, s: true, n: true}
    */        var se = {};
-        if (i === "border") {
-            v.join("").split("").filter((function(e, r, t) {
-                return t.indexOf(e) === r;
+        if (o === "border") {
+            v.join("").split("").filter((function(e, t, r) {
+                return r.indexOf(e) === t;
             })).forEach((function(e) {
                 se[e] = true;
             }));
         }
         // Handles are inserted before and after children to optimize tab order
-                var le = K.slice(0, 4).filter((function(e) {
+                var ce = V.slice(0, 4).filter((function(e) {
             return v.indexOf(e) > -1;
         })).map(ae);
-        var ce = K.slice(4).filter((function(e) {
+        var ue = V.slice(4).filter((function(e) {
             return v.indexOf(e) > -1;
         })).map(ae);
         
-        return n().createElement(b, q({
+        return n().createElement(m, T({
             "data-test": "resize",
             ref: Z
-        }, w),  n().createElement(g, {
-            $borderSides: se
-        }, C && le, o, C && ce, x &&  n().createElement(n().Fragment, null,  n().createElement(s(), {
-            target: window,
+        }, g),  n().createElement(b, {
+            $borderSides: se,
+            $isSeparator: o === "separator"
+        }, O && ce, i, O && ue, x &&  n().createElement(n().Fragment, null,  n().createElement(s(), {
+            target: D,
             eventType: "mousemove",
             listener: ne
         }),  n().createElement(s(), {
-            target: window,
+            target: D,
             eventType: "mouseup",
             listener: ee
         }))));
     }
-    W.propTypes = B;
-    /* harmony default export */    const V = W;
+    Y.propTypes = K;
+    /* harmony default export */    const U = Y;
     // CONCATENATED MODULE: ./src/Resize/index.ts
-    module.exports = r;
+    module.exports = t;
     /******/})();