@widergy/energy-ui 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [2.1.0](https://github.com/widergy/energy-ui/compare/v2.0.2...v2.1.0) (2023-02-07)
+
+
+### Features
+
+* utstatus ([#341](https://github.com/widergy/energy-ui/issues/341)) ([0c2663c](https://github.com/widergy/energy-ui/commit/0c2663c7533e5b004b6765bc9ddc61d3959be573))
+
+## [2.0.2](https://github.com/widergy/energy-ui/compare/v2.0.1...v2.0.2) (2023-02-03)
+
+
+### Bug Fixes
+
+* fixed error color on inputs ([43396d2](https://github.com/widergy/energy-ui/commit/43396d283c265612851635ebf06a04b7392404cc))
+* minor change ([d7d52df](https://github.com/widergy/energy-ui/commit/d7d52df9755ee90414d63093ab987594b074b9c2))
+* standarization fixes ([e0699c0](https://github.com/widergy/energy-ui/commit/e0699c03f4a122f211a7d2039fdafd81f178100b))
+
 ## [2.0.1](https://github.com/widergy/energy-ui/compare/v2.0.0...v2.0.1) (2023-02-03)
 
 

package/dist/components/UTAutocomplete/theme.js

@@ -61,6 +61,10 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme, muiTheme) {
           },
           '&:after': {
             borderBottom: ((_theme$UTTextInput14 = theme.UTTextInput) === null || _theme$UTTextInput14 === void 0 ? void 0 : (_theme$UTTextInput14$ = _theme$UTTextInput14.underline) === null || _theme$UTTextInput14$ === void 0 ? void 0 : (_theme$UTTextInput14$2 = _theme$UTTextInput14$.base) === null || _theme$UTTextInput14$2 === void 0 ? void 0 : _theme$UTTextInput14$2.borderBottom) || "2px solid ".concat(_colors.default.primary)
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
           }
         }
       },

package/dist/components/UTButton/index.js

@@ -44,13 +44,13 @@ var UTButton = function UTButton(_ref) {
     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      ")
+    className: "\n        ".concat(childrenContainer, "\n        ").concat(_stylesModule.default.childrenContainer, "\n        ").concat(hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive, "\n      ")
   }, iconPlacement === _constants.ICON_PLACEMENTS.left && Icon && /*#__PURE__*/_react.default.createElement(Icon, {
-    className: "".concat(icon, " ").concat(leftIcon, " ").concat(_stylesModule.default.icon)
+    className: "".concat(icon, " ").concat(leftIcon, " ").concat(children ? _stylesModule.default.icon : _stylesModule.default.iconOnly)
   }), 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)
+    className: "".concat(icon, " ").concat(rightIcon, " ").concat(children ? _stylesModule.default.icon : _stylesModule.default.iconOnly)
   }));
   return /*#__PURE__*/_react.default.createElement(_Button.default, {
     disabled: disabled || loading,

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

@@ -13,16 +13,20 @@
 }
 
 .icon {
+  box-sizing: border-box;
   flex-shrink: 0;
-  font-size: 24px;
-  height: 24px;
-  width: 24px;
+  font-size: 1.25rem;
+  height: 1.25rem;
+  width: 1.25rem;
 }
 
-.withoutText {
-  .icon {
-    margin: 0 -4px;
-  }
+.iconOnly {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  height: 1.5rem;
+  margin: 0 -4px;
+  width: 1.5rem;
 }
 
 .childrenContainer {

package/dist/components/UTCheckList/index.js

@@ -107,7 +107,7 @@ var UTCheckList = function UTCheckList(_ref) {
     onChange: handleCheckAll,
     value: list.length === input.value.length,
     label: header ? headerLabel : additionalInfo && additionalInfo.header || _constants.defaultAdditionalInfoHeader,
-    classes: {
+    classNames: {
       root: !header && classes.selectAllRowRoot,
       checkedIcon: classes.checkedIcon,
       uncheckedIcon: classes.uncheckedIcon
@@ -132,7 +132,7 @@ var UTCheckList = function UTCheckList(_ref) {
         return handleChange(item[valueKey]);
       },
       customRowLabel: CustomRowLabel,
-      classes: {
+      classNames: {
         root: !withCheckRow && classes.customRowRoot,
         checkedIcon: classes.checkedIcon,
         uncheckedIcon: classes.uncheckedIcon,

package/dist/components/UTCuit/theme.js

@@ -34,6 +34,10 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme) {
           },
           '&:after': {
             borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colors.default.primary))
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
           }
         }
       },

package/dist/components/UTDatePicker/theme.js

@@ -171,6 +171,10 @@ var materialTheme = function materialTheme(theme) {
           },
           '&:after': {
             borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTDatePicker', 'standardInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colors.default.primary))
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
           }
         }
       },

package/dist/components/UTExternalLink/constants.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_PROPS = exports.COLORS_MAPPER = void 0;
+var DEFAULT_PROPS = {
+  colorTheme: 'secondary'
+};
+exports.DEFAULT_PROPS = DEFAULT_PROPS;
+var COLORS_MAPPER = {
+  primary: 'accent',
+  secondary: 'neutral',
+  error: 'error',
+  negative: 'negative'
+};
+exports.COLORS_MAPPER = COLORS_MAPPER;

package/dist/components/UTExternalLink/index.js

@@ -6,17 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _theme = require("./theme");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var UTExternalLink = function UTExternalLink(_ref) {
-  var url = _ref.url,
-    children = _ref.children,
+  var children = _ref.children,
+    classes = _ref.classes,
     className = _ref.className,
-    openProps = _ref.openProps;
+    openProps = _ref.openProps,
+    url = _ref.url;
   return /*#__PURE__*/_react.default.createElement("a", {
     href: url,
     target: "_blank",
     rel: "noopener noreferrer",
-    className: className,
+    className: "".concat(classes.root, " ").concat(className),
     onClick: openProps && function (event) {
       event.preventDefault();
       var openUrl = openProps.openUrl,
@@ -30,14 +33,15 @@ var UTExternalLink = function UTExternalLink(_ref) {
   }, children);
 };
 UTExternalLink.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
   className: _propTypes.string,
-  url: _propTypes.string.isRequired,
   openProps: (0, _propTypes.shape)({
     openUrl: _propTypes.string,
     targetName: _propTypes.string,
     options: _propTypes.string,
     replace: _propTypes.string
-  })
+  }),
+  url: _propTypes.string.isRequired
 };
