@widergy/energy-ui 1.134.2 → 2.0.0

package/dist/components/UTProgressBar/theme.js

@@ -4,33 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.retrieveStyle = void 0;
-var _seamlessImmutable = require("seamless-immutable");
 var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var retrieveStyle = function retrieveStyle(theme) {
+var retrieveStyle = function retrieveStyle(_ref) {
+  var _theme$UTProgressBar, _theme$UTProgressBar2, _theme$UTProgressBar3, _theme$UTProgressBar4, _theme$UTProgressBar5, _theme$UTProgressBar6, _theme$UTProgressBar7, _theme$UTProgressBar8, _theme$UTProgressBar9, _theme$UTProgressBar10, _theme$UTProgressBar11, _theme$UTProgressBar12, _theme$UTProgressBar13, _theme$UTProgressBar14, _theme$UTProgressBar15, _theme$UTProgressBar16, _theme$UTProgressBar17, _theme$UTProgressBar18, _theme$UTProgressBar19;
+  var theme = _ref.theme;
   return {
     container: {
       alignItems: 'center',
       display: 'flex',
-      width: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'width'])
+      width: theme === null || theme === void 0 ? void 0 : (_theme$UTProgressBar = theme.UTProgressBar) === null || _theme$UTProgressBar === void 0 ? void 0 : _theme$UTProgressBar.width
     },
     root: {
-      border: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'border']),
-      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'borderRadius']),
-      height: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'height']),
-      width: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'width'], '100%')
+      border: theme === null || theme === void 0 ? void 0 : (_theme$UTProgressBar2 = theme.UTProgressBar) === null || _theme$UTProgressBar2 === void 0 ? void 0 : _theme$UTProgressBar2.border,
+      borderRadius: theme === null || theme === void 0 ? void 0 : (_theme$UTProgressBar3 = theme.UTProgressBar) === null || _theme$UTProgressBar3 === void 0 ? void 0 : _theme$UTProgressBar3.borderRadius,
+      height: theme === null || theme === void 0 ? void 0 : (_theme$UTProgressBar4 = theme.UTProgressBar) === null || _theme$UTProgressBar4 === void 0 ? void 0 : _theme$UTProgressBar4.height,
+      width: (theme === null || theme === void 0 ? void 0 : (_theme$UTProgressBar5 = theme.UTProgressBar) === null || _theme$UTProgressBar5 === void 0 ? void 0 : _theme$UTProgressBar5.width) || '100%'
     },
     colorPrimary: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'colorPrimary', 'backgroundColor'], _colors.default.white),
