@widergy/energy-ui 3.171.1 → 3.171.3

package/dist/components/UTSelect/versions/V1/components/InputComponent/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _UTBaseInputField = _interopRequireDefault(require("../../../../../UTBaseInputField"));
+var _constants = require("../../constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable no-unused-vars */
 
@@ -45,12 +46,21 @@ const InputComponent = _ref => {
     },
     ...restParams
   } = params;
+  const isPicker = variant === _constants.VARIANTS.picker;
   const modifiedParams = {
     ...restParams,
     InputProps: restInputProps,
-    inputProps: restInputPropsFromField
+    inputProps: {
+      ...restInputPropsFromField,
+      ...(isPicker && {
+        readOnly: true,
+        style: {
+          cursor: 'default'
+        }
+      })
+    }
   };
-  const fieldVariant = variant === 'picker' ? 'transparent' : 'white';
+  const fieldVariant = isPicker ? 'transparent' : 'white';
   return /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
     alwaysShowPlaceholder: alwaysShowPlaceholder,
     dataTestId: dataTestId,
@@ -101,6 +111,6 @@ InputComponent.propTypes = {
     props: _propTypes.object
   })),
   value: _propTypes.string,
-  variant: _propTypes.string
+  variant: (0, _propTypes.oneOf)(Object.values(_constants.VARIANTS))
 };
 var _default = exports.default = InputComponent;

package/dist/components/UTSelect/versions/V1/components/ListboxComponent/index.js

@@ -11,8 +11,9 @@ var _propTypes = require("prop-types");
 var _isFinite = _interopRequireDefault(require("lodash/isFinite"));
 var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
 var _UTCheckList = _interopRequireDefault(require("../../../../../UTCheckList"));
