@ape.swap/bonds-sdk 6.2.13 → 6.2.14

package/dist/components/ConnectAptosWalletButton/ConnectAptosWalletButton.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx } from 'theme-ui/jsx-runtime';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import { openAptosWalletConnector } from '../../config/constants/walletConnectors.js';
 import Flex from '../uikit-sdk/Flex/index.js';
@@ -20,7 +20,12 @@ import Button from '../uikit-sdk/Button/Button.js';
 const ConnectAptosWalletButton = ({ navBarFlag }) => {
     const config = useSDKConfig();
     const handleConnect = config?.openWalletConnectors?.aptos ? openAptosWalletConnector : undefined;
-    return (jsx(Flex, { className: "ape:h-full ape:items-center", style: { width: navBarFlag ? 'auto' : '100%' }, children: jsx(Button, { fullWidth: true, onClick: handleConnect, className: "ape:p-[10px]", style: { height: navBarFlag ? '32.5px' : '45px', backgroundColor: navBarFlag ? '#00c59a' : undefined }, disabled: !handleConnect, children: "Connect to Aptos" }) }));
+    return (jsx(Flex, { sx: { height: '100%', width: navBarFlag ? 'auto' : '100%', alignItems: 'center' }, children: jsx(Button, { fullWidth: true, onClick: handleConnect, sx: {
+                height: navBarFlag ? '32.5px' : '45px',
+                padding: '10px 10px',
+                alignItems: 'center',
+                backgroundColor: navBarFlag ? '#00c59a' : '',
+            }, disabled: !handleConnect, children: "Connect to Aptos" }) }));
 };
 
 export { ConnectAptosWalletButton as default };

