@widergy/energy-ui 1.134.2 → 2.0.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [2.0.0](https://github.com/widergy/energy-ui/compare/v1.134.2...v2.0.0) (2023-01-28)
+
+
+### Features
+
+* utbutton revamp ([#248](https://github.com/widergy/energy-ui/issues/248)) ([8760930](https://github.com/widergy/energy-ui/commit/87609301bb873bcae4954c7091562451c5191ad3)), closes [#250](https://github.com/widergy/energy-ui/issues/250)
+
+
+### BREAKING CHANGES
+
+* New components
+
 ## [1.134.2](https://github.com/widergy/energy-ui/compare/v1.134.1...v1.134.2) (2023-01-27)
 
 

package/dist/components/Loading/index.js

@@ -31,8 +31,7 @@ var Loading = function Loading(_ref) {
     size: size || defaultSize,
     thickness: thickness || defaultThickness
   }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: "".concat(_stylesModule.default.text, " ").concat(classes.text, " ").concat(textClassName),
-    medium: true
+    className: "".concat(_stylesModule.default.text, " ").concat(classes.text, " ").concat(textClassName)
   }, text || _constants.DEFAULT_LOADING_TEXT));
 };
 Loading.propTypes = {

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

@@ -10,5 +10,5 @@
 }
 
 .text {
-  margin-top: 15px;
+  margin-top: 15px !important;
 }

