@coin-voyage/paykit 0.0.2 → 0.1.0

package/dist/paykit/src/components/ui/OptionsList/index.js

@@ -1,115 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { motion } from 'framer-motion';
-import { useEffect } from 'react';
-import { keyframes } from 'styled-components';
-import styled from '../../../styles/styled/index.js';
-import usePayContext from '../../contexts/pay/index.js';
-import { ScrollArea } from '../ScrollArea/index.js';
-import { OptionsContainer, OptionButton, OptionIcon, OptionLabel, OptionTitle, OptionSubtitle } from './styles.js';
-
-const OptionsList = ({ options, isLoading, requiredSkeletons, }) => {
-    const { triggerResize, log } = usePayContext();
-    const optionsLength = options.length;
-    useEffect(() => {
-        log(`[OPTIONS RESIZE]: ${optionsLength}, triggering resize`);
-        if (optionsLength > 0) {
-            triggerResize();
-        }
-    }, [optionsLength]);
-    if (isLoading) {
-        const skeletonCount = requiredSkeletons
-            ? Math.max(requiredSkeletons - optionsLength, 0)
-            : 0;
-        return (jsxs(OptionsContainer, { "$totalResults": options.length, children: [options.map((option) => (jsx(OptionItem, { option: option }, option.id))), isLoading &&
-                    Array.from({ length: skeletonCount }).map((_, index) => (jsx(SkeletonOptionItem, {}, index)))] }));
-    }
-    return (jsx(ScrollArea, { mobileDirection: "vertical", height: 300, children: jsx(OptionsContainer, { "$totalResults": options.length, children: options.map((option) => (jsx(OptionItem, { option: option }, option.id))) }) }));
-};
-const SkeletonOptionItem = () => {
-    return (jsxs(OptionButton, { type: "button", children: [jsx(SkeletonIcon, {}), jsx(SkeletonLabel, {})] }));
-};
-const pulse = keyframes `
-  0% {
-    opacity: 0.6;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.6;
-  }
-`;
-const SkeletonIcon = styled.div `
-  position: absolute;
-  right: 20px;
-  width: 32px;
-  height: 32px;
-  border-radius: 22.5%;
-  background-color: rgba(0, 0, 0, 0.1);
-  animation: ${pulse} 1.5s ease-in-out infinite;
-`;
-const SkeletonLabel = styled.div `
-  width: 100px;
-  height: 16px;
-  border-radius: 8px;
-  background-color: rgba(0, 0, 0, 0.1);
-  animation: ${pulse} 1.5s ease-in-out infinite;
-`;
-const OptionItem = ({ option }) => {
-    const hydratedIcons = option.icons.map((icon) => {
-        if (typeof icon === "string") {
-            return jsx("img", { src: icon, alt: "" });
-        }
-        return icon;
-    });
-    const iconContent = (() => {
-        if (hydratedIcons.length === 1) {
-            return (jsx(OptionIcon, { "data-shape": option.iconShape, children: hydratedIcons[0] }));
-        }
-        return (jsx(IconStackContainer, { children: hydratedIcons.map((icon, index) => (jsx(IconStackItem, { "data-shape": option.iconShape, "$marginRight": index !== hydratedIcons.length - 1 ? -12 : 0, "$zIndex": hydratedIcons.length - index, children: icon }, index))) }));
-    })();
-    return (jsxs(OptionButton, { type: "button", onClick: option.onClick, children: [iconContent, jsxs(OptionLabel, { children: [jsx(OptionTitle, { children: option.title }), option.subtitle && jsx(OptionSubtitle, { children: option.subtitle })] })] }));
-};
-const IconStackContainer = styled(motion.div) `
-  position: absolute;
-  right: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const IconStackItem = styled(motion.div) `
-  display: block;
-  overflow: hidden;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: ${(props) => props.$marginRight || 0}px;
-  z-index: ${(props) => props.$zIndex || 2};
-  width: 32px;
-  height: 32px;
-  overflow: hidden;
-  svg,
-  img {
-    display: block;
-    position: relative;
-    pointer-events: none;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-  }
-  border-radius: 22.5%;
-
-  &[data-shape="squircle"] {
-    border-radius: 22.5%;
-  }
-  &[data-shape="circle"] {
-    border-radius: 100%;
-  }
-  &[data-shape="square"] {
-    border-radius: 0;
-  }
-`;
-
-export { OptionsList as default };
-//# sourceMappingURL=index.js.map

package/dist/paykit/src/components/ui/OptionsList/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/paykit/src/components/ui/OptionsList/styles.js

@@ -1,165 +0,0 @@
-import { css } from 'styled-components';
-import styled from '../../../styles/styled/index.js';
-import { motion } from 'framer-motion';
-
-const OptionButton = styled(motion.button) `
-  display: block;
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 20px;
-  height: 64px;
-  font-size: 17px;
-  font-weight: var(--ck-primary-button-font-weight, 500);
-  line-height: 22px;
-  text-align: var(--ck-body-button-text-align, left);
-  transition: 180ms ease;
-  transition-property: background, color, box-shadow, transform, opacity;
-  will-change: transform, box-shadow, background-color, color, opacity;
-
-  --fallback-color: var(--ck-primary-button-color);
-  --fallback-background: var(--ck-primary-button-background);
-  --fallback-box-shadow: var(--ck-primary-button-box-shadow);
-  --fallback-border-radius: var(--ck-primary-button-border-radius);
-
-  --color: var(--ck-primary-button-color, var(--fallback-color));
-  --background: var(--ck-primary-button-background, var(--fallback-background));
-  --box-shadow: var(--ck-primary-button-box-shadow, var(--fallback-box-shadow));
-  --border-radius: var(
-    --ck-primary-button-border-radius,
-    var(--fallback-border-radius)
-  );
-
-  --hover-color: var(--ck-primary-button-hover-color, var(--color));
-  --hover-background: var(
-    --ck-primary-button-hover-background,
-    var(--background)
-  );
-  --hover-box-shadow: var(
-    --ck-primary-button-hover-box-shadow,
-    var(--box-shadow)
-  );
-  --hover-border-radius: var(
-    --ck-primary-button-hover-border-radius,
-    var(--border-radius)
-  );
-
-  --active-color: var(--ck-primary-button-active-color, var(--hover-color));
-  --active-background: var(
-    --ck-primary-button-active-background,
-    var(--hover-background)
-  );
-  --active-box-shadow: var(
-    --ck-primary-button-active-box-shadow,
-    var(--hover-box-shadow)
-  );
-  --active-border-radius: var(
-    --ck-primary-button-active-border-radius,
-    var(--hover-border-radius)
-  );
-
-  color: var(--color);
-  background: var(--background);
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border-radius);
-
-  &:disabled {
-    transition: 180ms ease;
-    opacity: 0.4;
-  }
-
-  --bg: var(--background);
-  &:not(:disabled) {
-    &:hover {
-      color: var(--hover-color);
-      background: var(--hover-background);
-      box-shadow: var(--hover-box-shadow);
-      border-radius: var(--hover-border-radius);
-      --bg: var(--hover-background, var(--background));
-    }
-    &:focus-visible {
-      transition-duration: 100ms;
-      color: var(--hover-color);
-      background: var(--hover-background);
-      box-shadow: var(--hover-box-shadow);
-      border-radius: var(--hover-border-radius);
-      --bg: var(--hover-background, var(--background));
-    }
-    &:active {
-      color: var(--active-color);
-      background: var(--active-background);
-      box-shadow: var(--active-box-shadow);
-      border-radius: var(--active-border-radius);
-      --bg: var(--active-background, var(--background));
-    }
-  }
-`;
-const OptionLabel = styled.span `
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 2px;
-  width: 100%;
-  overflow: hidden;
-  padding: 2px 0;
-  padding-right: 38px;
-`;
-const OptionTitle = styled.span `
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  width: 100%;
-`;
-const OptionSubtitle = styled(motion.span) `
-  font-size: 14px;
-  opacity: 0.6;
-  font-weight: 400;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  width: 100%;
-`;
-const OptionIcon = styled(motion.div) `
-  position: absolute;
-  right: 20px;
-  width: 32px;
-  height: 32px;
-  overflow: hidden;
-  svg,
-  img {
-    display: block;
-    position: relative;
-    pointer-events: none;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-  }
-
-  &[data-shape="squircle"] {
-    border-radius: 22.5%;
-  }
-  &[data-shape="circle"] {
-    border-radius: 100%;
-  }
-  &[data-shape="square"] {
-    border-radius: 0;
-  }
-`;
-const OptionsContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding-bottom: 6px;
-
-  ${(props) => props.$disabled &&
-    css `
-      pointer-events: none;
-      opacity: 0.4;
-    `}
-`;
-
-export { OptionButton, OptionIcon, OptionLabel, OptionSubtitle, OptionTitle, OptionsContainer };
-//# sourceMappingURL=styles.js.map