-var _default = UTExternalLink;
+var _default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTExternalLink);
 exports.default = _default;

package/dist/components/UTExternalLink/theme.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.variantsColorTheme = exports.retrieveStyle = void 0;
+var _classesUtils = require("../../utils/classesUtils");
+var _constants = require("./constants");
+var variantsColorTheme = function variantsColorTheme(colorTheme, theme) {
+  var actionColorName = _constants.COLORS_MAPPER[colorTheme] || _constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme];
+  var actionTheme = theme.Palette.actions[actionColorName];
+  return actionTheme['05'];
+};
+exports.variantsColorTheme = variantsColorTheme;
+var retrieveStyle = function retrieveStyle(_ref) {
+  var colorTheme = _ref.colorTheme,
+    theme = _ref.theme;
+  return {
+    root: {
+      color: (0, _classesUtils.withImportant)(variantsColorTheme(colorTheme, theme))
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTLabel/constants.js

@@ -3,11 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WEIGHTS = exports.VARIANTS_SIZES = exports.VARIANTS_LINE_HEIGHT = exports.VARIANTS = exports.MARKDOWN_RENDERERS = exports.DEFAULT_PROPS = exports.COLOR_THEMES = void 0;
+exports.WEIGHTS = exports.VARIANTS_SIZES = exports.VARIANTS_LINE_HEIGHT = exports.VARIANTS = exports.SHADES = exports.MARKDOWN_RENDERERS = exports.DEFAULT_PROPS = exports.COLOR_THEMES = void 0;
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable react/prop-types */
 
+var SHADES = {
+  shade01: '01',
+  shade02: '02',
+  shade03: '03',
+  shade04: '04',
+  shade05: '05'
+};
+exports.SHADES = SHADES;
 var VARIANTS = {
   title1: 'h1',
   title2: 'h2',

package/dist/components/UTLabel/theme.js

@@ -7,26 +7,30 @@ exports.variantsColorTheme = exports.retrieveStyle = exports.linkColor = void 0;
 var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
 var _constants = require("./constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var variantsColorTheme = function variantsColorTheme(theme, colorTheme) {
+var getDefaultColorShade = function getDefaultColorShade(colorTheme) {
+  return colorTheme === _constants.COLOR_THEMES.gray ? _constants.SHADES.shade04 : colorTheme === _constants.COLOR_THEMES.light ? _constants.SHADES.shade01 : _constants.SHADES.shade05;
+};
+var variantsColorTheme = function variantsColorTheme(colorTheme, shade, theme) {
   var colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette[_constants.DEFAULT_PROPS.colorTheme];
-  var colorNumber = colorTheme === _constants.COLOR_THEMES.gray ? '04' : colorTheme === _constants.COLOR_THEMES.light ? '01' : '05';
-  return colorThemeDefinition[colorNumber] || _colors.default.black;
+  var colorShade = Object.values(_constants.SHADES).includes(shade) ? shade : getDefaultColorShade(colorTheme);
+  return colorThemeDefinition[colorShade] || _colors.default.black;
 };
 exports.variantsColorTheme = variantsColorTheme;
 var linkColor = function linkColor(theme, colorTheme) {
-  var color = colorTheme === _constants.COLOR_THEMES.light ? theme.Palette.actions.negative['05'] : colorTheme === _constants.COLOR_THEMES.error ? theme.Palette.actions.error['05'] : theme.Palette.actions.neutral['05'];
+  var color = colorTheme === _constants.COLOR_THEMES.light ? theme.Palette.actions.negative[_constants.SHADES.shade05] : colorTheme === _constants.COLOR_THEMES.error ? theme.Palette.actions.error[_constants.SHADES.shade05] : theme.Palette.actions.neutral[_constants.SHADES.shade05];
   return color;
 };
 exports.linkColor = linkColor;
 var retrieveStyle = function retrieveStyle(_ref) {
   var _theme$Fonts;
   var colorTheme = _ref.colorTheme,
+    shade = _ref.shade,
     theme = _ref.theme,
     variant = _ref.variant,
     weight = _ref.weight;
   return {
     root: {
-      color: variantsColorTheme(theme, colorTheme),
+      color: variantsColorTheme(colorTheme, shade, theme),
       fontFamily: theme === null || theme === void 0 ? void 0 : (_theme$Fonts = theme.Fonts) === null || _theme$Fonts === void 0 ? void 0 : _theme$Fonts.fontFamily,
       fontSize: _constants.VARIANTS_SIZES[variant] || _constants.VARIANTS_SIZES[_constants.DEFAULT_PROPS.variant],
       fontWeight: _constants.WEIGHTS[weight] || _constants.WEIGHTS[_constants.DEFAULT_PROPS.weight],

package/dist/components/UTPhoneInput/theme.js

@@ -103,6 +103,10 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme) {
           },
           '&:after': {
             borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colors.default.primary))
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
           }
         }
       },

package/dist/components/UTSelect/theme.js

@@ -122,6 +122,10 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme, muiTheme) {
           },
           '&:after': {
             borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colors.default.inputPrimary))
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
           }
         }
       },

