npm - @xyo-network/react-appbar - Versions diffs - 4.1.9 → 4.1.10 - Mend

@xyo-network/react-appbar 4.1.9 → 4.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/dist/browser/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/components/AppBar/Application.tsx","../../src/components/Toolbar/Context/ContextToolbar.tsx","../../src/components/Toolbar/Context/LogoLinkEx.tsx","../../src/components/Toolbar/Context/Logo.tsx","../../src/components/Toolbar/System/SystemToolbar.tsx","../../src/components/SiteMenu/hooks/useMenuItemsShared.tsx","../../src/contexts/Collapsible/provider.tsx","../../src/contexts/Collapsible/context.ts","../../src/contexts/Collapsible/use.ts","../../src/components/SiteMenu/Menu.tsx","../../src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx","../../src/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.tsx","../../src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx","../../src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx","../../src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx","../../src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx","../../src/components/SiteMenu/MenuSection.tsx","../../src/components/CollapsibleDrawer/CollapseToggle.tsx","../../src/components/CollapsibleDrawer/CollapsibleDrawer.tsx","../../src/components/MobileSystemControls/SystemControls.tsx","../../src/components/MobileSystemControls/SystemControlsRoot.tsx","../../src/components/MobileSystemControls/SystemControlsType.ts","../../src/components/MobileSystemControls/SystemControlsUnstyled.tsx","../../src/components/MobileSystemControls/controls/SystemControl.tsx","../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import type { ToolbarProps } from '@mui/material'\nimport type { AppBarExProps } from '@xylabs/react-appbar'\nimport { AppBarEx } from '@xylabs/react-appbar'\nimport type { ReactElement } from 'react'\nimport React from 'react'\n\nimport { ContextToolbar, SystemToolbar } from '../Toolbar/index.ts'\n\nexport interface ApplicationAppBarProps extends AppBarExProps {\n contextToolbar?: ReactElement<ToolbarProps>\n responsive?: boolean\n systemToolbar?: ReactElement<ToolbarProps>\n}\n\nexport const ApplicationAppBar: React.FC<ApplicationAppBarProps> = ({\n systemToolbar, contextToolbar, responsive = true, ...props\n}) => {\n return (\n <AppBarEx\n systemToolbar={systemToolbar ?? <SystemToolbar />}\n contextToolbar={contextToolbar ?? <ContextToolbar />}\n position=\"sticky\"\n responsive={responsive}\n {...props}\n />\n )\n}\n","import type { ToolbarProps } from '@mui/material'\nimport { Toolbar } from '@mui/material'\nimport React from 'react'\nimport type { To } from 'react-router-dom'\n\nimport { LogoLinkEx } from './LogoLinkEx.tsx'\n\nexport interface ContextToolbarProps extends ToolbarProps {\n logoTo?: To\n version?: boolean\n}\n\nexport const ContextToolbar: React.FC<ContextToolbarProps> = ({\n logoTo = '/', version = false, ...props\n}) => {\n return (\n <Toolbar {...props}>\n <LogoLinkEx version={version} to={logoTo} />\n </Toolbar>\n )\n}\n","import { Typography, useTheme } from '@mui/material'\nimport { assertEx } from '@xylabs/assert'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport type { LinkExProps } from '@xylabs/react-link'\nimport { LinkEx } from '@xylabs/react-link'\nimport React from 'react'\n\nimport { Logo } from './Logo.tsx'\n\nexport type LogoLinkExProps = LinkExProps & {\n version?: boolean \| string\n}\n\nexport const LogoLinkEx: React.FC<LogoLinkExProps> = ({\n to = '/', href, version = false, ...props\n}) => {\n const theme = useTheme()\n assertEx(href === undefined, 'href is not supported')\n return (\n <LinkEx to={to} {...props}>\n <FlexRow paddingX=\"4px\">\n <Logo height=\"40\" width=\"43\" />\n {version\n ? (\n <Typography\n position=\"absolute\"\n borderRadius={1}\n right={6}\n color={theme.palette.getContrastText(theme.palette.text.primary)}\n bottom={0}\n bgcolor={theme.palette.text.primary}\n paddingX=\"2px\"\n lineHeight={1}\n variant=\"caption\"\n border={`1px ${theme.palette.getContrastText(theme.palette.primary.main)} solid`}\n >\n {typeof version === 'string' ? version : '2.1'}\n </Typography>\n )\n : null}\n </FlexRow>\n </LinkEx>\n )\n}\n","import { useTheme } from '@mui/material'\nimport React from 'react'\n\nexport const Logo: React.FC<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>> = (props) => {\n const theme = useTheme()\n const logoUrl\n = theme.palette.mode === 'dark'\n ? 'https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg'\n : 'https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg'\n return <img src={logoUrl} {...props} />\n}\n","import type { ToolbarProps } from '@mui/material'\nimport { Paper, Toolbar } from '@mui/material'\nimport { DarkModeIconButton } from '@xylabs/react-app-settings'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport type { NetworkSelectExProps } from '@xyo-network/react-network'\nimport { NetworkSelectEx } from '@xyo-network/react-network'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nimport type { SiteMenuProps } from '../../SiteMenu/index.ts'\nimport { SiteMenu } from '../../SiteMenu/index.ts'\n\nexport interface SystemToolbarProps extends ToolbarProps {\n darkModeButton?: boolean\n developerMode?: boolean\n hideNetworkSelect?: boolean\n menuItems?: ReactNode\n networkSelectProps?: NetworkSelectExProps\n onMenuToggle?: SiteMenuProps['onMenuToggle']\n precedingChildren?: ReactNode\n}\n\nexport const SystemToolbar: React.FC<SystemToolbarProps> = ({\n children,\n darkModeButton = false,\n hideNetworkSelect,\n menuItems,\n networkSelectProps,\n onMenuToggle,\n precedingChildren,\n ...props\n}) => {\n return (\n <Toolbar {...props}>\n {precedingChildren}\n {hideNetworkSelect\n ? null\n : (\n <FlexRow marginX={0.5}>\n <Paper variant=\"elevation\">\n <NetworkSelectEx fullWidth {...networkSelectProps} />\n </Paper>\n </FlexRow>\n )}\n {children}\n {darkModeButton\n ? <DarkModeIconButton color=\"inherit\" />\n : null}\n {menuItems\n ? <SiteMenu onMenuToggle={onMenuToggle}>{menuItems}</SiteMenu>\n : null}\n </Toolbar>\n )\n}\n","import { useMemo } from 'react'\n\nimport { useCollapsible } from '../../../contexts/index.ts'\nimport type { MenuListItemProps } from '../MenuListItem/index.ts'\n\nexport type DefaultSiteMenuListItemProps = Pick<MenuListItemProps, 'collapseEnd' \| 'dense' \| 'iconOnly' \| 'sx'>\n\nexport const useMenuItemsShared = () => {\n const {\n collapse, collapseEnd, setCollapse, setCollapseEnd,\n } = useCollapsible()\n\n const onMenuItemToggle = (open?: boolean) => {\n setCollapse?.(previous => (open ? false : previous))\n setCollapseEnd?.(previous => (open ? false : previous))\n }\n\n const defaultSiteMenuListItemProps: DefaultSiteMenuListItemProps = useMemo(\n () => ({\n collapseEnd,\n dense: true,\n iconOnly: collapse,\n sx: { px: '8px' },\n }),\n [collapse, collapseEnd],\n )\n\n return { defaultSiteMenuListItemProps, onMenuItemToggle }\n}\n","import type { PropsWithChildren } from 'react'\nimport React, { useState } from 'react'\n\nimport { CollapsibleContext } from './context.ts'\n\nexport interface CollapsibleProviderProps extends PropsWithChildren {\n defaultCollapse?: boolean\n defaultCollapseEnd?: boolean\n}\n\nexport const CollapsibleProvider: React.FC<CollapsibleProviderProps> = ({\n defaultCollapse = false, defaultCollapseEnd = false, children,\n}) => {\n const [collapse, setCollapse] = useState(() => defaultCollapse)\n const [collapseEnd, setCollapseEnd] = useState(() => defaultCollapseEnd)\n\n return (\n // eslint-disable-next-line @eslint-react/no-unstable-context-value\n <CollapsibleContext.Provider value={{\n collapse, collapseEnd, provided: true, setCollapse, setCollapseEnd,\n }}\n >\n {children}\n </CollapsibleContext.Provider>\n )\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport type { CollapsibleState } from './State.ts'\n\nexport const CollapsibleContext = createContextEx<CollapsibleState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CollapsibleContext } from './context.ts'\n\nexport const useCollapsible = () => useContextEx(CollapsibleContext, 'Collapsible', false)\n","import { Menu as MenuIcon, Settings as SettingsIcon } from '@mui/icons-material'\nimport {\n IconButton, List, SwipeableDrawer,\n} from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React, { useEffect, useState } from 'react'\n\nimport { MenuListItemContainer } from './MenuListItem/index.ts'\n\nexport interface SiteMenuProps extends FlexBoxProps {\n hideSettingsMenuItem?: boolean\n onMenuToggle?: (state?: boolean) => void\n side?: 'left' \| 'right' \| 'top' \| 'bottom'\n}\n\nexport const SiteMenu: React.FC<SiteMenuProps> = ({\n children, onMenuToggle, side = 'right', ...props\n}) => {\n const [open, setOpen] = useState(false)\n\n useEffect(() => {\n onMenuToggle?.(open)\n }, [onMenuToggle, open])\n\n return (\n <FlexRow alignItems=\"stretch\" {...props}>\n <IconButton\n size=\"small\"\n color=\"inherit\"\n onClick={() => {\n setOpen(!open)\n }}\n >\n <MenuIcon fontSize=\"large\" />\n </IconButton>\n <SwipeableDrawer\n anchor={side}\n open={open}\n onClick={() => setOpen(false)}\n onKeyDown={() => setOpen(false)}\n onClose={() => setOpen(false)}\n onOpen={() => setOpen(true)}\n >\n {children ?? (\n <List>\n <MenuListItemContainer primary=\"Settings\" icon={<SettingsIcon />} to=\"/settings\" />\n </List>\n )}\n </SwipeableDrawer>\n </FlexRow>\n )\n}\n","import type { ListItemProps } from '@mui/material'\nimport { ListItemText, useTheme } from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { LinkEx } from '@xylabs/react-link'\nimport React, { useState } from 'react'\n\nimport { useCollapsible } from '../../../contexts/index.ts'\nimport type { MenuListItemBase, NavListItemProps } from '../lib/index.ts'\nimport {\n ListItemTooltip, MenuIcon, MenuListItem,\n} from './list-item-components/index.ts'\nimport { SubNavListItemsCollapse, SubNavToggleIconButton } from './sub-nav/index.ts'\n\nexport interface MenuListItemProps extends NavListItemProps, MenuListItemBase, ListItemProps {\n iconMenuTextSpacing?: string\n iconOnly?: boolean\n subNavListItems?: NavListItemProps[]\n subNavOpen?: boolean\n}\n\nexport const MenuListItemContainer: React.FC<MenuListItemProps> = ({\n style,\n icon,\n iconMenuTextSpacing,\n iconOnly,\n onButtonClick,\n primary,\n subNavListItems,\n sx,\n tooltip,\n to,\n ...props\n}) => {\n const { dense } = props\n const theme = useTheme()\n const { collapse } = useCollapsible()\n const [openSubNav, setOpenSubNav] = useState(false)\n const [hovered, setHovered] = useState(false)\n const resolvedIconMenuTextSpacing = iconMenuTextSpacing ?? theme.spacing(1)\n\n return (\n <>\n <MenuListItem\n disableGutters\n iconOnly={iconOnly}\n onClick={onButtonClick}\n dense={dense}\n sx={{ justifyContent: 'space-between', ...sx }}\n style={{ whiteSpace: 'nowrap', ...style }}\n {...props}\n >\n <LinkEx\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n color=\"inherit\"\n to={to}\n sx={{\n '& :hover': {\n cursor: 'pointer',\n textDecoration: 'underline',\n },\n }}\n >\n <FlexRow>\n <MenuIcon icon={icon} paddingRight={resolvedIconMenuTextSpacing} color={hovered ? 'secondary' : 'inherit'} />\n <ListItemText primary={primary} />\n </FlexRow>\n </LinkEx>\n <FlexRow style={{ marginLeft: theme.spacing(1) }}>\n {subNavListItems\n ? <SubNavToggleIconButton setOpenSubNav={setOpenSubNav} openSubNav={openSubNav} />\n : null}\n {tooltip\n ? <ListItemTooltip title={tooltip} />\n : null}\n </FlexRow>\n </MenuListItem>\n {subNavListItems\n ? (\n <SubNavListItemsCollapse openSubNav={openSubNav} collapse={collapse}>\n {subNavListItems?.map((item, index) => <MenuListItemContainer dense={dense} sx={{ pl: theme.spacing(1) }} key={index} {...item} />)}\n </SubNavListItemsCollapse>\n )\n : null}\n </>\n )\n}\n","import type { TooltipProps } from '@mui/material'\nimport { Tooltip } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport React from 'react'\n// eslint-disable-next-line import-x/no-internal-modules\nimport { VscInfo } from 'react-icons/vsc'\n\nexport interface ListItemTooltipProps extends Omit<TooltipProps, 'children'> {\n title: string\n}\n\nexport const ListItemTooltip: React.FC<ListItemTooltipProps> = ({ title, ...props }) => {\n return (\n <Tooltip title={title} placement=\"right\" {...props}>\n {/* Needs div so it can work, the hovering doesn't work with a FlexCol */}\n <div>\n <FlexCol justifyContent=\"center\">\n <VscInfo color=\"grey\" />\n </FlexCol>\n </div>\n </Tooltip>\n )\n}\n","import type { TypographyProps } from '@mui/material'\nimport { Typography } from '@mui/material'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nexport interface MenuIconProps extends TypographyProps {\n icon?: ReactNode\n}\n\nexport const MenuIcon: React.FC<MenuIconProps> = ({ icon, ...props }) => {\n return (\n <Typography display=\"flex\" {...props}>\n {icon}\n </Typography>\n )\n}\n","import type { ListItemProps } from '@mui/material'\nimport { ListItem } from '@mui/material'\nimport React from 'react'\n\nimport type { MenuListItemBase } from '../../lib/index.ts'\n\nexport interface ListItemExProps extends MenuListItemBase, ListItemProps {}\n\nexport const MenuListItem: React.FC<ListItemExProps> = ({\n iconOnly, collapseEnd, sx, children, dense, ...props\n}) => {\n const listItemSx = iconOnly\n ? {\n borderRadius: '50%', display: 'inline-flex', flexGrow: 0, width: 'auto',\n }\n : { width: '100%' }\n // wait till collapseEnds to remove the spacing between items\n const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 }\n // adjusts to the paddingY value which does NOT scale along the theme.spacing\n const paddingSx = dense ? { px: '8px' } : { px: '12px' }\n return (\n <ListItem\n sx={{\n ...listItemSx, ...spacingSx, ...paddingSx, ...sx,\n }}\n {...props}\n >\n {children}\n </ListItem>\n )\n}\n","import type { CollapseProps } from '@mui/material'\nimport { Collapse, List } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nimport type { NavListItemProps } from '../../lib/index.ts'\n\nexport interface SubNavListItemsCollapseProps extends PropsWithChildren, CollapseProps {\n collapse?: boolean\n openSubNav?: boolean\n subNavListItems?: NavListItemProps[]\n}\n\nexport const SubNavListItemsCollapse: React.FC<SubNavListItemsCollapseProps> = ({\n collapse, openSubNav, children, ...props\n}) => {\n return (\n <Collapse in={collapse == true ? false : openSubNav} {...props}>\n <List>{children}</List>\n </Collapse>\n )\n}\n","import type { IconButtonProps } from '@mui/material'\nimport { IconButton, useTheme } from '@mui/material'\nimport type {\n Dispatch, SetStateAction, SyntheticEvent,\n} from 'react'\nimport React from 'react'\n// eslint-disable-next-line import-x/no-internal-modules\nimport { VscChevronDown } from 'react-icons/vsc'\nexport interface SubNavToggleIconButtonProps extends IconButtonProps {\n openSubNav?: boolean\n setOpenSubNav?: Dispatch<SetStateAction<boolean>>\n}\n\nexport const SubNavToggleIconButton: React.FC<SubNavToggleIconButtonProps> = ({ setOpenSubNav, openSubNav }) => {\n const theme = useTheme()\n return (\n <IconButton\n onClick={(event: SyntheticEvent) => {\n event.stopPropagation()\n setOpenSubNav?.(!openSubNav)\n }}\n sx={{ marginRight: theme.spacing(0.5) }}\n >\n <VscChevronDown fontSize=\"16px\" />\n </IconButton>\n )\n}\n","import { Collapse, ListSubheader } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nimport type { MenuListItemProps } from './MenuListItem/index.ts'\nimport { MenuListItemContainer } from './MenuListItem/index.ts'\n\nexport interface MenuSectionProps extends FlexBoxProps {\n iconMenuTextSpacing?: string\n listItems: MenuListItemProps[]\n showTitle?: boolean\n title: string\n}\n\nexport const MenuSection: React.FC<MenuSectionProps> = ({\n iconMenuTextSpacing, listItems, showTitle = true, title, ...props\n}) => {\n return (\n <FlexCol alignItems=\"stretch\" {...props}>\n <Collapse in={showTitle} timeout={700}>\n <ListSubheader>{title}</ListSubheader>\n </Collapse>\n\n {listItems.map((item, index) => (\n <MenuListItemContainer key={index} iconMenuTextSpacing={iconMenuTextSpacing} {...item}></MenuListItemContainer>\n ))}\n </FlexCol>\n )\n}\n","import { Icon, useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React, { useState } from 'react'\n// eslint-disable-next-line import-x/no-internal-modules\nimport { VscArrowSmallLeft, VscArrowSmallRight } from 'react-icons/vsc'\n\nimport { useCollapsible } from '../../contexts/index.ts'\n\nexport const CollapseToggleFlex: React.FC<FlexBoxProps> = (props) => {\n const {\n collapse, setCollapse, setCollapseEnd,\n } = useCollapsible()\n const [hover, setHover] = useState(false)\n const theme = useTheme()\n\n const handleCollapseToggle = () => {\n setCollapse?.(!collapse)\n setCollapseEnd?.(previous => (previous ? false : previous))\n }\n\n return (\n <FlexRow mt={2} py={2} justifyContent={collapse ? 'start' : 'center'} {...props}>\n <Icon\n onClick={handleCollapseToggle}\n onMouseEnter={() => setHover(true)}\n onMouseLeave={() => setHover(false)}\n fontSize=\"large\"\n sx={{ color: hover ? theme.palette.secondary.main : 'inherit', cursor: 'pointer' }}\n >\n {collapse\n ? <VscArrowSmallRight />\n : <VscArrowSmallLeft />}\n </Icon>\n </FlexRow>\n )\n}\n","import type { CollapseProps } from '@mui/material'\nimport {\n Collapse, styled, useTheme,\n} from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nimport { useCollapsible } from '../../contexts/index.ts'\n\nexport const CollapsibleDrawer: React.FC<PropsWithChildren<CollapseProps>> = ({\n children, sx, ...props\n}) => {\n const { collapse, setCollapseEnd } = useCollapsible()\n const theme = useTheme()\n\n const collapsedSize = props.collapsedSize ?? theme.spacing(5)\n\n return (\n <CollapsibleFlexInner\n in={!collapse}\n orientation=\"horizontal\"\n collapsedSize={collapsedSize}\n onExited={() => setCollapseEnd?.(true)}\n sx={{\n alignItems: 'start',\n display: 'flex',\n height: '100%',\n ...sx,\n }}\n {...props}\n >\n {children}\n </CollapsibleFlexInner>\n )\n}\n\nconst CollapsibleFlexInner = styled(Collapse)(() => ({\n '& .MuiCollapse-wrapperInner': {\n display: 'flex',\n flexDirection: 'column',\n },\n}))\n","import { FlexCol } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nimport { SystemControlsRoot } from './SystemControlsRoot.tsx'\nimport type { SystemControlsUnstyledProps } from './SystemControlsUnstyled.tsx'\n\nconst SystemControls: React.FC<SystemControlsUnstyledProps> = (props) => {\n return (\n <FlexCol>\n <SystemControlsRoot {...props} />\n </FlexCol>\n )\n}\n\nexport { SystemControls }\n","import { styled } from '@mui/material'\n\nimport { SystemControlsType } from './SystemControlsType.ts'\nimport type { SystemControlsUnstyledProps } from './SystemControlsUnstyled.tsx'\nimport { SystemControlsUnstyled } from './SystemControlsUnstyled.tsx'\n\nconst SystemControlsRoot = styled(SystemControlsUnstyled, { name: 'SystemControls', slot: 'Root' })<SystemControlsUnstyledProps>(({ theme }) => ({\n // shared defaults\n ['&']: {\n '.toggle': { backgroundColor: theme.palette.primary.main },\n 'alignItems': 'start',\n 'zIndex': 1,\n },\n // WindowShade System Controls styles\n [`&.system-controls-type-${SystemControlsType.WindowShade}`]: {\n '.control': {\n borderRadius: '0 0 5px 5px',\n flexDirection: 'row',\n flexGrow: 1,\n justifyContent: 'space-around',\n padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,\n },\n '.controls': {\n alignItems: 'stretch',\n flexDirection: 'column',\n flexGrow: 1,\n },\n '.toggle': {\n borderRadius: '0 0 5px 5px',\n padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,\n },\n 'flexDirection': 'row',\n 'position': 'absolute',\n 'top': 0,\n 'width': '100%',\n },\n // Left System Control styles\n [`&.system-controls-type-${SystemControlsType.Left}`]: {\n '.control': {\n alignItems: 'start',\n flexDirection: 'column',\n padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,\n },\n '.control-wrap': { marginBottom: `${theme.spacing(2)}` },\n '.toggle': {\n borderRadius: '0 5px 5px 0',\n padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,\n writingMode: 'vertical-rl',\n },\n 'flexDirection': 'column',\n 'left': 0,\n 'position': 'fixed',\n 'top': '30vh',\n 'width': 'auto',\n },\n}))\n\nexport { SystemControlsRoot }\n","export enum SystemControlsType {\n Left = 'Left',\n Right = 'Right',\n WindowShade = 'WindowShade',\n}\n","import type { Theme } from '@mui/material'\nimport { Paper, useMediaQuery } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { NetworkSelectEx } from '@xyo-network/react-network'\nimport React from 'react'\n\nimport { SystemControl } from './controls/index.ts'\nimport { SystemControlsType } from './SystemControlsType.ts'\n\ninterface SystemControlsUnstyledProps extends FlexBoxProps {\n systemControlsType?: SystemControlsType\n visible?: boolean\n}\n\nconst SystemControlsUnstyled: React.FC<SystemControlsUnstyledProps> = ({\n visible,\n systemControlsType = SystemControlsType.WindowShade,\n ...props\n}) => {\n const isSmall = useMediaQuery<Theme>(theme => theme.breakpoints.down('sm'))\n\n return visible \|\| isSmall\n ? (\n <FlexCol {...props} className={`${props.className} system-controls-type-${systemControlsType}`}>\n <SystemControl\n systemControlsType={systemControlsType}\n controlElement={(\n <>\n <FlexRow className=\"control-wrap\">\n <Paper variant=\"elevation\" elevation={0}>\n <NetworkSelectEx responsive={false} className=\"network-ex\" />\n </Paper>\n </FlexRow>\n </>\n )}\n />\n </FlexCol>\n )\n : <FlexCol />\n}\n\nexport type { SystemControlsUnstyledProps }\nexport { SystemControlsUnstyled }\n","import type { CollapseProps } from '@mui/material'\nimport { Collapse } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport type { PropsWithChildren } from 'react'\nimport React, { useState } from 'react'\n\nimport { SystemControlsType } from '../SystemControlsType.ts'\n\ninterface SystemControlProps extends FlexBoxProps {\n controlElement: React.ReactNode\n systemControlsType?: SystemControlsType\n}\n\nconst SystemControl: React.FC<PropsWithChildren<SystemControlProps>> = ({\n children,\n controlElement,\n systemControlsType = SystemControlsType.WindowShade,\n ...props\n}) => {\n const [toggleControls, setToggleControls] = useState(false)\n\n let orientation: CollapseProps['orientation'] = 'vertical'\n\n switch (systemControlsType) {\n case SystemControlsType.Left: {\n orientation = 'horizontal'\n break\n }\n }\n\n return (\n <FlexRow className=\"controls\" {...props}>\n <Collapse in={toggleControls} orientation={orientation} timeout={500}>\n <FlexRow bgcolor=\"primary.main\" className=\"control\">\n {controlElement}\n </FlexRow>\n </Collapse>\n <FlexCol style={{ cursor: 'pointer' }} onClick={() => setToggleControls(!toggleControls)}>\n {children}\n </FlexCol>\n </FlexRow>\n )\n}\n\nexport { SystemControl }\n","import { Search as SearchIcon } from '@mui/icons-material'\nimport { Paper, TextField } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React, { useState } from 'react'\n\nexport interface SearchBarProps extends FlexBoxProps {\n onSearch?: (term?: string) => void\n}\n\nexport const SearchBar: React.FC<SearchBarProps> = ({\n defaultValue, onSearch, ...props\n}) => {\n const [term, setTerm] = useState<string>()\n\n return (\n <FlexRow alignItems=\"stretch\" {...props}>\n <Paper\n variant=\"elevation\"\n elevation={0}\n style={{\n display: 'flex', overflow: 'hidden', width: '100%',\n }}\n >\n <TextField\n variant=\"outlined\"\n size=\"small\"\n defaultValue={defaultValue}\n fullWidth\n onChange={event => setTerm(event.target.value)}\n onKeyDown={(event) => {\n if (event.key === 'Enter') onSearch?.(term)\n }}\n slotProps={{\n input: {\n color: 'secondary',\n style: {\n borderBottomRightRadius: 0, borderTopRightRadius: 0, borderWidth: 0,\n },\n },\n }}\n />\n <ButtonEx\n variant=\"contained\"\n style={{ borderRadius: 0, borderTopLeftRadius: 0 }}\n color=\"secondary\"\n onClick={() => onSearch?.(term)}\n >\n <SearchIcon />\n </ButtonEx>\n </Paper>\n </FlexRow>\n )\n}\n"],"mappings":"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","names":["AppBarEx","React","Toolbar","React","Typography","useTheme","assertEx","FlexRow","LinkEx","React","useTheme","React","Logo","props","theme","useTheme","logoUrl","palette","mode","img","src","LogoLinkEx","to","href","version","props","theme","useTheme","assertEx","undefined","React","LinkEx","FlexRow","paddingX","Logo","height","width","Typography","position","borderRadius","right","color","palette","getContrastText","text","primary","bottom","bgcolor","lineHeight","variant","border","main","ContextToolbar","logoTo","version","props","React","Toolbar","LogoLinkEx","to","Paper","Toolbar","DarkModeIconButton","FlexRow","NetworkSelectEx","React","useMemo","React","useState","createContextEx","CollapsibleContext","CollapsibleProvider","defaultCollapse","defaultCollapseEnd","children","collapse","setCollapse","useState","collapseEnd","setCollapseEnd","React","CollapsibleContext","Provider","value","provided","useContextEx","useCollapsible","useContextEx","CollapsibleContext","useMenuItemsShared","collapse","collapseEnd","setCollapse","setCollapseEnd","useCollapsible","onMenuItemToggle","open","previous","defaultSiteMenuListItemProps","useMemo","dense","iconOnly","sx","px","Menu","MenuIcon","Settings","SettingsIcon","IconButton","List","SwipeableDrawer","FlexRow","React","useEffect","useState","ListItemText","useTheme","FlexRow","LinkEx","React","useState","Tooltip","FlexCol","React","VscInfo","ListItemTooltip","title","props","React","Tooltip","placement","div","FlexCol","justifyContent","VscInfo","color","Typography","React","MenuIcon","icon","props","React","Typography","display","ListItem","React","MenuListItem","iconOnly","collapseEnd","sx","children","dense","props","listItemSx","borderRadius","display","flexGrow","width","spacingSx","columnGap","paddingSx","px","React","ListItem","Collapse","List","React","SubNavListItemsCollapse","collapse","openSubNav","children","props","React","Collapse","in","List","IconButton","useTheme","React","VscChevronDown","SubNavToggleIconButton","setOpenSubNav","openSubNav","theme","useTheme","React","IconButton","onClick","event","stopPropagation","sx","marginRight","spacing","VscChevronDown","fontSize","MenuListItemContainer","style","icon","iconMenuTextSpacing","iconOnly","onButtonClick","primary","subNavListItems","sx","tooltip","to","props","dense","theme","useTheme","collapse","useCollapsible","openSubNav","setOpenSubNav","useState","hovered","setHovered","resolvedIconMenuTextSpacing","spacing","React","MenuListItem","disableGutters","onClick","justifyContent","whiteSpace","LinkEx","onMouseEnter","onMouseLeave","color","cursor","textDecoration","FlexRow","MenuIcon","paddingRight","ListItemText","marginLeft","SubNavToggleIconButton","ListItemTooltip","title","SubNavListItemsCollapse","map","item","index","pl","key","SiteMenu","children","onMenuToggle","side","props","open","setOpen","useState","useEffect","React","FlexRow","alignItems","IconButton","size","color","onClick","MenuIcon","fontSize","SwipeableDrawer","anchor","onKeyDown","onClose","onOpen","List","MenuListItemContainer","primary","icon","SettingsIcon","to","Collapse","ListSubheader","FlexCol","React","MenuSection","iconMenuTextSpacing","listItems","showTitle","title","props","React","FlexCol","alignItems","Collapse","in","timeout","ListSubheader","map","item","index","MenuListItemContainer","key","SystemToolbar","children","darkModeButton","hideNetworkSelect","menuItems","networkSelectProps","onMenuToggle","precedingChildren","props","React","Toolbar","FlexRow","marginX","Paper","variant","NetworkSelectEx","fullWidth","DarkModeIconButton","color","SiteMenu","ApplicationAppBar","systemToolbar","contextToolbar","responsive","props","React","AppBarEx","SystemToolbar","ContextToolbar","position","Icon","useTheme","FlexRow","React","useState","VscArrowSmallLeft","VscArrowSmallRight","CollapseToggleFlex","props","collapse","setCollapse","setCollapseEnd","useCollapsible","hover","setHover","useState","theme","useTheme","handleCollapseToggle","previous","React","FlexRow","mt","py","justifyContent","Icon","onClick","onMouseEnter","onMouseLeave","fontSize","sx","color","palette","secondary","main","cursor","VscArrowSmallRight","VscArrowSmallLeft","Collapse","styled","useTheme","React","CollapsibleDrawer","children","sx","props","collapse","setCollapseEnd","useCollapsible","theme","useTheme","collapsedSize","spacing","React","CollapsibleFlexInner","in","orientation","onExited","alignItems","display","height","styled","Collapse","flexDirection","FlexCol","React","styled","SystemControlsType","Paper","useMediaQuery","FlexCol","FlexRow","NetworkSelectEx","React","Collapse","FlexCol","FlexRow","React","useState","SystemControl","children","controlElement","systemControlsType","SystemControlsType","WindowShade","props","toggleControls","setToggleControls","useState","orientation","Left","React","FlexRow","className","Collapse","in","timeout","bgcolor","FlexCol","style","cursor","onClick","SystemControlsUnstyled","visible","systemControlsType","SystemControlsType","WindowShade","props","isSmall","useMediaQuery","theme","breakpoints","down","React","FlexCol","className","SystemControl","controlElement","FlexRow","Paper","variant","elevation","NetworkSelectEx","responsive","SystemControlsRoot","styled","SystemControlsUnstyled","name","slot","theme","backgroundColor","palette","primary","main","SystemControlsType","WindowShade","borderRadius","flexDirection","flexGrow","justifyContent","padding","spacing","alignItems","Left","marginBottom","writingMode","SystemControls","props","React","FlexCol","SystemControlsRoot","Search","SearchIcon","Paper","TextField","ButtonEx","FlexRow","React","useState","SearchBar","defaultValue","onSearch","props","term","setTerm","useState","React","FlexRow","alignItems","Paper","variant","elevation","style","display","overflow","width","TextField","size","fullWidth","onChange","event","target","value","onKeyDown","key","slotProps","input","color","borderBottomRightRadius","borderTopRightRadius","borderWidth","ButtonEx","borderRadius","borderTopLeftRadius","onClick","SearchIcon"]}
1	+ {"version":3,"sources":["../../src/components/AppBar/Application.tsx","../../src/components/Toolbar/Context/ContextToolbar.tsx","../../src/components/Toolbar/Context/LogoLinkEx.tsx","../../src/components/Toolbar/Context/Logo.tsx","../../src/components/Toolbar/System/SystemToolbar.tsx","../../src/components/CollapsibleDrawer/CollapseToggle.tsx","../../src/components/CollapsibleDrawer/CollapsibleDrawer.tsx","../../src/components/MobileSystemControls/SystemControls.tsx","../../src/components/MobileSystemControls/SystemControlsRoot.tsx","../../src/components/MobileSystemControls/SystemControlsType.ts","../../src/components/MobileSystemControls/SystemControlsUnstyled.tsx","../../src/components/MobileSystemControls/controls/SystemControl.tsx","../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import type { ToolbarProps } from '@mui/material'\nimport type { ApplicationAppBarProps } from '@xylabs/react-appbar'\nimport { ApplicationAppBar } from '@xylabs/react-appbar'\nimport type { ReactElement } from 'react'\nimport React from 'react'\n\nimport { XyoContextToolbar, XyoSystemToolbar } from '../Toolbar/index.ts'\n\nexport interface XyoApplicationAppBarProps extends ApplicationAppBarProps {\n contextToolbar?: ReactElement<ToolbarProps>\n responsive?: boolean\n systemToolbar?: ReactElement<ToolbarProps>\n}\n\nexport const XyoApplicationAppBar: React.FC<XyoApplicationAppBarProps> = ({\n systemToolbar, contextToolbar, responsive = true, ...props\n}) => {\n return (\n <ApplicationAppBar\n systemToolbar={systemToolbar ?? <XyoSystemToolbar />}\n contextToolbar={contextToolbar ?? <XyoContextToolbar />}\n position=\"sticky\"\n responsive={responsive}\n {...props}\n />\n )\n}\n","import { Toolbar } from '@mui/material'\nimport type { ContextToolbarProps } from '@xylabs/react-appbar'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nimport { LogoLinkEx } from './LogoLinkEx.tsx'\n\nexport interface XyoContextToolbarProps extends ContextToolbarProps {\n logo?: ReactNode\n}\n\nexport const XyoContextToolbar: React.FC<XyoContextToolbarProps> = ({\n children, logo, logoTo = '/', version = false, ...props\n}) => {\n return (\n <Toolbar {...props}>\n <LogoLinkEx logo={logo} version={version} to={logoTo} />\n {children}\n </Toolbar>\n )\n}\n","import { Typography, useTheme } from '@mui/material'\nimport { assertEx } from '@xylabs/assert'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport type { LinkExProps } from '@xylabs/react-link'\nimport { LinkEx } from '@xylabs/react-link'\nimport React from 'react'\n\nimport { Logo } from './Logo.tsx'\n\nexport type LogoLinkExProps = LinkExProps & {\n logo?: React.ReactNode\n version?: boolean \| string\n}\n\nexport const LogoLinkEx: React.FC<LogoLinkExProps> = ({\n logo, to = '/', href, version = false, ...props\n}) => {\n const theme = useTheme()\n assertEx(href === undefined, () => 'href is not supported')\n return (\n <LinkEx to={to} {...props}>\n <FlexRow paddingX=\"4px\">\n {logo ?? <Logo height=\"40\" width=\"43\" />}\n {version\n ? (\n <Typography\n position=\"absolute\"\n borderRadius={1}\n right={6}\n color={theme.palette.getContrastText(theme.palette.text.primary)}\n bottom={0}\n bgcolor={theme.palette.text.primary}\n paddingX=\"2px\"\n lineHeight={1}\n variant=\"caption\"\n border={`1px ${theme.palette.getContrastText(theme.palette.primary.main)} solid`}\n >\n {typeof version === 'string' ? version : '2.1'}\n </Typography>\n )\n : null}\n </FlexRow>\n </LinkEx>\n )\n}\n","import { useTheme } from '@mui/material'\nimport React from 'react'\n\nexport const Logo: React.FC<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>> = (props) => {\n const theme = useTheme()\n const logoUrl\n = theme.palette.mode === 'dark'\n ? 'https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg'\n : 'https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg'\n return <img src={logoUrl} {...props} />\n}\n","import { Paper } from '@mui/material'\nimport {\n type SiteMenuProps, SystemToolbar, type SystemToolbarProps,\n} from '@xylabs/react-appbar'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport type { NetworkSelectExProps } from '@xyo-network/react-network'\nimport { NetworkSelectEx } from '@xyo-network/react-network'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nexport interface XyoSystemToolbarProps extends SystemToolbarProps {\n darkModeButton?: boolean\n developerMode?: boolean\n hideNetworkSelect?: boolean\n menuItems?: ReactNode\n networkSelectProps?: NetworkSelectExProps\n onMenuToggle?: SiteMenuProps['onMenuToggle']\n precedingChildren?: ReactNode\n}\n\nexport const XyoSystemToolbar: React.FC<XyoSystemToolbarProps> = ({\n children,\n hideNetworkSelect,\n networkSelectProps,\n precedingChildren,\n ...props\n}) => {\n return (\n <SystemToolbar {...props}>\n {precedingChildren}\n {hideNetworkSelect\n ? null\n : (\n <FlexRow marginX={0.5}>\n <Paper variant=\"elevation\">\n <NetworkSelectEx fullWidth {...networkSelectProps} />\n </Paper>\n </FlexRow>\n )}\n {children}\n </SystemToolbar>\n )\n}\n","import { Icon, useTheme } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { useCollapsible } from '@xylabs/react-shared'\nimport React, { useState } from 'react'\n// eslint-disable-next-line import-x/no-internal-modules\nimport { VscArrowSmallLeft, VscArrowSmallRight } from 'react-icons/vsc'\n\nexport const CollapseToggleFlex: React.FC<FlexBoxProps> = (props) => {\n const {\n collapse, setCollapse, setCollapseEnd,\n } = useCollapsible()\n const [hover, setHover] = useState(false)\n const theme = useTheme()\n\n const handleCollapseToggle = () => {\n setCollapse?.(!collapse)\n setCollapseEnd?.(previous => (previous ? false : previous))\n }\n\n return (\n <FlexRow mt={2} py={2} justifyContent={collapse ? 'start' : 'center'} {...props}>\n <Icon\n onClick={handleCollapseToggle}\n onMouseEnter={() => setHover(true)}\n onMouseLeave={() => setHover(false)}\n fontSize=\"large\"\n sx={{ color: hover ? theme.palette.secondary.main : 'inherit', cursor: 'pointer' }}\n >\n {collapse\n ? <VscArrowSmallRight />\n : <VscArrowSmallLeft />}\n </Icon>\n </FlexRow>\n )\n}\n","import type { CollapseProps } from '@mui/material'\nimport {\n Collapse, styled, useTheme,\n} from '@mui/material'\nimport { useCollapsible } from '@xylabs/react-shared'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nexport const CollapsibleDrawer: React.FC<PropsWithChildren<CollapseProps>> = ({\n children, sx, ...props\n}) => {\n const { collapse, setCollapseEnd } = useCollapsible()\n const theme = useTheme()\n\n const collapsedSize = props.collapsedSize ?? theme.spacing(5)\n\n return (\n <CollapsibleFlexInner\n in={!collapse}\n orientation=\"horizontal\"\n collapsedSize={collapsedSize}\n onExited={() => setCollapseEnd?.(true)}\n sx={{\n alignItems: 'start',\n display: 'flex',\n height: '100%',\n ...sx,\n }}\n {...props}\n >\n {children}\n </CollapsibleFlexInner>\n )\n}\n\nconst CollapsibleFlexInner = styled(Collapse)(() => ({\n '& .MuiCollapse-wrapperInner': {\n display: 'flex',\n flexDirection: 'column',\n },\n}))\n","import { FlexCol } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nimport { SystemControlsRoot } from './SystemControlsRoot.tsx'\nimport type { SystemControlsUnstyledProps } from './SystemControlsUnstyled.tsx'\n\nconst SystemControls: React.FC<SystemControlsUnstyledProps> = (props) => {\n return (\n <FlexCol>\n <SystemControlsRoot {...props} />\n </FlexCol>\n )\n}\n\nexport { SystemControls }\n","import { styled } from '@mui/material'\n\nimport { SystemControlsType } from './SystemControlsType.ts'\nimport type { SystemControlsUnstyledProps } from './SystemControlsUnstyled.tsx'\nimport { SystemControlsUnstyled } from './SystemControlsUnstyled.tsx'\n\nconst SystemControlsRoot = styled(SystemControlsUnstyled, { name: 'SystemControls', slot: 'Root' })<SystemControlsUnstyledProps>(({ theme }) => ({\n // shared defaults\n ['&']: {\n '.toggle': { backgroundColor: theme.palette.primary.main },\n 'alignItems': 'start',\n 'zIndex': 1,\n },\n // WindowShade System Controls styles\n [`&.system-controls-type-${SystemControlsType.WindowShade}`]: {\n '.control': {\n borderRadius: '0 0 5px 5px',\n flexDirection: 'row',\n flexGrow: 1,\n justifyContent: 'space-around',\n padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,\n },\n '.controls': {\n alignItems: 'stretch',\n flexDirection: 'column',\n flexGrow: 1,\n },\n '.toggle': {\n borderRadius: '0 0 5px 5px',\n padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,\n },\n 'flexDirection': 'row',\n 'position': 'absolute',\n 'top': 0,\n 'width': '100%',\n },\n // Left System Control styles\n [`&.system-controls-type-${SystemControlsType.Left}`]: {\n '.control': {\n alignItems: 'start',\n flexDirection: 'column',\n padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,\n },\n '.control-wrap': { marginBottom: `${theme.spacing(2)}` },\n '.toggle': {\n borderRadius: '0 5px 5px 0',\n padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,\n writingMode: 'vertical-rl',\n },\n 'flexDirection': 'column',\n 'left': 0,\n 'position': 'fixed',\n 'top': '30vh',\n 'width': 'auto',\n },\n}))\n\nexport { SystemControlsRoot }\n","export enum SystemControlsType {\n Left = 'Left',\n Right = 'Right',\n WindowShade = 'WindowShade',\n}\n","import type { Theme } from '@mui/material'\nimport { Paper, useMediaQuery } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { NetworkSelectEx } from '@xyo-network/react-network'\nimport React from 'react'\n\nimport { SystemControl } from './controls/index.ts'\nimport { SystemControlsType } from './SystemControlsType.ts'\n\ninterface SystemControlsUnstyledProps extends FlexBoxProps {\n systemControlsType?: SystemControlsType\n visible?: boolean\n}\n\nconst SystemControlsUnstyled: React.FC<SystemControlsUnstyledProps> = ({\n visible,\n systemControlsType = SystemControlsType.WindowShade,\n ...props\n}) => {\n const isSmall = useMediaQuery<Theme>(theme => theme.breakpoints.down('sm'))\n\n return visible \|\| isSmall\n ? (\n <FlexCol {...props} className={`${props.className} system-controls-type-${systemControlsType}`}>\n <SystemControl\n systemControlsType={systemControlsType}\n controlElement={(\n <>\n <FlexRow className=\"control-wrap\">\n <Paper variant=\"elevation\" elevation={0}>\n <NetworkSelectEx responsive={false} className=\"network-ex\" />\n </Paper>\n </FlexRow>\n </>\n )}\n />\n </FlexCol>\n )\n : <FlexCol />\n}\n\nexport type { SystemControlsUnstyledProps }\nexport { SystemControlsUnstyled }\n","import type { CollapseProps } from '@mui/material'\nimport { Collapse } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport type { PropsWithChildren } from 'react'\nimport React, { useState } from 'react'\n\nimport { SystemControlsType } from '../SystemControlsType.ts'\n\ninterface SystemControlProps extends FlexBoxProps {\n controlElement: React.ReactNode\n systemControlsType?: SystemControlsType\n}\n\nconst SystemControl: React.FC<PropsWithChildren<SystemControlProps>> = ({\n children,\n controlElement,\n systemControlsType = SystemControlsType.WindowShade,\n ...props\n}) => {\n const [toggleControls, setToggleControls] = useState(false)\n\n let orientation: CollapseProps['orientation'] = 'vertical'\n\n switch (systemControlsType) {\n case SystemControlsType.Left: {\n orientation = 'horizontal'\n break\n }\n }\n\n return (\n <FlexRow className=\"controls\" {...props}>\n <Collapse in={toggleControls} orientation={orientation} timeout={500}>\n <FlexRow bgcolor=\"primary.main\" className=\"control\">\n {controlElement}\n </FlexRow>\n </Collapse>\n <FlexCol style={{ cursor: 'pointer' }} onClick={() => setToggleControls(!toggleControls)}>\n {children}\n </FlexCol>\n </FlexRow>\n )\n}\n\nexport { SystemControl }\n","import { Search as SearchIcon } from '@mui/icons-material'\nimport { Paper, TextField } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React, { useState } from 'react'\n\nexport interface SearchBarProps extends FlexBoxProps {\n onSearch?: (term?: string) => void\n}\n\nexport const SearchBar: React.FC<SearchBarProps> = ({\n defaultValue, onSearch, ...props\n}) => {\n const [term, setTerm] = useState<string>()\n\n return (\n <FlexRow alignItems=\"stretch\" {...props}>\n <Paper\n variant=\"elevation\"\n elevation={0}\n style={{\n display: 'flex', overflow: 'hidden', width: '100%',\n }}\n >\n <TextField\n variant=\"outlined\"\n size=\"small\"\n defaultValue={defaultValue}\n fullWidth\n onChange={event => setTerm(event.target.value)}\n onKeyDown={(event) => {\n if (event.key === 'Enter') onSearch?.(term)\n }}\n slotProps={{\n input: {\n color: 'secondary',\n style: {\n borderBottomRightRadius: 0, borderTopRightRadius: 0, borderWidth: 0,\n },\n },\n }}\n />\n <ButtonEx\n variant=\"contained\"\n style={{ borderRadius: 0, borderTopLeftRadius: 0 }}\n color=\"secondary\"\n onClick={() => onSearch?.(term)}\n >\n <SearchIcon />\n </ButtonEx>\n </Paper>\n </FlexRow>\n )\n}\n"],"mappings":"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","names":["ApplicationAppBar","React","Toolbar","React","Typography","useTheme","assertEx","FlexRow","LinkEx","React","useTheme","React","Logo","props","theme","useTheme","logoUrl","palette","mode","img","src","LogoLinkEx","logo","to","href","version","props","theme","useTheme","assertEx","undefined","React","LinkEx","FlexRow","paddingX","Logo","height","width","Typography","position","borderRadius","right","color","palette","getContrastText","text","primary","bottom","bgcolor","lineHeight","variant","border","main","XyoContextToolbar","children","logo","logoTo","version","props","React","Toolbar","LogoLinkEx","to","Paper","SystemToolbar","FlexRow","NetworkSelectEx","React","XyoSystemToolbar","children","hideNetworkSelect","networkSelectProps","precedingChildren","props","React","SystemToolbar","FlexRow","marginX","Paper","variant","NetworkSelectEx","fullWidth","XyoApplicationAppBar","systemToolbar","contextToolbar","responsive","props","React","ApplicationAppBar","XyoSystemToolbar","XyoContextToolbar","position","Icon","useTheme","FlexRow","useCollapsible","React","useState","VscArrowSmallLeft","VscArrowSmallRight","CollapseToggleFlex","props","collapse","setCollapse","setCollapseEnd","useCollapsible","hover","setHover","useState","theme","useTheme","handleCollapseToggle","previous","React","FlexRow","mt","py","justifyContent","Icon","onClick","onMouseEnter","onMouseLeave","fontSize","sx","color","palette","secondary","main","cursor","VscArrowSmallRight","VscArrowSmallLeft","Collapse","styled","useTheme","useCollapsible","React","CollapsibleDrawer","children","sx","props","collapse","setCollapseEnd","useCollapsible","theme","useTheme","collapsedSize","spacing","React","CollapsibleFlexInner","in","orientation","onExited","alignItems","display","height","styled","Collapse","flexDirection","FlexCol","React","styled","SystemControlsType","Paper","useMediaQuery","FlexCol","FlexRow","NetworkSelectEx","React","Collapse","FlexCol","FlexRow","React","useState","SystemControl","children","controlElement","systemControlsType","SystemControlsType","WindowShade","props","toggleControls","setToggleControls","useState","orientation","Left","React","FlexRow","className","Collapse","in","timeout","bgcolor","FlexCol","style","cursor","onClick","SystemControlsUnstyled","visible","systemControlsType","SystemControlsType","WindowShade","props","isSmall","useMediaQuery","theme","breakpoints","down","React","FlexCol","className","SystemControl","controlElement","FlexRow","Paper","variant","elevation","NetworkSelectEx","responsive","SystemControlsRoot","styled","SystemControlsUnstyled","name","slot","theme","backgroundColor","palette","primary","main","SystemControlsType","WindowShade","borderRadius","flexDirection","flexGrow","justifyContent","padding","spacing","alignItems","Left","marginBottom","writingMode","SystemControls","props","React","FlexCol","SystemControlsRoot","Search","SearchIcon","Paper","TextField","ButtonEx","FlexRow","React","useState","SearchBar","defaultValue","onSearch","props","term","setTerm","useState","React","FlexRow","alignItems","Paper","variant","elevation","style","display","overflow","width","TextField","size","fullWidth","onChange","event","target","value","onKeyDown","key","slotProps","input","color","borderBottomRightRadius","borderTopRightRadius","borderWidth","ButtonEx","borderRadius","borderTopLeftRadius","onClick","SearchIcon"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-appbar",
-  "version": "4.1.9",
+  "version": "4.1.10",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -44,13 +44,12 @@
   },
   "dependencies": {
     "@xylabs/assert": "^4.3.3",
-    "@xylabs/react-app-settings": "^5.2.7",
-    "@xylabs/react-appbar": "^5.2.7",
-    "@xylabs/react-button": "^5.2.7",
-    "@xylabs/react-flexbox": "^5.2.7",
-    "@xylabs/react-link": "^5.2.7",
-    "@xyo-network/react-network": "^4.1.9",
-    "@xyo-network/react-shared": "^4.1.9",
+    "@xylabs/react-appbar": "^5.2.9",
+    "@xylabs/react-button": "^5.2.9",
+    "@xylabs/react-flexbox": "^5.2.9",
+    "@xylabs/react-link": "^5.2.9",
+    "@xylabs/react-shared": "^5.2.9",
+    "@xyo-network/react-network": "^4.1.10",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.27.0"
   },
@@ -61,8 +60,8 @@
     "@storybook/react": "^8.3.6",
     "@xylabs/ts-scripts-yarn3": "^4.2.3",
     "@xylabs/tsconfig-react": "^4.2.3",
-    "@xyo-network/react-storybook": "^4.1.9",
-    "@xyo-network/react-wallet": "^4.1.9",
+    "@xyo-network/react-storybook": "^4.1.10",
+    "@xyo-network/react-wallet": "^4.1.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "^8.3.6",

package/src/components/AppBar/Application.stories.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import { List, Paper } from '@mui/material'
 import type { Meta, StoryFn } from '@storybook/react'
+import { MenuListItemContainer } from '@xylabs/react-appbar'
 import { FlexGrowCol } from '@xylabs/react-flexbox'
 import { NetworkMemoryProvider } from '@xyo-network/react-network'
 import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
@@ -10,26 +11,25 @@ import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 import { SearchBar } from '../SearchBar/index.ts'
-import { MenuListItemContainer } from '../SiteMenu/index.ts'
-import { SystemToolbar } from '../Toolbar/index.ts'
-import { ApplicationAppBar } from './Application.tsx'
+import { XyoSystemToolbar } from '../Toolbar/index.ts'
+import { XyoApplicationAppBar } from './Application.tsx'
 const StorybookEntry = {
   argTypes: {},
-  component: ApplicationAppBar,
+  component: XyoApplicationAppBar,
   parameters: { docs: { page: null } },
   title: 'appbar/AppBar/Application',
-} as Meta<typeof ApplicationAppBar>
+} as Meta<typeof XyoApplicationAppBar>
-const Template: StoryFn<typeof ApplicationAppBar> = (args) => {
+const Template: StoryFn<typeof XyoApplicationAppBar> = (args) => {
   const [wallet] = useWallet({ mnemonic: DefaultSeedPhrase })
   return (
     <WalletProvider rootWallet={wallet}>
       <BrowserRouter>
         <NetworkMemoryProvider>
-          <ApplicationAppBar
+          <XyoApplicationAppBar
             systemToolbar={(
-              <SystemToolbar
+              <XyoSystemToolbar
                 menuItems={(
                   <List>
                     <MenuListItemContainer primary="Hello" />
@@ -39,7 +39,7 @@ const Template: StoryFn<typeof ApplicationAppBar> = (args) => {
             )}
             {...args}
           >
-          </ApplicationAppBar>
+          </XyoApplicationAppBar>
         </NetworkMemoryProvider>
       </BrowserRouter>
     </WalletProvider>
@@ -54,7 +54,7 @@ WithSearchBar.args = {
   children: <SearchBar flexGrow={1} onSearch={term => alert(term)} />,
   color: 'primary',
   systemToolbar: (
-    <SystemToolbar
+    <XyoSystemToolbar
       darkModeButton
       menuItems={(
         <List>
@@ -75,7 +75,7 @@ WithWalletSelectBar.args = {
     </FlexGrowCol>
   ),
   color: 'primary',
-  systemToolbar: <SystemToolbar darkModeButton />,
+  systemToolbar: <XyoSystemToolbar darkModeButton />,
 }
 export {

package/src/components/AppBar/Application.tsx CHANGED Viewed

@@ -1,24 +1,24 @@
 import type { ToolbarProps } from '@mui/material'
-import type { AppBarExProps } from '@xylabs/react-appbar'
-import { AppBarEx } from '@xylabs/react-appbar'
+import type { ApplicationAppBarProps } from '@xylabs/react-appbar'
+import { ApplicationAppBar } from '@xylabs/react-appbar'
 import type { ReactElement } from 'react'
 import React from 'react'
-import { ContextToolbar, SystemToolbar } from '../Toolbar/index.ts'
+import { XyoContextToolbar, XyoSystemToolbar } from '../Toolbar/index.ts'
-export interface ApplicationAppBarProps extends AppBarExProps {
+export interface XyoApplicationAppBarProps extends ApplicationAppBarProps {
   contextToolbar?: ReactElement<ToolbarProps>
   responsive?: boolean
   systemToolbar?: ReactElement<ToolbarProps>
 }
-export const ApplicationAppBar: React.FC<ApplicationAppBarProps> = ({
+export const XyoApplicationAppBar: React.FC<XyoApplicationAppBarProps> = ({
   systemToolbar, contextToolbar, responsive = true, ...props
 }) => {
   return (
-    <AppBarEx
-      systemToolbar={systemToolbar ?? <SystemToolbar />}
-      contextToolbar={contextToolbar ?? <ContextToolbar />}
+    <ApplicationAppBar
+      systemToolbar={systemToolbar ?? <XyoSystemToolbar />}
+      contextToolbar={contextToolbar ?? <XyoContextToolbar />}
       position="sticky"
       responsive={responsive}
       {...props}

package/src/components/CollapsibleDrawer/CollapseDrawer.stories.tsx CHANGED Viewed

@@ -2,13 +2,13 @@ import { Divider, useTheme } from '@mui/material'
 import type {
   Decorator, Meta, StoryFn,
 } from '@storybook/react'
+import { MenuSection } from '@xylabs/react-appbar'
 import {
   FlexCol, FlexGrowCol, FlexRow,
 } from '@xylabs/react-flexbox'
+import { CollapsibleProvider, useCollapsible } from '@xylabs/react-shared'
 import React from 'react'
-import { CollapsibleProvider, useCollapsible } from '../../contexts/index.ts'
-import { MenuSection } from '../SiteMenu/index.ts'
 import { CollapseToggleFlex } from './CollapseToggle.tsx'
 import { CollapsibleDrawer } from './CollapsibleDrawer.tsx'
 import { menuDataBottom, menuDataTop } from './storyExampleMenuData.tsx'

package/src/components/CollapsibleDrawer/CollapseToggle.tsx CHANGED Viewed

@@ -1,12 +1,11 @@
 import { Icon, useTheme } from '@mui/material'
 import type { FlexBoxProps } from '@xylabs/react-flexbox'
 import { FlexRow } from '@xylabs/react-flexbox'
+import { useCollapsible } from '@xylabs/react-shared'
 import React, { useState } from 'react'
 // eslint-disable-next-line import-x/no-internal-modules
 import { VscArrowSmallLeft, VscArrowSmallRight } from 'react-icons/vsc'
-import { useCollapsible } from '../../contexts/index.ts'
 export const CollapseToggleFlex: React.FC<FlexBoxProps> = (props) => {
   const {
     collapse, setCollapse, setCollapseEnd,

package/src/components/CollapsibleDrawer/CollapsibleDrawer.tsx CHANGED Viewed

@@ -2,11 +2,10 @@ import type { CollapseProps } from '@mui/material'
 import {
   Collapse, styled, useTheme,
 } from '@mui/material'
+import { useCollapsible } from '@xylabs/react-shared'
 import type { PropsWithChildren } from 'react'
 import React from 'react'
-import { useCollapsible } from '../../contexts/index.ts'
 export const CollapsibleDrawer: React.FC<PropsWithChildren<CollapseProps>> = ({
   children, sx, ...props
 }) => {

package/src/components/CollapsibleDrawer/storyExampleMenuData.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import type { MenuListItemProps } from '@xylabs/react-appbar'
 import React from 'react'
 import {
   VscAccount,
@@ -15,8 +16,6 @@ import {
   // eslint-disable-next-line import-x/no-internal-modules
 } from 'react-icons/vsc'
-import type { MenuListItemProps } from '../SiteMenu/index.ts'
 export const menuDataTop: MenuListItemProps[] = [
   {
     icon: <VscGlobe fontSize="body1" />,

package/src/components/Toolbar/Context/ContextToolbar.stories.tsx CHANGED Viewed

@@ -2,18 +2,18 @@ import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
-import { ContextToolbar } from './ContextToolbar.tsx'
+import { XyoContextToolbar } from './ContextToolbar.tsx'
 const StorybookEntry = {
   argTypes: {},
-  component: ContextToolbar,
+  component: XyoContextToolbar,
   parameters: { docs: { page: null } },
-  title: 'appbar/Toolbar/Context',
-} as Meta<typeof ContextToolbar>
+  title: 'appbar/Toolbar/XyoContextToolbar',
+} as Meta<typeof XyoContextToolbar>
-const Template: StoryFn<typeof ContextToolbar> = args => (
+const Template: StoryFn<typeof XyoContextToolbar> = args => (
   <BrowserRouter>
-    <ContextToolbar {...args}></ContextToolbar>
+    <XyoContextToolbar {...args}></XyoContextToolbar>
   </BrowserRouter>
 )

package/src/components/Toolbar/Context/ContextToolbar.tsx CHANGED Viewed

@@ -1,21 +1,21 @@
-import type { ToolbarProps } from '@mui/material'
 import { Toolbar } from '@mui/material'
+import type { ContextToolbarProps } from '@xylabs/react-appbar'
+import type { ReactNode } from 'react'
 import React from 'react'
-import type { To } from 'react-router-dom'
 import { LogoLinkEx } from './LogoLinkEx.tsx'
-export interface ContextToolbarProps extends ToolbarProps {
-  logoTo?: To
-  version?: boolean
+export interface XyoContextToolbarProps extends ContextToolbarProps {
+  logo?: ReactNode
 }
-export const ContextToolbar: React.FC<ContextToolbarProps> = ({
-  logoTo = '/', version = false, ...props
+export const XyoContextToolbar: React.FC<XyoContextToolbarProps> = ({
+  children, logo, logoTo = '/', version = false, ...props
 }) => {
   return (
     <Toolbar {...props}>
-      <LogoLinkEx version={version} to={logoTo} />
+      <LogoLinkEx logo={logo} version={version} to={logoTo} />
+      {children}
     </Toolbar>
   )
 }

package/src/components/Toolbar/Context/LogoLinkEx.tsx CHANGED Viewed

@@ -8,18 +8,19 @@ import React from 'react'
 import { Logo } from './Logo.tsx'
 export type LogoLinkExProps = LinkExProps & {
+  logo?: React.ReactNode
   version?: boolean | string
 }
 export const LogoLinkEx: React.FC<LogoLinkExProps> = ({
-  to = '/', href, version = false, ...props
+  logo, to = '/', href, version = false, ...props
 }) => {
   const theme = useTheme()
-  assertEx(href === undefined, 'href is not supported')
+  assertEx(href === undefined, () => 'href is not supported')
   return (
     <LinkEx to={to} {...props}>
       <FlexRow paddingX="4px">
-        <Logo height="40" width="43" />
+        {logo ?? <Logo height="40" width="43" />}
         {version
           ? (
               <Typography

package/src/components/Toolbar/System/SystemToolbar.stories.tsx CHANGED Viewed

@@ -1,13 +1,12 @@
-import { List } from '@mui/material'
+import { List, Typography } from '@mui/material'
 import type { Meta, StoryFn } from '@storybook/react'
+import { MenuListItemContainer } from '@xylabs/react-appbar'
 import { NetworkMemoryProvider } from '@xyo-network/react-network'
-import { TypographyEx } from '@xyo-network/react-shared'
 import type { SyntheticEvent } from 'react'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
-import { MenuListItemContainer } from '../../SiteMenu/index.ts'
-import { SystemToolbar } from './SystemToolbar.tsx'
+import { XyoSystemToolbar } from './SystemToolbar.tsx'
 const DefaultMenu = (
   <List>
@@ -22,15 +21,15 @@ const DefaultMenu = (
 )
 const StorybookEntry: Meta = {
-  component: SystemToolbar,
+  component: XyoSystemToolbar,
   parameters: { docs: { page: null } },
   title: 'appbar/Toolbar/System',
 }
-const Template: StoryFn<typeof SystemToolbar> = args => (
+const Template: StoryFn<typeof XyoSystemToolbar> = args => (
   <BrowserRouter>
     <NetworkMemoryProvider>
-      <SystemToolbar {...args} />
+      <XyoSystemToolbar {...args} />
     </NetworkMemoryProvider>
   </BrowserRouter>
 )
@@ -41,9 +40,9 @@ Default.args = {}
 const PrecedingChildren = Template.bind({})
 PrecedingChildren.args = {
   precedingChildren: (
-    <TypographyEx variant="body1" mx={0.5}>
+    <Typography variant="body1" mx={0.5}>
       Preceding Child Component
-    </TypographyEx>
+    </Typography>
   ),
 }

package/src/components/Toolbar/System/SystemToolbar.tsx CHANGED Viewed

@@ -1,16 +1,14 @@
-import type { ToolbarProps } from '@mui/material'
-import { Paper, Toolbar } from '@mui/material'
-import { DarkModeIconButton } from '@xylabs/react-app-settings'
+import { Paper } from '@mui/material'
+import {
+  type SiteMenuProps, SystemToolbar, type SystemToolbarProps,
+} from '@xylabs/react-appbar'
 import { FlexRow } from '@xylabs/react-flexbox'
 import type { NetworkSelectExProps } from '@xyo-network/react-network'
 import { NetworkSelectEx } from '@xyo-network/react-network'
 import type { ReactNode } from 'react'
 import React from 'react'
-import type { SiteMenuProps } from '../../SiteMenu/index.ts'
-import { SiteMenu } from '../../SiteMenu/index.ts'
-export interface SystemToolbarProps extends ToolbarProps {
+export interface XyoSystemToolbarProps extends SystemToolbarProps {
   darkModeButton?: boolean
   developerMode?: boolean
   hideNetworkSelect?: boolean
@@ -20,18 +18,15 @@ export interface SystemToolbarProps extends ToolbarProps {
   precedingChildren?: ReactNode
 }
-export const SystemToolbar: React.FC<SystemToolbarProps> = ({
+export const XyoSystemToolbar: React.FC<XyoSystemToolbarProps> = ({
   children,
-  darkModeButton = false,
   hideNetworkSelect,
-  menuItems,
   networkSelectProps,
-  onMenuToggle,
   precedingChildren,
   ...props
 }) => {
   return (
-    <Toolbar {...props}>
+    <SystemToolbar {...props}>
       {precedingChildren}
       {hideNetworkSelect
         ? null
@@ -43,12 +38,6 @@ export const SystemToolbar: React.FC<SystemToolbarProps> = ({
             </FlexRow>
           )}
       {children}
-      {darkModeButton
-        ? <DarkModeIconButton color="inherit" />
-        : null}
-      {menuItems
-        ? <SiteMenu onMenuToggle={onMenuToggle}>{menuItems}</SiteMenu>
-        : null}
-    </Toolbar>
+    </SystemToolbar>
   )
 }

package/src/components/index.ts CHANGED Viewed

@@ -2,5 +2,4 @@ export * from './AppBar/index.ts'
 export * from './CollapsibleDrawer/index.ts'
 export * from './MobileSystemControls/index.ts'
 export * from './SearchBar/index.ts'
-export * from './SiteMenu/index.ts'
 export * from './Toolbar/index.ts'

package/src/index.ts CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export * from './components/index.ts'
2	- export * from './contexts/index.ts'

package/dist/browser/components/SiteMenu/Menu.d.ts DELETED Viewed

@@ -1,9 +0,0 @@
-import type { FlexBoxProps } from '@xylabs/react-flexbox';
-import React from 'react';
-export interface SiteMenuProps extends FlexBoxProps {
-    hideSettingsMenuItem?: boolean;
-    onMenuToggle?: (state?: boolean) => void;
-    side?: 'left' | 'right' | 'top' | 'bottom';
-}
-export declare const SiteMenu: React.FC<SiteMenuProps>;
-//# sourceMappingURL=Menu.d.ts.map

package/dist/browser/components/SiteMenu/Menu.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/Menu.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,MAAM,WAAW,aAAc,SAAQ,YAAY;IACjD,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;CAC3C;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoC5C,CAAA"}

package/dist/browser/components/SiteMenu/MenuListItem/MenuListItemContainer.d.ts DELETED Viewed

@@ -1,11 +0,0 @@
-import type { ListItemProps } from '@mui/material';
-import React from 'react';
-import type { MenuListItemBase, NavListItemProps } from '../lib/index.ts';
-export interface MenuListItemProps extends NavListItemProps, MenuListItemBase, ListItemProps {
-    iconMenuTextSpacing?: string;
-    iconOnly?: boolean;
-    subNavListItems?: NavListItemProps[];
-    subNavOpen?: boolean;
-}
-export declare const MenuListItemContainer: React.FC<MenuListItemProps>;
-//# sourceMappingURL=MenuListItemContainer.d.ts.map

package/dist/browser/components/SiteMenu/MenuListItem/MenuListItemContainer.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"MenuListItemContainer.d.ts","sourceRoot":"","sources":["../../../../../src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAIlD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAMzE,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB,EAAE,gBAAgB,EAAE,aAAa;IAC1F,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,gBAAgB,EAAE,CAAA;IACpC,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkE7D,CAAA"}