@ape.swap/bonds-sdk 6.2.13 → 6.2.14

package/dist/components/TokenInfoAndName/index.js

@@ -1,5 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { NETWORK_ICONS } from '../../config/constants/chains.js';
 import TokenImage from '../uikit-sdk/TokenImage/index.js';
 import AddFavToken from '../FavIcons/AddFavToken.js';
@@ -35,17 +34,28 @@ const NETWORK_COLORS = {
     [ChainId.APTOS]: 'rgb(240 111 126 / 0.3)',
     [ChainId.SUI]: '#6fbcf04d',
 };
-const TokenInfoAndName = ({ tokenSymbol, chain, tag, vestEnds, isHotBond, marketingCampaign, cardsView, }) => {
+const TokenInfoAndName = ({ tokenSymbol, chain, tag, vestEnds, isHotBond, marketingCampaign, }) => {
     const ChainIcon = (chain && NETWORK_ICONS[chain]) || Question;
-    return (jsxs(Flex, { className: clsx('tokeninfoname container ape:w-full ape:relative ape:h-full ape:rounded-[10px]', cardsView
-            ? 'ape:flex-col ape:items-start ape:gap-[10px] ape:pl-0 ape:pt-[5px] ape:justify-start'
-            : 'ape:justify-start ape:items-center ape:pl-[20px]'), children: [jsx(Flex, { className: "ape:absolute ape:left-0 ape:top-0 ape:w-[125px] ape:h-full ape:rounded-normal", style: {
+    return (jsxs(Flex, { className: "tokeninfoname container", children: [jsx(Flex, { sx: {
+                    width: '125px',
+                    height: '100%',
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    borderRadius: 'normal',
                     background: isHotBond
                         ? 'transparent'
                         : `linear-gradient(90deg, ${chain ? NETWORK_COLORS[chain] : '#FFFFFF33'} 0%, rgba(0,0,0,0) 75%)`,
-                } }), jsx(Flex, { className: clsx('tokeninfoname chain ape:absolute ape:left-0 ape:top-0 ape:overflow-hidden ape:rounded-tl-[10px] ape:rounded-br-[8px] ape:z-[5]', cardsView && 'ape:hidden'), children: jsx(ChainIcon, { width: 20, height: 20 }) }), jsxs(Flex, { className: clsx('tokeninfoname tokencontainer ape:pl-[6px] ape:w-full ape:items-center', cardsView
-                    ? 'ape:max-w-full ape:pl-0'
-                    : 'ape:max-w-[175px] ape:md:max-w-[140px] ape:lg:max-w-[190px]', !cardsView && (vestEnds ? 'ape:mt-[10px] ape:lg:mt-0' : 'ape:mt-0')), children: [jsxs(Flex, { className: "ape:relative ape:min-w-[33px]", children: [jsx(Flex, { style: MCTokenIconStyles[marketingCampaign] }), jsx(TokenImage, { symbol: tokenSymbol === 'AIX' && chain === ChainId.SOL ? 'SOLAIX' : tokenSymbol, size: 33 })] }), jsxs(Flex, { className: "tokeninfoname tokentext ape:ml-[10px] ape:font-bold ape:w-full ape:flex-col", children: [jsx(Flex, { className: "ape:justify-between ape:w-full ape:items-center", children: jsx(Text, { className: "ape:text-[12px]! ape:md:text-[14px]! ape:lg:text-[16px]!", children: tokenSymbol }) }), vestEnds && jsx(Flex, { className: "ape:text-[12px] ape:font-normal ape:opacity-60 ape:leading-[14px]", children: vestEnds })] }), jsx(Flex, { className: "tokeninfofav ape:min-w-[25px] ape:p-[5px]", children: jsx(AddFavToken, { tokenSymbol: tokenSymbol, hotBond: !vestEnds && isHotBond }) })] }), jsx(Flex, { className: clsx('ape:items-center', isHotBond ? 'ape:justify-center' : 'ape:justify-start'), children: jsx(Flex, { className: isHotBond ? 'ape:flex' : 'ape:hidden ape:xl:flex', children: (tag || marketingCampaign) && (jsx(ListTag, { text: MCTagNameMapping[marketingCampaign] || tag, marketingCampaign: marketingCampaign })) }) })] }));
+                } }), jsx(Flex, { className: "tokeninfoname chain", children: jsx(ChainIcon, { width: 20, height: 20 }) }), jsxs(Flex, { className: "tokeninfoname tokencontainer", sx: {
+                    marginTop: vestEnds ? ['10px', '10px', '10px', '0px'] : 0,
+                    maxWidth: ['175px', '175px', '140px', '190px', '190px'],
+                }, children: [jsxs(Flex, { sx: { position: 'relative', minWidth: '33px' }, children: [jsx(Flex, { sx: MCTokenIconStyles[marketingCampaign] }), jsx(TokenImage, { symbol: tokenSymbol === 'AIX' && chain === ChainId.SOL ? 'SOLAIX' : tokenSymbol, size: 33 })] }), jsxs(Flex, { className: "tokeninfoname tokentext", children: [jsx(Flex, { sx: { justifyContent: 'space-between', width: '100%', alignItems: 'center' }, children: jsx(Text, { sx: { fontSize: ['12px', '12px', '14px', '16px'] }, children: tokenSymbol }) }), vestEnds && (jsx(Flex, { sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }, children: vestEnds }))] }), jsx(Flex, { className: "tokeninfofav", sx: {
+                            minWidth: '25px',
+                            p: '5px',
+                        }, children: jsx(AddFavToken, { tokenSymbol: tokenSymbol, hotBond: !vestEnds && isHotBond }) })] }), jsx(Flex, { sx: {
+                    justifyContent: isHotBond ? 'center' : 'flex-start',
+                    alignItems: 'center',
+                }, children: jsx(Flex, { sx: { display: isHotBond ? 'flex' : ['none', 'none', 'none', 'none', 'flex'] }, children: (tag || marketingCampaign) && (jsx(ListTag, { text: MCTagNameMapping[marketingCampaign] || tag, marketingCampaign: marketingCampaign })) }) })] }));
 };
 
 export { TokenInfoAndName as default };

