grep-components 1.15.0-grepf-1792.7 → 1.15.0-grepf-1697.6

package/dist/assets/index.d.ts

@@ -0,0 +1,2 @@
+import UdirLogo from './utdanningsdirektoratet-logo-rgb-neg.png';
+export { UdirLogo };

package/dist/components/AppBar/index.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const _default: React.ComponentType<{}>;
+export default _default;

package/dist/components/AppBar/stories/AppBar.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/AppBar/styles/index.d.ts

@@ -0,0 +1 @@
+export declare const StyledAppBar: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/AppBar").AppBarTypeMap<{}, "header">>;

package/dist/components/AppBarNavList/stories/AppBarNavList.stories.d.ts

@@ -3,6 +3,4 @@ export declare const navbarPages: {
     label: string;
     onClick: (url: string) => void;
     toUrl: string;
-    name: string;
-    path: string;
 }[];

package/dist/components/Footer/index.d.ts

@@ -6,6 +6,9 @@ export interface FooterItem {
 }
 interface FooterProps {
     items: FooterItem[];
+    serviceNameText: string;
+    udirLink: string;
+    udirLogo: string;
 }
 declare const _default: React.ComponentType<FooterProps>;
 export default _default;

package/dist/components/Footer/styles/index.d.ts

@@ -4,7 +4,7 @@ export declare const useFooterStyles: (params: void, styleOverrides?: {
     } & Record<string, unknown>;
     ownerState?: Record<string, unknown> | undefined;
 } | undefined) => {
-    classes: Record<"footer" | "list" | "item" | "itemText" | "itemBtn", string>;
+    classes: Record<"footer" | "content" | "serviceNameText" | "list" | "item" | "itemText" | "itemBtn", string>;
     theme: import("@mui/material").Theme;
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
-export * from './AppBar/AppBar';
+export * from './AppBar';
 export * from './AppBarProfile';
 export * from './AppBarNavList';
 export * from './BodyLayout';
@@ -28,7 +28,7 @@ export * from './GrepEditor';
 export * from './ConfirmationDialog';
 export * from './GrepDialog';
 export * from './ToC';
-export { default as AppBar } from './AppBar/AppBar';
+export { default as AppBar } from './AppBar';
 export { default as AppBarProfile } from './AppBarProfile';
 export { default as AppBarNavList } from './AppBarNavList';
 export { default as BodyLayout } from './BodyLayout';

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as Utils from './utils';
 export { default as Colors } from './styling/Colors';
+export { default as AppBar } from './components/AppBar';
 export { default as AppBarProfile } from './components/AppBarProfile';
 export { default as AppBarNavList } from './components/AppBarNavList';
 export { default as BodyLayout } from './components/BodyLayout';
@@ -27,9 +28,9 @@ export { default as Sidebar } from './components/Sidebar';
 export { default as ServiceMessage } from './components/ServiceMessage';
 export { default as SortableTable } from './components/SortableTable';
 export { default as GrepEditor } from './components/GrepEditor';
-export { default as AppBar } from './components/AppBar/AppBar';
 export { ParseableDate } from './utils/dateHelper';
 export { Utils };
 export * from './components';
 export * from './hooks';
 export * from './styling';
+export * from './assets';

package/dist/index.js

@@ -5,14 +5,15 @@ import isBetweenPlugin from 'dayjs/plugin/isBetween';
 import { red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green, lightGreen, lime, yellow, amber, orange, deepOrange, brown, grey, blueGrey } from '@mui/material/colors';
 import * as React from 'react';
 import React__default, { useContext, forwardRef, createElement, createContext, Fragment, useRef, useLayoutEffect, useState, useCallback as useCallback$1, useEffect, useMemo as useMemo$1 } from 'react';
+import { Toolbar, useScrollTrigger, Slide, Button, Box, Typography, IconButton, Menu, MenuItem, Tabs, Tab, Collapse, MenuList, Tooltip, Container, List, ListItem, ListItemText, ListItemIcon, Divider, styled, TableCell, TableRow, TableSortLabel, TableHead, TablePagination, TableContainer, Table, TableBody, TableFooter, CircularProgress, Link, TextField, FormControl, InputLabel, Select, OutlinedInput, Input, Checkbox, FormHelperText, Grid, ToggleButtonGroup, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
+import AppBar$1 from '@mui/material/AppBar';
+import { useTheme as useTheme$1 } from '@mui/material/styles';
 import AccountCircle from '@mui/icons-material/AccountCircle';
 import ArrowDropdown from '@mui/icons-material/ArrowDropDown';
-import { Button, Box, Typography, IconButton, Menu, MenuItem, Tabs, Tab, Collapse, MenuList, Tooltip, Container, List, ListItem, ListItemText, ListItemIcon, Divider, styled, TableCell, TableRow, TableSortLabel, TableHead, TablePagination, TableContainer, Table, TableBody, TableFooter, CircularProgress, Link, TextField, FormControl, InputLabel, Select, OutlinedInput, Input, Checkbox, FormHelperText, Grid, ToggleButtonGroup, AppBar as AppBar$1, Toolbar as Toolbar$1, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
-import { useTheme as useTheme$1 } from '@mui/material/styles';
-import { useHistory, NavLink, Prompt } from 'react-router-dom';
+import { useHistory, Prompt } from 'react-router-dom';
 import MenuIcon from '@mui/icons-material/Menu';
 import IconExpand from '@mui/icons-material/ExpandMore';
-import { ArrowForward, Info, ExpandMore, ExpandLess, Menu as Menu$1 } from '@mui/icons-material';
+import { ArrowForward, Info, ExpandMore, ExpandLess } from '@mui/icons-material';
 import ListItemIcon$1 from '@mui/material/ListItemIcon';
 import MoreVert from '@mui/icons-material/MoreVert';
 import { useDispatch, connect, Provider as Provider$1, useSelector } from 'react-redux';
@@ -39,10 +40,6 @@ export { ContentState } from 'draft-js';
 import ToggleButton from '@mui/material/ToggleButton';
 import FormatBold from '@mui/icons-material/FormatBold';
 import FormatItalic from '@mui/icons-material/FormatItalic';
-import Divider$1 from '@mui/material/Divider';
-import Menu$2 from '@mui/material/Menu';
-import MenuItem$1 from '@mui/material/MenuItem';
-import Button$1 from '@mui/material/Button';
 import Link$1 from '@mui/material/Link';
 
 dayjs.extend(isBetweenPlugin);
@@ -4061,6 +4058,31 @@ var makeStyles = (_a = tssReact.createMakeAndWithStyles({
     //"useTheme": useTheme as (()=> MyTheme)
 }), _a.makeStyles), withStyles = _a.withStyles;
 
+var StyledAppBar = withStyles(AppBar$1, {
+    root: {
+        backgroundColor: 'transparant',
+    },
+    positionFixed: {
+        left: 'unset',
+        right: 'unset',
+    },
+});
+
+var HideOnScroll = function (_a) {
+    var children = _a.children;
+    // Note that you normally won't need to set the window ref as useScrollTrigger
+    // will default to window.
+    // This is only being set here because the demo is in an iframe.
+    // const trigger = useScrollTrigger({ target: window ? window() : undefined });
+    var trigger = useScrollTrigger();
+    return (React.createElement(Slide, { appear: false, direction: "down", in: !trigger }, children));
+};
+var AppBar = function (props) { return (React.createElement(React.Fragment, null,
+    React.createElement(HideOnScroll, __assign({}, props),
+        React.createElement(StyledAppBar, { color: "inherit", elevation: 0 },
+            React.createElement(Toolbar, null, props.children))),
+    React.createElement(Toolbar, null))); };
+
 var useStyles$i = makeStyles()(function (_a) {
     var palette = _a.palette;
     return ({
@@ -4369,7 +4391,7 @@ var DropdownMenu = function (_a) {
 };
 
 var useFooterStyles = makeStyles()(function (theme) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     return ({
         footer: (_a = {
                 bottom: 0,
@@ -4379,48 +4401,74 @@ var useFooterStyles = makeStyles()(function (theme) {
                 alignItems: 'center',
                 backgroundColor: theme.palette.primary.main
             },
-            _a[theme.breakpoints.down('lg')] = {
+            _a[theme.breakpoints.down('md')] = {
                 minHeight: 'unset',
             },
             _a[theme.breakpoints.up('md')] = {
-                minHeight: 50,
+                minHeight: '100px',
             },
+            _a.fontFamily = 'Montserrat',
+            _a.fontWeight = 600,
+            _a.fontSize = '14px',
             _a),
-        list: (_b = {
+        content: (_b = {
+                padding: '0 40px 0 40px',
                 display: 'flex',
-                justifyContent: 'center'
+                width: '100%'
             },
-            _b[theme.breakpoints.down('lg')] = {
+            _b[theme.breakpoints.down('md')] = {
                 flexDirection: 'column',
+                a: {
+                    width: '150px',
+                    margin: '40px auto 40px auto',
+                },
             },
-            _b[theme.breakpoints.up('md')] = {
+            _b[theme.breakpoints.up('md')] = { flexDirection: 'row' },
+            _b),
+        serviceNameText: (_c = {
+                color: Colors.white,
+                textAlign: 'center',
+                display: 'block'
+            },
+            _c[theme.breakpoints.down('md')] = {
+                marginBottom: '30px',
+            },
+            _c),
+        list: (_d = {
+                display: 'flex',
                 flexDirection: 'row',
+                justifyContent: 'center'
             },
-            _b),
-        item: (_c = {
+            _d[theme.breakpoints.down('md')] = {
+                marginBottom: '40px',
+                flexWrap: 'wrap',
+            },
+            _d),
+        item: (_e = {
                 color: Colors.white,
                 width: 'fit-content',
-                height: '10px'
+                margin: '0',
+                height: '10px',
+                gap: '10px',
+                borderRight: "1px solid ".concat(theme.palette.divider)
             },
-            _c[theme.breakpoints.down('lg')] = {
-                margin: '0 auto',
+            _e[theme.breakpoints.down('md')] = {
                 textAlign: 'center',
-                height: 'min-content',
-            },
-            _c[theme.breakpoints.up('md')] = {
-                margin: '0',
-                borderRight: '1px solid',
-                height: '0',
+                width: 'filter-content',
             },
-            _c['&:last-child'] = {
+            _e['&:last-child'] = {
                 border: '0 !important',
             },
-            _c),
+            _e),
         itemText: {
             padding: 0,
             margin: '0 auto',
+            fontFamily: 'Montserrat',
+            fontWeight: 400,
+            fontSize: '14px',
         },
         itemBtn: {
+            textDecoration: 'underline',
             '&:hover': {
                 backgroundColor: 'unset',
             },
@@ -4429,18 +4477,24 @@ var useFooterStyles = makeStyles()(function (theme) {
 });
 
 var Footer = function (_a) {
-    var items = _a.items;
+    var items = _a.items, serviceNameText = _a.serviceNameText, udirLink = _a.udirLink, udirLogo = _a.udirLogo;
     var classes = useFooterStyles().classes;
-    var renderItem = function (text) { return (React__default.createElement(ListItemText, { className: classes.itemText, primary: text, primaryTypographyProps: { style: { fontSize: 14 } } })); };
-    return (React__default.createElement("div", { className: classes.footer },
-        React__default.createElement(Container, null,
-            React__default.createElement(List, { className: classes.list }, items.map(function (_a, i) {
-                var label = _a.label, render = _a.render, onClickItem = _a.onClickItem;
-                return (React__default.createElement(ListItem, { key: i, classes: {
-                        root: classes.item,
-                        button: onClickItem ? classes.itemBtn : undefined,
-                    }, onClick: onClickItem, button: !!onClickItem }, render ? render(function () { return renderItem(label); }) : renderItem(label)));
-            })))));
+    var renderItem = function (text) { return (React__default.createElement(ListItemText, { className: classes.itemText, primary: text, primaryTypographyProps: {
+            style: { fontSize: 14, fontFamily: 'Montserrat', fontWeight: 400 },
+        } })); };
+    return (React__default.createElement(Box, { className: classes.footer },
+        React__default.createElement(Box, { className: classes.content },
+            React__default.createElement("a", { href: udirLink },
+                React__default.createElement("img", { src: udirLogo, alt: "Utdanningsdirektoratet logo", style: { height: '43px', width: '150px' } })),
+            React__default.createElement(Container, null,
+                React__default.createElement("span", { className: classes.serviceNameText }, serviceNameText),
+                React__default.createElement(List, { className: classes.list }, items.map(function (_a, i) {
+                    var label = _a.label, render = _a.render, onClickItem = _a.onClickItem;
+                    return (React__default.createElement(ListItem, { key: i, classes: {
+                            root: classes.item,
+                            button: onClickItem ? classes.itemBtn : undefined,
+                        }, onClick: onClickItem, button: !!onClickItem }, render ? render(function () { return renderItem(label); }) : renderItem(label)));
+                }))))));
 };
 
 var LinkList = function (props) { return (React.createElement(Box, { width: "100%", flexDirection: "column" },
@@ -21710,355 +21764,6 @@ var GrepEditor = function (_a) {
         React__default.createElement(EditorComponent, __assign({}, props))));
 };
 
-var dimensions = {
-    breadcrumbsFontSize: 16,
-    contentWidth: 1028,
-    footerHeight: 50,
-    inputBoxHeight: 61,
-    toolbarHeight: 80,
-    toolbarHeightMobile: 40,
-    toolbarWidth: 1260,
-    toolbarMenuWidth: 1028,
-    toolbarMenuHeight: 50,
-};
-var ToolbarTitle = styled(NavLink)(function () { return ({
-    display: 'flex',
-    fontSize: '24px',
-    color: '#303030',
-    fontFamily: 'Montserrat',
-    fontWeight: 500,
-    textDecoration: 'none',
-    ':hover': {
-        textDecoration: 'none',
-    },
-}); });
-var EnvironmentTitle = styled('div')(function () { return ({
-    color: 'rgba(0, 0, 0, 0.33)',
-    marginLeft: '17px',
-}); });
-var Toolbar = styled('div')(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            display: 'flex',
-            flexDirection: 'column'
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
-            minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
-            maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
-            minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
-            maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
-        },
-        _b);
-});
-var ToolbarFixer = styled('div')(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            display: 'flex',
-            flexDirection: 'column',
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            zIndex: 101
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
-            minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
-            maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
-            minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
-            maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
-        },
-        _b);
-});
-var ToolbarInner = styled('div')(function (_a) {
-    var _b;
-    var colors = _a.colors, theme = _a.theme;
-    if (!theme) {
-        return {};
-    }
-    return _b = {
-            alignItems: 'center',
-            display: 'flex',
-            margin: '0 auto',
-            width: '100%',
-            padding: 0,
-            backgroundColor: colors.headerBackgroundColor
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            height: "".concat(dimensions.toolbarHeightMobile, "px"),
-            minHeight: "".concat(dimensions.toolbarHeightMobile, "px"),
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            padding: 0,
-            height: "".concat(dimensions.toolbarHeight, "px"),
-            minHeight: "".concat(dimensions.toolbarHeight, "px"),
-        },
-        _b;
-});
-var ToolbarLeft = styled('div')(function () { return ({
-    alignItems: 'center',
-    display: 'flex',
-    marginLeft: '40px',
-}); });
-var ToolbarRight = styled('div')(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            alignItems: 'center',
-            display: 'flex',
-            marginLeft: 'auto',
-            marginRight: '40px'
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            display: 'none',
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            display: 'flex',
-        },
-        _b);
-});
-var UserContainer = styled('div')(function () { return ({
-    display: 'flex',
-    flexDirection: 'column',
-    margin: '0 17px',
-    textAlign: 'left',
-    textTransform: 'none',
-    fontWeight: '400',
-    color: 'rgba(0, 0, 0, 0.87)',
-}); });
-var AccountName = styled('span')(function () { return ({
-    fontSize: '18px',
-    lineHeight: '25px',
-}); });
-var ToolbarMenu = styled('div')(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return _b = {
-            backgroundColor: theme.palette.primary.main,
-            height: "".concat(dimensions.toolbarMenuHeight, "px"),
-            maxHeight: "".concat(dimensions.toolbarMenuHeight, "px"),
-            minHeight: "".concat(dimensions.toolbarMenuHeight, "px"),
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            fontFamily: 'MontSerrat, Helvetica Neue, Helvetica, Arial, sans-serif',
-            boxShadow: '0 3px 5px 0 rgba(0, 0, 0, 0.3)'
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            display: 'none',
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            display: 'flex',
-        },
-        _b;
-});
-var MobileToolbarMenu = styled('div')(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            backgroundColor: theme.palette.primary.main,
-            height: "".concat(dimensions.toolbarMenuHeight, "px"),
-            maxHeight: "".concat(dimensions.toolbarMenuHeight, "px"),
-            minHeight: "".concat(dimensions.toolbarMenuHeight, "px"),
-            width: '100%',
-            flexGrow: 1,
-            alignItems: 'center',
-            fontFamily: 'MontSerrat, Helvetica Neue, Helvetica, Arial, sans-serif',
-            boxShadow: '0 3px 5px 0 rgba(0, 0, 0, 0.3)'
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            display: 'flex',
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            display: 'none',
-        },
-        _b);
-});
-var ToolbarMenuInner = styled('div')(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            display: 'flex',
-            height: 'fit-content',
-            maxWidth: "".concat(dimensions.toolbarMenuWidth, "px"),
-            margin: '0 auto',
-            width: '100%'
-        },
-        _b[theme.breakpoints.down('lg')] = {
-            padding: '0 24px',
-        },
-        _b[theme.breakpoints.up('lg')] = {
-            padding: 0,
-        },
-        _b);
-});
-var menuItemHoverGreen = '#B9E1CC';
-var ToolbarMenuItem = styled(NavLink)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        alignItems: 'center',
-        borderRight: '1px solid #696868',
-        color: theme.palette.background.default,
-        cursor: 'pointer',
-        display: 'flex',
-        fontSize: '1.1rem',
-        padding: '0 17px',
-        height: '100%',
-        textTransform: 'capitalize',
-        userSelect: 'none',
-        position: 'relative',
-        textDecoration: 'none',
-        ':first-child': {
-            paddingLeft: 0,
-            ':after': {
-                marginLeft: '-24px',
-            },
-        },
-        ':last-child': {
-            borderRight: 'none',
-        },
-        ':after': {
-            position: 'absolute',
-            bottom: 0,
-            left: '50%',
-            width: '32px',
-            marginLeft: '-16px',
-            borderBottom: "2px solid ".concat(theme.palette.secondary.main),
-            opacity: 0,
-            content: '""',
-            transition: 'all 0.3s ease',
-            pointerEvents: 'none',
-        },
-        ':focus': {
-            outline: 'none',
-        },
-        ':hover': {
-            textDecoration: 'none',
-            color: menuItemHoverGreen,
-        },
-        '.active:after, :hover:after, focus:after': {
-            bottom: '-4px',
-            opacity: '1',
-        },
-    });
-});
-var MobileToolbarMenuItem = styled(NavLink)(function () { return ({
-    alignItems: 'center',
-    color: 'black',
-    cursor: 'pointer',
-    display: 'flex',
-    height: '100%',
-    textTransform: 'capitalize',
-    userSelect: 'none',
-    position: 'relative',
-    textDecoration: 'none',
-}); });
-
-var MobileAppBar = function (_a) {
-    var userMenuItems = _a.userMenuItems, menuItems = _a.menuItems;
-    var _b = __read(React.useState(null), 2), anchorElNav = _b[0], setAnchorElNav = _b[1];
-    var openNav = Boolean(anchorElNav);
-    var handleClickNav = function (event) {
-        setAnchorElNav(event.currentTarget);
-    };
-    var handleCloseNav = function () {
-        setAnchorElNav(null);
-    };
-    var _c = __read(React.useState(null), 2), anchorElMenu = _c[0], setAnchorElMenu = _c[1];
-    var openMenu = Boolean(anchorElMenu);
-    var handleClickMenu = function (event) {
-        setAnchorElMenu(event.currentTarget);
-    };
-    var handleCloseMenu = function () {
-        setAnchorElMenu(null);
-    };
-    return (React.createElement(MobileToolbarMenu, { style: { flexGrow: 1 } },
-        React.createElement(AppBar$1, { position: "static" },
-            React.createElement(Toolbar$1, { style: { minHeight: '50px' } },
-                React.createElement(IconButton, { size: "medium", edge: "start", color: "inherit", "aria-label": "menu", style: { marginRight: 2 }, onClick: handleClickNav },
-                    React.createElement(Menu$1, { sx: { color: 'white' } })),
-                React.createElement(Menu, { id: "basic-menu", anchorEl: anchorElNav, open: openNav, onClose: handleCloseNav, MenuListProps: {
-                        'aria-labelledby': 'basic-button',
-                    } }, menuItems.map(function (page) { return (React.createElement(MobileToolbarMenuItem, { key: page.name, to: page.redirectUrl || '' },
-                    React.createElement(MenuItem, { sx: {
-                            width: '100%',
-                        }, key: page.name }, page.translatedTextRef))); })),
-                React.createElement(IconButton, { size: "medium", edge: "end", color: "inherit", "aria-label": "menu", style: { marginLeft: 'auto' }, onClick: handleClickMenu },
-                    React.createElement(MoreVert, { sx: { color: 'white' } })),
-                React.createElement(Menu, { id: "basic-menu", anchorEl: anchorElMenu, open: openMenu, onClose: handleCloseMenu, MenuListProps: {
-                        'aria-labelledby': 'basic-button',
-                    } }, userMenuItems.map(function (i, index) { return (React.createElement(Box, { key: i.id },
-                    React.createElement(MenuItem, { key: i.id, onClick: function () {
-                            handleCloseMenu();
-                            i.action && i.action();
-                        } }, i.isAnchor ? (React.createElement("a", { style: {
-                            textDecoration: 'inherit',
-                            color: 'inherit',
-                        }, rel: "noreferrer", href: i.href }, i.label)) : (i.label)),
-                    userMenuItems.length > index + 1 && React.createElement(Divider, null))); }))))));
-};
-
-var AppBar = function (_a) {
-    var username = _a.username, currentPath = _a.currentPath, isProd = _a.isProd, appTitle = _a.appTitle, userMenuItems = _a.userMenuItems, menuItems = _a.menuItems, userRole = _a.userRole, colors = _a.colors;
-    var _b = __read(React.useState(null), 2), userMenuAnchor = _b[0], setUserMenuAnchor = _b[1];
-    var _handleIconButtonClick = function (event) {
-        event.preventDefault();
-        setUserMenuAnchor(event.currentTarget);
-    };
-    var _handleCloseUserMenu = function () {
-        setUserMenuAnchor(null);
-    };
-    var _renderToolbarMenuItem = function (page) {
-        var isActive = (page === null || page === void 0 ? void 0 : page.exact)
-            ? currentPath === page.redirectUrl
-            : currentPath.includes(page.redirectUrl || '');
-        return (React.createElement(ToolbarMenuItem, { className: isActive ? 'active' : '', to: page.redirectUrl || '', key: page.name, tabIndex: 0 }, page === null || page === void 0 ? void 0 : page.translatedTextRef));
-    };
-    return (React.createElement(Toolbar, null,
-        React.createElement(ToolbarFixer, null,
-            React.createElement(ToolbarInner, { colors: colors },
-                React.createElement(ToolbarLeft, null,
-                    React.createElement(ToolbarTitle, { to: '/' },
-                        appTitle,
-                        !isProd && (React.createElement(EnvironmentTitle, null, process.env.REACT_APP_HOST)))),
-                React.createElement(ToolbarRight, null,
-                    React.createElement(Button$1, { onClick: _handleIconButtonClick },
-                        React.createElement(AccountCircle, { color: "primary", fontSize: "large" }),
-                        React.createElement(UserContainer, null,
-                            React.createElement(AccountName, null, username),
-                            userRole && (React.createElement(Box, { sx: { fontSize: '14px', lineHeight: '20px' } }, userRole))),
-                        React.createElement(ArrowDropdown, { color: "primary" })),
-                    React.createElement(Menu$2, { open: Boolean(userMenuAnchor), anchorEl: userMenuAnchor, onClose: _handleCloseUserMenu, anchorOrigin: {
-                            vertical: 'bottom',
-                            horizontal: 'center',
-                        }, transformOrigin: {
-                            vertical: 'top',
-                            horizontal: 'center',
-                        } }, userMenuItems.map(function (i, index) {
-                        return (React.createElement(Box, { key: i.id },
-                            React.createElement(MenuItem$1, { key: i.id, onClick: function () {
-                                    setUserMenuAnchor(null);
-                                    i.action && i.action();
-                                } }, i.isAnchor ? (React.createElement("a", { style: {
-                                    textDecoration: 'inherit',
-                                    color: 'inherit',
-                                }, rel: "noreferrer", href: i.href }, i.label)) : (i.label)),
-                            userMenuItems.length > index + 1 && React.createElement(Divider$1, null)));
-                    })))),
-            React.createElement(ToolbarMenu, null,
-                React.createElement(ToolbarMenuInner, null, menuItems.map(function (page) { return _renderToolbarMenuItem(page); }))),
-            React.createElement(MobileAppBar, { menuItems: menuItems, userMenuItems: userMenuItems, colors: colors }))));
-};
-
 var NavGuard = function (_a) {
     var when = _a.when, title = _a.title, txt = _a.txt, txtSave = _a.txtSave, txtCancel = _a.txtCancel, txtDiscard = _a.txtDiscard, onSave = _a.onSave, onCancel = _a.onCancel, onDiscard = _a.onDiscard;
     var _b = __read(React.useState(false), 2), open = _b[0], setOpen = _b[1];
@@ -22954,5 +22659,7 @@ var GrepTableOfContent = function (_a) {
 };
 GrepTableOfContent.displayName = 'Grep.ToC';
 
-export { AppBar, AppBarNavList, AppBarProfile, BodyLayout, CircularLoading, Colors, ConfirmationServiceProvider, ContainedLinkList, DatePicker, DropdownMenu, EditorContext, Footer, GDPR, GrepCrumbs, DatePicker as GrepDatePicker, GrepDateRange, GrepDialogServiceProvider, GrepEditor, GrepInput, GrepSelect, GrepTable, GrepTableCard, GrepTableOfContent, GrepTableRow, GreyCover, InfoContainer, LinkList, LoadingOverlay, MainLayout, NavGuard, OverflowTooltip, ProfileInfo, SearchBar, ServiceMessage, Sidebar, SortableTable, UpdateStyle, index as Utils, convert2html, convert2txt, convertToRgba, createState, filterElements as filterContentElements, hex2rgb, hex2rgba, makeStyles, parseContent, parseContentState, useConfirmation, useContentElements, useDate, useDebounce, useGrepDialog, useStyles$d as useStyles, withStyles };
+var utdanningsdirektoratetLogoRgbNeg = "41017f048e09b7d9.png";
+
+export { AppBar, AppBarNavList, AppBarProfile, BodyLayout, CircularLoading, Colors, ConfirmationServiceProvider, ContainedLinkList, DatePicker, DropdownMenu, EditorContext, Footer, GDPR, GrepCrumbs, DatePicker as GrepDatePicker, GrepDateRange, GrepDialogServiceProvider, GrepEditor, GrepInput, GrepSelect, GrepTable, GrepTableCard, GrepTableOfContent, GrepTableRow, GreyCover, InfoContainer, LinkList, LoadingOverlay, MainLayout, NavGuard, OverflowTooltip, ProfileInfo, SearchBar, ServiceMessage, Sidebar, SortableTable, utdanningsdirektoratetLogoRgbNeg as UdirLogo, UpdateStyle, index as Utils, convert2html, convert2txt, convertToRgba, createState, filterElements as filterContentElements, hex2rgb, hex2rgba, makeStyles, parseContent, parseContentState, useConfirmation, useContentElements, useDate, useDebounce, useGrepDialog, useStyles$d as useStyles, withStyles };
 //# sourceMappingURL=index.js.map