@widergy/energy-ui 1.136.0 → 1.136.2

package/dist/components/UTTabs/theme.js

@@ -7,120 +7,118 @@ exports.retrieveStyle = void 0;
 var _seamlessImmutable = require("seamless-immutable");
 var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var retrieveStyle = function retrieveStyle(theme) {
-  return {
-    baseTabsRoot: {
-      border: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabsRoot', 'border'], 0),
-      minHeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabsRoot', 'minHeight'], 0),
-      minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabsRoot', 'minWidth'], 0)
-    },
-    secondaryTabsRoot: {
-      border: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabsRoot', 'border'], 0),
-      minHeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabsRoot', 'minHeight'], 0),
-      minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabsRoot', 'minWidth'], 0)
-    },
-    baseTabRoot: {
-      flex: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'flex']),
-      fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'fontFamily']),
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'fontSize'], '12px'),
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'fontWeight'], 'normal'),
-      textTransform: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'textTransform'], 'none'),
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'padding']),
-      maxHeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'maxHeight']),
-      minHeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'minHeight']),
-      maxWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'maxWidth']),
-      minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'minWidth']),
-      width: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'width']),
-      height: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'height']),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'color'], _colorsModule.default.black),
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'backgroundColor'], 'transparent'),
-      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'borderRadius'], 0),
-      opacity: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'opacity']),
-      transition: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'transition'], "all 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"),
-      willChange: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'willChange']),
-      '&:hover:not($baseSelected)': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', '&:hover:not($baseSelected)', 'backgroundColor'], 'transparent'),
-        transition: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', '&:hover:not($baseSelected)', 'transition'], 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;')
-      }
-    },
-    secondaryTabRoot: {
-      flex: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'flex']),
-      fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'fontFamily']),
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'fontSize'], '12px'),
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'fontWeight'], 'normal'),
-      textTransform: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'textTransform'], 'none'),
-      padding: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'padding']),
-      maxHeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'maxHeight']),
-      minHeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'minHeight']),
-      maxWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'maxWidth']),
-      minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'minWidth']),
-      width: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'width']),
-      height: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'height']),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'color'], _colorsModule.default.black),
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'backgroundColor'], 'transparent'),
-      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'borderRadius'], 0),
-      opacity: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'opacity']),
-      transition: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'transition'], "all 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"),
-      willChange: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'willChange']),
-      '&:hover:not($secondarySelected)': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', '&:hover:not($secondarySelected)', 'backgroundColor'], 'transparent'),
-        transition: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', '&:hover:not($secondarySelected)', 'transition'], 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;')
-      }
-    },
-    baseSelected: {
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseSelected', 'fontWeight'], 'normal'),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseSelected', 'color'], _colorsModule.default.black),
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseSelected', 'backgroundColor'], 'transparent')
-    },
-    secondarySelected: {
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondarySelected', 'fontWeight'], 'normal'),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondarySelected', 'color'], _colorsModule.default.black),
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondarySelected', 'backgroundColor'], 'transparent')
-    },
-    baseIndicator: {
-      flex: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', 'flex']),
-      height: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', 'height'], 3),
-      bottom: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', 'bottom'], 'initial'),
-      display: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', 'display'], 'flex'),
-      justifyContent: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', 'justifyContent'], 'center'),
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', 'backgroundColor'], 'transparent'),
-      '& > div': {
-        borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', '& > div', 'borderRadius'], 0),
-        maxWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', '& > div', 'maxWidth'], '100%'),
-        width: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', '& > div', 'width'], '100%'),
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', '& > div', 'backgroundColor'], _colorsModule.default.black)
-      },
-      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', 'borderRadius'])
-    },
-    secondaryIndicator: {
-      flex: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', 'flex']),
-      height: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', 'height'], 3),
-      bottom: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', 'bottom'], 'initial'),
-      display: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', 'display'], 'flex'),
-      justifyContent: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', 'justifyContent'], 'center'),
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', 'backgroundColor'], 'transparent'),
-      '& > div': {
-        borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'borderRadius'], 0),
-        maxWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'maxWidth'], '100%'),
-        width: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'width'], '100%'),
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'backgroundColor'], _colorsModule.default.black)
-      },
-      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', 'borderRadius'])
-    },
-    baseTextColorPrimary: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTextColorPrimary', 'color'])
-    },
-    secondaryTextColorPrimary: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTextColorPrimary', 'color'])
+const retrieveStyle = theme => ({
+  baseTabsRoot: {
+    border: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabsRoot', 'border'], 0),
+    minHeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabsRoot', 'minHeight'], 0),
+    minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabsRoot', 'minWidth'], 0)
+  },
+  secondaryTabsRoot: {
+    border: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabsRoot', 'border'], 0),
+    minHeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabsRoot', 'minHeight'], 0),
+    minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabsRoot', 'minWidth'], 0)
+  },
+  baseTabRoot: {
+    flex: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'flex']),
+    fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'fontFamily']),
+    fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'fontSize'], '12px'),
+    fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'fontWeight'], 'normal'),
+    textTransform: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'textTransform'], 'none'),
+    padding: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'padding']),
+    maxHeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'maxHeight']),
+    minHeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'minHeight']),
+    maxWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'maxWidth']),
+    minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'minWidth']),
+    width: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'width']),
+    height: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'height']),
+    color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'color'], _colorsModule.default.black),
+    backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'backgroundColor'], 'transparent'),
+    borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'borderRadius'], 0),
+    opacity: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'opacity']),
+    transition: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'transition'], "all 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"),
+    willChange: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'willChange']),
+    '&:hover:not($baseSelected)': {
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', '&:hover:not($baseSelected)', 'backgroundColor'], 'transparent'),
+      transition: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', '&:hover:not($baseSelected)', 'transition'], 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;')
+    }
+  },
+  secondaryTabRoot: {
+    flex: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'flex']),
+    fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'fontFamily']),
+    fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'fontSize'], '12px'),
+    fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'fontWeight'], 'normal'),
+    textTransform: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'textTransform'], 'none'),
+    padding: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'padding']),
+    maxHeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'maxHeight']),
+    minHeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'minHeight']),
+    maxWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'maxWidth']),
+    minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'minWidth']),
+    width: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'width']),
+    height: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'height']),
+    color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'color'], _colorsModule.default.black),
+    backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'backgroundColor'], 'transparent'),
+    borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'borderRadius'], 0),
+    opacity: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'opacity']),
+    transition: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'transition'], "all 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"),
+    willChange: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'willChange']),
+    '&:hover:not($secondarySelected)': {
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', '&:hover:not($secondarySelected)', 'backgroundColor'], 'transparent'),
+      transition: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', '&:hover:not($secondarySelected)', 'transition'], 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;')
+    }
+  },
+  baseSelected: {
+    fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseSelected', 'fontWeight'], 'normal'),
+    color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseSelected', 'color'], _colorsModule.default.black),
+    backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseSelected', 'backgroundColor'], 'transparent')
+  },
+  secondarySelected: {
+    fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondarySelected', 'fontWeight'], 'normal'),
+    color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondarySelected', 'color'], _colorsModule.default.black),
+    backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondarySelected', 'backgroundColor'], 'transparent')
+  },
+  baseIndicator: {
+    flex: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', 'flex']),
+    height: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', 'height'], 3),
+    bottom: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', 'bottom'], 'initial'),
+    display: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', 'display'], 'flex'),
+    justifyContent: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', 'justifyContent'], 'center'),
+    backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', 'backgroundColor'], 'transparent'),
+    '& > div': {
+      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', '& > div', 'borderRadius'], 0),
+      maxWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', '& > div', 'maxWidth'], '100%'),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', '& > div', 'width'], '100%'),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', '& > div', 'backgroundColor'], _colorsModule.default.black)
     },
