@ape.swap/bonds-sdk 6.2.16 → 6.2.18

package/README.md

@@ -85,20 +85,6 @@ const MyBondsComponent = () => {
       hotBondChains={[ChainId.BSC]}
       useTiers={true}
       useHotBonds={true}
-      theme={{
-        radii: '10px',
-        customFont: 'Poppins',
-        colors: {
-          primaryButton: '#6560C5',
-          white1: '#0E0D16',
-          white2: '#161420',
-          white3: '#1F1D29',
-          white4: '#282632',
-          white5: '#312F3A',
-          text: '#FAFAFA',
-          primaryBright: '#FFF',
-        },
-      }}
     />
   )
 }
@@ -118,7 +104,7 @@ The core of the SDK lies in its config object params, passed as a prop to its co
 | `chains`         | `number[]`                        | An array of supported chain IDs (e.g., `56`, `1`, `137`, etc). It also determines the order of the chains on the bond list.                                                         |
 | `connector`      | `'rainbowkit' 'appkit' 'default'` | Determines your preferred wallet-connector. If your connector is not listed here get in contact with the dev team to request the integration.                                       |
 | `useHotBonds`    | `boolean`                         | Whether to show the "hot bonds" component.                                                                                                                                          |
-| `theme`          | `Object (optional)`               | This is how you can customize the styles of the SDK. Override styles like colors, typography, and layout settings to match your project's branding.                                 |
+| `theme`          | `Object (optional, deprecated)`   | **Deprecated as of v7.** No longer applied at runtime — the SDK now ships build-time Tailwind styles. The prop is still accepted (and safely ignored, with a dev-only console warning) so existing integrations don't break, but it does nothing. See [Styling & Overrides](#styling--overrides) for the replacement approach. |
 | `hotBondsChains` | `number[]`                        | Determines the position of the hotbonds section. The component will be placed bellow the indicated chains.                                                                          |
 | `tokenSymbol`    | `string[]`                        | This parameter is specific to the `<SingleBond />` component. It defines the token(s) to display in the UI. Currently, only a single token (one element in the array) is supported. |
 | `customRPCS`     | `Partial<Record<ChainId, string[]>>` (optional) | Override the default public RPC URLs for any supported chain. Useful when you have a private or dedicated RPC endpoint. **Required for Solana** — no public RPC is available. See [Custom RPCs](#custom-rpcs) for usage. |
@@ -177,23 +163,43 @@ The list get updated constantly, so make sure to use latest version of the SDK.
 
 ---
 
-## Customizing Styles
+## Styling & Overrides
 
-The package comes with prebuilt styles that you must import in your project. Make sure to include the following CSS files:
+The package comes with prebuilt styles that you must import in your project. Make sure to include the following CSS file:
 
 ```javascript
 import '@ape.swap/bonds-sdk/dist/styles.css'
 ```
 
-These styles ensure that the components render correctly and include all necessary design details. You can customize or override styles using your own branding.
+These styles ensure that the components render correctly and include all necessary design details.
 
-You can test and visualize the different customization options on the SDK styling playground (beta):
+### How styling works (v7+)
+
+As of v7, the SDK is styled entirely at build time with [Tailwind CSS](https://tailwindcss.com/), scoped under an `ape:`-prefixed layer so it can never collide with a consumer app's own Tailwind setup or global styles. You do **not** need Tailwind in your own project to use the SDK — `dist/styles.css` ships fully compiled, plain CSS.
+
+This replaces the previous runtime `theme` prop (colors/radii/fonts passed in as a JS object), which is now deprecated and ignored — see the `theme` row in [Configuration](#configuration). If you were using `theme` to reskin the SDK, restyle via the override classnames below instead.
+
+### Overriding styles from your app
+
+Every SDK element that's a meaningful restyling target keeps a stable, plain (non-`ape:`-prefixed) `className` alongside its internal Tailwind classes, e.g. `className="bond-row ape:flex ape:..."`. Target these from your own app's CSS (with sufficient specificity, or `!important` where needed) to override the default look — they are considered part of the SDK's public styling API and are kept stable across releases. Some of the more commonly used ones:
+
+| Area | Classnames |
+|---|---|
+| Bonds list / rows | `bonds-container`, `bonds-filters`, `bonds-menu`, `bond-row` *(via `.bonds-cards`/row containers)*, `token-info-container`, `tokenname`, `bondname`, `bondicon` |
+| Buy modal | `modal-content`, `modaltable-container`, `bond-card-content`, `bond-card-title`, `bond-card-tooltip`, `action-button`, `discount-header` |
+| Your Bonds | `your-bonds`, `your-bonds-columns-container`, `your-bonds-content`, `your-bonds-content-title`, `your-bonds-content-tokens-amount`, `your-bonds-content-tokens-usd-amount`, `your-bonds-column-button`, `table-container`, `table-header-container` |
+| Tooltips & filters | `tooltip-bubble`, `tooltip-column`, `network-filter`, `search-container` |
+| Banners & layout | `full-bonds-view-container`, `banner-title`, `banner-subtitle`, `banner-actions`, `placeholder-monkey-wrapper`, `toggle-container` |
+
+This list isn't exhaustive — inspect the rendered DOM for any element you want to target; most structural containers carry a plain descriptive classname for exactly this purpose.
+
+You can preview the SDK's default look (and, in the pre-v7 styling playground, generate a `theme` object — kept for reference only, no longer functional) at:
 
 <https://sdk.ape.bond/>
 
-Once you are happy with the styles, make sure to copy the output styles object and paste it under the `theme` param on the SDK component you will be using.
+### Custom fonts
 
-To use a custom font in the theme, include the `customFont` property with the name of your desired font family. Please note that you will need to manually download the font and embed it in your project using a `<script>` or `<link>` tag in your HTML file.
+To use a custom font, download it and embed it in your project via a `<script>` or `<link>` tag in your HTML file, then set it as the default font stack for the elements you've overridden via CSS.
 
 Bear in mind, that the components of the SDK will use the width and height provided by the parent component, therefore, we recommend wrapping ApeBond SDK components with a div with the desired size.
 
@@ -207,8 +213,4 @@ For questions, issues, or contributions, reach out to [ApeBond](https://ape.bond
 
 ## License
 
-<<<<<<< Updated upstream
-This package is licensed under the MIT License
-=======
 This package is licensed under the MIT License.
->>>>>>> Stashed changes

package/dist/components/BondFilters/BondFilters.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import RecommendationSelector from '../MenuSelect/RecommendationSelector.js';
 import MenuSelect from '../MenuSelect/MenuSelect.js';
@@ -19,11 +19,11 @@ const BondFilters = ({ setChainFilterOption, chainFilterOption, filterOptions, f
         setChainFilterOption(['All Chains']);
         setFilterOption(newOption);
     }, [setChainFilterOption, setFilterOption]);
-    return (jsxs("div", { className: "bonds-filters", children: [jsx("div", { className: "desktop-rec-container", children: jsx(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) }), jsx("div", { className: "mobile-rec-container", children: jsx(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters }) }), jsx("div", { className: "network-filter", children: jsx(NetworkFilter, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption }) }), jsxs(Flex, { className: "clear-all-button", onClick: () => {
+    return (jsxs("div", { className: "bonds-filters ape:flex ape:w-full ape:justify-between ape:min-[1000px]:justify-end", children: [jsx("div", { className: "desktop-rec-container ape:justify-end ape:hidden ape:mr-[20px] ape:min-[1000px]:flex", children: jsx(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) }), jsx("div", { className: "mobile-rec-container ape:flex ape:w-[49%] ape:min-[1000px]:hidden", children: jsx(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters }) }), jsx("div", { className: "network-filter ape:flex ape:max-[1000px]:w-[49%]", children: jsx(NetworkFilter, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption }) }), jsxs(Flex, { className: "clear-all-button ape:rounded-normal ape:hidden ape:min-[1000px]:flex ape:items-center ape:w-[110px] ape:h-[34px] ape:text-text-disabled-button ape:text-[14px] ape:bg-white2 ape:p-[8px_16px] ape:justify-center ape:font-medium ape:ml-[15px] ape:leading-[13px] ape:cursor-pointer", onClick: () => {
                     setChainFilterOption(['All Chains']);
                     setFilterOption(asPath.includes('yourBonds') ? 'CLAIMABLE' : 'ALL');
                     onHandleQueryChange('');
-                }, sx: { borderRadius: 'normal' }, children: ["Clear All", jsx(Flex, { sx: { ml: '7px' }, children: jsx(IconButton, { icon: Close, color: "textDisabledButton", variant: "transparent" }) })] })] }));
+                }, children: ["Clear All", jsx(Flex, { className: "ape:ml-[7px]", children: jsx(IconButton, { icon: Close, color: "textDisabledButton", variant: "transparent" }) })] })] }));
 };
 
 export { BondFilters as default };

