@daimo/pay 0.3.21 → 1.0.1

package/build/src/components/Common/OptionsList/index.js

@@ -0,0 +1,106 @@
+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 '../../DaimoPay.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, { children: hydratedIcons[0] });
+        else {
+            return (jsx(IconStackContainer, { children: hydratedIcons.map((icon, index) => (jsx(IconStackItem, { "$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%;
+`;
+
+export { OptionsList as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Common/OptionsList/index.js.map

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

package/build/src/components/Common/OptionsList/styles.js

@@ -0,0 +1,165 @@
+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: 20px;
+  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(motion.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(motion.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 `
+  transition: opacity 300ms ease;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  ${(props) => props.$disabled &&
+    css `
+      pointer-events: none;
+      opacity: 0.4;
+    `}
+`;
+
+export { OptionButton, OptionIcon, OptionLabel, OptionSubtitle, OptionTitle, OptionsContainer };
+//# sourceMappingURL=styles.js.map

package/build/src/components/Common/OptionsList/styles.js.map

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

package/build/src/components/Common/OrderHeader/index.js

@@ -0,0 +1,215 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { DaimoPayOrderMode } from '@daimo/common';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { Ethereum, Optimism, Arbitrum, Base, Polygon, Solana } from '../../../assets/chains.js';
+import { USDC } from '../../../assets/coins.js';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import styled from '../../../styles/styled/index.js';
+import { usePayContext } from '../../DaimoPay.js';
+import Button from '../Button/index.js';
+
+/** Shows payment amount. */
+const OrderHeader = ({ minified = false }) => {
+    const { paymentState } = usePayContext();
+    const amount = paymentState.daimoPayOrder?.destFinalCallTokenAmount.usd.toFixed(2);
+    const isEditable = paymentState.daimoPayOrder?.mode === DaimoPayOrderMode.CHOOSE_AMOUNT;
+    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(".");
+            else
+                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",
+                };
+            else
+                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("span", { 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 })] }));
+    }
+    else {
+        return (jsxs(Fragment, { children: [jsx(TitleAmount, { children: titleAmountContent }), jsxs(AnyChainAnyCoinContainer, { children: [jsx(CoinLogos, {}), jsx(Subtitle, { children: "1000+ tokens accepted" })] })] }));
+    }
+};
+function CoinLogos({ $size = 24 }) {
+    const logos = [
+        jsx(Ethereum, {}),
+        jsx(USDC, {}),
+        jsx(Optimism, {}),
+        jsx(Arbitrum, {}),
+        jsx(Base, {}),
+        jsx(Polygon, {}),
+        jsx(Solana, {}),
+    ];
+    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)) }));
+}
+function 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 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/build/src/components/Common/OrderHeader/index.js.map

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

package/build/src/components/Common/Portal/index.js

@@ -0,0 +1,31 @@
+import { useRef, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import packageJson from '../../../../package.json.js';
+
+const Portal = (props) => {
+    props = {
+        selector: "__DAIMOPAY__",
+        ...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-daimopay", `${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/build/src/components/Common/Portal/index.js.map

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

package/build/src/components/Common/PoweredByFooter/index.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import CrepeIcon from '../../../assets/crepe.js';
+import styled from '../../../styles/styled/index.js';
+
+const PoweredByFooter = () => {
+    return (jsx(Container, { children: jsxs(TextButton, { onClick: () => {
+                window.open("https://pay.daimo.com?ref=paykit", "_blank");
+            }, children: [jsx(CrepeIcon, {}), "Powered by Daimo Pay"] }) }));
+};
+const Container = styled(motion.div) `
+  text-align: center;
+  margin-top: 16px;
+  margin-bottom: -4px;
+`;
+const TextButton = styled(motion.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/build/src/components/Common/PoweredByFooter/index.js.map

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

package/build/src/components/Common/ScrollArea/index.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import useIsMobile from '../../../hooks/useIsMobile.js';
+import { usePayContext } from '../../DaimoPay.js';
+import { ScrollContainer, ScrollAreaContainer, MoreIndicator } from './styles.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/build/src/components/Common/ScrollArea/index.js.map

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