@widergy/energy-ui 3.171.3 → 3.172.1

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

@@ -37,7 +37,10 @@ const UTSelect = _ref => {
     disableFilterOptions = false,
     error,
     errorDataTestId,
+    fixedBottomOption,
     freeWidth = false,
+    hideSingleCategoryTitle = false,
+    paperClassName,
     helpText,
     icon,
     inputSize,
@@ -72,26 +75,38 @@ const UTSelect = _ref => {
     clonedOptions.forEach(option => {
       if (!categoryOrder.has(option.category)) categoryOrder.set(option.category, categoryOrder.size);
     });
-    return clonedOptions.sort((a, b) => categoryOrder.get(a.category) - categoryOrder.get(b.category));
-  }, [options]);
+    const sorted = clonedOptions.sort((a, b) => categoryOrder.get(a.category) - categoryOrder.get(b.category));
+    if (hideSingleCategoryTitle && categoryOrder.size <= 1) {
+      return sorted.map(_ref2 => {
+        let {
+          category: _category,
+          ...rest
+        } = _ref2;
+        return rest;
+      });
+    }
+    return sorted;
+  }, [options, hideSingleCategoryTitle]);
+  const displayOptions = (0, _react.useMemo)(() => fixedBottomOption ? [...optionsSortedByCategory, fixedBottomOption] : optionsSortedByCategory, [optionsSortedByCategory, fixedBottomOption]);
   const [isPopperOpen, setIsPopperOpen] = (0, _react.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, _react.useState)((0, _utils2.getDisplayValue)(value, optionsSortedByCategory, multiple));
+  const [searchTerm, setSearchTerm] = (0, _react.useState)((0, _utils2.getDisplayValue)(value, displayOptions, multiple));
   const [showClearButton, setShowClearButton] = (0, _react.useState)(!!searchTerm);
   const [sortedOptions, setSortedOptions] = (0, _react.useState)(optionsSortedByCategory);
   const inputRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    if (withAutoReset && (0, _utils2.shouldReset)(value, optionsSortedByCategory, multiple)) {
+    const fixedIsSelected = fixedBottomOption && (multiple ? Array.isArray(value) && value.includes(fixedBottomOption.value) : value === (fixedBottomOption === null || fixedBottomOption === void 0 ? void 0 : fixedBottomOption.value));
+    if (withAutoReset && !fixedIsSelected && (0, _utils2.shouldReset)(value, optionsSortedByCategory, multiple)) {
       onChange(null);
       setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, null, multiple));
     }
