@widergy/energy-ui 1.134.2 → 2.0.0

package/dist/components/UTButton/constants.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VARIANTS = exports.SIZES = exports.ICON_PLACEMENTS = exports.DEFAULT_PROPS = exports.COLORS_MAPPER = void 0;
+var VARIANTS = {
+  filled: 'contained',
+  outlined: 'outlined',
+  semitransparent: 'contained',
+  text: 'text',
+  shadow: 'text'
+};
+exports.VARIANTS = VARIANTS;
+var SIZES = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
+};
+exports.SIZES = SIZES;
+var ICON_PLACEMENTS = {
+  left: 'left',
+  right: 'right'
+};
+exports.ICON_PLACEMENTS = ICON_PLACEMENTS;
+var DEFAULT_PROPS = {
+  colorTheme: 'secondary',
+  disabled: false,
+  hideTextOnResponsive: false,
+  iconPlacement: ICON_PLACEMENTS.left,
+  loading: false,
+  size: SIZES.medium,
+  variant: 'filled'
+};
+exports.DEFAULT_PROPS = DEFAULT_PROPS;
+var COLORS_MAPPER = {
+  primary: 'accent',
+  secondary: 'neutral',
+  error: 'error',
+  negative: 'negative'
+};
+exports.COLORS_MAPPER = COLORS_MAPPER;

package/dist/components/UTButton/index.js

