@widergy/energy-ui 1.134.2 → 2.0.0

package/dist/components/UTConsumptionBar/components/ConsumptionBarIndicator/index.js

@@ -27,22 +27,21 @@ var ConsumptionBarIndicator = function ConsumptionBarIndicator(_ref) {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.indicatorText, " ").concat(classes === null || classes === void 0 ? void 0 : classes.indicatorText)
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    darkBlue: true,
-    bold: true,
-    large: true,
-    className: _stylesModule.default.alignCenter
+    className: _stylesModule.default.alignCenter,
+    colorTheme: "information",
+    weight: "bold"
   }, "".concat(Math.round(value), " ").concat(unit)), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: _stylesModule.default.lightGray,
-    large: true,
-    bold: true
+    colorTheme: "gray",
+    weight: "bold"
   }, (0, _numeral.default)(total || 0).format('$ 0,0'))));
 };
 ConsumptionBarIndicator.propTypes = {
+  classes: _propTypes.object,
   left: _propTypes.number,
   value: _propTypes.number,
   unit: _propTypes.string,
-  total: _propTypes.number,
-  classes: _propTypes.object
+  total: _propTypes.number
 };
 var _default = ConsumptionBarIndicator;
 exports.default = _default;

package/dist/components/UTConsumptionBar/components/ConsumptionBarIndicator/styles.module.scss

@@ -22,10 +22,10 @@
 
 .indicatorText {
   align-items: center;
-  color: $text-blue;
   display: flex;
   flex-direction: column;
   padding-top: 8px;
+
   @media #{$desktop-tablet} {
     white-space: nowrap;
   }
@@ -36,6 +36,5 @@
 }
 
 .lightGray {
-  color: $usage-indicator-gray;
   white-space: nowrap;
 }

package/dist/components/UTConsumptionBar/index.js

@@ -84,9 +84,11 @@ var UTConsumptionBar = function UTConsumptionBar(_ref) {
       className: _stylesModule.default.lineContainer
     }, upIndicators.map(function (indicator) {
       return kwh === indicator.value && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-        className: _stylesModule.default.subsidiableAmountLabel
+        className: _stylesModule.default.subsidiableAmountLabel,
+        weight: "bold"
       }, indicator.title), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-        className: _stylesModule.default.warningText
+        className: _stylesModule.default.warningText,
+        colorTheme: "gray"
       }, indicator.subtitle), /*#__PURE__*/_react.default.createElement("div", {
         className: _stylesModule.default.indicatorMarker
       }));
@@ -96,10 +98,10 @@ var UTConsumptionBar = function UTConsumptionBar(_ref) {
       content: "Categor\xEDa ".concat(name, ": ").concat(tippyContent),
       arrow: true
     }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-      blue: true,
-      xsmall: true,
-      bold: true,
-      className: "".concat(_stylesModule.default.categoryLineText, " ").concat(classes === null || classes === void 0 ? void 0 : classes.categoryLineText)
+      className: "".concat(_stylesModule.default.categoryLineText, " ").concat(classes === null || classes === void 0 ? void 0 : classes.categoryLineText),
+      colorTheme: "information",
+      variant: "xsmall",
+      weight: "bold"
     }, showLabel ? name : ''))));
   };
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -111,23 +113,30 @@ var UTConsumptionBar = function UTConsumptionBar(_ref) {
     ref: widthRef
   }), categoryLines.rates.map(renderCategoryLines), downIndicators.map(function (indicator) {
     return /*#__PURE__*/_react.default.createElement(_ConsumptionBarIndicator.default, {
-      small: small,
-      left: getIndicatorPosition(indicator.value),
-      value: indicator.value,
-      unit: indicator.title,
+      classes: classes,
       className: _stylesModule.default.indicator,
+      key: indicator.title,
+      left: getIndicatorPosition(indicator.value),
+      small: small,
       total: indicator.total,
-      classes: classes
+      unit: indicator.title,
+      value: indicator.value
     });
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.finishLine1, " ").concat(downIndicators.length > 0 && _stylesModule.default.colorizedLine)
   }));
 };
 UTConsumptionBar.propTypes = {
-  categoryLines: (0, _propTypes.arrayOf)(_propTypes.object),
+  categoryLines: _propTypes.object,
   classes: _propTypes.object,
   small: _propTypes.bool,
-  values: (0, _propTypes.arrayOf)(_propTypes.object)
+  values: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    position: _propTypes.string,
+    subtitle: _propTypes.string,
+    title: _propTypes.string,
+    total: _propTypes.number,
+    value: _propTypes.number
+  }))
 };
 var _default = UTConsumptionBar;
 exports.default = _default;

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

