@equinor/echo-components 0.5.17 → 0.5.19-rc1

package/dist/index.js

@@ -1,6 +1,6 @@
 import { Icon as Icon$1, Button, DotProgress, Banner, CircularProgress, Typography, Dialog, Search, Radio, Slider, Menu, Autocomplete, Tooltip as Tooltip$1 } from '@equinor/eds-core-react';
 import * as React from 'react';
-import React__default, { useState, useEffect, useCallback, createElement, PureComponent, useRef, useLayoutEffect, useMemo, createContext, useContext, forwardRef, isValidElement, cloneElement } from 'react';
+import React__default, { useState, useEffect, useCallback, createElement, PureComponent, useRef, useLayoutEffect, useMemo, createContext, useContext, forwardRef, isValidElement, cloneElement, useDebugValue } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { createPortal } from 'react-dom';
 import * as edsIcons from '@equinor/eds-icons';
@@ -37,16 +37,16 @@ function styleInject(css, ref) {
 var css_248z$B = ":root{--xSmall:0.25rem;--small:0.5rem;--medium:1rem;--large:1.5rem;--xLarge:2rem;--black:#000;--white:#fff;--equiBlue1:#233746;--equiBlue2:#d7e1ed;--equiBlue3:#d5eaf4;--equiGray1:#87929a;--equiGray2:#b4bbc0;--equiGray3:#d1d5d8;--equiGray4:#e3e6e8;--equiGray5:#f7f7f7;--equiRed1:#ff1243;--darkEquiRed:#ce183e;--equiGreen1:#006f79;--equiGreen2:#deedee;--equiGreen3:#e6faec;--equiGreen4:#c3f3d2;--echoText:#3d3d3d;--disabledBackgroundColor:#eaeaea;--disabledColor:#6f6f6f;--pm01:#0f0;--pm02:#ff1493;--pm03:#0ff;--pm04:#9400d3;--pm05:#1e90ff;--pm06:#ffdead;--pm010:#ff4500;--pm015:#228b22;--pm020:#00008b;--onGoing:#fbca36;--done:#4bb748;--asBuilt:#007079;--planned:#4bb748;--future:#52c0ff;--historic:#ff7d98;--outOfService:#ff9200;--reserved:#243746;--voided:#eb0000;--default:#dcdcdc;--ok:#23ef2a;--os:#adaead;--pa:#f94693;--pb:#fd0;--unknown:#525252;--rfccSent:#bcf316;--rfccPartly:#c7f316;--rfcc:#60f316;--rfocSent:#0dccf2;--rfocPartly:#1accf2;--rfoc:#0d59f2;--rfccRejected:#ff1243;--rfocRejected:#ff1243;--handoverError:#eb0000;--priorityHigh:#ff1243;--priorityMedium:#fbca36;--systems:#d5eaf4;--locations:#3eb54a;--ofpDark:#f4d6a2;--ofpLight:#faebce;--warningText:#ad6200;--warningIcon:#ff9200;--warningBackground:#ffe7d6;--dropDownButtonBackground:#f0f0f0;--dropDownTextColor:grey;--searchBarBackground:#f7f7f7;--highSeverity:#ffc1c1;--mediumSeverity:#ffe7d6;--lowSeverity:#dce6ee;--defaultSeverity:#d5eaf4;--highSeverityText:#eb0000;--mediumSeverityText:#52c0ff;--lowSeverityText:#4bb748;--defaultSeverityText:#3d3d3d;--toggleActive:#4bb748;--toggleInactive:#b30d2f;--hoverIcon:#004f55;--hoverIconWithNotification:#b30d2f;--tertiaryText:#6f6f6f}#root,body,html{height:100%;overflow:hidden;width:100%}html[data-theme=dark]{--equiGreen1:#006f79}body,h1,h2,h3,h4,h5,h6,label,p{color:var(--echoText)}body,html,span{font-family:Equinor!important}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#f7f7f7;border-radius:5px}::-webkit-scrollbar-thumb{background:#007079;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#004f55}button,input{appearance:none;background:transparent;border:inherit;color:inherit;font:inherit;outline:0}input,input:after,input:before{-webkit-user-select:initial;-khtml-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:auto}";
 styleInject(css_248z$B);
 
-/**
- * Component that work's as a eds icon wrapper, it imports all eds possible icons
- *
- * @param {IconProps} {
- *  name: The name of the icon to be displayed
- *  title: The html title to use
- *  color:The color to icon should have
- *  size: The wanted size of the icon. Possible values are 16, 24, 32, 40 and 48
- * }
- * @return {*} {JSX.Element} A icon for the provided information
+/**
+ * Component that work's as a eds icon wrapper, it imports all eds possible icons
+ *
+ * @param {IconProps} {
+ *  name: The name of the icon to be displayed
+ *  title: The html title to use
+ *  color:The color to icon should have
+ *  size: The wanted size of the icon. Possible values are 16, 24, 32, 40 and 48
+ * }
+ * @return {*} {JSX.Element} A icon for the provided information
  */
 var Icon = function Icon(_ref) {
   var name = _ref.name,
@@ -358,17 +358,17 @@ var css_248z$A = ".dataInfoButton-module_button__N4F5j{background-color:var(--wh
 var style$a = {"button":"dataInfoButton-module_button__N4F5j","buttonWithBadge":"dataInfoButton-module_buttonWithBadge__Qjm3a"};
 styleInject(css_248z$A);
 
-/**
- * Component that renders a data information button with a badge to indicate the number of items under that scoped type
- *
- * @param {DataInfoButtonProps} { data } Contains data information related to how the button should be rendered
- * numberOfItems: If number is 1 or less no badge will be displayed on the button. If number is over 99,
- * then the text 99+ will be displayed. Otherwise the provided number will be displayed
- * label: The name of the data type, will be displayed on the button
- * ariaLabel: The aria label set on the button, if empty the label will be used
- * onTagInfoClicked: The method to be called when button is pressed
- * itemButtonClassName: Used to style button if default styling is not wanted. class name might need higher precedence for overriding existing styling e.g. "div.itemButtonClassName { background-color: blue !important}"
- * @return {*}  {JSX.Element} Data information button with or without a badge based on the provided data object
+/**
+ * Component that renders a data information button with a badge to indicate the number of items under that scoped type
+ *
+ * @param {DataInfoButtonProps} { data } Contains data information related to how the button should be rendered
+ * numberOfItems: If number is 1 or less no badge will be displayed on the button. If number is over 99,
+ * then the text 99+ will be displayed. Otherwise the provided number will be displayed
+ * label: The name of the data type, will be displayed on the button
+ * ariaLabel: The aria label set on the button, if empty the label will be used
+ * onTagInfoClicked: The method to be called when button is pressed
+ * itemButtonClassName: Used to style button if default styling is not wanted. class name might need higher precedence for overriding existing styling e.g. "div.itemButtonClassName { background-color: blue !important}"
+ * @return {*}  {JSX.Element} Data information button with or without a badge based on the provided data object
  */
 var DataInfoButton = function DataInfoButton(_ref) {
   var data = _ref.data;
@@ -386,15 +386,15 @@ var css_248z$z = ".dataInfoPopover-module_wrapper__l8JCd{display:flex;flex-direc
 var style$9 = {"wrapper":"dataInfoPopover-module_wrapper__l8JCd","arrow":"dataInfoPopover-module_arrow__KXQ5a","optionsPopover":"dataInfoPopover-module_optionsPopover__ZPXbv","groupWrapper":"dataInfoPopover-module_groupWrapper__InWuY","banner":"dataInfoPopover-module_banner__QtiKf","infoMessage":"dataInfoPopover-module_infoMessage__lqzTe"};
 styleInject(css_248z$z);
 
-/**
- * Component that renders a popover with data information buttons
- *
- * @param {DataInfoPopoverProps} {
- *  dataToShow: list of DataInformation objects to be displayed.
- *  The itemType in these objects are used to group them together in the popover
- *  isLoading: loading flag that tells if a dot progress should be displayed if data is being fetched
- * }
- * @return {*} {JSX.Element} Popover with data information buttons based on the provided DataInformation objects
+/**
+ * Component that renders a popover with data information buttons
+ *
+ * @param {DataInfoPopoverProps} {
+ *  dataToShow: list of DataInformation objects to be displayed.
+ *  The itemType in these objects are used to group them together in the popover
+ *  isLoading: loading flag that tells if a dot progress should be displayed if data is being fetched
+ * }
+ * @return {*} {JSX.Element} Popover with data information buttons based on the provided DataInformation objects
  */
 var DataInfoPopover = function DataInfoPopover(_ref) {
   var dataToShow = _ref.dataToShow,
@@ -455,16 +455,16 @@ var css_248z$y = ".buttonWithPopover-module_button__FDyTt{background-color:var(-
 var style$8 = {"button":"buttonWithPopover-module_button__FDyTt","wrapper":"buttonWithPopover-module_wrapper__-pQfB","spinner":"buttonWithPopover-module_spinner__LMbqe"};
 styleInject(css_248z$y);
 
-/**
- * Component that renders a round button, that opens a popover upon being clicked
- *
- * @param {ButtonWithPopoverProps} {
- *     onShowMoreClicked: method called upon button clicked
- *     fetchedData: array of DataInformation that popover should be displayed when button is clicked.
- *                  Meant to be the return value of the fetchDataToShow method
- *     isLoading: flag to show loading state if data fetch takes some time
- *     expanded: flag to determine if popover should be expanded or not
- * @return {*}  {JSX.Element} Round button with belonging popover to display data information buttons
+/**
+ * Component that renders a round button, that opens a popover upon being clicked
+ *
+ * @param {ButtonWithPopoverProps} {
+ *     onShowMoreClicked: method called upon button clicked
+ *     fetchedData: array of DataInformation that popover should be displayed when button is clicked.
+ *                  Meant to be the return value of the fetchDataToShow method
+ *     isLoading: flag to show loading state if data fetch takes some time
+ *     expanded: flag to determine if popover should be expanded or not
+ * @return {*}  {JSX.Element} Round button with belonging popover to display data information buttons
  */
 var ButtonWithPopover = function ButtonWithPopover(_ref) {
   var onShowMoreClicked = _ref.onShowMoreClicked,
@@ -507,14 +507,14 @@ var css_248z$x = ".tagIcon-module_icon__FVhlT{border:3px solid var(--white);bord
 var styles$n = {"icon":"tagIcon-module_icon__FVhlT","shadow":"tagIcon-module_shadow__dAk0l"};
 styleInject(css_248z$x);
 
-/**
- * Component that will wrap the provided icon with a background color (usually the legend color)
- *
- * @param {TagIconProps} {
- *  icon: Icon to be wrapped
- *  legendColor: background color to apply. Need to be valid css color
- * }
- * @return {*}  {JSX.Element} Wrapped icon with provided color
+/**
+ * Component that will wrap the provided icon with a background color (usually the legend color)
+ *
+ * @param {TagIconProps} {
+ *  icon: Icon to be wrapped
+ *  legendColor: background color to apply. Need to be valid css color
+ * }
+ * @return {*}  {JSX.Element} Wrapped icon with provided color
  */
 var TagIcon = function TagIcon(_ref) {
   var icon = _ref.icon,
@@ -527,12 +527,12 @@ var TagIcon = function TagIcon(_ref) {
   }, icon);
 };
 
-/**
- * Component that will wrap the provided child element in a shadow.
- * Should be used to add shadow to the tagIcon component
- *
- * @param {TagIconShadowWrapperProps} { children } Child element to wrap
- * @return {*} {JSX.Element} wrapped child element in a shadow
+/**
+ * Component that will wrap the provided child element in a shadow.
+ * Should be used to add shadow to the tagIcon component
+ *
+ * @param {TagIconShadowWrapperProps} { children } Child element to wrap
+ * @return {*} {JSX.Element} wrapped child element in a shadow
  */
 var TagIconShadowWrapper = function TagIconShadowWrapper(_ref) {
   var children = _ref.children;
@@ -545,22 +545,22 @@ var css_248z$w = ".tagContextMenu-module_contextWrapper__o8wWz{border-radius:10r
 var styles$m = {"contextWrapper":"tagContextMenu-module_contextWrapper__o8wWz","contextWrapperExpanded":"tagContextMenu-module_contextWrapperExpanded__FJI8c","selected":"tagContextMenu-module_selected__4L6WK","tagInfoWrapper":"tagContextMenu-module_tagInfoWrapper__y4LBf","tagText":"tagContextMenu-module_tagText__8GaFk","tagHeader":"tagContextMenu-module_tagHeader__NW1El","tagDescription":"tagContextMenu-module_tagDescription__lrT1D","tagInfoIcon":"tagContextMenu-module_tagInfoIcon__AMpqu"};
 styleInject(css_248z$w);
 
-/**
- * Component that renders a tag context menu that can be expanded and closed upon click
- * The condensed variant will only display the the relevant tag icon
- * The expanded variant will display relevant tag icon, tag number and tag description
- *
- * @param {TagContextMenuProps} {
- *     expanded: flag that state if the context menu should be expanded or not
- *     setExpanded: method to update the expanded flag
- *     tagNo: the tag no to display
- *     description: the tag description
- *     openTagInformation: method called when expanded context menu is called
- *     selected: Flag to handle if there are multiple context menu's on a page, and a selected style should be applied
- *     selectedClassName: styling used to handle multiple tag visible on the page at the same time, class will be added to tagIcon when context menu is not expanded
- *     children: Meant to be used to pass TagIcon component to this component
- * }
- * @return {*}  {JSX.Element} a tag context menu for the provided properties
+/**
+ * Component that renders a tag context menu that can be expanded and closed upon click
+ * The condensed variant will only display the the relevant tag icon
+ * The expanded variant will display relevant tag icon, tag number and tag description
+ *
+ * @param {TagContextMenuProps} {
+ *     expanded: flag that state if the context menu should be expanded or not
+ *     setExpanded: method to update the expanded flag
+ *     tagNo: the tag no to display
+ *     description: the tag description
+ *     openTagInformation: method called when expanded context menu is called
+ *     selected: Flag to handle if there are multiple context menu's on a page, and a selected style should be applied
+ *     selectedClassName: styling used to handle multiple tag visible on the page at the same time, class will be added to tagIcon when context menu is not expanded
+ *     children: Meant to be used to pass TagIcon component to this component
+ * }
+ * @return {*}  {JSX.Element} a tag context menu for the provided properties
  */
 var TagContextMenu = function TagContextMenu(_ref) {
   var expanded = _ref.expanded,
@@ -609,24 +609,24 @@ var css_248z$v = ".contextMenu-module_wrapper__p-0Zc{display:flex;flex-wrap:wrap
 var style$7 = {"wrapper":"contextMenu-module_wrapper__p-0Zc"};
 styleInject(css_248z$v);
 
-/**
- * Component that renders full context menu functionality, meant for displaying tag context menu.
- * With the ability to provide more information button and related popover that should be wrapped with the context menu
- *
- * @param {ContextMenuProps} {
- *     icon: icon to be displayed
- *     expanded: flag to determine if context menu should be expanded or not
- *     legendColor: color used for the tag icon
- *     setExpanded: method to update expanded flag
- *     tagNo: The tag number to display
- *     description: The tag description to display
- *     positionStyle: The position styling element used to position the context menu
- *     openTagInformation: Method that will be called when expanded context menu is clicked
- *     selected: Flag to handle if there are multiple context menu's on a page, and a selected style should be applied
- *     selectedClassName: styling used to handle multiple tag visible on the page at the same time, class will be added to tagIcon when context menu is not expanded
- *     children: Related elements to display, e.g. more information button
- * }
- * @return {*} {JSX.Element} Context menu with relevant children wrapped
+/**
+ * Component that renders full context menu functionality, meant for displaying tag context menu.
+ * With the ability to provide more information button and related popover that should be wrapped with the context menu
+ *
+ * @param {ContextMenuProps} {
+ *     icon: icon to be displayed
+ *     expanded: flag to determine if context menu should be expanded or not
+ *     legendColor: color used for the tag icon
+ *     setExpanded: method to update expanded flag
+ *     tagNo: The tag number to display
+ *     description: The tag description to display
+ *     positionStyle: The position styling element used to position the context menu
+ *     openTagInformation: Method that will be called when expanded context menu is clicked
+ *     selected: Flag to handle if there are multiple context menu's on a page, and a selected style should be applied
+ *     selectedClassName: styling used to handle multiple tag visible on the page at the same time, class will be added to tagIcon when context menu is not expanded
+ *     children: Related elements to display, e.g. more information button
+ * }
+ * @return {*} {JSX.Element} Context menu with relevant children wrapped
  */
 var ContextMenu = function ContextMenu(_ref) {
   var icon = _ref.icon,
@@ -13527,19 +13527,19 @@ var css_248z$q = ".dialogGenerator-module_footer__h-ido{box-sizing:border-box;di
 var styles$l = {"footer":"dialogGenerator-module_footer__h-ido"};
 styleInject(css_248z$q);
 
-/**
- * Component that renders a dialog box based on input properties
- *
- * @param {DialogGeneratorProps} {
- *     dialogStyle: style property to override existing styling on the dialog wrapper
- *     title: the title of the dialog
- *     children: The main content of the dialog
- *     actionButtons: the buttons to show in the dialog
- *     open: if the dialog should be open
- *     isDismissable: if the modal is closable by clicking aside or by hitting ESC key
- *     onClose: callback to be called when the dialog is closed
- * }
- * @return {*}  {JSX.Element} Dialog component
+/**
+ * Component that renders a dialog box based on input properties
+ *
+ * @param {DialogGeneratorProps} {
+ *     dialogStyle: style property to override existing styling on the dialog wrapper
+ *     title: the title of the dialog
+ *     children: The main content of the dialog
+ *     actionButtons: the buttons to show in the dialog
+ *     open: if the dialog should be open
+ *     isDismissable: if the modal is closable by clicking aside or by hitting ESC key
+ *     onClose: callback to be called when the dialog is closed
+ * }
+ * @return {*}  {JSX.Element} Dialog component
  */
 var DialogGenerator = function DialogGenerator(_ref) {
   var dialogStyle = _ref.dialogStyle,
@@ -14498,24 +14498,24 @@ var _EchoUtils$Hooks = EchoUtils.Hooks,
   useFocus$1 = _EchoUtils$Hooks.useFocus,
   useOnOutsideClick = _EchoUtils$Hooks.useOnOutsideClick;
 var generateRandomId = EchoUtils.Utils.generateRandomId;
-/**
- * Component that renders a dropdown menu, e.g., for a plant selector.
- * Additional possibility to make the list searchable by adding a search field.
- * @param {DropdownItemProps} {
- *     selected: The item that is currently selected from the list.
- *     data: The list of data items to be displayed in the dropdown.
- *     placeholder: Placeholder text to be displayed when no item is selected.
- *     openDownWards: Flag which decides if the menu is opened downwards or upwards.
- *     filterFunc: Function which filters the list of data based on the value of the search field.
- *     setSelected: Function for setting the selected item.
- *     isDisabled: Flag which disables the dropdown.
- *     disabledText: The title text that displays when the dropdown is disabled.
- *     variant: Decides which style the dropdown should have. Either default or compact.
- *     showSearch: Flag which decides whether we should include the search field or not.
- *     position: Determines if the dropdown position should be relative or absolute.
- *     triggerOpen: Callback to trigger when the dropdown is opened.
- * }
- * @return {*} {JSX.Element} The dropdown component.
+/**
+ * Component that renders a dropdown menu, e.g., for a plant selector.
+ * Additional possibility to make the list searchable by adding a search field.
+ * @param {DropdownItemProps} {
+ *     selected: The item that is currently selected from the list.
+ *     data: The list of data items to be displayed in the dropdown.
+ *     placeholder: Placeholder text to be displayed when no item is selected.
+ *     openDownWards: Flag which decides if the menu is opened downwards or upwards.
+ *     filterFunc: Function which filters the list of data based on the value of the search field.
+ *     setSelected: Function for setting the selected item.
+ *     isDisabled: Flag which disables the dropdown.
+ *     disabledText: The title text that displays when the dropdown is disabled.
+ *     variant: Decides which style the dropdown should have. Either default or compact.
+ *     showSearch: Flag which decides whether we should include the search field or not.
+ *     position: Determines if the dropdown position should be relative or absolute.
+ *     triggerOpen: Callback to trigger when the dropdown is opened.
+ * }
+ * @return {*} {JSX.Element} The dropdown component.
  */
 var Dropdown = function Dropdown(_ref) {
   var selected = _ref.selected,
@@ -14916,16 +14916,16 @@ var css_248z$m = ".echoHeader-module_headerWrapper__1aaPR{background-color:#fff;
 var styles$i = {"headerWrapper":"echoHeader-module_headerWrapper__1aaPR","headerContainer":"echoHeader-module_headerContainer__jHC0e","moduleIcon":"echoHeader-module_moduleIcon__-U7mU","titleSection":"echoHeader-module_titleSection__macuj","moduleTextTitle":"echoHeader-module_moduleTextTitle__CiJzX","plantName":"echoHeader-module_plantName__eNNEy","customSection":"echoHeader-module_customSection__gGG2C"};
 styleInject(css_248z$m);
 
-/**
- * Component that renders the Echo header
- *
- * @param {EchoHeaderProps} {
- *    moduleTitle: the title of the module
- *    moduleIcon: the module Icon
- *    plantName: show the plant name next to the module title
- *    customSection: a section in the header where there can be custom components
- * }
- * @returns {*} {JSX.Element} Echo header with custom section
+/**
+ * Component that renders the Echo header
+ *
+ * @param {EchoHeaderProps} {
+ *    moduleTitle: the title of the module
+ *    moduleIcon: the module Icon
+ *    plantName: show the plant name next to the module title
+ *    customSection: a section in the header where there can be custom components
+ * }
+ * @returns {*} {JSX.Element} Echo header with custom section
  */
 var EchoHeader = function EchoHeader(_ref) {
   var _ref$moduleTitle = _ref.moduleTitle,
@@ -16970,10 +16970,10 @@ var getEchoVariantStyle = function getEchoVariantStyle(echoVariant) {
       return '';
   }
 };
-/**
- * Floating actions buttons exists within the viewport, seperated from any sheet, dialog or menu
- * and are typically used for special actions pertaining to the module they are used in.
- * @return {*}  {JSX.Element} Floating actions button
+/**
+ * Floating actions buttons exists within the viewport, seperated from any sheet, dialog or menu
+ * and are typically used for special actions pertaining to the module they are used in.
+ * @return {*}  {JSX.Element} Floating actions button
  */
 var FloatingActionButton = function FloatingActionButton(_ref) {
   var label = _ref.label,
@@ -17020,9 +17020,9 @@ var useEventListener = function useEventListener(eventName, handler, options) {
 };
 
 var useInitial = EchoUtils.Hooks.useInitial;
-/**
- * Hook for checking if page is loaded from mobile device.
- * @returns boolean true if on mobile.
+/**
+ * Hook for checking if page is loaded from mobile device.
+ * @returns boolean true if on mobile.
  */
 function useIsMobile() {
   var _useState = useState(false),
@@ -17082,11 +17082,11 @@ var useListNavigator = function useListNavigator(listLength) {
   }, listenerTarget);
   return currIndex;
 };
-/**
- * 1. On open: focus should be undefined/inactive. (list should scroll/show selected item if any).
- * 2. user presses a key (usually down) - scroll list to focused element, which should be first item
- * in the first section. Also set focused section.
- * 3. Potentially jump to last in list if user goes up?
+/**
+ * 1. On open: focus should be undefined/inactive. (list should scroll/show selected item if any).
+ * 2. user presses a key (usually down) - scroll list to focused element, which should be first item
+ * in the first section. Also set focused section.
+ * 3. Potentially jump to last in list if user goes up?
  */
 var useSectionNavigator = function useSectionNavigator(sections, initialSelected, keyboardEvents) {
   var listenerTarget = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : document;
@@ -17457,23 +17457,23 @@ var TagCategoryType;
   TagCategoryType["JunctionBox"] = "junction box";
   TagCategoryType["Administrative"] = "administrative";
 })(TagCategoryType || (TagCategoryType = {}));
-/**
- * Method that returns the relevant Icon for the tagCategoryDescription provided
- * Tag icon is the default JSX.Element Icon returned
- * @export
- * @param {('electrical'
- *         | 'main equipment'
- *         | 'line'
- *         | 'manual valve'
- *         | 'circuit/starter'
- *         | 'instrument'
- *         | 'cable'
- *         | 'function'
- *         | 'signal'
- *         | 'telecom'
- *         | 'junction box'
- *         | 'administrative'
- * @return {*}  {JSX.Element} Relevant icon for the provided tagCategoryDescription
+/**
+ * Method that returns the relevant Icon for the tagCategoryDescription provided
+ * Tag icon is the default JSX.Element Icon returned
+ * @export
+ * @param {('electrical'
+ *         | 'main equipment'
+ *         | 'line'
+ *         | 'manual valve'
+ *         | 'circuit/starter'
+ *         | 'instrument'
+ *         | 'cable'
+ *         | 'function'
+ *         | 'signal'
+ *         | 'telecom'
+ *         | 'junction box'
+ *         | 'administrative'
+ * @return {*}  {JSX.Element} Relevant icon for the provided tagCategoryDescription
  */
 var TagCategoryIcon = function TagCategoryIcon(_ref) {
   var tagCategoryDescription = _ref.tagCategoryDescription;
@@ -17540,12 +17540,12 @@ function getIcon(tagCategoryDescription) {
   });
 }
 
-/**
- * Floating search bar
- *
- * @param {FloatingSearchBarProps} {
- * }
- * @return {*}  {JSX.Element}
+/**
+ * Floating search bar
+ *
+ * @param {FloatingSearchBarProps} {
+ * }
+ * @return {*}  {JSX.Element}
  */
 var FloatingSearchBar = function FloatingSearchBar(_ref) {
   var ariaLabel = _ref.ariaLabel,
@@ -22038,15 +22038,15 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
 } (dist));
 
 var DraggableHandleSelector = 'globalDraggableHandle';
-/**
- * Component that renders a wrapper for items that are draggable
- *
- * @param {DraggableItemsWrapperProps} {
- *     style: style element to override wrapper style
- *     onChange: method that will be called when elements have be reordered inside the wrapper
- *     children: list of elements that can be reordered
- * }
- * @return {*}  {JSX.Element}
+/**
+ * Component that renders a wrapper for items that are draggable
+ *
+ * @param {DraggableItemsWrapperProps} {
+ *     style: style element to override wrapper style
+ *     onChange: method that will be called when elements have be reordered inside the wrapper
+ *     children: list of elements that can be reordered
+ * }
+ * @return {*}  {JSX.Element}
  */
 var DraggableItemsWrapper = function DraggableItemsWrapper(_ref) {
   var style = _ref.style,
@@ -22091,16 +22091,16 @@ var css_248z$h = ".radioButton-module_buttonWrapper__gzYAz span,.radioButton-mod
 var styles$f = {"header":"radioButton-module_header__f6AoN","buttonWrapper":"radioButton-module_buttonWrapper__gzYAz"};
 styleInject(css_248z$h);
 
-/**
- * Component that renders a Radio Button Group with a set of options to choose from
- *
- * @param {RadioButtonGroupProps} {
- *     title: The title of the radio button group,
- *     options: List of items to be displayed as options,
- *     style: Style element to override wrapper style,
- *     onSelected: Method to be called when the selected value is changed
- * }
- * @return {*}  {JSX.Element}
+/**
+ * Component that renders a Radio Button Group with a set of options to choose from
+ *
+ * @param {RadioButtonGroupProps} {
+ *     title: The title of the radio button group,
+ *     options: List of items to be displayed as options,
+ *     style: Style element to override wrapper style,
+ *     onSelected: Method to be called when the selected value is changed
+ * }
+ * @return {*}  {JSX.Element}
  */
 var RadioButtonGroup = function RadioButtonGroup(_ref) {
   var title = _ref.title,
@@ -22164,19 +22164,19 @@ var css_248z$f = ".sliderField-module_sliderField__gp6ce{display:flex;flex-direc
 var styles$e = {"sliderField":"sliderField-module_sliderField__gp6ce","sliderWrapper":"sliderField-module_sliderWrapper__pAwLd"};
 styleInject(css_248z$f);
 
-/**
- * Component that renders a slider with numeric or custom values
- *
- * @param {SliderFieldProps} {
- *     value: Current value of the slider,
- *     min: Minimum value of the slider,
- *     max: Maximum value of the slider,
- *     labels: List of labels to use if the slider should not display numeric values,
- *     title: Text shown as title of the slider,
- *     onChange: Method that will be called if the slider value is changed,
- *     style: style element to override wrapper style
- * }
- * @return {*}  {JSX.Element}
+/**
+ * Component that renders a slider with numeric or custom values
+ *
+ * @param {SliderFieldProps} {
+ *     value: Current value of the slider,
+ *     min: Minimum value of the slider,
+ *     max: Maximum value of the slider,
+ *     labels: List of labels to use if the slider should not display numeric values,
+ *     title: Text shown as title of the slider,
+ *     onChange: Method that will be called if the slider value is changed,
+ *     style: style element to override wrapper style
+ * }
+ * @return {*}  {JSX.Element}
  */
 var SliderField = function SliderField(_ref) {
   var value = _ref.value,
@@ -22222,16 +22222,16 @@ var css_248z$e = ".textIconButton-module_button__9s6rE{align-items:center;border
 var styles$d = {"button":"textIconButton-module_button__9s6rE","text":"textIconButton-module_text__hw0bg"};
 styleInject(css_248z$e);
 
-/**
- * Component that renders a button with the icon and the text provided
- *
- * @param {TextIconButtonProps} {
- *     icon: the name of the icon to display
- *     title: the title text that the button should display
- *     onClick: the function that will be called when user clicks the button
- *     style: Optional parameter that will override the button style
- * }
- * @return {*}  {JSX.Element} A button with the provided icon and text
+/**
+ * Component that renders a button with the icon and the text provided
+ *
+ * @param {TextIconButtonProps} {
+ *     icon: the name of the icon to display
+ *     title: the title text that the button should display
+ *     onClick: the function that will be called when user clicks the button
+ *     style: Optional parameter that will override the button style
+ * }
+ * @return {*}  {JSX.Element} A button with the provided icon and text
  */
 var TextIconButton = function TextIconButton(_ref) {
   var icon = _ref.icon,
@@ -22258,24 +22258,24 @@ var css_248z$d = ".listRow-module_wrapper__j5Czq{border-bottom:1px solid #dcdcdc
 var styles$c = {"wrapper":"listRow-module_wrapper__j5Czq","row":"listRow-module_row__5taKB","infoCol":"listRow-module_infoCol__fSiO5","draggable":"listRow-module_draggable__WoQYD","info":"listRow-module_info__fX3UU","iconCol":"listRow-module_iconCol__A4oE0","activeIconButton":"listRow-module_activeIconButton__GdFjq","iconButton":"listRow-module_iconButton__j9G0z","expandedRow":"listRow-module_expandedRow__DdJu5","close":"listRow-module_close__gdtqH"};
 styleInject(css_248z$d);
 
-/**
- * Component that renders one row in a list. The row can be marked as draggable and expandable
- *
- * @param {ListRowProps} {
- *     isDraggable: flag to indicate that the row can be rearranged in a list
- *     item: {      The item to be rendered in the row
- *          title: the title of the item in the row
- *          subtitle: the subtitle of the item in the row
- *          icons: the icons that will be displayed on the same row, and their respective actions
- *     }
- *     expandable: { object with properties to handle if the row is expandable. If undefined the row cannot be expanded
- *          iconItems: the items that will be displayed if row is expanded, and their respective actions
- *          expanded: flag to indicate if the row is expanded or not
- *          setExpanded: method that updates the expanded flag
- *     }
- *     style: style element to override wrapper style
- * }
- * @return {*}  {JSX.Element} a row element to be used in a list
+/**
+ * Component that renders one row in a list. The row can be marked as draggable and expandable
+ *
+ * @param {ListRowProps} {
+ *     isDraggable: flag to indicate that the row can be rearranged in a list
+ *     item: {      The item to be rendered in the row
+ *          title: the title of the item in the row
+ *          subtitle: the subtitle of the item in the row
+ *          icons: the icons that will be displayed on the same row, and their respective actions
+ *     }
+ *     expandable: { object with properties to handle if the row is expandable. If undefined the row cannot be expanded
+ *          iconItems: the items that will be displayed if row is expanded, and their respective actions
+ *          expanded: flag to indicate if the row is expanded or not
+ *          setExpanded: method that updates the expanded flag
+ *     }
+ *     style: style element to override wrapper style
+ * }
+ * @return {*}  {JSX.Element} a row element to be used in a list
  */
 var ListRow = function ListRow(_ref) {
   var isDraggable = _ref.isDraggable,
@@ -22351,31 +22351,29 @@ var css_248z$c = ".menuButton-module_button__qpHsn{align-items:center;border-lef
 var styles$b = {"button":"menuButton-module_button__qpHsn","text":"menuButton-module_text__MiZeF","active":"menuButton-module_active__1Dznq"};
 styleInject(css_248z$c);
 
-/**
- * The menu bottom items
- * On desktop it will have an active border on the left,
- * and on mobile the active border will be on the bottom
- * Contains an icon and a descriptive text
- * @param {*} {
- *     text, the text below the icon, also displayed on hover
- *     active, boolean describing the buttons active state
- *     children, the icon to be displayed
- *     onClick, the on click event
- *     refValue, a reference value in case its needed
- *     id: the id of the button in case its needed
- * }
- * @return {*}  {JSX.Element}
+/**
+ * The menu bottom items
+ * On desktop it will have an active border on the left,
+ * and on mobile the active border will be on the bottom
+ * Contains an icon and a descriptive text
+ * @param {*} {
+ *     text, the text below the icon, also displayed on hover
+ *     active, boolean describing the buttons active state
+ *     children, the icon to be displayed
+ *     onClick, the on click event
+ *     id: the id of the button in case its needed
+ * }
+ * @return {*}  {JSX.Element}
  */
-var MenuButton = function MenuButton(_ref) {
-  var text = _ref.text,
-    active = _ref.active,
-    children = _ref.children,
-    onClick = _ref.onClick,
-    refValue = _ref.refValue,
-    id = _ref.id;
+var MenuButton = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  var text = props.text,
+    active = props.active,
+    children = props.children,
+    onClick = props.onClick,
+    id = props.id;
   return /*#__PURE__*/React__default.createElement("button", {
     title: text,
-    ref: refValue,
+    ref: ref,
     type: "button",
     onClick: onClick,
     id: id,
@@ -22383,61 +22381,12 @@ var MenuButton = function MenuButton(_ref) {
   }, children, /*#__PURE__*/React__default.createElement(Typography, {
     className: styles$b.text
   }, text));
-};
+});
+MenuButton.displayName = 'MenuButton';
 MenuButton.defaultProps = {
-  refValue: undefined,
   id: ''
 };
 
-/**
- * Panel context with default initialized values
- *
- */
-var PanelContext = /*#__PURE__*/React__default.createContext({
-  activePanel: undefined,
-  panelSize: 'wide',
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- need to match interface
-  updateActivePanel: function updateActivePanel(newActivePanel) {
-    throw new Error('Panel Context not initialized use Panel component');
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- need to match interface
-  updatePanelSize: function updatePanelSize(newPanelSize) {
-    throw new Error('Panel Context not initialized use Panel component');
-  }
-});
-/**
- * The panel context wrapper that should be used within Panel component to store the state of the panel
- *
- */
-var PanelContextWrapper = function PanelContextWrapper(_ref) {
-  var children = _ref.children;
-  var _React$useState = React__default.useState(undefined),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    activePanel = _React$useState2[0],
-    setActivePanel = _React$useState2[1];
-  var updateActivePanel = React__default.useCallback(function (newActivePanel) {
-    return setActivePanel(newActivePanel);
-  }, []);
-  var _React$useState3 = React__default.useState('wide'),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    panelSize = _React$useState4[0],
-    setPanelSize = _React$useState4[1];
-  var updatePanelSize = React__default.useCallback(function (newPanelSize) {
-    return setPanelSize(newPanelSize);
-  }, []);
-  var value = React__default.useMemo(function () {
-    return {
-      activePanel: activePanel,
-      updateActivePanel: updateActivePanel,
-      panelSize: panelSize,
-      updatePanelSize: updatePanelSize
-    };
-  }, [activePanel, panelSize, updateActivePanel, updatePanelSize]);
-  return /*#__PURE__*/React__default.createElement(PanelContext.Provider, {
-    value: value
-  }, children);
-};
-
 /**
  * lodash (Custom Build) <https://lodash.com/>
  * Build: `lodash modularize exports="npm" -o ./`
@@ -22878,47 +22827,608 @@ function toNumber(value) {
 
 var lodash_throttle = throttle;
 
+const createStoreImpl = (createState) => {
+  let state;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (partial, replace) => {
+    const nextState = typeof partial === "function" ? partial(state) : partial;
+    if (!Object.is(nextState, state)) {
+      const previousState = state;
+      state = (replace != null ? replace : typeof nextState !== "object") ? nextState : Object.assign({}, state, nextState);
+      listeners.forEach((listener) => listener(state, previousState));
+    }
+  };
+  const getState = () => state;
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const destroy = () => {
+    if ((import.meta.env && import.meta.env.MODE) !== "production") {
+      console.warn(
+        "[DEPRECATED] The destroy method will be unsupported in the future version. You should use unsubscribe function returned by subscribe. Everything will be garbage collected if store is garbage collected."
+      );
+    }
+    listeners.clear();
+  };
+  const api = { setState, getState, subscribe, destroy };
+  state = createState(setState, getState, api);
+  return api;
+};
+const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
+
+var withSelectorExports = {};
+var withSelector = {
+  get exports(){ return withSelectorExports; },
+  set exports(v){ withSelectorExports = v; },
+};
+
+var withSelector_production_min = {};
+
+var shimExports = {};
+var shim = {
+  get exports(){ return shimExports; },
+  set exports(v){ shimExports = v; },
+};
+
+var useSyncExternalStoreShim_production_min = {};
+
 /**
- * Hook that exposes panel context, if not used within a PanelContext this hook will throw an error
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
- * @export
- * @return {*}  {PanelContextState} Returns the existing panel context or throws error if not used within a PanelContext
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-function usePanelContext() {
-  var context = React__default.useContext(PanelContext);
-  if (!context) {
-    throw new Error("Panel compound components cannot be rendered outside the Panel component");
-  }
-  return context;
+
+var hasRequiredUseSyncExternalStoreShim_production_min;
+
+function requireUseSyncExternalStoreShim_production_min () {
+	if (hasRequiredUseSyncExternalStoreShim_production_min) return useSyncExternalStoreShim_production_min;
+	hasRequiredUseSyncExternalStoreShim_production_min = 1;
+var e=React__default;function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c});},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c});})},[a]);p(d);return d}
+	function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return !k(a,d)}catch(f){return !0}}function t(a,b){return b()}var u="undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement?t:q;useSyncExternalStoreShim_production_min.useSyncExternalStore=void 0!==e.useSyncExternalStore?e.useSyncExternalStore:u;
+	return useSyncExternalStoreShim_production_min;
 }
 
-var css_248z$b = ".panelWrapper-module_wrapper__asJxL{position:fixed;right:0;z-index:5}.panelWrapper-module_topBarWrapper__Nt84G{background-color:#fff;border-left:1px solid #dcdcdc;box-sizing:border-box;height:100dvh;padding:4px 0;width:64px;z-index:10}.panelWrapper-module_topBarWrapper__Nt84G div:first-child{display:none}.panelWrapper-module_contentPanel__JWij5,.panelWrapper-module_narrowPanel__zW0DI{background:#fff;box-sizing:border-box;height:100%;overflow:hidden;position:absolute;right:64px;top:0;transition:width .4s ease-in-out;width:0;z-index:1200}.panelWrapper-module_narrowPanel__zW0DI{width:240px!important}.panelWrapper-module_activeContentPanel__1nAhR{border-left:2px solid #f7f7f7;padding-left:14px;padding-right:16px;padding-top:16px;width:320px}.panelWrapper-module_buttonWrapperMobile__pcR1V{display:none}.panelWrapper-module_buttonWrapper__xbmQI{height:calc(100dvh - 16px)}@media screen and (max-width:927px) and (orientation:landscape){.panelWrapper-module_topBarWrapper__Nt84G{width:calc(100dvw - 56px)}}@media screen and (max-width:767px) and (orientation:portrait){.panelWrapper-module_topBarWrapper__Nt84G{width:100dvw}}@media screen and (max-width:767px) and (orientation:portrait),screen and (max-width:927px) and (orientation:landscape){.panelWrapper-module_topBarWrapper__Nt84G{border-bottom:1px solid #dcdcdc;border-left:none;display:flex;flex-direction:row;height:48px;padding-bottom:0;padding-top:0;z-index:10}.panelWrapper-module_topBarWrapper__Nt84G div:first-child{display:flex}.panelWrapper-module_moduleTitle__4Wloo{display:flex;margin:auto 0 auto 16px}.panelWrapper-module_moduleTitle__4Wloo p{color:var(--echoText);font-size:16px;font-weight:500;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panelWrapper-module_contentPanel__JWij5,.panelWrapper-module_narrowPanel__zW0DI{height:100dvh;right:0}.panelWrapper-module_buttonWrapperMobile__pcR1V{display:flex;justify-content:flex-end;margin-right:8px}.panelWrapper-module_buttonWrapper__xbmQI{display:none}}@media screen and (max-width:768px) and (orientation:portrait){.panelWrapper-module_moduleTitle__4Wloo{width:140px}.panelWrapper-module_buttonWrapperMobile__pcR1V{width:calc(100vw - 140px)}}@media screen and (max-width:927px) and (orientation:landscape){.panelWrapper-module_moduleTitle__4Wloo{width:240px}.panelWrapper-module_buttonWrapperMobile__pcR1V{width:calc(100vw - 240px)}}";
-var styles$a = {"wrapper":"panelWrapper-module_wrapper__asJxL","topBarWrapper":"panelWrapper-module_topBarWrapper__Nt84G","narrowPanel":"panelWrapper-module_narrowPanel__zW0DI","contentPanel":"panelWrapper-module_contentPanel__JWij5","activeContentPanel":"panelWrapper-module_activeContentPanel__1nAhR","buttonWrapperMobile":"panelWrapper-module_buttonWrapperMobile__pcR1V","buttonWrapper":"panelWrapper-module_buttonWrapper__xbmQI","moduleTitle":"panelWrapper-module_moduleTitle__4Wloo"};
-styleInject(css_248z$b);
+var useSyncExternalStoreShim_development = {};
 
 /**
- * Component that display's the buttons in a panel. It will automatically try to calculate how many buttons to display
- * and how many buttons to hide behind the more menu.
- * It controls which panel to display when a button is clicked
- * On desktop this component will render on the right side, and on the top in mobile view
- *
- * @param {*} {
- * menuItems, the items to be displayed in the menu and its belonging panels
- * header, the header that will be displayed on mobile.
- * If its a string then it will only display a header text. But it can also be a component with self defined html
- * }
- * @return {*}  {JSX.Element}
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredUseSyncExternalStoreShim_development;
+
+function requireUseSyncExternalStoreShim_development () {
+	if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
+	hasRequiredUseSyncExternalStoreShim_development = 1;
+
+	if (process.env.NODE_ENV !== "production") {
+	  (function() {
+
+	/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+	if (
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+	    'function'
+	) {
+	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+	}
+	          var React = React__default;
+
+	var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+	function error(format) {
+	  {
+	    {
+	      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+	        args[_key2 - 1] = arguments[_key2];
+	      }
+
+	      printWarning('error', format, args);
+	    }
+	  }
+	}
+
+	function printWarning(level, format, args) {
+	  // When changing this logic, you might want to also
+	  // update consoleWithStackDev.www.js as well.
+	  {
+	    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+	    var stack = ReactDebugCurrentFrame.getStackAddendum();
+
+	    if (stack !== '') {
+	      format += '%s';
+	      args = args.concat([stack]);
+	    } // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+	    var argsWithFormat = args.map(function (item) {
+	      return String(item);
+	    }); // Careful: RN currently depends on this prefix
+
+	    argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
+	    // breaks IE9: https://github.com/facebook/react/issues/13610
+	    // eslint-disable-next-line react-internal/no-production-logging
+
+	    Function.prototype.apply.call(console[level], console, argsWithFormat);
+	  }
+	}
+
+	/**
+	 * inlined Object.is polyfill to avoid requiring consumers ship their own
+	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+	 */
+	function is(x, y) {
+	  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
+	  ;
+	}
+
+	var objectIs = typeof Object.is === 'function' ? Object.is : is;
+
+	// dispatch for CommonJS interop named imports.
+
+	var useState = React.useState,
+	    useEffect = React.useEffect,
+	    useLayoutEffect = React.useLayoutEffect,
+	    useDebugValue = React.useDebugValue;
+	var didWarnOld18Alpha = false;
+	var didWarnUncachedGetSnapshot = false; // Disclaimer: This shim breaks many of the rules of React, and only works
+	// because of a very particular set of implementation details and assumptions
+	// -- change any one of them and it will break. The most important assumption
+	// is that updates are always synchronous, because concurrent rendering is
+	// only available in versions of React that also have a built-in
+	// useSyncExternalStore API. And we only use this shim when the built-in API
+	// does not exist.
+	//
+	// Do not assume that the clever hacks used by this hook also work in general.
+	// The point of this shim is to replace the need for hacks by other libraries.
+
+	function useSyncExternalStore(subscribe, getSnapshot, // Note: The shim does not use getServerSnapshot, because pre-18 versions of
+	// React do not expose a way to check if we're hydrating. So users of the shim
+	// will need to track that themselves and return the correct value
+	// from `getSnapshot`.
+	getServerSnapshot) {
+	  {
+	    if (!didWarnOld18Alpha) {
+	      if (React.startTransition !== undefined) {
+	        didWarnOld18Alpha = true;
+
+	        error('You are using an outdated, pre-release alpha of React 18 that ' + 'does not support useSyncExternalStore. The ' + 'use-sync-external-store shim will not work correctly. Upgrade ' + 'to a newer pre-release.');
+	      }
+	    }
+	  } // Read the current snapshot from the store on every render. Again, this
+	  // breaks the rules of React, and only works here because of specific
+	  // implementation details, most importantly that updates are
+	  // always synchronous.
+
+
+	  var value = getSnapshot();
+
+	  {
+	    if (!didWarnUncachedGetSnapshot) {
+	      var cachedValue = getSnapshot();
+
+	      if (!objectIs(value, cachedValue)) {
+	        error('The result of getSnapshot should be cached to avoid an infinite loop');
+
+	        didWarnUncachedGetSnapshot = true;
+	      }
+	    }
+	  } // Because updates are synchronous, we don't queue them. Instead we force a
+	  // re-render whenever the subscribed state changes by updating an some
+	  // arbitrary useState hook. Then, during render, we call getSnapshot to read
+	  // the current value.
+	  //
+	  // Because we don't actually use the state returned by the useState hook, we
+	  // can save a bit of memory by storing other stuff in that slot.
+	  //
+	  // To implement the early bailout, we need to track some things on a mutable
+	  // object. Usually, we would put that in a useRef hook, but we can stash it in
+	  // our useState hook instead.
+	  //
+	  // To force a re-render, we call forceUpdate({inst}). That works because the
+	  // new object always fails an equality check.
+
+
+	  var _useState = useState({
+	    inst: {
+	      value: value,
+	      getSnapshot: getSnapshot
+	    }
+	  }),
+	      inst = _useState[0].inst,
+	      forceUpdate = _useState[1]; // Track the latest getSnapshot function with a ref. This needs to be updated
+	  // in the layout phase so we can access it during the tearing check that
+	  // happens on subscribe.
+
+
+	  useLayoutEffect(function () {
+	    inst.value = value;
+	    inst.getSnapshot = getSnapshot; // Whenever getSnapshot or subscribe changes, we need to check in the
+	    // commit phase if there was an interleaved mutation. In concurrent mode
+	    // this can happen all the time, but even in synchronous mode, an earlier
+	    // effect may have mutated the store.
+
+	    if (checkIfSnapshotChanged(inst)) {
+	      // Force a re-render.
+	      forceUpdate({
+	        inst: inst
+	      });
+	    }
+	  }, [subscribe, value, getSnapshot]);
+	  useEffect(function () {
+	    // Check for changes right before subscribing. Subsequent changes will be
+	    // detected in the subscription handler.
+	    if (checkIfSnapshotChanged(inst)) {
+	      // Force a re-render.
+	      forceUpdate({
+	        inst: inst
+	      });
+	    }
+
+	    var handleStoreChange = function () {
+	      // TODO: Because there is no cross-renderer API for batching updates, it's
+	      // up to the consumer of this library to wrap their subscription event
+	      // with unstable_batchedUpdates. Should we try to detect when this isn't
+	      // the case and print a warning in development?
+	      // The store changed. Check if the snapshot changed since the last time we
+	      // read from the store.
+	      if (checkIfSnapshotChanged(inst)) {
+	        // Force a re-render.
+	        forceUpdate({
+	          inst: inst
+	        });
+	      }
+	    }; // Subscribe to the store and return a clean-up function.
+
+
+	    return subscribe(handleStoreChange);
+	  }, [subscribe]);
+	  useDebugValue(value);
+	  return value;
+	}
+
+	function checkIfSnapshotChanged(inst) {
+	  var latestGetSnapshot = inst.getSnapshot;
+	  var prevValue = inst.value;
+
+	  try {
+	    var nextValue = latestGetSnapshot();
+	    return !objectIs(prevValue, nextValue);
+	  } catch (error) {
+	    return true;
+	  }
+	}
+
+	function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) {
+	  // Note: The shim does not use getServerSnapshot, because pre-18 versions of
+	  // React do not expose a way to check if we're hydrating. So users of the shim
+	  // will need to track that themselves and return the correct value
+	  // from `getSnapshot`.
+	  return getSnapshot();
+	}
+
+	var canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');
+
+	var isServerEnvironment = !canUseDOM;
+
+	var shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore;
+	var useSyncExternalStore$2 = React.useSyncExternalStore !== undefined ? React.useSyncExternalStore : shim;
+
+	useSyncExternalStoreShim_development.useSyncExternalStore = useSyncExternalStore$2;
+	          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+	if (
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+	    'function'
+	) {
+	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+	}
+	        
+	  })();
+	}
+	return useSyncExternalStoreShim_development;
+}
+
+var hasRequiredShim;
+
+function requireShim () {
+	if (hasRequiredShim) return shimExports;
+	hasRequiredShim = 1;
+	(function (module) {
+
+		if (process.env.NODE_ENV === 'production') {
+		  module.exports = requireUseSyncExternalStoreShim_production_min();
+		} else {
+		  module.exports = requireUseSyncExternalStoreShim_development();
+		}
+} (shim));
+	return shimExports;
+}
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredWithSelector_production_min;
+
+function requireWithSelector_production_min () {
+	if (hasRequiredWithSelector_production_min) return withSelector_production_min;
+	hasRequiredWithSelector_production_min = 1;
+var h=React__default,n=requireShim();function p(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var q="function"===typeof Object.is?Object.is:p,r=n.useSyncExternalStore,t=h.useRef,u=h.useEffect,v=h.useMemo,w=h.useDebugValue;
+	withSelector_production_min.useSyncExternalStoreWithSelector=function(a,b,e,l,g){var c=t(null);if(null===c.current){var f={hasValue:!1,value:null};c.current=f;}else f=c.current;c=v(function(){function a(a){if(!c){c=!0;d=a;a=l(a);if(void 0!==g&&f.hasValue){var b=f.value;if(g(b,a))return k=b}return k=a}b=k;if(q(d,a))return b;var e=l(a);if(void 0!==g&&g(b,e))return b;d=a;return k=e}var c=!1,d,k,m=void 0===e?null:e;return [function(){return a(b())},null===m?void 0:function(){return a(m())}]},[b,e,l,g]);var d=r(a,c[0],c[1]);
+	u(function(){f.hasValue=!0;f.value=d;},[d]);w(d);return d};
+	return withSelector_production_min;
+}
+
+var withSelector_development = {};
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredWithSelector_development;
+
+function requireWithSelector_development () {
+	if (hasRequiredWithSelector_development) return withSelector_development;
+	hasRequiredWithSelector_development = 1;
+
+	if (process.env.NODE_ENV !== "production") {
+	  (function() {
+
+	/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+	if (
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+	    'function'
+	) {
+	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+	}
+	          var React = React__default;
+	var shim = requireShim();
+
+	/**
+	 * inlined Object.is polyfill to avoid requiring consumers ship their own
+	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+	 */
+	function is(x, y) {
+	  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
+	  ;
+	}
+
+	var objectIs = typeof Object.is === 'function' ? Object.is : is;
+
+	var useSyncExternalStore = shim.useSyncExternalStore;
+
+	// for CommonJS interop.
+
+	var useRef = React.useRef,
+	    useEffect = React.useEffect,
+	    useMemo = React.useMemo,
+	    useDebugValue = React.useDebugValue; // Same as useSyncExternalStore, but supports selector and isEqual arguments.
+
+	function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+	  // Use this to track the rendered snapshot.
+	  var instRef = useRef(null);
+	  var inst;
+
+	  if (instRef.current === null) {
+	    inst = {
+	      hasValue: false,
+	      value: null
+	    };
+	    instRef.current = inst;
+	  } else {
+	    inst = instRef.current;
+	  }
+
+	  var _useMemo = useMemo(function () {
+	    // Track the memoized state using closure variables that are local to this
+	    // memoized instance of a getSnapshot function. Intentionally not using a
+	    // useRef hook, because that state would be shared across all concurrent
+	    // copies of the hook/component.
+	    var hasMemo = false;
+	    var memoizedSnapshot;
+	    var memoizedSelection;
+
+	    var memoizedSelector = function (nextSnapshot) {
+	      if (!hasMemo) {
+	        // The first time the hook is called, there is no memoized result.
+	        hasMemo = true;
+	        memoizedSnapshot = nextSnapshot;
+
+	        var _nextSelection = selector(nextSnapshot);
+
+	        if (isEqual !== undefined) {
+	          // Even if the selector has changed, the currently rendered selection
+	          // may be equal to the new selection. We should attempt to reuse the
+	          // current value if possible, to preserve downstream memoizations.
+	          if (inst.hasValue) {
+	            var currentSelection = inst.value;
+
+	            if (isEqual(currentSelection, _nextSelection)) {
+	              memoizedSelection = currentSelection;
+	              return currentSelection;
+	            }
+	          }
+	        }
+
+	        memoizedSelection = _nextSelection;
+	        return _nextSelection;
+	      } // We may be able to reuse the previous invocation's result.
+
+
+	      // We may be able to reuse the previous invocation's result.
+	      var prevSnapshot = memoizedSnapshot;
+	      var prevSelection = memoizedSelection;
+
+	      if (objectIs(prevSnapshot, nextSnapshot)) {
+	        // The snapshot is the same as last time. Reuse the previous selection.
+	        return prevSelection;
+	      } // The snapshot has changed, so we need to compute a new selection.
+
+
+	      // The snapshot has changed, so we need to compute a new selection.
+	      var nextSelection = selector(nextSnapshot); // If a custom isEqual function is provided, use that to check if the data
+	      // has changed. If it hasn't, return the previous selection. That signals
+	      // to React that the selections are conceptually equal, and we can bail
+	      // out of rendering.
+
+	      // If a custom isEqual function is provided, use that to check if the data
+	      // has changed. If it hasn't, return the previous selection. That signals
+	      // to React that the selections are conceptually equal, and we can bail
+	      // out of rendering.
+	      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
+	        return prevSelection;
+	      }
+
+	      memoizedSnapshot = nextSnapshot;
+	      memoizedSelection = nextSelection;
+	      return nextSelection;
+	    }; // Assigning this to a constant so that Flow knows it can't change.
+
+
+	    // Assigning this to a constant so that Flow knows it can't change.
+	    var maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
+
+	    var getSnapshotWithSelector = function () {
+	      return memoizedSelector(getSnapshot());
+	    };
+
+	    var getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? undefined : function () {
+	      return memoizedSelector(maybeGetServerSnapshot());
+	    };
+	    return [getSnapshotWithSelector, getServerSnapshotWithSelector];
+	  }, [getSnapshot, getServerSnapshot, selector, isEqual]),
+	      getSelection = _useMemo[0],
+	      getServerSelection = _useMemo[1];
+
+	  var value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
+	  useEffect(function () {
+	    inst.hasValue = true;
+	    inst.value = value;
+	  }, [value]);
+	  useDebugValue(value);
+	  return value;
+	}
+
+	withSelector_development.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector;
+	          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+	if (
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+	    'function'
+	) {
+	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+	}
+	        
+	  })();
+	}
+	return withSelector_development;
+}
+
+(function (module) {
+
+	if (process.env.NODE_ENV === 'production') {
+	  module.exports = requireWithSelector_production_min();
+	} else {
+	  module.exports = requireWithSelector_development();
+	}
+} (withSelector));
+
+var useSyncExternalStoreExports = /*@__PURE__*/getDefaultExportFromCjs(withSelectorExports);
+
+const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
+function useStore(api, selector = api.getState, equalityFn) {
+  const slice = useSyncExternalStoreWithSelector(
+    api.subscribe,
+    api.getState,
+    api.getServerState || api.getState,
+    selector,
+    equalityFn
+  );
+  useDebugValue(slice);
+  return slice;
+}
+const createImpl = (createState) => {
+  if ((import.meta.env && import.meta.env.MODE) !== "production" && typeof createState !== "function") {
+    console.warn(
+      '[DEPRECATED] Passing a vanilla store will be unsupported in the future version. Please use `import { useStore } from "zustand"` to use the vanilla store in React.'
+    );
+  }
+  const api = typeof createState === "function" ? createStore(createState) : createState;
+  const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn);
+  Object.assign(useBoundStore, api);
+  return useBoundStore;
+};
+const create = (createState) => createState ? createImpl(createState) : createImpl;
+
+// 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
+var usePanelStore = create(function (set) {
+  return {
+    activePanel: undefined,
+    panelSize: 'wide',
+    updateActivePanel: function updateActivePanel(newActivePanel) {
+      set({
+        activePanel: newActivePanel
+      });
+    },
+    updatePanelSize: function updatePanelSize(newPanelSize) {
+      set({
+        panelSize: newPanelSize
+      });
+    }
+  };
+});
+
+var css_248z$b = ".panelWrapper-module_wrapper__asJxL{position:fixed;right:0;z-index:5}.panelWrapper-module_topBarWrapper__Nt84G{background-color:#fff;border-left:1px solid #dcdcdc;box-sizing:border-box;height:calc(100dvh - 64px);padding-left:0;padding-right:0;width:64px;z-index:10}.panelWrapper-module_topBarWrapper__Nt84G div:first-child{display:none}.panelWrapper-module_contentPanel__JWij5,.panelWrapper-module_narrowPanel__zW0DI{background:#fff;box-sizing:border-box;height:100%;overflow:hidden;position:absolute;right:64px;top:0;transition:width .4s ease-in-out;width:0;z-index:1200}.panelWrapper-module_narrowPanel__zW0DI{width:240px!important}.panelWrapper-module_activeContentPanel__1nAhR{border-left:2px solid #f7f7f7;padding-left:14px;padding-right:16px;padding-top:16px;width:320px}.panelWrapper-module_buttonWrapperMobile__pcR1V{display:none}.panelWrapper-module_buttonWrapper__xbmQI{height:calc(100dvh - 70px)}.panelWrapper-module_buttonAtBottomWrapper__jLd-d{bottom:6px;position:absolute;width:100%}@media screen and (max-width:927px) and (orientation:landscape){.panelWrapper-module_topBarWrapper__Nt84G{width:calc(100dvw - 56px)}}@media screen and (max-width:767px) and (orientation:portrait){.panelWrapper-module_activeContentPanel__1nAhR,.panelWrapper-module_topBarWrapper__Nt84G{width:100dvw}}@media screen and (max-width:767px) and (orientation:portrait),screen and (max-width:927px) and (orientation:landscape){.panelWrapper-module_buttonAtBottomWrapper__jLd-d{display:none}.panelWrapper-module_topBarWrapper__Nt84G{border-bottom:1px solid #dcdcdc;border-left:none;display:flex;flex-direction:row;height:48px;padding-bottom:0;padding-top:0;z-index:10}.panelWrapper-module_topBarWrapper__Nt84G div:first-child{display:flex}.panelWrapper-module_moduleTitle__4Wloo{display:flex;margin:auto 0 auto 16px}.panelWrapper-module_moduleTitle__4Wloo p{color:var(--echoText);font-size:16px;font-weight:500;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panelWrapper-module_contentPanel__JWij5,.panelWrapper-module_narrowPanel__zW0DI{height:100dvh;right:0}.panelWrapper-module_buttonWrapperMobile__pcR1V{display:flex;justify-content:flex-end;margin-right:8px}.panelWrapper-module_buttonWrapper__xbmQI{display:none}}@media screen and (max-width:768px) and (orientation:portrait){.panelWrapper-module_moduleTitle__4Wloo{width:140px}.panelWrapper-module_buttonWrapperMobile__pcR1V{width:calc(100vw - 140px)}}@media screen and (max-width:927px) and (orientation:landscape){.panelWrapper-module_moduleTitle__4Wloo{width:240px}.panelWrapper-module_buttonWrapperMobile__pcR1V{width:calc(100vw - 240px)}}";
+var styles$a = {"wrapper":"panelWrapper-module_wrapper__asJxL","topBarWrapper":"panelWrapper-module_topBarWrapper__Nt84G","narrowPanel":"panelWrapper-module_narrowPanel__zW0DI","contentPanel":"panelWrapper-module_contentPanel__JWij5","activeContentPanel":"panelWrapper-module_activeContentPanel__1nAhR","buttonWrapperMobile":"panelWrapper-module_buttonWrapperMobile__pcR1V","buttonWrapper":"panelWrapper-module_buttonWrapper__xbmQI","buttonAtBottomWrapper":"panelWrapper-module_buttonAtBottomWrapper__jLd-d","moduleTitle":"panelWrapper-module_moduleTitle__4Wloo"};
+styleInject(css_248z$b);
+
+/**
+ * Component that display's the buttons in a panel. It will automatically try to calculate how many buttons to display
+ * and how many buttons to hide behind the more menu.
+ * It controls which panel to display when a button is clicked
+ * On desktop this component will render on the right side, and on the top in mobile view
+ *
+ * @param {*} {
+ * menuItems, the items to be displayed in the menu and its belonging panels
+ * header, the header that will be displayed on mobile.
+ * If its a string then it will only display a header text. But it can also be a component with self defined html
+ * }
+ * @return {*}  {JSX.Element}
  */
 var PanelWrapper = function PanelWrapper(_ref) {
   var _classnames;
   var menuItems = _ref.menuItems,
     header = _ref.header;
-  var _a, _b;
-  var _usePanelContext = usePanelContext(),
-    activePanel = _usePanelContext.activePanel,
-    panelSize = _usePanelContext.panelSize,
-    updateActivePanel = _usePanelContext.updateActivePanel,
-    updatePanelSize = _usePanelContext.updatePanelSize;
+  var _a, _b, _c;
+  var _usePanelStore = usePanelStore(),
+    activePanel = _usePanelStore.activePanel,
+    panelSize = _usePanelStore.panelSize,
+    updateActivePanel = _usePanelStore.updateActivePanel,
+    updatePanelSize = _usePanelStore.updatePanelSize;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isMenuOpen = _useState2[0],
@@ -22932,6 +23442,10 @@ var PanelWrapper = function PanelWrapper(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     buttonsInOverflow = _useState6[0],
     setButtonsInOverflow = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    buttonAtBottom = _useState8[0],
+    setButtonAtBottom = _useState8[1];
   var mobileWrapperRef = useRef(null);
   var desktopWrapperRef = useRef(null);
   var handleActiveMenuItemChanged = function handleActiveMenuItemChanged(menuItemType, panelSizeToUse) {
@@ -22946,9 +23460,15 @@ var PanelWrapper = function PanelWrapper(_ref) {
   var calculateOverflow = useCallback(function () {
     var _a, _b, _c, _d, _e, _f;
     var numberOfIconsThereIsRoomFor;
+    var shouldShowButtonAtBottom = false;
     if ((_a = mobileWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) {
       numberOfIconsThereIsRoomFor = ((_c = (_b = mobileWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0) / 56;
     } else if ((_d = desktopWrapperRef.current) === null || _d === void 0 ? void 0 : _d.clientHeight) {
+      var buttonAtBottomFromList = menuItems.find(function (item) {
+        return item.isBottomItem === true;
+      });
+      if (buttonAtBottomFromList) shouldShowButtonAtBottom = true;
+      setButtonAtBottom(buttonAtBottomFromList);
       numberOfIconsThereIsRoomFor = ((_f = (_e = desktopWrapperRef.current) === null || _e === void 0 ? void 0 : _e.clientHeight) !== null && _f !== void 0 ? _f : 0) / 56;
     }
     if (!numberOfIconsThereIsRoomFor) {
@@ -22964,9 +23484,19 @@ var PanelWrapper = function PanelWrapper(_ref) {
       }
     }
     var menuItemsCopy = _toConsumableArray$1(menuItems);
+    // if there is a button at the bottom then there is less room for the other buttons
+    if (shouldShowButtonAtBottom) {
+      iconsInOverflow += 1;
+      var _buttonAtBottomFromList = menuItems.find(function (item) {
+        return item.isBottomItem === true;
+      });
+      if (_buttonAtBottomFromList) menuItemsCopy = menuItems.filter(function (item) {
+        return item.labelId !== _buttonAtBottomFromList.labelId;
+      });
+    }
     setButtonsToDisplay(menuItemsCopy.slice(0, menuItems.length - iconsInOverflow));
     setButtonsInOverflow(menuItemsCopy.slice(menuItems.length - iconsInOverflow));
-  }, [menuItems]);
+  }, [menuItems, mobileWrapperRef, desktopWrapperRef]);
   useEffect(function () {
     calculateOverflow();
   }, [calculateOverflow]);
@@ -22999,12 +23529,55 @@ var PanelWrapper = function PanelWrapper(_ref) {
     }
     return null;
   };
+  var shouldCloseMoreOnOutsideClick = function shouldCloseMoreOnOutsideClick() {
+    if (buttonsInOverflow.find(function (button) {
+      return button.skipPanelContent;
+    })) {
+      return undefined;
+    } else {
+      return function () {
+        return setIsMenuOpen(false);
+      };
+    }
+  };
+  var renderButtonAtBottom = function renderButtonAtBottom(button) {
+    if (!button) return;
+    if (button.skipPanelContent) {
+      var PanelComponent = button.component;
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: styles$a.buttonAtBottomWrapper
+      }, /*#__PURE__*/React__default.createElement(PanelComponent, {
+        key: button.labelId
+      }));
+    }
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: styles$a.buttonAtBottomWrapper
+    }, /*#__PURE__*/React__default.createElement(MenuButton, {
+      text: button.label,
+      key: button.labelId,
+      id: button.labelId,
+      active: activePanel === button.labelId,
+      onClick: function onClick() {
+        return handleActiveMenuItemChanged(button.labelId, button.panelSize);
+      }
+    }, typeof button.icon === 'string' ? /*#__PURE__*/React__default.createElement(Icon$1, {
+      color: themeConst.echoText,
+      name: button.icon
+    }) : button.icon));
+  };
   var renderMenuItems = function renderMenuItems() {
     var _a, _b;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, buttonsToDisplay.map(function (button) {
+      if (button.skipPanelContent) {
+        var PanelComponent = button.component;
+        return /*#__PURE__*/React__default.createElement(PanelComponent, {
+          key: button.labelId
+        });
+      }
       return /*#__PURE__*/React__default.createElement(MenuButton, {
         text: button.label,
         key: button.labelId,
+        id: button.labelId,
         active: activePanel === button.labelId,
         onClick: function onClick() {
           return handleActiveMenuItemChanged(button.labelId, button.panelSize);
@@ -23015,7 +23588,7 @@ var PanelWrapper = function PanelWrapper(_ref) {
       }) : button.icon);
     }), buttonsInOverflow.length > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MenuButton, {
       text: "More",
-      refValue: menuRef,
+      ref: menuRef,
       id: "more-menu-options-anchor",
       active: isMenuOpen,
       onClick: function onClick() {
@@ -23025,14 +23598,23 @@ var PanelWrapper = function PanelWrapper(_ref) {
       color: themeConst.echoText,
       name: "more_vertical"
     })), /*#__PURE__*/React__default.createElement(Menu, {
+      style: {
+        overflowX: 'auto',
+        maxHeight: 'calc(100dvh - 70px)'
+      },
       anchorEl: menuRef.current,
       id: "more-menu-options",
-      onClose: function onClose() {
-        return setIsMenuOpen(false);
-      },
+      onClose: shouldCloseMoreOnOutsideClick,
       placement: ((_b = (_a = mobileWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0) > 0 ? 'bottom-start' : 'left',
       open: isMenuOpen
     }, buttonsInOverflow.map(function (button) {
+      if (button.skipPanelContent) {
+        var PanelComponent = button.component;
+        return /*#__PURE__*/React__default.createElement(PanelComponent, {
+          key: button.labelId,
+          isOverflow: true
+        });
+      }
       return /*#__PURE__*/React__default.createElement(Menu.Item, {
         key: button.labelId,
         onClick: function onClick() {
@@ -23042,7 +23624,7 @@ var PanelWrapper = function PanelWrapper(_ref) {
         color: themeConst.echoText,
         name: button.icon
       }) : button.icon, button.label);
-    }))));
+    }))), renderButtonAtBottom(buttonAtBottom));
   };
   var renderMenuItemsBasedOnRef = function renderMenuItemsBasedOnRef(ref) {
     if (ref) return renderMenuItems();
@@ -23059,53 +23641,55 @@ var PanelWrapper = function PanelWrapper(_ref) {
   }, renderMenuItemsBasedOnRef((_a = mobileWrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth)), /*#__PURE__*/React__default.createElement("div", {
     className: styles$a.buttonWrapper,
     ref: desktopWrapperRef
-  }, renderMenuItemsBasedOnRef((_b = desktopWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight))), /*#__PURE__*/React__default.createElement("div", {
+  }, renderMenuItemsBasedOnRef((_b = desktopWrapperRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight))), !((_c = getActivePanel(activePanel)) === null || _c === void 0 ? void 0 : _c.skipPanelContent) && /*#__PURE__*/React__default.createElement("div", {
     className: classnames$2(styles$a.contentPanel, (_classnames = {}, _defineProperty$1(_classnames, styles$a.narrowPanel, panelSize === 'narrow' && activePanel), _defineProperty$1(_classnames, styles$a.activeContentPanel, activePanel), _classnames))
   }, getPanelComponentForActivePanel(activePanel)));
 };
 