-      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'colorPrimary', 'borderRadius'])
+      backgroundColor: (theme === null || theme === void 0 ? void 0 : (_theme$UTProgressBar6 = theme.UTProgressBar) === null || _theme$UTProgressBar6 === void 0 ? void 0 : (_theme$UTProgressBar7 = _theme$UTProgressBar6.colorPrimary) === null || _theme$UTProgressBar7 === void 0 ? void 0 : _theme$UTProgressBar7.backgroundColor) || _colors.default.white,
+      borderRadius: theme === null || theme === void 0 ? void 0 : (_theme$UTProgressBar8 = theme.UTProgressBar) === null || _theme$UTProgressBar8 === void 0 ? void 0 : (_theme$UTProgressBar9 = _theme$UTProgressBar8.colorPrimary) === null || _theme$UTProgressBar9 === void 0 ? void 0 : _theme$UTProgressBar9.borderRadius
     },
     barColorPrimary: {
-      background: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'barColorPrimary', 'background'], (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'barColorPrimary', 'backgroundColor'], _colors.default.blue)),
-      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'barColorPrimary', 'borderRadius']),
-      transition: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'barColorPrimary', 'transition'])
+      background: (theme === null || theme === void 0 ? void 0 : (_theme$UTProgressBar10 = theme.UTProgressBar) === null || _theme$UTProgressBar10 === void 0 ? void 0 : (_theme$UTProgressBar11 = _theme$UTProgressBar10.barColorPrimary) === null || _theme$UTProgressBar11 === void 0 ? void 0 : _theme$UTProgressBar11.background) || (theme === null || theme === void 0 ? void 0 : (_theme$UTProgressBar12 = theme.UTProgressBar) === null || _theme$UTProgressBar12 === void 0 ? void 0 : (_theme$UTProgressBar13 = _theme$UTProgressBar12.barColorPrimary) === null || _theme$UTProgressBar13 === void 0 ? void 0 : _theme$UTProgressBar13.backgroundColor) || _colors.default.blue,
+      borderRadius: theme === null || theme === void 0 ? void 0 : (_theme$UTProgressBar14 = theme.UTProgressBar) === null || _theme$UTProgressBar14 === void 0 ? void 0 : (_theme$UTProgressBar15 = _theme$UTProgressBar14.barColorPrimary) === null || _theme$UTProgressBar15 === void 0 ? void 0 : _theme$UTProgressBar15.borderRadius,
+      transition: theme === null || theme === void 0 ? void 0 : (_theme$UTProgressBar16 = theme.UTProgressBar) === null || _theme$UTProgressBar16 === void 0 ? void 0 : (_theme$UTProgressBar17 = _theme$UTProgressBar16.barColorPrimary) === null || _theme$UTProgressBar17 === void 0 ? void 0 : _theme$UTProgressBar17.transition
     },
     label: {
-      margin: (0, _seamlessImmutable.getIn)(theme, ['UTProgressBar', 'label', 'margin'], '0 0 0 10px')
+      margin: (theme === null || theme === void 0 ? void 0 : (_theme$UTProgressBar18 = theme.UTProgressBar) === null || _theme$UTProgressBar18 === void 0 ? void 0 : (_theme$UTProgressBar19 = _theme$UTProgressBar18.label) === null || _theme$UTProgressBar19 === void 0 ? void 0 : _theme$UTProgressBar19.margin) || '0 0 0 10px'
     }
   };
 };

package/dist/components/UTRadioGroup/index.js

@@ -12,6 +12,7 @@ var _propTypes = require("prop-types");
 var _formTypes = require("../../types/formTypes");
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _classesUtils = require("../../utils/classesUtils");
 var _theme = require("./theme");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -44,26 +45,26 @@ var UTRadioGroup = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "handleChange", function (_, value) {
       return _this.props.input.onChange(value);
     });
