@ape.swap/bonds-sdk 3.3.0-test.5 → 3.3.0-test.7

package/dist/components/TokenSelectorPanel/index.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
 import { Flex, Input } from 'theme-ui';
 import { isNumber } from '../../utils/numbers.js';
 import Button from '../uikit-sdk/Button/Button.js';
-import Svg from '../uikit-sdk/Svg/index.js';
+import Caret from '../uikit-sdk/Svg/Icons/Caret.js';
 import TokenImage from '../uikit-sdk/TokenImage/index.js';
 import useModal from '../../hooks/useModal.js';
 import TokenSelectorModal from '../TokenSelectorModal/index.js';
@@ -34,7 +34,7 @@ const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, chainId,
                                     !!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' }, children: [jsxs(Flex, { children: [jsx(Flex, { className: "input-container bondicon", children: isArray(splited) ? (jsx(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: chainId })) : (jsx(TokenImage, { symbol: getSymbol(selectedToken, chainId), size: 28, chain: chainId })) }), jsx(Flex, { className: "title-container tokenname", children: getSymbol(selectedToken, chainId) })] }), enableZap && (jsx(Flex, { sx: { mr: '8px' }, children: jsx(Svg, { icon: "caret" }) }))] })] }), jsxs(Flex, { className: "input-container balancerow", children: [jsx(Flex, { children: selectedTokenPrice && typedValue