-/**
- * The actual right side panel. This component wraps the panel with a panel state
- *
- * @param {PanelProps} {
- * menuItems, the items to be displayed in the menu and its belonging panels
- * header, the header that will be displayed on mobile.
- * If its a string then it will only display a header text. But it can also be a component with self defined html
- * }
- * @return {*}  {JSX.Element}
+/**
+ * The actual right side panel. This component wraps the panel with a panel state
+ *
+ * @param {PanelProps} {
+ * menuItems, the items to be displayed in the menu and its belonging panels
+ * header, the header that will be displayed on mobile.
+ * If its a string then it will only display a header text. But it can also be a component with self defined html
+ * }
+ * @return {*}  {JSX.Element}
  */
 var Panel = function Panel(_ref) {
   var menuItems = _ref.menuItems,
     header = _ref.header;
-  return /*#__PURE__*/React__default.createElement(PanelContextWrapper, null, /*#__PURE__*/React__default.createElement(PanelWrapper, {
+  return /*#__PURE__*/React__default.createElement(PanelWrapper, {
     header: header,
     menuItems: menuItems
-  }));
+  });
 };
 
-var css_248z$a = ".panelContent-module_headerWrapper__BAc2H{display:flex;justify-content:space-between;padding-bottom:16px}.panelContent-module_panelTitle__jqqJT{margin:auto 0!important}.panelContent-module_bodyWrapper__EHsg5{height:calc(100dvh - 112px);margin-right:-8px;margin-top:16px;overflow-x:hidden;overflow-y:auto}.panelContent-module_contentWrapper__1re5K{margin-right:8px}";
-var styles$9 = {"headerWrapper":"panelContent-module_headerWrapper__BAc2H","panelTitle":"panelContent-module_panelTitle__jqqJT","bodyWrapper":"panelContent-module_bodyWrapper__EHsg5","contentWrapper":"panelContent-module_contentWrapper__1re5K"};
+var css_248z$a = ".panelContent-module_headerWrapper__BAc2H{display:flex;justify-content:space-between;padding-bottom:16px}.panelContent-module_panelTitle__jqqJT{margin:auto 0!important}.panelContent-module_bodyWrapperWithFooter__uoMyR,.panelContent-module_bodyWrapper__EHsg5{height:calc(100dvh - 112px);margin-right:-8px;margin-top:16px;overflow-x:hidden;overflow-y:auto}.panelContent-module_bodyWrapperWithFooter__uoMyR{height:calc(100dvh - 140px)}.panelContent-module_footer__P1Nr8{height:52px}.panelContent-module_contentWrapper__1re5K{margin-right:8px}";
+var styles$9 = {"headerWrapper":"panelContent-module_headerWrapper__BAc2H","panelTitle":"panelContent-module_panelTitle__jqqJT","bodyWrapper":"panelContent-module_bodyWrapper__EHsg5","bodyWrapperWithFooter":"panelContent-module_bodyWrapperWithFooter__uoMyR","footer":"panelContent-module_footer__P1Nr8","contentWrapper":"panelContent-module_contentWrapper__1re5K"};
 styleInject(css_248z$a);
 
