@koine/react 2.0.0-beta.1 → 2.0.0-beta.10

package/Alert/Alert.js

@@ -1,14 +1,33 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Alert = void 0;
-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 }) })));
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Alert", {
+    enumerable: true,
+    get: function() {
+        return Alert;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const AlertRoot = _styledcomponents.default.div`
+  font-size: 12px;
+  ${(p)=>p.$danger ? `color: var(--danger)` : ""}
+`;
+const AlertInner = _styledcomponents.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 /*#__PURE__*/ (0, _jsxruntime.jsx)(AlertRoot, {
+        $danger: $danger,
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(AlertInner, {
+            children: children
+        })
+    });
 };
-exports.Alert = Alert;
-var templateObject_1, templateObject_2;

package/Alert/Alert.mjs

@@ -1,10 +1,22 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-var AlertRoot = styled.div(templateObject_1 || (templateObject_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.div(templateObject_2 || (templateObject_2 = __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"])));
-export var Alert = function (_a) {
-    var $danger = _a.$danger, children = _a.children, props = __rest(_a, ["$danger", "children"]);
-    return (_jsx(AlertRoot, __assign({ "$danger": $danger }, props, { children: _jsx(AlertInner, { children: children }) })));
+const AlertRoot = styled.div`
+  font-size: 12px;
+  ${(p)=>p.$danger ? `color: var(--danger)` : ""}
+`;
+const AlertInner = styled.div`
+  padding: 1em;
+  background-color: rgba(0, 0, 0, 0.05);
+  /* border: 1px solid var(--grey700); */
+  /* background: pink; */
+  /* color: red; */
+`;
+export const Alert = ({ $danger, children, ...props })=>{
+    return /*#__PURE__*/ _jsx(AlertRoot, {
+        $danger: $danger,
+        ...props,
+        children: /*#__PURE__*/ _jsx(AlertInner, {
+            children: children
+        })
+    });
 };
-var templateObject_1, templateObject_2;

package/Alert/Alert.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    default: function() {
+        return _default;
+    },
+    bare: function() {
+        return bare;
+    },
+    danger: function() {
+        return danger;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _Alert = require("./Alert");
+const _default = {
+    component: _Alert.Alert,
+    title: "Base/Alert"
+};
+const Template = (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.Alert, {
+        ...args
+    });
+const bare = Template.bind({});
+bare.args = {
+    children: "An alert message"
+};
+const danger = Template.bind({});
+danger.args = {
+    children: "A dangerous message",
+    $danger: true
+};

package/Alert/Alert.stories.mjs

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert } from "./Alert";
+export default {
+    component: Alert,
+    title: "Base/Alert"
+};
+const Template = (args)=>/*#__PURE__*/ _jsx(Alert, {
+        ...args
+    });
+export const bare = Template.bind({});
+bare.args = {
+    children: "An alert message"
+};
+export const danger = Template.bind({});
+danger.args = {
+    children: "A dangerous message",
+    $danger: true
+};

package/Alert/index.js

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

package/Animations/Reveal.js

@@ -1,21 +1,53 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Reveal = void 0;
-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);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Reveal", {
+    enumerable: true,
+    get: function() {
+        return Reveal;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _framermotion = require("framer-motion");
+const _useReveal = require("./useReveal");
+const Reveal = ({ children, direction, offsetStartY, offsetEndY, offsetStartX, ...props })=>{
+    const effectOptions = {
+        direction,
+        offsetStartY,
+        offsetEndY,
+        offsetStartX
+    };
+    const prefersReducedMotion = (0, _framermotion.useReducedMotion)();
+    const { ref, startY, endY, startX } = (0, _useReveal.useReveal)(effectOptions);
+    const { scrollYProgress } = (0, _framermotion.useViewportScroll)();
+    const xRange = (0, _framermotion.useTransform)(scrollYProgress, [
+        startY,
+        endY
+    ], [
+        startX,
+        0
+    ]);
+    const opacityRange = (0, _framermotion.useTransform)(scrollYProgress, [
+        startY,
+        endY
+    ], [
+        0,
+        1
+    ]);
+    const x = (0, _framermotion.useSpring)(xRange, {
+        stiffness: 400,
+        damping: 90
+    });
+    const opacity = (0, _framermotion.useSpring)(opacityRange);
     // console.log("start, end", startY, endY)
-    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 })));
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_framermotion.motion.div, {
+        ...props,
+        ref: ref,
+        style: prefersReducedMotion ? {} : {
+            x,
+            opacity
+        },
+        children: children
+    });
 };
-exports.Reveal = Reveal;

package/Animations/Reveal.mjs

@@ -1,17 +1,43 @@
-import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { motion, useViewportScroll, useTransform, useSpring, useReducedMotion, } from "framer-motion";
+import { motion, useReducedMotion, useSpring, useTransform, useViewportScroll } from "framer-motion";
 import { useReveal } from "./useReveal";