@@ -51,11 +51,6 @@
   background-position: left bottom;
 }
 
-.help {
-  color: $dark-blue;
-  margin-left: 5px;
-}
-
 .line {
   background: $white;
   height: 25px;
@@ -72,10 +67,6 @@
 
 .categoryLineText {
   cursor: default;
-  @media #{$mobile} {
-    font-size: $small;
-    font-weight: 400;
-  }
 
   &:last-child {
     margin-left: 4px;
@@ -113,9 +104,6 @@
 }
 
 .warningText {
-  color: $disabled-text-gray;
-  font-size: $large;
-  font-weight: 400;
   padding-bottom: 5px;
   text-align: center;
   width: 130px;
@@ -123,8 +111,6 @@
 
 .subsidiableAmountLabel {
   color: $selected-subsidy-text;
-  font-size: $large;
-  font-weight: 700;
   padding-bottom: 5px;
   text-align: center;
   width: 110px;

package/dist/components/UTCuit/index.js

@@ -164,8 +164,8 @@ var UTCuit = /*#__PURE__*/function (_PureComponent) {
         margin: "none",
         inputRef: this.verificationCodeRef
       })), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-        small: true,
-        error: true
+        variant: "small",
+        colorTheme: "error"
       }, (0, _form.shouldShowErrors)(this.props.meta) ? this.props.meta.error : ''));
     }
   }]);

package/dist/components/UTCuit/theme.js

