{"version":3,"file":"js/react/mls-vertical-scoreboard-app.js?_t=53920e9a4ce01a78a8d1","mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;ACAA;AAEA;AAEA;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;ACVA;AAIA;AAKA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AAGA;AAMA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAKA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIA;AAIA;AAIA;AAGA;AAEA;;;;;;;;;;;;;;;;AC7FA;AAEA;AAAA;AACA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;ACHA;AACA;AACA;AACA;AAEA;AACA;AAOA;AAEA;;;;;;;;;;;;;;;;ACfA;AAEA;AAAA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AAGA;;;;;;;;;;;;;;;;;;;;;ACTA;AAEA;AAEA;AACA;AAEA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIA;AAEA;;;;;;;;;;;;;;;;;;AChCA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AAAA;AACA;AACA;AAEA;AAAA;AAKA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;;ACpBA;AACA;AACA;AACA;AACA;AAGA;AAGA;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAQA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AAGA;AACA;AAAA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AAKA;AAGA;AAEA;;;;;;;;;;;;;;;;;ACvEA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AClBA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;AACA;AACA;AAGA;AAEA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AACA;AAAA;AACA;AAEA;AACA;AACA;AAGA;AAIA;AAGA;AAIA;AACA;AAAA;AAAA;AAEA;AAAA;AAIA;AAQA;AACA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AAKA;AAIA;AAGA;AAEA;;;;;;;;;;;;;;;;;;AC7FA;AAEA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA;AAAA;AACA;AAEA;;;;;;;;;;;;;;;;;;;;ACpBA;AACA;AACA;AACA;AAIA;AAGA;AACA;AAEA;AACA;AAAA;AAGA;AAIA;AAAA;AAAA;AACA;AACA;AAAA;AAWA;AAEA;;;;;;;;;;;;;;;;ACpCA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;ACFA;AACA;AACA;AAEA;AACA;AASA;AAEA;;;;;;;;;;;;;;;;AChBA;AAEA;AAAA;AAAA;AAGA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;ACNA;AACA;AACA;AACA;AACA;AAEA;AAAA;AACA;AAEA;AACA;AAEA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AACA;AAAA;AAAA;AAEA;AAEA;AAAA;AACA;AAIA;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AAEA;AAEA;AAMA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAAA;AACA;AAGA;AASA;AAMA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAOA;AAOA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;ACrHA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAAA;AACA;AACA;AAGA;AAAA;AACA;AAEA;AACA;AACA;AACA;AAMA;AAGA;AAEA;AACA;AAAA;AAAA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;;ACxDA;AAIA;AAGA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAIA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;AC3BA;AACA;AAEA;AAAA;AACA;AAAA;AAKA;AACA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AAIA;AAGA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AAAA;AAKA;AAAA;AAAA;;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AAEA;AACA;AAEA;AAIA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AACA;AAAA;AAOA;AAEA;;;;;;;;;;;;;;;;;AC3BA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AAAA;AAAA;AAAA;AAGA;AAEA;AACA;AAAA;AAEA;AAAA;AAGA;AAAA;;;;;;;;;;;;;;;;AChCA;;;;;;;;;;;;;;;;ACAA;AAEA;AACA;AAEA;AACA;AAAA;AAEA;AACA;AAEA;AACA;AACA;AAAA;AACA;AACA;AACA;AAAA;AAGA;AACA;AACA;AAAA;AACA;AAGA;AACA;AACA;AAAA;AACA;AAGA;AAAA;AAEA;AAOA;AAEA;;;;;;;;;;;;;;;;AC1CA;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAKA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAGA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIA;AAGA;AAEA;;;;;;;;;;;;;;;;;ACzDA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAGA;AAEA;;;;;;;;;;;;;;;;;;AC9DA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BA;AAAA;AAIA;AAAA;AAAA;;;;;;;;;;;;;;;;;;AClCA;AACA;AAEA;AAAA;AACA;AACA;AAEA;AAEA;AACA;AAGA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AAEA;AAIA;AAEA;AAAA;AACA;AAEA;AAEA;;;;;;;;;;;;;;;;;;;ACrDA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AAAA;AAAA;AAKA;AACA;AAGA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AAEA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAGA;AAAA;AACA;AAAA;;;;;;;;;;;;;;;;ACnDA;AAEA;AACA;AAGA;AACA;AAAA;AAIA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAAA;AACA;AAEA;;;;;;;;;;;;;;;;ACpBA;AAEA;AAAA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AACA;AAIA;;;;;;;;;;;;;;;;;;;;;;AChCA;AAEA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AAAA;AAAA;AACA;AAEA;AAAA;AAGA;AAAA;AAAA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AACA;AAAA;AAEA;AACA;AAEA;AASA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAiBA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAKA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAKA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AAAA;AAKA;AAAA;AAAA;AACA;AACA;AAAA;AAIA;AAAA;AAAA;AACA;AACA;AAAA;AAIA;AAEA;AAGA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAYA;AAMA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAIA;AAIA;AACA;AAAA;AAAA;AACA;AACA;AAAA;AAOA;;;;;;;;;;;;;;;;AClKA","sources":["webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/app.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalMatch/StyledVerticalMatch.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalMatch/VerticalMatch.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalMatchRightArrow/StyledVerticalMatchRightArrow.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalMatchRightArrow/VerticalMatchRightArrow.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalMatchTime/StyledVerticalMatchTime.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalMatchTime/VerticalMatchTime.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalMatches/StyledVerticalMatches.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalMatches/VerticalMatches.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalScoreboard/StyledVerticalScoreboard.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalScoreboard/VerticalScoreboard.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalScoreboardDialog/StyledVerticalScoreboardDialog.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalScoreboardDialog/VerticalScoreboardDialog.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalScoreboardFallback/StyledVerticalScoreboardFallback.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalScoreboardFallback/VerticalScoreboardFallback.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalScoreboardToggle/StyledVerticalScoreboardToggle.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalScoreboardToggle/VerticalScoreboardToggle.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/components/VerticalScoreboardWrapper/VerticalScoreboardWrapper.js","webpack://@mlssoccer/netcore/./scripts/react/mls-vertical-scoreboard/main.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/BlockheaderV2/BlockheaderV2.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/BlockheaderV2/StyledBlockheader.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/EmptyState/EmptyState.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/EmptyState/StyledEmptyState.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/EmptyState/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/GoogleTag/GoogleTag.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/GoogleTag/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/MatchTile/MatchTile.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/MatchTile/Skeleton/MatchTileSkeleton.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/MatchTile/StyledMatchTile.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Skeleton/Skeleton.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Skeleton/SkeletonElements.js","webpack://@mlssoccer/netcore/./scripts/react/shared/hooks/useInterval.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/RightArrowIcon/RightArrowIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/Svg.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/index.js"],"sourcesContent":["export { default } from './main';","import styled from \"styled-components\";\n\nexport const StyledVerticalMatch = styled.div``;\n\nexport const StyledVerticalMatchExplainerBar = styled.div`\n  text-align: center;\n  margin-top: 8px;\n  margin-bottom: 8px;\n`;\n\nexport const StyledVerticalMatchTileWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  position: relative;\n  min-height: 44px;\n\n  .mls-c-vertical-match-time {\n    position: absolute;\n    left: 0;\n  }\n\n  .mls-c-match-tile {\n  }\n\n  .mls-c-vertica-match-broadcaster {\n    position: absolute;\n    right: 0;\n  }\n\n  .mls-c-club__picture,\n  picture {\n    width: 28px;\n  }\n\n  .mls-c-club.--home {\n    .mls-c-club__name {\n      position: relative;\n    }\n  }\n\n  .mls-c-club.--away {\n    .mls-c-club__name {\n      position: relative;\n    }\n  }\n\n`;\n","import React from \"react\";\nimport {\n  formatScores,\n  statusTypes,\n  useMatchData,\n} from \"../../../mls-match-list/utils\";\nimport {\n  StyledVerticalMatch,\n  StyledVerticalMatchExplainerBar,\n  StyledVerticalMatchTileWrapper,\n} from \"./StyledVerticalMatch\";\nimport VerticalMatchTime from \"../VerticalMatchTime/VerticalMatchTime\";\nimport MatchTile from \"../../../shared/components/MatchTile/MatchTile\";\nimport ExplainerBar from \"../../../shared/components/ExplainerBar/ExplainerBar\";\nimport { Link } from \"../../../shared/components/Link/Link\";\nimport VerticalMatchRightArrow from \"../VerticalMatchRightArrow/VerticalMatchRightArrow\";\n\nfunction VerticalMatch({ position, showResult = true, showClubRanks = false }) {\n  const {\n    homeClubData,\n    awayClubData,\n    status,\n    slug,\n    winnerStatus,\n    period,\n    resultType,\n    matchPageUrl,\n    homeClubRank,\n    awayClubRank,\n  } = useMatchData();\n  const { isHomeWinner, isAwayWinner } = winnerStatus || {};\n  const { homeScore, awayScore, shootoutResult } = formatScores({\n    homeClubData,\n    awayClubData,\n    period,\n    resultType,\n  });\n\n  const trackingData = {\n    id: slug,\n    creative: \"match\",\n    position,\n  };\n\n  const trackingClickData = {\n    clickItem: \"match\",\n    match: slug,\n    matchState: status?.abbreviation,\n  };\n\n  const hideScorebug =\n    status?.abbreviation === statusTypes.abandoned ||\n    status?.abbreviation === statusTypes.cancelled ||\n    status?.abbreviation === statusTypes.delayed ||\n    status?.abbreviation === statusTypes.postponed;\n\n  return (\n    <StyledVerticalMatch\n      className=\"mls-c-vertical-match\"\n      data-tracking-block-impression={JSON.stringify(trackingData)}\n      data-tracking-block-click={JSON.stringify(trackingClickData)}\n    >\n      <StyledVerticalMatchTileWrapper>\n        <VerticalMatchTime />\n        <Link url={matchPageUrl}>\n          <MatchTile\n            hasAbbreviation\n            status={status}\n            homeClubData={homeClubData}\n            awayClubData={awayClubData}\n            isHomeWinner={isHomeWinner}\n            isAwayWinner={isAwayWinner}\n            homeScore={homeScore}\n            awayScore={awayScore}\n            homeClubRank={showClubRanks ? homeClubRank : null}\n            awayClubRank={showClubRanks ? awayClubRank : null}\n            abbreviateStatus\n          />\n        </Link>\n        <VerticalMatchRightArrow matchPageUrl={matchPageUrl} />\n      </StyledVerticalMatchTileWrapper>\n      {showResult && shootoutResult && (\n        <StyledVerticalMatchExplainerBar>\n          <ExplainerBar text={shootoutResult} />\n        </StyledVerticalMatchExplainerBar>\n      )}\n    </StyledVerticalMatch>\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nVerticalMatch = React.memo(VerticalMatch);\n\nexport default VerticalMatch;\n","import styled from \"styled-components\";\n\nexport const StyledVerticalMatchRightArrow = styled.div`\n  max-width: ${(props) => props.theme.figma.base.scale_5}px;\n  position: absolute;\n  right: 0;\n`;\n","import React from \"react\";\nimport { StyledVerticalMatchRightArrow } from \"./StyledVerticalMatchRightArrow\";\nimport { Link } from \"../../../shared/components/Link/Link\";\nimport { RightArrowIcon } from \"../../../shared/svg/RightArrowIcon/RightArrowIcon\";\n\nfunction VerticalMatchRightArrow({ matchPageUrl }) {\n  return (\n    <StyledVerticalMatchRightArrow>\n      <Link url={matchPageUrl}>\n        <RightArrowIcon width={5} height={10} />\n      </Link>\n    </StyledVerticalMatchRightArrow>\n  );\n}\n\nexport default VerticalMatchRightArrow;\n","import styled from \"styled-components\";\n\nexport const StyledVerticalMatchTime = styled.div`\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_micro};\n  font-size: ${(props) => props.theme.mixins.pxToRem(11)};\n  color: #868686;\n  line-height: ${(props) => props.theme.figma.base.scale_2}px;\n  font-weight: 500;\n  letter-spacing: 1px;\n  max-width: ${(props) => props.theme.figma.base.scale_7}px;\n`;\n","import React from \"react\";\nimport {\n  useMatchData,\n} from \"../../../mls-match-list/utils\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport { formatMatchMinutes } from \"../../../mls-match-summary/utils\";\nimport {\n  StyledVerticalMatchTime,\n} from \"./StyledVerticalMatchTime\";\nimport StatusStamp from \"../../../shared/components/StatusStamp/StatusStamp\";\n\nconst VerticalMatchTime = () => {\n  const { t } = useReactAppState();\n  const { matchDateTime, isTimeTbd, status, minuteDisplay } = useMatchData();\n  const { date } = matchDateTime || {};\n  const time = date;\n  const [minutes, extraMinutes] = formatMatchMinutes(minuteDisplay);\n\n  return (\n    <StyledVerticalMatchTime className=\"mls-c-vertical-match-time\">\n      <StatusStamp\n        time={time}\n        minuteDisplay={minutes}\n        extraMinutes={extraMinutes}\n        date={date}\n        abbreviation={status?.abbreviation}\n        abbreviateStatus\n      />\n    </StyledVerticalMatchTime>\n  );\n};\n\nexport default VerticalMatchTime;\n","import styled from \"styled-components\";\nimport { themeTypes } from \"../../../shared/styled/Theme\";\n\nexport const StyledVerticalMatches = styled.div`\n  margin-top: 24px;\n\n  .mls-c-vertical-match:not(:last-of-type) {\n    border-bottom: 1px solid #ddd;\n  }\n`;\n\nexport const StyledVerticalMatchesLabel = styled.div`\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_headline};\n  font-weight: ${(props) => props.theme.figma.base.fontweight_bold};\n  font-size: ${(props) =>\n    props.theme.mixins.pxToRem(props.theme.figma.base.scale_1_50)};\n  text-transform: capitalize;\n  color: ${(props) =>\n    props.theme.type === themeTypes.light\n      ? props.theme.figma.base.color_offblack_100\n      : props.theme.figma.base.color_white_100};\n  margin-bottom: 8px;\n  letter-spacing: 0.04em;\n`;\n","import React from \"react\";\nimport MatchDataLayer from \"../../../mls-match-list/components/MatchDataLayer\";\nimport { composeMatchStatus } from \"../../../mls-match-list/utils\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport VerticalMatch from \"../VerticalMatch/VerticalMatch\";\nimport {\n  StyledVerticalMatches,\n  StyledVerticalMatchesLabel,\n} from \"./StyledVerticalMatches\";\n\nfunction VerticalMatches({\n  label = null,\n  matches = [],\n  showClubRanks = false,\n}) {\n  const { urlList, directoryList } = useReactAppState();\n  const { baseUrl } = urlList || {};\n  const { matchHubDir } = directoryList || {};\n\n  if (!matches || !matches?.length) {\n    return null;\n  }\n\n  return (\n    <StyledVerticalMatches className=\"mls-c-vertical-scoreboard__matches\">\n      {label && (\n        <StyledVerticalMatchesLabel className=\"mls-c-vertical-scoreboard__label\">\n          {label}\n        </StyledVerticalMatchesLabel>\n      )}\n      {matches.map((match, index) => {\n        const { competition, season, slug, optaId } = match || {};\n        const { optaId: seasonOptaId } = season || {};\n        const { slug: competitionSlug } = competition || {};\n        const matchPageUrl = `${baseUrl}/${matchHubDir}/${competitionSlug}/${seasonOptaId}/matches/${slug}`;\n        const matchStatus = composeMatchStatus({\n          period: match?.period,\n          delayedMatch: match?.delayedMatch,\n        });\n\n        if (!optaId) {\n          return null;\n        }\n\n        return (\n          <MatchDataLayer\n            useEmptyClasses\n            useMatchData\n            matchPageUrl={matchPageUrl}\n            key={`${optaId}-${index}`}\n            match={match}\n            matchOptaId={optaId}\n            matchStatus={matchStatus}\n            delayedMatch={match?.delayedMatch}\n          >\n            <VerticalMatch\n              match={match}\n              key={optaId}\n              position={index + 1}\n              showClubRanks={showClubRanks}\n            />\n          </MatchDataLayer>\n        );\n      })}\n    </StyledVerticalMatches>\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nVerticalMatches = React.memo(VerticalMatches);\n\nexport default VerticalMatches;\n","import styled from \"styled-components\";\n\nexport const StyledVerticalScoreboard = styled.div`\n  box-sizing: border-box;\n  width: 100%;\n\n  .--home .mls-c-club__abbreviation,\n  .--away .mls-c-club__abbreviation {\n    text-overflow: initial;\n  }\n\n  &.xxs {\n    .mls-c-club__abbreviation {\n      display: none;\n    }\n  }\n`;\n\nexport const StyledVerticalScoreboardMatchesWrapper = styled.div``;\n","import { isToday } from \"date-fns\";\nimport dayjs from \"dayjs\";\nimport React from \"react\";\nimport { useQuery } from \"react-query\";\nimport { fetchClient } from \"../../../shared/api/fetching\";\nimport {\n  getLiveMatches,\n  groupMatchesByMatchDate,\n  mergeMlsMatchesAPIResults,\n} from \"../../../shared/match/utils\";\nimport { mlsMatchesStatsAPI } from \"../../../shared/api/variables\";\nimport BlockheaderV2 from \"../../../shared/components/BlockheaderV2/BlockheaderV2\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport VerticalMatches from \"../VerticalMatches/VerticalMatches\";\nimport {\n  StyledVerticalScoreboard,\n  StyledVerticalScoreboardMatchesWrapper,\n} from \"./StyledVerticalScoreboard\";\nimport { getDateTranslation } from \"../../utils\";\nimport EmptyState from \"../../../shared/components/EmptyState\";\n\nfunction VerticalScoreboard({\n  title = null,\n  subtitle = null,\n  matches = [],\n  hideBlockheader = false,\n  showClubRanks = false,\n  queryClassName = null,\n}) {\n  const { t, apiList } = useReactAppState();\n  const matchesOptaIds = matches?.map((match) => match?.optaId);\n\n  const { statsAPI } = apiList || {};\n\n  const mlsMatchEndpoint = mlsMatchesStatsAPI({ matchesOptaIds });\n  const { data: statsAPIMatches } = useQuery({\n    queryKey: [`mls-match`, { matchesOptaIds }],\n    queryFn: () =>\n      fetchClient({ endpoint: mlsMatchEndpoint, apiURL: statsAPI }),\n    enabled: matchesOptaIds?.length > 0,\n    refetchInterval: 60000,\n  });\n\n  const mergedMatches =\n    matches?.length && statsAPIMatches?.length\n      ? mergeMlsMatchesAPIResults({ sportAPIMatches: matches, statsAPIMatches })\n      : null;\n  const groupedMatches = mergedMatches?.length\n    ? groupMatchesByMatchDate(mergedMatches, true)\n    : null;\n  const liveMatches = mergedMatches?.length\n    ? getLiveMatches(mergedMatches)\n    : null;\n\n  return (\n    <StyledVerticalScoreboard\n      className={`mls-c-vertical-scoreboard ${\n        queryClassName ? queryClassName : \"\"\n      }`}\n    >\n      {!hideBlockheader && (\n        <BlockheaderV2 title={title} subtitle={subtitle} hasBorderBottom />\n      )}\n      {matches?.length ? (\n        <StyledVerticalScoreboardMatchesWrapper className=\"mls-c-vertical-scoreboard__matches-wrapper\">\n          {!!liveMatches && (\n            <VerticalMatches label={t(\"live\")} matches={liveMatches} />\n          )}\n          {groupedMatches?.map((matches, i) => {\n            const today = isToday(dayjs(matches?.date)?.toDate());\n            const label = today\n              ? t(\"today\")\n              : getDateTranslation(matches?.date, t);\n            return (\n              <VerticalMatches\n                key={\"vertical-matches-\" + i}\n                label={label}\n                showClubRanks={showClubRanks}\n                matches={matches?.matches}\n              />\n            );\n          })}\n        </StyledVerticalScoreboardMatchesWrapper>\n      ) : (\n        <EmptyState emptyStateTranslation=\"match_no_matches\" />\n      )}\n    </StyledVerticalScoreboard>\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nVerticalScoreboard = React.memo(VerticalScoreboard);\n\nexport default VerticalScoreboard;\n","import styled from \"styled-components\";\n\nexport const StyledVerticalScoreboardDialog = styled.div``;\n\nexport const StyledVerticalScoreboardDialogContent = styled.div`\n  .mls-c-vertical-scoreboard.sm,\n  .mls-c-vertical-scoreboard.xs,\n  .mls-c-vertical-scoreboard.xxs {\n    padding: 12px;\n\n    .mls-c-vertical-scoreboard__matches-wrapper {\n      max-height: 300px;\n      overflow-y: scroll;\n    }\n  }\n`;\n\nexport const DialogPortalStyle = {\n  background: \"#fff\",\n  width: \"100%\",\n};\n","import { DialogContent, DialogOverlay } from \"@reach/dialog\";\nimport React, { useState } from \"react\";\nimport GoogleTag from \"../../../shared/components/GoogleTag\";\nimport VerticalScoreboardToggle from \"../VerticalScoreboardToggle/VerticalScoreboardToggle\";\nimport {\n  DialogPortalStyle,\n  StyledVerticalScoreboardDialog,\n  StyledVerticalScoreboardDialogContent,\n} from \"./StyledVerticalScoreboardDialog\";\n\nconst VerticalScoreboardDialog = ({ children }) => {\n  const [open, setOpen] = useState(false);\n\n  const handleOpen = () => {\n    setOpen(!open);\n  };\n\n  return (\n    <StyledVerticalScoreboardDialog>\n      <DialogOverlay isOpen={open}>\n        <DialogContent aria-label=\"scoreboard\" style={DialogPortalStyle}>\n          <GoogleTag\n            id=\"leaderboard-scoreboard\"\n            size=\"leaderboard-scoreboard\"\n          />\n          <StyledVerticalScoreboardDialogContent className=\"mls-c-scoreboard__dialog-content\">\n            {children}\n          </StyledVerticalScoreboardDialogContent>\n          <VerticalScoreboardToggle open={open} handleOpen={handleOpen} />\n        </DialogContent>\n      </DialogOverlay>\n      <VerticalScoreboardToggle open={open} handleOpen={handleOpen} />\n    </StyledVerticalScoreboardDialog>\n  );\n};\n\nexport default VerticalScoreboardDialog;\n","import styled from \"styled-components\";\n\nexport const StyledVerticalScoreboardFallback = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n","import React from \"react\";\nimport MatchTileSkeleton from \"../../../shared/components/MatchTile/Skeleton/MatchTileSkeleton\";\nimport { StyledVerticalScoreboardFallback } from \"./StyledVerticalScoreboardFallback\";\n\nfunction VerticalScoreboardFallback() {\n  return (\n    <StyledVerticalScoreboardFallback>\n      <MatchTileSkeleton />\n      <MatchTileSkeleton />\n      <MatchTileSkeleton />\n      <MatchTileSkeleton />\n      <MatchTileSkeleton />\n    </StyledVerticalScoreboardFallback>\n  );\n}\n\nexport default VerticalScoreboardFallback;\n","import styled from \"styled-components\";\n\nexport const StyledVerticalScoreboardToggle = styled.div`\n  .mls-c-vertical-scoreboard__toggle-button {\n    font-family: ${(props) =>\n      props.theme.figma.base.fontfamily_mlstifo_standard};\n    font-size: ${(props) => props.theme.mixins.pxToRem(14)};\n    position: fixed;\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border-radius: 18px;\n    z-index: 9999;\n    background: #151516;\n    color: #fff;\n    padding: 8px 14px;\n    letter-spacing: normal;\n    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07), 0 0 4px 0 rgba(0, 0, 0, 0.16);\n    border-width: 1px;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    outline: none;\n  }\n\n  .mls-c-vertical-scoreboard__chevron {\n    display: flex;\n    align-items: center;\n    fill: #fff;\n    margin-left: 4px;\n\n    &.-open {\n      transform: rotate(180deg);\n    }\n\n    svg {\n      margin-top: 2px;\n      width: 16px;\n    }\n  }\n`;","import React from \"react\";\nimport ToggleButton from \"../../../shared/components/ToggleButton\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport { Chevron } from \"../../../shared/svg\";\nimport { StyledVerticalScoreboardToggle } from \"./StyledVerticalScoreboardToggle\";\n\nconst VerticalScoreboardToggle = ({\n  open = false,\n  handleOpen = () => null,\n}) => {\n  const { t } = useReactAppState();\n\n  return (\n    <StyledVerticalScoreboardToggle>\n      <ToggleButton\n        className=\"mls-c-vertical-scoreboard__toggle-button\"\n        aria-label=\"toggle scoreboard\"\n        onClick={() => handleOpen()}\n      >\n        {t(\"scoreboard\")}\n        <Chevron\n          extraClasses={`mls-c-vertical-scoreboard__chevron ${\n            open ? \"-open\" : \"\"\n          }`}\n          useEmptyClasses\n        />\n      </ToggleButton>\n    </StyledVerticalScoreboardToggle>\n  );\n};\n\nexport default VerticalScoreboardToggle;\n","import classNames from \"classnames\";\nimport React from \"react\";\nimport { ContainerQuery } from \"react-container-query\";\nimport { useQuery } from \"react-query\";\nimport { fetchClient } from \"../../../shared/api/fetching\";\nimport { d3DateRangeScoreboardAPI } from \"../../../shared/api/variables\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport { query } from \"../../../shared/styled/Theme\";\nimport {\n  getMatchDayRange,\n  getMatchInitialDate,\n  getNearestMatches,\n} from \"../../utils\";\nimport VerticalScoreboard from \"../VerticalScoreboard/VerticalScoreboard\";\nimport VerticalScoreboardDialog from \"../VerticalScoreboardDialog/VerticalScoreboardDialog\";\nimport VerticalScoreboardFallback from \"../VerticalScoreboardFallback/VerticalScoreboardFallback\";\n\nfunction VerticalScoreboardWrapper({ options }) {\n  const {\n    hideBlockheader,\n    blockheaderTitle,\n    blockheaderSubtitle,\n    matchDateTime,\n    dateFrom,\n    dateTo,\n    dateFromLite,\n    dateToLite,\n    competitionOptaId,\n    competitionSlug,\n    seasonOptaId,\n    isOverlayMode,\n    matchDay,\n    matchSlug,\n    roundNumber,\n    showClubRanks,\n  } = options || {};\n\n  const { mediaQueries, apiList, t } = useReactAppState();\n  const { d3SportsAPI } = apiList || {};\n  const { isMediumLargeMin } = mediaQueries || {};\n\n  const hasFilters = !!(dateFrom && dateTo);\n\n  const { from, to } = hasFilters\n    ? getMatchInitialDate(matchDateTime, dateFrom, dateTo) || {}\n    : matchSlug\n      ? getMatchDayRange() || {}\n      : getMatchDayRange(60) || {};\n\n  const matchesDateFromToEndpoint = d3DateRangeScoreboardAPI({\n    isoStringRE: matchDay && !dateFrom && !dateTo ? null : dateToLite || to,\n    isoStringRS: matchDay && !dateFrom && !dateTo ? null : dateFromLite || from,\n    competitionOptaId,\n    seasonOptaId,\n    excludeSecondaryTeams: true,\n    extendDays: true,\n    excludeVenue: true,\n    matchDay,\n    roundNumber: roundNumber == 0 ? null : roundNumber,\n  });\n\n  const { data: matches, isLoading } = useQuery({\n    queryKey: [`d3-matches-scoreboard`, { from, to }],\n    queryFn: () =>\n      fetchClient({\n        endpoint: matchesDateFromToEndpoint ? matchesDateFromToEndpoint : null,\n        apiURL: d3SportsAPI,\n      }),\n    select: (matches) => {\n      if (!hasFilters && !matchSlug) {\n        return getNearestMatches(matches);\n      }\n\n      return matches;\n    },\n  });\n\n  const title = matches?.length\n    ? blockheaderTitle ||\n      (competitionSlug\n        ? matches[0]?.leagueMatchTitle ||\n          matches[0]?.competition?.blockheaderName ||\n          matches[0]?.competition?.name\n        : t(\"matches\"))\n    : null;\n\n  const VerticalScoreboardComponent = () => (\n    <ContainerQuery query={query}>\n      {(params) =>\n        isLoading ? (\n          <VerticalScoreboardFallback />\n        ) : (\n          <VerticalScoreboard\n            title={title}\n            subtitle={blockheaderSubtitle}\n            hideBlockheader={hideBlockheader}\n            matches={matches}\n            showClubRanks={showClubRanks}\n            queryClassName={classNames(params)}\n          />\n        )\n      }\n    </ContainerQuery>\n  );\n\n  return !isMediumLargeMin && isOverlayMode ? (\n    <VerticalScoreboardDialog>\n      <VerticalScoreboardComponent />\n    </VerticalScoreboardDialog>\n  ) : (\n    <VerticalScoreboardComponent />\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nVerticalScoreboardWrapper = React.memo(VerticalScoreboardWrapper);\n\nexport default VerticalScoreboardWrapper;\n","import React from \"react\";\nimport { useQuery } from \"react-query\";\nimport { ThemeProvider } from \"styled-components\";\nimport { getYear } from \"../mls-match-list/utils\";\nimport { fetchClient } from \"../shared/api/fetching\";\nimport { d3MatchesLiteAPI } from \"../shared/api/variables\";\nimport { useReactAppState } from \"../shared/containers/utils\";\nimport { Theme, themeTypes } from \"../shared/styled/Theme\";\nimport VerticalScoreboardWrapper from \"./components/VerticalScoreboardWrapper/VerticalScoreboardWrapper\";\nimport { getLiteRanges } from \"./utils\";\n\nfunction VerticalScoreboardMain({ options }) {\n  const { apiList } = useReactAppState();\n  const { d3SportsAPI } = apiList || {};\n  const currentYear = getYear(Date.now());\n\n  const matchesLiteEndpoint = d3MatchesLiteAPI({\n    year: currentYear,\n    competitionOptaId: options?.competitionOptaId,\n  });\n\n  const { data: matches } = useQuery({\n    queryKey: [`d3-matches-lite-scoreboard`, { year: currentYear }],\n    queryFn: () =>\n      fetchClient({\n        endpoint: matchesLiteEndpoint ? matchesLiteEndpoint : null,\n        apiURL: d3SportsAPI,\n      }),\n    enabled:\n      !options?.dateFrom &&\n      !options?.dateTo &&\n      !options?.matchDay &&\n      !options?.roundNumber &&\n      !options?.matchSlug,\n  });\n\n  const { dateFromLite, dateToLite } = getLiteRanges(matches) || {};\n\n  return (\n    <ThemeProvider\n      theme={{ ...Theme, type: options?.theme || themeTypes.light }}\n    >\n      <VerticalScoreboardWrapper\n        options={{\n          ...options,\n          dateFromLite: dateFromLite || null,\n          dateToLite: dateToLite || null,\n        }}\n      />\n    </ThemeProvider>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nVerticalScoreboardMain = React.memo(VerticalScoreboardMain);\n\nexport default VerticalScoreboardMain;\n","import React from \"react\";\nimport {\n  StyledBlockheader,\n  StyledBlockheaderSubtitle,\n  StyledBlockheaderTitle,\n} from \"./StyledBlockheader\";\n\nconst BlockheaderV2 = ({ title, subtitle, hasBorderBottom = false }) => {\n  if (!title) {\n    return null;\n  }\n\n  return (\n    <StyledBlockheader\n      className=\"mls-c-blockheader\"\n      hasBorderBottom={hasBorderBottom}\n    >\n      <StyledBlockheaderTitle className=\"mls-c-blockheader__title\">\n        {title}\n      </StyledBlockheaderTitle>\n      <StyledBlockheaderSubtitle className=\"mls-c-blockheader__subtitle\">\n        {subtitle}\n      </StyledBlockheaderSubtitle>\n    </StyledBlockheader>\n  );\n};\n\nexport default BlockheaderV2;\n","import styled from \"styled-components\";\nimport { themeTypes } from \"../../styled/Theme\";\n\nexport const StyledBlockheader = styled.div`\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_standard};\n  width: 100%;\n  border-bottom: ${(props) =>\n    props.hasBorderBottom\n      ? `1px solid ${props.theme.figma.base.color_offwhite_100}`\n      : \"none\"};\n  padding-bottom: ${(props) => props.hasBorderBottom ? \"10px\" : 0};\n`;\n\nexport const StyledBlockheaderTitle = styled.h2`\n  max-width: 250px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: ${(props) =>\n    props.theme.mixins.pxToRem(props.theme.figma.base.scale_2_25)};\n  font-weight: ${(props) => props.theme.figma.base.fontweight_bold};\n  line-height: ${(props) => props.theme.figma.base.scale_2_75}px;\n  color: ${(props) =>\n    props.theme.type == themeTypes.light\n      ? props.theme.figma.base.color_offblack_100\n      : props.theme.figma.base.color_white_100};\n`;\n\nexport const StyledBlockheaderSubtitle = styled.div`\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_headline};\n  font-weight: 500;\n  max-width: 250px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: ${(props) =>\n    props.theme.mixins.pxToRem(props.theme.figma.base.scale_1_50)};\n  line-height: ${(props) => props.theme.figma.base.scale_2}px;\n  letter-spacing: 0.04em;\n  color: ${(props) =>\n    props.theme.type === themeTypes.light\n      ? props.theme.figma.base.color_black_100\n      : props.theme.figma.base.color_white_80};\n  opacity: 0.5;\n  margin-top: 4px;\n`;\n","import React from \"react\";\nimport { StyledEmptyState, StyledEmptyStateText } from \"./StyledEmptyState\";\nimport { useReactAppState } from \"../../containers/utils\";\n\nfunction EmptyState({ emptyStateTranslation }) {\n  const { t } = useReactAppState();\n\n  return (\n    <StyledEmptyState>\n      <svg viewBox=\"0 0 159 87\">\n        <g fill=\"none\" fillRule=\"evenodd\">\n          <path\n            stroke=\"#000\"\n            strokeWidth=\"5\"\n            d=\"M156.2 20a14.6 14.6 0 11-29.2 0 14.6 14.6 0 0129.2 0zm-34 17.5L74.9 85m47.5-27.5L94.8 85\"\n          />\n          <path\n            fill=\"#000\"\n            d=\"M6 0L0 6v50.8h.2L5 52V5h83.3v51.8h.1l4.9-4.9V0z\"\n          />\n        </g>\n      </svg>\n      <StyledEmptyStateText>{t(emptyStateTranslation)}</StyledEmptyStateText>\n    </StyledEmptyState>\n  );\n}\n\nexport default EmptyState;\n","import styled from \"styled-components\";\n\nexport const StyledEmptyState = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  svg {\n    height: 100px;\n    width: 100px;\n  }\n\n  @media (min-width: ${(props) => props.theme.query.md.maxWidth}px) {\n    svg {\n      height: 130px;\n      width: 130px;\n    }\n  }\n`;\n\nexport const StyledEmptyStateText = styled.div`\n  width: 140px;\n  text-align: center;\n  font-weight: ${(props) => props.theme.figma.base.scale_70};\n  font-size: ${(props) =>\n    props.theme.mixins.pxToRem(props.theme.figma.base.scale_2)};\n  font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_standard};\n\n  @media (min-width: ${(props) => props.theme.query.md.maxWidth}px) {\n    width: 220px;\n    font-size: ${(props) =>\n      props.theme.mixins.pxToRem(props.theme.figma.base.scale_3)};\n  }\n`;\n","export { default } from \"./EmptyState\";\n","import React, { useEffect, useRef } from \"react\";\n\nconst GoogleTag = ({ id, size = 'premium-leaderboard' }) => {\n  const slot = useRef(null);\n\n  const onRender = (element) => {\n    if (slot.current || !element) return;\n\n    window.googletag = window.googletag ?? { cmd: [] };\n    window.googletag.cmd = window.googletag.cmd ?? [];\n\n    window.googletag.cmd.push(() => {\n      slot.current = window.googletag.defineSlot(window.adUnit, window.gptconfig.adSizes, id);\n      if (!slot.current) return;\n      slot.current.setTargeting(\"position\", id);\n      const slotSizeMapping = window.gptconfig.responsiveMappings[size];\n      slot.current.defineSizeMapping(slotSizeMapping).addService(window.googletag.pubads());\n    });\n\n    window.googletag.cmd.push(() => {\n      window.googletag.display(id);\n      window.googletag.pubads().refresh([slot.current], { changeCorrelator: false });\n    });\n  };\n\n  useEffect(() => {\n    return () => {\n      slot.current && window.googletag.destroySlots([slot.current]);\n    };\n  }, []);\n\n  if (!id) return null;\n\n  return (\n    <div className={`mls-o-adv-container mls-${size} mls-${id}`}>\n      <section className=\"d3-l-grid--outer d3-l-adv-row\">\n        <div role='complementary' className=\"d3-o-adv-block\" id={id} ref={onRender} />\n      </section>\n    </div>\n  );\n};\n\nexport default GoogleTag;\n","export { default } from './GoogleTag';\n","import React from \"react\";\nimport Scorebug from \"../Scorebug/Scorebug\";\nimport ClubV2 from \"../ClubV2\";\nimport { StyledEmptyScorebug, StyledMatchTile } from \"./StyledMatchTile\";\n\nfunction MatchTile({\n  status,\n  homeClubData,\n  awayClubData,\n  isHomeWinner = false,\n  isAwayWinner = false,\n  hasFullName = false,\n  hasShortName = false,\n  hasAbbreviation = false,\n  homeScore,\n  awayScore,\n  homeClubRank = null,\n  awayClubRank = null,\n  hideScorebug = false,\n  abbreviateStatus = false,\n}) {\n  return (\n    <StyledMatchTile className={`mls-c-match-tile --${status?.abbreviation}`}>\n      <ClubV2\n        className={!isHomeWinner && isAwayWinner ? \"--home-loser\" : \"\"}\n        clubData={homeClubData}\n        isHome\n        hasAbbreviation={hasAbbreviation}\n        hasFullName={hasFullName}\n        hasShortName={hasShortName}\n        rank={homeClubRank}\n      />\n      {hideScorebug ? (\n        <StyledEmptyScorebug />\n      ) : (\n        <Scorebug\n          homeScore={homeScore}\n          awayScore={awayScore}\n          abbreviateStatus={abbreviateStatus}\n        />\n      )}\n      <ClubV2\n        className={!isAwayWinner && isHomeWinner ? \"--away-loser\" : \"\"}\n        clubData={awayClubData}\n        isHome={false}\n        hasAbbreviation={hasAbbreviation}\n        hasFullName={hasFullName}\n        hasShortName={hasShortName}\n        rank={awayClubRank}\n      />\n    </StyledMatchTile>\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nMatchTile = React.memo(MatchTile);\n\nexport default MatchTile;\n","import React from \"react\";\nimport Skeleton, { SKELETON_TYPES } from \"../../Skeleton/Skeleton\";\n\nconst MatchTileSkeletonElements = [\n  {\n    type: SKELETON_TYPES.bar,\n    positionX: \"5\",\n    positionY: \"7\",\n    radiusX: \"2\",\n    radiusY: \"2\",\n    width: \"40\",\n    height: \"15\",\n  },\n  {\n    type: SKELETON_TYPES.image,\n    positionX: \"55\",\n    positionY: \"0\",\n    height: \"30\",\n    width: \"30\",\n    src: \"https://www.mlssoccer.com/assets/images/Fallbacklogo-grey.png\",\n    alt: \"Loader img\",\n  },\n  {\n    type: SKELETON_TYPES.bar,\n    positionX: \"95\",\n    positionY: \"5\",\n    radiusX: \"2\",\n    radiusY: \"2\",\n    width: \"30\",\n    height: \"20\",\n  },\n  {\n    type: SKELETON_TYPES.image,\n    positionX: \"135\",\n    positionY: \"0\",\n    height: \"30\",\n    width: \"30\",\n    src: \"https://www.mlssoccer.com/assets/images/Fallbacklogo-grey.png\",\n    alt: \"Loader img\",\n  },\n  {\n    type: SKELETON_TYPES.bar,\n    positionX: \"175\",\n    positionY: \"7\",\n    radiusX: \"2\",\n    radiusY: \"2\",\n    width: \"40\",\n    height: \"15\",\n  },\n];\n\nfunction MatchTileSkeleton() {\n  return (\n    <Skeleton\n      speed={1.5}\n      height={55}\n      width={255}\n      elements={MatchTileSkeletonElements}\n    />\n  );\n}\n\nexport default MatchTileSkeleton;\n","import styled from \"styled-components\";\nimport { themeTypes } from \"../../styled/Theme\";\n\nexport const StyledMatchTile = styled.div`\n  display: flex;\n  align-items: center;\n\n  .mls-c-club__picture {\n    margin-top: 4px;\n  }\n\n  .--home .mls-c-club__abbreviation {\n    width: 74px;\n    text-align: right;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .--away .mls-c-club__abbreviation {\n    width: 74px;\n    text-align: left;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.--post .--home-loser,\n  &.--post .--away-loser {\n    color: ${(props) =>\n      props.theme.type == themeTypes.light\n        ? props.theme.figma.base.color_offblack_50\n        : props.theme.figma.base.color_offwhite_50};\n  }\n`;\n\nexport const StyledEmptyScorebug = styled.div`\n  width: 60px;\n`;\n","import React from \"react\";\nimport { Bar, Circle, Wrapper, Img } from \"./SkeletonElements\";\n\nexport const SKELETON_TYPES = {\n  circle: \"circle\",\n  bar: \"bar\",\n  image: \"image\",\n};\n\nfunction Skeleton({ speed, width, height, backgroundColor, elements }) {\n  return (\n    <Wrapper width={width} height={height} className=\"mls-c-skeleton\">\n      {elements.map(({ type, ...rest }, index) => {\n        if (type === SKELETON_TYPES.circle) {\n          return (\n            <Circle\n              key={index}\n              speed={speed}\n              backgroundColor={backgroundColor}\n              {...rest}\n            />\n          );\n        } else if (type === SKELETON_TYPES.image) {\n          return (\n            <Img\n              width={rest.width}\n              height={rest.height}\n              key={index}\n              speed={speed}\n              backgroundColor={backgroundColor}\n              {...rest}\n            />\n          );\n        } else if (type === SKELETON_TYPES.bar) {\n          return (\n            <Bar\n              key={index}\n              speed={speed}\n              backgroundColor={backgroundColor}\n              {...rest}\n            />\n          );\n        }\n      })}\n    </Wrapper>\n  );\n}\n\nSkeleton.defaultProps = {\n  speed: 1.5,\n  width: \"auto\",\n};\n\nexport default Skeleton;\n","import styled, { css, keyframes } from \"styled-components\";\n\nconst fadeIn = keyframes`\n  0%, 100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: .4;\n  }\n`;\n\nexport const Wrapper = styled.div`\n  position: relative;\n  width: ${(props) =>\n    props.height\n      ? `${props.width === \"auto\" ? \"auto\" : `${props.width}px`}`\n      : \"auto\"}};\n  height: ${(props) => (props.height ? `${props.height}px` : \"auto\")}};\n`;\n\nconst CommonStyles = css`\n  position: absolute;\n  width: ${(props) => props.width}px;\n  height: ${(props) => props.height}px;\n  top: ${(props) => props.positionY || props.top}px;\n  left: ${(props) => props.positionX || props.left}px;\n  bottom: ${(props) => props.bottom}px;\n  right: ${(props) => props.right}px;\n  animation: ${fadeIn} ${(props) => props.speed}s ease-in-out infinite;\n`;\n\nexport const Bar = styled.div`\n  ${CommonStyles}\n  border-radius: ${(props) => props.borderRadius}px;\n  animation: ${fadeIn} ${(props) => props.speed}s ease-in-out infinite;\n  background-color: ${(props) =>\n    props.backgroundColor || props.theme.figma.base.color_offblack_10};\n`;\n\nexport const Circle = styled.div`\n  ${CommonStyles}\n  width: ${(props) => props.radius}px;\n  height: ${(props) => props.radius}px;\n  border-radius: ${(props) => props.radius}px;\n  animation: ${fadeIn} ${(props) => props.speed}s ease-in-out infinite;\n  background-color: ${(props) =>\n    props.backgroundColor || props.theme.figma.base.color_offblack_10};\n`;\n\nexport const Img = styled.img`\n  ${CommonStyles}\n  max-width: none;\n`;\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","import React from \"react\";\n\nexport const RightArrowIcon = ({\n  width,\n  height,\n  extraClasses,\n  maskId = \"path-1-inside-1_584_528\",\n}) => {\n  return (\n    <span role=\"img\" className={extraClasses}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={width || \"100%\"}\n        height={height || \"100%\"}\n        viewBox=\"0 0 5 10\"\n        fill=\"none\"\n      >\n        <mask id={maskId} fill=\"white\">\n          <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M0.384644 0.0999756L5.38464 5.09911L0.384644 10.1\"\n          />\n        </mask>\n        <path\n          d=\"M-0.322402 0.807144C-0.71296 0.416653 -0.713015 -0.216512 -0.322525 -0.60707C0.0679659 -0.997628 0.701131 -0.997683 1.09169 -0.607193L-0.322402 0.807144ZM5.38464 5.09911L6.09169 4.39194L6.79886 5.09899L6.09181 5.80615L5.38464 5.09911ZM1.09181 10.807C0.701321 11.1976 0.0681563 11.1976 -0.322402 10.8071C-0.71296 10.4167 -0.713015 9.78349 -0.322525 9.39293L1.09181 10.807ZM1.09169 -0.607193L6.09169 4.39194L4.6776 5.80628L-0.322402 0.807144L1.09169 -0.607193ZM6.09181 5.80615L1.09181 10.807L-0.322525 9.39293L4.67748 4.39206L6.09181 5.80615Z\"\n          fill=\"#AAAAAA\"\n          mask={`url(#${maskId})`}\n        />\n      </svg>\n    </span>\n  );\n};\n","import React from \"react\";\n\nexport const chevronDirection = {\n  down: \"down\",\n  up: \"up\",\n  left: \"left\",\n  right: \"right\",\n};\n\nexport const Chevron = ({\n  useEmptyClasses = false,\n  extraClasses,\n  direction = chevronDirection.down,\n  size = \"small\",\n}) =>\n  !useEmptyClasses ? (\n    <div\n      role=\"img\"\n      className={`mls-o-buttons__svg transform ${\n        extraClasses ? extraClasses : \"\"\n      }`}\n    >\n      <span\n        className={`oc-o-icon--chevron-${direction} fa-icon-svg fa-icon-svg--${size}`}\n      >\n        <svg\n          className=\"fa-icon-svg fa-icon-svg--chevron-down\"\n          viewBox=\"0 0 30 30\"\n        >\n          <use xlinkHref=\"#chevron-down\" />\n        </svg>\n      </span>\n    </div>\n  ) : (\n    <div role=\"img\" className={extraClasses ? extraClasses : \"\"}>\n      <svg viewBox=\"0 0 30 30\">\n        <use xlinkHref=\"#chevron-down\" />\n      </svg>\n    </div>\n  );\n\nexport const Filters = ({ extraClasses, size = \"small\" }) => (\n  <div\n    role=\"img\"\n    className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}\n  >\n    <span className={`oc-o-icon--filters fa-icon-svg fa-icon-svg--${size}`}>\n      <svg className=\"fa-icon-svg fa-icon-svg--filters\" viewBox=\"0 0 23 23\">\n        <g fill=\"none\" fillRule=\"evenodd\">\n          <path d=\"M.6.6h21.6v21.6H.6z\" />\n          <g stroke=\"#000\" transform=\"translate(4.2 4.2)\">\n            <path strokeLinecap=\"square\" d=\"M1.8.2v3m0 2.4v8.3\" />\n            <circle cx={1.8} cy={4.4} r={1} />\n            <path strokeLinecap=\"square\" d=\"M7.2 11.2v2.7M7.2.2v7.9\" />\n            <circle cx={7.2} cy={9.7} r={1} />\n            <path strokeLinecap=\"square\" d=\"M12.7.2v3m0 2.4v8.3\" />\n            <circle cx={12.7} cy={4.4} r={1} />\n          </g>\n        </g>\n      </svg>\n    </span>\n  </div>\n);\n\nexport const NoResults = ({ extraClasses, size = \"large\" }) => (\n  <div\n    role=\"img\"\n    className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}\n  >\n    <span className={`oc-o-icon--no-results fa-icon-svg fa-icon-svg--${size}`}>\n      <svg className=\"fa-icon-svg fa-icon-svg--no-results\" viewBox=\"0 0 159 87\">\n        <g fill=\"none\" fillRule=\"evenodd\">\n          <path\n            className=\"fa-icon-svg__ball\"\n            stroke=\"#000\"\n            strokeWidth={5}\n            d=\"M156.2 20a14.6 14.6 0 11-29.2 0 14.6 14.6 0 0129.2 0zm-34 17.5L74.9 85m47.5-27.5L94.8 85\"\n          />\n          <path\n            className=\"fa-icon-svg__goal\"\n            fill=\"#000\"\n            d=\"M6 0L0 6v50.8h.2L5 52V5h83.3v51.8h.1l4.9-4.9V0z\"\n          />\n        </g>\n      </svg>\n    </span>\n  </div>\n);\n\nexport const MediaPlayingSVG = ({ extraClasses, size = \"large\" }) => (\n  <div\n    role=\"img\"\n    className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}\n  >\n    <span\n      className={`oc-o-icon--media-playing fa-icon-svg fa-icon-svg--${size}`}\n    >\n      <svg viewBox=\"0 0 8 8\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g fill=\"none\" fillRule=\"evenodd\">\n          <path d=\"M-6-6h20v20H-6z\" />\n          <path\n            fill=\"#FFF\"\n            d=\"M.67 2H2v6H.67zM3.33 0h1.34v8H3.33zM6 4h1.33v4H6z\"\n          />\n          <g>\n            <path d=\"M-6-6h20v20H-6z\" />\n            <path\n              fill=\"#FFF\"\n              d=\"M.67 2H2v6H.67zM3.33 0h1.34v8H3.33zM6 4h1.33v4H6z\"\n            />\n          </g>\n        </g>\n      </svg>\n    </span>\n  </div>\n);\n\nexport const CardBackground = ({ extraClasses }) => (\n  <div className={extraClasses}>\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      preserveAspectRatio=\"xMinYMin slice\"\n      viewBox=\"0 0 329 218\"\n    >\n      <defs>\n        <linearGradient id=\"b\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\">\n          <stop offset=\"0%\" stopColor=\"#FBFBFB\" />\n          <stop offset=\"100%\" stopColor=\"#F5F6F6\" stopOpacity=\"0\" />\n        </linearGradient>\n        <linearGradient id=\"d\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\">\n          <stop offset=\"0%\" stopColor=\"#F5F6F6\" stopOpacity=\"0\" />\n          <stop offset=\"100%\" stopColor=\"#FBFBFB\" />\n        </linearGradient>\n        <path id=\"a\" d=\"M0 0h327v218H0z\" />\n      </defs>\n      <g fill=\"none\" fillRule=\"evenodd\" transform=\"translate(1)\">\n        <mask id=\"c\" fill=\"#fff\">\n          <use xlinkHref=\"#a\" />\n        </mask>\n        <use fill=\"#E5E6E6\" fillRule=\"nonzero\" xlinkHref=\"#a\" />\n        <path\n          fill=\"url(#b)\"\n          d=\"M0-1h246l-60 214H0z\"\n          mask=\"url(#c)\"\n          opacity=\".7\"\n        />\n        <path fill=\"url(#d)\" d=\"M-2 109h84L22 323H-2z\" mask=\"url(#c)\" />\n      </g>\n    </svg>\n  </div>\n);\n\nexport const TriangleSVG = ({ extraClasses, size = \"small\" }) => (\n  <div\n    role=\"img\"\n    className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}\n  >\n    <span className={`oc-o-icon--triangle fa-icon-svg fa-icon-svg--${size}`}>\n      <svg viewBox=\"0 0 4 6\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M0 0v6.04l3.5-3.02z\" fill=\"#FFF\" fillRule=\"evenodd\" />\n      </svg>\n    </span>\n  </div>\n);\n","export { Chevron } from './Svg';\n"],"names":[],"sourceRoot":""}