package/dist/paykit/src/components/ui/OptionsList/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/paykit/src/components/ui/OrderHeader/index.js

@@ -1,219 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import '../../../../../shared/src/common/chains.js';
-import { PayOrderMode } from '../../../../../shared/src/common/pay.js';
-import '../../../../../shared/src/common/model.js';
-import { motion } from 'framer-motion';
-import { useState } from 'react';
-import { Bitcoin, Ethereum, Solana, Sui, Optimism, Arbitrum } from '../../../assets/chains.js';
-import { USDC } from '../../../assets/coins.js';
-import defaultTheme from '../../../lib/config/default-theme.js';
-import styled from '../../../styles/styled/index.js';
-import usePayContext from '../../contexts/pay/index.js';
-import Button from '../Button/index.js';
-
-const CoinLogos = ({ $size = 24 }) => {
-    const logos = [
-        jsx(Bitcoin, {}),
-        jsx(Ethereum, { style: { backgroundColor: "#627EEA" } }),
-        jsx(Solana, {}),
-        jsx(Sui, {}),
-        jsx(USDC, {}),
-        jsx(Optimism, {}),
-        jsx(Arbitrum, {}),
-    ];
-    const logoBlock = (element, index) => (jsx(LogoContainer, { "$marginLeft": index !== 0 ? -($size / 3) : 0, "$zIndex": logos.length - index, "$size": $size, transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }, children: element }, index));
-    return (jsx(Logos, { children: logos.map((element, index) => logoBlock(element, index)) }));
-};
-const InputUnderlineField = ({ value, onChange, onBlur, onKeyDown, }) => {
-    // subtract width for decimal point if necessary
-    const width = `${value.length - 0.5 * (value.includes(".") ? 1 : 0)}ch`;
-    const selectAll = (e) => {
-        // When entering edit mode, select the amount for quicker editing
-        setTimeout(() => e.target.select(), 100);
-    };
-    return (jsxs("div", { style: { width: "auto", position: "relative" }, children: [jsx(InputField, { "$width": width, type: "text", pattern: "\\d*.\\d{2}", value: value, onChange: onChange, onBlur: onBlur, onFocus: selectAll, onKeyDown: onKeyDown, autoFocus: true }), jsx(Underline, {})] }));
-};
-const InputField = styled(motion.input) `
-  box-sizing: border-box;
-  background-color: transparent;
-  outline: none;
-  width: ${(props) => props.$width || "5ch"};
-  line-height: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  color: inherit;
-  border: none;
-  padding: 0;
-  &:focus {
-    box-sizing: border-box;
-    outline: none;
-    border: none;
-  }
-`;
-const Underline = styled(motion.div) `
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background-color: var(--ck-body-color-muted);
-`;
-const OrderHeader = ({ minified = false }) => {
-    const { paymentState } = usePayContext();
-    const amount = paymentState.payOrder?.destination_value_usd?.toFixed(2);
-    const isEditable = paymentState.payOrder?.mode === PayOrderMode.DEPOSIT;
-    const [editableAmount, setEditableAmount] = useState(amount ?? "");
-    // Start out in edit mode immediately if amount = 0.
-    const [isEditing, setIsEditing] = useState(amount === "0.00");
-    const handleSave = () => {
-        if (!isEditing) {
-            return;
-        }
-        paymentState.setChosenUsd(Number(editableAmount));
-        setIsEditing(false);
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === "Enter" && isEditing) {
-            handleSave();
-        }
-    };
-    const sanitizeAndSetAmount = (amount) => {
-        if (!amount.match(/^[0-9]*(\.[0-9]{0,2})?$/)) {
-            return;
-        }
-        const [digitsBeforeDecimal, digitsAfterDecimal] = (() => {
-            if (amount.includes(".")) {
-                return amount.split(".");
-            }
-            return [amount, ""];
-        })();
-        if (digitsBeforeDecimal.length > 5 || digitsAfterDecimal.length > 2) {
-            return;
-        }
-        setEditableAmount(amount);
-    };
-    const titleAmountContent = (() => {
-        const buttonStyles = (() => {
-            if (minified) {
-                return {
-                    height: "24px",
-                    width: "42px",
-                    lineHeight: "12px",
-                    borderRadius: "6px",
-                    fontSize: "14px",
-                };
-            }
-            return {
-                height: "30px",
-                width: "54px",
-                lineHeight: "16px",
-                borderRadius: "8px",
-                fontSize: "20px",
-            };
-        })();
-        return (jsxs(Fragment, { children: [isEditable && !minified && (jsx("div", { style: { width: buttonStyles.width, height: buttonStyles.height } })), !isEditing ? (jsxs("button", { type: "button", onClick: () => { setIsEditing(true); }, children: ["$", amount] })) : (jsxs("div", { style: { display: "flex" }, children: ["$", jsx(InputUnderlineField, { value: editableAmount, onChange: (e) => { sanitizeAndSetAmount(e.target.value); }, onBlur: (e) => {
-                                if (!e.relatedTarget) {
-                                    setIsEditing(false);
-                                }
-                            }, onKeyDown: handleKeyDown })] })), isEditable && (jsx(Button, { variant: "primary", onClick: () => {
-                        if (isEditing) {
-                            handleSave();
-                        }
-                        else {
-                            setIsEditing(true);
-                        }
-                    }, style: {
-                        width: buttonStyles.width,
-                        height: buttonStyles.height,
-                        lineHeight: buttonStyles.lineHeight,
-                        borderRadius: buttonStyles.borderRadius,
-                        fontSize: buttonStyles.fontSize,
-                        margin: 0,
-                    }, children: isEditing ? "Save" : "Edit" }))] }));
-    })();
-    if (minified) {
-        return (jsxs(MinifiedContainer, { children: [jsx(MinifiedTitleAmount, { children: titleAmountContent }), jsx(CoinLogos, { "$size": 32 })] }));
-    }
-    return (jsxs(Fragment, { children: [jsx(TitleAmount, { children: titleAmountContent }), jsxs(AnyChainAnyCoinContainer, { children: [jsx(CoinLogos, {}), jsx(Subtitle, { children: "1000+ tokens accepted" })] })] }));
-};
-const TitleAmount = styled(motion.h1) `
-  margin: 0;
-  padding: 0;
-  line-height: 66px;
-  font-size: 64px;
-  font-weight: var(--ck-modal-h1-font-weight, 600);
-  color: ${(props) => {
-    if (props.$error) {
-        return "var(--ck-body-color-danger)";
-    }
-    if (props.$valid) {
-        return "var(--ck-body-color-valid)";
-    }
-    return "var(--ck-body-color)";
-}};
-  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    font-size: 64px;
-  }
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-`;
-const Subtitle = styled(motion.div) `
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 21px;
-  color: var(--ck-body-color-muted);
-`;
-const MinifiedTitleAmount = styled(motion.div) `
-  font-size: 32px;
-  font-weight: var(--ck-modal-h1-font-weight, 600);
-  line-height: 36px;
-  color: var(--ck-body-color);
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  gap: 8px;
-`;
-const MinifiedContainer = styled(motion.div) `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  margin-bottom: 24px;
-`;
-const AnyChainAnyCoinContainer = styled(motion.div) `
-  display: flex;
-  vertical-align: middle;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  gap: 8px;
-  margin: 24px 0;
-`;
-const LogoContainer = styled(motion.div) `
-  display: block;
-  overflow: hidden;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: ${(props) => props.$marginLeft || 0}px;
-  z-index: ${(props) => props.$zIndex || 2};
-  width: ${(props) => props.$size}px;
-  height: ${(props) => props.$size}px;
-  border-radius: 9999px;
-  svg {
-    display: block;
-    width: 100%;
-    height: auto;
-  }
-`;
-const Logos = styled(motion.div) `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export { OrderHeader };
-//# sourceMappingURL=index.js.map

package/dist/paykit/src/components/ui/OrderHeader/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/paykit/src/components/ui/Portal/index.js

@@ -1,32 +0,0 @@
-import { useRef, useState, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import packageJson from '../../../../package.json.js';
-
-const Portal = (props) => {
-    props = {
-        selector: "__COIN_VOYAGE__",
-        ...props,
-    };
-    const { selector, children } = props;
-    const ref = useRef(null);
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => {
-        const selectorPrefixed = `#${selector.replace(/^#/, "")}`;
-        ref.current = document.querySelector(selectorPrefixed);
-        if (!ref.current) {
-            const div = document.createElement("div");
-            div.setAttribute("id", selector);
-            div.setAttribute("data-pay", `${packageJson.version}`);
-            document.body.appendChild(div);
-            ref.current = div;
-        }
-        setMounted(true);
-    }, [selector]);
-    if (!ref.current) {
-        return null;
-    }
-    return mounted ? createPortal(children, ref.current) : null;
-};
-
-export { Portal as default };
-//# sourceMappingURL=index.js.map

