@ape.swap/bonds-sdk 6.2.11 → 6.2.13

package/dist/components/ConnectoToVmBanners/ConnectToAptosBanner.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import { openAptosWalletConnector } from '../../config/constants/walletConnectors.js';
 import Flex from '../uikit-sdk/Flex/index.js';
@@ -14,36 +14,7 @@ import APTOS from '../uikit-sdk/Svg/tokens/APTOS.js';
 function ConnectToAptosBanner() {
     const config = useSDKConfig();
     const handleConnect = config?.openWalletConnectors?.aptos ? openAptosWalletConnector : undefined;
-    return (jsxs(Flex, { sx: {
-            width: '100%',
-            height: '75px',
-            background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)',
-            p: '10px',
-            borderRadius: '10px',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            border: 'none',
-            cursor: 'pointer',
-        }, children: [jsxs(Flex, { sx: { width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }, children: [jsx(Flex, { sx: { minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }, children: jsx(APTOS, { width: "30" }) }), jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsxs(Text, { sx: { fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }, children: ["Aptos", jsx(Text, { sx: {
-                                            fontSize: '10px',
-                                            fontWeight: '600',
-                                            lineHeight: '8px',
-                                            color: '#FAFAFA',
-                                            padding: '4px 6px',
-                                            background: 'rgba(250, 250, 250, 0.3)',
-                                            borderRadius: '4px',
-                                            marginLeft: '6px',
-                                            marginRight: '6px',
-                                        }, children: "NEW" })] }), jsx(Text, { sx: { fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }, children: "Connect your wallet to view your Aptos Bonds!" })] })] }), jsx(Flex, { sx: { minWidth: '100px' }, children: jsx(Button, { onClick: handleConnect, sx: {
-                        background: 'text',
-                        color: 'primaryButton',
-                        border: 'none',
-                        height: '31px',
-                        width: ['210px', '210px', '210px', '210px', '210px', '100px'],
-                        fontSize: '14px',
-                        fontWeight: '700',
-                        '&:hover': { color: 'text' },
-                    }, children: "Connect" }) })] }));
+    return (jsxs(Flex, { className: "ape:w-full ape:h-[75px] ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer", style: { background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)' }, children: [jsxs(Flex, { className: "ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center", children: [jsx(Flex, { className: "ape:min-w-[30px] ape:min-h-[30px] ape:rounded-full ape:overflow-hidden", children: jsx(APTOS, { width: "30" }) }), jsxs(Flex, { className: "ape:flex-col", children: [jsxs(Text, { size: "18px", className: "ape:font-bold ape:flex ape:items-center", style: { lineHeight: '18.5px' }, children: ["Aptos", jsx(Text, { size: "10px", className: "ape:font-semibold ape:p-[4px_6px] ape:rounded-[4px] ape:ml-[6px] ape:mr-[6px]", style: { color: '#FAFAFA', background: 'rgba(250, 250, 250, 0.3)', lineHeight: '8px' }, children: "NEW" })] }), jsx(Text, { size: "11px", className: "ape:font-normal", style: { color: 'white', lineHeight: '1rem' }, children: "Connect your wallet to view your Aptos Bonds!" })] })] }), jsx(Flex, { className: "ape:min-w-[100px]", children: jsx(Button, { onClick: handleConnect, className: "ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold ape:enabled:hover:text-text!", style: { backgroundColor: 'var(--ape-color-text)', color: 'var(--ape-color-primary-button)' }, children: "Connect" }) })] }));
 }
 
 export { ConnectToAptosBanner as default };

package/dist/components/ConnectoToVmBanners/ConnectToAptosBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectToAptosBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToAptosBanner.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openAptosWalletConnector } from '../../config/constants/walletConnectors'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\nimport APTOS from '../uikit-sdk/Svg/tokens/APTOS'\n\n// Banner rendered in Your Bonds when the user has not connected an Aptos\n// wallet. Uses the same visual language as `ConnectToSolanaBanner` (see the\n// sibling file) but hosts the Ant Design `WalletSelector` modal internally\n// — Aptos does not expose a global `useWalletModal` hook like Solana does,\n// so each entry point controls its own modal visibility.\nexport default function ConnectToAptosBanner() {\n  const config = useSDKConfig()\n  const handleConnect = config?.openWalletConnectors?.aptos ? openAptosWalletConnector : undefined\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        height: '75px',\n        background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)',\n        p: '10px',\n        borderRadius: '10px',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        border: 'none',\n        cursor: 'pointer',\n      }}\n    >\n      <Flex sx={{ width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }}>\n        <Flex sx={{ minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }}>\n          <APTOS width=\"30\" />\n        </Flex>\n        <Flex sx={{ flexDirection: 'column' }}>\n          <Text\n            sx={{ fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }}\n          >\n            Aptos\n            <Text\n              sx={{\n                fontSize: '10px',\n                fontWeight: '600',\n                lineHeight: '8px',\n                color: '#FAFAFA',\n                padding: '4px 6px',\n                background: 'rgba(250, 250, 250, 0.3)',\n                borderRadius: '4px',\n                marginLeft: '6px',\n                marginRight: '6px',\n              }}\n            >\n              NEW\n            </Text>\n          </Text>\n          <Text sx={{ fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }}>\n            Connect your wallet to view your Aptos Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex sx={{ minWidth: '100px' }}>\n        <Button\n          onClick={handleConnect}\n          sx={{\n            background: 'text',\n            color: 'primaryButton',\n            border: 'none',\n            height: '31px',\n            width: ['210px', '210px', '210px', '210px', '210px', '100px'],\n            fontSize: '14px',\n            fontWeight: '700',\n            '&:hover': { color: 'text' },\n          }}\n        >\n          Connect\n        </Button>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ConnectToAptosBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToAptosBanner.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openAptosWalletConnector } from '../../config/constants/walletConnectors'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\nimport APTOS from '../uikit-sdk/Svg/tokens/APTOS'\n\n// Banner rendered in Your Bonds when the user has not connected an Aptos\n// wallet. Uses the same visual language as `ConnectToSolanaBanner` (see the\n// sibling file) but hosts the Ant Design `WalletSelector` modal internally\n// — Aptos does not expose a global `useWalletModal` hook like Solana does,\n// so each entry point controls its own modal visibility.\nexport default function ConnectToAptosBanner() {\n  const config = useSDKConfig()\n  const handleConnect = config?.openWalletConnectors?.aptos ? openAptosWalletConnector : undefined\n  return (\n    <Flex\n      className=\"ape:w-full ape:h-[75px] ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer\"\n      style={{ background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)' }}\n    >\n      <Flex className=\"ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center\">\n        <Flex className=\"ape:min-w-[30px] ape:min-h-[30px] ape:rounded-full ape:overflow-hidden\">\n          <APTOS width=\"30\" />\n        </Flex>\n        <Flex className=\"ape:flex-col\">\n          <Text size=\"18px\" className=\"ape:font-bold ape:flex ape:items-center\" style={{ lineHeight: '18.5px' }}>\n            Aptos\n            <Text\n              size=\"10px\"\n              className=\"ape:font-semibold ape:p-[4px_6px] ape:rounded-[4px] ape:ml-[6px] ape:mr-[6px]\"\n              style={{ color: '#FAFAFA', background: 'rgba(250, 250, 250, 0.3)', lineHeight: '8px' }}\n            >\n              NEW\n            </Text>\n          </Text>\n          <Text size=\"11px\" className=\"ape:font-normal\" style={{ color: 'white', lineHeight: '1rem' }}>\n            Connect your wallet to view your Aptos Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex className=\"ape:min-w-[100px]\">\n        <Button\n          onClick={handleConnect}\n          className=\"ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold ape:enabled:hover:text-text!\"\n          style={{ backgroundColor: 'var(--ape-color-text)', color: 'var(--ape-color-primary-button)' }}\n        >\n          Connect\n        </Button>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACc,SAAU,oBAAoB,GAAA;AAC1C,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,KAAK,GAAG,wBAAwB,GAAG,SAAS;AAChG,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,iIAAiI,EAC3I,KAAK,EAAE,EAAE,UAAU,EAAE,mDAAmD,EAAE,EAAA,QAAA,EAAA,CAE1EA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8DAA8D,EAAA,QAAA,EAAA,CAC5EC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wEAAwE,YACtFA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,IAAI,EAAA,CAAG,EAAA,CACf,EACPD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BA,IAAA,CAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,yCAAyC,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CAAA,OAAA,EAEnGC,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,+EAA+E,EACzF,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,0BAA0B,EAAE,UAAU,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,KAAA,EAAA,CAGjF,IACF,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,+CAAA,EAAA,CAEpF,IACF,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,mBAAmB,EAAA,QAAA,EACjCA,IAAC,MAAM,EAAA,EACL,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,yHAAyH,EACnI,KAAK,EAAE,EAAE,eAAe,EAAE,uBAAuB,EAAE,KAAK,EAAE,iCAAiC,EAAE,EAAA,QAAA,EAAA,SAAA,EAAA,CAGtF,EAAA,CACJ,CAAA,EAAA,CACF;AAEX;;;;"}

package/dist/components/ConnectoToVmBanners/ConnectToEvmBanner.d.ts

@@ -1 +1 @@
-export default function ConnectToEVMBanner(): import("react").JSX.Element;
+export default function ConnectToEVMBanner(): import("react/jsx-runtime").JSX.Element;

package/dist/components/ConnectoToVmBanners/ConnectToEvmBanner.js

@@ -1,49 +1,10 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import ConnectButton from '../ConnectButton/index.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Text from '../uikit-sdk/Text/index.js';
 
 function ConnectToEVMBanner() {
-    return (jsxs(Flex, { sx: {
-            width: '100%',
-            height: '75px',
-            backgroundColor: 'white2',
-            p: '10px',
-            borderRadius: '10px',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            cursor: 'pointer',
-        }, children: [jsxs(Flex, { sx: {
-                    width: '100%',
-                    maxWidth: '300px',
-                    gap: '10px',
-                    alignItems: 'center',
-                }, children: [jsx("img", { src: "https://ape.bond/images/connect-to-vm/ethereum-icon.png", alt: "ethereum icon", width: 30, height: 30, style: { borderRadius: '50px' } }), jsxs(Flex, { sx: {
-                            flexDirection: 'column',
-                        }, children: [jsxs(Text, { sx: {
-                                    fontSize: '15px',
-                                    fontWeight: '600',
-                                    lineHeight: '18.5px',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: '5px',
-                                }, children: ["Ethereum", jsx("img", { src: "https://ape.bond/images/connect-to-vm/evm-compatible-wallets.png", alt: "solana compatible wallets", width: 55, height: 17 })] }), jsx(Text, { sx: {
-                                    fontSize: '10px',
-                                    fontWeight: '400',
-                                    lineHeight: '16px',
-                                    color: 'rgba(255, 255, 255, 0.65)',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: '4px',
-                                }, children: "Connect your wallet to view your EVM Bonds!" })] })] }), jsx(Flex, { sx: {
-                    minWidth: '100px',
-                    width: ['210px', '210px', '210px', '210px', '210px', '100px'],
-                    '& > *': {
-                        width: ['210px', '210px', '210px', '210px', '210px', '100px'],
-                        height: '31px !important',
-                        fontSize: '14px !important',
-                    },
-                }, children: jsx(ConnectButton, {}) })] }));
+    return (jsxs(Flex, { className: "ape:w-full ape:h-[75px] ape:bg-white2 ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:cursor-pointer", children: [jsxs(Flex, { className: "ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center", children: [jsx("img", { src: "https://ape.bond/images/connect-to-vm/ethereum-icon.png", alt: "ethereum icon", width: 30, height: 30, style: { borderRadius: '50px' } }), jsxs(Flex, { className: "ape:flex-col", children: [jsxs(Text, { size: "15px", className: "ape:font-semibold ape:flex ape:items-center ape:gap-[5px]", style: { lineHeight: '18.5px' }, children: ["Ethereum", jsx("img", { src: "https://ape.bond/images/connect-to-vm/evm-compatible-wallets.png", alt: "solana compatible wallets", width: 55, height: 17 })] }), jsx(Text, { size: "10px", className: "ape:font-normal ape:flex ape:items-center ape:gap-[4px]", style: { color: 'rgba(255, 255, 255, 0.65)', lineHeight: '1rem' }, children: "Connect your wallet to view your EVM Bonds!" })] })] }), jsx(Flex, { className: "ape:min-w-[100px] ape:w-[210px] ape:xl:w-[100px] ape:[&>*]:w-[210px] ape:xl:[&>*]:w-[100px] ape:[&>*]:h-[31px]! ape:[&>*]:text-[14px]!", children: jsx(ConnectButton, {}) })] }));
 }
 
 export { ConnectToEVMBanner as default };

package/dist/components/ConnectoToVmBanners/ConnectToEvmBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectToEvmBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToEvmBanner.tsx"],"sourcesContent":["import ConnectButton from '../ConnectButton'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\n\nexport default function ConnectToEVMBanner() {\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        height: '75px',\n        backgroundColor: 'white2',\n        p: '10px',\n        borderRadius: '10px',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        cursor: 'pointer',\n      }}\n    >\n      <Flex\n        sx={{\n          width: '100%',\n          maxWidth: '300px',\n          gap: '10px',\n          alignItems: 'center',\n        }}\n      >\n        <img\n          src=\"https://ape.bond/images/connect-to-vm/ethereum-icon.png\"\n          alt=\"ethereum icon\"\n          width={30}\n          height={30}\n          style={{ borderRadius: '50px' }}\n        />\n        <Flex\n          sx={{\n            flexDirection: 'column',\n          }}\n        >\n          <Text\n            sx={{\n              fontSize: '15px',\n              fontWeight: '600',\n              lineHeight: '18.5px',\n              display: 'flex',\n              alignItems: 'center',\n              gap: '5px',\n            }}\n          >\n            Ethereum\n            <img\n              src=\"https://ape.bond/images/connect-to-vm/evm-compatible-wallets.png\"\n              alt=\"solana compatible wallets\"\n              width={55}\n              height={17}\n            />\n          </Text>\n          <Text\n            sx={{\n              fontSize: '10px',\n              fontWeight: '400',\n              lineHeight: '16px',\n              color: 'rgba(255, 255, 255, 0.65)',\n              display: 'flex',\n              alignItems: 'center',\n              gap: '4px',\n            }}\n          >\n            Connect your wallet to view your EVM Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex\n        sx={{\n          minWidth: '100px',\n          width: ['210px', '210px', '210px', '210px', '210px', '100px'],\n          '& > *': {\n            width: ['210px', '210px', '210px', '210px', '210px', '100px'],\n            height: '31px !important',\n            fontSize: '14px !important',\n          },\n        }}\n      >\n        <ConnectButton />\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAIc,SAAU,kBAAkB,GAAA;AACxC,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,eAAe,EAAE,QAAQ;AACzB,YAAA,CAAC,EAAE,MAAM;AACT,YAAA,YAAY,EAAE,MAAM;AACpB,YAAA,cAAc,EAAE,eAAe;AAC/B,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,MAAM,EAAE,SAAS;AAClB,SAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,QAAQ,EAAE,OAAO;AACjB,oBAAA,GAAG,EAAE,MAAM;AACX,oBAAA,UAAU,EAAE,QAAQ;AACrB,iBAAA,EAAA,QAAA,EAAA,CAEDC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,yDAAyD,EAC7D,GAAG,EAAC,eAAe,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAA,CAC/B,EACFD,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,4BAAA,aAAa,EAAE,QAAQ;AACxB,yBAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oCAAA,QAAQ,EAAE,MAAM;AAChB,oCAAA,UAAU,EAAE,KAAK;AACjB,oCAAA,UAAU,EAAE,QAAQ;AACpB,oCAAA,OAAO,EAAE,MAAM;AACf,oCAAA,UAAU,EAAE,QAAQ;AACpB,oCAAA,GAAG,EAAE,KAAK;iCACX,EAAA,QAAA,EAAA,CAAA,UAAA,EAGDC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,kEAAkE,EACtE,GAAG,EAAC,2BAA2B,EAC/B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EAAA,CACV,CAAA,EAAA,CACG,EACPA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oCAAA,QAAQ,EAAE,MAAM;AAChB,oCAAA,UAAU,EAAE,KAAK;AACjB,oCAAA,UAAU,EAAE,MAAM;AAClB,oCAAA,KAAK,EAAE,2BAA2B;AAClC,oCAAA,OAAO,EAAE,MAAM;AACf,oCAAA,UAAU,EAAE,QAAQ;AACpB,oCAAA,GAAG,EAAE,KAAK;AACX,iCAAA,EAAA,QAAA,EAAA,6CAAA,EAAA,CAGI,IACF,CAAA,EAAA,CACF,EACPA,IAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,QAAQ,EAAE,OAAO;AACjB,oBAAA,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC;AAC7D,oBAAA,OAAO,EAAE;AACP,wBAAA,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC;AAC7D,wBAAA,MAAM,EAAE,iBAAiB;AACzB,wBAAA,QAAQ,EAAE,iBAAiB;AAC5B,qBAAA;AACF,iBAAA,EAAA,QAAA,EAEDA,IAAC,aAAa,EAAA,EAAA,CAAG,EAAA,CACZ,CAAA,EAAA,CACF;AAEX;;;;"}
+{"version":3,"file":"ConnectToEvmBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToEvmBanner.tsx"],"sourcesContent":["import ConnectButton from '../ConnectButton'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\n\nexport default function ConnectToEVMBanner() {\n  return (\n    <Flex className=\"ape:w-full ape:h-[75px] ape:bg-white2 ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:cursor-pointer\">\n      <Flex className=\"ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center\">\n        <img\n          src=\"https://ape.bond/images/connect-to-vm/ethereum-icon.png\"\n          alt=\"ethereum icon\"\n          width={30}\n          height={30}\n          style={{ borderRadius: '50px' }}\n        />\n        <Flex className=\"ape:flex-col\">\n          <Text\n            size=\"15px\"\n            className=\"ape:font-semibold ape:flex ape:items-center ape:gap-[5px]\"\n            style={{ lineHeight: '18.5px' }}\n          >\n            Ethereum\n            <img\n              src=\"https://ape.bond/images/connect-to-vm/evm-compatible-wallets.png\"\n              alt=\"solana compatible wallets\"\n              width={55}\n              height={17}\n            />\n          </Text>\n          <Text\n            size=\"10px\"\n            className=\"ape:font-normal ape:flex ape:items-center ape:gap-[4px]\"\n            style={{ color: 'rgba(255, 255, 255, 0.65)', lineHeight: '1rem' }}\n          >\n            Connect your wallet to view your EVM Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex className=\"ape:min-w-[100px] ape:w-[210px] ape:xl:w-[100px] ape:[&>*]:w-[210px] ape:xl:[&>*]:w-[100px] ape:[&>*]:h-[31px]! ape:[&>*]:text-[14px]!\">\n        <ConnectButton />\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAIc,SAAU,kBAAkB,GAAA;AACxC,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,+HAA+H,EAAA,QAAA,EAAA,CAC7IA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8DAA8D,EAAA,QAAA,EAAA,CAC5EC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,yDAAyD,EAC7D,GAAG,EAAC,eAAe,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAA,CAC/B,EACFD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BA,IAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,2DAA2D,EACrE,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CAAA,UAAA,EAG/BC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,kEAAkE,EACtE,GAAG,EAAC,2BAA2B,EAC/B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EAAA,CACV,CAAA,EAAA,CACG,EACPA,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,yDAAyD,EACnE,KAAK,EAAE,EAAE,KAAK,EAAE,2BAA2B,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,6CAAA,EAAA,CAG5D,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wIAAwI,EAAA,QAAA,EACtJA,GAAA,CAAC,aAAa,EAAA,EAAA,CAAG,EAAA,CACZ,CAAA,EAAA,CACF;AAEX;;;;"}

