@equinor/echo-components 0.7.2 → 0.7.5

package/dist/components/charts/lineChart/LineChart.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 /// <reference types="chart.js" />
-import { ChartData, Defaults } from 'chart.js/auto';
+import Chart, { ChartData, Defaults } from 'chart.js/auto';
 import { ChartCallbacks, LineChartConfig } from '../../../types/charts';
 interface Props {
     initialSize: Chart.ChartSize;
@@ -15,6 +15,7 @@ interface Props {
         callbacks?: ChartCallbacks;
     };
     lineChartConfig?: LineChartConfig;
+    onChartInstance?: (chartInstance: Chart | undefined) => void;
 }
-declare function LineChart({ initialSize, chartDataSet, chartTitle, xAxisTitle, yAxisTitle, id, testId, chartConfigs, lineChartConfig }: Props): JSX.Element;
+declare function LineChart({ initialSize, chartDataSet, chartTitle, xAxisTitle, yAxisTitle, id, testId, chartConfigs, lineChartConfig, onChartInstance }: Props): JSX.Element;
 export { LineChart };

package/dist/components/copyToClipboard/CopyToClipboard.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 export interface CopyToClipboardProps {
     copyableText: string;
+    variant?: 'neutral' | 'warning' | 'error' | 'success';
+    multiline?: boolean;
+    className?: string;
 }
 declare const CopyToClipboard: (props: CopyToClipboardProps) => JSX.Element;
 export { CopyToClipboard };

package/dist/components/floatingSearchBar/FloatingSearchBar.d.ts

@@ -40,5 +40,5 @@ interface SuggestionGroupProps {
     focusedOption: number;
 }
 declare function SuggestionGroup({ suggestionGroup, onClick, focusedOption }: SuggestionGroupProps): JSX.Element;
-export { FloatingSearchBar };
+export { FloatingSearchBar, SuggestionGroup };
 export type { Suggestion };

package/dist/hooks/useKeyboardNavigation.d.ts

