react-next-tilt - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

dist/index.d.ts

@@ -23,5 +23,5 @@ import { HTMLAttributes, CSSProperties, PropsWithChildren, MouseEventHandler, TouchEventHandler, FocusEventHandler, FC, RefObject } from 'react';
      * @param {Angle} angle - Tilt angle ({angleX: number, angleY: number})
-     * @param {boolean} [changeScale=false] - Whether to apply the scale property or not
+     * @param {boolean} [changeScaleAndShadow=false] - Whether to apply the scale and shadow properties or not
      */
-    tilt: (angle: Angle, changeScale?: boolean) => void;
+    tilt: (angle: Angle, changeScaleAndShadow?: boolean) => void;
     /**
@@ -454,3 +454,3 @@ * Resets the component (rotation/scale and glare effects)
      */
-    controlElement?: HTMLElement | RefObject<HTMLElement> | Array<HTMLElement | RefObject<HTMLElement>>;
+    controlElement?: HTMLElement | RefObject<unknown> | Array<HTMLElement | RefObject<unknown>>;
     /**
@@ -467,2 +467,14 @@ * If set to `true`, events will be disabled for the component and it will be controlled by the controlElement(s) only
     /**
+     * If set to true, adds `transform-style: preserve-3d;` to the container and tilt elements
+     *
+     * @note Enable if you want to set up a parallax effect and translate elements along the `Z` axis
+     *
+     * Disable if you are having problems with blur
+     *
+     * @warning Can cause blur on scale (prevents re-rastering at higher scales by Chrome's compositor and the element is always rasterized at scale 1)
+     *
+     * @default true
+     */
+    preserve3dEnable?: boolean;
+    /**
      * Adds the `data-testid=...` property to all elements for testing purposes
@@ -469,0 +481,0 @@ *

dist/react-next-tilt.js

@@ -1,3 +0,3 @@
-import cr, { forwardRef as pr, useRef as xe, useCallback as R, useMemo as or, useImperativeHandle as mr, useEffect as ir, memo as hr } from "react";
-var nr = { exports: {} }, Ve = {};
+import lr, { forwardRef as pr, useRef as xe, useCallback as b, useMemo as ir, useImperativeHandle as mr, useEffect as fr, memo as hr } from "react";
+var ar = { exports: {} }, We = {};
 /**
@@ -12,21 +12,21 @@ * @license React
  */