-    _defineProperty(_assertThisInitialized(_this), "renderRadioItem", function (option, index) {
+    _defineProperty(_assertThisInitialized(_this), "renderRadioItem", function (_ref) {
+      var classes = _ref.classes,
+        index = _ref.index,
+        option = _ref.option;
       var _this$props = _this.props,
-        classes = _this$props.classes,
-        valueKey = _this$props.valueKey,
-        labelKey = _this$props.labelKey,
-        disabled = _this$props.disabled,
         className = _this$props.className,
-        _this$props$className = _this$props.classNames,
-        classNames = _this$props$className === void 0 ? {} : _this$props$className,
+        CustomRadioLabel = _this$props.customRadioLabel,
+        disabled = _this$props.disabled,
         _this$props$disableRi = _this$props.disableRipple,
         disableRipple = _this$props$disableRi === void 0 ? false : _this$props$disableRi,
-        CustomRadioLabel = _this$props.customRadioLabel,
-        input = _this$props.input;
+        input = _this$props.input,
+        labelKey = _this$props.labelKey,
+        valueKey = _this$props.valueKey;
       var isChecked = input.value === option[valueKey];
       return /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
         key: option[valueKey],
         value: option[valueKey],
         checked: isChecked,
         classes: {
-          root: "".concat(classes.root, " ").concat(classNames.root, " ").concat(isChecked && classes.checkedRoot, " ").concat(option.disabled && classes.disabledRoot, " ").concat(isChecked && classNames.selectedRoot),
+          root: "\n            ".concat(classes.root, "\n            ").concat(isChecked && classes.checkedRoot, "\n            ").concat(option.disabled && classes.disabledRoot, "\n          "),
           label: classes.label
         },
         disabled: disabled || option.disabled,
@@ -74,8 +75,8 @@ var UTRadioGroup = /*#__PURE__*/function (_PureComponent) {
         control: /*#__PURE__*/_react.default.createElement(_Radio.default, {
           disableRipple: disableRipple,
           classes: {
-            root: classNames.iconRoot,
-            checked: "".concat(classes.checked, " ").concat(classNames.checkedIconRoot)
+            root: classes.iconRoot,
+            checked: "".concat(classes.checked, " ").concat(classes.checkedIconRoot)
           }
         }),
         className: "".concat(classes.formControlLabel, " \n              ").concat(_this.props.divider && index === 0 && classes.topDivider, " \n              ").concat(_this.props.divider && classes.divider, "\n              ").concat(className)
@@ -86,24 +87,36 @@ var UTRadioGroup = /*#__PURE__*/function (_PureComponent) {
   _createClass(UTRadioGroup, [{
     key: "render",
     value: function render() {
-      var _field$configuration;
+      var _field$configuration,
+        _this2 = this;
       var _this$props2 = this.props,
-        input = _this$props2.input,
-        options = _this$props2.options,
+        _this$props2$classNam = _this$props2.classNames,
+        classNames = _this$props2$classNam === void 0 ? {} : _this$props2$classNam,
+        themeClasses = _this$props2.classes,
         containerClassName = _this$props2.containerClassName,
         field = _this$props2.field,
-        withUpperTitle = _this$props2.withUpperTitle,
+        input = _this$props2.input,
+        options = _this$props2.options,
         titleProps = _this$props2.titleProps,
-        classes = _this$props2.classes;
+        withUpperTitle = _this$props2.withUpperTitle;
       var shouldShowUpperTitle = (field === null || field === void 0 ? void 0 : (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) && withUpperTitle;
+      var classes = (0, _classesUtils.mergeClasses)(themeClasses, classNames);
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
-        className: "".concat(classes.title)
-      }, titleProps), field.title), /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
+        className: classes.title
+      }, titleProps, {
+        withMarkdown: true
+      }), field.title), /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
         name: input.name,
-        value: input.value,
+        value: input.value || '',
         className: containerClassName,
         onChange: this.handleChange
-      }, options.map(this.renderRadioItem)));
+      }, options.map(function (option, index) {
+        return _this2.renderRadioItem({
+          classes: classes,
+          index: index,
+          option: option
+        });
+      })));
     }
   }]);
   return UTRadioGroup;
@@ -118,7 +131,7 @@ UTRadioGroup.propTypes = {
   className: _propTypes.string,
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
   containerClassName: _propTypes.string,
-  customRadioLabel: _propTypes.element,
+  customRadioLabel: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.func]),
   disabled: _propTypes.bool,
   disableRipple: _propTypes.bool,
   divider: _propTypes.bool,

package/dist/components/UTRadioGroup/theme.js

@@ -8,7 +8,8 @@ var _seamlessImmutable = require("seamless-immutable");
 var _styles = require("@material-ui/core/styles");
 var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var retrieveStyle = function retrieveStyle(theme) {
+var retrieveStyle = function retrieveStyle(_ref) {
+  var theme = _ref.theme;
   return {
     formControlLabel: {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'formControlLabel', 'backgroundColor'], 'transparent'),
@@ -31,11 +32,11 @@ var retrieveStyle = function retrieveStyle(theme) {
       width: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'width'], '100%'),
       transition: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'transition'], "all 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"),
       willChange: 'left, width',
-      '&:hover:not($selected)': {
+      '&:hover:not($checkedRoot)': {
         backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'hover', 'backgroundColor'], "transparent"),
         transition: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'hoverTransition', 'transition'], 'background-color 0.75s ease')
       },
