@widergy/energy-ui 1.134.2 → 2.0.0

package/dist/components/UTTable/theme.js

@@ -6,13 +6,15 @@ 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 }; }
 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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var retrieveStyle = function retrieveStyle(theme) {
-  var _responsiveCell;
+var retrieveStyle = function retrieveStyle(_ref) {
+  var _theme$UTTable, _theme$UTTable$header, _theme$UTTable2, _theme$UTTable2$heade, _theme$Fonts, _theme$UTTable3, _theme$UTTable3$heade, _theme$UTTable4, _theme$UTTable4$heade, _theme$UTTable5, _theme$UTTable5$heade, _theme$Fonts2, _theme$UTTable6, _theme$UTTable6$heade, _theme$UTTable7, _theme$UTTable7$table, _theme$UTTable8, _theme$UTTable8$table, _theme$UTTable9, _theme$UTTable9$table, _theme$UTTable10, _theme$UTTable10$tabl, _theme$UTTable11, _theme$UTTable11$resp, _theme$UTTable12, _theme$UTTable12$resp, _responsiveCell, _theme$UTTable13, _theme$UTTable13$rowC, _theme$UTTable14, _theme$UTTable14$tabl, _theme$UTTable15, _theme$UTTable15$tabl, _theme$UTTable16, _theme$UTTable16$tabl, _theme$UTTable17, _theme$UTTable17$tabl, _theme$UTTable18, _theme$UTTable18$tabl, _theme$UTTable19, _theme$UTTable19$tabl, _theme$UTTable20, _theme$UTTable20$tabl, _theme$UTTable21, _theme$UTTable21$tabl, _theme$UTTable22, _theme$UTTable22$tabl, _theme$Fonts3, _theme$UTTable23, _theme$UTTable23$tabl, _theme$UTTable24, _theme$UTTable24$noRe, _theme$UTTable25, _theme$UTTable25$noRe, _theme$Fonts4, _theme$UTTable26, _theme$UTTable26$noRe, _theme$UTTable27, _theme$UTTable27$chec, _theme$UTTable27$chec2;
+  var theme = _ref.theme;
   var tabletMobile = (0, _seamlessImmutable.getIn)(theme, ['Media', 'tabletMobile']);
   return {
     table: {
@@ -53,15 +55,15 @@ var retrieveStyle = function retrieveStyle(theme) {
       }
     },
     headerCellCategoryName: {
-      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'headerCellCategoryName', 'color']), " !important"),
-      fontSize: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'headerCellCategoryName', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'small'])), " !important"),
-      fontWeight: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'headerCellCategoryName', 'fontWeight']), " !important"),
+      color: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable = theme.UTTable) === null || _theme$UTTable === void 0 ? void 0 : (_theme$UTTable$header = _theme$UTTable.headerCellCategoryName) === null || _theme$UTTable$header === void 0 ? void 0 : _theme$UTTable$header.color),
+      fontSize: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTTable2 = theme.UTTable) === null || _theme$UTTable2 === void 0 ? void 0 : (_theme$UTTable2$heade = _theme$UTTable2.headerCellCategoryName) === null || _theme$UTTable2$heade === void 0 ? void 0 : _theme$UTTable2$heade.fontSize) || (theme === null || theme === void 0 ? void 0 : (_theme$Fonts = theme.Fonts) === null || _theme$Fonts === void 0 ? void 0 : _theme$Fonts.small)),
+      fontWeight: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable3 = theme.UTTable) === null || _theme$UTTable3 === void 0 ? void 0 : (_theme$UTTable3$heade = _theme$UTTable3.headerCellCategoryName) === null || _theme$UTTable3$heade === void 0 ? void 0 : _theme$UTTable3$heade.fontWeight),
       marginBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'headerCellCategoryName', 'marginBottom'], 5)
     },
     headerCellUnit: {
-      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'headerCellUnit', 'color']), " !important"),
-      fontSize: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'headerCellUnit', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'])), " !important"),
-      fontWeight: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'headerCellUnit', 'fontWeight'], 400), " !important")
+      color: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable4 = theme.UTTable) === null || _theme$UTTable4 === void 0 ? void 0 : (_theme$UTTable4$heade = _theme$UTTable4.headerCellUnit) === null || _theme$UTTable4$heade === void 0 ? void 0 : _theme$UTTable4$heade.color),
+      fontSize: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTTable5 = theme.UTTable) === null || _theme$UTTable5 === void 0 ? void 0 : (_theme$UTTable5$heade = _theme$UTTable5.headerCellUnit) === null || _theme$UTTable5$heade === void 0 ? void 0 : _theme$UTTable5$heade.fontSize) || (theme === null || theme === void 0 ? void 0 : (_theme$Fonts2 = theme.Fonts) === null || _theme$Fonts2 === void 0 ? void 0 : _theme$Fonts2.medium)),
+      fontWeight: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable6 = theme.UTTable) === null || _theme$UTTable6 === void 0 ? void 0 : (_theme$UTTable6$heade = _theme$UTTable6.headerCellUnit) === null || _theme$UTTable6$heade === void 0 ? void 0 : _theme$UTTable6$heade.fontWeight)
     },
     orderIcon: {
       color: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'orderIcon', 'color'])