@@ -9,7 +9,7 @@ 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 retrieveMuiTheme = function retrieveMuiTheme(theme) {
-  return (0, _styles.createMuiTheme)({
+  return (0, _styles.createTheme)({
     typography: {
       fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily'])
     },

package/dist/components/UTDatePicker/index.js

@@ -85,29 +85,29 @@ var CustomUtils = /*#__PURE__*/function (_DayjsUtils) {
 }(_dayjs.default);
 var UTDatePicker = function UTDatePicker(_ref) {
   var _field$configuration;
-  var input = _ref.input,
-    _ref$meta = _ref.meta,
-    meta = _ref$meta === void 0 ? {} : _ref$meta,
-    field = _ref.field,
-    themeClasses = _ref.classes,
+  var themeClasses = _ref.classes,
     classNames = _ref.classNames,
     CustomIcon = _ref.CustomIcon,
     dayFormat = _ref.dayFormat,
-    pickerProps = _ref.pickerProps,
-    inputProps = _ref.inputProps,
-    popoverProps = _ref.popoverProps,
-    placeholder = _ref.placeholder,
     _ref$disableToolbar = _ref.disableToolbar,
     disableToolbar = _ref$disableToolbar === void 0 ? true : _ref$disableToolbar,
+    disabled = _ref.disabled,
+    field = _ref.field,
+    iconAnchor = _ref.iconAnchor,
+    input = _ref.input,
+    inputProps = _ref.inputProps,
     _ref$inputVariant = _ref.inputVariant,
     inputVariant = _ref$inputVariant === void 0 ? _constants.INPUT_VARIANT : _ref$inputVariant,
+    invalidDateMessage = _ref.invalidDateMessage,
     maxDateMessage = _ref.maxDateMessage,
     minDateMessage = _ref.minDateMessage,
-    invalidDateMessage = _ref.invalidDateMessage,
+    _ref$meta = _ref.meta,
+    meta = _ref$meta === void 0 ? {} : _ref$meta,
+    pickerProps = _ref.pickerProps,
+    placeholder = _ref.placeholder,
+    popoverProps = _ref.popoverProps,
     variant = _ref.variant,
-    iconAnchor = _ref.iconAnchor,
-    withUpperTitle = _ref.withUpperTitle,
-    disabled = _ref.disabled;
+    withUpperTitle = _ref.withUpperTitle;
   var classes = (0, _react.useMemo)(function () {
     return (0, _classesUtils.mergeClasses)(themeClasses, classNames);
   }, [classNames]);
@@ -146,7 +146,8 @@ var UTDatePicker = function UTDatePicker(_ref) {
   var OpenerIcon = CustomIcon || CalendarIcon;
   var operenerIconReference = (0, _react.useRef)();
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, withUpperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: classes.upperTitle
+    className: classes.upperTitle,
+    withMarkdown: true
   }, field.title), /*#__PURE__*/_react.default.createElement(_pickers.MuiPickersUtilsProvider, {
     utils: disableToolbar ? _dayjs.default : CustomUtils,
     locale: _es.default
@@ -170,7 +171,7 @@ var UTDatePicker = function UTDatePicker(_ref) {
         root: classes.input,
         notchedOutline: classes.notchedOutline
       },
-      placeholder: inputVariant === 'outlined' && (placeholder || (field === null || field === void 0 ? void 0 : field.placeholder))
+      placeholder: inputVariant === 'outlined' && (placeholder || (field === null || field === void 0 ? void 0 : field.placeholder)) || undefined
     }, inputProps),
     invalidDateMessage: invalidDateMessage || _constants.WRONG_DATE_FORMAT,
     inputVariant: inputVariant,
@@ -186,26 +187,27 @@ var UTDatePicker = function UTDatePicker(_ref) {
   }, pickerProps))));
 };
 UTDatePicker.propTypes = {
-  input: _formTypes.inputPropTypes.isRequired,
-  meta: _formTypes.metaPropTypes,
-  field: _formTypes.fieldType,
+  classes: _types.classesPropTypes,
   classNames: _types.classesPropTypes,
   CustomIcon: _propTypes.node,
   dayFormat: _propTypes.string,
-  variant: _propTypes.string,
+  disabled: _propTypes.bool,
+  disableToolbar: _propTypes.bool,
+  field: _formTypes.fieldType,
+  iconAnchor: _propTypes.bool,
+  input: _formTypes.inputPropTypes.isRequired,
   inputFormat: _propTypes.string,
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  pickerProps: _propTypes.object,
   inputProps: _propTypes.object,
-  popoverProps: _propTypes.object,
-  placeholder: _propTypes.string,
-  disableToolbar: _propTypes.bool,
   inputVariant: _propTypes.string,
+  invalidDateMessage: _propTypes.string,
   maxDateMessage: _propTypes.string,
   minDateMessage: _propTypes.string,
-  invalidDateMessage: _propTypes.string,
-  withUpperTitle: _propTypes.bool,
-  iconAnchor: _propTypes.bool
+  pickerProps: _propTypes.object,
+  placeholder: _propTypes.string,
+  popoverProps: _propTypes.object,
+  meta: _formTypes.metaPropTypes,
+  variant: _propTypes.string,
+  withUpperTitle: _propTypes.bool
 };
 var _default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.materialTheme)(UTDatePicker);
 exports.default = _default;

package/dist/components/UTDatePicker/theme.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = exports.materialTheme = void 0;
 var _seamlessImmutable = require("seamless-immutable");
-var _core = require("@material-ui/core");
+var _styles = require("@material-ui/core/styles");
 var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
+var _classesUtils = require("../../utils/classesUtils");
 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 {
     openerIcon: {
       fill: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'openerIcon', 'fill'], _colors.default.orangeIcon)