package/dist/components/Loading/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 {
     base: {
       color: (0, _seamlessImmutable.getIn)(theme, ['Loading', 'base', 'color'], _colors.default.loadingBase)

package/dist/components/UTAlert/theme.js

@@ -8,8 +8,9 @@ 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$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4;
+  var theme = _ref.theme;
   return {
     error: {
       backgroundColor: ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.error['04']) || _colors.default.notificationError
@@ -38,7 +39,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/UTAttachment/layout.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _DeleteForever = _interopRequireDefault(require("@material-ui/icons/DeleteForever"));
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 var _files = require("@widergy/web-utils/lib/constants/files");
 var _UTFileInput = _interopRequireDefault(require("../UTFileInput"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
 var _Preview = _interopRequireDefault(require("./components/Preview"));
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -47,14 +47,16 @@ var Attachment = function Attachment(_ref) {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.fileContainer
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    withoutMarkdown: true,
-    gray: true,
+    colorTheme: "gray",
+    variant: "small",
     className: _stylesModule.default.name
-  }, name), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+  }, name), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     className: "".concat(_stylesModule.default.removeIconContainer, " ").concat(removeFileClassname),
+    Icon: Icon,
     onClick: onClick,
-    disabled: disabled
-  }, /*#__PURE__*/_react.default.createElement(Icon, null)))) : /*#__PURE__*/_react.default.createElement(_UTFileInput.default, {
+    disabled: disabled,
+    variant: "text"
+  }))) : /*#__PURE__*/_react.default.createElement(_UTFileInput.default, {
     onChange: onChange,
     containerClassname: containerClassname,
     fileType: fieldType,
@@ -70,7 +72,7 @@ var Attachment = function Attachment(_ref) {
   });
 };
 Attachment.propTypes = {
-  name: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.string]),
+  name: _propTypes.string,
   preview: (0, _propTypes.shape)({
     src: _propTypes.string,
     type: _propTypes.string

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

@@ -10,7 +10,6 @@
 }
 
 .name {
-  display: block;
   max-width: 230px;
   overflow: hidden;
   text-overflow: ellipsis;

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

package/dist/components/UTAutocomplete/theme.js

@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.retrieveStyle = exports.retrieveMuiTheme = void 0;
-var _core = require("@material-ui/core");
+var _styles = require("@material-ui/core/styles");
 var _lodash = _interopRequireDefault(require("lodash"));
 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$UTAutocomplete, _theme$UTAutocomplete2, _theme$UTTextInput, _theme$UTAutocomplete3, _theme$UTAutocomplete4, _theme$UTTextInput2, _theme$UTAutocomplete5, _theme$UTAutocomplete6, _theme$UTTextInput3, _theme$UTAutocomplete7, _theme$UTAutocomplete8, _theme$UTAutocomplete9, _theme$UTAutocomplete10, _theme$UTAutocomplete11, _theme$UTAutocomplete12;
+  var theme = _ref.theme;
   return {
     arrowIcon: {
       color: ((_theme$UTAutocomplete = theme.UTAutocomplete) === null || _theme$UTAutocomplete === void 0 ? void 0 : (_theme$UTAutocomplete2 = _theme$UTAutocomplete.arrowIcon) === null || _theme$UTAutocomplete2 === void 0 ? void 0 : _theme$UTAutocomplete2.color) || ((_theme$UTTextInput = theme.UTTextInput) === null || _theme$UTTextInput === void 0 ? void 0 : _theme$UTTextInput.color)
@@ -19,9 +21,9 @@ var retrieveStyle = function retrieveStyle(theme) {
     },
     loadingIcon: {
       color: ((_theme$UTAutocomplete5 = theme.UTAutocomplete) === null || _theme$UTAutocomplete5 === void 0 ? void 0 : (_theme$UTAutocomplete6 = _theme$UTAutocomplete5.loadingIcon) === null || _theme$UTAutocomplete6 === void 0 ? void 0 : _theme$UTAutocomplete6.color) || ((_theme$UTTextInput3 = theme.UTTextInput) === null || _theme$UTTextInput3 === void 0 ? void 0 : _theme$UTTextInput3.color),
-      height: ((_theme$UTAutocomplete7 = theme.UTAutocomplete) === null || _theme$UTAutocomplete7 === void 0 ? void 0 : (_theme$UTAutocomplete8 = _theme$UTAutocomplete7.loadingIcon) === null || _theme$UTAutocomplete8 === void 0 ? void 0 : _theme$UTAutocomplete8.size) || "20px !important",
+      height: (0, _classesUtils.withImportant)(((_theme$UTAutocomplete7 = theme.UTAutocomplete) === null || _theme$UTAutocomplete7 === void 0 ? void 0 : (_theme$UTAutocomplete8 = _theme$UTAutocomplete7.loadingIcon) === null || _theme$UTAutocomplete8 === void 0 ? void 0 : _theme$UTAutocomplete8.height) || "20px"),
       margin: ((_theme$UTAutocomplete9 = theme.UTAutocomplete) === null || _theme$UTAutocomplete9 === void 0 ? void 0 : (_theme$UTAutocomplete10 = _theme$UTAutocomplete9.loadingIcon) === null || _theme$UTAutocomplete10 === void 0 ? void 0 : _theme$UTAutocomplete10.margin) || '0 10px 0 0',
-      width: ((_theme$UTAutocomplete11 = theme.UTAutocomplete) === null || _theme$UTAutocomplete11 === void 0 ? void 0 : (_theme$UTAutocomplete12 = _theme$UTAutocomplete11.loadingIcon) === null || _theme$UTAutocomplete12 === void 0 ? void 0 : _theme$UTAutocomplete12.size) || "20px !important"
+      width: (0, _classesUtils.withImportant)(((_theme$UTAutocomplete11 = theme.UTAutocomplete) === null || _theme$UTAutocomplete11 === void 0 ? void 0 : (_theme$UTAutocomplete12 = _theme$UTAutocomplete11.loadingIcon) === null || _theme$UTAutocomplete12 === void 0 ? void 0 : _theme$UTAutocomplete12.width) || "20px")
     }
   };
 };
@@ -127,7 +129,7 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme, muiTheme) {
           display: ((_theme$UTAutocomplete22 = theme.UTAutocomplete) === null || _theme$UTAutocomplete22 === void 0 ? void 0 : _theme$UTAutocomplete22.display) || 'flex',
           flexShrink: ((_theme$UTAutocomplete23 = theme.UTAutocomplete) === null || _theme$UTAutocomplete23 === void 0 ? void 0 : _theme$UTAutocomplete23.flexShrink) || '0',
           margin: ((_theme$UTAutocomplete24 = theme.UTAutocomplete) === null || _theme$UTAutocomplete24 === void 0 ? void 0 : _theme$UTAutocomplete24.margin) || '16px 0 8px 0',
-          width: ((_theme$UTAutocomplete25 = theme.UTAutocomplete) === null || _theme$UTAutocomplete25 === void 0 ? void 0 : _theme$UTAutocomplete25.width) || '100% !important'
+          width: (0, _classesUtils.withImportant)(((_theme$UTAutocomplete25 = theme.UTAutocomplete) === null || _theme$UTAutocomplete25 === void 0 ? void 0 : _theme$UTAutocomplete25.width) || '100%')
         },
         popper: {
           overflowX: ((_theme$UTAutocomplete26 = theme.UTAutocomplete) === null || _theme$UTAutocomplete26 === void 0 ? void 0 : (_theme$UTAutocomplete27 = _theme$UTAutocomplete26.popper) === null || _theme$UTAutocomplete27 === void 0 ? void 0 : _theme$UTAutocomplete27.overflowX) || 'hidden'
@@ -147,6 +149,6 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme, muiTheme) {
       }
     }
   };