package/dist/components/ConnectoToVmBanners/ConnectToSolanaBanner.d.ts

@@ -1 +1 @@
-export default function ConnectToSolanaCard(): import("react").JSX.Element;
+export default function ConnectToSolanaCard(): import("react/jsx-runtime").JSX.Element;

package/dist/components/ConnectoToVmBanners/ConnectToSolanaBanner.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import { openSolWalletConnector } from '../../config/constants/walletConnectors.js';
 import Flex from '../uikit-sdk/Flex/index.js';
@@ -8,41 +8,17 @@ import Text from '../uikit-sdk/Text/index.js';
 function ConnectToSolanaCard() {
     const config = useSDKConfig();
     const handleConnect = config?.openWalletConnectors?.sol ? openSolWalletConnector : undefined;
-    return (jsxs(Flex, { sx: {
-            width: '100%',
-            height: '75px',
+    return (jsxs(Flex, { className: "ape:w-full ape:h-[75px] ape:bg-cover ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer", style: {
             background: `url('https://ape.bond/images/connect-to-vm/solana-card-background.png') no-repeat center center`,
             backgroundSize: 'cover',
-            p: '10px',
-            borderRadius: '10px',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            border: 'none',
-            cursor: 'pointer',
-        }, children: [jsxs(Flex, { sx: {
-                    width: '100%',
-                    maxWidth: '300px',
-                    gap: '10px',
-                    alignItems: 'center',
-                }, children: [jsx("img", { src: "https://ape.bond/images/connect-to-vm/solana-icon.png", alt: "solana icon", width: 30, height: 30, style: { borderRadius: '50px' } }), jsxs(Flex, { sx: {
-                            flexDirection: 'column',
-                        }, children: [jsxs(Text, { sx: {
-                                    fontSize: '18px',
-                                    fontWeight: '700',
-                                    lineHeight: '18.5px',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: '5px',
-                                }, children: ["Solana", jsx("img", { src: "https://ape.bond/images/connect-to-vm/svm-compatible-wallets.png", alt: "solana compatible wallets", width: 43, height: 17 })] }), jsx(Text, { sx: { fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }, children: "Connect your wallet to view your Solana Bonds!" })] })] }), jsx(Flex, { sx: { minWidth: '100px' }, children: jsx(Button, { onClick: handleConnect, sx: {
-                        background: 'text',
-                        color: 'primaryButton',
-                        border: 'none',
-                        height: '31px',
-                        width: ['210px', '210px', '210px', '210px', '210px', '100px'],
-                        fontSize: '14px',
-                        fontWeight: '700',
-                        '&:hover': { color: 'text' },
-                    }, children: "Connect" }) })] }));
+        }, children: [jsxs(Flex, { className: "ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center", children: [jsx("img", { src: "https://ape.bond/images/connect-to-vm/solana-icon.png", alt: "solana icon", width: 30, height: 30, style: { borderRadius: '50px' } }), jsxs(Flex, { className: "ape:flex-col", children: [jsxs(Text, { size: "18px", className: "ape:font-bold ape:flex ape:items-center ape:gap-[5px]", style: { lineHeight: '18.5px' }, children: ["Solana", jsx("img", { src: "https://ape.bond/images/connect-to-vm/svm-compatible-wallets.png", alt: "solana compatible wallets", width: 43, height: 17 })] }), jsx(Text, { size: "11px", className: "ape:font-normal", style: { color: 'white', lineHeight: '1rem' }, children: "Connect your wallet to view your Solana Bonds!" })] })] }), jsx(Flex, { className: "ape:min-w-[100px]", children: jsx(Button, { onClick: handleConnect, className: "ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold ape:enabled:hover:text-text!", 
+                    // Base background/text color overrides Button's own default variant —
+                    // inline style always wins over the component's internal Tailwind
+                    // classes, whereas a conflicting utility class here would depend on
+                    // Tailwind's internal generation order (fragile, effectively
+                    // alphabetical). The hover color needs `!` since it must in turn beat
+                    // this inline style.
+                    style: { backgroundColor: 'var(--ape-color-text)', color: 'var(--ape-color-primary-button)' }, children: "Connect" }) })] }));
 }
 
 export { ConnectToSolanaCard as default };

