@ape.swap/bonds-sdk 6.2.12 → 6.2.13

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

@@ -14,5 +14,5 @@ declare const TokenSelectorPanel: ({ typedValue, setTypedValue, selectedToken, b
     inputDisabled?: boolean;
     marketingCampaign?: MarketingCampaign;
     isConnected: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default TokenSelectorPanel;

package/dist/components/TokenSelectorPanel/index.js

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
-import { Flex, Input } from 'theme-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { isNumber } from '../../utils/numbers.js';
 import TokenImage from '../uikit-sdk/TokenImage/index.js';
 import { ChainId } from '@ape.swap/apeswap-lists';
@@ -16,6 +15,8 @@ import useSUIAccount from '../../hooks/accounts/useSUIAccount.js';
 import { MCColorMapping } from '../../utils/campaignStyles.js';
 import Button from '../uikit-sdk/Button/Button.js';
 import Caret from '../uikit-sdk/Svg/Icons/Caret.js';
+import Flex from '../uikit-sdk/Flex/index.js';
+import Input from '../uikit-sdk/Input/Input.js';
 
 const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, bondChainId, handleValueBtn, handleCurrencySelect, enableZap, tokenBalance, selectedTokenPrice, bondPrincipalToken, inputDisabled = false, marketingCampaign, isConnected, }) => {
     const { address: account } = useEVMAccount();
@@ -35,7 +36,7 @@ const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, bondChai
         setTypedValue(event.target.value);
     };
     const [onTokenSelectorModal] = useModal(jsx(TokenSelectorModal, { bondPrincipalToken: bondPrincipalToken, handleCurrencySelect: handleCurrencySelect, chainId: bondChainId, isConnected: isConnected }), true, false, `tokenSelectorOnLiquidityModal${bondPrincipalToken?.address?.[bondChainId]}-${bondPrincipalToken?.symbol}`);