@@ -46,7 +48,11 @@ var retrieveStyle = function retrieveStyle(theme) {
 };
 exports.retrieveStyle = retrieveStyle;
 var materialTheme = function materialTheme(theme) {
-  return (0, _core.createMuiTheme)({
+  var _theme$UTDatePicker, _theme$UTDatePicker$s, _theme$UTDatePicker2, _theme$UTDatePicker2$, _theme$UTDatePicker3, _theme$UTDatePicker3$, _theme$UTDatePicker4, _theme$UTDatePicker4$, _theme$UTDatePicker4$2;
+  return (0, _styles.createTheme)({
+    typography: {
+      fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily'])
+    },
     overrides: {
       MuiTypography: {
         body1: {
@@ -99,15 +105,15 @@ var materialTheme = function materialTheme(theme) {
       MuiPickersCalendarHeader: {
         switchHeader: {
           color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'switchHeader', 'color'], _colors.default.gray4),
-          textTransform: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'switchHeader', 'textTransform'], 'capitalize !important'),
-          fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'switchHeader', 'fontWeight'], "".concat(500, " !important")),
+          textTransform: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTDatePicker = theme.UTDatePicker) === null || _theme$UTDatePicker === void 0 ? void 0 : (_theme$UTDatePicker$s = _theme$UTDatePicker.switchHeader) === null || _theme$UTDatePicker$s === void 0 ? void 0 : _theme$UTDatePicker$s.textTransform) || 'capitalize'),
+          fontWeight: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTDatePicker2 = theme.UTDatePicker) === null || _theme$UTDatePicker2 === void 0 ? void 0 : (_theme$UTDatePicker2$ = _theme$UTDatePicker2.switchHeader) === null || _theme$UTDatePicker2$ === void 0 ? void 0 : _theme$UTDatePicker2$.fontWeight) || 500),
           margin: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'switchHeader', 'margin'], '8px 17px'),
           padding: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'switchHeader', 'padding'], '15px 0 0')
         },
         dayLabel: {
           color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'dayLabel', 'color'], _colors.default.gray4),
           width: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'dayLabel', 'width'], '33px'),
-          fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'dayLabel', 'fontWeight'], "".concat(500, " !important")),
+          fontWeight: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTDatePicker3 = theme.UTDatePicker) === null || _theme$UTDatePicker3 === void 0 ? void 0 : (_theme$UTDatePicker3$ = _theme$UTDatePicker3.dayLabel) === null || _theme$UTDatePicker3$ === void 0 ? void 0 : _theme$UTDatePicker3$.fontWeight) || 500),
           fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'dayLabel', 'fontFamily'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']))
         },
         daysHeader: {
@@ -125,7 +131,7 @@ var materialTheme = function materialTheme(theme) {
           width: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'width'], '250px'),
           color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'color'], _colors.default.gray4),
           paddingLeft: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'paddingLeft'], '6px'),
-          paddingRight: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'root', 'paddingLeft'], '12px !important'),
+          paddingRight: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTDatePicker4 = theme.UTDatePicker) === null || _theme$UTDatePicker4 === void 0 ? void 0 : (_theme$UTDatePicker4$ = _theme$UTDatePicker4.outlinedInput) === null || _theme$UTDatePicker4$ === void 0 ? void 0 : (_theme$UTDatePicker4$2 = _theme$UTDatePicker4$.root) === null || _theme$UTDatePicker4$2 === void 0 ? void 0 : _theme$UTDatePicker4$2.paddingRight) || '12px'),
           '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
             borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'hover', 'borderColor'], _colors.default.gray3)
           },
@@ -202,6 +208,15 @@ var materialTheme = function materialTheme(theme) {
         pickerView: {
           minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'pickerView', 'minWidth'], '290px')
         }
+      },
+      MuiFormHelperText: {
+        root: {
+          fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'helperText', 'fontSize'], 12),
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'helperText', 'color'], _colors.default.inputPrimary)
+        },
+        contained: {
+          marginLeft: 0
+        }
       }
     }
   });

package/dist/components/UTDialog/index.js