package/dist/components/TokenInfoAndName/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/TokenInfoAndName/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { NETWORK_ICONS } from '../../config/constants/chains'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport AddFavToken from '../FavIcons/AddFavToken'\nimport { ChainId, MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport { MCTagNameMapping, MCTokenIconStyles } from '../../utils/campaignStyles'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport ListTag from '../uikit-sdk/Tag/ListTag'\nimport Question from '../uikit-sdk/Svg/Icons/Question'\n\nconst NETWORK_COLORS: Partial<Record<number, string>> = {\n  [ChainId.BSC]: '#F3BA2F4d',\n  [ChainId.MAINNET]: '#627eea4d',\n  [ChainId.MATIC]: '#8247e54d',\n  [ChainId.LIGHTLINK]: '#6087ff4d',\n  [ChainId.BASE]: '#0052ff4d',\n  [ChainId.ARBITRUM]: '#289fef4d',\n  [ChainId.LINEA]: '#ffffff4d',\n  [ChainId.IOTA]: '#ffffff4d',\n  [ChainId.GRAPHLINQ]: '#ded2ff4d',\n  [ChainId.AVAX]: '#e743444d',\n  [ChainId.BLAST]: '#fcfc034d',\n  [ChainId.CROSSFI]: '#7c80844d',\n  [ChainId.MONAD_TESTNET]: '#836EF94d',\n  [ChainId.MONAD]: '#836EF94d',\n  [ChainId.SOL]: '#836EF94d',\n  [ChainId.SONIC]: '#fb9a4c4d',\n  [ChainId.BERACHAIN]: '#783e244d',\n  [ChainId.KATANA]: '#068be34d',\n  [ChainId.UNICHAIN]: '#f50db44d',\n  [ChainId.MEGAETH_TESTNET]: '#DFD9D94d',\n  [ChainId.HYPEREVM]: '#ffffff4d',\n  [ChainId.APTOS]: 'rgb(240 111 126 / 0.3)',\n  [ChainId.SUI]: '#6fbcf04d',\n}\n\nconst TokenInfoAndName = ({\n  tokenSymbol,\n  chain,\n  tag,\n  vestEnds,\n  isHotBond,\n  marketingCampaign,\n  cardsView,\n}: {\n  tokenSymbol?: string\n  chain?: number\n  tag?: string\n  vestEnds?: string\n  isHotBond?: boolean\n  marketingCampaign?: MarketingCampaign\n  cardsView?: boolean\n}) => {\n  const ChainIcon = (chain && NETWORK_ICONS[chain]) || Question\n  return (\n    <Flex\n      className={clsx(\n        'tokeninfoname container ape:w-full ape:relative ape:h-full ape:rounded-[10px]',\n        cardsView\n          ? 'ape:flex-col ape:items-start ape:gap-[10px] ape:pl-0 ape:pt-[5px] ape:justify-start'\n          : 'ape:justify-start ape:items-center ape:pl-[20px]',\n      )}\n    >\n      <Flex\n        className=\"ape:absolute ape:left-0 ape:top-0 ape:w-[125px] ape:h-full ape:rounded-normal\"\n        style={{\n          background: isHotBond\n            ? 'transparent'\n            : `linear-gradient(90deg, ${chain ? NETWORK_COLORS[chain] : '#FFFFFF33'} 0%, rgba(0,0,0,0) 75%)`,\n        }}\n      />\n      <Flex\n        className={clsx(\n          'tokeninfoname chain ape:absolute ape:left-0 ape:top-0 ape:overflow-hidden ape:rounded-tl-[10px] ape:rounded-br-[8px] ape:z-[5]',\n          cardsView && 'ape:hidden',\n        )}\n      >\n        <ChainIcon width={20} height={20} />\n      </Flex>\n      <Flex\n        className={clsx(\n          'tokeninfoname tokencontainer ape:pl-[6px] ape:w-full ape:items-center',\n          cardsView\n            ? 'ape:max-w-full ape:pl-0'\n            : 'ape:max-w-[175px] ape:md:max-w-[140px] ape:lg:max-w-[190px]',\n          !cardsView && (vestEnds ? 'ape:mt-[10px] ape:lg:mt-0' : 'ape:mt-0'),\n        )}\n      >\n        <Flex className=\"ape:relative ape:min-w-[33px]\">\n          <Flex style={MCTokenIconStyles[marketingCampaign!]} />\n          <TokenImage symbol={tokenSymbol === 'AIX' && chain === ChainId.SOL ? 'SOLAIX' : tokenSymbol} size={33} />\n        </Flex>\n        <Flex className=\"tokeninfoname tokentext ape:ml-[10px] ape:font-bold ape:w-full ape:flex-col\">\n          <Flex className=\"ape:justify-between ape:w-full ape:items-center\">\n            <Text className=\"ape:text-[12px]! ape:md:text-[14px]! ape:lg:text-[16px]!\">{tokenSymbol}</Text>\n          </Flex>\n          {vestEnds && <Flex className=\"ape:text-[12px] ape:font-normal ape:opacity-60 ape:leading-[14px]\">{vestEnds}</Flex>}\n        </Flex>\n        <Flex className=\"tokeninfofav ape:min-w-[25px] ape:p-[5px]\">\n          <AddFavToken tokenSymbol={tokenSymbol} hotBond={!vestEnds && isHotBond} />\n        </Flex>\n      </Flex>\n      <Flex className={clsx('ape:items-center', isHotBond ? 'ape:justify-center' : 'ape:justify-start')}>\n        <Flex className={isHotBond ? 'ape:flex' : 'ape:hidden ape:xl:flex'}>\n          {(tag || marketingCampaign) && (\n            <ListTag text={MCTagNameMapping[marketingCampaign!] || tag} marketingCampaign={marketingCampaign} />\n          )}\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default TokenInfoAndName\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/TokenInfoAndName/index.tsx"],"sourcesContent":["import React from 'react'\nimport { NETWORK_ICONS } from '../../config/constants/chains'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport AddFavToken from '../FavIcons/AddFavToken'\nimport { ChainId, MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport { MCTagNameMapping, MCTokenIconStyles } from '../../utils/campaignStyles'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport ListTag from '../uikit-sdk/Tag/ListTag'\nimport Question from '../uikit-sdk/Svg/Icons/Question'\n\nconst NETWORK_COLORS: Partial<Record<number, string>> = {\n  [ChainId.BSC]: '#F3BA2F4d',\n  [ChainId.MAINNET]: '#627eea4d',\n  [ChainId.MATIC]: '#8247e54d',\n  [ChainId.LIGHTLINK]: '#6087ff4d',\n  [ChainId.BASE]: '#0052ff4d',\n  [ChainId.ARBITRUM]: '#289fef4d',\n  [ChainId.LINEA]: '#ffffff4d',\n  [ChainId.IOTA]: '#ffffff4d',\n  [ChainId.GRAPHLINQ]: '#ded2ff4d',\n  [ChainId.AVAX]: '#e743444d',\n  [ChainId.BLAST]: '#fcfc034d',\n  [ChainId.CROSSFI]: '#7c80844d',\n  [ChainId.MONAD_TESTNET]: '#836EF94d',\n  [ChainId.MONAD]: '#836EF94d',\n  [ChainId.SOL]: '#836EF94d',\n  [ChainId.SONIC]: '#fb9a4c4d',\n  [ChainId.BERACHAIN]: '#783e244d',\n  [ChainId.KATANA]: '#068be34d',\n  [ChainId.UNICHAIN]: '#f50db44d',\n  [ChainId.MEGAETH_TESTNET]: '#DFD9D94d',\n  [ChainId.HYPEREVM]: '#ffffff4d',\n  [ChainId.APTOS]: 'rgb(240 111 126 / 0.3)',\n  [ChainId.SUI]: '#6fbcf04d',\n}\n\nconst TokenInfoAndName = ({\n  tokenSymbol,\n  chain,\n  tag,\n  vestEnds,\n  isHotBond,\n  marketingCampaign,\n}: {\n  tokenSymbol?: string\n  chain?: number\n  tag?: string\n  vestEnds?: string\n  isHotBond?: boolean\n  marketingCampaign?: MarketingCampaign\n}) => {\n  const ChainIcon = (chain && NETWORK_ICONS[chain]) || Question\n  return (\n    <Flex className=\"tokeninfoname container\">\n      <Flex\n        sx={{\n          width: '125px',\n          height: '100%',\n          position: 'absolute',\n          left: 0,\n          top: 0,\n          borderRadius: 'normal',\n          background: isHotBond\n            ? 'transparent'\n            : `linear-gradient(90deg, ${chain ? NETWORK_COLORS[chain] : '#FFFFFF33'} 0%, rgba(0,0,0,0) 75%)`,\n        }}\n      />\n      <Flex className=\"tokeninfoname chain\">\n        <ChainIcon width={20} height={20} />\n      </Flex>\n      <Flex\n        className=\"tokeninfoname tokencontainer\"\n        sx={{\n          marginTop: vestEnds ? ['10px', '10px', '10px', '0px'] : 0,\n          maxWidth: ['175px', '175px', '140px', '190px', '190px'],\n        }}\n      >\n        <Flex sx={{ position: 'relative', minWidth: '33px' }}>\n          <Flex sx={MCTokenIconStyles[marketingCampaign!]} />\n          <TokenImage symbol={tokenSymbol === 'AIX' && chain === ChainId.SOL ? 'SOLAIX' : tokenSymbol} size={33} />\n        </Flex>\n        <Flex className=\"tokeninfoname tokentext\">\n          <Flex sx={{ justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>\n            <Text sx={{ fontSize: ['12px', '12px', '14px', '16px'] }}>{tokenSymbol}</Text>\n          </Flex>\n          {vestEnds && (\n            <Flex sx={{ fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }}>{vestEnds}</Flex>\n          )}\n        </Flex>\n        <Flex\n          className=\"tokeninfofav\"\n          sx={{\n            minWidth: '25px',\n            p: '5px',\n          }}\n        >\n          <AddFavToken tokenSymbol={tokenSymbol} hotBond={!vestEnds && isHotBond} />\n        </Flex>\n      </Flex>\n      <Flex\n        sx={{\n          justifyContent: isHotBond ? 'center' : 'flex-start',\n          alignItems: 'center',\n        }}\n      >\n        <Flex sx={{ display: isHotBond ? 'flex' : ['none', 'none', 'none', 'none', 'flex'] }}>\n          {(tag || marketingCampaign) && (\n            <ListTag text={MCTagNameMapping[marketingCampaign!] || tag} marketingCampaign={marketingCampaign} />\n          )}\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default TokenInfoAndName\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/TokenSelectorModal/TokenRow.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ChainId, Token } from '@ape.swap/apeswap-lists';
 declare const TokenRow: ({ token, chainId, handleTokenSelect, tokenBalance, isConnected, }: {
     token: "NATIVE" | Token;
@@ -5,5 +6,5 @@ declare const TokenRow: ({ token, chainId, handleTokenSelect, tokenBalance, isCo
     handleTokenSelect: (currency: string) => void;
     tokenBalance?: string;
     isConnected: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default TokenRow;

package/dist/components/TokenSelectorModal/TokenRow.js

@@ -1,8 +1,8 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import Spinner from '../uikit-sdk/Spinner/index.js';
+import { jsxs, jsx, Fragment } from 'theme-ui/jsx-runtime';
 import Flex from '../uikit-sdk/Flex/index.js';
 import TokenImage from '../uikit-sdk/TokenImage/index.js';
 import { toSignificantDigitsString } from '../../utils/fixedPoint.js';
+import { Spinner } from 'theme-ui';
 import { getSymbol } from '../../utils/getNativeTicker.js';
 import isArray from 'lodash-es/isArray.js';
 
@@ -10,7 +10,7 @@ const TokenRow = ({ token, chainId, handleTokenSelect, tokenBalance, isConnected
     const symbol = getSymbol(token, chainId);
     const tokenAddress = token === 'NATIVE' ? 'NATIVE' : token.address[chainId];
     const splited = typeof token !== 'string' ? token?.symbol?.split('-') : undefined;
-    return (jsxs(Flex, { className: "ape:p-[8px] ape:justify-between ape:cursor-pointer ape:hover:bg-white4", onClick: () => handleTokenSelect(tokenAddress ?? ''), children: [jsxs(Flex, { children: [isArray(splited) ? (jsx(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: chainId })) : (jsx(TokenImage, { symbol: getSymbol(token, chainId), size: 28, chain: chainId })), jsx(Flex, { className: "ape:mx-[8px] ape:leading-[28px] ape:text-[14px]", children: symbol })] }), isConnected && (jsx(Flex, { className: "ape:text-[14px]", children: tokenBalance === '0' ? ('0') : !tokenBalance ? (jsx(Spinner, { size: 15 })) : (jsx(Fragment, { children: toSignificantDigitsString(tokenBalance ?? '0', 5) })) }))] }));
+    return (jsxs(Flex, { sx: { p: '8px', justifyContent: 'space-between', cursor: 'pointer', '&:hover': { background: 'white4' } }, onClick: () => handleTokenSelect(tokenAddress ?? ''), children: [jsxs(Flex, { children: [isArray(splited) ? (jsx(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: chainId })) : (jsx(TokenImage, { symbol: getSymbol(token, chainId), size: 28, chain: chainId })), jsx(Flex, { sx: { mx: '8px', lineHeight: '28px', fontSize: '14px' }, children: symbol })] }), isConnected && (jsx(Flex, { sx: { fontSize: '14px' }, children: tokenBalance === '0' ? ('0') : !tokenBalance ? (jsx(Spinner, { size: 15 })) : (jsx(Fragment, { children: toSignificantDigitsString(tokenBalance ?? '0', 5) })) }))] }));
 };
 
 export { TokenRow as default };

package/dist/components/TokenSelectorModal/TokenRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenRow.js","sources":["../../../src/components/TokenSelectorModal/TokenRow.tsx"],"sourcesContent":["import React from 'react'\nimport Spinner from '../uikit-sdk/Spinner'\nimport Flex from '../uikit-sdk/Flex'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport { ChainId, Token } from '@ape.swap/apeswap-lists'\nimport { toSignificantDigitsString } from '../../utils/fixedPoint'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport isArray from 'lodash-es/isArray.js'\n\nconst TokenRow = ({\n  token,\n  chainId,\n  handleTokenSelect,\n  tokenBalance,\n  isConnected,\n}: {\n  token: 'NATIVE' | Token\n  chainId: ChainId\n  handleTokenSelect: (currency: string) => void\n  tokenBalance?: string\n  isConnected: boolean\n}) => {\n  const symbol = getSymbol(token, chainId)\n  const tokenAddress = token === 'NATIVE' ? 'NATIVE' : token.address[chainId]\n\n  const splited = typeof token !== 'string' ? token?.symbol?.split('-') : undefined\n\n  return (\n    <Flex\n      className=\"ape:p-[8px] ape:justify-between ape:cursor-pointer ape:hover:bg-white4\"\n      onClick={() => handleTokenSelect(tokenAddress ?? '')}\n    >\n      <Flex>\n        {isArray(splited) ? (\n          <TokenImage symbol={splited[0]} symbol2={splited[1]} size={28} chain={chainId} />\n        ) : (\n          <TokenImage symbol={getSymbol(token, chainId)} size={28} chain={chainId} />\n        )}\n        <Flex className=\"ape:mx-[8px] ape:leading-[28px] ape:text-[14px]\">{symbol}</Flex>\n      </Flex>\n      {isConnected && (\n        <Flex className=\"ape:text-[14px]\">\n          {tokenBalance === '0' ? (\n            '0'\n          ) : !tokenBalance ? (\n            <Spinner size={15} />\n          ) : (\n            <>{toSignificantDigitsString(tokenBalance ?? '0', 5)}</>\n          )}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default TokenRow\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;AASA,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,EACL,OAAO,EACP,iBAAiB,EACjB,YAAY,EACZ,WAAW,GAOZ,KAAI;IACH,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC;AACxC,IAAA,MAAM,YAAY,GAAG,KAAK,KAAK,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;IAE3E,MAAM,OAAO,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,SAAS;AAEjF,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,wEAAwE,EAClF,OAAO,EAAE,MAAM,iBAAiB,CAAC,YAAY,IAAI,EAAE,CAAC,EAAA,QAAA,EAAA,CAEpDA,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACF,OAAO,CAAC,OAAO,CAAC,IACfC,GAAA,CAAC,UAAU,IAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAA,CAAI,KAEjFA,IAAC,UAAU,EAAA,EAAC,MAAM,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,GAAI,CAC5E,EACDA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAAE,MAAM,EAAA,CAAQ,CAAA,EAAA,CAC5E,EACN,WAAW,KACVA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAC9B,YAAY,KAAK,GAAG,IACnB,GAAG,IACD,CAAC,YAAY,IACfA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,GAAI,KAErBA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,yBAAyB,CAAC,YAAY,IAAI,GAAG,EAAE,CAAC,CAAC,GAAI,CACzD,EAAA,CACI,CACR,CAAA,EAAA,CACI;AAEX;;;;"}
+{"version":3,"file":"TokenRow.js","sources":["../../../src/components/TokenSelectorModal/TokenRow.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport { ChainId, Token } from '@ape.swap/apeswap-lists'\nimport { toSignificantDigitsString } from '../../utils/fixedPoint'\nimport { Spinner } from 'theme-ui'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport isArray from 'lodash-es/isArray.js'\n\nconst TokenRow = ({\n  token,\n  chainId,\n  handleTokenSelect,\n  tokenBalance,\n  isConnected,\n}: {\n  token: 'NATIVE' | Token\n  chainId: ChainId\n  handleTokenSelect: (currency: string) => void\n  tokenBalance?: string\n  isConnected: boolean\n}) => {\n  const symbol = getSymbol(token, chainId)\n  const tokenAddress = token === 'NATIVE' ? 'NATIVE' : token.address[chainId]\n\n  const splited = typeof token !== 'string' ? token?.symbol?.split('-') : undefined\n\n  return (\n    <Flex\n      sx={{ p: '8px', justifyContent: 'space-between', cursor: 'pointer', '&:hover': { background: 'white4' } }}\n      onClick={() => handleTokenSelect(tokenAddress ?? '')}\n    >\n      <Flex>\n        {isArray(splited) ? (\n          <TokenImage symbol={splited[0]} symbol2={splited[1]} size={28} chain={chainId} />\n        ) : (\n          <TokenImage symbol={getSymbol(token, chainId)} size={28} chain={chainId} />\n        )}\n        <Flex sx={{ mx: '8px', lineHeight: '28px', fontSize: '14px' }}>{symbol}</Flex>\n      </Flex>\n      {isConnected && (\n        <Flex sx={{ fontSize: '14px' }}>\n          {tokenBalance === '0' ? (\n            '0'\n          ) : !tokenBalance ? (\n            <Spinner size={15} />\n          ) : (\n            <>{toSignificantDigitsString(tokenBalance ?? '0', 5)}</>\n          )}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default TokenRow\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;AASA,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,EACL,OAAO,EACP,iBAAiB,EACjB,YAAY,EACZ,WAAW,GAOZ,KAAI;IACH,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC;AACxC,IAAA,MAAM,YAAY,GAAG,KAAK,KAAK,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;IAE3E,MAAM,OAAO,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,SAAS;AAEjF,IAAA,QACEA,IAAA,CAAC,IAAI,IACH,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EACzG,OAAO,EAAE,MAAM,iBAAiB,CAAC,YAAY,IAAI,EAAE,CAAC,aAEpDA,IAAA,CAAC,IAAI,eACF,OAAO,CAAC,OAAO,CAAC,IACfC,GAAA,CAAC,UAAU,IAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAA,CAAI,KAEjFA,GAAA,CAAC,UAAU,IAAC,MAAM,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,GAAI,CAC5E,EACDA,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAG,MAAM,EAAA,CAAQ,IACzE,EACN,WAAW,KACVA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,YAC3B,YAAY,KAAK,GAAG,IACnB,GAAG,IACD,CAAC,YAAY,IACfA,GAAA,CAAC,OAAO,IAAC,IAAI,EAAE,EAAE,EAAA,CAAI,KAErBA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,yBAAyB,CAAC,YAAY,IAAI,GAAG,EAAE,CAAC,CAAC,EAAA,CAAI,CACzD,GACI,CACR,CAAA,EAAA,CACI;AAEX;;;;"}

package/dist/components/TokenSelectorModal/index.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'theme-ui/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { WNATIVE } from '@ape.swap/apeswap-lists';
 import TokenRow from './TokenRow.js';
@@ -28,7 +28,19 @@ const TokenSelectorModal = ({ bondPrincipalToken, handleCurrencySelect, chainId,
         const input = event.target.value;
         setSearchQuery(input);
     }, [setSearchQuery]);
-    return (jsx(Modal, { onDismiss: onDismiss, title: "Tokens", className: "token-selector-modal", children: jsx(Flex, { className: "ape:flex-col ape:max-h-none ape:h-auto ape:w-auto ape:overflow-y-auto", children: jsxs(Flex, { className: "ape:flex-col", children: [jsx(Flex, { className: "ape:relative ape:m-[10px_0px_15px_0px]", children: jsx(Input, { id: "token-search-input", placeholder: "Name or Address", autoComplete: "off", value: searchQuery, onChange: handleInput, autoFocus: true }) }), jsx(Flex, { className: "ape:rounded-normal ape:bg-white3 ape:flex-col ape:h-[300px] ape:overflow-y-auto", children: parsedList.map((token) => {
+    return (jsx(Modal, { onDismiss: onDismiss, title: "Tokens", className: "token-selector-modal", children: jsx(Flex, { sx: {
+                flexDirection: 'column',
+                maxHeight: 'none',
+                height: 'auto',
+                width: 'auto',
+                overflowY: 'auto',
+            }, children: jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsx(Flex, { sx: { position: 'relative', margin: '10px 0px 15px 0px' }, children: jsx(Input, { id: "token-search-input", placeholder: "Name or Address", autoComplete: "off", value: searchQuery, onChange: handleInput, autoFocus: true }) }), jsx(Flex, { sx: {
+                            borderRadius: 'normal',
+                            background: 'white3',
+                            flexDirection: 'column',
+                            height: '300px',
+                            overflowY: 'auto',
+                        }, children: parsedList.map((token) => {
                             return (jsx(TokenRow, { token: token.token, chainId: chainId, handleTokenSelect: handleTokenSelect, tokenBalance: token.balance, isConnected: isConnected }, token.token === 'NATIVE' ? 'NATIVE' : token.token.address[chainId]));
                         }) })] }) }) }));
 };

package/dist/components/TokenSelectorModal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/TokenSelectorModal/index.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react'\nimport { ChainId, Token, WNATIVE } from '@ape.swap/apeswap-lists'\nimport TokenRow from './TokenRow'\nimport useSortedZapList from '../../hooks/useSortedZapList'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Input from '../uikit-sdk/Input/Input'\n\ninterface TokenSelectorModalProps {\n  bondPrincipalToken?: Token // should be ADDED to the inputList\n  handleCurrencySelect: (currency: string) => void\n  chainId: ChainId\n  onDismiss?: () => void\n  isConnected: boolean\n}\n\nconst TokenSelectorModal: React.FC<TokenSelectorModalProps> = ({\n  bondPrincipalToken,\n  handleCurrencySelect,\n  chainId,\n  onDismiss,\n  isConnected,\n}) => {\n  const [searchQuery, setSearchQuery] = useState<string>('')\n  const { sortedZapList } = useSortedZapList(chainId, bondPrincipalToken)\n\n  const parsedList =\n    sortedZapList?.filter((token) => {\n      // Search filter\n      return !searchQuery\n        ? true\n        : token.token === 'NATIVE'\n          ? WNATIVE[chainId as ChainId]?.symbol.toLowerCase().includes(searchQuery.toLowerCase())\n          : token.token.symbol.toLowerCase().includes(searchQuery.toLowerCase())\n    }) ?? []\n\n  const handleTokenSelect = useCallback(\n    (currency: string) => {\n      handleCurrencySelect(currency)\n      setSearchQuery('')\n      if (onDismiss) onDismiss()\n    },\n    [onDismiss, handleCurrencySelect, setSearchQuery],\n  )\n\n  const handleInput = useCallback(\n    (event: any) => {\n      const input = event.target.value\n      setSearchQuery(input)\n    },\n    [setSearchQuery],\n  )\n\n  return (\n    <Modal onDismiss={onDismiss} title=\"Tokens\" className=\"token-selector-modal\">\n      <Flex className=\"ape:flex-col ape:max-h-none ape:h-auto ape:w-auto ape:overflow-y-auto\">\n        <Flex className=\"ape:flex-col\">\n          <Flex className=\"ape:relative ape:m-[10px_0px_15px_0px]\">\n            <Input\n              id=\"token-search-input\"\n              placeholder=\"Name or Address\"\n              autoComplete=\"off\"\n              value={searchQuery}\n              onChange={handleInput}\n              autoFocus\n            />\n          </Flex>\n          <Flex className=\"ape:rounded-normal ape:bg-white3 ape:flex-col ape:h-[300px] ape:overflow-y-auto\">\n            {parsedList.map((token) => {\n              return (\n                <TokenRow\n                  key={token.token === 'NATIVE' ? 'NATIVE' : token.token.address[chainId]}\n                  token={token.token}\n                  chainId={chainId}\n                  handleTokenSelect={handleTokenSelect}\n                  tokenBalance={token.balance}\n                  isConnected={isConnected}\n                />\n              )\n            })}\n          </Flex>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default TokenSelectorModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;AAgBA,MAAM,kBAAkB,GAAsC,CAAC,EAC7D,kBAAkB,EAClB,oBAAoB,EACpB,OAAO,EACP,SAAS,EACT,WAAW,GACZ,KAAI;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC;IAC1D,MAAM,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC;IAEvE,MAAM,UAAU,GACd,aAAa,EAAE,MAAM,CAAC,CAAC,KAAK,KAAI;;AAE9B,QAAA,OAAO,CAAC;AACN,cAAE;AACF,cAAE,KAAK,CAAC,KAAK,KAAK;AAChB,kBAAE,OAAO,CAAC,OAAkB,CAAC,EAAE,MAAM,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE;AACtF,kBAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;IAC5E,CAAC,CAAC,IAAI,EAAE;AAEV,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,QAAgB,KAAI;QACnB,oBAAoB,CAAC,QAAQ,CAAC;QAC9B,cAAc,CAAC,EAAE,CAAC;AAClB,QAAA,IAAI,SAAS;AAAE,YAAA,SAAS,EAAE;IAC5B,CAAC,EACD,CAAC,SAAS,EAAE,oBAAoB,EAAE,cAAc,CAAC,CAClD;AAED,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAU,KAAI;AACb,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;QAChC,cAAc,CAAC,KAAK,CAAC;AACvB,IAAA,CAAC,EACD,CAAC,cAAc,CAAC,CACjB;AAED,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,sBAAsB,YAC1EA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uEAAuE,EAAA,QAAA,EACrFC,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BD,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wCAAwC,YACtDA,GAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAC,oBAAoB,EACvB,WAAW,EAAC,iBAAiB,EAC7B,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,WAAW,EACrB,SAAS,SACT,EAAA,CACG,EACPA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,iFAAiF,EAAA,QAAA,EAC9F,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;4BACxB,QACEA,IAAC,QAAQ,EAAA,EAEP,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAE,iBAAiB,EACpC,YAAY,EAAE,KAAK,CAAC,OAAO,EAC3B,WAAW,EAAE,WAAW,EAAA,EALnB,KAAK,CAAC,KAAK,KAAK,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAMvE;AAEN,wBAAA,CAAC,CAAC,EAAA,CACG,CAAA,EAAA,CACF,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/TokenSelectorModal/index.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react'\nimport { ChainId, Token, WNATIVE } from '@ape.swap/apeswap-lists'\nimport TokenRow from './TokenRow'\nimport useSortedZapList from '../../hooks/useSortedZapList'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Input from '../uikit-sdk/Input/Input'\n\ninterface TokenSelectorModalProps {\n  bondPrincipalToken?: Token // should be ADDED to the inputList\n  handleCurrencySelect: (currency: string) => void\n  chainId: ChainId\n  onDismiss?: () => void\n  isConnected: boolean\n}\n\nconst TokenSelectorModal: React.FC<TokenSelectorModalProps> = ({\n  bondPrincipalToken,\n  handleCurrencySelect,\n  chainId,\n  onDismiss,\n  isConnected,\n}) => {\n  const [searchQuery, setSearchQuery] = useState<string>('')\n  const { sortedZapList } = useSortedZapList(chainId, bondPrincipalToken)\n\n  const parsedList =\n    sortedZapList?.filter((token) => {\n      // Search filter\n      return !searchQuery\n        ? true\n        : token.token === 'NATIVE'\n          ? WNATIVE[chainId as ChainId]?.symbol.toLowerCase().includes(searchQuery.toLowerCase())\n          : token.token.symbol.toLowerCase().includes(searchQuery.toLowerCase())\n    }) ?? []\n\n  const handleTokenSelect = useCallback(\n    (currency: string) => {\n      handleCurrencySelect(currency)\n      setSearchQuery('')\n      if (onDismiss) onDismiss()\n    },\n    [onDismiss, handleCurrencySelect, setSearchQuery],\n  )\n\n  const handleInput = useCallback(\n    (event: any) => {\n      const input = event.target.value\n      setSearchQuery(input)\n    },\n    [setSearchQuery],\n  )\n\n  return (\n    <Modal onDismiss={onDismiss} title=\"Tokens\" className=\"token-selector-modal\">\n      <Flex\n        sx={{\n          flexDirection: 'column',\n          maxHeight: 'none',\n          height: 'auto',\n          width: 'auto',\n          overflowY: 'auto',\n        }}\n      >\n        <Flex sx={{ flexDirection: 'column' }}>\n          <Flex sx={{ position: 'relative', margin: '10px 0px 15px 0px' }}>\n            <Input\n              id=\"token-search-input\"\n              placeholder=\"Name or Address\"\n              autoComplete=\"off\"\n              value={searchQuery}\n              onChange={handleInput}\n              autoFocus\n            />\n          </Flex>\n          <Flex\n            sx={{\n              borderRadius: 'normal',\n              background: 'white3',\n              flexDirection: 'column',\n              height: '300px',\n              overflowY: 'auto',\n            }}\n          >\n            {parsedList.map((token) => {\n              return (\n                <TokenRow\n                  key={token.token === 'NATIVE' ? 'NATIVE' : token.token.address[chainId]}\n                  token={token.token}\n                  chainId={chainId}\n                  handleTokenSelect={handleTokenSelect}\n                  tokenBalance={token.balance}\n                  isConnected={isConnected}\n                />\n              )\n            })}\n          </Flex>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default TokenSelectorModal\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -14,5 +14,5 @@ declare const TokenSelectorPanel: ({ typedValue, setTypedValue, selectedToken, b
     inputDisabled?: boolean;
     marketingCampaign?: MarketingCampaign;
     isConnected: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default TokenSelectorPanel;

package/dist/components/TokenSelectorPanel/index.js

@@ -1,4 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { Flex, Input } from 'theme-ui';
 import { isNumber } from '../../utils/numbers.js';
 import TokenImage from '../uikit-sdk/TokenImage/index.js';
 import { ChainId } from '@ape.swap/apeswap-lists';
@@ -15,8 +16,6 @@ import useSUIAccount from '../../hooks/accounts/useSUIAccount.js';
 import { MCColorMapping } from '../../utils/campaignStyles.js';
 import Button from '../uikit-sdk/Button/Button.js';
 import Caret from '../uikit-sdk/Svg/Icons/Caret.js';
-import Flex from '../uikit-sdk/Flex/index.js';
-import Input from '../uikit-sdk/Input/Input.js';
 
 const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, bondChainId, handleValueBtn, handleCurrencySelect, enableZap, tokenBalance, selectedTokenPrice, bondPrincipalToken, inputDisabled = false, marketingCampaign, isConnected, }) => {
     const { address: account } = useEVMAccount();
@@ -36,7 +35,7 @@ const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, bondChai
         setTypedValue(event.target.value);
     };
     const [onTokenSelectorModal] = useModal(jsx(TokenSelectorModal, { bondPrincipalToken: bondPrincipalToken, handleCurrencySelect: handleCurrencySelect, chainId: bondChainId, isConnected: isConnected }), true, false, `tokenSelectorOnLiquidityModal${bondPrincipalToken?.address?.[bondChainId]}-${bondPrincipalToken?.symbol}`);
-    return (jsxs(Flex, { className: "token-selector-panel ape:flex-col ape:bg-white3 ape:p-[10px] ape:min-h-[92px] ape:rounded-normal", style: { background: MCColorMapping.white3[marketingCampaign] }, children: [jsxs(Flex, { className: "input-container inputrow ape:flex-row", children: [jsx(Flex, { className: "input-container input ape:bg-transparent ape:rounded-[10px] ape:border-[medium] ape:pr-[10px] ape:w-full ape:text-[22px]", children: jsx(Input, { placeholder: "0.0", value: typedValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: (v) => {
+    return (jsxs(Flex, { className: "token-selector-panel", sx: { borderRadius: 'normal', background: MCColorMapping.white3[marketingCampaign] }, children: [jsxs(Flex, { className: "input-container inputrow", children: [jsx(Flex, { className: "input-container input", children: jsx(Input, { placeholder: "0.0", value: typedValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: (v) => {
                                 if (v.currentTarget.value.includes(',')) {
                                     v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
                                 }
@@ -50,9 +49,13 @@ const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, bondChai
                                     !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
                                         ? v.currentTarget.value
                                         : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
-                            }, disabled: inputDisabled }) }), jsxs(Flex, { className: "input-container token ape:flex ape:items-center ape:text-[12px] ape:font-bold ape:bg-white4 ape:relative ape:w-[190px] ape:h-[36px] ape:justify-between ape:rounded-normal", onClick: () => (enableZap ? onTokenSelectorModal() : null), style: { cursor: enableZap ? 'pointer' : 'default', background: MCColorMapping.white4[marketingCampaign] }, children: [jsxs(Flex, { className: "ape:items-center ape:gap-[10px]", children: [jsx(Flex, { className: "input-container bondicon ape:ml-[5px]", children: isArray(splited) ? (jsx(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: bondChainId })) : (jsx(TokenImage, { symbol: getSymbol(selectedToken, bondChainId), size: 28, chain: bondChainId })) }), jsx(Flex, { className: "title-container tokenname", children: getSymbol(selectedToken, bondChainId) })] }), enableZap && (jsx(Flex, { className: "ape:mr-[8px]", children: jsx(Caret, {}) }))] })] }), jsxs(Flex, { className: "input-container balancerow ape:flex-row ape:items-center ape:justify-between ape:pl-[6px]", children: [jsx(Flex, { className: "ape:opacity-60", children: selectedTokenPrice && typedValue
+                            }, disabled: inputDisabled }) }), jsxs(Flex, { className: "input-container token", onClick: () => (enableZap ? onTokenSelectorModal() : null), sx: {
+                            cursor: enableZap ? 'pointer' : 'default',
+                            borderRadius: 'normal',
+                            background: MCColorMapping.white4[marketingCampaign],
+                        }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '10px' }, children: [jsx(Flex, { className: "input-container bondicon", children: isArray(splited) ? (jsx(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: bondChainId })) : (jsx(TokenImage, { symbol: getSymbol(selectedToken, bondChainId), size: 28, chain: bondChainId })) }), jsx(Flex, { className: "title-container tokenname", children: getSymbol(selectedToken, bondChainId) })] }), enableZap && (jsx(Flex, { sx: { mr: '8px' }, children: jsx(Caret, {}) }))] })] }), jsxs(Flex, { className: "input-container balancerow", children: [jsx(Flex, { sx: { opacity: 0.6 }, children: selectedTokenPrice && typedValue
                             ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`
-                            : '' }), jsxs(Flex, { children: [showBalance && (jsxs(Flex, { className: "balancerow text ape:opacity-60 ape:items-center ape:text-[12px]", children: ["Balance: ", tokenBalanceString] })), jsx(Flex, { className: "balancerow max ape:items-center ape:cursor-pointer", children: showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (jsx(Button, { className: "max-button ape:bg-primary-button ape:h-[22px] ape:px-[8px] ape:cursor-pointer ape:text-[12px]! ape:font-semibold ape:rounded-small ape:ml-[10px] ape:transition-all ape:duration-300 ape:ease-linear ape:flex ape:items-center ape:justify-center ape:active:scale-90", onClick: () => handleValueBtn(tokenBalance ?? '0'), children: "Max" })) })] })] })] }));
+                            : '' }), jsxs(Flex, { children: [showBalance && jsxs(Flex, { className: "balancerow text", children: ["Balance: ", tokenBalanceString] }), jsx(Flex, { className: "balancerow max", children: showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (jsx(Button, { className: "max-button", onClick: () => handleValueBtn(tokenBalance ?? '0'), children: "Max" })) })] })] })] }));
 };
 
 export { TokenSelectorPanel as default };

package/dist/components/TokenSelectorPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/TokenSelectorPanel/index.tsx"],"sourcesContent":["import React, { FormEvent } from 'react'\nimport { isNumber } from '../../utils/numbers'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport { ChainId, MarketingCampaign, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../hooks/useModal'\nimport TokenSelectorModal from '../TokenSelectorModal'\nimport { toSignificantDigitsString } from '../../utils/fixedPoint'\nimport isArray from 'lodash-es/isArray.js'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport { formatUSDNumber } from '../../utils/displayHelpers'\nimport useEVMAccount from '../../hooks/accounts/useEVMAccount'\nimport useSOLAccount from '../../hooks/accounts/useSOLAccount'\nimport useAPTAccount from '../../hooks/accounts/useAPTAccount'\nimport useSUIAccount from '../../hooks/accounts/useSUIAccount'\nimport { MCColorMapping } from '../../utils/campaignStyles'\nimport Button from '../uikit-sdk/Button/Button'\nimport Caret from '../uikit-sdk/Svg/Icons/Caret'\nimport Flex from '../uikit-sdk/Flex'\nimport Input from '../uikit-sdk/Input/Input'\n\nconst TokenSelectorPanel = ({\n  typedValue,\n  setTypedValue,\n  selectedToken,\n  bondChainId,\n  handleValueBtn,\n  handleCurrencySelect,\n  enableZap,\n  tokenBalance,\n  selectedTokenPrice,\n  bondPrincipalToken,\n  inputDisabled = false,\n  marketingCampaign,\n  isConnected,\n}: {\n  typedValue: string\n  setTypedValue: (value: React.SetStateAction<string>) => void\n  selectedToken?: 'NATIVE' | Token\n  bondChainId: ChainId\n  handleValueBtn?: (value: string) => void\n  handleCurrencySelect: (value: string) => void\n  enableZap?: boolean\n  tokenBalance?: string\n  selectedTokenPrice?: number\n  bondPrincipalToken?: Token // Used to ADD this token to the inputList\n  inputDisabled?: boolean\n  marketingCampaign?: MarketingCampaign\n  isConnected: boolean\n}) => {\n  const { address: account } = useEVMAccount()\n  const { publicKey: solanaAccount } = useSOLAccount()\n  const { address: aptosAccount } = useAPTAccount()\n  const { address: suiAccount } = useSUIAccount()\n\n  const showBalance =\n    bondChainId === ChainId.SOL\n      ? !!solanaAccount\n      : bondChainId === ChainId.APTOS\n        ? !!aptosAccount\n        : bondChainId === ChainId.SUI\n          ? !!suiAccount\n          : !!account\n  const tokenBalanceString = tokenBalance ? toSignificantDigitsString(tokenBalance, 5) : 'loading'\n\n  const splited = typeof selectedToken !== 'string' ? selectedToken?.symbol?.split('-') : undefined\n  const handleInputChange = (event: { target: { value: React.SetStateAction<string> } }) => {\n    setTypedValue(event.target.value)\n  }\n\n  const [onTokenSelectorModal] = useModal(\n    <TokenSelectorModal\n      bondPrincipalToken={bondPrincipalToken}\n      handleCurrencySelect={handleCurrencySelect}\n      chainId={bondChainId}\n      isConnected={isConnected}\n    />,\n    true,\n    false,\n    `tokenSelectorOnLiquidityModal${bondPrincipalToken?.address?.[bondChainId]}-${bondPrincipalToken?.symbol}`,\n  )\n\n  return (\n    <Flex\n      className=\"token-selector-panel ape:flex-col ape:bg-white3 ape:p-[10px] ape:min-h-[92px] ape:rounded-normal\"\n      style={{ background: MCColorMapping.white3[marketingCampaign!] }}\n    >\n      <Flex className=\"input-container inputrow ape:flex-row\">\n        <Flex className=\"input-container input ape:bg-transparent ape:rounded-[10px] ape:border-[medium] ape:pr-[10px] ape:w-full ape:text-[22px]\">\n          <Input\n            placeholder=\"0.0\"\n            value={typedValue}\n            pattern=\"^[0-9]*[.,]?[0-9]*$\"\n            onChange={handleInputChange}\n            onInput={(v: FormEvent<HTMLInputElement>) => {\n              if (v.currentTarget.value.includes(',')) {\n                v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.')\n              }\n              if (v.currentTarget.value.includes('%')) {\n                v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '')\n              }\n              if (v.currentTarget.value === '.') {\n                v.currentTarget.value = '0.'\n              }\n              v.currentTarget.value =\n                !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0\n                  ? v.currentTarget.value\n                  : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1)\n            }}\n            disabled={inputDisabled}\n          />\n        </Flex>\n\n        {/* TOKEN SELECTOR PANEL */}\n\n        <Flex\n          className=\"input-container token ape:flex ape:items-center ape:text-[12px] ape:font-bold ape:bg-white4 ape:relative ape:w-[190px] ape:h-[36px] ape:justify-between ape:rounded-normal\"\n          onClick={() => (enableZap ? onTokenSelectorModal() : null)}\n          style={{ cursor: enableZap ? 'pointer' : 'default', background: MCColorMapping.white4[marketingCampaign!] }}\n        >\n          <Flex className=\"ape:items-center ape:gap-[10px]\">\n            <Flex className=\"input-container bondicon ape:ml-[5px]\">\n              {isArray(splited) ? (\n                <TokenImage symbol={splited[0]} symbol2={splited[1]} size={28} chain={bondChainId} />\n              ) : (\n                <TokenImage symbol={getSymbol(selectedToken, bondChainId)} size={28} chain={bondChainId} />\n              )}\n            </Flex>\n            <Flex className=\"title-container tokenname\">{getSymbol(selectedToken, bondChainId)}</Flex>\n          </Flex>\n          {enableZap && (\n            <Flex className=\"ape:mr-[8px]\">\n              <Caret />\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n      <Flex className=\"input-container balancerow ape:flex-row ape:items-center ape:justify-between ape:pl-[6px]\">\n        <Flex className=\"ape:opacity-60\">\n          {selectedTokenPrice && typedValue\n            ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`\n            : ''}\n        </Flex>\n        <Flex>\n          {showBalance && (\n            <Flex className=\"balancerow text ape:opacity-60 ape:items-center ape:text-[12px]\">\n              Balance: {tokenBalanceString}\n            </Flex>\n          )}\n          <Flex className=\"balancerow max ape:items-center ape:cursor-pointer\">\n            {showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (\n              <Button\n                className=\"max-button ape:bg-primary-button ape:h-[22px] ape:px-[8px] ape:cursor-pointer ape:text-[12px]! ape:font-semibold ape:rounded-small ape:ml-[10px] ape:transition-all ape:duration-300 ape:ease-linear ape:flex ape:items-center ape:justify-center ape:active:scale-90\"\n                onClick={() => handleValueBtn(tokenBalance ?? '0')}\n              >\n                Max\n              </Button>\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default TokenSelectorPanel\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/TokenSelectorPanel/index.tsx"],"sourcesContent":["import React, { FormEvent } from 'react'\nimport { Flex, Input } from 'theme-ui'\nimport { isNumber } from '../../utils/numbers'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport { ChainId, MarketingCampaign, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../hooks/useModal'\nimport TokenSelectorModal from '../TokenSelectorModal'\nimport { toSignificantDigitsString } from '../../utils/fixedPoint'\nimport isArray from 'lodash-es/isArray.js'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport { formatUSDNumber } from '../../utils/displayHelpers'\nimport useEVMAccount from '../../hooks/accounts/useEVMAccount'\nimport useSOLAccount from '../../hooks/accounts/useSOLAccount'\nimport useAPTAccount from '../../hooks/accounts/useAPTAccount'\nimport useSUIAccount from '../../hooks/accounts/useSUIAccount'\nimport { MCColorMapping } from '../../utils/campaignStyles'\nimport Button from '../uikit-sdk/Button/Button'\nimport Caret from '../uikit-sdk/Svg/Icons/Caret'\n\nconst TokenSelectorPanel = ({\n  typedValue,\n  setTypedValue,\n  selectedToken,\n  bondChainId,\n  handleValueBtn,\n  handleCurrencySelect,\n  enableZap,\n  tokenBalance,\n  selectedTokenPrice,\n  bondPrincipalToken,\n  inputDisabled = false,\n  marketingCampaign,\n  isConnected,\n}: {\n  typedValue: string\n  setTypedValue: (value: React.SetStateAction<string>) => void\n  selectedToken?: 'NATIVE' | Token\n  bondChainId: ChainId\n  handleValueBtn?: (value: string) => void\n  handleCurrencySelect: (value: string) => void\n  enableZap?: boolean\n  tokenBalance?: string\n  selectedTokenPrice?: number\n  bondPrincipalToken?: Token // Used to ADD this token to the inputList\n  inputDisabled?: boolean\n  marketingCampaign?: MarketingCampaign\n  isConnected: boolean\n}) => {\n  const { address: account } = useEVMAccount()\n  const { publicKey: solanaAccount } = useSOLAccount()\n  const { address: aptosAccount } = useAPTAccount()\n  const { address: suiAccount } = useSUIAccount()\n\n  const showBalance =\n    bondChainId === ChainId.SOL\n      ? !!solanaAccount\n      : bondChainId === ChainId.APTOS\n        ? !!aptosAccount\n        : bondChainId === ChainId.SUI\n          ? !!suiAccount\n          : !!account\n  const tokenBalanceString = tokenBalance ? toSignificantDigitsString(tokenBalance, 5) : 'loading'\n\n  const splited = typeof selectedToken !== 'string' ? selectedToken?.symbol?.split('-') : undefined\n  const handleInputChange = (event: { target: { value: React.SetStateAction<string> } }) => {\n    setTypedValue(event.target.value)\n  }\n\n  const [onTokenSelectorModal] = useModal(\n    <TokenSelectorModal\n      bondPrincipalToken={bondPrincipalToken}\n      handleCurrencySelect={handleCurrencySelect}\n      chainId={bondChainId}\n      isConnected={isConnected}\n    />,\n    true,\n    false,\n    `tokenSelectorOnLiquidityModal${bondPrincipalToken?.address?.[bondChainId]}-${bondPrincipalToken?.symbol}`,\n  )\n\n  return (\n    <Flex\n      className=\"token-selector-panel\"\n      sx={{ borderRadius: 'normal', background: MCColorMapping.white3[marketingCampaign!] }}\n    >\n      <Flex className=\"input-container inputrow\">\n        <Flex className=\"input-container input\">\n          <Input\n            placeholder=\"0.0\"\n            value={typedValue}\n            pattern=\"^[0-9]*[.,]?[0-9]*$\"\n            onChange={handleInputChange}\n            onInput={(v: FormEvent<HTMLInputElement>) => {\n              if (v.currentTarget.value.includes(',')) {\n                v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.')\n              }\n              if (v.currentTarget.value.includes('%')) {\n                v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '')\n              }\n              if (v.currentTarget.value === '.') {\n                v.currentTarget.value = '0.'\n              }\n              v.currentTarget.value =\n                !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0\n                  ? v.currentTarget.value\n                  : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1)\n            }}\n            disabled={inputDisabled}\n          />\n        </Flex>\n\n        {/* TOKEN SELECTOR PANEL */}\n\n        <Flex\n          className=\"input-container token\"\n          onClick={() => (enableZap ? onTokenSelectorModal() : null)}\n          sx={{\n            cursor: enableZap ? 'pointer' : 'default',\n            borderRadius: 'normal',\n            background: MCColorMapping.white4[marketingCampaign!],\n          }}\n        >\n          <Flex sx={{ alignItems: 'center', gap: '10px' }}>\n            <Flex className=\"input-container bondicon\">\n              {isArray(splited) ? (\n                <TokenImage symbol={splited[0]} symbol2={splited[1]} size={28} chain={bondChainId} />\n              ) : (\n                <TokenImage symbol={getSymbol(selectedToken, bondChainId)} size={28} chain={bondChainId} />\n              )}\n            </Flex>\n            <Flex className=\"title-container tokenname\">{getSymbol(selectedToken, bondChainId)}</Flex>\n          </Flex>\n          {enableZap && (\n            <Flex sx={{ mr: '8px' }}>\n              <Caret />\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n      <Flex className=\"input-container balancerow\">\n        <Flex sx={{ opacity: 0.6 }}>\n          {selectedTokenPrice && typedValue\n            ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`\n            : ''}\n        </Flex>\n        <Flex>\n          {showBalance && <Flex className=\"balancerow text\">Balance: {tokenBalanceString}</Flex>}\n          <Flex className=\"balancerow max\">\n            {showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (\n              <Button\n                className=\"max-button\"\n                onClick={() => handleValueBtn(tokenBalance ?? '0')}\n              >\n                Max\n              </Button>\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default TokenSelectorPanel\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/Tooltip/ButtonsRow.js

@@ -1,15 +1,16 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { styles } from './styles.js';
+import { Link } from 'theme-ui';
 import Flex from '../uikit-sdk/Flex/index.js';
 import URL from '../uikit-sdk/Svg/Icons/URL.js';
 import Twitter from '../uikit-sdk/Svg/Icons/Twitter.js';
 import DexScreener from '../uikit-sdk/Svg/Icons/DexScreener.js';
 import CoinGecko from '../uikit-sdk/Svg/Icons/CoinGecko.js';
 
-const iconButtonClasses = 'ape:bg-white3 ape:no-underline ape:items-center ape:justify-center ape:w-fit ape:h-[30px] ape:p-[2px_5px] ape:rounded-[8px] ape:m-[0_5px_5px_0] ape:hover:cursor-pointer';
 const ButtonsRow = ({ projectLink, twitter, earnTokenContract, cgId, dexscreener }) => {
     const dexscreenerURL = dexscreener || (earnTokenContract ? `https://dexscreener.com/search?q=${earnTokenContract}` : undefined);
     const coingeckoURL = cgId ? `https://www.coingecko.com/en/coins/${cgId}` : undefined;
-    return (jsxs(Flex, { className: "ape:justify-center", children: [jsx(Flex, { className: iconButtonClasses, as: "a", href: projectLink, target: "_blank", children: jsx(URL, { width: 18 }) }), jsx(Flex, { className: iconButtonClasses, as: "a", href: twitter, target: "_blank", children: jsx(Twitter, { width: 18, color: "text" }) }), dexscreenerURL && (jsx(Flex, { className: iconButtonClasses, as: "a", href: dexscreenerURL, target: "_blank", children: jsx(DexScreener, { width: 18, color: "text" }) })), coingeckoURL && (jsx(Flex, { className: iconButtonClasses, as: "a", href: coingeckoURL, target: "_blank", children: jsx(CoinGecko, { width: 18, color: "text" }) }))] }));
+    return (jsxs(Flex, { sx: { justifyContent: 'center' }, children: [jsx(Flex, { sx: styles.iconButton, as: Link, href: projectLink, target: "_blank", children: jsx(URL, { width: 18 }) }), jsx(Flex, { sx: styles.iconButton, as: Link, href: twitter, target: "_blank", children: jsx(Twitter, { width: 18, color: "text" }) }), dexscreenerURL && (jsx(Flex, { sx: styles.iconButton, as: Link, href: dexscreenerURL, target: "_blank", children: jsx(DexScreener, { width: 18, color: "text" }) })), coingeckoURL && (jsx(Flex, { sx: styles.iconButton, as: Link, href: coingeckoURL, target: "_blank", children: jsx(CoinGecko, { width: 18, color: "text" }) }))] }));
 };
 
 export { ButtonsRow as default };

package/dist/components/Tooltip/ButtonsRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonsRow.js","sources":["../../../src/components/Tooltip/ButtonsRow.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport URLIcon from '../uikit-sdk/Svg/Icons/URL'\nimport Twitter from '../uikit-sdk/Svg/Icons/Twitter'\nimport DexScreener from '../uikit-sdk/Svg/Icons/DexScreener'\nimport CoinGecko from '../uikit-sdk/Svg/Icons/CoinGecko'\n\nconst iconButtonClasses =\n  'ape:bg-white3 ape:no-underline ape:items-center ape:justify-center ape:w-fit ape:h-[30px] ape:p-[2px_5px] ape:rounded-[8px] ape:m-[0_5px_5px_0] ape:hover:cursor-pointer'\n\nconst ButtonsRow: React.FC<{\n  projectLink?: string\n  twitter?: string\n  earnTokenContract?: string\n  cgId?: string\n  dexscreener?: string\n}> = ({ projectLink, twitter, earnTokenContract, cgId, dexscreener }) => {\n  const dexscreenerURL =\n    dexscreener || (earnTokenContract ? `https://dexscreener.com/search?q=${earnTokenContract}` : undefined)\n  const coingeckoURL = cgId ? `https://www.coingecko.com/en/coins/${cgId}` : undefined\n\n  return (\n    <Flex className=\"ape:justify-center\">\n      <Flex className={iconButtonClasses} as=\"a\" href={projectLink} target=\"_blank\">\n        <URLIcon width={18} />\n      </Flex>\n      <Flex className={iconButtonClasses} as=\"a\" href={twitter} target=\"_blank\">\n        <Twitter width={18} color=\"text\" />\n      </Flex>\n      {dexscreenerURL && (\n        <Flex className={iconButtonClasses} as=\"a\" href={dexscreenerURL} target=\"_blank\">\n          <DexScreener width={18} color=\"text\" />\n        </Flex>\n      )}\n      {coingeckoURL && (\n        <Flex className={iconButtonClasses} as=\"a\" href={coingeckoURL} target=\"_blank\">\n          <CoinGecko width={18} color=\"text\" />\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default ButtonsRow\n"],"names":["_jsxs","_jsx","URLIcon"],"mappings":";;;;;;;AAOA,MAAM,iBAAiB,GACrB,0KAA0K;AAE5K,MAAM,UAAU,GAMX,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,WAAW,EAAE,KAAI;AACtE,IAAA,MAAM,cAAc,GAClB,WAAW,KAAK,iBAAiB,GAAG,CAAA,iCAAA,EAAoC,iBAAiB,CAAA,CAAE,GAAG,SAAS,CAAC;AAC1G,IAAA,MAAM,YAAY,GAAG,IAAI,GAAG,CAAA,mCAAA,EAAsC,IAAI,CAAA,CAAE,GAAG,SAAS;AAEpF,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,CAClCC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,iBAAiB,EAAE,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EAC3EA,GAAA,CAACC,GAAO,EAAA,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EAAA,CACjB,EACPD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,iBAAiB,EAAE,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EACvEA,GAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAC9B,EACN,cAAc,KACbA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,iBAAiB,EAAE,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,cAAc,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EAC9EA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAClC,CACR,EACA,YAAY,KACXA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,iBAAiB,EAAE,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EAC5EA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAChC,CACR,CAAA,EAAA,CACI;AAEX;;;;"}
+{"version":3,"file":"ButtonsRow.js","sources":["../../../src/components/Tooltip/ButtonsRow.tsx"],"sourcesContent":["import React from 'react'\nimport { styles } from './styles'\nimport { Link } from 'theme-ui'\nimport Flex from '../uikit-sdk/Flex'\nimport URLIcon from '../uikit-sdk/Svg/Icons/URL'\nimport Twitter from '../uikit-sdk/Svg/Icons/Twitter'\nimport DexScreener from '../uikit-sdk/Svg/Icons/DexScreener'\nimport CoinGecko from '../uikit-sdk/Svg/Icons/CoinGecko'\n\nconst ButtonsRow: React.FC<{\n  projectLink?: string\n  twitter?: string\n  earnTokenContract?: string\n  cgId?: string\n  dexscreener?: string\n}> = ({ projectLink, twitter, earnTokenContract, cgId, dexscreener }) => {\n  const dexscreenerURL =\n    dexscreener || (earnTokenContract ? `https://dexscreener.com/search?q=${earnTokenContract}` : undefined)\n  const coingeckoURL = cgId ? `https://www.coingecko.com/en/coins/${cgId}` : undefined\n\n  return (\n    <Flex sx={{ justifyContent: 'center' }}>\n      <Flex sx={styles.iconButton} as={Link} href={projectLink} target=\"_blank\">\n        <URLIcon width={18} />\n      </Flex>\n      <Flex sx={styles.iconButton} as={Link} href={twitter} target=\"_blank\">\n        <Twitter width={18} color=\"text\" />\n      </Flex>\n      {dexscreenerURL && (\n        <Flex sx={styles.iconButton} as={Link} href={dexscreenerURL} target=\"_blank\">\n          <DexScreener width={18} color=\"text\" />\n        </Flex>\n      )}\n      {coingeckoURL && (\n        <Flex sx={styles.iconButton} as={Link} href={coingeckoURL} target=\"_blank\">\n          <CoinGecko width={18} color=\"text\" />\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default ButtonsRow\n"],"names":["_jsxs","_jsx","URLIcon"],"mappings":";;;;;;;;;AASA,MAAM,UAAU,GAMX,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,WAAW,EAAE,KAAI;AACtE,IAAA,MAAM,cAAc,GAClB,WAAW,KAAK,iBAAiB,GAAG,CAAA,iCAAA,EAAoC,iBAAiB,CAAA,CAAE,GAAG,SAAS,CAAC;AAC1G,IAAA,MAAM,YAAY,GAAG,IAAI,GAAG,CAAA,mCAAA,EAAsC,IAAI,CAAA,CAAE,GAAG,SAAS;AAEpF,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACpCC,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EACvEA,GAAA,CAACC,GAAO,EAAA,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EAAA,CACjB,EACPD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EACnEA,IAAC,OAAO,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,GAAG,EAAA,CAC9B,EACN,cAAc,KACbA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EAC1EA,GAAA,CAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAClC,CACR,EACA,YAAY,KACXA,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAC,QAAQ,YACxEA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAChC,CACR,CAAA,EAAA,CACI;AAEX;;;;"}

package/dist/components/Tooltip/Tooltip.js

@@ -1,16 +1,16 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { styles } from './styles.js';
 import ButtonsRow from './ButtonsRow.js';
 import { BLOCK_EXPLORER } from '../../config/constants/chains.js';
 import { ChainId } from '@ape.swap/apeswap-lists';
 import { IS_APTOS_MAINNET } from '../../constants/aptosConstants.js';
 import Flex from '../uikit-sdk/Flex/index.js';
+import { Link } from 'theme-ui';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import ExpandedViewButton from '../../views/BuyBond/components/ExpandedViewButton.js';
 import track from '../../utils/track.js';
 import External from '../uikit-sdk/Svg/Icons/External.js';
 
-const linkRowClasses = 'ape:w-full ape:mt-[5px] ape:justify-end ape:[&_svg]:w-[11px]';
-const linkClasses = 'ape:text-[12px] ape:leading-[14px] ape:flex ape:no-underline ape:hover:underline';
 const BondInfoTooltip = ({ earnTokenContract, earnTokenSymbol, bondContract, projectLink, twitter, chain, isSoldOut = false, billType, cgId, dexscreener, }) => {
     const config = useSDKConfig();
     const explorerLink = BLOCK_EXPLORER[chain];
@@ -37,7 +37,7 @@ const BondInfoTooltip = ({ earnTokenContract, earnTokenSymbol, bondContract, pro
             },
         });
     };
-    return (jsxs(Flex, { className: "ape:flex-col ape:flex-wrap", children: [jsx(ButtonsRow, { twitter: twitter, projectLink: projectLink, earnTokenContract: earnTokenContract, cgId: cgId, dexscreener: dexscreener }), config?.referenceId === 'apebond' && !isSoldOut && billType !== 'fcfs' && (jsx(Flex, { className: "ape:w-full ape:my-[5px] ape:justify-center ape:relative ape:h-[25px]", children: jsx(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation, rightPos: '-5px' }) })), jsx(Flex, { className: "ape:justify-center", children: jsxs(Flex, { className: "ape:w-[144px] ape:flex-col", children: [jsx(Flex, { className: linkRowClasses, children: tokenLink && (jsxs("a", { href: tokenLink, className: linkClasses, target: "_blank", rel: "noreferrer", children: ["View Token Contract", jsx(Flex, { className: "ape:ml-[5px]", children: jsx(External, { color: "text", width: 10 }) })] })) }), jsx(Flex, { className: linkRowClasses, children: bondLink && (jsxs("a", { href: bondLink, className: linkClasses, target: "_blank", rel: "noreferrer", children: ["View Bond Contract", jsx(Flex, { className: "ape:ml-[5px]", children: jsx(External, { color: "text", width: 10 }) })] })) }), jsx(Flex, { className: linkRowClasses, children: billType !== 'fcfs' && (jsxs("a", { href: bondDashboard, className: linkClasses, target: "_blank", rel: "noopener noreferrer", children: ["View Bond Insights", jsx(Flex, { className: "ape:ml-[5px]", children: jsx(External, { color: "text", width: 10 }) })] })) })] }) })] }));
+    return (jsxs(Flex, { sx: { flexDirection: 'column', flexWrap: 'wrap' }, children: [jsx(ButtonsRow, { twitter: twitter, projectLink: projectLink, earnTokenContract: earnTokenContract, cgId: cgId, dexscreener: dexscreener }), config?.referenceId === 'apebond' && !isSoldOut && billType !== 'fcfs' && (jsx(Flex, { sx: { width: '100%', my: '5px', justifyContent: 'center', position: 'relative', height: '25px' }, children: jsx(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation, rightPos: '-5px' }) })), jsx(Flex, { sx: { justifyContent: 'center' }, children: jsxs(Flex, { sx: { width: '144px', flexDirection: 'column' }, children: [jsx(Flex, { sx: styles.linkRow, children: tokenLink && (jsxs(Link, { href: tokenLink, sx: styles.link, target: "_blank", children: ["View Token Contract", jsx(Flex, { sx: { ml: '5px' }, children: jsx(External, { color: "text", width: 10 }) })] })) }), jsx(Flex, { sx: styles.linkRow, children: bondLink && (jsxs(Link, { href: bondLink, sx: styles.link, target: "_blank", children: ["View Bond Contract", jsx(Flex, { sx: { ml: '5px' }, children: jsx(External, { color: "text", width: 10 }) })] })) }), jsx(Flex, { sx: styles.linkRow, children: billType !== 'fcfs' && (jsxs(Link, { href: bondDashboard, sx: styles.link, target: "_blank", rel: "noopener noreferrer", children: ["View Bond Insights", jsx(Flex, { sx: { ml: '5px' }, children: jsx(External, { color: "text", width: 10 }) })] })) })] }) })] }));
 };
 
 export { BondInfoTooltip as default };

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport ButtonsRow from './ButtonsRow'\nimport { BLOCK_EXPLORER } from '../../config/constants/chains'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { IS_APTOS_MAINNET } from '../../constants/aptosConstants'\nimport Flex from '../uikit-sdk/Flex'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport ExpandedViewButton from '../../views/BuyBond/components/ExpandedViewButton'\nimport track from '../../utils/track'\nimport External from '../uikit-sdk/Svg/Icons/External'\n\ninterface TooltipProps {\n  earnTokenContract: string\n  earnTokenSymbol: string\n  bondContract: string\n  projectLink?: string\n  twitter?: string\n  chain: number\n  isSoldOut?: boolean\n  billType?: string\n  cgId?: string\n  dexscreener?: string\n}\n\nconst linkRowClasses = 'ape:w-full ape:mt-[5px] ape:justify-end ape:[&_svg]:w-[11px]'\nconst linkClasses = 'ape:text-[12px] ape:leading-[14px] ape:flex ape:no-underline ape:hover:underline'\n\nconst BondInfoTooltip: React.FunctionComponent<TooltipProps> = ({\n  earnTokenContract,\n  earnTokenSymbol,\n  bondContract,\n  projectLink,\n  twitter,\n  chain,\n  isSoldOut = false,\n  billType,\n  cgId,\n  dexscreener,\n}) => {\n  const config = useSDKConfig()\n  const explorerLink = BLOCK_EXPLORER[chain as ChainId]\n  const urlPage =\n    chain === ChainId.SOL\n      ? 'account'\n      : chain === ChainId.APTOS\n        ? 'object'\n        : chain === ChainId.SUI\n          ? 'object'\n          : 'address'\n  const aptosNetworkParam = chain === ChainId.APTOS ? `?network=${IS_APTOS_MAINNET ? 'mainnet' : 'testnet'}` : ''\n  const tokenLink = `${explorerLink}/${urlPage}/${earnTokenContract}${aptosNetworkParam}`\n  const bondLink = `${explorerLink}/${urlPage}/${bondContract}${aptosNetworkParam}`\n  const bondDashboard = `https://dashboard.ape.bond/bond/${bondContract}`\n\n  const handleProjectViewNavigation = () => {\n    window.location.href = `/bonds/${bondContract}/${chain}`\n    track({\n      event: 'projectInfoClick',\n      chain: chain,\n      data: {\n        cat: 'Table',\n        bond: earnTokenSymbol,\n        bondChain: chain,\n      },\n    })\n  }\n  return (\n    <Flex className=\"ape:flex-col ape:flex-wrap\">\n      <ButtonsRow\n        twitter={twitter}\n        projectLink={projectLink}\n        earnTokenContract={earnTokenContract}\n        cgId={cgId}\n        dexscreener={dexscreener}\n      />\n      {config?.referenceId === 'apebond' && !isSoldOut && billType !== 'fcfs' && (\n        <Flex className=\"ape:w-full ape:my-[5px] ape:justify-center ape:relative ape:h-[25px]\">\n          <ExpandedViewButton handleNavigation={handleProjectViewNavigation} rightPos={'-5px'} />\n        </Flex>\n      )}\n      <Flex className=\"ape:justify-center\">\n        <Flex className=\"ape:w-[144px] ape:flex-col\">\n          <Flex className={linkRowClasses}>\n            {tokenLink && (\n              <a href={tokenLink} className={linkClasses} target=\"_blank\" rel=\"noreferrer\">\n                View Token Contract\n                <Flex className=\"ape:ml-[5px]\">\n                  <External color=\"text\" width={10} />\n                </Flex>\n              </a>\n            )}\n          </Flex>\n          <Flex className={linkRowClasses}>\n            {bondLink && (\n              <a href={bondLink} className={linkClasses} target=\"_blank\" rel=\"noreferrer\">\n                View Bond Contract\n                <Flex className=\"ape:ml-[5px]\">\n                  <External color=\"text\" width={10} />\n                </Flex>\n              </a>\n            )}\n          </Flex>\n          <Flex className={linkRowClasses}>\n            {billType !== 'fcfs' && (\n              <a href={bondDashboard} className={linkClasses} target=\"_blank\" rel=\"noopener noreferrer\">\n                View Bond Insights\n                <Flex className=\"ape:ml-[5px]\">\n                  <External color=\"text\" width={10} />\n                </Flex>\n              </a>\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default BondInfoTooltip\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport { styles } from './styles'\nimport ButtonsRow from './ButtonsRow'\nimport { BLOCK_EXPLORER } from '../../config/constants/chains'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { IS_APTOS_MAINNET } from '../../constants/aptosConstants'\nimport Flex from '../uikit-sdk/Flex'\nimport { Link } from 'theme-ui'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport ExpandedViewButton from '../../views/BuyBond/components/ExpandedViewButton'\nimport track from '../../utils/track'\nimport External from '../uikit-sdk/Svg/Icons/External'\n\ninterface TooltipProps {\n  earnTokenContract: string\n  earnTokenSymbol: string\n  bondContract: string\n  projectLink?: string\n  twitter?: string\n  chain: number\n  isSoldOut?: boolean\n  billType?: string\n  cgId?: string\n  dexscreener?: string\n}\n\nconst BondInfoTooltip: React.FunctionComponent<TooltipProps> = ({\n  earnTokenContract,\n  earnTokenSymbol,\n  bondContract,\n  projectLink,\n  twitter,\n  chain,\n  isSoldOut = false,\n  billType,\n  cgId,\n  dexscreener,\n}) => {\n  const config = useSDKConfig()\n  const explorerLink = BLOCK_EXPLORER[chain as ChainId]\n  const urlPage =\n    chain === ChainId.SOL\n      ? 'account'\n      : chain === ChainId.APTOS\n        ? 'object'\n        : chain === ChainId.SUI\n          ? 'object'\n          : 'address'\n  const aptosNetworkParam = chain === ChainId.APTOS ? `?network=${IS_APTOS_MAINNET ? 'mainnet' : 'testnet'}` : ''\n  const tokenLink = `${explorerLink}/${urlPage}/${earnTokenContract}${aptosNetworkParam}`\n  const bondLink = `${explorerLink}/${urlPage}/${bondContract}${aptosNetworkParam}`\n  const bondDashboard = `https://dashboard.ape.bond/bond/${bondContract}`\n\n  const handleProjectViewNavigation = () => {\n    window.location.href = `/bonds/${bondContract}/${chain}`\n    track({\n      event: 'projectInfoClick',\n      chain: chain,\n      data: {\n        cat: 'Table',\n        bond: earnTokenSymbol,\n        bondChain: chain,\n      },\n    })\n  }\n  return (\n    <Flex sx={{ flexDirection: 'column', flexWrap: 'wrap' }}>\n      <ButtonsRow\n        twitter={twitter}\n        projectLink={projectLink}\n        earnTokenContract={earnTokenContract}\n        cgId={cgId}\n        dexscreener={dexscreener}\n      />\n      {config?.referenceId === 'apebond' && !isSoldOut && billType !== 'fcfs' && (\n        <Flex sx={{ width: '100%', my: '5px', justifyContent: 'center', position: 'relative', height: '25px' }}>\n          <ExpandedViewButton handleNavigation={handleProjectViewNavigation} rightPos={'-5px'} />\n        </Flex>\n      )}\n      <Flex sx={{ justifyContent: 'center' }}>\n        <Flex sx={{ width: '144px', flexDirection: 'column' }}>\n          <Flex sx={styles.linkRow}>\n            {tokenLink && (\n              <Link href={tokenLink} sx={styles.link} target=\"_blank\">\n                View Token Contract\n                <Flex sx={{ ml: '5px' }}>\n                  <External color=\"text\" width={10} />\n                </Flex>\n              </Link>\n            )}\n          </Flex>\n          <Flex sx={styles.linkRow}>\n            {bondLink && (\n              <Link href={bondLink} sx={styles.link} target=\"_blank\">\n                View Bond Contract\n                <Flex sx={{ ml: '5px' }}>\n                  <External color=\"text\" width={10} />\n                </Flex>\n              </Link>\n            )}\n          </Flex>\n          <Flex sx={styles.linkRow}>\n            {billType !== 'fcfs' && (\n              <Link href={bondDashboard} sx={styles.link} target=\"_blank\" rel=\"noopener noreferrer\">\n                View Bond Insights\n                <Flex sx={{ ml: '5px' }}>\n                  <External color=\"text\" width={10} />\n                </Flex>\n              </Link>\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default BondInfoTooltip\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/Tooltip/styles.d.ts

@@ -0,0 +1,2 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const styles: Record<'infoRow' | 'linkRow' | 'titleText' | 'contentText' | 'iconButton' | 'link', ThemeUIStyleObject>;

package/dist/components/Tooltip/styles.js

@@ -0,0 +1,32 @@
+const styles = {
+    linkRow: {
+        width: '100%',
+        marginTop: '5px',
+        justifyContent: 'flex-end',
+        '& svg': { width: '11px' },
+    },
+    iconButton: {
+        background: 'white3',
+        textDecoration: 'none',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 'fit-content',
+        height: '30px',
+        padding: '2px 5px',
+        borderRadius: '8px',
+        margin: '0 5px 5px 0',
+        '&:hover': {
+            cursor: 'pointer',
+        },
+    },
+    link: {
+        fontSize: '12px',
+        lineHeight: '14px',
+        display: 'flex',
+        textDecoration: 'none',
+        '&: hover': { textDecoration: 'underline' },
+    },
+};
+
+export { styles };
+//# sourceMappingURL=styles.js.map

package/dist/components/Tooltip/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/Tooltip/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nexport const styles: Record<\n  'infoRow' | 'linkRow' | 'titleText' | 'contentText' | 'iconButton' | 'link',\n  ThemeUIStyleObject\n> = {\n  infoRow: {\n    justifyContent: 'space-between',\n    width: '100%',\n    marginBottom: '5px',\n  },\n  linkRow: {\n    width: '100%',\n    marginTop: '5px',\n    justifyContent: 'flex-end',\n    '& svg': { width: '11px' },\n  },\n  titleText: {\n    fontSize: '12px',\n    lineHeight: '14px',\n    fontWeight: 500,\n  },\n  contentText: {\n    fontSize: '12px',\n    lineHeight: '14px',\n    fontWeight: 700,\n  },\n  iconButton: {\n    background: 'white3',\n    textDecoration: 'none',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 'fit-content',\n    height: '30px',\n    padding: '2px 5px',\n    borderRadius: '8px',\n    margin: '0 5px 5px 0',\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n  link: {\n    fontSize: '12px',\n    lineHeight: '14px',\n    display: 'flex',\n    textDecoration: 'none',\n    '&: hover': { textDecoration: 'underline' },\n  },\n}\n"],"names":[],"mappings":"AAEO,MAAM,MAAM,GAGf;AACF,IAKA,OAAO,EAAE;AACP,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,cAAc,EAAE,UAAU;AAC1B,QAAA,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;AAC3B,KAAA;AACD,IAUA,UAAU,EAAE;AACV,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,cAAc,EAAE,MAAM;AACtB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,YAAY,EAAE,KAAK;AACnB,QAAA,MAAM,EAAE,aAAa;AACrB,QAAA,SAAS,EAAE;AACT,YAAA,MAAM,EAAE,SAAS;AAClB,SAAA;AACF,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,MAAM;AAClB,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,cAAc,EAAE,MAAM;AACtB,QAAA,UAAU,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE;AAC5C,KAAA;;;;;"}

package/dist/components/YouTooltip/YouTooltip.d.ts

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

package/dist/components/YouTooltip/YouTooltip.js

@@ -1,8 +1,30 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx } from 'theme-ui/jsx-runtime';
 import Flex from '../uikit-sdk/Flex/index.js';
 
 const YouTooltip = () => {
-    return (jsx(Flex, { className: "ape:relative ape:ml-[10px]", children: jsx(Flex, { className: "ape-you-tooltip ape:bg-primary-button ape:h-[18px] ape:justify-center ape:rounded-[4px] ape:px-[5px] ape:font-normal ape:text-[12px] ape:absolute ape:left-0 ape:top-1/2 ape:-translate-y-1/2", children: "You" }) }));
+    return (jsx(Flex, { sx: { position: 'relative', ml: '10px' }, children: jsx(Flex, { sx: {
+                background: 'primaryButton',
+                height: '18px',
+                justifyContent: 'center',
+                borderRadius: '4px',
+                px: '5px',
+                fontWeight: 400,
+                fontSize: '12px',
+                position: 'absolute',
+                left: 0,
+                top: '50%', // Start 50% down the parent
+                transform: 'translateY(-50%)', // Adjust by the element's own height
+                '::after': {
+                    content: '""',
+                    position: 'absolute',
+                    top: '50%', // Vertically center
+                    left: '-11px', // Position outside the tooltip box
+                    transform: 'translateY(-50%)', // Center arrow vertically
+                    borderWidth: '6px', // Arrow size
+                    borderStyle: 'solid',
+                    borderColor: 'transparent var(--theme-ui-colors-primaryButton) transparent transparent', // Arrow now points left
+                },
+            }, children: "You" }) }));
 };
 
 export { YouTooltip as default };

package/dist/components/YouTooltip/YouTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"YouTooltip.js","sources":["../../../src/components/YouTooltip/YouTooltip.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\n\nconst YouTooltip = () => {\n  return (\n    <Flex className=\"ape:relative ape:ml-[10px]\">\n      <Flex className=\"ape-you-tooltip ape:bg-primary-button ape:h-[18px] ape:justify-center ape:rounded-[4px] ape:px-[5px] ape:font-normal ape:text-[12px] ape:absolute ape:left-0 ape:top-1/2 ape:-translate-y-1/2\">\n        You\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default YouTooltip\n"],"names":["_jsx"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,MAAK;AACtB,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAC1CA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,+LAA+L,EAAA,QAAA,EAAA,KAAA,EAAA,CAExM,EAAA,CACF;AAEX;;;;"}
+{"version":3,"file":"YouTooltip.js","sources":["../../../src/components/YouTooltip/YouTooltip.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\n\nconst YouTooltip = () => {\n  return (\n    <Flex sx={{ position: 'relative', ml: '10px' }}>\n      <Flex\n        sx={{\n          background: 'primaryButton',\n          height: '18px',\n          justifyContent: 'center',\n          borderRadius: '4px',\n          px: '5px',\n          fontWeight: 400,\n          fontSize: '12px',\n          position: 'absolute',\n          left: 0,\n          top: '50%', // Start 50% down the parent\n          transform: 'translateY(-50%)', // Adjust by the element's own height\n          '::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: '50%', // Vertically center\n            left: '-11px', // Position outside the tooltip box\n            transform: 'translateY(-50%)', // Center arrow vertically\n            borderWidth: '6px', // Arrow size\n            borderStyle: 'solid',\n            borderColor: 'transparent var(--theme-ui-colors-primaryButton) transparent transparent', // Arrow now points left\n          },\n        }}\n      >\n        You\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default YouTooltip\n"],"names":["_jsx"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,MAAK;IACtB,QACEA,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAC5CA,IAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gBAAA,UAAU,EAAE,eAAe;AAC3B,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,YAAY,EAAE,KAAK;AACnB,gBAAA,EAAE,EAAE,KAAK;AACT,gBAAA,UAAU,EAAE,GAAG;AACf,gBAAA,QAAQ,EAAE,MAAM;AAChB,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,IAAI,EAAE,CAAC;gBACP,GAAG,EAAE,KAAK;gBACV,SAAS,EAAE,kBAAkB;AAC7B,gBAAA,SAAS,EAAE;AACT,oBAAA,OAAO,EAAE,IAAI;AACb,oBAAA,QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,KAAK;oBACV,IAAI,EAAE,OAAO;oBACb,SAAS,EAAE,kBAAkB;oBAC7B,WAAW,EAAE,KAAK;AAClB,oBAAA,WAAW,EAAE,OAAO;oBACpB,WAAW,EAAE,0EAA0E;AACxF,iBAAA;aACF,EAAA,QAAA,EAAA,KAAA,EAAA,CAGI,EAAA,CACF;AAEX;;;;"}

package/dist/components/uikit-sdk/Button/Button.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ButtonProps } from './types';
-declare const Button: ({ variant, size, load, children, startIcon, endIcon, fullWidth, disabled, className, style, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ variant, size, load, children, startIcon, endIcon, fullWidth, disabled, ...props }: ButtonProps) => React.JSX.Element;
 export default Button;