@openfort/react 0.3.2 → 1.0.0

package/build/components/Common/OTPInput/index.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { TickIcon } from '../../../assets/icons.js';
+import { OtpContainer, OTPGroup, OTPSlotWrapper, OTPHiddenInput, OTPNumberValue, SuccessTickWrapper, FakeCaretWrapper, CaretBar } from './styles.js';
+
+function FakeCaret() {
+    return (jsx(FakeCaretWrapper, { children: jsx(CaretBar, {}) }));
+}
+function OtpInputStandalone({ length = 6, onChange, onComplete, isLoading, isError, isSuccess, scale, }) {
+    const [values, setValues] = useState(Array(length).fill(''));
+    const [activeIndex, setActiveIndex] = useState(0);
+    const canEdit = !isLoading && !isError && !isSuccess;
+    const inputsRef = useRef([]);
+    const handleInput = (index, char) => {
+        var _a;
+        if (!char.match(/^[0-9]$/))
+            return;
+        if (!canEdit)
+            return;
+        const newValues = [...values];
+        newValues[index] = char;
+        setValues(newValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(''));
+        // Move cursor to next box
+        if (index < length - 1) {
+            setActiveIndex(index + 1);
+            (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    useEffect(() => {
+        if (values.every((v) => v !== '')) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(values.join(''));
+        }
+    }, [values]);
+    const handleBackspace = (index) => {
+        var _a;
+        const newValues = [...values];
+        if (newValues[index] === '') {
+            if (index > 0) {
+                // Move back
+                setActiveIndex(index - 1);
+                (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            newValues[index - 1] = '';
+        }
+        else {
+            newValues[index] = '';
+        }
+        setValues(newValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(''));
+    };
+    const handlePaste = (e) => {
+        var _a;
+        const pasted = e.clipboardData.getData('text').replace(/\D/g, '');
+        if (!pasted)
+            return;
+        const arr = pasted.substring(0, length).split('');
+        const newValues = [...values];
+        arr.forEach((char, i) => {
+            newValues[i] = char;
+        });
+        setValues(newValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(''));
+        const finalIndex = Math.min(arr.length - 1, length - 1);
+        setActiveIndex(finalIndex);
+        (_a = inputsRef.current[finalIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleFocus = (i) => {
+        var _a, _b;
+        if (activeIndex !== -1) {
+            setActiveIndex(i);
+            return;
+        }
+        const firstEmptyIndex = values.indexOf('');
+        if (firstEmptyIndex !== -1) {
+            setActiveIndex(firstEmptyIndex);
+            (_a = inputsRef.current[firstEmptyIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            setActiveIndex(length - 1);
+            (_b = inputsRef.current[length - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    useEffect(() => {
+        var _a;
+        if (!isError) {
+            setValues(Array(length).fill(''));
+            setActiveIndex(0);
+            (_a = inputsRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [isError]);
+    return (jsx(OtpContainer, { showBorder: !isSuccess, scale: scale, children: jsxs(OTPGroup, { isError: isError, isSuccess: isSuccess, isLoading: isLoading, children: [values.slice(0, length).map((value, idx) => {
+                    const index = idx;
+                    return (jsxs(OTPSlotWrapper, { isActive: canEdit && activeIndex === index, children: [jsx(OTPHiddenInput, { ref: (el) => {
+                                    inputsRef.current[index] = el;
+                                }, value: "", inputMode: "numeric", onBlur: () => setActiveIndex(-1), autoComplete: "one-time-code", autoFocus: index === 0, onFocus: () => handleFocus(index), onPaste: handlePaste, onKeyDown: (e) => {
+                                    if (!canEdit)
+                                        return;
+                                    if (e.key === 'Backspace') {
+                                        e.preventDefault();
+                                        handleBackspace(index);
+                                    }
+                                }, onChange: (e) => handleInput(index, e.target.value) }), value && jsx(OTPNumberValue, { "$hide": isSuccess, children: value }), !value && activeIndex === index && jsx(FakeCaret, {})] }, index));
+                }), isSuccess && (jsx(SuccessTickWrapper, { children: jsx(TickIcon, { width: '100%', height: '100%' }) }))] }) }));
+}
+
+export { OtpInputStandalone };
+//# sourceMappingURL=index.js.map

package/build/components/Common/OTPInput/index.js.map

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

package/build/components/Common/OTPInput/styles.js

@@ -0,0 +1,153 @@
+import { keyframes, css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+const caretBlink = keyframes `
+  0%, 70%, 100% { opacity: 1; }
+  20%, 50% { opacity: 0; }
+`;
+const OtpContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  scale: ${({ scale }) => scale || '1'};
+
+  --border: ${({ showBorder }) => (showBorder ? 'var(--ck-body-color-muted)' : 'transparent')};
+`;
+const pulse = keyframes `
+  0% {
+    opacity: 100%;
+  }
+  50% {
+    opacity: 40%;
+  }
+  100% {
+    opacity: 100%;
+  }
+`;
+const dist = 2;
+const shakeKeyframes = keyframes `
+  0%{ transform:none; }
+  25%{ transform:translateX(${dist}px); }
+  50%{ transform:translateX(-${dist}px); }
+  75%{ transform:translateX(${dist}px); }
+  100%{ transform:none; }
+`;
+const keyframeSuccess = keyframes `
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+`;
+const OTPGroup = styled.div `
+  display: flex;
+
+  outline-width: 3px;
+  outline-style: solid;
+  border-radius: 0.375rem;
+  transition: outline-color 0.3s, border-radius .5s;
+
+  outline-color: ${({ isError, isSuccess }) => {
+    if (isError)
+        return 'var(--ck-body-color-danger)';
+    if (isSuccess)
+        return 'var(--ck-body-color-valid)';
+    return 'transparent';
+}};
+
+  ${({ isLoading }) => isLoading &&
+    css `
+      animation: ${pulse} 1s ease-in-out infinite;
+    `}
+
+  ${({ isError }) => isError &&
+    css `
+      animation: ${shakeKeyframes} 220ms ease-out both;
+    `}
+
+  ${({ isSuccess }) => isSuccess &&
+    css `
+      border-radius: 3rem;
+      min-width: 3.5rem;
+      ${OTPSlotWrapper} {
+        width: 0;
+        border: 0;
+        transition: width .5s, border .5s;
+      }
+      animation: ${keyframeSuccess} 220ms ease-out both;
+      animation-delay: 250ms;
+    `}
+`;
+const OTPSlotWrapper = styled.div `
+  position: relative;
+  width: 2.5rem;
+  height: 3.5rem;     
+  font-size: 2rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transition: all 0.3s;
+
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  border-right: 0.5px solid var(--border);
+  border-left: 0.5px solid var(--border);
+
+  &:first-child {
+    border-left: 1px solid var(--border);
+    border-radius: 0.375rem 0 0 0.375rem;
+  }
+
+  &:last-child {
+    border-radius: 0 0.375rem 0.375rem 0;
+  }
+
+  outline: ${({ isActive }) => (isActive ? '2px solid var(--ck-connectbutton-color)' : '0')};
+  z-index: ${({ isActive }) => (isActive ? 1 : 0)};
+  outline-offset: 0;
+
+  cursor: text;
+  color: var(--ck-body-color);
+`;
+const OTPNumberValue = styled.div `
+  opacity: ${({ $hide }) => ($hide ? 0 : 1)};
+  transition: opacity 0.3s;
+`;
+const OTPHiddenInput = styled.input `
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: text;
+  caret-color: transparent; /* Hide native caret */
+`;
+const FakeCaretWrapper = styled.div `
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  animation: ${caretBlink} 1.2s ease-out infinite;
+`;
+const CaretBar = styled.div `
+  width: 1px;
+  height: 2rem;
+  background: var(--ck-body-color);
+`;
+const keyframeWrapper = keyframes `
+  0% { transform: scale(0); }
+  100% { transform: scale(1); }
+`;
+const SuccessTickWrapper = styled.div `
+  position: absolute;
+  inset: 5px;
+  display: flex;
+  animation: ${keyframeWrapper} 200ms ease-out both;
+  animation-delay: 200ms;
+  color: var(--ck-body-color-valid);
+`;
+
+export { CaretBar, FakeCaretWrapper, OTPGroup, OTPHiddenInput, OTPNumberValue, OTPSlotWrapper, OtpContainer, SuccessTickWrapper };
+//# sourceMappingURL=styles.js.map

package/build/components/Common/OTPInput/styles.js.map

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

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

@@ -0,0 +1,31 @@
+import { useRef, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { OPENFORT_VERSION } from '../../../version.js';
+
+const Portal = (props) => {
+    props = {
+        selector: '__OPENFORT__',
+        ...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-openfort-react', `${OPENFORT_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/components/Common/Portal/index.js.map

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

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

@@ -0,0 +1,103 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import Logos from '../../../assets/logos.js';
+import styled from '../../../styles/styled/index.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+
+const PoweredByFooter = ({ showDisclaimer }) => {
+    var _a, _b;
+    const { uiConfig: options } = useOpenfort();
+    return (jsxs(Container, { children: [showDisclaimer && (jsx(Disclaimer, { children: (options === null || options === void 0 ? void 0 : options.disclaimer) ? (options.disclaimer) : (jsxs("div", { children: ["By logging in, you agree to our", ' ', jsx("a", { href: (_a = options === null || options === void 0 ? void 0 : options.termsOfServiceUrl) !== null && _a !== void 0 ? _a : 'https://www.openfort.io/terms', target: "_blank", rel: "noopener noreferrer", children: "Terms of Service" }), ' ', "&", ' ', jsx("a", { href: (_b = options === null || options === void 0 ? void 0 : options.privacyPolicyUrl) !== null && _b !== void 0 ? _b : 'https://www.openfort.io/privacy', target: "_blank", rel: "noopener noreferrer", children: "Privacy Policy" }), "."] })) })), jsxs(TextButton, { onClick: () => {
+                    window.open('https://www.openfort.io/', '_blank');
+                }, children: [jsx("span", { children: "Powered by" }), jsx(IconContainer, { children: jsx(Logos.Openfort, {}) }), jsx("span", { children: "Openfort" })] })] }));
+};
+const Disclaimer = styled(motion.div) `
+  padding: 8px 50px 0px 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--ck-body-disclaimer-font-size, 10px);
+  font-weight: var(--ck-body-disclaimer-font-weight, 400);
+  text-align: center;
+  line-height: 1rem;
+  color: var(--ck-body-disclaimer-color, var(--ck-body-color-muted, inherit));
+
+  & a {
+    color: var(--ck-body-disclaimer-link-color, inherit);
+    font-weight: var(--ck-body-disclaimer-font-weight, 400);
+    text-decoration: none;
+    transition: color 200ms ease;
+    &:hover {
+      color: var(--ck-body-disclaimer-link-hover-color, inherit);
+    }
+  }
+`;
+const IconContainer = styled.div `
+  width: 20px;
+  height: 20px;
+  margin-left: 5px;
+  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 Container = styled(motion.div) `
+  text-align: center;
+  margin-top: 4px;
+  margin-bottom: -16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const TextButton = styled(motion.button) `
+  appearance: none;
+  user-select: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: 42px;
+  padding: 0 16px;
+  border-radius: 6px;
+  background: none;
+  color: var(--ck-body-color-muted);
+  text-decoration-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);
+    text-decoration-color: var(--ck-body-color-muted-hover);
+  }
+  &:active {
+    transform: scale(0.96);
+  }
+
+  span {
+    opacity: 1;
+    transition: opacity 300ms ease;
+  }
+`;
+
+export { PoweredByFooter as default };
+//# sourceMappingURL=index.js.map

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

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

package/build/components/Common/Providers/ProviderHeader.d.ts

@@ -1,7 +1,7 @@
-import type { UserAccount } from '../../../openfortCustomTypes';
+import type { LinkedAccount } from '../../Openfort/types';
 export declare const WalletDisplay: ({ walletAddress }: {
     walletAddress: string;
 }) => string;
 export declare const ProviderHeader: React.FC<{
-    provider: UserAccount;
+    account: LinkedAccount;
 }>;

package/build/components/Common/Providers/ProviderHeader.js

@@ -0,0 +1,55 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useConnectionStrategy } from '../../../core/ConnectionStrategyContext.js';
+import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeContext.js';
+import { useUser } from '../../../hooks/openfort/useUser.js';
+import 'detect-browser';
+import { truncateEthAddress } from '../../../utils/format.js';
+import { logger } from '../../../utils/logger.js';
+import { useThemeContext } from '../../ConnectKitThemeProvider/ConnectKitThemeProvider.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { LinkedProviderText } from '../../Pages/LinkedProviders/styles.js';
+
+const WalletDisplay = ({ walletAddress }) => {
+    var _a, _b, _c;
+    const strategy = useConnectionStrategy();
+    const bridge = useEthereumBridge();
+    const [ensName, setEnsName] = useState(undefined);
+    const context = useOpenfort();
+    const themeContext = useThemeContext();
+    // Only resolve ENS on mainnet (1); testnets throw "network does not support ENS"
+    const useEns = (strategy === null || strategy === void 0 ? void 0 : strategy.kind) === 'bridge' && !!(bridge === null || bridge === void 0 ? void 0 : bridge.getEnsName) && ((_a = bridge.chainId) !== null && _a !== void 0 ? _a : 0) === 1;
+    useEffect(() => {
+        if (!useEns || !walletAddress || !(bridge === null || bridge === void 0 ? void 0 : bridge.getEnsName))
+            return;
+        bridge
+            .getEnsName({ address: walletAddress })
+            .then(setEnsName)
+            .catch((_err) => {
+            // ENS resolution can fail on testnets; non-fatal
+            if (process.env.NODE_ENV === 'development') {
+                logger.warn('[Openfort] ENS resolution failed');
+            }
+        });
+    }, [useEns, bridge, walletAddress]);
+    const separator = ['web95', 'rounded', 'minimal'].includes((_c = (_b = themeContext.theme) !== null && _b !== void 0 ? _b : context.uiConfig.theme) !== null && _c !== void 0 ? _c : '')
+        ? '....'
+        : undefined;
+    return ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(walletAddress, separator);
+};
+const ProviderHeader = ({ account }) => {
+    var _a;
+    const { user } = useUser();
+    switch (account.provider) {
+        case 'wallet':
+        case 'siwe':
+            return (jsx(LinkedProviderText, { children: jsx(WalletDisplay, { walletAddress: account.accountId }) }));
+        case 'phone':
+            return jsx(LinkedProviderText, { children: account.accountId });
+        default:
+            return (jsx(LinkedProviderText, { style: { textTransform: (user === null || user === void 0 ? void 0 : user.email) ? 'none' : 'capitalize' }, children: (_a = user === null || user === void 0 ? void 0 : user.email) !== null && _a !== void 0 ? _a : account.provider }));
+    }
+};
+
+export { ProviderHeader, WalletDisplay };
+//# sourceMappingURL=ProviderHeader.js.map

package/build/components/Common/Providers/ProviderHeader.js.map

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

package/build/components/Common/Providers/ProviderIcon.d.ts

@@ -1,4 +1,4 @@
-import type { UserAccount } from '../../../openfortCustomTypes';
+import type { LinkedAccount } from '../../Openfort/types';
 export declare const ProviderIcon: React.FC<{
-    provider: UserAccount;
+    account: LinkedAccount;
 }>;

package/build/components/Common/Providers/ProviderIcon.js

@@ -0,0 +1,41 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { PhoneIcon, EmailIcon, WalletIcon } from '../../../assets/icons.js';
+import Logos, { providersLogos } from '../../../assets/logos.js';
+import { useExternalConnectors } from '../../../wallets/useExternalConnectors.js';
+import FitText from '../FitText/index.js';
+
+const WalletIconWrapper = ({ account }) => {
+    var _a;
+    const wallets = useExternalConnectors();
+    const wallet = useMemo(() => {
+        return wallets.find((w) => { var _a; return ((_a = w.id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === account.walletClientType; });
+    }, [account]);
+    if (account.walletClientType === 'walletconnect')
+        return jsx(Logos.WalletConnect, {});
+    if (wallet)
+        return jsx(Fragment, { children: (_a = wallet.iconConnector) !== null && _a !== void 0 ? _a : wallet.icon });
+    return jsx(WalletIcon, {});
+};
+const ProviderIcon = ({ account }) => {
+    switch (account.provider) {
+        case 'email':
+        case 'credential':
+            return jsx(EmailIcon, {});
+        // OTP_TODO: Wallet icon
+        case 'wallet':
+        case 'siwe':
+            return jsx(WalletIconWrapper, { account: account });
+        case 'phone':
+            return jsx(PhoneIcon, {});
+        case 'google':
+        case 'twitter':
+        case 'facebook':
+            return providersLogos[account.provider];
+        default:
+            return jsx(FitText, { children: account.provider.substring(0, 4).toUpperCase() });
+    }
+};
+
+export { ProviderIcon };
+//# sourceMappingURL=ProviderIcon.js.map

package/build/components/Common/Providers/ProviderIcon.js.map

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

package/build/components/Common/Providers/getProviderName.d.ts

@@ -1,2 +1,2 @@
-import type { UserAccount } from '../../../openfortCustomTypes';
+import type { UserAccount } from '@openfort/openfort-js';
 export declare const getProviderName: (provider: UserAccount["provider"]) => string;

package/build/components/Common/Providers/getProviderName.js

@@ -0,0 +1,15 @@
+const getProviderName = (provider) => {
+    switch (provider) {
+        case 'wallet':
+        case 'siwe':
+            return 'Wallet';
+        case 'email':
+        case 'credential':
+            return 'Email';
+        default:
+            return provider.charAt(0).toUpperCase() + provider.slice(1);
+    }
+};
+
+export { getProviderName };
+//# sourceMappingURL=getProviderName.js.map

package/build/components/Common/Providers/getProviderName.js.map

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

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

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import useIsMobile from '../../../hooks/useIsMobile.js';
+import { ScrollContainer, ScrollAreaContainer, MoreIndicator } from './styles.js';
+
+const ArrowDown = () => (jsxs("svg", { width: "11", height: "12", viewBox: "0 0 11 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "Scroll down arrow" }), 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 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');
+            }
+        }
+        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/components/Common/ScrollArea/index.js.map

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