+var _constants = require("../../../../../UTCheckList/versions/V1/constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-var _constants = require("./constants");
+var _constants2 = require("./constants");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ListboxComponent = _ref => {
@@ -21,16 +22,16 @@ const ListboxComponent = _ref => {
     dataTestId,
     filteredOptions,
     handleSelectionChange,
-    horizontalSpacing,
+    horizontalSpacing = _constants.SPACING.SMALL,
     itemDataTestId,
-    maxHeight = _constants.DEFAULT_MAX_HEIGHT,
+    maxHeight = _constants2.DEFAULT_MAX_HEIGHT,
     multiple,
     noMatchesText,
     value,
-    verticalSpacing
+    verticalSpacing = _constants.SPACING.SMALL
   } = _ref;
   const hasNoOptions = (0, _react.useMemo)(() => (0, _isEmpty.default)(filteredOptions), [filteredOptions]);
-  const maxHeightValid = (0, _react.useMemo)(() => (0, _isFinite.default)(maxHeight) ? maxHeight : _constants.DEFAULT_MAX_HEIGHT, [maxHeight]);
+  const maxHeightValid = (0, _react.useMemo)(() => (0, _isFinite.default)(maxHeight) ? maxHeight : _constants2.DEFAULT_MAX_HEIGHT, [maxHeight]);
   return hasNoOptions ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: "gray",
     className: _stylesModule.default.noOptionsLabel
@@ -46,7 +47,7 @@ const ListboxComponent = _ref => {
     itemDataTestId: itemDataTestId,
     onChange: handleSelectionChange,
     options: filteredOptions,
-    reversed: false,
+    reversed: true,
     showSelectAll: false,
     value: multiple ? value : [value],
     variant: "button",

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VARIANTS = void 0;
+const VARIANTS = exports.VARIANTS = {
+  picker: 'picker',
+  select: 'select'
+};

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

@@ -6,18 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _clone = _interopRequireDefault(require("lodash/clone"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = require("prop-types");
 var _lab = require("@material-ui/lab");
+var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
 var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
 var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
 var _UTPaper = _interopRequireDefault(require("../../../UTPaper"));
 var _UTValidation = _interopRequireDefault(require("../../../UTValidation"));
 var _utils = require("../../../UTValidation/utils");
 var _inputs = require("../../../../constants/inputs");
-var _buttonTypes = require("../../../../types/buttonTypes");
 var _InputComponent = _interopRequireDefault(require("./components/InputComponent"));
 var _ListboxComponent = _interopRequireDefault(require("./components/ListboxComponent"));
+var _types = require("./types");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _constants = require("./constants");
 var _utils2 = require("./utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -43,6 +44,7 @@ const UTSelect = _ref => {
     itemDataTestId,
     listDataTestId,
     listProps = {},
+    menuWidth,
     multiple = false,
     noMatchesText = 'No hay coincidencias con tu búsqueda',
     noOptionsText = 'No hay opciones disponibles',
@@ -57,7 +59,7 @@ const UTSelect = _ref => {
     title,
     titleVariant = _inputs.TITLE_VARIANTS.large,
     value = multiple ? [] : null,
-    variant = 'select',
+    variant = _constants.VARIANTS.select,
     withAutoReset = true
   } = _ref;
   const optionsSortedByCategory = (0, _react.useMemo)(() => {
@@ -102,7 +104,8 @@ const UTSelect = _ref => {
     if (isPopperOpen) setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, value, multiple));
   }, [isPopperOpen]);
   const validationData = (0, _react.useMemo)(() => error && (0, _utils.formatErrorToValidation)(error), [error]);
-  const filteredOptions = (0, _react.useMemo)(() => disableFilterOptions ? sortedOptions : sortedOptions.filter(option => "".concat(option.name).toLowerCase().includes(searchTerm.toLowerCase())), [sortedOptions, searchTerm, disableFilterOptions]);
+  const isPicker = variant === _constants.VARIANTS.picker;
+  const filteredOptions = (0, _react.useMemo)(() => disableFilterOptions || isPicker ? sortedOptions : sortedOptions.filter(option => "".concat(option.name).toLowerCase().includes(searchTerm.toLowerCase())), [sortedOptions, searchTerm, disableFilterOptions, isPicker]);
   const handleSearchChange = (0, _react.useCallback)(searchValue => {
     onChangeSearchTerm === null || onChangeSearchTerm === void 0 || onChangeSearchTerm(searchValue);
     setSearchTerm(searchValue);
@@ -154,24 +157,6 @@ const UTSelect = _ref => {
     suffix,
     variant
   }), [suffix, showClearButton, clearable, disabled, action, handleClearSelection, variant]);
-  const InputComponentToRender = (0, _react.useMemo)(() => params => /*#__PURE__*/_react.default.createElement(_InputComponent.default, {
-    alwaysShowPlaceholder: alwaysShowPlaceholder,
-    dataTestId: dataTestId,
-    disabled: disabled,
-    error: error,
-    inputSize: inputSize,
-    inputRef: inputRef,
-    leftAdornments: leftAdornments,
-    onBlur: handleInputBlur,
-    onChange: handleSearchChange,
-    onFocus: handleInputFocus,
-    params: params,
-    placeholder: placeholder,
-    readOnly: readOnly,
-    rightAdornments: rightAdornments,
-    value: searchTerm,
-    variant: variant
-  }), [alwaysShowPlaceholder, disabled, error, handleInputBlur, handleInputFocus, leftAdornments, placeholder, rightAdornments, searchTerm]);
   const listBoxProps = (0, _react.useMemo)(() => ({
     CustomRow,
     dataTestId: listDataTestId,
@@ -183,6 +168,19 @@ const UTSelect = _ref => {
     value,
     ...listProps
   }), [CustomRow, filteredOptions, handleSelectionChange, multiple, noMatchesText, value, listProps]);
+  const menuWidthRef = (0, _react.useRef)(menuWidth);
+  menuWidthRef.current = menuWidth;
+  const CustomPopper = (0, _react.useCallback)(props => {
+    const width = menuWidthRef.current;
+    return /*#__PURE__*/_react.default.createElement(_Popper.default, _extends({}, props, width ? {
+      placement: 'bottom-start'
+    } : {}, {
+      style: width ? {
+        ...props.style,
+        width
+      } : props.style
+    }));
+  }, []);
   const noOptionsTextComponent = /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: _stylesModule.default.noOptionsLabel,
     colorTheme: "gray"
@@ -193,11 +191,12 @@ const UTSelect = _ref => {
     actions: titleActions,
     required: required,
     size: titleVariant
-  }, title), /*#__PURE__*/_react.default.createElement(_lab.Autocomplete, _extends({}, freeWidth ? {
+  }, title), /*#__PURE__*/_react.default.createElement(_lab.Autocomplete, _extends({}, freeWidth && !menuWidth ? {
     classes: {
       popper: _stylesModule.default.popper
     }
   } : {}, {
+    PopperComponent: CustomPopper,
     disabled: disabled || readOnly,
     getOptionLabel: option => "".concat(option.name),
     ListboxComponent: _ListboxComponent.default,
@@ -209,7 +208,24 @@ const UTSelect = _ref => {
     open: isPopperOpen,
     options: optionsSortedByCategory,
     PaperComponent: _UTPaper.default,
-    renderInput: InputComponentToRender
+    renderInput: params => /*#__PURE__*/_react.default.createElement(_InputComponent.default, {
+      alwaysShowPlaceholder: alwaysShowPlaceholder,
+      dataTestId: dataTestId,
+      disabled: disabled,
+      error: error,
+      inputRef: inputRef,
+      inputSize: inputSize,
+      leftAdornments: leftAdornments,
+      onBlur: handleInputBlur,
+      onChange: handleSearchChange,
+      onFocus: handleInputFocus,
+      params: params,
+      placeholder: placeholder,
+      readOnly: readOnly,
+      rightAdornments: rightAdornments,
+      value: searchTerm,
+      variant: variant
+    })
   }, autocompleteProps)), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: "gray",
     variant: "small"
@@ -218,48 +234,5 @@ const UTSelect = _ref => {
     validationData: validationData
   }));
 };
-UTSelect.propTypes = {
-  action: (0, _propTypes.shape)({
-    Icon: _propTypes.string,
-    onClick: _propTypes.func,
-    size: _propTypes.string
-  }),
-  actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
-  alwaysShowPlaceholder: _propTypes.bool,
-  autocompleteProps: _propTypes.object,
-  className: _propTypes.string,
-  clearable: _propTypes.bool,
-  CustomRow: _propTypes.elementType,
-  dataTestId: _propTypes.string,
-  disabled: _propTypes.bool,
-  disableFilterOptions: _propTypes.bool,
-  error: _propTypes.string,
-  errorDataTestId: _propTypes.string,
-  freeWidth: _propTypes.bool,
-  helpText: _propTypes.string,
-  icon: _propTypes.string,
-  inputSize: _propTypes.string,
-  itemDataTestId: _propTypes.string,
-  listDataTestId: _propTypes.string,
-  listProps: _propTypes.object,
-  multiple: _propTypes.bool,
-  noMatchesText: _propTypes.string,
-  noOptionsText: _propTypes.string,
-  onChange: _propTypes.func,
-  onChangeSearchTerm: _propTypes.func,
-  options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    name: _propTypes.string,
-    value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number])
-  })),
-  placeholder: _propTypes.string,
-  prefix: _propTypes.string,
-  readOnly: _propTypes.bool,
-  required: _propTypes.bool,
-  suffix: _propTypes.string,
-  title: _propTypes.string,
-  titleVariant: _propTypes.string,
-  value: (0, _propTypes.oneOfType)([_propTypes.string, (0, _propTypes.arrayOf)((0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number]))]),
-  variant: _propTypes.string,
-  withAutoReset: _propTypes.bool
-};
+UTSelect.propTypes = _types.utselectTypes;
 var _default = exports.default = UTSelect;

