@widergy/energy-ui 1.134.2 → 2.0.0

package/dist/components/UTLabel/theme.js

@@ -3,93 +3,38 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.retrieveStyle = void 0;
-var _seamlessImmutable = require("seamless-immutable");
+exports.variantsColorTheme = exports.retrieveStyle = exports.linkColor = void 0;
 var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
+var _constants = require("./constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var retrieveStyle = function retrieveStyle(theme) {
+var variantsColorTheme = function variantsColorTheme(theme, colorTheme) {
+  var colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette[_constants.DEFAULT_PROPS.colorTheme];
+  var colorNumber = colorTheme === _constants.COLOR_THEMES.gray ? '04' : colorTheme === _constants.COLOR_THEMES.light ? '01' : '05';
+  return colorThemeDefinition[colorNumber] || _colors.default.black;
+};
+exports.variantsColorTheme = variantsColorTheme;
+var linkColor = function linkColor(theme, colorTheme) {
+  var color = colorTheme === _constants.COLOR_THEMES.light ? theme.Palette.actions.negative['05'] : colorTheme === _constants.COLOR_THEMES.error ? theme.Palette.actions.error['05'] : theme.Palette.actions.neutral['05'];
+  return color;
+};
+exports.linkColor = linkColor;
+var retrieveStyle = function retrieveStyle(_ref) {
+  var _theme$Fonts;
+  var colorTheme = _ref.colorTheme,
+    theme = _ref.theme,
+    variant = _ref.variant,
+    weight = _ref.weight;
   return {
-    base: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTLabel', 'base', 'color'], _colors.default.black),
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTLabel', 'base', 'fontSize']),
-      fontWeight: 400,
-      fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']),
-      transform: 'translateZ(0)'
-    },
-    xxxsmall: {
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'xxxsmall'])
-    },
-    xxsmall: {
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'xxsmall'])
-    },
-    xsmall: {
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'xsmall'])
-    },
-    small: {
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'small'])
-    },
-    medium: {
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'])
-    },
-    large: {
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'large'])
-    },
-    xlarge: {
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'xlarge'])
-    },
-    xxlarge: {
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'xxlarge'])
-    },
-    xxxlarge: {
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'xxxlarge'])
-    },
-    title: {
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'title'])
-    },
-    largeTitle: {
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'largeTitle'])
-    },
-    extraLight: {
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'extraLight'], 200)
-    },
-    light: {
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'light'], 300)
-    },
-    semibold: {
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'semiBold'], 500)
-    },
-    bold: {
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'bold'], 600)
-    },
-    extrabold: {
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'extraBold'], 700)
-    },
-    primary: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTLabel', 'primary', 'color'])
-    },
-    secondary: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTLabel', 'secondary', 'color'])
-    },
-    alternative: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTLabel', 'alternative', 'color'])
-    },
-    gray: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTLabel', 'gray', 'color'])
-    },
-    darkGray: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTLabel', 'darkGray', 'color'])
-    },
-    white: {
-      color: _colors.default.white
-    },
-    error: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTLabel', 'error', 'color'])
-    },
-    uppercase: {
-      textTransform: 'uppercase'
-    },
-    lowercase: {
-      textTransform: 'lowercase'
+    root: {
+      color: variantsColorTheme(theme, colorTheme),
+      fontFamily: theme === null || theme === void 0 ? void 0 : (_theme$Fonts = theme.Fonts) === null || _theme$Fonts === void 0 ? void 0 : _theme$Fonts.fontFamily,
+      fontSize: _constants.VARIANTS_SIZES[variant] || _constants.VARIANTS_SIZES[_constants.DEFAULT_PROPS.variant],
+      fontWeight: _constants.WEIGHTS[weight] || _constants.WEIGHTS[_constants.DEFAULT_PROPS.weight],
+      lineHeight: _constants.VARIANTS_LINE_HEIGHT[variant] || _constants.VARIANTS_LINE_HEIGHT[_constants.DEFAULT_PROPS.variant],
+      margin: 0,
+      '& > a': {
+        color: linkColor(theme, colorTheme)
+      }
     }
   };
 };

package/dist/components/UTMap/index.js