-  }, [multiple, onChange, optionsSortedByCategory, value, withAutoReset]);
+  }, [multiple, onChange, optionsSortedByCategory, value, withAutoReset, fixedBottomOption]);
   (0, _react.useEffect)(() => {
     if (!isPopperOpen) {
-      const displayValue = (0, _utils2.getDisplayValue)(value, optionsSortedByCategory, multiple);
+      const displayValue = (0, _utils2.getDisplayValue)(value, displayOptions, multiple);
       setSearchTerm(displayValue);
       setShowClearButton(displayValue);
     }
-  }, [value, optionsSortedByCategory, multiple, isPopperOpen]);
+  }, [value, displayOptions, multiple, isPopperOpen]);
   (0, _react.useEffect)(() => {
     if (isPopperOpen) {
       setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, value, multiple));
@@ -105,17 +120,21 @@ const UTSelect = _ref => {
   }, [isPopperOpen]);
   const validationData = (0, _react.useMemo)(() => error && (0, _utils.formatErrorToValidation)(error), [error]);
   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 filteredOptions = (0, _react.useMemo)(() => {
+    const base = disableFilterOptions || isPicker ? sortedOptions : sortedOptions.filter(option => "".concat(option.name).toLowerCase().includes(searchTerm.toLowerCase()));
+    if (!fixedBottomOption) return base;
+    return base.filter(opt => opt.value !== fixedBottomOption.value);
+  }, [sortedOptions, searchTerm, disableFilterOptions, isPicker, fixedBottomOption]);
   const handleSearchChange = (0, _react.useCallback)(searchValue => {
     onChangeSearchTerm === null || onChangeSearchTerm === void 0 || onChangeSearchTerm(searchValue);
     setSearchTerm(searchValue);
   }, [onChangeSearchTerm]);
   const clearSearchInputValue = (0, _react.useCallback)(inputValue => {
     setIsPopperOpen(false);
-    const displayValue = (0, _utils2.getDisplayValue)(inputValue, optionsSortedByCategory, multiple);
+    const displayValue = (0, _utils2.getDisplayValue)(inputValue, displayOptions, multiple);
     handleSearchChange(displayValue);
     setShowClearButton(displayValue !== '');
-  }, [_utils2.getDisplayValue, optionsSortedByCategory, multiple, handleSearchChange]);
+  }, [_utils2.getDisplayValue, displayOptions, multiple, handleSearchChange]);
   const handleSelectionChange = newValues => {
     const selectedValue = multiple ? newValues : newValues.length > 0 ? newValues[0] : '';
     onChange(selectedValue);
@@ -161,13 +180,14 @@ const UTSelect = _ref => {
     CustomRow,
     dataTestId: listDataTestId,
     filteredOptions,
+    fixedBottomOption,
     handleSelectionChange,
     itemDataTestId,
     multiple,
     noMatchesText,
     value,
     ...listProps
-  }), [CustomRow, filteredOptions, handleSelectionChange, multiple, noMatchesText, value, listProps]);
+  }), [CustomRow, filteredOptions, fixedBottomOption, handleSelectionChange, multiple, noMatchesText, value, listProps]);
   const menuWidthRef = (0, _react.useRef)(menuWidth);
   menuWidthRef.current = menuWidth;
   const CustomPopper = (0, _react.useCallback)(props => {
@@ -191,11 +211,15 @@ const UTSelect = _ref => {
     actions: titleActions,
     required: required,
     size: titleVariant
-  }, title), /*#__PURE__*/_react.default.createElement(_lab.Autocomplete, _extends({}, freeWidth && !menuWidth ? {
+  }, title), /*#__PURE__*/_react.default.createElement(_lab.Autocomplete, _extends({
     classes: {
-      popper: _stylesModule.default.popper
-    }
-  } : {}, {
+      ...(freeWidth && !menuWidth ? {
+        popper: _stylesModule.default.popper
+      } : {}),
+      ...(paperClassName ? {
+        paper: paperClassName
+      } : {})
+    },
     PopperComponent: CustomPopper,
     disabled: disabled || readOnly,
     getOptionLabel: option => "".concat(option.name),

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

@@ -24,7 +24,13 @@ const utselectTypes = exports.utselectTypes = {
   disableFilterOptions: _propTypes.bool,
   error: _propTypes.string,
   errorDataTestId: _propTypes.string,
+  fixedBottomOption: (0, _propTypes.shape)({
+    name: _propTypes.string,
+    value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number])
+  }),
   freeWidth: _propTypes.bool,
+  hideSingleCategoryTitle: _propTypes.bool,
+  paperClassName: _propTypes.string,
   helpText: _propTypes.string,
   icon: _propTypes.string,
   inputSize: _propTypes.string,

package/dist/components/UTTracker/UTTracker.stories.js

@@ -0,0 +1,332 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutTitle = exports.WithoutDetailsTab = exports.FlatMode = exports.ErrorVariant = exports.Default = exports.CardMode = exports.AllVariants = exports.AllModes = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("stories/utils");
+var _constants = require("./constants");
+var _ = _interopRequireDefault(require("."));
+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 subSteps = [{
+  id: 1,
+  subtitle: '02 noviembre 2023, 4:38 PM',
+  title: 'Description Step'
+}, {
+  id: 2,
+  subtitle: '02 noviembre 2023, 4:38 PM',
+  title: 'Description Step'
+}, {
+  id: 3,
+  subtitle: '02 noviembre 2023, 4:38 PM',
+  title: 'Description Step'
+}];
+const defaultSteps = [{
+  id: 1,
+  subSteps,
+  title: 'Solicitud confirmada'
+}, {
+  id: 2,
+  subSteps,
+  title: 'En preparación'
+}, {
+  id: 3,
+  title: 'En camino'
+}, {
+  description: 'Fecha estimada 07 de agosto',
+  id: 4,
+  title: 'Entregado'
+}];
+var _default = exports.default = {
+  args: {
+    currentStep: 2,
+    description: 'Hora estimada de entrega 7:00 PM',
+    detailsTab: {
+      enabled: true,
+      title: 'Ver Detalle'
+    },
+    mode: _constants.CARD,
+    steps: defaultSteps,
+    subtitle: '',
+    title: 'Pedido en curso',
+    variant: _constants.STANDARD
+  },
+  argTypes: {
+    classes: {
+      control: false,
+      description: 'Objeto de clases CSS para personalizar estilos internos vía theming.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'objectOf(string)'
+        }
+      }
+    },
+    classNames: {
+      control: false,
+      description: 'Objeto de clases CSS para override de estilos internos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'objectOf(string)'
+        }
+      }
+    },
+    currentStep: {
+      control: 'number',
+      description: 'Número del paso activo actualmente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    description: {
+      control: 'text',
+      description: 'Texto descriptivo que aparece debajo del subtítulo.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    detailsTab: {
+      control: 'object',
+      description: 'Configuración de la pestaña de detalle. `enabled` habilita el botón de colapsar; `title` es el texto del botón.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: '{ enabled: boolean, title: string }'
+        }
+      }
+    },
+    mode: {
+      control: 'inline-radio',
+      description: 'Determina el modo visual del componente.',
+      options: [_constants.CARD, _constants.FLAT],
+      table: {
+        defaultValue: {
+          summary: _constants.CARD
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)([_constants.CARD, _constants.FLAT])
+        }
+      }
+    },
+    steps: {
+      control: 'object',
+      description: 'Array de pasos a mostrar. Cada paso puede tener `id`, `title`, `subtitle`, `description` y `subSteps`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'arrayOf({ id, title, subtitle, description, subSteps })'
+        }
+      }
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Subtítulo que aparece junto al banner de error cuando `variant` es `error`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Título del componente. En modo `flat` con `detailsTab` habilitado actúa como botón de colapsar.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    variant: {
+      control: 'inline-radio',
+      description: 'Determina la variante visual del componente.',
+      options: [_constants.STANDARD, _constants.ERROR],
+      table: {
+        defaultValue: {
+          summary: _constants.STANDARD
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)([_constants.STANDARD, _constants.ERROR])
+        }
+      }
+    }
+  },
+  component: _.default,
+  parameters: {
+    controls: {
+      exclude: ['classes']
+    },
+    docs: {
+      description: {
+        component: 'Componente para mostrar el seguimiento de un proceso paso a paso. Soporta dos modos visuales (`card` y `flat`), variantes de estado (`standard` y `error`), pasos con sub-pasos, y una pestaña de detalle colapsable.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTTracker'
+};
+const Default = exports.Default = {
+  name: 'Playground'
+};
+const CardMode = exports.CardMode = {
+  args: {
+    mode: _constants.CARD,
+    variant: _constants.STANDARD
+  },
+  name: 'Modo Card',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker en modo `card`, con sombra y fondo blanco. Incluye la pestaña de detalle al pie.'
+      }
+    }
+  }
+};
+const FlatMode = exports.FlatMode = {
+  args: {
+    mode: _constants.FLAT,
+    variant: _constants.STANDARD
+  },
+  name: 'Modo Flat',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker en modo `flat`, con fondo transparente. El título actúa como botón de colapsar cuando `detailsTab` está habilitado.'
+      }
+    }
+  }
+};
+const ErrorVariant = exports.ErrorVariant = {
+  args: {
+    description: 'Quería recargas catalíticas y pedí normales',
+    mode: _constants.CARD,
+    subtitle: 'Me equivoqué en el pedido',
+    variant: _constants.ERROR
+  },
+  name: 'Variante Error',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker con `variant="error"`. Muestra el banner de error con `subtitle` y `description`.'
+      }
+    }
+  }
+};
+const WithoutDetailsTab = exports.WithoutDetailsTab = {
+  args: {
+    detailsTab: undefined,
+    mode: _constants.CARD,
+    variant: _constants.STANDARD
+  },
+  name: 'Sin Pestaña de Detalle',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker sin la pestaña de detalle colapsable. Las esquinas inferiores quedan redondeadas.'
+      }
+    }
+  }
+};
+const WithoutTitle = exports.WithoutTitle = {
+  args: {
+    mode: _constants.CARD,
+    title: undefined,
+    variant: _constants.STANDARD
+  },
+  name: 'Sin Título',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker sin título.'
+      }
+    }
+  }
+};
+const AllModes = exports.AllModes = {
+  render: args => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '24px',
+      flexWrap: 'wrap'
+    }
+  }, [_constants.CARD, _constants.FLAT].map(mode => /*#__PURE__*/_react.default.createElement("div", {
+    key: mode,
+    style: {
+      flex: 1,
+      minWidth: '300px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+    mode: mode,
+    title: "Modo: ".concat(mode)
+  }))))),
+  name: 'Todos los Modos',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparativa de los dos modos disponibles: `card` y `flat`.'
+      }
+    }
+  }
+};
+const AllVariants = exports.AllVariants = {
+  render: args => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '24px',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: '300px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+    description: "Hora estimada de entrega 7:00 PM",
+    subtitle: "",
+    title: "Variante: standard",
+    variant: _constants.STANDARD
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: '300px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+    description: "Quer\xEDa recargas catal\xEDticas y ped\xED normales",
+    subtitle: "Me equivoqu\xE9 en el pedido",
+    title: "Variante: error",
+    variant: _constants.ERROR
+  })))),
+  name: 'Todas las Variantes',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparativa de las dos variantes disponibles: `standard` y `error`.'
+      }
+    }
+  }
+};