package/dist/components/UTSelect/versions/V1/types.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.utselectTypes = void 0;
+var _propTypes = require("prop-types");
+var _buttonTypes = require("../../../../types/buttonTypes");
+var _constants = require("./constants");
+const utselectTypes = exports.utselectTypes = {
+  action: (0, _propTypes.shape)({
+    Icon: _propTypes.string,
+    onClick: _propTypes.func,
+    size: _propTypes.string
+  }),
+  actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
+  alwaysShowPlaceholder: _propTypes.bool,
+  autocompleteProps: _propTypes.object,
+  className: _propTypes.string,
+  clearable: _propTypes.bool,
+  CustomRow: _propTypes.elementType,
+  dataTestId: _propTypes.string,
+  disabled: _propTypes.bool,
+  disableFilterOptions: _propTypes.bool,
+  error: _propTypes.string,
+  errorDataTestId: _propTypes.string,
+  freeWidth: _propTypes.bool,
+  helpText: _propTypes.string,
+  icon: _propTypes.string,
+  inputSize: _propTypes.string,
+  itemDataTestId: _propTypes.string,
+  listDataTestId: _propTypes.string,
+  listProps: _propTypes.object,
+  menuWidth: _propTypes.string,
+  multiple: _propTypes.bool,
+  noMatchesText: _propTypes.string,
+  noOptionsText: _propTypes.string,
+  onChange: _propTypes.func,
+  onChangeSearchTerm: _propTypes.func,
+  options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    name: _propTypes.string,
+    value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number])
+  })),
+  placeholder: _propTypes.string,
+  prefix: _propTypes.string,
+  readOnly: _propTypes.bool,
+  required: _propTypes.bool,
+  suffix: _propTypes.string,
+  title: _propTypes.string,
+  titleVariant: _propTypes.string,
+  value: (0, _propTypes.oneOfType)([_propTypes.string, (0, _propTypes.arrayOf)((0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number]))]),
+  variant: (0, _propTypes.oneOf)(Object.values(_constants.VARIANTS)),
+  withAutoReset: _propTypes.bool
+};