@@ -258,15 +258,15 @@ var UTMap = /*#__PURE__*/function (_PureComponent) {
         showOnlyMap: showOnlyMap,
         colorPolygon: this.props.colorPolygon,
         colorBorderPolygon: this.props.colorBorderPolygon
-      })) : this.state.mapLoading ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-        black: true
-      }, this.props.errors.retrievingLocation) : this.state.invalidConfiguration ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-        error: true
+      })) : this.state.mapLoading ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, null, this.props.errors.retrievingLocation) : this.state.invalidConfiguration ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+        colorTheme: "error",
+        variant: "small"
       }, this.props.errors.invalidConfig) : /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-        error: true
+        colorTheme: "error",
+        variant: "small"
       }, this.props.errors.retrieveLocationError), !showOnlyMap && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-        error: true,
-        small: true,
+        colorTheme: "error",
+        variant: "small",
         className: _stylesModule.default.error
       }, (0, _form.shouldShowErrors)(this.props.meta) ? this.props.meta.error : ''));
     }

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

@@ -1,9 +1,4 @@
-@import '../../scss/variables/_colors.scss';
-@import '../../scss/variables/_fontSizes.scss';
-
 .error {
-  color: $error;
   display: flex;
-  font-size: $medium;
   margin-top: 20px;
 }

package/dist/components/UTMenu/theme.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = exports.retrieveMuiTheme = void 0;
 var _styles = require("@material-ui/core/styles");
