react-next-tilt - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/index.d.ts

@@ -385,5 +385,11 @@ import { HTMLAttributes, CSSProperties, PropsWithChildren, MouseEventHandler, TouchEventHandler, FocusEventHandler, FC, RefObject } from 'react';
     /**
+     * className passed to the component's tilt element
+     *
+     * @default undefined
+     */
+    tiltClass?: string;
+    /**
      * Properties passed to the tilt element
      *
-     * @example className='...' data-...='...'
+     * @example aria-...='...' data-...='...'
      *
@@ -390,0 +396,0 @@ * @default undefined

dist/react-next-tilt.js

@@ -1,3 +0,3 @@
-import vr, { forwardRef as pr, useRef as $e, useCallback as w, useMemo as ur, useImperativeHandle as mr, useEffect as sr, memo as hr } from "react";
-var ir = { exports: {} }, Ie = {};
+import vr, { forwardRef as pr, useRef as xe, useCallback as R, useMemo as ur, useImperativeHandle as mr, useEffect as sr, memo as hr } from "react";
+var ir = { exports: {} }, Ne = {};
 /**
@@ -15,18 +15,18 @@ * @license React
   if (cr)
-    return Ie;
+    return Ne;
   cr = 1;
   var a = vr, 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 Z(W, y, te) {
-    var C, V = {}, x = null, _e = null;
-    te !== void 0 && (x = "" + te), y.key !== void 0 && (x = "" + y.key), y.ref !== void 0 && (_e = y.ref);
-    for (C in y)
-      i.call(y, C) && !h.hasOwnProperty(C) && (V[C] = y[C]);
-    if (W && W.defaultProps)
-      for (C in y = W.defaultProps, y)
-        V[C] === void 0 && (V[C] = y[C]);
-    return { $$typeof: o, type: W, key: x, ref: _e, props: V, _owner: m.current };
+  function J(V, y, re) {
+    var j, N = {}, k = null, be = null;
+    re !== void 0 && (k = "" + re), y.key !== void 0 && (k = "" + y.key), y.ref !== void 0 && (be = y.ref);
+    for (j in y)
+      i.call(y, j) && !h.hasOwnProperty(j) && (N[j] = y[j]);
+    if (V && V.defaultProps)
+      for (j in y = V.defaultProps, y)
+        N[j] === void 0 && (N[j] = y[j]);
+    return { $$typeof: o, type: V, key: k, ref: be, props: N, _owner: m.current };
   }
-  return Ie.Fragment = v, Ie.jsx = Z, Ie.jsxs = Z, Ie;
+  return Ne.Fragment = v, Ne.jsx = J, Ne.jsxs = J, Ne;
 }
-var We = {};
+var Be = {};
 /**
@@ -44,10 +44,10 @@ * @license React
   return lr || (lr = 1, process.env.NODE_ENV !== "production" && function() {
-    var a = vr, 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"), Z = Symbol.for("react.provider"), W = Symbol.for("react.context"), y = Symbol.for("react.forward_ref"), te = Symbol.for("react.suspense"), C = Symbol.for("react.suspense_list"), V = Symbol.for("react.memo"), x = Symbol.for("react.lazy"), _e = Symbol.for("react.offscreen"), Fe = Symbol.iterator, ve = "@@iterator";
-    function Qe(e) {
+    var a = vr, 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"), J = Symbol.for("react.provider"), V = Symbol.for("react.context"), y = Symbol.for("react.forward_ref"), re = Symbol.for("react.suspense"), j = Symbol.for("react.suspense_list"), N = Symbol.for("react.memo"), k = Symbol.for("react.lazy"), be = Symbol.for("react.offscreen"), $e = Symbol.iterator, ve = "@@iterator";
+    function Me(e) {
       if (e === null || typeof e != "object")
         return null;
-      var r = Fe && e[Fe] || e[ve];
+      var r = $e && e[$e] || e[ve];
       return typeof r == "function" ? r : null;
     }
-    var Q = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    var K = a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
     function b(e) {
@@ -57,8 +57,8 @@ {
           t[u - 1] = arguments[u];
-        be("error", e, t);
+        Re("error", e, t);
       }
     }
-    function be(e, r, t) {
+    function Re(e, r, t) {
       {
-        var u = Q.ReactDebugCurrentFrame, d = u.getStackAddendum();
+        var u = K.ReactDebugCurrentFrame, d = u.getStackAddendum();
         d !== "" && (r += "%s", t = t.concat([d]));
@@ -71,12 +71,12 @@ var p = t.map(function(c) {
     }
-    var Ve = !1, Me = !1, pe = !1, Ge = !1, Ne = !1, N;
-    N = Symbol.for("react.module.reference");
-    function A(e) {
-      return !!(typeof e == "string" || typeof e == "function" || e === i || e === h || Ne || e === m || e === te || e === C || Ge || e === _e || Ve || Me || pe || typeof e == "object" && e !== null && (e.$$typeof === x || e.$$typeof === V || e.$$typeof === Z || e.$$typeof === W || e.$$typeof === y || // This needs to include all possible module reference object
+    var Ue = !1, Ge = !1, pe = !1, er = !1, Xe = !1, B;
+    B = Symbol.for("react.module.reference");
+    function H(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === i || e === h || Xe || e === m || e === re || e === j || er || e === be || Ue || Ge || pe || typeof e == "object" && e !== null && (e.$$typeof === k || e.$$typeof === N || e.$$typeof === J || e.$$typeof === V || e.$$typeof === y || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
       // we don't know which Flight build this will end up being used
       // with.
-      e.$$typeof === N || e.getModuleId !== void 0));
+      e.$$typeof === B || e.getModuleId !== void 0));
     }
-    function Be(e, r, t) {
+    function qe(e, r, t) {
       var u = e.displayName;
@@ -107,5 +107,5 @@ if (u)
           return "StrictMode";
-        case te:
+        case re:
           return "Suspense";
-        case C:
+        case j:
           return "SuspenseList";
@@ -115,14 +115,14 @@ }
         switch (e.$$typeof) {
-          case W:
+          case V:
             var r = e;
             return me(r) + ".Consumer";
-          case Z:
+          case J:
             var t = e;
             return me(t._context) + ".Provider";
           case y:
-            return Be(e, e.render, "ForwardRef");
-          case V:
+            return qe(e, e.render, "ForwardRef");
+          case N:
             var u = e.displayName || null;
             return u !== null ? u : _(e.type) || "Memo";
-          case x: {
+          case k: {
             var d = e, p = d._payload, c = d._init;
@@ -138,14 +138,14 @@ try {
     }
-    var O = Object.assign, $ = 0, Ue, Xe, qe, B, U, De, T;
-    function ze() {
+    var w = Object.assign, x = 0, ze, Ae, He, Je, U, X, Fe;
+    function O() {
     }
-    ze.__reactDisabledLog = !0;
-    function Re() {
+    O.__reactDisabledLog = !0;
+    function rr() {
       {
-        if ($ === 0) {
-          Ue = console.log, Xe = console.info, qe = console.warn, B = console.error, U = console.group, De = console.groupCollapsed, T = console.groupEnd;
+        if (x === 0) {
+          ze = console.log, Ae = console.info, He = console.warn, Je = console.error, U = console.group, X = console.groupCollapsed, Fe = console.groupEnd;
           var e = {
             configurable: !0,
             enumerable: !0,
-            value: ze,
+            value: O,
             writable: !0
@@ -163,8 +163,8 @@ };
         }
-        $++;
+        x++;
       }
     }
-    function er() {
+    function we() {
       {
-        if ($--, $ === 0) {
+        if (x--, x === 0) {
           var e = {
@@ -176,32 +176,32 @@ configurable: !0,
           Object.defineProperties(console, {
-            log: O({}, e, {
-              value: Ue
+            log: w({}, e, {
+              value: ze
             }),
-            info: O({}, e, {
-              value: Xe
+            info: w({}, e, {
+              value: Ae
             }),
-            warn: O({}, e, {
-              value: qe
+            warn: w({}, e, {
+              value: He
             }),
-            error: O({}, e, {
-              value: B
+            error: w({}, e, {
+              value: Je
             }),
-            group: O({}, e, {
+            group: w({}, e, {
               value: U
             }),
-            groupCollapsed: O({}, e, {
-              value: De
+            groupCollapsed: w({}, e, {
+              value: X
             }),
-            groupEnd: O({}, e, {
-              value: T
+            groupEnd: w({}, e, {
+              value: Fe
             })
           });
         }
-        $ < 0 && b("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+        x < 0 && b("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var F = Q.ReactCurrentDispatcher, Y;
-    function we(e, r, t) {
+    var De = K.ReactCurrentDispatcher, $;
+    function D(e, r, t) {
       {
-        if (Y === void 0)
+        if ($ === void 0)
           try {
@@ -211,18 +211,18 @@ throw Error();
             var u = d.stack.trim().match(/\n( *(at )?)/);
-            Y = u && u[1] || "";
+            $ = u && u[1] || "";
           }
         return `
-` + Y + e;
+` + $ + e;
       }
     }
-    var Oe = !1, X;
+    var Ye = !1, he;
     {
-      var Ye = typeof WeakMap == "function" ? WeakMap : Map;
-      X = new Ye();
+      var te = typeof WeakMap == "function" ? WeakMap : Map;
+      he = new te();
     }
-    function Te(e, r) {
-      if (!e || Oe)
+    function Oe(e, r) {
+      if (!e || Ye)
         return "";
       {
-        var t = X.get(e);
+        var t = he.get(e);
         if (t !== void 0)
@@ -232,7 +232,7 @@ return t;
       var u;
-      Oe = !0;
+      Ye = !0;
       var d = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
       var p;
-      p = F.current, F.current = null, Re();
+      p = De.current, De.current = null, rr();
       try {
@@ -250,4 +250,4 @@ if (r) {
               Reflect.construct(c, []);
-            } catch (ee) {
-              u = ee;
+            } catch (G) {
+              u = G;
             }
@@ -258,4 +258,4 @@ Reflect.construct(e, [], c);
               c.call();
-            } catch (ee) {
-              u = ee;
+            } catch (G) {
+              u = G;
             }
@@ -267,21 +267,21 @@ e.call(c.prototype);
             throw Error();
-          } catch (ee) {
-            u = ee;
+          } catch (G) {
+            u = G;
           }
           e();
         }
-      } catch (ee) {
-        if (ee && u && typeof ee.stack == "string") {
-          for (var s = ee.stack.split(`
-`), k = u.stack.split(`
-`), g = s.length - 1, E = k.length - 1; g >= 1 && E >= 0 && s[g] !== k[E]; )
+      } catch (G) {
+        if (G && u && typeof G.stack == "string") {
+          for (var s = G.stack.split(`
+`), S = u.stack.split(`
+`), g = s.length - 1, E = S.length - 1; g >= 1 && E >= 0 && s[g] !== S[E]; )
             E--;
           for (; g >= 1 && E >= 0; g--, E--)
-            if (s[g] !== k[E]) {
+            if (s[g] !== S[E]) {
               if (g !== 1 || E !== 1)
                 do
-                  if (g--, E--, E < 0 || s[g] !== k[E]) {
-                    var I = `
+                  if (g--, E--, E < 0 || s[g] !== S[E]) {
+                    var W = `
 ` + s[g].replace(" at new ", " at ");
-                    return e.displayName && I.includes("<anonymous>") && (I = I.replace("<anonymous>", e.displayName)), typeof e == "function" && X.set(e, I), I;
+                    return e.displayName && W.includes("<anonymous>") && (W = W.replace("<anonymous>", e.displayName)), typeof e == "function" && he.set(e, W), W;
                   }
@@ -293,9 +293,9 @@ while (g >= 1 && E >= 0);
       } finally {
-        Oe = !1, F.current = p, er(), Error.prepareStackTrace = d;
+        Ye = !1, De.current = p, we(), Error.prepareStackTrace = d;
       }
-      var xe = e ? e.displayName || e.name : "", fr = xe ? we(xe) : "";
-      return typeof e == "function" && X.set(e, fr), fr;
+      var ke = e ? e.displayName || e.name : "", fr = ke ? D(ke) : "";
+      return typeof e == "function" && he.set(e, fr), fr;
     }
     function Pe(e, r, t) {
-      return Te(e, !1);
+      return Oe(e, !1);
     }
@@ -310,10 +310,10 @@ function Le(e) {
       if (typeof e == "function")
-        return Te(e, Le(e));
+        return Oe(e, Le(e));
       if (typeof e == "string")
-        return we(e);
+        return D(e);
       switch (e) {
-        case te:
-          return we("Suspense");
-        case C:
-          return we("SuspenseList");
+        case re:
+          return D("Suspense");
+        case j:
+          return D("SuspenseList");
       }
@@ -324,5 +324,5 @@ if (typeof e == "object")
             return Pe(e.render);
-          case V:
+          case N:
             return ne(e.type, r, t);
-          case x: {
+          case k: {
             var u = e, d = u._payload, p = u._init;
@@ -337,11 +337,11 @@ try {
     }
-    var ae = Object.prototype.hasOwnProperty, je = {}, Ce = Q.ReactDebugCurrentFrame;
-    function Se(e) {
+    var ae = Object.prototype.hasOwnProperty, Te = {}, je = K.ReactDebugCurrentFrame;
+    function oe(e) {
       if (e) {
         var r = e._owner, t = ne(e.type, e._source, r ? r.type : null);
-        Ce.setExtraStackFrame(t);
+        je.setExtraStackFrame(t);
       } else
-        Ce.setExtraStackFrame(null);
+        je.setExtraStackFrame(null);
     }
-    function rr(e, r, t, u, d) {
+    function tr(e, r, t, u, d) {
       {
@@ -354,4 +354,4 @@ var p = Function.call.bind(ae);
               if (typeof e[c] != "function") {
-                var k = Error((u || "React class") + ": " + t + " type `" + c + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[c] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
-                throw k.name = "Invariant Violation", k;
+                var S = Error((u || "React class") + ": " + t + " type `" + c + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[c] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw S.name = "Invariant Violation", S;
               }
@@ -362,11 +362,11 @@ s = e[c](r, c, u, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
             }
-            s && !(s instanceof Error) && (Se(d), b("%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).", u || "React class", t, c, typeof s), Se(null)), s instanceof Error && !(s.message in je) && (je[s.message] = !0, Se(d), b("Failed %s type: %s", t, s.message), Se(null));
+            s && !(s instanceof Error) && (oe(d), b("%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).", u || "React class", t, c, typeof s), oe(null)), s instanceof Error && !(s.message in Te) && (Te[s.message] = !0, oe(d), b("Failed %s type: %s", t, s.message), oe(null));
           }
       }
     }
-    var tr = Array.isArray;
-    function R(e) {
-      return tr(e);
+    var nr = Array.isArray;
+    function Ie(e) {
+      return nr(e);
     }
-    function he(e) {
+    function T(e) {
       {
@@ -377,5 +377,5 @@ var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
     }
-    function oe(e) {
+    function ye(e) {
       try {
-        return q(e), !1;
+        return Z(e), !1;
       } catch {
@@ -385,10 +385,10 @@ return !0;
     }
-    function q(e) {
+    function Z(e) {
       return "" + e;
     }
-    function P(e) {
-      if (oe(e))
-        return b("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", he(e)), q(e);
+    function q(e) {
+      if (ye(e))
+        return b("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", T(e)), Z(e);
     }
-    var j = Q.ReactCurrentOwner, H = {
+    var C = K.ReactCurrentOwner, P = {
       key: !0,
@@ -398,5 +398,5 @@ ref: !0,
       __source: !0
-    }, Ae, He, ie;
-    ie = {};
-    function Je(e) {
+    }, z, Ke, We;
+    We = {};
+    function Ce(e) {
       if (ae.call(e, "ref")) {
@@ -409,3 +409,3 @@ var r = Object.getOwnPropertyDescriptor(e, "ref").get;
     }
-    function D(e) {
+    function Ze(e) {
       if (ae.call(e, "key")) {
@@ -418,12 +418,12 @@ var r = Object.getOwnPropertyDescriptor(e, "key").get;
     }
-    function L(e, r) {
-      if (typeof e.ref == "string" && j.current && r && j.current.stateNode !== r) {
-        var t = _(j.current.type);
-        ie[t] || (b('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', _(j.current.type), e.ref), ie[t] = !0);
+    function Y(e, r) {
+      if (typeof e.ref == "string" && C.current && r && C.current.stateNode !== r) {
+        var t = _(C.current.type);
+        We[t] || (b('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', _(C.current.type), e.ref), We[t] = !0);
       }
     }
-    function fe(e, r) {
+    function L(e, r) {
       {
         var t = function() {
-          Ae || (Ae = !0, b("%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));
+          z || (z = !0, b("%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));
         };
@@ -436,6 +436,6 @@ t.isReactWarning = !0, Object.defineProperty(e, "key", {
     }
-    function ue(e, r) {
+    function ie(e, r) {
       {
         var t = function() {
-          He || (He = !0, b("%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));
+          Ke || (Ke = !0, b("%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));
         };
@@ -448,3 +448,3 @@ t.isReactWarning = !0, Object.defineProperty(e, "ref", {
     }
-    var M = function(e, r, t, u, d, p, c) {
+    var fe = function(e, r, t, u, d, p, c) {
       var s = {
@@ -478,8 +478,8 @@ // This tag allows us to uniquely identify this as a React Element
     };
-    function Ke(e, r, t, u, d) {
+    function Q(e, r, t, u, d) {
       {
-        var p, c = {}, s = null, k = null;
-        t !== void 0 && (P(t), s = "" + t), D(r) && (P(r.key), s = "" + r.key), Je(r) && (k = r.ref, L(r, d));
+        var p, c = {}, s = null, S = null;
+        t !== void 0 && (q(t), s = "" + t), Ze(r) && (q(r.key), s = "" + r.key), Ce(r) && (S = r.ref, Y(r, d));
         for (p in r)
-          ae.call(r, p) && !H.hasOwnProperty(p) && (c[p] = r[p]);
+          ae.call(r, p) && !P.hasOwnProperty(p) && (c[p] = r[p]);
         if (e && e.defaultProps) {
@@ -490,26 +490,26 @@ var g = e.defaultProps;
         }
-        if (s || k) {
+        if (s || S) {
           var E = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
-          s && fe(c, E), k && ue(c, E);
+          s && L(c, E), S && ie(c, E);
         }
-        return M(e, s, k, d, u, j.current, c);
+        return fe(e, s, S, d, u, C.current, c);
       }
     }
-    var J = Q.ReactCurrentOwner, K = Q.ReactDebugCurrentFrame;
-    function S(e) {
+    var Se = K.ReactCurrentOwner, M = K.ReactDebugCurrentFrame;
+    function F(e) {
       if (e) {
         var r = e._owner, t = ne(e.type, e._source, r ? r.type : null);
-        K.setExtraStackFrame(t);
+        M.setExtraStackFrame(t);
       } else
-        K.setExtraStackFrame(null);
+        M.setExtraStackFrame(null);
     }
-    var se;
-    se = !1;
-    function G(e) {
+    var I;
+    I = !1;
+    function ue(e) {
       return typeof e == "object" && e !== null && e.$$typeof === o;
     }
-    function ce() {
+    function se() {
       {
-        if (J.current) {
-          var e = _(J.current.type);
+        if (Se.current) {
+          var e = _(Se.current.type);
           if (e)
@@ -523,3 +523,3 @@ return `
     }
-    function ye(e) {
+    function ge(e) {
       {
@@ -535,6 +535,6 @@ if (e !== void 0) {
     }
-    var le = {};
-    function ge(e) {
+    var ce = {};
+    function Ee(e) {
       {
-        var r = ce();
+        var r = se();
         if (!r) {
@@ -549,3 +549,3 @@ var t = typeof e == "string" ? e : e.displayName || e.name;
     }
-    function de(e, r) {
+    function le(e, r) {
       {
@@ -555,30 +555,30 @@ if (!e._store || e._store.validated || e.key != null)
         e._store.validated = !0;
-        var t = ge(r);
-        if (le[t])
+        var t = Ee(r);
+        if (ce[t])
           return;
-        le[t] = !0;
+        ce[t] = !0;
         var u = "";
-        e && e._owner && e._owner !== J.current && (u = " It was passed a child from " + _(e._owner.type) + "."), S(e), b('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, u), S(null);
+        e && e._owner && e._owner !== Se.current && (u = " It was passed a child from " + _(e._owner.type) + "."), F(e), b('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, u), F(null);
       }
     }
-    function ke(e, r) {
+    function de(e, r) {
       {
         if (typeof e != "object")
           return;
-        if (R(e))
+        if (Ie(e))
           for (var t = 0; t < e.length; t++) {
             var u = e[t];
-            G(u) && de(u, r);
+            ue(u) && le(u, r);
           }
-        else if (G(e))
+        else if (ue(e))
           e._store && (e._store.validated = !0);
         else if (e) {
-          var d = Qe(e);
+          var d = Me(e);
           if (typeof d == "function" && d !== e.entries)
             for (var p = d.call(e), c; !(c = p.next()).done; )
-              G(c.value) && de(c.value, r);
+              ue(c.value) && le(c.value, r);
         }
       }
     }
-    function n(e) {
+    function Ve(e) {
       {
@@ -593,3 +593,3 @@ var r = e.type;
         // Inner props are checked in the reconciler.
-        r.$$typeof === V))
+        r.$$typeof === N))
           t = r.propTypes;
@@ -600,5 +600,5 @@ else
           var u = _(r);
-          rr(t, e.props, "prop", u, e);
-        } else if (r.PropTypes !== void 0 && !se) {
-          se = !0;
+          tr(t, e.props, "prop", u, e);
+        } else if (r.PropTypes !== void 0 && !I) {
+          I = !0;
           var d = _(r);
@@ -610,3 +610,3 @@ b("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", d || "Unknown");
     }
-    function f(e) {
+    function n(e) {
       {
@@ -616,52 +616,52 @@ for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
           if (u !== "children" && u !== "key") {
-            S(e), b("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", u), S(null);
+            F(e), b("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", u), F(null);
             break;
           }
         }
-        e.ref !== null && (S(e), b("Invalid attribute `ref` supplied to `React.Fragment`."), S(null));
+        e.ref !== null && (F(e), b("Invalid attribute `ref` supplied to `React.Fragment`."), F(null));
       }
     }
-    function l(e, r, t, u, d, p) {
+    function f(e, r, t, u, d, p) {
       {
-        var c = A(e);
+        var c = H(e);
         if (!c) {
           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 k = ye(d);
-          k ? s += k : s += ce();
+          var S = ge(d);
+          S ? s += S : s += se();
           var g;
-          e === null ? g = "null" : R(e) ? g = "array" : e !== void 0 && e.$$typeof === o ? (g = "<" + (_(e.type) || "Unknown") + " />", s = " Did you accidentally export a JSX literal instead of a component?") : g = typeof e, b("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", g, s);
+          e === null ? g = "null" : Ie(e) ? g = "array" : e !== void 0 && e.$$typeof === o ? (g = "<" + (_(e.type) || "Unknown") + " />", s = " Did you accidentally export a JSX literal instead of a component?") : g = typeof e, b("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", g, s);
         }
-        var E = Ke(e, r, t, d, p);
+        var E = Q(e, r, t, d, p);
         if (E == null)
           return E;
         if (c) {
-          var I = r.children;
-          if (I !== void 0)
+          var W = r.children;
+          if (W !== void 0)
             if (u)
-              if (R(I)) {
-                for (var xe = 0; xe < I.length; xe++)
-                  ke(I[xe], e);
-                Object.freeze && Object.freeze(I);
+              if (Ie(W)) {
+                for (var ke = 0; ke < W.length; ke++)
+                  de(W[ke], e);
+                Object.freeze && Object.freeze(W);
               } else
                 b("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
-              ke(I, e);
+              de(W, e);
         }
-        return e === i ? f(E) : n(E), E;
+        return e === i ? n(E) : Ve(E), E;
       }
     }
-    function Ee(e, r, t) {
-      return l(e, r, t, !0);
+    function l(e, r, t) {
+      return f(e, r, t, !0);
     }
-    function nr(e, r, t) {
-      return l(e, r, t, !1);
+    function _e(e, r, t) {
+      return f(e, r, t, !1);
     }
-    var ar = nr, or = Ee;
-    We.Fragment = i, We.jsx = ar, We.jsxs = or;
-  }()), We;
+    var ar = _e, or = l;
+    Be.Fragment = i, Be.jsx = ar, Be.jsxs = or;
+  }()), Be;
 }
 process.env.NODE_ENV === "production" ? ir.exports = yr() : ir.exports = gr();
-var re = ir.exports;
-const z = (a, o, v) => a < o ? o : a > v ? v : a, Er = (a, o, v) => {
+var ee = ir.exports;
+const A = (a, o, v) => a < o ? o : a > v ? v : a, Er = (a, o, v) => {
   let i = 0;
@@ -691,3 +691,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 a.current;
-}, Ze = (a, o) => {
+}, Qe = (a, o) => {
   if (a === o)
@@ -703,3 +703,3 @@ return !0;
       for (i = v; i-- !== 0; )
-        if (!Ze(a[i], o[i]))
+        if (!Qe(a[i], o[i]))
           return !1;
@@ -715,3 +715,3 @@ return !0;
       for (i of a.entries())
-        if (!Ze(i[1], o.get(i[0])))
+        if (!Qe(i[1], o.get(i[0])))
           return !1;
@@ -750,3 +750,3 @@ return !0;
       const h = m[i];
-      if (!(h === "_owner" && a.$$typeof) && !Ze(a[h], o[h]))
+      if (!(h === "_owner" && a.$$typeof) && !Qe(a[h], o[h]))
         return !1;
@@ -765,76 +765,77 @@ }
     shadowEnable: h = !1,
-    shadow: Z = "0 0 1rem rgba(0,0,0,0.5)",
-    shadowType: W = "box",
+    shadow: J = "0 0 1rem rgba(0,0,0,0.5)",
+    shadowType: V = "box",
     lineGlareEnable: y = !0,
-    lineGlareBlurEnable: te = !0,
-    lineGlareBlurAmount: C = "4px",
-    lineGlareMaxOpacity: V = 0.1,
-    lineGlareWidthPercent: x = 10,
-    lineGlareMixBlendMode: _e = "normal",
-    lineGlareColor: Fe = "white",
+    lineGlareBlurEnable: re = !0,
+    lineGlareBlurAmount: j = "4px",
+    lineGlareMaxOpacity: N = 0.1,
+    lineGlareWidthPercent: k = 10,
+    lineGlareMixBlendMode: be = "normal",
+    lineGlareColor: $e = "white",
     lineGlareReverse: ve = !1,
-    lineGlareDirection: Qe = "to-bottom-right",
-    lineGlareHoverPosition: Q = "top-left",
+    lineGlareDirection: Me = "to-bottom-right",
+    lineGlareHoverPosition: K = "top-left",
     spotGlareEnable: b = !0,
-    spotGlareSizePercent: be = 200,
-    spotGlareMaxOpacity: Ve = 0.5,
-    spotGlareMixBlendMode: Me = "normal",
+    spotGlareSizePercent: Re = 200,
+    spotGlareMaxOpacity: Ue = 0.5,
+    spotGlareMixBlendMode: Ge = "normal",
     spotGlarePosition: pe = "top",
-    spotGlareColor: Ge = "white",
-    spotGlareReverse: Ne = !1,
-    tiltMaxAngleX: N = 20,
-    tiltMaxAngleY: A = 20,
-    tiltReverse: Be = !1,
+    spotGlareColor: er = "white",
+    spotGlareReverse: Xe = !1,
+    tiltMaxAngleX: B = 20,
+    tiltMaxAngleY: H = 20,
+    tiltReverse: qe = !1,
     tiltReset: me = !0,
     initialAngleX: _ = 0,
-    initialAngleY: O = 0,
-    disableScrollOnTouch: $ = !0,
-    style: Ue,
-    tiltStyle: Xe,
-    tiltProps: qe,
-    gyroMaxAngleX: B = 0,
-    gyroMaxAngleY: U = 0,
-    gyroReverse: De = !1,
-    disabled: T = !1,
-    disabledFilter: ze = "grayscale(1) brightness(125%)",
-    CSSTransition: Re = "all 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99)",
-    TiltWrapper: er,
-    fullPageListening: F = !1,
-    controlElement: Y,
-    controlElementOnly: we = !1,
-    preserve3dEnable: Oe = !0,
-    testIdEnable: X = !1,
-    onTilt: Ye,
-    onReset: Te,
-    onMouseEnter: Pe,
-    onMouseMove: Le,
-    onMouseLeave: ne,
-    onTouchStart: ae,
+    initialAngleY: w = 0,
+    disableScrollOnTouch: x = !0,
+    style: ze,
+    tiltStyle: Ae,
+    tiltClass: He,
+    tiltProps: Je,
+    gyroMaxAngleX: U = 0,
+    gyroMaxAngleY: X = 0,
+    gyroReverse: Fe = !1,
+    disabled: O = !1,
+    disabledFilter: rr = "grayscale(1) brightness(125%)",
+    CSSTransition: we = "all 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99)",
+    TiltWrapper: De,
+    fullPageListening: $ = !1,
+    controlElement: D,
+    controlElementOnly: Ye = !1,
+    preserve3dEnable: he = !0,
+    testIdEnable: te = !1,
+    onTilt: Oe,
+    onReset: Pe,
+    onMouseEnter: Le,
+    onMouseMove: ne,
+    onMouseLeave: ae,
+    onTouchStart: Te,
     onTouchMove: je,
-    onTouchEnd: Ce,
-    children: Se,
-    ...rr
-  }, tr) => {
-    const R = $e(), he = $e(!1), oe = !F && (!Y || Y && !we), q = $e(null), P = $e(null), j = $e(null), H = $e(null), Ae = w(
-      ({ children: n }) => /* @__PURE__ */ re.jsx(re.Fragment, { children: n }),
+    onTouchEnd: oe,
+    children: tr,
+    ...nr
+  }, Ie) => {
+    const T = xe(), ye = xe(!1), Z = !$ && (!D || D && !Ye), q = xe(null), C = xe(null), P = xe(null), z = xe(null), Ke = R(
+      ({ children: n }) => /* @__PURE__ */ ee.jsx(ee.Fragment, { children: n }),
       []
-    ), He = er || Ae;
-    y && (x = z(x, 0, 50) / 2), b && (be = be < 0 ? 0 : be / 2), N = z(N, 0, 90), A = z(A, 0, 90), B = z(B, 0, 90), U = z(U, 0, 90), _ && (_ = z(
+    ), We = De || Ke;
+    y && (k = A(k, 0, 50) / 2), b && (Re = Re < 0 ? 0 : Re / 2), B = A(B, 0, 90), H = A(H, 0, 90), U = A(U, 0, 90), X = A(X, 0, 90), _ && (_ = A(
       _,
-      -N,
-      N
-    )), O && (O = z(
-      O,
-      -A,
-      A
+      -B,
+      B
+    )), w && (w = A(
+      w,
+      -H,
+      H
     ));
-    const ie = ur(() => y ? (100 - x) / 2 : 0, [y, x]), Je = ur(() => y ? ie + x : 0, [y, x, ie]), D = w((n = !0) => {
+    const Ce = ur(() => y ? (100 - k) / 2 : 0, [y, k]), Ze = ur(() => y ? Ce + k : 0, [y, k, Ce]), Y = R((n = !0) => {
       requestAnimationFrame(() => {
-        P.current && (P.current.style.willChange = n ? "transform" : ""), j.current && (j.current.style.willChange = n ? "transform, opacity" : ""), H.current && (H.current.style.willChange = n ? "transform" : "");
+        C.current && (C.current.style.willChange = n ? "transform" : ""), P.current && (P.current.style.willChange = n ? "transform, opacity" : ""), z.current && (z.current.style.willChange = n ? "transform" : "");
       });
-    }, []), L = w(
+    }, []), L = R(
       (n = !0) => {
         requestAnimationFrame(() => {
-          if (W === "box")
-            P.current && h && (P.current.style.boxShadow = n ? Z : "");
+          if (V === "box")
+            C.current && h && (C.current.style.boxShadow = n ? J : "");
           else if (q.current && h) {
@@ -845,53 +846,53 @@ const f = q.current.style.filter.replace(
             );
-            q.current.style.filter = n ? f + ` drop-shadow(${Z})` : f;
+            q.current.style.filter = n ? f + ` drop-shadow(${J})` : f;
           }
         });
       },
-      [Z, h, W]
-    ), fe = w(() => {
-      if (!q.current || !j.current || !R.current)
+      [J, h, V]
+    ), ie = R(() => {
+      if (!q.current || !P.current || !T.current)
         return;
       const n = Er(
-        R.current,
+        T.current,
         pe,
-        Ve
+        Ue
       ), f = _r(
-        R.current,
+        T.current,
         pe,
-        Ne
+        Xe
       );
       requestAnimationFrame(() => {
-        j.current && (j.current.style.opacity = n, j.current.style.transform = f);
+        P.current && (P.current.style.opacity = n, P.current.style.transform = f);
       });
-    }, [pe, Ve, Ne]), ue = w(() => {
-      if (!q.current || !H.current || !R.current)
+    }, [pe, Ue, Xe]), fe = R(() => {
+      if (!q.current || !z.current || !T.current)
         return;
       const n = br(
-        R.current,
-        Q,
+        T.current,
+        K,
         ve
       );
       requestAnimationFrame(() => {
-        H.current && (H.current.style.transform = n);
+        z.current && (z.current.style.transform = n);
       });
-    }, [Q, ve]), M = w(
+    }, [K, ve]), Q = R(
       (n = !0) => {
-        if (!q.current || !R.current)
+        if (!q.current || !T.current)
           return { angleX: 0, angleY: 0 };
-        let f = -(R.current.offsetY - 0.5) * 2 * N, l = (R.current.offsetX - 0.5) * 2 * A;
-        return Be && n && (f = -f, l = -l), { angleX: f, angleY: l };
+        let f = -(T.current.offsetY - 0.5) * 2 * B, l = (T.current.offsetX - 0.5) * 2 * H;
+        return qe && n && (f = -f, l = -l), { angleX: f, angleY: l };
       },
-      [N, A, Be]
-    ), Ke = w(
+      [B, H, qe]
+    ), Se = R(
       (n) => {
-        const f = (n.angleY / A + 1) / 2, l = (-n.angleX / N + 1) / 2;
-        R.current = { offsetX: f, offsetY: l };
+        const f = (n.angleY / H + 1) / 2, l = (-n.angleX / B + 1) / 2;
+        T.current = { offsetX: f, offsetY: l };
       },
-      [N, A]
-    ), J = w(
+      [B, H]
+    ), M = R(
       (n, f = !0, l = !1) => {
-        const Ee = f ? m : 1;
+        const _e = f ? m : 1;
         requestAnimationFrame(() => {
-          P.current && (P.current.style.transform = `rotateX(${n.angleX}deg) rotateY(${n.angleY}deg) scale3d(${Ee},${Ee},${Ee})`);
-        }), Ye && Ye(
+          C.current && (C.current.style.transform = `rotateX(${n.angleX}deg) rotateY(${n.angleY}deg) scale3d(${_e},${_e},${_e})`);
+        }), Oe && Oe(
           {
@@ -904,27 +905,27 @@ angleX: n.angleX,
       },
-      [Ye, m]
-    ), K = w(
+      [Oe, m]
+    ), F = R(
       (n, f = !1, l = !1) => {
-        Ke(n), J(n, f, l), L(f), ue(), fe();
+        Se(n), M(n, f, l), L(f), fe(), ie();
       },
       [
-        Ke,
-        J,
+        Se,
+        M,
         L,
-        ue,
-        fe
+        fe,
+        ie
       ]
-    ), S = w(() => {
-      Te && Te(), _ || O ? K({
+    ), I = R(() => {
+      Pe && Pe(), _ || w ? F({
         angleX: _ || 0,
-        angleY: O || 0
-      }) : (R.current = void 0, requestAnimationFrame(() => {
-        H.current && (H.current.style.transform = `translateX(${ve ? "50%" : "-100%"})`), j.current && (j.current.style.transform = "translateX(0%) translateY(0%)", j.current.style.opacity = "0"), P.current && (P.current.style.transform = "rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)");
+        angleY: w || 0
+      }) : (T.current = void 0, requestAnimationFrame(() => {
+        z.current && (z.current.style.transform = `translateX(${ve ? "50%" : "-100%"})`), P.current && (P.current.style.transform = "translateX(0%) translateY(0%)", P.current.style.opacity = "0"), C.current && (C.current.style.transform = "rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)");
       }));
-    }, [_, O, ve, Te, K]), se = w(
+    }, [_, w, ve, Pe, F]), ue = R(
       (n, f) => {
         if (!f)
           return;
-        if (F && f instanceof Document) {
-          R.current = {
+        if ($ && f instanceof Document) {
+          T.current = {
             offsetX: n.x / window.innerWidth,
@@ -938,57 +939,57 @@ offsetY: n.y / window.innerHeight
           return;
-        const Ee = z(
+        const _e = A(
           n.x,
           l.left,
           l.right
-        ), nr = z(
+        ), ar = A(
           n.y,
           l.top,
           l.bottom
-        ), ar = (Ee - l.left) / l.width, or = (nr - l.top) / l.height;
-        R.current = { offsetX: ar, offsetY: or };
+        ), or = (_e - l.left) / l.width, e = (ar - l.top) / l.height;
+        T.current = { offsetX: or, offsetY: e };
       },
-      [F]
+      [$]
     );
     mr(
-      tr,
+      Ie,
       () => ({
-        tilt: K,
-        reset: S,
-        angle: () => M(!1),
-        updateWillChange: D,
+        tilt: F,
+        reset: I,
+        angle: () => Q(!1),
+        updateWillChange: Y,
         element: q.current
       }),
-      [K, S, D, M]
+      [F, I, Y, Q]
     );
-    const G = w(() => {
-      T || (he.current = !0, D(), L());
-    }, [T, L, D]), ce = w(() => {
-      T || ($ && !F && (typeof $ == "boolean" ? document.body.style.overflow = "hidden" : $.style.overflow = "hidden"), he.current = !0, D(), L());
+    const se = R(() => {
+      O || (ye.current = !0, Y(), L());
+    }, [O, L, Y]), ge = R(() => {
+      O || (x && !$ && (typeof x == "boolean" ? document.body.style.overflow = "hidden" : x.style.overflow = "hidden"), ye.current = !0, Y(), L());
     }, [
+      x,
+      O,
       $,
-      T,
-      F,
       L,
-      D
-    ]), ye = w(
+      Y
+    ]), ce = R(
       (n) => {
-        T || (se(
+        O || (ue(
           { x: n.clientX, y: n.clientY },
           n.currentTarget
-        ), J(M()), ue(), fe());
+        ), M(Q()), fe(), ie());
       },
       [
-        T,
+        O,
+        Q,
+        ue,
         M,
-        se,
-        J,
-        ue,
-        fe
+        fe,
+        ie
       ]
-    ), le = w(
+    ), Ee = R(
       (n) => {
-        if (T)
+        if (O)
           return;
         const f = n.changedTouches[0];
-        f && (se(
+        f && (ue(
           {
@@ -999,33 +1000,33 @@ x: f.clientX,
           n.currentTarget
-        ), J(M()), ue(), fe());
+        ), M(Q()), fe(), ie());
       },
       [
-        T,
+        O,
+        Q,
+        ue,
         M,
-        se,
-        J,
-        ue,
-        fe
+        fe,
+        ie
       ]
-    ), ge = w(() => {
-      T || (he.current = !1, D(!1), L(!1), me && S());
-    }, [T, S, me, L, D]), de = w(() => {
-      T || ($ && !F && (typeof $ == "boolean" ? document.body.style.overflow = "" : $.style.overflow = ""), he.current = !1, D(!1), L(!1), me && S());
+    ), le = R(() => {
+      O || (ye.current = !1, Y(!1), L(!1), me && I());
+    }, [O, I, me, L, Y]), de = R(() => {
+      O || (x && !$ && (typeof x == "boolean" ? document.body.style.overflow = "" : x.style.overflow = ""), ye.current = !1, Y(!1), L(!1), me && I());
     }, [
+      x,
+      O,
       $,
-      T,
-      F,
-      S,
+      I,
       me,
       L,
-      D
+      Y
     ]);
     sr(() => {
-      if (!Y && !F)
+      if (!D && !$)
         return;
       let n;
-      F || !Y ? n = [document] : n = Array.isArray(Y) ? Y : [Y];
+      $ || !D ? n = [document] : n = Array.isArray(D) ? D : [D];
       for (let f of n) {
         const l = dr(f);
-        l && (f = l, f.addEventListener("mouseenter", G), f.addEventListener("mousemove", ye), f.addEventListener("mouseleave", ge), f.addEventListener("touchstart", ce, { passive: !0 }), f.addEventListener("touchmove", le, { passive: !0 }), f.addEventListener("touchend", de, { passive: !0 }));
+        l && (f = l, f.addEventListener("mouseenter", se), f.addEventListener("mousemove", ce), f.addEventListener("mouseleave", le), f.addEventListener("touchstart", ge, { passive: !0 }), f.addEventListener("touchmove", Ee, { passive: !0 }), f.addEventListener("touchend", de, { passive: !0 }));
       }
@@ -1035,41 +1036,41 @@ return () => {
           const l = dr(f);
-          l && (f = l, f.removeEventListener("mouseenter", G), f.removeEventListener("mousemove", ye), f.removeEventListener("mouseleave", ge), f.removeEventListener("touchstart", ce), f.removeEventListener("touchmove", le), f.removeEventListener("touchend", de));
+          l && (f = l, f.removeEventListener("mouseenter", se), f.removeEventListener("mousemove", ce), f.removeEventListener("mouseleave", le), f.removeEventListener("touchstart", ge), f.removeEventListener("touchmove", Ee), f.removeEventListener("touchend", de));
         }
       };
     }, [
-      Y,
-      G,
-      ye,
-      ge,
+      D,
+      se,
       ce,
       le,
+      ge,
+      Ee,
       de,
-      F
+      $
     ]);
-    const ke = w(
+    const Ve = R(
       (n) => {
-        if (he.current || n.beta === null && n.gamma === null)
+        if (ye.current || n.beta === null && n.gamma === null)
           return;
-        let f = B && n.beta ? z(-n.beta, -B, B) : _ || 0, l = U && n.gamma ? z(n.gamma, -U, U) : O || 0;
-        De && (f = -f, l = -l), K({ angleX: f, angleY: l }, !1, !0);
+        let f = U && n.beta ? A(-n.beta, -U, U) : _ || 0, l = X && n.gamma ? A(n.gamma, -X, X) : w || 0;
+        Fe && (f = -f, l = -l), F({ angleX: f, angleY: l }, !1, !0);
       },
       [
-        B,
         U,
+        X,
         _,
-        O,
-        De,
-        K
+        w,
+        Fe,
+        F
       ]
     );
     return sr(() => {
-      if (!(!B && !U))
-        return window.addEventListener("deviceorientation", ke), () => window.removeEventListener("deviceorientation", ke);
-    }, [B, U, ke, D]), /* @__PURE__ */ re.jsx(
+      if (!(!U && !X))
+        return window.addEventListener("deviceorientation", Ve), () => window.removeEventListener("deviceorientation", Ve);
+    }, [U, X, Ve, Y]), /* @__PURE__ */ ee.jsx(
       "div",
       {
         ref: (n) => {
-          n && (q.current = n, R.current && (T ? S() : K(M())), (_ || O) && !R.current && S());
+          n && (q.current = n, T.current && (O ? I() : F(Q())), (_ || w) && !T.current && I());
         },
-        "data-testid": X ? "container" : void 0,
+        "data-testid": te ? "container" : void 0,
         style: Object.assign(
@@ -1083,33 +1084,33 @@ {
             perspective: i,
-            transformStyle: Oe ? "preserve-3d" : void 0,
+            transformStyle: he ? "preserve-3d" : void 0,
             backfaceVisibility: "hidden",
-            filter: T ? ze : void 0,
-            transition: W === "drop" ? Re : void 0
+            filter: O ? rr : void 0,
+            transition: V === "drop" ? we : void 0
           },
-          Ue
+          ze
         ),
-        onMouseEnter: oe ? Pe ? (n) => {
-          G(), Pe(n);
-        } : G : Pe,
-        onTouchStart: oe ? ae ? (n) => {
-          ce(), ae(n);
-        } : ce : ae,
-        onMouseMove: oe ? Le ? (n) => {
-          ye(n), Le(n);
-        } : ye : Le,
-        onTouchMove: oe ? je ? (n) => {
-          le(n), je(n);
-        } : le : je,
-        onMouseLeave: oe ? ne ? (n) => {
-          ge(), ne(n);
-        } : ge : ne,
-        onTouchEnd: oe ? Ce ? (n) => {
-          de(), Ce(n);
-        } : de : Ce,
-        ...rr,
-        children: /* @__PURE__ */ re.jsx(He, { children: /* @__PURE__ */ re.jsxs(
+        onMouseEnter: Z ? Le ? (n) => {
+          se(), Le(n);
+        } : se : Le,
+        onTouchStart: Z ? Te ? (n) => {
+          ge(), Te(n);
+        } : ge : Te,
+        onMouseMove: Z ? ne ? (n) => {
+          ce(n), ne(n);
+        } : ce : ne,
+        onTouchMove: Z ? je ? (n) => {
+          Ee(n), je(n);
+        } : Ee : je,
+        onMouseLeave: Z ? ae ? (n) => {
+          le(), ae(n);
+        } : le : ae,
+        onTouchEnd: Z ? oe ? (n) => {
+          de(), oe(n);
+        } : de : oe,
+        ...nr,
+        children: /* @__PURE__ */ ee.jsx(We, { children: /* @__PURE__ */ ee.jsxs(
           "div",
           {
-            ref: P,
-            "data-testid": X ? "tilt" : void 0,
+            ref: C,
+            "data-testid": te ? "tilt" : void 0,
             style: Object.assign(
@@ -1122,16 +1123,17 @@ {
                 borderRadius: v,
-                transformStyle: Oe ? "preserve-3d" : void 0,
+                transformStyle: he ? "preserve-3d" : void 0,
                 backfaceVisibility: "hidden",
-                transition: Re,
+                transition: we,
                 transform: "rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"
               },
-              Xe
+              Ae
             ),
-            ...qe,
+            className: He,
+            ...Je,
             children: [
-              Se,
-              b && /* @__PURE__ */ re.jsx(
+              tr,
+              b && /* @__PURE__ */ ee.jsx(
                 "div",
                 {
-                  "data-testid": X ? "spot-glare-container" : void 0,
+                  "data-testid": te ? "spot-glare-container" : void 0,
                   style: {
@@ -1144,9 +1146,9 @@ pointerEvents: "none",
                     backfaceVisibility: "hidden",
-                    mixBlendMode: Me
+                    mixBlendMode: Ge
                   },
-                  children: /* @__PURE__ */ re.jsx(
+                  children: /* @__PURE__ */ ee.jsx(
                     "div",
                     {
-                      ref: j,
-                      "data-testid": X ? "spot-glare" : void 0,
+                      ref: P,
+                      "data-testid": te ? "spot-glare" : void 0,
                       style: {
@@ -1158,4 +1160,4 @@ position: "absolute",
                         height: "200%",
-                        transition: Re,
-                        backgroundImage: `radial-gradient(${Ge}, transparent ${be}%)`,
+                        transition: we,
+                        backgroundImage: `radial-gradient(${er}, transparent ${Re}%)`,
                         transform: "translateX(0%) translateY(0%)",
@@ -1168,6 +1170,6 @@ opacity: "0"
               ),
-              y && /* @__PURE__ */ re.jsx(
+              y && /* @__PURE__ */ ee.jsx(
                 "div",
                 {
-                  "data-testid": X ? "line-glare-container" : void 0,
+                  "data-testid": te ? "line-glare-container" : void 0,
                   style: {
@@ -1180,9 +1182,9 @@ pointerEvents: "none",
                     backfaceVisibility: "hidden",
-                    mixBlendMode: _e
+                    mixBlendMode: be
                   },
-                  children: /* @__PURE__ */ re.jsx(
+                  children: /* @__PURE__ */ ee.jsx(
                     "div",
                     {
-                      "data-testid": X ? "line-glare" : void 0,
-                      ref: H,
+                      "data-testid": te ? "line-glare" : void 0,
+                      ref: z,
                       style: {
@@ -1194,7 +1196,7 @@ position: "absolute",
                         height: "200%",
-                        filter: te ? `blur(${C})` : "",
-                        transition: Re,
-                        opacity: String(V),
+                        filter: re ? `blur(${j})` : "",
+                        transition: we,
+                        opacity: String(N),
                         transform: `translateX(${ve ? "50%" : "-100%"})`,
-                        backgroundImage: `linear-gradient(${Qe === "to-bottom-right" ? "to bottom right" : "to bottom left"}, transparent, transparent ${ie}%, ${Fe} calc(${ie}% + 1px), ${Fe} ${Je}%, transparent calc(${Je}% + 1px), transparent 0%)`
+                        backgroundImage: `linear-gradient(${Me === "to-bottom-right" ? "to bottom right" : "to bottom left"}, transparent, transparent ${Ce}%, ${$e} calc(${Ce}% + 1px), ${$e} ${Ze}%, transparent calc(${Ze}% + 1px), transparent 0%)`
                       }
@@ -1213,3 +1215,3 @@ }
   Rr,
-  (a, o) => Ze(a, o)
+  (a, o) => Qe(a, o)
 );
@@ -1216,0 +1218,0 @@ wr.displayName = "Tilt";

package.json

 {
   "name": "react-next-tilt",
   "private": false,
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A Performant Customizable Tilt Component for React",
@@ -6,0 +6,0 @@ "main": "./dist/react-next-tilt.umd.cjs",

README.md

@@ -103,3 +103,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 shadow applied to the container or 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>The shadow applied to the container or 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>shadowType</span></td><td><div><span>Type of the shadow applied on hover/touch</span></div><div><span>If set to <code>'box'</code>, shadow is applied as <code>box-shadow</code> to the tilt element</span></div><div><span>If set to <code>'drop'</code>, shadow is applied as <code>filter: drop-shadow()</code> to the container element</span></div><div><span>note: Set to <code>'drop'</code> if you have a setup where elements go outside the tilt element and want to apply the shadow to them as well,</span></div><div><span>Or if you have multiple elements inside the tilt element and want the shadow to apply to them individually and not the whole tilt element</span></div><div><div><code><span>"box"</span> | <span>"drop"</span></div></code></div></td><td><div><span>"box"</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>spotGlareSizePercent</span></td><td><div><span>Size of the spot glare effect in relation to the component between <code>0</code> to <code>Infinity</code></span></div><div><span>note: If <code>spotGlarePosition</code> is set to anything other than <code>'all'</code>, only half of the spot glare effect is visible at any time.</span></div><div><span>That's why the default value is 200 to cover the whole element.</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>200</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>ote: 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>	
+<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 shadow applied to the container or 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>The shadow applied to the container or 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>shadowType</span></td><td><div><span>Type of the shadow applied on hover/touch</span></div><div><span>If set to <code>'box'</code>, shadow is applied as <code>box-shadow</code> to the tilt element</span></div><div><span>If set to <code>'drop'</code>, shadow is applied as <code>filter: drop-shadow()</code> to the container element</span></div><div><span>note: Set to <code>'drop'</code> if you have a setup where elements go outside the tilt element and want to apply the shadow to them as well,</span></div><div><span>Or if you have multiple elements inside the tilt element and want the shadow to apply to them individually and not the whole tilt element</span></div><div><div><code><span>"box"</span> | <span>"drop"</span></div></code></div></td><td><div><span>"box"</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>spotGlareSizePercent</span></td><td><div><span>Size of the spot glare effect in relation to the component between <code>0</code> to <code>Infinity</code></span></div><div><span>note: If <code>spotGlarePosition</code> is set to anything other than <code>'all'</code>, only half of the spot glare effect is visible at any time.</span></div><div><span>That's why the default value is 200 to cover the whole element.</span></div><div><div><code><span>number</span></code></div></div></td><td><div><span>200</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><tr><td><span>tiltClass</span></td><td><div><span>className passed to the component's tilt element</span></div><div><div><code><span>string</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>ote: 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;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>
@@ -106,0 +106,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108967

increased by0.37%

Lines of code

1823

increased by0.44%

No dependency changes