package/dist/paykit/src/components/ui/Portal/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/paykit/src/components/ui/PoweredByFooter/index.js

@@ -1,42 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from '../../../styles/styled/index.js';
-
-const PoweredByFooter = () => {
-    return (jsx(Container, { children: jsx(TextButton, { onClick: () => {
-                window.open("https://coinvoyage.io", "_blank");
-            }, children: "Powered by Coin Voyage" }) }));
-};
-const Container = styled.div `
-  text-align: center;
-  margin-top: 16px;
-  margin-bottom: -4px;
-`;
-const TextButton = styled.button `
-  appearance: none;
-  user-select: none;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  height: 42px;
-  padding: 0 16px;
-  border-radius: 6px;
-  background: none;
-  color: var(--ck-body-color-muted);
-  font-size: 15px;
-  line-height: 18px;
-  font-weight: 500;
-  transition:
-    color 200ms ease,
-    transform 100ms ease;
-  &:hover {
-    color: var(--ck-body-color-muted-hover);
-  }
-  &:active {
-    transform: scale(0.96);
-  }
-`;
-
-export { PoweredByFooter as default };
-//# sourceMappingURL=index.js.map

package/dist/paykit/src/components/ui/PoweredByFooter/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/paykit/src/components/ui/ScrollArea/index.js

