@rio-cloud/rio-uikit 0.16.2-beta.3 → 0.16.2-beta.4

package/lib/es/components/numberControl/NumberControl.js

@@ -13,12 +13,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _NumberInput = _interopRequireWildcard(require("../numberInput/NumberInput"));
-var _excluded = ["min", "max", "step", "value", "onValueChanged", "disabled", "bsSize", "className", "unit", "inputAddon"];
+var _excluded = ["min", "max", "step", "value", "onValueChanged", "disabled", "bsSize", "className", "unit", "inputAddon", "digitPrecision", "placeholder"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var INITIAL_TICK = 700;
 var TICK_TIME = 50;
-var NumberControl = function NumberControl(props) {
+var NumberControl = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$min = props.min,
     min = _props$min === void 0 ? _NumberInput.defaultProps.min : _props$min,
     _props$max = props.max,
@@ -34,6 +34,9 @@ var NumberControl = function NumberControl(props) {
     className = props.className,
     unit = props.unit,
     inputAddon = props.inputAddon,
+    _props$digitPrecision = props.digitPrecision,
+    digitPrecision = _props$digitPrecision === void 0 ? 3 : _props$digitPrecision,
+    placeholder = props.placeholder,
     remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var timeout = (0, _react.useRef)();
   var _useState = (0, _react.useState)(false),
@@ -59,6 +62,20 @@ var NumberControl = function NumberControl(props) {
       callback();
     }, TICK_TIME);
   };
+
+  // Update internal state if external value has changed
+  (0, _react.useEffect)(function () {
+    if (internalValue !== value) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  // Notify external component if internal value has changed
+  (0, _react.useEffect)(function () {
+    if (internalValue !== value) {
+      onValueChanged(internalValue);
+    }
+  }, [internalValue]);
   (0, _react.useEffect)(function () {
     // Call increment function for a loop when button is holding down
     if (isHoldingDownInc && !disabled) {
@@ -73,15 +90,17 @@ var NumberControl = function NumberControl(props) {
   var incrementInternalValue = function incrementInternalValue() {
     setInternalValue(function (val) {
       var currentValue = (0, _NumberInput.convertNonIntegerToDefault)(val);
-      var newValue = currentValue + step;
-      return newValue <= max ? newValue : val;
+      var newValue = Number((currentValue + step).toFixed(digitPrecision));
+      var newValueLimited = newValue <= max ? newValue : val;
+      return newValueLimited;
     });
   };
   var decrementInternalValue = function decrementInternalValue() {
     setInternalValue(function (val) {
       var currentValue = (0, _NumberInput.convertNonIntegerToDefault)(val);
-      var newValue = currentValue - step;
-      return newValue >= min ? newValue : val;
+      var newValue = Number((currentValue - step).toFixed(digitPrecision));
+      var newValueLimited = newValue >= min ? newValue : val;
+      return newValueLimited;
     });
   };
   var incrementRecusively = function incrementRecusively() {
@@ -120,7 +139,7 @@ var NumberControl = function NumberControl(props) {
     // for instance the user has typed in a number manually and to
     // use this number as base to increase or decrease from.
     // Ignore empty value in case the user has removed it
-    if (value && (!isHoldingDownDec || !isHoldingDownInc)) {
+    if (value !== undefined && !(isHoldingDownDec && isHoldingDownInc)) {
       setInternalValue(Number(value));
     }
     onValueChanged(value);
@@ -136,12 +155,14 @@ var NumberControl = function NumberControl(props) {
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: inputAddon
   })), /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
+    ref: ref,
     min: min,
     max: max,
     value: internalValue,
     step: step,
     disabled: disabled,
-    onValueChanged: handleUpdatedNumberInputValue
+    onValueChanged: handleUpdatedNumberInputValue,
+    placeholder: placeholder
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: 'input-group-addon'
   }, unit && /*#__PURE__*/_react["default"].createElement("div", {
@@ -163,7 +184,7 @@ var NumberControl = function NumberControl(props) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: 'rioglyph rioglyph-plus scale-90'
   })))));
-};
+});
 NumberControl.propTypes = {
   min: _propTypes["default"].number,
   max: _propTypes["default"].number,
@@ -174,7 +195,9 @@ NumberControl.propTypes = {
   bsSize: _propTypes["default"].string,
   className: _propTypes["default"].string,
   unit: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  inputAddon: _propTypes["default"].string
+  inputAddon: _propTypes["default"].string,
+  digitPrecision: _propTypes["default"].number,
+  placeholder: _propTypes["default"].string
 };
 var _default = NumberControl;
 exports["default"] = _default;

package/lib/es/components/numberInput/NumberInput.js

@@ -13,21 +13,26 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _useAfterMount = _interopRequireDefault(require("../../hooks/useAfterMount"));
-var _excluded = ["unit", "inputAddon", "className", "bsSize", "disabled", "onValueChanged", "min", "max", "value", "step", "type"];
+var _excluded = ["unit", "inputAddon", "className", "bsSize", "disabled", "onValueChanged", "min", "max", "value", "step", "placeholder"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// 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
+
 var defaultProps = {
   min: 0,
   max: Number.MAX_VALUE,
-  value: 0,
   step: 1
 };
 exports.defaultProps = defaultProps;
-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 DEFAULT_VALUE = 0;
+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) {
@@ -37,13 +42,10 @@ var clampNumber = function clampNumber(value, min, max) {
   }
   return value;
 };
-var isFormatted = function isFormatted(value) {
-  return /^(-)?([1-9]\d*)?$/.test(value) || value === '0';
-};
-var convertNonIntegerToDefault = function convertNonIntegerToDefault(value, min) {
+var convertNonIntegerToDefault = function convertNonIntegerToDefault(value) {
   var currentValue = value;
-  if (!Number.isInteger(currentValue)) {
-    currentValue = min;
+  if (!Number.isFinite(currentValue)) {
+    currentValue = DEFAULT_VALUE;
   }
   return currentValue;
 };
@@ -59,16 +61,13 @@ var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref
     propMin = props.min,
     propMax = props.max,
     propValue = props.value,
-    propStep = props.step,
-    propType = props.type,
+    _props$step = props.step,
+    step = _props$step === void 0 ? 1 : _props$step,
+    placeholder = props.placeholder,
     remainingProps = (0, _objectWithoutProperties2["default"])(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);
+  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 = (0, _react.useState)({
@@ -83,33 +82,31 @@ var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref
   // Update internal value whenever the value prop from outside changes
   (0, _useAfterMount["default"])(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 && onValueChanged(newValidValue);
   };
   var handleOnChange = function handleOnChange(event) {
     return applyValue(event.target.value);
@@ -117,7 +114,7 @@ var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref
   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
+    // When the value is removed, keep the input empty but trigger the onValueChanged callback
     // since the user has finished his input
     var lastEnteredValue = state.enteredValue;
     if (lastEnteredValue === '') {
@@ -125,15 +122,15 @@ var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref
       return;
     }
 
-    // Otherwise, validate the input and calmp it if the entered value exeeds the limitations
-    var convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue), min);
+    // Otherwise, validate the input and clamp it if the entered value exeeds the limitations
+    var convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue));
     var validNumber = clampNumber(convertedEnteredValue, min, max);
     applyValue(validNumber);
   };
   var inputGroupClassNames = (0, _classnames["default"])('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
   var inputClassNames = (0, _classnames["default"])('form-control', 'no-controls', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', className);
   var input = /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, remainingProps, {
-    type: type,
+    type: "number",
     step: step,
     min: min,
     max: max,
@@ -143,7 +140,11 @@ var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref
     onBlur: handleBlur,
     onChange: handleOnChange,
     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["default"].createElement("div", {
     className: inputGroupClassNames
@@ -160,13 +161,13 @@ NumberInput.propTypes = {
   max: _propTypes["default"].number,
   value: _propTypes["default"].number,
   step: _propTypes["default"].number,
-  type: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   onValueChanged: _propTypes["default"].func,
   bsSize: _propTypes["default"].oneOf(['sm', 'lg', 'small', 'large']),
   className: _propTypes["default"].string,
   unit: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  inputAddon: _propTypes["default"].string
+  inputAddon: _propTypes["default"].string,
+  placeholder: _propTypes["default"].string
 };
 var _default = NumberInput;
 exports["default"] = _default;

package/lib/es/hooks/useDarkMode.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDarkMode = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _colorScheme = require("./../utils/colorScheme");
+var _useMutationObserver = _interopRequireDefault(require("./useMutationObserver"));
+var useDarkMode = function useDarkMode(widgetName) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isDarkMode = _useState2[0],
+    setIsDarkMode = _useState2[1];
+  var handleMutation = (0, _react.useCallback)(function (mutationList) {
+    mutationList.map(function (mutation) {
+      if (mutation.type === 'attributes' && mutation.attributeName === _colorScheme.THEME_DATA_ATTRIBUTE) {
+        var _mutation$target$attr;
+        var scheme = (_mutation$target$attr = mutation.target.attributes[_colorScheme.THEME_DATA_ATTRIBUTE]) === null || _mutation$target$attr === void 0 ? void 0 : _mutation$target$attr.value;
+        setIsDarkMode(scheme === _colorScheme.THEME_DARK);
+      }
+
+      // if (mutation.type === 'classList') {
+      //     console.log({ classList: mutation });
+      // }
+    });
+  }, []);
+  (0, _useMutationObserver["default"])(document.documentElement, handleMutation, {
+    attributes: true,
+    childList: false,
+    subtree: false
+  });
+  return isDarkMode;
+};
+exports.useDarkMode = useDarkMode;

package/lib/es/hooks/useMutationObserver.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+// Options for the observer (which mutations to observe)
+var DEFAULT_OPTIONS = {
+  attributes: true,
+  childList: true,
+  subtree: true
+};
+var useMutationObserver = function useMutationObserver(targetElement, callback) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_OPTIONS;
+  var observer = (0, _react.useRef)(null);
+  var disconnect = (0, _react.useCallback)(function () {
+    var _observer$current;
+    return (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
+  }, []);
+  var observe = (0, _react.useCallback)(function () {
+    observer.current = new MutationObserver(callback);
+    if (targetElement) {
+      observer.current.observe(targetElement, options);
+    }
+  }, [targetElement]);
+  (0, _react.useLayoutEffect)(function () {
+    observe();
+    return function () {
+      return disconnect();
+    };
+  }, [disconnect, observe]);
+};
+var _default = useMutationObserver;
+exports["default"] = _default;

package/lib/es/styles/components/Dialog.less

@@ -3,7 +3,7 @@
 @modal-title-padding: 15px;
 @modal-content-bg: var(--color-white);
 @modal-content-border-color: var(--gray-light);
-@modal-backdrop-bg: var(always-color-black);
+@modal-backdrop-bg: var(--always-color-black);
 @modal-header-border-color: var(--gray-lighter);
 @modal-footer-border-color: var(--gray-lighter);
 

package/lib/es/styles/mapping/color-map.less

@@ -47,10 +47,10 @@
 // warning
 // danger
 @colors-status-map: {
-  info: @brand-info;
-  success: @brand-success;
-  warning: @brand-warning;
-  danger: @brand-danger;
+  info: var(--brand-info);
+  success: var(--brand-success);
+  warning: var(--brand-warning);
+  danger: var(--brand-danger);
 }
 
 // Color Map - Status Decent
@@ -72,10 +72,10 @@
 @colors-brand-and-status-map: {
   primary: var(--brand-primary);
   secondary: var(--brand-secondary);
-  info: @brand-info;
-  success: @brand-success;
-  warning: @brand-warning;
-  danger: @brand-danger;
+  info: var(--brand-info);
+  success: var(--brand-success);
+  warning: var(--brand-warning);
+  danger: var(--brand-danger);
 }
 
 // Color Map - Brand & Status Decent
@@ -92,9 +92,9 @@
 // Color Map - Forms
 // Danger = Error // BS Fuckup
 @colors-forms-map: {
-  success: @brand-success;
-  warning: @brand-warning;
-  error: @brand-danger;
+  success: var(--brand-success);
+  warning: var(--brand-warning);
+  error: var(--brand-danger);
 }
 
 // Color Map - Driving Status

package/lib/es/themes/Website/styles/rio-website.less

@@ -2,7 +2,7 @@
 @import (less) '../../../styles/rio-uikit-core.less';
 
 // Theme
-// @hasDarkmode: false;
+@hasDarkmode: false;
 
 // Utility Classes
 @import (less) '../../../styles/design/responsive/_imports.less';
@@ -194,7 +194,6 @@ body .module-content {
 
 .ApplicationHeader {
   .navbar-brand {
-    //background-image: url('https://@{cdnBase}/svg/common/ico_rio.svg') !important;
     background-size: cover;
   }
 
@@ -1939,6 +1938,11 @@ blockquote {
   }
 }
 
+// Rounded Images
+.rounded-image .img-responsive {
+  border-radius: 10px
+}
+
 .anchor {
   display: block;
   position: absolute;
@@ -1962,7 +1966,6 @@ blockquote {
   }
 
   .ApplicationLayoutBody {
-
     @media (min-width: @screen-ls) {
       .module-content {
         display: flex;
@@ -2096,12 +2099,13 @@ blockquote {
   }
 }
 
+// Button Hover
 [class*="btn-"]:hover {
   transform: none !important;
   box-shadow: none !important;
 }
 
-// cookie disclaimer
+// Cookie Disclaimer
 #cookieDisclaimer > .position-absolute {
   position: fixed !important;
 
@@ -2172,6 +2176,7 @@ form[id*="contactForm"] {
   }
 }
 
+// Tables
 body:not(.legal-documents) {
   .table-responsive {
     @media (min-width: @screen-ls) {
@@ -2222,7 +2227,7 @@ body:not(.legal-documents) {
   }
 }
 
-// section clippig
+// Section Clippig
 .section-wrapper {
   &[class*="clip-"]:after {
     content: "";

package/lib/es/types.ts

@@ -674,7 +674,9 @@ export interface FilePickerProps {
     maxSize?: number; // max file size
     onPick: (files: FileList | null) => void;
     className?: string;
-    accept?: string;
+    accept?: {
+        [mimeType: string]: string[];
+    };
     children?: ({ isDragActive }: FilePickerRenderProps) => any;
 }
 
@@ -1087,6 +1089,9 @@ export interface NumberControlProps {
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
+    digitPrecision?: number;
+    placeholder?: string;
+    ref?: React.MutableRefObject<object>;
 }
 
 export interface NumberInputProps {
@@ -1094,13 +1099,14 @@ export interface NumberInputProps {
     max?: number;
     value?: number;
     step?: number;
-    type?: string;
     disabled?: boolean;
     onValueChanged?: (value: number) => void;
     bsSize?: 'sm' | 'lg';
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
+    placeholder?: string;
+    ref?: React.MutableRefObject<object>;
 }
 
 // O --------------------------------------------------------------------------------------------------

package/lib/es/utils/colorScheme.js

@@ -4,13 +4,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setColorScheme = exports.getColorScheme = void 0;
+exports.setColorScheme = exports.getColorScheme = exports.THEME_SYSTEM = exports.THEME_LIGHT = exports.THEME_DEFAULT = exports.THEME_DATA_ATTRIBUTE = exports.THEME_DARK = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var COOKIE_NAME = 'uikit-color-scheme';
 var THEME_DATA_ATTRIBUTE = 'data-theme';
+exports.THEME_DATA_ATTRIBUTE = THEME_DATA_ATTRIBUTE;
 var PATH = '/';
 var DOMAIN = '.rio.cloud';
 var EXPIRATION_DATE = 'Thu, 18 Dec 2030 12:00:00 UTC';
+var THEME_DEFAULT = 'default';
+exports.THEME_DEFAULT = THEME_DEFAULT;
+var THEME_SYSTEM = 'system';
+exports.THEME_SYSTEM = THEME_SYSTEM;
+var THEME_LIGHT = 'light';
+exports.THEME_LIGHT = THEME_LIGHT;
+var THEME_DARK = 'dark';
+exports.THEME_DARK = THEME_DARK;
 var getColorScheme = function getColorScheme() {
   return readColorSchemeFromCookie();
 };
@@ -38,11 +47,11 @@ var readColorSchemeFromCookie = function readColorSchemeFromCookie() {
     return;
   }
   var html = document.documentElement;
-  if (colorScheme === 'default' || colorScheme === 'system') {
+  if (colorScheme === THEME_DEFAULT || colorScheme === THEME_SYSTEM) {
     html.removeAttribute(THEME_DATA_ATTRIBUTE);
     return colorScheme;
   }
-  if (colorScheme === 'light' || colorScheme === 'dark') {
+  if (colorScheme === THEME_LIGHT || colorScheme === THEME_DARK) {
     html.setAttribute(THEME_DATA_ATTRIBUTE, colorScheme);
     return colorScheme;
   }

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-"version": "0.16.2-beta.3"
+"version": "0.16.2-beta.4"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.2-beta.3",
+    "version": "0.16.2-beta.4",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
@@ -128,6 +128,6 @@
         "react-popper": "2.3.0",
         "react-responsive": "9.0.0",
         "react-transition-group": "4.4.5",
-        "recharts": "^2.1.14"
+        "recharts": "2.1.12"
     }
 }

package/styles/components/Dialog.less

@@ -3,7 +3,7 @@
 @modal-title-padding: 15px;
 @modal-content-bg: var(--color-white);
 @modal-content-border-color: var(--gray-light);
-@modal-backdrop-bg: var(always-color-black);
+@modal-backdrop-bg: var(--always-color-black);
 @modal-header-border-color: var(--gray-lighter);
 @modal-footer-border-color: var(--gray-lighter);
 

package/styles/mapping/color-map.less

@@ -47,10 +47,10 @@
 // warning
 // danger
 @colors-status-map: {
-  info: @brand-info;
-  success: @brand-success;
-  warning: @brand-warning;
-  danger: @brand-danger;
+  info: var(--brand-info);
+  success: var(--brand-success);
+  warning: var(--brand-warning);
+  danger: var(--brand-danger);
 }
 
 // Color Map - Status Decent
@@ -72,10 +72,10 @@
 @colors-brand-and-status-map: {
   primary: var(--brand-primary);
   secondary: var(--brand-secondary);
-  info: @brand-info;
-  success: @brand-success;
-  warning: @brand-warning;
-  danger: @brand-danger;
+  info: var(--brand-info);
+  success: var(--brand-success);
+  warning: var(--brand-warning);
+  danger: var(--brand-danger);
 }
 
 // Color Map - Brand & Status Decent
@@ -92,9 +92,9 @@
 // Color Map - Forms
 // Danger = Error // BS Fuckup
 @colors-forms-map: {
-  success: @brand-success;
-  warning: @brand-warning;
-  error: @brand-danger;
+  success: var(--brand-success);
+  warning: var(--brand-warning);
+  error: var(--brand-danger);
 }
 
 // Color Map - Driving Status