@equinor/echo-components 0.6.2 → 0.6.4

package/dist/components/legend/MainLegend.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { LayerInfo } from '@types';
 interface MainLegendProps {
     /**
@@ -9,6 +9,14 @@ interface MainLegendProps {
      * Layer information
      */
     layers: LayerInfo[];
+    /**
+     * Styling for the main legend
+     */
+    legendStyle?: CSSProperties;
+    /**
+     * Styling for the content of the legend
+     */
+    legendContentStyle?: CSSProperties;
 }
-declare function MainLegend({ legends, layers }: MainLegendProps): JSX.Element;
+declare function MainLegend({ legends, layers, legendStyle, legendContentStyle }: MainLegendProps): JSX.Element;
 export { MainLegend };

package/dist/components/legend/layerLegend/LayerLegend.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 interface LayerLegendProps {
     /**
      * Layer title
@@ -24,6 +24,10 @@ interface LayerLegendProps {
      * Used to disable layer legend usage
      */
     disabled?: boolean;
+    /**
+     * Styling for the content of the legend
+     */
+    style?: CSSProperties;
 }
-declare function LayerLegend({ title, iconName, itemsCount, itemsTitle, children, disabled }: LayerLegendProps): JSX.Element;
+declare function LayerLegend({ title, iconName, itemsCount, itemsTitle, children, disabled, style }: LayerLegendProps): JSX.Element;
 export { LayerLegend };

package/dist/index.js

@@ -17675,198 +17675,6 @@ var FloatingActionButton = function FloatingActionButton(_ref) {
   }), variant === 'square_icon_with_text' && label);
 };
 
