@particle-network/connectkit/dist/cjs/index.cjs.map

{
  "version": 3,
  "sources": ["../../src/types/index.ts", "../../src/utils/theme.ts", "../../src/utils/deepEqual.ts", "../../src/actions/getAccount.ts", "../../src/actions/watchAccount.ts", "../../src/hooks/useSyncExternalStoreWithTracked.ts", "../../src/hooks/useAccount.ts", "../../src/locales/index.tsx", "../../src/hooks/useLocales.ts", "../../src/hooks/useModalError.ts", "../../src/hooks/useModalState.ts", "../../src/assets/icons/EmailIcon.tsx", "../../src/assets/icons/PhoneIcon.tsx", "../../src/components/circleSpinner/styles.ts", "../../src/components/circleSpinner/index.tsx", "../../src/components/codeInput/styles.ts", "../../src/components/codeInput/index.tsx", "../../src/components/modal/styles.ts", "../../src/components/loadingSpinner/styles.ts", "../../src/components/loadingSpinner/index.tsx", "../../src/components/reSend/styles.ts", "../../src/components/reSend/index.tsx", "../../src/actions/connect.ts", "../../src/hooks/useLastConnectorId.ts", "../../src/hooks/useMutation.ts", "../../src/hooks/useConnect.ts", "../../src/actions/getConnectors.ts", "../../src/actions/watchConnectors.ts", "../../src/hooks/useConnectors.ts", "../../src/hooks/useRouter.ts", "../../src/hooks/useWalletConnectors.ts", "../../src/pages/captcha/styles.ts", "../../src/pages/captcha/index.tsx", "../../src/assets/icons/RetryIconCircle.tsx", "../../src/assets/social/discord.tsx", "../../src/assets/social/email.tsx", "../../src/assets/social/facebook.tsx", "../../src/assets/social/github.tsx", "../../src/assets/social/google.tsx", "../../src/assets/social/linkedIn.tsx", "../../src/assets/social/microsoft.tsx", "../../src/assets/social/passkey.tsx", "../../src/assets/social/phone.tsx", "../../src/assets/social/twitch.tsx", "../../src/assets/social/twitter.tsx", "../../src/components/socialLogin/Icons.tsx", "../../src/components/squircleSpinner/styles.ts", "../../src/components/squircleSpinner/index.tsx", "../../src/assets/icons/PasskeyIcon.tsx", "../../src/assets/wallets/BitKeep.tsx", "../../src/assets/wallets/Brave.tsx", "../../src/assets/wallets/Bybit.tsx", "../../src/assets/wallets/Coin98.tsx", "../../src/assets/wallets/Coinbase.tsx", "../../src/assets/wallets/Frontier.tsx", "../../src/assets/wallets/ImToken.tsx", "../../src/assets/wallets/InfinityWallet.tsx", "../../src/assets/wallets/Injected.tsx", "../../src/assets/wallets/Ledger.tsx", "../../src/assets/wallets/MetaMask.tsx", "../../src/assets/wallets/OKX.tsx", "../../src/assets/wallets/ONTO.tsx", "../../src/assets/wallets/Onekey.tsx", "../../src/assets/wallets/Phantom.tsx", "../../src/assets/wallets/Rabby.tsx", "../../src/assets/wallets/Rainbow.tsx", "../../src/assets/wallets/SafePal.tsx", "../../src/assets/wallets/Slope.tsx", "../../src/assets/wallets/Talisman.tsx", "../../src/assets/wallets/TokenPocket.tsx", "../../src/assets/wallets/Trust.tsx", "../../src/assets/wallets/WalletConnect.tsx", "../../src/assets/wallets/Zerion.tsx", "../../src/utils/index.ts", "../../src/config/wallet.tsx", "../../src/hooks/useIsMobile.ts", "../../src/hooks/useWalletConnectModal.tsx", "../../src/hooks/useWalletConnectUri.ts", "../../src/pages/connecting/styles.ts", "../../src/pages/connecting/index.tsx", "../../src/assets/icons/Forward.tsx", "../../src/assets/toggle.tsx", "../../src/hooks/useConnectWithWallet.ts", "../../src/hooks/useWalletsProps.tsx", "../../src/utils/social.ts", "../../src/components/wallets/styles.ts", "../../src/components/socialLogin/styles.ts", "../../src/components/socialLogin/index.tsx", "../../src/assets/icons/ButtonLoadingIcon.tsx", "../../src/components/button/styles.ts", "../../src/components/button/index.tsx", "../../src/components/wallets/index.tsx", "../../src/pages/connectors/index.tsx", "../../src/assets/browser/android.tsx", "../../src/assets/browser/brave.tsx", "../../src/assets/browser/chrome.tsx", "../../src/assets/browser/edge.tsx", "../../src/assets/browser/firefox.tsx", "../../src/assets/browser/ios.tsx", "../../src/assets/browser/website.tsx", "../../src/assets/browser/index.ts", "../../src/components/CustomQRCode/QRCode.tsx", "../../src/components/CustomQRCode/styles.ts", "../../src/components/CustomQRCode/index.tsx", "../../src/pages/downloadApp/styles.ts", "../../src/pages/downloadApp/index.tsx", "../../src/pages/loginPasskey/styles.ts", "../../src/pages/loginPasskey/index.tsx", "../../src/assets/icons/FaceIcon.tsx", "../../src/assets/icons/SecurityIcon.tsx", "../../src/assets/icons/WarningIcon.tsx", "../../src/pages/passkeySetup/styles.ts", "../../src/pages/passkeySetup/index.tsx", "../../src/assets/icons/CopyIcon2.tsx", "../../src/components/copyToClipboard/CopyToClipboardIcon.tsx", "../../src/components/copyToClipboard/styles.ts", "../../src/components/copyToClipboard/index.tsx", "../../src/actions/disconnect.ts", "../../src/hooks/useDisconnect.ts", "../../src/hooks/useAAPlugin.ts", "../../src/hooks/useSmartAccount.ts", "../../src/hooks/useAddress.ts", "../../src/utils/chains.ts", "../../src/pages/receive/styles.ts", "../../src/pages/receive/index.tsx", "../../src/assets/chains/eth.tsx", "../../src/assets/chains/sol.tsx", "../../src/assets/chains/index.tsx", "../../src/pages/selectChain/index.tsx", "../../src/components/divider/styles.ts", "../../src/components/divider/index.tsx", "../../src/assets/icons/ConnectArrowIcon.tsx", "../../src/components/emailLogin/styles.ts", "../../src/components/emailLogin/index.tsx", "../../src/components/passkeyButtons/index.tsx", "../../src/assets/icons/DownArrowIcon.tsx", "../../src/hooks/useClickAway.ts", "../../src/styles/themes/dark.ts", "../../src/styles/themes/light.ts", "../../src/styles/themes/index.ts", "../../src/styles/index.ts", "../../src/types/country.ts", "../../src/utils/allCountries.ts", "../../src/utils/assertString.ts", "../../src/utils/isMobilePhone.ts", "../../src/components/chainDropdown/styles.ts", "../../src/components/dropdown/index.tsx", "../../src/components/phoneLogin/styles.ts", "../../src/components/phoneLogin/index.tsx", "../../src/pages/signup/styles.ts", "../../src/pages/signup/index.tsx", "../../src/assets/icons/AccountSecurityIcon.tsx", "../../src/assets/icons/BuyIcon.tsx", "../../src/assets/icons/DisconnectIcon.tsx", "../../src/assets/icons/ErrorIcon.tsx", "../../src/assets/icons/PlusIcon.tsx", "../../src/assets/icons/ReceiveIcon.tsx", "../../src/assets/icons/WalletIcon.tsx", "../../src/assets/icons/CheckIcon.tsx", "../../src/actions/getChainId.ts", "../../src/actions/watchChainId.ts", "../../src/hooks/useChainId.ts", "../../src/hooks/useChains.ts", "../../src/actions/getConnections.ts", "../../src/actions/watchConnections.ts", "../../src/hooks/useConnections.ts", "../../src/actions/switchAccount.ts", "../../src/hooks/useSwitchAccount.ts", "../../src/actions/switchChain.ts", "../../src/hooks/useSwitchChain.ts", "../../src/hooks/useWalletConnections.tsx", "../../src/components/chainDropdown/index.tsx", "../../src/components/connectedWidget/styles.ts", "../../src/components/refreshIcon/index.tsx", "../../src/hooks/useEmbeddedWallet.ts", "../../src/hooks/useParticleAuth.ts", "../../src/actions/getClient.ts", "../../src/hooks/usePublicClient.ts", "../../src/actions/getSolanaWalletClient.ts", "../../src/actions/getConnectorClient.ts", "../../src/actions/getWalletClient.ts", "../../src/actions/mapWalletClient.ts", "../../src/context/web3Provider/index.tsx", "../../src/hooks/useWallets.ts", "../../src/pages/walletInfo/styles.ts", "../../src/pages/walletInfo/index.tsx", "../../src/assets/icons/ShareIconCircle.tsx", "../../src/assets/aa.tsx", "../../src/components/walletIcon/styles.ts", "../../src/components/walletAAIcon/index.tsx", "../../src/components/walletIcon/index.tsx", "../../src/pages/walletInfo/title.tsx", "../../src/assets/icons/ShareIcon.tsx", "../../src/pages/walletconnect/styles.ts", "../../src/pages/walletconnect/index.tsx", "../../src/pages/index.ts", "../../src/hooks/useRouteState.ts", "../../src/assets/icons/BackIcon.tsx", "../../src/assets/icons/CloseIcon.tsx", "../../src/hooks/useFocusTrap.ts", "../../src/components/focusTrap/index.tsx", "../../src/assets/powerdBy.tsx", "../../src/components/footer/styles.ts", "../../src/components/footer/index.tsx", "../../src/components/lockBody/index.tsx", "../../src/version.ts", "../../src/components/portal/index.tsx", "../../src/components/modal/index.tsx", "../../src/components/connectModal/index.tsx", "../../src/actions/filterConnectors.ts", "../../src/actions/reconnect.ts", "../../src/utils/hydrate.ts", "../../src/context/modalProvider/index.tsx", "../../src/context/index.tsx", "../../src/hooks/useAppearance.ts", "../../src/hooks/useIconColor.ts", "../../src/assets/social/apple.tsx", "../../src/index.ts", "../../src/assets/social/index.tsx", "../../src/assets/wallets/index.tsx", "../../src/assets/wallets/PlaceHolder.tsx", "../../src/components/connectButton/index.tsx", "../../src/components/connectedWidget/index.tsx", "../../src/assets/icons/MoreOptionsIcon.tsx", "../../src/components/horizontalResizeAnimation/index.tsx", "../../src/components/connectButton/styles.ts", "../../src/hooks/useModal.ts", "../../src/createConfig.ts"],
  "sourcesContent": ["export type HttpUrl = `http${string}`;\n\nexport type Mode = 'light' | 'dark' | 'auto';\n\ntype HexColor = `#${string}`;\n\ntype Unit = `${number}px` | `${number}rem`;\n\nexport type CustomTheme = {\n  // font\n  '--pcm-font-family'?: string;\n\n  // focus color, input etc.\n  '--pcm-focus-color'?: string;\n\n  // modal\n  '--pcm-overlay-background'?: string;\n  '--pcm-overlay-backdrop-filter'?: string; // default: blur(6px)\n  '--pcm-modal-box-shadow'?: string;\n  '--pcm-modal-max-height'?: string;\n\n  // border radius\n  '--pcm-rounded-sm'?: Unit; // 6px\n  '--pcm-rounded-md'?: Unit; // 12px\n  '--pcm-rounded-lg'?: Unit; // 18px\n  '--pcm-rounded-xl'?: Unit; // 24px\n  '--pcm-rounded-full'?: Unit; // 9999px\n\n  // background\n  '--pcm-body-background'?: string;\n  '--pcm-body-background-secondary'?: string;\n  '--pcm-body-background-tertiary'?: string;\n\n  // foreground: font color\n  '--pcm-body-color'?: string;\n  '--pcm-body-color-secondary'?: string;\n  '--pcm-body-color-tertiary'?: string;\n\n  // button\n  '--pcm-button-border-color'?: string;\n  '--pcm-button-font-weight'?: string;\n  '--pcm-button-hover-shadow'?: string;\n\n  // primary button\n  '--pcm-primary-button-color'?: string;\n  '--pcm-primary-button-bankground'?: string;\n  '--pcm-primary-button-hover-background'?: string; // TODO: \u53EF\u6839\u636Ebankground\u8BA1\u7B97\u51FA\u6765\uFF0C\u4E0D\u7528\u81EA\u5B9A\u4E49\uFF1F\n\n  // secondary button\n  '--pcm-secondary-button-color'?: string;\n  '--pcm-secondary-button-bankground'?: string;\n  '--pcm-secondary-button-hover-background'?: string; // TODO: \u53EF\u6839\u636Ebankground\u8BA1\u7B97\u51FA\u6765\uFF0C\u4E0D\u7528\u81EA\u5B9A\u4E49\uFF1F\n\n  // action button color\n  '--pcm-body-action-color'?: string;\n\n  // accent color\n  '--pcm-accent-color'?: string;\n\n  // error\n  '--pcm-error-color'?: HexColor;\n\n  // success\n  '--pcm-success-color'?: HexColor;\n\n  // warning\n  '--pcm-warning-color'?: HexColor;\n\n  // custom wallet lable color\n  '--pcm-wallet-lable-color'?: HexColor;\n};\n\nexport type Theme = CustomTheme;\n\nexport enum ConnectorType {\n  Email = 'email',\n  Phone = 'phone',\n  Social = 'social',\n  Wallet = 'wallet',\n  Passkey = 'passkey',\n}\n\nexport type ConnectorTypeValue = `${ConnectorType}`;\n\nexport const EmailRegExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;\n\nexport interface CloudflareOptions {\n  getContainer?: HTMLElement | (() => HTMLElement) | false;\n  theme?: 'light' | 'dark';\n  language?: string;\n}\n", "export function getSystemMode() {\n  if (typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n    return 'dark';\n  } else {\n    return 'light';\n  }\n}\n", "/** Forked from https://github.com/epoberezkin/fast-deep-equal */\n\nexport function deepEqual(a: any, b: any) {\n  if (a === b) return true;\n\n  if (a && b && typeof a === 'object' && typeof b === 'object') {\n    if (a.constructor !== b.constructor) return false;\n\n    let length: number;\n    let i: number;\n\n    if (Array.isArray(a) && Array.isArray(b)) {\n      length = a.length;\n      if (length !== b.length) return false;\n      for (i = length; i-- !== 0; ) if (!deepEqual(a[i], b[i])) return false;\n      return true;\n    }\n\n    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();\n    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();\n\n    const keys = Object.keys(a);\n    length = keys.length;\n    if (length !== Object.keys(b).length) return false;\n\n    for (i = length; i-- !== 0; ) if (!Object.prototype.hasOwnProperty.call(b, keys[i]!)) return false;\n\n    for (i = length; i-- !== 0; ) {\n      const key = keys[i];\n\n      if (key && !deepEqual(a[key], b[key])) return false;\n    }\n\n    return true;\n  }\n\n  // true if both NaN, false otherwise\n  // biome-ignore lint/suspicious/noSelfCompare: <explanation>\n  return a !== a && b !== b;\n}\n", "import type { Connector, State } from '@particle-network/connector-core';\nimport { checksumAddress, isAddress, type Address, type Chain } from 'viem';\nimport type { Config } from '../createConfig';\nimport { deepEqual } from '../utils/deepEqual';\n\nexport type GetAccountReturnType =\n  | {\n      address: string;\n      addresses: readonly [string, ...string[]];\n      chain: Chain | undefined;\n      chainId: number;\n      connector: Connector;\n      isConnected: true;\n      isConnecting: false;\n      isDisconnected: false;\n      isReconnecting: false;\n      status: 'connected';\n    }\n  | {\n      address: string | undefined;\n      addresses: readonly string[] | undefined;\n      chain: Chain | undefined;\n      chainId: number | undefined;\n      connector: Connector | undefined;\n      isConnected: boolean;\n      isConnecting: false;\n      isDisconnected: false;\n      isReconnecting: true;\n      status: 'reconnecting';\n    }\n  | {\n      address: string | undefined;\n      addresses: readonly string[] | undefined;\n      chain: Chain | undefined;\n      chainId: number | undefined;\n      connector: Connector | undefined;\n      isConnected: false;\n      isReconnecting: false;\n      isConnecting: true;\n      isDisconnected: false;\n      status: 'connecting';\n    }\n  | {\n      address: undefined;\n      addresses: undefined;\n      chain: undefined;\n      chainId: undefined;\n      connector: undefined;\n      isConnected: false;\n      isReconnecting: false;\n      isConnecting: false;\n      isDisconnected: true;\n      status: 'disconnected';\n    };\n\nlet previousAccount: GetAccountReturnType;\nlet previousState: State;\nexport function getAccount(config: Config): GetAccountReturnType {\n  const state = config.state;\n  if (deepEqual(previousState, state)) return previousAccount;\n\n  const uid = config.state.current!;\n  const connection = config.state.connections.get(uid);\n  let addresses = connection?.accounts;\n  if (addresses?.length && addresses.every((account) => isAddress(account, { strict: false }))) {\n    addresses = addresses.map((item) => checksumAddress(item as Address)) as unknown as readonly [string, ...string[]];\n  }\n  const address = addresses?.[0];\n  const chain = config.chains.find((chain) => chain.id === connection?.chainId) as GetAccountReturnType['chain'];\n  const status = config.state.status;\n\n  let result;\n\n  switch (status) {\n    case 'connected':\n      result = {\n        address: address!,\n        addresses: addresses!,\n        chain,\n        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain\n        chainId: connection?.chainId!,\n        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain\n        connector: connection?.connector!,\n        isConnected: true,\n        isConnecting: false,\n        isDisconnected: false,\n        isReconnecting: false,\n        status,\n      };\n      break;\n    case 'reconnecting':\n      result = {\n        address,\n        addresses,\n        chain,\n        chainId: connection?.chainId,\n        connector: connection?.connector,\n        isConnected: !!address,\n        isConnecting: false,\n        isDisconnected: false,\n        isReconnecting: true,\n        status,\n      };\n      break;\n    case 'connecting':\n      result = {\n        address,\n        addresses,\n        chain,\n        chainId: connection?.chainId,\n        connector: connection?.connector,\n        isConnected: false,\n        isConnecting: true,\n        isDisconnected: false,\n        isReconnecting: false,\n        status,\n      };\n      break;\n    case 'disconnected':\n      result = {\n        address: undefined,\n        addresses: undefined,\n        chain: undefined,\n        chainId: undefined,\n        connector: undefined,\n        isConnected: false,\n        isConnecting: false,\n        isDisconnected: true,\n        isReconnecting: false,\n        status,\n      };\n      break;\n  }\n  previousAccount = result;\n  return result;\n}\n", "import { type Config } from '../createConfig';\nimport { deepEqual } from '../utils/deepEqual';\nimport { getAccount, type GetAccountReturnType } from './getAccount';\n\nexport type WatchAccountParameters = {\n  onChange(account: GetAccountReturnType, prevAccount: GetAccountReturnType): void;\n};\n\nexport type WatchAccountReturnType = () => void;\n\nexport function watchAccount(config: Config, parameters: WatchAccountParameters): WatchAccountReturnType {\n  const { onChange } = parameters;\n\n  return config.subscribe(() => getAccount(config), onChange, {\n    equalityFn(a, b) {\n      const { connector: aConnector, ...aRest } = a;\n      const { connector: bConnector, ...bRest } = b;\n      return (\n        deepEqual(aRest, bRest) &&\n        // check connector separately\n        aConnector?.id === bConnector?.id &&\n        aConnector?.uid === bConnector?.uid\n      );\n    },\n  });\n}\n", "import { useRef } from 'react';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector.js';\nimport { deepEqual } from '../utils/deepEqual';\n\nconst isPlainObject = (obj: unknown) => typeof obj === 'object' && !Array.isArray(obj);\n\nexport function useSyncExternalStoreWithTracked<snapshot extends selection, selection = snapshot>(\n  subscribe: (onStoreChange: () => void) => () => void,\n  getSnapshot: () => snapshot,\n  getServerSnapshot: undefined | null | (() => snapshot) = getSnapshot,\n  isEqual: (a: selection, b: selection) => boolean = deepEqual\n) {\n  const trackedKeys = useRef<string[]>([]);\n  const result = useSyncExternalStoreWithSelector(\n    subscribe,\n    getSnapshot,\n    getServerSnapshot,\n    (x) => x,\n    (a, b) => {\n      if (isPlainObject(a) && isPlainObject(b) && trackedKeys.current.length) {\n        for (const key of trackedKeys.current) {\n          const equal = isEqual((a as { [_a: string]: any })[key], (b as { [_b: string]: any })[key]);\n          if (!equal) return false;\n        }\n        return true;\n      }\n      return isEqual(a, b);\n    }\n  );\n\n  if (isPlainObject(result)) {\n    const trackedResult = { ...result };\n    let properties = {};\n    for (const [key, value] of Object.entries(trackedResult as { [key: string]: any })) {\n      properties = {\n        ...properties,\n        [key]: {\n          configurable: false,\n          enumerable: true,\n          get: () => {\n            if (!trackedKeys.current.includes(key)) {\n              trackedKeys.current.push(key);\n            }\n            return value;\n          },\n        },\n      };\n    }\n    Object.defineProperties(trackedResult, properties);\n    return trackedResult;\n  }\n\n  return result;\n}\n", "import { getAccount, type GetAccountReturnType } from '../actions/getAccount';\nimport { watchAccount } from '../actions/watchAccount';\nimport { useContext } from '../context';\nimport { useSyncExternalStoreWithTracked } from './useSyncExternalStoreWithTracked';\n\nexport function useAccount(): GetAccountReturnType {\n  const { config } = useContext();\n\n  return useSyncExternalStoreWithTracked(\n    (onChange) => watchAccount(config, { onChange }),\n    () => getAccount(config)\n  );\n}\n", "import { default as enUS } from './en-US.json';\nimport { default as jaJP } from './ja-JP.json';\nimport { default as koKR } from './ko-KR.json';\nimport { default as zhCN } from './zh-CN.json';\nimport { default as zhTW } from './zh-TW.json';\n\ndeclare global {\n  interface String {\n    format(...values: (string | number)[]): string;\n  }\n}\n\nexport type Languages = 'en-US' | 'ja-JP' | 'zh-CN' | 'zh-TW' | 'ko-KR';\n\nexport type Translations = {\n  btnContinueWithPasskey?: string;\n  btnCreatePasskeyWallet?: string;\n  btnLoginWithPasskey?: string;\n  usePasskeyToLoginSmartAccount?: string;\n};\n\nexport type TransactionType = typeof enUS;\n\nexport type TransactionKey = keyof TransactionType;\n\nexport type Locales = {\n  'en-US'?: Partial<TransactionType>;\n  'ja-JP'?: Partial<TransactionType>;\n  'zh-CN'?: Partial<TransactionType>;\n  'zh-TW'?: Partial<TransactionType>;\n  'ko-KR'?: Partial<TransactionType>;\n};\n\nexport const getLocale = (lang: Languages): TransactionType => {\n  switch (lang) {\n    case 'ja-JP':\n      return jaJP;\n    case 'zh-CN':\n      return zhCN;\n    case 'zh-TW':\n      return zhTW;\n    case 'ko-KR':\n      return koKR;\n    default:\n      return enUS;\n  }\n};\n\nString.prototype.format = function (...values: (string | number)[]) {\n  const formatValue = this.replace(/\\{\\d+\\}/g, (match) => {\n    const index = parseInt(match.slice(1, -1), 10);\n    return values[index]?.toString() ?? match; // Use the provided value or keep the placeholder if not provided\n  });\n  return formatValue;\n};\n\nexport function formatLocale(txt: string, ...values: (string | number | React.ReactNode)[]) {\n  const nodePlacer = '<></>';\n  const nodes: React.ReactNode[] = [];\n  const formatValue = txt.replace(/\\{\\d+\\}/g, (match) => {\n    const index = parseInt(match.slice(1, -1), 10);\n    const value = values[index];\n    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || !value) {\n      return values[index]?.toString() ?? match; // Use the provided value or keep the placeholder if not provided\n    }\n    nodes.push(value);\n    return nodePlacer;\n  });\n  if (nodes.length > 0) {\n    const strs = formatValue.split(nodePlacer);\n    const elements: React.ReactNode[] = [];\n    for (let i = 0; i < strs.length; i++) {\n      elements.push(strs[i]);\n      if (nodes[i]) {\n        elements.push(nodes[i]);\n      }\n    }\n    return elements.map((item) => item);\n  }\n  return formatValue;\n}\n", "import { useMemo } from 'react';\nimport { getLocale, type TransactionType } from '../locales';\nimport { useAppearance } from './useAppearance';\n\nexport default function useLocales() {\n  const { appearance } = useAppearance();\n\n  const language = useMemo(() => {\n    return appearance?.language ?? 'en-US';\n  }, [appearance.language]);\n\n  const overrideLocales = useMemo(() => {\n    return appearance.overrideLocales;\n  }, [appearance.overrideLocales]);\n\n  const translations: TransactionType = useMemo(() => {\n    const locales = getLocale(language);\n    const overrideLanguage = overrideLocales?.[language];\n    return { ...locales, ...overrideLanguage };\n  }, [language, overrideLocales]);\n\n  if (!translations) {\n    throw new Error(`Missing translations for ${language}`);\n  }\n\n  return translations;\n}\n", "import { create } from 'zustand';\n\ntype State = {\n  error?: string;\n};\n\ntype Actions = {\n  showError: (error: string) => void;\n  hideError: () => void;\n};\n\nexport const useModalError = create<State & Actions>((set) => ({\n  showError: (value) => {\n    set({ error: value });\n  },\n  hideError: () => {\n    set({ error: undefined });\n  },\n}));\n", "import { create } from 'zustand';\n\ntype State = {\n  open: boolean;\n};\n\ntype Actions = {\n  setOpen: (value: boolean) => void;\n};\n\nexport const useModalState = create<State & Actions>((set) => ({\n  open: false,\n  setOpen: (value) => set({ open: value }),\n}));\n", "import { motion } from 'framer-motion';\nconst EmailIcon = ({ color = 'var(--pcm-accent-color)', ...props }) => (\n  <motion.svg width='61' height='61' viewBox='0 0 61 61' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>\n    <g clipPath='url(#clip0_0_22587)'>\n      <path\n        opacity='0.15'\n        d='M30.1 0C46.7238 0 60.2 13.4762 60.2 30.1C60.2 46.7238 46.7238 60.2 30.1 60.2C13.4762 60.2 0 46.7238 0 30.1C0 13.4762 13.4762 0 30.1 0V0Z'\n        fill={color}\n      />\n      <g clipPath='url(#clip1_0_22587)'>\n        <path\n          fillRule='evenodd'\n          clipRule='evenodd'\n          d='M41.9671 19.6H18.2846C16.8359 19.6 15.6573 20.7498 15.6573 22.1626V22.6978L27.1859 33.9303C27.9722 34.6944 29.0176 35.1161 30.1277 35.1161C31.2397 35.1161 32.2851 34.6944 33.0695 33.9303L44.6 22.6978V22.1626C44.6 20.7498 43.4158 19.6 41.9671 19.6ZM15.6 24.4566V36.2153L21.898 30.5928L15.6 24.4566ZM44.5445 36.1811L44.5445 24.4566L38.263 30.5766L44.5445 36.1811ZM33.9428 34.7826C32.9186 35.786 31.5249 36.3485 30.0722 36.3451C28.6106 36.3451 27.234 35.7899 26.1998 34.7826L22.8305 31.4992L15.6 37.9543V39.0355C15.6 40.4502 16.7804 41.6 18.231 41.6H41.9135C43.364 41.6 44.5445 40.4502 44.5445 39.0374V37.9201L37.3306 31.483L33.9447 34.7808L33.9428 34.7826Z'\n          fill={color}\n        />\n      </g>\n    </g>\n    <defs>\n      <clipPath id='clip0_0_22587'>\n        <rect width='60.2' height='60.2' fill='white' />\n      </clipPath>\n      <clipPath id='clip1_0_22587'>\n        <rect width='29' height='22.0001' fill='white' transform='translate(15.6 19.6)' />\n      </clipPath>\n    </defs>\n  </motion.svg>\n);\n\nexport default EmailIcon;\n", "import { motion } from 'framer-motion';\nconst PhoneIcon = ({ color = 'var(--pcm-accent-color)', ...props }) => (\n  <motion.svg width='61' height='61' viewBox='0 0 61 61' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>\n    <g clipPath='url(#clip0_0_22828)'>\n      <path\n        opacity='0.15'\n        d='M30.5 0.399902C47.1238 0.399902 60.6 13.8761 60.6 30.4999C60.6 47.1237 47.1238 60.5999 30.5 60.5999C13.8763 60.5999 0.400024 47.1237 0.400024 30.4999C0.400024 13.8761 13.8763 0.399902 30.5 0.399902V0.399902Z'\n        fill={color}\n      />\n      <g clipPath='url(#clip1_0_22828)'>\n        <path\n          fillRule='evenodd'\n          clipRule='evenodd'\n          d='M40.6574 43.4989C40.8858 43.0112 41 42.4837 41 41.9166V19.1175C41 18.5503 40.8858 18.0172 40.6574 17.5181C40.429 17.019 40.115 16.5823 39.7153 16.208C39.3157 15.8337 38.8475 15.5388 38.3108 15.3233C37.7741 15.1078 37.1974 15 36.5807 15H24.4192C23.8026 15 23.2259 15.1078 22.6892 15.3233C22.1526 15.5388 21.6843 15.8337 21.2847 16.208C20.885 16.5823 20.571 17.019 20.3426 17.5181C20.1142 18.0172 20 18.5503 20 19.1175V41.9166C20 42.4837 20.1142 43.0112 20.3426 43.4989C20.571 43.9866 20.885 44.4177 21.2847 44.792C21.6843 45.1663 22.1526 45.4612 22.6892 45.6767C23.2259 45.8922 23.8026 46 24.4192 46H36.5807C37.1974 46 37.7741 45.8922 38.3108 45.6767C38.8475 45.4612 39.3156 45.1663 39.7153 44.792C40.115 44.4177 40.429 43.9866 40.6574 43.4989ZM22.7406 20.7508H38.2251V40.2492H22.7406V20.7508ZM30.4829 41.202C30.0033 41.202 29.5864 41.3721 29.2325 41.7124C28.8785 42.0527 28.7015 42.4724 28.7015 42.9715C28.7015 43.4479 28.8785 43.8619 29.2325 44.2135C29.5864 44.5651 30.0033 44.7409 30.4829 44.7409C30.9853 44.7409 31.4078 44.5651 31.7504 44.2135C32.093 43.8619 32.2643 43.4479 32.2643 42.9715C32.2643 42.4724 32.093 42.0527 31.7504 41.7124C31.4078 41.3721 30.9853 41.202 30.4829 41.202ZM33.0522 17.433C33.1664 17.5351 33.2235 17.6769 33.2235 17.8584C33.2235 18.0399 33.1664 18.1817 33.0522 18.2838C32.938 18.3858 32.8124 18.4369 32.6754 18.4369H28.3246C28.1876 18.4369 28.062 18.3858 27.9478 18.2838C27.8336 18.1817 27.7765 18.0399 27.7765 17.8584C27.7765 17.6769 27.8393 17.5351 27.9649 17.433C28.0905 17.331 28.2104 17.2799 28.3246 17.2799H32.6754C32.8124 17.2799 32.938 17.331 33.0522 17.433Z'\n          fill={color}\n        />\n      </g>\n    </g>\n    <defs>\n      <clipPath id='clip0_0_22828'>\n        <rect width='60.2' height='60.2' fill='white' transform='translate(0.400024 0.399902)' />\n      </clipPath>\n      <clipPath id='clip1_0_22828'>\n        <rect width='21' height='31' fill='white' transform='translate(20 15)' />\n      </clipPath>\n    </defs>\n  </motion.svg>\n);\nexport default PhoneIcon;\n", "import { motion } from 'framer-motion';\nimport { css, styled } from 'styled-components';\n\ninterface LogoContainerProps {\n  width?: number;\n  height?: number;\n}\nexport const LogoContainer = styled(motion.div)<LogoContainerProps>`\n  z-index: 4;\n  position: relative;\n  width: ${(props) => props.width ?? 60}px;\n  height: ${(props) => props.height ?? 60}px;\n  svg {\n    z-index: 3;\n    position: relative;\n    display: block;\n  }\n`;\n\nexport const Logo = styled(motion.div)<{ $small?: boolean; inset?: number }>`\n  z-index: 2;\n  position: absolute;\n  overflow: hidden;\n  inset: ${(props) => props.inset ?? 6}px;\n  border-radius: 50px;\n  background: var(--pcm-body-background);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  svg,\n  img {\n    pointer-events: none;\n    display: block;\n    margin: 0 auto;\n    width: 100%;\n    height: 100%;\n    ${(props) =>\n      props.$small &&\n      css`\n        width: 85%;\n        height: 85%;\n      `}\n  }\n`;\n\nexport const SpinnerContainer = styled(motion.div)`\n  position: absolute;\n  inset: -5px;\n`;\nexport const ExpiringSpinner = styled(motion.div)`\n  pointer-events: none;\n  user-select: none;\n  z-index: 1;\n  position: absolute;\n  inset: -25%;\n  background: var(--pcm-body-background);\n  div:first-child {\n    position: absolute;\n    left: 50%;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    overflow: hidden;\n    &:before {\n      position: absolute;\n      content: '';\n      inset: 0;\n      background: var(--pcm-accent-color);\n      transform-origin: 0% 50%;\n      animation: rotateExpiringSpinner 5000ms ease-in both;\n    }\n  }\n  div:last-child {\n    position: absolute;\n    left: 0;\n    right: 50%;\n    top: 0;\n    bottom: 0;\n    overflow: hidden;\n    &:before {\n      position: absolute;\n      content: '';\n      inset: 0;\n      background: var(--pcm-accent-color);\n      transform-origin: 100% 50%;\n      animation: rotateExpiringSpinner 5000ms ease-out 5000ms both;\n    }\n  }\n  @keyframes rotateExpiringSpinner {\n    0% {\n      transform: rotate(-180deg);\n    }\n    100% {\n      transform: rotate(0deg);\n    }\n  }\n`;\nexport const Spinner = styled(motion.div)`\n  pointer-events: none;\n  user-select: none;\n  z-index: 1;\n  position: absolute;\n  inset: 0;\n  svg {\n    display: block;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    animation: rotateSpinner 1200ms linear infinite;\n  }\n  @keyframes rotateSpinner {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n", "import { AnimatePresence } from 'framer-motion';\nimport React from 'react';\nimport { ExpiringSpinner, Logo, LogoContainer, Spinner, SpinnerContainer } from './styles';\n\nconst CircleSpinner = ({\n  logo,\n  smallLogo,\n  connecting = true,\n  unavailable = false,\n  countdown = false,\n  width = 60,\n  height = 60,\n  inset = 4,\n}: {\n  logo?: React.ReactNode;\n  smallLogo?: boolean;\n  connecting?: boolean;\n  unavailable?: boolean;\n  countdown?: boolean;\n  width?: number;\n  height?: number;\n  inset?: number;\n}) => {\n  return (\n    <LogoContainer transition={{ duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }} width={width} height={height}>\n      <Logo\n        $small={!unavailable && smallLogo}\n        style={{\n          background: 'none',\n          ...(unavailable ? { borderRadius: 0 } : {}),\n        }}\n        inset={inset}\n      >\n        {logo}\n      </Logo>\n      <SpinnerContainer>\n        <AnimatePresence>\n          {connecting && (\n            <Spinner\n              key='Spinner'\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{\n                opacity: 0,\n                transition: {\n                  duration: countdown ? 1 : 0,\n                },\n              }}\n            >\n              <svg\n                aria-hidden='true'\n                width={width + 2}\n                height={height + 2}\n                viewBox='0 0 102 102'\n                fill='none'\n                xmlns='http://www.w3.org/2000/svg'\n              >\n                <path\n                  d='M52 100C24.3858 100 2 77.6142 2 50'\n                  stroke='url(#paint0_linear_1943_4139)'\n                  strokeWidth='3.5'\n                  strokeLinecap='round'\n                  strokeLinejoin='round'\n                />\n                <defs>\n                  <linearGradient\n                    id='paint0_linear_1943_4139'\n                    x1='2'\n                    y1='48.5'\n                    x2='53'\n                    y2='100'\n                    gradientUnits='userSpaceOnUse'\n                  >\n                    <stop stopColor='var(--pcm-accent-color)' />\n                    <stop offset='1' stopColor='var(--pcm-accent-color)' stopOpacity='0' />\n                  </linearGradient>\n                </defs>\n              </svg>\n            </Spinner>\n          )}\n          {countdown && (\n            <ExpiringSpinner\n              key='ExpiringSpinner'\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.25 }}\n            >\n              <div />\n              <div />\n            </ExpiringSpinner>\n          )}\n        </AnimatePresence>\n      </SpinnerContainer>\n    </LogoContainer>\n  );\n};\n\nexport default CircleSpinner;\n", "import { styled } from 'styled-components';\n\ninterface StyledInputProps {\n  error?: string;\n}\n\nexport const CodeInputContainer = styled.div`\n  width: 100%;\n  max-width: 340px;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  display: inline-block;\n  margin: auto;\n  width: auto;\n  position: relative;\n  left: 50%;\n  transform: translateX(-50%);\n  input:-webkit-autofill,\n  input:-webkit-autofill:hover,\n  input:-webkit-autofill:focus,\n  input:-webkit-autofill:active {\n    box-shadow: 0 0 0 60px var(--pcm-body-background) inset !important;\n    -webkit-text-fill-color: var(--pcm-body-color) !important;\n  }\n`;\n\nexport const CodeInputMask = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 1;\n  cursor: pointer;\n`;\n\nexport const StyleCodeInputItem = styled.input<StyledInputProps>`\n  width: 42px;\n  height: 42px;\n  padding: 0;\n  margin-right: 5px;\n  margin-left: 5px;\n  border: transparent;\n  border-radius: var(--pcm-rounded-md);\n  font-size: 20px;\n  text-align: center;\n  text-transform: uppercase;\n  background-clip: padding-box;\n  caret-color: var(--pcm-primary-color);\n  color: ${({ error }) => (error ? 'var(--pcm-error-color)' : 'var(--pcm-body-color)')};\n  background-color: ${({ error }) => (error ? 'var(--pcm-error-background)' : 'var(--pcm-body-background-secondary)')};\n\n  border: none;\n  &:focus,\n  &:active,\n  &:hover,\n  &:visited,\n  &:focus-visible {\n    appearance: none;\n    outline: none !important;\n    border: none !important;\n  }\n\n  &:not(:placeholder-shown) {\n    appearance: none;\n    outline: 0;\n  }\n`;\n\nexport const FocusBorder = styled.div<{ $focusIndex: number; $showFocusBorder: boolean } & StyledInputProps>`\n  position: absolute;\n  top: 0;\n  opacity: ${({ $showFocusBorder }) => ($showFocusBorder ? 1 : 0)};\n  left: ${({ $focusIndex }) => 5 + $focusIndex * 52}px;\n  width: 42px;\n  height: 42px;\n  border: 1px solid var(--pcm-accent-color);\n  border-radius: var(--pcm-rounded-md);\n  transition:\n    left 0.3s ease,\n    opacity 0.2s ease;\n  pointer-events: none;\n  z-index: 2;\n`;\n", "import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\nimport { CodeInputContainer, CodeInputMask, FocusBorder, StyleCodeInputItem } from './styles';\n\nconst allowedCharactersValues = ['alpha', 'numeric', 'alphanumeric'] as const;\n\nexport type AuthCodeProps = {\n  allowedCharacters?: (typeof allowedCharactersValues)[number];\n  ariaLabel?: string;\n  autoFocus?: boolean;\n  disabled?: boolean;\n  isPassword?: boolean;\n  length?: number;\n  placeholder?: string;\n  error: string;\n  onChange: (res: string) => void;\n  code?: string;\n};\n\ntype InputMode = 'text' | 'numeric';\n\ntype InputType = 'text' | 'tel' | 'password';\n\ntype InputProps = {\n  type: InputType;\n  inputMode: InputMode;\n  pattern: string;\n  min?: string;\n  max?: string;\n};\n\nexport type AuthCodeRef = {\n  focus: () => void;\n  clear: () => void;\n};\n\nconst propsMap: { [key: string]: InputProps } = {\n  alpha: {\n    type: 'text',\n    inputMode: 'text',\n    pattern: '[a-zA-Z]{1}',\n  },\n\n  alphanumeric: {\n    type: 'text',\n    inputMode: 'text',\n    pattern: '[a-zA-Z0-9]{1}',\n  },\n\n  numeric: {\n    type: 'tel',\n    inputMode: 'numeric',\n    pattern: '[0-9]{1}',\n    min: '0',\n    max: '9',\n  },\n};\n\nconst CodeInput = forwardRef<AuthCodeRef, AuthCodeProps>(\n  (\n    {\n      allowedCharacters = 'alphanumeric',\n      ariaLabel,\n      autoFocus = true,\n      disabled,\n      isPassword = false,\n      length = 6,\n      placeholder,\n      onChange,\n      code = '',\n      error = '',\n    },\n    ref\n  ) => {\n    if (isNaN(length) || length < 1) {\n      throw new Error('Length should be a number and greater than 0');\n    }\n\n    if (!allowedCharactersValues.some((value) => value === allowedCharacters)) {\n      throw new Error('Invalid value for allowedCharacters. Use alpha, numeric, or alphanumeric');\n    }\n\n    const [focusIndex, setFocusIndex] = React.useState<number>(0);\n    const [showFocusBorder, setShowFocusBorder] = React.useState<boolean>(false);\n\n    const inputsRef = useRef<Array<HTMLInputElement>>([]);\n    const inputProps = propsMap[allowedCharacters] as InputProps;\n    const codeInputContainerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => ({\n      focus: () => {\n        if (inputsRef.current) {\n          inputsRef.current[0]?.focus();\n        }\n      },\n      clear: () => {\n        if (inputsRef.current) {\n          for (let i = 0; i < inputsRef.current.length; i++) {\n            if (inputsRef.current?.[i]) {\n              (inputsRef.current[i] as HTMLInputElement).value = '';\n            }\n          }\n          (inputsRef.current[0] as HTMLInputElement).focus();\n        }\n        sendResult();\n      },\n    }));\n\n    // useEffect(() => {\n    //   if (autoFocus) {\n    //     (inputsRef.current[0] as HTMLInputElement).focus();\n    //   }\n    // }, []);\n\n    useEffect(() => {\n      if (code) {\n        for (let i = 0; i < inputsRef.current.length; i++) {\n          (inputsRef.current[i] as HTMLInputElement).value = '';\n        }\n        for (let i = 0; i < code.length; i++) {\n          if (inputsRef.current?.[i]) {\n            (inputsRef.current[i] as HTMLInputElement).value = code[i] || '';\n          }\n        }\n        sendResult();\n      }\n    }, [code]);\n\n    let oldValue = inputsRef.current.map((input) => input.value).join('') || '';\n\n    const sendResult = () => {\n      const res = inputsRef.current.map((input) => input.value).join('');\n      if (oldValue !== res) {\n        console.log('sendResult', res);\n\n        if (res.length === 6) {\n          setTimeout(() => {\n            inputsRef.current.forEach((input) => {\n              input.blur();\n            });\n          }, 400);\n        }\n\n        onChange && onChange(res);\n        oldValue = res;\n      }\n    };\n\n    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const {\n        target: { value, nextElementSibling },\n      } = e;\n\n      if (value.length == 1) {\n        if (value.match(inputProps.pattern)) {\n          if (nextElementSibling !== null) {\n            (nextElementSibling as HTMLInputElement).focus();\n          }\n        } else {\n          e.target.value = '';\n        }\n      } else if (value.length > 1) {\n        const pastedValue = value;\n        let currentInput: number = Number(e.target.getAttribute('data-index')) || 0;\n        for (let i = 0; i < pastedValue.length; i++) {\n          const pastedCharacter = pastedValue.charAt(i);\n          if (pastedCharacter.match(inputProps.pattern) && inputsRef.current?.[currentInput]) {\n            (inputsRef.current[currentInput] as HTMLInputElement).value = pastedCharacter;\n            if ((inputsRef.current[currentInput] as HTMLInputElement).nextElementSibling !== null) {\n              ((inputsRef.current[currentInput] as HTMLInputElement).nextElementSibling as HTMLInputElement).focus();\n              currentInput++;\n            }\n          }\n        }\n      }\n      setTimeout(() => {\n        sendResult();\n      });\n    };\n\n    const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      const { key } = e;\n      const target = e.target as HTMLInputElement;\n      if (key === 'Backspace') {\n        if (target.value === '') {\n          if (target.previousElementSibling !== null) {\n            const t = target.previousElementSibling as HTMLInputElement;\n            t.value = '';\n            t.focus();\n            e.preventDefault();\n          }\n        } else {\n          target.value = '';\n        }\n        setTimeout(() => {\n          sendResult();\n        });\n      }\n    };\n\n    const handleOnFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n      e.target.select();\n    };\n\n    const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n      let pastedValue = e.clipboardData.getData('Text') ?? '';\n      pastedValue = pastedValue.replace(/\\s/g, '').substring(0, 6);\n\n      let currentInputIndex = focusIndex;\n\n      for (let i = 0; i < pastedValue.length; i++) {\n        const pastedCharacter = pastedValue.charAt(i);\n        const currentInput = inputsRef.current[currentInputIndex] as HTMLInputElement;\n        if (!currentInput) {\n          break;\n        }\n        const currentValue = currentInput?.value;\n        if (pastedCharacter.match(inputProps.pattern)) {\n          if (!currentValue) {\n            (inputsRef.current[currentInputIndex] as HTMLInputElement).value = pastedCharacter;\n            if ((inputsRef.current[currentInputIndex] as HTMLInputElement).nextElementSibling !== null) {\n              (\n                (inputsRef.current[currentInputIndex] as HTMLInputElement).nextElementSibling as HTMLInputElement\n              ).focus();\n              currentInputIndex++;\n            }\n          }\n        }\n      }\n      sendResult();\n\n      e.preventDefault();\n    };\n\n    return (\n      <CodeInputContainer ref={codeInputContainerRef}>\n        <FocusBorder $focusIndex={focusIndex} $showFocusBorder={showFocusBorder} />\n        {new Array(6).fill(0).map((_, i) => {\n          return (\n            <StyleCodeInputItem\n              key={i}\n              data-index={i}\n              onChange={handleOnChange}\n              onKeyDown={handleOnKeyDown}\n              onFocus={(e) => {\n                setShowFocusBorder(true);\n                setFocusIndex(i);\n                handleOnFocus(e);\n              }}\n              autoFocus={autoFocus && i === 0}\n              onBlur={() => {\n                setShowFocusBorder(false);\n              }}\n              onPaste={handleOnPaste}\n              {...inputProps}\n              type={isPassword ? 'password' : inputProps.type}\n              ref={(el: HTMLInputElement) => {\n                inputsRef.current[i] = el;\n              }}\n              autoComplete={i === 0 ? 'one-time-code' : 'off'}\n              aria-label={ariaLabel ? `${ariaLabel}. Character ${i + 1}.` : `Character ${i + 1}.`}\n              disabled={disabled}\n              placeholder={placeholder}\n              error={error}\n            />\n          );\n        })}\n        <CodeInputMask\n          onClick={(e) => {\n            e.preventDefault();\n            e.stopPropagation();\n            for (let i = inputsRef.current.length - 1; i >= 0; i--) {\n              if (\n                (i > 0 &&\n                  !(inputsRef.current[i] as HTMLInputElement).value &&\n                  (inputsRef.current[i - 1] as HTMLInputElement).value) ||\n                (i === 0 && !(inputsRef.current[i] as HTMLInputElement).value) ||\n                (i == inputsRef.current.length - 1 && (inputsRef.current[i] as HTMLInputElement).value)\n              ) {\n                (inputsRef.current[i] as HTMLInputElement).focus();\n                (inputsRef.current[i] as HTMLInputElement).setSelectionRange(\n                  (inputsRef.current[i] as HTMLInputElement).value.length,\n                  (inputsRef.current[i] as HTMLInputElement).value.length\n                );\n                break;\n              }\n            }\n          }}\n        />\n      </CodeInputContainer>\n    );\n  }\n);\n\nexport default CodeInput;\n", "import { motion } from 'framer-motion';\nimport type { HTMLAttributes } from 'react';\nimport { keyframes, styled } from 'styled-components';\n\ninterface FlexProps extends HTMLAttributes<HTMLDivElement> {\n  gap?: number;\n}\n\nconst FadeIn = keyframes`\nfrom { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst FadeOut = keyframes`\nfrom { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst BoxIn = keyframes`\n  from{ opacity: 0; transform: scale(0.97); }\n  to{ opacity: 1; transform: scale(1); }\n`;\nconst BoxOut = keyframes`\n  from{ opacity: 1; transform: scale(1); }\n  to{ opacity: 0; transform: scale(0.97); }\n`;\n\nconst MobileBoxIn = keyframes`\n  from { transform: translate3d(0, 100%, 0); }\n  to { transform: translate3d(0, 0%, 0); }\n`;\n\nconst MobileBoxOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nexport const ModalRoot = styled.div`\n  z-index: 2147483646;\n  position: fixed;\n  inset: 0;\n`;\n\nexport const ModalOverlay = styled(motion.div)<{\n  $active: boolean;\n}>`\n  z-index: 1;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--pcm-overlay-background, rgba(71, 88, 107, 0.24));\n  backdrop-filter: var(--pcm-overlay-backdrop-filter, blur(6px));\n  opacity: 0;\n  animation: ${(props) => (props.$active ? FadeIn : FadeOut)} 150ms ease-out both;\n`;\n\nexport const ModalContainer = styled(motion.div)<{\n  $positionInside?: boolean;\n}>`\n  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);\n  --duration: 200ms;\n  --transition: height var(--duration) var(--ease), width var(--duration) var(--ease);\n  z-index: 3;\n  display: block;\n  pointer-events: none;\n  position: ${(props) => (props.$positionInside ? 'unset' : 'absolute')};\n  left: 50%;\n  top: 50%;\n  width: 100%;\n  height: auto;\n  transform: ${(props) => {\n    return props.$positionInside ? 'none' : 'translate(-50%, -50%)';\n  }};\n  backface-visibility: hidden;\n  @media only screen and (max-width: 560px) {\n    pointer-events: auto;\n    left: 0;\n    top: auto;\n    bottom: -5px;\n    transform: none;\n  }\n`;\n\nexport const BoxContainer = styled(motion.div)<{\n  $positionInside?: boolean;\n}>`\n  z-index: 2;\n  position: relative;\n  color: var(--pcm-body-color, black);\n  animation: 150ms ease both;\n  animation-name: ${(props) => (props.$positionInside ? null : BoxOut)};\n  margin: auto;\n  height: var(--height);\n  width: 400px;\n  border-radius: var(--pcm-rounded-xl);\n  background: var(--pcm-body-background);\n  box-shadow: var(--pcm-modal-box-shadow);\n  transition: all 300ms ease;\n  overflow: hidden;\n  &.active {\n    animation-name: ${(props) => (props.$positionInside ? null : BoxIn)};\n  }\n\n  @media only screen and (max-width: 560px) {\n    animation-name: ${(props) => (props.$positionInside ? null : MobileBoxOut)};\n    animation-duration: 130ms;\n    animation-timing-function: ease;\n    width: 100%;\n    transition: 200ms height cubic-bezier(0.15, 1.15, 0.6, 1);\n    will-change: height;\n    border-bottom-left-radius: ${(props) => (props.$positionInside ? null : 0)};\n    border-bottom-right-radius: ${(props) => (props.$positionInside ? null : 0)};\n\n    &.active {\n      animation-name: ${(props) => (props.$positionInside ? null : MobileBoxIn)};\n      animation-duration: 300ms;\n      animation-delay: 32ms;\n      animation-timing-function: cubic-bezier(0.15, 1.15, 0.6, 1);\n    }\n  }\n`;\n\nexport const PageContainer = styled(motion.div)`\n  z-index: 2;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: auto;\n`;\n\nexport const PageContents = styled(motion.div)`\n  width: 100%;\n  padding: 64px 0 24px 0;\n  backface-visibility: hidden;\n  box-sizing: border-box;\n`;\n\nexport const PageContent = styled(motion.div)`\n  max-width: 100%;\n  margin: 0 4px 22px;\n  padding: 12px 20px 8px;\n  overflow-x: visible;\n  max-height: var(--pcm-modal-max-height, 65vh);\n  overflow-y: auto;\n  opacity: 0;\n  animation: ${FadeIn} 300ms ease-out both;\n`;\n\nexport const ControllerContainer = styled(motion.div)`\n  z-index: 3;\n  position: absolute;\n  top: 0;\n  left: 50%;\n  heigh