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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CarouselProps {
+    slides: React.ReactNode[];
+    showDots?: boolean;
+    autoPlay?: number;
+}
+declare const Carousel: ({ slides, showDots, autoPlay }: CarouselProps) => import("react/jsx-runtime").JSX.Element;
+export default Carousel;

package/dist/components/Carousel/index.js

@@ -0,0 +1,148 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import Flex from '../uikit-sdk/Flex/index.js';
+import SwiperDots from '../uikit-sdk/SwiperDots/index.js';
+
+// Minimum movement (px) before a mouse-down is treated as a drag rather than a click
+const DRAG_TOLERANCE = 5;
+// Minimum net drag distance (px) before a mouse release advances to the next/previous slide
+const DRAG_THRESHOLD = 40;
+// How much of an out-of-bounds drag actually shows up on screen, and the cap for it (px) —
+// gives the "rubber band" resistance that hints the carousel is draggable at its edges.
+const OVERSCROLL_RESISTANCE = 0.35;
+const MAX_OVERSCROLL = 70;
+const Carousel = ({ slides, showDots = true, autoPlay }) => {
+    const viewportRef = useRef(null);
+    const [activeSlide, setActiveSlide] = useState(0);
+    const [isDragging, setIsDragging] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [overscroll, setOverscroll] = useState(0);
+    const isMouseDragging = useRef(false);
+    const activePointerId = useRef(null);
+    const dragStartX = useRef(0);
+    const dragStartScrollLeft = useRef(0);
+    const slideTo = (index) => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return;
+        const clamped = Math.min(Math.max(index, 0), slides.length - 1);
+        viewport.scrollTo({ left: clamped * viewport.clientWidth, behavior: 'smooth' });
+    };
+    // Native scrolling (touch swipe, trackpad, or the mouse-drag below) is the only source of
+    // truth for position; this just keeps the dots in sync with wherever the viewport lands.
+    const handleScroll = () => {
+        const viewport = viewportRef.current;
+        if (!viewport || viewport.clientWidth === 0)
+            return;
+        const index = Math.round(viewport.scrollLeft / viewport.clientWidth);
+        setActiveSlide((current) => (current === index ? current : index));
+    };
+    // Pauses while the user is dragging or hovering, and restarts its countdown from whatever
+    // slide is currently active — so a manual dot click or drag gets a full autoPlay window too.
+    useEffect(() => {
+        if (!autoPlay || autoPlay <= 0 || slides.length <= 1 || isDragging || isHovered)
+            return;
+        const timeoutId = setTimeout(() => {
+            slideTo((activeSlide + 1) % slides.length);
+        }, autoPlay * 1000);
+        return () => clearTimeout(timeoutId);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [autoPlay, isDragging, isHovered, activeSlide, slides.length]);
+    // Desktop click-and-drag only. Touch is deliberately left to the browser's native scroll-snap
+    // (see the `viewport` styles) rather than driven from JS: iOS Safari/Chrome (both WebKit) have
+    // long-standing bugs where a touch drag captured via setPointerCapture can lose its terminating
+    // pointerup/pointercancel mid-gesture, leaving the carousel stuck partway through a transition.
+    // Native scrolling never has that failure mode, and mouse pointers aren't affected by the bug.
+    //
+    // Pointer capture is only claimed once real dragging is detected (see handlePointerMove), so a
+    // plain click on a link/button inside a slide never gets hijacked into a drag.
+    const handlePointerDown = (event) => {
+        if (slides.length <= 1 || event.pointerType !== 'mouse' || event.button !== 0)
+            return;
+        activePointerId.current = event.pointerId;
+        dragStartX.current = event.clientX;
+    };
+    const handlePointerMove = (event) => {
+        if (activePointerId.current !== event.pointerId)
+            return;
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return;
+        const delta = event.clientX - dragStartX.current;
+        if (!isMouseDragging.current) {
+            if (Math.abs(delta) < DRAG_TOLERANCE)
+                return;
+            isMouseDragging.current = true;
+            dragStartScrollLeft.current = viewport.scrollLeft;
+            viewport.setPointerCapture(event.pointerId);
+            setIsDragging(true);
+        }
+        // scrollLeft can't natively go out of bounds, so the excess past either edge is tracked
+        // separately and rendered as a damped transform — the "rubber band" that shows the first/last
+        // slide can still be dragged, then springs back once released (see endMouseDrag).
+        const maxScrollLeft = viewport.scrollWidth - viewport.clientWidth;
+        const rawTarget = dragStartScrollLeft.current - delta;
+        let clampedScrollLeft = rawTarget;
+        let rawOverscroll = 0;
+        if (rawTarget < 0) {
+            rawOverscroll = rawTarget;
+            clampedScrollLeft = 0;
+        }
+        else if (rawTarget > maxScrollLeft) {
+            rawOverscroll = rawTarget - maxScrollLeft;
+            clampedScrollLeft = maxScrollLeft;
+        }
+        viewport.scrollLeft = clampedScrollLeft;
+        // Negated: scrollLeft and visual position move opposite each other (lower scrollLeft
+        // shifts content right), so the transform has to flip sign to keep following the drag.
+        const visualOverscroll = -rawOverscroll * OVERSCROLL_RESISTANCE;
+        setOverscroll(Math.max(-MAX_OVERSCROLL, Math.min(MAX_OVERSCROLL, visualOverscroll)));
+    };
+    const endMouseDrag = (event) => {
+        if (activePointerId.current !== event.pointerId)
+            return;
+        activePointerId.current = null;
+        const viewport = viewportRef.current;
+        if (viewport?.hasPointerCapture(event.pointerId)) {
+            viewport.releasePointerCapture(event.pointerId);
+        }
+        if (!isMouseDragging.current)
+            return;
+        isMouseDragging.current = false;
+        setIsDragging(false);
+        setOverscroll(0);
+        if (!viewport)
+            return;
+        // A fixed pixel threshold (rather than "past the halfway point") so a normal quick
+        // swipe advances the slide, matching the feel of the previous transform-based drag.
+        const netDelta = viewport.scrollLeft - dragStartScrollLeft.current;
+        const startIndex = Math.round(dragStartScrollLeft.current / viewport.clientWidth);
+        if (netDelta > DRAG_THRESHOLD) {
+            slideTo(startIndex + 1);
+        }
+        else if (netDelta < -DRAG_THRESHOLD) {
+            slideTo(startIndex - 1);
+        }
+        else {
+            slideTo(startIndex);
+        }
+    };
+    if (slides.length <= 1) {
+        return jsx(Fragment, { children: slides[0] });
+    }
+    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.
+                    scrollSnapType: isDragging ? 'none' : 'x mandatory',
+                    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, { 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);
+                }) }))] }));
+};
+
+export { Carousel as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"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/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,8 @@
-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, 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'\n\nconst ConnectButton = () => {\n  return <Button fullWidth>Connect</Button>\n}\n\nexport default ConnectButton\n"],"names":["_jsx"],"mappings":";;;AAGA,MAAM,aAAa,GAAG,MAAK;AACzB,IAAA,OAAOA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,8BAAiB;AAC3C;;;;"}

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/CustomClaimModals/AbondModal.d.ts

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

package/dist/components/CustomClaimModals/AbondModal.js

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
-import { Image } from 'theme-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Modal from '../uikit-sdk/Modal/index.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Button from '../uikit-sdk/Button/Button.js';
@@ -8,7 +7,7 @@ const AbondModal = () => {
     const handleClick = () => {
         window.location.href = 'https://ape.bond/true-yield';
     };
-    return (jsx(Modal, { title: "You've Claimed ABOND!", children: jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsx(Flex, { sx: { fontSize: '12px', lineHeight: '20px', color: 'primaryButton', mt: '10px' }, children: "Did You Know?" }), jsxs(Flex, { sx: { flexDirection: 'column', gap: '10px', cursor: 'pointer' }, onClick: handleClick, children: [jsx(Flex, { children: "You can stake ABOND to earn $USDT and extra discounts on Bonds:" }), jsx(Image, { src: 'https://ape.bond/images/circular-staking/real-yield.png' }), jsx(Image, { src: 'https://ape.bond/images/circular-staking/extra-discounts.png' }), jsx(Button, { sx: { width: '100%', mt: '10px' }, children: " Stake now" })] })] }) }));
+    return (jsx(Modal, { title: "You've Claimed ABOND!", children: jsxs(Flex, { className: "ape:flex-col", children: [jsx(Flex, { className: "ape:text-[12px] ape:leading-5 ape:text-primary-button ape:mt-[10px]", children: "Did You Know?" }), jsxs(Flex, { className: "ape:flex-col ape:gap-[10px] ape:cursor-pointer", onClick: handleClick, children: [jsx(Flex, { children: "You can stake ABOND to earn $USDT and extra discounts on Bonds:" }), jsx("img", { src: 'https://ape.bond/images/circular-staking/real-yield.png' }), jsx("img", { src: 'https://ape.bond/images/circular-staking/extra-discounts.png' }), jsx(Button, { className: "ape:w-full ape:mt-[10px]", children: " Stake now" })] })] }) }));
 };
 
 export { AbondModal as default };