-      '&$selected': {
+      '&$checkedRoot': {
         backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'root', 'selectedColor', 'backgroundColor'], "transparent")
       }
     },
@@ -43,16 +44,19 @@ var retrieveStyle = function retrieveStyle(theme) {
       opacity: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'disabledRoot', 'opacity'])
     },
     textColorPrimary: {
-      '&$selected': {
+      '&$checkedRoot': {
         color: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'textColorPrimary', 'color'], "".concat(_colors.default.white))
       }
     },
-    selected: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'selected'], {})
+    checkedRoot: (0, _seamlessImmutable.getIn)(theme, ['UTRadioGroup', 'selected'], {})
   };
 };
 exports.retrieveStyle = retrieveStyle;
 var retrieveMuiTheme = function retrieveMuiTheme(theme) {
-  return (0, _styles.createMuiTheme)({
+  return (0, _styles.createTheme)({
+    typography: {
+      fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily'])
+    },
     overrides: {
       MuiTypography: {
         body1: {

package/dist/components/UTRating/components/Star/index.js

@@ -64,7 +64,8 @@ var Star = function Star(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_StarRate.default, {
     className: _stylesModule.default.starSize
   })), textVariantToUse.showLabel && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: "".concat(_stylesModule.default.text, " ").concat(classes.label)
+    className: "".concat(_stylesModule.default.text, " ").concat(classes.label),
+    colorTheme: "gray"
   }, name));
 };
 Star.propTypes = {

package/dist/components/UTRating/index.js

@@ -95,7 +95,9 @@ var UTRatingContainer = function UTRatingContainer(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     className: "".concat(classes.title)
-  }, titleProps), field.title), /*#__PURE__*/_react.default.createElement("div", {
+  }, titleProps, {
+    withMarkdown: true
+  }), field.title), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
   }, options.map(handleMapOptions)));
 };

package/dist/components/UTRating/theme.js

@@ -7,10 +7,11 @@ exports.retrieveStyle = void 0;
 var _seamlessImmutable = require("seamless-immutable");
 var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var retrieveStyle = function retrieveStyle(theme) {
+var retrieveStyle = function retrieveStyle(_ref) {
+  var theme = _ref.theme;
   return {
     label: {
-      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'label', 'color'], _colors.default.gray3)),
+      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'label', 'color'])),
       fontSize: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'label', 'fontSize'])),
       right: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'label', 'right']))
     },

package/dist/components/UTSelect/index.js

@@ -22,6 +22,7 @@ var _formTypes = require("../../types/formTypes");
 var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _classesUtils = require("../../utils/classesUtils");
 var _Option = _interopRequireDefault(require("./components/Option"));
 var _theme = require("./theme");
 var _stylesJS = _interopRequireDefault(require("./stylesJS"));