-export var Reveal = function (_a) {
-    var children = _a.children, direction = _a.direction, offsetStartY = _a.offsetStartY, offsetEndY = _a.offsetEndY, offsetStartX = _a.offsetStartX, props = __rest(_a, ["children", "direction", "offsetStartY", "offsetEndY", "offsetStartX"]);
-    var effectOptions = { direction: direction, offsetStartY: offsetStartY, offsetEndY: offsetEndY, offsetStartX: offsetStartX };
-    var prefersReducedMotion = useReducedMotion();
-    var _b = useReveal(effectOptions), ref = _b.ref, startY = _b.startY, endY = _b.endY, startX = _b.startX;
-    var scrollYProgress = useViewportScroll().scrollYProgress;
-    var xRange = useTransform(scrollYProgress, [startY, endY], [startX, 0]);
-    var opacityRange = useTransform(scrollYProgress, [startY, endY], [0, 1]);
-    var x = useSpring(xRange, { stiffness: 400, damping: 90 });
-    var opacity = useSpring(opacityRange);
+export const Reveal = ({ children, direction, offsetStartY, offsetEndY, offsetStartX, ...props })=>{
+    const effectOptions = {
+        direction,
+        offsetStartY,
+        offsetEndY,
+        offsetStartX
+    };
+    const prefersReducedMotion = useReducedMotion();
+    const { ref, startY, endY, startX } = useReveal(effectOptions);
+    const { scrollYProgress } = useViewportScroll();
+    const xRange = useTransform(scrollYProgress, [
+        startY,
+        endY
+    ], [
+        startX,
+        0
+    ]);
+    const opacityRange = useTransform(scrollYProgress, [
+        startY,
+        endY
+    ], [
+        0,
+        1
+    ]);
+    const x = useSpring(xRange, {
+        stiffness: 400,
+        damping: 90
+    });
+    const opacity = useSpring(opacityRange);
     // console.log("start, end", startY, endY)
-    return (_jsx(motion.div, __assign({}, props, { ref: ref, style: prefersReducedMotion ? {} : { x: x, opacity: opacity }, children: children })));
+    return /*#__PURE__*/ _jsx(motion.div, {
+        ...props,
+        ref: ref,
+        style: prefersReducedMotion ? {} : {
+            x,
+            opacity
+        },
+        children: children
+    });
 };

package/Animations/Underline.d.ts

@@ -1 +1 @@
-export declare const UnderlineSkewed: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"i">>, import("styled-components").DefaultTheme, {}, never>;
+export declare const UnderlineSkewed: any;

package/Animations/Underline.js

@@ -1,8 +1,26 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UnderlineSkewed = void 0;
-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;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "UnderlineSkewed", {
+    enumerable: true,
+    get: function() {
+        return UnderlineSkewed;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _framermotion = require("framer-motion");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const UnderlineSkewed = (0, _styledcomponents.default)(_framermotion.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);
+`;

package/Animations/Underline.mjs

@@ -1,5 +1,15 @@
-import { __makeTemplateObject } from "tslib";
-import styled from "styled-components";
 import { m } from "framer-motion";
-export var UnderlineSkewed = styled(m.i)(templateObject_1 || (templateObject_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;
+import styled from "styled-components";
+export const UnderlineSkewed = styled(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);
+`;

package/Animations/index.js

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

package/Animations/useReveal.js

@@ -1,40 +1,45 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useReveal = void 0;
-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 () {
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useReveal", {
+    enumerable: true,
+    get: function() {
+        return useReveal;
+    }
+});
+const _react = require("react");
+function useReveal({ direction = "left", offsetStartY = -2, offsetEndY = 0, offsetStartX = "all" }) {
+    const ref = (0, _react.useRef)(null);
+    const [startY, setStartY] = (0, _react.useState)(0);
+    const [endY, setEndY] = (0, _react.useState)(0);
+    const [startX, setStartX] = (0, _react.useState)(0);
+    (0, _react.useEffect)(()=>{
         if (!ref.current) {
             return;
         }
-        var rect = ref.current.getBoundingClientRect();
+        const rect = ref.current.getBoundingClientRect();
         // scroll position from top of the window
-        var scrollTop = window.scrollY || document.documentElement.scrollTop;
-        var elementHeight = rect.height;
+        const scrollTop = window.scrollY || document.documentElement.scrollTop;
+        const 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
-        var elementTop = rect.top;
-        var distanceTop = elementTop + scrollTop;
-        var offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
-        var offsetBottom = offsetEndY ? elementHeight * offsetEndY : offsetTop;
+        const elementTop = rect.top;
+        const distanceTop = elementTop + scrollTop;
+        const offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
+        const 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
-        var startY = (distanceTop + offsetTop) / document.body.clientHeight;
+        const startY = (distanceTop + offsetTop) / document.body.clientHeight;
         // same for the end, we just add the given element height to the first value
-        var endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
-        var startX;
+        const endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
+        let startX;
         if (offsetStartX === "all") {
             startX = direction === "left" ? -rect.right : rect.left;
-        }
-        else {
+        } else {
             startX = rect.width * offsetStartX;
             startX = direction === "left" ? -startX : startX;
         }
@@ -44,8 +49,8 @@ function useReveal(_a) {
         setStartY(startY);
         setEndY(endY);
         setStartX(startX);
-        // addMarker(startY * 100 + "%", "blue", "fixed");
-        // addMarker(endY * 100 + "%", "blue", "fixed");
+    // addMarker(startY * 100 + "%", "blue", "fixed");
+    // addMarker(endY * 100 + "%", "blue", "fixed");
     }, [
         setStartY,
         setEndY,
@@ -53,23 +58,26 @@ function useReveal(_a) {
         offsetStartY,
         offsetEndY,
         offsetStartX,
-        direction,
+        direction
     ]);
-    return { ref: ref, startY: startY, endY: endY, startX: startX };
-}
-exports.useReveal = useReveal;
-// function addMarker(top: string, color = "red", position = "absolute") {
-//   const div = document.createElement("div");
-//   div.setAttribute(
-//     "style",
-//     `
-//     position: ${position};
-//     top: ${top};
-//     left: 0;
-//     right: 0;
-//     height: 1px;
-//     background: ${color};
-//   `
-//   );
-//   document.body.appendChild(div);
-// }
+    return {
+        ref,
+        startY,
+        endY,
+        startX
+    };
+} // function addMarker(top: string, color = "red", position = "absolute") {
+ //   const div = document.createElement("div");
+ //   div.setAttribute(
+ //     "style",
+ //     `
+ //     position: ${position};
+ //     top: ${top};
+ //     left: 0;
+ //     right: 0;
+ //     height: 1px;
+ //     background: ${color};
+ //   `
+ //   );
+ //   document.body.appendChild(div);
+ // }

package/Animations/useReveal.mjs

@@ -1,37 +1,35 @@
-import { useRef, useState, useEffect } from "react";
-export 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 = useRef(null);
-    var _f = useState(0), startY = _f[0], setStartY = _f[1];
-    var _g = useState(0), endY = _g[0], setEndY = _g[1];
-    var _h = useState(0), startX = _h[0], setStartX = _h[1];
-    useEffect(function () {
+import { useEffect, useRef, useState } from "react";
+export function useReveal({ direction = "left", offsetStartY = -2, offsetEndY = 0, offsetStartX = "all" }) {
+    const ref = useRef(null);
+    const [startY, setStartY] = useState(0);
+    const [endY, setEndY] = useState(0);
+    const [startX, setStartX] = useState(0);
+    useEffect(()=>{
         if (!ref.current) {
             return;
         }
-        var rect = ref.current.getBoundingClientRect();
+        const rect = ref.current.getBoundingClientRect();
         // scroll position from top of the window
-        var scrollTop = window.scrollY || document.documentElement.scrollTop;
-        var elementHeight = rect.height;
+        const scrollTop = window.scrollY || document.documentElement.scrollTop;
+        const 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
-        var elementTop = rect.top;
-        var distanceTop = elementTop + scrollTop;
-        var offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
-        var offsetBottom = offsetEndY ? elementHeight * offsetEndY : offsetTop;
+        const elementTop = rect.top;
+        const distanceTop = elementTop + scrollTop;
+        const offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
+        const 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
-        var startY = (distanceTop + offsetTop) / document.body.clientHeight;
+        const startY = (distanceTop + offsetTop) / document.body.clientHeight;
         // same for the end, we just add the given element height to the first value
-        var endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
-        var startX;
+        const endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
+        let startX;
         if (offsetStartX === "all") {
             startX = direction === "left" ? -rect.right : rect.left;
-        }
-        else {
+        } else {
             startX = rect.width * offsetStartX;
             startX = direction === "left" ? -startX : startX;
         }
@@ -41,8 +39,8 @@ export function useReveal(_a) {
         setStartY(startY);
         setEndY(endY);
         setStartX(startX);
-        // addMarker(startY * 100 + "%", "blue", "fixed");
-        // addMarker(endY * 100 + "%", "blue", "fixed");
+    // addMarker(startY * 100 + "%", "blue", "fixed");
+    // addMarker(endY * 100 + "%", "blue", "fixed");
     }, [
         setStartY,
         setEndY,
@@ -50,22 +48,26 @@ export function useReveal(_a) {
         offsetStartY,
         offsetEndY,
         offsetStartX,
-        direction,
+        direction
     ]);
-    return { ref: ref, startY: startY, endY: endY, startX: startX };
-}
-// function addMarker(top: string, color = "red", position = "absolute") {
-//   const div = document.createElement("div");
-//   div.setAttribute(
-//     "style",
-//     `
-//     position: ${position};
-//     top: ${top};
-//     left: 0;
-//     right: 0;
-//     height: 1px;
-//     background: ${color};
-//   `
-//   );
-//   document.body.appendChild(div);
-// }
+    return {
+        ref,
+        startY,
+        endY,
+        startX
+    };
+} // function addMarker(top: string, color = "red", position = "absolute") {
+ //   const div = document.createElement("div");
+ //   div.setAttribute(
+ //     "style",
+ //     `
+ //     position: ${position};
+ //     top: ${top};
+ //     left: 0;
+ //     right: 0;
+ //     height: 1px;
+ //     background: ${color};
+ //   `
+ //   );
+ //   document.body.appendChild(div);
+ // }