package/dist/components/ConnectAptosWalletButton/ConnectAptosWalletButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectAptosWalletButton.js","sources":["../../../src/components/ConnectAptosWalletButton/ConnectAptosWalletButton.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'\n\n// Minimal wrapper around `@aptos-labs/wallet-adapter-ant-design::WalletSelector`,\n// structured identically to `ConnectSolanaWalletButton`. The ant-design\n// component ships a prebuilt modal that auto-detects every AIP-62 wallet\n// (Petra, Pontem, Martian, Nightly, OKX, …) — we just control its visibility\n// from our button.\n//\n// Note: `WalletSelector` renders two things — a `.wallet-button` trigger and\n// the modal itself (the modal is a portal into document.body). We only want\n// the modal here; the trigger would double up with our themed Connect button.\n// Wrapping the `WalletSelector` in a `display: none` div hides the trigger\n// while leaving the portal-mounted modal fully functional. This is the\n// lightest-touch workaround that avoids forking or css-overriding the\n// ant-design component.\nconst ConnectAptosWalletButton = ({ navBarFlag }: { navBarFlag?: boolean }) => {\n  const config = useSDKConfig()\n  const handleConnect = config?.openWalletConnectors?.aptos ? openAptosWalletConnector : undefined\n\n  return (\n    <Flex className=\"ape:h-full ape:items-center\" style={{ width: navBarFlag ? 'auto' : '100%' }}>\n      <Button\n        fullWidth\n        onClick={handleConnect}\n        className=\"ape:p-[10px]\"\n        style={{ height: navBarFlag ? '32.5px' : '45px', backgroundColor: navBarFlag ? '#00c59a' : undefined }}\n        disabled={!handleConnect}\n      >\n        Connect to Aptos\n      </Button>\n    </Flex>\n  )\n}\n\nexport default ConnectAptosWalletButton\n"],"names":["_jsx"],"mappings":";;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,wBAAwB,GAAG,CAAC,EAAE,UAAU,EAA4B,KAAI;AAC5E,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,KAAK,GAAG,wBAAwB,GAAG,SAAS;AAEhG,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6BAA6B,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,EAAE,YAC1FA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,QACT,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE,EAAE,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,EAAE,eAAe,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,EAAE,EACtG,QAAQ,EAAE,CAAC,aAAa,EAAA,QAAA,EAAA,kBAAA,EAAA,CAGjB,EAAA,CACJ;AAEX;;;;"}
+{"version":3,"file":"ConnectAptosWalletButton.js","sources":["../../../src/components/ConnectAptosWalletButton/ConnectAptosWalletButton.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'\n\n// Minimal wrapper around `@aptos-labs/wallet-adapter-ant-design::WalletSelector`,\n// structured identically to `ConnectSolanaWalletButton`. The ant-design\n// component ships a prebuilt modal that auto-detects every AIP-62 wallet\n// (Petra, Pontem, Martian, Nightly, OKX, …) — we just control its visibility\n// from our button.\n//\n// Note: `WalletSelector` renders two things — a `.wallet-button` trigger and\n// the modal itself (the modal is a portal into document.body). We only want\n// the modal here; the trigger would double up with our themed Connect button.\n// Wrapping the `WalletSelector` in a `display: none` div hides the trigger\n// while leaving the portal-mounted modal fully functional. This is the\n// lightest-touch workaround that avoids forking or css-overriding the\n// ant-design component.\nconst ConnectAptosWalletButton = ({ navBarFlag }: { navBarFlag?: boolean }) => {\n  const config = useSDKConfig()\n  const handleConnect = config?.openWalletConnectors?.aptos ? openAptosWalletConnector : undefined\n\n  return (\n    <Flex sx={{ height: '100%', width: navBarFlag ? 'auto' : '100%', alignItems: 'center' }}>\n      <Button\n        fullWidth\n        onClick={handleConnect}\n        sx={{\n          height: navBarFlag ? '32.5px' : '45px',\n          padding: '10px 10px',\n          alignItems: 'center',\n          backgroundColor: navBarFlag ? '#00c59a' : '',\n        }}\n        disabled={!handleConnect}\n      >\n        Connect to Aptos\n      </Button>\n    </Flex>\n  )\n}\n\nexport default ConnectAptosWalletButton\n"],"names":["_jsx"],"mappings":";;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,wBAAwB,GAAG,CAAC,EAAE,UAAU,EAA4B,KAAI;AAC5E,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,KAAK,GAAG,wBAAwB,GAAG,SAAS;AAEhG,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EACrFA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAA,IAAA,EACT,OAAO,EAAE,aAAa,EACtB,EAAE,EAAE;gBACF,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM;AACtC,gBAAA,OAAO,EAAE,WAAW;AACpB,gBAAA,UAAU,EAAE,QAAQ;gBACpB,eAAe,EAAE,UAAU,GAAG,SAAS,GAAG,EAAE;AAC7C,aAAA,EACD,QAAQ,EAAE,CAAC,aAAa,EAAA,QAAA,EAAA,kBAAA,EAAA,CAGjB,EAAA,CACJ;AAEX;;;;"}

package/dist/components/ConnectButton/index.d.ts

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

package/dist/components/ConnectButton/index.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx } from 'theme-ui/jsx-runtime';
 import Button from '../uikit-sdk/Button/Button.js';
 import { openEvmWalletConnector } from '../../config/constants/walletConnectors.js';
 import { useSDKConfig } from '../../state/useSDKConfig.js';

package/dist/components/ConnectSolanaWalletButton/ConnectSolanaWalletButton.d.ts

