@ape.swap/bonds-sdk 6.2.13 → 6.2.15

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\n\ninterface ProgressBarProps {\n  value: number\n  color?: string\n}\n\nconst ProgressBar: React.FC<ProgressBarProps> = ({ value }) => {\n  return (\n    <Flex className=\"ape:w-[100px] ape:lg:w-full ape:items-center ape:flex-row\">\n      <div className=\"progressbar-background ape:w-full ape:h-[5px] ape:bg-white4 ape:rounded-[10px] ape:overflow-hidden\">\n        <div\n          className=\"progressbar-completed ape:rounded-[10px] ape:h-full ape:bg-text\"\n          style={{ width: `${value <= 3 ? 3 : value}%` }}\n        />\n      </div>\n    </Flex>\n  )\n}\n\nexport default ProgressBar\n"],"names":["_jsx"],"mappings":";;;AAQA,MAAM,WAAW,GAA+B,CAAC,EAAE,KAAK,EAAE,KAAI;AAC5D,IAAA,QACEA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,2DAA2D,EAAA,QAAA,EACzEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oGAAoG,EAAA,QAAA,EACjHA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,iEAAiE,EAC3E,KAAK,EAAE,EAAE,KAAK,EAAE,CAAA,EAAG,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA,CAAA,CAAG,EAAE,GAC9C,EAAA,CACE,EAAA,CACD;AAEX;;;;"}
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, Flex } from 'theme-ui'\n\ninterface ProgressBarProps {\n  value: number\n  color?: string\n}\n\nconst ProgressBar: React.FC<ProgressBarProps> = ({ value }) => {\n  return (\n    <Flex sx={{ width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row' }}>\n      <Box className=\"progressbar-background\">\n        <Box\n          className=\"progressbar-completed\"\n          style={{\n            width: `${value <= 3 ? 3 : value}%`,\n          }}\n        />\n      </Box>\n    </Flex>\n  )\n}\n\nexport default ProgressBar\n"],"names":["_jsx"],"mappings":";;;AAQA,MAAM,WAAW,GAA+B,CAAC,EAAE,KAAK,EAAE,KAAI;AAC5D,IAAA,QACEA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,YAClGA,GAAA,CAAC,GAAG,IAAC,SAAS,EAAC,wBAAwB,EAAA,QAAA,EACrCA,GAAA,CAAC,GAAG,EAAA,EACF,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE;AACL,oBAAA,KAAK,EAAE,CAAA,EAAG,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA,CAAA,CAAG;iBACpC,EAAA,CACD,EAAA,CACE,EAAA,CACD;AAEX;;;;"}

package/dist/components/ProgressBar/ProgressBarWrapper.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ThemeUIStyleObject } from 'theme-ui';
 interface ProgressBarWrapperProps {
     title?: string;
     value?: React.ReactNode;
@@ -6,8 +7,7 @@ interface ProgressBarWrapperProps {
     toolTip?: string;
     toolTipPlacement?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft';
     toolTipTransform?: string;
-    style?: React.CSSProperties;
-    hideOnMobile?: boolean;
+    style?: ThemeUIStyleObject;
     showTooltip?: boolean;
 }
 declare const _default: React.NamedExoticComponent<ProgressBarWrapperProps>;

package/dist/components/ProgressBar/ProgressBarWrapper.js

@@ -1,13 +1,13 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import React from 'react';
-import clsx from 'clsx';
+import { styles } from './styles.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import TooltipBubble from '../uikit-sdk/TooltipBubble/index.js';
 import Skeleton from '../uikit-sdk/Skeleton/index.js';
 import Text from '../uikit-sdk/Text/index.js';
 
-const ProgressBarWrapper = ({ title, value, style, hideOnMobile, showTooltip, toolTipPlacement, toolTipTransform, toolTip, }) => {
-    return (jsxs(Flex, { className: clsx(hideOnMobile && 'ape:hidden! ape:md:flex!'), style: style, children: [jsx(Flex, { className: "ape:items-center", children: jsx(Text, { size: "12px", className: "ape:opacity-60 ape:leading-4! ape:lg:leading-6! ape:font-normal", children: `${title}` }) }), showTooltip ? (jsx(Flex, { className: "ape:items-center ape:w-full", children: jsx(TooltipBubble, { placement: toolTipPlacement, transformTip: toolTipTransform, body: jsx(Flex, { className: "ape:justify-center", children: toolTip }), width: "250px", children: jsx(Flex, { className: "ape:justify-center ape:items-center ape:w-[127px]", children: value ? value : jsx(Skeleton, { width: "60px", style: { maxHeight: '18px', minHeight: '18px' } }) }) }) })) : (jsx(Flex, { className: "ape:justify-center ape:items-center", children: value ? value : jsx(Skeleton, { style: { maxHeight: '18px', minHeight: '18px' } }) }))] }));
+const ProgressBarWrapper = ({ title, value, style, showTooltip, toolTipPlacement, toolTipTransform, toolTip, }) => {
+    return (jsxs(Flex, { sx: style, children: [jsx(Flex, { sx: { alignItems: 'center' }, children: jsx(Text, { sx: styles.titleText, children: `${title}` }) }), showTooltip ? (jsx(Flex, { sx: { alignItems: 'center', width: '100%' }, children: jsx(TooltipBubble, { placement: toolTipPlacement, transformTip: toolTipTransform, body: jsx(Flex, { sx: { justifyContent: 'center' }, children: toolTip }), width: "250px", children: jsx(Flex, { sx: { justifyContent: 'center', alignItems: 'center', width: '127px' }, children: value ? value : jsx(Skeleton, { sx: styles.skeleton }) }) }) })) : (jsx(Flex, { sx: { justifyContent: 'center', alignItems: 'center' }, children: value ? value : jsx(Skeleton, { sx: styles.skeleton }) }))] }));
 };
 var ProgressBarWrapper$1 = React.memo(ProgressBarWrapper);
 

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 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;;;;"}
+{"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;;;;"}

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

@@ -0,0 +1,2 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const styles: Record<'listCardContainer' | 'listViewContainer' | 'titleContainer' | 'infoContentMobile' | 'tokensContainer' | 'titleText' | 'skeleton' | 'valueText' | 'secondaryText' | 'cardContentContainer' | 'animationDiv' | 'expandedWrapper', ThemeUIStyleObject>;

package/dist/components/ProgressBar/styles.js

@@ -0,0 +1,15 @@
+const styles = {
+    titleText: {
+        opacity: 0.6,
+        fontSize: '12px',
+        lineHeight: ['16px', '16px', '16px', '24px'],
+        fontWeight: 400,
+    },
+    skeleton: {
+        width: ['45px', '45px', '60px'],
+        maxHeight: '18px',
+        minHeight: '18px',
+    }};
+
+export { styles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/ProgressBar/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nexport const styles: Record<\n  | 'listCardContainer'\n  | 'listViewContainer'\n  | 'titleContainer'\n  | 'infoContentMobile'\n  | 'tokensContainer'\n  | 'titleText'\n  | 'skeleton'\n  | 'valueText'\n  | 'secondaryText'\n  | 'cardContentContainer'\n  | 'animationDiv'\n  | 'expandedWrapper',\n  ThemeUIStyleObject\n> = {\n  listCardContainer: {\n    borderRadius: 0,\n    flexDirection: ['column', 'column', 'column', 'row'],\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    background: 'white2',\n    borderBottom: '1px solid rgba(226, 226, 226, .2)',\n    padding: ['10px 20px 10px 20px', '10px 20px 10px 20px', '10px 20px 10px 20px', '0 30px 0 30px'],\n    margin: '0 10px 0 10px',\n    maxWidth: ['500px', '500px', '500px', '100%'],\n    minWidth: '300px',\n    width: '100%',\n    height: ['unset', 'unset', 'unset', '86px'],\n  },\n  listViewContainer: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    width: '100%',\n  },\n  titleContainer: {\n    width: '100%',\n    justifyContent: 'space-between',\n    my: '5px',\n  },\n  infoContentMobile: {\n    display: ['flex', 'flex', 'flex', 'none'],\n    alignItems: 'center',\n  },\n  tokensContainer: {\n    alignItems: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  titleText: {\n    opacity: 0.6,\n    fontSize: '12px',\n    lineHeight: ['16px', '16px', '16px', '24px'],\n    fontWeight: 400,\n  },\n  skeleton: {\n    width: ['45px', '45px', '60px'],\n    maxHeight: '18px',\n    minHeight: '18px',\n  },\n  valueText: {\n    fontSize: ['12px', '12px', '12px', '14px'],\n    color: 'primaryBright',\n    lineHeight: '16px',\n    fontWeight: 700,\n    mr: '5px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n  secondaryText: {\n    fontSize: '12px',\n    color: 'gray',\n    lineHeight: '16px',\n    fontWeight: 400,\n  },\n  cardContentContainer: {\n    width: '100%',\n    height: '100%',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n  animationDiv: {\n    position: 'relative',\n    width: '100%',\n    maxWidth: ['500px', '500px', '500px', '100%'],\n    minWidth: '300px',\n  },\n  expandedWrapper: {\n    background: 'white3',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n    padding: '15px 10px',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n  },\n}\n"],"names":[],"mappings":"AAEO,MAAM,MAAM,GAcf;AACF,IAkCA,SAAS,EAAE;AACT,QAAA,OAAO,EAAE,GAAG;AACZ,QAAA,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AAC5C,QAAA,UAAU,EAAE,GAAG;AAChB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AAC/B,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,SAAS,EAAE,MAAM;AAClB;;;;"}

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

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

package/dist/components/ProgressiveImage/index.js

@@ -1,12 +1,30 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'theme-ui/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("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: {
+    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',
                     backgroundImage: `url(${blurSrc})`,
+                    filter: 'blur(1px)',
                     opacity: loaded ? 0 : 1,
-                }, 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 } })] }));
+                } }), 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,
+                } })] }));
 };
 
 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'\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;;;;"}