-var css_248z$m = ".floatingSearchBar-module_searchbarWrapper__-sSMM{max-width:344px;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"};
-styleInject(css_248z$m);
-
-var useEventListener = function useEventListener(eventName, handler, options) {
-  var element = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : document;
-  var savedHandler = useRef();
-  useEffect(function () {
-    savedHandler.current = handler;
-  }, [handler]);
-  useEffect(function () {
-    if (!element || !element.addEventListener) {
-      return;
-    }
-    var eventListener = function eventListener(event) {
-      return savedHandler.current(event);
-    };
-    element.addEventListener(eventName, eventListener, options);
-    return function () {
-      element.removeEventListener(eventName, eventListener, options);
-    };
-  }, [eventName, element, options]);
-};
-
-var useInitial = EchoUtils.Hooks.useInitial;
-/**
- * Hook for checking if page is loaded from mobile device.
- * @returns boolean true if on mobile.
- */
-function useIsMobile() {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isMobile = _useState2[0],
-    setIsMobile = _useState2[1];
-  useInitial(function () {
-    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
-      // true for mobile device
-      setIsMobile(true);
-    } else {
-      // false for not mobile device
-      setIsMobile(false);
-    }
-  });
-  return isMobile;
-}
-
-var Keys = {
-  ArrowUp: 'up',
-  ArrowRight: 'right',
-  ArrowDown: 'down',
-  ArrowLeft: 'left',
-  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);
-    }
-  }, [currIndex, keyboardEvents]);
-  useKeyboardNavigation({
-    up: upHandler,
-    down: downHandler,
-    enter: enter
-  }, 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?
- */
-var useSectionNavigator = function useSectionNavigator(sections, initialSelected, keyboardEvents) {
-  var listenerTarget = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : document;
-  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];
-  var up = useCallback(function () {
-    var nextSection = focusedSection;
-    var nextOption = focusedOption;
-    if (nextOption > 0) {
-      // there exists more options in this section
-      setFocusedOption(nextOption - 1);
-    } else {
-      // we're on the first option in section and should move to a previous section.
-      if (nextSection > 0) {
-        nextSection -= 1;
-        // getting last index of option in section
-        nextOption = sections[nextSection].options.length - 1;
-        setFocusedSection(nextSection);
-        setFocusedOption(nextOption);
-      } else {
-        // if initial is deselected -- we add this step.
-        if (initialSelected === -1 && focusedOption === 0 && focusedSection === 0) {
-          // deselect
-          setFocusedSection(-1);
-          setFocusedOption(-1);
-        } else {
-          // we're at deselected - move user down to end
-          nextSection = sections.length - 1;
-          nextOption = sections[nextSection].options.length - 1;
-          setFocusedSection(nextSection);
-          setFocusedOption(nextOption);
-        }
-      }
-    }
-  }, [sections, focusedSection, focusedOption]);
-  var down = useCallback(function () {
-    var _a, _b;
-    var nextSection = focusedSection;
-    var nextOption = focusedOption;
-    if (nextOption < ((_b = (_a = sections[nextSection]) === null || _a === void 0 ? void 0 : _a.options.length) !== null && _b !== void 0 ? _b : 0) - 1) {
-      setFocusedOption(nextOption + 1);
-    } else {
-      // we're at the end of options in section
-      if (nextSection < sections.length - 1) {
-        // there exists more sections
-        setFocusedSection(nextSection + 1);
-        setFocusedOption(0);
-      } else {
-        // we're at the end of sections - back to start (de-selected).
-        // props says we need a deselected step
-        if (initialSelected === -1) {
-          setFocusedSection(-1);
-          setFocusedOption(-1);
-        } else {
-          setFocusedSection(0);
-          setFocusedOption(0);
-        }
-      }
-    }
-  }, [sections, focusedSection, focusedOption]);
-  var enter = useCallback(function () {
-    if (keyboardEvents.enter) {
-      if (focusedOption === -1 && focusedSection === -1) {
-        return;
-      }
-      keyboardEvents.enter(focusedSection, focusedOption);
-    }
-  }, [focusedSection, focusedOption, keyboardEvents]);
-  var escape = useCallback(function () {
-    keyboardEvents.escape && keyboardEvents.escape();
-  }, [focusedSection, focusedOption, keyboardEvents]);
-  useKeyboardNavigation({
-    up: up,
-    down: down,
-    enter: enter,
-    escape: escape
-  }, listenerTarget);
-  return {
-    focusedSection: focusedSection,
-    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);
-};
-
 function classnames$1() {
   for (var _len = arguments.length, parts = new Array(_len), _key = 0; _key < _len; _key++) {
     parts[_key] = arguments[_key];
@@ -18220,6 +18028,198 @@ function getIcon(tagCategoryDescription) {
   });
 }
 