+                            }, disabled: inputDisabled }) }), jsxs(Flex, { className: "input-container token", onClick: () => (enableZap ? onTokenSelectorModal() : null), sx: { cursor: enableZap ? 'pointer' : 'default', borderRadius: 'normal' }, children: [jsxs(Flex, { children: [jsx(Flex, { className: "input-container bondicon", children: isArray(splited) ? (jsx(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: chainId })) : (jsx(TokenImage, { symbol: getSymbol(selectedToken, chainId), size: 28, chain: chainId })) }), jsx(Flex, { className: "title-container tokenname", children: getSymbol(selectedToken, chainId) })] }), enableZap && (jsx(Flex, { sx: { mr: '8px' }, children: jsx(Caret, {}) }))] })] }), jsxs(Flex, { className: "input-container balancerow", children: [jsx(Flex, { children: selectedTokenPrice && typedValue
                             ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`
                             : '' }), jsxs(Flex, { children: [account && jsxs(Flex, { className: "balancerow text", children: ["Balance: ", tokenBalanceString] }), jsx(Flex, { className: "balancerow max", children: tokenBalance && tokenBalance !== '0' && handleValueBtn && (jsx(Fragment, { children: jsx(Button, { className: "max-button", onClick: () => handleValueBtn(new BigNumber(tokenBalance ?? '0')?.toString()), children: "Max" }) })) })] })] })] }));
 };

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 Button from '../uikit-sdk/Button/Button'\nimport Svg from '../uikit-sdk/Svg'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport { ChainId, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../hooks/useModal'\nimport TokenSelectorModal from '../TokenSelectorModal'\nimport BigNumber from 'bignumber.js'\nimport { isArray } from 'lodash'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport { formatUSDNumber } from '../../utils/displayHelpers'\nimport { useAccount } from 'wagmi'\n\nconst TokenSelectorPanel = ({\n  typedValue,\n  setTypedValue,\n  selectedToken,\n  chainId,\n  handleValueBtn,\n  handleCurrencySelect,\n  enableZap,\n  tokenBalance,\n  selectedTokenPrice,\n  bondPrincipalToken,\n  inputDisabled = false,\n}: {\n  typedValue: string\n  setTypedValue: (value: React.SetStateAction<string>) => void\n  selectedToken?: 'NATIVE' | Token\n  chainId: 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}) => {\n  const { address: account } = useAccount()\n\n  const tokenBalanceString = tokenBalance ? new BigNumber(tokenBalance).toPrecision(5) : 'loading'\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={chainId}\n    />,\n    true,\n    false,\n    `tokenSelectorOnLiquidityModal${bondPrincipalToken?.address?.[chainId]}-${bondPrincipalToken?.symbol}`,\n  )\n\n  return (\n    <Flex className=\"token-selector-panel\" sx={{ borderRadius: 'normal' }}>\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        <Flex\n          className=\"input-container token\"\n          onClick={() => (enableZap ? onTokenSelectorModal() : null)}\n          sx={{ cursor: enableZap ? 'pointer' : 'default', borderRadius: 'normal' }}\n        >\n          <Flex>\n            <Flex className=\"input-container bondicon\">\n              {isArray(splited) ? (\n                <TokenImage symbol={splited[0]} symbol2={splited[1]} size={28} chain={chainId} />\n              ) : (\n                <TokenImage symbol={getSymbol(selectedToken, chainId)} size={28} chain={chainId} />\n              )}\n            </Flex>\n            <Flex className=\"title-container tokenname\">{getSymbol(selectedToken, chainId)}</Flex>\n          </Flex>\n          {enableZap && (\n            <Flex sx={{ mr: '8px' }}>\n              <Svg icon=\"caret\" />\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n      <Flex className=\"input-container balancerow\">\n        <Flex>\n          {selectedTokenPrice && typedValue\n            ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`\n            : ''}\n        </Flex>\n        <Flex>\n          {account && <Flex className=\"balancerow text\">Balance: {tokenBalanceString}</Flex>}\n          <Flex className=\"balancerow max\">\n            {tokenBalance && tokenBalance !== '0' && handleValueBtn && (\n              <>\n                <Button\n                  className=\"max-button\"\n                  onClick={() => handleValueBtn(new BigNumber(tokenBalance ?? '0')?.toString())}\n                >\n                  Max\n                </Button>\n              </>\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default TokenSelectorPanel\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"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 Button from '../uikit-sdk/Button/Button'\nimport Caret from '../uikit-sdk/Svg/Icons/Caret'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport { ChainId, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../hooks/useModal'\nimport TokenSelectorModal from '../TokenSelectorModal'\nimport BigNumber from 'bignumber.js'\nimport { isArray } from 'lodash'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport { formatUSDNumber } from '../../utils/displayHelpers'\nimport { useAccount } from 'wagmi'\n\nconst TokenSelectorPanel = ({\n  typedValue,\n  setTypedValue,\n  selectedToken,\n  chainId,\n  handleValueBtn,\n  handleCurrencySelect,\n  enableZap,\n  tokenBalance,\n  selectedTokenPrice,\n  bondPrincipalToken,\n  inputDisabled = false,\n}: {\n  typedValue: string\n  setTypedValue: (value: React.SetStateAction<string>) => void\n  selectedToken?: 'NATIVE' | Token\n  chainId: 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}) => {\n  const { address: account } = useAccount()\n\n  const tokenBalanceString = tokenBalance ? new BigNumber(tokenBalance).toPrecision(5) : 'loading'\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={chainId}\n    />,\n    true,\n    false,\n    `tokenSelectorOnLiquidityModal${bondPrincipalToken?.address?.[chainId]}-${bondPrincipalToken?.symbol}`,\n  )\n\n  return (\n    <Flex className=\"token-selector-panel\" sx={{ borderRadius: 'normal' }}>\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        <Flex\n          className=\"input-container token\"\n          onClick={() => (enableZap ? onTokenSelectorModal() : null)}\n          sx={{ cursor: enableZap ? 'pointer' : 'default', borderRadius: 'normal' }}\n        >\n          <Flex>\n            <Flex className=\"input-container bondicon\">\n              {isArray(splited) ? (\n                <TokenImage symbol={splited[0]} symbol2={splited[1]} size={28} chain={chainId} />\n              ) : (\n                <TokenImage symbol={getSymbol(selectedToken, chainId)} size={28} chain={chainId} />\n              )}\n            </Flex>\n            <Flex className=\"title-container tokenname\">{getSymbol(selectedToken, chainId)}</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>\n          {selectedTokenPrice && typedValue\n            ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`\n            : ''}\n        </Flex>\n        <Flex>\n          {account && <Flex className=\"balancerow text\">Balance: {tokenBalanceString}</Flex>}\n          <Flex className=\"balancerow max\">\n            {tokenBalance && tokenBalance !== '0' && handleValueBtn && (\n              <>\n                <Button\n                  className=\"max-button\"\n                  onClick={() => handleValueBtn(new BigNumber(tokenBalance ?? '0')?.toString())}\n                >\n                  Max\n                </Button>\n              </>\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default TokenSelectorPanel\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/components/Tooltip/ButtonsRow.js

@@ -1,7 +1,10 @@
 import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { styles } from './styles.js';
 import Flex from '../uikit-sdk/Flex/index.js';
-import Svg from '../uikit-sdk/Svg/index.js';
+import URL from '../uikit-sdk/Svg/Icons/URL.js';
+import Twitter from '../uikit-sdk/Svg/Icons/Twitter.js';
+import Bubble from '../uikit-sdk/Svg/Icons/Bubble.js';
+import Audit from '../uikit-sdk/Svg/Icons/Audit.js';
 import Text from '../uikit-sdk/Text/index.js';
 import { Link } from 'theme-ui';
 import { ChainId } from '@ape.swap/apeswap-lists';
@@ -18,7 +21,7 @@ const ButtonsRow = ({ projectLink, twitter, bubble, audit, chain }) => {
     //@ts-ignore
     const bubbleChain = bubbleChainStringMap[chain];
     const bubbleURL = `https://app.bubblemaps.io/${bubbleChain}/token/${bubble}`;
-    return (jsxs(Flex, { sx: { justifyContent: 'center' }, children: [jsx(Flex, { sx: styles.iconButton, as: Link, href: projectLink, target: "_blank", children: jsx(Svg, { icon: "URL", width: 18 }) }), jsx(Flex, { sx: styles.iconButton, as: Link, href: twitter, target: "_blank", children: jsx(Svg, { icon: "twitter", width: 18, color: "text" }) }), bubble && bubbleChain && (jsx(Flex, { sx: styles.iconButton, as: Link, href: bubbleURL, target: "_blank", children: jsx(Svg, { icon: "bubble", width: 18, color: "text" }) })), audit && (jsxs(Flex, { sx: { ...styles.iconButton, margin: '0 0 5px 0', '& svg': { marginRight: '5px' } }, as: Link, href: audit, target: "_blank", children: [jsx(Svg, { icon: "audit", width: 18, color: "text" }), jsx(Text, { sx: { paddingRight: '5px' }, children: 'Audit' })] }))] }));
+    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" }) }), bubble && bubbleChain && (jsx(Flex, { sx: styles.iconButton, as: Link, href: bubbleURL, target: "_blank", children: jsx(Bubble, { width: 18, color: "text" }) })), audit && (jsxs(Flex, { sx: { ...styles.iconButton, margin: '0 0 5px 0', '& svg': { marginRight: '5px' } }, as: Link, href: audit, target: "_blank", children: [jsx(Audit, { width: 18, color: "text" }), jsx(Text, { sx: { paddingRight: '5px' }, children: 'Audit' })] }))] }));
 };
 
 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 Flex from '../uikit-sdk/Flex'\nimport Svg from '../uikit-sdk/Svg'\nimport Text from '../uikit-sdk/Text'\nimport { Link } from 'theme-ui'\nimport { ChainId } from '@ape.swap/apeswap-lists'\n\nconst ButtonsRow: React.FC<{\n  projectLink?: string\n  twitter?: string\n  bubble?: string\n  audit?: string\n  chain?: ChainId\n}> = ({ projectLink, twitter, bubble, audit, chain }) => {\n  const bubbleChainStringMap = {\n    [ChainId.BSC]: 'bsc',\n    [ChainId.MAINNET]: 'eth',\n    [ChainId.ARBITRUM]: 'arbi',\n    [ChainId.MATIC]: 'poly',\n    [ChainId.BASE]: 'base',\n    // [ChainId.SONIC]: 'sonic'\n  }\n  //@ts-ignore\n  const bubbleChain: string | undefined = bubbleChainStringMap[chain]\n\n  const bubbleURL = `https://app.bubblemaps.io/${bubbleChain}/token/${bubble}`\n\n  return (\n    <Flex sx={{ justifyContent: 'center' }}>\n      <Flex sx={styles.iconButton} as={Link} href={projectLink} target=\"_blank\">\n        <Svg icon=\"URL\" width={18} />\n      </Flex>\n      <Flex sx={styles.iconButton} as={Link} href={twitter} target=\"_blank\">\n        <Svg icon=\"twitter\" width={18} color=\"text\" />\n      </Flex>\n      {bubble && bubbleChain && (\n        <Flex sx={styles.iconButton} as={Link} href={bubbleURL} target=\"_blank\">\n          <Svg icon=\"bubble\" width={18} color=\"text\" />\n        </Flex>\n      )}\n      {audit && (\n        <Flex\n          sx={{ ...styles.iconButton, margin: '0 0 5px 0', '& svg': { marginRight: '5px' } }}\n          as={Link}\n          href={audit}\n          target=\"_blank\"\n        >\n          <Svg icon=\"audit\" width={18} color=\"text\" />\n          <Text sx={{ paddingRight: '5px' }}>{'Audit'}</Text>\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default ButtonsRow\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAQA,MAAM,UAAU,GAMX,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAI;AACtD,IAAA,MAAM,oBAAoB,GAAG;AAC3B,QAAA,CAAC,OAAO,CAAC,GAAG,GAAG,KAAK;AACpB,QAAA,CAAC,OAAO,CAAC,OAAO,GAAG,KAAK;AACxB,QAAA,CAAC,OAAO,CAAC,QAAQ,GAAG,MAAM;AAC1B,QAAA,CAAC,OAAO,CAAC,KAAK,GAAG,MAAM;AACvB,QAAA,CAAC,OAAO,CAAC,IAAI,GAAG,MAAM;;KAEvB;;AAED,IAAA,MAAM,WAAW,GAAuB,oBAAoB,CAAC,KAAK,CAAC;AAEnE,IAAA,MAAM,SAAS,GAAG,CAAA,0BAAA,EAA6B,WAAW,CAAA,OAAA,EAAU,MAAM,EAAE;IAE5E,QACEA,KAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACpCC,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EACvEA,GAAA,CAAC,GAAG,EAAA,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EAAA,CACxB,EACPA,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,GAAG,EAAA,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CACzC,EACN,MAAM,IAAI,WAAW,KACpBA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAC,QAAQ,YACrEA,GAAA,CAAC,GAAG,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,GACxC,CACR,EACA,KAAK,KACJD,KAAC,IAAI,EAAA,EACH,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAClF,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,KAAK,EACX,MAAM,EAAC,QAAQ,aAEfC,GAAA,CAAC,GAAG,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAC5CA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,EAAA,QAAA,EAAG,OAAO,GAAQ,CAAA,EAAA,CAC9C,CACR,CAAA,EAAA,CACI;AAEX;;;;"}
+{"version":3,"file":"ButtonsRow.js","sources":["../../../src/components/Tooltip/ButtonsRow.tsx"],"sourcesContent":["import React from 'react'\nimport { styles } from './styles'\nimport Flex from '../uikit-sdk/Flex'\nimport URL from '../uikit-sdk/Svg/Icons/URL'\nimport Twitter from '../uikit-sdk/Svg/Icons/Twitter'\nimport Bubble from '../uikit-sdk/Svg/Icons/Bubble'\nimport Audit from '../uikit-sdk/Svg/Icons/Audit'\nimport Text from '../uikit-sdk/Text'\nimport { Link } from 'theme-ui'\nimport { ChainId } from '@ape.swap/apeswap-lists'\n\nconst ButtonsRow: React.FC<{\n  projectLink?: string\n  twitter?: string\n  bubble?: string\n  audit?: string\n  chain?: ChainId\n}> = ({ projectLink, twitter, bubble, audit, chain }) => {\n  const bubbleChainStringMap = {\n    [ChainId.BSC]: 'bsc',\n    [ChainId.MAINNET]: 'eth',\n    [ChainId.ARBITRUM]: 'arbi',\n    [ChainId.MATIC]: 'poly',\n    [ChainId.BASE]: 'base',\n    // [ChainId.SONIC]: 'sonic'\n  }\n  //@ts-ignore\n  const bubbleChain: string | undefined = bubbleChainStringMap[chain]\n\n  const bubbleURL = `https://app.bubblemaps.io/${bubbleChain}/token/${bubble}`\n\n  return (\n    <Flex sx={{ justifyContent: 'center' }}>\n      <Flex sx={styles.iconButton} as={Link} href={projectLink} target=\"_blank\">\n        <URL width={18} />\n      </Flex>\n      <Flex sx={styles.iconButton} as={Link} href={twitter} target=\"_blank\">\n        <Twitter width={18} color=\"text\" />\n      </Flex>\n      {bubble && bubbleChain && (\n        <Flex sx={styles.iconButton} as={Link} href={bubbleURL} target=\"_blank\">\n          <Bubble width={18} color=\"text\" />\n        </Flex>\n      )}\n      {audit && (\n        <Flex\n          sx={{ ...styles.iconButton, margin: '0 0 5px 0', '& svg': { marginRight: '5px' } }}\n          as={Link}\n          href={audit}\n          target=\"_blank\"\n        >\n          <Audit width={18} color=\"text\" />\n          <Text sx={{ paddingRight: '5px' }}>{'Audit'}</Text>\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default ButtonsRow\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAWA,MAAM,UAAU,GAMX,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAI;AACtD,IAAA,MAAM,oBAAoB,GAAG;AAC3B,QAAA,CAAC,OAAO,CAAC,GAAG,GAAG,KAAK;AACpB,QAAA,CAAC,OAAO,CAAC,OAAO,GAAG,KAAK;AACxB,QAAA,CAAC,OAAO,CAAC,QAAQ,GAAG,MAAM;AAC1B,QAAA,CAAC,OAAO,CAAC,KAAK,GAAG,MAAM;AACvB,QAAA,CAAC,OAAO,CAAC,IAAI,GAAG,MAAM;;KAEvB;;AAED,IAAA,MAAM,WAAW,GAAuB,oBAAoB,CAAC,KAAK,CAAC;AAEnE,IAAA,MAAM,SAAS,GAAG,CAAA,0BAAA,EAA6B,WAAW,CAAA,OAAA,EAAU,MAAM,EAAE;AAE5E,IAAA,QACEA,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACpCC,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EACvEA,IAAC,GAAG,EAAA,EAAC,KAAK,EAAE,EAAE,GAAI,EAAA,CACb,EACPA,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC,QAAQ,YACnEA,GAAA,CAAC,OAAO,IAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,GAC9B,EACN,MAAM,IAAI,WAAW,KACpBA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EACrEA,GAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,GAAG,EAAA,CAC7B,CACR,EACA,KAAK,KACJD,IAAA,CAAC,IAAI,IACH,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAClF,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,KAAK,EACX,MAAM,EAAC,QAAQ,EAAA,QAAA,EAAA,CAEfC,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,GAAG,EACjCA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,YAAG,OAAO,EAAA,CAAQ,IAC9C,CACR,CAAA,EAAA,CACI;AAEX;;;;"}

package/dist/components/Tooltip/Tooltip.js

@@ -3,7 +3,7 @@ import { styles } from './styles.js';
 import ButtonsRow from './ButtonsRow.js';
 import { BLOCK_EXPLORER } from '../../config/constants/chains.js';
 import Flex from '../uikit-sdk/Flex/index.js';
-import Svg from '../uikit-sdk/Svg/index.js';
+import External from '../uikit-sdk/Svg/Icons/External.js';
 import { Link } from 'theme-ui';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import ExpandedViewButton from '../../views/BuyBond/components/ExpandedViewButton.js';
@@ -27,7 +27,7 @@ const BondInfoTooltip = ({ earnTokenContract, earnTokenSymbol, bondContract, pro
             },
         });
     };
-    return (jsxs(Flex, { sx: { flexDirection: 'column', flexWrap: 'wrap' }, children: [jsx(ButtonsRow, { twitter: twitter, projectLink: projectLink, bubble: earnTokenContract, audit: audit, chain: chain }), config?.referenceId === 'apebond' && !isSoldOut && (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(Svg, { icon: "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(Svg, { icon: "external", color: "text", width: 10 }) })] })) }), jsx(Flex, { sx: styles.linkRow, children: bondLink && (jsxs(Link, { href: bondDashboard, sx: styles.link, target: "_blank", children: ["View Bond Insights", jsx(Flex, { sx: { ml: '5px' }, children: jsx(Svg, { icon: "external", color: "text", width: 10 }) })] })) })] }) })] }));
+    return (jsxs(Flex, { sx: { flexDirection: 'column', flexWrap: 'wrap' }, children: [jsx(ButtonsRow, { twitter: twitter, projectLink: projectLink, bubble: earnTokenContract, audit: audit, chain: chain }), config?.referenceId === 'apebond' && !isSoldOut && (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: bondLink && (jsxs(Link, { href: bondDashboard, sx: styles.link, target: "_blank", children: ["View Bond Insights", jsx(Flex, { sx: { 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 Flex from '../uikit-sdk/Flex'\nimport Svg from '../uikit-sdk/Svg'\nimport { Link } from 'theme-ui'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport ExpandedViewButton from '../../views/BuyBond/components/ExpandedViewButton'\nimport track from '../../utils/track'\n\nexport interface TooltipProps {\n  earnTokenContract: string\n  earnTokenSymbol: string\n  bondContract: string\n  projectLink?: string\n  twitter?: string\n  audit?: string\n  chain: number\n  isSoldOut?: boolean\n}\n\nconst BondInfoTooltip: React.FunctionComponent<TooltipProps> = ({\n  earnTokenContract,\n  earnTokenSymbol,\n  bondContract,\n  projectLink,\n  twitter,\n  audit,\n  chain,\n  isSoldOut = false,\n}) => {\n  const config = useSDKConfig()\n  const explorerLink = BLOCK_EXPLORER[chain as ChainId]\n  const tokenLink = `${explorerLink}/address/${earnTokenContract}`\n  const bondLink = `${explorerLink}/address/${bondContract}`\n  const bondDashboard = `https://dashboard.ape.bond/bond/${bondContract}`\n\n  const handleProjectViewNavigation = () => {\n    window.open(`${window.location.origin}/bonds/${bondContract}/${chain}`, '_self')\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 twitter={twitter} projectLink={projectLink} bubble={earnTokenContract} audit={audit} chain={chain} />\n      {config?.referenceId === 'apebond' && !isSoldOut && (\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                  <Svg icon=\"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                  <Svg icon=\"external\" color=\"text\" width={10} />\n                </Flex>\n              </Link>\n            )}\n          </Flex>\n          <Flex sx={styles.linkRow}>\n            {bondLink && (\n              <Link href={bondDashboard} sx={styles.link} target=\"_blank\">\n                View Bond Insights\n                <Flex sx={{ ml: '5px' }}>\n                  <Svg icon=\"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 { styles } from './styles'\nimport ButtonsRow from './ButtonsRow'\nimport { BLOCK_EXPLORER } from '../../config/constants/chains'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport Flex from '../uikit-sdk/Flex'\nimport External from '../uikit-sdk/Svg/Icons/External'\nimport { Link } from 'theme-ui'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport ExpandedViewButton from '../../views/BuyBond/components/ExpandedViewButton'\nimport track from '../../utils/track'\n\nexport interface TooltipProps {\n  earnTokenContract: string\n  earnTokenSymbol: string\n  bondContract: string\n  projectLink?: string\n  twitter?: string\n  audit?: string\n  chain: number\n  isSoldOut?: boolean\n}\n\nconst BondInfoTooltip: React.FunctionComponent<TooltipProps> = ({\n  earnTokenContract,\n  earnTokenSymbol,\n  bondContract,\n  projectLink,\n  twitter,\n  audit,\n  chain,\n  isSoldOut = false,\n}) => {\n  const config = useSDKConfig()\n  const explorerLink = BLOCK_EXPLORER[chain as ChainId]\n  const tokenLink = `${explorerLink}/address/${earnTokenContract}`\n  const bondLink = `${explorerLink}/address/${bondContract}`\n  const bondDashboard = `https://dashboard.ape.bond/bond/${bondContract}`\n\n  const handleProjectViewNavigation = () => {\n    window.open(`${window.location.origin}/bonds/${bondContract}/${chain}`, '_self')\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 twitter={twitter} projectLink={projectLink} bubble={earnTokenContract} audit={audit} chain={chain} />\n      {config?.referenceId === 'apebond' && !isSoldOut && (\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            {bondLink && (\n              <Link href={bondDashboard} sx={styles.link} target=\"_blank\">\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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"}

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

@@ -1,11 +1,10 @@
 import { jsx } from 'theme-ui/jsx-runtime';
 import { Button } from 'theme-ui';
-import Svg from '../Svg/index.js';
-import { icons } from '../Svg/types.js';
+import Close from '../Svg/Icons/Close.js';
 import { iconButtonVariants } from './types.js';
 import styles from './styles.js';
 
-const IconButton = ({ icon = icons.DISCORD, color = 'white1', background = 'yellow', variant = iconButtonVariants.PRIMARY, iconWidth, children, ...props }) => {
+const IconButton = ({ icon: Icon = Close, color = 'white1', background = 'yellow', variant = iconButtonVariants.PRIMARY, iconWidth, children, ...props }) => {
     return (jsx(Button, { ...props, variant: variant, sx: {
             display: 'flex',
             alignItems: 'center',
@@ -16,7 +15,7 @@ const IconButton = ({ icon = icons.DISCORD, color = 'white1', background = 'yell
             background,
             ...(variant === iconButtonVariants.PRIMARY ? styles.primary : {}),
             ...(variant === iconButtonVariants.TRANSPARENT ? styles.transparent : {}),
-        }, children: children || (jsx("span", { sx: { height: iconWidth, width: iconWidth }, children: jsx(Svg, { color: color, icon: icon, ...props, width: iconWidth }) })) }));
+        }, children: children || (jsx("span", { sx: { 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 Svg from '../Svg'\nimport { icons } from '../Svg/types'\nimport { IconButtonProps, iconButtonVariants as variants } from './types'\nimport style from './styles'\n\nconst IconButton: React.FC<IconButtonProps> = ({\n  icon = icons.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          <Svg color={color} icon={icon} {...props} width={iconWidth} />\n        </span>\n      )}\n    </Button>\n  )\n}\n\nexport default IconButton\n"],"names":["variants","_jsx","style"],"mappings":";;;;;;;AAOA,MAAM,UAAU,GAA8B,CAAC,EAC7C,IAAI,GAAG,KAAK,CAAC,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,YAC/CA,GAAA,CAAC,GAAG,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,GAAM,KAAK,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,GACzD,CACR,EAAA,CACM;AAEb;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/uikit-sdk/Button/IconButton.tsx"],"sourcesContent":["import React from 'react'\nimport { Button } from 'theme-ui'\nimport Close from '../Svg/Icons/Close'\nimport { IconButtonProps, iconButtonVariants as variants } from './types'\nimport style from './styles'\n\nconst IconButton: React.FC<IconButtonProps> = ({\n  icon: Icon = Close,\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,KAAK,EAClB,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;;;;"}

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

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import { ComponentType, ReactNode } from 'react';
 import { ButtonProps as ThemeUIButtonProps } from 'theme-ui';
-import { iconTypes } from '../Svg/types';
+import { SvgProps } from '../Svg/types';
 export declare enum sizes {
     SMALL = "sm",
     MEDIUM = "md",
@@ -41,6 +41,6 @@ export interface IconButtonProps extends Omit<ButtonProps, 'variant'> {
     variant?: iconButtonVariantsProps;
     color?: string;
     background?: string;
-    icon?: iconTypes;
+    icon?: ComponentType<SvgProps>;
     iconWidth?: number;
 }

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 { ButtonProps as ThemeUIButtonProps } from 'theme-ui'\nimport { iconTypes } 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  TERTIARY = 'tertiary',\n  TEXT = 'text',\n  SUCCESS = 'success',\n  DANGER = 'danger',\n}\n\nexport enum iconButtonVariants {\n  PRIMARY = 'primary',\n  TRANSPARENT = 'transparent',\n  CIRCULAR = 'circular',\n}\n\nexport type sizeProps = `${sizes}`\nexport type variantProps = `${variants}`\nexport type 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?: iconTypes\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;;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;AACvB,IAAA,QAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrB,IAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,QAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACnB,CAAC,EAPW,QAAQ,KAAR,QAAQ,GAAA,EAAA,CAAA,CAAA;IASR;AAAZ,CAAA,UAAY,kBAAkB,EAAA;AAC5B,IAAA,kBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,kBAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC3B,IAAA,kBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACvB,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,GAAA,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/Button/types.ts"],"sourcesContent":["import { ComponentType, ReactNode } 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  TERTIARY = 'tertiary',\n  TEXT = 'text',\n  SUCCESS = 'success',\n  DANGER = 'danger',\n}\n\nexport enum iconButtonVariants {\n  PRIMARY = 'primary',\n  TRANSPARENT = 'transparent',\n  CIRCULAR = 'circular',\n}\n\nexport type sizeProps = `${sizes}`\nexport type variantProps = `${variants}`\nexport type 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?: 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;;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;AACvB,IAAA,QAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrB,IAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,QAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACnB,CAAC,EAPW,QAAQ,KAAR,QAAQ,GAAA,EAAA,CAAA,CAAA;IASR;AAAZ,CAAA,UAAY,kBAAkB,EAAA;AAC5B,IAAA,kBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,kBAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC3B,IAAA,kBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACvB,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,GAAA,EAAA,CAAA,CAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'theme-ui/jsx-runtime';
 import { Input as Input$1, Spinner } from 'theme-ui';
 import Flex from '../Flex/index.js';
-import Svg from '../Svg/index.js';
+import Search from '../Svg/Icons/Search.js';
 import Text from '../Text/index.js';
 
 const colorScheme = {
@@ -18,7 +18,7 @@ const Input = ({ variant, width, status, isLoading, ...props }) => {
                             pl: '10px',
                             borderRadius: 'normal',
                             ':focus': { outline: 'none' },
-                        } }), jsx(Flex, { sx: { position: 'absolute', right: 5, justifyContent: 'center', height: '100%' }, children: jsx(Svg, { icon: "search", color: "grey" }) })] }));
+                        } }), jsx(Flex, { sx: { position: 'absolute', right: 5, justifyContent: 'center', height: '100%' }, children: jsx(Search, { color: "grey" }) })] }));
         case 'password': {
             const statusColor = colorScheme[status];
             return (jsxs(Flex, { sx: {

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../src/components/uikit-sdk/Input/Input.tsx"],"sourcesContent":["import { Input as ThemeInput, Spinner } from 'theme-ui'\nimport Flex from '../Flex'\nimport Svg from '../Svg'\nimport Text from '../Text'\n\ntype variant = 'search' | 'password' | 'text'\ntype inputStatus = 'default' | 'error' | 'success'\ntype color = 'gray' | 'red' | 'green'\n\ntype colorSchemeMap = Record<inputStatus, color>\n\nconst colorScheme: colorSchemeMap = {\n  default: 'gray',\n  error: 'red',\n  success: 'green',\n}\n\nconst Input = ({\n  variant,\n  width,\n  status,\n  isLoading,\n  ...props\n}: { variant?: variant; width?: string[]; status?: inputStatus; isLoading?: boolean } | any) => {\n  switch (variant) {\n    case 'search':\n      return (\n        <Flex sx={{ position: 'relative', width: width ? width : 'unset' }}>\n          <ThemeInput\n            {...props}\n            sx={{\n              background: 'white3',\n              border: 'none',\n              pl: '10px',\n              borderRadius: 'normal',\n              ':focus': { outline: 'none' },\n            }}\n          />\n          <Flex sx={{ position: 'absolute', right: 5, justifyContent: 'center', height: '100%' }}>\n            <Svg icon=\"search\" color=\"grey\" />\n          </Flex>\n        </Flex>\n      )\n\n    case 'password': {\n      const statusColor = colorScheme[status as inputStatus]\n      return (\n        <Flex\n          sx={{\n            width: width ? width : '100%',\n            flexDirection: 'column',\n            alignItems: 'center',\n            gap: '5px',\n            position: 'relative',\n          }}\n        >\n          <ThemeInput\n            {...props}\n            type=\"password\"\n            sx={{\n              position: 'relative',\n              background: 'white3',\n              border: 'none',\n              borderBottom: `2px solid ${statusColor}`,\n              color: statusColor,\n              pl: '10px',\n              borderRadius: 'normal',\n              ':focus': { outline: 'none' },\n            }}\n          />\n          {isLoading && (\n            <Flex sx={{ position: 'absolute', top: '5px', right: '5px', justifyContent: 'center', height: '100%' }}>\n              <Spinner width=\"20px\" height=\"20px\" />\n            </Flex>\n          )}\n          <Text sx={{ fontSize: '10px', color: statusColor, visibility: status === 'default' ? 'hidden' : 'visible' }}>\n            {status === 'error' ? 'Wrong Password' : 'Correct Password'}\n          </Text>\n        </Flex>\n      )\n    }\n\n    default:\n      return (\n        <ThemeInput\n          {...props}\n          sx={{\n            background: 'white3',\n            border: 'none',\n            pl: '10px',\n            borderRadius: 'normal',\n            ':focus': { outline: 'none' },\n          }}\n        />\n      )\n  }\n}\n\nexport default Input\n"],"names":["_jsxs","_jsx","ThemeInput"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../../src/components/uikit-sdk/Input/Input.tsx"],"sourcesContent":["import { Input as ThemeInput, Spinner } from 'theme-ui'\nimport Flex from '../Flex'\nimport Search from '../Svg/Icons/Search'\nimport Text from '../Text'\n\ntype variant = 'search' | 'password' | 'text'\ntype inputStatus = 'default' | 'error' | 'success'\ntype color = 'gray' | 'red' | 'green'\n\ntype colorSchemeMap = Record<inputStatus, color>\n\nconst colorScheme: colorSchemeMap = {\n  default: 'gray',\n  error: 'red',\n  success: 'green',\n}\n\nconst Input = ({\n  variant,\n  width,\n  status,\n  isLoading,\n  ...props\n}: { variant?: variant; width?: string[]; status?: inputStatus; isLoading?: boolean } | any) => {\n  switch (variant) {\n    case 'search':\n      return (\n        <Flex sx={{ position: 'relative', width: width ? width : 'unset' }}>\n          <ThemeInput\n            {...props}\n            sx={{\n              background: 'white3',\n              border: 'none',\n              pl: '10px',\n              borderRadius: 'normal',\n              ':focus': { outline: 'none' },\n            }}\n          />\n          <Flex sx={{ position: 'absolute', right: 5, justifyContent: 'center', height: '100%' }}>\n            <Search color=\"grey\" />\n          </Flex>\n        </Flex>\n      )\n\n    case 'password': {\n      const statusColor = colorScheme[status as inputStatus]\n      return (\n        <Flex\n          sx={{\n            width: width ? width : '100%',\n            flexDirection: 'column',\n            alignItems: 'center',\n            gap: '5px',\n            position: 'relative',\n          }}\n        >\n          <ThemeInput\n            {...props}\n            type=\"password\"\n            sx={{\n              position: 'relative',\n              background: 'white3',\n              border: 'none',\n              borderBottom: `2px solid ${statusColor}`,\n              color: statusColor,\n              pl: '10px',\n              borderRadius: 'normal',\n              ':focus': { outline: 'none' },\n            }}\n          />\n          {isLoading && (\n            <Flex sx={{ position: 'absolute', top: '5px', right: '5px', justifyContent: 'center', height: '100%' }}>\n              <Spinner width=\"20px\" height=\"20px\" />\n            </Flex>\n          )}\n          <Text sx={{ fontSize: '10px', color: statusColor, visibility: status === 'default' ? 'hidden' : 'visible' }}>\n            {status === 'error' ? 'Wrong Password' : 'Correct Password'}\n          </Text>\n        </Flex>\n      )\n    }\n\n    default:\n      return (\n        <ThemeInput\n          {...props}\n          sx={{\n            background: 'white3',\n            border: 'none',\n            pl: '10px',\n            borderRadius: 'normal',\n            ':focus': { outline: 'none' },\n          }}\n        />\n      )\n  }\n}\n\nexport default Input\n"],"names":["_jsxs","_jsx","ThemeInput"],"mappings":"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"}

package/dist/components/uikit-sdk/Modal/ModalHeader.js

@@ -6,7 +6,7 @@ import '../Button/types.js';
 import IconButton from '../Button/IconButton.js';
 
 const ModalHeader = ({ children, onDismiss, hideDivider, ...props }) => {
-    return (jsxs(Fragment, { children: [jsxs(Flex, { ...props, sx: styles.modalHead, children: [children, onDismiss && jsx(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: onDismiss })] }), !hideDivider && jsx(Divider, {})] }));
+    return (jsxs(Fragment, { children: [jsxs(Flex, { ...props, sx: styles.modalHead, children: [children, onDismiss && jsx(IconButton, { color: "text", variant: "transparent", onClick: onDismiss })] }), !hideDivider && jsx(Divider, {})] }));
 };
 
 export { ModalHeader as default };

package/dist/components/uikit-sdk/Modal/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sources":["../../../../src/components/uikit-sdk/Modal/ModalHeader.tsx"],"sourcesContent":["import React from 'react'\nimport { Divider, Flex } from 'theme-ui'\nimport style from './styles'\nimport { IconButton } from '../Button'\nimport { InternalProps } from './types'\n\nconst ModalHeader: React.FC<InternalProps> = ({ children, onDismiss, hideDivider, ...props }) => {\n  return (\n    <>\n      <Flex {...props} sx={style.modalHead}>\n        {children}\n        {onDismiss && <IconButton icon=\"close\" color=\"text\" variant=\"transparent\" onClick={onDismiss} />}\n      </Flex>\n      {!hideDivider && <Divider />}\n    </>\n  )\n}\n\nexport default ModalHeader\n"],"names":["_jsxs","style","_jsx"],"mappings":";;;;;;;AAMA,MAAM,WAAW,GAA4B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,KAAI;IAC9F,QACEA,4BACEA,IAAA,CAAC,IAAI,OAAK,KAAK,EAAE,EAAE,EAAEC,MAAK,CAAC,SAAS,EAAA,QAAA,EAAA,CACjC,QAAQ,EACR,SAAS,IAAIC,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,OAAO,EAAE,SAAS,GAAI,CAAA,EAAA,CAC3F,EACN,CAAC,WAAW,IAAIA,IAAC,OAAO,EAAA,EAAA,CAAG,CAAA,EAAA,CAC3B;AAEP;;;;"}
+{"version":3,"file":"ModalHeader.js","sources":["../../../../src/components/uikit-sdk/Modal/ModalHeader.tsx"],"sourcesContent":["import React from 'react'\nimport { Divider, Flex } from 'theme-ui'\nimport style from './styles'\nimport { IconButton } from '../Button'\nimport { InternalProps } from './types'\n\nconst ModalHeader: React.FC<InternalProps> = ({ children, onDismiss, hideDivider, ...props }) => {\n  return (\n    <>\n      <Flex {...props} sx={style.modalHead}>\n        {children}\n        {onDismiss && <IconButton color=\"text\" variant=\"transparent\" onClick={onDismiss} />}\n      </Flex>\n      {!hideDivider && <Divider />}\n    </>\n  )\n}\n\nexport default ModalHeader\n"],"names":["_jsxs","_Fragment","style","_jsx"],"mappings":";;;;;;;AAMA,MAAM,WAAW,GAA4B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,KAAI;AAC9F,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,IAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAE,EAAE,EAAEE,MAAK,CAAC,SAAS,aACjC,QAAQ,EACR,SAAS,IAAIC,GAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,OAAO,EAAE,SAAS,EAAA,CAAI,IAC9E,EACN,CAAC,WAAW,IAAIA,GAAA,CAAC,OAAO,EAAA,EAAA,CAAG,CAAA,EAAA,CAC3B;AAEP;;;;"}

package/dist/components/uikit-sdk/Modal/styles.js

@@ -27,7 +27,7 @@ const styles = {
         background: 'modalOverlay',
         width: '100%',
         height: '100%',
-        zIndex: 100,
+        zIndex: 58,
         transition: 'all 1s ease',
     },
     modalHead: {

package/dist/components/uikit-sdk/Modal/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/uikit-sdk/Modal/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nconst styles: Record<string, ThemeUIStyleObject> = {\n  container: {\n    padding: '20px',\n    background: 'white2',\n    borderRadius: 'normal',\n    color: 'text',\n    hr: {\n      background: '#DCD9D9',\n    },\n    position: 'fixed',\n    display: 'block',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: '380px',\n    minWidth: ['95%', 'min(380px, 90%)', '380px'],\n    overflowY: ['auto', 'auto', 'auto', 'unset'],\n    maxHeight: 'calc(100% - 30px)',\n    maxWidth: '95vw',\n  },\n  backdrop: {\n    position: 'fixed',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    background: 'modalOverlay',\n    width: '100%',\n    height: '100%',\n    zIndex: 100,\n    transition: 'all 1s ease',\n  },\n  modalHead: {\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    svg: {\n      fill: 'text',\n      marginLeft: 'auto',\n      cursor: 'pointer',\n    },\n    button: {\n      ml: 'auto',\n    },\n  },\n  modalFooter: {\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    pt: 9,\n    gap: 4,\n  },\n  cancelButton: {\n    background: 'transparent',\n    textDecoration: 'underline',\n    color: 'text',\n    cursor: 'pointer',\n    fontSize: 0,\n    fontWeight: 'normal',\n    p: 0,\n  },\n}\n\nexport default styles\n"],"names":[],"mappings":"AAEA,MAAM,MAAM,GAAuC;AACjD,IAAA,SAAS,EAAE;AACT,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,EAAE,EAAE;AACF,YAAA,UAAU,EAAE,SAAS;AACtB,SAAA;AACD,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,GAAG,EAAE,KAAK;AACV,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,SAAS,EAAE,uBAAuB;AAClC,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,OAAO,CAAC;QAC7C,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;AAC5C,QAAA,SAAS,EAAE,mBAAmB;AAC9B,QAAA,QAAQ,EAAE,MAAM;AACjB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,UAAU,EAAE,cAAc;AAC1B,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,MAAM,EAAE,GAAG;AACX,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,cAAc,EAAE,eAAe;AAC/B,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AAClB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,EAAE,EAAE,MAAM;AACX,SAAA;AACF;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/uikit-sdk/Modal/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nconst styles: Record<string, ThemeUIStyleObject> = {\n  container: {\n    padding: '20px',\n    background: 'white2',\n    borderRadius: 'normal',\n    color: 'text',\n    hr: {\n      background: '#DCD9D9',\n    },\n    position: 'fixed',\n    display: 'block',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: '380px',\n    minWidth: ['95%', 'min(380px, 90%)', '380px'],\n    overflowY: ['auto', 'auto', 'auto', 'unset'],\n    maxHeight: 'calc(100% - 30px)',\n    maxWidth: '95vw',\n  },\n  backdrop: {\n    position: 'fixed',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    background: 'modalOverlay',\n    width: '100%',\n    height: '100%',\n    zIndex: 58,\n    transition: 'all 1s ease',\n  },\n  modalHead: {\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    svg: {\n      fill: 'text',\n      marginLeft: 'auto',\n      cursor: 'pointer',\n    },\n    button: {\n      ml: 'auto',\n    },\n  },\n  modalFooter: {\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    pt: 9,\n    gap: 4,\n  },\n  cancelButton: {\n    background: 'transparent',\n    textDecoration: 'underline',\n    color: 'text',\n    cursor: 'pointer',\n    fontSize: 0,\n    fontWeight: 'normal',\n    p: 0,\n  },\n}\n\nexport default styles\n"],"names":[],"mappings":"AAEA,MAAM,MAAM,GAAuC;AACjD,IAAA,SAAS,EAAE;AACT,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,EAAE,EAAE;AACF,YAAA,UAAU,EAAE,SAAS;AACtB,SAAA;AACD,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,GAAG,EAAE,KAAK;AACV,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,SAAS,EAAE,uBAAuB;AAClC,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,OAAO,CAAC;QAC7C,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;AAC5C,QAAA,SAAS,EAAE,mBAAmB;AAC9B,QAAA,QAAQ,EAAE,MAAM;AACjB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,UAAU,EAAE,cAAc;AAC1B,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,cAAc,EAAE,eAAe;AAC/B,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AAClB,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,EAAE,EAAE,MAAM;AACX,SAAA;AACF;;;;"}

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

@@ -3,7 +3,7 @@ import React, { useRef, useState } from 'react';
 import { Box, Flex } from 'theme-ui';
 import { AnimatePresence, motion } from 'framer-motion';
 import { selectPadding, selectedExtraPadding, sizes, positions } from './types.js';
-import Svg from '../Svg/index.js';
+import Caret from '../Svg/Icons/Caret.js';
 import styles from './styles.js';
 
 const Select = ({ children, active, width = 'fit-content', size = sizes.MEDIUM, position = positions.BOTTOM, className, label, ...props }) => {
@@ -33,7 +33,7 @@ const Select = ({ children, active, width = 'fit-content', size = sizes.MEDIUM,
                                     ...child?.props,
                                     active: true,
                                 });
-                            })), jsx(Flex, { sx: { minWidth: '10px' }, children: jsx(Svg, { icon: "caret", direction: open ? 'up' : 'down' }) })] }), jsx(AnimatePresence, { children: open && (jsx(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { opacity: 0, height: 0 }, sx: {
+                            })), jsx(Flex, { sx: { minWidth: '10px' }, children: jsx(Caret, { direction: open ? 'up' : 'down' }) })] }), jsx(AnimatePresence, { children: open && (jsx(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { opacity: 0, height: 0 }, sx: {
                                 ...styles.ul,
                                 zIndex: 10,
                                 top: position === positions.BOTTOM ? 'calc(100% + 5px)' : undefined,

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/uikit-sdk/Select/Select.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react'\nimport { Box, Flex } from 'theme-ui'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { SelectProps, selectPadding, sizes, positions, selectedExtraPadding } from './types'\nimport Svg from '../Svg'\nimport styles from './styles'\n\nconst Select = ({\n  children,\n  active,\n  width = 'fit-content',\n  size = sizes.MEDIUM,\n  position = positions.BOTTOM,\n  className,\n  label,\n  ...props\n}: SelectProps) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [open, setOpen] = useState(false)\n\n  const handleClick = () => setOpen((prev) => !prev)\n\n  const setNativeInput = (val: string) => {\n    const input = inputRef?.current\n\n    if (input) {\n      Object?.getOwnPropertyDescriptor?.(window.HTMLInputElement.prototype, 'value')?.set?.call(input, val)\n      input.dispatchEvent(new Event('change', { bubbles: true }))\n    }\n  }\n\n  return (\n    <>\n      <Box sx={{ ...styles.container, width }} onClick={handleClick} className={className}>\n        <Flex\n          sx={{\n            padding: selectedExtraPadding[size],\n            pr: selectPadding[size],\n            columnGap: '10px',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            width: '100%',\n            overflow: 'hidden',\n          }}\n        >\n          {label ? (\n            <Box>{label}</Box>\n          ) : (\n            React.Children.map(children, (child) => {\n              if ((child as any)?.props?.value !== active) {\n                return null\n              }\n              return React.cloneElement(child as any, {\n                ...(child as any)?.props,\n                active: true,\n              })\n            })\n          )}\n          <Flex sx={{ minWidth: '10px' }}>\n            <Svg icon=\"caret\" direction={open ? 'up' : 'down'} />\n          </Flex>\n        </Flex>\n        <AnimatePresence>\n          {open && (\n            <motion.div\n              initial={{ opacity: 0, height: 0 }}\n              animate={{ opacity: 1, height: 'fit-content' }}\n              transition={{ opacity: { duration: 0.2 } }}\n              exit={{ opacity: 0, height: 0 }}\n              sx={{\n                ...styles.ul,\n                zIndex: 10,\n                top: position === positions.BOTTOM ? 'calc(100% + 5px)' : undefined,\n                bottom: position === positions.TOP ? 'calc(100% + 5px)' : undefined,\n              }}\n            >\n              {React.Children.map(children, (child) => {\n                return React.cloneElement(child as any, {\n                  ...(child as any)?.props,\n                  active: false,\n                  onClick: () => setNativeInput((child as any)?.props?.value),\n                })\n              })}\n            </motion.div>\n          )}\n        </AnimatePresence>\n        <input ref={inputRef} value={active || ''} aria-hidden=\"true\" tabIndex={-1} {...props} sx={styles.input} />\n      </Box>\n      {open && <div aria-hidden=\"true\" onClick={() => setOpen(false)} sx={styles.backdrop} />}\n    </>\n  )\n}\n\nexport default Select\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/uikit-sdk/Select/Select.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react'\nimport { Box, Flex } from 'theme-ui'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { SelectProps, selectPadding, sizes, positions, selectedExtraPadding } from './types'\nimport Caret from '../Svg/Icons/Caret'\nimport styles from './styles'\n\nconst Select = ({\n  children,\n  active,\n  width = 'fit-content',\n  size = sizes.MEDIUM,\n  position = positions.BOTTOM,\n  className,\n  label,\n  ...props\n}: SelectProps) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [open, setOpen] = useState(false)\n\n  const handleClick = () => setOpen((prev) => !prev)\n\n  const setNativeInput = (val: string) => {\n    const input = inputRef?.current\n\n    if (input) {\n      Object?.getOwnPropertyDescriptor?.(window.HTMLInputElement.prototype, 'value')?.set?.call(input, val)\n      input.dispatchEvent(new Event('change', { bubbles: true }))\n    }\n  }\n\n  return (\n    <>\n      <Box sx={{ ...styles.container, width }} onClick={handleClick} className={className}>\n        <Flex\n          sx={{\n            padding: selectedExtraPadding[size],\n            pr: selectPadding[size],\n            columnGap: '10px',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            width: '100%',\n            overflow: 'hidden',\n          }}\n        >\n          {label ? (\n            <Box>{label}</Box>\n          ) : (\n            React.Children.map(children, (child) => {\n              if ((child as any)?.props?.value !== active) {\n                return null\n              }\n              return React.cloneElement(child as any, {\n                ...(child as any)?.props,\n                active: true,\n              })\n            })\n          )}\n          <Flex sx={{ minWidth: '10px' }}>\n            <Caret direction={open ? 'up' : 'down'} />\n          </Flex>\n        </Flex>\n        <AnimatePresence>\n          {open && (\n            <motion.div\n              initial={{ opacity: 0, height: 0 }}\n              animate={{ opacity: 1, height: 'fit-content' }}\n              transition={{ opacity: { duration: 0.2 } }}\n              exit={{ opacity: 0, height: 0 }}\n              sx={{\n                ...styles.ul,\n                zIndex: 10,\n                top: position === positions.BOTTOM ? 'calc(100% + 5px)' : undefined,\n                bottom: position === positions.TOP ? 'calc(100% + 5px)' : undefined,\n              }}\n            >\n              {React.Children.map(children, (child) => {\n                return React.cloneElement(child as any, {\n                  ...(child as any)?.props,\n                  active: false,\n                  onClick: () => setNativeInput((child as any)?.props?.value),\n                })\n              })}\n            </motion.div>\n          )}\n        </AnimatePresence>\n        <input ref={inputRef} value={active || ''} aria-hidden=\"true\" tabIndex={-1} {...props} sx={styles.input} />\n      </Box>\n      {open && <div aria-hidden=\"true\" onClick={() => setOpen(false)} sx={styles.backdrop} />}\n    </>\n  )\n}\n\nexport default Select\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;AAOA,MAAM,MAAM,GAAG,CAAC,EACd,QAAQ,EACR,MAAM,EACN,KAAK,GAAG,aAAa,EACrB,IAAI,GAAG,KAAK,CAAC,MAAM,EACnB,QAAQ,GAAG,SAAS,CAAC,MAAM,EAC3B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;IAC/C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEvC,IAAA,MAAM,WAAW,GAAG,MAAM,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;AAElD,IAAA,MAAM,cAAc,GAAG,CAAC,GAAW,KAAI;AACrC,QAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,OAAO;QAE/B,IAAI,KAAK,EAAE;YACT,MAAM,EAAE,wBAAwB,GAAG,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC;AACrG,YAAA,KAAK,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC7D;AACF,IAAA,CAAC;AAED,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,IAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAA,QAAA,EAAA,CACjFA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,4BAAA,OAAO,EAAE,oBAAoB,CAAC,IAAI,CAAC;AACnC,4BAAA,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC;AACvB,4BAAA,SAAS,EAAE,MAAM;AACjB,4BAAA,UAAU,EAAE,QAAQ;AACpB,4BAAA,cAAc,EAAE,eAAe;AAC/B,4BAAA,KAAK,EAAE,MAAM;AACb,4BAAA,QAAQ,EAAE,QAAQ;yBACnB,EAAA,QAAA,EAAA,CAEA,KAAK,IACJE,GAAA,CAAC,GAAG,EAAA,EAAA,QAAA,EAAE,KAAK,EAAA,CAAO,KAElB,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;gCACrC,IAAK,KAAa,EAAE,KAAK,EAAE,KAAK,KAAK,MAAM,EAAE;AAC3C,oCAAA,OAAO,IAAI;gCACb;AACA,gCAAA,OAAO,KAAK,CAAC,YAAY,CAAC,KAAY,EAAE;oCACtC,GAAI,KAAa,EAAE,KAAK;AACxB,oCAAA,MAAM,EAAE,IAAI;AACb,iCAAA,CAAC;4BACJ,CAAC,CAAC,CACH,EACDA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,YAC5BA,GAAA,CAAC,KAAK,IAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAI,EAAA,CACrC,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,eAAe,cACb,IAAI,KACHA,GAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAClC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,EAC9C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAC1C,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAC/B,EAAE,EAAE;gCACF,GAAG,MAAM,CAAC,EAAE;AACZ,gCAAA,MAAM,EAAE,EAAE;AACV,gCAAA,GAAG,EAAE,QAAQ,KAAK,SAAS,CAAC,MAAM,GAAG,kBAAkB,GAAG,SAAS;AACnE,gCAAA,MAAM,EAAE,QAAQ,KAAK,SAAS,CAAC,GAAG,GAAG,kBAAkB,GAAG,SAAS;6BACpE,EAAA,QAAA,EAEA,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AACtC,gCAAA,OAAO,KAAK,CAAC,YAAY,CAAC,KAAY,EAAE;oCACtC,GAAI,KAAa,EAAE,KAAK;AACxB,oCAAA,MAAM,EAAE,KAAK;oCACb,OAAO,EAAE,MAAM,cAAc,CAAE,KAAa,EAAE,KAAK,EAAE,KAAK,CAAC;AAC5D,iCAAA,CAAC;4BACJ,CAAC,CAAC,EAAA,CACS,CACd,EAAA,CACe,EAClBA,GAAA,CAAA,OAAA,EAAA,EAAO,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,IAAI,EAAE,EAAA,aAAA,EAAc,MAAM,EAAC,QAAQ,EAAE,EAAE,EAAA,GAAM,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,KAAK,EAAA,CAAI,CAAA,EAAA,CACvG,EACL,IAAI,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,MAAM,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,QAAQ,EAAA,CAAI,CAAA,EAAA,CACtF;AAEP;;;;"}

package/dist/components/uikit-sdk/Svg/Icons/Arrow.js

@@ -1,13 +1,14 @@
 import { jsx } from 'theme-ui/jsx-runtime';
+import { dynamicStyles } from '../styles.js';
 
-const Arrow = ({ direction = 'down', color = 'text', width, getStyles }) => {
+const Arrow = ({ direction = 'down', color = 'text', width }) => {
     const deg = {
         left: 90,
         up: 180,
         right: 270,
         down: 0,
     };
-    const style = getStyles({
+    const style = dynamicStyles.generic({
         degree: deg[direction],
         color,
     });

package/dist/components/uikit-sdk/Svg/Icons/Arrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Arrow.js","sources":["../../../../../src/components/uikit-sdk/Svg/Icons/Arrow.tsx"],"sourcesContent":["import React from 'react'\nimport { SvgProps, rotation } from './types'\n\nconst Arrow: React.FC<SvgProps> = ({ direction = 'down', color = 'text', width, getStyles }) => {\n  const deg: rotation = {\n    left: 90,\n    up: 180,\n    right: 270,\n    down: 0,\n  }\n  const style = getStyles({\n    degree: deg[direction as keyof rotation],\n    color,\n  })\n\n  return (\n    <svg width={width || '6'} viewBox=\"0 0 6 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" sx={style}>\n      <path\n        d=\"M3.00373 5.59387C3.77667 5.59387 4.4765 5.63946 4.90699 5.72433C4.9137 5.72433 5.30764 5.80842 5.43895 5.86265C5.62845 5.94752 5.78886 6.10077 5.89107 6.29253C5.96419 6.44578 6 6.60767 6 6.77664C5.99329 6.95268 5.88361 7.28354 5.83213 7.41399C5.51206 8.27375 4.46158 9.91705 3.82069 10.5473C3.71848 10.6542 3.59463 10.7697 3.56553 10.8004C3.40438 10.9308 3.20816 11 2.99702 11C2.80677 11 2.61726 10.9387 2.46431 10.8153C2.38486 10.7564 2.26889 10.6391 2.21587 10.5841L2.18752 10.5544C1.5235 9.90997 0.525243 8.3044 0.204428 7.49022C0.197588 7.49022 0.0377811 7.0841 0.00544739 6.83905L0 6.77664L0 6.74599C0 6.39234 0.189506 6.06226 0.496146 5.8933C0.664015 5.80135 1.15195 5.71647 1.15941 5.70861C1.59662 5.63946 2.26735 5.59387 3.00373 5.59387ZM3.00037 0C3.39347 0 3.71639 0.314279 3.75523 0.717488L3.75914 0.799248L3.59575 3.82885C3.59575 4.17542 3.3294 4.45599 3.00037 4.45599C2.69485 4.45599 2.44337 4.21407 2.409 3.90203L2.405 3.82885L2.24086 0.799248C2.24086 0.357579 2.58107 0 3.00037 0Z\"\n        fill=\"#FAFAFA\"\n      />\n    </svg>\n  )\n}\n\nexport default Arrow\n"],"names":["_jsx"],"mappings":";;AAGA,MAAM,KAAK,GAAuB,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,KAAI;AAC7F,IAAA,MAAM,GAAG,GAAa;AACpB,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,IAAI,EAAE,CAAC;KACR;IACD,MAAM,KAAK,GAAG,SAAS,CAAC;AACtB,QAAA,MAAM,EAAE,GAAG,CAAC,SAA2B,CAAC;QACxC,KAAK;AACN,KAAA,CAAC;AAEF,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,IAAI,GAAG,EAAE,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAE,KAAK,EAAA,QAAA,EACnGA,cACE,CAAC,EAAC,o+BAAo+B,EACt+B,IAAI,EAAC,SAAS,EAAA,CACd,EAAA,CACE;AAEV;;;;"}
+{"version":3,"file":"Arrow.js","sources":["../../../../../src/components/uikit-sdk/Svg/Icons/Arrow.tsx"],"sourcesContent":["import React from 'react'\nimport { SvgProps, rotation } from './types'\nimport { dynamicStyles } from '../styles'\n\nconst Arrow: React.FC<SvgProps> = ({ direction = 'down', color = 'text', width }) => {\n  const deg: rotation = {\n    left: 90,\n    up: 180,\n    right: 270,\n    down: 0,\n  }\n  const style = dynamicStyles.generic({\n    degree: deg[direction as keyof rotation],\n    color,\n  })\n\n  return (\n    <svg width={width || '6'} viewBox=\"0 0 6 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" sx={style}>\n      <path\n        d=\"M3.00373 5.59387C3.77667 5.59387 4.4765 5.63946 4.90699 5.72433C4.9137 5.72433 5.30764 5.80842 5.43895 5.86265C5.62845 5.94752 5.78886 6.10077 5.89107 6.29253C5.96419 6.44578 6 6.60767 6 6.77664C5.99329 6.95268 5.88361 7.28354 5.83213 7.41399C5.51206 8.27375 4.46158 9.91705 3.82069 10.5473C3.71848 10.6542 3.59463 10.7697 3.56553 10.8004C3.40438 10.9308 3.20816 11 2.99702 11C2.80677 11 2.61726 10.9387 2.46431 10.8153C2.38486 10.7564 2.26889 10.6391 2.21587 10.5841L2.18752 10.5544C1.5235 9.90997 0.525243 8.3044 0.204428 7.49022C0.197588 7.49022 0.0377811 7.0841 0.00544739 6.83905L0 6.77664L0 6.74599C0 6.39234 0.189506 6.06226 0.496146 5.8933C0.664015 5.80135 1.15195 5.71647 1.15941 5.70861C1.59662 5.63946 2.26735 5.59387 3.00373 5.59387ZM3.00037 0C3.39347 0 3.71639 0.314279 3.75523 0.717488L3.75914 0.799248L3.59575 3.82885C3.59575 4.17542 3.3294 4.45599 3.00037 4.45599C2.69485 4.45599 2.44337 4.21407 2.409 3.90203L2.405 3.82885L2.24086 0.799248C2.24086 0.357579 2.58107 0 3.00037 0Z\"\n        fill=\"#FAFAFA\"\n      />\n    </svg>\n  )\n}\n\nexport default Arrow\n"],"names":["_jsx"],"mappings":";;;AAIA,MAAM,KAAK,GAAuB,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,KAAI;AAClF,IAAA,MAAM,GAAG,GAAa;AACpB,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,IAAI,EAAE,CAAC;KACR;AACD,IAAA,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC;AAClC,QAAA,MAAM,EAAE,GAAG,CAAC,SAA2B,CAAC;QACxC,KAAK;AACN,KAAA,CAAC;AAEF,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,IAAI,GAAG,EAAE,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAE,KAAK,EAAA,QAAA,EACnGA,cACE,CAAC,EAAC,o+BAAo+B,EACt+B,IAAI,EAAC,SAAS,EAAA,CACd,EAAA,CACE;AAEV;;;;"}

package/dist/components/uikit-sdk/Svg/Icons/Audit.js

@@ -1,13 +1,14 @@
 import { jsx } from 'theme-ui/jsx-runtime';
+import { dynamicStyles } from '../styles.js';
 
-const Audit = ({ direction = 'down', color = 'text', width, getStyles }) => {
+const Audit = ({ direction = 'down', color = 'text', width }) => {
     const deg = {
         left: 90,
         up: 180,
         right: 270,
         down: 0,
     };
-    const style = getStyles({
+    const style = dynamicStyles.generic({
         degree: deg[direction],
         color,
     });

package/dist/components/uikit-sdk/Svg/Icons/Audit.js.map

@@ -1 +1 @@
-{"version":3,"file":"Audit.js","sources":["../../../../../src/components/uikit-sdk/Svg/Icons/Audit.tsx"],"sourcesContent":["import React from 'react'\nimport { rotation, SvgProps } from './types'\n\nconst Audit: React.FC<SvgProps> = ({ direction = 'down', color = 'text', width, getStyles }) => {\n  const deg: rotation = {\n    left: 90,\n    up: 180,\n    right: 270,\n    down: 0,\n  }\n  const style = getStyles({\n    degree: deg[direction as keyof rotation],\n    color,\n  })\n  return (\n    <svg width={width || '14'} height=\"17\" viewBox=\"0 0 14 17\" sx={style}>\n      <path\n        d=\"M6.66667 10.2917C7.18056 10.2917 7.61806 10.1147 7.97917 9.7605C8.34028 9.40633 8.52083 8.96536 8.52083 8.43758C8.52083 7.92369 8.34028 7.48619 7.97917 7.12508C7.61806 6.76397 7.18056 6.58341 6.66667 6.58341C6.15278 6.58341 5.71528 6.76397 5.35417 7.12508C4.99306 7.48619 4.8125 7.92369 4.8125 8.43758C4.8125 8.96536 4.99306 9.40633 5.35417 9.7605C5.71528 10.1147 6.15278 10.2917 6.66667 10.2917ZM6.66667 15.5417C7.31944 15.3195 7.98611 14.9688 8.66667 14.4897C9.34722 14.0105 9.89583 13.4654 10.3125 12.8542L8.39583 11.0209C8.13194 11.1737 7.85417 11.2987 7.5625 11.3959C7.27083 11.4931 6.97222 11.5417 6.66667 11.5417C5.80556 11.5417 5.07292 11.2431 4.46875 10.6459C3.86458 10.0487 3.5625 9.31258 3.5625 8.43758C3.5625 7.57647 3.86458 6.84383 4.46875 6.23966C5.07292 5.6355 5.80556 5.33341 6.66667 5.33341C7.52778 5.33341 8.26042 5.6355 8.86458 6.23966C9.46875 6.84383 9.77083 7.58341 9.77083 8.45841C9.77083 8.75008 9.72917 9.04175 9.64583 9.33341C9.5625 9.62508 9.43056 9.88897 9.25 10.1251L11 11.7917C11.3333 11.1945 11.5972 10.5383 11.7917 9.823C11.9861 9.10772 12.0833 8.37508 12.0833 7.62508V3.50008L6.66667 1.52091L1.25 3.50008V7.62508C1.25 9.44453 1.75347 11.0869 2.76042 12.5522C3.76736 14.0174 5.06944 15.014 6.66667 15.5417ZM6.66667 16.8334C4.72222 16.3473 3.125 15.2188 1.875 13.448C0.625 11.6772 0 9.73619 0 7.62508V2.66675L6.66667 0.166748L13.3333 2.66675V7.62508C13.3333 9.73619 12.7083 11.6772 11.4583 13.448C10.2083 15.2188 8.61111 16.3473 6.66667 16.8334Z\"\n        fill=\"#4D4040\"\n      />\n    </svg>\n  )\n}\n\nexport default Audit\n"],"names":["_jsx"],"mappings":";;AAGA,MAAM,KAAK,GAAuB,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,KAAI;AAC7F,IAAA,MAAM,GAAG,GAAa;AACpB,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,IAAI,EAAE,CAAC;KACR;IACD,MAAM,KAAK,GAAG,SAAS,CAAC;AACtB,QAAA,MAAM,EAAE,GAAG,CAAC,SAA2B,CAAC;QACxC,KAAK;AACN,KAAA,CAAC;AACF,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,IAAI,IAAI,EAAE,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,KAAK,EAAA,QAAA,EAClEA,GAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,q8CAAq8C,EACv8C,IAAI,EAAC,SAAS,EAAA,CACd,EAAA,CACE;AAEV;;;;"}
+{"version":3,"file":"Audit.js","sources":["../../../../../src/components/uikit-sdk/Svg/Icons/Audit.tsx"],"sourcesContent":["import React from 'react'\nimport { rotation, SvgProps } from './types'\nimport { dynamicStyles } from '../styles'\n\nconst Audit: React.FC<SvgProps> = ({ direction = 'down', color = 'text', width }) => {\n  const deg: rotation = {\n    left: 90,\n    up: 180,\n    right: 270,\n    down: 0,\n  }\n  const style = dynamicStyles.generic({\n    degree: deg[direction as keyof rotation],\n    color,\n  })\n  return (\n    <svg width={width || '14'} height=\"17\" viewBox=\"0 0 14 17\" sx={style}>\n      <path\n        d=\"M6.66667 10.2917C7.18056 10.2917 7.61806 10.1147 7.97917 9.7605C8.34028 9.40633 8.52083 8.96536 8.52083 8.43758C8.52083 7.92369 8.34028 7.48619 7.97917 7.12508C7.61806 6.76397 7.18056 6.58341 6.66667 6.58341C6.15278 6.58341 5.71528 6.76397 5.35417 7.12508C4.99306 7.48619 4.8125 7.92369 4.8125 8.43758C4.8125 8.96536 4.99306 9.40633 5.35417 9.7605C5.71528 10.1147 6.15278 10.2917 6.66667 10.2917ZM6.66667 15.5417C7.31944 15.3195 7.98611 14.9688 8.66667 14.4897C9.34722 14.0105 9.89583 13.4654 10.3125 12.8542L8.39583 11.0209C8.13194 11.1737 7.85417 11.2987 7.5625 11.3959C7.27083 11.4931 6.97222 11.5417 6.66667 11.5417C5.80556 11.5417 5.07292 11.2431 4.46875 10.6459C3.86458 10.0487 3.5625 9.31258 3.5625 8.43758C3.5625 7.57647 3.86458 6.84383 4.46875 6.23966C5.07292 5.6355 5.80556 5.33341 6.66667 5.33341C7.52778 5.33341 8.26042 5.6355 8.86458 6.23966C9.46875 6.84383 9.77083 7.58341 9.77083 8.45841C9.77083 8.75008 9.72917 9.04175 9.64583 9.33341C9.5625 9.62508 9.43056 9.88897 9.25 10.1251L11 11.7917C11.3333 11.1945 11.5972 10.5383 11.7917 9.823C11.9861 9.10772 12.0833 8.37508 12.0833 7.62508V3.50008L6.66667 1.52091L1.25 3.50008V7.62508C1.25 9.44453 1.75347 11.0869 2.76042 12.5522C3.76736 14.0174 5.06944 15.014 6.66667 15.5417ZM6.66667 16.8334C4.72222 16.3473 3.125 15.2188 1.875 13.448C0.625 11.6772 0 9.73619 0 7.62508V2.66675L6.66667 0.166748L13.3333 2.66675V7.62508C13.3333 9.73619 12.7083 11.6772 11.4583 13.448C10.2083 15.2188 8.61111 16.3473 6.66667 16.8334Z\"\n        fill=\"#4D4040\"\n      />\n    </svg>\n  )\n}\n\nexport default Audit\n"],"names":["_jsx"],"mappings":";;;AAIA,MAAM,KAAK,GAAuB,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,KAAI;AAClF,IAAA,MAAM,GAAG,GAAa;AACpB,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,IAAI,EAAE,CAAC;KACR;AACD,IAAA,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC;AAClC,QAAA,MAAM,EAAE,GAAG,CAAC,SAA2B,CAAC;QACxC,KAAK;AACN,KAAA,CAAC;AACF,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,IAAI,IAAI,EAAE,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,KAAK,EAAA,QAAA,EAClEA,GAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,q8CAAq8C,EACv8C,IAAI,EAAC,SAAS,EAAA,CACd,EAAA,CACE;AAEV;;;;"}

package/dist/components/uikit-sdk/Svg/Icons/Bubble.js

@@ -1,13 +1,14 @@
 import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { dynamicStyles } from '../styles.js';
 
-const Bubble = ({ direction = 'down', color = 'text', width, getStyles }) => {
+const Bubble = ({ direction = 'down', color = 'text', width }) => {
     const deg = {
         left: 90,
         up: 180,
         right: 270,
         down: 0,
     };
-    const style = getStyles({
+    const style = dynamicStyles.generic({
         degree: deg[direction],
         color,
     });

package/dist/components/uikit-sdk/Svg/Icons/Bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bubble.js","sources":["../../../../../src/components/uikit-sdk/Svg/Icons/Bubble.tsx"],"sourcesContent":["import React from 'react'\nimport { rotation, SvgProps } from './types'\n\nconst Bubble: React.FC<SvgProps> = ({ direction = 'down', color = 'text', width, getStyles }) => {\n  const deg: rotation = {\n    left: 90,\n    up: 180,\n    right: 270,\n    down: 0,\n  }\n  const style = getStyles({\n    degree: deg[direction as keyof rotation],\n    color,\n  })\n  return (\n    <svg width={width || '13'} height=\"19\" viewBox=\"0 0 19 13\" sx={style}>\n      <g clipPath=\"url(#clip0_241_4869)\">\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M0.223615 11.8591C0.223615 11.8591 -0.502465 9.34304 0.649961 8.18498C1.54141 7.28917 2.98866 7.28943 3.87985 8.18498C4.77105 9.08053 4.7713 10.5349 3.87985 11.4307C2.72743 12.5887 0.223615 11.8591 0.223615 11.8591Z\"\n          fill=\"#4D4040\"\n        />\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M3.79913 4.50158C2.98474 3.08414 4.33367 0.842317 4.33367 0.842317C4.33367 0.842317 6.94048 0.7891 7.75487 2.20653L11.4688 8.67068C12.0995 9.76837 11.7245 11.1726 10.6328 11.806C9.54116 12.4394 8.14378 12.0634 7.51311 10.9657L3.79913 4.50158Z\"\n          fill=\"#4D4040\"\n        />\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M11.0234 4.50158C10.209 3.08414 11.558 0.842317 11.558 0.842317C11.558 0.842317 14.1648 0.7891 14.9792 2.20653L18.6931 8.67068C19.3238 9.76837 18.9488 11.1726 17.8572 11.806C16.7655 12.4394 15.3681 12.0634 14.7374 10.9657L11.0234 4.50158Z\"\n          fill=\"#4D4040\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_241_4869\">\n          <rect width=\"19\" height=\"11.3095\" fill=\"white\" transform=\"translate(0 0.845215)\" />\n        </clipPath>\n      </defs>\n    </svg>\n  )\n}\n\nexport default Bubble\n"],"names":["_jsxs","_jsx"],"mappings":";;AAGA,MAAM,MAAM,GAAuB,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,KAAI;AAC9F,IAAA,MAAM,GAAG,GAAa;AACpB,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,IAAI,EAAE,CAAC;KACR;IACD,MAAM,KAAK,GAAG,SAAS,CAAC;AACtB,QAAA,MAAM,EAAE,GAAG,CAAC,SAA2B,CAAC;QACxC,KAAK;AACN,KAAA,CAAC;IACF,QACEA,cAAK,KAAK,EAAE,KAAK,IAAI,IAAI,EAAE,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,KAAK,EAAA,QAAA,EAAA,CAClEA,IAAA,CAAA,GAAA,EAAA,EAAG,QAAQ,EAAC,sBAAsB,EAAA,QAAA,EAAA,CAChCC,cACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yNAAyN,EAC3N,IAAI,EAAC,SAAS,EAAA,CACd,EACFA,GAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,oPAAoP,EACtP,IAAI,EAAC,SAAS,EAAA,CACd,EACFA,GAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,gPAAgP,EAClP,IAAI,EAAC,SAAS,EAAA,CACd,CAAA,EAAA,CACA,EACJA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EACEA,kBAAU,EAAE,EAAC,gBAAgB,EAAA,QAAA,EAC3BA,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,uBAAuB,GAAG,EAAA,CAC1E,EAAA,CACN,CAAA,EAAA,CACH;AAEV;;;;"}
+{"version":3,"file":"Bubble.js","sources":["../../../../../src/components/uikit-sdk/Svg/Icons/Bubble.tsx"],"sourcesContent":["import React from 'react'\nimport { rotation, SvgProps } from './types'\nimport { dynamicStyles } from '../styles'\n\nconst Bubble: React.FC<SvgProps> = ({ direction = 'down', color = 'text', width }) => {\n  const deg: rotation = {\n    left: 90,\n    up: 180,\n    right: 270,\n    down: 0,\n  }\n  const style = dynamicStyles.generic({\n    degree: deg[direction as keyof rotation],\n    color,\n  })\n  return (\n    <svg width={width || '13'} height=\"19\" viewBox=\"0 0 19 13\" sx={style}>\n      <g clipPath=\"url(#clip0_241_4869)\">\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M0.223615 11.8591C0.223615 11.8591 -0.502465 9.34304 0.649961 8.18498C1.54141 7.28917 2.98866 7.28943 3.87985 8.18498C4.77105 9.08053 4.7713 10.5349 3.87985 11.4307C2.72743 12.5887 0.223615 11.8591 0.223615 11.8591Z\"\n          fill=\"#4D4040\"\n        />\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M3.79913 4.50158C2.98474 3.08414 4.33367 0.842317 4.33367 0.842317C4.33367 0.842317 6.94048 0.7891 7.75487 2.20653L11.4688 8.67068C12.0995 9.76837 11.7245 11.1726 10.6328 11.806C9.54116 12.4394 8.14378 12.0634 7.51311 10.9657L3.79913 4.50158Z\"\n          fill=\"#4D4040\"\n        />\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M11.0234 4.50158C10.209 3.08414 11.558 0.842317 11.558 0.842317C11.558 0.842317 14.1648 0.7891 14.9792 2.20653L18.6931 8.67068C19.3238 9.76837 18.9488 11.1726 17.8572 11.806C16.7655 12.4394 15.3681 12.0634 14.7374 10.9657L11.0234 4.50158Z\"\n          fill=\"#4D4040\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_241_4869\">\n          <rect width=\"19\" height=\"11.3095\" fill=\"white\" transform=\"translate(0 0.845215)\" />\n        </clipPath>\n      </defs>\n    </svg>\n  )\n}\n\nexport default Bubble\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAIA,MAAM,MAAM,GAAuB,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,KAAI;AACnF,IAAA,MAAM,GAAG,GAAa;AACpB,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,IAAI,EAAE,CAAC;KACR;AACD,IAAA,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC;AAClC,QAAA,MAAM,EAAE,GAAG,CAAC,SAA2B,CAAC;QACxC,KAAK;AACN,KAAA,CAAC;IACF,QACEA,cAAK,KAAK,EAAE,KAAK,IAAI,IAAI,EAAE,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,KAAK,EAAA,QAAA,EAAA,CAClEA,IAAA,CAAA,GAAA,EAAA,EAAG,QAAQ,EAAC,sBAAsB,EAAA,QAAA,EAAA,CAChCC,cACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yNAAyN,EAC3N,IAAI,EAAC,SAAS,EAAA,CACd,EACFA,GAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,oPAAoP,EACtP,IAAI,EAAC,SAAS,EAAA,CACd,EACFA,GAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,gPAAgP,EAClP,IAAI,EAAC,SAAS,EAAA,CACd,CAAA,EAAA,CACA,EACJA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EACEA,kBAAU,EAAE,EAAC,gBAAgB,EAAA,QAAA,EAC3BA,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,uBAAuB,GAAG,EAAA,CAC1E,EAAA,CACN,CAAA,EAAA,CACH;AAEV;;;;"}

package/dist/components/uikit-sdk/Svg/Icons/Caret.js

@@ -1,13 +1,14 @@
 import { jsx } from 'theme-ui/jsx-runtime';
+import { dynamicStyles } from '../styles.js';
 
-const Caret = ({ direction = 'down', color = 'text', width, getStyles }) => {
+const Caret = ({ direction = 'down', color = 'text', width }) => {
     const deg = {
         left: 90,
         up: 180,
         right: 270,
         down: 0,
     };
-    const style = getStyles({
+    const style = dynamicStyles.generic({
         degree: deg[direction],
         color,
     });

package/dist/components/uikit-sdk/Svg/Icons/Caret.js.map

@@ -1 +1 @@
-{"version":3,"file":"Caret.js","sources":["../../../../../src/components/uikit-sdk/Svg/Icons/Caret.tsx"],"sourcesContent":["import React from 'react'\nimport { SvgProps, rotation } from './types'\n\nconst Caret: React.FC<SvgProps> = ({ direction = 'down', color = 'text', width, getStyles }) => {\n  const deg: rotation = {\n    left: 90,\n    up: 180,\n    right: 270,\n    down: 0,\n  }\n  const style = getStyles({\n    degree: deg[direction as keyof rotation],\n    color,\n  })\n\n  return (\n    <svg width={width || '10'} viewBox=\"0 0 10 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" sx={style}>\n      <path\n        d=\"M4.30702 7.70463C4.26072 7.65942 4.06273 7.48875 3.89987 7.32976C2.87559 6.39766 1.19907 3.9661 0.687336 2.69342C0.605106 2.50015 0.431067 2.01149 0.419891 1.75041C0.419891 1.50024 0.477372 1.26176 0.59393 1.03419C0.756792 0.750511 1.01306 0.522942 1.31563 0.398246C1.52559 0.317973 2.15389 0.193278 2.16507 0.193278C2.85244 0.0685823 3.96932 -2.63609e-07 5.20356 -2.09659e-07C6.37952 -1.58256e-07 7.45089 0.0685824 8.14864 0.170677C8.15982 0.182367 8.9406 0.307063 9.20804 0.443449C9.69663 0.693619 10 1.18227 10 1.70521L10 1.75041C9.98802 2.09099 9.68465 2.80721 9.67348 2.80721C9.16094 4.0113 7.56665 6.38675 6.50725 7.34145C6.50725 7.34145 6.23502 7.61033 6.06497 7.72723C5.82068 7.9096 5.51811 8 5.21553 8C4.87783 8 4.56329 7.8979 4.30702 7.70463Z\"\n        fill=\"#4D4040\"\n      />\n    </svg>\n  )\n}\n\nexport default Caret\n"],"names":["_jsx"],"mappings":";;AAGA,MAAM,KAAK,GAAuB,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,KAAI;AAC7F,IAAA,MAAM,GAAG,GAAa;AACpB,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,IAAI,EAAE,CAAC;KACR;IACD,MAAM,KAAK,GAAG,SAAS,CAAC;AACtB,QAAA,MAAM,EAAE,GAAG,CAAC,SAA2B,CAAC;QACxC,KAAK;AACN,KAAA,CAAC;AAEF,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,IAAI,IAAI,EAAE,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAE,KAAK,EAAA,QAAA,EACpGA,cACE,CAAC,EAAC,kvBAAkvB,EACpvB,IAAI,EAAC,SAAS,EAAA,CACd,EAAA,CACE;AAEV;;;;"}
+{"version":3,"file":"Caret.js","sources":["../../../../../src/components/uikit-sdk/Svg/Icons/Caret.tsx"],"sourcesContent":["import React from 'react'\nimport { SvgProps, rotation } from './types'\nimport { dynamicStyles } from '../styles'\n\nconst Caret: React.FC<SvgProps> = ({ direction = 'down', color = 'text', width }) => {\n  const deg: rotation = {\n    left: 90,\n    up: 180,\n    right: 270,\n    down: 0,\n  }\n  const style = dynamicStyles.generic({\n    degree: deg[direction as keyof rotation],\n    color,\n  })\n\n  return (\n    <svg width={width || '10'} viewBox=\"0 0 10 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" sx={style}>\n      <path\n        d=\"M4.30702 7.70463C4.26072 7.65942 4.06273 7.48875 3.89987 7.32976C2.87559 6.39766 1.19907 3.9661 0.687336 2.69342C0.605106 2.50015 0.431067 2.01149 0.419891 1.75041C0.419891 1.50024 0.477372 1.26176 0.59393 1.03419C0.756792 0.750511 1.01306 0.522942 1.31563 0.398246C1.52559 0.317973 2.15389 0.193278 2.16507 0.193278C2.85244 0.0685823 3.96932 -2.63609e-07 5.20356 -2.09659e-07C6.37952 -1.58256e-07 7.45089 0.0685824 8.14864 0.170677C8.15982 0.182367 8.9406 0.307063 9.20804 0.443449C9.69663 0.693619 10 1.18227 10 1.70521L10 1.75041C9.98802 2.09099 9.68465 2.80721 9.67348 2.80721C9.16094 4.0113 7.56665 6.38675 6.50725 7.34145C6.50725 7.34145 6.23502 7.61033 6.06497 7.72723C5.82068 7.9096 5.51811 8 5.21553 8C4.87783 8 4.56329 7.8979 4.30702 7.70463Z\"\n        fill=\"#4D4040\"\n      />\n    </svg>\n  )\n}\n\nexport default Caret\n"],"names":["_jsx"],"mappings":";;;AAIA,MAAM,KAAK,GAAuB,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,KAAI;AAClF,IAAA,MAAM,GAAG,GAAa;AACpB,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,IAAI,EAAE,CAAC;KACR;AACD,IAAA,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC;AAClC,QAAA,MAAM,EAAE,GAAG,CAAC,SAA2B,CAAC;QACxC,KAAK;AACN,KAAA,CAAC;AAEF,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,IAAI,IAAI,EAAE,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAE,KAAK,EAAA,QAAA,EACpGA,cACE,CAAC,EAAC,kvBAAkvB,EACpvB,IAAI,EAAC,SAAS,EAAA,CACd,EAAA,CACE;AAEV;;;;"}

package/dist/components/uikit-sdk/Svg/Icons/Close.js

@@ -1,7 +1,8 @@
 import { jsx } from 'theme-ui/jsx-runtime';
+import { dynamicStyles } from '../styles.js';
 
-const Close = ({ width, color = 'text', getStyles }) => {
-    const style = getStyles({
+const Close = ({ width, color = 'text' }) => {
+    const style = dynamicStyles.generic({
         color,
     });
     return (jsx("svg", { width: width || '12', viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", sx: style, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.9497 10.9497C11.3403 10.5592 11.3403 9.92602 10.9497 9.5355L7.41424 5.99999L10.9497 2.46451C11.3402 2.07399 11.3402 1.44082 10.9497 1.0503C10.5592 0.659775 9.92602 0.659775 9.5355 1.0503L6.00002 4.58578L2.46446 1.05022C2.07394 0.659693 1.44077 0.659693 1.05025 1.05022C0.659726 1.44074 0.659726 2.07391 1.05025 2.46443L4.58581 5.99999L1.05022 9.53558C0.659693 9.9261 0.659693 10.5593 1.05022 10.9498C1.44074 11.3403 2.07391 11.3403 2.46443 10.9498L6.00002 7.4142L9.53553 10.9497C9.92605 11.3402 10.5592 11.3402 10.9497 10.9497Z", fill: "#FAFAFA" }) }));

package/dist/components/uikit-sdk/Svg/Icons/Close.js.map

@@ -1 +1 @@
-{"version":3,"file":"Close.js","sources":["../../../../../src/components/uikit-sdk/Svg/Icons/Close.tsx"],"sourcesContent":["import React from 'react'\nimport { SvgProps } from './types'\n\nconst Close: React.FC<SvgProps> = ({ width, color = 'text', getStyles }) => {\n  const style = getStyles({\n    color,\n  })\n\n  return (\n    <svg width={width || '12'} viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" sx={style}>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M10.9497 10.9497C11.3403 10.5592 11.3403 9.92602 10.9497 9.5355L7.41424 5.99999L10.9497 2.46451C11.3402 2.07399 11.3402 1.44082 10.9497 1.0503C10.5592 0.659775 9.92602 0.659775 9.5355 1.0503L6.00002 4.58578L2.46446 1.05022C2.07394 0.659693 1.44077 0.659693 1.05025 1.05022C0.659726 1.44074 0.659726 2.07391 1.05025 2.46443L4.58581 5.99999L1.05022 9.53558C0.659693 9.9261 0.659693 10.5593 1.05022 10.9498C1.44074 11.3403 2.07391 11.3403 2.46443 10.9498L6.00002 7.4142L9.53553 10.9497C9.92605 11.3402 10.5592 11.3402 10.9497 10.9497Z\"\n        fill=\"#FAFAFA\"\n      />\n    </svg>\n  )\n}\n\nexport default Close\n"],"names":["_jsx"],"mappings":";;AAGA,MAAM,KAAK,GAAuB,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,EAAE,SAAS,EAAE,KAAI;IACzE,MAAM,KAAK,GAAG,SAAS,CAAC;QACtB,KAAK;AACN,KAAA,CAAC;AAEF,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,IAAI,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAE,KAAK,EAAA,QAAA,EACrGA,cACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,qhBAAqhB,EACvhB,IAAI,EAAC,SAAS,EAAA,CACd,EAAA,CACE;AAEV;;;;"}
+{"version":3,"file":"Close.js","sources":["../../../../../src/components/uikit-sdk/Svg/Icons/Close.tsx"],"sourcesContent":["import React from 'react'\nimport { SvgProps } from './types'\nimport { dynamicStyles } from '../styles'\n\nconst Close: React.FC<SvgProps> = ({ width, color = 'text' }) => {\n  const style = dynamicStyles.generic({\n    color,\n  })\n\n  return (\n    <svg width={width || '12'} viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" sx={style}>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M10.9497 10.9497C11.3403 10.5592 11.3403 9.92602 10.9497 9.5355L7.41424 5.99999L10.9497 2.46451C11.3402 2.07399 11.3402 1.44082 10.9497 1.0503C10.5592 0.659775 9.92602 0.659775 9.5355 1.0503L6.00002 4.58578L2.46446 1.05022C2.07394 0.659693 1.44077 0.659693 1.05025 1.05022C0.659726 1.44074 0.659726 2.07391 1.05025 2.46443L4.58581 5.99999L1.05022 9.53558C0.659693 9.9261 0.659693 10.5593 1.05022 10.9498C1.44074 11.3403 2.07391 11.3403 2.46443 10.9498L6.00002 7.4142L9.53553 10.9497C9.92605 11.3402 10.5592 11.3402 10.9497 10.9497Z\"\n        fill=\"#FAFAFA\"\n      />\n    </svg>\n  )\n}\n\nexport default Close\n"],"names":["_jsx"],"mappings":";;;AAIA,MAAM,KAAK,GAAuB,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,EAAE,KAAI;AAC9D,IAAA,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC;QAClC,KAAK;AACN,KAAA,CAAC;AAEF,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,IAAI,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAE,KAAK,EAAA,QAAA,EACrGA,cACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,qhBAAqhB,EACvhB,IAAI,EAAC,SAAS,EAAA,CACd,EAAA,CACE;AAEV;;;;"}

package/dist/components/uikit-sdk/Svg/Icons/Cog.d.ts

@@ -1,3 +1,3 @@
 import { SvgProps } from './types';
-declare const Cog: ({ direction, color, width, getStyles }: SvgProps) => import("react").JSX.Element;
+declare const Cog: ({ direction, color, width }: SvgProps) => import("react").JSX.Element;
 export default Cog;