@@ -6,100 +6,80 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = require("prop-types");
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+var _propTypes = require("prop-types");
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _classesUtils = require("../../utils/classesUtils");
+var _constants = require("./constants");
 var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _excluded = ["childrenContainer", "circularProgress", "icon", "leftIcon", "rightIcon"];
 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-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); }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-var UTButton = /*#__PURE__*/function (_PureComponent) {
-  _inherits(UTButton, _PureComponent);
-  var _super = _createSuper(UTButton);
-  function UTButton() {
-    _classCallCheck(this, UTButton);
-    return _super.apply(this, arguments);
-  }
-  _createClass(UTButton, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        text = _this$props.text,
-        fab = _this$props.fab,
-        outlined = _this$props.outlined,
-        extendedFab = _this$props.extendedFab,
-        type = _this$props.type,
-        onPress = _this$props.onPress,
-        disabled = _this$props.disabled,
-        loading = _this$props.loading,
-        small = _this$props.small,
-        large = _this$props.large,
-        lowercase = _this$props.lowercase,
-        uppercase = _this$props.uppercase,
-        classes = _this$props.classes,
-        className = _this$props.className,
-        children = _this$props.children,
-        autoFocus = _this$props.autoFocus,
-        style = _this$props.style,
-        secondary = _this$props.secondary,
-        alternative = _this$props.alternative,
-        gray = _this$props.gray;
-      var size = small ? 'small' : large ? 'large' : 'medium';
-      return /*#__PURE__*/_react.default.createElement(_Button.default, {
-        type: type,
-        size: size,
-        autoFocus: autoFocus,
-        style: style,
-        variant: text ? 'text' : fab ? 'fab' : extendedFab ? 'extendedFab' : outlined ? 'outlined' : 'contained',
-        disabled: disabled || loading,
-        onClick: onPress,
-        classes: {
-          root: "".concat(small ? classes.small : large && classes.large, " ").concat(uppercase ? classes.uppercase : lowercase && classes.lowercase, " ").concat(className),
-          label: classes.labelFullWidth,
-          contained: "".concat(classes.base, " ").concat(secondary && classes.secondary, " ").concat(alternative && classes.alternative, " ").concat(gray && classes.gray),
-          text: "".concat(classes.baseText, " ").concat(secondary && classes.secondaryText, " ").concat(alternative && classes.alternativeText, " ").concat(gray && classes.grayText),
-          outlined: "".concat(classes.baseOutlined, " ").concat(secondary && classes.secondaryOutlined, " ").concat(alternative && classes.alternativeOutlined, " ").concat(gray && classes.grayOutlined)
-        }
-      }, children, loading && /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
-        size: 24,
-        className: classes["loading".concat(outlined ? 'Outlined' : text ? 'Text' : '')]
-      }));
-    }
-  }]);
-  return UTButton;
-}(_react.PureComponent);
+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 UTButton = function UTButton(_ref) {
+  var children = _ref.children,
+    theme = _ref.classes,
+    classNames = _ref.classNames,
+    disabled = _ref.disabled,
+    hideTextOnResponsive = _ref.hideTextOnResponsive,
+    Icon = _ref.Icon,
+    iconPlacement = _ref.iconPlacement,
+    loading = _ref.loading,
+    onClick = _ref.onClick,
+    size = _ref.size,
+    style = _ref.style,
+    type = _ref.type,
+    variant = _ref.variant;
+  var classes = (0, _react.useMemo)(function () {
+    return (0, _classesUtils.mergeClasses)(theme, classNames);
+  });
+  var childrenContainer = classes.childrenContainer,
+    circularProgress = classes.circularProgress,
+    icon = classes.icon,
+    leftIcon = classes.leftIcon,
+    rightIcon = classes.rightIcon,
+    materialButtonClasses = _objectWithoutProperties(classes, _excluded);
+  var RenderedChildren = /*#__PURE__*/_react.default.createElement("div", {
+    className: "\n        ".concat(childrenContainer, "\n        ").concat(_stylesModule.default.childrenContainer, "\n        ").concat(hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive, "\n        ").concat(!children && _stylesModule.default.withoutText, "\n      ")
+  }, iconPlacement === _constants.ICON_PLACEMENTS.left && Icon && /*#__PURE__*/_react.default.createElement(Icon, {
+    className: "".concat(icon, " ").concat(leftIcon, " ").concat(_stylesModule.default.icon)
+  }), children && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.text, " ").concat(classes.text)
+  }, children), iconPlacement !== _constants.ICON_PLACEMENTS.left && Icon && /*#__PURE__*/_react.default.createElement(Icon, {
+    className: "".concat(icon, " ").concat(rightIcon, " ").concat(_stylesModule.default.icon)
+  }));
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
+    disabled: disabled || loading,
+    classes: materialButtonClasses,
+    onClick: onClick,
+    size: size,
+    variant: _constants.VARIANTS[variant],
+    type: type,
+    style: style
+  }, RenderedChildren, loading && /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
+    size: 24,
+    className: "".concat(_stylesModule.default.loading, " ").concat(circularProgress)
+  }));
+};
+UTButton.defaultProps = _constants.DEFAULT_PROPS;
 UTButton.propTypes = {
-  text: _propTypes.bool,
-  small: _propTypes.bool,
-  large: _propTypes.bool,
-  outlined: _propTypes.bool,
-  secondary: _propTypes.bool,
-  alternative: _propTypes.bool,
-  gray: _propTypes.bool,
-  fab: _propTypes.bool,
-  extendedFab: _propTypes.bool,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
   disabled: _propTypes.bool,
+  hideTextOnResponsive: _propTypes.bool,
+  Icon: _propTypes.elementType,
+  iconPlacement: _propTypes.string,
   loading: _propTypes.bool,
-  uppercase: _propTypes.bool,
-  lowercase: _propTypes.bool,
-  autoFocus: _propTypes.bool,
+  onClick: _propTypes.func,
+  size: _propTypes.string,
+  // TODO: this "style" prop is for compatibility with the -base project only. Delete it when no longer needed
+  style: _propTypes.object,
   type: _propTypes.string,
-  onPress: _propTypes.func,
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  className: _propTypes.string
+  variant: _propTypes.string
 };
 var _default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTButton);
 exports.default = _default;

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

