@widergy/energy-ui 3.22.4 → 3.23.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.23.0](https://github.com/widergy/energy-ui/compare/v3.22.5...v3.23.0) (2024-10-07)
+
+
+### Features
+
+* add UTTextInput + UTTextArea + UTValidation + UTFieldLabel ([#500](https://github.com/widergy/energy-ui/issues/500)) ([333f340](https://github.com/widergy/energy-ui/commit/333f340215a2c6b99f4f2978e940bce5a20d0e96))
+
+## [3.22.5](https://github.com/widergy/energy-ui/compare/v3.22.4...v3.22.5) (2024-10-03)
+
+
+### Bug Fixes
+
+* ut action card minor fixes ([#502](https://github.com/widergy/energy-ui/issues/502)) ([a0b41b5](https://github.com/widergy/energy-ui/commit/a0b41b5b7bc9608892b87af8c6946d37aa56e782))
+
 ## [3.22.4](https://github.com/widergy/energy-ui/compare/v3.22.3...v3.22.4) (2024-10-02)
 
 

package/dist/components/UTActionCard/README.md

@@ -14,12 +14,12 @@
 | `description`          | `string`                                                                                                                                                                                                 |            | Description text to be displayed.                                      |
 | `descriptionProps`     | `shape({ colorTheme: string, variant: string })`                                                                                                                                                         |            | Props to customize the description's style.                            |
 | `headerActions`        | `arrayOf(shape({ Icon: oneOfType([elementType, string]), iconProps: string, id: oneOfType([number, string]), label: string, loading: bool, onClick: func }))`                                            |            | List of actions available in the header section.                       |
-| `headerActionsProps`   | `shape({ alignment: oneOf(['center', 'end', 'start']), buttonGroupProps: shape({ colorTheme: string, shape: string }), maxNumberOfPrimaryActions: number, variant: oneOf(['default', 'buttonGroup']) })` |            | Props to configure header actions alignment, button group, etc.        |
+| `headerActionsProps`   | `shape({ alignment: oneOf(['center', 'end', 'start']), buttonGroupProps: shape({ colorTheme: string, shape: string }), variant: oneOf(['default', 'buttonGroup']) })` |            | Props to configure header actions alignment, button group, etc.        |
 | `mainAction`           | `func`                                                                                                                                                                                                   |            | Main action function for the card.                                     |
 | `size`                 | `oneOf(['medium', 'small'])`                                                                                                                                                                             | `'medium'` | Size of the card, either small or medium.                              |
 | `status`               | `string`                                                                                                                                                                                                 |            | Status text to be displayed.                                           |
 | `statusLabel`          | `string`                                                                                                                                                                                                 |            | Status label for additional status info.                               |
 | `statusAlignment`      | `oneOf(['center', 'end', 'start'])`                                                                                                                                                                      |            | Alignment of the status element.                                       |
-| `title`                | `string.isRequired`                                                                                                                                                                                      |            | The title of the card, required.                                       |
+| `title`                | `string`                                                                                                                                                                                      |            | The title of the card.                                       |
 | `titleProps`           | `shape({ variant: string, weight: string })`                                                                                                                                                             |            | Props to configure the title style.                                    |
 | `withBodyPadding`      | `bool`                                                                                                                                                                                                   | `false`    | Adds padding to the card body if`true`.                                |

package/dist/components/UTActionCard/components/AdditionalMessage/index.js

@@ -25,8 +25,10 @@ const AdditionalMessage = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.additionalMessageContainer, " ").concat(_stylesModule.default[size])
   }, icon && /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
+    area: true,
     colorTheme: "gray",
-    name: icon
+    name: icon,
+    size: 16
   }, iconProps)), /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     colorTheme: "gray",
     variant: "small",

package/dist/components/UTActionCard/components/BottomActions/index.js

