@widergy/energy-ui 3.37.2 → 3.38.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.38.0](https://github.com/widergy/energy-ui/compare/v3.37.2...v3.38.0) (2024-11-04)
+
+
+### Features
+
+* [UGB-1632] select ([#518](https://github.com/widergy/energy-ui/issues/518)) ([6224204](https://github.com/widergy/energy-ui/commit/6224204cb5e0071add57d2063a756bc6e1f7850c))
+
 ## [3.37.2](https://github.com/widergy/energy-ui/compare/v3.37.1...v3.37.2) (2024-11-01)
 
 

package/dist/components/UTBadge/index.js

@@ -42,7 +42,7 @@ const UTBadge = _ref => {
 };
 UTBadge.defaultProps = _constants.DEFAULT_PROPS;
 UTBadge.propTypes = {
-  children: _propTypes.string,
+  children: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   className: _propTypes.string,
   colorTheme: _propTypes.string

package/dist/components/UTBaseInputField/components/BadgeAdornment/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTBadge = _interopRequireDefault(require("../../../UTBadge"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BadgeAdornment = _ref => {
+  let {
+    text,
+    colorTheme
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_UTBadge.default, {
+    colorTheme: colorTheme
+  }, text);
+};
+BadgeAdornment.propTypes = {
+  colorTheme: _propTypes.string,
+  text: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number])
+};
+var _default = exports.default = BadgeAdornment;

package/dist/components/UTBaseInputField/components/IconAdornment/index.js

@@ -14,26 +14,31 @@ 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 IconAdornment = _ref => {
   let {
-    changeOnError = false,
-    changeOnFocus = false,
+    changeIconOnError = true,
+    changeOnError,
+    changeOnFocus,
     colorTheme,
     error,
     focused,
     Icon,
     inputStyle,
-    shade
+    shade,
+    showOnlyOnError
   } = _ref;
-  const IconToRender = error && changeOnError ? _constants.ERROR_ICON : Icon;
+  const effectiveChangeOnError = showOnlyOnError || changeOnError;
+  if (showOnlyOnError && !error) return null;
+  const IconToRender = error && changeIconOnError ? _constants.ERROR_ICON : Icon;
   if (!IconToRender) return null;
   return (0, _componentUtils.isUTIcon)(IconToRender) ? /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
     name: IconToRender,
     size: _constants.ICON_SIZE
-  }, (0, _utils.getIconColorProps)(changeOnError, changeOnFocus, colorTheme, error, focused, shade))) : /*#__PURE__*/_react.default.createElement(Icon, {
+  }, (0, _utils.getIconColorProps)(effectiveChangeOnError, changeOnFocus, colorTheme, error, focused, shade))) : /*#__PURE__*/_react.default.createElement(Icon, {
     size: _constants.ICON_SIZE,
     fill: inputStyle.root.color
   });
 };
 IconAdornment.propTypes = {
+  changeIconOnError: _propTypes.bool,
   changeOnError: _propTypes.bool,
   changeOnFocus: _propTypes.bool,
   colorTheme: _propTypes.string,
@@ -43,6 +48,7 @@ IconAdornment.propTypes = {
   inputStyle: (0, _propTypes.shape)({
     root: _propTypes.object
   }),
-  shade: _propTypes.string
+  shade: _propTypes.string,
+  showOnlyOnError: _propTypes.bool
 };
 var _default = exports.default = IconAdornment;

package/dist/components/UTBaseInputField/constants.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.COMPONENT_KEYS = exports.COMPONENTS_MAPPER = void 0;
 var _ActionAdornment = _interopRequireDefault(require("./components/ActionAdornment"));
+var _BadgeAdornment = _interopRequireDefault(require("./components/BadgeAdornment"));
 var _IconAdornment = _interopRequireDefault(require("./components/IconAdornment"));
 var _PrefixAdornment = _interopRequireDefault(require("./components/PrefixAdornment"));
 var _SuffixAdornment = _interopRequireDefault(require("./components/SuffixAdornment"));
@@ -12,6 +13,7 @@ var _TooltipAdornment = _interopRequireDefault(require("./components/TooltipAdor
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const COMPONENT_KEYS = exports.COMPONENT_KEYS = {
   ACTION: 'Action',
+  BADGE: 'Badge',
   ICON: 'Icon',
   PREFIX: 'Prefix',
   SUFFIX: 'Suffix',
@@ -19,6 +21,7 @@ const COMPONENT_KEYS = exports.COMPONENT_KEYS = {
 };
 const COMPONENTS_MAPPER = exports.COMPONENTS_MAPPER = {
   [COMPONENT_KEYS.ACTION]: _ActionAdornment.default,
+  [COMPONENT_KEYS.BADGE]: _BadgeAdornment.default,
   [COMPONENT_KEYS.ICON]: _IconAdornment.default,
   [COMPONENT_KEYS.PREFIX]: _PrefixAdornment.default,
   [COMPONENT_KEYS.SUFFIX]: _SuffixAdornment.default,

package/dist/components/UTBaseInputField/index.js

@@ -27,9 +27,11 @@ const UTBaseInputField = _ref => {
     disabled,
     error,
     id,
+    inputRef,
     leftAdornments = [],
     maxLength,
     maxRows = 1,
+    muiProps,
     onBlur,
     onChange = () => {},
     onFocus,
@@ -85,15 +87,15 @@ const UTBaseInputField = _ref => {
       } : undefined
     };
     return Component ? /*#__PURE__*/_react.default.createElement(Component, _extends({}, adornmentProps, {
-      key: adornment.name
+      key: adornment.key || adornment.name
     })) : null;
   }, [error, disabled, readOnly, focused]);
-  return /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    margin: "none",
+  return /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
     autoComplete: "new-password",
     disabled: disabled || readOnly,
     error: error,
     id: id,
+    margin: "none",
     maxRows: maxRows,
     minRows: maxRows,
     multiline: multiline,
@@ -104,18 +106,22 @@ const UTBaseInputField = _ref => {
     placeholder: shouldShowPlaceholder ? placeholder : '',
     type: type === 'numeric' ? 'text' : type,
     value: value,
-    variant: "outlined",
+    inputRef: inputRef,
+    variant: "outlined"
+  }, muiProps, {
     InputProps: {
       inputProps: {
+        'data-testid': dataTestId,
         maxLength,
-        'data-testid': dataTestId
+        readOnly,
+        ...(muiProps === null || muiProps === void 0 ? void 0 : muiProps.inputProps)
       },
       classes: {
         adornedEnd: _stylesModule.default.elementsContainer,
         adornedStart: _stylesModule.default.elementsContainer,
-        input: classes.input,
+        input: "".concat(classes.input, " ").concat(focused && classes.focusedInput),
         notchedOutline: "".concat(classes.inputContainer, " ").concat(focused && classes.focusedInputContainer),
-        root: "".concat(classes.root, " ").concat(focused && classes.focusedRoot)
+        root: "".concat(classes.root, " ").concat(focused && classes.focusedRoot, " ").concat(value && classes.withValueRoot)
       },
       startAdornment: validLeftAdornments.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
         className: _stylesModule.default.adornmentsContainer
@@ -126,33 +132,41 @@ const UTBaseInputField = _ref => {
       }, (value === null || value === void 0 ? void 0 : value.length) || 0, "/", maxLength),
       endAdornment: validRightAdornments.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_stylesModule.default.adornmentsContainer, " ").concat(multiline && _stylesModule.default.multilineAdornmentsContainer)
-      }, validRightAdornments.map(renderAdornment))
+      }, validRightAdornments.map(renderAdornment)),
+      ...(muiProps === null || muiProps === void 0 ? void 0 : muiProps.InputProps)
     }