package/dist/esm/components/UTButton/constants.js

@@ -18,6 +18,8 @@ export const ICON_PLACEMENTS = {
 export const DEFAULT_PROPS = {
   colorTheme: 'secondary',
   disabled: false,
+  fullHeight: false,
+  fullWidth: false,
   hideTextOnResponsive: false,
   iconPlacement: ICON_PLACEMENTS.left,
   loading: false,

package/dist/esm/components/UTButton/index.js

@@ -21,6 +21,8 @@ const UTButton = _ref => {
     count,
     dataTestId,
     disabled,
+    fullHeight,
+    fullWidth,
     hideTextOnResponsive,
     Icon,
     iconPlacement,
@@ -50,7 +52,6 @@ const UTButton = _ref => {
   } = useMemo(() => getIconProps({
     className: icon,
     colorTheme,
-    hasContent: !!children,
     hideTextOnResponsive,
     Icon,
     iconPlacement,
@@ -58,7 +59,7 @@ const UTButton = _ref => {
     RightIcon,
     size,
     variant
-  }), [colorTheme, children, hideTextOnResponsive, icon, Icon, iconPlacement, LeftIcon, RightIcon, size, variant]);
+  }), [colorTheme, hideTextOnResponsive, icon, Icon, iconPlacement, LeftIcon, RightIcon, size, variant]);
   const LeftIconToShow = LeftIconComponent && /*#__PURE__*/React.createElement(LeftIconComponent, _extends({}, leftIconBaseProps, leftIconProps));
   const RightIconToShow = RightIconComponent && /*#__PURE__*/React.createElement(RightIconComponent, _extends({}, rightIconBaseProps, rightIconProps));
   const counterColorTheme = getCounterColorTheme(colorTheme, variant);
@@ -72,7 +73,7 @@ const UTButton = _ref => {
   }), children), RightIconToShow);
   return /*#__PURE__*/React.createElement(Button, {
     classes: materialButtonClasses,
-    className: "\n        ".concat(styles["padding".concat(capitalize(size))], "\n        ").concat(hideTextOnResponsive && styles.hideTextOnResponsive, "\n        ").concat(!hideTextOnResponsive && !children && styles.noChildren, "\n      "),
+    className: "\n        ".concat(styles["padding".concat(capitalize(size))], "\n        ").concat(fullHeight && styles.fullHeight, "\n        ").concat(fullWidth && styles.fullWidth, "\n        ").concat(hideTextOnResponsive && styles.hideTextOnResponsive, "\n        ").concat(!hideTextOnResponsive && !children && styles.noChildren, "\n      "),
     "data-testid": dataTestId,
     disabled: disabled || loading,
     onClick: onClick,
@@ -90,6 +91,8 @@ UTButton.propTypes = {
   count: number,
   dataTestId: string,
   disabled: bool,
+  fullHeight: bool,
+  fullWidth: bool,
   hideTextOnResponsive: bool,
   /**
    * @deprecated Use LeftIcon or RightIcon instead.

package/dist/esm/components/UTButton/stories/UTButtonSizes.stories.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import UTButton from '..';
 import { COMMON_ARG_TYPES, COMMON_ARGS, COMMON_PARAMETERS } from './storiesConstants';
 export default {
@@ -30,4 +31,18 @@ export const Large = {
     children: 'Large Size',
     size: 'large'
   }
+};
+export const FullHeight = {
+  args: {
+    children: 'Full Height',
+    fullHeight: true
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      height: 80,
+      border: '1px dashed #ccc',
+      padding: 8
+    }
+  }, /*#__PURE__*/React.createElement(UTButton, args))
 };

package/dist/esm/components/UTButton/stories/storiesConstants.js

@@ -88,6 +88,30 @@ export const COMMON_ARG_TYPES = {
       }
     }
   },