@@ -0,0 +1,36 @@
+@import '../../scss/variables/mediaQueries';
+
+.hideTextOnResponsive {
+  @media #{$mobile} {
+    .text {
+      display: none;
+    }
+
+    .icon {
+      margin: 0 -4px;
+    }
+  }
+}
+
+.icon {
+  flex-shrink: 0;
+  font-size: 24px;
+  height: 24px;
+  width: 24px;
+}
+
+.withoutText {
+  .icon {
+    margin: 0 -4px;
+  }
+}
+
+.childrenContainer {
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.loading {
+  position: absolute;
+}

package/dist/components/UTButton/theme.js

@@ -3,185 +3,170 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.retrieveStyle = void 0;
-var _seamlessImmutable = require("seamless-immutable");
-var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var retrieveStyle = function retrieveStyle(theme) {
-  return {
-    base: {
-      textTransform: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'base', 'textTransform'], 'none'),
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'base', 'backgroundColor']),
-      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'base', 'borderRadius']),
-      boxShadow: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'base', 'boxShadow']),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'base', 'color']),
-      fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']),
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'base', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'])),
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'base', 'fontWeight']),
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'base', 'padding']),
+exports.variantsColorTheme = exports.retrieveStyle = void 0;
+var _classesUtils = require("../../utils/classesUtils");
+var _shadowUtils = require("../../utils/shadowUtils");
+var _constants = require("./constants");
+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 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 variantsColorTheme = function variantsColorTheme(theme, colorTheme, variant) {
+  var actionColorName = _constants.COLORS_MAPPER[colorTheme] || _constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme];
+  var actionTheme = theme.Palette.actions[actionColorName];
+  var negativeTheme = theme.Palette.actions[_constants.COLORS_MAPPER.negative];
+  var neutralTheme = theme.Palette.actions[_constants.COLORS_MAPPER.secondary];
+  var definition = {
+    filled: {
+      backgroundColor: actionTheme['04'],
+      border: '1px solid transparent',
+      color: colorTheme === _constants.COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
+      fill: colorTheme === _constants.COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
       '&:hover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'base', 'hover', 'backgroundColor']),
-        boxShadow: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'base', 'hover', 'boxShadow'])
+        backgroundColor: actionTheme['03'],
+        boxShadow: (0, _shadowUtils.getShadow)({
+          color: actionTheme['04'],
+          level: 2
+        })
       },
-      '&:disabled': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'disabled', 'backgroundColor']),
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'disabled', 'color']),
-        padding: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'disabled', 'padding'])
-      }
-    },
-    baseText: {
-      textTransform: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseText', 'textTransform'], 'none'),
-      backgroundColor: _colors.default.transparent,
-      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseText', 'borderRadius']),
-      boxShadow: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseText', 'boxShadow']),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseText', 'color']),
-      fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']),
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseText', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'])),
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseText', 'fontWeight']),
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseText', 'padding']),
-      '&:hover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseText', 'hover', 'backgroundColor']),
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseText', 'hover', 'color'])
+      '&:active': {
+        backgroundColor: actionTheme['05'],
+        boxShadow: (0, _shadowUtils.getShadow)({
+          color: actionTheme['04'],
+          level: 2
+        })
       },
-      '&:disabled': {
-        backgroundColor: _colors.default.transparent,
-        borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'disabledText', 'borderColor']),
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'disabledText', 'color']),
-        padding: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'disabledText', 'padding'])
+      disabled: {
+        color: (0, _classesUtils.withImportant)(colorTheme === _constants.COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05']),
+        backgroundColor: (0, _classesUtils.withImportant)(actionTheme['04']),
+        opacity: (0, _classesUtils.withImportant)(0.5)
       }
     },