@@ -45,7 +46,8 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var UTSelect = function UTSelect(_ref) {
   var captionLabel = _ref.captionLabel,
-    classes = _ref.classes,
+    classNames = _ref.classNames,
+    themeClasses = _ref.classes,
     disabled = _ref.disabled,
     disableFirstOption = _ref.disableFirstOption,
     field = _ref.field,
@@ -67,6 +69,9 @@ var UTSelect = function UTSelect(_ref) {
   var _ref2 = (field === null || field === void 0 ? void 0 : field.configuration) || {},
     isMultiple = _ref2.multiple,
     upperTitle = _ref2.upperTitle;
+  var classes = (0, _react.useMemo)(function () {
+    return (0, _classesUtils.mergeClasses)(themeClasses, classNames);
+  }, [classNames]);
   (0, _react.useEffect)(function () {
     if (withAutoReset && (0, _utils.shouldReset)(input.value, options, valueKey, isMultiple)) input.onChange(null);
   }, [options]);
@@ -93,7 +98,6 @@ var UTSelect = function UTSelect(_ref) {
     valueKey: valueKey
   };
   var SelectInput = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, upperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    medium: true,
     className: classes.upperTitle
   }, upperTitle), /*#__PURE__*/_react.default.createElement(_FormControl.default, {
     className: classes.formControl,
@@ -140,7 +144,11 @@ var UTSelect = function UTSelect(_ref) {
     })];
   })), captionLabel && /*#__PURE__*/_react.default.createElement(_FormHelperText.default, {
     classes: _objectSpread({}, classes.formHelperText)
-  }, captionLabel), (0, _form.shouldShowErrors)(meta) && /*#__PURE__*/_react.default.createElement(_FormHelperText.default, null, meta.error)));
+  }, captionLabel), (0, _form.shouldShowErrors)(meta) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.errorLabel,
+    colorTheme: "error",
+    variant: "small"
+  }, meta.error)));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.container
   }, tooltip ? /*#__PURE__*/_react.default.createElement(_Grid.default, {
@@ -161,6 +169,7 @@ var UTSelect = function UTSelect(_ref) {
   }))))) : SelectInput);
 };
 UTSelect.defaultProps = {
+  classNames: {},
   classes: {},
   field: {
     configuration: {
@@ -178,6 +187,7 @@ UTSelect.defaultProps = {
 };
 UTSelect.propTypes = {
   captionLabel: _propTypes.string,
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
   classes: (0, _propTypes.shape)({
     container: _propTypes.string,
     labelContainer: _propTypes.string,

package/dist/components/UTSelect/styles.module.scss

@@ -6,3 +6,8 @@
 .subHeader {
   pointer-events: none;
 }
+
+.errorLabel {
+  margin-top: 8px;
+  text-align: left;
+}

package/dist/components/UTSelect/theme.js

@@ -9,7 +9,8 @@ var _styles = require("@material-ui/core/styles");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var retrieveStyle = function retrieveStyle(theme) {
+var retrieveStyle = function retrieveStyle(_ref) {
+  var theme = _ref.theme;
   return {
     container: {
       display: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'container', 'display'], 'flex'),
@@ -45,6 +46,7 @@ var retrieveStyle = function retrieveStyle(theme) {
     },
     upperTitle: {
       fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'upperTitle', 'fontWeight']),
+      display: 'block',
       marginBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'upperTitle', 'marginBottom'])
     },
     subOption: {
@@ -151,6 +153,9 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme, muiTheme) {
         root: {
           fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'helperText', 'fontSize'], 12),
           color: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'helperText', 'color'], _colors.default.inputPrimary)
+        },
+        contained: {
+          marginLeft: 0
         }
       },
       MuiCheckbox: {
@@ -191,6 +196,6 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme, muiTheme) {
       }
     }
   };
-  return (0, _styles.createMuiTheme)(_lodash.default.merge(muiTheme, mui));
+  return (0, _styles.createTheme)(_lodash.default.merge(muiTheme, mui));
 };
 exports.retrieveMuiTheme = retrieveMuiTheme;

package/dist/components/UTSidebar/theme.js

