@rozoai/intent-pay 0.0.7 → 0.0.9

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

@@ -0,0 +1,103 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { useEffect } from 'react';
+import { keyframes } from 'styled-components';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import styled from '../../../styles/styled/index.js';
+import { OrDivider } from '../Modal/index.js';
+import { ScrollArea } from '../ScrollArea/index.js';
+import { OptionsContainer, OptionButton, OptionLabel, OptionTitle, OptionSubtitle } from './styles.js';
+
+const OptionsList = ({ options, isLoading, requiredSkeletons, scrollHeight = 300, orDivider = false, hideBottomLine = false, }) => {
+    const { triggerResize, log } = usePayContext();
+    const optionsLength = options.length;
+    useEffect(() => {
+        log(`[OPTIONS RESIZE]: ${optionsLength}, triggering resize`);
+        if (optionsLength > 0)
+            triggerResize();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [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 (jsxs(Fragment, { children: [jsx(ScrollArea, { mobileDirection: "vertical", height: scrollHeight, hideBottomLine: orDivider || hideBottomLine, totalItems: options.length, children: jsx(OptionsContainer, { "$totalResults": options.length, children: options.map((option) => (jsx(OptionItem, { option: option }, option.id))) }) }), orDivider && jsx(OrDivider, {})] }));
+};
+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: "" }, option.id);
+        }
+        return icon;
+    });
+    const iconContent = (() => {
+        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, disabled: option.disabled, 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 };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/OptionsList/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

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

@@ -0,0 +1,139 @@
+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: ${(props) => (props.disabled ? "default" : "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 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, 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":["../../../../../src/components/Common/OptionsList/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAKa,MAAA,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA,CAAA;;;AAGrC,UAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2F7D;AAEW,MAAA,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,CAAA;;;;;;;;;EAS5C;AAEW,MAAA,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,CAAA;;;;;EAK5C;AAEW,MAAA,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,CAAA;;;;;;;;EAQ/C;AAEW,MAAA,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAExC,CAAA;;;;;;AAME,EAAA,EAAA,CAAC,KAAK,KACN,KAAK,CAAC,SAAS;AACf,IAAA,GAAG,CAAA,CAAA;;;AAGF,IAAA,CAAA,CAAA;;;;;"}

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

@@ -0,0 +1,152 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { getAddressContraction } from '@rozoai/intent-common';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { motion } from 'framer-motion';
+import { useAccount } from 'wagmi';
+import { Solana, Ethereum, Optimism, Arbitrum, Base, Polygon } from '../../../assets/chains.js';
+import { USDC } from '../../../assets/coins.js';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import { ROUTES } from '../../../constants/routes.js';
+import { useRozoPay } from '../../../hooks/useRozoPay.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import styled from '../../../styles/styled/index.js';
+import { formatUsd } from '../../../utils/format.js';
+
+/** Shows payment amount. */
+const OrderHeader = ({ minified = false, showEth = false, showSolana = false, showZKP2P = false, }) => {
+    const { paymentState, route } = usePayContext();
+    const { isConnected: isEthConnected, address, connector } = useAccount();
+    const { connected: isSolanaConnected, publicKey, wallet: solanaWallet, } = useWallet();
+    const { senderEnsName } = paymentState;
+    const { order } = useRozoPay();
+    const ethWalletDisplayName = senderEnsName ?? (address ? getAddressContraction(address) : "wallet");
+    const solWalletDisplayName = getAddressContraction(publicKey?.toBase58() ?? "");
+    const orderUsd = order?.destFinalCallTokenAmount.usd;
+    const titleAmountContent = (() => {
+        if (paymentState.isDepositFlow) {
+            return route === ROUTES.SELECT_TOKEN ? (
+            // TODO: make this match `ModalH1` font size for mobile
+            jsx("span", { style: { fontSize: "19px", lineHeight: "22px" }, children: "Your balances" })) : null;
+        }
+        else {
+            return orderUsd != null ? (jsx("span", { children: formatUsd(orderUsd, "nearest") })) : null;
+        }
+    })();
+    const renderIcon = (icon, name, size = 32) => {
+        if (!icon) {
+            return null;
+        }
+        return (jsx(LogoContainer, { "$size": size, "$zIndex": 1, style: { borderRadius: "22.5%" }, children: typeof icon === "string" ? (jsx("img", { src: icon, alt: name || "wallet", style: { maxWidth: "100%", maxHeight: "100%" } })) : (icon) }));
+    };
+    let walletIcon = renderIcon(connector?.icon);
+    let solanaIcon = renderIcon(solanaWallet?.adapter.icon || jsx(Solana, {}), solanaWallet?.adapter.name);
+    if (minified) {
+        if (titleAmountContent != null) {
+            return (jsxs(MinifiedContainer, { children: [jsx(MinifiedTitleAmount, { children: titleAmountContent }), showEth && isEthConnected && (jsx(Fragment, { children: jsxs(SubtitleContainer, { children: [jsx(Subtitle, { children: ethWalletDisplayName }), walletIcon] }) })), showSolana && isSolanaConnected && (jsx(Fragment, { children: jsxs(SubtitleContainer, { children: [jsx(Subtitle, { children: solWalletDisplayName }), solanaIcon] }) })), !showEth && !showSolana && !showZKP2P && (jsx(Fragment, { children: jsx(CoinLogos, { "$size": 32 }) }))] }));
+        }
+        else {
+            return (jsxs(MinifiedContainer, { children: [jsx(CoinLogos, {}), jsx(Subtitle, { children: "1000+ tokens accepted" })] }));
+        }
+    }
+    else {
+        return (jsxs(Fragment, { children: [titleAmountContent && jsx(TitleAmount, { children: titleAmountContent }), jsxs(AnyChainAnyCoinContainer, { children: [jsx(CoinLogos, {}), jsx(Subtitle, { children: "1000+ tokens accepted" })] })] }));
+    }
+};
+function CoinLogos({ $size = 24 }) {
+    const logos = [
+        jsx(Ethereum, {}, "eth"),
+        jsx(USDC, {}, "usdc"),
+        jsx(Optimism, {}, "optimism"),
+        jsx(Arbitrum, {}, "arbitrum"),
+        jsx(Base, {}, "base"),
+        jsx(Polygon, {}, "polygon"),
+        jsx(Solana, {}, "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)) }));
+}
+const TitleAmount = styled(motion.h1) `
+  margin-bottom: 24px;
+  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-bottom: 24px;
+`;
+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;
+`;
+const SubtitleContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+`;
+
+export { OrderHeader };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/OrderHeader/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;;;AAqBA;MACa,WAAW,GAAG,CAAC,EAC1B,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,GAMlB,KAAI;IACH,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,aAAa,EAAE,CAAC;AAChD,IAAA,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,CAAC;AACzE,IAAA,MAAM,EACJ,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EACT,MAAM,EAAE,YAAY,GACrB,GAAG,SAAS,EAAE,CAAC;AAChB,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,YAAY,CAAC;AACvC,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,CAAC;AAE/B,IAAA,MAAM,oBAAoB,GACxB,aAAa,KAAK,OAAO,GAAG,qBAAqB,CAAC,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC;IACzE,MAAM,oBAAoB,GAAG,qBAAqB,CAChD,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,CAC5B,CAAC;AACF,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE,wBAAwB,CAAC,GAAG,CAAC;AAErD,IAAA,MAAM,kBAAkB,GAAG,CAAC,MAAK;AAC/B,QAAA,IAAI,YAAY,CAAC,aAAa,EAAE;AAC9B,YAAA,OAAO,KAAK,KAAK,MAAM,CAAC,YAAY;;AAElC,YAAAA,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,EAE9C,QAAA,EAAA,eAAA,EAAA,CAAA,IACL,IAAI,CAAC;SACV;aAAM;YACL,OAAO,QAAQ,IAAI,IAAI,IACrBA,wBAAO,SAAS,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAQ,CAAA,IAC3C,IAAI,CAAC;SACV;KACF,GAAG,CAAC;IAEL,MAAM,UAAU,GAAG,CACjB,IAA0C,EAC1C,IAAa,EACb,IAAI,GAAG,EAAE,KACa;QACtB,IAAI,CAAC,IAAI,EAAE;AACT,YAAA,OAAO,IAAI,CAAC;SACb;QAED,QACEA,GAAC,CAAA,aAAa,EAAQ,EAAA,OAAA,EAAA,IAAI,EAAW,SAAA,EAAA,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,EAAA,QAAA,EACrE,OAAO,IAAI,KAAK,QAAQ,IACvBA,GACE,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,EACT,GAAG,EAAE,IAAI,IAAI,QAAQ,EACrB,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAC9C,CAAA,KAEF,IAAI,CACL,EACa,CAAA,EAChB;AACJ,KAAC,CAAC;IAEF,IAAI,UAAU,GAAG,UAAU,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IAC7C,IAAI,UAAU,GAAG,UAAU,CACzB,YAAY,EAAE,OAAO,CAAC,IAAI,IAAIA,IAAC,MAAM,EAAA,EAAA,CAAG,EACxC,YAAY,EAAE,OAAO,CAAC,IAAI,CAC3B,CAAC;IAEF,IAAI,QAAQ,EAAE;AACZ,QAAA,IAAI,kBAAkB,IAAI,IAAI,EAAE;AAC9B,YAAA,QACEC,IAAA,CAAC,iBAAiB,EAAA,EAAA,QAAA,EAAA,CAChBD,IAAC,mBAAmB,EAAA,EAAA,QAAA,EAAE,kBAAkB,EAAA,CAAuB,EAC9D,OAAO,IAAI,cAAc,KACxBA,GAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EACED,IAAC,CAAA,iBAAiB,EAChB,EAAA,QAAA,EAAA,CAAAD,GAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAE,oBAAoB,EAAY,CAAA,EAC1C,UAAU,CAAA,EAAA,CACO,GACnB,CACJ,EACA,UAAU,IAAI,iBAAiB,KAC9BA,GACE,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAAD,IAAA,CAAC,iBAAiB,EAAA,EAAA,QAAA,EAAA,CAChBD,GAAC,CAAA,QAAQ,cAAE,oBAAoB,EAAA,CAAY,EAC1C,UAAU,CACO,EAAA,CAAA,EAAA,CACnB,CACJ,EACA,CAAC,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,SAAS,KACpCA,GACE,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAAF,GAAA,CAAC,SAAS,EAAA,EAAA,OAAA,EAAQ,EAAE,EAAI,CAAA,EAAA,CACvB,CACJ,CAAA,EAAA,CACiB,EACpB;SACH;aAAM;AACL,YAAA,QACEC,IAAA,CAAC,iBAAiB,EAAA,EAAA,QAAA,EAAA,CAChBD,GAAC,CAAA,SAAS,EAAG,EAAA,CAAA,EACbA,GAAC,CAAA,QAAQ,EAAiC,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAA,CAAA,EAAA,CACxB,EACpB;SACH;KACF;SAAM;QACL,QACEC,4BACG,kBAAkB,IAAID,IAAC,WAAW,EAAA,EAAA,QAAA,EAAE,kBAAkB,EAAA,CAAe,EACtEC,IAAA,CAAC,wBAAwB,EACvB,EAAA,QAAA,EAAA,CAAAD,GAAA,CAAC,SAAS,EAAA,EAAA,CAAG,EACbA,GAAA,CAAC,QAAQ,EAAiC,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAA,CAAA,EAAA,CACjB,CAC1B,EAAA,CAAA,EACH;KACH;AACH,EAAE;AAEF,SAAS,SAAS,CAAC,EAAE,KAAK,GAAG,EAAE,EAAsB,EAAA;AACnD,IAAA,MAAM,KAAK,GAAG;QACZA,GAAC,CAAA,QAAQ,EAAK,EAAA,EAAA,KAAK,CAAG;QACtBA,GAAC,CAAA,IAAI,EAAK,EAAA,EAAA,MAAM,CAAG;QACnBA,GAAC,CAAA,QAAQ,EAAK,EAAA,EAAA,UAAU,CAAG;QAC3BA,GAAC,CAAA,QAAQ,EAAK,EAAA,EAAA,UAAU,CAAG;QAC3BA,GAAC,CAAA,IAAI,EAAK,EAAA,EAAA,MAAM,CAAG;QACnBA,GAAC,CAAA,OAAO,EAAK,EAAA,EAAA,SAAS,CAAG;QACzBA,GAAC,CAAA,MAAM,EAAK,EAAA,EAAA,QAAQ,CAAG;KACxB,CAAC;AAEF,IAAA,MAAM,SAAS,GAAG,CAAC,OAA2B,EAAE,KAAa,MAC3DA,GAAC,CAAA,aAAa,EAEC,EAAA,aAAA,EAAA,KAAK,KAAK,CAAC,GAAG,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,EAClC,SAAA,EAAA,KAAK,CAAC,MAAM,GAAG,KAAK,EACtB,OAAA,EAAA,KAAK,EACZ,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,EAAA,QAAA,EAE9D,OAAO,EAAA,EANH,KAAK,CAOI,CACjB,CAAC;IAEF,QACEA,GAAC,CAAA,KAAK,EAAE,EAAA,QAAA,EAAA,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,KAAK,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EAAS,CAAA,EACzE;AACJ,CAAC;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAGnC,CAAA;;;;;;WAMS,CAAC,KAAK,KAAI;IACjB,IAAI,KAAK,CAAC,MAAM;AAAE,QAAA,OAAO,6BAA6B,CAAC;IACvD,IAAI,KAAK,CAAC,MAAM;AAAE,QAAA,OAAO,4BAA4B,CAAC;AACtD,IAAA,OAAO,sBAAsB,CAAC;AAChC,CAAC,CAAA;AACoC,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;;;;;;;CAO9D,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;CAKlC,CAAC;AAEF,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;;CAS7C,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;CAM3C,CAAC;AAEF,MAAM,wBAAwB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;CAQlD,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAItC,CAAA;;;;;;;iBAOe,CAAC,KAAK,KAAK,KAAK,CAAC,WAAW,IAAI,CAAC,CAAA;aACrC,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,IAAI,CAAC,CAAA;AAC/B,SAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;AACrB,UAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;;;;;;;CAOjC,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;CAI/B,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;CAKnC;;;;"}

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

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import styled from '../../../styles/styled/index.js';
+import { ModalBody } from '../Modal/styles.js';
+
+const PaymentBreakdown = ({ paymentOption }) => {
+    const subtotalUsd = paymentOption.required.usd;
+    const feesUsd = paymentOption.fees.usd;
+    const totalUsd = subtotalUsd + feesUsd;
+    return (jsxs(FeesContainer, { children: [feesUsd > 0 && (jsxs(FeeRow, { children: [jsx(ModalBody, { children: "Subtotal" }), jsxs(ModalBody, { children: ["$", subtotalUsd.toFixed(2)] })] })), jsxs(FeeRow, { children: [jsx(ModalBody, { children: "Fees" }), feesUsd === 0 ? (jsx(Badge, { children: "Free" })) : (jsxs(ModalBody, { children: ["$", feesUsd.toFixed(2)] }))] }), jsxs(FeeRow, { style: { marginTop: 8 }, children: [jsx(ModalBody, { style: { fontWeight: 600 }, children: "Total" }), jsxs(ModalBody, { style: { fontWeight: 600 }, children: ["$", totalUsd.toFixed(2)] })] })] }));
+};
+const FeesContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 4px;
+  margin: 16px 0;
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    & ${ModalBody} {
+      margin: 0 !important;
+      max-width: 100% !important;
+      text-align: left !important;
+    }
+  }
+`;
+const FeeRow = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 50%;
+`;
+const Badge = styled.span `
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: var(--ck-primary-button-border-radius);
+  font-size: 14px;
+  font-weight: 400;
+  background: var(
+    --ck-secondary-button-background,
+    var(--ck-body-background-secondary)
+  );
+  color: var(--ck-body-color-muted);
+`;
+
+export { PaymentBreakdown as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/PaymentBreakdown/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAOA,MAAM,gBAAgB,GAEjB,CAAC,EAAE,aAAa,EAAE,KAAI;AACzB,IAAA,MAAM,WAAW,GAAG,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC;AAC/C,IAAA,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC;AACvC,IAAA,MAAM,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAC;IAEvC,QACEA,IAAC,CAAA,aAAa,EACX,EAAA,QAAA,EAAA,CAAA,OAAO,GAAG,CAAC,KACVA,IAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,CACLC,IAAC,SAAS,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,CAAqB,EAC/BD,IAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,CAAA,GAAA,EAAG,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,EAAA,CAAa,IACzC,CACV,EACDA,IAAC,CAAA,MAAM,EACL,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,SAAS,EAAiB,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,EAC1B,OAAO,KAAK,CAAC,IACZA,GAAC,CAAA,KAAK,EAAa,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,KAEnBD,IAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EAAA,CAAA,GAAA,EAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,EAAA,CAAa,CAC7C,CACM,EAAA,CAAA,EACTA,IAAC,CAAA,MAAM,EAAC,EAAA,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAA,QAAA,EAAA,CAC7BC,IAAC,SAAS,EAAA,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,EAAmB,QAAA,EAAA,OAAA,EAAA,CAAA,EACxDD,IAAC,CAAA,SAAS,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,EACjC,QAAA,EAAA,CAAA,GAAA,EAAA,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CACX,EAAA,CAAA,CAAA,EAAA,CACL,CACK,EAAA,CAAA,EAChB;AACJ,EAAE;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;;;;AAQO,qCAAA,EAAA,YAAY,CAAC,WAAW,CAAA;QACvD,SAAS,CAAA;;;;;;CAMhB,CAAC;AACF,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;CAKxB,CAAC;AACF,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAA,CAAA;;;;;;;;;;;CAWxB;;;;"}

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: "__ROZOPAY__",
+        ...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-rozopay", `${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":["../../../../../src/components/Common/Portal/index.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAIA,MAAM,MAAM,GAAG,CAAC,KAAU,KAAI;AAC5B,IAAA,KAAK,GAAG;AACN,QAAA,QAAQ,EAAE,aAAa;AACvB,QAAA,GAAG,KAAK;KACT,CAAC;AAEF,IAAA,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;AAErC,IAAA,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEvD,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,gBAAgB,GAAG,GAAG,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC1D,GAAG,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;AAEvD,QAAA,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;YAChB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,YAAA,GAAG,CAAC,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;YACjC,GAAG,CAAC,YAAY,CAAC,cAAc,EAAE,CAAG,EAAA,WAAW,CAAC,OAAO,CAAE,CAAA,CAAC,CAAC;AAC3D,YAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,YAAA,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC;SACnB;QAED,UAAU,CAAC,IAAI,CAAC,CAAC;AACnB,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,IAAI,CAAC,GAAG,CAAC,OAAO;AAAE,QAAA,OAAO,IAAI,CAAC;AAC9B,IAAA,OAAO,OAAO,GAAG,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;AAC9D;;;;"}

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

@@ -0,0 +1,77 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { useState, useEffect } from 'react';
+import { keyframes } from 'styled-components';
+import CrepeIcon from '../../../assets/crepe.js';
+import styled from '../../../styles/styled/index.js';
+import { rozoPayVersion } from '../../../utils/exports.js';
+
+const PoweredByFooter = ({ supportUrl } = {}) => {
+    const [supportVisible, setSupportVisible] = useState(false);
+    useEffect(() => {
+        if (supportUrl == null)
+            return;
+        // Show the support link after delay
+        const timer = setTimeout(() => {
+            setSupportVisible(true);
+        }, 2500);
+        return () => clearTimeout(timer);
+    }, [supportUrl]);
+    return (jsx(Container, { children: jsxs(TextButton, { onClick: () => {
+                window.open(globalThis.__SUPPORTURL__ || `https://pay.daimo.com?ref=sdk-v${rozoPayVersion}`, "_blank");
+            }, className: supportVisible ? "support" : "", children: [!supportVisible && jsx(CrepeIcon, {}), jsx("span", { children: supportVisible ? (jsxs(Fragment, { children: ["Need help? ", jsx(Underline, { children: "Contact support" })] })) : (jsxs(Fragment, { children: ["Powered by ", globalThis.__POWEREDBY__ || "Rozo Pay"] })) })] }) }));
+};
+const Container = styled(motion.div) `
+  text-align: center;
+  margin-top: 16px;
+  margin-bottom: -4px;
+`;
+const fadeIn = keyframes `
+0%{ opacity:0; }
+100%{ opacity:1; }
+`;
+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);
+  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;
+  }
+
+  &.support span {
+    animation: ${fadeIn} 300ms ease both;
+  }
+`;
+const Underline = styled(motion.span) `
+  text-underline-offset: 2px;
+  text-decoration: underline;
+`;
+
+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":["../../../../../src/components/Common/PoweredByFooter/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;AAOM,MAAA,eAAe,GAAG,CAAC,EAAE,UAAU,EAA8B,GAAA,EAAE,KAAI;IACvE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,SAAS,CAAC,MAAK;QACb,IAAI,UAAU,IAAI,IAAI;YAAE,OAAO;;AAE/B,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,MAAK;YAC5B,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB,EAAE,IAAI,CAAC,CAAC;AACT,QAAA,OAAO,MAAM,YAAY,CAAC,KAAK,CAAC,CAAC;AACnC,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,QACEA,GAAC,CAAA,SAAS,EACR,EAAA,QAAA,EAAAC,IAAA,CAAC,UAAU,EACT,EAAA,OAAO,EAAE,MAAK;AACZ,gBAAA,MAAM,CAAC,IAAI,CACT,UAAU,CAAC,cAAc,IAAI,CAAA,+BAAA,EAAkC,cAAc,CAAA,CAAE,EAC/E,QAAQ,CACT,CAAC;aACH,EACD,SAAS,EAAE,cAAc,GAAG,SAAS,GAAG,EAAE,EAEzC,QAAA,EAAA,CAAA,CAAC,cAAc,IAAID,GAAA,CAAC,SAAS,EAAG,EAAA,CAAA,EACjCA,GACG,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,cAAc,IACbC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAA,aAAA,EACaF,IAAC,SAAS,EAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,CAA4B,IAChD,KAEHC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAA,aAAA,EAAc,UAAU,CAAC,aAAa,IAAI,UAAU,CAAA,EAAA,CAAI,CACzD,EACI,CAAA,CAAA,EAAA,CACI,EACH,CAAA,EACZ;AACJ,EAAE;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;CAInC,CAAC;AAEF,MAAM,MAAM,GAAG,SAAS,CAAA,CAAA;;;CAGvB,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAmCvB,MAAM,CAAA;;CAEtB,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,CAAA;;;CAGpC;;;;"}

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

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { isMobile } from '../../../utils/index.js';
+import defaultTheme from '../../../constants/defaultTheme.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, hideBottomLine = false, totalItems, }) => {
+    const { log } = usePayContext();
+    const ref = useRef(null);
+    const moreRef = useRef(null);
+    const isMobileFormat = isMobile() || window?.innerWidth < defaultTheme.mobileWidth;
+    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]); // eslint-disable-line react-hooks/exhaustive-deps
+    return (jsxs(ScrollContainer, { children: [jsx(ScrollAreaContainer, { ref: ref, "$mobile": isMobileFormat, "$height": height, "$backgroundColor": backgroundColor, "$mobileDirection": mobileDirection, "$hideBottomLine": hideBottomLine, "$totalItems": totalItems, 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":["../../../../../src/components/Common/ScrollArea/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}