@@ -10,12 +10,11 @@ var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
 var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
 var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
 var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 var _CloseRounded = _interopRequireDefault(require("@material-ui/icons/CloseRounded"));
 var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _ActionButton = _interopRequireDefault(require("./components/ActionButton"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
 var _types = require("./types");
 var _theme = require("./theme");
 var _constants = require("./constants");
@@ -24,7 +23,6 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 var UTDialog = function UTDialog(_ref) {
   var acceptButton = _ref.acceptButton,
     alertConfig = _ref.alertConfig,
-    ButtonComponent = _ref.ButtonComponent,
     cancelButton = _ref.cancelButton,
     children = _ref.children,
     classes = _ref.classes,
@@ -58,7 +56,7 @@ var UTDialog = function UTDialog(_ref) {
     dialogActions = _ref2.dialogActions;
   return /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({
     open: isOpen,
-    onClose: withClickAway && onRequestClose,
+    onClose: withClickAway ? onRequestClose : undefined,
     "aria-labelledby": "alert-dialog-title",
     "aria-describedby": "alert-dialog-description",
     classes: {
@@ -75,29 +73,28 @@ var UTDialog = function UTDialog(_ref) {
     disableTypography: disableTypography,
     className: "".concat(classes.mainTitle, " ").concat(whiteTitle && classes.whiteTitle, " ").concat(mainTitle),
     id: "alert-dialog-title"
-  }, title, withCloseButton && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    className: "".concat(classes.closeButton, " ").concat(whiteTitle && classes.whiteCloseButton, " ").concat(closeButton),
-    onClick: onRequestClose
-  }, /*#__PURE__*/_react.default.createElement(CloseIcon, {
-    className: "".concat(classes.closeIcon, " ").concat(closeIcon)
-  }))), /*#__PURE__*/_react.default.createElement(_DialogContent.default, {
+  }, title, withCloseButton && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      icon: "".concat(classes.closeIcon, " ").concat(closeIcon),
+      root: "".concat(classes.closeButton, " ").concat(whiteTitle && classes.whiteCloseButton, " ").concat(closeButton)
+    },
+    Icon: CloseIcon,
+    onClick: onRequestClose,
+    variant: "text"
+  })), /*#__PURE__*/_react.default.createElement(_DialogContent.default, {
     name: contentName,
     className: "".concat(classes.content, " ").concat(content)
   }, children), warningAlert && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({}, alertConfig, {
     className: "".concat(classes.warning, " ").concat(warning)
   }), warningAlert), (cancelButton || acceptButton) && /*#__PURE__*/_react.default.createElement(_DialogActions.default, {
     className: "".concat(classes.dialogActions, " ").concat(dialogActions)
-  }, FooterComponents, cancelButton && /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
-    ButtonComponent: ButtonComponent,
-    button: cancelButton,
-    className: classes.cancelButton,
-    defaultText: _constants.CANCEL_BUTTON_TEXT
-  }), acceptButton && /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
-    ButtonComponent: ButtonComponent,
-    button: acceptButton,
-    className: classes.acceptButton,
-    defaultText: _constants.ACCEPT_BUTTON_TEXT
-  })));
+  }, FooterComponents, cancelButton && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    colorTheme: "secondary",
+    variant: "text"
+  }, cancelButton), cancelButton.text || _constants.CANCEL_BUTTON_TEXT), acceptButton && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    colorTheme: "primary",
+    variant: "filled"
+  }, acceptButton), acceptButton.text || _constants.ACCEPT_BUTTON_TEXT)));
 };
 UTDialog.defaultProps = {
   disableEnforceFocus: false,
@@ -110,7 +107,6 @@ UTDialog.defaultProps = {
 UTDialog.propTypes = {
   acceptButton: _types.dialogButtonPropTypes,
   alertConfig: _propTypes.object,
-  ButtonComponent: _propTypes.elementType,
   cancelButton: _types.dialogButtonPropTypes,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
@@ -120,7 +116,7 @@ UTDialog.propTypes = {
   disableScrollLock: _propTypes.bool,
   disableTypography: _propTypes.bool,
   elevation: _propTypes.number,
-  FooterComponents: _propTypes.elementType,
+  FooterComponents: _propTypes.element,
   isOpen: _propTypes.bool,
   onRequestClose: _propTypes.func,
   roundedCloseButton: _propTypes.bool,

package/dist/components/UTDialog/theme.js

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = void 0;
 var _seamlessImmutable = require("seamless-immutable");
 var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
+var _classesUtils = require("../../utils/classesUtils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var retrieveStyle = function retrieveStyle(theme) {
+var retrieveStyle = function retrieveStyle(_ref) {
+  var _theme$UTDialog, _theme$UTDialog$close;
+  var theme = _ref.theme;
   return {
     container: {
       margin: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'container', 'margin'], 0),
@@ -51,7 +54,7 @@ var retrieveStyle = function retrieveStyle(theme) {
     },
     dialogActions: {
       margin: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'dialogActions', 'margin']),
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'dialogActions', 'padding']),
+      padding: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'dialogActions', 'padding'], 16),
       alignItems: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'dialogActions', 'alignItems']),
       boxSizing: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'dialogActions', 'boxSizing']),
       display: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'dialogActions', 'display']),