-/**
- * The component that wraps the panel drawer content
- * This components displays a header with close and possible back button
- * It also displays the content wrapped with some css
- *
- * @param {PanelContentProps} {
- *     header, the header text to display
- *     children, the panels content
- *     backToMainPanel: optional parameter that controls whether the panel should have a back button or not
- *      to be used in cases where there are panels within panels
- * }
- * @return {*}  {JSX.Element}
+/**
+ * The component that wraps the panel drawer content
+ * This components displays a header with close and possible back button
+ * It also displays the content wrapped with some css
+ *
+ * @param {PanelContentProps} {
+ *     header, the header text to display
+ *     children, the panels content
+ *     backToMainPanel: optional parameter that controls whether the panel should have a back button or not
+ *      to be used in cases where there are panels within panels,
+ *     footer: optional param, if used a footer will be shown in the panel content
+ * }
+ * @return {*}  {JSX.Element}
  */
 var PanelContent = function PanelContent(_ref) {
   var header = _ref.header,
     children = _ref.children,
-    backToMainPanel = _ref.backToMainPanel;
-  var _usePanelContext = usePanelContext(),
-    updateActivePanel = _usePanelContext.updateActivePanel;
+    backToMainPanel = _ref.backToMainPanel,
+    footer = _ref.footer;
+  var _usePanelStore = usePanelStore(),
+    updateActivePanel = _usePanelStore.updateActivePanel;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: styles$9.headerWrapper
   }, backToMainPanel && /*#__PURE__*/React__default.createElement(Button, {
@@ -23124,10 +23708,12 @@ var PanelContent = function PanelContent(_ref) {
   }, /*#__PURE__*/React__default.createElement(Icon$1, {
     name: "close"
   }))), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$9.bodyWrapper