@@ -15,7 +15,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const BottomActions = _ref => {
   let {
     actions = [],
-    bottomActionsVariant
+    bottomActionsVariant,
+    size
   } = _ref;
   const type = actions.length > 2 ? _constants.ACTION_TYPES.REDIRECTION : bottomActionsVariant || _constants.ACTION_TYPES.DEFAULT;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -32,7 +33,7 @@ const BottomActions = _ref => {
     return /*#__PURE__*/_react.default.createElement(_UTButton.default, {
       classNames: {
         childrenContainer: "".concat(type === _constants.ACTION_TYPES.REDIRECTION && _stylesModule.default.redirectionChildrenContainer, " "),
-        root: "".concat(_stylesModule.default.actionButton, " ").concat(type === _constants.ACTION_TYPES.REDIRECTION ? _stylesModule.default.fullWidth : ''),
+        root: "".concat(_stylesModule.default.actionButton, " ").concat(type === _constants.ACTION_TYPES.REDIRECTION && _stylesModule.default.fullWidth, " ").concat(size === _constants.SIZES.MEDIUM && _stylesModule.default.mediumPadding),
         text: "".concat(type === _constants.ACTION_TYPES.REDIRECTION ? _stylesModule.default.redirectionText : _stylesModule.default.defaultText)
       },
       colorTheme: colorTheme,
@@ -56,6 +57,7 @@ BottomActions.propTypes = {
     loading: _propTypes.bool,
     onClick: _propTypes.func
   })),
-  bottomActionsVariant: _propTypes.string
+  bottomActionsVariant: _propTypes.string,
+  size: _propTypes.string
 };
 var _default = exports.default = /*#__PURE__*/(0, _react.memo)(BottomActions);

package/dist/components/UTActionCard/components/BottomActions/styles.module.scss

@@ -38,3 +38,7 @@ $default-border-color: #E7E7E7;
 .fullWidth {
   flex: 1 0 100%;
 }
+
+.mediumPadding {
+  padding: 16px 24px;
+}

package/dist/components/UTActionCard/components/Header/constants.js

@@ -7,11 +7,24 @@ exports.ADORNMENT_COMPONENT_MAPPER = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _UTAvatar = _interopRequireDefault(require("../../../UTAvatar"));
 var _UTIcon = _interopRequireDefault(require("../../../UTIcon"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const ADORNMENT_COMPONENT_MAPPER = exports.ADORNMENT_COMPONENT_MAPPER = {
   icon: _UTIcon.default,
-  avatar: _UTAvatar.default,
+  avatar: _ref => {
+    let {
+      className,
+      ...props
+    } = _ref;
+    return /*#__PURE__*/_react.default.createElement(_UTAvatar.default, _extends({
+      className: "".concat(_stylesModule.default.defaultAvatar, " ").concat(className),
+      labelProps: {
+        variant: 'title1',
+        weight: 'medium'
+      }
+    }, props));
+  },
   image: props => /*#__PURE__*/_react.default.createElement("img", _extends({
     alt: ""
   }, props))

package/dist/components/UTActionCard/components/Header/index.js

@@ -20,6 +20,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const Header = _ref => {
   let {
     adornment,
+    classNames,
     description,
     descriptionProps,
     headerActions,
@@ -33,10 +34,11 @@ const Header = _ref => {
     titleProps
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.header, " ").concat(_stylesModule.default[size])
+    className: "".concat(_stylesModule.default.header, " ").concat(_stylesModule.default[size], " ").concat(classNames.header)
   }, (0, _utils.renderAdornment)(adornment, 'left', size), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.headerTitles, " ").concat(_stylesModule.default["gap-".concat(size)])
+    className: _stylesModule.default.headerTitles
   }, (0, _utils.renderAdornment)(adornment, 'top', size), /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    variant: "title3",
     weight: "medium"
   }, titleProps), title), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     colorTheme: "gray"