+{"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;;;;"}

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

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

package/dist/components/SafeHTMLComponent/index.js

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

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

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

package/dist/components/SlippageModal/index.js

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsx, jsxs } from 'theme-ui/jsx-runtime';
 import { useSlippage } from '../../state/slippage/useSlippage.js';
 import { ChainId } from '@ape.swap/apeswap-lists';
 import Modal from '../uikit-sdk/Modal/index.js';
@@ -7,17 +6,54 @@ 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, { 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: () => {
+    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: () => {
                                         setSlippage(0.1, chainId);
-                                    }, children: jsx(Text, { children: " 0.1% " }) }), jsx(Flex, { className: clsx(optionClasses, slippage === 0.5 ? 'ape:bg-primary-button' : 'ape:bg-white3'), onClick: () => {
+                                    }, 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: () => {
                                         setSlippage(0.5, chainId);
-                                    }, children: jsx(Text, { children: " 0.5% " }) }), jsx(Flex, { className: clsx(optionClasses, slippage === 5 ? 'ape:bg-primary-button' : 'ape:bg-white3'), onClick: () => {
+                                    }, 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: () => {
                                         setSlippage(5, chainId);
-                                    }, 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: "%" }) })] })] })] }) }) }) }));
+                                    }, 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: "%" }) })] })] })] }) }) }) }));
 };
 
 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 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;;;;"}