@@ -107,12 +109,12 @@ var retrieveStyle = function retrieveStyle(theme) {
       borderStyle: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'borderStyle'], 'solid')
     },
     firstRow: {
-      borderTopLeftRadius: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'table', 'borderRadius']), "px !important"),
-      borderTopRightRadius: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'table', 'borderRadius']), "px !important")
+      borderTopLeftRadius: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable7 = theme.UTTable) === null || _theme$UTTable7 === void 0 ? void 0 : (_theme$UTTable7$table = _theme$UTTable7.table) === null || _theme$UTTable7$table === void 0 ? void 0 : _theme$UTTable7$table.borderRadius),
+      borderTopRightRadius: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable8 = theme.UTTable) === null || _theme$UTTable8 === void 0 ? void 0 : (_theme$UTTable8$table = _theme$UTTable8.table) === null || _theme$UTTable8$table === void 0 ? void 0 : _theme$UTTable8$table.borderRadius)
     },
     lastRow: {
-      borderBottomRightRadius: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'table', 'borderRadius']), "px !important"),
-      borderBottomLeftRadius: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'table', 'borderRadius']), "px !important")
+      borderBottomRightRadius: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable9 = theme.UTTable) === null || _theme$UTTable9 === void 0 ? void 0 : (_theme$UTTable9$table = _theme$UTTable9.table) === null || _theme$UTTable9$table === void 0 ? void 0 : _theme$UTTable9$table.borderRadius),
+      borderBottomLeftRadius: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable10 = theme.UTTable) === null || _theme$UTTable10 === void 0 ? void 0 : (_theme$UTTable10$tabl = _theme$UTTable10.table) === null || _theme$UTTable10$tabl === void 0 ? void 0 : _theme$UTTable10$tabl.borderRadius)
     },
     rowCell: {
       color: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'rowCell', 'color']),
@@ -130,8 +132,8 @@ var retrieveStyle = function retrieveStyle(theme) {
       fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'rowCell', 'tabletMobile', 'fontSize']),
       fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'rowCell', 'tabletMobile', 'fontWeight'])
     }), _defineProperty(_responsiveCell, '&:first-child', {
-      borderTopLeftRadius: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'responsiveRow', 'borderRadius']), " !important"),
-      borderTopRightRadius: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'responsiveRow', 'borderRadius']), " !important")
+      borderTopLeftRadius: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable11 = theme.UTTable) === null || _theme$UTTable11 === void 0 ? void 0 : (_theme$UTTable11$resp = _theme$UTTable11.responsiveRow) === null || _theme$UTTable11$resp === void 0 ? void 0 : _theme$UTTable11$resp.borderRadius),
+      borderTopRightRadius: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable12 = theme.UTTable) === null || _theme$UTTable12 === void 0 ? void 0 : (_theme$UTTable12$resp = _theme$UTTable12.responsiveRow) === null || _theme$UTTable12$resp === void 0 ? void 0 : _theme$UTTable12$resp.borderRadius)
     }), _responsiveCell),
     lastCellContainer: {
       borderBottomRightRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'responsiveRow', 'borderRadius']),
@@ -171,7 +173,7 @@ var retrieveStyle = function retrieveStyle(theme) {
       fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'actionCell', 'fontWeight']),
       borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'rowCell', 'borderColor']),
       borderStyle: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'rowCell', 'borderStyle'], 'solid'),
-      borderWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'rowCell', 'borderWidth'], '1px !important')
+      borderWidth: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTTable13 = theme.UTTable) === null || _theme$UTTable13 === void 0 ? void 0 : (_theme$UTTable13$rowC = _theme$UTTable13.rowCell) === null || _theme$UTTable13$rowC === void 0 ? void 0 : _theme$UTTable13$rowC.borderWidth) || '1px')
     },
     categoryNameCell: {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'categoryNameCell', 'backgroundColor'], _colors.default.white),