package/dist/components/BondFilters/BondFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"BondFilters.js","sources":["../../../src/components/BondFilters/BondFilters.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport RecommendationSelector from '../MenuSelect/RecommendationSelector'\nimport MenuSelect from '../MenuSelect/MenuSelect'\nimport NetworkFilter from '../NetworkFilter'\nimport Flex from '../uikit-sdk/Flex'\nimport IconButton from '../uikit-sdk/Button/IconButton'\nimport Close from '../uikit-sdk/Svg/Icons/Close'\n\ninterface BondMenuProps {\n  setChainFilterOption: (newValue: string[]) => void\n  chainFilterOption: string[]\n  filterOptions: string[]\n  filterOption: string\n  setFilterOption: (newOption: string) => void\n  onHandleQueryChange: (value: string) => void\n}\n\nconst BondFilters: React.FC<BondMenuProps> = ({\n  setChainFilterOption,\n  chainFilterOption,\n  filterOptions,\n  filterOption,\n  setFilterOption,\n  onHandleQueryChange,\n}) => {\n  const mappedFilters = filterOptions.map((filter) => {\n    return {\n      label: filter.charAt(0).toUpperCase() + filter.slice(1).toLowerCase(),\n      value: filter,\n    }\n  })\n\n  const asPath = typeof window !== 'undefined' ? window.location.pathname + window.location.search : ''\n\n  const handleFilterSelection = useCallback(\n    (newOption: string) => {\n      setChainFilterOption(['All Chains'])\n      setFilterOption(newOption)\n    },\n    [setChainFilterOption, setFilterOption],\n  )\n\n  return (\n    <div className=\"bonds-filters\">\n      <div className=\"desktop-rec-container\">\n        {/* DESKTOP FILTER BUTTONS */}\n        <RecommendationSelector\n          options={filterOptions}\n          activeOption={filterOption}\n          setActiveOption={handleFilterSelection}\n        />\n      </div>\n      <div className=\"mobile-rec-container\">\n        {/* MOBILE FILTER DROPDOWN */}\n        <MenuSelect selectedOption={filterOption} setOption={setFilterOption} options={mappedFilters} />\n      </div>\n      <div className=\"network-filter\">\n        <NetworkFilter chainFilterOption={chainFilterOption} setChainFilterOption={setChainFilterOption} />\n      </div>\n      <Flex\n        className=\"clear-all-button\"\n        onClick={() => {\n          setChainFilterOption(['All Chains'])\n          setFilterOption(asPath.includes('yourBonds') ? 'CLAIMABLE' : 'ALL')\n          onHandleQueryChange('')\n        }}\n        sx={{ borderRadius: 'normal' }}\n      >\n        Clear All\n        <Flex sx={{ ml: '7px' }}>\n          <IconButton icon={Close} color=\"textDisabledButton\" variant=\"transparent\" />\n        </Flex>\n      </Flex>\n    </div>\n  )\n}\n\nexport default BondFilters\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAiBA,MAAM,WAAW,GAA4B,CAAC,EAC5C,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,mBAAmB,GACpB,KAAI;IACH,MAAM,aAAa,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;QACjD,OAAO;AACL,YAAA,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;AACrE,YAAA,KAAK,EAAE,MAAM;SACd;AACH,IAAA,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,EAAE;AAErG,IAAA,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,SAAiB,KAAI;AACpB,QAAA,oBAAoB,CAAC,CAAC,YAAY,CAAC,CAAC;QACpC,eAAe,CAAC,SAAS,CAAC;AAC5B,IAAA,CAAC,EACD,CAAC,oBAAoB,EAAE,eAAe,CAAC,CACxC;AAED,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,aAC5BC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uBAAuB,YAEpCA,GAAA,CAAC,sBAAsB,EAAA,EACrB,OAAO,EAAE,aAAa,EACtB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,qBAAqB,GACtC,EAAA,CACE,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAEnCA,IAAC,UAAU,EAAA,EAAC,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,aAAa,EAAA,CAAI,EAAA,CAC5F,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAC7BA,GAAA,CAAC,aAAa,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,oBAAoB,EAAA,CAAI,GAC/F,EACND,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,kBAAkB,EAC5B,OAAO,EAAE,MAAK;AACZ,oBAAA,oBAAoB,CAAC,CAAC,YAAY,CAAC,CAAC;AACpC,oBAAA,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,WAAW,GAAG,KAAK,CAAC;oBACnE,mBAAmB,CAAC,EAAE,CAAC;AACzB,gBAAA,CAAC,EACD,EAAE,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CAAA,WAAA,EAG9BC,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EACrBA,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAC,aAAa,EAAA,CAAG,GACvE,CAAA,EAAA,CACF,CAAA,EAAA,CACH;AAEV;;;;"}
+{"version":3,"file":"BondFilters.js","sources":["../../../src/components/BondFilters/BondFilters.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport RecommendationSelector from '../MenuSelect/RecommendationSelector'\nimport MenuSelect from '../MenuSelect/MenuSelect'\nimport NetworkFilter from '../NetworkFilter'\nimport Flex from '../uikit-sdk/Flex'\nimport IconButton from '../uikit-sdk/Button/IconButton'\nimport Close from '../uikit-sdk/Svg/Icons/Close'\n\ninterface BondMenuProps {\n  setChainFilterOption: (newValue: string[]) => void\n  chainFilterOption: string[]\n  filterOptions: string[]\n  filterOption: string\n  setFilterOption: (newOption: string) => void\n  onHandleQueryChange: (value: string) => void\n}\n\nconst BondFilters: React.FC<BondMenuProps> = ({\n  setChainFilterOption,\n  chainFilterOption,\n  filterOptions,\n  filterOption,\n  setFilterOption,\n  onHandleQueryChange,\n}) => {\n  const mappedFilters = filterOptions.map((filter) => {\n    return {\n      label: filter.charAt(0).toUpperCase() + filter.slice(1).toLowerCase(),\n      value: filter,\n    }\n  })\n\n  const asPath = typeof window !== 'undefined' ? window.location.pathname + window.location.search : ''\n\n  const handleFilterSelection = useCallback(\n    (newOption: string) => {\n      setChainFilterOption(['All Chains'])\n      setFilterOption(newOption)\n    },\n    [setChainFilterOption, setFilterOption],\n  )\n\n  return (\n    <div className=\"bonds-filters ape:flex ape:w-full ape:justify-between ape:min-[1000px]:justify-end\">\n      <div className=\"desktop-rec-container ape:justify-end ape:hidden ape:mr-[20px] ape:min-[1000px]:flex\">\n        {/* DESKTOP FILTER BUTTONS */}\n        <RecommendationSelector\n          options={filterOptions}\n          activeOption={filterOption}\n          setActiveOption={handleFilterSelection}\n        />\n      </div>\n      <div className=\"mobile-rec-container ape:flex ape:w-[49%] ape:min-[1000px]:hidden\">\n        {/* MOBILE FILTER DROPDOWN */}\n        <MenuSelect selectedOption={filterOption} setOption={setFilterOption} options={mappedFilters} />\n      </div>\n      <div className=\"network-filter ape:flex ape:max-[1000px]:w-[49%]\">\n        <NetworkFilter chainFilterOption={chainFilterOption} setChainFilterOption={setChainFilterOption} />\n      </div>\n      <Flex\n        className=\"clear-all-button ape:rounded-normal ape:hidden ape:min-[1000px]:flex ape:items-center ape:w-[110px] ape:h-[34px] ape:text-text-disabled-button ape:text-[14px] ape:bg-white2 ape:p-[8px_16px] ape:justify-center ape:font-medium ape:ml-[15px] ape:leading-[13px] ape:cursor-pointer\"\n        onClick={() => {\n          setChainFilterOption(['All Chains'])\n          setFilterOption(asPath.includes('yourBonds') ? 'CLAIMABLE' : 'ALL')\n          onHandleQueryChange('')\n        }}\n      >\n        Clear All\n        <Flex className=\"ape:ml-[7px]\">\n          <IconButton icon={Close} color=\"textDisabledButton\" variant=\"transparent\" />\n        </Flex>\n      </Flex>\n    </div>\n  )\n}\n\nexport default BondFilters\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAiBA,MAAM,WAAW,GAA4B,CAAC,EAC5C,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,mBAAmB,GACpB,KAAI;IACH,MAAM,aAAa,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;QACjD,OAAO;AACL,YAAA,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;AACrE,YAAA,KAAK,EAAE,MAAM;SACd;AACH,IAAA,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,EAAE;AAErG,IAAA,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,SAAiB,KAAI;AACpB,QAAA,oBAAoB,CAAC,CAAC,YAAY,CAAC,CAAC;QACpC,eAAe,CAAC,SAAS,CAAC;AAC5B,IAAA,CAAC,EACD,CAAC,oBAAoB,EAAE,eAAe,CAAC,CACxC;AAED,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oFAAoF,aACjGC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sFAAsF,YAEnGA,GAAA,CAAC,sBAAsB,EAAA,EACrB,OAAO,EAAE,aAAa,EACtB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,qBAAqB,GACtC,EAAA,CACE,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mEAAmE,EAAA,QAAA,EAEhFA,IAAC,UAAU,EAAA,EAAC,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,aAAa,EAAA,CAAI,EAAA,CAC5F,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAC/DA,GAAA,CAAC,aAAa,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,oBAAoB,EAAA,CAAI,GAC/F,EACND,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,sRAAsR,EAChS,OAAO,EAAE,MAAK;AACZ,oBAAA,oBAAoB,CAAC,CAAC,YAAY,CAAC,CAAC;AACpC,oBAAA,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,WAAW,GAAG,KAAK,CAAC;oBACnE,mBAAmB,CAAC,EAAE,CAAC;gBACzB,CAAC,EAAA,QAAA,EAAA,CAAA,WAAA,EAGDC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAC5BA,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAC,aAAa,EAAA,CAAG,EAAA,CACvE,CAAA,EAAA,CACF,CAAA,EAAA,CACH;AAEV;;;;"}

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

@@ -4,5 +4,5 @@ interface CarouselProps {
     showDots?: boolean;
     autoPlay?: number;
 }
-declare const Carousel: ({ slides, showDots, autoPlay }: CarouselProps) => React.JSX.Element;
+declare const Carousel: ({ slides, showDots, autoPlay }: CarouselProps) => import("react/jsx-runtime").JSX.Element;
 export default Carousel;

package/dist/components/Carousel/index.js

@@ -1,7 +1,5 @@
-import { jsx, Fragment, jsxs } from 'theme-ui/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
-import { Flex as Flex$1 } from 'theme-ui';
-import { styles } from './styles.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import SwiperDots from '../uikit-sdk/SwiperDots/index.js';
 
@@ -132,8 +130,7 @@ const Carousel = ({ slides, showDots = true, autoPlay }) => {
     if (slides.length <= 1) {
         return jsx(Fragment, { children: slides[0] });
     }
-    return (jsxs(Flex, { sx: styles.container, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsx(Flex$1, { ref: viewportRef, sx: {
-                    ...styles.viewport,
+    return (jsxs(Flex, { className: "ape:flex-col ape:items-center ape:w-full", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsx("div", { ref: viewportRef, className: "ape-carousel-viewport ape:flex ape:w-full ape:overflow-x-auto ape:overflow-y-hidden ape:select-none", style: {
                     cursor: isDragging ? 'grabbing' : 'grab',
                     // Mandatory scroll-snap otherwise fights a programmatic scrollLeft mutation
                     // (see handlePointerMove) and yanks it straight back to the last snap point.
@@ -141,8 +138,8 @@ const Carousel = ({ slides, showDots = true, autoPlay }) => {
                     transform: overscroll ? `translateX(${overscroll}px)` : undefined,
                     transition: isDragging ? 'none' : 'transform 0.3s ease',
                 }, onScroll: handleScroll, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: endMouseDrag, onPointerCancel: endMouseDrag, onPointerLeave: endMouseDrag, onDragStart: (event) => event.preventDefault(), children: slides.map((slide, index) => {
-                    return (jsx(Flex, { sx: styles.slide, children: slide }, index));
-                }) }), showDots && (jsx(Flex, { sx: styles.dotsContainer, children: slides.map((_, i) => {
+                    return (jsx(Flex, { className: "ape:[flex:0_0_100%] ape:w-full ape:snap-center ape:p-px ape:h-fit ape:justify-center", children: slide }, index));
+                }) }), showDots && (jsx(Flex, { className: "ape:mt-[20px] ape:justify-center ape:items-center", children: slides.map((_, i) => {
                     return jsx(SwiperDots, { isActive: i === activeSlide, onClick: () => slideTo(i) }, i);
                 }) }))] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Carousel/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport { Flex as ThemeUIFlex } from 'theme-ui'\nimport { styles } from './styles'\nimport Flex from '../uikit-sdk/Flex'\nimport SwiperDots from '../uikit-sdk/SwiperDots'\n\n// Minimum movement (px) before a mouse-down is treated as a drag rather than a click\nconst DRAG_TOLERANCE = 5\n// Minimum net drag distance (px) before a mouse release advances to the next/previous slide\nconst DRAG_THRESHOLD = 40\n// How much of an out-of-bounds drag actually shows up on screen, and the cap for it (px) —\n// gives the \"rubber band\" resistance that hints the carousel is draggable at its edges.\nconst OVERSCROLL_RESISTANCE = 0.35\nconst MAX_OVERSCROLL = 70\n\ninterface CarouselProps {\n  slides: React.ReactNode[]\n  showDots?: boolean\n  // Seconds between automatic slide advances. Omit/0 to disable.\n  autoPlay?: number\n}\n\nconst Carousel = ({ slides, showDots = true, autoPlay }: CarouselProps) => {\n  const viewportRef = useRef<HTMLDivElement>(null)\n  const [activeSlide, setActiveSlide] = useState(0)\n  const [isDragging, setIsDragging] = useState(false)\n  const [isHovered, setIsHovered] = useState(false)\n  const [overscroll, setOverscroll] = useState(0)\n\n  const isMouseDragging = useRef(false)\n  const activePointerId = useRef<number | null>(null)\n  const dragStartX = useRef(0)\n  const dragStartScrollLeft = useRef(0)\n\n  const slideTo = (index: number) => {\n    const viewport = viewportRef.current\n    if (!viewport) return\n    const clamped = Math.min(Math.max(index, 0), slides.length - 1)\n    viewport.scrollTo({ left: clamped * viewport.clientWidth, behavior: 'smooth' })\n  }\n\n  // Native scrolling (touch swipe, trackpad, or the mouse-drag below) is the only source of\n  // truth for position; this just keeps the dots in sync with wherever the viewport lands.\n  const handleScroll = () => {\n    const viewport = viewportRef.current\n    if (!viewport || viewport.clientWidth === 0) return\n    const index = Math.round(viewport.scrollLeft / viewport.clientWidth)\n    setActiveSlide((current) => (current === index ? current : index))\n  }\n\n  // Pauses while the user is dragging or hovering, and restarts its countdown from whatever\n  // slide is currently active — so a manual dot click or drag gets a full autoPlay window too.\n  useEffect(() => {\n    if (!autoPlay || autoPlay <= 0 || slides.length <= 1 || isDragging || isHovered) return\n    const timeoutId = setTimeout(() => {\n      slideTo((activeSlide + 1) % slides.length)\n    }, autoPlay * 1000)\n    return () => clearTimeout(timeoutId)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [autoPlay, isDragging, isHovered, activeSlide, slides.length])\n\n  // Desktop click-and-drag only. Touch is deliberately left to the browser's native scroll-snap\n  // (see the `viewport` styles) rather than driven from JS: iOS Safari/Chrome (both WebKit) have\n  // long-standing bugs where a touch drag captured via setPointerCapture can lose its terminating\n  // pointerup/pointercancel mid-gesture, leaving the carousel stuck partway through a transition.\n  // Native scrolling never has that failure mode, and mouse pointers aren't affected by the bug.\n  //\n  // Pointer capture is only claimed once real dragging is detected (see handlePointerMove), so a\n  // plain click on a link/button inside a slide never gets hijacked into a drag.\n  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    if (slides.length <= 1 || event.pointerType !== 'mouse' || event.button !== 0) return\n    activePointerId.current = event.pointerId\n    dragStartX.current = event.clientX\n  }\n\n  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {\n    if (activePointerId.current !== event.pointerId) return\n    const viewport = viewportRef.current\n    if (!viewport) return\n    const delta = event.clientX - dragStartX.current\n    if (!isMouseDragging.current) {\n      if (Math.abs(delta) < DRAG_TOLERANCE) return\n      isMouseDragging.current = true\n      dragStartScrollLeft.current = viewport.scrollLeft\n      viewport.setPointerCapture(event.pointerId)\n      setIsDragging(true)\n    }\n    // scrollLeft can't natively go out of bounds, so the excess past either edge is tracked\n    // separately and rendered as a damped transform — the \"rubber band\" that shows the first/last\n    // slide can still be dragged, then springs back once released (see endMouseDrag).\n    const maxScrollLeft = viewport.scrollWidth - viewport.clientWidth\n    const rawTarget = dragStartScrollLeft.current - delta\n    let clampedScrollLeft = rawTarget\n    let rawOverscroll = 0\n    if (rawTarget < 0) {\n      rawOverscroll = rawTarget\n      clampedScrollLeft = 0\n    } else if (rawTarget > maxScrollLeft) {\n      rawOverscroll = rawTarget - maxScrollLeft\n      clampedScrollLeft = maxScrollLeft\n    }\n    viewport.scrollLeft = clampedScrollLeft\n    // Negated: scrollLeft and visual position move opposite each other (lower scrollLeft\n    // shifts content right), so the transform has to flip sign to keep following the drag.\n    const visualOverscroll = -rawOverscroll * OVERSCROLL_RESISTANCE\n    setOverscroll(Math.max(-MAX_OVERSCROLL, Math.min(MAX_OVERSCROLL, visualOverscroll)))\n  }\n\n  const endMouseDrag = (event: React.PointerEvent<HTMLDivElement>) => {\n    if (activePointerId.current !== event.pointerId) return\n    activePointerId.current = null\n    const viewport = viewportRef.current\n    if (viewport?.hasPointerCapture(event.pointerId)) {\n      viewport.releasePointerCapture(event.pointerId)\n    }\n    if (!isMouseDragging.current) return\n    isMouseDragging.current = false\n    setIsDragging(false)\n    setOverscroll(0)\n    if (!viewport) return\n    // A fixed pixel threshold (rather than \"past the halfway point\") so a normal quick\n    // swipe advances the slide, matching the feel of the previous transform-based drag.\n    const netDelta = viewport.scrollLeft - dragStartScrollLeft.current\n    const startIndex = Math.round(dragStartScrollLeft.current / viewport.clientWidth)\n    if (netDelta > DRAG_THRESHOLD) {\n      slideTo(startIndex + 1)\n    } else if (netDelta < -DRAG_THRESHOLD) {\n      slideTo(startIndex - 1)\n    } else {\n      slideTo(startIndex)\n    }\n  }\n\n  if (slides.length <= 1) {\n    return <>{slides[0]}</>\n  }\n\n  return (\n    <Flex sx={styles.container} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>\n      <ThemeUIFlex\n        ref={viewportRef}\n        sx={\n          {\n            ...styles.viewport,\n            cursor: isDragging ? 'grabbing' : 'grab',\n            // Mandatory scroll-snap otherwise fights a programmatic scrollLeft mutation\n            // (see handlePointerMove) and yanks it straight back to the last snap point.\n            scrollSnapType: isDragging ? 'none' : 'x mandatory',\n            transform: overscroll ? `translateX(${overscroll}px)` : undefined,\n            transition: isDragging ? 'none' : 'transform 0.3s ease',\n          } as any\n        }\n        onScroll={handleScroll}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={endMouseDrag}\n        onPointerCancel={endMouseDrag}\n        onPointerLeave={endMouseDrag}\n        onDragStart={(event: React.DragEvent<HTMLDivElement>) => event.preventDefault()}\n      >\n        {slides.map((slide, index) => {\n          return (\n            <Flex sx={styles.slide} key={index}>\n              {slide}\n            </Flex>\n          )\n        })}\n      </ThemeUIFlex>\n      {showDots && (\n        <Flex sx={styles.dotsContainer}>\n          {slides.map((_, i) => {\n            return <SwiperDots isActive={i === activeSlide} onClick={() => slideTo(i)} key={i} />\n          })}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default Carousel\n"],"names":["_jsx","_jsxs","ThemeUIFlex"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Carousel/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport SwiperDots from '../uikit-sdk/SwiperDots'\n\n// Minimum movement (px) before a mouse-down is treated as a drag rather than a click\nconst DRAG_TOLERANCE = 5\n// Minimum net drag distance (px) before a mouse release advances to the next/previous slide\nconst DRAG_THRESHOLD = 40\n// How much of an out-of-bounds drag actually shows up on screen, and the cap for it (px) —\n// gives the \"rubber band\" resistance that hints the carousel is draggable at its edges.\nconst OVERSCROLL_RESISTANCE = 0.35\nconst MAX_OVERSCROLL = 70\n\ninterface CarouselProps {\n  slides: React.ReactNode[]\n  showDots?: boolean\n  // Seconds between automatic slide advances. Omit/0 to disable.\n  autoPlay?: number\n}\n\nconst Carousel = ({ slides, showDots = true, autoPlay }: CarouselProps) => {\n  const viewportRef = useRef<HTMLDivElement>(null)\n  const [activeSlide, setActiveSlide] = useState(0)\n  const [isDragging, setIsDragging] = useState(false)\n  const [isHovered, setIsHovered] = useState(false)\n  const [overscroll, setOverscroll] = useState(0)\n\n  const isMouseDragging = useRef(false)\n  const activePointerId = useRef<number | null>(null)\n  const dragStartX = useRef(0)\n  const dragStartScrollLeft = useRef(0)\n\n  const slideTo = (index: number) => {\n    const viewport = viewportRef.current\n    if (!viewport) return\n    const clamped = Math.min(Math.max(index, 0), slides.length - 1)\n    viewport.scrollTo({ left: clamped * viewport.clientWidth, behavior: 'smooth' })\n  }\n\n  // Native scrolling (touch swipe, trackpad, or the mouse-drag below) is the only source of\n  // truth for position; this just keeps the dots in sync with wherever the viewport lands.\n  const handleScroll = () => {\n    const viewport = viewportRef.current\n    if (!viewport || viewport.clientWidth === 0) return\n    const index = Math.round(viewport.scrollLeft / viewport.clientWidth)\n    setActiveSlide((current) => (current === index ? current : index))\n  }\n\n  // Pauses while the user is dragging or hovering, and restarts its countdown from whatever\n  // slide is currently active — so a manual dot click or drag gets a full autoPlay window too.\n  useEffect(() => {\n    if (!autoPlay || autoPlay <= 0 || slides.length <= 1 || isDragging || isHovered) return\n    const timeoutId = setTimeout(() => {\n      slideTo((activeSlide + 1) % slides.length)\n    }, autoPlay * 1000)\n    return () => clearTimeout(timeoutId)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [autoPlay, isDragging, isHovered, activeSlide, slides.length])\n\n  // Desktop click-and-drag only. Touch is deliberately left to the browser's native scroll-snap\n  // (see the `viewport` styles) rather than driven from JS: iOS Safari/Chrome (both WebKit) have\n  // long-standing bugs where a touch drag captured via setPointerCapture can lose its terminating\n  // pointerup/pointercancel mid-gesture, leaving the carousel stuck partway through a transition.\n  // Native scrolling never has that failure mode, and mouse pointers aren't affected by the bug.\n  //\n  // Pointer capture is only claimed once real dragging is detected (see handlePointerMove), so a\n  // plain click on a link/button inside a slide never gets hijacked into a drag.\n  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    if (slides.length <= 1 || event.pointerType !== 'mouse' || event.button !== 0) return\n    activePointerId.current = event.pointerId\n    dragStartX.current = event.clientX\n  }\n\n  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {\n    if (activePointerId.current !== event.pointerId) return\n    const viewport = viewportRef.current\n    if (!viewport) return\n    const delta = event.clientX - dragStartX.current\n    if (!isMouseDragging.current) {\n      if (Math.abs(delta) < DRAG_TOLERANCE) return\n      isMouseDragging.current = true\n      dragStartScrollLeft.current = viewport.scrollLeft\n      viewport.setPointerCapture(event.pointerId)\n      setIsDragging(true)\n    }\n    // scrollLeft can't natively go out of bounds, so the excess past either edge is tracked\n    // separately and rendered as a damped transform — the \"rubber band\" that shows the first/last\n    // slide can still be dragged, then springs back once released (see endMouseDrag).\n    const maxScrollLeft = viewport.scrollWidth - viewport.clientWidth\n    const rawTarget = dragStartScrollLeft.current - delta\n    let clampedScrollLeft = rawTarget\n    let rawOverscroll = 0\n    if (rawTarget < 0) {\n      rawOverscroll = rawTarget\n      clampedScrollLeft = 0\n    } else if (rawTarget > maxScrollLeft) {\n      rawOverscroll = rawTarget - maxScrollLeft\n      clampedScrollLeft = maxScrollLeft\n    }\n    viewport.scrollLeft = clampedScrollLeft\n    // Negated: scrollLeft and visual position move opposite each other (lower scrollLeft\n    // shifts content right), so the transform has to flip sign to keep following the drag.\n    const visualOverscroll = -rawOverscroll * OVERSCROLL_RESISTANCE\n    setOverscroll(Math.max(-MAX_OVERSCROLL, Math.min(MAX_OVERSCROLL, visualOverscroll)))\n  }\n\n  const endMouseDrag = (event: React.PointerEvent<HTMLDivElement>) => {\n    if (activePointerId.current !== event.pointerId) return\n    activePointerId.current = null\n    const viewport = viewportRef.current\n    if (viewport?.hasPointerCapture(event.pointerId)) {\n      viewport.releasePointerCapture(event.pointerId)\n    }\n    if (!isMouseDragging.current) return\n    isMouseDragging.current = false\n    setIsDragging(false)\n    setOverscroll(0)\n    if (!viewport) return\n    // A fixed pixel threshold (rather than \"past the halfway point\") so a normal quick\n    // swipe advances the slide, matching the feel of the previous transform-based drag.\n    const netDelta = viewport.scrollLeft - dragStartScrollLeft.current\n    const startIndex = Math.round(dragStartScrollLeft.current / viewport.clientWidth)\n    if (netDelta > DRAG_THRESHOLD) {\n      slideTo(startIndex + 1)\n    } else if (netDelta < -DRAG_THRESHOLD) {\n      slideTo(startIndex - 1)\n    } else {\n      slideTo(startIndex)\n    }\n  }\n\n  if (slides.length <= 1) {\n    return <>{slides[0]}</>\n  }\n\n  return (\n    <Flex\n      className=\"ape:flex-col ape:items-center ape:w-full\"\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <div\n        ref={viewportRef}\n        className=\"ape-carousel-viewport ape:flex ape:w-full ape:overflow-x-auto ape:overflow-y-hidden ape:select-none\"\n        style={{\n          cursor: isDragging ? 'grabbing' : 'grab',\n          // Mandatory scroll-snap otherwise fights a programmatic scrollLeft mutation\n          // (see handlePointerMove) and yanks it straight back to the last snap point.\n          scrollSnapType: isDragging ? 'none' : 'x mandatory',\n          transform: overscroll ? `translateX(${overscroll}px)` : undefined,\n          transition: isDragging ? 'none' : 'transform 0.3s ease',\n        }}\n        onScroll={handleScroll}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={endMouseDrag}\n        onPointerCancel={endMouseDrag}\n        onPointerLeave={endMouseDrag}\n        onDragStart={(event: React.DragEvent<HTMLDivElement>) => event.preventDefault()}\n      >\n        {slides.map((slide, index) => {\n          return (\n            <Flex className=\"ape:[flex:0_0_100%] ape:w-full ape:snap-center ape:p-px ape:h-fit ape:justify-center\" key={index}>\n              {slide}\n            </Flex>\n          )\n        })}\n      </div>\n      {showDots && (\n        <Flex className=\"ape:mt-[20px] ape:justify-center ape:items-center\">\n          {slides.map((_, i) => {\n            return <SwiperDots isActive={i === activeSlide} onClick={() => slideTo(i)} key={i} />\n          })}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default Carousel\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/ChainOptionList/ChainOptionsButtons.d.ts

@@ -4,5 +4,5 @@ declare const ChainOptionsButtons: ({ selectedChain, setSelectedChain, setViewAl
     setSelectedChain: (chain: ChainId) => void;
     setViewAllChains: (viewAllChains: boolean) => void;
     chainList: ChainId[];
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ChainOptionsButtons;

package/dist/components/ChainOptionList/ChainOptionsButtons.js

@@ -1,23 +1,20 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
-import { styles } from './styles.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import { formatChainList } from './constants.js';
 import { NETWORK_ICONS } from '../../config/constants/chains.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Text from '../uikit-sdk/Text/index.js';
 import Question from '../uikit-sdk/Svg/Icons/Question.js';
 
+const chainOptionButtonClasses = 'ape:w-[40px] ape:h-[40px] ape:rounded-normal ape:bg-white3 ape:justify-center ape:items-center ape:hover:cursor-pointer ape:hover:bg-white4';
 const ChainOptionsButtons = ({ selectedChain, setSelectedChain, setViewAllChains, chainList, }) => {
-    return (jsxs(Flex, { sx: { position: 'relative', mb: '10px' }, children: [formatChainList(chainList)
+    return (jsxs(Flex, { className: "ape:relative ape:mb-[10px]", children: [formatChainList(chainList)
                 .sort((chainInfo) => (chainInfo.chain === selectedChain ? -1 : 1))
                 .slice(0, 7)
                 .map((chainInfo) => {
                 const ChainIcon = NETWORK_ICONS[chainInfo.chain] ?? Question;
-                return (jsx(Flex, { sx: {
-                        ...styles.chainOptionButton,
-                        border: selectedChain === chainInfo.chain && 'primaryButton',
-                        mr: '10px',
-                    }, onClick: () => setSelectedChain(chainInfo.chain), children: jsx(Flex, { sx: { overflow: 'hidden', borderRadius: '50px' }, children: jsx(ChainIcon, { width: "25px" }) }) }, chainInfo.name));
-            }), chainList.length > 7 && (jsx(Flex, { sx: styles.chainOptionButton, onClick: () => setViewAllChains(true), children: jsxs(Text, { children: [chainList.length - 7, "+"] }) }))] }));
+                return (jsx(Flex, { className: clsx(chainOptionButtonClasses, 'ape:mr-[10px]'), onClick: () => setSelectedChain(chainInfo.chain), children: jsx(Flex, { className: "ape:overflow-hidden ape:rounded-[50px]", children: jsx(ChainIcon, { width: "25px" }) }) }, chainInfo.name));
+            }), chainList.length > 7 && (jsx(Flex, { className: chainOptionButtonClasses, onClick: () => setViewAllChains(true), children: jsxs(Text, { children: [chainList.length - 7, "+"] }) }))] }));
 };
 
 export { ChainOptionsButtons as default };

package/dist/components/ChainOptionList/ChainOptionsButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChainOptionsButtons.js","sources":["../../../src/components/ChainOptionList/ChainOptionsButtons.tsx"],"sourcesContent":["// Components\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { styles } from './styles'\nimport { formatChainList } from './constants'\nimport { NETWORK_ICONS } from '../../config/constants/chains'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport Question from '../uikit-sdk/Svg/Icons/Question'\n\nconst ChainOptionsButtons = ({\n  selectedChain,\n  setSelectedChain,\n  setViewAllChains,\n  chainList,\n}: {\n  selectedChain?: number\n  setSelectedChain: (chain: ChainId) => void\n  setViewAllChains: (viewAllChains: boolean) => void\n  chainList: ChainId[]\n}) => {\n  return (\n    <Flex sx={{ position: 'relative', mb: '10px' }}>\n      {formatChainList(chainList)\n        .sort((chainInfo) => (chainInfo.chain === selectedChain ? -1 : 1))\n        .slice(0, 7)\n        .map((chainInfo) => {\n          const ChainIcon = NETWORK_ICONS[chainInfo.chain] ?? Question\n          return (\n            <Flex\n              sx={{\n                ...styles.chainOptionButton,\n                border: selectedChain === chainInfo.chain && 'primaryButton',\n                mr: '10px',\n              }}\n              onClick={() => setSelectedChain(chainInfo.chain)}\n              key={chainInfo.name}\n            >\n              <Flex sx={{ overflow: 'hidden', borderRadius: '50px' }}>\n                <ChainIcon width=\"25px\" />\n              </Flex>\n            </Flex>\n          )\n        })}\n      {chainList.length > 7 && (\n        <Flex sx={styles.chainOptionButton} onClick={() => setViewAllChains(true)}>\n          <Text>{chainList.length - 7}+</Text>\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default ChainOptionsButtons\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AASA,MAAM,mBAAmB,GAAG,CAAC,EAC3B,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,GAMV,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,aAC3C,eAAe,CAAC,SAAS;iBACvB,IAAI,CAAC,CAAC,SAAS,MAAM,SAAS,CAAC,KAAK,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,CAAC;AAChE,iBAAA,KAAK,CAAC,CAAC,EAAE,CAAC;AACV,iBAAA,GAAG,CAAC,CAAC,SAAS,KAAI;gBACjB,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,QAAQ;AAC5D,gBAAA,QACEC,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;wBACF,GAAG,MAAM,CAAC,iBAAiB;AAC3B,wBAAA,MAAM,EAAE,aAAa,KAAK,SAAS,CAAC,KAAK,IAAI,eAAe;AAC5D,wBAAA,EAAE,EAAE,MAAM;AACX,qBAAA,EACD,OAAO,EAAE,MAAM,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,YAGhDA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,EAAA,QAAA,EACpDA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAC,MAAM,EAAA,CAAG,GACrB,EAAA,EAJF,SAAS,CAAC,IAAI,CAKd;AAEX,YAAA,CAAC,CAAC,EACH,SAAS,CAAC,MAAM,GAAG,CAAC,KACnBA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,iBAAiB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC,IAAI,CAAC,EAAA,QAAA,EACvED,KAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CAAE,SAAS,CAAC,MAAM,GAAG,CAAC,EAAA,GAAA,CAAA,EAAA,CAAS,GAC/B,CACR,CAAA,EAAA,CACI;AAEX;;;;"}
+{"version":3,"file":"ChainOptionsButtons.js","sources":["../../../src/components/ChainOptionList/ChainOptionsButtons.tsx"],"sourcesContent":["// Components\nimport clsx from 'clsx'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { formatChainList } from './constants'\nimport { NETWORK_ICONS } from '../../config/constants/chains'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport Question from '../uikit-sdk/Svg/Icons/Question'\n\nconst chainOptionButtonClasses =\n  'ape:w-[40px] ape:h-[40px] ape:rounded-normal ape:bg-white3 ape:justify-center ape:items-center ape:hover:cursor-pointer ape:hover:bg-white4'\n\nconst ChainOptionsButtons = ({\n  selectedChain,\n  setSelectedChain,\n  setViewAllChains,\n  chainList,\n}: {\n  selectedChain?: number\n  setSelectedChain: (chain: ChainId) => void\n  setViewAllChains: (viewAllChains: boolean) => void\n  chainList: ChainId[]\n}) => {\n  return (\n    <Flex className=\"ape:relative ape:mb-[10px]\">\n      {formatChainList(chainList)\n        .sort((chainInfo) => (chainInfo.chain === selectedChain ? -1 : 1))\n        .slice(0, 7)\n        .map((chainInfo) => {\n          const ChainIcon = NETWORK_ICONS[chainInfo.chain] ?? Question\n          return (\n            <Flex\n              className={clsx(chainOptionButtonClasses, 'ape:mr-[10px]')}\n              onClick={() => setSelectedChain(chainInfo.chain)}\n              key={chainInfo.name}\n            >\n              <Flex className=\"ape:overflow-hidden ape:rounded-[50px]\">\n                <ChainIcon width=\"25px\" />\n              </Flex>\n            </Flex>\n          )\n        })}\n      {chainList.length > 7 && (\n        <Flex className={chainOptionButtonClasses} onClick={() => setViewAllChains(true)}>\n          <Text>{chainList.length - 7}+</Text>\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default ChainOptionsButtons\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AASA,MAAM,wBAAwB,GAC5B,6IAA6I;AAE/I,MAAM,mBAAmB,GAAG,CAAC,EAC3B,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,GAMV,KAAI;IACH,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CACzC,eAAe,CAAC,SAAS;iBACvB,IAAI,CAAC,CAAC,SAAS,MAAM,SAAS,CAAC,KAAK,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,CAAC;AAChE,iBAAA,KAAK,CAAC,CAAC,EAAE,CAAC;AACV,iBAAA,GAAG,CAAC,CAAC,SAAS,KAAI;gBACjB,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,QAAQ;gBAC5D,QACEC,IAAC,IAAI,EAAA,EACH,SAAS,EAAE,IAAI,CAAC,wBAAwB,EAAE,eAAe,CAAC,EAC1D,OAAO,EAAE,MAAM,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,EAAA,QAAA,EAGhDA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wCAAwC,EAAA,QAAA,EACtDA,IAAC,SAAS,EAAA,EAAC,KAAK,EAAC,MAAM,GAAG,EAAA,CACrB,EAAA,EAJF,SAAS,CAAC,IAAI,CAKd;AAEX,YAAA,CAAC,CAAC,EACH,SAAS,CAAC,MAAM,GAAG,CAAC,KACnBA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,wBAAwB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC,IAAI,CAAC,EAAA,QAAA,EAC9ED,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CAAE,SAAS,CAAC,MAAM,GAAG,CAAC,EAAA,GAAA,CAAA,EAAA,CAAS,GAC/B,CACR,CAAA,EAAA,CACI;AAEX;;;;"}

package/dist/components/ChainOptionList/ChainOptionsList.d.ts

@@ -3,5 +3,5 @@ declare const ChainOptionsList: ({ setSelectedChain, setViewAllChains, chainList
     setSelectedChain: (chain: ChainId) => void;
     setViewAllChains: (viewAllChains: boolean) => void;
     chainList: ChainId[];
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ChainOptionsList;

package/dist/components/ChainOptionList/ChainOptionsList.js

@@ -1,6 +1,5 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
-import { styles } from './styles.js';
 import { formatChainList } from './constants.js';
 import { NETWORK_ICONS } from '../../config/constants/chains.js';
 import Flex from '../uikit-sdk/Flex/index.js';
@@ -19,11 +18,11 @@ const ChainOptionsList = ({ setSelectedChain, setViewAllChains, chainList, }) =>
         const input = event.target.value;
         setSearchQuery(input);
     }, []);
-    return (jsx(Flex, { sx: styles.searchAndListContainer, children: jsxs(Flex, { sx: { position: 'relative', flexDirection: 'column', height: '100%' }, children: [jsxs(Flex, { children: [jsx(Input, { onChange: handleInput, sx: styles.searchInput, placeholder: "Search by chain name" }), jsx(Flex, { sx: { position: 'absolute', right: '10px', top: '12px' }, children: jsx(Search, {}) })] }), jsx(Flex, { sx: styles.chainListContainer, children: formatChainList(chainList)
+    return (jsx(Flex, { className: "ape:max-w-full ape:w-[450px] ape:flex-col ape:bg-white3 ape:p-[10px] ape:rounded-[10px] ape:h-[calc(100%-150px)]", children: jsxs(Flex, { className: "ape:relative ape:flex-col ape:h-full", children: [jsxs(Flex, { children: [jsx(Input, { onChange: handleInput, className: "ape:font-normal ape:bg-white4 ape:h-[40px] ape:border-none ape:pl-[10px] ape:rounded-[10px] ape:mb-[8px] ape:focus:outline-none", placeholder: "Search by chain name" }), jsx(Flex, { className: "ape:absolute ape:right-[10px] ape:top-[12px]", children: jsx(Search, {}) })] }), jsx(Flex, { className: "ape:relative ape:mb-[10px] ape:flex-col ape:h-full", children: formatChainList(chainList)
                         .filter((chainInfo) => chainInfo.name.toLowerCase().includes(searchQuery.toLowerCase()))
                         .map((chainInfo) => {
                         const ChainIcon = NETWORK_ICONS[chainInfo.chain] ?? Question;
-                        return (jsxs(Flex, { sx: styles.chainOptionList, onClick: () => handleChainSelect(chainInfo.chain), children: [jsx(Flex, { sx: { overflow: 'hidden', borderRadius: '50px' }, children: jsx(ChainIcon, { width: "25px" }) }), jsx(Text, { sx: { fontWeight: '500', fontSize: '16px' }, children: chainInfo.name })] }, chainInfo.name));
+                        return (jsxs(Flex, { className: "ape:w-full ape:h-[45px] ape:rounded-[10px] ape:gap-[10px] ape:px-[10px] ape:bg-white3 ape:items-center ape:hover:cursor-pointer ape:hover:bg-white4", onClick: () => handleChainSelect(chainInfo.chain), children: [jsx(Flex, { className: "ape:overflow-hidden ape:rounded-[50px]", children: jsx(ChainIcon, { width: "25px" }) }), jsx(Text, { size: "16px", className: "ape:font-medium", children: chainInfo.name })] }, chainInfo.name));
                     }) })] }) }));
 };
 

package/dist/components/ChainOptionList/ChainOptionsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChainOptionsList.js","sources":["../../../src/components/ChainOptionList/ChainOptionsList.tsx"],"sourcesContent":["// Components\nimport { ChangeEvent, useCallback, useState } from 'react'\nimport { styles } from './styles'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { formatChainList } from './constants'\nimport { NETWORK_ICONS } from '../../config/constants/chains'\nimport Flex from '../uikit-sdk/Flex'\nimport Input from '../uikit-sdk/Input/Input'\nimport Text from '../uikit-sdk/Text'\nimport Search from '../uikit-sdk/Svg/Icons/Search'\nimport Question from '../uikit-sdk/Svg/Icons/Question'\n\nconst ChainOptionsList = ({\n  setSelectedChain,\n  setViewAllChains,\n  chainList,\n}: {\n  setSelectedChain: (chain: ChainId) => void\n  setViewAllChains: (viewAllChains: boolean) => void\n  chainList: ChainId[]\n}) => {\n  const [searchQuery, setSearchQuery] = useState<string>('')\n\n  const handleChainSelect = (chain: ChainId) => {\n    setSelectedChain(chain)\n    setViewAllChains(false)\n  }\n\n  const handleInput = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    const input = event.target.value\n    setSearchQuery(input)\n  }, [])\n\n  return (\n    <Flex sx={styles.searchAndListContainer}>\n      <Flex sx={{ position: 'relative', flexDirection: 'column', height: '100%' }}>\n        <Flex>\n          <Input onChange={handleInput} sx={styles.searchInput} placeholder=\"Search by chain name\" />\n          <Flex sx={{ position: 'absolute', right: '10px', top: '12px' }}>\n            <Search />\n          </Flex>\n        </Flex>\n        <Flex sx={styles.chainListContainer}>\n          {formatChainList(chainList)\n            .filter((chainInfo) => chainInfo.name.toLowerCase().includes(searchQuery.toLowerCase()))\n            .map((chainInfo) => {\n              const ChainIcon = NETWORK_ICONS[chainInfo.chain] ?? Question\n              return (\n                <Flex\n                  sx={styles.chainOptionList}\n                  onClick={() => handleChainSelect(chainInfo.chain)}\n                  key={chainInfo.name}\n                >\n                  <Flex sx={{ overflow: 'hidden', borderRadius: '50px' }}>\n                    <ChainIcon width=\"25px\" />\n                  </Flex>\n                  <Text sx={{ fontWeight: '500', fontSize: '16px' }}>{chainInfo.name}</Text>\n                </Flex>\n              )\n            })}\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default ChainOptionsList\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;AAYA,MAAM,gBAAgB,GAAG,CAAC,EACxB,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,GAKV,KAAI;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC;AAE1D,IAAA,MAAM,iBAAiB,GAAG,CAAC,KAAc,KAAI;QAC3C,gBAAgB,CAAC,KAAK,CAAC;QACvB,gBAAgB,CAAC,KAAK,CAAC;AACzB,IAAA,CAAC;AAED,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,KAAoC,KAAI;AACvE,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;QAChC,cAAc,CAAC,KAAK,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,sBAAsB,EAAA,QAAA,EACrCC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,aACzEA,IAAA,CAAC,IAAI,eACHD,GAAA,CAAC,KAAK,IAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,CAAC,WAAW,EAAE,WAAW,EAAC,sBAAsB,GAAG,EAC3FA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,YAC5DA,GAAA,CAAC,MAAM,KAAG,EAAA,CACL,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,kBAAkB,YAChC,eAAe,CAAC,SAAS;yBACvB,MAAM,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;AACtF,yBAAA,GAAG,CAAC,CAAC,SAAS,KAAI;wBACjB,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,QAAQ;AAC5D,wBAAA,QACEC,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE,MAAM,CAAC,eAAe,EAC1B,OAAO,EAAE,MAAM,iBAAiB,CAAC,SAAS,CAAC,KAAK,CAAC,EAAA,QAAA,EAAA,CAGjDD,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,EAAA,QAAA,EACpDA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CACrB,EACPA,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAG,SAAS,CAAC,IAAI,EAAA,CAAQ,KALrE,SAAS,CAAC,IAAI,CAMd;AAEX,oBAAA,CAAC,CAAC,EAAA,CACC,CAAA,EAAA,CACF,EAAA,CACF;AAEX;;;;"}
+{"version":3,"file":"ChainOptionsList.js","sources":["../../../src/components/ChainOptionList/ChainOptionsList.tsx"],"sourcesContent":["// Components\nimport { ChangeEvent, useCallback, useState } from 'react'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { formatChainList } from './constants'\nimport { NETWORK_ICONS } from '../../config/constants/chains'\nimport Flex from '../uikit-sdk/Flex'\nimport Input from '../uikit-sdk/Input/Input'\nimport Text from '../uikit-sdk/Text'\nimport Search from '../uikit-sdk/Svg/Icons/Search'\nimport Question from '../uikit-sdk/Svg/Icons/Question'\n\nconst ChainOptionsList = ({\n  setSelectedChain,\n  setViewAllChains,\n  chainList,\n}: {\n  setSelectedChain: (chain: ChainId) => void\n  setViewAllChains: (viewAllChains: boolean) => void\n  chainList: ChainId[]\n}) => {\n  const [searchQuery, setSearchQuery] = useState<string>('')\n\n  const handleChainSelect = (chain: ChainId) => {\n    setSelectedChain(chain)\n    setViewAllChains(false)\n  }\n\n  const handleInput = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    const input = event.target.value\n    setSearchQuery(input)\n  }, [])\n\n  return (\n    <Flex className=\"ape:max-w-full ape:w-[450px] ape:flex-col ape:bg-white3 ape:p-[10px] ape:rounded-[10px] ape:h-[calc(100%-150px)]\">\n      <Flex className=\"ape:relative ape:flex-col ape:h-full\">\n        <Flex>\n          <Input\n            onChange={handleInput}\n            className=\"ape:font-normal ape:bg-white4 ape:h-[40px] ape:border-none ape:pl-[10px] ape:rounded-[10px] ape:mb-[8px] ape:focus:outline-none\"\n            placeholder=\"Search by chain name\"\n          />\n          <Flex className=\"ape:absolute ape:right-[10px] ape:top-[12px]\">\n            <Search />\n          </Flex>\n        </Flex>\n        <Flex className=\"ape:relative ape:mb-[10px] ape:flex-col ape:h-full\">\n          {formatChainList(chainList)\n            .filter((chainInfo) => chainInfo.name.toLowerCase().includes(searchQuery.toLowerCase()))\n            .map((chainInfo) => {\n              const ChainIcon = NETWORK_ICONS[chainInfo.chain] ?? Question\n              return (\n                <Flex\n                  className=\"ape:w-full ape:h-[45px] ape:rounded-[10px] ape:gap-[10px] ape:px-[10px] ape:bg-white3 ape:items-center ape:hover:cursor-pointer ape:hover:bg-white4\"\n                  onClick={() => handleChainSelect(chainInfo.chain)}\n                  key={chainInfo.name}\n                >\n                  <Flex className=\"ape:overflow-hidden ape:rounded-[50px]\">\n                    <ChainIcon width=\"25px\" />\n                  </Flex>\n                  <Text size=\"16px\" className=\"ape:font-medium\">{chainInfo.name}</Text>\n                </Flex>\n              )\n            })}\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default ChainOptionsList\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AAWA,MAAM,gBAAgB,GAAG,CAAC,EACxB,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,GAKV,KAAI;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC;AAE1D,IAAA,MAAM,iBAAiB,GAAG,CAAC,KAAc,KAAI;QAC3C,gBAAgB,CAAC,KAAK,CAAC;QACvB,gBAAgB,CAAC,KAAK,CAAC;AACzB,IAAA,CAAC;AAED,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,KAAoC,KAAI;AACvE,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;QAChC,cAAc,CAAC,KAAK,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC;IAEN,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,kHAAkH,EAAA,QAAA,EAChIC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,CACpDA,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHD,GAAA,CAAC,KAAK,EAAA,EACJ,QAAQ,EAAE,WAAW,EACrB,SAAS,EAAC,iIAAiI,EAC3I,WAAW,EAAC,sBAAsB,EAAA,CAClC,EACFA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAC5DA,GAAA,CAAC,MAAM,EAAA,EAAA,CAAG,EAAA,CACL,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,oDAAoD,EAAA,QAAA,EACjE,eAAe,CAAC,SAAS;yBACvB,MAAM,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;AACtF,yBAAA,GAAG,CAAC,CAAC,SAAS,KAAI;wBACjB,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,QAAQ;wBAC5D,QACEC,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,qJAAqJ,EAC/J,OAAO,EAAE,MAAM,iBAAiB,CAAC,SAAS,CAAC,KAAK,CAAC,EAAA,QAAA,EAAA,CAGjDD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wCAAwC,EAAA,QAAA,EACtDA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CACrB,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAE,SAAS,CAAC,IAAI,EAAA,CAAQ,CAAA,EAAA,EALhE,SAAS,CAAC,IAAI,CAMd;AAEX,oBAAA,CAAC,CAAC,EAAA,CACC,CAAA,EAAA,CACF,EAAA,CACF;AAEX;;;;"}

package/dist/components/CircularProgress/index.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Flex from '../uikit-sdk/Flex/index.js';
 
 const CircularProgress = ({ value, size = 176, valueTemplate, valueColor = '#6560C5', rangeColor = 'rgba(250, 250, 250, 0.05)', textColor = '#f6f6f6', strokeWidth = 12, }) => {
@@ -6,20 +6,9 @@ const CircularProgress = ({ value, size = 176, valueTemplate, valueColor = '#656
     const radius = (size - strokeWidth) / 2;
     const circumference = 2 * Math.PI * radius;
     const offset = circumference - (normalizedValue / 100) * circumference;
-    return (jsxs(Flex, { sx: { position: 'relative', width: size, height: size }, children: [jsxs("svg", { width: size, height: size, style: { transform: 'rotate(-90deg)' }, children: [jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: rangeColor, strokeWidth: strokeWidth }), jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: valueColor, strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", style: {
+    return (jsxs(Flex, { className: "ape:relative", style: { width: size, height: size }, children: [jsxs("svg", { width: size, height: size, style: { transform: 'rotate(-90deg)' }, children: [jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: rangeColor, strokeWidth: strokeWidth }), jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: valueColor, strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", style: {
                             transition: 'stroke-dashoffset 0.3s ease',
-                        } })] }), jsx(Flex, { sx: {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontSize: '32px',
-                    fontWeight: 600,
-                    color: textColor,
-                }, children: valueTemplate || `${normalizedValue}%` })] }));
+                        } })] }), jsx(Flex, { className: "ape:absolute ape:inset-0 ape:items-center ape:justify-center ape:text-[32px] ape:font-semibold", style: { color: textColor }, children: valueTemplate || `${normalizedValue}%` })] }));
 };
 
 export { CircularProgress as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/CircularProgress/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\n\ninterface CircularProgressProps {\n  value: number // 0-100\n  size?: number\n  valueTemplate?: string\n  valueColor?: string\n  rangeColor?: string\n  textColor?: string\n  strokeWidth?: number\n}\n\nconst CircularProgress: React.FC<CircularProgressProps> = ({\n  value,\n  size = 176,\n  valueTemplate,\n  valueColor = '#6560C5',\n  rangeColor = 'rgba(250, 250, 250, 0.05)',\n  textColor = '#f6f6f6',\n  strokeWidth = 12,\n}) => {\n  const normalizedValue = Math.min(Math.max(value, 0), 100)\n  const radius = (size - strokeWidth) / 2\n  const circumference = 2 * Math.PI * radius\n  const offset = circumference - (normalizedValue / 100) * circumference\n\n  return (\n    <Flex sx={{ position: 'relative', width: size, height: size }}>\n      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>\n        {/* Background circle */}\n        <circle cx={size / 2} cy={size / 2} r={radius} fill=\"none\" stroke={rangeColor} strokeWidth={strokeWidth} />\n        {/* Progress circle */}\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          stroke={valueColor}\n          strokeWidth={strokeWidth}\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n          strokeLinecap=\"round\"\n          style={{\n            transition: 'stroke-dashoffset 0.3s ease',\n          }}\n        />\n      </svg>\n      {/* Center text */}\n      <Flex\n        sx={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          alignItems: 'center',\n          justifyContent: 'center',\n          fontSize: '32px',\n          fontWeight: 600,\n          color: textColor,\n        }}\n      >\n        {valueTemplate || `${normalizedValue}%`}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default CircularProgress\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAaA,MAAM,gBAAgB,GAAoC,CAAC,EACzD,KAAK,EACL,IAAI,GAAG,GAAG,EACV,aAAa,EACb,UAAU,GAAG,SAAS,EACtB,UAAU,GAAG,2BAA2B,EACxC,SAAS,GAAG,SAAS,EACrB,WAAW,GAAG,EAAE,GACjB,KAAI;AACH,IAAA,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC;IACzD,MAAM,MAAM,GAAG,CAAC,IAAI,GAAG,WAAW,IAAI,CAAC;IACvC,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM;IAC1C,MAAM,MAAM,GAAG,aAAa,GAAG,CAAC,eAAe,GAAG,GAAG,IAAI,aAAa;IAEtE,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,aAC3DA,IAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAA,QAAA,EAAA,CAEpEC,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAE,IAAI,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAA,CAAI,EAE3GA,GAAA,CAAA,QAAA,EAAA,EACE,EAAE,EAAE,IAAI,GAAG,CAAC,EACZ,EAAE,EAAE,IAAI,GAAG,CAAC,EACZ,CAAC,EAAE,MAAM,EACT,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,UAAU,EAClB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,aAAa,EAC9B,gBAAgB,EAAE,MAAM,EACxB,aAAa,EAAC,OAAO,EACrB,KAAK,EAAE;AACL,4BAAA,UAAU,EAAE,6BAA6B;AAC1C,yBAAA,EAAA,CACD,IACE,EAENA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,KAAK,EAAE,CAAC;AACR,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,cAAc,EAAE,QAAQ;AACxB,oBAAA,QAAQ,EAAE,MAAM;AAChB,oBAAA,UAAU,EAAE,GAAG;AACf,oBAAA,KAAK,EAAE,SAAS;iBACjB,EAAA,QAAA,EAEA,aAAa,IAAI,CAAA,EAAG,eAAe,GAAG,EAAA,CAClC,CAAA,EAAA,CACF;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/CircularProgress/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\n\ninterface CircularProgressProps {\n  value: number // 0-100\n  size?: number\n  valueTemplate?: string\n  valueColor?: string\n  rangeColor?: string\n  textColor?: string\n  strokeWidth?: number\n}\n\nconst CircularProgress: React.FC<CircularProgressProps> = ({\n  value,\n  size = 176,\n  valueTemplate,\n  valueColor = '#6560C5',\n  rangeColor = 'rgba(250, 250, 250, 0.05)',\n  textColor = '#f6f6f6',\n  strokeWidth = 12,\n}) => {\n  const normalizedValue = Math.min(Math.max(value, 0), 100)\n  const radius = (size - strokeWidth) / 2\n  const circumference = 2 * Math.PI * radius\n  const offset = circumference - (normalizedValue / 100) * circumference\n\n  return (\n    <Flex className=\"ape:relative\" style={{ width: size, height: size }}>\n      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>\n        {/* Background circle */}\n        <circle cx={size / 2} cy={size / 2} r={radius} fill=\"none\" stroke={rangeColor} strokeWidth={strokeWidth} />\n        {/* Progress circle */}\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          stroke={valueColor}\n          strokeWidth={strokeWidth}\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n          strokeLinecap=\"round\"\n          style={{\n            transition: 'stroke-dashoffset 0.3s ease',\n          }}\n        />\n      </svg>\n      {/* Center text */}\n      <Flex\n        className=\"ape:absolute ape:inset-0 ape:items-center ape:justify-center ape:text-[32px] ape:font-semibold\"\n        style={{ color: textColor }}\n      >\n        {valueTemplate || `${normalizedValue}%`}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default CircularProgress\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAaA,MAAM,gBAAgB,GAAoC,CAAC,EACzD,KAAK,EACL,IAAI,GAAG,GAAG,EACV,aAAa,EACb,UAAU,GAAG,SAAS,EACtB,UAAU,GAAG,2BAA2B,EACxC,SAAS,GAAG,SAAS,EACrB,WAAW,GAAG,EAAE,GACjB,KAAI;AACH,IAAA,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC;IACzD,MAAM,MAAM,GAAG,CAAC,IAAI,GAAG,WAAW,IAAI,CAAC;IACvC,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM;IAC1C,MAAM,MAAM,GAAG,aAAa,GAAG,CAAC,eAAe,GAAG,GAAG,IAAI,aAAa;IAEtE,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,aACjEA,IAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAA,QAAA,EAAA,CAEpEC,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAE,IAAI,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAA,CAAI,EAE3GA,GAAA,CAAA,QAAA,EAAA,EACE,EAAE,EAAE,IAAI,GAAG,CAAC,EACZ,EAAE,EAAE,IAAI,GAAG,CAAC,EACZ,CAAC,EAAE,MAAM,EACT,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,UAAU,EAClB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,aAAa,EAC9B,gBAAgB,EAAE,MAAM,EACxB,aAAa,EAAC,OAAO,EACrB,KAAK,EAAE;AACL,4BAAA,UAAU,EAAE,6BAA6B;yBAC1C,EAAA,CACD,CAAA,EAAA,CACE,EAENA,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,gGAAgG,EAC1G,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EAE1B,aAAa,IAAI,CAAA,EAAG,eAAe,CAAA,CAAA,CAAG,EAAA,CAClC,CAAA,EAAA,CACF;AAEX;;;;"}

package/dist/components/ConnectAptosWalletButton/ConnectAptosWalletButton.d.ts

@@ -1,4 +1,4 @@
 declare const ConnectAptosWalletButton: ({ navBarFlag }: {
     navBarFlag?: boolean;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ConnectAptosWalletButton;

package/dist/components/ConnectAptosWalletButton/ConnectAptosWalletButton.js

@@ -1,4 +1,4 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import { openAptosWalletConnector } from '../../config/constants/walletConnectors.js';
 import Flex from '../uikit-sdk/Flex/index.js';
@@ -20,12 +20,7 @@ import Button from '../uikit-sdk/Button/Button.js';
 const ConnectAptosWalletButton = ({ navBarFlag }) => {
     const config = useSDKConfig();
     const handleConnect = config?.openWalletConnectors?.aptos ? openAptosWalletConnector : undefined;
-    return (jsx(Flex, { sx: { height: '100%', width: navBarFlag ? 'auto' : '100%', alignItems: 'center' }, children: jsx(Button, { fullWidth: true, onClick: handleConnect, sx: {
-                height: navBarFlag ? '32.5px' : '45px',
-                padding: '10px 10px',
-                alignItems: 'center',
-                backgroundColor: navBarFlag ? '#00c59a' : '',
-            }, disabled: !handleConnect, children: "Connect to Aptos" }) }));
+    return (jsx(Flex, { className: "ape:h-full ape:items-center", style: { width: navBarFlag ? 'auto' : '100%' }, children: jsx(Button, { fullWidth: true, onClick: handleConnect, className: "ape:p-[10px]", style: { height: navBarFlag ? '32.5px' : '45px', backgroundColor: navBarFlag ? '#00c59a' : undefined }, disabled: !handleConnect, children: "Connect to Aptos" }) }));
 };
 
 export { ConnectAptosWalletButton as default };

package/dist/components/ConnectAptosWalletButton/ConnectAptosWalletButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectAptosWalletButton.js","sources":["../../../src/components/ConnectAptosWalletButton/ConnectAptosWalletButton.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openAptosWalletConnector } from '../../config/constants/walletConnectors'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\n// Minimal wrapper around `@aptos-labs/wallet-adapter-ant-design::WalletSelector`,\n// structured identically to `ConnectSolanaWalletButton`. The ant-design\n// component ships a prebuilt modal that auto-detects every AIP-62 wallet\n// (Petra, Pontem, Martian, Nightly, OKX, …) — we just control its visibility\n// from our button.\n//\n// Note: `WalletSelector` renders two things — a `.wallet-button` trigger and\n// the modal itself (the modal is a portal into document.body). We only want\n// the modal here; the trigger would double up with our themed Connect button.\n// Wrapping the `WalletSelector` in a `display: none` div hides the trigger\n// while leaving the portal-mounted modal fully functional. This is the\n// lightest-touch workaround that avoids forking or css-overriding the\n// ant-design component.\nconst ConnectAptosWalletButton = ({ navBarFlag }: { navBarFlag?: boolean }) => {\n  const config = useSDKConfig()\n  const handleConnect = config?.openWalletConnectors?.aptos ? openAptosWalletConnector : undefined\n\n  return (\n    <Flex sx={{ height: '100%', width: navBarFlag ? 'auto' : '100%', alignItems: 'center' }}>\n      <Button\n        fullWidth\n        onClick={handleConnect}\n        sx={{\n          height: navBarFlag ? '32.5px' : '45px',\n          padding: '10px 10px',\n          alignItems: 'center',\n          backgroundColor: navBarFlag ? '#00c59a' : '',\n        }}\n        disabled={!handleConnect}\n      >\n        Connect to Aptos\n      </Button>\n    </Flex>\n  )\n}\n\nexport default ConnectAptosWalletButton\n"],"names":["_jsx"],"mappings":";;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,wBAAwB,GAAG,CAAC,EAAE,UAAU,EAA4B,KAAI;AAC5E,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,KAAK,GAAG,wBAAwB,GAAG,SAAS;AAEhG,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EACrFA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAA,IAAA,EACT,OAAO,EAAE,aAAa,EACtB,EAAE,EAAE;gBACF,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM;AACtC,gBAAA,OAAO,EAAE,WAAW;AACpB,gBAAA,UAAU,EAAE,QAAQ;gBACpB,eAAe,EAAE,UAAU,GAAG,SAAS,GAAG,EAAE;AAC7C,aAAA,EACD,QAAQ,EAAE,CAAC,aAAa,EAAA,QAAA,EAAA,kBAAA,EAAA,CAGjB,EAAA,CACJ;AAEX;;;;"}
+{"version":3,"file":"ConnectAptosWalletButton.js","sources":["../../../src/components/ConnectAptosWalletButton/ConnectAptosWalletButton.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openAptosWalletConnector } from '../../config/constants/walletConnectors'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\n// Minimal wrapper around `@aptos-labs/wallet-adapter-ant-design::WalletSelector`,\n// structured identically to `ConnectSolanaWalletButton`. The ant-design\n// component ships a prebuilt modal that auto-detects every AIP-62 wallet\n// (Petra, Pontem, Martian, Nightly, OKX, …) — we just control its visibility\n// from our button.\n//\n// Note: `WalletSelector` renders two things — a `.wallet-button` trigger and\n// the modal itself (the modal is a portal into document.body). We only want\n// the modal here; the trigger would double up with our themed Connect button.\n// Wrapping the `WalletSelector` in a `display: none` div hides the trigger\n// while leaving the portal-mounted modal fully functional. This is the\n// lightest-touch workaround that avoids forking or css-overriding the\n// ant-design component.\nconst ConnectAptosWalletButton = ({ navBarFlag }: { navBarFlag?: boolean }) => {\n  const config = useSDKConfig()\n  const handleConnect = config?.openWalletConnectors?.aptos ? openAptosWalletConnector : undefined\n\n  return (\n    <Flex className=\"ape:h-full ape:items-center\" style={{ width: navBarFlag ? 'auto' : '100%' }}>\n      <Button\n        fullWidth\n        onClick={handleConnect}\n        className=\"ape:p-[10px]\"\n        style={{ height: navBarFlag ? '32.5px' : '45px', backgroundColor: navBarFlag ? '#00c59a' : undefined }}\n        disabled={!handleConnect}\n      >\n        Connect to Aptos\n      </Button>\n    </Flex>\n  )\n}\n\nexport default ConnectAptosWalletButton\n"],"names":["_jsx"],"mappings":";;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,wBAAwB,GAAG,CAAC,EAAE,UAAU,EAA4B,KAAI;AAC5E,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,KAAK,GAAG,wBAAwB,GAAG,SAAS;AAEhG,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6BAA6B,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,EAAE,YAC1FA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,QACT,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE,EAAE,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,EAAE,eAAe,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,EAAE,EACtG,QAAQ,EAAE,CAAC,aAAa,EAAA,QAAA,EAAA,kBAAA,EAAA,CAGjB,EAAA,CACJ;AAEX;;;;"}

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

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const ConnectButton: () => React.JSX.Element;
+declare const ConnectButton: () => import("react/jsx-runtime").JSX.Element;
 export default ConnectButton;

package/dist/components/ConnectButton/index.js

@@ -1,11 +1,11 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import Button from '../uikit-sdk/Button/Button.js';
 import { openEvmWalletConnector } from '../../config/constants/walletConnectors.js';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 
 const ConnectButton = () => {
     const config = useSDKConfig();
-    return (jsx(Button, { fullWidth: true, onClick: openEvmWalletConnector, disabled: !config?.openWalletConnectors?.evm, children: "Connect wallet" }));
+    return (jsx(Button, { fullWidth: true, onClick: openEvmWalletConnector, disabled: !config?.openWalletConnectors?.evm, children: "Connect" }));
 };
 
 export { ConnectButton as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ConnectButton/index.tsx"],"sourcesContent":["import React from 'react'\nimport Button from '../uikit-sdk/Button/Button'\nimport { openEvmWalletConnector } from '../../config/constants/walletConnectors'\nimport { useSDKConfig } from '../../state/useSDKConfig'\n\nconst ConnectButton = () => {\n  const config = useSDKConfig()\n\n  return (\n    <Button fullWidth onClick={openEvmWalletConnector} disabled={!config?.openWalletConnectors?.evm}>\n      Connect wallet\n    </Button>\n  )\n}\n\nexport default ConnectButton\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,aAAa,GAAG,MAAK;AACzB,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;IAE7B,QACEA,IAAC,MAAM,EAAA,EAAC,SAAS,EAAA,IAAA,EAAC,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,oBAAoB,EAAE,GAAG,EAAA,QAAA,EAAA,gBAAA,EAAA,CAEtF;AAEb;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ConnectButton/index.tsx"],"sourcesContent":["import React from 'react'\nimport Button from '../uikit-sdk/Button/Button'\nimport { openEvmWalletConnector } from '../../config/constants/walletConnectors'\nimport { useSDKConfig } from '../../state/useSDKConfig'\n\nconst ConnectButton = () => {\n  const config = useSDKConfig()\n\n  return (\n    <Button fullWidth onClick={openEvmWalletConnector} disabled={!config?.openWalletConnectors?.evm}>\n      Connect\n    </Button>\n  )\n}\n\nexport default ConnectButton\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,aAAa,GAAG,MAAK;AACzB,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;IAE7B,QACEA,IAAC,MAAM,EAAA,EAAC,SAAS,EAAA,IAAA,EAAC,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,oBAAoB,EAAE,GAAG,EAAA,QAAA,EAAA,SAAA,EAAA,CAEtF;AAEb;;;;"}

package/dist/components/ConnectSolanaWalletButton/ConnectSolanaWalletButton.d.ts

@@ -1,4 +1,4 @@
 declare const ConnectSolanaWallet: ({ navBarFlag }: {
     navBarFlag?: boolean;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ConnectSolanaWallet;

package/dist/components/ConnectSolanaWalletButton/ConnectSolanaWalletButton.js

@@ -1,4 +1,4 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import { openSolWalletConnector } from '../../config/constants/walletConnectors.js';
 import Flex from '../uikit-sdk/Flex/index.js';
@@ -7,12 +7,7 @@ import Button from '../uikit-sdk/Button/Button.js';
 const ConnectSolanaWallet = ({ navBarFlag }) => {
     const config = useSDKConfig();
     const handleConnect = config?.openWalletConnectors?.sol ? openSolWalletConnector : undefined;
-    return (jsx(Flex, { sx: { height: '100%', width: navBarFlag ? 'auto' : '100%', alignItems: 'center' }, children: jsx(Button, { fullWidth: true, onClick: handleConnect, sx: {
-                height: navBarFlag ? '32.5px' : '45px',
-                padding: '10px 10px',
-                alignItems: 'center',
-                backgroundColor: navBarFlag ? '#00c59a' : '',
-            }, disabled: !handleConnect, children: "Connect to Solana" }) }));
+    return (jsx(Flex, { className: "ape:h-full ape:items-center", style: { width: navBarFlag ? 'auto' : '100%' }, children: jsx(Button, { fullWidth: true, onClick: handleConnect, className: "ape:p-[10px]", style: { height: navBarFlag ? '32.5px' : '45px', backgroundColor: navBarFlag ? '#00c59a' : undefined }, disabled: !handleConnect, children: "Connect to Solana" }) }));
 };
 
 export { ConnectSolanaWallet as default };

package/dist/components/ConnectSolanaWalletButton/ConnectSolanaWalletButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectSolanaWalletButton.js","sources":["../../../src/components/ConnectSolanaWalletButton/ConnectSolanaWalletButton.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openSolWalletConnector } from '../../config/constants/walletConnectors'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst ConnectSolanaWallet = ({ navBarFlag }: { navBarFlag?: boolean }) => {\n  const config = useSDKConfig()\n  const handleConnect = config?.openWalletConnectors?.sol ? openSolWalletConnector : undefined\n\n  return (\n    <Flex sx={{ height: '100%', width: navBarFlag ? 'auto' : '100%', alignItems: 'center' }}>\n      <Button\n        fullWidth\n        onClick={handleConnect}\n        sx={{\n          height: navBarFlag ? '32.5px' : '45px',\n          padding: '10px 10px',\n          alignItems: 'center',\n          backgroundColor: navBarFlag ? '#00c59a' : '',\n        }}\n        disabled={!handleConnect}\n      >\n        Connect to Solana\n      </Button>\n    </Flex>\n  )\n}\n\nexport default ConnectSolanaWallet\n"],"names":["_jsx"],"mappings":";;;;;;AAKA,MAAM,mBAAmB,GAAG,CAAC,EAAE,UAAU,EAA4B,KAAI;AACvE,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,GAAG,GAAG,sBAAsB,GAAG,SAAS;AAE5F,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EACrFA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAA,IAAA,EACT,OAAO,EAAE,aAAa,EACtB,EAAE,EAAE;gBACF,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM;AACtC,gBAAA,OAAO,EAAE,WAAW;AACpB,gBAAA,UAAU,EAAE,QAAQ;gBACpB,eAAe,EAAE,UAAU,GAAG,SAAS,GAAG,EAAE;AAC7C,aAAA,EACD,QAAQ,EAAE,CAAC,aAAa,EAAA,QAAA,EAAA,mBAAA,EAAA,CAGjB,EAAA,CACJ;AAEX;;;;"}
+{"version":3,"file":"ConnectSolanaWalletButton.js","sources":["../../../src/components/ConnectSolanaWalletButton/ConnectSolanaWalletButton.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openSolWalletConnector } from '../../config/constants/walletConnectors'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst ConnectSolanaWallet = ({ navBarFlag }: { navBarFlag?: boolean }) => {\n  const config = useSDKConfig()\n  const handleConnect = config?.openWalletConnectors?.sol ? openSolWalletConnector : undefined\n\n  return (\n    <Flex className=\"ape:h-full ape:items-center\" style={{ width: navBarFlag ? 'auto' : '100%' }}>\n      <Button\n        fullWidth\n        onClick={handleConnect}\n        className=\"ape:p-[10px]\"\n        style={{ height: navBarFlag ? '32.5px' : '45px', backgroundColor: navBarFlag ? '#00c59a' : undefined }}\n        disabled={!handleConnect}\n      >\n        Connect to Solana\n      </Button>\n    </Flex>\n  )\n}\n\nexport default ConnectSolanaWallet\n"],"names":["_jsx"],"mappings":";;;;;;AAKA,MAAM,mBAAmB,GAAG,CAAC,EAAE,UAAU,EAA4B,KAAI;AACvE,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,GAAG,GAAG,sBAAsB,GAAG,SAAS;AAE5F,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6BAA6B,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,EAAE,YAC1FA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,QACT,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE,EAAE,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,EAAE,eAAe,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,EAAE,EACtG,QAAQ,EAAE,CAAC,aAAa,EAAA,QAAA,EAAA,mBAAA,EAAA,CAGjB,EAAA,CACJ;AAEX;;;;"}

package/dist/components/ConnectSuiWalletButton/ConnectSuiWalletButton.d.ts

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

package/dist/components/ConnectoToVmBanners/ConnectToAptosBanner.d.ts

@@ -1 +1 @@
-export default function ConnectToAptosBanner(): import("react").JSX.Element;
+export default function ConnectToAptosBanner(): import("react/jsx-runtime").JSX.Element;