@@ -55,6 +57,7 @@ Header.propTypes = {
     props: _propTypes.object,
     type: _propTypes.string
   }),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
   description: _propTypes.string,
   descriptionProps: (0, _propTypes.shape)({
     colorTheme: _propTypes.string,
@@ -74,7 +77,6 @@ Header.propTypes = {
       colorTheme: _propTypes.string,
       shape: _propTypes.string
     }),
-    maxNumberOfPrimaryActions: _propTypes.number,
     variant: (0, _propTypes.oneOf)([_constants.HEADER_ACTIONS_VARIANTS.DEFAULT, _constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
   }),
   setMainActionHoverVisible: _propTypes.string,

package/dist/components/UTActionCard/components/Header/styles.module.scss

@@ -7,6 +7,7 @@
 .headerTitles {
   display: flex;
   flex-direction: column;
+  grid-gap: 8px;
   margin-right: auto;
   overflow-wrap: anywhere;
 }
@@ -15,18 +16,10 @@
   padding: 24px;
 }
 
-.gap-medium {
-  grid-gap: 16px;
-}
-
 .small {
   padding: 16px;
 }
 
-.gap-small {
-  grid-gap: 8px;
-}
-
 .placeSelf-center {
   place-self: center;
 }
@@ -38,3 +31,8 @@
 .placeSelf-end {
   place-self: flex-end;
 }
+
+.defaultAvatar {
+  height: 64px;
+  width: 64px;
+}

package/dist/components/UTActionCard/components/HeaderActions/index.js

@@ -12,7 +12,6 @@ var _UTButtonGroup = _interopRequireDefault(require("../../../UTButtonGroup"));
 var _UTMenu = _interopRequireDefault(require("../../../UTMenu"));
 var _constants = require("../../constants");
 var _utils = require("./utils");
-var _constants2 = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -32,7 +31,6 @@ const HeaderActions = _ref => {
     colorTheme: buttonGroupColorTheme = 'secondary',
     shape: buttonGroupShape
   } = (headerActionsProps === null || headerActionsProps === void 0 ? void 0 : headerActionsProps.buttonGroupProps) || {};
-  const maxNumberOfPrimaryActions = (headerActionsProps === null || headerActionsProps === void 0 ? void 0 : headerActionsProps.maxNumberOfPrimaryActions) || _constants2.DEFAULT_MAX_NUMBER_OF_PRIMARY_ACTIONS;
   const handleSetMainActionHoverVisible = () => setMainActionHoverVisible(true);
   const handleSetMainActionHoverHidden = () => setMainActionHoverVisible(false);
   const openMenu = event => setMenu(event.currentTarget);
@@ -40,8 +38,10 @@ const HeaderActions = _ref => {
     handleSetMainActionHoverVisible();
     setMenu();
   };
-  const primaryActions = (0, _utils.mapActions)(headerActions, true).slice(0, maxNumberOfPrimaryActions);
-  const secondaryActions = (0, _utils.mapActions)(headerActions, false, !showButtonGroup ? closeMenu : null);
+  const {
+    primaryActions,
+    secondaryActions
+  } = (0, _utils.processActions)(headerActions, !showButtonGroup ? closeMenu : null);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.headerActionsContainer, " ").concat(_stylesModule.default["placeSelf-".concat(headerActionsProps.alignment)]),
     onClick: e => e.stopPropagation(),
@@ -72,7 +72,11 @@ const HeaderActions = _ref => {
     Icon: "IconDots",
     onClick: e => {
       e.stopPropagation();
-      openMenu(e);
+      if (menu) {
+        setMenu();
+      } else {
+        openMenu(e);
+      }
     },
     size: "medium",
     variant: "text"
@@ -104,7 +108,6 @@ HeaderActions.propTypes = {
       colorTheme: _propTypes.string,
       shape: _propTypes.string
     }),
-    maxNumberOfPrimaryActions: _propTypes.number,
     variant: (0, _propTypes.oneOf)([_constants.HEADER_ACTIONS_VARIANTS.DEFAULT, _constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
   }),
   setMainActionHoverVisible: _propTypes.func

package/dist/components/UTActionCard/components/HeaderActions/utils.js