-var retrieveStyle = function retrieveStyle(theme) {
+var retrieveStyle = function retrieveStyle(_ref) {
   var _theme$UTMenu, _theme$UTMenu$paper, _theme$UTMenu2, _theme$UTMenu2$paper, _theme$UTMenu3, _theme$UTMenu3$menuLi, _theme$UTMenu4, _theme$UTMenu4$menuLi, _theme$UTMenu5, _theme$UTMenu5$menuLi, _theme$UTMenu6, _theme$UTMenu6$menuLi, _theme$UTMenu7, _theme$UTMenu7$menuIt, _theme$UTMenu8, _theme$UTMenu8$menuIt, _theme$UTMenu9, _theme$UTMenu9$menuIt, _theme$UTMenu10, _theme$UTMenu10$poppe, _theme$UTMenu11, _theme$UTMenu11$menuI, _theme$UTMenu12, _theme$UTMenu12$menuI, _theme$UTMenu13, _theme$UTMenu13$menuI, _theme$UTMenu14, _theme$UTMenu14$menuI, _theme$UTMenu15, _theme$UTMenu15$menuI, _theme$UTMenu16, _theme$UTMenu16$menuI, _theme$UTMenu17, _theme$UTMenu17$menuI, _theme$UTMenu18, _theme$UTMenu18$scrol;
+  var theme = _ref.theme;
   return {
     paper: {
       padding: theme === null || theme === void 0 ? void 0 : (_theme$UTMenu = theme.UTMenu) === null || _theme$UTMenu === void 0 ? void 0 : (_theme$UTMenu$paper = _theme$UTMenu.paper) === null || _theme$UTMenu$paper === void 0 ? void 0 : _theme$UTMenu$paper.padding,
@@ -46,7 +47,7 @@ var retrieveStyle = function retrieveStyle(theme) {
 exports.retrieveStyle = retrieveStyle;
 var retrieveMuiTheme = function retrieveMuiTheme(theme) {
   var _theme$UTMenu19, _theme$UTMenu19$divid, _theme$UTMenu20, _theme$UTMenu20$divid;
-  return (0, _styles.createMuiTheme)({
+  return (0, _styles.createTheme)({
     overrides: {
       MuiListItem: {
         divider: {

package/dist/components/UTPanel/index.js

@@ -11,7 +11,7 @@ require("react-perfect-scrollbar/dist/css/styles.css");
 var _reactPerfectScrollbar = _interopRequireDefault(require("react-perfect-scrollbar"));
 var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 var _propTypes = require("prop-types");
-var _UTIconButton = _interopRequireDefault(require("../UTIconButton"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _commonTypes = require("../../types/commonTypes");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -71,16 +71,17 @@ var UTPanel = function UTPanel(_ref) {
   }, TitleIcon && /*#__PURE__*/_react.default.createElement(TitleIcon, {
     className: "".concat(_stylesModule.default.titleIcon, " ").concat(titleIconClass)
   }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    medium: true,
-    semibold: true,
-    className: titleClass
-  }, title)), /*#__PURE__*/_react.default.createElement(_UTIconButton.default, {
+    weight: "semibold",
+    className: classes.title
+  }, title)), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      icon: iconCloseClass,
+      root: closeButtonClass
+    },
+    Icon: _Close.default,
     onClick: onClose,
-    small: true,
-    className: closeButtonClass
-  }, /*#__PURE__*/_react.default.createElement(_Close.default, {
-    className: iconCloseClass
-  }))), disableScrollbar ? children : /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
+    variant: "text"
+  })), disableScrollbar ? children : /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
     onYReachEnd: onEndReachedCallback,
     className: "".concat(_stylesModule.default.perfectScrollbar, " ").concat(perfectScrollbarClass),
     options: _objectSpread({

package/dist/components/UTPasswordField/components/PasswordValidations/components/Error/index.js

@@ -15,8 +15,7 @@ var ErrorMessage = function ErrorMessage(_ref) {
     ErrorIcon = _ref.ErrorIcon,
     classes = _ref.classes,
     error = _ref.error;
-  var failureLabel = classes.failureLabel,
-    failedIconStyle = classes.failedIconStyle,
+  var failedIconStyle = classes.failedIconStyle,
     iconStyle = classes.iconStyle;
   var Icon = ErrorIcon || _Info.default;
   return !assertion && /*#__PURE__*/_react.default.createElement("div", {
@@ -24,7 +23,9 @@ var ErrorMessage = function ErrorMessage(_ref) {
   }, /*#__PURE__*/_react.default.createElement(Icon, {
     className: "".concat(iconStyle, " ").concat(failedIconStyle)
   }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: "".concat(_stylesModule.default.label, " ").concat(failureLabel)
+    className: _stylesModule.default.label,
+    colorTheme: "error",
+    variant: "small"
   }, error));
 };
 ErrorMessage.propTypes = {

package/dist/components/UTPasswordField/components/PasswordValidations/components/Error/styles.module.scss

@@ -1,8 +1,8 @@
 .container {
   display: flex;
-  margin-top: 5px;
+  margin-top: 8px;
 }
 
 .label {
-  margin-left: 5px;
+  margin-left: 8px;
 }

package/dist/components/UTPasswordField/components/PasswordValidations/components/Validation/index.js

@@ -13,24 +13,22 @@ var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var Validation = function Validation(_ref) {
-  var requirement = _ref.requirement,
-    value = _ref.value,
+  var assertion = _ref.assertion,
     classes = _ref.classes,
+    disabled = _ref.disabled,
+    NoValueIcon = _ref.NoValueIcon,
+    requirement = _ref.requirement,
+    shouldShowError = _ref.shouldShowError,
     ValidationFailedIcon = _ref.ValidationFailedIcon,
     ValidationPassedIcon = _ref.ValidationPassedIcon,
-    assertion = _ref.assertion,
-    shouldShowError = _ref.shouldShowError,
-    NoValueIcon = _ref.NoValueIcon,
-    disabled = _ref.disabled;
+    value = _ref.value;
   var passedIconStyle = classes.passedIconStyle,
     failedIconStyle = classes.failedIconStyle,
-    successLabel = classes.successLabel,
-    failureLabel = classes.failureLabel,
-    labelStyle = classes.labelStyle,
     iconStyle = classes.iconStyle;
   var PassedIcon = ValidationPassedIcon || _CheckCircle.default;
   var FailedIcon = ValidationFailedIcon || _Cancel.default;
   var NoValue = NoValueIcon || _FiberManualRecord.default;
+  var labelColor = !value && !shouldShowError ? 'gray' : assertion ? 'success' : 'error';
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
   }, value || shouldShowError && !disabled ? assertion ? /*#__PURE__*/_react.default.createElement(PassedIcon, {
@@ -40,19 +38,21 @@ var Validation = function Validation(_ref) {
   }) : /*#__PURE__*/_react.default.createElement(NoValue, {
     className: iconStyle
   }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: "".concat(_stylesModule.default.label, " ").concat(labelStyle, " ").concat((value || shouldShowError) && (assertion ? successLabel : failureLabel))
+    className: _stylesModule.default.label,
+    colorTheme: labelColor,
+    variant: "small"
   }, requirement));
 };
 Validation.propTypes = {
-  requirement: _propTypes.string,
-  value: _propTypes.string,
+  assertion: _propTypes.bool,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
+  disabled: _propTypes.bool,
+  NoValueIcon: _propTypes.elementType,
+  requirement: _propTypes.string,
+  shouldShowError: _propTypes.bool,
   ValidationFailedIcon: _propTypes.elementType,
   ValidationPassedIcon: _propTypes.elementType,
-  assertion: _propTypes.bool,
-  shouldShowError: _propTypes.bool,
-  NoValueIcon: _propTypes.elementType,
-  disabled: _propTypes.bool
+  value: _propTypes.string
 };
 var _default = Validation;
 exports.default = _default;

package/dist/components/UTPasswordField/components/PasswordValidations/components/Validation/styles.module.scss

@@ -1,9 +1,9 @@
 .container {
   align-items: center;
   display: flex;
-  margin-top: 7px;
+  margin-top: 8px;
 }
 
 .label {
-  margin-left: 5px;
+  margin-left: 8px;
 }

package/dist/components/UTPasswordField/components/PasswordValidations/index.js

@@ -68,15 +68,16 @@ var PasswordValidations = function PasswordValidations(_ref) {
     var requirement = _ref8.requirement,
       assertion = _ref8.assertion;
     return /*#__PURE__*/_react.default.createElement(_Validation.default, {
-      disabled: disabled,
-      ValidationFailedIcon: ValidationFailedIcon,
-      ValidationPassedIcon: ValidationPassedIcon,
-      requirement: requirement,
       assertion: assertion,
       classes: classes,
-      value: value,
+      disabled: disabled,
+      key: requirement,
+      NoValueIcon: NoValueIcon,
+      requirement: requirement,
       shouldShowError: submitFailed,
-      NoValueIcon: NoValueIcon
+      ValidationFailedIcon: ValidationFailedIcon,
+      ValidationPassedIcon: ValidationPassedIcon,
+      value: value
     });
   }), submitFailed && showErrors && /*#__PURE__*/_react.default.createElement("div", {
     className: errorsContainerStyle
@@ -87,18 +88,19 @@ var PasswordValidations = function PasswordValidations(_ref) {
       ErrorIcon: ErrorIcon,
       classes: classes,
       assertion: assertion,
-      error: error
+      error: error,
+      key: error
     });
   })));
 };
 PasswordValidations.propTypes = {
   passwordValidations: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    expression: _propTypes.string,
+    expression: (0, _propTypes.oneOfType)([_propTypes.string, (0, _propTypes.instanceOf)(RegExp)]),
     requirement: _propTypes.string,
     error: _propTypes.string
   })),
   passwordValidationsWarning: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    expression: _propTypes.string,
