@equinor/echo-components 0.8.0-beta-5 → 0.8.0-beta-7

package/{index.esm.js → index.cjs.js}

@@ -1,19 +1,49 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Icon as Icon$1, Button, DotProgress, Banner, CircularProgress, Typography, TextField, Dialog, Search, Tooltip as Tooltip$1, Menu, Autocomplete, Radio, Slider } from '@equinor/eds-core-react';
-import * as React from 'react';
-import React__default, { forwardRef, useState, useEffect, useRef, useCallback, useMemo, createContext, useContext, isValidElement, cloneElement } from 'react';
-import Chart from 'chart.js/auto';
-import { throttle } from 'lodash';
-import classnames$1 from 'classnames';
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
-import * as edsIcons from '@equinor/eds-icons';
-import { arrow_back, arrow_forward, time } from '@equinor/eds-icons';
-import { useOnOutsideClick, generateRandomId, useFocus, useInitial } from '@equinor/echo-utils';
-import { VariableSizeList } from 'react-window';
-import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus as useFocus$1, useDismiss, useRole, useInteractions, useMergeRefs, FloatingPortal } from '@floating-ui/react';
-import * as zustand from 'zustand';
-import { ReactSortable } from 'react-sortablejs';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var edsCoreReact = require('@equinor/eds-core-react');
+var React = require('react');
+var Chart = require('chart.js/auto');
+var lodash = require('lodash');
+var classnames$1 = require('classnames');
+var DatePicker = require('react-datepicker');
+require('react-datepicker/dist/react-datepicker.css');
+var edsIcons = require('@equinor/eds-icons');
+var echoUtils = require('@equinor/echo-utils');
+var reactWindow = require('react-window');
+var react = require('@floating-ui/react');
+var zustand = require('zustand');
+var reactSortablejs = require('react-sortablejs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Chart__default = /*#__PURE__*/_interopDefaultLegacy(Chart);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames$1);
+var DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(DatePicker);
+var edsIcons__namespace = /*#__PURE__*/_interopNamespace(edsIcons);
+var zustand__namespace = /*#__PURE__*/_interopNamespace(zustand);
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -64,7 +94,7 @@ const Icon = ({
   size
 }) => {
   // EdsIcon.add(icons);
-  return jsx(Icon$1, {
+  return jsxRuntime.jsx(edsCoreReact.Icon, {
     name: name,
     title: title,
     color: color,
@@ -270,22 +300,22 @@ var process$1 = global$f.process;
 var Deno = global$f.Deno;
 var versions = process$1 && process$1.versions || Deno && Deno.version;
 var v8 = versions && versions.v8;
-var match, version;
+var match$2, version;
 
 if (v8) {
-  match = v8.split('.');
+  match$2 = v8.split('.');
   // in old Chrome, versions of V8 isn't V8 = Chrome / 10
   // but their correct versions are not interesting for us
-  version = match[0] > 0 && match[0] < 4 ? 1 : +(match[0] + match[1]);
+  version = match$2[0] > 0 && match$2[0] < 4 ? 1 : +(match$2[0] + match$2[1]);
 }
 
 // BrowserFS NodeJS `process` polyfill incorrectly set `.v8` to `0.0`
 // so check `userAgent` even if `.v8` exists, but 0
 if (!version && userAgent) {
-  match = userAgent.match(/Edge\/(\d+)/);
-  if (!match || match[1] >= 74) {
-    match = userAgent.match(/Chrome\/(\d+)/);
-    if (match) version = +match[1];
+  match$2 = userAgent.match(/Edge\/(\d+)/);
+  if (!match$2 || match$2[1] >= 74) {
+    match$2 = userAgent.match(/Chrome\/(\d+)/);
+    if (match$2) version = +match$2[1];
   }
 }
 
@@ -1521,7 +1551,7 @@ var SvgCableIcon = function SvgCableIcon(_ref, ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties$b(_ref, _excluded$b);
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -1529,20 +1559,20 @@ var SvgCableIcon = function SvgCableIcon(_ref, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
     id: titleId
-  }, title) : null, _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+  }, title) : null, _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M21.8 2.3C21.7 2.1 21.4 2 21.1 2.1C20.4 2.5 19.9 3.2 19.4 3.8V1.6C19.5 1.2 19.2 1 19 1C18.7 1 18.5 1.2 18.5 1.5V3.8C18 3.2 17.4 2.5 16.6 2.1C16.4 2 16.1 2.1 15.9 2.3C15.8 2.5 15.9 2.8 16.1 3C16.7 3.3 16.8 3.3 17.1 3.8H16.9V6.8H20.9V3.7H20.5C20.9 3.2 21 3.2 21.5 2.9C21.9 2.8 22 2.5 21.8 2.3Z",
     fill: "white"
-  })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M2.09999 21.3C2.19999 21.5 2.49999 21.6 2.79999 21.5C3.49999 21.1 3.99999 20.4 4.49999 19.8V22C4.49999 22.3 4.69999 22.5 4.99999 22.5C5.29999 22.5 5.49999 22.3 5.49999 22V19.7C5.99999 20.3 6.59999 21 7.39999 21.4C7.59999 21.5 7.89999 21.4 8.09999 21.2C8.19999 21 8.09999 20.7 7.89999 20.5C7.29999 20.2 7.19999 20.2 6.89999 19.7H7.09999V16.7H3.09999V19.8H3.49999C3.09999 20.3 2.99999 20.3 2.49999 20.6C1.99999 20.7 1.89999 21 2.09999 21.3Z",
     fill: "white"
-  })), _path3$2 || (_path3$2 = /*#__PURE__*/React.createElement("path", {
+  })), _path3$2 || (_path3$2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M16.9 18.8H13.9C12.2 18.8 10.9 17.5 10.9 15.8V7.79999C10.9 7.29999 10.5 6.79999 9.89999 6.79999H6.89999C6.39999 6.79999 5.89999 7.19999 5.89999 7.79999V15.8H3.89999V7.79999C3.89999 6.09999 5.19999 4.79999 6.89999 4.79999H9.89999C11.6 4.79999 12.9 6.09999 12.9 7.79999V15.8C12.9 16.3 13.3 16.8 13.9 16.8H16.9C17.4 16.8 17.9 16.4 17.9 15.8V7.79999H19.9V15.8C19.9 17.4 18.6 18.8 16.9 18.8Z",
     fill: "white"
   })));
 };
-var ForwardRef$b = /*#__PURE__*/forwardRef(SvgCableIcon);
+var ForwardRef$b = /*#__PURE__*/React.forwardRef(SvgCableIcon);
 
 var _path$6, _path2$2, _path3$1, _path4$1;
 var _excluded$a = ["title", "titleId"];
@@ -1553,7 +1583,7 @@ var SvgCircuitIcon = function SvgCircuitIcon(_ref, ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties$a(_ref, _excluded$a);
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -1561,23 +1591,23 @@ var SvgCircuitIcon = function SvgCircuitIcon(_ref, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
     id: titleId
-  }, title) : null, _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+  }, title) : null, _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12 7C11.4 7 11 6.7 11 6.25V1.75C11 1.3 11.4 1 12 1C12.6 1 13 1.3 13 1.75V6.25C13 6.7 12.5 7 12 7Z",
     fill: "white"
-  })), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M11.9 23C11.3 23 10.9 22.6 10.9 22V17C10.9 16.4 11.3 16 11.9 16C12.5 16 12.9 16.4 12.9 17V22C12.9 22.5 12.5 23 11.9 23Z",
     fill: "white"
-  })), _path3$1 || (_path3$1 = /*#__PURE__*/React.createElement("path", {
+  })), _path3$1 || (_path3$1 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M11.8 17.8C9.50001 17.8 7.60001 15.9 7.60001 13.6C7.60001 11.3 9.50001 9.39999 11.8 9.39999C14.1 9.39999 16 11.3 16 13.6C16 15.9 14.1 17.8 11.8 17.8ZM11.8 11.4C10.6 11.4 9.60001 12.4 9.60001 13.6C9.60001 14.8 10.6 15.8 11.8 15.8C13 15.8 14 14.8 14 13.6C14 12.4 13 11.4 11.8 11.4Z",
     fill: "white"
-  })), _path4$1 || (_path4$1 = /*#__PURE__*/React.createElement("path", {
+  })), _path4$1 || (_path4$1 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M9.6 11.6C9.3 11.6 9.1 11.5 8.9 11.3L4.3 6.7C3.9 6.3 3.9 5.7 4.3 5.3C4.7 4.9 5.3 4.9 5.7 5.3L10.3 9.9C10.7 10.3 10.7 10.9 10.3 11.3C10.1 11.5 9.8 11.6 9.6 11.6Z",
     fill: "white"
   })));
 };
-var ForwardRef$a = /*#__PURE__*/forwardRef(SvgCircuitIcon);
+var ForwardRef$a = /*#__PURE__*/React.forwardRef(SvgCircuitIcon);
 
 var _path$5;
 var _excluded$9 = ["title", "titleId"];
@@ -1588,7 +1618,7 @@ var SvgElectricalIcon = function SvgElectricalIcon(_ref, ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties$9(_ref, _excluded$9);
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -1596,16 +1626,16 @@ var SvgElectricalIcon = function SvgElectricalIcon(_ref, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
     id: titleId
-  }, title) : null, _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+  }, title) : null, _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M12 2L1 21H23L12 2ZM12 5.99L19.53 19H4.47L12 5.99ZM10.6029 14.8265L9.24576 18.3842L13.5879 14.4833L12.3422 14.0081L13.6993 10.4504L9.35713 14.3513L10.6029 14.8265Z",
     fill: "white"
   })));
 };
-var ForwardRef$9 = /*#__PURE__*/forwardRef(SvgElectricalIcon);
+var ForwardRef$9 = /*#__PURE__*/React.forwardRef(SvgElectricalIcon);
 
 var _g$3, _defs$3;
 var _excluded$8 = ["title", "titleId"];
@@ -1616,7 +1646,7 @@ var SvgFunctionIcon = function SvgFunctionIcon(_ref, ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties$8(_ref, _excluded$8);
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -1624,23 +1654,23 @@ var SvgFunctionIcon = function SvgFunctionIcon(_ref, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
     id: titleId
-  }, title) : null, _g$3 || (_g$3 = /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  }, title) : null, _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
     d: "M4.3 6.6C4.3 3.6 5.9 2 9 2C9.8 2 10.6 2.1 11.3 2.3V4.6C10.6 4.4 10.1 4.4 9.6 4.4C8 4.4 7.3 5.3 7.3 7V8.3H10.6V10.5H7.3V22H4.3V10.5H2V8.3H4.3V6.6Z",
     fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M17.2 17.5L18.7 20.4H16.4L15.7 19L15 20.4H13L14.5 17.8L13.1 15.1H15.4L15.9 16.3L16.5 15.1H18.4L17.2 17.5Z",
     fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12 22.8C8.1 18 10.3 13.2 12 11.3L13.5 12.6L12.8 12L13.5 12.7C13.3 12.9 9.8 16.9 13.5 21.6L12 22.8Z",
     fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M19.8 22.9L18.3 21.6C18.5 21.4 22 17.4 18.3 12.7L19.9 11.4C23.7 16.2 21.5 21 19.8 22.9Z",
     fill: "white"
-  }))), _defs$3 || (_defs$3 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$3 || (_defs$3 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
     id: "clip0"
-  }, /*#__PURE__*/React.createElement("rect", {
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
     x: 2,
     y: 2,
     width: 20,
@@ -1648,7 +1678,7 @@ var SvgFunctionIcon = function SvgFunctionIcon(_ref, ref) {
     fill: "white"
   })))));
 };
-var ForwardRef$8 = /*#__PURE__*/forwardRef(SvgFunctionIcon);
+var ForwardRef$8 = /*#__PURE__*/React.forwardRef(SvgFunctionIcon);
 
 var _g$2, _defs$2;
 var _excluded$7 = ["title", "titleId"];
@@ -1659,7 +1689,7 @@ var SvgInstrumentIcon = function SvgInstrumentIcon(_ref, ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties$7(_ref, _excluded$7);
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -1667,25 +1697,25 @@ var SvgInstrumentIcon = function SvgInstrumentIcon(_ref, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
     id: titleId
-  }, title) : null, _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
+  }, title) : null, _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#clip0)"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12 4C15.9 4 19 7.1 19 11C19 14.9 15.9 18 12 18C8.1 18 5 14.9 5 11C5 7.1 8.1 4 12 4ZM12 2C7 2 3 6 3 11C3 16 7 20 12 20C17 20 21 16 21 11C21 6 17 2 12 2Z",
     fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M11.9 15.8C11.7 15.8 11.6 15.8 11.4 15.7C10.9 15.4 10.7 14.8 11 14.3L15 7.2C15.3 6.7 15.9 6.5 16.4 6.8C16.9 7.1 17.1 7.7 16.8 8.2L12.8 15.3C12.5 15.6 12.2 15.8 11.9 15.8Z",
     fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12 22.4C11.4 22.4 11 22 11 21.4V20C11 19.4 11.4 19 12 19C12.6 19 13 19.4 13 20V21.4C13 22 12.6 22.4 12 22.4Z",
     fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M7.39999 17.8C8.69999 16.7 10.3 16 12.1 16C13.6 16 15.1 16.5 16.2 17.4L17.7 16C16.2 14.8 14.2 14 12.1 14C9.69999 14 7.59999 14.9 5.89999 16.4L7.39999 17.8Z",
     fill: "white"
-  }))), _defs$2 || (_defs$2 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$2 || (_defs$2 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
     id: "clip0"
-  }, /*#__PURE__*/React.createElement("rect", {
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
     x: 3,
     y: 2,
     width: 18,
@@ -1693,7 +1723,7 @@ var SvgInstrumentIcon = function SvgInstrumentIcon(_ref, ref) {
     fill: "white"
   })))));
 };
-var ForwardRef$7 = /*#__PURE__*/forwardRef(SvgInstrumentIcon);
+var ForwardRef$7 = /*#__PURE__*/React.forwardRef(SvgInstrumentIcon);
 
 var _path$4;
 var _excluded$6 = ["title", "titleId"];
@@ -1704,7 +1734,7 @@ var SvgJunctionBoxIcon = function SvgJunctionBoxIcon(_ref, ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties$6(_ref, _excluded$6);
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -1712,16 +1742,16 @@ var SvgJunctionBoxIcon = function SvgJunctionBoxIcon(_ref, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
     id: titleId
-  }, title) : null, _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+  }, title) : null, _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M3.02304 3.69542C3.16973 2.73541 3.99898 2 5 2H19C19.9665 2 20.7729 2.68556 20.9594 3.59693C20.986 3.72713 21 3.86193 21 4V17C21 18.1046 20.1046 19 19 19H17V22H15V19H13V22H11V19H9V22H7V19H5C3.98052 19 3.13919 18.2372 3.01563 17.2512C3.00845 17.194 3.0037 17.136 3.00147 17.0773C3.00049 17.0517 3 17.0259 3 17V4V4C3 3.89644 3.00787 3.79473 3.02304 3.69542ZM5 4L5 17H7H9H11H13H15H17L19 17V4H5Z",
     fill: "white"
   })));
 };
-var ForwardRef$6 = /*#__PURE__*/forwardRef(SvgJunctionBoxIcon);
+var ForwardRef$6 = /*#__PURE__*/React.forwardRef(SvgJunctionBoxIcon);
 
 var _path$3, _path2$1, _path3, _path4, _path5, _path6, _path7, _path8, _path9;
 var _excluded$5 = ["title", "titleId"];
@@ -1732,7 +1762,7 @@ var SvgLineIcon = function SvgLineIcon(_ref, ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties$5(_ref, _excluded$5);
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -1740,40 +1770,40 @@ var SvgLineIcon = function SvgLineIcon(_ref, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
     id: titleId
-  }, title) : null, _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+  }, title) : null, _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M17 10H7V14H17V10ZM5 8V16H19V8H5Z",
     fill: "white"
-  })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M1 8C1 6.89543 1.89543 6 3 6H5C6.10457 6 7 6.89543 7 8V8H1V8Z",
     fill: "white"
-  })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
+  })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M7 16C7 17.1046 6.10457 18 5 18L3 18C1.89543 18 1 17.1046 1 16V16L7 16V16Z",
     fill: "white"
-  })), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
+  })), _path4 || (_path4 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M5 6C6.10457 6 7 6.89543 7 8L7 16C7 17.1046 6.10457 18 5 18V18L5 6V6Z",
     fill: "white"
-  })), _path5 || (_path5 = /*#__PURE__*/React.createElement("path", {
+  })), _path5 || (_path5 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M3 18C1.89543 18 1 17.1046 1 16L1 8C1 6.89543 1.89543 6 3 6V6L3 18V18Z",
     fill: "white"
-  })), _path6 || (_path6 = /*#__PURE__*/React.createElement("path", {
+  })), _path6 || (_path6 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M17 8C17 6.89543 17.8954 6 19 6H21C22.1046 6 23 6.89543 23 8V8H17V8Z",
     fill: "white"
-  })), _path7 || (_path7 = /*#__PURE__*/React.createElement("path", {
+  })), _path7 || (_path7 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M23 16C23 17.1046 22.1046 18 21 18L19 18C17.8954 18 17 17.1046 17 16V16L23 16V16Z",
     fill: "white"
-  })), _path8 || (_path8 = /*#__PURE__*/React.createElement("path", {
+  })), _path8 || (_path8 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M21 6C22.1046 6 23 6.89543 23 8L23 16C23 17.1046 22.1046 18 21 18V18L21 6V6Z",
     fill: "white"
-  })), _path9 || (_path9 = /*#__PURE__*/React.createElement("path", {
+  })), _path9 || (_path9 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M19 18C17.8954 18 17 17.1046 17 16L17 8C17 6.89543 17.8954 6 19 6V6L19 18V18Z",
     fill: "white"
   })));
 };
-var ForwardRef$5 = /*#__PURE__*/forwardRef(SvgLineIcon);
+var ForwardRef$5 = /*#__PURE__*/React.forwardRef(SvgLineIcon);
 
 var _path$2, _path2;
 var _excluded$4 = ["title", "titleId"];
@@ -1784,7 +1814,7 @@ var SvgMainEquipmentIcon = function SvgMainEquipmentIcon(_ref, ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties$4(_ref, _excluded$4);
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -1792,19 +1822,19 @@ var SvgMainEquipmentIcon = function SvgMainEquipmentIcon(_ref, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
     id: titleId
-  }, title) : null, _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+  }, title) : null, _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M21.4 11.6L12.4 2.6C12.1 2.2 11.6 2 11 2H4C2.9 2 2 2.9 2 4V11C2 11.6 2.2 12.1 2.6 12.4L11.6 21.4C11.9 21.8 12.4 22 13 22C13.6 22 14.1 21.8 14.4 21.4L21.4 14.4C21.8 14 22 13.5 22 13C22 12.5 21.8 11.9 21.4 11.6ZM13 20L4 11V4H11L20 13L13 20ZM5 6.5C5 5.7 5.7 5 6.5 5C7.3 5 8 5.7 8 6.5C8 7.3 7.3 8 6.5 8C5.7 8 5 7.3 5 6.5Z",
     fill: "white"
-  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M18.2 12.3L16.8 13.7L15.3 12.2L13.6 10.3L14.4 13.3L13.5 14.2L10.5 13.5L12.3 15.1L13.8 16.6L12.4 18L6.7 12.3L8.2 10.8L12 12L10.9 8.10001L12.4 6.60001L18.2 12.3Z",
     fill: "white"
   })));
 };
-var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgMainEquipmentIcon);
+var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgMainEquipmentIcon);
 
 var _g$1, _defs$1;
 var _excluded$3 = ["title", "titleId"];
@@ -1815,7 +1845,7 @@ var SvgManualValveIcon = function SvgManualValveIcon(_ref, ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties$3(_ref, _excluded$3);
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -1823,21 +1853,21 @@ var SvgManualValveIcon = function SvgManualValveIcon(_ref, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
     id: titleId
-  }, title) : null, _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  }, title) : null, _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
     d: "M4 8.30001L9.8 13.1L4 17.8V8.30001ZM2 4.10001V22.1L13 13.1L2 4.10001Z",
     fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M20 8.3V17.9L14.1 13L20 8.3ZM22 4L11 13L22 22V4Z",
     fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13 3.70001H11V13.5H13V3.70001Z",
     fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M15 4H9C8.5 4 8 3.6 8 3C8 2.4 8.4 2 9 2H15C15.6 2 16 2.4 16 3C16 3.6 15.5 4 15 4Z",
     fill: "white"