@@ -179,10 +181,10 @@ var retrieveStyle = function retrieveStyle(theme) {
       fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'categoryNameCell', 'fontWeight'])
     },
     firstFixedRowLeft: {
-      borderTopLeftRadius: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'table', 'borderRadius']), "px !important")
+      borderTopLeftRadius: (0, _classesUtils.withImportant)("".concat(theme === null || theme === void 0 ? void 0 : (_theme$UTTable14 = theme.UTTable) === null || _theme$UTTable14 === void 0 ? void 0 : (_theme$UTTable14$tabl = _theme$UTTable14.table) === null || _theme$UTTable14$tabl === void 0 ? void 0 : _theme$UTTable14$tabl.borderRadius, "px"))
     },
     lastFixedRowLeft: {
-      borderBottomLeftRadius: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'table', 'borderRadius']), "px !important")
+      borderBottomLeftRadius: (0, _classesUtils.withImportant)("".concat(theme === null || theme === void 0 ? void 0 : (_theme$UTTable15 = theme.UTTable) === null || _theme$UTTable15 === void 0 ? void 0 : (_theme$UTTable15$tabl = _theme$UTTable15.table) === null || _theme$UTTable15$tabl === void 0 ? void 0 : _theme$UTTable15$tabl.borderRadius, "px"))
     },
     fixedRowLeft: {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'fixedRowLeft', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'backgroundColor'], _colors.default.white)),
@@ -197,10 +199,10 @@ var retrieveStyle = function retrieveStyle(theme) {
       boxShadow: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'fixedRowLeft', 'boxShadow'])
     },
     firstFixedRowRight: {
-      borderTopRightRadius: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'table', 'borderRadius']), "px !important")
+      borderTopRightRadius: (0, _classesUtils.withImportant)("".concat(theme === null || theme === void 0 ? void 0 : (_theme$UTTable16 = theme.UTTable) === null || _theme$UTTable16 === void 0 ? void 0 : (_theme$UTTable16$tabl = _theme$UTTable16.table) === null || _theme$UTTable16$tabl === void 0 ? void 0 : _theme$UTTable16$tabl.borderRadius, "px"))
     },
     lastFixedRowRight: {
-      borderBottomRightRadius: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'table', 'borderRadius']), "px !important")
+      borderTopRightRadius: (0, _classesUtils.withImportant)("".concat(theme === null || theme === void 0 ? void 0 : (_theme$UTTable17 = theme.UTTable) === null || _theme$UTTable17 === void 0 ? void 0 : (_theme$UTTable17$tabl = _theme$UTTable17.table) === null || _theme$UTTable17$tabl === void 0 ? void 0 : _theme$UTTable17$tabl.borderRadius, "px"))
     },
     fixedRowRight: {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'fixedRowRight', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'backgroundColor'], _colors.default.white)),
