@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.1

package/components/applicationHeader/AppMenu.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["label", "appMenuItems", "appNavigatorClassName", "appNavigator", "onToggleAppMenu"];
 import React from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 import AppMenuDropdown from './AppMenuDropdown';
 import modulePropTypes from './modulePropTypes';
 var MenuContent = function MenuContent(props) {
@@ -34,13 +34,13 @@ export var AppMenu = function AppMenu(props) {
     appNavigatorClassName = props.appNavigatorClassName,
     appNavigator = props.appNavigator,
     onToggleAppMenu = props.onToggleAppMenu,
-    remainigProps = _objectWithoutProperties(props, _excluded);
-  var hasItems = !!(appMenuItems && appMenuItems.length || appNavigator);
-  var classNames = classname('ModuleNavigation AppMenu', 'user-select-none', {
+    remainingProps = _objectWithoutProperties(props, _excluded);
+  var hasItems = !!(appMenuItems !== null && appMenuItems !== void 0 && appMenuItems.length || appNavigator);
+  var wrapperClassNames = classNames('ModuleNavigation AppMenu', 'user-select-none', {
     hasModules: hasItems
   }, appNavigatorClassName && appNavigatorClassName);
-  return /*#__PURE__*/React.createElement("ul", _extends({}, remainigProps, {
-    className: classNames
+  return /*#__PURE__*/React.createElement("ul", _extends({}, remainingProps, {
+    className: wrapperClassNames
   }), /*#__PURE__*/React.createElement(AppMenuDropdown, {
     title: label,
     caret: hasItems,

package/components/applicationHeader/ApplicationHeader.js

@@ -2,11 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["homeRoute", "showHomeIcon", "label", "className", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems", "onToggleAppMenu"];
-import React, { useState, useRef, forwardRef, useCallback, useImperativeHandle } from 'react';
+import React, { useRef, forwardRef, useCallback, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import debounce from 'lodash/fp/debounce';
 import isEmpty from 'lodash/fp/isEmpty';
-import classname from 'classnames';
+import classNames from 'classnames';
 import { AppMenu } from './AppMenu';
 import { ApplicationActionBar } from './ApplicationActionBar';
 import { MobileSubmoduleNavigation } from './MobileSubmoduleNavigation';
@@ -27,7 +26,7 @@ export var ApplicationHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     navItems = props.navItems,
     actionBarItems = props.actionBarItems,
     onToggleAppMenu = props.onToggleAppMenu,
-    remainigProps = _objectWithoutProperties(props, _excluded);
+    remainingProps = _objectWithoutProperties(props, _excluded);
   var actionBarRef = useRef();
   var _useResizeObserver = useResizeObserver(),
     _useResizeObserver2 = _slicedToArray(_useResizeObserver, 2),
@@ -42,9 +41,9 @@ export var ApplicationHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var containerWidth = getContentRect('width') || 0;
   var isMobileWidth = containerWidth <= SCREEN_SM;
   var hasActionBarItems = !isEmpty(actionBarItems);
-  var classNames = classname('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
-  return /*#__PURE__*/React.createElement("nav", _extends({}, remainigProps, {
-    className: classNames,
+  var wrapperClassNames = classNames('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
+  return /*#__PURE__*/React.createElement("nav", _extends({}, remainingProps, {
+    className: wrapperClassNames,
     ref: navRef
   }), isMobileWidth && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MobileAppMenu, {
     showHomeIcon: showHomeIcon,

package/components/applicationHeader/NavItems.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 import head from 'lodash/fp/head';
 import isEmpty from 'lodash/fp/isEmpty';
 import useClickOutside from '../../hooks/useClickOutside';
@@ -174,10 +174,10 @@ export var NavItems = function NavItems(props) {
   };
 
   // As all navItems need to be added to the DOM first in order to get their real size
-  // the computation wheather a navItem need to be shown under the collapsed dropdown or not
+  // the computation whether a navItem need to be shown under the collapsed dropdown or not
   // needs to be done after the component did mount to the DOM.
 
-  var classes = classname('SubmoduleNavigation', 'nav');
+  var classes = classNames('SubmoduleNavigation', 'nav');
   return /*#__PURE__*/React.createElement("ul", {
     className: classes,
     ref: navigationRef

package/components/checkbox/Checkbox.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["checked", "children", "className", "custom", "defaultChecked", "disabled", "error", "icon", "iconLabelPosition", "iconSize", "id", "indeterminate", "inline", "inputRef", "label", "name", "onChange", "onClick", "required", "right", "size", "tabIndex"];
 import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 var CheckboxIcon = function CheckboxIcon(props) {
   var icon = props.icon,
     iconSize = props.iconSize,
@@ -85,8 +85,8 @@ var Checkbox = function Checkbox(props) {
     onChange(event);
   };
   var text = label || children;
-  var labelClassnames = classname('checkbox', inline && 'checkbox-inline', size === 'large' && 'checkbox-large', right && 'checkbox-right', className);
-  var inputClassnames = classname(error && 'error', size === 'large' && 'large', indeterminate && 'indeterminate', className);
+  var labelClassnames = classNames('checkbox', inline && 'checkbox-inline', size === 'large' && 'checkbox-large', right && 'checkbox-right', className);
+  var inputClassnames = classNames(error && 'error', size === 'large' && 'large', indeterminate && 'indeterminate', className);
   var renderCustomIcon = !!icon;
   var renderCustomContent = custom && children;
   var renderDefault = !icon && !custom;

package/components/expander/ExpanderList.js

@@ -9,7 +9,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/fp/isEqual';
 import Collapse from '../collapse/Collapse';
-import classname from 'classnames';
+import classNames from 'classnames';
 var getRandomString = function getRandomString() {
   return (Math.random() + 1).toString(36).toUpperCase().substring(2);
 };
@@ -84,8 +84,8 @@ var ExpanderList = /*#__PURE__*/function (_Component) {
     key: "getHeaderElement",
     value: function getHeaderElement(item) {
       var _this3 = this;
-      var headerClassNames = classname('expander-list-header', item.headerClassName && item.headerClassName);
-      var iconClassNames = item.body && classname('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
+      var headerClassNames = classNames('expander-list-header', item.headerClassName && item.headerClassName);
+      var iconClassNames = item.body && classNames('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
       return /*#__PURE__*/React.createElement("div", {
         className: headerClassNames,
         onClick: function onClick() {
@@ -105,7 +105,7 @@ var ExpanderList = /*#__PURE__*/function (_Component) {
       if (!item.body) {
         return;
       }
-      var bodyClassNames = classname('expander-list-body', item.bodyClassName && item.bodyClassName);
+      var bodyClassNames = classNames('expander-list-body', item.bodyClassName && item.bodyClassName);
       return /*#__PURE__*/React.createElement(Collapse, {
         "in": isOpen,
         mountOnEnter: mountOnEnter,
@@ -120,12 +120,12 @@ var ExpanderList = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this4 = this;
-      var listClassNames = classname('expander-list list-group', this.props.className);
+      var listClassNames = classNames('expander-list list-group', this.props.className);
       return /*#__PURE__*/React.createElement("ul", {
         className: listClassNames
       }, this.state.items.map(function (item) {
         var isOpen = item.open;
-        var itemClassNames = classname('list-group-item', item.className && "".concat(item.className), item.body && 'expandable', isOpen && 'open');
+        var itemClassNames = classNames('list-group-item', item.className && "".concat(item.className), item.body && 'expandable', isOpen && 'open');
         return /*#__PURE__*/React.createElement("li", {
           className: itemClassNames,
           key: item.id

package/components/expander/ExpanderPanel.js

@@ -5,7 +5,7 @@ var _excluded = ["bsStyle", "className", "iconLeft", "title", "headerClassName",
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Collapse from '../collapse/Collapse';
-import classname from 'classnames';
+import classNames from 'classnames';
 var ExpanderPanel = function ExpanderPanel(props) {
   var bsStyle = props.bsStyle,
     className = props.className,
@@ -40,11 +40,11 @@ var ExpanderPanel = function ExpanderPanel(props) {
     setIsOpen(newState);
     onToggle(newState);
   };
-  var wrapperClassNames = classname('expander-panel panel', "panel-".concat(bsStyle), className);
-  var iconClassNames = classname('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
-  var headerClassNames = classname('panel-heading', isOpen && 'open', iconLeft && 'icon-left', headerClassName && headerClassName);
-  var titleClassNames = classname('title', titleClassName && titleClassName);
-  var bodyClassNames = classname('panel-body', bodyClassName && bodyClassName);
+  var wrapperClassNames = classNames('expander-panel panel', "panel-".concat(bsStyle), className);
+  var iconClassNames = classNames('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
+  var headerClassNames = classNames('panel-heading', isOpen && 'open', iconLeft && 'icon-left', headerClassName && headerClassName);
+  var titleClassNames = classNames('title', titleClassName && titleClassName);
+  var bodyClassNames = classNames('panel-body', bodyClassName && bodyClassName);
   var isRenderCallback = children && typeof children === 'function';
   return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
     className: wrapperClassNames

package/components/radiobutton/RadioButton.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["checked", "children", "className", "custom", "defaultChecked", "disabled", "icon", "iconLabelPosition", "iconSize", "inline", "inputRef", "label", "name", "onChange", "onClick", "right", "tabIndex", "value"];
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 var RadioButtonIcon = function RadioButtonIcon(props) {
   var icon = props.icon,
     iconSize = props.iconSize,
@@ -21,7 +21,7 @@ var RadioButtonIcon = function RadioButtonIcon(props) {
     className: "rioglyph ".concat(icon),
     style: iconStyles
   }), /*#__PURE__*/React.createElement("span", {
-    className: 'radio-label'
+    className: "radio-label"
   }, text));
 };
 var RadioButton = function RadioButton(props) {
@@ -76,8 +76,8 @@ var RadioButton = function RadioButton(props) {
     onClick(event);
   };
   var text = label || children;
-  var labelClassnames = classname('radio', inline && 'radio-inline', className);
-  var inputClassnames = classname(right && 'icon-right', className);
+  var labelClassnames = classNames('radio', inline && 'radio-inline', className);
+  var inputClassnames = classNames(right && 'icon-right', className);
   var renderCustomIcon = !!icon;
   var renderCustomContent = custom && children;
   var renderDefault = !icon && !custom;
@@ -87,7 +87,7 @@ var RadioButton = function RadioButton(props) {
     onKeyDown: handleToggleKeyDown,
     ref: labelRef
   }), /*#__PURE__*/React.createElement("input", {
-    type: 'radio',
+    type: "radio",
     defaultChecked: defaultChecked,
     checked: checked,
     disabled: disabled,
@@ -103,7 +103,7 @@ var RadioButton = function RadioButton(props) {
     iconLabelPosition: iconLabelPosition,
     text: text
   }), renderDefault && /*#__PURE__*/React.createElement("span", {
-    className: 'radio-text'
+    className: "radio-text"
   }, /*#__PURE__*/React.createElement("span", null, text)), renderCustomContent && children);
 };
 RadioButton.ICON_LABEL_VERTICAL = 'vertical';

package/components/selects/BaseDropdownMenu.js

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import classname from 'classnames';
+import classNames from 'classnames';
 import isEqual from 'lodash/fp/isEqual';
 import ownerDocument from '../../utils/ownerDocument';
 import addEventListener from '../../utils/addEventListener';
@@ -230,7 +230,7 @@ export var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
         noItemMessage = _this$props.noItemMessage,
         dropdownClassName = _this$props.dropdownClassName;
       var isPullRight = this.isAutoDropActive() ? this.state.pullRight : pullRight;
-      var dropdownMenuClasses = classname('dropdown-menu', isPullRight && 'pull-right', dropdownClassName);
+      var dropdownMenuClasses = classNames('dropdown-menu', isPullRight && 'pull-right', dropdownClassName);
 
       // Dont show dropdown, when no match are found when filtering unless there is a not found message
       if (!this.props.options.length) {
@@ -271,10 +271,10 @@ export var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
 
       // Show focused style only when keyboard is in use
       var anchorClassNames = this.state.keyboardUsed && this.state.focusedItemIndex === index ? HIGHLIGHT_CLASS : '';
-      var classNames = classname(option.disabled && 'disabled', this.props.useActiveClass && option.selected && 'active');
+      var wrapperClassNames = classNames(option.disabled && 'disabled', this.props.useActiveClass && option.selected && 'active');
       return /*#__PURE__*/React.createElement("li", {
         key: option.id,
-        className: classNames
+        className: wrapperClassNames
       }, /*#__PURE__*/React.createElement("a", {
         role: "button",
         className: anchorClassNames,

package/components/selects/Multiselect.js

@@ -10,7 +10,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import onClickOutside from 'react-onclickoutside';
-import classname from 'classnames';
+import classNames from 'classnames';
 import isEqual from 'lodash/fp/isEqual';
 import logDeprecatedWarnings from '../../utils/logDeprecatedWarnings';
 import { BaseDropdownMenu } from './BaseDropdownMenu';
@@ -102,9 +102,9 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
         className = _this$props.className,
         hasError = _this$props.hasError;
       var dropup = this.isAutoDropActive() ? this.state.dropup : this.props.dropup;
-      var classes = classname('select', 'multiselect', dropup && 'dropup', 'dropdown', hasError && 'has-error', this.state.isOpen && 'open', className && className);
+      var wrapperClasses = classNames('select', 'multiselect', dropup && 'dropup', 'dropdown', hasError && 'has-error', this.state.isOpen && 'open', className && className);
       return /*#__PURE__*/React.createElement("div", {
-        className: classes,
+        className: wrapperClasses,
         ref: function ref(multiselectWrapper) {
           return _this2.multiselectWrapper = multiselectWrapper;
         }
@@ -125,7 +125,7 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
       }).map(function (option, index) {
         return _this3.renderSelectionItem(option, index);
       });
-      var optionListClassNames = classname(!showSelectedItemIcon && !showUnselectedItemIcons && 'selected-option-list');
+      var optionListClassNames = classNames(!showSelectedItemIcon && !showUnselectedItemIcons && 'selected-option-list');
       return /*#__PURE__*/React.createElement("span", {
         className: optionListClassNames
       }, selectionTags);
@@ -154,7 +154,7 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
     value: function renderSelectionItem(item, index) {
       var _this4 = this;
       if (this.props.showSelectedItemIcon) {
-        var inactiveClassNames = classname('margin-right-5', !this.isItemSelected(item) && 'inactiveIcon');
+        var inactiveClassNames = classNames('margin-right-5', !this.isItemSelected(item) && 'inactiveIcon');
         return /*#__PURE__*/React.createElement("span", {
           key: item.id,
           className: inactiveClassNames
@@ -166,7 +166,7 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement("span", {
         className: "selected-label"
       }, item.icon && /*#__PURE__*/React.createElement("span", {
-        className: 'margin-right-5'
+        className: "margin-right-5"
       }, item.icon), item.label), /*#__PURE__*/React.createElement("span", {
         className: "removeIcon",
         onClick: function onClick(event) {
@@ -212,10 +212,10 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
         counterMessage = _this$props4.counterMessage,
         renderCounterMessage = _this$props4.renderCounterMessage;
       logDeprecatedWarnings(warningProps, this.props, 'Multiselect');
-      var classnames = classname('dropdown-toggle', 'form-control', 'text-left', bsSize === 'large' && 'input-lg',
-      // TODO: deprecte since it's not consistent
+      var wrapperClassNames = classNames('dropdown-toggle', 'form-control', 'text-left', bsSize === 'large' && 'input-lg',
+      // TODO: deprecate since it's not consistent
       bsSize === 'small' && 'input-sm',
-      // TODO: deprecte since it's not consistent
+      // TODO: deprecate since it's not consistent
       bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', disabled && 'disabled');
       var showPlaceholder = !selectedItems.length && !this.props.showUnselectedItemIcons;
 
@@ -225,7 +225,7 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
         type: "button",
         id: id,
         name: name,
-        className: classnames,
+        className: wrapperClassNames,
         "data-toggle": "dropdown",
         tabIndex: tabIndex,
         "aria-haspopup": "true",
@@ -266,7 +266,7 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderFilterInput",
     value: function renderFilterInput() {
-      var inputClasses = classname('multiselect-filter-input', !this.state.selectedItems.length && 'multiselect-filter-input-placeholder', (this.state.isFilterActive || this.state.filterValue) && 'multiselect-filter-input-active');
+      var inputClasses = classNames('multiselect-filter-input', !this.state.selectedItems.length && 'multiselect-filter-input-placeholder', (this.state.isFilterActive || this.state.filterValue) && 'multiselect-filter-input-active');
       return /*#__PURE__*/React.createElement("input", {
         type: "text",
         className: inputClasses,
@@ -316,7 +316,7 @@ export var Multiselect = /*#__PURE__*/function (_Component) {
       event.preventDefault();
 
       // prevent selecting disabled Items
-      if (selectedItem && selectedItem.disabled) {
+      if (selectedItem !== null && selectedItem !== void 0 && selectedItem.disabled) {
         return;
       }
       var newSelectedItems = this.updateSelection(selectedItem.id);

package/components/selects/Select.js

@@ -132,8 +132,8 @@ export var Select = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React.createElement("span", null, optionSpans);
     }
   }, {
-    key: "getSeletedItemLabel",
-    value: function getSeletedItemLabel(selectedItem, placeholder) {
+    key: "getSelectedItemLabel",
+    value: function getSelectedItemLabel(selectedItem, placeholder) {
       if (this.props.showUnselectedItemIcons) {
         return this.renderUnselectedItemIcons(this.props.options, selectedItem);
       }
@@ -193,7 +193,7 @@ export var Select = /*#__PURE__*/function (_Component) {
       var _this$state = this.state,
         isOpen = _this$state.isOpen,
         selectedItem = _this$state.selectedItem;
-      var classnames = classNames('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'large' && 'input-lg',
+      var classes = classNames('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'large' && 'input-lg',
       // TODO: deprecte since it's not consistent
       bsSize === 'small' && 'input-sm',
       // TODO: deprecte since it's not consistent
@@ -202,12 +202,12 @@ export var Select = /*#__PURE__*/function (_Component) {
         className: "selected-option-text"
       }, label && /*#__PURE__*/React.createElement("span", {
         className: "selected-option-text-label"
-      }, label, ":"), /*#__PURE__*/React.createElement("span", null, this.getSeletedItemLabel(selectedItem, placeholder)));
+      }, label, ":"), /*#__PURE__*/React.createElement("span", null, this.getSelectedItemLabel(selectedItem, placeholder)));
       return /*#__PURE__*/React.createElement("button", {
         type: "button",
         id: id,
         name: name,
-        className: classnames,
+        className: classes,
         "data-toggle": "dropdown",
         tabIndex: tabIndex,
         "aria-haspopup": "true",
@@ -232,7 +232,7 @@ export var Select = /*#__PURE__*/function (_Component) {
         dropdownClassName = _this$props4.dropdownClassName;
 
       // When an option was already selected, highlight this option by setting the focusedItemIndex accordingly.
-      // In case there was nothing preselected, set the focusedItemIndex to the first item if keayboard was used.
+      // In case there was nothing preselected, set the focusedItemIndex to the first item if keyboard was used.
       var focusedItemIndex = this.state.focusedItemIndex;
       if (this.state.selectedItem) {
         focusedItemIndex = this.props.options.findIndex(function (option) {

package/components/slider/RangeSlider.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["minValue", "maxValue", "valueLabels", "step", "leftValue", "rightValue", "className", "disabled", "onChange", "onDragEnd"];
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 var getRangeValues = function getRangeValues(valueLeft, valueRight) {
   var finalLeftValue = valueRight <= valueLeft ? valueRight : valueLeft;
   var finalRightValue = valueLeft >= valueRight ? valueLeft : valueRight;
@@ -145,9 +145,9 @@ var RangeSlider = function RangeSlider(props) {
     finalRightValue = _getRangeValues8[1];
   var trackWidth = 100 * (finalRightValue - finalLeftValue) / (maxValue - minValue);
   var trackLeft = 100 * (finalLeftValue - minValue) / (maxValue - minValue);
-  var classNames = classname('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', className && className);
+  var wrapperClassNames = classNames('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', className && className);
   return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
-    className: classNames
+    className: wrapperClassNames
   }), /*#__PURE__*/React.createElement("div", {
     className: "range-whole-track"
   }), /*#__PURE__*/React.createElement("div", {

package/components/slider/Slider.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["value", "minValue", "maxValue", "valueLabels", "largeValueLabels", "hideValueBar", "step", "onChange", "onDragEnd", "className", "disabled"];
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 var Slider = function Slider(props) {
   var value = props.value,
     minValue = props.minValue,
@@ -44,10 +44,10 @@ var Slider = function Slider(props) {
   var onMouseDown = function onMouseDown() {
     setIsChanging(true);
   };
-  var classNames = classname('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', hideValueBar && 'hide-value-bar', largeValueLabels && 'large-value-labels', className && className);
+  var wrapperClassNames = classNames('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', hideValueBar && 'hide-value-bar', largeValueLabels && 'large-value-labels', className && className);
   var trackWidth = 100 * (currentValue - minValue) / (maxValue - minValue);
   return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
-    className: classNames
+    className: wrapperClassNames
   }), /*#__PURE__*/React.createElement("div", {
     className: "range-whole-track"
   }), /*#__PURE__*/React.createElement("div", {

package/components/statusBar/StatusBar.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["percentage", "tooltip", "tooltipPosition", "tooltipDelay", "color", "className"];
 import React from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 import Tooltip from '../tooltip/Tooltip';
 import OverlayTrigger from '../overlay/OverlayTrigger';
 var LEFT = OverlayTrigger.LEFT;
@@ -25,10 +25,10 @@ var renderProgressBar = function renderProgressBar(_ref, index, useProgressDivid
     color = _ref.color,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
-  var classNames = classname('progress-bar', color ? color : 'progress-bar-info', useProgressDivider && 'progress-divider', className && className);
+  var progressBarClassNames = classNames('progress-bar', color ? color : 'progress-bar-info', useProgressDivider && 'progress-divider', className && className);
   var progressBar = /*#__PURE__*/React.createElement("div", _extends({
     key: index,
-    className: classNames,
+    className: progressBarClassNames,
     style: {
       width: "".concat(percentage, "%")
     }
@@ -36,7 +36,7 @@ var renderProgressBar = function renderProgressBar(_ref, index, useProgressDivid
   if (tooltip) {
     var tooltipElement = /*#__PURE__*/React.createElement(Tooltip, {
       id: "tooltip-".concat(index),
-      width: 'auto'
+      width: "auto"
     }, tooltip);
     return /*#__PURE__*/React.createElement(OverlayTrigger, {
       key: index,
@@ -109,8 +109,8 @@ var renderIcon = function renderIcon(icon, size) {
   }
   var iconColor = getIconColorClassName(icon);
   var iconAlignment = getIconAlignment(icon);
-  var iconWrapperClasses = classname(iconAlignment === LEFT && 'flex-order-1 margin-right-5', iconAlignment === RIGHT && 'flex-order-2 margin-left-5');
-  var iconClasses = classname('rioglyph', icon.name && icon.name, iconColor, size === SMALL && 'text-size-h3', size === LARGE && 'text-size-h2', icon.className && icon.className);
+  var iconWrapperClasses = classNames(iconAlignment === LEFT && 'flex-order-1 margin-right-5', iconAlignment === RIGHT && 'flex-order-2 margin-left-5');
+  var iconClasses = classNames('rioglyph', icon.name && icon.name, iconColor, size === SMALL && 'text-size-h3', size === LARGE && 'text-size-h2', icon.className && icon.className);
   return /*#__PURE__*/React.createElement("div", {
     className: iconWrapperClasses
   }, /*#__PURE__*/React.createElement("span", {
@@ -123,7 +123,7 @@ var renderLabel = function renderLabel(label, size, labelWrapperClasses) {
   }
   var labelColor = getLabelColorClassName(label);
   var labelAlignment = getLabelAlignment(label);
-  var labelClasses = classname('display-flex', 'ellipsis-1', 'flex-1-0', 'justify-content-center', labelAlignment === TOP && 'width-0', labelColor, size === SMALL && 'text-size-16', size === LARGE && 'text-size-h3', label.weight !== LIGHT && 'text-bold', label.className && label.className);
+  var labelClasses = classNames('display-flex', 'ellipsis-1', 'flex-1-0', 'justify-content-center', labelAlignment === TOP && 'width-0', labelColor, size === SMALL && 'text-size-16', size === LARGE && 'text-size-h3', label.weight !== LIGHT && 'text-bold', label.className && label.className);
   return /*#__PURE__*/React.createElement("div", {
     className: labelWrapperClasses
   }, /*#__PURE__*/React.createElement("span", {
@@ -154,11 +154,11 @@ var StatusBar = function StatusBar(props) {
   var isLabelOnly = getIsLabelOnly(label, icon);
   var isLabelOnlyLeft = getIsLabelOnlyLeft(isLabelOnly, labelAlignment);
   var isLabelOnlyRight = getIsLabelOnlyRight(isLabelOnly, labelAlignment);
-  var wrapperClasses = classname('StatusBar', 'width-100pct', 'display-flex', getLabelAlignmentClassName(label), className);
-  var progressLabelWrapperClasses = classname('display-flex', 'flex-1-0', labelAlignment === TOP && 'flex-order-1 flex-column margin-bottom-10', isIconAndLabelRight && 'flex-order-1 align-items-center', isIconAndLabelLeft && 'flex-order-2 align-items-center', isIconLeftAndLabelRight && 'flex-order-2 align-items-center', isIconRightAndLabelLeft && 'flex-order-1 align-items-center', isLabelOnlyLeft && 'align-items-center', isLabelOnlyRight && 'align-items-center', isIconOnlyLeft && 'flex-order-2 align-items-center', isIconOnlyRight && 'flex-order-1 align-items-center');
-  var labelWrapperClasses = classname(labelAlignment === TOP && 'display-flex justify-content-center', isIconAndLabelLeft && 'flex-order-1 margin-right-10', isIconAndLabelRight && 'flex-order-2 margin-left-10', isIconLeftAndLabelRight && 'flex-order-2 margin-left-10', isIconRightAndLabelLeft && 'flex-order-1 margin-right-10', isLabelOnlyLeft && 'flex-order-1 margin-right-10', isLabelOnlyRight && 'flex-order-2 margin-left-10');
-  var progressOuterWrapperClasses = classname('display-flex', 'flex-1-0', isIconAndLabelLeft && 'flex-order-2', isIconAndLabelRight && 'flex-order-1', isIconLeftAndLabelRight && 'flex-order-1', isIconRightAndLabelLeft && 'flex-order-2', isLabelOnlyLeft && 'flex-order-2', isLabelOnlyRight && 'flex-order-1');
-  var progressWrapperClasses = classname('progress', 'margin-0', 'flex-1-0', getProgressBarHightClassName(size));
+  var wrapperClasses = classNames('StatusBar', 'width-100pct', 'display-flex', getLabelAlignmentClassName(label), className);
+  var progressLabelWrapperClasses = classNames('display-flex', 'flex-1-0', labelAlignment === TOP && 'flex-order-1 flex-column margin-bottom-10', isIconAndLabelRight && 'flex-order-1 align-items-center', isIconAndLabelLeft && 'flex-order-2 align-items-center', isIconLeftAndLabelRight && 'flex-order-2 align-items-center', isIconRightAndLabelLeft && 'flex-order-1 align-items-center', isLabelOnlyLeft && 'align-items-center', isLabelOnlyRight && 'align-items-center', isIconOnlyLeft && 'flex-order-2 align-items-center', isIconOnlyRight && 'flex-order-1 align-items-center');
+  var labelWrapperClasses = classNames(labelAlignment === TOP && 'display-flex justify-content-center', isIconAndLabelLeft && 'flex-order-1 margin-right-10', isIconAndLabelRight && 'flex-order-2 margin-left-10', isIconLeftAndLabelRight && 'flex-order-2 margin-left-10', isIconRightAndLabelLeft && 'flex-order-1 margin-right-10', isLabelOnlyLeft && 'flex-order-1 margin-right-10', isLabelOnlyRight && 'flex-order-2 margin-left-10');
+  var progressOuterWrapperClasses = classNames('display-flex', 'flex-1-0', isIconAndLabelLeft && 'flex-order-2', isIconAndLabelRight && 'flex-order-1', isIconLeftAndLabelRight && 'flex-order-1', isIconRightAndLabelLeft && 'flex-order-2', isLabelOnlyLeft && 'flex-order-2', isLabelOnlyRight && 'flex-order-1');
+  var progressWrapperClasses = classNames('progress', 'margin-0', 'flex-1-0', getProgressBarHightClassName(size));
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
   }, renderIcon(icon, size), /*#__PURE__*/React.createElement("div", {

package/components/steppedProgressBar/SteppedProgressBar.js

@@ -1,8 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { Component, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Nav } from 'react-bootstrap';
-import classname from 'classnames';
+import classNames from 'classnames';
 import logPropError from '../../utils/logPropError';
 var errorProps = [{
   prop: 'labelsClassName',
@@ -35,7 +35,7 @@ var SteppedProgressBar = function SteppedProgressBar(props) {
   var handleSelect = function handleSelect(selectedKey) {
     return onSelectedChanged(Number(selectedKey));
   };
-  var wrapperClasses = classname('stepped-progress-bar', variant && "variant-".concat(variant), mobileBreakpoint && 'mobile-breakpoint', className && className);
+  var wrapperClasses = classNames('stepped-progress-bar', variant && "variant-".concat(variant), mobileBreakpoint && 'mobile-breakpoint', className && className);
   return /*#__PURE__*/React.createElement(Nav, {
     className: wrapperClasses,
     activeKey: selectedStepNumber,
@@ -46,13 +46,13 @@ var SteppedProgressBar = function SteppedProgressBar(props) {
       disabled: index > disableFollowingPages,
       as: "a",
       key: index,
-      className: classname('step-tab', labelObject.labelWrapperClassName)
+      className: classNames('step-tab', labelObject.labelWrapperClassName)
     }, /*#__PURE__*/React.createElement("div", {
       className: "step-tab-content"
     }, /*#__PURE__*/React.createElement("div", {
       className: "item-icon"
     }, labelObject.icon), /*#__PURE__*/React.createElement("div", {
-      className: classname('item-label', labelObject.labelClassName)
+      className: classNames('item-label', labelObject.labelClassName)
     }, labelObject.label)));
   }));
 };

package/components/tag/Tag.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "icon", "active", "disabled", "clickable", "selectable", "deletable", "revertable", "multiline", "muted", "round"];
 import React from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 var Tag = function Tag(props) {
   var children = props.children,
     icon = props.icon,
@@ -18,7 +18,7 @@ var Tag = function Tag(props) {
     round = props.round,
     remainingProps = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
-    className: classname('tag', props.size === 'small' && 'tag-small', icon && "rioglyph ".concat(icon), active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded',
+    className: classNames('tag', props.size === 'small' && 'tag-small', icon && "rioglyph ".concat(icon), active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded',
     // sounds wrong, but is right
     props.className)
   }), /*#__PURE__*/React.createElement("div", {

package/components/tag/TagList.js

@@ -3,19 +3,19 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "inline", "autoTagWidth", "tagsPerRow"];
 import React from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 var TagList = function TagList(props) {
   var children = props.children,
     inline = props.inline,
     autoTagWidth = props.autoTagWidth,
     tagsPerRow = props.tagsPerRow,
     remainingProps = _objectWithoutProperties(props, _excluded);
-  var wrappedChidren = /*#__PURE__*/React.createElement("div", {
+  var wrappedChildren = /*#__PURE__*/React.createElement("div", {
     className: "tags-per-row-".concat(tagsPerRow)
   }, children);
   return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
-    className: classname('taglist', !autoTagWidth && 'taglist-autowidth', !inline && 'taglist-vertical', tagsPerRow && 'row display-flex-sm flex-wrap-sm', props.className)
-  }), tagsPerRow ? wrappedChidren : children);
+    className: classNames('taglist', !autoTagWidth && 'taglist-autowidth', !inline && 'taglist-vertical', tagsPerRow && 'row display-flex-sm flex-wrap-sm', props.className)
+  }), tagsPerRow ? wrappedChildren : children);
 };
 TagList.defaultProps = {
   inline: true,

package/components/teaser/Teaser.js

@@ -7,7 +7,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
+import classNames from 'classnames';
 
 /* eslint-disable max-len */
 export var placeholderImage1by1 = "\ndata:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoCAQAAADnqhxvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODSFLsnJ3AAAPvUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDgTLCM9BHrU/AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTExLTE1VDEzOjEzOjMzKzAxOjAwgedH5AAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0xMS0xNVQxMzoxMzozMyswMTowMPC6/1gAAAAASUVORK5CYII=\n";
@@ -55,11 +55,11 @@ var Teaser = /*#__PURE__*/function (_Component) {
     value: function renderImage(image, columnWidth) {
       var specificClassNames;
       if (columnWidth === SEGMENTATION_100) {
-        specificClassNames = classname();
+        specificClassNames = classNames();
       } else {
-        specificClassNames = classname(image.align === LEFT && 'flex-order-1-sm padding-left-20-sm', image.align === RIGHT && 'flex-order-2-sm padding-right-20-sm', columnWidth === SEGMENTATION_50 && 'width-50pct-sm', columnWidth === SEGMENTATION_25_75 && 'width-50pct-sm width-75pct-lg', columnWidth === SEGMENTATION_75_25 && 'width-50pct-sm width-25pct-lg', columnWidth && 'padding-top-20-sm padding-bottom-20-sm');
+        specificClassNames = classNames(image.align === LEFT && 'flex-order-1-sm padding-left-20-sm', image.align === RIGHT && 'flex-order-2-sm padding-right-20-sm', columnWidth === SEGMENTATION_50 && 'width-50pct-sm', columnWidth === SEGMENTATION_25_75 && 'width-50pct-sm width-75pct-lg', columnWidth === SEGMENTATION_75_25 && 'width-50pct-sm width-25pct-lg', columnWidth && 'padding-top-20-sm padding-bottom-20-sm');
       }
-      var imageWrapperClassNames = classname('teaser-image-wrapper', specificClassNames, image.className && image.className);
+      var imageWrapperClassNames = classNames('teaser-image-wrapper', specificClassNames, image.className && image.className);
       var callback = image.onClick || function () {};
       return /*#__PURE__*/React.createElement("div", {
         className: imageWrapperClassNames,
@@ -76,23 +76,23 @@ var Teaser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderHeadline",
     value: function renderHeadline(headline, segmentation) {
-      var classNames = classname(segmentation === SEGMENTATION_100 ? 'margin-top-20 margin-bottom-25' : 'margin-top-5');
+      var classes = classNames(segmentation === SEGMENTATION_100 ? 'margin-top-20 margin-bottom-25' : 'margin-top-5');
       return /*#__PURE__*/React.createElement("h2", {
-        className: classNames
+        className: classes
       }, headline);
     }
   }, {
     key: "renderContent",
     value: function renderContent(content, segmentation) {
-      var classNames = classname('teaser-content-wrapper', 'text-size-16', segmentation === SEGMENTATION_100 ? 'padding-left-25-sm padding-right-25-sm' : 'flex-1-0-sm');
+      var classes = classNames('teaser-content-wrapper', 'text-size-16', segmentation === SEGMENTATION_100 ? 'padding-left-25-sm padding-right-25-sm' : 'flex-1-0-sm');
       return /*#__PURE__*/React.createElement("div", {
-        className: classNames
+        className: classes
       }, content);
     }
   }, {
     key: "renderButton",
     value: function renderButton(button) {
-      var buttonClassName = classname('btn', button.bsStyle ? "btn-".concat(button.bsStyle) : 'btn-primary', button.className && button.className);
+      var buttonClassName = classNames('btn', button.bsStyle ? "btn-".concat(button.bsStyle) : 'btn-primary', button.className && button.className);
       var callback = button.onClick || function () {};
       return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("button", {
         className: buttonClassName,
@@ -122,7 +122,7 @@ var Teaser = /*#__PURE__*/function (_Component) {
         button = _this$props.button,
         segmentation = _this$props.segmentation,
         className = _this$props.className;
-      var wrapperClassNames = classname(wrapperName, 'panel', 'panel-default', 'panel-body', 'padding-20', 'margin-bottom-20', 'text-center', alignmentClass, className && className);
+      var wrapperClassNames = classNames(wrapperName, 'panel', 'panel-default', 'panel-body', 'padding-20', 'margin-bottom-20', 'text-center', alignmentClass, className && className);
       return /*#__PURE__*/React.createElement("div", {
         className: wrapperClassNames
       }, headline && this.renderHeadline(headline, segmentation), image && this.renderImage(image, segmentation), content && this.renderContent(content, segmentation), button && this.renderButton(button, segmentation), footer && this.renderFooter(footer));
@@ -130,7 +130,7 @@ var Teaser = /*#__PURE__*/function (_Component) {
   }, {
     key: "getCaptionClassNames",
     value: function getCaptionClassNames(image, segmentation) {
-      return classname('caption', image && image.align === LEFT && 'flex-order-2-sm', image && image.align === RIGHT && 'flex-order-1-sm', segmentation === SEGMENTATION_50 && 'width-50pct-sm', segmentation === SEGMENTATION_25_75 && 'width-50pct-sm width-25pct-lg', segmentation === SEGMENTATION_75_25 && 'width-50pct-sm width-75pct-lg', !segmentation && 'display-flex-sm flex-column-sm flex-1-0-sm');
+      return classNames('caption', image && image.align === LEFT && 'flex-order-2-sm', image && image.align === RIGHT && 'flex-order-1-sm', segmentation === SEGMENTATION_50 && 'width-50pct-sm', segmentation === SEGMENTATION_25_75 && 'width-50pct-sm width-25pct-lg', segmentation === SEGMENTATION_75_25 && 'width-50pct-sm width-75pct-lg', !segmentation && 'display-flex-sm flex-column-sm flex-1-0-sm');
     }
   }, {
     key: "renderThumbnailBasedLayoutForMultipleSegmentsOrRows",
@@ -143,7 +143,7 @@ var Teaser = /*#__PURE__*/function (_Component) {
         button = _this$props2.button,
         segmentation = _this$props2.segmentation,
         className = _this$props2.className;
-      var wrapperClassNames = classname(wrapperName, 'thumbnail', 'display-flex-sm', !segmentation && 'flex-column height-100pct-sm',
+      var wrapperClassNames = classNames(wrapperName, 'thumbnail', 'display-flex-sm', !segmentation && 'flex-column height-100pct-sm',
       // only for multiple teasers in a row
       alignmentClass, className && className);
       var captionClassNames = this.getCaptionClassNames(image, segmentation);

package/components/teaser/TeaserContainer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classname from 'classnames';
-var getCridClasses = function getCridClasses(amount) {
+import classNames from 'classnames';
+var getGridClasses = function getGridClasses(amount) {
   switch (amount) {
     case 1:
       return 'col-12';
@@ -20,20 +20,20 @@ var getCridClasses = function getCridClasses(amount) {
   }
 };
 var TeaserContainer = function TeaserContainer(props) {
-  var rowClassNames = classname('teaser-container', 'row', 'display-flex-sm flex-wrap-sm', props.className && props.className);
+  var rowClassNames = classNames('teaser-container', 'row', 'display-flex-sm flex-wrap-sm', props.className && props.className);
   var columnClassNames;
   if (props.teaserPerRow) {
-    columnClassNames = "".concat(getCridClasses(props.teaserPerRow));
+    columnClassNames = getGridClasses(props.teaserPerRow);
   } else {
     var childCount = props.children.length || 1;
-    columnClassNames = classname(getCridClasses(childCount));
+    columnClassNames = getGridClasses(childCount);
   }
-  var aggregartedColumnClassNames = classname(columnClassNames, props.columnClassName && props.columnClassName);
+  var aggregatedColumnClassNames = classNames(columnClassNames, props.columnClassName && props.columnClassName);
   return /*#__PURE__*/React.createElement("div", {
     className: rowClassNames
   }, React.Children.map(props.children, function (child) {
     return /*#__PURE__*/React.createElement("div", {
-      className: aggregartedColumnClassNames
+      className: aggregatedColumnClassNames
     }, child);
   }));
 };

package/lib/es/components/applicationHeader/AppMenu.js

@@ -41,13 +41,13 @@ var AppMenu = function AppMenu(props) {
     appNavigatorClassName = props.appNavigatorClassName,
     appNavigator = props.appNavigator,
     onToggleAppMenu = props.onToggleAppMenu,
-    remainigProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var hasItems = !!(appMenuItems && appMenuItems.length || appNavigator);
-  var classNames = (0, _classnames["default"])('ModuleNavigation AppMenu', 'user-select-none', {
+    remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var hasItems = !!(appMenuItems !== null && appMenuItems !== void 0 && appMenuItems.length || appNavigator);
+  var wrapperClassNames = (0, _classnames["default"])('ModuleNavigation AppMenu', 'user-select-none', {
     hasModules: hasItems
   }, appNavigatorClassName && appNavigatorClassName);
-  return /*#__PURE__*/_react["default"].createElement("ul", (0, _extends2["default"])({}, remainigProps, {
-    className: classNames
+  return /*#__PURE__*/_react["default"].createElement("ul", (0, _extends2["default"])({}, remainingProps, {
+    className: wrapperClassNames
   }), /*#__PURE__*/_react["default"].createElement(_AppMenuDropdown["default"], {
     title: label,
     caret: hasItems,

package/lib/es/components/applicationHeader/ApplicationHeader.js

@@ -11,7 +11,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _debounce = _interopRequireDefault(require("lodash/fp/debounce"));
 var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _AppMenu = require("./AppMenu");
@@ -37,7 +36,7 @@ var ApplicationHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
     navItems = props.navItems,
     actionBarItems = props.actionBarItems,
     onToggleAppMenu = props.onToggleAppMenu,
-    remainigProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+    remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var actionBarRef = (0, _react.useRef)();
   var _useResizeObserver = (0, _useResizeObserver3["default"])(),
     _useResizeObserver2 = (0, _slicedToArray2["default"])(_useResizeObserver, 2),
@@ -52,9 +51,9 @@ var ApplicationHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
   var containerWidth = getContentRect('width') || 0;
   var isMobileWidth = containerWidth <= SCREEN_SM;
   var hasActionBarItems = !(0, _isEmpty["default"])(actionBarItems);
-  var classNames = (0, _classnames["default"])('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
-  return /*#__PURE__*/_react["default"].createElement("nav", (0, _extends2["default"])({}, remainigProps, {
-    className: classNames,
+  var wrapperClassNames = (0, _classnames["default"])('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
+  return /*#__PURE__*/_react["default"].createElement("nav", (0, _extends2["default"])({}, remainingProps, {
+    className: wrapperClassNames,
     ref: navRef
   }), isMobileWidth && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MobileAppMenu.MobileAppMenu, {
     showHomeIcon: showHomeIcon,

package/lib/es/components/applicationHeader/NavItems.js

@@ -184,7 +184,7 @@ var NavItems = function NavItems(props) {
   };
 
   // As all navItems need to be added to the DOM first in order to get their real size
-  // the computation wheather a navItem need to be shown under the collapsed dropdown or not
+  // the computation whether a navItem need to be shown under the collapsed dropdown or not
   // needs to be done after the component did mount to the DOM.
 
   var classes = (0, _classnames["default"])('SubmoduleNavigation', 'nav');

package/lib/es/components/radiobutton/RadioButton.js

@@ -31,7 +31,7 @@ var RadioButtonIcon = function RadioButtonIcon(props) {
     className: "rioglyph ".concat(icon),
     style: iconStyles
   }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: 'radio-label'
+    className: "radio-label"
   }, text));
 };
 var RadioButton = function RadioButton(props) {
@@ -97,7 +97,7 @@ var RadioButton = function RadioButton(props) {
     onKeyDown: handleToggleKeyDown,
     ref: labelRef
   }), /*#__PURE__*/_react["default"].createElement("input", {
-    type: 'radio',
+    type: "radio",
     defaultChecked: defaultChecked,
     checked: checked,
     disabled: disabled,
@@ -113,7 +113,7 @@ var RadioButton = function RadioButton(props) {
     iconLabelPosition: iconLabelPosition,
     text: text
   }), renderDefault && /*#__PURE__*/_react["default"].createElement("span", {
-    className: 'radio-text'
+    className: "radio-text"
   }, /*#__PURE__*/_react["default"].createElement("span", null, text)), renderCustomContent && children);
 };
 RadioButton.ICON_LABEL_VERTICAL = 'vertical';

package/lib/es/components/selects/BaseDropdownMenu.js

@@ -280,10 +280,10 @@ var BaseDropdownMenu = /*#__PURE__*/function (_Component) {
 
       // Show focused style only when keyboard is in use
       var anchorClassNames = this.state.keyboardUsed && this.state.focusedItemIndex === index ? HIGHLIGHT_CLASS : '';
-      var classNames = (0, _classnames["default"])(option.disabled && 'disabled', this.props.useActiveClass && option.selected && 'active');
+      var wrapperClassNames = (0, _classnames["default"])(option.disabled && 'disabled', this.props.useActiveClass && option.selected && 'active');
       return /*#__PURE__*/_react["default"].createElement("li", {
         key: option.id,
-        className: classNames
+        className: wrapperClassNames
       }, /*#__PURE__*/_react["default"].createElement("a", {
         role: "button",
         className: anchorClassNames,

package/lib/es/components/selects/Multiselect.js

@@ -112,9 +112,9 @@ var Multiselect = /*#__PURE__*/function (_Component) {
         className = _this$props.className,
         hasError = _this$props.hasError;
       var dropup = this.isAutoDropActive() ? this.state.dropup : this.props.dropup;
-      var classes = (0, _classnames["default"])('select', 'multiselect', dropup && 'dropup', 'dropdown', hasError && 'has-error', this.state.isOpen && 'open', className && className);
+      var wrapperClasses = (0, _classnames["default"])('select', 'multiselect', dropup && 'dropup', 'dropdown', hasError && 'has-error', this.state.isOpen && 'open', className && className);
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes,
+        className: wrapperClasses,
         ref: function ref(multiselectWrapper) {
           return _this2.multiselectWrapper = multiselectWrapper;
         }
@@ -176,7 +176,7 @@ var Multiselect = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: "selected-label"
       }, item.icon && /*#__PURE__*/_react["default"].createElement("span", {
-        className: 'margin-right-5'
+        className: "margin-right-5"
       }, item.icon), item.label), /*#__PURE__*/_react["default"].createElement("span", {
         className: "removeIcon",
         onClick: function onClick(event) {
@@ -222,10 +222,10 @@ var Multiselect = /*#__PURE__*/function (_Component) {
         counterMessage = _this$props4.counterMessage,
         renderCounterMessage = _this$props4.renderCounterMessage;
       (0, _logDeprecatedWarnings["default"])(warningProps, this.props, 'Multiselect');
-      var classnames = (0, _classnames["default"])('dropdown-toggle', 'form-control', 'text-left', bsSize === 'large' && 'input-lg',
-      // TODO: deprecte since it's not consistent
+      var wrapperClassNames = (0, _classnames["default"])('dropdown-toggle', 'form-control', 'text-left', bsSize === 'large' && 'input-lg',
+      // TODO: deprecate since it's not consistent
       bsSize === 'small' && 'input-sm',
-      // TODO: deprecte since it's not consistent
+      // TODO: deprecate since it's not consistent
       bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', disabled && 'disabled');
       var showPlaceholder = !selectedItems.length && !this.props.showUnselectedItemIcons;
 
@@ -235,7 +235,7 @@ var Multiselect = /*#__PURE__*/function (_Component) {
         type: "button",
         id: id,
         name: name,
-        className: classnames,
+        className: wrapperClassNames,
         "data-toggle": "dropdown",
         tabIndex: tabIndex,
         "aria-haspopup": "true",
@@ -326,7 +326,7 @@ var Multiselect = /*#__PURE__*/function (_Component) {
       event.preventDefault();
 
       // prevent selecting disabled Items
-      if (selectedItem && selectedItem.disabled) {
+      if (selectedItem !== null && selectedItem !== void 0 && selectedItem.disabled) {
         return;
       }
       var newSelectedItems = this.updateSelection(selectedItem.id);

package/lib/es/components/selects/Select.js

@@ -142,8 +142,8 @@ var Select = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react["default"].createElement("span", null, optionSpans);
     }
   }, {
-    key: "getSeletedItemLabel",
-    value: function getSeletedItemLabel(selectedItem, placeholder) {
+    key: "getSelectedItemLabel",
+    value: function getSelectedItemLabel(selectedItem, placeholder) {
       if (this.props.showUnselectedItemIcons) {
         return this.renderUnselectedItemIcons(this.props.options, selectedItem);
       }
@@ -203,7 +203,7 @@ var Select = /*#__PURE__*/function (_Component) {
       var _this$state = this.state,
         isOpen = _this$state.isOpen,
         selectedItem = _this$state.selectedItem;
-      var classnames = (0, _classnames["default"])('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'large' && 'input-lg',
+      var classes = (0, _classnames["default"])('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'large' && 'input-lg',
       // TODO: deprecte since it's not consistent
       bsSize === 'small' && 'input-sm',
       // TODO: deprecte since it's not consistent
@@ -212,12 +212,12 @@ var Select = /*#__PURE__*/function (_Component) {
         className: "selected-option-text"
       }, label && /*#__PURE__*/_react["default"].createElement("span", {
         className: "selected-option-text-label"
-      }, label, ":"), /*#__PURE__*/_react["default"].createElement("span", null, this.getSeletedItemLabel(selectedItem, placeholder)));
+      }, label, ":"), /*#__PURE__*/_react["default"].createElement("span", null, this.getSelectedItemLabel(selectedItem, placeholder)));
       return /*#__PURE__*/_react["default"].createElement("button", {
         type: "button",
         id: id,
         name: name,
-        className: classnames,
+        className: classes,
         "data-toggle": "dropdown",
         tabIndex: tabIndex,
         "aria-haspopup": "true",
@@ -242,7 +242,7 @@ var Select = /*#__PURE__*/function (_Component) {
         dropdownClassName = _this$props4.dropdownClassName;
 
       // When an option was already selected, highlight this option by setting the focusedItemIndex accordingly.
-      // In case there was nothing preselected, set the focusedItemIndex to the first item if keayboard was used.
+      // In case there was nothing preselected, set the focusedItemIndex to the first item if keyboard was used.
       var focusedItemIndex = this.state.focusedItemIndex;
       if (this.state.selectedItem) {
         focusedItemIndex = this.props.options.findIndex(function (option) {

package/lib/es/components/slider/RangeSlider.js

@@ -155,9 +155,9 @@ var RangeSlider = function RangeSlider(props) {
     finalRightValue = _getRangeValues8[1];
   var trackWidth = 100 * (finalRightValue - finalLeftValue) / (maxValue - minValue);
   var trackLeft = 100 * (finalLeftValue - minValue) / (maxValue - minValue);
-  var classNames = (0, _classnames["default"])('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', className && className);
+  var wrapperClassNames = (0, _classnames["default"])('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', className && className);
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, remainingProps, {
-    className: classNames
+    className: wrapperClassNames
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "range-whole-track"
   }), /*#__PURE__*/_react["default"].createElement("div", {

package/lib/es/components/slider/Slider.js

@@ -54,10 +54,10 @@ var Slider = function Slider(props) {
   var onMouseDown = function onMouseDown() {
     setIsChanging(true);
   };
-  var classNames = (0, _classnames["default"])('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', hideValueBar && 'hide-value-bar', largeValueLabels && 'large-value-labels', className && className);
+  var wrapperClassNames = (0, _classnames["default"])('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', hideValueBar && 'hide-value-bar', largeValueLabels && 'large-value-labels', className && className);
   var trackWidth = 100 * (currentValue - minValue) / (maxValue - minValue);
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, remainingProps, {
-    className: classNames
+    className: wrapperClassNames
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "range-whole-track"
   }), /*#__PURE__*/_react["default"].createElement("div", {

package/lib/es/components/statusBar/StatusBar.js

@@ -32,10 +32,10 @@ var renderProgressBar = function renderProgressBar(_ref, index, useProgressDivid
     color = _ref.color,
     className = _ref.className,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classNames = (0, _classnames["default"])('progress-bar', color ? color : 'progress-bar-info', useProgressDivider && 'progress-divider', className && className);
+  var progressBarClassNames = (0, _classnames["default"])('progress-bar', color ? color : 'progress-bar-info', useProgressDivider && 'progress-divider', className && className);
   var progressBar = /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     key: index,
-    className: classNames,
+    className: progressBarClassNames,
     style: {
       width: "".concat(percentage, "%")
     }
@@ -43,7 +43,7 @@ var renderProgressBar = function renderProgressBar(_ref, index, useProgressDivid
   if (tooltip) {
     var tooltipElement = /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
       id: "tooltip-".concat(index),
-      width: 'auto'
+      width: "auto"
     }, tooltip);
     return /*#__PURE__*/_react["default"].createElement(_OverlayTrigger["default"], {
       key: index,

package/lib/es/components/tag/TagList.js

@@ -17,12 +17,12 @@ var TagList = function TagList(props) {
     autoTagWidth = props.autoTagWidth,
     tagsPerRow = props.tagsPerRow,
     remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var wrappedChidren = /*#__PURE__*/_react["default"].createElement("div", {
+  var wrappedChildren = /*#__PURE__*/_react["default"].createElement("div", {
     className: "tags-per-row-".concat(tagsPerRow)
   }, children);
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, remainingProps, {
     className: (0, _classnames["default"])('taglist', !autoTagWidth && 'taglist-autowidth', !inline && 'taglist-vertical', tagsPerRow && 'row display-flex-sm flex-wrap-sm', props.className)
-  }), tagsPerRow ? wrappedChidren : children);
+  }), tagsPerRow ? wrappedChildren : children);
 };
 TagList.defaultProps = {
   inline: true,

package/lib/es/components/teaser/Teaser.js

@@ -89,17 +89,17 @@ var Teaser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderHeadline",
     value: function renderHeadline(headline, segmentation) {
-      var classNames = (0, _classnames["default"])(segmentation === SEGMENTATION_100 ? 'margin-top-20 margin-bottom-25' : 'margin-top-5');
+      var classes = (0, _classnames["default"])(segmentation === SEGMENTATION_100 ? 'margin-top-20 margin-bottom-25' : 'margin-top-5');
       return /*#__PURE__*/_react["default"].createElement("h2", {
-        className: classNames
+        className: classes
       }, headline);
     }
   }, {
     key: "renderContent",
     value: function renderContent(content, segmentation) {
-      var classNames = (0, _classnames["default"])('teaser-content-wrapper', 'text-size-16', segmentation === SEGMENTATION_100 ? 'padding-left-25-sm padding-right-25-sm' : 'flex-1-0-sm');
+      var classes = (0, _classnames["default"])('teaser-content-wrapper', 'text-size-16', segmentation === SEGMENTATION_100 ? 'padding-left-25-sm padding-right-25-sm' : 'flex-1-0-sm');
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classNames
+        className: classes
       }, content);
     }
   }, {

package/lib/es/components/teaser/TeaserContainer.js

@@ -8,7 +8,7 @@ exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var getCridClasses = function getCridClasses(amount) {
+var getGridClasses = function getGridClasses(amount) {
   switch (amount) {
     case 1:
       return 'col-12';
@@ -30,17 +30,17 @@ var TeaserContainer = function TeaserContainer(props) {
   var rowClassNames = (0, _classnames["default"])('teaser-container', 'row', 'display-flex-sm flex-wrap-sm', props.className && props.className);
   var columnClassNames;
   if (props.teaserPerRow) {
-    columnClassNames = "".concat(getCridClasses(props.teaserPerRow));
+    columnClassNames = getGridClasses(props.teaserPerRow);
   } else {
     var childCount = props.children.length || 1;
-    columnClassNames = (0, _classnames["default"])(getCridClasses(childCount));
+    columnClassNames = getGridClasses(childCount);
   }
-  var aggregartedColumnClassNames = (0, _classnames["default"])(columnClassNames, props.columnClassName && props.columnClassName);
+  var aggregatedColumnClassNames = (0, _classnames["default"])(columnClassNames, props.columnClassName && props.columnClassName);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: rowClassNames
   }, _react["default"].Children.map(props.children, function (child) {
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: aggregartedColumnClassNames
+      className: aggregatedColumnClassNames
     }, child);
   }));
 };

package/lib/es/styles/variables/colors.json

@@ -48,7 +48,7 @@
     "color-highlight-darkest": "#154b56",
     "color-highlight-darker": "#206e7e",
     "color-highlight-dark": "#268897",
-    "color-highlight": "@brand-primary",
+    "color-highlight": "#30b4c0",
     "color-highlight-light": "#8ddbe3",
     "color-highlight-lighter": "#cef0f3",
     "color-highlight-lightest": "#ebf9fa",

package/lib/es/styles/variables/dark_colors.less

@@ -67,7 +67,7 @@
 @dark-color-highlight-darkest: #def2f5;
 @dark-color-highlight-darker: #c9ebef;
 @dark-color-highlight-dark: #a3dbe3;
-@dark-color-highlight: @dark-brand-primary;
+@dark-color-highlight: #30b4c0;
 @dark-color-highlight-light: #268897;
 @dark-color-highlight-lighter: #206e7e;
 @dark-color-highlight-lightest: #154b56;

package/lib/es/styles/variables/light_colors.less

@@ -71,7 +71,7 @@
 @color-highlight-darkest: #154b56;
 @color-highlight-darker: #206e7e;
 @color-highlight-dark: #268897;
-@color-highlight: @brand-primary;
+@color-highlight: #30b4c0;
 @color-highlight-light: #8ddbe3;
 @color-highlight-lighter: #cef0f3;
 @color-highlight-lightest: #ebf9fa;

package/lib/es/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.js

@@ -43,9 +43,9 @@ var VolkswagenApplicationHeader = /*#__PURE__*/(0, _react.forwardRef)(function (
 
   // const hasActionBarItems = !isEmpty(actionBarItems);
 
-  var classNames = (0, _classnames["default"])('ApplicationHeader VolkswagenApplicationHeader', 'user-select-none', className && className);
+  var wrapperClassNames = (0, _classnames["default"])('ApplicationHeader VolkswagenApplicationHeader', 'user-select-none', className && className);
   return /*#__PURE__*/_react["default"].createElement("nav", (0, _extends2["default"])({}, remainingProps, {
-    className: classNames,
+    className: wrapperClassNames,
     ref: navRef
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "width-100pct"

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.3"
+    "version": "0.16.4-beta.1"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.3",
+    "version": "0.16.4-beta.1",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {

package/styles/variables/colors.json

@@ -48,7 +48,7 @@
     "color-highlight-darkest": "#154b56",
     "color-highlight-darker": "#206e7e",
     "color-highlight-dark": "#268897",
-    "color-highlight": "@brand-primary",
+    "color-highlight": "#30b4c0",
     "color-highlight-light": "#8ddbe3",
     "color-highlight-lighter": "#cef0f3",
     "color-highlight-lightest": "#ebf9fa",

package/styles/variables/dark_colors.less

@@ -67,7 +67,7 @@
 @dark-color-highlight-darkest: #def2f5;
 @dark-color-highlight-darker: #c9ebef;
 @dark-color-highlight-dark: #a3dbe3;
-@dark-color-highlight: @dark-brand-primary;
+@dark-color-highlight: #30b4c0;
 @dark-color-highlight-light: #268897;
 @dark-color-highlight-lighter: #206e7e;
 @dark-color-highlight-lightest: #154b56;

package/styles/variables/light_colors.less

@@ -71,7 +71,7 @@
 @color-highlight-darkest: #154b56;
 @color-highlight-darker: #206e7e;
 @color-highlight-dark: #268897;
-@color-highlight: @brand-primary;
+@color-highlight: #30b4c0;
 @color-highlight-light: #8ddbe3;
 @color-highlight-lighter: #cef0f3;
 @color-highlight-lightest: #ebf9fa;

package/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.js

@@ -2,10 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["homeRoute", "className", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems"];
-import React, { useState, useRef, forwardRef, useCallback, useImperativeHandle } from 'react';
+import React, { useRef, forwardRef, useCallback, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/fp/isEmpty';
-import classname from 'classnames';
+import classNames from 'classnames';
 import { ApplicationActionBar } from '../../../../components/applicationHeader/ApplicationActionBar';
 import useResizeObserver from '../../../../hooks/useResizeObserver';
 import modulePropTypes from './modulePropTypes';
@@ -33,9 +33,9 @@ export var VolkswagenApplicationHeader = /*#__PURE__*/forwardRef(function (props
 
   // const hasActionBarItems = !isEmpty(actionBarItems);
 
-  var classNames = classname('ApplicationHeader VolkswagenApplicationHeader', 'user-select-none', className && className);
+  var wrapperClassNames = classNames('ApplicationHeader VolkswagenApplicationHeader', 'user-select-none', className && className);
   return /*#__PURE__*/React.createElement("nav", _extends({}, remainingProps, {
-    className: classNames,
+    className: wrapperClassNames,
     ref: navRef
   }), /*#__PURE__*/React.createElement("div", {
     className: "width-100pct"

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.3"
+    "version": "0.16.4-beta.1"
 }