+    expression: (0, _propTypes.oneOfType)([_propTypes.string, (0, _propTypes.instanceOf)(RegExp)]),
     requirement: _propTypes.string,
     error: _propTypes.string
   })),

package/dist/components/UTPasswordField/components/PasswordWarning/index.js

@@ -24,8 +24,7 @@ var PasswordWarning = function PasswordWarning(_ref) {
     passwordValidationsWarning = _ref.passwordValidationsWarning,
     value = _ref.value,
     WarningIcon = _ref.WarningIcon;
-  var warningLabel = classes.warningLabel,
-    warningDivider = classes.warningDivider;
+  var warningDivider = classes.warningDivider;
   var validatedRegExps = passwordValidationsWarning.map(function (_ref2) {
     var expression = _ref2.expression,
       regex = _objectWithoutProperties(_ref2, _excluded);
@@ -43,7 +42,8 @@ var PasswordWarning = function PasswordWarning(_ref) {
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.iconAndLabelContainer
     }, /*#__PURE__*/_react.default.createElement(WarningIcon, null), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-      className: "".concat(_stylesModule.default.warning, " ").concat(warningLabel)
+      className: _stylesModule.default.warning,
+      colorTheme: "warning"
     }, error)));
   });
 };

package/dist/components/UTPasswordField/components/PasswordWarning/styles.module.scss

@@ -12,5 +12,5 @@
 }
 
 .warning {
-  margin-left: 5px;
+  margin-left: 8px;
 }

package/dist/components/UTPasswordField/theme.js

