@entur-partner/common 10.0.0 → 10.0.2-alpha.0

package/dist/common.esm.js

@@ -0,0 +1,1172 @@
+import React, { Children, Component, useState, useEffect, useRef } from 'react';
+import { localeDate, localeDateTime, isDate, isDateString, splitUrlPath, isString, isFunction, assertIsDefined, hasAllPermissions, hasOneOfPermissions } from '@entur-partner/util';
+import cx from 'classnames';
+import { BreadcrumbItem, BreadcrumbNavigation, Pagination } from '@entur/menu';
+import { useSearchParams, Link as Link$1, useInRouterContext, useBlocker, useNavigate } from 'react-router-dom';
+import { ButtonGroup, SecondaryButton, PrimaryButton, Button } from '@entur/button';
+import { Modal } from '@entur/modal';
+import { Paragraph, Link as Link$2, Heading6 } from '@entur/typography';
+import { BannerAlertBox } from '@entur/alert';
+import { ExpandablePanel } from '@entur/expand';
+import { SegmentedControl, SegmentedChoice } from '@entur/form';
+import { SearchableDropdown } from '@entur/dropdown';
+import { CookieIcon, UserIcon, DownArrowIcon, NorwayIcon, UKIcon, LogOutIcon, ChannelsIcon } from '@entur/icons';
+
+var ActionBarLeft = function ActionBarLeft(_ref) {
+  var children = _ref.children;
+  return React.createElement("div", {
+    className: "eps-action-bar-left"
+  }, children);
+};
+var ActionBarRight = function ActionBarRight(_ref2) {
+  var children = _ref2.children;
+  return React.createElement("div", {
+    className: "eps-action-bar-right"
+  }, children);
+};
+var ActionBar = function ActionBar(_ref3) {
+  var children = _ref3.children;
+  return React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "eps-action-bar-padding"
+  }), React.createElement("div", {
+    className: "eps-action-bar"
+  }, children));
+};
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
+
+var _excluded$e = ["date", "locale", "as", "hideTime"];
+var FormatDateTime = function FormatDateTime(_ref) {
+  var date = _ref.date,
+    locale = _ref.locale,
+    _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? "main" : _ref$as,
+    hideTime = _ref.hideTime,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+  return React.createElement(Component, _extends({}, rest), hideTime ? localeDate(date, locale) : localeDateTime(date, locale));
+};
+
+var _excluded$d = ["as", "children", "contrast", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingX", "paddingY", "padding", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "margin", "display", "justifyContent", "alignItems", "maxWidth", "width", "background", "color", "flexDirection", "flexWrap", "className"];
+function responsiveProp(prefix, prop) {
+  if (Array.isArray(prop)) {
+    var classes = [];
+    prop[0] && classes.push(prefix + prop[0]);
+    prop[1] && classes.push("" + prefix + prop[1] + "-lg");
+    prop[2] && classes.push("" + prefix + prop[2] + "-xl");
+    return classes;
+  }
+  return [prefix + prop];
+}
+var Box = function Box(_ref) {
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? "div" : _ref$as,
+    children = _ref.children,
+    contrast = _ref.contrast,
+    paddingTop = _ref.paddingTop,
+    paddingRight = _ref.paddingRight,
+    paddingBottom = _ref.paddingBottom,
+    paddingLeft = _ref.paddingLeft,
+    paddingX = _ref.paddingX,
+    paddingY = _ref.paddingY,
+    padding = _ref.padding,
+    marginTop = _ref.marginTop,
+    marginRight = _ref.marginRight,
+    marginBottom = _ref.marginBottom,
+    marginLeft = _ref.marginLeft,
+    marginX = _ref.marginX,
+    marginY = _ref.marginY,
+    margin = _ref.margin,
+    display = _ref.display,
+    justifyContent = _ref.justifyContent,
+    alignItems = _ref.alignItems,
+    maxWidth = _ref.maxWidth,
+    width = _ref.width,
+    background = _ref.background,
+    color = _ref.color,
+    flexDirection = _ref.flexDirection,
+    flexWrap = _ref.flexWrap,
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  var classes = [];
+  var resolvedPaddingTop = paddingTop || paddingY || padding;
+  var resolvedPaddingBottom = paddingBottom || paddingY || padding;
+  var resolvedPaddingLeft = paddingLeft || paddingX || padding;
+  var resolvedPaddingRight = paddingRight || paddingX || padding;
+  var resolvedMarginTop = marginTop || marginY || margin;
+  var resolvedMarginBottom = marginBottom || marginY || margin;
+  var resolvedMarginLeft = marginLeft || marginX || margin;
+  var resolvedMarginRight = marginRight || marginX || margin;
+  contrast && classes.push("eds-contrast");
+  resolvedPaddingTop && classes.push.apply(classes, responsiveProp("eps-pt-", resolvedPaddingTop));
+  resolvedPaddingBottom && classes.push.apply(classes, responsiveProp("eps-pb-", resolvedPaddingBottom));
+  resolvedPaddingLeft && classes.push.apply(classes, responsiveProp("eps-pl-", resolvedPaddingLeft));
+  resolvedPaddingRight && classes.push.apply(classes, responsiveProp("eps-pr-", resolvedPaddingRight));
+  resolvedMarginTop && classes.push.apply(classes, responsiveProp("eps-mt-", resolvedMarginTop));
+  resolvedMarginBottom && classes.push.apply(classes, responsiveProp("eps-mb-", resolvedMarginBottom));
+  resolvedMarginLeft && classes.push.apply(classes, responsiveProp("eps-ml-", resolvedMarginLeft));
+  resolvedMarginRight && classes.push.apply(classes, responsiveProp("eps-mr-", resolvedMarginRight));
+  display && classes.push.apply(classes, responsiveProp("eps-", display));
+  justifyContent && classes.push.apply(classes, responsiveProp("eps-justify-", justifyContent));
+  if (alignItems) {
+    classes.push.apply(classes, responsiveProp("eps-items-", alignItems));
+  }
+  maxWidth && classes.push.apply(classes, responsiveProp("eps-max-w-", maxWidth));
+  width && classes.push.apply(classes, responsiveProp("eps-w-", width));
+  color && classes.push("eps-color-" + color);
+  background && classes.push("eps-bg-" + background);
+  flexDirection && classes.push.apply(classes, responsiveProp("eps-flex-", flexDirection));
+  flexWrap && classes.push.apply(classes, responsiveProp("eps-flex-wrap-", flexWrap));
+  var classList = cx(classes, className);
+  return React.createElement(Component, _extends({
+    className: classList
+  }, rest), children);
+};
+
+/** biome-ignore-all lint/suspicious/noArrayIndexKey: Ignore for now. Should be tested properly before doing changes */
+var Stack = function Stack(_ref) {
+  var children = _ref.children,
+    space = _ref.space,
+    className = _ref.className;
+  var stackItems = Children.toArray(children);
+  if (stackItems.length <= 1) {
+    return React.createElement(React.Fragment, null, stackItems);
+  }
+  return React.createElement("div", {
+    className: className
+  }, stackItems.map(function (child, index) {
+    return index === stackItems.length - 1 ? React.createElement("div", {
+      key: index
+    }, child) : React.createElement(Box, {
+      paddingBottom: space,
+      key: index
+    }, child);
+  }));
+};
+
+var _excluded$c = ["items", "locale", "className"];
+var AuditInfo = function AuditInfo(_ref) {
+  var items = _ref.items,
+    locale = _ref.locale,
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+  var classNames = cx("ep-audit-info", className);
+  return React.createElement("div", _extends({
+    className: classNames
+  }, rest), items.map(function (_ref2) {
+    var label = _ref2.label,
+      value = _ref2.value;
+    return React.createElement(Stack, {
+      space: "small",
+      key: value.toString()
+    }, React.createElement("div", {
+      className: "ep-audit-info-label"
+    }, label), React.createElement("div", null, isDate(value) || isDateString(value) ? React.createElement(FormatDateTime, {
+      date: value,
+      locale: locale
+    }) : React.createElement("span", null, value)));
+  }));
+};
+
+var ProjectContext = /*#__PURE__*/React.createContext(undefined);
+var useProject = function useProject() {
+  var context = React.useContext(ProjectContext);
+  if (!context) {
+    throw new Error("Must be used within a ProjectProvider");
+  }
+  return {
+    defaultProjectId: context.defaultProjectId,
+    projectName: context.projectName
+  };
+};
+/**
+ * A Provider to sync project id across micro-frontends. Used by useNavigateParams to ensure project id is always present in the url.
+ */
+var ProjectProvider = function ProjectProvider(_ref) {
+  var defaultProjectId = _ref.defaultProjectId,
+    projectName = _ref.projectName,
+    children = _ref.children;
+  return React.createElement(ProjectContext.Provider, {
+    value: {
+      defaultProjectId: defaultProjectId,
+      projectName: projectName
+    }
+  }, children);
+};
+
+var Breadcrumbs = function Breadcrumbs(_ref) {
+  var prependBreadcrumbItem = _ref.prependBreadcrumbItem,
+    pathname = _ref.pathname,
+    onBreadcrumbLookup = _ref.onBreadcrumbLookup;
+  var _useProject = useProject(),
+    projectName = _useProject.projectName,
+    defaultProjectId = _useProject.defaultProjectId;
+  var _useSearchParams = useSearchParams(),
+    searchParams = _useSearchParams[0];
+  var projectValue = searchParams.get(projectName);
+  var paths = splitUrlPath(pathname);
+  var breadcrumbs = paths.map(function (path) {
+    return {
+      title: onBreadcrumbLookup(path),
+      path: path
+    };
+  }).filter(function (_ref2) {
+    var title = _ref2.title;
+    return title !== undefined;
+  });
+  var breadcrumbElements = breadcrumbs.map(function (_ref3, i) {
+    var title = _ref3.title,
+      path = _ref3.path;
+    var isLast = i === breadcrumbs.length - 1;
+    if (isLast) {
+      return React.createElement(BreadcrumbItem, {
+        key: path,
+        as: "span"
+      }, title);
+    }
+    if (!projectValue) {
+      searchParams.set(projectName, defaultProjectId);
+    }
+    return React.createElement(BreadcrumbItem, {
+      key: path,
+      as: Link$1,
+      to: path + "?" + searchParams.toString()
+    }, title);
+  });
+  if (prependBreadcrumbItem) {
+    return React.createElement(BreadcrumbNavigation, null, [prependBreadcrumbItem].concat(breadcrumbElements));
+  }
+  return React.createElement(BreadcrumbNavigation, null, breadcrumbElements);
+};
+
+var _excluded$b = ["isOpen", "children", "message", "size", "buttons", "onConfirm", "messages", "onClose", "onDismiss"];
+var ConfirmModal = function ConfirmModal(_ref) {
+  var _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    children = _ref.children,
+    message = _ref.message,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    buttons = _ref.buttons,
+    onConfirm = _ref.onConfirm,
+    messages = _ref.messages,
+    onClose = _ref.onClose,
+    onDismiss = _ref.onDismiss,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+  var childrenToRender = children ? children : message;
+  var handleDismiss = onClose ? onClose : onDismiss;
+  return React.createElement(Modal, _extends({
+    size: size,
+    open: isOpen,
+    onDismiss: handleDismiss
+  }, rest), isString(childrenToRender) ? React.createElement(Paragraph, null, childrenToRender) : React.createElement(Box, {
+    paddingBottom: "medium"
+  }, childrenToRender), React.createElement(ButtonGroup, null, onConfirm ? React.createElement(React.Fragment, null, React.createElement(SecondaryButton, {
+    onClick: handleDismiss,
+    "data-testid": "cancel-modal-button"
+  }, messages.cancel), React.createElement(PrimaryButton, {
+    onClick: onConfirm,
+    "data-testid": "confirm-modal-button"
+  }, messages.confirm)) : buttons));
+};
+
+var Content = function Content(_ref) {
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? "main" : _ref$as,
+    className = _ref.className,
+    children = _ref.children;
+  var classList = cx(["eps-content", className]);
+  return React.createElement(Component, {
+    className: classList
+  }, children);
+};
+
+var _environmentColors, _humanReadableEnviron;
+var Environment;
+(function (Environment) {
+  Environment["Local"] = "local";
+  Environment["Development"] = "dev";
+  Environment["Staging"] = "staging";
+  Environment["Production"] = "prod";
+})(Environment || (Environment = {}));
+var environmentColors = (_environmentColors = {}, _environmentColors[Environment.Local] = "#B482FB", _environmentColors[Environment.Development] = "#5AC39A", _environmentColors[Environment.Staging] = "#FFCA28", _environmentColors);
+/**
+ * Gets the color for the given environment. This is the color used for the environment
+ * indicator. There is no color for production as it should not have any special environment
+ * indication.
+ */
+var getColorForEnvironment = function getColorForEnvironment(environment) {
+  return environmentColors[environment];
+};
+var humanReadableEnvironment = (_humanReadableEnviron = {}, _humanReadableEnviron[Environment.Local] = "Local", _humanReadableEnviron[Environment.Development] = "Dev", _humanReadableEnviron[Environment.Staging] = "Staging", _humanReadableEnviron[Environment.Production] = "Prod", _humanReadableEnviron);
+var getHumanReadableEnvironment = function getHumanReadableEnvironment(environment) {
+  return humanReadableEnvironment[environment];
+};
+
+var _excluded$a = ["title", "accentColor"];
+var EnturPartnerLogoSvg = function EnturPartnerLogoSvg(_ref) {
+  var title = _ref.title,
+    _ref$accentColor = _ref.accentColor,
+    accentColor = _ref$accentColor === void 0 ? "#FF5959" : _ref$accentColor,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+  return React.createElement("svg", _extends({
+    width: 257,
+    height: 37,
+    viewBox: "0 0 257 37"
+  }, rest), React.createElement("title", null, title), React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, React.createElement("path", {
+    fill: "#FFF",
+    d: "M0 .231V25.72h18.745v-4.318H4.869v-6.163h12.31v-4.318H4.87V4.55h13.876V.231z"
+  }), React.createElement("path", {
+    fill: accentColor,
+    d: "M0 36.408h45.253v-4.32H0z"
+  }), React.createElement("path", {
+    fill: "#FFF",
+    d: "M40.384.231v15.425L23.656.231h-.521V25.72h4.869V10.573L44.732 25.72h.521V.23zM69.25 15.238h-7.267v21.17h-4.87v-21.17H49.81V10.92h19.44zM83.863 36.86c-1.646 0-3.142-.255-4.486-.765-1.345-.51-2.493-1.23-3.443-2.159-.95-.928-1.687-2.054-2.208-3.378-.522-1.323-.783-2.797-.783-4.422V10.92h4.869v15.216c0 1.277.209 2.333.626 3.169.417.836.933 1.497 1.548 1.985a5.346 5.346 0 001.982 1.01c.707.186 1.339.278 1.895.278.557 0 1.188-.092 1.896-.279a5.35 5.35 0 001.982-1.01c.614-.487 1.13-1.148 1.548-1.984.417-.836.625-1.892.625-3.169V10.92h4.87v15.216c0 1.625-.256 3.1-.766 4.422-.51 1.324-1.24 2.45-2.19 3.378-.952.929-2.1 1.648-3.444 2.159-1.344.51-2.851.766-4.52.766M104.21 24.047h5.546c1.016 0 1.854-.127 2.513-.383.658-.255 1.179-.592 1.56-1.01.381-.418.641-.888.78-1.41.138-.522.208-1.05.208-1.584 0-.627-.099-1.207-.295-1.741a3.718 3.718 0 00-.901-1.393c-.405-.394-.924-.708-1.56-.94-.636-.232-1.404-.348-2.305-.348h-5.546v8.81zm0 4.248v8.113h-4.87V10.92h11.567c1.3 0 2.49.215 3.57.644 1.08.43 2.004 1.033 2.77 1.81a8.287 8.287 0 011.794 2.787c.43 1.079.645 2.257.645 3.534 0 .952-.128 1.874-.383 2.768-.256.894-.61 1.7-1.063 2.42a7.32 7.32 0 01-1.672 1.863 5.929 5.929 0 01-2.178 1.096l6.339 8.566h-5.808l-5.893-8.113h-4.818z"
+  }), React.createElement("g", {
+    fill: accentColor
+  }, React.createElement("path", {
+    d: "M141.051 23.448h5.628c4.185 0 5.989-1.984 5.989-4.942 0-2.742-1.515-4.618-5.989-4.618h-5.628v9.56zm0 3.067v9.776h-3.571V10.75h9.632c6.674 0 9.127 3.211 9.127 7.54 0 4.979-3.102 8.226-9.2 8.226h-5.988zM169.695 28.715c-1.371-.288-2.958-.505-4.401-.505-2.85 0-4.041 1.263-4.041 3.139s1.407 2.706 3.463 2.706c2.49 0 4.979-1.443 4.979-4.221v-1.119zm-4.293-2.958c1.551 0 3.174.253 4.293.469v-.83c0-2.525-1.154-3.896-4.33-3.896-2.164 0-3.824.866-4.942 2.092l-2.02-2.272c1.732-1.66 3.644-2.598 7.07-2.598 5.052 0 7.469 1.876 7.469 7.215v10.354h-3.211V34.02h-.108c-1.082 1.767-3.211 2.705-5.592 2.705-3.32 0-6.241-1.66-6.241-5.303 0-3.103 1.912-5.664 7.612-5.664zM178.965 19.191h3.211v2.886h.108c.938-1.984 2.922-3.355 5.231-3.355.47 0 .938.036 1.335.144l-.144 3.14a6.77 6.77 0 00-1.552-.181c-3.246 0-4.798 2.633-4.798 5.483v8.983h-3.39v-17.1zM199.961 36.291h-1.912c-4.004 0-5.988-.938-5.988-5.772v-8.55h-2.778V19.19h2.778v-4.654h3.355v4.654h4.473v2.778h-4.473v7.973c0 3.427 1.587 3.535 3.319 3.535h1.226v2.814zM219.767 36.291h-3.391V26.84c0-2.778-1.083-5.375-4.257-5.375-3.14 0-5.268 2.597-5.268 6.169v8.658h-3.391v-17.1h3.32v2.814h.143c.794-1.623 3.067-3.283 5.99-3.283 4.941 0 6.854 3.644 6.854 8.081v9.488zM227.847 26.262h10.57c0-2.597-2.272-4.726-5.087-4.726-2.922 0-5.014 1.948-5.483 4.726zm-.036 2.453c.397 3.355 2.633 5.195 5.844 5.195 2.778 0 4.618-1.623 5.484-2.67l2.164 1.804c-1.37 1.913-4.365 3.716-8.045 3.716-4.942 0-8.73-3.535-8.73-8.55 0-5.195 3.752-9.488 8.983-9.488 5.303 0 8.009 4.365 8.009 8.19 0 .649-.036 1.226-.072 1.803H227.81zM246.245 19.191h3.21v2.886h.109c.938-1.984 2.922-3.355 5.231-3.355.469 0 .938.036 1.335.144l-.145 3.14a6.77 6.77 0 00-1.551-.181c-3.247 0-4.798 2.633-4.798 5.483v8.983h-3.391v-17.1z"
+  }))));
+};
+var EnturPartnerLogo = function EnturPartnerLogo(_ref2) {
+  var _ref2$as = _ref2.as,
+    Component = _ref2$as === void 0 ? "nav" : _ref2$as,
+    className = _ref2.className,
+    altText = _ref2.altText,
+    environment = _ref2.environment;
+  var classList = cx(["eps-logo-wrapper", className]);
+  return React.createElement(Component, {
+    className: classList
+  }, React.createElement(EnturPartnerLogoSvg, {
+    title: altText,
+    className: "logo",
+    accentColor: environment !== undefined && environment !== Environment.Production ? getColorForEnvironment(environment) : undefined
+  }));
+};
+
+var newAppVersionErrorMessage = "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.";
+var ErrorBoundary = /*#__PURE__*/function (_Component) {
+  function ErrorBoundary(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.state = {
+      error: null
+    };
+    return _this;
+  }
+  _inheritsLoose(ErrorBoundary, _Component);
+  ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError(error) {
+    return {
+      error: error
+    };
+  };
+  var _proto = ErrorBoundary.prototype;
+  _proto.componentDidCatch = function componentDidCatch(error, errorInfo) {
+    var _this$props$handleErr, _this$props;
+    // React always logs in development
+    (_this$props$handleErr = (_this$props = this.props).handleError) == null || _this$props$handleErr.call(_this$props, error, errorInfo);
+  };
+  _proto.render = function render() {
+    var _this2 = this;
+    var error = this.state.error;
+    var _this$props2 = this.props,
+      fallback = _this$props2.fallback,
+      children = _this$props2.children;
+    if (error) {
+      if (isFunction(fallback)) {
+        return fallback({
+          retry: function retry() {
+            return _this2.setState({
+              error: null
+            });
+          },
+          error: error
+        });
+      } else if (error.name === "NotFoundError" && error.message === newAppVersionErrorMessage) {
+        return React.createElement(RefreshBannerInfo, null);
+      }
+      return fallback;
+    }
+    return children;
+  };
+  return ErrorBoundary;
+}(Component);
+var LANGUAGE_STORAGE_KEY = "EP::locale";
+function RefreshBannerInfo() {
+  // Taken from ./app-shell/src/storage.ts
+  var language = localStorage.getItem(LANGUAGE_STORAGE_KEY);
+  var isNorwegian = language === "nb" || language === "nb-NO";
+  return React.createElement(Box, {
+    maxWidth: "large"
+  }, React.createElement(BannerAlertBox, {
+    variant: "info",
+    title: isNorwegian ? "En ny versjon av nettsiden er tilgjengelig." : "A new version of the website is available."
+  }, React.createElement(Box, {
+    paddingBottom: "medium"
+  }, React.createElement(Paragraph, {
+    margin: "none"
+  }, isNorwegian ? "Vennligst oppdater." : "Please refresh.")), React.createElement(PrimaryButton, {
+    onClick: function onClick() {
+      return window.location.reload();
+    }
+  }, isNorwegian ? "Oppdater" : "Refresh")));
+}
+
+var _excluded$9 = ["title", "inputComponent", "languages", "values", "onChange", "name", "variant", "feedback"];
+var ExpandableMultiLanguageInput = function ExpandableMultiLanguageInput(_ref) {
+  var title = _ref.title,
+    InputComponent = _ref.inputComponent,
+    languages = _ref.languages,
+    values = _ref.values,
+    onChange = _ref.onChange,
+    name = _ref.name,
+    variant = _ref.variant,
+    feedback = _ref.feedback,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+  var handleOnChange = function handleOnChange(language, value) {
+    var changes = _extends({}, values);
+    if (value === "" || !value) {
+      delete changes[language];
+    } else {
+      changes[language] = value;
+    }
+    onChange(changes);
+  };
+  return React.createElement(ExpandablePanel, {
+    title: title,
+    defaultOpen: true,
+    contentStyle: {
+      padding: "4px 4px 4px 4px",
+      marginTop: "16px",
+      marginBottom: "16px"
+    }
+  }, React.createElement(Stack, {
+    space: "medium"
+  }, languages.map(function (_ref2) {
+    var langKey = _ref2.value,
+      label = _ref2.label,
+      required = _ref2.required;
+    return React.createElement(InputComponent, _extends({
+      "data-testid": "multi-lang-input-" + name + "-" + langKey,
+      key: title + langKey,
+      label: required ? label + "*" : label,
+      variant: variant == null ? void 0 : variant(langKey),
+      feedback: feedback == null ? void 0 : feedback(langKey),
+      name: name,
+      onChange: function onChange(e) {
+        handleOnChange(langKey, e.target.value);
+      },
+      value: values[langKey] || ""
+    }, rest));
+  })));
+};
+
+/// <reference types="vite/client" />
+/**
+ * Returns true if the provided flag exist in localStorage
+ * or is set as an environment variable.
+ *
+ * @param flag case sensitive flag. If it is an environment variable
+ * you can drop the VITE_APP_ prefix.
+ */
+function featureFlag(flag) {
+  var _window$localStorage, _window$localStorage2;
+  return import.meta.env["VITE_APP_" + flag] === "true" || ((_window$localStorage = window.localStorage) == null ? void 0 : _window$localStorage.getItem(flag)) === "true" || ((_window$localStorage2 = window.localStorage) == null ? void 0 : _window$localStorage2.getItem("VITE_APP_" + flag)) === "true";
+}
+/**
+ * Returns true if the provided flag exist in localStorage
+ * or is set as an environment variable.
+ *
+ * @param flag case sensitive flag. If it is an environment variable
+ * you can drop the VITE_APP_ prefix.
+ */
+function useFeatureToggle(flag) {
+  return featureFlag(flag);
+}
+var FeatureToggle = function FeatureToggle(_ref) {
+  var children = _ref.children,
+    flag = _ref.flag;
+  var feature = useFeatureToggle(flag);
+  if (feature) {
+    return React.createElement(React.Fragment, null, children);
+  }
+  return null;
+};
+
+var _excluded$8 = ["amount", "as"];
+var FormatCurrencyAmount = function FormatCurrencyAmount(_ref) {
+  var amount = _ref.amount,
+    _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? "span" : _ref$as,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+  var parsedAmount = Number(amount) || 0;
+  var formattedAmount = new Intl.NumberFormat("nb-NO", {
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 2
+  }).format(parsedAmount);
+  return React.createElement(Component, _extends({}, rest), formattedAmount);
+};
+
+var _excluded$7 = ["language", "options", "className", "onChange"];
+var LanguageSelect = function LanguageSelect(_ref) {
+  var language = _ref.language,
+    options = _ref.options,
+    className = _ref.className,
+    _onChange = _ref.onChange,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+  var classNames = cx("eps-language-select", className);
+  return React.createElement("div", _extends({}, rest, {
+    className: classNames
+  }), React.createElement(SegmentedControl, {
+    onChange: function onChange(language) {
+      assertIsDefined(language);
+      _onChange(language);
+    },
+    selectedValue: language
+  }, options.map(function (option) {
+    return React.createElement(SegmentedChoice, {
+      key: option.value,
+      value: option.value
+    }, option.label, option.required && React.createElement("span", {
+      className: "asterisk-margin"
+    }, "*"));
+  })));
+};
+
+var Link = function Link(props) {
+  return React.createElement(Link$2, _extends({}, props, {
+    as: Link$1
+  }), props.children);
+};
+
+var _excluded$6 = ["children", "className"];
+var LinkButton = function LinkButton(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  return React.createElement(Link$2, _extends({}, rest, {
+    as: "button",
+    className: cx("eps-link-button", className)
+  }), children);
+};
+
+var Menu = function Menu(_ref) {
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? "nav" : _ref$as,
+    className = _ref.className,
+    children = _ref.children;
+  var classList = cx(["eds-contrast", "eps-menu", className]);
+  return React.createElement(Component, {
+    className: classList
+  }, children);
+};
+
+var _excluded$5 = ["className", "inputComponent", "alertLabel", "alertLevel", "name", "languages", "values", "onChange", "defaultLanguage", "label", "onBlur"];
+/**
+ * @deprecated use ExpandableMultiLanguageInput
+ */
+var MultiLanguageInput = function MultiLanguageInput(_ref) {
+  var className = _ref.className,
+    InputComponent = _ref.inputComponent,
+    alertLabel = _ref.alertLabel,
+    alertLevel = _ref.alertLevel,
+    name = _ref.name,
+    languages = _ref.languages,
+    values = _ref.values,
+    onChange = _ref.onChange,
+    _ref$defaultLanguage = _ref.defaultLanguage,
+    defaultLanguage = _ref$defaultLanguage === void 0 ? "nob" : _ref$defaultLanguage,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+  var _useState = useState(defaultLanguage),
+    language = _useState[0],
+    setLanguage = _useState[1];
+  var classNames = cx("multi-language-input", className);
+  var currentValue = values[language];
+  var handleOnBlur = function handleOnBlur(e) {
+    e.persist();
+    var currentTarget = e.currentTarget;
+    setTimeout(function () {
+      if (currentTarget && !currentTarget.contains(document.activeElement)) {
+        onBlur(e);
+      }
+    }, 0);
+  };
+  var handleLanguageChange = function handleLanguageChange(language) {
+    setLanguage(language);
+  };
+  var handleOnChange = function handleOnChange(value) {
+    var changes = Object.assign({}, values);
+    if (value === "" || !value) {
+      delete changes[language];
+    } else {
+      changes[language] = value;
+    }
+    onChange(changes);
+  };
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: Legacy component
+    React.createElement("div", {
+      className: classNames,
+      // biome-ignore lint/a11y/noNoninteractiveTabindex: Legacy component
+      tabIndex: 0,
+      onBlur: handleOnBlur,
+      "data-testid": "multi-lang-input-" + name
+    }, React.createElement(Stack, {
+      space: "extraSmall"
+    }, React.createElement(LanguageSelect, {
+      language: language,
+      options: languages,
+      onChange: function onChange(lang) {
+        return handleLanguageChange(lang);
+      }
+    }), React.createElement(InputComponent, _extends({
+      label: label,
+      variant: alertLevel,
+      feedback: alertLabel,
+      name: name,
+      className: "language-item",
+      onChange: function onChange(e) {
+        return handleOnChange(e.target.value);
+      },
+      value: currentValue || ""
+    }, rest))))
+  );
+};
+
+var _excluded$4 = ["label", "organisations", "onChange", "selectedOrganisationId"];
+var OrganisationDropDown = function OrganisationDropDown(_ref) {
+  var label = _ref.label,
+    organisations = _ref.organisations,
+    handleChange = _ref.onChange,
+    selectedOrganisationId = _ref.selectedOrganisationId,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  var _useState = useState(),
+    selectedOrganisation = _useState[0],
+    setSelectedOrganisation = _useState[1];
+  useEffect(function () {
+    setSelectedOrganisation(organisations.find(function (org) {
+      return org.organisationId === selectedOrganisationId;
+    }));
+  }, [selectedOrganisationId, organisations]);
+  return React.createElement(SearchableDropdown, _extends({
+    label: label,
+    items: [].concat(organisations.sort(function (a, b) {
+      return a.tradingName.localeCompare(b.tradingName, "nb");
+    }).map(function (organisation) {
+      return {
+        value: organisation.organisationId,
+        label: organisation.tradingName
+      };
+    })),
+    selectedItem: selectedOrganisation ? {
+      value: selectedOrganisation.organisationId,
+      label: selectedOrganisation.tradingName
+    } : null,
+    onChange: function onChange(selectedValue) {
+      if (selectedValue) {
+        handleChange(selectedValue.value);
+      }
+    },
+    clearable: false
+  }, rest));
+};
+
+var Pager = function Pager(_ref) {
+  var collectionSize = _ref.collectionSize,
+    pageSize = _ref.pageSize,
+    _onPageChange = _ref.onPageChange,
+    currentPage = _ref.currentPage;
+  var pageCount = Math.ceil(collectionSize / pageSize);
+  return React.createElement(Pagination, {
+    pageCount: pageCount,
+    currentPage: currentPage,
+    onPageChange: function onPageChange(page) {
+      _onPageChange(page);
+    }
+  });
+};
+
+var useDocumentTitle = function useDocumentTitle(_ref) {
+  var title = _ref.title,
+    suffix = _ref.suffix;
+  useEffect(function () {
+    if (suffix) {
+      document.title = "" + title + suffix;
+    } else {
+      document.title = title;
+    }
+  }, [title, suffix]);
+};
+var PageTitle = function PageTitle(_ref2) {
+  var pathname = _ref2.pathname,
+    onBreadcrumbLookup = _ref2.onBreadcrumbLookup,
+    _ref2$appTitle = _ref2.appTitle,
+    appTitle = _ref2$appTitle === void 0 ? "Entur Partner" : _ref2$appTitle;
+  var paths = splitUrlPath(pathname);
+  var pageTitles = paths.map(function (path) {
+    return {
+      title: onBreadcrumbLookup(path),
+      path: path
+    };
+  }).filter(function (_ref3) {
+    var title = _ref3.title;
+    return title !== undefined;
+  }).map(function (_ref4) {
+    var title = _ref4.title;
+    return title;
+  }).reverse().join(" | ");
+  var title = pageTitles ? pageTitles + " | " + appTitle : appTitle;
+  useDocumentTitle({
+    title: title
+  });
+  return null;
+};
+
+/**
+ * Note: This component uses BusinessCapability, not because we only want to
+ * check BusinessCapabilities but because it represents a minimal subset of
+ * what we need to check.
+ */
+var PermissionCheck = function PermissionCheck(_ref) {
+  var children = _ref.children,
+    _ref$fallback = _ref.fallback,
+    fallback = _ref$fallback === void 0 ? null : _ref$fallback,
+    permissions = _ref.permissions,
+    _ref$oneOf = _ref.oneOf,
+    oneOf = _ref$oneOf === void 0 ? [] : _ref$oneOf,
+    _ref$all = _ref.all,
+    all = _ref$all === void 0 ? [] : _ref$all;
+  var allIsAllowed = hasAllPermissions(all, permissions);
+  var oneOfIsAllowed = hasOneOfPermissions(oneOf, permissions);
+  var allowed = allIsAllowed && oneOfIsAllowed;
+  return React.createElement(React.Fragment, null, allowed ? children : fallback);
+};
+
+var _excluded$3 = ["children", "shouldBlockNavigation"];
+var RouteLeavingGuard = function RouteLeavingGuard(_ref) {
+  var children = _ref.children,
+    shouldBlockNavigation = _ref.shouldBlockNavigation,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  assertIsDefined(useInRouterContext() ? true : undefined, "RouteLeavingGuard must be used within a data router.");
+  var blocker = useBlocker(function (_ref2) {
+    var currentLocation = _ref2.currentLocation,
+      nextLocation = _ref2.nextLocation;
+    return currentLocation.pathname !== nextLocation.pathname && shouldBlockNavigation(nextLocation);
+  });
+  return React.createElement(ConfirmModal, _extends({
+    onDismiss: function onDismiss() {
+      if (blocker.state === "blocked") {
+        blocker.reset();
+      }
+    },
+    open: blocker.state === "blocked",
+    onConfirm: function onConfirm() {
+      if (blocker.state === "blocked") {
+        blocker.proceed();
+      }
+    }
+  }, rest), children);
+};
+
+var StatusLabel = function StatusLabel(_ref) {
+  var _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    aggressiveInactive = _ref.aggressiveInactive,
+    showBullet = _ref.showBullet,
+    center = _ref.center;
+  var bulletClassNames = cx("eps-status-label__bullet", {
+    active: active,
+    aggressive: aggressiveInactive
+  });
+  var statusLabelClassNames = cx("eps-status-label", {
+    center: center
+  });
+  return React.createElement("div", {
+    className: statusLabelClassNames
+  }, showBullet && React.createElement("div", {
+    className: bulletClassNames
+  }), React.createElement("div", null, label));
+};
+
+var _excluded$2 = ["as", "children", "fontSize", "color", "lineHeight", "fontWeight", "className"];
+var Text = function Text(_ref) {
+  var _ref$as = _ref.as,
+    component = _ref$as === void 0 ? "span" : _ref$as,
+    children = _ref.children,
+    fontSize = _ref.fontSize,
+    color = _ref.color,
+    lineHeight = _ref.lineHeight,
+    fontWeight = _ref.fontWeight,
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var classes = [];
+  fontSize && classes.push.apply(classes, responsiveProp("eps-font-size-", fontSize));
+  lineHeight && classes.push.apply(classes, responsiveProp("eps-line-height-", lineHeight));
+  fontWeight && classes.push("eps-font-weight-" + fontWeight);
+  var classList = cx(classes, className);
+  return React.createElement(Box, _extends({
+    as: component,
+    color: color,
+    className: classList
+  }, rest), children);
+};
+
+var _excluded$1 = ["children", "className"];
+var Unbutton = function Unbutton(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  return React.createElement(Button, _extends({
+    variant: "primary"
+  }, rest, {
+    className: cx("eps-unbutton", className)
+  }), children);
+};
+
+var CustomOverflowMenuItem = function CustomOverflowMenuItem(props) {
+  return React.createElement("button", _extends({
+    className: cx(props.className, "eps-overflow-menu__item"),
+    role: "menuitem"
+  }, props));
+};
+
+var CookieSettingsMenuItem = function CookieSettingsMenuItem(_ref) {
+  var name = _ref.name,
+    setOpen = _ref.setOpen,
+    onCookieSettingsOpen = _ref.onCookieSettingsOpen;
+  return React.createElement(CustomOverflowMenuItem, {
+    onClick: function onClick() {
+      onCookieSettingsOpen();
+      setOpen(false);
+    },
+    className: "eps-overflow-menu__item"
+  }, React.createElement("span", {
+    "aria-hidden": true
+  }, React.createElement(CookieIcon, {
+    size: "1rem",
+    inline: true
+  })), name);
+};
+
+function useOutsideClick(ref, buttonRef, handler) {
+  React.useEffect(function () {
+    var listener = function listener(event) {
+      if (elementContainsEventTarget(ref.current, event) || elementContainsEventTarget(buttonRef.current, event)) {
+        return;
+      }
+      handler();
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return function () {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, buttonRef, handler]);
+}
+function elementContainsEventTarget(element, event) {
+  if (!element) {
+    return false;
+  }
+  if (element.contains(event.target)) {
+    return true;
+  }
+  // For elements inside a Shadow DOM we need to check the composedPath
+  if (event.composed && event.composedPath) {
+    var contains = event.composedPath().find(function (target) {
+      if (target === window) {
+        return false;
+      }
+      return element.contains(target);
+    });
+    return !!contains;
+  }
+  return false;
+}
+
+var _excluded = ["className", "children", "userName", "open", "onOpenChange", "environment"];
+var CustomOverflowMenu = function CustomOverflowMenu(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    userName = _ref.userName,
+    open = _ref.open,
+    onOpenChange = _ref.onOpenChange,
+    environment = _ref.environment,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var overflowItemsClasses = cx("eps-overflow-menu__group", {
+    "eps-overflow-menu__group--open": open
+  });
+  var overflowContentRef = React.useRef(null);
+  var overflowMenuTriggerRef = React.useRef(null);
+  useOutsideClick(overflowContentRef, overflowMenuTriggerRef, function () {
+    return onOpenChange(false);
+  });
+  return React.createElement("div", null, React.createElement(SecondaryButton, _extends({
+    className: cx("eps-overflow-menu__button", className),
+    onClick: function onClick() {
+      return onOpenChange(!open);
+    },
+    "aria-haspopup": true,
+    "aria-expanded": open,
+    ref: overflowMenuTriggerRef
+  }, rest), React.createElement("div", {
+    className: "eps-overflow-menu__button-contents"
+  }, React.createElement("span", {
+    className: "eds-overflow-menu__user-icon"
+  }, React.createElement(UserIcon, {
+    inline: true
+  })), React.createElement(Heading6, {
+    margin: "none",
+    as: "span"
+  }, userName, environment !== undefined && environment !== Environment.Production && React.createElement("span", {
+    style: {
+      color: getColorForEnvironment(environment)
+    }
+  }, " ", "(", getHumanReadableEnvironment(environment), ")")), React.createElement("span", {
+    className: "eps-arrow-icon"
+  }, React.createElement(DownArrowIcon, {
+    inline: true
+  })))), open && React.createElement("div", {
+    className: overflowItemsClasses,
+    role: "menu",
+    ref: overflowContentRef
+  }, children));
+};
+
+var LanguageSwitchMenuItem = function LanguageSwitchMenuItem(_ref) {
+  var language = _ref.language,
+    onLanguageChange = _ref.onLanguageChange,
+    setOpen = _ref.setOpen,
+    name = _ref.name;
+  var useB47LanguageKey = useFeatureToggle("USE_BCP-47_LANGUAGE_KEY");
+  var norwegianLanguageKey = useB47LanguageKey ? "nb-NO" : "nb";
+  var englishLanguageKey = useB47LanguageKey ? "en-GB" : "en";
+  return React.createElement(React.Fragment, null, language === englishLanguageKey ? React.createElement(CustomOverflowMenuItem, {
+    onClick: function onClick() {
+      onLanguageChange(norwegianLanguageKey);
+      setOpen(false);
+    },
+    className: "eps-overflow-menu__item"
+  }, React.createElement("span", {
+    "aria-hidden": true,
+    className: "eps-overflow-menu__icon-margin"
+  }, React.createElement(NorwayIcon, {
+    size: "1rem",
+    inline: true
+  })), name) : React.createElement(CustomOverflowMenuItem, {
+    onClick: function onClick() {
+      onLanguageChange(englishLanguageKey);
+      setOpen(false);
+    },
+    className: "eps-overflow-menu__item"
+  }, React.createElement("span", {
+    "aria-hidden": true,
+    className: "eps-overflow-menu__icon-margin"
+  }, React.createElement(UKIcon, {
+    size: "1rem",
+    inline: true
+  })), name));
+};
+
+var LogOutMenuItem = function LogOutMenuItem(_ref) {
+  var name = _ref.name,
+    setOpen = _ref.setOpen,
+    onLogout = _ref.onLogout;
+  return React.createElement(CustomOverflowMenuItem, {
+    onClick: function onClick() {
+      onLogout();
+      setOpen(false);
+    },
+    "data-testid": "user-menu-logout",
+    className: "eps-overflow-menu__item"
+  }, React.createElement("span", {
+    "aria-hidden": true
+  }, React.createElement(LogOutIcon, {
+    size: "1rem",
+    inline: true
+  })), name);
+};
+
+var UserMenuItem = function UserMenuItem(_ref) {
+  var name = _ref.name,
+    setOpen = _ref.setOpen,
+    onNavigateToMyProfile = _ref.onNavigateToMyProfile;
+  return React.createElement(Link$1, {
+    to: "/permission-admin/my-profile",
+    style: {
+      textDecoration: "none"
+    }
+  }, React.createElement(CustomOverflowMenuItem, {
+    onClick: function onClick() {
+      setOpen(false);
+      onNavigateToMyProfile();
+    },
+    className: "eps-overflow-menu__item"
+  }, React.createElement("span", {
+    "aria-hidden": true
+  }, React.createElement(UserIcon, {
+    size: "1rem",
+    inline: true
+  })), name));
+};
+
+var VersionMenuItem = function VersionMenuItem(_ref) {
+  var title = _ref.title,
+    setOpen = _ref.setOpen;
+  var navigate = useNavigate(); // Hide useNavigate from standalone micro-frontends because it is not under RouterProvider
+  return React.createElement(CustomOverflowMenuItem, {
+    onClick: function onClick() {
+      navigate("/app-version");
+      setOpen(false);
+    },
+    className: "eps-overflow-menu__item"
+  }, React.createElement("span", {
+    "aria-hidden": true
+  }, React.createElement(ChannelsIcon, {
+    className: "eps-version-icon",
+    size: "1rem",
+    inline: true
+  })), title);
+};
+
+/** biome-ignore-all lint/correctness/useUniqueElementIds: Ignore unique id for now */
+var UserMenu = function UserMenu(_ref) {
+  var className = _ref.className,
+    messages = _ref.messages,
+    onLogout = _ref.onLogout,
+    onLanguageChange = _ref.onLanguageChange,
+    userName = _ref.userName,
+    language = _ref.language,
+    environment = _ref.environment,
+    showVersionItem = _ref.showVersionItem,
+    showMyProfileItem = _ref.showMyProfileItem,
+    showCookieSettingsItem = _ref.showCookieSettingsItem,
+    onNavigateToMyProfile = _ref.onNavigateToMyProfile,
+    _ref$onCookieSettings = _ref.onCookieSettingsOpen,
+    onCookieSettingsOpen = _ref$onCookieSettings === void 0 ? function () {} : _ref$onCookieSettings;
+  var triggerClassList = cx(["eps-user-menu__trigger-button", className]);
+  var _useState = useState(false),
+    open = _useState[0],
+    setOpen = _useState[1];
+  return React.createElement("div", {
+    id: "eps-user-menu"
+  }, React.createElement(CustomOverflowMenu, {
+    open: open,
+    onOpenChange: setOpen,
+    className: triggerClassList,
+    userName: userName,
+    environment: environment
+  }, React.createElement("div", {
+    id: "eps-overflow-menu"
+  }, React.createElement(LanguageSwitchMenuItem, {
+    name: messages.switchLanguage,
+    language: language,
+    onLanguageChange: onLanguageChange,
+    setOpen: setOpen
+  }), showVersionItem && messages.appVersion && React.createElement(VersionMenuItem, {
+    title: messages.appVersion,
+    setOpen: setOpen
+  }), showMyProfileItem && messages.myProfile && React.createElement(UserMenuItem, {
+    name: messages.myProfile,
+    setOpen: setOpen,
+    onNavigateToMyProfile: onNavigateToMyProfile
+  }), showCookieSettingsItem && messages.cookieSettings && React.createElement(CookieSettingsMenuItem, {
+    name: messages.cookieSettings,
+    setOpen: setOpen,
+    onCookieSettingsOpen: onCookieSettingsOpen
+  }), React.createElement(LogOutMenuItem, {
+    name: messages.logout,
+    setOpen: setOpen,
+    onLogout: onLogout
+  }))));
+};
+
+/*global EventListener WindowEventHandlers*/
+function useEventListener(eventName, handler, element) {
+  if (element === void 0) {
+    element = window;
+  }
+  var savedHandler = useRef();
+  useEffect(function () {
+    savedHandler.current = handler;
+  }, [handler]);
+  useEffect(function () {
+    var _element;
+    var isSupported = (_element = element) == null ? void 0 : _element.addEventListener;
+    if (!isSupported) return;
+    var eventListener = function eventListener(event) {
+      return savedHandler.current == null ? void 0 : savedHandler.current(event);
+    };
+    element.addEventListener(eventName, eventListener);
+    return function () {
+      element.removeEventListener(eventName, eventListener);
+    };
+  }, [eventName, element]);
+}
+
+/**
+ * A custom hook that wraps the useNavigate hook from react-router-dom for MicroFrontend State
+ *
+ * @param to can be a string path, a To object, or a number (delta)
+ * @param options contains options for modifying the navigation
+ * @returns a function that navigates to the specified path with organisationId in the search params
+ */
+function useNavigateParams() {
+  var _useProject = useProject(),
+    projectName = _useProject.projectName,
+    defaultProjectId = _useProject.defaultProjectId;
+  var navigate = useNavigate();
+  var _useSearchParams = useSearchParams(),
+    searchParams = _useSearchParams[0];
+  var projectValue = searchParams.get(projectName);
+  var navigateParam = function navigateParam(to, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    if (projectValue == null) {
+      searchParams.set(projectName, defaultProjectId);
+    }
+    if (typeof to === "number") {
+      navigate(to + "?" + searchParams.toString(), options);
+    } else {
+      navigate(to + "?" + searchParams.toString(), options);
+    }
+  };
+  return navigateParam;
+}
+
+export { ActionBar, ActionBarLeft, ActionBarRight, AuditInfo, Box, Breadcrumbs, ConfirmModal, Content, EnturPartnerLogo, EnturPartnerLogoSvg, Environment, ErrorBoundary, ExpandableMultiLanguageInput, FeatureToggle, FormatCurrencyAmount, FormatDateTime, LanguageSelect, Link, LinkButton, Menu, MultiLanguageInput, OrganisationDropDown, PageTitle, Pager, PermissionCheck, ProjectProvider, RouteLeavingGuard, Stack, StatusLabel, Text, Unbutton, UserMenu, featureFlag, getColorForEnvironment, getHumanReadableEnvironment, responsiveProp, useDocumentTitle, useEventListener, useFeatureToggle, useNavigateParams, useProject };
+//# sourceMappingURL=common.esm.js.map