@@ -60,32 +63,14 @@ var retrieveStyle = function retrieveStyle(theme) {
       width: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'dialogActions', 'width'])
     },
     closeButton: {
-      position: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'closeButton', 'position'], 'absolute !important'),
+      padding: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'closeButton', 'padding']),
+      position: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTDialog = theme.UTDialog) === null || _theme$UTDialog === void 0 ? void 0 : (_theme$UTDialog$close = _theme$UTDialog.closeButton) === null || _theme$UTDialog$close === void 0 ? void 0 : _theme$UTDialog$close.position) || 'absolute'),
       right: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'closeButton', 'right'], '5px'),
-      top: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'closeButton', 'top'], '5px'),
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'closeButton', 'padding'])
+      top: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'closeButton', 'top'], '5px')
     },
     whiteCloseButton: {
       color: _colors.default.white
     },
-    acceptButton: {
-      margin: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'acceptButton', 'margin']),
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'acceptButton', 'padding']),
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'acceptButton', 'fontSize']),
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'acceptButton', 'fontWeight']),
-      width: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'acceptButton', 'width']),
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'acceptButton', 'backgroundColor']),
-      textTransform: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'acceptButton', 'textTransform'])
-    },
-    cancelButton: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'cancelButton', 'color']),
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'cancelButton', 'padding']),
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'cancelButton', 'fontSize']),
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'cancelButton', 'fontWeight']),
-      transition: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'cancelButton', 'transition']),
-      textTransform: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'cancelButton', 'textTransform']),
-      width: (0, _seamlessImmutable.getIn)(theme, ['UTDialog', 'cancelButton', 'width'])
-    },
     hidden: {
       display: 'none'
     },

package/dist/components/UTDialog/types.js

@@ -5,11 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.dialogButtonPropTypes = void 0;
 var _propTypes = require("prop-types");
-var dialogButtonPropTypes = (0, _propTypes.oneOfType)([_propTypes.element, (0, _propTypes.shape)({
-  onPress: _propTypes.func,
-  text: _propTypes.string,
+var dialogButtonPropTypes = (0, _propTypes.shape)({
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
   disabled: _propTypes.bool,
-  className: _propTypes.string,
-  config: _propTypes.object
-})]);
+  text: _propTypes.string,
+  onClick: _propTypes.func
+});
 exports.dialogButtonPropTypes = dialogButtonPropTypes;

package/dist/components/UTDotMenu/index.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));
 var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
 var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
 var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../UTButton"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -54,14 +54,18 @@ var UTDotMenu = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var anchorEl = this.state.anchorEl;
+      var classNames = this.props.classNames;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: this.props.className
-      }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-        "aria-label": "More",
-        "aria-owns": anchorEl ? 'long-menu' : null,
-        "aria-haspopup": "true",
-        onClick: this.handleClick
-      }, /*#__PURE__*/_react.default.createElement(_MoreVert.default, null)), /*#__PURE__*/_react.default.createElement(_Menu.default, {
+      }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+        classNames: {
+          icon: classNames.icon,
+          root: classNames.button
+        },
+        Icon: _MoreVert.default,
+        onClick: this.handleClick,
+        variant: "text"
+      }), /*#__PURE__*/_react.default.createElement(_Menu.default, {
         id: "long-menu",
         anchorEl: anchorEl,
         open: Boolean(anchorEl),
@@ -81,7 +85,11 @@ UTDotMenu.propTypes = {
     name: _propTypes.string,
     onPress: _propTypes.func
   })),
-  className: _propTypes.string
+  className: _propTypes.string,
+  classNames: (0, _propTypes.shape)({
+    icon: _propTypes.string,
+    button: _propTypes.string
+  })
 };
 var _default = UTDotMenu;
 exports.default = _default;

