grep-components 1.26.2-GREPF-2195.1 → 1.26.2-GREPF-2186.1

package/dist/index.js

@@ -47,19 +47,26 @@ import Link$1 from '@mui/material/Link';
 dayjs.extend(isBetweenPlugin);
 dayjs.extend(LocalizedFormatPlugin);
 dayjs.locale('nb');
-class DateRangeValue {
-    constructor(from, to) {
+var DateRangeValue = /** @class */ (function () {
+    function DateRangeValue(from, to) {
         this.from = from;
         this.to = to;
     }
-    get valid() {
-        return this.isValid();
-    }
-    isValid(allowNull = true, allowSame = true, unit = 'day') {
+    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'; }
         if (!this.from && !this.to)
             return allowNull;
-        const dateFrom = dayjs(this.from || undefined);
-        const dateTo = dayjs(this.to || undefined);
+        var dateFrom = dayjs(this.from || undefined);
+        var dateTo = dayjs(this.to || undefined);
         if (!this.from)
             return allowNull && dateTo.isValid();
         if (!this.to)
@@ -70,13 +77,17 @@ class DateRangeValue {
                 : dateTo.isAfter(dateFrom, unit);
         }
         return false;
-    }
-    compare({ from, to }, unit = 'day') {
+    };
+    DateRangeValue.prototype.compare = function (_a, unit) {
+        var from = _a.from, to = _a.to;
+        if (unit === void 0) { unit = 'day'; }
         return (dayjs(this.from || '').isSame(dayjs(from || ''), unit) &&
             dayjs(this.to || '').isSame(dayjs(to || ''), unit));
-    }
-}
-const parseDate = (datetime, { format, utc } = { utc: true }) => {
+    };
+    return DateRangeValue;
+}());
+var parseDate = function (datetime, _a) {
+    var _b = _a === void 0 ? { utc: true } : _a, format = _b.format, utc = _b.utc;
     datetime =
         typeof datetime === 'string'
             ? datetime
@@ -85,28 +96,34 @@ const parseDate = (datetime, { format, utc } = { utc: true }) => {
                 .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
-    const parsed = dayjs(datetime, { utc, format });
+    var parsed = dayjs(datetime, { utc: utc, format: format });
     return parsed.isValid() ? dayjs(parsed.toISOString()) : parsed;
 };
-const hasDateChanged = (a, b) => {
+var hasDateChanged = function (a, b) {
     if (a === null || b === null) {
         return a !== b;
     }
     return dayjs(a).format('L') !== dayjs(b).format('L');
 };
-const isDateValid = (date, allowNull) => !date ? !!allowNull : dayjs(date).isValid();
-const isSameOrBefore = (point, match, unit = 'day') => {
-    const date = dayjs(point);
+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);
     return ((date.isValid() && date.isSame(match, unit)) || date.isBefore(match, unit));
 };
-const isSameOrAfter = (point, match, unit = 'day') => {
-    const date = dayjs(point);
+var isSameOrAfter = function (point, match, unit) {
+    if (unit === void 0) { unit = 'day'; }
+    var date = dayjs(point);
     return ((date.isValid() && date.isSame(match, unit)) || date.isAfter(match, unit));
 };
-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 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'); };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -232,16 +249,16 @@ var Key_enum = {};
 	})(exports.Key || (exports.Key = {}));
 } (Key_enum));
 