@@ -1,4 +1,4 @@
 declare const ConnectSolanaWallet: ({ navBarFlag }: {
     navBarFlag?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ConnectSolanaWallet;

package/dist/components/ConnectSolanaWalletButton/ConnectSolanaWalletButton.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx } from 'theme-ui/jsx-runtime';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import { openSolWalletConnector } from '../../config/constants/walletConnectors.js';
 import Flex from '../uikit-sdk/Flex/index.js';
@@ -7,7 +7,12 @@ import Button from '../uikit-sdk/Button/Button.js';
 const ConnectSolanaWallet = ({ navBarFlag }) => {
     const config = useSDKConfig();
     const handleConnect = config?.openWalletConnectors?.sol ? openSolWalletConnector : undefined;
-    return (jsx(Flex, { className: "ape:h-full ape:items-center", style: { width: navBarFlag ? 'auto' : '100%' }, children: jsx(Button, { fullWidth: true, onClick: handleConnect, className: "ape:p-[10px]", style: { height: navBarFlag ? '32.5px' : '45px', backgroundColor: navBarFlag ? '#00c59a' : undefined }, disabled: !handleConnect, children: "Connect to Solana" }) }));
+    return (jsx(Flex, { sx: { height: '100%', width: navBarFlag ? 'auto' : '100%', alignItems: 'center' }, children: jsx(Button, { fullWidth: true, onClick: handleConnect, sx: {
+                height: navBarFlag ? '32.5px' : '45px',
+                padding: '10px 10px',
+                alignItems: 'center',
+                backgroundColor: navBarFlag ? '#00c59a' : '',
+            }, disabled: !handleConnect, children: "Connect to Solana" }) }));
 };
 
 export { ConnectSolanaWallet as default };

package/dist/components/ConnectSolanaWalletButton/ConnectSolanaWalletButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectSolanaWalletButton.js","sources":["../../../src/components/ConnectSolanaWalletButton/ConnectSolanaWalletButton.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'\n\nconst ConnectSolanaWallet = ({ navBarFlag }: { navBarFlag?: boolean }) => {\n  const config = useSDKConfig()\n  const handleConnect = config?.openWalletConnectors?.sol ? openSolWalletConnector : undefined\n\n  return (\n    <Flex className=\"ape:h-full ape:items-center\" style={{ width: navBarFlag ? 'auto' : '100%' }}>\n      <Button\n        fullWidth\n        onClick={handleConnect}\n        className=\"ape:p-[10px]\"\n        style={{ height: navBarFlag ? '32.5px' : '45px', backgroundColor: navBarFlag ? '#00c59a' : undefined }}\n        disabled={!handleConnect}\n      >\n        Connect to Solana\n      </Button>\n    </Flex>\n  )\n}\n\nexport default ConnectSolanaWallet\n"],"names":["_jsx"],"mappings":";;;;;;AAKA,MAAM,mBAAmB,GAAG,CAAC,EAAE,UAAU,EAA4B,KAAI;AACvE,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,GAAG,GAAG,sBAAsB,GAAG,SAAS;AAE5F,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6BAA6B,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,EAAE,YAC1FA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,QACT,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE,EAAE,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,EAAE,eAAe,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,EAAE,EACtG,QAAQ,EAAE,CAAC,aAAa,EAAA,QAAA,EAAA,mBAAA,EAAA,CAGjB,EAAA,CACJ;AAEX;;;;"}
+{"version":3,"file":"ConnectSolanaWalletButton.js","sources":["../../../src/components/ConnectSolanaWalletButton/ConnectSolanaWalletButton.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'\n\nconst ConnectSolanaWallet = ({ navBarFlag }: { navBarFlag?: boolean }) => {\n  const config = useSDKConfig()\n  const handleConnect = config?.openWalletConnectors?.sol ? openSolWalletConnector : undefined\n\n  return (\n    <Flex sx={{ height: '100%', width: navBarFlag ? 'auto' : '100%', alignItems: 'center' }}>\n      <Button\n        fullWidth\n        onClick={handleConnect}\n        sx={{\n          height: navBarFlag ? '32.5px' : '45px',\n          padding: '10px 10px',\n          alignItems: 'center',\n          backgroundColor: navBarFlag ? '#00c59a' : '',\n        }}\n        disabled={!handleConnect}\n      >\n        Connect to Solana\n      </Button>\n    </Flex>\n  )\n}\n\nexport default ConnectSolanaWallet\n"],"names":["_jsx"],"mappings":";;;;;;AAKA,MAAM,mBAAmB,GAAG,CAAC,EAAE,UAAU,EAA4B,KAAI;AACvE,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,GAAG,GAAG,sBAAsB,GAAG,SAAS;AAE5F,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EACrFA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAA,IAAA,EACT,OAAO,EAAE,aAAa,EACtB,EAAE,EAAE;gBACF,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM;AACtC,gBAAA,OAAO,EAAE,WAAW;AACpB,gBAAA,UAAU,EAAE,QAAQ;gBACpB,eAAe,EAAE,UAAU,GAAG,SAAS,GAAG,EAAE;AAC7C,aAAA,EACD,QAAQ,EAAE,CAAC,aAAa,EAAA,QAAA,EAAA,mBAAA,EAAA,CAGjB,EAAA,CACJ;AAEX;;;;"}

package/dist/components/ConnectSuiWalletButton/ConnectSuiWalletButton.d.ts

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

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

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

package/dist/components/ConnectoToVmBanners/ConnectToAptosBanner.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import { openAptosWalletConnector } from '../../config/constants/walletConnectors.js';
 import Flex from '../uikit-sdk/Flex/index.js';
@@ -14,7 +14,36 @@ import APTOS from '../uikit-sdk/Svg/tokens/APTOS.js';
 function ConnectToAptosBanner() {
     const config = useSDKConfig();
     const handleConnect = config?.openWalletConnectors?.aptos ? openAptosWalletConnector : undefined;
-    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" }) })] }));
+    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" }) })] }));
 }
 
 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      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;;;;"}
+{"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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"}

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

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

package/dist/components/ConnectoToVmBanners/ConnectToEvmBanner.js

@@ -1,10 +1,49 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/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, { 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, {}) })] }));
+    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, {}) })] }));
 }
 
 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 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;;;;"}