-  }))), _defs$1 || (_defs$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", null, /*#__PURE__*/React.createElement("rect", {
+  }))), _defs$1 || (_defs$1 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", null, /*#__PURE__*/React__namespace.createElement("rect", {
     x: 2,
     y: 2,
     width: 20,
@@ -1845,7 +1875,7 @@ var SvgManualValveIcon = function SvgManualValveIcon(_ref, ref) {
     fill: "white"
   })))));
 };
-var ForwardRef$3 = /*#__PURE__*/forwardRef(SvgManualValveIcon);
+var ForwardRef$3 = /*#__PURE__*/React.forwardRef(SvgManualValveIcon);
 
 var _path$1;
 var _excluded$2 = ["title", "titleId"];
@@ -1856,7 +1886,7 @@ var SvgSignalIcon = function SvgSignalIcon(_ref, ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties$2(_ref, _excluded$2);
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -1864,14 +1894,14 @@ var SvgSignalIcon = function SvgSignalIcon(_ref, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
     id: titleId
-  }, title) : null, _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+  }, title) : null, _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M14.1 20C13.5 20 13 19.6 12.9 19L11.7 10.5L11 14.5C10.9 15 10.5 15.4 9.9 15.5C9.4 15.5 8.9 15.2 8.7 14.7L8.3 13.7L7.9 16H2C1.4 16 1 15.6 1 15C1 14.4 1.4 14 2 14H6.2L6.8 10.4C6.9 9.9 7.3 9.5 7.9 9.4C8.4 9.4 8.9 9.7 9.1 10.2L9.5 11.2L10.6 5C10.7 4.4 11.2 4 11.8 4C12.4 4 12.9 4.4 13 5L14.2 13.4L15 8.7C15.1 8.1 15.5 7.7 16.1 7.7C16.7 7.7 17.2 8 17.3 8.6L18.8 14.1H22C22.6 14.1 23 14.5 23 15.1C23 15.7 22.6 16.1 22 16.1H17.2L16.2 12.7L15.2 19.1C15.1 19.6 14.6 20 14.1 20Z",
     fill: "white"
   })));
 };
-var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgSignalIcon);
+var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgSignalIcon);
 
 var _path;
 var _excluded$1 = ["title", "titleId"];
@@ -1882,7 +1912,7 @@ var SvgTagIcon = function SvgTagIcon(_ref, ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties$1(_ref, _excluded$1);
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -1890,16 +1920,16 @@ var SvgTagIcon = function SvgTagIcon(_ref, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
     id: titleId
-  }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M21.41 11.58L12.41 2.58C12.05 2.22 11.55 2 11 2H4C2.9 2 2 2.9 2 4V11C2 11.55 2.22 12.05 2.59 12.42L11.59 21.42C11.95 21.78 12.45 22 13 22C13.55 22 14.05 21.78 14.41 21.41L21.41 14.41C21.78 14.05 22 13.55 22 13C22 12.45 21.77 11.94 21.41 11.58ZM13 20.01L4 11V4H11V3.99L20 12.99L13 20.01ZM5 6.5C5 5.67157 5.67157 5 6.5 5C7.32843 5 8 5.67157 8 6.5C8 7.32843 7.32843 8 6.5 8C5.67157 8 5 7.32843 5 6.5Z",
     fill: "white"
   })));
 };
-var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgTagIcon);
+var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgTagIcon);
 
 var _g, _defs;
 var _excluded = ["title", "titleId"];
@@ -1910,7 +1940,7 @@ var SvgTelecomIcon = function SvgTelecomIcon(_ref, ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -1918,25 +1948,25 @@ var SvgTelecomIcon = function SvgTelecomIcon(_ref, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
     id: titleId
-  }, title) : null, _g || (_g = /*#__PURE__*/React.createElement("g", {
+  }, title) : null, _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#clip0)"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, /*#__PURE__*/React__namespace.createElement("path", {
     d: "M14.6558 12.2385L16.4582 11.6089C15.2089 8.04077 12.4339 7.62099 12.3099 7.60191L12.0334 9.4909C12.1097 9.50044 13.8071 9.81527 14.6558 12.2385Z",
     fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12.844 4.26279L12.3481 6.10407C12.4911 6.14223 15.9337 7.14397 17.9744 11.7519L19.7195 10.9792C17.2974 5.49349 13.0251 4.31049 12.844 4.26279Z",
     fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.1682 1L12.5197 2.79358C12.5769 2.81266 18.4798 4.9974 21.2358 11.7329L23 11.0078C19.9198 3.49957 13.4352 1.0954 13.1682 1Z",
     fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12.7486 15.32C12.8821 14.9766 12.9679 14.6141 12.9679 14.2229C12.9679 12.4866 11.5566 11.0841 9.83051 11.0841C9.42046 11.0841 9.01993 11.1605 8.65756 11.3131L4.40442 7.13443C4.17555 6.90547 3.88946 6.80052 3.59384 6.80052C3.22193 6.80052 2.85002 6.98179 2.62115 7.3157C0.160811 10.9029 0.408752 16.5984 4.0039 20.1188C5.99696 22.0746 8.63849 22.9905 11.1942 22.9905C13.254 22.9905 15.2566 22.399 16.8396 21.2732C17.4309 20.8534 17.5071 19.9948 16.9922 19.4796L12.7486 15.32ZM11.1942 21.0919C8.94364 21.0919 6.86476 20.2619 5.33896 18.7641C2.56393 16.0451 2.38274 11.8855 3.74642 9.15698L7.78023 13.1162L8.63849 13.9653C8.76246 13.412 9.22973 12.9827 9.82098 12.9827C10.498 12.9827 11.0511 13.536 11.0511 14.2134C11.0511 14.7953 10.6411 15.2628 10.0975 15.3964L11.5566 16.8369L14.9705 20.1856C13.8739 20.7676 12.5579 21.0919 11.1942 21.0919Z",
     fill: "white"
-  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
     id: "clip0"
-  }, /*#__PURE__*/React.createElement("rect", {
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
     x: 1,
     y: 1,
     width: 22,
@@ -1944,9 +1974,9 @@ var SvgTelecomIcon = function SvgTelecomIcon(_ref, ref) {
     fill: "white"
   })))));
 };
-var ForwardRef = /*#__PURE__*/forwardRef(SvgTelecomIcon);
+var ForwardRef = /*#__PURE__*/React.forwardRef(SvgTelecomIcon);
 