@@ -1,3 +1,4 @@
+import { SuggestionGroup } from '../components';
 export type KeyboardEvents = {
     up?: Function;
     right?: Function;
@@ -6,16 +7,12 @@ export type KeyboardEvents = {
     enter?: Function;
     escape?: Function;
 };
-declare const useListNavigator: (listLength: number, initialIndex?: number, keyboardEvents?: KeyboardEvents, listenerTarget?: Document | HTMLElement) => number;
+declare const useKeyboardNavigation: (keyboardEvents: KeyboardEvents, listenerTarget?: HTMLElement | Document) => void;
 /**
- * 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?
+ * Handles keyboard navigation and key events in the floating search bar suggestions.
  */
-declare const useSectionNavigator: (sections: any[], initialSelected: number, keyboardEvents: KeyboardEvents, listenerTarget?: HTMLElement | Document) => {
+declare const useSearchBarSectionNavigator: (sections: SuggestionGroup[], initialSelected: number, keyboardEvents: KeyboardEvents, listenerTarget?: HTMLElement | Document) => {
     focusedSection: number;
     focusedOption: number;
 };
-declare const useKeyboardNavigation: (keyboardEvents: KeyboardEvents, listenerTarget?: HTMLElement | Document) => void;
-export { useListNavigator, useSectionNavigator, useKeyboardNavigation };
+export { useSearchBarSectionNavigator, useKeyboardNavigation };

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, useRef, createElement, Component, useCallback, PureComponent, useLayoutEffect, useMemo, createContext as createContext$1, useContext, forwardRef, isValidElement, cloneElement, useDebugValue } from 'react';
+import React__default, { useState, useEffect, useRef, useCallback, createElement, Component, PureComponent, useLayoutEffect, useMemo, createContext as createContext$1, useContext, forwardRef, isValidElement, cloneElement, useDebugValue } from 'react';
 import { Icon as Icon$1, Button, DotProgress, Banner, CircularProgress, Typography, TextField, Dialog, Search, Tooltip as Tooltip$2, Radio, Slider, Menu, Autocomplete } from '@equinor/eds-core-react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { findDOMNode, createPortal } from 'react-dom';
@@ -15341,43 +15341,56 @@ function LineChart(_ref) {
     testId = _ref$testId === void 0 ? 'em-line-chart' : _ref$testId,
     _ref$chartConfigs = _ref.chartConfigs,
     chartConfigs = _ref$chartConfigs === void 0 ? {} : _ref$chartConfigs,
-    lineChartConfig = _ref.lineChartConfig;
+    lineChartConfig = _ref.lineChartConfig,
+    onChartInstance = _ref.onChartInstance;
   var height = initialSize.height,
     width = initialSize.width;
   var defaults = chartConfigs.defaults,
     callbacks = chartConfigs.callbacks;
-  var initChartDefaults = function initChartDefaults() {
+  var canvasRef = useRef(null);
+  var chartInstanceRef = useRef(undefined);
+  var initChartDefaults = useCallback(function () {
     var _a, _b, _c, _d, _e;
     Chart.defaults.font.size = ((_a = defaults === null || defaults === void 0 ? void 0 : defaults.font) === null || _a === void 0 ? void 0 : _a.size) || 12;
     Chart.defaults.font.family = ((_b = defaults === null || defaults === void 0 ? void 0 : defaults.font) === null || _b === void 0 ? void 0 : _b.family) || 'Equinor';
     Chart.defaults.interaction.mode = ((_c = defaults === null || defaults === void 0 ? void 0 : defaults.interaction) === null || _c === void 0 ? void 0 : _c.mode) || 'nearest'; // popup
     Chart.defaults.elements.point.pointStyle = ((_e = (_d = defaults === null || defaults === void 0 ? void 0 : defaults.elements) === null || _d === void 0 ? void 0 : _d.point) === null || _e === void 0 ? void 0 : _e.pointStyle) || false;
-  };
-  var canvasRef = useRef(null);
-  var _useState = useState(undefined),
-    _useState2 = _slicedToArray(_useState, 2),
-    chartInstance = _useState2[0],
-    setChartInstance = _useState2[1];
-  useEffect(function () {
-    var canvas = canvasRef.current;
-    if (chartInstance || !canvas) return;
+  }, [defaults]);
+  var setupChartConfig = useCallback(function () {
     initChartDefaults();
-    var chartConfig;
-    if (lineChartConfig) chartConfig = lineChartConfig;else if (chartDataSet) {
+    var config;
+    if (lineChartConfig) config = lineChartConfig;else if (chartDataSet) {
       var options = {
         dataConfig: chartDataSet,
         chartTitle: chartTitle,
         xAxisTitle: xAxisTitle,
         yAxisTitle: yAxisTitle,
-        chartCallbacs: callbacks
+        chartCallbacks: callbacks
       };
-      chartConfig = generateChartConfig(options);
+      config = generateChartConfig(options);
     } else {
       throw new Error('Neither chartDataSet nor lineChartConfig were provided!');
     }
+    return config;
+  }, [callbacks, chartDataSet, chartTitle, initChartDefaults, lineChartConfig, xAxisTitle, yAxisTitle]);
+  useEffect(function () {
+    var canvas = canvasRef.current;
+    var chartInstance = chartInstanceRef.current;
+    if (!canvas) return;
+    if (chartInstance) chartInstance.destroy();
+    var chartConfig = setupChartConfig();
     var lineChart = new Chart(canvas, chartConfig);
-    setChartInstance(lineChart);
-  }, [callbacks, chartDataSet, chartInstance, chartTitle, initChartDefaults, lineChartConfig, xAxisTitle, yAxisTitle]);
+    onChartInstance === null || onChartInstance === void 0 ? void 0 : onChartInstance(lineChart);
+    chartInstanceRef.current = lineChart;
+    var cleanup = function cleanup() {
+      var chartInstance = chartInstanceRef.current;
+      if (chartInstance) {
+        chartInstance.destroy();
+        chartInstanceRef.current = undefined;
+      }
+    };
+    return cleanup;
+  }, [callbacks, chartDataSet, chartTitle, initChartDefaults, lineChartConfig, onChartInstance, setupChartConfig, xAxisTitle, yAxisTitle]);
   return /*#__PURE__*/React__default.createElement("canvas", {
     id: id,
     ref: canvasRef,
@@ -15959,16 +15972,24 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-var css_248z$x = ".CopyToClipboard-module_copyToClipboardContainer__xA1rT{cursor:pointer;display:flex;gap:.5rem}.CopyToClipboard-module_readonlyInput__rfIQF{border-bottom:1px solid var(--equiGray1);color:#bebebe;cursor:pointer;min-width:100px;pointer-events:none}.CopyToClipboard-module_textFieldSelector__0PJ8S{flex-grow:3}.CopyToClipboard-module_copyButton__XdBoF{max-width:100px}.CopyToClipboard-module_copyButton__XdBoF[aria-pressed=true]>*{border-color:var(--toggleActive);color:var(--toggleActive);font-size:.8rem}";
+var css_248z$x = ".CopyToClipboard-module_copyToClipboardContainer__xA1rT{color:#3d3d3d!important;cursor:pointer;display:flex;gap:.5rem;height:36px;min-width:100px}.CopyToClipboard-module_copyToClipboardContainer__xA1rT[aria-label=warning]{background-color:#ffe7d6!important}.CopyToClipboard-module_copyToClipboardContainer__xA1rT[aria-label=error]{background-color:#ffc1c1!important}.CopyToClipboard-module_copyToClipboardContainer__xA1rT[aria-label=success]{background-color:#e6faec!important}.CopyToClipboard-module_copyToClipboardContainer__xA1rT[aria-label$=-multiline]{align-items:center;height:unset}.CopyToClipboard-module_copyToClipboardContainer__xA1rT[aria-label$=warning-multiline]{background-color:#ffe7d6!important}.CopyToClipboard-module_copyToClipboardContainer__xA1rT[aria-label$=error-multiline]{background-color:#ffc1c1!important}.CopyToClipboard-module_copyToClipboardContainer__xA1rT[aria-label$=success-multiline]{background-color:#e6faec}.CopyToClipboard-module_readonlyInput__rfIQF{background-color:#dcdcdc!important;border-bottom:1px solid #dcdcdc;cursor:pointer;min-width:100px;pointer-events:none}.CopyToClipboard-module_readonlyInput__rfIQF>div>textarea{overflow-y:hidden}.CopyToClipboard-module_textFieldSelector__0PJ8S{flex-grow:3}.CopyToClipboard-module_copyButton__XdBoF{width:100px}.CopyToClipboard-module_copyButton__XdBoF[aria-label=error-button],.CopyToClipboard-module_copyButton__XdBoF[aria-label=success-button],.CopyToClipboard-module_copyButton__XdBoF[aria-label=warning-button]{background-color:inherit;border:1px solid #3d3d3d!important;color:#3d3d3d!important}.CopyToClipboard-module_copyButton__XdBoF[aria-pressed=true]>*{border-color:var(--toggleActive);font-size:.7rem}";
 var styles$o = {"copyToClipboardContainer":"CopyToClipboard-module_copyToClipboardContainer__xA1rT","readonlyInput":"CopyToClipboard-module_readonlyInput__rfIQF","textFieldSelector":"CopyToClipboard-module_textFieldSelector__0PJ8S","copyButton":"CopyToClipboard-module_copyButton__XdBoF"};
 styleInject(css_248z$x);
 
 var CopyToClipboard = function CopyToClipboard(props) {
   var _a;
+  if (!props.variant) props.variant = 'neutral';
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     textIsCopied = _useState2[0],
     setTextIsCopied = _useState2[1];
+  var edsRef = useRef(null);
+  useEffect(function autosizeTextarea() {
+    if (props.multiline && edsRef.current instanceof HTMLTextAreaElement) {
+      var textarea = edsRef.current.querySelector('textarea');
+      if (textarea) textarea.style.height = String(textarea.scrollHeight) + 'px';
+    }
+  }, [edsRef, props.multiline]);
   function handleClipboard(copyableText) {
     return __awaiter(this, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
       return regenerator.wrap(function _callee$(_context) {
@@ -15981,6 +16002,7 @@ var CopyToClipboard = function CopyToClipboard(props) {
             _context.next = 3;
             return navigator.clipboard.writeText(copyableText);
           case 3:
+            // This delay will reset the button label after a short period.
             setTimeout(function () {
               return setTextIsCopied(false);
             }, 2000);
@@ -15992,10 +16014,12 @@ var CopyToClipboard = function CopyToClipboard(props) {
       }, _callee);
     }));
   }
-  /** Handles the operation to highlight the text inside an input element while it is disabled. */
-  function handleReadonlySelect(originElement) {
-    var edsInput = originElement.querySelector('input');
-    if (edsInput instanceof HTMLInputElement) {
+  /** Handles the operation to highlight the text inside an input or textarea element while it is disabled. */
+  function handleReadonlySelect() {
+    if (!edsRef.current) return undefined;
+    var edsInput;
+    if (props.multiline) edsInput = edsRef.current.querySelector('textarea');else edsInput = edsRef.current.querySelector('input');
+    if (edsInput instanceof HTMLInputElement || edsInput instanceof HTMLTextAreaElement) {
       edsInput.disabled = false;
       edsInput.focus();
       edsInput.select();
@@ -16003,18 +16027,22 @@ var CopyToClipboard = function CopyToClipboard(props) {
     }
   }
   return /*#__PURE__*/React__default.createElement("div", {
-    className: styles$o.copyToClipboardContainer
+    className: styles$o.copyToClipboardContainer,
+    "aria-label": props.multiline ? "".concat(props.variant, "-multiline") : props.variant
   }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$o.textFieldSelector,
-    onClick: function onClick(e) {
-      return handleReadonlySelect(e.currentTarget);
+    onClick: function onClick() {
+      return handleReadonlySelect();
     }
   }, /*#__PURE__*/React__default.createElement(TextField, {
+    ref: edsRef,
     className: styles$o.readonlyInput,
     id: "copy-".concat((_a = props.copyableText) === null || _a === void 0 ? void 0 : _a.substring(0, 8)),
     value: props.copyableText,
-    disabled: true
+    disabled: true,
+    multiline: props.multiline
   })), /*#__PURE__*/React__default.createElement(Button, {
+    "aria-label": "".concat(props.variant, "-button"),
     className: styles$o.copyButton,
     variant: "outlined",
     onClick: function onClick() {
@@ -32715,55 +32743,30 @@ var Keys = {
   Enter: 'enter',
   Escape: 'escape'
 };
-var useListNavigator = function useListNavigator(listLength) {
-  var initialIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var keyboardEvents = arguments.length > 2 ? arguments[2] : undefined;
-  var listenerTarget = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : document;
-  var _useState = useState(initialIndex),
-    _useState2 = _slicedToArray(_useState, 2),
-    currIndex = _useState2[0],
-    setCurrIndex = _useState2[1];
-  var downHandler = useCallback(function (e) {
-    setCurrIndex(function (c) {
-      return c < listLength - 1 ? c + 1 : listLength - 1;
-    });
-  }, [listLength]);
-  var upHandler = useCallback(function (e) {
-    setCurrIndex(function (c) {
-      return c < 0 ? -1 : c - 1;
-    });
-  }, [listLength]);
-  var enter = useCallback(function () {
-    if (keyboardEvents === null || keyboardEvents === void 0 ? void 0 : keyboardEvents.enter) {
-      if (currIndex === -1) {
-        return;
-      }
-      keyboardEvents.enter(currIndex);
+var useKeyboardNavigation = function useKeyboardNavigation(keyboardEvents) {
+  var listenerTarget = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
+  var handleKeyDown = useCallback(function (e) {
+    var key = Keys[e.key];
+    var handler = keyboardEvents[key];
+    if (handler) {
+      handler(e);
     }
-  }, [currIndex, keyboardEvents]);
-  useKeyboardNavigation({
-    up: upHandler,
-    down: downHandler,
-    enter: enter
-  }, listenerTarget);
-  return currIndex;
+  }, [keyboardEvents]);
+  useEventListener('keydown', handleKeyDown, false, listenerTarget);
 };
 /**
- * 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?
+ * Handles keyboard navigation and key events in the floating search bar suggestions.
  */
-var useSectionNavigator = function useSectionNavigator(sections, initialSelected, keyboardEvents) {
+var useSearchBarSectionNavigator = function useSearchBarSectionNavigator(sections, initialSelected, keyboardEvents) {
   var listenerTarget = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : document;
+  var _useState = useState(initialSelected),
+    _useState2 = _slicedToArray(_useState, 2),
+    focusedSection = _useState2[0],
+    setFocusedSection = _useState2[1];
   var _useState3 = useState(initialSelected),
     _useState4 = _slicedToArray(_useState3, 2),
-    focusedSection = _useState4[0],
-    setFocusedSection = _useState4[1];
-  var _useState5 = useState(initialSelected),
-    _useState6 = _slicedToArray(_useState5, 2),
-    focusedOption = _useState6[0],
-    setFocusedOption = _useState6[1];
+    focusedOption = _useState4[0],
+    setFocusedOption = _useState4[1];
   var up = useCallback(function () {
     var nextSection = focusedSection;
     var nextOption = focusedOption;
@@ -32841,17 +32844,6 @@ var useSectionNavigator = function useSectionNavigator(sections, initialSelected
     focusedOption: focusedOption
   };
 };
-var useKeyboardNavigation = function useKeyboardNavigation(keyboardEvents) {
-  var listenerTarget = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
-  var handleKeyDown = useCallback(function (e) {
-    var key = Keys[e.key];
-    var handler = keyboardEvents[key];
-    if (handler) {
-      handler(e);
-    }
-  }, [keyboardEvents]);
-  useEventListener('keydown', handleKeyDown, false, listenerTarget);
-};
 
 var css_248z$m = ".floatingSearchBar-module_searchbarWrapper__-sSMM{max-width:404px;position:relative}.floatingSearchBar-module_searchbar__0U3fZ div[class^=Input__Container]{background:none;box-shadow:none;height:48px}.floatingSearchBar-module_searchbar__0U3fZ div[class^=Input__Container]:focus-within{outline:none}.floatingSearchBar-module_searchbar__0U3fZ input{background:rgba(0,0,0,.8);border-radius:4px;color:#dee5e7}.floatingSearchBar-module_searchbar__0U3fZ svg{color:#dee5e7}.floatingSearchBar-module_searchbar__0U3fZ input::placeholder{color:#dee5e7}.floatingSearchBar-module_searchbar__0U3fZ input:focus,.floatingSearchBar-module_searchbar__0U3fZ input:hover{background:rgba(0,0,0,.9)}.floatingSearchBar-module_searchbar__0U3fZ button{opacity:.6}.floatingSearchBar-module_searchbar__0U3fZ button:hover{background:transparent;opacity:1}.floatingSearchBar-module_searchbar__0U3fZ button:focus{opacity:1;outline-color:var(--white)}.floatingSearchBar-module_items__oxyVh{background:rgba(0,0,0,.9);border-radius:4px;margin-top:4px;max-height:400px;overflow:auto;padding:8px 0;position:absolute;width:100%}.floatingSearchBar-module_items__oxyVh::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.25);border:2px solid hsla(0,0%,100%,.06)}.floatingSearchBar-module_items__oxyVh::-webkit-scrollbar-track{background:rgba(0,0,0,.9)}.floatingSearchBar-module_groupWrapper__B6-q3{color:var(--white);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem;list-style:none;margin:0;padding:0}.floatingSearchBar-module_groupTitle__3fYBM{border-bottom:1px solid hsla(0,0%,100%,.16);padding:.5rem 1rem}.floatingSearchBar-module_item__nxfxG{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;gap:1rem;padding:1rem 1.25rem}.floatingSearchBar-module_item__nxfxG svg{min-width:24px}.floatingSearchBar-module_loading__lY-99{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;gap:1rem;justify-content:center;padding:1rem 1.25rem}.floatingSearchBar-module_item__nxfxG:hover{background:hsla(0,0%,100%,.16);cursor:pointer}.floatingSearchBar-module_activeItem__IQ7gz{background:hsla(0,0%,100%,.16)}";
 var style$2 = {"searchbarWrapper":"floatingSearchBar-module_searchbarWrapper__-sSMM","searchbar":"floatingSearchBar-module_searchbar__0U3fZ","items":"floatingSearchBar-module_items__oxyVh","groupWrapper":"floatingSearchBar-module_groupWrapper__B6-q3","groupTitle":"floatingSearchBar-module_groupTitle__3fYBM","item":"floatingSearchBar-module_item__nxfxG","loading":"floatingSearchBar-module_loading__lY-99","activeItem":"floatingSearchBar-module_activeItem__IQ7gz"};
@@ -32884,13 +32876,14 @@ var FloatingSearchBar = function FloatingSearchBar(_ref) {
     setIsOpen(true);
   };
   var closeMenu = function closeMenu() {
-    if (isOpen) {
-      setIsOpen(false);
-    }
+    if (isOpen) setIsOpen(false);
   };
   EchoUtils.Hooks.useOnOutsideClick(closeMenu, {
     refs: [containerRef]
   });
+  useKeyboardNavigation({
+    escape: closeMenu
+  });
   function onClick(suggestion) {
     setValue(suggestion.label);
     closeMenu();
@@ -32900,9 +32893,7 @@ var FloatingSearchBar = function FloatingSearchBar(_ref) {
     ref: containerRef,
     className: style$2.searchbarWrapper,
     onFocus: function onFocus() {
-      if (value) {
-        openMenu();
-      }
+      return value && openMenu();
     },
     autoComplete: 'off',
     onSubmit: function onSubmit(e) {
@@ -32916,14 +32907,12 @@ var FloatingSearchBar = function FloatingSearchBar(_ref) {
     "aria-haspopup": "true",
     className: style$2.searchbar,
     onChange: function onChange(e) {
+      //TODO: Prevent up and down arrow keys from moving the cursor back and forth.
+      // It appears EDS swallows the Up and Down arrow events.
       var val = e.target.value;
       setValue(val);
       onSearchQueryChange(val);
-      if (val === '') {
-        closeMenu();
-      } else if (!isOpen) {
-        openMenu();
-      }
+      if (val === '') closeMenu();else if (!isOpen) openMenu();
     },
     value: value
   }), isOpen && /*#__PURE__*/React__default.createElement("div", {
@@ -32946,15 +32935,15 @@ function SearchSuggestions(_ref2) {
   var suggestionGroups = _ref2.suggestionGroups,
     containerRef = _ref2.containerRef,
     onClick = _ref2.onClick;
-  var _useSectionNavigator = useSectionNavigator(suggestionGroups, -1, {
+  var _useSearchBarSectionN = useSearchBarSectionNavigator(suggestionGroups, 0, {
       enter: function enter() {
         var section = suggestionGroups[focusedSection];
         var option = section.options[focusedOption];
         onClick(option);
       }
     }, containerRef !== null && containerRef !== void 0 ? containerRef : undefined),
-    focusedSection = _useSectionNavigator.focusedSection,
-    focusedOption = _useSectionNavigator.focusedOption;
+    focusedSection = _useSearchBarSectionN.focusedSection,
+    focusedOption = _useSearchBarSectionN.focusedOption;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, suggestionGroups.map(function (suggestionGroup, index) {
     return /*#__PURE__*/React__default.createElement(SuggestionGroup, {
       suggestionGroup: suggestionGroup,
@@ -33216,7 +33205,7 @@ function LayerLegend(_ref) {
   }, children));
 }
 
-var css_248z$i = ".listItem-module_flexContainer__coznC{display:flex;flex-flow:row nowrap;justify-content:flex-start}.listItem-module_container__sivKu{align-items:center;box-sizing:border-box;gap:.5rem;min-height:48px;padding:0 1rem}.listItem-module_listItemContainer__MtMLQ{border-bottom:1px solid var(--default)}.listItem-module_hoverItem__bPUhP:first-child{border-top:1px solid var(--default)}.listItem-module_hoverItem__bPUhP:hover{background-color:var(--equiGray5);cursor:pointer}.listItem-module_infoContainer__V0R7i{align-items:center;display:grid;flex-grow:1;gap:.2rem;grid-template-columns:1fr}.listItem-module_icon__lHCt6{align-items:center;border-radius:50%;display:flex;flex-direction:column;justify-content:center;padding:.5rem;width:max-content}";
+var css_248z$i = ".listItem-module_flexContainer__coznC{display:flex;flex-flow:row nowrap;justify-content:flex-start}.listItem-module_container__sivKu{align-items:center;box-sizing:border-box;gap:.5rem;padding:.625rem 1rem}.listItem-module_listItemContainer__MtMLQ{border-bottom:1px solid var(--default)}.listItem-module_hoverItem__bPUhP:first-child{border-top:1px solid var(--default)}.listItem-module_hoverItem__bPUhP:hover{background-color:var(--equiGray5);cursor:pointer}.listItem-module_infoContainer__V0R7i{align-items:center;display:grid;flex-grow:1;gap:.2rem;grid-template-columns:1fr}.listItem-module_icon__lHCt6{align-items:center;border-radius:50%;display:flex;flex-direction:column;justify-content:center;padding:.5rem;width:max-content}";
 var styles$g = {"flexContainer":"listItem-module_flexContainer__coznC","container":"listItem-module_container__sivKu listItem-module_flexContainer__coznC","listItemContainer":"listItem-module_listItemContainer__MtMLQ listItem-module_container__sivKu listItem-module_flexContainer__coznC","hoverItem":"listItem-module_hoverItem__bPUhP","infoContainer":"listItem-module_infoContainer__V0R7i","icon":"listItem-module_icon__lHCt6"};
 styleInject(css_248z$i);
 
@@ -33238,8 +33227,7 @@ function ListItem(props) {
   }, props.listAction, props.visual, props.icon && /*#__PURE__*/React__default.createElement("div", {
     className: styles$g.icon,
     style: {
-      backgroundColor: props.icon.backgroundColor,
-      margin: props.icon.backgroundColor ? '0.5rem 0' : ''
+      backgroundColor: props.icon.backgroundColor
     }
   }, /*#__PURE__*/React__default.createElement(Icon$1, {
     name: props.icon.name,
@@ -39417,7 +39405,8 @@ function SheetTopArea(_ref) {
     onOrientationChange: onOrientationChange
   }), closeSheet && /*#__PURE__*/React__default.createElement(Button, {
     variant: "ghost_icon",
-    onClick: closeSheet
+    onClick: closeSheet,
+    "aria-label": "Close"
   }, /*#__PURE__*/React__default.createElement(Icon$1, {
     name: "close",
     color: "var(--asBuilt)"
@@ -39442,7 +39431,8 @@ function SheetOrientationActions(_ref2) {
     variant: "ghost_icon",
     onClick: function onClick() {
       return handleChange(SideSheetOrientation.Vertical);
-    }
+    },
+    "aria-label": "Set sheet orientation Vertical"
   }, /*#__PURE__*/React__default.createElement(Icon$1, {
     name: "sheet_leftposition",
     color: calculateColor(SideSheetOrientation.Vertical)
@@ -39450,7 +39440,8 @@ function SheetOrientationActions(_ref2) {
     variant: "ghost_icon",
     onClick: function onClick() {
       return handleChange(SideSheetOrientation.Horizontal);
-    }
+    },
+    "aria-label": "Set sheet orientation Horizontal"
   }, /*#__PURE__*/React__default.createElement(Icon$1, {
     name: "sheet_bottom_position",
     color: calculateColor(SideSheetOrientation.Horizontal)
@@ -39458,7 +39449,8 @@ function SheetOrientationActions(_ref2) {
     variant: "ghost_icon",
     onClick: function onClick() {
       return handleChange(SideSheetOrientation.Fullscreen);
-    }
+    },
+    "aria-label": "Set sheet orientation Fullscreen"
   }, /*#__PURE__*/React__default.createElement(Icon$1, {
     name: "fullscreen",
     color: calculateColor(SideSheetOrientation.Fullscreen)
@@ -40202,5 +40194,5 @@ var OptionsList = function OptionsList(_ref) {
   }));
 };
 
-export { BlackLink, ButtonWithPopover, ContextMenu, CopyToClipboard, DataInfoButton, DialogGenerator, DraggableItemsWrapper, Dropdown, EchoBottomBar, EchoCard, EchoHeader, EchoTooltip, FloatingActionButton, FloatingSearchBar, Icon, IconList, InlineTagIconLink, LayerLegend, LineChart, LinkCard, ListItem, ListRow, MainLegend, MenuButton, OptionsList, Panel, PanelContent, PanelContentWrapper, PanelWrapper, RadioButtonGroup, ReactDatePicker, RoundIconButton, RoundIconButtonVariants, SideSheet, SideSheetOrientation, SidebarButton, SliderField, SplitView, TagCategoryIcon, TagCategoryType, TagContextMenu, TagIcon, TagIconShadowWrapper, TextIconButton, TimePicker, WorkOrderListItem, classnames$3 as classnames, echoIcons, getIcon, map_legend_info, 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_methane_sensor, robim_external_satellite, 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 };
+export { BlackLink, ButtonWithPopover, ContextMenu, CopyToClipboard, DataInfoButton, DialogGenerator, DraggableItemsWrapper, Dropdown, EchoBottomBar, EchoCard, EchoHeader, EchoTooltip, FloatingActionButton, FloatingSearchBar, Icon, IconList, InlineTagIconLink, LayerLegend, LineChart, LinkCard, ListItem, ListRow, MainLegend, MenuButton, OptionsList, Panel, PanelContent, PanelContentWrapper, PanelWrapper, RadioButtonGroup, ReactDatePicker, RoundIconButton, RoundIconButtonVariants, SideSheet, SideSheetOrientation, SidebarButton, SliderField, SplitView, SuggestionGroup, TagCategoryIcon, TagCategoryType, TagContextMenu, TagIcon, TagIconShadowWrapper, TextIconButton, TimePicker, WorkOrderListItem, classnames$3 as classnames, echoIcons, getIcon, map_legend_info, 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_methane_sensor, robim_external_satellite, robim_external_timp, robim_external_timp_text, themeConst, useIsMobile, useKeyboardNavigation, usePanelStore, useSearchBarSectionNavigator, workorders_main_group, workorders_pm01, workorders_pm02, workorders_pm03, workorders_pm04, workorders_pm05, workorders_pm06, workorders_pm10, workorders_pm15, workorders_pm20 };
 //# sourceMappingURL=index.js.map