package/dist/components/ConnectoToVmBanners/ConnectToSolanaBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectToSolanaBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToSolanaBanner.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openSolWalletConnector } from '../../config/constants/walletConnectors'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\n\nexport default function ConnectToSolanaCard() {\n  const config = useSDKConfig()\n  const handleConnect = config?.openWalletConnectors?.sol ? openSolWalletConnector : undefined\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        height: '75px',\n        background: `url('https://ape.bond/images/connect-to-vm/solana-card-background.png') no-repeat center center`,\n        backgroundSize: 'cover',\n        p: '10px',\n        borderRadius: '10px',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        border: 'none',\n        cursor: 'pointer',\n      }}\n    >\n      <Flex\n        sx={{\n          width: '100%',\n          maxWidth: '300px',\n          gap: '10px',\n          alignItems: 'center',\n        }}\n      >\n        <img\n          src=\"https://ape.bond/images/connect-to-vm/solana-icon.png\"\n          alt=\"solana icon\"\n          width={30}\n          height={30}\n          style={{ borderRadius: '50px' }}\n        />\n        <Flex\n          sx={{\n            flexDirection: 'column',\n          }}\n        >\n          <Text\n            sx={{\n              fontSize: '18px',\n              fontWeight: '700',\n              lineHeight: '18.5px',\n              display: 'flex',\n              alignItems: 'center',\n              gap: '5px',\n            }}\n          >\n            Solana\n            <img\n              src=\"https://ape.bond/images/connect-to-vm/svm-compatible-wallets.png\"\n              alt=\"solana compatible wallets\"\n              width={43}\n              height={17}\n            />\n          </Text>\n          <Text sx={{ fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }}>\n            Connect your wallet to view your Solana Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex sx={{ minWidth: '100px' }}>\n        <Button\n          onClick={handleConnect}\n          sx={{\n            background: 'text',\n            color: 'primaryButton',\n            border: 'none',\n            height: '31px',\n            width: ['210px', '210px', '210px', '210px', '210px', '100px'],\n            fontSize: '14px',\n            fontWeight: '700',\n            '&:hover': { color: 'text' },\n          }}\n        >\n          Connect\n        </Button>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAMc,SAAU,mBAAmB,GAAA;AACzC,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,GAAG,GAAG,sBAAsB,GAAG,SAAS;AAC5F,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,UAAU,EAAE,CAAA,+FAAA,CAAiG;AAC7G,YAAA,cAAc,EAAE,OAAO;AACvB,YAAA,CAAC,EAAE,MAAM;AACT,YAAA,YAAY,EAAE,MAAM;AACpB,YAAA,cAAc,EAAE,eAAe;AAC/B,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,MAAM,EAAE,SAAS;AAClB,SAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,QAAQ,EAAE,OAAO;AACjB,oBAAA,GAAG,EAAE,MAAM;AACX,oBAAA,UAAU,EAAE,QAAQ;AACrB,iBAAA,EAAA,QAAA,EAAA,CAEDC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,uDAAuD,EAC3D,GAAG,EAAC,aAAa,EACjB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAA,CAC/B,EACFD,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,4BAAA,aAAa,EAAE,QAAQ;AACxB,yBAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oCAAA,QAAQ,EAAE,MAAM;AAChB,oCAAA,UAAU,EAAE,KAAK;AACjB,oCAAA,UAAU,EAAE,QAAQ;AACpB,oCAAA,OAAO,EAAE,MAAM;AACf,oCAAA,UAAU,EAAE,QAAQ;AACpB,oCAAA,GAAG,EAAE,KAAK;AACX,iCAAA,EAAA,QAAA,EAAA,CAAA,QAAA,EAGDC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,kEAAkE,EACtE,GAAG,EAAC,2BAA2B,EAC/B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EAAA,CACV,CAAA,EAAA,CACG,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,QAAA,EAAA,gDAAA,EAAA,CAE9E,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAA,QAAA,EAC7BA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,aAAa,EACtB,EAAE,EAAE;AACF,wBAAA,UAAU,EAAE,MAAM;AAClB,wBAAA,KAAK,EAAE,eAAe;AACtB,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC;AAC7D,wBAAA,QAAQ,EAAE,MAAM;AAChB,wBAAA,UAAU,EAAE,KAAK;AACjB,wBAAA,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;qBAC7B,EAAA,QAAA,EAAA,SAAA,EAAA,CAGM,EAAA,CACJ,CAAA,EAAA,CACF;AAEX;;;;"}
+{"version":3,"file":"ConnectToSolanaBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToSolanaBanner.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openSolWalletConnector } from '../../config/constants/walletConnectors'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\n\nexport default function ConnectToSolanaCard() {\n  const config = useSDKConfig()\n  const handleConnect = config?.openWalletConnectors?.sol ? openSolWalletConnector : undefined\n  return (\n    <Flex\n      className=\"ape:w-full ape:h-[75px] ape:bg-cover ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer\"\n      style={{\n        background: `url('https://ape.bond/images/connect-to-vm/solana-card-background.png') no-repeat center center`,\n        backgroundSize: 'cover',\n      }}\n    >\n      <Flex className=\"ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center\">\n        <img\n          src=\"https://ape.bond/images/connect-to-vm/solana-icon.png\"\n          alt=\"solana icon\"\n          width={30}\n          height={30}\n          style={{ borderRadius: '50px' }}\n        />\n        <Flex className=\"ape:flex-col\">\n          <Text\n            size=\"18px\"\n            className=\"ape:font-bold ape:flex ape:items-center ape:gap-[5px]\"\n            style={{ lineHeight: '18.5px' }}\n          >\n            Solana\n            <img\n              src=\"https://ape.bond/images/connect-to-vm/svm-compatible-wallets.png\"\n              alt=\"solana compatible wallets\"\n              width={43}\n              height={17}\n            />\n          </Text>\n          <Text size=\"11px\" className=\"ape:font-normal\" style={{ color: 'white', lineHeight: '1rem' }}>\n            Connect your wallet to view your Solana Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex className=\"ape:min-w-[100px]\">\n        <Button\n          onClick={handleConnect}\n          className=\"ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold ape:enabled:hover:text-text!\"\n          // Base background/text color overrides Button's own default variant —\n          // inline style always wins over the component's internal Tailwind\n          // classes, whereas a conflicting utility class here would depend on\n          // Tailwind's internal generation order (fragile, effectively\n          // alphabetical). The hover color needs `!` since it must in turn beat\n          // this inline style.\n          style={{ backgroundColor: 'var(--ape-color-text)', color: 'var(--ape-color-primary-button)' }}\n        >\n          Connect\n        </Button>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAMc,SAAU,mBAAmB,GAAA;AACzC,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,GAAG,GAAG,sBAAsB,GAAG,SAAS;IAC5F,QACEA,KAAC,IAAI,EAAA,EACH,SAAS,EAAC,8IAA8I,EACxJ,KAAK,EAAE;AACL,YAAA,UAAU,EAAE,CAAA,+FAAA,CAAiG;AAC7G,YAAA,cAAc,EAAE,OAAO;SACxB,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8DAA8D,EAAA,QAAA,EAAA,CAC5EC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,uDAAuD,EAC3D,GAAG,EAAC,aAAa,EACjB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAA,CAC/B,EACFD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BA,IAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,uDAAuD,EACjE,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CAAA,QAAA,EAG/BC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,kEAAkE,EACtE,GAAG,EAAC,2BAA2B,EAC/B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EAAA,CACV,CAAA,EAAA,CACG,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,gDAAA,EAAA,CAEpF,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mBAAmB,EAAA,QAAA,EACjCA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,yHAAyH;;;;;;;AAOnI,oBAAA,KAAK,EAAE,EAAE,eAAe,EAAE,uBAAuB,EAAE,KAAK,EAAE,iCAAiC,EAAE,EAAA,QAAA,EAAA,SAAA,EAAA,CAGtF,EAAA,CACJ,CAAA,EAAA,CACF;AAEX;;;;"}

