@widergy/energy-ui 3.22.3 → 3.22.4

package/dist/components/UTRating/theme.js

@@ -54,39 +54,39 @@ const retrieveStyle = _ref => {
     },
     faceButtonSelected: {},
     label: {
-      color: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'label', 'color'])}`,
-      fontSize: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'label', 'fontSize'])}`,
-      right: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'label', 'right'])}`
+      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'label', 'color'])),
+      fontSize: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'label', 'fontSize'])),
+      right: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'label', 'right']))
     },
     labelBottomFirst: {
-      alignSelf: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomFirst', 'alignSelf'])}`,
-      position: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomFirst', 'position'])}`,
-      right: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomFirst', 'right'])}`,
-      top: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomFirst', 'top'])}`,
-      width: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomFirst', 'width'])}`
+      alignSelf: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomFirst', 'alignSelf'])),
+      position: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomFirst', 'position'])),
+      right: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomFirst', 'right'])),
+      top: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomFirst', 'top'])),
+      width: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomFirst', 'width']))
     },
     labelBottomLast: {
-      alignSelf: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomLast', 'alignSelf'])}`,
-      position: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomLast', 'position'])}`,
-      right: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomLast', 'right'])}`,
-      top: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomLast', 'top'])}`,
-      width: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomLast', 'width'])}`
+      alignSelf: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomLast', 'alignSelf'])),
+      position: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomLast', 'position'])),
+      right: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomLast', 'right'])),
+      top: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomLast', 'top'])),
+      width: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'labelBottomLast', 'width']))
     },
     avatar: {
-      color: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'avatar', 'color'], _colorsModule.default.gray3)} !important`
+      color: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'avatar', 'color'], _colorsModule.default.gray3), " !important")
     },
     container: {
-      justifyContent: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'container', 'justifyContent'])}`,
-      pointerEvents: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'container', 'pointerEvents'])}`
+      justifyContent: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'container', 'justifyContent'])),
+      pointerEvents: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'container', 'pointerEvents']))
     },
     circleWithTextBottom: {
-      margin: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'circleWithTextBottom', 'margin'])}`,
-      width: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'circleWithTextBottom', 'width'])}`
+      margin: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'circleWithTextBottom', 'margin'])),
+      width: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'circleWithTextBottom', 'width']))
     },
     title: {
-      fontWeight: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'title', 'fontWeight'])}`,
-      marginBottom: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'title', 'marginBottom'])}`,
-      textAlign: `${(0, _seamlessImmutable.getIn)(theme, ['UTRating', 'title', 'textAlign'])}`
+      fontWeight: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'title', 'fontWeight'])),
+      marginBottom: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'title', 'marginBottom'])),
+      textAlign: "".concat((0, _seamlessImmutable.getIn)(theme, ['UTRating', 'title', 'textAlign']))
     }
   };
 };

package/dist/components/UTRipple/Ripple.js

@@ -56,10 +56,10 @@ const Ripple = _ref => {
     unmountOnExit: true,
     onExit: handleExit
   }, other), /*#__PURE__*/_react.default.createElement("span", {
-    className: `${_stylesModule.default.ripple} ${enter && _stylesModule.default.rippleEnter}`,
+    className: "".concat(_stylesModule.default.ripple, " ").concat(enter && _stylesModule.default.rippleEnter),
     style: rippleStyles
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: `${_stylesModule.default.child} ${leaving && _stylesModule.default.rippleExit}`
+    className: "".concat(_stylesModule.default.child, " ").concat(leaving && _stylesModule.default.rippleExit)
   })));
 };
 Ripple.propTypes = {

package/dist/components/UTSelect/components/Option/index.js

@@ -22,7 +22,7 @@ const Option = _ref => {
   const OptionIcon = optionProps.icon;
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, isMultiple && /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
     color: "primary",
-    checked: value?.indexOf(optionProps[valueKey]) > -1
+    checked: (value === null || value === void 0 ? void 0 : value.indexOf(optionProps[valueKey])) > -1
   }), OptionIcon ? /*#__PURE__*/_react.default.createElement("div", {
     className: classes.labelContainer
   }, /*#__PURE__*/_react.default.createElement(OptionIcon, {

package/dist/components/UTSelect/index.js

@@ -59,7 +59,7 @@ const UTSelect = _ref => {
   const {
     multiple: isMultiple,
     upperTitle
-  } = field?.configuration || {};
+  } = (field === null || field === void 0 ? void 0 : field.configuration) || {};
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
   (0, _react.useEffect)(() => {
     if (withAutoReset && (0, _utils.shouldReset)(input.value, options, valueKey, isMultiple)) input.onChange(null);

package/dist/components/UTSelect/theme.js

@@ -19,7 +19,7 @@ const retrieveStyle = _ref => {
       flexShrink: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'container', 'flexShrink'], '0'),
       width: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'container', 'width'], '100%'),
       margin: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'container', 'margin'], '0'),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'container', 'color'], `${_colorsModule.default.gray}`),
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'container', 'color'], "".concat(_colorsModule.default.gray)),
       flexDirection: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'container', 'flexDirection'], 'column'),
       alignItems: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'container', 'alignItems'])
     },
@@ -32,13 +32,13 @@ const retrieveStyle = _ref => {
     labelIcon: {
       height: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'inputIcon', 'height'], '12px'),
       width: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'inputIcon', 'width'], 'auto'),
-      fill: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'inputIcon', 'fill'], `${_colorsModule.default.gray}`),
+      fill: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'inputIcon', 'fill'], "".concat(_colorsModule.default.gray)),
       padding: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'inputIcon', 'padding'], '0px 5px 0px 0px')
     },
     optionIcon: {
       height: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'inputIcon', 'height'], '20px'),
       width: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'inputIcon', 'width'], 'auto'),
-      fill: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'inputIcon', 'fill'], `${_colorsModule.default.gray}`),
+      fill: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'inputIcon', 'fill'], "".concat(_colorsModule.default.gray)),
       padding: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'inputIcon', 'padding'], '0px 10px 0px 0px')
     },
     labelContainer: {
@@ -76,20 +76,20 @@ const retrieveMuiTheme = (theme, muiTheme) => {
         },
         root: {
           '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
-            border: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'notchedOutline', 'hover', 'border'], `1px solid ${_colorsModule.default.gray}`),
+            border: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'notchedOutline', 'hover', 'border'], "1px solid ".concat(_colorsModule.default.gray)),
             borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'notchedOutline', 'hover', 'borderColor'], 'none')
           },
           '&$focused $notchedOutline': {
-            border: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'notchedOutline', 'focused', 'border'], `2px solid ${_colorsModule.default.primary}`),
+            border: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'notchedOutline', 'focused', 'border'], "2px solid ".concat(_colorsModule.default.primary)),
             borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'notchedOutline', 'hover', 'borderColor'], 'none')
           },
           '&$disabled $notchedOutline': {
-            border: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'notchedOutline', 'disabled', 'border'], `1px solid ${_colorsModule.default.gray}`),
+            border: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'notchedOutline', 'disabled', 'border'], "1px solid ".concat(_colorsModule.default.gray)),
             borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'notchedOutline', 'hover', 'borderColor'], 'none')
           }
         },
         notchedOutline: {
-          border: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'notchedOutline', 'unfocused', 'border'], `1px solid ${theme.Palette.error['05']}`),
+          border: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'notchedOutline', 'unfocused', 'border'], "1px solid ".concat(theme.Palette.error['05'])),
           borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'notchedOutline', 'hover', 'borderColor'], 'none')
         }
       },
@@ -108,25 +108,25 @@ const retrieveMuiTheme = (theme, muiTheme) => {
         },
         underline: {
           '&:hover:not($disabled):not($focused):not($error):before': {
-            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'underline', 'hover', 'borderBottom'], `1px solid ${_colorsModule.default.gray}`)
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
           },
           '&:hover:not($disabled):before': {
-            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'underline', 'hover', 'borderBottom'], `1px solid ${_colorsModule.default.gray}`)
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
           },
           '&$disabled:before': {
-            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'underline', 'disabled', 'borderBottom'], `1px solid ${_colorsModule.default.gray}`)
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'underline', 'disabled', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
           },
           '&:before': {
-            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'underline', 'unfocused', 'borderBottom'], `1px solid ${_colorsModule.default.gray}`)
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'underline', 'unfocused', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
           },
           '&$focused:after': {
-            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'underline', 'focused', 'borderBottom'], `2px solid ${_colorsModule.default.inputPrimary}`)
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'underline', 'focused', 'borderBottom'], "2px solid ".concat(_colorsModule.default.inputPrimary))
           },
           '&:after': {
-            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'underline', 'base', 'borderBottom'], `2px solid ${_colorsModule.default.inputPrimary}`)
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTSelect', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colorsModule.default.inputPrimary))
           },
           '&$error:after': {
-            borderBottom: `2px solid ${theme.Palette.error['05']}`,
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
             borderBottomColor: theme.Palette.error['05']
           }
         }

package/dist/components/UTSelectableCard/index.js

@@ -62,15 +62,11 @@ const UTSelectableCard = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", {
     role: "button",
     onClick: () => !disabled && onClick(),
-    className: `
-      ${classes.item}
-      ${disabled ? classes[`${appearance}DisabledContainer`] : selected ? classes[`${appearance}SelectedContainer`] : classes[`${appearance}Apareance`]}
-      ${classes[`${size}Size`]}
-    `
+    className: "\n      ".concat(classes.item, "\n      ").concat(disabled ? classes["".concat(appearance, "DisabledContainer")] : selected ? classes["".concat(appearance, "SelectedContainer")] : classes["".concat(appearance, "Apareance")], "\n      ").concat(classes["".concat(size, "Size")], "\n    ")
   }, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
-    className: `${classes.icon} ${classNames.icon}`
+    className: "".concat(classes.icon, " ").concat(classNames.icon)
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${classes.textContainer} ${checkIcon && classes.textContainerWithCheckedIcon}`
+    className: "".concat(classes.textContainer, " ").concat(checkIcon && classes.textContainerWithCheckedIcon)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.column
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -84,11 +80,11 @@ const UTSelectableCard = _ref => {
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.tooltip
   }, /*#__PURE__*/_react.default.createElement(HelpIcon, {
-    className: `${classes.infoIcon}`
+    className: "".concat(classes.infoIcon)
   })))), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: classes.description
   }, description)), !(0, _object.objectIsEmpty)(aditionalInfo) && /*#__PURE__*/_react.default.createElement("div", {
-    className: `${classes.column} ${classes.aditionalInfoColumn}`
+    className: "".concat(classes.column, " ").concat(classes.aditionalInfoColumn)
   }, !!aditionalInfo.title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: classes.aditionalInfoTitle,
     variant: "small",

package/dist/components/UTSelectableCard/theme.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = void 0;
 var _shadowUtils = require("../../utils/shadowUtils");
 const retrieveStyle = _ref => {
+  var _theme$Palette$shadow, _theme$Palette$action, _theme$Palette$action2, _theme$Palette$action3, _theme$Palette$action4, _theme$Palette$action5, _theme$Palette$action6, _theme$Palette$action7, _theme$Palette$action8, _theme$Palette$action9, _theme$Palette$action10, _theme$Palette$action11, _theme$Palette$action12, _theme$Palette$action13;
   let {
     theme
   } = _ref;
@@ -85,10 +86,10 @@ const retrieveStyle = _ref => {
     whiteApareance: {
       backgroundColor: theme.Palette.light['01'],
       boxShadow: (0, _shadowUtils.getShadow)({
-        color: theme.Palette.shadows?.grayscale,
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
         level: 1
       }),
-      outline: `2px solid transparent`,
+      outline: "2px solid transparent",
       '& $titleText, & $aditionalInfoTitle': {
         color: theme.Palette.dark['05']
       },
@@ -112,26 +113,26 @@ const retrieveStyle = _ref => {
     },
     whiteSelectedContainer: {
       boxShadow: 'none',
-      outline: `2px solid ${theme.Palette.actions?.accent['05'] || theme.Palette.accent['05']}`,
+      outline: "2px solid ".concat(((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['05']) || theme.Palette.accent['05']),
       '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
-        color: theme.Palette.actions?.accent['05'] || theme.Palette.accent['05']
+        color: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['05']) || theme.Palette.accent['05']
       },
       '& $icon path, & $infoIcon path, & $checkIcon path': {
-        fill: theme.Palette.actions?.accent['05'] || theme.Palette.accent['05']
+        fill: ((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.accent['05']) || theme.Palette.accent['05']
       },
       '&:hover': {
-        backgroundColor: theme.Palette.actions?.accent['01'] || theme.Palette.accent['01'],
-        outline: `2px solid ${theme.Palette.actions?.accent['05'] || theme.Palette.accent['05']}`
+        backgroundColor: ((_theme$Palette$action4 = theme.Palette.actions) === null || _theme$Palette$action4 === void 0 ? void 0 : _theme$Palette$action4.accent['01']) || theme.Palette.accent['01'],
+        outline: "2px solid ".concat(((_theme$Palette$action5 = theme.Palette.actions) === null || _theme$Palette$action5 === void 0 ? void 0 : _theme$Palette$action5.accent['05']) || theme.Palette.accent['05'])
       },
       '&:active': {
-        backgroundColor: theme.Palette.actions?.accent['02'] || theme.Palette.accent['02'],
-        outline: `2px solid ${theme.Palette.actions?.accent['05'] || theme.Palette.accent['05']}`
+        backgroundColor: ((_theme$Palette$action6 = theme.Palette.actions) === null || _theme$Palette$action6 === void 0 ? void 0 : _theme$Palette$action6.accent['02']) || theme.Palette.accent['02'],
+        outline: "2px solid ".concat(((_theme$Palette$action7 = theme.Palette.actions) === null || _theme$Palette$action7 === void 0 ? void 0 : _theme$Palette$action7.accent['05']) || theme.Palette.accent['05'])
       }
     },
     whiteDisabledContainer: {
       backgroundColor: theme.Palette.light['03'],
       boxShadow: 'none',
-      outline: `2px solid transparent`,
+      outline: "2px solid transparent",
       '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
         color: theme.Palette.gray['04']
       },
@@ -140,14 +141,14 @@ const retrieveStyle = _ref => {
       },
       '&:hover': {
         backgroundColor: theme.Palette.light['03'],
-        outline: `2px solid transparent`,
+        outline: "2px solid transparent",
         pointerEvents: 'none'
       }
     },
     // Gray apareance
     grayApareance: {
       backgroundColor: theme.Palette.light['03'],
-      outline: `1px solid ${theme.Palette.light['05']}`,
+      outline: "1px solid ".concat(theme.Palette.light['05']),
       '& $titleText, & $aditionalInfoTitle': {
         color: theme.Palette.dark['05']
       },
@@ -168,19 +169,19 @@ const retrieveStyle = _ref => {
       }
     },
     graySelectedContainer: {
-      backgroundColor: theme.Palette.actions?.accent['01'] || theme.Palette.accent['01'],
-      outline: `2px solid ${theme.Palette.actions?.accent['03'] || theme.Palette.accent['03']}`,
+      backgroundColor: ((_theme$Palette$action8 = theme.Palette.actions) === null || _theme$Palette$action8 === void 0 ? void 0 : _theme$Palette$action8.accent['01']) || theme.Palette.accent['01'],
+      outline: "2px solid ".concat(((_theme$Palette$action9 = theme.Palette.actions) === null || _theme$Palette$action9 === void 0 ? void 0 : _theme$Palette$action9.accent['03']) || theme.Palette.accent['03']),
       '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
-        color: theme.Palette.actions?.accent['05'] || theme.Palette.accent['05']
+        color: ((_theme$Palette$action10 = theme.Palette.actions) === null || _theme$Palette$action10 === void 0 ? void 0 : _theme$Palette$action10.accent['05']) || theme.Palette.accent['05']
       },
       '& $icon path, & $infoIcon path, & $checkIcon path': {
-        fill: theme.Palette.actions?.accent['05'] || theme.Palette.accent['05']
+        fill: ((_theme$Palette$action11 = theme.Palette.actions) === null || _theme$Palette$action11 === void 0 ? void 0 : _theme$Palette$action11.accent['05']) || theme.Palette.accent['05']
       },
       '&:hover': {
-        backgroundColor: theme.Palette.actions?.accent['02'] || theme.Palette.accent['02']
+        backgroundColor: ((_theme$Palette$action12 = theme.Palette.actions) === null || _theme$Palette$action12 === void 0 ? void 0 : _theme$Palette$action12.accent['02']) || theme.Palette.accent['02']
       },
       '&:active': {
-        backgroundColor: theme.Palette.actions?.accent['03'] || theme.Palette.accent['03'],
+        backgroundColor: ((_theme$Palette$action13 = theme.Palette.actions) === null || _theme$Palette$action13 === void 0 ? void 0 : _theme$Palette$action13.accent['03']) || theme.Palette.accent['03'],
         '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
           color: theme.Palette.light['01']
         },
@@ -191,7 +192,7 @@ const retrieveStyle = _ref => {
     },
     grayDisabledContainer: {
       backgroundColor: theme.Palette.light['03'],
-      outline: `2px solid ${theme.Palette.light['05']}`,
+      outline: "2px solid ".concat(theme.Palette.light['05']),
       '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
         color: theme.Palette.gray['04']
       },

package/dist/components/UTSidebar/components/ListOption/index.js

@@ -37,7 +37,10 @@ const ListOption = _ref => {
       setOpenMenu(true);
     } else setOpenMenu(!openMenu);
   };
-  const optionHeight = (0, _react.useMemo)(() => openMenu && open ? options.length * optionRef?.current?.clientHeight : 0, [openMenu, open]);
+  const optionHeight = (0, _react.useMemo)(() => {
+    var _optionRef$current;
+    return openMenu && open ? options.length * (optionRef === null || optionRef === void 0 || (_optionRef$current = optionRef.current) === null || _optionRef$current === void 0 ? void 0 : _optionRef$current.clientHeight) : 0;
+  }, [openMenu, open]);
   const hasSelectedItem = (0, _react.useMemo)(() => options.some(opt => opt.link === location), [location, options]);
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Option.default, {
     classes: classes,

package/dist/components/UTSidebar/components/LogosContainer/index.js

@@ -24,13 +24,13 @@ const LogosContainer = _ref => {
     showBigLogo
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${containerClassName} ${_stylesModule.default.logoContainer}`
+    className: "".concat(containerClassName, " ").concat(_stylesModule.default.logoContainer)
   }, BigLogo && /*#__PURE__*/_react.default.createElement(_DynamicIcon.default, {
     Icon: BigLogo,
-    className: `${bigLogoClassName} ${_stylesModule.default.logo} ${showBigLogo && _stylesModule.default.visibleIcon}`
+    className: "".concat(bigLogoClassName, " ").concat(_stylesModule.default.logo, " ").concat(showBigLogo && _stylesModule.default.visibleIcon)
   }), SmallLogo && /*#__PURE__*/_react.default.createElement(_DynamicIcon.default, {
     Icon: SmallLogo,
-    className: `${smallLogoClassName} ${_stylesModule.default.logo} ${!showBigLogo && _stylesModule.default.visibleIcon}`
+    className: "".concat(smallLogoClassName, " ").concat(_stylesModule.default.logo, " ").concat(!showBigLogo && _stylesModule.default.visibleIcon)
   }), badgeContent && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: badgeClassName
   }, badgeContent));

package/dist/components/UTSidebar/components/Option/index.js

@@ -55,53 +55,31 @@ const Option = _ref => {
     className: classes.tooltip
   };
   return /*#__PURE__*/_react.default.createElement(Container, containerProps, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
-    className: `
-        ${_stylesModule.default.option}
-        ${classes.option}
-        ${isSelected && `${_stylesModule.default.optionSelected} ${classes.optionSelected}`}
-        ${isSelected && open && classes.optionSelectedOpened}
-        ${isSelected && !isSelectedGroup && !withTooltip && _stylesModule.default.removeEvents}
-      `,
+    className: "\n        ".concat(_stylesModule.default.option, "\n        ").concat(classes.option, "\n        ").concat(isSelected && "".concat(_stylesModule.default.optionSelected, " ").concat(classes.optionSelected), "\n        ").concat(isSelected && open && classes.optionSelectedOpened, "\n        ").concat(isSelected && !isSelectedGroup && !withTooltip && _stylesModule.default.removeEvents, "\n      "),
     onClick: onClick || handleRedirection,
     ref: optionRef
   }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, {
-    className: `
-          ${classes.optionIconContainer}
-          ${isSelected && `${classes.optionIconContainerSelected} ${_stylesModule.default.optionIconContainerSelected}`}
-          ${_stylesModule.default.optionIconContainer}
-        `
+    className: "\n          ".concat(classes.optionIconContainer, "\n          ").concat(isSelected && "".concat(classes.optionIconContainerSelected, " ").concat(_stylesModule.default.optionIconContainerSelected), "\n          ").concat(_stylesModule.default.optionIconContainer, "\n        ")
   }, IconInactive && ((0, _componentUtils.isUTIcon)(IconInactive) ? /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
     name: IconInactive,
-    className: `${classes.optionIcon} ${_stylesModule.default.optionIcon}`
+    className: "".concat(classes.optionIcon, " ").concat(_stylesModule.default.optionIcon)
   }, iconProps.inactive)) : /*#__PURE__*/_react.default.createElement(IconInactive, {
-    className: `${classes.optionIcon} ${_stylesModule.default.optionIcon}`
+    className: "".concat(classes.optionIcon, " ").concat(_stylesModule.default.optionIcon)
   })), IconActive && ((0, _componentUtils.isUTIcon)(IconActive) ? /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
     name: IconActive,
-    className: `${classes.optionIcon} ${_stylesModule.default.optionIconSelected} ${classes.optionIconSelected}`
+    className: "".concat(classes.optionIcon, " ").concat(_stylesModule.default.optionIconSelected, " ").concat(classes.optionIconSelected)
   }, iconProps.active)) : /*#__PURE__*/_react.default.createElement(IconActive, {
-    className: `${classes.optionIcon} ${_stylesModule.default.optionIconSelected} ${classes.optionIconSelected}`
+    className: "".concat(classes.optionIcon, " ").concat(_stylesModule.default.optionIconSelected, " ").concat(classes.optionIconSelected)
   }))), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
     disableTypography: true,
-    className: `
-          ${classes.optionLabel}
-          ${isSelected && classes.optionLabelSelected}
-          ${!open && _stylesModule.default.hidden}
-        `,
+    className: "\n          ".concat(classes.optionLabel, "\n          ").concat(isSelected && classes.optionLabelSelected, "\n          ").concat(!open && _stylesModule.default.hidden, "\n        "),
     primary: label
   }), !open && labelAlwaysVisible && /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
     disableTypography: true,
-    className: `
-            ${_stylesModule.default.optionLabelBottom}
-            ${classes.optionLabelBottom}
-            ${isSelected && classes.optionLabelBottomSelected}
-          `,
+    className: "\n            ".concat(_stylesModule.default.optionLabelBottom, "\n            ").concat(classes.optionLabelBottom, "\n            ").concat(isSelected && classes.optionLabelBottomSelected, "\n          "),
     primary: label
   }), open && withToggleArrow && /*#__PURE__*/_react.default.createElement(_ExpandMore.default, {
-    className: `
-            ${_stylesModule.default.toggleArrow}
-            ${classes.toggleArrow}
-            ${toggleArrowActive && _stylesModule.default.toggleArrowActive}
-          `
+    className: "\n            ".concat(_stylesModule.default.toggleArrow, "\n            ").concat(classes.toggleArrow, "\n            ").concat(toggleArrowActive && _stylesModule.default.toggleArrowActive, "\n          ")
   })));
 };
 Option.propTypes = {

package/dist/components/UTSidebar/components/Toggler/index.js

@@ -24,9 +24,9 @@ const Toggler = _ref => {
     subtitle
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${classes.togglerContainer} ${_stylesModule.default.togglerContainer}`
+    className: "".concat(classes.togglerContainer, " ").concat(_stylesModule.default.togglerContainer)
   }, open ? /*#__PURE__*/_react.default.createElement("div", {
-    className: `${classes.closeDrawerContainer} ${_stylesModule.default.closeDrawerContainer}`
+    className: "".concat(classes.closeDrawerContainer, " ").concat(_stylesModule.default.closeDrawerContainer)
   }, /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
     onClick: toggleDrawer
   }, /*#__PURE__*/_react.default.createElement(_Close.default, {

package/dist/components/UTSidebar/index.js

@@ -58,11 +58,7 @@ const UTSidebar = _ref => {
     variant: isTabletOrDesktop ? 'persistent' : 'temporary',
     classes: {
       root: classes.drawerRoot,
-      paper: `
-            ${classes.drawer}
-            ${_stylesModule.default.drawer}
-            ${open ? classes.openedDrawer : _stylesModule.default.removeShadow}
-          `
+      paper: "\n            ".concat(classes.drawer, "\n            ").concat(_stylesModule.default.drawer, "\n            ").concat(open ? classes.openedDrawer : _stylesModule.default.removeShadow, "\n          ")
     },
     ModalProps: {
       onClose: handleClose
@@ -87,9 +83,9 @@ const UTSidebar = _ref => {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.sidebarContent
   }, /*#__PURE__*/_react.default.createElement(_List.default, {
-    className: `${classes.list} ${open && classes.listOpened} ${_stylesModule.default.list}`
+    className: "".concat(classes.list, " ").concat(open && classes.listOpened, " ").concat(_stylesModule.default.list)
   }, /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
-    className: `${!open && _stylesModule.default.scrollbarClosed} ${classes.listScrollbar}`,
+    className: "".concat(!open && _stylesModule.default.scrollbarClosed, " ").concat(classes.listScrollbar),
     options: {
       suppressScrollX: true
     }

package/dist/components/UTSidebar/theme.js

@@ -9,6 +9,7 @@ var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.
 var _fontSizesModule = _interopRequireDefault(require("../../scss/variables/fontSizes.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const retrieveStyle = _ref => {
+  var _theme$UTSidebar, _theme$UTSidebar2, _theme$UTSidebar3, _theme$UTSidebar4, _theme$UTSidebar5, _theme$UTSidebar6, _theme$UTSidebar7, _theme$UTSidebar8, _theme$UTSidebar9, _theme$UTSidebar10, _theme$UTSidebar11, _theme$UTSidebar12, _theme$UTSidebar13, _theme$UTSidebar14, _theme$UTSidebar15, _theme$UTSidebar16;
   let {
     theme
   } = _ref;
@@ -107,24 +108,24 @@ const retrieveStyle = _ref => {
       width: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'listOpened', 'width'])
     },
     logoBadgeOpen: {
-      backgroundColor: theme?.UTSidebar?.logoBadgeOpen?.backgroundColor,
-      borderRadius: theme?.UTSidebar?.logoBadgeOpen?.borderRadius || 8,
-      color: theme?.UTSidebar?.logoBadgeOpen?.color,
-      fontSize: theme?.UTSidebar?.logoBadgeOpen?.fontSize || _fontSizesModule.default.small,
-      fontWeight: theme?.UTSidebar?.logoBadgeOpen?.fontWeight || 600,
-      margin: theme?.UTSidebar?.logoBadgeOpen?.margin || '12px auto 24px',
-      maxWidth: theme?.UTSidebar?.logoBadgeOpen?.maxWidth || '96%',
-      padding: theme?.UTSidebar?.logoBadgeOpen?.padding || '2px 8px'
+      backgroundColor: theme === null || theme === void 0 || (_theme$UTSidebar = theme.UTSidebar) === null || _theme$UTSidebar === void 0 || (_theme$UTSidebar = _theme$UTSidebar.logoBadgeOpen) === null || _theme$UTSidebar === void 0 ? void 0 : _theme$UTSidebar.backgroundColor,
+      borderRadius: (theme === null || theme === void 0 || (_theme$UTSidebar2 = theme.UTSidebar) === null || _theme$UTSidebar2 === void 0 || (_theme$UTSidebar2 = _theme$UTSidebar2.logoBadgeOpen) === null || _theme$UTSidebar2 === void 0 ? void 0 : _theme$UTSidebar2.borderRadius) || 8,
+      color: theme === null || theme === void 0 || (_theme$UTSidebar3 = theme.UTSidebar) === null || _theme$UTSidebar3 === void 0 || (_theme$UTSidebar3 = _theme$UTSidebar3.logoBadgeOpen) === null || _theme$UTSidebar3 === void 0 ? void 0 : _theme$UTSidebar3.color,
+      fontSize: (theme === null || theme === void 0 || (_theme$UTSidebar4 = theme.UTSidebar) === null || _theme$UTSidebar4 === void 0 || (_theme$UTSidebar4 = _theme$UTSidebar4.logoBadgeOpen) === null || _theme$UTSidebar4 === void 0 ? void 0 : _theme$UTSidebar4.fontSize) || _fontSizesModule.default.small,
+      fontWeight: (theme === null || theme === void 0 || (_theme$UTSidebar5 = theme.UTSidebar) === null || _theme$UTSidebar5 === void 0 || (_theme$UTSidebar5 = _theme$UTSidebar5.logoBadgeOpen) === null || _theme$UTSidebar5 === void 0 ? void 0 : _theme$UTSidebar5.fontWeight) || 600,
+      margin: (theme === null || theme === void 0 || (_theme$UTSidebar6 = theme.UTSidebar) === null || _theme$UTSidebar6 === void 0 || (_theme$UTSidebar6 = _theme$UTSidebar6.logoBadgeOpen) === null || _theme$UTSidebar6 === void 0 ? void 0 : _theme$UTSidebar6.margin) || '12px auto 24px',
+      maxWidth: (theme === null || theme === void 0 || (_theme$UTSidebar7 = theme.UTSidebar) === null || _theme$UTSidebar7 === void 0 || (_theme$UTSidebar7 = _theme$UTSidebar7.logoBadgeOpen) === null || _theme$UTSidebar7 === void 0 ? void 0 : _theme$UTSidebar7.maxWidth) || '96%',
+      padding: (theme === null || theme === void 0 || (_theme$UTSidebar8 = theme.UTSidebar) === null || _theme$UTSidebar8 === void 0 || (_theme$UTSidebar8 = _theme$UTSidebar8.logoBadgeOpen) === null || _theme$UTSidebar8 === void 0 ? void 0 : _theme$UTSidebar8.padding) || '2px 8px'
     },
     logoBadgeClose: {
-      backgroundColor: theme?.UTSidebar?.logoBadgeClose?.backgroundColor,
-      borderRadius: theme?.UTSidebar?.logoBadgeClose?.borderRadius || 8,
-      color: theme?.UTSidebar?.logoBadgeClose?.color,
-      fontSize: theme?.UTSidebar?.logoBadgeClose?.fontSize || _fontSizesModule.default.small,
-      fontWeight: theme?.UTSidebar?.logoBadgeClose?.fontWeight || 600,
-      margin: theme?.UTSidebar?.logoBadgeClose?.margin || '12px auto 24px',
-      maxWidth: theme?.UTSidebar?.logoBadgeClose?.maxWidth || '96%',
-      padding: theme?.UTSidebar?.logoBadgeClose?.padding || '2px 8px'
+      backgroundColor: theme === null || theme === void 0 || (_theme$UTSidebar9 = theme.UTSidebar) === null || _theme$UTSidebar9 === void 0 || (_theme$UTSidebar9 = _theme$UTSidebar9.logoBadgeClose) === null || _theme$UTSidebar9 === void 0 ? void 0 : _theme$UTSidebar9.backgroundColor,
+      borderRadius: (theme === null || theme === void 0 || (_theme$UTSidebar10 = theme.UTSidebar) === null || _theme$UTSidebar10 === void 0 || (_theme$UTSidebar10 = _theme$UTSidebar10.logoBadgeClose) === null || _theme$UTSidebar10 === void 0 ? void 0 : _theme$UTSidebar10.borderRadius) || 8,
+      color: theme === null || theme === void 0 || (_theme$UTSidebar11 = theme.UTSidebar) === null || _theme$UTSidebar11 === void 0 || (_theme$UTSidebar11 = _theme$UTSidebar11.logoBadgeClose) === null || _theme$UTSidebar11 === void 0 ? void 0 : _theme$UTSidebar11.color,
+      fontSize: (theme === null || theme === void 0 || (_theme$UTSidebar12 = theme.UTSidebar) === null || _theme$UTSidebar12 === void 0 || (_theme$UTSidebar12 = _theme$UTSidebar12.logoBadgeClose) === null || _theme$UTSidebar12 === void 0 ? void 0 : _theme$UTSidebar12.fontSize) || _fontSizesModule.default.small,
+      fontWeight: (theme === null || theme === void 0 || (_theme$UTSidebar13 = theme.UTSidebar) === null || _theme$UTSidebar13 === void 0 || (_theme$UTSidebar13 = _theme$UTSidebar13.logoBadgeClose) === null || _theme$UTSidebar13 === void 0 ? void 0 : _theme$UTSidebar13.fontWeight) || 600,
+      margin: (theme === null || theme === void 0 || (_theme$UTSidebar14 = theme.UTSidebar) === null || _theme$UTSidebar14 === void 0 || (_theme$UTSidebar14 = _theme$UTSidebar14.logoBadgeClose) === null || _theme$UTSidebar14 === void 0 ? void 0 : _theme$UTSidebar14.margin) || '12px auto 24px',
+      maxWidth: (theme === null || theme === void 0 || (_theme$UTSidebar15 = theme.UTSidebar) === null || _theme$UTSidebar15 === void 0 || (_theme$UTSidebar15 = _theme$UTSidebar15.logoBadgeClose) === null || _theme$UTSidebar15 === void 0 ? void 0 : _theme$UTSidebar15.maxWidth) || '96%',
+      padding: (theme === null || theme === void 0 || (_theme$UTSidebar16 = theme.UTSidebar) === null || _theme$UTSidebar16 === void 0 || (_theme$UTSidebar16 = _theme$UTSidebar16.logoBadgeClose) === null || _theme$UTSidebar16 === void 0 ? void 0 : _theme$UTSidebar16.padding) || '2px 8px'
     },
     option: {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSidebar', 'option', 'backgroundColor']),

package/dist/components/UTSkeleton/index.js

@@ -10,11 +10,12 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const SkeletonWrapper = (0, _reactSkeletor.createSkeletonElement)('div', _stylesModule.default.skeleton);
 const hasMock = string => {
+  var _string$props$childre;
   if (string && string.props.source) return string.props.source.toString().includes('MOCK');
-  if (string && string.props.children) return string.props.children.toString().includes('MOCK') || string.props.children?.props?.children?.toString().includes('MOCK');
+  if (string && string.props.children) return string.props.children.toString().includes('MOCK') || ((_string$props$childre = string.props.children) === null || _string$props$childre === void 0 || (_string$props$childre = _string$props$childre.props) === null || _string$props$childre === void 0 || (_string$props$childre = _string$props$childre.children) === null || _string$props$childre === void 0 ? void 0 : _string$props$childre.toString().includes('MOCK'));
 };
 const hiddenChildren = child => /*#__PURE__*/_react.default.cloneElement(child, {
-  className: `${child.className} ${_stylesModule.default.skeletonHiddenChild}`
+  className: "".concat(child.className, " ").concat(_stylesModule.default.skeletonHiddenChild)
 });
 class Skeleton extends _react.default.PureComponent {
   render() {

package/dist/components/UTStatus/index.js

@@ -26,9 +26,9 @@ const UTStatus = _ref => {
     variant,
     withoutIcon
   } = _ref;
-  const StatusIcon = Icon ?? (0, _theme.defaultIconMapper)(variant);
+  const StatusIcon = Icon !== null && Icon !== void 0 ? Icon : (0, _theme.defaultIconMapper)(variant);
   return /*#__PURE__*/_react.default.createElement(_UTSkeleton.default, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${classes.root} ${className}`,
+    className: "".concat(classes.root, " ").concat(className),
     title: title
   }, withoutIcon ? null : /*#__PURE__*/_react.default.createElement(StatusIcon, {
     className: classes.icon

package/dist/components/UTStepper/components/Connectors/index.js

@@ -16,15 +16,13 @@ const Connectors = _ref => {
     isCompleted,
     numberOfSteps
   } = _ref;
-  const connectorMaxWidth = `${100 / (numberOfSteps - 1)}%`;
-  const containerMaxWidth = `${100 - 100 / numberOfSteps}%`;
+  const connectorMaxWidth = "".concat(100 / (numberOfSteps - 1), "%");
+  const containerMaxWidth = "".concat(100 - 100 / numberOfSteps, "%");
   const connectors = new Array(numberOfSteps - 1).fill(null).map((key, index) => /*#__PURE__*/_react.default.createElement("div", {
-    className: `
-        ${_stylesModule.default.connector} ${classes.connector} ${isCompleted(index + 1) && classes.coloredProgress}
-      `
+    className: "\n        ".concat(_stylesModule.default.connector, " ").concat(classes.connector, " ").concat(isCompleted(index + 1) && classes.coloredProgress, "\n      ")
     // eslint-disable-next-line react/no-array-index-key
     ,
-    key: `connector_${index}`,
+    key: "connector_".concat(index),
     style: {
       maxWidth: withPadding ? connectorMaxWidth : null,
       height: 2
@@ -33,7 +31,7 @@ const Connectors = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.wrapper
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.connectorContainer}`,
+    className: "".concat(_stylesModule.default.connectorContainer),
     style: {
       maxWidth: withPadding ? containerMaxWidth : null
     }