@@ -3,18 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mapActions = void 0;
-const mapActions = function () {
-  let actions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let isPrimary = arguments.length > 1 ? arguments[1] : undefined;
-  let onClickHandler = arguments.length > 2 ? arguments[2] : undefined;
-  return actions.filter(action => ((action === null || action === void 0 ? void 0 : action.isPrimary) || false) === isPrimary).map(action => ({
-    ...action,
-    onClick: e => {
-      e === null || e === void 0 || e.stopPropagation();
-      if (onClickHandler) onClickHandler();
-      action.onClick();
-    }
-  }));
-};
-exports.mapActions = mapActions;
+exports.processActions = void 0;
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const mapAction = (action, onClickHandler) => ({
+  ...action,
+  onClick: e => {
+    var _action$onClick;
+    e === null || e === void 0 || e.stopPropagation();
+    if (onClickHandler) onClickHandler();
+    action === null || action === void 0 || (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action);
+  }
+});
+const processActions = (headerActions, onClickHandler) => headerActions.reduce((final, current) => {
+  if (current.isPrimary && (0, _isEmpty.default)(final.primaryActions)) return {
+    ...final,
+    primaryActions: [current]
+  };
+  return {
+    ...final,
+    secondaryActions: [...final.secondaryActions, mapAction(current, onClickHandler)]
+  };
+}, {
+  primaryActions: [],
+  secondaryActions: []
+});
+exports.processActions = processActions;

package/dist/components/UTActionCard/index.js

@@ -17,6 +17,7 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const UTActionCard = _ref => {
   let {
     additionalMessage,
@@ -53,6 +54,7 @@ const UTActionCard = _ref => {
     className: "".concat(_stylesModule.default.headerAndChildrenContainer, " ").concat(classNames.headerAndChildrenContainer)
   }, /*#__PURE__*/_react.default.createElement(_Header.default, {
     adornment,
+    classNames,
     description,
     descriptionProps,
     headerActions,
@@ -67,15 +69,12 @@ const UTActionCard = _ref => {
     titleProps
   }), children && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(withBodyPadding ? _stylesModule.default["bodyPadding-".concat(size)] : _stylesModule.default["withoutBodyPadding-".concat(size)])
-  }, children))), !(0, _object.objectIsEmpty)(additionalMessage) && /*#__PURE__*/_react.default.createElement(_AdditionalMessage.default, {
-    icon: additionalMessage.icon,
-    iconProps: additionalMessage.iconProps,
-    labelProps: additionalMessage.labelProps,
-    message: additionalMessage.message,
+  }, children))), !(0, _object.objectIsEmpty)(additionalMessage) && /*#__PURE__*/_react.default.createElement(_AdditionalMessage.default, _extends({}, additionalMessage, {
     size: size
-  }), !(0, _array.isEmpty)(bottomActions) && /*#__PURE__*/_react.default.createElement(_BottomActions.default, {
+  })), !(0, _array.isEmpty)(bottomActions) && /*#__PURE__*/_react.default.createElement(_BottomActions.default, {
     actions: bottomActions,
-    bottomActionsVariant: bottomActionsVariant
+    bottomActionsVariant: bottomActionsVariant,
+    size: size
   }));
 };
 UTActionCard.propTypes = {
@@ -127,7 +126,6 @@ UTActionCard.propTypes = {
       colorTheme: _propTypes.string,
       shape: _propTypes.string
     }),
-    maxNumberOfPrimaryActions: _propTypes.number,
     variant: (0, _propTypes.oneOf)([_constants.HEADER_ACTIONS_VARIANTS.DEFAULT, _constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
   }),
   mainAction: _propTypes.func,
@@ -135,7 +133,7 @@ UTActionCard.propTypes = {
   status: _propTypes.string,
   statusLabel: _propTypes.string,
   statusAlignment: (0, _propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER, _constants.PLACE_SELF_TYPES.END, _constants.PLACE_SELF_TYPES.START]),