@@ -291,17 +293,17 @@ var retrieveStyle = function retrieveStyle(theme) {
       pointerEvents: 'none'
     },
     tableTitle: {
-      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'tableTitle', 'color']), " !important"),
-      fontSize: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'tableTitle', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'xlarge'])), " !important"),
-      fontWeight: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'tableTitle', 'fontWeight'], 500), " !important")
+      color: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable18 = theme.UTTable) === null || _theme$UTTable18 === void 0 ? void 0 : (_theme$UTTable18$tabl = _theme$UTTable18.tableTitle) === null || _theme$UTTable18$tabl === void 0 ? void 0 : _theme$UTTable18$tabl.color),
+      fontSize: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable19 = theme.UTTable) === null || _theme$UTTable19 === void 0 ? void 0 : (_theme$UTTable19$tabl = _theme$UTTable19.tableTitle) === null || _theme$UTTable19$tabl === void 0 ? void 0 : _theme$UTTable19$tabl.fontSize),
+      fontWeight: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable20 = theme.UTTable) === null || _theme$UTTable20 === void 0 ? void 0 : (_theme$UTTable20$tabl = _theme$UTTable20.tableTitle) === null || _theme$UTTable20$tabl === void 0 ? void 0 : _theme$UTTable20$tabl.fontWeight)
     },
     headerContainer: {
       margin: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'headerContainer', 'margin'])
     },
     totalRowsLabel: {
-      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'tableTitle', 'color']), " !important"),
-      fontSize: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'tableTitle', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'])), " !important"),
-      fontWeight: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'tableTitle', 'fontWeight']), " !important")
+      color: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable21 = theme.UTTable) === null || _theme$UTTable21 === void 0 ? void 0 : (_theme$UTTable21$tabl = _theme$UTTable21.tableTitle) === null || _theme$UTTable21$tabl === void 0 ? void 0 : _theme$UTTable21$tabl.color),
+      fontSize: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTTable22 = theme.UTTable) === null || _theme$UTTable22 === void 0 ? void 0 : (_theme$UTTable22$tabl = _theme$UTTable22.tableTitle) === null || _theme$UTTable22$tabl === void 0 ? void 0 : _theme$UTTable22$tabl.fontSize) || (theme === null || theme === void 0 ? void 0 : (_theme$Fonts3 = theme.Fonts) === null || _theme$Fonts3 === void 0 ? void 0 : _theme$Fonts3.medium)),
+      fontWeight: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable23 = theme.UTTable) === null || _theme$UTTable23 === void 0 ? void 0 : (_theme$UTTable23$tabl = _theme$UTTable23.tableTitle) === null || _theme$UTTable23$tabl === void 0 ? void 0 : _theme$UTTable23$tabl.fontWeight)
     },
     pageSizeSelect: {
       fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']),
@@ -324,15 +326,15 @@ var retrieveStyle = function retrieveStyle(theme) {
       height: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'noResultsContainer', 'height'], 200)
     },
     noResultsLabel: {
-      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'noResultsLabel', 'color']), " !important"),
-      fontSize: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'noResultsLabel', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'])), " !important"),
-      fontWeight: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'noResultsLabel', 'fontWeight']), " !important")
+      color: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable24 = theme.UTTable) === null || _theme$UTTable24 === void 0 ? void 0 : (_theme$UTTable24$noRe = _theme$UTTable24.noResultsLabel) === null || _theme$UTTable24$noRe === void 0 ? void 0 : _theme$UTTable24$noRe.color),
+      fontSize: (0, _classesUtils.withImportant)((theme === null || theme === void 0 ? void 0 : (_theme$UTTable25 = theme.UTTable) === null || _theme$UTTable25 === void 0 ? void 0 : (_theme$UTTable25$noRe = _theme$UTTable25.noResultsLabel) === null || _theme$UTTable25$noRe === void 0 ? void 0 : _theme$UTTable25$noRe.fontSize) || (theme === null || theme === void 0 ? void 0 : (_theme$Fonts4 = theme.Fonts) === null || _theme$Fonts4 === void 0 ? void 0 : _theme$Fonts4.medium)),
+      fontWeight: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable26 = theme.UTTable) === null || _theme$UTTable26 === void 0 ? void 0 : (_theme$UTTable26$noRe = _theme$UTTable26.noResultsLabel) === null || _theme$UTTable26$noRe === void 0 ? void 0 : _theme$UTTable26$noRe.fontWeight)
     },
     checkBoxRoot: {
       color: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'checkbox', 'root', 'color'])
     },
     checkboxColorChecked: {
-      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTTable', 'checkbox', 'selected', 'color']), " !important")
+      color: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTTable27 = theme.UTTable) === null || _theme$UTTable27 === void 0 ? void 0 : (_theme$UTTable27$chec = _theme$UTTable27.checkbox) === null || _theme$UTTable27$chec === void 0 ? void 0 : (_theme$UTTable27$chec2 = _theme$UTTable27$chec.selected) === null || _theme$UTTable27$chec2 === void 0 ? void 0 : _theme$UTTable27$chec2.color)
     },
     tableLoading: {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'checkbox', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'backgroundColor'], _colors.default.white))

package/dist/components/UTTabs/index.js

@@ -10,6 +10,7 @@ var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
 var _propTypes = require("prop-types");
 var _array = require("@widergy/web-utils/lib/array");
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _classesUtils = require("../../utils/classesUtils");
 var _TooltipTab = _interopRequireDefault(require("./components/TooltipTab"));
 var _constants = require("./constants");
 var _utils = require("./utils");
@@ -52,13 +53,15 @@ var UTTabs = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-        classes = _this$props.classes,
-        variant = _this$props.variant,
+        badges = _this$props.badges,
+        themeClasses = _this$props.classes,
+        classNames = _this$props.classNames,
+        options = _this$props.options,
         tabProps = _this$props.tabProps,
         tabsProps = _this$props.tabsProps,
         tabTooltipProps = _this$props.tabTooltipProps,
