@rio-cloud/rio-uikit 0.16.1 → 0.16.2-beta.11

package/components/numberInput/NumberInput.js

@@ -1,22 +1,30 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["unit", "inputAddon", "className", "bsSize", "disabled", "onValueChanged", "min", "max", "value", "step", "type"];
+var _excluded = ["unit", "inputAddon", "className", "bsSize", "disabled", "onChange", "onValueChanged", "min", "max", "value", "step", "digitPrecision", "placeholder"];
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import useAfterMount from '../../hooks/useAfterMount';
+var DEFAULT_DIGIT_PRECISION = 3;
+var DEFAULT_VALUE = 0;
+var DEFAULT_STEP = 1;
+
+// Note: even if limits are set and input type is number, many browsers allow to enter invalid data
+// like entering characters or values outside the boundaries, hence we have to check the input here
+// See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
+
 export var defaultProps = {
   min: 0,
   max: Number.MAX_VALUE,
-  value: 0,
-  step: 1
+  step: DEFAULT_STEP
 };
-var getStepFromProps = function getStepFromProps(propStep, defaultStep, max, min) {
-  return Number.isInteger(propStep) && propStep < Math.abs(max - min) ? propStep : defaultStep;
-};
-var getValueFromProps = function getValueFromProps(val, min, max, fallback) {
-  return clampNumber(Number(val), min, max) || fallback;
+var getValueFromProps = function getValueFromProps(val, min, max, placeholder) {
+  // Show placeholders if given instead of 0
+  if (val === undefined && placeholder) {
+    return '';
+  }
+  return clampNumber(Number(val), min, max) || DEFAULT_VALUE;
 };
 var clampNumber = function clampNumber(value, min, max) {
   if (value < min) {
@@ -26,13 +34,10 @@ var clampNumber = function clampNumber(value, min, max) {
   }
   return value;
 };
-var isFormatted = function isFormatted(value) {
-  return /^(-)?([1-9]\d*)?$/.test(value) || value === '0';
-};
-export var convertNonIntegerToDefault = function convertNonIntegerToDefault(value, min) {
+export var convertNonIntegerToDefault = function convertNonIntegerToDefault(value) {
   var currentValue = value;
-  if (!Number.isInteger(currentValue)) {
-    currentValue = min;
+  if (!Number.isFinite(currentValue)) {
+    currentValue = DEFAULT_VALUE;
   }
   return currentValue;
 };
@@ -42,21 +47,24 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className = props.className,
     bsSize = props.bsSize,
     disabled = props.disabled,
+    onChange = props.onChange,
     _props$onValueChanged = props.onValueChanged,
     onValueChanged = _props$onValueChanged === void 0 ? function () {} : _props$onValueChanged,
     propMin = props.min,
     propMax = props.max,
     propValue = props.value,
-    propStep = props.step,
-    propType = props.type,
+    _props$step = props.step,
+    step = _props$step === void 0 ? DEFAULT_STEP : _props$step,
+    _props$digitPrecision = props.digitPrecision,
+    digitPrecision = _props$digitPrecision === void 0 ? DEFAULT_DIGIT_PRECISION : _props$digitPrecision,
+    placeholder = props.placeholder,
     remainingProps = _objectWithoutProperties(props, _excluded);
 
-  // Breaking change - default is now "number"
-  var type = propType === 'text' ? 'text' : 'number';
-  var min = Number.isInteger(propMin) ? propMin : defaultProps.min;
-  var max = Number.isInteger(propMax) ? propMax : defaultProps.max;
-  var value = getValueFromProps(propValue, min, max, defaultProps.value);
-  var step = getStepFromProps(propStep, defaultProps.step, max, min);
+  // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
+  var callback = onChange || onValueChanged;
+  var min = Number.isFinite(propMin) ? propMin : defaultProps.min;
+  var max = Number.isFinite(propMax) ? propMax : defaultProps.max;
+  var value = getValueFromProps(propValue, min, max, placeholder);
 
   // Define local state and define initial values
   var _useState = useState({
@@ -71,57 +79,62 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   // Update internal value whenever the value prop from outside changes
   useAfterMount(function () {
     setState({
-      value: getValueFromProps(propValue, min, max, defaultProps.value),
+      value: getValueFromProps(propValue, min, max, placeholder),
       enteredValue: value,
       isValid: true
     });
   }, [propValue, clampNumber]);
   var applyValue = function applyValue(newValue) {
-    if (isFormatted(newValue)) {
-      if (newValue === '-' || newValue === '') {
-        setState({
-          value: newValue,
-          enteredValue: newValue,
-          isValid: true
-        });
-      } else {
-        var enteredValue = Number(newValue);
-        var isValid = enteredValue >= min && enteredValue <= max;
-        var newValidValue = clampNumber(enteredValue, min, max);
-        setState({
-          value: newValidValue,
-          enteredValue: enteredValue,
-          isValid: isValid
-        });
-
-        // Only call back the caller for valid values
-        isValid && onValueChanged(newValidValue);
-      }
+    if (newValue === '-' || newValue === '') {
+      setState({
+        value: newValue,
+        enteredValue: newValue,
+        isValid: true
+      });
+      return;
     }
+    var enteredValue = Number(newValue);
+    var isValid = !isNaN(enteredValue) && enteredValue >= min && enteredValue <= max;
+    var newValidValue = clampNumber(enteredValue, min, max);
+    setState({
+      value: newValidValue,
+      enteredValue: enteredValue,
+      isValid: isValid
+    });
+
+    // Only call back the caller for valid values
+    isValid && callback(newValidValue);
   };
   var handleOnChange = function handleOnChange(event) {
-    return applyValue(event.target.value);
+    applyValue(event.target.value);
   };
-  var handleBlur = function handleBlur(event) {
-    // console.log({enteredValue: state.enteredValue, event: Number(event.target.value)});
 
-    // When the vales is removed, keep the input empty but trigger the onValueChanged callback
+  // Prevent entering exponent to avoide side effects
+  // See https://bugzilla.mozilla.org/show_bug.cgi?id=1398528
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === 'e' || event.key === 'E') {
+      event.preventDefault();
+    }
+  };
+  var handleBlur = function handleBlur(event) {
+    // When the value is removed, keep the input empty but trigger the outside callback
     // since the user has finished his input
     var lastEnteredValue = state.enteredValue;
     if (lastEnteredValue === '') {
-      onValueChanged(lastEnteredValue);
+      callback(lastEnteredValue);
       return;
     }
 
-    // Otherwise, validate the input and calmp it if the entered value exeeds the limitations
-    var convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue), min);
-    var validNumber = clampNumber(convertedEnteredValue, min, max);
+    // Otherwise, validate the input, round it according to digitPrecision,
+    // and clamp the value if the entered value exeeds the limitations
+    var convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue));
+    var validNumber = clampNumber(Number(convertedEnteredValue).toFixed(digitPrecision), min, max);
     applyValue(validNumber);
   };
   var inputGroupClassNames = classNames('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
   var inputClassNames = classNames('form-control', 'no-controls', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', className);
   var input = /*#__PURE__*/React.createElement("input", _extends({}, remainingProps, {
-    type: type,
+    type: "number",
     step: step,
     min: min,
     max: max,
@@ -130,8 +143,13 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled: disabled,
     onBlur: handleBlur,
     onChange: handleOnChange,
+    onKeyDown: handleKeyDown,
     ref: ref,
-    "aria-label": 'number-input'
+    "aria-label": "number-input",
+    placeholder: placeholder,
+    onWheel: function onWheel(event) {
+      return event.target.blur();
+    }
   }));
   return unit || inputAddon ? /*#__PURE__*/React.createElement("div", {
     className: inputGroupClassNames
@@ -148,12 +166,14 @@ NumberInput.propTypes = {
   max: PropTypes.number,
   value: PropTypes.number,
   step: PropTypes.number,
-  type: PropTypes.string,
   disabled: PropTypes.bool,
+  onChange: PropTypes.func,
   onValueChanged: PropTypes.func,
   bsSize: PropTypes.oneOf(['sm', 'lg', 'small', 'large']),
   className: PropTypes.string,
   unit: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  inputAddon: PropTypes.string
+  inputAddon: PropTypes.string,
+  digitPrecision: PropTypes.number,
+  placeholder: PropTypes.string
 };
 export default NumberInput;

package/components/sidebars/Sidebar.js

@@ -234,7 +234,7 @@ var Sidebar = /*#__PURE__*/function (_Component) {
       var headerClassNames = classNames('SidebarHeader', headerClassName && headerClassName, showHeaderBorder && 'show-border');
       var titleClassNames = classNames('SidebarTitle', titleClassName && titleClassName);
       var bodyClassNames = classNames('SidebarBody', bodyClassName && bodyClassName);
-      var backdropClassNames = classNames('SidebarBackdrop', makeBackdropVisible && 'bg-black opacity-50', backdropClassName && backdropClassName);
+      var backdropClassNames = classNames('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', backdropClassName && backdropClassName);
       var fullscreenIconClasses = classNames('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
       var resizeLimitClasses = classNames('SidebarResizeLimit', isResize && 'display-block');
       var isRight = position === Sidebar.RIGHT;
@@ -359,7 +359,7 @@ Sidebar.propTypes = {
   makeBackdropVisible: PropTypes.bool,
   onBackdropClick: PropTypes.func,
   backdropClassName: PropTypes.string,
-  bodyRef: PropTypes.elementType,
+  bodyRef: PropTypes.object,
   headerButtons: PropTypes.node
 };
 export default Sidebar;

package/hooks/useDarkMode.js

@@ -0,0 +1,30 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useEffect, useState } from 'react';
+import { THEME_DARK, THEME_DATA_ATTRIBUTE } from './../utils/colorScheme';
+import useMutationObserver from './useMutationObserver';
+var useDarkMode = function useDarkMode() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDarkMode = _useState2[0],
+    setIsDarkMode = _useState2[1];
+  var handleMutation = useCallback(function (mutationList) {
+    mutationList.map(function (mutation) {
+      if (mutation.type === 'attributes' && mutation.attributeName === THEME_DATA_ATTRIBUTE) {
+        var _mutation$target$attr;
+        var scheme = (_mutation$target$attr = mutation.target.attributes[THEME_DATA_ATTRIBUTE]) === null || _mutation$target$attr === void 0 ? void 0 : _mutation$target$attr.value;
+        setIsDarkMode(scheme === THEME_DARK);
+      }
+
+      // if (mutation.type === 'classList') {
+      //     console.log({ classList: mutation });
+      // }
+    });
+  }, []);
+  useMutationObserver(document.documentElement, handleMutation, {
+    attributes: true,
+    childList: false,
+    subtree: false
+  });
+  return isDarkMode;
+};
+export default useDarkMode;

package/hooks/useElementSize.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(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; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import { useEffect, useState } from 'react';
 export default function useElementSize(elementRef) {
   var _useState = useState(),

package/hooks/useFullscreen.js

@@ -114,25 +114,23 @@ var useFullscreen = function useFullscreen() {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(newTargetElement) {
       var isHtmlElement, target;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              // check whether the new target element is a real DOm node or just a function
-              isHtmlElement = newTargetElement instanceof HTMLElement;
-              _context.prev = 1;
-              target = newTargetElement && isHtmlElement ? newTargetElement : defaultFullscreenElement;
-              _context.next = 5;
-              return target[getRequestFunctionName(target)](requestFullscreenOptions);
-            case 5:
-              return _context.abrupt("return", _context.sent);
-            case 8:
-              _context.prev = 8;
-              _context.t0 = _context["catch"](1);
-              console.log(_context.t0);
-            case 11:
-            case "end":
-              return _context.stop();
-          }
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            // check whether the new target element is a real DOm node or just a function
+            isHtmlElement = newTargetElement instanceof HTMLElement;
+            _context.prev = 1;
+            target = newTargetElement && isHtmlElement ? newTargetElement : defaultFullscreenElement;
+            _context.next = 5;
+            return target[getRequestFunctionName(target)](requestFullscreenOptions);
+          case 5:
+            return _context.abrupt("return", _context.sent);
+          case 8:
+            _context.prev = 8;
+            _context.t0 = _context["catch"](1);
+            console.log(_context.t0);
+          case 11:
+          case "end":
+            return _context.stop();
         }
       }, _callee, null, [[1, 8]]);
     }));
@@ -142,29 +140,27 @@ var useFullscreen = function useFullscreen() {
   }(), []);
   var exitFullscreen = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.prev = 0;
-            if (!fullscreenElement) {
-              _context2.next = 5;
-              break;
-            }
-            _context2.next = 4;
-            return document[getExitFunctionName()]();
-          case 4:
-            return _context2.abrupt("return", _context2.sent);
-          case 5:
-            _context2.next = 10;
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.prev = 0;
+          if (!fullscreenElement) {
+            _context2.next = 5;
             break;
-          case 7:
-            _context2.prev = 7;
-            _context2.t0 = _context2["catch"](0);
-            console.warn(_context2.t0);
-          case 10:
-          case "end":
-            return _context2.stop();
-        }
+          }
+          _context2.next = 4;
+          return document[getExitFunctionName()]();
+        case 4:
+          return _context2.abrupt("return", _context2.sent);
+        case 5:
+          _context2.next = 10;
+          break;
+        case 7:
+          _context2.prev = 7;
+          _context2.t0 = _context2["catch"](0);
+          console.warn(_context2.t0);
+        case 10:
+        case "end":
+          return _context2.stop();
       }
     }, _callee2, null, [[0, 7]]);
   })), [fullscreenElement]);