-    baseOutlined: {
-      textTransform: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseOutlined', 'textTransform'], 'none'),
-      backgroundColor: _colors.default.transparent,
-      border: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseOutlined', 'border']),
-      borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseOutlined', 'borderColor']),
-      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseOutlined', 'borderRadius']),
-      boxShadow: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseOutlined', 'boxShadow']),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseOutlined', 'color']),
-      fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']),
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseOutlined', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'])),
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseOutlined', 'fontWeight']),
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseOutlined', 'padding']),
-      '&:hover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseOutlined', 'hover', 'backgroundColor']),
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'baseOutlined', 'hover', 'color'])
-      },
-      '&:disabled': {
-        backgroundColor: _colors.default.transparent,
-        border: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'disabledOutlined', 'border']),
-        borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'disabledOutlined', 'borderColor']),
-        color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'disabledOutlined', 'color']),
-        padding: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'disabledOutlined', 'padding'])
-      }
-    },
-    secondary: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'secondary', 'backgroundColor']),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'secondary', 'color']),
-      '&:hover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'secondary', 'hover', 'backgroundColor'])
-      },
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'secondary', 'padding'])
-    },
-    secondaryText: {
-      backgroundColor: _colors.default.transparent,
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'secondaryText', 'color']),
+    semitransparent: {
+      backgroundColor: actionTheme['01'],
+      border: '1px solid transparent',
+      color: actionTheme['05'],
+      fill: actionTheme['05'],
       '&:hover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'secondaryText', 'hover', 'backgroundColor'])
+        backgroundColor: actionTheme['02']
       },
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'secondaryText', 'padding'])
-    },
-    secondaryOutlined: {
-      backgroundColor: _colors.default.transparent,
-      border: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'secondaryOutlined', 'border']),
-      borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'secondaryOutlined', 'borderColor']),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'secondaryOutlined', 'color']),
-      '&:hover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'secondaryOutlined', 'hover', 'backgroundColor'])
+      '&:active': {
+        backgroundColor: actionTheme['03']
       },
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'secondaryOutlined', 'padding'])
+      disabled: {
+        color: (0, _classesUtils.withImportant)(actionTheme['05']),
+        opacity: (0, _classesUtils.withImportant)(0.5)
+      }
     },
-    alternative: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'alternative', 'backgroundColor']),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'alternative', 'color']),
+    outlined: {
+      border: "1px solid ".concat(actionTheme['05']),
+      color: actionTheme['05'],
+      fill: actionTheme['05'],
       '&:hover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'alternative', 'hover', 'backgroundColor'])
+        backgroundColor: actionTheme['01']
       },
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'alternative', 'padding'])
-    },
-    alternativeText: {
-      backgroundColor: _colors.default.transparent,
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'alternativeText', 'color']),
-      '&:hover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'alternativeText', 'hover', 'backgroundColor'])
+      '&:active': {
+        backgroundColor: actionTheme['02']
       },
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'alternativeText', 'padding'])
+      disabled: {
+        border: (0, _classesUtils.withImportant)("1px solid ".concat(actionTheme['05'])),
+        color: (0, _classesUtils.withImportant)(actionTheme['05']),
+        opacity: (0, _classesUtils.withImportant)(0.5)
+      }
     },
-    alternativeOutlined: {
-      backgroundColor: _colors.default.transparent,
-      border: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'alternativeOutlined', 'border']),
-      borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'alternativeOutlined', 'borderColor']),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'alternativeOutlined', 'color']),
+    text: {
+      border: '1px solid transparent',
+      color: actionTheme['05'],
+      fill: actionTheme['05'],
       '&:hover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'alternativeOutlined', 'hover', 'backgroundColor'])
+        backgroundColor: actionTheme['01']
       },
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'alternativeOutlined', 'padding'])
-    },
-    gray: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'gray', 'backgroundColor']),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'gray', 'color']),
-      '&:hover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'gray', 'hover', 'backgroundColor'])
+      '&:active': {
+        backgroundColor: actionTheme['02']
       },
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'gray', 'padding'])
+      disabled: {
+        color: (0, _classesUtils.withImportant)(actionTheme['05']),
+        opacity: (0, _classesUtils.withImportant)(0.5)
+      }
     },