-  return (0, _core.createMuiTheme)(_lodash.default.merge(muiTheme, mui));
+  return (0, _styles.createTheme)(_lodash.default.merge(muiTheme, mui));
 };
 exports.retrieveMuiTheme = retrieveMuiTheme;

package/dist/components/UTAvatar/index.js

@@ -10,31 +10,44 @@ var _propTypes = require("prop-types");
 var _energyUi = require("@widergy/energy-ui");
 var _componentUtils = _interopRequireDefault(require("../../utils/componentUtils"));
 var _constants = require("./constants");
+var _excluded = ["colorTheme"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var UTAvatar = function UTAvatar(_ref) {
   var className = _ref.className,
     manualColors = _ref.manualColors,
+    labelProps = _ref.labelProps,
     palette = _ref.palette,
     userName = _ref.userName;
   var getFirstLetter = _componentUtils.default.getFirstLetter,
     getAvatarColors = _componentUtils.default.getAvatarColors;
   var firstNameLetter = getFirstLetter(userName);
+  var _getAvatarColors = getAvatarColors(userName, palette || _constants.defaultPalette),
+    colorTheme = _getAvatarColors.colorTheme,
+    styles = _objectWithoutProperties(_getAvatarColors, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Avatar.default, {
     className: className,
-    style: manualColors ? {} : getAvatarColors(userName, palette || _constants.defaultPalette)
-  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
-    bold: true,
-    xxxlarge: true,
-    style: manualColors ? {} : getAvatarColors(userName, palette || _constants.defaultPalette)
-  }, firstNameLetter));
+    style: manualColors ? {} : styles
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, _extends({
+    colorTheme: colorTheme,
+    variant: "title2",
+    weight: "semibold"
+  }, labelProps), firstNameLetter));
 };
 UTAvatar.propTypes = {
   className: _propTypes.string,
+  labelProps: (0, _propTypes.shape)({
+    className: _propTypes.string,
+    variant: _propTypes.string,
+    weight: _propTypes.string
+  }),
   manualColors: _propTypes.bool,
-  palette: (0, _propTypes.shape)({
+  palette: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     color: _propTypes.string,
     backgroundColor: _propTypes.string
-  }),
+  })),
   userName: _propTypes.string
 };
 var _default = UTAvatar;

package/dist/components/UTBarChart/components/Legend/index.js