@@ -4,45 +4,31 @@ 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 _classesUtils = require("../../utils/classesUtils");
+var retrieveStyle = function retrieveStyle(_ref) {
+  var _theme$UTPasswordFiel, _theme$UTPasswordFiel2, _theme$UTPasswordFiel3, _theme$UTPasswordFiel4, _theme$UTPasswordFiel5, _theme$UTPasswordFiel6, _theme$UTPasswordFiel7, _theme$UTPasswordFiel8;
+  var theme = _ref.theme;
   return {
-    labelStyle: {
-      fontWeight: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTPasswordField', 'label', 'fontWeight']), " !important"),
-      fontSize: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTPasswordField', 'label', 'fontSize']), " !important"),
-      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTPasswordField', 'label', 'color']), " !important")
-    },
-    successLabel: {
-      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTPasswordField', 'success', 'color'], _colors.default.green), " !important")
-    },
-    failureLabel: {
-      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTPasswordField', 'failure', 'color'], _colors.default.red), " !important")
-    },
     iconStyle: {
-      height: (0, _seamlessImmutable.getIn)(theme, ['UTPasswordField', 'icon', 'size'], '17px'),
-      width: (0, _seamlessImmutable.getIn)(theme, ['UTPasswordField', 'icon', 'size'], '17px'),
-      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTPasswordField', 'icon', 'borderRadius'], '50%')
+      height: (theme === null || theme === void 0 ? void 0 : (_theme$UTPasswordFiel = theme.UTPasswordField) === null || _theme$UTPasswordFiel === void 0 ? void 0 : (_theme$UTPasswordFiel2 = _theme$UTPasswordFiel.icon) === null || _theme$UTPasswordFiel2 === void 0 ? void 0 : _theme$UTPasswordFiel2.size) || '1rem',
+      width: (theme === null || theme === void 0 ? void 0 : (_theme$UTPasswordFiel3 = theme.UTPasswordField) === null || _theme$UTPasswordFiel3 === void 0 ? void 0 : (_theme$UTPasswordFiel4 = _theme$UTPasswordFiel3.icon) === null || _theme$UTPasswordFiel4 === void 0 ? void 0 : _theme$UTPasswordFiel4.size) || '1rem',
+      borderRadius: (theme === null || theme === void 0 ? void 0 : (_theme$UTPasswordFiel5 = theme.UTPasswordField) === null || _theme$UTPasswordFiel5 === void 0 ? void 0 : (_theme$UTPasswordFiel6 = _theme$UTPasswordFiel5.icon) === null || _theme$UTPasswordFiel6 === void 0 ? void 0 : _theme$UTPasswordFiel6.borderRadius) || '50%'
     },
     passedIconStyle: {
-      fill: (0, _seamlessImmutable.getIn)(theme, ['UTPasswordField', 'success', 'color'], _colors.default.green)
+      fill: theme.Palette.success['05']
     },
     failedIconStyle: {
-      fill: (0, _seamlessImmutable.getIn)(theme, ['UTPasswordField', 'failure', 'color'], _colors.default.red)
+      fill: theme.Palette.error['05']
     },
     errorsContainerStyle: {
-      borderTop: "1px solid ".concat((0, _seamlessImmutable.getIn)(theme, ['UTPasswordField', 'failure', 'color'], _colors.default.red)),
-      marginTop: '7px'
-    },
-    warningLabel: {
-      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTPasswordField', 'warningLabel', 'color']), " !important")
+      borderTop: "1px solid ".concat(theme.Palette.error['05']),
+      marginTop: 7
     },
     warningDivider: {
-      backgroundColor: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTPasswordField', 'warningLabel', 'color']), " !important")
+      backgroundColor: (0, _classesUtils.withImportant)(theme.Palette.warning['05'])
     },
     validationContainer: {
-      margin: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTPasswordField', 'validationContainer', 'margin']), " !important")
+      margin: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTPasswordFiel7 = theme.UTPasswordField) === null || _theme$UTPasswordFiel7 === void 0 ? void 0 : (_theme$UTPasswordFiel8 = _theme$UTPasswordFiel7.validationContainer) === null || _theme$UTPasswordFiel8 === void 0 ? void 0 : _theme$UTPasswordFiel8.margin)
     }
   };
 };

package/dist/components/UTPhoneInput/index.js

@@ -273,10 +273,10 @@ var UTPhoneInput = /*#__PURE__*/function (_PureComponent) {
             input: inputClassName
           }
         }
-      }, phoneNumberFieldProps)))), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-        error: true,
-        className: classes.labelError
-      }, error || ((0, _form.shouldShowErrors)(meta) ? meta.error : '')));
+      }, phoneNumberFieldProps)))), (error || (0, _form.shouldShowErrors)(meta)) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+        colorTheme: "error",
+        variant: "small"
+      }, error || meta.error));
     }
   }]);
   return UTPhoneInput;