+{"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":"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"}

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

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

package/dist/components/StepBubble/index.js

@@ -1,6 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import Spinner from '../uikit-sdk/Spinner/index.js';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { Spinner } from 'theme-ui';
 import { AnimatePresence, motion } from 'framer-motion';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Tick from '../uikit-sdk/Svg/Icons/Tick.js';
@@ -8,14 +7,43 @@ 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, { 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: {
+    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: {
                                 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, { 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') }))] }));
+                            }, 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,
+                } }))] }));
 };
 
 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 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;;;;"}
+{"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;;;;"}

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

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

package/dist/components/Toast/index.js

@@ -1,7 +1,8 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'theme-ui/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import colors from '../../theme/colors.js';
+import { Link } from 'theme-ui';
+import styles from './styles.js';
 import { usePopups } from '../../state/popups/usePopups.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import IconButton from '../uikit-sdk/Button/IconButton.js';
@@ -11,7 +12,6 @@ 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,7 +39,18 @@ 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' }, 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: colors[variant] }, children: title }), description && (jsx(Text, { size: "12px", className: "ape:font-normal ape:max-h-[48px] ape:min-h-4 ape:line-clamp-3", style: { lineHeight: '1rem' }, children: parsedErrorString })), url && (jsxs("a", { href: url, className: linkClasses, target: "_blank", rel: "noreferrer", children: [jsx(Text, { 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(Text, { 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" }) })] })) }));
+    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" }) })] })) }));
 };
 
 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 colors from '../../theme/colors'\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\n              size=\"14px\"\n              className=\"ape:font-medium\"\n              style={{ color: colors[variant as keyof typeof colors] }}\n            >\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\"\n                style={{ lineHeight: '1rem' }}\n              >\n                {parsedErrorString}\n              </Text>\n            )}\n            {url && (\n              <a href={url} className={linkClasses} target=\"_blank\" rel=\"noreferrer\">\n                <Text className=\"ape:mr-[5px]\">View on Explorer</Text>\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                <Text className=\"ape:mr-[5px]\">Having issues? Get support</Text>\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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"}
