@rozoai/intent-pay 0.0.7 → 0.0.9

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

@@ -0,0 +1,173 @@
+import { keyframes, css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+const ScrollContainer = styled.div `
+  position: relative;
+`;
+const fadeIn = keyframes `
+0%{ opacity:0; }
+100%{ opacity:1; }
+`;
+const MoreIndicator = styled.div `
+  z-index: 9;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0.75rem;
+  display: flex;
+  justify-content: center;
+
+  transition: opacity 300ms ease;
+
+  span {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    padding: 0.3075rem 0.9375rem 0.375rem;
+    border-radius: 6rem;
+    background: var(--ck-tooltip-background);
+    color: var(--ck-tooltip-color);
+    font-weight: 500;
+    font-size: 0.8125rem;
+    letter-spacing: -0.01rem;
+    box-shadow: var(--ck-tooltip-shadow);
+    animation: ${fadeIn} 300ms ease 1000ms both;
+
+    transition: transform 100ms ease;
+
+    &:hover {
+      transform: scale(1.02);
+    }
+    &:active {
+      transform: scale(0.98);
+    }
+    svg {
+      display: block;
+      transform: translateX(-0.1875rem);
+    }
+  }
+
+  &.hide {
+    opacity: 0;
+    pointer-events: none;
+  }
+`;
+const ScrollAreaContainer = styled.div `
+  --bg: ${({ $backgroundColor }) => $backgroundColor || "var(--ck-body-background)"};
+  --fade-height-top: 1px;
+  --fade-height-bottom: ${(props) => props.$hideBottomLine && props.$totalItems > 2 ? "32px" : "1px"};
+  position: relative;
+  z-index: 1;
+
+  ${({ $mobile, $height, $mobileDirection, $hideBottomLine }) => $mobile && $mobileDirection === "horizontal"
+    ? css `
+          overflow-x: scroll;
+          margin: 0 -24px;
+          padding: 0 24px;
+
+          &:before,
+          &:after {
+            pointer-events: none;
+            z-index: 10;
+            content: "";
+            display: block;
+            position: sticky;
+            top: 0;
+            bottom: 0;
+            width: var(--fade-height-bottom);
+            background: var(
+              --ck-body-divider-secondary,
+              var(--ck-body-divider)
+            );
+            box-shadow: var(--ck-body-divider-box-shadow);
+            transition: opacity 300ms ease;
+          }
+          &:before {
+            left: 0;
+          }
+          &:after {
+            right: 0;
+          }
+
+          &.scroll-start {
+            &:before {
+              opacity: 0;
+            }
+          }
+
+          &.scroll-end {
+            &:after {
+              opacity: 0;
+            }
+          }
+        `
+    : css `
+          max-height: ${$height ? `${$height}px` : "310px"};
+          overflow-y: scroll;
+          padding: 0 10px;
+          margin: calc(var(--fade-height-top) * -1) -16px 0 -10px;
+
+          &:before,
+          &:after {
+            pointer-events: none;
+            z-index: 10;
+            content: "";
+            display: block;
+            position: sticky;
+            left: 0;
+            right: 0;
+          }
+          &:before {
+            top: 0;
+            height: var(--fade-height-top);
+            background: var(
+              --ck-body-divider-secondary,
+              var(--ck-body-divider)
+            );
+            box-shadow: var(--ck-body-divider-box-shadow);
+          }
+          &:after {
+            bottom: 0;
+            height: var(--fade-height-bottom);
+            background: ${$hideBottomLine
+        ? "linear-gradient(to bottom, transparent, var(--bg))"
+        : "var(--ck-body-divider-secondary, var(--ck-body-divider))"};
+            box-shadow: none;
+          }
+
+          &.scroll-start {
+            &:before {
+              opacity: 0;
+            }
+          }
+
+          &.scroll-end {
+            &:after {
+              opacity: 0;
+            }
+          }
+        `}
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0);
+    border-radius: 100px;
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    background: var(--ck-body-color-muted);
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--ck-body-color-muted-hover);
+  }
+`;
+
+export { MoreIndicator, ScrollAreaContainer, ScrollContainer };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/ScrollArea/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAGa,MAAA,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;EAEvC;AACF,MAAM,MAAM,GAAG,SAAS,CAAA,CAAA;;;CAGvB,CAAC;AAEW,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;iBAyBtB,MAAM,CAAA;;;;;;;;;;;;;;;;;;;;EAoBrB;AAEW,MAAA,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAM3C,CAAA;UACQ,CAAC,EAAE,gBAAgB,EAAE,KAC3B,gBAAgB,IAAI,2BAA2B,CAAA;;0BAEzB,CAAC,KAAK,KAC5B,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,WAAW,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,CAAA;;;;AAI/D,EAAA,EAAA,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,KACxD,OAAO,IAAI,gBAAgB,KAAK,YAAY;MACxC,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCF,QAAA,CAAA;MACD,GAAG,CAAA,CAAA;wBACa,OAAO,GAAG,CAAA,EAAG,OAAO,CAAI,EAAA,CAAA,GAAG,OAAO,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA2BhC,eAAe;AAC3B,UAAE,oDAAoD;AACtD,UAAE,0DAA0D,CAAA;;;;;;;;;;;;;;;AAejE,QAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,85 @@
+import { jsx } from 'react/jsx-runtime';
+import { ExternalPaymentOptions } from '@rozoai/intent-common';
+import { useAccount } from 'wagmi';
+import { Solana, Bitcoin, Tron } from '../../../assets/chains.js';
+import { Rainbow, MetaMask, Coinbase, Rabby } from '../../../assets/logos.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 { OptionsList } from '../OptionsList/index.js';
+
+const OptionsContainer = styled.div `
+  width: 100%;
+  margin-top: 1rem;
+`;
+function SelectAnotherMethodButton() {
+    const { paymentState, setRoute } = usePayContext();
+    const { externalPaymentOptions, showSolanaPaymentMethod } = paymentState;
+    const { connector } = useAccount();
+    const { order } = useRozoPay();
+    const paymentOptions = order?.metadata.payer?.paymentOptions;
+    const allPaymentOptions = Array.from(externalPaymentOptions.options.values()).flat();
+    // Deposit address options, e.g. Bitcoin, Tron, Zcash, etc.
+    // Include by default if paymentOptions not provided
+    const includeDepositAddressOption = paymentOptions == null ||
+        paymentOptions.includes(ExternalPaymentOptions.ExternalChains);
+    const selectMethodOption = {
+        id: "select-method",
+        title: `Pay with another method`,
+        icons: getBestPaymentMethodIcons(),
+        onClick: () => {
+            setRoute(ROUTES.SELECT_METHOD);
+        },
+    };
+    const selectWalletOption = {
+        id: "select-wallet",
+        title: "Pay with another wallet",
+        icons: getBestUnconnectedWalletIcons(connector),
+        onClick: () => {
+            setRoute(ROUTES.SELECT_METHOD);
+        },
+    };
+    function getBestUnconnectedWalletIcons(connector) {
+        const icons = [];
+        const strippedId = connector?.id.toLowerCase(); // some connector ids can have weird casing and or suffixes and prefixes
+        const [isMetaMask, isRainbow, isCoinbase] = [
+            strippedId?.includes("metamask"),
+            strippedId?.includes("rainbow"),
+            strippedId?.includes("coinbase"),
+        ];
+        if (!isRainbow)
+            icons.push(jsx(Rainbow, {}));
+        if (!isMetaMask)
+            icons.push(jsx(MetaMask, {}));
+        if (!isCoinbase)
+            icons.push(jsx(Coinbase, {}));
+        if (icons.length < 3)
+            icons.push(jsx(Rabby, {}));
+        return icons;
+    }
+    function getBestPaymentMethodIcons() {
+        let icons = (externalPaymentOptions.options.get("external") ?? [])
+            .filter((option) => option.id !== ExternalPaymentOptions.Rozo)
+            .map((option) => (jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: typeof option.logoURI === "string" ? (jsx("img", { src: option.logoURI, alt: "" })) : (option.logoURI) }, option.id)));
+        if (icons.length < 3) {
+            const additionalIcons = [];
+            if (showSolanaPaymentMethod)
+                additionalIcons.push(jsx(Solana, {}));
+            if (includeDepositAddressOption && additionalIcons.length < 3)
+                additionalIcons.push(jsx(Bitcoin, {}));
+            if (includeDepositAddressOption && additionalIcons.length < 3)
+                additionalIcons.push(jsx(Tron, {}));
+            if (additionalIcons.length < 3)
+                additionalIcons.push(...getBestUnconnectedWalletIcons(connector));
+            icons = [...icons, ...additionalIcons.slice(0, 3 - icons.length)];
+        }
+        return icons;
+    }
+    return (jsx(OptionsContainer, { children: jsx(OptionsList, { options: allPaymentOptions.length > 0
+                ? [selectMethodOption]
+                : [selectWalletOption] }) }));
+}
+
+export { SelectAnotherMethodButton as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { SpinnerContainer } from './styles.js';
+
+const transition = {
+    duration: 0.4,
+    ease: [0.175, 0.885, 0.32, 0.98],
+};
+const Spinner = () => (jsx(SpinnerContainer, { initial: { opacity: 0, rotate: 180 }, animate: {
+        opacity: 1,
+        rotate: 0,
+    }, exit: {
+        position: "absolute",
+        opacity: 0,
+        rotate: -180,
+        transition: {
+            ...transition,
+        },
+    }, transition: {
+        ...transition,
+        delay: 0.2,
+    }, children: jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("circle", { cx: "9", cy: "9", r: "7", stroke: "currentColor", strokeOpacity: "0.1", strokeWidth: "2.5" }), jsx("path", { d: "M16 9C16 5.13401 12.866 2 9 2", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })] }) }));
+
+export { Spinner };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/Spinner/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;AAEA,MAAM,UAAU,GAAG;AACjB,IAAA,QAAQ,EAAE,GAAG;IACb,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC;CACjC,CAAC;AAEW,MAAA,OAAO,GAAG,OACrBA,GAAC,CAAA,gBAAgB,EACf,EAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EACpC,OAAO,EAAE;AACP,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,MAAM,EAAE,CAAC;AACV,KAAA,EACD,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC,GAAG;AACZ,QAAA,UAAU,EAAE;AACV,YAAA,GAAG,UAAU;AACd,SAAA;AACF,KAAA,EACD,UAAU,EAAE;AACV,QAAA,GAAG,UAAU;AACb,QAAA,KAAK,EAAE,GAAG;AACX,KAAA,EAAA,QAAA,EAEDC,IACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAAA,QAAA,EAAA,CAElCD,gBACE,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,EACL,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,KAAK,EACnB,WAAW,EAAC,KAAK,EAAA,CACjB,EACFA,GAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,+BAA+B,EACjC,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EAAA,CACrB,CACE,EAAA,CAAA,EAAA,CACW;;;;"}

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

