@koine/react 1.0.9 → 1.0.12

package/hooks/useDateLocale.js

@@ -1,3 +1,4 @@
+import { __awaiter, __generator } from "tslib";
 import { useEffect, useState } from "react";
 /**
  * Dynamically import the date-fns correct locale
@@ -5,21 +6,29 @@ import { useEffect, useState } from "react";
  * Inspired by:
  * @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
  */
-export function useDateLocale(locale, defaultLocale = "en") {
-    const [data, setData] = useState();
-    const [current, setCurrent] = useState(defaultLocale);
+export function useDateLocale(locale, defaultLocale) {
+    var _this = this;
+    if (defaultLocale === void 0) { defaultLocale = "en"; }
+    var _a = useState(), data = _a[0], setData = _a[1];
+    var _b = useState(defaultLocale), current = _b[0], setCurrent = _b[1];
     // const [ready, setReady] = useState(false);
     // If the user changes the locale listen to the change and import the locale that is now required.
-    useEffect(() => {
-        const importLocaleFile = async () => {
-            // This webpack option stops all of the date-fns files being imported and chunked.
-            const localeToSet = await import(
-            /* webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
-            `date-fns/locale/${locale}/index.js`);
-            setCurrent(locale || current);
-            setData(localeToSet.default);
-            // setReady(true);
-        };
+    useEffect(function () {
+        var importLocaleFile = function () { return __awaiter(_this, void 0, void 0, function () {
+            var localeToSet;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, import(
+                        /* webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
+                        "date-fns/locale/".concat(locale, "/index.js"))];
+                    case 1:
+                        localeToSet = _a.sent();
+                        setCurrent(locale || current);
+                        setData(localeToSet.default);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
         // If the locale has not yet been loaded.
         if (locale !== current) {
             importLocaleFile();

package/hooks/useEffectOnce.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useEffectOnce.ts)
+ */
+export declare const useEffectOnce: (effect: React.EffectCallback) => void;

package/hooks/useEffectOnce.js

@@ -0,0 +1,8 @@
+import { useEffect } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useEffectOnce.ts)
+ */
+export var useEffectOnce = function (effect) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(effect, []);
+};

package/hooks/useFirstMountState.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */
+export declare function useFirstMountState(): boolean;

package/hooks/useFirstMountState.js

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */
+export function useFirstMountState() {
+    var isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+}

package/hooks/useFocus.js

@@ -2,9 +2,9 @@ import { useRef } from "react";
 /**
  * @see https://stackoverflow.com/a/54159564/1938970
  */
-export const useFocus = () => {
-    const element = useRef(null);
-    const setFocus = () => {
+export var useFocus = function () {
+    var element = useRef(null);
+    var setFocus = function () {
         element.current && element.current.focus();
     };
     return [element, setFocus];

package/hooks/useId.d.ts

@@ -0,0 +1,4 @@
+/**
+ * FIXME: once we can move to react 18 just replace this import with `{ useId } from "react";`
+ */
+export declare function useId(prefix?: string): string;

package/hooks/useId.js

@@ -0,0 +1,8 @@
+import { uid } from "@koine/utils";
+/**
+ * FIXME: once we can move to react 18 just replace this import with `{ useId } from "react";`
+ */
+export function useId(prefix) {
+    if (prefix === void 0) { prefix = "uid"; }
+    return "".concat(prefix, "-").concat(uid());
+}

package/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,5 @@
+import { useEffect } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,8 @@
+import { useEffect, useLayoutEffect } from "react";
+import { isBrowser } from "@koine/utils";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */
+export var useIsomorphicLayoutEffect = isBrowser
+    ? useLayoutEffect
+    : useEffect;

package/hooks/useMount.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMount.ts)
+ */
+export declare const useMount: (fn: () => void) => void;

package/hooks/useMount.js

@@ -0,0 +1,9 @@
+import { useEffectOnce } from "./useEffectOnce";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMount.ts)
+ */
+export var useMount = function (fn) {
+    useEffectOnce(function () {
+        fn();
+    });
+};

package/hooks/useMountedState.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMountedState.ts)
+ */
+export declare function useMountedState(): () => boolean;

package/hooks/useMountedState.js

@@ -0,0 +1,15 @@
+import { useCallback, useEffect, useRef } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMountedState.ts)
+ */
+export function useMountedState() {
+    var mountedRef = useRef(false);
+    var get = useCallback(function () { return mountedRef.current; }, []);
+    useEffect(function () {
+        mountedRef.current = true;
+        return function () {
+            mountedRef.current = false;
+        };
+    }, []);
+    return get;
+}

package/hooks/usePrevious.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 export function usePrevious(value) {
-    const ref = useRef();
-    useEffect(() => {
+    var ref = useRef();
+    useEffect(function () {
         ref.current = value;
     });
     return ref.current;

package/hooks/useScrollPosition.js

@@ -1,17 +1,19 @@
 import { useRef } from "react";
-import useIsomorphicLayoutEffect from "react-use/esm/useIsomorphicLayoutEffect";
 import { isBrowser } from "@koine/utils";
-const zeroPosition = { x: 0, y: 0 };
-const getClientRect = (element) => element?.getBoundingClientRect();
-const getScrollPosition = (element, useWindow, boundingElement) => {
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+var zeroPosition = { x: 0, y: 0 };
+var getClientRect = function (element) {
+    return element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
+};
+var getScrollPosition = function (element, useWindow, boundingElement) {
     if (!isBrowser) {
         return zeroPosition;
     }
     if (useWindow) {
         return { x: window.scrollX, y: window.scrollY };
     }
-    const targetPosition = getClientRect(element?.current || document.body);
-    const containerPosition = getClientRect(boundingElement?.current);
+    var targetPosition = getClientRect((element === null || element === void 0 ? void 0 : element.current) || document.body);
+    var containerPosition = getClientRect(boundingElement === null || boundingElement === void 0 ? void 0 : boundingElement.current);
     if (!targetPosition) {
         return zeroPosition;
     }
@@ -29,20 +31,22 @@ const getScrollPosition = (element, useWindow, boundingElement) => {
  * - reused internal helper functions
  * - compacted object arguments in functions as plain argument list to improve compression
  */
-export const useScrollPosition = (effect, deps = [], element, useWindow, wait, boundingElement) => {
-    const position = useRef(getScrollPosition(null, useWindow, boundingElement));
-    let throttleTimeout = null;
-    const callBack = () => {
-        const current = getScrollPosition(element, useWindow, boundingElement);
+export var useScrollPosition = function (effect, deps, element, useWindow, wait, boundingElement) {
+    if (deps === void 0) { deps = []; }
+    var position = useRef(getScrollPosition(null, useWindow, boundingElement));
+    var throttleTimeout = null;
+    var callBack = function () {
+        var current = getScrollPosition(element, useWindow, boundingElement);
         effect(current, position.current);
         position.current = current;
         throttleTimeout = null;
     };
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect(function () {
+        var _a;
         if (!isBrowser) {
             return undefined;
         }
-        const handleScroll = () => {
+        var handleScroll = function () {
             if (wait) {
                 if (throttleTimeout === null) {
                     throttleTimeout = window.setTimeout(callBack, wait);
@@ -53,16 +57,17 @@ export const useScrollPosition = (effect, deps = [], element, useWindow, wait, b
             }
         };
         if (boundingElement) {
-            boundingElement.current?.addEventListener("scroll", handleScroll, {
+            (_a = boundingElement.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", handleScroll, {
                 passive: true,
             });
         }
         else {
             window.addEventListener("scroll", handleScroll, { passive: true });
         }
-        return () => {
+        return function () {
+            var _a;
             if (boundingElement) {
-                boundingElement.current?.removeEventListener("scroll", handleScroll);
+                (_a = boundingElement.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", handleScroll);
             }
             else {
                 window.removeEventListener("scroll", handleScroll);

package/hooks/useScrollTo.js

@@ -1,13 +1,15 @@
 import { isBrowser } from "@koine/utils";
 import { useHeader } from "../Header/useHeader";
-export function useScrollTo(id = "", offset = 0) {
-    const [, , headerHeight] = useHeader();
+export function useScrollTo(id, offset) {
+    if (id === void 0) { id = ""; }
+    if (offset === void 0) { offset = 0; }
+    var _a = useHeader(), headerHeight = _a[2];
     if (!isBrowser) {
         return;
     }
-    const headerOffset = headerHeight || 0;
-    let element = document.getElementById(id);
-    let top = 0;
+    var headerOffset = headerHeight || 0;
+    var element = document.getElementById(id);
+    var top = 0;
     if (element && element.offsetParent) {
         do {
             top += element.offsetTop;

package/hooks/useTraceUpdate.js

@@ -3,9 +3,10 @@ import { useEffect, useRef } from "react";
  * @see https://stackoverflow.com/a/51082563/9122820
  */
 export function useTraceUpdate(props) {
-    const prev = useRef(props);
-    useEffect(() => {
-        const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
+    var prev = useRef(props);
+    useEffect(function () {
+        var changedProps = Object.entries(props).reduce(function (ps, _a) {
+            var k = _a[0], v = _a[1];
             if (prev.current[k] !== v) {
                 // @ts-expect-error Does not matter here...
                 ps[k] = [prev.current[k], v];

package/hooks/useUpdateEffect.d.ts

@@ -0,0 +1,5 @@
+import { useEffect } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
+ */
+export declare const useUpdateEffect: typeof useEffect;

package/hooks/useUpdateEffect.js

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useFirstMountState } from "./useFirstMountState";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
+ */
+export var useUpdateEffect = function (effect, deps) {
+    var isFirstMount = useFirstMountState();
+    useEffect(function () {
+        if (!isFirstMount) {
+            return effect();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+};

package/hooks/useWindowSize.js

@@ -1,13 +1,13 @@
 import { useEffect, useState } from "react";
 export function useWindowSize() {
-    const [size, setSize] = useState([0, 0]);
-    useEffect(() => {
+    var _a = useState([0, 0]), size = _a[0], setSize = _a[1];
+    useEffect(function () {
         function updateSize() {
             setSize([window.innerWidth, window.innerHeight]);
         }
         window.addEventListener("resize", updateSize);
         updateSize();
-        return () => window.removeEventListener("resize", updateSize);
+        return function () { return window.removeEventListener("resize", updateSize); };
     }, []);
     return size;
 }

package/m/MotionProvider.js

@@ -1,3 +1,4 @@
+import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LazyMotion } from "framer-motion";
 /**
@@ -32,6 +33,7 @@ import { LazyMotion } from "framer-motion";
  * </MotionProvider>
  * ```
  */
-export const MotionProvider = ({ features, children }) => {
-    return _jsx(LazyMotion, { features: features, children: children });
+export var MotionProvider = function (_a) {
+    var features = _a.features, children = _a.children;
+    return _jsx(LazyMotion, __assign({ features: features }, { children: children }));
 };

package/node/Alert/Alert.js

@@ -1,21 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Alert = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const AlertRoot = styled_components_1.default.div `
-  font-size: 12px;
-  ${(p) => (p.$danger ? `color: var(--danger)` : "")}
-`;
-const AlertInner = styled_components_1.default.div `
-  padding: 1em;
-  background-color: rgba(0, 0, 0, 0.05);
-  /* border: 1px solid var(--grey700); */
-  /* background: pink; */
-  /* color: red; */
-`;
-const Alert = ({ $danger, children, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(AlertRoot, { "$danger": $danger, ...props, children: (0, jsx_runtime_1.jsx)(AlertInner, { children: children }) }));
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var AlertRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  font-size: 12px;\n  ", "\n"], ["\n  font-size: 12px;\n  ", "\n"])), function (p) { return (p.$danger ? "color: var(--danger)" : ""); });
+var AlertInner = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  padding: 1em;\n  background-color: rgba(0, 0, 0, 0.05);\n  /* border: 1px solid var(--grey700); */\n  /* background: pink; */\n  /* color: red; */\n"], ["\n  padding: 1em;\n  background-color: rgba(0, 0, 0, 0.05);\n  /* border: 1px solid var(--grey700); */\n  /* background: pink; */\n  /* color: red; */\n"])));
+var Alert = function (_a) {
+    var $danger = _a.$danger, children = _a.children, props = tslib_1.__rest(_a, ["$danger", "children"]);
+    return ((0, jsx_runtime_1.jsx)(AlertRoot, tslib_1.__assign({ "$danger": $danger }, props, { children: (0, jsx_runtime_1.jsx)(AlertInner, { children: children }) })));
 };
 exports.Alert = Alert;
+var templateObject_1, templateObject_2;

package/node/Alert/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Alert"), exports);

package/node/Animations/Reveal.js

@@ -1,19 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Reveal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const framer_motion_1 = require("framer-motion");
-const useReveal_1 = require("./useReveal");
-const Reveal = ({ children, direction, offsetStartY, offsetEndY, offsetStartX, ...props }) => {
-    const effectOptions = { direction, offsetStartY, offsetEndY, offsetStartX };
-    const prefersReducedMotion = (0, framer_motion_1.useReducedMotion)();
-    const { ref, startY, endY, startX } = (0, useReveal_1.useReveal)(effectOptions);
-    const { scrollYProgress } = (0, framer_motion_1.useViewportScroll)();
-    const xRange = (0, framer_motion_1.useTransform)(scrollYProgress, [startY, endY], [startX, 0]);
-    const opacityRange = (0, framer_motion_1.useTransform)(scrollYProgress, [startY, endY], [0, 1]);
-    const x = (0, framer_motion_1.useSpring)(xRange, { stiffness: 400, damping: 90 });
-    const opacity = (0, framer_motion_1.useSpring)(opacityRange);
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var framer_motion_1 = require("framer-motion");
+var useReveal_1 = require("./useReveal");
+var Reveal = function (_a) {
+    var children = _a.children, direction = _a.direction, offsetStartY = _a.offsetStartY, offsetEndY = _a.offsetEndY, offsetStartX = _a.offsetStartX, props = tslib_1.__rest(_a, ["children", "direction", "offsetStartY", "offsetEndY", "offsetStartX"]);
+    var effectOptions = { direction: direction, offsetStartY: offsetStartY, offsetEndY: offsetEndY, offsetStartX: offsetStartX };
+    var prefersReducedMotion = (0, framer_motion_1.useReducedMotion)();
+    var _b = (0, useReveal_1.useReveal)(effectOptions), ref = _b.ref, startY = _b.startY, endY = _b.endY, startX = _b.startX;
+    var scrollYProgress = (0, framer_motion_1.useViewportScroll)().scrollYProgress;
+    var xRange = (0, framer_motion_1.useTransform)(scrollYProgress, [startY, endY], [startX, 0]);
+    var opacityRange = (0, framer_motion_1.useTransform)(scrollYProgress, [startY, endY], [0, 1]);
+    var x = (0, framer_motion_1.useSpring)(xRange, { stiffness: 400, damping: 90 });
+    var opacity = (0, framer_motion_1.useSpring)(opacityRange);
     // console.log("start, end", startY, endY)
-    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ...props, ref: ref, style: prefersReducedMotion ? {} : { x, opacity }, children: children }));
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, tslib_1.__assign({}, props, { ref: ref, style: prefersReducedMotion ? {} : { x: x, opacity: opacity } }, { children: children })));
 };
 exports.Reveal = Reveal;

package/node/Animations/Underline.js

@@ -1,19 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UnderlineSkewed = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const framer_motion_1 = require("framer-motion");
-exports.UnderlineSkewed = (0, styled_components_1.default)(framer_motion_1.m.i) `
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 15%;
-  right: 15%;
-  height: 20px;
-  margin-top: -10px;
-  z-index: 0;
-  pointer-events: none;
-  background: var(--accent400);
-  transform: skewY(-5deg);
-`;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var framer_motion_1 = require("framer-motion");
+exports.UnderlineSkewed = (0, styled_components_1.default)(framer_motion_1.m.i)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: 50%;\n  left: 15%;\n  right: 15%;\n  height: 20px;\n  margin-top: -10px;\n  z-index: 0;\n  pointer-events: none;\n  background: var(--accent400);\n  transform: skewY(-5deg);\n"], ["\n  display: block;\n  position: absolute;\n  top: 50%;\n  left: 15%;\n  right: 15%;\n  height: 20px;\n  margin-top: -10px;\n  z-index: 0;\n  pointer-events: none;\n  background: var(--accent400);\n  transform: skewY(-5deg);\n"])));
+var templateObject_1;

package/node/Animations/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Reveal"), exports);
 tslib_1.__exportStar(require("./Underline"), exports);
 tslib_1.__exportStar(require("./useReveal"), exports);

package/node/Animations/useReveal.js

@@ -1,35 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useReveal = void 0;
-const react_1 = require("react");
-function useReveal({ direction = "left", offsetStartY = -2, offsetEndY = 0, offsetStartX = "all", }) {
-    const ref = (0, react_1.useRef)(null);
-    const [startY, setStartY] = (0, react_1.useState)(0);
-    const [endY, setEndY] = (0, react_1.useState)(0);
-    const [startX, setStartX] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
+var react_1 = require("react");
+function useReveal(_a) {
+    var _b = _a.direction, direction = _b === void 0 ? "left" : _b, _c = _a.offsetStartY, offsetStartY = _c === void 0 ? -2 : _c, _d = _a.offsetEndY, offsetEndY = _d === void 0 ? 0 : _d, _e = _a.offsetStartX, offsetStartX = _e === void 0 ? "all" : _e;
+    var ref = (0, react_1.useRef)(null);
+    var _f = (0, react_1.useState)(0), startY = _f[0], setStartY = _f[1];
+    var _g = (0, react_1.useState)(0), endY = _g[0], setEndY = _g[1];
+    var _h = (0, react_1.useState)(0), startX = _h[0], setStartX = _h[1];
+    (0, react_1.useEffect)(function () {
         if (!ref.current) {
             return;
         }
-        const rect = ref.current.getBoundingClientRect();
+        var rect = ref.current.getBoundingClientRect();
         // scroll position from top of the window
-        const scrollTop = window.scrollY || document.documentElement.scrollTop;
-        const elementHeight = rect.height;
+        var scrollTop = window.scrollY || document.documentElement.scrollTop;
+        var elementHeight = rect.height;
         // rect.top is the distance from the currently visible viewport to the top
         // of the given element
         // so distanceTop is the distance between the top edge of the window and the
         // top edge of the given element
-        const elementTop = rect.top;
-        const distanceTop = elementTop + scrollTop;
-        const offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
-        const offsetBottom = offsetEndY ? elementHeight * offsetEndY : offsetTop;
+        var elementTop = rect.top;
+        var distanceTop = elementTop + scrollTop;
+        var offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
+        var offsetBottom = offsetEndY ? elementHeight * offsetEndY : offsetTop;
         // the distance of the element from the top divided by the full height
         // of the window gives back the start position of the given element in
         // a scale from 0 to 1
-        const startY = (distanceTop + offsetTop) / document.body.clientHeight;
+        var startY = (distanceTop + offsetTop) / document.body.clientHeight;
         // same for the end, we just add the given element height to the first value
-        const endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
-        let startX;
+        var endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
+        var startX;
         if (offsetStartX === "all") {
             startX = direction === "left" ? -rect.right : rect.left;
         }
@@ -54,7 +55,7 @@ function useReveal({ direction = "left", offsetStartY = -2, offsetEndY = 0, offs
         offsetStartX,
         direction,
     ]);
-    return { ref, startY, endY, startX };
+    return { ref: ref, startY: startY, endY: endY, startX: startX };
 }
 exports.useReveal = useReveal;
 // function addMarker(top: string, color = "red", position = "absolute") {