@@ -8,8 +8,9 @@ var _seamlessImmutable = require("seamless-immutable");
 var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
 var _fontSizes = _interopRequireDefault(require("../../scss/variables/_fontSizes.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var retrieveStyle = function retrieveStyle(theme) {
+var retrieveStyle = function retrieveStyle(_ref) {
   var _theme$UTSidebar, _theme$UTSidebar$logo, _theme$UTSidebar2, _theme$UTSidebar2$log, _theme$UTSidebar3, _theme$UTSidebar3$log, _theme$UTSidebar4, _theme$UTSidebar4$log, _theme$UTSidebar5, _theme$UTSidebar5$log, _theme$UTSidebar6, _theme$UTSidebar6$log, _theme$UTSidebar7, _theme$UTSidebar7$log, _theme$UTSidebar8, _theme$UTSidebar8$log, _theme$UTSidebar9, _theme$UTSidebar9$log, _theme$UTSidebar10, _theme$UTSidebar10$lo, _theme$UTSidebar11, _theme$UTSidebar11$lo, _theme$UTSidebar12, _theme$UTSidebar12$lo, _theme$UTSidebar13, _theme$UTSidebar13$lo, _theme$UTSidebar14, _theme$UTSidebar14$lo, _theme$UTSidebar15, _theme$UTSidebar15$lo, _theme$UTSidebar16, _theme$UTSidebar16$lo;
+  var theme = _ref.theme;
   return {
     drawerRoot: {
       width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'drawer', 'width'], 60)
@@ -108,8 +109,8 @@ var retrieveStyle = function retrieveStyle(theme) {
       backgroundColor: theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar = theme.UTSidebar) === null || _theme$UTSidebar === void 0 ? void 0 : (_theme$UTSidebar$logo = _theme$UTSidebar.logoBadgeOpen) === null || _theme$UTSidebar$logo === void 0 ? void 0 : _theme$UTSidebar$logo.backgroundColor,
       borderRadius: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar2 = theme.UTSidebar) === null || _theme$UTSidebar2 === void 0 ? void 0 : (_theme$UTSidebar2$log = _theme$UTSidebar2.logoBadgeOpen) === null || _theme$UTSidebar2$log === void 0 ? void 0 : _theme$UTSidebar2$log.borderRadius) || 8,
       color: theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar3 = theme.UTSidebar) === null || _theme$UTSidebar3 === void 0 ? void 0 : (_theme$UTSidebar3$log = _theme$UTSidebar3.logoBadgeOpen) === null || _theme$UTSidebar3$log === void 0 ? void 0 : _theme$UTSidebar3$log.color,
-      fontSize: "".concat((theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar4 = theme.UTSidebar) === null || _theme$UTSidebar4 === void 0 ? void 0 : (_theme$UTSidebar4$log = _theme$UTSidebar4.logoBadgeOpen) === null || _theme$UTSidebar4$log === void 0 ? void 0 : _theme$UTSidebar4$log.fontSize) || _fontSizes.default.small, " !important"),
-      fontWeight: "".concat((theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar5 = theme.UTSidebar) === null || _theme$UTSidebar5 === void 0 ? void 0 : (_theme$UTSidebar5$log = _theme$UTSidebar5.logoBadgeOpen) === null || _theme$UTSidebar5$log === void 0 ? void 0 : _theme$UTSidebar5$log.fontWeight) || 600, " !important"),
+      fontSize: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar4 = theme.UTSidebar) === null || _theme$UTSidebar4 === void 0 ? void 0 : (_theme$UTSidebar4$log = _theme$UTSidebar4.logoBadgeOpen) === null || _theme$UTSidebar4$log === void 0 ? void 0 : _theme$UTSidebar4$log.fontSize) || _fontSizes.default.small,
+      fontWeight: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar5 = theme.UTSidebar) === null || _theme$UTSidebar5 === void 0 ? void 0 : (_theme$UTSidebar5$log = _theme$UTSidebar5.logoBadgeOpen) === null || _theme$UTSidebar5$log === void 0 ? void 0 : _theme$UTSidebar5$log.fontWeight) || 600,
       margin: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar6 = theme.UTSidebar) === null || _theme$UTSidebar6 === void 0 ? void 0 : (_theme$UTSidebar6$log = _theme$UTSidebar6.logoBadgeOpen) === null || _theme$UTSidebar6$log === void 0 ? void 0 : _theme$UTSidebar6$log.margin) || '12px auto 24px',
       maxWidth: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar7 = theme.UTSidebar) === null || _theme$UTSidebar7 === void 0 ? void 0 : (_theme$UTSidebar7$log = _theme$UTSidebar7.logoBadgeOpen) === null || _theme$UTSidebar7$log === void 0 ? void 0 : _theme$UTSidebar7$log.maxWidth) || '96%',
       padding: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar8 = theme.UTSidebar) === null || _theme$UTSidebar8 === void 0 ? void 0 : (_theme$UTSidebar8$log = _theme$UTSidebar8.logoBadgeOpen) === null || _theme$UTSidebar8$log === void 0 ? void 0 : _theme$UTSidebar8$log.padding) || '2px 8px'
