{"version":3,"sources":["../../../src/components/header/Header.tsx"],"sourcesContent":["'use client'; // for server side rendering\n\nimport { AppBar, Toolbar, styled, useColorScheme } from '@mui/material';\nimport type { AppBarProps } from '@mui/material';\nimport { useThemeProps } from '@mui/material/styles';\nimport varnishTokens from '@allenai/varnish-theme/mui';\nimport { forwardRef, type PropsWithChildren, type ReactNode } from 'react';\n\ninterface HeaderProps extends Omit<AppBarProps, 'ref' | 'position'> {\n    logo?: ReactNode;\n    navItem?: ReactNode;\n    search?: ReactNode;\n    action?: ReactNode;\n\n    position?: 'sticky' | 'fixed';\n    shape?: 'box' | 'rounded' | 'full';\n\n    searchClassName?: string;\n    actionClassName?: string;\n    navClassName?: string;\n    logoClassName?: string;\n}\n\ninterface HeaderOwnerState {\n    shape: 'box' | 'rounded' | 'full';\n}\n\n// --- Styled slots ---\n\nconst HeaderRoot = styled(AppBar, {\n    name: 'MuiHeader',\n    slot: 'root',\n})<{ ownerState: HeaderOwnerState }>(({ theme, ownerState }) => ({\n    border: 'none',\n    ...(ownerState.shape === 'box' && { borderRadius: varnishTokens.radii.xl.value }),\n    ...(ownerState.shape === 'rounded' && { borderRadius: varnishTokens.radii.full.value }),\n    [theme.breakpoints.down('sm')]: {\n        ...(ownerState.shape === 'box' && { borderRadius: varnishTokens.radii.md.value }),\n    },\n}));\n\nconst HeaderContainer = styled('div', {\n    name: 'MuiHeader',\n    slot: 'container',\n})({\n    color: 'inherit',\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    flexWrap: 'nowrap',\n    whiteSpace: 'nowrap',\n    width: '100%',\n});\n\nconst HeaderLogo = styled('div', {\n    name: 'MuiHeader',\n    slot: 'logo',\n})(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1.5),\n    flexShrink: 0,\n}));\n\nconst HeaderSlotsArea = styled('div', {\n    name: 'MuiHeader',\n    slot: 'slotsArea',\n})({\n    color: 'inherit',\n    display: 'flex',\n    alignItems: 'center',\n    gap: varnishTokens.spacing[2].value,\n    flexDirection: 'row',\n});\n\nconst HeaderNav = styled('nav', {\n    name: 'MuiHeader',\n    slot: 'nav',\n})({\n    display: 'flex',\n    gap: varnishTokens.spacing[2].value,\n    alignSelf: 'center',\n    flexWrap: 'nowrap',\n    whiteSpace: 'nowrap',\n    color: 'inherit',\n    flexDirection: 'row',\n});\n\nconst HeaderSearch = styled('div', {\n    name: 'MuiHeader',\n    slot: 'search',\n})({\n    whiteSpace: 'nowrap',\n    color: 'inherit',\n});\n\nconst HeaderAction = styled('div', {\n    name: 'MuiHeader',\n    slot: 'action',\n})({\n    whiteSpace: 'nowrap',\n    color: 'inherit',\n});\n\nconst Header = forwardRef<HTMLDivElement, PropsWithChildren<HeaderProps>>(\n    function Header(inProps, ref) {\n        const props = useThemeProps({ props: inProps, name: 'MuiHeader' });\n        const {\n            children,\n            logo,\n            navItem,\n            search,\n            action,\n            position = 'sticky',\n            shape = 'box',\n            searchClassName,\n            actionClassName,\n            navClassName,\n            logoClassName,\n            ...appBarProps\n        } = props;\n\n        const hasSlots = logo || navItem || search || action;\n        const { mode, systemMode } = useColorScheme();\n        const resolvedMode = mode === 'system' ? systemMode : mode;\n        const invertedAttr = resolvedMode === 'dark' ? 'data-light' : 'data-dark';\n\n        const ownerState: HeaderOwnerState = { shape };\n\n        return (\n            <HeaderRoot {...appBarProps} ref={ref} position={position} ownerState={ownerState}>\n                <Toolbar>\n                    {hasSlots ? (\n                        <HeaderContainer {...{ [invertedAttr]: '' }}>\n                            <HeaderLogo aria-label=\"Site Logo\" className={logoClassName}>\n                                {logo}\n                            </HeaderLogo>\n                            <HeaderSlotsArea>\n                                {!!navItem && (\n                                    <HeaderNav\n                                        className={navClassName}\n                                        aria-label=\"Main Navigation\">\n                                        {navItem}\n                                    </HeaderNav>\n                                )}\n                                {!!search && (\n                                    <HeaderSearch\n                                        className={searchClassName}\n                                        aria-label=\"Search Bar\">\n                                        {search}\n                                    </HeaderSearch>\n                                )}\n                                {!!action && (\n                                    <HeaderAction\n                                        className={actionClassName}\n                                        aria-label=\"Action Button\">\n                                        {action}\n                                    </HeaderAction>\n                                )}\n                            </HeaderSlotsArea>\n                        </HeaderContainer>\n                    ) : (\n                        children\n                    )}\n                </Toolbar>\n            </HeaderRoot>\n        );\n    }\n);\n\nexport { Header };\nexport type { HeaderProps };\n"],"mappings":"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","names":["varnishTokens","Header"]}