-  title: _propTypes.string.isRequired,
+  title: _propTypes.string,
   titleProps: (0, _propTypes.shape)({
     variant: _propTypes.string,
     weight: _propTypes.string

package/dist/components/UTFieldLabel/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.REQUIRED_LABEL = void 0;
+const REQUIRED_LABEL = exports.REQUIRED_LABEL = '*';

package/dist/components/UTFieldLabel/index.js

@@ -0,0 +1,43 @@
+"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 _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const UTFieldLabel = _ref => {
+  let {
+    children,
+    colorTheme,
+    required,
+    style,
+    variant,
+    weight,
+    withMarkdown
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.label, " ").concat(style)
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: colorTheme,
+    variant: variant,
+    withMarkdown: withMarkdown
+  }, children), required && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "error",
+    shade: "04",
+    variant: variant,
+    weight: weight
+  }, _constants.REQUIRED_LABEL));
+};
+UTFieldLabel.propTypes = {
+  colorTheme: _propTypes.string,
+  required: _propTypes.bool,
+  variant: _propTypes.string,
+  weight: _propTypes.string,
+  withMarkdown: _propTypes.bool
+};
+var _default = exports.default = UTFieldLabel;

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

@@ -0,0 +1,5 @@
+.label {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 4px;
+}

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

@@ -5,7 +5,6 @@ $padding-xlarge: 12px;
 $padding-xxlarge: 21px;
 
 .withArea {
-  background-color: transparent;
   border-radius: 100px;
 }
 

package/dist/components/UTLabel/theme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.retrieveStyle = void 0;
+exports.retrieveStyle = exports.getFontStyles = void 0;
 var _Palette = require("../../constants/Palette");
 var _componentUtils = require("../../utils/componentUtils");
 var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
@@ -20,8 +20,23 @@ const linkColor = (theme, colorTheme) => {
   const color = colorTheme === _Palette.COLOR_THEMES.light ? actionPaletteColors.negative[_Palette.COLOR_SHADES.shade05] : colorTheme === _Palette.COLOR_THEMES.error ? actionPaletteColors.error[_Palette.COLOR_SHADES.shade05] : actionPaletteColors.neutral[_Palette.COLOR_SHADES.shade05];
   return color;
 };