-  });
+  }));
 };
 const propTypes = exports.propTypes = {
-  leftAdornments: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    name: _propTypes.string.isRequired,
-    props: (0, _propTypes.objectOf)(_propTypes.string)
-  })),
-  rightAdornments: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    name: _propTypes.string.isRequired,
-    props: (0, _propTypes.objectOf)(_propTypes.string)
-  })),
   alwaysShowPlaceholder: _propTypes.bool,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
   dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
-  error: _propTypes.bool,
+  error: (0, _propTypes.oneOfType)([_propTypes.bool, _propTypes.string]),
   id: _propTypes.string,
+  inputRef: (0, _propTypes.oneOfType)([_propTypes.func, (0, _propTypes.shape)({
+    current: (0, _propTypes.instanceOf)(Element)
+  })]),
+  leftAdornments: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    name: _propTypes.string.isRequired,
+    props: _propTypes.object
+  })),
   maxLength: _propTypes.number,
   maxRows: _propTypes.number,
+  muiProps: (0, _propTypes.shape)({
+    inputProps: _propTypes.object,
+    InputProps: _propTypes.object
+  }),
   onBlur: _propTypes.func,
   onChange: _propTypes.func,
   onFocus: _propTypes.func,
   placeholder: _propTypes.string,
   readOnly: _propTypes.bool,