package/dist/components/UTStatus/constants.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TYPES = exports.SIZES = exports.DEFAULT_PROPS = exports.COLOR_THEMES = void 0;
+var SIZES = {
+  medium: 'small',
+  large: 'body'
+};
+exports.SIZES = SIZES;
+var COLOR_THEMES = {
+  error: 'error',
+  information: 'information',
+  success: 'success',
+  unassigned: 'unassigned',
+  warning: 'warning'
+};
+exports.COLOR_THEMES = COLOR_THEMES;
+var TYPES = {
+  default: 'default',
+  light: 'light',
+  negative: 'negative'
+};
+exports.TYPES = TYPES;
+var DEFAULT_PROPS = {
+  colorTheme: 'success',
+  size: 'medium',
+  type: 'default'
+};
+exports.DEFAULT_PROPS = DEFAULT_PROPS;

package/dist/components/UTStatus/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _UTSkeleton = _interopRequireDefault(require("../UTSkeleton"));
+var _theme = require("./theme");
+var _constants = require("./constants");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable react/no-children-prop */
+
+var UTStatus = function UTStatus(_ref) {
+  var children = _ref.children,
+    classes = _ref.classes,
+    className = _ref.className,
+    colorTheme = _ref.colorTheme,
+    Icon = _ref.Icon,
+    size = _ref.size,
+    title = _ref.title,
+    type = _ref.type;
+  return children == null && !Icon ? null : /*#__PURE__*/_react.default.createElement(_UTSkeleton.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.root, " ").concat(className),
+    title: title
+  }, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
+    className: classes.icon
+  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: classes.label,
+    variant: _constants.SIZES[size] || _constants.SIZES[_constants.DEFAULT_PROPS.size],
+    colorTheme: (0, _theme.getLabelTheme)((0, _theme.validateProps)({
+      colorTheme: colorTheme,
+      type: type
+    })),
+    weight: "medium"
+  }, children)));
+};
+UTStatus.defaultProps = _constants.DEFAULT_PROPS;
+UTStatus.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  className: _propTypes.string,
+  colorTheme: _propTypes.string,
+  Icon: _propTypes.elementType,
+  size: _propTypes.string,
+  title: _propTypes.string,
+  type: _propTypes.string
+};
+var _default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTStatus);
+exports.default = _default;

