{"version":3,"sources":["webpack://switch-website/./src/components/common/Header.js"],"names":["activeNavClassName","activeSubNavClassName","opaqueBackground","css","colors","darkLogo","contrastTheme","StyledNavbar","fonts","fontWeights","maxWidth","navbarDropdownAnimationTime","breakpoints","ClickableCircle","SignIn","className","href","target","style","padding","P2","Trans","StyledToggle","HamburgerToggle","opened","setNavbarDropdownVisibility","t","useTranslation","type","onClick","id","HeaderLink","to","children","activeClassName","StyledHeaderDropdownLink","Link","DropdownOpenMenuIndicator","HeaderDropdownLink","name","partialPath","setOpened","useState","currentPath","setCurrentPath","mdBreakpoint","parseInt","dropDownElementsClass","dropDownCaretClass","useEffect","window","location","pathname","newState","changeDesktopDropdownState","innerWidth","onMouseEnter","onMouseLeave","role","forceActive","startsWith","Header","contrast","dataExpanded","setDataExpanded","mobileMenuOpened","setMobileMenuOpened","openedHeaderDropdownLink","setOpenedHeaderDropdownLink","navbarDropdownClasses","push","visible","setTimeout","setOpenedHeaderDropdownLinkById","join","src","OverviewLogo","alt","as","colored","partiallyActive","ProcessingLogo","DynamicRoutingLogo","VaultLogo","ReconciliationLogo","RiskLogo","AnalyticsLogo","TerminalLogo","MerchantsLogo","ISVsLogo","PSPsLogo","AcquirersLogo","CompanyLogo","CareersLogo","NewsroomLogo","ContactUsLogo","defaultProps"],"mappings":"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","file":"da0e6453-d71a35309a5d7e5547f0.js","sourcesContent":["/** @jsx jsx */\n/* eslint-disable jsx-a11y/anchor-is-valid */\n/* eslint-disable react/jsx-no-target-blank */\n\nimport {useEffect, useState} from 'react';\nimport PropTypes from 'prop-types';\n\nimport styled from '@emotion/styled';\nimport {css, jsx} from '@emotion/react';\nimport {Trans, useTranslation} from 'gatsby-plugin-react-i18next';\n\nimport ArrowDown from '../../images/clickables/arrow_down.svg';\nimport SwitchLogo from '../../images/switch-logo.svg';\n\nimport {CTA} from './Clickables';\nimport ClientOnly from './ClientOnly';\nimport {P2, Link} from './Typography';\nimport {breakpoints, colors, fonts, fontWeights, maxWidth} from '../../styles/theme';\n\n// About\nimport CareersLogo from '../../images/header/about/careers.png';\nimport CompanyLogo from '../../images/header/about/company.png';\nimport ContactUsLogo from '../../images/header/about/contact-us.png';\nimport NewsroomLogo from '../../images/header/about/newsroom.png';\n\n// Developers\n// TODO: when we have the API status page, we can use the developer's submenu\n// import APIStatusLogo from '../../images/header/developers/api-status.png';\n// import DocumentationLogo from '../../images/header/developers/documentation.png';\n\n// Product\nimport AnalyticsLogo from '../../images/header/product/analytics.png';\nimport DynamicRoutingLogo from '../../images/header/product/dynamic-routing.png';\nimport OverviewLogo from '../../images/header/product/overview.png';\nimport ProcessingLogo from '../../images/header/product/processing.png';\nimport ReconciliationLogo from '../../images/header/product/reconciliation.png';\nimport RiskLogo from '../../images/header/product/risk.png';\nimport TerminalLogo from '../../images/header/product/terminal.png';\nimport VaultLogo from '../../images/header/product/vault.png';\n\n// Use Cases\nimport AcquirersLogo from '../../images/header/use-cases/acquirers.png';\nimport ISVsLogo from '../../images/header/use-cases/isvs.png';\nimport MerchantsLogo from '../../images/header/use-cases/merchants.png';\nimport PSPsLogo from '../../images/header/use-cases/psps.png';\n\n\n/*\n * Constants\n */\n/* eslint-disable-next-line i18next/no-literal-string */\nconst activeNavClassName = 'active-nav-link';\n/* eslint-disable-next-line i18next/no-literal-string */\nconst activeSubNavClassName = 'active-sub-nav-link';\nconst navbarDropdownAnimationTime = 500;  // milliseconds\n\n\n// Fix for bug of overlapping media queries between md and lg (happens on iPad/tablet screen size).\n// This value is breakpoints.md minus 0,02px.\n// More info on why here: https://stackoverflow.com/q/51566916/7564579\nconst PRE_MD = '767.98px';\n\n\n/*\n * Private Elements\n */\n\n// Switch logo in black\nconst opaqueBackground = css`\n    background-color: ${colors.white};\n`;\n\n// Switch logo in black\nconst darkLogo = css`\n    .navbar-brand {\n        svg {\n            * {\n                fill: black;\n            }\n        }\n    }\n`;\n\n// Theme changes for contrast (light) pages\nconst contrastTheme = css`\n    ${darkLogo};\n\n    .navbar-collapse {\n        .navbar-nav {\n            .nav-link {\n                color: ${colors.black};\n            }\n        }\n    }\n`;\n\n// Navbar\nconst StyledNavbar = styled.nav`\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    padding: 12px 0 12px;\n    height: 64px;\n    z-index: 1001;\n    font-family: ${fonts.sansSerif};\n\n    .${activeNavClassName} {\n        font-weight: ${fontWeights.bold} !important;\n        color: ${colors.darkPurple} !important;\n    }\n\n    .${activeSubNavClassName} {\n        color: ${colors.darkPurple} !important;\n    }\n\n    .navbar-content-delimiter {\n        max-width: ${maxWidth}px;\n        width: 100%;\n        margin: auto;\n\n        .mobile-toggle-content-delimiter {\n            display: inline-flex;\n            width: 100%;\n            justify-content: space-between;\n            align-items: center;\n        }\n    }\n\n    // Make sure we are using a dark logo when the menu is expanded\n    &[data-expanded='true'] {\n        z-index: 1050;\n        position: fixed;\n        ${darkLogo};\n        ${opaqueBackground};\n    }\n\n    .navbar-content-delimiter {\n        max-width: ${maxWidth}px;\n        width: 100%;\n        margin: auto;\n\n        .mobile-toggle-content-delimiter {\n            display: inline-flex;\n            width: 100%;\n            justify-content: space-between;\n            align-items: center;\n        }\n    }\n\n    .navbar-brand {\n        padding-left: 23px;\n    }\n\n    .navbar-toggler {\n        padding: 5px 23px;\n    }\n\n    .navbar-collapse {\n        margin-top: 11px;\n        padding: 0 23px 0 23px;\n        background-color: ${colors.white};\n\n        .navbar-nav {\n            padding-top: 19px;\n\n            .nav-link {\n                font-size: 20px;\n                font-weight: ${fontWeights.bold};\n                color: ${colors.black};\n                padding: 10px 0;\n\n                svg {\n                    * {\n                        stroke: ${colors.black};\n                    }\n\n                    &.inverted {\n                        transform: scaleY(-1);\n                    }\n                }\n\n                &:hover,\n                &:focus,\n                &:active {\n                    color: ${colors.darkPurple};\n\n                    svg {\n                        * {\n                            stroke: ${colors.darkPurple};\n                        }\n                    }\n                }\n\n                &.active-link {\n                    font-weight: ${fontWeights.bold};\n                }\n            }\n\n            .dropdown-toggle {\n                &::after {\n                    content: none;\n                }\n            }\n        }\n    }\n\n    #navbarNavDropdown {\n        width: 100%;\n        height: 100%;\n        max-height: 0;\n        transition: max-height ${navbarDropdownAnimationTime / 1000}s ease-in;\n\n        .navbar-dropdown-content-wrapper {\n            width: 100%;\n            display: flex;\n            align-items: center;\n        }\n\n        &.open {\n            // Due to how the mobile display works when scrolling (the address bar moving in and out of the screen,\n            // bottom placed elements will not display in the correct place in all situations. In order to get around\n            // this, we place the element with 99% max-height.\n            // Read more here: https://developers.google.com/web/updates/2016/12/url-bar-resizing\n            max-height: 99%;\n        }\n    }\n\n    @media (max-width: ${PRE_MD}) {\n        #navbarNavDropdown {\n            position: fixed;\n            overflow-y: scroll;\n        }\n\n        .navbar-collapse {\n            .navbar-nav {\n                &.content-items {\n                    width: 100%;\n                }\n\n                &.sign-in {\n                    position: absolute;\n                    bottom: 75px;\n                    right: 23px;\n                }\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        padding: 0;\n        height: 112px;\n\n        .navbar-content-delimiter {\n            display: flex;\n            justify-content: space-between;\n\n            .mobile-toggle-content-delimiter {\n                width: auto;\n            }\n        }\n\n        .navbar-brand {\n            padding-left: 65px;\n        }\n\n        .navbar-collapse {\n            padding-right: 65px;\n            margin-top: 0;\n            background-color: transparent;\n\n            .navbar-nav {\n                padding: 0;\n\n                &.content-items {\n                    width: 100%;\n                    justify-content: center;\n                }\n\n                .nav-link {\n                    color: ${colors.white};\n                    font-weight: ${fontWeights.regular};\n                    font-size: inherit;\n                    line-height: inherit;\n                    padding: 30px 5px;\n                }\n            }\n        }\n\n        #navbarNavDropdown {\n            max-height: inherit;\n            height: inherit !important;\n            display: none;\n        }\n    }\n\n    @media (min-width: 900px) {\n        .navbar-collapse {\n            .navbar-nav {\n                &.content-items {\n                    margin-left: auto;\n                    margin-right: auto;\n                }\n\n                .nav-link {\n                    padding: 30px 10px;\n                }\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n        .navbar-collapse {\n            .navbar-nav {\n                .nav-link {\n                    padding: 30px 20px;\n                }\n            }\n        }\n    }\n\n    @media (min-width: 1050px) {\n        .navbar-collapse {\n            .navbar-nav {\n                .nav-link {\n                    padding: 30px 25px;\n                }\n            }\n        }\n    }\n`;\n\n// Sign in button\nconst ClickableCircle = styled.div`\n    // Note: we are using #000000 for black instead of the theme \"black\" for the gradient, so that we have a more\n    // pronounced gradient.\n\n    color: ${colors.white};\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    text-align: center;\n    position: relative;\n    margin-top: auto;\n    margin-left: auto;\n    background: linear-gradient(to top right, ${colors.darkPurple}, #000000);\n    z-index: 1;\n\n    p {\n        line-height: 80px;\n        font-weight: ${fontWeights.regular};\n    }\n\n    &::before {\n        position: absolute;\n        content: \"\";\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        border-radius: 50%;\n        background: linear-gradient(to top right, #000000, ${colors.darkPurple});\n        z-index: -1;\n        transition: opacity 0.5s linear;\n        opacity: 0;\n    }\n\n    &:hover {\n        color: ${colors.white};\n\n        &::before {\n            opacity: 1;\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        margin-left: inherit;\n    }\n`;\n\n/**\n * Sign In button\n */\nconst SignIn = () => (\n    <a className=\"nav-link\" href=\"https://dashboard.switchpayments.com/\" target=\"_blank\" style={{padding: 0}}>\n        <ClickableCircle><P2><Trans>Sign In</Trans></P2></ClickableCircle>\n    </a>\n);\n\n// Menu toggle\nconst StyledToggle = styled.button`\n    &:focus {\n        outline: none;\n    }\n\n    #hamburger {\n        width: 30px;\n        height: 21px;\n        position: relative;\n        cursor: pointer;\n\n        span {\n            display: block;\n            position: absolute;\n            height: 3px;\n            width: 100%;\n            background: linear-gradient(to right, ${colors.black}, ${colors.darkPurple});\n            opacity: 1;\n            left: 0;\n            transition: .25s ease-in-out;\n            transform-origin: left center;\n\n            &:nth-of-type(1) {\n                top: 3px;\n            }\n\n            &:nth-of-type(2) {\n                top: 10px;\n            }\n\n            &:nth-of-type(3) {\n                top: 17px;\n            }\n        }\n\n        &.open {\n            span {\n                width: 29px;\n\n                &:nth-of-type(1) {\n                    transform: rotate(45deg);\n                    top: -1px;\n                    left: 3px;\n                }\n\n                &:nth-of-type(2) {\n                    width: 0;\n                    opacity: 0;\n                }\n\n                &:nth-of-type(3) {\n                    transform: rotate(-45deg);\n                    top: 20px;\n                    left: 3px;\n                }\n            }\n        }\n    }\n`;\n\n/**\n * Display the hamburger toggle for the mobile menu\n *\n * @param {boolean} opened - whether the menu is opened or not\n * @param {function} setNavbarDropdownVisibility - method to update whether it is opened\n */\nconst HamburgerToggle = ({opened, setNavbarDropdownVisibility}) => {\n    const {t} = useTranslation();\n\n    /* eslint-disable-next-line i18next/no-literal-string */\n    const className = opened ? 'open' : '';\n\n    /**\n     * Toggle the visibility class on the navbar\n     */\n    function toggleClasses() {\n        setNavbarDropdownVisibility(!opened);\n    }\n\n    return (\n        <StyledToggle\n            className=\"navbar-toggler\"\n            type=\"button\"\n            data-toggle=\"collapse\"\n            data-target=\"#navbarNavDropdown\"\n            aria-controls=\"navbarNavDropdown\"\n            aria-expanded=\"false\"\n            aria-label={t('Toggle navigation')}\n            onClick={toggleClasses}\n        >\n            <div id=\"hamburger\" className={className}>\n                <span />\n                <span />\n                <span />\n            </div>\n        </StyledToggle>\n    );\n};\n\nHamburgerToggle.propTypes = {\n    opened: PropTypes.bool.isRequired,\n    setNavbarDropdownVisibility: PropTypes.func.isRequired,\n};\n\n// Header links\n/**\n * Main menu link (without dropdown)\n *\n * @param {string} to - the link to redirect to\n * @param {function} setNavbarDropdownVisibility - method to set the main menu dropdown visibility\n * @param {node} children - content of the page\n */\nconst HeaderLink = ({to, setNavbarDropdownVisibility, children}) => (\n    <li className=\"nav-item\">\n        <Link\n            className=\"nav-link\"\n            to={to}\n            activeClassName={activeNavClassName}\n            onClick={() => setNavbarDropdownVisibility(false)}\n        >\n            {children}\n        </Link>\n    </li>\n);\n\nHeaderLink.propTypes = {\n    to: PropTypes.string.isRequired,\n    setNavbarDropdownVisibility: PropTypes.func.isRequired,\n    children: PropTypes.node.isRequired,\n};\n\n\nconst StyledHeaderDropdownLink = styled.li`\n    & > ${Link} {\n        display: flex;\n        align-items: baseline;\n        justify-content: space-between;\n    }\n\n    &.dropdown {\n        position: unset;\n    }\n\n    .dropdown-menu {\n        margin: 0;\n        padding-top: 0;\n        border: 0;\n\n        ${Link} {\n            padding: 0;\n\n            &:hover,\n            &:focus {\n                color: ${colors.darkPurple};\n                background-color: ${colors.transparent};\n            }\n\n            & > svg {\n                width: 30px;\n                margin-right: 12px;\n            }\n\n            .link-title {\n                font-size: 12px;\n                line-height: 15px;\n                font-weight: ${fontWeights.bold};\n                letter-spacing: 3px;\n                text-transform: uppercase;\n            }\n\n            .link-description {\n                display: none;\n                color: ${colors.darkGrey};\n            }\n        }\n\n        .dropdown-item {\n            &.last {\n                margin-bottom: 50px;\n            }\n\n            .icon {\n                width: 30px;\n                margin-right: 15px;\n                padding-top: 7.5px;\n                padding-bottom: 7.5px;\n                vertical-align: middle;\n            }\n        }\n\n        .overview {\n            display: none;\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        .dropdown-toggle {\n            position: relative;\n            cursor: default;\n\n            .dropdown-item-caret {\n                display: none;\n            }\n        }\n\n        .dropdown-menu {\n            background-color: transparent;\n            padding: 0 25px;\n            width: fit-content;\n            max-width: min(${maxWidth}px, 100vw);\n\n            &.show {\n                position: absolute;\n                top: 98px;\n                left: 50%;\n                transform: translate(-50%, 0);\n\n                .dropdown-menu-item-wrapper {\n                    .dropdown-menu-item-container {\n                        display: flex;\n                        flex-direction: row;\n                        background-color: ${colors.white};\n                        border-radius: 5px;\n                        box-shadow: 0 10px 17px 0 rgba(35, 35, 38, 0.3);\n\n                        .dropdown-item {\n                            width: fit-content;\n\n                            &.last {\n                                margin-bottom: 0;\n                            }\n\n                            .icon {\n                                width: 45px;\n                                margin: 0;\n                                padding: 0;\n                            }\n                        }\n\n                        .dropdown-column {\n                            padding: 3vw 4vw;\n                            display: flex;\n                            flex-direction: column;\n                            border-radius: 5px;\n                            flex-basis: 0;\n                            flex-grow: 3.5;\n\n                            &.main {\n                                padding-left: 2vw;\n                                padding-right: 2vw;\n                                flex-grow: 1;\n                                background-color: #F7F7FF;\n\n                                ${Link} {\n                                    // TODO: remove this when there is a new overview page \n                                    &.overview {\n                                        display: block;\n                                        cursor: default;\n\n                                        * {\n                                            cursor: default;\n                                        }\n\n                                        .link-title {\n                                            color: ${colors.black} !important;\n                                        }\n\n                                        .cta-arrow {\n                                            display: none;\n                                        }\n                                    }\n\n                                    &.dropdown-item {\n                                        padding: 0;\n                                    }\n\n                                    .link-description {\n                                        padding-top: 15px;\n                                    }\n                                }\n                            }\n\n                            &.secondary {\n                                padding-left: 1vw;\n\n                                ${Link} {\n                                    padding-left: 10px;\n                                    padding-right: 10px;\n                                }\n                            }\n\n                            .dropdown-row {\n                                display: flex;\n                                flex-direction: row;\n                                justify-content: space-between;\n                              \n                                &:nth-of-type(2) {\n                                    margin-top: 30px;\n                                }\n\n                                & > * {\n                                    flex-basis: 0;\n                                    flex-grow: 1;\n                                }\n\n                                .filler {\n                                    visibility: hidden;\n                                }\n                            }\n\n                            ${Link} {\n                                padding-left: 3vw;\n                                padding-right: 3vw;\n                            }\n                        }\n\n                        ${Link} {\n                            padding-left: 25px;\n                            padding-right: 25px;\n                            flex-direction: column;\n                            white-space: pre-wrap;\n\n                            & > * {\n                                display: block;\n                            }\n    \n                            svg {\n                                width: 45px;\n                                height: 45px;\n                            }\n    \n                            .link-title {\n                                padding-top: 20px;\n                            }\n    \n                            .link-description {\n                                padding-top: 5px;\n\n                                a, span {\n                                    font-size: 24px;\n                                    line-height: 32px;\n                                    text-transform: none;\n                                    font-weight: ${fontWeights.semiLight};\n                                    letter-spacing: 0;\n\n                                    span {\n                                        display: block;\n                                        margin-top: 20px;\n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n        .dropdown-menu {\n            padding: 0 65px;\n        }\n    }\n`;\n\nconst DropdownOpenMenuIndicator = styled.span`\n    display: none;\n    position: absolute;\n    top: 85px;\n    right: calc(50% - 8px);\n    z-index: 1001;\n    background-color: ${colors.darkPurple};\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n\n    @media (min-width: ${breakpoints.md}) {\n        &.show {\n            display: block;\n        }\n    }\n`;\n\n/**\n * Main menu link (with dropdown)\n *\n * @param {string} id - the element's ID\n * @param {string} name - the link's text\n * @param {string} partialPath - the partial path to match with to show the link as active\n * @param {boolean} opened - whether the dropdown should be displayed or not\n * @param {function} setOpened - method to set the dropdown visibility\n * @param {function} setNavbarDropdownVisibility - method to set the main menu dropdown visibility\n * @param {node} children - content of the page\n */\nconst HeaderDropdownLink = ({id, name, partialPath, opened, setOpened, setNavbarDropdownVisibility, children}) => {\n    const [currentPath, setCurrentPath] = useState('/');\n    const mdBreakpoint = parseInt(breakpoints.md.replace('px', ''), 10);\n\n    /* eslint-disable-next-line i18next/no-literal-string */\n    const dropDownElementsClass = opened ? 'show' : '';\n    /* eslint-disable-next-line i18next/no-literal-string */\n    const dropDownCaretClass = opened ? 'inverted' : '';\n\n    /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    useEffect(() => setCurrentPath(window.location.pathname));\n\n    /**\n     * Close the actual navbar dropdown (when the user clicks on a navigation element)\n     */\n    const closeMenu = () => {\n        setOpened(false);\n        setNavbarDropdownVisibility(false);\n    };\n\n    /**\n     * Change the current state of the navbar dropdown in the desktop\n     */\n    const changeDesktopDropdownState = newState => () => {\n        if (window.innerWidth >= mdBreakpoint) {\n            setOpened(newState);\n        }\n    };\n\n    /**\n     * Change the current state of the navbar dropdown in mobile\n     */\n    const changeMobileDropdownState = newState => () => {\n        if (window.innerWidth < mdBreakpoint) {\n            setOpened(newState);\n        }\n    };\n\n    return (\n        <StyledHeaderDropdownLink\n            className=\"nav-item dropdown\"\n            onClick={changeMobileDropdownState(!opened)}\n            onMouseEnter={changeDesktopDropdownState(true)}\n            onMouseLeave={changeDesktopDropdownState(false)}\n        >\n            <Link\n                className=\"nav-link dropdown-toggle\"\n                id={id}\n                data-toggle=\"dropdown\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n                role=\"menuitem\"\n                forceActive={currentPath.startsWith(partialPath)}\n                activeClassName={activeNavClassName}\n            >\n                {name}\n                <ArrowDown className={`dropdown-item-caret ${dropDownCaretClass}`} />\n                <ClientOnly><DropdownOpenMenuIndicator className={dropDownElementsClass} /></ClientOnly>\n            </Link>\n            <div className={`dropdown-menu ${dropDownElementsClass}`} aria-labelledby={id}>\n                <div className=\"dropdown-menu-item-wrapper\">\n                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n                    <div className=\"dropdown-menu-item-container\" onClick={closeMenu}>\n                        {children}\n                    </div>\n                </div>\n            </div>\n        </StyledHeaderDropdownLink>\n    );\n};\n\nHeaderDropdownLink.propTypes = {\n    id: PropTypes.string.isRequired,\n    name: PropTypes.string.isRequired,\n    partialPath: PropTypes.string.isRequired,\n    opened: PropTypes.bool.isRequired,\n    setOpened: PropTypes.func.isRequired,\n    setNavbarDropdownVisibility: PropTypes.func.isRequired,\n    children: PropTypes.node.isRequired,\n};\n\n\n/*\n * Public Elements\n */\n/**\n * Display the page's header\n *\n * @param {boolean} contrast - whether the page is uses a contrast (light) theme\n */\nconst Header = ({contrast = false}) => {\n    const {t} = useTranslation();\n    const [dataExpanded, setDataExpanded] = useState(false);\n    const [mobileMenuOpened, setMobileMenuOpened] = useState(false);\n\n    // Only one dropdown can be opened at a time, and \"null\" means no dropdown is opened\n    const [openedHeaderDropdownLink, setOpenedHeaderDropdownLink] = useState(null);\n\n    // Define the navbar classes\n    /* eslint-disable-next-line i18next/no-literal-string */\n    const navbarClasses = ['navbar', 'navbar-expand-md'];\n\n    // Define the navbar dropdown classes\n    /* eslint-disable-next-line i18next/no-literal-string */\n    const navbarDropdownClasses = ['collapse', 'navbar-collapse', 'show'];\n    if (mobileMenuOpened) {\n        /* eslint-disable-next-line i18next/no-literal-string */\n        navbarDropdownClasses.push('open');\n    }\n\n    /**\n     * Show or hide the navbar dropdown\n     *\n     * @param {boolean} visible - whether the navbar dropdown should be visible or not\n     */\n    const setNavbarDropdownVisibility = visible => {\n        setMobileMenuOpened(visible);\n\n        if (visible) {\n            setDataExpanded(true);\n        } else {\n            // Wait for the dropdown animation to finish (closing the element), and only then set the remaining\n            // elements, so we have a smooth transition.\n            setTimeout(() => {\n                setDataExpanded(false);\n            }, navbarDropdownAnimationTime);\n        }\n    };\n\n    /**\n     * Show or hide a HeaderDropdownLink navbar's dropdown based on its ID.\n     *\n     * Returns a function that takes a boolean to decide whether it should be displayed or not.\n     *\n     * @param {string} id - ID of the HeaderDropdownLink element to show/hide\n     */\n    const setOpenedHeaderDropdownLinkById = id => opened => {\n        const idToSet = opened ? id : null;\n        setOpenedHeaderDropdownLink(idToSet);\n    };\n\n    return (\n        <StyledNavbar\n            className={navbarClasses.join(' ')}\n            data-expanded={dataExpanded}\n            css={contrast ? contrastTheme : {}}\n        >\n            <div className=\"navbar-content-delimiter\">\n                <div className=\"mobile-toggle-content-delimiter\">\n                    <Link className=\"navbar-brand\" to=\"/\">\n                        <SwitchLogo />\n                    </Link>\n                    <HamburgerToggle\n                        opened={mobileMenuOpened}\n                        setNavbarDropdownVisibility={setNavbarDropdownVisibility}\n                    />\n                </div>\n\n                <div\n                    className={navbarDropdownClasses.join(' ')}\n                    id=\"navbarNavDropdown\"\n                >\n                    <div className=\"navbar-dropdown-content-wrapper\">\n                        <ul className=\"navbar-nav content-items\">\n                            <HeaderDropdownLink\n                                id=\"productsMenuDropdownLink\"\n                                name={t('Product')}\n                                partialPath=\"/product\"\n                                opened={openedHeaderDropdownLink === 'productsMenuDropdownLink'}\n                                setOpened={setOpenedHeaderDropdownLinkById('productsMenuDropdownLink')}\n                                setNavbarDropdownVisibility={setNavbarDropdownVisibility}\n                            >\n                                <div className=\"dropdown-column main\">\n                                    <Link className=\"dropdown-item overview\">\n                                        <img src={OverviewLogo} alt=\"\" className=\"icon\" />\n                                        <span className=\"link-title\"><Trans>Overview</Trans></span>\n                                        <P2 as=\"div\" className=\"link-description\">\n                                            <CTA colored>\n                                                <Trans>The payments infrastructure for interoperability.</Trans>\n                                            </CTA>\n                                        </P2>\n                                    </Link>\n                                </div>\n\n                                <div className=\"dropdown-column secondary\">\n                                    <div className=\"dropdown-row\">\n                                        <Link\n                                            className=\"dropdown-item\"\n                                            activeClassName={activeSubNavClassName}\n                                            partiallyActive\n                                            to=\"/product/processing\"\n                                        >\n                                            <img src={ProcessingLogo} alt=\"\" className=\"icon\" />\n                                            <span className=\"link-title\"><Trans>Processing</Trans></span>\n                                            <P2 className=\"link-description\">\n                                                <Trans>Single Integration Flow.</Trans>\n                                            </P2>\n                                        </Link>\n                                        <Link\n                                            className=\"dropdown-item\"\n                                            activeClassName={activeSubNavClassName}\n                                            partiallyActive\n                                            to=\"/product/dynamic-routing\"\n                                        >\n                                            <img src={DynamicRoutingLogo} alt=\"\" className=\"icon\" />\n                                            <span className=\"link-title\"><Trans>Dynamic Routing</Trans></span>\n                                            <P2 className=\"link-description\"><Trans>Custom routing rules.</Trans></P2>\n                                        </Link>\n                                        <Link\n                                            className=\"dropdown-item\"\n                                            activeClassName={activeSubNavClassName}\n                                            partiallyActive\n                                            to=\"/product/vault\"\n                                        >\n                                            <img src={VaultLogo} alt=\"\" className=\"icon\" />\n                                            <span className=\"link-title\"><Trans>Vault</Trans></span>\n                                            <P2 className=\"link-description\">\n                                                <Trans>Store payment credentials.</Trans>\n                                            </P2>\n                                        </Link>\n                                        <Link\n                                            className=\"dropdown-item\"\n                                            activeClassName={activeSubNavClassName}\n                                            partiallyActive\n                                            to=\"/product/reconciliation\"\n                                        >\n                                            <img src={ReconciliationLogo} alt=\"\" className=\"icon\" />\n                                            <span className=\"link-title\"><Trans>Reconciliation</Trans></span>\n                                            <P2 className=\"link-description\"><Trans>Automate bookkeeping.</Trans></P2>\n                                        </Link>\n                                    </div>\n\n                                    <div className=\"dropdown-row\">\n                                        <Link\n                                            className=\"dropdown-item\"\n                                            activeClassName={activeSubNavClassName}\n                                            partiallyActive\n                                            to=\"/product/risk\"\n                                        >\n                                            <img src={RiskLogo} alt=\"\" className=\"icon\" />\n                                            <span className=\"link-title\"><Trans>Risk</Trans></span>\n                                            <P2 className=\"link-description\"><Trans>Detect and block fraud.</Trans></P2>\n                                        </Link>\n                                        <Link\n                                            className=\"dropdown-item\"\n                                            activeClassName={activeSubNavClassName}\n                                            partiallyActive\n                                            to=\"/product/analytics\"\n                                        >\n                                            <img src={AnalyticsLogo} alt=\"\" className=\"icon\" />\n                                            <span className=\"link-title\"><Trans>Analytics</Trans></span>\n                                            <P2 className=\"link-description\">\n                                                <Trans>Interactive data visualization.</Trans>\n                                            </P2>\n                                        </Link>\n                                        <Link\n                                            className=\"dropdown-item\"\n                                            activeClassName={activeSubNavClassName}\n                                            partiallyActive\n                                            to=\"/product/terminal\"\n                                        >\n                                            <img src={TerminalLogo} alt=\"\" className=\"icon\" />\n                                            <span className=\"link-title\"><Trans>Terminal</Trans></span>\n                                            <P2 className=\"link-description\">\n                                                <Trans>Unify your payments stack.</Trans>\n                                            </P2>\n                                        </Link>\n                                        <Link className=\"filler\" />\n                                    </div>\n                                </div>\n                            </HeaderDropdownLink>\n\n                            <HeaderDropdownLink\n                                id=\"useCasesMenuDropdownLink\"\n                                name={t('Use Cases')}\n                                partialPath=\"/use-cases\"\n                                opened={openedHeaderDropdownLink === 'useCasesMenuDropdownLink'}\n                                setOpened={setOpenedHeaderDropdownLinkById('useCasesMenuDropdownLink')}\n                                setNavbarDropdownVisibility={setNavbarDropdownVisibility}\n                            >\n                                <div className=\"dropdown-column\">\n                                    <div className=\"dropdown-row\">\n                                        <Link\n                                            className=\"dropdown-item\"\n                                            activeClassName={activeSubNavClassName}\n                                            partiallyActive\n                                            to=\"/use-cases/merchants\"\n                                        >\n                                            <img src={MerchantsLogo} alt=\"\" className=\"icon\" />\n                                            <span className=\"link-title\"><Trans>Merchants</Trans></span>\n                                            <P2 className=\"link-description\"><Trans>Grow your business.</Trans></P2>\n                                        </Link>\n                                        <Link\n                                            className=\"dropdown-item\"\n                                            activeClassName={activeSubNavClassName}\n                                            partiallyActive\n                                            to=\"/use-cases/isvs\"\n                                        >\n                                            <img src={ISVsLogo} alt=\"\" className=\"icon\" />\n                                            <span className=\"link-title\"><Trans>ISVs</Trans></span>\n                                            <P2 className=\"link-description\"><Trans>Meet processing needs.</Trans></P2>\n                                        </Link>\n                                        <Link\n                                            className=\"dropdown-item\"\n                                            activeClassName={activeSubNavClassName}\n                                            partiallyActive\n                                            to=\"/use-cases/psps\"\n                                        >\n                                            <img src={PSPsLogo} alt=\"\" className=\"icon\" />\n                                            <span className=\"link-title\"><Trans>PSPs</Trans></span>\n                                            <P2 className=\"link-description\"><Trans>Expand your options.</Trans></P2>\n                                        </Link>\n                                        <Link\n                                            className=\"dropdown-item\"\n                                            activeClassName={activeSubNavClassName}\n                                            partiallyActive\n                                            to=\"/use-cases/acquirers\"\n                                        >\n                                            <img src={AcquirersLogo} alt=\"\" className=\"icon\" />\n                                            <span className=\"link-title\"><Trans>Acquirers</Trans></span>\n                                            <P2 className=\"link-description\"><Trans>Level up your clients.</Trans></P2>\n                                        </Link>\n                                    </div>\n                                </div>\n                            </HeaderDropdownLink>\n\n                            <HeaderLink\n                                to=\"/channels\"\n                                partialPath=\"/channels\"\n                                setNavbarDropdownVisibility={setNavbarDropdownVisibility}\n                            >\n                                <Trans>Channels</Trans>\n                            </HeaderLink>\n\n                            {/*\n                                TODO: uncomment this when we have status page (don't forget to confirm the link is\n                                correct, as well as removing the existing developer's link\n                            */}\n                            {/* <HeaderDropdownLink */}\n                            {/*    id=\"developersMenuDropdownLink\" */}\n                            {/*    name={t('Developers')} */}\n                            {/*    partialPath=\"/developers\" */}\n                            {/*    opened={openedHeaderDropdownLink === 'developersMenuDropdownLink'} */}\n                            {/*    setOpened={setOpenedHeaderDropdownLinkById('developersMenuDropdownLink')} */}\n                            {/*    setNavbarDropdownVisibility={setNavbarDropdownVisibility} */}\n                            {/* > */}\n                            {/*    <div className=\"dropdown-column\"> */}\n                            {/*        <div className=\"dropdown-row\"> */}\n                            {/*            <Link */}\n                            {/*                className=\"dropdown-item\" */}\n                            {/*                href=\"https://switchpayments.com/docs/\" */}\n                            {/*                target=\"_blank\" */}\n                            {/*            > */}\n                            {/*                <img src={DocumentationLogo} alt=\"\" className=\"icon\" /> */}\n                            {/*                <span className=\"link-title\"><Trans>Documentation</Trans></span> */}\n                            {/*                <P2 className=\"link-description\"> */}\n                            {/*                    <Trans>Integration and platform components.</Trans> */}\n                            {/*                </P2> */}\n                            {/*            </Link> */}\n                            {/*            <Link */}\n                            {/*                className=\"dropdown-item\" */}\n                            {/*                href=\"https://switchpayments.com/api-status/\" */}\n                            {/*                target=\"_blank\" */}\n                            {/*            > */}\n                            {/*                <img src={APIStatusLogo} alt=\"\" className=\"icon\" /> */}\n                            {/*                <span className=\"link-title\"><Trans>API Status</Trans></span> */}\n                            {/*                <P2 className=\"link-description\"><Trans>All systems go.</Trans></P2> */}\n                            {/*            </Link> */}\n                            {/*        </div> */}\n                            {/*    </div> */}\n                            {/* </HeaderDropdownLink> */}\n\n                            <HeaderLink\n                                to=\"https://switchpayments.com/docs\"\n                                setNavbarDropdownVisibility={setNavbarDropdownVisibility}\n                            >\n                                <Trans>Developers</Trans>\n                            </HeaderLink>\n\n                            <HeaderLink\n                                to=\"/learn\"\n                                partialPath=\"/learn\"\n                                setNavbarDropdownVisibility={setNavbarDropdownVisibility}\n                            >\n                                <Trans>Learn</Trans>\n                            </HeaderLink>\n\n                            <HeaderDropdownLink\n                                id=\"aboutMenuDropdownLink\"\n                                name={t('About')}\n                                partialPath=\"/about\"\n                                opened={openedHeaderDropdownLink === 'aboutMenuDropdownLink'}\n                                setOpened={setOpenedHeaderDropdownLinkById('aboutMenuDropdownLink')}\n                                setNavbarDropdownVisibility={setNavbarDropdownVisibility}\n                            >\n                                <div className=\"dropdown-column\">\n                                    <div className=\"dropdown-row\">\n                                        <Link\n                                            className=\"dropdown-item\"\n                                            activeClassName={activeSubNavClassName}\n                                            partiallyActive\n                                            to=\"/about/company\"\n                                        >\n                                            <img src={CompanyLogo} alt=\"\" className=\"icon\" />\n                                            <span className=\"link-title\"><Trans>Company</Trans></span>\n                                            <P2 className=\"link-description\"><Trans>Our story.</Trans></P2>\n                                        </Link>\n                                        <Link\n                                            className=\"dropdown-item\"\n                                            activeClassName={activeSubNavClassName}\n                                            partiallyActive\n                                            to=\"/about/careers\"\n                                        >\n                                            <img src={CareersLogo} alt=\"\" className=\"icon\" />\n                                            <span className=\"link-title\"><Trans>Careers</Trans></span>\n                                            <P2 className=\"link-description\"><Trans>The Switch way.</Trans></P2>\n                                        </Link>\n                                        <Link\n                                            className=\"dropdown-item\"\n                                            activeClassName={activeSubNavClassName}\n                                            partiallyActive\n                                            to=\"/about/newsroom\"\n                                        >\n                                            <img src={NewsroomLogo} alt=\"\" className=\"icon\" />\n                                            <span className=\"link-title\"><Trans>Newsroom</Trans></span>\n                                            <P2 className=\"link-description\"><Trans>Media & Press.</Trans></P2>\n                                        </Link>\n                                        <Link\n                                            className=\"dropdown-item last\"\n                                            activeClassName={activeSubNavClassName}\n                                            partiallyActive\n                                            to=\"/about/contact\"\n                                        >\n                                            <img src={ContactUsLogo} alt=\"\" className=\"icon\" />\n                                            <span className=\"link-title\"><Trans>Contact Us</Trans></span>\n                                            <P2 className=\"link-description\"><Trans>Reach out.</Trans></P2>\n                                        </Link>\n                                    </div>\n                                </div>\n                            </HeaderDropdownLink>\n                        </ul>\n\n                        <ul className=\"navbar-nav sign-in\">\n                            <li className=\"nav-item\">\n                                <SignIn />\n                            </li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n        </StyledNavbar>\n    );\n};\n\nHeader.propTypes = {\n    contrast: PropTypes.bool,\n};\n\nHeader.defaultProps = {\n    contrast: false,\n};\n\n\n/*\n * Exports\n */\nexport default Header;\n"],"sourceRoot":""}