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

package/dist/components/uikit-sdk/Svg/tokens/TLOS.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const TLOS = ({ width }) => {
     return (jsxs("svg", { width: width || '25', viewBox: "0 0 114 114", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("circle", { cx: "57", cy: "57", r: "57", fill: "url(#paint0_linear)" }), jsx("g", { filter: "url(#filter0_i)", children: jsx("circle", { cx: "57", cy: "57", r: "57", fill: "url(#paint1_linear)" }) }), jsx("circle", { cx: "57", cy: "57", r: "56.4062", stroke: "url(#paint2_linear)", strokeOpacity: "0.12", strokeWidth: "1.1875" }), jsx("g", { filter: "url(#filter1_di)", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M78.1902 29.5337C78.432 28.9047 77.9953 28.2215 77.323 28.1769L65.9858 27.425C65.6353 27.4018 65.2984 27.5641 65.0981 27.8526L62.0942 32.1799C61.9062 32.4508 61.5966 32.6116 61.2669 32.6097L41.3099 32.4919C40.3307 32.4861 39.3835 32.8397 38.6476 33.4856L33.1104 38.3457C31.8784 39.427 31.4309 41.1507 31.9812 42.6948L34.6187 50.0948C34.6322 50.133 34.6258 50.1754 34.6014 50.2077V50.2077C33.1195 52.1776 32.258 54.5443 32.1266 57.0059L32.0819 57.8444C31.8028 63.0749 32.4187 68.3138 33.9037 73.337C35.1274 77.4764 36.5298 82.2203 37.3894 85.128C37.8429 86.6621 39.4098 87.5672 40.9653 87.1936C44.3144 86.3893 50.0664 85.0074 54.5963 83.9167C58.5798 82.9575 62.3674 81.3222 65.8017 79.0873L67.9506 77.6889C70.0167 76.3444 71.6355 74.4149 72.6006 72.1465V72.1465C72.6164 72.1093 72.6499 72.0825 72.6897 72.0752L80.4171 70.6592C82.0295 70.3638 83.2984 69.1144 83.6189 67.5068L85.0593 60.2814C85.2508 59.3211 85.0833 58.324 84.5887 57.4789L75.2139 41.4603C74.5997 40.4109 74.4962 39.139 74.9327 38.0041L78.1902 29.5337Z", stroke: "white", strokeWidth: "5.5" }) }), jsxs("defs", { children: [jsxs("filter", { id: "filter0_i", x: "-9.5", y: "0", width: "123.5", height: "114", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), jsx("feOffset", { dx: "-14.25" }), jsx("feGaussianBlur", { stdDeviation: "4.75" }), jsx("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.682353 0 0 0 0 0.45098 0 0 0 0 0.980392 0 0 0 0.56 0" }), jsx("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow" })] }), jsxs("filter", { id: "filter1_di", x: "28.0378", y: "24.1923", width: "60.8097", height: "67.2773", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), jsx("feOffset", { dy: "0.480491" }), jsx("feGaussianBlur", { stdDeviation: "0.480491" }), jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" }), jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow", result: "shape" }), jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), jsx("feOffset", { dy: "0.480491" }), jsx("feGaussianBlur", { stdDeviation: "0.480491" }), jsx("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" }), jsx("feBlend", { mode: "normal", in2: "shape", result: "effect2_innerShadow" })] }), jsxs("linearGradient", { id: "paint0_linear", x1: "57", y1: "0", x2: "57", y2: "114", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#130C3F" }), jsx("stop", { offset: "1", stopColor: "#15197B" })] }), jsxs("linearGradient", { id: "paint1_linear", x1: "0", y1: "57", x2: "114", y2: "57", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#AE73FA" }), jsx("stop", { offset: "1", stopColor: "#AE73FA", stopOpacity: "0" })] }), jsxs("linearGradient", { id: "paint2_linear", x1: "114", y1: "57", x2: "-1.66555e-06", y2: "57", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#AE73FA" }), jsx("stop", { offset: "1", stopColor: "#AE73FA", stopOpacity: "0" })] })] })] }));

package/dist/components/uikit-sdk/Svg/tokens/UNICHAIN.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const UNICHAIN = ({ width }) => {
     return (jsx("svg", { width: width || '30', height: width || '30', viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { children: [jsx("title", { children: "Layer 1" }), jsx("rect", { id: "svg_1", fill: "#f50db4", height: "64", width: "64" }), jsx("path", { id: "svg_2", fill: "white", d: "m52.00002,31.61947c-10.8407,0 -19.6195,-8.7876 -19.6195,-19.61945l-0.761,0l0,19.61945l-19.61954,0l0,0.7611c10.84074,0 19.61954,8.7876 19.61954,19.6194l0.761,0l0,-19.6194l19.6195,0l0,-0.7611z" })] }) }));

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

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const SwiperDots: ({ isActive, onClick }: {
     isActive: boolean;
     onClick?: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SwiperDots;

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

@@ -1,15 +1,9 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import Flex from '../Flex/index.js';
 
 const SwiperDots = ({ isActive, onClick }) => {
-    return (jsx(Flex, { sx: {
-            background: isActive ? 'abondGradient' : 'white4',
-            height: '14px',
-            width: '14px',
-            borderRadius: '50px',
-            margin: '0px 2.5px 0px 2.5px',
-            cursor: 'pointer',
-        }, onClick: onClick }));
+    return (jsx(Flex, { className: clsx('ape:h-[14px] ape:w-[14px] ape:rounded-[50px] ape:mx-[2.5px] ape:cursor-pointer', isActive ? 'ape:bg-[image:var(--ape-gradient-abond)]' : 'ape:bg-white4'), onClick: onClick }));
 };
 
 export { SwiperDots as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/SwiperDots/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../Flex'\n\nconst SwiperDots = ({ isActive, onClick }: { isActive: boolean; onClick?: () => void }) => {\n  return (\n    <Flex\n      sx={{\n        background: isActive ? 'abondGradient' : 'white4',\n        height: '14px',\n        width: '14px',\n        borderRadius: '50px',\n        margin: '0px 2.5px 0px 2.5px',\n        cursor: 'pointer',\n      }}\n      onClick={onClick}\n    />\n  )\n}\n\nexport default SwiperDots\n"],"names":["_jsx"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAA+C,KAAI;AACxF,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;YACF,UAAU,EAAE,QAAQ,GAAG,eAAe,GAAG,QAAQ;AACjD,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,YAAY,EAAE,MAAM;AACpB,YAAA,MAAM,EAAE,qBAAqB;AAC7B,YAAA,MAAM,EAAE,SAAS;AAClB,SAAA,EACD,OAAO,EAAE,OAAO,EAAA,CAChB;AAEN;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/SwiperDots/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport Flex from '../Flex'\n\nconst SwiperDots = ({ isActive, onClick }: { isActive: boolean; onClick?: () => void }) => {\n  return (\n    <Flex\n      className={clsx(\n        'ape:h-[14px] ape:w-[14px] ape:rounded-[50px] ape:mx-[2.5px] ape:cursor-pointer',\n        isActive ? 'ape:bg-[image:var(--ape-gradient-abond)]' : 'ape:bg-white4',\n      )}\n      onClick={onClick}\n    />\n  )\n}\n\nexport default SwiperDots\n"],"names":["_jsx"],"mappings":";;;;AAIA,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAA+C,KAAI;IACxF,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,IAAI,CACb,gFAAgF,EAChF,QAAQ,GAAG,0CAA0C,GAAG,eAAe,CACxE,EACD,OAAO,EAAE,OAAO,EAAA,CAChB;AAEN;;;;"}

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

@@ -1,41 +1,10 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import Flex from '../Flex/index.js';
 
 const TabNav = ({ tabOptions, activeTab, onChangeActiveTab }) => {
     const translateX = activeTab === tabOptions[0] ? '0%' : '100%';
-    return (jsxs(Flex, { sx: {
-            flexDirection: 'row',
-            width: '100%',
-            marginTop: '5px',
-            position: 'relative',
-            justifyContent: 'space-between',
-        }, children: [tabOptions.map((tab) => (jsx(Flex, { onClick: () => onChangeActiveTab && onChangeActiveTab(tab), sx: {
-                    flexDirection: 'column',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    cursor: 'pointer',
-                    fontWeight: activeTab === tab ? 700 : 500,
-                    color: activeTab === tab ? 'text' : 'textDisabled',
-                    transition: 'all 0.3s ease-out',
-                    width: '100%',
-                    my: '10px',
-                }, children: tab }, tab))), jsx(Flex, { sx: {
-                    position: 'absolute',
-                    width: '100%',
-                    bottom: 0,
-                    background: 'textDisabled',
-                    height: '3px',
-                    borderRadius: 'normal',
-                } }), jsx(Flex, { sx: {
-                    position: 'absolute',
-                    width: '50%', // 50% width
-                    bottom: 0,
-                    background: 'text', // Line color
-                    height: '3px',
-                    borderRadius: 'normal',
-                    transition: 'transform 0.3s ease-out', // Add smooth transition
-                    transform: `translateX(${translateX})`, // Dynamically move left/right
-                } })] }));
+    return (jsxs(Flex, { className: "ape:flex-row ape:w-full ape:mt-[5px] ape:relative ape:justify-between", children: [tabOptions.map((tab) => (jsx(Flex, { onClick: () => onChangeActiveTab && onChangeActiveTab(tab), className: clsx('ape:flex-col ape:justify-center ape:items-center ape:cursor-pointer ape:transition-all ape:duration-300 ape:ease-out ape:w-full ape:my-[10px]', activeTab === tab ? 'ape:font-bold ape:text-text' : 'ape:font-medium ape:text-text-disabled'), children: tab }, tab))), jsx(Flex, { className: "ape:absolute ape:w-full ape:bottom-0 ape:bg-text-disabled ape:h-[3px] ape:rounded-normal" }), jsx(Flex, { className: "ape:absolute ape:w-1/2 ape:bottom-0 ape:bg-text ape:h-[3px] ape:rounded-normal ape:transition-transform ape:duration-300 ape:ease-out", style: { transform: `translateX(${translateX})` } })] }));
 };
 
 export { TabNav as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/TabNav/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../Flex'\n\ninterface TabNavProps {\n  activeTab: string\n  tabOptions: string[]\n  onChangeActiveTab?: (tab: string) => void\n}\n\nconst TabNav: React.FC<TabNavProps> = ({ tabOptions, activeTab, onChangeActiveTab }) => {\n  const translateX = activeTab === tabOptions[0] ? '0%' : '100%'\n\n  return (\n    <Flex\n      sx={{\n        flexDirection: 'row',\n        width: '100%',\n        marginTop: '5px',\n        position: 'relative',\n        justifyContent: 'space-between',\n      }}\n    >\n      {tabOptions.map((tab) => (\n        <Flex\n          key={tab}\n          onClick={() => onChangeActiveTab && onChangeActiveTab(tab)}\n          sx={{\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center',\n            cursor: 'pointer',\n            fontWeight: activeTab === tab ? 700 : 500,\n            color: activeTab === tab ? 'text' : 'textDisabled',\n            transition: 'all 0.3s ease-out',\n            width: '100%',\n            my: '10px',\n          }}\n        >\n          {tab}\n        </Flex>\n      ))}\n      <Flex\n        sx={{\n          position: 'absolute',\n          width: '100%',\n          bottom: 0,\n          background: 'textDisabled',\n          height: '3px',\n          borderRadius: 'normal',\n        }}\n      ></Flex>\n      <Flex\n        sx={{\n          position: 'absolute',\n          width: '50%', // 50% width\n          bottom: 0,\n          background: 'text', // Line color\n          height: '3px',\n          borderRadius: 'normal',\n          transition: 'transform 0.3s ease-out', // Add smooth transition\n          transform: `translateX(${translateX})`, // Dynamically move left/right\n        }}\n      />\n    </Flex>\n  )\n}\n\nexport default TabNav\n"],"names":["_jsxs","_jsx"],"mappings":";;;AASA,MAAM,MAAM,GAA0B,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAI;AACrF,IAAA,MAAM,UAAU,GAAG,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,MAAM;AAE9D,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,SAAS,EAAE,KAAK;AAChB,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,cAAc,EAAE,eAAe;SAChC,EAAA,QAAA,EAAA,CAEA,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,MAClBC,GAAA,CAAC,IAAI,EAAA,EAEH,OAAO,EAAE,MAAM,iBAAiB,IAAI,iBAAiB,CAAC,GAAG,CAAC,EAC1D,EAAE,EAAE;AACF,oBAAA,aAAa,EAAE,QAAQ;AACvB,oBAAA,cAAc,EAAE,QAAQ;AACxB,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,MAAM,EAAE,SAAS;oBACjB,UAAU,EAAE,SAAS,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG;oBACzC,KAAK,EAAE,SAAS,KAAK,GAAG,GAAG,MAAM,GAAG,cAAc;AAClD,oBAAA,UAAU,EAAE,mBAAmB;AAC/B,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,EAAE,EAAE,MAAM;iBACX,EAAA,QAAA,EAEA,GAAG,EAAA,EAdC,GAAG,CAeH,CACR,CAAC,EACFA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,UAAU,EAAE,cAAc;AAC1B,oBAAA,MAAM,EAAE,KAAK;AACb,oBAAA,YAAY,EAAE,QAAQ;AACvB,iBAAA,EAAA,CACK,EACRA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,QAAQ,EAAE,UAAU;oBACpB,KAAK,EAAE,KAAK;AACZ,oBAAA,MAAM,EAAE,CAAC;oBACT,UAAU,EAAE,MAAM;AAClB,oBAAA,MAAM,EAAE,KAAK;AACb,oBAAA,YAAY,EAAE,QAAQ;oBACtB,UAAU,EAAE,yBAAyB;AACrC,oBAAA,SAAS,EAAE,CAAA,WAAA,EAAc,UAAU,CAAA,CAAA,CAAG;iBACvC,EAAA,CACD,CAAA,EAAA,CACG;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/TabNav/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport Flex from '../Flex'\n\ninterface TabNavProps {\n  activeTab: string\n  tabOptions: string[]\n  onChangeActiveTab?: (tab: string) => void\n}\n\nconst TabNav: React.FC<TabNavProps> = ({ tabOptions, activeTab, onChangeActiveTab }) => {\n  const translateX = activeTab === tabOptions[0] ? '0%' : '100%'\n\n  return (\n    <Flex className=\"ape:flex-row ape:w-full ape:mt-[5px] ape:relative ape:justify-between\">\n      {tabOptions.map((tab) => (\n        <Flex\n          key={tab}\n          onClick={() => onChangeActiveTab && onChangeActiveTab(tab)}\n          className={clsx(\n            'ape:flex-col ape:justify-center ape:items-center ape:cursor-pointer ape:transition-all ape:duration-300 ape:ease-out ape:w-full ape:my-[10px]',\n            activeTab === tab ? 'ape:font-bold ape:text-text' : 'ape:font-medium ape:text-text-disabled',\n          )}\n        >\n          {tab}\n        </Flex>\n      ))}\n      <Flex className=\"ape:absolute ape:w-full ape:bottom-0 ape:bg-text-disabled ape:h-[3px] ape:rounded-normal\" />\n      <Flex\n        className=\"ape:absolute ape:w-1/2 ape:bottom-0 ape:bg-text ape:h-[3px] ape:rounded-normal ape:transition-transform ape:duration-300 ape:ease-out\"\n        style={{ transform: `translateX(${translateX})` }}\n      />\n    </Flex>\n  )\n}\n\nexport default TabNav\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAUA,MAAM,MAAM,GAA0B,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAI;AACrF,IAAA,MAAM,UAAU,GAAG,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,MAAM;AAE9D,IAAA,QACEA,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,uEAAuE,EAAA,QAAA,EAAA,CACpF,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,MAClBC,GAAA,CAAC,IAAI,EAAA,EAEH,OAAO,EAAE,MAAM,iBAAiB,IAAI,iBAAiB,CAAC,GAAG,CAAC,EAC1D,SAAS,EAAE,IAAI,CACb,+IAA+I,EAC/I,SAAS,KAAK,GAAG,GAAG,6BAA6B,GAAG,wCAAwC,CAC7F,YAEA,GAAG,EAAA,EAPC,GAAG,CAQH,CACR,CAAC,EACFA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0FAA0F,EAAA,CAAG,EAC7GA,IAAC,IAAI,EAAA,EACH,SAAS,EAAC,uIAAuI,EACjJ,KAAK,EAAE,EAAE,SAAS,EAAE,cAAc,UAAU,CAAA,CAAA,CAAG,EAAE,EAAA,CACjD,CAAA,EAAA,CACG;AAEX;;;;"}

package/dist/components/uikit-sdk/Tag/ListTag.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import { MarketingCampaign } from '@ape.swap/apeswap-lists';
 declare const ListTag: ({ text, marketingCampaign }: {
     text?: string;
     marketingCampaign?: MarketingCampaign;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ListTag;

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 };