{"version":3,"file":"static/js/Breadcrumb.8821a1fe.js","mappings":"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","sources":["components/Breadcrumb/Breadcrumb.styled.ts","components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport theme from \"styled-theming\";\n\nimport Icon from \"components/Icon\";\nimport { default as NavLink } from \"components/Link\";\nimport { Container as GridContainer } from \"style/components/Page\";\nimport { BodyM } from \"style/components/Typography\";\nimport { GUTTER } from \"style/grid\";\nimport { MQ } from \"style/mediaQueries\";\n\nconst textColor = theme(\"theme\", {\n    lightgray: \"--text-on-neutral-primary\",\n    blue: \"--text-on-blue-primary\",\n    cyan: \"--text-on-cyan-primary\",\n});\n\nconst borderColor = theme(\"theme\", {\n    lightgray: \"--text-on-neutral-link-alt-border\",\n    blue: \"--text-on-blue-link-border\",\n    cyan: \"--text-on-cyan-link-border\",\n});\n\nconst backgroundColor = theme(\"theme\", {\n    lightgray: \"--background-default\",\n    blue: \"--block-blue-default\",\n    cyan: \"--block-cyan-default\",\n});\n\nconst darkenColor = theme(\"theme\", {\n    lightgray: \"--color-black-o05\",\n    blue: \"--color-black-o30\",\n    cyan: \"--color-white-o15\",\n});\n\nexport const Section = styled.div`\n    align-items: center;\n    background: var(${backgroundColor});\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    width: 100%;\n\n    &::after {\n        background: var(${darkenColor});\n        content: \"\";\n        display: block;\n        inset: 0;\n        position: absolute;\n    }\n`;\n\nexport const Container = styled(GridContainer)`\n    align-self: center;\n    padding-bottom: 0.875rem;\n    padding-right: 0;\n    padding-top: 0.875rem;\n\n    ${MQ.FROM_M} {\n        padding: 0.875rem ${GUTTER.MD};\n    }\n\n    ${MQ.FROM_XL} {\n        padding: 1.3125rem ${GUTTER.XL};\n    }\n`;\n\nexport const Links = styled.ul`\n    display: flex;\n    flex-direction: row;\n    gap: 0.375rem;\n    margin: 0;\n    overflow: auto;\n    padding-inline-start: 0;\n    width: 100%;\n\n    ${MQ.FROM_M} {\n        flex-wrap: wrap;\n    }\n`;\n\nexport const Arrow = styled(Icon)`\n    color: var(${textColor});\n    height: 1.75rem;\n    margin-right: 0.375rem;\n    width: 1.75rem;\n`;\n\nexport const Home = styled(Icon)`\n    color: inherit;\n    height: 1.75rem;\n    vertical-align: -0.5rem;\n    width: 1.75rem;\n`;\n\nexport const LinkWrapper = styled(BodyM).attrs<{\n    readonly $position: string;\n    readonly $collapseItems: boolean;\n}>(() => ({}))`\n    color: var(${textColor});\n    list-style: none;\n    white-space: nowrap;\n    z-index: 1;\n    ${(props) =>\n        props.$position === \"middle\" && props.$collapseItems && `display:none;`}\n\n    &:first-child {\n        display: block;\n    }\n\n    ${MQ.FROM_M} {\n        display: block;\n    }\n`;\n\nexport const Link = styled(NavLink)`\n    border: none;\n    color: var(${textColor});\n\n    span {\n        transition:\n            border-color 0.2s ease-in-out,\n            color 0.2s ease-in-out;\n        border-color: var(${borderColor});\n    }\n\n    &:hover {\n        color: var(${textColor});\n\n        span {\n            border-bottom: 1px solid var(${textColor});\n        }\n    }\n`;\n\nexport const Collapsed = styled.button.attrs<{\n    $show: boolean;\n}>(() => ({}))`\n    all: unset;\n    cursor: pointer;\n    display: ${(props) => (props.$show ? \"inline-block\" : \"none\")};\n    margin-left: 0.375rem;\n    white-space: nowrap;\n\n    ${MQ.FROM_M} {\n        display: none;\n    }\n`;\n","import React, { ReactElement, useCallback, useEffect, useState } from \"react\";\nimport { useLocation } from \"react-router\";\nimport { ThemeProvider } from \"styled-components\";\n\nimport { A11y } from \"style/components/A11Y\";\n\nimport {\n    Links,\n    LinkWrapper,\n    Link,\n    Home,\n    Arrow,\n    Section,\n    Container,\n    Collapsed,\n} from \"./Breadcrumb.styled\";\nimport BreadcrumbProps from \"./BreadcrumbProps\";\n\nconst Breadcrumb = ({\n    theme = \"lightgray\",\n    identifier,\n    items,\n}: BreadcrumbProps): ReactElement => {\n    const [isCollapsed, setCollapsed] = useState<boolean>(true);\n    const { pathname } = useLocation();\n\n    useEffect(() => {\n        setCollapsed(true);\n    }, [pathname]);\n\n    const toggleCollapsed = useCallback((): void => {\n        setCollapsed(!isCollapsed);\n    }, [isCollapsed]);\n\n    const handleKeyDown = useCallback(\n        (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n            if (event?.key === \"Enter\") {\n                event.preventDefault();\n                toggleCollapsed();\n            }\n        },\n        [toggleCollapsed],\n    );\n\n    return (\n        <ThemeProvider theme={{ theme: theme }}>\n            <Section>\n                <Container\n                    role=\"navigation\"\n                    aria-label=\"Breadcrumb\"\n                    key={identifier || `BreadcrumbContent`}\n                >\n                    <Links as=\"ol\">\n                        {items?.map(\n                            (navItem, index, items) =>\n                                navItem?.url && (\n                                    <LinkWrapper\n                                        as=\"li\"\n                                        key={`navItem-${index}`}\n                                        $position={\n                                            index === 0\n                                                ? \"first\"\n                                                : index === items.length - 1\n                                                  ? \"last\"\n                                                  : \"middle\"\n                                        }\n                                        $collapseItems={isCollapsed}\n                                    >\n                                        {index !== 0 && (\n                                            <Arrow icon={\"arrowRight28\"} />\n                                        )}\n                                        {index < items.length - 1 ? (\n                                            <Link\n                                                to={navItem.url}\n                                                exact\n                                                title={navItem.displayName}\n                                                aria-current={\n                                                    items.length - 1 === index\n                                                        ? \"page\"\n                                                        : \"\"\n                                                }\n                                                gtmClickType=\"breadcrumb\"\n                                            >\n                                                {index === 0 ? (\n                                                    <>\n                                                        <A11y>\n                                                            {\n                                                                navItem.displayName\n                                                            }\n                                                        </A11y>\n                                                        <Home icon={\"home28\"} />\n                                                    </>\n                                                ) : (\n                                                    <span>\n                                                        {navItem.displayName}\n                                                    </span>\n                                                )}\n                                            </Link>\n                                        ) : (\n                                            <span>{navItem.displayName}</span>\n                                        )}\n                                        {items.length > 2 && index === 0 && (\n                                            <Collapsed\n                                                $show={isCollapsed}\n                                                onClick={() =>\n                                                    toggleCollapsed()\n                                                }\n                                                onKeyDown={(\n                                                    event: React.KeyboardEvent<HTMLButtonElement>,\n                                                ) => handleKeyDown(event)}\n                                            >\n                                                <Arrow icon={\"arrowRight28\"} />\n                                                ...\n                                            </Collapsed>\n                                        )}\n                                    </LinkWrapper>\n                                ),\n                        )}\n                    </Links>\n                </Container>\n            </Section>\n        </ThemeProvider>\n    );\n};\n\nexport default React.memo(Breadcrumb);\n"],"names":["textColor","theme","lightgray","blue","cyan","borderColor","backgroundColor","darkenColor","Section","styled","div","withConfig","componentId","Container","GridContainer","MQ","FROM_M","GUTTER","MD","FROM_XL","XL","Links","ul","Arrow","Icon","Home","LinkWrapper","BodyM","attrs","props","$position","$collapseItems","Link","NavLink","Collapsed","button","$show","Breadcrumb","identifier","items","isCollapsed","setCollapsed","useState","pathname","useLocation","useEffect","toggleCollapsed","useCallback","handleKeyDown","event","key","preventDefault","_jsx","ThemeProvider","children","role","as","map","navItem","index","url","_jsxs","length","icon","to","exact","title","displayName","gtmClickType","_Fragment","A11y","onClick","onKeyDown","React"],"sourceRoot":""}