+{"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;;;;"}

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

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

package/dist/components/ConnectoToVmBanners/ConnectToSolanaBanner.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import { openSolWalletConnector } from '../../config/constants/walletConnectors.js';
 import Flex from '../uikit-sdk/Flex/index.js';
@@ -8,17 +8,41 @@ import Text from '../uikit-sdk/Text/index.js';
 function ConnectToSolanaCard() {
     const config = useSDKConfig();
     const handleConnect = config?.openWalletConnectors?.sol ? openSolWalletConnector : undefined;
-    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: {
+    return (jsxs(Flex, { sx: {
+            width: '100%',
+            height: '75px',
             background: `url('https://ape.bond/images/connect-to-vm/solana-card-background.png') no-repeat center center`,
             backgroundSize: 'cover',
-        }, 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" }) })] }));
+            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" }) })] }));
 }
 
 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      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;;;;"}
+{"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;;;;"}

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

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

package/dist/components/ConnectoToVmBanners/ConnectToSuiBanner.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import { openSuiWalletConnector } from '../../config/constants/walletConnectors.js';
 import Flex from '../uikit-sdk/Flex/index.js';
@@ -9,7 +9,36 @@ import SUI from '../uikit-sdk/Svg/tokens/SUI.js';
 function ConnectToSuiBanner() {
     const config = useSDKConfig();
     const handleConnect = config?.openWalletConnectors?.sui ? openSuiWalletConnector : undefined;
-    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" }) })] }));
+    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" }) })] }));
 }
 
 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      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;;;;"}
+{"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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"}

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

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

package/dist/components/CustomClaimModals/AbondModal.js

@@ -1,4 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { Image } from 'theme-ui';
 import Modal from '../uikit-sdk/Modal/index.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Button from '../uikit-sdk/Button/Button.js';
@@ -7,7 +8,7 @@ const AbondModal = () => {
     const handleClick = () => {
         window.location.href = 'https://ape.bond/true-yield';
     };
-    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" })] })] }) }));
+    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" })] })] }) }));
 };
 
 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 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;;;;"}
+{"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;;;;"}

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

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

package/dist/components/CustomClaimModals/OabondModal.js

@@ -1,4 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { Image } from 'theme-ui';
 import Modal from '../uikit-sdk/Modal/index.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Button from '../uikit-sdk/Button/Button.js';
@@ -7,7 +8,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, { 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" })] }) }) }));
+    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" })] }) }) }));
 };
 
 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 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;;;;"}
+{"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;;;;"}

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

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

package/dist/components/CustomClaimModals/PmusdModal.js

@@ -1,10 +1,17 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'theme-ui/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, { 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" })] }) }) }));
+    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" })] }) }) }));
 };
 
 export { PmusdModal as default };