-        options = _this$props.options,
-        badges = _this$props.badges;
+        variant = _this$props.variant;
+      var classes = (0, _classesUtils.mergeClasses)(themeClasses, classNames);
       var styles = (0, _utils.retrieveClassNamesFromVariants)(variant, classes);
       return /*#__PURE__*/_react.default.createElement(_Tabs.default, _extends({
         value: this.props.value,
@@ -104,15 +107,18 @@ var UTTabs = /*#__PURE__*/function (_PureComponent) {
   return UTTabs;
 }(_react.PureComponent);
 UTTabs.defaultProps = {
+  badges: [],
   classes: {},
-  variant: _constants.DEFAULT_VARIANT,
-  tabsProps: _constants.DEFAULT_TABS_PROPS,
+  classNames: {},
   options: [],
-  badges: []
+  variant: _constants.DEFAULT_VARIANT,
+  tabsProps: _constants.DEFAULT_TABS_PROPS
 };
 UTTabs.propTypes = {
-  value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number]),
-  onChange: _propTypes.func.isRequired,
+  badges: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    show: _propTypes.bool,
+    styles: _propTypes.string
+  })),
   classes: (0, _propTypes.shape)({
     tabsRoot: _propTypes.string,
     tabRoot: _propTypes.string,
@@ -121,23 +127,22 @@ UTTabs.propTypes = {
     textColorPrimary: _propTypes.string,
     label: _propTypes.string
   }),
-  variant: _propTypes.string,
-  tabProps: _propTypes.object,
-  tabTooltipProps: _propTypes.object,
-  tabsProps: (0, _propTypes.shape)({
-    variant: _propTypes.string,
-    orientation: _propTypes.string
-  }),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  onChange: _propTypes.func.isRequired,
   options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     label: _propTypes.string,
     disabled: _propTypes.bool,
     icon: (0, _propTypes.oneOfType)([_propTypes.node, _propTypes.elementType, _propTypes.string]),
     tooltip: (0, _propTypes.oneOfType)([_propTypes.bool, _propTypes.string])
   })),
-  badges: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    show: _propTypes.bool,
-    styles: _propTypes.string
-  }))
+  variant: _propTypes.string,
+  tabProps: _propTypes.object,
+  tabsProps: (0, _propTypes.shape)({
+    variant: _propTypes.string,
+    orientation: _propTypes.string
+  }),
+  tabTooltipProps: _propTypes.object,
+  value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number])
 };
 var _default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTTabs);
 exports.default = _default;

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

package/dist/components/UTTextArea/index.js