+var useEventListener = function useEventListener(eventName, handler, options) {
+  var element = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : document;
+  var savedHandler = useRef();
+  useEffect(function () {
+    savedHandler.current = handler;
+  }, [handler]);
+  useEffect(function () {
+    if (!element || !element.addEventListener) {
+      return;
+    }
+    var eventListener = function eventListener(event) {
+      return savedHandler.current(event);
+    };
+    element.addEventListener(eventName, eventListener, options);
+    return function () {
+      element.removeEventListener(eventName, eventListener, options);
+    };
+  }, [eventName, element, options]);
+};
+
+var useInitial = EchoUtils.Hooks.useInitial;
+/**
+ * Hook for checking if page is loaded from mobile device.
+ * @returns boolean true if on mobile.
+ */
+function useIsMobile() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMobile = _useState2[0],
+    setIsMobile = _useState2[1];
+  useInitial(function () {
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      // true for mobile device
+      setIsMobile(true);
+    } else {
+      // false for not mobile device
+      setIsMobile(false);
+    }
+  });
+  return isMobile;
+}
+
+var Keys = {
+  ArrowUp: 'up',
+  ArrowRight: 'right',
+  ArrowDown: 'down',
+  ArrowLeft: 'left',
+  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);
+    }
+  }, [currIndex, keyboardEvents]);
+  useKeyboardNavigation({
+    up: upHandler,
+    down: downHandler,
+    enter: enter
+  }, 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?
+ */
+var useSectionNavigator = function useSectionNavigator(sections, initialSelected, keyboardEvents) {
+  var listenerTarget = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : document;
+  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];
+  var up = useCallback(function () {
+    var nextSection = focusedSection;
+    var nextOption = focusedOption;
+    if (nextOption > 0) {
+      // there exists more options in this section
+      setFocusedOption(nextOption - 1);
+    } else {
+      // we're on the first option in section and should move to a previous section.
+      if (nextSection > 0) {
+        nextSection -= 1;
+        // getting last index of option in section
+        nextOption = sections[nextSection].options.length - 1;
+        setFocusedSection(nextSection);
+        setFocusedOption(nextOption);
+      } else {
+        // if initial is deselected -- we add this step.
+        if (initialSelected === -1 && focusedOption === 0 && focusedSection === 0) {
+          // deselect
+          setFocusedSection(-1);
+          setFocusedOption(-1);
+        } else {
+          // we're at deselected - move user down to end
+          nextSection = sections.length - 1;
+          nextOption = sections[nextSection].options.length - 1;
+          setFocusedSection(nextSection);
+          setFocusedOption(nextOption);
+        }
+      }
+    }
+  }, [sections, focusedSection, focusedOption]);
+  var down = useCallback(function () {
+    var _a, _b;
+    var nextSection = focusedSection;
+    var nextOption = focusedOption;
+    if (nextOption < ((_b = (_a = sections[nextSection]) === null || _a === void 0 ? void 0 : _a.options.length) !== null && _b !== void 0 ? _b : 0) - 1) {
+      setFocusedOption(nextOption + 1);
+    } else {
+      // we're at the end of options in section
+      if (nextSection < sections.length - 1) {
+        // there exists more sections
+        setFocusedSection(nextSection + 1);
+        setFocusedOption(0);
+      } else {
+        // we're at the end of sections - back to start (de-selected).
+        // props says we need a deselected step
+        if (initialSelected === -1) {
+          setFocusedSection(-1);
+          setFocusedOption(-1);
+        } else {
+          setFocusedSection(0);
+          setFocusedOption(0);
+        }
+      }
+    }
+  }, [sections, focusedSection, focusedOption]);
+  var enter = useCallback(function () {
+    if (keyboardEvents.enter) {
+      if (focusedOption === -1 && focusedSection === -1) {
+        return;
+      }
+      keyboardEvents.enter(focusedSection, focusedOption);
+    }
+  }, [focusedSection, focusedOption, keyboardEvents]);
+  var escape = useCallback(function () {
+    keyboardEvents.escape && keyboardEvents.escape();
+  }, [focusedSection, focusedOption, keyboardEvents]);
+  useKeyboardNavigation({
+    up: up,
+    down: down,
+    enter: enter,
+    escape: escape
+  }, listenerTarget);
+  return {
+    focusedSection: focusedSection,
+    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"};
+styleInject(css_248z$m);
+
 /**
  * Floating search bar
  *
@@ -18263,7 +18263,9 @@ var FloatingSearchBar = function FloatingSearchBar(_ref) {
     ref: containerRef,
     className: style$2.searchbarWrapper,
     onFocus: function onFocus() {
-      return openMenu();
+      if (value) {
+        openMenu();
+      }
     },
     autoComplete: 'off',
     onSubmit: function onSubmit(e) {
@@ -18277,17 +18279,17 @@ var FloatingSearchBar = function FloatingSearchBar(_ref) {
     "aria-haspopup": "true",
     className: style$2.searchbar,
     onChange: function onChange(e) {
-      var value = e.target.value;
-      setValue(value);
-      onSearchQueryChange(value);
-      if (value === '') {
+      var val = e.target.value;
+      setValue(val);
+      onSearchQueryChange(val);
+      if (val === '') {
         closeMenu();
       } else if (!isOpen) {
         openMenu();
       }
     },
     value: value
-  }), (isLoading || isOpen) && /*#__PURE__*/React__default.createElement("div", {
+  }), isOpen && /*#__PURE__*/React__default.createElement("div", {
     className: style$2.items
   }, isLoading && /*#__PURE__*/React__default.createElement("li", {
     className: style$2.loading,
@@ -18411,8 +18413,8 @@ var InlineTagIconLink = function InlineTagIconLink(_ref) {
   }, description)));
 };
 
-var css_248z$k = ".MainLegend-module_accordion__xjveF{align-items:center;align-self:flex-start;background:rgba(0,0,0,.65);border-radius:4px;color:var(--white);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;height:2.25rem;justify-content:space-between;padding:8px 14px;user-select:none;width:100%}.MainLegend-module_accordion__xjveF:hover{background:rgba(0,0,0,.9);color:var(--white)}.MainLegend-module_left__NKMwB,.MainLegend-module_right__0BIFF{align-items:center;display:flex}.MainLegend-module_icon__neT4f{margin-right:8px}.MainLegend-module_content__nzDkL{align-self:stretch;display:flex;flex-direction:column}button{padding:0}.MainLegend-module_layerIcon__xI2Mf{margin-right:10px}.MainLegend-module_layerIcon__xI2Mf:last-of-type{margin-right:0}";
-var styles$i = {"accordion":"MainLegend-module_accordion__xjveF","left":"MainLegend-module_left__NKMwB","right":"MainLegend-module_right__0BIFF","icon":"MainLegend-module_icon__neT4f","content":"MainLegend-module_content__nzDkL","layerIcon":"MainLegend-module_layerIcon__xI2Mf"};
+var css_248z$k = ".MainLegend-module_accordion__xjveF{align-items:center;align-self:flex-start;background:rgba(0,0,0,.65);border-radius:4px;color:var(--white);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;height:2.25rem;justify-content:space-between;margin-top:2px;max-width:460px;padding:8px 14px;user-select:none;width:100%}.MainLegend-module_accordionDesktop__Z7SS-:hover{background:rgba(0,0,0,.9);color:var(--white)}.MainLegend-module_accordionMobile__tOTvf{width:278px}.MainLegend-module_left__NKMwB,.MainLegend-module_right__0BIFF{align-items:center;display:flex}.MainLegend-module_icon__neT4f{margin-right:8px}.MainLegend-module_content__nzDkL{align-self:stretch;display:flex;flex-direction:column;overflow:auto;padding-right:4px}.MainLegend-module_content__nzDkL::-webkit-scrollbar{width:8px}.MainLegend-module_content__nzDkL::-webkit-scrollbar-thumb{background:rgba(0,0,0,.65)}.MainLegend-module_content__nzDkL::-webkit-scrollbar-track{background:none}.MainLegend-module_contentMobile__msQoO{padding-right:0;width:278px}.MainLegend-module_contentMobile__msQoO::-webkit-scrollbar{display:none}.MainLegend-module_layerIcon__xI2Mf{margin-right:10px}.MainLegend-module_layerIcon__xI2Mf:last-of-type{margin-right:0}";
+var styles$i = {"accordion":"MainLegend-module_accordion__xjveF","accordionDesktop":"MainLegend-module_accordionDesktop__Z7SS- MainLegend-module_accordion__xjveF","accordionMobile":"MainLegend-module_accordionMobile__tOTvf MainLegend-module_accordion__xjveF","left":"MainLegend-module_left__NKMwB","right":"MainLegend-module_right__0BIFF","icon":"MainLegend-module_icon__neT4f","content":"MainLegend-module_content__nzDkL","contentMobile":"MainLegend-module_contentMobile__msQoO MainLegend-module_content__nzDkL","layerIcon":"MainLegend-module_layerIcon__xI2Mf"};
 styleInject(css_248z$k);
 
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
@@ -18442,8 +18444,11 @@ function separateLayers(layers) {
   return [iconLayers, nonIconLayers];
 }
 function MainLegend(_ref) {
+  var _classnames, _classnames2;
   var legends = _ref.legends,
-    layers = _ref.layers;
+    layers = _ref.layers,
+    legendStyle = _ref.legendStyle,
+    legendContentStyle = _ref.legendContentStyle;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     defaultLayers = _useState2[0],
@@ -18477,10 +18482,14 @@ function MainLegend(_ref) {
     }).join(' ');
     return undefined;
   };