package/dist/components/UTSelect/versions/V1/utils.js

@@ -4,13 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sortOptions = exports.shouldReset = exports.getRightAdornments = exports.getLeftAdornments = exports.getDisplayValue = void 0;
-var _array = require("@widergy/web-utils/lib/array");
 var _clone = _interopRequireDefault(require("lodash/clone"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _Palette = require("../../../../constants/Palette");
 var _constants = require("../../../UTBaseInputField/constants");
 var _constants2 = require("../../../UTCheckList/versions/V1/constants");
+var _constants3 = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const shouldResetMultipleSelect = (value, options) => !(0, _array.isEmpty)(value) && ((0, _array.isEmpty)(options) || value.some(el => !options.some(opt => opt.value === el) && !options.some(opt => opt.subOptions && opt.subOptions.some(sub => sub.value === el))));
-const shouldResetSimpleSelect = (value, options) => value && ((0, _array.isEmpty)(options) || !options.some(el => el.value === value) && !options.some(el => el.subOptions && el.subOptions.some(sub => sub.value === value)));
+const shouldResetMultipleSelect = (value, options) => !(0, _isEmpty.default)(value) && ((0, _isEmpty.default)(options) || value.some(el => !options.some(opt => opt.value === el) && !options.some(opt => opt.subOptions && opt.subOptions.some(sub => sub.value === el))));
+const shouldResetSimpleSelect = (value, options) => value && ((0, _isEmpty.default)(options) || !options.some(el => el.value === value) && !options.some(el => el.subOptions && el.subOptions.some(sub => sub.value === value)));
 const shouldReset = (value, options, isMultiple) => {
   if (isMultiple) return shouldResetMultipleSelect(value, options);
   return shouldResetSimpleSelect(value, options);
@@ -41,11 +43,11 @@ const getLeftAdornments = _ref => {
       showOnlyOnError: true
     }
   });
-  if (multiple && !(0, _array.isEmpty)(value)) adornments.push({
+  if (multiple && !(0, _isEmpty.default)(value)) adornments.push({
     name: _constants.COMPONENT_KEYS.BADGE,
     props: {
       text: value.length,
-      colorTheme: error ? 'error' : 'accent'
+      colorTheme: error ? _Palette.COLOR_THEMES.error : _Palette.COLOR_THEMES.accent
     }
   });
   if (prefix) adornments.push({
@@ -91,15 +93,14 @@ const getRightAdornments = _ref2 => {
         size: 'small'
       }
     }
-  });
-  adornments.push({
+  });else adornments.push({
     name: _constants.COMPONENT_KEYS.ICON,
     props: {
       Icon: 'IconChevronDown',
       changeIconOnError: false,
       changeOnError: true,
-      ...(variant === 'picker' && !disabled && {
-        colorTheme: 'dark'
+      ...(variant === _constants3.VARIANTS.picker && !disabled && {
+        colorTheme: _Palette.COLOR_THEMES.dark
       })
     }
   });

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

@@ -17,7 +17,7 @@
 %animatedActionsContainer {
   animation: slideInFromRight 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   display: flex;
-  grid-gap: var(--UT-shortcutPanel-header-gap, 8px);
+  grid-gap: var(--UT-shortcutPanel-header-gap, 0.5rem);
 }
 
 %textWithEllipsis {
@@ -55,25 +55,25 @@
     padding: var(--padding-lg, 24px) 0;
     position: relative !important;
     transition: width 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
-    width: var(--UT-shortcutPanel-width-collapsed, 56px);
+    width: var(--UT-shortcutPanel-width-collapsed, 3.5rem);
 
     &Open {
       padding: 0;
-      width: var(--UT-shortcutPanel-width, 256px);
+      width: var(--UT-shortcutPanel-width, 16rem);
     }
 
     .expandedPanelContent {
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
-      padding: 0 var(--UT-shortcutPanel-padding, 16px);
+      padding: 0 var(--UT-shortcutPanel-padding, 1rem);
       position: relative;
       width: 100%;
 
       .expandedPanelContentHeader {
         align-items: center;
         display: flex;
-        grid-gap: var(--UT-shortcutPanel-header-gap, 8px);
+        grid-gap: var(--UT-shortcutPanel-header-gap, 0.5rem);
         justify-content: space-between;
         position: sticky;
         top: 0;
@@ -88,7 +88,7 @@
         .expandedPanelContentActions {
           display: flex;
           flex-wrap: nowrap;
-          grid-gap: var(--UT-shortcutPanel-header-gap, 8px);
+          grid-gap: var(--UT-shortcutPanel-header-gap, 0.5rem);
 
           .expandedPanelContentActionsContainer {
             @extend %actionsContainer;
@@ -105,14 +105,14 @@
       }
 
       .expandedPanelContentCategory {
-        padding: var(--UT-shortcutPanel-category-padding, 8px) 0;
+        padding: var(--UT-shortcutPanel-category-padding, 0.5rem) 0;
 
         .expandedPanelContentCategoryHeader {
           align-items: center;
           border-radius: var(--radius-sm, 4px);
           display: flex;
-          grid-gap: var(--UT-shortcutPanel-category-gap, 8px);
-          padding: var(--UT-shortcutPanel-category-padding, 8px);
+          grid-gap: var(--UT-shortcutPanel-category-gap, 0.5rem);
+          padding: var(--UT-shortcutPanel-category-padding, 0.5rem);
           height: var(--UT-shortcutPanel-category-height);
 
           svg {
@@ -185,7 +185,7 @@
             align-items: center;
             display: flex;
             flex-grow: 1;
-            grid-gap: var(--UT-shortcutPanel-item-gap, 8px);
+            grid-gap: var(--UT-shortcutPanel-item-gap, 0.5rem);
             overflow: hidden;
 
             .hoverableContainer {

package/dist/components/UTStatus/theme.js

@@ -31,11 +31,11 @@ const getGridGap = _ref3 => {
     size
   } = _ref3;
   return {
-    [_constants.SIZES.large]: 'var(--UT-status-gap-large, 8px)',
-    [_constants.SIZES.medium]: 'var(--UT-status-gap-medium, 8px)',
-    [_constants.SIZES.small]: 'var(--UT-status-gap-small, 4px)',
-    [_constants.SIZES.xlarge]: 'var(--UT-status-gap-xlarge, 8px)',
-    [_constants.SIZES.xsmall]: 'var(--UT-status-gap-xsmall, 4px)'
+    [_constants.SIZES.large]: 'var(--UT-status-gap-large, 0.5rem)',
+    [_constants.SIZES.medium]: 'var(--UT-status-gap-medium, 0.5rem)',
+    [_constants.SIZES.small]: 'var(--UT-status-gap-small, 0.25rem)',
+    [_constants.SIZES.xlarge]: 'var(--UT-status-gap-xlarge, 0.5rem)',
+    [_constants.SIZES.xsmall]: 'var(--UT-status-gap-xsmall, 0.25rem)'
   }[size];
 };
 const getPadding = _ref4 => {
@@ -43,11 +43,11 @@ const getPadding = _ref4 => {
     size
   } = _ref4;
   return {
-    [_constants.SIZES.large]: 'var(--UT-status-padding-y-large, 4px) var(--UT-status-padding-x-large, 8px)',
-    [_constants.SIZES.medium]: 'var(--UT-status-padding-y-medium, 4px) var(--UT-status-padding-x-medium, 8px)',
-    [_constants.SIZES.small]: 'var(--UT-status-padding-y-small, 4px) var(--UT-status-padding-x-small, 8px)',
-    [_constants.SIZES.xlarge]: 'var(--UT-status-padding-y-xlarge, 8px) var(--UT-status-padding-x-xlarge, 12px)',
-    [_constants.SIZES.xsmall]: 'var(--UT-status-padding-y-xsmall, 2px) var(--UT-status-padding-x-xsmall, 4px)'
+    [_constants.SIZES.large]: 'var(--UT-status-padding-y-large, 0.25rem) var(--UT-status-padding-x-large, 0.5rem)',
+    [_constants.SIZES.medium]: 'var(--UT-status-padding-y-medium, 0.25rem) var(--UT-status-padding-x-medium, 0.5rem)',
+    [_constants.SIZES.small]: 'var(--UT-status-padding-y-small, 0.25rem) var(--UT-status-padding-x-small, 0.5rem)',
+    [_constants.SIZES.xlarge]: 'var(--UT-status-padding-y-xlarge, 0.5rem) var(--UT-status-padding-x-xlarge, 0.75rem)',
+    [_constants.SIZES.xsmall]: 'var(--UT-status-padding-y-xsmall, 0.125rem) var(--UT-status-padding-x-xsmall, 0.25rem)'
   }[size];
 };
 const getLabelVariant = _ref5 => {
@@ -68,11 +68,11 @@ const getIconSize = _ref6 => {
     size
   } = _ref6;
   return {
-    [_constants.SIZES.large]: 'var(--UT-status-icon-size-xs, 20px)',
-    [_constants.SIZES.medium]: 'var(--UT-status-icon-size-2xs, 16px)',
-    [_constants.SIZES.small]: 'var(--UT-status-icon-size-3xs, 12px)',
-    [_constants.SIZES.xlarge]: 'var(--UT-status-icon-size-xs, 20px)',
-    [_constants.SIZES.xsmall]: 'var(--UT-status-icon-size-3xs, 12px)'
+    [_constants.SIZES.large]: 'var(--UT-status-icon-size-xs, 1.25rem)',
+    [_constants.SIZES.medium]: 'var(--UT-status-icon-size-2xs, 1rem)',
+    [_constants.SIZES.small]: 'var(--UT-status-icon-size-3xs, 0.75rem)',
+    [_constants.SIZES.xlarge]: 'var(--UT-status-icon-size-xs, 1.25rem)',
+    [_constants.SIZES.xsmall]: 'var(--UT-status-icon-size-3xs, 0.75rem)'
   }[size];
 };
 exports.getIconSize = getIconSize;
@@ -116,7 +116,7 @@ const retrieveStyle = _ref8 => {
           variant
         })
       }),
-      borderRadius: 'var(--UT-status-radius, 4px)',
+      borderRadius: 'var(--UT-status-radius, 0.25rem)',
       display: 'flex',
       gridGap: getGridGap({
         size
@@ -137,8 +137,8 @@ const retrieveStyle = _ref8 => {
     },
     icon: {
       flexShrink: '0',
-      height: 'var(--UT-status-icon-size-xs, 20px)',
-      width: 'var(--UT-status-icon-size-xs, 20px)',
+      height: 'var(--UT-status-icon-size-xs, 1.25rem)',
+      width: 'var(--UT-status-icon-size-xs, 1.25rem)',
       '& path': {
         fill: getIconFill({
           theme,
@@ -165,20 +165,20 @@ const retrieveStyle = _ref8 => {
       }
     },
     iconXsmall: {
-      height: 'var(--UT-status-icon-size-3xs, 12px)',
-      width: 'var(--UT-status-icon-size-3xs, 12px)'
+      height: 'var(--UT-status-icon-size-3xs, 0.75rem)',
+      width: 'var(--UT-status-icon-size-3xs, 0.75rem)'
     },
     iconSmall: {
-      height: 'var(--UT-status-icon-size-3xs, 12px)',
-      width: 'var(--UT-status-icon-size-3xs, 12px)'
+      height: 'var(--UT-status-icon-size-3xs, 0.75rem)',
+      width: 'var(--UT-status-icon-size-3xs, 0.75rem)'
     },
     iconMedium: {
-      height: 'var(--UT-status-icon-size-2xs, 16px)',
-      width: 'var(--UT-status-icon-size-2xs, 16px)'
+      height: 'var(--UT-status-icon-size-2xs, 1rem)',
+      width: 'var(--UT-status-icon-size-2xs, 1rem)'
     },
     iconLarge: {
-      height: 'var(--UT-status-icon-size-xs, 20px)',
-      width: 'var(--UT-status-icon-size-xs, 20px)'
+      height: 'var(--UT-status-icon-size-xs, 1.25rem)',
+      width: 'var(--UT-status-icon-size-xs, 1.25rem)'
     },
     badgeXsmall: {
       height: '8px',

package/dist/esm/components/UTBanner/stories/UTBanner.stories.js

@@ -59,7 +59,12 @@ export default {
       description: 'Nombre del ícono (string) o componente React. Ej: "IconAlertCircle".'
     },
     iconProps: {
-      control: false
+      control: false,
+      description: 'Props adicionales que se pasan al componente Icon.'
+    },
+    classNames: {
+      control: false,
+      description: 'Clases CSS adicionales para personalizar el componente.'
     },
     onClose: {
       control: false
@@ -90,6 +95,16 @@ export default {
     }
   },
   component: UTBanner,
+  parameters: {
+    controls: {
+      exclude: ['classNames']
+    },
+    docs: {
+      description: {
+        component: 'Componente para mostrar mensajes de notificación con soporte para icono, título, descripción, texto de ayuda, categoría y botones de acción. Soporta múltiples variantes de color y tamaño, y layouts horizontal y vertical.'
+      }
+    }
+  },
   title: 'Energy-UI/UTBanner'
 };
 export const Playground = {};

package/dist/esm/components/UTBaseInputField/theme.js

@@ -31,6 +31,7 @@ const getBackgroundColor = _ref => {
   if (readOnly) return 'transparent';
   if (variant === 'gray') return theme.Palette.light['04'];
   if (variant === 'transparent' && error) return theme.Palette.error['01'];
+  if (variant === 'transparent') return 'transparent';
   if (disabled) return theme.Palette.light['03'];
   return theme.Palette.light['01'];
 };
@@ -135,22 +136,22 @@ export const retrieveStyle = _ref4 => {
       borderWidth: '1px'
     },
     focusedRoot: {
-      backgroundColor: theme.Palette.light['01'],
+      backgroundColor: variant === 'transparent' ? theme.Palette.light['03'] : theme.Palette.light['01'],
       '&:hover': {
-        backgroundColor: theme.Palette.light['01']
+        backgroundColor: variant === 'transparent' ? theme.Palette.light['03'] : theme.Palette.light['01']
       }
     },
     withValueRoot: {
       ...(variant === 'transparent' && !error && {
-        backgroundColor: actionPalette['01']
+        backgroundColor: 'transparent'
       })
     },
     focusedInputContainer: {
-      ...(!error && {
+      ...(variant !== 'transparent' && !error && {
         borderColor: "".concat(actionPalette['04'], " !important"),
         borderWidth: '2px'
       }),
-      ...(error && {
+      ...(variant !== 'transparent' && error && {
         borderColor: "".concat(theme.Palette.error['04'], " !important")
       })
     },