@@ -41,7 +41,8 @@ var UTTextArea = function UTTextArea(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.titleContainer
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: "".concat(label, " ").concat(_stylesModule.default.label)
+    className: "".concat(label, " ").concat(_stylesModule.default.label),
+    withMarkdown: true
   }, title)), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.textAreaContainer
   }, /*#__PURE__*/_react.default.createElement("textarea", _extends({}, inputProps, {

package/dist/components/UTTextArea/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$UTTextArea, _theme$UTTextArea$tex, _theme$UTTextArea2, _theme$UTTextArea2$te, _theme$UTTextArea3, _theme$UTTextArea3$te, _theme$UTTextArea4, _theme$UTTextArea4$te, _theme$Fonts, _theme$UTTextArea5, _theme$UTTextArea5$te, _theme$Fonts2, _theme$UTTextArea6, _theme$UTTextArea6$te, _theme$UTTextArea7, _theme$UTTextArea7$te, _theme$UTTextArea8, _theme$UTTextArea8$te, _theme$UTTextArea9, _theme$UTTextArea9$te, _theme$UTTextArea10, _theme$UTTextArea10$t, _theme$UTTextArea10$t2, _theme$UTTextArea11, _theme$UTTextArea11$t, _theme$UTTextArea11$t2, _theme$UTTextArea12, _theme$UTTextArea12$t, _theme$UTTextArea12$t2, _theme$UTTextArea13, _theme$UTTextArea13$t, _theme$UTTextArea13$t2, _theme$UTTextArea14, _theme$UTTextArea14$t, _theme$UTTextArea14$t2, _theme$UTTextArea15, _theme$UTTextArea15$t, _theme$UTTextArea15$t2, _theme$UTTextArea16, _theme$UTTextArea16$t, _theme$UTTextArea16$t2, _theme$UTTextArea17, _theme$UTTextArea17$t, _theme$UTTextArea17$t2, _theme$UTTextArea18, _theme$UTTextArea18$t, _theme$UTTextArea18$t2, _theme$UTTextArea19, _theme$UTTextArea19$t, _theme$UTTextArea19$t2, _theme$UTTextArea20, _theme$UTTextArea20$i;
+  var theme = _ref.theme;
   return {
     textarea: {
       background: theme === null || theme === void 0 ? void 0 : (_theme$UTTextArea = theme.UTTextArea) === null || _theme$UTTextArea === void 0 ? void 0 : (_theme$UTTextArea$tex = _theme$UTTextArea.textarea) === null || _theme$UTTextArea$tex === void 0 ? void 0 : _theme$UTTextArea$tex.background,

package/dist/components/UTTextInput/index.js

@@ -10,12 +10,12 @@ var _Visibility = _interopRequireDefault(require("@material-ui/icons/Visibility"
 var _VisibilityOff = _interopRequireDefault(require("@material-ui/icons/VisibilityOff"));
 var _HelpOutline = _interopRequireDefault(require("@material-ui/icons/HelpOutline"));
 var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
 var _form = require("@widergy/web-utils/lib/form");
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
 var _formTypes = require("../../types/formTypes");
+var _UTButton = _interopRequireDefault(require("../UTButton"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -117,10 +117,13 @@ var UTTextInput = /*#__PURE__*/function (_PureComponent) {
         Component = others.Component,
         muiTheme = others.muiTheme,
         textFieldPropsToForward = _objectWithoutProperties(others, _excluded2);
-      var endAction = type === _constants.INPUT_TYPES.PASSWORD ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-        onClick: this.handleClickShowPassword
-      }, !this.state.visible ? /*#__PURE__*/_react.default.createElement(PasswordInvisibleIcon, null) : /*#__PURE__*/_react.default.createElement(PasswordVisibleIcon, null)) : adornment;
+      var endAction = type === _constants.INPUT_TYPES.PASSWORD ? /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+        Icon: this.state.visible ? PasswordVisibleIcon : PasswordInvisibleIcon,
+        onClick: this.handleClickShowPassword,
+        variant: "text"
+      }) : adornment;
       var value = inputObjectKey ? input.value[inputObjectKey] : input.value;
+      var errorMessage = (0, _form.shouldShowErrors)(meta) && meta.error || captionLabel || '';
       var TextInput = /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
         id: id || '',
         placeholder: placeholder,
@@ -132,9 +135,14 @@ var UTTextInput = /*#__PURE__*/function (_PureComponent) {
         }), /*#__PURE__*/_react.default.createElement("div", null, label)) : label,
         onKeyPress: preventEnterSubmit ? preventDefault : undefined,
         error: (0, _form.shouldShowErrors)(meta),
-        helperText: /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-          className: _stylesModule.default.error
-        }, (0, _form.shouldShowErrors)(meta) && meta.error || captionLabel || ''),
+        FormHelperTextProps: {
+          component: 'div'
+        },
+        helperText: errorMessage ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+          className: _stylesModule.default.errorLabel,
+          colorTheme: "error",
+          variant: "small"
+        }, errorMessage) : undefined,
         disabled: disabled,
         onChange: handleChange,
         value: value,
@@ -145,7 +153,7 @@ var UTTextInput = /*#__PURE__*/function (_PureComponent) {
         InputProps: {
           endAdornment: endAction && /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
             position: "end",
-            className: adornmentInside && _stylesModule.default.adornmentInside
+            className: "".concat(adornmentInside && _stylesModule.default.adornmentInside)
           }, endAction),
           type: type === _constants.INPUT_TYPES.PASSWORD ? !this.state.visible ? _constants.INPUT_TYPES.PASSWORD : _constants.INPUT_TYPES.TEXT : type || _constants.INPUT_TYPES.TEXT,
           classes: {

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

@@ -36,6 +36,7 @@
   margin-bottom: -4px;
 }
 
-.error {
-  color: inherit;
+.errorLabel {
+  margin-top: 4px;
+  text-align: left;
 }

package/dist/components/UTTextInput/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, ['UTTextInput', 'container', 'display'], 'flex'),
@@ -122,6 +123,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/UTToggle/components/ToggleOption/index.js

@@ -33,6 +33,7 @@ var ToggleOption = function ToggleOption(_ref) {
     className: "".concat(classes.option, " ").concat(isSelected && classes.selectedOption, " ").concat(className),
     keyName: keyName
   }, Icon ? IconComponent : /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "small",
     className: isSelected ? classes.selectedLabel : classes.unSelectedLabel
   }, label));
 };