package/dist/components/ConnectoToVmBanners/ConnectToSuiBanner.d.ts

@@ -1 +1 @@
-export default function ConnectToSuiBanner(): import("react").JSX.Element;
+export default function ConnectToSuiBanner(): import("react/jsx-runtime").JSX.Element;

package/dist/components/ConnectoToVmBanners/ConnectToSuiBanner.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import { openSuiWalletConnector } from '../../config/constants/walletConnectors.js';
 import Flex from '../uikit-sdk/Flex/index.js';
@@ -9,36 +9,7 @@ import SUI from '../uikit-sdk/Svg/tokens/SUI.js';
 function ConnectToSuiBanner() {
     const config = useSDKConfig();
     const handleConnect = config?.openWalletConnectors?.sui ? openSuiWalletConnector : undefined;
-    return (jsxs(Flex, { sx: {
-            width: '100%',
-            height: '75px',
-            background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)',
-            p: '10px',
-            borderRadius: '10px',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            border: 'none',
-            cursor: 'pointer',
-        }, children: [jsxs(Flex, { sx: { width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }, children: [jsx(Flex, { sx: { minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }, children: jsx(SUI, { width: "30" }) }), jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsxs(Text, { sx: { fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }, children: ["Sui", jsx(Text, { sx: {
-                                            fontSize: '10px',
-                                            fontWeight: '600',
-                                            lineHeight: '8px',
-                                            color: '#FAFAFA',
-                                            padding: '4px 6px',
-                                            background: 'rgba(250, 250, 250, 0.3)',
-                                            borderRadius: '4px',
-                                            marginLeft: '6px',
-                                            marginRight: '6px',
-                                        }, children: "NEW" })] }), jsx(Text, { sx: { fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }, children: "Connect your wallet to view your Sui Bonds!" })] })] }), jsx(Flex, { sx: { minWidth: '100px' }, children: jsx(Button, { onClick: handleConnect, sx: {
-                        background: 'text',
-                        color: 'primaryButton',
-                        border: 'none',
-                        height: '31px',
-                        width: ['210px', '210px', '210px', '210px', '210px', '100px'],
-                        fontSize: '14px',
-                        fontWeight: '700',
-                        '&:hover': { color: 'text' },
-                    }, children: "Connect" }) })] }));
+    return (jsxs(Flex, { className: "ape:w-full ape:h-[75px] ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer", style: { background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)' }, children: [jsxs(Flex, { className: "ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center", children: [jsx(Flex, { className: "ape:min-w-[30px] ape:min-h-[30px] ape:rounded-full ape:overflow-hidden", children: jsx(SUI, { width: "30" }) }), jsxs(Flex, { className: "ape:flex-col", children: [jsxs(Text, { size: "18px", className: "ape:font-bold ape:flex ape:items-center", style: { lineHeight: '18.5px' }, children: ["Sui", jsx(Text, { size: "10px", className: "ape:font-semibold ape:p-[4px_6px] ape:rounded-[4px] ape:ml-[6px] ape:mr-[6px]", style: { color: '#FAFAFA', background: 'rgba(250, 250, 250, 0.3)', lineHeight: '8px' }, children: "NEW" })] }), jsx(Text, { size: "11px", className: "ape:font-normal", style: { color: 'white', lineHeight: '1rem' }, children: "Connect your wallet to view your Sui Bonds!" })] })] }), jsx(Flex, { className: "ape:min-w-[100px]", children: jsx(Button, { onClick: handleConnect, className: "ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold ape:enabled:hover:text-text!", style: { backgroundColor: 'var(--ape-color-text)', color: 'var(--ape-color-primary-button)' }, children: "Connect" }) })] }));
 }
 
 export { ConnectToSuiBanner as default };

package/dist/components/ConnectoToVmBanners/ConnectToSuiBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectToSuiBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToSuiBanner.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openSuiWalletConnector } from '../../config/constants/walletConnectors'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\nimport SUI from '../uikit-sdk/Svg/tokens/SUI'\n\nexport default function ConnectToSuiBanner() {\n  const config = useSDKConfig()\n  const handleConnect = config?.openWalletConnectors?.sui ? openSuiWalletConnector : undefined\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        height: '75px',\n        background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)',\n        p: '10px',\n        borderRadius: '10px',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        border: 'none',\n        cursor: 'pointer',\n      }}\n    >\n      <Flex sx={{ width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }}>\n        <Flex sx={{ minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }}>\n          <SUI width=\"30\" />\n        </Flex>\n        <Flex sx={{ flexDirection: 'column' }}>\n          <Text\n            sx={{ fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }}\n          >\n            Sui\n            <Text\n              sx={{\n                fontSize: '10px',\n                fontWeight: '600',\n                lineHeight: '8px',\n                color: '#FAFAFA',\n                padding: '4px 6px',\n                background: 'rgba(250, 250, 250, 0.3)',\n                borderRadius: '4px',\n                marginLeft: '6px',\n                marginRight: '6px',\n              }}\n            >\n              NEW\n            </Text>\n          </Text>\n          <Text sx={{ fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }}>\n            Connect your wallet to view your Sui Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex sx={{ minWidth: '100px' }}>\n        <Button\n          onClick={handleConnect}\n          sx={{\n            background: 'text',\n            color: 'primaryButton',\n            border: 'none',\n            height: '31px',\n            width: ['210px', '210px', '210px', '210px', '210px', '100px'],\n            fontSize: '14px',\n            fontWeight: '700',\n            '&:hover': { color: 'text' },\n          }}\n        >\n          Connect\n        </Button>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ConnectToSuiBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToSuiBanner.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openSuiWalletConnector } from '../../config/constants/walletConnectors'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\nimport SUI from '../uikit-sdk/Svg/tokens/SUI'\n\nexport default function ConnectToSuiBanner() {\n  const config = useSDKConfig()\n  const handleConnect = config?.openWalletConnectors?.sui ? openSuiWalletConnector : undefined\n  return (\n    <Flex\n      className=\"ape:w-full ape:h-[75px] ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer\"\n      style={{ background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)' }}\n    >\n      <Flex className=\"ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center\">\n        <Flex className=\"ape:min-w-[30px] ape:min-h-[30px] ape:rounded-full ape:overflow-hidden\">\n          <SUI width=\"30\" />\n        </Flex>\n        <Flex className=\"ape:flex-col\">\n          <Text size=\"18px\" className=\"ape:font-bold ape:flex ape:items-center\" style={{ lineHeight: '18.5px' }}>\n            Sui\n            <Text\n              size=\"10px\"\n              className=\"ape:font-semibold ape:p-[4px_6px] ape:rounded-[4px] ape:ml-[6px] ape:mr-[6px]\"\n              style={{ color: '#FAFAFA', background: 'rgba(250, 250, 250, 0.3)', lineHeight: '8px' }}\n            >\n              NEW\n            </Text>\n          </Text>\n          <Text size=\"11px\" className=\"ape:font-normal\" style={{ color: 'white', lineHeight: '1rem' }}>\n            Connect your wallet to view your Sui Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex className=\"ape:min-w-[100px]\">\n        <Button\n          onClick={handleConnect}\n          className=\"ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold ape:enabled:hover:text-text!\"\n          style={{ backgroundColor: 'var(--ape-color-text)', color: 'var(--ape-color-primary-button)' }}\n        >\n          Connect\n        </Button>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAOc,SAAU,kBAAkB,GAAA;AACxC,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,GAAG,GAAG,sBAAsB,GAAG,SAAS;AAC5F,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,iIAAiI,EAC3I,KAAK,EAAE,EAAE,UAAU,EAAE,mDAAmD,EAAE,EAAA,QAAA,EAAA,CAE1EA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8DAA8D,EAAA,QAAA,EAAA,CAC5EC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wEAAwE,YACtFA,GAAA,CAAC,GAAG,EAAA,EAAC,KAAK,EAAC,IAAI,EAAA,CAAG,EAAA,CACb,EACPD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BA,IAAA,CAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,yCAAyC,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CAAA,KAAA,EAEnGC,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,+EAA+E,EACzF,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,0BAA0B,EAAE,UAAU,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,KAAA,EAAA,CAGjF,IACF,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,6CAAA,EAAA,CAEpF,IACF,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,mBAAmB,EAAA,QAAA,EACjCA,IAAC,MAAM,EAAA,EACL,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,yHAAyH,EACnI,KAAK,EAAE,EAAE,eAAe,EAAE,uBAAuB,EAAE,KAAK,EAAE,iCAAiC,EAAE,EAAA,QAAA,EAAA,SAAA,EAAA,CAGtF,EAAA,CACJ,CAAA,EAAA,CACF;AAEX;;;;"}

package/dist/components/CustomClaimModals/AbondModal.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const AbondModal: () => React.JSX.Element;
+declare const AbondModal: () => import("react/jsx-runtime").JSX.Element;
 export default AbondModal;

package/dist/components/CustomClaimModals/AbondModal.js

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
-import { Image } from 'theme-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Modal from '../uikit-sdk/Modal/index.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Button from '../uikit-sdk/Button/Button.js';
@@ -8,7 +7,7 @@ const AbondModal = () => {
     const handleClick = () => {
         window.location.href = 'https://ape.bond/true-yield';
     };
-    return (jsx(Modal, { title: "You've Claimed ABOND!", children: jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsx(Flex, { sx: { fontSize: '12px', lineHeight: '20px', color: 'primaryButton', mt: '10px' }, children: "Did You Know?" }), jsxs(Flex, { sx: { flexDirection: 'column', gap: '10px', cursor: 'pointer' }, onClick: handleClick, children: [jsx(Flex, { children: "You can stake ABOND to earn $USDT and extra discounts on Bonds:" }), jsx(Image, { src: 'https://ape.bond/images/circular-staking/real-yield.png' }), jsx(Image, { src: 'https://ape.bond/images/circular-staking/extra-discounts.png' }), jsx(Button, { sx: { width: '100%', mt: '10px' }, children: " Stake now" })] })] }) }));
+    return (jsx(Modal, { title: "You've Claimed ABOND!", children: jsxs(Flex, { className: "ape:flex-col", children: [jsx(Flex, { className: "ape:text-[12px] ape:leading-5 ape:text-primary-button ape:mt-[10px]", children: "Did You Know?" }), jsxs(Flex, { className: "ape:flex-col ape:gap-[10px] ape:cursor-pointer", onClick: handleClick, children: [jsx(Flex, { children: "You can stake ABOND to earn $USDT and extra discounts on Bonds:" }), jsx("img", { src: 'https://ape.bond/images/circular-staking/real-yield.png' }), jsx("img", { src: 'https://ape.bond/images/circular-staking/extra-discounts.png' }), jsx(Button, { className: "ape:w-full ape:mt-[10px]", children: " Stake now" })] })] }) }));
 };
 
 export { AbondModal as default };