-    return (jsxs(Flex, { className: "token-selector-panel", sx: { borderRadius: 'normal', background: MCColorMapping.white3[marketingCampaign] }, children: [jsxs(Flex, { className: "input-container inputrow", children: [jsx(Flex, { className: "input-container input", children: jsx(Input, { placeholder: "0.0", value: typedValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: (v) => {
+    return (jsxs(Flex, { className: "token-selector-panel ape:flex-col ape:bg-white3 ape:p-[10px] ape:min-h-[92px] ape:rounded-normal", style: { background: MCColorMapping.white3[marketingCampaign] }, children: [jsxs(Flex, { className: "input-container inputrow ape:flex-row", children: [jsx(Flex, { className: "input-container input ape:bg-transparent ape:rounded-[10px] ape:border-[medium] ape:pr-[10px] ape:w-full ape:text-[22px]", children: jsx(Input, { placeholder: "0.0", value: typedValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: (v) => {
                                 if (v.currentTarget.value.includes(',')) {
                                     v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
                                 }
@@ -49,13 +50,9 @@ const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, bondChai
                                     !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
                                         ? v.currentTarget.value
                                         : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
-                            }, disabled: inputDisabled }) }), jsxs(Flex, { className: "input-container token", onClick: () => (enableZap ? onTokenSelectorModal() : null), sx: {
-                            cursor: enableZap ? 'pointer' : 'default',
-                            borderRadius: 'normal',
-                            background: MCColorMapping.white4[marketingCampaign],
-                        }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '10px' }, children: [jsx(Flex, { className: "input-container bondicon", children: isArray(splited) ? (jsx(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: bondChainId })) : (jsx(TokenImage, { symbol: getSymbol(selectedToken, bondChainId), size: 28, chain: bondChainId })) }), jsx(Flex, { className: "title-container tokenname", children: getSymbol(selectedToken, bondChainId) })] }), enableZap && (jsx(Flex, { sx: { mr: '8px' }, children: jsx(Caret, {}) }))] })] }), jsxs(Flex, { className: "input-container balancerow", children: [jsx(Flex, { sx: { opacity: 0.6 }, children: selectedTokenPrice && typedValue
+                            }, disabled: inputDisabled }) }), jsxs(Flex, { className: "input-container token ape:flex ape:items-center ape:text-[12px] ape:font-bold ape:bg-white4 ape:relative ape:w-[190px] ape:h-[36px] ape:justify-between ape:rounded-normal", onClick: () => (enableZap ? onTokenSelectorModal() : null), style: { cursor: enableZap ? 'pointer' : 'default', background: MCColorMapping.white4[marketingCampaign] }, children: [jsxs(Flex, { className: "ape:items-center ape:gap-[10px]", children: [jsx(Flex, { className: "input-container bondicon ape:ml-[5px]", children: isArray(splited) ? (jsx(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: bondChainId })) : (jsx(TokenImage, { symbol: getSymbol(selectedToken, bondChainId), size: 28, chain: bondChainId })) }), jsx(Flex, { className: "title-container tokenname", children: getSymbol(selectedToken, bondChainId) })] }), enableZap && (jsx(Flex, { className: "ape:mr-[8px]", children: jsx(Caret, {}) }))] })] }), jsxs(Flex, { className: "input-container balancerow ape:flex-row ape:items-center ape:justify-between ape:pl-[6px]", children: [jsx(Flex, { className: "ape:opacity-60", children: selectedTokenPrice && typedValue
                             ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`
-                            : '' }), jsxs(Flex, { children: [showBalance && jsxs(Flex, { className: "balancerow text", children: ["Balance: ", tokenBalanceString] }), jsx(Flex, { className: "balancerow max", children: showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (jsx(Button, { className: "max-button", onClick: () => handleValueBtn(tokenBalance ?? '0'), children: "Max" })) })] })] })] }));
+                            : '' }), jsxs(Flex, { children: [showBalance && (jsxs(Flex, { className: "balancerow text ape:opacity-60 ape:items-center ape:text-[12px]", children: ["Balance: ", tokenBalanceString] })), jsx(Flex, { className: "balancerow max ape:items-center ape:cursor-pointer", children: showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (jsx(Button, { className: "max-button ape:bg-primary-button ape:h-[22px] ape:px-[8px] ape:cursor-pointer ape:text-[12px]! ape:font-semibold ape:rounded-small ape:ml-[10px] ape:transition-all ape:duration-300 ape:ease-linear ape:flex ape:items-center ape:justify-center ape:active:scale-90", onClick: () => handleValueBtn(tokenBalance ?? '0'), children: "Max" })) })] })] })] }));
 };
 
 export { TokenSelectorPanel as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/TokenSelectorPanel/index.tsx"],"sourcesContent":["import React, { FormEvent } from 'react'\nimport { Flex, Input } from 'theme-ui'\nimport { isNumber } from '../../utils/numbers'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport { ChainId, MarketingCampaign, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../hooks/useModal'\nimport TokenSelectorModal from '../TokenSelectorModal'\nimport { toSignificantDigitsString } from '../../utils/fixedPoint'\nimport isArray from 'lodash-es/isArray.js'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport { formatUSDNumber } from '../../utils/displayHelpers'\nimport useEVMAccount from '../../hooks/accounts/useEVMAccount'\nimport useSOLAccount from '../../hooks/accounts/useSOLAccount'\nimport useAPTAccount from '../../hooks/accounts/useAPTAccount'\nimport useSUIAccount from '../../hooks/accounts/useSUIAccount'\nimport { MCColorMapping } from '../../utils/campaignStyles'\nimport Button from '../uikit-sdk/Button/Button'\nimport Caret from '../uikit-sdk/Svg/Icons/Caret'\n\nconst TokenSelectorPanel = ({\n  typedValue,\n  setTypedValue,\n  selectedToken,\n  bondChainId,\n  handleValueBtn,\n  handleCurrencySelect,\n  enableZap,\n  tokenBalance,\n  selectedTokenPrice,\n  bondPrincipalToken,\n  inputDisabled = false,\n  marketingCampaign,\n  isConnected,\n}: {\n  typedValue: string\n  setTypedValue: (value: React.SetStateAction<string>) => void\n  selectedToken?: 'NATIVE' | Token\n  bondChainId: ChainId\n  handleValueBtn?: (value: string) => void\n  handleCurrencySelect: (value: string) => void\n  enableZap?: boolean\n  tokenBalance?: string\n  selectedTokenPrice?: number\n  bondPrincipalToken?: Token // Used to ADD this token to the inputList\n  inputDisabled?: boolean\n  marketingCampaign?: MarketingCampaign\n  isConnected: boolean\n}) => {\n  const { address: account } = useEVMAccount()\n  const { publicKey: solanaAccount } = useSOLAccount()\n  const { address: aptosAccount } = useAPTAccount()\n  const { address: suiAccount } = useSUIAccount()\n\n  const showBalance =\n    bondChainId === ChainId.SOL\n      ? !!solanaAccount\n      : bondChainId === ChainId.APTOS\n        ? !!aptosAccount\n        : bondChainId === ChainId.SUI\n          ? !!suiAccount\n          : !!account\n  const tokenBalanceString = tokenBalance ? toSignificantDigitsString(tokenBalance, 5) : 'loading'\n\n  const splited = typeof selectedToken !== 'string' ? selectedToken?.symbol?.split('-') : undefined\n  const handleInputChange = (event: { target: { value: React.SetStateAction<string> } }) => {\n    setTypedValue(event.target.value)\n  }\n\n  const [onTokenSelectorModal] = useModal(\n    <TokenSelectorModal\n      bondPrincipalToken={bondPrincipalToken}\n      handleCurrencySelect={handleCurrencySelect}\n      chainId={bondChainId}\n      isConnected={isConnected}\n    />,\n    true,\n    false,\n    `tokenSelectorOnLiquidityModal${bondPrincipalToken?.address?.[bondChainId]}-${bondPrincipalToken?.symbol}`,\n  )\n\n  return (\n    <Flex\n      className=\"token-selector-panel\"\n      sx={{ borderRadius: 'normal', background: MCColorMapping.white3[marketingCampaign!] }}\n    >\n      <Flex className=\"input-container inputrow\">\n        <Flex className=\"input-container input\">\n          <Input\n            placeholder=\"0.0\"\n            value={typedValue}\n            pattern=\"^[0-9]*[.,]?[0-9]*$\"\n            onChange={handleInputChange}\n            onInput={(v: FormEvent<HTMLInputElement>) => {\n              if (v.currentTarget.value.includes(',')) {\n                v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.')\n              }\n              if (v.currentTarget.value.includes('%')) {\n                v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '')\n              }\n              if (v.currentTarget.value === '.') {\n                v.currentTarget.value = '0.'\n              }\n              v.currentTarget.value =\n                !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0\n                  ? v.currentTarget.value\n                  : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1)\n            }}\n            disabled={inputDisabled}\n          />\n        </Flex>\n\n        {/* TOKEN SELECTOR PANEL */}\n\n        <Flex\n          className=\"input-container token\"\n          onClick={() => (enableZap ? onTokenSelectorModal() : null)}\n          sx={{\n            cursor: enableZap ? 'pointer' : 'default',\n            borderRadius: 'normal',\n            background: MCColorMapping.white4[marketingCampaign!],\n          }}\n        >\n          <Flex sx={{ alignItems: 'center', gap: '10px' }}>\n            <Flex className=\"input-container bondicon\">\n              {isArray(splited) ? (\n                <TokenImage symbol={splited[0]} symbol2={splited[1]} size={28} chain={bondChainId} />\n              ) : (\n                <TokenImage symbol={getSymbol(selectedToken, bondChainId)} size={28} chain={bondChainId} />\n              )}\n            </Flex>\n            <Flex className=\"title-container tokenname\">{getSymbol(selectedToken, bondChainId)}</Flex>\n          </Flex>\n          {enableZap && (\n            <Flex sx={{ mr: '8px' }}>\n              <Caret />\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n      <Flex className=\"input-container balancerow\">\n        <Flex sx={{ opacity: 0.6 }}>\n          {selectedTokenPrice && typedValue\n            ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`\n            : ''}\n        </Flex>\n        <Flex>\n          {showBalance && <Flex className=\"balancerow text\">Balance: {tokenBalanceString}</Flex>}\n          <Flex className=\"balancerow max\">\n            {showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (\n              <Button\n                className=\"max-button\"\n                onClick={() => handleValueBtn(tokenBalance ?? '0')}\n              >\n                Max\n              </Button>\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default TokenSelectorPanel\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/TokenSelectorPanel/index.tsx"],"sourcesContent":["import React, { FormEvent } from 'react'\nimport { isNumber } from '../../utils/numbers'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport { ChainId, MarketingCampaign, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../hooks/useModal'\nimport TokenSelectorModal from '../TokenSelectorModal'\nimport { toSignificantDigitsString } from '../../utils/fixedPoint'\nimport isArray from 'lodash-es/isArray.js'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport { formatUSDNumber } from '../../utils/displayHelpers'\nimport useEVMAccount from '../../hooks/accounts/useEVMAccount'\nimport useSOLAccount from '../../hooks/accounts/useSOLAccount'\nimport useAPTAccount from '../../hooks/accounts/useAPTAccount'\nimport useSUIAccount from '../../hooks/accounts/useSUIAccount'\nimport { MCColorMapping } from '../../utils/campaignStyles'\nimport Button from '../uikit-sdk/Button/Button'\nimport Caret from '../uikit-sdk/Svg/Icons/Caret'\nimport Flex from '../uikit-sdk/Flex'\nimport Input from '../uikit-sdk/Input/Input'\n\nconst TokenSelectorPanel = ({\n  typedValue,\n  setTypedValue,\n  selectedToken,\n  bondChainId,\n  handleValueBtn,\n  handleCurrencySelect,\n  enableZap,\n  tokenBalance,\n  selectedTokenPrice,\n  bondPrincipalToken,\n  inputDisabled = false,\n  marketingCampaign,\n  isConnected,\n}: {\n  typedValue: string\n  setTypedValue: (value: React.SetStateAction<string>) => void\n  selectedToken?: 'NATIVE' | Token\n  bondChainId: ChainId\n  handleValueBtn?: (value: string) => void\n  handleCurrencySelect: (value: string) => void\n  enableZap?: boolean\n  tokenBalance?: string\n  selectedTokenPrice?: number\n  bondPrincipalToken?: Token // Used to ADD this token to the inputList\n  inputDisabled?: boolean\n  marketingCampaign?: MarketingCampaign\n  isConnected: boolean\n}) => {\n  const { address: account } = useEVMAccount()\n  const { publicKey: solanaAccount } = useSOLAccount()\n  const { address: aptosAccount } = useAPTAccount()\n  const { address: suiAccount } = useSUIAccount()\n\n  const showBalance =\n    bondChainId === ChainId.SOL\n      ? !!solanaAccount\n      : bondChainId === ChainId.APTOS\n        ? !!aptosAccount\n        : bondChainId === ChainId.SUI\n          ? !!suiAccount\n          : !!account\n  const tokenBalanceString = tokenBalance ? toSignificantDigitsString(tokenBalance, 5) : 'loading'\n\n  const splited = typeof selectedToken !== 'string' ? selectedToken?.symbol?.split('-') : undefined\n  const handleInputChange = (event: { target: { value: React.SetStateAction<string> } }) => {\n    setTypedValue(event.target.value)\n  }\n\n  const [onTokenSelectorModal] = useModal(\n    <TokenSelectorModal\n      bondPrincipalToken={bondPrincipalToken}\n      handleCurrencySelect={handleCurrencySelect}\n      chainId={bondChainId}\n      isConnected={isConnected}\n    />,\n    true,\n    false,\n    `tokenSelectorOnLiquidityModal${bondPrincipalToken?.address?.[bondChainId]}-${bondPrincipalToken?.symbol}`,\n  )\n\n  return (\n    <Flex\n      className=\"token-selector-panel ape:flex-col ape:bg-white3 ape:p-[10px] ape:min-h-[92px] ape:rounded-normal\"\n      style={{ background: MCColorMapping.white3[marketingCampaign!] }}\n    >\n      <Flex className=\"input-container inputrow ape:flex-row\">\n        <Flex className=\"input-container input ape:bg-transparent ape:rounded-[10px] ape:border-[medium] ape:pr-[10px] ape:w-full ape:text-[22px]\">\n          <Input\n            placeholder=\"0.0\"\n            value={typedValue}\n            pattern=\"^[0-9]*[.,]?[0-9]*$\"\n            onChange={handleInputChange}\n            onInput={(v: FormEvent<HTMLInputElement>) => {\n              if (v.currentTarget.value.includes(',')) {\n                v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.')\n              }\n              if (v.currentTarget.value.includes('%')) {\n                v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '')\n              }\n              if (v.currentTarget.value === '.') {\n                v.currentTarget.value = '0.'\n              }\n              v.currentTarget.value =\n                !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0\n                  ? v.currentTarget.value\n                  : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1)\n            }}\n            disabled={inputDisabled}\n          />\n        </Flex>\n\n        {/* TOKEN SELECTOR PANEL */}\n\n        <Flex\n          className=\"input-container token ape:flex ape:items-center ape:text-[12px] ape:font-bold ape:bg-white4 ape:relative ape:w-[190px] ape:h-[36px] ape:justify-between ape:rounded-normal\"\n          onClick={() => (enableZap ? onTokenSelectorModal() : null)}\n          style={{ cursor: enableZap ? 'pointer' : 'default', background: MCColorMapping.white4[marketingCampaign!] }}\n        >\n          <Flex className=\"ape:items-center ape:gap-[10px]\">\n            <Flex className=\"input-container bondicon ape:ml-[5px]\">\n              {isArray(splited) ? (\n                <TokenImage symbol={splited[0]} symbol2={splited[1]} size={28} chain={bondChainId} />\n              ) : (\n                <TokenImage symbol={getSymbol(selectedToken, bondChainId)} size={28} chain={bondChainId} />\n              )}\n            </Flex>\n            <Flex className=\"title-container tokenname\">{getSymbol(selectedToken, bondChainId)}</Flex>\n          </Flex>\n          {enableZap && (\n            <Flex className=\"ape:mr-[8px]\">\n              <Caret />\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n      <Flex className=\"input-container balancerow ape:flex-row ape:items-center ape:justify-between ape:pl-[6px]\">\n        <Flex className=\"ape:opacity-60\">\n          {selectedTokenPrice && typedValue\n            ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`\n            : ''}\n        </Flex>\n        <Flex>\n          {showBalance && (\n            <Flex className=\"balancerow text ape:opacity-60 ape:items-center ape:text-[12px]\">\n              Balance: {tokenBalanceString}\n            </Flex>\n          )}\n          <Flex className=\"balancerow max ape:items-center ape:cursor-pointer\">\n            {showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (\n              <Button\n                className=\"max-button ape:bg-primary-button ape:h-[22px] ape:px-[8px] ape:cursor-pointer ape:text-[12px]! ape:font-semibold ape:rounded-small ape:ml-[10px] ape:transition-all ape:duration-300 ape:ease-linear ape:flex ape:items-center ape:justify-center ape:active:scale-90\"\n                onClick={() => handleValueBtn(tokenBalance ?? '0')}\n              >\n                Max\n              </Button>\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default TokenSelectorPanel\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/Tooltip/ButtonsRow.js

@@ -1,16 +1,15 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
-import { styles } from './styles.js';
-import { Link } from 'theme-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Flex from '../uikit-sdk/Flex/index.js';
 import URL from '../uikit-sdk/Svg/Icons/URL.js';
 import Twitter from '../uikit-sdk/Svg/Icons/Twitter.js';
 import DexScreener from '../uikit-sdk/Svg/Icons/DexScreener.js';
 import CoinGecko from '../uikit-sdk/Svg/Icons/CoinGecko.js';
 
+const iconButtonClasses = 'ape:bg-white3 ape:no-underline ape:items-center ape:justify-center ape:w-fit ape:h-[30px] ape:p-[2px_5px] ape:rounded-[8px] ape:m-[0_5px_5px_0] ape:hover:cursor-pointer';
 const ButtonsRow = ({ projectLink, twitter, earnTokenContract, cgId, dexscreener }) => {
     const dexscreenerURL = dexscreener || (earnTokenContract ? `https://dexscreener.com/search?q=${earnTokenContract}` : undefined);
     const coingeckoURL = cgId ? `https://www.coingecko.com/en/coins/${cgId}` : undefined;
-    return (jsxs(Flex, { sx: { justifyContent: 'center' }, children: [jsx(Flex, { sx: styles.iconButton, as: Link, href: projectLink, target: "_blank", children: jsx(URL, { width: 18 }) }), jsx(Flex, { sx: styles.iconButton, as: Link, href: twitter, target: "_blank", children: jsx(Twitter, { width: 18, color: "text" }) }), dexscreenerURL && (jsx(Flex, { sx: styles.iconButton, as: Link, href: dexscreenerURL, target: "_blank", children: jsx(DexScreener, { width: 18, color: "text" }) })), coingeckoURL && (jsx(Flex, { sx: styles.iconButton, as: Link, href: coingeckoURL, target: "_blank", children: jsx(CoinGecko, { width: 18, color: "text" }) }))] }));
+    return (jsxs(Flex, { className: "ape:justify-center", children: [jsx(Flex, { className: iconButtonClasses, as: "a", href: projectLink, target: "_blank", children: jsx(URL, { width: 18 }) }), jsx(Flex, { className: iconButtonClasses, as: "a", href: twitter, target: "_blank", children: jsx(Twitter, { width: 18, color: "text" }) }), dexscreenerURL && (jsx(Flex, { className: iconButtonClasses, as: "a", href: dexscreenerURL, target: "_blank", children: jsx(DexScreener, { width: 18, color: "text" }) })), coingeckoURL && (jsx(Flex, { className: iconButtonClasses, as: "a", href: coingeckoURL, target: "_blank", children: jsx(CoinGecko, { width: 18, color: "text" }) }))] }));
 };
 
 export { ButtonsRow as default };

package/dist/components/Tooltip/ButtonsRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonsRow.js","sources":["../../../src/components/Tooltip/ButtonsRow.tsx"],"sourcesContent":["import React from 'react'\nimport { styles } from './styles'\nimport { Link } from 'theme-ui'\nimport Flex from '../uikit-sdk/Flex'\nimport URLIcon from '../uikit-sdk/Svg/Icons/URL'\nimport Twitter from '../uikit-sdk/Svg/Icons/Twitter'\nimport DexScreener from '../uikit-sdk/Svg/Icons/DexScreener'\nimport CoinGecko from '../uikit-sdk/Svg/Icons/CoinGecko'\n\nconst ButtonsRow: React.FC<{\n  projectLink?: string\n  twitter?: string\n  earnTokenContract?: string\n  cgId?: string\n  dexscreener?: string\n}> = ({ projectLink, twitter, earnTokenContract, cgId, dexscreener }) => {\n  const dexscreenerURL =\n    dexscreener || (earnTokenContract ? `https://dexscreener.com/search?q=${earnTokenContract}` : undefined)\n  const coingeckoURL = cgId ? `https://www.coingecko.com/en/coins/${cgId}` : undefined\n\n  return (\n    <Flex sx={{ justifyContent: 'center' }}>\n      <Flex sx={styles.iconButton} as={Link} href={projectLink} target=\"_blank\">\n        <URLIcon width={18} />\n      </Flex>\n      <Flex sx={styles.iconButton} as={Link} href={twitter} target=\"_blank\">\n        <Twitter width={18} color=\"text\" />\n      </Flex>\n      {dexscreenerURL && (\n        <Flex sx={styles.iconButton} as={Link} href={dexscreenerURL} target=\"_blank\">\n          <DexScreener width={18} color=\"text\" />\n        </Flex>\n      )}\n      {coingeckoURL && (\n        <Flex sx={styles.iconButton} as={Link} href={coingeckoURL} target=\"_blank\">\n          <CoinGecko width={18} color=\"text\" />\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default ButtonsRow\n"],"names":["_jsxs","_jsx","URLIcon"],"mappings":";;;;;;;;;AASA,MAAM,UAAU,GAMX,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,WAAW,EAAE,KAAI;AACtE,IAAA,MAAM,cAAc,GAClB,WAAW,KAAK,iBAAiB,GAAG,CAAA,iCAAA,EAAoC,iBAAiB,CAAA,CAAE,GAAG,SAAS,CAAC;AAC1G,IAAA,MAAM,YAAY,GAAG,IAAI,GAAG,CAAA,mCAAA,EAAsC,IAAI,CAAA,CAAE,GAAG,SAAS;AAEpF,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACpCC,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EACvEA,GAAA,CAACC,GAAO,EAAA,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EAAA,CACjB,EACPD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EACnEA,IAAC,OAAO,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,GAAG,EAAA,CAC9B,EACN,cAAc,KACbA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EAC1EA,GAAA,CAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAClC,CACR,EACA,YAAY,KACXA,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAC,QAAQ,YACxEA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAChC,CACR,CAAA,EAAA,CACI;AAEX;;;;"}
+{"version":3,"file":"ButtonsRow.js","sources":["../../../src/components/Tooltip/ButtonsRow.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport URLIcon from '../uikit-sdk/Svg/Icons/URL'\nimport Twitter from '../uikit-sdk/Svg/Icons/Twitter'\nimport DexScreener from '../uikit-sdk/Svg/Icons/DexScreener'\nimport CoinGecko from '../uikit-sdk/Svg/Icons/CoinGecko'\n\nconst iconButtonClasses =\n  'ape:bg-white3 ape:no-underline ape:items-center ape:justify-center ape:w-fit ape:h-[30px] ape:p-[2px_5px] ape:rounded-[8px] ape:m-[0_5px_5px_0] ape:hover:cursor-pointer'\n\nconst ButtonsRow: React.FC<{\n  projectLink?: string\n  twitter?: string\n  earnTokenContract?: string\n  cgId?: string\n  dexscreener?: string\n}> = ({ projectLink, twitter, earnTokenContract, cgId, dexscreener }) => {\n  const dexscreenerURL =\n    dexscreener || (earnTokenContract ? `https://dexscreener.com/search?q=${earnTokenContract}` : undefined)\n  const coingeckoURL = cgId ? `https://www.coingecko.com/en/coins/${cgId}` : undefined\n\n  return (\n    <Flex className=\"ape:justify-center\">\n      <Flex className={iconButtonClasses} as=\"a\" href={projectLink} target=\"_blank\">\n        <URLIcon width={18} />\n      </Flex>\n      <Flex className={iconButtonClasses} as=\"a\" href={twitter} target=\"_blank\">\n        <Twitter width={18} color=\"text\" />\n      </Flex>\n      {dexscreenerURL && (\n        <Flex className={iconButtonClasses} as=\"a\" href={dexscreenerURL} target=\"_blank\">\n          <DexScreener width={18} color=\"text\" />\n        </Flex>\n      )}\n      {coingeckoURL && (\n        <Flex className={iconButtonClasses} as=\"a\" href={coingeckoURL} target=\"_blank\">\n          <CoinGecko width={18} color=\"text\" />\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default ButtonsRow\n"],"names":["_jsxs","_jsx","URLIcon"],"mappings":";;;;;;;AAOA,MAAM,iBAAiB,GACrB,0KAA0K;AAE5K,MAAM,UAAU,GAMX,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,WAAW,EAAE,KAAI;AACtE,IAAA,MAAM,cAAc,GAClB,WAAW,KAAK,iBAAiB,GAAG,CAAA,iCAAA,EAAoC,iBAAiB,CAAA,CAAE,GAAG,SAAS,CAAC;AAC1G,IAAA,MAAM,YAAY,GAAG,IAAI,GAAG,CAAA,mCAAA,EAAsC,IAAI,CAAA,CAAE,GAAG,SAAS;AAEpF,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,CAClCC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,iBAAiB,EAAE,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EAC3EA,GAAA,CAACC,GAAO,EAAA,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EAAA,CACjB,EACPD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,iBAAiB,EAAE,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EACvEA,GAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAC9B,EACN,cAAc,KACbA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,iBAAiB,EAAE,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,cAAc,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EAC9EA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAClC,CACR,EACA,YAAY,KACXA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,iBAAiB,EAAE,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EAC5EA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAChC,CACR,CAAA,EAAA,CACI;AAEX;;;;"}

package/dist/components/Tooltip/Tooltip.js

@@ -1,16 +1,16 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
-import { styles } from './styles.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import ButtonsRow from './ButtonsRow.js';
 import { BLOCK_EXPLORER } from '../../config/constants/chains.js';
 import { ChainId } from '@ape.swap/apeswap-lists';
 import { IS_APTOS_MAINNET } from '../../constants/aptosConstants.js';
 import Flex from '../uikit-sdk/Flex/index.js';
-import { Link } from 'theme-ui';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import ExpandedViewButton from '../../views/BuyBond/components/ExpandedViewButton.js';
 import track from '../../utils/track.js';
 import External from '../uikit-sdk/Svg/Icons/External.js';
 
+const linkRowClasses = 'ape:w-full ape:mt-[5px] ape:justify-end ape:[&_svg]:w-[11px]';
+const linkClasses = 'ape:text-[12px] ape:leading-[14px] ape:flex ape:no-underline ape:hover:underline';
 const BondInfoTooltip = ({ earnTokenContract, earnTokenSymbol, bondContract, projectLink, twitter, chain, isSoldOut = false, billType, cgId, dexscreener, }) => {
     const config = useSDKConfig();
     const explorerLink = BLOCK_EXPLORER[chain];
@@ -37,7 +37,7 @@ const BondInfoTooltip = ({ earnTokenContract, earnTokenSymbol, bondContract, pro
             },
         });
     };
-    return (jsxs(Flex, { sx: { flexDirection: 'column', flexWrap: 'wrap' }, children: [jsx(ButtonsRow, { twitter: twitter, projectLink: projectLink, earnTokenContract: earnTokenContract, cgId: cgId, dexscreener: dexscreener }), config?.referenceId === 'apebond' && !isSoldOut && billType !== 'fcfs' && (jsx(Flex, { sx: { width: '100%', my: '5px', justifyContent: 'center', position: 'relative', height: '25px' }, children: jsx(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation, rightPos: '-5px' }) })), jsx(Flex, { sx: { justifyContent: 'center' }, children: jsxs(Flex, { sx: { width: '144px', flexDirection: 'column' }, children: [jsx(Flex, { sx: styles.linkRow, children: tokenLink && (jsxs(Link, { href: tokenLink, sx: styles.link, target: "_blank", children: ["View Token Contract", jsx(Flex, { sx: { ml: '5px' }, children: jsx(External, { color: "text", width: 10 }) })] })) }), jsx(Flex, { sx: styles.linkRow, children: bondLink && (jsxs(Link, { href: bondLink, sx: styles.link, target: "_blank", children: ["View Bond Contract", jsx(Flex, { sx: { ml: '5px' }, children: jsx(External, { color: "text", width: 10 }) })] })) }), jsx(Flex, { sx: styles.linkRow, children: billType !== 'fcfs' && (jsxs(Link, { href: bondDashboard, sx: styles.link, target: "_blank", rel: "noopener noreferrer", children: ["View Bond Insights", jsx(Flex, { sx: { ml: '5px' }, children: jsx(External, { color: "text", width: 10 }) })] })) })] }) })] }));
+    return (jsxs(Flex, { className: "ape:flex-col ape:flex-wrap", children: [jsx(ButtonsRow, { twitter: twitter, projectLink: projectLink, earnTokenContract: earnTokenContract, cgId: cgId, dexscreener: dexscreener }), config?.referenceId === 'apebond' && !isSoldOut && billType !== 'fcfs' && (jsx(Flex, { className: "ape:w-full ape:my-[5px] ape:justify-center ape:relative ape:h-[25px]", children: jsx(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation, rightPos: '-5px' }) })), jsx(Flex, { className: "ape:justify-center", children: jsxs(Flex, { className: "ape:w-[144px] ape:flex-col", children: [jsx(Flex, { className: linkRowClasses, children: tokenLink && (jsxs("a", { href: tokenLink, className: linkClasses, target: "_blank", rel: "noreferrer", children: ["View Token Contract", jsx(Flex, { className: "ape:ml-[5px]", children: jsx(External, { color: "text", width: 10 }) })] })) }), jsx(Flex, { className: linkRowClasses, children: bondLink && (jsxs("a", { href: bondLink, className: linkClasses, target: "_blank", rel: "noreferrer", children: ["View Bond Contract", jsx(Flex, { className: "ape:ml-[5px]", children: jsx(External, { color: "text", width: 10 }) })] })) }), jsx(Flex, { className: linkRowClasses, children: billType !== 'fcfs' && (jsxs("a", { href: bondDashboard, className: linkClasses, target: "_blank", rel: "noopener noreferrer", children: ["View Bond Insights", jsx(Flex, { className: "ape:ml-[5px]", children: jsx(External, { color: "text", width: 10 }) })] })) })] }) })] }));
 };
 
 export { BondInfoTooltip as default };

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport { styles } from './styles'\nimport ButtonsRow from './ButtonsRow'\nimport { BLOCK_EXPLORER } from '../../config/constants/chains'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { IS_APTOS_MAINNET } from '../../constants/aptosConstants'\nimport Flex from '../uikit-sdk/Flex'\nimport { Link } from 'theme-ui'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport ExpandedViewButton from '../../views/BuyBond/components/ExpandedViewButton'\nimport track from '../../utils/track'\nimport External from '../uikit-sdk/Svg/Icons/External'\n\ninterface TooltipProps {\n  earnTokenContract: string\n  earnTokenSymbol: string\n  bondContract: string\n  projectLink?: string\n  twitter?: string\n  chain: number\n  isSoldOut?: boolean\n  billType?: string\n  cgId?: string\n  dexscreener?: string\n}\n\nconst BondInfoTooltip: React.FunctionComponent<TooltipProps> = ({\n  earnTokenContract,\n  earnTokenSymbol,\n  bondContract,\n  projectLink,\n  twitter,\n  chain,\n  isSoldOut = false,\n  billType,\n  cgId,\n  dexscreener,\n}) => {\n  const config = useSDKConfig()\n  const explorerLink = BLOCK_EXPLORER[chain as ChainId]\n  const urlPage =\n    chain === ChainId.SOL\n      ? 'account'\n      : chain === ChainId.APTOS\n        ? 'object'\n        : chain === ChainId.SUI\n          ? 'object'\n          : 'address'\n  const aptosNetworkParam = chain === ChainId.APTOS ? `?network=${IS_APTOS_MAINNET ? 'mainnet' : 'testnet'}` : ''\n  const tokenLink = `${explorerLink}/${urlPage}/${earnTokenContract}${aptosNetworkParam}`\n  const bondLink = `${explorerLink}/${urlPage}/${bondContract}${aptosNetworkParam}`\n  const bondDashboard = `https://dashboard.ape.bond/bond/${bondContract}`\n\n  const handleProjectViewNavigation = () => {\n    window.location.href = `/bonds/${bondContract}/${chain}`\n    track({\n      event: 'projectInfoClick',\n      chain: chain,\n      data: {\n        cat: 'Table',\n        bond: earnTokenSymbol,\n        bondChain: chain,\n      },\n    })\n  }\n  return (\n    <Flex sx={{ flexDirection: 'column', flexWrap: 'wrap' }}>\n      <ButtonsRow\n        twitter={twitter}\n        projectLink={projectLink}\n        earnTokenContract={earnTokenContract}\n        cgId={cgId}\n        dexscreener={dexscreener}\n      />\n      {config?.referenceId === 'apebond' && !isSoldOut && billType !== 'fcfs' && (\n        <Flex sx={{ width: '100%', my: '5px', justifyContent: 'center', position: 'relative', height: '25px' }}>\n          <ExpandedViewButton handleNavigation={handleProjectViewNavigation} rightPos={'-5px'} />\n        </Flex>\n      )}\n      <Flex sx={{ justifyContent: 'center' }}>\n        <Flex sx={{ width: '144px', flexDirection: 'column' }}>\n          <Flex sx={styles.linkRow}>\n            {tokenLink && (\n              <Link href={tokenLink} sx={styles.link} target=\"_blank\">\n                View Token Contract\n                <Flex sx={{ ml: '5px' }}>\n                  <External color=\"text\" width={10} />\n                </Flex>\n              </Link>\n            )}\n          </Flex>\n          <Flex sx={styles.linkRow}>\n            {bondLink && (\n              <Link href={bondLink} sx={styles.link} target=\"_blank\">\n                View Bond Contract\n                <Flex sx={{ ml: '5px' }}>\n                  <External color=\"text\" width={10} />\n                </Flex>\n              </Link>\n            )}\n          </Flex>\n          <Flex sx={styles.linkRow}>\n            {billType !== 'fcfs' && (\n              <Link href={bondDashboard} sx={styles.link} target=\"_blank\" rel=\"noopener noreferrer\">\n                View Bond Insights\n                <Flex sx={{ ml: '5px' }}>\n                  <External color=\"text\" width={10} />\n                </Flex>\n              </Link>\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default BondInfoTooltip\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport ButtonsRow from './ButtonsRow'\nimport { BLOCK_EXPLORER } from '../../config/constants/chains'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { IS_APTOS_MAINNET } from '../../constants/aptosConstants'\nimport Flex from '../uikit-sdk/Flex'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport ExpandedViewButton from '../../views/BuyBond/components/ExpandedViewButton'\nimport track from '../../utils/track'\nimport External from '../uikit-sdk/Svg/Icons/External'\n\ninterface TooltipProps {\n  earnTokenContract: string\n  earnTokenSymbol: string\n  bondContract: string\n  projectLink?: string\n  twitter?: string\n  chain: number\n  isSoldOut?: boolean\n  billType?: string\n  cgId?: string\n  dexscreener?: string\n}\n\nconst linkRowClasses = 'ape:w-full ape:mt-[5px] ape:justify-end ape:[&_svg]:w-[11px]'\nconst linkClasses = 'ape:text-[12px] ape:leading-[14px] ape:flex ape:no-underline ape:hover:underline'\n\nconst BondInfoTooltip: React.FunctionComponent<TooltipProps> = ({\n  earnTokenContract,\n  earnTokenSymbol,\n  bondContract,\n  projectLink,\n  twitter,\n  chain,\n  isSoldOut = false,\n  billType,\n  cgId,\n  dexscreener,\n}) => {\n  const config = useSDKConfig()\n  const explorerLink = BLOCK_EXPLORER[chain as ChainId]\n  const urlPage =\n    chain === ChainId.SOL\n      ? 'account'\n      : chain === ChainId.APTOS\n        ? 'object'\n        : chain === ChainId.SUI\n          ? 'object'\n          : 'address'\n  const aptosNetworkParam = chain === ChainId.APTOS ? `?network=${IS_APTOS_MAINNET ? 'mainnet' : 'testnet'}` : ''\n  const tokenLink = `${explorerLink}/${urlPage}/${earnTokenContract}${aptosNetworkParam}`\n  const bondLink = `${explorerLink}/${urlPage}/${bondContract}${aptosNetworkParam}`\n  const bondDashboard = `https://dashboard.ape.bond/bond/${bondContract}`\n\n  const handleProjectViewNavigation = () => {\n    window.location.href = `/bonds/${bondContract}/${chain}`\n    track({\n      event: 'projectInfoClick',\n      chain: chain,\n      data: {\n        cat: 'Table',\n        bond: earnTokenSymbol,\n        bondChain: chain,\n      },\n    })\n  }\n  return (\n    <Flex className=\"ape:flex-col ape:flex-wrap\">\n      <ButtonsRow\n        twitter={twitter}\n        projectLink={projectLink}\n        earnTokenContract={earnTokenContract}\n        cgId={cgId}\n        dexscreener={dexscreener}\n      />\n      {config?.referenceId === 'apebond' && !isSoldOut && billType !== 'fcfs' && (\n        <Flex className=\"ape:w-full ape:my-[5px] ape:justify-center ape:relative ape:h-[25px]\">\n          <ExpandedViewButton handleNavigation={handleProjectViewNavigation} rightPos={'-5px'} />\n        </Flex>\n      )}\n      <Flex className=\"ape:justify-center\">\n        <Flex className=\"ape:w-[144px] ape:flex-col\">\n          <Flex className={linkRowClasses}>\n            {tokenLink && (\n              <a href={tokenLink} className={linkClasses} target=\"_blank\" rel=\"noreferrer\">\n                View Token Contract\n                <Flex className=\"ape:ml-[5px]\">\n                  <External color=\"text\" width={10} />\n                </Flex>\n              </a>\n            )}\n          </Flex>\n          <Flex className={linkRowClasses}>\n            {bondLink && (\n              <a href={bondLink} className={linkClasses} target=\"_blank\" rel=\"noreferrer\">\n                View Bond Contract\n                <Flex className=\"ape:ml-[5px]\">\n                  <External color=\"text\" width={10} />\n                </Flex>\n              </a>\n            )}\n          </Flex>\n          <Flex className={linkRowClasses}>\n            {billType !== 'fcfs' && (\n              <a href={bondDashboard} className={linkClasses} target=\"_blank\" rel=\"noopener noreferrer\">\n                View Bond Insights\n                <Flex className=\"ape:ml-[5px]\">\n                  <External color=\"text\" width={10} />\n                </Flex>\n              </a>\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default BondInfoTooltip\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/YouTooltip/YouTooltip.d.ts

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

package/dist/components/YouTooltip/YouTooltip.js

@@ -1,30 +1,8 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import Flex from '../uikit-sdk/Flex/index.js';
 
 const YouTooltip = () => {
-    return (jsx(Flex, { sx: { position: 'relative', ml: '10px' }, children: jsx(Flex, { sx: {
-                background: 'primaryButton',
-                height: '18px',
-                justifyContent: 'center',
-                borderRadius: '4px',
-                px: '5px',
-                fontWeight: 400,
-                fontSize: '12px',
-                position: 'absolute',
-                left: 0,
-                top: '50%', // Start 50% down the parent
-                transform: 'translateY(-50%)', // Adjust by the element's own height
-                '::after': {
-                    content: '""',
-                    position: 'absolute',
-                    top: '50%', // Vertically center
-                    left: '-11px', // Position outside the tooltip box
-                    transform: 'translateY(-50%)', // Center arrow vertically
-                    borderWidth: '6px', // Arrow size
-                    borderStyle: 'solid',
-                    borderColor: 'transparent var(--theme-ui-colors-primaryButton) transparent transparent', // Arrow now points left
-                },
-            }, children: "You" }) }));
+    return (jsx(Flex, { className: "ape:relative ape:ml-[10px]", children: jsx(Flex, { className: "ape-you-tooltip ape:bg-primary-button ape:h-[18px] ape:justify-center ape:rounded-[4px] ape:px-[5px] ape:font-normal ape:text-[12px] ape:absolute ape:left-0 ape:top-1/2 ape:-translate-y-1/2", children: "You" }) }));
 };
 
 export { YouTooltip as default };

package/dist/components/YouTooltip/YouTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"YouTooltip.js","sources":["../../../src/components/YouTooltip/YouTooltip.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\n\nconst YouTooltip = () => {\n  return (\n    <Flex sx={{ position: 'relative', ml: '10px' }}>\n      <Flex\n        sx={{\n          background: 'primaryButton',\n          height: '18px',\n          justifyContent: 'center',\n          borderRadius: '4px',\n          px: '5px',\n          fontWeight: 400,\n          fontSize: '12px',\n          position: 'absolute',\n          left: 0,\n          top: '50%', // Start 50% down the parent\n          transform: 'translateY(-50%)', // Adjust by the element's own height\n          '::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: '50%', // Vertically center\n            left: '-11px', // Position outside the tooltip box\n            transform: 'translateY(-50%)', // Center arrow vertically\n            borderWidth: '6px', // Arrow size\n            borderStyle: 'solid',\n            borderColor: 'transparent var(--theme-ui-colors-primaryButton) transparent transparent', // Arrow now points left\n          },\n        }}\n      >\n        You\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default YouTooltip\n"],"names":["_jsx"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,MAAK;IACtB,QACEA,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAC5CA,IAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gBAAA,UAAU,EAAE,eAAe;AAC3B,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,YAAY,EAAE,KAAK;AACnB,gBAAA,EAAE,EAAE,KAAK;AACT,gBAAA,UAAU,EAAE,GAAG;AACf,gBAAA,QAAQ,EAAE,MAAM;AAChB,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,IAAI,EAAE,CAAC;gBACP,GAAG,EAAE,KAAK;gBACV,SAAS,EAAE,kBAAkB;AAC7B,gBAAA,SAAS,EAAE;AACT,oBAAA,OAAO,EAAE,IAAI;AACb,oBAAA,QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,KAAK;oBACV,IAAI,EAAE,OAAO;oBACb,SAAS,EAAE,kBAAkB;oBAC7B,WAAW,EAAE,KAAK;AAClB,oBAAA,WAAW,EAAE,OAAO;oBACpB,WAAW,EAAE,0EAA0E;AACxF,iBAAA;aACF,EAAA,QAAA,EAAA,KAAA,EAAA,CAGI,EAAA,CACF;AAEX;;;;"}
+{"version":3,"file":"YouTooltip.js","sources":["../../../src/components/YouTooltip/YouTooltip.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\n\nconst YouTooltip = () => {\n  return (\n    <Flex className=\"ape:relative ape:ml-[10px]\">\n      <Flex className=\"ape-you-tooltip ape:bg-primary-button ape:h-[18px] ape:justify-center ape:rounded-[4px] ape:px-[5px] ape:font-normal ape:text-[12px] ape:absolute ape:left-0 ape:top-1/2 ape:-translate-y-1/2\">\n        You\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default YouTooltip\n"],"names":["_jsx"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,MAAK;AACtB,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAC1CA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,+LAA+L,EAAA,QAAA,EAAA,KAAA,EAAA,CAExM,EAAA,CACF;AAEX;;;;"}

package/dist/components/uikit-sdk/Button/Button.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ButtonProps } from './types';
-declare const Button: ({ variant, size, load, children, startIcon, endIcon, fullWidth, disabled, ...props }: ButtonProps) => React.JSX.Element;
+declare const Button: ({ variant, size, load, children, startIcon, endIcon, fullWidth, disabled, className, style, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/components/uikit-sdk/Button/Button.js

@@ -1,47 +1,41 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
-import { Button as Button$1, Spinner } from 'theme-ui';
-import { variants, buttonPadding, buttonLineHeight, buttonFontSizes, sizes } from './types.js';
+import Spinner from '../Spinner/index.js';
+import clsx from 'clsx';
+import { variants, sizes, buttonLineHeight, buttonFontSizes } from './types.js';
 
-const Button = ({ variant = variants.PRIMARY, size = sizes.MEDIUM, load, children, startIcon, endIcon, fullWidth, disabled, ...props }) => {
-    let hoverStyle = {
-        '&:hover': {
-            '&:not([disabled])': {
-                borderColor: 'primaryButton',
-                background: variant === 'primary' && 'primaryButton',
-                opacity: 0.7,
-            },
-            '&:disabled': {},
-        },
-    };
-    if (variant === 'secondary') {
-        hoverStyle = {
-            '&:hover': {
-                '&:not([disabled])': hoverStyle['&:hover']['&:not([disabled])'],
-                '&:disabled': {
-                    color: 'secondaryButtonDisableColor',
-                    borderColor: 'secondaryButtonDisable',
-                    opacity: 0.6,
-                },
-            },
-        };
-    }
-    return (jsxs(Button$1, { variant: variant, disabled: disabled, sx: {
-            variant: `buttons.${variant}`,
-            textTransform: 'uppercase',
+const baseClasses = 'ape:font-body ape:font-bold ape:uppercase ape:cursor-pointer ape:flex ape:items-center ape:justify-center ' +
+    'ape:rounded-normal ape:border-[3px] ape:border-solid ape:transition-all ape:duration-300 ape:ease-linear ' +
+    'ape:active:enabled:scale-90';
+const variantClasses = {
+    [variants.PRIMARY]: 'ape:bg-primary-button ape:border-primary-button ape:text-primary-bright ' +
+        'ape:enabled:hover:bg-primary-button-hovered ape:enabled:hover:border-primary-button-hovered ' +
+        'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-text-disabled-button ape:disabled:border-transparent ape:disabled:opacity-90',
+    [variants.SECONDARY]: 'ape:bg-transparent ape:border-primary-button ape:text-primary-button ' +
+        'ape:enabled:hover:border-primary-button-hovered ' +
+        'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-primary-button-disable ape:disabled:border-transparent',
+};
+// px values ported 1:1 from the old theme-ui space scale indices in buttonPadding (types.ts)
+const paddingX = {
+    [sizes.SMALL]: '12px',
+    [sizes.MEDIUM]: '16px',
+    [sizes.LARGE]: '22px',
+};
+const paddingY = {
+    [sizes.SMALL]: '6px',
+    [sizes.MEDIUM]: '8px',
+    [sizes.LARGE]: '14px',
+};
+const Button = ({ variant = variants.PRIMARY, size = sizes.MEDIUM, load, children, startIcon, endIcon, fullWidth, disabled, className, style, ...props }) => {
+    return (jsxs("button", { disabled: disabled, className: clsx(baseClasses, variantClasses[variant], fullWidth ? 'ape:w-full' : 'ape:w-max', className), style: {
             fontSize: buttonFontSizes[size],
             lineHeight: buttonLineHeight[size],
-            px: buttonPadding[size].x,
-            py: buttonPadding[size].y,
-            display: 'flex',
-            justifyContent: 'center',
-            transition: 'all .3s linear',
-            '&:active': {
-                transform: 'scale(0.9)',
-            },
-            ...hoverStyle,
-            width: fullWidth ? '100%' : 'max-content',
-        }, ...props, children: [React.isValidElement(startIcon) && React.cloneElement(startIcon), children, " ", load && jsx(Spinner, { size: 16, ml: "5px" }), React.isValidElement(endIcon) && React.cloneElement(endIcon)] }));
+            paddingLeft: paddingX[size],
+            paddingRight: paddingX[size],
+            paddingTop: paddingY[size],
+            paddingBottom: paddingY[size],
+            ...style,
+        }, ...props, children: [React.isValidElement(startIcon) && React.cloneElement(startIcon), children, " ", load && jsx(Spinner, { size: 16, style: { marginLeft: '5px' } }), React.isValidElement(endIcon) && React.cloneElement(endIcon)] }));
 };
 
 export { Button as default };

package/dist/components/uikit-sdk/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/uikit-sdk/Button/Button.tsx"],"sourcesContent":["import React from 'react'\nimport { Button as ThemeUIButton, Spinner } from 'theme-ui'\nimport { ButtonProps, variants, buttonFontSizes, buttonPadding, sizes, buttonLineHeight } from './types'\n\nconst Button = ({\n  variant = variants.PRIMARY,\n  size = sizes.MEDIUM,\n  load,\n  children,\n  startIcon,\n  endIcon,\n  fullWidth,\n  disabled,\n  ...props\n}: ButtonProps) => {\n  let hoverStyle = {\n    '&:hover': {\n      '&:not([disabled])': {\n        borderColor: 'primaryButton',\n        background: variant === 'primary' && 'primaryButton',\n        opacity: 0.7,\n      },\n      '&:disabled': {},\n    },\n  }\n  if (variant === 'secondary') {\n    hoverStyle = {\n      '&:hover': {\n        '&:not([disabled])': hoverStyle['&:hover']['&:not([disabled])'],\n        '&:disabled': {\n          color: 'secondaryButtonDisableColor',\n          borderColor: 'secondaryButtonDisable',\n          opacity: 0.6,\n        },\n      },\n    }\n  }\n\n  return (\n    <ThemeUIButton\n      variant={variant}\n      disabled={disabled}\n      sx={{\n        variant: `buttons.${variant}`,\n        textTransform: 'uppercase',\n        fontSize: buttonFontSizes[size],\n        lineHeight: buttonLineHeight[size],\n        px: buttonPadding[size].x,\n        py: buttonPadding[size].y,\n        display: 'flex',\n        justifyContent: 'center',\n        transition: 'all .3s linear',\n        '&:active': {\n          transform: 'scale(0.9)',\n        },\n        ...hoverStyle,\n        width: fullWidth ? '100%' : 'max-content',\n      }}\n      {...props}\n    >\n      {React.isValidElement(startIcon) && React.cloneElement(startIcon)}\n      {children} {load && <Spinner size={16} ml=\"5px\" />}\n      {React.isValidElement(endIcon) && React.cloneElement(endIcon)}\n    </ThemeUIButton>\n  )\n}\n\nexport default Button\n"],"names":["_jsxs","ThemeUIButton","_jsx"],"mappings":";;;;;AAIA,MAAM,MAAM,GAAG,CAAC,EACd,OAAO,GAAG,QAAQ,CAAC,OAAO,EAC1B,IAAI,GAAG,KAAK,CAAC,MAAM,EACnB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,IAAI,UAAU,GAAG;AACf,QAAA,SAAS,EAAE;AACT,YAAA,mBAAmB,EAAE;AACnB,gBAAA,WAAW,EAAE,eAAe;AAC5B,gBAAA,UAAU,EAAE,OAAO,KAAK,SAAS,IAAI,eAAe;AACpD,gBAAA,OAAO,EAAE,GAAG;AACb,aAAA;AACD,YAAA,YAAY,EAAE,EAAE;AACjB,SAAA;KACF;AACD,IAAA,IAAI,OAAO,KAAK,WAAW,EAAE;AAC3B,QAAA,UAAU,GAAG;AACX,YAAA,SAAS,EAAE;AACT,gBAAA,mBAAmB,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,mBAAmB,CAAC;AAC/D,gBAAA,YAAY,EAAE;AACZ,oBAAA,KAAK,EAAE,6BAA6B;AACpC,oBAAA,WAAW,EAAE,wBAAwB;AACrC,oBAAA,OAAO,EAAE,GAAG;AACb,iBAAA;AACF,aAAA;SACF;IACH;AAEA,IAAA,QACEA,IAAA,CAACC,QAAa,EAAA,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE;YACF,OAAO,EAAE,CAAA,QAAA,EAAW,OAAO,CAAA,CAAE;AAC7B,YAAA,aAAa,EAAE,WAAW;AAC1B,YAAA,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC;AAC/B,YAAA,UAAU,EAAE,gBAAgB,CAAC,IAAI,CAAC;AAClC,YAAA,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;AACzB,YAAA,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;AACzB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,QAAQ;AACxB,YAAA,UAAU,EAAE,gBAAgB;AAC5B,YAAA,UAAU,EAAE;AACV,gBAAA,SAAS,EAAE,YAAY;AACxB,aAAA;AACD,YAAA,GAAG,UAAU;YACb,KAAK,EAAE,SAAS,GAAG,MAAM,GAAG,aAAa;SAC1C,EAAA,GACG,KAAK,aAER,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAChE,QAAQ,EAAA,GAAA,EAAG,IAAI,IAAIC,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,EAAE,EAAC,KAAK,EAAA,CAAG,EACjD,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA,EAAA,CAC/C;AAEpB;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/uikit-sdk/Button/Button.tsx"],"sourcesContent":["import React from 'react'\nimport Spinner from '../Spinner'\nimport clsx from 'clsx'\nimport { ButtonProps, variants, buttonFontSizes, sizes, buttonLineHeight } from './types'\n\nconst baseClasses =\n  'ape:font-body ape:font-bold ape:uppercase ape:cursor-pointer ape:flex ape:items-center ape:justify-center ' +\n  'ape:rounded-normal ape:border-[3px] ape:border-solid ape:transition-all ape:duration-300 ape:ease-linear ' +\n  'ape:active:enabled:scale-90'\n\nconst variantClasses: Record<string, string> = {\n  [variants.PRIMARY]:\n    'ape:bg-primary-button ape:border-primary-button ape:text-primary-bright ' +\n    'ape:enabled:hover:bg-primary-button-hovered ape:enabled:hover:border-primary-button-hovered ' +\n    'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-text-disabled-button ape:disabled:border-transparent ape:disabled:opacity-90',\n  [variants.SECONDARY]:\n    'ape:bg-transparent ape:border-primary-button ape:text-primary-button ' +\n    'ape:enabled:hover:border-primary-button-hovered ' +\n    'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-primary-button-disable ape:disabled:border-transparent',\n}\n\n// px values ported 1:1 from the old theme-ui space scale indices in buttonPadding (types.ts)\nconst paddingX: Record<string, string> = {\n  [sizes.SMALL]: '12px',\n  [sizes.MEDIUM]: '16px',\n  [sizes.LARGE]: '22px',\n}\nconst paddingY: Record<string, string> = {\n  [sizes.SMALL]: '6px',\n  [sizes.MEDIUM]: '8px',\n  [sizes.LARGE]: '14px',\n}\n\nconst Button = ({\n  variant = variants.PRIMARY,\n  size = sizes.MEDIUM,\n  load,\n  children,\n  startIcon,\n  endIcon,\n  fullWidth,\n  disabled,\n  className,\n  style,\n  ...props\n}: ButtonProps) => {\n  return (\n    <button\n      disabled={disabled}\n      className={clsx(baseClasses, variantClasses[variant], fullWidth ? 'ape:w-full' : 'ape:w-max', className)}\n      style={{\n        fontSize: buttonFontSizes[size],\n        lineHeight: buttonLineHeight[size],\n        paddingLeft: paddingX[size],\n        paddingRight: paddingX[size],\n        paddingTop: paddingY[size],\n        paddingBottom: paddingY[size],\n        ...style,\n      }}\n      {...props}\n    >\n      {React.isValidElement(startIcon) && React.cloneElement(startIcon)}\n      {children} {load && <Spinner size={16} style={{ marginLeft: '5px' }} />}\n      {React.isValidElement(endIcon) && React.cloneElement(endIcon)}\n    </button>\n  )\n}\n\nexport default Button\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAKA,MAAM,WAAW,GACf,4GAA4G;IAC5G,2GAA2G;AAC3G,IAAA,6BAA6B;AAE/B,MAAM,cAAc,GAA2B;AAC7C,IAAA,CAAC,QAAQ,CAAC,OAAO,GACf,0EAA0E;QAC1E,8FAA8F;QAC9F,uJAAuJ;AACzJ,IAAA,CAAC,QAAQ,CAAC,SAAS,GACjB,uEAAuE;QACvE,kDAAkD;QAClD,iIAAiI;CACpI;AAED;AACA,MAAM,QAAQ,GAA2B;AACvC,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;AACrB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;AACtB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;CACtB;AACD,MAAM,QAAQ,GAA2B;AACvC,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK;AACpB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK;AACrB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;CACtB;AAED,MAAM,MAAM,GAAG,CAAC,EACd,OAAO,GAAG,QAAQ,CAAC,OAAO,EAC1B,IAAI,GAAG,KAAK,CAAC,MAAM,EACnB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,EACE,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,EAAE,SAAS,CAAC,EACxG,KAAK,EAAE;AACL,YAAA,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC;AAC/B,YAAA,UAAU,EAAE,gBAAgB,CAAC,IAAI,CAAC;AAClC,YAAA,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC3B,YAAA,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC5B,YAAA,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC1B,YAAA,aAAa,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC7B,YAAA,GAAG,KAAK;SACT,EAAA,GACG,KAAK,aAER,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAChE,QAAQ,EAAA,GAAA,EAAG,IAAI,IAAIC,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,EAAA,CAAI,EACtE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA,EAAA,CACtD;AAEb;;;;"}

package/dist/components/uikit-sdk/Button/IconButton.js

@@ -1,21 +1,23 @@
-import { jsx } from 'theme-ui/jsx-runtime';
-import { Button } from 'theme-ui';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import colors from '../../../theme/colors.js';
 import Discord from '../Svg/Icons/Discord.js';
 import { iconButtonVariants } from './types.js';
-import styles from './styles.js';
 
-const IconButton = ({ icon: Icon = Discord, color = 'white1', background = 'yellow', variant = iconButtonVariants.PRIMARY, iconWidth, children, ...props }) => {
-    return (jsx(Button, { ...props, variant: variant, sx: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            position: 'relative',
-            variant: `buttons.${variant}`,
-            color: 'primaryBright',
-            background,
-            ...(variant === iconButtonVariants.PRIMARY ? styles.primary : {}),
-            ...(variant === iconButtonVariants.TRANSPARENT ? styles.transparent : {}),
-        }, children: children || (jsx("span", { sx: { height: iconWidth, width: iconWidth }, children: jsx(Icon, { color: color, ...props, width: iconWidth }) })) }));
+const resolveColor = (color) => (color && colors[color]) || color;
+const baseClasses = 'ape:flex ape:items-center ape:justify-center ape:relative ape:text-primary-bright ape:border-none ape:cursor-pointer ' +
+    'ape:transition-all ape:duration-300 ape:ease-linear ape:hover:brightness-115 ape:active:scale-90';
+const variantClasses = {
+    [iconButtonVariants.PRIMARY]: 'ape:rounded-normal ape:font-bold ape:font-body ape:px-[19px] ape:py-[10px]',
+    [iconButtonVariants.TRANSPARENT]: 'ape:bg-transparent ape:bg-no-repeat ape:p-0 ape:[&_svg]:bg-transparent',
+};
+const IconButton = ({ icon: Icon = Discord, color = 'white1', background = 'yellow', variant = iconButtonVariants.PRIMARY, iconWidth, children, className, style, ...props }) => {
+    return (jsx("button", { ...props, className: clsx(baseClasses, variantClasses[variant], className), 
+        // The `transparent` variant must stay transparent regardless of the
+        // `background` prop (it defaults to 'yellow') — inline style always
+        // beats the variant's `ape:bg-transparent` class, so skip it here
+        // rather than let it silently win.
+        style: { ...(variant !== iconButtonVariants.TRANSPARENT ? { background: resolveColor(background) } : {}), ...style }, children: children || (jsx("span", { style: { height: iconWidth, width: iconWidth }, children: jsx(Icon, { color: color, ...props, width: iconWidth }) })) }));
 };
 
 export { IconButton as default };

package/dist/components/uikit-sdk/Button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/uikit-sdk/Button/IconButton.tsx"],"sourcesContent":["import React from 'react'\nimport { Button } from 'theme-ui'\nimport Discord from '../Svg/Icons/Discord'\nimport { IconButtonProps, iconButtonVariants as variants } from './types'\nimport style from './styles'\n\nconst IconButton: React.FC<IconButtonProps> = ({\n  icon: Icon = Discord,\n  color = 'white1',\n  background = 'yellow',\n  variant = variants.PRIMARY,\n  iconWidth,\n  children,\n  ...props\n}) => {\n  return (\n    <Button\n      {...props}\n      variant={variant}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        position: 'relative',\n        variant: `buttons.${variant}`,\n        color: 'primaryBright',\n        background,\n        ...(variant === variants.PRIMARY ? style.primary : {}),\n        ...(variant === variants.TRANSPARENT ? style.transparent : {}),\n      }}\n    >\n      {children || (\n        <span sx={{ height: iconWidth, width: iconWidth }}>\n          <Icon color={color} {...props} width={iconWidth} />\n        </span>\n      )}\n    </Button>\n  )\n}\n\nexport default IconButton\n"],"names":["variants","_jsx","style"],"mappings":";;;;;;AAMA,MAAM,UAAU,GAA8B,CAAC,EAC7C,IAAI,EAAE,IAAI,GAAG,OAAO,EACpB,KAAK,GAAG,QAAQ,EAChB,UAAU,GAAG,QAAQ,EACrB,OAAO,GAAGA,kBAAQ,CAAC,OAAO,EAC1B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;IACH,QACEC,GAAA,CAAC,MAAM,EAAA,EAAA,GACD,KAAK,EACT,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE;AACF,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,cAAc,EAAE,QAAQ;AACxB,YAAA,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,CAAA,QAAA,EAAW,OAAO,CAAA,CAAE;AAC7B,YAAA,KAAK,EAAE,eAAe;YACtB,UAAU;AACV,YAAA,IAAI,OAAO,KAAKD,kBAAQ,CAAC,OAAO,GAAGE,MAAK,CAAC,OAAO,GAAG,EAAE,CAAC;AACtD,YAAA,IAAI,OAAO,KAAKF,kBAAQ,CAAC,WAAW,GAAGE,MAAK,CAAC,WAAW,GAAG,EAAE,CAAC;AAC/D,SAAA,EAAA,QAAA,EAEA,QAAQ,KACPD,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EAC/CA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,KAAK,KAAM,KAAK,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,EAAA,CAC9C,CACR,EAAA,CACM;AAEb;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/uikit-sdk/Button/IconButton.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport colors from '../../../theme/colors'\nimport Discord from '../Svg/Icons/Discord'\nimport { IconButtonProps, iconButtonVariants as variants } from './types'\n\nconst resolveColor = (color?: string) => (color && colors[color as keyof typeof colors]) || color\n\nconst baseClasses =\n  'ape:flex ape:items-center ape:justify-center ape:relative ape:text-primary-bright ape:border-none ape:cursor-pointer ' +\n  'ape:transition-all ape:duration-300 ape:ease-linear ape:hover:brightness-115 ape:active:scale-90'\n\nconst variantClasses: Record<string, string> = {\n  [variants.PRIMARY]: 'ape:rounded-normal ape:font-bold ape:font-body ape:px-[19px] ape:py-[10px]',\n  [variants.TRANSPARENT]: 'ape:bg-transparent ape:bg-no-repeat ape:p-0 ape:[&_svg]:bg-transparent',\n}\n\nconst IconButton: React.FC<IconButtonProps> = ({\n  icon: Icon = Discord,\n  color = 'white1',\n  background = 'yellow',\n  variant = variants.PRIMARY,\n  iconWidth,\n  children,\n  className,\n  style,\n  ...props\n}) => {\n  return (\n    <button\n      {...props}\n      className={clsx(baseClasses, variantClasses[variant], className)}\n      // The `transparent` variant must stay transparent regardless of the\n      // `background` prop (it defaults to 'yellow') — inline style always\n      // beats the variant's `ape:bg-transparent` class, so skip it here\n      // rather than let it silently win.\n      style={{ ...(variant !== variants.TRANSPARENT ? { background: resolveColor(background) } : {}), ...style }}\n    >\n      {children || (\n        <span style={{ height: iconWidth, width: iconWidth }}>\n          <Icon color={color} {...props} width={iconWidth} />\n        </span>\n      )}\n    </button>\n  )\n}\n\nexport default IconButton\n"],"names":["variants","_jsx"],"mappings":";;;;;;AAMA,MAAM,YAAY,GAAG,CAAC,KAAc,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC,KAA4B,CAAC,KAAK,KAAK;AAEjG,MAAM,WAAW,GACf,uHAAuH;AACvH,IAAA,kGAAkG;AAEpG,MAAM,cAAc,GAA2B;AAC7C,IAAA,CAACA,kBAAQ,CAAC,OAAO,GAAG,4EAA4E;AAChG,IAAA,CAACA,kBAAQ,CAAC,WAAW,GAAG,wEAAwE;CACjG;AAED,MAAM,UAAU,GAA8B,CAAC,EAC7C,IAAI,EAAE,IAAI,GAAG,OAAO,EACpB,KAAK,GAAG,QAAQ,EAChB,UAAU,GAAG,QAAQ,EACrB,OAAO,GAAGA,kBAAQ,CAAC,OAAO,EAC1B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,KAAI;AACH,IAAA,QACEC,GAAA,CAAA,QAAA,EAAA,EAAA,GACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;;;;;AAKhE,QAAA,KAAK,EAAE,EAAE,IAAI,OAAO,KAAKD,kBAAQ,CAAC,WAAW,GAAG,EAAE,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EAAA,QAAA,EAEzG,QAAQ,KACPC,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,YAClDA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,GAAM,KAAK,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,EAAA,CAC9C,CACR,EAAA,CACM;AAEb;;;;"}

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

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import type React from 'react';
-import { ButtonProps as ThemeUIButtonProps } from 'theme-ui';
 import { SvgProps } from '../Svg/types';
 export declare enum sizes {
     SMALL = "sm",
@@ -24,7 +23,7 @@ export declare enum iconButtonVariants {
 type sizeProps = `${sizes}`;
 type variantProps = `${variants}`;
 type iconButtonVariantsProps = `${iconButtonVariants}`;
-export interface ButtonProps extends Omit<ThemeUIButtonProps, 'sx'> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: variantProps;
     size?: sizeProps;
     startIcon?: ReactNode;

package/dist/components/uikit-sdk/Button/types.js

@@ -14,11 +14,11 @@ const buttonLineHeight = {
     [sizes.MEDIUM]: '24px',
     [sizes.LARGE]: '33px',
 };
-const buttonPadding = {
-    [sizes.SMALL]: { x: 5, y: 2 },
-    [sizes.MEDIUM]: { x: 7, y: 3 },
-    [sizes.LARGE]: { x: 10, y: 6 },
-};
+({
+    [sizes.SMALL]: { },
+    [sizes.MEDIUM]: { },
+    [sizes.LARGE]: { },
+});
 var variants;
 (function (variants) {
     variants["PRIMARY"] = "primary";
@@ -30,5 +30,5 @@ var iconButtonVariants;
     iconButtonVariants["TRANSPARENT"] = "transparent";
 })(iconButtonVariants || (iconButtonVariants = {}));
 
-export { buttonFontSizes, buttonLineHeight, buttonPadding, iconButtonVariants, sizes, variants };
+export { buttonFontSizes, buttonLineHeight, iconButtonVariants, sizes, variants };
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/Button/types.ts"],"sourcesContent":["import { ReactNode } from 'react'\nimport type React from 'react'\nimport { ButtonProps as ThemeUIButtonProps } from 'theme-ui'\nimport { SvgProps } from '../Svg/types'\n\nexport enum sizes {\n  SMALL = 'sm',\n  MEDIUM = 'md',\n  LARGE = 'lg',\n}\n\nexport const buttonFontSizes: Record<sizes | any, string> = {\n  [sizes.SMALL]: '12px',\n  [sizes.MEDIUM]: '16px',\n  [sizes.LARGE]: '18px',\n}\n\nexport const buttonLineHeight: Record<sizes | any, string> = {\n  [sizes.SMALL]: '10px',\n  [sizes.MEDIUM]: '24px',\n  [sizes.LARGE]: '33px',\n}\n\nexport const buttonPadding: Record<sizes | any, { x: number; y: number }> = {\n  [sizes.SMALL]: { x: 5, y: 2 },\n  [sizes.MEDIUM]: { x: 7, y: 3 },\n  [sizes.LARGE]: { x: 10, y: 6 },\n}\n\nexport enum variants {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n}\n\nexport enum iconButtonVariants {\n  PRIMARY = 'primary',\n  TRANSPARENT = 'transparent',\n}\n\ntype sizeProps = `${sizes}`\ntype variantProps = `${variants}`\ntype iconButtonVariantsProps = `${iconButtonVariants}`\n\nexport interface ButtonProps extends Omit<ThemeUIButtonProps, 'sx'> {\n  variant?: variantProps\n  size?: sizeProps\n  startIcon?: ReactNode\n  endIcon?: ReactNode\n  fullWidth?: boolean\n  load?: boolean\n  [key: string]: any\n}\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'variant'> {\n  variant?: iconButtonVariantsProps\n  color?: string\n  background?: string\n  icon?: React.ComponentType<SvgProps>\n  iconWidth?: number\n}\n"],"names":[],"mappings":"IAKY;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACZ,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,IAAa;AACb,IAAA,KAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACd,CAAC,EAJW,KAAK,KAAL,KAAK,GAAA,EAAA,CAAA,CAAA;AAMV,MAAM,eAAe,GAAgC;AAC1D,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;AACrB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;AACtB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;;AAGhB,MAAM,gBAAgB,GAAgC;AAC3D,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;AACrB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;AACtB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;;AAGhB,MAAM,aAAa,GAAkD;AAC1E,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC7B,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC9B,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE;;IAGpB;AAAZ,CAAA,UAAY,QAAQ,EAAA;AAClB,IAAA,QAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,QAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACzB,CAAC,EAHW,QAAQ,KAAR,QAAQ,GAAA,EAAA,CAAA,CAAA;IAKR;AAAZ,CAAA,UAAY,kBAAkB,EAAA;AAC5B,IAAA,kBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,kBAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC7B,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,GAAA,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/Button/types.ts"],"sourcesContent":["import { ReactNode } from 'react'\nimport type React from 'react'\nimport { SvgProps } from '../Svg/types'\n\nexport enum sizes {\n  SMALL = 'sm',\n  MEDIUM = 'md',\n  LARGE = 'lg',\n}\n\nexport const buttonFontSizes: Record<sizes | any, string> = {\n  [sizes.SMALL]: '12px',\n  [sizes.MEDIUM]: '16px',\n  [sizes.LARGE]: '18px',\n}\n\nexport const buttonLineHeight: Record<sizes | any, string> = {\n  [sizes.SMALL]: '10px',\n  [sizes.MEDIUM]: '24px',\n  [sizes.LARGE]: '33px',\n}\n\nexport const buttonPadding: Record<sizes | any, { x: number; y: number }> = {\n  [sizes.SMALL]: { x: 5, y: 2 },\n  [sizes.MEDIUM]: { x: 7, y: 3 },\n  [sizes.LARGE]: { x: 10, y: 6 },\n}\n\nexport enum variants {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n}\n\nexport enum iconButtonVariants {\n  PRIMARY = 'primary',\n  TRANSPARENT = 'transparent',\n}\n\ntype sizeProps = `${sizes}`\ntype variantProps = `${variants}`\ntype iconButtonVariantsProps = `${iconButtonVariants}`\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: variantProps\n  size?: sizeProps\n  startIcon?: ReactNode\n  endIcon?: ReactNode\n  fullWidth?: boolean\n  load?: boolean\n  [key: string]: any\n}\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'variant'> {\n  variant?: iconButtonVariantsProps\n  color?: string\n  background?: string\n  icon?: React.ComponentType<SvgProps>\n  iconWidth?: number\n}\n"],"names":[],"mappings":"IAIY;AAAZ,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACZ,IAAA,KAAA,CAAA,QAAA,CAAA,GAAA,IAAa;AACb,IAAA,KAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACd,CAAC,EAJW,KAAK,KAAL,KAAK,GAAA,EAAA,CAAA,CAAA;AAMV,MAAM,eAAe,GAAgC;AAC1D,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;AACrB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;AACtB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;;AAGhB,MAAM,gBAAgB,GAAgC;AAC3D,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;AACrB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;AACtB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;;CAGqD;AAC1E,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,EAAY,CAAE;AAC7B,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,EAAY,CAAE;AAC9B,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,EAAa,CAAE;;IAGpB;AAAZ,CAAA,UAAY,QAAQ,EAAA;AAClB,IAAA,QAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,QAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACzB,CAAC,EAHW,QAAQ,KAAR,QAAQ,GAAA,EAAA,CAAA,CAAA;IAKR;AAAZ,CAAA,UAAY,kBAAkB,EAAA;AAC5B,IAAA,kBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,kBAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC7B,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,GAAA,EAAA,CAAA,CAAA;;;;"}

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

@@ -1,3 +1,3 @@
 import { CheckboxProps } from './types';
-declare const Checkbox: ({ scale, display, className, background, ...props }: CheckboxProps | any) => import("react").JSX.Element;
+declare const Checkbox: ({ scale, display, className, style, background, ...props }: CheckboxProps | any) => import("react/jsx-runtime").JSX.Element;
 export default Checkbox;

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

@@ -1,4 +1,5 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import { scales } from './types.js';
 
 const getScale = ({ scale }) => {
@@ -10,15 +11,17 @@ const getScale = ({ scale }) => {
             return '32px';
     }
 };
-const Checkbox = ({ scale = scales.SM, display = 'block', className, background, ...props }) => {
+// Ported from theme/components.ts `checkbox` variant
+const inputClasses = 'ape:peer ape:bg-white2 ape:rounded-normal ape:border-2 ape:border-solid ape:border-white3 ape:shadow-none ape:outline-none ' +
+    'ape:appearance-none ape:size-full ape:m-0 ape:cursor-pointer ' +
+    'ape:checked:bg-primary-button ape:checked:border-primary-button ' +
+    'ape:focus:not-checked:outline-none ape:focus:not-checked:shadow-none ' +
+    'ape:focus:outline ape:focus:outline-1 ape:focus:outline-primary-button ' +
+    'ape:enabled:hover:not-checked:border-primary-button';
+const Checkbox = ({ scale = scales.SM, display = 'block', className, style, background, ...props }) => {
     const scaleSize = getScale({ scale });
     const svgScale = scale === 'sm' ? 13 : 21;
-    return (jsxs("span", { className: className, sx: {
-            display,
-            width: scaleSize,
-            height: scaleSize,
-            position: 'relative',
-        }, children: [jsx("input", { type: "checkbox", sx: { variant: 'checkbox', background: background, borderColor: 'white4' }, ...props }), jsx("svg", { width: svgScale, viewBox: "0 0 13 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M11.8132 0.171594C11.522 -0.0616871 11.0766 -0.046135 10.8025 0.218251L4.25899 6.76569L1.17566 4.46397C0.93585 4.27735 0.576128 4.2618 0.319184 4.43287C-0.00627898 4.63505 -0.0747974 5.0394 0.147888 5.33489L3.35113 9.4873C3.43677 9.59617 3.55668 9.70503 3.67659 9.78279C4.27612 10.156 5.09835 10.0161 5.50946 9.47175L5.56085 9.40954L11.9159 1.01141C12.1215 0.747022 12.0701 0.389324 11.8132 0.171594Z", fill: "#FAFAFA" }) })] }));
+    return (jsxs("span", { className: clsx('ape:relative', className), style: { display, width: scaleSize, height: scaleSize, ...style }, children: [jsx("input", { type: "checkbox", className: inputClasses, style: { background }, ...props }), jsx("svg", { width: svgScale, viewBox: "0 0 13 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "ape:hidden ape:absolute ape:pointer-events-none ape:inset-0 ape:m-auto ape:peer-checked:block", children: jsx("path", { d: "M11.8132 0.171594C11.522 -0.0616871 11.0766 -0.046135 10.8025 0.218251L4.25899 6.76569L1.17566 4.46397C0.93585 4.27735 0.576128 4.2618 0.319184 4.43287C-0.00627898 4.63505 -0.0747974 5.0394 0.147888 5.33489L3.35113 9.4873C3.43677 9.59617 3.55668 9.70503 3.67659 9.78279C4.27612 10.156 5.09835 10.0161 5.50946 9.47175L5.56085 9.40954L11.9159 1.01141C12.1215 0.747022 12.0701 0.389324 11.8132 0.171594Z", fill: "#FAFAFA" }) })] }));
 };
 
 export { Checkbox as default };