\n )}\n \n );\n};\n\nexport default TracerNodeMessage;\n\n","import React from 'react';\n\n/**\n * Renders JSON data in a formatted, color-coded display\n * @param {Object} props - Component props\n * @param {string} props.jsonString - JSON string to be parsed and displayed\n */\nconst JsonDisplay = ({ jsonString }) => {\n /**\n * Determines text color based on value type\n * @param {*} value - The value to check\n * @returns {string} CSS class for text color\n */\n const getValueColor = (value) => {\n if (value === null) return 'text-danger';\n if (typeof value === 'boolean') return 'text-purple';\n if (typeof value === 'number') return 'text-primary';\n if (typeof value === 'string') return 'text-warning';\n return '';\n };\n\n /**\n * Recursively renders JSON values with proper indentation and formatting\n * @param {*} value - The value to render\n * @param {number} indent - Current indentation level\n * @returns {JSX.Element} Formatted value\n */\n const renderJsonValue = (value, indent = 0) => {\n if (value === null) {\n return null;\n }\n\n if (Array.isArray(value)) {\n return (\n
\n \n\n {/* Modal for JSON content */}\n \n \n Data Message\n \n \n
\n {instruction &&
{instruction}
}\n {jsonPart && }\n
\n \n \n \n Close\n \n \n \n \n );\n};\n\nexport default UserDataMessage;\n","import React from 'react';\n\n/**\n * Displays the sender information and message status\n * @param {Object} props - Component props\n * @param {string} props.role - Message role (user, system, or assistant)\n * @param {string} props.firstName - User's first name\n * @param {string} props.lastName - User's last name\n * @param {string} props.className - Additional CSS classes\n */\nconst MessageHeader = ({ role, firstName, lastName, className = '' }) => {\n // Determine the display text based on the role\n const getSenderText = () => {\n switch (role) {\n case 'user':\n return `${firstName} ${lastName}: `;\n case 'system':\n return 'System: ';\n case 'assistant':\n default:\n return 'AI:';\n }\n };\n\n return (\n
\n {getSenderText()}\n
\n );\n};\n\nexport default MessageHeader;\n","import React, { useEffect, useState } from 'react';\n\nimport { AllMessageTypes } from '../../zod';\nimport BaseResponse from './types/BaseResponse';\nimport BaseResponseWithAnalysis from './types/BaseResponseWithAnalysis';\nimport DefaultMessage from './types/DefaultMessage';\nimport ErrorMessage from './types/ErrorMessage';\nimport TracerNodeMessage from './types/TracerNodeMessage';\nimport UserDataMessage from './types/UserDataMessage';\nimport useChatPanelStore from 'stateManagement/store/useChatPanelStore';\n\nimport { useGetSessionById } from 'stateManagement/queries/services/aiChat/aiChatQueries';\n\nimport MessageHeader from './utils/MessageHeader';\n\n/**\n * Checks if a message starts with \"Instructions:\"\n * @param {string} content - The message content to check\n * @returns {boolean} True if the message starts with \"Instructions:\"\n */\nconst isInstructionsMessage = (content) => {\n if (typeof content !== 'string') return false;\n return content.trim().startsWith('Instructions:');\n};\n\n/**\n * Main component for rendering all chat messages\n * @param {Object} props - Component props\n * @param {Array} props.messages - Array of message objects\n * @param {string} props.sessionId - ID of the current chat session\n * @param {Object} props.user - User information object\n * @param {string} props.status - Status of the chat session\n */\nconst ChatMessages = ({\n messages,\n sessionId,\n user: { firstName, lastName },\n status,\n}) => {\n const [processedMessages, setProcessedMessages] = useState([]);\n const { data: chatData } = useGetSessionById(sessionId);\n const chatSessionId = useChatPanelStore((state) => state.chatSessionId);\n\n // Process messages to ensure they have the correct format\n useEffect(() => {\n if (!messages || messages.length === 0) {\n setProcessedMessages([]);\n return;\n }\n\n const transformedMessages = messages.map((message) => {\n // modify message\n if (\n typeof message.content === 'string' &&\n message.content.includes(':::done') &&\n message.role === 'assistant' &&\n // checks if messageType or contentAsJson are not present\n (message.messageType === undefined ||\n message.contentAsJson === undefined)\n ) {\n const [messageType, contentStr] = message.content.split(':::');\n\n let toRet = {\n ...message,\n role: message.role,\n messageType,\n contentAsJson: JSON.parse(contentStr),\n content: contentStr,\n };\n return toRet;\n }\n // or return what we had\n else {\n return message;\n }\n });\n setProcessedMessages(transformedMessages);\n }, [messages]);\n\n /**\n * Renders the appropriate message component based on message role and type\n * @param {Object} message - The message object to render\n * @returns {JSX.Element} The appropriate message component\n */\n const renderMessageComponent = (message) => {\n if (message.role === 'user' && isInstructionsMessage(message.content)) {\n return ;\n }\n\n // while streaming default to standard message\n if (status === 'streaming') {\n return ;\n }\n\n // get the message type\n const messageTypeParse = AllMessageTypes.safeParse(message.messageType);\n\n // if not one of the messageType, default to standard message\n if (!messageTypeParse.success) {\n return ;\n }\n\n // Handle specific message types\n switch (messageTypeParse.data) {\n case 'error':\n return ;\n\n case '0-default':\n return ;\n\n case '1-full-wallet-profile':\n case '2-wallet-kyc':\n case '3-analyze-txn-trace-call':\n case '4-full-txn-decode':\n case '5-full-contract-analysis':\n return ;\n\n case '6-tracer-next-node':\n return ;\n\n default:\n return ;\n }\n };\n\n // Only render if the session matches the current chat session\n if (chatData?.sessionId !== chatSessionId) {\n return null;\n }\n\n // If no messages, show placeholder\n if (processedMessages.length === 0) {\n return (\n
No Messages
\n );\n }\n\n return (\n
\n {processedMessages.map((message) => (\n \n
\n {/* Message header with sender info */}\n \n\n {/* Message content container */}\n \n {renderMessageComponent(message)}\n
\n
\n \n ))}\n \n );\n};\n\nexport default ChatMessages;\n","import { workflowTypes } from './workflowTypes';\n\n/**\n * @typedef {Object} WorkflowConfig\n * @property {string} id - The ID of the workflow\n * @property {string} path - The path to the workflow\n * @property {string} buttonText - The text to display on the button\n * @property {string} icon - The icon to display on the button\n * @property {string} variant - The variant of the button\n * @property {string} workflowType - The ID of the workflow type\n * @property {(location: import('react-router-dom').Location) => boolean} shouldDisplay - Determines if the workflow should be displayed based on the current page\n */\n\n/**\n * @type {WorkflowConfig[]}\n */\nexport const workflowConfigs = [\n {\n id: 'wallet',\n path: '/wallet-profile',\n buttonText: 'Full Wallet Profile',\n icon: 'wallet',\n variant: 'falcon-default',\n workflowType: workflowTypes.INVESTIGATE_FULL_WALLET_PROFILE,\n shouldDisplay: (location) => {\n const { pathname } = location;\n return (\n pathname.startsWith('/wallet-profile') && pathname !== '/wallet-profile'\n );\n },\n },\n {\n id: 'wallet',\n path: '/wallet-profile',\n buttonText: 'Investigate Wallet for KYC Data',\n icon: 'wallet',\n variant: 'falcon-default',\n workflowType: workflowTypes.INVESTIGATE_WALLET_FOR_KYC_DATA,\n shouldDisplay: (location) => {\n const { pathname } = location;\n return (\n pathname.startsWith('/wallet-profile') && pathname !== '/wallet-profile'\n );\n },\n },\n\n {\n id: 'transaction',\n path: '/transaction-decoder',\n buttonText: 'Decode and Explain Transaction',\n icon: 'wallet',\n variant: 'falcon-default',\n workflowType: workflowTypes.INVESTIGATE_FULL_DECODER,\n shouldDisplay: (location) => {\n const { pathname } = location;\n return (\n pathname.startsWith('/transaction-decoder') &&\n pathname !== '/transaction-decoder'\n );\n },\n },\n {\n id: 'transaction',\n path: '/transaction-decoder',\n buttonText: 'Analyze trace call',\n icon: 'wallet',\n variant: 'falcon-default',\n workflowType: workflowTypes.ANALYZE_DECODER_TRACE_CALL,\n shouldDisplay: (location) => {\n const { pathname } = location;\n return (\n pathname.startsWith('/transaction-decoder') &&\n pathname !== '/transaction-decoder'\n );\n },\n },\n {\n id: 'contractAnalysis',\n path: '/contract-analysis',\n buttonText: 'Analyze Contract Structure',\n icon: 'puzzle-piece',\n variant: 'falcon-default',\n workflowType: workflowTypes.INVESTIGATE_FULL_CONTRACT_ANALYSIS,\n shouldDisplay: (location) => {\n const { pathname } = location;\n return (\n pathname.startsWith('/contract-analysis') &&\n pathname !== '/contract-analysis'\n );\n },\n },\n {\n id: 'tracer',\n path: 'tracer',\n buttonText: 'Find Next Nodes',\n icon: 'shuffle',\n variant: 'falcon-default',\n workflowType: workflowTypes.FIND_NEXT_TRACER_NODE,\n shouldDisplay: (location) => {\n const { pathname } = location;\n return pathname.startsWith('/tracer');\n },\n },\n {\n id: 'currentPage',\n path: '',\n buttonText: 'Analyze current page',\n icon: 'file',\n variant: 'falcon-primary',\n workflowType: workflowTypes.ANALYZE_CURRENT_PAGE,\n shouldDisplay: () => {\n return true;\n },\n },\n];\n","import { SHERLOCK_ACTIONS } from '../../../../../stateManagement/redux/actionPlans/types';\n\nimport { ORG_SERVICES } from 'blockscope/static/blockscopeServices';\n\n/**\n * Parses a component ID string to extract tab name\n * @param {string} componentId - Format: 'profiler-{address}-{chain}-{tab}'\n * @returns {Object} Parsed component details\n */\nconst parseComponentId = (componentId) => {\n const parts = componentId.split('-');\n if (parts.length !== 4) {\n throw new Error(`Invalid component ID format: ${componentId}`);\n }\n return {\n type: parts[0],\n address: parts[1],\n chain: parts[2],\n tab: parts[3],\n };\n};\n\n/**\n * Creates an action plan to investigate a full wallet profile based on available tabs\n * @param {string} chain - The blockchain network (e.g., 'ethereum')\n * @param {string} address - The wallet address to investigate\n * @param {Object} state - Redux state\n * @returns {Object} Action plan configuration\n */\nexport const createFullWalletProfilePlan = (\n chain = 'ethereum',\n address,\n state\n) => {\n const availableComponents = state.componentTracker.activeComponents;\n\n if (!availableComponents || availableComponents.length === 0) {\n console.warn('No components available in Redux state');\n return {\n name: ``,\n sherlockActions: [],\n prompt:\n \"Conduct a comprehensive analysis of all wallet activities and characteristics. Review all available tabs to build a complete profile of the wallet's behavior, interactions, and patterns.\",\n };\n }\n\n // Parse and filter components for this address and chain\n const relevantComponents = availableComponents.filter((componentId) => {\n try {\n const parsed = parseComponentId(componentId);\n return (\n parsed.type === 'profiler' &&\n parsed.address.toLowerCase() === address.toLowerCase() &&\n parsed.chain.toLowerCase() === chain.toLowerCase()\n );\n } catch (error) {\n console.warn(`Skipping invalid component ID: ${componentId}`, error);\n return false;\n }\n });\n\n const availableTabs = relevantComponents.map((componentId) => {\n const { tab } = parseComponentId(componentId);\n return tab;\n });\n\n const sherlockActions = availableTabs.map((tab) => ({\n type: SHERLOCK_ACTIONS.OPEN_PROFILER_TAB,\n params: {\n chain,\n address,\n tab,\n },\n }));\n\n return {\n name: `1-full-wallet-profile`,\n sherlockActions: [\n ...sherlockActions,\n {\n type: SHERLOCK_ACTIONS.GET_WALLET_DATA,\n params: { chain, address },\n },\n ],\n prompt:\n \"Conduct a comprehensive analysis of all wallet activities and characteristics. Review all available tabs to build a complete profile of the wallet's behavior, interactions, and patterns.\",\n };\n};\n\n/**\n * Helper function to check if tabs are available for a specific address and chain\n * @param {Object} state - Redux state\n * @param {string} address - Wallet address\n * @param {string} chain - Blockchain network\n * @returns {boolean}\n */\nexport const areTabsAvailable = (state, address, chain) => {\n if (!state.componentTracker.activeComponents) return false;\n\n return state.componentTracker.activeComponents.some((componentId) => {\n try {\n const parsed = parseComponentId(componentId);\n return (\n parsed.type === 'profiler' &&\n parsed.address.toLowerCase() === address.toLowerCase() &&\n parsed.chain.toLowerCase() === chain.toLowerCase()\n );\n } catch {\n return false;\n }\n });\n};\n\n/**\n * Creates an action plan focusing on KYC-relevant tabs\n * @param {string} chain - The blockchain network\n * @param {string} address - The wallet address to investigate\n * @param {Object} state - Redux state\n * @returns {Object} Action plan configuration\n */\nexport const createKYCInvestigationPlan = (\n chain = 'ethereum',\n address,\n state\n) => {\n // KYC-relevant tabs in priority order\n const KYC_PRIORITY_TABS = ['LABELS', 'COUNTER_PARTIES', 'OVERVIEW'];\n\n const availableComponents = state.componentTracker.activeComponents;\n\n if (!availableComponents || availableComponents.length === 0) {\n console.warn('No components available in Redux state');\n return {\n name: ``,\n sherlockActions: [],\n prompt:\n 'Investigate wallet for potential KYC identifiers and relationships. Focus on labels, counterparty interactions, and general wallet behavior to identify any patterns suggesting real-world identity.',\n };\n }\n\n // Parse and filter components for this address and chain\n const relevantComponents = availableComponents.filter((componentId) => {\n try {\n const parsed = parseComponentId(componentId);\n return (\n parsed.type === 'profiler' &&\n parsed.address.toLowerCase() === address.toLowerCase() &&\n parsed.chain.toLowerCase() === chain.toLowerCase()\n );\n } catch (error) {\n console.warn(`Skipping invalid component ID: ${componentId}`, error);\n return false;\n }\n });\n\n const availableTabs = relevantComponents.map((componentId) => {\n const { tab } = parseComponentId(componentId);\n return tab;\n });\n\n // Only include KYC priority tabs that exist in available tabs\n const sortedTabs = KYC_PRIORITY_TABS.filter((tab) =>\n availableTabs.includes(tab)\n );\n\n const sherlockActions = sortedTabs.map((tab) => ({\n type: SHERLOCK_ACTIONS.OPEN_PROFILER_TAB,\n params: {\n chain,\n address,\n tab,\n },\n }));\n\n return {\n name: `2-wallet-kyc`,\n sherlockActions: [\n ...sherlockActions,\n {\n type: SHERLOCK_ACTIONS.GET_WALLET_DATA,\n params: { chain, address },\n },\n ],\n prompt:\n 'Investigate wallet for potential KYC identifiers and relationships. Focus on labels, counterparty interactions, and general wallet behavior to identify any patterns suggesting real-world identity.',\n };\n};\n\nexport const createDecodeTraceCallPlan = (\n chain = 'ethereum',\n txnHash,\n state\n) => {\n // KYC-relevant tabs in priority order\n const GO_TO_TABS = ['TRACE_CALL'];\n\n const actionPlan = GO_TO_TABS.map((tab) => ({\n type: SHERLOCK_ACTIONS.OPEN_DECODER_TAB,\n params: {\n chain,\n txnHash,\n tab,\n },\n }));\n\n return {\n name: `3-analyze-txn-trace-call`,\n sherlockActions: [\n ...actionPlan,\n {\n type: SHERLOCK_ACTIONS.GET_TXN_DATA,\n params: { chain, txnHash },\n },\n ],\n prompt:\n 'Explain this trace call for this transaction. Break it down and explain it in detail.',\n };\n};\n\nexport const createFullDecoderPlan = (chain = 'ethereum', txnHash, state) => {\n // KYC-relevant tabs in priority order\n const GO_TO_TABS = [\n 'ANALYTICS',\n 'ADDRESS_INTERACTION',\n 'BALANCE_DIFFERENCES',\n 'TOKEN_TRANSFERS',\n 'LOGS',\n 'FLOW_CHART',\n 'TRACE_CALL',\n 'SECURITY_RISK',\n ];\n\n const actionPlan = GO_TO_TABS.map((tab) => ({\n type: SHERLOCK_ACTIONS.OPEN_DECODER_TAB,\n params: {\n chain,\n txnHash,\n tab,\n },\n }));\n\n return {\n name: `4-full-txn-decode`,\n sherlockActions: [\n ...actionPlan,\n {\n type: SHERLOCK_ACTIONS.GET_TXN_DATA,\n params: { chain, txnHash },\n },\n ],\n prompt:\n 'Conduct a comprehensive analysis of this decoded transaction data. Review all available tabs to build a complete understanding of what this transaction is, how it works, who was involved and any other details or patterns you can find',\n };\n};\n\n/**\n * Creates an action plan to investigate a full contract analysis based on available tabs\n * @param {string} chain - The blockchain network (e.g., 'ethereum')\n * @param {string} address - The contract address to investigate\n * @param {Object} state - Redux state\n * @returns {Object} Action plan configuration\n */\nexport const createFullContractAnalysisPlan = (\n chain = 'ethereum',\n address,\n state\n) => {\n const availableComponents = state.componentTracker.activeComponents;\n\n if (!availableComponents || availableComponents.length === 0) {\n console.warn('No components available in Redux state');\n return {\n name: ``,\n sherlockActions: [],\n prompt:\n \"Conduct a comprehensive analysis of all Contract details. Review all available tabs to build a complete profile of the Contract's ABI, Functions, Events, Constructor, and Errors.\",\n };\n }\n\n // Parse and filter components for this address and chain\n const relevantComponents = availableComponents.filter((componentId) => {\n try {\n const parsed = parseComponentId(componentId);\n return (\n parsed.type === 'contractAnalysis' &&\n parsed.address.toLowerCase() === address.toLowerCase() &&\n parsed.chain.toLowerCase() === chain.toLowerCase()\n );\n } catch (error) {\n console.warn(`Skipping invalid component ID: ${componentId}`, error);\n return false;\n }\n });\n\n const availableTabs = relevantComponents.map((componentId) => {\n const { tab } = parseComponentId(componentId);\n return tab;\n });\n\n const sherlockActions = availableTabs.map((tab) => ({\n type: SHERLOCK_ACTIONS.OPEN_CONTRACT_ANALYSIS_TAB,\n params: {\n chain,\n address,\n tab,\n },\n }));\n\n // dispatch go to txn decoder, txn tab, search binance, take ss\n // collect data, add to master arrayy\n // dispatch 2nd\n\n return {\n name: `5-full-contract-analysis`,\n sherlockActions: [\n ...sherlockActions,\n {\n type: SHERLOCK_ACTIONS.GET_CONTRACT_ANALYSIS_DATA,\n params: { chain, address },\n },\n ],\n prompt:\n \"Conduct a comprehensive analysis of all Contract details. Review all available tabs to build a complete profile of the Contract's ABI, Functions, Events, Constructor, and Errors.\",\n };\n};\n\nexport const AnalyzeCurrentPagePlan = () => {\n return {\n name: `7-analyze-current-page`,\n sherlockActions: [\n {\n type: SHERLOCK_ACTIONS.CURRENT_PAGE,\n params: {},\n },\n ],\n prompt: 'Explain The information on the current page in detail.',\n };\n};\n\nexport const createNextTracerNodePlan = (nodes, tracerId) => {\n return {\n name: `6-tracer-next-node`,\n sherlockActions: [\n {\n type: SHERLOCK_ACTIONS.CAPTURE_TRACER_SCREENSHOT,\n params: { nodes },\n },\n {\n type: SHERLOCK_ACTIONS.GET_TRACER_DATA,\n params: { tracerId },\n },\n ],\n prompt:\n 'Analyze the blockchain interactions and data provided. Identify suspicious patterns among the filtered nodes. Which nodes should be investigated next, give me up to 5 nodes?',\n service: ORG_SERVICES.TRACER_INVESTIGATION,\n };\n};\n","import {\n AnalyzeCurrentPagePlan,\n createDecodeTraceCallPlan,\n createFullContractAnalysisPlan,\n createFullDecoderPlan,\n createFullWalletProfilePlan,\n createKYCInvestigationPlan,\n createNextTracerNodePlan,\n} from './workflowFunctions';\nimport { workflowTypes } from './workflowTypes';\n\nimport { useTracerStore } from 'blockscope/components/tracer/utils/tracerStore';\n\n// This function handles building the action plan when a workflow is triggered\nexport const handleWorkflowTrigger = (\n workflowType,\n location,\n state,\n chatSessionId,\n locationSearchParams\n) => {\n const getWalletDetailsFromUrl = (location) => {\n const pathParts = location.split('/');\n if (pathParts.length >= 4) {\n return {\n chain: pathParts[2],\n address: pathParts[3].split('?')[0],\n };\n }\n return null;\n };\n\n const getContractAnalysisFromUrl = (location) => {\n const pathParts = location.split('/');\n if (pathParts.length >= 4) {\n return {\n chain: pathParts[2],\n address: pathParts[3].split('?')[0],\n };\n }\n return null;\n };\n\n const getTxnDetailsFromUrl = (location) => {\n const pathParts = location.split('/');\n if (pathParts.length >= 4) {\n return {\n chain: pathParts[2],\n txnHash: pathParts[3].split('?')[0],\n };\n }\n return null;\n };\n\n const getTracerIdFromUrl = () => {\n const searchParams = new URLSearchParams(locationSearchParams);\n const tracerId = searchParams.get('tracerId');\n return tracerId || null;\n };\n\n let plan;\n\n switch (workflowType) {\n case workflowTypes.INVESTIGATE_FULL_WALLET_PROFILE:\n case workflowTypes.INVESTIGATE_WALLET_FOR_KYC_DATA:\n case workflowTypes.INVESTIGATE_WALLET_FOR_ILLICIT_ACTIVITY: {\n const walletDetails = getWalletDetailsFromUrl(location);\n if (walletDetails) {\n if (workflowType === workflowTypes.INVESTIGATE_FULL_WALLET_PROFILE) {\n plan = createFullWalletProfilePlan(\n walletDetails.chain,\n walletDetails.address,\n state\n );\n } else if (\n workflowType === workflowTypes.INVESTIGATE_WALLET_FOR_KYC_DATA\n ) {\n plan = createKYCInvestigationPlan(\n walletDetails.chain,\n walletDetails.address,\n state\n );\n }\n }\n break;\n }\n\n case workflowTypes.INVESTIGATE_FULL_DECODER:\n case workflowTypes.ANALYZE_DECODER_TRACE_CALL: {\n const txnDetails = getTxnDetailsFromUrl(location);\n if (txnDetails) {\n if (workflowType === workflowTypes.INVESTIGATE_FULL_DECODER) {\n plan = createFullDecoderPlan(\n txnDetails.chain,\n txnDetails.txnHash,\n state\n );\n } else if (workflowType === workflowTypes.ANALYZE_DECODER_TRACE_CALL) {\n plan = createDecodeTraceCallPlan(\n txnDetails.chain,\n txnDetails.txnHash,\n state\n );\n }\n }\n break;\n }\n case workflowTypes.INVESTIGATE_FULL_CONTRACT_ANALYSIS: {\n const contractDetails = getContractAnalysisFromUrl(location);\n if (contractDetails) {\n plan = createFullContractAnalysisPlan(\n contractDetails.chain,\n contractDetails.address,\n state\n );\n }\n break;\n }\n\n case workflowTypes.ANALYZE_CURRENT_PAGE: {\n plan = AnalyzeCurrentPagePlan();\n break;\n }\n case workflowTypes.FIND_NEXT_TRACER_NODE: {\n const tracerId = getTracerIdFromUrl();\n const nodes = useTracerStore.getState().nodes;\n plan = createNextTracerNodePlan(nodes, tracerId);\n break;\n }\n default:\n console.warn('Unknown workflow type:', workflowType);\n return null;\n }\n\n if (plan) {\n plan.chatSessionId = chatSessionId;\n return plan;\n } else {\n console.warn('Could not extract required details from URL');\n return null;\n }\n};\n\n","export const workflowTypes = {\n INVESTIGATE_FULL_WALLET_PROFILE: 'INVESTIGATE_FULL_WALLET_PROFILE',\n INVESTIGATE_WALLET_FOR_KYC_DATA: 'INVESTIGATE_WALLET_FOR_KYC_DATA',\n INVESTIGATE_WALLET_FOR_ILLICIT_ACTIVITY:\n 'INVESTIGATE_WALLET_FOR_ILLICIT_ACTIVITY',\n ANALYZE_DECODER_TRACE_CALL: 'ANALYZE_DECODER_TRACE_CALL',\n INVESTIGATE_FULL_DECODER: 'INVESTIGATE_FULL_DECODER',\n INVESTIGATE_FULL_CONTRACT_ANALYSIS: 'INVESTIGATE_FULL_CONTRACT_ANALYSIS',\n ANALYZE_CURRENT_PAGE: 'ANALYZE_CURRENT_PAGE',\n FIND_NEXT_TRACER_NODE: 'FIND_NEXT_TRACER_NODE',\n CUSTOM: 'CUSTOM',\n};\n\n","import interfaces from 'blockscope-interfaces';\nimport { z } from 'zod';\n\nexport const MessageServices = interfaces.dragon.AI.MessageServices;\n\nconst OtherMessageTypes = z.enum(['chunk', 'error']);\n\nexport const AllMessageTypes = z.union([MessageServices, OtherMessageTypes]);\n\n/**\n * @typedef {z.infer} AllMessageType\n */\n","import React, { useState } from 'react';\nimport { Button, Col, Form, Row } from 'react-bootstrap';\nimport { useForm } from 'react-hook-form';\nimport { connect } from 'react-redux';\nimport { Link, Navigate, useSearchParams } from 'react-router-dom';\n\nimport BounceSpinLoader from '../blockscopeCommon/loaders/BounceSpinLoader';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport interfaces from 'blockscope-interfaces';\nimport PropTypes from 'prop-types';\nimport { z } from 'zod';\n\nimport { register_Action } from 'stateManagement/redux/actions/authActions';\n\nconst RegistrationFormSchema = z\n .object({\n firstName: z.string().min(1, { message: 'First name is required' }),\n lastName: z.string().min(1, { message: 'Last name is required' }),\n email: z.string().email({ message: 'Invalid email address' }),\n password: interfaces.dragon.user.passwordSchema,\n confirmPassword: z.string(),\n isAccepted: z.literal(true, {\n errorMap: () => ({ message: 'You must accept Terms and Conditions' }),\n }),\n })\n .refine((data) => data.password === data.confirmPassword, {\n message: 'Passwords do not match',\n path: ['confirmPassword'],\n });\n\nconst RegistrationForm = ({\n hasLabel,\n\n // actions\n register_Action,\n\n //reducer\n isAuthenticated,\n}) => {\n const [searchParams] = useSearchParams();\n const [isLoading, setIsLoading] = useState(false);\n const [passwordValidation, setPasswordValidation] = useState({\n length: false,\n uppercase: false,\n lowercase: false,\n number: false,\n special: false,\n });\n\n const {\n register,\n reset,\n handleSubmit,\n formState: { errors },\n } = useForm({\n resolver: zodResolver(RegistrationFormSchema),\n defaultValues: {\n firstName: searchParams.get('firstName') || '',\n lastName: searchParams.get('lastName') || '',\n email: searchParams.get('email') || '',\n password: '',\n confirmPassword: '',\n isAccepted: false,\n },\n });\n\n // Handler\n const onSubmit = (formData) => {\n register_Action(\n formData.firstName,\n formData.lastName,\n formData.email,\n formData.password\n );\n reset();\n setIsLoading(true);\n };\n\n if (isAuthenticated) {\n return ;\n }\n\n return isLoading ? (\n \n ) : (\n \n );\n};\n\nRegistrationForm.propTypes = {\n register_Action: PropTypes.func.isRequired,\n isAuthenticated: PropTypes.func.isRequired,\n layout: PropTypes.string,\n hasLabel: PropTypes.bool,\n};\n\nRegistrationForm.defaultProps = {\n layout: 'simple',\n hasLabel: false,\n};\n\nconst mapStateToProps = (state) => ({\n isAuthenticated: state.authReducer.isAuthenticated,\n});\n\nexport default connect(mapStateToProps, { register_Action })(RegistrationForm);\n\n","import React from 'react';\nimport { Image } from 'react-bootstrap';\n\nimport PropTypes from 'prop-types';\n\nimport { LOGOS } from 'blockscope/static/logoChains';\nimport { CLEAN_CHAIN_NAMES } from 'blockscope/static/supportedChains';\n\nimport ExplainerV2 from 'blockscope/components/blockscopeCommon/Tooltip';\n\nconst ChainLogo = ({ height = 25, chain }) => {\n return (\n {CLEAN_CHAIN_NAMES[chain]}\n }\n >\n \n \n );\n};\n\nChainLogo.propTypes = {\n height: PropTypes.number,\n chain: PropTypes.string.isRequired,\n};\n\nexport default ChainLogo;\n\n","import React, { Fragment } from 'react';\nimport { Form } from 'react-bootstrap';\nimport { Controller } from 'react-hook-form';\nimport { Input } from 'reactstrap';\n\nimport PropTypes from 'prop-types';\n\nconst ControlledInput = ({\n disabled = false,\n autoFocus,\n control,\n label,\n paramName,\n required = false,\n placeholder = '',\n textArea = false,\n textAreaRows = 5,\n validate,\n number = false,\n maxLength,\n type,\n forceLowerCase = false,\n}) => {\n return (\n \n {label && {label}}\n {\n return (\n {\n if (number) {\n field.onChange(parseFloat(e.target.value));\n } else {\n field.onChange(\n forceLowerCase\n ? `${e.target.value}`.toLowerCase()\n : e.target.value\n );\n }\n }}\n placeholder={placeholder}\n type={number ? 'number' : textArea ? 'textarea' : type || 'text'}\n rows={textAreaRows}\n />\n );\n }}\n />\n \n );\n};\nControlledInput.propTypes = {\n disabled: PropTypes.bool,\n autoFocus: PropTypes.bool,\n paramName: PropTypes.string,\n label: PropTypes.string,\n control: PropTypes.object,\n required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n placeholder: PropTypes.string,\n textArea: PropTypes.bool,\n textAreaRows: PropTypes.number,\n validate: PropTypes.any,\n onlyNumeric: PropTypes.bool,\n number: PropTypes.bool,\n maxLength: PropTypes.number,\n};\n\nexport default ControlledInput;\n\n","/*\n* React Tooltip\n* {@link https://github.com/ReactTooltip/react-tooltip}\n* @copyright ReactTooltip Team\n* @license MIT\n*/\nimport e,{createContext as t,useState as o,useCallback as r,useMemo as l,useContext as n,useRef as c,useEffect as i,useLayoutEffect as s,useImperativeHandle as a}from\"react\";import{arrow as u,computePosition as d,offset as p,flip as v,shift as m,autoUpdate as f}from\"@floating-ui/dom\";import y from\"classnames\";const h=\"react-tooltip-core-styles\",w=\"react-tooltip-base-styles\",b={core:!1,base:!1};function S({css:e,id:t=w,type:o=\"base\",ref:r}){var l,n;if(!e||\"undefined\"==typeof document||b[o])return;if(\"core\"===o&&\"undefined\"!=typeof process&&(null===(l=null===process||void 0===process?void 0:process.env)||void 0===l?void 0:l.REACT_TOOLTIP_DISABLE_CORE_STYLES))return;if(\"base\"!==o&&\"undefined\"!=typeof process&&(null===(n=null===process||void 0===process?void 0:process.env)||void 0===n?void 0:n.REACT_TOOLTIP_DISABLE_BASE_STYLES))return;\"core\"===o&&(t=h),r||(r={});const{insertAt:c}=r;if(document.getElementById(t))return void console.warn(`[react-tooltip] Element with id '${t}' already exists. Call \\`removeStyle()\\` first`);const i=document.head||document.getElementsByTagName(\"head\")[0],s=document.createElement(\"style\");s.id=t,s.type=\"text/css\",\"top\"===c&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e)),b[o]=!0}function E({type:e=\"base\",id:t=w}={}){if(!b[e])return;\"core\"===e&&(t=h);const o=document.getElementById(t);\"style\"===(null==o?void 0:o.tagName)?null==o||o.remove():console.warn(`[react-tooltip] Failed to remove 'style' element with id '${t}'. Call \\`injectStyle()\\` first`),b[e]=!1}const g=(e,t,o)=>{let r=null;const l=function(...l){const n=()=>{r=null,o||e.apply(this,l)};o&&!r&&(e.apply(this,l),r=setTimeout(n,t)),o||(r&&clearTimeout(r),r=setTimeout(n,t))};return l.cancel=()=>{r&&(clearTimeout(r),r=null)},l},_=\"DEFAULT_TOOLTIP_ID\",A={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},O=t({getTooltipData:()=>A}),T=({children:t})=>{const[n,c]=o({[_]:new Set}),[i,s]=o({[_]:{current:null}}),a=(e,...t)=>{c((o=>{var r;const l=null!==(r=o[e])&&void 0!==r?r:new Set;return t.forEach((e=>l.add(e))),{...o,[e]:new Set(l)}}))},u=(e,...t)=>{c((o=>{const r=o[e];return r?(t.forEach((e=>r.delete(e))),{...o}):o}))},d=r(((e=_)=>{var t,o;return{anchorRefs:null!==(t=n[e])&&void 0!==t?t:new Set,activeAnchor:null!==(o=i[e])&&void 0!==o?o:{current:null},attach:(...t)=>a(e,...t),detach:(...t)=>u(e,...t),setActiveAnchor:t=>((e,t)=>{s((o=>{var r;return(null===(r=o[e])||void 0===r?void 0:r.current)===t.current?o:{...o,[e]:t}}))})(e,t)}}),[n,i,a,u]),p=l((()=>({getTooltipData:d})),[d]);return e.createElement(O.Provider,{value:p},t)};function k(e=_){return n(O).getTooltipData(e)}const C=({tooltipId:t,children:o,className:r,place:l,content:n,html:s,variant:a,offset:u,wrapper:d,events:p,positionStrategy:v,delayShow:m,delayHide:f})=>{const{attach:h,detach:w}=k(t),b=c(null);return i((()=>(h(b),()=>{w(b)})),[]),e.createElement(\"span\",{ref:b,className:y(\"react-tooltip-wrapper\",r),\"data-tooltip-place\":l,\"data-tooltip-content\":n,\"data-tooltip-html\":s,\"data-tooltip-variant\":a,\"data-tooltip-offset\":u,\"data-tooltip-wrapper\":d,\"data-tooltip-events\":p,\"data-tooltip-position-strategy\":v,\"data-tooltip-delay-show\":m,\"data-tooltip-delay-hide\":f},o)},L=\"undefined\"!=typeof window?s:i,R=e=>{if(!(e instanceof HTMLElement||e instanceof SVGElement))return!1;const t=getComputedStyle(e);return[\"overflow\",\"overflow-x\",\"overflow-y\"].some((e=>{const o=t.getPropertyValue(e);return\"auto\"===o||\"scroll\"===o}))},x=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if(R(t))return t;t=t.parentElement}return document.scrollingElement||document.documentElement},N=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:o=null,place:r=\"top\",offset:l=10,strategy:n=\"absolute\",middlewares:c=[p(Number(l)),v({fallbackAxisSideDirection:\"start\"}),m({padding:5})],border:i})=>{if(!e)return{tooltipStyles:{},tooltipArrowStyles:{},place:r};if(null===t)return{tooltipStyles:{},tooltipArrowStyles:{},place:r};const s=c;return o?(s.push(u({element:o,padding:5})),d(e,t,{placement:r,strategy:n,middleware:s}).then((({x:e,y:t,placement:o,middlewareData:r})=>{var l,n;const c={left:`${e}px`,top:`${t}px`,border:i},{x:s,y:a}=null!==(l=r.arrow)&&void 0!==l?l:{x:0,y:0},u=null!==(n={top:\"bottom\",right:\"left\",bottom:\"top\",left:\"right\"}[o.split(\"-\")[0]])&&void 0!==n?n:\"bottom\",d=i&&{borderBottom:i,borderRight:i};let p=0;if(i){const e=`${i}`.match(/(\\d+)px/);p=(null==e?void 0:e[1])?Number(e[1]):1}return{tooltipStyles:c,tooltipArrowStyles:{left:null!=s?`${s}px`:\"\",top:null!=a?`${a}px`:\"\",right:\"\",bottom:\"\",...d,[u]:`-${4+p}px`},place:o}}))):d(e,t,{placement:\"bottom\",strategy:n,middleware:s}).then((({x:e,y:t,placement:o})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:o})))},$=e=>null!==e&&\"object\"==typeof e,I=(e,t)=>{if(!$(e)||!$(t))return e===t;const o=Object.keys(e),r=Object.keys(t);return o.length===r.length&&o.every((o=>{const r=e[o],l=t[o];return $(r)&&$(l)?I(r,l):r===l}))};var j={tooltip:\"core-styles-module_tooltip__3vRRp\",fixed:\"core-styles-module_fixed__pcSol\",arrow:\"core-styles-module_arrow__cvMwQ\",noArrow:\"core-styles-module_noArrow__xock6\",clickable:\"core-styles-module_clickable__ZuTTB\",show:\"core-styles-module_show__Nt9eE\",closing:\"core-styles-module_closing__sGnxF\"},B={tooltip:\"styles-module_tooltip__mnnfp\",arrow:\"styles-module_arrow__K0L3T\",dark:\"styles-module_dark__xNqje\",light:\"styles-module_light__Z6W-X\",success:\"styles-module_success__A2AKt\",warning:\"styles-module_warning__SCK0X\",error:\"styles-module_error__JvumD\",info:\"styles-module_info__BWdHW\"};const z=({forwardRef:t,id:l,className:n,classNameArrow:s,variant:u=\"dark\",anchorId:d,anchorSelect:p,place:v=\"top\",offset:m=10,events:h=[\"hover\"],openOnClick:w=!1,positionStrategy:b=\"absolute\",middlewares:S,wrapper:E,delayShow:_=0,delayHide:A=0,float:O=!1,hidden:T=!1,noArrow:C=!1,clickable:R=!1,closeOnEsc:$=!1,closeOnScroll:z=!1,closeOnResize:D=!1,openEvents:q,closeEvents:H,globalCloseEvents:M,imperativeModeOnly:W,style:P,position:V,afterShow:F,afterHide:K,content:U,contentWrapperRef:X,isOpen:Y,defaultIsOpen:G=!1,setIsOpen:Z,activeAnchor:J,setActiveAnchor:Q,border:ee,opacity:te,arrowColor:oe,role:re=\"tooltip\"})=>{var le;const ne=c(null),ce=c(null),ie=c(null),se=c(null),ae=c(null),[ue,de]=o({tooltipStyles:{},tooltipArrowStyles:{},place:v}),[pe,ve]=o(!1),[me,fe]=o(!1),[ye,he]=o(null),we=c(!1),be=c(null),{anchorRefs:Se,setActiveAnchor:Ee}=k(l),ge=c(!1),[_e,Ae]=o([]),Oe=c(!1),Te=w||h.includes(\"click\"),ke=Te||(null==q?void 0:q.click)||(null==q?void 0:q.dblclick)||(null==q?void 0:q.mousedown),Ce=q?{...q}:{mouseenter:!0,focus:!0,click:!1,dblclick:!1,mousedown:!1};!q&&Te&&Object.assign(Ce,{mouseenter:!1,focus:!1,click:!0});const Le=H?{...H}:{mouseleave:!0,blur:!0,click:!1,dblclick:!1,mouseup:!1};!H&&Te&&Object.assign(Le,{mouseleave:!1,blur:!1});const Re=M?{...M}:{escape:$||!1,scroll:z||!1,resize:D||!1,clickOutsideAnchor:ke||!1};W&&(Object.assign(Ce,{mouseenter:!1,focus:!1,click:!1,dblclick:!1,mousedown:!1}),Object.assign(Le,{mouseleave:!1,blur:!1,click:!1,dblclick:!1,mouseup:!1}),Object.assign(Re,{escape:!1,scroll:!1,resize:!1,clickOutsideAnchor:!1})),L((()=>(Oe.current=!0,()=>{Oe.current=!1})),[]);const xe=e=>{Oe.current&&(e&&fe(!0),setTimeout((()=>{Oe.current&&(null==Z||Z(e),void 0===Y&&ve(e))}),10))};i((()=>{if(void 0===Y)return()=>null;Y&&fe(!0);const e=setTimeout((()=>{ve(Y)}),10);return()=>{clearTimeout(e)}}),[Y]),i((()=>{if(pe!==we.current)if(ae.current&&clearTimeout(ae.current),we.current=pe,pe)null==F||F();else{const e=(e=>{const t=e.match(/^([\\d.]+)(m?s?)$/);if(!t)return 0;const[,o,r]=t;return\"s\"!==r&&\"ms\"!==r?0:Number(o)*(\"ms\"===r?1:1e3)})(getComputedStyle(document.body).getPropertyValue(\"--rt-transition-show-delay\"));ae.current=setTimeout((()=>{fe(!1),he(null),null==K||K()}),e+25)}}),[pe]);const Ne=e=>{de((t=>I(t,e)?t:e))},$e=(e=_)=>{ie.current&&clearTimeout(ie.current),me?xe(!0):ie.current=setTimeout((()=>{xe(!0)}),e)},Ie=(e=A)=>{se.current&&clearTimeout(se.current),se.current=setTimeout((()=>{ge.current||xe(!1)}),e)},je=e=>{var t;if(!e)return;const o=null!==(t=e.currentTarget)&&void 0!==t?t:e.target;if(!(null==o?void 0:o.isConnected))return Q(null),void Ee({current:null});_?$e():xe(!0),Q(o),Ee({current:o}),se.current&&clearTimeout(se.current)},Be=()=>{R?Ie(A||100):A?Ie():xe(!1),ie.current&&clearTimeout(ie.current)},ze=({x:e,y:t})=>{var o;const r={getBoundingClientRect:()=>({x:e,y:t,width:0,height:0,top:t,left:e,right:e,bottom:t})};N({place:null!==(o=null==ye?void 0:ye.place)&&void 0!==o?o:v,offset:m,elementReference:r,tooltipReference:ne.current,tooltipArrowReference:ce.current,strategy:b,middlewares:S,border:ee}).then((e=>{Ne(e)}))},De=e=>{if(!e)return;const t=e,o={x:t.clientX,y:t.clientY};ze(o),be.current=o},qe=e=>{var t;if(!pe)return;const o=e.target;if(!o.isConnected)return;if(null===(t=ne.current)||void 0===t?void 0:t.contains(o))return;[document.querySelector(`[id='${d}']`),..._e].some((e=>null==e?void 0:e.contains(o)))||(xe(!1),ie.current&&clearTimeout(ie.current))},He=g(je,50,!0),Me=g(Be,50,!0),We=e=>{Me.cancel(),He(e)},Pe=()=>{He.cancel(),Me()},Ve=r((()=>{var e,t;const o=null!==(e=null==ye?void 0:ye.position)&&void 0!==e?e:V;o?ze(o):O?be.current&&ze(be.current):(null==J?void 0:J.isConnected)&&N({place:null!==(t=null==ye?void 0:ye.place)&&void 0!==t?t:v,offset:m,elementReference:J,tooltipReference:ne.current,tooltipArrowReference:ce.current,strategy:b,middlewares:S,border:ee}).then((e=>{Oe.current&&Ne(e)}))}),[pe,J,U,P,v,null==ye?void 0:ye.place,m,b,V,null==ye?void 0:ye.position,O]);i((()=>{var e,t;const o=new Set(Se);_e.forEach((e=>{o.add({current:e})}));const r=document.querySelector(`[id='${d}']`);r&&o.add({current:r});const l=()=>{xe(!1)},n=x(J),c=x(ne.current);Re.scroll&&(window.addEventListener(\"scroll\",l),null==n||n.addEventListener(\"scroll\",l),null==c||c.addEventListener(\"scroll\",l));let i=null;Re.resize?window.addEventListener(\"resize\",l):J&&ne.current&&(i=f(J,ne.current,Ve,{ancestorResize:!0,elementResize:!0,layoutShift:!0}));const s=e=>{\"Escape\"===e.key&&xe(!1)};Re.escape&&window.addEventListener(\"keydown\",s),Re.clickOutsideAnchor&&window.addEventListener(\"click\",qe);const a=[],u=e=>{pe&&(null==e?void 0:e.target)===J||je(e)},p=e=>{pe&&(null==e?void 0:e.target)===J&&Be()},v=[\"mouseenter\",\"mouseleave\",\"focus\",\"blur\"],m=[\"click\",\"dblclick\",\"mousedown\",\"mouseup\"];Object.entries(Ce).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:We}):m.includes(e)&&a.push({event:e,listener:u}))})),Object.entries(Le).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:Pe}):m.includes(e)&&a.push({event:e,listener:p}))})),O&&a.push({event:\"pointermove\",listener:De});const y=()=>{ge.current=!0},h=()=>{ge.current=!1,Be()};return R&&!ke&&(null===(e=ne.current)||void 0===e||e.addEventListener(\"mouseenter\",y),null===(t=ne.current)||void 0===t||t.addEventListener(\"mouseleave\",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.addEventListener(e,t)}))})),()=>{var e,t;Re.scroll&&(window.removeEventListener(\"scroll\",l),null==n||n.removeEventListener(\"scroll\",l),null==c||c.removeEventListener(\"scroll\",l)),Re.resize?window.removeEventListener(\"resize\",l):null==i||i(),Re.clickOutsideAnchor&&window.removeEventListener(\"click\",qe),Re.escape&&window.removeEventListener(\"keydown\",s),R&&!ke&&(null===(e=ne.current)||void 0===e||e.removeEventListener(\"mouseenter\",y),null===(t=ne.current)||void 0===t||t.removeEventListener(\"mouseleave\",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var r;null===(r=o.current)||void 0===r||r.removeEventListener(e,t)}))}))}}),[J,Ve,me,Se,_e,q,H,M,Te,_,A]),i((()=>{var e,t;let o=null!==(t=null!==(e=null==ye?void 0:ye.anchorSelect)&&void 0!==e?e:p)&&void 0!==t?t:\"\";!o&&l&&(o=`[data-tooltip-id='${l}']`);const r=new MutationObserver((e=>{const t=[],r=[];e.forEach((e=>{if(\"attributes\"===e.type&&\"data-tooltip-id\"===e.attributeName){e.target.getAttribute(\"data-tooltip-id\")===l?t.push(e.target):e.oldValue===l&&r.push(e.target)}if(\"childList\"===e.type){if(J){const t=[...e.removedNodes].filter((e=>1===e.nodeType));if(o)try{r.push(...t.filter((e=>e.matches(o)))),r.push(...t.flatMap((e=>[...e.querySelectorAll(o)])))}catch(e){}t.some((e=>{var t;return!!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,J))&&(fe(!1),xe(!1),Q(null),ie.current&&clearTimeout(ie.current),se.current&&clearTimeout(se.current),!0)}))}if(o)try{const r=[...e.addedNodes].filter((e=>1===e.nodeType));t.push(...r.filter((e=>e.matches(o)))),t.push(...r.flatMap((e=>[...e.querySelectorAll(o)])))}catch(e){}}})),(t.length||r.length)&&Ae((e=>[...e.filter((e=>!r.includes(e))),...t]))}));return r.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[\"data-tooltip-id\"],attributeOldValue:!0}),()=>{r.disconnect()}}),[l,p,null==ye?void 0:ye.anchorSelect,J]),i((()=>{Ve()}),[Ve]),i((()=>{if(!(null==X?void 0:X.current))return()=>null;const e=new ResizeObserver((()=>{setTimeout((()=>Ve()))}));return e.observe(X.current),()=>{e.disconnect()}}),[U,null==X?void 0:X.current]),i((()=>{var e;const t=document.querySelector(`[id='${d}']`),o=[..._e,t];J&&o.includes(J)||Q(null!==(e=_e[0])&&void 0!==e?e:t)}),[d,_e,J]),i((()=>(G&&xe(!0),()=>{ie.current&&clearTimeout(ie.current),se.current&&clearTimeout(se.current)})),[]),i((()=>{var e;let t=null!==(e=null==ye?void 0:ye.anchorSelect)&&void 0!==e?e:p;if(!t&&l&&(t=`[data-tooltip-id='${l}']`),t)try{const e=Array.from(document.querySelectorAll(t));Ae(e)}catch(e){Ae([])}}),[l,p,null==ye?void 0:ye.anchorSelect]),i((()=>{ie.current&&(clearTimeout(ie.current),$e(_))}),[_]);const Fe=null!==(le=null==ye?void 0:ye.content)&&void 0!==le?le:U,Ke=pe&&Object.keys(ue.tooltipStyles).length>0;return a(t,(()=>({open:e=>{if(null==e?void 0:e.anchorSelect)try{document.querySelector(e.anchorSelect)}catch(t){return void console.warn(`[react-tooltip] \"${e.anchorSelect}\" is not a valid CSS selector`)}he(null!=e?e:null),(null==e?void 0:e.delay)?$e(e.delay):xe(!0)},close:e=>{(null==e?void 0:e.delay)?Ie(e.delay):xe(!1)},activeAnchor:J,place:ue.place,isOpen:Boolean(me&&!T&&Fe&&Ke)}))),me&&!T&&Fe?e.createElement(E,{id:l,role:re,className:y(\"react-tooltip\",j.tooltip,B.tooltip,B[u],n,`react-tooltip__place-${ue.place}`,j[Ke?\"show\":\"closing\"],Ke?\"react-tooltip__show\":\"react-tooltip__closing\",\"fixed\"===b&&j.fixed,R&&j.clickable),onTransitionEnd:e=>{ae.current&&clearTimeout(ae.current),pe||\"opacity\"!==e.propertyName||(fe(!1),he(null),null==K||K())},style:{...P,...ue.tooltipStyles,opacity:void 0!==te&&Ke?te:void 0},ref:ne},Fe,e.createElement(E,{className:y(\"react-tooltip-arrow\",j.arrow,B.arrow,s,C&&j.noArrow),style:{...ue.tooltipArrowStyles,background:oe?`linear-gradient(to right bottom, transparent 50%, ${oe} 50%)`:void 0},ref:ce})):null},D=({content:t})=>e.createElement(\"span\",{dangerouslySetInnerHTML:{__html:t}}),q=(e,t)=>!(\"CSS\"in window&&\"supports\"in window.CSS)||window.CSS.supports(e,t),H=e.forwardRef((({id:t,anchorId:r,anchorSelect:l,content:n,html:s,render:a,className:u,classNameArrow:d,variant:p=\"dark\",place:v=\"top\",offset:m=10,wrapper:f=\"div\",children:h=null,events:w=[\"hover\"],openOnClick:b=!1,positionStrategy:S=\"absolute\",middlewares:E,delayShow:g=0,delayHide:_=0,float:A=!1,hidden:O=!1,noArrow:T=!1,clickable:C=!1,closeOnEsc:L=!1,closeOnScroll:R=!1,closeOnResize:x=!1,openEvents:N,closeEvents:$,globalCloseEvents:I,imperativeModeOnly:j=!1,style:B,position:H,isOpen:M,defaultIsOpen:W=!1,disableStyleInjection:P=!1,border:V,opacity:F,arrowColor:K,setIsOpen:U,afterShow:X,afterHide:Y,role:G=\"tooltip\"},Z)=>{const[J,Q]=o(n),[ee,te]=o(s),[oe,re]=o(v),[le,ne]=o(p),[ce,ie]=o(m),[se,ae]=o(g),[ue,de]=o(_),[pe,ve]=o(A),[me,fe]=o(O),[ye,he]=o(f),[we,be]=o(w),[Se,Ee]=o(S),[ge,_e]=o(null),[Ae,Oe]=o(null),Te=c(P),{anchorRefs:ke,activeAnchor:Ce}=k(t),Le=e=>null==e?void 0:e.getAttributeNames().reduce(((t,o)=>{var r;if(o.startsWith(\"data-tooltip-\")){t[o.replace(/^data-tooltip-/,\"\")]=null!==(r=null==e?void 0:e.getAttribute(o))&&void 0!==r?r:null}return t}),{}),Re=e=>{const t={place:e=>{var t;re(null!==(t=e)&&void 0!==t?t:v)},content:e=>{Q(null!=e?e:n)},html:e=>{te(null!=e?e:s)},variant:e=>{var t;ne(null!==(t=e)&&void 0!==t?t:p)},offset:e=>{ie(null===e?m:Number(e))},wrapper:e=>{var t;he(null!==(t=e)&&void 0!==t?t:f)},events:e=>{const t=null==e?void 0:e.split(\" \");be(null!=t?t:w)},\"position-strategy\":e=>{var t;Ee(null!==(t=e)&&void 0!==t?t:S)},\"delay-show\":e=>{ae(null===e?g:Number(e))},\"delay-hide\":e=>{de(null===e?_:Number(e))},float:e=>{ve(null===e?A:\"true\"===e)},hidden:e=>{fe(null===e?O:\"true\"===e)},\"class-name\":e=>{_e(e)}};Object.values(t).forEach((e=>e(null))),Object.entries(e).forEach((([e,o])=>{var r;null===(r=t[e])||void 0===r||r.call(t,o)}))};i((()=>{Q(n)}),[n]),i((()=>{te(s)}),[s]),i((()=>{re(v)}),[v]),i((()=>{ne(p)}),[p]),i((()=>{ie(m)}),[m]),i((()=>{ae(g)}),[g]),i((()=>{de(_)}),[_]),i((()=>{ve(A)}),[A]),i((()=>{fe(O)}),[O]),i((()=>{Ee(S)}),[S]),i((()=>{Te.current!==P&&console.warn(\"[react-tooltip] Do not change `disableStyleInjection` dynamically.\")}),[P]),i((()=>{\"undefined\"!=typeof window&&window.dispatchEvent(new CustomEvent(\"react-tooltip-inject-styles\",{detail:{disableCore:\"core\"===P,disableBase:P}}))}),[]),i((()=>{var e;const o=new Set(ke);let n=l;if(!n&&t&&(n=`[data-tooltip-id='${t}']`),n)try{document.querySelectorAll(n).forEach((e=>{o.add({current:e})}))}catch(e){console.warn(`[react-tooltip] \"${n}\" is not a valid CSS selector`)}const c=document.querySelector(`[id='${r}']`);if(c&&o.add({current:c}),!o.size)return()=>null;const i=null!==(e=null!=Ae?Ae:c)&&void 0!==e?e:Ce.current,s=new MutationObserver((e=>{e.forEach((e=>{var t;if(!i||\"attributes\"!==e.type||!(null===(t=e.attributeName)||void 0===t?void 0:t.startsWith(\"data-tooltip-\")))return;const o=Le(i);Re(o)}))})),a={attributes:!0,childList:!1,subtree:!1};if(i){const e=Le(i);Re(e),s.observe(i,a)}return()=>{s.disconnect()}}),[ke,Ce,Ae,r,l]),i((()=>{(null==B?void 0:B.border)&&console.warn(\"[react-tooltip] Do not set `style.border`. Use `border` prop instead.\"),V&&!q(\"border\",`${V}`)&&console.warn(`[react-tooltip] \"${V}\" is not a valid \\`border\\`.`),(null==B?void 0:B.opacity)&&console.warn(\"[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead.\"),F&&!q(\"opacity\",`${F}`)&&console.warn(`[react-tooltip] \"${F}\" is not a valid \\`opacity\\`.`)}),[]);let xe=h;const Ne=c(null);if(a){const t=a({content:(null==Ae?void 0:Ae.getAttribute(\"data-tooltip-content\"))||J||null,activeAnchor:Ae});xe=t?e.createElement(\"div\",{ref:Ne,className:\"react-tooltip-content-wrapper\"},t):null}else J&&(xe=J);ee&&(xe=e.createElement(D,{content:ee}));const $e={forwardRef:Z,id:t,anchorId:r,anchorSelect:l,className:y(u,ge),classNameArrow:d,content:xe,contentWrapperRef:Ne,place:oe,variant:le,offset:ce,wrapper:ye,events:we,openOnClick:b,positionStrategy:Se,middlewares:E,delayShow:se,delayHide:ue,float:pe,hidden:me,noArrow:T,clickable:C,closeOnEsc:L,closeOnScroll:R,closeOnResize:x,openEvents:N,closeEvents:$,globalCloseEvents:I,imperativeModeOnly:j,style:B,position:H,isOpen:M,defaultIsOpen:W,border:V,opacity:F,arrowColor:K,setIsOpen:U,afterShow:X,afterHide:Y,activeAnchor:Ae,setActiveAnchor:e=>Oe(e),role:G};return e.createElement(z,{...$e})}));\"undefined\"!=typeof window&&window.addEventListener(\"react-tooltip-inject-styles\",(e=>{e.detail.disableCore||S({css:`:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9;--rt-transition-show-delay:0.15s;--rt-transition-closing-delay:0.15s}.core-styles-module_tooltip__3vRRp{position:absolute;top:0;left:0;pointer-events:none;opacity:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{position:absolute;background:inherit}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay)ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay)ease-in}`,type:\"core\"}),e.detail.disableBase||S({css:`\n.styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:8px;height:8px}[class*='react-tooltip__place-top']>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*='react-tooltip__place-right']>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*='react-tooltip__place-bottom']>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*='react-tooltip__place-left']>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`,type:\"base\"})}));export{H as Tooltip,T as TooltipProvider,C as TooltipWrapper,E as removeStyle};\n","import React, { Fragment, useEffect } from 'react';\nimport { useState } from 'react';\nimport { Alert, Modal } from 'react-bootstrap';\nimport { Tooltip } from 'react-tooltip';\n\nimport { faInfoCircle } from '@fortawesome/free-solid-svg-icons';\nimport PropTypes from 'prop-types';\n\nimport HoverableIcon from 'blockscope/components/blockscopeCommon/HoverableIcon';\n\nconst ExplainerModal = ({ explain: { title, heading, description } }) => {\n const [showModal, setShowModal] = useState(false);\n\n const toggle = () => {\n setShowModal(!showModal);\n };\n\n return (\n \n toggle()}\n className='fs--2 px-1'\n size='xs'\n />\n toggle()}>\n \n {title}\n \n \n \n
\n {heading}\n \n {description}\n
\n \n \n \n \n );\n};\n\nconst Explainer = ({\n text,\n anchorId,\n children,\n place = 'top',\n hideTooltip,\n}) => {\n const [id, setId] = useState();\n\n useEffect(() => {\n setId(anchorId || Math.random().toString());\n }, [anchorId]);\n return (\n \n \n {children || (\n \n )}\n \n \n \n );\n};\n\nExplainerModal.propTypes = {\n explain: PropTypes.shape({\n title: PropTypes.string,\n heading: PropTypes.string,\n description: PropTypes.string,\n }),\n};\n\nExplainer.propTypes = {\n anchorId: PropTypes.string,\n text: PropTypes.string.isRequired,\n children: PropTypes.node,\n place: PropTypes.string,\n hideTooltip: PropTypes.bool,\n};\nExplainer.Modal = ExplainerModal;\n\nexport default Explainer;\n\n","import React, { useState } from 'react';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport PropTypes from 'prop-types';\n\nconst HoverableIcon = ({\n icon,\n customColors = ['grey', 'black'],\n ...props\n}) => {\n const [color, setColor] = useState(customColors[0]);\n\n const handleMouseEnter = () => {\n setColor(customColors[1]);\n };\n const handleMouseLeave = () => {\n setColor(customColors[0]);\n };\n\n return (\n \n );\n};\n\nHoverableIcon.propTypes = {\n icon: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n customColors: PropTypes.array,\n};\n\nexport default HoverableIcon;\n\n","function composeEventHandlers(\n originalEventHandler?: (event: E) => void,\n ourEventHandler?: (event: E) => void,\n { checkForDefaultPrevented = true } = {}\n) {\n return function handleEvent(event: E) {\n originalEventHandler?.(event);\n\n if (checkForDefaultPrevented === false || !((event as unknown) as Event).defaultPrevented) {\n return ourEventHandler?.(event);\n }\n };\n}\n\nexport { composeEventHandlers };\n","import * as React from 'react';\n\ntype PossibleRef = React.Ref | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef(ref: PossibleRef, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject).current = value;\n }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs(...refs: PossibleRef[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs(...refs: PossibleRef[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import * as React from 'react';\n\nfunction createContext(\n rootComponentName: string,\n defaultContext?: ContextValueType\n) {\n const Context = React.createContext(defaultContext);\n\n function Provider(props: ContextValueType & { children: React.ReactNode }) {\n const { children, ...context } = props;\n // Only re-memoize when prop values change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const value = React.useMemo(() => context, Object.values(context)) as ContextValueType;\n return {children};\n }\n\n function useContext(consumerName: string) {\n const context = React.useContext(Context);\n if (context) return context;\n if (defaultContext !== undefined) return defaultContext;\n // if a defaultContext wasn't specified, it's a required context.\n throw new Error(`\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``);\n }\n\n Provider.displayName = rootComponentName + 'Provider';\n return [Provider, useContext] as const;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * createContextScope\n * -----------------------------------------------------------------------------------------------*/\n\ntype Scope = { [scopeName: string]: React.Context[] } | undefined;\ntype ScopeHook = (scope: Scope) => { [__scopeProp: string]: Scope };\ninterface CreateScope {\n scopeName: string;\n (): ScopeHook;\n}\n\nfunction createContextScope(scopeName: string, createContextScopeDeps: CreateScope[] = []) {\n let defaultContexts: any[] = [];\n\n /* -----------------------------------------------------------------------------------------------\n * createContext\n * ---------------------------------------------------------------------------------------------*/\n\n function createContext(\n rootComponentName: string,\n defaultContext?: ContextValueType\n ) {\n const BaseContext = React.createContext(defaultContext);\n const index = defaultContexts.length;\n defaultContexts = [...defaultContexts, defaultContext];\n\n function Provider(\n props: ContextValueType & { scope: Scope; children: React.ReactNode }\n ) {\n const { scope, children, ...context } = props;\n const Context = scope?.[scopeName][index] || BaseContext;\n // Only re-memoize when prop values change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const value = React.useMemo(() => context, Object.values(context)) as ContextValueType;\n return {children};\n }\n\n function useContext(consumerName: string, scope: Scope) {\n const Context = scope?.[scopeName][index] || BaseContext;\n const context = React.useContext(Context);\n if (context) return context;\n if (defaultContext !== undefined) return defaultContext;\n // if a defaultContext wasn't specified, it's a required context.\n throw new Error(`\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``);\n }\n\n Provider.displayName = rootComponentName + 'Provider';\n return [Provider, useContext] as const;\n }\n\n /* -----------------------------------------------------------------------------------------------\n * createScope\n * ---------------------------------------------------------------------------------------------*/\n\n const createScope: CreateScope = () => {\n const scopeContexts = defaultContexts.map((defaultContext) => {\n return React.createContext(defaultContext);\n });\n return function useScope(scope: Scope) {\n const contexts = scope?.[scopeName] || scopeContexts;\n return React.useMemo(\n () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),\n [scope, contexts]\n );\n };\n };\n\n createScope.scopeName = scopeName;\n return [createContext, composeContextScopes(createScope, ...createContextScopeDeps)] as const;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * composeContextScopes\n * -----------------------------------------------------------------------------------------------*/\n\nfunction composeContextScopes(...scopes: CreateScope[]) {\n const baseScope = scopes[0];\n if (scopes.length === 1) return baseScope;\n\n const createScope: CreateScope = () => {\n const scopeHooks = scopes.map((createScope) => ({\n useScope: createScope(),\n scopeName: createScope.scopeName,\n }));\n\n return function useComposedScopes(overrideScopes) {\n const nextScopes = scopeHooks.reduce((nextScopes, { useScope, scopeName }) => {\n // We are calling a hook inside a callback which React warns against to avoid inconsistent\n // renders, however, scoping doesn't have render side effects so we ignore the rule.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const scopeProps = useScope(overrideScopes);\n const currentScope = scopeProps[`__scope${scopeName}`];\n return { ...nextScopes, ...currentScope };\n }, {});\n\n return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);\n };\n };\n\n createScope.scopeName = baseScope.scopeName;\n return createScope;\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { createContext, createContextScope };\nexport type { CreateScope, Scope };\n","import * as React from 'react';\nimport { composeRefs } from '@radix-ui/react-compose-refs';\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotProps extends React.HTMLAttributes {\n children?: React.ReactNode;\n}\n\nconst Slot = React.forwardRef((props, forwardedRef) => {\n const { children, ...slotProps } = props;\n const childrenArray = React.Children.toArray(children);\n const slottable = childrenArray.find(isSlottable);\n\n if (slottable) {\n // the new element to render is the one passed as a child of `Slottable`\n const newElement = slottable.props.children as React.ReactNode;\n\n const newChildren = childrenArray.map((child) => {\n if (child === slottable) {\n // because the new element will be the one rendered, we are only interested\n // in grabbing its children (`newElement.props.children`)\n if (React.Children.count(newElement) > 1) return React.Children.only(null);\n return React.isValidElement(newElement)\n ? (newElement.props.children as React.ReactNode)\n : null;\n } else {\n return child;\n }\n });\n\n return (\n \n {React.isValidElement(newElement)\n ? React.cloneElement(newElement, undefined, newChildren)\n : null}\n \n );\n }\n\n return (\n \n {children}\n \n );\n});\n\nSlot.displayName = 'Slot';\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n children: React.ReactNode;\n}\n\nconst SlotClone = React.forwardRef((props, forwardedRef) => {\n const { children, ...slotProps } = props;\n\n if (React.isValidElement(children)) {\n return React.cloneElement(children, {\n ...mergeProps(slotProps, children.props),\n ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,\n });\n }\n\n return React.Children.count(children) > 1 ? React.Children.only(null) : null;\n});\n\nSlotClone.displayName = 'SlotClone';\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slottable = ({ children }: { children: React.ReactNode }) => {\n return <>{children};\n};\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record;\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement {\n return React.isValidElement(child) && child.type === Slottable;\n}\n\nfunction mergeProps(slotProps: AnyProps, childProps: AnyProps) {\n // all child props should override\n const overrideProps = { ...childProps };\n\n for (const propName in childProps) {\n const slotPropValue = slotProps[propName];\n const childPropValue = childProps[propName];\n\n const isHandler = /^on[A-Z]/.test(propName);\n if (isHandler) {\n // if the handler exists on both, we compose them\n if (slotPropValue && childPropValue) {\n overrideProps[propName] = (...args: unknown[]) => {\n childPropValue(...args);\n slotPropValue(...args);\n };\n }\n // but if it exists only on the slot, we use only this one\n else if (slotPropValue) {\n overrideProps[propName] = slotPropValue;\n }\n }\n // if it's `style`, we merge them\n else if (propName === 'style') {\n overrideProps[propName] = { ...slotPropValue, ...childPropValue };\n } else if (propName === 'className') {\n overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');\n }\n }\n\n return { ...slotProps, ...overrideProps };\n}\n\nconst Root = Slot;\n\nexport {\n Slot,\n Slottable,\n //\n Root,\n};\nexport type { SlotProps };\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { Slot } from '@radix-ui/react-slot';\n\nconst NODES = [\n 'a',\n 'button',\n 'div',\n 'form',\n 'h2',\n 'h3',\n 'img',\n 'input',\n 'label',\n 'li',\n 'nav',\n 'ol',\n 'p',\n 'span',\n 'svg',\n 'ul',\n] as const;\n\n// Temporary while we await merge of this fix:\n// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396\n// prettier-ignore\ntype PropsWithoutRef
= P extends any ? ('ref' extends keyof P ? Pick> : P) : P;\ntype ComponentPropsWithoutRef = PropsWithoutRef<\n React.ComponentProps\n>;\n\ntype Primitives = { [E in typeof NODES[number]]: PrimitiveForwardRefComponent };\ntype PrimitivePropsWithRef = React.ComponentPropsWithRef & {\n asChild?: boolean;\n};\n\ninterface PrimitiveForwardRefComponent\n extends React.ForwardRefExoticComponent> {}\n\n/* -------------------------------------------------------------------------------------------------\n * Primitive\n * -----------------------------------------------------------------------------------------------*/\n\nconst Primitive = NODES.reduce((primitive, node) => {\n const Node = React.forwardRef((props: PrimitivePropsWithRef, forwardedRef: any) => {\n const { asChild, ...primitiveProps } = props;\n const Comp: any = asChild ? Slot : node;\n\n React.useEffect(() => {\n (window as any)[Symbol.for('radix-ui')] = true;\n }, []);\n\n return ;\n });\n\n Node.displayName = `Primitive.${node}`;\n\n return { ...primitive, [node]: Node };\n}, {} as Primitives);\n\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * Flush custom event dispatch\n * https://github.com/radix-ui/primitives/pull/1378\n *\n * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.\n *\n * Internally, React prioritises events in the following order:\n * - discrete\n * - continuous\n * - default\n *\n * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350\n *\n * `discrete` is an important distinction as updates within these events are applied immediately.\n * React however, is not able to infer the priority of custom event types due to how they are detected internally.\n * Because of this, it's possible for updates from custom events to be unexpectedly batched when\n * dispatched by another `discrete` event.\n *\n * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.\n * This utility should be used when dispatching a custom event from within another `discrete` event, this utility\n * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.\n * For example:\n *\n * dispatching a known click 👎\n * target.dispatchEvent(new Event(‘click’))\n *\n * dispatching a custom type within a non-discrete event 👎\n * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}\n *\n * dispatching a custom type within a `discrete` event 👍\n * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}\n *\n * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's not recommended to use\n * this utility with them. This is because it's possible for those handlers to be called implicitly during render\n * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.\n */\n\nfunction dispatchDiscreteCustomEvent(target: E['target'], event: E) {\n if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Primitive;\n\nexport {\n Primitive,\n //\n Root,\n //\n dispatchDiscreteCustomEvent,\n};\nexport type { ComponentPropsWithoutRef, PrimitivePropsWithRef };\n","import * as React from 'react';\n\n/**\n * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a\n * prop or avoid re-executing effects when passed as a dependency\n */\nfunction useCallbackRef any>(callback: T | undefined): T {\n const callbackRef = React.useRef(callback);\n\n React.useEffect(() => {\n callbackRef.current = callback;\n });\n\n // https://github.com/facebook/react/issues/19240\n return React.useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);\n}\n\nexport { useCallbackRef };\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Primitive, dispatchDiscreteCustomEvent } from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayer\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'DismissableLayer';\nconst CONTEXT_UPDATE = 'dismissableLayer.update';\nconst POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';\nconst FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';\n\nlet originalBodyPointerEvents: string;\n\nconst DismissableLayerContext = React.createContext({\n layers: new Set(),\n layersWithOutsidePointerEventsDisabled: new Set(),\n branches: new Set(),\n});\n\ntype DismissableLayerElement = React.ElementRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface DismissableLayerProps extends PrimitiveDivProps {\n /**\n * When `true`, hover/focus/click interactions will be disabled on elements outside\n * the `DismissableLayer`. Users will need to click twice on outside elements to\n * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n */\n disableOutsidePointerEvents?: boolean;\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n onEscapeKeyDown?: (event: KeyboardEvent) => void;\n /**\n * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;\n /**\n * Event handler called when the focus moves outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onFocusOutside?: (event: FocusOutsideEvent) => void;\n /**\n * Event handler called when an interaction happens outside the `DismissableLayer`.\n * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n * Can be prevented.\n */\n onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;\n /**\n * Handler called when the `DismissableLayer` should be dismissed\n */\n onDismiss?: () => void;\n}\n\nconst DismissableLayer = React.forwardRef(\n (props, forwardedRef) => {\n const {\n disableOutsidePointerEvents = false,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n onDismiss,\n ...layerProps\n } = props;\n const context = React.useContext(DismissableLayerContext);\n const [node, setNode] = React.useState(null);\n const ownerDocument = node?.ownerDocument ?? globalThis?.document;\n const [, force] = React.useState({});\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node));\n const layers = Array.from(context.layers);\n const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1); // prettier-ignore\n const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore\n const index = node ? layers.indexOf(node) : -1;\n const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;\n const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;\n\n const pointerDownOutside = usePointerDownOutside((event) => {\n const target = event.target as HTMLElement;\n const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));\n if (!isPointerEventsEnabled || isPointerDownOnBranch) return;\n onPointerDownOutside?.(event);\n onInteractOutside?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n }, ownerDocument);\n\n const focusOutside = useFocusOutside((event) => {\n const target = event.target as HTMLElement;\n const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));\n if (isFocusInBranch) return;\n onFocusOutside?.(event);\n onInteractOutside?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n }, ownerDocument);\n\n useEscapeKeydown((event) => {\n const isHighestLayer = index === context.layers.size - 1;\n if (!isHighestLayer) return;\n onEscapeKeyDown?.(event);\n if (!event.defaultPrevented && onDismiss) {\n event.preventDefault();\n onDismiss();\n }\n }, ownerDocument);\n\n React.useEffect(() => {\n if (!node) return;\n if (disableOutsidePointerEvents) {\n if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;\n ownerDocument.body.style.pointerEvents = 'none';\n }\n context.layersWithOutsidePointerEventsDisabled.add(node);\n }\n context.layers.add(node);\n dispatchUpdate();\n return () => {\n if (\n disableOutsidePointerEvents &&\n context.layersWithOutsidePointerEventsDisabled.size === 1\n ) {\n ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;\n }\n };\n }, [node, ownerDocument, disableOutsidePointerEvents, context]);\n\n /**\n * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect\n * because a change to `disableOutsidePointerEvents` would remove this layer from the stack\n * and add it to the end again so the layering order wouldn't be _creation order_.\n * We only want them to be removed from context stacks when unmounted.\n */\n React.useEffect(() => {\n return () => {\n if (!node) return;\n context.layers.delete(node);\n context.layersWithOutsidePointerEventsDisabled.delete(node);\n dispatchUpdate();\n };\n }, [node, context]);\n\n React.useEffect(() => {\n const handleUpdate = () => force({});\n document.addEventListener(CONTEXT_UPDATE, handleUpdate);\n return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);\n }, []);\n\n return (\n \n );\n }\n);\n\nDismissableLayer.displayName = DISMISSABLE_LAYER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayerBranch\n * -----------------------------------------------------------------------------------------------*/\n\nconst BRANCH_NAME = 'DismissableLayerBranch';\n\ntype DismissableLayerBranchElement = React.ElementRef;\ninterface DismissableLayerBranchProps extends PrimitiveDivProps {}\n\nconst DismissableLayerBranch = React.forwardRef<\n DismissableLayerBranchElement,\n DismissableLayerBranchProps\n>((props, forwardedRef) => {\n const context = React.useContext(DismissableLayerContext);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n\n React.useEffect(() => {\n const node = ref.current;\n if (node) {\n context.branches.add(node);\n return () => {\n context.branches.delete(node);\n };\n }\n }, [context.branches]);\n\n return ;\n});\n\nDismissableLayerBranch.displayName = BRANCH_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;\ntype FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;\n\n/**\n * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nfunction usePointerDownOutside(\n onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,\n ownerDocument: Document = globalThis?.document\n) {\n const handlePointerDownOutside = useCallbackRef(onPointerDownOutside) as EventListener;\n const isPointerInsideReactTreeRef = React.useRef(false);\n const handleClickRef = React.useRef(() => {});\n\n React.useEffect(() => {\n const handlePointerDown = (event: PointerEvent) => {\n if (event.target && !isPointerInsideReactTreeRef.current) {\n const eventDetail = { originalEvent: event };\n\n function handleAndDispatchPointerDownOutsideEvent() {\n handleAndDispatchCustomEvent(\n POINTER_DOWN_OUTSIDE,\n handlePointerDownOutside,\n eventDetail,\n { discrete: true }\n );\n }\n\n /**\n * On touch devices, we need to wait for a click event because browsers implement\n * a ~350ms delay between the time the user stops touching the display and when the\n * browser executres events. We need to ensure we don't reactivate pointer-events within\n * this timeframe otherwise the browser may execute events that should have been prevented.\n *\n * Additionally, this also lets us deal automatically with cancellations when a click event\n * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n *\n * This is why we also continuously remove the previous listener, because we cannot be\n * certain that it was raised, and therefore cleaned-up.\n */\n if (event.pointerType === 'touch') {\n ownerDocument.removeEventListener('click', handleClickRef.current);\n handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;\n ownerDocument.addEventListener('click', handleClickRef.current, { once: true });\n } else {\n handleAndDispatchPointerDownOutsideEvent();\n }\n } else {\n // We need to remove the event listener in case the outside click has been canceled.\n // See: https://github.com/radix-ui/primitives/issues/2171\n ownerDocument.removeEventListener('click', handleClickRef.current);\n }\n isPointerInsideReactTreeRef.current = false;\n };\n /**\n * if this hook executes in a component that mounts via a `pointerdown` event, the event\n * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n * this by delaying the event listener registration on the document.\n * This is not React specific, but rather how the DOM works, ie:\n * ```\n * button.addEventListener('pointerdown', () => {\n * console.log('I will log');\n * document.addEventListener('pointerdown', () => {\n * console.log('I will also log');\n * })\n * });\n */\n const timerId = window.setTimeout(() => {\n ownerDocument.addEventListener('pointerdown', handlePointerDown);\n }, 0);\n return () => {\n window.clearTimeout(timerId);\n ownerDocument.removeEventListener('pointerdown', handlePointerDown);\n ownerDocument.removeEventListener('click', handleClickRef.current);\n };\n }, [ownerDocument, handlePointerDownOutside]);\n\n return {\n // ensures we check React component tree (not just DOM tree)\n onPointerDownCapture: () => (isPointerInsideReactTreeRef.current = true),\n };\n}\n\n/**\n * Listens for when focus happens outside a react subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nfunction useFocusOutside(\n onFocusOutside?: (event: FocusOutsideEvent) => void,\n ownerDocument: Document = globalThis?.document\n) {\n const handleFocusOutside = useCallbackRef(onFocusOutside) as EventListener;\n const isFocusInsideReactTreeRef = React.useRef(false);\n\n React.useEffect(() => {\n const handleFocus = (event: FocusEvent) => {\n if (event.target && !isFocusInsideReactTreeRef.current) {\n const eventDetail = { originalEvent: event };\n handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {\n discrete: false,\n });\n }\n };\n ownerDocument.addEventListener('focusin', handleFocus);\n return () => ownerDocument.removeEventListener('focusin', handleFocus);\n }, [ownerDocument, handleFocusOutside]);\n\n return {\n onFocusCapture: () => (isFocusInsideReactTreeRef.current = true),\n onBlurCapture: () => (isFocusInsideReactTreeRef.current = false),\n };\n}\n\nfunction dispatchUpdate() {\n const event = new CustomEvent(CONTEXT_UPDATE);\n document.dispatchEvent(event);\n}\n\nfunction handleAndDispatchCustomEvent(\n name: string,\n handler: ((event: E) => void) | undefined,\n detail: { originalEvent: OriginalEvent } & (E extends CustomEvent ? D : never),\n { discrete }: { discrete: boolean }\n) {\n const target = detail.originalEvent.target;\n const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });\n if (handler) target.addEventListener(name, handler as EventListener, { once: true });\n\n if (discrete) {\n dispatchDiscreteCustomEvent(target, event);\n } else {\n target.dispatchEvent(event);\n }\n}\n\nconst Root = DismissableLayer;\nconst Branch = DismissableLayerBranch;\n\nexport {\n DismissableLayer,\n DismissableLayerBranch,\n //\n Root,\n Branch,\n};\nexport type { DismissableLayerProps };\n","import * as React from 'react';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\n\n/**\n * Listens for when the escape key is down\n */\nfunction useEscapeKeydown(\n onEscapeKeyDownProp?: (event: KeyboardEvent) => void,\n ownerDocument: Document = globalThis?.document\n) {\n const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);\n\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n onEscapeKeyDown(event);\n }\n };\n ownerDocument.addEventListener('keydown', handleKeyDown);\n return () => ownerDocument.removeEventListener('keydown', handleKeyDown);\n }, [onEscapeKeyDown, ownerDocument]);\n}\n\nexport { useEscapeKeydown };\n","import * as React from 'react';\n\n/**\n * On the server, React emits a warning when calling `useLayoutEffect`.\n * This is because neither `useLayoutEffect` nor `useEffect` run on the server.\n * We use this safe version which suppresses the warning by replacing it with a noop on the server.\n *\n * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect\n */\nconst useLayoutEffect = Boolean(globalThis?.document) ? React.useLayoutEffect : () => {};\n\nexport { useLayoutEffect };\n","import * as React from 'react';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\n\n// We `toString()` to prevent bundlers from trying to `import { useId } from 'react';`\nconst useReactId = (React as any)['useId'.toString()] || (() => undefined);\nlet count = 0;\n\nfunction useId(deterministicId?: string): string {\n const [id, setId] = React.useState(useReactId());\n // React versions older than 18 will have client-side ids only.\n useLayoutEffect(() => {\n if (!deterministicId) setId((reactId) => reactId ?? String(count++));\n }, [deterministicId]);\n return deterministicId || (id ? `radix-${id}` : '');\n}\n\nexport { useId };\n","import * as React from 'react';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Arrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'Arrow';\n\ntype ArrowElement = React.ElementRef;\ntype PrimitiveSvgProps = Radix.ComponentPropsWithoutRef;\ninterface ArrowProps extends PrimitiveSvgProps {}\n\nconst Arrow = React.forwardRef((props, forwardedRef) => {\n const { children, width = 10, height = 5, ...arrowProps } = props;\n return (\n \n {/* We use their children if they're slotting to replace the whole svg */}\n {props.asChild ? children : }\n \n );\n});\n\nArrow.displayName = NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Arrow;\n\nexport {\n Arrow,\n //\n Root,\n};\nexport type { ArrowProps };\n","import * as React from 'react';\nimport {\n useFloating,\n autoUpdate,\n offset,\n shift,\n limitShift,\n hide,\n arrow as floatingUIarrow,\n flip,\n size,\n} from '@floating-ui/react-dom';\nimport * as ArrowPrimitive from '@radix-ui/react-arrow';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useSize } from '@radix-ui/react-use-size';\n\nimport type { Placement, Middleware } from '@floating-ui/react-dom';\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\nimport type { Measurable } from '@radix-ui/rect';\n\nconst SIDE_OPTIONS = ['top', 'right', 'bottom', 'left'] as const;\nconst ALIGN_OPTIONS = ['start', 'center', 'end'] as const;\n\ntype Side = typeof SIDE_OPTIONS[number];\ntype Align = typeof ALIGN_OPTIONS[number];\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper';\n\ntype ScopedProps
= P & { __scopePopper?: Scope };\nconst [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);\n\ntype PopperContextValue = {\n anchor: Measurable | null;\n onAnchorChange(anchor: Measurable | null): void;\n};\nconst [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);\n\ninterface PopperProps {\n children?: React.ReactNode;\n}\nconst Popper: React.FC = (props: ScopedProps) => {\n const { __scopePopper, children } = props;\n const [anchor, setAnchor] = React.useState(null);\n return (\n \n {children}\n \n );\n};\n\nPopper.displayName = POPPER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor';\n\ntype PopperAnchorElement = React.ElementRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface PopperAnchorProps extends PrimitiveDivProps {\n virtualRef?: React.RefObject;\n}\n\nconst PopperAnchor = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopePopper, virtualRef, ...anchorProps } = props;\n const context = usePopperContext(ANCHOR_NAME, __scopePopper);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n\n React.useEffect(() => {\n // Consumer can anchor the popper to something that isn't\n // a DOM node e.g. pointer position, so we override the\n // `anchorRef` with their virtual ref in this case.\n context.onAnchorChange(virtualRef?.current || ref.current);\n });\n\n return virtualRef ? null : ;\n }\n);\n\nPopperAnchor.displayName = ANCHOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent';\n\ntype PopperContentContextValue = {\n placedSide: Side;\n onArrowChange(arrow: HTMLSpanElement | null): void;\n arrowX?: number;\n arrowY?: number;\n shouldHideArrow: boolean;\n};\n\nconst [PopperContentProvider, useContentContext] =\n createPopperContext(CONTENT_NAME);\n\ntype Boundary = Element | null;\n\ntype PopperContentElement = React.ElementRef;\ninterface PopperContentProps extends PrimitiveDivProps {\n side?: Side;\n sideOffset?: number;\n align?: Align;\n alignOffset?: number;\n arrowPadding?: number;\n avoidCollisions?: boolean;\n collisionBoundary?: Boundary | Boundary[];\n collisionPadding?: number | Partial>;\n sticky?: 'partial' | 'always';\n hideWhenDetached?: boolean;\n updatePositionStrategy?: 'optimized' | 'always';\n onPlaced?: () => void;\n}\n\nconst PopperContent = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopePopper,\n side = 'bottom',\n sideOffset = 0,\n align = 'center',\n alignOffset = 0,\n arrowPadding = 0,\n avoidCollisions = true,\n collisionBoundary = [],\n collisionPadding: collisionPaddingProp = 0,\n sticky = 'partial',\n hideWhenDetached = false,\n updatePositionStrategy = 'optimized',\n onPlaced,\n ...contentProps\n } = props;\n\n const context = usePopperContext(CONTENT_NAME, __scopePopper);\n\n const [content, setContent] = React.useState(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));\n\n const [arrow, setArrow] = React.useState(null);\n const arrowSize = useSize(arrow);\n const arrowWidth = arrowSize?.width ?? 0;\n const arrowHeight = arrowSize?.height ?? 0;\n\n const desiredPlacement = (side + (align !== 'center' ? '-' + align : '')) as Placement;\n\n const collisionPadding =\n typeof collisionPaddingProp === 'number'\n ? collisionPaddingProp\n : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };\n\n const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];\n const hasExplicitBoundaries = boundary.length > 0;\n\n const detectOverflowOptions = {\n padding: collisionPadding,\n boundary: boundary.filter(isNotNull),\n // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries\n altBoundary: hasExplicitBoundaries,\n };\n\n const { refs, floatingStyles, placement, isPositioned, middlewareData } = useFloating({\n // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues\n strategy: 'fixed',\n placement: desiredPlacement,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, {\n animationFrame: updatePositionStrategy === 'always',\n });\n return cleanup;\n },\n elements: {\n reference: context.anchor,\n },\n middleware: [\n offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),\n avoidCollisions &&\n shift({\n mainAxis: true,\n crossAxis: false,\n limiter: sticky === 'partial' ? limitShift() : undefined,\n ...detectOverflowOptions,\n }),\n avoidCollisions && flip({ ...detectOverflowOptions }),\n size({\n ...detectOverflowOptions,\n apply: ({ elements, rects, availableWidth, availableHeight }) => {\n const { width: anchorWidth, height: anchorHeight } = rects.reference;\n const contentStyle = elements.floating.style;\n contentStyle.setProperty('--radix-popper-available-width', `${availableWidth}px`);\n contentStyle.setProperty('--radix-popper-available-height', `${availableHeight}px`);\n contentStyle.setProperty('--radix-popper-anchor-width', `${anchorWidth}px`);\n contentStyle.setProperty('--radix-popper-anchor-height', `${anchorHeight}px`);\n },\n }),\n arrow && floatingUIarrow({ element: arrow, padding: arrowPadding }),\n transformOrigin({ arrowWidth, arrowHeight }),\n hideWhenDetached && hide({ strategy: 'referenceHidden', ...detectOverflowOptions }),\n ],\n });\n\n const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);\n\n const handlePlaced = useCallbackRef(onPlaced);\n useLayoutEffect(() => {\n if (isPositioned) {\n handlePlaced?.();\n }\n }, [isPositioned, handlePlaced]);\n\n const arrowX = middlewareData.arrow?.x;\n const arrowY = middlewareData.arrow?.y;\n const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;\n\n const [contentZIndex, setContentZIndex] = React.useState();\n useLayoutEffect(() => {\n if (content) setContentZIndex(window.getComputedStyle(content).zIndex);\n }, [content]);\n\n return (\n \n \n \n \n \n );\n }\n);\n\nPopperContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopperArrow';\n\nconst OPPOSITE_SIDE: Record = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n};\n\ntype PopperArrowElement = React.ElementRef;\ntype ArrowProps = Radix.ComponentPropsWithoutRef;\ninterface PopperArrowProps extends ArrowProps {}\n\nconst PopperArrow = React.forwardRef(function PopperArrow(\n props: ScopedProps,\n forwardedRef\n) {\n const { __scopePopper, ...arrowProps } = props;\n const contentContext = useContentContext(ARROW_NAME, __scopePopper);\n const baseSide = OPPOSITE_SIDE[contentContext.placedSide];\n\n return (\n // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)\n // doesn't report size as we'd expect on SVG elements.\n // it reports their bounding box which is effectively the largest path inside the SVG.\n \n \n \n );\n});\n\nPopperArrow.displayName = ARROW_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction isNotNull(value: T | null): value is T {\n return value !== null;\n}\n\nconst transformOrigin = (options: { arrowWidth: number; arrowHeight: number }): Middleware => ({\n name: 'transformOrigin',\n options,\n fn(data) {\n const { placement, rects, middlewareData } = data;\n\n const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;\n const isArrowHidden = cannotCenterArrow;\n const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;\n const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;\n\n const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);\n const noArrowAlign = { start: '0%', center: '50%', end: '100%' }[placedAlign];\n\n const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;\n const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;\n\n let x = '';\n let y = '';\n\n if (placedSide === 'bottom') {\n x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;\n y = `${-arrowHeight}px`;\n } else if (placedSide === 'top') {\n x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;\n y = `${rects.floating.height + arrowHeight}px`;\n } else if (placedSide === 'right') {\n x = `${-arrowHeight}px`;\n y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;\n } else if (placedSide === 'left') {\n x = `${rects.floating.width + arrowHeight}px`;\n y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;\n }\n return { data: { x, y } };\n },\n});\n\nfunction getSideAndAlignFromPlacement(placement: Placement) {\n const [side, align = 'center'] = placement.split('-');\n return [side as Side, align as Align] as const;\n}\n\nconst Root = Popper;\nconst Anchor = PopperAnchor;\nconst Content = PopperContent;\nconst Arrow = PopperArrow;\n\nexport {\n createPopperScope,\n //\n Popper,\n PopperAnchor,\n PopperContent,\n PopperArrow,\n //\n Root,\n Anchor,\n Content,\n Arrow,\n //\n SIDE_OPTIONS,\n ALIGN_OPTIONS,\n};\nexport type { PopperProps, PopperAnchorProps, PopperContentProps, PopperArrowProps };\n","/// \n\nimport * as React from 'react';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\n\nfunction useSize(element: HTMLElement | null) {\n const [size, setSize] = React.useState<{ width: number; height: number } | undefined>(undefined);\n\n useLayoutEffect(() => {\n if (element) {\n // provide size as early as possible\n setSize({ width: element.offsetWidth, height: element.offsetHeight });\n\n const resizeObserver = new ResizeObserver((entries) => {\n if (!Array.isArray(entries)) {\n return;\n }\n\n // Since we only observe the one element, we don't need to loop over the\n // array\n if (!entries.length) {\n return;\n }\n\n const entry = entries[0];\n let width: number;\n let height: number;\n\n if ('borderBoxSize' in entry) {\n const borderSizeEntry = entry['borderBoxSize'];\n // iron out differences between browsers\n const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;\n width = borderSize['inlineSize'];\n height = borderSize['blockSize'];\n } else {\n // for browsers that don't support `borderBoxSize`\n // we calculate it ourselves to get the correct border box.\n width = element.offsetWidth;\n height = element.offsetHeight;\n }\n\n setSize({ width, height });\n });\n\n resizeObserver.observe(element, { box: 'border-box' });\n\n return () => resizeObserver.unobserve(element);\n } else {\n // We only want to reset to `undefined` when the element becomes `null`,\n // not if it changes to another element.\n setSize(undefined);\n }\n }, [element]);\n\n return size;\n}\n\nexport { useSize };\n","import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Portal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'Portal';\n\ntype PortalElement = React.ElementRef;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef;\ninterface PortalProps extends PrimitiveDivProps {\n /**\n * An optional container where the portaled content should be appended.\n */\n container?: HTMLElement | null;\n}\n\nconst Portal = React.forwardRef((props, forwardedRef) => {\n const { container = globalThis?.document?.body, ...portalProps } = props;\n return container\n ? ReactDOM.createPortal(, container)\n : null;\n});\n\nPortal.displayName = PORTAL_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Portal;\n\nexport {\n Portal,\n //\n Root,\n};\nexport type { PortalProps };\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useStateMachine } from './useStateMachine';\n\ninterface PresenceProps {\n children: React.ReactElement | ((props: { present: boolean }) => React.ReactElement);\n present: boolean;\n}\n\nconst Presence: React.FC = (props) => {\n const { present, children } = props;\n const presence = usePresence(present);\n\n const child = (\n typeof children === 'function'\n ? children({ present: presence.isPresent })\n : React.Children.only(children)\n ) as React.ReactElement;\n\n const ref = useComposedRefs(presence.ref, (child as any).ref);\n const forceMount = typeof children === 'function';\n return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;\n};\n\nPresence.displayName = 'Presence';\n\n/* -------------------------------------------------------------------------------------------------\n * usePresence\n * -----------------------------------------------------------------------------------------------*/\n\nfunction usePresence(present: boolean) {\n const [node, setNode] = React.useState();\n const stylesRef = React.useRef({} as any);\n const prevPresentRef = React.useRef(present);\n const prevAnimationNameRef = React.useRef('none');\n const initialState = present ? 'mounted' : 'unmounted';\n const [state, send] = useStateMachine(initialState, {\n mounted: {\n UNMOUNT: 'unmounted',\n ANIMATION_OUT: 'unmountSuspended',\n },\n unmountSuspended: {\n MOUNT: 'mounted',\n ANIMATION_END: 'unmounted',\n },\n unmounted: {\n MOUNT: 'mounted',\n },\n });\n\n React.useEffect(() => {\n const currentAnimationName = getAnimationName(stylesRef.current);\n prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none';\n }, [state]);\n\n useLayoutEffect(() => {\n const styles = stylesRef.current;\n const wasPresent = prevPresentRef.current;\n const hasPresentChanged = wasPresent !== present;\n\n if (hasPresentChanged) {\n const prevAnimationName = prevAnimationNameRef.current;\n const currentAnimationName = getAnimationName(styles);\n\n if (present) {\n send('MOUNT');\n } else if (currentAnimationName === 'none' || styles?.display === 'none') {\n // If there is no exit animation or the element is hidden, animations won't run\n // so we unmount instantly\n send('UNMOUNT');\n } else {\n /**\n * When `present` changes to `false`, we check changes to animation-name to\n * determine whether an animation has started. We chose this approach (reading\n * computed styles) because there is no `animationrun` event and `animationstart`\n * fires after `animation-delay` has expired which would be too late.\n */\n const isAnimating = prevAnimationName !== currentAnimationName;\n\n if (wasPresent && isAnimating) {\n send('ANIMATION_OUT');\n } else {\n send('UNMOUNT');\n }\n }\n\n prevPresentRef.current = present;\n }\n }, [present, send]);\n\n useLayoutEffect(() => {\n if (node) {\n /**\n * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`\n * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we\n * make sure we only trigger ANIMATION_END for the currently active animation.\n */\n const handleAnimationEnd = (event: AnimationEvent) => {\n const currentAnimationName = getAnimationName(stylesRef.current);\n const isCurrentAnimation = currentAnimationName.includes(event.animationName);\n if (event.target === node && isCurrentAnimation) {\n // With React 18 concurrency this update is applied\n // a frame after the animation ends, creating a flash of visible content.\n // By manually flushing we ensure they sync within a frame, removing the flash.\n ReactDOM.flushSync(() => send('ANIMATION_END'));\n }\n };\n const handleAnimationStart = (event: AnimationEvent) => {\n if (event.target === node) {\n // if animation occurred, store its name as the previous animation.\n prevAnimationNameRef.current = getAnimationName(stylesRef.current);\n }\n };\n node.addEventListener('animationstart', handleAnimationStart);\n node.addEventListener('animationcancel', handleAnimationEnd);\n node.addEventListener('animationend', handleAnimationEnd);\n return () => {\n node.removeEventListener('animationstart', handleAnimationStart);\n node.removeEventListener('animationcancel', handleAnimationEnd);\n node.removeEventListener('animationend', handleAnimationEnd);\n };\n } else {\n // Transition to the unmounted state if the node is removed prematurely.\n // We avoid doing so during cleanup as the node may change but still exist.\n send('ANIMATION_END');\n }\n }, [node, send]);\n\n return {\n isPresent: ['mounted', 'unmountSuspended'].includes(state),\n ref: React.useCallback((node: HTMLElement) => {\n if (node) stylesRef.current = getComputedStyle(node);\n setNode(node);\n }, []),\n };\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getAnimationName(styles?: CSSStyleDeclaration) {\n return styles?.animationName || 'none';\n}\n\nexport { Presence };\nexport type { PresenceProps };\n","import * as React from 'react';\n\ntype Machine = { [k: string]: { [k: string]: S } };\ntype MachineState = keyof T;\ntype MachineEvent = keyof UnionToIntersection;\n\n// 🤯 https://fettblog.eu/typescript-union-to-intersection/\ntype UnionToIntersection = (T extends any ? (x: T) => any : never) extends (x: infer R) => any\n ? R\n : never;\n\nexport function useStateMachine(\n initialState: MachineState,\n machine: M & Machine>\n) {\n return React.useReducer((state: MachineState, event: MachineEvent): MachineState => {\n const nextState = (machine[state] as any)[event];\n return nextState ?? state;\n }, initialState);\n}\n","import * as React from 'react';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\n\ntype UseControllableStateParams = {\n prop?: T | undefined;\n defaultProp?: T | undefined;\n onChange?: (state: T) => void;\n};\n\ntype SetStateFn = (prevState?: T) => T;\n\nfunction useControllableState({\n prop,\n defaultProp,\n onChange = () => {},\n}: UseControllableStateParams) {\n const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n const isControlled = prop !== undefined;\n const value = isControlled ? prop : uncontrolledProp;\n const handleChange = useCallbackRef(onChange);\n\n const setValue: React.Dispatch> = React.useCallback(\n (nextValue) => {\n if (isControlled) {\n const setter = nextValue as SetStateFn;\n const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n if (value !== prop) handleChange(value as T);\n } else {\n setUncontrolledProp(nextValue);\n }\n },\n [isControlled, prop, setUncontrolledProp, handleChange]\n );\n\n return [value, setValue] as const;\n}\n\nfunction useUncontrolledState({\n defaultProp,\n onChange,\n}: Omit, 'prop'>) {\n const uncontrolledState = React.useState(defaultProp);\n const [value] = uncontrolledState;\n const prevValueRef = React.useRef(value);\n const handleChange = useCallbackRef(onChange);\n\n React.useEffect(() => {\n if (prevValueRef.current !== value) {\n handleChange(value as T);\n prevValueRef.current = value;\n }\n }, [value, prevValueRef, handleChange]);\n\n return uncontrolledState;\n}\n\nexport { useControllableState };\n","import * as React from 'react';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * VisuallyHidden\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'VisuallyHidden';\n\ntype VisuallyHiddenElement = React.ElementRef;\ntype PrimitiveSpanProps = Radix.ComponentPropsWithoutRef;\ninterface VisuallyHiddenProps extends PrimitiveSpanProps {}\n\nconst VisuallyHidden = React.forwardRef(\n (props, forwardedRef) => {\n return (\n \n );\n }\n);\n\nVisuallyHidden.displayName = NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = VisuallyHidden;\n\nexport {\n VisuallyHidden,\n //\n Root,\n};\nexport type { VisuallyHiddenProps };\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\nimport { useId } from '@radix-ui/react-id';\nimport * as PopperPrimitive from '@radix-ui/react-popper';\nimport { createPopperScope } from '@radix-ui/react-popper';\nimport { Portal as PortalPrimitive } from '@radix-ui/react-portal';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slottable } from '@radix-ui/react-slot';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\ntype ScopedProps
= P & { __scopeTooltip?: Scope };\nconst [createTooltipContext, createTooltipScope] = createContextScope('Tooltip', [\n createPopperScope,\n]);\nconst usePopperScope = createPopperScope();\n\n/* -------------------------------------------------------------------------------------------------\n * TooltipProvider\n * -----------------------------------------------------------------------------------------------*/\n\nconst PROVIDER_NAME = 'TooltipProvider';\nconst DEFAULT_DELAY_DURATION = 700;\nconst TOOLTIP_OPEN = 'tooltip.open';\n\ntype TooltipProviderContextValue = {\n isOpenDelayed: boolean;\n delayDuration: number;\n onOpen(): void;\n onClose(): void;\n onPointerInTransitChange(inTransit: boolean): void;\n isPointerInTransitRef: React.MutableRefObject;\n disableHoverableContent: boolean;\n};\n\nconst [TooltipProviderContextProvider, useTooltipProviderContext] =\n createTooltipContext(PROVIDER_NAME);\n\ninterface TooltipProviderProps {\n children: React.ReactNode;\n /**\n * The duration from when the pointer enters the trigger until the tooltip gets opened.\n * @defaultValue 700\n */\n delayDuration?: number;\n /**\n * How much time a user has to enter another trigger without incurring a delay again.\n * @defaultValue 300\n */\n skipDelayDuration?: number;\n /**\n * When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.\n * @defaultValue false\n */\n disableHoverableContent?: boolean;\n}\n\nconst TooltipProvider: React.FC = (\n props: ScopedProps\n) => {\n const {\n __scopeTooltip,\n delayDuration = DEFAULT_DELAY_DURATION,\n skipDelayDuration = 300,\n disableHoverableContent = false,\n children,\n } = props;\n const [isOpenDelayed, setIsOpenDelayed] = React.useState(true);\n const isPointerInTransitRef = React.useRef(false);\n const skipDelayTimerRef = React.useRef(0);\n\n React.useEffect(() => {\n const skipDelayTimer = skipDelayTimerRef.current;\n return () => window.clearTimeout(skipDelayTimer);\n }, []);\n\n return (\n {\n window.clearTimeout(skipDelayTimerRef.current);\n setIsOpenDelayed(false);\n }, [])}\n onClose={React.useCallback(() => {\n window.clearTimeout(skipDelayTimerRef.current);\n skipDelayTimerRef.current = window.setTimeout(\n () => setIsOpenDelayed(true),\n skipDelayDuration\n );\n }, [skipDelayDuration])}\n isPointerInTransitRef={isPointerInTransitRef}\n onPointerInTransitChange={React.useCallback((inTransit: boolean) => {\n isPointerInTransitRef.current = inTransit;\n }, [])}\n disableHoverableContent={disableHoverableContent}\n >\n {children}\n \n );\n};\n\nTooltipProvider.displayName = PROVIDER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * Tooltip\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOOLTIP_NAME = 'Tooltip';\n\ntype TooltipContextValue = {\n contentId: string;\n open: boolean;\n stateAttribute: 'closed' | 'delayed-open' | 'instant-open';\n trigger: TooltipTriggerElement | null;\n onTriggerChange(trigger: TooltipTriggerElement | null): void;\n onTriggerEnter(): void;\n onTriggerLeave(): void;\n onOpen(): void;\n onClose(): void;\n disableHoverableContent: boolean;\n};\n\nconst [TooltipContextProvider, useTooltipContext] =\n createTooltipContext(TOOLTIP_NAME);\n\ninterface TooltipProps {\n children?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /**\n * The duration from when the pointer enters the trigger until the tooltip gets opened. This will\n * override the prop with the same name passed to Provider.\n * @defaultValue 700\n */\n delayDuration?: number;\n /**\n * When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.\n * @defaultValue false\n */\n disableHoverableContent?: boolean;\n}\n\nconst Tooltip: React.FC = (props: ScopedProps) => {\n const {\n __scopeTooltip,\n children,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n disableHoverableContent: disableHoverableContentProp,\n delayDuration: delayDurationProp,\n } = props;\n const providerContext = useTooltipProviderContext(TOOLTIP_NAME, props.__scopeTooltip);\n const popperScope = usePopperScope(__scopeTooltip);\n const [trigger, setTrigger] = React.useState(null);\n const contentId = useId();\n const openTimerRef = React.useRef(0);\n const disableHoverableContent =\n disableHoverableContentProp ?? providerContext.disableHoverableContent;\n const delayDuration = delayDurationProp ?? providerContext.delayDuration;\n const wasOpenDelayedRef = React.useRef(false);\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: (open) => {\n if (open) {\n providerContext.onOpen();\n\n // as `onChange` is called within a lifecycle method we\n // avoid dispatching via `dispatchDiscreteCustomEvent`.\n document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));\n } else {\n providerContext.onClose();\n }\n onOpenChange?.(open);\n },\n });\n const stateAttribute = React.useMemo(() => {\n return open ? (wasOpenDelayedRef.current ? 'delayed-open' : 'instant-open') : 'closed';\n }, [open]);\n\n const handleOpen = React.useCallback(() => {\n window.clearTimeout(openTimerRef.current);\n wasOpenDelayedRef.current = false;\n setOpen(true);\n }, [setOpen]);\n\n const handleClose = React.useCallback(() => {\n window.clearTimeout(openTimerRef.current);\n setOpen(false);\n }, [setOpen]);\n\n const handleDelayedOpen = React.useCallback(() => {\n window.clearTimeout(openTimerRef.current);\n openTimerRef.current = window.setTimeout(() => {\n wasOpenDelayedRef.current = true;\n setOpen(true);\n }, delayDuration);\n }, [delayDuration, setOpen]);\n\n React.useEffect(() => {\n return () => window.clearTimeout(openTimerRef.current);\n }, []);\n\n return (\n \n {\n if (providerContext.isOpenDelayed) handleDelayedOpen();\n else handleOpen();\n }, [providerContext.isOpenDelayed, handleDelayedOpen, handleOpen])}\n onTriggerLeave={React.useCallback(() => {\n if (disableHoverableContent) {\n handleClose();\n } else {\n // Clear the timer in case the pointer leaves the trigger before the tooltip is opened.\n window.clearTimeout(openTimerRef.current);\n }\n }, [handleClose, disableHoverableContent])}\n onOpen={handleOpen}\n onClose={handleClose}\n disableHoverableContent={disableHoverableContent}\n >\n {children}\n \n \n );\n};\n\nTooltip.displayName = TOOLTIP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TooltipTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TooltipTrigger';\n\ntype TooltipTriggerElement = React.ElementRef;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef;\ninterface TooltipTriggerProps extends PrimitiveButtonProps {}\n\nconst TooltipTrigger = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeTooltip, ...triggerProps } = props;\n const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);\n const providerContext = useTooltipProviderContext(TRIGGER_NAME, __scopeTooltip);\n const popperScope = usePopperScope(__scopeTooltip);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref, context.onTriggerChange);\n const isPointerDownRef = React.useRef(false);\n const hasPointerMoveOpenedRef = React.useRef(false);\n const handlePointerUp = React.useCallback(() => (isPointerDownRef.current = false), []);\n\n React.useEffect(() => {\n return () => document.removeEventListener('pointerup', handlePointerUp);\n }, [handlePointerUp]);\n\n return (\n \n {\n if (event.pointerType === 'touch') return;\n if (\n !hasPointerMoveOpenedRef.current &&\n !providerContext.isPointerInTransitRef.current\n ) {\n context.onTriggerEnter();\n hasPointerMoveOpenedRef.current = true;\n }\n })}\n onPointerLeave={composeEventHandlers(props.onPointerLeave, () => {\n context.onTriggerLeave();\n hasPointerMoveOpenedRef.current = false;\n })}\n onPointerDown={composeEventHandlers(props.onPointerDown, () => {\n isPointerDownRef.current = true;\n document.addEventListener('pointerup', handlePointerUp, { once: true });\n })}\n onFocus={composeEventHandlers(props.onFocus, () => {\n if (!isPointerDownRef.current) context.onOpen();\n })}\n onBlur={composeEventHandlers(props.onBlur, context.onClose)}\n onClick={composeEventHandlers(props.onClick, context.onClose)}\n />\n \n );\n }\n);\n\nTooltipTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TooltipPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'TooltipPortal';\n\ntype PortalContextValue = { forceMount?: true };\nconst [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {\n forceMount: undefined,\n});\n\ntype PortalProps = React.ComponentPropsWithoutRef;\ninterface TooltipPortalProps {\n children?: React.ReactNode;\n /**\n * Specify a container element to portal the content into.\n */\n container?: PortalProps['container'];\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst TooltipPortal: React.FC = (props: ScopedProps) => {\n const { __scopeTooltip, forceMount, children, container } = props;\n const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);\n return (\n \n \n \n {children}\n \n \n \n );\n};\n\nTooltipPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TooltipContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TooltipContent';\n\ntype TooltipContentElement = TooltipContentImplElement;\ninterface TooltipContentProps extends TooltipContentImplProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst TooltipContent = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);\n const { forceMount = portalContext.forceMount, side = 'top', ...contentProps } = props;\n const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);\n\n return (\n \n {context.disableHoverableContent ? (\n \n ) : (\n \n )}\n \n );\n }\n);\n\ntype Point = { x: number; y: number };\ntype Polygon = Point[];\n\ntype TooltipContentHoverableElement = TooltipContentImplElement;\ninterface TooltipContentHoverableProps extends TooltipContentImplProps {}\n\nconst TooltipContentHoverable = React.forwardRef<\n TooltipContentHoverableElement,\n TooltipContentHoverableProps\n>((props: ScopedProps, forwardedRef) => {\n const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);\n const providerContext = useTooltipProviderContext(CONTENT_NAME, props.__scopeTooltip);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const [pointerGraceArea, setPointerGraceArea] = React.useState(null);\n\n const { trigger, onClose } = context;\n const content = ref.current;\n\n const { onPointerInTransitChange } = providerContext;\n\n const handleRemoveGraceArea = React.useCallback(() => {\n setPointerGraceArea(null);\n onPointerInTransitChange(false);\n }, [onPointerInTransitChange]);\n\n const handleCreateGraceArea = React.useCallback(\n (event: PointerEvent, hoverTarget: HTMLElement) => {\n const currentTarget = event.currentTarget as HTMLElement;\n const exitPoint = { x: event.clientX, y: event.clientY };\n const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());\n const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);\n const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());\n const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);\n setPointerGraceArea(graceArea);\n onPointerInTransitChange(true);\n },\n [onPointerInTransitChange]\n );\n\n React.useEffect(() => {\n return () => handleRemoveGraceArea();\n }, [handleRemoveGraceArea]);\n\n React.useEffect(() => {\n if (trigger && content) {\n const handleTriggerLeave = (event: PointerEvent) => handleCreateGraceArea(event, content);\n const handleContentLeave = (event: PointerEvent) => handleCreateGraceArea(event, trigger);\n\n trigger.addEventListener('pointerleave', handleTriggerLeave);\n content.addEventListener('pointerleave', handleContentLeave);\n return () => {\n trigger.removeEventListener('pointerleave', handleTriggerLeave);\n content.removeEventListener('pointerleave', handleContentLeave);\n };\n }\n }, [trigger, content, handleCreateGraceArea, handleRemoveGraceArea]);\n\n React.useEffect(() => {\n if (pointerGraceArea) {\n const handleTrackPointerGrace = (event: PointerEvent) => {\n const target = event.target as HTMLElement;\n const pointerPosition = { x: event.clientX, y: event.clientY };\n const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);\n const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);\n\n if (hasEnteredTarget) {\n handleRemoveGraceArea();\n } else if (isPointerOutsideGraceArea) {\n handleRemoveGraceArea();\n onClose();\n }\n };\n document.addEventListener('pointermove', handleTrackPointerGrace);\n return () => document.removeEventListener('pointermove', handleTrackPointerGrace);\n }\n }, [trigger, content, pointerGraceArea, onClose, handleRemoveGraceArea]);\n\n return ;\n});\n\nconst [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] =\n createTooltipContext(TOOLTIP_NAME, { isInside: false });\n\ntype TooltipContentImplElement = React.ElementRef;\ntype DismissableLayerProps = Radix.ComponentPropsWithoutRef;\ntype PopperContentProps = Radix.ComponentPropsWithoutRef;\ninterface TooltipContentImplProps extends Omit {\n /**\n * A more descriptive label for accessibility purpose\n */\n 'aria-label'?: string;\n\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];\n /**\n * Event handler called when the a `pointerdown` event happens outside of the `Tooltip`.\n * Can be prevented.\n */\n onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'];\n}\n\nconst TooltipContentImpl = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeTooltip,\n children,\n 'aria-label': ariaLabel,\n onEscapeKeyDown,\n onPointerDownOutside,\n ...contentProps\n } = props;\n const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);\n const popperScope = usePopperScope(__scopeTooltip);\n const { onClose } = context;\n\n // Close this tooltip if another one opens\n React.useEffect(() => {\n document.addEventListener(TOOLTIP_OPEN, onClose);\n return () => document.removeEventListener(TOOLTIP_OPEN, onClose);\n }, [onClose]);\n\n // Close the tooltip if the trigger is scrolled\n React.useEffect(() => {\n if (context.trigger) {\n const handleScroll = (event: Event) => {\n const target = event.target as HTMLElement;\n if (target?.contains(context.trigger)) onClose();\n };\n window.addEventListener('scroll', handleScroll, { capture: true });\n return () => window.removeEventListener('scroll', handleScroll, { capture: true });\n }\n }, [context.trigger, onClose]);\n\n return (\n event.preventDefault()}\n onDismiss={onClose}\n >\n \n {children}\n \n \n {ariaLabel || children}\n \n \n \n \n );\n }\n);\n\nTooltipContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TooltipArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'TooltipArrow';\n\ntype TooltipArrowElement = React.ElementRef;\ntype PopperArrowProps = Radix.ComponentPropsWithoutRef;\ninterface TooltipArrowProps extends PopperArrowProps {}\n\nconst TooltipArrow = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeTooltip, ...arrowProps } = props;\n const popperScope = usePopperScope(__scopeTooltip);\n const visuallyHiddenContentContext = useVisuallyHiddenContentContext(\n ARROW_NAME,\n __scopeTooltip\n );\n // if the arrow is inside the `VisuallyHidden`, we don't want to render it all to\n // prevent issues in positioning the arrow due to the duplicate\n return visuallyHiddenContentContext.isInside ? null : (\n \n );\n }\n);\n\nTooltipArrow.displayName = ARROW_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype Side = NonNullable;\n\nfunction getExitSideFromRect(point: Point, rect: DOMRect): Side {\n const top = Math.abs(rect.top - point.y);\n const bottom = Math.abs(rect.bottom - point.y);\n const right = Math.abs(rect.right - point.x);\n const left = Math.abs(rect.left - point.x);\n\n switch (Math.min(top, bottom, right, left)) {\n case left:\n return 'left';\n case right:\n return 'right';\n case top:\n return 'top';\n case bottom:\n return 'bottom';\n default:\n throw new Error('unreachable');\n }\n}\n\nfunction getPaddedExitPoints(exitPoint: Point, exitSide: Side, padding = 5) {\n const paddedExitPoints: Point[] = [];\n switch (exitSide) {\n case 'top':\n paddedExitPoints.push(\n { x: exitPoint.x - padding, y: exitPoint.y + padding },\n { x: exitPoint.x + padding, y: exitPoint.y + padding }\n );\n break;\n case 'bottom':\n paddedExitPoints.push(\n { x: exitPoint.x - padding, y: exitPoint.y - padding },\n { x: exitPoint.x + padding, y: exitPoint.y - padding }\n );\n break;\n case 'left':\n paddedExitPoints.push(\n { x: exitPoint.x + padding, y: exitPoint.y - padding },\n { x: exitPoint.x + padding, y: exitPoint.y + padding }\n );\n break;\n case 'right':\n paddedExitPoints.push(\n { x: exitPoint.x - padding, y: exitPoint.y - padding },\n { x: exitPoint.x - padding, y: exitPoint.y + padding }\n );\n break;\n }\n return paddedExitPoints;\n}\n\nfunction getPointsFromRect(rect: DOMRect) {\n const { top, right, bottom, left } = rect;\n return [\n { x: left, y: top },\n { x: right, y: top },\n { x: right, y: bottom },\n { x: left, y: bottom },\n ];\n}\n\n// Determine if a point is inside of a polygon.\n// Based on https://github.com/substack/point-in-polygon\nfunction isPointInPolygon(point: Point, polygon: Polygon) {\n const { x, y } = point;\n let inside = false;\n for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\n const xi = polygon[i].x;\n const yi = polygon[i].y;\n const xj = polygon[j].x;\n const yj = polygon[j].y;\n\n // prettier-ignore\n const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);\n if (intersect) inside = !inside;\n }\n\n return inside;\n}\n\n// Returns a new array of points representing the convex hull of the given set of points.\n// https://www.nayuki.io/page/convex-hull-algorithm\nfunction getHull
(points: Readonly>): Array
{\n const newPoints: Array
= points.slice();\n newPoints.sort((a: Point, b: Point) => {\n if (a.x < b.x) return -1;\n else if (a.x > b.x) return +1;\n else if (a.y < b.y) return -1;\n else if (a.y > b.y) return +1;\n else return 0;\n });\n return getHullPresorted(newPoints);\n}\n\n// Returns the convex hull, assuming that each points[i] <= points[i + 1]. Runs in O(n) time.\nfunction getHullPresorted
(points: Readonly>): Array
{\n if (points.length <= 1) return points.slice();\n\n const upperHull: Array
= [];\n for (let i = 0; i < points.length; i++) {\n const p = points[i];\n while (upperHull.length >= 2) {\n const q = upperHull[upperHull.length - 1];\n const r = upperHull[upperHull.length - 2];\n if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();\n else break;\n }\n upperHull.push(p);\n }\n upperHull.pop();\n\n const lowerHull: Array