-const retrieveStyle = _ref => {
-  var _field$configuration$, _field$configuration, _field$configuration$2, _field$configuration2, _theme$Fonts, _field$configuration$3, _field$configuration3, _field$configuration$4, _field$configuration4, _field$configuration$5, _field$configuration5;
+const getFontStyles = _ref => {
+  var _theme$Fonts;
+  let {
+    theme,
+    variant,
+    weight
+  } = _ref;
+  return {
+    fontFamily: theme === null || theme === 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],
+    lineHeight: _constants.VARIANTS_LINE_HEIGHT[variant] || _constants.VARIANTS_LINE_HEIGHT[_constants.DEFAULT_PROPS.variant]
+  };
+};
+exports.getFontStyles = getFontStyles;
+const retrieveStyle = _ref2 => {
+  var _field$configuration$, _field$configuration, _field$configuration$2, _field$configuration2, _field$configuration$3, _field$configuration3, _field$configuration$4, _field$configuration4;
   let {
     colorTheme,
     field,
@@ -29,14 +44,15 @@ const retrieveStyle = _ref => {
     theme,
     variant,
     weight
-  } = _ref;
+  } = _ref2;
   return {
     root: {
       color: variantsColorTheme((_field$configuration$ = field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.colorTheme) !== null && _field$configuration$ !== void 0 ? _field$configuration$ : colorTheme, (_field$configuration$2 = field === null || field === void 0 || (_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.shade) !== null && _field$configuration$2 !== void 0 ? _field$configuration$2 : shade, theme),
-      fontFamily: theme === null || theme === void 0 || (_theme$Fonts = theme.Fonts) === null || _theme$Fonts === void 0 ? void 0 : _theme$Fonts.fontFamily,
-      fontSize: _constants.VARIANTS_SIZES[(_field$configuration$3 = field === null || field === void 0 || (_field$configuration3 = field.configuration) === null || _field$configuration3 === void 0 ? void 0 : _field$configuration3.variant) !== null && _field$configuration$3 !== void 0 ? _field$configuration$3 : variant] || _constants.VARIANTS_SIZES[_constants.DEFAULT_PROPS.variant],
-      fontWeight: _constants.WEIGHTS[(_field$configuration$4 = field === null || field === void 0 || (_field$configuration4 = field.configuration) === null || _field$configuration4 === void 0 ? void 0 : _field$configuration4.weight) !== null && _field$configuration$4 !== void 0 ? _field$configuration$4 : weight] || _constants.WEIGHTS[_constants.DEFAULT_PROPS.weight],
-      lineHeight: _constants.VARIANTS_LINE_HEIGHT[(_field$configuration$5 = field === null || field === void 0 || (_field$configuration5 = field.configuration) === null || _field$configuration5 === void 0 ? void 0 : _field$configuration5.variant) !== null && _field$configuration$5 !== void 0 ? _field$configuration$5 : variant] || _constants.VARIANTS_LINE_HEIGHT[_constants.DEFAULT_PROPS.variant],
+      ...getFontStyles({
+        theme,
+        variant: (_field$configuration$3 = field === null || field === void 0 || (_field$configuration3 = field.configuration) === null || _field$configuration3 === void 0 ? void 0 : _field$configuration3.variant) !== null && _field$configuration$3 !== void 0 ? _field$configuration$3 : variant,
+        weight: (_field$configuration$4 = field === null || field === void 0 || (_field$configuration4 = field.configuration) === null || _field$configuration4 === void 0 ? void 0 : _field$configuration4.weight) !== null && _field$configuration$4 !== void 0 ? _field$configuration$4 : weight
+      }),
       margin: 0,
       '& > a': {
         color: linkColor(theme, colorTheme)

package/dist/components/UTTextArea/index.js

@@ -6,97 +6,21 @@ 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"));
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _formTypes = require("../../types/formTypes");
-var _constants = require("./constants");
-var _theme = require("./theme");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _V = _interopRequireDefault(require("./versions/V0"));
+var _V2 = _interopRequireDefault(require("./versions/V1"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const UTTextArea = _ref => {
   let {
-    classes,
-    classNames = {},
-    disabled,
-    field,
-    HelpIcon,
-    inputProps = {},
-    onBlur,
-    onChange,
-    onFocus,
-    placeholder,
-    title = '',
-    tooltip,
-    value
+    version = 'V0',
+    ...props
   } = _ref;
-  const {
-    container,
-    icon,
-    textarea,
-    label,
-    textAreaContainer
-  } = 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", {
-    className: _stylesModule.default.titleContainer
-  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: "".concat(label, " ").concat(_stylesModule.default.label),
-    withMarkdown: true
-  }, title)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.textAreaContainer, " ").concat(textAreaContainer)
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.componentWrapper
-  }, /*#__PURE__*/_react.default.createElement("textarea", _extends({}, inputProps, {
-    className: "".concat(_stylesModule.default.textarea, " ").concat(textarea, " ").concat(classes.textarea),
-    onChange: handleOnChange,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    value: value,
-    disabled: disabled,
-    placeholder: placeholder
-  })), characterCountLimit && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: _stylesModule.default.characterCount,
-    colorTheme: value.length === characterCountLimit ? 'error' : value.length >= characterCountLimit * _constants.LIMIT_WARNING_FACTOR ? 'warning' : 'dark'
-  }, "".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, {
-    className: "".concat(icon, " ").concat(classes.icon)
-  })))));
+  const Component = {
+    V0: _V.default,
+    V1: _V2.default
+  }[version];
+  return /*#__PURE__*/_react.default.createElement(Component, props);
 };
 UTTextArea.propTypes = {
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  classNames: (0, _propTypes.shape)({
-    container: _propTypes.string,
-    icon: _propTypes.string,
-    label: _propTypes.string,
-    textarea: _propTypes.string,
-    textAreaContainer: _propTypes.string
-  }),
-  disabled: _propTypes.bool,
-  field: _formTypes.fieldType,
-  HelpIcon: _propTypes.elementType,
-  inputProps: _formTypes.inputPropTypes,
-  onBlur: _propTypes.func,
-  onChange: _propTypes.func,
-  onFocus: _propTypes.func,
-  placeholder: _propTypes.string,
-  title: _propTypes.string,
-  tooltip: _propTypes.string,
-  value: _propTypes.string
+  version: _propTypes.string
 };
-var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTTextArea);
+var _default = exports.default = UTTextArea;