-    baseLabel: {
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseLabel', 'fontSize']),
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseLabel', 'fontWeight'])
+    borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', 'borderRadius'])
+  },
+  secondaryIndicator: {
+    flex: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', 'flex']),
+    height: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', 'height'], 3),
+    bottom: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', 'bottom'], 'initial'),
+    display: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', 'display'], 'flex'),
+    justifyContent: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', 'justifyContent'], 'center'),
+    backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', 'backgroundColor'], 'transparent'),
+    '& > div': {
+      borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'borderRadius'], 0),
+      maxWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'maxWidth'], '100%'),
+      width: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'width'], '100%'),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'backgroundColor'], _colorsModule.default.black)
     },
-    secondaryLabel: {
-      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryLabel', 'fontSize']),
-      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryLabel', 'fontWeight'])
-    }
-  };
-};
+    borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', 'borderRadius'])
+  },
+  baseTextColorPrimary: {
+    color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTextColorPrimary', 'color'])
+  },
+  secondaryTextColorPrimary: {
+    color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTextColorPrimary', 'color'])
+  },
+  baseLabel: {
+    fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseLabel', 'fontSize']),
+    fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseLabel', 'fontWeight'])
+  },
+  secondaryLabel: {
+    fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryLabel', 'fontSize']),
+    fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryLabel', 'fontWeight'])
+  }
+});
 exports.retrieveStyle = retrieveStyle;

package/dist/components/UTTabs/utils.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveClassNamesFromVariants = void 0;
 var _constants = require("./constants");