package/dist/components/UTStatus/theme.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateProps = exports.retrieveStyle = exports.getLabelTheme = void 0;
+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 getBackgroundColor = function getBackgroundColor(_ref) {
+  var theme = _ref.theme,
+    type = _ref.type,
+    colorTheme = _ref.colorTheme;
+  return colorTheme !== _constants.COLOR_THEMES.unassigned ? theme.Palette[colorTheme][type === _constants.TYPES.negative ? '04' : '01'] : type === _constants.TYPES.negative ? theme.Palette.gray['04'] : theme.Palette.light['04'];
+};
+var getIconFill = function getIconFill(_ref2) {
+  var _TYPES$default$TYPES$;
+  var theme = _ref2.theme,
+    type = _ref2.type,
+    colorTheme = _ref2.colorTheme;
+  return (_TYPES$default$TYPES$ = {}, _defineProperty(_TYPES$default$TYPES$, _constants.TYPES.default, theme.Palette.dark['05']), _defineProperty(_TYPES$default$TYPES$, _constants.TYPES.light, theme.Palette[colorTheme !== _constants.COLOR_THEMES.unassigned ? colorTheme : 'gray']['05']), _defineProperty(_TYPES$default$TYPES$, _constants.TYPES.negative, theme.Palette.light['01']), _TYPES$default$TYPES$)[type];
+};
+var validateProps = function validateProps(_ref3) {
+  var colorTheme = _ref3.colorTheme,
+    type = _ref3.type;
+  return {
+    type: _constants.TYPES[type] || _constants.TYPES[_constants.DEFAULT_PROPS.type],
+    colorTheme: _constants.COLOR_THEMES[colorTheme] || _constants.COLOR_THEMES[_constants.DEFAULT_PROPS.colorTheme]
+  };
+};
+exports.validateProps = validateProps;
+var retrieveStyle = function retrieveStyle(_ref4) {
+  var colorTheme = _ref4.colorTheme,
+    theme = _ref4.theme,
+    Icon = _ref4.Icon,
+    type = _ref4.type,
+    uppercase = _ref4.uppercase;
+  return {
+    root: {
+      alignItems: 'center',
+      backgroundColor: getBackgroundColor(_objectSpread({
+        theme: theme
+      }, validateProps({
+        colorTheme: colorTheme,
+        type: type
+      }))),
+      borderRadius: '4px',
+      display: 'flex',
+      height: 'fit-content',
+      padding: '4px 8px',
+      width: 'fit-content'
+    },
+    label: _objectSpread(_objectSpread({}, uppercase ? {
+      textTransform: 'uppercase'
+    } : {}), Icon ? {
+      marginLeft: '8px !important'
+    } : {}),
+    icon: {
+      height: '1.25rem',
+      width: '1.25rem',
+      '& path': {
+        fill: getIconFill(_objectSpread({
+          theme: theme
+        }, validateProps({
+          colorTheme: colorTheme,
+          type: type
+        })))
+      }
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;
+var getLabelTheme = function getLabelTheme(_ref5) {
+  var _TYPES$default$TYPES$2;
+  var type = _ref5.type,
+    colorTheme = _ref5.colorTheme;
+  return (_TYPES$default$TYPES$2 = {}, _defineProperty(_TYPES$default$TYPES$2, _constants.TYPES.default, 'dark'), _defineProperty(_TYPES$default$TYPES$2, _constants.TYPES.light, colorTheme !== _constants.COLOR_THEMES.unassigned ? colorTheme : 'gray'), _defineProperty(_TYPES$default$TYPES$2, _constants.TYPES.negative, 'light'), _TYPES$default$TYPES$2)[type];
+};
+exports.getLabelTheme = getLabelTheme;

package/dist/components/UTTextInput/theme.js

@@ -95,6 +95,10 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme, muiTheme) {
           },
           '&:after': {
             borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colors.default.primary))
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
           }
         }
       },