@@ -93,7 +93,8 @@ var Legend = function Legend(_ref) {
       className = reference.className,
       CustomIcon = reference.CustomIcon;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: _stylesModule.default["item".concat(displayAs)]
+      className: _stylesModule.default["item".concat(displayAs)],
+      key: label
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: className
     }, CustomIcon && /*#__PURE__*/_react.default.createElement(CustomIcon, null)), /*#__PURE__*/_react.default.createElement(_.UTLabel, {
@@ -102,26 +103,12 @@ var Legend = function Legend(_ref) {
   };
   var referencesToShow = getReferencesToShow(flatData);
   var hasReferences = !(0, _array.isEmpty)(referencesToShow);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: style
-  }, title && /*#__PURE__*/_react.default.createElement(_.UTLabel, {
-    className: "".concat(_stylesModule.default.title, " ").concat(classes.title)
-  }, title), withButton && /*#__PURE__*/_react.default.createElement(_.UTButton, {
-    className: "".concat(_stylesModule.default.button, " ").concat(classes.showLegendButton),
-    disabled: !hasReferences,
-    onPress: function onPress() {
-      return setShowLegend(true);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_InfoOutlined.default, {
-    className: classes.showLegendIcon
-  }), /*#__PURE__*/_react.default.createElement(_.UTLabel, {
-    className: classes.showLegendLabel
-  }, showReferencesLabel)), /*#__PURE__*/_react.default.createElement(Wrapper, {
+  var wrapperProps = displayAs === _constants.MODAL_KEY ? {
     acceptButton: {
-      text: referencesModalButton || '',
-      onPress: function onPress() {
+      onClick: function onClick() {
         return setShowLegend(false);
-      }
+      },
+      text: referencesModalButton || ''
     },
     isOpen: showLegend,
     onRequestClose: function onRequestClose() {
@@ -129,7 +116,24 @@ var Legend = function Legend(_ref) {
     },
     title: referencesModalTitle,
     withCloseButton: true
-  }, referencesToShow.map(function (row) {
+  } : {};
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, title && /*#__PURE__*/_react.default.createElement(_.UTLabel, {
+    className: "".concat(_stylesModule.default.title, " ").concat(classes.title)
+  }, title), withButton && /*#__PURE__*/_react.default.createElement(_.UTButton, {
+    classNames: {
+      icon: classes.showLegendIcon,
+      root: "".concat(_stylesModule.default.button, " ").concat(classes.showLegendButton)
+    },
+    disabled: !hasReferences,
+    Icon: _InfoOutlined.default,
+    onClick: function onClick() {
+      return setShowLegend(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.UTLabel, {
+    className: classes.showLegendLabel
+  }, showReferencesLabel)), /*#__PURE__*/_react.default.createElement(Wrapper, wrapperProps, referencesToShow.map(function (row) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default["row".concat(displayAs)]
     }, row.map(function (item) {

package/dist/components/UTBarChart/components/Pagination/index.js

@@ -9,20 +9,20 @@ var _ChevronLeft = _interopRequireDefault(require("@material-ui/icons/ChevronLef
 var _ChevronRight = _interopRequireDefault(require("@material-ui/icons/ChevronRight"));
 var _propTypes = require("prop-types");
 var _commonTypes = require("../../../../types/commonTypes");
-var _UTIconButton = _interopRequireDefault(require("../../../UTIconButton"));
+var _UTButton = _interopRequireDefault(require("../../../UTButton"));
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var Pagination = function Pagination(_ref) {
   var _anchor$current, _anchor$current$getBo;
-  var setCurrentPage = _ref.setCurrentPage,
+  var anchor = _ref.anchor,
+    classes = _ref.classes,
     currentPage = _ref.currentPage,
-    totalPages = _ref.totalPages,
-    anchor = _ref.anchor,
-    graphXStart = _ref.graphXStart,
     graphXEnd = _ref.graphXEnd,
+    graphXStart = _ref.graphXStart,
     parentYPosition = _ref.parentYPosition,
-    classes = _ref.classes;
+    setCurrentPage = _ref.setCurrentPage,
+    totalPages = _ref.totalPages;
   var _ref2 = ((_anchor$current = anchor.current) === null || _anchor$current === void 0 ? void 0 : (_anchor$current$getBo = _anchor$current.getBoundingClientRect) === null || _anchor$current$getBo === void 0 ? void 0 : _anchor$current$getBo.call(_anchor$current)) || {},
     _ref2$y = _ref2.y,
     y = _ref2$y === void 0 ? 0 : _ref2$y,
@@ -37,37 +37,43 @@ var Pagination = function Pagination(_ref) {
       height: _constants.BUTTONS_SIZE
     },
     className: _stylesModule.default.container
-  }, /*#__PURE__*/_react.default.createElement(_UTIconButton.default, {
+  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      icon: currentPage ? classes.paginationButton : classes.paginationButtonDisabled,
+      root: _stylesModule.default.button
+    },
     disabled: !currentPage,
+    Icon: _ChevronLeft.default,
     onClick: function onClick() {
       return setCurrentPage(currentPage - 1);
     },
-    className: _stylesModule.default.button
-  }, /*#__PURE__*/_react.default.createElement(_ChevronLeft.default, {
-    className: currentPage ? classes.paginationButton : classes.paginationButtonDisabled
-  })), /*#__PURE__*/_react.default.createElement(_UTIconButton.default, {
+    variant: "text"
+  }), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    className: {
+      icon: currentPage + 1 === totalPages ? classes.paginationButtonDisabled : classes.paginationButton,
+      root: _stylesModule.default.button
+    },
     disabled: currentPage + 1 === totalPages,
+    Icon: _ChevronRight.default,
     onClick: function onClick() {
       return setCurrentPage(currentPage + 1);
     },
-    className: _stylesModule.default.button
-  }, /*#__PURE__*/_react.default.createElement(_ChevronRight.default, {
-    className: currentPage + 1 === totalPages ? classes.paginationButtonDisabled : classes.paginationButton
-  })));
+    variant: "text"
+  }));
 };
 Pagination.propTypes = {
-  setCurrentPage: _propTypes.func,
-  currentPage: _propTypes.number,
-  totalPages: _propTypes.number,
   anchor: (0, _propTypes.shape)({
     current: (0, _propTypes.shape)({
       getBoundingClientRect: _propTypes.func
     })
   }),
-  graphXStart: _propTypes.number,
+  classes: _commonTypes.classesType,
+  currentPage: _propTypes.number,
   graphXEnd: _propTypes.number,
+  graphXStart: _propTypes.number,
   parentYPosition: _propTypes.number,
-  classes: _commonTypes.classesType
+  setCurrentPage: _propTypes.func,
+  totalPages: _propTypes.number
 };
 var _default = Pagination;
 exports.default = _default;

package/dist/components/UTBarChart/components/YAxis/AxisElement/index.js

@@ -33,7 +33,7 @@ AxisElement.propTypes = {
   yAxis: _propTypes.func,
   className: _propTypes.string,
   x: _propTypes.number,
-  value: _propTypes.string,
+  value: _propTypes.number,
   textAnchor: _propTypes.string,
   height: _propTypes.number,
   setRef: _commonTypes.refType

package/dist/components/UTBarChart/components/YAxis/index.js

@@ -66,7 +66,7 @@ YAxis.propTypes = {
   graphYEnd: _propTypes.number,
   graphYStart: _propTypes.number,
   maxValue: _propTypes.number,
-  setRef: _propTypes.func,
+  setRef: _commonTypes.refType,
   textAnchor: _propTypes.string,
   unit: _propTypes.string,
   valueDecorator: _propTypes.func,

package/dist/components/UTBarChart/index.js

@@ -30,6 +30,7 @@ var _excluded = ["data"];
 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 _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; }
@@ -157,16 +158,18 @@ var UTBarChart = function UTBarChart(_ref) {
   var barUnit = units.bar,
     linearUnit = units.linear;
   var Wrapper = pagination ? 'div' : _reactPerfectScrollbar.default;
+  var wrapperProps = pagination ? {} : {
+    suppressScrollX: !!pagination,
+    suppressScrollY: true
+  };
   return !withBarData ? NoDataComponent ? /*#__PURE__*/_react.default.createElement(NoDataComponent, null) : null : /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     className: className
-  }, /*#__PURE__*/_react.default.createElement(Wrapper, {
-    suppressScrollX: !!pagination,
-    suppressScrollY: true,
+  }, /*#__PURE__*/_react.default.createElement(Wrapper, _extends({}, wrapperProps, {
     className: _stylesModule.default.scroll
-  }, /*#__PURE__*/_react.default.createElement("svg", {
+  }), /*#__PURE__*/_react.default.createElement("svg", {
     height: TOTAL_HEIGHT,
     width: TOTAL_WIDTH
   }, gradientGenerator === null || gradientGenerator === void 0 ? void 0 : gradientGenerator(), showGrid && /*#__PURE__*/_react.default.createElement(_Levels.default, {

package/dist/components/UTBarChart/theme.js

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 var _seamlessImmutable = require("seamless-immutable");
-var retrieveStyle = function retrieveStyle(theme) {
+var _classesUtils = require("../../utils/classesUtils");
+var retrieveStyle = function retrieveStyle(_ref) {
+  var _theme$UTBarChart, _theme$UTBarChart$sho, _theme$UTBarChart2, _theme$UTBarChart2$sh, _theme$UTBarChart3, _theme$UTBarChart3$sh, _theme$UTBarChart4, _theme$UTBarChart4$Fo, _theme$UTBarChart5, _theme$UTBarChart5$sh, _theme$UTBarChart6, _theme$UTBarChart6$sh;
+  var theme = _ref.theme;
   return {
     solidLevel: {
       strokeWidth: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'solidLevel', 'strokeWidth'], 1)
@@ -31,8 +34,8 @@ var retrieveStyle = function retrieveStyle(theme) {
       userSelect: 'none'
     },
     showLegendButton: {
-      backgroundColor: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'showLegendButton', 'backgroundColor']), " !important"),
-      padding: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'showLegendButton', 'padding']), " !important"),
+      backgroundColor: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTBarChart = theme.UTBarChart) === null || _theme$UTBarChart === void 0 ? void 0 : (_theme$UTBarChart$sho = _theme$UTBarChart.showLegendButton) === null || _theme$UTBarChart$sho === void 0 ? void 0 : _theme$UTBarChart$sho.backgroundColor),
+      padding: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTBarChart2 = theme.UTBarChart) === null || _theme$UTBarChart2 === void 0 ? void 0 : (_theme$UTBarChart2$sh = _theme$UTBarChart2.showLegendButton) === null || _theme$UTBarChart2$sh === void 0 ? void 0 : _theme$UTBarChart2$sh.padding),
       borderRadius: '0 !important'
     },
     showLegendIcon: {
@@ -40,10 +43,10 @@ var retrieveStyle = function retrieveStyle(theme) {
       marginRight: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'showLegendIcon', 'marginRight'], 10)
     },
     showLegendLabel: {
-      fontSize: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'showLegendLabel', 'fontSize']), " !important"),
-      fontWeight: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'showLegendLabel', 'fontWeight']), " !important"),
-      fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'Fonts', 'fontFamily']),
-      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTBarChart', 'showLegendLabel', 'color']), " !important"),
+      color: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTBarChart3 = theme.UTBarChart) === null || _theme$UTBarChart3 === void 0 ? void 0 : (_theme$UTBarChart3$sh = _theme$UTBarChart3.showLegendLabel) === null || _theme$UTBarChart3$sh === void 0 ? void 0 : _theme$UTBarChart3$sh.color),
+      fontFamily: theme === null || theme === void 0 ? void 0 : (_theme$UTBarChart4 = theme.UTBarChart) === null || _theme$UTBarChart4 === void 0 ? void 0 : (_theme$UTBarChart4$Fo = _theme$UTBarChart4.Fonts) === null || _theme$UTBarChart4$Fo === void 0 ? void 0 : _theme$UTBarChart4$Fo.fontFamily,
+      fontSize: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTBarChart5 = theme.UTBarChart) === null || _theme$UTBarChart5 === void 0 ? void 0 : (_theme$UTBarChart5$sh = _theme$UTBarChart5.showLegendLabel) === null || _theme$UTBarChart5$sh === void 0 ? void 0 : _theme$UTBarChart5$sh.fontSize),
+      fontWeight: (0, _classesUtils.withImportant)(theme === null || theme === void 0 ? void 0 : (_theme$UTBarChart6 = theme.UTBarChart) === null || _theme$UTBarChart6 === void 0 ? void 0 : (_theme$UTBarChart6$sh = _theme$UTBarChart6.showLegendLabel) === null || _theme$UTBarChart6$sh === void 0 ? void 0 : _theme$UTBarChart6$sh.fontWeight),
       userSelect: 'none'
     },
     paginationButton: {

package/dist/components/UTBarChart/types.js

@@ -46,14 +46,14 @@ var levelsType = (0, _propTypes.arrayOf)((0, _propTypes.shape)({
   id: _propTypes.string
 }));
 exports.levelsType = levelsType;
-var referencesType = (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+var referencesType = (0, _propTypes.shape)({
   check: _propTypes.func,
   className: _propTypes.string,
   CustomIcon: _propTypes.elementType,
   id: _propTypes.string,
   label: _propTypes.string,
   orderFunction: _propTypes.func
-}));
+});
 exports.referencesType = referencesType;
 var xAxisDefinitionType = (0, _propTypes.arrayOf)((0, _propTypes.shape)({
   labelBackgroundPadding: _propTypes.number,

package/dist/components/UTBreadcrumbs/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _UTMenu = _interopRequireDefault(require("../UTMenu"));
-var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../UTTouchableWithoutFeedback"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _classesUtils = require("../../utils/classesUtils");
 var _constants = require("./constants");
@@ -122,10 +122,11 @@ var UTBreadcrumbs = function UTBreadcrumbs(_ref) {
     className: _stylesModule.default.breadcrumbs,
     ref: containerRef
   }, content.map(function (_ref3, index) {
-    var route = _ref3.route,
+    var buttonColorTheme = _ref3.buttonColorTheme,
+      itemClassName = _ref3.itemClassName,
       label = _ref3.label,
       menuItems = _ref3.menuItems,
-      itemClassName = _ref3.itemClassName;
+      route = _ref3.route;
     var handleClick = function handleClick(event) {
       if (menuItems) setMenu({
         anchor: event.currentTarget,
@@ -147,11 +148,16 @@ var UTBreadcrumbs = function UTBreadcrumbs(_ref) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.section,
       key: "".concat(route, "-").concat(label)
-    }, /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
-      className: "".concat((!route && !menuItems || disableMenu) && _stylesModule.default.noPointer, " ").concat(classes.item, " ").concat(itemClassName),
-      onClick: handleClick
-    }, "".concat(label)), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-      className: "".concat(_stylesModule.default.noPointer, " ").concat(isLast && _stylesModule.default.hideSeparator, " ").concat(classes.separator)
+    }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+      classNames: {
+        root: "\n                  ".concat((!route && !menuItems || disableMenu) && _stylesModule.default.noPointer, "\n                  ").concat(itemClassName, "\n                ")
+      },
+      colorTheme: buttonColorTheme,
+      onClick: handleClick,
+      size: "small",
+      variant: "text"
+    }, "".concat(label)), !isLast && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      className: "".concat(_stylesModule.default.noPointer, " ").concat(classes.separator)
     }, separator));
   }), !disableMenu && /*#__PURE__*/_react.default.createElement(_UTMenu.default, _extends({
     anchor: menu.anchor,

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

@@ -1,5 +1,3 @@
-@import '../../scss/variables/_mediaQueries.scss';
-
 .breadcrumbs {
   align-items: center;
   display: flex;
@@ -13,10 +11,6 @@
   display: flex;
 }
 
-.hideSeparator {
-  display: none;
-}
-
 .noPointer {
   pointer-events: none;
 }

package/dist/components/UTBreadcrumbs/theme.js

@@ -5,20 +5,9 @@ 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 {
-    item: {
-      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTBreadcrumbs', 'item', 'borderRadius']),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTBreadcrumbs', 'item', 'color']),
-      fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTBreadcrumbs', 'item', 'fontFamily']),
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTBreadcrumbs', 'item', 'fontSize']),
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTBreadcrumbs', 'item', 'fontWeight']),
-      lineHeight: (0, _seamlessImmutable.getIn)(theme, ['UTBreadcrumbs', 'item', 'lineHeight']),
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTBreadcrumbs', 'item', 'padding'], '4px 8px'),
-      '&:hover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTBreadcrumbs', 'item', 'hover', 'backgroundColor'])
-      }
-    },
     separator: {
       color: (0, _seamlessImmutable.getIn)(theme, ['UTBreadcrumbs', 'separator', 'color']),
       fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTBreadcrumbs', 'separator', 'fontFamily']),

package/dist/components/UTButton/README.md

@@ -0,0 +1,35 @@
+# UTButton
+
+### Description
+Basic button component.
+
+### Variants
+These variants were defined by the UX team and are:
+
+- `filled`
+- `outlined`
+- `text`
+- `semitransparent`
+
+All these variants are defined in the component theme.
+
+### Color Themes
+The color themes are defined by the component consumer and will vary accordingly.They define a set of variables (colors and opacities) that then combined with the variant will change how the buttons looks. 
+The components supports an infinite amount of color themes but requieres the consumer to pass at least a `primary` one that works as a default.
+
+### Props
+
+| Name                 | Type                                                  | Default   | Description                                                                    |
+|----------------------|-------------------------------------------------------|-----------|--------------------------------------------------------------------------------|
+| variant              | 'filled' \| 'outlined' \| 'text' \| 'semitransparent' | 'filled'  | The variant to use.                                                            |
+| colorTheme           | string                                                | 'primary' | The color theme to use.                                                        |
+| size                 | 'small' \| 'medium' \| 'large'                        | 'medium'  | The size of the component.                                                     |
+| onClick              | func                                                  |           | Callback fired when the user clicks the component.                             |
+| loading              | bool                                                  | false     | If `true` a spinner is shown over the component.                               |
+| disabled             | bool                                                  | false     | If `true` the button is unclickable.                                           |
+| Icon                 | node                                                  |           | An Icon component that can be displayed within the button.                     |
+| iconPlacement        | 'left' \| 'right'                                     | 'left'    | Indicates where the icon is placed in relation with the contents of the button |
+| showTextOnResponsive | bool                                                  | false     | If `true` and Icon is not `null` the contents of the button are not displayed. |
+| type                 | 'string'                                              |           | HTML type attribute.                                                           |
+| classNames           | object                                                |           | Overrides the default button theme.                                            |
+| children             | node                                                  |           | The component contents.                                                        |