{"version":3,"file":"js/scripts_react_mls-match-summary_utils_js.js?_t=c1d37022fa694fc42339","mappings":";;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AAiBA;AAGA;AAEA;;;;;;;;;;;;;;;;AC/BA;;;;;;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAIA;AASA;AAIA;AASA;AACA;AAEA;AACA;AACA;AACA;AAEA;AA4BA;AAAA;AAAA;AACA;AACA;AAAA;AAEA;AAQA;AAmDA;AAGA;AAEA;;;;;;;;;;;;;;;;AChKA;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAKA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;;;ACnBA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AASA;AAYA;AAYA;AACA;AACA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAKA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AAmDA;AAAA;AAAA;AACA;AACA;AAAA;AAGA;AAOA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;;;ACrJA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AASA;AAYA;AAYA;AACA;AACA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAKA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AAmDA;AAAA;AAAA;AACA;AACA;AAAA;AAGA;AAOA;AAGA;AAEA;;;;;;;;;;;;;;;;ACvJA;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AACA;AAEA;AASA;AAAA;AAGA;AAEA;;;;;;;;;;;;;;;;;AC9BA;AACA;AAEA;AACA;AACA;AAEA;AASA;AAAA;AAGA;AAEA;;;;;;;;;;;;;;;;ACrBA;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAKA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;;AClBA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AASA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AAmCA;AAAA;AAAA;AACA;AACA;AAAA;AAGA;AAOA;AAGA;AAEA;;;;;;;;;;;;;;;;ACpFA;;;;;;;;;;;;;;;;ACAA;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAOA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;ACrBA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AASA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AAyCA;AAGA;AAEA;;;;;;;;;;;;;;;;AChFA;;;;;;;;;;;;;;;;ACAA;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAKA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;;AClBA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AASA;AAgCA;AAAA;AAAA;AACA;AACA;AAAA;AAGA;AAOA;AAGA;AAEA;;;;;;;;;;;;;;;;ACxEA;;;;;;;;;;;;;;;;ACAA;;;;;;;;;;;;;;;;;ACAA;AACA;AAEA;AACA;AACA;AAEA;AAYA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;ACxBA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAKA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;AClBA;AACA;AACA;AACA;AAEA;AACA;AAGA;AAEA;AACA;AAEA;AAsCA;AAGA;AAEA;;;;;;;;;;;;;;;;ACzDA;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AASA;AASA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGA;AAqDA;AAGA;AAEA;;;;;;;;;;;;;;;;AC5GA;;;;;;;;;;;;;;;;ACAA;;;;;;;;;;;;;;;;;ACAA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AACA;AACA;AAAA;AACA;AAGA;AAWA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/BA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAEA;AACA;AAEA;AAAA;AACA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAAA;AAEA;AAEA;AACA;AAAA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AAGA;AAAA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AAIA;AAAA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AAAA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAGA;AACA;AACA;AACA;AAAA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AACA;AAAA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AACA;AAAA;AAGA;AACA;AACA;AAAA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AACA;AAAA;AAGA;AACA;AACA;AAAA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAAA;AACA;AAGA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AAAA;AACA;AACA;AACA;AACA;AAGA;AAEA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AAAA;AACA;AACA;AACA;AACA;AAGA;AACA;AAAA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AAAA;AACA;AAGA;AACA;AACA;AAAA;AAGA;AAAA;AACA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAEA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAAA;AAGA;AACA;AAEA;AACA;AACA;AAAA;AAGA;AAAA;AACA;AAGA;AACA;AAAA;AAGA;AAAA;AACA;AAGA;AAAA;AAEA;AAEA;AACA;AACA;AAAA;AAEA;AAEA;AAAA;AAGA;AACA;AAEA;AAAA;AACA;AAEA;AACA;AAAA;AAGA;AAAA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AAGA;AACA;AACA;AAAA;AAGA;AACA;AACA;AAAA;AAGA;AACA;AAGA;AACA;AACA;;;;;;;;;;;;;;;;AC7fA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAKA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;ACvBA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAKA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;ACvBA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAGA;AAAA;AAAA;AACA;AACA;AAAA;AAGA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;AC1BA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAMA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;ACxBA;AAEA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAKA;AAAA;AAAA;AACA;AACA;AAAA;AAGA;AAAA;AAAA;AACA;AACA;AAAA;AAEA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAIA;AAGA;AAEA;;;;;;;;;;;;;;;;AClCA;;;;;;;;;;;;;;;;ACAA;;;;;;;;;;;;;;;;ACAA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAMA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;ACxBA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAMA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;ACxBA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAQA;AAGA;AAEA;;;;;;;;;;;;;;;;ACvBA;;;;;;;;;;;;;;;;ACAA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAKA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;ACvBA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAMA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;ACxBA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAKA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;ACvBA","sources":["webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Detailed/Detailed.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Detailed/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Featured/Featured.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Featured/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Goal/Goal.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Goal/components/SummaryGoal/SummaryCommentaryGoal.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Goal/components/SummaryGoal/SummaryGoal.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Goal/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/MatchScoreBox/MatchScoreBox.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/MatchScoreBox/MatchScoreboxCommentary.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/MatchScoreBox/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/MiscGoal/MiscGoal.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/MiscGoal/components/SummaryMiscGoal/SummaryMiscGoal.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/MiscGoal/components/SummaryMiscGoal/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/MiscGoal/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/PenaltyCard/PenaltyCard.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/PenaltyCard/components/SummaryPenaltyCard/SummaryPenaltyCard.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/PenaltyCard/components/SummaryPenaltyCard/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/PenaltyCard/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/PenaltyGoal/PenaltyGoal.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/PenaltyGoal/components/SummaryPenaltyGoal/SummaryPenaltyGoal.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/PenaltyGoal/components/SummaryPenaltyGoal/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/PenaltyGoal/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Standard/Standard.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Substitution/Substitution.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Substitution/components/FeedSubstitution/FeedSubstitution.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Substitution/components/FeedSubstitution/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Substitution/components/SummarySubstitution/SummarySubstitution.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Substitution/components/SummarySubstitution/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Substitution/index.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/components/Timer/Timer.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-summary/utils.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/CrossbarIcon/CrossbarIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/FilledPlayIcon/FilledPlayIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/InjuryIcon/InjuryIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/MissIcon/MissIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/OfficialIcon/OfficialIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/OfficialIcon/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/PenaltyCardIcon/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/PenaltyIcon/PenaltyIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/PenaltyMissIcon/PenaltyMissIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/PlayCircleIcon/PlayCircleIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/PlayCircleIcon/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/SaveIcon/SaveIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/TimerIcon/TimerIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/TrendingArrowIcon/TrendingArrowIcon.js","webpack://@mlssoccer/netcore/./scripts/react/shared/svg/TrendingArrowIcon/index.js"],"sourcesContent":["import React from 'react';\nimport { useCommentaryData } from \"../../utils\";\nimport Picture from \"../../../shared/components/Picture\";\n\nfunction Detailed() {\n  const { icon, commentaryType, title, commentary, clubLogoSrc, shortName } = useCommentaryData();\n\n  const { minute_of_play } = commentary || {};\n\n  return (\n    <div className={`mls-o-match-feed__commentary mls-o-match-feed__commentary--${commentaryType}`}>\n      <div className={`mls-o-match-feed__commentary-icon`}>\n        {icon}\n      </div>\n      <div className={`mls-o-match-feed__container`}>\n        <div className={`mls-o-match-feed__minute`}>\n          <div className={`mls-o-match-summary__regular-time`}>{minute_of_play}</div>\n        </div>\n        <div className={`mls-o-match-feed__club-logo`}>\n          <Picture src={clubLogoSrc != null ? clubLogoSrc : \"/assets/images/Fallbacklogo-grey.png\"} title={shortName} />\n        </div>\n        <div className={`mls-o-match-feed__title`}>{title}</div>\n        <div className={`mls-o-match-feed__comment`}>{commentary.commentary}</div>\n      </div>\n    </div>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nDetailed = React.memo(Detailed);\n\nexport default Detailed;\n","export { default } from './Detailed';\n","import React from 'react';\nimport { useCommentaryData } from \"../../utils\";\nimport Picture from \"../../../shared/components/Picture\";\nimport { formatImageUrl, statsApiPositionTypes, svgSizes } from \"../../../shared/utils\";\nimport ToggleButton from \"../../../shared/components/ToggleButton\";\nimport { formatMillisecondToHumanMinute } from \"../../../../libraries/_helpers\";\nimport FilledPlayIcon from \"../../../shared/svg/FilledPlayIcon/FilledPlayIcon\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\nimport { competitionTypes } from '../../../mls-lineups/utils';\nimport { periodTypes } from '../../../mls-match-list/utils';\n\nfunction Featured() {\n  const { urlList, isLeague, clubSportecId } = useReactAppState();\n  const { baseUrl } = urlList || {};\n\n  const { competition, icon, commentaryType, title, commentary, clubLogoSrc,\n    shortName, backgroundColor, opposingClubBackgroundColor, opposingClubAbbreviation,\n    matchEventType, clubAbbreviation, toggleDialog, clubSlug, opposingClubSlug } = useCommentaryData();\n  const { playerHeadshotThumbnailField: competitionThumbnailField } = competition || {};\n  const { minute_of_play, first_player, video, image, team_id, headshotNationalTeam, headshotClub, game_section } = commentary || {};\n\n  const { thumbnail, fields } = video || {};\n  const { duration } = fields || {};\n  const { templateUrl: videoTemplateUrl } = thumbnail || {};\n  const { highQuality: videoImageSrc } = videoTemplateUrl ? formatImageUrl(videoTemplateUrl, { format: \"t_editorial_landscape_8_desktop_mobile\", extension: \"f_auto\" }) : { highQuality: null };\n  const composedDuration = duration != null ? formatMillisecondToHumanMinute(duration) : null;\n\n  const { known_name: firstPlayerKnownName, last_name: firstPlayerLastName, first_name: firstPlayerFirstName, slug: firstPlayerSlug } = first_player || {};\n  const { jersey, position } = first_player || {};\n  const { templateUrl } = image || {};\n  const headshotTemplateUrl =\n    competitionThumbnailField === competitionTypes.nationalTeam && headshotNationalTeam ? headshotNationalTeam :\n      (competitionThumbnailField === competitionTypes.club && headshotClub ? headshotClub : templateUrl);\n\n  const firstPlayerName = firstPlayerKnownName\n    ? firstPlayerKnownName\n    : firstPlayerLastName && firstPlayerFirstName\n      ? `${firstPlayerFirstName.charAt(0)}. ${firstPlayerLastName}`\n      : firstPlayerLastName\n        ? firstPlayerLastName\n        : firstPlayerFirstName\n          ? firstPlayerFirstName : \"\";\n\n  const { highQuality: playerImageSrc } = headshotTemplateUrl ?\n    formatImageUrl(headshotTemplateUrl, { format: \"w_70,h_70,c_fill\", extension: \"f_png\" }) :\n    { highQuality: \"/assets/images/Fallback-Headshot.png\" };\n\n  const bodyModifierClass = videoImageSrc == null && first_player == null\n    ? \"mls-o-match-feed__body--comment-only\"\n    : videoImageSrc == null\n      ? \"mls-o-match-feed__body--no-video\"\n      : first_player == null\n        ? \"mls-o-match-feed__body--no-player\"\n        : \"\";\n\n\n  const jerseyBackgroundColor = matchEventType === \"own goal\" ? opposingClubBackgroundColor : backgroundColor;\n  const displayAbbreviation = matchEventType === \"own goal\" ? opposingClubAbbreviation : clubAbbreviation;\n\n  const displayAbbreviationClubSlug = matchEventType === \"own goal\" ? opposingClubSlug : clubSlug;\n  const isCurrentClub_first = team_id == clubSportecId;\n  const hasPlayerLink = (isLeague || isCurrentClub_first) && baseUrl && firstPlayerSlug && firstPlayerSlug !== \"\";\n  const hasClubLink = isLeague && baseUrl && displayAbbreviationClubSlug && displayAbbreviationClubSlug !== \"\";\n\n  return (\n    <div className={`mls-o-match-feed__commentary mls-o-match-feed__commentary--${commentaryType}`}>\n      <div className={`mls-o-match-feed__commentary-icon`}>\n        {icon}\n      </div>\n      <div className={`mls-o-match-feed__container`}>\n        <div className={\"mls-o-match-feed__header\"} style={{ backgroundColor }}>\n          {game_section !== periodTypes.penalty && (\n            <div className={`mls-o-match-feed__minute`}>\n              <div className={`mls-o-match-summary__regular-time`}>{minute_of_play}</div>\n            </div>\n          )}\n          <div className={`mls-o-match-feed__club-logo`}>\n            {\n              hasClubLink ?\n                (<a alt={shortName} href={`${baseUrl}/clubs/${clubSlug}`}>\n                  <Picture src={clubLogoSrc != null ? clubLogoSrc : \"/assets/images/Fallbacklogo-grey.png\"} title={shortName} />\n                </a>)\n                : <Picture src={clubLogoSrc != null ? clubLogoSrc : \"/assets/images/Fallbacklogo-grey.png\"} title={shortName} />\n            }\n          </div>\n          <div className={`mls-o-match-feed__title`}>{title}</div>\n        </div>\n        <div className={`mls-o-match-feed__body ${bodyModifierClass}`}>\n          {\n            videoImageSrc != null\n              ? (\n                <div className={`mls-o-match-feed__image`}>\n                  <ToggleButton\n                    className={\"mls-o-match-feed__video\"}\n                    onClick={() => toggleDialog(video)}\n                  >\n                    <Picture src={videoImageSrc} title={title} />\n                    {\n                      composedDuration != null\n                        ? (\n                          <div className=\"mls-o-match-feed__duration\">{composedDuration}\n                            <FilledPlayIcon size={svgSizes.xSmall} />\n                          </div>\n                        )\n                        : null\n                    }\n                  </ToggleButton>\n                </div>\n              ) : null\n          }\n          <div className={`mls-o-match-feed__comment`}>{commentary.commentary}</div>\n          {\n            first_player != null\n              ? (\n                <div className=\"mls-o-player-block\">\n                  <div className=\"mls-o-player-block__player-image\">\n                    {\n                      hasPlayerLink ?\n                        (<a alt={firstPlayerName} href={`${baseUrl}/players/${firstPlayerSlug}`}>\n                          <Picture fallbackSrc={\"/assets/images/Fallback-Headshot.png\"} loadingSrc={\"/assets/images/Fallback-Headshot.png\"} src={playerImageSrc} />\n                        </a>)\n                        : <Picture fallbackSrc={\"/assets/images/Fallback-Headshot.png\"} loadingSrc={\"/assets/images/Fallback-Headshot.png\"} src={playerImageSrc} />\n                    }\n                    <div className=\"mls-o-player-block__jersey\" style={{ backgroundColor: jerseyBackgroundColor }}>\n                      {jersey}\n                    </div>\n                  </div>\n                  <div className={\"mls-o-player-block__player-info\"}>\n                    <div className=\"mls-o-player-block__player-name\">\n                      {\n                        hasPlayerLink ?\n                          (<a alt={firstPlayerName} href={`${baseUrl}/players/${firstPlayerSlug}`}>{firstPlayerName}</a>)\n                          : firstPlayerName\n                      }\n                    </div>\n                    <div className=\"mls-o-player-block__player-details\">\n                      <span className=\"mls-o-player-block__position\">\n                        {statsApiPositionTypes[position]}\n                      </span>\n                      <span className=\"mls-o-player-block__club-abbreviation\">\n                        {\n                          hasClubLink ?\n                            (<a alt={displayAbbreviation} href={`${baseUrl}/clubs/${displayAbbreviationClubSlug}`}>{displayAbbreviation}</a>)\n                            : displayAbbreviation\n                        }\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              ) : null\n          }\n        </div>\n      </div>\n    </div>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nFeatured = React.memo(Featured);\n\nexport default Featured;\n","export { default } from './Featured';\n","import React from 'react';\nimport { componentTypes, useCommentaryData } from \"../../utils\";\nimport SummaryGoal from \"./components/SummaryGoal/SummaryGoal\";\nimport Featured from \"../Featured/Featured\";\nimport SummaryCommentaryGoal from './components/SummaryGoal/SummaryCommentaryGoal';\n\nfunction Goal() {\n  const { commentary, componentType = componentTypes.summary } = useCommentaryData();\n\n  return (\n    componentType === componentTypes.summary\n      ? commentary.event ? <SummaryGoal /> : <SummaryCommentaryGoal />\n      : <Featured />\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nGoal = React.memo(Goal);\n\nexport default Goal;\n","import React from 'react';\nimport Picture from \"../../../../../shared/components/Picture\";\nimport PlayCircleIcon from \"../../../../../shared/svg/PlayCircleIcon\";\nimport { formatMatchMinutes, useCommentaryData } from \"../../../../utils\";\nimport { useReactAppState } from \"../../../../../shared/containers/utils\";\nimport { trackMatchHubClick } from '../../../../../../libraries/_modules/tracking/helpers';\n\nfunction SummaryCommentaryGoal() {\n    const { mediaQueries, urlList, isLeague, clubSportecId, t } = useReactAppState();\n    const { isMediumLargeMin } = mediaQueries || {};\n    const { commentary, clubLogoSrc, isHome, icon, componentType, commentaryType, toggleDialog, forgePlayers } = useCommentaryData();\n    const { baseUrl } = urlList || {};\n\n    const { first_player, second_player, third_player, minute_of_play, video, first_club, second_club } = commentary;\n    const [minutes, extraMinutes] = formatMatchMinutes(minute_of_play);\n\n    const { known_name: firstPlayerKnownName, last_name: firstPlayerLastName, first_name: firstPlayerFirstName } = first_player || {};\n    const { known_name: secondPlayerKnownName, last_name: secondPlayerLastName, first_name: secondPlayerFirstName } = second_player || {};\n    const { known_name: thirdPlayerKnownName, last_name: thirdPlayerLastName, first_name: thirdPlayerFirstName } = third_player || {};\n\n    const firstPlayerName = firstPlayerKnownName\n        ? firstPlayerKnownName\n        : firstPlayerLastName && firstPlayerFirstName\n            ? `${firstPlayerFirstName.charAt(0)}. ${firstPlayerLastName}`\n            : firstPlayerLastName\n                ? firstPlayerLastName\n                : firstPlayerFirstName\n                    ? firstPlayerFirstName : \"\";\n\n    const secondPlayerName = second_player != null\n        ? secondPlayerKnownName\n            ? secondPlayerKnownName\n            : secondPlayerLastName && secondPlayerFirstName\n                ? `${secondPlayerFirstName.charAt(0)}. ${secondPlayerLastName}`\n                : secondPlayerLastName\n                    ? secondPlayerLastName\n                    : secondPlayerFirstName\n                        ? secondPlayerFirstName\n                        : null\n        : null;\n\n    const thirdPlayerName = third_player != null\n        ? thirdPlayerKnownName\n            ? thirdPlayerKnownName\n            : thirdPlayerLastName && thirdPlayerFirstName\n                ? `${thirdPlayerFirstName.charAt(0)}. ${thirdPlayerLastName}`\n                : thirdPlayerLastName\n                    ? thirdPlayerLastName\n                    : thirdPlayerFirstName\n                        ? thirdPlayerFirstName\n                        : null\n        : null;\n\n    const handleClick = () => {\n        toggleDialog(video);\n        trackMatchHubClick({\n            clickType: \"match summary\",\n            clickItem: \"video play\",\n            // add match data\n            // match: slug,\n            // matchState: status.abbreviation,\n            // competition: competition.shortName,\n        });\n    };\n\n    const { opta_id: firstClubSportecId } = first_club || {};\n    const isCurrentClub_first = firstClubSportecId == clubSportecId;\n    let firstPlayerSlug;\n    if (isLeague || isCurrentClub_first) {\n        const { opta_id: firstPlayerSportecId } = first_player || {};\n        firstPlayerSlug = getPlayerSlugBySportecId({ forgeMatchPlayers: forgePlayers, playerSportecId: firstPlayerSportecId });\n    }\n\n    const { opta_id: secondClubSportecId } = second_club || {};\n    const isCurrentClub_second = secondClubSportecId == clubSportecId;\n    let secondPlayerSlug;\n    if (isLeague || isCurrentClub_second) {\n        const { opta_id: secondPlayerSportecId } = second_player || {};\n        secondPlayerSlug = getPlayerSlugBySportecId({ forgeMatchPlayers: forgePlayers, playerSportecId: secondPlayerSportecId });\n    }\n\n    return (\n        <div className={`mls-o-match-summary__commentary mls-o-match-${componentType}__commentary--${commentaryType}`}>\n            {\n                isMediumLargeMin\n                    ? <div className={`mls-o-match-summary__${commentaryType} mls-o-match-summary__${commentaryType}--${isHome ? \"away\" : \"home\"}`} />\n                    : null\n            }\n            <div className={`mls-o-match-summary__commentary-icon`}>\n                {icon}\n            </div>\n            <div className={`mls-o-match-summary__goal mls-o-match-summary__goal--${isHome ? \"home\" : \"away\"}`}>\n                <div className={`mls-o-match-summary__minute`}>\n                    {\n                        minutes ? <div className={`mls-o-match-summary__regular-time`}>{minutes}</div> : null\n                    }\n                    {\n                        extraMinutes\n                            ? <div className={`mls-o-match-summary__extra-time`}>{`+${extraMinutes}`}</div>\n                            : null\n                    }\n                </div>\n                <div className={`mls-o-match-summary__club-logo`}>\n                    <Picture src={clubLogoSrc} title={\"club logo\"} />\n                </div>\n                <div className={`mls-o-match-summary__players`}>\n                    <div className={`mls-o-match-summary__goal-scorer`}>\n                        {baseUrl && firstPlayerSlug ?\n                            (<a alt={firstPlayerName} href={`${baseUrl}/players/${firstPlayerSlug}`}>{firstPlayerName}</a>)\n                            : firstPlayerName}\n                    </div>\n                    {\n                        secondPlayerName && baseUrl && secondPlayerSlug\n                            ? (\n                                <div className={`mls-o-match-summary__goal-assister`}>\n                                    {`${thirdPlayerName ? `${t(\"summary_assists\")}` : `${t(\"summary_assist\")}`}: `}\n                                    <a alt={secondPlayerName} href={`${baseUrl}/players/${secondPlayerSlug}`}>{secondPlayerName}</a>\n                                    {`${thirdPlayerName ? `, ${thirdPlayerName}` : \"\"}`}\n                                </div>\n                            )\n                            : secondPlayerName\n                                ? (\n                                    <div className={`mls-o-match-summary__goal-assister`}>\n                                        {`${thirdPlayerName ? `${t(\"summary_assists\")}` : `${t(\"summary_assist\")}`}: ${secondPlayerName}${thirdPlayerName ? `, ${thirdPlayerName}` : \"\"}`}\n                                    </div>\n                                )\n                                : null\n                    }\n                </div>\n                {\n                    video != null\n                        ? (\n                            <div\n                                onClick={handleClick}\n                                className={`mls-o-match-summary__watch`}>\n                                <span className={`mls-o-match-summary__watch-link`}>\n                                    <PlayCircleIcon />\n                                </span>\n                            </div>\n                        ) : null\n                }\n            </div>\n        </div>\n    );\n}\n\n// eslint-disable-next-line no-func-assign\nSummaryCommentaryGoal = React.memo(SummaryCommentaryGoal);\n\nexport default SummaryCommentaryGoal;\n","import React from 'react';\nimport Picture from \"../../../../../shared/components/Picture\";\nimport PlayCircleIcon from \"../../../../../shared/svg/PlayCircleIcon\";\nimport { formatMatchMinutes, useCommentaryData, getPlayerSlugById } from \"../../../../utils\";\nimport { useReactAppState } from \"../../../../../shared/containers/utils\";\nimport { trackMatchHubClick } from '../../../../../../libraries/_modules/tracking/helpers';\n\nfunction SummaryGoal() {\n  const { mediaQueries, urlList, isLeague, clubSportecId, t } = useReactAppState();\n  const { isMediumLargeMin } = mediaQueries || {};\n  const { commentary, clubLogoSrc, isHome, icon, componentType, commentaryType, toggleDialog, forgePlayers } = useCommentaryData();\n  const { baseUrl } = urlList || {};\n\n  const { type, sub_type, video } = commentary;\n  const { minute_of_play, team_id } = commentary?.event;\n  const [minutes, extraMinutes] = formatMatchMinutes(minute_of_play);\n\n  const { player_out_alias: firstPlayerKnownName, player_last_name: firstPlayerLastName, player_first_name: firstPlayerFirstName } = commentary?.event || {};\n  const { assist_player_out_alias: secondPlayerKnownName, assist_player_last_name: secondPlayerLastName, assist_player_first_name: secondPlayerFirstName } = commentary?.event || {};\n  const { second_assist_player_out_alias: thirdPlayerKnownName, second_assist_player_last_name: thirdPlayerLastName, second_assist_player_first_name: thirdPlayerFirstName } = commentary?.event || {};\n\n  const firstPlayerName = firstPlayerKnownName\n    ? firstPlayerKnownName\n    : firstPlayerLastName && firstPlayerFirstName\n      ? `${firstPlayerFirstName.charAt(0)}. ${firstPlayerLastName}`\n      : firstPlayerLastName\n        ? firstPlayerLastName\n        : firstPlayerFirstName\n          ? firstPlayerFirstName : \"\";\n\n  const secondPlayerName = commentary?.event != null\n    ? secondPlayerKnownName\n      ? secondPlayerKnownName\n      : secondPlayerLastName && secondPlayerFirstName\n        ? `${secondPlayerFirstName.charAt(0)}. ${secondPlayerLastName}`\n        : secondPlayerLastName\n          ? secondPlayerLastName\n          : secondPlayerFirstName\n            ? secondPlayerFirstName\n            : null\n    : null;\n\n  const thirdPlayerName = commentary?.event != null\n    ? thirdPlayerKnownName\n      ? thirdPlayerKnownName\n      : thirdPlayerLastName && thirdPlayerFirstName\n        ? `${thirdPlayerFirstName.charAt(0)}. ${thirdPlayerLastName}`\n        : thirdPlayerLastName\n          ? thirdPlayerLastName\n          : thirdPlayerFirstName\n            ? thirdPlayerFirstName\n            : null\n    : null;\n\n  const handleClick = () => {\n    toggleDialog(video);\n    trackMatchHubClick({\n      clickType: \"match summary\",\n      clickItem: \"video play\",\n      // add match data\n      // match: slug,\n      // matchState: status.abbreviation,\n      // competition: competition.shortName,\n    });\n  };\n\n  const isCurrentClub = team_id == clubSportecId;\n  let firstPlayerSlug;\n  if (isLeague || isCurrentClub) {\n    const { player_id: firstPlayerId } = commentary?.event || {};\n    firstPlayerSlug = getPlayerSlugById({ forgeMatchPlayers: forgePlayers, playerSportecId: firstPlayerId });\n  }\n\n  let secondPlayerSlug;\n  if (isLeague || isCurrentClub) {\n    const { player_id: secondPlayerId } = commentary?.event || {};\n    secondPlayerSlug = getPlayerSlugById({ forgeMatchPlayers: forgePlayers, playerSportecId: secondPlayerId });\n  }\n\n  if (type !== \"own_goals\" && sub_type !== \"goals\") {\n    return null;\n  }\n\n  return (\n    <div className={`mls-o-match-summary__commentary mls-o-match-${componentType}__commentary--${commentaryType}`}>\n      {\n        isMediumLargeMin\n          ? <div className={`mls-o-match-summary__${commentaryType} mls-o-match-summary__${commentaryType}--${isHome ? \"away\" : \"home\"}`} />\n          : null\n      }\n      <div className={`mls-o-match-summary__commentary-icon`}>\n        {icon}\n      </div>\n      <div className={`mls-o-match-summary__goal mls-o-match-summary__goal--${isHome ? \"home\" : \"away\"}`}>\n        <div className={`mls-o-match-summary__minute`}>\n          {\n            minutes ? <div className={`mls-o-match-summary__regular-time`}>{minutes}</div> : null\n          }\n          {\n            extraMinutes\n              ? <div className={`mls-o-match-summary__extra-time`}>{`+${extraMinutes}`}</div>\n              : null\n          }\n        </div>\n        <div className={`mls-o-match-summary__club-logo`}>\n          <Picture src={clubLogoSrc} title={\"club logo\"} />\n        </div>\n        <div className={`mls-o-match-summary__players`}>\n          <div className={`mls-o-match-summary__goal-scorer`}>\n            {baseUrl && firstPlayerSlug ?\n              (<a alt={firstPlayerName} href={`${baseUrl}/players/${firstPlayerSlug}`}>{firstPlayerName}</a>)\n              : firstPlayerName}\n          </div>\n          {\n            secondPlayerName && baseUrl && secondPlayerSlug\n              ? (\n                <div className={`mls-o-match-summary__goal-assister`}>\n                  {`${thirdPlayerName ? `${t(\"summary_assists\")}` : `${t(\"summary_assist\")}`}: `}\n                  <a alt={secondPlayerName} href={`${baseUrl}/players/${secondPlayerSlug}`}>{secondPlayerName}</a>\n                  {`${thirdPlayerName ? `, ${thirdPlayerName}` : \"\"}`}\n                </div>\n              )\n              : secondPlayerName\n                ? (\n                  <div className={`mls-o-match-summary__goal-assister`}>\n                    {`${thirdPlayerName ? `${t(\"summary_assists\")}` : `${t(\"summary_assist\")}`}: ${secondPlayerName}${thirdPlayerName ? `, ${thirdPlayerName}` : \"\"}`}\n                  </div>\n                )\n                : null\n          }\n        </div>\n        {\n          video != null\n            ? (\n              <div\n                onClick={handleClick}\n                className={`mls-o-match-summary__watch`}>\n                <span className={`mls-o-match-summary__watch-link`}>\n                  <PlayCircleIcon />\n                </span>\n              </div>\n            ) : null\n        }\n      </div>\n    </div>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nSummaryGoal = React.memo(SummaryGoal);\n\nexport default SummaryGoal;\n","export { default } from './Goal';\n","import React from 'react';\nimport { componentTypes, useCommentaryData } from \"../../utils\";\nimport MatchScoreBoxCommentary from './MatchScoreboxCommentary';\n\nfunction MatchScoreBox() {\n  const { commentary, componentType = componentTypes.summary } = useCommentaryData();\n  const { result, team_role } = commentary?.event || {};\n\n  if (!commentary.event) {\n    return <MatchScoreBoxCommentary />\n  }\n\n  const homeScore = result?.split(\":\")?.[0] || \"\";\n  const awayScore = result?.split(\":\")?.[1] || \"\";\n  const scoreChange = team_role === \"home\" ? \"home\" : \"away\";\n\n  return (\n    <div className={`mls-o-match-${componentType}__score-box`}>\n      <div className={`mls-o-match-${componentType}__score`}>\n        <span className={`mls-o-match-${componentType}__home-score ${scoreChange === \"home\" ? `mls-o-match-${componentType}__home-score--updated` : \"\"}`}>{homeScore}</span>\n        {\":\"}\n        <span className={`mls-o-match-${componentType}__away-score ${scoreChange === \"away\" ? `mls-o-match-${componentType}__away-score--updated` : \"\"}`}>{awayScore}</span>\n      </div>\n    </div>\n  );\n};\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nMatchScoreBox = React.memo(MatchScoreBox);\n\nexport default MatchScoreBox;\n","import React from 'react';\nimport { componentTypes, useCommentaryData } from \"../../utils\";\n\nfunction MatchScoreBoxCommentary() {\n    const { commentary, componentType = componentTypes.summary } = useCommentaryData();\n    const { awayScore, homeScore, scoreChange } = commentary || {};\n\n    return (\n        <div className={`mls-o-match-${componentType}__score-box`}>\n            <div className={`mls-o-match-${componentType}__score`}>\n                <span className={`mls-o-match-${componentType}__home-score ${scoreChange === \"home\" ? `mls-o-match-${componentType}__home-score--updated` : \"\"}`}>{homeScore}</span>\n                {\":\"}\n                <span className={`mls-o-match-${componentType}__away-score ${scoreChange === \"away\" ? `mls-o-match-${componentType}__away-score--updated` : \"\"}`}>{awayScore}</span>\n            </div>\n        </div>\n    );\n};\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nMatchScoreBoxCommentary = React.memo(MatchScoreBoxCommentary);\n\nexport default MatchScoreBoxCommentary;\n\n","export { default } from './MatchScoreBox';\n","import React from 'react';\nimport { componentTypes, useCommentaryData } from \"../../utils\";\nimport SummaryMiscGoal from \"./components/SummaryMiscGoal\";\nimport Featured from \"../Featured/Featured\";\n\nfunction MiscGoal() {\n  const { componentType = componentTypes.summary } = useCommentaryData();\n\n  return (\n    componentType === componentTypes.summary\n      ? <SummaryMiscGoal />\n      : <Featured />\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nMiscGoal = React.memo(MiscGoal);\n\nexport default MiscGoal;\n","import React from 'react';\nimport Picture from \"../../../../../shared/components/Picture\";\nimport PlayCircleIcon from \"../../../../../shared/svg/PlayCircleIcon\";\nimport { formatMatchMinutes, useCommentaryData, getPlayerSlugById } from \"../../../../utils\";\nimport { useReactAppState } from \"../../../../../shared/containers/utils\";\n\nfunction SummaryMiscGoal() {\n  const { mediaQueries, urlList, isLeague, clubOptaId } = useReactAppState();\n  const { isMediumLargeMin } = mediaQueries || {};\n  const { commentary, clubLogoSrc, isHome, icon, commentaryType, toggleDialog, forgePlayers } = useCommentaryData();\n  const { first_player, minute_display, video, first_club } = commentary;\n  const [minutes, extraMinutes] = formatMatchMinutes(minute_display);\n  const { known_name: firstPlayerKnownName, last_name: firstPlayerLastName, first_name: firstPlayerFirstName } = first_player || {};\n  const { baseUrl } = urlList || {};\n\n  const firstPlayerName = firstPlayerKnownName\n    ? firstPlayerKnownName\n    : firstPlayerLastName && firstPlayerFirstName\n      ? `${firstPlayerFirstName.charAt(0)}. ${firstPlayerLastName}`\n      : firstPlayerLastName\n        ? firstPlayerLastName\n        : firstPlayerFirstName\n          ? firstPlayerFirstName : \"\";\n\n  const { opta_id: firstClubOptaId } = first_club || {};\n  const isCurrentClub_first = firstClubOptaId == clubOptaId;\n  let firstPlayerSlug;\n  if (isLeague || isCurrentClub_first) {\n    const { opta_id: firstPlayerOptaId } = first_player || {};\n    firstPlayerSlug = getPlayerSlugById({ forgeMatchPlayers: forgePlayers, playerOptaId: firstPlayerOptaId });\n  }\n\n  return (\n    <div className={`mls-o-match-summary__commentary mls-o-match-summary__commentary--${commentaryType}`}>\n      {\n        isMediumLargeMin\n          ? <div className={`mls-o-match-summary__${commentaryType} mls-o-match-summary__${commentaryType}--${isHome ? \"away\" : \"home\"}`} />\n          : null\n      }\n      <div className={`mls-o-match-summary__commentary-icon`}>\n        {icon}\n      </div>\n      <div className={`mls-o-match-summary__misc-goal mls-o-match-summary__misc-goal--${isHome ? \"home\" : \"away\"}`}>\n        <div className={`mls-o-match-summary__minute`}>\n          {\n            minutes ? <div className={`mls-o-match-summary__regular-time`}>{minutes}</div> : null\n          }\n          {\n            extraMinutes\n              ? <div className={`mls-o-match-summary__extra-time`}>{`+${extraMinutes}`}</div>\n              : null\n          }\n        </div>\n        <div className={`mls-o-match-summary__club-logo`}>\n          <Picture src={clubLogoSrc} title={\"club logo\"} />\n        </div>\n        <div className={`mls-o-match-summary__players`}>\n          <div className={`mls-o-match-summary__goal-scorer`}>\n            {baseUrl && firstPlayerSlug ?\n              (<a alt={firstPlayerName} href={`${baseUrl}/players/${firstPlayerSlug}`}>{firstPlayerName}</a>)\n              : firstPlayerName}\n            {` (OG)`}\n          </div>\n        </div>\n        {\n          video != null\n            ? (\n              <div\n                onClick={() => toggleDialog(video)}\n                className={`mls-o-match-summary__watch`}>\n                <span className={`mls-o-match-summary__watch-link`}>\n                  <PlayCircleIcon />\n                </span>\n              </div>\n            ) : null\n        }\n      </div>\n    </div>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nSummaryMiscGoal = React.memo(SummaryMiscGoal);\n\nexport default SummaryMiscGoal;\n","export { default } from './SummaryMiscGoal';\n","export { default } from './MiscGoal';\n","import React from 'react';\nimport { commentaryTypes, componentTypes, useCommentaryData } from \"../../utils\";\nimport SummaryPenaltyCard from './components/SummaryPenaltyCard';\nimport Detailed from '../Detailed';\nimport Featured from \"../Featured\";\n\nfunction PenaltyCard() {\n  const { componentType = componentTypes.summary, commentaryType } = useCommentaryData();\n\n  return (\n    componentType === componentTypes.summary\n      ? <SummaryPenaltyCard />\n      : commentaryType === commentaryTypes.yellowCard\n        ? <Detailed />\n        : <Featured />\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nPenaltyCard = React.memo(PenaltyCard);\n\nexport default PenaltyCard;\n","import React from 'react';\nimport Picture from \"../../../../../shared/components/Picture\";\nimport { formatMatchMinutes, useCommentaryData, getPlayerSlugById } from \"../../../../utils\";\nimport { useReactAppState } from \"../../../../../shared/containers/utils\";\n\nfunction SummaryPenaltyCard() {\n  const { mediaQueries, urlList, isLeague, clubSportecId } = useReactAppState();\n  const { isMediumLargeMin } = mediaQueries || {};\n  const { commentary, clubLogoSrc, bookings, isHome, commentaryType, icon, forgePlayers } = useCommentaryData();\n  const { minute_of_play, team_id } = commentary?.event || {};\n  const [minutes, extraMinutes] = formatMatchMinutes(minute_of_play);\n  const foundPenalty = bookings && bookings.length > 0 ? bookings.find(booking => booking.team_id === team_id) : null;\n  const { reason } = foundPenalty || {};\n  const { baseUrl } = urlList || {};\n\n  const { player_alias: firstPlayerKnownName, player_last_name: firstPlayerLastName, player_first_name: firstPlayerFirstName } = commentary?.event || {};\n\n  const firstPlayerName = firstPlayerKnownName\n    ? firstPlayerKnownName\n    : firstPlayerLastName && firstPlayerFirstName\n      ? `${firstPlayerFirstName.charAt(0)}. ${firstPlayerLastName}`\n      : firstPlayerLastName\n        ? firstPlayerLastName\n        : firstPlayerFirstName\n          ? firstPlayerFirstName : \"\";\n\n  const { team_id: firstClubId } = commentary?.event || {};\n  const isCurrentClub_first = firstClubId == clubSportecId;\n  let firstPlayerSlug;\n  if (isLeague || isCurrentClub_first) {\n    const { player_id: firstPlayerId } = commentary?.event || {};\n    firstPlayerSlug = getPlayerSlugById({ forgeMatchPlayers: forgePlayers, playerSportecId: firstPlayerId });\n  }\n\n  return (\n    <div className={`mls-o-match-summary__commentary mls-o-match-summary__commentary--${commentaryType}`}>\n      {\n        isMediumLargeMin\n          ? <div className={`mls-o-match-summary__${commentaryType} mls-o-match-summary__${commentaryType}--${isHome ? \"away\" : \"home\"}`} />\n          : null\n      }\n      <div className={`mls-o-match-summary__commentary-icon`}>\n        {icon}\n      </div>\n      <div className={`mls-o-match-summary__${commentaryType} mls-o-match-summary__${commentaryType}--${isHome ? \"home\" : \"away\"}`}>\n        <div className={`mls-o-match-summary__minute`}>\n          {\n            minutes ? <div className={`mls-o-match-summary__regular-time`}>{minutes}</div> : null\n          }\n          {\n            extraMinutes\n              ? <div className={`mls-o-match-summary__extra-time`}>{`+${extraMinutes}`}</div>\n              : null\n          }\n        </div>\n        <div className={`mls-o-match-summary__club-logo`}>\n          <Picture src={clubLogoSrc} title={\"club logo\"} />\n        </div>\n        <div className={`mls-o-match-summary__players`}>\n          <div className={`mls-o-match-summary__penalty-receiver`}>\n            {baseUrl && firstPlayerSlug ?\n              (<a alt={firstPlayerName} href={`${baseUrl}/players/${firstPlayerSlug}`}>{firstPlayerName}</a>)\n              : firstPlayerName}\n          </div>\n          {\n            reason ? (\n              <div className={`mls-o-match-summary__reason`}>\n                {reason}\n              </div>\n            ) : null\n          }\n        </div>\n      </div>\n    </div>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nSummaryPenaltyCard = React.memo(SummaryPenaltyCard);\n\nexport default SummaryPenaltyCard;\n","export { default } from './SummaryPenaltyCard';\n","export { default } from './PenaltyCard';\n","import React from 'react';\nimport { componentTypes, useCommentaryData } from \"../../utils\";\nimport SummaryPenaltyGoal from \"./components/SummaryPenaltyGoal\";\nimport Featured from \"../Featured/Featured\";\n\nfunction PenaltyGoal() {\n  const { componentType = componentTypes.summary } = useCommentaryData();\n\n  return (\n    componentType === componentTypes.summary\n      ? <SummaryPenaltyGoal />\n      : <Featured />\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nPenaltyGoal = React.memo(PenaltyGoal);\n\nexport default PenaltyGoal;\n","import React from 'react';\nimport Picture from \"../../../../../shared/components/Picture\";\nimport PlayCircleIcon from \"../../../../../shared/svg/PlayCircleIcon\";\nimport { formatMatchMinutes, useCommentaryData } from \"../../../../utils\";\nimport { useReactAppState } from \"../../../../../shared/containers/utils\";\n\nfunction SummaryPenaltyGoal() {\n  const { mediaQueries } = useReactAppState();\n  const { isMediumLargeMin } = mediaQueries || {};\n  const { commentary, clubLogoSrc, isHome, icon, commentaryType, toggleDialog } = useCommentaryData();\n  const { minute_of_play, video } = commentary?.event?.shot_at_goal || {};\n  const [minutes, extraMinutes] = formatMatchMinutes(minute_of_play);\n  const { player_out_alias: firstPlayerKnownName, player_last_name: firstPlayerLastName, player_first_name: firstPlayerFirstName } = commentary?.event?.shot_at_goal || {};\n  \n  const firstPlayerName = firstPlayerKnownName\n    ? firstPlayerKnownName\n    : firstPlayerLastName && firstPlayerFirstName\n      ? `${firstPlayerFirstName.charAt(0)}. ${firstPlayerLastName}`\n      : firstPlayerLastName\n        ? firstPlayerLastName\n        : firstPlayerFirstName\n          ? firstPlayerFirstName : \"\";\n\n  return (\n    <div className={`mls-o-match-summary__commentary mls-o-match-summary__commentary--${commentaryType}`}>\n      {\n        isMediumLargeMin\n          ? <div className={`mls-o-match-summary__${commentaryType} mls-o-match-summary__${commentaryType}--${isHome ? \"away\" : \"home\"}`} />\n          : null\n      }\n      <div className={`mls-o-match-summary__commentary-icon`}>\n        {icon}\n      </div>\n      <div className={`mls-o-match-summary__penalty-goal mls-o-match-summary__penalty-goal--${isHome ? \"home\" : \"away\"}`}>\n        <div className={`mls-o-match-summary__minute`}>\n          {\n            minutes ? <div className={`mls-o-match-summary__regular-time`}>{minutes}</div> : null\n          }\n          {\n            extraMinutes\n              ? <div className={`mls-o-match-summary__extra-time`}>{`+${extraMinutes}`}</div>\n              : null\n          }\n        </div>\n        <div className={`mls-o-match-summary__club-logo`}>\n          <Picture src={clubLogoSrc} title={\"club logo\"} />\n        </div>\n        <div className={`mls-o-match-summary__players`}>\n          <div className={`mls-o-match-summary__goal-scorer`}>\n            {`${firstPlayerName} (PK)`}\n          </div>\n        </div>\n        {\n          video != null\n            ? (\n              <div\n                onClick={() => toggleDialog(video)}\n                className={`mls-o-match-summary__watch`}>\n                <span className={`mls-o-match-summary__watch-link`}>\n                  <PlayCircleIcon />\n                </span>\n              </div>\n            ) : null\n        }\n      </div>\n    </div>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nSummaryPenaltyGoal = React.memo(SummaryPenaltyGoal);\n\nexport default SummaryPenaltyGoal;\n","export { default } from './SummaryPenaltyGoal';\n","export { default } from './PenaltyGoal';\n","import React from 'react';\nimport { useCommentaryData } from \"../../utils\";\n\nfunction Standard() {\n  const { commentaryType, commentary } = useCommentaryData();\n  const { minute_of_play, minute, second } = commentary || {};\n\n  return (\n    <div className={`mls-o-match-feed__commentary mls-o-match-feed__commentary--${commentaryType}`}>\n      <div className={`mls-o-match-feed__container ${minute_of_play != null ? \"\" : \"mls-o-match-feed__container--empty-minute\"}`}>\n        {!!(minute && second) && (\n          <div className={`mls-o-match-feed__minute`}>\n            <div className={`mls-o-match-summary__regular-time`}>{minute_of_play}</div>\n          </div>\n        )}\n        <div className={`mls-o-match-feed__comment`}>{commentary.commentary}</div>\n      </div>\n    </div>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nStandard = React.memo(Standard);\n\nexport default Standard;\n","import React from 'react';\nimport { componentTypes, useCommentaryData } from \"../../utils\";\nimport SummarySubstitution from './components/SummarySubstitution';\nimport FeedSubstitution from './components/FeedSubstitution';\n\nfunction Substitution() {\n  const { componentType = componentTypes.summary } = useCommentaryData();\n\n  return (\n    componentType === componentTypes.summary\n      ? <SummarySubstitution />\n      : <FeedSubstitution />\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nSubstitution = React.memo(Substitution);\n\nexport default Substitution;\n","import React from 'react';\nimport Picture from \"../../../../../shared/components/Picture\";\nimport { commentaryTypes, useCommentaryData } from \"../../../../utils\";\nimport TrendingArrowIcon from \"../../../../../shared/svg/TrendingArrowIcon\";\n\nfunction FeedSubstitution() {\n  const { commentary, clubLogoSrc, commentaryType, icon, shortName } = useCommentaryData();\n\n\n  const { first_player, second_player, minute_of_play, second, minute } = commentary;\n\n  const firstPlayerName = first_player?.known_name || first_player?.full_name;\n  const secondPlayerName = second_player?.known_name || second_player?.full_name;\n\n  return (\n    <div className={`mls-o-match-feed__commentary mls-o-match-feed__commentary--${commentaryType}`}>\n      <div className={`mls-o-match-feed__commentary-icon`}>\n        {icon}\n      </div>\n      <div className={`mls-o-match-feed__container`}>\n        <div className={`mls-o-match-feed__minute`}>\n          {minute === 45 && second === 0\n            ? \"HT\"\n            : <div className={`mls-o-match-feed__regular-time`}>{minute_of_play}</div>\n          }\n        </div>\n        <div className={`mls-o-match-feed__club-logo`}>\n          <Picture src={clubLogoSrc != null ? clubLogoSrc : \"/assets/images/Fallbacklogo-grey.png\"} title={shortName} />\n        </div>\n        <div className={`mls-o-match-feed__players`}>\n          {\n            commentaryType === commentaryTypes.substitution\n              ? (\n                <div className={`mls-o-match-feed__sub-in`}>\n                  <TrendingArrowIcon direction={\"up\"} fill={\"#5ece8d\"} size={\"x-small\"} />\n                  <div className={`mls-o-match-feed__player`}>{firstPlayerName}</div>\n                </div>\n              ) : null\n          }\n          <div className={`mls-o-match-feed__sub-out`}>\n            <TrendingArrowIcon direction={\"down\"} fill={\"#d84142\"} size={\"x-small\"} />\n            <div className={`mls-o-match-feed__player`}>{commentaryType === commentaryTypes.substitution ? secondPlayerName : firstPlayerName}</div>\n          </div>\n          {\n            commentaryType === commentaryTypes.playerRetired\n              ? <div className={\"mls-o-match-feed\"}>{commentary.commentary}</div>\n              : null\n          }\n        </div>\n      </div>\n    </div>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nFeedSubstitution = React.memo(FeedSubstitution);\n\nexport default FeedSubstitution;\n","export { default } from './FeedSubstitution';\n","import React from 'react';\nimport Picture from \"../../../../../shared/components/Picture\";\nimport { formatMatchMinutes, useCommentaryData, getPlayerSlugById } from \"../../../../utils\";\nimport TrendingArrowIcon from \"../../../../../shared/svg/TrendingArrowIcon\";\nimport { useReactAppState } from \"../../../../../shared/containers/utils\";\n\nfunction SummarySubstitution() {\n  const { mediaQueries, urlList, isLeague, clubSportecId } = useReactAppState();\n  const { isMediumLargeMin } = mediaQueries || {};\n  const { commentary, clubLogoSrc, isHome, icon, forgePlayers } = useCommentaryData();\n  const { baseUrl } = urlList || {};\n  const { minute_of_play, commentaryType } = commentary?.event || {};\n  const [minutes, extraMinutes] = formatMatchMinutes(minute_of_play);\n  const { player_in_alias: firstPlayerKnownName, player_in_last_name: firstPlayerLastName, player_in_first_name: firstPlayerFirstName } = commentary?.event || {};\n  const { player_out_alias: secondPlayerKnownName, player_out_last_name: secondPlayerLastName, player_out_first_name: secondPlayerFirstName } = commentary?.event || {};\n\n  const firstPlayerName = firstPlayerKnownName\n    ? firstPlayerKnownName\n    : firstPlayerLastName && firstPlayerFirstName\n      ? `${firstPlayerFirstName.charAt(0)}. ${firstPlayerLastName}`\n      : firstPlayerLastName\n        ? firstPlayerLastName\n        : firstPlayerFirstName\n          ? firstPlayerFirstName : \"\";\n\n  const secondPlayerName = secondPlayerKnownName\n    ? secondPlayerKnownName\n    : secondPlayerLastName && secondPlayerFirstName\n      ? `${secondPlayerFirstName.charAt(0)}. ${secondPlayerLastName}`\n      : secondPlayerLastName\n        ? secondPlayerLastName\n        : secondPlayerFirstName\n          ? secondPlayerFirstName : \"\";\n\n  const { player_in_id: firstClubId } = commentary?.event || {};\n  const isCurrentClub_first = firstClubId == clubSportecId;\n  let firstPlayerSlug;\n  if (isLeague || isCurrentClub_first) {\n    const { player_in_id: firstPlayerId } = commentary?.event || {};\n    firstPlayerSlug = getPlayerSlugById({ forgeMatchPlayers: forgePlayers, playerOptaId: firstPlayerId });\n  }\n\n  const { player_out_id: secondClubId } = commentary?.event || {};\n  const isCurrentClub_second = secondClubId == clubSportecId;\n  let secondPlayerSlug;\n  if (isLeague || isCurrentClub_second) {\n    const { player_out_id: secondPlayerId } = commentary?.event || {};\n    secondPlayerSlug = getPlayerSlugById({ forgeMatchPlayers: forgePlayers, playerOptaId: secondPlayerId });\n  }\n\n  return (\n    <div className={`mls-o-match-summary__commentary mls-o-match-summary__commentary--${commentaryType}`}>\n      {\n        isMediumLargeMin\n          ? <div className={`mls-o-match-summary__${commentaryType} mls-o-match-summary__${commentaryType}--${isHome ? \"away\" : \"home\"}`} />\n          : null\n      }\n      <div className={`mls-o-match-summary__commentary-icon`}>\n        {icon}\n      </div>\n      <div className={`mls-o-match-summary__substitution mls-o-match-summary__substitution--${isHome ? \"home\" : \"away\"}`}>\n        <div className={`mls-o-match-summary__minute`}>\n          {\n            minute_of_play === 45\n              ? \"HT\"\n              : (\n                <>\n                  {\n                    minutes ? <div className={`mls-o-match-summary__regular-time`}>{minutes}</div> : null\n                  }\n                  {\n                    extraMinutes\n                      ? <div className={`mls-o-match-summary__extra-time`}>{`+${extraMinutes}`}</div>\n                      : null\n                  }\n                </>\n              )\n          }\n        </div>\n        <div className={`mls-o-match-summary__club-logo`}>\n          <Picture src={clubLogoSrc} title={\"club logo\"} />\n        </div>\n        <div className={`mls-o-match-summary__players`}>\n          <div className={`mls-o-match-summary__sub-in`}>\n            <TrendingArrowIcon direction={\"up\"} fill={\"#5ece8d\"} size={\"x-small\"} />\n            <div className={`mls-o-match-summary__player`}>\n              {baseUrl && firstPlayerSlug ?\n                (<a alt={firstPlayerName} href={`${baseUrl}/players/${firstPlayerSlug}`}>{firstPlayerName}</a>)\n                : firstPlayerName}\n            </div>\n          </div>\n          <div className={`mls-o-match-summary__sub-out`}>\n            <TrendingArrowIcon direction={\"down\"} fill={\"#d84142\"} size={\"x-small\"} />\n            <div className={`mls-o-match-summary__player`}>\n              {baseUrl && secondPlayerSlug ?\n                (<a alt={secondPlayerName} href={`${baseUrl}/players/${secondPlayerSlug}`}>{secondPlayerName}</a>)\n                : secondPlayerName}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nSummarySubstitution = React.memo(SummarySubstitution);\n\nexport default SummarySubstitution;\n","export { default } from './SummarySubstitution';\n","export { default } from './Substitution';\n","import React, { useEffect, useRef } from 'react';\nimport { useCommentaryData } from \"../../utils\";\n\nfunction Timer() {\n  const { icon, commentaryType, commentary, title, setLastCommentary } = useCommentaryData();\n  const { isLastTimingCommentary } = commentary || {};\n\n  const iconRef = useRef();\n\n  useEffect(() => {\n    if (iconRef?.current != null && isLastTimingCommentary) {\n      setLastCommentary(iconRef.current);\n    }\n  }, [iconRef]);\n\n  return (\n    <div className={`mls-o-match-feed__commentary mls-o-match-feed__commentary--${commentaryType}`}>\n      <div ref={iconRef} className={`mls-o-match-feed__commentary-icon`}>\n        {icon}\n      </div>\n      <div className={`mls-o-match-feed__container`}>\n        <div className={`mls-o-match-feed__title`}>{title}</div>\n        <div className={`mls-o-match-feed__comment`}>{commentary.commentary}</div>\n      </div>\n    </div>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nTimer = React.memo(Timer);\n\nexport default Timer;\n","import React, { createContext, useContext } from \"react\";\nimport Goal from \"./components/Goal\";\nimport Substitution from \"./components/Substitution\";\nimport MatchScoreBox from \"./components/MatchScoreBox\";\nimport MiscGoal from \"./components/MiscGoal\";\nimport PenaltyGoal from \"./components/PenaltyGoal\";\nimport PenaltyCard from \"./components/PenaltyCard\";\n\nimport { svgSizes } from \"../shared/utils\";\nimport { periodTypes } from \"../mls-match-list/utils\";\nimport PenaltyCardIcon from \"../shared/svg/PenaltyCardIcon\";\nimport SubstitutionIcon from \"../shared/svg/SubstitutionIcon\";\nimport SecondYellowCardIcon from \"../shared/svg/SecondYellowCardIcon\";\nimport TimerIcon from \"../shared/svg/TimerIcon/TimerIcon\";\nimport Timer from \"./components/Timer/Timer\";\nimport Standard from \"./components/Standard/Standard\";\nimport Detailed from \"./components/Detailed/Detailed\";\nimport InjuryIcon from \"../shared/svg/InjuryIcon/InjuryIcon\";\nimport SaveIcon from \"../shared/svg/SaveIcon/SaveIcon\";\nimport MissIcon from \"../shared/svg/MissIcon/MissIcon\";\nimport Featured from \"./components/Featured/Featured\";\nimport PenaltyMissIcon from \"../shared/svg/PenaltyMissIcon/PenaltyMissIcon\";\nimport PenaltyIcon from \"../shared/svg/PenaltyIcon/PenaltyIcon\";\nimport OfficialIcon from \"../shared/svg/OfficialIcon\";\nimport CrossbarIcon from \"../shared/svg/CrossbarIcon/CrossbarIcon\";\nimport SummaryPenaltyGoal from \"./components/PenaltyGoal/components/SummaryPenaltyGoal\";\n\nexport const CommentaryContext = createContext();\nCommentaryContext.displayName = 'Commentary';\n\nexport function useCommentaryData() {\n  const context = useContext(CommentaryContext);\n  if (context === undefined) {\n    throw new Error('useCommentaryData must be used within a <Commentary />');\n  }\n  return context;\n}\n\nexport const componentTypes = {\n  feed: \"feed\",\n  summary: \"summary\"\n};\n\nexport const commentaryTypes = {\n  redCard: 'red-card',\n  yellowCard: 'yellow-card',\n  goal: 'goal',\n  substitution: 'substitution',\n  playerRetired: 'player-retired',\n  ownGoal: 'own-goal',\n  shootOut: 'shoot-out',\n  penaltyGoal: 'penalty-goal',\n  secondYellowCard: \"secondyellow-card\",\n  standard: \"standard\",\n  detailed: \"detailed\",\n  featured: \"featured\",\n  timing: \"timing\"\n};\n\nexport const matchEventTypes = {\n  redCard: 'red card',\n  yellowCard: 'yellow card',\n  secondYellowCard: \"secondyellow card\",\n  substitution: 'substitution',\n  ownGoal: 'own goal',\n  shootOut: 'shoot-out',\n  penaltyGoal: 'penalty goal',\n  endOfMatch: 'end 14',\n  endOfPks: 'end 5',\n  endOfXtraTimeSecondHalf: \"end 4\",\n  endOfXtraTimeFirstHalf: \"end 3\",\n  endOfPeriod2: \"end 2\",\n  endOfPeriod1: \"end 1\",\n  startOfPeriod: \"start\",\n  lineup: \"lineup\",\n  startDelay: \"start delay\",\n  endDelay: \"end delay\",\n  postponed: \"postponed\",\n  freeKickLost: \"free kick lost\",\n  freeKickWon: \"free kick won\",\n  attemptBlocked: \"attempt blocked\",\n  attemptSaved: \"attempt saved\",\n  miss: \"miss\",\n  post: \"post\",\n  corner: \"corner\",\n  penaltyWon: \"penalty won\",\n  penaltyLost: \"penalty lost\",\n  penaltyMiss: \"penalty miss\",\n  penaltySaved: \"penalty saved\",\n  playerRetired: \"player retired\",\n  contentiousRefereeDecisions: \"contentious referee decisions\",\n  varCancelledGoal: \"VAR cancelled goal\",\n  penalties: \"penalties\",\n  shot_at_goals: \"shot_at_goals\",\n  own_goals: \"own_goals\",\n  cards: \"cards\",\n  goals: \"goals\",\n  caution: \"Caution\",\n  cornerKick: \"CornerKick\",\n  finalWhistle: \"FinalWhistle\",\n  final_whistle: \"final_whistle\",\n  foul: \"Foul\",\n  goal: \"Goal\",\n  kickOff: \"KickOff\",\n  lineups: \"Lineups\",\n  matchEnd: \"MatchEnd\",\n  offside: \"Offside\",\n  otherRefereeAction: \"Other Referee Action\",\n  penalty: \"Penalty\",\n  penalties: \"penalties\",\n  shotAtGoal: \"ShotAtGoal\",\n  substitution: \"Substitution\",\n  substitutions: \"substitutions\"\n};\n\nexport const matchEventSubtypes = {\n  otherShot: \"OtherShot\",\n  blockedShot: \"BlockedShot\",\n  savedShot: \"SavedShot\",\n  shotWide: \"ShotWide\",\n  shotWoodWork: \"ShotWoodWork\",\n  yellowCard: \"Yellow\",\n  yellowRed: \"YellowRed\",\n  red: \"Red\",\n  ownGoal: \"OwnGoal\",\n  penalty: \"Penalty\",\n  goals: \"goals\"\n}\n\nexport const outcomeTypes = {\n  scored: \"Scored\"\n};\n\nexport function getCommentaryType({ type, sub_type, game_section, componentType = componentTypes.summary, t }) {\n  const standard = {\n    commentaryType: commentaryTypes.standard,\n    component: <Standard />,\n    icon: null,\n    title: null\n  };\n\n  const detailed = {\n    commentaryType: commentaryTypes.detailed,\n    component: <Detailed />,\n  };\n\n  const featured = {\n    commentaryType: commentaryTypes.featured,\n    component: <Featured />\n  };\n\n  const timing = {\n    commentaryType: commentaryTypes.timing,\n    component: <Timer />,\n    icon: <TimerIcon size={svgSizes.medium} />\n  };\n\n\n  switch (type) {\n    case matchEventTypes.cards:\n    case matchEventTypes.caution: {\n      let icon = null, commentaryType = null, title = null;\n      const component = <PenaltyCard />;\n\n      if (sub_type?.toLowerCase() === matchEventSubtypes.yellowCard.toLowerCase()) {\n        title = t(\"yellow_card\");\n        commentaryType = commentaryTypes.yellowCard;\n        icon = <PenaltyCardIcon fill=\"#F6CC08\" size={componentType === componentTypes.summary ? svgSizes.xSmall : svgSizes.medium} />\n      };\n\n      if (sub_type?.toLowerCase() === matchEventSubtypes.red.toLowerCase()) {\n        title = t(\"red_card\");\n        commentaryType = commentaryTypes.redCard\n        icon = <PenaltyCardIcon fill=\"#d0021b\" size={componentType === componentTypes.summary ? svgSizes.xSmall : svgSizes.medium} />\n      }\n\n      if (sub_type?.toLowerCase() === matchEventSubtypes.yellowRed.toLowerCase()) {\n        title = t(\"second_yellow\");\n        commentaryType = commentaryTypes.secondYellowCard;\n        icon = <PenaltyCardIcon fill=\"#F6CC08\" size={componentType === componentTypes.summary ? svgSizes.xSmall : svgSizes.medium} />;\n      }\n\n      return {\n        title,\n        commentaryType,\n        component,\n        icon\n      }\n    }\n\n    case matchEventTypes.own_goals:\n    case matchEventTypes.shot_at_goals:\n    case matchEventTypes.goal: {\n      let title = t(\"goal\");\n\n      if (sub_type === matchEventSubtypes.penalty) {\n        title = t(\"penalty_goal\");\n      }\n\n      return {\n        title,\n        commentaryType: commentaryTypes.goal,\n        component: <Goal />,\n        icon: <MatchScoreBox />\n      }\n    }\n    case matchEventTypes.substitution:\n    case matchEventTypes.substitutions: {\n      return {\n        title: t(\"substitution\"),\n        commentaryType: commentaryTypes.substitution,\n        component: <Substitution />,\n        icon: <SubstitutionIcon size={svgSizes.xSmall} />\n      };\n    }\n\n    case matchEventTypes.penalty: {\n      let icon = <PenaltyGoal />;\n      let title = t(\"penalty_goal\");\n\n      if (sub_type === matchEventSubtypes.savedShot) {\n        icon = <PenaltyMissIcon size={componentType === componentTypes.summary ? svgSizes.xSmall : svgSizes.medium} />;\n        title = t(\"penalty_saved\");\n      }\n\n      if (sub_type === matchEventSubtypes.shotWoodWork) {\n        icon = <CrossbarIcon />;\n        title = t(\"penalty_missed\");\n      }\n\n      if (sub_type === matchEventSubtypes.shotWide) {\n        icon = <PenaltyMissIcon />;\n        title = t(\"penalty_missed\");\n      }\n\n      return {\n        ...featured,\n        icon,\n        title\n      }\n    }\n\n    case matchEventTypes.penalties: {\n      if (sub_type === 'goals' && (game_section == 'firstHalf' || game_section == 'half' || game_section == 'secondHalf')) {\n        let title = t(\"penalty_goal\");\n        return {\n          title,\n          commentaryType: commentaryTypes.penaltyGoal,\n          component: <SummaryPenaltyGoal />,\n          icon: <MatchScoreBox isPenalty />\n        }\n      } else {\n        return {\n          component: null,\n          icon: null,\n          title: null,\n          commentaryType: null,\n        };\n      }\n    }\n\n    case matchEventTypes.shotAtGoal: {\n      let icon = null, title = null;\n\n      if (sub_type === matchEventSubtypes.savedShot || sub_type === matchEventSubtypes.blockedShot) {\n        icon = <SaveIcon />;\n        title = t(\"attempt_saved\");\n      }\n\n      if (sub_type === matchEventSubtypes.shotWide || sub_type === matchEventSubtypes.otherShot) {\n        icon = <MissIcon />;\n        title = t(\"attempt_missed\");\n      }\n\n      if (sub_type === matchEventSubtypes.shotWoodWork) {\n        icon = <CrossbarIcon />;\n        title = t(\"post\");\n      }\n\n      return {\n        ...detailed,\n        icon,\n        title\n      };\n    }\n\n    case matchEventTypes.offside:\n    case matchEventTypes.foul:\n    case matchEventTypes.cornerKick:\n    case matchEventTypes.lineups: {\n      return standard;\n    }\n\n    case matchEventTypes.kickOff: {\n      let title;\n      if (game_section === periodTypes.secondHalf || game_section === periodTypes.firstHalf) {\n        title = t(\"kick_off\");\n      }\n\n      if (game_section === periodTypes.firstHalfExtra || game_section === periodTypes.secondHalfExtra) {\n        title = t(\"extra_time_kickoff\");\n      }\n\n      return {\n        ...timing,\n        title,\n      };\n    }\n\n    case matchEventTypes.matchEnd: {\n      let title = t(\"end_of_second_half\");\n\n      if (game_section === matchEventSubtypes.penalty) {\n        title = t(\"end_of_shootout\");\n      }\n\n      if (game_section === periodTypes.firstHalfExtra) {\n        title = t(\"first_half_extra_time_end\");\n      }\n\n      if (game_section === periodTypes.secondHalfExtra) {\n        title = t(\"second_half_extra_time_end\");\n      }\n\n      return {\n        ...timing,\n        title,\n      };\n    }\n\n    case matchEventTypes.finalWhistle: {\n      if (game_section === periodTypes.firstHalf) {\n        return {\n          ...timing,\n          title: t(\"half_time\"),\n        }\n      }\n\n      return {\n        ...timing,\n        title: t(\"full_time\"),\n      };\n    }\n\n    default: {\n      return {\n        component: null,\n        icon: null,\n        title: null,\n        commentaryType: null,\n      };\n    }\n  }\n}\n\nexport function assignClubToCommentary({ home, away, team_id, type }) {\n  const homeSportecId = home?.team_id || home?.sportecId;\n\n  if (type === \"own_goals\") {\n    return team_id === homeSportecId ? { club: away, opposingClub: home, isHome: true } : { club: home, opposingClub: away, isHome: false };\n  }\n\n  return team_id === homeSportecId ? { club: home, opposingClub: away, isHome: true } : { club: away, opposingClub: home, isHome: false };\n}\n\nexport function formatSummary({ summary, home, away, videoList }) {\n  if (!summary || summary.length === 0) {\n    return null;\n  }\n\n  let homeScore = 0;\n  let awayScore = 0;\n\n  const formattedSummary = [];\n\n  for (let i = 0; i < summary.length; i++) {\n    const current = summary[i];\n    const club = current?.event?.team_name;\n\n    if (!club) {\n      continue;\n    }\n\n    const matchedVideo = videoList != null && videoList.length > 0\n      ? videoList.find(video => {\n        const { fields } = video || {};\n        const { sportecEventId } = fields || {};\n        return sportecEventId == current?.event?.event_id;\n      }) : null;\n\n    if (current.type === matchEventTypes.goal || current.type === matchEventTypes.penaltyGoal) {\n      if (current.game_section !== periodTypes.firstHalf && current.game_section !== periodTypes.secondHalf) {\n        continue;\n      }\n\n      if (current?.event?.team_id === home.sportecId) {\n        homeScore = homeScore + 1;\n      }\n      else {\n        awayScore = awayScore + 1;\n      }\n    }\n\n    if (current.type === \"own_goals\") {\n      if (current?.event?.team_id === home.sportecId) {\n        awayScore = awayScore + 1;\n      }\n      else {\n        homeScore = homeScore + 1;\n      }\n    }\n\n    formattedSummary.push({\n      ...current,\n      homeScore,\n      awayScore,\n      video: matchedVideo != null ? matchedVideo : null\n    });\n  }\n\n  return formattedSummary;\n}\n\nexport function formatMatchMinutes(minuteDisplay) {\n  if (minuteDisplay == null) {\n    return [null, null];\n  }\n  const splitMinutes = minuteDisplay.split(\"+\");\n  const minutes = splitMinutes?.[0] ? splitMinutes[0] + \"'\" : '';\n  const extraMinutes = splitMinutes?.[1] ? splitMinutes[1] + \"'\" : '';\n\n  return [minutes, extraMinutes];\n}\n\nexport function formatPenaltyKicks({ penaltyKicks, home, away }) {\n  if (!penaltyKicks || penaltyKicks.length === 0 || !home || !away) {\n    return { home: [], away: [] };\n  }\n\n  return penaltyKicks?.reduce((total, current) => {\n    const isHome = current?.event?.team_id === home.sportecId;\n\n    if (isHome) {\n      if (total.home && total.home.length > 0) {\n        total.home = [...total.home, current];\n      }\n      else {\n        total.home = [current];\n      }\n    }\n    else {\n      if (total.away && total.away.length > 0) {\n        total.away = [...total.away, current];\n      }\n      else {\n        total.away = [current];\n      }\n    }\n\n    return total;\n  }, {});\n}\n\nexport const getPlayerSlugById = ({ forgeMatchPlayers, playerSportecId }) => {\n  if (!forgeMatchPlayers || !playerSportecId) {\n    return null;\n  }\n  if ((!forgeMatchPlayers.awayPlayers || forgeMatchPlayers.awayPlayers.length === 0) &&\n    (!forgeMatchPlayers.homePlayers || forgeMatchPlayers.homePlayers.length === 0)) {\n    return null;\n  }\n\n  const awayPlayers = forgeMatchPlayers.awayPlayers;\n  const homePlayers = forgeMatchPlayers.homePlayers;\n\n  const playerSlug_away = awayPlayers?.find(matchPlayerAway =>\n    matchPlayerAway && matchPlayerAway.sportecId && matchPlayerAway.sportecId != \"\" && parseInt(matchPlayerAway.sportecId) === playerSportecId\n  );\n  if (playerSlug_away) {\n    return playerSlug_away.playerSlug;\n  }\n\n  const playerSlug_home = homePlayers?.find(matchPlayerHome =>\n    matchPlayerHome && matchPlayerHome.sportecId && matchPlayerHome.sportecId != \"\" && parseInt(matchPlayerHome.sportecId) === playerSportecId\n  );\n  if (playerSlug_home) {\n    return playerSlug_home.playerSlug;\n  }\n\n  return \"\";\n};\n\n\nexport function formatMatchMinute(minute) {\n  if (!minute) {\n    return \"\";\n  }\n\n  if (minute.includes(\"+\")) {\n    const [baseMinute, addedMinute] = minute.split(\"+\");\n    return `${baseMinute}'${addedMinute ? `+${addedMinute}'` : \"\"}`;\n  }\n\n  return `${minute}'`;\n}\n\n\nexport function handleTeamBackgroundColor({ backgroundColor, secondaryBackgroundColor }) {\n  return backgroundColor?.toLowerCase() === \"#ffffff\" ? secondaryBackgroundColor : backgroundColor;\n}","import React, { useState } from 'react';\n\nfunction CrossbarIcon(props) {\n  const { handleClick, extraClasses, size = \"small\", wrapperElement = \"div\" } = props || {};\n  const [WrapperComponent] = useState(wrapperElement);\n\n  return (\n    <WrapperComponent\n      role=\"img\"\n      onClick={handleClick}\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon--crossbar icon-svg fa-icon-svg fa-icon-svg--${size}`}>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\">\n          <path d=\"M22.66 15.42v5.96h.02l.98-.98v-5.98l-1 1zM22.4 10a1.48 1.48 0 101.48 1.48A1.48 1.48 0 0022.4 10m0 4a2.48 2.48 0 112.48-2.48A2.48 2.48 0 0122.4 14M6.22 10.02L5 11.23v10.15h.04l.96-.96v-9.4h12.23l1-1H6.22z\" />\n        </svg>\n      </span>\n    </WrapperComponent>\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nCrossbarIcon = React.memo(CrossbarIcon);\n\nexport default CrossbarIcon;\n","import React, { useState } from 'react';\n\nfunction FilledPlayIcon(props) {\n  const { handleClick, extraClasses, size = \"small\", wrapperElement = \"div\" } = props || {};\n  const [WrapperComponent] = useState(wrapperElement);\n\n  return (\n    <WrapperComponent\n      role=\"img\"\n      onClick={handleClick}\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon--no-circle-play icon-svg fa-icon-svg fa-icon-svg--${size}`}>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\">\n          <path xmlns=\"http://www.w3.org/2000/svg\" d=\"M8 5l14 10L8 25z\" />\n        </svg>\n      </span>\n    </WrapperComponent>\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nFilledPlayIcon = React.memo(FilledPlayIcon);\n\nexport default FilledPlayIcon;\n","import React, { useState } from 'react';\n\nfunction InjuryIcon(props) {\n  const { handleClick, extraClasses, size = \"small\", wrapperElement = \"div\" } = props || {};\n  const [WrapperComponent] = useState(wrapperElement);\n\n  return (\n    <WrapperComponent\n      role=\"img\"\n      onClick={handleClick}\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon--injury icon-svg fa-icon-svg fa-icon-svg--${size}`}>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\" >\n          <path\n            fill=\"#d0021b\"\n            d=\"M13.25 7v6.25H7v3.5h6.25V23h3.5v-6.25H23v-3.5h-6.25V7h-3.5z\"\n          />\n        </svg>\n      </span>\n    </WrapperComponent>\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nInjuryIcon = React.memo(InjuryIcon);\n\nexport default InjuryIcon;\n","import React, { useState } from 'react';\n\nfunction MissIcon(props) {\n  const { handleClick, extraClasses, size = \"small\", wrapperElement = \"div\" } = props || {};\n  const [WrapperComponent] = useState(wrapperElement);\n\n  return (\n    <WrapperComponent\n      role=\"img\"\n      onClick={handleClick}\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon--miss icon-svg fa-icon-svg fa-icon-svg--${size}`}>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\" >\n          <path d=\"M18.77 11.56l.7.7-7.58 7.58-.7-.7z\" />\n          <path d=\"M7.22 9L6 10.21v10.16h.04l.96-.96V10h16.66v10.37h.02l.98-.98V9H7.22z\" />\n        </svg>\n      </span>\n    </WrapperComponent>\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nMissIcon = React.memo(MissIcon);\n\nexport default MissIcon;\n","import React from 'react';\n\nconst OfficialIcon = (props) => {\n  const { handleClick, extraClasses, size = \"small\" } = props || {};\n  return (\n    <button\n      role=\"img\"\n      onClick={handleClick}\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon--official icon-svg fa-icon-svg fa-icon-svg--${size}`}>\n        <svg viewBox=\"0 0 22 20\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g fill=\"none\" fillRule=\"evenodd\">\n            <path d=\"M-4-5h30v30H-4z\" />\n            <path\n              d=\"M20.7 8.5h-8V10h-2.5V8.5H8.3h0a5 5 0 105 4l7.4-1.2V8.5z\"\n              stroke=\"#000\"\n            />\n            <path d=\"M3.5 12a1.4 1.4 0 11-2.7 0 1.4 1.4 0 012.7 0z\" stroke=\"#000\" />\n            <path\n              fill=\"#FFF\"\n              d=\"M12.8 11.7l-1-1 1.6-1.5 1 .9zm8.5-1.1v1.2l-.8 1-.7-.7z\"\n            />\n            <path\n              stroke=\"#000\"\n              strokeWidth={1.1}\n              d=\"M11.4 5.8V0m-2 5.8l-1.8-4m5.9 4l1.8-4\"\n            />\n          </g>\n        </svg>\n      </span>\n    </button>\n  );\n};\n\nexport default OfficialIcon;\n","export { default } from './OfficialIcon';\n","export { default } from './PenaltyCardIcon';\n","import React, { useState } from 'react';\n\nfunction PenaltyIcon(props) {\n  const { handleClick, extraClasses, size = \"small\", wrapperElement = \"div\" } = props || {};\n  const [WrapperComponent] = useState(wrapperElement);\n\n  return (\n    <WrapperComponent\n      role=\"img\"\n      onClick={handleClick}\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon--penalty icon-svg fa-icon-svg fa-icon-svg--${size}`}>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\">\n          <path d=\"M14.56 12.17l-.79.26a3.1 3.1 0 00-1.94 3.88 3 3 0 001.54 1.8 3.08 3.08 0 004.16-1.35 3.08 3.08 0 00.18-2.36 3.24 3.24 0 00-.27-.6l-.26-.45 4.87-2.53-.32-1-4.53 1.49.31.93-2.65.86zm.21 7.28a4.08 4.08 0 01-1.86-.45 4 4 0 01-2-2.38 4.1 4.1 0 012.57-5.14l1.75-.57.3.94.75-.25-.3-.93 6.42-2.1.9 2.75-4.73 2.44a2.19 2.19 0 01.12.33A4.09 4.09 0 0116 19.25a4.31 4.31 0 01-1.23.2zM14.37 8H5.25L4 9.25v11.78l1-1V9h8.37l1-1zM25.36 19.99V12.3l-1 1V21l1-1.01z\" />\n          <path d=\"M10.09 15.24a.49.49 0 11-.49.49.49.49 0 01.49-.49m0-1a1.49 1.49 0 101.49 1.49 1.49 1.49 0 00-1.49-1.49z\" />\n        </svg>\n      </span>\n    </WrapperComponent>\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nPenaltyIcon = React.memo(PenaltyIcon);\n\nexport default PenaltyIcon;\n","import React, { useState } from 'react';\n\nfunction PenaltyMissIcon(props) {\n  const { handleClick, extraClasses, size = \"small\", wrapperElement = \"div\" } = props || {};\n  const [WrapperComponent] = useState(wrapperElement);\n\n  return (\n    <WrapperComponent\n      role=\"img\"\n      onClick={handleClick}\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon--penalty-miss icon-svg fa-icon-svg fa-icon-svg--${size}`}>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\">\n          <path d=\"M14.76 10.27v5.9H9.61l-1.12 1h7.27v-6.9h-1z\" />\n          <path d=\"M21 9.68l1.3-1.3-.7-.71-1.4 1.4a9.09 9.09 0 00-4.58-1.52V5H17l1-1h-4.26l-1 1h1.91v2.55A9.09 9.09 0 0010 9.11L8.56 7.67l-.71.71 1.36 1.35A9.15 9.15 0 1021 9.68zm-5.85 15.14a8.15 8.15 0 118.15-8.15 8.16 8.16 0 01-8.15 8.15z\" />\n        </svg>\n      </span>\n    </WrapperComponent>\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nPenaltyMissIcon = React.memo(PenaltyMissIcon);\n\nexport default PenaltyMissIcon;\n","import React, { useState } from \"react\";\n\nconst PlayCircleIcon = (props) => {\n  const { handleClick, extraClasses, size = \"small\", wrapperElement = \"div\", color = \"#000\" } = props || {};\n  const [WrapperComponent] = useState(wrapperElement);\n\n  return (\n    <WrapperComponent\n      role=\"img\"\n      onClick={handleClick}\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon--play-circle icon-svg fa-icon-svg fa-icon-svg--${size}`}>\n        <svg viewBox=\"0 0 15 15\">\n          <g fill=\"none\" fillRule=\"evenodd\">\n            <circle cx={7.5} cy={7.5} r={7} stroke={color} />\n            <path fill={color} d=\"M6.272 4.646l3.86 2.769-3.86 2.768z\" />\n          </g>\n        </svg>\n      </span>\n    </WrapperComponent>\n  );\n};\n\nexport default PlayCircleIcon;\n","export { default } from './PlayCircleIcon';\n","import React, { useState } from 'react';\n\nfunction SaveIcon(props) {\n  const { handleClick, extraClasses, size = \"small\", wrapperElement = \"div\" } = props || {};\n  const [WrapperComponent] = useState(wrapperElement);\n\n  return (\n    <WrapperComponent\n      role=\"img\"\n      onClick={handleClick}\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon--save icon-svg fa-icon-svg fa-icon-svg--${size}`}>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\">\n          <path d=\"M19.89 7.47a1.77 1.77 0 00-.73.16v-.28a1.74 1.74 0 00-1.73-1.73 1.71 1.71 0 00-.95.28 1.73 1.73 0 00-3 0 1.71 1.71 0 00-.95-.28 1.74 1.74 0 00-1.73 1.73v7.46L8.3 14A1.65 1.65 0 007 14a1.7 1.7 0 00-.88 1c-.29.83.07 1.61 1.09 2.33l.92.65c.52.37 1 .73 1.55 1.11l1.86 1.36.53 4h7.86l1.15-1.15.55-7.3V9.2a1.73 1.73 0 00-1.74-1.73zm-8 12.06l-1.68-1.24-1.52-1.12-.92-.64C7 16 7 15.59 7 15.34a.68.68 0 01.37-.41.73.73 0 01.56 0l2.66.93 1.13-1.12V7.35a.74.74 0 011.47 0v4.83l1-1V6.73a.73.73 0 011.46 0v5.45l1-1V7.35a.74.74 0 011.47 0v6zM20 23.47h-7.12l-.41-3.09L19 13.87a.51.51 0 00.15-.35V9.2a.74.74 0 011.47 0V16z\" />\n        </svg>\n      </span>\n    </WrapperComponent>\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nSaveIcon = React.memo(SaveIcon);\n\nexport default SaveIcon;\n","import React, { useState } from 'react';\n\nfunction TimerIcon(props) {\n  const { handleClick, extraClasses, size = \"small\", wrapperElement = \"div\" } = props || {};\n  const [WrapperComponent] = useState(wrapperElement);\n\n  return (\n    <WrapperComponent\n      role=\"img\"\n      onClick={handleClick}\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon--timer icon-svg fa-icon-svg fa-icon-svg--${size}`}>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\">\n          <path d=\"M14.76 10.27v5.9H9.61l-1.12 1h7.27v-6.9h-1z\" />\n          <path d=\"M21 9.68l1.3-1.3-.7-.71-1.4 1.4a9.09 9.09 0 00-4.58-1.52V5H17l1-1h-4.26l-1 1h1.91v2.55A9.09 9.09 0 0010 9.11L8.56 7.67l-.71.71 1.36 1.35A9.15 9.15 0 1021 9.68zm-5.85 15.14a8.15 8.15 0 118.15-8.15 8.16 8.16 0 01-8.15 8.15z\" />\n        </svg>\n      </span>\n    </WrapperComponent>\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nTimerIcon = React.memo(TimerIcon);\n\nexport default TimerIcon;\n","import React, { useState } from 'react';\n\nfunction TrendingArrowIcon(props) {\n  const { handleClick, extraClasses, size = \"small\", direction = \"up\", wrapperElement = \"div\", fill } = props || {};\n  const [WrapperComponent] = useState(wrapperElement);\n\n  return (\n    <WrapperComponent\n      role=\"img\"\n      onClick={handleClick}\n      className={`mls-o-svg transform ${extraClasses ? extraClasses : \"\"}`}>\n      <span className={`oc-o-icon--trending-arrow-${direction} icon-svg fa-icon-svg fa-icon-svg--${size}`}>\n        <svg viewBox=\"0 0 10 5\" fill={fill} xmlns=\"http://www.w3.org/2000/svg\" fillRule={`${direction === \"up\" ? \"nonzero\" : \"evenodd\"}`}>\n          <path d={`${direction === \"up\" ? \"M0 5l5-5 5 5z\" : \"M0 0l5 5 5-5z\"}`} />\n        </svg>\n      </span>\n    </WrapperComponent>\n  );\n}\n\n// eslint-disable-next-line no-const-assign,no-func-assign\nTrendingArrowIcon = React.memo(TrendingArrowIcon);\n\nexport default TrendingArrowIcon;\n","export { default } from './TrendingArrowIcon';\n"],"names":[],"sourceRoot":""}