package/dist/components/CustomClaimModals/AbondModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"AbondModal.js","sources":["../../../src/components/CustomClaimModals/AbondModal.tsx"],"sourcesContent":["import React from 'react'\nimport { Image } from 'theme-ui'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst AbondModal = () => {\n  const handleClick = () => {\n    window.location.href = 'https://ape.bond/true-yield'\n  }\n\n  return (\n    <Modal title=\"You've Claimed ABOND!\">\n      <Flex sx={{ flexDirection: 'column' }}>\n        <Flex sx={{ fontSize: '12px', lineHeight: '20px', color: 'primaryButton', mt: '10px' }}>Did You Know?</Flex>\n        <Flex sx={{ flexDirection: 'column', gap: '10px', cursor: 'pointer' }} onClick={handleClick}>\n          <Flex>You can stake ABOND to earn $USDT and extra discounts on Bonds:</Flex>\n          <Image src={'https://ape.bond/images/circular-staking/real-yield.png'} />\n          <Image src={'https://ape.bond/images/circular-staking/extra-discounts.png'} />\n          <Button sx={{ width: '100%', mt: '10px' }}> Stake now</Button>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default AbondModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAMA,MAAM,UAAU,GAAG,MAAK;IACtB,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,6BAA6B;AACtD,IAAA,CAAC;IAED,QACEA,IAAC,KAAK,EAAA,EAAC,KAAK,EAAC,uBAAuB,EAAA,QAAA,EAClCC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,aACnCD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,eAAA,EAAA,CAAsB,EAC5GC,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,WAAW,aACzFD,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,iEAAA,EAAA,CAAuE,EAC5EA,GAAA,CAAC,KAAK,IAAC,GAAG,EAAE,yDAAyD,EAAA,CAAI,EACzEA,GAAA,CAAC,KAAK,EAAA,EAAC,GAAG,EAAE,8DAA8D,EAAA,CAAI,EAC9EA,IAAC,MAAM,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,2BAAqB,CAAA,EAAA,CACzD,CAAA,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}
+{"version":3,"file":"AbondModal.js","sources":["../../../src/components/CustomClaimModals/AbondModal.tsx"],"sourcesContent":["import React from 'react'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst AbondModal = () => {\n  const handleClick = () => {\n    window.location.href = 'https://ape.bond/true-yield'\n  }\n\n  return (\n    <Modal title=\"You've Claimed ABOND!\">\n      <Flex className=\"ape:flex-col\">\n        <Flex className=\"ape:text-[12px] ape:leading-5 ape:text-primary-button ape:mt-[10px]\">Did You Know?</Flex>\n        <Flex className=\"ape:flex-col ape:gap-[10px] ape:cursor-pointer\" onClick={handleClick}>\n          <Flex>You can stake ABOND to earn $USDT and extra discounts on Bonds:</Flex>\n          <img src={'https://ape.bond/images/circular-staking/real-yield.png'} />\n          <img src={'https://ape.bond/images/circular-staking/extra-discounts.png'} />\n          <Button className=\"ape:w-full ape:mt-[10px]\"> Stake now</Button>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default AbondModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKA,MAAM,UAAU,GAAG,MAAK;IACtB,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,6BAA6B;AACtD,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,uBAAuB,EAAA,QAAA,EAClCC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,qEAAqE,EAAA,QAAA,EAAA,eAAA,EAAA,CAAqB,EAC1GC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,gDAAgD,EAAC,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,CACnFD,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,iEAAA,EAAA,CAAuE,EAC5EA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,yDAAyD,EAAA,CAAI,EACvEA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,8DAA8D,EAAA,CAAI,EAC5EA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,QAAA,EAAA,YAAA,EAAA,CAAoB,CAAA,EAAA,CAC3D,CAAA,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}

package/dist/components/CustomClaimModals/OabondModal.d.ts

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

package/dist/components/CustomClaimModals/OabondModal.js

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
-import { Image } from 'theme-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Modal from '../uikit-sdk/Modal/index.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Button from '../uikit-sdk/Button/Button.js';
@@ -8,7 +7,7 @@ const OabondModal = () => {
     const handleClick = () => {
         window.location.href = 'https://ape.bond/true-yield?createPosition=oABOND';
     };
-    return (jsx(Modal, { title: "You've Claimed oABOND!", children: jsx(Flex, { sx: { flexDirection: 'column' }, children: jsxs(Flex, { sx: { flexDirection: 'column', gap: '10px', cursor: 'pointer' }, onClick: handleClick, children: [jsx(Flex, { children: "You can now stake your oABOND and turn it into veABOND at permalock:" }), jsx(Image, { src: 'https://ape.bond/images/circular-staking/real-yield.png' }), jsx(Button, { sx: { width: '100%', mt: '10px' }, children: "Lock now" })] }) }) }));
+    return (jsx(Modal, { title: "You've Claimed oABOND!", children: jsx(Flex, { className: "ape:flex-col", children: jsxs(Flex, { className: "ape:flex-col ape:gap-[10px] ape:cursor-pointer", onClick: handleClick, children: [jsx(Flex, { children: "You can now stake your oABOND and turn it into veABOND at permalock:" }), jsx("img", { src: 'https://ape.bond/images/circular-staking/real-yield.png' }), jsx(Button, { className: "ape:w-full ape:mt-[10px]", children: "Lock now" })] }) }) }));
 };
 
 export { OabondModal as default };

package/dist/components/CustomClaimModals/OabondModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"OabondModal.js","sources":["../../../src/components/CustomClaimModals/OabondModal.tsx"],"sourcesContent":["import React from 'react'\nimport { Image } from 'theme-ui'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst OabondModal = () => {\n  const handleClick = () => {\n    window.location.href = 'https://ape.bond/true-yield?createPosition=oABOND'\n  }\n\n  return (\n    <Modal title=\"You've Claimed oABOND!\">\n      <Flex sx={{ flexDirection: 'column' }}>\n        <Flex sx={{ flexDirection: 'column', gap: '10px', cursor: 'pointer' }} onClick={handleClick}>\n          <Flex>You can now stake your oABOND and turn it into veABOND at permalock:</Flex>\n          <Image src={'https://ape.bond/images/circular-staking/real-yield.png'} />\n          <Button sx={{ width: '100%', mt: '10px' }}>Lock now</Button>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default OabondModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAMA,MAAM,WAAW,GAAG,MAAK;IACvB,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,mDAAmD;AAC5E,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,wBAAwB,EAAA,QAAA,EACnCA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EACnCC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,CACzFD,IAAC,IAAI,EAAA,EAAA,QAAA,EAAA,sEAAA,EAAA,CAA4E,EACjFA,GAAA,CAAC,KAAK,EAAA,EAAC,GAAG,EAAE,yDAAyD,GAAI,EACzEA,GAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,UAAA,EAAA,CAAmB,CAAA,EAAA,CACvD,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}
+{"version":3,"file":"OabondModal.js","sources":["../../../src/components/CustomClaimModals/OabondModal.tsx"],"sourcesContent":["import React from 'react'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst OabondModal = () => {\n  const handleClick = () => {\n    window.location.href = 'https://ape.bond/true-yield?createPosition=oABOND'\n  }\n\n  return (\n    <Modal title=\"You've Claimed oABOND!\">\n      <Flex className=\"ape:flex-col\">\n        <Flex className=\"ape:flex-col ape:gap-[10px] ape:cursor-pointer\" onClick={handleClick}>\n          <Flex>You can now stake your oABOND and turn it into veABOND at permalock:</Flex>\n          <img src={'https://ape.bond/images/circular-staking/real-yield.png'} />\n          <Button className=\"ape:w-full ape:mt-[10px]\">Lock now</Button>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default OabondModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKA,MAAM,WAAW,GAAG,MAAK;IACvB,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,mDAAmD;AAC5E,IAAA,CAAC;IAED,QACEA,IAAC,KAAK,EAAA,EAAC,KAAK,EAAC,wBAAwB,YACnCA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAC5BC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,gDAAgD,EAAC,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,CACnFD,IAAC,IAAI,EAAA,EAAA,QAAA,EAAA,sEAAA,EAAA,CAA4E,EACjFA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,yDAAyD,EAAA,CAAI,EACvEA,IAAC,MAAM,EAAA,EAAC,SAAS,EAAC,0BAA0B,yBAAkB,CAAA,EAAA,CACzD,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}

package/dist/components/CustomClaimModals/PmusdModal.d.ts

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

package/dist/components/CustomClaimModals/PmusdModal.js

@@ -1,17 +1,10 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Modal from '../uikit-sdk/Modal/index.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Button from '../uikit-sdk/Button/Button.js';
 
 const PmusdModal = ({ onDismiss }) => {
-    return (jsx(Modal, { title: "You've Claimed pmUSD!", children: jsx(Flex, { sx: { flexDirection: 'column' }, children: jsxs(Flex, { sx: { flexDirection: 'column', gap: '10px' }, children: [jsxs(Flex, { sx: {
-                            fontWeight: 500,
-                            fontSize: '14px',
-                            textAlign: 'left',
-                            color: 'textDisabledButton',
-                            my: '10px',
-                            display: 'block',
-                        }, children: ["Base pmUSD rewards succesfully claimed. The additional PVE rewards (10\u201315%) will be automatically transferred to your wallet within the next 24 hours. If you experience any issues or delay, please contact with", ' ', jsx("a", { href: "https://discord.gg/raac", target: "_blank", rel: "noreferrer", sx: { color: 'primaryButton' }, children: "RACC support channel" }), "."] }), jsx(Button, { sx: { width: '100%', mt: '10px' }, onClick: onDismiss, children: "close" })] }) }) }));
+    return (jsx(Modal, { title: "You've Claimed pmUSD!", children: jsx(Flex, { className: "ape:flex-col", children: jsxs(Flex, { className: "ape:flex-col ape:gap-[10px]", children: [jsxs(Flex, { className: "ape:font-medium ape:text-[14px] ape:text-left ape:text-text-disabled-button ape:my-[10px] ape:block", children: ["Base pmUSD rewards succesfully claimed. The additional PVE rewards (10\u201315%) will be automatically transferred to your wallet within the next 24 hours. If you experience any issues or delay, please contact with", ' ', jsx("a", { href: "https://discord.gg/raac", target: "_blank", rel: "noreferrer", className: "ape:text-primary-button", children: "RACC support channel" }), "."] }), jsx(Button, { className: "ape:w-full ape:mt-[10px]", onClick: onDismiss, children: "close" })] }) }) }));
 };
 
 export { PmusdModal as default };

package/dist/components/CustomClaimModals/PmusdModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"PmusdModal.js","sources":["../../../src/components/CustomClaimModals/PmusdModal.tsx"],"sourcesContent":["import React from 'react'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst PmusdModal = ({ onDismiss }: { onDismiss?: () => void }) => {\n  return (\n    <Modal title=\"You've Claimed pmUSD!\">\n      <Flex sx={{ flexDirection: 'column' }}>\n        <Flex sx={{ flexDirection: 'column', gap: '10px' }}>\n          <Flex\n            sx={{\n              fontWeight: 500,\n              fontSize: '14px',\n              textAlign: 'left',\n              color: 'textDisabledButton',\n              my: '10px',\n              display: 'block',\n            }}\n          >\n            Base pmUSD rewards succesfully claimed. The additional PVE rewards (10–15%) will be automatically\n            transferred to your wallet within the next 24 hours. If you experience any issues or delay, please contact\n            with{' '}\n            <a href=\"https://discord.gg/raac\" target=\"_blank\" rel=\"noreferrer\" sx={{ color: 'primaryButton' }}>\n              RACC support channel\n            </a>\n            .\n          </Flex>\n          <Button sx={{ width: '100%', mt: '10px' }} onClick={onDismiss}>\n            close\n          </Button>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default PmusdModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKA,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAA8B,KAAI;AAC/D,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,uBAAuB,EAAA,QAAA,EAClCA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EACnCC,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAChDA,KAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,4BAAA,UAAU,EAAE,GAAG;AACf,4BAAA,QAAQ,EAAE,MAAM;AAChB,4BAAA,SAAS,EAAE,MAAM;AACjB,4BAAA,KAAK,EAAE,oBAAoB;AAC3B,4BAAA,EAAE,EAAE,MAAM;AACV,4BAAA,OAAO,EAAE,OAAO;yBACjB,EAAA,QAAA,EAAA,CAAA,wNAAA,EAII,GAAG,EACRD,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,yBAAyB,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,EAAA,QAAA,EAAA,sBAAA,EAAA,CAE7F,EAAA,GAAA,CAAA,EAAA,CAEC,EACPA,GAAA,CAAC,MAAM,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,sBAEpD,CAAA,EAAA,CACJ,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}
+{"version":3,"file":"PmusdModal.js","sources":["../../../src/components/CustomClaimModals/PmusdModal.tsx"],"sourcesContent":["import React from 'react'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst PmusdModal = ({ onDismiss }: { onDismiss?: () => void }) => {\n  return (\n    <Modal title=\"You've Claimed pmUSD!\">\n      <Flex className=\"ape:flex-col\">\n        <Flex className=\"ape:flex-col ape:gap-[10px]\">\n          <Flex className=\"ape:font-medium ape:text-[14px] ape:text-left ape:text-text-disabled-button ape:my-[10px] ape:block\">\n            Base pmUSD rewards succesfully claimed. The additional PVE rewards (10–15%) will be automatically\n            transferred to your wallet within the next 24 hours. If you experience any issues or delay, please contact\n            with{' '}\n            <a href=\"https://discord.gg/raac\" target=\"_blank\" rel=\"noreferrer\" className=\"ape:text-primary-button\">\n              RACC support channel\n            </a>\n            .\n          </Flex>\n          <Button className=\"ape:w-full ape:mt-[10px]\" onClick={onDismiss}>\n            close\n          </Button>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default PmusdModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKA,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAA8B,KAAI;AAC/D,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,uBAAuB,EAAA,QAAA,EAClCA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAC5BC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAC3CA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,qGAAqG,EAAA,QAAA,EAAA,CAAA,wNAAA,EAG9G,GAAG,EACRD,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,yBAAyB,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,EAAC,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,sBAAA,EAAA,CAElG,EAAA,GAAA,CAAA,EAAA,CAEC,EACPA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAE,SAAS,EAAA,QAAA,EAAA,OAAA,EAAA,CAEtD,CAAA,EAAA,CACJ,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}

package/dist/components/CustomClaimModals/PostClaimModal.d.ts

@@ -0,0 +1,7 @@
+declare const PostClaimModal: ({ tokenSymbol, text, imgUrl, ctaUrl, }: {
+    tokenSymbol: string;
+    text: string;
+    imgUrl: string;
+    ctaUrl: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default PostClaimModal;

package/dist/components/CustomClaimModals/PostClaimModal.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Modal from '../uikit-sdk/Modal/index.js';
+import Flex from '../uikit-sdk/Flex/index.js';
+import Button from '../uikit-sdk/Button/Button.js';
+
+const PostClaimModal = ({ tokenSymbol, text, imgUrl, ctaUrl, }) => {
+    const handleClick = () => {
+        window.open(ctaUrl, '_blank');
+    };
+    return (jsx(Modal, { title: `You've Claimed ${tokenSymbol}!`, children: jsxs(Flex, { className: "ape:flex-col", children: [jsx(Flex, { className: "ape:text-[12px] ape:leading-5 ape:text-primary-button ape:mt-[10px]", children: "Did You Know?" }), jsxs(Flex, { className: "ape:flex-col ape:gap-[10px]", children: [jsx(Flex, { children: text }), jsx("img", { src: imgUrl, onClick: handleClick, className: "ape:cursor-pointer" }), jsx(Button, { className: "ape:w-full ape:mt-[10px]", onClick: handleClick, children: "Claim now" })] })] }) }));
+};
+
+export { PostClaimModal as default };
+//# sourceMappingURL=PostClaimModal.js.map