@ape.swap/bonds-sdk 6.2.12 → 6.2.13

package/dist/components/FavIcons/FavFilter.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const FavIcon: ({ filterOption, setFilterOption, }: {
     filterOption: string;
     setFilterOption: (newOption: string) => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default FavIcon;

package/dist/components/FavIcons/FavFilter.js

@@ -1,4 +1,4 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'framer-motion';
 import Flex from '../uikit-sdk/Flex/index.js';
 import StarFilled from '../uikit-sdk/Svg/Icons/StarFilled.js';
@@ -8,9 +8,9 @@ const FavIcon = ({ filterOption, setFilterOption, }) => {
     const handleFilterOption = (newOption) => {
         setFilterOption(newOption);
     };
-    return (jsx(Flex, { sx: { justifyContent: 'center', alignItems: 'center', minWidth: '25px', cursor: 'pointer', ml: '15px' }, className: "search-fav-icon", onClick: () => {
+    return (jsx(Flex, { className: "search-fav-icon ape:justify-center ape:items-center ape:min-w-[25px] ape:cursor-pointer ape:ml-[15px]", onClick: () => {
             handleFilterOption(filterOption !== 'FAVORITES' ? 'FAVORITES' : 'ALL');
-        }, children: jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { initial: false, animate: { opacity: 1, scale: 1.0 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, style: { display: 'flex', alignItems: 'center' }, children: filterOption === 'FAVORITES' ? (jsx(StarFilled, { width: 22, height: 22 })) : (jsx(Star, { width: 20, height: 20 })) }, filterOption === 'FAVORITES' ? 'StarFilled' : 'Star') }) }));
+        }, children: jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { initial: false, animate: { opacity: 1, scale: 1.0 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, style: { display: 'flex', alignItems: 'center' }, children: filterOption === 'FAVORITES' ? jsx(StarFilled, { width: 22, height: 22 }) : jsx(Star, { width: 20, height: 20 }) }, filterOption === 'FAVORITES' ? 'StarFilled' : 'Star') }) }));
 };
 
 export { FavIcon as default };