+  var accordion = classnames$1((_classnames = {}, _defineProperty$1(_classnames, styles$i.accordionMobile, isMobile), _defineProperty$1(_classnames, styles$i.accordionDesktop, !isMobile), _classnames));
+  var content = classnames$1((_classnames2 = {}, _defineProperty$1(_classnames2, styles$i.contentMobile, isMobile), _defineProperty$1(_classnames2, styles$i.content, !isMobile), _classnames2));
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isOpen && /*#__PURE__*/React__default.createElement("div", {
-    className: styles$i.content
+    style: legendContentStyle,
+    className: content
   }, legends), /*#__PURE__*/React__default.createElement("button", {
-    className: styles$i.accordion,
+    style: legendStyle,
+    className: accordion,
     onClick: toggle,
     role: "widget"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -18514,32 +18523,36 @@ function MainLegend(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", null, "+", defaultLayers.length)))));
 }
 
-var css_248z$j = ".LayerLegend-module_layerLegendContainer__DLfLy{background:rgba(0,0,0,.65);border-radius:4px;color:var(--white);cursor:pointer;font-weight:500;margin-bottom:2px;user-select:none}.LayerLegend-module_header__8NHIX{align-items:center;display:flex;height:2.5rem;justify-content:space-between;padding:12px;width:100%}.LayerLegend-module_activeHeader__EBvGl:hover{background:rgba(0,0,0,.9);border-radius:4px;color:var(--white)}.LayerLegend-module_leftInactive__1Lq18{align-items:center;display:flex;font-size:.875rem}.LayerLegend-module_leftActive__KrRDh{font-weight:700}.LayerLegend-module_right__-IwVs{align-items:center;display:flex;font-size:.625rem}.LayerLegend-module_icon__8VwWd{margin-right:8px}.LayerLegend-module_content__ElkbY{height:auto;padding-bottom:14px;padding-top:8px;width:100%}.LayerLegend-module_items__BC1cp{margin-right:4px}";
-var styles$h = {"layerLegendContainer":"LayerLegend-module_layerLegendContainer__DLfLy","header":"LayerLegend-module_header__8NHIX","activeHeader":"LayerLegend-module_activeHeader__EBvGl LayerLegend-module_header__8NHIX","disabledHeader":"LayerLegend-module_disabledHeader__Rd25i LayerLegend-module_header__8NHIX","leftInactive":"LayerLegend-module_leftInactive__1Lq18","leftActive":"LayerLegend-module_leftActive__KrRDh LayerLegend-module_leftInactive__1Lq18","right":"LayerLegend-module_right__-IwVs","icon":"LayerLegend-module_icon__8VwWd","content":"LayerLegend-module_content__ElkbY","items":"LayerLegend-module_items__BC1cp"};
+var css_248z$j = ".LayerLegend-module_layerLegendContainer__DLfLy{background:rgba(0,0,0,.65);border-radius:4px;color:var(--white);cursor:pointer;font-weight:500;margin-bottom:2px;max-width:460px;user-select:none}.LayerLegend-module_layerLegendContainer__DLfLy:last-of-type{margin-bottom:0}.LayerLegend-module_header__8NHIX{align-items:center;display:flex;height:2.5rem;justify-content:space-between;padding:12px;width:100%}.LayerLegend-module_desktopHeader__ztHh3{cursor:pointer}.LayerLegend-module_desktopHeader__ztHh3:hover{background:rgba(0,0,0,.9);border-radius:4px;color:var(--white)}.LayerLegend-module_leftInactive__1Lq18{align-items:center;display:flex;font-size:.875rem}.LayerLegend-module_leftActive__KrRDh{font-weight:700}.LayerLegend-module_right__-IwVs{align-items:center;display:flex;font-size:.625rem}.LayerLegend-module_icon__8VwWd{margin-right:8px}.LayerLegend-module_content__ElkbY{cursor:auto;height:auto;padding-bottom:14px;padding-top:8px;width:100%}.LayerLegend-module_items__BC1cp{margin-right:4px}";
+var styles$h = {"layerLegendContainer":"LayerLegend-module_layerLegendContainer__DLfLy","header":"LayerLegend-module_header__8NHIX","desktopHeader":"LayerLegend-module_desktopHeader__ztHh3 LayerLegend-module_header__8NHIX","mobileHeader":"LayerLegend-module_mobileHeader__qDHmS LayerLegend-module_header__8NHIX","disabledHeader":"LayerLegend-module_disabledHeader__Rd25i LayerLegend-module_header__8NHIX","leftInactive":"LayerLegend-module_leftInactive__1Lq18","leftActive":"LayerLegend-module_leftActive__KrRDh LayerLegend-module_leftInactive__1Lq18","right":"LayerLegend-module_right__-IwVs","icon":"LayerLegend-module_icon__8VwWd","content":"LayerLegend-module_content__ElkbY","items":"LayerLegend-module_items__BC1cp"};
 styleInject(css_248z$j);
 
 function LayerLegend(_ref) {
-  var _classnames;
+  var _classnames, _classnames2;
   var title = _ref.title,
     iconName = _ref.iconName,
     itemsCount = _ref.itemsCount,
     itemsTitle = _ref.itemsTitle,
     children = _ref.children,
-    disabled = _ref.disabled;
+    disabled = _ref.disabled,
+    style = _ref.style;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var isMobile = useIsMobile();
   var toggle = function toggle() {
     setIsOpen(function (isOpen) {
       return !isOpen;
     });
   };
   var left = classnames$1((_classnames = {}, _defineProperty$1(_classnames, styles$h.leftActive, isOpen), _defineProperty$1(_classnames, styles$h.leftInactive, !isOpen), _classnames));
+  var header = classnames$1((_classnames2 = {}, _defineProperty$1(_classnames2, styles$h.mobileHeader, isMobile), _defineProperty$1(_classnames2, styles$h.desktopHeader, !isMobile), _classnames2));
   return /*#__PURE__*/React__default.createElement("div", {
+    style: style,
     className: styles$h.layerLegendContainer
   }, /*#__PURE__*/React__default.createElement("button", {
-    className: disabled ? styles$h.disabledHeader : styles$h.activeHeader,
+    className: disabled ? styles$h.disabledHeader : header,
     onClick: toggle,
     "aria-expanded": isOpen,
     "aria-controls": "legendContent",
@@ -18552,9 +18565,9 @@ function LayerLegend(_ref) {
     name: iconName
   }), /*#__PURE__*/React__default.createElement("div", null, title)), /*#__PURE__*/React__default.createElement("div", {
     className: styles$h.right
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, !isMobile && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: styles$h.items
-  }, itemsTitle ? itemsTitle.toUpperCase() : 'ITEMS', ":"), /*#__PURE__*/React__default.createElement("div", null, itemsCount), !disabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isOpen ? /*#__PURE__*/React__default.createElement(Icon$1, {
+  }, itemsTitle ? itemsTitle.toUpperCase() : 'ITEMS', ":"), /*#__PURE__*/React__default.createElement("div", null, itemsCount)), !disabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isOpen ? /*#__PURE__*/React__default.createElement(Icon$1, {
     size: 24,
     name: "chevron_up"
   }) : /*#__PURE__*/React__default.createElement(Icon$1, {