@@ -118,8 +119,8 @@ var retrieveStyle = function retrieveStyle(theme) {
       backgroundColor: theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar9 = theme.UTSidebar) === null || _theme$UTSidebar9 === void 0 ? void 0 : (_theme$UTSidebar9$log = _theme$UTSidebar9.logoBadgeClose) === null || _theme$UTSidebar9$log === void 0 ? void 0 : _theme$UTSidebar9$log.backgroundColor,
       borderRadius: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar10 = theme.UTSidebar) === null || _theme$UTSidebar10 === void 0 ? void 0 : (_theme$UTSidebar10$lo = _theme$UTSidebar10.logoBadgeClose) === null || _theme$UTSidebar10$lo === void 0 ? void 0 : _theme$UTSidebar10$lo.borderRadius) || 8,
       color: theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar11 = theme.UTSidebar) === null || _theme$UTSidebar11 === void 0 ? void 0 : (_theme$UTSidebar11$lo = _theme$UTSidebar11.logoBadgeClose) === null || _theme$UTSidebar11$lo === void 0 ? void 0 : _theme$UTSidebar11$lo.color,
-      fontSize: "".concat((theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar12 = theme.UTSidebar) === null || _theme$UTSidebar12 === void 0 ? void 0 : (_theme$UTSidebar12$lo = _theme$UTSidebar12.logoBadgeClose) === null || _theme$UTSidebar12$lo === void 0 ? void 0 : _theme$UTSidebar12$lo.fontSize) || _fontSizes.default.small, " !important"),
-      fontWeight: "".concat((theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar13 = theme.UTSidebar) === null || _theme$UTSidebar13 === void 0 ? void 0 : (_theme$UTSidebar13$lo = _theme$UTSidebar13.logoBadgeClose) === null || _theme$UTSidebar13$lo === void 0 ? void 0 : _theme$UTSidebar13$lo.fontWeight) || 600, " !important"),
+      fontSize: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar12 = theme.UTSidebar) === null || _theme$UTSidebar12 === void 0 ? void 0 : (_theme$UTSidebar12$lo = _theme$UTSidebar12.logoBadgeClose) === null || _theme$UTSidebar12$lo === void 0 ? void 0 : _theme$UTSidebar12$lo.fontSize) || _fontSizes.default.small,
+      fontWeight: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar13 = theme.UTSidebar) === null || _theme$UTSidebar13 === void 0 ? void 0 : (_theme$UTSidebar13$lo = _theme$UTSidebar13.logoBadgeClose) === null || _theme$UTSidebar13$lo === void 0 ? void 0 : _theme$UTSidebar13$lo.fontWeight) || 600,
       margin: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar14 = theme.UTSidebar) === null || _theme$UTSidebar14 === void 0 ? void 0 : (_theme$UTSidebar14$lo = _theme$UTSidebar14.logoBadgeClose) === null || _theme$UTSidebar14$lo === void 0 ? void 0 : _theme$UTSidebar14$lo.margin) || '12px auto 24px',
       maxWidth: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar15 = theme.UTSidebar) === null || _theme$UTSidebar15 === void 0 ? void 0 : (_theme$UTSidebar15$lo = _theme$UTSidebar15.logoBadgeClose) === null || _theme$UTSidebar15$lo === void 0 ? void 0 : _theme$UTSidebar15$lo.maxWidth) || '96%',
       padding: (theme === null || theme === void 0 ? void 0 : (_theme$UTSidebar16 = theme.UTSidebar) === null || _theme$UTSidebar16 === void 0 ? void 0 : (_theme$UTSidebar16$lo = _theme$UTSidebar16.logoBadgeClose) === null || _theme$UTSidebar16$lo === void 0 ? void 0 : _theme$UTSidebar16$lo.padding) || '2px 8px'