-const onActivation = (cb) => (ev) => {
+var onActivation = function (cb) { return function (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({
@@ -260,7 +277,7 @@ var index = /*#__PURE__*/Object.freeze({
   DateTime: dayjs
 });
 
-const Colors = {
+var Colors = {
     red: red[500],
     pink: pink[500],
     purple: purple[500],
@@ -287,30 +304,111 @@ const Colors = {
     white: '#fff',
 };
 
-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)
+/******************************************************************************
+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; })
         .match(hexPattern);
     match && match.shift();
-    return match ? match.map((i) => parseInt(i, 16)) : [];
+    return match ? match.map(function (i) { return parseInt(i, 16); }) : [];
 };
-const hex2rgb = (hex) => {
-    const rgb = convertHex2rgb(hex);
-    return rgb && `rgb(${rgb.join(',')})`;
+var hex2rgb = function (hex) {
+    var rgb = convertHex2rgb(hex);
+    return rgb && "rgb(".concat(rgb.join(','), ")");
 };
-const hex2rgba = (hex, alpha) => {
-    const rgb = convertHex2rgb(hex);
+var hex2rgba = function (hex, alpha) {
+    var rgb = convertHex2rgb(hex);
     rgb && rgb.push(alpha);
-    return rgb && `rgba(${rgb.join(',')})`;
+    return rgb && "rgba(".concat(rgb.join(','), ")");
 };
-const convertToRgba = (color, alpha) => {
+var convertToRgba = function (color, alpha) {
     if (color.match(/^#/)) {
         return hex2rgba(color, alpha);
     }
-    const [, value] = color.match(/[(](.*)[)]/) || [];
-    return value ? `rgba(${value}, ${alpha})` : color;
+    var _a = __read(color.match(/[(](.*)[)]/) || [], 2), value = _a[1];
+    return value ? "rgba(".concat(value, ", ").concat(alpha, ")") : color;
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -2861,29 +2959,33 @@ function createMakeAndWithStyles(params) {
     return Object.assign(Object.assign({}, createMakeStyles(params)), createWithStyles(params));
 }
 
-const { makeStyles, withStyles } = createMakeAndWithStyles({
-    useTheme,
+var _a;
+var makeStyles = (_a = createMakeAndWithStyles({
+    useTheme: 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',
+        },
+    });
 });
 
-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();
+var AppBarProfile = function (props) {
+    var classes = useStyles$i().classes;
     return (React.createElement(Button, { variant: "text", onClick: props.onButtonClick },
         React.createElement(AccountCircle, { color: "primary", fontSize: "large" }),
         React.createElement(Box, { className: classes.user },
@@ -2892,76 +2994,87 @@ const AppBarProfile = (props) => {
         React.createElement(ArrowDropdown, { color: "primary" })));
 };
 
-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')]: {
+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: {
             display: 'flex',
+            justifyContent: 'center',
+            backgroundColor: 'transparent',
+            '& > div': {
+                maxWidth: 40,
+                width: '100%',
+                backgroundColor: theme.palette.secondary.main,
+            },
         },
-        [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) => {
+    });
+});
+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) {
         setAnchorElNav(event.currentTarget);
     };
-    const handleCloseNav = () => {
+    var handleCloseNav = function () {
         setAnchorElNav(null);
     };
     return (React.createElement(Box, { style: { flexGrow: 1 }, className: classes.mobileNavList },
@@ -2969,30 +3082,34 @@ const MobileAppBarNavList = ({ pages, }) => {
             React.createElement(MenuIcon, { fontSize: "large" })),
         React.createElement(Menu, { id: "basic-menu", anchorEl: anchorElNav, open: openNav, onClose: handleCloseNav, MenuListProps: {
                 'aria-labelledby': 'basic-button',
-            } }, pages.map((page) => (React.createElement(MenuItem, { key: page.id, onClick: () => {
+            } }, pages.map(function (page) { return (React.createElement(MenuItem, { key: page.id, onClick: function () {
                 handleCloseNav();
-                history.push(page?.toUrl || '');
-            }, onKeyDown: keyboard.onActivation(() => history.push(page?.toUrl || '')) }, page.label))))));
+                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)); }))));
 };
 
-const AppBarNavList = ({ selectedPage, pages, onChange, }) => {
-    const [value, setValue] = React.useState(selectedPage);
-    const { classes } = useStyles$h();
-    const handleChange = (_event, newValue) => {
+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) {
         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((page) => (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(function (page) { return (React.createElement(Tab, { disableTouchRipple: true, className: classes.tab, key: page.id, label: page.label })); })),
         React.createElement(MobileAppBarNavList, { pages: pages })));
 };
 
-const BodyLayout = (props) => (React.createElement(Box, { width: "100%", paddingTop: "20px", display: "flex", flexDirection: "row", marginBottom: "20px", justifyContent: "space-between" }, props.children));
+var BodyLayout = function (props) { return (React.createElement(Box, { width: "100%", paddingTop: "20px", display: "flex", flexDirection: "row", marginBottom: "20px", justifyContent: "space-between" }, props.children)); };
 
-const MainLayout = (props) => (React.createElement(Box, { display: "flex", flex: "1", flexDirection: "column" }, props.children));
+var MainLayout = function (props) { return (React.createElement(Box, { display: "flex", flex: "1", flexDirection: "column" }, props.children)); };
 
-const CollapsableMenu = ({ children, onMenuClose, ...collapseProps }) => {
-    const onKeyDown = (e) => {
+var CollapsableMenu = function (_a) {
+    var children = _a.children, onMenuClose = _a.onMenuClose, collapseProps = __rest$1(_a, ["children", "onMenuClose"]);
+    var onKeyDown = function (e) {
         switch (e.keyCode) {
             case Key_enum.Key.Escape:
                 onMenuClose && onMenuClose();
@@ -3002,33 +3119,37 @@ const CollapsableMenu = ({ children, onMenuClose, ...collapseProps }) => {
         }
         e.stopPropagation();
     };
-    return (React__default.createElement(Collapse, { timeout: "auto", unmountOnExit: true, mountOnEnter: true, ...collapseProps },
+    return (React__default.createElement(Collapse, __assign({ timeout: "auto", unmountOnExit: true, mountOnEnter: true }, collapseProps),
         React__default.createElement(MenuList, { disablePadding: true, autoFocusItem: true, onKeyDown: onKeyDown }, children)));
 };
 
-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),
+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(${open ? 180 : 0}deg)`,
-        transition: transitions.create(['transform, color, background-color'], {
-            duration: transitions.duration.short,
-            easing: transitions.easing.easeOut,
-        }),
-    },
-}));
+        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,
+            }),
+        },
+    });
+});
 
 /**
  * TypeError: Failed to construct 'CustomEvent': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
@@ -3036,36 +3157,42 @@ const useStyles$g = makeStyles()(({ palette, transitions }, { open }) => ({
  *
  * export class CollapsableMenuStatusEvent extends CustomEvent<React.Ref<any>> {}
  */
-class CollapsableMenuStatusEvent {
-    constructor(type, currentTarget) {
+var CollapsableMenuStatusEvent = /** @class */ (function () {
+    function CollapsableMenuStatusEvent(type, currentTarget) {
         this.type = type;
         this.currentTarget = currentTarget;
     }
-    get defaultPrevented() {
-        return !!this._defaultPrevented;
-    }
-    preventDefault() {
+    Object.defineProperty(CollapsableMenuStatusEvent.prototype, "defaultPrevented", {
+        get: function () {
+            return !!this._defaultPrevented;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    CollapsableMenuStatusEvent.prototype.preventDefault = function () {
         this._defaultPrevented = true;
-    }
-}
-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');
+    };
+    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');
         !event.defaultPrevented && setOpen(true);
         return !event.defaultPrevented;
     }, [onStatusChange, setOpen]);
-    const collapse = useCallback$1(() => {
-        const event = onStatusChange('collapse');
+    var collapse = useCallback$1(function () {
+        var event = onStatusChange('collapse');
         if (!event.defaultPrevented) {
             setOpen(false);
-            requestAnimationFrame(() => listItemRef.current?.focus());
+            requestAnimationFrame(function () { var _a; return (_a = listItemRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
         }
         return !event.defaultPrevented;
     }, [onStatusChange, setOpen, listItemRef]);
-    const handleKey = (e) => {
+    var handleKey = function (e) {
         if (items) {
             switch (e.keyCode) {
                 case Key_enum.Key.RightArrow:
@@ -3077,181 +3204,204 @@ const CollapsableMenuItem = ({ items, onClick, children, onClose: _onclose, tool
             }
         }
     };
-    const onToggleClick = useCallback$1((e) => {
+    var onToggleClick = useCallback$1(function (e) {
         e.preventDefault();
         e.stopPropagation();
         open ? collapse() : expand();
     }, [open, collapse, expand]);
-    const onScrimClick = useCallback$1((e) => {
-        const scrimClick = !listItemRef.current?.contains(e.target);
+    var onScrimClick = useCallback$1(function (e) {
+        var _a;
+        var scrimClick = !((_a = listItemRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target));
         scrimClick && collapse();
     }, [listItemRef, collapse]);
-    const handleClick = items ? onToggleClick : onClick;
-    useEffect(() => {
+    var handleClick = items ? onToggleClick : onClick;
+    useEffect(function () {
         document.addEventListener('click', onScrimClick, { capture: true });
-        return () => document.removeEventListener('click', onScrimClick);
+        return function () { return document.removeEventListener('click', onScrimClick); };
     }, [listItemRef, onScrimClick]);
-    const { classes } = useStyles$g({ open });
-    const renderInner = () => (React__default.createElement(Box, { display: "flex", flexDirection: "column", width: "100%" },
+    var classes = useStyles$g({ open: open }).classes;
+    var renderInner = function () { return (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: () => requestAnimationFrame(() => window.dispatchEvent(new Event('resize'))) }, items))));
+        items && (React__default.createElement(CollapsableMenu, { className: classes.subMenu, in: open, onMenuClose: collapse, onEntered: function () {
+                return requestAnimationFrame(function () {
+                    return 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: (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()));
+                : { 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, onMouseOver: function (e) { return e.currentTarget.focus(); }, ref: listItemRef, selected: open, onClick: handleClick, onKeyDown: handleKey }, props), renderInner()));
 };
 
-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`,
+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);
             };
-        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, __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)));
         };
-        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, { ...menuProps, anchorOrigin: menuProps?.anchorOrigin || {
+    return (React__default.createElement(Menu, __assign({}, menuProps, { anchorOrigin: (menuProps === null || menuProps === void 0 ? void 0 : menuProps.anchorOrigin) || {
             vertical: 'bottom',
             horizontal: 'center',
         }, transformOrigin: menuProps.transformOrigin || {
             vertical: 'top',
             horizontal: 'center',
-        } }, menuItems.map(renderChild())));
+        } }), menuItems.map(renderChild())));
 };
 
-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',
+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
             },
-        },
-        [theme.breakpoints.down('md')]: {
-            flexDirection: 'column',
-            padding: '0',
-            a: {
-                width: '150px',
-                margin: '40px auto 40px auto',
+            _a[theme.breakpoints.down('md')] = {
+                minHeight: 'unset',
             },
-        },
-        [theme.breakpoints.up('md')]: {
-            flexDirection: 'row',
-            padding: '0 12px 0 12px',
-            a: {
-                marginLeft: '28px',
+            _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',
+            },
+            _e[':focus'] = {
+                background: 'inherit',
+                boxShadow: '0px 0px 0px 1px white',
+                borderRadius: '2px',
+            },
+            _e),
+        itemText: {
+            padding: 0,
+            margin: '0 auto',
+            fontFamily: 'Montserrat',
+            fontWeight: 400,
+            fontSize: '14px',
+            color: Colors.white,
         },
-    },
-    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',
+        itemBtn: {
+            textDecoration: 'underline',
+            textTransform: 'none',
+            '&:hover': {
+                backgroundColor: 'unset',
+            },
         },
-    },
-}));
+    });
+});
 
-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 },
-        } }));
+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 },
+            } }));
+    };
     return (React__default.createElement(Box, { className: classes.footer, role: "contentinfo" },
         React__default.createElement(Box, { className: classes.content },
             React__default.createElement("a", { href: udirLink },
@@ -3262,29 +3412,29 @@ const Footer = ({ items, serviceNameText, udirLink, udirLogo, }) => {
                     paddingRight: '16px !important',
                 } },
                 React__default.createElement("span", { className: classes.serviceNameText }, serviceNameText),
-                React__default.createElement(List, { className: classes.list }, items.map((item, i) => (React__default.createElement(ListItem, { key: i, classes: {
+                React__default.createElement(List, { className: classes.list }, items.map(function (item, i) { return (React__default.createElement(ListItem, { key: i, classes: {
                         root: classes.item,
                         //button: onClickItem ? classes.itemBtn : undefined,
                     } }, item.render
-                    ? item.render(() => renderItem(item))
-                    : renderItem(item)))))))));
+                    ? item.render(function () { return renderItem(item); })
+                    : renderItem(item))); }))))));
 };
 
-const LinkList = (props) => (React.createElement(Box, { width: "100%", flexDirection: "column" },
+var LinkList = function (props) { return (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((page) => (React.createElement(Box, { key: page.id },
-        React.createElement(ListItem, { button: true, onClick: () => props.onPageClick(page), style: { padding: '12px 4px' } },
+    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(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))); })))); };
 
-const useStyles$e = makeStyles()({
+var useStyles$e = makeStyles()({
     container: {
-        border: `1px solid ${Colors.lightGrey}`,
+        border: "1px solid ".concat(Colors.lightGrey),
         height: 'fit-content',
         width: 'fit-content',
     },
@@ -3296,30 +3446,32 @@ const useStyles$e = makeStyles()({
     },
 });
 
-const ContainedLinkList = (props) => {
-    const { classes } = useStyles$e();
+var ContainedLinkList = function (props) {
+    var classes = useStyles$e().classes;
     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((page) => (React.createElement(ListItem, { divider: true, key: page.id, disablePadding: true },
-            React.createElement(ListItemButton, { onClick: () => props.onPageClick(page) },
+        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); } },
                 page.linkIcon && React.createElement(ListItemIcon$1, null, page.linkIcon),
-                React.createElement(ListItemText, { primary: page.label }))))))));
+                React.createElement(ListItemText, { primary: page.label })))); }))));
 };
 
-class OverflowTooltip extends React.Component {
-    constructor(props) {
-        super(props);
-        this.nodeRef = React.createRef();
-        this.state = { overflow: false };
+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;
     }
-    componentDidMount() {
-        const element = this.nodeRef.current;
+    OverflowTooltip.prototype.componentDidMount = function () {
+        var element = this.nodeRef.current;
         if (element) {
-            const overflow = element.clientWidth < element.scrollWidth;
-            this.setState({ overflow });
+            var overflow = element.clientWidth < element.scrollWidth;
+            this.setState({ overflow: overflow });
         }
-    }
-    render() {
+    };
+    OverflowTooltip.prototype.render = function () {
         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)));
@@ -3327,50 +3479,56 @@ class OverflowTooltip extends React.Component {
         else {
             return React.createElement("div", { ref: this.nodeRef }, this.props.children);
         }
-    }
-}
+    };
+    return OverflowTooltip;
+}(React.Component));
 
-const CellValue = styled('span')({
+var CellValue = styled('span')({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     display: '-webkit-box',
     WebkitBoxOrient: 'vertical',
 });
-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)));
+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)));
     if (forceTooltip || getTooltip) {
-        return (React__default.createElement(TableCell, { padding: padding, ...props },
+        return (React__default.createElement(TableCell, __assign({ padding: padding }, props),
             React__default.createElement(OverflowTooltip, { force: forceTooltip, title: getTooltip ? getTooltip(row) : value }, value)));
     }
-    return (React__default.createElement(TableCell, { padding: padding, ...props }, value));
+    return (React__default.createElement(TableCell, __assign({ padding: padding }, props), value));
 };
 
-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: {
+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: {
             ':focus': { textDecoration: underlineOnFocus ? 'underline' : 'none' },
-        }, tabIndex: props.tabIndex, ...{ selected, ...props } }, columns.map(render)));
+        }, tabIndex: props.tabIndex }, __assign({ selected: selected }, props)), columns.map(render)));
 };
 
-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()({
+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()({
     toolbar: {
         padding: 0,
         width: '100%',
@@ -3389,39 +3547,42 @@ const usePaginationStyles = makeStyles()({
         display: 'none',
     },
 });
-const useTableHeaderStyles = makeStyles()((_theme, { column }) => {
-    const width = column.width
+var useTableHeaderStyles = makeStyles()(function (_theme, _a) {
+    var column = _a.column;
+    var width = column.width
         ? typeof column.width === 'number'
-            ? `${column.width}%`
+            ? "".concat(column.width, "%")
             : column.width
         : undefined;
     return {
         th: {
-            width,
+            width: width,
             fontSize: 14,
         },
     };
 });
 
-const TableHeaderCell = ({ column, onSortBy, direction, active, children, empty = false, ...props }) => {
-    const { classes } = useTableHeaderStyles({ column });
-    const sortable = !!(onSortBy && column.sortable);
+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);
     if (sortable && !empty) {
-        return (React__default.createElement(TableCell, { variant: empty ? 'body' : 'head', className: classes.th, ...props },
+        return (React__default.createElement(TableCell, __assign({ 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, { variant: empty ? 'body' : 'head', className: classes.th, ...props }, 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));
 };
 
-const TableHeader = ({ columns, sortBy, sortDirection, onSortBy, dropdownItems, ...props }) => {
-    const headerColumns = dropdownItems
-        ? columns.concat([{ label: '', width: '48px', getCell: () => '' }])
+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 ''; } }])
         : columns;
-    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, column: column, direction: sortDirection, active: sortable ? sortBy === colDef : undefined, onClick: () => sortable && onSortBy(column), onKeyDown: onActivation((e) => {
+    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) {
                     if (sortable) {
                         e.preventDefault();
                         onSortBy(column);
@@ -3430,19 +3591,23 @@ const TableHeader = ({ columns, sortBy, sortDirection, onSortBy, dropdownItems,
         }))));
 };
 
-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++) {
+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) {
             pageNumbers.push(React.createElement(Button, { key: i, className: classes.button, style: currentPage === i
                     ? {
                         color: 'white',
                     }
                     : {
                         backgroundColor: Colors.white,
-                    }, onClick: (e) => onPageChange(e, i), disabled: currentPage === i }, i + 1));
+                    }, onClick: function (e) { return onPageChange(e, i); }, disabled: currentPage === i }, i + 1));
+        };
+        for (var i = 0; i < pageCount; i++) {
+            _loop_1(i);
         }
         if (currentPage >= 2 && currentPage < pageCount - 2) {
             return pageNumbers.slice(currentPage - 2, currentPage + 3);
@@ -3452,14 +3617,14 @@ const PaginationActions = ({ count, page, rowsPerPage, onPageChange }) => {
             : pageNumbers.slice(pageCount - 5, pageCount);
     };
     return (React.createElement("div", { style: { gridArea: 'right', justifySelf: 'end' } },
-        React.createElement(Button, { className: classes.textButton, onClick: (e) => onPageChange(e, page - 1), disabled: page === 0, "aria-label": "Previous Page" }, "Forrige"),
+        React.createElement(Button, { className: classes.textButton, onClick: function (e) { return onPageChange(e, page - 1); }, disabled: page === 0, "aria-label": "Previous Page" }, "Forrige"),
         getPageNumbers(count, page, rowsPerPage),
-        React.createElement(Button, { className: classes.textButton, onClick: (e) => onPageChange(e, page + 1), disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "Next Page" }, "Neste")));
+        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")));
 };
 
-const GrepTablePagination = (props) => {
-    const { classes } = usePaginationStyles();
-    return (React__default.createElement(TablePagination, { classes: classes, rowsPerPageOptions: props.rowsPerPageOptions, SelectProps: {
+var GrepTablePagination = function (props) {
+    var classes = usePaginationStyles().classes;
+    return (React__default.createElement(TablePagination, __assign({ classes: classes, rowsPerPageOptions: props.rowsPerPageOptions, SelectProps: {
             inputProps: {
                 title: 'Velg antall elementer',
             },
@@ -3467,31 +3632,40 @@ const GrepTablePagination = (props) => {
                 gridArea: 'left',
                 justifySelf: 'start',
             },
-        }, ActionsComponent: (actions) => (React__default.createElement(PaginationActions, { ...actions })), ...props }));
+        }, ActionsComponent: function (actions) { return (React__default.createElement(PaginationActions, __assign({}, actions))); } }, props)));
 };
 
-const GrepTablePlaceholder = ({ columns, padding, text = 'Tabellen er tom.', }) => {
+var GrepTablePlaceholder = function (_a) {
+    var columns = _a.columns, padding = _a.padding, _b = _a.text, text = _b === void 0 ? 'Tabellen er tom.' : _b;
     return (React__default.createElement(TableRow, null,
         React__default.createElement(TableCell, { padding: padding, colSpan: columns.length }, text)));
 };
 
-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 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',
         },
-    },
-}));
-const containsFocus = (el, tag = '*') => Array.from(el.getElementsByTagName(tag)).some((el) => el === document.activeElement);
-const getElementIndex = (el) => Number(el.getAttribute('data-index') || -1);
+        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);
+};
 /**
  * Since Grep-Table is so tightly intregrated into LPU and Admin some core logic could not be fixed
  * Still works but still messy
@@ -3499,15 +3673,16 @@ const getElementIndex = (el) => Number(el.getAttribute('data-index') || -1);
  * @todo enhance page handling
  *
  */
-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) => {
+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) {
         index = pagination && index >= 0 ? index : 0;
         _setCurrentPage(index);
         _setSelectedRowIndex(rowIndex);
@@ -3521,21 +3696,24 @@ const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination,
         rowsPerPage,
         pagination,
     ]);
-    const setSelectedRowIndex = (index, shouldExpand = true) => {
-        const hasIndexChanged = index === selectedRowIndex;
-        const pageIndex = Math.floor(index / rowsPerPage);
+    var setSelectedRowIndex = function (index, shouldExpand) {
+        if (shouldExpand === void 0) { shouldExpand = true; }
+        var hasIndexChanged = index === selectedRowIndex;
+        var pageIndex = Math.floor(index / rowsPerPage);
         setCurrentPage(pageIndex, index, shouldExpand);
         if (hasIndexChanged && onSelectedRowChange) {
             onSelectedRowChange(data[index]);
         }
     };
-    const setSelectedElement = (el, shouldExpand = true) => {
+    var setSelectedElement = function (el, shouldExpand) {
+        if (shouldExpand === void 0) { shouldExpand = true; }
         setSelectedRowIndex(getElementIndex(el), shouldExpand);
     };
-    const tableRef = React__default.useRef(null);
+    var tableRef = React__default.useRef(null);
     // focus selected row first tabable item
-    React__default.useEffect(() => {
-        const rowTab = tableRef.current?.querySelector(`[data-index="${selectedRowIndex}"]`);
+    React__default.useEffect(function () {
+        var _a;
+        var rowTab = (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-index=\"".concat(selectedRowIndex, "\"]"));
         if (!rowTab)
             return;
         if (!containsFocus(rowTab)) {
@@ -3544,76 +3722,70 @@ const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination,
             }
         }
     }, [tableRef, selectedRowIndex]);
-    React__default.useMemo(() => {
+    React__default.useMemo(function () {
         setCurrentPage(0);
     }, [data.length, setCurrentPage]);
-    const _openDropdown = (e, row) => {
-        const { onContextIdChanged } = props;
+    var _openDropdown = function (e, row) {
+        var onContextIdChanged = props.onContextIdChanged;
         if (onContextIdChanged) {
             onContextIdChanged(row);
         }
         setDropdownContext(row);
         setMenuAnchor(e.currentTarget);
     };
-    const _handleRowClick = useCallback$1((row) => {
-        const disabled = isRowDisabled && isRowDisabled(row);
+    var _handleRowClick = useCallback$1(function (row) {
+        var disabled = isRowDisabled && isRowDisabled(row);
         !disabled && onRowClick && onRowClick(row);
     }, [onRowClick]);
-    const _handlePageChange = (event, newPage) => {
+    var _handlePageChange = function (event, newPage) {
         event && event.preventDefault();
         setCurrentPage(newPage);
     };
-    const _handleChangeRowsPerPage = (event) => {
+    var _handleChangeRowsPerPage = function (event) {
         setRowsPerPage(Number(event.target.value));
     };
-    const _handleMenuClose = () => {
+    var _handleMenuClose = function () {
         setMenuAnchor(null);
     };
-    const _renderCellButton = (row) => {
-        const { menuDisabled, menuTooltip } = props;
-        const disabled = menuDisabled && menuDisabled(row);
-        const tooltip = menuTooltip ? menuTooltip(row) : '';
+    var _renderCellButton = function (row) {
+        var menuDisabled = props.menuDisabled, menuTooltip = props.menuTooltip;
+        var disabled = menuDisabled && menuDisabled(row);
+        var 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: (e) => {
+                React__default.createElement(IconButton, { disableTouchRipple: true, disabled: disabled, style: { float: 'right' }, onMouseDown: function (e) {
                         e.preventDefault();
                         e.stopPropagation();
-                    }, onClick: (e) => {
+                    }, onClick: function (e) {
                         _openDropdown(e, row);
-                    }, onKeyDown: (e) => {
+                    }, onKeyDown: function (e) {
                         switch (e.which) {
                             case Key_enum.Key.Enter:
                                 // dont show dropdown
                                 e.preventDefault();
                                 break;
                         }
-                    }, tabIndex: 0, size: "large", "aria-label": menuButtonLabel ?? 'Åpne meny' },
+                    }, tabIndex: 0, size: "large", "aria-label": menuButtonLabel !== null && menuButtonLabel !== void 0 ? menuButtonLabel : 'Åpne meny' },
                     React__default.createElement(MoreVert, null)))));
     };
-    const getRowStyle = (row, index, clickableRows, disabled) => {
-        let style = { cursor: clickableRows && !disabled ? 'pointer' : '' };
+    var getRowStyle = function (row, index, clickableRows, disabled) {
+        var style = { cursor: clickableRows && !disabled ? 'pointer' : '' };
         if (typeof rowStyle === "function") {
-            style = {
-                ...style,
-                ...rowStyle(row, index)
-            };
+            style = __assign(__assign({}, style), rowStyle(row, index));
         }
         else if (rowStyle) {
-            style = {
-                ...style,
-                ...rowStyle
-            };
+            style = __assign(__assign({}, style), rowStyle);
         }
         return style;
     };
-    const _renderRow = (row, index) => {
-        const rowColumns = dropdownItems
+    var _renderRow = function (row, index) {
+        var rowColumns = dropdownItems
             ? columns.concat([{ getCell: _renderCellButton, padding: 'none' }])
             : columns;
-        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) => {
+        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) {
                 if (e.target.type === 'checkbox') {
                     e.preventDefault();
                     e.stopPropagation();
@@ -3625,16 +3797,16 @@ const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination,
                         _handleRowClick(row);
                     }
                 }
-            }, columns: rowColumns, row: row, style: getRowStyle(row, index, clickableRows, disabled), onFocus: (e) => {
+            }, columns: rowColumns, row: row, style: getRowStyle(row, index, clickableRows, disabled), onFocus: function (e) {
                 if (selectedRowIndex !== rowIndex) {
                     setSelectedElement(e.currentTarget);
                 }
             }, underlineOnFocus: underlineOnFocus }));
     };
-    const onKey = (e) => {
-        const maxIndex = data.length - 1;
-        const moveSelectedRow = (steps) => {
-            const i = (selectedRowIndex || 0) + steps;
+    var onKey = function (e) {
+        var maxIndex = data.length - 1;
+        var moveSelectedRow = function (steps) {
+            var i = (selectedRowIndex || 0) + steps;
             if (i >= 0 && i <= maxIndex) {
                 setSelectedRowIndex(i);
             }
@@ -3661,7 +3833,7 @@ const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination,
                 setSelectedRowIndex(maxIndex);
                 break;
             case Key_enum.Key.Tab:
-                requestAnimationFrame(() => {
+                requestAnimationFrame(function () {
                     // check is any children still has focus
                     !containsFocus(tableRef.current) && setSelectedRowIndex(-1);
                 });
@@ -3671,53 +3843,57 @@ const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination,
                 break;
         }
     };
-    const rows = pagination
+    var rows = pagination
         ? data.slice(currentPage * rowsPerPage, currentPage * rowsPerPage + rowsPerPage)
         : data;
-    const { classes } = useStyles$d({ outlined, showHeader: header });
+    var classes = useStyles$d({ outlined: outlined, showHeader: header }).classes;
     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: ({ from, to, count }) => `Viser ${from}-${to} av ${count}` }))))),
+                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);
+                    } }))))),
         dropdownItems && dropdownContext && (React__default.createElement(DropdownMenu, { open: !!menuAnchor, context: dropdownContext, anchorEl: menuAnchor, menuItems: dropdownItems, onClose: _handleMenuClose }))));
 };
 
-const useStyles$c = makeStyles()({
+var useStyles$c = makeStyles()({
     container: {
-        border: `1px solid ${Colors.lightGrey}`,
+        border: "1px solid ".concat(Colors.lightGrey),
         height: 'fit-content',
         flex: 'auto',
     },
     title: { fontSize: 24, padding: 20, color: Colors.black },
 });
 
-const GrepTableCard = (props) => {
-    const { classes } = useStyles$c();
+var GrepTableCard = function (props) {
+    var classes = useStyles$c().classes;
     return (React.createElement(Box, { className: classes.container, style: props.style },
         React.createElement(Typography, { className: classes.title }, props.title),
-        React.createElement(GrepTable, { ...props, header: true })));
+        React.createElement(GrepTable, __assign({}, props, { header: true }))));
 };
 
-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);
+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); };
     }, [show, minTime, setEnabled]);
     return (React__default.createElement(Box, { position: "relative", display: "block", overflow: show ? 'hidden' : '' },
         children,
-        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: {
+        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: {
                 backgroundColor: overlay,
                 opacity: show ? 1 : 0,
-                transition: `opacity ${show ? 0 : minTime}ms ease`,
-            }, sx: sx, ...box },
+                transition: "opacity ".concat(show ? 0 : minTime, "ms ease"),
+            }, sx: sx }, box),
             React__default.createElement(CircularProgress, { "aria-label": "Laster inn" }))));
 };
 
-const useStyles$b = makeStyles()({
+var useStyles$b = makeStyles()({
     container: {
         display: 'flex',
         marginTop: 30,
@@ -3745,17 +3921,18 @@ const useStyles$b = makeStyles()({
     },
 });
 
-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;
+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;
         setShowTooltip(!!current && isOverflowing(current));
     }, [ref]);
-    const handleClick = (crumb) => {
+    var handleClick = function (crumb) {
         if (onClick) {
             onClick(crumb);
         }
@@ -3763,13 +3940,15 @@ const GrepCrumbs = ({ style, onClick, breadcrumbs, }) => {
             crumb.path && dispatch(push(crumb.path));
         }
     };
-    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))))));
+    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)));
+    })));
 };
 
-const useStyles$a = makeStyles()({
+var useStyles$a = makeStyles()({
     outer: {
         alignItems: 'center',
         background: Colors.white,
@@ -3790,27 +3969,27 @@ const useStyles$a = makeStyles()({
     helptext: { margin: '0 10px 0 10px', color: '#6e6e6e', fontSize: 12 },
 });
 
-const SearchBar = (props) => {
-    const inputRef = React.useRef(null);
-    const [value, setValue] = React.useState(props.initValue || '');
-    const { classes } = useStyles$a();
-    React.useEffect(() => {
+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 () {
         if (props.autoFocus && inputRef.current) {
             inputRef.current.focus();
         }
     });
-    const _handleChange = (event) => {
-        const newVal = event.target.value;
+    var _handleChange = function (event) {
+        var newVal = event.target.value;
         setValue(newVal);
         props.onInputChange(newVal);
     };
-    const _handleClear = () => {
+    var _handleClear = function () {
         setValue('');
         props.onClear();
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(Box, { className: classes.outer, "data-testid": "searchBarContainer", style: {
-                border: props.outlined ? `1px solid ${Colors.lightGrey}` : 0,
+                border: props.outlined ? "1px solid ".concat(Colors.lightGrey) : 0,
             } },
             React.createElement(Box, { className: classes.icon },
                 React.createElement(Search, null)),
@@ -3827,42 +4006,53 @@ const SearchBar = (props) => {
             props.searchAllText && props.onSearchAll && (React.createElement(Button, { color: "primary", onClick: props.onSearchAll }, props.searchAllText)))));
 };
 
-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 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 GreyCover = ({ elevation, children }) => {
-    const { classes } = useStyles$9({ elevation });
+var GreyCover = function (_a) {
+    var elevation = _a.elevation, children = _a.children;
+    var classes = useStyles$9({ elevation: elevation }).classes;
     return React.createElement(Box, { className: classes.cover }, children);
 };
 
-const CircularLoading = ({ height, ...props }) => (React.createElement(Box, { height: height, width: "100%", display: "flex", alignItems: "center", justifyContent: "center" },
-    React.createElement(CircularProgress$1, { ...props })));
+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 useStyles$8 = makeStyles()((theme) => ({
-    container: {
-        width: '48%',
-        display: 'flex',
-        flexDirection: 'column',
-        [theme.breakpoints.down('lg')]: {
-            width: '100%',
-        },
-        [theme.breakpoints.up('md')]: {
-            width: '48%',
-        },
-    },
-}));
+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 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();
+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;
     return (React.createElement(Box, { className: classes.container },
         renderField$1('firstname', 'Fornavn', props.firstName),
         renderField$1('lastname', 'Etternavn', props.lastName),
@@ -3871,43 +4061,48 @@ const ProfileInfo = (props) => {
         renderField$1('role', 'Rolle', props.role)));
 };
 
-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%',
+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,
         },
-        [theme.breakpoints.up('md')]: {
-            maxWidth: 500,
+        title: {
+            backgroundColor: 'unset',
+            fontSize: 16,
+            margin: '20px 0',
         },
-    },
-    content: {
-        backgroundColor: 'unset',
-        marginRight: 20,
-    },
-    title: {
-        backgroundColor: 'unset',
-        fontSize: 16,
-        margin: '20px 0',
-    },
-    body: {
-        backgroundColor: 'unset',
-        h4: {
-            marginRight: 20,
+        body: {
+            backgroundColor: 'unset',
+            h4: {
+                marginRight: 20,
+            },
         },
-    },
-    icon: {
-        margin: '20px 10px',
-        color: 'rgb(255, 158, 157)',
-    },
-}));
+        icon: {
+            margin: '20px 10px',
+            color: 'rgb(255, 158, 157)',
+        },
+    });
+});
 
-const GDPR = ({ children }) => {
-    const { classes } = useStyles$7();
+var GDPR = function (_a) {
+    var children = _a.children;
+    var classes = useStyles$7().classes;
     return (React.createElement(Box, { className: classes.container },
         React.createElement(Info, { className: classes.icon }),
         React.createElement(Box, { className: classes.content },
@@ -3915,66 +4110,67 @@ const GDPR = ({ children }) => {
             React.createElement(Typography, { className: classes.body }, children))));
 };
 
-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 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 GrepSelect = (props) => {
-    const inputLabel = React.useRef(null);
-    const [labelWidth, setLabelWidth] = React.useState(0);
-    React.useEffect(() => {
+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 () {
         setLabelWidth(inputLabel.current.offsetWidth);
     }, []);
-    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;
+    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;
     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, { ...rest, inputProps: { id, ...inputProps }, disabled: !selectItems || disabled, value: value === null ? '' : value, style: { minWidth: labelWidth + (outlined ? 35 : 25) }, 
+        React.createElement(Select, __assign({}, rest, { inputProps: __assign({ id: 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: {
-                ...rest.MenuProps,
-                anchorOrigin: {
+            input: outlined ? React.createElement(OutlinedInput, { label: label }) : React.createElement(Input, null), MenuProps: __assign(__assign({}, 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(({ 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 }))))),
+            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 })));
+            })),
         React.createElement(FormHelperText, null, errorMessage || helperText)));
 };
 
-const defaultOptions$2 = {
+var defaultOptions$2 = {
     utc: true,
     preserveTime: false,
 };
-const useDate = (value = null, options) => {
-    const { utc, preserveTime } = { ...options, ...defaultOptions$2 };
-    const [date, _setDate] = useState(null);
-    const getDate = useCallback$1((value) => {
+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) {
         if (value) {
-            const date = dayjs(value);
-            return preserveTime ? date : date.startOf('day');
+            var date_1 = dayjs(value);
+            return preserveTime ? date_1 : date_1.startOf('day');
         }
         return null;
     }, [preserveTime]);
-    const setDate = (next) => {
-        const nextDate = getDate(next);
+    var setDate = function (next) {
+        var nextDate = getDate(next);
         hasDateChanged(date, nextDate) && _setDate(nextDate);
     };
-    useMemo$1(() => setDate(value ? parseDate(value, { utc }) : null), [
+    useMemo$1(function () { return setDate(value ? parseDate(value, { utc: utc }) : null); }, [
         value,
         utc,
     ]);
@@ -4373,58 +4569,55 @@ var lodash_debounce = debounce$1;
  *  return (<><input {...{ref,onChange}}/><p>{txt}</p></>)
  * }
  */
-const useDebounce = (func, opt, deps) => {
-    const debounce = useMemo$1(() => {
-        const { wait, ...settings } = opt;
+var useDebounce = function (func, opt, deps) {
+    var debounce = useMemo$1(function () {
+        var wait = opt.wait, settings = __rest$1(opt, ["wait"]);
         return lodash_debounce(func, wait, settings);
     }, deps || []);
-    useEffect(() => debounce.cancel, [debounce]);
+    useEffect(function () { return debounce.cancel; }, [debounce]);
     return debounce;
 };
 
-const filterElements = (match) => (elements) => {
-    return match ? elements.filter((el) => el.nodeName.match(match)) : elements;
-};
-const defaultOptions$1 = {
-    identify: (el) => el.id,
+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; },
     config: {
         attributes: false,
         childList: true,
         subtree: true,
     },
 };
-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);
+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);
             if (curr[id])
                 throw Error('duplicate identifiers!');
             curr[id] = el;
             return curr;
         }, {});
     }, [container, selector, identify, filter]);
-    useEffect(() => {
+    useEffect(function () {
         // early exit, nothing to observe
         if (!container)
             return;
         // set current elements
         setElements(getElements());
         // Observe changes in DOM
-        const observer = new MutationObserver(() => {
+        var observer = new MutationObserver(function () {
             setElements(getElements());
         });
         // start observing
         observer.observe(container, config);
         console.debug('observing container', container);
         // stop observing when unmounted
-        return () => {
+        return function () {
             observer.disconnect();
             console.debug('observing disconnected', container);
         };
@@ -4432,98 +4625,100 @@ const useContentElements = (container, selector, options) => {
     return elements;
 };
 
-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)]);
+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)]);
     return (React__default.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: 'nb' },
         React__default.createElement(DesktopDatePicker
         // clearable @todo
-        , { 
+        , __assign({ 
             // clearable @todo
-            inputFormat: "DD/MM/YYYY", onError: (reason) => {
+            inputFormat: "DD/MM/YYYY", onError: function (reason) {
                 switch (reason) {
                     case 'invalidDate':
                         setError('Ugyldig dato');
                         break;
                     case 'maxDate':
-                        setError(`Dato må være før ${dayjs(props.maxDate)
+                        setError("Dato m\u00E5 v\u00E6re f\u00F8r ".concat(dayjs(props.maxDate)
                             .add(1, 'day')
-                            .format('DD/MM/YYYY')}`);
+                            .format('DD/MM/YYYY')));
                         break;
                     case 'minDate':
-                        setError(`Dato må være etter ${dayjs(props.minDate)
+                        setError("Dato m\u00E5 v\u00E6re etter ".concat(dayjs(props.minDate)
                             .subtract(1, 'day')
-                            .format('DD/MM/YYYY')}`);
+                            .format('DD/MM/YYYY')));
                         break;
                     default:
                         setError(undefined);
                 }
-            }, 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 })));
+            }, 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))));
 };
 
-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)]);
+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)]);
     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, { id: String(fromProperties.label), fullWidth: true, minDate: minDate, ...commonProperties, ...fromProperties, value: from, maxDate: to?.subtract(1, 'day') || undefined, onChange: setFrom })),
+            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(Grid, { item: true, xs: 12, sm: fullWidth ? 12 : 6 },
-            React__default.createElement(DatePicker, { id: String(toProperties.label), fullWidth: true, maxDate: maxDate, ...commonProperties, ...toProperties, value: to, minDate: from?.add(1, 'day') || undefined, onChange: setTo }))));
+            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 })))));
 };
 
-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 } },
+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) },
     props.header && (React.createElement(Typography, { variant: "h6", style: { paddingBottom: 10 } }, props.header)),
     props.inline
         ? renderHorizontal(props.infoFields)
-        : renderVertical(props.infoFields)));
+        : renderVertical(props.infoFields))); };
 
-const textStyles = {
+var textStyles = {
     userSelect: 'none',
     whiteSpace: 'nowrap',
     outline: 'none',
     fontSize: 16,
 };
-const useStyles$6 = makeStyles()(({ palette }, _props, classes) => {
-    const text = {
-        ...textStyles,
-        color: 'inherit',
-        fontWeight: 400,
-    };
+var useStyles$6 = makeStyles()(function (_a, _props, classes) {
+    var _b;
+    var palette = _a.palette;
+    var text = __assign(__assign({}, textStyles), { color: 'inherit', fontWeight: 400 });
     return {
         container: {
             padding: 10,
             display: 'flex',
             flexDirection: 'column',
         },
-        item: {
-            cursor: 'pointer',
-            color: palette.text.disabled,
-            outline: 'none',
-            '&:hover': {
-                color: palette.primary.main,
+        item: (_b = {
+                cursor: 'pointer',
+                color: palette.text.disabled,
+                outline: 'none',
+                '&:hover': {
+                    color: palette.primary.main,
+                }
             },
-            [`&:focus .${classes.text}`]: {
+            _b["&:focus .".concat(classes.text)] = {
                 color: palette.primary.main,
                 outline: 'auto',
             },
-        },
-        text,
-        selected: {
-            ...textStyles,
-            color: palette.primary.main,
-            fontWeight: 500,
-        },
+            _b),
+        text: text,
+        selected: __assign(__assign({}, textStyles), { color: palette.primary.main, fontWeight: 500 }),
         icon: {
             minWidth: 'fit-content',
             marginRight: 2,
@@ -4531,39 +4726,44 @@ const useStyles$6 = makeStyles()(({ palette }, _props, classes) => {
     };
 });
 
-const Sidebar = ({ pages, onPageClick, currentPageId }) => {
-    const [expanded, setExpanded] = React.useState([]);
-    const { classes } = useStyles$6();
-    React.useEffect(() => {
+var Sidebar = function (_a) {
+    var pages = _a.pages, onPageClick = _a.onPageClick, currentPageId = _a.currentPageId;
+    var _b = __read(React.useState([]), 2), expanded = _b[0], setExpanded = _b[1];
+    var classes = useStyles$6().classes;
+    React.useEffect(function () {
+        var _a;
         if (currentPageId) {
-            const pageId = pages.find((p) => p.children?.some((c) => c.id === currentPageId))?.id;
-            !!pageId && setExpanded([...expanded, pageId]);
+            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));
         }
     }, [pages]);
-    const toggleExpand = (id) => {
+    var toggleExpand = function (id) {
         if (expanded.includes(id)) {
-            setExpanded([...expanded.filter((_id) => _id !== id)]);
+            setExpanded(__spreadArray([], __read(expanded.filter(function (_id) { return _id !== id; })), false));
         }
         else {
-            setExpanded([...expanded, id]);
+            setExpanded(__spreadArray(__spreadArray([], __read(expanded), false), [id], false));
         }
     };
-    const handleClick = (page) => {
+    var handleClick = function (page) {
         page.children ? toggleExpand(page.id) : onPageClick(page);
     };
-    const renderItem = (page) => (React.createElement(React.Fragment, null,
+    var renderItem = function (page) { return (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 })));
+        React.createElement(ListItemText$1, { sx: { outline: 'none !important' }, tabIndex: -1, disableTypography: true, primary: page.label, className: page.id === currentPageId ? classes.selected : classes.text }))); };
     return (React.createElement(Box$1, { className: classes.container },
-        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),
-                page.children ? (expanded.includes(page.id) ? (React.createElement(ExpandMore, null)) : (React.createElement(ExpandLess, null))) : null),
-            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))))))))))));
+        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),
+                    page.children ? (expanded.includes(page.id) ? (React.createElement(ExpandMore, null)) : (React.createElement(ExpandLess, null))) : null),
+                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))); })))));
+        }))));
 };
 
-var useStyles$5 = makeStyles()(() => ({
+var useStyles$5 = makeStyles()(function () { return ({
     message: {
         overflowWrap: 'break-word',
         backgroundColor: '#f8e9d6',
@@ -4600,16 +4800,17 @@ var useStyles$5 = makeStyles()(() => ({
         alignSelf: 'center',
         marginLeft: 5,
     },
-}));
+}); });
 
-const ServiceMessage = ({ id, message, isPublic, onDismiss }) => {
-    const { classes } = useStyles$5();
+var ServiceMessage = function (_a) {
+    var id = _a.id, message = _a.message, isPublic = _a.isPublic, onDismiss = _a.onDismiss;
+    var classes = useStyles$5().classes;
     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: () => onDismiss(id), size: "large" },
+        !isPublic && onDismiss && (React.createElement(IconButton, { className: classes.button, onClick: function () { return onDismiss(id); }, size: "large" },
             React.createElement(Close, { className: classes.close })))));
 };
 
@@ -13406,110 +13607,128 @@ var ConnectedDroppable = connect(makeMapStateToProps$1, mapDispatchToProps$1, nu
 })(Droppable);
 ConnectedDroppable.defaultProps = defaultProps;
 
-const setDimensions = (el) => {
-    const { width, height } = el.getBoundingClientRect();
-    el.style.width = `${width}px`;
-    el.style.height = `${height}px`;
+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 clearDimensions = (el) => {
+var clearDimensions = function (el) {
     el.style.removeProperty('height');
     el.style.removeProperty('width');
 };
-function SortableTableCell({ locked, children, ...props }) {
-    const ref = useRef();
-    useMemo$1(() => {
+function SortableTableCell(_a) {
+    var locked = _a.locked, children = _a.children, props = __rest$1(_a, ["locked", "children"]);
+    var ref = useRef();
+    useMemo$1(function () {
         if (ref.current) {
             locked ? setDimensions(ref.current) : clearDimensions(ref.current);
         }
     }, [locked]);
-    return (React__default.createElement(TableCell$1, { ref: ref, ...props }, children));
+    return (React__default.createElement(TableCell$1, __assign({ ref: ref }, props), children));
 }
 
-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 },
+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),
                 React__default.createElement(DragIndicator, null)),
             renderRow(isDragging)));
     }));
 }
 
 function reorder(list, startIndex, endIndex) {
-    const [removed] = list.splice(startIndex, 1);
+    var _a = __read(list.splice(startIndex, 1), 1), removed = _a[0];
     list.splice(endIndex, 0, removed);
     return list;
 }
 function castCellNode(value) {
     return typeof value === 'object' && value.value !== undefined
         ? value
-        : { value };
+        : { value: value };
 }
-const SortableTable = ({ columns, items, identify, headerValue, cellValue, disabled, onChange, }) => {
-    const [records, setRecords] = useState(items);
-    const [isDragging, setIsDragging] = useState(false);
-    useMemo$1(() => {
+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 () {
         return setRecords(items);
     }, [items]);
-    const onDragStart = () => {
+    var onDragStart = function () {
         setIsDragging(true);
     };
-    const onDragEnd = (result) => {
+    var onDragEnd = function (result) {
         setIsDragging(false);
         if (result.destination) {
-            const newOrder = reorder(records, result.source.index, result.destination.index);
+            var newOrder = reorder(records, result.source.index, result.destination.index);
             setRecords(newOrder);
             onChange &&
-                onChange(newOrder.map((record, index) => ({
+                onChange(newOrder.map(function (record, index) { return ({
                     id: identify(record),
-                    index,
-                })));
+                    index: index,
+                }); }));
         }
     };
-    const headers = useMemo$1(() => {
-        return columns.map((column) => castCellNode(headerValue ? headerValue(column) : column));
+    var headers = useMemo$1(function () {
+        return columns.map(function (column) {
+            return castCellNode(headerValue ? headerValue(column) : column);
+        });
     }, [columns, headerValue]);
-    const getCellValue = useCallback$1((column, item) => {
+    var getCellValue = useCallback$1(function (column, item) {
         return castCellNode(cellValue ? cellValue(column, item) : item[column]);
     }, [cellValue]);
-    const render = useCallback$1((item) => columns.map((column) => getCellValue(column, item)), [columns, getCellValue]);
+    var render = useCallback$1(function (item) {
+        return columns.map(function (column) { return 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(({ value, properties }, index) => {
-                    return (React__default.createElement(SortableTableCell, { key: `header-${index}`, locked: isDragging, ...properties }, value));
+                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));
                 }))),
         React__default.createElement(DragDropContext, { onDragEnd: onDragEnd, onBeforeDragStart: onDragStart },
-            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 = {
+            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 = {
                         id: identify(item),
-                        item,
-                        index,
-                        render,
-                        disabled,
+                        item: item,
+                        index: index,
+                        render: render,
+                        disabled: disabled,
                     };
-                    return (React__default.createElement(SortableTableRow, { key: `item-${props.id}`, ...props }));
+                    return (React__default.createElement(SortableTableRow, __assign({ key: "item-".concat(props.id) }, props)));
                 }),
-                provided.placeholder))))));
+                provided.placeholder)); }))));
 };
 
-const EditorContext = createContext({});
+var EditorContext = createContext({});
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 
@@ -20174,52 +20393,58 @@ function stateFromHTML(html, options) {
   return stateFromElement(element, otherOptions);
 }
 
-const createState = (content, decorators) => {
-    const decorator = decorators ? new CompositeDecorator(decorators) : undefined;
+var createState = function (content, decorators) {
+    var decorator = decorators ? new CompositeDecorator(decorators) : undefined;
     if (content) {
-        const state = stateFromHTML(content);
+        var state = stateFromHTML(content);
         return EditorState.createWithContent(state, decorator);
     }
     return EditorState.createEmpty(decorator);
 };
-const convert2html = (content, options = {
-    inlineStyles: {
-        BOLD: { element: 'strong' },
-        ITALIC: { element: 'i' },
-        UNSTYLED: { element: 'p' },
-    },
-}) => {
-    const html = content.getPlainText().trim().length
+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
         ? stateToHTML(content, options)
         : '';
     return html; //.replace(/&nbsp;/, ' ');
 };
-const convert2txt = (content) => content.getPlainText();
-const parseContentState = (state) => ({
+var convert2txt = function (content) {
+    return content.getPlainText();
+};
+var parseContentState = function (state) { return ({
     txt: convert2txt(state).trim(),
     html: convert2html(state),
-});
-const parseContent = (content, decorators) => parseContentState(createState(content, decorators).getCurrentContent());
-const UpdateStyle = (state, style) => RichUtils.toggleInlineStyle(state, style);
+}); };
+var parseContent = function (content, decorators) {
+    return parseContentState(createState(content, decorators).getCurrentContent());
+};
+var UpdateStyle = function (state, style) { return RichUtils.toggleInlineStyle(state, style); };
 
-const Provider = ({ html, decorators, children, }) => {
-    const [state, setState] = useState(createState('', decorators));
-    const [selection, setSelection] = useState();
-    useMemo$1(() => {
+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 () {
         console.debug('creating new state for editor', html);
         setState(createState(html, decorators));
     }, [html, decorators]);
     return (React__default.createElement(EditorContext.Provider, { value: {
-            state,
-            setState,
-            selection,
-            setSelection,
+            state: state,
+            setState: setState,
+            selection: selection,
+            setSelection: 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}
 
-const useButtonStyles = makeStyles()({
+var useButtonStyles = makeStyles()({
     btn: {
         backgroundColor: 'white',
         '&:hover': {
@@ -20234,114 +20459,121 @@ const useButtonStyles = makeStyles()({
     },
 });
 
-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': {
+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,
             borderColor: hasFocus
                 ? theme.palette.primary.main
-                : theme.palette.text.primary,
+                : 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,
+            }),
         },
-        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',
+        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',
-    },
-}));
+        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',
+        },
+    });
+});
 
-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 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 InlineButton = ({ type, editor: _editor, children, ...props }) => {
-    const { classes } = useButtonStyles();
-    const { state, setState } = useContext(EditorContext);
-    const onClick = (event) => {
+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) {
         event.preventDefault();
-        const e = event;
+        var e = event;
         setState(UpdateStyle(state, e.currentTarget.value));
     };
-    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 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));
 };
 
 var ButtonType;
@@ -20349,7 +20581,7 @@ var ButtonType;
     ButtonType["bold"] = "BOLD";
     ButtonType["italic"] = "ITALIC";
 })(ButtonType || (ButtonType = {}));
-const createButton = (style) => {
+var createButton = function (style) {
     switch (style) {
         case 'bold':
             return {
@@ -20364,109 +20596,117 @@ const createButton = (style) => {
     }
 };
 
-const FloatingToolbar = ({ editor, buttons }) => {
-    const { selection } = useContext(EditorContext);
-    const [isVisible, setVisibility] = useState(false);
-    const toolbar = useRef();
-    const { classes } = useFloatingToolbarStyles({ isVisible });
+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;
     // @eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => {
-        const selectionRect = getVisibleSelectionRect(window);
+    useEffect(function () {
+        var _a;
+        var selectionRect = getVisibleSelectionRect(window);
         if (!selectionRect || !toolbar.current || !editor.current)
             return;
-        const editorRoot = editor.current.editorContainer;
-        const editorRootRect = editorRoot.getBoundingClientRect();
-        const position = {
+        var editorRoot = editor.current.editorContainer;
+        var editorRootRect = editorRoot.getBoundingClientRect();
+        var position = {
             top: editorRoot.offsetTop -
-                toolbar?.current?.offsetHeight +
+                ((_a = toolbar === null || toolbar === void 0 ? void 0 : toolbar.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) +
                 (selectionRect.top - editorRootRect.top) -
                 5,
             left: editorRoot.offsetLeft +
                 (selectionRect.left - editorRootRect.left) +
                 selectionRect.width / 2,
         };
-        toolbar.current.style.top = `${position.top}px`;
-        toolbar.current.style.left = `${position.left}px`;
+        toolbar.current.style.top = "".concat(position.top, "px");
+        toolbar.current.style.left = "".concat(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(({ type, children }, key) => (React__default.createElement(InlineButton, { key: key, type: type, editor: editor }, children))))));
+        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));
+        }))));
 };
 
-const customKeyHandler = (setEditorState) => (command, editorState) => {
+var customKeyHandler = function (setEditorState) { return function (command, editorState) {
     if (command === 'shift-split-block') {
-        const newState = RichUtils.insertSoftNewline(editorState);
+        var newState = RichUtils.insertSoftNewline(editorState);
         setEditorState(newState);
         return 'handled';
     }
     return 'not-handled';
-};
-const keyHandler = (setEditorState, allowedStyles) => (command, editorState) => {
-    if (!allowedStyles || allowedStyles.some((s) => s === command)) {
-        const newState = RichUtils.handleKeyCommand(editorState, command);
+}; };
+var keyHandler = function (setEditorState, allowedStyles) { return function (command, editorState) {
+    if (!allowedStyles || allowedStyles.some(function (s) { return s === command; })) {
+        var newState = RichUtils.handleKeyCommand(editorState, command);
         if (newState) {
             setEditorState(newState);
             return 'handled';
         }
     }
     return customKeyHandler(setEditorState)(command, editorState);
-};
+}; };
 
-const blockStyleFn = (block) => block.getType();
-const createDefaultButtons = () => [
+var blockStyleFn = function (block) { return block.getType(); };
+var createDefaultButtons = function () { return [
     createButton('bold'),
     createButton('italic'),
-];
-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
+]; };
+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
         ? createDefaultButtons()
         : allowedStyles.map(createButton);
     // TODO: make prop
-    const handleKeyCommand = canStyle
+    var handleKeyCommand = canStyle
         ? keyHandler(setState, allowedStyles)
         : customKeyHandler(setState);
-    const [hasFocus, setFocused] = useState(false);
-    const [charCount, setCharCount] = useState(0);
+    var _d = __read(useState(false), 2), hasFocus = _d[0], setFocused = _d[1];
+    var _e = __read(useState(0), 2), charCount = _e[0], setCharCount = _e[1];
     // defer focus until next tick
-    const requestFocus = () => {
-        window.requestAnimationFrame(() => ref.current?.focus());
+    var requestFocus = function () {
+        window.requestAnimationFrame(function () { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
     // multiple components might request focus and deligate back focus
-    const onBlur = useDebounce(() => ref.current && setFocused(false), {
+    var onBlur = useDebounce(function () { return ref.current && setFocused(false); }, {
         wait: 150,
     });
-    const onFocus = () => {
+    var onFocus = function () {
         // when editor focused cancel pending defocus
         onBlur.cancel();
         setFocused(true);
     };
-    const onChange = (nextState) => {
+    var onChange = function (nextState) {
         setState(nextState);
         setSelection(nextState.getSelection());
         setCharCount(getCharCount(nextState));
     };
-    useEffect(() => {
+    useEffect(function () {
         autoFocus && ref.current && ref.current.focus();
     }, [autoFocus]);
     // hacky workaround?
-    const oldContent = useRef(state.getCurrentContent());
-    const currentContent = state.getCurrentContent();
-    useEffect(() => {
+    var oldContent = useRef(state.getCurrentContent());
+    var currentContent = state.getCurrentContent();
+    useEffect(function () {
         if (oldContent.current !== currentContent) {
             onContentChange && onContentChange(currentContent);
         }
     }, [convert2html(currentContent)]);
-    const hasContent = state.getCurrentContent().hasText();
-    const { classes: styles } = useEditorStyles({
-        hasFocus,
-        hasContent,
+    var hasContent = state.getCurrentContent().hasText();
+    var styles = useEditorStyles({
+        hasFocus: hasFocus,
+        hasContent: hasContent,
         readOnly: props.readOnly,
-    });
-    const keyBindingFn = (e) => {
+    }).classes;
+    var keyBindingFn = function (e) {
         if (disableNewlines && e.key === 'Enter')
             return null;
         if (e.key === 'Enter' && e.shiftKey) {
@@ -20476,40 +20716,31 @@ const EditorComponent = ({ label, classes, autoFocus, helperText, showCharCount,
             return getDefaultKeyBinding(e);
         }
     };
-    const handlePastedText = (text, _html, editorState) => {
+    var handlePastedText = function (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?.root), onClick: requestFocus },
-        React__default.createElement("legend", { className: clsx(styles.legend, classes?.legend) },
+    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) },
             React__default.createElement("span", { dangerouslySetInnerHTML: { __html: '&#8203;' } })),
-        label && (React__default.createElement("label", { className: clsx(styles.label, classes?.label) }, label)),
+        label && (React__default.createElement("label", { className: clsx(styles.label, classes === null || classes === void 0 ? void 0 : classes.label) }, label)),
         canStyle && (React__default.createElement(Toolbar, { editor: ref, buttons: buttons })),
-        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,
-                } })),
+        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)))),
         (showCharCount || helperText) && (React__default.createElement(Box, { margin: ".5rem" },
-            showCharCount && (React__default.createElement(FormHelperText, { className: styles.charcount }, `Antall tegn: ${charCount}`)),
+            showCharCount && (React__default.createElement(FormHelperText, { className: styles.charcount }, "Antall tegn: ".concat(charCount))),
             helperText && (React__default.createElement(FormHelperText, { className: styles.helpertext }, helperText))))));
 };
 
-const GrepEditor = ({ html, ...props }) => {
-    return (React__default.createElement(Provider, { ...{ html } },
-        React__default.createElement(EditorComponent, { ...props })));
+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 dimensions = {
+var dimensions = {
     breadcrumbsFontSize: 16,
     contentWidth: 1028,
     footerHeight: 50,
@@ -20520,7 +20751,7 @@ const dimensions = {
     toolbarMenuWidth: 1028,
     toolbarMenuHeight: 50,
 };
-const ToolbarTitle = styled(NavLink)(() => ({
+var ToolbarTitle = styled(NavLink)(function () { return ({
     display: 'flex',
     fontSize: '24px',
     color: '#303030',
@@ -20534,84 +20765,102 @@ const ToolbarTitle = styled(NavLink)(() => ({
         outline: 'none',
         textDecoration: 'underline',
     },
-}));
-const EnvironmentTitle = styled('div')(() => ({
+}); });
+var EnvironmentTitle = styled('div')(function () { return ({
     color: 'rgba(0, 0, 0, 0.33)',
     marginLeft: '17px',
-}));
-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 }) => {
+}); });
+var Toolbar = styled('div')(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            display: 'flex',
+            flexDirection: 'column'
+        },
+        _b[theme.breakpoints.down('sm')] = {
+            height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
+            minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
+            maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
+        },
+        _b[theme.breakpoints.up('sm')] = {
+            height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
+            minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
+            maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
+        },
+        _b);
+});
+var ToolbarFixer = styled('div')(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex: 101
+        },
+        _b[theme.breakpoints.down('sm')] = {
+            height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
+            minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
+            maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeightMobile, "px"),
+        },
+        _b[theme.breakpoints.up('sm')] = {
+            height: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
+            minHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
+            maxHeight: "".concat(dimensions.toolbarMenuHeight + dimensions.toolbarHeight, "px"),
+        },
+        _b);
+});
+var ToolbarInner = styled('div')(function (_a) {
+    var _b;
+    var colors = _a.colors, theme = _a.theme;
     if (!theme) {
         return {};
     }
-    return {
-        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`,
+    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"),
         },
-        [theme.breakpoints.up('sm')]: {
+        _b[theme.breakpoints.up('sm')] = {
             padding: 0,
-            height: `${dimensions.toolbarHeight}px`,
-            minHeight: `${dimensions.toolbarHeight}px`,
+            height: "".concat(dimensions.toolbarHeight, "px"),
+            minHeight: "".concat(dimensions.toolbarHeight, "px"),
         },
-    };
+        _b;
 });
-const ToolbarLeft = styled('div')(() => ({
+var ToolbarLeft = styled('div')(function () { return ({
     alignItems: 'center',
     display: 'flex',
     marginLeft: '40px',
-}));
-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')(() => ({
+}); });
+var ToolbarRight = styled('div')(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            alignItems: 'center',
+            display: 'flex',
+            marginLeft: 'auto',
+            marginRight: '40px'
+        },
+        _b[theme.breakpoints.down('sm')] = {
+            display: 'none',
+        },
+        _b[theme.breakpoints.up('sm')] = {
+            display: 'flex',
+        },
+        _b);
+});
+var UserContainer = styled('div')(function () { return ({
     display: 'flex',
     flexDirection: 'column',
     margin: '0 17px',
@@ -20619,117 +20868,133 @@ const UserContainer = styled('div')(() => ({
     textTransform: 'none',
     fontWeight: '400',
     color: 'rgba(0, 0, 0, 0.87)',
-}));
-const AccountName = styled('span')(() => ({
+}); });
+var AccountName = styled('span')(function () { return ({
     fontSize: '18px',
     lineHeight: '25px',
-}));
-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')]: {
+}); });
+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',
         },
-        [theme.breakpoints.up('sm')]: {
+        _b[theme.breakpoints.up('sm')] = {
             display: 'flex',
         },
-    };
+        _b;
 });
-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',
-    },
-    [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': {
-            marginLeft: '-24px',
+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)'
         },
-    },
-    ':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',
+        _b[theme.breakpoints.down('sm')] = {
+            display: 'flex',
         },
-    },
-    ':hover': {
+        _b[theme.breakpoints.up('sm')] = {
+            display: 'none',
+        },
+        _b);
+});
+var ToolbarMenuInner = styled('div')(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            display: 'flex',
+            height: 'fit-content',
+            maxWidth: "".concat(dimensions.toolbarMenuWidth, "px"),
+            margin: '0 auto'
+        },
+        _b[theme.breakpoints.down('lg')] = {
+            padding: '0 24px',
+        },
+        _b[theme.breakpoints.up('lg')] = {
+            padding: 0,
+        },
+        _b);
+});
+var menuItemHoverGreen = '#B9E1CC';
+var ToolbarMenuItem = styled(NavLink)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        alignItems: 'center',
+        borderRight: '1px solid #696868',
+        color: theme.palette.background.default,
+        cursor: 'pointer',
+        display: 'flex',
+        fontSize: '16px',
+        padding: '0 17px',
+        height: '100%',
+        textTransform: 'capitalize',
+        userSelect: 'none',
+        position: 'relative',
         textDecoration: 'none',
-        color: menuItemHoverGreen,
+        fontWeight: 500,
+        ':first-child': {
+            paddingLeft: 0,
+            ':after': {
+                marginLeft: '-24px',
+            },
+        },
+        ':last-child': {
+            borderRight: 'none',
+        },
         ':after': {
+            position: 'absolute',
+            bottom: 0,
+            left: '50%',
+            width: '32px',
+            marginLeft: '-16px',
+            borderBottom: "2px solid ".concat(theme.palette.secondary.light),
+            opacity: 0,
+            content: '""',
+            transition: 'all 0.3s ease',
+            pointerEvents: 'none',
+        },
+        ':focus': {
+            outline: 'none',
+            color: menuItemHoverGreen,
+            ':after': {
+                bottom: '-4px',
+                opacity: '1',
+            },
+        },
+        ':hover': {
+            textDecoration: 'none',
+            color: menuItemHoverGreen,
+            ':after': {
+                bottom: '-4px',
+                opacity: '1',
+            },
+        },
+        '.active:after': {
             bottom: '-4px',
             opacity: '1',
         },
-    },
-    '.active:after': {
-        bottom: '-4px',
-        opacity: '1',
-    },
-}));
-const MobileToolbarMenuItem = styled(NavLink)(() => ({
+    });
+});
+var MobileToolbarMenuItem = styled(NavLink)(function () { return ({
     alignItems: 'center',
     color: 'black',
     cursor: 'pointer',
@@ -20739,23 +21004,24 @@ const MobileToolbarMenuItem = styled(NavLink)(() => ({
     userSelect: 'none',
     position: 'relative',
     textDecoration: 'none',
-}));
+}); });
 
-const MobileAppBar = ({ userMenuItems, menuItems, }) => {
-    const [anchorElNav, setAnchorElNav] = React.useState(null);
-    const openNav = Boolean(anchorElNav);
-    const handleClickNav = (event) => {
+var MobileAppBar = function (_a) {
+    var userMenuItems = _a.userMenuItems, menuItems = _a.menuItems;
+    var _b = __read(React.useState(null), 2), anchorElNav = _b[0], setAnchorElNav = _b[1];
+    var openNav = Boolean(anchorElNav);
+    var handleClickNav = function (event) {
         setAnchorElNav(event.currentTarget);
     };
-    const handleCloseNav = () => {
+    var handleCloseNav = function () {
         setAnchorElNav(null);
     };
-    const [anchorElMenu, setAnchorElMenu] = React.useState(null);
-    const openMenu = Boolean(anchorElMenu);
-    const handleClickMenu = (event) => {
+    var _c = __read(React.useState(null), 2), anchorElMenu = _c[0], setAnchorElMenu = _c[1];
+    var openMenu = Boolean(anchorElMenu);
+    var handleClickMenu = function (event) {
         setAnchorElMenu(event.currentTarget);
     };
-    const handleCloseMenu = () => {
+    var handleCloseMenu = function () {
         setAnchorElMenu(null);
     };
     return (React.createElement(MobileToolbarMenu, { style: { flexGrow: 1 } },
@@ -20765,39 +21031,40 @@ const MobileAppBar = ({ userMenuItems, menuItems, }) => {
                     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((page) => (React.createElement(MobileToolbarMenuItem, { key: page.name, to: page.redirectUrl || '' },
+                    } }, menuItems.map(function (page) { return (React.createElement(MobileToolbarMenuItem, { key: page.name, to: page.redirectUrl || '' },
                     React.createElement(MenuItem, { sx: {
                             width: '100%',
-                        }, key: page.name }, page.translatedTextRef))))),
+                        }, 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((i, index) => (React.createElement(Box, { key: i.id },
-                    React.createElement(MenuItem, { key: i.id, onClick: () => {
+                    } }, userMenuItems.map(function (i, index) { return (React.createElement(Box, { key: i.id },
+                    React.createElement(MenuItem, { key: i.id, onClick: function () {
                             handleCloseMenu();
                             i.action && i.action();
                         } }, i.isAnchor ? (React.createElement("a", { style: {
                             textDecoration: 'inherit',
                             color: 'inherit',
                         }, rel: "noreferrer", href: i.href }, i.label)) : (i.label)),
-                    userMenuItems.length > index + 1 && React.createElement(Divider, null)))))))));
+                    userMenuItems.length > index + 1 && React.createElement(Divider, null))); }))))));
 };
 
-const AppBar = ({ username, currentPath, isProd, appTitle, userMenuItems, menuItems, userRole, colors, }) => {
-    const [userMenuAnchor, setUserMenuAnchor] = React.useState(null);
-    const _handleIconButtonClick = (event) => {
+var AppBar = function (_a) {
+    var username = _a.username, currentPath = _a.currentPath, isProd = _a.isProd, appTitle = _a.appTitle, userMenuItems = _a.userMenuItems, menuItems = _a.menuItems, userRole = _a.userRole, colors = _a.colors;
+    var _b = __read(React.useState(null), 2), userMenuAnchor = _b[0], setUserMenuAnchor = _b[1];
+    var _handleIconButtonClick = function (event) {
         event.preventDefault();
         setUserMenuAnchor(event.currentTarget);
     };
-    const _handleCloseUserMenu = () => {
+    var _handleCloseUserMenu = function () {
         setUserMenuAnchor(null);
     };
-    const _renderToolbarMenuItem = (page) => {
-        const isActive = page?.exact
+    var _renderToolbarMenuItem = function (page) {
+        var isActive = (page === null || page === void 0 ? void 0 : page.exact)
             ? currentPath === page.redirectUrl
             : currentPath.includes(page.redirectUrl || '');
-        return (React.createElement(ToolbarMenuItem, { className: isActive ? 'active' : '', to: page.redirectUrl || '', key: page.name, tabIndex: 0 }, page?.translatedTextRef));
+        return (React.createElement(ToolbarMenuItem, { className: isActive ? 'active' : '', to: page.redirectUrl || '', key: page.name, tabIndex: 0 }, page === null || page === void 0 ? void 0 : page.translatedTextRef));
     };
     return (React.createElement(Toolbar, null,
         React.createElement(ToolbarFixer, null,
@@ -20819,8 +21086,8 @@ const AppBar = ({ username, currentPath, isProd, appTitle, userMenuItems, menuIt
                         }, transformOrigin: {
                             vertical: 'top',
                             horizontal: 'center',
-                        } }, userMenuItems.map((i, index) => {
-                        return (React.createElement(MenuItem$1, { key: i.id, onClick: () => {
+                        } }, userMenuItems.map(function (i, index) {
+                        return (React.createElement(MenuItem$1, { key: i.id, onClick: function () {
                                 setUserMenuAnchor(null);
                                 i.action && i.action();
                             }, divider: userMenuItems.length > index + 1, sx: {
@@ -20833,35 +21100,36 @@ const AppBar = ({ username, currentPath, isProd, appTitle, userMenuItems, menuIt
                             }, rel: "noreferrer", href: i.href, onClick: i.onClick }, i.label)) : (i.label)));
                     })))),
             React.createElement(ToolbarMenu, { role: "navigation" },
-                React.createElement(ToolbarMenuInner, null, menuItems.map((page) => _renderToolbarMenuItem(page)))),
+                React.createElement(ToolbarMenuInner, null, menuItems.map(function (page) { return _renderToolbarMenuItem(page); }))),
             React.createElement(MobileAppBar, { menuItems: menuItems, userMenuItems: userMenuItems, colors: colors }))));
 };
 
-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 = () => {
+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 () {
         setLeave(false);
         setOpen(false);
         onCancel && onCancel();
     };
-    const handleDiscard = () => {
+    var handleDiscard = function () {
         setLeave(true);
         setOpen(false);
         onDiscard && onDiscard();
         lastLocation &&
-            window.requestAnimationFrame(() => dispatch(push(lastLocation)));
+            window.requestAnimationFrame(function () { return dispatch(push(lastLocation)); });
     };
-    const handleSave = () => {
+    var handleSave = function () {
         onSave && onSave();
         setLeave(true);
         setOpen(false);
         lastLocation &&
-            window.requestAnimationFrame(() => dispatch(push(lastLocation)));
+            window.requestAnimationFrame(function () { return dispatch(push(lastLocation)); });
     };
-    const handleLeave = (location) => {
+    var handleLeave = function (location) {
         setLastLocation(location);
         setOpen(!leave);
         return !!leave;
@@ -20878,17 +21146,21 @@ const NavGuard = ({ when, title, txt, txtSave, txtCancel, txtDiscard, onSave, on
                 onSave && (React.createElement(Button, { onClick: handleSave, color: "primary" }, txtSave))))));
 };
 
-const useStyles$3 = makeStyles()(({ palette }) => ({
-    discard: {
-        color: palette.error.main,
-        '&:hover': {
-            backgroundColor: hex2rgba(palette.error.main, 0.1),
+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 ConfirmationDialog = ({ open, title, description, warning, onSubmit, onCancel, confirmText = 'OK', cancelText = 'Avbryt', }) => {
-    const { classes } = useStyles$3();
+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;
     return (React__default.createElement(Dialog, { open: open },
         React__default.createElement(DialogTitle, null, title),
         React__default.createElement(DialogContent, null,
@@ -20898,56 +21170,62 @@ const ConfirmationDialog = ({ open, title, description, warning, onSubmit, onCan
             React__default.createElement(Button, { className: warning ? classes.discard : '', onClick: onSubmit }, confirmText))));
 };
 
-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) => {
+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) {
         setConfirmationState(options);
         setDialogOpen(true);
-        return new Promise((resolve, reject) => {
-            awaitingPromiseRef.current = { resolve, reject };
+        return new Promise(function (resolve, reject) {
+            awaitingPromiseRef.current = { resolve: resolve, reject: reject };
         });
     };
-    const handleCancel = () => {
+    var handleCancel = function () {
         setDialogOpen(false);
     };
-    const handleSubmit = () => {
-        awaitingPromiseRef.current?.resolve();
+    var handleSubmit = function () {
+        var _a;
+        (_a = awaitingPromiseRef.current) === null || _a === void 0 ? void 0 : _a.resolve();
         setDialogOpen(false);
     };
     return (React__default.createElement(ConfirmationServiceContext.Provider, { value: openDialog },
-        React__default.createElement(ConfirmationDialog, { open: dialogOpen, onSubmit: handleSubmit, onCancel: handleCancel, ...confirmationState }),
+        React__default.createElement(ConfirmationDialog, __assign({ open: dialogOpen, onSubmit: handleSubmit, onCancel: handleCancel }, confirmationState)),
         children));
 };
-const useConfirmation = () => React__default.useContext(ConfirmationServiceContext);
+var useConfirmation = function () {
+    return React__default.useContext(ConfirmationServiceContext);
+};
 
-const GrepDialog = ({ open, title, content, onClose, closeBtnText = 'Lukk', ...props }) => {
-    const actions = [
+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 = [
         React__default.createElement(Button, { key: "OK", color: "primary", onClick: onClose }, closeBtnText),
     ];
     if (props.actions)
-        actions.push(...props.actions);
+        actions.push.apply(actions, __spreadArray([], __read(props.actions), false));
     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((action) => action))));
+        React__default.createElement(DialogActions, null, actions.map(function (action) { return action; }))));
 };
 
-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) => {
+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) {
         setDialogState(options);
         setDialogOpen(true);
     };
     return (React__default.createElement(GrepDialogServiceContext.Provider, { value: openDialog },
-        React__default.createElement(GrepDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), ...dialogState }),
+        React__default.createElement(GrepDialog, __assign({ open: dialogOpen, onClose: function () { return setDialogOpen(false); } }, dialogState)),
         children));
 };
-const useGrepDialog = () => React__default.useContext(GrepDialogServiceContext);
+var useGrepDialog = function () { return React__default.useContext(GrepDialogServiceContext); };
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -21389,89 +21667,89 @@ function toNumber(value) {
 
 var lodash_throttle = throttle;
 
-const generateElementId = (element) => {
-    const tmpId = element.innerText.replace(/\s/g, '-').toLowerCase();
-    let id = tmpId, index = 1;
+var generateElementId = function (element) {
+    var tmpId = element.innerText.replace(/\s/g, '-').toLowerCase();
+    var id = tmpId, index = 1;
     while (document.getElementById(id)) {
-        id = `${tmpId}-${++index}`;
+        id = "".concat(tmpId, "-").concat(++index);
     }
     return id;
 };
-const identifyElement = (identify) => {
+var identifyElement = function (identify) {
     identify = identify || generateElementId;
-    return (element) => {
+    return function (element) {
         !element.id && (element.id = identify(element));
         return element.id;
     };
 };
 
-const initial = {
+var initial = {
     elements: {},
-    setSelected: () => {
+    setSelected: function () {
         throw Error('not implemented');
     },
 };
-const context = React__default.createContext(initial);
+var context = React__default.createContext(initial);
 context.displayName = 'Grep.ToC.Context';
 
-const defaultSelector = [...new Array(9)]
-    .map((_, i) => `h${i + 1}:not([role="presentation"])`)
+var defaultSelector = __spreadArray([], __read(new Array(9)), false).map(function (_, i) { return "h".concat(i + 1, ":not([role=\"presentation\"])"); })
     .join(',');
-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 });
+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 });
     }, [scrollTarget, offsetTop]);
-    const identify = useMemo$1(() => {
+    var identify = useMemo$1(function () {
         return identifyElementFn(identifier || generateElementId);
     }, [identifier, identifyElementFn]);
-    const elements = useContentElements(container, props.selector || defaultSelector, { identify });
-    const setSelected = useCallback$1(lodash_throttle((element, scroll) => {
+    var elements = useContentElements(container, props.selector || defaultSelector, { identify: identify });
+    var setSelected = useCallback$1(lodash_throttle(function (element, scroll) {
         element && scroll && scrollToElement(element);
         _setSelected(element);
     }, 50, { trailing: false }), [_setSelected, scrollToElement]);
-    const getViewportElement = useCallback$1(() => {
-        const records = Object.values(elements);
+    var getViewportElement = useCallback$1(function () {
+        var records = Object.values(elements);
         if (!records.length)
             return;
-        const index = records.findIndex((e) => e.getBoundingClientRect().bottom > offsetTop);
+        var index = records.findIndex(function (e) { return e.getBoundingClientRect().bottom > offsetTop; });
         if (index > 0) {
-            const rect = records[index].getBoundingClientRect();
-            const offset = Math.floor(rect.top - offsetTop);
-            const within = offset < rect.height + 20;
+            var rect = records[index].getBoundingClientRect();
+            var offset = Math.floor(rect.top - offsetTop);
+            var within = offset < rect.height + 20;
             return records[within ? index : index - 1];
         }
         return records[index];
     }, [elements, offsetTop]);
     // attach observer to elements
-    useEffect(() => {
-        const target = scrollTarget || window;
+    useEffect(function () {
+        var target = scrollTarget || window;
         if (!target)
             return;
-        const onScroll = lodash_throttle(() => {
-            const element = getViewportElement();
+        var onScroll = lodash_throttle(function () {
+            var element = getViewportElement();
             setSelected(element);
         }, 50);
         target.addEventListener('scroll', onScroll, false);
         console.debug('scroll observer attached');
-        return () => {
+        return function () {
             console.debug('scroll observer detached');
             return target.removeEventListener('scroll', onScroll);
         };
     }, [scrollTarget, setSelected, offsetTop, getViewportElement]);
     // notify observer when selected change
-    useEffect(() => {
+    useEffect(function () {
         selected && onSelected && onSelected(selected);
     }, [selected, onSelected]);
     // observe changes in hash
-    useEffect(() => {
+    useEffect(function () {
         if (hash && elements[hash]) {
             console.debug('anchor change, setting selected element');
             setSelected(elements[hash], true);
@@ -21483,15 +21761,17 @@ const GrepTableOfContentProvider = ({ ...props }) => {
         setSelected(elements[hash], true);
         setInitialized(true);
     }
-    return (React__default.createElement(context.Provider, { value: { elements, selected, classes, setSelected } }, children));
+    return (React__default.createElement(context.Provider, { value: { elements: elements, selected: selected, classes: classes, setSelected: setSelected } }, children));
 };
 GrepTableOfContentProvider.displayName = 'Grep.ToC.Provider';
 
-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)})`;
+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), ")");
     return {
         root: {
             color: linkcolor,
@@ -21507,7 +21787,7 @@ const useStyles$2 = makeStyles()(({ palette }, { lvl }) => {
             textOverflow: 'ellipsis',
             '&--selected': {
                 color: selectedColor,
-                borderLeft: `5px solid ${selectedColor}`,
+                borderLeft: "5px solid ".concat(selectedColor),
             },
             '&:focus': {
                 outline: 'none',
@@ -21517,47 +21797,48 @@ const useStyles$2 = makeStyles()(({ palette }, { lvl }) => {
     };
 });
 
-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;
+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;
         if (isSelected) {
-            link?.scrollIntoViewIfNeeded();
+            link === null || link === void 0 ? void 0 : link.scrollIntoViewIfNeeded();
             //setTimeout(() => link?.scrollIntoViewIfNeeded(), 2000);
         }
         else if (link === document.activeElement) {
-            link?.blur();
+            link === null || link === void 0 ? void 0 : link.blur();
         }
     }, [isSelected, linkRef, setSelectedValue]);
-    const tabIndex = isSelected ? 0 : -1;
-    useEffect(() => {
+    var tabIndex = isSelected ? 0 : -1;
+    useEffect(function () {
         if (awaitingRender) {
             doSelect();
             setAwaitingRender(false);
         }
     }, [percentageRendered]);
-    const doSelect = (checkAwaitRender = false) => {
+    var doSelect = function (checkAwaitRender) {
+        if (checkAwaitRender === void 0) { checkAwaitRender = false; }
         window.history.replaceState({}, txt, url);
         setSelected(el, true);
-        const values = Object.values(elements);
-        const newPercentage = values.findIndex((e) => e === el) / values.length + 0.1;
+        var values = Object.values(elements);
+        var newPercentage = values.findIndex(function (e) { return 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 && `${styles.link}--selected`), href: url, tabIndex: tabIndex, onClick: (event) => {
+        React__default.createElement(Link$1, { ref: linkRef, className: clsx(styles.link, isSelected && "".concat(styles.link, "--selected")), href: url, tabIndex: tabIndex, onClick: function (event) {
                 console.debug('node click', node);
                 event.preventDefault();
                 event.stopPropagation();
@@ -21567,7 +21848,7 @@ const GrepTableOfContentNavTreeNode = (props) => {
 };
 GrepTableOfContentNavTreeNode.displayName = 'Grep.ToC.NavTree.Node';
 
-const useStyles$1 = makeStyles()(() => ({
+var useStyles$1 = makeStyles()(function () { return ({
     root: {
         listStyle: 'none',
         padding: 0,
@@ -21575,18 +21856,18 @@ const useStyles$1 = makeStyles()(() => ({
             fontSize: '.9em',
         },
     },
-}));
-
-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 })))));
+}); });
+
+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 })); })));
 };
 NavTree.displayName = 'Grep.ToC.NavTree';
 
-const useStyles = makeStyles()(() => ({
+var useStyles = makeStyles()(function () { return ({
     root: {
         fontSize: 18,
         overflowY: 'scroll',
@@ -21609,47 +21890,54 @@ const useStyles = makeStyles()(() => ({
             padding: '2px 5px',
         },
     },
-}));
+}); });
 
-const getElementLevel = (el) => {
-    const res = el.nodeName.match(/H([1-9])/);
+var getElementLevel = function (el) {
+    var res = el.nodeName.match(/H([1-9])/);
     if (res) {
-        const [_, lvl] = res;
+        var _a = __read(res, 2); _a[0]; var lvl = _a[1];
         return Number(lvl);
     }
     return 0;
 };
 
-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 });
+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 });
         return curr;
     }, []);
 };
 
-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);
+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);
     return nest(items);
 };
 
-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(() => {
+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 () {
             if (!(ref.current instanceof HTMLElement))
                 return;
-            const active = ref.current.querySelector('[tabindex="0"]');
+            var active = ref.current.querySelector('[tabindex="0"]');
             if (active instanceof HTMLElement) {
                 active.focus();
             }
@@ -21658,54 +21946,55 @@ const GrepTableOfContentNav = (props) => {
             }
         });
     }, [ref]);
-    const onKeyDown = (e) => {
+    var onKeyDown = function (e) {
         if (selected && e.which === Key_enum.Key.Tab && e.shiftKey === false) {
-            const tabindex = selected.getAttribute('tabindex');
+            var tabindex_1 = selected.getAttribute('tabindex');
             selected.setAttribute('tabindex', '0');
             selected.focus();
-            requestAnimationFrame(() => {
-                tabindex === null
+            requestAnimationFrame(function () {
+                tabindex_1 === null
                     ? selected.removeAttribute('tabindex')
-                    : selected.setAttribute('tabindex', tabindex);
+                    : selected.setAttribute('tabindex', tabindex_1);
             });
         }
         if ([Key_enum.Key.UpArrow, Key_enum.Key.DownArrow].includes(e.which)) {
             e.preventDefault();
             e.stopPropagation();
-            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];
+            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];
             next && setSelected(next, true);
             focusSelected();
         }
     };
-    useEffect(() => {
-        const onKeyDown = (e) => {
+    useEffect(function () {
+        var onKeyDown = function (e) {
             e.keyCode === Key_enum.Key.Alt && setShowKeyboardHint(true);
             if (e.altKey) {
                 e.keyCode === Key_enum.Key.I && focusSelected();
             }
         };
-        const onKeyUp = (e) => {
+        var onKeyUp = function (e) {
             e.keyCode === Key_enum.Key.Alt && setShowKeyboardHint(false);
         };
         window.addEventListener('keydown', onKeyDown);
         window.addEventListener('keyup', onKeyUp);
-        return () => {
+        return function () {
             window.removeEventListener('keydown', onKeyDown);
             window.removeEventListener('keyup', onKeyUp);
         };
     }, [focusSelected]);
-    const { classes: style } = useStyles();
-    const className = clsx('grep-toc__nav', style.root, classes?.nav, props.className, showKeyboardHint && style.keyboardHint);
+    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);
     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';
 
-const GrepTableOfContent = ({ style, className, setSelectedValue, percentageRendered, ...props }) => {
-    return (React__default.createElement(GrepTableOfContentProvider, { ...props },
+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),
         React__default.createElement(GrepTableOfContentNav, { className: className, style: style, setSelectedValue: setSelectedValue, percentageRendered: percentageRendered })));
 };
 GrepTableOfContent.displayName = 'Grep.ToC';