+{"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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"}

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

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

package/dist/components/Toast/styles.js

@@ -0,0 +1,30 @@
+const styles = {
+    alert: {
+        position: 'fixed',
+        display: 'flex',
+        width: '300px',
+        background: 'white2',
+        borderRadius: '10px',
+        pl: 9,
+        py: 6,
+        pr: 6,
+        minHeight: '90px',
+        columnGap: '11px',
+        right: 10,
+    },
+    content: {
+        flexDirection: 'column',
+        flex: 1,
+        color: 'text',
+        ml: '10px',
+    },
+    link: {
+        fontSize: 0,
+        textDecoration: 'underline',
+        color: 'primaryBright',
+        fontWeight: 'bold',
+    },
+};
+
+export { styles as default };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/Toast/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nconst styles: Record<'alert' | 'content' | 'link', ThemeUIStyleObject> = {\n  alert: {\n    position: 'fixed',\n    display: 'flex',\n    width: '300px',\n    background: 'white2',\n    borderRadius: '10px',\n    pl: 9,\n    py: 6,\n    pr: 6,\n    minHeight: '90px',\n    columnGap: '11px',\n    right: 10,\n  },\n  content: {\n    flexDirection: 'column',\n    flex: 1,\n    color: 'text',\n    ml: '10px',\n  },\n  link: {\n    fontSize: 0,\n    textDecoration: 'underline',\n    color: 'primaryBright',\n    fontWeight: 'bold',\n  },\n}\n\nexport default styles\n"],"names":[],"mappings":"AAEA,MAAM,MAAM,GAA6D;AACvE,IAAA,KAAK,EAAE;AACL,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,YAAY,EAAE,MAAM;AACpB,QAAA,EAAE,EAAE,CAAC;AACL,QAAA,EAAE,EAAE,CAAC;AACL,QAAA,EAAE,EAAE,CAAC;AACL,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,KAAK,EAAE,EAAE;AACV,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE,CAAC;AACX,QAAA,cAAc,EAAE,WAAW;AAC3B,QAAA,KAAK,EAAE,eAAe;AACtB,QAAA,UAAU,EAAE,MAAM;AACnB,KAAA;;;;;"}

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, cardsView, }: {
+declare const TokenInfoAndName: ({ tokenSymbol, chain, tag, vestEnds, isHotBond, marketingCampaign, }: {
     tokenSymbol?: string;
     chain?: number;
     tag?: string;
     vestEnds?: string;
     isHotBond?: boolean;
     marketingCampaign?: MarketingCampaign;
-    cardsView?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default TokenInfoAndName;