package/hooks/useHereMap.ts

@@ -0,0 +1,23 @@
+import { useScripts } from './useScripts';
+
+const DEFAULT_BASE_URL = 'https://js.api.here.com/v3/3.1.20.0/';
+
+const HERE_EXTERNALS = [
+    'mapsjs-core.js',
+    'mapsjs-core-legacy.js',
+    'mapsjs-service.js',
+    'mapsjs-service-legacy.js',
+    'mapsjs-mapevents.js',
+    'mapsjs-ui.js',
+    'mapsjs-clustering.js',
+];
+
+const getExternals = (scriptList: string[], baseUrl: string): string[] =>
+    scriptList.map((script) => `${baseUrl}${script}`);
+
+const sanitizeBaseUrl = (url: string) => (url.endsWith('/') ? url : `${url}/`);
+
+export const useHereMap = (baseUrl?: string) => {
+    const hereScripts = getExternals(HERE_EXTERNALS, sanitizeBaseUrl(baseUrl || DEFAULT_BASE_URL));
+    return useScripts(hereScripts, false);
+};

package/hooks/useMutationObserver.js

@@ -0,0 +1,38 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import { useRef, useLayoutEffect, useCallback } from 'react';
+var isRef = function isRef(obj) {
+  return obj !== null && _typeof(obj) === 'object' && Object.prototype.hasOwnProperty.call(obj, 'current');
+};
+var unRef = function unRef(target) {
+  return isRef(target) ? target.current : target;
+};
+
+// Options for the observer (which mutations to observe)
+var DEFAULT_OPTIONS = {
+  attributes: true,
+  childList: false,
+  subtree: false
+};
+var useMutationObserver = function useMutationObserver(target) {
+  var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_OPTIONS;
+  var observer = useRef(null);
+  var disconnect = useCallback(function () {
+    var _observer$current;
+    return (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
+  }, []);
+  var observe = useCallback(function () {
+    var targetElement = unRef(target);
+    observer.current = new MutationObserver(callback);
+    if (targetElement) {
+      observer.current.observe(targetElement, options);
+    }
+  }, [target]);
+  useLayoutEffect(function () {
+    observe();
+    return function () {
+      return disconnect();
+    };
+  }, [disconnect, observe]);
+};
+export default useMutationObserver;

package/hooks/useScripts.ts

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+
+const hasScriptsInHead = (src: string) => document.head.querySelectorAll(`script[src*="${src}"]`).length > 0;
+
+export const useScripts = (scripts: string[], loadAsync: boolean = false) => {
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [hasLoaded, setHasLoaded] = useState<boolean>(false);
+    const [error, setError] = useState<Error | undefined>();
+
+    const promises = new Set();
+
+    useEffect(() => {
+        const [firstScript] = scripts;
+
+        if (hasScriptsInHead(firstScript)) {
+            setHasLoaded(true);
+            return;
+        }
+
+        setIsLoading(true);
+
+        scripts.map((external) => {
+            promises.add(
+                new Promise<void>((resolve, reject) => {
+                    const script = document.createElement('script');
+                    script.async = loadAsync;
+                    script.src = external;
+
+                    script.onload = () => {
+                        console.debug(`loaded ${external}`);
+                        resolve();
+                    };
+
+                    script.onerror = () => {
+                        console.debug(`failed to load ${external}`);
+                        setError(new Error(`failed to load ${external}`));
+                        reject();
+                    };
+
+                    document.head.appendChild(script);
+                })
+            );
+        });
+
+        Promise.all([...promises]).then(() => {
+            setIsLoading(false);
+            setHasLoaded(true);
+        });
+    }, []);
+
+    return { isLoading, error, hasLoaded };
+};

package/hooks/useScrollPosition.js

@@ -0,0 +1,72 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState, useEffect } from 'react';
+var getModuleContent = function getModuleContent() {
+  return document.getElementsByClassName('module-content')[0];
+};
+
+// "target" can be "window", "document.body", a "ref" or undefiend
+// where in later case the module-content is taken as default
+
+var useScrollPosition = function useScrollPosition(target) {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    targetElement = _useState2[0],
+    setTargetElement = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scrollPosition = _useState4[0],
+    setScrollPosition = _useState4[1];
+  useEffect(function () {
+    var checkForModuleContent = null;
+
+    // In cae the target is undefined it might be that the module-content is not rendered yet,
+    // hence check periodically for the existence
+    if (!target) {
+      checkForModuleContent = setInterval(function () {
+        var element = getModuleContent();
+        if (element) {
+          setTargetElement(element);
+        }
+      }, 300);
+    } else if (target && checkForModuleContent) {
+      console.log('clearInterval');
+      clearInterval(checkForModuleContent);
+    }
+
+    // In case the target is a "ref" - set the targetElement when current is defined
+    else if (target !== null && target !== void 0 && target.current && !checkForModuleContent) {
+      setTargetElement(target.current);
+    }
+
+    // In case it's "wondow" or "document.body"
+    else {
+      setTargetElement(target);
+    }
+    return {
+      "if": function _if(checkForModuleContent) {
+        clearInterval(check);
+      }
+    };
+  }, [target]);
+  var handleScroll = function handleScroll() {
+    requestAnimationFrame(function () {
+      if (targetElement === window) {
+        setScrollPosition(targetElement.scrollY);
+      } else {
+        setScrollPosition(targetElement.scrollTop);
+      }
+    });
+  };
+  useEffect(function () {
+    if (targetElement) {
+      targetElement.addEventListener('scroll', handleScroll);
+    }
+    return function () {
+      if (targetElement) {
+        targetElement.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, [targetElement]);
+  return scrollPosition;
+};
+export default useScrollPosition;

package/index.js

@@ -4,7 +4,7 @@ import versionJson from './version.json';
 var VERSION = versionJson.version;
 export { VERSION };
 export * from 'framer-motion';
-import _colors from './styles/shared/colors.json';
+import _colors from './styles/variables/colors.json';
 export { _colors as colors };
 import { default as _Button } from './components/button/Button';
 export { _Button as Button };
@@ -153,8 +153,13 @@ export { default as useInterval } from './hooks/useInterval';
 export { default as useClickOutside } from './hooks/useClickOutside';
 export { default as useClipboard } from './hooks/useClipboard';
 export { default as useElementSize } from './hooks/useElementSize';
+export { default as useScrollPosition } from './hooks/useScrollPosition';
+export { default as useDarkMode } from './hooks/useDarkMode';
+export { default as useMutationObserver } from './hooks/useMutationObserver';
 import { hasTouch as _hasTouch, inIframe as _inIframe, isDesktop as _isDesktop } from './utils/deviceUtils';
 export { _hasTouch as hasTouch, _inIframe as inIframe, _isDesktop as isDesktop };
+import { getColorScheme as _getColorScheme, setColorScheme as _setColorScheme } from './utils/colorScheme';
+export { _getColorScheme as getColorScheme, _setColorScheme as setColorScheme };
 import { getNewGroupedSelected as _getNewGroupedSelected } from './utils/GroupSelectionUtil';
 export { _getNewGroupedSelected as getNewGroupedSelected };
 import { default as _ExpanderPanel } from './components/expander/ExpanderPanel';

package/lib/es/ColorScheme.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/ColorScheme' {
+    export function getColorScheme(): string;
+    export function setColorScheme(scheme: 'dark' | 'light' | 'default' | 'system'): void;
+}

package/lib/es/ColorScheme.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getColorScheme", {
+  enumerable: true,
+  get: function get() {
+    return _colorScheme.getColorScheme;
+  }
+});
+Object.defineProperty(exports, "setColorScheme", {
+  enumerable: true,
+  get: function get() {
+    return _colorScheme.setColorScheme;
+  }
+});
+var _colorScheme = require("./utils/colorScheme");

package/lib/es/Colors.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "default", {
     return _colors2["default"];
   }
 });
-var _colors2 = _interopRequireDefault(require("./styles/shared/colors.json"));
+var _colors2 = _interopRequireDefault(require("./styles/variables/colors.json"));

package/lib/es/TruckLayer.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _TruckLayer2["default"];
+    return _RoadRestrictionLayer["default"];
   }
 });
-var _TruckLayer2 = _interopRequireDefault(require("./components/map/components/features/layers/TruckLayer"));
+var _RoadRestrictionLayer = _interopRequireDefault(require("./components/map/components/features/layers/RoadRestrictionLayer"));