+  fullHeight: {
+    control: 'boolean',
+    description: 'Si es `true`, el botón ocupa el alto completo de su contenedor padre. Desactiva el `min-height` por tamaño.',
+    table: {
+      defaultValue: {
+        summary: DEFAULT_PROPS.fullHeight
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  fullWidth: {
+    control: 'boolean',
+    description: 'Si es `true`, el botón ocupa el ancho completo de su contenedor padre. Desactiva el `min-width`.',
+    table: {
+      defaultValue: {
+        summary: DEFAULT_PROPS.fullWidth
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
   hideTextOnResponsive: {
     control: 'boolean',
     description: 'Si es `true` y hay ícono, el contenido del botón no se muestra en dispositivos móviles.',
@@ -217,6 +241,8 @@ export const COMMON_ARGS = {
   colorTheme: DEFAULT_PROPS.colorTheme,
   dataTestId: 'customButtonId',
   disabled: DEFAULT_PROPS.disabled,
+  fullHeight: DEFAULT_PROPS.fullHeight,
+  fullWidth: DEFAULT_PROPS.fullWidth,
   hideTextOnResponsive: DEFAULT_PROPS.hideTextOnResponsive,
   loading: DEFAULT_PROPS.loading,
   size: DEFAULT_PROPS.size,

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

@@ -65,6 +65,16 @@ $small-icon: var(--UT-button-icon-size-sm, 1.25rem);
   padding: var(--UT-button-padding-xs, 0.25rem) var(--UT-button-padding-sm, 0.5rem);
 }
 
+.fullHeight {
+  min-height: unset;
+  height: 100%;
+}
+
+.fullWidth {
+  min-width: unset;
+  width: 100%;
+}
+
 .hideTextOnResponsive {
   .textContainer {
     @media #{$mobile} {

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

@@ -44,7 +44,7 @@ export const variantsColorTheme = (theme, colorTheme, variant) => {
       }
     },
     [VARIANTS_NAMES.outlined]: {
-      border: "1px solid ".concat(actionColorName === COLORS_MAPPER.secondary ? neutralTheme['05'] : lightTheme['04']),
+      border: "1px solid ".concat(lightTheme['04']),
       fill: colorTheme === COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
       '&:hover': {
         backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],

package/dist/esm/components/UTButton/utils.js

@@ -8,7 +8,6 @@ const buildSingleIconProps = _ref => {
   let {
     className,
     colorTheme,
-    hasContent,
     hideTextOnResponsive,
     Icon,
     size,
@@ -17,7 +16,7 @@ const buildSingleIconProps = _ref => {
   if (!Icon) return null;
   return {
     IconComponent: isUTIcon(Icon) ? UTIcon : Icon,
-    className: "\n      ".concat(styles.baseIcon, "\n      ").concat(className, "\n      ").concat(hasContent ? styles.icon : styles["iconOnly".concat(capitalize(size))], "\n      ").concat(hideTextOnResponsive ? styles["adaptableIcon".concat(capitalize(size))] : '', "\n    "),
+    className: "\n      ".concat(styles.baseIcon, "\n      ").concat(className, "\n      ").concat(styles.icon, "\n      ").concat(hideTextOnResponsive ? styles["adaptableIcon".concat(capitalize(size))] : '', "\n    "),
     ...(isUTIcon(Icon) ? {
       colorTheme: getButtonElementColorTheme(colorTheme, variant),
       name: Icon
@@ -28,7 +27,6 @@ export const getIconProps = _ref2 => {
   let {
     className,
     colorTheme,
-    hasContent,
     hideTextOnResponsive,
     Icon,
     iconPlacement,
@@ -42,7 +40,6 @@ export const getIconProps = _ref2 => {
   const commonParams = {
     className,
     colorTheme,
-    hasContent,
     hideTextOnResponsive,
     size,
     variant

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

@@ -1,11 +1,11 @@
-import { COLOR_THEMES } from '../../constants/Palette';
+import { COLOR_THEMES, COLOR_SHADES } from '../../constants/Palette';
 export const backgroundColor = function (theme, area) {
   var _theme$Palette;
   let areaProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const colorTheme = areaProps.colorTheme || COLOR_THEMES.light;
   const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
   const areaColor = actionPaletteColors[colorTheme];
-  const shade = areaProps.shade || (COLOR_THEMES.light === colorTheme ? '03' : '01');
+  const shade = areaProps.shade || (COLOR_THEMES.light === colorTheme ? COLOR_SHADES.shade03 : COLOR_SHADES.shade01);
   return {
     backgroundColor: area ? areaColor[shade] : 'transparent'
   };

package/dist/esm/components/UTDataElement/README.md

@@ -134,4 +134,4 @@ If the component has any `children`, it will automatically become collapsible wi
 
 ```javascript
 <UTDataElement area title="Highlighted Item" Data="Important information" Icon="IconStar" />
-```
+```

package/dist/esm/components/UTPaper/index.js

@@ -8,15 +8,17 @@ const UTPaper = _ref => {
   let {
     children,
     classes,
+    className,
     ...otherProps
   } = _ref;
   return /*#__PURE__*/React.createElement(Paper, _extends({}, otherProps, {
-    className: classes.paper
+    className: "".concat(classes.paper).concat(className ? " ".concat(className) : '')
   }), children);
 };
 UTPaper.propTypes = {
   children: object,
   classes: objectOf(string),
+  className: string,
   otherProps: object
 };
 export default WithTheme(retrieveStyle)(UTPaper);