package/dist/components/FavIcons/FavFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"FavFilter.js","sources":["../../../src/components/FavIcons/FavFilter.tsx"],"sourcesContent":["import React from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport Flex from '../uikit-sdk/Flex'\nimport StarFilled from '../uikit-sdk/Svg/Icons/StarFilled'\nimport Star from '../uikit-sdk/Svg/Icons/Star'\n\nconst FavIcon = ({\n  filterOption,\n  setFilterOption,\n}: {\n  filterOption: string\n  setFilterOption: (newOption: string) => void\n}) => {\n  const handleFilterOption = (newOption: string) => {\n    setFilterOption(newOption)\n  }\n\n  return (\n    <Flex\n      sx={{ justifyContent: 'center', alignItems: 'center', minWidth: '25px', cursor: 'pointer', ml: '15px' }}\n      className=\"search-fav-icon\"\n      onClick={() => {\n        handleFilterOption(filterOption !== 'FAVORITES' ? 'FAVORITES' : 'ALL')\n      }}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.div\n          key={filterOption === 'FAVORITES' ? 'StarFilled' : 'Star'}\n          initial={false}\n          animate={{ opacity: 1, scale: 1.0 }}\n          exit={{ opacity: 0, scale: 0.8 }}\n          transition={{ duration: 0.2 }}\n          style={{ display: 'flex', alignItems: 'center' }}\n        >\n          {filterOption === 'FAVORITES' ? (\n            <StarFilled width={22} height={22} />\n          ) : (\n            <Star width={20} height={20} />\n          )}\n        </motion.div>\n      </AnimatePresence>\n    </Flex>\n  )\n}\n\nexport default FavIcon\n"],"names":["_jsx"],"mappings":";;;;;;AAMA,MAAM,OAAO,GAAG,CAAC,EACf,YAAY,EACZ,eAAe,GAIhB,KAAI;AACH,IAAA,MAAM,kBAAkB,GAAG,CAAC,SAAiB,KAAI;QAC/C,eAAe,CAAC,SAAS,CAAC;AAC5B,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,EAAE,EACvG,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,MAAK;AACZ,YAAA,kBAAkB,CAAC,YAAY,KAAK,WAAW,GAAG,WAAW,GAAG,KAAK,CAAC;QACxE,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,eAAe,EAAA,EAAC,IAAI,EAAC,MAAM,EAAA,QAAA,EAC1BA,GAAA,CAAC,MAAM,CAAC,GAAG,IAET,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EACnC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAChC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAE/C,YAAY,KAAK,WAAW,IAC3BA,GAAA,CAAC,UAAU,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAA,CAAI,KAErCA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAA,CAAI,CAChC,EAAA,EAXI,YAAY,KAAK,WAAW,GAAG,YAAY,GAAG,MAAM,CAY9C,EAAA,CACG,EAAA,CACb;AAEX;;;;"}
+{"version":3,"file":"FavFilter.js","sources":["../../../src/components/FavIcons/FavFilter.tsx"],"sourcesContent":["import React from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport Flex from '../uikit-sdk/Flex'\nimport StarFilled from '../uikit-sdk/Svg/Icons/StarFilled'\nimport Star from '../uikit-sdk/Svg/Icons/Star'\n\nconst FavIcon = ({\n  filterOption,\n  setFilterOption,\n}: {\n  filterOption: string\n  setFilterOption: (newOption: string) => void\n}) => {\n  const handleFilterOption = (newOption: string) => {\n    setFilterOption(newOption)\n  }\n\n  return (\n    <Flex\n      className=\"search-fav-icon ape:justify-center ape:items-center ape:min-w-[25px] ape:cursor-pointer ape:ml-[15px]\"\n      onClick={() => {\n        handleFilterOption(filterOption !== 'FAVORITES' ? 'FAVORITES' : 'ALL')\n      }}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.div\n          key={filterOption === 'FAVORITES' ? 'StarFilled' : 'Star'}\n          initial={false}\n          animate={{ opacity: 1, scale: 1.0 }}\n          exit={{ opacity: 0, scale: 0.8 }}\n          transition={{ duration: 0.2 }}\n          style={{ display: 'flex', alignItems: 'center' }}\n        >\n          {filterOption === 'FAVORITES' ? <StarFilled width={22} height={22} /> : <Star width={20} height={20} />}\n        </motion.div>\n      </AnimatePresence>\n    </Flex>\n  )\n}\n\nexport default FavIcon\n"],"names":["_jsx"],"mappings":";;;;;;AAMA,MAAM,OAAO,GAAG,CAAC,EACf,YAAY,EACZ,eAAe,GAIhB,KAAI;AACH,IAAA,MAAM,kBAAkB,GAAG,CAAC,SAAiB,KAAI;QAC/C,eAAe,CAAC,SAAS,CAAC;AAC5B,IAAA,CAAC;IAED,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,uGAAuG,EACjH,OAAO,EAAE,MAAK;AACZ,YAAA,kBAAkB,CAAC,YAAY,KAAK,WAAW,GAAG,WAAW,GAAG,KAAK,CAAC;QACxE,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,eAAe,EAAA,EAAC,IAAI,EAAC,MAAM,EAAA,QAAA,EAC1BA,GAAA,CAAC,MAAM,CAAC,GAAG,IAET,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EACnC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAChC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAE/C,YAAY,KAAK,WAAW,GAAGA,GAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAA,CAAI,GAAGA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAA,CAAI,EAAA,EAPlG,YAAY,KAAK,WAAW,GAAG,YAAY,GAAG,MAAM,CAQ9C,EAAA,CACG,EAAA,CACb;AAEX;;;;"}

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

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const LoadingSpinner: ({ isLoading, size }: {
     isLoading: boolean;
     size: number;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default LoadingSpinner;

package/dist/components/LoadingSpinner/index.js

@@ -1,36 +1,14 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import Flex from '../uikit-sdk/Flex/index.js';
 
 const LoadingSpinner = ({ isLoading, size }) => {
-    const stylesLoading = {
-        width: `${size}px`,
-        height: `${size}px`,
-        border: `${size / 8}px solid var(--theme-ui-colors-white5)`,
-        borderTopColor: 'primaryButton',
-        borderRadius: '50%',
-        display: 'inline-block',
-        boxSizing: 'border-box',
-        animation: 'rotation 1s linear infinite',
-        transform: 'rotate(40deg)',
-        '@keyframes rotation': {
-            '0%': {
-                transform: 'rotate(40deg)',
-            },
-            '100%': {
-                transform: 'rotate(400deg)',
-            },
-        },
-    };
-    const styles = {
-        width: `${size}px`,
-        height: `${size}px`,
-        border: `${size / 8}px solid var(--theme-ui-colors-white5)`,
-        borderTopColor: 'white5',
-        borderRadius: '50%',
-        display: 'inline-block',
-        boxSizing: 'border-box',
-    };
-    return jsx(Flex, { sx: isLoading ? stylesLoading : styles });
+    return (jsx(Flex, { className: clsx('ape-spinner', isLoading && 'ape-spinner-loading'), style: {
+            width: `${size}px`,
+            height: `${size}px`,
+            border: `${size / 8}px solid var(--ape-color-white5)`,
+            borderTopColor: isLoading ? 'var(--ape-color-primary-button)' : 'var(--ape-color-white5)',
+        } }));
 };
 
 export { LoadingSpinner as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/LoadingSpinner/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\n\nconst LoadingSpinner = ({ isLoading, size }: { isLoading: boolean; size: number }) => {\n  const stylesLoading = {\n    width: `${size}px`,\n    height: `${size}px`,\n    border: `${size / 8}px solid var(--theme-ui-colors-white5)`,\n    borderTopColor: 'primaryButton',\n    borderRadius: '50%',\n    display: 'inline-block',\n    boxSizing: 'border-box',\n    animation: 'rotation 1s linear infinite',\n    transform: 'rotate(40deg)',\n    '@keyframes rotation': {\n      '0%': {\n        transform: 'rotate(40deg)',\n      },\n      '100%': {\n        transform: 'rotate(400deg)',\n      },\n    },\n  }\n  const styles = {\n    width: `${size}px`,\n    height: `${size}px`,\n    border: `${size / 8}px solid var(--theme-ui-colors-white5)`,\n    borderTopColor: 'white5',\n    borderRadius: '50%',\n    display: 'inline-block',\n    boxSizing: 'border-box',\n  }\n  return <Flex sx={isLoading ? stylesLoading : styles} />\n}\n\nexport default LoadingSpinner\n"],"names":["_jsx"],"mappings":";;;AAGA,MAAM,cAAc,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAwC,KAAI;AACnF,IAAA,MAAM,aAAa,GAAG;QACpB,KAAK,EAAE,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI;QAClB,MAAM,EAAE,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI;AACnB,QAAA,MAAM,EAAE,CAAA,EAAG,IAAI,GAAG,CAAC,CAAA,sCAAA,CAAwC;AAC3D,QAAA,cAAc,EAAE,eAAe;AAC/B,QAAA,YAAY,EAAE,KAAK;AACnB,QAAA,OAAO,EAAE,cAAc;AACvB,QAAA,SAAS,EAAE,YAAY;AACvB,QAAA,SAAS,EAAE,6BAA6B;AACxC,QAAA,SAAS,EAAE,eAAe;AAC1B,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE;AACJ,gBAAA,SAAS,EAAE,eAAe;AAC3B,aAAA;AACD,YAAA,MAAM,EAAE;AACN,gBAAA,SAAS,EAAE,gBAAgB;AAC5B,aAAA;AACF,SAAA;KACF;AACD,IAAA,MAAM,MAAM,GAAG;QACb,KAAK,EAAE,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI;QAClB,MAAM,EAAE,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI;AACnB,QAAA,MAAM,EAAE,CAAA,EAAG,IAAI,GAAG,CAAC,CAAA,sCAAA,CAAwC;AAC3D,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,YAAY,EAAE,KAAK;AACnB,QAAA,OAAO,EAAE,cAAc;AACvB,QAAA,SAAS,EAAE,YAAY;KACxB;AACD,IAAA,OAAOA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,SAAS,GAAG,aAAa,GAAG,MAAM,GAAI;AACzD;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/LoadingSpinner/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport Flex from '../uikit-sdk/Flex'\n\nconst LoadingSpinner = ({ isLoading, size }: { isLoading: boolean; size: number }) => {\n  return (\n    <Flex\n      className={clsx('ape-spinner', isLoading && 'ape-spinner-loading')}\n      style={{\n        width: `${size}px`,\n        height: `${size}px`,\n        border: `${size / 8}px solid var(--ape-color-white5)`,\n        borderTopColor: isLoading ? 'var(--ape-color-primary-button)' : 'var(--ape-color-white5)',\n      }}\n    />\n  )\n}\n\nexport default LoadingSpinner\n"],"names":["_jsx"],"mappings":";;;;AAIA,MAAM,cAAc,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAwC,KAAI;AACnF,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,IAAI,qBAAqB,CAAC,EAClE,KAAK,EAAE;YACL,KAAK,EAAE,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI;YAClB,MAAM,EAAE,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI;AACnB,YAAA,MAAM,EAAE,CAAA,EAAG,IAAI,GAAG,CAAC,CAAA,gCAAA,CAAkC;YACrD,cAAc,EAAE,SAAS,GAAG,iCAAiC,GAAG,yBAAyB;AAC1F,SAAA,EAAA,CACD;AAEN;;;;"}

package/dist/components/MenuSelect/MenuSelect.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 type Option = {
     label: string;
     value: string;
@@ -7,5 +6,5 @@ declare const MenuSelect: ({ selectedOption, setOption, options, ...props }: {
     selectedOption: string;
     setOption: (option: string) => void;
     options: Option[] | undefined;
-} | any) => React.JSX.Element;
+} | any) => import("react/jsx-runtime").JSX.Element;
 export default MenuSelect;

package/dist/components/MenuSelect/MenuSelect.js

@@ -1,17 +1,20 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import Select from '../uikit-sdk/Select/Select.js';
 import SelectItem from '../uikit-sdk/Select/SelectItem.js';
 import Text from '../uikit-sdk/Text/index.js';
 
 const MenuSelect = ({ selectedOption, setOption, options, ...props }) => {
-    return (jsx(Select, { size: "xsm", onChange: (e) => setOption(e.target.value), active: selectedOption, sx: {
-            height: '36px',
-            display: 'flex',
-            width: '100%',
-            paddingRight: '4px',
-            background: 'white2',
-        }, ...props, className: "dropdown", children: options?.map((option) => {
-            return (jsx(SelectItem, { size: "xsm", value: option.value, children: jsx(Text, { sx: { fontWeight: 400, pl: '10px' }, className: "menu-selector", children: option.label }) }, option.label));
+    return (jsx(Select, { size: "xsm", onChange: (e) => setOption(e.target.value), active: selectedOption, 
+        // Select applies `width` as inline style, which is the only reliable way
+        // to beat its own base classes (`ape:h-fit` etc.) — a `w-full` class here
+        // would silently lose to that inline style, same reasoning as the `h-fit`
+        // vs `h-[36px]` conflict below.
+        width: "100%", ...props, 
+        // `!` is required: Select's own base classes include `ape:h-fit`, and
+        // Tailwind's internal class ordering — not this string's order — decides
+        // which of two same-specificity utilities wins.
+        className: "dropdown ape:h-[36px]! ape:flex ape:pr-[4px] ape:bg-white2", children: options?.map((option) => {
+            return (jsx(SelectItem, { size: "xsm", value: option.value, children: jsx(Text, { className: "menu-selector ape:font-normal ape:pl-[10px]", children: option.label }) }, option.label));
         }) }));
 };
 

package/dist/components/MenuSelect/MenuSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSelect.js","sources":["../../../src/components/MenuSelect/MenuSelect.tsx"],"sourcesContent":["import React from 'react'\nimport Select from '../uikit-sdk/Select/Select'\nimport SelectItem from '../uikit-sdk/Select/SelectItem'\nimport Text from '../uikit-sdk/Text'\n\ntype Option = {\n  label: string\n  value: string\n}\n\nconst MenuSelect = ({\n  selectedOption,\n  setOption,\n  options,\n  ...props\n}:\n  | {\n      selectedOption: string\n      setOption: (option: string) => void\n      options: Option[] | undefined\n    }\n  | any) => {\n  return (\n    <Select\n      size=\"xsm\"\n      onChange={(e) => setOption(e.target.value)}\n      active={selectedOption}\n      sx={{\n        height: '36px',\n        display: 'flex',\n        width: '100%',\n        paddingRight: '4px',\n        background: 'white2',\n      }}\n      {...props}\n      className=\"dropdown\"\n    >\n      {options?.map((option: Option) => {\n        return (\n          <SelectItem size=\"xsm\" value={option.value} key={option.label}>\n            <Text sx={{ fontWeight: 400, pl: '10px' }} className=\"menu-selector\">\n              {option.label}\n            </Text>\n          </SelectItem>\n        )\n      })}\n    </Select>\n  )\n}\n\nexport default MenuSelect\n"],"names":["_jsx"],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,CAAC,EAClB,cAAc,EACd,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EAOH,KAAI;AACT,IAAA,QACEA,GAAA,CAAC,MAAM,EAAA,EACL,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC1C,MAAM,EAAE,cAAc,EACtB,EAAE,EAAE;AACF,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,UAAU,EAAE,QAAQ;AACrB,SAAA,EAAA,GACG,KAAK,EACT,SAAS,EAAC,UAAU,EAAA,QAAA,EAEnB,OAAO,EAAE,GAAG,CAAC,CAAC,MAAc,KAAI;AAC/B,YAAA,QACEA,GAAA,CAAC,UAAU,IAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAA,QAAA,EACxCA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,SAAS,EAAC,eAAe,EAAA,QAAA,EACjE,MAAM,CAAC,KAAK,GACR,EAAA,EAHwC,MAAM,CAAC,KAAK,CAIhD;QAEjB,CAAC,CAAC,EAAA,CACK;AAEb;;;;"}
+{"version":3,"file":"MenuSelect.js","sources":["../../../src/components/MenuSelect/MenuSelect.tsx"],"sourcesContent":["import React from 'react'\nimport Select from '../uikit-sdk/Select/Select'\nimport SelectItem from '../uikit-sdk/Select/SelectItem'\nimport Text from '../uikit-sdk/Text'\n\ntype Option = {\n  label: string\n  value: string\n}\n\nconst MenuSelect = ({\n  selectedOption,\n  setOption,\n  options,\n  ...props\n}:\n  | {\n      selectedOption: string\n      setOption: (option: string) => void\n      options: Option[] | undefined\n    }\n  | any) => {\n  return (\n    <Select\n      size=\"xsm\"\n      onChange={(e) => setOption(e.target.value)}\n      active={selectedOption}\n      // Select applies `width` as inline style, which is the only reliable way\n      // to beat its own base classes (`ape:h-fit` etc.) — a `w-full` class here\n      // would silently lose to that inline style, same reasoning as the `h-fit`\n      // vs `h-[36px]` conflict below.\n      width=\"100%\"\n      {...props}\n      // `!` is required: Select's own base classes include `ape:h-fit`, and\n      // Tailwind's internal class ordering — not this string's order — decides\n      // which of two same-specificity utilities wins.\n      className=\"dropdown ape:h-[36px]! ape:flex ape:pr-[4px] ape:bg-white2\"\n    >\n      {options?.map((option: Option) => {\n        return (\n          <SelectItem size=\"xsm\" value={option.value} key={option.label}>\n            <Text className=\"menu-selector ape:font-normal ape:pl-[10px]\">{option.label}</Text>\n          </SelectItem>\n        )\n      })}\n    </Select>\n  )\n}\n\nexport default MenuSelect\n"],"names":["_jsx"],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,CAAC,EAClB,cAAc,EACd,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EAOH,KAAI;IACT,QACEA,GAAA,CAAC,MAAM,EAAA,EACL,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC1C,MAAM,EAAE,cAAc;;;;;QAKtB,KAAK,EAAC,MAAM,EAAA,GACR,KAAK;;;;QAIT,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAErE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAc,KAAI;AAC/B,YAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAA,QAAA,EACxCA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAAE,MAAM,CAAC,KAAK,EAAA,CAAQ,EAAA,EADpC,MAAM,CAAC,KAAK,CAEhD;QAEjB,CAAC,CAAC,EAAA,CACK;AAEb;;;;"}

package/dist/components/MenuSelect/RecommendationSelector.d.ts

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

package/dist/components/MenuSelect/RecommendationSelector.js

@@ -1,4 +1,5 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import Flex from '../uikit-sdk/Flex/index.js';
 import track from '../../utils/track.js';
 
@@ -13,30 +14,9 @@ const RecommendationSelector = ({ options, activeOption, setActiveOption, }) =>
             },
         });
     };
-    return (jsx(Flex, { sx: {
-            alignItems: 'center',
-            color: 'grey',
-            fontSize: ['11px'],
-            fontWeight: 500,
-            '& > div:last-child': {
-                marginRight: '0',
-            },
-        }, children: options.map((option) => {
+    return (jsx(Flex, { className: "ape:items-center ape:text-[11px] ape:font-medium ape:[&>div:last-child]:mr-0", style: { color: 'grey' }, children: options.map((option) => {
             const isActive = option === activeOption;
-            return (jsx(Flex, { sx: {
-                    background: isActive ? 'primaryButton' : 'white2',
-                    color: isActive ? 'primaryBright' : 'textDisabledButton',
-                    px: ['6px', '6px', '6px', '10px'],
-                    borderRadius: 'normal',
-                    mr: ['8px', '8px', '8px', '10px'],
-                    textTransform: 'uppercase',
-                    cursor: 'pointer',
-                    lineHeight: '11px',
-                    alignItems: 'center',
-                    height: '24px',
-                    opacity: 0.8,
-                    '&:hover': { opacity: 0.6 },
-                }, onClick: () => handleClick(option), children: option }, option));
+            return (jsx(Flex, { className: clsx('ape:px-[6px] ape:lg:px-[10px] ape:rounded-normal ape:mr-[8px] ape:lg:mr-[10px] ape:uppercase ape:cursor-pointer ape:leading-[11px] ape:items-center ape:h-[24px] ape:opacity-80 ape:hover:opacity-60', isActive ? 'ape:bg-primary-button ape:text-primary-bright' : 'ape:bg-white2 ape:text-text-disabled-button'), onClick: () => handleClick(option), children: option }, option));
         }) }));
 };
 

package/dist/components/MenuSelect/RecommendationSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecommendationSelector.js","sources":["../../../src/components/MenuSelect/RecommendationSelector.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport track from '../../utils/track'\n\nconst RecommendationSelector = ({\n  options,\n  activeOption,\n  setActiveOption,\n}: {\n  options: string[]\n  activeOption: string\n  setActiveOption: (activeOption: string) => void\n}) => {\n  const handleClick = (option: string) => {\n    setActiveOption(option)\n    track({\n      event: 'filterOption',\n      chain: 0,\n      data: {\n        filterOption: option,\n      },\n    })\n  }\n\n  return (\n    <Flex\n      sx={{\n        alignItems: 'center',\n        color: 'grey',\n        fontSize: ['11px'],\n        fontWeight: 500,\n        '& > div:last-child': {\n          marginRight: '0',\n        },\n      }}\n    >\n      {options.map((option) => {\n        const isActive = option === activeOption\n        return (\n          <Flex\n            key={option}\n            sx={{\n              background: isActive ? 'primaryButton' : 'white2',\n              color: isActive ? 'primaryBright' : 'textDisabledButton',\n              px: ['6px', '6px', '6px', '10px'],\n              borderRadius: 'normal',\n              mr: ['8px', '8px', '8px', '10px'],\n              textTransform: 'uppercase',\n              cursor: 'pointer',\n              lineHeight: '11px',\n              alignItems: 'center',\n              height: '24px',\n              opacity: 0.8,\n              '&:hover': { opacity: 0.6 },\n            }}\n            onClick={() => handleClick(option)}\n          >\n            {option}\n          </Flex>\n        )\n      })}\n    </Flex>\n  )\n}\n\nexport default RecommendationSelector\n"],"names":["_jsx"],"mappings":";;;;AAIA,MAAM,sBAAsB,GAAG,CAAC,EAC9B,OAAO,EACP,YAAY,EACZ,eAAe,GAKhB,KAAI;AACH,IAAA,MAAM,WAAW,GAAG,CAAC,MAAc,KAAI;QACrC,eAAe,CAAC,MAAM,CAAC;AACvB,QAAA,KAAK,CAAC;AACJ,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,KAAK,EAAE,CAAC;AACR,YAAA,IAAI,EAAE;AACJ,gBAAA,YAAY,EAAE,MAAM;AACrB,aAAA;AACF,SAAA,CAAC;AACJ,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,CAAC,MAAM,CAAC;AAClB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,oBAAoB,EAAE;AACpB,gBAAA,WAAW,EAAE,GAAG;AACjB,aAAA;AACF,SAAA,EAAA,QAAA,EAEA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;AACtB,YAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,YAAY;AACxC,YAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAEH,EAAE,EAAE;oBACF,UAAU,EAAE,QAAQ,GAAG,eAAe,GAAG,QAAQ;oBACjD,KAAK,EAAE,QAAQ,GAAG,eAAe,GAAG,oBAAoB;oBACxD,EAAE,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC;AACjC,oBAAA,YAAY,EAAE,QAAQ;oBACtB,EAAE,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC;AACjC,oBAAA,aAAa,EAAE,WAAW;AAC1B,oBAAA,MAAM,EAAE,SAAS;AACjB,oBAAA,UAAU,EAAE,MAAM;AAClB,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,MAAM,EAAE,MAAM;AACd,oBAAA,OAAO,EAAE,GAAG;AACZ,oBAAA,SAAS,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;AAC5B,iBAAA,EACD,OAAO,EAAE,MAAM,WAAW,CAAC,MAAM,CAAC,YAEjC,MAAM,EAAA,EAjBF,MAAM,CAkBN;QAEX,CAAC,CAAC,EAAA,CACG;AAEX;;;;"}
+{"version":3,"file":"RecommendationSelector.js","sources":["../../../src/components/MenuSelect/RecommendationSelector.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport Flex from '../uikit-sdk/Flex'\nimport track from '../../utils/track'\n\nconst RecommendationSelector = ({\n  options,\n  activeOption,\n  setActiveOption,\n}: {\n  options: string[]\n  activeOption: string\n  setActiveOption: (activeOption: string) => void\n}) => {\n  const handleClick = (option: string) => {\n    setActiveOption(option)\n    track({\n      event: 'filterOption',\n      chain: 0,\n      data: {\n        filterOption: option,\n      },\n    })\n  }\n\n  return (\n    <Flex className=\"ape:items-center ape:text-[11px] ape:font-medium ape:[&>div:last-child]:mr-0\" style={{ color: 'grey' }}>\n      {options.map((option) => {\n        const isActive = option === activeOption\n        return (\n          <Flex\n            key={option}\n            className={clsx(\n              'ape:px-[6px] ape:lg:px-[10px] ape:rounded-normal ape:mr-[8px] ape:lg:mr-[10px] ape:uppercase ape:cursor-pointer ape:leading-[11px] ape:items-center ape:h-[24px] ape:opacity-80 ape:hover:opacity-60',\n              isActive ? 'ape:bg-primary-button ape:text-primary-bright' : 'ape:bg-white2 ape:text-text-disabled-button',\n            )}\n            onClick={() => handleClick(option)}\n          >\n            {option}\n          </Flex>\n        )\n      })}\n    </Flex>\n  )\n}\n\nexport default RecommendationSelector\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,sBAAsB,GAAG,CAAC,EAC9B,OAAO,EACP,YAAY,EACZ,eAAe,GAKhB,KAAI;AACH,IAAA,MAAM,WAAW,GAAG,CAAC,MAAc,KAAI;QACrC,eAAe,CAAC,MAAM,CAAC;AACvB,QAAA,KAAK,CAAC;AACJ,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,KAAK,EAAE,CAAC;AACR,YAAA,IAAI,EAAE;AACJ,gBAAA,YAAY,EAAE,MAAM;AACrB,aAAA;AACF,SAAA,CAAC;AACJ,IAAA,CAAC;IAED,QACEA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8EAA8E,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,QAAA,EACpH,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;AACtB,YAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,YAAY;AACxC,YAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAEH,SAAS,EAAE,IAAI,CACb,sMAAsM,EACtM,QAAQ,GAAG,+CAA+C,GAAG,6CAA6C,CAC3G,EACD,OAAO,EAAE,MAAM,WAAW,CAAC,MAAM,CAAC,YAEjC,MAAM,EAAA,EAPF,MAAM,CAQN;QAEX,CAAC,CAAC,EAAA,CACG;AAEX;;;;"}

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

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const NetworkFilter: ({ chainFilterOption, setChainFilterOption, }: {
     chainFilterOption: string[];
     setChainFilterOption: (newValue: string[]) => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default NetworkFilter;

package/dist/components/NetworkFilter/index.js

@@ -1,5 +1,6 @@
-import { jsxs, jsx, Fragment } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
+import clsx from 'clsx';
 import { TESTNET_CHAINS, NETWORK_ICONS, NETWORK_LABEL, MAINNET_CHAINS } from '../../config/constants/chains.js';
 import Checkbox from '../uikit-sdk/Checkbox/index.js';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
@@ -9,6 +10,7 @@ import Caret from '../uikit-sdk/Svg/Icons/Caret.js';
 import AllChains from '../uikit-sdk/Svg/Icons/AllChains.js';
 import Question from '../uikit-sdk/Svg/Icons/Question.js';
 
+const rowClasses = 'ape:rounded-normal ape:p-[5px_15px] ape:min-h-[40px] ape:cursor-pointer ape:hover:bg-white3';
 const NetworkFilter = ({ chainFilterOption, setChainFilterOption, }) => {
     // Hooks
     const SDKConfig = useSDKConfig();
@@ -50,59 +52,19 @@ const NetworkFilter = ({ chainFilterOption, setChainFilterOption, }) => {
         }
         setChainFilterOption(newChainFilterOption);
     };
-    return (jsxs(Flex, { sx: { width: '100%', position: 'relative' }, children: [isOpen && (
+    return (jsxs(Flex, { className: "ape:w-full ape:relative", children: [isOpen && (
             // Backdrop that closes the dropdown if a user clicks outside of it
-            jsx(Flex, { sx: {
-                    background: 'transparent',
-                    position: 'fixed',
-                    top: 0,
-                    left: 0,
-                    width: '100vw',
-                    height: '100vh',
-                    zIndex: 1000,
-                }, onClick: () => setIsOpen(false) })), jsxs(Flex, { sx: {
-                    background: 'white2',
-                    p: '6px',
-                    borderRadius: 'normal',
-                    cursor: 'pointer',
-                    alignItems: 'center',
-                    width: '100%',
-                    justifyContent: 'space-between',
-                }, onClick: () => setIsOpen(!isOpen), className: "dropdown", children: [jsx(Text, { sx: { lineHeight: '22px', fontSize: '14px', fontWeight: 400, px: '10px' }, children: chainFilterOption.includes('All Chains') ? 'All Chains' : `Chains (${chainFilterOption.length})` }), jsx(Flex, { sx: { ml: '5px' }, children: jsx(Caret, { direction: isOpen ? 'up' : 'down' }) })] }), isOpen && (jsxs(Flex, { sx: {
-                    flexDirection: ['column', 'column', 'column'],
-                    position: 'absolute',
-                    top: '45px',
-                    right: '0px',
-                    width: '235px',
-                    maxHeight: ['300px', '300px', '350px'],
-                    overflowY: 'scroll',
-                    borderRadius: 'normal',
-                    background: 'white2',
-                    zIndex: 1001,
-                }, children: [['All Chains', ...mainnetChains].map((chainId) => {
-                        return (jsx(Flex, { sx: {
-                                borderRadius: 'normal',
-                                p: '5px 15px',
-                                minHeight: '40px',
-                                cursor: 'pointer',
-                                '&:hover': { bg: 'white3' },
-                            }, onClick: () => handleCheckbox(chainId.toString()), children: jsxs(Flex, { sx: { width: '100%', alignItems: 'center', fontSize: '14px' }, children: [jsx(Checkbox, { checked: chainFilterOption.includes(chainId.toString()), onChange: () => handleCheckbox(chainId.toString()) }), chainId === 'All Chains' ? (jsxs(Fragment, { children: [jsx(Flex, { sx: { mx: '8px' }, children: jsx(AllChains, { width: "22px" }) }), jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: "All Chains" })] })) : (jsxs(Fragment, { children: [jsx(Flex, { sx: { mx: '8px', borderRadius: '50px', overflow: 'hidden' }, children: (() => {
+            jsx(Flex, { className: "ape:bg-transparent ape:fixed ape:top-0 ape:left-0 ape:w-screen ape:h-screen ape:z-[1000]", onClick: () => setIsOpen(false) })), jsxs(Flex, { className: "dropdown ape:bg-white2 ape:p-[6px] ape:rounded-normal ape:cursor-pointer ape:items-center ape:w-full ape:justify-between", onClick: () => setIsOpen(!isOpen), children: [jsx(Text, { size: "14px", className: "ape:font-normal ape:px-[10px]", style: { lineHeight: '22px' }, children: chainFilterOption.includes('All Chains') ? 'All Chains' : `Chains (${chainFilterOption.length})` }), jsx(Flex, { className: "ape:ml-[5px]", children: jsx(Caret, { direction: isOpen ? 'up' : 'down' }) })] }), isOpen && (jsxs(Flex, { className: "ape:flex-col ape:absolute ape:top-[45px] ape:right-0 ape:w-[235px] ape:max-h-[300px] ape:md:max-h-[350px] ape:overflow-y-scroll ape:rounded-normal ape:bg-white2 ape:z-[1001]", children: [['All Chains', ...mainnetChains].map((chainId) => {
+                        return (jsx(Flex, { className: rowClasses, onClick: () => handleCheckbox(chainId.toString()), children: jsxs(Flex, { className: "ape:w-full ape:items-center ape:text-[14px]", children: [jsx(Checkbox, { checked: chainFilterOption.includes(chainId.toString()), onChange: () => handleCheckbox(chainId.toString()) }), chainId === 'All Chains' ? (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:mx-[8px]", children: jsx(AllChains, { width: "22px" }) }), jsx(Text, { size: "14px", className: "ape:font-normal", style: { lineHeight: '22px' }, children: "All Chains" })] })) : (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:mx-[8px] ape:rounded-[50px] ape:overflow-hidden", children: (() => {
                                                     const ChainIcon = NETWORK_ICONS[chainId] ?? Question;
                                                     return jsx(ChainIcon, { width: "22px" });
-                                                })() }), jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
+                                                })() }), jsx(Text, { size: "14px", className: "ape:font-normal", style: { lineHeight: '22px' }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
                     }), testnetChains.length > 0 &&
                         ['All Testnet', ...testnetChains].map((chainId) => {
-                            return (jsx(Flex, { sx: {
-                                    borderRadius: 'normal',
-                                    p: '5px 15px',
-                                    minHeight: '40px',
-                                    cursor: 'pointer',
-                                    '&:hover': { bg: 'white3' },
-                                    pl: chainId !== 'All Testnet' ? '35px' : '15px',
-                                }, onClick: () => handleCheckbox(chainId.toString()), children: jsxs(Flex, { sx: { width: '100%', alignItems: 'center', fontSize: '14px' }, children: [jsx(Checkbox, { checked: chainFilterOption.includes(chainId.toString()), onChange: () => handleCheckbox(chainId.toString()) }), chainId === 'All Testnet' ? (jsxs(Fragment, { children: [jsx(Flex, { sx: { mx: '8px' }, children: jsx(AllChains, { width: "22px" }) }), jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: "All Testnet" })] })) : (jsxs(Fragment, { children: [jsx(Flex, { sx: { mx: '8px', borderRadius: '50px', overflow: 'hidden' }, children: (() => {
+                            return (jsx(Flex, { className: clsx(rowClasses, chainId !== 'All Testnet' ? 'ape:pl-[35px]' : 'ape:pl-[15px]'), onClick: () => handleCheckbox(chainId.toString()), children: jsxs(Flex, { className: "ape:w-full ape:items-center ape:text-[14px]", children: [jsx(Checkbox, { checked: chainFilterOption.includes(chainId.toString()), onChange: () => handleCheckbox(chainId.toString()) }), chainId === 'All Testnet' ? (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:mx-[8px]", children: jsx(AllChains, { width: "22px" }) }), jsx(Text, { size: "14px", className: "ape:font-normal", style: { lineHeight: '22px' }, children: "All Testnet" })] })) : (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:mx-[8px] ape:rounded-[50px] ape:overflow-hidden", children: (() => {
                                                         const ChainIcon = NETWORK_ICONS[chainId] ?? Question;
                                                         return jsx(ChainIcon, { width: "22px" });
-                                                    })() }), jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
+                                                    })() }), jsx(Text, { size: "14px", className: "ape:font-normal", style: { lineHeight: '22px' }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
                         })] }))] }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/NetworkFilter/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { MAINNET_CHAINS, NETWORK_ICONS, NETWORK_LABEL, TESTNET_CHAINS } from '../../config/constants/chains'\nimport Checkbox from '../../components/uikit-sdk/Checkbox'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport Caret from '../uikit-sdk/Svg/Icons/Caret'\nimport AllChains from '../uikit-sdk/Svg/Icons/AllChains'\nimport Question from '../uikit-sdk/Svg/Icons/Question'\n\nconst NetworkFilter = ({\n  chainFilterOption,\n  setChainFilterOption,\n}: {\n  chainFilterOption: string[]\n  setChainFilterOption: (newValue: string[]) => void\n}) => {\n  // Hooks\n  const SDKConfig = useSDKConfig()\n  const chains = SDKConfig?.chains as number[]\n  const mainnetChains = chains.filter((item) => !TESTNET_CHAINS.includes(item))\n  const testnetChains = chains.filter((item) => TESTNET_CHAINS.includes(item))\n\n  // State\n  const [isOpen, setIsOpen] = useState(false)\n\n  // Handlers\n  const handleCheckbox = (newChain: string) => {\n    const prevChainFilterOptions = chainFilterOption.map(String)\n    let newChainFilterOption: string[]\n\n    if (newChain === 'All Chains') {\n      newChainFilterOption = ['All Chains']\n    } else if (newChain === 'All Testnet') {\n      if (prevChainFilterOptions.includes('All Testnet')) {\n        newChainFilterOption = prevChainFilterOptions.filter(\n          (option) => ![...testnetChains.map((t) => t.toString()), 'All Testnet'].includes(option),\n        )\n      } else {\n        newChainFilterOption = [\n          ...prevChainFilterOptions.filter((option) => option !== 'All Chains'),\n          ...testnetChains.map((t) => t.toString()),\n          'All Testnet',\n        ]\n      }\n      newChainFilterOption = newChainFilterOption.length === 0 ? ['All Chains'] : newChainFilterOption\n    } else {\n      if (prevChainFilterOptions.includes(newChain)) {\n        const filteredChains = prevChainFilterOptions.filter((option) => option !== newChain)\n        newChainFilterOption = filteredChains.length === 0 ? ['All Chains'] : filteredChains\n      } else {\n        const newArray = [...prevChainFilterOptions.filter((option) => option !== 'All Chains'), newChain]\n\n        const allMainnetsSelected = MAINNET_CHAINS.every((chain) => newArray.includes(chain.toString()))\n        newChainFilterOption = allMainnetsSelected ? ['All Chains'] : newArray\n      }\n    }\n\n    setChainFilterOption(newChainFilterOption)\n  }\n\n  return (\n    <Flex sx={{ width: '100%', position: 'relative' }}>\n      {isOpen && (\n        // Backdrop that closes the dropdown if a user clicks outside of it\n        <Flex\n          sx={{\n            background: 'transparent',\n            position: 'fixed',\n            top: 0,\n            left: 0,\n            width: '100vw',\n            height: '100vh',\n            zIndex: 1000,\n          }}\n          onClick={() => setIsOpen(false)}\n        />\n      )}\n      <Flex\n        sx={{\n          background: 'white2',\n          p: '6px',\n          borderRadius: 'normal',\n          cursor: 'pointer',\n          alignItems: 'center',\n          width: '100%',\n          justifyContent: 'space-between',\n        }}\n        onClick={() => setIsOpen(!isOpen)}\n        className=\"dropdown\"\n      >\n        <Text sx={{ lineHeight: '22px', fontSize: '14px', fontWeight: 400, px: '10px' }}>\n          {chainFilterOption.includes('All Chains') ? 'All Chains' : `Chains (${chainFilterOption.length})`}\n        </Text>\n        <Flex sx={{ ml: '5px' }}>\n          <Caret direction={isOpen ? 'up' : 'down'} />\n        </Flex>\n      </Flex>\n      {isOpen && (\n        <Flex\n          sx={{\n            flexDirection: ['column', 'column', 'column'],\n            position: 'absolute',\n            top: '45px',\n            right: '0px',\n            width: '235px',\n            maxHeight: ['300px', '300px', '350px'],\n            overflowY: 'scroll',\n            borderRadius: 'normal',\n            background: 'white2',\n            zIndex: 1001,\n          }}\n        >\n          {['All Chains', ...mainnetChains].map((chainId) => {\n            return (\n              <Flex\n                key={chainId}\n                sx={{\n                  borderRadius: 'normal',\n                  p: '5px 15px',\n                  minHeight: '40px',\n                  cursor: 'pointer',\n                  '&:hover': { bg: 'white3' },\n                }}\n                onClick={() => handleCheckbox(chainId.toString())}\n              >\n                <Flex sx={{ width: '100%', alignItems: 'center', fontSize: '14px' }}>\n                  <Checkbox\n                    checked={chainFilterOption.includes(chainId.toString())}\n                    onChange={() => handleCheckbox(chainId.toString())}\n                  />\n                  {chainId === 'All Chains' ? (\n                    <>\n                      <Flex sx={{ mx: '8px' }}>\n                        <AllChains width=\"22px\" />\n                      </Flex>\n                      <Text sx={{ lineHeight: '22px', fontWeight: 400 }}>All Chains</Text>\n                    </>\n                  ) : (\n                    <>\n                      <Flex sx={{ mx: '8px', borderRadius: '50px', overflow: 'hidden' }}>\n                        {(() => {\n                          const ChainIcon = NETWORK_ICONS[chainId as ChainId] ?? Question\n                          return <ChainIcon width=\"22px\" />\n                        })()}\n                      </Flex>\n                      <Text sx={{ lineHeight: '22px', fontWeight: 400 }}>{NETWORK_LABEL[chainId as ChainId]}</Text>\n                    </>\n                  )}\n                </Flex>\n              </Flex>\n            )\n          })}\n          {testnetChains.length > 0 &&\n            ['All Testnet', ...testnetChains].map((chainId) => {\n              return (\n                <Flex\n                  key={chainId}\n                  sx={{\n                    borderRadius: 'normal',\n                    p: '5px 15px',\n                    minHeight: '40px',\n                    cursor: 'pointer',\n                    '&:hover': { bg: 'white3' },\n                    pl: chainId !== 'All Testnet' ? '35px' : '15px',\n                  }}\n                  onClick={() => handleCheckbox(chainId.toString())}\n                >\n                  <Flex sx={{ width: '100%', alignItems: 'center', fontSize: '14px' }}>\n                    <Checkbox\n                      checked={chainFilterOption.includes(chainId.toString())}\n                      onChange={() => handleCheckbox(chainId.toString())}\n                    />\n                    {chainId === 'All Testnet' ? (\n                      <>\n                        <Flex sx={{ mx: '8px' }}>\n                          <AllChains width=\"22px\" />\n                        </Flex>\n                        <Text sx={{ lineHeight: '22px', fontWeight: 400 }}>All Testnet</Text>\n                      </>\n                    ) : (\n                      <>\n                        <Flex sx={{ mx: '8px', borderRadius: '50px', overflow: 'hidden' }}>\n                          {(() => {\n                            const ChainIcon = NETWORK_ICONS[chainId as ChainId] ?? Question\n                            return <ChainIcon width=\"22px\" />\n                          })()}\n                        </Flex>\n                        <Text sx={{ lineHeight: '22px', fontWeight: 400 }}>{NETWORK_LABEL[chainId as ChainId]}</Text>\n                      </>\n                    )}\n                  </Flex>\n                </Flex>\n              )\n            })}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default NetworkFilter\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/NetworkFilter/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport clsx from 'clsx'\nimport { MAINNET_CHAINS, NETWORK_ICONS, NETWORK_LABEL, TESTNET_CHAINS } from '../../config/constants/chains'\nimport Checkbox from '../../components/uikit-sdk/Checkbox'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport Caret from '../uikit-sdk/Svg/Icons/Caret'\nimport AllChains from '../uikit-sdk/Svg/Icons/AllChains'\nimport Question from '../uikit-sdk/Svg/Icons/Question'\n\nconst rowClasses = 'ape:rounded-normal ape:p-[5px_15px] ape:min-h-[40px] ape:cursor-pointer ape:hover:bg-white3'\n\nconst NetworkFilter = ({\n  chainFilterOption,\n  setChainFilterOption,\n}: {\n  chainFilterOption: string[]\n  setChainFilterOption: (newValue: string[]) => void\n}) => {\n  // Hooks\n  const SDKConfig = useSDKConfig()\n  const chains = SDKConfig?.chains as number[]\n  const mainnetChains = chains.filter((item) => !TESTNET_CHAINS.includes(item))\n  const testnetChains = chains.filter((item) => TESTNET_CHAINS.includes(item))\n\n  // State\n  const [isOpen, setIsOpen] = useState(false)\n\n  // Handlers\n  const handleCheckbox = (newChain: string) => {\n    const prevChainFilterOptions = chainFilterOption.map(String)\n    let newChainFilterOption: string[]\n\n    if (newChain === 'All Chains') {\n      newChainFilterOption = ['All Chains']\n    } else if (newChain === 'All Testnet') {\n      if (prevChainFilterOptions.includes('All Testnet')) {\n        newChainFilterOption = prevChainFilterOptions.filter(\n          (option) => ![...testnetChains.map((t) => t.toString()), 'All Testnet'].includes(option),\n        )\n      } else {\n        newChainFilterOption = [\n          ...prevChainFilterOptions.filter((option) => option !== 'All Chains'),\n          ...testnetChains.map((t) => t.toString()),\n          'All Testnet',\n        ]\n      }\n      newChainFilterOption = newChainFilterOption.length === 0 ? ['All Chains'] : newChainFilterOption\n    } else {\n      if (prevChainFilterOptions.includes(newChain)) {\n        const filteredChains = prevChainFilterOptions.filter((option) => option !== newChain)\n        newChainFilterOption = filteredChains.length === 0 ? ['All Chains'] : filteredChains\n      } else {\n        const newArray = [...prevChainFilterOptions.filter((option) => option !== 'All Chains'), newChain]\n\n        const allMainnetsSelected = MAINNET_CHAINS.every((chain) => newArray.includes(chain.toString()))\n        newChainFilterOption = allMainnetsSelected ? ['All Chains'] : newArray\n      }\n    }\n\n    setChainFilterOption(newChainFilterOption)\n  }\n\n  return (\n    <Flex className=\"ape:w-full ape:relative\">\n      {isOpen && (\n        // Backdrop that closes the dropdown if a user clicks outside of it\n        <Flex\n          className=\"ape:bg-transparent ape:fixed ape:top-0 ape:left-0 ape:w-screen ape:h-screen ape:z-[1000]\"\n          onClick={() => setIsOpen(false)}\n        />\n      )}\n      <Flex\n        className=\"dropdown ape:bg-white2 ape:p-[6px] ape:rounded-normal ape:cursor-pointer ape:items-center ape:w-full ape:justify-between\"\n        onClick={() => setIsOpen(!isOpen)}\n      >\n        <Text size=\"14px\" className=\"ape:font-normal ape:px-[10px]\" style={{ lineHeight: '22px' }}>\n          {chainFilterOption.includes('All Chains') ? 'All Chains' : `Chains (${chainFilterOption.length})`}\n        </Text>\n        <Flex className=\"ape:ml-[5px]\">\n          <Caret direction={isOpen ? 'up' : 'down'} />\n        </Flex>\n      </Flex>\n      {isOpen && (\n        <Flex className=\"ape:flex-col ape:absolute ape:top-[45px] ape:right-0 ape:w-[235px] ape:max-h-[300px] ape:md:max-h-[350px] ape:overflow-y-scroll ape:rounded-normal ape:bg-white2 ape:z-[1001]\">\n          {['All Chains', ...mainnetChains].map((chainId) => {\n            return (\n              <Flex key={chainId} className={rowClasses} onClick={() => handleCheckbox(chainId.toString())}>\n                <Flex className=\"ape:w-full ape:items-center ape:text-[14px]\">\n                  <Checkbox\n                    checked={chainFilterOption.includes(chainId.toString())}\n                    onChange={() => handleCheckbox(chainId.toString())}\n                  />\n                  {chainId === 'All Chains' ? (\n                    <>\n                      <Flex className=\"ape:mx-[8px]\">\n                        <AllChains width=\"22px\" />\n                      </Flex>\n                      <Text size=\"14px\" className=\"ape:font-normal\" style={{ lineHeight: '22px' }}>\n                        All Chains\n                      </Text>\n                    </>\n                  ) : (\n                    <>\n                      <Flex className=\"ape:mx-[8px] ape:rounded-[50px] ape:overflow-hidden\">\n                        {(() => {\n                          const ChainIcon = NETWORK_ICONS[chainId as ChainId] ?? Question\n                          return <ChainIcon width=\"22px\" />\n                        })()}\n                      </Flex>\n                      <Text size=\"14px\" className=\"ape:font-normal\" style={{ lineHeight: '22px' }}>\n                        {NETWORK_LABEL[chainId as ChainId]}\n                      </Text>\n                    </>\n                  )}\n                </Flex>\n              </Flex>\n            )\n          })}\n          {testnetChains.length > 0 &&\n            ['All Testnet', ...testnetChains].map((chainId) => {\n              return (\n                <Flex\n                  key={chainId}\n                  className={clsx(rowClasses, chainId !== 'All Testnet' ? 'ape:pl-[35px]' : 'ape:pl-[15px]')}\n                  onClick={() => handleCheckbox(chainId.toString())}\n                >\n                  <Flex className=\"ape:w-full ape:items-center ape:text-[14px]\">\n                    <Checkbox\n                      checked={chainFilterOption.includes(chainId.toString())}\n                      onChange={() => handleCheckbox(chainId.toString())}\n                    />\n                    {chainId === 'All Testnet' ? (\n                      <>\n                        <Flex className=\"ape:mx-[8px]\">\n                          <AllChains width=\"22px\" />\n                        </Flex>\n                        <Text size=\"14px\" className=\"ape:font-normal\" style={{ lineHeight: '22px' }}>\n                          All Testnet\n                        </Text>\n                      </>\n                    ) : (\n                      <>\n                        <Flex className=\"ape:mx-[8px] ape:rounded-[50px] ape:overflow-hidden\">\n                          {(() => {\n                            const ChainIcon = NETWORK_ICONS[chainId as ChainId] ?? Question\n                            return <ChainIcon width=\"22px\" />\n                          })()}\n                        </Flex>\n                        <Text size=\"14px\" className=\"ape:font-normal\" style={{ lineHeight: '22px' }}>\n                          {NETWORK_LABEL[chainId as ChainId]}\n                        </Text>\n                      </>\n                    )}\n                  </Flex>\n                </Flex>\n              )\n            })}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default NetworkFilter\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

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

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

package/dist/components/PlaceholderMonkey/index.js

@@ -1,15 +1,10 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Text from '../uikit-sdk/Text/index.js';
 import PlaceholderMonkey$1 from '../uikit-sdk/Svg/Icons/PlaceholderMonkey.js';
 
 const PlaceholderMonkey = ({ text }) => {
-    return (jsxs(Flex, { sx: {
-            width: '100%',
-            flexDirection: 'column',
-            alignItems: 'center',
-            borderRadius: 'normal',
-        }, children: [jsx(PlaceholderMonkey$1, {}), jsx(Text, { sx: { fontWeight: 600, fontSize: '16px', mt: '15px', opacity: 0.6 }, children: text })] }));
+    return (jsxs(Flex, { className: "ape:w-full ape:flex-col ape:items-center ape:rounded-normal", children: [jsx(PlaceholderMonkey$1, {}), jsx(Text, { size: "16px", className: "ape:font-semibold ape:mt-[15px] ape:opacity-60", children: text })] }));
 };
 
 export { PlaceholderMonkey as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PlaceholderMonkey/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport PlaceholderMonkeyIcon from '../uikit-sdk/Svg/Icons/PlaceholderMonkey'\n\nconst PlaceholderMonkey = ({ text }: { text?: string }) => {\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        flexDirection: 'column',\n        alignItems: 'center',\n        borderRadius: 'normal',\n      }}\n    >\n      <PlaceholderMonkeyIcon />\n      <Text sx={{ fontWeight: 600, fontSize: '16px', mt: '15px', opacity: 0.6 }}>{text}</Text>\n    </Flex>\n  )\n}\n\nexport default PlaceholderMonkey\n"],"names":["_jsxs","_jsx","PlaceholderMonkeyIcon"],"mappings":";;;;;AAKA,MAAM,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAAqB,KAAI;AACxD,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,YAAY,EAAE,QAAQ;AACvB,SAAA,EAAA,QAAA,EAAA,CAEDC,GAAA,CAACC,mBAAqB,EAAA,EAAA,CAAG,EACzBD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,EAAA,QAAA,EAAG,IAAI,EAAA,CAAQ,CAAA,EAAA,CACnF;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PlaceholderMonkey/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport PlaceholderMonkeyIcon from '../uikit-sdk/Svg/Icons/PlaceholderMonkey'\n\nconst PlaceholderMonkey = ({ text }: { text?: string }) => {\n  return (\n    <Flex className=\"ape:w-full ape:flex-col ape:items-center ape:rounded-normal\">\n      <PlaceholderMonkeyIcon />\n      <Text size=\"16px\" className=\"ape:font-semibold ape:mt-[15px] ape:opacity-60\">{text}</Text>\n    </Flex>\n  )\n}\n\nexport default PlaceholderMonkey\n"],"names":["_jsxs","_jsx","PlaceholderMonkeyIcon"],"mappings":";;;;;AAKA,MAAM,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAAqB,KAAI;IACxD,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6DAA6D,EAAA,QAAA,EAAA,CAC3EC,GAAA,CAACC,mBAAqB,EAAA,EAAA,CAAG,EACzBD,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAAE,IAAI,EAAA,CAAQ,CAAA,EAAA,CACrF;AAEX;;;;"}

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,10 +1,8 @@
-import { jsx } from 'theme-ui/jsx-runtime';
-import { Flex, Box } from 'theme-ui';
+import { jsx } from 'react/jsx-runtime';
+import Flex from '../uikit-sdk/Flex/index.js';
 
 const ProgressBar = ({ value }) => {
-    return (jsx(Flex, { sx: { width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row' }, children: jsx(Box, { className: "progressbar-background", children: jsx(Box, { className: "progressbar-completed", style: {
-                    width: `${value <= 3 ? 3 : value}%`,
-                } }) }) }));
+    return (jsx(Flex, { className: "ape:w-[100px] ape:lg:w-full ape:items-center ape:flex-row", children: jsx("div", { className: "progressbar-background ape:w-full ape:h-[5px] ape:bg-white4 ape:rounded-[10px] ape:overflow-hidden", children: jsx("div", { className: "progressbar-completed ape:rounded-[10px] ape:h-full ape:bg-text", style: { width: `${value <= 3 ? 3 : value}%` } }) }) }));
 };
 
 export { ProgressBar as default };

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

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

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

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

package/dist/components/ProgressBar/ProgressBarWrapper.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarWrapper.js","sources":["../../../src/components/ProgressBar/ProgressBarWrapper.tsx"],"sourcesContent":["import React from 'react'\nimport { styles } from './styles'\nimport { ThemeUIStyleObject } from 'theme-ui'\nimport Flex from '../uikit-sdk/Flex'\nimport TooltipBubble from '../uikit-sdk/TooltipBubble'\nimport Skeleton from '../uikit-sdk/Skeleton'\nimport Text from '../uikit-sdk/Text'\n\ninterface ProgressBarWrapperProps {\n  title?: string\n  value?: React.ReactNode\n  value2Direction?: 'column' | 'row'\n  toolTip?: string\n  toolTipPlacement?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft'\n  toolTipTransform?: string\n  style?: ThemeUIStyleObject\n  showTooltip?: boolean\n}\n\nconst ProgressBarWrapper: React.FC<ProgressBarWrapperProps> = ({\n  title,\n  value,\n  style,\n  showTooltip,\n  toolTipPlacement,\n  toolTipTransform,\n  toolTip,\n}) => {\n  return (\n    <Flex sx={style}>\n      <Flex sx={{ alignItems: 'center' }}>\n        <Text sx={styles.titleText}>{`${title}`}</Text>\n      </Flex>\n      {showTooltip ? (\n        <Flex sx={{ alignItems: 'center', width: '100%' }}>\n          <TooltipBubble\n            placement={toolTipPlacement}\n            transformTip={toolTipTransform}\n            body={<Flex sx={{ justifyContent: 'center' }}>{toolTip}</Flex>}\n            width=\"250px\"\n          >\n            <Flex sx={{ justifyContent: 'center', alignItems: 'center', width: '127px' }}>\n              {value ? value : <Skeleton sx={styles.skeleton} />}\n            </Flex>\n          </TooltipBubble>\n        </Flex>\n      ) : (\n        <Flex sx={{ justifyContent: 'center', alignItems: 'center' }}>\n          {value ? value : <Skeleton sx={styles.skeleton} />}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default React.memo(ProgressBarWrapper)\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAmBA,MAAM,kBAAkB,GAAsC,CAAC,EAC7D,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,OAAO,GACR,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,KAAK,EAAA,QAAA,EAAA,CACbC,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAChCA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,SAAS,EAAA,QAAA,EAAG,CAAA,EAAG,KAAK,CAAA,CAAE,GAAQ,EAAA,CAC1C,EACN,WAAW,IACVA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,QAAA,EAC/CA,GAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EAAE,gBAAgB,EAC9B,IAAI,EAAEA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAG,OAAO,GAAQ,EAC9D,KAAK,EAAC,OAAO,YAEbA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,QAAA,EACzE,KAAK,GAAG,KAAK,GAAGA,GAAA,CAAC,QAAQ,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,QAAQ,EAAA,CAAI,GAC7C,EAAA,CACO,EAAA,CACX,KAEPA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EACzD,KAAK,GAAG,KAAK,GAAGA,GAAA,CAAC,QAAQ,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,QAAQ,EAAA,CAAI,GAC7C,CACR,CAAA,EAAA,CACI;AAEX,CAAC;AAED,2BAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;;;;"}
+{"version":3,"file":"ProgressBarWrapper.js","sources":["../../../src/components/ProgressBar/ProgressBarWrapper.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport Flex from '../uikit-sdk/Flex'\nimport TooltipBubble from '../uikit-sdk/TooltipBubble'\nimport Skeleton from '../uikit-sdk/Skeleton'\nimport Text from '../uikit-sdk/Text'\n\ninterface ProgressBarWrapperProps {\n  title?: string\n  value?: React.ReactNode\n  value2Direction?: 'column' | 'row'\n  toolTip?: string\n  toolTipPlacement?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft'\n  toolTipTransform?: string\n  style?: React.CSSProperties\n  hideOnMobile?: boolean\n  showTooltip?: boolean\n}\n\nconst ProgressBarWrapper: React.FC<ProgressBarWrapperProps> = ({\n  title,\n  value,\n  style,\n  hideOnMobile,\n  showTooltip,\n  toolTipPlacement,\n  toolTipTransform,\n  toolTip,\n}) => {\n  return (\n    <Flex className={clsx(hideOnMobile && 'ape:hidden! ape:md:flex!')} style={style}>\n      <Flex className=\"ape:items-center\">\n        <Text size=\"12px\" className=\"ape:opacity-60 ape:leading-4! ape:lg:leading-6! ape:font-normal\">{`${title}`}</Text>\n      </Flex>\n      {showTooltip ? (\n        <Flex className=\"ape:items-center ape:w-full\">\n          <TooltipBubble\n            placement={toolTipPlacement}\n            transformTip={toolTipTransform}\n            body={<Flex className=\"ape:justify-center\">{toolTip}</Flex>}\n            width=\"250px\"\n          >\n            <Flex className=\"ape:justify-center ape:items-center ape:w-[127px]\">\n              {value ? value : <Skeleton width=\"60px\" style={{ maxHeight: '18px', minHeight: '18px' }} />}\n            </Flex>\n          </TooltipBubble>\n        </Flex>\n      ) : (\n        <Flex className=\"ape:justify-center ape:items-center\">\n          {value ? value : <Skeleton style={{ maxHeight: '18px', minHeight: '18px' }} />}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default React.memo(ProgressBarWrapper)\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAmBA,MAAM,kBAAkB,GAAsC,CAAC,EAC7D,KAAK,EACL,KAAK,EACL,KAAK,EACL,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,OAAO,GACR,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,IAAI,CAAC,YAAY,IAAI,0BAA0B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAA,QAAA,EAAA,CAC7EC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAChCA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAE,GAAG,KAAK,CAAA,CAAE,EAAA,CAAQ,EAAA,CAC5G,EACN,WAAW,IACVA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAC3CA,GAAA,CAAC,aAAa,IACZ,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EAAE,gBAAgB,EAC9B,IAAI,EAAEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,OAAO,EAAA,CAAQ,EAC3D,KAAK,EAAC,OAAO,EAAA,QAAA,EAEbA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAChE,KAAK,GAAG,KAAK,GAAGA,IAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAA,CAAI,EAAA,CACtF,GACO,EAAA,CACX,KAEPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,qCAAqC,EAAA,QAAA,EAClD,KAAK,GAAG,KAAK,GAAGA,GAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAA,CAAI,EAAA,CACzE,CACR,CAAA,EAAA,CACI;AAEX,CAAC;AAED,2BAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;;;;"}

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

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

package/dist/components/ProgressiveImage/index.js

@@ -1,30 +1,12 @@
-import { jsxs, Fragment, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { Image } from 'theme-ui';
-import Flex from '../uikit-sdk/Flex/index.js';
 
 const ProgressiveImage = ({ src, alt = 'bluredImg', blurSrc }) => {
     const [loaded, setLoaded] = useState(false);
-    return (jsxs(Fragment, { children: [jsx(Flex, { src: blurSrc, alt: alt, sx: {
-                    position: 'absolute',
-                    width: '100%',
-                    height: '100%',
-                    backgroundSize: 'cover',
-                    zIndex: 0,
-                    objectFit: 'cover',
-                    transition: 'opacity 1.5s ease',
-                    borderRadius: 'normal',
+    return (jsxs(Fragment, { children: [jsx("div", { className: "ape:absolute ape:w-full ape:h-full ape:bg-cover ape:z-0 ape:transition-opacity ape:duration-[1500ms] ape:ease-in-out ape:rounded-normal ape:blur-[1px]", style: {
                     backgroundImage: `url(${blurSrc})`,
-                    filter: 'blur(1px)',
                     opacity: loaded ? 0 : 1,
-                } }), jsx(Image, { src: src, alt: `${alt}-${blurSrc}`, onLoad: () => setLoaded(true), sx: {
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'cover',
-                    transition: 'opacity 0.5s ease',
-                    borderRadius: 'normal',
-                    opacity: loaded ? 1 : 0,
-                } })] }));
+                }, role: "img", "aria-label": alt }), jsx("img", { src: src, alt: `${alt}-${blurSrc}`, onLoad: () => setLoaded(true), className: "ape:w-full ape:h-full ape:object-cover ape:transition-opacity ape:duration-500 ape:ease-in-out ape:rounded-normal", style: { opacity: loaded ? 1 : 0 } })] }));
 };
 
 export { ProgressiveImage as default };