package/dist/index.js

@@ -243,6 +243,12 @@ Object.defineProperty(exports, "UTSkeleton", {
     return _UTSkeleton.default;
   }
 });
+Object.defineProperty(exports, "UTStatus", {
+  enumerable: true,
+  get: function get() {
+    return _UTStatus.default;
+  }
+});
 Object.defineProperty(exports, "UTSwitch", {
   enumerable: true,
   get: function get() {
@@ -327,58 +333,59 @@ Object.defineProperty(exports, "componentUtils", {
     return _componentUtils.default;
   }
 });
-var _UTAlert = _interopRequireDefault(require("./components/UTAlert"));
-var _UTAvatar = _interopRequireDefault(require("./components/UTAvatar"));
 var _AlertHandler = _interopRequireDefault(require("./components/UTAlert/AlertHandler"));
+var _componentUtils = _interopRequireDefault(require("./utils/componentUtils"));
+var _EnergyThemeProvider = _interopRequireDefault(require("./components/EnergyThemeProvider"));
+var _UTAlert = _interopRequireDefault(require("./components/UTAlert"));
+var _UTAttachment = _interopRequireDefault(require("./components/UTAttachment"));
 var _UTAutocomplete = _interopRequireDefault(require("./components/UTAutocomplete"));
+var _UTAvatar = _interopRequireDefault(require("./components/UTAvatar"));
+var _UTBarChart = _interopRequireDefault(require("./components/UTBarChart"));
+var _UTBreadcrumbs = _interopRequireDefault(require("./components/UTBreadcrumbs"));
 var _UTButton = _interopRequireDefault(require("./components/UTButton"));
 var _UTCaptcha = _interopRequireDefault(require("./components/UTCaptcha"));
 var _UTCard = _interopRequireDefault(require("./components/UTCard"));
+var _UTCarousel = _interopRequireDefault(require("./components/UTCarousel"));
+var _UTCBUInput = _interopRequireDefault(require("./components/UTCBUInput"));
+var _UTCheckbox = _interopRequireDefault(require("./components/UTCheckbox"));
+var _UTCheckList = _interopRequireDefault(require("./components/UTCheckList"));
+var _UTConsumptionBar = _interopRequireDefault(require("./components/UTConsumptionBar"));
 var _UTCuit = _interopRequireDefault(require("./components/UTCuit"));
+var _UTDatePicker = _interopRequireDefault(require("./components/UTDatePicker"));
+var _UTDialog = _interopRequireDefault(require("./components/UTDialog"));
+var _UTDotMenu = _interopRequireDefault(require("./components/UTDotMenu"));
+var _UTEmojiPicker = _interopRequireDefault(require("./components/UTEmojiPicker"));
+var _UTExternalLink = _interopRequireDefault(require("./components/UTExternalLink"));
+var _UTFileInput = _interopRequireDefault(require("./components/UTFileInput"));
 var _UTIconButton = _interopRequireDefault(require("./components/UTIconButton"));
 var _UTImageRadio = _interopRequireDefault(require("./components/UTImageRadio"));
-var _UTDotMenu = _interopRequireDefault(require("./components/UTDotMenu"));
 var _UTLabel = _interopRequireDefault(require("./components/UTLabel"));
+var _UTList = _interopRequireDefault(require("./components/UTList"));
 var _UTLoading = _interopRequireDefault(require("./components/UTLoading"));
-var _UTSkeleton = _interopRequireDefault(require("./components/UTSkeleton"));
+var _UTMap = _interopRequireDefault(require("./components/UTMap"));
+var _UTMenu = _interopRequireDefault(require("./components/UTMenu"));
+var _UTPanel = _interopRequireDefault(require("./components/UTPanel"));
+var _UTPasswordField = _interopRequireDefault(require("./components/UTPasswordField"));
+var _UTPhoneInput = _interopRequireDefault(require("./components/UTPhoneInput"));
+var _UTPieChart = _interopRequireDefault(require("./components/UTPieChart"));
+var _UTProgressBar = _interopRequireDefault(require("./components/UTProgressBar"));
 var _UTRadioGroup = _interopRequireDefault(require("./components/UTRadioGroup"));
+var _UTRating = _interopRequireDefault(require("./components/UTRating"));
 var _UTSelect = _interopRequireDefault(require("./components/UTSelect"));
-var _UTMap = _interopRequireDefault(require("./components/UTMap"));
-var _UTVirtualizedList = _interopRequireDefault(require("./components/UTVirtualizedList"));
-var _UTBarChart = _interopRequireDefault(require("./components/UTBarChart"));
-var _UTTouchableWithoutFeedback = _interopRequireDefault(require("./components/UTTouchableWithoutFeedback"));
-var _EnergyThemeProvider = _interopRequireDefault(require("./components/EnergyThemeProvider"));
+var _UTSidebar = _interopRequireDefault(require("./components/UTSidebar"));
+var _UTSkeleton = _interopRequireDefault(require("./components/UTSkeleton"));
+var _UTStatus = _interopRequireDefault(require("./components/UTStatus"));
+var _UTSwitch = _interopRequireDefault(require("./components/UTSwitch"));
+var _UTTable = _interopRequireDefault(require("./components/UTTable"));
+var _UTTabs = _interopRequireDefault(require("./components/UTTabs"));
+var _UTTextArea = _interopRequireDefault(require("./components/UTTextArea"));
+var _UTTextInput = _interopRequireDefault(require("./components/UTTextInput"));
 var _UTThirdPartyCookieChecker = _interopRequireDefault(require("./components/UTThirdPartyCookieChecker"));
 var _UTToggle = _interopRequireDefault(require("./components/UTToggle"));
-var _UTList = _interopRequireDefault(require("./components/UTList"));
-var _UTFileInput = _interopRequireDefault(require("./components/UTFileInput"));
-var _WithTouch = _interopRequireDefault(require("./components/WithTouch"));
-var _UTCBUInput = _interopRequireDefault(require("./components/UTCBUInput"));
-var _UTTextInput = _interopRequireDefault(require("./components/UTTextInput"));
-var _UTAttachment = _interopRequireDefault(require("./components/UTAttachment"));
 var _UTTooltip = _interopRequireDefault(require("./components/UTTooltip"));
-var _UTPhoneInput = _interopRequireDefault(require("./components/UTPhoneInput"));
-var _UTExternalLink = _interopRequireDefault(require("./components/UTExternalLink"));
-var _UTCarousel = _interopRequireDefault(require("./components/UTCarousel"));
-var _UTCheckList = _interopRequireDefault(require("./components/UTCheckList"));
-var _UTCheckbox = _interopRequireDefault(require("./components/UTCheckbox"));
-var _WithLoading = _interopRequireDefault(require("./components/WithLoading"));
-var _UTTextArea = _interopRequireDefault(require("./components/UTTextArea"));
-var _UTRating = _interopRequireDefault(require("./components/UTRating"));
-var _UTPanel = _interopRequireDefault(require("./components/UTPanel"));
+var _UTTouchableWithoutFeedback = _interopRequireDefault(require("./components/UTTouchableWithoutFeedback"));
+var _UTVirtualizedList = _interopRequireDefault(require("./components/UTVirtualizedList"));
 var _UTWorkflowContainer = _interopRequireDefault(require("./components/UTWorkflowContainer"));
-var _UTDialog = _interopRequireDefault(require("./components/UTDialog"));
-var _UTTabs = _interopRequireDefault(require("./components/UTTabs"));
-var _UTMenu = _interopRequireDefault(require("./components/UTMenu"));
-var _UTTable = _interopRequireDefault(require("./components/UTTable"));
-var _UTProgressBar = _interopRequireDefault(require("./components/UTProgressBar"));
-var _UTDatePicker = _interopRequireDefault(require("./components/UTDatePicker"));
-var _UTSidebar = _interopRequireDefault(require("./components/UTSidebar"));
-var _UTSwitch = _interopRequireDefault(require("./components/UTSwitch"));
-var _UTPasswordField = _interopRequireDefault(require("./components/UTPasswordField"));
-var _UTPieChart = _interopRequireDefault(require("./components/UTPieChart"));
-var _UTEmojiPicker = _interopRequireDefault(require("./components/UTEmojiPicker"));
-var _UTBreadcrumbs = _interopRequireDefault(require("./components/UTBreadcrumbs"));
-var _UTConsumptionBar = _interopRequireDefault(require("./components/UTConsumptionBar"));
-var _componentUtils = _interopRequireDefault(require("./utils/componentUtils"));
+var _WithLoading = _interopRequireDefault(require("./components/WithLoading"));
+var _WithTouch = _interopRequireDefault(require("./components/WithTouch"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",