package/dist/components/UTSkeleton/index.js

@@ -23,8 +23,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 var SkeletonWrapper = (0, _reactSkeletor.createSkeletonElement)('div', _stylesModule.default.skeleton);
 var hasMock = function hasMock(string) {
-  var _string$props, _string$props$source, _string$props2, _string$props2$childr;
-  return (string === null || string === void 0 ? void 0 : (_string$props = string.props) === null || _string$props === void 0 ? void 0 : (_string$props$source = _string$props.source) === null || _string$props$source === void 0 ? void 0 : _string$props$source.toString().includes('MOCK')) || (string === null || string === void 0 ? void 0 : (_string$props2 = string.props) === null || _string$props2 === void 0 ? void 0 : (_string$props2$childr = _string$props2.children) === null || _string$props2$childr === void 0 ? void 0 : _string$props2$childr.toString().includes('MOCK'));
+  var _string$props$childre, _string$props$childre2, _string$props$childre3;
+  if (string && string.props.source) return string.props.source.toString().includes('MOCK');
+  if (string && string.props.children) return string.props.children.toString().includes('MOCK') || ((_string$props$childre = string.props.children) === null || _string$props$childre === void 0 ? void 0 : (_string$props$childre2 = _string$props$childre.props) === null || _string$props$childre2 === void 0 ? void 0 : (_string$props$childre3 = _string$props$childre2.children) === null || _string$props$childre3 === void 0 ? void 0 : _string$props$childre3.toString().includes('MOCK'));
 };
 var hiddenChildren = function hiddenChildren(child) {
   return /*#__PURE__*/_react.default.cloneElement(child, {

package/dist/components/UTSwitch/index.js

@@ -100,7 +100,8 @@ var UTSwitch = function UTSwitch(_ref) {
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(classes.slider, " ").concat(disabled && classes.disabled)
   }))), withText && !insideText && textOn), showErrors && meta && (0, _form.shouldShowErrors)(meta) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    error: true
+    colorTheme: "error",
+    variant: "small"
   }, meta === null || meta === void 0 ? void 0 : meta.error));
 };
 UTSwitch.propTypes = {

package/dist/components/UTSwitch/theme.js

@@ -7,7 +7,8 @@ exports.retrieveStyle = void 0;
 var _seamlessImmutable = require("seamless-immutable");
 var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var retrieveStyle = function retrieveStyle(theme) {
+var retrieveStyle = function retrieveStyle(_ref) {
+  var theme = _ref.theme;
   return {
     outerContainer: {
       alignItems: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'outerContainer', 'alignItems'], 'center'),

package/dist/components/UTTable/components/TableHeader/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
-var _UTIconButton = _interopRequireDefault(require("../../../UTIconButton"));
+var _UTButton = _interopRequireDefault(require("../../../UTButton"));
 var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
 var _types = require("../../types");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -38,14 +38,18 @@ var TableHeader = function TableHeader(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.titleContainer
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    semibold: true,
+    variant: "subtitle1",
+    weight: "medium",
     className: classes.tableTitle
-  }, title), onReload && /*#__PURE__*/_react.default.createElement(_UTIconButton.default, {
+  }, title), onReload && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      icon: classes.reloadIcon,
+      root: "".concat(classes.reloadButton, " ").concat(disabled && classes.reloadButtonDisabled)
+    },
+    Icon: RefreshIcon,
     onClick: onReload,
-    className: "".concat(classes.reloadButton, " ").concat(disabled && classes.reloadButtonDisabled)
-  }, /*#__PURE__*/_react.default.createElement(RefreshIcon, {
-    className: classes.reloadIcon
-  }))), GeneralActions);
+    variant: "text"
+  })), GeneralActions);
 };
 TableHeader.propTypes = {
   classes: _types.classesType,