package/dist/components/UTToggle/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 {
     container: {
       alignItems: (0, _seamlessImmutable.getIn)(theme, ['UTToggle', 'container', 'alignItems'], 'center'),

package/dist/components/UTTooltip/index.js

@@ -54,9 +54,12 @@ var UTTooltip = function UTTooltip(_ref) {
     className: "".concat(theme.container, " ").concat(forceArrow && _stylesModule.default.arrow),
     interactive: interactive
   }, tippyProps, {
-    content: /*#__PURE__*/_react.default.isValidElement(content) ? content : /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({}, stringContentProps, {
-      className: "".concat(_stylesModule.default.baseContent, " ").concat(theme.stringContent)
-    }), content)
+    content: /*#__PURE__*/_react.default.isValidElement(content) ? content : /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+      className: "".concat(_stylesModule.default.baseContent, " ").concat(stringContentClassName),
+      colorTheme: "light",
+      variant: "xsmall",
+      withMarkdown: true
+    }, stringContentProps), content)
   }), children);
 };
 UTTooltip.propTypes = {
@@ -67,7 +70,6 @@ UTTooltip.propTypes = {
   duration: (0, _propTypes.arrayOf)(_propTypes.number),
   forceArrow: _propTypes.bool,
   hideOnClick: _propTypes.bool,
-  icon: _propTypes.element,
   inertia: _propTypes.bool,
   interactive: _propTypes.bool,
   placement: _propTypes.string,

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

@@ -1,9 +1,11 @@
 @import '../../scss/variables/_colors.scss';
 
 .baseContent {
-  color: $white;
-  font-size: 13px;
   text-align: left;
+
+  & a {
+    color: $white;
+  }
 }
 
 .arrow {

package/dist/components/UTTooltip/theme.js

@@ -4,8 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.retrieveStyle = void 0;
-var retrieveStyle = function retrieveStyle(theme) {
+var retrieveStyle = function retrieveStyle(_ref) {
   var _theme$UTTooltip, _theme$UTTooltip$cont, _theme$UTTooltip2, _theme$UTTooltip2$con, _theme$UTTooltip3, _theme$UTTooltip3$con, _theme$UTTooltip4, _theme$UTTooltip4$con, _theme$UTTooltip5, _theme$UTTooltip5$arr, _theme$UTTooltip6, _theme$UTTooltip6$str, _theme$UTTooltip7, _theme$UTTooltip7$str, _theme$UTTooltip8, _theme$UTTooltip8$str, _theme$UTTooltip9, _theme$UTTooltip9$str;
+  var theme = _ref.theme;
   return {
     container: {
       backgroundColor: theme === null || theme === void 0 ? void 0 : (_theme$UTTooltip = theme.UTTooltip) === null || _theme$UTTooltip === void 0 ? void 0 : (_theme$UTTooltip$cont = _theme$UTTooltip.container) === null || _theme$UTTooltip$cont === void 0 ? void 0 : _theme$UTTooltip$cont.backgroundColor,

package/dist/components/UTWorkflowContainer/components/ActionButton/index.js

@@ -1,6 +1,5 @@
 "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
 });
@@ -13,7 +12,13 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 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; }
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var ActionButton = function ActionButton(_ref) {
   var _button$buttonProps;
   var button = _ref.button,
@@ -24,10 +29,13 @@ var ActionButton = function ActionButton(_ref) {
   return /*#__PURE__*/(0, _react.isValidElement)(button) ? /*#__PURE__*/(0, _react.cloneElement)(button, {
     className: "".concat(button.props.className, " ").concat(isHidden && _stylesModule.default.hiddenButton)
   }) : /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
-    onPress: button.onPress,
-    disabled: button.disabled
+    disabled: button.disabled,
+    hideTextOnResponsive: true,
+    onClick: button.onClick
   }, buttonProps, button.buttonProps, {
-    className: "\n        ".concat(className, "\n        ").concat(isHidden && _stylesModule.default.hiddenButton, "\n        ").concat(button === null || button === void 0 ? void 0 : (_button$buttonProps = button.buttonProps) === null || _button$buttonProps === void 0 ? void 0 : _button$buttonProps.className, "\n      ")
+    classNames: _objectSpread({
+      root: "\n        ".concat(className, "\n        ").concat(isHidden && _stylesModule.default.hiddenButton, "\n        ").concat(button === null || button === void 0 ? void 0 : (_button$buttonProps = button.buttonProps) === null || _button$buttonProps === void 0 ? void 0 : _button$buttonProps.className, "\n      ")
+    }, buttonProps.classNames)
   }), children);
 };
 ActionButton.propTypes = {

package/dist/components/UTWorkflowContainer/index.js

@@ -84,25 +84,26 @@ var UTWorkflowContainer = function UTWorkflowContainer(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
     button: backButton,
     isHidden: currentStep === 1 && !backButton.isVisible || backButton.isHidden,
-    className: "".concat(classes.backButton, " ").concat(_stylesModule.default.backButton, " ").concat(backButton.disabled && classes.backButtonDisabled),
+    className: "".concat(classes.backButton, " ").concat(_stylesModule.default.backButton),
     buttonProps: {
-      text: true
+      colorTheme: 'primary',
+      Icon: (withIcon || smallButtons) && BackIcon,
+      iconPlacement: 'left',
+      variant: 'semitransparent'
     }
-  }, (withIcon || smallButtons) && /*#__PURE__*/_react.default.createElement(BackIcon, {
-    className: "".concat(_stylesModule.default.icon, " ").concat(!smallButtons && _stylesModule.default.iconMarginRight, " ").concat(classes.buttonIcon)
-  }), !smallButtons && (backButton.label || _constants.BACK)), !hideStepCounter && actionsPosition === _constants.ACTIONS_POSITIONS.TOP && stepsCount && (StepCounter ? /*#__PURE__*/_react.default.createElement(StepCounter, null) : /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    primary: true,
+  }, !smallButtons && (backButton.label || _constants.BACK)), !hideStepCounter && actionsPosition === _constants.ACTIONS_POSITIONS.TOP && stepsCount && (StepCounter ? /*#__PURE__*/_react.default.createElement(StepCounter, null) : /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: "".concat(_stylesModule.default.stepInfo, " ").concat(classes.stepCounter)
   }, "".concat(_constants.STEP, " ").concat(visibleStepNumber))), extraActions, /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
     isHidden: nextButton.isHidden,
     button: nextButton,