package/dist/components/CustomClaimModals/AbondModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"AbondModal.js","sources":["../../../src/components/CustomClaimModals/AbondModal.tsx"],"sourcesContent":["import React from 'react'\nimport { Image } from 'theme-ui'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst AbondModal = () => {\n  const handleClick = () => {\n    window.location.href = 'https://ape.bond/true-yield'\n  }\n\n  return (\n    <Modal title=\"You've Claimed ABOND!\">\n      <Flex sx={{ flexDirection: 'column' }}>\n        <Flex sx={{ fontSize: '12px', lineHeight: '20px', color: 'primaryButton', mt: '10px' }}>Did You Know?</Flex>\n        <Flex sx={{ flexDirection: 'column', gap: '10px', cursor: 'pointer' }} onClick={handleClick}>\n          <Flex>You can stake ABOND to earn $USDT and extra discounts on Bonds:</Flex>\n          <Image src={'https://ape.bond/images/circular-staking/real-yield.png'} />\n          <Image src={'https://ape.bond/images/circular-staking/extra-discounts.png'} />\n          <Button sx={{ width: '100%', mt: '10px' }}> Stake now</Button>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default AbondModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAMA,MAAM,UAAU,GAAG,MAAK;IACtB,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,6BAA6B;AACtD,IAAA,CAAC;IAED,QACEA,IAAC,KAAK,EAAA,EAAC,KAAK,EAAC,uBAAuB,EAAA,QAAA,EAClCC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,aACnCD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,eAAA,EAAA,CAAsB,EAC5GC,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,WAAW,aACzFD,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,iEAAA,EAAA,CAAuE,EAC5EA,GAAA,CAAC,KAAK,IAAC,GAAG,EAAE,yDAAyD,EAAA,CAAI,EACzEA,GAAA,CAAC,KAAK,EAAA,EAAC,GAAG,EAAE,8DAA8D,EAAA,CAAI,EAC9EA,IAAC,MAAM,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,2BAAqB,CAAA,EAAA,CACzD,CAAA,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}
+{"version":3,"file":"AbondModal.js","sources":["../../../src/components/CustomClaimModals/AbondModal.tsx"],"sourcesContent":["import React from 'react'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst AbondModal = () => {\n  const handleClick = () => {\n    window.location.href = 'https://ape.bond/true-yield'\n  }\n\n  return (\n    <Modal title=\"You've Claimed ABOND!\">\n      <Flex className=\"ape:flex-col\">\n        <Flex className=\"ape:text-[12px] ape:leading-5 ape:text-primary-button ape:mt-[10px]\">Did You Know?</Flex>\n        <Flex className=\"ape:flex-col ape:gap-[10px] ape:cursor-pointer\" onClick={handleClick}>\n          <Flex>You can stake ABOND to earn $USDT and extra discounts on Bonds:</Flex>\n          <img src={'https://ape.bond/images/circular-staking/real-yield.png'} />\n          <img src={'https://ape.bond/images/circular-staking/extra-discounts.png'} />\n          <Button className=\"ape:w-full ape:mt-[10px]\"> Stake now</Button>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default AbondModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKA,MAAM,UAAU,GAAG,MAAK;IACtB,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,6BAA6B;AACtD,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,uBAAuB,EAAA,QAAA,EAClCC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,qEAAqE,EAAA,QAAA,EAAA,eAAA,EAAA,CAAqB,EAC1GC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,gDAAgD,EAAC,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,CACnFD,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,iEAAA,EAAA,CAAuE,EAC5EA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,yDAAyD,EAAA,CAAI,EACvEA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,8DAA8D,EAAA,CAAI,EAC5EA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,QAAA,EAAA,YAAA,EAAA,CAAoB,CAAA,EAAA,CAC3D,CAAA,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}

package/dist/components/CustomClaimModals/OabondModal.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const OabondModal: () => React.JSX.Element;
+declare const OabondModal: () => import("react/jsx-runtime").JSX.Element;
 export default OabondModal;

package/dist/components/CustomClaimModals/OabondModal.js

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
-import { Image } from 'theme-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Modal from '../uikit-sdk/Modal/index.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Button from '../uikit-sdk/Button/Button.js';
@@ -8,7 +7,7 @@ const OabondModal = () => {
     const handleClick = () => {
         window.location.href = 'https://ape.bond/true-yield?createPosition=oABOND';
     };
-    return (jsx(Modal, { title: "You've Claimed oABOND!", children: jsx(Flex, { sx: { flexDirection: 'column' }, children: jsxs(Flex, { sx: { flexDirection: 'column', gap: '10px', cursor: 'pointer' }, onClick: handleClick, children: [jsx(Flex, { children: "You can now stake your oABOND and turn it into veABOND at permalock:" }), jsx(Image, { src: 'https://ape.bond/images/circular-staking/real-yield.png' }), jsx(Button, { sx: { width: '100%', mt: '10px' }, children: "Lock now" })] }) }) }));
+    return (jsx(Modal, { title: "You've Claimed oABOND!", children: jsx(Flex, { className: "ape:flex-col", children: jsxs(Flex, { className: "ape:flex-col ape:gap-[10px] ape:cursor-pointer", onClick: handleClick, children: [jsx(Flex, { children: "You can now stake your oABOND and turn it into veABOND at permalock:" }), jsx("img", { src: 'https://ape.bond/images/circular-staking/real-yield.png' }), jsx(Button, { className: "ape:w-full ape:mt-[10px]", children: "Lock now" })] }) }) }));
 };
 
 export { OabondModal as default };

package/dist/components/CustomClaimModals/OabondModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"OabondModal.js","sources":["../../../src/components/CustomClaimModals/OabondModal.tsx"],"sourcesContent":["import React from 'react'\nimport { Image } from 'theme-ui'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst OabondModal = () => {\n  const handleClick = () => {\n    window.location.href = 'https://ape.bond/true-yield?createPosition=oABOND'\n  }\n\n  return (\n    <Modal title=\"You've Claimed oABOND!\">\n      <Flex sx={{ flexDirection: 'column' }}>\n        <Flex sx={{ flexDirection: 'column', gap: '10px', cursor: 'pointer' }} onClick={handleClick}>\n          <Flex>You can now stake your oABOND and turn it into veABOND at permalock:</Flex>\n          <Image src={'https://ape.bond/images/circular-staking/real-yield.png'} />\n          <Button sx={{ width: '100%', mt: '10px' }}>Lock now</Button>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default OabondModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAMA,MAAM,WAAW,GAAG,MAAK;IACvB,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,mDAAmD;AAC5E,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,wBAAwB,EAAA,QAAA,EACnCA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EACnCC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,CACzFD,IAAC,IAAI,EAAA,EAAA,QAAA,EAAA,sEAAA,EAAA,CAA4E,EACjFA,GAAA,CAAC,KAAK,EAAA,EAAC,GAAG,EAAE,yDAAyD,GAAI,EACzEA,GAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,UAAA,EAAA,CAAmB,CAAA,EAAA,CACvD,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}
+{"version":3,"file":"OabondModal.js","sources":["../../../src/components/CustomClaimModals/OabondModal.tsx"],"sourcesContent":["import React from 'react'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst OabondModal = () => {\n  const handleClick = () => {\n    window.location.href = 'https://ape.bond/true-yield?createPosition=oABOND'\n  }\n\n  return (\n    <Modal title=\"You've Claimed oABOND!\">\n      <Flex className=\"ape:flex-col\">\n        <Flex className=\"ape:flex-col ape:gap-[10px] ape:cursor-pointer\" onClick={handleClick}>\n          <Flex>You can now stake your oABOND and turn it into veABOND at permalock:</Flex>\n          <img src={'https://ape.bond/images/circular-staking/real-yield.png'} />\n          <Button className=\"ape:w-full ape:mt-[10px]\">Lock now</Button>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default OabondModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKA,MAAM,WAAW,GAAG,MAAK;IACvB,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,mDAAmD;AAC5E,IAAA,CAAC;IAED,QACEA,IAAC,KAAK,EAAA,EAAC,KAAK,EAAC,wBAAwB,YACnCA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAC5BC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,gDAAgD,EAAC,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,CACnFD,IAAC,IAAI,EAAA,EAAA,QAAA,EAAA,sEAAA,EAAA,CAA4E,EACjFA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,yDAAyD,EAAA,CAAI,EACvEA,IAAC,MAAM,EAAA,EAAC,SAAS,EAAC,0BAA0B,yBAAkB,CAAA,EAAA,CACzD,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}

package/dist/components/CustomClaimModals/PmusdModal.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 declare const PmusdModal: ({ onDismiss }: {
     onDismiss?: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default PmusdModal;

package/dist/components/CustomClaimModals/PmusdModal.js

@@ -1,17 +1,10 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Modal from '../uikit-sdk/Modal/index.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Button from '../uikit-sdk/Button/Button.js';
 
 const PmusdModal = ({ onDismiss }) => {
-    return (jsx(Modal, { title: "You've Claimed pmUSD!", children: jsx(Flex, { sx: { flexDirection: 'column' }, children: jsxs(Flex, { sx: { flexDirection: 'column', gap: '10px' }, children: [jsxs(Flex, { sx: {
-                            fontWeight: 500,
-                            fontSize: '14px',
-                            textAlign: 'left',
-                            color: 'textDisabledButton',
-                            my: '10px',
-                            display: 'block',
-                        }, children: ["Base pmUSD rewards succesfully claimed. The additional PVE rewards (10\u201315%) will be automatically transferred to your wallet within the next 24 hours. If you experience any issues or delay, please contact with", ' ', jsx("a", { href: "https://discord.gg/raac", target: "_blank", rel: "noreferrer", sx: { color: 'primaryButton' }, children: "RACC support channel" }), "."] }), jsx(Button, { sx: { width: '100%', mt: '10px' }, onClick: onDismiss, children: "close" })] }) }) }));
+    return (jsx(Modal, { title: "You've Claimed pmUSD!", children: jsx(Flex, { className: "ape:flex-col", children: jsxs(Flex, { className: "ape:flex-col ape:gap-[10px]", children: [jsxs(Flex, { className: "ape:font-medium ape:text-[14px] ape:text-left ape:text-text-disabled-button ape:my-[10px] ape:block", children: ["Base pmUSD rewards succesfully claimed. The additional PVE rewards (10\u201315%) will be automatically transferred to your wallet within the next 24 hours. If you experience any issues or delay, please contact with", ' ', jsx("a", { href: "https://discord.gg/raac", target: "_blank", rel: "noreferrer", className: "ape:text-primary-button", children: "RACC support channel" }), "."] }), jsx(Button, { className: "ape:w-full ape:mt-[10px]", onClick: onDismiss, children: "close" })] }) }) }));
 };
 
 export { PmusdModal as default };

package/dist/components/CustomClaimModals/PmusdModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"PmusdModal.js","sources":["../../../src/components/CustomClaimModals/PmusdModal.tsx"],"sourcesContent":["import React from 'react'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst PmusdModal = ({ onDismiss }: { onDismiss?: () => void }) => {\n  return (\n    <Modal title=\"You've Claimed pmUSD!\">\n      <Flex sx={{ flexDirection: 'column' }}>\n        <Flex sx={{ flexDirection: 'column', gap: '10px' }}>\n          <Flex\n            sx={{\n              fontWeight: 500,\n              fontSize: '14px',\n              textAlign: 'left',\n              color: 'textDisabledButton',\n              my: '10px',\n              display: 'block',\n            }}\n          >\n            Base pmUSD rewards succesfully claimed. The additional PVE rewards (10–15%) will be automatically\n            transferred to your wallet within the next 24 hours. If you experience any issues or delay, please contact\n            with{' '}\n            <a href=\"https://discord.gg/raac\" target=\"_blank\" rel=\"noreferrer\" sx={{ color: 'primaryButton' }}>\n              RACC support channel\n            </a>\n            .\n          </Flex>\n          <Button sx={{ width: '100%', mt: '10px' }} onClick={onDismiss}>\n            close\n          </Button>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default PmusdModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKA,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAA8B,KAAI;AAC/D,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,uBAAuB,EAAA,QAAA,EAClCA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EACnCC,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAChDA,KAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,4BAAA,UAAU,EAAE,GAAG;AACf,4BAAA,QAAQ,EAAE,MAAM;AAChB,4BAAA,SAAS,EAAE,MAAM;AACjB,4BAAA,KAAK,EAAE,oBAAoB;AAC3B,4BAAA,EAAE,EAAE,MAAM;AACV,4BAAA,OAAO,EAAE,OAAO;yBACjB,EAAA,QAAA,EAAA,CAAA,wNAAA,EAII,GAAG,EACRD,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,yBAAyB,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,EAAA,QAAA,EAAA,sBAAA,EAAA,CAE7F,EAAA,GAAA,CAAA,EAAA,CAEC,EACPA,GAAA,CAAC,MAAM,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,sBAEpD,CAAA,EAAA,CACJ,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}
+{"version":3,"file":"PmusdModal.js","sources":["../../../src/components/CustomClaimModals/PmusdModal.tsx"],"sourcesContent":["import React from 'react'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst PmusdModal = ({ onDismiss }: { onDismiss?: () => void }) => {\n  return (\n    <Modal title=\"You've Claimed pmUSD!\">\n      <Flex className=\"ape:flex-col\">\n        <Flex className=\"ape:flex-col ape:gap-[10px]\">\n          <Flex className=\"ape:font-medium ape:text-[14px] ape:text-left ape:text-text-disabled-button ape:my-[10px] ape:block\">\n            Base pmUSD rewards succesfully claimed. The additional PVE rewards (10–15%) will be automatically\n            transferred to your wallet within the next 24 hours. If you experience any issues or delay, please contact\n            with{' '}\n            <a href=\"https://discord.gg/raac\" target=\"_blank\" rel=\"noreferrer\" className=\"ape:text-primary-button\">\n              RACC support channel\n            </a>\n            .\n          </Flex>\n          <Button className=\"ape:w-full ape:mt-[10px]\" onClick={onDismiss}>\n            close\n          </Button>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default PmusdModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKA,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAA8B,KAAI;AAC/D,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,uBAAuB,EAAA,QAAA,EAClCA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAC5BC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAC3CA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,qGAAqG,EAAA,QAAA,EAAA,CAAA,wNAAA,EAG9G,GAAG,EACRD,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,yBAAyB,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,EAAC,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,sBAAA,EAAA,CAElG,EAAA,GAAA,CAAA,EAAA,CAEC,EACPA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAE,SAAS,EAAA,QAAA,EAAA,OAAA,EAAA,CAEtD,CAAA,EAAA,CACJ,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}

package/dist/components/CustomClaimModals/PostClaimModal.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 declare const PostClaimModal: ({ tokenSymbol, text, imgUrl, ctaUrl, }: {
     tokenSymbol: string;
     text: string;
     imgUrl: string;
     ctaUrl: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default PostClaimModal;

package/dist/components/CustomClaimModals/PostClaimModal.js

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
-import { Image } from 'theme-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Modal from '../uikit-sdk/Modal/index.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Button from '../uikit-sdk/Button/Button.js';
@@ -8,7 +7,7 @@ const PostClaimModal = ({ tokenSymbol, text, imgUrl, ctaUrl, }) => {
     const handleClick = () => {
         window.open(ctaUrl, '_blank');
     };
-    return (jsx(Modal, { title: `You've Claimed ${tokenSymbol}!`, children: jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsx(Flex, { sx: { fontSize: '12px', lineHeight: '20px', color: 'primaryButton', mt: '10px' }, children: "Did You Know?" }), jsxs(Flex, { sx: { flexDirection: 'column', gap: '10px' }, children: [jsx(Flex, { children: text }), jsx(Image, { src: imgUrl, onClick: handleClick, sx: { cursor: 'pointer' } }), jsx(Button, { sx: { width: '100%', mt: '10px' }, onClick: handleClick, children: "Claim now" })] })] }) }));
+    return (jsx(Modal, { title: `You've Claimed ${tokenSymbol}!`, children: jsxs(Flex, { className: "ape:flex-col", children: [jsx(Flex, { className: "ape:text-[12px] ape:leading-5 ape:text-primary-button ape:mt-[10px]", children: "Did You Know?" }), jsxs(Flex, { className: "ape:flex-col ape:gap-[10px]", children: [jsx(Flex, { children: text }), jsx("img", { src: imgUrl, onClick: handleClick, className: "ape:cursor-pointer" }), jsx(Button, { className: "ape:w-full ape:mt-[10px]", onClick: handleClick, children: "Claim now" })] })] }) }));
 };
 
 export { PostClaimModal as default };

package/dist/components/CustomClaimModals/PostClaimModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostClaimModal.js","sources":["../../../src/components/CustomClaimModals/PostClaimModal.tsx"],"sourcesContent":["import React from 'react'\nimport { Image } from 'theme-ui'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst PostClaimModal = ({\n  tokenSymbol,\n  text,\n  imgUrl,\n  ctaUrl,\n}: {\n  tokenSymbol: string\n  text: string\n  imgUrl: string\n  ctaUrl: string\n}) => {\n  const handleClick = () => {\n    window.open(ctaUrl, '_blank')\n  }\n\n  return (\n    <Modal title={`You've Claimed ${tokenSymbol}!`}>\n      <Flex sx={{ flexDirection: 'column' }}>\n        <Flex sx={{ fontSize: '12px', lineHeight: '20px', color: 'primaryButton', mt: '10px' }}>Did You Know?</Flex>\n        <Flex sx={{ flexDirection: 'column', gap: '10px' }}>\n          <Flex>{text}</Flex>\n          <Image src={imgUrl} onClick={handleClick} sx={{ cursor: 'pointer' }} />\n          <Button sx={{ width: '100%', mt: '10px' }} onClick={handleClick}>\n            Claim now\n          </Button>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default PostClaimModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAMA,MAAM,cAAc,GAAG,CAAC,EACtB,WAAW,EACX,IAAI,EACJ,MAAM,EACN,MAAM,GAMP,KAAI;IACH,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC;AAC/B,IAAA,CAAC;IAED,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAE,CAAA,eAAA,EAAkB,WAAW,CAAA,CAAA,CAAG,EAAA,QAAA,EAC5CC,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACnCD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,eAAA,EAAA,CAAsB,EAC5GC,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAChDD,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAE,IAAI,EAAA,CAAQ,EACnBA,GAAA,CAAC,KAAK,IAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAA,CAAI,EACvEA,GAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,WAAA,EAAA,CAEtD,CAAA,EAAA,CACJ,CAAA,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}
+{"version":3,"file":"PostClaimModal.js","sources":["../../../src/components/CustomClaimModals/PostClaimModal.tsx"],"sourcesContent":["import React from 'react'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst PostClaimModal = ({\n  tokenSymbol,\n  text,\n  imgUrl,\n  ctaUrl,\n}: {\n  tokenSymbol: string\n  text: string\n  imgUrl: string\n  ctaUrl: string\n}) => {\n  const handleClick = () => {\n    window.open(ctaUrl, '_blank')\n  }\n\n  return (\n    <Modal title={`You've Claimed ${tokenSymbol}!`}>\n      <Flex className=\"ape:flex-col\">\n        <Flex className=\"ape:text-[12px] ape:leading-5 ape:text-primary-button ape:mt-[10px]\">Did You Know?</Flex>\n        <Flex className=\"ape:flex-col ape:gap-[10px]\">\n          <Flex>{text}</Flex>\n          <img src={imgUrl} onClick={handleClick} className=\"ape:cursor-pointer\" />\n          <Button className=\"ape:w-full ape:mt-[10px]\" onClick={handleClick}>\n            Claim now\n          </Button>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default PostClaimModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKA,MAAM,cAAc,GAAG,CAAC,EACtB,WAAW,EACX,IAAI,EACJ,MAAM,EACN,MAAM,GAMP,KAAI;IACH,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC;AAC/B,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAE,CAAA,eAAA,EAAkB,WAAW,CAAA,CAAA,CAAG,EAAA,QAAA,EAC5CC,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,qEAAqE,EAAA,QAAA,EAAA,eAAA,EAAA,CAAqB,EAC1GC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAC3CD,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAE,IAAI,EAAA,CAAQ,EACnBA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAC,oBAAoB,EAAA,CAAG,EACzEA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,WAAA,EAAA,CAExD,CAAA,EAAA,CACJ,CAAA,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}

package/dist/components/FavIcons/AddFavToken.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const AddFavToken: ({ tokenSymbol, hotBond }: {
     tokenSymbol?: string;
     hotBond?: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default AddFavToken;

package/dist/components/FavIcons/AddFavToken.js

@@ -1,4 +1,4 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import useFavoriteTokens from '../../state/favoriteTokens/useFavoriteTokens.js';
@@ -13,7 +13,7 @@ const AddFavToken = ({ tokenSymbol, hotBond }) => {
     useEffect(() => {
         setIsFavToken(favTokens.includes(tokenSymbol?.toLowerCase() ?? ''));
     }, [favTokens, tokenSymbol]);
-    return (jsx(Flex, { sx: { justifyContent: 'center', alignItems: 'center', width: '100%', p: '0 5px' }, onClick: (event) => {
+    return (jsx(Flex, { className: "ape:justify-center ape:items-center ape:w-full", style: { padding: '0 5px' }, onClick: (event) => {
             event.stopPropagation();
             setIsFavToken(true);
             addFavToken(tokenSymbol ?? '');

package/dist/components/FavIcons/AddFavToken.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddFavToken.js","sources":["../../../src/components/FavIcons/AddFavToken.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport useFavoriteTokens from '../../state/favoriteTokens/useFavoriteTokens'\nimport Flex from '../uikit-sdk/Flex'\nimport StarFilled from '../uikit-sdk/Svg/Icons/StarFilled'\nimport Star from '../uikit-sdk/Svg/Icons/Star'\nimport FirePink from '../uikit-sdk/Svg/Icons/FirePink'\n\nconst AddFavToken = ({ tokenSymbol, hotBond }: { tokenSymbol?: string; hotBond?: boolean }) => {\n  const { favTokens, addFavToken } = useFavoriteTokens()\n  const [isFavToken, setIsFavToken] = useState(false)\n  useEffect(() => {\n    setIsFavToken(favTokens.includes(tokenSymbol?.toLowerCase() ?? ''))\n  }, [favTokens, tokenSymbol])\n\n  return (\n    <Flex\n      sx={{ justifyContent: 'center', alignItems: 'center', width: '100%', p: '0 5px' }}\n      onClick={(event: React.MouseEvent) => {\n        event.stopPropagation()\n        setIsFavToken(true)\n        addFavToken(tokenSymbol ?? '')\n      }}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.div\n          key={isFavToken ? 'StarFilled' : 'Star'}\n          initial={false}\n          animate={{ opacity: 1, scale: 1.0 }}\n          exit={{ opacity: 0, scale: 0.8 }}\n          transition={{ duration: 0.2 }}\n          style={{ display: 'flex' }}\n        >\n          {isFavToken ? (\n            <StarFilled width={22} height={22} color={'#DE62F3'} />\n          ) : hotBond ? (\n            <FirePink width={25} height={25} color={'#73728E'} />\n          ) : (\n            <Star width={20} height={20} color={'#73728E'} />\n          )}\n        </motion.div>\n      </AnimatePresence>\n    </Flex>\n  )\n}\n\nexport default AddFavToken\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAQA,MAAM,WAAW,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAA+C,KAAI;IAC5F,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,iBAAiB,EAAE;IACtD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACnD,SAAS,CAAC,MAAK;AACb,QAAA,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;AACrE,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE5B,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,EACjF,OAAO,EAAE,CAAC,KAAuB,KAAI;YACnC,KAAK,CAAC,eAAe,EAAE;YACvB,aAAa,CAAC,IAAI,CAAC;AACnB,YAAA,WAAW,CAAC,WAAW,IAAI,EAAE,CAAC;AAChC,QAAA,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,eAAe,EAAA,EAAC,IAAI,EAAC,MAAM,EAAA,QAAA,EAC1BA,GAAA,CAAC,MAAM,CAAC,GAAG,IAET,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EACnC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAChC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAEzB,UAAU,IACTA,GAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,IACrD,OAAO,IACTA,GAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,GAAI,KAErDA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,CAClD,EAAA,EAbI,UAAU,GAAG,YAAY,GAAG,MAAM,CAc5B,EAAA,CACG,EAAA,CACb;AAEX;;;;"}
+{"version":3,"file":"AddFavToken.js","sources":["../../../src/components/FavIcons/AddFavToken.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport useFavoriteTokens from '../../state/favoriteTokens/useFavoriteTokens'\nimport Flex from '../uikit-sdk/Flex'\nimport StarFilled from '../uikit-sdk/Svg/Icons/StarFilled'\nimport Star from '../uikit-sdk/Svg/Icons/Star'\nimport FirePink from '../uikit-sdk/Svg/Icons/FirePink'\n\nconst AddFavToken = ({ tokenSymbol, hotBond }: { tokenSymbol?: string; hotBond?: boolean }) => {\n  const { favTokens, addFavToken } = useFavoriteTokens()\n  const [isFavToken, setIsFavToken] = useState(false)\n  useEffect(() => {\n    setIsFavToken(favTokens.includes(tokenSymbol?.toLowerCase() ?? ''))\n  }, [favTokens, tokenSymbol])\n\n  return (\n    <Flex\n      className=\"ape:justify-center ape:items-center ape:w-full\"\n      style={{ padding: '0 5px' }}\n      onClick={(event: React.MouseEvent) => {\n        event.stopPropagation()\n        setIsFavToken(true)\n        addFavToken(tokenSymbol ?? '')\n      }}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.div\n          key={isFavToken ? 'StarFilled' : 'Star'}\n          initial={false}\n          animate={{ opacity: 1, scale: 1.0 }}\n          exit={{ opacity: 0, scale: 0.8 }}\n          transition={{ duration: 0.2 }}\n          style={{ display: 'flex' }}\n        >\n          {isFavToken ? (\n            <StarFilled width={22} height={22} color={'#DE62F3'} />\n          ) : hotBond ? (\n            <FirePink width={25} height={25} color={'#73728E'} />\n          ) : (\n            <Star width={20} height={20} color={'#73728E'} />\n          )}\n        </motion.div>\n      </AnimatePresence>\n    </Flex>\n  )\n}\n\nexport default AddFavToken\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAQA,MAAM,WAAW,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAA+C,KAAI;IAC5F,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,iBAAiB,EAAE;IACtD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACnD,SAAS,CAAC,MAAK;AACb,QAAA,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;AACrE,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IAE5B,QACEA,IAAC,IAAI,EAAA,EACH,SAAS,EAAC,gDAAgD,EAC1D,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,OAAO,EAAE,CAAC,KAAuB,KAAI;YACnC,KAAK,CAAC,eAAe,EAAE;YACvB,aAAa,CAAC,IAAI,CAAC;AACnB,YAAA,WAAW,CAAC,WAAW,IAAI,EAAE,CAAC;AAChC,QAAA,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,eAAe,EAAA,EAAC,IAAI,EAAC,MAAM,EAAA,QAAA,EAC1BA,GAAA,CAAC,MAAM,CAAC,GAAG,IAET,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EACnC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAChC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAEzB,UAAU,IACTA,GAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,IACrD,OAAO,IACTA,GAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,GAAI,KAErDA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,CAClD,EAAA,EAbI,UAAU,GAAG,YAAY,GAAG,MAAM,CAc5B,EAAA,CACG,EAAA,CACb;AAEX;;;;"}