@ape.swap/bonds-sdk 6.2.13-test.1 → 6.2.13-test.2

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

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

@@ -27,7 +27,7 @@ const paddingY = {
     [sizes.LARGE]: '14px',
 };
 const Button = ({ variant = variants.PRIMARY, size = sizes.MEDIUM, load, children, startIcon, endIcon, fullWidth, disabled, className, style, ...props }) => {
-    return (jsxs("button", { disabled: disabled, className: clsx(baseClasses, variantClasses[variant], fullWidth ? 'ape:w-full' : 'ape:w-max', className), style: {
+    return (jsxs("button", { disabled: disabled, className: clsx(baseClasses, variantClasses[variant], fullWidth && 'ape:w-full', className), style: {
             fontSize: buttonFontSizes[size],
             lineHeight: buttonLineHeight[size],
             paddingLeft: paddingX[size],

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/uikit-sdk/Button/Button.tsx"],"sourcesContent":["import React from 'react'\nimport Spinner from '../Spinner'\nimport clsx from 'clsx'\nimport { ButtonProps, variants, buttonFontSizes, sizes, buttonLineHeight } from './types'\n\nconst baseClasses =\n  'ape:font-body ape:font-bold ape:uppercase ape:cursor-pointer ape:flex ape:items-center ape:justify-center ' +\n  'ape:rounded-normal ape:border-[3px] ape:border-solid ape:transition-all ape:duration-300 ape:ease-linear ' +\n  'ape:active:enabled:scale-90'\n\nconst variantClasses: Record<string, string> = {\n  [variants.PRIMARY]:\n    'ape:bg-primary-button ape:border-primary-button ape:text-primary-bright ' +\n    'ape:enabled:hover:bg-primary-button-hovered ape:enabled:hover:border-primary-button-hovered ' +\n    'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-text-disabled-button ape:disabled:border-transparent ape:disabled:opacity-90',\n  [variants.SECONDARY]:\n    'ape:bg-transparent ape:border-primary-button ape:text-primary-button ' +\n    'ape:enabled:hover:border-primary-button-hovered ' +\n    'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-primary-button-disable ape:disabled:border-transparent',\n}\n\n// px values ported 1:1 from the old theme-ui space scale indices in buttonPadding (types.ts)\nconst paddingX: Record<string, string> = {\n  [sizes.SMALL]: '12px',\n  [sizes.MEDIUM]: '16px',\n  [sizes.LARGE]: '22px',\n}\nconst paddingY: Record<string, string> = {\n  [sizes.SMALL]: '6px',\n  [sizes.MEDIUM]: '8px',\n  [sizes.LARGE]: '14px',\n}\n\nconst Button = ({\n  variant = variants.PRIMARY,\n  size = sizes.MEDIUM,\n  load,\n  children,\n  startIcon,\n  endIcon,\n  fullWidth,\n  disabled,\n  className,\n  style,\n  ...props\n}: ButtonProps) => {\n  return (\n    <button\n      disabled={disabled}\n      className={clsx(baseClasses, variantClasses[variant], fullWidth ? 'ape:w-full' : 'ape:w-max', className)}\n      style={{\n        fontSize: buttonFontSizes[size],\n        lineHeight: buttonLineHeight[size],\n        paddingLeft: paddingX[size],\n        paddingRight: paddingX[size],\n        paddingTop: paddingY[size],\n        paddingBottom: paddingY[size],\n        ...style,\n      }}\n      {...props}\n    >\n      {React.isValidElement(startIcon) && React.cloneElement(startIcon)}\n      {children} {load && <Spinner size={16} style={{ marginLeft: '5px' }} />}\n      {React.isValidElement(endIcon) && React.cloneElement(endIcon)}\n    </button>\n  )\n}\n\nexport default Button\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAKA,MAAM,WAAW,GACf,4GAA4G;IAC5G,2GAA2G;AAC3G,IAAA,6BAA6B;AAE/B,MAAM,cAAc,GAA2B;AAC7C,IAAA,CAAC,QAAQ,CAAC,OAAO,GACf,0EAA0E;QAC1E,8FAA8F;QAC9F,uJAAuJ;AACzJ,IAAA,CAAC,QAAQ,CAAC,SAAS,GACjB,uEAAuE;QACvE,kDAAkD;QAClD,iIAAiI;CACpI;AAED;AACA,MAAM,QAAQ,GAA2B;AACvC,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;AACrB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;AACtB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;CACtB;AACD,MAAM,QAAQ,GAA2B;AACvC,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK;AACpB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK;AACrB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;CACtB;AAED,MAAM,MAAM,GAAG,CAAC,EACd,OAAO,GAAG,QAAQ,CAAC,OAAO,EAC1B,IAAI,GAAG,KAAK,CAAC,MAAM,EACnB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,EACE,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,EAAE,SAAS,CAAC,EACxG,KAAK,EAAE;AACL,YAAA,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC;AAC/B,YAAA,UAAU,EAAE,gBAAgB,CAAC,IAAI,CAAC;AAClC,YAAA,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC3B,YAAA,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC5B,YAAA,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC1B,YAAA,aAAa,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC7B,YAAA,GAAG,KAAK;SACT,EAAA,GACG,KAAK,aAER,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAChE,QAAQ,EAAA,GAAA,EAAG,IAAI,IAAIC,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,EAAA,CAAI,EACtE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA,EAAA,CACtD;AAEb;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/uikit-sdk/Button/Button.tsx"],"sourcesContent":["import React from 'react'\nimport Spinner from '../Spinner'\nimport clsx from 'clsx'\nimport { ButtonProps, variants, buttonFontSizes, sizes, buttonLineHeight } from './types'\n\nconst baseClasses =\n  'ape:font-body ape:font-bold ape:uppercase ape:cursor-pointer ape:flex ape:items-center ape:justify-center ' +\n  'ape:rounded-normal ape:border-[3px] ape:border-solid ape:transition-all ape:duration-300 ape:ease-linear ' +\n  'ape:active:enabled:scale-90'\n\nconst variantClasses: Record<string, string> = {\n  [variants.PRIMARY]:\n    'ape:bg-primary-button ape:border-primary-button ape:text-primary-bright ' +\n    'ape:enabled:hover:bg-primary-button-hovered ape:enabled:hover:border-primary-button-hovered ' +\n    'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-text-disabled-button ape:disabled:border-transparent ape:disabled:opacity-90',\n  [variants.SECONDARY]:\n    'ape:bg-transparent ape:border-primary-button ape:text-primary-button ' +\n    'ape:enabled:hover:border-primary-button-hovered ' +\n    'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-primary-button-disable ape:disabled:border-transparent',\n}\n\n// px values ported 1:1 from the old theme-ui space scale indices in buttonPadding (types.ts)\nconst paddingX: Record<string, string> = {\n  [sizes.SMALL]: '12px',\n  [sizes.MEDIUM]: '16px',\n  [sizes.LARGE]: '22px',\n}\nconst paddingY: Record<string, string> = {\n  [sizes.SMALL]: '6px',\n  [sizes.MEDIUM]: '8px',\n  [sizes.LARGE]: '14px',\n}\n\nconst Button = ({\n  variant = variants.PRIMARY,\n  size = sizes.MEDIUM,\n  load,\n  children,\n  startIcon,\n  endIcon,\n  fullWidth,\n  disabled,\n  className,\n  style,\n  ...props\n}: ButtonProps) => {\n  return (\n    <button\n      disabled={disabled}\n      className={clsx(baseClasses, variantClasses[variant], fullWidth && 'ape:w-full', className)}\n      style={{\n        fontSize: buttonFontSizes[size],\n        lineHeight: buttonLineHeight[size],\n        paddingLeft: paddingX[size],\n        paddingRight: paddingX[size],\n        paddingTop: paddingY[size],\n        paddingBottom: paddingY[size],\n        ...style,\n      }}\n      {...props}\n    >\n      {React.isValidElement(startIcon) && React.cloneElement(startIcon)}\n      {children} {load && <Spinner size={16} style={{ marginLeft: '5px' }} />}\n      {React.isValidElement(endIcon) && React.cloneElement(endIcon)}\n    </button>\n  )\n}\n\nexport default Button\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAKA,MAAM,WAAW,GACf,4GAA4G;IAC5G,2GAA2G;AAC3G,IAAA,6BAA6B;AAE/B,MAAM,cAAc,GAA2B;AAC7C,IAAA,CAAC,QAAQ,CAAC,OAAO,GACf,0EAA0E;QAC1E,8FAA8F;QAC9F,uJAAuJ;AACzJ,IAAA,CAAC,QAAQ,CAAC,SAAS,GACjB,uEAAuE;QACvE,kDAAkD;QAClD,iIAAiI;CACpI;AAED;AACA,MAAM,QAAQ,GAA2B;AACvC,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;AACrB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;AACtB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;CACtB;AACD,MAAM,QAAQ,GAA2B;AACvC,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK;AACpB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK;AACrB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;CACtB;AAED,MAAM,MAAM,GAAG,CAAC,EACd,OAAO,GAAG,QAAQ,CAAC,OAAO,EAC1B,IAAI,GAAG,KAAK,CAAC,MAAM,EACnB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACI,KAAI;IAChB,QACEA,IAAA,CAAA,QAAA,EAAA,EACE,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,IAAI,YAAY,EAAE,SAAS,CAAC,EAC3F,KAAK,EAAE;AACL,YAAA,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC;AAC/B,YAAA,UAAU,EAAE,gBAAgB,CAAC,IAAI,CAAC;AAClC,YAAA,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC3B,YAAA,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC5B,YAAA,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC1B,YAAA,aAAa,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC7B,YAAA,GAAG,KAAK;SACT,EAAA,GACG,KAAK,aAER,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAChE,QAAQ,EAAA,GAAA,EAAG,IAAI,IAAIC,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,EAAA,CAAI,EACtE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA,EAAA,CACtD;AAEb;;;;"}

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

@@ -1,10 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import colors from '../../../theme/colors.js';
+import { resolveColor } from '../../../utils/resolveColor.js';
 import Discord from '../Svg/Icons/Discord.js';
 import { iconButtonVariants } from './types.js';
 
-const resolveColor = (color) => (color && colors[color]) || color;
 const baseClasses = 'ape:flex ape:items-center ape:justify-center ape:relative ape:text-primary-bright ape:border-none ape:cursor-pointer ' +
     'ape:transition-all ape:duration-300 ape:ease-linear ape:hover:brightness-115 ape:active:scale-90';
 const variantClasses = {

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

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

@@ -1,10 +1,6 @@
-type variant = 'search' | 'password' | 'text';
-type inputStatus = 'default' | 'error' | 'success';
-declare const Input: ({ variant, width, status, isLoading, className, ...props }: {
+type variant = 'search';
+declare const Input: ({ variant, className, ...props }: {
     variant?: variant;
-    width?: string[];
-    status?: inputStatus;
-    isLoading?: boolean;
     className?: string;
 } | any) => import("react/jsx-runtime").JSX.Element;
 export default Input;

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

@@ -1,26 +1,10 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import Spinner from '../Spinner/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Flex from '../Flex/index.js';
-import Text from '../Text/index.js';
 import Search from '../Svg/Icons/Search.js';
 
-const colorScheme = {
-    default: 'gray',
-    error: 'red',
-    success: 'green',
-};
-const baseInputClasses = 'ape:bg-white3 ape:border-none ape:pl-[10px] ape:rounded-normal ape:focus:outline-none';
-const Input = ({ variant, width, status, isLoading, className, ...props }) => {
-    switch (variant) {
-        case 'search':
-            return (jsxs(Flex, { className: "ape:relative", style: { width: width || 'unset' }, children: [jsx("input", { ...props, className: `${baseInputClasses} ${className || ''}` }), jsx(Flex, { className: "ape:absolute ape:right-[5px] ape:justify-center ape:h-full", children: jsx(Search, { color: "grey" }) })] }));
-        case 'password': {
-            const statusColor = colorScheme[status];
-            return (jsxs(Flex, { className: "ape:flex-col ape:items-center ape:gap-[5px] ape:relative", style: { width: width || '100%' }, children: [jsx("input", { ...props, type: "password", className: `${baseInputClasses} ape:relative ${className || ''}`, style: { borderBottom: `2px solid ${statusColor}`, color: statusColor } }), isLoading && (jsx(Flex, { className: "ape:absolute ape:top-[5px] ape:right-[5px] ape:justify-center ape:h-full", children: jsx(Spinner, { size: 20 }) })), jsx(Text, { style: { fontSize: '10px', color: statusColor, visibility: status === 'default' ? 'hidden' : 'visible' }, children: status === 'error' ? 'Wrong Password' : 'Correct Password' })] }));
-        }
-        default:
-            return jsx("input", { ...props, className: `${baseInputClasses} ${className || ''}` });
-    }
+const baseInputClasses = 'ape:w-full ape:bg-white2 ape:pl-[10px] ape:text-medium ape:rounded-normal ape:border-none  ape:focus:outline-none';
+const Input = ({ variant, className, ...props }) => {
+    return (jsxs(Flex, { className: "ape:relative ape:w-full", children: [jsx("input", { ...props, className: `${baseInputClasses} ${className || ''}` }), variant === 'search' && (jsx(Flex, { className: "ape:absolute ape:right-3 ape:justify-center ape:h-full", children: jsx(Search, { color: "grey" }) }))] }));
 };
 
 export { Input as default };

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 Spinner from '../Spinner'\nimport Flex from '../Flex'\nimport Text from '../Text'\nimport Search from '../Svg/Icons/Search'\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 baseInputClasses = 'ape:bg-white3 ape:border-none ape:pl-[10px] ape:rounded-normal ape:focus:outline-none'\n\nconst Input = ({\n  variant,\n  width,\n  status,\n  isLoading,\n  className,\n  ...props\n}: { variant?: variant; width?: string[]; status?: inputStatus; isLoading?: boolean; className?: string } | any) => {\n  switch (variant) {\n    case 'search':\n      return (\n        <Flex className=\"ape:relative\" style={{ width: width || 'unset' }}>\n          <input {...props} className={`${baseInputClasses} ${className || ''}`} />\n          <Flex className=\"ape:absolute ape:right-[5px] ape:justify-center ape:h-full\">\n            <Search color=\"grey\" />\n          </Flex>\n        </Flex>\n      )\n\n    case 'password': {\n      const statusColor = colorScheme[status as inputStatus]\n      return (\n        <Flex className=\"ape:flex-col ape:items-center ape:gap-[5px] ape:relative\" style={{ width: width || '100%' }}>\n          <input\n            {...props}\n            type=\"password\"\n            className={`${baseInputClasses} ape:relative ${className || ''}`}\n            style={{ borderBottom: `2px solid ${statusColor}`, color: statusColor }}\n          />\n          {isLoading && (\n            <Flex className=\"ape:absolute ape:top-[5px] ape:right-[5px] ape:justify-center ape:h-full\">\n              <Spinner size={20} />\n            </Flex>\n          )}\n          <Text\n            style={{ fontSize: '10px', color: statusColor, visibility: status === 'default' ? 'hidden' : 'visible' }}\n          >\n            {status === 'error' ? 'Wrong Password' : 'Correct Password'}\n          </Text>\n        </Flex>\n      )\n    }\n\n    default:\n      return <input {...props} className={`${baseInputClasses} ${className || ''}`} />\n  }\n}\n\nexport default Input\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAWA,MAAM,WAAW,GAAmB;AAClC,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,OAAO;CACjB;AAED,MAAM,gBAAgB,GAAG,uFAAuF;AAEhH,MAAM,KAAK,GAAG,CAAC,EACb,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACqG,KAAI;IACjH,QAAQ,OAAO;AACb,QAAA,KAAK,QAAQ;YACX,QACEA,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,OAAO,EAAE,aAC/DC,GAAA,CAAA,OAAA,EAAA,EAAA,GAAW,KAAK,EAAE,SAAS,EAAE,CAAA,EAAG,gBAAgB,CAAA,CAAA,EAAI,SAAS,IAAI,EAAE,CAAA,CAAE,GAAI,EACzEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAC1EA,GAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAClB,CAAA,EAAA,CACF;QAGX,KAAK,UAAU,EAAE;AACf,YAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAqB,CAAC;YACtD,QACED,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0DAA0D,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,MAAM,EAAE,EAAA,QAAA,EAAA,CAC1GC,GAAA,CAAA,OAAA,EAAA,EAAA,GACM,KAAK,EACT,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,GAAG,gBAAgB,CAAA,cAAA,EAAiB,SAAS,IAAI,EAAE,CAAA,CAAE,EAChE,KAAK,EAAE,EAAE,YAAY,EAAE,CAAA,UAAA,EAAa,WAAW,CAAA,CAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAA,CACvE,EACD,SAAS,KACRA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0EAA0E,EAAA,QAAA,EACxFA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,EAAA,CAChB,CACR,EACDA,IAAC,IAAI,EAAA,EACH,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS,EAAE,EAAA,QAAA,EAEvG,MAAM,KAAK,OAAO,GAAG,gBAAgB,GAAG,kBAAkB,EAAA,CACtD,CAAA,EAAA,CACF;QAEX;AAEA,QAAA;AACE,YAAA,OAAOA,GAAA,CAAA,OAAA,EAAA,EAAA,GAAW,KAAK,EAAE,SAAS,EAAE,CAAA,EAAG,gBAAgB,CAAA,CAAA,EAAI,SAAS,IAAI,EAAE,CAAA,CAAE,GAAI;;AAEtF;;;;"}
+{"version":3,"file":"Input.js","sources":["../../../../src/components/uikit-sdk/Input/Input.tsx"],"sourcesContent":["import Flex from '../Flex'\nimport Search from '../Svg/Icons/Search'\n\ntype variant = 'search'\n\nconst baseInputClasses =\n  'ape:w-full ape:bg-white2 ape:pl-[10px] ape:text-medium ape:rounded-normal ape:border-none  ape:focus:outline-none'\n\nconst Input = ({ variant, className, ...props }: { variant?: variant; className?: string } | any) => {\n  return (\n    <Flex className=\"ape:relative ape:w-full\">\n      <input {...props} className={`${baseInputClasses} ${className || ''}`} />\n      {variant === 'search' && (\n        <Flex className=\"ape:absolute ape:right-3 ape:justify-center ape:h-full\">\n          <Search color=\"grey\" />\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default Input\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAKA,MAAM,gBAAgB,GACpB,mHAAmH;AAErH,MAAM,KAAK,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAmD,KAAI;IAClG,QACEA,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,yBAAyB,aACvCC,GAAA,CAAA,OAAA,EAAA,EAAA,GAAW,KAAK,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAA,CAAA,EAAI,SAAS,IAAI,EAAE,EAAE,EAAA,CAAI,EACxE,OAAO,KAAK,QAAQ,KACnBA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wDAAwD,EAAA,QAAA,EACtEA,IAAC,MAAM,EAAA,EAAC,KAAK,EAAC,MAAM,GAAG,EAAA,CAClB,CACR,CAAA,EAAA,CACI;AAEX;;;;"}

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

@@ -5,7 +5,7 @@ import IconButton from '../Button/IconButton.js';
 import Close from '../Svg/Icons/Close.js';
 
 const ModalHeader = ({ children, onDismiss, hideDivider, className, style, ...props }) => {
-    return (jsxs(Fragment, { children: [jsxs(Flex, { ...props, style: style, className: clsx('ape:justify-between ape:items-center ape:[&_svg]:fill-text ape:[&_svg]:ml-auto ape:[&_svg]:cursor-pointer ape:[&_button]:ml-auto', className), children: [children, onDismiss && jsx(IconButton, { icon: Close, color: "text", variant: "transparent", onClick: onDismiss })] }), !hideDivider && jsx("hr", { className: "ape:bg-white3 ape:h-px ape:border-none" })] }));
+    return (jsxs(Fragment, { children: [jsxs(Flex, { ...props, style: style, className: clsx('ape:justify-between ape:items-center ape:[&_svg]:fill-text ape:[&_svg]:ml-auto ape:[&_svg]:cursor-pointer ape:[&_button]:ml-auto ', className), children: [children, onDismiss && jsx(IconButton, { icon: Close, color: "text", variant: "transparent", onClick: onDismiss })] }), !hideDivider && jsx("hr", { className: "ape:bg-text ape:h-px ape:border-none ape:mt-0.75" })] }));
 };
 
 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 clsx from 'clsx'\nimport Flex from '../Flex'\nimport IconButton from '../Button/IconButton'\nimport Close from '../Svg/Icons/Close'\nimport { InternalProps } from './types'\n\nconst ModalHeader: React.FC<InternalProps> = ({ children, onDismiss, hideDivider, className, style, ...props }) => {\n  return (\n    <>\n      <Flex\n        {...props}\n        style={style}\n        className={clsx(\n          'ape:justify-between ape:items-center ape:[&_svg]:fill-text ape:[&_svg]:ml-auto ape:[&_svg]:cursor-pointer ape:[&_button]:ml-auto',\n          className,\n        )}\n      >\n        {children}\n        {onDismiss && <IconButton icon={Close} color=\"text\" variant=\"transparent\" onClick={onDismiss} />}\n      </Flex>\n      {!hideDivider && <hr className=\"ape:bg-white3 ape:h-px ape:border-none\" />}\n    </>\n  )\n}\n\nexport default ModalHeader\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;AAOA,MAAM,WAAW,GAA4B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,KAAI;IAChH,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,IAAA,CAAC,IAAI,EAAA,EAAA,GACC,KAAK,EACT,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CACb,kIAAkI,EAClI,SAAS,CACV,EAAA,QAAA,EAAA,CAEA,QAAQ,EACR,SAAS,IAAIE,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,OAAO,EAAE,SAAS,GAAI,CAAA,EAAA,CAC3F,EACN,CAAC,WAAW,IAAIA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,wCAAwC,EAAA,CAAG,CAAA,EAAA,CACzE;AAEP;;;;"}
+{"version":3,"file":"ModalHeader.js","sources":["../../../../src/components/uikit-sdk/Modal/ModalHeader.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport Flex from '../Flex'\nimport IconButton from '../Button/IconButton'\nimport Close from '../Svg/Icons/Close'\nimport { InternalProps } from './types'\n\nconst ModalHeader: React.FC<InternalProps> = ({ children, onDismiss, hideDivider, className, style, ...props }) => {\n  return (\n    <>\n      <Flex\n        {...props}\n        style={style}\n        className={clsx(\n          'ape:justify-between ape:items-center ape:[&_svg]:fill-text ape:[&_svg]:ml-auto ape:[&_svg]:cursor-pointer ape:[&_button]:ml-auto ',\n          className,\n        )}\n      >\n        {children}\n        {onDismiss && <IconButton icon={Close} color=\"text\" variant=\"transparent\" onClick={onDismiss} />}\n      </Flex>\n      {!hideDivider && <hr className=\"ape:bg-text ape:h-px ape:border-none ape:mt-0.75\" />}\n    </>\n  )\n}\n\nexport default ModalHeader\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;AAOA,MAAM,WAAW,GAA4B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,KAAI;IAChH,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,IAAA,CAAC,IAAI,EAAA,EAAA,GACC,KAAK,EACT,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CACb,mIAAmI,EACnI,SAAS,CACV,EAAA,QAAA,EAAA,CAEA,QAAQ,EACR,SAAS,IAAIE,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,OAAO,EAAE,SAAS,GAAI,CAAA,EAAA,CAC3F,EACN,CAAC,WAAW,IAAIA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,kDAAkD,EAAA,CAAG,CAAA,EAAA,CACnF;AAEP;;;;"}

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

@@ -24,7 +24,7 @@ const Modal = ({ children, onDismiss, open = true, title, zIndex = 'modal', onAn
                     }, transition: {
                         opacity: { duration: 0.2 },
                         transform: { duration: 0.2 },
-                    }, exit: { opacity: 0, transform: 'translate(-50%, -50%) scale(0)' }, ...props, className: clsx('ape:p-[20px] ape:bg-white2 ape:rounded-normal ape:text-text ape:fixed ape:block ape:top-1/2 ape:left-1/2', 'ape:w-[380px] ape:max-w-[95vw] ape:max-h-[calc(100%-30px)] ape:overflow-y-auto ape:lg:[overflow-y:unset]', 'ape:min-w-[95%] ape:sm:min-w-[min(380px,90%)] ape:md:min-w-[380px]', 'ape:[&_hr]:bg-[#DCD9D9]', className), style: { zIndex: resolveZIndex(zIndex), ...style }, onAnimationComplete: onAnimationComplete, children: [title && (jsx(ModalHeader, { onDismiss: onClose, hideDivider: hideDivider, children: jsx(Text, { style: { fontSize: '22px', fontWeight: 700, lineHeight: '33px' }, children: title }) })), children] })) }), open && (jsx("div", { className: "ape:fixed ape:inset-0 ape:bg-modal-overlay ape:w-full ape:h-full ape:z-[100] ape:transition-all ape:duration-1000 ape:ease-[ease]", style: backdrop, onClick: onClose }))] }));
+                    }, exit: { opacity: 0, transform: 'translate(-50%, -50%) scale(0)' }, ...props, className: clsx('ape:p-5 ape:bg-white2 ape:rounded-normal ape:text-text ape:fixed ape:block ape:top-1/2 ape:left-1/2', 'ape:w-95 ape:max-w-[95vw] ape:max-h-[95vh] ape:overflow-y-auto ape:overflow-x-hidden', className), style: { zIndex: resolveZIndex(zIndex), ...style }, onAnimationComplete: onAnimationComplete, children: [title && (jsx(ModalHeader, { onDismiss: onClose, hideDivider: hideDivider, children: jsx(Text, { style: { fontSize: '22px', fontWeight: 700, lineHeight: '33px' }, children: title }) })), children] })) }), open && (jsx("div", { className: "ape:fixed ape:inset-0 ape:bg-modal-overlay ape:w-full ape:h-full ape:z-100 ape:transition-all ape:duration-1000 ape:ease-[ease]", style: backdrop, onClick: onClose }))] }));
 };
 
 export { Modal as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Modal/index.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport clsx from 'clsx'\nimport { ModalProps } from './types'\nimport ModalHeader from './ModalHeader'\nimport { Context as ModalContext } from '../../../contexts/ModalContext'\nimport Text from '../Text'\n\n// theme/base.ts zIndices — named tokens resolve through CSS vars, anything else is used as-is\nconst namedZIndex: Record<string, string> = {\n  modal: 'var(--ape-z-index-modal)',\n  dropdown: 'var(--ape-z-index-dropdown)',\n}\nconst resolveZIndex = (zIndex: string | number) => namedZIndex[zIndex as string] ?? zIndex\n\nconst Modal = ({\n  children,\n  onDismiss,\n  open = true,\n  title,\n  zIndex = 'modal',\n  onAnimationComplete,\n  backdrop,\n  hideDivider,\n  className,\n  style,\n  ...props\n}: ModalProps | any) => {\n  const { handleClose } = useContext(ModalContext)\n  const onClose = onDismiss || handleClose\n\n  return (\n    <div id={title} style={{ zIndex: resolveZIndex(zIndex) }}>\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            initial={{\n              opacity: 0,\n              transform: 'translate(-50%, -50%) scale(0.1)',\n            }}\n            animate={{\n              opacity: 1,\n              transform: 'translate(-50%, -50%) scale(1.0)',\n            }}\n            transition={{\n              opacity: { duration: 0.2 },\n              transform: { duration: 0.2 },\n            }}\n            exit={{ opacity: 0, transform: 'translate(-50%, -50%) scale(0)' }}\n            {...props}\n            className={clsx(\n              'ape:p-[20px] ape:bg-white2 ape:rounded-normal ape:text-text ape:fixed ape:block ape:top-1/2 ape:left-1/2',\n              'ape:w-[380px] ape:max-w-[95vw] ape:max-h-[calc(100%-30px)] ape:overflow-y-auto ape:lg:[overflow-y:unset]',\n              'ape:min-w-[95%] ape:sm:min-w-[min(380px,90%)] ape:md:min-w-[380px]',\n              'ape:[&_hr]:bg-[#DCD9D9]',\n              className,\n            )}\n            style={{ zIndex: resolveZIndex(zIndex), ...style }}\n            onAnimationComplete={onAnimationComplete}\n          >\n            {title && (\n              <ModalHeader onDismiss={onClose} hideDivider={hideDivider}>\n                <Text style={{ fontSize: '22px', fontWeight: 700, lineHeight: '33px' }}>{title}</Text>\n              </ModalHeader>\n            )}\n            {children}\n          </motion.div>\n        )}\n      </AnimatePresence>\n      {open && (\n        <div\n          className=\"ape:fixed ape:inset-0 ape:bg-modal-overlay ape:w-full ape:h-full ape:z-[100] ape:transition-all ape:duration-1000 ape:ease-[ease]\"\n          style={backdrop}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default Modal\n"],"names":["ModalContext","_jsxs","_jsx"],"mappings":";;;;;;;;AAQA;AACA,MAAM,WAAW,GAA2B;AAC1C,IAAA,KAAK,EAAE,0BAA0B;AACjC,IAAA,QAAQ,EAAE,6BAA6B;CACxC;AACD,MAAM,aAAa,GAAG,CAAC,MAAuB,KAAK,WAAW,CAAC,MAAgB,CAAC,IAAI,MAAM;AAE1F,MAAM,KAAK,GAAG,CAAC,EACb,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,IAAI,EACX,KAAK,EACL,MAAM,GAAG,OAAO,EAChB,mBAAmB,EACnB,QAAQ,EACR,WAAW,EACX,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACS,KAAI;IACrB,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAACA,OAAY,CAAC;AAChD,IAAA,MAAM,OAAO,GAAG,SAAS,IAAI,WAAW;AAExC,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,EAAA,QAAA,EAAA,CACtDC,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EACb,IAAI,KACHD,IAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE;AACP,wBAAA,OAAO,EAAE,CAAC;AACV,wBAAA,SAAS,EAAE,kCAAkC;AAC9C,qBAAA,EACD,OAAO,EAAE;AACP,wBAAA,OAAO,EAAE,CAAC;AACV,wBAAA,SAAS,EAAE,kCAAkC;AAC9C,qBAAA,EACD,UAAU,EAAE;AACV,wBAAA,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC1B,wBAAA,SAAS,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;qBAC7B,EACD,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,gCAAgC,EAAE,EAAA,GAC7D,KAAK,EACT,SAAS,EAAE,IAAI,CACb,0GAA0G,EAC1G,0GAA0G,EAC1G,oEAAoE,EACpE,yBAAyB,EACzB,SAAS,CACV,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAClD,mBAAmB,EAAE,mBAAmB,EAAA,QAAA,EAAA,CAEvC,KAAK,KACJC,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAA,QAAA,EACvDA,IAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAG,KAAK,EAAA,CAAQ,GAC1E,CACf,EACA,QAAQ,CAAA,EAAA,CACE,CACd,EAAA,CACe,EACjB,IAAI,KACHA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,mIAAmI,EAC7I,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CAAA,EAAA,CACG;AAEV;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Modal/index.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport clsx from 'clsx'\nimport { ModalProps } from './types'\nimport ModalHeader from './ModalHeader'\nimport { Context as ModalContext } from '../../../contexts/ModalContext'\nimport Text from '../Text'\n\n// theme/base.ts zIndices — named tokens resolve through CSS vars, anything else is used as-is\nconst namedZIndex: Record<string, string> = {\n  modal: 'var(--ape-z-index-modal)',\n  dropdown: 'var(--ape-z-index-dropdown)',\n}\nconst resolveZIndex = (zIndex: string | number) => namedZIndex[zIndex as string] ?? zIndex\n\nconst Modal = ({\n  children,\n  onDismiss,\n  open = true,\n  title,\n  zIndex = 'modal',\n  onAnimationComplete,\n  backdrop,\n  hideDivider,\n  className,\n  style,\n  ...props\n}: ModalProps | any) => {\n  const { handleClose } = useContext(ModalContext)\n  const onClose = onDismiss || handleClose\n\n  return (\n    <div id={title} style={{ zIndex: resolveZIndex(zIndex) }}>\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            initial={{\n              opacity: 0,\n              transform: 'translate(-50%, -50%) scale(0.1)',\n            }}\n            animate={{\n              opacity: 1,\n              transform: 'translate(-50%, -50%) scale(1.0)',\n            }}\n            transition={{\n              opacity: { duration: 0.2 },\n              transform: { duration: 0.2 },\n            }}\n            exit={{ opacity: 0, transform: 'translate(-50%, -50%) scale(0)' }}\n            {...props}\n            className={clsx(\n              'ape:p-5 ape:bg-white2 ape:rounded-normal ape:text-text ape:fixed ape:block ape:top-1/2 ape:left-1/2',\n              'ape:w-95 ape:max-w-[95vw] ape:max-h-[95vh] ape:overflow-y-auto ape:overflow-x-hidden',\n              className,\n            )}\n            style={{ zIndex: resolveZIndex(zIndex), ...style }}\n            onAnimationComplete={onAnimationComplete}\n          >\n            {title && (\n              <ModalHeader onDismiss={onClose} hideDivider={hideDivider}>\n                <Text style={{ fontSize: '22px', fontWeight: 700, lineHeight: '33px' }}>{title}</Text>\n              </ModalHeader>\n            )}\n            {children}\n          </motion.div>\n        )}\n      </AnimatePresence>\n      {open && (\n        <div\n          className=\"ape:fixed ape:inset-0 ape:bg-modal-overlay ape:w-full ape:h-full ape:z-100 ape:transition-all ape:duration-1000 ape:ease-[ease]\"\n          style={backdrop}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default Modal\n"],"names":["ModalContext","_jsxs","_jsx"],"mappings":";;;;;;;;AAQA;AACA,MAAM,WAAW,GAA2B;AAC1C,IAAA,KAAK,EAAE,0BAA0B;AACjC,IAAA,QAAQ,EAAE,6BAA6B;CACxC;AACD,MAAM,aAAa,GAAG,CAAC,MAAuB,KAAK,WAAW,CAAC,MAAgB,CAAC,IAAI,MAAM;AAE1F,MAAM,KAAK,GAAG,CAAC,EACb,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,IAAI,EACX,KAAK,EACL,MAAM,GAAG,OAAO,EAChB,mBAAmB,EACnB,QAAQ,EACR,WAAW,EACX,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACS,KAAI;IACrB,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAACA,OAAY,CAAC;AAChD,IAAA,MAAM,OAAO,GAAG,SAAS,IAAI,WAAW;AAExC,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,EAAA,QAAA,EAAA,CACtDC,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EACb,IAAI,KACHD,IAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE;AACP,wBAAA,OAAO,EAAE,CAAC;AACV,wBAAA,SAAS,EAAE,kCAAkC;AAC9C,qBAAA,EACD,OAAO,EAAE;AACP,wBAAA,OAAO,EAAE,CAAC;AACV,wBAAA,SAAS,EAAE,kCAAkC;AAC9C,qBAAA,EACD,UAAU,EAAE;AACV,wBAAA,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC1B,wBAAA,SAAS,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;qBAC7B,EACD,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,gCAAgC,EAAE,KAC7D,KAAK,EACT,SAAS,EAAE,IAAI,CACb,qGAAqG,EACrG,sFAAsF,EACtF,SAAS,CACV,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAClD,mBAAmB,EAAE,mBAAmB,EAAA,QAAA,EAAA,CAEvC,KAAK,KACJC,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAA,QAAA,EACvDA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAG,KAAK,EAAA,CAAQ,EAAA,CAC1E,CACf,EACA,QAAQ,CAAA,EAAA,CACE,CACd,EAAA,CACe,EACjB,IAAI,KACHA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,iIAAiI,EAC3I,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CAAA,EAAA,CACG;AAEV;;;;"}

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

@@ -29,7 +29,7 @@ const Select = ({ children, active, width = 'fit-content', size = sizes.MEDIUM,
             input.dispatchEvent(new Event('change', { bubbles: true }));
         }
     };
-    return (jsxs(Fragment, { children: [jsxs("div", { className: clsx('ape:bg-white3 ape:rounded-normal ape:cursor-pointer ape:h-fit ape:relative', className), style: { width }, onClick: handleClick, children: [jsxs("div", { className: "ape:flex ape:items-center ape:justify-between ape:w-full ape:overflow-hidden", style: { padding: extraPaddingPx[size], paddingRight: trailingPaddingPx[size], columnGap: '10px' }, children: [label ? (jsx("div", { children: label })) : (React.Children.map(children, (child) => {
+    return (jsxs(Fragment, { children: [jsxs("div", { className: clsx('ape:bg-white3 ape:rounded-normal ape:cursor-pointer ape:h-fit ape:relative ape:shadow-[rgba(0,0,0,0.16)_0px_1px_4px]', className), style: { width }, onClick: handleClick, children: [jsxs("div", { className: "ape:flex ape:items-center ape:justify-between ape:w-full ape:overflow-hidden", style: { padding: extraPaddingPx[size], paddingRight: trailingPaddingPx[size], columnGap: '10px' }, children: [label ? (jsx("div", { children: label })) : (React.Children.map(children, (child) => {
                                 if (child?.props?.value !== active) {
                                     return null;
                                 }
@@ -37,7 +37,12 @@ const Select = ({ children, active, width = 'fit-content', size = sizes.MEDIUM,
                                     ...child?.props,
                                     active: true,
                                 });
-                            })), jsx("div", { className: "ape:flex ape:min-w-[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 }, className: "ape:absolute ape:z-10 ape:bg-white2 ape:rounded-normal ape:cursor-pointer ape:min-w-full ape:w-max ape:overflow-hidden ape:shadow-[rgba(0,0,0,0.16)_0px_1px_4px]", style: {
+                            })), jsx("div", { className: "ape:flex ape:min-w-[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 }, 
+                            // The comma inside `rgba(0,0,0,0.16)` breaks Tailwind's arbitrary-value
+                            // candidate scanning (it never generated any CSS for this class at all —
+                            // confirmed via the compiled output). Comma-free modern CSS color syntax
+                            // (space-separated rgb + slash-alpha) is required here instead.
+                            className: "ape:absolute ape:z-10 ape:bg-white2 ape:rounded-normal ape:cursor-pointer ape:min-w-full ape:w-max ape:overflow-hidden ape:shadow-[0px_1px_4px_rgb(0_0_0/0.16)]", style: {
                                 top: position === positions.BOTTOM ? 'calc(100% + 5px)' : undefined,
                                 bottom: position === positions.TOP ? 'calc(100% + 5px)' : undefined,
                             }, children: React.Children.map(children, (child) => {

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 clsx from 'clsx'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { SelectProps, sizes, positions } from './types'\nimport Caret from '../Svg/Icons/Caret'\n\n// px values ported 1:1 from the old theme-ui space scale indices in types.ts\nconst extraPaddingPx: Record<string, string> = {\n  [sizes.XSMALL]: '4px',\n  [sizes.SMALL]: '0px',\n  [sizes.MEDIUM]: '0px',\n  [sizes.LARGE]: '0px',\n}\nconst trailingPaddingPx: Record<string, string> = {\n  [sizes.XSMALL]: '6px',\n  [sizes.SMALL]: '10px',\n  [sizes.MEDIUM]: '14px',\n  [sizes.LARGE]: '18px',\n}\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      <div\n        className={clsx('ape:bg-white3 ape:rounded-normal ape:cursor-pointer ape:h-fit ape:relative', className)}\n        style={{ width }}\n        onClick={handleClick}\n      >\n        <div\n          className=\"ape:flex ape:items-center ape:justify-between ape:w-full ape:overflow-hidden\"\n          style={{ padding: extraPaddingPx[size], paddingRight: trailingPaddingPx[size], columnGap: '10px' }}\n        >\n          {label ? (\n            <div>{label}</div>\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          <div className=\"ape:flex ape:min-w-[10px]\">\n            <Caret direction={open ? 'up' : 'down'} />\n          </div>\n        </div>\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              className=\"ape:absolute ape:z-10 ape:bg-white2 ape:rounded-normal ape:cursor-pointer ape:min-w-full ape:w-max ape:overflow-hidden ape:shadow-[rgba(0,0,0,0.16)_0px_1px_4px]\"\n              style={{\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\n          ref={inputRef}\n          value={active || ''}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n          {...props}\n          className=\"ape:bottom-0 ape:left-0 ape:absolute ape:opacity-0 ape:pointer-events-none ape:w-full\"\n        />\n      </div>\n      {open && (\n        <div\n          aria-hidden=\"true\"\n          onClick={() => setOpen(false)}\n          className=\"ape:w-[98vw] ape:h-screen ape:fixed ape:bg-transparent ape:top-0 ape:left-0\"\n        />\n      )}\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 clsx from 'clsx'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { SelectProps, sizes, positions } from './types'\nimport Caret from '../Svg/Icons/Caret'\n\n// px values ported 1:1 from the old theme-ui space scale indices in types.ts\nconst extraPaddingPx: Record<string, string> = {\n  [sizes.XSMALL]: '4px',\n  [sizes.SMALL]: '0px',\n  [sizes.MEDIUM]: '0px',\n  [sizes.LARGE]: '0px',\n}\nconst trailingPaddingPx: Record<string, string> = {\n  [sizes.XSMALL]: '6px',\n  [sizes.SMALL]: '10px',\n  [sizes.MEDIUM]: '14px',\n  [sizes.LARGE]: '18px',\n}\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      <div\n        className={clsx(\n          'ape:bg-white3 ape:rounded-normal ape:cursor-pointer ape:h-fit ape:relative ape:shadow-[rgba(0,0,0,0.16)_0px_1px_4px]',\n          className,\n        )}\n        style={{ width }}\n        onClick={handleClick}\n      >\n        <div\n          className=\"ape:flex ape:items-center ape:justify-between ape:w-full ape:overflow-hidden\"\n          style={{ padding: extraPaddingPx[size], paddingRight: trailingPaddingPx[size], columnGap: '10px' }}\n        >\n          {label ? (\n            <div>{label}</div>\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          <div className=\"ape:flex ape:min-w-[10px]\">\n            <Caret direction={open ? 'up' : 'down'} />\n          </div>\n        </div>\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              // The comma inside `rgba(0,0,0,0.16)` breaks Tailwind's arbitrary-value\n              // candidate scanning (it never generated any CSS for this class at all —\n              // confirmed via the compiled output). Comma-free modern CSS color syntax\n              // (space-separated rgb + slash-alpha) is required here instead.\n              className=\"ape:absolute ape:z-10 ape:bg-white2 ape:rounded-normal ape:cursor-pointer ape:min-w-full ape:w-max ape:overflow-hidden ape:shadow-[0px_1px_4px_rgb(0_0_0/0.16)]\"\n              style={{\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\n          ref={inputRef}\n          value={active || ''}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n          {...props}\n          className=\"ape:bottom-0 ape:left-0 ape:absolute ape:opacity-0 ape:pointer-events-none ape:w-full\"\n        />\n      </div>\n      {open && (\n        <div\n          aria-hidden=\"true\"\n          onClick={() => setOpen(false)}\n          className=\"ape:w-[98vw] ape:h-screen ape:fixed ape:bg-transparent ape:top-0 ape:left-0\"\n        />\n      )}\n    </>\n  )\n}\n\nexport default Select\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

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

@@ -1,8 +1,7 @@
-import colors from '../../../theme/colors.js';
+import { resolveColor } from '../../../utils/resolveColor.js';
 
-const resolveColor = (color) => (color && colors[color]) || color;
 const dynamicStyles = {
-    // Paired with the `.ape-icon` class (see src/styles/tailwind.css), which sets
+    // Paired with the `.ape-icon` class (see src/theme/tailwind.css), which sets
     // `fill: currentColor` on the svg and its `path`s — this just supplies the
     // per-call dynamic bits (the actual color, and any rotation) via inline style.
     generic: ({ degree = 0, color, margin }) => ({

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/uikit-sdk/Svg/styles.ts"],"sourcesContent":["import React from 'react'\nimport colors from '../../../theme/colors'\nimport { IconStyles } from './Icons/types'\n\nconst resolveColor = (color?: string) => (color && colors[color as keyof typeof colors]) || color\n\nexport const dynamicStyles = {\n  // Paired with the `.ape-icon` class (see src/styles/tailwind.css), which sets\n  // `fill: currentColor` on the svg and its `path`s — this just supplies the\n  // per-call dynamic bits (the actual color, and any rotation) via inline style.\n  generic: ({ degree = 0, color, margin }: IconStyles): React.CSSProperties => ({\n    transform: `rotate(${degree}deg)`,\n    color: resolveColor(color),\n    margin,\n  }),\n}\n"],"names":[],"mappings":";;AAIA,MAAM,YAAY,GAAG,CAAC,KAAc,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC,KAA4B,CAAC,KAAK,KAAK;AAE1F,MAAM,aAAa,GAAG;;;;AAI3B,IAAA,OAAO,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAc,MAA2B;QAC5E,SAAS,EAAE,CAAA,OAAA,EAAU,MAAM,CAAA,IAAA,CAAM;AACjC,QAAA,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC;QAC1B,MAAM;KACP,CAAC;;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/components/uikit-sdk/Svg/styles.ts"],"sourcesContent":["import React from 'react'\nimport { resolveColor } from '../../../utils/resolveColor'\nimport { IconStyles } from './Icons/types'\n\nexport const dynamicStyles = {\n  // Paired with the `.ape-icon` class (see src/theme/tailwind.css), which sets\n  // `fill: currentColor` on the svg and its `path`s — this just supplies the\n  // per-call dynamic bits (the actual color, and any rotation) via inline style.\n  generic: ({ degree = 0, color, margin }: IconStyles): React.CSSProperties => ({\n    transform: `rotate(${degree}deg)`,\n    color: resolveColor(color),\n    margin,\n  }),\n}\n"],"names":[],"mappings":";;AAIO,MAAM,aAAa,GAAG;;;;AAI3B,IAAA,OAAO,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAc,MAA2B;QAC5E,SAAS,EAAE,CAAA,OAAA,EAAU,MAAM,CAAA,IAAA,CAAM;AACjC,QAAA,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC;QAC1B,MAAM;KACP,CAAC;;;;;"}

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

@@ -1,3 +1,3 @@
 import { TextProps } from './types';
-declare const Text: ({ variant, weight, size, children, color, className, style, ...props }: TextProps | any) => import("react/jsx-runtime").JSX.Element;
+declare const Text: ({ variant, weight, size, children, color, className, style, as: Component, ...props }: TextProps | any) => import("react/jsx-runtime").JSX.Element;
 export default Text;

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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import colors from '../../../theme/colors.js';
+import { resolveColor } from '../../../utils/resolveColor.js';
 import { variants } from './types.js';
 
 const variantClasses = {
@@ -14,7 +14,6 @@ const namedWeights = {
     normal: 600,
     bold: 700,
 };
-const resolveColor = (color) => (color && colors[color]) || color;
 const Text = ({ variant = variants.NORMAL, 
 // theme-ui's default was `weight = variants.NORMAL` too (i.e. 'md') — an
 // invalid fontWeight key that theme-ui's scale lookup silently dropped,
@@ -22,9 +21,9 @@ const Text = ({ variant = variants.NORMAL,
 // pass an explicit weight. Defaulting to `undefined` here reproduces that
 // instead of forcibly resolving it to 600, which was making text bolder
 // than intended almost everywhere Text is used without a `weight` prop.
-weight, size, children, color = 'text', className, style, ...props }) => {
+weight, size, children, color = 'text', className, style, as: Component = 'p', ...props }) => {
     const fontWeight = typeof weight === 'number' ? weight : weight ? namedWeights[weight] : undefined;
-    return (jsx("p", { ...props, className: clsx(variantClasses[variant], className), style: {
+    return (jsx(Component, { ...props, className: clsx(variantClasses[variant], className), style: {
             color: resolveColor(color),
             ...(fontWeight !== undefined ? { fontWeight } : {}),
             ...(size ? { fontSize: size } : {}),

package/dist/components/uikit-sdk/Text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Text/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport colors from '../../../theme/colors'\nimport { TextProps, variants } from './types'\n\nconst variantClasses: Record<string, string> = {\n  [variants.SMALL]: 'ape:text-[14px] ape:leading-[18px]',\n  [variants.NORMAL]: 'ape:text-[18px] ape:leading-[24px]',\n  [variants.LARGE]: 'ape:text-[24px] ape:leading-[33px]',\n  [variants.LINK]: 'ape-text-link',\n}\n\nconst namedWeights: Record<string, number> = {\n  light: 400,\n  normal: 600,\n  bold: 700,\n}\n\nconst resolveColor = (color?: string) => (color && colors[color as keyof typeof colors]) || color\n\nconst Text = ({\n  variant = variants.NORMAL,\n  // theme-ui's default was `weight = variants.NORMAL` too (i.e. 'md') — an\n  // invalid fontWeight key that theme-ui's scale lookup silently dropped,\n  // leaving the browser default (~400) in effect for every Text that didn't\n  // pass an explicit weight. Defaulting to `undefined` here reproduces that\n  // instead of forcibly resolving it to 600, which was making text bolder\n  // than intended almost everywhere Text is used without a `weight` prop.\n  weight,\n  size,\n  children,\n  color = 'text',\n  className,\n  style,\n  ...props\n}: TextProps | any) => {\n  const fontWeight = typeof weight === 'number' ? weight : weight ? namedWeights[weight] : undefined\n\n  return (\n    <p\n      {...props}\n      className={clsx(variantClasses[variant], className)}\n      style={{\n        color: resolveColor(color),\n        ...(fontWeight !== undefined ? { fontWeight } : {}),\n        ...(size ? { fontSize: size } : {}),\n        ...style,\n      }}\n    >\n      {children}\n    </p>\n  )\n}\n\nexport default Text\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,cAAc,GAA2B;AAC7C,IAAA,CAAC,QAAQ,CAAC,KAAK,GAAG,oCAAoC;AACtD,IAAA,CAAC,QAAQ,CAAC,MAAM,GAAG,oCAAoC;AACvD,IAAA,CAAC,QAAQ,CAAC,KAAK,GAAG,oCAAoC;AACtD,IAAA,CAAC,QAAQ,CAAC,IAAI,GAAG,eAAe;CACjC;AAED,MAAM,YAAY,GAA2B;AAC3C,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,IAAI,EAAE,GAAG;CACV;AAED,MAAM,YAAY,GAAG,CAAC,KAAc,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC,KAA4B,CAAC,KAAK,KAAK;AAEjG,MAAM,IAAI,GAAG,CAAC,EACZ,OAAO,GAAG,QAAQ,CAAC,MAAM;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACQ,KAAI;IACpB,MAAM,UAAU,GAAG,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC,MAAM,CAAC,GAAG,SAAS;AAElG,IAAA,QACEA,GAAA,CAAA,GAAA,EAAA,EAAA,GACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,EACnD,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC;AAC1B,YAAA,IAAI,UAAU,KAAK,SAAS,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC;AACnD,YAAA,IAAI,IAAI,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;AACnC,YAAA,GAAG,KAAK;SACT,EAAA,QAAA,EAEA,QAAQ,EAAA,CACP;AAER;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/Text/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { resolveColor } from '../../../utils/resolveColor'\nimport { TextProps, variants } from './types'\n\nconst variantClasses: Record<string, string> = {\n  [variants.SMALL]: 'ape:text-[14px] ape:leading-[18px]',\n  [variants.NORMAL]: 'ape:text-[18px] ape:leading-[24px]',\n  [variants.LARGE]: 'ape:text-[24px] ape:leading-[33px]',\n  [variants.LINK]: 'ape-text-link',\n}\n\nconst namedWeights: Record<string, number> = {\n  light: 400,\n  normal: 600,\n  bold: 700,\n}\n\nconst Text = ({\n  variant = variants.NORMAL,\n  // theme-ui's default was `weight = variants.NORMAL` too (i.e. 'md') — an\n  // invalid fontWeight key that theme-ui's scale lookup silently dropped,\n  // leaving the browser default (~400) in effect for every Text that didn't\n  // pass an explicit weight. Defaulting to `undefined` here reproduces that\n  // instead of forcibly resolving it to 600, which was making text bolder\n  // than intended almost everywhere Text is used without a `weight` prop.\n  weight,\n  size,\n  children,\n  color = 'text',\n  className,\n  style,\n  as: Component = 'p',\n  ...props\n}: TextProps | any) => {\n  const fontWeight = typeof weight === 'number' ? weight : weight ? namedWeights[weight] : undefined\n\n  return (\n    <Component\n      {...props}\n      className={clsx(variantClasses[variant], className)}\n      style={{\n        color: resolveColor(color),\n        ...(fontWeight !== undefined ? { fontWeight } : {}),\n        ...(size ? { fontSize: size } : {}),\n        ...style,\n      }}\n    >\n      {children}\n    </Component>\n  )\n}\n\nexport default Text\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,cAAc,GAA2B;AAC7C,IAAA,CAAC,QAAQ,CAAC,KAAK,GAAG,oCAAoC;AACtD,IAAA,CAAC,QAAQ,CAAC,MAAM,GAAG,oCAAoC;AACvD,IAAA,CAAC,QAAQ,CAAC,KAAK,GAAG,oCAAoC;AACtD,IAAA,CAAC,QAAQ,CAAC,IAAI,GAAG,eAAe;CACjC;AAED,MAAM,YAAY,GAA2B;AAC3C,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,IAAI,EAAE,GAAG;CACV;AAED,MAAM,IAAI,GAAG,CAAC,EACZ,OAAO,GAAG,QAAQ,CAAC,MAAM;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,SAAS,EACT,KAAK,EACL,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,GAAG,KAAK,EACQ,KAAI;IACpB,MAAM,UAAU,GAAG,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC,MAAM,CAAC,GAAG,SAAS;AAElG,IAAA,QACEA,GAAA,CAAC,SAAS,OACJ,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,EACnD,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC;AAC1B,YAAA,IAAI,UAAU,KAAK,SAAS,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC;AACnD,YAAA,IAAI,IAAI,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;AACnC,YAAA,GAAG,KAAK;SACT,EAAA,QAAA,EAEA,QAAQ,EAAA,CACC;AAEhB;;;;"}

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

@@ -18,6 +18,7 @@ export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
     weight?: weightProps;
     color?: string;
     size?: sizeProps;
+    as?: React.ElementType;
     [key: string]: any;
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/Text/types.ts"],"sourcesContent":["import type React from 'react'\n\nexport enum variants {\n  SMALL = 'sm',\n  NORMAL = 'md',\n  LARGE = 'lg',\n  LINK = 'link',\n}\n\nenum weights {\n  LIGHT = 'light',\n  NORMAL = 'normal',\n  BOLD = 'bold',\n}\n\ntype variantProps = `${variants}`\ntype weightProps = `${weights}` | number\ntype sizeProps = string\n\nexport interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  variant?: variantProps\n  weight?: weightProps\n  color?: string\n  size?: sizeProps\n  [key: string]: any\n}\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,QAAQ,EAAA;AAClB,IAAA,QAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACZ,IAAA,QAAA,CAAA,QAAA,CAAA,GAAA,IAAa;AACb,IAAA,QAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACZ,IAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EALW,QAAQ,KAAR,QAAQ,GAAA,EAAA,CAAA,CAAA;AAOpB,IAAK,OAIJ;AAJD,CAAA,UAAK,OAAO,EAAA;AACV,IAAA,OAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,OAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,OAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAJI,OAAO,KAAP,OAAO,GAAA,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/uikit-sdk/Text/types.ts"],"sourcesContent":["import type React from 'react'\n\nexport enum variants {\n  SMALL = 'sm',\n  NORMAL = 'md',\n  LARGE = 'lg',\n  LINK = 'link',\n}\n\nenum weights {\n  LIGHT = 'light',\n  NORMAL = 'normal',\n  BOLD = 'bold',\n}\n\ntype variantProps = `${variants}`\ntype weightProps = `${weights}` | number\ntype sizeProps = string\n\nexport interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  variant?: variantProps\n  weight?: weightProps\n  color?: string\n  size?: sizeProps\n  // Defaults to 'p'. Pass e.g. as=\"div\" when the children may contain block-level\n  // content (such as rich/arbitrary HTML from SafeHTMLComponent) — a <p> can't\n  // legally contain block elements, which causes React hydration errors.\n  as?: React.ElementType\n  [key: string]: any\n}\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,QAAQ,EAAA;AAClB,IAAA,QAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACZ,IAAA,QAAA,CAAA,QAAA,CAAA,GAAA,IAAa;AACb,IAAA,QAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACZ,IAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EALW,QAAQ,KAAR,QAAQ,GAAA,EAAA,CAAA,CAAA;AAOpB,IAAK,OAIJ;AAJD,CAAA,UAAK,OAAO,EAAA;AACV,IAAA,OAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,OAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,OAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EAJI,OAAO,KAAP,OAAO,GAAA,EAAA,CAAA,CAAA;;;;"}

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

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import clsx from 'clsx';
 import { placements } from './types.js';
 
@@ -19,26 +20,21 @@ const placementArrowClass = {
     [placements.LEFT]: 'ape-tooltip-left',
 };
 const TooltipBubble = ({ width, placement = placements.BOTTOMRIGHT, body, backgroundColor, hideTooltip, children, transformTip, className, ...props }) => {
-    const handleClick = (event) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleTriggerClick = (event) => {
         event.stopPropagation();
+        if (!hideTooltip)
+            setIsOpen((prev) => !prev);
     };
-    return (jsxs("div", { className: "ape:relative ape:flex ape:group/tooltip", onClick: handleClick, children: [jsx("div", { 
-                // Visibility is gated here, not on the innermost bubble div below —
-                // some callers (e.g. BonusComponent) also set their own `display` on
-                // the bubble directly, which would otherwise fight this for control.
-                // Keeping the two on separate elements means a stray caller override
-                // can only ever apply to an already-hidden ancestor.
-                // Named group (`group/tooltip`) is required: plain `group`/`group-hover`
-                // is unscoped in Tailwind — it fires on ANY hovered ancestor with the
-                // `group` class, not just the nearest one. BondRow.tsx (and others)
-                // put their own `ape:group` on the row for unrelated hover effects, so
-                // an unnamed group here made every tooltip in a row appear at once
-                // when hovering anywhere on the row.
-                className: clsx('ape:absolute', hideTooltip ? 'ape:hidden' : 'ape:hidden ape:group-hover/tooltip:block'), style: placementStyles[placement] || {}, children: jsx("div", { ...props, className: clsx('ape-tooltip-bubble', placementArrowClass[placement], className), style: {
+    const handleBackdropClick = (event) => {
+        event.stopPropagation();
+        setIsOpen(false);
+    };
+    return (jsxs("div", { className: "ape:relative ape:flex ape:group/tooltip", children: [isOpen && jsx("div", { className: "ape:fixed ape:inset-0 ape:z-[100]", onClick: handleBackdropClick }), jsx("div", { className: clsx('ape:absolute ape:hidden', !hideTooltip && 'ape:group-hover/tooltip:block', isOpen && !hideTooltip && 'ape:block!'), style: placementStyles[placement] || {}, children: jsx("div", { ...props, className: clsx('ape-tooltip-bubble', placementArrowClass[placement], className), style: {
                         width,
                         transform: transformTip,
                         ...(backgroundColor ? { '--ape-tooltip-bg': backgroundColor } : {}),
-                    }, children: body }) }), children] }));
+                    }, children: body }) }), jsx("div", { className: "ape:select-none", onClick: handleTriggerClick, children: children })] }));
 };
 
 export { TooltipBubble as default };

package/dist/components/uikit-sdk/TooltipBubble/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/TooltipBubble/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { TooltipProps, placements } from './types'\n\nconst placementStyles: Record<string, React.CSSProperties> = {\n  [placements.BOTTOMLEFT]: { top: '100%', left: 0, marginTop: '-3px' },\n  [placements.BOTTOMRIGHT]: { top: '100%', right: 0, marginTop: '-3px' },\n  [placements.TOPLEFT]: { bottom: 'calc(100% + 15px)', left: 0 },\n  [placements.TOPRIGHT]: { bottom: 'calc(100% + 15px)', right: 0 },\n  [placements.ONLYCONTAINERRIGHT]: { top: 'calc(100% + 15px)', right: 0 },\n  [placements.LEFT]: { left: 'calc(100% + 15px)', right: 0 },\n}\n\nconst placementArrowClass: Record<string, string> = {\n  [placements.BOTTOMLEFT]: 'ape-tooltip-bottom-left',\n  [placements.BOTTOMRIGHT]: 'ape-tooltip-bottom-right',\n  [placements.TOPLEFT]: 'ape-tooltip-top-left',\n  [placements.TOPRIGHT]: 'ape-tooltip-top-right',\n  [placements.ONLYCONTAINERRIGHT]: 'ape-tooltip-only-container-right',\n  [placements.LEFT]: 'ape-tooltip-left',\n}\n\nconst TooltipBubble: React.FC<TooltipProps> = ({\n  width,\n  placement = placements.BOTTOMRIGHT,\n  body,\n  backgroundColor,\n  hideTooltip,\n  children,\n  transformTip,\n  className,\n  ...props\n}) => {\n  const handleClick = (event: React.MouseEvent) => {\n    event.stopPropagation()\n  }\n\n  return (\n    <div className=\"ape:relative ape:flex ape:group/tooltip\" onClick={handleClick}>\n      <div\n        // Visibility is gated here, not on the innermost bubble div below —\n        // some callers (e.g. BonusComponent) also set their own `display` on\n        // the bubble directly, which would otherwise fight this for control.\n        // Keeping the two on separate elements means a stray caller override\n        // can only ever apply to an already-hidden ancestor.\n        // Named group (`group/tooltip`) is required: plain `group`/`group-hover`\n        // is unscoped in Tailwind — it fires on ANY hovered ancestor with the\n        // `group` class, not just the nearest one. BondRow.tsx (and others)\n        // put their own `ape:group` on the row for unrelated hover effects, so\n        // an unnamed group here made every tooltip in a row appear at once\n        // when hovering anywhere on the row.\n        className={clsx('ape:absolute', hideTooltip ? 'ape:hidden' : 'ape:hidden ape:group-hover/tooltip:block')}\n        style={placementStyles[placement] || {}}\n      >\n        <div\n          {...props}\n          className={clsx('ape-tooltip-bubble', placementArrowClass[placement], className)}\n          style={{\n            width,\n            transform: transformTip,\n            ...(backgroundColor ? ({ '--ape-tooltip-bg': backgroundColor } as React.CSSProperties) : {}),\n          }}\n        >\n          {body}\n        </div>\n      </div>\n      {children}\n    </div>\n  )\n}\n\nexport default TooltipBubble\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAIA,MAAM,eAAe,GAAwC;AAC3D,IAAA,CAAC,UAAU,CAAC,UAAU,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;AACpE,IAAA,CAAC,UAAU,CAAC,WAAW,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;AACtE,IAAA,CAAC,UAAU,CAAC,OAAO,GAAG,EAAE,MAAM,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,EAAE;AAC9D,IAAA,CAAC,UAAU,CAAC,QAAQ,GAAG,EAAE,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,CAAC,EAAE;AAChE,IAAA,CAAC,UAAU,CAAC,kBAAkB,GAAG,EAAE,GAAG,EAAE,mBAAmB,EAAE,KAAK,EAAE,CAAC,EAAE;AACvE,IAAA,CAAC,UAAU,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,CAAC,EAAE;CAC3D;AAED,MAAM,mBAAmB,GAA2B;AAClD,IAAA,CAAC,UAAU,CAAC,UAAU,GAAG,yBAAyB;AAClD,IAAA,CAAC,UAAU,CAAC,WAAW,GAAG,0BAA0B;AACpD,IAAA,CAAC,UAAU,CAAC,OAAO,GAAG,sBAAsB;AAC5C,IAAA,CAAC,UAAU,CAAC,QAAQ,GAAG,uBAAuB;AAC9C,IAAA,CAAC,UAAU,CAAC,kBAAkB,GAAG,kCAAkC;AACnE,IAAA,CAAC,UAAU,CAAC,IAAI,GAAG,kBAAkB;CACtC;AAED,MAAM,aAAa,GAA2B,CAAC,EAC7C,KAAK,EACL,SAAS,GAAG,UAAU,CAAC,WAAW,EAClC,IAAI,EACJ,eAAe,EACf,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,WAAW,GAAG,CAAC,KAAuB,KAAI;QAC9C,KAAK,CAAC,eAAe,EAAE;AACzB,IAAA,CAAC;IAED,QACEA,cAAK,SAAS,EAAC,yCAAyC,EAAC,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,CAC3EC,GAAA,CAAA,KAAA,EAAA;;;;;;;;;;;;AAYE,gBAAA,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,YAAY,GAAG,0CAA0C,CAAC,EACxG,KAAK,EAAE,eAAe,CAAC,SAAS,CAAC,IAAI,EAAE,YAEvCA,GAAA,CAAA,KAAA,EAAA,EAAA,GACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,EAChF,KAAK,EAAE;wBACL,KAAK;AACL,wBAAA,SAAS,EAAE,YAAY;AACvB,wBAAA,IAAI,eAAe,GAAI,EAAE,kBAAkB,EAAE,eAAe,EAA0B,GAAG,EAAE,CAAC;AAC7F,qBAAA,EAAA,QAAA,EAEA,IAAI,EAAA,CACD,EAAA,CACF,EACL,QAAQ,CAAA,EAAA,CACL;AAEV;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/uikit-sdk/TooltipBubble/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport clsx from 'clsx'\nimport { TooltipProps, placements } from './types'\n\nconst placementStyles: Record<string, React.CSSProperties> = {\n  [placements.BOTTOMLEFT]: { top: '100%', left: 0, marginTop: '-3px' },\n  [placements.BOTTOMRIGHT]: { top: '100%', right: 0, marginTop: '-3px' },\n  [placements.TOPLEFT]: { bottom: 'calc(100% + 15px)', left: 0 },\n  [placements.TOPRIGHT]: { bottom: 'calc(100% + 15px)', right: 0 },\n  [placements.ONLYCONTAINERRIGHT]: { top: 'calc(100% + 15px)', right: 0 },\n  [placements.LEFT]: { left: 'calc(100% + 15px)', right: 0 },\n}\n\nconst placementArrowClass: Record<string, string> = {\n  [placements.BOTTOMLEFT]: 'ape-tooltip-bottom-left',\n  [placements.BOTTOMRIGHT]: 'ape-tooltip-bottom-right',\n  [placements.TOPLEFT]: 'ape-tooltip-top-left',\n  [placements.TOPRIGHT]: 'ape-tooltip-top-right',\n  [placements.ONLYCONTAINERRIGHT]: 'ape-tooltip-only-container-right',\n  [placements.LEFT]: 'ape-tooltip-left',\n}\n\nconst TooltipBubble: React.FC<TooltipProps> = ({\n  width,\n  placement = placements.BOTTOMRIGHT,\n  body,\n  backgroundColor,\n  hideTooltip,\n  children,\n  transformTip,\n  className,\n  ...props\n}) => {\n  const [isOpen, setIsOpen] = useState(false)\n\n  const handleTriggerClick = (event: React.MouseEvent) => {\n    event.stopPropagation()\n    if (!hideTooltip) setIsOpen((prev) => !prev)\n  }\n\n  const handleBackdropClick = (event: React.MouseEvent) => {\n    event.stopPropagation()\n    setIsOpen(false)\n  }\n\n  return (\n    <div className=\"ape:relative ape:flex ape:group/tooltip\">\n      {isOpen && <div className=\"ape:fixed ape:inset-0 ape:z-[100]\" onClick={handleBackdropClick} />}\n      <div\n        className={clsx(\n          'ape:absolute ape:hidden',\n          !hideTooltip && 'ape:group-hover/tooltip:block',\n          isOpen && !hideTooltip && 'ape:block!',\n        )}\n        style={placementStyles[placement] || {}}\n      >\n        <div\n          {...props}\n          className={clsx('ape-tooltip-bubble', placementArrowClass[placement], className)}\n          style={{\n            width,\n            transform: transformTip,\n            ...(backgroundColor ? ({ '--ape-tooltip-bg': backgroundColor } as React.CSSProperties) : {}),\n          }}\n        >\n          {body}\n        </div>\n      </div>\n      <div className=\"ape:select-none\" onClick={handleTriggerClick}>\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport default TooltipBubble\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAIA,MAAM,eAAe,GAAwC;AAC3D,IAAA,CAAC,UAAU,CAAC,UAAU,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;AACpE,IAAA,CAAC,UAAU,CAAC,WAAW,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;AACtE,IAAA,CAAC,UAAU,CAAC,OAAO,GAAG,EAAE,MAAM,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,EAAE;AAC9D,IAAA,CAAC,UAAU,CAAC,QAAQ,GAAG,EAAE,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,CAAC,EAAE;AAChE,IAAA,CAAC,UAAU,CAAC,kBAAkB,GAAG,EAAE,GAAG,EAAE,mBAAmB,EAAE,KAAK,EAAE,CAAC,EAAE;AACvE,IAAA,CAAC,UAAU,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,CAAC,EAAE;CAC3D;AAED,MAAM,mBAAmB,GAA2B;AAClD,IAAA,CAAC,UAAU,CAAC,UAAU,GAAG,yBAAyB;AAClD,IAAA,CAAC,UAAU,CAAC,WAAW,GAAG,0BAA0B;AACpD,IAAA,CAAC,UAAU,CAAC,OAAO,GAAG,sBAAsB;AAC5C,IAAA,CAAC,UAAU,CAAC,QAAQ,GAAG,uBAAuB;AAC9C,IAAA,CAAC,UAAU,CAAC,kBAAkB,GAAG,kCAAkC;AACnE,IAAA,CAAC,UAAU,CAAC,IAAI,GAAG,kBAAkB;CACtC;AAED,MAAM,aAAa,GAA2B,CAAC,EAC7C,KAAK,EACL,SAAS,GAAG,UAAU,CAAC,WAAW,EAClC,IAAI,EACJ,eAAe,EACf,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,KAAI;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE3C,IAAA,MAAM,kBAAkB,GAAG,CAAC,KAAuB,KAAI;QACrD,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,WAAW;YAAE,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;AAC9C,IAAA,CAAC;AAED,IAAA,MAAM,mBAAmB,GAAG,CAAC,KAAuB,KAAI;QACtD,KAAK,CAAC,eAAe,EAAE;QACvB,SAAS,CAAC,KAAK,CAAC;AAClB,IAAA,CAAC;AAED,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,CACrD,MAAM,IAAIC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAC,OAAO,EAAE,mBAAmB,EAAA,CAAI,EAC9FA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CACb,yBAAyB,EACzB,CAAC,WAAW,IAAI,+BAA+B,EAC/C,MAAM,IAAI,CAAC,WAAW,IAAI,YAAY,CACvC,EACD,KAAK,EAAE,eAAe,CAAC,SAAS,CAAC,IAAI,EAAE,YAEvCA,GAAA,CAAA,KAAA,EAAA,EAAA,GACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,EAChF,KAAK,EAAE;wBACL,KAAK;AACL,wBAAA,SAAS,EAAE,YAAY;AACvB,wBAAA,IAAI,eAAe,GAAI,EAAE,kBAAkB,EAAE,eAAe,EAA0B,GAAG,EAAE,CAAC;AAC7F,qBAAA,EAAA,QAAA,EAEA,IAAI,EAAA,CACD,EAAA,CACF,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,kBAAkB,EAAA,QAAA,EACzD,QAAQ,EAAA,CACL,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/config/constants/variables.d.ts

@@ -7,4 +7,3 @@ export declare const STRAPI_URL = "https://strapi-api.ape.bond";
 export declare const SOUL_ZAP_API = "https://api.soulsolidity.com/zap";
 export declare const PRICE_API_URL = "https://price-api.ape.bond";
 export declare const APEBOND = "https://ape.bond";
-export declare const tierOptimizerUIEnabled = true;

package/dist/config/constants/variables.js

@@ -44,7 +44,6 @@ const STRAPI_URL = `https://strapi-api.ape.bond`;
 const SOUL_ZAP_API = `https://api.soulsolidity.com/zap`;
 const PRICE_API_URL = `https://price-api.ape.bond`;
 const APEBOND = `https://ape.bond`;
-const tierOptimizerUIEnabled = true;
 
-export { APEBOND, LifiSupported, PRICE_API_URL, SOUL_ZAP_API, STRAPI_URL, tierOptimizerUIEnabled, zapSupported };
+export { APEBOND, LifiSupported, PRICE_API_URL, SOUL_ZAP_API, STRAPI_URL, zapSupported };
 //# sourceMappingURL=variables.js.map

package/dist/config/constants/variables.js.map

@@ -1 +1 @@
-{"version":3,"file":"variables.js","sources":["../../../src/config/constants/variables.ts"],"sourcesContent":["import { ChainId } from '@ape.swap/apeswap-lists'\n\nexport const LifiSupported = [\n  ChainId.MAINNET,\n  ChainId.MATIC,\n  ChainId.BSC,\n  ChainId.BASE,\n  ChainId.ARBITRUM,\n  ChainId.HYPEREVM,\n  ChainId.ROBINHOOD,\n  ChainId.LINEA,\n  ChainId.AVAX,\n  ChainId.BLAST,\n  ChainId.SONIC,\n  ChainId.BERACHAIN,\n  ChainId.UNICHAIN,\n  ChainId.MONAD,\n  ChainId.KATANA,\n  ChainId.SOL,\n]\n\nexport const zapSupported = [\n  ChainId.MAINNET,\n  ChainId.MATIC,\n  ChainId.BSC,\n  ChainId.BASE,\n  ChainId.ARBITRUM,\n  ChainId.HYPEREVM,\n  ChainId.ROBINHOOD,\n  //\n  ChainId.SOL,\n  ChainId.APTOS,\n  ChainId.SUI,\n  //\n  // Chains below this point have not been re-deployed yet\n  //\n  // ChainId.LINEA,\n  // ChainId.AVAX,\n  // ChainId.BLAST,\n  // ChainId.BERACHAIN,\n  // ChainId.SONIC,\n  // ChainId.KATANA,\n] as const\n\n/** Union of all chain IDs where zap is supported. Derived from `zapSupported`. */\nexport type ZapSupportedChainId = (typeof zapSupported)[number]\n\nexport const STRAPI_URL = `https://strapi-api.ape.bond`\nexport const SOUL_ZAP_API = `https://api.soulsolidity.com/zap`\nexport const PRICE_API_URL = `https://price-api.ape.bond`\nexport const APEBOND = `https://ape.bond`\n\nexport const tierOptimizerUIEnabled = true\n"],"names":[],"mappings":";;AAEO,MAAM,aAAa,GAAG;AAC3B,IAAA,OAAO,CAAC,OAAO;AACf,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,GAAG;AACX,IAAA,OAAO,CAAC,IAAI;AACZ,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,SAAS;AACjB,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,IAAI;AACZ,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,SAAS;AACjB,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,MAAM;AACd,IAAA,OAAO,CAAC,GAAG;;AAGN,MAAM,YAAY,GAAG;AAC1B,IAAA,OAAO,CAAC,OAAO;AACf,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,GAAG;AACX,IAAA,OAAO,CAAC,IAAI;AACZ,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,SAAS;;AAEjB,IAAA,OAAO,CAAC,GAAG;AACX,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,GAAG;;;;;;;;;;;AAeN,MAAM,UAAU,GAAG;AACnB,MAAM,YAAY,GAAG;AACrB,MAAM,aAAa,GAAG;AACtB,MAAM,OAAO,GAAG;AAEhB,MAAM,sBAAsB,GAAG;;;;"}
+{"version":3,"file":"variables.js","sources":["../../../src/config/constants/variables.ts"],"sourcesContent":["import { ChainId } from '@ape.swap/apeswap-lists'\n\nexport const LifiSupported = [\n  ChainId.MAINNET,\n  ChainId.MATIC,\n  ChainId.BSC,\n  ChainId.BASE,\n  ChainId.ARBITRUM,\n  ChainId.HYPEREVM,\n  ChainId.ROBINHOOD,\n  ChainId.LINEA,\n  ChainId.AVAX,\n  ChainId.BLAST,\n  ChainId.SONIC,\n  ChainId.BERACHAIN,\n  ChainId.UNICHAIN,\n  ChainId.MONAD,\n  ChainId.KATANA,\n  ChainId.SOL,\n]\n\nexport const zapSupported = [\n  ChainId.MAINNET,\n  ChainId.MATIC,\n  ChainId.BSC,\n  ChainId.BASE,\n  ChainId.ARBITRUM,\n  ChainId.HYPEREVM,\n  ChainId.ROBINHOOD,\n  //\n  ChainId.SOL,\n  ChainId.APTOS,\n  ChainId.SUI,\n  //\n  // Chains below this point have not been re-deployed yet\n  //\n  // ChainId.LINEA,\n  // ChainId.AVAX,\n  // ChainId.BLAST,\n  // ChainId.BERACHAIN,\n  // ChainId.SONIC,\n  // ChainId.KATANA,\n] as const\n\n/** Union of all chain IDs where zap is supported. Derived from `zapSupported`. */\nexport type ZapSupportedChainId = (typeof zapSupported)[number]\n\nexport const STRAPI_URL = `https://strapi-api.ape.bond`\nexport const SOUL_ZAP_API = `https://api.soulsolidity.com/zap`\nexport const PRICE_API_URL = `https://price-api.ape.bond`\nexport const APEBOND = `https://ape.bond`\n"],"names":[],"mappings":";;AAEO,MAAM,aAAa,GAAG;AAC3B,IAAA,OAAO,CAAC,OAAO;AACf,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,GAAG;AACX,IAAA,OAAO,CAAC,IAAI;AACZ,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,SAAS;AACjB,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,IAAI;AACZ,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,SAAS;AACjB,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,MAAM;AACd,IAAA,OAAO,CAAC,GAAG;;AAGN,MAAM,YAAY,GAAG;AAC1B,IAAA,OAAO,CAAC,OAAO;AACf,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,GAAG;AACX,IAAA,OAAO,CAAC,IAAI;AACZ,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,QAAQ;AAChB,IAAA,OAAO,CAAC,SAAS;;AAEjB,IAAA,OAAO,CAAC,GAAG;AACX,IAAA,OAAO,CAAC,KAAK;AACb,IAAA,OAAO,CAAC,GAAG;;;;;;;;;;;AAeN,MAAM,UAAU,GAAG;AACnB,MAAM,YAAY,GAAG;AACrB,MAAM,aAAa,GAAG;AACtB,MAAM,OAAO,GAAG;;;;"}

package/dist/providers/index.d.ts

@@ -1,6 +1,16 @@
 import React from 'react';
-declare const Providers: ({ children, theme }: {
+/**
+ * This is the list of local providers that will be used internally by the SDK
+ *
+ * It is important to understand the difference between this component and the one located on the dev directory,
+ * which aims to simulate the providers required to be installed by the consumer of the SDK.
+ *
+ * Finally, it is important to note that this Providers component should NOT be used multiple times, so for instance:
+ * The components exported from the src/main.ts file are all wrapped with this Provider component. Though the FullBondsView
+ * component that imports the Bonds and YourBonds views, does NOT import the Bonds and YourBonds with providers, it imports
+ * the component directly without providers. This is important to understand.
+ */
+declare const Providers: ({ children }: {
     children: React.ReactNode;
-    theme?: any;
 }) => import("react/jsx-runtime").JSX.Element;
 export default Providers;

package/dist/providers/index.js

@@ -10,16 +10,10 @@ import Popups from '../contexts/Popups.js';
  *
  * Finally, it is important to note that this Providers component should NOT be used multiple times, so for instance:
  * The components exported from the src/main.ts file are all wrapped with this Provider component. Though the FullBondsView
- * component that imports the Bonds and YourBonds views, do NOT import the Bonds and YourBonds with providers, it imports
+ * component that imports the Bonds and YourBonds views, does NOT import the Bonds and YourBonds with providers, it imports
  * the component directly without providers. This is important to understand.
  */
-let warnedAboutTheme = false;
-const Providers = ({ children, theme }) => {
-    if (theme && process.env.NODE_ENV !== 'production' && !warnedAboutTheme) {
-        warnedAboutTheme = true;
-        console.warn('[@ape.swap/bonds-sdk] The `theme` prop is deprecated and no longer applied at runtime — ' +
-            'the SDK now ships build-time Tailwind styles. Restyle via the documented consumer-facing classnames instead.');
-    }
+const Providers = ({ children }) => {
     return (jsx("div", { className: "ape-root", children: jsx(ModalProvider, { children: jsx(Popups, { children: children }) }) }));
 };
 

package/dist/providers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/providers/index.tsx"],"sourcesContent":["import React from 'react'\nimport ModalProvider from '../contexts/ModalContext'\nimport Popups from '../contexts/Popups'\n\n/**\n * This is the list of local providers that will be used internally by the SDK\n *\n * It is important to understand the difference between this component and the one located on the dev directory,\n * which aims to simulate the providers required to be installed by the consumer of the SDK.\n *\n * Finally, it is important to note that this Providers component should NOT be used multiple times, so for instance:\n * The components exported from the src/main.ts file are all wrapped with this Provider component. Though the FullBondsView\n * component that imports the Bonds and YourBonds views, do NOT import the Bonds and YourBonds with providers, it imports\n * the component directly without providers. This is important to understand.\n */\n\nlet warnedAboutTheme = false\n\nconst Providers = ({ children, theme }: { children: React.ReactNode; theme?: any }) => {\n  if (theme && process.env.NODE_ENV !== 'production' && !warnedAboutTheme) {\n    warnedAboutTheme = true\n    console.warn(\n      '[@ape.swap/bonds-sdk] The `theme` prop is deprecated and no longer applied at runtime — ' +\n        'the SDK now ships build-time Tailwind styles. Restyle via the documented consumer-facing classnames instead.',\n    )\n  }\n\n  return (\n    <div className=\"ape-root\">\n      <ModalProvider>\n        <Popups>{children}</Popups>\n      </ModalProvider>\n    </div>\n  )\n}\n\nexport default Providers\n"],"names":["_jsx"],"mappings":";;;;AAIA;;;;;;;;;;AAUG;AAEH,IAAI,gBAAgB,GAAG,KAAK;AAE5B,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAA8C,KAAI;AACpF,IAAA,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,IAAI,CAAC,gBAAgB,EAAE;QACvE,gBAAgB,GAAG,IAAI;QACvB,OAAO,CAAC,IAAI,CACV,0FAA0F;AACxF,YAAA,8GAA8G,CACjH;IACH;AAEA,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,UAAU,YACvBA,GAAA,CAAC,aAAa,EAAA,EAAA,QAAA,EACZA,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAE,QAAQ,GAAU,EAAA,CACb,EAAA,CACZ;AAEV;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/providers/index.tsx"],"sourcesContent":["import React from 'react'\nimport ModalProvider from '../contexts/ModalContext'\nimport Popups from '../contexts/Popups'\n\n/**\n * This is the list of local providers that will be used internally by the SDK\n *\n * It is important to understand the difference between this component and the one located on the dev directory,\n * which aims to simulate the providers required to be installed by the consumer of the SDK.\n *\n * Finally, it is important to note that this Providers component should NOT be used multiple times, so for instance:\n * The components exported from the src/main.ts file are all wrapped with this Provider component. Though the FullBondsView\n * component that imports the Bonds and YourBonds views, does NOT import the Bonds and YourBonds with providers, it imports\n * the component directly without providers. This is important to understand.\n */\n\nconst Providers = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <div className=\"ape-root\">\n      <ModalProvider>\n        <Popups>{children}</Popups>\n      </ModalProvider>\n    </div>\n  )\n}\n\nexport default Providers\n"],"names":["_jsx"],"mappings":";;;;AAIA;;;;;;;;;;AAUG;AAEH,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAiC,KAAI;AAChE,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,UAAU,YACvBA,GAAA,CAAC,aAAa,EAAA,EAAA,QAAA,EACZA,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAE,QAAQ,GAAU,EAAA,CACb,EAAA,CACZ;AAEV;;;;"}