+    className: footer ? styles$9.bodyWrapperWithFooter : styles$9.bodyWrapper
   }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$9.contentWrapper
-  }, children)));
+  }, children)), footer && /*#__PURE__*/React__default.createElement("div", {
+    className: styles$9.footer
+  }, footer));
 };
 PanelContent.defaultProps = {
   backToMainPanel: undefined
@@ -23137,28 +23723,28 @@ var css_248z$9 = ".sidebarButton-module_button__37sG4{align-items:center;box-siz
 var styles$8 = {"button":"sidebarButton-module_button__37sG4","activeButton":"sidebarButton-module_activeButton__WkS2p","text":"sidebarButton-module_text__S0hrv","rightBarButton":"sidebarButton-module_rightBarButton__nh2hd","leftBarButton":"sidebarButton-module_leftBarButton__C5g1N","bottomBarButton":"sidebarButton-module_bottomBarButton__UJRT3","tabButton":"sidebarButton-module_tabButton__eQISU","tabItemCount":"sidebarButton-module_tabItemCount__nQc-M"};
 styleInject(css_248z$9);
 
-/**
- * The reusable button component that is used in the sidebars/bottom bar.
- *
- * On desktop it will have an active border on the left/right/top,
- * depending if the ButtonPosition is set to: "right"/"left"/"bottom".
- * The active border will be on the right if it's a tab button and ButtonPosition is set to: "tab".
- *
- * On mobile with the right sidebar, the active border will be on the bottom.
- * In landscape mode with the bottom bar, the active border will be on the right.
- *
- * The button contains an icon and a descriptive text.
- * @param {*} {
- *     text: the text below the icon.
- *     active: boolean describing the button's active state.
- *     onClick: the onClick event.
- *     count: will display a count on the button.
- *     buttonPosition: decides the active border, depending if the button is placed in the right bar/left bar/bottom bar.
- *     refValue: a reference value, in case it's needed.
- *     id: the id of the button, in case it's needed.
- *     children: the icon to be displayed.
- * }
- * @return {*}  {JSX.Element}
+/**
+ * The reusable button component that is used in the sidebars/bottom bar.
+ *
+ * On desktop it will have an active border on the left/right/top,
+ * depending if the ButtonPosition is set to: "right"/"left"/"bottom".
+ * The active border will be on the right if it's a tab button and ButtonPosition is set to: "tab".
+ *
+ * On mobile with the right sidebar, the active border will be on the bottom.
+ * In landscape mode with the bottom bar, the active border will be on the right.
+ *
+ * The button contains an icon and a descriptive text.
+ * @param {*} {
+ *     text: the text below the icon.
+ *     active: boolean describing the button's active state.
+ *     onClick: the onClick event.
+ *     count: will display a count on the button.
+ *     buttonPosition: decides the active border, depending if the button is placed in the right bar/left bar/bottom bar.
+ *     refValue: a reference value, in case it's needed.
+ *     id: the id of the button, in case it's needed.
+ *     children: the icon to be displayed.
+ * }
+ * @return {*}  {JSX.Element}
  */
 var SidebarButton = function SidebarButton(_ref) {
   var _classnames;
@@ -23503,8 +24089,8 @@ function getIsActive(statusIds) {
   return true;
 }
 
-var css_248z$3 = ".WorkOrderListItem-module_container__AaZwJ{padding:1rem}.WorkOrderListItem-module_container__AaZwJ>div:not(:first-of-type){gap:8px}.WorkOrderListItem-module_visual__UCRRo{align-items:center;background-color:var(--echoText);border-radius:50%;color:#fff;display:flex;flex-direction:column;font-size:12px;font-weight:500;height:40px;justify-content:center;margin:.5rem;padding:.5rem;width:40px}.WorkOrderListItem-module_primary__aflKC{align-items:center;display:flex;flex-flow:row nowrap}.WorkOrderListItem-module_tertiary__9VMmL{gap:.75rem}.WorkOrderListItem-module_tertiaryMultiline__fnZfW{align-items:flex-start;flex-direction:column;gap:.1rem}.WorkOrderListItem-module_primaryText__Fdd7q{width:auto}.WorkOrderListItem-module_secondaryText__I85sw{color:#565656}.WorkOrderListItem-module_tertiaryText__TRbrY{color:var(--tertiaryText)}.WorkOrderListItem-module_divider__XvYes{border:1px solid #d9d9d9;height:.75rem}.WorkOrderListItem-module_statusContainer__YJ0If{align-items:center;display:flex;flex-flow:row nowrap;gap:.2rem}.WorkOrderListItem-module_statusIndicator__aCFoR{border-radius:50%;height:.75rem;margin-left:.5rem;width:.75rem}.WorkOrderListItem-module_statusText__a2z46{display:contents;margin-left:.25rem}";
-var styles$3 = {"container":"WorkOrderListItem-module_container__AaZwJ","visual":"WorkOrderListItem-module_visual__UCRRo","primary":"WorkOrderListItem-module_primary__aflKC","tertiary":"WorkOrderListItem-module_tertiary__9VMmL WorkOrderListItem-module_primary__aflKC","tertiaryMultiline":"WorkOrderListItem-module_tertiaryMultiline__fnZfW WorkOrderListItem-module_primary__aflKC","primaryText":"WorkOrderListItem-module_primaryText__Fdd7q","secondaryText":"WorkOrderListItem-module_secondaryText__I85sw","tertiaryText":"WorkOrderListItem-module_tertiaryText__TRbrY","divider":"WorkOrderListItem-module_divider__XvYes","statusContainer":"WorkOrderListItem-module_statusContainer__YJ0If","statusIndicator":"WorkOrderListItem-module_statusIndicator__aCFoR","statusText":"WorkOrderListItem-module_statusText__a2z46"};
+var css_248z$3 = ".WorkOrderListItem-module_container__AaZwJ{padding:1rem}.WorkOrderListItem-module_container__AaZwJ>div:not(:first-of-type){gap:8px}.WorkOrderListItem-module_visual__UCRRo{align-items:center;background-color:var(--echoText);border-radius:50%;color:#fff;display:flex;flex-direction:column;font-size:12px;font-weight:500;height:40px;justify-content:center;margin:.5rem;padding:.5rem;width:40px}.WorkOrderListItem-module_primary__aflKC{align-items:center;display:flex;flex-flow:row nowrap}.WorkOrderListItem-module_tertiary__9VMmL{gap:.75rem}.WorkOrderListItem-module_tertiaryMultiline__fnZfW{align-items:flex-start;flex-direction:column;gap:.1rem}.WorkOrderListItem-module_primaryText__Fdd7q{width:auto}.WorkOrderListItem-module_secondaryText__I85sw{color:#565656}.WorkOrderListItem-module_tertiaryText__TRbrY{color:var(--tertiaryText)}.WorkOrderListItem-module_divider__XvYes{border:1px solid #d9d9d9;height:.75rem}.WorkOrderListItem-module_statusContainer__YJ0If{align-items:center;display:flex;flex-flow:row nowrap;gap:.2rem}.WorkOrderListItem-module_statusIndicator__aCFoR{border-radius:50%;height:.75rem;margin-left:.5rem;width:.75rem}.WorkOrderListItem-module_statusText__a2z46{display:contents;margin-left:.25rem}.WorkOrderListItem-module_title__S3kG9{width:auto}";
+var styles$3 = {"container":"WorkOrderListItem-module_container__AaZwJ","visual":"WorkOrderListItem-module_visual__UCRRo","primary":"WorkOrderListItem-module_primary__aflKC","tertiary":"WorkOrderListItem-module_tertiary__9VMmL WorkOrderListItem-module_primary__aflKC","tertiaryMultiline":"WorkOrderListItem-module_tertiaryMultiline__fnZfW WorkOrderListItem-module_primary__aflKC","primaryText":"WorkOrderListItem-module_primaryText__Fdd7q","secondaryText":"WorkOrderListItem-module_secondaryText__I85sw","tertiaryText":"WorkOrderListItem-module_tertiaryText__TRbrY","divider":"WorkOrderListItem-module_divider__XvYes","statusContainer":"WorkOrderListItem-module_statusContainer__YJ0If","statusIndicator":"WorkOrderListItem-module_statusIndicator__aCFoR","statusText":"WorkOrderListItem-module_statusText__a2z46","title":"WorkOrderListItem-module_title__S3kG9"};
 styleInject(css_248z$3);
 
 function WorkOrderStatusLabel(_ref) {
@@ -23533,16 +24119,22 @@ var WorkOrderStatusColorMap = {
   active: '#FF9200'
 };
 
+function setShowDate(wo) {
+  if (wo.orderType.toUpperCase() === 'PM01' && wo.requiredEndDateTime) return true;
+  if (wo.orderType.toUpperCase() === 'PM02' && wo.maintenancePlanDate) return true;
+  return false;
+}
 function WorkOrderListItem(props) {
   var _classnames;
   var isMobile = useIsMobile();
   var wo = props.workOrder;
+  var showDate = setShowDate(wo);
   var displayHeaderDate = function displayHeaderDate() {
     if (wo.orderType.toUpperCase() === 'PM01') {
-      return /*#__PURE__*/React__default.createElement("div", null, "Req. end date: ", dateToStringOrEmpty(wo.requiredEndDateTime));
+      return /*#__PURE__*/React__default.createElement("span", null, "Req. end date: ", dateToStringOrEmpty(wo.requiredEndDateTime));
     }
     if (wo.orderType.toUpperCase() === 'PM02') {
-      return /*#__PURE__*/React__default.createElement("div", null, "Planned date: ", dateToStringOrEmpty(wo.maintenancePlanDate));
+      return /*#__PURE__*/React__default.createElement("span", null, "Planned date: ", dateToStringOrEmpty(wo.maintenancePlanDate));
     }
     return null;
   };
@@ -23554,6 +24146,7 @@ function WorkOrderListItem(props) {
     primary: /*#__PURE__*/React__default.createElement("div", {
       className: styles$3.primary
     }, /*#__PURE__*/React__default.createElement(Typography, {
+      className: styles$3.title,
       variant: 'h6'
     }, wo.id.substring(4)), /*#__PURE__*/React__default.createElement(WorkOrderStatusLabel, {
       workOrderStatus: wo.activeStatusIds
@@ -23568,13 +24161,13 @@ function WorkOrderListItem(props) {
       variant: 'chart',
       group: 'ui',
       className: styles$3.tertiaryText
-    }, wo.planningPlant), !isOverflow && !isMobile && /*#__PURE__*/React__default.createElement("div", {
+    }, wo.planningPlant), showDate && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isOverflow && !isMobile && /*#__PURE__*/React__default.createElement("div", {
       className: styles$3.divider
     }), /*#__PURE__*/React__default.createElement(Typography, {
       variant: 'chart',
       group: 'ui',
       className: styles$3.tertiaryText
-    }, displayHeaderDate())),
+    }, displayHeaderDate()))),
     visual: /*#__PURE__*/React__default.createElement("div", {
       className: styles$3.visual
     }, /*#__PURE__*/React__default.createElement(Icon$1, {
@@ -23592,8 +24185,8 @@ var staticData$3 = {
   prefix: 'echo',
   group: 'robim_external'
 };
-/*
- * ROBIM EXTERNAL ICONS
+/*
+ * ROBIM EXTERNAL ICONS
  */
 var robim_external_ald = Object.assign(Object.assign({}, staticData$3), {
   name: 'robim_external_ald',
@@ -23748,15 +24341,15 @@ var echoIcons = /*#__PURE__*/Object.freeze({
 
 Icon$1.add(Object.assign(Object.assign({}, edsIcons), echoIcons));
 
-/**
- * Helper method that will return a list row given some input values. Used in IconList component for rendering rows
- *
- * @param {boolean} isDraggable flag to indicate that the row is draggable
- * @param {number} index the index of the list
- * @param {IconListState} iconListState the state from the IconList component used to create the row and its interactions
- * @param {(value: React.SetStateAction<IconListState>) => void} setIconListState the action to update the state from the IconList component
- * @param {IconItem[]} expandedIcons the icons to be displayed if the row is expandable. Is undefined if the row should not be expandable
- * @return {*}  {React.ReactNode} A list row component created from the input parameters
+/**
+ * Helper method that will return a list row given some input values. Used in IconList component for rendering rows
+ *
+ * @param {boolean} isDraggable flag to indicate that the row is draggable
+ * @param {number} index the index of the list
+ * @param {IconListState} iconListState the state from the IconList component used to create the row and its interactions
+ * @param {(value: React.SetStateAction<IconListState>) => void} setIconListState the action to update the state from the IconList component
+ * @param {IconItem[]} expandedIcons the icons to be displayed if the row is expandable. Is undefined if the row should not be expandable
+ * @return {*}  {React.ReactNode} A list row component created from the input parameters
  */
 var createListRow = function createListRow(isDraggable, index, iconListState, setIconListState, expandedIcons) {
   return /*#__PURE__*/React__default.createElement(ListRow, {
@@ -23788,22 +24381,22 @@ var css_248z$2 = ".iconList-module_wrapper__AMjAK{display:flex;flex-direction:co
 var styles$2 = {"wrapper":"iconList-module_wrapper__AMjAK","header":"iconList-module_header__g2suM"};
 styleInject(css_248z$2);
 
-/**
- * Component that renders an IconList of rows, that can be draggable and/or expandable
- *
- * @param {IconListProps} {
- *     style: the style to override the IconList wrapper
- *     title: The title of the list
- *     items: { The items to be rendered in the row
- *          title: the title of the item in the row
- *          subtitle: the subtitle of the item in the row
- *          icons: the icons that will be displayed on the same row, and their respective actions
- *     }[]
- *     isDraggable: flag to indicate if the elements in the list should be draggable
- *     expandedIcons: list of icons that should be displayed if a row is expanded. If undefined no row can be expanded
- *     onUpdatedOrder: method that will be called when the order of the list has changed
- * }
- * @return {*}  {JSX.Element} a list of items that can be draggable and/or expandable
+/**
+ * Component that renders an IconList of rows, that can be draggable and/or expandable
+ *
+ * @param {IconListProps} {
+ *     style: the style to override the IconList wrapper
+ *     title: The title of the list
+ *     items: { The items to be rendered in the row
+ *          title: the title of the item in the row
+ *          subtitle: the subtitle of the item in the row
+ *          icons: the icons that will be displayed on the same row, and their respective actions
+ *     }[]
+ *     isDraggable: flag to indicate if the elements in the list should be draggable
+ *     expandedIcons: list of icons that should be displayed if a row is expanded. If undefined no row can be expanded
+ *     onUpdatedOrder: method that will be called when the order of the list has changed
+ * }
+ * @return {*}  {JSX.Element} a list of items that can be draggable and/or expandable
  */
 var IconList = function IconList(_ref) {
   var style = _ref.style,
@@ -23881,21 +24474,21 @@ var css_248z$1 = ".linkCard-module_wrapper__eoD5r{background-color:var(--white);
 var styles$1 = {"wrapper":"linkCard-module_wrapper__eoD5r","image":"linkCard-module_image__EUhQK","header":"linkCard-module_header__P5GTe","title":"linkCard-module_title__WGglA","subTitle":"linkCard-module_subTitle__0j2D5","links":"linkCard-module_links__LkokT","link":"linkCard-module_link__uaQqQ"};
 styleInject(css_248z$1);
 
-/**
- * Component that renders a card with an image and a list of links
- *
- * @param {LinkCardProps} {
- *     style: style element to override wrapper style
- *     image: the image scr of the image to be displayed
- *     title: the title of the card
- *     subTitle: the subtitle of the cars
- *     links { A list of links to display
- *          title: the text of the link
- *          url: the url to the link
- *          target: how the link should be opened. Possible values are '_blank' | '_self', default is '_self'
- *     }
- * }
- * @return {*}  {JSX.Element} a card element with an image and some provided links
+/**
+ * Component that renders a card with an image and a list of links
+ *
+ * @param {LinkCardProps} {
+ *     style: style element to override wrapper style
+ *     image: the image scr of the image to be displayed
+ *     title: the title of the card
+ *     subTitle: the subtitle of the cars
+ *     links { A list of links to display
+ *          title: the text of the link
+ *          url: the url to the link
+ *          target: how the link should be opened. Possible values are '_blank' | '_self', default is '_self'
+ *     }
+ * }
+ * @return {*}  {JSX.Element} a card element with an image and some provided links
  */
 var LinkCard = function LinkCard(_ref) {
   var style = _ref.style,
@@ -23974,20 +24567,20 @@ var css_248z = ".optionsList-module_wrapper__r6i4r{display:table;width:100%}.opt
 var styles = {"wrapper":"optionsList-module_wrapper__r6i4r","head":"optionsList-module_head__W2pf7","row":"optionsList-module_row__hkSEt","item":"optionsList-module_item__uXdrQ","itemTitle":"optionsList-module_itemTitle__tQcdj","columnTitle":"optionsList-module_columnTitle__ciUTO","radio":"optionsList-module_radio__Ll5Fr","circle":"optionsList-module_circle__5Ub8n"};
 styleInject(css_248z);
 
-/**
- *  Component that renders a list with a set number of radio buttons for each row in the list
- *
- * @param {OptionsListProps} {
- *     items:{ the items that should be shown in the list
- *          title: the text displayed for a row in the list
- *          color: the background color used in the badge in front of the title of the item
- *          selectedColumnIndex: specifies witch radio button should have selected state. Should not be larger than the columns input property
- *     }
- *     style: Optional parameter that can override the wrapper style
- *     titles: list of title that should be shown for the different columns in the list
- *     columns: the number of columns the list should have
- * }
- * @return {*}  {JSX.Element} a list of rows with a set of radio buttons
+/**
+ *  Component that renders a list with a set number of radio buttons for each row in the list
+ *
+ * @param {OptionsListProps} {
+ *     items:{ the items that should be shown in the list
+ *          title: the text displayed for a row in the list
+ *          color: the background color used in the badge in front of the title of the item
+ *          selectedColumnIndex: specifies witch radio button should have selected state. Should not be larger than the columns input property
+ *     }
+ *     style: Optional parameter that can override the wrapper style
+ *     titles: list of title that should be shown for the different columns in the list
+ *     columns: the number of columns the list should have
+ * }
+ * @return {*}  {JSX.Element} a list of rows with a set of radio buttons
  */
 var OptionsList = function OptionsList(_ref) {
   var items = _ref.items,
@@ -24035,5 +24628,5 @@ var OptionsList = function OptionsList(_ref) {
   }));
 };
 
-export { ButtonWithPopover, ContextMenu, DataInfoButton, DialogGenerator, DraggableItemsWrapper, Dropdown, EchoBottomBar, EchoCard, EchoHeader, EchoTooltip, FloatingActionButton, FloatingSearchBar, Icon, IconList, InlineTagIconLink, LinkCard, ListItem, ListRow, OptionsList, Panel, PanelContent, PanelWrapper, RadioButtonGroup, ReactDatePicker, RoundIconButton, RoundIconButtonVariants, SideSheet, SideSheetOrientation, SidebarButton, SliderField, SplitView, TagCategoryIcon, TagCategoryType, TagContextMenu, TagIcon, TagIconShadowWrapper, TextIconButton, TimePicker, WorkOrderListItem, classnames$1 as classnames, echoIcons, getIcon, notifications_m1, notifications_m2, notifications_m3, notifications_m4, notifications_m5, notifications_m6, notifications_m9, notifications_main_group, punches_main_group, punches_pa, punches_pb, robim_external_ald, robim_external_iwit, robim_external_timp, robim_external_timp_text, themeConst, useIsMobile, useKeyboardNavigation, useListNavigator, usePanelContext, useSectionNavigator, workorders_main_group, workorders_pm01, workorders_pm02, workorders_pm03, workorders_pm04, workorders_pm05, workorders_pm06, workorders_pm10, workorders_pm15, workorders_pm20 };
+export { ButtonWithPopover, ContextMenu, DataInfoButton, DialogGenerator, DraggableItemsWrapper, Dropdown, EchoBottomBar, EchoCard, EchoHeader, EchoTooltip, FloatingActionButton, FloatingSearchBar, Icon, IconList, InlineTagIconLink, LinkCard, ListItem, ListRow, OptionsList, Panel, PanelContent, PanelWrapper, RadioButtonGroup, ReactDatePicker, RoundIconButton, RoundIconButtonVariants, SideSheet, SideSheetOrientation, SidebarButton, SliderField, SplitView, TagCategoryIcon, TagCategoryType, TagContextMenu, TagIcon, TagIconShadowWrapper, TextIconButton, TimePicker, WorkOrderListItem, classnames$1 as classnames, echoIcons, getIcon, notifications_m1, notifications_m2, notifications_m3, notifications_m4, notifications_m5, notifications_m6, notifications_m9, notifications_main_group, punches_main_group, punches_pa, punches_pb, robim_external_ald, robim_external_iwit, robim_external_timp, robim_external_timp_text, themeConst, useIsMobile, useKeyboardNavigation, useListNavigator, usePanelStore, useSectionNavigator, workorders_main_group, workorders_pm01, workorders_pm02, workorders_pm03, workorders_pm04, workorders_pm05, workorders_pm06, workorders_pm10, workorders_pm15, workorders_pm20 };
 //# sourceMappingURL=index.js.map