{"version":3,"sources":["webpack://switch-website/./src/components/common/Typography.js"],"names":["commonTextStyles","css","fonts","GeneralLink","activeClassName","children","partiallyActive","to","forceActive","gaLabel","otherProps","internal","test","download","classNames","push","className","join","length","href","onClick","sendGoogleAnalyticsEvent","target","defaultProps","undefined","other","heroBaseStyle","fontWeights","h1BaseStyle","h2BaseStyle","h3BaseStyle","h4BaseStyle","h4MonoBaseStyle","h5BaseStyle","h6BaseStyle","h6MonoBaseStyle","p2BaseStyle","Hero","breakpoints","H1","H2","H3","H3Mono","H4","H4Mono","H5","H5Mono","H6","H6Mono","P","PMono","P2","P2Mono","StyledLink","colors","Link","LinkColored","props","color","hovercolor","LinkDark","CTALink","CTALinkDark","UL","StyledHighlighted","Highlighted","dark","Quote","StyledBlockQuote","BlockQuote","StyledFigcaption","align","Figcaption"],"mappings":"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","file":"64486b23-9662bbfa3890527a1050.js","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {Link as GatsbyLink} from 'gatsby-plugin-react-i18next';\nimport {OutboundLink} from 'gatsby-plugin-google-gtag';\n\nimport styled from '@emotion/styled';\nimport {css} from '@emotion/react';\n\nimport {breakpoints, colors, fonts, fontWeights} from '../../styles/theme';\nimport sendGoogleAnalyticsEvent from '../../helpers/utils/google-analytics';\n\n\n/*\n * Common\n */\nconst commonTextStyles = css`\n    font-family: ${fonts.sansSerif};\n`;\n\n\n/*\n * Private Elements\n */\n/**\n * Generic Link component for both internal and external links\n *\n * @param {string} activeClassName - the class to use on active links\n * @param {boolean} partiallyActive - whether to set partial matches as active links\n * @param {string} to - the link to redirect to\n * @param {boolean} forceActive - whether to force the link to be displayed as active\n * @param {string} gaLabel - download link label to send to Google Analytics\n * @param {any} other - other props to apply to the link element\n * @param {node} children - content of the link\n */\nconst GeneralLink = ({activeClassName, children, partiallyActive, to, forceActive, gaLabel, ...other}) => {\n    const otherProps = other || {};\n\n    // Any internal link (intended for Gatsby) will start with exactly one slash, anything else is external\n    const internal = /^\\/(?!\\/)/.test(to);\n\n    // Download links should render using <a> element\n    let download = false;\n    if (otherProps.download) {\n        download = true;\n    }\n\n    const classNames = [];\n    if (forceActive && activeClassName) {\n        classNames.push(activeClassName);\n    }\n\n    // Use Gatsby Link for internal links, and <a> for others\n    if (internal && !download) {\n        return (\n            <GatsbyLink\n                to={to}\n                activeClassName={activeClassName}\n                partiallyActive={partiallyActive}\n                className={classNames.join(' ')}\n                {...otherProps}\n            >\n                {children}\n            </GatsbyLink>\n        );\n    }\n\n    // If there are custom class names to use, add them to the existing ones\n    if (classNames.length) {\n        if (!otherProps.className) {\n            otherProps.className = '';\n        }\n        otherProps.className += ` ${classNames.join(' ')}`;\n    }\n\n    // Return the element whether as an HTML or span, depending on whether it has an actual link, or we just want it to\n    // resemble a link.\n    if (to || otherProps.href) {\n        // Render <a> element for download links\n        if (download) {\n            const downloadOnClick = () => {\n                // Call other onClick if present\n                if (otherProps.onClick) {\n                    otherProps.onClick();\n                }\n\n                // Send custom event to Google Analytics if we have gaLabel\n                if (gaLabel) {\n                    /* eslint-disable-next-line i18next/no-literal-string */\n                    sendGoogleAnalyticsEvent('contents', 'download', gaLabel);\n                }\n            };\n\n            return <a href={to} onClick={downloadOnClick} {...otherProps}>{children}</a>;\n        }\n        // External links open in new tab and use Google Analytics outbound link element\n        return <OutboundLink href={to} {...otherProps} target=\"_blank\">{children}</OutboundLink>;\n    }\n\n    return <span {...otherProps}>{children}</span>;\n};\n\nGeneralLink.propTypes = {\n    activeClassName: PropTypes.string,\n    partiallyActive: PropTypes.bool,\n    to: PropTypes.string,\n    forceActive: PropTypes.bool,\n    gaLabel: PropTypes.string,\n    other: PropTypes.any,\n    children: PropTypes.node,\n};\n\nGeneralLink.defaultProps = {\n    activeClassName: undefined,\n    partiallyActive: undefined,\n    to: undefined,\n    forceActive: undefined,\n    gaLabel: undefined,\n    other: undefined,\n    children: null,\n};\n\n\n/*\n * Public Elements\n */\n\n// Base typography styles\nconst heroBaseStyle = css`\n  ${commonTextStyles};\n\n  font-size: 52px;\n  line-height: 60px;\n  font-weight: ${fontWeights.bold};\n`;\n\nconst h1BaseStyle = css`\n    ${commonTextStyles};\n\n    font-size: 40px;\n    line-height: 54px;\n    font-weight: ${fontWeights.semiBold};\n`;\n\nconst h2BaseStyle = css`\n    ${commonTextStyles};\n\n    font-size: 32px;\n    line-height: 44px;\n    font-weight: ${fontWeights.bold};\n`;\n\nconst h3BaseStyle = css`\n    ${commonTextStyles};\n\n    font-size: 26px;\n    line-height: 38px;\n`;\n\nconst h4BaseStyle = css`\n    ${commonTextStyles};\n\n    font-size: 24px;\n    line-height: 32px;\n    font-weight: ${fontWeights.semiBold};\n`;\n\nconst h4MonoBaseStyle = css`\n    ${commonTextStyles};\n\n    font-size: 24px;\n    line-height: 30px;\n    font-family: ${fonts.monospace};\n`;\n\nconst h5BaseStyle = css`\n    ${commonTextStyles};\n\n    font-size: 20px;\n    line-height: 30px;\n    font-weight: ${fontWeights.semiBold};\n`;\n\nconst h6BaseStyle = css`\n    ${commonTextStyles};\n\n    font-size: 18px;\n    line-height: 26px;\n    font-weight: ${fontWeights.semiBold};\n`;\n\nconst h6MonoBaseStyle = css`\n    ${commonTextStyles};\n\n    font-size: 18px;\n    line-height: 24px;\n    font-family: ${fonts.monospace};\n`;\n\nconst p2BaseStyle = css`\n    ${commonTextStyles};\n\n    font-size: 14px;\n    line-height: 22px;\n`;\n\n// Typography\nconst Hero = styled.h1`\n    ${heroBaseStyle};\n\n    @media not all and (min-width: ${breakpoints.lg}) {\n        ${h2BaseStyle};\n    }\n`;\n\nconst H1 = styled.h1`\n    ${h1BaseStyle};\n\n    @media not all and (min-width: ${breakpoints.lg}) {\n        ${h4BaseStyle};\n        font-weight: ${fontWeights.bold};\n    }\n`;\n\nconst H2 = styled.h2`\n    ${h2BaseStyle};\n\n    @media not all and (min-width: ${breakpoints.md}) {\n        ${h4BaseStyle};\n    }\n`;\n\nconst H2Mono = styled.h2`\n    ${commonTextStyles};\n\n    font-size: 32px;\n    line-height: 42px;\n    font-family: ${fonts.monospace};\n`;\n\nconst H3 = styled.h3`\n    ${h3BaseStyle};\n`;\n\nconst H3Mono = styled.h3`\n    ${commonTextStyles};\n\n    font-size: 26px;\n    line-height: 36px;\n    font-family: ${fonts.monospace};\n`;\n\nconst H4 = styled.h4`\n    ${h4BaseStyle};\n\n    @media not all and (min-width: ${breakpoints.md}) {\n        ${h6BaseStyle};\n    }\n`;\n\nconst H4Mono = styled.h4`\n    ${h4MonoBaseStyle};\n\n    @media not all and (min-width: ${breakpoints.md}) {\n        ${h6MonoBaseStyle};\n    }\n`;\n\nconst H5 = styled.h5`\n    ${h5BaseStyle};\n\n    @media not all and (min-width: ${breakpoints.lg}) {\n        ${h6BaseStyle};\n    }\n`;\n\nconst H5Mono = styled.h5`\n    ${commonTextStyles};\n\n    font-size: 20px;\n    line-height: 28px;\n    font-family: ${fonts.monospace};\n`;\n\nconst H6 = styled.h6`\n    ${h6BaseStyle};\n`;\n\nconst H6Mono = styled.h6`\n    ${h6MonoBaseStyle};\n`;\n\nconst P = styled.p`\n    ${commonTextStyles};\n\n    font-size: 16px;\n    line-height: 24px;\n    margin-bottom: 0.65rem;\n`;\n\nconst PMono = styled(P)`\n    ${commonTextStyles};\n\n    font-size: 16px;\n    line-height: 22px;\n    font-family: ${fonts.monospace};\n`;\n\nconst P2 = styled(P)`\n    ${p2BaseStyle};\n`;\n\nconst P2Mono = styled(P)`\n    ${commonTextStyles};\n\n    font-size: 14px;\n    line-height: 20px;\n    font-family: ${fonts.monospace};\n`;\n\nconst StyledLink = styled(GeneralLink)`\n    cursor: pointer;\n    margin: 0;\n    padding: 0;\n    text-decoration: none;\n    background-color: ${colors.transparent};\n`;\n\nconst Link = styled(StyledLink)`\n    color: ${colors.black};\n`;\n\nconst LinkColored = styled(StyledLink)`\n    color: ${props => props.color};\n    \n    &:visited {\n        color: ${props => props.color};\n    }\n    \n    // \":hover\" must come AFTER \":visited\" so that it supersedes the color in the \":visited\" selector\n    &:hover {\n        color: ${props => props.hovercolor};\n        text-decoration: none;\n    }\n`;\n\nconst LinkDark = styled(StyledLink)`\n    color: ${colors.white};\n\n    &:visited {\n      color: ${colors.white};\n    }\n\n    // \":hover\" must come AFTER \":visited\" so that it supersedes the color in the \":visited\" selector\n    &:hover {\n      color: ${colors.purple};\n      text-decoration: none;\n    }\n`;\n\nconst CTALink = styled(StyledLink)`\n    ${commonTextStyles};\n\n    font-size: 12px;\n    line-height: 16px;\n    letter-spacing: 3px;\n    text-transform: uppercase;\n    color: ${colors.darkPurple};\n    font-weight: ${fontWeights.semiBold};\n    cursor: pointer;\n\n    &:visited {\n      color: ${colors.darkPurple};\n    }\n\n    // \":hover\" must come AFTER \":visited\" so that it supersedes the color in the \":visited\" selector\n    &:hover {\n      color: ${colors.darkPurple};\n      text-decoration: none;\n    }\n`;\n\nconst CTALinkDark = styled(CTALink)`\n    color: ${colors.white};\n\n    &:visited {\n      color: ${colors.white};\n    }\n\n    // \":hover\" must come AFTER \":visited\" so that it supersedes the color in the \":visited\" selector\n    &:hover {\n      color: ${colors.white};\n    }\n`;\n\nconst UL = styled.ul`\n    ${commonTextStyles};\n\n    li {\n        margin-bottom: 0.8em;\n    }\n\n    li::marker {\n        font-size: 0.6em;\n    }\n`;\n\nconst StyledHighlighted = styled.span`\n    background: linear-gradient(to bottom, ${colors.transparent} 50%, #D9DAFF 50%);\n    display: inline;\n\n    &.dark {\n        background: linear-gradient(to bottom, ${colors.transparent} 50%, ${colors.darkPurple} 50%);\n    }\n`;\n\nconst Highlighted = ({dark = false, children}) => (\n    <StyledHighlighted className={dark ? 'dark' : ''}>{children}</StyledHighlighted>\n);\n\nHighlighted.propTypes = {\n    dark: PropTypes.bool,\n    children: PropTypes.node.isRequired,\n};\n\nHighlighted.defaultProps = {\n    dark: false,\n};\n\nconst Quote = styled(Hero)`\n    &:before {\n        content: open-quote;\n        display: inline-block;\n        vertical-align: top;\n        color: ${colors.darkPurple};\n        font-family: ${fonts.monospace};\n        position: relative;\n        top: -10px;\n    }\n`;\n\nconst StyledBlockQuote = styled.div`\n    display: flex;\n    flex-direction: row;\n\n    blockquote {\n        margin: 0;\n    }\n`;\n\nconst BlockQuote = ({children}) => (\n    <StyledBlockQuote className=\"blockquote\">\n        <Quote />\n        <blockquote>{children}</blockquote>\n    </StyledBlockQuote>\n);\n\nBlockQuote.propTypes = {\n    children: PropTypes.node.isRequired,\n};\n\nconst StyledFigcaption = styled.figcaption`\n  margin-top: 20px;\n  font-size: 16px;\n  line-height: 20px;\n  color: ${colors.mediumGrey};\n  font-family: ${fonts.monospaceRegular};\n  text-align: ${props => props.align};\n`;\n\nconst Figcaption = ({align, children}) => (\n    <StyledFigcaption align={align}>{children}</StyledFigcaption>\n);\n\nFigcaption.propTypes = {\n    children: PropTypes.node.isRequired,\n    align: PropTypes.string,\n};\n\nFigcaption.defaultProps = {\n    // eslint-disable-next-line i18next/no-literal-string\n    align: 'left',\n};\n\n\n/*\n * Exports\n */\nexport {\n    heroBaseStyle,\n    h1BaseStyle,\n    h2BaseStyle,\n    h3BaseStyle,\n    h4BaseStyle,\n    h4MonoBaseStyle,\n    h5BaseStyle,\n    h6BaseStyle,\n    h6MonoBaseStyle,\n    p2BaseStyle,\n    Hero,\n    H1,\n    H2,\n    H2Mono,\n    H3,\n    H3Mono,\n    H4,\n    H4Mono,\n    H5,\n    H5Mono,\n    H6,\n    H6Mono,\n    CTALink,\n    CTALinkDark,\n    Link,\n    LinkColored,\n    LinkDark,\n    P,\n    PMono,\n    P2,\n    P2Mono,\n    UL,\n    Highlighted,\n    Quote,\n    BlockQuote,\n    Figcaption,\n};\n"],"sourceRoot":""}