-    className: "".concat(classes.nextButton, " ").concat(_stylesModule.default.nextButton, " ").concat(nextButton.disabled && classes.nextButtonDisabled),
+    className: "".concat(classes.nextButton, " ").concat(_stylesModule.default.nextButton),
     buttonProps: {
-      outlined: true
+      colorTheme: 'primary',
+      Icon: (withIcon || smallButtons) && NextIcon,
+      iconPlacement: 'right',
+      variant: 'outlined'
     }
-  }, !smallButtons && (nextButton.label || _constants.NEXT), (withIcon || smallButtons) && /*#__PURE__*/_react.default.createElement(NextIcon, {
-    className: "".concat(_stylesModule.default.icon, " ").concat(!smallButtons && _stylesModule.default.iconMarginLeft, " ").concat(classes.buttonIcon)
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  }, !smallButtons && (nextButton.label || _constants.NEXT))), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.workflowContent, " ").concat(classes.content)
   }, (title || subtitle) && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.titles
@@ -111,11 +112,14 @@ var UTWorkflowContainer = function UTWorkflowContainer(_ref) {
   }, TitleIcon && /*#__PURE__*/_react.default.createElement(TitleIcon, {
     className: classes.titleIcon
   }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    large: true,
-    bold: true,
-    className: "".concat(_stylesModule.default.title, " ").concat(classes.title)
+    className: classes.title,
+    variant: "title3",
+    weight: "bold",
+    withMarkdown: true
   }, title)), subtitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: "".concat(_stylesModule.default.subtitle, " ").concat(classes.subtitle)
+    className: classes.subtitle,
+    variant: "subtitle2",
+    withMarkdown: true
   }, subtitle)), children));
 };
 UTWorkflowContainer.propTypes = {

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

@@ -1,5 +1,3 @@
-@import '../../scss/variables/mediaQueries';
-
 .container {
   display: flex;
   flex-direction: column;
@@ -23,44 +21,12 @@
   display: flex;
 }
 
-.subtitle {
-  margin-bottom: 10px;
-}
-
-.icon {
-  height: 20px;
-  width: auto;
-}
-
-.iconMarginLeft {
-  margin-left: 5px;
-}
-
-.iconMarginRight {
-  margin-right: 5px;
-}
-
 .backButton {
   left: 20px;
-  padding-left: 5px;
   position: absolute;
 }
 
 .nextButton {
-  padding-right: 5px;
   position: absolute;
   right: 20px;
 }
-
-.bottomActions {
-  .progress {
-    :first-child {
-      border-radius: 0;
-    }
-  }
-
-  .workflowContent {
-    order: -1;
-    overflow-y: auto;
-  }
-}