@splunk/react-ui 5.1.0 → 5.2.0

package/CardLayout.js

@@ -94,8 +94,8 @@
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
         }, f(e);
     }
-    function s() {
-        return s = Object.assign ? Object.assign.bind() : function(e) {
+    function d() {
+        return d = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -103,9 +103,9 @@
                 }
             }
             return e;
-        }, s.apply(null, arguments);
+        }, d.apply(null, arguments);
     }
-    function d(e, r) {
+    function s(e, r) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -118,9 +118,9 @@
     function p(e) {
         for (var r = 1; r < arguments.length; r++) {
             var t = null != arguments[r] ? arguments[r] : {};
-            r % 2 ? d(Object(t), !0).forEach((function(r) {
+            r % 2 ? s(Object(t), !0).forEach((function(r) {
                 y(e, r, t[r]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : d(Object(t)).forEach((function(r) {
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : s(Object(t)).forEach((function(r) {
                 Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
             }));
         }
@@ -154,7 +154,7 @@
         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]);
+                t = o[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (i[t] = e[t]);
             }
         }
         return i;
@@ -164,7 +164,7 @@
         var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
+                if (-1 !== r.indexOf(n)) continue;
                 t[n] = e[n];
             }
         }
@@ -181,7 +181,7 @@
         wrapCards: o().bool
     };
     function h(e) {
-        var r = e.alignCards, i = r === void 0 ? "left" : r, o = e.cardMaxWidth, a = e.cardMinWidth, c = e.cardWidth, l = e.children, f = e.elementRef, d = e.gutterSize, y = d === void 0 ? 10 : d, b = e.style, m = e.wrapCards, v = m === void 0 ? true : m, O = g(e, [ "alignCards", "cardMaxWidth", "cardMinWidth", "cardWidth", "children", "elementRef", "gutterSize", "style", "wrapCards" ]);
+        var r = e.alignCards, i = r === void 0 ? "left" : r, o = e.cardMaxWidth, a = e.cardMinWidth, c = e.cardWidth, l = e.children, f = e.elementRef, s = e.gutterSize, y = s === void 0 ? 10 : s, b = e.style, m = e.wrapCards, v = m === void 0 ? true : m, O = g(e, [ "alignCards", "cardMaxWidth", "cardMinWidth", "cardWidth", "children", "elementRef", "gutterSize", "style", "wrapCards" ]);
  // @docs-props-type CardLayoutPropsBase
                 var h = t.Children.toArray(l).filter(t.isValidElement).map((function(e) {
             
@@ -192,7 +192,7 @@
             });
         }));
         
-        return n().createElement(u, s({
+        return n().createElement(u, d({
             "data-test": "card-layout",
             $alignCards: i,
             $wrapCards: v,

package/Chip.js

@@ -82,8 +82,8 @@
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const v = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
-    const p = require("styled-components");
-    var f =  e.n(p);
+    const f = require("styled-components");
+    var p =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
     const b = require("@splunk/react-icons/Cross");
     var m =  e.n(b);
@@ -93,7 +93,7 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const C = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Chip/ChipStyles.ts
-    var h = (0, p.css)([ "", ";", ";align-content:center;align-items:center;height:", ";max-width:100%;padding:", " ", ";column-gap:", ";background-color:", ";color:", ";border-radius:", ";", ";", ";" ], C.mixins.reset("grid"), C.mixins.typography("body"), C.variables.inputHeight, C.variables.spacingXSmall, C.variables.spacingSmall, C.variables.spacingXSmall, (0, 
+    var h = (0, f.css)([ "", ";", ";align-content:center;align-items:center;height:", ";max-width:100%;padding:", " ", ";column-gap:", ";background-color:", ";color:", ";border-radius:", ";", ";", ";" ], C.mixins.reset("grid"), C.mixins.typography("body"), C.variables.inputHeight, C.variables.spacingXSmall, C.variables.spacingSmall, C.variables.spacingXSmall, (0, 
     C.pickVariant)("$appearance", {
         default: C.variables.neutral200,
         outline: C.variables.transparent,
@@ -110,40 +110,40 @@
         return n || (r === "default" || r === "outline" ? C.variables.contentColorActive : C.variables.contentColorInverted);
     }), C.variables.borderRadius, (function(e) {
         var r = e.$appearance;
-        return r === "outline" && (0, p.css)([ "border:1px solid ", ";" ], C.variables.borderColorStrong);
+        return r === "outline" && (0, f.css)([ "border:1px solid ", ";" ], C.variables.borderColorStrong);
     }), (function(e) {
         var r = e.$appearance, n = e.$disabled;
-        return n && (0, p.css)([ "background-color:", ";color:", ";", "" ], C.variables.neutral100, C.variables.contentColorDisabled, r === "outline" && (0, 
-        p.css)([ "background-color:", ";border-color:", ";" ], C.variables.transparent, C.variables.borderColorWeak));
+        return n && (0, f.css)([ "background-color:", ";color:", ";", "" ], C.variables.neutral100, C.variables.contentColorDisabled, r === "outline" && (0, 
+        f.css)([ "background-color:", ";border-color:", ";" ], C.variables.transparent, C.variables.borderColorWeak));
     }));
-    var S = f().div.withConfig({
+    var S = p().div.withConfig({
         displayName: "ChipStyles__StyledNonInteractive",
         componentId: "sc-1sd3tsh-0"
     })([ "", " ", ";" ], h, (0, C.pickVariant)("$icon", {
-        true: (0, p.css)([ "grid-template-columns:[icon] min-content [label] auto;" ]),
-        false: (0, p.css)([ "grid-template-columns:[label] auto;" ])
+        true: (0, f.css)([ "grid-template-columns:[icon] min-content [label] auto;" ]),
+        false: (0, f.css)([ "grid-template-columns:[label] auto;" ])
     }));
-    var $ = f().div.withConfig({
+    var $ = p().div.withConfig({
         displayName: "ChipStyles__StyledIcon",
         componentId: "sc-1sd3tsh-1"
     })([ "display:grid;grid-column:icon;" ]);
-    var k = f()(m()).withConfig({
+    var k = p()(m()).withConfig({
         displayName: "ChipStyles__StyledRemoveIcon",
         componentId: "sc-1sd3tsh-2"
     })([ "grid-column:remove;" ]);
-    var O = f().div.withConfig({
+    var O = p().div.withConfig({
         displayName: "ChipStyles__StyledLabel",
         componentId: "sc-1sd3tsh-3"
     })([ "", " grid-column:label;" ], C.mixins.ellipsis());
-    var R = f()(g()).withConfig({
+    var R = p()(g()).withConfig({
         displayName: "ChipStyles__StyledClickable",
         componentId: "sc-1sd3tsh-4"
     })([ "", " cursor:pointer;", ";", "" ], h, (0, C.pickVariant)("$icon", {
-        true: (0, p.css)([ "grid-template-columns:[icon] min-content [label] auto [remove] min-content;" ]),
-        false: (0, p.css)([ "grid-template-columns:[label] auto [remove] min-content;" ])
+        true: (0, f.css)([ "grid-template-columns:[icon] min-content [label] auto [remove] min-content;" ]),
+        false: (0, f.css)([ "grid-template-columns:[label] auto [remove] min-content;" ])
     }), (function(e) {
         var r = e.$disabled;
-        return !r && (0, p.css)([ "&:focus{box-shadow:", ";}&:hover{background-color:", ";}" ], C.variables.focusShadow, (0, 
+        return !r && (0, f.css)([ "&:focus{box-shadow:", ";}&:hover{background-color:", ";}" ], C.variables.focusShadow, (0, 
         C.pickVariant)("$appearance", {
             outline: C.variables.neutral100,
             default: C.variables.neutral300,
@@ -170,26 +170,26 @@
         }, w.apply(null, arguments);
     }
     function q(e, r) {
-        return E(e) || x(e, r) || j(e, r) || _();
+        return E(e) || I(e, r) || j(e, r) || _();
     }
     function _() {
         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 j(e, r) {
         if (e) {
-            if ("string" == typeof e) return I(e, r);
+            if ("string" == typeof e) return x(e, r);
             var n = {}.toString.call(e).slice(8, -1);
-            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? I(e, r) : void 0;
+            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? x(e, r) : void 0;
         }
     }
-    function I(e, r) {
+    function x(e, r) {
         (null == r || r > e.length) && (r = e.length);
         for (var n = 0, o = Array(r); n < r; n++) {
             o[n] = e[n];
         }
         return o;
     }
-    function x(e, r) {
+    function I(e, r) {
         var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != n) {
             var o, a, t, l, i = [], s = !0, c = !1;
@@ -220,7 +220,7 @@
         if (Object.getOwnPropertySymbols) {
             var t = Object.getOwnPropertySymbols(e);
             for (o = 0; o < t.length; o++) {
-                n = t[o], r.includes(n) || {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
+                n = t[o], -1 === r.indexOf(n) && {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
             }
         }
         return a;
@@ -230,7 +230,7 @@
         var n = {};
         for (var o in e) {
             if ({}.hasOwnProperty.call(e, o)) {
-                if (r.includes(o)) continue;
+                if (-1 !== r.indexOf(o)) continue;
                 n[o] = e[o];
             }
         }
@@ -268,13 +268,13 @@
     }
     function M(e) {
         var r = T(e), a = q(r, 2), l = a[0], i = a[1];
-        var s = l.$appearance, u = l.$foregroundColor, p = l.disabled, f = p === void 0 ? false : p, b = l.icon, m = N(l, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
+        var s = l.$appearance, u = l.$foregroundColor, f = l.disabled, p = f === void 0 ? false : f, b = l.icon, m = N(l, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
         var y = i.children, g = i.elementRef, C = i.onRequestRemove, h = i.value, S = N(i, [ "children", "elementRef", "onRequestRemove", "value" ]);
         var _ = typeof y === "string";
         var j = _ ? (0, d.sprintf)((0, v._)("Remove %(children)s"), {
             children: y
         }) : (0, v._)("Remove");
-        var I = (0, n.useCallback)((function(e) {
+        var x = (0, n.useCallback)((function(e) {
             C(e, {
                 value: h
             });
@@ -283,12 +283,12 @@
         return o().createElement(R, w({
             $appearance: s,
             $icon: !!b,
-            $disabled: f,
+            $disabled: p,
             $foregroundColor: u,
             "data-test-value": h,
-            disabled: f ? "disabled" : undefined,
+            disabled: p ? "disabled" : undefined,
             elementRef: g,
-            onClick: I
+            onClick: x
         }, m, t()(S, Object.keys(P))),  o().createElement(c(), null, j), b &&  o().createElement($, null, b),  o().createElement(O, {
             "data-test": "label",
             "aria-hidden": _ ? true : undefined
@@ -299,7 +299,7 @@
     function V(e) {
         var r = T(e), n = q(r, 2), a = n[0], l = n[1];
         var i = a.$appearance, s = a.$foregroundColor, c = a.disabled, u = a.icon, d = N(a, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
-        var v = l.children, p = l.elementRef, f = N(l, [ "children", "elementRef" ]);
+        var v = l.children, f = l.elementRef, p = N(l, [ "children", "elementRef" ]);
         
         return o().createElement(S, w({
             $appearance: i,
@@ -307,8 +307,8 @@
             $disabled: c !== null && c !== void 0 ? c : false,
             $foregroundColor: s,
             "data-test-disabled": c ? "disabled" : undefined,
-            ref: p
-        }, d, t()(f, Object.keys(P))), u &&  o().createElement($, null, u),  o().createElement(O, {
+            ref: f
+        }, d, t()(p, Object.keys(P))), u &&  o().createElement($, null, u),  o().createElement(O, {
             "data-test": "label"
         }, v));
     }

package/Clickable.js

@@ -64,8 +64,8 @@
         NavigationContext: () => /* reexport */ m,
         NavigationProvider: () => /* reexport */ y,
         default: () => /* reexport */ R,
-        isInternalLink: () => /* reexport */ j,
-        isRootRelativeLink: () => /* reexport */ S
+        isInternalLink: () => /* reexport */ S,
+        isRootRelativeLink: () => /* reexport */ P
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -77,10 +77,10 @@
     var o =  e.n(a);
     // CONCATENATED MODULE: external "lodash/omit"
     const l = require("lodash/omit");
-    var u =  e.n(l);
+    var d =  e.n(l);
     // CONCATENATED MODULE: external "prop-types"
-    const d = require("prop-types");
-    var c =  e.n(d);
+    const u = require("prop-types");
+    var c =  e.n(u);
     // CONCATENATED MODULE: external "styled-components"
     const s = require("styled-components");
     var f =  e.n(s);
@@ -156,7 +156,7 @@
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
-                r = a[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (i[r] = e[r]);
+                r = a[t], -1 === n.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (i[r] = e[r]);
             }
         }
         return i;
@@ -166,7 +166,7 @@
         var r = {};
         for (var t in e) {
             if ({}.hasOwnProperty.call(e, t)) {
-                if (n.includes(t)) continue;
+                if (-1 !== n.indexOf(t)) continue;
                 r[t] = e[t];
             }
         }
@@ -174,14 +174,14 @@
     }
     var h = /^[a-z0-9]+:/;
     var w = /^\/\//;
-    var P = /^\//;
-    var S = function e(n) {
-        return n != null && P.test(n);
+    var x = /^\//;
+    var P = function e(n) {
+        return n != null && x.test(n);
     };
-    var j = function e(n) {
+    var S = function e(n) {
         return n != null && !h.test(n) && !w.test(n);
     };
-    var x = {
+    var j = {
         children: c().node,
         disabled: c().oneOfType([ c().bool, c().oneOf([ "dimmed", "disabled" ]) ]),
         elementRef: c().oneOfType([ c().func, c().object ]),
@@ -199,7 +199,7 @@
  */    var I =  t().forwardRef((function(e, 
     // SUI-7623 - needs to be specified for react-docgen versions less than 7.1.0
     n) {
-        var i = e.children, a = e.disabled, l = e.elementRef, d = e.navigationLabel, c = e.onClick, s = e.openInNewContext, f = e.tag, v = e.to, p = g(e, [ "children", "disabled", "elementRef", "navigationLabel", "onClick", "openInNewContext", "tag", "to" ]);
+        var i = e.children, a = e.disabled, l = e.elementRef, u = e.navigationLabel, c = e.onClick, s = e.openInNewContext, f = e.tag, v = e.to, p = g(e, [ "children", "disabled", "elementRef", "navigationLabel", "onClick", "openInNewContext", "tag", "to" ]);
         // @docs-props-type ClickablePropsBase
                 var y = (0, r.useContext)(m), O = y.onClick, h = y.onLinkClick, w = y.transformUrl;
         (0, r.useEffect)((function() {
@@ -207,23 +207,23 @@
             // this effect only runs once
             // eslint-disable-next-line react-hooks/exhaustive-deps
                 }), []);
-        var P = (0, r.useCallback)((function(e) {
+        var x = (0, r.useCallback)((function(e) {
             k(l, e);
             k(n, e);
         }), [ l, n ]);
         // memoizing this result causes TS to lose track of the type guard established by isLinkCheck
-                var x = L(v);
+                var j = L(v);
         // ideally we wouldn't need to pass "to" as "toValue" here
         // but without doing that TS thinks the return value of this is
         // string | undefined which doesn't work for usages of this function
                 var I = (0, r.useCallback)((function(e) {
             return w != null ? w(e, {
-                isInternal: j(e),
-                isRootRelative: S(e)
+                isInternal: S(e),
+                isRootRelative: P(e)
             }) : e;
         }), [ w ]);
         var R = (0, r.useCallback)((function(e) {
-            if (x) {
+            if (j) {
                 // when user command-click on mac or ctrl-click on other platforms, and
                 // Tag is an <a>, let the click pass through, let the <a> to achieve user's
                 // intent of 'open in new context'
@@ -236,8 +236,8 @@
             }
             c === null || c === void 0 ? void 0 : c(e);
             var n = c == null && O != null;
-            if (x && (n || h != null)) {
-                var r = d;
+            if (j && (n || h != null)) {
+                var r = u;
                 if (!r && o()(i)) {
                     r = i;
                 }
@@ -252,30 +252,30 @@
                 }
                 h === null || h === void 0 ? void 0 : h(e, t);
             }
-        }), [ i, I, x, d, c, O, h, s, v ]);
+        }), [ i, I, j, u, c, O, h, s, v ]);
         // Only set the href attribute when enabled and therefore using an <a> tag
-                if (x && f !== "button") {
+                if (j && f !== "button") {
             if (a) {
                 
                 return t().createElement(b, C({
                     "data-test": "clickable",
                     "data-test-disabled": a,
-                    ref: P,
+                    ref: x,
                     role: "link",
                     "aria-disabled": "true"
                 }, p), i);
             }
             var T = s ? "_blank" : undefined;
-            var q = s && j(v) ? "noopener noreferrer" : undefined;
+            var q = s && S(v) ? "noopener noreferrer" : undefined;
             
             return t().createElement(b, C({
                 "data-test": "clickable",
-                ref: P,
+                ref: x,
                 href: I(v),
                 target: T,
                 rel: q,
                 onClick: R
-            }, u()(p)), i);
+            }, d()(p)), i);
         }
         // button variant
                 var N = a === true || a === "dimmed" || undefined;
@@ -291,13 +291,13 @@
             "aria-disabled": N,
             "data-test": "clickable",
             "data-test-disabled": _,
-            ref: P,
+            ref: x,
             type: "button",
             disabled: a === "disabled",
             onClick: c && !a ? R : undefined
-        }, u()(p, "disabled")), i);
+        }, d()(p, "disabled")), i);
     }));
-    I.propTypes = x;
+    I.propTypes = j;
     /* harmony default export */    const R = I;
     // forwardRef appears to prevent TS from inferring ClickableProps in components that import Clickable
     // so we need to export it separately to prevent the TS build from failing with:

package/Code.js

@@ -80,7 +80,7 @@
                                         n === null || n === void 0 ? void 0 : n(i);
                                         return i;
                                     }
-                                    return o;
+                                    return e;
                                 }));
                             }
                         }));
@@ -95,7 +95,7 @@
                     }
                     // Return a no-op function to satisfy consistent-return rule
                                         return function() {};
-                }), [ t ]);
+                }), [ n, t ]);
                 return o;
             };
             /* harmony default export */            const p = c;
@@ -965,12 +965,12 @@
                                         if (!N || N.index >= e.length) {
                                             break;
                                         }
-                                        var R = N.index;
-                                        var x = N.index + N[0].length;
+                                        var x = N.index;
+                                        var R = N.index + N[0].length;
                                         var k = T;
                                         // find the node that contains the match
                                                                                 k += A.value.length;
-                                        while (R >= k) {
+                                        while (x >= k) {
                                             A = A.next;
                                             k += A.value.length;
                                         }
@@ -982,7 +982,7 @@
                                             continue;
                                         }
                                         // find the last node which is affected by this match
-                                                                                for (var L = A; L !== t.tail && (k < x || typeof L.value === "string"); L = L.next) {
+                                                                                for (var L = A; L !== t.tail && (k < R || typeof L.value === "string"); L = L.next) {
                                             O++;
                                             k += L.value.length;
                                         }
@@ -997,10 +997,10 @@
                                         }
                                     }
                                     // eslint-disable-next-line no-redeclare
-                                                                        var R = N.index;
+                                                                        var x = N.index;
                                     var F = N[0];
-                                    var w = I.slice(0, R);
-                                    var C = I.slice(R + F.length);
+                                    var w = I.slice(0, x);
+                                    var C = I.slice(x + F.length);
                                     var D = T + I.length;
                                     if (u && D > u.reach) {
                                         u.reach = D;
@@ -2360,12 +2360,12 @@
         }));
         // CONCATENATED MODULE: ./src/Code/LineHighlights.tsx
         function N(e, t) {
-            return F(e) || L(e, t) || x(e, t) || R();
+            return F(e) || L(e, t) || R(e, t) || x();
         }
-        function R() {
+        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 x(e, t) {
+        function R(e, t) {
             if (e) {
                 if ("string" == typeof e) return k(e, t);
                 var n = {}.toString.call(e).slice(8, -1);
@@ -2557,7 +2557,7 @@
             if (Object.getOwnPropertySymbols) {
                 var i = Object.getOwnPropertySymbols(e);
                 for (r = 0; r < i.length; r++) {
-                    n = i[r], t.includes(n) || {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
+                    n = i[r], -1 === t.indexOf(n) && {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
                 }
             }
             return a;
@@ -2567,7 +2567,7 @@
             var n = {};
             for (var r in e) {
                 if ({}.hasOwnProperty.call(e, r)) {
-                    if (t.includes(r)) continue;
+                    if (-1 !== t.indexOf(r)) continue;
                     n[r] = e[r];
                 }
             }
@@ -2602,7 +2602,7 @@
             var r = n.elementRef, a = n.indentChars, s = a === void 0 ? 4 : a, l = n.language, c = n.languageFallback, d = c === void 0 ? "javascript" : c, f = n.lineHighlights, m = n.lineNumberStart, h = n.showIndentGuide, v = h === void 0 ? true : h, E = n.showLineNumbers, b = n.value, T = b === void 0 ? "" : b, O = V(n, [ "elementRef", "indentChars", "language", "languageFallback", "lineHighlights", "lineNumberStart", "showIndentGuide", "showLineNumbers", "value" ]);
             // @docs-props-type CodePropsBase
                         var N = (0, e.useRef)(null);
-            var R = (0, e.useState)(undefined), x = z(R, 2), k = x[0], L = x[1];
+            var x = (0, e.useState)(undefined), R = z(x, 2), k = R[0], L = R[1];
             var F = (0, M["default"])(N), w = F.width, C = F.height;
             var D = (0, e.useCallback)((function(e) {
                 j(N, e);