-var fr;
+var ur;
 function yr() {
-  if (fr)
-    return Ve;
-  fr = 1;
-  var a = cr, o = Symbol.for("react.element"), v = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, m = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, h = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function te(C, w, ne) {
-    var j, O = {}, A = null, me = null;
-    ne !== void 0 && (A = "" + ne), w.key !== void 0 && (A = "" + w.key), w.ref !== void 0 && (me = w.ref);
-    for (j in w)
-      i.call(w, j) && !h.hasOwnProperty(j) && (O[j] = w[j]);
-    if (C && C.defaultProps)
-      for (j in w = C.defaultProps, w)
-        O[j] === void 0 && (O[j] = w[j]);
-    return { $$typeof: o, type: C, key: A, ref: me, props: O, _owner: m.current };
+  if (ur)
+    return We;
+  ur = 1;
+  var a = lr, o = Symbol.for("react.element"), v = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, m = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, h = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function te(k, R, ne) {
+    var j, T = {}, J = null, pe = null;
+    ne !== void 0 && (J = "" + ne), R.key !== void 0 && (J = "" + R.key), R.ref !== void 0 && (pe = R.ref);
+    for (j in R)
+      i.call(R, j) && !h.hasOwnProperty(j) && (T[j] = R[j]);
+    if (k && k.defaultProps)
+      for (j in R = k.defaultProps, R)
+        T[j] === void 0 && (T[j] = R[j]);
+    return { $$typeof: o, type: k, key: J, ref: pe, props: T, _owner: m.current };
   }
-  return Ve.Fragment = v, Ve.jsx = te, Ve.jsxs = te, Ve;
+  return We.Fragment = v, We.jsx = te, We.jsxs = te, We;
 }
-var We = {};
+var Ne = {};
 /**
@@ -44,4 +44,4 @@ * @license React
   return sr || (sr = 1, process.env.NODE_ENV !== "production" && function() {
-    var a = cr, o = Symbol.for("react.element"), v = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), m = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), te = Symbol.for("react.provider"), C = Symbol.for("react.context"), w = Symbol.for("react.forward_ref"), ne = Symbol.for("react.suspense"), j = Symbol.for("react.suspense_list"), O = Symbol.for("react.memo"), A = Symbol.for("react.lazy"), me = Symbol.for("react.offscreen"), ae = Symbol.iterator, Qe = "@@iterator";
-    function Ne(e) {
+    var a = lr, o = Symbol.for("react.element"), v = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), m = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), te = Symbol.for("react.provider"), k = Symbol.for("react.context"), R = Symbol.for("react.forward_ref"), ne = Symbol.for("react.suspense"), j = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), J = Symbol.for("react.lazy"), pe = Symbol.for("react.offscreen"), ae = Symbol.iterator, Qe = "@@iterator";
+    function Be(e) {
       if (e === null || typeof e != "object")
@@ -70,6 +70,6 @@ return null;
     }
-    var he = !1, Ge = !1, Be = !1, U = !1, X = !1, $e;
+    var me = !1, Ge = !1, Ue = !1, q = !1, z = !1, $e;
     $e = Symbol.for("react.module.reference");
-    function Re(e) {
-      return !!(typeof e == "string" || typeof e == "function" || e === i || e === h || X || e === m || e === ne || e === j || U || e === me || he || Ge || Be || typeof e == "object" && e !== null && (e.$$typeof === A || e.$$typeof === O || e.$$typeof === te || e.$$typeof === C || e.$$typeof === w || // This needs to include all possible module reference object
+    function Te(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === i || e === h || z || e === m || e === ne || e === j || q || e === pe || me || Ge || Ue || typeof e == "object" && e !== null && (e.$$typeof === J || e.$$typeof === T || e.$$typeof === te || e.$$typeof === k || e.$$typeof === R || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
@@ -80,3 +80,3 @@ // we don't know which Flight build this will end up being used
     }
-    function L(e, r, t) {
+    function I(e, r, t) {
       var f = e.displayName;
@@ -88,3 +88,3 @@ if (f)
     }
-    function x(e) {
+    function $(e) {
       return e.displayName || "Context";
@@ -115,14 +115,14 @@ }
         switch (e.$$typeof) {
-          case C:
+          case k:
             var r = e;
-            return x(r) + ".Consumer";
+            return $(r) + ".Consumer";
           case te:
             var t = e;
-            return x(t._context) + ".Provider";
-          case w:
-            return L(e, e.render, "ForwardRef");
-          case O:
+            return $(t._context) + ".Provider";
+          case R:
+            return I(e, e.render, "ForwardRef");
+          case T:
             var f = e.displayName || null;
             return f !== null ? f : _(e.type) || "Memo";
-          case A: {
+          case J: {
             var d = e, p = d._payload, c = d._init;
@@ -138,14 +138,14 @@ try {
     }
-    var H = Object.assign, ye = 0, Ue, I, V, Fe, T, Xe, we;
-    function qe() {
+    var K = Object.assign, he = 0, Xe, V, W, Fe, w, qe, Oe;
+    function ze() {
     }
-    qe.__reactDisabledLog = !0;
-    function $() {
+    ze.__reactDisabledLog = !0;
+    function F() {
       {
-        if (ye === 0) {
-          Ue = console.log, I = console.info, V = console.warn, Fe = console.error, T = console.group, Xe = console.groupCollapsed, we = console.groupEnd;
+        if (he === 0) {
+          Xe = console.log, V = console.info, W = console.warn, Fe = console.error, w = console.group, qe = console.groupCollapsed, Oe = console.groupEnd;
           var e = {
             configurable: !0,
             enumerable: !0,
-            value: qe,
+            value: ze,
             writable: !0
@@ -163,8 +163,8 @@ };
         }
-        ye++;
+        he++;
       }
     }
-    function q() {
+    function A() {
       {
-        if (ye--, ye === 0) {
+        if (he--, he === 0) {
           var e = {
@@ -176,32 +176,32 @@ configurable: !0,
           Object.defineProperties(console, {
-            log: H({}, e, {
-              value: Ue
+            log: K({}, e, {
+              value: Xe
             }),
-            info: H({}, e, {
-              value: I
-            }),
-            warn: H({}, e, {
+            info: K({}, e, {
               value: V
             }),
-            error: H({}, e, {
+            warn: K({}, e, {
+              value: W
+            }),
+            error: K({}, e, {
               value: Fe
             }),
-            group: H({}, e, {
-              value: T
+            group: K({}, e, {
+              value: w
             }),
-            groupCollapsed: H({}, e, {
-              value: Xe
+            groupCollapsed: K({}, e, {
+              value: qe
             }),
-            groupEnd: H({}, e, {
-              value: we
+            groupEnd: K({}, e, {
+              value: Oe
             })
           });
         }
-        ye < 0 && E("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+        he < 0 && E("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var De = oe.ReactCurrentDispatcher, z;
-    function ie(e, r, t) {
+    var De = oe.ReactCurrentDispatcher, je;
+    function N(e, r, t) {
       {
-        if (z === void 0)
+        if (je === void 0)
           try {
@@ -211,18 +211,18 @@ throw Error();
             var f = d.stack.trim().match(/\n( *(at )?)/);
-            z = f && f[1] || "";
+            je = f && f[1] || "";
           }
         return `
-` + z + e;
+` + je + e;
       }
     }
-    var ge = !1, fe;
+    var ye = !1, ie;
     {
       var Pe = typeof WeakMap == "function" ? WeakMap : Map;
-      fe = new Pe();
+      ie = new Pe();
     }
-    function Oe(e, r) {
-      if (!e || ge)
+    function Ce(e, r) {
+      if (!e || ye)
         return "";
       {
-        var t = fe.get(e);
+        var t = ie.get(e);
         if (t !== void 0)
@@ -232,7 +232,7 @@ return t;
       var f;
-      ge = !0;
+      ye = !0;
       var d = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
       var p;
-      p = De.current, De.current = null, $();
+      p = De.current, De.current = null, F();
       try {
@@ -272,14 +272,14 @@ if (r) {
         if (ee && f && typeof ee.stack == "string") {
-          for (var u = ee.stack.split(`
+          for (var s = ee.stack.split(`
 `), S = f.stack.split(`
-`), y = u.length - 1, g = S.length - 1; y >= 1 && g >= 0 && u[y] !== S[g]; )
+`), y = s.length - 1, g = S.length - 1; y >= 1 && g >= 0 && s[y] !== S[g]; )
             g--;
           for (; y >= 1 && g >= 0; y--, g--)
-            if (u[y] !== S[g]) {
+            if (s[y] !== S[g]) {
               if (y !== 1 || g !== 1)
                 do
-                  if (y--, g--, g < 0 || u[y] !== S[g]) {
-                    var Y = `
-` + u[y].replace(" at new ", " at ");
-                    return e.displayName && Y.includes("<anonymous>") && (Y = Y.replace("<anonymous>", e.displayName)), typeof e == "function" && fe.set(e, Y), Y;
+                  if (y--, g--, g < 0 || s[y] !== S[g]) {
+                    var L = `
+` + s[y].replace(" at new ", " at ");
+                    return e.displayName && L.includes("<anonymous>") && (L = L.replace("<anonymous>", e.displayName)), typeof e == "function" && ie.set(e, L), L;
                   }
@@ -291,9 +291,9 @@ while (y >= 1 && g >= 0);
       } finally {
-        ge = !1, De.current = p, q(), Error.prepareStackTrace = d;
+        ye = !1, De.current = p, A(), Error.prepareStackTrace = d;
       }
-      var ke = e ? e.displayName || e.name : "", ar = ke ? ie(ke) : "";
-      return typeof e == "function" && fe.set(e, ar), ar;
+      var ke = e ? e.displayName || e.name : "", or = ke ? N(ke) : "";
+      return typeof e == "function" && ie.set(e, or), or;
     }
     function Ye(e, r, t) {
-      return Oe(e, !1);
+      return Ce(e, !1);
     }
@@ -304,25 +304,25 @@ function Le(e) {
     }
-    function se(e, r, t) {
+    function fe(e, r, t) {
       if (e == null)
         return "";
       if (typeof e == "function")
-        return Oe(e, Le(e));
+        return Ce(e, Le(e));
       if (typeof e == "string")
-        return ie(e);
+        return N(e);
       switch (e) {
         case ne:
-          return ie("Suspense");
+          return N("Suspense");
         case j:
-          return ie("SuspenseList");
+          return N("SuspenseList");
       }
       if (typeof e == "object")
         switch (e.$$typeof) {
-          case w:
+          case R:
             return Ye(e.render);
-          case O:
-            return se(e.type, r, t);
-          case A: {
+          case T:
+            return fe(e.type, r, t);
+          case J: {
             var f = e, d = f._payload, p = f._init;
             try {
-              return se(p(d), r, t);
+              return fe(p(d), r, t);
             } catch {
@@ -334,16 +334,16 @@ }
     }
-    var Te = Object.prototype.hasOwnProperty, ze = {}, Je = oe.ReactDebugCurrentFrame;
-    function b(e) {
+    var ue = Object.prototype.hasOwnProperty, Ae = {}, He = oe.ReactDebugCurrentFrame;
+    function Se(e) {
       if (e) {
-        var r = e._owner, t = se(e.type, e._source, r ? r.type : null);
-        Je.setExtraStackFrame(t);
+        var r = e._owner, t = fe(e.type, e._source, r ? r.type : null);
+        He.setExtraStackFrame(t);
       } else
-        Je.setExtraStackFrame(null);
+        He.setExtraStackFrame(null);
     }
-    function Ee(e, r, t, f, d) {
+    function O(e, r, t, f, d) {
       {
-        var p = Function.call.bind(Te);
+        var p = Function.call.bind(ue);
         for (var c in e)
           if (p(e, c)) {
-            var u = void 0;
+            var s = void 0;
             try {
@@ -354,15 +354,15 @@ if (typeof e[c] != "function") {
               }
-              u = e[c](r, c, f, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+              s = e[c](r, c, f, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
             } catch (y) {
-              u = y;
+              s = y;
             }
-            u && !(u instanceof Error) && (b(d), E("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", f || "React class", t, c, typeof u), b(null)), u instanceof Error && !(u.message in ze) && (ze[u.message] = !0, b(d), E("Failed %s type: %s", t, u.message), b(null));
+            s && !(s instanceof Error) && (Se(d), E("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", f || "React class", t, c, typeof s), Se(null)), s instanceof Error && !(s.message in Ae) && (Ae[s.message] = !0, Se(d), E("Failed %s type: %s", t, s.message), Se(null));
           }
       }
     }
-    var ue = Array.isArray;
-    function K(e) {
-      return ue(e);
+    var ge = Array.isArray;
+    function H(e) {
+      return ge(e);
     }
-    function W(e) {
+    function Ee(e) {
       {
@@ -373,5 +373,5 @@ var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
     }
-    function F(e) {
+    function B(e) {
       try {
-        return N(e), !1;
+        return x(e), !1;
       } catch {
@@ -381,10 +381,10 @@ return !0;
     }
-    function N(e) {
+    function x(e) {
       return "" + e;
     }
-    function Ae(e) {
-      if (F(e))
-        return E("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", W(e)), N(e);
+    function U(e) {
+      if (B(e))
+        return E("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ee(e)), x(e);
     }
-    var _e = oe.ReactCurrentOwner, je = {
+    var _e = oe.ReactCurrentOwner, er = {
       key: !0,
@@ -394,6 +394,6 @@ ref: !0,
       __source: !0
-    }, Ie, Z, J;
-    J = {};
-    function ce(e) {
-      if (Te.call(e, "ref")) {
+    }, be, Ie, C;
+    C = {};
+    function D(e) {
+      if (ue.call(e, "ref")) {
         var r = Object.getOwnPropertyDescriptor(e, "ref").get;
@@ -405,4 +405,4 @@ if (r && r.isReactWarning)
     }
-    function He(e) {
-      if (Te.call(e, "key")) {
+    function se(e) {
+      if (ue.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
@@ -414,12 +414,12 @@ if (r && r.isReactWarning)
     }
-    function le(e, r) {
+    function ce(e, r) {
       if (typeof e.ref == "string" && _e.current && r && _e.current.stateNode !== r) {
         var t = _(_e.current.type);
-        J[t] || (E('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', _(_e.current.type), e.ref), J[t] = !0);
+        C[t] || (E('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', _(_e.current.type), e.ref), C[t] = !0);
       }
     }
-    function de(e, r) {
+    function Z(e, r) {
       {
         var t = function() {
-          Ie || (Ie = !0, E("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+          be || (be = !0, E("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
         };
@@ -432,6 +432,6 @@ t.isReactWarning = !0, Object.defineProperty(e, "key", {
     }
-    function Q(e, r) {
+    function Je(e, r) {
       {
         var t = function() {
-          Z || (Z = !0, E("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+          Ie || (Ie = !0, E("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
         };
@@ -444,4 +444,4 @@ t.isReactWarning = !0, Object.defineProperty(e, "ref", {
     }
-    var Se = function(e, r, t, f, d, p, c) {
-      var u = {
+    var le = function(e, r, t, f, d, p, c) {
+      var s = {
         // This tag allows us to uniquely identify this as a React Element
@@ -457,3 +457,3 @@ $$typeof: o,
       };
-      return u._store = {}, Object.defineProperty(u._store, "validated", {
+      return s._store = {}, Object.defineProperty(s._store, "validated", {
         configurable: !1,
@@ -463,3 +463,3 @@ enumerable: !1,
         value: !1
-      }), Object.defineProperty(u, "_self", {
+      }), Object.defineProperty(s, "_self", {
         configurable: !1,
@@ -469,3 +469,3 @@ enumerable: !1,
         value: f
-      }), Object.defineProperty(u, "_source", {
+      }), Object.defineProperty(s, "_source", {
         configurable: !1,
@@ -475,10 +475,10 @@ enumerable: !1,
         value: d
-      }), Object.freeze && (Object.freeze(u.props), Object.freeze(u)), u;
+      }), Object.freeze && (Object.freeze(s.props), Object.freeze(s)), s;
     };
-    function k(e, r, t, f, d) {
+    function Q(e, r, t, f, d) {
       {
-        var p, c = {}, u = null, S = null;
-        t !== void 0 && (Ae(t), u = "" + t), He(r) && (Ae(r.key), u = "" + r.key), ce(r) && (S = r.ref, le(r, d));
+        var p, c = {}, s = null, S = null;
+        t !== void 0 && (U(t), s = "" + t), se(r) && (U(r.key), s = "" + r.key), D(r) && (S = r.ref, ce(r, d));
         for (p in r)
-          Te.call(r, p) && !je.hasOwnProperty(p) && (c[p] = r[p]);
+          ue.call(r, p) && !er.hasOwnProperty(p) && (c[p] = r[p]);
         if (e && e.defaultProps) {
@@ -489,16 +489,16 @@ var y = e.defaultProps;
         }
-        if (u || S) {
+        if (s || S) {
           var g = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
-          u && de(c, g), S && Q(c, g);
+          s && Z(c, g), S && Je(c, g);
         }
-        return Se(e, u, S, d, f, _e.current, c);
+        return le(e, s, S, d, f, _e.current, c);
       }
     }
-    var D = oe.ReactCurrentOwner, ve = oe.ReactDebugCurrentFrame;
-    function P(e) {
+    var P = oe.ReactCurrentOwner, Re = oe.ReactDebugCurrentFrame;
+    function Y(e) {
       if (e) {
-        var r = e._owner, t = se(e.type, e._source, r ? r.type : null);
-        ve.setExtraStackFrame(t);
+        var r = e._owner, t = fe(e.type, e._source, r ? r.type : null);
+        Re.setExtraStackFrame(t);
       } else
-        ve.setExtraStackFrame(null);
+        Re.setExtraStackFrame(null);
     }
@@ -510,6 +510,6 @@ var M;
     }
-    function pe() {
+    function de() {
       {
-        if (D.current) {
-          var e = _(D.current.type);
+        if (P.current) {
+          var e = _(P.current.type);
           if (e)
@@ -523,3 +523,3 @@ return `
     }
-    function be(e) {
+    function we(e) {
       {
@@ -535,6 +535,6 @@ if (e !== void 0) {
     }
-    var Ce = {};
-    function n(e) {
+    var ve = {};
+    function Ve(e) {
       {
-        var r = pe();
+        var r = de();
         if (!r) {
@@ -549,3 +549,3 @@ var t = typeof e == "string" ? e : e.displayName || e.name;
     }
-    function s(e, r) {
+    function n(e, r) {
       {
@@ -555,18 +555,18 @@ if (!e._store || e._store.validated || e.key != null)
         e._store.validated = !0;
-        var t = n(r);
-        if (Ce[t])
+        var t = Ve(r);
+        if (ve[t])
           return;
-        Ce[t] = !0;
+        ve[t] = !0;
         var f = "";
-        e && e._owner && e._owner !== D.current && (f = " It was passed a child from " + _(e._owner.type) + "."), P(e), E('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, f), P(null);
+        e && e._owner && e._owner !== P.current && (f = " It was passed a child from " + _(e._owner.type) + "."), Y(e), E('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, f), Y(null);
       }
     }
-    function l(e, r) {
+    function u(e, r) {
       {
         if (typeof e != "object")
           return;
-        if (K(e))
+        if (H(e))
           for (var t = 0; t < e.length; t++) {
             var f = e[t];
-            G(f) && s(f, r);
+            G(f) && n(f, r);
           }
@@ -576,10 +576,10 @@ else if (G(e))
         else if (e) {
-          var d = Ne(e);
+          var d = Be(e);
           if (typeof d == "function" && d !== e.entries)
             for (var p = d.call(e), c; !(c = p.next()).done; )
-              G(c.value) && s(c.value, r);
+              G(c.value) && n(c.value, r);
         }
       }
     }
-    function er(e) {
+    function l(e) {
       {
@@ -592,5 +592,5 @@ var r = e.type;
           t = r.propTypes;
-        else if (typeof r == "object" && (r.$$typeof === w || // Note: Memo only checks outer props here.
+        else if (typeof r == "object" && (r.$$typeof === R || // Note: Memo only checks outer props here.
         // Inner props are checked in the reconciler.
-        r.$$typeof === O))
+        r.$$typeof === T))
           t = r.propTypes;
@@ -601,3 +601,3 @@ else
           var f = _(r);
-          Ee(t, e.props, "prop", f, e);
+          O(t, e.props, "prop", f, e);
         } else if (r.PropTypes !== void 0 && !M) {
@@ -616,7 +616,7 @@ M = !0;
           if (f !== "children" && f !== "key") {
-            P(e), E("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", f), P(null);
+            Y(e), E("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", f), Y(null);
             break;
           }
         }
-        e.ref !== null && (P(e), E("Invalid attribute `ref` supplied to `React.Fragment`."), P(null));
+        e.ref !== null && (Y(e), E("Invalid attribute `ref` supplied to `React.Fragment`."), Y(null));
       }
@@ -626,28 +626,28 @@ }
       {
-        var c = Re(e);
+        var c = Te(e);
         if (!c) {
-          var u = "";
-          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (u += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
-          var S = be(d);
-          S ? u += S : u += pe();
+          var s = "";
+          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (s += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var S = we(d);
+          S ? s += S : s += de();
           var y;
-          e === null ? y = "null" : K(e) ? y = "array" : e !== void 0 && e.$$typeof === o ? (y = "<" + (_(e.type) || "Unknown") + " />", u = " Did you accidentally export a JSX literal instead of a component?") : y = typeof e, E("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", y, u);
+          e === null ? y = "null" : H(e) ? y = "array" : e !== void 0 && e.$$typeof === o ? (y = "<" + (_(e.type) || "Unknown") + " />", s = " Did you accidentally export a JSX literal instead of a component?") : y = typeof e, E("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", y, s);
         }
-        var g = k(e, r, t, d, p);
+        var g = Q(e, r, t, d, p);
         if (g == null)
           return g;
         if (c) {
-          var Y = r.children;
-          if (Y !== void 0)
+          var L = r.children;
+          if (L !== void 0)
             if (f)
-              if (K(Y)) {
-                for (var ke = 0; ke < Y.length; ke++)
-                  l(Y[ke], e);
-                Object.freeze && Object.freeze(Y);
+              if (H(L)) {
+                for (var ke = 0; ke < L.length; ke++)
+                  u(L[ke], e);
+                Object.freeze && Object.freeze(L);
               } else
                 E("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
             else
-              l(Y, e);
+              u(L, e);
         }
-        return e === i ? rr(g) : er(g), g;
+        return e === i ? rr(g) : l(g), g;
       }
@@ -658,12 +658,12 @@ }
     }
-    function lr(e, r, t) {
+    function nr(e, r, t) {
       return Ke(e, r, t, !1);
     }
-    var dr = lr, vr = tr;
-    We.Fragment = i, We.jsx = dr, We.jsxs = vr;
-  }()), We;
+    var dr = nr, vr = tr;
+    Ne.Fragment = i, Ne.jsx = dr, Ne.jsxs = vr;
+  }()), Ne;
 }
-process.env.NODE_ENV === "production" ? nr.exports = yr() : nr.exports = gr();
-var re = nr.exports;
-const B = (a, o, v) => a < o ? o : a > v ? v : a, Er = (a, o, v) => {
+process.env.NODE_ENV === "production" ? ar.exports = yr() : ar.exports = gr();
+var re = ar.exports;
+const X = (a, o, v) => a < o ? o : a > v ? v : a, Er = (a, o, v) => {
   let i = 0;
@@ -684,3 +684,3 @@ return o === "top" ? i = (a.offsetY * 2 - 1) * -1 : o === "bottom" ? i = (a.offsetY - 0.5) * 2 : o === "left" ? i = (a.offsetX * 2 - 1) * -1 : o === "right" ? i = (a.offsetX - 0.5) * 2 : o === "all" && (i = Math.max(
   return v ? h = ((i + m) * (3 / 2) - 1) * 100 : h = ((i + m) * (-3 / 2) + 0.5) * 100, `translateX(${h}%)`;
-}, ur = (a) => {
+}, cr = (a) => {
   if (a instanceof HTMLElement)
@@ -690,3 +690,5 @@ return a;
     return document;
-  if (a.current)
+  if (a.current && a.current instanceof Object && "element" in a.current && a.current.element instanceof HTMLElement)
+    return a.current.element;
+  if (a.current && a.current instanceof HTMLElement)
     return a.current;
@@ -764,109 +766,121 @@ }, Ze = (a, o) => {
     shadow: te = "0 0 1rem rgba(0,0,0,0.5)",
-    lineGlareEnable: C = !0,
-    lineGlareBlurEnable: w = !0,
+    lineGlareEnable: k = !0,
+    lineGlareBlurEnable: R = !0,
     lineGlareBlurAmount: ne = "4px",
     lineGlareMaxOpacity: j = 0.1,
-    lineGlareWidthPercent: O = 10,
-    lineGlareMixBlendMode: A = "normal",
-    lineGlareColor: me = "white",
+    lineGlareWidthPercent: T = 10,
+    lineGlareMixBlendMode: J = "normal",
+    lineGlareColor: pe = "white",
     lineGlareReverse: ae = !1,
     lineGlareDirection: Qe = "to-bottom-right",
-    lineGlareHoverPosition: Ne = "top-left",
+    lineGlareHoverPosition: Be = "top-left",
     spotGlareEnable: oe = !0,
     spotGlareMaxOpacity: E = 0.5,
     spotGlareMixBlendMode: Me = "normal",
-    spotGlarePosition: he = "top",
+    spotGlarePosition: me = "top",
     spotGlareColor: Ge = "white",
-    spotGlareReverse: Be = !1,
-    tiltMaxAngleX: U = 20,
-    tiltMaxAngleY: X = 20,
+    spotGlareReverse: Ue = !1,
+    tiltMaxAngleX: q = 20,
+    tiltMaxAngleY: z = 20,
     tiltReverse: $e = !1,
-    tiltReset: Re = !0,
-    initialAngleX: L = 0,
-    initialAngleY: x = 0,
+    tiltReset: Te = !0,
+    initialAngleX: I = 0,
+    initialAngleY: $ = 0,
     disableScrollOnTouch: _ = !0,
-    style: H,
-    tiltStyle: ye,
-    tiltProps: Ue,
-    gyroMaxAngleX: I = 0,
-    gyroMaxAngleY: V = 0,
+    style: K,
+    tiltStyle: he,
+    tiltProps: Xe,
+    gyroMaxAngleX: V = 0,
+    gyroMaxAngleY: W = 0,
     gyroReverse: Fe = !1,
-    disabled: T = !1,
-    disabledFilter: Xe = "grayscale(1) brightness(125%)",
-    CSSTransition: we = "all 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99)",
-    TiltWrapper: qe,
-    fullPageListening: $ = !1,
-    controlElement: q,
+    disabled: w = !1,
+    disabledFilter: qe = "grayscale(1) brightness(125%)",
+    CSSTransition: Oe = "all 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99)",
+    TiltWrapper: ze,
+    fullPageListening: F = !1,
+    controlElement: A,
     controlElementOnly: De = !1,
-    testIdEnable: z = !1,
-    onTilt: ie,
-    onReset: ge,
-    onMouseEnter: fe,
-    onMouseMove: Pe,
-    onMouseLeave: Oe,
-    onTouchStart: Ye,
-    onTouchMove: Le,
-    onTouchEnd: se,
-    children: Te,
-    ...ze
-  }, Je) => {
-    const b = xe(), Ee = xe(!1), ue = !$ && (!q || q && !De), K = xe(null), W = xe(null), F = xe(null), N = xe(null), Ae = R(
+    preserve3dEnable: je = !0,
+    testIdEnable: N = !1,
+    onTilt: ye,
+    onReset: ie,
+    onMouseEnter: Pe,
+    onMouseMove: Ce,
+    onMouseLeave: Ye,
+    onTouchStart: Le,
+    onTouchMove: fe,
+    onTouchEnd: ue,
+    children: Ae,
+    ...He
+  }, Se) => {
+    const O = xe(), ge = xe(!1), H = !F && (!A || A && !De), Ee = xe(null), B = xe(null), x = xe(null), U = xe(null), _e = b(
       ({ children: n }) => /* @__PURE__ */ re.jsx(re.Fragment, { children: n }),
       []
-    ), _e = qe || Ae;
-    C && (O = B(O, 0, 50) / 2), U = B(U, 0, 90), X = B(X, 0, 90), I = B(I, 0, 90), V = B(V, 0, 90), L && (L = B(
-      L,
-      -U,
-      U
-    )), x && (x = B(
-      x,
-      -X,
-      X
+    ), er = ze || _e;
+    k && (T = X(T, 0, 50) / 2), q = X(q, 0, 90), z = X(z, 0, 90), V = X(V, 0, 90), W = X(W, 0, 90), I && (I = X(
+      I,
+      -q,
+      q
+    )), $ && ($ = X(
+      $,
+      -z,
+      z
     ));
-    const je = or(() => C ? (100 - O) / 2 : 0, [C, O]), Ie = or(() => C ? je + O : 0, [C, O, je]), Z = R(() => {
-      if (!K.current || !F.current || !b.current)
+    const be = ir(() => k ? (100 - T) / 2 : 0, [k, T]), Ie = ir(() => k ? be + T : 0, [k, T, be]), C = b((n = !0) => {
+      requestAnimationFrame(() => {
+        B.current && (B.current.style.willChange = n ? "transform" : ""), x.current && (x.current.style.willChange = n ? "transform, opacity" : ""), U.current && (U.current.style.willChange = n ? "transform" : "");
+      });
+    }, []), D = b(
+      (n = !0) => {
+        requestAnimationFrame(() => {
+          B.current && h && (B.current.style.boxShadow = n ? te : "");
+        });
+      },
+      [te, h]
+    ), se = b(() => {
+      if (!Ee.current || !x.current || !O.current)
         return;
       const n = Er(
-        b.current,
-        he,
+        O.current,
+        me,
         E
-      ), s = _r(
-        b.current,
-        he,
-        Be
+      ), u = _r(
+        O.current,
+        me,
+        Ue
       );
       requestAnimationFrame(() => {
-        F.current && (F.current.style.opacity = n, F.current.style.transform = s);
+        x.current && (x.current.style.opacity = n, x.current.style.transform = u);
       });
-    }, [he, E, Be]), J = R(() => {
-      if (!K.current || !N.current || !b.current)
+    }, [me, E, Ue]), ce = b(() => {
+      if (!Ee.current || !U.current || !O.current)
         return;
       const n = br(
-        b.current,
-        Ne,
+        O.current,
+        Be,
         ae
       );
       requestAnimationFrame(() => {
-        N.current && (N.current.style.transform = n);
+        U.current && (U.current.style.transform = n);
       });
-    }, [Ne, ae]), ce = R(
+    }, [Be, ae]), Z = b(
       (n = !0) => {
-        if (!K.current || !b.current)
+        if (!Ee.current || !O.current)
           return { angleX: 0, angleY: 0 };
-        let s = -(b.current.offsetY - 0.5) * 2 * U, l = (b.current.offsetX - 0.5) * 2 * X;
-        return $e && n && (s = -s, l = -l), { angleX: s, angleY: l };
+        let u = -(O.current.offsetY - 0.5) * 2 * q, l = (O.current.offsetX - 0.5) * 2 * z;
+        return $e && n && (u = -u, l = -l), { angleX: u, angleY: l };
       },
-      [U, X, $e]
-    ), He = R(
+      [q, z, $e]
+    ), Je = b(
       (n) => {
-        const s = (n.angleY / X + 1) / 2, l = (-n.angleX / U + 1) / 2;
-        b.current = { offsetX: s, offsetY: l };
+        const u = (n.angleY / z + 1) / 2, l = (-n.angleX / q + 1) / 2;
+        O.current = { offsetX: u, offsetY: l };
       },
-      [U, X]
-    ), le = R(
-      (n, s = !0) => {
-        const l = s ? m : 1;
+      [q, z]
+    ), le = b(
+      (n, u = !0) => {
+        const l = u ? m : 1;
         requestAnimationFrame(() => {
-          W.current && (W.current.style.transform = `rotateX(${n.angleX}deg) rotateY(${n.angleY}deg) scale3d(${l},${l},${l})`);
-        }), ie && ie({
+          B.current && (B.current.style.transform = `rotateX(${n.angleX}deg) rotateY(${n.angleY}deg) scale3d(${l},${l},${l})`);
+        }), ye && ye({
           angleX: n.angleX,
@@ -876,21 +890,27 @@ angleY: n.angleY
       },
-      [ie, m]
-    ), de = R(
-      (n, s = !1) => {
-        He(n), le(n, s), J(), Z();
+      [ye, m]
+    ), Q = b(
+      (n, u = !1) => {
+        Je(n), le(n, u), D(u), ce(), se();
       },
-      [J, He, Z, le]
-    ), Q = R(() => {
-      ge && ge(), L || x ? de({
-        angleX: L || 0,
-        angleY: x || 0
-      }) : (b.current = void 0, requestAnimationFrame(() => {
-        N.current && (N.current.style.transform = `translateX(${ae ? "50%" : "-100%"})`), F.current && (F.current.style.transform = "translateX(0%) translateY(0%)", F.current.style.opacity = "0"), W.current && (W.current.style.transform = "rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)");
+      [
+        Je,
+        le,
+        D,
+        ce,
+        se
+      ]
+    ), P = b(() => {
+      ie && ie(), I || $ ? Q({
+        angleX: I || 0,
+        angleY: $ || 0
+      }) : (O.current = void 0, requestAnimationFrame(() => {
+        U.current && (U.current.style.transform = `translateX(${ae ? "50%" : "-100%"})`), x.current && (x.current.style.transform = "translateX(0%) translateY(0%)", x.current.style.opacity = "0"), B.current && (B.current.style.transform = "rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)");
       }));
-    }, [L, x, ae, ge, de]), Se = R(
-      (n, s) => {
-        if (!s)
+    }, [I, $, ae, ie, Q]), Re = b(
+      (n, u) => {
+        if (!u)
           return;
-        if ($ && s instanceof Document) {
-          b.current = {
+        if (F && u instanceof Document) {
+          O.current = {
             offsetX: n.x / window.innerWidth,
@@ -901,149 +921,143 @@ offsetY: n.y / window.innerHeight
         }
-        const l = s.getBoundingClientRect();
+        const l = u.getBoundingClientRect();
         if (!l.width || !l.height)
           return;
-        const er = B(
+        const rr = X(
           n.x,
           l.left,
           l.right
-        ), rr = B(
+        ), Ke = X(
           n.y,
           l.top,
           l.bottom
-        ), Ke = (er - l.left) / l.width, tr = (rr - l.top) / l.height;
-        b.current = { offsetX: Ke, offsetY: tr };
+        ), tr = (rr - l.left) / l.width, nr = (Ke - l.top) / l.height;
+        O.current = { offsetX: tr, offsetY: nr };
       },
-      [$]
-    ), k = R((n = !0) => {
-      W.current && (W.current.style.willChange = n ? "transform" : ""), F.current && (F.current.style.willChange = n ? "transform, opacity" : ""), N.current && (N.current.style.willChange = n ? "transform" : "");
-    }, []), D = R(
-      (n = !0) => {
-        W.current && h && (W.current.style.boxShadow = n ? te : "");
-      },
-      [te, h]
+      [F]
     );
     mr(
-      Je,
+      Se,
       () => ({
-        tilt: de,
-        reset: Q,
-        angle: () => ce(!1),
-        updateWillChange: k,
-        element: K.current
+        tilt: Q,
+        reset: P,
+        angle: () => Z(!1),
+        updateWillChange: C,
+        element: Ee.current
       }),
-      [de, Q, k, ce]
+      [Q, P, C, Z]
     );
-    const ve = R(() => {
-      T || (Ee.current = !0, k(), D());
-    }, [T, D, k]), P = R(() => {
-      T || (_ && !$ && (typeof _ == "boolean" ? document.body.style.overflow = "hidden" : _.style.overflow = "hidden"), Ee.current = !0, k(), D());
+    const Y = b(() => {
+      w || (ge.current = !0, C(), D());
+    }, [w, D, C]), M = b(() => {
+      w || (_ && !F && (typeof _ == "boolean" ? document.body.style.overflow = "hidden" : _.style.overflow = "hidden"), ge.current = !0, C(), D());
     }, [
       _,
-      T,
-      $,
+      w,
+      F,
       D,
-      k
-    ]), M = R(
+      C
+    ]), G = b(
       (n) => {
-        T || (Se(
+        w || (Re(
           { x: n.clientX, y: n.clientY },
           n.currentTarget
-        ), le(ce()), J(), Z());
+        ), le(Z()), ce(), se());
       },
       [
-        T,
+        w,
+        Z,
+        Re,
+        le,
         ce,
-        Se,
-        le,
-        J,
-        Z
+        se
       ]
-    ), G = R(
+    ), de = b(
       (n) => {
-        if (T)
+        if (w)
           return;
-        const s = n.changedTouches[0];
-        s && (Se(
+        const u = n.changedTouches[0];
+        u && (Re(
           {
-            x: s.clientX,
-            y: s.clientY
+            x: u.clientX,
+            y: u.clientY
           },
           n.currentTarget
-        ), le(ce()), J(), Z());
+        ), le(Z()), ce(), se());
       },
       [
-        T,
+        w,
+        Z,
+        Re,
+        le,
         ce,
-        Se,
-        le,
-        J,
-        Z
+        se
       ]
-    ), pe = R(() => {
-      T || (Ee.current = !1, k(!1), D(!1), Re && Q());
-    }, [T, Q, Re, D, k]), be = R(() => {
-      T || (_ && !$ && (typeof _ == "boolean" ? document.body.style.overflow = "" : _.style.overflow = ""), Ee.current = !1, k(!1), D(!1), Re && Q());
+    ), we = b(() => {
+      w || (ge.current = !1, C(!1), D(!1), Te && P());
+    }, [w, P, Te, D, C]), ve = b(() => {
+      w || (_ && !F && (typeof _ == "boolean" ? document.body.style.overflow = "" : _.style.overflow = ""), ge.current = !1, C(!1), D(!1), Te && P());
     }, [
       _,
-      T,
-      $,
-      Q,
-      Re,
+      w,
+      F,
+      P,
+      Te,
       D,
-      k
+      C
     ]);
-    ir(() => {
-      if (!q && !$)
+    fr(() => {
+      if (!A && !F)
         return;
       let n;
-      $ || !q ? n = [document] : n = Array.isArray(q) ? q : [q];
-      for (let s of n) {
-        const l = ur(s);
-        l && (s = l, s.addEventListener("mouseenter", ve), s.addEventListener("mousemove", M), s.addEventListener("mouseleave", pe), s.addEventListener("touchstart", P, { passive: !0 }), s.addEventListener("touchmove", G, { passive: !0 }), s.addEventListener("touchend", be, { passive: !0 }));
+      F || !A ? n = [document] : n = Array.isArray(A) ? A : [A];
+      for (let u of n) {
+        const l = cr(u);
+        l && (u = l, u.addEventListener("mouseenter", Y), u.addEventListener("mousemove", G), u.addEventListener("mouseleave", we), u.addEventListener("touchstart", M, { passive: !0 }), u.addEventListener("touchmove", de, { passive: !0 }), u.addEventListener("touchend", ve, { passive: !0 }));
       }
       return () => {
-        for (let s of n) {
-          const l = ur(s);
-          l && (s = l, s.removeEventListener("mouseenter", ve), s.removeEventListener("mousemove", M), s.removeEventListener("mouseleave", pe), s.removeEventListener("touchstart", P), s.removeEventListener("touchmove", G), s.removeEventListener("touchend", be));
+        for (let u of n) {
+          const l = cr(u);
+          l && (u = l, u.removeEventListener("mouseenter", Y), u.removeEventListener("mousemove", G), u.removeEventListener("mouseleave", we), u.removeEventListener("touchstart", M), u.removeEventListener("touchmove", de), u.removeEventListener("touchend", ve));
         }
       };
     }, [
-      q,
+      A,
+      Y,
+      G,
+      we,
+      M,
+      de,
       ve,
-      M,
-      pe,
-      P,
-      G,
-      be,
-      $
+      F
     ]);
-    const Ce = R(
+    const Ve = b(
       (n) => {
-        if (Ee.current || n.beta === null && n.gamma === null)
+        if (ge.current || n.beta === null && n.gamma === null)
           return;
-        let s = I && n.beta ? B(-n.beta, -I, I) : L || 0, l = V && n.gamma ? B(n.gamma, -V, V) : x || 0;
-        Fe && (s = -s, l = -l), de({ angleX: s, angleY: l });
+        let u = V && n.beta ? X(-n.beta, -V, V) : I || 0, l = W && n.gamma ? X(n.gamma, -W, W) : $ || 0;
+        Fe && (u = -u, l = -l), Q({ angleX: u, angleY: l });
       },
       [
+        V,
+        W,
         I,
-        V,
-        L,
-        x,
+        $,
         Fe,
-        de
+        Q
       ]
     );
-    return ir(() => {
-      if (!(!I && !V))
-        return window.addEventListener("deviceorientation", Ce), () => window.removeEventListener("deviceorientation", Ce);
-    }, [I, V, Ce, k]), /* @__PURE__ */ re.jsx(
+    return fr(() => {
+      if (!(!V && !W))
+        return window.addEventListener("deviceorientation", Ve), () => window.removeEventListener("deviceorientation", Ve);
+    }, [V, W, Ve, C]), /* @__PURE__ */ re.jsx(
       "div",
       {
         ref: (n) => {
-          n && (K.current = n, (L || x) && !b.current && Q());
+          n && (Ee.current = n, O.current && (w ? P() : Q(Z())), (I || $) && !O.current && P());
         },
-        "data-testid": z ? "container" : void 0,
+        "data-testid": N ? "container" : void 0,
         style: Object.assign(
           {
             display: "inline-block",
+            verticalAlign: "middle",
             width: a,
@@ -1053,32 +1067,32 @@ height: o,
             perspective: i,
-            transformStyle: "preserve-3d",
+            transformStyle: je ? "preserve-3d" : void 0,
             backfaceVisibility: "hidden",
-            filter: T ? Xe : void 0
+            filter: w ? qe : void 0
           },
-          H
+          K
         ),
-        onMouseEnter: ue ? fe ? (n) => {
-          ve(), fe(n);
-        } : ve : fe,
-        onTouchStart: ue ? Ye ? (n) => {
-          P(), Ye(n);
-        } : P : Ye,
-        onMouseMove: ue ? Pe ? (n) => {
-          M(n), Pe(n);
-        } : M : Pe,
-        onTouchMove: ue ? Le ? (n) => {
-          G(n), Le(n);
-        } : G : Le,
-        onMouseLeave: ue ? Oe ? (n) => {
-          pe(), Oe(n);
-        } : pe : Oe,
-        onTouchEnd: ue ? se ? (n) => {
-          be(), se(n);
-        } : be : se,
-        ...ze,
-        children: /* @__PURE__ */ re.jsx(_e, { children: /* @__PURE__ */ re.jsxs(
+        onMouseEnter: H ? Pe ? (n) => {
+          Y(), Pe(n);
+        } : Y : Pe,
+        onTouchStart: H ? Le ? (n) => {
+          M(), Le(n);
+        } : M : Le,
+        onMouseMove: H ? Ce ? (n) => {
+          G(n), Ce(n);
+        } : G : Ce,
+        onTouchMove: H ? fe ? (n) => {
+          de(n), fe(n);
+        } : de : fe,
+        onMouseLeave: H ? Ye ? (n) => {
+          we(), Ye(n);
+        } : we : Ye,
+        onTouchEnd: H ? ue ? (n) => {
+          ve(), ue(n);
+        } : ve : ue,
+        ...He,
+        children: /* @__PURE__ */ re.jsx(er, { children: /* @__PURE__ */ re.jsxs(
           "div",
           {
-            ref: W,
-            "data-testid": z ? "tilt" : void 0,
+            ref: B,
+            "data-testid": N ? "tilt" : void 0,
             style: Object.assign(
@@ -1091,16 +1105,16 @@ {
                 borderRadius: v,
-                transformStyle: "preserve-3d",
+                transformStyle: je ? "preserve-3d" : void 0,
                 backfaceVisibility: "hidden",
-                transition: we,
+                transition: Oe,
                 transform: "rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"
               },
-              ye
+              he
             ),
-            ...Ue,
+            ...Xe,
             children: [
-              Te,
+              Ae,
               oe && /* @__PURE__ */ re.jsx(
                 "div",
                 {
-                  "data-testid": z ? "spot-glare-container" : void 0,
+                  "data-testid": N ? "spot-glare-container" : void 0,
                   style: {
@@ -1118,11 +1132,11 @@ pointerEvents: "none",
                     {
-                      ref: F,
-                      "data-testid": z ? "spot-glare" : void 0,
+                      ref: x,
+                      "data-testid": N ? "spot-glare" : void 0,
                       style: {
                         position: "absolute",
-                        left: he === "all" ? "-50%" : "-100%",
-                        top: he === "all" ? "-50%" : "-100%",
+                        left: me === "all" ? "-50%" : "-100%",
+                        top: me === "all" ? "-50%" : "-100%",
                         width: "200%",
                         height: "200%",
-                        transition: we,
+                        transition: Oe,
                         backgroundImage: `radial-gradient(${Ge}, transparent)`,
@@ -1136,6 +1150,6 @@ transform: "translateX(0%) translateY(0%)",
               ),
-              C && /* @__PURE__ */ re.jsx(
+              k && /* @__PURE__ */ re.jsx(
                 "div",
                 {
-                  "data-testid": z ? "line-glare-container" : void 0,
+                  "data-testid": N ? "line-glare-container" : void 0,
                   style: {
@@ -1148,3 +1162,3 @@ pointerEvents: "none",
                     backfaceVisibility: "hidden",
-                    mixBlendMode: A
+                    mixBlendMode: J
                   },
@@ -1154,4 +1168,4 @@ children: /* @__PURE__ */ re.jsx(
                     {
-                      "data-testid": z ? "line-glare" : void 0,
-                      ref: N,
+                      "data-testid": N ? "line-glare" : void 0,
+                      ref: U,
                       style: {
@@ -1163,7 +1177,7 @@ position: "absolute",
                         height: "200%",
-                        filter: w ? `blur(${ne})` : "",
-                        transition: we,
+                        filter: R ? `blur(${ne})` : "",
+                        transition: Oe,
                         opacity: String(j),
                         transform: `translateX(${ae ? "50%" : "-100%"})`,
-                        backgroundImage: `linear-gradient(${Qe === "to-bottom-right" ? "to bottom right" : "to bottom left"}, transparent, transparent ${je}%, ${me} calc(${je}% + 1px), ${me} ${Ie}%, transparent calc(${Ie}% + 1px), transparent 0%)`
+                        backgroundImage: `linear-gradient(${Qe === "to-bottom-right" ? "to bottom right" : "to bottom left"}, transparent, transparent ${be}%, ${pe} calc(${be}% + 1px), ${pe} ${Ie}%, transparent calc(${Ie}% + 1px), transparent 0%)`
                       }
@@ -1170,0 +1184,0 @@ }

package.json

 {
   "name": "react-next-tilt",
   "private": false,
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "A Performant Customizable Tilt Component for React",
@@ -77,13 +77,13 @@ "main": "./dist/react-next-tilt.umd.cjs",
     "@storybook/theming": "^7.1.1",
-    "@types/node": "^20.3.1",
-    "@types/react": "^18.0.37",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "@vitejs/plugin-react": "^4.0.0",
-    "cypress": "^12.17.0",
-    "eslint": "^8.38.0",
+    "@types/node": "^20.5.7",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-react": "^4.0.4",
+    "cypress": "^12.17.4",
+    "eslint": "^8.48.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-react-refresh": "^0.3.5",
+    "eslint-plugin-storybook": "^0.6.13",
     "gh-pages": "^5.0.0",
@@ -95,5 +95,5 @@ "path": "^0.12.7",
     "storybook": "^7.1.1",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.9",
-    "vite-plugin-dts": "^3.2.0"
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-dts": "^3.5.3"
   },
@@ -100,0 +100,0 @@ "files": [

README.md

@@ -105,3 +105,3 @@ <h1 align="center">
 <table aria-hidden="false" ><thead><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody><tr><td><span>width</span></td><td><div><span>Width of the component</span></div><div><span>note: You can also set the width using "className", "style", etc. instead of using this property</span></div><div>example: 100, '200px', '10rem', '20%'</div><div><div><code><span>string</span> | <span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>height</span></td><td><div><span>Height of the component</span></div><div><span>note: You can also set the height using "className", "style", etc. instead of using this property</span></div><div>example: 100, '200px', '10rem', '20%'</div><div><div><code><span>string</span> | <span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>borderRadius</span></td><td><div><span>Border radius of the component (applied to glare elements as well)</span></div><div>example: '4px', '1em', '2rem'</div><div><div><code><span>string</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>perspective</span></td><td><div><span>Determines how far the elements are from the user</span></div><div>example: '1000px', '60em', '50rem'</div><div><div><code><span>string</span></code></div></div></td><td><div><span>"1000px"</span></div></td></tr><tr><td><span>scale</span></td><td><div><span>Amount of scale applied to the component on hover/touch</span></div><div><div><code><span>number</span></div></code></div></td><td><div><span>1</span></div></td></tr><tr><td><span>shadowEnable</span></td><td><div><span>Enables/Disables the box shadow applied to the tilt element on hover/touch</span></div><div><div><code><span>boolean</span></div></code></div></td><td><div><span>false</span></div></td></tr><tr><td><span>shadow</span></td><td><div><span>Box shadow applied to the tilt element on hover/touch</span></div><div><div><code><span>string</span></div></code></div></td><td><div><span>"0 0 1rem rgba(0,0,0,0.5)"</span></div></td></tr><tr><td><span>lineGlareEnable</span></td><td><div><span>Enables/Disables the line glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>lineGlareBlurEnable</span></td><td><div><span>Enables/Disables the blur applied to the line glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>lineGlareBlurAmount</span></td><td><div><span>Amount of blur applied to the line glare effect</span></div><div>example: '4px', '1em', '2rem'</div><div><div><code><span>string</span></code></div></div></td><td><div><span>"4px"</span></div></td></tr><tr><td><span>lineGlareWidthPercent</span></td><td><div><span>Width of the line glare in relation to the component</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>10</span></div></td></tr><tr><td><span>lineGlareMaxOpacity</span></td><td><div><span>Maximum opacity of the line glare effect</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>0.1</span></div></td></tr><tr><td><span>lineGlareMixBlendMode</span></td><td><div><span><code>mix-blend-mode</code> applied to the line glare effect</span></div><div>note: Using a "mix-blend-mode" other than "normal" will break the parallax effect</div><div><div><code><span>string (Property.MixBlendMode)</span></code></div></div></td><td><div><span>"normal"</span></div></td></tr><tr><td><span>lineGlareColor</span></td><td><div><span>Color of the line glare effect</span></div><div>example: 'lightblue', '#445566AA', 'rgba(50,150,250,0.5)', 'hsla(100,50%,50%,0.2)'</div><div><div><code><span>string (Property.Color)</span></code></div></div></td><td><div><span>"white"</span></div></td></tr><tr><td><span>lineGlareReverse</span></td><td><div><span>Reverses the movement of the line glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>lineGlareDirection</span></td><td><div><span>Changes the direction/angle of the line glare effect</span></div><div><div><code><span>"to-bottom-right"</span> | <span>"to-bottom-left"</span></div></div></td><td><div><span>"to-bottom-right"</span></code></div></td></tr><tr><td><span>lineGlareHoverPosition</span></td><td><div><span>Determines the areas of the component that show the line glare effect when hovered/touched</span></div><div><div><code><span>"top-left"</span> | <span>"top-right"</span> | <span>"bottom-left"</span> | <span>"bottom-right"</span></code></div></div></td><td><div><span>"top-left"</span></div></td></tr><tr><td><span>spotGlareEnable</span></td><td><div><span>Enables/Disables the spot glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>spotGlareMaxOpacity</span></td><td><div><span>Maximum opacity of the spot glare effect</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>0.5</span></div></td></tr><tr><td><span>spotGlareMixBlendMode</span></td><td><div><span><code>mix-blend-mode</code> applied to the spot glare effect</span></div><div>note: Using a "mix-blend-mode" other than "normal" will break the parallax effect</div><div><div><code><span>string (Property.MixBlendMode)</span></code></div></div></td><td><div><span>"normal"</span></div></td></tr><tr><td><span>spotGlarePosition</span></td><td><div><span>Determines the position of the spot glare effect inside the component</span></div><div><div><code><span>"top"</span> | <span>"right"</span> | <span>"bottom"</span> | <span>"left"</span> | <span>"all"</span></code></div></div></td><td><div><span>"top"</span></div></td></tr><tr><td><span>spotGlareColor</span></td><td><div><span>Color of the line glare effect</span></div><div>example: 'lightblue', '#445566AA', 'rgba(50,150,250,0.5)', 'hsla(100,50%,50%,0.2)'</div><div><div><code><span>string (Property.Color)</span></code></div></div></td><td><div><span>"white"</span></div></td></tr><tr><td><span>spotGlareReverse</span></td><td><div><span>Reverses the movement of the spot glare effect</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>tiltMaxAngleX</span></td><td><div><span>Maximum tilt angle around the X axis between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the X axis</div><div><div><code><span>number</span></code></div></div></td><td><div><span>20</span></div></td></tr><tr><td><span>tiltMaxAngleY</span></td><td><div><span>Maximum tilt angle around the Y axis between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the Y axis</div><div><div><code><span>number</span></code></div></div></td><td><div><span>20</span></div></td></tr><tr><td><span>tiltReverse</span></td><td><div><span>Reverses the tilt direction/movement</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>tiltReset</span></td><td><div><span>Enables/Disables resetting the tilt effect on mouseLeave/touchEnd</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>initialAngleX</span></td><td><div><span>Initial tilt/rotation angle around the X axis</span></div><div>note: Is limited to [-tiltMaxAngleX - tiltMaxAngleX] range</div><div><div><code><span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>initialAngleY</span></td><td><div><span>Initial tilt/rotation angle around the Y axis</span></div><div>note: Is limited to [-tiltMaxAngleY - tiltMaxAngleY] range</div><div><div><code><span>number</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>disableScrollOnTouch</span></td><td><div><span>Disables scrolling (<code>overflow: hidden</code>) during touch inetraction to prevent unwanted movement</span></div><div>note: Disables scrolling on "body" if set to "boolean". You can also pass an "HTMLElement" which scrolling will be disabled for, instead of "body"</div><div><div><code><span>boolean</span> | <span>HTMLElement</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>style</span></td><td><div><span>Style passed to the component's container element</span></div><div><div><code><span>CSSProperties</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>tiltStyle</span></td><td><div><span>Style passed to the component's tilt element</span></div><div><div><code><span>CSSProperties</span></code></div></div></td><td><span>-</span></td></tr><tr><td><span>tiltProps</span></td><td><div><span>Properties passed to the tilt element</span></div><div><code><span>HTMLAttributes&lt;HTMLDivElement&gt; &amp; { [data: `data-${string}`]: string; }</span></code></div></td><td><span>-</span></td></tr><tr><td><span>gyroMaxAngleX</span></td><td><div><span>Maximum tilt angle around the X axis for gyroscope between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the X axis for gyroscope</div><div><div><code><span>number</span></code></div></div></td><td><div><span>0</span></div></td></tr><tr><td><span>gyroMaxAngleY</span></td><td><div><span>Maximum tilt angle around the Y axis for gyroscope between 0 to 90</span></div><div>note: Setting to 0 will disable rotation around the Y axis for gyroscope</div><div><div><code><span>number</span></code></div></div></td><td><div><span>0</span></div></td></tr><tr><td><span>gyroReverse</span></td><td><div><span>Reverses the tilt direction for gyroscope</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>disabled</span></td><td><div><span>Disables the tilt effect and applies the disabledFilter to the container</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr><tr><td><span>disabledFilter</span></td><td><div><span>CSS filter applied to the container when <code>disabled = true</code></span></div><div><div><code><span>string</span></code></div></div></td><td><span>"grayscale(1) brightness(125%)"</span></td></tr><tr><td><span>CSSTransition</span></td><td><div><span>CSS transition applied to the tilt, line glare, and spot glare elements</span></div><div><code><span>string</span></code></div></td><td><span>"all 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99)"</span></td></tr><tr><td><span>TiltWrapper</span></td><td><div><span>Component wrapping the tilt element</span></div><div>note: Is useful when integrating this component into another component</div><div><code><span>FC<{ children?: ReactNode; }></span></code></div></td><td><span>({ children }: PropsWithChildren) =&gt; &lt;&gt;{children}&lt;/&gt;</span></td></tr><tr><td><span>fullPageListening</span></td><td><div><span>Enables/Disables full-page listening. This component's event handlers will be added to the "document"</span></div><div>note: If set to "true", "controlElement", "controlElementOnly", and "disableScrollOnTouch" properties will have no effect</div><div><code><span>boolean</span></code></div></td><td><span>false</span></td></tr><tr><td><span>controlElement</span></td><td><div><span>	
-Element(s) that control(s) this component. This component's event handlers will be added to them</span></div><div>note: You can pass an HTMLElement, a ref, or an array of them</div><div><span>This property will have no effect if "fullPageListening" is set to "true"</span></div><div>example: element, ref, [element, ref], [ref1, ref2]</div><div><code><span>HTMLElement | RefObject&lt;HTMLElement&gt; | (HTMLElement | RefObject&lt;HTMLElement&gt;)[]</span></code></div></td><td><span>-</span></td></tr><tr><td><span>controlElementOnly</span></td><td><div><span>If set to "true", events will be disabled for the component and it will be controlled by the controlElement(s) only</span></div><div><span>This property will have no effect if "fullPageListening" is set to "true"</span></div><div><code><span>boolean</span></code></div></td><td><span>false</span></td></tr><tr><td><span>testIdEnable</span></td><td><div><span>Adds the <code>data-testid=...</code> property to all elements for testing purposes</span></div><div>note: Can also be used to select/grab and modify each element if you want to do heavy customization</div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr></tbody></table>
+Element(s) that control(s) this component. This component's event handlers will be added to them</span></div><div>note: You can pass an HTMLElement, a ref, or an array of them</div><div><span>This property will have no effect if "fullPageListening" is set to "true"</span></div><div>example: element, ref, [element, ref], [ref1, ref2]</div><div><code><span>HTMLElement | RefObject&lt;unknown&gt; | (HTMLElement | RefObject&lt;unknown&gt;)[]</span></code></div></td><td><span>-</span></td></tr><tr><td><span>controlElementOnly</span></td><td><div><span>If set to "true", events will be disabled for the component and it will be controlled by the controlElement(s) only</span></div><div><span>This property will have no effect if "fullPageListening" is set to "true"</span></div><div><code><span>boolean</span></code></div></td><td><span>false</span></td></tr><tr><td><span>preserve3dEnable</span></td><td><div><span>If set to true, adds <code>transform-style: preserve-3d;</code> to the container and tilt elements</span></div><div>note: Enable if you want to set up a parallax effect and translate elements along the <code>Z</code> axis</div><div><span>Disable if you are having problems with blur</span></div><div><span>warning: Can cause blur on scale (prevents re-rastering at higher scales by Chrome's compositor and the element is always rasterized at scale 1)</span></div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>true</span></div></td></tr><tr><td><span>testIdEnable</span></td><td><div><span>Adds the <code>data-testid=...</code> property to all elements for testing purposes</span></div><div>note: Can also be used to select/grab and modify each element if you want to do heavy customization</div><div><div><code><span>boolean</span></code></div></div></td><td><div><span>false</span></div></td></tr></tbody></table>
 
@@ -116,3 +116,3 @@ ## Events/Callbacks
 
-<table aria-hidden="false"><thead><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Parameters</span></th></tr><tbody><tr><td><span>element</span></td><td><div><span>The component's main container element</span></div><div><div><code><span>HTMLDivElement | null</span></code></div><td><div><span>-</span></div></td></td></tr><tr><td><span>tilt</span></td><td><div><span>Tilts the component to the given angle</span></div><div><div><code><span>(angle: Angle, changeScale?: boolean) => void</span></code></div><td><div><span><code>angle</code>: Tilt angle ({angleX: number, angleY: number})</span></div><div><span><code>changeScale=false</code>: Whether to apply the scale property or not</span></div></td></td></tr><tr><td><span>reset</span></td><td><div><span>Resets the component (rotation/scale and glare effects)</span></div><div><div><code><span>() => void</span></code></div><td><div><span>-</span></div></td></td></tr><tr><td><span>reset</span></td><td><div><span>Returns the current tilt angle ({angleX: number, angleY: number})</span></div><div><div><code><span>() => Angle</span></code></div><td><div><span>-</span></div></td></td></tr><tr><td><span>updateWillChange</span></td><td><div><span>Adds/Removes the "will-change" CSS property to the tilt and glare elements</span></div><div><span>note: Can improve performance when doing a series of animations using the "TiltRef.tilt()" function</span><div><div><code><span>(add?: boolean) => void</span></code></div><td><div><span><code>add=true</code>: Whether to add the property (true) or remove it (false)</span></div></td></td></tr></tbody></table>
+<table aria-hidden="false"><thead><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Parameters</span></th></tr><tbody><tr><td><span>element</span></td><td><div><span>The component's main container element</span></div><div><div><code><span>HTMLDivElement | null</span></code></div><td><div><span>-</span></div></td></td></tr><tr><td><span>tilt</span></td><td><div><span>Tilts the component to the given angle</span></div><div><div><code><span>(angle: Angle, changeScaleAndShadow?: boolean) => void</span></code></div><td><div><span><code>angle</code>: Tilt angle ({angleX: number, angleY: number})</span></div><div><span><code>changeScaleAndShadow=false</code>: Whether to apply the scale and shadow properties or not</span></div></td></td></tr><tr><td><span>reset</span></td><td><div><span>Resets the component (rotation/scale and glare effects)</span></div><div><div><code><span>() => void</span></code></div><td><div><span>-</span></div></td></td></tr><tr><td><span>reset</span></td><td><div><span>Returns the current tilt angle ({angleX: number, angleY: number})</span></div><div><div><code><span>() => Angle</span></code></div><td><div><span>-</span></div></td></td></tr><tr><td><span>updateWillChange</span></td><td><div><span>Adds/Removes the "will-change" CSS property to the tilt and glare elements</span></div><div><span>note: Can improve performance when doing a series of animations using the "TiltRef.tilt()" function</span><div><div><code><span>(add?: boolean) => void</span></code></div><td><div><span><code>add=true</code>: Whether to add the property (true) or remove it (false)</span></div></td></td></tr></tbody></table>
 
@@ -119,0 +119,0 @@ > Ref functions don't re-render the component.

No alert changes

Improved metrics

Total package byte prevSize

104602

increased by1.91%

Lines of code

1769

increased by1.55%

No dependency changes