@ape.swap/bonds-sdk 6.3.0-test.69 → 7.0.0-test.0

package/dist/components/ProgressBar/ProgressBarWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarWrapper.js","sources":["../../../src/components/ProgressBar/ProgressBarWrapper.tsx"],"sourcesContent":["import React from 'react'\nimport { styles } from './styles'\nimport { ThemeUIStyleObject } from 'theme-ui'\nimport Flex from '../uikit-sdk/Flex'\nimport TooltipBubble from '../uikit-sdk/TooltipBubble'\nimport Skeleton from '../uikit-sdk/Skeleton'\nimport Text from '../uikit-sdk/Text'\n\ninterface ProgressBarWrapperProps {\n  title?: string\n  value?: React.ReactNode\n  value2Direction?: 'column' | 'row'\n  toolTip?: string\n  toolTipPlacement?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft'\n  toolTipTransform?: string\n  style?: ThemeUIStyleObject\n  showTooltip?: boolean\n}\n\nconst ProgressBarWrapper: React.FC<ProgressBarWrapperProps> = ({\n  title,\n  value,\n  style,\n  showTooltip,\n  toolTipPlacement,\n  toolTipTransform,\n  toolTip,\n}) => {\n  return (\n    <Flex sx={style}>\n      <Flex sx={{ alignItems: 'center' }}>\n        <Text sx={styles.titleText}>{`${title}`}</Text>\n      </Flex>\n      {showTooltip ? (\n        <Flex sx={{ alignItems: 'center', width: '100%' }}>\n          <TooltipBubble\n            placement={toolTipPlacement}\n            transformTip={toolTipTransform}\n            body={<Flex sx={{ justifyContent: 'center' }}>{toolTip}</Flex>}\n            width=\"250px\"\n          >\n            <Flex sx={{ justifyContent: 'center', alignItems: 'center', width: '127px' }}>\n              {value ? value : <Skeleton sx={styles.skeleton} />}\n            </Flex>\n          </TooltipBubble>\n        </Flex>\n      ) : (\n        <Flex sx={{ justifyContent: 'center', alignItems: 'center' }}>\n          {value ? value : <Skeleton sx={styles.skeleton} />}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default React.memo(ProgressBarWrapper)\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAmBA,MAAM,kBAAkB,GAAsC,CAAC,EAC7D,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,OAAO,GACR,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,KAAK,EAAA,QAAA,EAAA,CACbC,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAChCA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,SAAS,EAAA,QAAA,EAAG,CAAA,EAAG,KAAK,CAAA,CAAE,GAAQ,EAAA,CAC1C,EACN,WAAW,IACVA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,QAAA,EAC/CA,GAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EAAE,gBAAgB,EAC9B,IAAI,EAAEA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAG,OAAO,GAAQ,EAC9D,KAAK,EAAC,OAAO,YAEbA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,QAAA,EACzE,KAAK,GAAG,KAAK,GAAGA,GAAA,CAAC,QAAQ,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,QAAQ,EAAA,CAAI,GAC7C,EAAA,CACO,EAAA,CACX,KAEPA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EACzD,KAAK,GAAG,KAAK,GAAGA,GAAA,CAAC,QAAQ,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,QAAQ,EAAA,CAAI,GAC7C,CACR,CAAA,EAAA,CACI;AAEX,CAAC;AAED,2BAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;;;;"}
+{"version":3,"file":"ProgressBarWrapper.js","sources":["../../../src/components/ProgressBar/ProgressBarWrapper.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport Flex from '../uikit-sdk/Flex'\nimport TooltipBubble from '../uikit-sdk/TooltipBubble'\nimport Skeleton from '../uikit-sdk/Skeleton'\nimport Text from '../uikit-sdk/Text'\n\ninterface ProgressBarWrapperProps {\n  title?: string\n  value?: React.ReactNode\n  value2Direction?: 'column' | 'row'\n  toolTip?: string\n  toolTipPlacement?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft'\n  toolTipTransform?: string\n  style?: React.CSSProperties\n  hideOnMobile?: boolean\n  showTooltip?: boolean\n}\n\nconst ProgressBarWrapper: React.FC<ProgressBarWrapperProps> = ({\n  title,\n  value,\n  style,\n  hideOnMobile,\n  showTooltip,\n  toolTipPlacement,\n  toolTipTransform,\n  toolTip,\n}) => {\n  return (\n    <Flex className={clsx(hideOnMobile && 'ape:hidden! ape:md:flex!')} style={style}>\n      <Flex className=\"ape:items-center\">\n        <Text size=\"12px\" className=\"ape:opacity-60 ape:leading-4! ape:lg:leading-6! ape:font-normal\">{`${title}`}</Text>\n      </Flex>\n      {showTooltip ? (\n        <Flex className=\"ape:items-center ape:w-full\">\n          <TooltipBubble\n            placement={toolTipPlacement}\n            transformTip={toolTipTransform}\n            body={<Flex className=\"ape:justify-center\">{toolTip}</Flex>}\n            width=\"250px\"\n          >\n            <Flex className=\"ape:justify-center ape:items-center ape:w-[127px]\">\n              {value ? value : <Skeleton width=\"60px\" style={{ maxHeight: '18px', minHeight: '18px' }} />}\n            </Flex>\n          </TooltipBubble>\n        </Flex>\n      ) : (\n        <Flex className=\"ape:justify-center ape:items-center\">\n          {value ? value : <Skeleton style={{ maxHeight: '18px', minHeight: '18px' }} />}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default React.memo(ProgressBarWrapper)\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAmBA,MAAM,kBAAkB,GAAsC,CAAC,EAC7D,KAAK,EACL,KAAK,EACL,KAAK,EACL,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,OAAO,GACR,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,IAAI,CAAC,YAAY,IAAI,0BAA0B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAA,QAAA,EAAA,CAC7EC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAChCA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAE,GAAG,KAAK,CAAA,CAAE,EAAA,CAAQ,EAAA,CAC5G,EACN,WAAW,IACVA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAC3CA,GAAA,CAAC,aAAa,IACZ,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EAAE,gBAAgB,EAC9B,IAAI,EAAEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,OAAO,EAAA,CAAQ,EAC3D,KAAK,EAAC,OAAO,EAAA,QAAA,EAEbA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAChE,KAAK,GAAG,KAAK,GAAGA,IAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAA,CAAI,EAAA,CACtF,GACO,EAAA,CACX,KAEPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,qCAAqC,EAAA,QAAA,EAClD,KAAK,GAAG,KAAK,GAAGA,GAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAA,CAAI,EAAA,CACzE,CACR,CAAA,EAAA,CACI;AAEX,CAAC;AAED,2BAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;;;;"}

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

@@ -2,7 +2,6 @@ type BlurImageProps = {
     src: string;
     blurSrc: string;
     alt?: string;
-    sx?: any;
 };
-declare const ProgressiveImage: ({ src, alt, blurSrc }: BlurImageProps) => import("react").JSX.Element;
+declare const ProgressiveImage: ({ src, alt, blurSrc }: BlurImageProps) => import("react/jsx-runtime").JSX.Element;
 export default ProgressiveImage;

package/dist/components/ProgressiveImage/index.js

@@ -1,30 +1,12 @@
-import { jsxs, Fragment, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { Image } from 'theme-ui';
-import Flex from '../uikit-sdk/Flex/index.js';
 
 const ProgressiveImage = ({ src, alt = 'bluredImg', blurSrc }) => {
     const [loaded, setLoaded] = useState(false);
-    return (jsxs(Fragment, { children: [jsx(Flex, { src: blurSrc, alt: alt, sx: {
-                    position: 'absolute',
-                    width: '100%',
-                    height: '100%',
-                    backgroundSize: 'cover',
-                    zIndex: 0,
-                    objectFit: 'cover',
-                    transition: 'opacity 1.5s ease',
-                    borderRadius: 'normal',
+    return (jsxs(Fragment, { children: [jsx("div", { className: "ape:absolute ape:w-full ape:h-full ape:bg-cover ape:z-0 ape:transition-opacity ape:duration-[1500ms] ape:ease-in-out ape:rounded-normal ape:blur-[1px]", style: {
                     backgroundImage: `url(${blurSrc})`,
-                    filter: 'blur(1px)',
                     opacity: loaded ? 0 : 1,
-                } }), jsx(Image, { src: src, alt: `${alt}-${blurSrc}`, onLoad: () => setLoaded(true), sx: {
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'cover',
-                    transition: 'opacity 0.5s ease',
-                    borderRadius: 'normal',
-                    opacity: loaded ? 1 : 0,
-                } })] }));
+                }, role: "img", "aria-label": alt }), jsx("img", { src: src, alt: `${alt}-${blurSrc}`, onLoad: () => setLoaded(true), className: "ape:w-full ape:h-full ape:object-cover ape:transition-opacity ape:duration-500 ape:ease-in-out ape:rounded-normal", style: { opacity: loaded ? 1 : 0 } })] }));
 };
 
 export { ProgressiveImage as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ProgressiveImage/index.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { Image } from 'theme-ui'\nimport Flex from '../uikit-sdk/Flex'\n\ntype BlurImageProps = {\n  src: string\n  blurSrc: string // low-res / base64 preview\n  alt?: string\n  sx?: any\n}\n\nconst ProgressiveImage = ({ src, alt = 'bluredImg', blurSrc }: BlurImageProps) => {\n  const [loaded, setLoaded] = useState(false)\n\n  return (\n    <>\n      {/* Blurred placeholder */}\n      <Flex\n        src={blurSrc}\n        alt={alt}\n        sx={{\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          backgroundSize: 'cover',\n          zIndex: 0,\n          objectFit: 'cover',\n          transition: 'opacity 1.5s ease',\n          borderRadius: 'normal',\n          backgroundImage: `url(${blurSrc})`,\n          filter: 'blur(1px)',\n          opacity: loaded ? 0 : 1,\n        }}\n      />\n\n      {/* Full image */}\n      <Image\n        src={src}\n        alt={`${alt}-${blurSrc}`}\n        onLoad={() => setLoaded(true)}\n        sx={{\n          width: '100%',\n          height: '100%',\n          objectFit: 'cover',\n          transition: 'opacity 0.5s ease',\n          borderRadius: 'normal',\n          opacity: loaded ? 1 : 0,\n        }}\n      />\n    </>\n  )\n}\n\nexport default ProgressiveImage\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;AAWA,MAAM,gBAAgB,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,GAAG,WAAW,EAAE,OAAO,EAAkB,KAAI;IAC/E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE3C,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAEEC,GAAA,CAAC,IAAI,IACH,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,EAAE,EAAE;AACF,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,MAAM,EAAE,MAAM;AACd,oBAAA,cAAc,EAAE,OAAO;AACvB,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,SAAS,EAAE,OAAO;AAClB,oBAAA,UAAU,EAAE,mBAAmB;AAC/B,oBAAA,YAAY,EAAE,QAAQ;oBACtB,eAAe,EAAE,CAAA,IAAA,EAAO,OAAO,CAAA,CAAA,CAAG;AAClC,oBAAA,MAAM,EAAE,WAAW;oBACnB,OAAO,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC;iBACxB,EAAA,CACD,EAGFA,GAAA,CAAC,KAAK,EAAA,EACJ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,CAAA,EAAG,GAAG,CAAA,CAAA,EAAI,OAAO,CAAA,CAAE,EACxB,MAAM,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAC7B,EAAE,EAAE;AACF,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,MAAM,EAAE,MAAM;AACd,oBAAA,SAAS,EAAE,OAAO;AAClB,oBAAA,UAAU,EAAE,mBAAmB;AAC/B,oBAAA,YAAY,EAAE,QAAQ;oBACtB,OAAO,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC;iBACxB,EAAA,CACD,CAAA,EAAA,CACD;AAEP;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ProgressiveImage/index.tsx"],"sourcesContent":["import { useState } from 'react'\n\ntype BlurImageProps = {\n  src: string\n  blurSrc: string // low-res / base64 preview\n  alt?: string\n}\n\nconst ProgressiveImage = ({ src, alt = 'bluredImg', blurSrc }: BlurImageProps) => {\n  const [loaded, setLoaded] = useState(false)\n\n  return (\n    <>\n      {/* Blurred placeholder */}\n      <div\n        className=\"ape:absolute ape:w-full ape:h-full ape:bg-cover ape:z-0 ape:transition-opacity ape:duration-[1500ms] ape:ease-in-out ape:rounded-normal ape:blur-[1px]\"\n        style={{\n          backgroundImage: `url(${blurSrc})`,\n          opacity: loaded ? 0 : 1,\n        }}\n        role=\"img\"\n        aria-label={alt}\n      />\n\n      {/* Full image */}\n      <img\n        src={src}\n        alt={`${alt}-${blurSrc}`}\n        onLoad={() => setLoaded(true)}\n        className=\"ape:w-full ape:h-full ape:object-cover ape:transition-opacity ape:duration-500 ape:ease-in-out ape:rounded-normal\"\n        style={{ opacity: loaded ? 1 : 0 }}\n      />\n    </>\n  )\n}\n\nexport default ProgressiveImage\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAQA,MAAM,gBAAgB,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,GAAG,WAAW,EAAE,OAAO,EAAkB,KAAI;IAC/E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE3C,QACEA,4BAEEC,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,wJAAwJ,EAClK,KAAK,EAAE;oBACL,eAAe,EAAE,CAAA,IAAA,EAAO,OAAO,CAAA,CAAA,CAAG;oBAClC,OAAO,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC;iBACxB,EACD,IAAI,EAAC,KAAK,EAAA,YAAA,EACE,GAAG,GACf,EAGFA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,CAAA,EAAG,GAAG,CAAA,CAAA,EAAI,OAAO,CAAA,CAAE,EACxB,MAAM,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAC7B,SAAS,EAAC,mHAAmH,EAC7H,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE,EAAA,CAClC,CAAA,EAAA,CACD;AAEP;;;;"}

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

@@ -1,5 +1,4 @@
-import * as React from 'react';
 declare const SafeHTMLComponent: ({ html }: {
     html: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SafeHTMLComponent;

package/dist/components/SafeHTMLComponent/index.js

@@ -1,4 +1,4 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 
 // Custom HTML sanitizer
 function sanitizeHTML(html) {

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

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

package/dist/components/SlippageModal/index.js

@@ -1,4 +1,5 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import { useSlippage } from '../../state/slippage/useSlippage.js';
 import { ChainId } from '@ape.swap/apeswap-lists';
 import Modal from '../uikit-sdk/Modal/index.js';
@@ -6,54 +7,17 @@ import Flex from '../uikit-sdk/Flex/index.js';
 import Text from '../uikit-sdk/Text/index.js';
 import Input from '../uikit-sdk/Input/Input.js';
 
+const optionClasses = 'ape:h-[35px] ape:w-[55px] ape:rounded-normal ape:items-center ape:justify-center ape:cursor-pointer';
 const SlippageModal = ({ chainId }) => {
     const { evmSlippage, solSlippage, setSlippage } = useSlippage();
     const slippage = chainId === ChainId.SOL ? solSlippage : evmSlippage;
-    return (jsx(Modal, { title: "Slippage", children: jsx(Flex, { sx: { maxWidth: '100%', width: '380px', flexDirection: 'column' }, children: jsx(Flex, { sx: { width: '100%', flexDirection: 'column' }, children: jsxs(Flex, { sx: { flexDirection: 'column', mb: '10px' }, children: [jsx(Text, { size: "18px", margin: "10px 0px", children: "Slippage Tolerance" }), jsxs(Flex, { sx: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }, children: [jsx(Flex, { sx: {
-                                        height: '35px',
-                                        width: '55px',
-                                        borderRadius: 'normal',
-                                        background: slippage === 0.1 ? 'primaryButton' : 'white3',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        cursor: 'pointer',
-                                    }, onClick: () => {
+    return (jsx(Modal, { title: "Slippage", children: jsx(Flex, { className: "ape:max-w-full ape:w-[380px] ape:flex-col", children: jsx(Flex, { className: "ape:w-full ape:flex-col", children: jsxs(Flex, { className: "ape:flex-col ape:mb-[10px]", children: [jsx(Text, { size: "18px", style: { margin: '10px 0px' }, children: "Slippage Tolerance" }), jsxs(Flex, { className: "ape:flex-row ape:justify-between ape:items-center", children: [jsx(Flex, { className: clsx(optionClasses, slippage === 0.1 ? 'ape:bg-primary-button' : 'ape:bg-white3'), onClick: () => {
                                         setSlippage(0.1, chainId);
-                                    }, children: jsx(Text, { children: " 0.1% " }) }), jsx(Flex, { sx: {
-                                        height: '35px',
-                                        width: '55px',
-                                        borderRadius: 'normal',
-                                        background: slippage === 0.5 ? 'primaryButton' : 'white3',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        cursor: 'pointer',
-                                    }, onClick: () => {
+                                    }, children: jsx(Text, { children: " 0.1% " }) }), jsx(Flex, { className: clsx(optionClasses, slippage === 0.5 ? 'ape:bg-primary-button' : 'ape:bg-white3'), onClick: () => {
                                         setSlippage(0.5, chainId);
-                                    }, children: jsx(Text, { children: " 0.5% " }) }), jsx(Flex, { sx: {
-                                        height: '35px',
-                                        width: '55px',
-                                        borderRadius: 'normal',
-                                        background: slippage === 5 ? 'primaryButton' : 'white3',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        cursor: 'pointer',
-                                    }, onClick: () => {
+                                    }, children: jsx(Text, { children: " 0.5% " }) }), jsx(Flex, { className: clsx(optionClasses, slippage === 5 ? 'ape:bg-primary-button' : 'ape:bg-white3'), onClick: () => {
                                         setSlippage(5, chainId);
-                                    }, children: jsx(Text, { children: " 5.0% " }) }), jsxs(Flex, { sx: { width: '45%', position: 'relative' }, children: [jsx(Input, { sx: {
-                                                fontWeight: 700,
-                                                width: '100%',
-                                                height: '35px',
-                                                background: 'white3',
-                                                border: '0px',
-                                                borderRadius: 'normal',
-                                                ':focus': { outline: 'none' },
-                                            }, value: slippage, onChange: (e) => setSlippage(parseFloat(e.target.value ?? '0'), chainId) }), jsx(Flex, { sx: {
-                                                position: 'absolute',
-                                                right: 5,
-                                                justifyContent: 'center',
-                                                alignItems: 'center',
-                                                height: '100%',
-                                            }, children: jsx(Text, { weight: 700, children: "%" }) })] })] })] }) }) }) }));
+                                    }, children: jsx(Text, { children: " 5.0% " }) }), jsxs(Flex, { className: "ape:w-[45%] ape:relative", children: [jsx(Input, { className: "ape:font-bold ape:w-full ape:h-[35px] ape:bg-white3 ape:border-0 ape:rounded-normal ape:focus:outline-none", value: slippage, onChange: (e) => setSlippage(parseFloat(e.target.value ?? '0'), chainId) }), jsx(Flex, { className: "ape:absolute ape:right-[5px] ape:justify-center ape:items-center ape:h-full", children: jsx(Text, { weight: 700, children: "%" }) })] })] })] }) }) }) }));
 };
 
 export { SlippageModal as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/SlippageModal/index.tsx"],"sourcesContent":["import React from 'react'\nimport { useSlippage } from '../../state/slippage/useSlippage'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport Input from '../uikit-sdk/Input/Input'\n\nconst SlippageModal = ({ chainId }: { chainId: number }) => {\n  const { evmSlippage, solSlippage, setSlippage } = useSlippage()\n  const slippage = chainId === ChainId.SOL ? solSlippage : evmSlippage\n\n  return (\n    <Modal title=\"Slippage\">\n      <Flex sx={{ maxWidth: '100%', width: '380px', flexDirection: 'column' }}>\n        <Flex sx={{ width: '100%', flexDirection: 'column' }}>\n          <Flex sx={{ flexDirection: 'column', mb: '10px' }}>\n            <Text size=\"18px\" margin=\"10px 0px\">\n              Slippage Tolerance\n            </Text>\n            <Flex sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>\n              <Flex\n                sx={{\n                  height: '35px',\n                  width: '55px',\n                  borderRadius: 'normal',\n                  background: slippage === 0.1 ? 'primaryButton' : 'white3',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  cursor: 'pointer',\n                }}\n                onClick={() => {\n                  setSlippage(0.1, chainId)\n                }}\n              >\n                <Text> 0.1% </Text>\n              </Flex>\n              <Flex\n                sx={{\n                  height: '35px',\n                  width: '55px',\n                  borderRadius: 'normal',\n                  background: slippage === 0.5 ? 'primaryButton' : 'white3',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  cursor: 'pointer',\n                }}\n                onClick={() => {\n                  setSlippage(0.5, chainId)\n                }}\n              >\n                <Text> 0.5% </Text>\n              </Flex>\n              <Flex\n                sx={{\n                  height: '35px',\n                  width: '55px',\n                  borderRadius: 'normal',\n                  background: slippage === 5 ? 'primaryButton' : 'white3',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  cursor: 'pointer',\n                }}\n                onClick={() => {\n                  setSlippage(5, chainId)\n                }}\n              >\n                <Text> 5.0% </Text>\n              </Flex>\n              <Flex sx={{ width: '45%', position: 'relative' }}>\n                <Input\n                  sx={{\n                    fontWeight: 700,\n                    width: '100%',\n                    height: '35px',\n                    background: 'white3',\n                    border: '0px',\n                    borderRadius: 'normal',\n                    ':focus': { outline: 'none' },\n                  }}\n                  value={slippage}\n                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                    setSlippage(parseFloat(e.target.value ?? '0'), chainId)\n                  }\n                />\n                <Flex\n                  sx={{\n                    position: 'absolute',\n                    right: 5,\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                    height: '100%',\n                  }}\n                >\n                  <Text weight={700}>%</Text>\n                </Flex>\n              </Flex>\n            </Flex>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default SlippageModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;AAQA,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,EAAuB,KAAI;IACzD,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,WAAW,EAAE;AAC/D,IAAA,MAAM,QAAQ,GAAG,OAAO,KAAK,OAAO,CAAC,GAAG,GAAG,WAAW,GAAG,WAAW;IAEpE,QACEA,IAAC,KAAK,EAAA,EAAC,KAAK,EAAC,UAAU,YACrBA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EACrEA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EAClDC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAC/CD,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,UAAU,mCAE5B,EACPC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACvFD,IAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,wCAAA,MAAM,EAAE,MAAM;AACd,wCAAA,KAAK,EAAE,MAAM;AACb,wCAAA,YAAY,EAAE,QAAQ;wCACtB,UAAU,EAAE,QAAQ,KAAK,GAAG,GAAG,eAAe,GAAG,QAAQ;AACzD,wCAAA,UAAU,EAAE,QAAQ;AACpB,wCAAA,cAAc,EAAE,QAAQ;AACxB,wCAAA,MAAM,EAAE,SAAS;qCAClB,EACD,OAAO,EAAE,MAAK;AACZ,wCAAA,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC;oCAC3B,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,QAAA,EAAA,CAAc,EAAA,CACd,EACPA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,wCAAA,MAAM,EAAE,MAAM;AACd,wCAAA,KAAK,EAAE,MAAM;AACb,wCAAA,YAAY,EAAE,QAAQ;wCACtB,UAAU,EAAE,QAAQ,KAAK,GAAG,GAAG,eAAe,GAAG,QAAQ;AACzD,wCAAA,UAAU,EAAE,QAAQ;AACpB,wCAAA,cAAc,EAAE,QAAQ;AACxB,wCAAA,MAAM,EAAE,SAAS;qCAClB,EACD,OAAO,EAAE,MAAK;AACZ,wCAAA,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC;oCAC3B,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,QAAA,EAAA,CAAc,EAAA,CACd,EACPA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,wCAAA,MAAM,EAAE,MAAM;AACd,wCAAA,KAAK,EAAE,MAAM;AACb,wCAAA,YAAY,EAAE,QAAQ;wCACtB,UAAU,EAAE,QAAQ,KAAK,CAAC,GAAG,eAAe,GAAG,QAAQ;AACvD,wCAAA,UAAU,EAAE,QAAQ;AACpB,wCAAA,cAAc,EAAE,QAAQ;AACxB,wCAAA,MAAM,EAAE,SAAS;qCAClB,EACD,OAAO,EAAE,MAAK;AACZ,wCAAA,WAAW,CAAC,CAAC,EAAE,OAAO,CAAC;oCACzB,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,QAAA,EAAA,CAAc,EAAA,CACd,EACPC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAA,QAAA,EAAA,CAC9CD,GAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAE;AACF,gDAAA,UAAU,EAAE,GAAG;AACf,gDAAA,KAAK,EAAE,MAAM;AACb,gDAAA,MAAM,EAAE,MAAM;AACd,gDAAA,UAAU,EAAE,QAAQ;AACpB,gDAAA,MAAM,EAAE,KAAK;AACb,gDAAA,YAAY,EAAE,QAAQ;AACtB,gDAAA,QAAQ,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;AAC9B,6CAAA,EACD,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAsC,KAC/C,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,GAAG,CAAC,EAAE,OAAO,CAAC,EAAA,CAEzD,EACFA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gDAAA,QAAQ,EAAE,UAAU;AACpB,gDAAA,KAAK,EAAE,CAAC;AACR,gDAAA,cAAc,EAAE,QAAQ;AACxB,gDAAA,UAAU,EAAE,QAAQ;AACpB,gDAAA,MAAM,EAAE,MAAM;AACf,6CAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAE,GAAG,EAAA,QAAA,EAAA,GAAA,EAAA,CAAU,EAAA,CACtB,CAAA,EAAA,CACF,IACF,CAAA,EAAA,CACF,EAAA,CACF,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/SlippageModal/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { useSlippage } from '../../state/slippage/useSlippage'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport Input from '../uikit-sdk/Input/Input'\n\nconst optionClasses =\n  'ape:h-[35px] ape:w-[55px] ape:rounded-normal ape:items-center ape:justify-center ape:cursor-pointer'\n\nconst SlippageModal = ({ chainId }: { chainId: number }) => {\n  const { evmSlippage, solSlippage, setSlippage } = useSlippage()\n  const slippage = chainId === ChainId.SOL ? solSlippage : evmSlippage\n\n  return (\n    <Modal title=\"Slippage\">\n      <Flex className=\"ape:max-w-full ape:w-[380px] ape:flex-col\">\n        <Flex className=\"ape:w-full ape:flex-col\">\n          <Flex className=\"ape:flex-col ape:mb-[10px]\">\n            <Text size=\"18px\" style={{ margin: '10px 0px' }}>\n              Slippage Tolerance\n            </Text>\n            <Flex className=\"ape:flex-row ape:justify-between ape:items-center\">\n              <Flex\n                className={clsx(optionClasses, slippage === 0.1 ? 'ape:bg-primary-button' : 'ape:bg-white3')}\n                onClick={() => {\n                  setSlippage(0.1, chainId)\n                }}\n              >\n                <Text> 0.1% </Text>\n              </Flex>\n              <Flex\n                className={clsx(optionClasses, slippage === 0.5 ? 'ape:bg-primary-button' : 'ape:bg-white3')}\n                onClick={() => {\n                  setSlippage(0.5, chainId)\n                }}\n              >\n                <Text> 0.5% </Text>\n              </Flex>\n              <Flex\n                className={clsx(optionClasses, slippage === 5 ? 'ape:bg-primary-button' : 'ape:bg-white3')}\n                onClick={() => {\n                  setSlippage(5, chainId)\n                }}\n              >\n                <Text> 5.0% </Text>\n              </Flex>\n              <Flex className=\"ape:w-[45%] ape:relative\">\n                <Input\n                  className=\"ape:font-bold ape:w-full ape:h-[35px] ape:bg-white3 ape:border-0 ape:rounded-normal ape:focus:outline-none\"\n                  value={slippage}\n                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                    setSlippage(parseFloat(e.target.value ?? '0'), chainId)\n                  }\n                />\n                <Flex className=\"ape:absolute ape:right-[5px] ape:justify-center ape:items-center ape:h-full\">\n                  <Text weight={700}>%</Text>\n                </Flex>\n              </Flex>\n            </Flex>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default SlippageModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;AASA,MAAM,aAAa,GACjB,qGAAqG;AAEvG,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,EAAuB,KAAI;IACzD,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,WAAW,EAAE;AAC/D,IAAA,MAAM,QAAQ,GAAG,OAAO,KAAK,OAAO,CAAC,GAAG,GAAG,WAAW,GAAG,WAAW;AAEpE,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,UAAU,EAAA,QAAA,EACrBA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,2CAA2C,EAAA,QAAA,EACzDA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,yBAAyB,EAAA,QAAA,EACvCC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CAC1CD,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,EAAA,QAAA,EAAA,oBAAA,EAAA,CAExC,EACPC,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAAA,CACjED,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,KAAK,GAAG,GAAG,uBAAuB,GAAG,eAAe,CAAC,EAC5F,OAAO,EAAE,MAAK;AACZ,wCAAA,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC;AAC3B,oCAAA,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,QAAA,EAAA,CAAc,EAAA,CACd,EACPA,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,KAAK,GAAG,GAAG,uBAAuB,GAAG,eAAe,CAAC,EAC5F,OAAO,EAAE,MAAK;AACZ,wCAAA,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC;AAC3B,oCAAA,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,QAAA,EAAA,CAAc,EAAA,CACd,EACPA,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,KAAK,CAAC,GAAG,uBAAuB,GAAG,eAAe,CAAC,EAC1F,OAAO,EAAE,MAAK;AACZ,wCAAA,WAAW,CAAC,CAAC,EAAE,OAAO,CAAC;AACzB,oCAAA,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,QAAA,EAAA,CAAc,GACd,EACPC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,QAAA,EAAA,CACxCD,IAAC,KAAK,EAAA,EACJ,SAAS,EAAC,4GAA4G,EACtH,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAsC,KAC/C,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,GAAG,CAAC,EAAE,OAAO,CAAC,EAAA,CAEzD,EACFA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,6EAA6E,EAAA,QAAA,EAC3FA,GAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAE,GAAG,EAAA,QAAA,EAAA,GAAA,EAAA,CAAU,EAAA,CACtB,CAAA,EAAA,CACF,IACF,CAAA,EAAA,CACF,EAAA,CACF,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}

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

@@ -1,9 +1,8 @@
-import React from 'react';
 declare const StepBubble: ({ number, title, currentStep, hideBar, loading, }: {
     number: number;
     title: string;
     currentStep: number;
     hideBar?: boolean;
     loading?: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default StepBubble;

package/dist/components/StepBubble/index.js

@@ -1,5 +1,6 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
-import { Spinner } from 'theme-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import Spinner from '../uikit-sdk/Spinner/index.js';
 import { AnimatePresence, motion } from 'framer-motion';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Tick from '../uikit-sdk/Svg/Icons/Tick.js';
@@ -7,43 +8,14 @@ import Tick from '../uikit-sdk/Svg/Icons/Tick.js';
 const StepBubble = ({ number, title, currentStep, hideBar, loading, }) => {
     const stepCompleted = currentStep > number;
     const isNextStep = number > currentStep;
-    return (jsxs(Flex, { sx: { width: !hideBar && '100%', minWidth: hideBar && '40px', alignItems: 'center' }, children: [jsxs(Flex, { sx: {
-                    minWidth: '40px',
-                    height: '40px',
-                    backgroundColor: isNextStep ? 'white2' : 'primaryButton',
-                    border: isNextStep ? '1px solid var(--theme-ui-colors-white4)' : '1px solid primaryButton',
-                    borderRadius: '40px',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    fontWeight: 500,
-                    zIndex: 1,
-                    position: 'relative',
-                }, children: [loading ? (jsx(Spinner, { size: 15 })) : stepCompleted ? (jsx(AnimatePresence, { children: jsx(motion.div, { initial: { rotate: 0 }, animate: {
+    return (jsxs(Flex, { className: "ape:items-center", style: { width: !hideBar ? '100%' : undefined, minWidth: hideBar ? '40px' : undefined }, children: [jsxs(Flex, { className: clsx('ape:min-w-[40px] ape:h-[40px] ape:rounded-[40px] ape:justify-center ape:items-center ape:font-medium ape:z-[1] ape:relative ape:border ape:border-solid', isNextStep ? 'ape:bg-white2 ape:border-white4' : 'ape:bg-primary-button ape:border-primary-button'), children: [loading ? (jsx(Spinner, { size: 15 })) : stepCompleted ? (jsx(AnimatePresence, { children: jsx(motion.div, { initial: { rotate: 0 }, animate: {
                                 rotate: 360,
                                 scale: [1, 2, 1],
                                 transition: {
                                     rotate: { duration: 0.5, ease: 'linear' },
                                     scale: { duration: 1, ease: 'easeInOut', delay: 0.5 },
                                 },
-                            }, children: jsx(Tick, { width: '15px' }) }) })) : (number), jsx(Flex, { sx: {
-                            width: '100px',
-                            textAlign: 'center',
-                            justifyContent: 'center',
-                            fontSize: '12px',
-                            fontWeight: 500,
-                            position: 'absolute',
-                            top: '45px',
-                            left: '50%',
-                            transform: 'translate(-50%, 0)',
-                            color: 'textDisabledButton',
-                        }, children: title })] }), !hideBar && (jsx(Flex, { sx: {
-                    width: `100%`,
-                    height: '2px',
-                    top: '50%',
-                    left: `40px`,
-                    backgroundColor: stepCompleted ? 'primaryButton' : 'white4',
-                    zIndex: 0,
-                } }))] }));
+                            }, children: jsx(Tick, { width: '15px' }) }) })) : (number), jsx(Flex, { className: "ape:w-[100px] ape:text-center ape:justify-center ape:text-[12px] ape:font-medium ape:absolute ape:top-[45px] ape:left-1/2 ape:-translate-x-1/2 ape:text-text-disabled-button", children: title })] }), !hideBar && (jsx(Flex, { className: clsx('ape:w-full ape:h-[2px] ape:top-1/2 ape:left-[40px] ape:z-0', stepCompleted ? 'ape:bg-primary-button' : 'ape:bg-white4') }))] }));
 };
 
 export { StepBubble as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/StepBubble/index.tsx"],"sourcesContent":["import React from 'react'\nimport { Spinner } from 'theme-ui'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport Flex from '../uikit-sdk/Flex'\nimport Tick from '../uikit-sdk/Svg/Icons/Tick'\n\nconst StepBubble = ({\n  number,\n  title,\n  currentStep,\n  hideBar,\n  loading,\n}: {\n  number: number\n  title: string\n  currentStep: number\n  hideBar?: boolean\n  loading?: boolean\n}) => {\n  const stepCompleted = currentStep > number\n  const isNextStep = number > currentStep\n  return (\n    <Flex sx={{ width: !hideBar && '100%', minWidth: hideBar && '40px', alignItems: 'center' }}>\n      <Flex\n        sx={{\n          minWidth: '40px',\n          height: '40px',\n          backgroundColor: isNextStep ? 'white2' : 'primaryButton',\n          border: isNextStep ? '1px solid var(--theme-ui-colors-white4)' : '1px solid primaryButton',\n          borderRadius: '40px',\n          justifyContent: 'center',\n          alignItems: 'center',\n          fontWeight: 500,\n          zIndex: 1,\n          position: 'relative',\n        }}\n      >\n        {loading ? (\n          <Spinner size={15} />\n        ) : stepCompleted ? (\n          <AnimatePresence>\n            <motion.div\n              initial={{ rotate: 0 }}\n              animate={{\n                rotate: 360,\n                scale: [1, 2, 1],\n                transition: {\n                  rotate: { duration: 0.5, ease: 'linear' },\n                  scale: { duration: 1, ease: 'easeInOut', delay: 0.5 },\n                },\n              }}\n            >\n              <Tick width={'15px'} />\n            </motion.div>\n          </AnimatePresence>\n        ) : (\n          number\n        )}\n        <Flex\n          sx={{\n            width: '100px',\n            textAlign: 'center',\n            justifyContent: 'center',\n            fontSize: '12px',\n            fontWeight: 500,\n            position: 'absolute',\n            top: '45px',\n            left: '50%',\n            transform: 'translate(-50%, 0)',\n            color: 'textDisabledButton',\n          }}\n        >\n          {title}\n        </Flex>\n      </Flex>\n      {!hideBar && (\n        <Flex\n          sx={{\n            width: `100%`,\n            height: '2px',\n            top: '50%',\n            left: `40px`,\n            backgroundColor: stepCompleted ? 'primaryButton' : 'white4',\n            zIndex: 0,\n          }}\n        />\n      )}\n    </Flex>\n  )\n}\n\nexport default StepBubble\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAMA,MAAM,UAAU,GAAG,CAAC,EAClB,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,GAOR,KAAI;AACH,IAAA,MAAM,aAAa,GAAG,WAAW,GAAG,MAAM;AAC1C,IAAA,MAAM,UAAU,GAAG,MAAM,GAAG,WAAW;AACvC,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,IAAI,MAAM,EAAE,QAAQ,EAAE,OAAO,IAAI,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACxFA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,QAAQ,EAAE,MAAM;AAChB,oBAAA,MAAM,EAAE,MAAM;oBACd,eAAe,EAAE,UAAU,GAAG,QAAQ,GAAG,eAAe;oBACxD,MAAM,EAAE,UAAU,GAAG,yCAAyC,GAAG,yBAAyB;AAC1F,oBAAA,YAAY,EAAE,MAAM;AACpB,oBAAA,cAAc,EAAE,QAAQ;AACxB,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,UAAU,EAAE,GAAG;AACf,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,QAAQ,EAAE,UAAU;AACrB,iBAAA,EAAA,QAAA,EAAA,CAEA,OAAO,IACNC,IAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,IACnB,aAAa,IACfA,IAAC,eAAe,EAAA,EAAA,QAAA,EACdA,GAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACtB,OAAO,EAAE;AACP,gCAAA,MAAM,EAAE,GAAG;AACX,gCAAA,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAChB,gCAAA,UAAU,EAAE;oCACV,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE;AACzC,oCAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE;AACtD,iCAAA;6BACF,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,MAAM,EAAA,CAAI,GACZ,EAAA,CACG,KAElB,MAAM,CACP,EACDA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,4BAAA,KAAK,EAAE,OAAO;AACd,4BAAA,SAAS,EAAE,QAAQ;AACnB,4BAAA,cAAc,EAAE,QAAQ;AACxB,4BAAA,QAAQ,EAAE,MAAM;AAChB,4BAAA,UAAU,EAAE,GAAG;AACf,4BAAA,QAAQ,EAAE,UAAU;AACpB,4BAAA,GAAG,EAAE,MAAM;AACX,4BAAA,IAAI,EAAE,KAAK;AACX,4BAAA,SAAS,EAAE,oBAAoB;AAC/B,4BAAA,KAAK,EAAE,oBAAoB;AAC5B,yBAAA,EAAA,QAAA,EAEA,KAAK,EAAA,CACD,CAAA,EAAA,CACF,EACN,CAAC,OAAO,KACPA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,KAAK,EAAE,CAAA,IAAA,CAAM;AACb,oBAAA,MAAM,EAAE,KAAK;AACb,oBAAA,GAAG,EAAE,KAAK;AACV,oBAAA,IAAI,EAAE,CAAA,IAAA,CAAM;oBACZ,eAAe,EAAE,aAAa,GAAG,eAAe,GAAG,QAAQ;AAC3D,oBAAA,MAAM,EAAE,CAAC;iBACV,EAAA,CACD,CACH,CAAA,EAAA,CACI;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/StepBubble/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport Spinner from '../uikit-sdk/Spinner'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport Flex from '../uikit-sdk/Flex'\nimport Tick from '../uikit-sdk/Svg/Icons/Tick'\n\nconst StepBubble = ({\n  number,\n  title,\n  currentStep,\n  hideBar,\n  loading,\n}: {\n  number: number\n  title: string\n  currentStep: number\n  hideBar?: boolean\n  loading?: boolean\n}) => {\n  const stepCompleted = currentStep > number\n  const isNextStep = number > currentStep\n  return (\n    <Flex className=\"ape:items-center\" style={{ width: !hideBar ? '100%' : undefined, minWidth: hideBar ? '40px' : undefined }}>\n      <Flex\n        className={clsx(\n          'ape:min-w-[40px] ape:h-[40px] ape:rounded-[40px] ape:justify-center ape:items-center ape:font-medium ape:z-[1] ape:relative ape:border ape:border-solid',\n          isNextStep ? 'ape:bg-white2 ape:border-white4' : 'ape:bg-primary-button ape:border-primary-button',\n        )}\n      >\n        {loading ? (\n          <Spinner size={15} />\n        ) : stepCompleted ? (\n          <AnimatePresence>\n            <motion.div\n              initial={{ rotate: 0 }}\n              animate={{\n                rotate: 360,\n                scale: [1, 2, 1],\n                transition: {\n                  rotate: { duration: 0.5, ease: 'linear' },\n                  scale: { duration: 1, ease: 'easeInOut', delay: 0.5 },\n                },\n              }}\n            >\n              <Tick width={'15px'} />\n            </motion.div>\n          </AnimatePresence>\n        ) : (\n          number\n        )}\n        <Flex className=\"ape:w-[100px] ape:text-center ape:justify-center ape:text-[12px] ape:font-medium ape:absolute ape:top-[45px] ape:left-1/2 ape:-translate-x-1/2 ape:text-text-disabled-button\">\n          {title}\n        </Flex>\n      </Flex>\n      {!hideBar && (\n        <Flex\n          className={clsx(\n            'ape:w-full ape:h-[2px] ape:top-1/2 ape:left-[40px] ape:z-0',\n            stepCompleted ? 'ape:bg-primary-button' : 'ape:bg-white4',\n          )}\n        />\n      )}\n    </Flex>\n  )\n}\n\nexport default StepBubble\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAOA,MAAM,UAAU,GAAG,CAAC,EAClB,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,GAOR,KAAI;AACH,IAAA,MAAM,aAAa,GAAG,WAAW,GAAG,MAAM;AAC1C,IAAA,MAAM,UAAU,GAAG,MAAM,GAAG,WAAW;IACvC,QACEA,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,EAAE,EAAA,QAAA,EAAA,CACxHA,KAAC,IAAI,EAAA,EACH,SAAS,EAAE,IAAI,CACb,yJAAyJ,EACzJ,UAAU,GAAG,iCAAiC,GAAG,iDAAiD,CACnG,aAEA,OAAO,IACNC,IAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,IACnB,aAAa,IACfA,IAAC,eAAe,EAAA,EAAA,QAAA,EACdA,IAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACtB,OAAO,EAAE;AACP,gCAAA,MAAM,EAAE,GAAG;AACX,gCAAA,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAChB,gCAAA,UAAU,EAAE;oCACV,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE;AACzC,oCAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE;AACtD,iCAAA;6BACF,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,MAAM,EAAA,CAAI,EAAA,CACZ,EAAA,CACG,KAElB,MAAM,CACP,EACDA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8KAA8K,EAAA,QAAA,EAC3L,KAAK,EAAA,CACD,CAAA,EAAA,CACF,EACN,CAAC,OAAO,KACPA,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,IAAI,CACb,4DAA4D,EAC5D,aAAa,GAAG,uBAAuB,GAAG,eAAe,CAC1D,EAAA,CACD,CACH,CAAA,EAAA,CACI;AAEX;;;;"}

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

@@ -1,7 +1,6 @@
-import React from 'react';
 import { PopupProps } from '../../state/popups/usePopups';
 declare const Toast: ({ popIndex, popup }: {
     popIndex: number;
     popup: PopupProps;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Toast;

package/dist/components/Toast/index.js

@@ -1,8 +1,7 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Link } from 'theme-ui';
-import styles from './styles.js';
+import { resolveColor } from '../../utils/resolveColor.js';
 import { usePopups } from '../../state/popups/usePopups.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import IconButton from '../uikit-sdk/Button/IconButton.js';
@@ -12,6 +11,7 @@ import External from '../uikit-sdk/Svg/Icons/External.js';
 import Success from '../uikit-sdk/Svg/Icons/Success.js';
 import Error from '../uikit-sdk/Svg/Icons/Error.js';
 
+const linkClasses = 'ape:text-[12px] ape:underline ape:text-primary-bright ape:font-bold ape:flex ape:items-center';
 const Toast = ({ popIndex, popup }) => {
     const { variant, title, description, url } = popup;
     const { removePopup } = usePopups();
@@ -39,18 +39,7 @@ const Toast = ({ popIndex, popup }) => {
             : isInsufficientFundsError
                 ? 'Insufficient funds.'
                 : popup?.description;
-    return (jsx(AnimatePresence, { children: show && (jsxs(motion.div, { initial: { right: '-300px' }, animate: { right: '10px' }, transition: { duration: 0.5 }, exit: { right: '-300px' }, sx: { ...styles.alert, top: 108 * popIndex, zIndex: 103 }, children: [jsx(Flex, { children: jsx(VariantIcon, { color: variant, width: "30px" }) }), jsxs(Flex, { sx: styles.content, children: [jsx(Text, { sx: { color: variant, fontSize: '14px', fontWeight: 500 }, children: title }), description && (jsx(Text, { sx: {
-                                fontSize: '12px',
-                                fontWeight: 400,
-                                lineHeight: '16px',
-                                maxHeight: '48px',
-                                minHeight: '16px',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                display: '-webkit-box',
-                                WebkitBoxOrient: 'vertical',
-                                WebkitLineClamp: 3, // Limit text to 3 lines
-                            }, children: parsedErrorString })), url && (jsxs(Link, { href: url, sx: styles.link, color: "text", target: "_blank", children: [jsx(Text, { mr: "5px", children: "View on Explorer" }), jsx(External, {})] })), showSupportLink && (jsxs(Link, { href: 'https://discord.com/channels/821817977917538375/1110438345701593088', sx: styles.link, color: "text", target: "_blank", children: [jsx(Text, { mr: "5px", children: "Having issues? Get support" }), jsx(External, {})] }))] }), jsx(Flex, { sx: { alignItems: 'flex-start', pt: '3px' }, onClick: () => removePopup(popup), children: jsx(IconButton, { icon: Close, color: "text", variant: "transparent" }) })] })) }));
+    return (jsx(AnimatePresence, { children: show && (jsxs(motion.div, { initial: { right: '-300px' }, animate: { right: '10px' }, transition: { duration: 0.5 }, exit: { right: '-300px' }, className: "ape:fixed ape:flex ape:w-[300px] ape:bg-white2 ape:rounded-[10px] ape:pl-[20px] ape:py-[14px] ape:pr-[14px] ape:min-h-[90px] ape:z-[103]", style: { top: 108 * popIndex, columnGap: '11px' }, children: [jsx(Flex, { children: jsx(VariantIcon, { color: variant, width: "30px" }) }), jsxs(Flex, { className: "ape:flex-col ape:flex-1 ape:text-text ape:ml-[10px]", children: [jsx(Text, { size: "14px", className: "ape:font-medium", style: { color: resolveColor(variant) }, children: title }), description && (jsx(Text, { size: "12px", className: "ape:font-normal ape:max-h-[48px] ape:min-h-4 ape:line-clamp-3 ape:break-all", style: { lineHeight: '1rem' }, children: parsedErrorString })), url && (jsxs("a", { href: url, className: linkClasses, target: "_blank", rel: "noreferrer", children: [jsx("div", { className: "ape:mr-[5px]", children: "View on Explorer" }), jsx(External, {})] })), showSupportLink && (jsxs("a", { href: 'https://discord.com/channels/821817977917538375/1110438345701593088', className: linkClasses, target: "_blank", rel: "noreferrer", children: [jsx("div", { className: "ape:mr-[5px]", children: "Having issues? Get support" }), jsx(External, {})] }))] }), jsx(Flex, { className: "ape:items-start ape:pt-[3px]", onClick: () => removePopup(popup), children: jsx(IconButton, { icon: Close, color: "text", variant: "transparent" }) })] })) }));
 };
 
 export { Toast as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Toast/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { Link } from 'theme-ui'\nimport styles from './styles'\nimport { PopupProps, usePopups } from '../../state/popups/usePopups'\nimport Flex from '../uikit-sdk/Flex'\nimport IconButton from '../uikit-sdk/Button/IconButton'\nimport Text from '../uikit-sdk/Text'\nimport Close from '../uikit-sdk/Svg/Icons/Close'\nimport External from '../uikit-sdk/Svg/Icons/External'\nimport Success from '../uikit-sdk/Svg/Icons/Success'\nimport ErrorIcon from '../uikit-sdk/Svg/Icons/Error'\n\nconst Toast = ({ popIndex, popup }: { popIndex: number; popup: PopupProps }) => {\n  const { variant, title, description, url } = popup\n  const { removePopup } = usePopups()\n  const [show, setShow] = useState(true)\n  const VariantIcon = variant === 'success' ? Success : ErrorIcon\n\n  useEffect(() => {\n    setTimeout(() => {\n      setShow(false)\n      setTimeout(() => {\n        removePopup(popup)\n      }, 500)\n    }, 10000)\n    /* eslint-disable react-hooks/exhaustive-deps */\n  }, [])\n\n  const showSupportLink = variant === 'error' && !url && !popup?.description?.includes('User rejected the request')\n  const isSlippageError =\n    popup?.description?.includes('INSUFFICIENT') ||\n    popup?.description?.includes('Slippage') ||\n    popup?.description?.includes('Return amount is not enough')\n\n  const isTimeoutError = popup?.description?.includes('Blockhash not found')\n\n  const isInsufficientFundsError = popup?.description?.includes('insufficient funds')\n\n  const parsedErrorString = isSlippageError\n    ? 'Slippage error. Try increasing Slippage in the cog icon ⚙️.'\n    : isTimeoutError\n      ? 'Tx timeout. Please try again.'\n      : isInsufficientFundsError\n        ? 'Insufficient funds.'\n        : popup?.description\n\n  return (\n    <AnimatePresence>\n      {show && (\n        <motion.div\n          initial={{ right: '-300px' }}\n          animate={{ right: '10px' }}\n          transition={{ duration: 0.5 }}\n          exit={{ right: '-300px' }}\n          sx={{ ...styles.alert, top: 108 * popIndex, zIndex: 103 }}\n        >\n          <Flex>\n            <VariantIcon color={variant} width=\"30px\" />\n          </Flex>\n          <Flex sx={styles.content}>\n            <Text sx={{ color: variant, fontSize: '14px', fontWeight: 500 }}>{title}</Text>\n            {description && (\n              <Text\n                sx={{\n                  fontSize: '12px',\n                  fontWeight: 400,\n                  lineHeight: '16px',\n                  maxHeight: '48px',\n                  minHeight: '16px',\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  display: '-webkit-box',\n                  WebkitBoxOrient: 'vertical',\n                  WebkitLineClamp: 3, // Limit text to 3 lines\n                }}\n              >\n                {parsedErrorString}\n              </Text>\n            )}\n            {url && (\n              <Link href={url} sx={styles.link} color=\"text\" target=\"_blank\">\n                <Text mr=\"5px\">View on Explorer</Text>\n                <External />\n              </Link>\n            )}\n            {showSupportLink && (\n              <Link\n                href={'https://discord.com/channels/821817977917538375/1110438345701593088'}\n                sx={styles.link}\n                color=\"text\"\n                target=\"_blank\"\n              >\n                <Text mr=\"5px\">Having issues? Get support</Text>\n                <External />\n              </Link>\n            )}\n          </Flex>\n          <Flex sx={{ alignItems: 'flex-start', pt: '3px' }} onClick={() => removePopup(popup)}>\n            <IconButton icon={Close} color=\"text\" variant=\"transparent\" />\n          </Flex>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\n\nexport default Toast\n"],"names":["ErrorIcon","_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Toast/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { resolveColor } from '../../utils/resolveColor'\nimport { PopupProps, usePopups } from '../../state/popups/usePopups'\nimport Flex from '../uikit-sdk/Flex'\nimport IconButton from '../uikit-sdk/Button/IconButton'\nimport Text from '../uikit-sdk/Text'\nimport Close from '../uikit-sdk/Svg/Icons/Close'\nimport External from '../uikit-sdk/Svg/Icons/External'\nimport Success from '../uikit-sdk/Svg/Icons/Success'\nimport ErrorIcon from '../uikit-sdk/Svg/Icons/Error'\n\nconst linkClasses = 'ape:text-[12px] ape:underline ape:text-primary-bright ape:font-bold ape:flex ape:items-center'\n\nconst Toast = ({ popIndex, popup }: { popIndex: number; popup: PopupProps }) => {\n  const { variant, title, description, url } = popup\n  const { removePopup } = usePopups()\n  const [show, setShow] = useState(true)\n  const VariantIcon = variant === 'success' ? Success : ErrorIcon\n\n  useEffect(() => {\n    setTimeout(() => {\n      setShow(false)\n      setTimeout(() => {\n        removePopup(popup)\n      }, 500)\n    }, 10000)\n    /* eslint-disable react-hooks/exhaustive-deps */\n  }, [])\n\n  const showSupportLink = variant === 'error' && !url && !popup?.description?.includes('User rejected the request')\n  const isSlippageError =\n    popup?.description?.includes('INSUFFICIENT') ||\n    popup?.description?.includes('Slippage') ||\n    popup?.description?.includes('Return amount is not enough')\n\n  const isTimeoutError = popup?.description?.includes('Blockhash not found')\n\n  const isInsufficientFundsError = popup?.description?.includes('insufficient funds')\n\n  const parsedErrorString = isSlippageError\n    ? 'Slippage error. Try increasing Slippage in the cog icon ⚙️.'\n    : isTimeoutError\n      ? 'Tx timeout. Please try again.'\n      : isInsufficientFundsError\n        ? 'Insufficient funds.'\n        : popup?.description\n\n  return (\n    <AnimatePresence>\n      {show && (\n        <motion.div\n          initial={{ right: '-300px' }}\n          animate={{ right: '10px' }}\n          transition={{ duration: 0.5 }}\n          exit={{ right: '-300px' }}\n          className=\"ape:fixed ape:flex ape:w-[300px] ape:bg-white2 ape:rounded-[10px] ape:pl-[20px] ape:py-[14px] ape:pr-[14px] ape:min-h-[90px] ape:z-[103]\"\n          style={{ top: 108 * popIndex, columnGap: '11px' }}\n        >\n          <Flex>\n            <VariantIcon color={variant} width=\"30px\" />\n          </Flex>\n          <Flex className=\"ape:flex-col ape:flex-1 ape:text-text ape:ml-[10px]\">\n            <Text size=\"14px\" className=\"ape:font-medium\" style={{ color: resolveColor(variant) }}>\n              {title}\n            </Text>\n            {description && (\n              <Text\n                size=\"12px\"\n                className=\"ape:font-normal ape:max-h-[48px] ape:min-h-4 ape:line-clamp-3 ape:break-all\"\n                style={{ lineHeight: '1rem' }}\n              >\n                {parsedErrorString}\n              </Text>\n            )}\n            {url && (\n              <a href={url} className={linkClasses} target=\"_blank\" rel=\"noreferrer\">\n                <div className=\"ape:mr-[5px]\">View on Explorer</div>\n                <External />\n              </a>\n            )}\n            {showSupportLink && (\n              <a\n                href={'https://discord.com/channels/821817977917538375/1110438345701593088'}\n                className={linkClasses}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                <div className=\"ape:mr-[5px]\">Having issues? Get support</div>\n                <External />\n              </a>\n            )}\n          </Flex>\n          <Flex className=\"ape:items-start ape:pt-[3px]\" onClick={() => removePopup(popup)}>\n            <IconButton icon={Close} color=\"text\" variant=\"transparent\" />\n          </Flex>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\n\nexport default Toast\n"],"names":["ErrorIcon","_jsx","_jsxs"],"mappings":"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"}

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

@@ -1,11 +1,11 @@
-import React from 'react';
 import { MarketingCampaign } from '@ape.swap/apeswap-lists';
-declare const TokenInfoAndName: ({ tokenSymbol, chain, tag, vestEnds, isHotBond, marketingCampaign, }: {
+declare const TokenInfoAndName: ({ tokenSymbol, chain, tag, vestEnds, isHotBond, marketingCampaign, cardsView, }: {
     tokenSymbol?: string;
     chain?: number;
     tag?: string;
     vestEnds?: string;
     isHotBond?: boolean;
     marketingCampaign?: MarketingCampaign;
-}) => React.JSX.Element;
+    cardsView?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
 export default TokenInfoAndName;

package/dist/components/TokenInfoAndName/index.js

@@ -1,4 +1,5 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import { NETWORK_ICONS } from '../../config/constants/chains.js';
 import TokenImage from '../uikit-sdk/TokenImage/index.js';
 import AddFavToken from '../FavIcons/AddFavToken.js';
@@ -33,29 +34,17 @@ const NETWORK_COLORS = {
     [ChainId.HYPEREVM]: '#ffffff4d',
     [ChainId.APTOS]: 'rgb(240 111 126 / 0.3)',
     [ChainId.SUI]: '#6fbcf04d',
+    [ChainId.L1X]: '#e743444d',
 };
-const TokenInfoAndName = ({ tokenSymbol, chain, tag, vestEnds, isHotBond, marketingCampaign, }) => {
+const TokenInfoAndName = ({ tokenSymbol, chain, tag, vestEnds, isHotBond, marketingCampaign, cardsView, }) => {
     const ChainIcon = (chain && NETWORK_ICONS[chain]) || Question;
-    return (jsxs(Flex, { className: "tokeninfoname container", children: [jsx(Flex, { sx: {
-                    width: '125px',
-                    height: '100%',
-                    position: 'absolute',
-                    left: 0,
-                    top: 0,
-                    borderRadius: 'normal',
+    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'), children: [jsx(Flex, { className: "ape:absolute ape:left-0 ape:top-0 ape:w-[125px] ape:h-full ape:rounded-normal", style: {
                     background: isHotBond
                         ? 'transparent'
                         : `linear-gradient(90deg, ${chain ? NETWORK_COLORS[chain] : '#FFFFFF33'} 0%, rgba(0,0,0,0) 75%)`,
-                } }), 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 })) }) })] }));
+                } }), 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:w-full ape:items-center', cardsView ? 'ape:max-w-full ape:pl-0' : 'ape:sm: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] ape:ml-3.5 ape:sm:ml-5", children: [jsx(Flex, { style: MCTokenIconStyles[marketingCampaign] }), jsx(TokenImage, { symbol: tokenSymbol, size: 33 })] }), jsxs(Flex, { className: "tokeninfoname tokentext ape:ml-1 ape:sm:ml-2 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:sm: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 })) }) })] }));
 };
 
 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 { 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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"}
+{"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  [ChainId.L1X]: '#e743444d',\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',\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:w-full ape:items-center',\n          cardsView ? 'ape:max-w-full ape:pl-0' : 'ape:sm: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] ape:ml-3.5 ape:sm:ml-5\">\n          <Flex style={MCTokenIconStyles[marketingCampaign!]} />\n          <TokenImage symbol={tokenSymbol} size={33} />\n        </Flex>\n        <Flex className=\"tokeninfoname tokentext ape:ml-1 ape:sm:ml-2 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:sm:text-[16px]!\">{tokenSymbol}</Text>\n          </Flex>\n          {vestEnds && (\n            <Flex className=\"ape:text-[12px] ape:font-normal ape:opacity-60 ape:leading-[14px]\">{vestEnds}</Flex>\n          )}\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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"}

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

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

package/dist/components/TokenSelectorModal/TokenRow.js

@@ -1,8 +1,8 @@
-import { jsxs, jsx, Fragment } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import Spinner from '../uikit-sdk/Spinner/index.js';
 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, { 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) })) }))] }));
+    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) })) }))] }));
 };
 
 export { TokenRow as default };