{"version":3,"file":"js/scripts_react_shared_components_ClubV2_index_js-scripts_react_shared_components_ExplainerBar_-905f7f.js?_t=25cb4262bca8ca12f8b1","mappings":"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;;;;;;;AChBA;AACA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AAEA;AACA;AAAA;AAGA;AAEA;AAKA;AAEA;;;;;;;;;;;;;;;;;;AC9BA;AAGA;AAEA;AAEA;AAAA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAEA;AAgBA;AAEA;;;;;;;;;;;;;;;;;ACjCA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAGA;AAAA;AAGA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;;;;;ACnBA;AACA;AACA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAGA;AACA;AAEA;AACA;AAAA;AAGA;AAAA;AAGA;AACA;AAAA;AAEA;AAAA;AAEA;AAAA;AACA;AACA;AAEA;AAAA;AACA;AACA;AAEA;AAAA;AACA;AACA;AAEA;AAAA;AACA;AACA;AAEA;AAAA;AAEA;AACA;AAGA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AACA;AAEA;AAEA;AAAA;AACA;AAGA;AACA;AAAA;AAAA;AAEA;AAAA;AAGA;AAGA;AAEA;;;;;;;;;;;;;;;;;;AClFA;AACA;AAEA;AAAA;AACA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AACA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAIA;;;;;;;;;;;;;;;;;;;;;AC3BA;AACA;AAEA;AACA;AAAA;AAEA;AAAA;AACA;AAEA;AAEA;AACA;AAAA;AAEA;AACA;AAGA;AAGA;AAGA;AAAA;AACA;AAEA;AACA;AAAA;AAEA;AACA;AACA;AAAA;AACA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AAAA;AACA;AAEA;AACA;AAAA;AAEA;AACA;AAAA;AACA;AAGA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AAGA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AACA;AAEA;AAEA;AAAA;AACA;AAEA;AACA;AAAA;AAEA;AACA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AAGA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAEA;;;;;;;;;;;;;;;AChKA;AAAA;AAEA;;;;;;;;;;;;;;;;;;;;;ACFA;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;AAEA;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;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;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAAA;AACA;AAEA;AAEA;AAAA;AACA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAAA;AACA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA","sources":["webpack://@mlssoccer/netcore/./scripts/react/shared/components/ClubV2/ClubV2.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/ClubV2/StyledClub.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/ClubV2/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/ExplainerBar/ExplainerBar.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/ExplainerBar/StyledExplainerBar.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Link/Link.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Scorebug/Scorebug.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Scorebug/StyledScorebug.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Scorebug/phases/Goal/Goal.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Scorebug/phases/Goal/StyledGoal.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Scorebug/phases/ScorebugLive.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Scorebug/phases/ScorebugPost.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Scorebug/phases/ScorebugPre.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/Scorebug/phases/StatusLabel.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/StatusStamp/StatusLiveStamp/StatusLiveStamp.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/StatusStamp/StatusLiveStamp/StyledStatusLiveStamp.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/StatusStamp/StatusStamp.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/StatusStamp/StyledStatusStamp.js","webpack://@mlssoccer/netcore/./scripts/react/shared/match/utils.js","webpack://@mlssoccer/netcore/./scripts/react/shared/styled/StyledMixins.js","webpack://@mlssoccer/netcore/./scripts/react/shared/styled/Theme.js"],"sourcesContent":["import React from \"react\";\nimport Picture from \"../Picture\";\nimport { formatImageUrl } from \"../../utils\";\nimport { StyledClub, StyledClubName } from \"./StyledClub\";\n\nconst ClubV2 = ({\n clubData,\n isHome,\n hasAbbreviation = false,\n hasFullName = false,\n hasShortName = false,\n className = \"\",\n rank = null,\n}) => {\n const { abbreviation, fullName, shortName, logoColorUrl } = clubData || {};\n\n if (!abbreviation) {\n return null;\n }\n\n const { highQuality } = logoColorUrl\n ? formatImageUrl(logoColorUrl, {\n format: \"w_128,h_128,c_pad\",\n extension: \"f_png\",\n })\n : { highQuality: \"/assets/images/Fallbacklogo-grey.png\" };\n\n return (\n \n \n \n {hasAbbreviation && (\n \n {isHome && rank && (\n ({rank})\n )}\n {abbreviation}\n {!isHome && rank && (\n ({rank})\n )}\n \n )}\n {hasFullName && (\n {fullName}\n )}\n {hasShortName && (\n \n {isHome && rank && (\n ({rank})\n )}\n {shortName}\n {!isHome && rank && (\n ({rank})\n )}\n \n )}\n \n \n );\n};\n\nexport default ClubV2;\n","import styled from \"styled-components\";\nimport { themeTypes } from \"../../styled/Theme\";\n\nexport const StyledClub = styled.div`\n font-family: MLSTifo;\n display: flex;\n align-items: center;\n font-weight: bold;\n font-size: ${(props) => props.theme.mixins.pxToRem(\"16\")};\n line-height: 18px;\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 &.mls-c-club {\n &.--home {\n flex-direction: row-reverse;\n margin-right: 8px;\n }\n\n &.--away {\n margin-left: 8px;\n }\n\n &.--home .mls-c-club__abbreviation,\n &.--home .mls-c-club__fullname,\n &.--home .mls-c-club__shortname {\n margin-right: 6px;\n }\n\n &.--away .mls-c-club__abbreviation,\n &.--away .mls-c-club__fullname,\n &.--away .mls-c-club__shortname {\n margin-left: 6px;\n }\n\n .mls-c-club__rank {\n font-size: 11px;\n vertical-align: top;\n font-weight: 400;\n }\n\n &.--home .mls-c-club__rank {\n margin-right: 4px;\n }\n\n &.--away .mls-c-club__rank {\n margin-left: 4px;\n }\n }\n`;\n\nexport const StyledClubName = styled.div`\n display: flex;\n`;\n","export { default } from './ClubV2';\n","import React from \"react\";\nimport {\n StyledExplainerBar,\n} from \"./StyledExplainerBar\";\n\nconst ExplainerBar = ({ text = \"\", fontStyle = \"italic\" }) => {\n if (!text) {\n return null;\n }\n\n return (\n \n {text}\n \n );\n};\n\nexport default ExplainerBar;\n","import styled from \"styled-components\";\nimport { themeTypes } from \"../../styled/Theme\";\n\nexport const StyledExplainerBar = styled.div`\n font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_standard};\n font-size: ${(props) =>\n props.theme.mixins.pxToRem(props.theme.figma.base.scale_1_375)};\n line-height: ${(props) => props.theme.figma.base.scale_1_75}px;\n color: ${(props) =>\n props.theme.type == themeTypes.light\n ? props.theme.figma.base.color_black_100\n : props.theme.figma.base.color_white_100};\n opacity: ${(props) => (props.theme.type == themeTypes.light ? 0.45 : 0.6)};\n font-style: ${(props) => props.fontStyle ? props.fontStyle : \"italic\"};\n font-weight: 500;\n`;\n","import React from \"react\";\n\nexport const Link = ({\n url = null,\n target = null,\n alt = null,\n rel = null,\n children,\n onClick = () => null,\n ariaLabel = \"\",\n title = null,\n}) => {\n return (\n \n {children}\n \n );\n};\n","import React from \"react\";\nimport { statusTypes, useMatchData } from \"../../../mls-match-list/utils\";\nimport { ScorebugLive } from \"./phases/ScorebugLive\";\nimport { ScorebugPost } from \"./phases/ScorebugPost\";\nimport { ScorebugPre } from \"./phases/ScorebugPre\";\nimport { StyledScorebug } from \"./StyledScorebug\";\nimport StatusLabel from \"./phases/StatusLabel\";\n\nexport const ScorebugPositionTypes = {\n horizontal: \"horizontal\",\n vertical: \"vertical\",\n};\n\nconst Scorebug = ({\n homeScore = 0,\n awayScore = 0,\n position = ScorebugPositionTypes.horizontal,\n abbreviateStatus = false,\n}) => {\n const { status } = useMatchData();\n\n const ScorebugPhaseComponent = () => {\n if (!status?.abbreviation) return null;\n\n if (status?.abbreviation === statusTypes.post) {\n return ;\n }\n\n if (status?.abbreviation === statusTypes.pre) {\n return ;\n }\n\n if (\n status?.abbreviation === statusTypes.abandoned ||\n status?.abbreviation === statusTypes.cancelled ||\n status?.abbreviation === statusTypes.postponed ||\n status?.abbreviation === statusTypes.delayed\n ) {\n return (\n \n );\n }\n\n if (status?.abbreviation === statusTypes.live) {\n return ;\n }\n };\n\n return (\n \n {ScorebugPhaseComponent()}\n \n );\n};\n\nexport default Scorebug;\n","import styled from \"styled-components\";\nimport { themeTypes } from \"../../styled/Theme\";\n\nexport const StyledScorebug = styled.div`\n font-family: MLSTifo;\n width: 60px;\n display: flex;\n justify-content: center;\n\n &.mls-c-scorebug--vertical {\n width: 30px;\n\n .mls-c-scorebug__separator {\n visibility: hidden;\n }\n\n .mls-c-scorebug__post,\n .mls-c-scorebug__live {\n width: 30px;\n height: 62px;\n flex-direction: column;\n }\n\n .goal-anim {\n flex-direction: column;\n font-size: ${(props) => props.theme.mixins.pxToRem(12)};\n font-weight: ${(props) => props.theme.figma.base.fontweight_bold};\n }\n .mls-c-scorebug__wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n }\n\n .mls-c-scorebug__separator {\n width: 1px;\n height: 18px;\n border-right: 1px solid\n ${(props) =>\n props.theme.type == themeTypes.light\n ? props.theme.figma.base.color_offblack_25\n : props.theme.figma.base.color_white_25};\n }\n\n .mls-c-scorebug__score {\n padding: 0 10px;\n font-family: ${(props) =>\n props.theme.figma.base.fontfamily_mlstifo_standard};\n font-weight: ${(props) => props.theme.figma.base.fontweight_bold};\n line-height: ${(props) => props.theme.figma.base.scale_1_75}px;\n font-size: ${(props) =>\n props.theme.mixins.pxToRem(props.theme.figma.base.scale_2)};\n width: 50%;\n text-align: center;\n }\n`;\n\nexport const StyledScorebugPost = styled.div`\n width: ${(props) => props.theme.figma.base.scale_7_50}px;\n height: 28px;\n border-radius: ${(props) => props.theme.figma.base.scale_0_50}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 background-color: ${(props) =>\n props.theme.type == themeTypes.light\n ? props.theme.figma.base.color_offblack_10\n : props.theme.figma.base.color_white_10};\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const StyledScorebugLive = styled.div`\n width: ${(props) => props.theme.figma.base.scale_7_50}px;\n height: 28px;\n border-radius: ${(props) => props.theme.figma.base.scale_0_50}px;\n color: ${(props) => props.theme.figma.base.color_white_100};\n background-color: ${(props) => props.theme.figma.base.color_offblack_100};\n display: flex;\n justify-content: center;\n align-items: center;\n\n .mls-c-scorebug__separator {\n border-right: 1px solid ${(props) => props.theme.figma.base.color_white_25};\n }\n`;\n\nexport const StyledScorebugPre = styled.div`\n text-transform: lowercase;\n color: ${(props) =>\n props.theme.type == themeTypes.light\n ? props.theme.figma.base.color_black_65\n : props.theme.figma.base.color_white_100};\n font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_standard};\n font-size: ${(props) =>\n props.theme.mixins.pxToRem(props.theme.figma.base.scale_1_375)};\n font-weight: ${(props) => props.theme.figma.base.fontweight_bold};\n line-height: ${(props) => props.theme.figma.base.scale_2}px;\n letter-spacing: ${(props) => props.theme.figma.common.letterspacing_expanded};\n`;\n\nexport const StyledStatusLabel = styled.div`\n color: ${(props) =>\n props.theme.type == themeTypes.light\n ? props.theme.figma.base.color_black_65\n : props.theme.figma.base.color_white_100};\n font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_standard};\n font-size: ${(props) =>\n props.theme.mixins.pxToRem(props.theme.figma.base.scale_1_375)};\n font-weight: ${(props) => props.theme.figma.base.fontweight_bold};\n line-height: ${(props) => props.theme.figma.base.scale_2}px;\n letter-spacing: ${(props) => props.theme.figma.common.letterspacing_expanded};\n`;\n\nexport const StyledScoreBug = styled.div``;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { StyledGoal, StyledGoalLetter, StyledGoalWrapper } from \"./StyledGoal\";\nimport { StyledScoreBug } from \"../../StyledScorebug\";\n\nconst ANIMATION_DURATION_IN_MS = 21000;\n\nfunction Goal({ homeDisplay, awayDisplay, hasDefaultScores }) {\n const [isGoal, setIsGoal] = useState(false);\n const firstRender = useRef(true);\n const goalAnimationTimeout = useRef(null);\n\n useEffect(() => {\n if (hasDefaultScores) return;\n\n if (firstRender.current) {\n firstRender.current = false;\n } else if (!goalAnimationTimeout.current) {\n setIsGoal(true);\n goalAnimationTimeout.current = setTimeout(() => {\n setIsGoal(false);\n goalAnimationTimeout.current = null;\n }, ANIMATION_DURATION_IN_MS);\n }\n }, [homeDisplay, awayDisplay, hasDefaultScores]);\n\n\n return (\n \n \n {homeDisplay}\n \n {awayDisplay}\n \n \n G\n O\n A\n L\n \n \n );\n}\n\nexport default React.memo(Goal);\n","import styled, { keyframes } from \"styled-components\";\n\nconst goalBg = keyframes`\n 2.5% { background: #db3131; }\n 85% { background: #db3131; }\n`;\n\nconst goalLetter = keyframes`\n 0% { opacity: 0; }\n 5% { opacity: 1; }\n 95% { opacity: 1; display: none; }\n `;\n\nconst goalFade = keyframes`\n 5% { \n opacity: 0;\n display: none;\n color: #db3131;\n }\n 85% { \n opacity: 0;\n display: none;\n color: #db3131;\n }\n 100% { \n opacity: 1;\n display: block;\n color: inherit;\n }\n`;\n\nexport const StyledGoal = styled.div`\n height: 100%;\n width: 100%;\n width: inherit;\n border-radius: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n\n &.--is-goal {\n animation: ${goalBg} 20s ease-in-out;\n\n .mls-c-scorebug__wrapper {\n opacity: 0;\n position: absolute;\n animation: ${goalFade} 8s ease;\n animation-fill-mode: forwards;\n }\n\n .goal-anim {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n z-index: 1;\n\n span:nth-child(1) {\n animation: ${goalLetter} 7s 0.1s ease-in-out;\n }\n span:nth-child(2) {\n animation: ${goalLetter} 7s 0.2s ease-in-out;\n }\n span:nth-child(3) {\n animation: ${goalLetter} 7s 0.3s ease-in-out;\n }\n span:nth-child(4) {\n animation: ${goalLetter} 7s 0.4s ease-in-out;\n }\n }\n }\n`;\n\nexport const StyledGoalWrapper = styled.div`\n display: none;\n\n span {\n opacity: 0;\n }\n`;\n\nexport const StyledGoalLetter = styled.span``;\n","import { useMatchData } from \"../../../../mls-match-list/utils\";\nimport React from \"react\";\nimport { StyledScoreBug, StyledScorebugLive } from \"../StyledScorebug\";\nimport Goal from \"./Goal/Goal\";\n\nexport const ScorebugLive = ({\n homeScore,\n awayScore,\n homeShootoutScore,\n awayShootoutScore,\n}) => {\n const { isRecentGoal, count, homeClubData, awayClubData } = useMatchData();\n\n const stages = {\n goal: \"goal\",\n goalScore: \"goal-score\",\n live: \"live\",\n };\n\n const stage = isRecentGoal\n ? count <= 5\n ? stages.goal\n : stages.goalScore\n : stages.live;\n\n const hasShootout = !!homeShootoutScore || !!awayShootoutScore;\n const homeDisplay = hasShootout\n ? `${homeScore}(${homeShootoutScore})`\n : `${homeScore}`;\n\n const awayDisplay = hasShootout\n ? `${awayScore}(${awayShootoutScore})`\n : `${awayScore}`;\n\n const hasDefaultScores =\n homeClubData.homeScore === undefined ||\n awayClubData.awayScore === undefined;\n\n return (\n \n \n \n );\n};\n","import React from \"react\";\nimport { StyledScorebugPost } from \"../StyledScorebug\";\n\nexport const ScorebugPost = ({\n homeScore,\n awayScore,\n homeShootoutScore,\n awayShootoutScore,\n}) => {\n const hasShootout = !!homeShootoutScore || !!awayShootoutScore;\n const homeDisplay = hasShootout\n ? `${homeScore}(${homeShootoutScore})`\n : `${homeScore}`;\n\n const awayDisplay = hasShootout\n ? `${awayScore}(${awayShootoutScore})`\n : `${awayScore}`;\n\n return (\n \n {homeDisplay}\n \n {awayDisplay}\n \n );\n};\n","import React from \"react\";\nimport { useMatchData } from \"../../../../mls-match-list/utils\";\nimport { StyledScorebugPre } from \"../StyledScorebug\";\n\nexport const ScorebugPre = () => {\n const { matchDateTime, isTimeTbd } = useMatchData();\n const { time } = matchDateTime || {};\n return (\n \n {isTimeTbd ? (\n TBD\n ) : time != null ? (\n {time.replace(\" \", \"\")}\n ) : null}\n \n );\n};\n","import React from \"react\";\nimport { StyledStatusLabel } from \"../StyledScorebug\";\nimport { useReactAppState } from \"../../../containers/utils\";\nimport { statusTypes } from \"../../../../mls-match-list/utils\";\n\nconst STATUS_TYPES = {\n [statusTypes.abandoned]: \"match_abandoned\",\n [statusTypes.cancelled]: \"match_cancelled\",\n [statusTypes.delayed]: \"match_delayed\",\n [statusTypes.postponed]: \"match_postponed\",\n};\n\nfunction StatusLabel({ status, abbreviateStatus }) {\n const { t } = useReactAppState();\n\n let key = STATUS_TYPES[status];\n\n if (abbreviateStatus) {\n key = `${key}.abbr`;\n }\n\n const label = t(key);\n\n return (\n \n {abbreviateStatus ? label.toUpperCase() : label}\n \n );\n}\n\nexport default StatusLabel;\n","import React from \"react\";\nimport {\n StyledStatusLiveStamp,\n StyledStatusExtraStamp,\n} from \"./StyledStatusLiveStamp\";\nimport { useReactAppState } from \"../../../containers/utils\";\n\nconst StatusLiveStamp = ({\n minuteDisplay = null,\n extraMinutes = null,\n hasPenaltyKicks,\n}) => {\n const { t } = useReactAppState();\n if (!minuteDisplay) minuteDisplay = t(\"live\");\n\n return (\n \n {hasPenaltyKicks ? (\n \"PKS\"\n ) : (\n <>\n {minuteDisplay}\n {!!extraMinutes && (\n \n +{extraMinutes}\n \n )}\n \n )}\n \n );\n};\n\nexport default StatusLiveStamp;\n","import styled from \"styled-components\";\n\nexport const StyledStatusLiveStamp = styled.span`\n padding: 2px 8px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: ${(props) => props.theme.figma.base.color_freshred_100};\n color: ${(props) => props.theme.figma.base.color_white_100};\n font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_micro};\n font-size: ${(props) => props.theme.mixins.pxToRem(10)};\n font-weight: ${(props) => props.theme.figma.base.fontweight_bold};\n border-radius: ${(props) =>\n props.theme.mixins.pxToRem(props.theme.figma.base.scale_2_50)};\n text-transform: uppercase;\n .mls-c-status-stamp__status--delay {\n background-color: ${(props) => props.theme.figma.base.color_white_10};\n }\n`;\nexport const StyledStatusExtraStamp = styled.span`\n opacity: 0.75;\n margin-left: 2px;\n`;\n","import React from \"react\";\nimport { statusTypes, useMatchData } from \"../../../mls-match-list/utils\";\nimport { useReactAppState } from \"../../containers/utils\";\nimport StatusLiveStamp from \"./StatusLiveStamp/StatusLiveStamp\";\nimport { StyledStatusStamp, StyledStatusStampDot } from \"./StyledStatusStamp\";\n\nconst StatusStamp = ({\n abbreviation = null,\n time = null,\n minuteDisplay = null,\n extraMinutes = null,\n showLiveDot = false,\n abbreviateStatus = false,\n abbreviatePostMatch = false,\n}) => {\n const { penaltyKicks } = useMatchData();\n const { t } = useReactAppState();\n\n if (!abbreviation) {\n return null;\n }\n\n const transformAbbreviationLabel = (key) => {\n const label = t(key);\n\n if (abbreviateStatus) {\n return label.toUpperCase();\n }\n\n return label;\n };\n\n const label = () => {\n switch (abbreviation) {\n case statusTypes.post:\n return abbreviatePostMatch ? t(\"match_final.abbr\") : t(\"match_final\");\n case statusTypes.postponed:\n return transformAbbreviationLabel(\n abbreviateStatus ? \"match_postponed.abbr\" : \"match_postponed\"\n );\n case statusTypes.abandoned:\n return transformAbbreviationLabel(\n abbreviateStatus ? \"match_abandoned.abbr\" : \"match_abandoned\"\n );\n case statusTypes.cancelled:\n return transformAbbreviationLabel(\n abbreviateStatus ? \"match_cancelled.abbr\" : \"match_cancelled\"\n );\n case statusTypes.delayed:\n return transformAbbreviationLabel(\n abbreviateStatus ? \"match_delayed.abbr\" : \"match_delayed\"\n );\n case statusTypes.pre:\n return time;\n case statusTypes.live: {\n const hasPenaltyKicks = penaltyKicks?.home && penaltyKicks?.away;\n return showLiveDot ? (\n \n ) : (\n \n );\n }\n default:\n return null;\n }\n };\n\n return (\n \n {label()}\n \n );\n};\n\nexport default StatusStamp;\n","import styled from \"styled-components\";\nimport { themeTypes } from \"../../styled/Theme\";\n\nexport const StyledStatusStamp = styled.div`\n font-family: ${(props) => props.theme.figma.base.fontfamily_mlstifo_headline};\n color: ${(props) =>\n props.theme.type === themeTypes.light\n ? props.theme.rgba.black_65\n : props.theme.figma.base.color_white_100};\n\n &.-dly,\n &.-post,\n &.-aban,\n &.-ppd,\n &.-delay,\n &.-canc {\n font-size: ${(props) => props.theme.mixins.pxToRem(10)};\n font-weight: ${(props) => props.theme.figma.base.fontweight_bold};\n border-radius: ${(props) => props.theme.mixins.pxToRem(20)};\n letter-spacing: 0.7px;\n }\n`;\n\nexport const StyledStatusStampDot = styled.div`\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: ${(props) => props.theme.figma.base.color_freshred_100};\n`;\n","import dayjs from \"dayjs\";\nimport { composeMatchStatus, statusTypes } from \"../../mls-match-list/utils\";\n\nexport function getLiveMatches(matches) {\n if (!matches?.length) return null;\n\n return matches.filter(\n (match) => match?.status?.abbreviation === statusTypes.live\n );\n}\n\nexport function groupMatchesByMatchDate(matches, excludedLiveMatches = false) {\n if (!matches?.length) return null;\n\n return matches\n .filter((match) =>\n excludedLiveMatches\n ? match?.status?.abbreviation !== statusTypes.live\n : match\n )\n .reduce((acc, value) => {\n const matchDay = value?.matchDate\n ? dayjs(value?.matchDate).toDate()\n : null;\n const accumulatedMatches = acc?.find(\n (x) => x?.date?.toLocaleDateString() == matchDay?.toLocaleDateString()\n );\n if (matchDay && !accumulatedMatches) {\n return [...acc, { date: matchDay, matches: [value] }];\n } else {\n return acc.map((obj) => {\n if (accumulatedMatches?.date === obj.date) {\n return {\n date: accumulatedMatches.date,\n matches: [...accumulatedMatches.matches, value],\n };\n } else {\n return obj;\n }\n });\n }\n }, []);\n}\n\nexport function mergeMlsMatchesAPIResults({\n sportAPIMatches,\n statsAPIMatches,\n}) {\n if (!sportAPIMatches) return null;\n\n return sportAPIMatches?.map((sportAPIMatch) => {\n const statsAPIMatch = statsAPIMatches?.find(\n (statsMatch) => statsMatch?.game_id == sportAPIMatch?.optaId\n );\n\n if (statsAPIMatch) {\n const { home, away, venue } = sportAPIMatch || {};\n\n const {\n home_club_match,\n away_club_match,\n home_club,\n away_club,\n venue: fallbackVenue,\n } = statsAPIMatch;\n\n const { name: fallbackVenueName, city: fallbackCity, venueOptaId } =\n fallbackVenue || {};\n const { name, city } = venue || {};\n\n return {\n ...statsAPIMatch,\n ...sportAPIMatch,\n venue: {\n name: name ? name : fallbackVenueName,\n city: city ? city : fallbackCity,\n optaId: venueOptaId,\n },\n home: {\n ...home,\n optaId: home?.optaId ? home.optaId : home_club?.opta_id,\n shortName: home?.shortName ? home.shortName : home_club?.name,\n abbreviation: home?.abbreviation\n ? home.abbreviation\n : home_club?.abbreviation,\n yearFounded: home_club?.year_founded,\n },\n away: {\n ...away,\n optaId: away?.optaId ? away.optaId : away_club?.opta_id,\n shortName: away?.shortName ? away.shortName : away_club?.name,\n abbreviation: away?.abbreviation\n ? away.abbreviation\n : away_club?.abbreviation,\n yearFounded: away_club?.year_founded,\n },\n homeClubMatch: home_club_match,\n awayClubMatch: away_club_match,\n status: composeMatchStatus({ period: statsAPIMatch?.period, delayedMatch: statsAPIMatch?.delayedMatch }),\n };\n } else {\n return sportAPIMatch;\n }\n });\n}\n\nexport function mergeMlsMatchAPIResults({\n sportAPIMatch,\n statsAPIMatch,\n}) {\n if (!sportAPIMatch && !statsAPIMatch) return null;\n\n if (statsAPIMatch) {\n const { home, away, venue } = sportAPIMatch || {};\n\n const {\n home_club_match,\n away_club_match,\n home_club,\n away_club,\n venue: fallbackVenue,\n } = statsAPIMatch;\n\n const { name: fallbackVenueName, city: fallbackCity, venueOptaId } =\n fallbackVenue || {};\n const { name, city } = venue || {};\n\n return {\n ...statsAPIMatch,\n ...sportAPIMatch,\n venue: {\n name: name ? name : fallbackVenueName,\n city: city ? city : fallbackCity,\n optaId: venueOptaId,\n },\n home: {\n ...home,\n optaId: home?.optaId ? home.optaId : home_club?.opta_id,\n shortName: home?.shortName ? home.shortName : home_club?.name,\n abbreviation: home?.abbreviation\n ? home.abbreviation\n : home_club?.abbreviation,\n yearFounded: home_club?.year_founded,\n },\n away: {\n ...away,\n optaId: away?.optaId ? away.optaId : away_club?.opta_id,\n shortName: away?.shortName ? away.shortName : away_club?.name,\n abbreviation: away?.abbreviation\n ? away.abbreviation\n : away_club?.abbreviation,\n yearFounded: away_club?.year_founded,\n },\n homeClubMatch: home_club_match,\n awayClubMatch: away_club_match,\n status: composeMatchStatus({ period: statsAPIMatch?.period, delayedMatch: sportAPIMatch?.delayedMatch }),\n };\n } else {\n return sportAPIMatch;\n }\n}\n","export const mixins = {\n pxToRem: (px) => `${px / 16}rem;`\n };","import { mixins } from \"./StyledMixins\";\n\nexport const query = {\n xxs: {\n minWidth: 0,\n maxWidth: 319,\n },\n xs: {\n minWidth: 320,\n maxWidth: 374,\n },\n sm: {\n minWidth: 375,\n maxWidth: 767,\n },\n md: {\n minWidth: 768,\n maxWidth: 1079,\n },\n lg: {\n minWidth: 1080,\n maxWidth: 1439,\n },\n xl: {\n minWidth: 1440,\n maxWidth: 1647,\n },\n xxl: {\n minWidth: 1648,\n maxWidth: 1799,\n },\n xxxl: {\n minWidth: 1800,\n },\n};\n\nexport const isMobile = [\"xxs\", \"xs\", \"sm\"];\n\nconst figmaBase = {\n base: {\n color_freshred_100: \"rgba(219,49,49,1)\",\n color_black_25: \"rgba(0,0,0,0.25)\",\n color_black_50: \"rgba(0,0,0,0.5)\",\n color_black_60: \"rgba(0,0,0,0.60)\",\n color_black_65: \"rgba(0,0,0,0.65)\",\n color_black_100: \"rgba(0,0,0,1)\",\n color_offblack_10: \"rgba(31,32,33,0.1)\",\n color_offblack_25: \"rgba(31,32,33,0.25)\",\n color_offblack_50: \"rgba(31,32,33,0.5)\",\n color_offblack_100: \"rgba(31,32,33,1)\",\n color_offwhite_50: \"rgba(221,221,221,0.5)\",\n color_offwhite_20: \"rgba(221,221,221,0.2)\",\n color_offwhite_100: \"rgba(221,221,221,1)\",\n color_white_10: \"rgba(255,255,255,0.1)\",\n color_white_25: \"rgba(255,255,255,0.25)\",\n color_white_50: \"rgba(255,255,255,0.5)\",\n color_white_75: \"rgba(255,255,255,0.75)\",\n color_white_80: \"rgba(255,255,255,0.80)\",\n color_white_100: \"rgba(255,255,255,1)\",\n scale_0: 0,\n scale_px: 1,\n scale_0_25: 2,\n scale_0_50: 4,\n scale_0_75: 6,\n scale_1: 8,\n scale_1_25: 10,\n scale_1_375: 11,\n scale_1_50: 12,\n scale_1_75: 14,\n scale_2: 16,\n scale_2_25: 18,\n scale_2_50: 20,\n scale_2_75: 22,\n scale_3: 24,\n scale_3_25: 26,\n scale_3_50: 28,\n scale_3_75: 30,\n scale_4: 32,\n scale_4_50: 36,\n scale_5: 40,\n scale_6: 48,\n scale_7: 56,\n scale_7_50: 60,\n scale_8: 64,\n scale_9: 72,\n scale_10: 80,\n scale_11: 88,\n scale_12: 96,\n scale_13: 104,\n scale_14: 112,\n scale_15: 120,\n scale_16: 128,\n scale_17: 136,\n scale_18: 144,\n scale_19: 152,\n scale_20: 160,\n scale_21: 168,\n scale_22: 176,\n scale_23: 184,\n scale_24: 192,\n scale_25: 200,\n scale_26: 208,\n scale_27: 216,\n scale_28: 224,\n scale_29: 232,\n scale_30: 240,\n scale_40: 320,\n scale_50: 400,\n scale_60: 480,\n scale_70: 560,\n scale_80: 640,\n scale_90: 720,\n scale_100: 800,\n scale_200: 1600,\n fontfamily_mlstifo_standard: \"MLSTifo\",\n fontfamily_mlstifo_headline: \"MLSTifoHeadline\",\n fontfamily_mlstifo_micro: \"MLSTifoMicro\",\n fontweight_bold: \"bold\",\n },\n};\n\nconst figmaCommon = {\n common: {\n color_time_light: figmaBase.color_black_65,\n color_time_dark: figmaBase.color_white_100,\n letterspacing_expanded: \"2%\",\n letterspacing_tight: \"-2%\",\n },\n};\n\nconst figmaComponent = {\n component: {\n color_scorebug_bg_live: figmaBase.base.color_offblack_100,\n color_scorebug_divider_live: figmaBase.base.color_white_50,\n color_scorebug_bg_post_light: figmaBase.base.color_offblack_10,\n color_scorebug_divider_post_light: figmaBase.base.color_offblack_25,\n color_scorebug_bg_post_dark: figmaBase.base.color_white_10,\n color_scorebug_divider_post_dark: figmaBase.base.color_white_25,\n color_scorebug_score_dark: figmaBase.base.color_white_100,\n color_scorebug_score_light: figmaBase.base.color_off_black100,\n radius_scorebug_bg: figmaBase.base.scale_0_50,\n width_scorebug: figmaBase.base.scale_7_50,\n typography_scorebug_score: {\n fontFamily: figmaBase.base.fontfamily_mlstifo_standard,\n fontWeight: figmaBase.base.fontweight_bold,\n lineHeight: figmaBase.base.scale_1_75,\n fontSize: figmaBase.base.scale_2,\n },\n },\n};\n\nconst figmaGlobal = {\n ...figmaBase,\n ...figmaCommon,\n};\n\nexport const themeTypes = {\n light: \"light\",\n dark: \"dark\",\n};\n\nexport const rgba = {\n white_100: \"rgba(255, 255, 255, 1)\",\n white_100_60: \"rgba(255, 255, 255, 0.6)\",\n white_111: \"rgba(111, 111, 111, 1)\",\n white_120: \"rgba(120, 120, 120, 1)\",\n white_240: \"rgba(240, 240, 240, 1)\",\n white_178: \"rgba(178, 178, 178, 1)\",\n white_238: \"rgba(238, 238, 238, 1)\",\n black_33_25: \"rgba(33, 33, 33, .25)\",\n black_33: \"rgba(33, 33, 33, 1)\",\n black_65: \"rgba(65, 65, 65, 1)\",\n black_45: \"rgba(45, 45, 45, 1)\",\n black_100: \"rgba(0, 0, 0, 1)\",\n black_33_1: \"rgba(33, 33, 33, 0.1)\",\n black_100_60: \"rgba(0, 0, 0, 0.6)\",\n black_100_40: \"rgba(0, 0, 0, 0.4)\",\n black_100_50: \"rgba(0, 0, 0, 0.5)\",\n violet_34_17_34: \"rgba(34, 17, 34, 1)\",\n};\n\nexport const backgroundTypes = {\n white: \"white\",\n black: \"black\",\n};\n\nexport const Theme = {\n type: themeTypes.light,\n rgba,\n figma: {\n ...figmaGlobal,\n ...figmaComponent,\n },\n mixins: { ...mixins },\n query,\n};\n"],"names":[],"sourceRoot":""}