package/dist/components/UTEmojiPicker/theme.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = void 0;
 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$UTEmojiPicker, _theme$UTEmojiPicker$, _theme$UTEmojiPicker2, _theme$UTEmojiPicker3, _theme$UTEmojiPicker4, _theme$UTEmojiPicker5, _theme$UTEmojiPicker6, _theme$UTEmojiPicker7, _theme$UTEmojiPicker8, _theme$UTEmojiPicker9, _theme$UTEmojiPicker10, _theme$UTEmojiPicker11, _theme$UTEmojiPicker12, _theme$UTEmojiPicker13, _theme$UTEmojiPicker14, _theme$UTEmojiPicker15, _theme$UTEmojiPicker16, _theme$UTEmojiPicker17, _theme$UTEmojiPicker18, _theme$UTEmojiPicker19, _theme$UTEmojiPicker20, _theme$UTEmojiPicker21, _theme$UTEmojiPicker22, _theme$UTEmojiPicker23, _theme$UTEmojiPicker24, _theme$UTEmojiPicker25, _theme$UTEmojiPicker26, _theme$UTEmojiPicker27, _theme$UTEmojiPicker28, _theme$UTEmojiPicker29, _theme$UTEmojiPicker30, _theme$UTEmojiPicker31, _theme$UTEmojiPicker32, _theme$UTEmojiPicker33, _theme$UTEmojiPicker34, _theme$UTEmojiPicker35, _theme$UTEmojiPicker36, _theme$UTEmojiPicker37, _theme$UTEmojiPicker38, _theme$UTEmojiPicker39, _theme$UTEmojiPicker40, _theme$UTEmojiPicker41, _theme$UTEmojiPicker42, _theme$UTEmojiPicker43, _theme$UTEmojiPicker44, _theme$UTEmojiPicker45, _theme$UTEmojiPicker46, _theme$UTEmojiPicker47, _theme$UTEmojiPicker48, _theme$UTEmojiPicker49;
+  var theme = _ref.theme;
   return {
     container: {
       backgroundColor: (theme === null || theme === void 0 ? void 0 : (_theme$UTEmojiPicker = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker === void 0 ? void 0 : (_theme$UTEmojiPicker$ = _theme$UTEmojiPicker.container) === null || _theme$UTEmojiPicker$ === void 0 ? void 0 : _theme$UTEmojiPicker$.backgroundColor) || _colors.default.white,

package/dist/components/UTFileInput/layout.js

@@ -95,7 +95,7 @@ var UTFileInput = /*#__PURE__*/function (_PureComponent) {
         onDragOver: this.handleDragOver,
         onDrop: this.handleOnDrop
       }, loading ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-        gray: true,
+        colorTheme: "gray",
         className: "".concat(_stylesModule.default.loadingLabel, " ").concat(loadingTextClassname)
       }, uploadingText), /*#__PURE__*/_react.default.createElement("div", {
         className: _stylesModule.default.loading
@@ -104,7 +104,7 @@ var UTFileInput = /*#__PURE__*/function (_PureComponent) {
       }, Icon || /*#__PURE__*/_react.default.createElement(UploadImage, {
         className: "".concat(_stylesModule.default.icon, " ").concat(classes.icon)
       }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-        primary: true,
+        variant: "small",
         className: "".concat(_stylesModule.default.label, " ").concat(classes.fileInputLabel)
       }, label)), /*#__PURE__*/_react.default.createElement("input", {
         className: "".concat(_stylesModule.default.input, " ").concat(inputClassname),
@@ -114,8 +114,9 @@ var UTFileInput = /*#__PURE__*/function (_PureComponent) {
         name: name,
         disabled: disabled
       })), error && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-        small: true,
-        className: "".concat(_stylesModule.default.error, " ").concat(errorClassname)
+        className: errorClassname,
+        colorTheme: "error",
+        variant: "small"
       }, errorText));
     }
   }]);

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

@@ -102,6 +102,5 @@
 }
 
 .error {
-  color: $error-red;
   text-align: start;
 }

package/dist/components/UTIconButton/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 {
     base: {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTIconButton', 'base', 'backgroundColor']),