-var TagCategoryType;
+exports.TagCategoryType = void 0;
 (function (TagCategoryType) {
   TagCategoryType["Electrical"] = "electrical";
   TagCategoryType["MainEquipment"] = "main equipment";
@@ -1960,7 +1990,7 @@ var TagCategoryType;
   TagCategoryType["Telecom"] = "telecom";
   TagCategoryType["JunctionBox"] = "junction box";
   TagCategoryType["Administrative"] = "administrative";
-})(TagCategoryType || (TagCategoryType = {}));
+})(exports.TagCategoryType || (exports.TagCategoryType = {}));
 /**
  * Method that returns the relevant Icon for the tagCategoryDescription provided
  * Tag icon is the default JSX.Element Icon returned
@@ -1984,53 +2014,53 @@ const TagCategoryIcon = ({
 }) => {
   const tagCategory = tagCategoryDescription.toLocaleLowerCase().toString();
   switch (tagCategory.includes(tagCategory)) {
-    case isGivenTagCategory(tagCategory, TagCategoryType.Electrical):
-      return jsx(ForwardRef$9, {
+    case isGivenTagCategory(tagCategory, exports.TagCategoryType.Electrical):
+      return jsxRuntime.jsx(ForwardRef$9, {
         "aria-label": 'electrical'
       });
-    case isGivenTagCategory(tagCategory, TagCategoryType.MainEquipment):
-      return jsx(ForwardRef$4, {
+    case isGivenTagCategory(tagCategory, exports.TagCategoryType.MainEquipment):
+      return jsxRuntime.jsx(ForwardRef$4, {
         "aria-label": 'main equipment'
       });
-    case isGivenTagCategory(tagCategory, TagCategoryType.Line):
-      return jsx(ForwardRef$5, {
+    case isGivenTagCategory(tagCategory, exports.TagCategoryType.Line):
+      return jsxRuntime.jsx(ForwardRef$5, {
         "aria-label": 'line'
       });
-    case isGivenTagCategory(tagCategory, TagCategoryType.ManualValve):
-      return jsx(ForwardRef$3, {
+    case isGivenTagCategory(tagCategory, exports.TagCategoryType.ManualValve):
+      return jsxRuntime.jsx(ForwardRef$3, {
         "aria-label": 'manual valve'
       });
-    case isGivenTagCategory(tagCategory, TagCategoryType.CircuitAndStarter):
-      return jsx(ForwardRef$a, {
+    case isGivenTagCategory(tagCategory, exports.TagCategoryType.CircuitAndStarter):
+      return jsxRuntime.jsx(ForwardRef$a, {
         "aria-label": 'circuit/starter'
       });
-    case isGivenTagCategory(tagCategory, TagCategoryType.Instrument):
-      return jsx(ForwardRef$7, {
+    case isGivenTagCategory(tagCategory, exports.TagCategoryType.Instrument):
+      return jsxRuntime.jsx(ForwardRef$7, {
         "aria-label": 'instrument'
       });
-    case isGivenTagCategory(tagCategory, TagCategoryType.Cable):
-      return jsx(ForwardRef$b, {
+    case isGivenTagCategory(tagCategory, exports.TagCategoryType.Cable):
+      return jsxRuntime.jsx(ForwardRef$b, {
         "aria-label": 'cable'
       });
-    case isGivenTagCategory(tagCategory, TagCategoryType.Function):
-      return jsx(ForwardRef$8, {
+    case isGivenTagCategory(tagCategory, exports.TagCategoryType.Function):
+      return jsxRuntime.jsx(ForwardRef$8, {
         "aria-label": 'function'
       });
-    case isGivenTagCategory(tagCategory, TagCategoryType.Signal):
-      return jsx(ForwardRef$2, {
+    case isGivenTagCategory(tagCategory, exports.TagCategoryType.Signal):
+      return jsxRuntime.jsx(ForwardRef$2, {
         "aria-label": 'signal'
       });
-    case isGivenTagCategory(tagCategory, TagCategoryType.Telecom):
-      return jsx(ForwardRef, {
+    case isGivenTagCategory(tagCategory, exports.TagCategoryType.Telecom):
+      return jsxRuntime.jsx(ForwardRef, {
         "aria-label": 'telecom'
       });
-    case isGivenTagCategory(tagCategory, TagCategoryType.JunctionBox):
-      return jsx(ForwardRef$6, {
+    case isGivenTagCategory(tagCategory, exports.TagCategoryType.JunctionBox):
+      return jsxRuntime.jsx(ForwardRef$6, {
         "aria-label": 'junction box'
       });
-    case isGivenTagCategory(tagCategory, TagCategoryType.Administrative):
+    case isGivenTagCategory(tagCategory, exports.TagCategoryType.Administrative):
     default:
-      return jsx(ForwardRef$1, {
+      return jsxRuntime.jsx(ForwardRef$1, {
         "aria-label": 'tag'
       });
   }
@@ -2040,7 +2070,7 @@ function isGivenTagCategory(tagCategoryDescription, tagCategoryType) {
 }
 
 function getIcon(tagCategoryDescription) {
-  return jsx(TagCategoryIcon, {
+  return jsxRuntime.jsx(TagCategoryIcon, {
     tagCategoryDescription: tagCategoryDescription
   });
 }
@@ -2056,17 +2086,17 @@ const BlackLink = ({
   preserveTab
 }) => {
   const linkElement = classnames(className, styles$t.linkElement);
-  return jsxs("a", {
+  return jsxRuntime.jsxs("a", {
     className: linkElement,
     id: linkText,
     href: href,
     tabIndex: 0,
     target: !preserveTab ? '_blank' : undefined,
     rel: "noreferrer",
-    children: [jsx("label", {
+    children: [jsxRuntime.jsx("label", {
       htmlFor: linkText,
       children: linkText
-    }), jsx(Icon, {
+    }), jsxRuntime.jsx(Icon, {
       className: styles$t.linkIcon,
       color: 'var(--echoText)',
       name: "external_link",
@@ -2579,7 +2609,7 @@ const DataInfoButton = ({
   data
 }) => {
   var _a;
-  return jsx(Button, {
+  return jsxRuntime.jsx(edsCoreReact.Button, {
     "aria-label": (_a = data.ariaLabel) !== null && _a !== void 0 ? _a : data.label,
     onClick: data.onTagInfoClicked,
     className: `${data.itemButtonClassName} ${style$a.button} ${data.numberOfItems > 1 ? style$a.buttonWithBadge : ''}`,
@@ -2615,40 +2645,40 @@ const DataInfoPopover = ({
     }
     return dictionary;
   }, {});
-  const [showNoDataIndicator, setShowNoDataIndicator] = useState(false);
-  useEffect(() => {
+  const [showNoDataIndicator, setShowNoDataIndicator] = React.useState(false);
+  React.useEffect(() => {
     const delay = 200;
     const timer = setTimeout(() => setShowNoDataIndicator(true), delay);
     return () => {
       clearTimeout(timer);
     };
   });
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: style$9.wrapper,
-    children: [jsx("div", {
+    children: [jsxRuntime.jsx("div", {
       className: style$9.arrow
-    }), jsxs("div", {
+    }), jsxRuntime.jsxs("div", {
       className: style$9.optionsPopover,
-      children: [isLoading && dataToShow.length === 0 && jsx(DotProgress, {
+      children: [isLoading && dataToShow.length === 0 && jsxRuntime.jsx(edsCoreReact.DotProgress, {
         color: "neutral"
-      }), showNoDataIndicator && !isLoading && dataToShow.length === 0 && jsxs(Banner, {
+      }), showNoDataIndicator && !isLoading && dataToShow.length === 0 && jsxRuntime.jsxs(edsCoreReact.Banner, {
         className: style$9.banner,
-        children: [jsx(Banner.Icon, {
+        children: [jsxRuntime.jsx(edsCoreReact.Banner.Icon, {
           variant: "info",
-          children: jsx(Icon, {
+          children: jsxRuntime.jsx(Icon, {
             name: "info_circle",
             title: "No data to display",
             color: themeConst.asBuilt
           })
-        }), jsx(Banner.Message, {
+        }), jsxRuntime.jsx(edsCoreReact.Banner.Message, {
           className: style$9.infoMessage,
           children: "No information to display"
         })]
       }), Object.keys(getDataGroupings).map(key => {
-        return jsx("div", {
+        return jsxRuntime.jsx("div", {
           className: style$9.groupWrapper,
           children: getDataGroupings[key].map((data, index) => {
-            return jsx(DataInfoButton, {
+            return jsxRuntime.jsx(DataInfoButton, {
               data: data
             }, index);
           })
@@ -2681,33 +2711,33 @@ const ButtonWithPopover = ({
 }) => {
   const renderPopoverButton = () => {
     if (!expanded) {
-      return jsx(Icon, {
+      return jsxRuntime.jsx(Icon, {
         name: "more_horizontal",
         title: "more options",
         color: themeConst.asBuilt
       });
     } else {
-      return jsx(Icon, {
+      return jsxRuntime.jsx(Icon, {
         name: "close",
         title: "close more options",
         color: themeConst.asBuilt
       });
     }
   };
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: style$8.wrapper,
-    children: [expanded && isLoading ? jsx("div", {
+    children: [expanded && isLoading ? jsxRuntime.jsx("div", {
       className: style$8.button,
       onClick: onShowMoreClicked,
-      children: jsx(CircularProgress, {
+      children: jsxRuntime.jsx(edsCoreReact.CircularProgress, {
         className: style$8.spinner
       })
-    }) : jsx(Button, {
+    }) : jsxRuntime.jsx(edsCoreReact.Button, {
       className: style$8.button,
       variant: "ghost_icon",
       onClick: onShowMoreClicked,
       children: renderPopoverButton()
-    }), expanded && jsx(DataInfoPopover, {
+    }), expanded && jsxRuntime.jsx(DataInfoPopover, {
       isLoading: isLoading,
       dataToShow: fetchedData
     })]
@@ -2811,16 +2841,16 @@ function LineChart({
     defaults,
     callbacks
   } = chartConfigs;
-  const canvasRef = useRef(null);
-  const chartInstanceRef = useRef(undefined);
-  const initChartDefaults = useCallback(() => {
+  const canvasRef = React.useRef(null);
+  const chartInstanceRef = React.useRef(undefined);
+  const initChartDefaults = React.useCallback(() => {
     var _a, _b, _c, _d, _e;
-    Chart.defaults.font.size = ((_a = defaults === null || defaults === void 0 ? void 0 : defaults.font) === null || _a === void 0 ? void 0 : _a.size) || 12;
-    Chart.defaults.font.family = ((_b = defaults === null || defaults === void 0 ? void 0 : defaults.font) === null || _b === void 0 ? void 0 : _b.family) || 'Equinor';
-    Chart.defaults.interaction.mode = ((_c = defaults === null || defaults === void 0 ? void 0 : defaults.interaction) === null || _c === void 0 ? void 0 : _c.mode) || 'nearest'; // popup
-    Chart.defaults.elements.point.pointStyle = ((_e = (_d = defaults === null || defaults === void 0 ? void 0 : defaults.elements) === null || _d === void 0 ? void 0 : _d.point) === null || _e === void 0 ? void 0 : _e.pointStyle) || false;
+    Chart__default["default"].defaults.font.size = ((_a = defaults === null || defaults === void 0 ? void 0 : defaults.font) === null || _a === void 0 ? void 0 : _a.size) || 12;
+    Chart__default["default"].defaults.font.family = ((_b = defaults === null || defaults === void 0 ? void 0 : defaults.font) === null || _b === void 0 ? void 0 : _b.family) || 'Equinor';
+    Chart__default["default"].defaults.interaction.mode = ((_c = defaults === null || defaults === void 0 ? void 0 : defaults.interaction) === null || _c === void 0 ? void 0 : _c.mode) || 'nearest'; // popup
+    Chart__default["default"].defaults.elements.point.pointStyle = ((_e = (_d = defaults === null || defaults === void 0 ? void 0 : defaults.elements) === null || _d === void 0 ? void 0 : _d.point) === null || _e === void 0 ? void 0 : _e.pointStyle) || false;
   }, [defaults]);
-  const setupChartConfig = useCallback(() => {
+  const setupChartConfig = React.useCallback(() => {
     initChartDefaults();
     let config;
     if (lineChartConfig) config = lineChartConfig;else if (chartDataSet) {
@@ -2837,13 +2867,13 @@ function LineChart({
     }
     return config;
   }, [callbacks, chartDataSet, chartTitle, initChartDefaults, lineChartConfig, xAxisTitle, yAxisTitle]);
-  useEffect(() => {
+  React.useEffect(() => {
     const canvas = canvasRef.current;
     const chartInstance = chartInstanceRef.current;
     if (!canvas) return;
     if (chartInstance) chartInstance.destroy();
     const chartConfig = setupChartConfig();
-    const lineChart = new Chart(canvas, chartConfig);
+    const lineChart = new Chart__default["default"](canvas, chartConfig);
     onChartInstance === null || onChartInstance === void 0 ? void 0 : onChartInstance(lineChart);
     chartInstanceRef.current = lineChart;
     const cleanup = () => {
@@ -2857,7 +2887,7 @@ function LineChart({
     };
     return cleanup;
   }, [callbacks, chartDataSet, chartTitle, initChartDefaults, lineChartConfig, onChartInstance, setupChartConfig, xAxisTitle, yAxisTitle]);
-  useEffect(function listenToOrientationOnMount() {
+  React.useEffect(function listenToOrientationOnMount() {
     const handleOrientationChange = () => {
       const {
         current: chartInstance
@@ -2866,7 +2896,7 @@ function LineChart({
         setTimeout(() => chartInstance.resize(), 500);
       }
     };
-    const throttledOrientationHandler = throttle(handleOrientationChange, 1000);
+    const throttledOrientationHandler = lodash.throttle(handleOrientationChange, 1000);
     if (screen.orientation && 'addEventListener' in screen.orientation) {
       screen.orientation.addEventListener('change', throttledOrientationHandler);
       return () => {
@@ -2888,7 +2918,7 @@ function LineChart({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return jsx("canvas", {
+  return jsxRuntime.jsx("canvas", {
     id: id,
     ref: canvasRef,
     width: width,
@@ -2980,7 +3010,7 @@ const TagIcon = ({
   icon,
   legendColor
 }) => {
-  return jsx("div", {
+  return jsxRuntime.jsx("div", {
     style: {
       background: legendColor
     },
@@ -2999,7 +3029,7 @@ const TagIcon = ({
 const TagIconShadowWrapper = ({
   children
 }) => {
-  return jsx("div", {
+  return jsxRuntime.jsx("div", {
     className: `${styles$s.shadow}`,
     children: children
   });
@@ -3037,27 +3067,27 @@ const TagContextMenu = ({
   children
 }) => {
   if (expanded) {
-    return jsx("div", {
+    return jsxRuntime.jsx("div", {
       className: styles$r.contextWrapperExpanded,
       onClick: openTagInformation,
-      children: jsxs("div", {
+      children: jsxRuntime.jsxs("div", {
         className: styles$r.tagInfoWrapper,
-        children: [children, jsxs("div", {
+        children: [children, jsxRuntime.jsxs("div", {
           className: styles$r.tagText,
-          children: [jsx(Typography, {
+          children: [jsxRuntime.jsx(edsCoreReact.Typography, {
             variant: "h5",
             className: styles$r.tagHeader,
             children: tagNo
-          }), jsx(Typography, {
+          }), jsxRuntime.jsx(edsCoreReact.Typography, {
             variant: "body_short",
             className: styles$r.tagDescription,
             children: description
           })]
-        }), jsx("div", {
+        }), jsxRuntime.jsx("div", {
           className: styles$r.tagInfoIcon,
-          children: jsx(Button, {
+          children: jsxRuntime.jsx(edsCoreReact.Button, {
             variant: "ghost_icon",
-            children: jsx(Icon, {
+            children: jsxRuntime.jsx(Icon, {
               name: "info_circle",
               title: "tag information",
               color: themeConst.asBuilt
@@ -3067,13 +3097,13 @@ const TagContextMenu = ({
       })
     });
   } else {
-    return jsx("div", {
+    return jsxRuntime.jsx("div", {
       "data-testid": "open-tag-info",
       className: `${styles$r.contextWrapper} ${selected ? selectedClassName ? selectedClassName : styles$r.selected : ''}`,
       onClick: () => {
         setExpanded(true);
       },
-      children: jsx(TagIconShadowWrapper, {
+      children: jsxRuntime.jsx(TagIconShadowWrapper, {
         children: children
       })
     });
@@ -3116,10 +3146,10 @@ const ContextMenu = ({
   openTagInformation,
   children
 }) => {
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     style: positionStyle,
     className: style$7.wrapper,
-    children: [jsx(TagContextMenu, {
+    children: [jsxRuntime.jsx(TagContextMenu, {
       setExpanded: setExpanded,
       openTagInformation: openTagInformation,
       tagNo: tagNo,
@@ -3127,7 +3157,7 @@ const ContextMenu = ({
       expanded: expanded,
       selected: selected,
       selectedClassName: selectedClassName,
-      children: jsx(TagIcon, {
+      children: jsxRuntime.jsx(TagIcon, {
         icon: icon,
         legendColor: legendColor
       })
@@ -3184,9 +3214,9 @@ styleInject(css_248z$y);
 const CopyToClipboard = props => {
   var _a;
   if (!props.variant) props.variant = 'neutral';
-  const [textIsCopied, setTextIsCopied] = useState(false);
-  const edsRef = useRef(null);
-  useEffect(function autosizeTextarea() {
+  const [textIsCopied, setTextIsCopied] = React.useState(false);
+  const edsRef = React.useRef(null);
+  React.useEffect(function autosizeTextarea() {
     if (props.multiline && edsRef.current instanceof HTMLTextAreaElement) {
       const textarea = edsRef.current.querySelector('textarea');
       if (textarea) textarea.style.height = String(textarea.scrollHeight) + 'px';
@@ -3214,13 +3244,13 @@ const CopyToClipboard = props => {
       edsInput.disabled = true;
     }
   }
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: styles$q.copyToClipboardContainer,
     "aria-label": props.multiline ? `${props.variant}-multiline` : props.variant,
-    children: [jsx("div", {
+    children: [jsxRuntime.jsx("div", {
       className: styles$q.textFieldSelector,
       onClick: () => handleReadonlySelect(),
-      children: jsx(TextField, {
+      children: jsxRuntime.jsx(edsCoreReact.TextField, {
         ref: edsRef,
         className: styles$q.readonlyInput,
         id: `copy-${(_a = props.copyableText) === null || _a === void 0 ? void 0 : _a.substring(0, 8)}`,
@@ -3228,14 +3258,14 @@ const CopyToClipboard = props => {
         disabled: true,
         multiline: props.multiline
       })
-    }), jsxs(Button, {
+    }), jsxRuntime.jsxs(edsCoreReact.Button, {
       "aria-label": `${props.variant}-button`,
       className: styles$q.copyButton,
       variant: "outlined",
       onClick: () => handleClipboard(props.copyableText),
       disabled: !(props.copyableText.length > 0),
       "aria-pressed": textIsCopied,
-      children: [jsx(Icon$1, {
+      children: [jsxRuntime.jsx(edsCoreReact.Icon, {
         name: textIsCopied ? 'check' : 'copy'
       }), textIsCopied ? 'Copied' : 'Copy']
     })]
@@ -3309,6 +3339,493 @@ $$1({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }
   assign: assign
 });
 
+var formatDistanceLocale = {
+  lessThanXSeconds: {
+    one: 'less than a second',
+    other: 'less than {{count}} seconds'
+  },
+  xSeconds: {
+    one: '1 second',
+    other: '{{count}} seconds'
+  },
+  halfAMinute: 'half a minute',
+  lessThanXMinutes: {
+    one: 'less than a minute',
+    other: 'less than {{count}} minutes'
+  },
+  xMinutes: {
+    one: '1 minute',
+    other: '{{count}} minutes'
+  },
+  aboutXHours: {
+    one: 'about 1 hour',
+    other: 'about {{count}} hours'
+  },
+  xHours: {
+    one: '1 hour',
+    other: '{{count}} hours'
+  },
+  xDays: {
+    one: '1 day',
+    other: '{{count}} days'
+  },
+  aboutXWeeks: {
+    one: 'about 1 week',
+    other: 'about {{count}} weeks'
+  },
+  xWeeks: {
+    one: '1 week',
+    other: '{{count}} weeks'
+  },
+  aboutXMonths: {
+    one: 'about 1 month',
+    other: 'about {{count}} months'
+  },
+  xMonths: {
+    one: '1 month',
+    other: '{{count}} months'
+  },
+  aboutXYears: {
+    one: 'about 1 year',
+    other: 'about {{count}} years'
+  },
+  xYears: {
+    one: '1 year',
+    other: '{{count}} years'
+  },
+  overXYears: {
+    one: 'over 1 year',
+    other: 'over {{count}} years'
+  },
+  almostXYears: {
+    one: 'almost 1 year',
+    other: 'almost {{count}} years'
+  }
+};
+var formatDistance = function formatDistance(token, count, options) {
+  var result;
+  var tokenValue = formatDistanceLocale[token];
+  if (typeof tokenValue === 'string') {
+    result = tokenValue;
+  } else if (count === 1) {
+    result = tokenValue.one;
+  } else {
+    result = tokenValue.other.replace('{{count}}', count.toString());
+  }
+  if (options !== null && options !== void 0 && options.addSuffix) {
+    if (options.comparison && options.comparison > 0) {
+      return 'in ' + result;
+    } else {
+      return result + ' ago';
+    }
+  }
+  return result;
+};
+var formatDistance$1 = formatDistance;
+
+var formatRelativeLocale = {
+  lastWeek: "'last' eeee 'at' p",
+  yesterday: "'yesterday at' p",
+  today: "'today at' p",
+  tomorrow: "'tomorrow at' p",
+  nextWeek: "eeee 'at' p",
+  other: 'P'
+};
+var formatRelative = function formatRelative(token, _date, _baseDate, _options) {
+  return formatRelativeLocale[token];
+};
+var formatRelative$1 = formatRelative;
+
+function buildLocalizeFn(args) {
+  return function (dirtyIndex, options) {
+    var context = options !== null && options !== void 0 && options.context ? String(options.context) : 'standalone';
+    var valuesArray;
+    if (context === 'formatting' && args.formattingValues) {
+      var defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
+      var width = options !== null && options !== void 0 && options.width ? String(options.width) : defaultWidth;
+      valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
+    } else {
+      var _defaultWidth = args.defaultWidth;
+      var _width = options !== null && options !== void 0 && options.width ? String(options.width) : args.defaultWidth;
+      valuesArray = args.values[_width] || args.values[_defaultWidth];
+    }
+    var index = args.argumentCallback ? args.argumentCallback(dirtyIndex) : dirtyIndex;
+    // @ts-ignore: For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it!
+    return valuesArray[index];
+  };
+}
+
+var eraValues = {
+  narrow: ['B', 'A'],
+  abbreviated: ['BC', 'AD'],
+  wide: ['Before Christ', 'Anno Domini']
+};
+var quarterValues = {
+  narrow: ['1', '2', '3', '4'],
+  abbreviated: ['Q1', 'Q2', 'Q3', 'Q4'],
+  wide: ['1st quarter', '2nd quarter', '3rd quarter', '4th quarter']
+};
+
+// Note: in English, the names of days of the week and months are capitalized.
+// If you are making a new locale based on this one, check if the same is true for the language you're working on.
+// Generally, formatted dates should look like they are in the middle of a sentence,
+// e.g. in Spanish language the weekdays and months should be in the lowercase.
+var monthValues = {
+  narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+  abbreviated: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+  wide: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+};
+var dayValues = {
+  narrow: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+  short: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+  abbreviated: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+  wide: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+};
+var dayPeriodValues = {
+  narrow: {
+    am: 'a',
+    pm: 'p',
+    midnight: 'mi',
+    noon: 'n',
+    morning: 'morning',
+    afternoon: 'afternoon',
+    evening: 'evening',
+    night: 'night'
+  },
+  abbreviated: {
+    am: 'AM',
+    pm: 'PM',
+    midnight: 'midnight',
+    noon: 'noon',
+    morning: 'morning',
+    afternoon: 'afternoon',
+    evening: 'evening',
+    night: 'night'
+  },
+  wide: {
+    am: 'a.m.',
+    pm: 'p.m.',
+    midnight: 'midnight',
+    noon: 'noon',
+    morning: 'morning',
+    afternoon: 'afternoon',
+    evening: 'evening',
+    night: 'night'
+  }
+};
+var formattingDayPeriodValues = {
+  narrow: {
+    am: 'a',
+    pm: 'p',
+    midnight: 'mi',
+    noon: 'n',
+    morning: 'in the morning',
+    afternoon: 'in the afternoon',
+    evening: 'in the evening',
+    night: 'at night'
+  },
+  abbreviated: {
+    am: 'AM',
+    pm: 'PM',
+    midnight: 'midnight',
+    noon: 'noon',
+    morning: 'in the morning',
+    afternoon: 'in the afternoon',
+    evening: 'in the evening',
+    night: 'at night'
+  },
+  wide: {
+    am: 'a.m.',
+    pm: 'p.m.',
+    midnight: 'midnight',
+    noon: 'noon',
+    morning: 'in the morning',
+    afternoon: 'in the afternoon',
+    evening: 'in the evening',
+    night: 'at night'
+  }
+};
+var ordinalNumber = function ordinalNumber(dirtyNumber, _options) {
+  var number = Number(dirtyNumber);
+
+  // If ordinal numbers depend on context, for example,
+  // if they are different for different grammatical genders,
+  // use `options.unit`.
+  //
+  // `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear',
+  // 'day', 'hour', 'minute', 'second'.
+
+  var rem100 = number % 100;
+  if (rem100 > 20 || rem100 < 10) {
+    switch (rem100 % 10) {
+      case 1:
+        return number + 'st';
+      case 2:
+        return number + 'nd';
+      case 3:
+        return number + 'rd';
+    }
+  }
+  return number + 'th';
+};
+var localize = {
+  ordinalNumber: ordinalNumber,
+  era: buildLocalizeFn({
+    values: eraValues,
+    defaultWidth: 'wide'
+  }),
+  quarter: buildLocalizeFn({
+    values: quarterValues,
+    defaultWidth: 'wide',
+    argumentCallback: function argumentCallback(quarter) {
+      return quarter - 1;
+    }
+  }),
+  month: buildLocalizeFn({
+    values: monthValues,
+    defaultWidth: 'wide'
+  }),
+  day: buildLocalizeFn({
+    values: dayValues,
+    defaultWidth: 'wide'
+  }),
+  dayPeriod: buildLocalizeFn({
+    values: dayPeriodValues,
+    defaultWidth: 'wide',
+    formattingValues: formattingDayPeriodValues,
+    defaultFormattingWidth: 'wide'
+  })
+};
+var localize$1 = localize;
+
+function buildMatchFn(args) {
+  return function (string) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var width = options.width;
+    var matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
+    var matchResult = string.match(matchPattern);
+    if (!matchResult) {
+      return null;
+    }
+    var matchedString = matchResult[0];
+    var parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
+    var key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, function (pattern) {
+      return pattern.test(matchedString);
+    }) : findKey(parsePatterns, function (pattern) {
+      return pattern.test(matchedString);
+    });
+    var value;
+    value = args.valueCallback ? args.valueCallback(key) : key;
+    value = options.valueCallback ? options.valueCallback(value) : value;
+    var rest = string.slice(matchedString.length);
+    return {
+      value: value,
+      rest: rest
+    };
+  };
+}
+function findKey(object, predicate) {
+  for (var key in object) {
+    if (object.hasOwnProperty(key) && predicate(object[key])) {
+      return key;
+    }
+  }
+  return undefined;
+}
+function findIndex(array, predicate) {
+  for (var key = 0; key < array.length; key++) {
+    if (predicate(array[key])) {
+      return key;
+    }
+  }
+  return undefined;
+}
+
+function buildMatchPatternFn(args) {
+  return function (string) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var matchResult = string.match(args.matchPattern);
+    if (!matchResult) return null;
+    var matchedString = matchResult[0];
+    var parseResult = string.match(args.parsePattern);
+    if (!parseResult) return null;
+    var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
+    value = options.valueCallback ? options.valueCallback(value) : value;
+    var rest = string.slice(matchedString.length);
+    return {
+      value: value,
+      rest: rest
+    };
+  };
+}
+
+var matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i;
+var parseOrdinalNumberPattern = /\d+/i;
+var matchEraPatterns = {
+  narrow: /^(b|a)/i,
+  abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,
+  wide: /^(before christ|before common era|anno domini|common era)/i
+};
+var parseEraPatterns = {
+  any: [/^b/i, /^(a|c)/i]
+};
+var matchQuarterPatterns = {
+  narrow: /^[1234]/i,
+  abbreviated: /^q[1234]/i,
+  wide: /^[1234](th|st|nd|rd)? quarter/i
+};
+var parseQuarterPatterns = {
+  any: [/1/i, /2/i, /3/i, /4/i]
+};
+var matchMonthPatterns = {
+  narrow: /^[jfmasond]/i,
+  abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,
+  wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i
+};
+var parseMonthPatterns = {
+  narrow: [/^j/i, /^f/i, /^m/i, /^a/i, /^m/i, /^j/i, /^j/i, /^a/i, /^s/i, /^o/i, /^n/i, /^d/i],
+  any: [/^ja/i, /^f/i, /^mar/i, /^ap/i, /^may/i, /^jun/i, /^jul/i, /^au/i, /^s/i, /^o/i, /^n/i, /^d/i]
+};
+var matchDayPatterns = {
+  narrow: /^[smtwf]/i,
+  short: /^(su|mo|tu|we|th|fr|sa)/i,
+  abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i,
+  wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i
+};
+var parseDayPatterns = {
+  narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i],
+  any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i]
+};
+var matchDayPeriodPatterns = {
+  narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,
+  any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i
+};
+var parseDayPeriodPatterns = {
+  any: {
+    am: /^a/i,
+    pm: /^p/i,
+    midnight: /^mi/i,
+    noon: /^no/i,
+    morning: /morning/i,
+    afternoon: /afternoon/i,
+    evening: /evening/i,
+    night: /night/i
+  }
+};
+var match = {
+  ordinalNumber: buildMatchPatternFn({
+    matchPattern: matchOrdinalNumberPattern,
+    parsePattern: parseOrdinalNumberPattern,
+    valueCallback: function valueCallback(value) {
+      return parseInt(value, 10);
+    }
+  }),
+  era: buildMatchFn({
+    matchPatterns: matchEraPatterns,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseEraPatterns,
+    defaultParseWidth: 'any'
+  }),
+  quarter: buildMatchFn({
+    matchPatterns: matchQuarterPatterns,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseQuarterPatterns,
+    defaultParseWidth: 'any',
+    valueCallback: function valueCallback(index) {
+      return index + 1;
+    }
+  }),
+  month: buildMatchFn({
+    matchPatterns: matchMonthPatterns,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseMonthPatterns,
+    defaultParseWidth: 'any'
+  }),
+  day: buildMatchFn({
+    matchPatterns: matchDayPatterns,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseDayPatterns,
+    defaultParseWidth: 'any'
+  }),
+  dayPeriod: buildMatchFn({
+    matchPatterns: matchDayPeriodPatterns,
+    defaultMatchWidth: 'any',
+    parsePatterns: parseDayPeriodPatterns,
+    defaultParseWidth: 'any'
+  })
+};
+var match$1 = match;
+
+function buildFormatLongFn(args) {
+  return function () {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    // TODO: Remove String()
+    var width = options.width ? String(options.width) : args.defaultWidth;
+    var format = args.formats[width] || args.formats[args.defaultWidth];
+    return format;
+  };
+}
+
+var dateFormats = {
+  full: 'EEEE, d MMMM yyyy',
+  long: 'd MMMM yyyy',
+  medium: 'd MMM yyyy',
+  short: 'dd/MM/yyyy'
+};
+var timeFormats = {
+  full: 'HH:mm:ss zzzz',
+  long: 'HH:mm:ss z',
+  medium: 'HH:mm:ss',
+  short: 'HH:mm'
+};
+var dateTimeFormats = {
+  full: "{{date}} 'at' {{time}}",
+  long: "{{date}} 'at' {{time}}",
+  medium: '{{date}}, {{time}}',
+  short: '{{date}}, {{time}}'
+};
+var formatLong = {
+  date: buildFormatLongFn({
+    formats: dateFormats,
+    defaultWidth: 'full'
+  }),
+  time: buildFormatLongFn({
+    formats: timeFormats,
+    defaultWidth: 'full'
+  }),
+  dateTime: buildFormatLongFn({
+    formats: dateTimeFormats,
+    defaultWidth: 'full'
+  })
+};
+var formatLong$1 = formatLong;
+
+/**
+ * @type {Locale}
+ * @category Locales
+ * @summary English locale (United Kingdom).
+ * @language English
+ * @iso-639-2 eng
+ * @author Alex [@glintik]{@link https://github.com/glintik}
+ */
+var locale = {
+  code: 'en-GB',
+  formatDistance: formatDistance$1,
+  formatLong: formatLong$1,
+  formatRelative: formatRelative$1,
+  localize: localize$1,
+  match: match$1,
+  options: {
+    weekStartsOn: 1 /* Monday */,
+    firstWeekContainsDate: 4
+  }
+};
+var enGb = locale;
+
+var css_248z$x = ".datePicker-module_ReactDatePicker__HwdfW{display:flex;flex-direction:column;max-width:250px;position:relative;width:100%}.datePicker-module_dateLabel__5DXi5{color:#6f6f6f;font-family:Equinor;font-size:.75rem;font-weight:400;line-height:1.333em;margin-bottom:0;margin-left:8px;position:relative;text-align:left}.datePicker-module_dateInput__jJtch{background-color:#f7f7f7!important;box-shadow:inset 0 -1px 0 0 #6f6f6f;display:inline-block;height:36px;width:100%}.datePicker-module_calendarIcon__Dw54b{bottom:-28px;color:#616161;cursor:pointer;height:20px;position:absolute;right:12px;width:20px;z-index:1}.datePicker-module_closeIcon__vTpuW{color:#616161;cursor:pointer;height:20px!important;width:20px!important;z-index:1}.datePicker-module_clearDateValue__pd8qT{bottom:4px;cursor:pointer;height:30px!important;position:absolute!important;right:9px;width:30px!important}";
+var style$6 = {"ReactDatePicker":"datePicker-module_ReactDatePicker__HwdfW","dateLabel":"datePicker-module_dateLabel__5DXi5","dateInput":"datePicker-module_dateInput__jJtch","calendarIcon":"datePicker-module_calendarIcon__Dw54b","closeIcon":"datePicker-module_closeIcon__vTpuW","clearDateValue":"datePicker-module_clearDateValue__pd8qT"};
+styleInject(css_248z$x);
+
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -3422,9 +3939,9 @@ function getYear(dirtyDate) {
   return toDate(dirtyDate).getFullYear();
 }
 
