@ape.swap/bonds-sdk 6.2.13 → 6.2.15

package/dist/components/uikit-sdk/Toggle/index.js

@@ -1,15 +1,16 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import styles from './styles.js';
 import Flex from '../Flex/index.js';
 import { AnimatePresence, motion } from 'framer-motion';
 import { BondsViewOptions } from '../../../state/activeView/index.js';
 
 const Toggle = ({ options, activeOption, handleToggle, claimableBillsAmount, }) => {
-    return (jsx(Flex, { className: "ape:rounded-normal ape:bg-white2 ape:w-full ape:relative", children: jsx(AnimatePresence, { initial: false, children: options.map((option) => {
-                const isActive = option === activeOption;
-                return (jsx(motion.div, { animate: { opacity: isActive ? 1 : 0.6, scale: isActive ? 1 : 0.9 }, exit: { opacity: 0, scale: 0.9 }, transition: { duration: 0.2, type: 'spring', stiffness: 50 }, className: "ape:overflow-hidden ape:w-full", children: jsxs(Flex, { className: clsx('ape:rounded-normal ape:justify-center ape:px-[14px] ape:py-[5px] ape:cursor-pointer ape:text-[14px]', isActive
-                            ? 'ape:bg-primary-button ape:text-primary-bright'
-                            : 'ape:bg-white2 ape:text-primary-button-disable'), onClick: () => handleToggle(option), children: [option, option === BondsViewOptions.YOURBONDS && claimableBillsAmount ? ` (${claimableBillsAmount})` : ''] }) }, option));
+    return (jsx(Flex, { sx: styles.container, children: jsx(AnimatePresence, { initial: false, children: options.map((option) => {
+                return (jsx(motion.div, { animate: { opacity: option === activeOption ? 1 : 0.6, scale: option === activeOption ? 1 : 0.9 }, exit: { opacity: 0, scale: 0.9 }, transition: { duration: 0.2, type: 'spring', stiffness: 50 }, sx: { overflow: 'hidden', width: '100%' }, children: jsxs(Flex, { sx: {
+                            ...styles.switch,
+                            background: option === activeOption ? 'primaryButton' : 'white2',
+                            color: option === activeOption ? 'primaryBright' : 'primaryButtonDisable',
+                        }, onClick: () => handleToggle(option), children: [option, option === BondsViewOptions.YOURBONDS && claimableBillsAmount ? ` (${claimableBillsAmount})` : ''] }) }, option));
             }) }) }));
 };
 

package/dist/components/uikit-sdk/Toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Toggle/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport Flex from '../Flex'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { BondsViewOptions } from '../../../state/activeView'\n\nconst Toggle = ({\n  options,\n  activeOption,\n  handleToggle,\n  claimableBillsAmount,\n}: {\n  options: string[]\n  activeOption: string\n  handleToggle: (newOption: string) => void\n  claimableBillsAmount?: string\n}) => {\n  return (\n    <Flex className=\"ape:rounded-normal ape:bg-white2 ape:w-full ape:relative\">\n      <AnimatePresence initial={false}>\n        {options.map((option) => {\n          const isActive = option === activeOption\n          return (\n            <motion.div\n              key={option}\n              animate={{ opacity: isActive ? 1 : 0.6, scale: isActive ? 1 : 0.9 }}\n              exit={{ opacity: 0, scale: 0.9 }}\n              transition={{ duration: 0.2, type: 'spring', stiffness: 50 }}\n              className=\"ape:overflow-hidden ape:w-full\"\n            >\n              <Flex\n                className={clsx(\n                  'ape:rounded-normal ape:justify-center ape:px-[14px] ape:py-[5px] ape:cursor-pointer ape:text-[14px]',\n                  isActive\n                    ? 'ape:bg-primary-button ape:text-primary-bright'\n                    : 'ape:bg-white2 ape:text-primary-button-disable',\n                )}\n                onClick={() => handleToggle(option)}\n              >\n                {option}\n                {option === BondsViewOptions.YOURBONDS && claimableBillsAmount ? ` (${claimableBillsAmount})` : ''}\n              </Flex>\n            </motion.div>\n          )\n        })}\n      </AnimatePresence>\n    </Flex>\n  )\n}\n\nexport default Toggle\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAMA,MAAM,MAAM,GAAG,CAAC,EACd,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,oBAAoB,GAMrB,KAAI;IACH,QACEA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0DAA0D,EAAA,QAAA,EACxEA,GAAA,CAAC,eAAe,EAAA,EAAC,OAAO,EAAE,KAAK,YAC5B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;AACtB,gBAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,YAAY;AACxC,gBAAA,QACEA,GAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EAET,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,EAAE,QAAQ,GAAG,CAAC,GAAG,GAAG,EAAE,EACnE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAChC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,EAC5D,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAE1CC,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,IAAI,CACb,qGAAqG,EACrG;AACE,8BAAE;AACF,8BAAE,+CAA+C,CACpD,EACD,OAAO,EAAE,MAAM,YAAY,CAAC,MAAM,CAAC,aAElC,MAAM,EACN,MAAM,KAAK,gBAAgB,CAAC,SAAS,IAAI,oBAAoB,GAAG,KAAK,oBAAoB,CAAA,CAAA,CAAG,GAAG,EAAE,CAAA,EAAA,CAC7F,IAjBF,MAAM,CAkBA;AAEjB,YAAA,CAAC,CAAC,EAAA,CACc,EAAA,CACb;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Toggle/index.tsx"],"sourcesContent":["import React from 'react'\nimport styles from './styles'\nimport Flex from '../Flex'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { BondsViewOptions } from '../../../state/activeView'\n\nconst Toggle = ({\n  options,\n  activeOption,\n  handleToggle,\n  claimableBillsAmount,\n}: {\n  options: string[]\n  activeOption: string\n  handleToggle: (newOption: string) => void\n  claimableBillsAmount?: string\n}) => {\n  return (\n    <Flex sx={styles.container}>\n      <AnimatePresence initial={false}>\n        {options.map((option) => {\n          return (\n            <motion.div\n              key={option}\n              animate={{ opacity: option === activeOption ? 1 : 0.6, scale: option === activeOption ? 1 : 0.9 }}\n              exit={{ opacity: 0, scale: 0.9 }}\n              transition={{ duration: 0.2, type: 'spring', stiffness: 50 }}\n              sx={{ overflow: 'hidden', width: '100%' }}\n            >\n              <Flex\n                sx={{\n                  ...styles.switch,\n                  background: option === activeOption ? 'primaryButton' : 'white2',\n                  color: option === activeOption ? 'primaryBright' : 'primaryButtonDisable',\n                }}\n                onClick={() => handleToggle(option)}\n              >\n                {option}\n                {option === BondsViewOptions.YOURBONDS && claimableBillsAmount ? ` (${claimableBillsAmount})` : ''}\n              </Flex>\n            </motion.div>\n          )\n        })}\n      </AnimatePresence>\n    </Flex>\n  )\n}\n\nexport default Toggle\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAMA,MAAM,MAAM,GAAG,CAAC,EACd,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,oBAAoB,GAMrB,KAAI;IACH,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,SAAS,EAAA,QAAA,EACxBA,GAAA,CAAC,eAAe,IAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;AACtB,gBAAA,QACEA,GAAA,CAAC,MAAM,CAAC,GAAG,IAET,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,KAAK,YAAY,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,YAAY,GAAG,CAAC,GAAG,GAAG,EAAE,EACjG,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAChC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,EAC5D,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,QAAA,EAEzCC,KAAC,IAAI,EAAA,EACH,EAAE,EAAE;4BACF,GAAG,MAAM,CAAC,MAAM;4BAChB,UAAU,EAAE,MAAM,KAAK,YAAY,GAAG,eAAe,GAAG,QAAQ;4BAChE,KAAK,EAAE,MAAM,KAAK,YAAY,GAAG,eAAe,GAAG,sBAAsB;AAC1E,yBAAA,EACD,OAAO,EAAE,MAAM,YAAY,CAAC,MAAM,CAAC,aAElC,MAAM,EACN,MAAM,KAAK,gBAAgB,CAAC,SAAS,IAAI,oBAAoB,GAAG,CAAA,EAAA,EAAK,oBAAoB,CAAA,CAAA,CAAG,GAAG,EAAE,CAAA,EAAA,CAC7F,EAAA,EAhBF,MAAM,CAiBA;AAEjB,YAAA,CAAC,CAAC,EAAA,CACc,EAAA,CACb;AAEX;;;;"}

package/dist/components/uikit-sdk/Toggle/styles.d.ts

@@ -0,0 +1,3 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+declare const styles: Record<string, ThemeUIStyleObject>;
+export default styles;

package/dist/components/uikit-sdk/Toggle/styles.js

@@ -0,0 +1,22 @@
+const styles = {
+    container: {
+        display: 'flex',
+        borderRadius: 'normal',
+        background: 'white2',
+        width: '100%',
+        position: 'relative',
+    },
+    switch: {
+        borderRadius: 'normal',
+        justifyContent: 'center',
+        px: '14px',
+        py: '5px',
+        cursor: 'pointer',
+        fontSize: '14px',
+        '&:hover': {
+            filter: '20%',
+        },
+    }};
+
+export { styles as default };
+//# sourceMappingURL=styles.js.map

package/dist/components/uikit-sdk/Toggle/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/uikit-sdk/Toggle/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nconst styles: Record<string, ThemeUIStyleObject> = {\n  container: {\n    display: 'flex',\n    borderRadius: 'normal',\n    background: 'white2',\n    width: '100%',\n    position: 'relative',\n  },\n  switch: {\n    borderRadius: 'normal',\n    justifyContent: 'center',\n    px: '14px',\n    py: '5px',\n    cursor: 'pointer',\n    fontSize: '14px',\n    '&:hover': {\n      filter: '20%',\n    },\n  },\n  button: {\n    position: 'absolute',\n    border: 0,\n    top: 0,\n    height: '100%',\n    transition: 'left 0.2s linear',\n    textTransform: 'none',\n    '&:hover': {\n      filter: 'none',\n    },\n  },\n  input: {\n    bottom: 0,\n    left: 0,\n    position: 'absolute',\n    opacity: 0,\n    pointerEvents: 'none',\n    width: '100%',\n  },\n}\n\nexport default styles\n"],"names":[],"mappings":"AAEA,MAAM,MAAM,GAAuC;AACjD,IAAA,SAAS,EAAE;AACT,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,QAAQ,EAAE,UAAU;AACrB,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,KAAK;AACT,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,SAAS,EAAE;AACT,YAAA,MAAM,EAAE,KAAK;AACd,SAAA;AACF;;;;"}

package/dist/components/uikit-sdk/TokenImage/index.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 declare const TokenImage: ({ symbol, symbol2, size, chain, }: {
     symbol?: string;
     symbol2?: string;
     size: number;
     chain?: number;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default TokenImage;

package/dist/components/uikit-sdk/TokenImage/index.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'theme-ui/jsx-runtime';
 import { useState } from 'react';
 import Flex from '../Flex/index.js';
 import { NETWORK_ICONS } from '../../../config/constants/chains.js';
@@ -19,12 +19,54 @@ const TokenImage = ({ symbol, symbol2, size, chain, }) => {
     const url1 = token1 ? `${APEBOND}/tokenImages/${token1.toUpperCase()}.png` : '';
     const [error, setError] = useState(failedUrls.has(url1));
     const NetworkIcon = (chain && NETWORK_ICONS?.[chain]) || Question;
-    return error || !token1 ? (jsx(Flex, { className: "ape:justify-center ape:items-center ape:relative", style: { width: size - 2, height: size - 2, borderRadius: '55px' }, children: jsx(Skeleton, { animation: "waves", style: { width: size - 2, height: size - 2, borderRadius: '55px', marginBottom: '5px' } }) })) : token2 ? (jsxs(Flex, { className: "ape:justify-center ape:items-center ape:relative", style: { minWidth: size * 1.5 - 2, height: size - 2, borderRadius: '55px' }, children: [jsx("img", { src: url1, alt: `tokenImgFor:${token1}`, width: size, height: size, style: { position: 'absolute', zIndex: 4001, left: 0 }, onLoad: () => loadedUrls.add(url1) }), jsx("img", { src: `${APEBOND}/tokenImages/${token2.toUpperCase()}.png`, alt: `tokenImgFor:${token2}`, width: size, height: size, style: { position: 'absolute', zIndex: 4000, left: '33%' } }), chain && (jsx(Flex, { className: "ape:absolute ape:overflow-hidden ape:rounded-[50px]", style: { zIndex: 4002, top: '-2px', right: `-${size / 5}px` }, children: jsx(NetworkIcon, { width: size / 2.5, height: size / 2.5 }) }))] })) : (jsxs(Flex, { className: "ape:justify-center ape:items-center ape:relative", style: { width: size - 2, height: size - 2, borderRadius: '55px' }, children: [jsx("img", { src: url1, alt: `tokenImgFor:${token1}`, width: size, height: token1 === 'BNB-ICHI' ? 19 : size, onLoad: () => loadedUrls.add(url1), onError: () => {
+    return error || !token1 ? (jsx(Flex, { sx: {
+            width: size - 2,
+            height: size - 2,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: '55px',
+            position: 'relative',
+        }, children: jsx(Skeleton, { animation: "waves", sx: {
+                width: size - 2,
+                height: size - 2,
+                borderRadius: '55px',
+                mb: '5px',
+            } }) })) : token2 ? (jsxs(Flex, { sx: {
+            minWidth: size * 1.5 - 2,
+            height: size - 2,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: '55px',
+            position: 'relative',
+        }, children: [jsx("img", { src: url1, alt: `tokenImgFor:${token1}`, width: size, height: size, style: { position: 'absolute', zIndex: 4001, left: 0 }, onLoad: () => loadedUrls.add(url1) }), jsx("img", { src: `${APEBOND}/tokenImages/${token2.toUpperCase()}.png`, alt: `tokenImgFor:${token2}`, width: size, height: size, style: { position: 'absolute', zIndex: 4000, left: '33%' } }), chain && (jsx(Flex, { sx: {
+                    zIndex: 4002,
+                    position: 'absolute',
+                    top: '-2px',
+                    right: `-${size / 5}px`,
+                    overflow: 'hidden',
+                    borderRadius: '50px',
+                }, children: jsx(NetworkIcon, { width: size / 2.5, height: size / 2.5 }) }))] })) : (jsxs(Flex, { sx: {
+            width: size - 2,
+            height: size - 2,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: '55px',
+            position: 'relative',
+        }, children: [jsx("img", { src: url1, alt: `tokenImgFor:${token1}`, width: size, height: token1 === 'BNB-ICHI' ? 19 : size, onLoad: () => loadedUrls.add(url1), onError: () => {
                     if (!loadedUrls.has(url1)) {
                         failedUrls.add(url1);
                         setError(true);
                     }
-                } }), chain && (jsx(Flex, { className: "ape:absolute ape:overflow-hidden ape:rounded-[50px]", style: { zIndex: 5, top: '-2px', right: '-4px', width: `${size / 2.5}px`, height: `${size / 2.5}px` }, children: jsx(NetworkIcon, { width: size / 2.5, height: size / 2.5 }) }))] }));
+                } }), chain && (jsx(Flex, { sx: {
+                    zIndex: 5,
+                    position: 'absolute',
+                    top: '-2px',
+                    right: '-4px',
+                    overflow: 'hidden',
+                    borderRadius: '50px',
+                    width: `${size / 2.5}px`,
+                    height: `${size / 2.5}px`,
+                }, children: jsx(NetworkIcon, { width: size / 2.5, height: size / 2.5 }) }))] }));
 };
 
 export { TokenImage as default };

package/dist/components/uikit-sdk/TokenImage/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/TokenImage/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../Flex'\nimport { NETWORK_ICONS } from '../../../config/constants/chains'\nimport { APEBOND } from '../../../config/constants/variables'\nimport Skeleton from '../Skeleton'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport Question from '../Svg/Icons/Question'\n\n// TODO(aptos): Upload Aptos token images to https://www.ape.bond/tokenImages/\n// Missing: APT.png, TAPE.png (tAPE). Without them the token selector shows a\n// skeleton loader instead of the token logo.\n\n// Module-level cache: once an image loads successfully, skip onError on re-mounts.\nconst loadedUrls = new Set<string>()\nconst failedUrls = new Set<string>()\n\nconst TokenImage = ({\n  symbol,\n  symbol2,\n  size,\n  chain,\n}: {\n  symbol?: string\n  symbol2?: string\n  size: number\n  chain?: number\n}) => {\n  const token1 = symbol === 'USDC.e' ? 'USDC' : symbol === 'AIX' && chain === ChainId.SOL ? 'SOLAIX' : symbol\n  const token2 = symbol2 === 'USDC.e' ? 'USDC' : symbol2 === 'AIX' && chain === ChainId.SOL ? 'SOLAIX' : symbol2\n  const url1 = token1 ? `${APEBOND}/tokenImages/${token1.toUpperCase()}.png` : ''\n  const [error, setError] = useState(failedUrls.has(url1))\n  const NetworkIcon = (chain && NETWORK_ICONS?.[chain]) || Question\n\n  return error || !token1 ? (\n    <Flex\n      className=\"ape:justify-center ape:items-center ape:relative\"\n      style={{ width: size - 2, height: size - 2, borderRadius: '55px' }}\n    >\n      <Skeleton\n        animation=\"waves\"\n        style={{ width: size - 2, height: size - 2, borderRadius: '55px', marginBottom: '5px' }}\n      />\n    </Flex>\n  ) : token2 ? (\n    <Flex\n      className=\"ape:justify-center ape:items-center ape:relative\"\n      style={{ minWidth: size * 1.5 - 2, height: size - 2, borderRadius: '55px' }}\n    >\n      <img\n        src={url1}\n        alt={`tokenImgFor:${token1}`}\n        width={size}\n        height={size}\n        style={{ position: 'absolute', zIndex: 4001, left: 0 }}\n        onLoad={() => loadedUrls.add(url1)}\n      />\n      <img\n        src={`${APEBOND}/tokenImages/${token2.toUpperCase()}.png`}\n        alt={`tokenImgFor:${token2}`}\n        width={size}\n        height={size}\n        style={{ position: 'absolute', zIndex: 4000, left: '33%' }}\n      />\n      {chain && (\n        <Flex\n          className=\"ape:absolute ape:overflow-hidden ape:rounded-[50px]\"\n          style={{ zIndex: 4002, top: '-2px', right: `-${size / 5}px` }}\n        >\n          <NetworkIcon width={size / 2.5} height={size / 2.5} />\n        </Flex>\n      )}\n    </Flex>\n  ) : (\n    <Flex\n      className=\"ape:justify-center ape:items-center ape:relative\"\n      style={{ width: size - 2, height: size - 2, borderRadius: '55px' }}\n    >\n      <img\n        src={url1}\n        alt={`tokenImgFor:${token1}`}\n        width={size}\n        height={token1 === 'BNB-ICHI' ? 19 : size}\n        onLoad={() => loadedUrls.add(url1)}\n        onError={() => {\n          if (!loadedUrls.has(url1)) {\n            failedUrls.add(url1)\n            setError(true)\n          }\n        }}\n      />\n      {chain && (\n        <Flex\n          className=\"ape:absolute ape:overflow-hidden ape:rounded-[50px]\"\n          style={{ zIndex: 5, top: '-2px', right: '-4px', width: `${size / 2.5}px`, height: `${size / 2.5}px` }}\n        >\n          <NetworkIcon width={size / 2.5} height={size / 2.5} />\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default TokenImage\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/TokenImage/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../Flex'\nimport { NETWORK_ICONS } from '../../../config/constants/chains'\nimport { APEBOND } from '../../../config/constants/variables'\nimport Skeleton from '../Skeleton'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport Question from '../Svg/Icons/Question'\n\n// TODO(aptos): Upload Aptos token images to https://www.ape.bond/tokenImages/\n// Missing: APT.png, TAPE.png (tAPE). Without them the token selector shows a\n// skeleton loader instead of the token logo.\n\n// Module-level cache: once an image loads successfully, skip onError on re-mounts.\nconst loadedUrls = new Set<string>()\nconst failedUrls = new Set<string>()\n\nconst TokenImage = ({\n  symbol,\n  symbol2,\n  size,\n  chain,\n}: {\n  symbol?: string\n  symbol2?: string\n  size: number\n  chain?: number\n}) => {\n  const token1 = symbol === 'USDC.e' ? 'USDC' : symbol === 'AIX' && chain === ChainId.SOL ? 'SOLAIX' : symbol\n  const token2 = symbol2 === 'USDC.e' ? 'USDC' : symbol2 === 'AIX' && chain === ChainId.SOL ? 'SOLAIX' : symbol2\n  const url1 = token1 ? `${APEBOND}/tokenImages/${token1.toUpperCase()}.png` : ''\n  const [error, setError] = useState(failedUrls.has(url1))\n  const NetworkIcon = (chain && NETWORK_ICONS?.[chain]) || Question\n\n  return error || !token1 ? (\n    <Flex\n      sx={{\n        width: size - 2,\n        height: size - 2,\n        justifyContent: 'center',\n        alignItems: 'center',\n        borderRadius: '55px',\n        position: 'relative',\n      }}\n    >\n      <Skeleton\n        animation=\"waves\"\n        sx={{\n          width: size - 2,\n          height: size - 2,\n          borderRadius: '55px',\n          mb: '5px',\n        }}\n      />\n    </Flex>\n  ) : token2 ? (\n    <Flex\n      sx={{\n        minWidth: size * 1.5 - 2,\n        height: size - 2,\n        justifyContent: 'center',\n        alignItems: 'center',\n        borderRadius: '55px',\n        position: 'relative',\n      }}\n    >\n      <img\n        src={url1}\n        alt={`tokenImgFor:${token1}`}\n        width={size}\n        height={size}\n        style={{ position: 'absolute', zIndex: 4001, left: 0 }}\n        onLoad={() => loadedUrls.add(url1)}\n      />\n      <img\n        src={`${APEBOND}/tokenImages/${token2.toUpperCase()}.png`}\n        alt={`tokenImgFor:${token2}`}\n        width={size}\n        height={size}\n        style={{ position: 'absolute', zIndex: 4000, left: '33%' }}\n      />\n      {chain && (\n        <Flex\n          sx={{\n            zIndex: 4002,\n            position: 'absolute',\n            top: '-2px',\n            right: `-${size / 5}px`,\n            overflow: 'hidden',\n            borderRadius: '50px',\n          }}\n        >\n          <NetworkIcon width={size / 2.5} height={size / 2.5} />\n        </Flex>\n      )}\n    </Flex>\n  ) : (\n    <Flex\n      sx={{\n        width: size - 2,\n        height: size - 2,\n        justifyContent: 'center',\n        alignItems: 'center',\n        borderRadius: '55px',\n        position: 'relative',\n      }}\n    >\n      <img\n        src={url1}\n        alt={`tokenImgFor:${token1}`}\n        width={size}\n        height={token1 === 'BNB-ICHI' ? 19 : size}\n        onLoad={() => loadedUrls.add(url1)}\n        onError={() => {\n          if (!loadedUrls.has(url1)) {\n            failedUrls.add(url1)\n            setError(true)\n          }\n        }}\n      />\n      {chain && (\n        <Flex\n          sx={{\n            zIndex: 5,\n            position: 'absolute',\n            top: '-2px',\n            right: '-4px',\n            overflow: 'hidden',\n            borderRadius: '50px',\n            width: `${size / 2.5}px`,\n            height: `${size / 2.5}px`,\n          }}\n        >\n          <NetworkIcon width={size / 2.5} height={size / 2.5} />\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default TokenImage\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/uikit-sdk/TooltipBubble/index.js

@@ -1,44 +1,64 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { Box } from 'theme-ui';
 import { placements } from './types.js';
+import styles, { container } from './styles.js';
 
 const placementStyles = {
-    [placements.BOTTOMLEFT]: { top: '100%', left: 0, marginTop: '-3px' },
-    [placements.BOTTOMRIGHT]: { top: '100%', right: 0, marginTop: '-3px' },
-    [placements.TOPLEFT]: { bottom: 'calc(100% + 15px)', left: 0 },
-    [placements.TOPRIGHT]: { bottom: 'calc(100% + 15px)', right: 0 },
-    [placements.ONLYCONTAINERRIGHT]: { top: 'calc(100% + 15px)', right: 0 },
-    [placements.LEFT]: { left: 'calc(100% + 15px)', right: 0 },
+    [placements.BOTTOMLEFT]: {
+        top: '100%',
+        left: 0,
+        mt: '-3px', // To create an overlap between parent and tooltip
+    },
+    [placements.BOTTOMRIGHT]: {
+        top: '100%',
+        right: 0,
+        mt: '-3px',
+    },
+    [placements.TOPLEFT]: {
+        bottom: 'calc(100% + 15px)',
+        left: 0,
+    },
+    [placements.TOPRIGHT]: {
+        bottom: 'calc(100% + 15px)',
+        right: 0,
+    },
+    [placements.ONLYCONTAINERRIGHT]: {
+        top: 'calc(100% + 15px)',
+        right: 0,
+    },
+    [placements.LEFT]: {
+        left: 'calc(100% + 15px)',
+        right: 0,
+    },
 };
-const placementArrowClass = {
-    [placements.BOTTOMLEFT]: 'ape-tooltip-bottom-left',
-    [placements.BOTTOMRIGHT]: 'ape-tooltip-bottom-right',
-    [placements.TOPLEFT]: 'ape-tooltip-top-left',
-    [placements.TOPRIGHT]: 'ape-tooltip-top-right',
-    [placements.ONLYCONTAINERRIGHT]: 'ape-tooltip-only-container-right',
-    [placements.LEFT]: 'ape-tooltip-left',
-};
-const TooltipBubble = ({ width, placement = placements.BOTTOMRIGHT, body, backgroundColor, hideTooltip, children, transformTip, className, ...props }) => {
+const TooltipBubble = ({ width, placement = placements.BOTTOMRIGHT, body, backgroundColor, hideTooltip, children, transformTip, ...props }) => {
+    const backgroundColorStyle = backgroundColor
+        ? {
+            backgroundColor,
+            '&:before': {
+                borderBottomColor: placement === placements.BOTTOMLEFT || placement === placements.BOTTOMRIGHT || placement === placements.LEFT
+                    ? backgroundColor
+                    : undefined,
+                borderTopColor: placement === placements.TOPLEFT || placement === placements.TOPRIGHT || placement === placements.LEFT
+                    ? backgroundColor
+                    : undefined,
+            },
+        }
+        : {};
     const handleClick = (event) => {
         event.stopPropagation();
     };
-    return (jsxs("div", { className: "ape:relative ape:flex ape:group/tooltip", onClick: handleClick, children: [jsx("div", { 
-                // Visibility is gated here, not on the innermost bubble div below —
-                // some callers (e.g. BonusComponent) also set their own `display` on
-                // the bubble directly, which would otherwise fight this for control.
-                // Keeping the two on separate elements means a stray caller override
-                // can only ever apply to an already-hidden ancestor.
-                // Named group (`group/tooltip`) is required: plain `group`/`group-hover`
-                // is unscoped in Tailwind — it fires on ANY hovered ancestor with the
-                // `group` class, not just the nearest one. BondRow.tsx (and others)
-                // put their own `ape:group` on the row for unrelated hover effects, so
-                // an unnamed group here made every tooltip in a row appear at once
-                // when hovering anywhere on the row.
-                className: clsx('ape:absolute', hideTooltip ? 'ape:hidden' : 'ape:hidden ape:group-hover/tooltip:block'), style: placementStyles[placement] || {}, children: jsx("div", { ...props, className: clsx('ape-tooltip-bubble', placementArrowClass[placement], className), style: {
+    return (jsxs(Box, { sx: container(hideTooltip), onClick: handleClick, children: [jsx(Box, { sx: {
+                    position: 'absolute',
+                    ...(placementStyles[placement] || {}),
+                }, children: jsx(Box, { sx: {
+                        position: 'relative',
+                        ...styles.default,
+                        ...styles[placement],
+                        ...backgroundColorStyle,
                         width,
                         transform: transformTip,
-                        ...(backgroundColor ? { '--ape-tooltip-bg': backgroundColor } : {}),
-                    }, children: body }) }), children] }));
+                    }, ...props, children: body }) }), children] }));
 };
 
 export { TooltipBubble as default };

package/dist/components/uikit-sdk/TooltipBubble/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/TooltipBubble/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { TooltipProps, placements } from './types'\n\nconst placementStyles: Record<string, React.CSSProperties> = {\n  [placements.BOTTOMLEFT]: { top: '100%', left: 0, marginTop: '-3px' },\n  [placements.BOTTOMRIGHT]: { top: '100%', right: 0, marginTop: '-3px' },\n  [placements.TOPLEFT]: { bottom: 'calc(100% + 15px)', left: 0 },\n  [placements.TOPRIGHT]: { bottom: 'calc(100% + 15px)', right: 0 },\n  [placements.ONLYCONTAINERRIGHT]: { top: 'calc(100% + 15px)', right: 0 },\n  [placements.LEFT]: { left: 'calc(100% + 15px)', right: 0 },\n}\n\nconst placementArrowClass: Record<string, string> = {\n  [placements.BOTTOMLEFT]: 'ape-tooltip-bottom-left',\n  [placements.BOTTOMRIGHT]: 'ape-tooltip-bottom-right',\n  [placements.TOPLEFT]: 'ape-tooltip-top-left',\n  [placements.TOPRIGHT]: 'ape-tooltip-top-right',\n  [placements.ONLYCONTAINERRIGHT]: 'ape-tooltip-only-container-right',\n  [placements.LEFT]: 'ape-tooltip-left',\n}\n\nconst TooltipBubble: React.FC<TooltipProps> = ({\n  width,\n  placement = placements.BOTTOMRIGHT,\n  body,\n  backgroundColor,\n  hideTooltip,\n  children,\n  transformTip,\n  className,\n  ...props\n}) => {\n  const handleClick = (event: React.MouseEvent) => {\n    event.stopPropagation()\n  }\n\n  return (\n    <div className=\"ape:relative ape:flex ape:group/tooltip\" onClick={handleClick}>\n      <div\n        // Visibility is gated here, not on the innermost bubble div below —\n        // some callers (e.g. BonusComponent) also set their own `display` on\n        // the bubble directly, which would otherwise fight this for control.\n        // Keeping the two on separate elements means a stray caller override\n        // can only ever apply to an already-hidden ancestor.\n        // Named group (`group/tooltip`) is required: plain `group`/`group-hover`\n        // is unscoped in Tailwind — it fires on ANY hovered ancestor with the\n        // `group` class, not just the nearest one. BondRow.tsx (and others)\n        // put their own `ape:group` on the row for unrelated hover effects, so\n        // an unnamed group here made every tooltip in a row appear at once\n        // when hovering anywhere on the row.\n        className={clsx('ape:absolute', hideTooltip ? 'ape:hidden' : 'ape:hidden ape:group-hover/tooltip:block')}\n        style={placementStyles[placement] || {}}\n      >\n        <div\n          {...props}\n          className={clsx('ape-tooltip-bubble', placementArrowClass[placement], className)}\n          style={{\n            width,\n            transform: transformTip,\n            ...(backgroundColor ? ({ '--ape-tooltip-bg': backgroundColor } as React.CSSProperties) : {}),\n          }}\n        >\n          {body}\n        </div>\n      </div>\n      {children}\n    </div>\n  )\n}\n\nexport default TooltipBubble\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAIA,MAAM,eAAe,GAAwC;AAC3D,IAAA,CAAC,UAAU,CAAC,UAAU,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;AACpE,IAAA,CAAC,UAAU,CAAC,WAAW,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;AACtE,IAAA,CAAC,UAAU,CAAC,OAAO,GAAG,EAAE,MAAM,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,EAAE;AAC9D,IAAA,CAAC,UAAU,CAAC,QAAQ,GAAG,EAAE,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,CAAC,EAAE;AAChE,IAAA,CAAC,UAAU,CAAC,kBAAkB,GAAG,EAAE,GAAG,EAAE,mBAAmB,EAAE,KAAK,EAAE,CAAC,EAAE;AACvE,IAAA,CAAC,UAAU,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,CAAC,EAAE;CAC3D;AAED,MAAM,mBAAmB,GAA2B;AAClD,IAAA,CAAC,UAAU,CAAC,UAAU,GAAG,yBAAyB;AAClD,IAAA,CAAC,UAAU,CAAC,WAAW,GAAG,0BAA0B;AACpD,IAAA,CAAC,UAAU,CAAC,OAAO,GAAG,sBAAsB;AAC5C,IAAA,CAAC,UAAU,CAAC,QAAQ,GAAG,uBAAuB;AAC9C,IAAA,CAAC,UAAU,CAAC,kBAAkB,GAAG,kCAAkC;AACnE,IAAA,CAAC,UAAU,CAAC,IAAI,GAAG,kBAAkB;CACtC;AAED,MAAM,aAAa,GAA2B,CAAC,EAC7C,KAAK,EACL,SAAS,GAAG,UAAU,CAAC,WAAW,EAClC,IAAI,EACJ,eAAe,EACf,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,WAAW,GAAG,CAAC,KAAuB,KAAI;QAC9C,KAAK,CAAC,eAAe,EAAE;AACzB,IAAA,CAAC;IAED,QACEA,cAAK,SAAS,EAAC,yCAAyC,EAAC,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,CAC3EC,GAAA,CAAA,KAAA,EAAA;;;;;;;;;;;;AAYE,gBAAA,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,YAAY,GAAG,0CAA0C,CAAC,EACxG,KAAK,EAAE,eAAe,CAAC,SAAS,CAAC,IAAI,EAAE,YAEvCA,GAAA,CAAA,KAAA,EAAA,EAAA,GACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,EAChF,KAAK,EAAE;wBACL,KAAK;AACL,wBAAA,SAAS,EAAE,YAAY;AACvB,wBAAA,IAAI,eAAe,GAAI,EAAE,kBAAkB,EAAE,eAAe,EAA0B,GAAG,EAAE,CAAC;AAC7F,qBAAA,EAAA,QAAA,EAEA,IAAI,EAAA,CACD,EAAA,CACF,EACL,QAAQ,CAAA,EAAA,CACL;AAEV;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/TooltipBubble/index.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, ThemeUIStyleObject } from 'theme-ui'\nimport { TooltipProps, placements } from './types'\nimport style, { container } from './styles'\n\nconst placementStyles = {\n  [placements.BOTTOMLEFT]: {\n    top: '100%',\n    left: 0,\n    mt: '-3px', // To create an overlap between parent and tooltip\n  },\n  [placements.BOTTOMRIGHT]: {\n    top: '100%',\n    right: 0,\n    mt: '-3px',\n  },\n  [placements.TOPLEFT]: {\n    bottom: 'calc(100% + 15px)',\n    left: 0,\n  },\n  [placements.TOPRIGHT]: {\n    bottom: 'calc(100% + 15px)',\n    right: 0,\n  },\n  [placements.ONLYCONTAINERRIGHT]: {\n    top: 'calc(100% + 15px)',\n    right: 0,\n  },\n  [placements.LEFT]: {\n    left: 'calc(100% + 15px)',\n    right: 0,\n  },\n}\n\nconst TooltipBubble: React.FC<TooltipProps> = ({\n  width,\n  placement = placements.BOTTOMRIGHT,\n  body,\n  backgroundColor,\n  hideTooltip,\n  children,\n  transformTip,\n  ...props\n}) => {\n  const backgroundColorStyle = backgroundColor\n    ? ({\n        backgroundColor,\n        '&:before': {\n          borderBottomColor:\n            placement === placements.BOTTOMLEFT || placement === placements.BOTTOMRIGHT || placement === placements.LEFT\n              ? backgroundColor\n              : undefined,\n          borderTopColor:\n            placement === placements.TOPLEFT || placement === placements.TOPRIGHT || placement === placements.LEFT\n              ? backgroundColor\n              : undefined,\n        },\n      } as ThemeUIStyleObject)\n    : {}\n\n  const handleClick = (event: React.MouseEvent) => {\n    event.stopPropagation()\n  }\n\n  return (\n    <Box sx={container(hideTooltip)} onClick={handleClick}>\n      <Box\n        sx={{\n          position: 'absolute',\n          ...(placementStyles[placement] || {}),\n        }}\n      >\n        <Box\n          sx={{\n            position: 'relative',\n            ...style.default,\n            ...style[placement],\n            ...backgroundColorStyle,\n            width,\n            transform: transformTip,\n          }}\n          {...props}\n        >\n          {body}\n        </Box>\n      </Box>\n      {children}\n    </Box>\n  )\n}\n\nexport default TooltipBubble\n"],"names":["_jsxs","_jsx","style"],"mappings":";;;;;AAKA,MAAM,eAAe,GAAG;AACtB,IAAA,CAAC,UAAU,CAAC,UAAU,GAAG;AACvB,QAAA,GAAG,EAAE,MAAM;AACX,QAAA,IAAI,EAAE,CAAC;QACP,EAAE,EAAE,MAAM;AACX,KAAA;AACD,IAAA,CAAC,UAAU,CAAC,WAAW,GAAG;AACxB,QAAA,GAAG,EAAE,MAAM;AACX,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;AACD,IAAA,CAAC,UAAU,CAAC,OAAO,GAAG;AACpB,QAAA,MAAM,EAAE,mBAAmB;AAC3B,QAAA,IAAI,EAAE,CAAC;AACR,KAAA;AACD,IAAA,CAAC,UAAU,CAAC,QAAQ,GAAG;AACrB,QAAA,MAAM,EAAE,mBAAmB;AAC3B,QAAA,KAAK,EAAE,CAAC;AACT,KAAA;AACD,IAAA,CAAC,UAAU,CAAC,kBAAkB,GAAG;AAC/B,QAAA,GAAG,EAAE,mBAAmB;AACxB,QAAA,KAAK,EAAE,CAAC;AACT,KAAA;AACD,IAAA,CAAC,UAAU,CAAC,IAAI,GAAG;AACjB,QAAA,IAAI,EAAE,mBAAmB;AACzB,QAAA,KAAK,EAAE,CAAC;AACT,KAAA;CACF;AAED,MAAM,aAAa,GAA2B,CAAC,EAC7C,KAAK,EACL,SAAS,GAAG,UAAU,CAAC,WAAW,EAClC,IAAI,EACJ,eAAe,EACf,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,GAAG,KAAK,EACT,KAAI;IACH,MAAM,oBAAoB,GAAG;AAC3B,UAAG;YACC,eAAe;AACf,YAAA,UAAU,EAAE;AACV,gBAAA,iBAAiB,EACf,SAAS,KAAK,UAAU,CAAC,UAAU,IAAI,SAAS,KAAK,UAAU,CAAC,WAAW,IAAI,SAAS,KAAK,UAAU,CAAC;AACtG,sBAAE;AACF,sBAAE,SAAS;AACf,gBAAA,cAAc,EACZ,SAAS,KAAK,UAAU,CAAC,OAAO,IAAI,SAAS,KAAK,UAAU,CAAC,QAAQ,IAAI,SAAS,KAAK,UAAU,CAAC;AAChG,sBAAE;AACF,sBAAE,SAAS;AAChB,aAAA;AACqB;UACxB,EAAE;AAEN,IAAA,MAAM,WAAW,GAAG,CAAC,KAAuB,KAAI;QAC9C,KAAK,CAAC,eAAe,EAAE;AACzB,IAAA,CAAC;AAED,IAAA,QACEA,IAAA,CAAC,GAAG,IAAC,EAAE,EAAE,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,CACnDC,IAAC,GAAG,EAAA,EACF,EAAE,EAAE;AACF,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,IAAI,eAAe,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;AACtC,iBAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,GAAG,EAAA,EACF,EAAE,EAAE;AACF,wBAAA,QAAQ,EAAE,UAAU;wBACpB,GAAGC,MAAK,CAAC,OAAO;wBAChB,GAAGA,MAAK,CAAC,SAAS,CAAC;AACnB,wBAAA,GAAG,oBAAoB;wBACvB,KAAK;AACL,wBAAA,SAAS,EAAE,YAAY;qBACxB,EAAA,GACG,KAAK,YAER,IAAI,EAAA,CACD,GACF,EACL,QAAQ,CAAA,EAAA,CACL;AAEV;;;;"}

package/dist/components/uikit-sdk/TooltipBubble/styles.d.ts

@@ -0,0 +1,4 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const container: (hide?: boolean) => ThemeUIStyleObject;
+declare const styles: Record<string, ThemeUIStyleObject>;
+export default styles;

package/dist/components/uikit-sdk/TooltipBubble/styles.js

@@ -0,0 +1,108 @@
+const baseStyle = {
+    p: 9,
+    borderRadius: 'normal',
+    background: 'white2',
+    width: 'max-content',
+    zIndex: 'modal',
+    boxShadow: `0px 0px 30px rgb(200,200,200, .4)`,
+};
+const baseDirectionArrow = {
+    content: '""',
+    display: 'block',
+    width: 0,
+    border: '12px solid transparent',
+};
+const topArrow = {
+    bottom: 0,
+    ...baseDirectionArrow,
+    borderBottom: 0,
+    borderTopWidth: '15px',
+    borderTopStyle: 'solid',
+    transform: 'translate(-50%, calc(100%))',
+};
+const bottomArrow = {
+    top: 0,
+    ...baseDirectionArrow,
+    borderTop: 0,
+    borderBottomWidth: '15px',
+    borderBottomStyle: 'solid',
+    transform: 'translate(-50%, calc(-100%))',
+};
+const leftArrow = {
+    ...baseDirectionArrow,
+    borderRight: 0,
+    borderRightWidth: '15px',
+    borderRightStyle: 'solid',
+    transform: 'translate(-50%, calc(-100%))',
+};
+const container = (hide) => ({
+    position: 'relative',
+    display: 'flex',
+    '& > div:first-of-type': {
+        display: 'none',
+    },
+    '&:hover > div:first-of-type': {
+        display: hide ? 'none' : 'block',
+    },
+});
+const styles = {
+    default: {
+        color: 'text',
+        fontSize: 0,
+        lineHeight: '18px',
+        fontWeight: 'normal',
+        top: '15px',
+        ...baseStyle,
+    },
+    bottomRight: {
+        '&::before': {
+            position: 'absolute',
+            ...bottomArrow,
+            right: '3%',
+            borderBottomColor: 'white2',
+        },
+    },
+    bottomLeft: {
+        '&::before': {
+            position: 'absolute',
+            ...bottomArrow,
+            left: 'calc(3% + 15px)',
+            borderBottomColor: 'white2',
+        },
+    },
+    topRight: {
+        '&::before': {
+            position: 'absolute',
+            ...topArrow,
+            right: '3%',
+            borderTopColor: 'white2',
+        },
+    },
+    topLeft: {
+        '&::before': {
+            position: 'absolute',
+            ...topArrow,
+            left: 'calc(3% + 15px)',
+            borderTopColor: 'white2',
+        },
+    },
+    onlyContainerRight: {
+        '&::before': {
+            position: 'absolute',
+            right: '3%',
+            borderBottomColor: 'white2',
+        },
+    },
+    left: {
+        '&::before': {
+            position: 'absolute',
+            top: '65%',
+            left: '-13px',
+            color: 'white2',
+            ...leftArrow,
+        },
+    },
+};
+
+export { container, styles as default };
+//# sourceMappingURL=styles.js.map

package/dist/components/uikit-sdk/TooltipBubble/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/uikit-sdk/TooltipBubble/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nconst baseStyle = {\n  p: 9,\n  borderRadius: 'normal',\n  background: 'white2',\n  width: 'max-content',\n  zIndex: 'modal',\n  boxShadow: `0px 0px 30px rgb(200,200,200, .4)`,\n}\n\nconst baseDirectionArrow = {\n  content: '\"\"',\n  display: 'block',\n  width: 0,\n  border: '12px solid transparent',\n}\n\nconst topArrow = {\n  bottom: 0,\n  ...baseDirectionArrow,\n  borderBottom: 0,\n  borderTopWidth: '15px',\n  borderTopStyle: 'solid',\n  transform: 'translate(-50%, calc(100%))',\n}\n\nconst bottomArrow = {\n  top: 0,\n  ...baseDirectionArrow,\n  borderTop: 0,\n  borderBottomWidth: '15px',\n  borderBottomStyle: 'solid',\n  transform: 'translate(-50%, calc(-100%))',\n}\n\nconst leftArrow = {\n  ...baseDirectionArrow,\n  borderRight: 0,\n  borderRightWidth: '15px',\n  borderRightStyle: 'solid',\n  transform: 'translate(-50%, calc(-100%))',\n}\nexport const container = (hide?: boolean): ThemeUIStyleObject => ({\n  position: 'relative',\n  display: 'flex',\n  '& > div:first-of-type': {\n    display: 'none',\n  },\n  '&:hover > div:first-of-type': {\n    display: hide ? 'none' : 'block',\n  },\n})\n\nconst styles: Record<string, ThemeUIStyleObject> = {\n  default: {\n    color: 'text',\n    fontSize: 0,\n    lineHeight: '18px',\n    fontWeight: 'normal',\n    top: '15px',\n    ...baseStyle,\n  },\n  bottomRight: {\n    '&::before': {\n      position: 'absolute',\n      ...bottomArrow,\n      right: '3%',\n      borderBottomColor: 'white2',\n    },\n  },\n  bottomLeft: {\n    '&::before': {\n      position: 'absolute',\n      ...bottomArrow,\n      left: 'calc(3% + 15px)',\n      borderBottomColor: 'white2',\n    },\n  },\n  topRight: {\n    '&::before': {\n      position: 'absolute',\n      ...topArrow,\n      right: '3%',\n      borderTopColor: 'white2',\n    },\n  },\n  topLeft: {\n    '&::before': {\n      position: 'absolute',\n      ...topArrow,\n      left: 'calc(3% + 15px)',\n      borderTopColor: 'white2',\n    },\n  },\n  onlyContainerRight: {\n    '&::before': {\n      position: 'absolute',\n      right: '3%',\n      borderBottomColor: 'white2',\n    },\n  },\n  left: {\n    '&::before': {\n      position: 'absolute',\n      top: '65%',\n      left: '-13px',\n      color: 'white2',\n      ...leftArrow,\n    },\n  },\n}\n\nexport default styles\n"],"names":[],"mappings":"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"}

package/dist/components/uikit-sdk/TooltipBubble/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import type React from 'react';
+import { BoxProps } from 'theme-ui';
 export declare enum placements {
     TOPRIGHT = "topRight",
     TOPLEFT = "topLeft",
@@ -9,12 +9,11 @@ export declare enum placements {
     LEFT = "left"
 }
 type placementProps = `${placements}`;
-export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
-    width?: string;
+export interface TooltipProps extends BoxProps {
+    width?: string | string[];
     placement?: placementProps;
     body: ReactNode;
     hideTooltip?: boolean;
-    transformTip?: string;
-    backgroundColor?: string;
+    transformTip?: string | string[];
 }
 export {};

package/dist/components/uikit-sdk/TooltipBubble/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/TooltipBubble/types.ts"],"sourcesContent":["import { ReactNode } from 'react'\nimport type React from 'react'\n\nexport enum placements {\n  TOPRIGHT = 'topRight',\n  TOPLEFT = 'topLeft',\n  BOTTOMRIGHT = 'bottomRight',\n  BOTTOMLEFT = 'bottomLeft',\n  ONLYCONTAINERRIGHT = 'onlyContainerRight',\n  LEFT = 'left',\n}\n\ntype placementProps = `${placements}`\n\nexport interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: string\n  placement?: placementProps\n  body: ReactNode\n  hideTooltip?: boolean\n  transformTip?: string\n  backgroundColor?: string\n}\n"],"names":[],"mappings":"IAGY;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrB,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,UAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC3B,IAAA,UAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AACzB,IAAA,UAAA,CAAA,oBAAA,CAAA,GAAA,oBAAyC;AACzC,IAAA,UAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAPW,UAAU,KAAV,UAAU,GAAA,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/TooltipBubble/types.ts"],"sourcesContent":["import { ReactNode } from 'react'\nimport { BoxProps } from 'theme-ui'\n\nexport enum placements {\n  TOPRIGHT = 'topRight',\n  TOPLEFT = 'topLeft',\n  BOTTOMRIGHT = 'bottomRight',\n  BOTTOMLEFT = 'bottomLeft',\n  ONLYCONTAINERRIGHT = 'onlyContainerRight',\n  LEFT = 'left',\n}\n\ntype placementProps = `${placements}`\n\nexport interface TooltipProps extends BoxProps {\n  width?: string | string[]\n  placement?: placementProps\n  body: ReactNode\n  hideTooltip?: boolean\n  transformTip?: string | string[]\n}\n"],"names":[],"mappings":"IAGY;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrB,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,UAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC3B,IAAA,UAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AACzB,IAAA,UAAA,CAAA,oBAAA,CAAA,GAAA,oBAAyC;AACzC,IAAA,UAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAPW,UAAU,KAAV,UAAU,GAAA,EAAA,CAAA,CAAA;;;;"}

package/dist/contexts/ModalContext.d.ts

@@ -10,5 +10,5 @@ interface ModalsContext {
 export declare const Context: React.Context<ModalsContext>;
 declare const ModalProvider: ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default ModalProvider;

package/dist/contexts/ModalContext.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import Flex from '../components/uikit-sdk/Flex/index.js';
 import React, { createContext, useState } from 'react';
 

package/dist/contexts/Popups.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 declare const Popups: ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default Popups;

package/dist/contexts/Popups.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import Flex from '../components/uikit-sdk/Flex/index.js';
 import Toast from '../components/Toast/index.js';
 import { usePopups } from '../state/popups/usePopups.js';
@@ -6,7 +6,7 @@ import { usePopups } from '../state/popups/usePopups.js';
 const Popups = ({ children }) => {
     const { data: activePopups } = usePopups();
     const filteredPopups = activePopups?.filter((popup) => popup.timestamp > Date.now() - 10000);
-    return (jsxs(Flex, { className: "ape:w-full ape:h-full ape:relative ape:flex-col", children: [jsx(Flex, { className: "ape:absolute ape:top-0 ape:right-0", children: filteredPopups?.map((popup, i) => {
+    return (jsxs(Flex, { sx: { width: '100%', height: '100%', position: 'relative', flexDirection: 'column' }, children: [jsx(Flex, { sx: { position: 'absolute', top: 0, right: 0 }, children: filteredPopups?.map((popup, i) => {
                     return jsx(Toast, { popIndex: i + 1, popup: popup }, popup.timestamp);
                 }) }), children] }));
 };

package/dist/contexts/Popups.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popups.js","sources":["../../src/contexts/Popups.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../components/uikit-sdk/Flex'\nimport Toast from '../components/Toast'\nimport { PopupProps, usePopups } from '../state/popups/usePopups'\n\nconst Popups = ({ children }: { children: React.ReactNode }) => {\n  const { data: activePopups } = usePopups()\n\n  const filteredPopups = activePopups?.filter((popup: PopupProps) => popup.timestamp > Date.now() - 10000)\n\n  return (\n    <Flex className=\"ape:w-full ape:h-full ape:relative ape:flex-col\">\n      <Flex className=\"ape:absolute ape:top-0 ape:right-0\">\n        {filteredPopups?.map((popup: PopupProps, i) => {\n          return <Toast key={popup.timestamp} popIndex={i + 1} popup={popup} />\n        })}\n      </Flex>\n      {children}\n    </Flex>\n  )\n}\n\nexport default Popups\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKA,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAiC,KAAI;IAC7D,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE;IAE1C,MAAM,cAAc,GAAG,YAAY,EAAE,MAAM,CAAC,CAAC,KAAiB,KAAK,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC;IAExG,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAAA,CAC/DC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,oCAAoC,EAAA,QAAA,EACjD,cAAc,EAAE,GAAG,CAAC,CAAC,KAAiB,EAAE,CAAC,KAAI;AAC5C,oBAAA,OAAOA,IAAC,KAAK,EAAA,EAAuB,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAA,EAA9C,KAAK,CAAC,SAAS,CAAmC;AACvE,gBAAA,CAAC,CAAC,EAAA,CACG,EACN,QAAQ,CAAA,EAAA,CACJ;AAEX;;;;"}
+{"version":3,"file":"Popups.js","sources":["../../src/contexts/Popups.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../components/uikit-sdk/Flex'\nimport Toast from '../components/Toast'\nimport { PopupProps, usePopups } from '../state/popups/usePopups'\n\nconst Popups = ({ children }: { children: React.ReactNode }) => {\n  const { data: activePopups } = usePopups()\n\n  const filteredPopups = activePopups?.filter((popup: PopupProps) => popup.timestamp > Date.now() - 10000)\n\n  return (\n    <Flex sx={{ width: '100%', height: '100%', position: 'relative', flexDirection: 'column' }}>\n      <Flex sx={{ position: 'absolute', top: 0, right: 0 }}>\n        {filteredPopups?.map((popup: PopupProps, i) => {\n          return <Toast key={popup.timestamp} popIndex={i + 1} popup={popup} />\n        })}\n      </Flex>\n      {children}\n    </Flex>\n  )\n}\n\nexport default Popups\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKA,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAiC,KAAI;IAC7D,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE;IAE1C,MAAM,cAAc,GAAG,YAAY,EAAE,MAAM,CAAC,CAAC,KAAiB,KAAK,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC;IAExG,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACxFC,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAA,QAAA,EACjD,cAAc,EAAE,GAAG,CAAC,CAAC,KAAiB,EAAE,CAAC,KAAI;AAC5C,oBAAA,OAAOA,IAAC,KAAK,EAAA,EAAuB,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAA,EAA9C,KAAK,CAAC,SAAS,CAAmC;AACvE,gBAAA,CAAC,CAAC,EAAA,CACG,EACN,QAAQ,CAAA,EAAA,CACJ;AAEX;;;;"}

package/dist/providers/AptosWalletProvider.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import '@aptos-labs/wallet-adapter-ant-design/dist/index.css';
 export default function AptosWalletProvider({ children }: {
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/providers/SolanaWalletProvider.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import '@solana/wallet-adapter-react-ui/styles.css';
 export default function SolanaWalletProvider({ children }: {
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/providers/SuiWalletProvider.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import '@mysten/dapp-kit/dist/index.css';
 export default function SuiWalletProvider({ children }: {
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/providers/index.d.ts

@@ -1,6 +1,17 @@
 import React from 'react';
+/**
+ * This is the list of local providers that will be used internally by the SDK
+ *
+ * It is important to understand the difference between this component and the one located on the dev directory,
+ * which aims to simulate the providers required to be installed by the consumer of the SDK.
+ *
+ * Finally, it is important to note that this Providers component should NOT be used multiple times, so for instance:
+ * The components exported from the src/main.ts file are all wrapped with this Provider component. Though the FullBondsView
+ * component that imports the Bonds and YourBonds views, do NOT import the Bonds and YourBonds with providers, it imports
+ * the component directly without providers. This is important to understand.
+ */
 declare const Providers: ({ children, theme }: {
     children: React.ReactNode;
-    theme?: any;
-}) => import("react/jsx-runtime").JSX.Element;
+    theme: any;
+}) => React.JSX.Element;
 export default Providers;