+  rightAdornments: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    name: _propTypes.string.isRequired,
+    props: _propTypes.object
+  })),
   showCharacterCount: _propTypes.bool,
   type: _propTypes.string,
   value: _propTypes.string,

package/dist/components/UTBaseInputField/theme.js

@@ -15,8 +15,44 @@ const SMALL_PADDING = {
   VERTICAL: 8
 };
 const GRID_GAP = 16;
-const retrieveStyle = _ref => {
+const getPaddingValues = inputSize => {
+  const vertical = inputSize === 'small' ? SMALL_PADDING.VERTICAL : PADDING.VERTICAL;
+  const horizontal = inputSize === 'small' ? SMALL_PADDING.HORIZONTAL : PADDING.HORIZONTAL;
+  const multiline = vertical + GRID_GAP + charactersCountRowHeight;
+  return {
+    verticalPadding: "".concat(vertical, "px"),
+    horizontalPadding: "".concat(horizontal, "px"),
+    multilineVerticalPadding: "".concat(multiline, "px")
+  };
+};
+const getBackgroundColor = _ref => {
+  let {
+    theme,
+    variant,
+    error,
+    disabled,
+    readOnly
+  } = _ref;
+  if (readOnly) return 'transparent';
+  if (variant === 'gray') return theme.Palette.light['04'];
+  if (variant === 'transparent' && error) return theme.Palette.error['01'];
+  if (disabled) return theme.Palette.light['03'];
+  return theme.Palette.light['01'];
+};
+const getBorderColor = _ref2 => {
   let {
+    theme,
+    variant,
+    error,
+    readOnly,
+    disabled
+  } = _ref2;
+  if (variant === 'gray' || variant === 'transparent' || readOnly || disabled) return 'transparent !important';
+  if (error) return "".concat(theme.Palette.error['04'], " !important");
+  return "".concat(theme.Palette.light['05'], " !important");
+};
+const retrieveStyle = props => {
+  const {
     disabled: receivedDisabled,
     error,
     inputSize,
@@ -25,59 +61,68 @@ const retrieveStyle = _ref => {
     showCharacterCount,
     theme,
     variant
-  } = _ref;
+  } = props;
   const disabled = receivedDisabled && !readOnly;
-  const verticalPadding = "".concat(inputSize === 'small' ? SMALL_PADDING.VERTICAL : PADDING.VERTICAL, "px");
-  const multilineVerticalPadding = "".concat((inputSize === 'small' ? SMALL_PADDING.VERTICAL : PADDING.VERTICAL) + GRID_GAP + charactersCountRowHeight, "px");
-  const horizontalPadding = "".concat(inputSize === 'small' ? SMALL_PADDING.HORIZONTAL : PADDING.HORIZONTAL, "px");
   const hasCharactersCount = showCharacterCount && maxLength && !disabled && !readOnly;
+  const {
+    verticalPadding,
+    horizontalPadding,
+    multilineVerticalPadding
+  } = getPaddingValues(inputSize);
   return {
     charactersCount: {
-      position: 'absolute',
-      bottom: verticalPadding
+      bottom: verticalPadding,
+      position: 'absolute'
     },
     root: {
-      backgroundColor: theme.Palette.light['01'],
+      backgroundColor: getBackgroundColor({
+        theme,
+        variant,
+        error,
+        disabled,
+        readOnly
+      }),
       paddingBottom: hasCharactersCount ? multilineVerticalPadding : verticalPadding,
       paddingLeft: horizontalPadding,
       paddingRight: horizontalPadding,
       paddingTop: verticalPadding,
-      ...(variant === 'gray' && {
-        backgroundColor: theme.Palette.light['04']
-      }),
       ...(readOnly && {
-        backgroundColor: 'transparent',
         paddingLeft: 0,
         paddingRight: 0
       }),
-      ...(disabled && {
-        backgroundColor: theme.Palette.light['03']
-      })
+      '&:hover': {
+        backgroundColor: variant === 'transparent' && error ? theme.Palette.error['02'] : !readOnly && theme.Palette.light['03']
+      }
     },
     inputContainer: {
-      borderColor: "".concat(theme.Palette.light['05'], " !important"),
-      borderRadius: '4px',
-      borderWidth: '1px',
-      ...(variant === 'gray' && {
-        borderColor: 'transparent !important'
-      }),
-      ...(error && {
-        borderColor: "".concat(theme.Palette.error['04'], " !important")
-      }),
-      ...(readOnly && {
-        borderColor: 'transparent !important'
+      borderColor: getBorderColor({
+        theme,
+        variant,
+        error,
+        readOnly,
+        disabled
       }),
-      ...(disabled && {
-        borderColor: 'transparent !important'
-      })
+      borderRadius: '4px',
+      borderWidth: '1px'
     },
     focusedRoot: {
-      backgroundColor: theme.Palette.light['01']
+      backgroundColor: theme.Palette.light['01'],
+      '&:hover': {
+        backgroundColor: theme.Palette.light['01']
+      }
+    },
+    withValueRoot: {
+      ...(variant === 'transparent' && !error && {
+        backgroundColor: theme.Palette.accent['01']
+      })
     },
     focusedInputContainer: {
       ...(!error && {
         borderColor: "".concat(theme.Palette.accent['04'], " !important"),
         borderWidth: '2px'
+      }),
+      ...(error && {
+        borderColor: "".concat(theme.Palette.error['04'], " !important")
       })
     },
     input: {
@@ -93,7 +138,8 @@ const retrieveStyle = _ref => {
       padding: 0,
       textOverflow: 'ellipsis',
       '&::placeholder': {
-        color: theme.Palette.gray['02']
+        color: variant === 'transparent' && !disabled ? theme.Palette.dark['05'] : theme.Palette.gray['02'],
+        opacity: 1
       },
       '&::selection': {
         backgroundColor: theme.Palette.accent['02']
@@ -101,6 +147,12 @@ const retrieveStyle = _ref => {
       ...(disabled && {
         color: theme.Palette.gray['04']
       })
+    },
+    focusedInput: {
+      '&::placeholder': {
+        color: theme.Palette.gray['02'],
+        opacity: 1
+      }
     }
   };
 };

package/dist/components/UTCheckList/versions/V1/constants.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SPACING = void 0;
+exports.SPACING = exports.NO_CATEGORY = void 0;
 const SPACING = exports.SPACING = {
   SMALL: 'small',
   MEDIUM: 'medium'
-};
+};
+const NO_CATEGORY = exports.NO_CATEGORY = 'No Category';

package/dist/components/UTCheckList/versions/V1/index.js

@@ -14,11 +14,10 @@ var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
 var _UTValidation = _interopRequireDefault(require("../../../UTValidation"));
 var _utils2 = require("./utils");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _constants2 = require("./constants");
 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; }
-/* eslint-disable no-unused-vars */
-
 const UTCheckList = _ref => {
   let {
     classNames = {},
@@ -53,19 +52,22 @@ const UTCheckList = _ref => {
   }, [value, onChange]);
   const categorizedOptions = (0, _react.useMemo)(() => {
     const optionsGrouped = options.reduce((groupedOptions, option) => {
-      const category = option.category || 'No Category';
+      const category = option.category || _constants2.NO_CATEGORY;
       if (!groupedOptions[category]) {
         groupedOptions[category] = [];
       }
       groupedOptions[category].push(option);
       return groupedOptions;
     }, {
-      'No Category': []
+      NO_CATEGORY: []
     });
-    return Object.entries(optionsGrouped).sort((_ref2, _ref3) => {
-      let [categoryA] = _ref2;
-      let [categoryB] = _ref3;
-      return categoryA === 'No Category' ? -1 : categoryB === 'No Category' ? 1 : 0;
+    return Object.entries(optionsGrouped).filter(_ref2 => {
+      let [, categoryOptions] = _ref2;
+      return categoryOptions.length > 0;
+    }).sort((_ref3, _ref4) => {
+      let [categoryA] = _ref3;
+      let [categoryB] = _ref4;
+      return categoryA === _constants2.NO_CATEGORY ? -1 : categoryB === _constants2.NO_CATEGORY ? 1 : 0;
     });
   }, [options]);
   const enabledOptions = (0, _react.useMemo)(() => options.filter(option => !option.disabled), [options]);
@@ -85,7 +87,7 @@ const UTCheckList = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.container, " ").concat(smallVerticalSpacingClass, " ").concat(classNames.root),
     "data-testid": dataTestId
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, (title || validationData) && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.headerContainer, " ").concat(classNames.header)
   }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
     required: required
@@ -103,12 +105,12 @@ const UTCheckList = _ref => {
     value: areAllSelected,
     variant: variant,
     version: "V1"
-  }), categorizedOptions.map(_ref4 => {
-    let [category, categoryOptions] = _ref4;
+  }), categorizedOptions.map(_ref5 => {
+    let [category, categoryOptions] = _ref5;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(_stylesModule.default.categoryContainer, " ").concat(smallVerticalSpacingClass),
       key: category
-    }, category !== 'No Category' && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    }, category !== _constants2.NO_CATEGORY && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
       className: _stylesModule.default.categoryTitle,
       colorTheme: "gray",
       variant: "small",
@@ -119,7 +121,7 @@ const UTCheckList = _ref => {
       isSimple: isSimple,
       key: item.value,
       onChange: () => handleChange(item.value),
-      reversed: reversedBasedOnVariant,
+      reversed: isSimple ? reversedBasedOnVariant : reversed,
       spacing: horizontalSpacing,
       title: item.label,
       value: (0, _utils2.isChecked)(item, value),

package/dist/components/UTCheckbox/versions/V1/index.js

@@ -36,13 +36,11 @@ const UTCheckbox = _ref => {
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
   const iconName = (0, _react.useMemo)(() => indeterminate ? _constants.INDETERMINATE_ICON : value ? _constants.CHECKED_ICON : '', [indeterminate, value]);
   const handlePress = (0, _react.useCallback)(() => {
-    if (!disabled && onChange) {
-      onChange(!value);
-    }
+    if (!disabled && onChange) onChange(!value);
   }, [disabled, onChange, value]);
   const shouldHighlightLabel = value && variant === _constants.BUTTON_VARIANT;
   const touchableProps = {
-    onClick: handlePress,
+    onMouseDown: handlePress,
     disabled
   };
   const RootComponent = variant === _constants.BUTTON_VARIANT ? _UTTouchableWithoutFeedback.default : 'div';

package/dist/components/UTCheckbox/versions/V1/theme.js

@@ -49,7 +49,7 @@ const conditionalStyles = _ref => {
       }),
       ...(variant === _constants.BUTTON_VARIANT && {
         borderRadius: '8px',
-        padding: '12px 16px',
+        padding: spacing === 'small' ? '8px 12px' : '12px 16px',
         '&:active': {
           backgroundColor: theme.Palette.light['04']
         }

package/dist/components/UTPaper/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _core = require("@material-ui/core");
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _theme = require("./theme");
+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 UTPaper = _ref => {
+  let {
+    children,
+    classes,
+    ...otherProps
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_core.Paper, _extends({}, otherProps, {
+    className: classes.paper
+  }), children);
+};
+UTPaper.propTypes = {
+  children: _propTypes.object,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  otherProps: _propTypes.object
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTPaper);

package/dist/components/UTPaper/theme.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _shadowUtils = require("../../utils/shadowUtils");
+const retrieveStyle = _ref => {
+  var _theme$Palette$shadow;
+  let {
+    theme
+  } = _ref;
+  return {
+    paper: {
+      backgroundColor: theme.Palette.light['01'],
+      borderRadius: '8px',
+      boxShadow: (0, _shadowUtils.getShadow)({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 2
+      }),
+      marginTop: '8px',
+      padding: '16px'
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTPasswordField/versions/V0/index.js

@@ -40,7 +40,7 @@ const UTPasswordField = _ref => {
     passwordValidations,
     showValidations,
     passwordValidationsWarning
-  } = field;
+  } = field || {};
   const {
     value
   } = input;

package/dist/components/UTPhoneInput/versions/V1/index.js

@@ -37,7 +37,7 @@ const UTPhoneInput = _ref => {
     title,
     titleVariant,
     translations = {
-      areaCodeMinLenghtError: 'El código de área debe contener al menos 2 caracteres.',
+      areaCodeMinLenghtError: 'El código de área debe contener al menos 2 dígitos.',
       areaCodeWithoutZeroError: 'El código de área debe comenzar sin 0.',
       invalidAreaCodeError: 'No pudimos reconocer el código de área ingresado. Intenta con uno diferente.'
     },
@@ -140,7 +140,7 @@ const UTPhoneInput = _ref => {
     rightAdornments: [{
       name: _constants.COMPONENT_KEYS.ICON,
       props: {
-        changeOnError: true
+        showOnlyOnError: true
       }
     }],
     value: areaCodeState.code
@@ -165,7 +165,7 @@ const UTPhoneInput = _ref => {
     rightAdornments: [{
       name: _constants.COMPONENT_KEYS.ICON,
       props: {
-        changeOnError: true
+        showOnlyOnError: true
       }
     }],
     type: "numeric",