package/dist/components/UTPhoneInput/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 {
     container: {
       display: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'container', 'display'], 'flex'),
@@ -34,10 +35,6 @@ var retrieveStyle = function retrieveStyle(theme) {
       width: '100%',
       alignItems: 'center'
     },
-    labelError: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'labelError', 'color'], _colors.default.error),
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'labelError', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'small'], 12))
-    },
     tooltip: {
       color: (0, _seamlessImmutable.getIn)(theme, ['UTPhoneInput', 'tooltip', 'color'], _colors.default.white)
     },
@@ -52,7 +49,7 @@ var retrieveStyle = function retrieveStyle(theme) {
 };
 exports.retrieveStyle = retrieveStyle;
 var retrieveMuiTheme = function retrieveMuiTheme(theme) {
-  return (0, _styles.createMuiTheme)({
+  return (0, _styles.createTheme)({
     typography: {
       fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily'])
     },

package/dist/components/UTPieChart/theme.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 var _seamlessImmutable = require("seamless-immutable");
-var retrieveStyle = function retrieveStyle(theme) {
+var retrieveStyle = function retrieveStyle(_ref) {
+  var theme = _ref.theme;
   return {
     legendLabel: {
       fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTPieChart', 'legendLabel', 'fontWeight']),

package/dist/components/UTProgressBar/index.js

@@ -1,58 +1,65 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 var _core = require("@material-ui/core");
 var _lodash = _interopRequireDefault(require("lodash"));
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _classesUtils = require("../../utils/classesUtils");
 var _types = require("./types");
 var _constants = require("./constants");
 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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var UTProgressBar = function UTProgressBar(_ref) {
-  var classNames = _ref.classNames,
-    classes = _ref.classes,
+  var themeClasses = _ref.classes,
+    classNames = _ref.classNames,
     customLabel = _ref.customLabel,
+    customLabelStyle = _ref.customLabelStyle,
     value = _ref.value,
     variant = _ref.variant,
-    withLabel = _ref.withLabel,
-    customLabelStyle = _ref.customLabelStyle;
+    withLabel = _ref.withLabel;
   var clampedValue = _lodash.default.clamp(value, _constants.MIN_PERCENTAGE, _constants.MAX_PERCENTAGE);
+  var classes = (0, _react.useMemo)(function () {
+    return (0, _classesUtils.mergeClasses)(themeClasses, classNames);
+  }, [classNames]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(classes.container, " ").concat(classNames.container)
+    className: classes.container
   }, /*#__PURE__*/_react.default.createElement(_core.LinearProgress, {
-    variant: variant,
-    value: clampedValue,
     classes: {
-      root: "".concat(classes.root, " ").concat(classNames.root),
-      colorPrimary: "".concat(classes.colorPrimary, " ").concat(classNames.colorPrimary),
-      barColorPrimary: "".concat(classes.barColorPrimary, " ").concat(classNames.barColorPrimary)
-    }
-  }), withLabel && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: "".concat(classes.label, " ").concat(classNames.label),
+      barColorPrimary: classes.barColorPrimary,
+      colorPrimary: classes.colorPrimary,
+      root: classes.root
+    },
+    variant: variant,
+    value: clampedValue
+  }), withLabel && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.label
+  }, /*#__PURE__*/_react.default.createElement("span", {
     style: customLabelStyle
-  }, customLabel || "".concat(clampedValue, "%")));
+  }, customLabel || "".concat(clampedValue, "%"))));
 };
 UTProgressBar.defaultProps = {
   classes: {},
   classNames: {},
+  customLabelStyle: {},
   variant: 'determinate',
-  withLabel: false,
-  customLabelStyle: {}
+  withLabel: false
 };
 UTProgressBar.propTypes = {
   classes: _types.classesType,
   classNames: _types.classesType,
   customLabel: _propTypes.string,
+  customLabelStyle: _propTypes.object,
   value: _propTypes.number.isRequired,
   variant: _propTypes.string,
-  withLabel: _propTypes.bool,
-  customLabelStyle: _propTypes.object
+  withLabel: _propTypes.bool
 };
 var _default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTProgressBar);
 exports.default = _default;