@@ -1,63 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
-import usePayContext from '../../contexts/pay/index.js';
-import { ScrollContainer, ScrollAreaContainer, MoreIndicator } from './styles.js';
-import useIsMobile from '../../../../../shared/src/hooks/use-is-mobile.js';
-
-const ArrowDown = () => (jsx("svg", { width: "11", height: "12", viewBox: "0 0 11 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M5.49438 1L5.49438 11M5.49438 11L9.5 7M5.49438 11L1.5 7", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const ScrollArea = ({ children, height, backgroundColor, mobileDirection, }) => {
-    const { log } = usePayContext();
-    const ref = useRef(null);
-    const moreRef = useRef(null);
-    const isMobile = useIsMobile();
-    useEffect(() => {
-        const el = ref.current;
-        if (!el) {
-            return;
-        }
-        // if ref is not scrollable, hide the more indicator
-        if (el.scrollHeight > el.clientHeight) {
-            if (moreRef.current) {
-                moreRef.current.classList.remove("hide");
-            }
-        }
-        log(`[SCROLL AREA]: ${el.scrollHeight}, ${el.clientHeight}`);
-        const handleScroll = (e) => {
-            const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth, } = e.target;
-            if (moreRef.current) {
-                if (scrollTop > 0) {
-                    moreRef.current.classList.add("hide");
-                }
-            }
-            if (scrollTop === 0 && scrollLeft === 0) {
-                el.classList.add("scroll-start");
-            }
-            else {
-                el.classList.remove("scroll-start");
-            }
-            if (scrollHeight - scrollTop === clientHeight &&
-                scrollWidth - scrollLeft === clientWidth) {
-                el.classList.add("scroll-end");
-            }
-            else {
-                el.classList.remove("scroll-end");
-            }
-        };
-        el.addEventListener("scroll", handleScroll);
-        handleScroll({ target: el });
-        return () => {
-            el.removeEventListener("scroll", handleScroll);
-        };
-    }, [ref.current]);
-    return (jsxs(ScrollContainer, { children: [jsx(ScrollAreaContainer, { ref: ref, "$mobile": isMobile, "$height": height, "$backgroundColor": backgroundColor, "$mobileDirection": mobileDirection, children: children }), jsx(MoreIndicator, { ref: moreRef, className: "hide", onClick: () => {
-                    if (ref.current) {
-                        ref.current.scrollTo({
-                            top: ref.current.scrollHeight,
-                            behavior: "smooth",
-                        });
-                    }
-                }, children: jsxs("span", { children: [jsx(ArrowDown, {}), " More Available"] }) })] }));
-};
-
-export { ScrollArea };
-//# sourceMappingURL=index.js.map

package/dist/paykit/src/components/ui/ScrollArea/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}