-    grayText: {
-      backgroundColor: _colors.default.transparent,
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'grayText', 'color']),
+    shadow: {
+      backgroundColor: colorTheme === _constants.COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
+      boxShadow: (0, _shadowUtils.getShadow)({
+        color: actionTheme['04'],
+        level: 1
+      }),
+      border: '1px solid transparent',
+      color: actionTheme['05'],
+      fill: actionTheme['05'],
       '&:hover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'grayText', 'hover', 'backgroundColor'])
+        backgroundColor: actionTheme['01'],
+        boxShadow: (0, _shadowUtils.getShadow)({
+          color: actionTheme['04'],
+          level: 2
+        })
       },
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'grayText', 'padding'])
-    },
-    grayOutlined: {
-      backgroundColor: _colors.default.transparent,
-      border: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'grayOutlined', 'border']),
-      borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'grayOutlined', 'borderColor']),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'grayOutlined', 'color']),
-      '&:hover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'grayOutlined', 'hover', 'backgroundColor'])
+      '&:active': {
+        backgroundColor: actionTheme['02'],
+        boxShadow: (0, _shadowUtils.getShadow)({
+          color: actionTheme['04'],
+          level: 2
+        })
       },
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'grayOutlined', 'padding'])
-    },
-    small: {
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'small'])
-    },
-    large: {
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'large'])
-    },
-    lowercase: {
-      textTransform: 'lowercase'
-    },
-    uppercase: {
-      textTransform: 'uppercase'
-    },
-    labelFullWidth: {
-      width: '100%'
-    },
-    loading: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'loading', 'color']),
-      position: 'absolute',
-      left: 'calc(50% - 12px)'
-    },
-    loadingText: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'loadingText', 'color'], (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'loading', 'color'])),
-      position: 'absolute',
-      left: 'calc(50% - 12px)'
-    },
-    loadingOutlined: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'loadingOutlined', 'color'], (0, _seamlessImmutable.getIn)(theme, ['UTButton', 'loading', 'color'])),
-      position: 'absolute',
-      left: 'calc(50% - 12px)'
+      disabled: {
+        color: (0, _classesUtils.withImportant)(actionTheme['05']),
+        opacity: (0, _classesUtils.withImportant)(0.5)
+      }
     }
   };
+  return definition[variant] || definition[_constants.DEFAULT_PROPS.variant];
+};
+exports.variantsColorTheme = variantsColorTheme;
+var baseButtonTheme = function baseButtonTheme(theme) {
+  var _theme$UTButton, _theme$UTButton$circu;
+  return {
+    root: {
+      borderRadius: 4,
+      boxShadow: (0, _classesUtils.withImportant)('none'),
+      fontSize: '1rem',
+      fontWeight: '500',
+      lineHeight: '1.375rem',
+      minWidth: 'auto',
+      padding: '8px 12px',
+      textTransform: 'none',
+      transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
+    },
+    sizeLarge: {
+      fontSize: '1rem',
+      fontWeight: '500',
+      padding: '12px 16px'
+    },
+    sizeSmall: {
+      fontSize: '1rem',
+      fontWeight: '500',
+      padding: '4px 8px'
+    },
+    leftIcon: {
+      marginRight: '8px'
+    },
+    rightIcon: {
+      marginLeft: '8px'
+    },
+    circularProgress: {
+      color: ((_theme$UTButton = theme.UTButton) === null || _theme$UTButton === void 0 ? void 0 : (_theme$UTButton$circu = _theme$UTButton.circularProgress) === null || _theme$UTButton$circu === void 0 ? void 0 : _theme$UTButton$circu.color) || '484848'
+    }
+  };
+};
+var retrieveStyle = function retrieveStyle(_ref) {
+  var colorTheme = _ref.colorTheme,
+    variant = _ref.variant,
+    theme = _ref.theme;
+  var baseTheme = baseButtonTheme(theme);
+  var variantTheme = variantsColorTheme(theme, colorTheme, variant);
+  return _objectSpread(_objectSpread({}, baseTheme), {}, {
+    disabled: variantTheme.disabled,
+    root: _objectSpread(_objectSpread({}, baseTheme.root), variantTheme)
+  });
 };
 exports.retrieveStyle = retrieveStyle;

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

package/dist/components/UTCard/components/UTCardFooter/index.js

@@ -21,12 +21,11 @@ var UTCardFooter = function UTCardFooter(_ref) {
   }, footer.map(function (button) {
     return /*#__PURE__*/_react.default.createElement(Button, _extends({
       key: button.name,
-      className: "".concat(_stylesModule.default.button, " ").concat(button.className)
-    }, button), button.disabled ? button.DisabledIcon && /*#__PURE__*/_react.default.createElement(button.DisabledIcon, {
-      className: button.iconClassName
-    }) : button.Icon && /*#__PURE__*/_react.default.createElement(button.Icon, {
-      className: button.iconClassName
-    }), button.name);
+      classNames: {
+        root: "".concat(_stylesModule.default.button, " ").concat(button.className),
+        icon: button.iconClassName
+      }
+    }, button), button.name);
   }));
 };
 UTCardFooter.propTypes = {