{"version":3,"file":"js/react/mls-brackets-app.js?_t=be22557ec5c27c443bde","mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AAGA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAGA;AAKA;AAEA;;;;;;;;;;;;;;;;AC7CA;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AAGA;AA6BA;AAEA;;;;;;;;;;;;;;;;;;;ACjDA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAGA;AAGA;AACA;AAEA;AACA;AACA;AAAA;AAGA;AAAA;AAGA;AACA;AACA;AAEA;AAEA;AAUA;AAEA;;;;;;;;;;;;;;;;;AC5CA;AACA;AAEA;AACA;AAUA;AAEA;;;;;;;;;;;;;;;;;AChBA;AACA;AAEA;AACA;AAUA;AAEA;;;;;;;;;;;;;;;;AChBA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AACA;AAAA;AAEA;AACA;AACA;AAEA;AAAA;AACA;AAIA;AACA;AAEA;;;;;;;;;;;;;;;;;;;;;;AChCA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AAQA;AAIA;AAIA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAEA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AAAA;AAIA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AAkHA;AAGA;AAEA;;;;;;;;;;;;;;;;ACtOA;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AAGA;AACA;AACA;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAKA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAAA;AAOA;AAGA;AAEA;;;;;;;;;;;;;;;;AC9FA;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAAA;AAEA;AAAA;AAEA;AAAA;AACA;AACA;AACA;AAGA;AAIA;AAGA;AAEA;;;;;;;;;;;;;;;;AC1CA;;;;;;;;;;;;;;;;;ACAA;AACA;AAEA;AACA;AAEA;AAKA;AACA;AACA;AACA;AAEA;AAQA;AAKA;AAGA;AAEA;;;;;;;;;;;;;;;;AClCA;;;;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AACA;AACA;AAGA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AAGA;AAEA;AAEA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AAGA;AAEA;AAMA;AACA;AAAA;AAEA;AACA;AAAA;AAGA;AAEA;AA6BA;AASA;AAGA;AAEA;;;;;;;;;;;;;;;;AC9GA;AAGA;AACA;AAEA;AACA;AAAA;AAGA;AACA;;;;;;;;;;;;;;;;;;;;;;;;ACXA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAGA;AAEA;;;;;;;;;;;;;;;;AC9FA;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AAiBA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AACA;AAAA;AAUA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAGA;AAAA;AAAA;AACA;AAAA;AAkCA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAGA;AAAA;AAAA;AACA;AAAA;AAUA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAGA;AAAA;AAAA;AACA;AAAA;AAaA;AAEA;;;;;;;;;;;;;;;;ACjHA;AAEA;AACA;AAAA;AAEA;AAOA;AAEA;;;;;;;;;;;;;;;;ACdA;;;;;;;;;;;;;;;;ACAA;AAEA;AACA;AAGA;AACA;AAAA;AAIA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAAA;AACA;AAEA","sources":["webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/app.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/components/BracketsAggregate/BracketsAggregate.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/components/BracketsAggregate/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/components/BracketsCard/BO3Card.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/components/BracketsCard/Bo3/Bo3CardScore/Bo3CardScore.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/components/BracketsCard/Bo3/Bo3CardScore/Bo3Score.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/components/BracketsCard/Bo3/Bo3Club/Bo3Club.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/components/BracketsCard/Bo3/useSeriesWinner.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/components/BracketsCard/BracketsCard.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/components/BracketsCard/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/components/BracketsData/BracketsData.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/components/BracketsData/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/components/BracketsMatchData/BracketsMatchData.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/components/BracketsMatchData/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/components/BracketsRound/BracketsRound.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/components/BracketsRound/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/main.js","webpack://@mlssoccer/netcore/./scripts/react/mls-brackets/utils.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/components/MatchStrip/MatchStrip.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/components/MatchStrip/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-list/components/MatchStrip/loader.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/ErrorDisplay/ErrorDisplay.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/ErrorDisplay/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/hooks/useInterval.js"],"sourcesContent":["export { default } from './main';\n","import { formatScores, composeAggregate } from \"../../../mls-match-list/utils\";\nimport React from \"react\";\nimport { d3AggregateAPI } from \"../../../shared/api/variables\";\nimport { useQuery } from \"react-query\";\nimport { fetchClient } from \"../../../shared/api/fetching\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\n\nfunction BracketsAggregate({ currentLeg }) {\n  if (!currentLeg) {\n    return null;\n  }\n\n  const { apiList } = useReactAppState();\n  const { d3SportsAPI } = apiList || {};\n  const { homeClubData, awayClubData, period, resultType, queryConfig, matchOptaId } = currentLeg;\n\n  const d3AggregateEndpoint = d3AggregateAPI({ matchOptaId });\n  const { data: aggregateData, isLoading } = useQuery({\n    queryKey: [`d3-aggregate`, { matchOptaId }],\n    queryFn: () => fetchClient({ endpoint: d3AggregateEndpoint, apiURL: d3SportsAPI }),\n    ...queryConfig\n  });\n\n  const { aggregateAbbr: aggregate, date } = aggregateData || {};\n\n  const composedAggregate = composeAggregate(aggregate, date);\n\n  const { shootoutResult } = formatScores({\n    homeClubData,\n    awayClubData,\n    period,\n    resultType\n  });\n\n  if (isLoading) {\n    return null;\n  }\n\n  return (\n    composedAggregate || shootoutResult\n      ? <div className=\"mls-o-brackets-card__shootout-description\">{composedAggregate || shootoutResult}</div>\n      : null\n  );\n}\n\nexport default BracketsAggregate;\n","export { default } from './BracketsAggregate';\n","import React from 'react';\nimport { stringifyGeoProviders } from '../../../shared/utils';\nimport Bo3CardScore from './Bo3/Bo3CardScore/Bo3CardScore';\nimport useSeriesWinner from './Bo3/useSeriesWinner';\nimport Bo3Club from './Bo3/Bo3Club/Bo3Club';\n\nfunction BO3Card(props) {\n    const { hideLegUrl, matchPageUrl, secondLeg, matchLabel, thirdLeg, leg1LocalDate, leg2LocalDate, leg3LocalDate,\n        homeLogo, awayLogo, awayFirstLegScore, homeFirstLegScore, homeSeeding, isHomeWinner, awaySecondLegScore, firstLegStyleScore,\n        broadcasters, homeName, awayName, awaySeeding, isAwayWinner, firstLeg, homeSecondLegScore, secondLegStyleScore, awayThirdLegScore,\n        homeThirdLegScore, thirdLegStyleScore, isHomeTbc, isAwayTbc } = props\n\n    const { isFirstTeamWinner, isSecondTeamWinner, hasSeriesWinner, disableThirdMatch } = useSeriesWinner({\n        firstLegWinnerStatus: firstLeg?.winnerStatus,\n        secondLegWinnerStatus: secondLeg?.winnerStatus,\n        thirdLegWinnerStatus: thirdLeg?.winnerStatus,\n    });\n\n    return (\n        <a href={hideLegUrl ? null : matchPageUrl} className=\"mls-o-brackets-card bo3\">\n            <div className='mls-o-brackets-card__clubs-content'>\n                <div className='mls-o-brackets-card__bo3-clubs'>\n                    <div className='mls-o-brackets-card__event-match-label'>\n                        <div className={`mls-o-brackets-card__shootout-description ${hasSeriesWinner ? '-winner' : ''}`}>{matchLabel}</div>\n                    </div>\n                    <div className=\"mls-o-brackets-card__club-container\">\n                        <Bo3Club clubName={homeName} clubLogo={homeLogo} disableClub={hasSeriesWinner && isSecondTeamWinner} clubSeeding={homeSeeding} isClubWinner={isHomeWinner} isClubTbc={isHomeTbc} />\n                        <Bo3Club clubName={awayName} clubLogo={awayLogo} disableClub={hasSeriesWinner && isFirstTeamWinner} clubSeeding={awaySeeding} isClubWinner={isAwayWinner} isClubTbc={isAwayTbc} />\n                    </div>\n                </div>\n                <div className=\"mls-o-brackets-card__match-results\">\n                    {leg1LocalDate ?\n                        <Bo3CardScore match={firstLeg} matchDate={leg1LocalDate} matchStyleScore={firstLegStyleScore} awayScore={awayFirstLegScore} homeScore={homeFirstLegScore} />\n                        : null}\n                    {leg2LocalDate ?\n                        <Bo3CardScore isSecondLeg match={secondLeg} matchDate={leg2LocalDate} matchStyleScore={secondLegStyleScore} awayScore={awaySecondLegScore} homeScore={homeSecondLegScore} />\n                        : null\n                    }\n                    <Bo3CardScore disableThirdMatch={disableThirdMatch} match={thirdLeg} matchDate={leg3LocalDate} matchStyleScore={thirdLegStyleScore} awayScore={awayThirdLegScore} homeScore={homeThirdLegScore} />\n                </div>\n            </div>\n            <div className=\"mls-o-brackets-card__shootout-broadcast\">\n                {broadcasters?.length > 0 ? <div className=\"mls-o-brackets-card__broadcaster\">{stringifyGeoProviders(broadcasters)}</div>\n                    : null\n                }\n            </div>\n        </a>);\n}\n\nexport default BO3Card;\n","import React, { useMemo } from 'react';\nimport { statusTypes } from '../../../../../mls-match-list/utils';\nimport { useReactAppState } from '../../../../../shared/containers/utils';\nimport Bo3Score from './Bo3Score';\n\nfunction Bo3CardScore({ match, matchDate, matchStyleScore, awayScore, homeScore, disableThirdMatch, isSecondLeg }) {\n    const { t } = useReactAppState();\n    const matchStatus = match?.status?.abbreviation;\n    const penaltyKicks = match?.penaltyKicks;\n    const matchStatusLabelTranslationVocabulary = matchStatus === statusTypes.live ? 'brackets_live' : matchStatus === statusTypes.post ? 'match_final' :\n        matchStatus === statusTypes.abandoned ? 'match_abandoned' : null;\n\n    const disabledMatch = !match && !matchDate;\n\n\n    const { awayPksScore, homePksScore } = useMemo(() => {\n        let awayScore = 0, homeScore = 0;\n\n        if (penaltyKicks?.away?.length && penaltyKicks?.home?.length) {\n            awayScore = penaltyKicks.away.filter((pk) => pk.outcome === \"Scored\").length;\n            homeScore = penaltyKicks.home.filter((pk) => pk.outcome === \"Scored\").length;\n        }\n\n        return { awayPksScore: awayScore, homePksScore: homeScore }\n    }, [penaltyKicks]);\n\n    const [firstTeamScore, secondTeamScore] = isSecondLeg ? [awayScore, homeScore] : [homeScore, awayScore];\n    const [firstTeamPksScore, secondTeamPksScore] = isSecondLeg ? [awayPksScore, homePksScore] : [homePksScore, awayPksScore];\n    const [firstTeamPks, secondTeamPks] = isSecondLeg ? [penaltyKicks?.away, penaltyKicks?.home] : [penaltyKicks?.home, penaltyKicks?.away];\n\n    return (\n        <div className={`mls-o-brackets-card__event ${disabledMatch ? '-disabled' : ''}`}>\n            <span className={`${matchStatus === statusTypes.live ? 'mls-o-brackets-card__live-bo3' : 'mls-o-brackets-card__event-date'} \n                ${disableThirdMatch ? '-disabled' : ''}`}>\n                {matchStatusLabelTranslationVocabulary ? t(matchStatusLabelTranslationVocabulary) : matchDate || 'TBD'}\n            </span>\n            <div className={`mls-o-brackets-card__match-results-score ${matchStyleScore}`}>\n                <Bo3Score clubScore={firstTeamScore} matchStatus={matchStatus} pksScore={firstTeamPksScore} penaltyKicks={firstTeamPks} matchExists={!!match} />\n                <Bo3Score clubScore={secondTeamScore} matchStatus={matchStatus} pksScore={secondTeamPksScore} penaltyKicks={secondTeamPks} matchExists={!!match} />\n            </div>\n        </div>\n    );\n}\n\nexport default Bo3CardScore;\n","import React from 'react';\nimport { statusTypes } from '../../../../../mls-match-list/utils';\n\nfunction Bo3Score({ matchStatus, penaltyKicks, clubScore, pksScore, matchExists }) {\n    return (\n        <div className='mls-o-brackets-card__results'>\n            {matchStatus === statusTypes.pre || !matchExists ? \"-\" :\n                <>\n                    <span>{clubScore}</span>\n                    {penaltyKicks ? <span className='mls-o-brackets-card__match-pks-score'>({pksScore})</span> : null}\n                </>\n            }\n        </div>\n    );\n}\n\nexport default Bo3Score;\n","import React from 'react';\nimport Picture from '../../../../../shared/components/Picture';\n\nfunction Bo3Club({ disableClub, clubName, clubLogo, clubSeeding, isClubWinner, isClubTbc }) {\n    return (\n        <div className={`mls-o-brackets-card__club ${disableClub ? '-disabled' : ''}`}>\n            <div className=\"mls-o-brackets-card__club-pic\">\n                <Picture src={clubLogo} />\n            </div>\n            <div className='mls-o-brackets-card__club-info'>\n                <span className=\"mls-o-brackets-card__club-seeding\">{clubSeeding ? clubSeeding : \"\"}</span>\n                <span className={`mls-o-brackets-card__club-name ${isClubWinner ? \"mls-o-brackets-card__club-winner\" : \"\"} ${isClubTbc ? \"mls-o-brackets-card__club-tbc\" : \"\"}`}>{clubName ? clubName : \"\"}</span>\n            </div>\n        </div>);\n}\n\nexport default Bo3Club;\n","import React from 'react';\n\nfunction useSeriesWinner({ firstLegWinnerStatus, secondLegWinnerStatus, thirdLegWinnerStatus }) {\n\n    const isHomeWinnerFirstLeg = firstLegWinnerStatus?.isHomeWinner\n    const isHomeWinnerSecondLeg = secondLegWinnerStatus?.isHomeWinner\n    const isHomeWinnerThirdLeg = thirdLegWinnerStatus?.isHomeWinner\n    const isAwayWinnerFirstLeg = firstLegWinnerStatus?.isAwayWinner\n    const isAwayWinnerSecondLeg = secondLegWinnerStatus?.isAwayWinner\n    const isAwayWinnerThirdLeg = thirdLegWinnerStatus?.isAwayWinner\n\n    const { isFirstTeamWinner, isSecondTeamWinner, hasSeriesWinner, disableThirdMatch } = React.useMemo(() => {\n        const firstTeamMatchesWins = [isHomeWinnerFirstLeg, isAwayWinnerSecondLeg, isHomeWinnerThirdLeg].filter(Boolean).length\n        const secondTeamMatchesWins = [isAwayWinnerFirstLeg, isHomeWinnerSecondLeg, isAwayWinnerThirdLeg].filter(Boolean).length\n\n        const isSeriesTied = firstTeamMatchesWins === secondTeamMatchesWins;\n\n        if (isSeriesTied) {\n            return { isFirstTeamWinner: false, isSecondTeamWinner: false, hasSeriesWinner: false, disableThirdMatch: false }\n        } else {\n            const isFirstTeamWinner = firstTeamMatchesWins > secondTeamMatchesWins;\n            const isSecondTeamWinner = secondTeamMatchesWins > firstTeamMatchesWins;\n            const hasSeriesWinner = firstTeamMatchesWins === 2 || secondTeamMatchesWins === 2;\n\n            return { isFirstTeamWinner, isSecondTeamWinner, hasSeriesWinner, disableThirdMatch: firstTeamMatchesWins + secondTeamMatchesWins === 2 }\n        }\n    }, [isHomeWinnerFirstLeg, isHomeWinnerSecondLeg, isHomeWinnerThirdLeg, isAwayWinnerFirstLeg, isAwayWinnerSecondLeg, isAwayWinnerThirdLeg])\n\n\n    return { isFirstTeamWinner, hasSeriesWinner, isSecondTeamWinner, disableThirdMatch };\n}\n\nexport default useSeriesWinner;\n","import React, { useEffect, useRef } from 'react';\nimport { statusTypes, useLocalMatchDateTime, formatScores, useLocalMatchHour, periodTypes, resultTypes, useLocalMatchTime } from \"../../../mls-match-list/utils\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport { composeGeoLocatedProviders, stringifyGeoProviders, formatImageUrl } from \"../../../shared/utils\";\nimport Picture from \"../../../shared/components/Picture\";\nimport BracketsAggregate from '../BracketsAggregate';\nimport BO3Card from './BO3Card';\n\nfunction BracketsCard({ firstLeg, secondLeg, thirdLeg, cardInfo, isFinalRound = false, setWinner = null, isBO3Round = false }) {\n  const mounted = useRef();\n  const { t, location } = useReactAppState();\n  const matchLiveLabel = t(\"brackets_live\");\n  const { country } = location || {};\n\n  const currentLeg = firstLeg?.status?.abbreviation !== statusTypes.post || !secondLeg ?\n    firstLeg : !thirdLeg ? secondLeg : firstLeg?.status?.abbreviation !== statusTypes.post ? secondLeg : thirdLeg;\n  const { status, mediaProviders, matchPageUrl, leg, minuteDisplay, isTimeTbd } = currentLeg || {};\n  const hideLegUrl = currentLeg == firstLeg ? cardInfo?.hideLeg1URL : currentLeg == secondLeg ? cardInfo?.hideLeg2URL : cardInfo?.hideLeg3URL;\n\n  const firstLegStyleScore =\n    firstLeg?.status?.abbreviation === statusTypes.pre && (!secondLeg && !thirdLeg) ? \"-final--pre\" :\n      firstLeg?.status?.abbreviation === statusTypes.pre || !firstLeg ? \"-pre\" :\n        firstLeg?.status?.abbreviation === statusTypes.live && (!secondLeg && !thirdLeg) ? \"-final -live\" :\n          firstLeg?.status?.abbreviation === statusTypes.live ? \"-live\" :\n            firstLeg?.status?.abbreviation === statusTypes.post && secondLeg?.status.abbreviation === statusTypes.pre && !thirdLeg ? \"-pre-2nd\" :\n              firstLeg?.status?.abbreviation === statusTypes.post && (!secondLeg && !thirdLeg) ? \"-final\" : \"-post\";\n\n  const secondLegStyleScore = secondLeg?.status?.abbreviation === statusTypes.pre || !secondLeg ? \"-pre\" :\n    secondLeg?.status?.abbreviation === statusTypes.live ? \"-live\" :\n      secondLeg?.status?.abbreviation === statusTypes.post ? \"-post\" : \"-pre\";\n\n  const thirdLegStyleScore = thirdLeg?.status?.abbreviation === statusTypes.pre || !thirdLeg ? \"-pre\" :\n    thirdLeg?.status?.abbreviation === statusTypes.live ? \"-live\" :\n      thirdLeg?.status?.abbreviation === statusTypes.post ? \"-post\" : \"-pre\";\n\n  const { national, streaming, international } = status?.abbreviation === statusTypes.pre || status?.abbreviation === statusTypes.live\n    ? composeGeoLocatedProviders(mediaProviders, country)\n    : { national: null, streaming: null, international: [] };\n\n  const { date: leg1LocalDate } = useLocalMatchDateTime(cardInfo?.leg1DateTime) || {};\n  const { date: leg2LocalDate } = useLocalMatchDateTime(cardInfo?.leg2DateTime) || {};\n  const { date: leg3LocalDate } = useLocalMatchDateTime(cardInfo?.leg3DateTime) || {};\n  const { hours: leg1LocalHours } = useLocalMatchHour(cardInfo?.leg1DateTime) || {};\n  const { hours: leg2LocalHours } = useLocalMatchHour(cardInfo?.leg2DateTime) || {};\n  const { hours: leg3LocalHours } = useLocalMatchHour(cardInfo?.leg3DateTime) || {};\n  const currentHour = isTimeTbd ? t(\"tbd\").toUpperCase() : (currentLeg == firstLeg ? leg1LocalHours : currentLeg == secondLeg ? leg2LocalHours : leg3LocalHours);\n\n  const { highQuality: homeLogo } = cardInfo?.home?.logoColorUrl ? formatImageUrl(cardInfo?.home?.logoColorUrl, { format: \"w_128,h_128,c_pad\", extension: \"f_png\" }) : { highQuality: \"/assets/images/Fallbacklogo-grey.png\" };\n  const { highQuality: awayLogo } = cardInfo?.away?.logoColorUrl ? formatImageUrl(cardInfo?.away?.logoColorUrl, { format: \"w_128,h_128,c_pad\", extension: \"f_png\" }) : { highQuality: \"/assets/images/Fallbacklogo-grey.png\" };\n\n  const { seeding: homeSeeding, name: homeName } = cardInfo?.home || {};\n  const { seeding: awaySeeding, name: awayName } = cardInfo?.away || {};\n\n  const { homeScore: homeFirstLegScore, awayScore: awayFirstLegScore } = formatScores({\n    homeClubData: firstLeg?.homeClubData,\n    awayClubData: firstLeg?.awayClubData,\n    period: firstLeg?.period,\n    resultType: firstLeg?.resultType\n  });\n\n  const { homeScore: homeSecondLegScore, awayScore: awaySecondLegScore } = formatScores({\n    homeClubData: secondLeg?.homeClubData,\n    awayClubData: secondLeg?.awayClubData,\n    period: secondLeg?.period,\n    resultType: secondLeg?.resultType\n  });\n\n  const { homeScore: homeThirdLegScore, awayScore: awayThirdLegScore } = formatScores({\n    homeClubData: thirdLeg?.homeClubData,\n    awayClubData: thirdLeg?.awayClubData,\n    period: thirdLeg?.period,\n    resultType: thirdLeg?.resultType\n  });\n\n\n  const isHomeWinner = status?.abbreviation === statusTypes.post ? (!secondLeg ? firstLeg?.winnerStatus?.isHomeWinner : secondLeg?.winnerStatus?.isAwayWinner) : false;\n  const isAwayWinner = status?.abbreviation === statusTypes.post ? (!secondLeg ? firstLeg?.winnerStatus?.isAwayWinner : secondLeg?.winnerStatus?.isHomeWinner) : false;\n  const isHomeTbc = homeName?.toLowerCase() === \"tbc\" || homeName?.toLowerCase() === \"tbd\";\n  const isAwayTbc = awayName?.toLowerCase() === \"tbc\" || awayName?.toLowerCase() === \"tbd\";\n  const period = currentLeg == secondLeg ? secondLeg?.period : firstLeg?.period;\n  const resultType = currentLeg == secondLeg ? secondLeg?.resultType : firstLeg?.resultType;\n  const isShoutout = period === periodTypes.ShootOut || resultType === resultTypes.Shootout;\n  const cardHasWinnerClub = isHomeWinner || isAwayWinner;\n\n  useEffect(() => {\n    if (!mounted.current) {\n      mounted.current = true;\n    } else {\n      if (isFinalRound && (cardInfo?.matchCardType === \"1-Leg\" && firstLeg?.status?.abbreviation === statusTypes.post) || isFinalRound && (cardInfo?.matchCardType === \"2-Legs\" && secondLeg?.status?.abbreviation === statusTypes.post)) {\n        setWinner({\n          winnerName: isHomeWinner ? cardInfo?.home?.fullName : cardInfo?.away?.fullName,\n          winnerLogo: isHomeWinner ? homeLogo : awayLogo,\n          winnerBackgroundColor: isHomeWinner ? cardInfo?.home?.backgroundColor : cardInfo?.away?.backgroundColor\n        });\n      }\n    }\n  });\n\n  const matchLabelText = cardInfo?.matchLabel ? t(cardInfo.matchLabel) || cardInfo.matchLabel : null;\n  let broadcasters = national?.length > 0 ? national : streaming?.length > 0 ? streaming : [];\n  if (international?.length) {\n    broadcasters = [...international, ...broadcasters];\n  }\n\n\n  const Bo3Props = {\n    matchLabel: matchLabelText, hideLegUrl, matchPageUrl, status, leg, secondLeg, thirdLeg, awayThirdLegScore, homeThirdLegScore, leg1LocalDate, leg2LocalDate, leg3LocalDate, minuteDisplay,\n    homeLogo, awayLogo, awayFirstLegScore, homeFirstLegScore, homeSeeding, isHomeWinner, awaySecondLegScore, currentHour, firstLegStyleScore,\n    isShoutout, broadcasters, homeName, awayName, awaySeeding, isAwayWinner, firstLeg, homeSecondLegScore, secondLegStyleScore, thirdLegStyleScore, isHomeTbc, isAwayTbc, currentLeg\n  }\n\n  return (\n    isBO3Round ? <BO3Card {...Bo3Props} /> :\n      <a href={hideLegUrl ? null : matchPageUrl} className=\"mls-o-brackets-card\">\n        {\n          <div className={`mls-o-brackets-card__event ${leg1LocalDate && leg2LocalDate ? 'mls-o-brackets-card__match-second-leg-card' : ''}`}>\n            {matchLabelText ? <span title={matchLabelText} className='mls-o-brackets-card__event-match-label'>{matchLabelText}</span>\n              : null}\n            {\n              status?.abbreviation !== statusTypes.live\n                ? leg1LocalDate || leg2LocalDate\n                  ? status?.abbreviation === statusTypes.pre && currentLeg == firstLeg ?\n                    <div>\n                      <span className=\"mls-o-brackets-card__event-date\">{leg1LocalDate}</span>\n                      {leg ? <span className=\"mls-o-brackets-card__event-leg\">{leg}</span> : null}\n                    </div>\n                    : status?.abbreviation === statusTypes.pre && currentLeg == secondLeg ?\n                      <div>\n                        <span className=\"mls-o-brackets-card__event-date\">{leg2LocalDate}</span>\n                        {leg ? <span className=\"mls-o-brackets-card__event-leg\">{leg}</span> : null}\n                      </div>\n                      : status?.abbreviation === statusTypes.post && currentLeg == secondLeg ?\n                        <div>\n                          <span className=\"mls-o-brackets-card__event-date\">{leg1LocalDate}</span>\n                          <span className=\"mls-o-brackets-card__event-second-date\">{leg2LocalDate}</span>\n                        </div>\n                        : status?.abbreviation === statusTypes.post && !secondLeg ?\n                          <div>\n                            <span className=\"mls-o-brackets-card__event-date\">{leg1LocalDate}</span>\n                          </div>\n                          : <div>\n                            {leg1LocalDate ? <span className=\"mls-o-brackets-card__event-date\">{leg1LocalDate}</span> : null}\n                            {leg2LocalDate ? <span className=\"mls-o-brackets-card__event-second-date\">{leg2LocalDate}</span> : null}\n                          </div>\n                  : null\n                : <div>\n                  <span className=\"mls-o-brackets-card__live\">{matchLiveLabel}</span>\n                  {leg ? <span className=\"mls-o-brackets-card__event-leg\">{leg}</span> : null}\n                </div>\n            }\n            {status?.abbreviation === statusTypes.live ?\n              <span className={`mls-o-brackets-card__event-minutes${isShoutout ? \"--shootout\" : \"\"}`}>\n                {minuteDisplay ? (isShoutout ? \"PKs\" : minuteDisplay) : \"\"}\n              </span> :\n              <span className=\"mls-o-brackets-card__event-final\">{\n                status?.abbreviation === statusTypes.abandoned ? t(\"match_abandoned\")\n                  : status?.abbreviation === statusTypes.post ? t(\"match_final\") : currentHour\n              }</span>\n            }\n          </div>\n        }\n\n        <div className=\"mls-o-brackets-card__match\">\n          <div className=\"mls-o-brackets-card__club-container\">\n            <div className={`mls-o-brackets-card__club ${isAwayWinner && cardHasWinnerClub ? 'mls-o-brackets-card__club-disabled' : ''}`}>\n              <div className=\"mls-o-brackets-card__club-pic\">\n                <Picture src={homeLogo} />\n              </div>\n              <span className=\"mls-o-brackets-card__club-seeding\">{homeSeeding ? homeSeeding : \"\"}</span>\n              <span className={`mls-o-brackets-card__club-name ${isHomeWinner ? \"mls-o-brackets-card__club-winner\" : \"\"} ${isHomeTbc ? \"mls-o-brackets-card__club-tbc\" : \"\"}`}>{homeName ? homeName : \"\"}</span>\n            </div>\n            <div className={`mls-o-brackets-card__club ${isHomeWinner && cardHasWinnerClub ? 'mls-o-brackets-card__club-disabled' : ''}`}>\n              <div className=\"mls-o-brackets-card__club-pic\">\n                <Picture src={awayLogo} />\n              </div>\n              <span className=\"mls-o-brackets-card__club-seeding\">{awaySeeding ? awaySeeding : \"\"}</span>\n              <span className={`mls-o-brackets-card__club-name ${isAwayWinner ? \"mls-o-brackets-card__club-winner\" : \"\"} ${isAwayTbc ? \"mls-o-brackets-card__club-tbc\" : \"\"}`}>{awayName ? awayName : \"\"}</span>\n            </div>\n          </div>\n          <div className=\"mls-o-brackets-card__match-results\">\n            {leg1LocalDate ?\n              <div className={`mls-o-brackets-card__match-results-score ${firstLegStyleScore}`}>\n                <div>{firstLeg?.status?.abbreviation === statusTypes.pre || !firstLeg ? \"-\" : homeFirstLegScore}</div>\n                <div>{firstLeg?.status?.abbreviation === statusTypes.pre || !firstLeg ? \"-\" : awayFirstLegScore}</div>\n              </div>\n              : null}\n            {leg2LocalDate ?\n              <div className={`mls-o-brackets-card__match-results-score ${secondLegStyleScore}`}>\n                <div>{secondLeg?.status?.abbreviation === statusTypes.pre || !secondLeg ? \"-\" : awaySecondLegScore}</div>\n                <div>{secondLeg?.status?.abbreviation === statusTypes.pre || !secondLeg ? \"-\" : homeSecondLegScore}</div>\n              </div> : <></>\n            }\n            {\n              leg1LocalDate && leg2LocalDate ?\n                secondLeg?.status?.abbreviation === statusTypes.pre || !secondLeg ?\n                  <div className={`mls-o-brackets-card__match-results-score -final--pre`}>\n                    <div>{\"-\"}</div>\n                    <div>{\"-\"}</div>\n                  </div>\n                  :\n                  <div className={`mls-o-brackets-card__match-results-score -final`}>\n                    <div>{homeFirstLegScore + awaySecondLegScore}</div>\n                    <div>{awayFirstLegScore + homeSecondLegScore}</div>\n                  </div>\n                : null\n            }\n          </div>\n        </div>\n\n        <div className=\"mls-o-brackets-card__shootout-broadcast\">\n          {\n            status?.abbreviation === statusTypes.live && isShoutout\n              ? <BracketsAggregate currentLeg={currentLeg} />\n              : status?.abbreviation === statusTypes.pre || status?.abbreviation === statusTypes.live\n                ? (\n                  broadcasters?.length > 0\n                    ?\n                    <div className=\"mls-o-brackets-card__broadcaster\">{stringifyGeoProviders(broadcasters)}</div>\n                    : null\n                ) : status?.abbreviation === statusTypes.post ? <BracketsAggregate currentLeg={currentLeg} /> : null\n          }\n        </div>\n      </a>\n\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nBracketsCard = React.memo(BracketsCard);\n\nexport default BracketsCard;\n","export { default } from './BracketsCard';\n","import React, { useState } from \"react\";\nimport MatchStrip from \"../../../mls-match-list/components/MatchStrip\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport BracketsMatchData from \"../BracketsMatchData\";\nimport BracketsCard from \"../BracketsCard\";\n\nfunction BracketsData({ card, isFinalRound = false, setWinner = null, competitionSlug = \"\", isBO3Round = false }) {\n  const { urlList, directoryList } = useReactAppState();\n  const { baseUrl } = urlList || {};\n  const { matchHubDir } = directoryList || {};\n  const matches = card?.matches;\n  const [contexts, setContexts] = useState({\n    firstLeg: null,\n    secondLeg: null,\n    thirdLeg: null\n  });\n\n  const handleChange = (data, i) => {\n    if (i === 1) {\n      setContexts(currentContext => ({\n        ...currentContext,\n        firstLeg: data\n      }));\n    }\n\n    if (i === 2) {\n      setContexts(currentContext => ({\n        ...currentContext,\n        secondLeg: data,\n      }));\n    }\n\n    if (i === 3) {\n      setContexts(currentContext => ({\n        ...currentContext,\n        thirdLeg: data\n      }));\n    }\n  };\n\n  const cardInfo = {\n    matchCardType: card?.matchCardType,\n    home: {\n      name: card?.home?.name,\n      fullName: card?.home?.fullName,\n      seeding: card?.home?.seeding,\n      logoColorUrl: card?.home?.logoColorUrl,\n      backgroundColor: card?.home?.bgColor\n    },\n    away: {\n      name: card?.away?.name,\n      fullName: card?.away?.fullName,\n      seeding: card?.away?.seeding,\n      logoColorUrl: card?.away?.logoColorUrl,\n      backgroundColor: card?.away?.bgColor\n    },\n    leg1DateTime: card?.leg1DateTime,\n    leg2DateTime: card?.leg2DateTime,\n    leg3DateTime: card?.leg3DateTime,\n    hideLeg1URL: card?.hideLeg1URL,\n    hideLeg2URL: card?.hideLeg2URL,\n    matchLabel: card?.matchLabel,\n    hideLeg3URL: card?.hideLeg3URL,\n    matchSlug: card.slug,\n  };\n\n  return (\n    <>\n      <>\n        {matches?.map((match, i) =>\n        (\n          <MatchStrip\n            key={\"match-strip-\" + i}\n            listType=\"brackets\"\n            match={match}\n            matchPageUrl={competitionSlug ? `${baseUrl}/${matchHubDir}/${competitionSlug}/${match?.season?.optaId}/matches/${match?.slug}` : null}\n            loader={<></>}\n            extraCssClasses={\"mls-o-brackets__hidden\"}\n          >\n            <BracketsMatchData\n              match={match}\n              handleChange={handleChange}\n              i={matches?.length > 1 ? match?.order : 1} />\n          </MatchStrip>\n        ))}\n      </>\n      <BracketsCard firstLeg={contexts?.firstLeg} secondLeg={contexts?.secondLeg} thirdLeg={contexts?.thirdLeg} cardInfo={cardInfo} isFinalRound={isFinalRound} setWinner={setWinner} isBO3Round={isBO3Round} />\n    </>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nBracketsData = React.memo(BracketsData);\n\nexport default BracketsData;\n","export { default } from './BracketsData';\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { useMatchData, statusTypes } from \"../../../mls-match-list/utils\";\nimport { usePreviousValue } from \"../../utils\";\n\nfunction BracketsMatchData({ i, handleChange }) {\n  const mounted = useRef();\n  const data = useMatchData();\n  const [fetched, setFetched] = useState(false);\n  const { status, minuteDisplay } = data;\n  const [minute, setMinute] = useState(null);\n  const prevPks = usePreviousValue(data?.penaltyKicks);\n  const prevStatus = usePreviousValue(status?.abbreviation);\n\n  useEffect(() => {\n    if (!mounted.current) {\n      mounted.current = true;\n    } else {\n      if (!fetched) {\n        handleChange(data, i);\n        setFetched(true);\n      } else {\n        if (data?.status?.abbreviation === statusTypes.live && minuteDisplay !== minute) {\n          setMinute(minuteDisplay);\n          handleChange(data, i);\n        } else if (prevPks !== data.penaltyKicks) {\n          handleChange(data, i);\n        } else if (prevStatus !== data?.status?.abbreviation) {\n          handleChange(data, i);\n        }\n      }\n    }\n  }, [data, prevPks, prevStatus]);\n\n  return (\n    <>\n    </>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nBracketsMatchData = React.memo(BracketsMatchData);\n\nexport default BracketsMatchData;\n","export { default } from './BracketsMatchData';\n","import React from 'react';\nimport BracketsData from '../BracketsData';\n\nfunction BracketsRound({ round, i, itemThemeClass, isGroupedRound, isFinalRound = false, setWinner = null, competitionSlug = \"\", bracketType = '' }) {\n  const isWildCardBracket = bracketType === '16 Clubs + Wildcard matches';\n\n  return (\n    <>\n      <div className=\"mls-o-brackets__round-label\">{round?.roundLabel}</div>\n\n      {round?.cards?.map((card, i2) => {\n        const isPlaceholder = card?.matchCardType?.toLowerCase() === \"placeholder\";\n        const itemCardClass = isGroupedRound ? `mls-o-brackets__item--card-${i2}-r${i}` : `mls-o-brackets__item--card-${i2}`;\n        const isBO3Round = isWildCardBracket && (round?.roundType === \"02_Matches_R16_LEFT\" || round?.roundType === \"08_Matches_R16_RIGHT\");\n        const cardContainerClass = isBO3Round ? 'mls-o-brackets__card-container--best-of-three' : !card?.leg2DateTime ? \" mls-o-brackets__card-container--single\" : '';\n\n        return (\n          <div key={`card-${i2}`} className={`mls-o-brackets__item ${isPlaceholder ? \"mls-o-brackets__item-placeholder\" : \"\"} ${itemCardClass} ${itemThemeClass}`}>\n            <div className={`mls-o-brackets__card-container ${cardContainerClass}`}>\n              {isFinalRound && i2 == 1 ? <div className='mls-o-brackets__round-label'>{window?.forgeVariables?.brackets?.ThirdPlaceMatchTitle || \"\"}</div> : null}\n              {card?.matchCardType?.toLowerCase() !== \"placeholder\" ?\n                <BracketsData isFinalRound={i2 == 1 ? false : isFinalRound} setWinner={setWinner} card={card} competitionSlug={competitionSlug} isBO3Round={isBO3Round} />\n                : null}\n            </div>\n          </div >\n        );\n      })}\n    </>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nBracketsRound = React.memo(BracketsRound);\n\nexport default BracketsRound;\n","export { default } from './BracketsRound';\n","import React, { useState } from 'react';\nimport BracketsRound from './components/BracketsRound';\nimport { fetchClient } from '../shared/api/fetching';\nimport { useQuery } from 'react-query';\nimport Picture from \"../shared/components/Picture\";\nimport { formatImageUrl } from \"../shared/utils\";\nimport { useReactAppState } from \"../shared/containers/utils\";\nimport { d3BracketsAPI, d3CompetitionAPI } from '../shared/api/variables';\n\nfunction Brackets({ options }) {\n  const { t, apiList } = useReactAppState();\n  const {\n    d3SportsAPI,\n    forgeDAPI\n  } = apiList || {};\n\n  const [winner, setWinner] = useState(null);\n\n  const bracketsEndpoint = d3BracketsAPI({ slug: options?.bracketSlug });\n\n  const {\n    data: feed,\n  } = useQuery({\n    queryKey: [`mls-match-brackets-feed`, { slug: options?.bracketSlug }],\n    queryFn: () => fetchClient({ endpoint: bracketsEndpoint, apiURL: d3SportsAPI })\n  });\n\n  const { bracketType, darkTheming, rounds, backgroundImage, logoImage } = feed || {};\n\n  const competition = (rounds?.map(x => x.cards?.map(x => x.matches))?.flat(3)[0]?.competition);\n\n  const bracketTypeClass = bracketType === \"8 Clubs\" ? \"mls-o-brackets--8-clubs\" : bracketType === '14 Clubs - Pick Your Opponent' ? \"mls-o-brackets--14-clubs\"\n    : (bracketType === \"16 Clubs\" ? \"mls-o-brackets--16-clubs\" : bracketType === '16 Clubs + Wildcard matches' ? 'mls-o-brackets--16-clubs--wildcard' : \"mls-o-brackets--32-clubs\");\n  const bracketThemingClass = darkTheming ? \"mls-o-brackets--dark-theme\" : \"mls-o-brackets--light-theme\";\n  const bracketItemThemingClass = darkTheming ? \"mls-o-brackets__item--dark-theme\" : \"mls-o-brackets__item--light-theme\";\n  let round2Stored = null;\n  let round5Stored = null;\n\n  const isMobile = (window.innerWidth <= 768);\n  const isDesktop = (window.innerWidth > 1080);\n  const formatImage = isMobile ? \"t_keep-aspect-ratio-e-mobile\" : isDesktop ? \"t_keep-aspect-ratio-e-desktop\" : \"t_keep-aspect-ratio-e-tablet\";\n  const imgBackground = backgroundImage ? formatImageUrl(backgroundImage, { format: formatImage, extension: \"f_png\" }) : null;\n  const imgLogo = logoImage ? formatImageUrl(logoImage, { format: formatImage, extension: \"f_png\" }) : null;\n\n  const styleBackground = {\n    backgroundImage: imgBackground?.highQuality ? `url(${imgBackground.highQuality})` : \"none\",\n    backgroundRepeat: 'no-repeat',\n    backgroundSize: 'cover'\n  };\n\n  const competitionSlug = competition?.slug;\n\n  return (\n    <>\n      {feed ?\n        <div role=\"region\" className={`mls-o-brackets ${bracketTypeClass} ${bracketThemingClass}`} style={styleBackground}>\n\n          {rounds?.map((round, i) => {\n            if (bracketType === \"32 Clubs\" && i === 2) {\n              round2Stored = round;\n            }\n            if (bracketType === \"32 Clubs\" && i === 5) {\n              round5Stored = round;\n            }\n\n            const isFinalRound = round?.roundType?.endsWith(\"_FINAL\");\n\n            return (\n              bracketType !== \"32 Clubs\" || (bracketType === \"32 Clubs\" && i !== 2 && i !== 3 && i !== 5 && i !== 6) ?\n                <div key={`round-${i}`} className={`mls-o-brackets__column mls-o-brackets__column--round-${i}`}>\n                  {isFinalRound && imgLogo && imgLogo.highQuality ?\n                    <div className=\"mls-o-brackets__background-logo\"><Picture src={imgLogo?.highQuality} /></div>\n                    : <></>}\n                  <BracketsRound isFinalRound={isFinalRound} setWinner={setWinner} round={round} i={i} itemThemeClass={bracketItemThemingClass} competitionSlug={competitionSlug} bracketType={bracketType} />\n                  {isFinalRound && winner ?\n                    <div className=\"mls-o-brackets__winner\">\n                      <div className=\"mls-o-brackets__winner-label\">{t(\"brackets_winner\")}</div>\n                      <div className=\"mls-o-brackets__winner-card\" style={{ backgroundColor: winner?.winnerBackgroundColor }}>\n                        <div className=\"mls-o-brackets__winner-logo\"><Picture src={winner?.winnerLogo} /></div>\n                        <div className=\"mls-o-brackets__winner-name\">{winner?.winnerName}</div>\n                      </div>\n                    </div>\n                    : null}\n                </div>\n                :\n                (i === 3) ?\n                  <div key={`round-${i - 1}-${i}`} className={`mls-o-brackets__column mls-o-brackets__column--round-${i - 1}-${i}`}>\n                    <BracketsRound round={round2Stored} i={i - 1} itemThemeClass={bracketItemThemingClass} isGroupedRound=\"true\" />\n                    <BracketsRound round={round} i={i} itemThemeClass={bracketItemThemingClass} isGroupedRound=\"true\" />\n                  </div>\n                  :\n                  (i === 6) ?\n                    <div key={`round-${i - 1}-${i}`} className={`mls-o-brackets__column mls-o-brackets__column--round-${i - 1}-${i}`}>\n                      <BracketsRound round={round} i={i} itemThemeClass={bracketItemThemingClass} isGroupedRound=\"true\" />\n                      <BracketsRound round={round5Stored} i={i - 1} itemThemeClass={bracketItemThemingClass} isGroupedRound=\"true\" />\n                    </div>\n                    : <></>\n            );\n          })\n          }\n        </div>\n        : null\n      }\n    </>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nBrackets = React.memo(Brackets);\n\nexport default Brackets;\n","import { useRef, useEffect } from 'react'\n\n\nexport function usePreviousValue(value) {\n    const prevValue = useRef();\n\n    useEffect(() => {\n        prevValue.current = value;\n    });\n\n    return prevValue.current;\n}\n","import React from 'react';\nimport MatchDataLayer from \"../MatchDataLayer\";\nimport MatchStripLoader from \"./loader\";\nimport ErrorDisplay from \"../../../shared/components/ErrorDisplay\";\nimport { mlsSingleMatchStatsAPI } from \"../../../shared/api/variables\";\nimport { useQuery } from \"react-query\";\nimport { fetchClient } from \"../../../shared/api/fetching\";\nimport { composeMatchStatus } from \"../../utils\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\n\nconst MatchStrip = ({ children, listType = null, match, displayMatchDate, extraCssClasses, matchPageUrl = null, loader = <MatchStripLoader />, showSecondaryTeams = false, useEmptyClasses = false }) => {\n  const { apiList } = useReactAppState();\n  const {\n    statsAPI\n  } = apiList || {};\n\n  const {\n    optaId,\n    home,\n    away,\n    venue\n  } = match || {};\n\n  const matchOptaId = optaId != null ? optaId.toString() : null;\n  const mlsMatchEndpoint = mlsSingleMatchStatsAPI({ matchOptaId });\n  const { data: mlsMatch, error, isLoading, isError } = showSecondaryTeams ? { data: match, error: null, isLoading: false, isError: false } : useQuery({\n    queryKey: [`mls-match`, { matchOptaId }],\n    queryFn: () => fetchClient({ endpoint: mlsMatchEndpoint, apiURL: statsAPI }),\n    select: data => data && data.length > 0 ? data[0] : null,\n    enabled: matchOptaId > 0\n  });\n\n  if (isLoading || !mlsMatch) {\n    return loader;\n  }\n\n  if (isError) {\n    return <ErrorDisplay error={error} />;\n  }\n\n  const {\n    home_club_match,\n    away_club_match,\n    home_club,\n    away_club,\n    venue: fallbackVenue\n  } = mlsMatch || {};\n\n  const { name: fallbackVenueName, city: fallbackCity, venueOptaId } = fallbackVenue || {};\n  const { name, city } = venue || {};\n\n  const mergedMatch = {\n    ...mlsMatch,\n    ...match,\n    venue: {\n      name: name ? name : fallbackVenueName,\n      city: city ? city : fallbackCity,\n      optaId: venueOptaId\n    },\n    home: {\n      ...home,\n      optaId: home?.optaId ? home.optaId : home_club?.opta_id,\n      shortName: home?.shortName ? home.shortName : home_club?.name,\n      abbreviation: home?.abbreviation ? home.abbreviation : home_club?.abbreviation,\n      yearFounded: home_club?.year_founded\n    },\n    away: {\n      ...away,\n      optaId: away?.optaId ? away.optaId : away_club?.opta_id,\n      shortName: away?.shortName ? away.shortName : away_club?.name,\n      abbreviation: away?.abbreviation ? away.abbreviation : away_club?.abbreviation,\n      yearFounded: away_club?.year_founded\n    },\n    homeClubMatch: home_club_match,\n    awayClubMatch: away_club_match\n  };\n\n  const matchStatus = composeMatchStatus({ period: mlsMatch?.period, delayedMatch: mlsMatch?.delayedMatch });\n\n  return (\n    <MatchDataLayer\n      useEmptyClasses={useEmptyClasses}\n      matchPageUrl={matchPageUrl}\n      matchStatus={matchStatus}\n      matchOptaId={matchOptaId}\n      match={mergedMatch}\n      displayMatchData={displayMatchDate}\n      listType={listType}\n      extraCssClasses={extraCssClasses}>\n      {children}\n    </MatchDataLayer>\n  );\n};\n\nexport default MatchStrip;\n","export { default } from './MatchStrip';\n","import React from 'react';\nimport Picture from \"../../../shared/components/Picture\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\n\nfunction MatchStripLoader() {\n  const { mediaQueries } = useReactAppState();\n  const { isMediumLargeMin } = mediaQueries || {};\n  return (\n    <div className=\"mls-o-match-strip mls-o-match-strip--post mls-o-match-strip--matches mls-o-match-strip--hide-promo\">\n      {\n        isMediumLargeMin\n          ? (\n            <>\n              <div className=\"mls-o-match-strip__left-side\">\n                <div className=\"mls-o-match-strip__match\">\n                  <div className=\"mls-o-match-strip__club-group\">\n                    <div className=\"mls-o-match-strip__match-time\">\n                      <div className=\"mls-o-match-strip__time\">\n                        <div data-testid={\"loading\"} className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--90\" />\n                      </div>\n                    </div>\n                    <div className=\"mls-o-match-strip__club mls-o-match-strip__club--away \">\n                      <div className=\"mls-o-match-strip__club-name\">\n                        <span className=\"mls-o-match-strip__club-logo\">\n                          <Picture extraClasses=\"mls-o-loading mls-o-loading--glow\"\n                            src=\"/assets/images/Fallbacklogo-grey.png\" title={\"fallback_logo\"} />\n                        </span>\n                        <span className=\"mls-o-match-strip__club-short-name\">\n                          <div data-testid={\"loading\"}\n                            className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--5rem\" />\n                        </span>\n                      </div>\n                    </div>\n                    <div className=\"mls-o-match-strip__club-separator\">\n                      <div data-testid={\"loading\"} className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--5rem\" />\n                    </div>\n                    <div className=\"mls-o-match-strip__club mls-o-match-strip__club--home \">\n                      <div className=\"mls-o-match-strip__club-name\">\n                        <span className=\"mls-o-match-strip__club-logo\">\n                          <Picture extraClasses=\"mls-o-loading mls-o-loading--glow\"\n                            src=\"/assets/images/Fallbacklogo-grey.png\" title={\"fallback_logo\"} />\n                        </span>\n                        <span className=\"mls-o-match-strip__club-short-name\">\n                          <div\n                            className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--5rem\" />\n                        </span>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div className=\"mls-o-match-strip__right-side\">\n                <div className=\"mls-o-match-strip__match-info\">\n                  <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--50\" />\n                </div>\n                <div className=\"mls-o-match-strip__broadcaster-list\">\n                  <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--50\" />\n                </div>\n                <div className=\"mls-o-match-strip__match-watch\">\n                  <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--3rem\" />\n                </div>\n              </div>\n            </>\n          )\n          : (\n            <div className=\"mls-o-match-strip__match\">\n              <div className=\"mls-o-match-strip__club-group\">\n                <div className=\"mls-o-match-strip__match-title\">\n                  <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--50\" />\n                </div>\n                <div className=\"mls-o-match-strip__match-time\">\n                  <div className=\"mls-o-match-strip__time\">\n                    <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--90\" />\n                  </div>\n                </div>\n                <div className=\"mls-o-match-strip__club mls-o-match-strip__club--away \">\n                  <div className=\"mls-o-match-strip__club-name\">\n                    <span className=\"mls-o-match-strip__club-logo\">\n                      <Picture extraClasses=\"mls-o-loading mls-o-loading--glow\"\n                        src=\"/assets/images/Fallbacklogo-grey.png\" title={\"fallback_logo\"} />\n                    </span>\n                    <span className=\"mls-o-match-strip__club-short-name\">\n                      <div\n                        className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--5rem\" />\n                    </span>\n                  </div>\n                </div>\n                <div className=\"mls-o-match-strip__club-separator\">\n                  <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--5rem\" />\n                </div>\n                <div className=\"mls-o-match-strip__club mls-o-match-strip__club--home \">\n                  <div className=\"mls-o-match-strip__club-name\">\n                    <span className=\"mls-o-match-strip__club-logo\">\n                      <Picture extraClasses=\"mls-o-loading mls-o-loading--glow\"\n                        src=\"/assets/images/Fallbacklogo-grey.png\" title={\"fallback_logo\"} />\n                    </span>\n                    <span className=\"mls-o-match-strip__club-short-name\">\n                      <div\n                        className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--5rem\" />\n                    </span>\n                  </div>\n                </div>\n                <div className=\"mls-o-match-strip__match-watch\">\n                  <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--3rem\" />\n                </div>\n              </div>\n            </div>\n          )\n      }\n    </div>\n  );\n}\n\nexport default MatchStripLoader;\n","import React from 'react';\n\nconst ErrorDisplay = ({ error }) => {\n  if (!error || !error.message) return null;\n\n  return (\n    <div className={\"mls-o-error\"}>\n      <p>\n        {error.message}\n      </p>\n    </div>\n  );\n};\n\nexport default ErrorDisplay;\n","export { default } from './ErrorDisplay';\n","import React from 'react';\n\nexport default function useInterval(callback, delay) {\n  const savedCallback = React.useRef();\n\n  // Remember the latest function.\n  React.useEffect(() => {\n    savedCallback.current = callback;\n  }, [callback]);\n\n  // Set up the interval.\n  React.useEffect(() => {\n    function tick() {\n      savedCallback.current();\n    }\n    if (delay !== null) {\n      const id = setInterval(tick, delay);\n      return () => clearInterval(id);\n    }\n  }, [delay]);\n}\n"],"names":[],"sourceRoot":""}