@@ -0,0 +1,22 @@
+import { motion } from 'framer-motion';
+import { keyframes } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+const Spin = keyframes `
+  0%{ transform: rotate(0deg); }
+  100%{ transform: rotate(360deg); }
+`;
+const SpinnerContainer = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ${Spin} 1s linear infinite;
+  svg {
+    display: block;
+    position: relative;
+    animation: ${Spin} 1s ease-in-out infinite;
+  }
+`;
+
+export { SpinnerContainer };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/Spinner/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAIA,MAAM,IAAI,GAAG,SAAS,CAAA,CAAA;;;CAGrB,CAAC;AACW,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;eAInC,IAAI,CAAA;;;;iBAIF,IAAI,CAAA;;;;;;"}

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

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { SwitchIcon } from '../../../assets/icons.js';
+import styled from '../../../styles/styled/index.js';
+
+const Container = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  cursor: pointer;
+  width: fit-content;
+  background: transparent;
+`;
+const IconWrapper = styled.div `
+  opacity: ${({ $isFlipped }) => ($isFlipped ? 1 : 1)};
+  transform: scaleY(${({ $isFlipped }) => ($isFlipped ? -1 : 1)});
+  transition: all 0.2s ease-in-out;
+
+  &.fade {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+`;
+const SwitchButton = ({ onClick, children }) => {
+    const [isFlipped, setIsFlipped] = useState(false);
+    const [isFading, setIsFading] = useState(false);
+    const handleClick = () => {
+        setIsFading(true);
+        setTimeout(() => {
+            setIsFlipped(!isFlipped);
+            setIsFading(false);
+        }, 150); // Match the transition duration
+        onClick();
+    };
+    return (jsxs(Container, { onClick: handleClick, children: [jsx(IconWrapper, { "$isFlipped": isFlipped, className: isFading ? "fade" : "", children: jsx(SwitchIcon, {}) }), children] }));
+};
+
+export { SwitchButton as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/SwitchButton/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","Icon"],"mappings":";;;;;AAIA,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAA,CAAA;;;;;;;;CAQ9B,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAyB,CAAA;AAC1C,WAAA,EAAA,CAAC,EAAE,UAAU,EAAE,MAAM,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;AAC/B,oBAAA,EAAA,CAAC,EAAE,UAAU,EAAE,MAAM,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;;;;;;;CAO9D,CAAC;AAEI,MAAA,YAAY,GAGb,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;IAC7B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,WAAW,GAAG,MAAK;QACvB,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,UAAU,CAAC,MAAK;AACd,YAAA,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;YACzB,WAAW,CAAC,KAAK,CAAC,CAAC;AACrB,SAAC,EAAE,GAAG,CAAC,CAAC;AACR,QAAA,OAAO,EAAE,CAAC;AACZ,KAAC,CAAC;AAEF,IAAA,QACEA,IAAA,CAAC,SAAS,EAAA,EAAC,OAAO,EAAE,WAAW,EAC7B,QAAA,EAAA,CAAAC,GAAA,CAAC,WAAW,EAAA,EAAA,YAAA,EAAa,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,MAAM,GAAG,EAAE,EAAA,QAAA,EACnEA,GAAC,CAAAC,UAAI,KAAG,EACI,CAAA,EACb,QAAQ,CAAA,EAAA,CACC,EACZ;AACJ;;;;"}

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

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { Container } from './styles.js';
+export { ThemeContainer } from './styles.js';
+import useMeasure from 'react-use-measure';
+
+const ThemedButton = ({ children, variant = "primary", autoSize = true, duration = 0.3, style, }) => {
+    const [contentRef, bounds] = useMeasure();
+    return (jsx(Container, { className: variant, initial: false, animate: autoSize
+            ? {
+                width: bounds.width > 10 ? bounds.width : "auto",
+            }
+            : undefined, transition: {
+            duration: duration,
+            ease: [0.25, 1, 0.5, 1],
+            delay: 0.01,
+        }, style: style, children: jsx("div", { ref: contentRef, style: {
+                whiteSpace: "nowrap",
+                width: "fit-content",
+                position: "relative",
+                padding: "0 12px",
+            }, children: children }) }));
+};
+
+export { ThemedButton as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/ThemedButton/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAoBM,MAAA,YAAY,GAAsC,CAAC,EACvD,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,GAAG,EACd,KAAK,GACN,KAAI;IACH,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;AAC1C,IAAA,QACEA,GAAA,CAAC,SAAS,EAAA,EACR,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,KAAK,EACd,OAAO,EACL,QAAQ;AACN,cAAE;AACE,gBAAA,KAAK,EAAE,MAAM,CAAC,KAAK,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,GAAG,MAAM;AACjD,aAAA;AACH,cAAE,SAAS,EAEf,UAAU,EAAE;AACV,YAAA,QAAQ,EAAE,QAAQ;YAClB,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;AACvB,YAAA,KAAK,EAAE,IAAI;SACZ,EACD,KAAK,EAAE,KAAK,EAEZ,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,UAAU,EACf,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,KAAK,EAAE,aAAa;AACpB,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,OAAO,EAAE,QAAQ;AAClB,aAAA,EAAA,QAAA,EAEA,QAAQ,EAAA,CACL,EACI,CAAA,EACZ;AACJ;;;;"}

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

@@ -0,0 +1,152 @@
+import { motion } from 'framer-motion';
+import styled from '../../../styles/styled/index.js';
+
+const Container = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  height: 40px;
+  padding: 0;
+  line-height: 0;
+  letter-spacing: -0.2px;
+  font-size: var(--ck-connectbutton-font-size, 16px);
+  font-weight: var(--ck-connectbutton-font-weight, 500);
+  text-align: center;
+  transition: 100ms ease;
+  transition-property: color, background, box-shadow, border-radius;
+
+  color: var(--color);
+  background: var(--background);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+
+  &.primary {
+    --color: var(--ck-connectbutton-color);
+    --background: var(--ck-connectbutton-background);
+    --box-shadow: var(--ck-connectbutton-box-shadow);
+    --border-radius: var(--ck-connectbutton-border-radius, 12px);
+
+    --hover-color: var(--ck-connectbutton-hover-color, var(--color));
+    --hover-background: var(
+      --ck-connectbutton-hover-background,
+      var(--background)
+    );
+    --hover-box-shadow: var(
+      --ck-connectbutton-hover-box-shadow,
+      var(--box-shadow)
+    );
+    --hover-border-radius: var(
+      --ck-connectbutton-hover-border-radius,
+      var(--border-radius)
+    );
+
+    --active-color: var(--ck-connectbutton-active-color, var(--hover-color));
+    --active-background: var(
+      --ck-connectbutton-active-background,
+      var(--hover-background)
+    );
+    --active-box-shadow: var(
+      --ck-connectbutton-active-box-shadow,
+      var(--hover-box-shadow)
+    );
+    --active-border-radius: var(
+      --ck-connectbutton-active-border-radius,
+      var(--hover-border-radius)
+    );
+  }
+  &.secondary {
+    --color: var(--ck-connectbutton-balance-color);
+    --background: var(--ck-connectbutton-balance-background);
+    --box-shadow: var(--ck-connectbutton-balance-box-shadow);
+    --border-radius: var(
+      --ck-connectbutton-balance-border-radius,
+      var(--ck-connectbutton-border-radius, 12px)
+    );
+
+    --hover-color: var(--ck-connectbutton-balance-hover-color, var(--color));
+    --hover-background: var(
+      --ck-connectbutton-balance-hover-background,
+      var(--background)
+    );
+    --hover-box-shadow: var(
+      --ck-connectbutton-balance-hover-box-shadow,
+      var(--box-shadow)
+    );
+    --hover-border-radius: var(
+      --ck-connectbutton-balance-hover-border-radius,
+      var(--border-radius)
+    );
+
+    --active-color: var(
+      --ck-connectbutton-balance-active-color,
+      var(--hover-color)
+    );
+    --active-background: var(
+      --ck-connectbutton-balance-active-background,
+      var(--hover-background)
+    );
+    --active-box-shadow: var(
+      --ck-connectbutton-balance-active-box-shadow,
+      var(--hover-box-shadow)
+    );
+    --active-border-radius: var(
+      --ck-connectbutton-balance-active-border-radius,
+      var(--hover-border-radius)
+    );
+  }
+`;
+const ThemeContainer = styled.button `
+  all: initial;
+  appearance: none;
+  user-select: none;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border-radius: var(--ck-border-radius);
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.3;
+  }
+
+  display: flex;
+  flex-wrap: nowrap;
+  background: none;
+  cursor: pointer;
+  * {
+    cursor: pointer;
+  }
+  &:hover {
+    ${Container} {
+      color: var(--hover-color, var(--color));
+      background: var(--hover-background, var(--background));
+      box-shadow: var(--hover-box-shadow, var(--box-shadow));
+      border-radius: var(--hover-border-radius, var(--border-radius));
+    }
+  }
+  &:active {
+    ${Container} {
+      color: var(--active-color, var(--hover-color, var(--color)));
+      background: var(
+        --active-background,
+        var(--hover-background, var(--background))
+      );
+      box-shadow: var(
+        --active-box-shadow,
+        var(--hover-box-shadow, var(--box-shadow))
+      );
+      border-radius: var(
+        --active-border-radius,
+        var(--hover-border-radius, var(--border-radius))
+      );
+    }
+  }
+  &:focus-visible {
+    outline: 2px solid var(--ck-family-brand);
+  }
+`;
+
+export { Container, ThemeContainer };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/ThemedButton/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAGa,MAAA,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAEzC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8FA;AAEW,MAAA,cAAc,GAAG,MAAM,CAAC,MAAM,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;MAuBrC,SAAS,CAAA;;;;;;;;MAQT,SAAS,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { chainToLogo } from '../../../assets/chains.js';
+import styled from '../../../styles/styled/index.js';
+
+const TokenChainLogo = ({ token, size = 32, offset = 0, }) => {
+    const chainLogoSize = Math.round((size * 30) / 64);
+    return (jsxs(TokenChainContainer, { "$size": size, children: [jsx(TokenImage, { src: token.logoURI, alt: token.symbol, "$size": size }), jsx(ChainContainer, { "$size": chainLogoSize, "$offset": offset, children: chainToLogo[token.chainId] })] }));
+};
+const TokenChainContainer = styled(motion.div) `
+  position: relative;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const TokenImage = styled.img `
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  border-radius: 50%;
+  object-fit: cover;
+  transition: transform 0.2s ease;
+
+  ${(props) => props.$showBorder &&
+    `
+    border: 2px solid var(--ck-body-background, #fff);
+  `}
+`;
+const ChainContainer = styled(motion.div) `
+  position: absolute;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  min-width: ${(props) => props.$size}px;
+  min-height: ${(props) => props.$size}px;
+  bottom: 0px;
+  right: ${(props) => props.$offset}px;
+  border-radius: 50%;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  background: ${(props) => props.$showBorder ? "var(--ck-body-background, #fff)" : "transparent"};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+`;
+
+export { TokenChainLogo as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/TokenChainLogo/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKA,MAAM,cAAc,GAAG,CAAC,EACtB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,MAAM,GAAG,CAAC,GAKX,KAAI;AACH,IAAA,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;AAEnD,IAAA,QACEA,IAAC,CAAA,mBAAmB,aAAQ,IAAI,EAAA,QAAA,EAAA,CAC9BC,IAAC,UAAU,EAAA,EAAC,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,EAAS,OAAA,EAAA,IAAI,GAAI,EAClEA,GAAA,CAAC,cAAc,EAAQ,EAAA,OAAA,EAAA,aAAa,aAAW,MAAM,EAAA,QAAA,EAClD,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,EACZ,CAAA,CAAA,EAAA,CACG,EACtB;AACJ,EAAE;AAEF,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAoB,CAAA;;AAEvD,SAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;AACrB,UAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAyC,CAAA;AAC3D,SAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;AACrB,UAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;;;;;AAK9B,EAAA,EAAA,CAAC,KAAK,KACN,KAAK,CAAC,WAAW;AACjB,IAAA,CAAA;;AAED,EAAA,CAAA,CAAA;CACF,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAIvC,CAAA;;AAES,SAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;AACrB,UAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;AACnB,aAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;AACrB,cAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;;AAE3B,SAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAA;;;;AAInB,cAAA,EAAA,CAAC,KAAK,KAClB,KAAK,CAAC,WAAW,GAAG,iCAAiC,GAAG,aAAa,CAAA;;;;;;;;;;;;CAYxE;;;;"}