-var css_248z$x = ".popupHeader-module_popupHeader__D-rFH{align-items:center;column-gap:16px;display:grid;grid-template-columns:20px auto auto 20px;max-width:250px;padding:24px 20px;width:100%}.popupHeader-module_iconButton__Nt2hU{color:#006f79;height:20px;line-height:0;margin:0;padding:0;text-align:center;width:20px}.popupHeader-module_todayLabel__mvmBJ{color:#006f79;cursor:pointer;text-align:right}";
-var style$6 = {"popupHeader":"popupHeader-module_popupHeader__D-rFH","iconButton":"popupHeader-module_iconButton__Nt2hU","todayLabel":"popupHeader-module_todayLabel__mvmBJ"};
-styleInject(css_248z$x);
+var css_248z$w = ".popupHeader-module_popupHeader__D-rFH{align-items:center;column-gap:16px;display:grid;grid-template-columns:20px auto auto 20px;max-width:250px;padding:24px 20px;width:100%}.popupHeader-module_iconButton__Nt2hU{color:#006f79;height:20px;line-height:0;margin:0;padding:0;text-align:center;width:20px}.popupHeader-module_todayLabel__mvmBJ{color:#006f79;cursor:pointer;text-align:right}";
+var style$5 = {"popupHeader":"popupHeader-module_popupHeader__D-rFH","iconButton":"popupHeader-module_iconButton__Nt2hU","todayLabel":"popupHeader-module_todayLabel__mvmBJ"};
+styleInject(css_248z$w);
 
 const PopupHeader = ({
   date,
@@ -3435,51 +3952,48 @@ const PopupHeader = ({
   nextMonthButtonDisabled
 }) => {
   const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-  return jsxs("div", {
-    className: style$6.popupHeader,
-    children: [jsx("button", {
-      className: style$6.iconButton,
+  return jsxRuntime.jsxs("div", {
+    className: style$5.popupHeader,
+    children: [jsxRuntime.jsx("button", {
+      className: style$5.iconButton,
       onClick: event => {
         event.preventDefault();
         event.stopPropagation();
         decreaseMonth();
       },
       disabled: prevMonthButtonDisabled,
-      children: jsx(Icon$1, {
+      children: jsxRuntime.jsx(edsCoreReact.Icon, {
         size: 16,
-        data: arrow_back
+        data: edsIcons.arrow_back
       })
-    }), jsxs(Typography, {
+    }), jsxRuntime.jsxs(edsCoreReact.Typography, {
       variant: "body_short",
       children: [months[getMonth(date)], " ", getYear(date)]
-    }), jsx(Typography, {
-      className: style$6.todayLabel,
+    }), jsxRuntime.jsx(edsCoreReact.Typography, {
+      className: style$5.todayLabel,
       variant: "body_short",
       onClick: () => changeDate === null || changeDate === void 0 ? void 0 : changeDate(new Date()),
       children: "Today"
-    }), jsx("button", {
-      className: style$6.iconButton,
+    }), jsxRuntime.jsx("button", {
+      className: style$5.iconButton,
       onClick: event => {
         event.preventDefault();
         event.stopPropagation();
         increaseMonth();
       },
       disabled: nextMonthButtonDisabled,
-      children: jsx(Icon$1, {
+      children: jsxRuntime.jsx(edsCoreReact.Icon, {
         size: 16,
-        data: arrow_forward
+        data: edsIcons.arrow_forward
       })
     })]
   });
 };
 
-var css_248z$w = ".datePicker-module_ReactDatePicker__HwdfW{display:flex;flex-direction:column;max-width:250px;position:relative;width:100%}.datePicker-module_dateLabel__5DXi5{color:#6f6f6f;font-family:Equinor;font-size:.75rem;font-weight:400;line-height:1.333em;margin-bottom:0;margin-left:8px;position:relative;text-align:left}.datePicker-module_dateInput__jJtch{background-color:#f7f7f7!important;box-shadow:inset 0 -1px 0 0 #6f6f6f;display:inline-block;height:36px;width:100%}.datePicker-module_calendarIcon__Dw54b{bottom:-28px;color:#616161;cursor:pointer;height:20px;position:absolute;right:12px;width:20px;z-index:1}.datePicker-module_closeIcon__vTpuW{color:#616161;cursor:pointer;height:20px!important;width:20px!important;z-index:1}.datePicker-module_clearDateValue__pd8qT{bottom:4px;cursor:pointer;height:30px!important;position:absolute!important;right:9px;width:30px!important}";
-var style$5 = {"ReactDatePicker":"datePicker-module_ReactDatePicker__HwdfW","dateLabel":"datePicker-module_dateLabel__5DXi5","dateInput":"datePicker-module_dateInput__jJtch","calendarIcon":"datePicker-module_calendarIcon__Dw54b","closeIcon":"datePicker-module_closeIcon__vTpuW","clearDateValue":"datePicker-module_clearDateValue__pd8qT"};
-styleInject(css_248z$w);
-
 var css_248z$v = ".reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker__EjHai{font-family:Equinor!important}.reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker__header__m7M0R{background-color:#fff;border-bottom:none;line-height:48px;min-height:48px}.reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker__navigation--next__HKTJx,.reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker__navigation--previous__aenVq{min-height:48px;right:8px;top:6px}.reactDatePicker_react-datepicker__navigation-icon__iglY-:before{border-color:var(--asBuilt)}.reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker__current-month__sZHE6{font-weight:500}.reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker__day-names__EHGp-{border-top:1px solid #ececec;margin:10px 0 0;padding:10px 0 0;text-align:center}.reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker__day-name__IREzf{color:#6f6f6f;font-size:11px;line-height:unset;visibility:hidden;width:35px}.reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker__day-name__IREzf:first-letter{visibility:visible}.reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker__day__P5XNw{color:#007079;font-weight:500;line-height:35px;width:35px}.reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker__day--selected__L4p3V,.reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker__month-text--keyboard-selected__-5ZXm,.reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker__quarter-text--keyboard-selected__pu7-1,.reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker__year-text--keyboard-selected__En4W2{background-color:#007079;color:#fff}.reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker__day--keyboard-selected__Ey4Ww{background-color:unset}.reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker__day--disabled__Zx1i-{color:#ccc}.reactDatePicker_EDSPicker__z3yXi .reactDatePicker_react-datepicker-popper__1mWle{z-index:4!important}.reactDatePicker_react-datepicker__time-container__k3rBO{border:none;float:left;padding-top:8px;width:100%}.reactDatePicker_react-datepicker__header--time__MZ3AF{padding:0 16px;text-align:left;width:100%}.reactDatePicker_react-datepicker__time-container__k3rBO .reactDatePicker_react-datepicker__time__EFonp .reactDatePicker_react-datepicker__time-box__ADe-m{padding:0 8px;text-align:left;width:100%}";
 styleInject(css_248z$v);
 
+DatePicker.registerLocale('en-gb', enGb);
 const ReactDatePicker = ({
   label,
   value,
@@ -3493,27 +4007,28 @@ const ReactDatePicker = ({
   maxDate,
   minDate
 }) => {
-  const ref = /*#__PURE__*/React__default.createRef();
-  const onDateValueChange = useCallback(date => {
+  const ref = /*#__PURE__*/React__default["default"].createRef();
+  const onDateValueChange = React.useCallback(date => {
     onChanged === null || onChanged === void 0 ? void 0 : onChanged(date);
   }, [onChanged]);
-  return jsxs("div", {
-    className: classnames$1(style$5.ReactDatePicker, 'EDSPicker') + ` ${className !== null && className !== void 0 ? className : ''}`,
-    children: [jsxs("label", {
-      className: style$5.dateLabel,
+  return jsxRuntime.jsxs("div", {
+    className: classnames__default["default"](style$6.ReactDatePicker, 'EDSPicker') + ` ${className !== null && className !== void 0 ? className : ''}`,
+    children: [jsxRuntime.jsxs("label", {
+      className: style$6.dateLabel,
       htmlFor: id,
       onClick: () => {
         var _a;
         (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.setOpen(true);
       },
-      children: [label, !value && jsx(Icon, {
+      children: [label, !value && jsxRuntime.jsx(Icon, {
         color: themeConst.asBuilt,
         name: "calendar",
-        className: style$5.calendarIcon
+        className: style$6.calendarIcon
       })]
-    }), jsx(DatePicker, {
+    }), jsxRuntime.jsx(DatePicker__default["default"], {
       ref: ref,
-      className: style$5.dateInput,
+      locale: "en-gb",
+      className: style$6.dateInput,
       selected: value,
       onChange: onDateValueChange,
       dateFormat: showTimeSelect ? 'dd.MM.yyyy HH:mm' : 'dd.MM.yyyy',
@@ -3535,21 +4050,21 @@ const ReactDatePicker = ({
       autoComplete: 'false',
       popperPlacement: popperPlacement,
       showTimeSelect: showTimeSelect,
-      renderCustomHeader: props => jsx(PopupHeader, Object.assign({}, props, {
+      renderCustomHeader: props => jsxRuntime.jsx(PopupHeader, Object.assign({}, props, {
         changeDate: onDateValueChange
       })),
       minDate: maxDate,
       maxDate: minDate
-    }), value && jsx(Button, {
-      className: style$5.clearDateValue,
+    }), value && jsxRuntime.jsx(edsCoreReact.Button, {
+      className: style$6.clearDateValue,
       variant: 'ghost_icon',
       onClick: () => {
         onChanged(null);
       },
-      children: jsx(Icon, {
+      children: jsxRuntime.jsx(Icon, {
         color: themeConst.asBuilt,
         name: "close",
-        className: style$5.closeIcon
+        className: style$6.closeIcon
       })
     })]
   });
@@ -3582,21 +4097,21 @@ const DialogGenerator = ({
   isDismissable,
   onClose
 }) => {
-  return jsxs(Dialog, {
+  return jsxRuntime.jsxs(edsCoreReact.Dialog, {
     style: dialogStyle,
     open: open,
     isDismissable: isDismissable,
     onClose: () => onClose && onClose(),
-    children: [jsx(Dialog.Header, {
-      children: jsx(Dialog.Title, {
+    children: [jsxRuntime.jsx(edsCoreReact.Dialog.Header, {
+      children: jsxRuntime.jsx(edsCoreReact.Dialog.Title, {
         children: title
       })
-    }), jsx(Dialog.CustomContent, {
+    }), jsxRuntime.jsx(edsCoreReact.Dialog.CustomContent, {
       children: children
-    }), actionButtons.length > 0 && jsx(Dialog.Actions, {
+    }), actionButtons.length > 0 && jsxRuntime.jsx(edsCoreReact.Dialog.Actions, {
       className: styles$p.footer,
       children: actionButtons.map((actionButton, index) => {
-        return jsx(Button, {
+        return jsxRuntime.jsx(edsCoreReact.Button, {
           onClick: actionButton.onClick,
           variant: actionButton.variant,
           color: actionButton.color,
@@ -3645,24 +4160,24 @@ const Dropdown = ({
   position: _position = 'absolute',
   triggerOpen
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef(null);
-  const [filter, setFilter] = useState('');
-  const [filteredData, setFilteredData] = useState([]);
-  const [width, setWidth] = useState(0);
-  const [height, setHeight] = useState(0);
-  const [dropdownId, setDropdownId] = useState('');
-  const listRef = useRef(null);
-  const wrapperRef = useOnOutsideClick(() => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const buttonRef = React.useRef(null);
+  const [filter, setFilter] = React.useState('');
+  const [filteredData, setFilteredData] = React.useState([]);
+  const [width, setWidth] = React.useState(0);
+  const [height, setHeight] = React.useState(0);
+  const [dropdownId, setDropdownId] = React.useState('');
+  const listRef = React.useRef(null);
+  const wrapperRef = echoUtils.useOnOutsideClick(() => {
     if (triggerOpen) triggerOpen(false);
     setIsOpen(false);
   });
-  useEffect(() => {
+  React.useEffect(() => {
     if (!dropdownId) {
-      setDropdownId(generateRandomId());
+      setDropdownId(echoUtils.generateRandomId());
     }
   }, [dropdownId, setDropdownId]);
-  useEffect(() => {
+  React.useEffect(() => {
     const dropdownElement = document.getElementById('dropdown-' + dropdownId);
     const widthOffset = 20;
     const heightOffset = showSearch ? 110 : 20;
@@ -3671,7 +4186,7 @@ const Dropdown = ({
       setHeight(dropdownElement.offsetHeight - heightOffset);
     }
   }, [setWidth, setHeight, isOpen, showSearch, dropdownId]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (filterFunc && isOpen) {
       setFilteredData(filterFunc(data, filter));
     } else {
@@ -3702,7 +4217,7 @@ const Dropdown = ({
     return text.slice(0, characterLimit).concat('...');
   };
   // This will reset and calculate new dynamic row heights when filteredData changes, i.e., when the user starts typing a search.
-  useEffect(() => {
+  React.useEffect(() => {
     if (listRef.current) {
       listRef.current.resetAfterIndex(0);
     }
@@ -3710,23 +4225,23 @@ const Dropdown = ({
   const RenderDropdown = () => {
     var _a, _b;
     const dropdownShow = openDownWards ? styles$o.dropdownDownShow : styles$o.dropdownUpShow;
-    const [searchInput, setFocus] = useFocus();
+    const [searchInput, setFocus] = echoUtils.useFocus();
     const estimatedItemSize = 50;
-    useEffect(() => {
+    React.useEffect(() => {
       setFocus();
     }, [setFocus]);
     const Row = ({
       index,
       style
     }) => {
-      return jsx("button", {
+      return jsxRuntime.jsx("button", {
         style: style,
         tabIndex: 0,
         role: "option",
         "aria-selected": false,
         className: styles$o.options,
         onClick: event => handleItemSelected(event, filteredData[index]),
-        children: jsx("div", {
+        children: jsxRuntime.jsx("div", {
           className: styles$o.optionsItem,
           children: filteredData[index]
         })
@@ -3738,7 +4253,7 @@ const Dropdown = ({
       if (ratio < 6.3) return 80;else if (ratio < 8.1) return 65;
       return estimatedItemSize;
     };
-    return jsxs("div", {
+    return jsxRuntime.jsxs("div", {
       ref: wrapperRef,
       "data-testid": "dropdown-content",
       id: 'dropdown-' + dropdownId,
@@ -3747,17 +4262,17 @@ const Dropdown = ({
         position: _position
       },
       className: isOpen ? dropdownShow : styles$o.dropdown,
-      children: [showSearch && jsx("div", {
+      children: [showSearch && jsxRuntime.jsx("div", {
         className: styles$o.searchWrapper,
-        children: jsx(Search, {
+        children: jsxRuntime.jsx(edsCoreReact.Search, {
           onChange: handleSetFilter,
           value: filter,
           ref: searchInput,
           placeholder: 'Search'
         })
-      }), jsx("div", {
+      }), jsxRuntime.jsx("div", {
         className: filterFunc ? styles$o.filteredDataListWithSearch : styles$o.filteredDataList,
-        children: isOpen && filteredData ? jsx(VariableSizeList, {
+        children: isOpen && filteredData ? jsxRuntime.jsx(reactWindow.VariableSizeList, {
           ref: listRef,
           width: width,
           height: height,
@@ -3769,18 +4284,18 @@ const Dropdown = ({
       })]
     });
   };
-  return jsxs("div", {
-    children: [!openDownWards && RenderDropdown(), jsxs("button", {
+  return jsxRuntime.jsxs("div", {
+    children: [!openDownWards && RenderDropdown(), jsxRuntime.jsxs("button", {
       "data-testid": "dropdown-button",
       disabled: isDisabled,
       ref: buttonRef,
       className: [variant === 'compact' ? styles$o.dropdownToggleHome : styles$o.dropdownToggle, variant === 'compact' && isOpen === true ? styles$o.dropdownToggleHomeActive : '', variant === 'compact' && selected ? styles$o.dropdownSelected : ''].join(' '),
       onClick: event => handleIsOpenToggle(event),
       title: isDisabled ? _disabledText : 'Choose an option',
-      children: [jsx("div", {
+      children: [jsxRuntime.jsx("div", {
         "data-testid": "display-text",
         children: selected.length > 0 ? generateDisplayText(selected, maxCharacterCount) : placeholder
-      }), jsx(Icon, {
+      }), jsxRuntime.jsx(Icon, {
         name: "arrow_drop_down",
         title: "Choose options",
         color: isDisabled ? themeConst.disabledColor : themeConst.asBuilt,
@@ -3798,9 +4313,9 @@ const EchoBottomBar = ({
   children,
   style
 }) => {
-  return jsx("div", {
+  return jsxRuntime.jsx("div", {
     className: styles$n.barWrapper,
-    children: jsx("div", {
+    children: jsxRuntime.jsx("div", {
       className: styles$n.barContainer,
       style: style,
       children: children
@@ -3817,12 +4332,12 @@ const Body = ({
   children,
   className
 }) => {
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: `${style$4.body} ${className}`,
-    children: [jsx("p", {
+    children: [jsxRuntime.jsx("p", {
       className: style$4.bodyText,
       children: bodyText
-    }), jsx("div", {
+    }), jsxRuntime.jsx("div", {
       children: children
     })]
   });
@@ -3835,22 +4350,22 @@ const DateSection = ({
   className
 }) => {
   const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: `${style$4.dateSection} ${className}`,
-    children: [date && jsxs(Fragment, {
-      children: [jsx("span", {
+    children: [date && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx("span", {
         children: dateSectionText
-      }), jsxs("div", {
+      }), jsxRuntime.jsxs("div", {
         className: style$4.date,
-        children: [jsxs("span", {
+        children: [jsxRuntime.jsxs("span", {
           className: style$4.dayOfMonth,
           children: [" ", new Date(date).getDate()]
-        }), jsxs("span", {
+        }), jsxRuntime.jsxs("span", {
           className: style$4.monthText,
           children: [months[new Date(date).getMonth()], " ", new Date(date).getFullYear()]
         })]
       })]
-    }), jsx("div", {
+    }), jsxRuntime.jsx("div", {
       children: children
     })]
   });
@@ -3861,7 +4376,7 @@ const EchoCard$1 = ({
   className,
   style
 }) => {
-  return jsx("div", {
+  return jsxRuntime.jsx("div", {
     className: `${style$4.cardContainer} ${className}`,
     style: style,
     children: children
@@ -3875,20 +4390,20 @@ const LinkSection = ({
 }) => {
   const linkActionSection = linkSectionIcons && linkSectionIcons.map(icon => {
     if (icon.onClick) {
-      return jsx(Button, {
+      return jsxRuntime.jsx(edsCoreReact.Button, {
         variant: "ghost_icon",
         onClick: icon.onClick,
         className: style$4.iconContainer,
-        children: jsx(Icon$1, {
+        children: jsxRuntime.jsx(edsCoreReact.Icon, {
           color: icon.color,
           name: icon.name,
           title: icon.name
         })
       }, icon.name);
     } else {
-      return jsx("div", {
+      return jsxRuntime.jsx("div", {
         className: style$4.iconContainer,
-        children: jsx(Icon$1, {
+        children: jsxRuntime.jsx(edsCoreReact.Icon, {
           color: icon.color,
           name: icon.name,
           title: icon.name
@@ -3896,7 +4411,7 @@ const LinkSection = ({
       }, icon.name);
     }
   });
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: `${style$4.linkSection} ${className}`,
     children: [children, linkActionSection]
   });
@@ -3910,20 +4425,20 @@ const Title = ({
 }) => {
   const headerActionSection = headerIcons && headerIcons.map(icon => {
     if (icon.onClick) {
-      return jsx(Button, {
+      return jsxRuntime.jsx(edsCoreReact.Button, {
         variant: "ghost_icon",
         onClick: icon.onClick,
         className: style$4.iconContainer,
-        children: jsx(Icon, {
+        children: jsxRuntime.jsx(Icon, {
           color: icon.color,
           name: icon.name,
           title: icon.name
         })
       }, icon.name);
     } else {
-      return jsx("div", {
+      return jsxRuntime.jsx("div", {
         className: style$4.iconContainer,
-        children: jsx(Icon, {
+        children: jsxRuntime.jsx(Icon, {
           color: icon.color,
           name: icon.name,
           title: icon.name
@@ -3931,16 +4446,16 @@ const Title = ({
       }, icon.name);
     }
   });
-  const titleClassNames = classnames$1(style$4.titleSection, {
+  const titleClassNames = classnames__default["default"](style$4.titleSection, {
     [style$4.titlePadding]: headerIcons && headerIcons.length > 0
   });
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: `${titleClassNames} ${className}`,
-    children: [jsx("span", {
+    children: [jsxRuntime.jsx("span", {
       className: style$4.tileHeaderTitle,
       onClick: onHeaderClick,
       children: headerTitle
-    }), jsx("div", {
+    }), jsxRuntime.jsx("div", {
       className: style$4.iconContainer,
       children: headerActionSection
     })]
@@ -3976,27 +4491,27 @@ const EchoHeader = ({
 }) => {
   const CustomSection = customHeaderSection;
   const ModuleIcon = _moduleIcon;
-  return jsxs("header", {
+  return jsxRuntime.jsxs("header", {
     className: styles$m.headerWrapper,
-    children: [jsxs("div", {
+    children: [jsxRuntime.jsxs("div", {
       className: styles$m.headerContainer,
-      children: [typeof ModuleIcon == 'string' ? jsx(Icon, {
+      children: [typeof ModuleIcon == 'string' ? jsxRuntime.jsx(Icon, {
         className: styles$m.moduleIcon,
         name: ModuleIcon,
         color: themeConst.asBuilt
-      }) : jsx(ModuleIcon, {}), jsxs("div", {
+      }) : jsxRuntime.jsx(ModuleIcon, {}), jsxRuntime.jsxs("div", {
         className: styles$m.titleSection,
-        children: [jsx("h2", {
+        children: [jsxRuntime.jsx("h2", {
           className: styles$m.moduleTextTitle,
           children: _moduleTitle
-        }), plantName && jsx("div", {
+        }), plantName && jsxRuntime.jsx("div", {
           className: styles$m.plantName,
           children: '- ' + plantName
         })]
       })]
-    }), jsx("div", {
+    }), jsxRuntime.jsx("div", {
       className: styles$m.customSection,
-      children: CustomSection && jsx(CustomSection, {})
+      children: CustomSection && jsxRuntime.jsx(CustomSection, {})
     })]
   });
 };
@@ -4007,43 +4522,43 @@ function useTooltip({
   open: controlledOpen,
   onOpenChange: setControlledOpen
 } = {}) {
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
   const open = controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : uncontrolledOpen;
   const setOpen = setControlledOpen !== null && setControlledOpen !== void 0 ? setControlledOpen : setUncontrolledOpen;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const data = useFloating({
+  const data = react.useFloating({
     placement,
     open,
     onOpenChange: setOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [offset(5), flip({
+    whileElementsMounted: react.autoUpdate,
+    middleware: [react.offset(5), react.flip({
       fallbackAxisSideDirection: 'start',
       crossAxis: placement.includes('-')
-    }), shift({
+    }), react.shift({
       padding: 8
     })]
   });
   const context = data.context;
-  const hover = useHover(context, {
+  const hover = react.useHover(context, {
     move: false,
     enabled: controlledOpen == null
   });
-  const focus = useFocus$1(context, {
+  const focus = react.useFocus(context, {
     enabled: controlledOpen == null
   });
-  const dismiss = useDismiss(context);
-  const role = useRole(context, {
+  const dismiss = react.useDismiss(context);
+  const role = react.useRole(context, {
     role: 'tooltip'
   });
-  const interactions = useInteractions([hover, focus, dismiss, role]);
-  return useMemo(() => Object.assign(Object.assign({
+  const interactions = react.useInteractions([hover, focus, dismiss, role]);
+  return React.useMemo(() => Object.assign(Object.assign({
     open,
     setOpen
   }, interactions), data), [open, setOpen, interactions, data]);
 }
-const TooltipContext = /*#__PURE__*/createContext(null);
+const TooltipContext = /*#__PURE__*/React.createContext(null);
 const useTooltipContext = () => {
-  const context = useContext(TooltipContext);
+  const context = React.useContext(TooltipContext);
   if (context == null) {
     throw new Error('Tooltip components must be wrapped in <Tooltip />');
   }
@@ -4057,12 +4572,12 @@ function Tooltip(_a) {
     options = __rest(_a, ["children"]);
   //  The hook accepts props as options or other positioning attributes
   const tooltip = useTooltip(options);
-  return jsx(TooltipContext.Provider, {
+  return jsxRuntime.jsx(TooltipContext.Provider, {
     value: tooltip,
     children: children
   });
 }
-const TooltipAnchor = /*#__PURE__*/forwardRef(function TooltipAnchor(_a, propRef) {
+const TooltipAnchor = /*#__PURE__*/React.forwardRef(function TooltipAnchor(_a, propRef) {
   var {
       children
     } = _a,
@@ -4070,27 +4585,27 @@ const TooltipAnchor = /*#__PURE__*/forwardRef(function TooltipAnchor(_a, propRef
   const context = useTooltipContext();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const childrenRef = children.ref;
-  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
-  if ( /*#__PURE__*/isValidElement(children)) {
-    return /*#__PURE__*/cloneElement(children, context.getReferenceProps(Object.assign(Object.assign(Object.assign({
+  const ref = react.useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+  if ( /*#__PURE__*/React.isValidElement(children)) {
+    return /*#__PURE__*/React.cloneElement(children, context.getReferenceProps(Object.assign(Object.assign(Object.assign({
       ref
     }, props), children.props), {
       'data-state': context.open ? 'open' : 'closed'
     })));
   }
-  return jsx("div", Object.assign({
+  return jsxRuntime.jsx("div", Object.assign({
     ref: ref,
     "data-state": context.open ? 'open' : 'closed'
   }, context.getReferenceProps(props), {
     children: children
   }));
 });
-const TooltipContent = /*#__PURE__*/forwardRef(function TooltipContent(props, propRef) {
+const TooltipContent = /*#__PURE__*/React.forwardRef(function TooltipContent(props, propRef) {
   var _a, _b;
   const context = useTooltipContext();
-  const ref = useMergeRefs([context.refs.setFloating, propRef]);
-  return jsx(FloatingPortal, {
-    children: context.open && jsx("div", Object.assign({
+  const ref = react.useMergeRefs([context.refs.setFloating, propRef]);
+  return jsxRuntime.jsx(react.FloatingPortal, {
+    children: context.open && jsxRuntime.jsx("div", Object.assign({
       ref: ref,
       style: Object.assign({
         position: context.strategy,
@@ -4150,16 +4665,16 @@ const FloatingActionButton = ({
   active,
   onClick
 }) => {
-  return jsxs(Button, {
+  return jsxRuntime.jsxs(edsCoreReact.Button, {
     "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label,
     onClick: onClick,
     className: `${style$3.button} ${!disabled && style$3.primary} ${active && style$3.active} ${getEchoVariantStyle(variant)}`,
     variant: getEdsVariant(variant),
     disabled: disabled !== null && disabled !== void 0 ? disabled : false,
-    children: [jsx(Icon$1, {
+    children: [jsxRuntime.jsx(edsCoreReact.Icon, {
       name: iconName,
       className: style$3.icon
-    }), (variant === 'square_icon_with_text' || variant === 'square_icon_with_text_below') && label && jsx("span", {
+    }), (variant === 'square_icon_with_text' || variant === 'square_icon_with_text_below') && label && jsxRuntime.jsx("span", {
       children: label
     })]
   });
@@ -4180,7 +4695,7 @@ const InlineTagIconLink = ({
 }) => {
   const showEDSOrCustomIcon = iconToShow => {
     if (typeof iconToShow === 'string') {
-      return jsx(Icon, {
+      return jsxRuntime.jsx(Icon, {
         name: iconToShow,
         color: 'white',
         title: iconToShow
@@ -4190,23 +4705,23 @@ const InlineTagIconLink = ({
     }
   };
   const buttonStyle = disableHover ? styles$l.tagButtonNoHover : styles$l.tagButton;
-  return jsxs(Button, {
+  return jsxRuntime.jsxs(edsCoreReact.Button, {
     variant: 'ghost',
     onClick: onClickHandler,
     className: buttonStyle,
-    children: [jsxs("div", {
+    children: [jsxRuntime.jsxs("div", {
       style: {
         background: legendColor
       },
       className: styles$l.icon,
       children: [tagCategoryDescription && getIcon(tagCategoryDescription !== null && tagCategoryDescription !== void 0 ? tagCategoryDescription : ''), !tagCategoryDescription && icon && showEDSOrCustomIcon(icon)]
-    }), jsxs("div", {
+    }), jsxRuntime.jsxs("div", {
       className: styles$l.textContainer,
-      children: [jsx(Typography, {
+      children: [jsxRuntime.jsx(edsCoreReact.Typography, {
         variant: "body_short_link",
         className: styles$l.tag,
         children: tagNo
-      }), jsx(Typography, {
+      }), jsxRuntime.jsx(edsCoreReact.Typography, {
         className: styles$l.description,
         variant: "body_short",
         children: description
@@ -4400,8 +4915,8 @@ $({ target: 'RegExp', proto: true, forced: /./.exec !== exec }, {
  * @returns boolean true if on mobile.
  */
 function useIsMobile() {
-  const [isMobile, setIsMobile] = useState(false);
-  useInitial(() => {
+  const [isMobile, setIsMobile] = React.useState(false);
+  echoUtils.useInitial(() => {
     if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
       // true for mobile device
       setIsMobile(true);
@@ -4437,15 +4952,15 @@ function MainLegend({
   legendStyle,
   legendContentStyle
 }) {
-  const [defaultLayers, setDefaultLayers] = useState([]);
-  const [uniqueLayers, setUniqueLayers] = useState([]);
-  const [isOpen, setIsOpen] = useState(false);
+  const [defaultLayers, setDefaultLayers] = React.useState([]);
+  const [uniqueLayers, setUniqueLayers] = React.useState([]);
+  const [isOpen, setIsOpen] = React.useState(false);
   const isMobile = useIsMobile();
   const toggle = () => {
     setIsOpen(isOpen => !isOpen);
   };
   // Set icons on main layer
-  useEffect(() => {
+  React.useEffect(() => {
     const [iconLayers, nonIconLayers] = separateLayers(layers);
     setUniqueLayers(iconLayers);
     setDefaultLayers(nonIconLayers);
@@ -4462,52 +4977,52 @@ function MainLegend({
     [styles$k.contentMobile]: isMobile,
     [styles$k.content]: !isMobile
   });
-  return jsxs(Fragment, {
-    children: [isOpen && jsx("div", {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [isOpen && jsxRuntime.jsx("div", {
       style: legendContentStyle,
       className: content,
       children: legends
-    }), jsxs("button", {
+    }), jsxRuntime.jsxs("button", {
       style: legendStyle,
       className: accordion,
       onClick: toggle,
-      children: [jsxs("div", {
+      children: [jsxRuntime.jsxs("div", {
         className: styles$k.left,
-        children: [jsx(Icon$1, {
+        children: [jsxRuntime.jsx(edsCoreReact.Icon, {
           className: styles$k.icon,
           size: 24,
           name: "map_legend_info"
-        }), isOpen ? jsxs(Fragment, {
-          children: [jsx("div", {
+        }), isOpen ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx("div", {
             children: "Minimize map legend"
-          }), jsx(Icon$1, {
+          }), jsxRuntime.jsx(edsCoreReact.Icon, {
             className: styles$k.icon,
             size: 24,
             name: "chevron_down"
           })]
-        }) : jsxs(Fragment, {
-          children: [jsx("div", {
+        }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx("div", {
             children: "Expand map legend"
-          }), jsx(Icon$1, {
+          }), jsxRuntime.jsx(edsCoreReact.Icon, {
             className: styles$k.icon,
             size: 24,
             name: "chevron_up"
           })]
         })]
-      }), !isMobile && !isOpen && jsxs("div", {
+      }), !isMobile && !isOpen && jsxRuntime.jsxs("div", {
         className: styles$k.right,
-        children: [uniqueLayers.map((layer, index) => jsx("div", {
+        children: [uniqueLayers.map((layer, index) => jsxRuntime.jsx("div", {
           className: styles$k.layerIcon,
-          children: jsx(Tooltip$1, {
+          children: jsxRuntime.jsx(edsCoreReact.Tooltip, {
             title: layer.title,
-            children: jsx(Icon$1, {
+            children: jsxRuntime.jsx(edsCoreReact.Icon, {
               size: 18,
               name: layer.iconName
             })
           })
-        }, layer.title + index)), defaultLayers.length > 0 && jsx(Tooltip$1, {
+        }, layer.title + index)), defaultLayers.length > 0 && jsxRuntime.jsx(edsCoreReact.Tooltip, {
           title: displayDefaultLayerNames(),
-          children: jsxs("div", {
+          children: jsxRuntime.jsxs("div", {
             children: ["+", defaultLayers.length]
           })
         })]
@@ -4518,11 +5033,11 @@ function MainLegend({
 
 const useEventListener = (eventName, handler, options, element = document) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const savedHandler = useRef();
-  useEffect(() => {
+  const savedHandler = React.useRef();
+  React.useEffect(() => {
     savedHandler.current = handler;
   }, [handler]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (!element || !element.addEventListener) {
       return;
     }
@@ -4544,7 +5059,7 @@ const Keys = {
   Escape: 'escape'
 };
 const useKeyboardNavigation = (keyboardEvents, listenerTarget = document) => {
-  const handleKeyDown = useCallback(e => {
+  const handleKeyDown = React.useCallback(e => {
     const key = Keys[e.key];
     const handler = keyboardEvents[key];
     if (handler) {
@@ -4557,9 +5072,9 @@ const useKeyboardNavigation = (keyboardEvents, listenerTarget = document) => {
  * Handles keyboard navigation and key events in the floating search bar suggestions.
  */
 const useSearchBarSectionNavigator = (sections, initialSelected, keyboardEvents, listenerTarget = document) => {
-  const [focusedSection, setFocusedSection] = useState(initialSelected);
-  const [focusedOption, setFocusedOption] = useState(initialSelected);
-  const up = useCallback(() => {
+  const [focusedSection, setFocusedSection] = React.useState(initialSelected);
+  const [focusedOption, setFocusedOption] = React.useState(initialSelected);
+  const up = React.useCallback(() => {
     let nextSection = focusedSection;
     let nextOption = focusedOption;
     if (nextOption > 0) {
@@ -4589,7 +5104,7 @@ const useSearchBarSectionNavigator = (sections, initialSelected, keyboardEvents,
       }
     }
   }, [sections, focusedSection, focusedOption]);
-  const down = useCallback(() => {
+  const down = React.useCallback(() => {
     var _a, _b;
     const nextSection = focusedSection;
     const nextOption = focusedOption;
@@ -4614,7 +5129,7 @@ const useSearchBarSectionNavigator = (sections, initialSelected, keyboardEvents,
       }
     }
   }, [sections, focusedSection, focusedOption]);
-  const enter = useCallback(() => {
+  const enter = React.useCallback(() => {
     if (keyboardEvents.enter) {
       if (focusedOption === -1 && focusedSection === -1) {
         return;
@@ -4622,7 +5137,7 @@ const useSearchBarSectionNavigator = (sections, initialSelected, keyboardEvents,
       keyboardEvents.enter(focusedSection, focusedOption);
     }
   }, [focusedSection, focusedOption, keyboardEvents]);
-  const escape = useCallback(() => {
+  const escape = React.useCallback(() => {
     keyboardEvents.escape && keyboardEvents.escape();
   }, [focusedSection, focusedOption, keyboardEvents]);
   useKeyboardNavigation({
@@ -4650,7 +5165,7 @@ function LayerLegend({
   disabled,
   style
 }) {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = React.useState(false);
   const isMobile = useIsMobile();
   const toggle = () => {
     setIsOpen(isOpen => !isOpen);
@@ -4663,40 +5178,40 @@ function LayerLegend({
     [styles$j.mobileHeader]: isMobile,
     [styles$j.desktopHeader]: !isMobile
   });
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     style: style,
     className: styles$j.layerLegendContainer,
-    children: [jsxs("button", {
+    children: [jsxRuntime.jsxs("button", {
       className: disabled ? styles$j.disabledHeader : header,
       onClick: toggle,
       "aria-expanded": isOpen,
       "aria-controls": "legendContent",
       disabled: disabled,
-      children: [jsxs("div", {
+      children: [jsxRuntime.jsxs("div", {
         className: left,
-        children: [iconName && jsx(Icon$1, {
+        children: [iconName && jsxRuntime.jsx(edsCoreReact.Icon, {
           className: styles$j.icon,
           size: 18,
           name: iconName
-        }), jsx("div", {
+        }), jsxRuntime.jsx("div", {
           className: styles$j.title,
           children: title
         })]
-      }), jsxs("div", {
+      }), jsxRuntime.jsxs("div", {
         className: styles$j.right,
-        children: [!isMobile && jsxs(Fragment, {
-          children: [jsxs("div", {
+        children: [!isMobile && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsxs("div", {
             className: styles$j.items,
             children: [itemsTitle ? itemsTitle.toUpperCase() : 'ITEMS', ":"]
-          }), jsx("div", {
+          }), jsxRuntime.jsx("div", {
             children: itemsCount
           })]
-        }), disabled ? null : jsx(Icon$1, {
+        }), disabled ? null : jsxRuntime.jsx(edsCoreReact.Icon, {
           size: 24,
           name: `${isOpen ? 'chevron_up' : 'chevron_down'}`
         })]
       })]
-    }), isOpen && jsx("div", {
+    }), isOpen && jsxRuntime.jsx("div", {
       id: "legendContent",
       className: styles$j.content,
       children: children
@@ -4721,21 +5236,21 @@ function ListItem(props) {
   const containerClassNames = classnames(styles$i.listItemContainer, {
     [styles$i.hoverItem]: !!props.onCardClick
   }, props.className);
-  return jsxs(Container, {
+  return jsxRuntime.jsxs(Container, {
     href: props.href,
     className: containerClassNames,
     style: props.style,
     onClick: props.onCardClick,
-    children: [props.listAction, props.visual, props.icon && jsx("div", {
+    children: [props.listAction, props.visual, props.icon && jsxRuntime.jsx("div", {
       className: styles$i.icon,
       style: {
         backgroundColor: props.icon.backgroundColor
       },
-      children: jsx(Icon$1, {
+      children: jsxRuntime.jsx(edsCoreReact.Icon, {
         name: props.icon.name,
         color: props.icon.color
       })
-    }), jsxs("div", {
+    }), jsxRuntime.jsxs("div", {
       className: styles$i.infoContainer,
       children: [primary, secondary, tertiary]
     }), caption, props.itemAction]
@@ -4744,7 +5259,7 @@ function ListItem(props) {
 function resolvePropToComponent(variant, prop, group) {
   if (prop) {
     if (typeof prop === 'string') {
-      return jsx(Typography, {
+      return jsxRuntime.jsx(edsCoreReact.Typography, {
         variant: variant,
         group: group,
         children: prop
@@ -4786,73 +5301,73 @@ const ListRow = ({
   expandable,
   style
 }) => {
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: styles$h.wrapper,
     style: style,
-    children: [jsxs("div", {
+    children: [jsxRuntime.jsxs("div", {
       className: styles$h.row,
-      children: [jsxs("div", {
+      children: [jsxRuntime.jsxs("div", {
         className: styles$h.infoCol,
-        children: [isDraggable && jsx("div", {
+        children: [isDraggable && jsxRuntime.jsx("div", {
           className: styles$h.draggable,
-          children: jsx(Icon, {
+          children: jsxRuntime.jsx(Icon, {
             name: "unfold_more",
             title: "Move",
             color: themeConst.asBuilt
           })
-        }), jsxs("div", {
+        }), jsxRuntime.jsxs("div", {
           className: styles$h.info,
-          children: [item.title && jsx(Typography, {
+          children: [item.title && jsxRuntime.jsx(edsCoreReact.Typography, {
             variant: "body_short",
             bold: true,
             children: item.title
-          }), item.subTitle && jsx(Typography, {
+          }), item.subTitle && jsxRuntime.jsx(edsCoreReact.Typography, {
             variant: "body_short",
             children: item.subTitle
           })]
         })]
-      }), jsxs("div", {
+      }), jsxRuntime.jsxs("div", {
         className: styles$h.iconCol,
         children: [item.icons.map((icon, itemIndex) => {
-          return jsx("button", {
+          return jsxRuntime.jsx("button", {
             className: styles$h.iconButton,
             onClick: icon.onClick,
-            children: jsx(Icon, {
+            children: jsxRuntime.jsx(Icon, {
               name: icon.icon,
               title: icon.icon,
               color: themeConst.asBuilt
             })
           }, itemIndex);
-        }), expandable && jsx("button", {
+        }), expandable && jsxRuntime.jsx("button", {
           className: expandable && expandable.expanded ? styles$h.activeIconButton : styles$h.iconButton,
           onClick: () => {
             expandable.setExpanded(true);
           },
-          children: jsx(Icon, {
+          children: jsxRuntime.jsx(Icon, {
             name: "more_vertical",
             title: "Expand",
             color: themeConst.asBuilt
           })
         })]
       })]
-    }), expandable && expandable.expanded && jsxs("div", {
+    }), expandable && expandable.expanded && jsxRuntime.jsxs("div", {
       className: styles$h.expandedRow,
       children: [expandable.iconItems.map((icon, iconItemsIndex) => {
-        return jsx("button", {
+        return jsxRuntime.jsx("button", {
           className: styles$h.iconButton,
           onClick: icon.onClick,
-          children: jsx(Icon, {
+          children: jsxRuntime.jsx(Icon, {
             name: icon.icon,
             title: icon.icon,
             color: themeConst.asBuilt
           })
         }, iconItemsIndex);
-      }), jsx("button", {
+      }), jsxRuntime.jsx("button", {
         className: styles$h.iconButton,
         onClick: () => {
           expandable.setExpanded(false);
         },
-        children: jsx(Icon, {
+        children: jsxRuntime.jsx(Icon, {
           name: 'close',
           title: 'Close',
           color: themeConst.asBuilt
@@ -4894,7 +5409,7 @@ const PCMatrix = ({
       [styles$g.highlightedMediumRiskCell]: props.factor === 'medium' && isHighlighted,
       [styles$g.highlightedHighRiskCell]: props.factor === 'high' && isHighlighted
     });
-    return jsx("div", {
+    return jsxRuntime.jsx("div", {
       className: cellClassName,
       style: {
         gridArea: props.gridArea
@@ -4902,14 +5417,14 @@ const PCMatrix = ({
     });
   };
   const pcMatrixGrid = classnames(className, styles$g.grid);
-  return jsxs("section", {
+  return jsxRuntime.jsxs("section", {
     className: pcMatrixGrid,
-    children: [jsx(Typography, {
+    children: [jsxRuntime.jsx(edsCoreReact.Typography, {
       group: "paragraph",
       variant: "meta",
       className: styles$g.consequenceLabel,
       children: "Consequence"
-    }), jsx(Typography, {
+    }), jsxRuntime.jsx(edsCoreReact.Typography, {
       group: "paragraph",
       variant: "overline",
       style: {
@@ -4917,7 +5432,7 @@ const PCMatrix = ({
       },
       className: styles$g.riskLabel,
       children: "Low"
-    }), jsx(Typography, {
+    }), jsxRuntime.jsx(edsCoreReact.Typography, {
       group: "paragraph",
       variant: "overline",
       style: {
@@ -4925,7 +5440,7 @@ const PCMatrix = ({
       },
       className: styles$g.riskLabel,
       children: "Medium"
-    }), jsx(Typography, {
+    }), jsxRuntime.jsx(edsCoreReact.Typography, {
       group: "paragraph",
       variant: "overline",
       style: {
@@ -4933,7 +5448,7 @@ const PCMatrix = ({
       },
       className: styles$g.riskLabel,
       children: "High"
-    }), jsx(Typography, {
+    }), jsxRuntime.jsx(edsCoreReact.Typography, {
       group: "paragraph",
       variant: "overline",
       style: {
@@ -4941,7 +5456,7 @@ const PCMatrix = ({
       },
       className: styles$g.riskLabel,
       children: "Low"
-    }), jsx(Typography, {
+    }), jsxRuntime.jsx(edsCoreReact.Typography, {
       group: "paragraph",
       variant: "overline",
       style: {
@@ -4949,7 +5464,7 @@ const PCMatrix = ({
       },
       className: styles$g.riskLabel,
       children: "Medium"
-    }), jsx(Typography, {
+    }), jsxRuntime.jsx(edsCoreReact.Typography, {
       group: "paragraph",
       variant: "overline",
       style: {
@@ -4957,44 +5472,44 @@ const PCMatrix = ({
       },
       className: styles$g.riskLabel,
       children: "High"
-    }), jsx(Typography, {
+    }), jsxRuntime.jsx(edsCoreReact.Typography, {
       group: "paragraph",
       variant: "meta",
       className: styles$g.probabilityLabel,
       children: "Probability"
-    }), jsx(RiskCell, {
+    }), jsxRuntime.jsx(RiskCell, {
       riskTuple: [0, 0],
       gridArea: "low0",
       factor: "low"
-    }), jsx(RiskCell, {
+    }), jsxRuntime.jsx(RiskCell, {
       riskTuple: [0, 1],
       gridArea: "med0",
       factor: "low"
-    }), jsx(RiskCell, {
+    }), jsxRuntime.jsx(RiskCell, {
       riskTuple: [0, 2],
       gridArea: "high0",
       factor: "medium"
-    }), jsx(RiskCell, {
+    }), jsxRuntime.jsx(RiskCell, {
       riskTuple: [1, 0],
       gridArea: "low1",
       factor: "low"
-    }), jsx(RiskCell, {
+    }), jsxRuntime.jsx(RiskCell, {
       riskTuple: [1, 1],
       gridArea: "med1",
       factor: "medium"
-    }), jsx(RiskCell, {
+    }), jsxRuntime.jsx(RiskCell, {
       riskTuple: [1, 2],
       gridArea: "high1",
       factor: "high"
-    }), jsx(RiskCell, {
+    }), jsxRuntime.jsx(RiskCell, {
       riskTuple: [2, 0],
       gridArea: "low2",
       factor: "low"
-    }), jsx(RiskCell, {
+    }), jsxRuntime.jsx(RiskCell, {
       riskTuple: [2, 1],
       gridArea: "med2",
       factor: "medium"
-    }), jsx(RiskCell, {
+    }), jsxRuntime.jsx(RiskCell, {
       riskTuple: [2, 2],
       gridArea: "high2",
       factor: "high"
@@ -5020,7 +5535,7 @@ styleInject(css_248z$i);
  * }
  * @return {*}  {JSX.Element}
  */
-const MenuButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+const MenuButton = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
   const {
       text,
       active,
@@ -5029,16 +5544,16 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       id
     } = props,
     otherProps = __rest(props, ["text", "active", "children", "onClick", "id"]);
-  return jsxs("button", Object.assign({}, otherProps, {
+  return jsxRuntime.jsxs("button", Object.assign({}, otherProps, {
     title: text,
     ref: ref,
     type: "button",
     onClick: onClick,
     id: id,
-    className: classnames$1(styles$f.button, {
+    className: classnames__default["default"](styles$f.button, {
       [styles$f.active]: active
     }),
-    children: [children, jsx(Typography, {
+    children: [children, jsxRuntime.jsx(edsCoreReact.Typography, {
       className: styles$f.text,
       children: text
     })]
@@ -5050,7 +5565,7 @@ MenuButton.defaultProps = {
 };
 
 // need to import whole of zustand for the build to be correct so the store can be used by other modules in the proper way
-const usePanelStore = zustand.create(set => ({
+const usePanelStore = zustand__namespace.create(set => ({
   activePanel: undefined,
   panelSize: 'wide',
   overflowMenuOpen: false,
@@ -5095,12 +5610,12 @@ const PanelWrapper = ({
     updatePanelSize,
     overflowMenuOpen
   } = usePanelStore();
-  const menuRef = useRef(null);
-  const [buttonsToDisplay, setButtonsToDisplay] = useState([]);
-  const [buttonsInOverflow, setButtonsInOverflow] = useState([]);
-  const [buttonAtBottom, setButtonAtBottom] = useState();
-  const mobileWrapperRef = useRef(null);
-  const desktopWrapperRef = useRef(null);
+  const menuRef = React.useRef(null);
+  const [buttonsToDisplay, setButtonsToDisplay] = React.useState([]);
+  const [buttonsInOverflow, setButtonsInOverflow] = React.useState([]);
+  const [buttonAtBottom, setButtonAtBottom] = React.useState();
+  const mobileWrapperRef = React.useRef(null);
+  const desktopWrapperRef = React.useRef(null);
   const handleActiveMenuItemChanged = (menuItemType, panelSizeToUse) => {
     usePanelStore.setState({
       overflowMenuOpen: false
@@ -5112,7 +5627,7 @@ const PanelWrapper = ({
     }
     updatePanelSize(panelSizeToUse !== null && panelSizeToUse !== void 0 ? panelSizeToUse : 'wide');
   };
-  const calculateOverflow = useCallback(() => {
+  const calculateOverflow = React.useCallback(() => {
     var _a, _b, _c, _d, _e, _f, _g;
     let numberOfIconsThereIsRoomFor;
     let shouldShowButtonAtBottom = false;
@@ -5148,17 +5663,17 @@ const PanelWrapper = ({
     setButtonsToDisplay(menuItemsCopy.slice(0, menuItems.length - iconsInOverflow));
     setButtonsInOverflow(menuItemsCopy.slice(menuItems.length - iconsInOverflow));
   }, [menuItems, mobileWrapperRef, desktopWrapperRef]);
-  useEffect(() => {
+  React.useEffect(() => {
     calculateOverflow();
   }, [calculateOverflow]);
-  useEffect(() => {
+  React.useEffect(() => {
     function updateSize() {
       usePanelStore.setState({
         overflowMenuOpen: false
       });
       calculateOverflow();
     }
-    const throttledUpdateResize = throttle(updateSize, 1000);
+    const throttledUpdateResize = lodash.throttle(updateSize, 1000);
     window.addEventListener('resize', throttledUpdateResize);
     return () => {
       window.removeEventListener('resize', throttledUpdateResize);
@@ -5176,7 +5691,7 @@ const PanelWrapper = ({
     const panel = getActivePanel(panelId);
     if (panel) {
       const PanelComponent = panel.component;
-      return jsx(PanelComponent, {});
+      return jsxRuntime.jsx(PanelComponent, {});
     }
     return null;
   };
@@ -5193,19 +5708,19 @@ const PanelWrapper = ({
     if (!button) return;
     if (button.skipPanelContent) {
       const PanelComponent = button.component;
-      return jsx("div", {
+      return jsxRuntime.jsx("div", {
         className: styles$e.buttonAtBottomWrapper,
-        children: jsx(PanelComponent, {}, button.labelId)
+        children: jsxRuntime.jsx(PanelComponent, {}, button.labelId)
       });
     }
-    return jsx("div", {
+    return jsxRuntime.jsx("div", {
       className: styles$e.buttonAtBottomWrapper,
-      children: jsx(MenuButton, {
+      children: jsxRuntime.jsx(MenuButton, {
         text: button.label,
         id: button.labelId,
         active: activePanel === button.labelId,
         onClick: () => handleActiveMenuItemChanged(button.labelId, button.panelSize),
-        children: typeof button.icon === 'string' ? jsx(Icon$1, {
+        children: typeof button.icon === 'string' ? jsxRuntime.jsx(edsCoreReact.Icon, {
           color: themeConst.echoText,
           name: button.icon
         }) : button.icon
@@ -5214,24 +5729,24 @@ const PanelWrapper = ({
   };
   const renderMenuItems = () => {
     var _a, _b;
-    return jsxs(Fragment, {
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [buttonsToDisplay.map(button => {
         if (button.skipPanelContent) {
           const PanelComponent = button.component;
-          return jsx(PanelComponent, {}, button.labelId);
+          return jsxRuntime.jsx(PanelComponent, {}, button.labelId);
         }
-        return jsx(MenuButton, {
+        return jsxRuntime.jsx(MenuButton, {
           text: button.label,
           id: button.labelId,
           active: activePanel === button.labelId,
           onClick: () => handleActiveMenuItemChanged(button.labelId, button.panelSize),
-          children: typeof button.icon === 'string' ? jsx(Icon$1, {
+          children: typeof button.icon === 'string' ? jsxRuntime.jsx(edsCoreReact.Icon, {
             color: themeConst.echoText,
             name: button.icon
           }) : button.icon
         }, button.labelId);
-      }), buttonsInOverflow.length > 0 && jsxs(Fragment, {
-        children: [jsx(MenuButton, {
+      }), buttonsInOverflow.length > 0 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(MenuButton, {
           text: "More",
           ref: menuRef,
           id: "more-menu-options-anchor",
@@ -5239,11 +5754,11 @@ const PanelWrapper = ({
           onClick: () => usePanelStore.setState({
             overflowMenuOpen: !overflowMenuOpen
           }),
-          children: jsx(Icon$1, {
+          children: jsxRuntime.jsx(edsCoreReact.Icon, {
             color: themeConst.echoText,
             name: "more_vertical"
           })
-        }), jsx(Menu, {
+        }), jsxRuntime.jsx(edsCoreReact.Menu, {
           style: {
             overflowX: 'auto',
             maxHeight: 'calc(100dvh - 70px)'
@@ -5256,13 +5771,13 @@ const PanelWrapper = ({
           children: buttonsInOverflow.map(button => {
             if (button.skipPanelContent) {
               const PanelComponent = button.component;
-              return jsx(PanelComponent, {
+              return jsxRuntime.jsx(PanelComponent, {
                 isOverflow: true
               }, button.labelId);
             }
-            return jsxs(Menu.Item, {
+            return jsxRuntime.jsxs(edsCoreReact.Menu.Item, {
               onClick: () => handleActiveMenuItemChanged(button.labelId, button.panelSize),
-              children: [typeof button.icon === 'string' ? jsx(Icon$1, {
+              children: [typeof button.icon === 'string' ? jsxRuntime.jsx(edsCoreReact.Icon, {
                 color: themeConst.echoText,
                 name: button.icon
               }) : button.icon, button.label]
@@ -5275,26 +5790,26 @@ const PanelWrapper = ({
   const renderMenuItemsBasedOnRef = ref => {
     if (ref) return renderMenuItems();
   };
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: styles$e.wrapper,
-    children: [jsxs("div", {
+    children: [jsxRuntime.jsxs("div", {
       className: styles$e.topBarWrapper,
-      children: [typeof header === 'string' ? jsx("div", {
+      children: [typeof header === 'string' ? jsxRuntime.jsx("div", {
         className: styles$e.moduleTitle,
-        children: jsx(Typography, {
+        children: jsxRuntime.jsx(edsCoreReact.Typography, {
           children: header
         })
-      }) : header, jsx("div", {
+      }) : header, jsxRuntime.jsx("div", {
         ref: mobileWrapperRef,
         className: styles$e.buttonWrapperMobile,
         children: renderMenuItemsBasedOnRef((_a = mobileWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth)
-      }), jsx("div", {
+      }), jsxRuntime.jsx("div", {
         className: styles$e.buttonWrapper,
         ref: desktopWrapperRef,
         children: renderMenuItemsBasedOnRef((_b = desktopWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)
       })]
-    }), !((_c = getActivePanel(activePanel)) === null || _c === void 0 ? void 0 : _c.skipPanelContent) && jsx("div", {
-      className: classnames$1(styles$e.contentPanel, {
+    }), !((_c = getActivePanel(activePanel)) === null || _c === void 0 ? void 0 : _c.skipPanelContent) && jsxRuntime.jsx("div", {
+      className: classnames__default["default"](styles$e.contentPanel, {
         [styles$e.narrowPanel]: panelSize === 'narrow' && activePanel,
         [styles$e.activeContentPanel]: activePanel
       }),
@@ -5324,7 +5839,7 @@ const Panel = ({
   menuItems,
   header
 }) => {
-  return jsx(PanelWrapper, {
+  return jsxRuntime.jsx(PanelWrapper, {
     header: header,
     menuItems: menuItems
   });
@@ -5358,16 +5873,16 @@ const PanelContent = ({
     updateActivePanel,
     panelSize
   } = usePanelStore();
-  return jsxs(Fragment, {
-    children: [jsxs("div", {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs("div", {
       className: styles$d.headerWrapper,
-      children: [backToMainPanel && jsx(Button, {
+      children: [backToMainPanel && jsxRuntime.jsx(edsCoreReact.Button, {
         variant: "ghost_icon",
         onClick: backToMainPanel,
-        children: jsx(Icon$1, {
+        children: jsxRuntime.jsx(edsCoreReact.Icon, {
           name: "arrow_back_ios"
         })
-      }), jsx(Typography, {
+      }), jsxRuntime.jsx(edsCoreReact.Typography, {
         group: "heading",
         variant: "h2",
         className: classnames({
@@ -5377,17 +5892,17 @@ const PanelContent = ({
           [styles$d.panelTitle]: panelSize !== 'narrow' && !backToMainPanel
         }),
         children: header
-      }), jsx(Button, {
+      }), jsxRuntime.jsx(edsCoreReact.Button, {
         variant: "ghost_icon",
         onClick: () => updateActivePanel(undefined),
-        children: jsx(Icon$1, {
+        children: jsxRuntime.jsx(edsCoreReact.Icon, {
           name: "close"
         })
       })]
-    }), jsx("div", {
+    }), jsxRuntime.jsx("div", {
       className: footer ? styles$d.bodyWrapperWithFooter : styles$d.bodyWrapper,
       children: children
-    }), footer && jsx("div", {
+    }), footer && jsxRuntime.jsx("div", {
       className: styles$d.footer,
       children: footer
     })]
@@ -5410,7 +5925,7 @@ PanelContent.defaultProps = {
 const PanelContentWrapper = ({
   children
 }) => {
-  return jsx("div", {
+  return jsxRuntime.jsx("div", {
     className: styles$d.contentWrapper,
     children: children
   });
@@ -5423,14 +5938,14 @@ function SuggestionGroup({
   styles
 }) {
   var _a;
-  return jsxs("ul", {
+  return jsxRuntime.jsxs("ul", {
     role: "listbox",
     className: styles.groupWrapper,
     "aria-expanded": true,
     id: suggestionGroup.id,
-    children: [suggestionGroup.title && jsx("div", {
+    children: [suggestionGroup.title && jsxRuntime.jsx("div", {
       className: styles.groupTitle,
-      children: jsx(Typography, {
+      children: jsxRuntime.jsx(edsCoreReact.Typography, {
         group: "paragraph",
         variant: "overline",
         children: suggestionGroup.title
@@ -5439,17 +5954,17 @@ function SuggestionGroup({
       const className = classnames(styles.item, {
         [styles.activeItem]: index === focusedOption
       });
-      return jsxs("li", {
+      return jsxRuntime.jsxs("li", {
         role: "option",
         id: suggestion.id,
         className: className,
         onClick: () => {
           onClick(suggestion);
         },
-        children: [jsx(Icon$1, {
+        children: [jsxRuntime.jsx(edsCoreReact.Icon, {
           className: styles.itemIcon,
           name: suggestion.iconName
-        }), jsx(Typography, {
+        }), jsxRuntime.jsx(edsCoreReact.Typography, {
           className: styles.itemText,
           group: "heading",
           variant: "h6",
@@ -5476,9 +5991,9 @@ function SearchSuggestions({
       onClick(option);
     }
   }, containerRef !== null && containerRef !== void 0 ? containerRef : undefined);
-  return jsx(Fragment, {
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: suggestionGroups.map((suggestionGroup, index) => {
-      return jsx(SuggestionGroup, {
+      return jsxRuntime.jsx(SuggestionGroup, {
         suggestionGroup: suggestionGroup,
         onClick: onClick,
         focusedOption: index === focusedSection ? focusedOption : -1,
@@ -5507,16 +6022,16 @@ const FloatingSearchBar = ({
   onSuggestionClick,
   isLoading
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [value, setValue] = useState('');
-  const containerRef = useRef(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [value, setValue] = React.useState('');
+  const containerRef = React.useRef(null);
   const openMenu = () => {
     setIsOpen(true);
   };
   const closeMenu = () => {
     if (isOpen) setIsOpen(false);
   };
-  useOnOutsideClick(closeMenu, {
+  echoUtils.useOnOutsideClick(closeMenu, {
     refs: [containerRef]
   });
   useKeyboardNavigation({
@@ -5527,13 +6042,13 @@ const FloatingSearchBar = ({
     closeMenu();
     onSuggestionClick(suggestion);
   }
-  return jsxs("form", {
+  return jsxRuntime.jsxs("form", {
     ref: containerRef,
     className: style$2.searchbarWrapper,
     onFocus: () => value && openMenu(),
     autoComplete: 'off',
     onSubmit: e => e.preventDefault(),
-    children: [jsx(Search, {
+    children: [jsxRuntime.jsx(edsCoreReact.Search, {
       id: 'search',
       "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Search',
       placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Search',
@@ -5549,17 +6064,17 @@ const FloatingSearchBar = ({
         if (val === '') closeMenu();else if (!isOpen) openMenu();
       },
       value: value
-    }), isOpen && jsxs("div", {
+    }), isOpen && jsxRuntime.jsxs("div", {
       className: style$2.items,
-      children: [isLoading && jsx("li", {
+      children: [isLoading && jsxRuntime.jsx("li", {
         className: style$2.loading,
         role: 'option',
         id: 'loading',
-        children: jsx(CircularProgress, {
+        children: jsxRuntime.jsx(edsCoreReact.CircularProgress, {
           size: 24,
           color: 'neutral'
         })
-      }, 'loading'), !isLoading && isOpen && suggestionGroups && suggestionGroups.length > 0 && jsx(SearchSuggestions, {
+      }, 'loading'), !isLoading && isOpen && suggestionGroups && suggestionGroups.length > 0 && jsxRuntime.jsx(SearchSuggestions, {
         suggestionGroups: suggestionGroups,
         containerRef: containerRef.current,
         onClick: onClick,
@@ -5590,16 +6105,16 @@ const ResponsiveSearchBar = _a => {
       isLoading
     } = _a,
     props = __rest(_a, ["ariaLabel", "placeholder", "onSearchQueryChange", "suggestionGroups", "onSuggestionClick", "isLoading"]);
-  const [isOpen, setIsOpen] = useState(false);
-  const [value, setValue] = useState('');
-  const containerRef = useRef(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [value, setValue] = React.useState('');
+  const containerRef = React.useRef(null);
   const openMenu = () => {
     setIsOpen(true);
   };
   const closeMenu = () => {
     if (isOpen) setIsOpen(false);
   };
-  useOnOutsideClick(closeMenu, {
+  echoUtils.useOnOutsideClick(closeMenu, {
     refs: [containerRef]
   });
   useKeyboardNavigation({
@@ -5616,14 +6131,14 @@ const ResponsiveSearchBar = _a => {
     onSearchQueryChange(val);
     if (val === '') closeMenu();else if (!isOpen) openMenu();
   }
-  return jsxs("form", Object.assign({
+  return jsxRuntime.jsxs("form", Object.assign({
     ref: containerRef,
     className: styles$c.searchbarWrapper,
     onFocus: () => value && openMenu(),
     autoComplete: 'off',
     onSubmit: e => e.preventDefault()
   }, props, {
-    children: [jsx(Search, {
+    children: [jsxRuntime.jsx(edsCoreReact.Search, {
       id: "responsiveSearch",
       "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Search',
       placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Search',
@@ -5632,15 +6147,15 @@ const ResponsiveSearchBar = _a => {
       className: styles$c.searchbar,
       onChange: onSearchValueChange,
       value: value
-    }), isOpen && jsxs("div", {
+    }), isOpen && jsxRuntime.jsxs("div", {
       className: styles$c.items,
-      children: [isLoading && jsx("li", {
+      children: [isLoading && jsxRuntime.jsx("li", {
         className: styles$c.loading,
         id: 'loading',
-        children: jsx(CircularProgress, {
+        children: jsxRuntime.jsx(edsCoreReact.CircularProgress, {
           size: 24
         })
-      }, 'loading'), !isLoading && isOpen && suggestionGroups && suggestionGroups.length > 0 && jsx(SearchSuggestions, {
+      }, 'loading'), !isLoading && isOpen && suggestionGroups && suggestionGroups.length > 0 && jsxRuntime.jsx(SearchSuggestions, {
         suggestionGroups: suggestionGroups,
         containerRef: containerRef.current,
         onClick: onClick,
@@ -5687,23 +6202,23 @@ const SidebarButton = ({
   id,
   children
 }) => {
-  return jsxs("button", {
+  return jsxRuntime.jsxs("button", {
     title: text,
     ref: refValue,
     type: "button",
     onClick: onClick,
     id: id,
     "aria-pressed": active,
-    className: classnames$1(styles$b.button, {
+    className: classnames__default["default"](styles$b.button, {
       [styles$b.leftBarButton]: buttonPosition === 'left',
       [styles$b.rightBarButton]: buttonPosition === 'right',
       [styles$b.bottomBarButton]: buttonPosition === 'bottom',
       [styles$b.tabButton]: buttonPosition === 'tab'
     }),
-    children: [children, count && count > 1 && jsx("span", {
+    children: [children, count && count > 1 && jsxRuntime.jsx("span", {
       className: styles$b.tabItemCount,
       children: count
-    }), jsx(Typography, {
+    }), jsxRuntime.jsx(edsCoreReact.Typography, {
       className: styles$b.text,
       children: text
     })]
@@ -5711,7 +6226,7 @@ const SidebarButton = ({
 };
 SidebarButton.defaultProps = {
   text: 'text',
-  children: jsx(Icon$1, {
+  children: jsxRuntime.jsx(edsCoreReact.Icon, {
     name: 'search',
     color: themeConst.echoText
   }),
@@ -5720,12 +6235,12 @@ SidebarButton.defaultProps = {
   buttonPosition: 'right'
 };
 
-var SideSheetOrientation;
+exports.SideSheetOrientation = void 0;
 (function (SideSheetOrientation) {
   SideSheetOrientation["Vertical"] = "vertical";
   SideSheetOrientation["Horizontal"] = "horizontal";
   SideSheetOrientation["Fullscreen"] = "fullscreen";
-})(SideSheetOrientation || (SideSheetOrientation = {}));
+})(exports.SideSheetOrientation || (exports.SideSheetOrientation = {}));
 
 var css_248z$c = ".Sheet-module_container__e8d9c{background-color:var(--white);bottom:0;display:flex;flex-direction:column;overflow:hidden;position:absolute;z-index:10}.Sheet-module_verticalContainer__pcU0W{box-shadow:0 3px 4px 0 rgba(0,0,0,.12),0 2px 4px 0 rgba(0,0,0,.14);top:0;width:480px}.Sheet-module_blockContainer__wrDIj{position:static}.Sheet-module_rightContainer__ASnit{right:0}.Sheet-module_leftContainer__LIFVE{left:0}.Sheet-module_horizontalContainer__Boq2T{box-shadow:3px 0 4px 0 rgba(0,0,0,.12),2px 0 4px 0 rgba(0,0,0,.14);height:min-content;left:0;max-height:720px;min-height:240px;position:absolute;right:0}.Sheet-module_fullscreenContainer__4SmfI{left:0;position:absolute;right:0;top:0}";
 var styles$a = {"container":"Sheet-module_container__e8d9c","verticalContainer":"Sheet-module_verticalContainer__pcU0W Sheet-module_container__e8d9c","blockContainer":"Sheet-module_blockContainer__wrDIj","rightContainer":"Sheet-module_rightContainer__ASnit Sheet-module_verticalContainer__pcU0W Sheet-module_container__e8d9c","leftContainer":"Sheet-module_leftContainer__LIFVE Sheet-module_verticalContainer__pcU0W Sheet-module_container__e8d9c","horizontalContainer":"Sheet-module_horizontalContainer__Boq2T Sheet-module_container__e8d9c","fullscreenContainer":"Sheet-module_fullscreenContainer__4SmfI Sheet-module_container__e8d9c"};
@@ -5734,11 +6249,11 @@ styleInject(css_248z$c);
 function GetSheetContainerClass(side, orientation, floating, isMobile) {
   if (isMobile) return styles$a.fullscreenContainer;
   switch (orientation) {
-    case SideSheetOrientation.Horizontal:
+    case exports.SideSheetOrientation.Horizontal:
       return styles$a.horizontalContainer;
-    case SideSheetOrientation.Fullscreen:
+    case exports.SideSheetOrientation.Fullscreen:
       return styles$a.fullscreenContainer;
-    case SideSheetOrientation.Vertical:
+    case exports.SideSheetOrientation.Vertical:
     default:
       {
         let className = side === 'left' ? styles$a.leftContainer : styles$a.rightContainer;
@@ -5759,11 +6274,11 @@ function Sheet({
   style
 }) {
   const isMobile = useIsMobile();
-  let containerClass = useMemo(() => GetSheetContainerClass(side, orientation, floating, isMobile), [side, orientation, floating, isMobile]);
+  let containerClass = React.useMemo(() => GetSheetContainerClass(side, orientation, floating, isMobile), [side, orientation, floating, isMobile]);
   if (className !== undefined) {
     containerClass += ' ' + className;
   }
-  return jsx("div", {
+  return jsxRuntime.jsx("div", {
     className: containerClass,
     style: style,
     children: children
@@ -5785,18 +6300,18 @@ function SheetTopArea({
   if (!previous && !renderOrientationActions && !closeSheet) {
     return null;
   }
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: styles$9.topArea,
-    children: [jsx("div", {
+    children: [jsxRuntime.jsx("div", {
       children: previous
-    }), renderOrientationActions && jsx(SheetOrientationActions, {
+    }), renderOrientationActions && jsxRuntime.jsx(SheetOrientationActions, {
       orientation: orientation,
       onOrientationChange: onOrientationChange
-    }), closeSheet && jsx(Button, {
+    }), closeSheet && jsxRuntime.jsx(edsCoreReact.Button, {
       variant: "ghost_icon",
       onClick: closeSheet,
       "aria-label": "Close",
-      children: jsx(Icon$1, {
+      children: jsxRuntime.jsx(edsCoreReact.Icon, {
         name: "close",
         color: "var(--asBuilt)"
       })
@@ -5815,34 +6330,34 @@ function SheetOrientationActions({
       onOrientationChange && onOrientationChange(newOrientation);
     }
   }
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: styles$9.actions,
-    children: [jsx(Typography, {
+    children: [jsxRuntime.jsx(edsCoreReact.Typography, {
       variant: "overline",
       children: "ViewPort:"
-    }), jsx(Button, {
+    }), jsxRuntime.jsx(edsCoreReact.Button, {
       variant: "ghost_icon",
-      onClick: () => handleChange(SideSheetOrientation.Vertical),
+      onClick: () => handleChange(exports.SideSheetOrientation.Vertical),
       "aria-label": "Set sheet orientation Vertical",
-      children: jsx(Icon$1, {
+      children: jsxRuntime.jsx(edsCoreReact.Icon, {
         name: "sheet_leftposition",
-        color: calculateColor(SideSheetOrientation.Vertical)
+        color: calculateColor(exports.SideSheetOrientation.Vertical)
       })
-    }), jsx(Button, {
+    }), jsxRuntime.jsx(edsCoreReact.Button, {
       variant: "ghost_icon",
-      onClick: () => handleChange(SideSheetOrientation.Horizontal),
+      onClick: () => handleChange(exports.SideSheetOrientation.Horizontal),
       "aria-label": "Set sheet orientation Horizontal",
-      children: jsx(Icon$1, {
+      children: jsxRuntime.jsx(edsCoreReact.Icon, {
         name: "sheet_bottom_position",
-        color: calculateColor(SideSheetOrientation.Horizontal)
+        color: calculateColor(exports.SideSheetOrientation.Horizontal)
       })
-    }), jsx(Button, {
+    }), jsxRuntime.jsx(edsCoreReact.Button, {
       variant: "ghost_icon",
-      onClick: () => handleChange(SideSheetOrientation.Fullscreen),
+      onClick: () => handleChange(exports.SideSheetOrientation.Fullscreen),
       "aria-label": "Set sheet orientation Fullscreen",
-      children: jsx(Icon$1, {
+      children: jsxRuntime.jsx(edsCoreReact.Icon, {
         name: "fullscreen",
-        color: calculateColor(SideSheetOrientation.Fullscreen)
+        color: calculateColor(exports.SideSheetOrientation.Fullscreen)
       })
     })]
   });
@@ -5864,13 +6379,13 @@ function SideSheet(_a) {
     // TOP BAR
     topBarProps = __rest(_a, ["open", "side", "orientation", "floating", "children", "className", "style"]);
   if (open) {
-    return jsxs(Sheet, {
+    return jsxRuntime.jsxs(Sheet, {
       className: className,
       style: style,
       orientation: orientation,
       side: side,
       floating: floating,
-      children: [jsx(SheetTopArea, Object.assign({
+      children: [jsxRuntime.jsx(SheetTopArea, Object.assign({
         orientation: orientation
       }, topBarProps)), children]
     });
@@ -5889,25 +6404,25 @@ function Left({
   defaultMinimized = false,
   children
 }) {
-  const [isMinimized, setIsMinimized] = useState(defaultMinimized || false);
+  const [isMinimized, setIsMinimized] = React.useState(defaultMinimized || false);
   const containerClassName = classnames(styles$8.left, {
     [styles$8.collapsedLeft]: isMinimized
   }, className);
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: containerClassName,
     style: style,
-    children: [!isMinimized && children, isMinimizable && jsx("div", {
+    children: [!isMinimized && children, isMinimizable && jsxRuntime.jsx("div", {
       className: styles$8.minimize,
-      children: isMinimized ? jsx(Button, {
+      children: isMinimized ? jsxRuntime.jsx(edsCoreReact.Button, {
         variant: "ghost_icon",
         onClick: () => setIsMinimized(false),
-        children: jsx(Icon$1, {
+        children: jsxRuntime.jsx(edsCoreReact.Icon, {
           name: "last_page"
         })
-      }) : jsxs(Button, {
+      }) : jsxRuntime.jsxs(edsCoreReact.Button, {
         variant: "ghost",
         onClick: () => setIsMinimized(true),
-        children: ["Minimize ", jsx(Icon$1, {
+        children: ["Minimize ", jsxRuntime.jsx(edsCoreReact.Icon, {
           name: "first_page"
         }), ' ']
       })
@@ -5925,7 +6440,7 @@ function SplitView$1({
   children
 }) {
   const containerClass = classnames(styles$7.container, className);
-  return jsx("div", {
+  return jsxRuntime.jsx("div", {
     className: containerClass,
     style: style,
     children: children
@@ -5937,7 +6452,7 @@ function Right({
   children
 }) {
   const containerClass = classnames(styles$7.right, className);
-  return jsx("div", {
+  return jsxRuntime.jsx("div", {
     className: containerClass,
     style: style,
     children: children
@@ -5960,23 +6475,23 @@ const TimePicker = ({
   readOnly: _readOnly = false,
   timeRange
 }) => {
-  const ref = /*#__PURE__*/React__default.createRef();
-  const [selectedTime, setSelectedTime] = useState(_value);
-  const openDropDown = useCallback(() => {
+  const ref = /*#__PURE__*/React__default["default"].createRef();
+  const [selectedTime, setSelectedTime] = React.useState(_value);
+  const openDropDown = React.useCallback(() => {
     var _a, _b;
     (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
   }, [ref]);
   const defaultTimeRange = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     id: id,
     className: style$1.timeContainer,
-    children: [jsx(Icon$1, {
+    children: [jsxRuntime.jsx(edsCoreReact.Icon, {
       name: "time",
       className: `${style$1.timeIcon} time-icon`,
-      data: time,
+      data: edsIcons.time,
       size: 24,
       onClick: openDropDown
-    }), jsx(Autocomplete, {
+    }), jsxRuntime.jsx(edsCoreReact.Autocomplete, {
       ref: ref,
       className: style$1.timeSelect,
       label: label,
@@ -6093,12 +6608,12 @@ styleInject(css_248z$7);
 function WorkOrderStatusLabel({
   isActive
 }) {
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: styles$6.workorderStatusContainer,
     role: "status",
-    children: [jsx("span", {
+    children: [jsxRuntime.jsx("span", {
       className: isActive ? styles$6.activeIndicator : styles$6.completedIndicator
-    }), jsx(Typography, {
+    }), jsxRuntime.jsx(edsCoreReact.Typography, {
       variant: 'chart',
       group: 'ui',
       className: styles$6.workorderstatusText,
@@ -6122,9 +6637,9 @@ function WorkOrderListItem(props) {
   const displayHeaderDate = () => {
     var _a, _b;
     if (((_a = wo.orderType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'PM01') {
-      return jsxs("time", {
+      return jsxRuntime.jsxs("time", {
         dateTime: getFullLocaledDatetime(wo.requiredEndDateTime),
-        children: ["Req. end date:", ' ', jsx("span", {
+        children: ["Req. end date:", ' ', jsxRuntime.jsx("span", {
           style: {
             background: requiredEndDateColor.background,
             color: requiredEndDateColor.color
@@ -6135,9 +6650,9 @@ function WorkOrderListItem(props) {
       });
     }
     if (((_b = wo.orderType) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'PM02') {
-      return jsxs("time", {
+      return jsxRuntime.jsxs("time", {
         dateTime: getFullLocaledDatetime(wo.maintenancePlanDate),
-        children: ["Planned date:", ' ', jsx("span", {
+        children: ["Planned date:", ' ', jsxRuntime.jsx("span", {
           style: {
             background: requiredEndDateColor.background,
             color: requiredEndDateColor.color
@@ -6149,41 +6664,41 @@ function WorkOrderListItem(props) {
     }
     return null;
   };
-  return jsx(ListItem, {
+  return jsxRuntime.jsx(ListItem, {
     className: styles$6.container,
     onCardClick: props.isHeader ? undefined : props.onCardClick,
-    primary: jsxs("div", {
+    primary: jsxRuntime.jsxs("div", {
       className: styles$6.primary,
-      children: [jsx(Typography, {
+      children: [jsxRuntime.jsx(edsCoreReact.Typography, {
         className: styles$6.workorderId,
         variant: 'h6',
         children: wo.id.substring(4)
-      }), jsx(WorkOrderStatusLabel, {
+      }), jsxRuntime.jsx(WorkOrderStatusLabel, {
         isActive: wo.isActive
       })]
     }),
-    secondary: jsx(Typography, {
+    secondary: jsxRuntime.jsx(edsCoreReact.Typography, {
       variant: 'caption',
       className: styles$6.secondaryText,
       children: wo.description
     }),
-    tertiary: jsxs(Fragment, {
-      children: [jsxs(Typography, {
+    tertiary: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsxs(edsCoreReact.Typography, {
         variant: "meta",
         className: styles$6.tertiary,
-        children: [wo.planningPlant, jsx("span", {
+        children: [wo.planningPlant, jsxRuntime.jsx("span", {
           "aria-orientation": "vertical",
           className: styles$6.divider
         }), wo.workCenterId]
-      }), showDate && jsx(Typography, {
+      }), showDate && jsxRuntime.jsx(edsCoreReact.Typography, {
         variant: "meta",
         className: styles$6.tertiary,
         children: displayHeaderDate()
       })]
     }),
-    visual: jsx("div", {
+    visual: jsxRuntime.jsx("div", {
       className: wo.isActive ? styles$6.visualActive : styles$6.visualCompleted,
-      children: jsx(Icon$1, {
+      children: jsxRuntime.jsx(edsCoreReact.Icon, {
         name: setWorkOrderIconName(wo.orderType),
         color: "black"
       })
@@ -6209,13 +6724,13 @@ const DraggableItemsWrapper = ({
   onChange,
   children
 }) => {
-  const [dragItems, setDragItems] = useState(children.map((element, id) => {
+  const [dragItems, setDragItems] = React.useState(children.map((element, id) => {
     return {
       id,
       element
     };
   }));
-  useEffect(() => {
+  React.useEffect(() => {
     setDragItems(children.map((element, id) => {
       return {
         id,
@@ -6223,9 +6738,9 @@ const DraggableItemsWrapper = ({
       };
     }));
   }, [children]);
-  return jsx("div", {
+  return jsxRuntime.jsx("div", {
     style: style,
-    children: dragItems.length > 0 && jsx(ReactSortable, {
+    children: dragItems.length > 0 && jsxRuntime.jsx(reactSortablejs.ReactSortable, {
       animation: 200,
       handle: `.${DraggableHandleSelector}`,
       list: dragItems,
@@ -6233,7 +6748,7 @@ const DraggableItemsWrapper = ({
         onChange(dragItems, evt.oldIndex, evt.newIndex);
       },
       setList: setDragItems,
-      children: dragItems.map(dragItem => jsx("div", {
+      children: dragItems.map(dragItem => jsxRuntime.jsx("div", {
         className: DraggableHandleSelector,
         children: dragItem.element
       }, dragItem.id))
@@ -6262,16 +6777,16 @@ const RadioButtonGroup = ({
   style,
   onSelected
 }) => {
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     style: style,
-    children: [jsx(Typography, {
+    children: [jsxRuntime.jsx(edsCoreReact.Typography, {
       variant: "body_short",
       className: styles$5.header,
       children: title
-    }), jsx("div", {
+    }), jsxRuntime.jsx("div", {
       className: styles$5.buttonWrapper,
       children: options.map((option, index) => {
-        return jsx(Radio, {
+        return jsxRuntime.jsx(edsCoreReact.Radio, {
           label: option.title,
           checked: option.isChecked,
           onChange: () => {
@@ -6287,11 +6802,11 @@ var css_248z$5 = ".roundIconButton-module_pageMenuButton__KZlt4{background:#fff;
 var style = {"pageMenuButton":"roundIconButton-module_pageMenuButton__KZlt4","toggleButton":"roundIconButton-module_toggleButton__MOztz","activeButton":"roundIconButton-module_activeButton__4dLNN"};
 styleInject(css_248z$5);
 
-var RoundIconButtonVariants;
+exports.RoundIconButtonVariants = void 0;
 (function (RoundIconButtonVariants) {
   RoundIconButtonVariants["OpenCloseButton"] = "openCloseButton";
   RoundIconButtonVariants["ToggleButton"] = "toggleButton";
-})(RoundIconButtonVariants || (RoundIconButtonVariants = {}));
+})(exports.RoundIconButtonVariants || (exports.RoundIconButtonVariants = {}));
 const RoundIconButton = ({
   onClick,
   label,
@@ -6299,11 +6814,11 @@ const RoundIconButton = ({
   variant,
   active
 }) => {
-  const isToggleVariant = variant === RoundIconButtonVariants.ToggleButton;
+  const isToggleVariant = variant === exports.RoundIconButtonVariants.ToggleButton;
   const mutateIcon = buttonVariant => {
     switch (buttonVariant) {
-      case RoundIconButtonVariants.OpenCloseButton:
-        return active ? jsx(Icon$1, {
+      case exports.RoundIconButtonVariants.OpenCloseButton:
+        return active ? jsxRuntime.jsx(edsCoreReact.Icon, {
           color: themeConst.white,
           name: 'close'
         }) : children;
@@ -6311,7 +6826,7 @@ const RoundIconButton = ({
         return children;
     }
   };
-  return jsx("button", {
+  return jsxRuntime.jsx("button", {
     className: `${style.pageMenuButton} ${isToggleVariant ? style.toggleButton : ''} ${active ? style.activeButton : ''}`,
     onClick: onClick,
     title: label,
@@ -6349,15 +6864,15 @@ const SliderField = ({
   const outputFunctionForLabels = (currentValue, labelsAsParam) => {
     return labelsAsParam[currentValue];
   };
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: styles$4.sliderField,
     style: style,
-    children: [jsx(Typography, {
+    children: [jsxRuntime.jsx(edsCoreReact.Typography, {
       variant: "body_short",
       children: title
-    }), jsx("div", {
+    }), jsxRuntime.jsx("div", {
       className: styles$4.sliderWrapper,
-      children: !labels || labels && labels.length === 0 ? jsx(Slider, {
+      children: !labels || labels && labels.length === 0 ? jsxRuntime.jsx(edsCoreReact.Slider, {
         value: value,
         min: min,
         max: max,
@@ -6365,7 +6880,7 @@ const SliderField = ({
         onChange: (e, newValue) => {
           onChange(newValue);
         }
-      }) : jsx(Slider, {
+      }) : jsxRuntime.jsx(edsCoreReact.Slider, {
         value: value,
         min: 0,
         max: labels.length - 1,
@@ -6401,16 +6916,16 @@ const TextIconButton = ({
   style
 }) => {
   const CustomIcon = icon;
-  return jsxs("button", {
+  return jsxRuntime.jsxs("button", {
     className: styles$3.button,
     onClick: onClick,
     style: style,
-    children: [typeof icon == 'string' ? jsx(Icon, {
+    children: [typeof icon == 'string' ? jsxRuntime.jsx(Icon, {
       name: icon,
       title: title,
       color: themeConst.asBuilt,
       size: 40
-    }) : jsx(CustomIcon, {}), jsx(Typography, {
+    }) : jsxRuntime.jsx(CustomIcon, {}), jsxRuntime.jsx(edsCoreReact.Typography, {
       className: styles$3.text,
       color: themeConst.asBuilt,
       children: title
@@ -6644,7 +7159,7 @@ var echoIcons = /*#__PURE__*/Object.freeze({
   distance_circle: distance_circle
 });
 
-Icon$1.add(Object.assign(Object.assign({}, edsIcons), echoIcons));
+edsCoreReact.Icon.add(Object.assign(Object.assign({}, edsIcons__namespace), echoIcons));
 
 /**
  * Helper method that will return a list row given some input values. Used in IconList component for rendering rows
@@ -6657,7 +7172,7 @@ Icon$1.add(Object.assign(Object.assign({}, edsIcons), echoIcons));
  * @return {*}  {React.ReactNode} A list row component created from the input parameters
  */
 const createListRow = (isDraggable, index, iconListState, setIconListState, expandedIcons) => {
-  return jsx(ListRow, {
+  return jsxRuntime.jsx(ListRow, {
     isDraggable: isDraggable,
     item: iconListState.orderedItems[index],
     expandable: expandedIcons ? {
@@ -6710,12 +7225,12 @@ const IconList = ({
   expandedIcons,
   onUpdatedOrder
 }) => {
-  const [iconListState, setIconListState] = useState({
+  const [iconListState, setIconListState] = React.useState({
     orderedItems: items,
     expandedIndex: -1
   });
-  const [rowElements, setRowElements] = useState(iconListState.orderedItems.map((_, index) => createListRow(isDraggable, index, iconListState, setIconListState, expandedIcons)));
-  useEffect(() => {
+  const [rowElements, setRowElements] = React.useState(iconListState.orderedItems.map((_, index) => createListRow(isDraggable, index, iconListState, setIconListState, expandedIcons)));
+  React.useEffect(() => {
     setIconListState({
       orderedItems: items,
       expandedIndex: -1
@@ -6735,31 +7250,31 @@ const IconList = ({
     });
     onUpdatedOrder(updatedOrder);
   };
-  const createRows = useCallback(() => {
+  const createRows = React.useCallback(() => {
     setRowElements(iconListState.orderedItems.map((_, index) => createListRow(isDraggable, index, iconListState, setIconListState, expandedIcons)));
   }, [iconListState, isDraggable, expandedIcons]);
-  useEffect(() => {
+  React.useEffect(() => {
     createRows();
   }, [items, createRows]);
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: styles$2.wrapper,
     style: style,
-    children: [jsx("div", {
+    children: [jsxRuntime.jsx("div", {
       className: styles$2.header,
-      children: jsx(Typography, {
+      children: jsxRuntime.jsx(edsCoreReact.Typography, {
         group: "table",
         variant: "cell_text",
         bold: true,
         children: title
       })
-    }), isDraggable ? jsx(DraggableItemsWrapper, {
+    }), isDraggable ? jsxRuntime.jsx(DraggableItemsWrapper, {
       style: style,
       onChange: newDragItems => {
         setRowElements(newDragItems.map(d => d.element));
         reorderOnChange(newDragItems);
       },
       children: rowElements
-    }) : jsx("div", {
+    }) : jsxRuntime.jsx("div", {
       style: style,
       children: rowElements
     })]
@@ -6793,67 +7308,67 @@ const LinkCard = ({
   subTitle,
   links
 }) => {
-  const titleRef = /*#__PURE__*/React__default.createRef();
-  const subTitleRef = /*#__PURE__*/React__default.createRef();
-  const [showTitleToolTip, setShowTitleToolTip] = useState(false);
-  const [showSubTitleToolTip, setShowSubTitleToolTip] = useState(false);
-  useEffect(() => {
+  const titleRef = /*#__PURE__*/React__default["default"].createRef();
+  const subTitleRef = /*#__PURE__*/React__default["default"].createRef();
+  const [showTitleToolTip, setShowTitleToolTip] = React.useState(false);
+  const [showSubTitleToolTip, setShowSubTitleToolTip] = React.useState(false);
+  React.useEffect(() => {
     if (titleRef.current && titleRef.current.scrollHeight > 46) {
       setShowTitleToolTip(true);
     }
   }, [titleRef]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (subTitleRef.current && subTitleRef.current.scrollHeight > 46) {
       setShowSubTitleToolTip(true);
     }
   }, [subTitleRef]);
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: styles$1.wrapper,
     style: style,
-    children: [jsx("div", {
+    children: [jsxRuntime.jsx("div", {
       className: styles$1.image,
       style: {
         backgroundImage: `url(${image})`
       }
-    }), jsxs("div", {
+    }), jsxRuntime.jsxs("div", {
       className: styles$1.header,
-      children: [showTitleToolTip ? jsx(Tooltip$1, {
+      children: [showTitleToolTip ? jsxRuntime.jsx(edsCoreReact.Tooltip, {
         placement: "bottom-start",
         title: title,
-        children: jsx(Typography, {
+        children: jsxRuntime.jsx(edsCoreReact.Typography, {
           variant: "h3",
           className: styles$1.title,
           ref: titleRef,
           children: title
         })
-      }) : jsx(Typography, {
+      }) : jsxRuntime.jsx(edsCoreReact.Typography, {
         className: styles$1.title,
         variant: "h3",
         ref: titleRef,
         children: title
-      }), showSubTitleToolTip ? jsx(Tooltip$1, {
+      }), showSubTitleToolTip ? jsxRuntime.jsx(edsCoreReact.Tooltip, {
         placement: "bottom-start",
         title: subTitle,
-        children: jsx(Typography, {
+        children: jsxRuntime.jsx(edsCoreReact.Typography, {
           className: styles$1.subTitle,
           variant: "h3",
           ref: subTitleRef,
           children: subTitle
         })
-      }) : jsx(Typography, {
+      }) : jsxRuntime.jsx(edsCoreReact.Typography, {
         className: styles$1.subTitle,
         variant: "h3",
         ref: subTitleRef,
         children: subTitle
       })]
-    }), jsx("div", {
+    }), jsxRuntime.jsx("div", {
       className: styles$1.links,
       children: links.map((link, index) => {
         var _a;
-        return jsx("a", {
+        return jsxRuntime.jsx("a", {
           href: link.url,
           target: (_a = link.target) !== null && _a !== void 0 ? _a : '_self',
-          children: jsx(Typography, {
+          children: jsxRuntime.jsx(edsCoreReact.Typography, {
             className: styles$1.link,
             variant: "body_short",
             children: link.title
@@ -6889,13 +7404,13 @@ const OptionsList = ({
   titles,
   columns
 }) => {
-  return jsxs("div", {
+  return jsxRuntime.jsxs("div", {
     className: styles.wrapper,
     style: style,
-    children: [jsx("div", {
+    children: [jsxRuntime.jsx("div", {
       className: styles.head,
       children: titles.map((title, index) => {
-        return jsx(Typography, {
+        return jsxRuntime.jsx(edsCoreReact.Typography, {
           group: "table",
           variant: "cell_text",
           bold: true,
@@ -6904,21 +7419,21 @@ const OptionsList = ({
         }, index);
       })
     }), items.map((item, rowIndex) => {
-      return jsxs("div", {
+      return jsxRuntime.jsxs("div", {
         className: styles.row,
-        children: [jsxs("div", {
+        children: [jsxRuntime.jsxs("div", {
           className: styles.item,
-          children: [item.color && jsx("div", {
+          children: [item.color && jsxRuntime.jsx("div", {
             className: styles.circle,
             style: {
               backgroundColor: item.color
             }
-          }), jsx(Typography, {
+          }), jsxRuntime.jsx(edsCoreReact.Typography, {
             className: styles.itemTitle,
             children: item.title
           })]
         }), createNumberArray(columns).map(columnIndex => {
-          return jsx(Radio, {
+          return jsxRuntime.jsx(edsCoreReact.Radio, {
             title: item.title,
             className: styles.radio,
             label: '',
@@ -6945,4 +7460,93 @@ function createNumberArray(N) {
   return numberArray;
 }
 
-export { BlackLink, ButtonWithPopover, ContextMenu, CopyToClipboard, DataInfoButton, DialogGenerator, DraggableItemsWrapper, Dropdown, EchoBottomBar, EchoCard, EchoHeader, EchoTooltip, FloatingActionButton, FloatingSearchBar, Icon, IconList, InlineTagIconLink, LayerLegend, LineChart, LinkCard, ListItem, ListRow, MainLegend, MenuButton, OptionsList, PCMatrix, Panel, PanelContent, PanelContentWrapper, PanelWrapper, RadioButtonGroup, ReactDatePicker, ResponsiveSearchBar, RoundIconButton, RoundIconButtonVariants, SideSheet, SideSheetOrientation, SidebarButton, SliderField, SplitView, TagCategoryIcon, TagCategoryType, TagContextMenu, TagIcon, TagIconShadowWrapper, TextIconButton, TimePicker, WorkOrderListItem, classnames, dateToStringOrEmpty, distance_circle, echoIcons, getIcon, map_legend_info, measuring_point, notifications_m1, notifications_m2, notifications_m3, notifications_m4, notifications_m5, notifications_m6, notifications_m9, notifications_main_group, polygon, polygon_symbol, polyline, polyrectangle, punches_main_group, punches_pa, punches_pb, robim_external_ald, robim_external_iwit, robim_external_methane_sensor, robim_external_satellite, robim_external_timp, robim_external_timp_text, setRequiredEndDateColor, setWorkOrderIconName, themeConst, useIsMobile, useKeyboardNavigation, usePanelStore, useSearchBarSectionNavigator, workorders_main_group, workorders_pm01, workorders_pm02, workorders_pm03, workorders_pm04, workorders_pm05, workorders_pm06, workorders_pm10, workorders_pm15, workorders_pm20 };
+exports.BlackLink = BlackLink;
+exports.ButtonWithPopover = ButtonWithPopover;
+exports.ContextMenu = ContextMenu;
+exports.CopyToClipboard = CopyToClipboard;
+exports.DataInfoButton = DataInfoButton;
+exports.DialogGenerator = DialogGenerator;
+exports.DraggableItemsWrapper = DraggableItemsWrapper;
+exports.Dropdown = Dropdown;
+exports.EchoBottomBar = EchoBottomBar;
+exports.EchoCard = EchoCard;
+exports.EchoHeader = EchoHeader;
+exports.EchoTooltip = EchoTooltip;
+exports.FloatingActionButton = FloatingActionButton;
+exports.FloatingSearchBar = FloatingSearchBar;
+exports.Icon = Icon;
+exports.IconList = IconList;
+exports.InlineTagIconLink = InlineTagIconLink;
+exports.LayerLegend = LayerLegend;
+exports.LineChart = LineChart;
+exports.LinkCard = LinkCard;
+exports.ListItem = ListItem;
+exports.ListRow = ListRow;
+exports.MainLegend = MainLegend;
+exports.MenuButton = MenuButton;
+exports.OptionsList = OptionsList;
+exports.PCMatrix = PCMatrix;
+exports.Panel = Panel;
+exports.PanelContent = PanelContent;
+exports.PanelContentWrapper = PanelContentWrapper;
+exports.PanelWrapper = PanelWrapper;
+exports.RadioButtonGroup = RadioButtonGroup;
+exports.ReactDatePicker = ReactDatePicker;
+exports.ResponsiveSearchBar = ResponsiveSearchBar;
+exports.RoundIconButton = RoundIconButton;
+exports.SideSheet = SideSheet;
+exports.SidebarButton = SidebarButton;
+exports.SliderField = SliderField;
+exports.SplitView = SplitView;
+exports.TagCategoryIcon = TagCategoryIcon;
+exports.TagContextMenu = TagContextMenu;
+exports.TagIcon = TagIcon;
+exports.TagIconShadowWrapper = TagIconShadowWrapper;
+exports.TextIconButton = TextIconButton;
+exports.TimePicker = TimePicker;
+exports.WorkOrderListItem = WorkOrderListItem;
+exports.classnames = classnames;
+exports.dateToStringOrEmpty = dateToStringOrEmpty;
+exports.distance_circle = distance_circle;
+exports.echoIcons = echoIcons;
+exports.getIcon = getIcon;
+exports.map_legend_info = map_legend_info;
+exports.measuring_point = measuring_point;
+exports.notifications_m1 = notifications_m1;
+exports.notifications_m2 = notifications_m2;
+exports.notifications_m3 = notifications_m3;
+exports.notifications_m4 = notifications_m4;
+exports.notifications_m5 = notifications_m5;
+exports.notifications_m6 = notifications_m6;
+exports.notifications_m9 = notifications_m9;
+exports.notifications_main_group = notifications_main_group;
+exports.polygon = polygon;
+exports.polygon_symbol = polygon_symbol;
+exports.polyline = polyline;
+exports.polyrectangle = polyrectangle;
+exports.punches_main_group = punches_main_group;
+exports.punches_pa = punches_pa;
+exports.punches_pb = punches_pb;
+exports.robim_external_ald = robim_external_ald;
+exports.robim_external_iwit = robim_external_iwit;
+exports.robim_external_methane_sensor = robim_external_methane_sensor;
+exports.robim_external_satellite = robim_external_satellite;
+exports.robim_external_timp = robim_external_timp;
+exports.robim_external_timp_text = robim_external_timp_text;
+exports.setRequiredEndDateColor = setRequiredEndDateColor;
+exports.setWorkOrderIconName = setWorkOrderIconName;
+exports.themeConst = themeConst;
+exports.useIsMobile = useIsMobile;
+exports.useKeyboardNavigation = useKeyboardNavigation;
+exports.usePanelStore = usePanelStore;
+exports.useSearchBarSectionNavigator = useSearchBarSectionNavigator;
+exports.workorders_main_group = workorders_main_group;
+exports.workorders_pm01 = workorders_pm01;
+exports.workorders_pm02 = workorders_pm02;
+exports.workorders_pm03 = workorders_pm03;
+exports.workorders_pm04 = workorders_pm04;
+exports.workorders_pm05 = workorders_pm05;
+exports.workorders_pm06 = workorders_pm06;
+exports.workorders_pm10 = workorders_pm10;
+exports.workorders_pm15 = workorders_pm15;
+exports.workorders_pm20 = workorders_pm20;