-var retrieveClassNamesFromVariants = function retrieveClassNamesFromVariants(variant, classes) {
+const retrieveClassNamesFromVariants = (variant, classes) => {
   switch (variant) {
     case _constants.variants.SECONDARY:
       return {

package/dist/components/UTTextArea/constants.js

@@ -3,11 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tippyProps = void 0;
-var tippyProps = {
-  appendTo: function appendTo() {
-    return document.body;
-  },
+exports.tippyProps = exports.limitWarningFactor = void 0;
+const tippyProps = exports.tippyProps = {
+  appendTo: () => document.body,
   interactive: false
 };
-exports.tippyProps = tippyProps;
+const limitWarningFactor = exports.limitWarningFactor = 0.9;

package/dist/components/UTTextArea/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
+var _normalize = require("@widergy/web-utils/lib/normalize");
 var _HelpOutline = _interopRequireDefault(require("@material-ui/icons/HelpOutline"));
 var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
@@ -16,26 +17,37 @@ var _theme = require("./theme");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 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); }
-var UTTextArea = function UTTextArea(_ref) {
-  var classes = _ref.classes,
-    _ref$classNames = _ref.classNames,
-    classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-    disabled = _ref.disabled,
-    HelpIcon = _ref.HelpIcon,
-    _ref$inputProps = _ref.inputProps,
-    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
-    onBlur = _ref.onBlur,
-    onChange = _ref.onChange,
-    onFocus = _ref.onFocus,
-    placeholder = _ref.placeholder,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? '' : _ref$title,
-    tooltip = _ref.tooltip,
-    value = _ref.value;
-  var container = classNames.container,
-    icon = classNames.icon,
-    textarea = classNames.textarea,
-    label = classNames.label;
+const UTTextArea = _ref => {
+  let {
+    classes,
+    classNames = {},
+    field,
+    disabled,
+    HelpIcon,
+    inputProps = {},
+    onBlur,
+    onChange,
+    onFocus,
+    placeholder,
+    title = '',
+    tooltip,
+    value
+  } = _ref;
+  const {
+    container,
+    icon,
+    textarea,
+    label
+  } = classNames;
+  const {
+    character_count_limit: characterCountLimit
+  } = (field === null || field === void 0 ? void 0 : field.configuration) || {};
+  const handleOnChange = _ref2 => {
+    let {
+      target
+    } = _ref2;
+    return onChange(characterCountLimit ? (0, _normalize.maxLength)(characterCountLimit)(target.value) : target.value);
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: container
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -43,16 +55,20 @@ var UTTextArea = function UTTextArea(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: "".concat(label, " ").concat(_stylesModule.default.label)
   }, title)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.content
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.textAreaContainer
   }, /*#__PURE__*/_react.default.createElement("textarea", _extends({}, inputProps, {
     className: "".concat(_stylesModule.default.textarea, " ").concat(textarea, " ").concat(classes.textarea),
-    onChange: onChange,
+    onChange: handleOnChange,
     onBlur: onBlur,
     onFocus: onFocus,
     value: value,
     disabled: disabled,
     placeholder: placeholder
-  })), tooltip && /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+  })), characterCountLimit && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: "\n                ".concat(_stylesModule.default.characterCount, "\n                ").concat(value.length === characterCountLimit ? _stylesModule.default.characterLimitReached : value.length >= characterCountLimit * _constants.limitWarningFactor ? _stylesModule.default.characterLimitWarning : '', "\n              ")
+  }, "".concat(value.length, "/").concat(characterCountLimit))), tooltip && /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
     content: tooltip,
     tippyProps: _constants.tippyProps
   }, /*#__PURE__*/_react.default.createElement("div", null, HelpIcon || /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
@@ -68,6 +84,7 @@ UTTextArea.propTypes = {
     textarea: _propTypes.string
   }),
   disabled: _propTypes.bool,
+  field: _formTypes.fieldType,
   HelpIcon: _propTypes.elementType,
   inputProps: _formTypes.inputPropTypes,
   onBlur: _propTypes.func,
@@ -78,5 +95,4 @@ UTTextArea.propTypes = {
   tooltip: _propTypes.string,
   value: _propTypes.string
 };
-var _default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTTextArea);
-exports.default = _default;
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTTextArea);

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

@@ -1,3 +1,5 @@
+@import '../../scss/variables/colors.module.scss';
+
 .textarea {
   height: 100px;
   width: 100%;
@@ -13,8 +15,25 @@
   padding-right: 5px;
 }
 
-.textAreaContainer {
+.content {
   column-gap: 8px;
   display: flex;
   margin: 10px 0;
 }
+
+.textAreaContainer {
+  height: 100px;
+  width: 100%;
+}
+
+.characterCount {
+  text-align: right;
+}
+
+.characterLimitWarning {
+  color: $warning;
+}
+
+.characterLimitReached {
+  color: $error;
+}

package/dist/components/UTTextArea/theme.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = void 0;
 var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var retrieveStyle = function retrieveStyle(theme) {
+const retrieveStyle = theme => {
   var _theme$UTTextArea, _theme$UTTextArea2, _theme$UTTextArea3, _theme$UTTextArea4, _theme$Fonts, _theme$UTTextArea5, _theme$Fonts2, _theme$UTTextArea6, _theme$UTTextArea7, _theme$UTTextArea8, _theme$UTTextArea9, _theme$UTTextArea10, _theme$UTTextArea11, _theme$UTTextArea12, _theme$UTTextArea13, _theme$UTTextArea14, _theme$UTTextArea15, _theme$UTTextArea16, _theme$UTTextArea17, _theme$UTTextArea18, _theme$UTTextArea19, _theme$UTTextArea20;
   return {
     textarea: {

package/dist/components/UTTextInput/constants.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.INPUT_TYPES = void 0;
-var INPUT_TYPES = {
+const INPUT_TYPES = exports.INPUT_TYPES = {
   PASSWORD: 'password',
   TEXT: 'text',
   NUMBER: 'number'
-};
-exports.INPUT_TYPES = INPUT_TYPES;
+};