grep-components 1.27.0-GREPF-2104.2 → 1.27.0

package/dist/index.js

@@ -47,26 +47,19 @@ import Link$1 from '@mui/material/Link';
 dayjs.extend(isBetweenPlugin);
 dayjs.extend(LocalizedFormatPlugin);
 dayjs.locale('nb');
-var DateRangeValue = /** @class */ (function () {
-    function DateRangeValue(from, to) {
+class DateRangeValue {
+    constructor(from, to) {
         this.from = from;
         this.to = to;
     }
-    Object.defineProperty(DateRangeValue.prototype, "valid", {
-        get: function () {
-            return this.isValid();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    DateRangeValue.prototype.isValid = function (allowNull, allowSame, unit) {
-        if (allowNull === void 0) { allowNull = true; }
-        if (allowSame === void 0) { allowSame = true; }
-        if (unit === void 0) { unit = 'day'; }
+    get valid() {
+        return this.isValid();
+    }
+    isValid(allowNull = true, allowSame = true, unit = 'day') {
         if (!this.from && !this.to)
             return allowNull;
-        var dateFrom = dayjs(this.from || undefined);
-        var dateTo = dayjs(this.to || undefined);
+        const dateFrom = dayjs(this.from || undefined);
+        const dateTo = dayjs(this.to || undefined);
         if (!this.from)
             return allowNull && dateTo.isValid();
         if (!this.to)
@@ -77,17 +70,13 @@ var DateRangeValue = /** @class */ (function () {
                 : dateTo.isAfter(dateFrom, unit);
         }
         return false;
-    };
-    DateRangeValue.prototype.compare = function (_a, unit) {
-        var from = _a.from, to = _a.to;
-        if (unit === void 0) { unit = 'day'; }
+    }
+    compare({ from, to }, unit = 'day') {
         return (dayjs(this.from || '').isSame(dayjs(from || ''), unit) &&
             dayjs(this.to || '').isSame(dayjs(to || ''), unit));
-    };
-    return DateRangeValue;
-}());
-var parseDate = function (datetime, _a) {
-    var _b = _a === void 0 ? { utc: true } : _a, format = _b.format, utc = _b.utc;
+    }
+}
+const parseDate = (datetime, { format, utc } = { utc: true }) => {
     datetime =
         typeof datetime === 'string'
             ? datetime
@@ -96,34 +85,28 @@ var parseDate = function (datetime, _a) {
                 .replace(/(^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3})(\d*)$/, '$1')
             : datetime;
     // dirty hack to not provide utc flag
-    var parsed = dayjs(datetime, { utc: utc, format: format });
+    const parsed = dayjs(datetime, { utc, format });
     return parsed.isValid() ? dayjs(parsed.toISOString()) : parsed;
 };
-var hasDateChanged = function (a, b) {
+const hasDateChanged = (a, b) => {
     if (a === null || b === null) {
         return a !== b;
     }
     return dayjs(a).format('L') !== dayjs(b).format('L');
 };
-var isDateValid = function (date, allowNull) {
-    return !date ? !!allowNull : dayjs(date).isValid();
-};
-var isSameOrBefore = function (point, match, unit) {
-    if (unit === void 0) { unit = 'day'; }
-    var date = dayjs(point);
+const isDateValid = (date, allowNull) => !date ? !!allowNull : dayjs(date).isValid();
+const isSameOrBefore = (point, match, unit = 'day') => {
+    const date = dayjs(point);
     return ((date.isValid() && date.isSame(match, unit)) || date.isBefore(match, unit));
 };
-var isSameOrAfter = function (point, match, unit) {
-    if (unit === void 0) { unit = 'day'; }
-    var date = dayjs(point);
+const isSameOrAfter = (point, match, unit = 'day') => {
+    const date = dayjs(point);
     return ((date.isValid() && date.isSame(match, unit)) || date.isAfter(match, unit));
 };
-var getShortDate = function (datetime, options) { return parseDate(datetime, options).format('L'); };
-var getTime = function (datetime, options) {
-    return parseDate(datetime, options).format('[kl.] LT');
-};
-var getFullDate = function (datetime, options) { return parseDate(datetime, options).format('LLL'); };
-var getExcelDateTime = function (datetime, options) { return parseDate(datetime, options).format('L HH:mm'); };
+const getShortDate = (datetime, options) => parseDate(datetime, options).format('L');
+const getTime = (datetime, options) => parseDate(datetime, options).format('[kl.] LT');
+const getFullDate = (datetime, options) => parseDate(datetime, options).format('LLL');
+const getExcelDateTime = (datetime, options) => parseDate(datetime, options).format('L HH:mm');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -249,16 +232,16 @@ var Key_enum = {};
 	})(exports.Key || (exports.Key = {}));
 } (Key_enum));
 
-var onActivation = function (cb) { return function (ev) {
+const onActivation = (cb) => (ev) => {
     switch (ev.which) {
         case Key_enum.Key.Space:
         case Key_enum.Key.Enter:
             cb(ev);
             break;
     }
-}; };
+};
 var keyboard = {
-    onActivation: onActivation,
+    onActivation,
 };
 
 var index = /*#__PURE__*/Object.freeze({
@@ -277,7 +260,7 @@ var index = /*#__PURE__*/Object.freeze({
   DateTime: dayjs
 });
 
-var Colors = {
+const Colors = {
     red: red[500],
     pink: pink[500],
     purple: purple[500],
@@ -304,111 +287,30 @@ var Colors = {
     white: '#fff',
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise */
-
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-    if (typeof b !== "function" && b !== null)
-        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest$1(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __read(o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-}
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-var hexPattern = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
-var hexPatternShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-var convertHex2rgb = function (hex) {
-    var match = hex
-        .replace(hexPatternShorthand, function (_m, r, g, b) { return r + r + g + g + b + b; })
+const hexPattern = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
+const hexPatternShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+const convertHex2rgb = (hex) => {
+    const match = hex
+        .replace(hexPatternShorthand, (_m, r, g, b) => r + r + g + g + b + b)
         .match(hexPattern);
     match && match.shift();
-    return match ? match.map(function (i) { return parseInt(i, 16); }) : [];
+    return match ? match.map((i) => parseInt(i, 16)) : [];
 };
-var hex2rgb = function (hex) {
-    var rgb = convertHex2rgb(hex);
-    return rgb && "rgb(".concat(rgb.join(','), ")");
+const hex2rgb = (hex) => {
+    const rgb = convertHex2rgb(hex);
+    return rgb && `rgb(${rgb.join(',')})`;
 };
-var hex2rgba = function (hex, alpha) {
-    var rgb = convertHex2rgb(hex);
+const hex2rgba = (hex, alpha) => {
+    const rgb = convertHex2rgb(hex);
     rgb && rgb.push(alpha);
-    return rgb && "rgba(".concat(rgb.join(','), ")");
+    return rgb && `rgba(${rgb.join(',')})`;
 };
-var convertToRgba = function (color, alpha) {
+const convertToRgba = (color, alpha) => {
     if (color.match(/^#/)) {
         return hex2rgba(color, alpha);
     }
-    var _a = __read(color.match(/[(](.*)[)]/) || [], 2), value = _a[1];
-    return value ? "rgba(".concat(value, ", ").concat(alpha, ")") : color;
+    const [, value] = color.match(/[(](.*)[)]/) || [];
+    return value ? `rgba(${value}, ${alpha})` : color;
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -2959,33 +2861,29 @@ function createMakeAndWithStyles(params) {
     return Object.assign(Object.assign({}, createMakeStyles(params)), createWithStyles(params));
 }
 
-var _a;
-var makeStyles = (_a = createMakeAndWithStyles({
-    useTheme: useTheme,
+const { makeStyles, withStyles } = createMakeAndWithStyles({
+    useTheme,
     /*
       OR, if you have extended the default mui theme adding your own custom properties:
       Let's assume the myTheme object that you provide to the <ThemeProvider /> is of
       type MyTheme then you'll write:
       */
     //"useTheme": useTheme as (()=> MyTheme)
-}), _a.makeStyles), withStyles = _a.withStyles;
-
-var useStyles$i = makeStyles()(function (_a) {
-    var palette = _a.palette;
-    return ({
-        user: {
-            color: palette.text.primary,
-            margin: '0 10px',
-            marginLeft: 20,
-            height: 'fit-content',
-            textAlign: 'left',
-            textTransform: 'none',
-        },
-    });
 });
 
-var AppBarProfile = function (props) {
-    var classes = useStyles$i().classes;
+const useStyles$i = makeStyles()(({ palette }) => ({
+    user: {
+        color: palette.text.primary,
+        margin: '0 10px',
+        marginLeft: 20,
+        height: 'fit-content',
+        textAlign: 'left',
+        textTransform: 'none',
+    },
+}));
+
+const AppBarProfile = (props) => {
+    const { classes } = useStyles$i();
     return (React.createElement(Button, { variant: "text", onClick: props.onButtonClick },
         React.createElement(AccountCircle, { color: "primary", fontSize: "large" }),
         React.createElement(Box, { className: classes.user },
@@ -2994,87 +2892,76 @@ var AppBarProfile = function (props) {
         React.createElement(ArrowDropdown, { color: "primary" })));
 };
 
-var useStyles$h = makeStyles()(function (theme) {
-    var _a, _b;
-    return ({
-        tabs: (_a = {
-                margin: 'auto 0'
-            },
-            _a[theme.breakpoints.down('xl')] = {
-                display: 'none',
-            },
-            _a[theme.breakpoints.up('lg')] = {
-                display: 'grid',
-            },
-            _a),
-        tab: (_b = {
-                textTransform: 'uppercase',
-                color: theme.palette.primary.main,
-                fontWeight: theme.typography.fontWeightBold,
-                fontSize: theme.typography.subtitle1.fontSize,
-                marginRight: theme.spacing(1),
-                '&:focus': {
-                    opacity: 1,
-                }
-            },
-            _b[theme.breakpoints.down('lg')] = {
-                minWidth: 120,
-                marginRight: 0,
-            },
-            _b[theme.breakpoints.up('lg')] = {
-                minWidth: 160,
-                padding: '12px',
-            },
-            _b[theme.breakpoints.up('lg')] = {
-                minWidth: 160,
-                padding: '12px',
-            },
-            _b[theme.breakpoints.up('lg')] = {
-                minWidth: 160,
-                padding: '12px',
-            },
-            _b),
-        indicator: {
+const useStyles$h = makeStyles()((theme) => ({
+    tabs: {
+        margin: 'auto 0',
+        [theme.breakpoints.down('xl')]: {
+            display: 'none',
+        },
+        [theme.breakpoints.up('lg')]: {
+            display: 'grid',
+        },
+    },
+    tab: {
+        textTransform: 'uppercase',
+        color: theme.palette.primary.main,
+        fontWeight: theme.typography.fontWeightBold,
+        fontSize: theme.typography.subtitle1.fontSize,
+        marginRight: theme.spacing(1),
+        '&:focus': {
+            opacity: 1,
+        },
+        [theme.breakpoints.down('lg')]: {
+            minWidth: 120,
+            marginRight: 0,
+        },
+        [theme.breakpoints.up('lg')]: {
+            minWidth: 160,
+            padding: '12px',
+        },
+        [theme.breakpoints.up('lg')]: {
+            minWidth: 160,
+            padding: '12px',
+        },
+        [theme.breakpoints.up('lg')]: {
+            minWidth: 160,
+            padding: '12px',
+        },
+    },
+    indicator: {
+        display: 'flex',
+        justifyContent: 'center',
+        backgroundColor: 'transparent',
+        '& > div': {
+            maxWidth: 40,
+            width: '100%',
+            backgroundColor: theme.palette.secondary.main,
+        },
+    },
+}));
+const useMobileStyles = makeStyles()(({ palette, breakpoints }) => ({
+    mobileNavList: {
+        backgroundColor: `transparent`,
+        color: palette.primary.main,
+        fontFamily: 'MontSerrat, Helvetica Neue, Helvetica, Arial, sans-serif',
+        [breakpoints.down('lg')]: {
             display: 'flex',
-            justifyContent: 'center',
-            backgroundColor: 'transparent',
-            '& > div': {
-                maxWidth: 40,
-                width: '100%',
-                backgroundColor: theme.palette.secondary.main,
-            },
         },
-    });
-});
-var useMobileStyles = makeStyles()(function (_a) {
-    var _b;
-    var palette = _a.palette, breakpoints = _a.breakpoints;
-    return ({
-        mobileNavList: (_b = {
-                backgroundColor: "transparent",
-                color: palette.primary.main,
-                fontFamily: 'MontSerrat, Helvetica Neue, Helvetica, Arial, sans-serif'
-            },
-            _b[breakpoints.down('lg')] = {
-                display: 'flex',
-            },
-            _b[breakpoints.up('lg')] = {
-                display: 'none',
-            },
-            _b),
-    });
-});
-
-var MobileAppBarNavList = function (_a) {
-    var pages = _a.pages;
-    var classes = useMobileStyles().classes;
-    var history = useHistory();
-    var _b = __read(React.useState(null), 2), anchorElNav = _b[0], setAnchorElNav = _b[1];
-    var openNav = Boolean(anchorElNav);
-    var handleClickNav = function (event) {
+        [breakpoints.up('lg')]: {
+            display: 'none',
+        },
+    },
+}));
+
+const MobileAppBarNavList = ({ pages, }) => {
+    const { classes } = useMobileStyles();
+    const history = useHistory();
+    const [anchorElNav, setAnchorElNav] = React.useState(null);
+    const openNav = Boolean(anchorElNav);
+    const handleClickNav = (event) => {
         setAnchorElNav(event.currentTarget);
     };
-    var handleCloseNav = function () {
+    const handleCloseNav = () => {
         setAnchorElNav(null);
     };
     return (React.createElement(Box, { style: { flexGrow: 1 }, className: classes.mobileNavList },
@@ -3082,34 +2969,30 @@ var MobileAppBarNavList = function (_a) {
             React.createElement(MenuIcon, { fontSize: "large" })),
         React.createElement(Menu, { id: "basic-menu", anchorEl: anchorElNav, open: openNav, onClose: handleCloseNav, MenuListProps: {
                 'aria-labelledby': 'basic-button',
-            } }, pages.map(function (page) { return (React.createElement(MenuItem, { key: page.id, onClick: function () {
+            } }, pages.map((page) => (React.createElement(MenuItem, { key: page.id, onClick: () => {
                 handleCloseNav();
-                history.push((page === null || page === void 0 ? void 0 : page.toUrl) || '');
-            }, onKeyDown: keyboard.onActivation(function () {
-                return history.push((page === null || page === void 0 ? void 0 : page.toUrl) || '');
-            }) }, page.label)); }))));
+                history.push(page?.toUrl || '');
+            }, onKeyDown: keyboard.onActivation(() => history.push(page?.toUrl || '')) }, page.label))))));
 };
 
-var AppBarNavList = function (_a) {
-    var selectedPage = _a.selectedPage, pages = _a.pages, onChange = _a.onChange;
-    var _b = __read(React.useState(selectedPage), 2), value = _b[0], setValue = _b[1];
-    var classes = useStyles$h().classes;
-    var handleChange = function (_event, newValue) {
+const AppBarNavList = ({ selectedPage, pages, onChange, }) => {
+    const [value, setValue] = React.useState(selectedPage);
+    const { classes } = useStyles$h();
+    const handleChange = (_event, newValue) => {
         setValue(newValue);
         onChange(newValue);
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { classes: { root: classes.tabs, indicator: classes.indicator }, value: value, onChange: handleChange, TabIndicatorProps: { children: React.createElement("div", null) } }, pages.map(function (page) { return (React.createElement(Tab, { disableTouchRipple: true, className: classes.tab, key: page.id, label: page.label })); })),
+        React.createElement(Tabs, { classes: { root: classes.tabs, indicator: classes.indicator }, value: value, onChange: handleChange, TabIndicatorProps: { children: React.createElement("div", null) } }, pages.map((page) => (React.createElement(Tab, { disableTouchRipple: true, className: classes.tab, key: page.id, label: page.label })))),
         React.createElement(MobileAppBarNavList, { pages: pages })));
 };
 
-var BodyLayout = function (props) { return (React.createElement(Box, { width: "100%", paddingTop: "20px", display: "flex", flexDirection: "row", marginBottom: "20px", justifyContent: "space-between" }, props.children)); };
+const BodyLayout = (props) => (React.createElement(Box, { width: "100%", paddingTop: "20px", display: "flex", flexDirection: "row", marginBottom: "20px", justifyContent: "space-between" }, props.children));
 
-var MainLayout = function (props) { return (React.createElement(Box, { display: "flex", flex: "1", flexDirection: "column" }, props.children)); };
+const MainLayout = (props) => (React.createElement(Box, { display: "flex", flex: "1", flexDirection: "column" }, props.children));
 
-var CollapsableMenu = function (_a) {
-    var children = _a.children, onMenuClose = _a.onMenuClose, collapseProps = __rest$1(_a, ["children", "onMenuClose"]);
-    var onKeyDown = function (e) {
+const CollapsableMenu = ({ children, onMenuClose, ...collapseProps }) => {
+    const onKeyDown = (e) => {
         switch (e.keyCode) {
             case Key_enum.Key.Escape:
                 onMenuClose && onMenuClose();
@@ -3119,37 +3002,33 @@ var CollapsableMenu = function (_a) {
         }
         e.stopPropagation();
     };
-    return (React__default.createElement(Collapse, __assign({ timeout: "auto", unmountOnExit: true, mountOnEnter: true }, collapseProps),
+    return (React__default.createElement(Collapse, { timeout: "auto", unmountOnExit: true, mountOnEnter: true, ...collapseProps },
         React__default.createElement(MenuList, { disablePadding: true, autoFocusItem: true, onKeyDown: onKeyDown }, children)));
 };
 
-var useStyles$g = makeStyles()(function (_a, _b) {
-    var palette = _a.palette, transitions = _a.transitions;
-    var open = _b.open;
-    return ({
-        root: {
-            padding: '0 1rem',
-            transition: transitions.create(['background-color'], {
-                duration: transitions.duration.short,
-                easing: transitions.easing.easeIn,
-            }),
-            '&.Mui-focusVisible': {
-                backgroundColor: convertToRgba(palette.primary.light, 0.15),
-            },
-        },
-        subMenu: {
-            margin: '0 -1rem',
-        },
-        expander: {
-            marginLeft: '2rem',
-            transform: "rotate(".concat(open ? 180 : 0, "deg)"),
-            transition: transitions.create(['transform, color, background-color'], {
-                duration: transitions.duration.short,
-                easing: transitions.easing.easeOut,
-            }),
+const useStyles$g = makeStyles()(({ palette, transitions }, { open }) => ({
+    root: {
+        padding: '0 1rem',
+        transition: transitions.create(['background-color'], {
+            duration: transitions.duration.short,
+            easing: transitions.easing.easeIn,
+        }),
+        '&.Mui-focusVisible': {
+            backgroundColor: convertToRgba(palette.primary.light, 0.15),
         },
-    });
-});
+    },
+    subMenu: {
+        margin: '0 -1rem',
+    },
+    expander: {
+        marginLeft: '2rem',
+        transform: `rotate(${open ? 180 : 0}deg)`,
+        transition: transitions.create(['transform, color, background-color'], {
+            duration: transitions.duration.short,
+            easing: transitions.easing.easeOut,
+        }),
+    },
+}));
 
 /**
  * TypeError: Failed to construct 'CustomEvent': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
@@ -3157,42 +3036,36 @@ var useStyles$g = makeStyles()(function (_a, _b) {
  *
  * export class CollapsableMenuStatusEvent extends CustomEvent<React.Ref<any>> {}
  */
-var CollapsableMenuStatusEvent = /** @class */ (function () {
-    function CollapsableMenuStatusEvent(type, currentTarget) {
+class CollapsableMenuStatusEvent {
+    constructor(type, currentTarget) {
         this.type = type;
         this.currentTarget = currentTarget;
     }
-    Object.defineProperty(CollapsableMenuStatusEvent.prototype, "defaultPrevented", {
-        get: function () {
-            return !!this._defaultPrevented;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    CollapsableMenuStatusEvent.prototype.preventDefault = function () {
+    get defaultPrevented() {
+        return !!this._defaultPrevented;
+    }
+    preventDefault() {
         this._defaultPrevented = true;
-    };
-    return CollapsableMenuStatusEvent;
-}());
-var CollapsableMenuItem = function (_a) {
-    var items = _a.items, onClick = _a.onClick, children = _a.children; _a.onClose; var tooltipText = _a.tooltipText, disabled = _a.disabled, props = __rest$1(_a, ["items", "onClick", "children", "onClose", "tooltipText", "disabled"]);
-    var listItemRef = useRef(null);
-    var _b = __read(useState(false), 2), open = _b[0], setOpen = _b[1];
-    var onStatusChange = useCallback$1(function (type) { return new CollapsableMenuStatusEvent(type, listItemRef); }, [listItemRef]);
-    var expand = useCallback$1(function () {
-        var event = onStatusChange('expand');
+    }
+}
+const CollapsableMenuItem = ({ items, onClick, children, onClose: _onclose, tooltipText, disabled, ...props }) => {
+    const listItemRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const onStatusChange = useCallback$1((type) => new CollapsableMenuStatusEvent(type, listItemRef), [listItemRef]);
+    const expand = useCallback$1(() => {
+        const event = onStatusChange('expand');
         !event.defaultPrevented && setOpen(true);
         return !event.defaultPrevented;
     }, [onStatusChange, setOpen]);
-    var collapse = useCallback$1(function () {
-        var event = onStatusChange('collapse');
+    const collapse = useCallback$1(() => {
+        const event = onStatusChange('collapse');
         if (!event.defaultPrevented) {
             setOpen(false);
-            requestAnimationFrame(function () { var _a; return (_a = listItemRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+            requestAnimationFrame(() => listItemRef.current?.focus());
         }
         return !event.defaultPrevented;
     }, [onStatusChange, setOpen, listItemRef]);
-    var handleKey = function (e) {
+    const handleKey = (e) => {
         if (items) {
             switch (e.keyCode) {
                 case Key_enum.Key.RightArrow:
@@ -3204,204 +3077,181 @@ var CollapsableMenuItem = function (_a) {
             }
         }
     };
-    var onToggleClick = useCallback$1(function (e) {
+    const onToggleClick = useCallback$1((e) => {
         e.preventDefault();
         e.stopPropagation();
         open ? collapse() : expand();
     }, [open, collapse, expand]);
-    var onScrimClick = useCallback$1(function (e) {
-        var _a;
-        var scrimClick = !((_a = listItemRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target));
+    const onScrimClick = useCallback$1((e) => {
+        const scrimClick = !listItemRef.current?.contains(e.target);
         scrimClick && collapse();
     }, [listItemRef, collapse]);
-    var handleClick = items ? onToggleClick : onClick;
-    useEffect(function () {
+    const handleClick = items ? onToggleClick : onClick;
+    useEffect(() => {
         document.addEventListener('click', onScrimClick, { capture: true });
-        return function () { return document.removeEventListener('click', onScrimClick); };
+        return () => document.removeEventListener('click', onScrimClick);
     }, [listItemRef, onScrimClick]);
-    var classes = useStyles$g({ open: open }).classes;
-    var renderInner = function () { return (React__default.createElement(Box, { display: "flex", flexDirection: "column", width: "100%" },
+    const { classes } = useStyles$g({ open });
+    const renderInner = () => (React__default.createElement(Box, { display: "flex", flexDirection: "column", width: "100%" },
         React__default.createElement(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", minHeight: 48 },
             children,
             items && React__default.createElement(IconExpand, { className: classes.expander })),
-        items && (React__default.createElement(CollapsableMenu, { className: classes.subMenu, in: open, onMenuClose: collapse, onEntered: function () {
-                return requestAnimationFrame(function () {
-                    return window.dispatchEvent(new Event('resize'));
-                });
-            } }, items)))); };
+        items && (React__default.createElement(CollapsableMenu, { className: classes.subMenu, in: open, onMenuClose: collapse, onEntered: () => requestAnimationFrame(() => window.dispatchEvent(new Event('resize'))) }, items))));
     return tooltipText ? (React__default.createElement(Tooltip, { title: tooltipText },
         React__default.createElement(MenuItem, { role: "menuitem", sx: disabled && !items
                 ? { cursor: 'not-allowed', pointerEvents: 'inherit !important' }
-                : { pointerEvents: 'inherit !important' }, className: classes.root, onMouseOver: function (e) { return e.currentTarget.focus(); }, selected: open, ref: listItemRef, onClick: handleClick, onKeyDown: handleKey }, renderInner()))) : (React__default.createElement(MenuItem, __assign({ sx: disabled && !items ? { cursor: 'not-allowed' } : {}, className: classes.root, ref: listItemRef, selected: open, onClick: handleClick, onKeyDown: handleKey }, props), renderInner()));
+                : { pointerEvents: 'inherit !important' }, className: classes.root, onMouseOver: (e) => e.currentTarget.focus(), selected: open, ref: listItemRef, onClick: handleClick, onKeyDown: handleKey }, renderInner()))) : (React__default.createElement(MenuItem, { sx: disabled && !items ? { cursor: 'not-allowed' } : {}, className: classes.root, ref: listItemRef, selected: open, onClick: handleClick, onKeyDown: handleKey, ...props }, renderInner()));
 };
 
-var useStyles$f = makeStyles()(function (_a) {
-    var palette = _a.palette;
-    return ({
-        selected: {
-            color: "".concat(palette.common.black, " !important"),
-            backgroundColor: 'rgba(0,0,0,.05) !important',
-        },
-    });
-});
-
-var DropdownMenu = function (_a) {
-    var context = _a.context, menuItems = _a.menuItems, menuProps = __rest$1(_a, ["context", "menuItems"]);
-    var classes = useStyles$f().classes;
-    var renderChild = function (level, parentDisabled) {
-        if (level === void 0) { level = 0; }
-        // eslint-disable-next-line react/display-name
-        return function (item, index) {
-            var _a;
-            var label = item.label, children = item.children, handleClick = item.handleClick, disabled = item.disabled, props = __rest$1(item, ["label", "children", "handleClick", "disabled"]);
-            var itemOrParentDisabled = (_a = (parentDisabled || disabled)) !== null && _a !== void 0 ? _a : false;
-            var isDisabled = typeof itemOrParentDisabled === 'function'
-                ? itemOrParentDisabled(context)
-                : itemOrParentDisabled;
-            var style = isDisabled
-                ? { paddingLeft: "".concat(level * 0.5, "rem"), opacity: 0.4 }
-                : {
-                    paddingLeft: "".concat(level * 0.5, "rem"),
-                };
-            props.key = "child-item-".concat(index);
-            props.classes = { selected: classes.selected };
-            // ninja way, since rewriting existing code on lpu and admin is daunting
-            props.onClick = function (e) {
-                if (isDisabled) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    return;
-                }
-                menuProps.onClose && menuProps.onClose(e, 'backdropClick');
-                !isDisabled && handleClick && handleClick(context);
+const useStyles$f = makeStyles()(({ palette }) => ({
+    selected: {
+        color: `${palette.common.black} !important`,
+        backgroundColor: 'rgba(0,0,0,.05) !important',
+    },
+}));
+
+const DropdownMenu = ({ context, menuItems, ...menuProps }) => {
+    const { classes } = useStyles$f();
+    const renderChild = (level = 0, parentDisabled) => 
+    // eslint-disable-next-line react/display-name
+    (item, index) => {
+        const { label, children, handleClick, disabled, ...props } = item;
+        const itemOrParentDisabled = (parentDisabled || disabled) ?? false;
+        const isDisabled = typeof itemOrParentDisabled === 'function'
+            ? itemOrParentDisabled(context)
+            : itemOrParentDisabled;
+        const style = isDisabled
+            ? { paddingLeft: `${level * 0.5}rem`, opacity: 0.4 }
+            : {
+                paddingLeft: `${level * 0.5}rem`,
             };
-            return (React__default.createElement(CollapsableMenuItem, __assign({ sx: isDisabled && !children ? { cursor: 'not-allowed' } : {}, level: level, id: label, disabled: isDisabled, items: children === null || children === void 0 ? void 0 : children.map(renderChild(level + 1, isDisabled)) }, props),
-                React__default.createElement("span", { style: style }, label)));
+        props.key = `child-item-${index}`;
+        props.classes = { selected: classes.selected };
+        // ninja way, since rewriting existing code on lpu and admin is daunting
+        props.onClick = (e) => {
+            if (isDisabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            menuProps.onClose && menuProps.onClose(e, 'backdropClick');
+            !isDisabled && handleClick && handleClick(context);
         };
+        return (React__default.createElement(CollapsableMenuItem, { sx: isDisabled && !children ? { cursor: 'not-allowed' } : {}, level: level, id: label, disabled: isDisabled, items: children?.map(renderChild(level + 1, isDisabled)), ...props },
+            React__default.createElement("span", { style: style }, label)));
     };
-    return (React__default.createElement(Menu, __assign({}, menuProps, { anchorOrigin: (menuProps === null || menuProps === void 0 ? void 0 : menuProps.anchorOrigin) || {
+    return (React__default.createElement(Menu, { ...menuProps, anchorOrigin: menuProps?.anchorOrigin || {
             vertical: 'bottom',
             horizontal: 'center',
         }, transformOrigin: menuProps.transformOrigin || {
             vertical: 'top',
             horizontal: 'center',
-        } }), menuItems.map(renderChild())));
+        } }, menuItems.map(renderChild())));
 };
 
-var useFooterStyles = makeStyles()(function (theme) {
-    var _a, _b, _c, _d, _e;
-    return ({
-        footer: (_a = {
-                bottom: 0,
-                width: '100%',
-                marginTop: 'auto',
-                display: 'flex',
-                alignItems: 'center',
-                backgroundColor: theme.palette.primary.main
-            },
-            _a[theme.breakpoints.down('md')] = {
-                minHeight: 'unset',
-            },
-            _a[theme.breakpoints.up('md')] = {
-                minHeight: '100px',
-            },
-            _a.fontFamily = 'Montserrat',
-            _a.fontWeight = 600,
-            _a.fontSize = '14px',
-            _a),
-        content: (_b = {
-                display: 'flex',
-                width: '100%',
-                a: {
-                    ':focus': {
-                        outlineColor: 'white',
-                        outlineOffset: '8px',
-                    },
-                }
-            },
-            _b[theme.breakpoints.down('md')] = {
-                flexDirection: 'column',
-                padding: '0',
-                a: {
-                    width: '150px',
-                    margin: '40px auto 40px auto',
-                },
-            },
-            _b[theme.breakpoints.up('md')] = {
-                flexDirection: 'row',
-                padding: '0 12px 0 12px',
-                a: {
-                    marginLeft: '28px',
-                },
-            },
-            _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'
-            },
-            _d[theme.breakpoints.down('md')] = {
-                marginBottom: '40px',
-                flexWrap: 'wrap',
-                height: '64px',
-            },
-            _d),
-        item: (_e = {
-                color: Colors.white,
-                width: 'fit-content',
-                margin: '0',
-                height: '10px',
-                gap: '10px',
-                borderRight: "1px solid #7dbf9d"
-            },
-            _e[theme.breakpoints.down('md')] = {
-                textAlign: 'center',
-                width: 'filter-content',
-            },
-            _e['&:last-child'] = {
-                border: '0 !important',
+const useFooterStyles = makeStyles()((theme) => ({
+    footer: {
+        bottom: 0,
+        width: '100%',
+        marginTop: 'auto',
+        display: 'flex',
+        alignItems: 'center',
+        backgroundColor: theme.palette.primary.main,
+        [theme.breakpoints.down('md')]: {
+            minHeight: 'unset',
+        },
+        [theme.breakpoints.up('md')]: {
+            minHeight: '100px',
+        },
+        fontFamily: 'Montserrat',
+        fontWeight: 600,
+        fontSize: '14px',
+    },
+    content: {
+        display: 'flex',
+        width: '100%',
+        a: {
+            ':focus': {
+                outlineColor: 'white',
+                outlineOffset: '8px',
             },
-            _e[':focus'] = {
-                background: 'inherit',
-                boxShadow: '0px 0px 0px 1px white',
-                borderRadius: '2px',
+        },
+        [theme.breakpoints.down('md')]: {
+            flexDirection: 'column',
+            padding: '0',
+            a: {
+                width: '150px',
+                margin: '40px auto 40px auto',
             },
-            _e),
-        itemText: {
-            padding: 0,
-            margin: '0 auto',
-            fontFamily: 'Montserrat',
-            fontWeight: 400,
-            fontSize: '14px',
-            color: Colors.white,
         },
-        itemBtn: {
-            textDecoration: 'underline',
-            textTransform: 'none',
-            '&:hover': {
-                backgroundColor: 'unset',
+        [theme.breakpoints.up('md')]: {
+            flexDirection: 'row',
+            padding: '0 12px 0 12px',
+            a: {
+                marginLeft: '28px',
             },
         },
-    });
-});
+    },
+    serviceNameText: {
+        color: Colors.white,
+        textAlign: 'center',
+        display: 'block',
+        [theme.breakpoints.down('md')]: {
+            marginBottom: '30px',
+        },
+    },
+    list: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        [theme.breakpoints.down('md')]: {
+            marginBottom: '40px',
+            flexWrap: 'wrap',
+            height: '64px',
+        },
+    },
+    item: {
+        color: Colors.white,
+        width: 'fit-content',
+        margin: '0',
+        height: '10px',
+        gap: '10px',
+        borderRight: `1px solid #7dbf9d`,
+        [theme.breakpoints.down('md')]: {
+            textAlign: 'center',
+            width: 'filter-content',
+        },
+        '&:last-child': {
+            border: '0 !important',
+        },
+        ':focus': {
+            background: 'inherit',
+            boxShadow: '0px 0px 0px 1px white',
+            borderRadius: '2px',
+        },
+    },
+    itemText: {
+        padding: 0,
+        margin: '0 auto',
+        fontFamily: 'Montserrat',
+        fontWeight: 400,
+        fontSize: '14px',
+        color: Colors.white,
+    },
+    itemBtn: {
+        textDecoration: 'underline',
+        textTransform: 'none',
+        '&:hover': {
+            backgroundColor: 'unset',
+        },
+    },
+}));
 
-var Footer = function (_a) {
-    var items = _a.items, serviceNameText = _a.serviceNameText, udirLink = _a.udirLink, udirLogo = _a.udirLogo;
-    var classes = useFooterStyles().classes;
-    var renderItem = function (item) {
-        return item.onClickItem ? (React__default.createElement(Button, { className: classes.itemBtn.concat(' ' + classes.itemText), onClick: item.onClickItem }, item.label)) : (React__default.createElement(ListItemText, { className: classes.itemText, primary: item.label, primaryTypographyProps: {
-                style: { fontSize: 14, fontFamily: 'Montserrat', fontWeight: 400 },
-            } }));
-    };
+const Footer = ({ items, serviceNameText, udirLink, udirLogo, }) => {
+    const { classes } = useFooterStyles();
+    const renderItem = (item) => item.onClickItem ? (React__default.createElement(Button, { className: classes.itemBtn.concat(' ' + classes.itemText), onClick: item.onClickItem }, item.label)) : (React__default.createElement(ListItemText, { className: classes.itemText, primary: item.label, primaryTypographyProps: {
+            style: { fontSize: 14, fontFamily: 'Montserrat', fontWeight: 400 },
+        } }));
     return (React__default.createElement(Box, { className: classes.footer, role: "contentinfo" },
         React__default.createElement(Box, { className: classes.content },
             React__default.createElement("a", { href: udirLink },
@@ -3412,29 +3262,29 @@ var Footer = function (_a) {
                     paddingRight: '16px !important',
                 } },
                 React__default.createElement("span", { className: classes.serviceNameText }, serviceNameText),
-                React__default.createElement(List, { className: classes.list }, items.map(function (item, i) { return (React__default.createElement(ListItem, { key: i, classes: {
+                React__default.createElement(List, { className: classes.list }, items.map((item, i) => (React__default.createElement(ListItem, { key: i, classes: {
                         root: classes.item,
                         //button: onClickItem ? classes.itemBtn : undefined,
                     } }, item.render
-                    ? item.render(function () { return renderItem(item); })
-                    : renderItem(item))); }))))));
+                    ? item.render(() => renderItem(item))
+                    : renderItem(item)))))))));
 };
 
-var LinkList = function (props) { return (React.createElement(Box, { width: "100%", flexDirection: "column" },
+const LinkList = (props) => (React.createElement(Box, { width: "100%", flexDirection: "column" },
     React.createElement(Typography, { style: { fontSize: 24, color: Colors.black, marginBottom: 20 } }, props.title),
-    React.createElement(List, null, props.pages.map(function (page) { return (React.createElement(Box, { key: page.id },
-        React.createElement(ListItem, { button: true, onClick: function () { return props.onPageClick(page); }, style: { padding: '12px 4px' } },
+    React.createElement(List, null, props.pages.map((page) => (React.createElement(Box, { key: page.id },
+        React.createElement(ListItem, { button: true, onClick: () => props.onPageClick(page), style: { padding: '12px 4px' } },
             React.createElement(ListItemText, { primary: page.label, primaryTypographyProps: {
                     color: 'primary',
                     style: { fontSize: 18 },
                 } }),
             React.createElement(ListItemIcon, { style: { justifyContent: 'flex-end' } },
                 React.createElement(ArrowForward, { color: "primary" }))),
-        React.createElement(Divider, null))); })))); };
+        React.createElement(Divider, null)))))));
 
-var useStyles$e = makeStyles()({
+const useStyles$e = makeStyles()({
     container: {
-        border: "1px solid ".concat(Colors.lightGrey),
+        border: `1px solid ${Colors.lightGrey}`,
         height: 'fit-content',
         width: 'fit-content',
     },
@@ -3446,32 +3296,30 @@ var useStyles$e = makeStyles()({
     },
 });
 
-var ContainedLinkList = function (props) {
-    var classes = useStyles$e().classes;
+const ContainedLinkList = (props) => {
+    const { classes } = useStyles$e();
     return (React.createElement(Box, { className: classes.container, style: props.style },
         React.createElement(Typography, { className: classes.title }, props.title),
-        React.createElement(List, { style: { padding: 0 } }, props.pages.map(function (page) { return (React.createElement(ListItem, { divider: true, key: page.id, disablePadding: true },
-            React.createElement(ListItemButton, { onClick: function () { return props.onPageClick(page); } },
+        React.createElement(List, { style: { padding: 0 } }, props.pages.map((page) => (React.createElement(ListItem, { divider: true, key: page.id, disablePadding: true },
+            React.createElement(ListItemButton, { onClick: () => props.onPageClick(page) },
                 page.linkIcon && React.createElement(ListItemIcon$1, null, page.linkIcon),
-                React.createElement(ListItemText, { primary: page.label })))); }))));
+                React.createElement(ListItemText, { primary: page.label }))))))));
 };
 
-var OverflowTooltip = /** @class */ (function (_super) {
-    __extends(OverflowTooltip, _super);
-    function OverflowTooltip(props) {
-        var _this = _super.call(this, props) || this;
-        _this.nodeRef = React.createRef();
-        _this.state = { overflow: false };
-        return _this;
+class OverflowTooltip extends React.Component {
+    constructor(props) {
+        super(props);
+        this.nodeRef = React.createRef();
+        this.state = { overflow: false };
     }
-    OverflowTooltip.prototype.componentDidMount = function () {
-        var element = this.nodeRef.current;
+    componentDidMount() {
+        const element = this.nodeRef.current;
         if (element) {
-            var overflow = element.clientWidth < element.scrollWidth;
-            this.setState({ overflow: overflow });
+            const overflow = element.clientWidth < element.scrollWidth;
+            this.setState({ overflow });
         }
-    };
-    OverflowTooltip.prototype.render = function () {
+    }
+    render() {
         if (this.state.overflow || this.props.force) {
             return (React.createElement(Tooltip, { placement: "left", title: this.props.title || '' },
                 React.createElement("div", { style: { display: 'unset' }, ref: this.nodeRef }, this.props.children)));
@@ -3479,56 +3327,50 @@ var OverflowTooltip = /** @class */ (function (_super) {
         else {
             return React.createElement("div", { ref: this.nodeRef }, this.props.children);
         }
-    };
-    return OverflowTooltip;
-}(React.Component));
+    }
+}
 
-var CellValue = styled('span')({
+const CellValue = styled('span')({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     display: '-webkit-box',
     WebkitBoxOrient: 'vertical',
 });
-var GrepTableRow$1 = function (_a) {
-    var row = _a.row, column = _a.column, expanded = _a.expanded, props = __rest$1(_a, ["row", "column", "expanded"]);
-    var forceTooltip = column.forceTooltip, getTooltip = column.getTooltip, getCell = column.getCell, lang = column.lang, _b = column.lines, lines = _b === void 0 ? function () { return (expanded ? undefined : 1); } : _b;
-    var padding = column.padding;
-    var value = (React__default.createElement(CellValue, { style: { WebkitLineClamp: lines(row) }, lang: typeof lang === 'string' ? lang : lang ? lang(row) : '' }, getCell(row)));
+const GrepTableRow$1 = ({ row, column, expanded, ...props }) => {
+    const { forceTooltip, getTooltip, getCell, lang, lines = () => (expanded ? undefined : 1), } = column;
+    const { padding } = column;
+    const value = (React__default.createElement(CellValue, { style: { WebkitLineClamp: lines(row) }, lang: typeof lang === 'string' ? lang : lang ? lang(row) : '' }, getCell(row)));
     if (forceTooltip || getTooltip) {
-        return (React__default.createElement(TableCell, __assign({ padding: padding }, props),
+        return (React__default.createElement(TableCell, { padding: padding, ...props },
             React__default.createElement(OverflowTooltip, { force: forceTooltip, title: getTooltip ? getTooltip(row) : value }, value)));
     }
-    return (React__default.createElement(TableCell, __assign({ padding: padding }, props), value));
+    return (React__default.createElement(TableCell, { padding: padding, ...props }, value));
 };
 
-var GrepTableRow = function (_a) {
-    var row = _a.row, columns = _a.columns, selected = _a.selected, expanded = _a.expanded, variant = _a.variant; _a.clickable; _a.height; var underlineOnFocus = _a.underlineOnFocus, props = __rest$1(_a, ["row", "columns", "selected", "expanded", "variant", "clickable", "height", "underlineOnFocus"]);
-    var render = function (column, index) { return (React__default.createElement(GrepTableRow$1, __assign({ key: index, expanded: expanded }, { column: column, row: row, variant: variant, selected: selected }))); };
-    return (React__default.createElement(TableRow, __assign({ sx: {
+const GrepTableRow = ({ row, columns, selected, expanded, variant, clickable: _clickable, height: _height, underlineOnFocus, ...props }) => {
+    const render = (column, index) => (React__default.createElement(GrepTableRow$1, { key: index, expanded: expanded, ...{ column, row, variant, selected } }));
+    return (React__default.createElement(TableRow, { sx: {
             ':focus': { textDecoration: underlineOnFocus ? 'underline' : 'none' },
-        }, tabIndex: props.tabIndex }, __assign({ selected: selected }, props)), columns.map(render)));
+        }, tabIndex: props.tabIndex, ...{ selected, ...props } }, columns.map(render)));
 };
 
-var usePaginationActionStyles = makeStyles()(function (_a) {
-    var palette = _a.palette;
-    return ({
-        button: {
-            minWidth: '18px',
-            minHeight: '20px',
-            padding: '0 6px',
-            margin: '0 8px',
-            borderRadius: '2px',
-            fontSize: 12,
-            backgroundColor: palette.primary.main,
-        },
-        textButton: {
-            textTransform: 'capitalize',
-            fontWeight: 'initial',
-            fontSize: 12,
-        },
-    });
-});
-var usePaginationStyles = makeStyles()({
+const usePaginationActionStyles = makeStyles()(({ palette }) => ({
+    button: {
+        minWidth: '18px',
+        minHeight: '20px',
+        padding: '0 6px',
+        margin: '0 8px',
+        borderRadius: '2px',
+        fontSize: 12,
+        backgroundColor: palette.primary.main,
+    },
+    textButton: {
+        textTransform: 'capitalize',
+        fontWeight: 'initial',
+        fontSize: 12,
+    },
+}));
+const usePaginationStyles = makeStyles()({
     toolbar: {
         padding: 0,
         width: '100%',
@@ -3547,42 +3389,39 @@ var usePaginationStyles = makeStyles()({
         display: 'none',
     },
 });
-var useTableHeaderStyles = makeStyles()(function (_theme, _a) {
-    var column = _a.column;
-    var width = column.width
+const useTableHeaderStyles = makeStyles()((_theme, { column }) => {
+    const width = column.width
         ? typeof column.width === 'number'
-            ? "".concat(column.width, "%")
+            ? `${column.width}%`
             : column.width
         : undefined;
     return {
         th: {
-            width: width,
+            width,
             fontSize: 14,
         },
     };
 });
 
-var TableHeaderCell = function (_a) {
-    var column = _a.column, onSortBy = _a.onSortBy, direction = _a.direction, active = _a.active, children = _a.children, _b = _a.empty, empty = _b === void 0 ? false : _b, props = __rest$1(_a, ["column", "onSortBy", "direction", "active", "children", "empty"]);
-    var classes = useTableHeaderStyles({ column: column }).classes;
-    var sortable = !!(onSortBy && column.sortable);
+const TableHeaderCell = ({ column, onSortBy, direction, active, children, empty = false, ...props }) => {
+    const { classes } = useTableHeaderStyles({ column });
+    const sortable = !!(onSortBy && column.sortable);
     if (sortable && !empty) {
-        return (React__default.createElement(TableCell, __assign({ variant: empty ? 'body' : 'head', className: classes.th }, props),
+        return (React__default.createElement(TableCell, { variant: empty ? 'body' : 'head', className: classes.th, ...props },
             React__default.createElement(TableSortLabel, { active: active, direction: direction }, children)));
     }
-    return empty ? (React__default.createElement("td", { className: classes.th }, children)) : (React__default.createElement(TableCell, __assign({ variant: empty ? 'body' : 'head', className: classes.th }, props), children));
+    return empty ? (React__default.createElement("td", { className: classes.th }, children)) : (React__default.createElement(TableCell, { variant: empty ? 'body' : 'head', className: classes.th, ...props }, children));
 };
 
-var TableHeader = function (_a) {
-    var columns = _a.columns, sortBy = _a.sortBy, sortDirection = _a.sortDirection, onSortBy = _a.onSortBy, dropdownItems = _a.dropdownItems, props = __rest$1(_a, ["columns", "sortBy", "sortDirection", "onSortBy", "dropdownItems"]);
-    var headerColumns = dropdownItems
-        ? columns.concat([{ label: '', width: '48px', getCell: function () { return ''; } }])
+const TableHeader = ({ columns, sortBy, sortDirection, onSortBy, dropdownItems, ...props }) => {
+    const headerColumns = dropdownItems
+        ? columns.concat([{ label: '', width: '48px', getCell: () => '' }])
         : columns;
-    return (React__default.createElement(TableHead, __assign({}, props),
-        React__default.createElement(TableRow, null, headerColumns.map(function (column, index) {
-            var sortable = !!(onSortBy && column.sortable);
-            var label = column.label, colDef = column.colDef;
-            return (React__default.createElement(TableHeaderCell, { key: index, empty: !label, column: column, direction: sortDirection, active: sortable ? sortBy === colDef : undefined, onClick: function () { return sortable && onSortBy(column); }, onKeyDown: onActivation(function (e) {
+    return (React__default.createElement(TableHead, { ...props },
+        React__default.createElement(TableRow, null, headerColumns.map((column, index) => {
+            const sortable = !!(onSortBy && column.sortable);
+            const { label, colDef } = column;
+            return (React__default.createElement(TableHeaderCell, { key: index, empty: label === undefined, column: column, direction: sortDirection, active: sortable ? sortBy === colDef : undefined, onClick: () => sortable && onSortBy(column), onKeyDown: onActivation((e) => {
                     if (sortable) {
                         e.preventDefault();
                         onSortBy(column);
@@ -3591,23 +3430,19 @@ var TableHeader = function (_a) {
         }))));
 };
 
-var PaginationActions = function (_a) {
-    var count = _a.count, page = _a.page, rowsPerPage = _a.rowsPerPage, onPageChange = _a.onPageChange;
-    var classes = usePaginationActionStyles().classes;
-    var getPageNumbers = function (count, currentPage, rowsPerPage) {
-        var pageNumbers = [];
-        var pageCount = Math.ceil(count / rowsPerPage);
-        var _loop_1 = function (i) {
+const PaginationActions = ({ count, page, rowsPerPage, onPageChange }) => {
+    const { classes } = usePaginationActionStyles();
+    const getPageNumbers = (count, currentPage, rowsPerPage) => {
+        const pageNumbers = [];
+        const pageCount = Math.ceil(count / rowsPerPage);
+        for (let i = 0; i < pageCount; i++) {
             pageNumbers.push(React.createElement(Button, { key: i, className: classes.button, style: currentPage === i
                     ? {
                         color: 'white',
                     }
                     : {
                         backgroundColor: Colors.white,
-                    }, onClick: function (e) { return onPageChange(e, i); }, disabled: currentPage === i }, i + 1));
-        };
-        for (var i = 0; i < pageCount; i++) {
-            _loop_1(i);
+                    }, onClick: (e) => onPageChange(e, i), disabled: currentPage === i }, i + 1));
         }
         if (currentPage >= 2 && currentPage < pageCount - 2) {
             return pageNumbers.slice(currentPage - 2, currentPage + 3);
@@ -3617,14 +3452,14 @@ var PaginationActions = function (_a) {
             : pageNumbers.slice(pageCount - 5, pageCount);
     };
     return (React.createElement("div", { style: { gridArea: 'right', justifySelf: 'end' } },
-        React.createElement(Button, { className: classes.textButton, onClick: function (e) { return onPageChange(e, page - 1); }, disabled: page === 0, "aria-label": "Previous Page" }, "Forrige"),
+        React.createElement(Button, { className: classes.textButton, onClick: (e) => onPageChange(e, page - 1), disabled: page === 0, "aria-label": "Previous Page" }, "Forrige"),
         getPageNumbers(count, page, rowsPerPage),
-        React.createElement(Button, { className: classes.textButton, onClick: function (e) { return onPageChange(e, page + 1); }, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "Next Page" }, "Neste")));
+        React.createElement(Button, { className: classes.textButton, onClick: (e) => onPageChange(e, page + 1), disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "Next Page" }, "Neste")));
 };
 
-var GrepTablePagination = function (props) {
-    var classes = usePaginationStyles().classes;
-    return (React__default.createElement(TablePagination, __assign({ classes: classes, rowsPerPageOptions: props.rowsPerPageOptions, SelectProps: {
+const GrepTablePagination = (props) => {
+    const { classes } = usePaginationStyles();
+    return (React__default.createElement(TablePagination, { classes: classes, rowsPerPageOptions: props.rowsPerPageOptions, SelectProps: {
             inputProps: {
                 title: 'Velg antall elementer',
             },
@@ -3632,40 +3467,31 @@ var GrepTablePagination = function (props) {
                 gridArea: 'left',
                 justifySelf: 'start',
             },
-        }, ActionsComponent: function (actions) { return (React__default.createElement(PaginationActions, __assign({}, actions))); } }, props)));
+        }, ActionsComponent: (actions) => (React__default.createElement(PaginationActions, { ...actions })), ...props }));
 };
 
-var GrepTablePlaceholder = function (_a) {
-    var columns = _a.columns, padding = _a.padding, _b = _a.text, text = _b === void 0 ? 'Tabellen er tom.' : _b;
+const GrepTablePlaceholder = ({ columns, padding, text = 'Tabellen er tom.', }) => {
     return (React__default.createElement(TableRow, null,
         React__default.createElement(TableCell, { padding: padding, colSpan: columns.length }, text)));
 };
 
-var useStyles$d = makeStyles()(function (theme, _a) {
-    var showHeader = _a.showHeader, outlined = _a.outlined;
-    return ({
-        table: {
-            border: outlined ? "1px solid ".concat(theme.palette.divider) : 'none',
-            borderCollapse: outlined ? 'separate' : 'collapse',
-            tableLayout: 'auto',
-        },
-        header: {
-            visibility: showHeader ? 'visible' : 'collapse',
-        },
-        body: {
-            '&:focus': {
-                outline: 'none',
-            },
+const useStyles$d = makeStyles()((theme, { showHeader, outlined }) => ({
+    table: {
+        border: outlined ? `1px solid ${theme.palette.divider}` : 'none',
+        borderCollapse: outlined ? 'separate' : 'collapse',
+        tableLayout: 'auto',
+    },
+    header: {
+        visibility: showHeader ? 'visible' : 'collapse',
+    },
+    body: {
+        '&:focus': {
+            outline: 'none',
         },
-    });
-});
-var containsFocus = function (el, tag) {
-    if (tag === void 0) { tag = '*'; }
-    return Array.from(el.getElementsByTagName(tag)).some(function (el) { return el === document.activeElement; });
-};
-var getElementIndex = function (el) {
-    return Number(el.getAttribute('data-index') || -1);
-};
+    },
+}));
+const containsFocus = (el, tag = '*') => Array.from(el.getElementsByTagName(tag)).some((el) => el === document.activeElement);
+const getElementIndex = (el) => Number(el.getAttribute('data-index') || -1);
 /**
  * Since Grep-Table is so tightly intregrated into LPU and Admin some core logic could not be fixed
  * Still works but still messy
@@ -3673,16 +3499,15 @@ var getElementIndex = function (el) {
  * @todo enhance page handling
  *
  */
-var GrepTable = function (_a) {
-    var placeholderText = _a.placeholderText, dropdownItems = _a.dropdownItems, isRowDisabled = _a.isRowDisabled, pagination = _a.pagination, outlined = _a.outlined, columns = _a.columns, header = _a.header, data = _a.data, onSelectedRowChange = _a.onSelectedRowChange, sortBy = _a.sortBy, sortDirection = _a.sortDirection, onSortBy = _a.onSortBy, onRowClick = _a.onRowClick, size = _a.size, caption = _a.caption, stickyHeader = _a.stickyHeader, padding = _a.padding, _b = _a.disableSelectOnClick, disableSelectOnClick = _b === void 0 ? false : _b, menuButtonLabel = _a.menuButtonLabel, underlineOnFocus = _a.underlineOnFocus, rowTabIndex = _a.rowTabIndex, rowStyle = _a.rowStyle, _c = _a.rowsPerPageOptions, rowsPerPageOptions = _c === void 0 ? [5, 10, 25, 50] : _c, props = __rest$1(_a, ["placeholderText", "dropdownItems", "isRowDisabled", "pagination", "outlined", "columns", "header", "data", "onSelectedRowChange", "sortBy", "sortDirection", "onSortBy", "onRowClick", "size", "caption", "stickyHeader", "padding", "disableSelectOnClick", "menuButtonLabel", "underlineOnFocus", "rowTabIndex", "rowStyle", "rowsPerPageOptions"]);
-    var _d = __read(React__default.useState(props.rowsPerPage || 10), 2), rowsPerPage = _d[0], setRowsPerPage = _d[1];
-    var _e = __read(React__default.useState(null), 2), menuAnchor = _e[0], setMenuAnchor = _e[1];
-    var _f = __read(React__default.useState(0), 2), currentPage = _f[0], _setCurrentPage = _f[1];
-    var _g = __read(React__default.useState(), 2), selectedRowIndex = _g[0], _setSelectedRowIndex = _g[1];
-    var _h = __read(React__default.useState(), 2), expandedRowIndex = _h[0], _setExpandedRowIndex = _h[1];
-    var _j = __read(React__default.useState(), 2), dropdownContext = _j[0], setDropdownContext = _j[1];
-    var selectedRow = data[selectedRowIndex] || null;
-    var setCurrentPage = useCallback$1(function (index, rowIndex, shouldExpand) {
+const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination, outlined, columns, header, data, onSelectedRowChange, sortBy, sortDirection, onSortBy, onRowClick, size, caption, stickyHeader, padding, disableSelectOnClick = false, menuButtonLabel, underlineOnFocus, rowTabIndex, rowStyle, rowsPerPageOptions = [5, 10, 25, 50], ...props }) => {
+    const [rowsPerPage, setRowsPerPage] = React__default.useState(props.rowsPerPage || 10);
+    const [menuAnchor, setMenuAnchor] = React__default.useState(null);
+    const [currentPage, _setCurrentPage] = React__default.useState(0);
+    const [selectedRowIndex, _setSelectedRowIndex] = React__default.useState();
+    const [expandedRowIndex, _setExpandedRowIndex] = React__default.useState();
+    const [dropdownContext, setDropdownContext] = React__default.useState();
+    const selectedRow = data[selectedRowIndex] || null;
+    const setCurrentPage = useCallback$1((index, rowIndex, shouldExpand) => {
         index = pagination && index >= 0 ? index : 0;
         _setCurrentPage(index);
         _setSelectedRowIndex(rowIndex);
@@ -3696,24 +3521,21 @@ var GrepTable = function (_a) {
         rowsPerPage,
         pagination,
     ]);
-    var setSelectedRowIndex = function (index, shouldExpand) {
-        if (shouldExpand === void 0) { shouldExpand = true; }
-        var hasIndexChanged = index === selectedRowIndex;
-        var pageIndex = Math.floor(index / rowsPerPage);
+    const setSelectedRowIndex = (index, shouldExpand = true) => {
+        const hasIndexChanged = index === selectedRowIndex;
+        const pageIndex = Math.floor(index / rowsPerPage);
         setCurrentPage(pageIndex, index, shouldExpand);
         if (hasIndexChanged && onSelectedRowChange) {
             onSelectedRowChange(data[index]);
         }
     };
-    var setSelectedElement = function (el, shouldExpand) {
-        if (shouldExpand === void 0) { shouldExpand = true; }
+    const setSelectedElement = (el, shouldExpand = true) => {
         setSelectedRowIndex(getElementIndex(el), shouldExpand);
     };
-    var tableRef = React__default.useRef(null);
+    const tableRef = React__default.useRef(null);
     // focus selected row first tabable item
-    React__default.useEffect(function () {
-        var _a;
-        var rowTab = (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-index=\"".concat(selectedRowIndex, "\"]"));
+    React__default.useEffect(() => {
+        const rowTab = tableRef.current?.querySelector(`[data-index="${selectedRowIndex}"]`);
         if (!rowTab)
             return;
         if (!containsFocus(rowTab)) {
@@ -3722,70 +3544,76 @@ var GrepTable = function (_a) {
             }
         }
     }, [tableRef, selectedRowIndex]);
-    React__default.useMemo(function () {
+    React__default.useMemo(() => {
         setCurrentPage(0);
     }, [data.length, setCurrentPage]);
-    var _openDropdown = function (e, row) {
-        var onContextIdChanged = props.onContextIdChanged;
+    const _openDropdown = (e, row) => {
+        const { onContextIdChanged } = props;
         if (onContextIdChanged) {
             onContextIdChanged(row);
         }
         setDropdownContext(row);
         setMenuAnchor(e.currentTarget);
     };
-    var _handleRowClick = useCallback$1(function (row) {
-        var disabled = isRowDisabled && isRowDisabled(row);
+    const _handleRowClick = useCallback$1((row) => {
+        const disabled = isRowDisabled && isRowDisabled(row);
         !disabled && onRowClick && onRowClick(row);
     }, [onRowClick]);
-    var _handlePageChange = function (event, newPage) {
+    const _handlePageChange = (event, newPage) => {
         event && event.preventDefault();
         setCurrentPage(newPage);
     };
-    var _handleChangeRowsPerPage = function (event) {
+    const _handleChangeRowsPerPage = (event) => {
         setRowsPerPage(Number(event.target.value));
     };
-    var _handleMenuClose = function () {
+    const _handleMenuClose = () => {
         setMenuAnchor(null);
     };
-    var _renderCellButton = function (row) {
-        var menuDisabled = props.menuDisabled, menuTooltip = props.menuTooltip;
-        var disabled = menuDisabled && menuDisabled(row);
-        var tooltip = menuTooltip ? menuTooltip(row) : '';
+    const _renderCellButton = (row) => {
+        const { menuDisabled, menuTooltip } = props;
+        const disabled = menuDisabled && menuDisabled(row);
+        const tooltip = menuTooltip ? menuTooltip(row) : '';
         return (React__default.createElement(Tooltip, { title: tooltip, placement: "bottom" },
             React__default.createElement("div", { style: { display: 'flex', justifyContent: 'end' } },
-                React__default.createElement(IconButton, { disableTouchRipple: true, disabled: disabled, style: { float: 'right' }, onMouseDown: function (e) {
+                React__default.createElement(IconButton, { disableTouchRipple: true, disabled: disabled, style: { float: 'right' }, onMouseDown: (e) => {
                         e.preventDefault();
                         e.stopPropagation();
-                    }, onClick: function (e) {
+                    }, onClick: (e) => {
                         _openDropdown(e, row);
-                    }, onKeyDown: function (e) {
+                    }, onKeyDown: (e) => {
                         switch (e.which) {
                             case Key_enum.Key.Enter:
                                 // dont show dropdown
                                 e.preventDefault();
                                 break;
                         }
-                    }, tabIndex: 0, size: "large", "aria-label": menuButtonLabel !== null && menuButtonLabel !== void 0 ? menuButtonLabel : 'Åpne meny' },
+                    }, tabIndex: 0, size: "large", "aria-label": menuButtonLabel ?? 'Åpne meny' },
                     React__default.createElement(MoreVert, null)))));
     };
-    var getRowStyle = function (row, index, clickableRows, disabled) {
-        var style = { cursor: clickableRows && !disabled ? 'pointer' : '' };
+    const getRowStyle = (row, index, clickableRows, disabled) => {
+        let style = { cursor: clickableRows && !disabled ? 'pointer' : '' };
         if (typeof rowStyle === "function") {
-            style = __assign(__assign({}, style), rowStyle(row, index));
+            style = {
+                ...style,
+                ...rowStyle(row, index)
+            };
         }
         else if (rowStyle) {
-            style = __assign(__assign({}, style), rowStyle);
+            style = {
+                ...style,
+                ...rowStyle
+            };
         }
         return style;
     };
-    var _renderRow = function (row, index) {
-        var rowColumns = dropdownItems
+    const _renderRow = (row, index) => {
+        const rowColumns = dropdownItems
             ? columns.concat([{ getCell: _renderCellButton, padding: 'none' }])
             : columns;
-        var clickableRows = !!onRowClick;
-        var disabled = isRowDisabled && isRowDisabled(row);
-        var rowIndex = index + currentPage * rowsPerPage;
-        return (React__default.createElement(GrepTableRow, { key: rowIndex, "data-index": rowIndex, tabIndex: rowTabIndex !== null && rowTabIndex !== void 0 ? rowTabIndex : 0, hover: clickableRows, selected: rowIndex === selectedRowIndex, expanded: rowIndex === expandedRowIndex, clickable: clickableRows, onMouseDown: function (e) {
+        const clickableRows = !!onRowClick;
+        const disabled = isRowDisabled && isRowDisabled(row);
+        const rowIndex = index + currentPage * rowsPerPage;
+        return (React__default.createElement(GrepTableRow, { key: rowIndex, "data-index": rowIndex, tabIndex: rowTabIndex ?? 0, hover: clickableRows, selected: rowIndex === selectedRowIndex, expanded: rowIndex === expandedRowIndex, clickable: clickableRows, onMouseDown: (e) => {
                 if (e.target.type === 'checkbox') {
                     e.preventDefault();
                     e.stopPropagation();
@@ -3797,16 +3625,16 @@ var GrepTable = function (_a) {
                         _handleRowClick(row);
                     }
                 }
-            }, columns: rowColumns, row: row, style: getRowStyle(row, index, clickableRows, disabled), onFocus: function (e) {
+            }, columns: rowColumns, row: row, style: getRowStyle(row, index, clickableRows, disabled), onFocus: (e) => {
                 if (selectedRowIndex !== rowIndex) {
                     setSelectedElement(e.currentTarget);
                 }
             }, underlineOnFocus: underlineOnFocus }));
     };
-    var onKey = function (e) {
-        var maxIndex = data.length - 1;
-        var moveSelectedRow = function (steps) {
-            var i = (selectedRowIndex || 0) + steps;
+    const onKey = (e) => {
+        const maxIndex = data.length - 1;
+        const moveSelectedRow = (steps) => {
+            const i = (selectedRowIndex || 0) + steps;
             if (i >= 0 && i <= maxIndex) {
                 setSelectedRowIndex(i);
             }
@@ -3833,7 +3661,7 @@ var GrepTable = function (_a) {
                 setSelectedRowIndex(maxIndex);
                 break;
             case Key_enum.Key.Tab:
-                requestAnimationFrame(function () {
+                requestAnimationFrame(() => {
                     // check is any children still has focus
                     !containsFocus(tableRef.current) && setSelectedRowIndex(-1);
                 });
@@ -3843,57 +3671,53 @@ var GrepTable = function (_a) {
                 break;
         }
     };
-    var rows = pagination
+    const rows = pagination
         ? data.slice(currentPage * rowsPerPage, currentPage * rowsPerPage + rowsPerPage)
         : data;
-    var classes = useStyles$d({ outlined: outlined, showHeader: header }).classes;
+    const { classes } = useStyles$d({ outlined, showHeader: header });
     return (React__default.createElement(TableContainer, { sx: props.style },
         React__default.createElement(Table, { className: classes.table, size: size, stickyHeader: stickyHeader, padding: padding },
             caption && React__default.createElement("caption", null, caption),
             React__default.createElement(TableHeader, { className: classes.header, columns: columns, sortBy: sortBy, sortDirection: sortDirection, onSortBy: onSortBy, dropdownItems: dropdownItems }),
             React__default.createElement(TableBody, { ref: tableRef, className: classes.body, onKeyDown: onKey }, data.length ? (rows.map(_renderRow)) : (React__default.createElement(GrepTablePlaceholder, { padding: padding, columns: columns, text: placeholderText }))),
             React__default.createElement(TableFooter, null, pagination && (React__default.createElement(TableRow, null,
-                React__default.createElement(GrepTablePagination, { page: currentPage, count: data.length, rowsPerPage: rowsPerPage, onPageChange: _handlePageChange, rowsPerPageOptions: rowsPerPageOptions, onRowsPerPageChange: _handleChangeRowsPerPage, labelRowsPerPage: '', labelDisplayedRows: function (_a) {
-                        var from = _a.from, to = _a.to, count = _a.count;
-                        return "Viser ".concat(from, "-").concat(to, " av ").concat(count);
-                    } }))))),
+                React__default.createElement(GrepTablePagination, { page: currentPage, count: data.length, rowsPerPage: rowsPerPage, onPageChange: _handlePageChange, rowsPerPageOptions: rowsPerPageOptions, onRowsPerPageChange: _handleChangeRowsPerPage, labelRowsPerPage: '', labelDisplayedRows: ({ from, to, count }) => `Viser ${from}-${to} av ${count}` }))))),
         dropdownItems && dropdownContext && (React__default.createElement(DropdownMenu, { open: !!menuAnchor, context: dropdownContext, anchorEl: menuAnchor, menuItems: dropdownItems, onClose: _handleMenuClose }))));
 };
 
-var useStyles$c = makeStyles()({
+const useStyles$c = makeStyles()({
     container: {
-        border: "1px solid ".concat(Colors.lightGrey),
+        border: `1px solid ${Colors.lightGrey}`,
         height: 'fit-content',
         flex: 'auto',
     },
     title: { fontSize: 24, padding: 20, color: Colors.black },
 });
 
-var GrepTableCard = function (props) {
-    var classes = useStyles$c().classes;
+const GrepTableCard = (props) => {
+    const { classes } = useStyles$c();
     return (React.createElement(Box, { className: classes.container, style: props.style },
         React.createElement(Typography, { className: classes.title }, props.title),
-        React.createElement(GrepTable, __assign({}, props, { header: true }))));
+        React.createElement(GrepTable, { ...props, header: true })));
 };
 
-var LoadingOverlay = function (_a) {
-    var _b = _a.overlay, overlay = _b === void 0 ? 'rgba(255,255,255, .5)' : _b, show = _a.show, children = _a.children, minTime = _a.minTime, zIndex = _a.zIndex, sx = _a.sx, box = __rest$1(_a, ["overlay", "show", "children", "minTime", "zIndex", "sx"]);
-    var _c = __read(useState(show), 2), enabled = _c[0], setEnabled = _c[1];
-    useEffect(function () {
-        var timeout = setTimeout(function () { return setEnabled(show); }, show ? 0 : minTime);
-        return function () { return clearTimeout(timeout); };
+const LoadingOverlay = ({ overlay = 'rgba(255,255,255, .5)', show, children, minTime, zIndex, sx, ...box }) => {
+    const [enabled, setEnabled] = useState(show);
+    useEffect(() => {
+        const timeout = setTimeout(() => setEnabled(show), show ? 0 : minTime);
+        return () => clearTimeout(timeout);
     }, [show, minTime, setEnabled]);
     return (React__default.createElement(Box, { position: "relative", display: "block", overflow: show ? 'hidden' : '' },
         children,
-        React__default.createElement(Box, __assign({ position: "absolute", display: "flex", alignItems: "center", justifyContent: "center", top: 0, left: 0, height: "100%", width: "100%", zIndex: enabled ? (zIndex ? zIndex : 999) : -999, style: {
+        React__default.createElement(Box, { position: "absolute", display: "flex", alignItems: "center", justifyContent: "center", top: 0, left: 0, height: "100%", width: "100%", zIndex: enabled ? (zIndex ? zIndex : 999) : -999, style: {
                 backgroundColor: overlay,
                 opacity: show ? 1 : 0,
-                transition: "opacity ".concat(show ? 0 : minTime, "ms ease"),
-            }, sx: sx }, box),
+                transition: `opacity ${show ? 0 : minTime}ms ease`,
+            }, sx: sx, ...box },
             React__default.createElement(CircularProgress, { "aria-label": "Laster inn" }))));
 };
 
-var useStyles$b = makeStyles()({
+const useStyles$b = makeStyles()({
     container: {
         display: 'flex',
         marginTop: 30,
@@ -3921,18 +3745,17 @@ var useStyles$b = makeStyles()({
     },
 });
 
-var isOverflowing = function (e) { return e.offsetWidth < e.scrollWidth; };
-var GrepCrumbs = function (_a) {
-    var style = _a.style, onClick = _a.onClick, breadcrumbs = _a.breadcrumbs;
-    var classes = useStyles$b().classes;
-    var dispatch = useDispatch();
-    var ref = React__default.useRef(null);
-    var _b = __read(React__default.useState(false), 2), showTooltip = _b[0], setShowTooltip = _b[1];
-    React__default.useEffect(function () {
-        var current = ref.current;
+const isOverflowing = (e) => e.offsetWidth < e.scrollWidth;
+const GrepCrumbs = ({ style, onClick, breadcrumbs, }) => {
+    const { classes } = useStyles$b();
+    const dispatch = useDispatch();
+    const ref = React__default.useRef(null);
+    const [showTooltip, setShowTooltip] = React__default.useState(false);
+    React__default.useEffect(() => {
+        const { current } = ref;
         setShowTooltip(!!current && isOverflowing(current));
     }, [ref]);
-    var handleClick = function (crumb) {
+    const handleClick = (crumb) => {
         if (onClick) {
             onClick(crumb);
         }
@@ -3940,15 +3763,13 @@ var GrepCrumbs = function (_a) {
             crumb.path && dispatch(push(crumb.path));
         }
     };
-    return (React__default.createElement("div", { className: classes.container, style: style }, breadcrumbs.map(function (crumb, index) {
-        return crumb.path ? (React__default.createElement(Box, { key: index, display: "flex" },
-            React__default.createElement(Link, { className: classes.link, tabIndex: 0, component: "button", onClick: function () { return handleClick(crumb); } }, crumb.label),
-            index !== breadcrumbs.length - 1 && (React__default.createElement(Box, { margin: "auto 8px", height: "fit-content" /*lineHeight="20px"*/ }, ">")))) : (React__default.createElement(Tooltip, { key: index, title: showTooltip ? crumb.label : '' },
-            React__default.createElement("div", { className: classes.current, ref: ref }, crumb.label)));
-    })));
+    return (React__default.createElement("div", { className: classes.container, style: style }, breadcrumbs.map((crumb, index) => crumb.path ? (React__default.createElement(Box, { key: index, display: "flex" },
+        React__default.createElement(Link, { className: classes.link, tabIndex: 0, component: "button", onClick: () => handleClick(crumb) }, crumb.label),
+        index !== breadcrumbs.length - 1 && (React__default.createElement(Box, { margin: "auto 8px", height: "fit-content" /*lineHeight="20px"*/ }, ">")))) : (React__default.createElement(Tooltip, { key: index, title: showTooltip ? crumb.label : '' },
+        React__default.createElement("div", { className: classes.current, ref: ref }, crumb.label))))));
 };
 
-var useStyles$a = makeStyles()({
+const useStyles$a = makeStyles()({
     outer: {
         alignItems: 'center',
         background: Colors.white,
@@ -3969,27 +3790,27 @@ var useStyles$a = makeStyles()({
     helptext: { margin: '0 10px 0 10px', color: '#6e6e6e', fontSize: 12 },
 });
 
-var SearchBar = function (props) {
-    var inputRef = React.useRef(null);
-    var _a = __read(React.useState(props.initValue || ''), 2), value = _a[0], setValue = _a[1];
-    var classes = useStyles$a().classes;
-    React.useEffect(function () {
+const SearchBar = (props) => {
+    const inputRef = React.useRef(null);
+    const [value, setValue] = React.useState(props.initValue || '');
+    const { classes } = useStyles$a();
+    React.useEffect(() => {
         if (props.autoFocus && inputRef.current) {
             inputRef.current.focus();
         }
     });
-    var _handleChange = function (event) {
-        var newVal = event.target.value;
+    const _handleChange = (event) => {
+        const newVal = event.target.value;
         setValue(newVal);
         props.onInputChange(newVal);
     };
-    var _handleClear = function () {
+    const _handleClear = () => {
         setValue('');
         props.onClear();
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(Box, { className: classes.outer, "data-testid": "searchBarContainer", style: {
-                border: props.outlined ? "1px solid ".concat(Colors.lightGrey) : 0,
+                border: props.outlined ? `1px solid ${Colors.lightGrey}` : 0,
             } },
             React.createElement(Box, { className: classes.icon },
                 React.createElement(Search, null)),
@@ -4006,53 +3827,42 @@ var SearchBar = function (props) {
             props.searchAllText && props.onSearchAll && (React.createElement(Button, { color: "primary", onClick: props.onSearchAll }, props.searchAllText)))));
 };
 
-var useStyles$9 = makeStyles()(function (theme, _a) {
-    var elevation = _a.elevation;
-    return ({
-        cover: {
-            background: theme.palette.grey.A200,
-            marginBottom: 12,
-            padding: '10px 0',
-            boxShadow: elevation
-                ? "0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);"
-                : 'none',
-        },
-    });
-});
+const useStyles$9 = makeStyles()((theme, { elevation }) => ({
+    cover: {
+        background: theme.palette.grey.A200,
+        marginBottom: 12,
+        padding: '10px 0',
+        boxShadow: elevation
+            ? `0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);`
+            : 'none',
+    },
+}));
 
-var GreyCover = function (_a) {
-    var elevation = _a.elevation, children = _a.children;
-    var classes = useStyles$9({ elevation: elevation }).classes;
+const GreyCover = ({ elevation, children }) => {
+    const { classes } = useStyles$9({ elevation });
     return React.createElement(Box, { className: classes.cover }, children);
 };
 
-var CircularLoading = function (_a) {
-    var height = _a.height, props = __rest$1(_a, ["height"]);
-    return (React.createElement(Box, { height: height, width: "100%", display: "flex", alignItems: "center", justifyContent: "center" },
-        React.createElement(CircularProgress$1, __assign({}, props))));
-};
+const CircularLoading = ({ height, ...props }) => (React.createElement(Box, { height: height, width: "100%", display: "flex", alignItems: "center", justifyContent: "center" },
+    React.createElement(CircularProgress$1, { ...props })));
 
-var useStyles$8 = makeStyles()(function (theme) {
-    var _a;
-    return ({
-        container: (_a = {
-                width: '48%',
-                display: 'flex',
-                flexDirection: 'column'
-            },
-            _a[theme.breakpoints.down('lg')] = {
-                width: '100%',
-            },
-            _a[theme.breakpoints.up('md')] = {
-                width: '48%',
-            },
-            _a),
-    });
-});
+const useStyles$8 = makeStyles()((theme) => ({
+    container: {
+        width: '48%',
+        display: 'flex',
+        flexDirection: 'column',
+        [theme.breakpoints.down('lg')]: {
+            width: '100%',
+        },
+        [theme.breakpoints.up('md')]: {
+            width: '48%',
+        },
+    },
+}));
 
-var renderField$1 = function (id, label, value) { return (React.createElement(TextField, { id: id, disabled: true, label: label, value: value, variant: "outlined", style: { margin: '10px 0' }, InputProps: { style: { color: 'rgb(84, 84, 84)' } } })); };
-var ProfileInfo = function (props) {
-    var classes = useStyles$8().classes;
+const renderField$1 = (id, label, value) => (React.createElement(TextField, { id: id, disabled: true, label: label, value: value, variant: "outlined", style: { margin: '10px 0' }, InputProps: { style: { color: 'rgb(84, 84, 84)' } } }));
+const ProfileInfo = (props) => {
+    const { classes } = useStyles$8();
     return (React.createElement(Box, { className: classes.container },
         renderField$1('firstname', 'Fornavn', props.firstName),
         renderField$1('lastname', 'Etternavn', props.lastName),
@@ -4061,48 +3871,43 @@ var ProfileInfo = function (props) {
         renderField$1('role', 'Rolle', props.role)));
 };
 
-var useStyles$7 = makeStyles()(function (theme) {
-    var _a;
-    return ({
-        container: (_a = {
-                backgroundColor: 'rgb(241, 243, 244)',
-                height: 'fit-content',
-                display: 'flex',
-                maxWidth: 500
-            },
-            _a[theme.breakpoints.down('lg')] = {
-                maxWidth: 'unset',
-                width: '100%',
-            },
-            _a[theme.breakpoints.up('md')] = {
-                maxWidth: 500,
-            },
-            _a),
-        content: {
-            backgroundColor: 'unset',
-            marginRight: 20,
+const useStyles$7 = makeStyles()((theme) => ({
+    container: {
+        backgroundColor: 'rgb(241, 243, 244)',
+        height: 'fit-content',
+        display: 'flex',
+        maxWidth: 500,
+        [theme.breakpoints.down('lg')]: {
+            maxWidth: 'unset',
+            width: '100%',
         },
-        title: {
-            backgroundColor: 'unset',
-            fontSize: 16,
-            margin: '20px 0',
+        [theme.breakpoints.up('md')]: {
+            maxWidth: 500,
         },
-        body: {
-            backgroundColor: 'unset',
-            h4: {
-                marginRight: 20,
-            },
-        },
-        icon: {
-            margin: '20px 10px',
-            color: 'rgb(255, 158, 157)',
+    },
+    content: {
+        backgroundColor: 'unset',
+        marginRight: 20,
+    },
+    title: {
+        backgroundColor: 'unset',
+        fontSize: 16,
+        margin: '20px 0',
+    },
+    body: {
+        backgroundColor: 'unset',
+        h4: {
+            marginRight: 20,
         },
-    });
-});
+    },
+    icon: {
+        margin: '20px 10px',
+        color: 'rgb(255, 158, 157)',
+    },
+}));
 
-var GDPR = function (_a) {
-    var children = _a.children;
-    var classes = useStyles$7().classes;
+const GDPR = ({ children }) => {
+    const { classes } = useStyles$7();
     return (React.createElement(Box, { className: classes.container },
         React.createElement(Info, { className: classes.icon }),
         React.createElement(Box, { className: classes.content },
@@ -4110,67 +3915,66 @@ var GDPR = function (_a) {
             React.createElement(Typography, { className: classes.body }, children))));
 };
 
-var GrepInput = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'standard' : _b, props = __rest$1(_a, ["variant"]);
-    var errorMessage = props.errorMessage, helperText = props.helperText, shrink = props.shrink, value = props.value, rest = __rest$1(props, ["errorMessage", "helperText", "shrink", "value"]);
-    var error = errorMessage ? errorMessage.length > 0 : false;
-    return (React.createElement(TextField, __assign({}, rest, { variant: variant, helperText: errorMessage || helperText, value: value === null ? '' : value, InputLabelProps: { shrink: shrink }, error: error || rest.error })));
+const GrepInput = ({ variant = 'standard', ...props }) => {
+    const { errorMessage, helperText, shrink, value, ...rest } = props;
+    const error = errorMessage ? errorMessage.length > 0 : false;
+    return (React.createElement(TextField, { ...rest, variant: variant, helperText: errorMessage || helperText, value: value === null ? '' : value, InputLabelProps: { shrink }, error: error || rest.error }));
 };
 
-var GrepSelect = function (props) {
-    var inputLabel = React.useRef(null);
-    var _a = __read(React.useState(0), 2), labelWidth = _a[0], setLabelWidth = _a[1];
-    React.useEffect(function () {
+const GrepSelect = (props) => {
+    const inputLabel = React.useRef(null);
+    const [labelWidth, setLabelWidth] = React.useState(0);
+    React.useEffect(() => {
         setLabelWidth(inputLabel.current.offsetWidth);
     }, []);
-    var _b = props.unselectOption, unselectOption = _b === void 0 ? true : _b, errorMessage = props.errorMessage, selectItems = props.selectItems, helperText = props.helperText, fullWidth = props.fullWidth, outlined = props.outlined, disabled = props.disabled, required = props.required, label = props.label, inputProps = props.inputProps, value = props.value, size = props.size, id = props.id, useCheckedSelect = props.useCheckedSelect, rest = __rest$1(props, ["unselectOption", "errorMessage", "selectItems", "helperText", "fullWidth", "outlined", "disabled", "required", "label", "inputProps", "value", "size", "id", "useCheckedSelect"]);
-    var error = errorMessage ? errorMessage.length > 0 : false;
-    var selected = value;
+    const { unselectOption = true, errorMessage, selectItems, helperText, fullWidth, outlined, disabled, required, label, inputProps, value, size, id, useCheckedSelect, ...rest } = props;
+    const error = errorMessage ? errorMessage.length > 0 : false;
+    const selected = value;
     return (React.createElement(FormControl, { variant: outlined ? 'outlined' : 'standard', className: props.className, fullWidth: fullWidth, required: required, style: props.style, error: error, size: size, disabled: disabled },
         React.createElement(InputLabel, { htmlFor: id, ref: inputLabel, style: {
                 minWidth: 'max-content',
                 overflow: 'visible',
             } }, label),
-        React.createElement(Select, __assign({}, rest, { inputProps: __assign({ id: id }, inputProps), disabled: !selectItems || disabled, value: value === null ? '' : value, style: { minWidth: labelWidth + (outlined ? 35 : 25) }, 
+        React.createElement(Select, { ...rest, inputProps: { id, ...inputProps }, disabled: !selectItems || disabled, value: value === null ? '' : value, style: { minWidth: labelWidth + (outlined ? 35 : 25) }, 
             // @todo: make input respect label length
-            input: outlined ? React.createElement(OutlinedInput, { label: label }) : React.createElement(Input, null), MenuProps: __assign(__assign({}, rest.MenuProps), { anchorOrigin: {
+            input: outlined ? React.createElement(OutlinedInput, { label: label }) : React.createElement(Input, null), MenuProps: {
+                ...rest.MenuProps,
+                anchorOrigin: {
                     vertical: 'bottom',
                     horizontal: 'center',
-                }, transformOrigin: {
+                },
+                transformOrigin: {
                     vertical: 'top',
                     horizontal: 'center',
-                } }) }),
+                },
+            } },
             unselectOption && (React.createElement(MenuItem, { value: "" },
                 React.createElement("em", null, "Fjern valgt"))),
-            selectItems.map(function (_a, i) {
-                var label = _a.label, value = _a.value, disabled = _a.disabled, lang = _a.lang;
-                return (React.createElement(MenuItem, { key: i, value: value, disabled: disabled, lang: lang },
-                    useCheckedSelect && (React.createElement(Checkbox, { checked: (selected === null || selected === void 0 ? void 0 : selected.indexOf(value)) > -1 })),
-                    React.createElement(ListItemText, { sx: { margin: '0px', span: { lineHeight: '1.4375em' } }, primary: label ? label : value })));
-            })),
+            selectItems.map(({ label, value, disabled, lang }, i) => (React.createElement(MenuItem, { key: i, value: value, disabled: disabled, lang: lang },
+                useCheckedSelect && (React.createElement(Checkbox, { checked: selected?.indexOf(value) > -1 })),
+                React.createElement(ListItemText, { sx: { margin: '0px', span: { lineHeight: '1.4375em' } }, primary: label ? label : value }))))),
         React.createElement(FormHelperText, null, errorMessage || helperText)));
 };
 
-var defaultOptions$2 = {
+const defaultOptions$2 = {
     utc: true,
     preserveTime: false,
 };
-var useDate = function (value, options) {
-    if (value === void 0) { value = null; }
-    var _a = __assign(__assign({}, options), defaultOptions$2), utc = _a.utc, preserveTime = _a.preserveTime;
-    var _b = __read(useState(null), 2), date = _b[0], _setDate = _b[1];
-    var getDate = useCallback$1(function (value) {
+const useDate = (value = null, options) => {
+    const { utc, preserveTime } = { ...options, ...defaultOptions$2 };
+    const [date, _setDate] = useState(null);
+    const getDate = useCallback$1((value) => {
         if (value) {
-            var date_1 = dayjs(value);
-            return preserveTime ? date_1 : date_1.startOf('day');
+            const date = dayjs(value);
+            return preserveTime ? date : date.startOf('day');
         }
         return null;
     }, [preserveTime]);
-    var setDate = function (next) {
-        var nextDate = getDate(next);
+    const setDate = (next) => {
+        const nextDate = getDate(next);
         hasDateChanged(date, nextDate) && _setDate(nextDate);
     };
-    useMemo$1(function () { return setDate(value ? parseDate(value, { utc: utc }) : null); }, [
+    useMemo$1(() => setDate(value ? parseDate(value, { utc }) : null), [
         value,
         utc,
     ]);
@@ -4569,55 +4373,58 @@ var lodash_debounce = debounce$1;
  *  return (<><input {...{ref,onChange}}/><p>{txt}</p></>)
  * }
  */
-var useDebounce = function (func, opt, deps) {
-    var debounce = useMemo$1(function () {
-        var wait = opt.wait, settings = __rest$1(opt, ["wait"]);
+const useDebounce = (func, opt, deps) => {
+    const debounce = useMemo$1(() => {
+        const { wait, ...settings } = opt;
         return lodash_debounce(func, wait, settings);
     }, deps || []);
-    useEffect(function () { return debounce.cancel; }, [debounce]);
+    useEffect(() => debounce.cancel, [debounce]);
     return debounce;
 };
 
-var filterElements = function (match) { return function (elements) {
-    return match ? elements.filter(function (el) { return el.nodeName.match(match); }) : elements;
-}; };
-var defaultOptions$1 = {
-    identify: function (el) { return el.id; },
+const filterElements = (match) => (elements) => {
+    return match ? elements.filter((el) => el.nodeName.match(match)) : elements;
+};
+const defaultOptions$1 = {
+    identify: (el) => el.id,
     config: {
         attributes: false,
         childList: true,
         subtree: true,
     },
 };
-var useContentElements = function (container, selector, options) {
-    var _a = __assign(__assign({}, defaultOptions$1), options), filter = _a.filter, config = _a.config, identify = _a.identify;
-    var _b = __read(useState({}), 2), elements = _b[0], setElements = _b[1];
-    var getElements = useCallback$1(function () {
-        var all = Array.from(container.querySelectorAll(selector));
-        var elements = filter ? all.filter(filter) : all;
-        return elements.reduce(function (curr, el) {
-            var id = identify(el);
+const useContentElements = (container, selector, options) => {
+    const { filter, config, identify } = {
+        ...defaultOptions$1,
+        ...options,
+    };
+    const [elements, setElements] = useState({});
+    const getElements = useCallback$1(() => {
+        const all = Array.from(container.querySelectorAll(selector));
+        const elements = filter ? all.filter(filter) : all;
+        return elements.reduce((curr, el) => {
+            const id = identify(el);
             if (curr[id])
                 throw Error('duplicate identifiers!');
             curr[id] = el;
             return curr;
         }, {});
     }, [container, selector, identify, filter]);
-    useEffect(function () {
+    useEffect(() => {
         // early exit, nothing to observe
         if (!container)
             return;
         // set current elements
         setElements(getElements());
         // Observe changes in DOM
-        var observer = new MutationObserver(function () {
+        const observer = new MutationObserver(() => {
             setElements(getElements());
         });
         // start observing
         observer.observe(container, config);
         console.debug('observing container', container);
         // stop observing when unmounted
-        return function () {
+        return () => {
             observer.disconnect();
             console.debug('observing disconnected', container);
         };
@@ -4625,100 +4432,98 @@ var useContentElements = function (container, selector, options) {
     return elements;
 };
 
-var DatePicker = function (_a) {
-    var id = _a.id, label = _a.label, value = _a.value, variant = _a.variant, onChange = _a.onChange, errorMessage = _a.errorMessage, placeholder = _a.placeholder, fullWidth = _a.fullWidth, required = _a.required, onFocus = _a.onFocus, margin = _a.margin, sx = _a.sx, props = __rest$1(_a, ["id", "label", "value", "variant", "onChange", "errorMessage", "placeholder", "fullWidth", "required", "onFocus", "margin", "sx"]);
-    var _b = __read(useDate(value), 2), date = _b[0], setDate = _b[1];
-    var _c = __read(useState(), 2), error = _c[0], setError = _c[1];
-    var helperText = errorMessage || error || props.helperText;
-    useEffect(function () { return onChange(date); }, [String(date)]);
+const DatePicker = ({ id, label, value, variant, onChange, errorMessage, placeholder, fullWidth, required, onFocus, margin, sx, ...props }) => {
+    const [date, setDate] = useDate(value);
+    const [error, setError] = useState();
+    const helperText = errorMessage || error || props.helperText;
+    useEffect(() => onChange(date), [String(date)]);
     return (React__default.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: 'nb' },
         React__default.createElement(DesktopDatePicker
         // clearable @todo
-        , __assign({ 
+        , { 
             // clearable @todo
-            inputFormat: "DD/MM/YYYY", onError: function (reason) {
+            inputFormat: "DD/MM/YYYY", onError: (reason) => {
                 switch (reason) {
                     case 'invalidDate':
                         setError('Ugyldig dato');
                         break;
                     case 'maxDate':
-                        setError("Dato m\u00E5 v\u00E6re f\u00F8r ".concat(dayjs(props.maxDate)
+                        setError(`Dato må være før ${dayjs(props.maxDate)
                             .add(1, 'day')
-                            .format('DD/MM/YYYY')));
+                            .format('DD/MM/YYYY')}`);
                         break;
                     case 'minDate':
-                        setError("Dato m\u00E5 v\u00E6re etter ".concat(dayjs(props.minDate)
+                        setError(`Dato må være etter ${dayjs(props.minDate)
                             .subtract(1, 'day')
-                            .format('DD/MM/YYYY')));
+                            .format('DD/MM/YYYY')}`);
                         break;
                     default:
                         setError(undefined);
                 }
-            }, value: date, onChange: setDate, renderInput: function (params) { return (React__default.createElement(TextField, __assign({ id: id }, params, { label: label, variant: variant, onFocus: onFocus, required: required, fullWidth: fullWidth, placeholder: placeholder, sx: sx, margin: margin, error: !!error || !!errorMessage }, (helperText && { helperText: helperText })))); } }, props))));
+            }, value: date, onChange: setDate, renderInput: (params) => (React__default.createElement(TextField, { id: id, ...params, label: label, variant: variant, onFocus: onFocus, required: required, fullWidth: fullWidth, placeholder: placeholder, sx: sx, margin: margin, error: !!error || !!errorMessage, ...(helperText && { helperText }) })), ...props })));
 };
 
-var GrepDateRange = function (_a) {
-    var onChange = _a.onChange, _b = _a.spacing, spacing = _b === void 0 ? 3 : _b, style = _a.style, fullWidth = _a.fullWidth, fromProperties = _a.from, toProperties = _a.to, properties = __rest$1(_a, ["onChange", "spacing", "style", "fullWidth", "from", "to"]);
-    var _c = __read(useDate(fromProperties.value), 2), from = _c[0], setFrom = _c[1];
-    var _d = __read(useDate(toProperties.value), 2), to = _d[0], setTo = _d[1];
-    var minDate = properties.minDate, maxDate = properties.maxDate, commonProperties = __rest$1(properties, ["minDate", "maxDate"]);
-    useEffect(function () { return onChange(new DateRangeValue(from, to)); }, [String(from), String(to)]);
+const GrepDateRange = ({ onChange, spacing = 3, style, fullWidth, from: fromProperties, to: toProperties, ...properties }) => {
+    const [from, setFrom] = useDate(fromProperties.value);
+    const [to, setTo] = useDate(toProperties.value);
+    const { minDate, maxDate, ...commonProperties } = properties;
+    useEffect(() => onChange(new DateRangeValue(from, to)), [String(from), String(to)]);
     return (React__default.createElement(Grid, { container: true, spacing: spacing, style: style },
         React__default.createElement(Grid, { item: true, xs: 12, sm: fullWidth ? 12 : 6 },
-            React__default.createElement(DatePicker, __assign({ id: String(fromProperties.label), fullWidth: true, minDate: minDate }, commonProperties, fromProperties, { value: from, maxDate: (to === null || to === void 0 ? void 0 : to.subtract(1, 'day')) || undefined, onChange: setFrom }))),
+            React__default.createElement(DatePicker, { id: String(fromProperties.label), fullWidth: true, minDate: minDate, ...commonProperties, ...fromProperties, value: from, maxDate: to?.subtract(1, 'day') || undefined, onChange: setFrom })),
         React__default.createElement(Grid, { item: true, xs: 12, sm: fullWidth ? 12 : 6 },
-            React__default.createElement(DatePicker, __assign({ id: String(toProperties.label), fullWidth: true, maxDate: maxDate }, commonProperties, toProperties, { value: to, minDate: (from === null || from === void 0 ? void 0 : from.add(1, 'day')) || undefined, onChange: setTo })))));
+            React__default.createElement(DatePicker, { id: String(toProperties.label), fullWidth: true, maxDate: maxDate, ...commonProperties, ...toProperties, value: to, minDate: from?.add(1, 'day') || undefined, onChange: setTo }))));
 };
 
-var renderField = function (_a) {
-    var key = _a.key, value = _a.value;
-    return (React.createElement(Box, { key: key, display: "flex", marginRight: "20px" },
-        React.createElement(Typography, { variant: "body1", style: { color: Colors.grey, marginRight: '2rem' } },
-            key,
-            ":"),
-        React.createElement(Typography, { variant: "body1" }, value)));
-};
-var renderHorizontal = function (infoFields) { return (React.createElement(Box, { display: "flex", flexWrap: "wrap", justifyContent: "space-between" }, infoFields.map(renderField))); };
-var renderVertical = function (infoFields) {
-    return infoFields.map(renderField);
-};
-var InfoContainer = function (props) { return (React.createElement(Box, { style: __assign({ paddingTop: 20 }, props.style) },
+const renderField = ({ key, value }) => (React.createElement(Box, { key: key, display: "flex", marginRight: "20px" },
+    React.createElement(Typography, { variant: "body1", style: { color: Colors.grey, marginRight: '2rem' } },
+        key,
+        ":"),
+    React.createElement(Typography, { variant: "body1" }, value)));
+const renderHorizontal = (infoFields) => (React.createElement(Box, { display: "flex", flexWrap: "wrap", justifyContent: "space-between" }, infoFields.map(renderField)));
+const renderVertical = (infoFields) => infoFields.map(renderField);
+const InfoContainer = (props) => (React.createElement(Box, { style: { paddingTop: 20, ...props.style } },
     props.header && (React.createElement(Typography, { variant: "h6", style: { paddingBottom: 10 } }, props.header)),
     props.inline
         ? renderHorizontal(props.infoFields)
-        : renderVertical(props.infoFields))); };
+        : renderVertical(props.infoFields)));
 
-var textStyles = {
+const textStyles = {
     userSelect: 'none',
     whiteSpace: 'nowrap',
     outline: 'none',
     fontSize: 16,
 };
-var useStyles$6 = makeStyles()(function (_a, _props, classes) {
-    var _b;
-    var palette = _a.palette;
-    var text = __assign(__assign({}, textStyles), { color: 'inherit', fontWeight: 400 });
+const useStyles$6 = makeStyles()(({ palette }, _props, classes) => {
+    const text = {
+        ...textStyles,
+        color: 'inherit',
+        fontWeight: 400,
+    };
     return {
         container: {
             padding: 10,
             display: 'flex',
             flexDirection: 'column',
         },
-        item: (_b = {
-                cursor: 'pointer',
-                color: palette.text.disabled,
-                outline: 'none',
-                '&:hover': {
-                    color: palette.primary.main,
-                }
+        item: {
+            cursor: 'pointer',
+            color: palette.text.disabled,
+            outline: 'none',
+            '&:hover': {
+                color: palette.primary.main,
             },
-            _b["&:focus .".concat(classes.text)] = {
+            [`&:focus .${classes.text}`]: {
                 color: palette.primary.main,
                 outline: 'auto',
             },
-            _b),
-        text: text,
-        selected: __assign(__assign({}, textStyles), { color: palette.primary.main, fontWeight: 500 }),
+        },
+        text,
+        selected: {
+            ...textStyles,
+            color: palette.primary.main,
+            fontWeight: 500,
+        },
         icon: {
             minWidth: 'fit-content',
             marginRight: 2,
@@ -4726,26 +4531,24 @@ var useStyles$6 = makeStyles()(function (_a, _props, classes) {
     };
 });
 
-var Sidebar = function (_a) {
-    var pages = _a.pages, onPageClick = _a.onPageClick, currentPageId = _a.currentPageId, expandOnIcon = _a.expandOnIcon;
-    var _b = __read(React.useState([]), 2), expanded = _b[0], setExpanded = _b[1];
-    var classes = useStyles$6().classes;
-    React.useEffect(function () {
-        var _a;
+const Sidebar = ({ pages, onPageClick, currentPageId, expandOnIcon }) => {
+    const [expanded, setExpanded] = React.useState([]);
+    const { classes } = useStyles$6();
+    React.useEffect(() => {
         if (currentPageId) {
-            var pageId = (_a = pages.find(function (p) { var _a; return (_a = p.children) === null || _a === void 0 ? void 0 : _a.some(function (c) { return c.id === currentPageId; }); })) === null || _a === void 0 ? void 0 : _a.id;
-            !!pageId && setExpanded(__spreadArray(__spreadArray([], __read(expanded), false), [pageId], false));
+            const pageId = pages.find((p) => p.children?.some((c) => c.id === currentPageId))?.id;
+            !!pageId && setExpanded([...expanded, pageId]);
         }
     }, [pages]);
-    var toggleExpand = function (id) {
+    const toggleExpand = (id) => {
         if (expanded.includes(id)) {
-            setExpanded(__spreadArray([], __read(expanded.filter(function (_id) { return _id !== id; })), false));
+            setExpanded([...expanded.filter((_id) => _id !== id)]);
         }
         else {
-            setExpanded(__spreadArray(__spreadArray([], __read(expanded), false), [id], false));
+            setExpanded([...expanded, id]);
         }
     };
-    var handleClick = function (page) {
+    const handleClick = (page) => {
         if (expandOnIcon) {
             onPageClick(page);
         }
@@ -4753,14 +4556,14 @@ var Sidebar = function (_a) {
             page.children ? toggleExpand(page.id) : onPageClick(page);
         }
     };
-    var renderItem = function (page) { return (React.createElement(React.Fragment, null,
+    const renderItem = (page) => (React.createElement(React.Fragment, null,
         page.linkIcon && (React.createElement(ListItemIcon, { className: classes.icon }, page.linkIcon)),
-        React.createElement(ListItemText$1, { sx: { outline: 'none !important' }, tabIndex: -1, disableTypography: true, primary: page.label, className: page.id === currentPageId ? classes.selected : classes.text }))); };
-    var renderExpandIcon = function (page) {
+        React.createElement(ListItemText$1, { sx: { outline: 'none !important' }, tabIndex: -1, disableTypography: true, primary: page.label, className: page.id === currentPageId ? classes.selected : classes.text })));
+    const renderExpandIcon = (page) => {
         if (page.children) {
             if (expanded.includes(page.id)) {
                 if (expandOnIcon) {
-                    return React.createElement(ExpandLess, { onClick: function (e) { e.stopPropagation(), toggleExpand(page.id); } });
+                    return React.createElement(ExpandLess, { onClick: (e) => { e.stopPropagation(), toggleExpand(page.id); } });
                 }
                 else {
                     return React.createElement(ExpandLess, null);
@@ -4768,7 +4571,7 @@ var Sidebar = function (_a) {
             }
             else {
                 if (expandOnIcon) {
-                    return React.createElement(ExpandMore, { onClick: function (e) { e.stopPropagation(), toggleExpand(page.id); } });
+                    return React.createElement(ExpandMore, { onClick: (e) => { e.stopPropagation(), toggleExpand(page.id); } });
                 }
                 else {
                     return React.createElement(ExpandMore, null);
@@ -4778,18 +4581,15 @@ var Sidebar = function (_a) {
         return null;
     };
     return (React.createElement(Box$1, { className: classes.container },
-        React.createElement(List$1, null, pages.map(function (page) {
-            var _a;
-            return (React.createElement("div", { key: page.id },
-                React.createElement(ListItem$1, { key: page.id, tabIndex: 0, className: classes.item, onClick: function () { return handleClick(page); }, onKeyPress: keyboard.onActivation(function () { return handleClick(page); }) },
-                    renderItem(page),
-                    renderExpandIcon(page)),
-                React.createElement(Collapse, { in: expanded.includes(page.id), timeout: "auto", unmountOnExit: true },
-                    React.createElement(List$1, { disablePadding: true }, (_a = page.children) === null || _a === void 0 ? void 0 : _a.map(function (child) { return (React.createElement(ListItem$1, { key: child.id, style: { paddingLeft: '30px' }, tabIndex: 0, className: classes.item, onClick: function () { return handleClick(child); }, onKeyPress: keyboard.onActivation(function () { return handleClick(child); }) }, renderItem(child))); })))));
-        }))));
+        React.createElement(List$1, null, pages.map((page) => (React.createElement("div", { key: page.id },
+            React.createElement(ListItem$1, { key: page.id, tabIndex: 0, className: classes.item, onClick: () => handleClick(page), onKeyPress: keyboard.onActivation(() => handleClick(page)) },
+                renderItem(page),
+                renderExpandIcon(page)),
+            React.createElement(Collapse, { in: expanded.includes(page.id), timeout: "auto", unmountOnExit: true },
+                React.createElement(List$1, { disablePadding: true }, page.children?.map((child) => (React.createElement(ListItem$1, { key: child.id, style: { paddingLeft: '30px' }, tabIndex: 0, className: classes.item, onClick: () => handleClick(child), onKeyPress: keyboard.onActivation(() => handleClick(child)) }, renderItem(child))))))))))));
 };
 
-var useStyles$5 = makeStyles()(function () { return ({
+var useStyles$5 = makeStyles()(() => ({
     message: {
         overflowWrap: 'break-word',
         backgroundColor: '#f8e9d6',
@@ -4826,17 +4626,16 @@ var useStyles$5 = makeStyles()(function () { return ({
         alignSelf: 'center',
         marginLeft: 5,
     },
-}); });
+}));
 
-var ServiceMessage = function (_a) {
-    var id = _a.id, message = _a.message, isPublic = _a.isPublic, onDismiss = _a.onDismiss;
-    var classes = useStyles$5().classes;
+const ServiceMessage = ({ id, message, isPublic, onDismiss }) => {
+    const { classes } = useStyles$5();
     return (React.createElement(Box, { className: classes.message },
         React.createElement(Typography, { className: classes.messageType },
             React.createElement(Warning, { className: classes.warning }),
             "Driftsmelding"),
         React.createElement(Typography, { className: classes.messageText }, message),
-        !isPublic && onDismiss && (React.createElement(IconButton, { className: classes.button, onClick: function () { return onDismiss(id); }, size: "large" },
+        !isPublic && onDismiss && (React.createElement(IconButton, { className: classes.button, onClick: () => onDismiss(id), size: "large" },
             React.createElement(Close, { className: classes.close })))));
 };
 
@@ -13633,128 +13432,110 @@ var ConnectedDroppable = connect(makeMapStateToProps$1, mapDispatchToProps$1, nu
 })(Droppable);
 ConnectedDroppable.defaultProps = defaultProps;
 
-var setDimensions = function (el) {
-    var _a = el.getBoundingClientRect(), width = _a.width, height = _a.height;
-    el.style.width = "".concat(width, "px");
-    el.style.height = "".concat(height, "px");
+const setDimensions = (el) => {
+    const { width, height } = el.getBoundingClientRect();
+    el.style.width = `${width}px`;
+    el.style.height = `${height}px`;
 };
-var clearDimensions = function (el) {
+const clearDimensions = (el) => {
     el.style.removeProperty('height');
     el.style.removeProperty('width');
 };
-function SortableTableCell(_a) {
-    var locked = _a.locked, children = _a.children, props = __rest$1(_a, ["locked", "children"]);
-    var ref = useRef();
-    useMemo$1(function () {
+function SortableTableCell({ locked, children, ...props }) {
+    const ref = useRef();
+    useMemo$1(() => {
         if (ref.current) {
             locked ? setDimensions(ref.current) : clearDimensions(ref.current);
         }
     }, [locked]);
-    return (React__default.createElement(TableCell$1, __assign({ ref: ref }, props), children));
+    return (React__default.createElement(TableCell$1, { ref: ref, ...props }, children));
 }
 
-var useStyles$4 = makeStyles()(function (_a, _b) {
-    var palette = _a.palette, transitions = _a.transitions;
-    var isDragging = _b.isDragging;
-    return ({
-        row: {
-            transition: transitions.create(['background-color'], {
-                duration: transitions.duration.shorter,
-                easing: transitions.easing.easeOut,
-            }),
-            backgroundColor: isDragging
-                ? "var(--tablecell__background--drag, ".concat(hex2rgba(palette.primary.main, 0.25), ")")
-                : 'var(--tablecell__background)',
-        },
-    });
-});
-
-function SortableTableRow(_a) {
-    var item = _a.item, id = _a.id, index = _a.index, render = _a.render, disabled = _a.disabled;
-    var cells = useMemo$1(function () { return render(item); }, [item, render]);
-    var renderRow = useCallback$1(function (isDragging) {
-        return cells.map(function (_a, index) {
-            var value = _a.value, properties = _a.properties;
-            return (React__default.createElement(SortableTableCell, __assign({ key: "dragable-".concat(id, "-").concat(index), locked: isDragging }, properties), value));
-        });
-    }, [cells, id]);
-    return (React__default.createElement(PublicDraggable, { draggableId: "dragable-".concat(id), index: index, isDragDisabled: disabled }, function (provided, _a) {
-        var isDragging = _a.isDragging;
-        var classes = useStyles$4({ isDragging: isDragging }).classes;
-        return (React__default.createElement(TableRow$1, __assign({ className: classes.row, ref: provided.innerRef }, provided.draggableProps),
-            React__default.createElement(TableCell$1, __assign({ style: { width: '45px', padding: '5px 10px' } }, provided.dragHandleProps),
+const useStyles$4 = makeStyles()(({ palette, transitions }, { isDragging }) => ({
+    row: {
+        transition: transitions.create(['background-color'], {
+            duration: transitions.duration.shorter,
+            easing: transitions.easing.easeOut,
+        }),
+        backgroundColor: isDragging
+            ? `var(--tablecell__background--drag, ${hex2rgba(palette.primary.main, 0.25)})`
+            : 'var(--tablecell__background)',
+    },
+}));
+
+function SortableTableRow({ item, id, index, render, disabled, }) {
+    const cells = useMemo$1(() => render(item), [item, render]);
+    const renderRow = useCallback$1((isDragging) => cells.map(({ value, properties }, index) => (React__default.createElement(SortableTableCell, { key: `dragable-${id}-${index}`, locked: isDragging, ...properties }, value))), [cells, id]);
+    return (React__default.createElement(PublicDraggable, { draggableId: `dragable-${id}`, index: index, isDragDisabled: disabled }, (provided, { isDragging }) => {
+        const { classes } = useStyles$4({ isDragging: isDragging });
+        return (React__default.createElement(TableRow$1, { className: classes.row, ref: provided.innerRef, ...provided.draggableProps },
+            React__default.createElement(TableCell$1, { style: { width: '45px', padding: '5px 10px' }, ...provided.dragHandleProps },
                 React__default.createElement(DragIndicator, null)),
             renderRow(isDragging)));
     }));
 }
 
 function reorder(list, startIndex, endIndex) {
-    var _a = __read(list.splice(startIndex, 1), 1), removed = _a[0];
+    const [removed] = list.splice(startIndex, 1);
     list.splice(endIndex, 0, removed);
     return list;
 }
 function castCellNode(value) {
     return typeof value === 'object' && value.value !== undefined
         ? value
-        : { value: value };
+        : { value };
 }
-var SortableTable = function (_a) {
-    var columns = _a.columns, items = _a.items, identify = _a.identify, headerValue = _a.headerValue, cellValue = _a.cellValue, disabled = _a.disabled, onChange = _a.onChange;
-    var _b = __read(useState(items), 2), records = _b[0], setRecords = _b[1];
-    var _c = __read(useState(false), 2), isDragging = _c[0], setIsDragging = _c[1];
-    useMemo$1(function () {
+const SortableTable = ({ columns, items, identify, headerValue, cellValue, disabled, onChange, }) => {
+    const [records, setRecords] = useState(items);
+    const [isDragging, setIsDragging] = useState(false);
+    useMemo$1(() => {
         return setRecords(items);
     }, [items]);
-    var onDragStart = function () {
+    const onDragStart = () => {
         setIsDragging(true);
     };
-    var onDragEnd = function (result) {
+    const onDragEnd = (result) => {
         setIsDragging(false);
         if (result.destination) {
-            var newOrder = reorder(records, result.source.index, result.destination.index);
+            const newOrder = reorder(records, result.source.index, result.destination.index);
             setRecords(newOrder);
             onChange &&
-                onChange(newOrder.map(function (record, index) { return ({
+                onChange(newOrder.map((record, index) => ({
                     id: identify(record),
-                    index: index,
-                }); }));
+                    index,
+                })));
         }
     };
-    var headers = useMemo$1(function () {
-        return columns.map(function (column) {
-            return castCellNode(headerValue ? headerValue(column) : column);
-        });
+    const headers = useMemo$1(() => {
+        return columns.map((column) => castCellNode(headerValue ? headerValue(column) : column));
     }, [columns, headerValue]);
-    var getCellValue = useCallback$1(function (column, item) {
+    const getCellValue = useCallback$1((column, item) => {
         return castCellNode(cellValue ? cellValue(column, item) : item[column]);
     }, [cellValue]);
-    var render = useCallback$1(function (item) {
-        return columns.map(function (column) { return getCellValue(column, item); });
-    }, [columns, getCellValue]);
+    const render = useCallback$1((item) => columns.map((column) => getCellValue(column, item)), [columns, getCellValue]);
     return (React__default.createElement(Table$1, null,
         React__default.createElement(TableHead, null,
             React__default.createElement(TableRow, null,
                 React__default.createElement(SortableTableCell, { locked: isDragging }),
-                headers.map(function (_a, index) {
-                    var value = _a.value, properties = _a.properties;
-                    return (React__default.createElement(SortableTableCell, __assign({ key: "header-".concat(index), locked: isDragging }, properties), value));
+                headers.map(({ value, properties }, index) => {
+                    return (React__default.createElement(SortableTableCell, { key: `header-${index}`, locked: isDragging, ...properties }, value));
                 }))),
         React__default.createElement(DragDropContext, { onDragEnd: onDragEnd, onBeforeDragStart: onDragStart },
-            React__default.createElement(ConnectedDroppable, { droppableId: "droppable", direction: "vertical" }, function (provided) { return (React__default.createElement(TableBody$1, __assign({ ref: provided.innerRef }, provided.droppableProps),
-                records.map(function (item, index) {
-                    var props = {
+            React__default.createElement(ConnectedDroppable, { droppableId: "droppable", direction: "vertical" }, (provided) => (React__default.createElement(TableBody$1, { ref: provided.innerRef, ...provided.droppableProps },
+                records.map((item, index) => {
+                    const props = {
                         id: identify(item),
-                        item: item,
-                        index: index,
-                        render: render,
-                        disabled: disabled,
+                        item,
+                        index,
+                        render,
+                        disabled,
                     };
-                    return (React__default.createElement(SortableTableRow, __assign({ key: "item-".concat(props.id) }, props)));
+                    return (React__default.createElement(SortableTableRow, { key: `item-${props.id}`, ...props }));
                 }),
-                provided.placeholder)); }))));
+                provided.placeholder))))));
 };
 
-var EditorContext = createContext({});
+const EditorContext = createContext({});
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 
@@ -20419,58 +20200,52 @@ function stateFromHTML(html, options) {
   return stateFromElement(element, otherOptions);
 }
 
-var createState = function (content, decorators) {
-    var decorator = decorators ? new CompositeDecorator(decorators) : undefined;
+const createState = (content, decorators) => {
+    const decorator = decorators ? new CompositeDecorator(decorators) : undefined;
     if (content) {
-        var state = stateFromHTML(content);
+        const state = stateFromHTML(content);
         return EditorState.createWithContent(state, decorator);
     }
     return EditorState.createEmpty(decorator);
 };
-var convert2html = function (content, options) {
-    if (options === void 0) { options = {
-        inlineStyles: {
-            BOLD: { element: 'strong' },
-            ITALIC: { element: 'i' },
-            UNSTYLED: { element: 'p' },
-        },
-    }; }
-    var html = content.getPlainText().trim().length
+const convert2html = (content, options = {
+    inlineStyles: {
+        BOLD: { element: 'strong' },
+        ITALIC: { element: 'i' },
+        UNSTYLED: { element: 'p' },
+    },
+}) => {
+    const html = content.getPlainText().trim().length
         ? stateToHTML(content, options)
         : '';
     return html; //.replace(/&nbsp;/, ' ');
 };
-var convert2txt = function (content) {
-    return content.getPlainText();
-};
-var parseContentState = function (state) { return ({
+const convert2txt = (content) => content.getPlainText();
+const parseContentState = (state) => ({
     txt: convert2txt(state).trim(),
     html: convert2html(state),
-}); };
-var parseContent = function (content, decorators) {
-    return parseContentState(createState(content, decorators).getCurrentContent());
-};
-var UpdateStyle = function (state, style) { return RichUtils.toggleInlineStyle(state, style); };
+});
+const parseContent = (content, decorators) => parseContentState(createState(content, decorators).getCurrentContent());
+const UpdateStyle = (state, style) => RichUtils.toggleInlineStyle(state, style);
 
-var Provider = function (_a) {
-    var html = _a.html, decorators = _a.decorators, children = _a.children;
-    var _b = __read(useState(createState('', decorators)), 2), state = _b[0], setState = _b[1];
-    var _c = __read(useState(), 2), selection = _c[0], setSelection = _c[1];
-    useMemo$1(function () {
+const Provider = ({ html, decorators, children, }) => {
+    const [state, setState] = useState(createState('', decorators));
+    const [selection, setSelection] = useState();
+    useMemo$1(() => {
         console.debug('creating new state for editor', html);
         setState(createState(html, decorators));
     }, [html, decorators]);
     return (React__default.createElement(EditorContext.Provider, { value: {
-            state: state,
-            setState: setState,
-            selection: selection,
-            setSelection: setSelection,
+            state,
+            setState,
+            selection,
+            setSelection,
         } }, children));
 };
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-var useButtonStyles = makeStyles()({
+const useButtonStyles = makeStyles()({
     btn: {
         backgroundColor: 'white',
         '&:hover': {
@@ -20485,121 +20260,114 @@ var useButtonStyles = makeStyles()({
     },
 });
 
-var useEditorStyles = makeStyles()(function (theme, _a) {
-    var hasFocus = _a.hasFocus, hasContent = _a.hasContent, readOnly = _a.readOnly;
-    return ({
-        root: {
-            position: 'relative',
-            display: 'inline-flex',
-            flexFlow: 'column',
-            minWidth: '100%', // TODO
-        },
-        legend: {
-            position: 'absolute',
-            top: -5,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            lineHeight: '11px',
-            zIndex: hasFocus ? 0 : 1,
-            paddingLeft: 10,
-            borderStyle: 'solid',
-            borderRadius: theme.shape.borderRadius,
-            borderWidth: hasFocus ? 2 : 1,
+const useEditorStyles = makeStyles()((theme, { hasFocus, hasContent, readOnly }) => ({
+    root: {
+        position: 'relative',
+        display: 'inline-flex',
+        flexFlow: 'column',
+        minWidth: '100%', // TODO
+    },
+    legend: {
+        position: 'absolute',
+        top: -5,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        lineHeight: '11px',
+        zIndex: hasFocus ? 0 : 1,
+        paddingLeft: 10,
+        borderStyle: 'solid',
+        borderRadius: theme.shape.borderRadius,
+        borderWidth: hasFocus ? 2 : 1,
+        borderColor: hasFocus
+            ? theme.palette.primary.main
+            : hex2rgba('#000', 0.23),
+        '&:hover': {
             borderColor: hasFocus
                 ? theme.palette.primary.main
-                : hex2rgba('#000', 0.23),
-            '&:hover': {
-                borderColor: hasFocus
-                    ? theme.palette.primary.main
-                    : theme.palette.text.primary,
-            },
-            transition: theme.transitions.create(['border-color'], {
-                duration: theme.transitions.duration.shorter,
-                easing: theme.transitions.easing.easeOut,
-            }),
+                : theme.palette.text.primary,
         },
-        editor: {
-            padding: '.8rem 1rem',
-            position: 'relative',
-            zIndex: hasFocus || readOnly ? 1 : 0,
-            '& .unstyled': {
-                margin: '.5rem 0',
-            },
-        },
-        label: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            zIndex: 1,
-            transform: hasFocus || hasContent
-                ? 'translate(6px, -14px) scale(0.75)'
-                : 'translate(6px, 12px) scale(1)',
-            transformOrigin: 'top left',
-            transition: theme.transitions.create(['color', 'transform'], {
-                duration: theme.transitions.duration.shorter,
-                easing: theme.transitions.easing.easeOut,
-            }),
-            color: hasFocus
-                ? theme.palette.primary[theme.palette.mode === 'light' ? 'dark' : 'light']
-                : theme.palette.text.secondary,
-            fontSize: '1.1428571428571428rem',
-            // hack @todo when time
-            backgroundColor: 'white',
-            padding: '2px 10px',
-        },
-        helpertext: {
-            margin: 0,
-            opacity: hasFocus ? 1 : 0,
-            transition: theme.transitions.create(['opacity'], {
-                duration: theme.transitions.duration.shorter,
-                easing: theme.transitions.easing.easeOut,
-            }),
-            fontSize: 'small',
-            // hack @todo when time
-            backgroundColor: 'white',
-            padding: '2px 10px',
-        },
-        charcount: {
-            margin: 0,
-            transition: theme.transitions.create(['opacity'], {
-                duration: theme.transitions.duration.shorter,
-                easing: theme.transitions.easing.easeOut,
-            }),
-            fontSize: 'small',
-            // hack @todo when time
-            backgroundColor: 'white',
-            padding: '2px 10px',
+        transition: theme.transitions.create(['border-color'], {
+            duration: theme.transitions.duration.shorter,
+            easing: theme.transitions.easing.easeOut,
+        }),
+    },
+    editor: {
+        padding: '.8rem 1rem',
+        position: 'relative',
+        zIndex: hasFocus || readOnly ? 1 : 0,
+        '& .unstyled': {
+            margin: '.5rem 0',
         },
-    });
-});
+    },
+    label: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        zIndex: 1,
+        transform: hasFocus || hasContent
+            ? 'translate(6px, -14px) scale(0.75)'
+            : 'translate(6px, 12px) scale(1)',
+        transformOrigin: 'top left',
+        transition: theme.transitions.create(['color', 'transform'], {
+            duration: theme.transitions.duration.shorter,
+            easing: theme.transitions.easing.easeOut,
+        }),
+        color: hasFocus
+            ? theme.palette.primary[theme.palette.mode === 'light' ? 'dark' : 'light']
+            : theme.palette.text.secondary,
+        fontSize: '1.1428571428571428rem',
+        // hack @todo when time
+        backgroundColor: 'white',
+        padding: '2px 10px',
+    },
+    helpertext: {
+        margin: 0,
+        opacity: hasFocus ? 1 : 0,
+        transition: theme.transitions.create(['opacity'], {
+            duration: theme.transitions.duration.shorter,
+            easing: theme.transitions.easing.easeOut,
+        }),
+        fontSize: 'small',
+        // hack @todo when time
+        backgroundColor: 'white',
+        padding: '2px 10px',
+    },
+    charcount: {
+        margin: 0,
+        transition: theme.transitions.create(['opacity'], {
+            duration: theme.transitions.duration.shorter,
+            easing: theme.transitions.easing.easeOut,
+        }),
+        fontSize: 'small',
+        // hack @todo when time
+        backgroundColor: 'white',
+        padding: '2px 10px',
+    },
+}));
 
-var useFloatingToolbarStyles = makeStyles()(function (_theme, _a) {
-    var isVisible = _a.isVisible;
-    return ({
-        root: {
-            position: 'absolute',
-            zIndex: 9,
-            transition: 'transform 0.15s cubic-bezier(.3,1.2,.2,1)',
-            visibility: isVisible ? 'visible' : 'hidden',
-            transform: isVisible
-                ? 'translate(-50%) scale(1)'
-                : 'translate(-50%) scale(0)',
-        },
-    });
-});
+const useFloatingToolbarStyles = makeStyles()((_theme, { isVisible }) => ({
+    root: {
+        position: 'absolute',
+        zIndex: 9,
+        transition: 'transform 0.15s cubic-bezier(.3,1.2,.2,1)',
+        visibility: isVisible ? 'visible' : 'hidden',
+        transform: isVisible
+            ? 'translate(-50%) scale(1)'
+            : 'translate(-50%) scale(0)',
+    },
+}));
 
-var InlineButton = function (_a) {
-    var type = _a.type; _a.editor; var children = _a.children, props = __rest$1(_a, ["type", "editor", "children"]);
-    var classes = useButtonStyles().classes;
-    var _b = useContext(EditorContext), state = _b.state, setState = _b.setState;
-    var onClick = function (event) {
+const InlineButton = ({ type, editor: _editor, children, ...props }) => {
+    const { classes } = useButtonStyles();
+    const { state, setState } = useContext(EditorContext);
+    const onClick = (event) => {
         event.preventDefault();
-        var e = event;
+        const e = event;
         setState(UpdateStyle(state, e.currentTarget.value));
     };
-    var selected = state.getCurrentInlineStyle().has(type);
-    return (React__default.createElement(ToggleButton, __assign({}, props, { classes: { root: classes.btn, selected: classes.btnSelected }, selected: selected, onClick: onClick, value: type, size: "small" }), children));
+    const selected = state.getCurrentInlineStyle().has(type);
+    return (React__default.createElement(ToggleButton, { ...props, classes: { root: classes.btn, selected: classes.btnSelected }, selected: selected, onClick: onClick, value: type, size: "small" }, children));
 };
 
 var ButtonType;
@@ -20607,7 +20375,7 @@ var ButtonType;
     ButtonType["bold"] = "BOLD";
     ButtonType["italic"] = "ITALIC";
 })(ButtonType || (ButtonType = {}));
-var createButton = function (style) {
+const createButton = (style) => {
     switch (style) {
         case 'bold':
             return {
@@ -20622,117 +20390,109 @@ var createButton = function (style) {
     }
 };
 
-var FloatingToolbar = function (_a) {
-    var editor = _a.editor, buttons = _a.buttons;
-    var selection = useContext(EditorContext).selection;
-    var _b = __read(useState(false), 2), isVisible = _b[0], setVisibility = _b[1];
-    var toolbar = useRef();
-    var classes = useFloatingToolbarStyles({ isVisible: isVisible }).classes;
+const FloatingToolbar = ({ editor, buttons }) => {
+    const { selection } = useContext(EditorContext);
+    const [isVisible, setVisibility] = useState(false);
+    const toolbar = useRef();
+    const { classes } = useFloatingToolbarStyles({ isVisible });
     // @eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(function () {
-        var _a;
-        var selectionRect = getVisibleSelectionRect(window);
+    useEffect(() => {
+        const selectionRect = getVisibleSelectionRect(window);
         if (!selectionRect || !toolbar.current || !editor.current)
             return;
-        var editorRoot = editor.current.editorContainer;
-        var editorRootRect = editorRoot.getBoundingClientRect();
-        var position = {
+        const editorRoot = editor.current.editorContainer;
+        const editorRootRect = editorRoot.getBoundingClientRect();
+        const position = {
             top: editorRoot.offsetTop -
-                ((_a = toolbar === null || toolbar === void 0 ? void 0 : toolbar.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) +
+                toolbar?.current?.offsetHeight +
                 (selectionRect.top - editorRootRect.top) -
                 5,
             left: editorRoot.offsetLeft +
                 (selectionRect.left - editorRootRect.left) +
                 selectionRect.width / 2,
         };
-        toolbar.current.style.top = "".concat(position.top, "px");
-        toolbar.current.style.left = "".concat(position.left, "px");
+        toolbar.current.style.top = `${position.top}px`;
+        toolbar.current.style.left = `${position.left}px`;
         setVisibility(!!selection && !selection.isCollapsed() && selection.getHasFocus());
     });
     return (React__default.createElement("div", { ref: toolbar, className: classes.root },
-        React__default.createElement(ToggleButtonGroup, null, buttons.map(function (_a, key) {
-            var type = _a.type, children = _a.children;
-            return (React__default.createElement(InlineButton, { key: key, type: type, editor: editor }, children));
-        }))));
+        React__default.createElement(ToggleButtonGroup, null, buttons.map(({ type, children }, key) => (React__default.createElement(InlineButton, { key: key, type: type, editor: editor }, children))))));
 };
 
-var customKeyHandler = function (setEditorState) { return function (command, editorState) {
+const customKeyHandler = (setEditorState) => (command, editorState) => {
     if (command === 'shift-split-block') {
-        var newState = RichUtils.insertSoftNewline(editorState);
+        const newState = RichUtils.insertSoftNewline(editorState);
         setEditorState(newState);
         return 'handled';
     }
     return 'not-handled';
-}; };
-var keyHandler = function (setEditorState, allowedStyles) { return function (command, editorState) {
-    if (!allowedStyles || allowedStyles.some(function (s) { return s === command; })) {
-        var newState = RichUtils.handleKeyCommand(editorState, command);
+};
+const keyHandler = (setEditorState, allowedStyles) => (command, editorState) => {
+    if (!allowedStyles || allowedStyles.some((s) => s === command)) {
+        const newState = RichUtils.handleKeyCommand(editorState, command);
         if (newState) {
             setEditorState(newState);
             return 'handled';
         }
     }
     return customKeyHandler(setEditorState)(command, editorState);
-}; };
+};
 
-var blockStyleFn = function (block) { return block.getType(); };
-var createDefaultButtons = function () { return [
+const blockStyleFn = (block) => block.getType();
+const createDefaultButtons = () => [
     createButton('bold'),
     createButton('italic'),
-]; };
-var getCharCount = function (editorState) {
-    return editorState.getCurrentContent().getPlainText('').length;
-};
-var EditorComponent = function (_a) {
-    var label = _a.label, classes = _a.classes, autoFocus = _a.autoFocus, helperText = _a.helperText, showCharCount = _a.showCharCount, allowedStyles = _a.allowedStyles, disableNewlines = _a.disableNewlines, onContentChange = _a.onContentChange, _b = _a.Toolbar, Toolbar = _b === void 0 ? FloatingToolbar : _b, blockPasting = _a.blockPasting, lang = _a.lang, props = __rest$1(_a, ["label", "classes", "autoFocus", "helperText", "showCharCount", "allowedStyles", "disableNewlines", "onContentChange", "Toolbar", "blockPasting", "lang"]);
-    var _c = useContext(EditorContext), state = _c.state, setState = _c.setState, setSelection = _c.setSelection;
-    var ref = useRef();
-    var canStyle = allowedStyles === undefined || allowedStyles.length > 0;
-    var buttons = !allowedStyles
+];
+const getCharCount = (editorState) => editorState.getCurrentContent().getPlainText('').length;
+const EditorComponent = ({ label, classes, autoFocus, helperText, showCharCount, allowedStyles, disableNewlines, onContentChange, Toolbar = FloatingToolbar, blockPasting, lang, ...props }) => {
+    const { state, setState, setSelection } = useContext(EditorContext);
+    const ref = useRef();
+    const canStyle = allowedStyles === undefined || allowedStyles.length > 0;
+    const buttons = !allowedStyles
         ? createDefaultButtons()
         : allowedStyles.map(createButton);
     // TODO: make prop
-    var handleKeyCommand = canStyle
+    const handleKeyCommand = canStyle
         ? keyHandler(setState, allowedStyles)
         : customKeyHandler(setState);
-    var _d = __read(useState(false), 2), hasFocus = _d[0], setFocused = _d[1];
-    var _e = __read(useState(0), 2), charCount = _e[0], setCharCount = _e[1];
+    const [hasFocus, setFocused] = useState(false);
+    const [charCount, setCharCount] = useState(0);
     // defer focus until next tick
-    var requestFocus = function () {
-        window.requestAnimationFrame(function () { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+    const requestFocus = () => {
+        window.requestAnimationFrame(() => ref.current?.focus());
     };
     // multiple components might request focus and deligate back focus
-    var onBlur = useDebounce(function () { return ref.current && setFocused(false); }, {
+    const onBlur = useDebounce(() => ref.current && setFocused(false), {
         wait: 150,
     });
-    var onFocus = function () {
+    const onFocus = () => {
         // when editor focused cancel pending defocus
         onBlur.cancel();
         setFocused(true);
     };
-    var onChange = function (nextState) {
+    const onChange = (nextState) => {
         setState(nextState);
         setSelection(nextState.getSelection());
         setCharCount(getCharCount(nextState));
     };
-    useEffect(function () {
+    useEffect(() => {
         autoFocus && ref.current && ref.current.focus();
     }, [autoFocus]);
     // hacky workaround?
-    var oldContent = useRef(state.getCurrentContent());
-    var currentContent = state.getCurrentContent();
-    useEffect(function () {
+    const oldContent = useRef(state.getCurrentContent());
+    const currentContent = state.getCurrentContent();
+    useEffect(() => {
         if (oldContent.current !== currentContent) {
             onContentChange && onContentChange(currentContent);
         }
     }, [convert2html(currentContent)]);
-    var hasContent = state.getCurrentContent().hasText();
-    var styles = useEditorStyles({
-        hasFocus: hasFocus,
-        hasContent: hasContent,
+    const hasContent = state.getCurrentContent().hasText();
+    const { classes: styles } = useEditorStyles({
+        hasFocus,
+        hasContent,
         readOnly: props.readOnly,
-    }).classes;
-    var keyBindingFn = function (e) {
+    });
+    const keyBindingFn = (e) => {
         if (disableNewlines && e.key === 'Enter')
             return null;
         if (e.key === 'Enter' && e.shiftKey) {
@@ -20742,31 +20502,40 @@ var EditorComponent = function (_a) {
             return getDefaultKeyBinding(e);
         }
     };
-    var handlePastedText = function (text, _html, editorState) {
+    const handlePastedText = (text, _html, editorState) => {
         if (!blockPasting) {
             onChange(EditorState.push(editorState, Modifier.replaceText(editorState.getCurrentContent(), editorState.getSelection(), text.replace(/\n/g, ' ')), 'remove-range'));
         }
         return 'handled';
     };
-    return (React__default.createElement(Box, { className: clsx(styles.root, classes === null || classes === void 0 ? void 0 : classes.root), onClick: requestFocus },
-        React__default.createElement("legend", { className: clsx(styles.legend, classes === null || classes === void 0 ? void 0 : classes.legend) },
+    return (React__default.createElement(Box, { className: clsx(styles.root, classes?.root), onClick: requestFocus },
+        React__default.createElement("legend", { className: clsx(styles.legend, classes?.legend) },
             React__default.createElement("span", { dangerouslySetInnerHTML: { __html: '&#8203;' } })),
-        label && (React__default.createElement("label", { className: clsx(styles.label, classes === null || classes === void 0 ? void 0 : classes.label) }, label)),
+        label && (React__default.createElement("label", { className: clsx(styles.label, classes?.label) }, label)),
         canStyle && (React__default.createElement(Toolbar, { editor: ref, buttons: buttons })),
-        React__default.createElement(Box, { className: clsx(styles.editor, classes === null || classes === void 0 ? void 0 : classes.editor), lang: lang },
-            React__default.createElement(Editor, __assign({ ref: ref }, __assign({ editorState: state, onChange: onChange, onFocus: onFocus, onBlur: onBlur, blockStyleFn: blockStyleFn, handleKeyCommand: handleKeyCommand, keyBindingFn: keyBindingFn, handlePastedText: handlePastedText }, props)))),
+        React__default.createElement(Box, { className: clsx(styles.editor, classes?.editor), lang: lang },
+            React__default.createElement(Editor, { ref: ref, ...{
+                    editorState: state,
+                    onChange,
+                    onFocus,
+                    onBlur,
+                    blockStyleFn,
+                    handleKeyCommand,
+                    keyBindingFn,
+                    handlePastedText,
+                    ...props,
+                } })),
         (showCharCount || helperText) && (React__default.createElement(Box, { margin: ".5rem" },
-            showCharCount && (React__default.createElement(FormHelperText, { className: styles.charcount }, "Antall tegn: ".concat(charCount))),
+            showCharCount && (React__default.createElement(FormHelperText, { className: styles.charcount }, `Antall tegn: ${charCount}`)),
             helperText && (React__default.createElement(FormHelperText, { className: styles.helpertext }, helperText))))));
 };
 
-var GrepEditor = function (_a) {
-    var html = _a.html, props = __rest$1(_a, ["html"]);
-    return (React__default.createElement(Provider, __assign({}, { html: html }),
-        React__default.createElement(EditorComponent, __assign({}, props))));
+const GrepEditor = ({ html, ...props }) => {
+    return (React__default.createElement(Provider, { ...{ html } },
+        React__default.createElement(EditorComponent, { ...props })));
 };
 
-var dimensions = {
+const dimensions = {
     breadcrumbsFontSize: 16,
     contentWidth: 1028,
     footerHeight: 50,
@@ -20777,7 +20546,7 @@ var dimensions = {
     toolbarMenuWidth: 1028,
     toolbarMenuHeight: 50,
 };
-var ToolbarTitle = styled(NavLink)(function () { return ({
+const ToolbarTitle = styled(NavLink)(() => ({
     display: 'flex',
     fontSize: '24px',
     color: '#303030',
@@ -20791,102 +20560,84 @@ var ToolbarTitle = styled(NavLink)(function () { return ({
         outline: 'none',
         textDecoration: 'underline',
     },
-}); });
-var EnvironmentTitle = styled('div')(function () { return ({
+}));
+const EnvironmentTitle = styled('div')(() => ({
     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;
+}));
+const Toolbar = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    [theme.breakpoints.down('sm')]: {
+        height: `${dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile}px`,
+        minHeight: `${dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile}px`,
+        maxHeight: `${dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile}px`,
+    },
+    [theme.breakpoints.up('sm')]: {
+        height: `${dimensions.toolbarMenuHeight + dimensions.toolbarHeight}px`,
+        minHeight: `${dimensions.toolbarMenuHeight + dimensions.toolbarHeight}px`,
+        maxHeight: `${dimensions.toolbarMenuHeight + dimensions.toolbarHeight}px`,
+    },
+}));
+const ToolbarFixer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 101,
+    [theme.breakpoints.down('sm')]: {
+        height: `${dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile}px`,
+        minHeight: `${dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile}px`,
+        maxHeight: `${dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile}px`,
+    },
+    [theme.breakpoints.up('sm')]: {
+        height: `${dimensions.toolbarMenuHeight + dimensions.toolbarHeight}px`,
+        minHeight: `${dimensions.toolbarMenuHeight + dimensions.toolbarHeight}px`,
+        maxHeight: `${dimensions.toolbarMenuHeight + dimensions.toolbarHeight}px`,
+    },
+}));
+const ToolbarInner = styled('div')(({ colors, 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"),
+    return {
+        alignItems: 'center',
+        display: 'flex',
+        margin: '0 auto',
+        width: '100%',
+        padding: 0,
+        backgroundColor: colors.headerBackgroundColor,
+        [theme.breakpoints.down('sm')]: {
+            height: `${dimensions.toolbarHeightMobile}px`,
+            minHeight: `${dimensions.toolbarHeightMobile}px`,
         },
-        _b[theme.breakpoints.up('sm')] = {
+        [theme.breakpoints.up('sm')]: {
             padding: 0,
-            height: "".concat(dimensions.toolbarHeight, "px"),
-            minHeight: "".concat(dimensions.toolbarHeight, "px"),
+            height: `${dimensions.toolbarHeight}px`,
+            minHeight: `${dimensions.toolbarHeight}px`,
         },
-        _b;
+    };
 });
-var ToolbarLeft = styled('div')(function () { return ({
+const ToolbarLeft = styled('div')(() => ({
     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 ({
+}));
+const ToolbarRight = styled('div')(({ theme }) => ({
+    alignItems: 'center',
+    display: 'flex',
+    marginLeft: 'auto',
+    marginRight: '40px',
+    [theme.breakpoints.down('sm')]: {
+        display: 'none',
+    },
+    [theme.breakpoints.up('sm')]: {
+        display: 'flex',
+    },
+}));
+const UserContainer = styled('div')(() => ({
     display: 'flex',
     flexDirection: 'column',
     margin: '0 17px',
@@ -20894,133 +20645,117 @@ var UserContainer = styled('div')(function () { return ({
     textTransform: 'none',
     fontWeight: '400',
     color: 'rgba(0, 0, 0, 0.87)',
-}); });
-var AccountName = styled('span')(function () { return ({
+}));
+const AccountName = styled('span')(() => ({
     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')] = {
+}));
+const ToolbarMenu = styled('div')(({ theme }) => {
+    return {
+        backgroundColor: theme.palette.primary.main,
+        height: `${dimensions.toolbarMenuHeight}px`,
+        maxHeight: `${dimensions.toolbarMenuHeight}px`,
+        minHeight: `${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)',
+        [theme.breakpoints.down('sm')]: {
             display: 'none',
         },
-        _b);
-});
-var ToolbarMenuInner = styled('div')(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
+        [theme.breakpoints.up('sm')]: {
             display: 'flex',
-            height: 'fit-content',
-            maxWidth: "".concat(dimensions.toolbarMenuWidth, "px"),
-            margin: '0 auto'
-        },
-        _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',
+const MobileToolbarMenu = styled('div')(({ theme }) => ({
+    backgroundColor: theme.palette.primary.main,
+    height: `${dimensions.toolbarMenuHeight}px`,
+    maxHeight: `${dimensions.toolbarMenuHeight}px`,
+    minHeight: `${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)',
+    [theme.breakpoints.down('sm')]: {
         display: 'flex',
-        fontSize: '16px',
-        padding: '0 17px',
-        height: '100%',
-        textTransform: 'capitalize',
-        userSelect: 'none',
-        position: 'relative',
-        textDecoration: 'none',
-        fontWeight: 500,
-        ':first-child': {
-            paddingLeft: 0,
-            ':after': {
-                marginLeft: '-24px',
-            },
-        },
-        ':last-child': {
-            borderRight: 'none',
-        },
+    },
+    [theme.breakpoints.up('sm')]: {
+        display: 'none',
+    },
+}));
+const ToolbarMenuInner = styled('div')(({ theme }) => ({
+    display: 'flex',
+    height: 'fit-content',
+    maxWidth: `${dimensions.toolbarMenuWidth}px`,
+    margin: '0 auto',
+    [theme.breakpoints.down('lg')]: {
+        padding: '0 24px',
+    },
+    [theme.breakpoints.up('lg')]: {
+        padding: 0,
+    },
+}));
+const menuItemHoverGreen = '#B9E1CC';
+const ToolbarMenuItem = styled(NavLink)(({ theme }) => ({
+    alignItems: 'center',
+    borderRight: '1px solid #696868',
+    color: theme.palette.background.default,
+    cursor: 'pointer',
+    display: 'flex',
+    fontSize: '16px',
+    padding: '0 17px',
+    height: '100%',
+    textTransform: 'capitalize',
+    userSelect: 'none',
+    position: 'relative',
+    textDecoration: 'none',
+    fontWeight: 500,
+    ':first-child': {
+        paddingLeft: 0,
         ':after': {
-            position: 'absolute',
-            bottom: 0,
-            left: '50%',
-            width: '32px',
-            marginLeft: '-16px',
-            borderBottom: "2px solid ".concat(theme.palette.secondary.light),
-            opacity: 0,
-            content: '""',
-            transition: 'all 0.3s ease',
-            pointerEvents: 'none',
-        },
-        ':focus': {
-            outline: 'none',
-            color: menuItemHoverGreen,
-            ':after': {
-                bottom: '-4px',
-                opacity: '1',
-            },
+            marginLeft: '-24px',
         },
-        ':hover': {
-            textDecoration: 'none',
-            color: menuItemHoverGreen,
-            ':after': {
-                bottom: '-4px',
-                opacity: '1',
-            },
+    },
+    ':last-child': {
+        borderRight: 'none',
+    },
+    ':after': {
+        position: 'absolute',
+        bottom: 0,
+        left: '50%',
+        width: '32px',
+        marginLeft: '-16px',
+        borderBottom: `2px solid ${theme.palette.secondary.light}`,
+        opacity: 0,
+        content: '""',
+        transition: 'all 0.3s ease',
+        pointerEvents: 'none',
+    },
+    ':focus': {
+        outline: 'none',
+        color: menuItemHoverGreen,
+        ':after': {
+            bottom: '-4px',
+            opacity: '1',
         },
-        '.active:after': {
+    },
+    ':hover': {
+        textDecoration: 'none',
+        color: menuItemHoverGreen,
+        ':after': {
             bottom: '-4px',
             opacity: '1',
         },
-    });
-});
-var MobileToolbarMenuItem = styled(NavLink)(function () { return ({
+    },
+    '.active:after': {
+        bottom: '-4px',
+        opacity: '1',
+    },
+}));
+const MobileToolbarMenuItem = styled(NavLink)(() => ({
     alignItems: 'center',
     color: 'black',
     cursor: 'pointer',
@@ -21030,24 +20765,23 @@ var MobileToolbarMenuItem = styled(NavLink)(function () { return ({
     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) {
+const MobileAppBar = ({ userMenuItems, menuItems, }) => {
+    const [anchorElNav, setAnchorElNav] = React.useState(null);
+    const openNav = Boolean(anchorElNav);
+    const handleClickNav = (event) => {
         setAnchorElNav(event.currentTarget);
     };
-    var handleCloseNav = function () {
+    const handleCloseNav = () => {
         setAnchorElNav(null);
     };
-    var _c = __read(React.useState(null), 2), anchorElMenu = _c[0], setAnchorElMenu = _c[1];
-    var openMenu = Boolean(anchorElMenu);
-    var handleClickMenu = function (event) {
+    const [anchorElMenu, setAnchorElMenu] = React.useState(null);
+    const openMenu = Boolean(anchorElMenu);
+    const handleClickMenu = (event) => {
         setAnchorElMenu(event.currentTarget);
     };
-    var handleCloseMenu = function () {
+    const handleCloseMenu = () => {
         setAnchorElMenu(null);
     };
     return (React.createElement(MobileToolbarMenu, { style: { flexGrow: 1 } },
@@ -21057,40 +20791,39 @@ var MobileAppBar = function (_a) {
                     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 || '' },
+                    } }, menuItems.map((page) => (React.createElement(MobileToolbarMenuItem, { key: page.name, to: page.redirectUrl || '' },
                     React.createElement(MenuItem, { sx: {
                             width: '100%',
-                        }, key: page.name }, page.translatedTextRef))); })),
+                        }, 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 () {
+                    } }, userMenuItems.map((i, index) => (React.createElement(Box, { key: i.id },
+                    React.createElement(MenuItem, { key: i.id, onClick: () => {
                             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))); }))))));
+                    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) {
+const AppBar = ({ username, currentPath, isProd, appTitle, userMenuItems, menuItems, userRole, colors, }) => {
+    const [userMenuAnchor, setUserMenuAnchor] = React.useState(null);
+    const _handleIconButtonClick = (event) => {
         event.preventDefault();
         setUserMenuAnchor(event.currentTarget);
     };
-    var _handleCloseUserMenu = function () {
+    const _handleCloseUserMenu = () => {
         setUserMenuAnchor(null);
     };
-    var _renderToolbarMenuItem = function (page) {
-        var isActive = (page === null || page === void 0 ? void 0 : page.exact)
+    const _renderToolbarMenuItem = (page) => {
+        const isActive = 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(ToolbarMenuItem, { className: isActive ? 'active' : '', to: page.redirectUrl || '', key: page.name, tabIndex: 0 }, page?.translatedTextRef));
     };
     return (React.createElement(Toolbar, null,
         React.createElement(ToolbarFixer, null,
@@ -21112,8 +20845,8 @@ var AppBar = function (_a) {
                         }, transformOrigin: {
                             vertical: 'top',
                             horizontal: 'center',
-                        } }, userMenuItems.map(function (i, index) {
-                        return (React.createElement(MenuItem$1, { key: i.id, onClick: function () {
+                        } }, userMenuItems.map((i, index) => {
+                        return (React.createElement(MenuItem$1, { key: i.id, onClick: () => {
                                 setUserMenuAnchor(null);
                                 i.action && i.action();
                             }, divider: userMenuItems.length > index + 1, sx: {
@@ -21126,36 +20859,35 @@ var AppBar = function (_a) {
                             }, rel: "noreferrer", href: i.href, onClick: i.onClick }, i.label)) : (i.label)));
                     })))),
             React.createElement(ToolbarMenu, { role: "navigation" },
-                React.createElement(ToolbarMenuInner, null, menuItems.map(function (page) { return _renderToolbarMenuItem(page); }))),
+                React.createElement(ToolbarMenuInner, null, menuItems.map((page) => _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];
-    var _c = __read(React.useState(false), 2), leave = _c[0], setLeave = _c[1];
-    var _d = __read(React.useState(), 2), lastLocation = _d[0], setLastLocation = _d[1];
-    var dispatch = useDispatch();
-    var handleCancel = function () {
+const NavGuard = ({ when, title, txt, txtSave, txtCancel, txtDiscard, onSave, onCancel, onDiscard, }) => {
+    const [open, setOpen] = React.useState(false);
+    const [leave, setLeave] = React.useState(false);
+    const [lastLocation, setLastLocation] = React.useState();
+    const dispatch = useDispatch();
+    const handleCancel = () => {
         setLeave(false);
         setOpen(false);
         onCancel && onCancel();
     };
-    var handleDiscard = function () {
+    const handleDiscard = () => {
         setLeave(true);
         setOpen(false);
         onDiscard && onDiscard();
         lastLocation &&
-            window.requestAnimationFrame(function () { return dispatch(push(lastLocation)); });
+            window.requestAnimationFrame(() => dispatch(push(lastLocation)));
     };
-    var handleSave = function () {
+    const handleSave = () => {
         onSave && onSave();
         setLeave(true);
         setOpen(false);
         lastLocation &&
-            window.requestAnimationFrame(function () { return dispatch(push(lastLocation)); });
+            window.requestAnimationFrame(() => dispatch(push(lastLocation)));
     };
-    var handleLeave = function (location) {
+    const handleLeave = (location) => {
         setLastLocation(location);
         setOpen(!leave);
         return !!leave;
@@ -21172,21 +20904,17 @@ var NavGuard = function (_a) {
                 onSave && (React.createElement(Button, { onClick: handleSave, color: "primary" }, txtSave))))));
 };
 
-var useStyles$3 = makeStyles()(function (_a) {
-    var palette = _a.palette;
-    return ({
-        discard: {
-            color: palette.error.main,
-            '&:hover': {
-                backgroundColor: hex2rgba(palette.error.main, 0.1),
-            },
+const useStyles$3 = makeStyles()(({ palette }) => ({
+    discard: {
+        color: palette.error.main,
+        '&:hover': {
+            backgroundColor: hex2rgba(palette.error.main, 0.1),
         },
-    });
-});
+    },
+}));
 
-var ConfirmationDialog = function (_a) {
-    var open = _a.open, title = _a.title, description = _a.description, warning = _a.warning, onSubmit = _a.onSubmit, onCancel = _a.onCancel, _b = _a.confirmText, confirmText = _b === void 0 ? 'OK' : _b, _c = _a.cancelText, cancelText = _c === void 0 ? 'Avbryt' : _c;
-    var classes = useStyles$3().classes;
+const ConfirmationDialog = ({ open, title, description, warning, onSubmit, onCancel, confirmText = 'OK', cancelText = 'Avbryt', }) => {
+    const { classes } = useStyles$3();
     return (React__default.createElement(Dialog, { open: open },
         React__default.createElement(DialogTitle, null, title),
         React__default.createElement(DialogContent, null,
@@ -21196,62 +20924,56 @@ var ConfirmationDialog = function (_a) {
             React__default.createElement(Button, { className: warning ? classes.discard : '', onClick: onSubmit }, confirmText))));
 };
 
-var ConfirmationServiceContext = React__default.createContext(Promise.reject);
-var ConfirmationServiceProvider = function (_a) {
-    var children = _a.children;
-    var _b = __read(React__default.useState(null), 2), confirmationState = _b[0], setConfirmationState = _b[1];
-    var _c = __read(React__default.useState(false), 2), dialogOpen = _c[0], setDialogOpen = _c[1];
-    var awaitingPromiseRef = React__default.useRef();
-    var openDialog = function (options) {
+const ConfirmationServiceContext = React__default.createContext(Promise.reject);
+const ConfirmationServiceProvider = ({ children, }) => {
+    const [confirmationState, setConfirmationState] = React__default.useState(null);
+    const [dialogOpen, setDialogOpen] = React__default.useState(false);
+    const awaitingPromiseRef = React__default.useRef();
+    const openDialog = (options) => {
         setConfirmationState(options);
         setDialogOpen(true);
-        return new Promise(function (resolve, reject) {
-            awaitingPromiseRef.current = { resolve: resolve, reject: reject };
+        return new Promise((resolve, reject) => {
+            awaitingPromiseRef.current = { resolve, reject };
         });
     };
-    var handleCancel = function () {
+    const handleCancel = () => {
         setDialogOpen(false);
     };
-    var handleSubmit = function () {
-        var _a;
-        (_a = awaitingPromiseRef.current) === null || _a === void 0 ? void 0 : _a.resolve();
+    const handleSubmit = () => {
+        awaitingPromiseRef.current?.resolve();
         setDialogOpen(false);
     };
     return (React__default.createElement(ConfirmationServiceContext.Provider, { value: openDialog },
-        React__default.createElement(ConfirmationDialog, __assign({ open: dialogOpen, onSubmit: handleSubmit, onCancel: handleCancel }, confirmationState)),
+        React__default.createElement(ConfirmationDialog, { open: dialogOpen, onSubmit: handleSubmit, onCancel: handleCancel, ...confirmationState }),
         children));
 };
-var useConfirmation = function () {
-    return React__default.useContext(ConfirmationServiceContext);
-};
+const useConfirmation = () => React__default.useContext(ConfirmationServiceContext);
 
-var GrepDialog = function (_a) {
-    var open = _a.open, title = _a.title, content = _a.content, onClose = _a.onClose, _b = _a.closeBtnText, closeBtnText = _b === void 0 ? 'Lukk' : _b, props = __rest$1(_a, ["open", "title", "content", "onClose", "closeBtnText"]);
-    var actions = [
+const GrepDialog = ({ open, title, content, onClose, closeBtnText = 'Lukk', ...props }) => {
+    const actions = [
         React__default.createElement(Button, { key: "OK", color: "primary", onClick: onClose }, closeBtnText),
     ];
     if (props.actions)
-        actions.push.apply(actions, __spreadArray([], __read(props.actions), false));
+        actions.push(...props.actions);
     return (React__default.createElement(Dialog, { open: open, onClose: onClose },
         React__default.createElement(DialogTitle, null, title),
         React__default.createElement(DialogContent, null, content),
-        React__default.createElement(DialogActions, null, actions.map(function (action) { return action; }))));
+        React__default.createElement(DialogActions, null, actions.map((action) => action))));
 };
 
-var GrepDialogServiceContext = React__default.createContext(function () { return null; });
-var GrepDialogServiceProvider = function (_a) {
-    var children = _a.children;
-    var _b = __read(React__default.useState(false), 2), dialogOpen = _b[0], setDialogOpen = _b[1];
-    var _c = __read(React__default.useState({}), 2), dialogState = _c[0], setDialogState = _c[1];
-    var openDialog = function (options) {
+const GrepDialogServiceContext = React__default.createContext(() => null);
+const GrepDialogServiceProvider = ({ children, }) => {
+    const [dialogOpen, setDialogOpen] = React__default.useState(false);
+    const [dialogState, setDialogState] = React__default.useState({});
+    const openDialog = (options) => {
         setDialogState(options);
         setDialogOpen(true);
     };
     return (React__default.createElement(GrepDialogServiceContext.Provider, { value: openDialog },
-        React__default.createElement(GrepDialog, __assign({ open: dialogOpen, onClose: function () { return setDialogOpen(false); } }, dialogState)),
+        React__default.createElement(GrepDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), ...dialogState }),
         children));
 };
-var useGrepDialog = function () { return React__default.useContext(GrepDialogServiceContext); };
+const useGrepDialog = () => React__default.useContext(GrepDialogServiceContext);
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -21693,89 +21415,89 @@ function toNumber(value) {
 
 var lodash_throttle = throttle;
 
-var generateElementId = function (element) {
-    var tmpId = element.innerText.replace(/\s/g, '-').toLowerCase();
-    var id = tmpId, index = 1;
+const generateElementId = (element) => {
+    const tmpId = element.innerText.replace(/\s/g, '-').toLowerCase();
+    let id = tmpId, index = 1;
     while (document.getElementById(id)) {
-        id = "".concat(tmpId, "-").concat(++index);
+        id = `${tmpId}-${++index}`;
     }
     return id;
 };
-var identifyElement = function (identify) {
+const identifyElement = (identify) => {
     identify = identify || generateElementId;
-    return function (element) {
+    return (element) => {
         !element.id && (element.id = identify(element));
         return element.id;
     };
 };
 
-var initial = {
+const initial = {
     elements: {},
-    setSelected: function () {
+    setSelected: () => {
         throw Error('not implemented');
     },
 };
-var context = React__default.createContext(initial);
+const context = React__default.createContext(initial);
 context.displayName = 'Grep.ToC.Context';
 
-var defaultSelector = __spreadArray([], __read(new Array(9)), false).map(function (_, i) { return "h".concat(i + 1, ":not([role=\"presentation\"])"); })
+const defaultSelector = [...new Array(9)]
+    .map((_, i) => `h${i + 1}:not([role="presentation"])`)
     .join(',');
-var GrepTableOfContentProvider = function (_a) {
-    var props = __rest$1(_a, []);
-    var container = props.container, identifier = props.identifier, onSelected = props.onSelected, classes = props.classes, scrollTarget = props.scrollTarget, children = props.children, _b = props.offsetTop, offsetTop = _b === void 0 ? -10 : _b, _c = props.identifyElementFn, identifyElementFn = _c === void 0 ? identifyElement : _c;
-    var _d = __read(useState(), 2), selected = _d[0], _setSelected = _d[1];
-    var _e = __read(useState(), 2), initialized = _e[0], setInitialized = _e[1];
-    var hash = useSelector(function (s) { return decodeURI(getHash(s)); }).substring(1);
-    var scrollToElement = useCallback$1(function (element) {
-        var target = scrollTarget || window;
-        var elementBounds = element.getBoundingClientRect();
-        var elementTop = elementBounds.top - element.clientHeight;
-        var top = elementTop - offsetTop;
-        target.scrollBy({ top: top });
+const GrepTableOfContentProvider = ({ ...props }) => {
+    const { container, identifier, onSelected, classes, scrollTarget, children, offsetTop = -10, identifyElementFn = identifyElement, } = props;
+    const [selected, _setSelected] = useState();
+    const [initialized, setInitialized] = useState();
+    const hash = useSelector((s) => decodeURI(getHash(s))).substring(1);
+    const scrollToElement = useCallback$1((element) => {
+        const target = scrollTarget || window;
+        const elementBounds = element.getBoundingClientRect();
+        const elementTop = elementBounds.top - element.clientHeight;
+        const top = elementTop - offsetTop;
+        target.scrollBy({ top });
     }, [scrollTarget, offsetTop]);
-    var identify = useMemo$1(function () {
+    const identify = useMemo$1(() => {
         return identifyElementFn(identifier || generateElementId);
     }, [identifier, identifyElementFn]);
-    var elements = useContentElements(container, props.selector || defaultSelector, { identify: identify });
-    var setSelected = useCallback$1(lodash_throttle(function (element, scroll) {
+    const elements = useContentElements(container, props.selector || defaultSelector, { identify });
+    const setSelected = useCallback$1(lodash_throttle((element, scroll) => {
         element && scroll && scrollToElement(element);
         _setSelected(element);
     }, 50, { trailing: false }), [_setSelected, scrollToElement]);
-    var getViewportElement = useCallback$1(function () {
-        var records = Object.values(elements);
+    const getViewportElement = useCallback$1(() => {
+        const records = Object.values(elements);
         if (!records.length)
             return;
-        var index = records.findIndex(function (e) { return e.getBoundingClientRect().bottom > offsetTop; });
+        const index = records.findIndex((e) => e.getBoundingClientRect().bottom > offsetTop);
         if (index > 0) {
-            var rect = records[index].getBoundingClientRect();
-            var offset = Math.floor(rect.top - offsetTop);
-            var within = offset < rect.height + 20;
+            const rect = records[index].getBoundingClientRect();
+            const offset = Math.floor(rect.top - offsetTop);
+            const within = offset < rect.height + 20;
             return records[within ? index : index - 1];
         }
         return records[index];
     }, [elements, offsetTop]);
     // attach observer to elements
-    useEffect(function () {
-        var target = scrollTarget || window;
+    useEffect(() => {
+        const target = scrollTarget || window;
         if (!target)
             return;
-        var onScroll = lodash_throttle(function () {
-            var element = getViewportElement();
+        const onScroll = lodash_throttle(() => {
+            const element = getViewportElement();
             setSelected(element);
         }, 50);
         target.addEventListener('scroll', onScroll, false);
         console.debug('scroll observer attached');
-        return function () {
+        return () => {
             console.debug('scroll observer detached');
             return target.removeEventListener('scroll', onScroll);
         };
     }, [scrollTarget, setSelected, offsetTop, getViewportElement]);
     // notify observer when selected change
-    useEffect(function () {
+    useEffect(() => {
         selected && onSelected && onSelected(selected);
     }, [selected, onSelected]);
     // observe changes in hash
-    useEffect(function () {
+    useEffect(() => {
         if (hash && elements[hash]) {
             console.debug('anchor change, setting selected element');
             setSelected(elements[hash], true);
@@ -21787,17 +21509,15 @@ var GrepTableOfContentProvider = function (_a) {
         setSelected(elements[hash], true);
         setInitialized(true);
     }
-    return (React__default.createElement(context.Provider, { value: { elements: elements, selected: selected, classes: classes, setSelected: setSelected } }, children));
+    return (React__default.createElement(context.Provider, { value: { elements, selected, classes, setSelected } }, children));
 };
 GrepTableOfContentProvider.displayName = 'Grep.ToC.Provider';
 
-var useStyles$2 = makeStyles()(function (_a, _b) {
-    var palette = _a.palette;
-    var lvl = _b.lvl;
-    var defaultColor = convertToRgba(palette.primary.main, 0.75);
-    var linkcolor = "var(--grep-toc-link-color, ".concat(defaultColor, ")");
-    var selectedColor = "var(--grep-toc-selected-color, ".concat(palette.primary.main, ")");
-    var focusBackground = "var(--grep-toc-focused-background, ".concat(convertToRgba(palette.primary.main, 0.1), ")");
+const useStyles$2 = makeStyles()(({ palette }, { lvl }) => {
+    const defaultColor = convertToRgba(palette.primary.main, 0.75);
+    const linkcolor = `var(--grep-toc-link-color, ${defaultColor})`;
+    const selectedColor = `var(--grep-toc-selected-color, ${palette.primary.main})`;
+    const focusBackground = `var(--grep-toc-focused-background, ${convertToRgba(palette.primary.main, 0.1)})`;
     return {
         root: {
             color: linkcolor,
@@ -21813,7 +21533,7 @@ var useStyles$2 = makeStyles()(function (_a, _b) {
             textOverflow: 'ellipsis',
             '&--selected': {
                 color: selectedColor,
-                borderLeft: "5px solid ".concat(selectedColor),
+                borderLeft: `5px solid ${selectedColor}`,
             },
             '&:focus': {
                 outline: 'none',
@@ -21823,48 +21543,47 @@ var useStyles$2 = makeStyles()(function (_a, _b) {
     };
 });
 
-var GrepTableOfContentNavTreeNode = function (props) {
-    var linkRef = useRef(null);
-    var node = props.node, style = props.style, renderChilds = props.renderChilds, setSelectedValue = props.setSelectedValue, percentageRendered = props.percentageRendered;
-    var lvl = node.lvl, el = node.el, index = node.index, children = node.children;
-    var _a = useContext(context), selected = _a.selected, setSelected = _a.setSelected, classes = _a.classes, elements = _a.elements;
-    var isSelected = el === selected;
-    var styles = useStyles$2({ lvl: lvl }).classes;
-    var className = clsx('grep-toc__nav-tree-node', isSelected && 'grep-toc__nav-tree-node--selected', styles.root, classes === null || classes === void 0 ? void 0 : classes.node, props.className);
-    var _b = __read(useState(false), 2), awaitingRender = _b[0], setAwaitingRender = _b[1];
-    var txt = el.innerText;
-    var location = useSelector(function (s) { return getLocation(s); });
-    var url = "".concat(location.pathname).concat(location.search, "#").concat(node.id);
-    useEffect(function () {
-        var link = linkRef.current;
+const GrepTableOfContentNavTreeNode = (props) => {
+    const linkRef = useRef(null);
+    const { node, style, renderChilds, setSelectedValue, percentageRendered } = props;
+    const { lvl, el, index, children } = node;
+    const { selected, setSelected, classes, elements } = useContext(context);
+    const isSelected = el === selected;
+    const { classes: styles } = useStyles$2({ lvl });
+    const className = clsx('grep-toc__nav-tree-node', isSelected && 'grep-toc__nav-tree-node--selected', styles.root, classes?.node, props.className);
+    const [awaitingRender, setAwaitingRender] = useState(false);
+    const txt = el.innerText;
+    const location = useSelector((s) => getLocation(s));
+    const url = `${location.pathname}${location.search}#${node.id}`;
+    useEffect(() => {
+        const link = linkRef.current;
         if (isSelected) {
-            link === null || link === void 0 ? void 0 : link.scrollIntoViewIfNeeded();
+            link?.scrollIntoViewIfNeeded();
             //setTimeout(() => link?.scrollIntoViewIfNeeded(), 2000);
         }
         else if (link === document.activeElement) {
-            link === null || link === void 0 ? void 0 : link.blur();
+            link?.blur();
         }
     }, [isSelected, linkRef, setSelectedValue]);
-    var tabIndex = isSelected ? 0 : -1;
-    useEffect(function () {
+    const tabIndex = isSelected ? 0 : -1;
+    useEffect(() => {
         if (awaitingRender) {
             doSelect();
             setAwaitingRender(false);
         }
     }, [percentageRendered]);
-    var doSelect = function (checkAwaitRender) {
-        if (checkAwaitRender === void 0) { checkAwaitRender = false; }
+    const doSelect = (checkAwaitRender = false) => {
         window.history.replaceState({}, txt, url);
         setSelected(el, true);
-        var values = Object.values(elements);
-        var newPercentage = values.findIndex(function (e) { return e === el; }) / values.length + 0.1;
+        const values = Object.values(elements);
+        const newPercentage = values.findIndex((e) => e === el) / values.length + 0.1;
         setSelectedValue(newPercentage);
         if (checkAwaitRender && newPercentage > percentageRendered) {
             setAwaitingRender(true);
         }
     };
     return (React__default.createElement("li", { key: index, "data-lvl": lvl, className: className, style: style },
-        React__default.createElement(Link$1, { ref: linkRef, className: clsx(styles.link, isSelected && "".concat(styles.link, "--selected")), href: url, tabIndex: tabIndex, onClick: function (event) {
+        React__default.createElement(Link$1, { ref: linkRef, className: clsx(styles.link, isSelected && `${styles.link}--selected`), href: url, tabIndex: tabIndex, onClick: (event) => {
                 console.debug('node click', node);
                 event.preventDefault();
                 event.stopPropagation();
@@ -21874,7 +21593,7 @@ var GrepTableOfContentNavTreeNode = function (props) {
 };
 GrepTableOfContentNavTreeNode.displayName = 'Grep.ToC.NavTree.Node';
 
-var useStyles$1 = makeStyles()(function () { return ({
+const useStyles$1 = makeStyles()(() => ({
     root: {
         listStyle: 'none',
         padding: 0,
@@ -21882,18 +21601,18 @@ var useStyles$1 = makeStyles()(function () { return ({
             fontSize: '.9em',
         },
     },
-}); });
-
-var NavTree = function (props) {
-    var elements = props.elements, style = props.style, setSelectedValue = props.setSelectedValue, percentageRendered = props.percentageRendered;
-    var classes = useContext(context).classes;
-    var styles = useStyles$1().classes;
-    var className = clsx('grep-toc__nav-tree', styles.root, classes === null || classes === void 0 ? void 0 : classes.tree, props.className);
-    return (React__default.createElement("ul", { className: className, style: style }, Object.values(elements).map(function (node) { return (React__default.createElement(GrepTableOfContentNavTreeNode, { node: node, key: node.index, renderChilds: function (children) { return (React__default.createElement(NavTree, { elements: children, setSelectedValue: setSelectedValue, percentageRendered: percentageRendered })); }, setSelectedValue: setSelectedValue, percentageRendered: percentageRendered })); })));
+}));
+
+const NavTree = (props) => {
+    const { elements, style, setSelectedValue, percentageRendered } = props;
+    const { classes } = useContext(context);
+    const { classes: styles } = useStyles$1();
+    const className = clsx('grep-toc__nav-tree', styles.root, classes?.tree, props.className);
+    return (React__default.createElement("ul", { className: className, style: style }, Object.values(elements).map((node) => (React__default.createElement(GrepTableOfContentNavTreeNode, { node: node, key: node.index, renderChilds: (children) => (React__default.createElement(NavTree, { elements: children, setSelectedValue: setSelectedValue, percentageRendered: percentageRendered })), setSelectedValue: setSelectedValue, percentageRendered: percentageRendered })))));
 };
 NavTree.displayName = 'Grep.ToC.NavTree';
 
-var useStyles = makeStyles()(function () { return ({
+const useStyles = makeStyles()(() => ({
     root: {
         fontSize: 18,
         overflowY: 'scroll',
@@ -21916,54 +21635,47 @@ var useStyles = makeStyles()(function () { return ({
             padding: '2px 5px',
         },
     },
-}); });
+}));
 
-var getElementLevel = function (el) {
-    var res = el.nodeName.match(/H([1-9])/);
+const getElementLevel = (el) => {
+    const res = el.nodeName.match(/H([1-9])/);
     if (res) {
-        var _a = __read(res, 2); _a[0]; var lvl = _a[1];
+        const [_, lvl] = res;
         return Number(lvl);
     }
     return 0;
 };
 
-var normalize = function (elements) {
-    return elements.reduce(function (curr, el, index) {
-        var _a;
-        var id = el.id;
-        var lvl = getElementLevel(el, elements[index - 1]);
-        var parent = (_a = __spreadArray([], __read(curr), false).reverse().find(function (obj) { return obj.lvl < lvl; })) === null || _a === void 0 ? void 0 : _a.index;
-        curr.push({ id: id, el: el, lvl: lvl, parent: parent, index: index });
+const normalize = (elements) => {
+    return elements.reduce((curr, el, index) => {
+        const { id } = el;
+        const lvl = getElementLevel(el, elements[index - 1]);
+        const parent = [...curr].reverse().find((obj) => obj.lvl < lvl)?.index;
+        curr.push({ id, el, lvl, parent, index });
         return curr;
     }, []);
 };
 
-var nest = function (items, id) {
-    return items
-        .filter(function (item) { return item.parent === id; })
-        .reduce(function (curr, item) {
-        var _a;
-        return Object.assign(curr, (_a = {},
-            _a[item.index] = __assign(__assign({}, item), { children: nest(items, item.index) }),
-            _a));
-    }, {});
-};
-var buildTree = function (elements, normalizer) {
-    if (normalizer === void 0) { normalizer = normalize; }
-    var items = normalizer(elements);
+const nest = (items, id) => items
+    .filter((item) => item.parent === id)
+    .reduce((curr, item) => Object.assign(curr, {
+    [item.index]: { ...item, children: nest(items, item.index) },
+}), {});
+const buildTree = (elements, normalizer = normalize) => {
+    const items = normalizer(elements);
     return nest(items);
 };
 
-var GrepTableOfContentNav = function (props) {
-    var _a = __read(useState(false), 2), showKeyboardHint = _a[0], setShowKeyboardHint = _a[1];
-    var ref = useRef(null);
-    var _b = useContext(context), elements = _b.elements, classes = _b.classes, selected = _b.selected, setSelected = _b.setSelected;
-    var tree = useMemo$1(function () { return buildTree(Object.values(elements)); }, [elements]);
-    var focusSelected = useCallback$1(function () {
-        requestAnimationFrame(function () {
+const GrepTableOfContentNav = (props) => {
+    const [showKeyboardHint, setShowKeyboardHint] = useState(false);
+    const ref = useRef(null);
+    const { elements, classes, selected, setSelected } = useContext(context);
+    const tree = useMemo$1(() => buildTree(Object.values(elements)), [elements]);
+    const focusSelected = useCallback$1(() => {
+        requestAnimationFrame(() => {
             if (!(ref.current instanceof HTMLElement))
                 return;
-            var active = ref.current.querySelector('[tabindex="0"]');
+            const active = ref.current.querySelector('[tabindex="0"]');
             if (active instanceof HTMLElement) {
                 active.focus();
             }
@@ -21972,55 +21684,54 @@ var GrepTableOfContentNav = function (props) {
             }
         });
     }, [ref]);
-    var onKeyDown = function (e) {
+    const onKeyDown = (e) => {
         if (selected && e.which === Key_enum.Key.Tab && e.shiftKey === false) {
-            var tabindex_1 = selected.getAttribute('tabindex');
+            const tabindex = selected.getAttribute('tabindex');
             selected.setAttribute('tabindex', '0');
             selected.focus();
-            requestAnimationFrame(function () {
-                tabindex_1 === null
+            requestAnimationFrame(() => {
+                tabindex === null
                     ? selected.removeAttribute('tabindex')
-                    : selected.setAttribute('tabindex', tabindex_1);
+                    : selected.setAttribute('tabindex', tabindex);
             });
         }
         if ([Key_enum.Key.UpArrow, Key_enum.Key.DownArrow].includes(e.which)) {
             e.preventDefault();
             e.stopPropagation();
-            var nodes = Object.values(elements);
-            var currentIndex = nodes.indexOf(selected);
-            var moveIndex = e.which === Key_enum.Key.UpArrow ? -1 : 1;
-            var next = nodes[currentIndex + moveIndex];
+            const nodes = Object.values(elements);
+            const currentIndex = nodes.indexOf(selected);
+            const moveIndex = e.which === Key_enum.Key.UpArrow ? -1 : 1;
+            const next = nodes[currentIndex + moveIndex];
             next && setSelected(next, true);
             focusSelected();
         }
     };
-    useEffect(function () {
-        var onKeyDown = function (e) {
+    useEffect(() => {
+        const onKeyDown = (e) => {
             e.keyCode === Key_enum.Key.Alt && setShowKeyboardHint(true);
             if (e.altKey) {
                 e.keyCode === Key_enum.Key.I && focusSelected();
             }
         };
-        var onKeyUp = function (e) {
+        const onKeyUp = (e) => {
             e.keyCode === Key_enum.Key.Alt && setShowKeyboardHint(false);
         };
         window.addEventListener('keydown', onKeyDown);
         window.addEventListener('keyup', onKeyUp);
-        return function () {
+        return () => {
             window.removeEventListener('keydown', onKeyDown);
             window.removeEventListener('keyup', onKeyUp);
         };
     }, [focusSelected]);
-    var style = useStyles().classes;
-    var className = clsx('grep-toc__nav', style.root, classes === null || classes === void 0 ? void 0 : classes.nav, props.className, showKeyboardHint && style.keyboardHint);
+    const { classes: style } = useStyles();
+    const className = clsx('grep-toc__nav', style.root, classes?.nav, props.className, showKeyboardHint && style.keyboardHint);
     return (React__default.createElement("nav", { className: className, style: props.style, tabIndex: selected ? -1 : 0, onKeyDown: onKeyDown, ref: ref },
         React__default.createElement(NavTree, { elements: tree, setSelectedValue: props.setSelectedValue, percentageRendered: props.percentageRendered })));
 };
 GrepTableOfContentNav.displayName = 'Grep.ToC.Nav';
 
-var GrepTableOfContent = function (_a) {
-    var style = _a.style, className = _a.className, setSelectedValue = _a.setSelectedValue, percentageRendered = _a.percentageRendered, props = __rest$1(_a, ["style", "className", "setSelectedValue", "percentageRendered"]);
-    return (React__default.createElement(GrepTableOfContentProvider, __assign({}, props),
+const GrepTableOfContent = ({ style, className, setSelectedValue, percentageRendered, ...props }) => {
+    return (React__default.createElement(GrepTableOfContentProvider, { ...props },
         React__default.createElement(GrepTableOfContentNav, { className: className, style: style, setSelectedValue: setSelectedValue, percentageRendered: percentageRendered })));
 };
 GrepTableOfContent.displayName = 'Grep.ToC';