@ape.swap/bonds-sdk 6.2.17 → 6.2.19

package/dist/components/uikit-sdk/Tag/ListTag.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Flex from '../Flex/index.js';
 import { MCTagStyles } from '../../../utils/campaignStyles.js';
 import SellingFast from '../Svg/Icons/SellingFast.js';
@@ -21,24 +21,21 @@ const colorMap = {
     ['yield bond']: 'success',
 };
 const ListTag = ({ text = '', marketingCampaign }) => {
-    return (jsxs(Flex, { className: "list-tag", sx: {
-            //@ts-ignore
+    return (jsxs(Flex
+    // `!` on both hover rules: this element's own `background` is always set
+    // via inline style below, which otherwise beats any hover class
+    // regardless of specificity — `!important` is the only way a class-based
+    // hover can still win over an always-present inline style.
+    , { 
+        // `!` on both hover rules: this element's own `background` is always set
+        // via inline style below, which otherwise beats any hover class
+        // regardless of specificity — `!important` is the only way a class-based
+        // hover can still win over an always-present inline style.
+        className: "list-tag ape:items-center ape:rounded-[5px] ape:w-fit ape:z-[2] ape:gap-[5px] ape:text-[10px] ape:font-semibold ape:leading-[15px] ape:hover:bg-[rgb(20_18_29_/_0.36)]! ape:group-hover:bg-[rgb(20_18_29_/_0.25)]!", style: {
             background: bg[text] || '#3C6AB530',
-            //@ts-ignore
             color: colorMap[text] || '#3b78d3',
-            fontSize: '10px',
-            fontWeight: 600,
-            alignItems: 'center',
-            lineHeight: '15px',
-            p: '2px 6px',
-            borderRadius: '5px',
-            width: 'fit-content',
-            zIndex: 2,
-            gap: '5px',
+            padding: '2px 6px',
             ...MCTagStyles[marketingCampaign],
-            '&:hover': {
-                background: 'rgb(20 18 29 / 0.36)',
-            },
         }, children: [text === 'Selling Fast' && jsx(SellingFast, { width: 12 }), text === 'Short Supply' && jsx(ShortSupply, { width: 20 }), text === 'New Offer' && jsx(NewOffer, { width: 20 }), text === 'Whale Activity' && jsx(WhaleActivity, { width: 20 }), text.toLowerCase() === 'yield bond' && jsx(Flex, { children: "\uD83C\uDF31" }), text.toUpperCase()] }));
 };
 

package/dist/components/uikit-sdk/Tag/ListTag.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListTag.js","sources":["../../../../src/components/uikit-sdk/Tag/ListTag.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../Flex'\nimport { MCTagStyles } from '../../../utils/campaignStyles'\nimport { MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport SellingFast from '../Svg/Icons/SellingFast'\nimport ShortSupply from '../Svg/Icons/ShortSupply'\nimport NewOffer from '../Svg/Icons/NewOffer'\nimport WhaleActivity from '../Svg/Icons/WhaleActivity'\n\nconst bg = {\n  ['Selling Fast']: '#14121D',\n  ['Short Supply']: '#14121D',\n  ['New Offer']: '#14121D',\n  ['Whale Activity']: '#14121D',\n  ['yield bond']: '#102010',\n}\n\nconst colorMap = {\n  ['Selling Fast']: '#EA901B',\n  ['Short Supply']: '#FCA384',\n  ['New Offer']: '#AA80F9',\n  ['Whale Activity']: '#8EE3FF',\n  ['yield bond']: 'success',\n}\n\nconst ListTag = ({ text = '', marketingCampaign }: { text?: string; marketingCampaign?: MarketingCampaign }) => {\n  return (\n    <Flex\n      className=\"list-tag\"\n      sx={{\n        //@ts-ignore\n        background: bg[text] || '#3C6AB530',\n        //@ts-ignore\n        color: colorMap[text] || '#3b78d3',\n        fontSize: '10px',\n        fontWeight: 600,\n        alignItems: 'center',\n        lineHeight: '15px',\n        p: '2px 6px',\n        borderRadius: '5px',\n        width: 'fit-content',\n        zIndex: 2,\n        gap: '5px',\n        ...MCTagStyles[marketingCampaign!],\n        '&:hover': {\n          background: 'rgb(20 18 29 / 0.36)',\n        },\n      }}\n    >\n      {text === 'Selling Fast' && <SellingFast width={12} />}\n      {text === 'Short Supply' && <ShortSupply width={20} />}\n      {text === 'New Offer' && <NewOffer width={20} />}\n      {text === 'Whale Activity' && <WhaleActivity width={20} />}\n      {text.toLowerCase() === 'yield bond' && <Flex>🌱</Flex>}\n      {text.toUpperCase()}\n    </Flex>\n  )\n}\n\nexport default ListTag\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AASA,MAAM,EAAE,GAAG;IACT,CAAC,cAAc,GAAG,SAAS;IAC3B,CAAC,cAAc,GAAG,SAAS;IAC3B,CAAC,WAAW,GAAG,SAAS;IACxB,CAAC,gBAAgB,GAAG,SAAS;IAC7B,CAAC,YAAY,GAAG,SAAS;CAC1B;AAED,MAAM,QAAQ,GAAG;IACf,CAAC,cAAc,GAAG,SAAS;IAC3B,CAAC,cAAc,GAAG,SAAS;IAC3B,CAAC,WAAW,GAAG,SAAS;IACxB,CAAC,gBAAgB,GAAG,SAAS;IAC7B,CAAC,YAAY,GAAG,SAAS;CAC1B;AAED,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,iBAAiB,EAA4D,KAAI;IAC7G,QACEA,KAAC,IAAI,EAAA,EACH,SAAS,EAAC,UAAU,EACpB,EAAE,EAAE;;AAEF,YAAA,UAAU,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,WAAW;;AAEnC,YAAA,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,SAAS;AAClC,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,CAAC,EAAE,SAAS;AACZ,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,KAAK,EAAE,aAAa;AACpB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,GAAG,EAAE,KAAK;YACV,GAAG,WAAW,CAAC,iBAAkB,CAAC;AAClC,YAAA,SAAS,EAAE;AACT,gBAAA,UAAU,EAAE,sBAAsB;AACnC,aAAA;AACF,SAAA,EAAA,QAAA,EAAA,CAEA,IAAI,KAAK,cAAc,IAAIC,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EACrD,IAAI,KAAK,cAAc,IAAIA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EACrD,IAAI,KAAK,WAAW,IAAIA,GAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EAC/C,IAAI,KAAK,gBAAgB,IAAIA,GAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,EAAE,GAAI,EACzD,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY,IAAIA,IAAC,IAAI,EAAA,EAAA,QAAA,EAAA,cAAA,EAAA,CAAU,EACtD,IAAI,CAAC,WAAW,EAAE,CAAA,EAAA,CACd;AAEX;;;;"}
+{"version":3,"file":"ListTag.js","sources":["../../../../src/components/uikit-sdk/Tag/ListTag.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../Flex'\nimport { MCTagStyles } from '../../../utils/campaignStyles'\nimport { MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport SellingFast from '../Svg/Icons/SellingFast'\nimport ShortSupply from '../Svg/Icons/ShortSupply'\nimport NewOffer from '../Svg/Icons/NewOffer'\nimport WhaleActivity from '../Svg/Icons/WhaleActivity'\n\nconst bg: Record<string, string> = {\n  ['Selling Fast']: '#14121D',\n  ['Short Supply']: '#14121D',\n  ['New Offer']: '#14121D',\n  ['Whale Activity']: '#14121D',\n  ['yield bond']: '#102010',\n}\n\nconst colorMap: Record<string, string> = {\n  ['Selling Fast']: '#EA901B',\n  ['Short Supply']: '#FCA384',\n  ['New Offer']: '#AA80F9',\n  ['Whale Activity']: '#8EE3FF',\n  ['yield bond']: 'success',\n}\n\nconst ListTag = ({ text = '', marketingCampaign }: { text?: string; marketingCampaign?: MarketingCampaign }) => {\n  return (\n    <Flex\n      // `!` on both hover rules: this element's own `background` is always set\n      // via inline style below, which otherwise beats any hover class\n      // regardless of specificity — `!important` is the only way a class-based\n      // hover can still win over an always-present inline style.\n      className=\"list-tag ape:items-center ape:rounded-[5px] ape:w-fit ape:z-[2] ape:gap-[5px] ape:text-[10px] ape:font-semibold ape:leading-[15px] ape:hover:bg-[rgb(20_18_29_/_0.36)]! ape:group-hover:bg-[rgb(20_18_29_/_0.25)]!\"\n      style={{\n        background: bg[text] || '#3C6AB530',\n        color: colorMap[text] || '#3b78d3',\n        padding: '2px 6px',\n        ...MCTagStyles[marketingCampaign!],\n      }}\n    >\n      {text === 'Selling Fast' && <SellingFast width={12} />}\n      {text === 'Short Supply' && <ShortSupply width={20} />}\n      {text === 'New Offer' && <NewOffer width={20} />}\n      {text === 'Whale Activity' && <WhaleActivity width={20} />}\n      {text.toLowerCase() === 'yield bond' && <Flex>🌱</Flex>}\n      {text.toUpperCase()}\n    </Flex>\n  )\n}\n\nexport default ListTag\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AASA,MAAM,EAAE,GAA2B;IACjC,CAAC,cAAc,GAAG,SAAS;IAC3B,CAAC,cAAc,GAAG,SAAS;IAC3B,CAAC,WAAW,GAAG,SAAS;IACxB,CAAC,gBAAgB,GAAG,SAAS;IAC7B,CAAC,YAAY,GAAG,SAAS;CAC1B;AAED,MAAM,QAAQ,GAA2B;IACvC,CAAC,cAAc,GAAG,SAAS;IAC3B,CAAC,cAAc,GAAG,SAAS;IAC3B,CAAC,WAAW,GAAG,SAAS;IACxB,CAAC,gBAAgB,GAAG,SAAS;IAC7B,CAAC,YAAY,GAAG,SAAS;CAC1B;AAED,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,iBAAiB,EAA4D,KAAI;IAC7G,QACEA,KAAC;;;;;;;;;;AAKC,QAAA,SAAS,EAAC,oNAAoN,EAC9N,KAAK,EAAE;AACL,YAAA,UAAU,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,WAAW;AACnC,YAAA,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,SAAS;AAClC,YAAA,OAAO,EAAE,SAAS;YAClB,GAAG,WAAW,CAAC,iBAAkB,CAAC;AACnC,SAAA,EAAA,QAAA,EAAA,CAEA,IAAI,KAAK,cAAc,IAAIC,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EACrD,IAAI,KAAK,cAAc,IAAIA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EACrD,IAAI,KAAK,WAAW,IAAIA,GAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EAC/C,IAAI,KAAK,gBAAgB,IAAIA,GAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,EAAE,GAAI,EACzD,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY,IAAIA,IAAC,IAAI,EAAA,EAAA,QAAA,EAAA,cAAA,EAAA,CAAU,EACtD,IAAI,CAAC,WAAW,EAAE,CAAA,EAAA,CACd;AAEX;;;;"}

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { TextProps } from './types';
-declare const Text: ({ variant, weight, size, children, color, ...props }: TextProps | any) => React.JSX.Element;
+declare const Text: ({ variant, weight, size, children, color, className, style, as: Component, ...props }: TextProps | any) => import("react/jsx-runtime").JSX.Element;
 export default Text;

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

@@ -1,13 +1,26 @@
-import { jsx } from 'theme-ui/jsx-runtime';
-import { Text as Text$1 } from 'theme-ui';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { resolveColor } from '../../../utils/resolveColor.js';
 import { variants } from './types.js';
 
-const Text = ({ variant = variants.NORMAL, weight = variants.NORMAL, size, children, color = 'text', ...props }) => {
-    return (jsx(Text$1, { ...props, sx: {
-            variant: variant === variants.LINK ? `flex.${variant}` : `text.${variant}`,
-            color,
-            fontWeight: weight,
-            fontSize: size,
+const variantClasses = {
+    [variants.SMALL]: 'ape:text-[14px] ape:leading-[18px]',
+    [variants.NORMAL]: 'ape:text-[18px] ape:leading-[24px]',
+    [variants.LARGE]: 'ape:text-[24px] ape:leading-[33px]',
+    [variants.LINK]: 'ape-text-link',
+};
+const namedWeights = {
+    light: 400,
+    normal: 600,
+    bold: 700,
+};
+const Text = ({ variant = variants.NORMAL, weight, size, children, color = 'text', className, style, as: Component = 'p', ...props }) => {
+    const fontWeight = typeof weight === 'number' ? weight : weight ? namedWeights[weight] : undefined;
+    return (jsx(Component, { ...props, className: clsx(variantClasses[variant], className), style: {
+            color: resolveColor(color),
+            ...(fontWeight !== undefined ? { fontWeight } : {}),
+            ...(size ? { fontSize: size } : {}),
+            ...style,
         }, children: children }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Text/index.tsx"],"sourcesContent":["import React from 'react'\nimport { Text as ThemeUIText } from 'theme-ui'\nimport { TextProps, variants } from './types'\n\nconst Text = ({\n  variant = variants.NORMAL,\n  weight = variants.NORMAL,\n  size,\n  children,\n  color = 'text',\n  ...props\n}: TextProps | any) => {\n  return (\n    <ThemeUIText\n      {...props}\n      sx={{\n        variant: variant === variants.LINK ? `flex.${variant}` : `text.${variant}`,\n        color,\n        fontWeight: weight,\n        fontSize: size,\n      }}\n    >\n      {children}\n    </ThemeUIText>\n  )\n}\n\nexport default Text\n"],"names":["_jsx","ThemeUIText"],"mappings":";;;;AAIA,MAAM,IAAI,GAAG,CAAC,EACZ,OAAO,GAAG,QAAQ,CAAC,MAAM,EACzB,MAAM,GAAG,QAAQ,CAAC,MAAM,EACxB,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,GAAG,KAAK,EACQ,KAAI;AACpB,IAAA,QACEA,GAAA,CAACC,MAAW,OACN,KAAK,EACT,EAAE,EAAE;AACF,YAAA,OAAO,EAAE,OAAO,KAAK,QAAQ,CAAC,IAAI,GAAG,CAAA,KAAA,EAAQ,OAAO,CAAA,CAAE,GAAG,CAAA,KAAA,EAAQ,OAAO,CAAA,CAAE;YAC1E,KAAK;AACL,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,QAAQ,EAAE,IAAI;SACf,EAAA,QAAA,EAEA,QAAQ,EAAA,CACG;AAElB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Text/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { resolveColor } from '../../../utils/resolveColor'\nimport { TextProps, variants } from './types'\n\nconst variantClasses: Record<string, string> = {\n  [variants.SMALL]: 'ape:text-[14px] ape:leading-[18px]',\n  [variants.NORMAL]: 'ape:text-[18px] ape:leading-[24px]',\n  [variants.LARGE]: 'ape:text-[24px] ape:leading-[33px]',\n  [variants.LINK]: 'ape-text-link',\n}\n\nconst namedWeights: Record<string, number> = {\n  light: 400,\n  normal: 600,\n  bold: 700,\n}\n\nconst Text = ({\n  variant = variants.NORMAL,\n  weight,\n  size,\n  children,\n  color = 'text',\n  className,\n  style,\n  as: Component = 'p',\n  ...props\n}: TextProps | any) => {\n  const fontWeight = typeof weight === 'number' ? weight : weight ? namedWeights[weight] : undefined\n\n  return (\n    <Component\n      {...props}\n      className={clsx(variantClasses[variant], className)}\n      style={{\n        color: resolveColor(color),\n        ...(fontWeight !== undefined ? { fontWeight } : {}),\n        ...(size ? { fontSize: size } : {}),\n        ...style,\n      }}\n    >\n      {children}\n    </Component>\n  )\n}\n\nexport default Text\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,cAAc,GAA2B;AAC7C,IAAA,CAAC,QAAQ,CAAC,KAAK,GAAG,oCAAoC;AACtD,IAAA,CAAC,QAAQ,CAAC,MAAM,GAAG,oCAAoC;AACvD,IAAA,CAAC,QAAQ,CAAC,KAAK,GAAG,oCAAoC;AACtD,IAAA,CAAC,QAAQ,CAAC,IAAI,GAAG,eAAe;CACjC;AAED,MAAM,YAAY,GAA2B;AAC3C,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,IAAI,EAAE,GAAG;CACV;AAED,MAAM,IAAI,GAAG,CAAC,EACZ,OAAO,GAAG,QAAQ,CAAC,MAAM,EACzB,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,SAAS,EACT,KAAK,EACL,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,GAAG,KAAK,EACQ,KAAI;IACpB,MAAM,UAAU,GAAG,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC,MAAM,CAAC,GAAG,SAAS;AAElG,IAAA,QACEA,GAAA,CAAC,SAAS,OACJ,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,EACnD,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC;AAC1B,YAAA,IAAI,UAAU,KAAK,SAAS,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC;AACnD,YAAA,IAAI,IAAI,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;AACnC,YAAA,GAAG,KAAK;SACT,EAAA,QAAA,EAEA,QAAQ,EAAA,CACC;AAEhB;;;;"}

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

@@ -1,4 +1,4 @@
-import { TextProps as ThemeUITextProps } from 'theme-ui';
+import type React from 'react';
 export declare enum variants {
     SMALL = "sm",
     NORMAL = "md",
@@ -13,11 +13,12 @@ declare enum weights {
 type variantProps = `${variants}`;
 type weightProps = `${weights}` | number;
 type sizeProps = string;
-export interface TextProps extends Omit<ThemeUITextProps, 'sx'> {
+export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
     variant?: variantProps;
     weight?: weightProps;
     color?: string;
     size?: sizeProps;
+    as?: React.ElementType;
     [key: string]: any;
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/Text/types.ts"],"sourcesContent":["import { TextProps as ThemeUITextProps } from 'theme-ui'\n\nexport enum variants {\n  SMALL = 'sm',\n  NORMAL = 'md',\n  LARGE = 'lg',\n  LINK = 'link',\n}\n\nenum weights {\n  LIGHT = 'light',\n  NORMAL = 'normal',\n  BOLD = 'bold',\n}\n\ntype variantProps = `${variants}`\ntype weightProps = `${weights}` | number\ntype sizeProps = string\n\nexport interface TextProps extends Omit<ThemeUITextProps, 'sx'> {\n  variant?: variantProps\n  weight?: weightProps\n  color?: string\n  size?: sizeProps\n  [key: string]: any\n}\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,QAAQ,EAAA;AAClB,IAAA,QAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACZ,IAAA,QAAA,CAAA,QAAA,CAAA,GAAA,IAAa;AACb,IAAA,QAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACZ,IAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EALW,QAAQ,KAAR,QAAQ,GAAA,EAAA,CAAA,CAAA;AAOpB,IAAK,OAIJ;AAJD,CAAA,UAAK,OAAO,EAAA;AACV,IAAA,OAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,OAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,OAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAJI,OAAO,KAAP,OAAO,GAAA,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/Text/types.ts"],"sourcesContent":["import type React from 'react'\n\nexport enum variants {\n  SMALL = 'sm',\n  NORMAL = 'md',\n  LARGE = 'lg',\n  LINK = 'link',\n}\n\nenum weights {\n  LIGHT = 'light',\n  NORMAL = 'normal',\n  BOLD = 'bold',\n}\n\ntype variantProps = `${variants}`\ntype weightProps = `${weights}` | number\ntype sizeProps = string\n\nexport interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  variant?: variantProps\n  weight?: weightProps\n  color?: string\n  size?: sizeProps\n  as?: React.ElementType\n  [key: string]: any\n}\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,QAAQ,EAAA;AAClB,IAAA,QAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACZ,IAAA,QAAA,CAAA,QAAA,CAAA,GAAA,IAAa;AACb,IAAA,QAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACZ,IAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EALW,QAAQ,KAAR,QAAQ,GAAA,EAAA,CAAA,CAAA;AAOpB,IAAK,OAIJ;AAJD,CAAA,UAAK,OAAO,EAAA;AACV,IAAA,OAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,OAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,OAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAJI,OAAO,KAAP,OAAO,GAAA,EAAA,CAAA,CAAA;;;;"}

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

@@ -1,8 +1,7 @@
-import React from 'react';
 declare const Toggle: ({ options, activeOption, handleToggle, claimableBillsAmount, }: {
     options: string[];
     activeOption: string;
     handleToggle: (newOption: string) => void;
     claimableBillsAmount?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Toggle;

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

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

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

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

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

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

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

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

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

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

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

@@ -1,64 +1,40 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
-import { Box } from 'theme-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import clsx from 'clsx';
 import { placements } from './types.js';
-import styles, { container } from './styles.js';
 
 const placementStyles = {
-    [placements.BOTTOMLEFT]: {
-        top: '100%',
-        left: 0,
-        mt: '-3px', // To create an overlap between parent and tooltip
-    },
-    [placements.BOTTOMRIGHT]: {
-        top: '100%',
-        right: 0,
-        mt: '-3px',
-    },
-    [placements.TOPLEFT]: {
-        bottom: 'calc(100% + 15px)',
-        left: 0,
-    },
-    [placements.TOPRIGHT]: {
-        bottom: 'calc(100% + 15px)',
-        right: 0,
-    },
-    [placements.ONLYCONTAINERRIGHT]: {
-        top: 'calc(100% + 15px)',
-        right: 0,
-    },
-    [placements.LEFT]: {
-        left: 'calc(100% + 15px)',
-        right: 0,
-    },
+    [placements.BOTTOMLEFT]: { top: '100%', left: 0, marginTop: '-3px' },
+    [placements.BOTTOMRIGHT]: { top: '100%', right: 0, marginTop: '-3px' },
+    [placements.TOPLEFT]: { bottom: 'calc(100% + 15px)', left: 0 },
+    [placements.TOPRIGHT]: { bottom: 'calc(100% + 15px)', right: 0 },
+    [placements.ONLYCONTAINERRIGHT]: { top: 'calc(100% + 15px)', right: 0 },
+    [placements.LEFT]: { left: 'calc(100% + 15px)', right: 0 },
 };
-const TooltipBubble = ({ width, placement = placements.BOTTOMRIGHT, body, backgroundColor, hideTooltip, children, transformTip, ...props }) => {
-    const backgroundColorStyle = backgroundColor
-        ? {
-            backgroundColor,
-            '&:before': {
-                borderBottomColor: placement === placements.BOTTOMLEFT || placement === placements.BOTTOMRIGHT || placement === placements.LEFT
-                    ? backgroundColor
-                    : undefined,
-                borderTopColor: placement === placements.TOPLEFT || placement === placements.TOPRIGHT || placement === placements.LEFT
-                    ? backgroundColor
-                    : undefined,
-            },
-        }
-        : {};
-    const handleClick = (event) => {
+const placementArrowClass = {
+    [placements.BOTTOMLEFT]: 'ape-tooltip-bottom-left',
+    [placements.BOTTOMRIGHT]: 'ape-tooltip-bottom-right',
+    [placements.TOPLEFT]: 'ape-tooltip-top-left',
+    [placements.TOPRIGHT]: 'ape-tooltip-top-right',
+    [placements.ONLYCONTAINERRIGHT]: 'ape-tooltip-only-container-right',
+    [placements.LEFT]: 'ape-tooltip-left',
+};
+const TooltipBubble = ({ width, placement = placements.BOTTOMRIGHT, body, backgroundColor, hideTooltip, children, transformTip, className, ...props }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleTriggerClick = (event) => {
+        event.stopPropagation();
+        if (!hideTooltip)
+            setIsOpen((prev) => !prev);
+    };
+    const handleBackdropClick = (event) => {
         event.stopPropagation();
+        setIsOpen(false);
     };
-    return (jsxs(Box, { sx: container(hideTooltip), onClick: handleClick, children: [jsx(Box, { sx: {
-                    position: 'absolute',
-                    ...(placementStyles[placement] || {}),
-                }, children: jsx(Box, { sx: {
-                        position: 'relative',
-                        ...styles.default,
-                        ...styles[placement],
-                        ...backgroundColorStyle,
+    return (jsxs("div", { className: "ape:relative ape:flex ape:group/tooltip", children: [isOpen && jsx("div", { className: "ape:fixed ape:inset-0 ape:z-[100]", onClick: handleBackdropClick }), jsx("div", { className: clsx('ape:absolute ape:hidden', !hideTooltip && 'ape:group-hover/tooltip:block', isOpen && !hideTooltip && 'ape:block!'), style: placementStyles[placement] || {}, children: jsx("div", { ...props, className: clsx('ape-tooltip-bubble', placementArrowClass[placement], className), style: {
                         width,
                         transform: transformTip,
-                    }, ...props, children: body }) }), children] }));
+                        ...(backgroundColor ? { '--ape-tooltip-bg': backgroundColor } : {}),
+                    }, children: body }) }), jsx("div", { className: "ape:select-none", onClick: handleTriggerClick, children: children })] }));
 };
 
 export { TooltipBubble as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/TooltipBubble/index.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, ThemeUIStyleObject } from 'theme-ui'\nimport { TooltipProps, placements } from './types'\nimport style, { container } from './styles'\n\nconst placementStyles = {\n  [placements.BOTTOMLEFT]: {\n    top: '100%',\n    left: 0,\n    mt: '-3px', // To create an overlap between parent and tooltip\n  },\n  [placements.BOTTOMRIGHT]: {\n    top: '100%',\n    right: 0,\n    mt: '-3px',\n  },\n  [placements.TOPLEFT]: {\n    bottom: 'calc(100% + 15px)',\n    left: 0,\n  },\n  [placements.TOPRIGHT]: {\n    bottom: 'calc(100% + 15px)',\n    right: 0,\n  },\n  [placements.ONLYCONTAINERRIGHT]: {\n    top: 'calc(100% + 15px)',\n    right: 0,\n  },\n  [placements.LEFT]: {\n    left: 'calc(100% + 15px)',\n    right: 0,\n  },\n}\n\nconst TooltipBubble: React.FC<TooltipProps> = ({\n  width,\n  placement = placements.BOTTOMRIGHT,\n  body,\n  backgroundColor,\n  hideTooltip,\n  children,\n  transformTip,\n  ...props\n}) => {\n  const backgroundColorStyle = backgroundColor\n    ? ({\n        backgroundColor,\n        '&:before': {\n          borderBottomColor:\n            placement === placements.BOTTOMLEFT || placement === placements.BOTTOMRIGHT || placement === placements.LEFT\n              ? backgroundColor\n              : undefined,\n          borderTopColor:\n            placement === placements.TOPLEFT || placement === placements.TOPRIGHT || placement === placements.LEFT\n              ? backgroundColor\n              : undefined,\n        },\n      } as ThemeUIStyleObject)\n    : {}\n\n  const handleClick = (event: React.MouseEvent) => {\n    event.stopPropagation()\n  }\n\n  return (\n    <Box sx={container(hideTooltip)} onClick={handleClick}>\n      <Box\n        sx={{\n          position: 'absolute',\n          ...(placementStyles[placement] || {}),\n        }}\n      >\n        <Box\n          sx={{\n            position: 'relative',\n            ...style.default,\n            ...style[placement],\n            ...backgroundColorStyle,\n            width,\n            transform: transformTip,\n          }}\n          {...props}\n        >\n          {body}\n        </Box>\n      </Box>\n      {children}\n    </Box>\n  )\n}\n\nexport default TooltipBubble\n"],"names":["_jsxs","_jsx","style"],"mappings":";;;;;AAKA,MAAM,eAAe,GAAG;AACtB,IAAA,CAAC,UAAU,CAAC,UAAU,GAAG;AACvB,QAAA,GAAG,EAAE,MAAM;AACX,QAAA,IAAI,EAAE,CAAC;QACP,EAAE,EAAE,MAAM;AACX,KAAA;AACD,IAAA,CAAC,UAAU,CAAC,WAAW,GAAG;AACxB,QAAA,GAAG,EAAE,MAAM;AACX,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;AACD,IAAA,CAAC,UAAU,CAAC,OAAO,GAAG;AACpB,QAAA,MAAM,EAAE,mBAAmB;AAC3B,QAAA,IAAI,EAAE,CAAC;AACR,KAAA;AACD,IAAA,CAAC,UAAU,CAAC,QAAQ,GAAG;AACrB,QAAA,MAAM,EAAE,mBAAmB;AAC3B,QAAA,KAAK,EAAE,CAAC;AACT,KAAA;AACD,IAAA,CAAC,UAAU,CAAC,kBAAkB,GAAG;AAC/B,QAAA,GAAG,EAAE,mBAAmB;AACxB,QAAA,KAAK,EAAE,CAAC;AACT,KAAA;AACD,IAAA,CAAC,UAAU,CAAC,IAAI,GAAG;AACjB,QAAA,IAAI,EAAE,mBAAmB;AACzB,QAAA,KAAK,EAAE,CAAC;AACT,KAAA;CACF;AAED,MAAM,aAAa,GAA2B,CAAC,EAC7C,KAAK,EACL,SAAS,GAAG,UAAU,CAAC,WAAW,EAClC,IAAI,EACJ,eAAe,EACf,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,GAAG,KAAK,EACT,KAAI;IACH,MAAM,oBAAoB,GAAG;AAC3B,UAAG;YACC,eAAe;AACf,YAAA,UAAU,EAAE;AACV,gBAAA,iBAAiB,EACf,SAAS,KAAK,UAAU,CAAC,UAAU,IAAI,SAAS,KAAK,UAAU,CAAC,WAAW,IAAI,SAAS,KAAK,UAAU,CAAC;AACtG,sBAAE;AACF,sBAAE,SAAS;AACf,gBAAA,cAAc,EACZ,SAAS,KAAK,UAAU,CAAC,OAAO,IAAI,SAAS,KAAK,UAAU,CAAC,QAAQ,IAAI,SAAS,KAAK,UAAU,CAAC;AAChG,sBAAE;AACF,sBAAE,SAAS;AAChB,aAAA;AACqB;UACxB,EAAE;AAEN,IAAA,MAAM,WAAW,GAAG,CAAC,KAAuB,KAAI;QAC9C,KAAK,CAAC,eAAe,EAAE;AACzB,IAAA,CAAC;AAED,IAAA,QACEA,IAAA,CAAC,GAAG,IAAC,EAAE,EAAE,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,CACnDC,IAAC,GAAG,EAAA,EACF,EAAE,EAAE;AACF,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,IAAI,eAAe,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;AACtC,iBAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,GAAG,EAAA,EACF,EAAE,EAAE;AACF,wBAAA,QAAQ,EAAE,UAAU;wBACpB,GAAGC,MAAK,CAAC,OAAO;wBAChB,GAAGA,MAAK,CAAC,SAAS,CAAC;AACnB,wBAAA,GAAG,oBAAoB;wBACvB,KAAK;AACL,wBAAA,SAAS,EAAE,YAAY;qBACxB,EAAA,GACG,KAAK,YAER,IAAI,EAAA,CACD,GACF,EACL,QAAQ,CAAA,EAAA,CACL;AAEV;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/TooltipBubble/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport clsx from 'clsx'\nimport { TooltipProps, placements } from './types'\n\nconst placementStyles: Record<string, React.CSSProperties> = {\n  [placements.BOTTOMLEFT]: { top: '100%', left: 0, marginTop: '-3px' },\n  [placements.BOTTOMRIGHT]: { top: '100%', right: 0, marginTop: '-3px' },\n  [placements.TOPLEFT]: { bottom: 'calc(100% + 15px)', left: 0 },\n  [placements.TOPRIGHT]: { bottom: 'calc(100% + 15px)', right: 0 },\n  [placements.ONLYCONTAINERRIGHT]: { top: 'calc(100% + 15px)', right: 0 },\n  [placements.LEFT]: { left: 'calc(100% + 15px)', right: 0 },\n}\n\nconst placementArrowClass: Record<string, string> = {\n  [placements.BOTTOMLEFT]: 'ape-tooltip-bottom-left',\n  [placements.BOTTOMRIGHT]: 'ape-tooltip-bottom-right',\n  [placements.TOPLEFT]: 'ape-tooltip-top-left',\n  [placements.TOPRIGHT]: 'ape-tooltip-top-right',\n  [placements.ONLYCONTAINERRIGHT]: 'ape-tooltip-only-container-right',\n  [placements.LEFT]: 'ape-tooltip-left',\n}\n\nconst TooltipBubble: React.FC<TooltipProps> = ({\n  width,\n  placement = placements.BOTTOMRIGHT,\n  body,\n  backgroundColor,\n  hideTooltip,\n  children,\n  transformTip,\n  className,\n  ...props\n}) => {\n  const [isOpen, setIsOpen] = useState(false)\n\n  const handleTriggerClick = (event: React.MouseEvent) => {\n    event.stopPropagation()\n    if (!hideTooltip) setIsOpen((prev) => !prev)\n  }\n\n  const handleBackdropClick = (event: React.MouseEvent) => {\n    event.stopPropagation()\n    setIsOpen(false)\n  }\n\n  return (\n    <div className=\"ape:relative ape:flex ape:group/tooltip\">\n      {isOpen && <div className=\"ape:fixed ape:inset-0 ape:z-[100]\" onClick={handleBackdropClick} />}\n      <div\n        className={clsx(\n          'ape:absolute ape:hidden',\n          !hideTooltip && 'ape:group-hover/tooltip:block',\n          isOpen && !hideTooltip && 'ape:block!',\n        )}\n        style={placementStyles[placement] || {}}\n      >\n        <div\n          {...props}\n          className={clsx('ape-tooltip-bubble', placementArrowClass[placement], className)}\n          style={{\n            width,\n            transform: transformTip,\n            ...(backgroundColor ? ({ '--ape-tooltip-bg': backgroundColor } as React.CSSProperties) : {}),\n          }}\n        >\n          {body}\n        </div>\n      </div>\n      <div className=\"ape:select-none\" onClick={handleTriggerClick}>\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport default TooltipBubble\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

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

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

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

package/dist/config/constants/variables.d.ts

@@ -7,4 +7,3 @@ export declare const STRAPI_URL = "https://strapi-api.ape.bond";
 export declare const SOUL_ZAP_API = "https://api.soulsolidity.com/zap";
 export declare const PRICE_API_URL = "https://price-api.ape.bond";
 export declare const APEBOND = "https://ape.bond";
-export declare const tierOptimizerUIEnabled = true;

package/dist/config/constants/variables.js

@@ -44,7 +44,6 @@ const STRAPI_URL = `https://strapi-api.ape.bond`;
 const SOUL_ZAP_API = `https://api.soulsolidity.com/zap`;
 const PRICE_API_URL = `https://price-api.ape.bond`;
 const APEBOND = `https://ape.bond`;
-const tierOptimizerUIEnabled = true;
 
-export { APEBOND, LifiSupported, PRICE_API_URL, SOUL_ZAP_API, STRAPI_URL, tierOptimizerUIEnabled, zapSupported };
+export { APEBOND, LifiSupported, PRICE_API_URL, SOUL_ZAP_API, STRAPI_URL, zapSupported };
 //# sourceMappingURL=variables.js.map

package/dist/config/constants/variables.js.map

@@ -1 +1 @@
-{"version":3,"file":"variables.js","sources":["../../../src/config/constants/variables.ts"],"sourcesContent":["import { ChainId } from '@ape.swap/apeswap-lists'\n\nexport const LifiSupported = [\n  ChainId.MAINNET,\n  ChainId.MATIC,\n  ChainId.BSC,\n  ChainId.BASE,\n  ChainId.ARBITRUM,\n  ChainId.HYPEREVM,\n  ChainId.ROBINHOOD,\n  ChainId.LINEA,\n  ChainId.AVAX,\n  ChainId.BLAST,\n  ChainId.SONIC,\n  ChainId.BERACHAIN,\n  ChainId.UNICHAIN,\n  ChainId.MONAD,\n  ChainId.KATANA,\n  ChainId.SOL,\n]\n\nexport const zapSupported = [\n  ChainId.MAINNET,\n  ChainId.MATIC,\n  ChainId.BSC,\n  ChainId.BASE,\n  ChainId.ARBITRUM,\n  ChainId.HYPEREVM,\n  ChainId.ROBINHOOD,\n  //\n  ChainId.SOL,\n  ChainId.APTOS,\n  ChainId.SUI,\n  //\n  // Chains below this point have not been re-deployed yet\n  //\n  // ChainId.LINEA,\n  // ChainId.AVAX,\n  // ChainId.BLAST,\n  // ChainId.BERACHAIN,\n  // ChainId.SONIC,\n  // ChainId.KATANA,\n] as const\n\n/** Union of all chain IDs where zap is supported. Derived from `zapSupported`. */\nexport type ZapSupportedChainId = (typeof zapSupported)[number]\n\nexport const STRAPI_URL = `https://strapi-api.ape.bond`\nexport const SOUL_ZAP_API = `https://api.soulsolidity.com/zap`\nexport const PRICE_API_URL = `https://price-api.ape.bond`\nexport const APEBOND = `https://ape.bond`\n\nexport const tierOptimizerUIEnabled = true\n"],"names":[],"mappings":";;AAEO,MAAM,aAAa,GAAG;AAC3B,IAAA,OAAO,CAAC,OAAO;AACf,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,GAAG;AACX,IAAA,OAAO,CAAC,IAAI;AACZ,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,SAAS;AACjB,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,IAAI;AACZ,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,SAAS;AACjB,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,MAAM;AACd,IAAA,OAAO,CAAC,GAAG;;AAGN,MAAM,YAAY,GAAG;AAC1B,IAAA,OAAO,CAAC,OAAO;AACf,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,GAAG;AACX,IAAA,OAAO,CAAC,IAAI;AACZ,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,SAAS;;AAEjB,IAAA,OAAO,CAAC,GAAG;AACX,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,GAAG;;;;;;;;;;;AAeN,MAAM,UAAU,GAAG;AACnB,MAAM,YAAY,GAAG;AACrB,MAAM,aAAa,GAAG;AACtB,MAAM,OAAO,GAAG;AAEhB,MAAM,sBAAsB,GAAG;;;;"}
+{"version":3,"file":"variables.js","sources":["../../../src/config/constants/variables.ts"],"sourcesContent":["import { ChainId } from '@ape.swap/apeswap-lists'\n\nexport const LifiSupported = [\n  ChainId.MAINNET,\n  ChainId.MATIC,\n  ChainId.BSC,\n  ChainId.BASE,\n  ChainId.ARBITRUM,\n  ChainId.HYPEREVM,\n  ChainId.ROBINHOOD,\n  ChainId.LINEA,\n  ChainId.AVAX,\n  ChainId.BLAST,\n  ChainId.SONIC,\n  ChainId.BERACHAIN,\n  ChainId.UNICHAIN,\n  ChainId.MONAD,\n  ChainId.KATANA,\n  ChainId.SOL,\n]\n\nexport const zapSupported = [\n  ChainId.MAINNET,\n  ChainId.MATIC,\n  ChainId.BSC,\n  ChainId.BASE,\n  ChainId.ARBITRUM,\n  ChainId.HYPEREVM,\n  ChainId.ROBINHOOD,\n  //\n  ChainId.SOL,\n  ChainId.APTOS,\n  ChainId.SUI,\n  //\n  // Chains below this point have not been re-deployed yet\n  //\n  // ChainId.LINEA,\n  // ChainId.AVAX,\n  // ChainId.BLAST,\n  // ChainId.BERACHAIN,\n  // ChainId.SONIC,\n  // ChainId.KATANA,\n] as const\n\n/** Union of all chain IDs where zap is supported. Derived from `zapSupported`. */\nexport type ZapSupportedChainId = (typeof zapSupported)[number]\n\nexport const STRAPI_URL = `https://strapi-api.ape.bond`\nexport const SOUL_ZAP_API = `https://api.soulsolidity.com/zap`\nexport const PRICE_API_URL = `https://price-api.ape.bond`\nexport const APEBOND = `https://ape.bond`\n"],"names":[],"mappings":";;AAEO,MAAM,aAAa,GAAG;AAC3B,IAAA,OAAO,CAAC,OAAO;AACf,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,GAAG;AACX,IAAA,OAAO,CAAC,IAAI;AACZ,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,SAAS;AACjB,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,IAAI;AACZ,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,SAAS;AACjB,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,MAAM;AACd,IAAA,OAAO,CAAC,GAAG;;AAGN,MAAM,YAAY,GAAG;AAC1B,IAAA,OAAO,CAAC,OAAO;AACf,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,GAAG;AACX,IAAA,OAAO,CAAC,IAAI;AACZ,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,SAAS;;AAEjB,IAAA,OAAO,CAAC,GAAG;AACX,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,GAAG;;;;;;;;;;;AAeN,MAAM,UAAU,GAAG;AACnB,MAAM,YAAY,GAAG;AACrB,MAAM,aAAa,GAAG;AACtB,MAAM,OAAO,GAAG;;;;"}

package/dist/contexts/ModalContext.d.ts

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

package/dist/contexts/ModalContext.js

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

package/dist/contexts/Popups.d.ts

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

package/dist/contexts/Popups.js

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

package/dist/contexts/Popups.js.map

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

package/dist/hooks/accounts/useSUIAccount.d.ts

@@ -1,7 +1,8 @@
-declare const useSUIAccount: () => {
+import { useSignAndExecuteTransaction } from '@mysten/dapp-kit';
+import type { SuiSignAndExecuteTransactionOutput } from '@mysten/wallet-standard';
+type UseSUIAccountResult = {
     address: string | null;
-    signAndExecuteTransaction: import("@tanstack/react-query").UseMutateAsyncFunction<import("@mysten/wallet-standard").SuiSignAndExecuteTransactionOutput, Error | import("@mysten/dapp-kit/dist/cjs/errors/walletErrors").WalletFeatureNotSupportedError | import("@mysten/dapp-kit/dist/cjs/errors/walletErrors").WalletNoAccountSelectedError | import("@mysten/dapp-kit/dist/cjs/errors/walletErrors").WalletNotConnectedError, Omit<Omit<import("@mysten/wallet-standard").SuiSignAndExecuteTransactionInput, "transaction">, "account" | "chain"> & Partial<Omit<import("@mysten/wallet-standard").SuiSignAndExecuteTransactionInput, "transaction">> & {
-        transaction: import("@mysten/sui/dist/cjs/transactions").Transaction | string;
-    }, unknown> | null;
+    signAndExecuteTransaction: ReturnType<typeof useSignAndExecuteTransaction<SuiSignAndExecuteTransactionOutput>>['mutateAsync'] | null;
 };
+declare const useSUIAccount: () => UseSUIAccountResult;
 export default useSUIAccount;